@charset "UTF-8";
/* ------------------------------------------------------------
 easing
------------------------------------------------------------ */
:root {
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1 );
  --easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95 );
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53 );
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94 );
  --easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19 );
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1 );
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1 );
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22 );
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1 );
  --easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1 );
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06 );
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1 );
  --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1 );
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1 );
  --easeInOutExpo: cubic-bezier(1, 0, 0, 1 );
  --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1 );
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86 );
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55 ); }

html.modal__active,
body.modal__active,
html.nav__active,
body.nav__active {
  overflow: hidden;
  height: auto; }

div, span, a {
  box-sizing: border-box; }

/**
 * clamp()関数を生成するSCSS関数 (LibSass版)
 * @param {Number} $min-size - 最小フォントサイズ (例: 1rem, 16px)
 * @param {Number} $max-size - 最大フォントサイズ (例: 2.5rem, 40px)
 * @return {String} - CSSのclamp()関数
 */
:root {
  --infiniteloop-item-length:0; }

/**********************************************************************
	テキスト
**********************************************************************/
@media screen and (min-width: 768px) {
  .wrapper .smp_only {
    display: none !important; } }
@media screen and (max-width: 768px) {
  .wrapper .pc_only {
    display: none !important; } }
.wrapper .center {
  text-align: center; }
.wrapper .left {
  text-align: left; }
.wrapper .right {
  text-align: right; }
.wrapper .hidetext {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px; }
.wrapper .none {
  display: none; }
.wrapper .txt_x-large {
  font-size: 131%; }
.wrapper .txt_large {
  font-size: 116%; }
.wrapper .txt_small {
  font-size: 85%; }
.wrapper .txt_x-small {
  font-size: 77%; }
.wrapper .thin {
  font-weight: normal; }
.wrapper .attenntion {
  margin-left: 1em;
  line-height: 140%;
  text-indent: -1em; }
