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

/*共通*/
.char {  display: inline-block;  transform: translateY(100%);  opacity: 0;}
.char.show {  animation: textUp 1.5s forwards;}
@keyframes textUp {  0% {    transform: translateY(100%);    opacity: 0;  }  100% {    transform: translateY(0);    opacity: 1;  }}


/*ローディング*/
.loading-wrapper.loaded {  display: none;/* アニメ終了後に完全非表示 */}
.loading-wrapper {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100vh;  z-index: 99;  overflow: hidden;}

.loading-wrapper .loading-logo {position:absolute;top:50%;left:50%;  transform: translate(-50%, -50%) ;  animation: logo-fade 1.2s ease 0.2s forwards; opacity: 0;	z-index: 999;}
.loading-wrapper .loading-logo img {  width: 200px;  height: auto;  display: block;}
@keyframes logo-fade {  0% { opacity: 0; transform: translate(-50%, -50%); }  30% { opacity: 1; transform: translate(-50%, -50%) ; }80% { opacity: 1; transform: translate(-50%, -50%) ; }100% { opacity: 0; transform: translate(-50%, -50%) ; }}

.loading-wrapper .loading {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: linear-gradient(90deg,#eceaff 0%,#ffdfe6 50%, #ffead9 100%); animation: loading_fade-out 1.7s ease forwards;  animation-delay: 1.4s;}
@keyframes loading_fade-out { 0% { opacity: 1; }  100% { opacity: 0; }}


.fade-in-text span {  opacity: 0;  filter: blur(5px);  display: inline-block;  animation: charFadeIn 1.0s forwards; /* アニメ時間を長く（0.5s → 1.0s） */  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* 終盤に減速 */}
@keyframes charFadeIn {  to {    opacity: 1;    filter: blur(0);  }}

.load_catchcopy{animation:load_catchcopy 0.8s ease 2.8s forwards;  opacity: 0;}
@keyframes load_catchcopy{   0% {     opacity: 0;     transform: translateY(0px);    }      100%{        opacity: 1;         transform: translateY(0);     } }



.load_ttl{animation:load_ttl 0.5s ease 1.2s forwards;  opacity: 0;}
@keyframes load_ttl{   0% {     opacity: 0;     transform: translateY(0px);    }      100%{        opacity: 1;         transform: translateY(0);     } }

.load_ttl_image{animation: zoomBlurIn 2.5s ease 0.3s forwards;transform: scale(1.3);  filter: blur(10px);  opacity: 1;}
@keyframes zoomBlurIn {  from {    transform: scale(1.3);    filter: blur(10px);    opacity: 1;  }  to {    transform: scale(1);    filter: blur(0);    opacity: 1;  }}



/*スクロール時*/
.curtain{position: relative;width: 100%;  height: auto;  overflow: hidden;}
.curtain::before{    content: '';    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0;    background:white;    z-index: 1;    transition: 0.8s;transition-delay: 0.3s;}
.curtain.active::before{    transform: translateX(100%);}

.zoom_anime{transition: all 4.0s ease 0.5s; transform: scale(1.5);filter: blur(5px) ; }
.zoom_anime.active{opacity: 1;  transform: scale(1);  filter: blur(0) ;	}


.fadeup_irregular01{opacity: 0;  transition: all 1.5s ease-out 1.0s; transform: translateY(100px);  }
.fadeup_irregular01.active{	opacity: 1;		transform: translateY(0);     }

.fadeup01{opacity: 0; transition: all .5s ease-in-out 0.5s/*←開始時間*/; transform: translateY(30px);  }
.fadeup02{opacity: 0; transition: all .5s ease-in-out 0.7s/*←開始時間*/; transform: translateY(30px);  }
.fadeup03{opacity: 0; transition: all .5s ease-in-out 0.9s/*←開始時間*/; transform: translateY(30px);  }
.fadeup04{opacity: 0; transition: all .5s ease-in-out 1.1s/*←開始時間*/; transform: translateY(30px);  }
.fadeup05{opacity: 0; transition: all .5s ease-in-out 1.3s/*←開始時間*/; transform: translateY(30px);  }
.fadeup06{opacity: 0; transition: all .5s ease-in-out 1.5s/*←開始時間*/; transform: translateY(30px);  }
.fadeup07{opacity: 0; transition: all .5s ease-in-out 1.7s/*←開始時間*/; transform: translateY(30px);  }
.fadeup08{opacity: 0; transition: all .5s ease-in-out 1.9s/*←開始時間*/; transform: translateY(30px);  }
.fadeup09{opacity: 0; transition: all .5s ease-in-out 2.1s/*←開始時間*/; transform: translateY(30px);  }
.fadeup10{opacity: 0; transition: all .5s ease-in-out 2.3s/*←開始時間*/; transform: translateY(30px);  }
.fadeup01.active,.fadeup02.active,.fadeup03.active,.fadeup04.active,.fadeup05.active,.fadeup06.active,.fadeup07.active,.fadeup08.active,.fadeup09.active,.fadeup10.active{	opacity: 1;		transform: translateY(0);     }

.clip_anime{opacity: 0;  clip-path: inset(100% 0 0 0); transform: translateY(50px); transition: clip-path 1.0s ease 1.0s, opacity 1s ease, transform 1.0s ease 1.0s;}
.clip_anime.active { opacity: 1;  clip-path: inset(0 0 0 0);transform: translateY(0);}