/*デフォルト設定*/

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

main{
    max-width: 750px;
    margin: 0 auto;
    width: 100%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

img{
    width: 100%;
    vertical-align: bottom;
}

.relative{
  position: relative;
}

.absolute{
  position: absolute;
}


li{list-style:none;}

.list{
  margin: 0;
}

a{
  color:inherit;
  text-decoration: none;
}

a:hover {
  text-decoration:underline;
}

/*btn_fix*/
#flow-btn {
  position: fixed;
  bottom: 1%;
  right: 1%;
  z-index: 2;
  max-width: 150px;
  opacity: 0;
  transition: opacity 0.5s; /* フェードアウトのアニメーション */
}

/* 固定ボタン動き用 */

.fadeIn {
  opacity: 1 !important;
}

.fadeOut {
  opacity: 0 !important;
}



/*fv*/
.main__fv__bg {
  mix-blend-mode: multiply;
}

/*cta_btn*/
.main__cta_btn {
    width: 88%;
    top: 6%;
    left: 5%;
  }

.fv__cta_btn {
    width: 93%;
    top: 54%;
    left: 4%;
}
  
/*voice*/
.main__voice__img001 {
    width: 81%;
    top: 59%;
    left: 9.5%;
}
.main__voice__img002 {
    width: 81%;
    top: 53%;
    left: 9.5%;
}

/*check*/
.main__check__img001 {
  width: 92%;
  top: 52%;
  left: 2%;
}
.main__check__img002 {
  width: 92%;
  top: 32%;
  left: 2%;
}

/*result*/
.main__result__img001 {
  width: 86%;
  top: 28%;
  left: 6.5%;
}
.main__result__img002 {
  width: 87%;
  top: 52%;
  left: 5%;
}

/*offer*/
.main__offer_btn {
width: 95%;
    top: 43%;
    left: 1.5%;
}

/*thinking*/
.main__thinking__img001 {
  width: 85%;
  top: 15%;
  left: 7%;
}
.main__thinking__img002 {
  width: 39%;
  top: 0%;
  left: 29%;
}
.main__thinking__img003 {
  width: 87%;
  top: 36%;
  left: 7%;
}

/*apec*/
.main__apec__img001 {
  width: 94%;
  top: 39%;
  left: 2.5%;
}
.main__apec__img002 {
  width: 99%;
  bottom: 0;
  left: 1%;
}

/*question*/
.main__question__img001 {
  width: 92%;
  top: 33%;
  left: 4%;
}
.main__question__img002 {
  width: 100%;
  top: 63%;
  left: 0;
}

/*point*/
.main__point__img001 {
  width: 96%;
  top: 18%;
  left: 2%;
}
.main__point__img002 {
  width: 16%;
  top: 74%;
  right: 5%;
}


/*movie*/
.main__movie__img001 {
  width: 89%;
  top: 4%;
  left: 3.5%;
}

.main__movie__img002 {
  width: 89%;
  top: 2%;
  left: 7.5%;
}

.main__movie__img003 {
  width: 89%;
  top: 4%;
  left: 3.5%;
}

.main__movie__img004 {
  width: 89%;
  top: 2%;
  left: 7.5%;
}

.main__movie__img005 {
  width: 89%;
  top: 7%;
  left: 3.5%;
}



/*teacher*/
.main__teacher__img001 {
  width: 100%;
  top: 24%;
  left: 0;
}

.main__teacher__img002 {
  width: 90%;
  top: 61%;
  left: 5%;
}



/*mile*/
.main__mile__img001 {
  width: 90%;
  top: 39%;
  left: 6.5%;
}

.main__mile__img002 {
  width: 91%;
  top: 74%;
  left: 1%;
}

/*voice02*/
.main__voice02__img001 {
  width: 89%;
  top: 10%;
  left: 5.5%;
}

.main__voice02__img002 {
  width: 94%;
  top: 54%;
  left: 5.98%;
}

.footer_menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}



/*アニメーション*/
.delay02s {
  animation-delay: 0.2s;
  opacity: 0;
}
.delay05s {
  animation-delay: 0.5s;
  opacity: 0;
}

.delay08s {
  animation-delay: 0.8s;
  opacity: 0;
}
.delay10s {
  animation-delay: 1s;
  opacity: 0;
}
.delay12s {
  animation-delay: 1.2s;
  opacity: 0;
}
.delay15s {
  animation-delay: 1.5s;
  opacity: 0;
}
.delay18s {
  animation-delay: 1.8s;
  opacity: 0;
}
.delay20s {
  animation-delay: 2s;
  opacity: 0;
}
.delay25s {
  animation-delay: 2.5s;
  opacity: 0;
}
.delay30s {
  animation-delay: 3s;
  opacity: 0;
}
.delay35s {
  animation-delay: 3.5s;
  opacity: 0;
}



/*フェード*/
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0
  } /*アニメーション開始時は不透明度0%*/
  100% {
    opacity: 1
  } /*アニメーション終了時は不透明度100%*/
}
.fade.active {
  animation-name: fadeIn;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}





/*スライド*/
@keyframes slideInL {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 100;
  }
}

.slideL.active {
	animation-name: slideInL;
	animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes slideInR {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 100;
  }
}

.slideR.active {
	animation-name: slideInR;
	animation-duration: 1s;
    animation-fill-mode: forwards;
}




/*ポップアップ*/
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.popup10s.active {
  animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

.popup20s.active {
  animation: popup 2s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
 




/*明るい*/
@keyframes bright { /*animation-nameで設定した値を書く*/
  0% {
    filter: brightness(7.4);
  } /*アニメーション開始時は不透明度0%*/
  100% {
    filter: brightness(1.0);
  } /*アニメーション終了時は不透明度100%*/
}


.bright.active {
    animation-name: bright;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 1;
}

.bright {
    animation-name: bright;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 1;
}
 



/*下から上に*/


.slideUp.active {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}

@keyframes slideUp { /*animation-nameで設定した値を書く*/
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 100;
    transform: translateY(0);
  }
}
    

/*バウンド*/
.bound.active {
  animation-name: bound;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /*これで値を保持*/
}
@keyframes bound {
  0% {
    transform: scale(0.7, 0.7) translate(0%, 0%);
    opacity: 0;
  }
  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
    opacity: 1;
  }
}

/*fuwafuwa*/
.fuwafuwa {
  animation-name: fuwafuwa;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

@keyframes fuwafuwa {
0%, 100% {
  transform: scale(1);
}
50% {
  transform: scale(0.95);
}
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;

  /* ←ここがポイント！ */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

#loading-screen.fade-out {
  animation: fadeOut 0.8s ease-in forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

#loading-screen img {
  width: 100%;
  max-width: 750px !important;
  height: auto;
  display: block;
}