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

/**************************読み込み時******************************/
/*トップ*/
.mi_a01{  animation-name:mi_a01;  animation-duration:3.6s; animation-delay:0.1s;	animation-fill-mode:both;  }
@keyframes mi_a01{  from {  transform: scale(1.05);  opacity: 0; }  to {      transform: scale(1);  opacity: 1;  }}

.mi_a02{  animation-name:mi_a02;  animation-duration:0.8s; animation-delay:0.9s;	animation-fill-mode:both; animation-timing-function: ease-in; }
@keyframes mi_a02{  from {  transform: scale(1.2);  opacity:0; filter: blur(50px);}  to {      transform: scale(1);  opacity: 1; filter: blur(0px); }}

.mi_a03 {  animation: mi_a03 1.0s ease-in-out 1.2s forwards;  opacity: 0;}
@keyframes mi_a03 {  0% {    clip-path: inset(0 0 100% 0);    opacity: 1;  }  100% {    clip-path: inset(0 0 0 0);     opacity: 1;  }}

.mi_a04{ animation: mi_a04 1.0s ease-in-out 2.1s forwards;  opacity: 0; }
@keyframes mi_a04{  0% {    clip-path: inset(0 0 100% 0);   opacity: 1;  }  100% {    clip-path: inset(0 0 0 0);    opacity: 1;   }}

.mi_a05{ animation-name:mi_a05;  animation-duration:0.5s; animation-delay:2.9s;	animation-fill-mode:both;  }
@keyframes mi_a05{  0% {    opacity:0;  }  100% { opacity: 1;   }}

.mi_a06{  animation-name:mi_a06;  animation-duration:0.8s; animation-delay:3.0s;	animation-fill-mode:both;  }
@keyframes mi_a06{  from {  transform: scale(1.1);  opacity:0; filter: blur(5px);}  to {      transform: scale(1);  opacity: 1; filter: blur(0px); }}

.mi_a07{  animation-name:mi_a07;  animation-duration:0.6s; animation-delay:0.1s;	animation-fill-mode:both;  }
@keyframes mi_a07{  from {  opacity: 1; }  to {   opacity: 0.5 }}

/*下層*/
.sec_a01{  animation-name:sec_a01;  animation-duration:1.0s; animation-delay:0.1s;	animation-fill-mode:both;  }
@keyframes sec_a01{  from {  transform: scale(1.1);  opacity:0; }  to {      transform: scale(1);  opacity: 1;  }}

.sec_a02{  animation:sec_a02 1.0s ease-in-out 0.5s forwards;  opacity: 0;}
@keyframes sec_a02{  0% {    clip-path: inset(0 0 100% 0);    opacity: 1;  }  100% {    clip-path: inset(0 0 0 0);     opacity: 1;  }}




/**************************スクロール時****************************/
/*トップ*/
/*イントロダクション*/
.intro_a01{ display:block;/*inline-blockでも可*/ transform: translateY(100%);  transition: transform 0.8s ease-out;}
.intro_a01.active{   transform: translateY(0);}

.intro_a02{opacity: 0; transition: all .8s ease-out 0.8s; transform: translateY(0px);  }
.intro_a03{opacity: 0; transition: all .8s ease-out 1.1s; transform: translateY(0px);  }
.intro_a04{opacity: 0; transition: all .8s ease-out 1.4s; transform: translateY(0px);  }
.intro_a05{opacity: 0; transition: all .8s ease-out 1.6s; transform: translateY(0px);  }
.intro_a02.active,.intro_a03.active,.intro_a04.active,.intro_a05.active{	opacity: 1;		transform: translateY(0);     }

