@charset "UTF-8";
/* CSS Document */

/*画面遷移*/
.loading::before, .loading::after{
  content: "";  position: fixed; /*画面に固定表示*/  top: 0;  left: 0;  width: 100vw; /*画面幅*/  height: 100vh; /*画面の高さ*/  transform-origin: right; /*動く向き*/}
.loading::before{/***前面の背景***/  background: #F0FACB; /*濃い緑*/  z-index: 1000; /*前面*/  animation: right-move 0.4s forwards;  animation-delay: 0.6s;}
.loading::after{/***背面の背景***/  background: #fff; /*薄い緑*/  z-index: 999; /*背面*/  animation: right-move 0.8s forwards;   animation-delay: 0.9s; /*上の背景が動き終わった後まで遅延*/}
@keyframes right-move{/***背景が動くアニメーション***/
  0%{    transform: scaleX(1); /*MAX幅*/  }
  100% {    transform: scaleX(0); /*幅0*/    visibility: hidden; /*非表示に*/  }
}

/*読み込み時*/
.fadeup01_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 0.2s;animation-fill-mode:forwards;opacity: 0;}
.fadeup02_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 0.4s;animation-fill-mode:forwards;opacity: 0;}
.fadeup03_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 0.6s;animation-fill-mode:forwards;opacity: 0;}
.fadeup04_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 0.8s;animation-fill-mode:forwards;opacity: 0;}
.fadeup05_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 1.0s;animation-fill-mode:forwards;opacity: 0;}
.fadeup06_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 1.2s;animation-fill-mode:forwards;opacity: 0;}
.fadeup07_loading{animation-name:logo_popup;animation-duration:1s;animation-delay: 1.4s;animation-fill-mode:forwards;opacity: 0;}
@keyframes logo_popup{
  from {    opacity: 0;  transform: translateY(20px);  }
  to {    opacity: 1;  transform: translateY(0);  }
}

/*スクロール時*/
.fadeup01{opacity: 0; transition: all .3s linear 0.6s/*←開始時間*/; transform: translateY(30px);  }
.fadeup02{opacity: 0; transition: all .3s linear 0.8s/*←開始時間*/; transform: translateY(30px);  }
.fadeup03{opacity: 0; transition: all .3s linear 1.0s/*←開始時間*/; transform: translateY(30px);  }
.fadeup04{opacity: 0; transition: all .3s linear 1.2s/*←開始時間*/; transform: translateY(30px);  }
.fadeup05{opacity: 0; transition: all .3s linear 1.4s/*←開始時間*/; transform: translateY(30px);  }
.fadeup06{opacity: 0; transition: all .3s linear 1.6s/*←開始時間*/; transform: translateY(30px);  }
.fadeup07{opacity: 0; transition: all .3s linear 1.8s/*←開始時間*/; transform: translateY(30px);  }
.fadeup01.active,.fadeup02.active,.fadeup03.active,.fadeup04.active,.fadeup05.active,.fadeup06.active,.fadeup07.active{	opacity: 1;		transform: translateY(0);     }

/*スクロール時 カーテン*/
.curtain {position: relative;margin: 0 ;  overflow: hidden;}
.curtain::before {position: absolute;top: 0;left: 0;right: 0;bottom: 0;  width: 100%;  height: 100%;  background-color:#e5f868;  content: "";  transition: 1s;  transform: translateX(0%);}
.curtain.curtain_show::before {  transform: translateX(101%);}

/*カーテン 読み込み時*/
.curtain_effect_loading{  position: relative;display:inline-block;}
.curtain_effect_loading span{  transition: all 1s 1s ease;  opacity: 0;  padding: 0;margin: 0;	}
.curtain_effect_loading:after {  display: inline;  content: '';  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  transform: scaleX(0);  background:#fa6474;}
.curtain_effect_loading.active:after {  animation:curtain_effect 0.8s ease-in-out 0.8s 1 normal both running;}

.curtain_effect_loading02{  position: relative;display:inline-block;}
.curtain_effect_loading02 span{  transition: all 1s 1s ease;  opacity: 0;  padding: 0;margin: 0;	}
.curtain_effect_loading02:after {  display: inline;  content: '';  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  transform: scaleX(0);  background:#f0facb;}
.curtain_effect_loading02.active:after {  animation:curtain_effect 0.4s ease-in-out 0.1s 1 normal both running;}

@keyframes curtain_effect{
	0% {    transform-origin: left center;    transform: scaleX(1);  }
	49.999% {    transform-origin: left center;    transform: scaleX(1);  }
	50% {    transform-origin: right center;    transform: scaleX(1);  }
	100% {    transform-origin: right center;    transform: scaleX(0);  }
}