:root {
  --bg: #ffdb47;
  --ink: #200000;
  --card: rgba(255, 255, 255, 0.72);
  --font-title: "Dela Gothic One", sans-serif;
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;

  /* ─── 背景イラストの位置調整 ───────────────────
     画面下端から、どれだけ下にずらすか。
     0 で画像の下端が画面下端とぴったり揃う（従来の表示）。
     値を大きくするほど画像が下に移動し、下側が画面外に隠れる。
     例: 10vh / 120px / 5% など、長さの単位なら何でも指定できる。
     2枚の絵で必要な量が違うので、それぞれ個別に調整できるようにしてある。 */
  --bg-shift-wakai: 10vh; /* 若年期 (mv_rough1.webp) */
  --bg-shift-sonen: 10vh; /* 壮年期 (mv_rough2.webp) */

  /* 背景イラストの大きさ。下にずらすと見える範囲が減るので、
     必要ならここを大きくして調整する。 */
  --bg-illust-height: min(78vh, 700px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--bg);
  color: var(--ink);
  line-height: 2;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

a {
  color: var(--ink);
}

img {
  max-width: 100%;
}

/* ============ 背景イラスト ============ */
/* スマホはスクロールでアドレスバーが開閉し、表示領域の高さが変わる。
   inset: 0 だとバーの開閉が終わってから位置が確定するので、
   イラストが画面下にガクッと跳ぶ。高さを dvh(開閉に追従する単位)で取り、
   さらに JS(visualViewport)が使えるときはそちらで1フレームごとに追従させる。 */
.bg-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* dvh 非対応ブラウザ用 */
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden; /* 下にずらした分は画面外で切り取る */
  opacity: 0; /* ファーストビューでは非表示。スクロールでJSがフェードイン */
  /* JS が使えない環境では、跳ぶ代わりにせめて滑らかに移動させる */
  transition: height 0.25s ease;
}

/* JS が毎フレーム追従させている間は、補間するとかえって遅れて見える */
.bg-stage.is-tracked {
  transition: none;
}

.bg-illust {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: var(--bg-illust-height);
  max-width: 140vw;
  object-fit: contain;
  object-position: bottom center;
  /* 白背景・黄背景の画像を地色に馴染ませる */
  mix-blend-mode: multiply;
}

/* ずらす量は :root の --bg-shift-* で調整する */
.bg-wakai {
  bottom: calc(var(--bg-shift-wakai) * -1);
}

.bg-sonen {
  bottom: calc(var(--bg-shift-sonen) * -1);
  display: none;
}

body.is-sonen .bg-wakai {
  display: none;
}

body.is-sonen .bg-sonen {
  display: block;
}

/* ============ ナビゲーション ============ */
:root {
  --nav-bg: #fff5cc;
  --nav-height: 2.75rem; /* PC の固定バーの高さ */
}

html {
  scroll-behavior: smooth;
}

/* 固定バーに隠れないよう、ジャンプ先の見出しを少し下げて止める */
[id] {
  scroll-margin-top: 1rem;
}

/* ── スマホ(既定): 右上の ≡ と、右から出るドロワー ── */
.nav-toggle {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 1001;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.32rem;
  background: var(--nav-bg);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(32, 0, 0, 0.25);
}

.nav-toggle-bar {
  display: block;
  width: 1.3rem;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(32, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0; /* 上下に隙間を作らない */
  z-index: 1002;
  width: min(78vw, 320px);
  background: var(--nav-bg);
  display: flex;
  flex-direction: column;
  padding: 4.2rem 1.6rem 2rem;
  overflow-y: auto;
  box-shadow: -6px 0 24px rgba(32, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.nav-open .nav-menu {
  transform: translateX(0);
}

body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.nav-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.8rem;
  height: 2.8rem;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
}

.nav-logo {
  display: block;
}

.nav-logo img {
  display: block;
  width: 100%;
  max-width: 200px;
}

.nav-list {
  list-style: none;
  margin-top: 1.4rem;
}

.nav-list a {
  display: block;
  padding: 0.65em 0;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(32, 0, 0, 0.18);
}

/* ── PC: 上部の固定バー ── */
@media (min-width: 900px) {
  .nav-toggle,
  .nav-close,
  .nav-backdrop {
    display: none;
  }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: var(--nav-bg);
    box-shadow: 0 2px 0 rgba(32, 0, 0, 0.12);
  }

  .nav-menu {
    position: static;
    height: 100%;
    width: auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.4rem;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
    transition: none;
  }

  .nav-logo {
    flex: none;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .nav-logo img {
    height: 1.9rem;
    width: auto;
    max-width: none;
  }

  .nav-list {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 0 auto;
  }

  .nav-list a {
    padding: 0.2em 0;
    border-bottom: 2px solid transparent;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: border-color 0.15s ease;
  }

  .nav-list a:hover {
    border-bottom-color: var(--ink);
  }

  /* バーの高さぶん、ジャンプ先の停止位置を下げる */
  [id] {
    scroll-margin-top: calc(var(--nav-height) + 0.75rem);
  }
}

/* ドロワーを開いている間は背後のページをスクロールさせない */
@media (max-width: 899px) {
  body.nav-open {
    overflow: hidden;
  }
}

/* ============ ファーストビュー:キャッチコピー演出 ============ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  position: relative;
}

.hero-catch {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-weight: 900;
  line-height: 1.5;
}

.catch-line {
  opacity: 0;
  transform: translateY(0.6em);
  animation: catchIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  font-size: clamp(1.3rem, 4.5vw, 2rem);
}

.catch-line-1 { animation-delay: 0.1s; }
.catch-line-2 { animation-delay: 0.45s; }
.catch-line-3 { animation-delay: 0.8s; }

.catch-line-4 {
  animation-delay: 1.15s;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.5vw, 3.2rem);
  margin-top: 0.3em;
  text-shadow:
    3px 3px 0 #fff,
    -3px 3px 0 #fff,
    3px -3px 0 #fff,
    -3px -3px 0 #fff;
}

@keyframes catchIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  /* left: 50%; */
  transform: translateY(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  animation: catchIn 0.6s 1.8s forwards;
}

.scroll-hint span {
  display: block;
  width: 2px;
  height: 2.2rem;
  background: var(--ink);
  animation: scrollLine 1.6s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  49%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============ イラスト全体を見せる余白 と その他の余白 ============ */
.visual-spacer {
  height: 25svh; /* 若年期イラストがフェードインしきり、全体が見える区間 */
}

.finale-spacer {
  height: 100svh; /* 壮年期イラストの全体が見える区間 */
}

.about-spacer {
  height: 25svh;
}

/* ============ メインビジュアル+タイトル ============ */
.title-view {
  /* min-height: 100svh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 9svh 1.2rem 25vh; /* 下部はイラストの見える余白 */
}

/* 登場は transition ではなく animation で行う。
   transition にすると、ボタン側のホバー用 transition 指定に上書きされて
   フェードインしなくなる(以前 Googleカレンダーのボタンだけ挙動が違ったのはこれが原因)。 */
.title-view > * {
  opacity: 0;
  transform: translateY(1.2em);
}

.title-view.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  /* backwards: 待機中だけ開始状態を適用し、終わったら通常のCSSに戻す。
     こうしておくとホバーの transform が効かなくならない。 */
  animation: revealUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s) backwards;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(1.2em);
  }
}

