@charset "UTF-8";
@import "reset.css";

/* color set */
body {
  --color-bg: rgb(255, 251, 239);
  --color-bg2: rgb(239, 239, 239);
  --color-txt: rgb(77, 77, 77);
  --color-op: rgb(105, 193, 27);
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
}

/* font set */
html {
  --fsize: 3.2653vw;
  font-size: var(--fsize);
}
@media print, screen and (min-width: 769px) {
  html {
    --fsize: 16px;
  }
}
body {

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

._serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

._f26 { font-size: calc(26 / 16 * var(--fsize));}
._f24 { font-size: calc(24 / 16 * var(--fsize));}
._f20 { font-size: calc(20 / 16 * var(--fsize));}
._f16_5 { font-size: calc(16.5 / 16 * var(--fsize));}
._f15 { font-size: calc(15 / 16 * var(--fsize));}
._f12 { font-size: max(12px, calc(12 / 16 * var(--fsize)));}
._f10 { font-size: max(10px, calc(10 / 16 * var(--fsize)));}

._wt_e { font-weight: 200; }
._wt_r { font-weight: 400; }
._wt_b { font-weight: 700; }

/* tool */
.bgt {
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

._txt_c { text-align: center;}
._nols { letter-spacing: 0 !important;}
._ls01 { letter-spacing: .1em !important;}
._ls-025 { letter-spacing: -.025em !important;}
._idt_125 {
 text-indent: -1.25em;
  padding-left: 1.25em;
}
._idt_100 {
  text-indent: -1em;
  padding-left: 1em;
}
._mt_1em {
  margin-top: 1em;
}

img {
  width: 100%;
  height: auto;
}

/* layout */
body {
  background-color: var(--color-white);
  color: var(--color-txt);
  line-height: 1.5;
}
.wrap {
  position: relative;
}
.logo > * {
  aspect-ratio: 182/65;
  background-image: url(../images/logo.svg);
}
/* section */
.sec_header h2 > span {
  aspect-ratio: 49/16;
  background-repeat: no-repeat;
  background-size: contain;
}
._nav_tgt {
  margin-top: calc(-65 / 490 * 100%);
  padding-top: calc(65 / 490 * 100%);
}


/* sp_wrap */
.sp_wrap {
  position: relative;
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  z-index: 4000;
}

@media print, screen and (min-width: 769px) {
  .sp_wrap {
    max-width: 490px;
    margin-right: auto;
    margin-left: auto;
  }
}


/* header */
.header {
  position: relative;
  padding-top: calc(65 / 490 * 100%);
  z-index: 2000;
}

/* header navigation */
.header .header_nav {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  aspect-ratio: 490/65;
  transform: translate(-50%, 0);
  background-color: var(--color-white);
}
@media print, screen and (min-width: 769px) {
  .header .header_nav {
    max-width: 490px;
  }
}

.header .header_head {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 200;
  background-color: var(--color-white);
}
.header_nav .header_logo {
  width: calc(182 / 490 * 100%);
}
.header_nav .btn_nav_menu {
  display: block;
  position: relative;
  width: calc(65 / 490 * 100%);
  aspect-ratio: 1/1;
  margin-right: calc(5 / 490 * 100%);
  cursor: pointer;
}
.header_nav .btn_nav_menu > span {
  display: block;
  position: absolute;
  top: calc(37 /65 * 100%);
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(45 / 65 * 100%);
  aspect-ratio: 45/23;
}
.header_nav .btn_nav_menu > span span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  opacity: 1;
  transition: all .5s;
}
.header_nav._open .btn_nav_menu > span span {
  opacity: 0;
}

.header_nav .btn_nav_menu > span::before,
.header_nav .btn_nav_menu > span::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--color-black);
  transition: all .5s;
}
.header_nav .btn_nav_menu > span::before {
  top: 0;
  transform: translate(-50%, 50%) rotate(0deg);
}
.header_nav .btn_nav_menu > span::after {
  bottom: 0;
  transform: translate(-50%, 50%) rotate(0deg);
}

