@keyframes rotation{ 0% { transform: rotate(0)}
  100% { transform: rotate(360deg)}}
@keyframes rotation_r{ 0% { transform: rotate(0)}
  100% { transform: rotate(-360deg)}}
@keyframes hor_move_l{ 0% { transform: translateX(0%)}
  100% { transform: translateX(-100%)}}
@keyframes hor_move_l_half{ 0% { transform: translateX(0%)}
  100% { transform: translateX(-50%)}}
@keyframes hor_move_r{ 0% { transform: translateX(-100%)}
  100% { transform: translateX(0%)}}
@keyframes hor_move_r_half{ 0% { transform: translateX(-50%)}
  100% { transform: translateX(0%)}}
@keyframes ver_move_t{ 0% { transform: translateY(0%)}
  100% { transform: translateY(-100%)}}
@keyframes ver_move_b{ 0% { transform: translateY(-100%)}
  100% { transform: translateY(0%)}}
@keyframes ver_move_t_half{ 0% { transform: translateY(0%)}
  100% { transform: translateY(-50%)}}
@keyframes ver_move_b_half{ 0% { transform: translateY(-50%)}
  100% { transform: translateY(0%)}}
@keyframes fade_out{ 0% { filter: blur(0);   opacity: 1}
  100% { filter: blur(1);   opacity: 0;   visibility: hidden}}
@keyframes op_fill_fade{ 0% { opacity: 0;   transform: translateZ(0) translateX(-100%)}
  50% { opacity: 1;   transform: translateZ(0) translateX(0%)}
  100% { opacity: 1;   transform: translateZ(0) translateX(100%)}}
@keyframes op_fill_fade_v{ 0% { opacity: 0;   transform: translateZ(0) translateY(-100%)}
  50% { opacity: 1;   transform: translateZ(0) translateY(0%)}
  100% { opacity: 1;   transform: translateZ(0) translateY(100%)}}
@keyframes impact{ 0% { transform: translateZ(0) scale(4);   filter: blur(10);   opacity: 0}
  85% { transform: translateZ(0) translateX(0%) translateY(0%) scale(1);   filter: blur(0px);   opacity: 1}
  90% { transform: translateZ(0) translateX(0%) translateY(0%) scale(1);   filter: blur(0px);   opacity: 1}
  92% { transform: translateZ(0) translateX(10%) translateY(-10%) rotateZ(5deg) scale(1);   filter: blur(10px);   opacity: 1}
  94% { transform: translateZ(0) translateX(-10%) translateY(10%) rotateZ(5deg) scale(1);   filter: blur(10px);   opacity: 1}
  96% { transform: translateZ(0) translateX(5%) translateY(5%) rotateZ(-5deg) scale(1);   filter: blur(10px);   opacity: 1}
  98% { transform: translateZ(0) translateX(-5%) translateY(-5%) rotateZ(-5deg) scale(1);   filter: blur(10px);   opacity: 1}
  100% { transform: translateZ(0) scale(1);   filter: blur(0);   opacity: 1}}
.head_logo.onload_delay{ transform: translateX(-200%)}
.head_logo.onload_delay.open{ transform: translateX(0%); transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.4s}

.top_bnr.onload_delay{ transition: 0.4s; opacity: 0; bottom: -10%}
.top_bnr.onload_delay.open{ transition-delay: 0.8s; opacity: 1; bottom: 2%}
.top_schedule.onload_delay{ opacity: 0; }
.top_schedule.onload_delay.open{ opacity: 1; transition: 0.2s; transition-delay: 0.8s; }