.title-view.is-revealed > *:nth-child(1) { --reveal-delay: 0s; }
.title-view.is-revealed > *:nth-child(2) { --reveal-delay: 0.15s; }
.title-view.is-revealed > *:nth-child(3) { --reveal-delay: 0.3s; }
.title-view.is-revealed > *:nth-child(4) { --reveal-delay: 0.45s; }
.title-view.is-revealed > *:nth-child(5) { --reveal-delay: 0.6s; }
.title-view.is-revealed > *:nth-child(6) { --reveal-delay: 0.75s; }
.title-view.is-revealed > *:nth-child(7) { --reveal-delay: 0.9s; }
.title-view.is-revealed > *:nth-child(8) { --reveal-delay: 1.05s; }

.title-logo {
  width: min(88vw, 620px);
  filter: drop-shadow(3px 3px 0 rgba(255, 255, 255, 0.9));
}

.title-kanmuri {
  margin-top: 1.4rem;
  font-weight: 900;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  letter-spacing: 0.3em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.15em 1.3em 0.15em 1.6em;
  background: var(--bg);
}

.title-date {
  margin-top: 1.2rem;
  font-family: var(--font-title);
  font-size: clamp(1.7rem, 6vw, 2.8rem);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1.3;
}

.title-year {
  font-size: 0.55em;
  margin-right: 0.5em;
  vertical-align: 0.25em;
}

.title-dow {
  font-size: 0.45em;
  vertical-align: 0.4em;
  margin: 0 0.4em 0 0.1em;
}

.title-venue {
  font-weight: 900;
  font-family: var(--font-title);
  text-shadow: 2px 2px 0 #fff;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
}

.title-venue-atmark {
  font-size: 0.65em;
  vertical-align: 0.3em;
  margin: 0 0.4em 0 0.1em;
}

.title-venue img {
  display: block;
  width: 10em;
  margin-top: 1rem;
}

/* .title-stages {
  margin-top: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 0 0.7em;
  background: rgba(255, 255, 255, 0.6);
} */

.title-hashtag {
  display: inline-block;
  margin-top: 1.1rem;
  font-weight: 900;
  font-size: clamp(1rem, 3vw, 1.25rem);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.25em 1.2em;
  transition: transform 0.15s ease;
}

.title-hashtag:hover {
  transform: scale(1.06) rotate(-2deg);
}

.title-calendar {
  display: inline-block;
  margin-top: 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--ink);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.25em 1.2em;
  transition: background 0.15s ease;
}

.title-calendar:hover {
  background: #fff;
}

.title-countdown {
  margin-top: 1.2rem;
  font-weight: 900;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  line-height: 1.6;
  text-shadow: 2px 2px 0 #fff;
  /* 日数が入る前に高さが変わらないよう先に確保しておく */
  min-height: 2.6em;
}

.countdown-num {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 2.1em;
  margin: 0 0.15em;
  vertical-align: -0.08em;
}

/* ============ セクション共通 ============ */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 1.2rem;
}

.section {
  margin-bottom: 4.5rem;
}

.section-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  text-align: center;
  margin-bottom: 1.6rem;
  text-shadow: 2px 2px 0 #fff;
}

.section-title::after {
  content: "";
  display: block;
  width: 3em;
  height: 4px;
  background: var(--ink);
  border-radius: 2px;
  margin: 0.5rem auto 0;
}

.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  box-shadow: 6px 6px 0 rgba(32, 0, 0, 0.25);
}

.card p + p {
  margin-top: 1.2em;
}

.lead {
  font-weight: 700;
}

/* .lead の上2行を1文字ずつ波打たせる。
   4秒で1周。内訳は
     0.00〜0.81s  1行目が左から順に上下する
     0.81〜1.05s  すこし間
     1.05〜1.95s  2行目が左から順に上下する
     1.95〜4.00s  長い間
   1文字あたりの動きは 0.4 秒(周期の10%)。
   時間差は --wave-i(何文字目か)、行の開始は --wave-start で決まる。 */
.lead-line {
  display: block;
}

.lead {
  --wave-base: #fff; /* 通常の文字色 */
  --wave-hi: #57d38c; /* 波が通るときの色 */
}

/* 動き(上下)と色は戻る速さが違うので、アニメーションを分けている。
   色は 0.1 秒で一気に変わり、0.6 秒かけてゆっくり戻る。
   動きが止まる 0.4 秒の時点ではまだ戻り切っていない。 */
.wave-char {
  display: inline-block;
  animation-name: leadWave, leadWaveColor;
  animation-duration: 4s;
  animation-timing-function: ease-in-out, ease-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--wave-start, 0s) + var(--wave-i, 0) * 0.045s);
}

@keyframes leadWave {
  0%, 10%, 100% {
    transform: translateY(0);
  }
  5% {
    /* 行間に 16px の余裕があるので 0.3em(約4.8px)では上の行に被らない */
    transform: translateY(-0.3em);
  }
}