.header_nav._open .btn_nav_menu > span::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.header_nav._open .btn_nav_menu > span::after {
  bottom: 50%;
  transform: translate(-50%, 50%) rotate(-225deg);
}

.header_nav .nav_inner_wrap {
  position: absolute;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100dvh;
  padding-top: calc(65 / 490 * 100%);
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  transition: 
    opacity .25s,
    top .4s ease-out;
}
.header_nav._open .nav_inner_wrap {
  top: 0%;
  opacity: 1;
}

.header_nav .nav_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 44rem;
  background-color: var(--color-bg);
}
.header_nav .nav_menu ul {
  display: flex;
  flex-direction: column;
  /* 260324 gap 2.5 -> 2.25 */
  gap: 2.25rem;
  /* 260324 width 320 -> 280 */
  width: calc(280 / 490 * 100%);
}
.header_nav .nav_menu ul li a {
  display: block;
}
.header_nav .nav_menu ul li a .menu_item {
  width: 100%;
  aspect-ratio: 320/84;
}
.header_nav .nav_menu .menu_top { background-image: url(../images/header_menu_top.svg);}
.header_nav .nav_menu .menu_about { background-image: url(../images/header_menu_about.svg);}
.header_nav .nav_menu .menu_lineup { background-image: url(../images/header_menu_lineup.svg);}
.header_nav .nav_menu .menu_movie { background-image: url(../images/header_menu_movie.svg?ud=20260312);}
.header_nav .nav_menu .menu_profile { background-image: url(../images/header_menu_profile.svg);}


/* mv */
.mv {
  position: relative;
  z-index: 1000;
}
.mv .title {
  width: 100%;
  aspect-ratio: 490/686;
  background-size: cover;
  background-image: url(../images/mv.webp?ud=20260311);
}
.mv .text {
  position: relative;
  aspect-ratio: 490/135;
  padding-top: calc(15 / 490 * 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/bg_text.webp);
}
.mv .text .text_t1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(331 / 490 * 100%);
  margin: 0 auto;
  aspect-ratio: 331/37;
  border-radius: 1.1875rem;
  background-color: var(--color-white);
  color: var(--color-op);
}
.mv .text .text_t2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/text_t2.svg);
}

/* main */
.main {
  position: relative;
  z-index: 1000;
}
/* main_nav */
.main_nav {
  padding: calc(10 / 490 * 100%) calc(8 / 490 * 100%);
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/bg_main_nav.svg);
}
.main_nav ul {
  display: flex;
  gap: 0.75rem 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
}
.main_nav ul li {
  width: calc(50% - 0.4375rem);
}
.main_nav ul li a { display: block;}
.main_nav ul li a span { aspect-ratio: 230/85; }
.main_nav .menu_top { background-image: url(../images/main_menu_top.svg); }
.main_nav .menu_about { background-image: url(../images/main_menu_about.svg); }
.main_nav .menu_lineup { background-image: url(../images/main_menu_lineup.svg); }
.main_nav .menu_movie { background-image: url(../images/main_menu_movie.svg?ud=20260312); }

