/* @use 'variables' as *; */
/*----------------------------------------
    top page
------------------------------------------*/
.over_wrap { overflow: clip; position: relative; }

.body_top {
  .ob05 {
    @media screen and (max-width: 835px) {
      top: 48.7%; left: -12%; width: min(40%, 801px);
    }
  }
  .ob06 {
    @media screen and (max-width: 835px) {
      top: 54.7%; right: -13%; width: min(50%, 673px);
    }
  }
  #fv {
    .ob_wrap { scale: 0.3; transform-origin: 70% 24%; opacity: 0; filter: brightness(0);
      .ob {
        .anim_filter { opacity: 0; transform: scale(0); }
      }
    }
    .logo_block { opacity: 0; transform: skew(-8deg) translateX(10%); filter: blur(10px); }
    .date { opacity: 0; transform: skew(-8deg) translateX(-10%); filter: blur(10px); }
    .kv { opacity: 0; filter: blur(30px) brightness(2); transform: scale(0.96); transform-origin: 70% 24%; }
    .top_catch {
      .text.t02 {
        img { opacity: 0; transform: translateY(-5%); }
      }
      .text.t01 {
        img { opacity: 0; transform: translateY(5%); }
      }
    }
    .top_catch_sp {
      img { opacity: 0; transform: translateY(-5%); }
    }
    .bnr_block { opacity: 0; }
    .top_nav { opacity: 0; }
  }
  &.intro_on {
    #fv {
      .logo_block { opacity: 1; transform: skew(0deg) translateX(0); transition: 1.8s; filter: blur(0px); transition-delay: 0.6s; }
      .kv { opacity: 1; transform: scale(1); filter: blur(0px) brightness(1); transition: 1.8s; transition-delay: 0.6s;
        @media screen and (max-width: 835px) {
          margin-bottom: 8vw;
        }
      }
      .top_catch {width: 76%; position: relative; top: 4vw; margin-bottom: 8vw;
        .text.t02 {
          img { opacity: 1; transform: translateY(0); transition: 1.8s; transition-delay: 1.0s;}
        }
        .text.t01 {
          img { opacity: 1; transform: translateY(0); transition: 1.8s; transition-delay: 1.0s; }
        }
      }
      .top_catch_sp {
        img { opacity: 1; transform: translateY(0); transition: 1.8s; transition-delay: 1.0s; }
      }
      .date { opacity: 1; transform: skew(0deg) translateX(0); transition: 1.8s; filter: blur(0px); transition-delay: 1.2s;}
      .bnr_block { opacity: 1; transition: 1.4s; transition-delay: 1.8s; }
      .top_nav { opacity: 1; transition: 1.4s; transition-delay: 1.8s; }
      .ob_wrap { scale: 1; transition: 1.4s; opacity: 1; filter: brightness(1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        .ob {
          .anim_filter { opacity: 1; transition: 1s; transform: scale(1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
        }
      }
    }
  }
}

.fix_bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 1;
  img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
  video { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.02); -o-object-fit: cover; object-fit: cover; opacity: 0.7; }
  .bg_deco{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
      .bg_frame{
        .frame_left{position: absolute; top: 0; left: 0; width: 50%; height: auto;}
        .frame_right{position: absolute; top: 0; right: 0; width: 50%; height: auto;
          @media screen and (max-width: 835px) {
            width: 100%;
          }
        }
      }
      .bg_text_wrap{position: absolute; bottom: 0.6vw; width: 100%; height: auto; overflow: hidden; display: flex; transform: scale(1.4);
        @media screen and (max-width: 835px) {
          transform: scale(5); bottom: 6.8vw;
        }
        .bg_text{display: block; flex: none; width: 100%; height: auto; -webkit-animation: hor_move_l 30s linear infinite; animation: hor_move_l 80s linear infinite;}
      }
  }
}

.body_in {
  .ob { position: fixed; }
  .ob01 { top: -53%; left: -19%; width: 60%;
    @media screen and (max-width: 835px) {
      top: -2%;
    }
    img { rotate: -85deg; }
  }
  .ob02 { top: -32%; right: -7%; width: 40%;
    @media screen and (max-width: 835px) {
      top: 43px;
    }
  }
  .ob03 { top: 42%; left: -14%;
    @media screen and (max-width: 835px) {
      top: 380px;
    }
    img { rotate: 109deg; }
  }
  .ob04 { top: 64%; right: -1%; width: 43%;
    @media screen and (max-width: 835px) {
      top: 600px;
    }
    img { rotate: 9deg; }
  }
}