/* 15% = 0.6秒 で戻り切る。1行目の最後の文字(開始 0.405秒)でも
   2行目の波が始まる 1.05 秒までに元の色へ戻り終わる。 */
@keyframes leadWaveColor {
  0% {
    color: var(--wave-base);
    animation-timing-function: ease-out; /* 上がり際は速やかに */
  }
  2.5% {
    color: var(--wave-hi);
    animation-timing-function: linear; /* 戻りは一定の速さでゆっくり */
  }
  15%, 100% {
    color: var(--wave-base);
  }
}

/* 動きを抑える設定の端末では止めておく */
@media (prefers-reduced-motion: reduce) {
  .wave-char {
    animation: none;
  }
}

/* ============ About ============ */

#about .section-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  text-align: center;
  text-shadow: none;
}

#about .section-title::after {
  display: none;
}

/* ============ あらすじ ============ */
.story-card {
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
}

/* ============ 登場人物(あらすじカードの中) ============ */
/* 見出しは他セクションと同じ h2 のデザインのまま使う */
.chara-heading {
  margin-top: 2.8rem;
}

/* 3人が横に並びきらない幅では、中途半端な2列にせず一気に縦並びにする。
   3列に必要な幅(1列170px × 3 + 隙間)を満たしたときだけ横並び。 */
.chara-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* 縦並びのときは 名前 と 吹き出し を横に並べて1行に収める */
.chara {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  text-align: center;
}

.chara-name {
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.4;
}

.chara-kana {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.75;
}

/* 通称は小さめの吹き出し。少しだけ傾けて手書き感を出す(主張しすぎない程度に) */
.chara-alias {
  position: relative;
  top: -0.6rem;
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.7;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 0.15em 0.9em;
  transform: rotate(-3deg);
}

/* しっぽは左向きで、左隣にある名前を指す。
   枠線用と塗り用の三角を重ねて縁取りを表現する */
.chara-alias::before,
.chara-alias::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: var(--ink);
  transform: translateY(-50%);
}

.chara-alias::after {
  border-width: 5px;
  border-right-color: #fff;
  margin-right: -2px;
}

/* 横並びのときは 名前の下 に吹き出しを置き、しっぽは上向きに戻す */
@media (min-width: 680px) {
  .chara-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }

  .chara {
    display: block;
  }

  .chara-alias {
    display: inline-block;
    margin-top: 1rem;
    top: unset;
  }

  .chara-alias::before,
  .chara-alias::after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 1.4em;
    transform: none;
    border-right-color: transparent;
    border-bottom-color: var(--ink);
    margin-right: 0;
  }

  .chara-alias::after {
    border-bottom-color: #fff;
    margin-left: 1px;
    margin-bottom: -2px;
  }
}

/* ============ Introduction ============ */
/* カード(角丸の箱)には入れず、画面の端から端まで通した帯に載せる。
   背景イラストと文字が重なって読めなくなるのを防ぎつつ、
   他のセクションのカードとは別物に見せるため。
   セクションごと main の幅(760px)の外へ広げてあるので、
   文字も帯と同じ幅を使う。つまり自動の折り返しは画面幅でしか起きず、
   それ以外は原稿の <br> の位置でだけ改行される。
   帯の濃さ・罫の太さ・余白は下の変数で調整できる。 */
.intro {
  --band-bg: rgba(255, 255, 255, 0.78); /* 帯の色と濃さ */
  --band-rule: 3px;                     /* 上下の罫の太さ */
  --band-pad: 2.6rem;                   /* 帯の上下の余白 */
  --band-gutter: 1.2rem;                /* 左右の余白。文字が画面の端に着かないように */

  position: relative;
  z-index: 0;
  /* main の中央寄せ(最大760px)から抜け出して画面幅いっぱいにする */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: var(--band-pad) var(--band-gutter);
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--band-bg);
  border-top: var(--band-rule) solid var(--ink);
  border-bottom: var(--band-rule) solid var(--ink);
}

.intro-title {
  letter-spacing: 0.06em;
}

.intro-body {
  /* 行の長さを抑えたくなったら、ここに 34em などの幅を入れる */
  max-width: none;
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.6vw, 1.02rem);
  line-height: 2.2;
}

.intro-body p + p {
  margin-top: 1.4em;
}

/* 最初の1行だけ見出しのフォントで大きく */
.intro-lead {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1.6;
  text-shadow: 2px 2px 0 #fff;
  margin-bottom: 0.4em;
}

/* ============ チケット ============ */
.card-subtitle {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.6;
  padding-left: 0.6em;
  border-left: 4px solid var(--ink);
  margin-bottom: 0.8rem;
}

.card-subtitle + .card-subtitle,
.price-notes + .card-subtitle,
.price + .card-subtitle {
  margin-top: 1.8rem;
}

/* チケット欄の見出しは、公演情報の見出し(.info-row > dt)のスマホ版と同じ黒いラベルにする。
   PC でも横並びにはせず、見出しだけで1行使い、内容と左端を揃える。
   「券種／料金」「座席表」「発売日」「特典」の間隔は --ticket-gap で調整できる。 */
#ticket {
  --ticket-gap: 5.4rem;
}

#ticket .card-subtitle {
  width: fit-content;
  padding: 0.1em 1em;
  border-left: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 2;
  text-align: center;
  margin-bottom: 0.4rem;
}

#ticket .card-subtitle:not(:first-child) {
  margin-top: var(--ticket-gap);
}

.price {
  border-collapse: collapse;
  font-weight: 700;
  line-height: 1.7;
}

.price th {
  text-align: left;
  font-weight: 700;
  padding: 0.15em 1.6em 0.15em 0;
  white-space: nowrap;
}

.price td {
  text-align: right;
  padding: 0.15em 0;
  font-variant-numeric: tabular-nums;
}

.price-mark {
  font-size: 0.8em;
  margin-left: 0.1em;
  vertical-align: 0.15em;
}

/* 料金表の中の ★ ※ は、横に並ぶ SVG アイコン(.price-icon)と大きさ・高さを揃える。
   小さく持ち上げる上の指定は、日程や特典の ★ ※ 用にそのまま残す */
.price .price-mark {
  font-size: 1em;
  margin-left: 0.2em;
  vertical-align: 0;
}

