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

/*ローディング*************************/

.anime_load01{animation:anime_load01 0.5s ease-in-out 0.2s forwards;  opacity: 0;}
@keyframes anime_load01{  from {  transform: scale(0.9);  opacity: 1; }  to {      transform: scale(1);  opacity: 1;  }    }


.anime_load02{animation:anime_load02 0.3s ease-in-out 0.5s forwards;  opacity: 0;}
@keyframes anime_load02{   0% {     opacity: 0;     transform: translateY(20px);    }      100%{        opacity: 1;         transform: translateY(0);     } }


.anime_load03{animation:anime_load03 0.3s ease-in-out 0.5s forwards;  opacity: 0;}
@keyframes anime_load03{  0% {     opacity: 0;     transform: translateY(-20px);    }      100%{        opacity: 1;         transform: translateY(0);}}


.anime_load04{animation:anime_load04 0.6s ease-in-out 0.7s forwards;  opacity: 0;}
@keyframes anime_load04{ 0% {     opacity: 0;     transform: translateY(-20px);    }      100%{        opacity: 1;         transform: translateY(0);}}



/*スクロール時*************************/
.fadeup01{opacity: 0; transition: all .5s ease-in-out 0.5s/*←開始時間*/; transform: translateY(10px);  }
.fadeup02{opacity: 0; transition: all .5s ease-in-out 0.7s/*←開始時間*/; transform: translateY(10px);  }
.fadeup03{opacity: 0; transition: all .5s ease-in-out 0.9s/*←開始時間*/; transform: translateY(10px);  }
.fadeup04{opacity: 0; transition: all .5s ease-in-out 1.1s/*←開始時間*/; transform: translateY(10px);  }
.fadeup05{opacity: 0; transition: all .5s ease-in-out 1.3s/*←開始時間*/; transform: translateY(10px);  }
.fadeup06{opacity: 0; transition: all .5s ease-in-out 1.5s/*←開始時間*/; transform: translateY(10px);  }
.fadeup07{opacity: 0; transition: all .5s ease-in-out 1.7s/*←開始時間*/; transform: translateY(10px);  }
.fadeup08{opacity: 0; transition: all .5s ease-in-out 1.9s/*←開始時間*/; transform: translateY(10px);  }
.fadeup09{opacity: 0; transition: all .5s ease-in-out 2.1s/*←開始時間*/; transform: translateY(10px);  }
.fadeup10{opacity: 0; transition: all .5s ease-in-out 2.3s/*←開始時間*/; transform: translateY(10px);  }
.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);     }



.anime-text{  opacity: 0;  clip-path: inset(100% 0 0 0);  transition: clip-path 1s ease-in-out 0.8s/*←開始*/, opacity 1s ease-in-out;}
.anime-text.active {  opacity: 1;  clip-path: inset(0 0 0 0);}

.brands_a04::before{ content: "";  position: absolute; bottom: 0%;left: 0%;  width:100%;  height: 30%;background:linear-gradient(90deg, #c4ff00, #ffff00);transition: all .3s linear 0.5s; transform: translateX(-100%);z-index: 0}
.brands_a04.active::before{transform: translateX(0%);}


.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: 2;    transition: 1.0s;transition-delay: 1.0s;}
.curtain.active::before{    transform: translateX(100%);}
.curtain img{    opacity: 1;    transition: 1.0s;}
.curtain.active img{    opacity: 1;}