/*
 * 小劇場界隈だけの部品（イマーシブナビの base.css・navi.css・stage.css に無いもの）。色と線はイマーシブナビの変数をそのまま使う。
 */

/* 写真の無い読みものの札（柱の名前）。色は募集の種類の絵と同じ系統 */
.noimg--michi { background: #2b2f4a; }
.noimg--okane { background: #23404a; }
.noimg--fan   { background: #4a2b33; }
.noimg--koe   { background: #4a3b26; }
.noimg--news  { background: #33333d; }
.read__img.noimg { display: grid; place-items: center; aspect-ratio: 16 / 9; font-family: var(--st-display); font-size: 18px; letter-spacing: .04em; color: var(--st-lime); padding: 0 12px; }
.rel__img.noimg { font-family: var(--st-display); font-size: 15px; color: var(--st-lime); padding: 0 8px; line-height: 1.4; }

/* これから載せる記事（題名だけ） */
.kw-drafts { list-style: none; margin: 0; padding: 0; }
.kw-drafts li { padding: 12px 0; border-bottom: 1px solid var(--st-line); color: var(--st-sub); font-size: 15px; }
.kw-drafts li span { display: inline-block; margin-right: 12px; font-weight: 700; color: var(--st-link); }

/* 出典の番号・編集部の文 */
.src-n { font-size: 15px; font-weight: 700; color: var(--st-link); text-decoration: none; margin-left: 2px; }
.kw-own { margin-left: 6px; font-size: 15px; font-weight: 700; color: var(--st-sub); }
.kw-own::before { content: "（"; }
.kw-own::after { content: "）"; }

/* 先輩役者（AI）の欄。箱にしない＝上下の線と余白 */
.kw-senpai { margin: 2.4em 0 0; padding: 20px 0; border-top: 2px solid var(--st-strong); border-bottom: 1px solid var(--st-line); }
.kw-senpai__who { margin: 0 0 8px !important; font-family: var(--st-display); font-size: 17px; color: var(--st-strong); }
.kw-senpai__who span { display: inline-block; margin-left: 8px; padding: 0 8px; font-family: var(--st-latin); font-size: 15px; letter-spacing: .08em; background: var(--st-lime); color: var(--st-strong); border: 1px solid var(--st-strong); }
.kw-senpai__q { margin: 0 0 10px !important; font-size: 18px; font-weight: 700; line-height: 1.8; color: var(--st-strong); }
.kw-senpai__note { margin: 0 !important; font-size: 15px; color: var(--st-sub); }

/* 劇場ごとの出典の行 */
.mag-src .mp-flow p.kw-srcline { font-size: 15px; color: var(--st-sub); margin-top: -.6em; }
.kw-srcline a { color: var(--st-sub); }

/* 問い合わせ：イマーシブナビの CSS は注意書き・欄の名前・ボタンが 14px＝文字は 15px 以上の決まりに合わせて上書き（写した navi.css には手を入れない） */
.cf-alert, .cf-field, .cf-agree, .cf .ev-cta__main, .cf .ev-cta__sub { font-size: 15px; }

/* ================= 小劇場界隈の色（2026-11-07 カツ「サイトの色合いだけイマーシブナビとは変えて」） =================
 * 形はイマーシブナビのまま、色だけ替える（写した stage.css には手を入れず、変数と直書きの3か所をここで上書き）。
 * メイン＝グリーンルーム（演者の控室）の深緑 #0b5c44（白地 7.99:1・薄い灰 7.28:1・黄の上 5.2:1）
 * 押す所の地＝スポットライトの黄 #ffc93c（文字は墨 12.27:1）。注意（まもなく・終了）の朱はそのまま。 */
:root {
  --st-lime: #ffc93c;
  --st-lime-hover: #f5b800;
  --st-violet: #0b5c44;
  --st-link: #0b5c44;
  --st-main: #0b5c44;
}
::selection { background: #ffc93c; color: #111; }
:focus-visible { outline-color: #0b5c44; }
.hero {
  background:
    radial-gradient(60% 85% at 95% 0%, rgba(11, 92, 68, .08), transparent 62%),
    radial-gradient(50% 75% at 0% 100%, rgba(255, 201, 60, .2), transparent 62%),
    var(--st-bg);
}
html:not(.is-mag) .mag-src .mp-flow strong { background: linear-gradient(transparent 60%, rgba(255, 201, 60, .8) 60%); }
.finder select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5c44' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* 姉妹メディアへのボタン（2026-11-07 カツ「ヘッダーに相互リンクを作って」→「ボタンっぽく・アニメーション」→「デザインを変更・マイクロコピーも ○○はこちらから」）。
   白地に太い枠と相手の色の影。上に「○○はこちらから」、下に相手の名前と矢印。ロゴがゆれ、矢印が右へ誘う。スマホはロゴだけ。動きを減らす設定の人には動かさない。
   イマーシブナビの navi.css と小劇場界隈の kaiwai.css で同じ（色の --sis だけ違う） */
.sister-link {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 3px;
  background: #fff; color: var(--st-strong); border: 2px solid var(--st-strong); box-shadow: 3px 3px 0 var(--sis);
  text-decoration: none; line-height: 1.25; transition: transform .15s ease, box-shadow .15s ease;
}
.sister-link img { width: 30px; height: 30px; flex: none; padding: 2px; background: var(--sis); border-radius: 50%; animation: sis-bob 2.4s ease-in-out infinite; }
.sister-link span { display: none; white-space: nowrap; }
.sister-link small { display: block; font-size: 15px; font-weight: 700; color: var(--sis); }
.sister-link b { display: block; font-family: var(--st-display); font-weight: 400; font-size: 16px; letter-spacing: .02em; }
.sister-link svg { display: none; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: sis-nudge 1.6s ease-in-out infinite; }
.sister-link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--sis); }
.sister-link:hover b { color: var(--sis); }
.sister-link:hover img { animation-duration: .8s; }
@keyframes sis-bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-8deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-2px) rotate(6deg); } }
@keyframes sis-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (min-width: 1024px) {
  .sister-link { order: 2; align-self: center; margin: 0 16px 0 12px; padding: 5px 12px 5px 6px; }
  .sister-link img { width: 40px; height: 40px; }
  .sister-link span, .sister-link svg { display: block; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .sister-link span { display: none; }
}
@media (max-width: 1023px) {
  .site-logo__en, .site-logo__ja { white-space: nowrap; }
  .sister-link { margin: 0 0 0 auto; }
  .site-head__main { gap: 8px; }
}
@media (max-width: 374px) {
  .site-head__main { padding: 8px 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sister-link, .sister-link img, .sister-link svg { animation: none; transition: none; }
}

/* スマホ：頭は自分のロゴと姉妹ボタン（名前つき）だけ。「探す」は画面の下のメニューへ（2026-11-07 カツ「SPでも…相互リンクボタンを目立たせて・画面下部にメニュー作ってもいい」） */
.sister-link .sis-s { display: none; }
.tabbar { display: none; }
@media (max-width: 1023px) {
  .site-head .head-find { display: none; }
  .sister-link { padding: 3px 10px 3px 3px; gap: 8px; }
  .sister-link img { width: 34px; height: 34px; }
  .sister-link span { display: block; }
  .sister-link .sis-l { display: none; }
  .sister-link .sis-s { display: block; }
  .sister-link b { font-size: 15px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    background: #fff; border-top: 2px solid var(--st-strong); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 0 4px; color: var(--st-sub); text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; letter-spacing: -.02em; }
  .tabbar__a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar__a + .tabbar__a { border-left: 1px solid var(--st-line); }
  .tabbar__a[aria-current="page"] { color: var(--st-link); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .totop { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 374px) {
  .sister-link { padding: 2px 6px 2px 2px; gap: 6px; }
  .sister-link img { width: 26px; height: 26px; }
  .sister-link small, .sister-link b { letter-spacing: -.04em; }
  .tabbar__a { letter-spacing: -.08em; }
}

/* 足もと（2026-11-07 カツ「フッターがみにくいので、文字数・表示の仕方・表示コンテンツを改修して統一して」）。
   両サイトとも 5 列＝探す・探す・読みもの・このサイトについて・姉妹メディア。項目は短い名前だけ（記事の題名は並べない＝読みものは分類まで） */
.foot-map--5 { max-width: 1180px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.foot-map--5 .foot-map__cat { display: block; margin: 0 0 6px; padding: 0 0 6px; border-bottom: 2px solid var(--st-strong); text-decoration: none; }
.foot-map--5 li { margin: .3em 0; }
.foot-map--5 .foot-map__sister { grid-column: 1 / -1; }
@media (min-width: 768px) { .foot-map--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-map--5 .foot-map__sister { grid-column: auto; } }
@media (min-width: 1024px) { .foot-map--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sister-card { display: block; margin-top: 10px; text-decoration: none; color: var(--st-strong); }
.sister-card__head { display: flex; align-items: center; gap: 10px; }
.sister-card img { width: 52px; height: 52px; flex: none; transition: transform .2s ease; }
.sister-card b { font-family: var(--st-display); font-weight: 400; font-size: 18px; line-height: 1.3; }
.sister-card__catch { display: block; margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--st-strong); line-height: 1.6; }
.sister-card__sub { display: block; font-size: 15px; color: var(--st-sub); line-height: 1.6; }
.sister-card:hover b { color: var(--st-link); }
.sister-card:hover img { transform: rotate(-8deg) scale(1.06); }
.sister-link { --sis: #5b2fe0; }
/* プライバシーポリシーの制定日など（15px 未満の文字を出さない・2026-11-07） */
.nart__meta { font-size: 15px; }

/* 地域のページ /osaka/ などの札の段（記事の枠のすぐ下に来るので間を空ける・2026-11-07） */
.area-when { margin-top: 48px; }
.area-when + .area-when { margin-top: 0; }