@charset "utf-8";

/**********************************************************
 * html, body, タイポグラフィ、リンク等の基本
 **********************************************************/
:root {
  /* 
  font-size
  1rem = 16px PCでは実質16px基準（ユーザー設定を尊重）
  計算方法：24px / 16px = 1.5rem
  */
  --font-10: 0.625rem;  /* 10px */
  --font-12: 0.75rem;  /* 12px */
  --font-14: 0.875rem;  /* 14px */
  --font-16: 1rem;  /* 16px */
  --font-17: 1.0625rem;  /* 17px */
  --font-18: 1.125rem;  /* 18px */
  --font-19: 1.1875rem;  /* 19px */
  --font-20: 1.25rem;   /* 20px */
  --font-21: 1.3125rem;   /* 21px */
  --font-22: 1.375rem;   /* 22px */
  --font-24: 1.5rem;   /* 24px */
  --font-26: 1.625rem;   /* 26px */
  --font-27: 1.6875rem;   /* 27px */
  --font-28: 1.75rem;   /* 28px */
  --font-30: 1.875rem;   /* 30px */
  --font-32: 2rem;   /* 32px */
  --font-34: 2.125rem;   /* 34px */
  --font-36: 2.25rem;   /* 36px */
  --font-45: 2.8125rem;   /* 45px */
  --font-60: 3.75rem;   /* 60px */

  /* color */
  --base: #090304;
  --accent: #f29600;
}
.font-noto-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
}
.font-roboto {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
}
html {
  font-size: 100%;
  /* スマホで勝手に文字が大きならないように設定 */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}
body {
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "YuGothic",
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  "Meiryo",
  sans-serif;
  font-size: var(--font-18);
  font-feature-settings: "palt";
  font-weight: 400;
  color: #fff;
  background: var(--base);
}
a {
  color: #fff;
  text-decoration: none;
}
img {
  width: 100%;
  max-width: 100%;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
sup {
  vertical-align: super;
  font-size: var(--font-10);
}

@media (width < 768px) {
  body {
    font-size: 4.267vw;
  }
  .section-title {
    margin: 0 auto 10.667vw;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}



/*
MENU
================================================ */
.openbtn-container {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
}
.openbtn {
  position: relative;
  background: var(--base);
  cursor: pointer;
  width: 13.333vw;
  height: 13.333vw;
}
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 0.5333vw;
  background: #fff;
  width: 7.466vw;
  }
.openbtn span:nth-of-type(1) {
  top:4vw;
}
.openbtn span:nth-of-type(2) {
  top:6.4vw;
}
.openbtn span:nth-of-type(3) {
  bottom: 4vw;
}
.openbtn.active span:nth-of-type(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (width < 768px) {
  .openbtn-container {
    display: block;
  }
}

/*
header
================================================ */
header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  color: var(--base);
  background: var(--accent);
}
header a {
  color: var(--base);
}
header .inner,
header .globalnav__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .globalnav__item a {
  position: relative;
  display: block;
  padding: 13px 20px;
  font-size: var(--font-20);
}
header .globalnav__item:first-of-type a {
  padding: 13px 40px;
}
header .globalnav__item a span {
  display: inline-block;
  transform: scale(0.9, 1);
}
header .globalnav__item:first-of-type a::before,
header .globalnav__item a::after {
  position: absolute;
  top: 0;
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  transform: skewX(-15deg);
  background: var(--base);
}
header .globalnav__item:first-of-type a::before {
  left: 0;
}
header .globalnav__item a::after {
  right: 0;
}

@media (width < 768px) {
  header {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 1000;
    overflow-y: auto;
    box-sizing: border-box;
  }
  header.active {
    display: block;
  }
  header .inner {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }
  header .logo {
    margin: 0 auto;
  }
  header .globalnav {
    padding: 21.333vw 12vw 12vw;
    width: 100%;
  }
  header .globalnav__list {
    flex-direction: column;
  }
  header .globalnav__item {
    width: 100%;
  }
  header .globalnav__item a {
    padding: 5.33vw 0;
    font-size: 5.33vw;
    text-align: center;
  }
  header .globalnav__item:first-of-type a::before,
  header .globalnav__item a::after {
    display: none;
  }
}

/*
footer
================================================ */
footer {
  position: relative;
  padding: 40px;
  font-size: var(--font-16);
  line-height: 1.7;
  text-align: center;
}
footer small {
  display: block;
  margin-top: .5em;
  font-size: var(--font-12);
}
footer .footer_logo {
  display: block;
  margin: 25px auto 0;
  width: 388px;
}

@media (width < 768px) {
  footer {
    padding: 8vw 5.333vw;
    font-size: 3.733vw;
  }
  footer small {
    font-size: 3.2vw;
  }
}

/*
fv
================================================ */
.fv {
  position: relative;
}
.fv .mv {
  text-align: center;
}
.fv__lead {
  margin-inline: auto;
  padding: 26px 0;
  max-width: 788px;
}

@media (width < 768px) {
  .fv {
    padding: 8vw 0 0;
  }
  .fv__lead {
    padding: 2.67vw;
  }
}

/*
schedule
================================================ */
#schedule {
  padding: 20px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 900;
  color: var(--base);
  font-size: var(--font-45);
  background: var(--accent);
}
#schedule .schedule-list {
  display: flex;
  justify-content: center;
  gap: 130px;
}
#schedule .schedule-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
#schedule p:has(.year) {
  font-size: var(--font-60);
}
#schedule .year {
  margin-right: .25em;
  font-size: var(--font-22);
}
#schedule .week {
  margin-left: .25em;
  font-size: var(--font-34);
}
#schedule .time {
  font-size: var(--font-22);
}
#schedule .time span {
  font-size: var(--font-19);
}
#schedule .place {
  font-size: var(--font-22);
}

