@charset "UTF-8";
/*
//
js-title01
js-img-anime
fade
fade-slow
fade-right
fade-left
list_fade
list_fade-div

//transition: CSSプロパティ名 0.2s（何秒アニメ） ease 0.2（delay）;
//（対象のプロパティ名　変化の始まりから終わりの時間　変化の仕方）
//カンマで区切って別のプロパティを複数対象にできる

//transition-property：変化対象のCSS（allは使わない）
//transition-duration：変化の開始から終了までの時間
//transition-delay：変化がいつ始まるか(遅延)
//transition-timing-function：変化の仕方

//ease(開始と終了を滑らかに)
//linear（一定）
//ease-in(開始がゆっくり)
//ease-out(終了がゆっくり)
//ease-in-out（開始と終了がゆっくり）
//steps(数字, start or end) 「steps(3,end)」は3区切りで表示。
cubic-bezier(0, 0, 0.58, 1) スピードの割り振り

//  transition: all 0.5s ease;
/*


/* 文字マスク（下から） */
.mask_down{opacity: 0;}
.mask_down.active{
opacity: 1;
clip-path: inset(0px 0px 100% 0px);
animation: mask_down 0.8s ease-in-out forwards;
}
@keyframes mask_down {
0% {clip-path: inset(0px 0px 100% 0px);}
100% {clip-path: inset(0px 0px 0px 0px);}
}


/* 1文字づつ */
@keyframes showTextFromBottom{
0%{transform: translateY( 100% );}
100%{transform: translateY( 0px );}
}
.one-txt{opacity: 0;}
.one-txt.active{opacity: 1;}
.one-txt.active span{
animation: showText 3s backwards;
display: inline-block;
}
.one-txt.active > span{
overflow: hidden;
}
.one-txt.active > span > span{
animation: showTextFromBottom 0.5s backwards;
}




/* 画像アニメーション */
.js-img-anime {
  opacity: 0;
  transform: scale(1.03);
  transition: all 1s ease 0.5s;
}
.js-img-anime.active {
  opacity: 1;
  transform: scale(1);
}

/*フェード（下から出る）*/
.fade {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.3s ease 0.5s;
}
.fade.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* ゆっくりフェード表示 */
.fade-slow{
  opacity: 0;
  transition: ease-out 1.5s;
}
.fade-slow.active{
  opacity: 1;
}


/* 右フェード */
.fade-right {
  opacity: 0;
  transform: translate(200px, 0px);
  transition: all 0.3s ease-out;
}
.fade-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* 左フェード */
.fade-left {
  opacity: 0;
  transform: translate(-200px, 0px);
  transition: all 0.3s ease-out;
}
.fade-left.active {
  opacity: 1;
  transform: translate(0, 0);
}


/* リスト内順番表示 */
.list_fade li{opacity: 0;}
.list_fade li.active{opacity:1; transition:0.5s;}



/* リスト内順番表示 */
.list_fade-div div{opacity: 0;}
.list_fade-div div.active{opacity: 1;}
.list_fade-div div.active:nth-child(1){transition:0.7s 0.1s;}
.list_fade-div div.active:nth-child(2){transition:0.7s 0.2s;}
.list_fade-div div.active:nth-child(3){transition:0.7s 0.3s;}
.list_fade-div div.active:nth-child(4){transition:0.7s 0.4s;}
.list_fade-div div.active:nth-child(5){transition:0.7s 0.5s;}
.list_fade-div div.active:nth-child(6){transition:0.7s 0.6s;}
.list_fade-div div.active:nth-child(7){transition:0.7s 0.7s;}
.list_fade-div div.active:nth-child(8){transition:0.7s 0.8s;}
.list_fade-div div.active:nth-child(9){transition:0.7s 0.9s;}
.list_fade-div div.active:nth-child(10){transition:0.7s 1.0s;}
.list_fade-div div.active:nth-child(11){transition:0.7s 1.1s;}
.list_fade-div div.active:nth-child(12){transition:0.7s 1.2s;}
.list_fade-div div.active:nth-child(13){transition:0.7s 1.3s;}
.list_fade-div div.active:nth-child(14){transition:0.7s 1.4s;}
.list_fade-div div.active:nth-child(15){transition:0.7s 1.5s;}
.list_fade-div div.active:nth-child(16){transition:0.7s 1.6s;}
.list_fade-div div.active:nth-child(17){transition:0.7s 1.7s;}
.list_fade-div div.active:nth-child(18){transition:0.7s 1.8s;}
.list_fade-div div.active:nth-child(19){transition:0.7s 1.9s;}
.list_fade-div div.active:nth-child(20){transition:0.7s 2.0s;}
.list_fade-div div.active:nth-child(21){transition:0.7s 2.1s;}
.list_fade-div div.active:nth-child(22){transition:0.7s 2.2s;}
.list_fade-div div.active:nth-child(23){transition:0.7s 2.3s;}
.list_fade-div div.active:nth-child(24){transition:0.7s 2.4s;}
.list_fade-div div.active:nth-child(25){transition:0.7s 2.5s;}