/* fv
------------------------------------------*/
.bg_filter { width: 100%; height: 100vh; pointer-events: none; mix-blend-mode: color-dodge; position: fixed; opacity: 0.7; top: 0; left: 0; z-index: 10;
  img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
  .overlay { position: absolute; content: ""; background: #005CEF; width: 100%; height: 100%; top: 0; left: 0; mix-blend-mode: overlay; }
}

#fv { display: flex; gap: min(1.8vw, 36px); width: 96%; margin: 0 auto 20vw; position: relative;
  @media screen and (max-width: 835px) {
    flex-direction: column; padding-top: min(80px, 15%); margin-bottom: min(120px, 30vw); width: 86%;
  }
  .top_catch_sp { display: none;
    @media screen and (max-width: 835px) {
      display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none;
    }
    .cat_right { position: absolute; top: 54vw; right: -4vw; width: 13vw; }
    .cat_left { position: absolute; top: 54vw; left: -4vw; width: 16vw; }
  }
  .ob_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    .ob04 {
      @media screen and (max-width: 835px) {
        top: 211vw; right: -26%; width: min(58%, 948px);
      }
    }
  }
  .fv_content { width: 22%; padding-bottom: 2.4vw; position: relative; z-index: 2;
    @media screen and (max-width: 835px) {
      width: 100%; display: contents;
    }
    .content_inner { position: -webkit-sticky; position: sticky;
      @media screen and (max-width: 835px) {
        position: relative; top: initial; display: contents;
      }
    }
    &.left .content_inner { top: min(20vw, 260px); }
    &.right .content_inner { top: 10px; }
  }
  .kv { width: 56%; position: relative; z-index: 4;
    @media screen and (max-width: 835px) {
      width: 100%; order: 1; margin: 0 auto;
    }
  }
  .top_nav { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2em;
    @media screen and (max-width: 835px) {
      display: none;
    }
    .nav_link { display: inline-block; height: min(1.6vw, 22px); line-height: 0; position: relative;
      img {height: 100%; transition: 0.3s; will-change: opacity; backface-visibility: hidden; }
      &::after { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; background-color: #70A0F3; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; transition: 0.3s; pointer-events: none; will-change: opacity; backface-visibility: hidden; }
      &:hover img { opacity: 0; }
      &:hover::after { opacity: 1; }
    }
    a:nth-of-type(1).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_top.svg); mask-image: url(../images/text/nav_text_top.svg); }
    a:nth-of-type(2).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_news.svg); mask-image: url(../images/text/nav_text_news.svg); }
    a:nth-of-type(3).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_introduction.svg); mask-image: url(../images/text/nav_text_introduction.svg); }
    a:nth-of-type(4).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_cast&staff.svg); mask-image: url(../images/text/nav_text_cast&staff.svg); }
    a:nth-of-type(5).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_schedule&ticket.svg); mask-image: url(../images/text/nav_text_schedule&ticket.svg); }
    a:nth-of-type(6).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_goods.svg); mask-image: url(../images/text/nav_text_goods.svg); }
    a:nth-of-type(7).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_blu-ray.svg); mask-image: url(../images/text/nav_text_blu-ray.svg); }
    a:nth-of-type(8).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_streaming.svg); mask-image: url(../images/text/nav_text_streaming.svg); }
    a:nth-of-type(9).nav_link::after { -webkit-mask-image: url(../images/text/nav_text_guide.svg); mask-image: url(../images/text/nav_text_guide.svg); }
  }
  .top_catch {
    @media screen and (max-width: 835px) {
      width: 96%; margin: 4vw auto; order: 2; z-index: 5; display: flex; justify-content: center; align-items: center;
    }
    .text {
      @media screen and (max-width: 835px) {
        z-index: 4; width: 30%;
      }
      img { width: 100%; }
      &.t02 {
        @media screen and (max-width: 835px) {
          margin-left: 0;
        }
      }
      &.t01 {
        @media screen and (max-width: 835px) {
          right: -6.5vw; top: 3vw;
        }
      }
    }
  }
  .date { margin-bottom: 10%;
    @media screen and (max-width: 835px) {
      margin-bottom: 2vw; order: 3;
    }
    img { width: 100%; margin-bottom: 4vw;
      @media screen and (max-width: 835px) {
        width: 93%; display: block; margin: 0 auto 4vw;
      }
    }
  hr { width: 1px; height: 20vw; background-color: #45509A; border: none; position: relative;}
  }
  .bnr_block {
    @media screen and (max-width: 835px) {
      order: 4; z-index: 4;
    }
    .bnr:not(:last-of-type) {
      margin-bottom: 1.8em;
      @media screen and (max-width: 835px) {
        margin-bottom: 1em;
      }
    }
    .bnr {
      a { display: block; position: relative; background: linear-gradient(to right, #70A0F350, #415D8D50); color: #ffffff; text-align: center; padding: 1.2em 0.5em; font-size: min(1.3vw, 16px); line-height: 1.4em; border: 1px solid #D4D6E5;
        @media screen and (max-width: 835px) {
          font-size: 4.6vw; line-height: 1.3em;
        }
        &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, #70A0F3, #415D8D); opacity: 0; transition: 0.2s; }
        &:hover::before { opacity: 1; }
      }
    }
  }
}

.h_outer { margin-bottom: 6vw;
  @media screen and (max-width: 835px) {
    margin-bottom: 12vw;
  }
  .sec_h { color: var(--c_white_l); display: flow-root; position: relative; top: 1em;
    img { display: block; height: min(200px, 14vw);
      @media screen and (max-width: 835px) {
        height: min(120px, 15vw);
      }
    }
    .text { display: block; padding-left: 12%; position: relative; font-size: 20px; line-height: 1.2em; letter-spacing: 10%;
      &:before { position: absolute; content: ""; background: var(--c_white_l); width: 11%; height: 1px; top: 50%; transform: translateY(50%); left: 0; }
    }
    @media screen and (max-width: 835px) {
      top: 0.2em;
    }
  }
  .sec_h.kasou{top: 0;}
  &.page_heading { text-align: center;
    .sec_h { position: relative;
      .num { color: #D4D6E5; font-size: 20px; line-height: 1em; padding-bottom: 0.8%; }
      .text { padding-left: initial; padding-top: 0.5%;
        &:before { display: none; }
      }
      .deco { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 700px; aspect-ratio: 1/1; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, transparent 100%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%, transparent 100%); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
        @media screen and (max-width: 835px) {
          width: 500px; top: 180%;
        }
      }
      img { max-height: 120px; margin: 0 auto; }
    }
  }
  &[data-scroll=reveal] { opacity: 0; transform: translateX(-10%); filter: blur(10px);
    &.scroll_in { opacity: 1; transform: translateX(0); filter: blur(0px); transition: 0.8s; }
  }
}

#cast {
  .h_outer { margin-bottom: min(12vw, 120px); }
  .cast_flex { display: flex; justify-content: right; gap: clamp(30px, 5vw, 120px); margin-bottom: 10vw;
    .cast { width: 20%; max-width: 136px;
      @media screen and (max-width: 835px) {
        width: 24%;
      }
      img { width: 100%; }
    }
  }
  .andmore { padding-left: 13%;
    @media screen and (max-width: 835px) {
      width: 24%;
    }
  }
  .wrap_800px { width: 70%;
    @media screen and (max-width: 835px) {
      width: 88%;
    }
  }
}

.cs_block { aspect-ratio: 1/1; position: relative; background: rgba(255, 255, 255, 0.089); border-radius: 50%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 1100px; margin: 0px auto;
  @media screen and (max-width: 835px) {
    margin-top: 10vw; margin-bottom: 20px; width: 140%; left: 50%; transform: translateX(-50%);
  }
  &:before { position: absolute; content: ""; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; width: 140%; height: 140%; top: 50%; left: 50%; transform: translate(-50%, -50%);
    @media screen and (max-width: 835px) {
      width: 120%; height: 120%;
    }
  }
  .main_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 100%; max-width: 800px;
    @media screen and (max-width: 835px) {
      width: 70%;
    }
  }
  .deco_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; opacity: 0.6;
    img { -webkit-animation: rotation_r 120s linear infinite; animation: rotation_r 120s linear infinite; }
  }
}

#movie {margin-bottom: 20vw;
  @media screen and (max-width: 835px) {
    margin-top: 0px; margin-bottom: min(150px, 40vw);
  }
  .h_outer { margin-bottom: 0; }
  .movie_box{display: flex; align-items: center; width: 100%;
    @media screen and (max-width: 835px) {
      display: block; position: relative;
    }
    .movie_text{width: 32%;  text-align: left; align-self: flex-end; position: relative; bottom: 3em; left: 2em;
      img{width: 60%; min-width: 200px;
        @media screen and (max-width: 835px) {
          min-width: 150px;
        }
      }
      @media screen and (max-width: 835px) {
        position: absolute; left: 0; top: 100%; bottom: -3em;
      }
    }
    .movie_thumb{display: block; width: 50%; transform: translateX(6%); position: relative; transition: 0.3s;
      @media screen and (max-width: 835px) {
        width: 100%; transform: translateX(0%); margin: 0 auto;
      }
      .thumb_img{border: 2px solid #3C5CA2; width: 100%;}
      .corner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
        .tl{position: absolute; top: 0; left: 0;}
        .tr{position: absolute; top: 0; right: 0; transform: rotate(90deg);}
        .bl{position: absolute; bottom: 0; left: 0; transform: rotate(-90deg);}
        .br{position: absolute; bottom: 0; right: 0; transform: rotate(180deg);}
      }
      &:hover{filter: brightness(1.4);}
    }
    .movie_btn{width: 18%; position: relative; z-index: 2; transition: transform 0.3s ease;
      .movie_arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 20%;}
      .movie_circle{ position: relative; z-index: 1; width: 100%; -webkit-animation: rotation_r 20s linear infinite; animation: rotation 20s linear infinite; animation-play-state: paused;
        @media screen and (max-width: 835px) {
          animation-play-state: running;
        }
      }
      @media screen and (max-width: 835px) {
        position: absolute; bottom: -23%; right: -3%; width: 30%; }
    }
    .movie_thumb:hover ~ .movie_btn { transform: scale(1.1);
      .movie_circle { animation-play-state: running; }
      @media screen and (max-width: 835px) {
        transform: none;
      }
    }
  }
}