/* lead_box */
.lead_box {
  position: relative;
  aspect-ratio: 490/921;
  background-color: rgb(57, 196, 238);
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/bg_lead.webp);
}
.lead_box .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lead_box .bg::before,
.lead_box .bg::after {
  content: '';
  position: absolute;
  top: -.25rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.lead_box .bg::before {
  background-image: url(../images/bg_lead_m.webp);
  animation-composition: add;
  animation: 
    8.1s linear 0s infinite alternate yura1-1,
    5.1s linear 0s infinite rotate;
}
.lead_box .bg::after {
  background-image: url(../images/bg_lead_p.webp);
  animation-composition: add;
  animation: 
    8.3s linear 0s infinite alternate yura1-1,
    5.3s linear 2s infinite rotate;
}

.lead_box .lead {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lead_box .lead > div {
  position: absolute;
}
.lead_box .lead > div::before,
.lead_box .lead > div::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lead_box .lead > div::before {
  border: 1px rgb(40, 191, 237) solid;
  background-color: var(--color-white);
  opacity: .85;
}
.lead_box .lead > div::after {
  background-repeat: no-repeat;
  background-size: contain;
}
.lead_box .lead .text_l1 {
  top: calc(193 / 921 * 100%);
  left: calc(26 / 490 * 100%);
  width: calc(437 / 490 * 100%);
  aspect-ratio: 437/51;
}
.lead_box .lead .text_l2 {
  top: calc(259 / 921 * 100%);
  left: calc(45 / 490 * 100%);
  width: calc(321 / 490 * 100%);
  aspect-ratio: 321/51;
}
.lead_box .lead .text_l3 {
  top: calc(325 / 921 * 100%);
  left: calc(45 / 490 * 100%);
  width: calc(410 / 490 * 100%);
  aspect-ratio: 410/51;
}
.lead_box .lead .text_l4 {
  top: calc(392 / 921 * 100%);
  left: calc(26 / 490 * 100%);
  width: calc(271 / 490 * 100%);
  aspect-ratio: 271/51;
}
.lead_box .lead .text_l5 {
  top: calc(458 / 921 * 100%);
  left: calc(78 / 490 * 100%);
  width: calc(332 / 490 * 100%);
  aspect-ratio: 332/51;
}
.lead_box .lead .text_l6 {
  top: calc(524 / 921 * 100%);
  left: calc(78 / 490 * 100%);
  width: calc(313 / 490 * 100%);
  aspect-ratio: 313/51;
}
.lead_box .lead .text_l7 {
  top: calc(590 / 921 * 100%);
  left: calc(44 / 490 * 100%);
  width: calc(327 / 490 * 100%);
  aspect-ratio: 327/51;
}
.lead_box .lead .text_l8 {
  top: calc(656 / 921 * 100%);
  left: calc(104 / 490 * 100%);
  width: calc(341 / 490 * 100%);
  aspect-ratio: 341/51;
}
.lead_box .lead .text_l1::after { background-image: url(../images/text_l1.svg); }
.lead_box .lead .text_l2::after { background-image: url(../images/text_l2.svg); }
.lead_box .lead .text_l3::after { background-image: url(../images/text_l3.svg);}
.lead_box .lead .text_l4::after { background-image: url(../images/text_l4.svg); }
.lead_box .lead .text_l5::after { background-image: url(../images/text_l5.svg); }
.lead_box .lead .text_l6::after { background-image: url(../images/text_l6.svg); }
.lead_box .lead .text_l7::after { background-image: url(../images/text_l7.svg); }
.lead_box .lead .text_l8::after { background-image: url(../images/text_l8.svg); }

/* ABOUT */
#about ._outer {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  background-image: url(../images/bg_about.svg);
  background-color: rgb(162, 235, 255);
}
#about .sec_header h2 > span {
  background-image: url(../images/sec_header_about.svg);
}
.text_about1 {
  aspect-ratio: 49/34;
  background-image: url(../images/text_about1.svg);  
}
.img_about {
  position: relative;
  width: 100%;
  aspect-ratio: 490/558;
}
.img_about > span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 490/558;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.img_about .img_about1_1 { background-image: url(../images/img_about1_1.webp); mix-blend-mode: multiply; }
.img_about .img_about1_2 { background-image: url(../images/img_about1_2.webp); }
.img_about .img_about1_3 { background-image: url(../images/img_about1_3.webp); mix-blend-mode: multiply; }
.img_about .img_about1_4 { background-image: url(../images/img_about1_4.webp?ud=20260317); }
.text_about_point {
  display: flex;
  justify-content: space-between;
  width: calc(420 / 490 * 100% );
  margin-right: auto;
  margin-left: auto;
}
.text_about_point li {
  width: calc(202 / 420 * 100%);
}
.text_about_point li span {
  width: 100%;
  aspect-ratio: 1/1;
}
.text_about_point li .point1 { background-image: url(../images/about_point1.svg); }
.text_about_point li .point2 { background-image: url(../images/about_point2.svg); }
#about .note {
  margin-top: calc(12 / 490 * 100%);
  display: flex;
  justify-content: center;
  color: var(--color-black); 
  line-height: 1.2;
}