@media (width < 768px) {
  #schedule {
    padding: 5.333vw 5.333vw 8vw;
    font-size: 8.533vw;
  }
  #schedule .schedule-list {
    flex-direction: column;
    gap: 5.333vw;
  }
  #schedule p:has(.year) {
    font-size: 12vw;
  }
  #schedule .year {
    font-size: 5.867vw;
  }
  #schedule .week {
    font-size: 6.933vw;
  }
  #schedule .time {
    font-size: 5.867vw;
  }
  #schedule .time span {
    font-size: 5.067vw;
  }
  #schedule .place {
    font-size: 5.867vw;
  }
}

/*
ticket
================================================ */
#ticket {
  padding: 50px 0;
  text-align: center;
}
#ticket .ticket__prices {
  margin-bottom: .25em;
  font-size: var(--font-28);
}
#ticket .ticket__costume {
  margin: 2em auto 0;
  width: fit-content;
  text-align: left;
}
#ticket .costume__lead {
  color: var(--accent);
  font-weight: 900;
}
#ticket .ticket__notes {
  font-size: var(--font-16);
}
#ticket .ticket__notes li::before,
#ticket .costume__notes li::before {
  content: '※';
}
.ticket__application {
  margin: 0 auto 40px;
  padding: 40px 30px;
  max-width: 495px;
  color: var(--accent);
  border: 1px solid var(--accent);
  transform: skewX(-15deg);
}
.ticket__application a {
  color: var(--accent);
}
.playguide_title {
  margin: 0 auto 1em;
  padding: 2px 22px;
  width: fit-content;
  color: var(--base);
  background: var(--accent);
  transform: translateX(-1em);
}
.playguide_title span {
  display: inline-block;
  transform: skewX(15deg);
}
.ticket-list {
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--font-17);
  transform: skewX(15deg);
  text-align: center;
}
.ticket-item + .ticket-item {
  margin-top: .5em;
}
.ticket-item span {
  display: inline-block;
  font-size: var(--font-14);
}
.ticket-tripcom {
  display: flex;
}

