@charset "UTF-8";
/* ============================================================
   page.css（2026リニューアル・段階2）
   作り直したページ（案内・チケット・上演作品の一覧）だけで読み込む部品。
   head 領域で読み込むので、固定部分の base/frame/content.css より先に読まれる。
   content.css の要素ルールは優先度が低いので、ここのクラス指定が勝つ。
============================================================ */

/* ---------- ページの頭 ---------- */
.bz-page-head { margin: 0 0 26px; }
.bz-page-head .bz-kicker { margin-bottom: 6px; }
.bz-page-title {
  margin: 0; padding: 0; border: 0; font-family: var(--bz-font);
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 900; line-height: 1.15; letter-spacing: -.03em;
  color: var(--bz-ink); text-align: left; text-wrap: balance; word-break: auto-phrase; /* 文節で改行し、行の長さをそろえる（1文字だけ次の行に落ちない） */
}
.bz-page-lead { margin: 8px 0 0; font-size: 13px; line-height: 1.7; letter-spacing: 0; color: var(--bz-sub); text-align: left; }

/* ---------- ページの中の見出し ---------- */
.bz-section-title {
  margin: 48px 0 16px; padding: 0 0 6px; border-bottom: 1.5px solid var(--bz-ink);
  font-family: var(--bz-font); font-size: 19px; font-weight: 900; line-height: 1.4; letter-spacing: 0;
  color: var(--bz-ink); text-align: left;
}
.bz-sub-title {
  margin: 26px 0 10px; padding: 0; border: 0; font-family: var(--bz-font);
  font-size: 15px; font-weight: 900; line-height: 1.5; letter-spacing: 0; color: var(--bz-ink); text-align: left;
}

/* ---------- 本文 ---------- */
.bz-prose { max-width: 40em; }
.bz-prose p { margin: 0; font-size: 14.5px; line-height: 1.95; letter-spacing: .02em; text-align: left; }
.bz-prose p + p { margin-top: 1em; }
.bz-prose b { font-weight: 900; }
.bz-prose a:link, .bz-prose a:visited { font-weight: 700; border-bottom: 1px solid var(--bz-ink); }

/* ---------- 記事の列（案内ページ）：本文エリアの中央に最大900px ---------- */
.bz-article { max-width: 900px; margin: 0 auto; }

/* ---------- 写真（切らない） ---------- */
/* 一番上の写真：元の画像が小さいので最大560pxまで（それ以上は引き伸ばさない） */
.bz-hero { margin: 0 0 28px; }
.bz-main .bz-hero img { display: block; width: auto; max-width: min(100%, 560px); height: auto; } /* 元の大きさより大きくしない。frame.css に負けないよう .bz-main を付ける */
/* 写真の並び：高さをそろえて1列に並べる。写真ごとの縦横比（横長1.4／縦長 is-tall 0.714）で幅を配り、
   列の幅に合わせて全部まとめて縮む。高さの上限は --h（230px）。切らない */
.bz-photos { --h: 230px; display: flex; gap: 14px; align-items: flex-start; margin: 22px 0 8px; }
.bz-photos > figure, .bz-photos > a { margin: 0; min-width: 0; flex: 1.4 1 0%; max-width: calc(var(--h) * 1.4); }
.bz-photos > .is-tall { flex: .714 1 0%; max-width: calc(var(--h) * .714); }
/* 7:5 と 5:7 以外の写真用（縦横比に一番近いものを付ける） */
.bz-photos > .is-43 { flex: 1.333 1 0%; max-width: calc(var(--h) * 1.333); } /* 4:3 */
.bz-photos > .is-65 { flex: 1.2 1 0%; max-width: calc(var(--h) * 1.2); }     /* 6:5 */
.bz-photos > .is-34 { flex: .75 1 0%; max-width: calc(var(--h) * .75); }     /* 3:4 */
.bz-photos img { display: block; width: 100%; height: auto; }
.bz-photos figcaption { margin-top: 5px; font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--bz-sub); text-align: left; }
.bz-photos figcaption a:link, .bz-photos figcaption a:visited { font-weight: 500; border-bottom: 1px solid var(--bz-sub); }

/* ---------- リンクの行 ---------- */
a.bz-rowlink:link, a.bz-rowlink:visited {
  display: flex; justify-content: flex-start; gap: 8px; max-width: 40em; margin: 12px 0;
  padding: 6px 2px;
  font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--bz-ink);
}
a.bz-rowlink::after { content: "→"; }
a.bz-rowlink:hover { text-decoration: underline; opacity: 1; }

