/* fadeIn */

.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeInTrigger{
      opacity: 0;
  }
  


  .fadeIn2 {
    animation-name:fadeInAnime;
    animation-duration:1.0s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }

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

/*pagetop*/
#page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background:#295F4E;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase; 
    text-decoration: none;
    font-size:0.6rem;
    transition:all 0.3s;
  }
  
  #page-top a:hover{
    background: #777;
  }
  
  /*リンクを右下に固定*/
  #page-top {
    position: fixed;
    right: 10px;
    bottom:10px;
    z-index: 2;
      /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  
  /*　上に上がる動き　*/
  
  #page-top.UpMove{
    animation: UpAnime 0.5s forwards;
  }

  @keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /*　下に下がる動き　*/
  
  #page-top.DownMove{
    animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(0);
    }
    to {
      opacity: 1;
    transform: translateY(100px);
    }
  }

/* キャッチフレーズが光りながら出現 */
.glowAnime {
  position: absolute;
  top: 15%;
  left: 10%;
  font-family: ivyjournal, sans-serif;
  font-weight: 100;
  font-size: 150px;
  color: #fff;
  /* text-shadow    : 
  2px  2px 1px #295F4E,
 -2px  2px 1px #295F4E,
  2px -2px 1px #295F4E,
 -2px -2px 1px #295F4E,
  2px  0px 1px #295F4E,
  0px  2px 1px #295F4E,
 -2px  0px 1px #295F4E,
  0px -2px 1px #295F4E;  */
}

@media screen and (max-width: 1180px) {
  .glowAnime {
    position: absolute;
    top: 15%;
    left: 10%;
    font-family: ivyjournal, serif;
    font-size: 80px;
    color: #fff;
  }
}


.mirai {
  position: absolute;
  top: 25%;
  left: 10%;
}

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

/* @keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
} */

@keyframes glow_anime_on{
	0% { opacity:0; }
	50% { opacity:0.8;}
	100% { opacity:1;}
}

@media screen and (max-width: 530px) {
  .glowAnime {
    top: 18%;
    left: 5%;
    font-family: ivyjournal, serif;
    font-size: 40px;
    /* text-shadow    : 
    2px  2px 1px #295F4E,
   -2px  2px 1px #295F4E,
    2px -2px 1px #295F4E,
   -2px -2px 1px #295F4E,
    2px  0px 1px #295F4E,
    0px  2px 1px #295F4E,
   -2px  0px 1px #295F4E,
    0px -2px 1px #295F4E;  */
  }

  /* .mirai {
    top: 35%;
  } */
}


/* モーダルウィンドウ */
/* ボタンのデザイン */
.modal_btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  background: linear-gradient(to right bottom, #6DB193, #295F4E);
  border-radius: 5px;
  color: #fff !important;
  margin: 20px;
  transition: 0.3s;
}

.modal_btn:hover {
  opacity: .8;
}

/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);  
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: .3s;
}

/* activeクラスのついたオーバーレイ */
.overlay.active {
  /* activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ */
.modal {
  max-width: 1000px;
  width: 100%;
  height: 70vh;
  padding: 15px 20px;
  background: #fff;
  /* 位置の調整(真ん中に表示) */
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: .3s;
  overflow-y: scroll;
  z-index: 1;
}

/* activeクラスのついたモーダルウィンドウ */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
}

.modal h2 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 10px;
  text-align: center;
  padding: 20px;
}

.modal p {
  font-size: 18px;
}


/* モーダルウィンドウレスポンシブ */

@media screen and (max-width: 1180px) {


/* モーダルウィンドウ */
.modal {
  max-width: 600px;
  width: 100%;
  height: 70vh;
  padding: 15px 20px;
  background: #fff;
  /* 位置の調整(真ん中に表示) */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: .3s;
  overflow-y: scroll;
  z-index: 1;
}


.modal h2 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 10px;
  text-align: center;
  padding: 20px;
}

.modal p {
  font-size: 16px;
}
}

@media screen and (max-width: 530px) {
  /* ボタンのデザイン */
.modal_btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  background: linear-gradient(to right bottom, #6DB193, #295F4E);
  border-radius: 5px;
  color: #fff !important;
  margin: 20px;
  transition: 0.3s;
}

.modal_btn:hover {
  opacity: .8;
}

/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);  
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: .3s;
}

/* activeクラスのついたオーバーレイ */
.overlay.active {
  /* activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ */
.modal {
  max-width: 280px;
  width: 100%;
  height: 70vh;
  padding: 20px;
  background: #fff;
  /* 位置の調整(真ん中に表示) */
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  opacity: 0;
  visibility: hidden;
  /* 表示の変化にかかる時間 */
  transition: .3s;
  overflow-y: scroll;
  z-index: 1;
}

/* activeクラスのついたモーダルウィンドウ */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* モーダルウィンドウ内の閉じるボタン */
.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  font-size: 20px;
}

.modal h2 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 10px;
  text-align: center;
  padding: 20px;
}

.modal p {
  font-size: 13px;
}
}
/* モーダルウィンドウレスポンシブここまで */



/* タイトルfadeUp */
/*全共通*/

.slide-in {
	overflow: hidden;
}

/* 上下のアニメーション*/
.downAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
        transform: translateY(-100%);/* 要素を下の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}

/* タイトルfadeUp ここまで*/