/* per-element glitch reveal variants — pick by what the element's own hover/animation already touches */
.glitch_reveal[data-scroll=reveal] { opacity: 0; clip-path: inset(0 0 35% 0); transform: scale(0.6); filter: blur(16px);
  &.scroll_in { animation: glitch_reveal 1s linear forwards, clip_release 1ms linear 1s forwards; }
}
.glitch_reveal_scale[data-scroll=reveal] { opacity: 0; clip-path: inset(0 0 35% 0);
  &.scroll_in { animation: glitch_reveal_scale 1s linear forwards, clip_release 1ms linear 1s forwards; }
}
.glitch_reveal_fade[data-scroll=reveal] { opacity: 0; clip-path: inset(0 0 35% 0); filter: blur(16px);
  &.scroll_in { animation: glitch_reveal_fade 1s linear forwards, clip_release 1ms linear 1s forwards; }
}
.glitch_reveal_clip[data-scroll=reveal] { opacity: 0; clip-path: inset(0 0 35% 0);
  &.scroll_in { animation: glitch_reveal_clip 1s linear forwards, clip_release 1ms linear 1s forwards; }
}

#cs[data-scroll=reveal] {
  @media screen and (max-width: 835px) {
    transform: scale(0.6);
  }
  &.scroll_in {
    @media screen and (max-width: 835px) {
      transform: scale(1);
    }
  }
}

footer { text-align: center; position: relative; z-index: 11; padding: 8vw 0 6vw; color: #D4D6E5;
  @media screen and (max-width: 835px) {
    padding: 70px 0 100px;
  }
  .f_inner {
    .sns_block { display: flex; justify-content: center; margin-bottom: 50px; gap: 10px; 
      .sns{transition: 0.3s;
        &:hover{filter: brightness(2);}
      }
    }
    .bnr_block { display: flex; justify-content: center; gap: 16px; margin-bottom: 48px;
      .bnr{transition: 0.3s; height: min(60px, 6vw);
        &:hover{opacity: 0.5;}
        img {height: 100%;
          @media screen and (max-width: 835px) {
            max-height: 60px;
          }
        }
        @media screen and (max-width: 835px) {
          height: 100%;
        }
      }
      @media screen and (max-width: 835px) {
        flex-direction: column; width: 70%; align-items: center; margin: 0 auto 30px;
      }
      &.credit {
        .bnr {transition: 0.3s;
          &:hover{opacity: 0.5;}
          img { max-height: clamp(56px, 10vw, 70px); }
        }
      }
    }
  }
}

#loading { -webkit-animation: shake 0.1s both; animation: shake 0.1s both; -webkit-animation-delay: 1.7s; animation-delay: 1.7s;
  .l_text { font-family: var(--font_base_setting); color: var(--c_theme_color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1, 1.3); width: 100%; max-width: 600px; text-align: center; font-weight: bold; font-size: clamp(20px, 4.8vw, 30px); -webkit-animation: vanish 0.1s both; animation: vanish 0.1s both; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; color: #D4D6E5;
    .dots { width: 0.1em; display: inline-block; transform: translateY(-0.01em);
      &::after { content: "."; -webkit-animation: dots 1.8s infinite steps(4); animation: dots 1.8s infinite steps(4); }
    }
    img {
      @media screen and (max-width: 835px) {
        width: 60%;
      }
    }
  }
  canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
  .filter { width: 100%; height: 100vh; pointer-events: none; mix-blend-mode: color-dodge; position: fixed; opacity: 0.7; top: 0; left: 0; z-index: 10;
    img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
  }
  .hibi { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3;
    span:nth-of-type(1) { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/webp/hibi_01.png) no-repeat center; background-size: contain; background-size: cover; -webkit-animation: 0.15s show-hibi both; animation: 0.15s show-hibi both; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; z-index: 3;
      @media screen and (max-width: 835px) {
        background-image: url(../images/webp/hibi_01_sp.png);
      }
    }
    span:nth-of-type(2) { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/webp/hibi_02.png) no-repeat center; background-size: contain; background-size: cover; -webkit-animation: 0.15s show-hibi both; animation: 0.15s show-hibi both; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; z-index: 3;
      @media screen and (max-width: 835px) {
        background-image: url(../images/webp/hibi_02_sp.png);
      }
    }
    span:nth-of-type(3) { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/webp/hibi_03.png) no-repeat center; background-size: contain; background-size: cover; -webkit-animation: 0.15s show-hibi both; animation: 0.15s show-hibi both; -webkit-animation-delay: 1.9s; animation-delay: 1.9s; z-index: 3;
      @media screen and (max-width: 835px) {
        background-image: url(../images/webp/hibi_03_sp.png);
      }
    }
  }
  .border { position: absolute; width: 0%; height: 1px; background: var(--c_theme_color); top: 50%; transform: translateY(-50%); left: 0; opacity: 0; -webkit-animation: line-draw 1.4s linear infinite; animation: line-draw 1.4s linear infinite; }
  &.off {
    .hibi { scale: 1.2; transition: 1.7s; transition-delay: 0.8s; }
    canvas { opacity: 0 !important; transition: 1s; }
    .border { opacity: 0 !important; transition: 1s; }
  }
}