.dropdown_box {
  position: relative;
  margin-top: calc(48 / 490 * 100%);
  padding-bottom: calc(72 / 490 * 100%);
}
.btnDropdown {
  position: relative;
  cursor: pointer;
  z-index: 20;
}
.btnDropdown::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(451 / 490 * 100%);
  transform: translate(calc(-50% + 0.1875rem), calc(-50% + 0.1875rem));
  aspect-ratio: 451/73;
  background-color: #145110;
  border-radius: 0.4375rem;
  mix-blend-mode: multiply;
  opacity: .5;
}
.btnDropdown > span {
  position: relative;
  width: 100%;
  aspect-ratio: 49/8;
  background-image: url(../images/dropdown_btn.webp);
}
.dropdown_body {
  position: relative;
  width: 100%;
  margin-top: calc(-80 / 490 * 100%);
  padding-top: calc(80 / 490 * 100%);
  z-index: 10;
  opacity: 0;
  transition: all .2s;
  overflow: hidden;
}
.dropdown_body::before {
  content: '';
  position: absolute;
  top: 48.9%;
  left: 50%;
  width: calc(451 / 490 * 100%);
  height: calc(579 / 593 * 100%);
  transform: translate(calc(-50% + 0.625rem), calc(-50% + 0.625rem));
  background-color: #145110;
  border-radius: 1.125rem;
  mix-blend-mode: multiply;  opacity: 0;
  transition: all .2s;
}
.dropdown_box._open .dropdown_body {
  padding-top: calc(593 / 490 * 100%);
  opacity: 1;
}
.dropdown_box._open .dropdown_body::before {
  opacity: .5;
}
.dropdown_body .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-image: url(../images/dropdown_text.webp?ud=260306);
}

/* LINEUP */
#lineup ._outer {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(../images/bg_lineup.webp);
}
#lineup .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#lineup .bg::before,
#lineup .bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#lineup .bg::before {
  background-image: url(../images/bg_lineup_m.webp);
  animation-composition: add;
  animation: 
    6.1s linear 0s infinite alternate yura1-1,
    9.1s linear 0s infinite rotate2;
}
#lineup .bg::after {
  background-image: url(../images/bg_lineup_p.webp);
  animation-composition: add;
  animation: 
    6.3s linear 0s infinite alternate yura1-1,
    9.3s linear 3s infinite rotate2;
}
@keyframes yura1-1 {
  0%,60%,100% { transform: translateX(0); }
  15% { transform: translateX(-.125rem); }
  45% { transform: translateX(.125rem); }
}
@keyframes yura1-2 {
  0%,60%,100% { left: 0; }
  15% { left: -0.125rem; }
  45% { left: 0.125rem; }
}
@keyframes rotate {
  0% { transform: rotate(0deg) translateY(-.125rem) rotate(0deg); }
  100% { transform: rotate(360deg) translateY(-.125rem) rotate(-360deg); }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) translateY(-.25rem) rotate(0deg); }
  100% { transform: rotate(360deg) translateY(-.25rem) rotate(-360deg); }
}

#lineup .sec_header h2>span {
  background-image: url(../images/sec_header_lineup.svg);
}
.lineup > li {
  position: relative;
  aspect-ratio: 490/584;
}
.lineup > li > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lineup .item1 .name { background-image: url(../images/item1_name.svg); }
.lineup .item1 .text { background-image: url(../images/item1_text.svg); }
.lineup .item1 .image { background-image: url(../images/item1_img.webp); }

.lineup .item2 .name { background-image: url(../images/item2_name.svg); }
.lineup .item2 .text { background-image: url(../images/item2_text.svg); }
.lineup .item2 .image { background-image: url(../images/item2_img.webp); }