@media (width < 768px) {
  #ticket {
    padding: 8vw 5.333vw;
    font-size: 4.267vw;
  }
  #ticket .ticket__costume {
    margin: 1.5em auto 0;
  }
  #ticket .ticket__prices {
    font-size: 6.4vw;
  }
  #ticket .ticket__notes {
    font-size: 3.733vw;
  }
  .ticket__application {
    margin: 0 auto 8vw;
    padding: 5.333vw 0;
    max-width: 72vw;
  }
  .playguide_title {
    padding: 0.533vw 5.867vw;
  }
  .ticket-item span {
    font-size: 3.2vw;
    line-height: 1.5;
  }
  .ticket-list {
    font-size: 4.267vw;
  }
}

/*
scene
================================================ */
#scene {
  padding: 40px 0 30px;
  text-align: center;
  line-height: 0;
  background: #001761;
}
#scene img {
  display: block;
  margin-inline: auto;
}
#scene .scene__img {
  margin-bottom: 30px;
  max-width: 800px;
}
#scene .scene__text {
  max-width: 796px;
}

@media (width < 768px) {
  #scene {
    padding: 8vw 5.333vw;
  }
  #scene .scene__img {
    margin-bottom: 5.333vw;
  }
}

/*
about
================================================ */
/* 上部説明 */
.about-story {
  padding: 50px 0;
  font-size: var(--font-22);
  font-weight: 900;
  text-align: center;
  color: var(--base);
  background: var(--accent);
}
.about-story p {
  line-height: 1.5;
}
.about-story p + p {
  margin-top: 1em;
}
.about-story img {
  display: block;
  margin: 20px 0;
}

/* 上映作品・上映時間・ストーリー */
.about-info {
  margin-top: 30px;
  padding: 45px 0;
  font-size: var(--font-18);
  background: #595757;
}
.info-box {
  position: relative;
  margin-inline: auto;
  padding: 50px 70px 40px;
  max-width: 700px;
  background: var(--base);
}
.info-box::before,
.info-box::after {
  position: absolute;
  content: "";
  display: block;
  --size: 48px;     /* L字の外形サイズ */
  --thick: 8px;     /* 線の太さ */
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
}
.info-box::before {
  top: -4px;
  left: -4px;
  border-top:  var(--thick) solid var(--accent);
  border-left: var(--thick) solid var(--accent);
}
.info-box::after {
  bottom: -4px;
  right: -4px;
  border-bottom:  var(--thick) solid var(--accent);
  border-right: var(--thick) solid var(--accent);
}
.info-film p {
  margin-inline: auto;
  width: fit-content;
}
.about-info__title {
  margin: 0 auto 35px;
  padding: 2px 22px;
  max-width: 300px;
  font-weight: 900;
  text-align: center;
  color: var(--base);
  background: var(--accent);
  transform: skewX(-15deg);
}
.about-info__title span {
  display: inline-block;
  transform: skewX(15deg);
}
.movie-credits {
  margin-top: 1em;
  line-height: 1.7;
  font-size: var(--font-16);
}
.info-story {
  margin-top: 45px;
  color: var(--accent);
}
.info-story h3 {
  position: relative;
  margin-bottom: 30px;
}
.info-story h3 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 150px;
  text-align: center;
  font-weight: 900;
  font-size: var(--font-20);
  background: var(--base);
}
.info-story h3::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--accent);
}
.info-story p {
  font-size: var(--font-16);
  line-height: 1.75;
}
@media (width < 768px) {
  /* 上部説明 */
  .about-story {
    padding: 8vw;
    text-align: left;
    font-size: 4.267vw;
  }
  .about-story img {
    margin: 5.333vw 0;
  }

  /* 上映作品・上映時間・ストーリー */
  .about-info {
    margin-top: 8vw;
    padding: 8vw 5.333vw;
    font-size: 4.8vw;
  }
  .info-box {
    padding: 8vw 5.333vw;
  }
  .info-box::before,
  .info-box::after {
    --size: 12.8vw;     /* L字の外形サイズ */
    --thick: 2.133vw;     /* 線の太さ */
  }
  .info-box::before {
    top: -1.067vw;
    left: -1.067vw;
  }
  .info-box::after {
    bottom: -1.067vw;
    right: -1.067vw;
  }
  .about-info__title {
    margin: 0 auto 5.333vw;
    padding: 0.533vw 5.867vw;
    max-width: 66.667vw;
  }
  .movie-credits {
    font-size: 3.733vw;
    text-align: left;
  }
  .info-story {
    margin-top: 12vw;
  }
  .info-story h3 {
    margin-bottom: 8vw;
  }
  .info-story h3 span {
    width: 40vw;
  }
  .info-story h3::before {
    height: 0.533vw;
  }
  .info-story p {
    font-size: 3.733vw;
  }
}