.btn_viewmore { position: relative; padding-right: 40px; display: inline-block;
  @media screen and (max-width: 835px) {
    padding-right: 42px;
  }
  &:before { position: absolute; content: ""; background: url(../images/template_parts/icon_arrow_triple.svg) no-repeat center; background-size: contain; width: 30px; height: 30px; top: 48%; transform: translateY(-50%); right: 0; transition: 0.2s;
    @media screen and (max-width: 835px) {
      width: 25px; height: 25px; top: 54%;
    }
  }
  &:after { position: absolute; content: ""; background: #fff; width: 0%; height: 1px; bottom: 0; left: 0; transition: 0.3s; }
  &:hover:before { right: -10px; transition: 0.2s; }
  &:hover:after { width: calc(100% - 40px); transition: 0.3s; }
}

.content_wrap { position: relative;
  &:not(:last-of-type) { margin-bottom: 120px;
    @media screen and (max-width: 835px) {
      margin-bottom: 60px;
    }
  }
}

.con_h { text-align: center; margin-bottom: 40px; border-bottom: 1px solid #D4D6E5; padding-bottom: 12px; height: 60px;
  img{height: 100%;}
  @media screen and (max-width: 835px) {
    height: 46px;
  }
}

.box_h { text-align: center; color: #D4D6E5; font-weight: bold; font-size: 40px; line-height: 1.2em; margin-bottom: 40px;
  @media screen and (max-width: 835px) {
    font-size: 24px; line-height: 1.4em; margin-bottom: 20px;
  }
}

.box_h_sub { font-size: 32px; line-height: 1.4em; text-align: center; font-weight: bold; color: var(--c_theme_color); margin-bottom: 40px;
  @media screen and (max-width: 835px) {
    font-size: 20px; margin-bottom: 20px; line-height: 1.4em;
  }
}

#news { margin-bottom: 100px;
  @media screen and (max-width: 835px) {
    margin-bottom: 60px;
  }
  .content_flex {margin-bottom: 70px;
    @media screen and (max-width: 835px) {
      margin-bottom: 0;
    }
    .h_outer { margin-bottom: 0; }
    .news_content {width: 70%; margin-left: auto; min-width: 780px; margin-bottom: 4vw;
      @media screen and (max-width: 835px) {
        width: 100%; min-width: initial; margin-bottom: 6vw;
      }
    }
  }
  .btn_outer { text-align: right;
    .btn_viewmore{
      img{height: 26px;}
    }
    @media screen and (max-width: 835px) {
      width: 70%; margin-right: 0; margin-left: auto;
    }
    &.in { margin: 0 auto; text-align: center;
      @media screen and (max-width: 835px) {
        margin: 0 auto;
      }
    }
  }
}

