/*
 * イマーシブナビの見た目（2026-10-25 作り直し・同日 カツ「ダークモードはやめよう」で明るい地に）。base.css・navi.css の上から重ねる。
 *
 * 考え方：白い舞台に、照明の色が差す。
 *   地＝白・ごく薄い灰、文字＝墨色。差し色＝ライム #c8ff2e（押すところの地。文字は墨）と紫 #5b2fe0（リンク・英字の小見出し）、注意＝朱 #d9381e（まもなく終了・終了）。
 *   見出し＝Dela Gothic One（太い日本語）、英字と数字＝Anton（細長い太字）、本文＝Noto Sans JP。
 *   角は丸めない。文章のまとまりは箱に入れず、線1本と余白で区切る。文字は 15px 以上。
 *   動く演出は入れない（初めから完成した状態で見える）。
 */

:root {
  --st-bg: #ffffff;
  --st-bg2: #f4f4f7;
  --st-field: #ffffff;
  --st-line: #e2e2e8;
  --st-line2: #b9b9c4;
  --st-text: #2a2a31;
  --st-strong: #111114;
  --st-sub: #4b4b55;
  --st-lime: #c8ff2e;
  --st-lime-hover: #b3ef0a;
  --st-violet: #5b2fe0;
  --st-link: #5b2fe0;
  --st-hot: #d9381e;
  --st-display: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --st-latin: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --st-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* base.css の変数を黒地に読み替える */
  --bg: var(--st-bg);
  --text: var(--st-text);
  --text-strong: var(--st-strong);
  --text-sub: var(--st-sub);
  --line: var(--st-line);
  --panel: var(--st-bg2);
  --gray: var(--st-field);
  --blush: var(--st-line2);
  --rose: var(--st-violet);
  --sans: var(--st-sans);
}
/* 「雑誌で読む」の誌面は紙の色のまま（元の色に戻す）。縦スクロールの記事（.mag-src）は黒地のまま */
.mag-book, html.is-mag .page, .mag-measure {
  --bg: #fff; --text: #444; --text-strong: #2b2b2b; --text-sub: #555; --line: #e8e8e8; --panel: #eef2f4; --gray: #f5f5f5;
  --blush: #d5dfe6; --rose: #2f5d48;
}

