/*　タイトル フェードイン */
.ttl_scroll_anime_frame span{
    display: inline-block;
}

.ttl_scroll_anime_frame .ttl_scroll_anime01,
.ttl_scroll_anime_frame .ttl_scroll_anime02,
.ttl_scroll_anime_frame .ttl_scroll_anime03{
    opacity: 0;
    translate: 0 10px;
}
.ttl_scroll_anime_frame.show .ttl_scroll_anime01,
.ttl_scroll_anime_frame.show .ttl_scroll_anime02,
.ttl_scroll_anime_frame.show .ttl_scroll_anime03{
    opacity: 1;
    translate: 0 0px;
}
.ttl_scroll_anime01{
    transition-property: opacity, translate;
    transition-duration: 0.3s, 0.4s; /* アニメーションにかかる時間を指定 */
    transition-timing-function: ease-in-out, ease-in-out; /* アニメーションの速度変化を指定 */
    transition-delay: 0.3s, 0.3s; /* アニメーションが開始するまでの遅延時間を指定 */
}
.ttl_scroll_anime02 {
    transition-property: opacity, translate;
    transition-duration: 0.3s, 0.4s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0.6s, 0.6s;
}
.ttl_scroll_anime03 {
    transition-property: opacity, translate;
    transition-duration: 0.3s, 0.4s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0.9s, 0.9s;
}

.img_scroll_anime01{
    opacity: 0;
    translate: 0 10px;
}
.img_scroll_anime01.show{
    opacity: 1;
    translate: 0 0px;
}
.img_scroll_anime01{
    transition: opacity 0.2s ease-in-out 0.3s, translate 0.3s ease-in-out 0.3s;
}



.top_mv_anime01_b img{
  opacity: 0;
}
.top_mv_anime01_b.show img{
  filter: blur(20px);
  animation-name: top_mv_anime01_blur; /* キーフレームの名前 */
  animation-duration: 2s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
}
@keyframes top_mv_anime01_blur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}