/* movie */
#movie ._outer {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(../images/bg_movie.webp);
}
#movie .sec_header h2 > span {
  background-image: url(../images/sec_header_movie.svg?ud=20260312);
}
.text_movie1 {
  margin-top: calc(24 / 490 * 100%);
  margin-bottom: calc(12 / 490 * 100%);
  color: var(--color-white);
}
.text_movie1 > p {
  margin-top: calc(16 / 490 * 100%);
}
.movie_lists {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  width: calc(396 / 490 * 100%);
  margin-right: auto;
  margin-left: auto;
  padding-bottom: calc(50 / 490 * 100%);
}
.movie_lists .ttl { aspect-ratio: 5/1; }
.movie_lists ._type_s { aspect-ratio: 396/395; }
.movie_lists ._type_n { aspect-ratio: 396/226; }

.movie1 .ttl { background-image: url(../images/movie1_ttl.svg?ud=20260316);}
.movie1 .img { background-image: url(../images/movie1_img.webp?ud=20260316);}

.movie2 .ttl { background-image: url(../images/movie2_ttl.svg?ud=20260316);}
.movie2 .img { background-image: url(../images/movie2_img.webp?ud=20260316);}

.movie3 .ttl { background-image: url(../images/movie3_ttl.svg?ud=20260316);}
.movie3 .img { background-image: url(../images/movie3_img.webp?ud=20260316);}
.movie_lists .img {
  position: relative;
  cursor: pointer;
}
.movie_lists .img > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.3125rem;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0,0,0,.6);
  background-position: center center;
  background-size: contain;
  background-image: url(../images/movie_btn.svg);
  transition: background-color .2s;
}
.movie_lists .img:hover > span {
  background-color: rgba(0, 0, 0, 1);
}

/* PROFILE */
.profile_box {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 1.25rem;
  padding: calc(60 / 490 * 100%) 0;
  background-color: var(--color-bg2);
}
.profile_box .profile {
  width: calc(236 / 490 * 100%);
  margin-top: calc(-6 / 490 * 100%);
  line-height: 1.4;
  color: var(--color-black);
}
.profile_box .profile .text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  letter-spacing: -.01em;
}
.profile_box .profile_image {
  width: calc(196 / 490 * 100%);
  aspect-ratio: 196/233;
  background-image: url(../images/profile_img.webp);
}

/* sns_icons */
.sns_icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
}
.sns_icons .sns_icon {
  display: block;
  width: 3.75rem;
  aspect-ratio: 1/1;
  padding: 1rem;
  background-color: #8e5822;
  border-radius: 50%;
}
.sns_icons .sns_icon_img {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}
.icon_x  { background-image: url(../images/icon_x.svg);}
.icon_ig { background-image: url(../images/icon_ig_w.svg); }


.nav_menu .sns_icons {
  margin-top: .5rem;
}
.nav_menu .icon_x {
  left: 1px;
}
.footer .sns_icons {
  padding: 4rem 0 3rem;
  transform: scale(1.2);
}
.footer .sns_icons .sns_icon {
  width: 4.5rem;
  padding: 1.125rem;
}
.footer .sns_icons .sns_icon_img {
  left: 1px;
}


/* footer */
.footer {
  padding-bottom: calc(20 / 490 * 100%);
}
.footer .osusume_box .ttl {
  aspect-ratio: 490/72;
  background-image: url(../images/osusume_ttl.svg);
}
.footer .osusume_box .banner {
  aspect-ratio: 49/16;
  background-image: url(../images/osusume_banner.webp?ud=260306);
}
.footer .notice {
  width: calc(444 / 490 * 100%);
  margin: calc(10 / 490 * 100%) auto;
  letter-spacing: -.01em;
}
.footer .footer_logo {
  width: calc(182 / 490 * 100%);
  margin: 0 auto;
}
.footer .copy {
  margin-top: calc(10 / 490 * 100%);
}




/* pc_bg */
.wrap .pc_bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 3000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
  background-image: url(../images/pc_bg1.jpg?ud=20260310v2);
  overflow: hidden;
}
.pc_bg > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  filter: blur(1rem);
  transition: opacity 1.2s , filter 1.2s;
}
.pc_bg > div._show {
  filter: blur(0);
  opacity: 1;
}
.pc_bg1, .pc_bg3 {
  background-position: right bottom;
  background-image: url(../images/pc_bg1.jpg?ud=20260310v2);
}
.pc_bg2, .pc_bg4 {
  background-position: center center;
  background-image: url(../images/pc_bg2.webp?ud=260306);
}