/*
PERFORMERS
================================================ */
#performers {
  padding: 50px 0;
  line-height: 1.8;
}
.performer-person {
  margin-inline: auto;
  padding-bottom: 35px;
  max-width: 800px;
}
.performer-person + .performer-person {
  padding-top: 25px;
  border-top: 1px solid #fff;
}
.performer-person:last-of-type {
  padding-bottom: 0;
}
.person-top {
  display: flex;
  flex: 0 0 50%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.person-top img {
  max-width: 315px;
}
#performers .work {
  display: inline-block;
  margin-bottom: 15px;
  padding: 2px 28px 0;
  color: #231815;
  background: var(--accent);
  font-size: var(--font-21);
  font-weight: 700;
  transform: scale(0.8, 1);
  border-radius: 50%;
}
#performers .name {
  font-size: var(--font-28);
  font-weight: 700;
  line-height: 1.2;
  transform: scale(0.9, 1);
}
#performers .name span {
  color: var(--accent);
}
.performer-person .profile {
  line-height: 1.8;
  font-weight: 300;
}
@media (width < 768px) {
  #performers {
    padding: 8vw 5.333vw;
    font-size: 3.733vw;
  }
  .performer-person {
    padding-bottom: 8vw;
  }
  .performer-person + .performer-person {
    padding-top: 8vw;
  }
  .person-top {
    flex-direction: column;
    gap: 4vw;
    flex: 0;
    margin-bottom: 6.667vw;
  }
  .person-top img {
    max-width: 80vw;
  }
  .person-info {
    text-align: center;
  }
  #performers .work {
    margin-bottom: 4vw;
    padding: 0.533vw 7.467vw 0;
    font-size: 4.267vw;
  }
  #performers .name {
    font-size: 5.333vw;
  }
  #performers .name span {
    font-size: 4.267vw;
  }
}

/*
シネマ・コンサートとは
================================================ */
.cinecon {
  color: var(--accent);
  font-size: var(--font-16);
  background: #001761;
}
.cinecon .inner {
  margin-inline: auto;
  padding: 40px 0;
  max-width: 600px;
}
.cinecon h3 {
  margin: 0 auto 25px;
  padding: 2px 22px;
  max-width: 300px;
  font-size: var(--font-20);
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  background: var(--base);
  transform: skewX(-15deg);
}
.cinecon h3 span {
  display: inline-block;
  transform: skewX(15deg);
}
.cinecon p {
  line-height: 1.7;
}
@media (width < 768px) {
  .cinecon {
    padding: 8vw 5.333vw;
    font-size: 4.267vw;
  }
  .cinecon::after {
    height: 6.667vw;
  }
  .cinecon .inner {
    padding: 0;
  }
  .cinecon h3 {
    margin: 0 auto 6.667vw;
    padding: 0.533vw 5.867vw;
    font-size: 5.333vw;
  }
}

/**********************************************************
 * モーダル
 **********************************************************/
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 1;
}
.modal__content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: min(92vw, 900px);
  margin: 6vh auto;
  background: #000;
  border-radius: 10px;
  z-index: 2;
}
.modal__close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: #000; /* 黒背景 */
  color: #fff; /* 白文字（×） */
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8; /* ちょっと透過 */
  transition: opacity 0.2s;
  z-index: 3;
}
.modal__close:hover {
  opacity: 1; /* ホバー時はくっきり */
}
/* ★ クリックが無効化されないように */
.modal {
  pointer-events: none;
}
.modal.is-open {
  pointer-events: auto;
}
.modal.is-open .modal__overlay, .modal.is-open .modal__content, .modal.is-open .modal__close {
  pointer-events: auto;
}
.video-wrapper {
  position: relative;
  padding-top: 56.25%;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}