:root {
  --maxw: 1080px;
  --gutter: 16px;
}

/* ベース */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.6;
  color: #ffc15f;
  background: #000;
  text-align: center; /* 全体中央寄せ */
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

header, main, footer {
  padding: 24px 0;
}

/* 画像・メディア：縮小はするが原寸以上に拡大しない＋中央寄せ */
img, svg, video, canvas {
  display: block;
  max-width: 100%; /* コンテナ幅を超えない */
  width: auto;     /* 原寸維持（拡大しない） */
  height: auto;    /* アスペクト比維持 */
  margin-left: auto;
  margin-right: auto;
}

/* テキスト類も中央に */
h1, h2, h3, h4, h5, h6,
p, small, figcaption,
ul, ol, li, dl, dt, dd,
blockquote, pre, code, table, caption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

p {
margin: 0;
padding: 0;
}

ul, ol {
  padding-left: 0;
  list-style-position: inside;
  margin: 0.6em auto;
}

/* 常時1カラム */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* ← PCでもスマホでも1カラム */
  gap: 24px;
}

.header
{
margin: 30px auto 20px;
}

/* 以降のブレークポイント指定は不要（削除） */

/* ヒーロー */
.hero {
  padding: 16px 0 8px;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(20px, 4vw, 32px);
  margin: 0 0 8px;
  line-height: 1.3;
}

.lead {
  color: #555;
  margin: 0;
}

.ct01{
margin-bottom: 30px;
}
/* カード */
.card {
  border-radius: 12px;
  padding: 16px;
}

/* キャプション */
.muted,
figure figcaption {
  color: #666;
  font-size: 14px;
}

/* フッター */
footer {
  color: #666;
  font-size: 14px;
}

/* 画像の額縁（必要なら原寸幅を指定） */
.image-wrap {
  /* 例）max-width: 1200px; */
  margin: 0 auto;
}

/* 一部だけ左寄せに戻したい時 */
.text-left {
  text-align: left !important;
}

/* ==== CAST ==== */
.cast {
  margin-top: 16px;
}

/* キャスト領域のみ明朝体に */
.cast, .cast * {
  font-family:
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho Demibold",
    "Yu Mincho",
    "游明朝",
    "Noto Serif JP",
    "BIZ UDMincho",
    serif !important;
}

/* キャストの名前だけ白 */
.cast .names,
.cast .names .name,
.cast .names a {   /* リンク化した場合も白に */
  color: #fff;
}

/* レイアウトそのまま（1カラム・中央寄せ） */
.cast-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; /* 常時1カラム */
  gap: 14px;
}

/* 背景色なしに変更（透明） */
.cast-item {
  padding: 16px 14px;
  border-radius: 12px;
  background: transparent;      /* ← 背景色なし */
}

/* タイトル・名前（中央寄せ前提） */
.role {
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: clamp(16px, 3.2vw, 18px);
}

.names {
  margin: 0;
  font-weight: 600;
  font-size: clamp(17px, 4vw, 22px);
  letter-spacing: .04em;
}

/* 「／」の色アクセントはそのまま（不要なら#111等に） */
.sep {
  display: inline-block;
  padding: 0 .35em;
  color: #b08d57;
}

/* 既定のセンター寄せ方針に合わせる */
.cast, .cast * { text-align: center; }


/* ===== FC先行（キャスト直下・まとめ表示） ===== */
.fc-global {
  margin: 58px 0 38px;
  text-align: center;
}

.fc-box {
  padding: 30px 8px;      /* 罫線だけで上品に見せる */
  border: 1px solid #e8e5de;
  border-radius: 10px;
  background: transparent; /* 背景色なし */
  max-width: 820px;
  margin: 0 auto;
}

.fc-heading {
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(15px, 2.8vw, 16px);
}

.fc-period,
.fc-note,
.fc-links {
  margin: .2em 0 10px;
  font-size: clamp(13px, 2.6vw, 14px);
  line-height: 1.85;
}

/* リンク色（URLを入れる場合） */
.fc-links a {
  color: #0a5bc2;
  text-decoration: underline;
}

/* 既存仕様：キャスト名は白、役名は既定色、キャスト部分だけ明朝 */
.cast .names,
.cast .names .name,
.cast .names a { color: #fff; }

.cast, .cast * {
  font-family:
    "Hiragino Mincho ProN","Hiragino Mincho Pro",
    "Yu Mincho Demibold","Yu Mincho","游明朝",
    "Noto Serif JP","BIZ UDMincho",serif !important;
}

/* 幅計算の安全策：全体を border-box に */
*, *::before, *::after { box-sizing: border-box; }

/* 縦並びレイアウト（据え置き） */
.btn-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  width:100%;
  max-width:720px;
  margin:8px auto 0;
  padding:0 12px;                  /* 端末端の余白を少し増やす */
}