.price-notes {
  list-style: none;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.8;
}

.price-notes li {
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.price-notes .price-mark {
  font-size: 1em;
  margin: 0 0.3em 0 0;
  vertical-align: 0;
}

/* 配信の印は ◎ の代わりに streaming.svg。一文字ぶんの大きさにする */
.price-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.2em;
  vertical-align: -0.12em;
}

.price-icon svg {
  display: block;
  width: 80%;
  height: 100%;
  /* 描画範囲の端まで使っている絵(u18.svg の丸など)は、
     小さく表示すると端の1ピクセルが切れるので、はみ出しても描かせる */
  overflow: visible;
}

/* 注記の行頭では、ぶら下げインデント(1.3em)に合わせて 1em + 余白 0.3em。
   ★ や ※ は文字なので後ろに字間(body の letter-spacing 0.04em)が付くが、
   SVG には付かない。そのぶんを足して、本文の書き出し位置を ★ ※ の行と揃える */
.price-notes .price-icon {
  margin: 0 0.34em 0 0;
}

/* ★ や ※ は1文字ぶんの枠の中央に描かれるが、SVG は 80% 幅で左に寄っているため
   並べると SVG が 1px ほど左に見える。行頭の SVG だけ右へ寄せて、見た目の中心を揃える。
   枠(1em)の中で動かすだけなので、本文の書き出し位置は変わらない。 */
.price-notes .price-icon svg {
  margin-left: 0.07em;
}

/* ★ の注記の星は、枠(1em)いっぱいに描く */
.price-notes .price-icon.star-icon svg {
  width: 100%;
  margin-left: 0;
}

.ticket-release {
  font-weight: 700;
}

.ticket-schedule {
  list-style: none;
  font-weight: 700;
  line-height: 1.9;
}

/* 日時と内容を2列に。リスト全体を1つのグリッドにして、行をまたいで列を揃える。
   内容が折り返しても日時の下には回り込まない */
.ticket-schedule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--schedule-gap) 0.7em;
  align-items: start;
}

.ticket-schedule li {
  display: contents;
}

.ticket-schedule time {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 9em;
}

/* 【会場チケット】【配信チケット】のまとまり */
/* 発売日どうしの間隔(1文字ぶん)。最後の発売日と ★ の注記の間も同じだけ空ける。
   rem にしているのは、文字の小さい注記の中でも同じ値にするため */
.ticket-group {
  --schedule-gap: 1rem;
}

/* 会場チケット(カレンダー)と【配信チケット】の間。1rem に1行分(1.9rem)を足す */
.ticket-group + .ticket-group {
  margin-top: calc(1rem + 1.9rem);
}

.ticket-group-label {
  font-size: 1em;
  font-weight: 900;
  line-height: 1.9;
}

/* 会場チケットの注記(★ ※)は、発売の種類どうしと同じだけ上を空ける */
.ticket-group .price-notes {
  margin-top: var(--sale-gap);
}

/* 途中で折り返さない塊(日付など) */
.nw {
  white-space: nowrap;
}

/* ---- 会場チケットの発売日: ① 名称 / 期間 / 対象 ---- */
.ticket-group {
  --sale-gap: 1.4rem; /* ①②③ どうしの間隔 */
  --num-size: 1.4rem; /* ①②③ の丸の大きさ */
}

.sale-list {
  list-style: none;
}

.sale + .sale {
  margin-top: var(--sale-gap);
}

/* .card の「段落の間を空ける」指定を打ち消す(名称・期間・対象は詰めて並べる) */
.sale-body p + p {
  margin-top: 0;
}

.sale-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 900;
  line-height: 1.7;
}

/* ①②③: 見出しと同じ黒地に黄色 */
.sale-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--num-size);
  height: var(--num-size);
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

/* 期間・対象・特典は、名称の文字の書き出し(丸の右)に揃える */
.sale-date,
.sale-target,
.sale-perk {
  padding-left: calc(var(--num-size) + 0.45rem);
  font-weight: 700;
  line-height: 1.8;
}

/* 対象が複数(②)は縦に並べる。「対象：」の右に1列で積むので、アイコンの左端が揃う */
.sale-target.is-stacked {
  display: flex;
  align-items: flex-start;
}

.sale-target-list {
  display: flex;
  flex-direction: column;
}

/* 先行発売特典あり */
.sale-perk .star-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.1em;
  margin-right: 0.2em;
  vertical-align: -0.11em; /* 星の中心を文字の中心に合わせる */
}

.star-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 会員ランクのアイコン。文字より一回り大きく */
.rank-icon {
  display: inline-block;
  height: 1.3em;
  width: auto;
  margin: 0 0.06em 0 0;
  vertical-align: -0.28em;
}

/* スマホ(480px 以下)。上の指定を上書きするので、必ずこの位置(後ろ)に置く。
   字下げをやめて幅を稼ぐ(期間が 375px 幅でも1行に収まるように) */
@media (max-width: 480px) {
  .sale-date,
  .sale-target,
  .sale-perk {
    padding-left: 0;
  }
}

/* ---- チケット発売カレンダー(発売期間の図) ---- */
/* 幅は最大 27rem(PC のカードの幅の約65%)。スマホではカードの方が狭いので全幅のまま。
   中身は図の幅(列の幅 --c)に比例させてあるので、幅を変えても同じ見た目で拡大縮小する */
.sale-calendar {
  width: min(100%, 27rem);
  margin-top: var(--sale-gap);
}

/* タイトルは枠の外の左上 */
.sale-calendar-title {
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.sale-chart {
  --general-bar: #5e5f5f; /* 一般のバーの色。24日の中央から右は先行の行もこの色 */
  --general-col: 7;       /* 一般発売が始まる日の列番号(17日が 0) */

  container-type: inline-size;
  border: 2px solid var(--ink);
  background: #fff5cc;
}

.sale-chart-inner {
  --c: calc(100cqw / 8); /* 1日ぶんの列の幅 */

  position: relative;
  padding-bottom: calc(var(--c) * 0.2);
  overflow: hidden;
}

/* 日の区切りの縦線 */
.sale-chart-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.sale-chart-cols i + i {
  border-left: 2px solid var(--ink);
}

.sale-chart-days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  font-size: calc(var(--c) * var(--day-fs, 0.3));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  padding: calc(var(--c) * 0.1) 0 calc(var(--c) * 0.12);
}