.core_ripple {  position: relative;  display: block; }
.core_ripple::before,
.core_ripple::after {  content: "";  position: absolute;  top: 50%;  left: 50%;  width: 100%;  height: 100%;  border-radius: 50%;  background: rgba(255, 255, 255, 0.9); /* 半透明の白 */  box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);  transform: translate(-50%, -50%) scale(1.1);  opacity: 0;  animation: rippleEffect 2.5s ease-out infinite; /* ease-outを追加して滑らかに */  z-index: -1;}
.core_ripple::after {  animation-delay: 1.25s;}
@keyframes rippleEffect {
	0% {    transform: translate(-50%, -50%) scale(1.1);    opacity: 0; /* 最初は透明 */  }
	20% {    opacity: 0.5; /* 少し見え始める */  }
	100% {    transform: translate(-50%, -50%) scale(1.4); /* 画像の外側へ広がる */    opacity: 0; /* 最終的に消える */  }
}

/*製品*/
.products_a01{ display:block; transform: translateY(100%);  transition: transform 0.8s ease-out;}
.products_a01.active{   transform: translateY(0);}

/*メリット*/
.merit_a01{ display:block; transform: translateY(100%);  transition: transform 0.8s ease-out 0.8s;}
.merit_a01.active{   transform: translateY(0);}

.merit_a02{ clip-path: inset(0 100% 0 0);opacity: 0;transition: clip-path 0.4s ease-out 1.6s, opacity 0.4s ease-out 1.6s;}
.merit_a02.active{  clip-path: inset(0 0 0 0); opacity: 1}

.merit_a03{ clip-path: inset(0 100% 0 0);opacity: 0;transition: clip-path 0.4s ease-out 1.8s, opacity 0.4s ease-out 1.8s;}
.merit_a03.active{  clip-path: inset(0 0 0 0); opacity: 1}

.merit_a04{opacity: 0; transition: all .5s linear 0.2s  }
.merit_a04.active{	opacity: 1;		}

/*主要コンテンツ*/
.feature_a01{ transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.0s; transform: translateX(-100%);}
.feature_a01.active{transform: translateX(0); }
.feature_a02{ transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 1.9s; transform: translateX(100%);}
.feature_a02.active{transform: translateX(0); }

/*ニュース*/
.news_a01{ clip-path: inset(0 100% 0 0);opacity: 0;transition: clip-path 0.6s ease-out 0.6s, opacity 0.6s ease-out 0.6s;}
.news_a01.active{  clip-path: inset(0 0 0 0); opacity: 1}
.news_a02{ clip-path: inset(0 100% 0 0);opacity: 0;transition: clip-path 0.6s ease-out 0.8s, opacity 0.6s ease-out 0.8s;}
.news_a02.active{ clip-path: inset(0 0 0 0); opacity: 1}


/**************************共通**************************/
.animetext-scroll01 {  opacity: 0;  clip-path: inset(0% 0 100% 0);  transition: clip-path 1s ease-in-out, opacity 1s ease-in-out;}
.animetext-scroll01.active {  opacity: 1;  clip-path: inset(0 0 0 0);}

.slidein01{opacity: 0; transition: all .2s linear .4s/*←開始時間*/;  transform: translateY(50px); }
.slidein01.active{opacity: 1;transform: translateY(0);	}

.fadeup01{opacity: 0; transition: all .5s linear 0.8s/*←開始時間*/; transform: translateY(0px);  }
.fadeup02{opacity: 0; transition: all .5s linear 0.5s/*←開始時間*/; transform: translateY(30px);  }
.fadeup03{opacity: 0; transition: all .5s linear 0.6s/*←開始時間*/; transform: translateY(30px);  }
.fadeup04{opacity: 0; transition: all .5s linear 0.7s/*←開始時間*/; transform: translateY(30px);  }
.fadeup05{opacity: 0; transition: all .5s linear 0.8s/*←開始時間*/; transform: translateY(30px);  }
.fadeup06{opacity: 0; transition: all .5s linear 0.9s/*←開始時間*/; transform: translateY(30px);  }
.fadeup07{opacity: 0; transition: all .5s linear 1.0s/*←開始時間*/; transform: translateY(30px);  }
.fadeup08{opacity: 0; transition: all .5s linear 1.1s/*←開始時間*/; transform: translateY(30px);  }
.fadeup09{opacity: 0; transition: all .5s linear 1.2s/*←開始時間*/; transform: translateY(30px);  }
.fadeup10{opacity: 0; transition: all .5s linear 1.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);     }