body {
   font-family: Arial, sans-serif;
   background-color: #fff;
   margin: 0;
   padding: 0;
}
h1{
font-weight: 900;
font-size: 33px;
letter-spacing: 0.1em;
line-height: 98px;
text-align: center;
color: #195b3e;
margin: 60px auto;
}

h2  {
font-size: 19px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 40px;
color: #14502e;
margin: 40px auto;
}

@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

.wrapper{
  overflow: hidden;
}


.box{
  width: 100%;
  margin:0 auto;
  padding:0 40px;
}

p {
font-weight: 500;
font-size: 16px;
letter-spacing: 0.08em;
line-height: 35px;
text-align: left;
color: #4A4A4A;
margin-bottom:2em;
text-align:justify;
}
.caption {
font-weight: normal;
font-size: 12px;
line-height: 31px;
text-align: left;
color: #707070;
}
/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.syatyo {
font-size: 15px;
letter-spacing: 0.1em;
line-height: 30px;
text-align: center;
color: #707070;
}

.syatyo2 {
font-size: 14px;
letter-spacing: 0.08em;
line-height: 30px;
text-align: left;
color: #707070;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/*========= スクロールダウンのためのCSS ===============*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:100px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #eee;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:-5px;}
     100%{bottom:45px;}


 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#eee;
}


/*========= レイアウトのためのCSS ===============*/
#header{
  width:100%;
  height: 100vh;
  position: relative;
} 

#header:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;

}

#container{
  position: relative;
  z-index:1;
  background:#fff;
  text-align: center;
}
@media screen and (min-width:769px){
  #header:before {
  /*背景画像設定*/
  background:url("https://d2w53g1q050m78.cloudfront.net/aotsubucojp/uploads/assets/lp/33thstory/34thstory_fv_pc_back.jpg") no-repeat center;
  background-size:cover;
  }
}
@media screen and (max-width:768px){
    #header{
  height: 100vh;    
    }
    #header:before {
      background:url("https://d2w53g1q050m78.cloudfront.net/aotsubucojp/uploads/assets/lp/33thstory/34thstory_fv.jpg") no-repeat center;
        background-size:cover;
      height: 100vh;    
    }
}


/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}