.sale-chart-days span {
  padding-right: calc(var(--c) * 0.08);
  white-space: nowrap;
}

/* 曜日と、17日の前の「10月」は日付より小さく(タイムテーブルの曜日と同じ扱い) */
.sale-chart-days small {
  font-size: 0.55em;
  margin-left: 0.05em;
}

.sale-chart-days small:first-child {
  margin: 0 0.05em 0 0;
}

.sale-chart-row {
  position: relative;
  height: calc(var(--c) * 0.49);
}

/* バー: 開始日の列の中央から右端まで。一般発売の日の列の中央で一般の色に切り替える
   (バーの始点からの距離 = 列の幅 × (一般の列 − 開始の列)。一般の行は 0 なので全部一般の色) */
.sale-chart-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--c) * (var(--start) + 0.5));
  right: 0;
  height: calc(var(--c) * 0.15);
  transform: translateY(-50%);
  background: linear-gradient(to right,
    var(--bar) calc(var(--c) * (var(--general-col) - var(--start))),
    var(--general-bar) 0);
}

/* アイコンはバーの始点の上に重ねる */
.sale-chart-row > img,
.sale-chart-general {
  position: absolute;
  top: 50%;
  left: calc(var(--c) * (var(--start) + 0.5));
  height: calc(var(--c) * 0.42);
  width: auto;
  transform: translate(-50%, -50%);
}

/* 一般発売: 「一般」と書いた丸。スマホでは図が小さくなるので、
   文字がサイト内の最小の文字(10.64px)より小さくならないよう丸の大きさに下限をつける */
.sale-chart-general {
  --d: max(calc(var(--c) * 0.42), 26px);

  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border: max(1.5px, calc(var(--c) * 0.025)) solid var(--ink);
  border-radius: 50%;
  background: #fff5cc;
  color: var(--ink);
  font-size: max(calc(var(--c) * 0.155), 0.665rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.ticket-group + .card-subtitle,
.ticket-perks + .card-subtitle,
.seat-note + .card-subtitle {
  margin-top: 1.8rem;
}

/* 特典: 「VIP」「先行」のラベル + 内容 */
/* リスト全体を1つのグリッドにして、行をまたいで「：」と内容の左端を揃える。
   ラベルの幅は中身に合わせる(auto)ので「先行：」が折り返さない。 */
.ticket-perks {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 0.4em;
  /* ラベルと内容を文字の下端(ベースライン)で揃える。
     ラベルだけ文字を大きくしても縦位置がずれない */
  align-items: baseline;
  font-weight: 700;
  line-height: 1.8;
}

.ticket-perks > div {
  display: contents;
}

.ticket-perks dt {
  white-space: nowrap;
  text-align: right; /* 「：」の位置を行どうしで揃える。左寄せにしたいときは left */
}

.ticket-perks dt::after {
  content: "：";
}

/* 欧文のラベルは和文より小さく見えるので少し大きくする */
.perk-en {
  font-size: 1.2em;
  line-height: 1.6;
}

/* 座席表。サムネイルは券種／料金の表と同じくらいの幅にしてある。
   大きさを変えるときは --seat-w だけ直せばよい。 */
.seat-zoom {
  --seat-w: 11rem;

  display: block;
  /* 見出し「座席表」との間。ほかの項目(見出しの margin-bottom 0.4rem)の倍。
     上下の余白は重なって大きい方が効くので、ここの値がそのまま間隔になる */
  margin-top: 0.8rem;
  width: var(--seat-w);
  padding: 0;
  font: inherit; /* ボタンは文字サイズを継承しないので、上の 0.6em を表と揃えるため */
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.seat-zoom:hover {
  box-shadow: 4px 4px 0 rgba(32, 0, 0, 0.25);
  transform: translate(-1px, -1px);
}

.seat-zoom img {
  display: block;
  width: 100%;
  height: auto;
}

.seat-note {
  margin-top: 0.4em;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
}

/* ============ 画像の拡大表示 ============ */
/* 座席表などを画面いっぱいに出す。中身は js/main.js が作る。
   ナビ(z-index 1002)より前に出す。 */
.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(32, 0, 0, 0.94);
  cursor: zoom-out;
}

.zoom-overlay[hidden] {
  display: none;
}

.zoom-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: 4px;
  cursor: default;
}

.zoom-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

/* 拡大中は背後のページをスクロールさせない。
   ナビは隠す(スマホでは ≡ が × と同じ位置に透けて見えてしまうため) */
body.zoom-open {
  overflow: hidden;
}

body.zoom-open .site-nav {
  visibility: hidden;
}

/* スマホでは日時を1行目、内容を2行目に */
@media (max-width: 480px) {
  .ticket-schedule,
  .ticket-schedule li {
    display: block;
  }

  .ticket-schedule li > span {
    display: block;
    padding-left: 1em;
    line-height: 1.7;
  }

  /* 元の間隔(0.3rem)に、PC と同じく1文字ぶん(--schedule-gap)を足す */
  .ticket-schedule li + li {
    margin-top: calc(var(--schedule-gap) + 0.3rem);
  }



  /* 「12月25日(金)10:00 発売」のように短いものは、ひとかたまりで1行に */
  .ticket-schedule li.is-oneline {
    white-space: nowrap;
  }

  .ticket-schedule li.is-oneline > span {
    display: inline;
    padding-left: 0.5em;
  }
}

/* ============ 脚本・演出 黒澤世莉より ============ */
/* 白地 + 二重線の枠で、他のカードと少しだけ差をつける */
/* 上の余白は、下の「#ガルマネ で応援する！」との間(.share-section の 30svh)と揃える。
   前のセクションの margin-bottom(4.5rem)とは相殺されるので、大きい方の 30svh が効く */
#message {
  margin-top: 30svh;
}

.card-message {
  background: #fff;
  border: 4px double var(--ink);
  line-height: 2.1;
  font-weight: 500;
  /* 左右の余白をやや広くして手紙らしく */
  padding: 2rem 2rem;
}