.anime_fade{
  opacity: 0;
}
.anime_fade.show{
  opacity: 0;
  animation-name: anime_fade; /* キーフレームの名前 */
  animation-duration: 3.5s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
  animation-delay:0.3s;
}
@keyframes anime_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.anime_fade_down{
  opacity: 0;
}
.anime_fade_down.show{
  opacity: 0;
  animation-name: anime_fade_down; /* キーフレームの名前 */
  animation-duration: 1.2s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
  animation-delay:0.2s;
}
@keyframes anime_fade_down {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anime_fade_up{
  opacity: 0;
}
.anime_fade_up.show{
  opacity: 0;
  animation-name: anime_fade_up; /* キーフレームの名前 */
  animation-duration: 1.2s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
  animation-delay:0.2s;
}
@keyframes anime_fade_up {
  from {
    opacity: 0;
    transform: translateY(10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ev.post_list li.anime_fade_up.show:nth-child(2){
    animation-delay:0.5s;
}
.ev.post_list li.anime_fade_up.show:nth-child(3){
    animation-delay:1s;
}



.anime_fade_left{
  opacity: 0;
}
.anime_fade_left.show{
  opacity: 0;
  animation-name: anime_fade_left;
  animation-duration: 1.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:0.2s;
}
@keyframes anime_fade_left {
  from {
    opacity: 0;
    transform: translateX(15%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.anime_fade_right{
  opacity: 0;
}
.anime_fade_right.show{
  opacity: 0;
  animation-name: anime_fade_right;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:0.3s;
}
@keyframes anime_fade_right {
  from {
    opacity: 0;
    transform: translateX(-15%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}



/* 回転しながら　みぎ*/
.anime_fade_kaiten_r {
  opacity: 0;
}
.anime_fade_kaiten_r.show {
  animation-name: anime_fade_kaiten_r; /* キーフレームの名前を修正 */
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
@keyframes anime_fade_kaiten_r {
  from {
    opacity: 0;
    transform: translateX(20%) rotate(5deg); /* 右に20%移動し、5度回転 */
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg); /* 元の位置に戻り、回転を解除 */
  }
}

/* 回転しながら　ひだり*/
.anime_fade_kaiten_l {
  opacity: 0;
}
.anime_fade_kaiten_l.show {
  animation-name: anime_fade_kaiten_l; /* キーフレームの名前を修正 */
  animation-duration: 1.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}
@keyframes anime_fade_kaiten_l {
  from {
    opacity: 0;
    transform: translateX(-20%) rotate(-5deg); /* 右に20%移動し、5度回転 */
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0deg); /* 元の位置に戻り、回転を解除 */
  }
}






















/*　画像　背景　スライド式表示 */
.logo_anime{
  opacity: 0;
}
.logo_anime.show{
  filter: blur(20px);
  animation-delay: 1s;
  animation-name: logo_anime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@keyframes logo_anime {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}



.anime_mv_copy{
  opacity: 0;
}
.anime_mv_copy.show{
  opacity: 0;
  animation-name: anime_mv_copy; /* キーフレームの名前 */
  animation-duration: 2s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
  animation-delay:0.2s;
}
@keyframes anime_mv_copy {
  from {
    opacity: 0;
    transform: translateX(-15%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.anime_mv_i{
  opacity: 0;
}
.anime_mv_i.show{
  opacity: 0;
  animation-name: anime_mv_i; /* キーフレームの名前 */
  animation-duration: 1.6s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
  animation-delay:0.8s;
}
@keyframes anime_mv_i {
  from {
    opacity: 0;
    transform: translateX(-15%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}










.top_mv_copy_ani.show{
  animation-delay: 0.3s;
  animation-name: pc_header_menu_ani;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(0 100% 0 0);/*(上 右 下 左)*/
}
@keyframes pc_header_menu_ani {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0);
    }
}

.top_mv_copy_ani.show.mdp_delay{
  animation-delay: 2s !important;
}


.anime_copy_left{
  clip-path: inset(0 100% 0 0);/
}
.anime_copy_left.show{
  animation-delay: 0.3s;
  animation-name: anime_copy_left;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(0 100% 0 0);/*(上 右 下 左)*/
}
@keyframes anime_copy_left {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0);
    }
}

.anime_box_fade_top{
  clip-path: inset(0 0 100% 0);
}
.anime_box_fade_top.show{
  animation-delay: 0.3s;
  animation-name: anime_box_fade_top;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(0 0 100% 0);/*(上 右 下 左)*/
}
@keyframes anime_box_fade_top{
    0% {
      clip-path: inset(0 0 100% 0);
    }
    100% {
      clip-path: inset(0);
    }
}

.anime_box_fade_btm{
  clip-path: inset(100% 0 0 0);
}
.anime_box_fade_btm.show{
  animation-delay: 0.3s;
  animation-name: anime_box_fade_btm;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(100% 0 0 0);/*(上 右 下 左)*/
}
@keyframes anime_box_fade_btm {
    0% {
      clip-path: inset(100% 0 0 0);
    }
    100% {
      clip-path: inset(0);
    }
}

.anime_box_fade_left{
  clip-path: inset(0 100% 0 0);
}
.anime_box_fade_left.show{
  animation-delay: 0.3s;
  animation-name: anime_box_fade_left;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(0 100% 0 0);/*(上 右 下 左)*/
}
@keyframes anime_box_fade_left {
    0% {
      clip-path: inset(0 100% 0 0);
    }
    100% {
      clip-path: inset(0);
    }
}

.anime_box_fade_right{
  clip-path: inset(0 0 0 100%);
}
.anime_box_fade_right.show{
  animation-delay: 0.3s;
  animation-name: anime_box_fade_right;
  animation-duration: 1.8s;
  animation-fill-mode: forwards;
    clip-path: inset(0 0 0 100%);/*(上 右 下 左)*/
}
@keyframes anime_box_fade_right {
    0% {
      clip-path: inset(0 0 0 100%);
    }
    100% {
      clip-path: inset(0);
    }
}






.anime_circle_clip{
    width: 120%;
    height: 120%;
    margin-left: -10%;
    clip-path: circle(50% at -15.32% 79.99%);
    opacity: 0;
}
.anime_circle_clip.show {
  clip-path: circle(50% at -15.32% 79.99%);
  animation-name: circle-animation;
  animation-delay: 0.4s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes circle-animation {
  0% {
    opacity: 0;
    clip-path: circle(50% at -9.09% 76.33%);
  }
  100% {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
  }
}

@media screen and (max-width:960px){
    .anime_circle_clip{
        width: 100%;
        height: 100%;
        margin-left: 0;
    }
}/*END*/









.anime_tex_down{
    clip-path: inset(0 0 100% 0);
}
.anime_tex_down.show{
  animation-name: anime_tex_down;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
    clip-path: inset(0 0 100% 0);
}
@keyframes anime_tex_down {
    0% {
      clip-path: inset(0 0 100% 0);
    }
    100% {
      clip-path: inset(0);
    }
}


.anime_scale_x_daisyo{
    transform: translateX(-50%) scale(1.1);
    opacity: 0;
    transition: 1s;
}
.anime_scale_x_daisyo.show{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.anime_scale_daisyo{
    transform: scale(1.1);
    opacity: 0;
    transition: 1s;
}
.anime_scale_daisyo.show{
      opacity: 1;
      transform: scale(1);
}


.anime_scale_syodai_car{
    transform: scale(0.2);
    transform-origin: top right;
    opacity: 0;
    transition: 2s;
}
.anime_scale_syodai_car.show{
      opacity: 1;
      transform: scale(1);
}




.show.delay01{ animation-delay: 0.4s; }
.show.delay02{ animation-delay: 0.8s; }
.show.delay03{ animation-delay: 1.2s; }
.show.delay04{ animation-delay: 1.6s; }
.show.delay05{ animation-delay: 2.0s; }
.show.delay06{ animation-delay: 2.4s; }
.show.delay07{ animation-delay: 2.8s; }



.anime_fade_blur{
  opacity: 0;
}
.anime_fade_blur.show{
  filter: blur(20px);
  animation-name: anime_fade_blur; /* キーフレームの名前 */
  animation-duration: 1.4s; /* かかる時間 */
  animation-timing-function: ease-out; /* 速度 */
  animation-fill-mode: forwards; /* アニメーション前後のプロパティの状態 */
}
@keyframes anime_fade_blur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}


/*　ふわふわ　*/
.huwa{
  transition: transform .3s ease-in-out;
}
.huwa:hover{
  transform: translateY(-7px);
}


.ani_text_in{
    overflow: hidden;
    display: block;
}
.ani_text_in > img{
    display: inline-block;
    transform: translateY(100%);
}
.ani_text_in.show > img{
  animation-name: txt_in;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay:0.2s;
}

@keyframes txt_in{
    0% {
    transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}