@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, 30px);
transition-duration:0.5s;
transition-timing-function:ease;
}
.fadeUp.on {
  opacity: 1;
  transform: translate(0, 0);
}


/* ゆっくりその場でフェード表示 */
.fade-slow{
  opacity: 0;
  transition: cubic-bezier(0.2, 1, 0.3, 1) 1.5s;
}
.fade-slow.on{
  opacity: 1;
}


/* マスク左→右（spanなし。画像や1行文字） */
.maskLeft {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 0.5s cubic-bezier(0.2, 1, 0.3, 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 0.7s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes maskDown {
0% {clip-path: inset(100% 0px 0px 0px);}
100% {clip-path: inset(0px 0px 0px 0px);}
}


/* マスク上→下（spanなし） */
.maskUp{
  display: inline-block;
  clip-path: inset(0px 0px 100% 0px);
}
.maskUp.on{
  animation: maskUp 0.7s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes maskUp{
  0%   { clip-path: inset(0px 0px 100% 0px); }
  100% { clip-path: inset(0px 0px 0px 0px); }
}




/* 中の要素が下から上へ（spanあり） */
.maskDownlv2 {
  display: inline-block;
  overflow: hidden; /* マスクの役目 */
}
.maskDownlv2 .m-inner {
  display: inline-block;
  transform: translateY(100%); /* 下に隠しておく */
}
.maskDownlv2.on .m-inner {
  animation: upReveal 1s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes upReveal {
  0%   { transform: translateY(100%); } /* 下にある */
  100% { transform: translateY(0); }    /* 上がりきる */
}


/* 拡大しながら表示 */
.scale{opacity:0;}
.scale.on{
opacity: 1;
animation-name: scaleUp;
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}




/* バウンド */
.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{
opacity: 0;
transform : rotateY(180deg);
transition: all 0.5s cubic-bezier(.03,.76,.42,1.03);
}
.turning.on{
opacity: 1;
transform : rotateY(360deg);
}