@charset "UTF-8";
/*
//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（開始と終了がゆっくり）

//  transition: all 0.5s ease;
/*


/*フェード（下から出る）*/
.fadeUp {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.fadeUp.on {
  opacity: 1;
  transform: translate(0, 0);
}

/* ゆっくりフェード表示 */
.fade-slow{
  opacity: 0;
}
.fade-slow.on{
animation: fade-slow;
opacity: 0;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fade-slow {
  0% { transform: scale(1.05); opacity: 0;}
  20% { transform: scale(1);}
  100% { transform: scale(1); opacity: 1;}
}




/* 右フェード */
.fade-right {
  opacity: 0;
  transform: translate(200px, 0px);
  transition: all 0.5s cubic-bezier(.03,.76,.42,1.03);
}
.fade-right.on {
  opacity: 1;
  transform: translate(0, 0);
}

/* 左フェード */
.fade-left {
  opacity: 0;
  transform: translate(-200px, 0px);
  transition: all 0.5s cubic-bezier(.03,.76,.42,1.03);
}
.fade-left.on {
  opacity: 1;
  transform: translate(0, 0);
}


/* バウンド表示 */
.bound.on {
animation: bound 1.7s;
}
@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-25px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  40% { transform:translateY(0) }
  100% { transform:translateY(0) }
}


/* 1回転 */
.turning{
transform : rotateY(180deg);
transition: all 0.5s cubic-bezier(.03,.76,.42,1.03);
}
.turning.on{
transform : rotateY(360deg);
}


/* ベタ塗り後に文字表示（左から右） */
.mask-bg {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: var(--color-white);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-100%);
}
.mask-bg.on {
  color: var(--color-blue);
}
.mask-bg.on::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
  0% {
    transform: translateX(-100%);
  }
  40%, 60% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}





/* ベタ塗り後に文字表示（下から上） */
.mask-bg-Up {
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg-Up::after {
  background: var(--color-white);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
.mask-bg-Up.on {
  color: var(--color-blue);
}
.mask-bg-Up.on::after {
  animation: mask-bg-Up 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg-Up {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}



/* マスク左→右（spanなし。画像や1行文字） */
.maskLeft {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.4s cubic-bezier(0.42, 0, 1, 1);
  transition-property: clip-path;
}
.maskLeft.on {
  clip-path: inset(0);
}


/* マスク下→上（spanなし） */
.maskDown{
display: inline-block;
clip-path: inset(100% 0px 0px 0px);
}
.maskDown.on{
animation: maskDown 1s ease-in-out forwards;
}
@keyframes maskDown {
0% {clip-path: inset(100% 0px 0px 0px);}
100% {clip-path: inset(0px 0px 0px 0px);}
}