.wrapper .red {
  color: #d41316; }
.wrapper .white {
  color: #fff;
  font-size: 12px;
  padding-bottom: 200px; }
  @media screen and (max-width: 768px) {
    .wrapper .white {
      color: #fff;
      font-size: 2.34375vw;
      padding-bottom: 30vw; } }
.wrapper .italic {
  font-style: italic; }
.wrapper .fs18 {
  font-size: 18px; }
  @media screen and (max-width: 768px) {
    .wrapper .fs18 {
      font-size: 3.90625vw; } }

/**********************************************************************
margin / padding
*********************************************************************/
@media screen and (min-width: 768px) {
  .wrapper .mt5 {
    margin-top: 5px !important; }
  .wrapper .mt10 {
    margin-top: 10px !important; }
  .wrapper .mt15 {
    margin-top: 15px !important; }
  .wrapper .mt20 {
    margin-top: 20px !important; }
  .wrapper .mt30 {
    margin-top: 30px !important; }
  .wrapper .mt50 {
    margin-top: 50px !important; }
  .wrapper .mt60 {
    margin-top: 60px !important; }
  .wrapper .mt80 {
    margin-top: 80px !important; }
  .wrapper .mb5 {
    margin-bottom: 5px !important; }
  .wrapper .mb10 {
    margin-bottom: 10px !important; }
  .wrapper .mb15 {
    margin-bottom: 15px !important; }
  .wrapper .mb20 {
    margin-bottom: 20px !important; }
  .wrapper .mb30 {
    margin-bottom: 30px !important; }
  .wrapper .mb40 {
    margin-bottom: 40px !important; }
  .wrapper .mb50 {
    margin-bottom: 50px !important; }
  .wrapper .mb60 {
    margin-bottom: 60px !important; }
  .wrapper .mb80 {
    margin-bottom: 80px !important; }
  .wrapper .lr_p20 {
    padding: 0 20px !important; }
  .wrapper .pt10 {
    padding-top: 10px !important; }
  .wrapper .pt20 {
    padding-top: 20px !important; }
  .wrapper .p20 {
    padding: 20px !important; }
  .wrapper .pb30 {
    padding-bottom: 30px !important; }
  .wrapper .pb40 {
    padding-bottom: 40px !important; } }
.wrapper .w100 {
  width: 100%; }
.wrapper .w80 {
  width: 80%; }
.wrapper .w75 {
  width: 75%;
  margin: 0 auto;
  display: block; }
.wrapper .w50 {
  width: 50%; }
.wrapper .w40 {
  width: 40%; }
.wrapper .w30 {
  width: 30%; }
.wrapper .radius5 {
  border-radius: 5px; }

@media screen and (max-width: 768px) {
  .wrapper .w75 {
    width: 100%; }
  .wrapper .mt5 {
    margin-top: .78vw !important; }
  .wrapper .mt10 {
    margin-top: 1.56vw !important; }
  .wrapper .mt15 {
    margin-top: 2.5vw !important; }
  .wrapper .mt20 {
    margin-top: 3.12vw !important; }
  .wrapper .mt30 {
    margin-top: 5vw !important; }
  .wrapper .mt50 {
    margin-top: 7.8vw !important; }
  .wrapper .mt60 {
    margin-top: 10vw !important; }
  .wrapper .mt80 {
    margin-top: 12.48vw !important; }
  .wrapper .mb5 {
    margin-bottom: .78vw !important; }
  .wrapper .mb10 {
    margin-bottom: 1.56vw !important; }
  .wrapper .mb15 {
    margin-bottom: 2.5vw !important; }
  .wrapper .mb20 {
    margin-bottom: 3.12vw !important; }
  .wrapper .mb30 {
    margin-bottom: 5vw !important; }
  .wrapper .mb40 {
    margin-bottom: 6.24vw !important; }
  .wrapper .mb50 {
    margin-bottom: 7.8vw !important; }
  .wrapper .mb60 {
    margin-bottom: 10vw !important; }
  .wrapper .mb80 {
    margin-bottom: 12.48vw !important; }
  .wrapper .lr_p20 {
    padding: 0 3.12vw !important; }
  .wrapper .p20 {
    padding: 3.12vw !important; }
  .wrapper .pt10 {
    padding-top: 1.56vw !important; }
  .wrapper .pt20 {
    padding-top: 3.12vw !important; }
  .wrapper .pb30 {
    padding-bottom: 5vw !important; }
  .wrapper .pb40 {
    padding-bottom: 6.24vw !important; } }

.wrapper {
  background: url(../../common/images/bg.png);
  background-position: center;
  background-size: contain; }
  @media screen and (max-width: 768px) {
    .wrapper {
      background-size: auto; } }
  .wrapper main.main {
    width: 768px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 110px;
    border-left: 3px solid #ffd9ed;
    border-right: 3px solid #b8a3ff; }
    @media screen and (max-width: 768px) {
      .wrapper main.main {
        border-left: 4px solid #ffd9ed;
        border-right: 4px solid #b8a3ff;
        box-sizing: border-box;
        width: auto;
        padding: 0; }
        .wrapper main.main:first-child {
          padding: 10vw 0 10vw; } }
  .wrapper section {
    position: relative; }
  .wrapper section#TICKET {
    margin: 0 auto 10em; }
  .wrapper section#ACCESS {
    padding: 30px 0 0; }
    @media screen and (max-width: 768px) {
      .wrapper section#ACCESS {
        padding: 15vw 0 0; } }
  .wrapper section#GOODS {
    margin: 0 auto 10em; }
    .wrapper section#GOODS .w_box {
      padding: 0; }
      @media screen and (max-width: 768px) {
        .wrapper section#GOODS .w_box {
          padding: 0 0; } }
      .wrapper section#GOODS .w_box p {
        width: 96%;
        margin: 2% auto 5%;
        padding: 0; }
        @media screen and (max-width: 768px) {
          .wrapper section#GOODS .w_box p {
            width: 94%;
            padding: 0 0;
            margin: 3% auto 13.02vw; } }
  .wrapper .main_img img {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    display: block; }
    @media screen and (max-width: 768px) {
      .wrapper .main_img img {
        width: 100%; } }
  .wrapper .main_caption {
    margin: 30px auto 40px;
    display: block;
    color: #fff;
    font-size: 24px;
    letter-spacing: 0.025em; }
    @media screen and (max-width: 768px) {
      .wrapper .main_caption {
        font-size: 4.6875vw; } }
  .wrapper .main_caption img {
    width: 50%; }
  .wrapper section h3 img {
    height: 90px;
    margin: 110px auto 5px; }
    @media screen and (max-width: 768px) {
      .wrapper section h3 img {
        height: 11.97916vw;
        margin: 10vw auto 1vw; } }
  .wrapper section h4 img {
    height: 75px;
    margin: 20px auto 5px; }
    @media screen and (max-width: 768px) {
      .wrapper section h4 img {
        height: 9.5052vw; } }
  .wrapper .new_box {
    display: flex;
    padding: 2em;
    margin: 0 auto 4em;
    color: #fff;
    font-size: 18px;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
    letter-spacing: 0.025em; }
    @media screen and (max-width: 768px) {
      .wrapper .new_box {
        padding: 2vw;
        margin: 0 auto 14vw;
        color: #fff; } }
    .wrapper .new_box span {
      color: #fff;
      font-size: 18px;
      padding: 1em; }
      @media screen and (max-width: 768px) {
        .wrapper .new_box span {
          padding: 2vw;
          font-size: 3.125vw; } }
    .wrapper .new_box span.day {
      width: 20%; }
      @media screen and (max-width: 768px) {
        .wrapper .new_box span.day {
          width: 24%; } }
    .wrapper .new_box span.txt {
      border-left: 2px solid #fff;
      width: 80%; }
      @media screen and (max-width: 768px) {
        .wrapper .new_box span.txt {
          width: 75%; } }
  .wrapper .w_box {
    background: #ffffff;
    display: block;
    box-sizing: content-box;
    /*border: 6px solid rgba(255, 255, 255, 0.7) !important;*/
    background-clip: padding-box;
    padding: 4em;
    margin: 0 auto 4em;
    border-style: solid;
    border-width: 6px 3px;
    /* 上下6px、左右3px */
    border-image: linear-gradient(90deg, #ffd9ed 0%, #ffd9ed 50%, #b8a3ff 50%, #b8a3ff 100%) 1; }
    @media screen and (max-width: 768px) {
      .wrapper .w_box {
        padding: 0 1em;
        margin: 0 auto 4em; } }
    .wrapper .w_box a {
      color: #2f1b7a;
      text-decoration: underline; }
      .wrapper .w_box a:visited {
        color: #e060ab; }
    .wrapper .w_box h4 {
      font-size: 30px;
      /* margin-top: 20px; */
      letter-spacing: 0.025em;
      text-align: left; }
      @media screen and (max-width: 768px) {
        .wrapper .w_box h4 {
          font-size: 6.25vw;
          margin-top: 10.416vw;
          line-height: 1.4; } }
    .wrapper .w_box h4.t_pink {
      color: #e060ab; }
    .wrapper .w_box h4.t_blue {
      color: #2f1b7a; }
    .wrapper .w_box p {
      font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
      font-weight: bold;
      font-style: normal;
      letter-spacing: 0.075em;
      width: 92%;
      margin: 10px auto 50px;
      padding: 1em 2em;
      font-size: 14px;
      font-weight: normal;
      /*    letter-spacing: 1px;*/ }
      @media screen and (max-width: 768px) {
        .wrapper .w_box p {
          width: 92%;
          padding: 1em 1em;
          font-weight: 600 !important;
          font-size: 3.125vw;
          margin: 1em auto 13.02vw;
          letter-spacing: 0.025em; } }
    .wrapper .w_box p.b_pink {
      text-align: left;
      border-left: 2px solid #e060ab; }
      @media screen and (max-width: 768px) {
        .wrapper .w_box p.b_pink {
          border-left: 1px solid #e060ab; } }
    .wrapper .w_box p.b_blue {
      text-align: left;
      border-left: 2px solid #2f1b7a; }
      @media screen and (max-width: 768px) {
        .wrapper .w_box p.b_blue {
          border-left: 1px solid #2f1b7a; } }
  .wrapper .sc_btn {
    margin: -88px auto 0 !important;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .wrapper .sc_btn {
        margin: -20vw auto 0 !important; } }
    .wrapper .sc_btn img {
      height: 92px;
      transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1); }
      @media screen and (max-width: 768px) {
        .wrapper .sc_btn img {
          width: auto;
          height: 18vw; } }
      .wrapper .sc_btn img:hover {
        transform: scale(1.1);
        cursor: pointer; }

.wrapper .logo {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: 20.2604vw;
  max-width: 388px; }
  .wrapper .logo img {
    width: 100%;
    height: auto;
    image-rendering: pixelated; }
    @media screen and (max-width: 768px) {
      .wrapper .logo img {
        image-rendering: auto; } }
  @media screen and (max-width: 768px) {
    .wrapper .logo {
      width: 54.55729vw;
      max-width: 419px;
      top: 51%;
      transform: translate(-50%, -50%);
      image-rendering: auto; } }

.wrapper {
  /* preference for reduced motion */ }
  .wrapper .hero {
    position: relative;
    background-color: #fff; }
    @media screen and (max-width: 768px) {
      .wrapper .hero {
        padding-bottom: 1vw; } }
    .wrapper .hero__message {
      position: absolute;
      bottom: 26px;
      right: 98px;
      width: 17.13541vw;
      max-width: 329px;
      height: 3.54166vw;
      max-height: 68px;
      z-index: 10; }
      @media screen and (max-width: 768px) {
        .wrapper .hero__message {
          bottom: 2.86458vw;
          right: 2.86458vw;
          width: 50.78125vw;
          max-width: 390px;
          height: 9.11458vw;
          max-height: 70px; } }
      .wrapper .hero__message img {
        width: 100%;
        height: auto;
        display: block; }
    .wrapper .hero__slides {
      display: grid;
      grid-template-columns: 1fr 1fr;
      aspect-ratio: 1920 / 911;
      overflow: hidden; }
      @media screen and (max-width: 768px) {
        .wrapper .hero__slides {
          grid-template-columns: 1fr;
          aspect-ratio: 768 / 1440;
          gap: 80px; } }
    .wrapper .hero__side {
      position: relative;
      overflow: hidden; }
    .wrapper .hero__slide {
      position: absolute;
      width: min(46.3541vw, 890px);
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transform: scale(1);
      transition: opacity 800ms ease-in-out;
      will-change: opacity, transform;
      aspect-ratio: 960 / 911; }
      .wrapper .hero__slide:not(.active) img {
        content-visibility: auto; }
      .wrapper .hero__slide img {
        transform: translateZ(0);
        backface-visibility: hidden; }
      @media screen and (max-width: 768px) {
        .wrapper .hero__slide {
          aspect-ratio: 768 / 680; } }
      .wrapper .hero__slide[aria-hidden="false"] {
        opacity: 1;
        transform: scale(1);
        transition: opacity 800ms ease-in-out, transform 0ms linear; }
      .wrapper .hero__slide[aria-hidden="true"] {
        opacity: 0;
        transform: scale(1.2);
        transition: opacity 800ms ease-in-out, transform 1000ms ease-in-out; }
      .wrapper .hero__slide:before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .wrapper .hero__slide {
      transition: none !important; } }

.wrapper .vdl-linegr {
  font-family: "vdl-lineg", sans-serif;
  font-weight: 400;
  font-style: normal; }

.wrapper #CAST {
  font-family: "vdl-lineg", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.025em; }
  @media screen and (max-width: 768px) {
    .wrapper #CAST {
      margin-bottom: 14vw; } }
  .wrapper #CAST .cast_box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: flex-start;
    margin: 20px auto 80px; }
    @media screen and (max-width: 768px) {
      .wrapper #CAST .cast_box {
        margin: 1em auto;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        align-items: flex-start;
        width: 100%;
        overflow: auto;
        gap: 2.864583vw; } }
    .wrapper #CAST .cast_box div {
      line-height: 1.4; }
      @media screen and (max-width: 768px) {
        .wrapper #CAST .cast_box div {
          text-align: center;
          width: 28.64583vw;
          font-size: 3.125vw; } }
      .wrapper #CAST .cast_box div img {
        margin: 0 10px 10px; }
        @media screen and (max-width: 768px) {
          .wrapper #CAST .cast_box div img {
            width: 100%;
            margin: auto;
            padding-bottom: 2.864583vw; } }
  .wrapper #CAST .pink {
    color: #ffdbee; }
  .wrapper #CAST .blue {
    color: #ddd3ff; }

.wrapper .bangumi_img {
  /*	padding-top: 110px;*/
  width: 100%; }
  @media screen and (max-width: 768px) {
    .wrapper .bangumi_img {
      /*        padding-top: 0;
              margin-top: 32vw;*/ } }
  .wrapper .bangumi_img img {
    width: 100%; }
    @media screen and (max-width: 768px) {
      .wrapper .bangumi_img img {
        /*    height: 100%;
            object-fit: cover; 
            object-position: center;*/ } }

.wrapper {
  /* CP時 バナー大 */
  /*  @media screen and (min-width: 1300px) {
      .win_foot_bnr_inner_cp_big {
        width: 1097px;
      }
    }*/ }
  .wrapper .win_foot_bnr {
    position: fixed;
    bottom: 9px;
    right: 2px;
    z-index: 10; }
    @media screen and (max-width: 768px) {
      .wrapper .win_foot_bnr {
        position: fixed;
        bottom: 5vw !important;
        right: 0 !important;
        /* left: 64vw; */
        z-index: 5;
        width: 35.15625vw; } }
  .wrapper .win_foot_bnr img {
    vertical-align: top; }
  .wrapper .banner_img {
    height: 102px !important; }
  .wrapper .win_foot_bnr {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 5; }
  .wrapper .win_foot_bnr img {
    vertical-align: top; }
  .wrapper .win_foot_bnr_big {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
    height: 100px; }
  .wrapper .win_foot_bnr_inner_cp_big {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
    display: flex;
    justify-content: center; }
  .wrapper .link_area img {
    height: 100px; }
  .wrapper .win_foot_bnr_big img {
    margin: 0 !important; }
  .wrapper footer#txcms_footer {
    padding-bottom: 110px; }
  .wrapper .bnr_fixed .win_foot_bnr {
    bottom: 5vw !important;
    right: 0 !important; }
  @media screen and (max-width: 768px) {
    .wrapper {
      /* CP時 バナー大 */ }
      .wrapper .win_foot_bnr img {
        vertical-align: top; }
      .wrapper .banner_img {
        height: 102px !important; }
      .wrapper .win_foot_bnr_big {
        position: fixed;
        bottom: 0;
        z-index: 5;
        width: 100%;
        height: 100px; }
      .wrapper .win_foot_bnr_inner_cp_big {
        position: relative;
        margin: 0 auto;
        width: 1000px;
        height: 100%;
        display: flex;
        justify-content: center; }
      .wrapper .link_area img {
        width: 90%;
        height: auto !important; }
      .wrapper .win_foot_bnr_big img {
        margin: 0 !important; }
      .wrapper .bnr_fixed .win_foot_bnr {
        left: 20px;
        bottom: 30px; }
      .wrapper .bnr_fixed .win_foot_bnr .link_area img {
        width: 72%;
        height: auto !important; }
      .wrapper .p-footer__back-button {
        bottom: 46px; } }