/* ============ 公演情報 ============ */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.info-row {
  display: flex;
  gap: 1.2rem;
}

/* 直接の子だけに効かせる。dd の中に入れ子の dl(タイムテーブルの凡例)があるため */
.info-row > dt {
  flex: 0 0 4.5em;
  font-weight: 900;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  text-align: center;
  align-self: flex-start;
  padding: 0.1em 0;
  font-size: 0.9rem;
  margin-top: 0.35em;
}

.info-row > dd {
  flex: 1;
  font-weight: 700;
}

.info-img {
  display: block;
  margin: 1em 0;
  width: 12em;
}
.info-sub {
  font-size: 0.85rem;
  font-weight: 500;
}

.map-placeholder {
  /* margin-top: 0.8rem;
  border: 2px dashed var(--ink);
  border-radius: 12px; */
  padding: 1rem 0;
}

/* ============ タイムテーブル(公演情報 > 日程) ============ */
.timetable {
  margin-top: 1rem;
}

.tt {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.25;
}

.tt th,
.tt td {
  padding: 0.08em 0.2em;
  font-weight: 700;
}

.tt thead th {
  vertical-align: bottom;
}

.tt-day {
  font-size: 1.2em;
}

.tt-wday {
  font-size: 0.7em;
  margin-left: 0.05em;
}

/* 時刻の列。
   width:1% は「内容の幅まで縮める」ための指定(表の自動レイアウトの性質を使う)。
   余った幅は日付の列に回るので、日付一覧が左に寄り、
   右端の 24(日) の列にカメラ+配信を並べる余裕ができる。 */
.tt tbody th {
  width: 1%;
  text-align: left;
  font-size: 1.25em;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-left: 0.3em;
}

.tt td {
  font-size: 1.2em;
}

/* 一行おきに黄色。参考画像と同じく 13:00 / 16:00 / 19:00 の行 */
.tt thead tr,
.tt tbody tr:nth-child(even) {
  background: rgba(255, 219, 71, 0.6);
}

/* SVG アイコン。currentColor で文字色に馴染む */
.tt-icon {
  display: inline-block;
  height: 1em;
  vertical-align: -0.1em;
}

.tt-icon svg {
  display: block;
  height: 100%;
  width: auto;
}

/* スマホでは 24(日) の列が狭く、カメラ+配信を並べると行の色帯からはみ出す。
   配信アイコンの大きさを優先したいので、カメラの方を 0.9em に詰めてある。 */
.tt-camera {
  height: 0.9em;
}

/* 配信アイコンはカメラの右肩に小さく添える。
   右側のマイナスマージンで場所を取らせないので、カメラ+配信のセルでも
   カメラだけのセルと同じ位置(セルの中央)にカメラが来る。
   マイナス量 = 配信アイコンの幅(0.6em) + 左の余白(0.2em)。
   大きさを変えるときは height と margin-right を同時に直すこと。
   スマホで色帯からはみ出さない上限がこのあたり(余裕 1px ほど)。 */
.tt-stream {
  height: 0.6em;
  margin-left: 0.2em;
  margin-right: -0.8em;
  vertical-align: 0.15em;
}

/* スマホでは表が最小幅まで詰まっていて 24(日) の列を広げる余地がない。
   PC と同じ間隔のままだと配信アイコンが行の色帯からはみ出すので、
   この幅だけアイコンと間隔を少し小さくする。 */
@media (max-width: 480px) {
  .tt-stream {
    height: 0.5em;
    margin-left: 0.13em;
    margin-right: -0.63em;
  }
}

/* 凡例 */
.tt-legend {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tt-legend > div {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.tt-legend dt {
  flex: 0 0 1.8em;
  text-align: center;
  line-height: inherit;
}

.tt-legend dt svg {
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
}

/* 「…」を本文と別の箱にして、本文が折り返しても2行目が本文の頭に揃うようにする */
.tt-legend dd {
  display: flex;
  gap: 0.6em;
}

.tt-legend dd::before {
  content: "…";
  flex: none;
}

/* 注意書き */
.tt-notes {
  list-style: none;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.8;
}

.tt-notes li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.tt-notes li::before {
  content: "●";
  margin-right: 0.2em;
}

/* ============ お知らせ(microCMS) ============ */
.news-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.news-item {
  padding: 1.4rem 1.6rem;
}

.news-date {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.7;
  line-height: 1.6;
}

.news-heading {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.6;
  margin-top: 0.1rem;
}

.news-body {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}

/* トップのお知らせ: タイトルだけ。カード全体がリンク */
.news-item--compact {
  padding: 0;
}

.news-link {
  display: block;
  padding: 1rem 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.news-link:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 右端に「読む」の目印として矢印を添える */
.news-link .news-heading {
  position: relative;
  padding-right: 1.6em;
}

.news-link .news-heading::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 900;
  transition: transform 0.15s ease;
}

.news-link:hover .news-heading::after {
  transform: translateX(0.2em);
}

/* ============ お知らせページ(/news) ============ */
.news-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 5rem 1.2rem 4rem;
}

.news-page-title {
  margin-bottom: 2rem;
}

.news-empty {
  text-align: center;
  font-weight: 700;
  padding: 2rem 0;
}

.news-back {
  text-align: center;
  margin-top: 3rem;
}

.news-back a {
  display: inline-block;
  font-weight: 900;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.3em 1.6em;
  background: rgba(255, 255, 255, 0.72);
  transition: background 0.15s ease;
}

.news-back a:hover {
  background: #fff;
}

/* PC は固定バーのぶん上を空ける */
@media (min-width: 900px) {
  .news-page {
    padding-top: calc(var(--nav-height) + 3rem);
  }
}

/* microCMS のリッチエディタが出力する要素 */
.news-body p + p {
  margin-top: 1em;
}

.news-body a {
  font-weight: 700;
}

.news-body img {
  border-radius: 10px;
  margin: 0.6rem 0;
}

.news-body ul,
.news-body ol {
  margin: 0.6rem 0 0.6rem 1.4em;
}

/* ============ よくある質問(/faq) ============ */
/* 見た目は /news と共通(カード・見出し・戻るボタン)。
   Q はボタン。A は grid の行の高さを 0fr → 1fr にして「スッと」開く。
   max-height 方式と違って中身の高さを知らなくてよく、後続の内容も自然に下へずれる。 */
.faq-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 5rem 1.2rem 4rem;
}