.head_fanclub.onload_delay{ transform: translateY(-200%); opacity: 0}
.head_fanclub.onload_delay.open{ transform: translateY(0%); opacity: 1; transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.4s}
.vidwrap.onload_delay{ opacity: 0}
.vidwrap.onload_delay.open{ opacity: 1; transition: 0.2s; transition-delay: 0.8s}
.top_main_section.onload_delay{ opacity: 0.2}
.top_main_section.onload_delay.open{ opacity: 1; transition: 0.2s; transition-delay: 0.8s}
.side_sns_links.onload_delay.open{ transform: translateX(0%); transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.4s}
.side_sns_links.onload_delay .text{ transform: translateY(10%); opacity: 0}
.side_sns_links.onload_delay .links li{ transform: translateY(200%); opacity: 0}
.side_sns_links.onload_delay.open .text{ transform: translateY(0%); opacity: 1; transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.4s}
.side_sns_links.onload_delay.open .links li{ transform: translateY(0%); opacity: 1; transition: 0.8s cubic-bezier(0.22, 1, 0.36, 1)}
.side_sns_links.onload_delay.open .links li:nth-of-type(1){ transition-delay: calc(1* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(2){ transition-delay: calc(2* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(3){ transition-delay: calc(3* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(4){ transition-delay: calc(4* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(5){ transition-delay: calc(5* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(6){ transition-delay: calc(6* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(7){ transition-delay: calc(7* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(8){ transition-delay: calc(8* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(9){ transition-delay: calc(9* 0.1s + 0.4s)}
.side_sns_links.onload_delay.open .links li:nth-of-type(10){ transition-delay: calc(10* 0.1s + 0.4s)}
.right_links_area.onload_delay ul li a{ opacity: 0; transition: 0s}
.right_links_area.onload_delay ul li::after{ position: absolute; display: block; content: ""; bottom: 0; right: 0; width: 100vw; height: 100%; transform: translateZ(0) translateX(-100%); pointer-events: none}
.right_links_area.onload_delay ul li:nth-of-type(1)::after{ background-color: #15a4de}
.right_links_area.onload_delay ul li:nth-of-type(2)::after{ background-color: #ee0577}
.right_links_area.onload_delay ul li:nth-of-type(3)::after{ background-color: #f79902}
.right_links_area.onload_delay.open ul li a{ opacity: 1}
.right_links_area.onload_delay.open ul li::after{ animation: op_fill_fade 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards}
.right_links_area.onload_delay.open ul li:nth-of-type(1) a{ transition-delay: calc(0.4s + 0.3s)}
.right_links_area.onload_delay.open ul li:nth-of-type(1)::after{ animation-delay: calc(0.4s + 0s)}
.right_links_area.onload_delay.open ul li:nth-of-type(2) a{ transition-delay: calc(0.4s + 0.3s + 0.1s)}
.right_links_area.onload_delay.open ul li:nth-of-type(2)::after{ animation-delay: calc(0.4s + 0.1s)}
.right_links_area.onload_delay.open ul li:nth-of-type(3) a{ transition-delay: calc(0.4s + 0.3s + 0.2s)}
.right_links_area.onload_delay.open ul li:nth-of-type(3)::after{ animation-delay: calc(0.4s + 0.2s)}

@media only screen and (max-width:835px){
  .head_fanclub.onload_delay{ transform: initial; opacity: 0; pointer-events: none;}
  .head_fanclub.onload_delay.open{ transform: initial; opacity: 0; pointer-events: none; visibility: hidden; transition: 0.2s; transition-delay: 0s;}
  .head_fanclub.onload_delay.open.active {opacity: 1; visibility: visible; pointer-events: auto;}
  .head_fanclub{ transform: initial; opacity: 0; pointer-events: none; transition: 0.2s; transition-delay: 0s;}
  .head_fanclub.open{ transform: initial; opacity: 0; pointer-events: none; visibility: hidden; transition: 0.2s; transition-delay: 0s;}
  .head_fanclub.open.active {opacity: 1; visibility: visible; pointer-events: auto;}
    .right_links_area.onload_delay ul li::after { width: 100%;   height: 100vh;   height: 100lvh;   transform: translateZ(0) translateY(-100%)}
  .right_links_area.onload_delay.open ul li::after { animation: op_fill_fade_v 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards}
}

#fv .logo .layer3{ transform: scale(0) translateZ(0); transition: 0.1s}
#fv .logo .layer2{ transform: scale(0) translateZ(0); transition: 0.1s; transition-delay: 0.2s}
#fv.open .logo .layer3{ transform: scale(1) translateZ(0)}
#fv.open .logo .layer2{ transform: scale(1) translateZ(0)}
#about .paint.tr img{ mask-image: url(../images/webp/fade_grange_r.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 0% 100%; transform: translateZ(0)}
#about .paint.bl img{ mask-image: url(../images/webp/fade_grange_r.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 0% 100%; transform: translateZ(0)}
#about .back_piping img{ transform: translateY(-50%)}
#about .catch img{ transform: translateZ(0) scale(2); filter: blur(10); opacity: 0}
#about .about_img_main img{ transform: translateY(20%)}
#about.scroll_in .paint.tr img{ mask-position: 100% 100%; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.7s}
#about.scroll_in .paint.bl img{ mask-position: 100% 100%; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.7s}
#about.scroll_in .back_piping img{ transform: translateY(0%); transition: 1.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s}
#about.scroll_in .catch img{ animation: impact 0.4s cubic-bezier(0.32, 0, 0.67, 0) forwards; animation-delay: 0.2s}
#about.scroll_in .about_img_main img{ transform: translateY(0%); transition: 1.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s}

@media only screen and (max-width:835px){ 
    #about .back_piping img { transform: translateX(-50%)}
  #about.scroll_in .back_piping img { transform: translateX(0%)}
}

#whats_blue_man .main_img_outer .main_img img{ transform: scale(0)}
#whats_blue_man .catch{ mask-image: url(../images/webp/fade_grange.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 100% 100%}
#whats_blue_man.scroll_in .main_img_outer .main_img img{ transform: scale(1); transition: 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6); transition-delay: 0.1s}
#whats_blue_man.scroll_in .catch{ mask-position: 0% 100%; transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: 0.2s}
#top_goods{transform: translateY(10%);transition: 0.8s;opacity: 0;}
#top_goods.scroll_in {transform: translateY(0);transition: 0.8s;opacity: 1;}
#fanclub .bg_layer .paint.tr img{ mask-image: url(../images/webp/fade_grange_r.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 0% 100%; transform: translateZ(0)}
#fanclub .bg_layer .paint.bl img{ mask-image: url(../images/webp/fade_grange_r.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 0% 100%; transform: translateZ(0)}
#fanclub .bg_layer .text_ring{ transform: translate(-50%, -50%) scale(0.5); opacity: 0}
#fanclub .bg_layer .text_ring img{ animation: rotation 60s linear infinite}
#fanclub .center_box .blueman_img img{ display: block; transform: translateY(20%); opacity: 0}
#fanclub .center_box .title img{ display: block; transform: translateZ(0) scale(2); filter: blur(10); opacity: 0}
#fanclub .center_box .text_box{ transform: translateY(20%); opacity: 0}
#fanclub .center_box .link_btn_outer{ transform: translateY(20%); opacity: 0}
#fanclub.scroll_in .bg_layer .paint.tr img{ mask-position: 100% 100%; transition: 1s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.8s}
#fanclub.scroll_in .bg_layer .paint.bl img{ mask-position: 100% 100%; transition: 1s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.8s}
#fanclub.scroll_in .bg_layer .text_ring{ transform: translate(-50%, -50%) scale(1); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#fanclub.scroll_in .bg_layer .text_ring img{ animation: rotation 60s linear infinite}
#fanclub.scroll_in .center_box .blueman_img img{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#fanclub.scroll_in .center_box .title img{ animation: impact 0.4s cubic-bezier(0.32, 0, 0.67, 0) forwards; animation-delay: 0.3s}
#fanclub.scroll_in .center_box .text_box{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#fanclub.scroll_in .center_box .link_btn_outer{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#inquiry .bg_layer{ mask-image: url(../images/webp/fade_grange.webp); mask-repeat: no-repeat; mask-size: 300% 100%; mask-position: 100% 100%; transform: translateZ(0)}
#inquiry .bg_layer .paint.tl img{ display: block; transform: scale(0); transform-origin: top left}
#inquiry .bg_layer .paint.br img{ display: block; transform: scale(0); transform-origin: bottom right}
#inquiry .title{ transform: translateY(20%); opacity: 0}
#inquiry .text_box{ transform: translateY(20%); opacity: 0}
#inquiry .link_btn_outer{ transform: translateY(20%); opacity: 0}
#inquiry.scroll_in .bg_layer{ mask-position: 0% 100%; transition: 0.6s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.2s}
#inquiry.scroll_in .bg_layer .paint.tl img{ transform: scale(1); transition: 0.1s; transition-delay: 0.4s}
#inquiry.scroll_in .bg_layer .paint.br img{ transform: scale(1); transition: 0.1s; transition-delay: 0.6s}
#inquiry.scroll_in .title{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#inquiry.scroll_in .text_box{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#inquiry.scroll_in .link_btn_outer{ transform: translateY(0%); opacity: 1; transition: 1.4s cubic-bezier(0.33, 1, 0.68, 1); transition-delay: 0.6s}
#gallery .gallery_grid li{ display: block; transform: scale(0.5); opacity: 0}
#gallery.scroll_in .gallery_grid li{ transform: scale(1); opacity: 1; transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1)}
#gallery.scroll_in .gallery_grid li:nth-of-type(1){ transition-delay: calc(1* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(2){ transition-delay: calc(2* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(3){ transition-delay: calc(3* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(4){ transition-delay: calc(4* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(5){ transition-delay: calc(5* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(6){ transition-delay: calc(6* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(7){ transition-delay: calc(7* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(8){ transition-delay: calc(8* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(9){ transition-delay: calc(9* 0.1s + 0s)}
#gallery.scroll_in .gallery_grid li:nth-of-type(10){ transition-delay: calc(10* 0.1s + 0s)}