body { background: var(--st-bg); color: var(--st-text); font-family: var(--st-sans); font-size: 16px; line-height: 1.85; letter-spacing: .02em; }
a { color: inherit; }
::selection { background: var(--st-lime); color: #111; }
:focus-visible { outline: 2px solid var(--st-violet); outline-offset: 2px; }

/* ================= 頭 ================= */
.site-head { background: #fff; border-bottom: 2px solid var(--st-strong); position: relative; z-index: 5; }
.site-head__main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--st-strong); }
.site-logo img { width: auto; height: 30px; }
.site-logo__name { display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__en { font-family: var(--st-latin); font-size: 15px; letter-spacing: .14em; color: var(--st-link); }
.site-logo__ja { font-family: var(--st-display); font-size: 19px; letter-spacing: .04em; color: var(--st-strong); }
.head-find {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--st-lime); color: var(--st-strong); border: 2px solid var(--st-strong);
  font-weight: 900; font-size: 15px; text-decoration: none; letter-spacing: .04em; white-space: nowrap;
}
.head-find svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.head-find:hover { background: var(--st-lime-hover); }
.head-nav {
  display: flex; gap: 22px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--st-line);
}
@media (max-width: 1023px) { .head-nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; } }
.head-nav::-webkit-scrollbar { display: none; }
.head-nav a {
  flex: none; padding: 11px 0 9px; font-size: 15px; font-weight: 700; color: var(--st-sub); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.head-nav a:hover { color: var(--st-strong); }
.head-nav a[aria-current="page"] { color: var(--st-strong); border-bottom-color: var(--st-link); }
@media (min-width: 1024px) {
  .site-head { display: flex; align-items: stretch; padding: 0 0 0 24px; }
  .site-head__main { display: contents; }
  .site-logo { order: 0; padding: 14px 0; margin-right: 36px; }
  .site-logo img { height: 34px; }
  .site-logo__ja { font-size: 21px; }
  .head-nav { order: 1; flex: 1; border-top: 0; padding: 0; gap: 28px; align-items: stretch; }
  .head-nav a { display: flex; align-items: center; padding: 0; border-bottom-width: 3px; padding-top: 3px; }
  .head-find { order: 2; padding: 0 28px; font-size: 16px; }
}

/* ================= 本体の枠 ================= */
.layout { padding-top: 28px; }
.layout--wide { grid-template-columns: minmax(0, 1fr); width: min(1180px, calc(100% - 32px)); gap: 0; }
@media (max-width: 1023px) { .layout { width: calc(100% - 32px); } }
.crumbs { font-size: 15px; color: var(--st-sub); max-width: none; margin: 0 0 18px; }
.crumbs a { color: var(--st-sub); }
.crumbs a:hover { color: var(--st-link); }
.layout--wide .crumbs, .layout--wide .list-head { max-width: none; }

/* 見出しの組（英字の小見出し＋太い日本語） */
.sec-head { margin: 0 0 14px; }
.sec-head__en { margin: 0; font-family: var(--st-latin); font-size: 15px; letter-spacing: .16em; color: var(--st-violet); line-height: 1.4; }
.sec-head__title { margin: 2px 0 0; font-family: var(--st-display); font-weight: 400; font-size: 25px; line-height: 1.35; color: var(--st-strong); letter-spacing: .02em; }
.sec-head__sub { margin: 2px 0 0; font-size: 15px; color: var(--st-sub); }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sec-head__more, .more-link { font-size: 15px; font-weight: 700; color: var(--st-link); text-decoration: none; white-space: nowrap; }
.sec-head__more::after, .more-link::after { content: " →"; }
.sec-head__more:hover, .more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-link { display: inline-block; margin-top: 12px; white-space: normal; }
@media (min-width: 1024px) { .sec-head__title { font-size: 32px; } }

/* ================= トップの最初の画面 ================= */
.hero {
  background:
    radial-gradient(60% 85% at 95% 0%, rgba(91, 47, 224, .07), transparent 62%),
    radial-gradient(50% 75% at 0% 100%, rgba(200, 255, 46, .16), transparent 62%),
    var(--st-bg);
  border-bottom: 1px solid var(--st-line);
}
.hero__inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 28px; }
.hero__kicker { margin: 0; font-family: var(--st-latin); font-size: 15px; letter-spacing: .24em; color: var(--st-violet); }
.hero__title { margin: 6px 0 12px; font-family: var(--st-display); font-size: clamp(34px, 9.4vw, 84px); line-height: 1.22; color: var(--st-strong); letter-spacing: .02em; }
.hero__title br + * , .hero__title { word-break: keep-all; }
.hero__lead { margin: 0 0 20px; max-width: 40em; font-size: 15px; line-height: 1.8; color: var(--st-sub); }
.finder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finder__f { display: flex; flex-direction: column; min-width: 0; background: var(--st-field); border: 2px solid var(--st-strong); padding: 6px 12px 4px; }
.finder__f:focus-within { border-color: var(--st-strong); }
.finder__k { font-size: 15px; font-weight: 700; color: var(--st-link); line-height: 1.4; }
.finder select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; border: 0; border-radius: 0; padding: 2px 22px 4px 0; margin: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b2fe0' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0 center / 16px no-repeat;
  color: var(--st-strong); font: 700 17px/1.5 var(--st-sans); cursor: pointer; text-overflow: ellipsis;
}
.finder select:focus { outline: none; }
.finder option { background: #fff; color: #111; }
.finder__go {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 0;
  background: var(--st-lime); color: var(--st-strong); border: 2px solid var(--st-strong); font: 900 18px/1 var(--st-sans); letter-spacing: .06em; cursor: pointer;
}
.finder__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.finder__go:hover { background: var(--st-lime-hover); }
@media (min-width: 760px) {
  .hero__inner { padding: 56px 0 52px; }
  .hero__lead { font-size: 17px; margin-bottom: 28px; }
  .finder { grid-template-columns: 1fr 1fr auto; gap: 0; max-width: 900px; }
  .finder__f { padding: 10px 18px 8px; }
  .finder__f + .finder__f { border-left: 0; }
  .finder__go { border-left: 0; }
  .finder__go { grid-column: auto; padding: 0 34px; min-height: 0; }
}

/* ================= 日付で選んだ一覧（トップ） ================= */
.when-cols { display: grid; gap: 36px; }
.when-note { margin: 18px 0 0; font-size: 15px; color: var(--st-sub); line-height: 1.8; }
@media (min-width: 1024px) {
  .when-cols { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 56px; }
}

/* ================= 公演のカード ================= */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--st-line); }
.pitem {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; align-content: start;
  padding: 14px 0; border-bottom: 1px solid var(--st-line); text-decoration: none; color: var(--st-text); overflow: visible;
}
.pitem > .ev-img, .pitem > .ev-art { grid-row: 1 / span 4; align-self: start; }
.pitem .ev-badges { margin: 0 0 4px; }
.pitem__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--st-strong); }
.pitem__meta { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--st-sub); }
.pitem__price { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--st-text); }
.pitem:hover .pitem__title { color: var(--st-link); }
@media (min-width: 700px) {
  .pgrid:not(.pgrid--rows) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px 22px; border-top: 0; }
  .pgrid:not(.pgrid--rows) .pitem { display: flex; flex-direction: column; padding: 0; border-bottom: 0; }
  .pgrid:not(.pgrid--rows) .pitem .ev-badges { margin: 12px 0 4px; }
  .pgrid--rows .pitem { grid-template-columns: 168px minmax(0, 1fr); column-gap: 18px; }
}
/* 画像と代わりの絵 */
.ev-img { background: #ececf1; }
.pitem .ev-img, .pitem .ev-art { aspect-ratio: 1200 / 630; width: 100%; }
.ev-art { color: var(--st-lime); background: radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .12), transparent 45%), linear-gradient(140deg, var(--g), color-mix(in srgb, var(--g) 45%, #000)); }
.ev-art__genre { font-family: var(--st-latin); font-size: 15px; letter-spacing: .16em; color: #fff; }
.pitem .ev-art__genre { display: none; }
.pitem .ev-art { height: auto; min-height: 0; overflow: hidden; }
.pitem .ev-art svg { width: 16%; height: auto; max-width: 56px; }
@media (max-width: 699px) { .pitem .ev-art svg { width: 26%; } }
.evp--ended > .ev-badges { display: none; }

/* 状態の札 */
.ev-badges { gap: 6px; }
.ev-badge { padding: 0 8px; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; border: 1px solid var(--st-line2); background: transparent; color: var(--st-text); }
.ev-badge--now { background: var(--st-lime); border-color: var(--st-strong); color: var(--st-strong); }
.ev-badge--soon { background: var(--st-violet); border-color: var(--st-violet); color: #fff; }
.ev-badge--last { background: var(--st-hot); border-color: var(--st-hot); color: #fff; }
.ev-badge--ended { background: #55555f; border-color: #55555f; color: #fff; }

/* ================= 地域・ジャンルの文字リンク（トップ） ================= */
.find-cols { display: grid; gap: 36px; margin-top: 48px; }
@media (min-width: 900px) { .find-cols { grid-template-columns: 1fr 1fr; gap: 56px; } }
.linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-line); }
.linklist li { border-bottom: 1px solid var(--st-line); }
.linklist__main { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; text-decoration: none; }
.linklist__name { font-size: 17px; font-weight: 700; color: var(--st-strong); }
.linklist__n { margin-left: auto; font-size: 15px; color: var(--st-sub); white-space: nowrap; }
.linklist__n::after { content: "→"; margin-left: 10px; color: var(--st-link); }
.linklist__main:hover .linklist__name { color: var(--st-link); }
.linklist__sub { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -4px 0 0; padding: 0 0 12px; font-size: 15px; }
.linklist__sub a { color: var(--st-sub); text-decoration: underline; text-decoration-color: var(--st-line2); text-underline-offset: 4px; }
.linklist__sub a:hover { color: var(--st-link); }

/* ================= 読みもの・ニュース（トップ） ================= */
.reads { margin-top: 52px; }
.reads__row { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--st-line2) transparent; }
.read { display: block; scroll-snap-align: start; text-decoration: none; }
.read__img { display: block; background: #ececf1; }
.read__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.read__cat { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--st-link); }
.read__title { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--st-strong); }
.read:hover .read__title { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 760px) { .reads__row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: 28px 22px; } }

/* ================= 公演の一覧 ================= */
.list-head { margin: 0 0 16px; }
.list-head h1 { margin: 0 0 8px; font-family: var(--st-display); font-weight: 400; font-size: 27px; line-height: 1.35; color: var(--st-strong); }
.list-head p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--st-sub); max-width: 52em; }
@media (min-width: 1024px) { .list-head h1 { font-size: 38px; } }
/* 絞り込みは1行に畳む */
.ev-filter { margin: 0 0 4px; border-top: 1px solid var(--st-line2); border-bottom: 1px solid var(--st-line2); }
.ev-filter__sum { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.ev-filter__sum::-webkit-details-marker { display: none; }
.ev-filter__n { font-family: var(--st-latin); font-size: 22px; letter-spacing: .04em; color: var(--st-link); line-height: 1.2; }
.ev-filter__cur { min-width: 0; font-size: 15px; font-weight: 700; color: var(--st-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-filter__open { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--st-line2); font-size: 15px; font-weight: 700; color: var(--st-strong); }
.ev-filter__open::after { content: ""; width: 8px; height: 8px; border: solid var(--st-violet); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ev-filter[open] .ev-filter__open::after { transform: translateY(2px) rotate(-135deg); }
.ev-filter__body { padding: 4px 0 8px; }
.ev-filter__row { gap: 8px; padding: 10px 0; border-bottom: 0; border-top: 1px solid var(--st-line); }
.ev-filter__label { width: 100%; font-size: 15px; font-weight: 700; color: var(--st-sub); }
.ev-filter__chip { padding: 4px 12px; border: 1px solid var(--st-line2); font-size: 15px; color: var(--st-text); background: transparent; }
.ev-filter__chip span { color: var(--st-sub); }
.ev-filter__chip:hover { background: var(--st-bg2); }
.ev-filter__chip.is-on { background: var(--st-lime); border-color: var(--st-strong); color: var(--st-strong); font-weight: 700; }
.ev-filter__chip.is-on span { color: var(--st-strong); }
.ev-filter__chip.is-on:hover { background: var(--st-lime-hover); }
.ev-filter + .pgrid { margin-top: 0; border-top: 0; }
@media (min-width: 700px) { .ev-filter + .pgrid:not(.pgrid--rows) { margin-top: 24px; } }
.ev-empty { padding: 20px 0; background: none; border-bottom: 1px solid var(--st-line); font-size: 15px; }
.ev-note, .ev-back { font-size: 15px; color: var(--st-sub); }
.ev-back a { color: var(--st-link); }
.ev-prefs { margin: 44px 0 28px; }
.ev-prefs__table th { color: var(--st-sub); font-size: 15px; }
.ev-prefs__table td a { color: var(--st-strong); }
.ev-prefs__note { font-size: 15px; color: var(--st-sub); }
.block { margin-bottom: 44px; }
.block > .pgrid + .ev-ended { margin-top: 44px; }
.ev-ended { margin-top: 48px; }
.block__title { font-family: var(--st-display); font-weight: 400; font-size: 23px; line-height: 1.4; color: var(--st-strong); margin: 0 0 14px; }
.block__more { font-size: 15px; font-weight: 700; color: var(--st-link); }
.block__row { gap: 12px; }

/* よくある質問 */
.qa__q::before, .qa__a::before { font-family: var(--st-latin); font-weight: 400; color: var(--st-link); }
.nart .qa, .list-faq .qa { border-bottom: 1px solid var(--st-line); }
.nart .qa__q, .list-faq .qa__q { color: var(--st-strong); font-size: 16px; }
.nart .qa__a, .list-faq .qa__a { color: var(--st-text); font-size: 15px; }

/* ================= 公演1件 ================= */
.nart { max-width: none; }
.nart__cat { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.nart__cat a { color: var(--st-link); }
.nart__cat a + a { color: var(--st-sub); }
.nart__title { font-family: var(--st-display); font-weight: 400; font-size: 27px; line-height: 1.4; color: var(--st-strong); letter-spacing: .02em; }
@media (min-width: 1024px) { .nart__title { font-size: 34px; } }
.nart h2 { font-family: var(--st-display); font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--st-strong); margin: 2em 0 .7em; }
.nart p { color: var(--st-text); }
.evp .ev-badges { margin: 10px 0 0; }
.evp-top { margin: 18px 0 0; }
.evp-facts__h { margin: 0 0 4px !important; font-family: var(--st-sans) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--st-sub) !important; letter-spacing: .04em; }
.ev-info { grid-template-columns: 6.5em 1fr; font-size: 15px; border-top: 1px solid var(--st-line); }
.ev-info dt, .ev-info dd { border-bottom: 1px solid var(--st-line); padding: 11px 2px; }
.ev-info dt { color: var(--st-sub); font-weight: 700; }
.ev-info dd { color: var(--st-text); }
.ev-info small { display: block; font-size: 15px; color: var(--st-sub); line-height: 1.7; }
.ev-info--key { margin: 0 0 18px; border-top-color: var(--st-line2); }
.ev-info--key strong { display: block; font-size: 18px; font-weight: 700; color: var(--st-strong); line-height: 1.5; }
.ev-cta { margin: 0 0 24px; }
.ev-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 12px; margin-bottom: 10px; font-size: 17px; font-weight: 900; letter-spacing: .04em; }
.ev-cta__main { background: var(--st-lime); color: var(--st-strong); border: 2px solid var(--st-strong); }
.ev-cta__main::after { content: "→"; }
.ev-cta__main:hover { background: var(--st-lime-hover); }
.ev-cta__sub { border: 2px solid var(--st-strong); color: var(--st-strong); background: transparent; }
.ev-cta__sub:hover { background: var(--st-bg2); }
.ev-cta__note { font-size: 15px; color: var(--st-sub); line-height: 1.7; }
.evp-fig .ev-img--hero, .evp-fig .ev-art--hero { margin: 0 0 6px; }
.ev-img--hero { background: none; }
.ev-img--hero img { max-height: 420px; }
.ev-art--hero { aspect-ratio: 1200 / 630; }
.ev-img-credit { margin: 0 0 8px; font-size: 15px; color: var(--st-sub); line-height: 1.6; }
@media (min-width: 900px) {
  .evp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .ev-img--hero img { max-height: 460px; }
}
/* 終わった公演 */
.evp-end { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px !important; }
.evp-end__flag { display: inline-block; padding: 2px 14px; background: var(--st-hot); color: #fff; font-family: var(--st-display); font-size: 22px; line-height: 1.4; letter-spacing: .1em; }
.evp-end__text { font-size: 15px; font-weight: 700; color: var(--st-strong); }
.evp--ended .nart__title { color: var(--st-sub); }
.evp-alt { margin: 22px 0 8px; padding: 0; }
.evp-alt h2 { margin: 0 0 10px !important; font-size: 19px !important; }
.evp-alt__more { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0 !important; font-size: 15px; font-weight: 700; }
.evp-alt__more a { color: var(--st-link); text-decoration: none; }
.evp-alt__more a::after { content: " →"; }
.evp--ended .evp-top { opacity: 1; }
.evp--ended .ev-img--hero img { max-height: 300px; }
.nart__label { font-size: 15px; color: var(--st-strong); }
.nart__links { font-size: 15px; }
.nart__links a, .nart__note a, .nart a:not([class]) { color: var(--st-link); }
.nart__note { font-size: 15px; color: var(--st-sub); border-top-color: var(--st-line); }

/* ================= 記事の本文（コラム・記事） ================= */
.col-body h2 { font-family: var(--st-display); font-weight: 400; color: var(--st-strong); border-bottom-color: var(--st-link); }
.col-body a { color: var(--st-link); }
.nart.col .nart__fig img { background: #ececf1; }
.nart__fig figcaption { font-size: 15px; }
.nart__short, .nart__src, .nart__quote { background: var(--st-bg2); }
.disclose { background: var(--st-bg2); font-size: 15px !important; }
.nart .insh { background: var(--st-bg2); }
.nart .insh__label span, .nart code { font-size: 15px; }
.nart code { background: var(--st-field); }
.about-dl dd { border-left-color: var(--st-line2); }

/* ================= 右の列 ================= */
.sidebar { font-size: 15px; }
.side-box { border-top: 2px solid var(--st-strong); }
.side-title { font-family: var(--st-display); font-weight: 400; font-size: 18px; color: var(--st-strong); }
.side-about { background: var(--st-bg2); border-top: 0; }
.side-about p { font-size: 15px; color: var(--st-text); }
.side-btn { background: var(--st-lime); color: var(--st-strong); font-weight: 900; font-size: 15px; }
.side-btn:hover { background: var(--st-lime-hover); }
.side-link { font-size: 15px; color: var(--st-link); }
.side-cats a { color: var(--st-strong); }
.side-cats__n { font-size: 15px; color: var(--st-sub); }
.side-art, .side-item { font-size: 15px; color: var(--st-strong); grid-template-columns: 96px 1fr; }
.side-art .ev-img, .side-item .ev-img, .side-art .ev-art, .side-item .ev-art { width: 96px; height: auto; aspect-ratio: 1200 / 630; }
.side-item small { font-size: 15px; color: var(--st-sub); }

/* ================= 足 ================= */
.site-foot { background: var(--st-bg2); color: var(--st-sub); font-size: 15px; border-top: 2px solid var(--st-strong); }
.foot-map__cat { font-size: 15px; color: var(--st-strong); }
.foot-map a { color: var(--st-sub); }
.foot-map a:hover { color: var(--st-link); }
.site-foot__copy { font-family: var(--st-latin); letter-spacing: .14em; }

/* お問い合わせの欄 */
.cf-field input, .cf-field select, .cf-field textarea { background: var(--st-field); color: var(--st-strong); border-color: var(--st-line2); }
.cf-field em { background: var(--st-lime); color: var(--st-strong); font-size: 15px; }
.cf-alert { background: var(--st-bg2); }
.cf-actions .ev-cta__sub { background: transparent; }
.cf-field { font-size: 15px; }
.rel__cat { font-size: 15px; color: var(--st-link); background: none; padding: 0; letter-spacing: .04em; font-weight: 700; } .rel__title { color: var(--st-strong); } .rel { border-color: var(--st-line); }

.evp-alt__sub { margin: -4px 0 10px !important; font-size: 15px; color: var(--st-sub) !important; }
@media (min-width: 1200px) { .layout--wide .pgrid:not(.pgrid--rows) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; } }

/* ================= 記事（縦スクロール・.mag-src）================= */
html:not(.is-mag) .mag-src .cover__kicker { font-size: 15px; font-weight: 700; color: var(--st-link); }
html:not(.is-mag) .mag-src .cover__title { font-family: var(--st-display); font-weight: 400; font-size: 25px; line-height: 1.45; color: var(--st-strong); }
html:not(.is-mag) .mag-src .cover__meta { font-size: 15px; color: var(--st-sub); }
html:not(.is-mag) .mag-src .mp-flow h2 { font-family: var(--st-display); font-weight: 400; font-size: 21px; line-height: 1.5; color: var(--st-strong); }
html:not(.is-mag) .mag-src .mp-flow h3 { font-size: 17px; color: var(--st-link); }
html:not(.is-mag) .mag-src .mp-flow strong { color: var(--st-strong); background: linear-gradient(transparent 60%, rgba(200, 255, 46, .8) 60%); }
html:not(.is-mag) .mag-src .mp-flow a { color: var(--st-link); }
html:not(.is-mag) .mag-src .insh { background: var(--st-bg2); }
html:not(.is-mag) .mag-src .insh__label { font-size: 15px; color: var(--st-strong); }
html:not(.is-mag) .mag-src .insh__label span { font-size: 15px; color: var(--st-sub); }
html:not(.is-mag) .mag-src table { font-size: 15px; }
html:not(.is-mag) .mag-src tr:first-child th { background: var(--st-field); }
html:not(.is-mag) .mag-src .sec-head { font-family: var(--st-display); font-weight: 400; font-size: 21px; color: var(--st-strong); }
html:not(.is-mag) .mag-src .sec-head span { font-family: var(--st-latin); font-weight: 400; font-size: 15px; letter-spacing: .16em; color: var(--st-violet); }
html:not(.is-mag) .mag-src .srcs { font-size: 15px; }
html:not(.is-mag) .mag-src .note { background: var(--st-bg2); }
.srcs__chk, .rel__date { font-size: 15px; color: var(--st-sub); }
html:not(.is-mag) .mag-src > .mp--back { background: var(--st-bg2); }
html:not(.is-mag) .mag-src .back__label { font-size: 15px; }
html:not(.is-mag) .mag-src .back__next, html:not(.is-mag) .mag-src .back__links, html:not(.is-mag) .mag-src .back__note { font-size: 15px; }
html:not(.is-mag) .mag-src .back__shop { background: var(--st-lime); color: var(--st-strong); font-weight: 900; font-size: 15px; }
.mag-switch__btn { background: var(--st-field); border-color: var(--st-line2); color: var(--st-strong); font-size: 15px; }
.mag-switch__btn small { font-size: 15px; color: var(--st-sub); }
.mag-switch__btn:hover { background: var(--st-bg2); }
.cf-agree { font-size: 15px; }
.cf .ev-cta__main, .cf .ev-cta__sub, .cf-btn { font-size: 16px; }
/* まとめは箱にせず、上下の線で区切る */
html:not(.is-mag) .mag-src .insh, .nart .insh { background: none; padding: 16px 0; border-top: 2px solid var(--st-strong); border-bottom: 1px solid var(--st-line2); }
/* スマホでは右の列（本文の下に回る）の公演の一覧を出さない。本文の「ほかの公演」と足もとのリンクと重なるため（縦を短く） */
@media (max-width: 1023px) { .sidebar > .side-box:has(.side-art), .sidebar .side-sticky { display: none; } }
.nart .insh__label { font-size: 15px; }

/* ================= 最初の画面を短く（2026-10-25 カツ「もっと見やすく、縦を短く」） ================= */
.hero__inner { padding: 16px 0 18px; }
.hero__kicker { font-size: 15px; letter-spacing: .2em; }
.hero__title { margin: 2px 0 6px; font-size: clamp(28px, 8vw, 50px); line-height: 1.25; }
.hero__lead { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }
.finder__f { padding: 4px 12px 2px; }
.finder select { font-size: 16px; padding: 0 22px 2px 0; }
.finder__go { min-height: 50px; font-size: 17px; }
@media (min-width: 760px) {
  .hero__inner { padding: 24px 0 26px; }
  .hero__title { font-size: 46px; white-space: nowrap; }
  .sp-br { display: none; }
  .hero__lead { margin-bottom: 16px; font-size: 16px; }
  .finder__f { padding: 6px 16px 4px; }
  .finder__go { min-height: 0; }
}
.layout--wide { padding-top: 24px; }

/* ================= 公演ページの画像（2026-10-25 複数枚・縦横比を切らない） ================= */
@media (min-width: 900px) {
  .evp-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .evp-fig { order: -1; }
}
.gal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; align-items: flex-start; scrollbar-width: thin; scrollbar-color: var(--st-line2) transparent; }
.gal__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; min-width: 0; }
.gal__zoom { display: flex; justify-content: center; align-items: center; background: #ececf1; cursor: zoom-in; }
.gal__zoom img { width: auto; height: auto; max-width: 100%; max-height: min(70vh, 560px); }
@media (min-width: 900px) { .gal__zoom img { max-height: min(calc(100vh - 140px), 760px); } }
.gal__slide .ev-img-credit { margin: 6px 0 0; }
.gal__no { display: inline-block; margin-right: 8px; font-family: var(--st-latin); letter-spacing: .06em; color: var(--st-strong); }
.gal__thumbs { display: flex; gap: 8px; margin: 10px 0 8px; overflow-x: auto; padding-bottom: 4px; }
.gal__thumb { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; color: var(--st-sub); font-size: 15px; font-weight: 700; }
.gal__thumb img { height: 72px; width: auto; max-width: 140px; object-fit: contain; background: #ececf1; border: 2px solid transparent; }
.gal__thumb[aria-current="true"] img { border-color: var(--st-strong); }
.gal__thumb[aria-current="true"] { color: var(--st-strong); }
.gal-lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 14, .94); color: #fff; }
.gal-lb::backdrop { background: rgba(10, 10, 14, .6); }
.gal-lb__fig { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 56px 12px 72px; }
.gal-lb__fig img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; }
.gal-lb__fig figcaption { font-size: 15px; color: #e9e9ee; text-align: center; }
.gal-lb button { position: absolute; border: 2px solid #fff; background: #111114; color: #fff; font: 700 15px/1 var(--st-sans); padding: 10px 14px; cursor: pointer; border-radius: 0; }
.gal-lb__close { top: 10px; right: 10px; }
.gal-lb__prev { bottom: 14px; left: 12px; }
.gal-lb__next { bottom: 14px; right: 12px; }
/* 一覧・トップの小さな画像は、画像の元の縦横比のまま（2026-10-25 カツ「9:16は9:16で出るように」）。
   切らない・灰色の帯を作らない。幅を決めて高さは比率なり。縦長は高さに上限を付けて、そのぶん幅が細くなる（列の左にそろえる）。
   縦横比は img の width・height（保存した画像の実寸＝og_w・og_h）から。代わりの絵（.ev-art）は今のまま */
.pitem .ev-img { aspect-ratio: auto; height: auto; background: none; }
.pitem .ev-img img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
.pitem .ev-img--tall img { width: auto; max-width: 100%; max-height: 190px; }
@media (min-width: 700px) {
  .pgrid:not(.pgrid--rows) .pitem .ev-img--tall img { max-height: 320px; }
  .pgrid--rows .pitem .ev-img--tall img { max-height: 230px; }
}
/* 縦長の画像で行が高くなっても、文字は上に詰めて並べる */
.pitem { grid-template-rows: auto auto auto auto 1fr; }
.pitem > .ev-img, .pitem > .ev-art { grid-row: 1 / span 5; }

/* ================= 頭を固定（2026-10-25）・上に戻る ================= */
.site-head { position: sticky; top: 0; z-index: 50; }
html { scroll-padding-top: 116px; }
@media (min-width: 1024px) { html { scroll-padding-top: 84px; } }
@media (max-width: 1023px) {
  .site-head__main { padding: 8px 16px; }
  .site-logo img { height: 26px; }
  .site-logo__en { font-size: 15px; }
  .site-logo__ja { font-size: 17px; }
  .head-find { padding: 8px 12px; }
  .head-nav a { padding: 8px 0 6px; }
}
.totop {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: none; align-items: center; gap: 6px; padding: 10px 14px; background: #fff; color: var(--st-strong);
  border: 2px solid var(--st-strong); font-weight: 900; font-size: 15px; text-decoration: none;
}
.totop.is-on { display: inline-flex; }
.totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.totop:hover, .totop:focus-visible { background: var(--st-lime); }
/* PC の幅が狭いとき（1024〜1199px）は頭のメニューの間を詰めて1行に収める */
@media (min-width: 1024px) and (max-width: 1199px) { .head-nav { gap: 16px; } .site-logo { margin-right: 20px; } }

/* ================= 記事のアイキャッチは 16:9（2026-10-25 カツ）。公演の画像（チラシ）は元の比率のまま ================= */
.read__img img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.rel { grid-template-columns: 160px 1fr; }
.rel__img { width: 160px; height: 90px; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
@media (max-width: 760px) { .rel { grid-template-columns: 128px 1fr; } .rel__img { width: 128px; height: 72px; } }
html:not(.is-mag) .mag-src .cover__img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }

/* 日付・地域・ジャンルの3列（PC） */
@media (min-width: 1024px) { .find-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
@media (min-width: 760px) and (max-width: 1023px) { .find-cols { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* 読みものの分類のタブ（文字・四角） */
.read-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--st-line2); }
.read-tabs a { display: inline-flex; gap: 6px; padding: 6px 14px; border: 1px solid var(--st-line2); font-size: 15px; font-weight: 700; color: var(--st-text); text-decoration: none; }
.read-tabs a span { color: var(--st-sub); font-weight: 400; }
.read-tabs a[aria-current="page"] { background: var(--st-lime); border-color: var(--st-strong); color: var(--st-strong); }
.read-tabs a:hover { background: var(--st-bg2); }
.layout--wide .rels { max-width: none; display: grid; gap: 0 40px; }
@media (min-width: 900px) { .layout--wide .rels { grid-template-columns: 1fr 1fr; } }
.rel { border-bottom: 1px solid var(--st-line); }
/* スマホのメニューは5項目が1行に収まるように詰める（はみ出さないので端のぼかしは外す） */
@media (max-width: 1023px) { .head-nav { gap: 10px; padding: 0 14px; justify-content: space-between; -webkit-mask-image: none; mask-image: none; } }
.gal__track { align-items: flex-start; }

/* ================= ロゴとメインカラー（2026-10-25） =================
 * メインカラー＝紫 #5b2fe0（白地 7.17:1・薄い灰 #f4f4f7 の地 6.53:1・ライムの上 6.08:1＝どれも 4.5:1 以上）。
 * ロゴ・見出し（h1・h2）・英字の小見出し・メニューの選択中の線に使う。ライムは押す所の地（文字は墨 15.98:1）、朱は終了の札（白い字 4.63:1）。 */
:root { --st-main: #5b2fe0; }
.site-logo img.site-logo__mark { width: 44px; height: 44px; }
.site-logo__en { color: var(--st-main); }
@media (min-width: 1024px) { .site-logo img.site-logo__mark { width: 48px; height: 48px; } .site-logo { padding: 10px 0; } }
.side-about__logo { width: 88px; height: 88px; }
.head-nav a[aria-current="page"] { border-bottom-color: var(--st-main); }
.sec-head__title, .list-head h1, .nart__title, .nart h2, .block__title, .side-title,
html:not(.is-mag) .mag-src .cover__title, html:not(.is-mag) .mag-src .mp-flow h2, html:not(.is-mag) .mag-src .sec-head { color: var(--st-main); }
.hero__title { color: var(--st-strong); }
.hero__title .hero__em { color: var(--st-main); }
.evp--ended .nart__title { color: var(--st-sub); }

/* ================= 主催者の方へ・主催者からのおすすめ（2026-11-03） =================
 * PR の札は見出しの頭に、本文と同じ大きさで置く（消費者庁 ステマの運用基準 p.8〜9：末尾・小さい字は不明瞭）。
 * 「PR」＝紫の地に白（7.17:1）、「主催者提供」＝白地に墨の線。箱にせず、上下の線で編集部の文と分ける */
.pr-tag { display: inline-block; padding: 0 10px; font-size: 16px; font-weight: 700; line-height: 1.7; letter-spacing: .06em; background: var(--st-main); color: #fff; border: 1px solid var(--st-main); }
.pr-tag--by { background: transparent; color: var(--st-strong); border-color: var(--st-strong); }
.pr-box__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.pr-box { margin: 32px 0; padding: 18px 0; border-top: 3px solid var(--st-main); border-bottom: 1px solid var(--st-line2); }
.nart .pr-box__h { margin: 0 0 8px; }
.pr-box__note { font-size: 15px; color: var(--st-sub); margin: 0 0 12px; }
.pr-box__body { font-size: 16px; line-height: 1.9; color: var(--st-text); }
.pr-sec { margin-top: 40px; padding-top: 18px; border-top: 3px solid var(--st-main); }
.org-link { margin: 14px 0 0; font-size: 15px; }
.org-link a { color: var(--st-link); font-weight: 700; }
.org-lead { font-size: 16px; }
.org-steps { padding-left: 1.4em; }
.org-steps li { margin: 4px 0; }
.org-url { overflow-wrap: anywhere; }
.cf-help { font-size: 14px; color: var(--st-sub); }
.cf-set { margin: 0; padding: 14px 0 4px; border: 0; border-top: 1px solid var(--st-line2); display: flex; flex-direction: column; gap: 10px; }
.cf-set legend { padding: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--st-strong); }
.cf-agree { display: block; line-height: 1.7; }
.cf-req { font-style: normal; font-size: 13px; margin-left: 8px; padding: 0 6px; background: var(--st-lime); color: var(--st-strong); }