.faq-page-title {
  margin-bottom: 2rem;
}

.faq-group + .faq-group {
  margin-top: 2.8rem;
}

.faq-heading {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  line-height: 1.6;
  text-shadow: 2px 2px 0 #fff;
  margin-bottom: 0.8rem;
  padding-left: 0.6em;
  border-left: 5px solid var(--ink);
}

.faq-card {
  padding: 0.4rem 1.4rem;
}

.faq-item + .faq-item {
  border-top: 2px dashed rgba(32, 0, 0, 0.25);
}

/* Q(見出しの中のボタン) */
.faq-q {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.faq-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 900;
  line-height: 1.7;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faq-q-text {
  flex: 1;
}

/* Q / A のマーク */
.faq-mark {
  flex: none;
  font-family: var(--font-title);
  font-size: 1.15em;
  line-height: 1.7;
  min-width: 1.3em;
  text-shadow: 2px 2px 0 #fff;
}

.faq-a-inner > .faq-mark {
  color: #57d38c; /* .lead のウェーブ強調色と揃える */
  text-shadow: 2px 2px 0 rgba(32, 0, 0, 0.25);
}

/* 右端の ∨。開くと ∧ に */
.faq-chevron {
  flex: none;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.55em;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(225deg);
  margin-top: 0.85em;
}

/* A(閉じているときは高さ 0 で、クリックもできない) */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  cursor: pointer; /* 開いている A をクリックしても閉じられる */
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a-text {
  flex: 1;
  font-size: 0.95rem;
  padding-bottom: 1.1rem;
}

/* .faq-a-inner の gap を上下のパディングに使わないよう、テキスト側で余白をとる */
.faq-a-inner > .faq-mark {
  padding-bottom: 1.1rem;
}

.faq-a-text a {
  font-weight: 700;
}

/* ---- 検索窓(見出しの下) ---- */
.faq-search {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  margin: -0.6rem auto 2.4rem;
  max-width: 600px;
}

.faq-search-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(32, 0, 0, 0.25);
}

.faq-search-icon {
  flex: none;
  display: flex;
  margin-left: 0.9em;
  color: var(--ink);
  opacity: 0.7;
}

.faq-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.55em 0.5em 0.55em 0.6em;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.6;
  color: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ブラウザ標準の × は消して、自前の × を使う */
.faq-search-input::-webkit-search-cancel-button,
.faq-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.faq-search-input::placeholder {
  color: rgba(32, 0, 0, 0.45);
  font-weight: 500;
}

.faq-search-clear {
  flex: none;
  width: 2em;
  height: 2em;
  margin-right: 0.4em;
  background: none;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 1.3em;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.faq-search-clear:hover {
  background: rgba(32, 0, 0, 0.08);
}

.faq-search-btn {
  flex: none;
  padding: 0 1.4em;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 rgba(32, 0, 0, 0.25);
  font: inherit;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.faq-search-btn:hover {
  background: #fff;
  color: var(--ink);
}

/* 候補(入力欄のすぐ下に重ねる) */
.faq-suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(32, 0, 0, 0.25);
  overflow: hidden;
  text-align: left;
}

.faq-suggest-item {
  padding: 0.55em 1em;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
}

.faq-suggest-item + .faq-suggest-item {
  border-top: 1px solid rgba(32, 0, 0, 0.15);
}

.faq-suggest-item.is-active {
  background: var(--bg);
}

/* ---- 検索結果ページ(/faq/search) ---- */
.faq-results-empty {
  font-weight: 700;
  padding: 0.6rem 0.2rem;
}

@media (max-width: 480px) {
  .faq-search {
    gap: 0.5rem;
  }

  .faq-search-btn {
    padding: 0 1em;
  }
}

/* PC は固定バーのぶん上を空ける */
@media (min-width: 900px) {
  .faq-page {
    padding-top: calc(var(--nav-height) + 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-chevron {
    transition: none;
  }
}

/* ============ リベ大とは ============ */
.card-about {
  /* text-align: center; */
  background: var(--ink);
  color: #fff;
  box-shadow: 6px 6px 0 rgba(32, 0, 0, 0.25);

  /* 見出し / ロゴ / 本文2つ を並べる。既定は縦積み */
  display: grid;
  gap: 1.4rem;
  align-items: center;
}

/* 見出しは常に横幅いっぱい。間隔は gap で取るのでマージンは打ち消す */
.card-about .section-title {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.card-about p + p {
  margin-top: 0;
}

.about-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* ロゴと本文を横に並べられる幅があるときだけ2列にする。
   1fr 1fr なので、ロゴに割り当てられる面積は本文2つ分とほぼ同じになる。 */
@media (min-width: 720px) {
  .card-about {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

  .about-logo {
    grid-column: 1;
    grid-row: 2 / span 2;
    max-width: none;
  }

  .card-about .lead {
    grid-column: 2;
    grid-row: 2;
  }

  .card-about > p:not(.lead) {
    grid-column: 2;
    grid-row: 3;
  }
}

.card-about a {
  color: var(--bg);
  font-weight: 900;
}

.about-label {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--bg);
  margin-bottom: 0.8rem;
}

.about-follow {
  font-size: 0.9rem;
}

/* ============ 応援(ハッシュタグのコピー) ============ */
.share-section {
  text-align: center;
  margin: 30svh auto;
  /* background: var(--bg);
  width: 100vw;
  padding: 1em 0; */
}

/* 既定(狭い画面)は縦積み。DOM順のまま ボタン → 文章 → イラスト になる */
.share-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.share-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-width: 0; /* 文章が長くても横並び時にはみ出さないように */
}

/* 吹き出しの位置基準。ボタンだけを囲う */
.share-btn-wrap,
.contact-btn-wrap {
  position: relative;
  display: inline-block;
}

.share-lines {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.9;
  text-align: left;
  padding-bottom: 2em;
}

.share-chara {
  flex: none;
  width: clamp(76px, 22vw, 128px);
  height: auto;
}

/* 横に置けるだけの幅があればイラストを左へ回す */
@media (min-width: 370px) {
  .share-wrap {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
  }

  .share-chara {
    order: -1;
  }
}

.share-button,
.contact-button {
  display: inline-block;
  line-height: normal;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  text-decoration: none;
  letter-spacing: 0.04em;
  /* 折り返すときは語の途中ではなく空白で改行させる */
  word-break: keep-all;
  color: var(--bg);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 0.7em 1.8em;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(32, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.share-button:hover,
.contact-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 rgba(32, 0, 0, 0.25);
}

.share-button:active,
.contact-button:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 rgba(32, 0, 0, 0.25);
}

/* コピー後にボタンの上へふわっと出る吹き出し */
.share-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.8rem);
  transform: translate(-50%, 0.5rem);
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: 0.4em 1.3em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 吹き出しのしっぽ */
.share-toast::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--ink);
}