/* movie modal */
.movie_modal_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: rgba(0,0,0,0);
  z-index: 5000;
  transition: background-color .2s;
}
.movie_modal_box._show {
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, .75);
}
.movie_modal_box .movie_modal {
  position: relative;
  max-width: calc(100vw - 6rem);
  max-height: calc(100dvh - 6rem);
  margin: 0 auto;
}
.movie_modal_box .movie_modal_inner {
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
}
.movie_modal_box._type_s .movie_modal {
  aspect-ratio: 9/16;
}
.movie_modal_box._type_n .movie_modal {
  aspect-ratio: 16/9;
}
.movie_modal_box._type_s .movie_modal_inner {
  margin-top: max(1rem, calc(50dvh - (((100dvw - 6rem) / 9) * 8)) - 2rem);
  aspect-ratio: 9/16;
}
.movie_modal_box._type_n .movie_modal_inner {
  margin-top: max(1rem, calc(50dvh - (((100dvw - 6rem) / 16) * 4.5)) - 2rem);
  aspect-ratio: 16/9;
}
.movie_modal .btn_modal_close {
  position: absolute;
  bottom: -4.5rem;
  right: 0;
  width: 4rem;
  aspect-ratio: 1/1;
  cursor: pointer;
  display: none;
}
._show .movie_modal .btn_modal_close {
  display: block;
}
.movie_modal .btn_modal_close::before,
.movie_modal .btn_modal_close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 1px;
  background-color: var(--color-white);
}
.movie_modal .btn_modal_close::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.movie_modal .btn_modal_close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.movie_modal .yt {
  width: 100%;
}
._type_s .movie_modal .yt {
  aspect-ratio: 9/16;
}
._type_n .movie_modal .yt {
  aspect-ratio: 16/9;
}



/* loading */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: var(--color-white);
  z-index: 9000;
  opacity: 1;
  transition: opacity .5s;
}
.loading._start {
  opacity: 0;
}
.loading._close {
  display: none;
}
.loading .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
}
.loading .loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1c82e0 60%, #FFFFFF);
  animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .loading .loader::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-white);
}


/* Animations */
._f_in_bt {
  position: relative;
  top: 15dvh;
  opacity: 0;
  transition:
    top .8s,
    opacity 1.2s;
}
._f_in_bt._start {
  opacity: 1;
  top: 0;
}
.lead > div {
  opacity: 0;
  filter: blur(0);
}
.lead._start > div {
  opacity: 1;
  filter: blur(0);
}
.lead .text_l1 { transition: all 1.2s .2s; }
.lead .text_l2 { transition: all 1.2s .5s; }
.lead .text_l3 { transition: all 1.2s .8s; }
.lead .text_l4 { transition: all 1.2s 1.1s; }
.lead .text_l5 { transition: all 1.2s 1.4s; }
.lead .text_l6 { transition: all 1.2s 1.7s; }
.lead .text_l7 { transition: all 1.2s 2.0s; }
.lead .text_l8 { transition: all 1.2s 2.3s; }





/* print */
@media print {
  .header .header_nav {
    position: absolute;
  }
  .lead_box_outer {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/bg_lead.webp);
  }
  .lead_box canvas,
  #lineup canvas {
    display: none;
  }
  .dropdown_box .dropdown_body {
    padding-top: calc(593 / 490 * 100%);
    opacity: 1;
  }
  #lineup {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url(../images/bg_lineup.webp);
  }
  .pc_bg {
    display: none;
  }
  .mv .title {
    background-color: #3a210a;
    background-image: url(../images/mv_txt.webp);
  }
  .profile_box .profile_image {
    background-image: none;
    background-color: #3a210a;
  }
  .movie_lists .img {
    background-image: none;
    background-color: #555;
  }
}