.intro_text { text-align: center; position: relative;
  &:not(:last-of-type) { margin-bottom: 240px;
    @media screen and (max-width: 835px) {
      margin-bottom: 120px;
    }
  }
  .main_catch{width: 50%; margin: 0 auto;
    img{width: 100%;}
  }
  .text { line-height: 2em; font-weight: 900; font-size: 18px;
    @media screen and (max-width: 835px) {
      font-size: 14px; line-height: 2em; width: 94%; margin: 0 auto;
    }
    &:not(:last-of-type) { margin-bottom: 3em; }
    img{filter: drop-shadow(2px 4px 6px #0a073f);}
  }
}

.cast_wrap {
  .list_blank { padding-top: 50px;
    @media screen and (max-width: 835px) {
      padding-top: 30px;
    }
  }
  .list_tit { width: 100%; text-align: center; font-weight: bold; color: #70A0F3; font-size: 22px; line-height: 1.2em; margin-bottom: 1em; }
  .cast { margin-bottom: 30px; color: #D4D6E5; transition: 0.3s;
    &:hover{
      .cast_img{
        img{transform: scale(1.1);}
      }
    }
    @media screen and (max-width: 835px) {
      margin-bottom: 16px;
    }
    .cast_img { margin-bottom: 12px; overflow: hidden;
      img { width: 100%;  transition: 0.3s;}
    }
    .name_block { text-align: center; font-weight: bold;
      .part { color: #70A0F3; font-size: 18px; line-height: 1.2em; margin-bottom: 0.1em; font-weight: bold; filter: drop-shadow(2px 4px 6px #0a073f);
        @media screen and (max-width: 835px) {
          font-size: 20px; line-height: 1.4em;
        }
      }
      .name { font-size: 24px; line-height: 1.3em;
        @media screen and (max-width: 835px) {
          font-size: 22px; line-height: 1.4em;
        }
      }
    }
    &.ensemble {
      @media screen and (max-width: 835px) {
        width: auto;
      }
      .name_block {
        .name { font-size: 20px; line-height: 1.4em;
          @media screen and (max-width: 835px) {
            font-size: 16px; line-height: 1.4em;
          }
        }
      }
    }
  }
}

.jujutsu_modal {
  .modal_bg { background: #001037; background: linear-gradient(to right, #010C57, #0E1577); }
  .circle { position: fixed; background: url(../images/svg/cs_deco.svg) no-repeat center; background-size: contain; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 120%; -webkit-animation: rotation_02 60s linear infinite; animation: rotation_02 60s linear infinite; pointer-events: none; }
  .modal_inner { z-index: 4; }
  .ob_wrap { position: fixed; width: 100%; height: 100%; top: 50%; left: 50%; translate: -50% -50%; opacity: 0; scale: 1.5; transition: 0.4s; pointer-events: none; }
  &.cmn_modal_layer {
    .modal_close_btn { z-index: 5; }
  }
  .visual_wrap { transform: scale(1.2);
    .visual { max-width: 80%;
      img { max-height: 100vh; }
    }
  }
  .text_wrap { position: absolute; top: 50%; transform: translateY(-50%); right: max(-10vw, -20%); background: var(--c_lightgray); border: 1px solid var(--c_theme_light); border-radius: 6px;
    @media screen and (max-width: 835px) {
      width: 25vw; top: initial; bottom: -6vw; right: -2vw; transform: initial; height: auto; aspect-ratio: inherit;
    }
    .wrap_inner { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; padding: min(9svh, 70px) min(5svh, 48px); min-height: min(60vh, 450px); opacity: 0; transform: translateY(-20px);
      @media screen and (max-width: 835px) {
        padding: 10vw 1.2vw; min-height: 240px;
      }
      &:before { position: absolute; content: ""; background: url(../images/svg/modal_text_deco.svg) no-repeat center; background-size: contain; width: 14svh; height: 4svh; top: 0; left: 50%; transform: translateX(-50%);
        @media screen and (max-width: 835px) {
          width: 21vw; height: 3vw; top: 2vw;
        }
      }
      &:after { position: absolute; content: ""; background: url(../images/svg/modal_text_deco.svg) no-repeat center; background-size: contain; width: 14svh; height: 4svh; bottom: 0; left: 50%; transform: translateX(-50%) scale(1, -1);
        @media screen and (max-width: 835px) {
          width: 21vw; height: 3vw; bottom: 2vw;
        }
      }
    }
    .name_block { font-size: 3svh; letter-spacing: 0.35em; color: var(--c_blue); line-height: 1.6em; writing-mode: vertical-rl;
      @media screen and (max-width: 835px) {
        font-size: 3.8vw; position: relative; top: initial; left: initial; transform: initial;
      }
      .no_rotate { text-orientation: upright; }
      .name { font-size: 2em; letter-spacing: 0.3em; line-height: 1.2em; color: var(--c_theme_light); display: block; white-space: nowrap; }
    }
  }
  &.visible {
    .ob_wrap { opacity: 1; scale: 1; transition: 0.8s; }
    .visual_wrap { transform: scale(1); transition: 0.8s; }
    .text_wrap {
      .wrap_inner { opacity: 1; transform: translateY(0px); transition: 0.8s; }
    }
  }
}

.staff_wrap {
  ul:not(:last-of-type) { margin-bottom: 50px; }
  ul {
    li { display: flex; justify-content: center; font-size: 18px; line-height: 1.2em; font-weight: 400; color: #D4D6E5;
      @media screen and (max-width: 835px) {
        font-size: 15px; line-height: 1.4em; gap: 10px;
      }
      &:not(:last-of-type) { margin-bottom: 1.2em; }
      .roll { color: #70A0F3; font-weight: bold;}
      &.img_list { display: flex; align-items: center; gap: 10px;
        @media screen and (max-width: 835px) {
          justify-content: center;
        }
        img { max-width: 200px; }
        .img_flex { display: flex; gap: 10px;
          @media screen and (max-width: 835px) {
            flex-direction: column;
          }
          img {
            @media screen and (max-width: 835px) {
              width: 100%;
            }
          }
        }
        .img {
          img {
            @media screen and (max-width: 835px) {
              max-height: 55px;
            }
          }
        }
      }
    }
  }
}

.schedule_lead { text-align: left; display: flex; width: 100%; margin-bottom: 25px; align-items: center; gap: 26px;
  @media screen and (max-width: 835px) {
    flex-direction: column;
  }
  .area { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; font-size: 3em; line-height: 1em; width: 3.6em; color: var(--color4); border: 1px solid; background: linear-gradient(to right, #70A0F330, #415D8D30); padding: 0.4em;
    @media screen and (max-width: 835px) {
      aspect-ratio: initial; width: 2.5em; padding: 0.3em;
    }
  }
  .venue_info {
    @media screen and (max-width: 835px) {
      width: 100%; flex-direction: column; align-items: center; gap: 0;
    }
    .date { font-size: 30px; line-height: 1.7em; margin-bottom: 0; font-weight: bold;
      @media screen and (max-width: 835px) {
        width: 80%; margin: 0 auto 2%; text-align: center;
      }
      strong { font-size: 2em; line-height: 1em; }
      img {
        @media screen and (max-width: 835px) {
          -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center;
        }
      }
    }
    .venue_block { display: flex; align-items: center; gap: 20px;
      @media screen and (max-width: 835px) {
        display: flex; flex-direction: column; gap: 10px;
      }
    }
    .venue { font-size: 40px; display: block; line-height: 1.2em; margin-bottom: 0; font-weight: bold; color: #D4D6E5;
      @media screen and (max-width: 835px) {
        font-size: 28px; line-height: 1.4em;
      }
    }
    .map { display: inline-block; background: linear-gradient(to right, #70A0F330, #415D8D30); margin-top: 4px; border: 1px solid #D4D6E5; color: #D4D6E5; border-radius: 0px; padding: 4px 40px; position: relative; transition: 0.2s;
      &::before { position: absolute; content: ""; background: #D4D6E5; width: 8px; height: 6px; top: 50%; transform: translateY(-50%); right: 10px; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%); clip-path: polygon(0 0, 0% 100%, 100% 50%); }
      &:hover{background: #D4D6E5; color: #0E1577;
        &::before{background: #0E1577;}
      }
    }
  }
}

.schedule_block:not(:last-of-type) { margin-bottom: 120px;
  @media screen and (max-width: 835px) {
    margin-bottom: 60px;
  }
}

.caution { border: 2px solid #70A0F3; padding: 30px; margin-bottom: 30px; font-weight: 900;
  @media screen and (max-width: 835px) {
    padding: 20px;
  }
  a { text-decoration: underline; color: #70A0F3; }
}

.price_list_wrap {
  .price_list { display: flex; width: 100%; gap: 40px; margin-bottom: 14px;
    @media screen and (max-width: 835px) {
      flex-direction: column; gap: 14px;
    }
    .price_l { width: calc(35% - 40px); text-align: center; font-weight: bold; font-size: 24px; padding: 40px 0; line-height: 1.5em; border: 1px solid #D4D6E5; display: flex; align-items: center; justify-content: center;
      @media screen and (max-width: 835px) {
        width: 100%; font-size: 20px; line-height: 1.2em; padding: 14px 0;
      }
    }
    .price_r { width: 65%; border-bottom: 1px solid #D4D6E5; border-top: 1px solid #D4D6E5;
      @media screen and (max-width: 835px) {
        width: 100%;
      }
      .block { width: 100%; display: flex; align-items: center; padding: 2em;
        @media screen and (max-width: 835px) {
          flex-direction: column; align-items: center; padding-inline: 10px;
        }
        &:not(:last-of-type) { border-bottom: 1px dashed #D4D6E5; }
        .left { width: 30%; font-size: 1.5em; font-weight: bold; line-height: 1.5em; text-align: left;
          @media screen and (max-width: 835px) {
            width: 100%;
          }
        }
        .right { width: 70%; display: grid; justify-content: end; font-size: 26px; font-weight: bold; line-height: 1.5em;
          @media screen and (max-width: 835px) {
            width: 100%; justify-content: start; text-align: left;
          }
          .p_txt { text-align: left; }
          span { font-size: 0.6em; line-height: 1.5em; letter-spacing: -0.1em; }
          .label { display: inline-block; line-height: 1.2em; background: #56619c; margin-right: 10px; padding: 2px 20px; color: #D4D6E5; border-radius: 2px;
            &.holiday { background: #5c6abc; }
            @media screen and (max-width: 835px) {
              padding: 2px 7px;
            }
          }
        }
      }
    }
  }
  .note_block { width: 65%; margin-left: auto; margin-right: 0;
    @media screen and (max-width: 835px) {
      width: 100%; font-size: 14px; line-height: 1.4em;
    }
  }
  &:not(:last-of-type) {
    @media screen and (max-width: 835px) {
      margin-bottom: 30px;
    }
  }
}

.sales_wrap { margin-bottom: 50px; padding: 5% 5%; background: linear-gradient(to right, #70A0F330, #415D8D30);
  @media screen and (max-width: 835px) {
    padding-inline: 2%;
  }
  .entry { margin-bottom: 20px; font-weight: bold; text-align: center;
    strong { font-size: 20px; line-height: 1.7em; display: block; }
    .txt_b { font-size: 1.4em; line-height: 1em; }
    .color { color: #70A0F3; }
  }
  .salesblock { margin-bottom: 40px; border: 1px solid #70A0F3;
    @media screen and (max-width: 835px) {
      border-width: 2px;
    }
    .entry { padding: 36px 5%;
      @media screen and (max-width: 835px) {
        padding: 20px 14px; margin-bottom: 0;
      }
      strong {
        @media screen and (max-width: 835px) {
          font-size: 18px;
        }
      }
    }
    .sales_tit { font-size: 20px; line-height: 1.7em; color: #010C57; background-color: #70A0F3; padding: 1em 1em 1.3em; font-weight: bold;
      @media screen and (max-width: 835px) {
        font-size: 16px; line-height: 1.6em; padding: 0.5em;
      }
    }
    .btn { margin-top: 10px; }
    .notice { margin-top: 1.5em; margin-bottom: 0; text-align: left; font-size: 14px; line-height: 1.7em; }
    &.end { opacity: 0.5; pointer-events: none;
      .sales_tit { color: #aaa !important; }
      .entry { border-color: #aaa; }
    }
  }
  &.ippan {
    .ippan_block {
      .ippan_tit { text-align: center; font-weight: 900; color: #D4D6E5; font-size: 22px; line-height: 1.4em; margin-top: 2em; margin-bottom: 0.5em;
        @media screen and (max-width: 835px) {
          margin-top: 1em;
        }
      }
      .ippan_link { background-color: rgba(255, 255, 255, 0.15); color: #D4D6E5; padding: 3% 3.5%; text-align: left;
        &:not(:last-of-type) { margin-bottom: 0.5em; }
        h5 { font-weight: bold; font-size: 18px; line-height: 1.5em; margin-bottom: 0.5em;
          @media screen and (max-width: 835px) {
            font-size: 16px; line-height: 1.4em;
          }
        }
        .btn { margin-bottom: 0.5em; }
      }
    }
  }
}

.resale { padding: 4% 5%; background: linear-gradient(to right, #70A0F330, #415D8D30);
  .tiketore { margin-bottom: 40px;
    .tiketore_r { display: flex; flex-direction: column;
      a { text-decoration: underline; display: inline-block; font-weight: bold;}
    }
  }
  .contact { text-align: center; background: rgba(255, 255, 255, 0.15); padding: 40px;
    @media screen and (max-width: 835px) {
      padding: 20px 14px;
    }
    .tit { font-size: 20px; line-height: 1.3em; margin-bottom: 0.3em;
      @media screen and (max-width: 835px) {
        font-size: 16px;
      }
      &:not(:first-of-type) { margin-top: 1.3em; }
    }
    a { text-decoration: underline; }
  }
}

.backtotop { position: fixed; top: 20px; right: 20px; z-index: 4000; max-width: 50%;
  @media screen and (max-width: 835px) {
    top: 12px; right: 12px;
  }
  a { display: block; }
}

.en_pages {
  @media screen and (max-width: 835px) {
    padding-top: calc(var(--base_distance) * 3.2); word-break: auto-phrase;
  }
  img { width: 100%; }
  #enFv { margin-bottom: clamp(100px, 6vw, 200px);
    .logo { width: 57%; margin: 0 auto 4%; max-width: 600px;
      @media screen and (max-width: 835px) {
        width: 64%; margin-bottom: 8%;
      }
    }
    .title { width: 80%; margin: 0 auto; max-width: 1000px;
      @media screen and (max-width: 835px) {
        width: 90%;
      }
    }
  }
  #enDate {
    .date {
      img { width: 100%; }
    }
    .date_block {
      @media screen and (max-width: 835px) {
        width: 74%; margin: 0 auto;
      }
    }
  }
  .section_wrap:not(:last-of-type) { margin-bottom: 200px;
    @media screen and (max-width: 835px) {
      margin-bottom: 100px;
    }
  }
  .en_h_outer {
    .en_h { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--c_theme_color); margin-bottom: 60px;
      @media screen and (max-width: 835px) {
        margin-bottom: 36px;
      }
      img { max-height: 50px;
        @media screen and (max-width: 835px) {
          max-height: 44px;
        }
      }
    }
  }
  #enIntro {
    .intro_tit { margin-bottom: 80px;
      @media screen and (max-width: 835px) {
        margin-bottom: 20px;
      }
    }
    .intro_text { font-size: clamp(14px, 1.35vw, 18px); line-height: 2em; text-align: center;
      @media screen and (max-width: 835px) {
        text-align: left; line-height: 2em;
      }
      p:not(:last-of-type) { margin-bottom: 1.8em; }
    }
  }
  #enStory {
    .story_block { text-align: center; letter-spacing: 0.05em; font-size: clamp(14px, 1.35vw, 18px); line-height: 2.2em;
      @media screen and (max-width: 835px) {
        text-align: left; line-height: 2.2em;
      }
      .text {
        p:not(:last-of-type) { margin-bottom: 1.6em; }
      }
    }
  }
  #enCast {
    .cast_wrap {
      .mod_flex_box_04 { --base_gap: clamp(20px,3vw,60px); }
      .cast {
        .name_block {
          .part { font-size: 16px; line-height: 1.3em; }
        }
      }
    }
    .cast_text { margin-top: 20px; padding-top: 14px; border-top: 1px solid #fff; line-height: 1.4em; font-size: 15px;
      @media screen and (max-width: 835px) {
        margin-top: 12px; padding-top: 8px; font-size: 14px; line-height: 1.4em;
      }
    }
  }
  #enTicket {
    .tk_block { padding: 5% 5%; background-color: rgba(255, 255, 255, 0.21);
      @media screen and (max-width: 835px) {
        padding: 20px 14px;
      }
      .tk_tit { font-size: 40px; text-align: center; line-height: 1.5em; margin-bottom: 0.6em;
        @media screen and (max-width: 835px) {
          font-size: 24px; line-height: 1.5em;
        }
      }
      .tk_text { display: block; text-align: center; font-size: 20px; line-height: 1.7em; margin-bottom: 1.3em;
        @media screen and (max-width: 835px) {
          font-size: 18px; line-height: 1.6em;
        }
      }
      .entry { background: var(--c_theme_color); color: #D4D6E5; text-align: center; padding: 3.4%;
        @media screen and (max-width: 835px) {
          text-align: left;
        }
      }
    }
    .en_h_outer {
      .en_h {
        @media screen and (max-width: 835px) {
          margin-bottom: 24px;
        }
      }
    }
  }
}

.goods_swiper { overflow: hidden; position: relative;
  .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0.5%; }
  .swiper-pagination-horizontal.swiper-pagination-bullets {
    .swiper-pagination-bullet { width: 7px; height: 7px; margin: 0 2px; background: var(--c_theme_color); }
  }
}

/* Blu-ray swiper */
/* .bluray_swiper { overflow: hidden; position: relative; width: 100%; height: auto;
  .swiper-slide {
    img { width: 100%; height: auto; display: block; }
  }
  .swiper-pagination { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 10; }
  .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px; background: rgba(255, 255, 255, 0.5); opacity: 1; transition: all 0.3s ease; }
  .swiper-pagination-bullet-active { background: var(--c_theme_color); transform: scale(1.2); }
}

.goods_list { --goods_color: var(--c_theme_color);
  .goods_block { position: relative; display: flex; gap: 40px; flex-wrap: wrap; width: 100%; margin-bottom: 3%; padding: 38px 34px 38px 34px; background-color: rgba(255, 255, 255, 0.17);
    @media screen and (max-width: 835px) {
      flex-direction: column; padding: 24px 18px; gap: 20px;
    }
    .frame { position: absolute; border: 1px solid var(--goods_color); width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
      &:before { position: absolute; content: ""; border: 1px solid var(--goods_color); width: calc(100% - 10px); height: calc(100% - 10px); top: 50%; left: 50%; transform: translate(-50%, -50%); }
      span { position: relative; width: 100%; height: 100%; display: block;
        &:before { position: absolute; content: ""; bottom: -1px; left: 0; border-style: solid; border-color: transparent transparent var(--goods_color) transparent; border-width: 0 25px 25px 0; }
        &:after { position: absolute; content: ""; top: -1px; right: 0; border-style: solid; border-color: var(--goods_color) transparent transparent transparent; border-width: 25px 0 0 25px; }
      }
    }
    .left { width: 40%;
      @media screen and (max-width: 835px) {
        width: 100%;
      }
    }
    .right { width: calc(60% - 40px);
      @media screen and (max-width: 835px) {
        width: 100%;
      }
      .top_box { position: relative; padding: 20px 0;
        @media screen and (max-width: 835px) {
          padding: 10px 0px;
        }
      }
      &:has(.bottom_box) {
        .top_box { margin-bottom: 30px;
          @media screen and (max-width: 835px) {
            padding-top: 0; margin-bottom: 20px;
          }
          &:before { position: absolute; content: ""; background: var(--c_font_color); width: calc(100% + 28px); bottom: 0; left: 0; height: 1px;
            @media screen and (max-width: 835px) {
              width: 100%;
            }
          }
        }
      }
    }
    .obi { display: inline-block; background: var(--c_red); padding: 0 8px 0 8px; font-weight: bold; font-size: 14px; line-height: 26px; margin-bottom: 4px; text-align: center; color: var(--c_white_l); }
    .goods_tit { font-size: clamp(20px, 2.3vw, 27px); font-weight: bold; line-height: 1.4em; margin-bottom: 0.7em;
      @media screen and (max-width: 835px) {
        margin-bottom: 0.5em;
      }
      span { color: var(--c_red); font-size: 0.7em; line-height: 1.4em; }
    }
    .price { font-weight: bold; font-size: clamp(18px, 2vw, 24px); margin-bottom: 0.4em; line-height: 1.5em; }
    .spec { font-weight: bold; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.5em; }
  }
}

.goods_wrap { margin-bottom: 80px; }

.goods_other_wrap {
  .block { padding: 4% 3%; background-color: rgba(255, 255, 255, 0.17);
    &:not(:last-of-type) { margin-bottom: 60px; }
    h3:first-of-type { margin-top: 1em; }
  }
} */

/********************** GUIDE *******************************/
/* #guide { max-width: 1000px; width: 100%; margin: 0 auto;
  .block .cmn_list_kome li, .block .cmn_list_circle li { line-height: 1.5em; }
  .guide_tit { font-size: 24px; font-weight: bold; line-height: 1.5em; margin-bottom: 60px; text-align: center;
    @media only screen and (max-width: 768px) {
      font-size: 16px; margin-bottom: 30px;
    }
  }
  .link_box { margin-bottom: 60px;
    @media only screen and (max-width: 768px) {
      margin-bottom: 30px;
    }
    p { margin: 8px 0; font-size: 14px; line-height: 1.5em;
      @media only screen and (max-width: 768px) {
        font-size: 12px;
      }
      span { color: var(--color1); }
    }
  }
  .catch { text-align: left; margin-bottom: 60px;
    @media only screen and (max-width: 768px) {
      margin-bottom: 30px;
    }
    p {
      @media only screen and (max-width: 768px) {
        font-size: 14px; line-height: 1.7em;
      }
    }
  }
  .guide_block { background: rgba(255, 255, 255, 0.4); padding: 40px 30px;
    @media only screen and (max-width: 768px) {
      padding: 20px 14px;
    }
  }
  .block {
    p { line-height: 1.7em;
      &:not(:last-of-type) { margin-bottom: 1.4em; }
    }
    a { text-decoration: underline; }
    .tit { position: relative; display: block; padding-bottom: 0.4em; padding-left: 1.1em; font-size: clamp(17px, 2vw, 19px); font-weight: bold; margin-bottom: 0.7em; margin-top: 3em; line-height: 1.4em; border-bottom: 1px solid var(--cmn_write_box_theme_color); border-style: dashed; border-top: none; border-left: none; border-right: none; color: var(--c_font_color);
      &::before { position: absolute; display: block; content: ""; left: 0; top: 0.4em; width: 0.6em; height: 0.6em; background-color: var(--cmn_write_box_theme_color); transform: rotateZ(45deg); }
    }
    h4 { position: relative; display: inline-block; font-size: clamp(15px, 2vw, 17px); font-weight: bold; margin-bottom: 0.7em; margin-top: 1em; line-height: 1.4em; padding: 0.1em 0.7em 0.2em; border: 1px solid var(--cmn_write_box_theme_color); color: var(--cmn_write_box_theme_color); }
  }
  .tabs { display: flex; margin-bottom: 50px;
    .tab { width: 49%;
      &:nth-of-type(odd) { margin-right: 2%; }
      a { display: block; width: 100%; color: #D4D6E5; border: 1px solid #CB0E0E; padding: 20px; text-align: center; transition: 0.2s;
        &:hover { opacity: 1; background: #CB0E0E; transition: 0.2s; }
      }
      &.off {
        a { opacity: 0.8; pointer-events: none; border: 1px solid #ccc; color: #ccc; }
      }
      &.active {
        a { background: #CB0E0E; pointer-events: none; }
      }
    }
  }
  .main_list { text-align: left;
    > li { border-bottom: 1px solid #ccc; padding-bottom: 30px; margin-bottom: 30px;
      @media only screen and (max-width: 768px) {
        padding-bottom: 20px; margin-bottom: 20px;
      }
      .stit { font-size: 20px; font-weight: bold; line-height: 1.4em; opacity: 1; margin-bottom: 30px;
        @media only screen and (max-width: 768px) {
          font-size: 16px; margin-bottom: 12px;
        }
      }
      p { font-size: 16px; line-height: 1.7em; margin-bottom: 1.5em; font-weight: normal;
        @media only screen and (max-width: 768px) {
          font-size: 14px; line-height: 1.6em; margin-bottom: 1.1em;
        }
        &:last-child { margin-bottom: 0; }
        span.box { display: block; background-color: #F6F9FF; padding: 20px; line-height: 1.5em; }
      }
      a { text-decoration: underline; }
      figure { margin-bottom: 12px;
        img { width: auto; max-width: 100%; }
      }
      ul { list-style: disc;
        &.alpha { list-style: none; padding-left: 0; margin-bottom: 2em;
          li { text-indent: -1em; padding-left: 1em; }
        }
      }
      li { font-size: 16px; line-height: 1.6em; margin-bottom: 1em;
        @media only screen and (max-width: 768px) {
          font-size: 14px; line-height: 1.6em;
        }
      }
    }
  }
  .price_time { margin-bottom: 0.3em;
    table:not(:last-of-type) { margin-bottom: 20px; }
    table { table-layout: fixed; border-collapse: collapse; width: 100%; border: 1px solid var(--c_theme_color); background: rgba(255, 255, 255, 0.17);
      @media only screen and (max-width: 768px) {
        table-layout: auto;
      }
      th { border-bottom: 1px solid var(--c_theme_color); text-align: center; background: rgba(190, 190, 190, 0.28); vertical-align: middle; font-size: 14px; line-height: 1.4em; padding: 4px;
        @media only screen and (max-width: 768px) {
          font-size: 10px; padding: 4px 0; border-right: 1px solid var(--c_theme_color);
        }
        &:not(:last-of-type) { border-right: 1px solid var(--c_theme_color); }
        span { font-size: 0.8em; font-weight: normal; }
        &.small { font-size: 12px; }
        &.first {
          @media only screen and (max-width: 768px) {
            width: 50%; font-size: 12px;
          }
        }
      }
      td { font-size: 14px; line-height: 1.4em; padding: 4px; border-bottom: 1px solid var(--c_theme_color); text-align: center; vertical-align: middle; border-right: 1px solid var(--c_theme_color);
        @media only screen and (max-width: 768px) {
          font-size: 12px; padding: 4px 2px;
        }
        span { font-size: 0.8em; }
        &:not(:last-of-type) { border-right: 1px solid var(--c_theme_color); }
        &:first-of-type {
          @media only screen and (max-width: 768px) {
            width: 1em;
          }
        }
        &:nth-of-type(2) {
          @media only screen and (max-width: 768px) {
            width: 3.3em;
          }
        }
        &:nth-of-type(3) {
          @media only screen and (max-width: 768px) {
            width: 5em;
          }
        }
        &:nth-of-type(4) {
          @media only screen and (max-width: 768px) {
            width: 5em;
          }
        }
        &:nth-of-type(5) {
          @media only screen and (max-width: 768px) {
            width: 6em;
          }
        }
      }
      .sm {
        @media only screen and (max-width: 768px) {
          width: 9%;
        }
      }
    }
    &.table02 {
      table {
        th { padding: 6px; }
        td { padding: 14px; font-size: 16px; line-height: 1.2em;
          @media only screen and (max-width: 768px) {
            padding: 6px; font-size: 12px; line-height: 1.2em;
          }
        }
      }
    }
  }
  .end_txt {
    @media only screen and (max-width: 768px) {
      text-align: left; font-size: 14px; line-height: 1.5em;
    }
  }
}

.blu-ray_wrap { margin-bottom: 160px; padding: 30px 24px; background: rgba(255, 255, 255, 0.4);
  @media screen and (max-width: 835px) {
    padding: 24px 16px; margin-bottom: 80px;
  }
  .wrap_tit { text-align: center; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.5em; margin-bottom: 2em; }
  .bluray_kv { margin-bottom: 2em; }
  .main_text { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5em; }
}

.tokuten_wrap {
  .tokuten_tit { text-align: center; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4em; margin-bottom: 2em; }
  .tokuten_flex { display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 50px); justify-content: center;
    .tokuten_block { width: calc((100% - clamp(30px, 4vw, 50px)) / 2); margin-bottom: 20px;
      @media screen and (max-width: 835px) {
        width: 100%;
      }
      &.main { width: 64%;
        @media screen and (max-width: 835px) {
          width: 100%;
        }
      }
      .tit { font-size: clamp(17px, 1.6vw, 24px); line-height: 1.4em; margin-bottom: 0.5em; text-align: center; }
      .box { padding: 30px 24px; background: rgba(255, 255, 255, 0.4); border: 1px solid var(--c_theme_color);
        @media screen and (max-width: 835px) {
          padding: 24px 16px;
        }
        .name { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.4em; margin-bottom: 0.4em; }
        figure { margin-bottom: 20px; }
        .text { margin-bottom: 20px; }
        .cmn_btn_outer { text-align: center; }
      }
    }
  }
}

#streaming {
  .top_text { font-size: clamp(16px, 2vw, 26px); line-height: 1.3em; font-weight: bold; text-align: center; border: 1px solid var(--c_theme_color); padding: 1em; margin-bottom: 40px; }
  .streaming_wrap { padding: clamp(24px, 3vw, 30px) clamp(16px, 2.6vw, 24px); background: rgba(255, 255, 255, 0.4); }
}  */

@-webkit-keyframes line-draw {
  0% { width: 0%; opacity: 0; }
  10% { width: 0%; opacity: 1; }
  30% { width: 100%; opacity: 1; }
  50% { width: 100%; opacity: 0; }
  100% { width: 100%; opacity: 0; }
}

@keyframes line-draw {
  0% { width: 0%; opacity: 0; }
  10% { width: 0%; opacity: 1; }
  30% { width: 100%; opacity: 1; }
  50% { width: 100%; opacity: 0; }
  100% { width: 100%; opacity: 0; }
}

@-webkit-keyframes showout {
  0% { opacity: 0.1; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  90% { opacity: 0.1; }
  100% { opacity: 0.1; }
}

@keyframes showout {
  0% { opacity: 0.1; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  90% { opacity: 0.1; }
  100% { opacity: 0.1; }
}

@-webkit-keyframes show-hibi {
  0% { opacity: 0; -webkit-clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); }
  30% { opacity: 1; -webkit-clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); }
  100% { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

@keyframes show-hibi {
  0% { opacity: 0; -webkit-clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); }
  30% { opacity: 1; -webkit-clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); clip-path: polygon(49% 33%, 53% 32%, 52% 38%, 52% 35%); }
  100% { opacity: 1; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

@-webkit-keyframes dots {
  0% { content: "."; }
  25% { content: ".."; }
  50% { content: "..."; }
  75% { content: "...."; }
  100% { content: "."; }
}

@keyframes dots {
  0% { content: "."; }
  25% { content: ".."; }
  50% { content: "..."; }
  75% { content: "...."; }
  100% { content: "."; }
}

@-webkit-keyframes expandMask {
  0% { -webkit-mask-size: 100% 100%, 0vmin auto; mask-size: 100% 100%, 0vmin auto; }
  100% { -webkit-mask-size: 100% 100%, 300vmin auto; mask-size: 100% 100%, 300vmin auto; }
}

@keyframes expandMask {
  0% { -webkit-mask-size: 100% 100%, 0vmin auto; mask-size: 100% 100%, 0vmin auto; }
  100% { -webkit-mask-size: 100% 100%, 300vmin auto; mask-size: 100% 100%, 300vmin auto; }
}

@-webkit-keyframes vanish {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes vanish {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes shake {
  0% { opacity: 1; transform: translateX(0); }
  10% { opacity: 1; transform: translateX(-2%); }
  20% { opacity: 1; transform: translateX(2%); }
  30% { opacity: 1; transform: translateX(-2%); }
  40% { opacity: 1; transform: translateX(1%) rotate(1deg); }
  50% { opacity: 1; transform: translateX(-1%) rotate(-1deg); }
  60% { opacity: 1; transform: translateX(2%); }
  70% { opacity: 1; transform: translateX(-2%); }
  80% { opacity: 1; transform: translateX(1%); }
  90% { opacity: 1; transform: translateX(-1%); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes shake {
  0% { opacity: 1; transform: translateX(0); }
  10% { opacity: 1; transform: translateX(-2%); }
  20% { opacity: 1; transform: translateX(2%); }
  30% { opacity: 1; transform: translateX(-2%); }
  40% { opacity: 1; transform: translateX(1%) rotate(1deg); }
  50% { opacity: 1; transform: translateX(-1%) rotate(-1deg); }
  60% { opacity: 1; transform: translateX(2%); }
  70% { opacity: 1; transform: translateX(-2%); }
  80% { opacity: 1; transform: translateX(1%); }
  90% { opacity: 1; transform: translateX(-1%); }
  100% { opacity: 1; transform: translateX(0); }
}