/* 活動・公演の個別ページ（/events/xxx）。一段組み：ポスター → タイトル → 公演概要 → 出演者 → アクセス → 注意事項 */
.ev { padding: clamp(24px, 3vw, 32px) 0 clamp(64px, 9vw, 110px); line-break: strict; }
.ev-wrap { width: min(100% - 44px, 680px); margin-inline: auto; }

/* ポスター：スマホは本文幅いっぱい。PC・タブレットは画面の高さに合わせ、最初の画面でポスター全体が見えるようにする。
   165px ＝ ヘッダー・上の余白・キャプションと余白の高さ、800 / 1129 ＝ ポスターの縦横比 */
.ev-poster { margin: 0 auto; width: 100%; }
@media (min-width: 725px) {
  .ev-poster { width: clamp(280px, calc((100vh - 165px) * 800 / 1129), 100%); }
  .ev-poster { width: clamp(280px, calc((100svh - 165px) * 800 / 1129), 100%); }
}
.ev-poster a { display: block; cursor: zoom-in; }
.ev-poster img { display: block; width: 100%; height: auto; border-radius: 3px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.ev-poster figcaption, .ev-map figcaption { margin-top: 10px; text-align: center; font-size: .74rem; color: var(--ink-faint); }

/* アクセスの地図（略図 SVG） */
.ev-map { width: min(100%, 520px); margin: 18px auto 0; }
.ev-map a { display: block; cursor: zoom-in; }
.ev-map img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }

/* ポスター・地図の拡大表示（event-page.js）。最初は全体、画像を押すと大きく（スクロールで移動）、もう一度押すと戻る */
.ev-lightbox { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; overflow: auto; overscroll-behavior: contain; }
.ev-lightbox[open] { display: flex; }
.ev-lightbox::backdrop { background: rgb(8, 9, 20); }
.ev-lb-img { flex: none; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 3px; cursor: zoom-in; }
.ev-lightbox.is-zoomed .ev-lb-img { max-width: none; max-height: none; width: clamp(900px, 100%, 1600px); cursor: zoom-out; }
.ev-lb-close {
  position: fixed; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.ev-lb-close:hover { background: rgba(0, 0, 0, .85); }
.ev-lb-open { overflow: hidden; }

.ev-title { text-align: center; margin: clamp(28px, 4.5vw, 40px) 0 clamp(40px, 6vw, 56px); }
.ev-pre { font-family: var(--f-mincho); font-size: .86rem; letter-spacing: .12em; color: var(--ink-soft); }
.ev-title h1 { font-size: clamp(1.3rem, 6vw, 2.05rem); line-height: 1.6; letter-spacing: .08em; margin-top: 6px; }

/* 短い情報（タイトル・表・役名）は語の途中で改行しない。改行は空白・句読点・括弧・<wbr> の位置で */
.ev-title, .ev-info td, .ev-roles { word-break: keep-all; overflow-wrap: anywhere; }
.ev-sec p, .ev-notes li, .ev-info .ev-note { text-wrap: pretty; }

.ev-sec + .ev-sec { margin-top: clamp(44px, 6vw, 60px); }
.ev-sec h2 { font-size: 1.12rem; letter-spacing: .14em; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(214, 175, 120, .45); }
.ev-sec p { color: var(--ink-soft); }
.ev-sec a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.ev-sec a:hover { color: var(--sakura-bright); }

.ev-info { width: 100%; border-collapse: collapse; }
.ev-info th, .ev-info td { padding: 13px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; text-align: left; }
.ev-info th { width: 6.5em; font-weight: 500; font-size: .86rem; letter-spacing: .12em; color: var(--gold); padding-top: 15px; }
.ev-info td { color: var(--ink); }
.ev-info .ev-note { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-soft); word-break: normal; }

.ev-cast { list-style: none; margin: 0; padding: 0; }
.ev-cast li { display: flex; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.ev-cast img { width: 104px; height: 104px; flex: none; border-radius: 50%; object-fit: cover; }
.ev-kana { font-size: .72rem; letter-spacing: .16em; color: var(--ink-faint); }
.ev-name { font-family: var(--f-mincho); font-size: 1.32rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.ev-roles { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; line-height: 1.75; color: var(--ink-soft); }
.ev-roles li { display: block; padding: 0; border: 0; }

.ev-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 20px; }

.ev-sec h3 { margin-top: 20px; font-size: .95rem; letter-spacing: .1em; color: var(--ink); }
.ev-sec h2 + h3 { margin-top: 14px; }
.ev-notes { margin: 10px 0 0; padding-left: 1.2em; color: var(--ink-soft); font-size: .92rem; list-style: disc; }
.ev-notes li + li { margin-top: 4px; }
.ev-notes li::marker { color: var(--gold); }
.ev-nowrap { white-space: nowrap; }

.ev-back { margin-top: clamp(48px, 7vw, 72px); text-align: center; font-size: .9rem; }
.ev-back a { color: var(--ink-soft); }
.ev-back a:hover { color: var(--gold); }

@media (max-width: 720px) {
  .ev-info th { width: 5.2em; }
  .ev-cast li { gap: 16px; }
  .ev-cast img { width: 84px; height: 84px; }
  .ev-name { font-size: 1.18rem; }
  .ev-roles { font-size: .82rem; }
}
/* 狭い画面の公演概要は、項目名を上・内容を下に置き、内容に行の幅を全部使う */
@media (max-width: 560px) {
  .ev-info, .ev-info tbody, .ev-info tr, .ev-info th, .ev-info td { display: block; width: auto; }
  .ev-info tr { padding: 12px 0 13px; border-bottom: 1px solid var(--line-2); }
  .ev-info th, .ev-info td { padding: 0; border: 0; }
  .ev-info th { font-size: .76rem; }
}
@media (max-width: 400px) {
  .ev-cast li { gap: 14px; }
  .ev-cast img { width: 72px; height: 72px; }
}