/* ---------- 年表・受賞歴（2列の表） ---------- */
.bz-history { max-width: 46em; margin: 0; }
.bz-history > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.bz-history dt { font-size: 13px; font-weight: 900; line-height: 1.7; }
.bz-history dd { margin: 0; font-size: 13.5px; line-height: 1.7; }

/* ---------- 人物（写真＋本文） ---------- */
.bz-person { display: grid; grid-template-columns: 180px minmax(0, 40em); gap: 28px; align-items: start; margin: 10px 0 20px; }
.bz-person figure { margin: 0; }
.bz-person img { display: block; width: 100%; height: auto; }
.bz-person figcaption { margin-top: 6px; font-size: 12px; color: var(--bz-sub); text-align: left; letter-spacing: 0; }

/* ---------- 引用（碑文など） ---------- */
.bz-quote { max-width: 34em; margin: 18px 0; padding: 16px 20px; border-left: 3px solid var(--bz-ink); background: var(--bz-paper); }
.bz-quote p { margin: 0; font-size: 14px; line-height: 2; letter-spacing: .04em; text-align: left; }

/* ---------- 後援会 ---------- */
.bz-intro { max-width: 34em; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.9; letter-spacing: 0; text-align: left; }
.bz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin-top: 24px; }
.bz-plan { display: flex; flex-direction: column; padding: 22px 24px 24px; border: 1.5px solid var(--bz-ink); background: var(--bz-paper); }
.bz-plan--dark { background: var(--bz-ink); }
.bz-plan--dark, .bz-plan--dark p, .bz-plan--dark li, .bz-plan--dark a:link, .bz-plan--dark a:visited { color: var(--bz-beige); }
.bz-plan .bz-plan__name { margin: 0; padding: 0; border: 0; font-size: 26px; font-weight: 900; line-height: 1.3; letter-spacing: 0; color: inherit; }
.bz-plan .bz-plan__for { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; letter-spacing: 0; opacity: .85; }
.bz-plan ol { margin: 16px 0 0; padding: 0; list-style: none; }
.bz-plan li { display: flex; gap: 10px; margin: 0; padding: 6px 0; font-size: 13px; line-height: 1.6; list-style: none; }
.bz-plan li b { flex: none; min-width: 4em; font-size: 11px; }
.bz-plan li b::before { content: "■"; margin-right: 3px; color: var(--bz-accent); }
.bz-plan .bz-plan__extra { margin: 12px 0 18px; font-size: 12px; line-height: 1.8; letter-spacing: 0; opacity: .9; }
.bz-plan__fee { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1.5px solid currentColor; }
.bz-plan__fee small { font-size: 11.5px; opacity: .85; }
.bz-plan__fee b { font-size: 24px; font-weight: 900; white-space: nowrap; }

/* ---------- 横に並べる手順・連絡先 ---------- */
.bz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.bz-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-steps > div { padding: 14px 14px 14px 0; }
.bz-steps > div + div { padding-left: 14px; border-left: 1px solid var(--bz-rule); }
.bz-steps b { display: block; font-size: 14px; font-weight: 900; }
.bz-steps p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; letter-spacing: 0; color: var(--bz-sub); text-align: left; }
.bz-steps a:link, .bz-steps a:visited { font-weight: 700; color: var(--bz-ink); border-bottom: 1px solid var(--bz-ink); }

/* ---------- 文中に置く黒ボタン ---------- */
a.bz-button.bz-button--inline:link, a.bz-button.bz-button--inline:visited { display: inline-block; margin-top: 20px; padding: 14px 32px; }

/* ---------- 地図と道順 ---------- */
.bz-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bz-map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ---------- 料金・仕様などの表 ---------- */
.bz-price-group { margin: 16px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--bz-sub); text-align: left; }
.bz-price { max-width: 40em; margin: 0; }
.bz-price > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.bz-price dt { font-size: 14px; font-weight: 500; }
.bz-price dt small { display: block; font-size: 11.5px; font-weight: 400; color: var(--bz-sub); }
.bz-price dt a:link, .bz-price dt a:visited { font-weight: 700; border-bottom: 1px solid var(--bz-ink); }
.bz-price dd { margin: 0; font-size: 15px; font-weight: 900; text-align: right; white-space: nowrap; }
.bz-price dd small { display: block; font-size: 11px; font-weight: 400; color: var(--bz-sub); white-space: normal; }