.share-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============ お問い合わせ ============ */
.contact-card {
  text-align: center;
}

.contact-mail {
  font-weight: 900;
  font-size: clamp(1rem, 4vw, 1.3rem);
  word-break: break-all;
}

/* ============ 出演 / スタッフ(スクロール固定パネル) ============ */
/* スマホは固定せず、そのまま縦に流す(1画面に収まらないため)。
   パネルの背景は不透明にしてあるので、どちらの表示でも
   スクロール中は背景イラストが隠れ、その間に入れ替えが行われる。 */
.credits-pin {
  /* main の幅制限を破って全幅にする */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.credits-panel {
  background: var(--bg); /* 不透明。背景イラストを隠す */
  padding: 3rem 1.2rem;
}

.credits-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
}

/* 横長の画面では出演とスタッフを横並びにする。
   固定(sticky)はせず、スマホと同じくそのまま流れる。
   ただし背景イラストの入れ替えをこのブロックの陰で行うので、
   最低でも画面の高さ分は確保して、切り替わる瞬間に背景が覗かないようにする。 */
@media (min-width: 900px) {
  .credits-panel {
    /* ちょうど画面ぴったりだと、入れ替えの瞬間に下端へ数pxの隙間ができて
       背景が覗く。少し高くして、完全に覆っている時間帯を作る。 */
    min-height: calc(100svh + 10rem);
    display: flex;
    align-items: center;
    padding: 2rem 1.5rem;
  }

  .credits-grid {
    width: 100%;
    grid-template-columns: 1fr 1.15fr;
    gap: 2.5rem;
    align-items: start;
  }

  /* スタッフは20行近くあるので、1画面に収まるよう詰める */
  .credits-panel .section-title {
    margin-bottom: 1.1rem;
  }

  .credits-panel .staff-list {
    gap: 0.15rem;
  }

  .credits-panel .staff-row,
  .credits-panel .cast-list {
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .credits-panel .staff-row.mt1 {
    margin-top: 0.75rem;
  }

  .credits-panel .cast-list {
    gap: 0.5rem 1rem;
  }
}

/* ============ 出演 ============ */
/* カードに入れず、黄色地に直接テキストで置く。文字の大きさはスタッフに合わせる */

/* 出演欄の幅は、PC の固定表示(左カラム)と縦並び(全幅)で大きく変わる。
   画面幅ではなく、この枠自体の幅で列数を決めたいのでコンテナクエリを使う。 */
#cast {
  container-type: inline-size;
}

.cast-list {
  list-style: none;
  display: grid;
  /* 4人+2人 のような半端な折り返しを避け、列数は 1 / 2 / 3 / 6 に限定する。
     しきい値は最長の「ノナカモヱリ」(96px)と隙間(16px)から算出。 */
  grid-template-columns: 1fr;
  gap: 0.6rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
}

@container (min-width: 220px) {
  .cast-list { grid-template-columns: repeat(2, 1fr); }
}

@container (min-width: 340px) {
  .cast-list { grid-template-columns: repeat(3, 1fr); }
}

@container (min-width: 680px) {
  .cast-list { grid-template-columns: repeat(6, 1fr); }
}

/* ============ スタッフ ============ */
.staff-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.staff-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
}

/* 職掌のグループ区切り。gap(0.35rem)との合計が1.6倍になる分を足す */
.staff-row.mt1 {
  margin-top: 1.2rem;
}

/* 役職と名前を左右で同じ幅にする。
   こうすると行の隙間の中心がブロックの中央と一致し、
   中央寄せの h2「スタッフ」の中心と縦ラインが揃う。 */
.staff-row dt {
  flex: 1 1 0;
  text-align: right;
  font-weight: 500;
  opacity: 0.8;
  font-size: 0.85rem;
}

.staff-row dd {
  flex: 1 1 0;
  text-align: left;
  font-weight: 700;
}

/* ============ フッター ============ */
.site-footer {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  border-top: 2px solid var(--ink);
  background: var(--bg);
}

.footer-kanmuri {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.footer-logo {
  width: min(60vw, 300px);
  display: block;
  margin: 0.6rem auto 1rem;
}

/* リベ大の案内(libefes.com のフッターに準拠) */
.footer-libedai {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
  display: grid;
  gap: 2.2rem;
  text-align: left;
}

.footer-heading {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
}

.footer-about-text {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.9;
  opacity: 0.8;
}

.footer-links {
  display: grid;
  gap: 2rem;
}

.footer-list {
  list-style: none;
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.footer-list a {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(32, 0, 0, 0.3);
  transition: opacity 0.15s ease;
}

.footer-list a:hover {
  opacity: 0.55;
}

.footer-list li span {
  display: inline-block;
}

.footer-copy {
  display: block;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 2px solid rgba(32, 0, 0, 0.15);
}

/* 左に「リベ大とは」、右にリンク2列(libefes.com と同じ配置) */
@media (min-width: 768px) {
  .footer-libedai {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }

  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ ユーティリティ ============ */
.sp {
  display: none;
}

@media (max-width: 600px) {
  .sp {
    display: inline;
  }

  .story-body {
    line-height: 1.85;
  }

  .info-row {
    flex-direction: column;
    gap: 0.4rem;
  }

  .info-row > dt {
    align-self: flex-start;
    padding: 0.1em 1em;
    flex: 0;
  }
}