/* 通常=アウトライン／ホバー=金ベタ（据え置き）＋“はみ出し対策” */
.fc-links .btn{
  display:block;
  width:100%;
  max-width:100%;                  /* 親を超えない */
  padding:14px 18px;
  border-radius:9999px;
  border:1px solid var(--accent, #b08d57);
  background:transparent;
  color:var(--accent, #b08d57);
  text-decoration:none;
  font-weight:600;
  font-size:clamp(14px, 2.7vw, 15px);
  line-height:1.2;
  text-align:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;

  /* ← ココが重要：改行を許可し、長文はどこでも折る */
  white-space: normal;             /* nowrap を廃止 */
  word-break: keep-all;            /* 日本語は自然改行、英数は次行へ */
  overflow-wrap: anywhere;         /* すごく長い英数語やURLも折る */
}

.fc-links .btn:hover{
  background:var(--accent, #b08d57);
  color:#111;
  border-color:var(--accent, #b08d57);
}

.fc-links .btn:active{ transform: translateY(1px); }
.fc-links .btn:focus-visible{ outline:2px solid var(--accent, #b08d57); outline-offset:2px; }

/* すごく狭い画面の微調整 */
@media (max-width:360px){
  .fc-links .btn{ padding:12px 14px; font-size:14px; }
}

/* iOSの文字拡大による崩れ抑止（任意） */
html { -webkit-text-size-adjust: 100%; }


/* FCサムネ（共通） */
.fc-thumbwrap { margin-top: 10px; text-align: center; }
.fc-thumb {
  display: inline-block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.fc-thumb img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Modal（共通）===== */
.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] { display: block; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}
.modal__panel {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  margin: 24px auto;
  background: transparent;              /* 背景なし方針 */
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
}
.modal__close {
  position: absolute;
  top: -10px; right: -10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent, #b08d57);
  background: var(--accent, #b08d57);
  color: #111;
  font-weight: 700;
  cursor: pointer;
}
.modal__close:hover {
  background: transparent;
  color: var(--accent, #b08d57);
}
.modal__figure {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
}
/* 拡大画像：原寸以上に拡大しない＆画面に収める */
.modal__figure img {
  display: block;
  max-width: min(96vw, 1200px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
/* スマホ微調整 */
@media (max-width: 480px) {
  .modal__panel { margin: 16px auto; }
  .modal__close { right: -6px; top: -6px; }
}


/* サムネは“見かけ”だけ縮小。原寸以上には拡大しない */
:root {
  --thumb-max: 260px;  /* サムネの最大幅（好みで 240〜400px くらい） */
  --thumb-min: 160px;  /* サムネの最小幅（極小画面用） */
}

.map-thumb img {
  /* 画面幅に応じてしなやかに縮む横長サムネ */
  width: clamp(var(--thumb-min), 50vw, var(--thumb-max));
  height: auto;
  max-width: 100%;   /* 親幅を超えない（はみ出し防止） */
  object-fit: contain;
}

/* モーダル時は「クリックで閉じる」感を出す */
.modal__panel,
.modal__figure img {
  cursor: zoom-out;
}

/* ===== Schedule ===== */
.schedule-block {
  max-width: 820px;
  margin: 0 auto 70px;
  padding: 0 12px;
}

.sch-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.sch-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: transparent; /* 背景なしポリシー */
}

.sch-date {
  margin: 0;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: clamp(16px, 3.2vw, 18px);
  color: #ffc15f; /* 既定の金色 */
}
.sch-day { font-variant-numeric: tabular-nums; }
.sch-w   { opacity: .85; }

.sch-times {
  margin: 0;
  font-size: clamp(16px, 3.2vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap; /* 端末幅が狭い時は気持ちよく折返し */
}

.sch-sep { opacity: .7; }

/* バッジ（A/B）—通常は金ベタ、ホバーでアウトラインと統一感を持たせる */
.badge {
  display: inline-block;
  min-width: 1.9em;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 800;
  line-height: 1.1;
  border: 1px solid var(--accent, #b08d57);
  background: var(--accent, #b08d57);
  color: #111;
  letter-spacing: .04em;
  user-select: none;
}

.badge--A { /* A/B で微妙に差をつけたい場合は色を変えてもOK */
  /* そのまま共通色を使用 */
}
.badge--B {
  /* ほんの少しだけ彩度違いにしたいなら以下を有効化
  background: #d2aa62;
  border-color: #d2aa62;
  */
}

/* 凡例・注記 */
.sch-legend {
  margin: 10px 0 6px;
  font-size: 14px;
  opacity: .95;
}
.sch-legend .badge { transform: translateY(2px); }

.sch-notes {
  margin: 0;
  font-size: 14px;
  opacity: .9;
}

/* 数値の詰まりを整える */
.sch-times time {
  font-variant-numeric: tabular-nums;
}

/* すごく狭い画面のとき少し詰める */
@media (max-width: 360px) {
  .sch-item { padding: 8px 10px; }
  .sch-times { gap: 8px; }
}

/* ===== Schedule（視認性アップ版） ===== */
.schedule-block { max-width: 820px; margin: 0 auto 70px; padding: 0 12px; }
.sch-list { display: grid; grid-template-columns: 1fr; gap: 10px; list-style: none; padding: 0; margin: 0 0 10px; }
.sch-item { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: transparent; }
.sch-date { margin: 0; font-weight: 700; letter-spacing: .06em; font-size: clamp(16px, 3.2vw, 18px); color: #ffc15f; }
.sch-day { font-variant-numeric: tabular-nums; } .sch-w { opacity: .85; }

.sch-times { margin: 0; font-size: clamp(16px, 3.2vw, 18px); display: inline-flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sch-sep { opacity: .7; }
.sch-times time { font-variant-numeric: tabular-nums; }

/* A/B バッジは記号的に、名前タグで明示 */
.badge {
  display: inline-block; min-width: 1.9em; padding: 4px 10px;
  border-radius: 9999px; font-weight: 800; line-height: 1.1;
  border: 1px solid var(--accent, #b08d57); background: var(--accent, #b08d57); color: #111;
  letter-spacing: .04em; user-select: none;
}

/* キャスト名タグ（色に頼らず文字で明示） */
.cast-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
}

/* A/B でほんの少し差を付ける（任意。無くてもOK） */
.cast-A { border-color: rgba(255,255,255,.4); }
.cast-B { border-color: rgba(255,255,255,.2); }

/* 凡例・注記 */
.sch-legend { margin: 10px 0 6px; font-size: 14px; opacity: .95; display: grid; gap: 6px; justify-content: center; }
.sch-legend .badge { transform: translateY(2px); }
.sch-notes { margin: 0; font-size: 14px; opacity: .9; }

@media (max-width: 360px) {
  .sch-item { padding: 8px 10px; }
  .sch-times { gap: 6px; }
  .cast-tag { font-size: 13px; padding: 3px 7px; }
}

/* ===== Ticket (価格表) 調整版 ===== */
.ticket { max-width: 820px; margin: 14px auto 0; padding: 0 12px; }

.ticket-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:12px;
}

.ticket-item{
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:12px 14px;                  /* 少しタイトに */
  background:transparent;
}

.ticket-main{
  display:flex; align-items:center;   /* baseline→center にして上下差を抑える */
  justify-content:center; gap:10px;   /* 14→10 */
  flex-wrap:wrap;
}

/* 席種バッジは少し小ぶりに */
.seat-badge{
  display:inline-block;
  padding:5px 10px;                   /* 6x12→5x10 */
  border-radius:9999px;
  border:1px solid var(--accent, #b08d57);
  color: var(--accent, #b08d57);
  background: transparent;
  font-weight:700;                    /* 800→700 */
  letter-spacing:.05em;
  line-height:1.1;
  font-size: clamp(13px, 2.6vw, 14px);

}
.seat-ss{ border-color:#d8b472; color:#d8b472; }
.seat-s { border-color:#caa766; color:#caa766; }
.seat-a { border-color:#b08d57; color:#b08d57; }

/* ★ 価格を落ち着いたサイズへ */
.price{
  font-variant-numeric: tabular-nums;
  font-weight:700;                    /* 800→700 */
  font-size: clamp(18px, 4.2vw, 22px);/* 22–30px → 18–22px に縮小 */
  color:#ffc15f;
  line-height:1.2;                    /* 1.1→1.2 で詰まり軽減 */
}
.price .currency{
  font-size:.75em;
  opacity:.9;
  margin-right:.15em;
}

/* 特典文は据え置き（必要なら更に控えめに） */
.benefit{
  margin:6px 0 0;                     /* 8→6 */
  font-size:14px;
  line-height:1.7;
  color:#fff; opacity:.9;
}

/* 狭小画面最適化 */
@media (max-width:360px){
  .ticket-item{ padding:10px 10px; }
  .ticket-main{ gap:8px; }
  .benefit{ font-size:13px; line-height:1.6; }
}