/* ---------- チケットページ ---------- */
.bz-ticket { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; }
.bz-ticket__aside { position: sticky; top: 16px; }
.bz-ticket__aside img { display: block; width: 100%; height: auto; box-shadow: 0 10px 26px rgba(60, 45, 30, .22); }
.bz-ticket__aside a.bz-button { margin-top: 16px; }
.bz-ticket__aside .bz-links { margin-top: 8px; }
.bz-schedule { width: 100%; max-width: 40em; border-collapse: collapse; }
.bz-schedule th, .bz-schedule td { padding: 5px 6px; border-bottom: 0; font-size: 14px; text-align: left; vertical-align: middle; }
.bz-schedule tr:nth-child(even) td { background: rgba(255, 255, 255, .35); } /* 1行おきにうっすら色を付けて読みやすく */
.bz-schedule th { font-size: 11px; font-weight: 700; color: var(--bz-sub); }
.bz-schedule td:first-child { font-size: 16px; font-weight: 900; white-space: nowrap; }
.bz-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--bz-ink); font-size: 11px; font-weight: 700; line-height: 1.6; }
.bz-tag--talk::before { content: "■"; margin-right: 3px; font-size: .8em; color: var(--bz-accent); }
.bz-tag--off { background: var(--bz-ink); color: var(--bz-beige); }
.bz-note { max-width: 40em; margin: 10px 0 0; font-size: 12.5px; line-height: 1.8; letter-spacing: 0; color: var(--bz-sub); text-align: left; }
.bz-care { max-width: 40em; margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--bz-accent); background: var(--bz-paper); }
.bz-care p { margin: 0; font-size: 12.5px; line-height: 1.85; letter-spacing: 0; text-align: left; }
.bz-ways { display: grid; gap: 12px; max-width: 40em; }
.bz-way { padding: 16px 18px; border: 1.5px solid var(--bz-ink); background: var(--bz-paper); }
.bz-way--main { background: var(--bz-ink); }
.bz-way--main, .bz-way--main p, .bz-way--main .bz-way__name { color: var(--bz-beige); }
.bz-way .bz-way__name { margin: 0; padding: 0; border: 0; font-size: 16px; font-weight: 900; line-height: 1.5; letter-spacing: 0; text-align: left; }
.bz-way p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.8; letter-spacing: 0; text-align: left; }
.bz-way a.bz-way__go:link, .bz-way a.bz-way__go:visited {
  display: inline-block; margin-top: 12px; padding: 8px 16px; background: var(--bz-ink); color: var(--bz-beige);
  font-size: 13px; font-weight: 700; letter-spacing: 0;
}
.bz-way--main a.bz-way__go:link, .bz-way--main a.bz-way__go:visited { background: var(--bz-beige); color: var(--bz-ink); }
.bz-way a.bz-way__go:hover { background: var(--bz-accent); color: var(--bz-ink); opacity: 1; }
.bz-tel { max-width: 40em; margin: 18px 0 0; padding: 14px 16px; background: var(--bz-paper); }
.bz-tel p { margin: 0; font-size: 12.5px; line-height: 1.7; letter-spacing: 0; color: var(--bz-sub); text-align: left; }
.bz-tel a.bz-tel__num:link, .bz-tel a.bz-tel__num:visited { display: inline-block; margin: 2px 0; font-size: 26px; font-weight: 900; letter-spacing: .02em; color: var(--bz-ink); }

/* ---------- 上演スケジュールの公演ブロック ---------- */
.bz-show { display: grid; grid-template-columns: 200px minmax(0, 40em); gap: 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--bz-rule); }
.bz-shows { }
.bz-show figure { margin: 0; }
.bz-show img { display: block; width: 100%; height: auto; }

/* ---------- 上演作品のカード ---------- */
.bz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 20px; margin: 0; padding: 0; list-style: none; }
.bz-cards li { margin: 0; list-style: none; }
.bz-cards a:link, .bz-cards a:visited { display: block; color: var(--bz-ink); letter-spacing: 0; }
.bz-cards img { display: block; width: 100%; height: auto; box-shadow: 0 6px 16px rgba(60, 45, 30, .18); }
.bz-cards a:hover { opacity: 1; }
.bz-cards a:hover img { outline: 2px solid var(--bz-accent); outline-offset: 3px; }
.bz-card__date { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 500; color: var(--bz-sub); }
.bz-card__title { display: block; font-size: 14px; font-weight: 900; line-height: 1.5; }

