@charset "UTF-8";

/* ----------------------------------------------------------
   基本
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* 背景は html に指定 */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable; /* モーダル・メニュー表示中にスクロールバーが消えても幅を変えない */
  background: #e4d1b6 url("../images/bg_2.png") repeat;
  background-size: 300px;
}
/* モーダル・SP メニュー表示中は後ろをスクロールさせない */
html.is-modal-open,
html.is-menu-open { overflow: hidden; background: #1c1107; } /* 消えたスクロールバー分を黒枠と同じ色にする */

body {
  --px: min(1px, 100vw / 1440);
  margin: 0;
  color: #1c1107;
  font-family: "Hina Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  pointer-events: none;        /* 右クリック・ドラッグで画像を保存させない */
  -webkit-touch-callout: none; /* iPhone で長押ししたときの保存メニューを出さない */
}
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, figure { margin: 0; }
h1, h2 { font-weight: normal; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
@media (hover: hover) { a:hover { opacity: .6; } } /* マウス操作のときだけ */
button { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ページ内リンクの止まる位置（黒枠 ＋ ヘッダー 80px の下） */
section[id] { scroll-margin-top: calc(10 * var(--px) + 80px); }

.sp { display: none; }                 /* SP だけで改行 */
.nowrap { display: inline-block; }     /* このまとまりの途中では改行しない */

/* ----------------------------------------------------------
   黒枠・背景・ノイズ・羽（画面に固定）
   ---------------------------------------------------------- */
.frame {
  position: fixed;
  inset: 0;
  z-index: 100;
  border: calc(10 * var(--px)) solid #1c1107;
  pointer-events: none;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../images/bg_image.jpg") center / cover no-repeat;
}

/* ノイズ（js/main.js で描画） */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.feathers {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.feathers--bottom { z-index: -1; } /* 文字の下 */
.feathers--top { z-index: 60; }    /* ヘッダーの上・黒枠の下 */
.feather { position: absolute; }

.feather--l2 { top: calc(80px - 23 * var(--px)); left: 0; width: calc(600 * var(--px)); }
.feather--l1 { top: calc(70px + 27 * var(--px)); left: calc(24 * var(--px)); width: calc(200 * var(--px)); }
.feather--r2 { bottom: calc(3 * var(--px)); right: 0; width: calc(415 * var(--px)); }
.feather--r1 { bottom: calc(-12 * var(--px)); right: calc(7 * var(--px)); width: calc(274 * var(--px)); }

/* ----------------------------------------------------------
   ヘッダー（PC）
   ---------------------------------------------------------- */
.header {
  position: fixed;
  top: calc(10 * var(--px));
  left: calc(10 * var(--px));
  right: calc(10 * var(--px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: max(80px, calc(80 * var(--px)));
  padding: 0 max(27.5px, calc(27.5 * var(--px))) 0 max(34.5px, calc(34.5 * var(--px)));
  background: rgba(255, 255, 255, .6);
}
.header__logo {
  font-size: max(30px, calc(30 * var(--px)));
  line-height: 1;
  letter-spacing: -.2em;
}
.header__nav { display: flex; align-items: center; }
.header__list {
  display: flex;
  gap: max(29px, calc(29 * var(--px)));
  padding-top: max(5px, calc(5 * var(--px)));
  font-family: "IM Fell English", serif;
  font-size: max(20px, calc(20 * var(--px)));
  line-height: 1;
}
/* ホバー：左からアンダーラインが伸びる */
.header__list a { position: relative; }
.header__list a:hover { opacity: 1; }
.header__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: min(-5px, calc(-5 * var(--px)));
  width: 100%;
  height: 1px;
  background: #1c1107;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
@media (hover: hover) { .header__list a:hover::after { transform: scale(1, 1); } }
.header__sns { margin-left: max(32.5px, calc(32.5 * var(--px))); }
.header__sns img { display: block; width: max(22px, calc(22 * var(--px))); }

/* SP メニュー（PC では非表示） */
.menu-btn, .menu { display: none; }

/* ----------------------------------------------------------
   メインビジュアル
   ---------------------------------------------------------- */
.mv {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(39 * var(--px) + 80px) calc(46 * var(--px)) calc(41.5 * var(--px)); /* 上 ＝ 黒枠 10 ＋ ヘッダー 80px ＋ すき間 29 */
  perspective: 1000px; /* フェードインの奥行き */
}
.mv__kv { flex: 0 1 calc(610 * var(--px)); }
.mv__kv img { width: 100%; }
.mv__txt {
  flex: 0 1 calc(640 * var(--px));
  margin-left: calc(64 * var(--px));
  padding-top: calc(188 * var(--px));
  text-align: center;
}
.mv__logo img { width: calc(640 * var(--px)); }
.mv__day { margin-top: calc(50 * var(--px)); padding-left: calc(84 * var(--px)); text-align: left; }
.mv__day img { width: calc(487 * var(--px)); }
.mv__venue { margin-top: calc(10 * var(--px)); font-size: calc(36 * var(--px)); line-height: calc(50 * var(--px)); }
.mv__cast { margin-top: calc(49 * var(--px)); font-size: calc(24 * var(--px)); line-height: calc(50 * var(--px)); }
.mv__cast span { font-size: calc(38 * var(--px)); line-height: 1; }
.mv__cast small { font-size: calc(18 * var(--px)); }

/* フェードイン：KV → 文字エリアの順（animista「fade-in-fwd」） */
.mv__kv, .mv__txt { animation: fade-in-fwd 1.2s cubic-bezier(.39, .575, .565, 1) both; }
.mv__txt { animation-delay: .3s; }
@keyframes fade-in-fwd {
  0%   { transform: translateZ(-80px); opacity: 0; }
  100% { transform: translateZ(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mv__kv, .mv__txt { animation: none; }
}

/* ----------------------------------------------------------
   イントロ
   ---------------------------------------------------------- */
.intro { padding: calc(195 * var(--px)) 20px 0; text-align: center; }
.intro__catch { font-size: calc(44 * var(--px)); line-height: calc(70 * var(--px)); }
.intro__txt { margin-top: calc(29 * var(--px)); font-size: max(22px, calc(22 * var(--px))); line-height: max(50px, calc(50 * var(--px))); }
.intro__txt span { display: block; text-wrap: balance; } 

/* ----------------------------------------------------------
   見出し（News / Cast / Staff 共通）
   ---------------------------------------------------------- */
.ttl { display: flex; flex-direction: column; align-items: center; }
.ttl__en { font-family: "IM Fell English", serif; font-size: calc(100 * var(--px)); line-height: calc(100 * var(--px)); }
.ttl__ja { font-size: max(22px, calc(22 * var(--px))); line-height: max(22px, calc(22 * var(--px))); letter-spacing: .1em; }
.ttl__icon { width: calc(15 * var(--px)); height: calc(27.372 * var(--px)); margin-top: calc(23 * var(--px)); }

/* ----------------------------------------------------------
   News
   ---------------------------------------------------------- */
.news { margin-top: calc(205 * var(--px)); }
.news__list { margin-top: calc(60 * var(--px)); }
.news__item {
  width: calc(800 * var(--px));
  max-width: 100%;
  margin: 0 auto;
  padding: calc(20 * var(--px));
  background: rgba(255, 255, 255, .6); /* XD の不透明度 60% */
  transition: background-color .3s;
  font-size: max(16px, calc(16 * var(--px)));
  line-height: max(24px, calc(24 * var(--px)));
  letter-spacing: .05em;
}
.news__item span { margin-left: 1em; }
@media (hover: hover) { .news__item:hover { background-color: #fff; } } /* ホバーで透過なし */

/* ----------------------------------------------------------
   Cast / Staff
   ---------------------------------------------------------- */
.cast { margin-top: calc(315 * var(--px)); }
.staff { margin-top: calc(333 * var(--px)); }

.credit { margin-top: calc(55 * var(--px)); }
.credit li {
  display: flex;
  flex-wrap: wrap; /* 入りきらないときは名前を次の行へ */
  align-items: center;
  justify-content: center;
  line-height: max(30px, calc(30 * var(--px)));
}
.credit li + li { margin-top: calc(30 * var(--px)); }
.credit .credit__origin + li { margin-top: calc(60 * var(--px)); }
.credit__role { flex-shrink: 0; font-size: max(18px, calc(18 * var(--px))); white-space: nowrap; }
.credit__name { font-size: max(28px, calc(28 * var(--px))); text-align: center; }
.credit__name small { font-size: max(18px, calc(18 * var(--px))); line-height: 1; }
.credit__comment {
  width: max(30px, calc(30 * var(--px)));
  height: max(29px, calc(29 * var(--px)));
  margin-left: max(10px, calc(10 * var(--px)));
  background: url("../images/icon_comment.svg") center / contain no-repeat;
  transition: opacity .3s;
}
@media (hover: hover) { .credit__comment:hover { opacity: .6; } } /* ほかのボタンと同じく少し透過 */
.credit__etc { margin-top: calc(22 * var(--px)); font-size: max(18px, calc(18 * var(--px))); line-height: max(30px, calc(30 * var(--px))); text-align: center; }

/* ----------------------------------------------------------
   フッター
   ---------------------------------------------------------- */
.footer {
  width: calc(800 * var(--px));
  max-width: 100%;
  margin: calc(185 * var(--px)) auto 0;
  padding: calc(110 * var(--px)) 0 calc(73 * var(--px));
  border-top: 1px solid #1c1107;
  font-size: max(12px, calc(12 * var(--px)));
  line-height: max(17px, calc(17 * var(--px)));
  text-align: center;
}
.footer__sns { display: inline-block; vertical-align: bottom; }
.footer__sns img { display: block; width: max(30px, calc(30 * var(--px))); }
.footer__copy { margin-top: calc(82 * var(--px)); }
.footer__note { margin-top: calc(17 * var(--px)); }

/* ----------------------------------------------------------
   コメントのモーダル
   ---------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow-y: auto;
  padding: calc(40 * var(--px)) 0 calc(102 * var(--px));
  background: rgba(28, 17, 7, .95);
  color: #fff;
}
.modal.is-open { display: flex; }
.modal__inner { width: calc(647 * var(--px)); margin: auto; }

/* 閉じるボタン（×） */
.modal__close {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin: calc((22 * var(--px) - 44px) / 2) calc((22 * var(--px) - 44px) / 2) calc((22 * var(--px) - 44px) / 2) auto;
}
.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(31 * var(--px));
  height: calc(1.5 * var(--px));
  background: #fff;
}
.modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(29 * var(--px));
  padding-bottom: calc(25 * var(--px));
  border-bottom: 1px solid #fff;
  line-height: max(30px, calc(30 * var(--px)));
}
.modal__role { font-size: max(18px, calc(18 * var(--px))); }
.modal__name { font-size: max(28px, calc(28 * var(--px))); }
.modal__name small { font-size: max(18px, calc(18 * var(--px))); line-height: 1; }
.modal__body {
  margin-top: calc(39 * var(--px));
  padding-bottom: calc(32 * var(--px));
  border-bottom: 1px solid #fff;
  font-size: max(16px, calc(16 * var(--px)));
  line-height: max(32px, calc(32 * var(--px)));
}

/* ==========================================================
   SP（〜767px）
   ========================================================== */
@media (width < 768px) {
  body { --px: min(100vw / 390, 1.3px); }
  
  .mv__txt, .intro, .news, .cast, .staff {
    max-width: calc(390 * var(--px));
    margin-left: auto;
    margin-right: auto;
  }
  .sp { display: inline; }
  section[id] { scroll-margin-top: calc(20 * var(--px)); }

  .frame { border-width: calc(8 * var(--px)); }

  /* 羽（左上の羽は黒枠の上に重なる） */
  .feathers--top { z-index: 101; }
  .feather--l2 { top: calc(5 * var(--px)); left: 0; width: calc(232.6 * var(--px)); }
  .feather--l1 { top: calc(16 * var(--px)); left: calc(13 * var(--px)); width: calc(101 * var(--px)); }
  .feather--r2 { bottom: calc(10 * var(--px)); right: 0; width: calc(203 * var(--px)); }
  .feather--r1 { bottom: calc(-3 * var(--px)); right: calc(6 * var(--px)); width: calc(131 * var(--px)); }

  /* ヘッダー → メニューボタン */
  .header { display: none; }
  .menu-btn {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    width: calc(63 * var(--px));
    height: calc(63 * var(--px));
    background: #1c1107;
  }
  .menu-btn span {
    position: absolute;
    left: calc(20 * var(--px));
    height: calc(1.5 * var(--px));
    background: #fff;
    border-radius: calc(1 * var(--px));
    transition: transform .3s, opacity .3s;
  }
  .menu-btn span:nth-child(1) { top: calc(22.3 * var(--px)); width: calc(9.4 * var(--px)); }
  .menu-btn span:nth-child(2) { top: calc(31.9 * var(--px)); width: calc(15.3 * var(--px)); }
  .menu-btn span:nth-child(3) { top: calc(41.5 * var(--px)); width: calc(24.7 * var(--px)); }
  /* 開いたときはボタンを × に */
  .is-menu-open .menu-btn span:nth-child(1),
  .is-menu-open .menu-btn span:nth-child(3) { top: calc(31 * var(--px)); left: calc(16.5 * var(--px)); width: calc(31 * var(--px)); }
  .is-menu-open .menu-btn span:nth-child(1) { transform: rotate(45deg); }
  .is-menu-open .menu-btn span:nth-child(2) { opacity: 0; }
  .is-menu-open .menu-btn span:nth-child(3) { transform: rotate(-45deg); }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 105;
    padding-top: calc(118 * var(--px));
    background: #1c1107;
    color: #fff;
    text-align: center;
  }
  .is-menu-open .menu { display: block; }
  .menu__list { font-family: "IM Fell English", serif; font-size: calc(26 * var(--px)); line-height: calc(58 * var(--px)); }
  .menu__sns { display: inline-block; margin-top: calc(29 * var(--px)); }
  .menu__sns img { display: block; width: calc(22 * var(--px)); }

  /* メインビジュアル */
  .mv { display: block; padding: 0; }
  .mv__txt { padding-top: calc(33 * var(--px)); }
  .mv__logo img { width: calc(340 * var(--px)); }
  .mv__day { margin-top: calc(38 * var(--px)); padding-left: 0; text-align: center; }
  .mv__day img { width: calc(330 * var(--px)); }
  .mv__venue { margin-top: calc(3 * var(--px)); font-size: calc(24 * var(--px)); line-height: calc(34 * var(--px)); }
  .mv__cast { margin-top: calc(39 * var(--px)); font-size: calc(16 * var(--px)); line-height: calc(40 * var(--px)); }
  .mv__cast span { font-size: calc(26 * var(--px)); }
  .mv__cast small { font-size: calc(16 * var(--px)); }

  /* イントロ */
  .intro { padding: calc(149 * var(--px)) calc(30 * var(--px)) 0; }
  .intro__catch { font-size: calc(30 * var(--px)); line-height: calc(50 * var(--px)); white-space: nowrap; } /* 改行は <br> の位置だけ */
  .intro__txt { margin-top: calc(32 * var(--px)); font-size: max(17.5px, calc(17.5 * var(--px))); line-height: max(35px, calc(35 * var(--px))); text-align: left; }
  .intro__txt span { text-wrap: wrap; } /* 左揃えで行末まで詰める */

  /* 見出し */
  .ttl__en { font-size: calc(60 * var(--px)); line-height: calc(60 * var(--px)); }
  .ttl__ja { margin-top: calc(4 * var(--px)); font-size: max(18px, calc(18 * var(--px))); line-height: max(18px, calc(18 * var(--px))); }
  .ttl__icon { margin-top: calc(22 * var(--px)); }
  .news .ttl__ja { margin-top: calc(2 * var(--px)); font-size: max(14px, calc(14 * var(--px))); line-height: max(14px, calc(14 * var(--px))); }
  .news .ttl__icon { margin-top: calc(20 * var(--px)); }

  /* News */
  .news { margin-top: calc(190 * var(--px)); padding: 0 calc(30 * var(--px)); }
  .news__list { margin-top: calc(40 * var(--px)); }
  .news__item { width: auto; line-height: max(29px, calc(29 * var(--px))); }
  .news__item time, .news__item span { display: block; }
  .news__item span { margin-left: 0; }

  /* Cast / Staff */
  .cast { margin-top: calc(130 * var(--px)); }
  .staff { margin-top: calc(135 * var(--px)); }
  .credit { margin-top: calc(40 * var(--px)); }
  .staff .credit { margin-top: calc(50 * var(--px)); }
  .credit li + li,
  .credit .credit__origin + li { margin-top: calc(45 * var(--px)); }
  .credit__role { width: 100%; text-align: center; }
  .credit__name { font-size: max(26px, calc(26 * var(--px))); }
  .credit__etc { margin-top: calc(20 * var(--px)); }

  /* モーダル */
  .modal { padding-bottom: calc(80 * var(--px)); } 
  .modal__inner { width: calc(328 * var(--px)); }
  .modal__close { margin-right: calc(3 * var(--px) + (22 * var(--px) - 44px) / 2); }
  .modal__title { flex-wrap: wrap; margin-top: calc(20 * var(--px)); padding-bottom: calc(35 * var(--px)); }
  .modal__role { width: 100%; margin-bottom: calc(3 * var(--px)); text-align: center; }
  .modal__body { margin-top: calc(29 * var(--px)); padding-bottom: calc(22 * var(--px)); }

  /* フッター */
  .footer { width: auto; max-width: calc(330 * var(--px)); margin: calc(90 * var(--px)) auto 0; padding: calc(50 * var(--px)) 0 calc(60 * var(--px)); }
  .footer__copy { margin-top: calc(40 * var(--px)); }
}