/* ============================================================
   900px以下：タブレット・スマホ
============================================================ */
@media screen and (max-width: 900px) {
  .bz-page-title { font-size: clamp(28px, 8.5vw, 44px); }
  .bz-person, .bz-show { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* frame.css の .bz-main img { max-width:100% } より後に読まれないので .bz-main を付ける。元の画像より大きくしない */
  .bz-main .bz-person img { width: auto; max-width: min(100%, 220px); }
  .bz-main .bz-show img { width: auto; max-width: min(100%, 260px); }
  .bz-history > div { grid-template-columns: 6.5em minmax(0, 1fr); }
  .bz-plans, .bz-steps, .bz-steps--2, .bz-map { grid-template-columns: minmax(0, 1fr); }
  .bz-steps > div + div { padding-left: 0; border-left: 0; }
  .bz-ticket { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bz-ticket__aside { position: static; }
  .bz-main .bz-ticket__aside img { width: auto; max-width: min(100%, 360px); }
  .bz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}

/* スマホ（600px以下）：写真は高さ120pxにそろえて、入りきらないときだけ折り返す（本人の指示） */
@media screen and (max-width: 600px) {
  .bz-photos { --h: 120px; flex-wrap: wrap; gap: 8px; }
  .bz-photos > figure, .bz-photos > a, .bz-photos > :is(.is-tall, .is-43, .is-65, .is-34) { flex: 0 0 auto; max-width: none; }
  /* frame.css の .bz-main img { height: auto } より後に読まれないので、.bz-main を付けて優先度を上げる */
  .bz-main .bz-photos img { width: auto; height: var(--h); max-width: 100%; }
}

/* 年表と本文が続くときの間 */
.bz-history + .bz-prose, .bz-prose + .bz-history { margin-top: 18px; }

/* 画面には出さず、読み上げソフトだけに伝える文字 */
.bz-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 鑑賞サポート（consideration.html）：4つの案内をPCでは2列に ---------- */
.bz-ways--care { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 24px 0 8px; }
.bz-main .bz-care-logo img { display: block; width: 220px; max-width: 100%; height: auto; margin-top: 8px; }
@media screen and (max-width: 600px) { .bz-ways--care { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   上演作品の記録ページ（archives/2020/○○/○○.html）
============================================================ */
.bz-main .ar-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin: 8px 0 12px; }
.ar-flyers { display: flex; gap: 12px; align-items: flex-start; }
.ar-flyers a { flex: 1; min-width: 0; }
.bz-main .ar-flyers img { display: block; width: 100%; height: auto; box-shadow: 0 3px 12px rgba(0, 0, 0, .15); }
.bz-main .ar-info { margin: 0; }
.ar-info > div { padding: 8px 0; border-bottom: 1px solid var(--bz-rule); }
.ar-info dt { font-size: 11.5px; font-weight: 700; color: var(--bz-sub); }
.ar-info dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.ar-gallery { columns: 3 180px; column-gap: 10px; }
.ar-gallery a { display: block; break-inside: avoid; margin-bottom: 10px; }
.bz-main .ar-gallery img { display: block; width: auto; max-width: 100%; height: auto; }
.bz-main p.ar-note { margin-top: 4px; font-size: 12px; color: var(--bz-sub); }
.ar-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.ar-faces li { margin: 0; font-size: 12.5px; line-height: 1.4; list-style: none; }
.bz-main .ar-faces img { display: block; width: auto; max-width: 100%; height: auto; margin-bottom: 4px; }
.ar-faces__role { display: block; font-size: 11px; color: var(--bz-sub); }
.bz-main .ar-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0 0 14px; }
.ar-cast > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--bz-rule); font-size: 14px; }
.ar-cast dt { font-weight: 400; color: var(--bz-sub); }
.ar-cast dd { margin: 0; font-weight: 700; text-align: right; }
.ar-cast > .ar-cast__line { grid-column: 1 / -1; grid-template-columns: 1fr; }
.ar-cast > .ar-cast__line dd { font-weight: 400; text-align: left; color: var(--bz-sub); font-size: 13px; }
.ar-staff { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ar-staff li { list-style: none; }
.ar-pamph { display: flex; flex-wrap: wrap; gap: 12px; }
.bz-main .ar-pamph img { display: block; width: auto; max-width: min(100%, 360px); height: auto; }
@media screen and (max-width: 900px) {
  .bz-main .ar-top { grid-template-columns: minmax(0, 1fr); }
  .bz-main .ar-cast { grid-template-columns: minmax(0, 1fr); }
}
/* 「← 上演作品の一覧」：左に矢印があるので、右の → は付けない */
a.bz-rowlink.ar-back::after { content: none; }
.bz-main p.ar-cast__note { margin: 6px 0 10px; font-size: 13px; line-height: 1.7; color: var(--bz-sub); }