@charset "UTF-8";
/*
Theme Name: 試写会ナビ
Theme URI: https://shishakai-navi.com/
Author: ゆうすけ
Description: 試写会ナビ専用テーマ。親テーマを持たない独立テーマ（D-03）。
             画像を持たない設計のため、意匠は組版・罫線・ベージュの面で作る。
Version: 1.0.6
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: shishakai-navi
*/

/* プロトタイプ（design/preview/assets/site.css）と同一。両者は必ず同期させること。 */

/* ==========================================================================
   試写会ナビ — サイトスタイル v4
   参照：モデルプレス（mdpr.jp）／2026-10-10 に実機でCSSを抽出して採寸した

   抽出した実測値と、それをどう採ったか：
     本文色   #333333 / 補助 #666666      → そのまま採用（真っ黒を使わない）
     地       白 + ベージュ #F0E9DB       → ベージュの帯を主要な構造材にする
     ブロンズ #6E5730                     → ベージュ帯の上の文字色
     アクセント マゼンタ系・赤            → 自サイトはマゼンタ #E6307F／赤 #E60012
     角丸     0px（円形アイコンを除く）    → 全面的に直角
     ウェイト 300 と 700 の二極            → 中間のウェイトを使わない
     影       ほぼなし                     → 影を全廃し、罫線と面で構造を作る
     書体     ヒラギノ角ゴ系               → 同じ

   写真が使えない制約（絶対制約3）への対応：
     モデルプレスの温度は写真だけでなく「ベージュの面」が作っている。
     写真の代わりにベージュの面・日付ブロック・和英併記の見出しで誌面感を出す。
   ========================================================================== */

/* === 0. トークン ========================================================= */
:root {
  /* ライト専用であることをブラウザに宣言する。
     これがないと Chrome の自動ダーク化がページの色を勝手に反転させる。 */
  color-scheme: light;

  --paper:     #FFFFFF;
  --beige:     #F0E9DB;   /* 誌面の地。最も重要な構造材 */
  --beige-2:   #F7F3EA;
  --gray-bg:   #F8F8F8;
  --line:      #DCDCDC;
  --line-2:    #EDE7DA;

  --text:      #333333;
  --text-2:    #666666;
  --text-3:    #9B9B9B;
  --bronze:    #6E5730;   /* ベージュ帯の上の文字 */

  --magenta:      #E6307F;   /* ブランド。大きなベタ面は応募ボタンだけに使う */
  --magenta-dark: #C41E68;
  --pink-wash:    #FDECF4;
  --red:          #E60012;   /* 締切・緊急 */
  --red-wash:     #FDECEC;

  /* カテゴリ色 — 塗りの小札に使う。エンタメ誌面として彩度は高めに取る */
  --c-screening: #2470DD;
  --c-guide:     #0E9E8C;
  --c-free:      #6AAE24;
  --c-vod:       #8343D6;
  --c-theater:   #D4397A;

  --font: HiraginoHelvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Noto Sans JP", "Helvetica Neue", Arial, Meiryo, sans-serif;

  --w-site:    75rem;
  --w-wide:    64rem;
  --w-article: 47rem;
  --w-side:    19rem;
}

/* 本サイトはダークモードを提供しない。
   エンタメ系の誌面は白とベージュの明るい地が前提で、暗転すると別物になるため、
   OSの設定に追従させない（prefers-color-scheme を見ない）。 */

/* === 1. リセット ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* === 2. 土台 ============================================================= */
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.container { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: 1.25rem; }
.container--article { max-width: var(--w-article); }

.u-num { font-variant-numeric: tabular-nums; }
.u-quiet { color: var(--text-2); }
.u-small { font-size: .8125rem; }

.proto-bar {
  background: var(--text); color: #CFCFCF;
  font-size: .6875rem; text-align: center; padding: .4rem 1rem; line-height: 1.7;
}

/* === 3. サイトヘッダ =====================================================
   ロゴは大きく。ナビはベージュの帯で全幅。アイコンは置かない（誌面はアイコンを使わない） */
.site-header { background: var(--paper); }
.site-header__inner {
  display: flex; align-items: center; justify-content: center;
  padding-block: 1.5rem 1.25rem;
}
.site-logo { display: flex; align-items: center; gap: .55rem; }
.site-logo:hover { color: inherit; }
.site-logo__mark {
  width: 2.3rem; height: 2.3rem;
  background: var(--magenta); color: #fff;
  display: grid; place-items: center; flex: none;
}
.site-logo__mark svg { width: 1.25rem; height: 1.25rem; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.site-logo__text b { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
.site-logo__text small {
  font-size: .625rem; font-weight: 400; letter-spacing: .3em; color: var(--text-2);
}

.site-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  background: var(--beige);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.site-nav__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.site-nav a {
  font-size: .9375rem; font-weight: 700; color: var(--text);
  padding: .9rem 1.15rem; display: block;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--magenta); background: var(--pink-wash); }
.site-nav a[aria-current="page"] { color: var(--magenta); border-bottom-color: var(--magenta); }

.cat-bar { display: none; }

/* === 4. ヒーロー（今日の状況） ===========================================
   写真が置けないぶん、数字を誌面の「つかみ」にする */
.hero { background: var(--beige); border-bottom: 1px solid var(--line-2); }
.hero__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2.5rem; padding-block: 1.15rem; }
.hero__item { line-height: 1.25; }
.hero__k {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .18em;
  color: var(--bronze);
}
.hero__v { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.hero__v span { font-size: .75rem; font-weight: 400; color: var(--bronze); margin-left: .2rem; }
.hero__v--hot { color: var(--red); }
.hero__v--lead { color: var(--magenta); }
.hero__v--text { font-size: 1.2rem; }
.hero__live {
  margin-left: auto; align-self: center;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: var(--bronze);
  display: inline-flex; align-items: center; gap: .4rem;
}
.hero__live i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--red); display: block; }

/* 絞り込み — 直角のタグ */
.chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 1.15rem 0 .25rem;
}
/* 画面が狭いときだけ横スクロール。広いときは折り返して全項目を見せる */
@media (max-width: 48rem) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: 1.25rem; }
  .chips::-webkit-scrollbar { display: none; }
}
.chips a {
  flex: none; font-size: .8125rem; font-weight: 700; color: var(--text);
  background: var(--paper); border: 1px solid var(--line);
  padding: .4rem .75rem; white-space: nowrap;
}
.chips a:hover { border-color: var(--magenta); color: var(--magenta); background: var(--pink-wash); }
.chips a b { color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: .25rem; }
/* 選択中 — 赤ベタに白抜き。いまどの条件で見ているかが一目で分かる */
.chips a[aria-current="page"] {
  background: var(--red); border-color: var(--red); color: #fff;
}
.chips a[aria-current="page"] b { color: rgba(255,255,255,.75); }
.chips a[aria-current="page"]:hover { background: var(--red); color: #fff; opacity: .9; }
/* 緊急（今日が締切）だが未選択 — 赤の文字と枠だけ。選択中のベタ塗りと区別する */
.chips a[data-hot="1"] { color: var(--red); border-color: var(--red); }
.chips a[data-hot="1"] b { color: var(--red); opacity: .7; }
.chips a[data-hot="1"]:hover { background: var(--red-wash); color: var(--red); }
.chips a[data-hot="1"][aria-current="page"] { color: #fff; }
.chips a[data-hot="1"][aria-current="page"] b { color: rgba(255,255,255,.75); opacity: 1; }

/* === 5. 一覧 ============================================================= */
.page-main { padding-block: 1.75rem 4rem; }

.breadcrumb { font-size: .75rem; color: var(--text-3); margin-bottom: .9rem; }
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--magenta); }

.page-title {
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  font-weight: 700; line-height: 1.5; letter-spacing: .01em;
  padding-bottom: .9rem; border-bottom: 3px solid var(--text);
  text-wrap: balance;
}
.page-lede { color: var(--text-2); margin-top: 1rem; max-width: 42rem; font-weight: 300; }

/* 節見出し — 中央揃えの和英併記。誌面の約物 */
.section-title {
  text-align: center; margin: 3rem 0 1.25rem;
  font-size: 1.4rem; font-weight: 700; line-height: 1.45; letter-spacing: .02em;
}
.section-title .en {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .32em;
  color: var(--magenta); margin-top: .3rem;
}
.section-title::after {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--magenta); margin: .65rem auto 0;
}
.section-title .count { font-size: .75rem; font-weight: 400; color: var(--text-3); }

/* 試写会の行 — 写真の代わりに日付のベージュ面を置く */
.screenings { border-top: 1px solid var(--line); }
.screening-row {
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: .3rem 1.15rem; align-items: center;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.screening-row:hover { background: var(--pink-wash); }
.screening-row__when {
  background: var(--beige); color: var(--bronze);
  text-align: center; padding: .5rem .25rem; line-height: 1.2;
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
}
.screening-row__when b {
  display: block; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.screening-row__when span { font-size: .6875rem; font-weight: 400; }
.screening-row__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.55; }
.screening-row__meta { font-size: .78125rem; color: var(--text-2); font-weight: 300; margin-top: .15rem; }
.screening-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.screening-row__deadline {
  font-size: .78125rem; font-weight: 300; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.screening-row__deadline b { color: var(--red); font-weight: 700; }

@media (max-width: 40rem) {
  .screening-row { grid-template-columns: 3.75rem minmax(0,1fr); padding: .85rem 0; }
  .screening-row__when b { font-size: 1.05rem; }
  .screening-row__right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* 状態バッジ — 直角の小さな札 */
.badge {
  display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .5rem; white-space: nowrap; line-height: 1.7;
}
.badge--soon   { background: var(--red); color: #fff; }
.badge--open   { background: #E9F6E0; color: #4A7D18; }
.badge--closed { background: var(--gray-bg); color: var(--text-3); border: 1px solid var(--line); }
.badge--new    { background: var(--magenta); color: #fff; }

/* === 6. 記事 ============================================================= */
.article-title {
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  font-weight: 700; line-height: 1.55; letter-spacing: .01em; text-wrap: balance;
  padding-bottom: 1rem; border-bottom: 3px solid var(--text);
}

/* 要点サマリー */
.summary {
  margin: 1.5rem 0; border: 1px solid var(--line);
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
}
.summary dt, .summary dd { padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.summary dt { background: var(--beige); font-size: .8125rem; font-weight: 700; color: var(--bronze); }
.summary dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.summary > :nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 30rem) { .summary { grid-template-columns: 5.75rem minmax(0,1fr); } }

/* 公式応募ボタン — マゼンタはロゴとここにしか使わない */
.btn-apply {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--magenta); color: #fff;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em;
  padding: 1.05rem 1.5rem; text-align: center;
}
.btn-apply:hover { color: #fff; background: var(--magenta-dark); }
.btn-apply small { font-size: .72rem; font-weight: 300; opacity: .85; }
.btn-apply__row { display: inline-flex; align-items: center; gap: .5rem; }
.btn-apply svg { width: 1rem; height: 1rem; }

.source-line {
  font-size: .78125rem; color: var(--text-2); font-weight: 300; line-height: 1.85;
  background: var(--gray-bg); padding: .8rem 1rem; margin: .9rem 0 1.75rem;
}
.source-line b { color: var(--text); font-weight: 700; }

.prose > * + * { margin-top: 1rem; }
/* 見出しは左にマゼンタの太い柱。誌面の記号 */
.prose h2 {
  font-size: 1.1875rem; font-weight: 700; line-height: 1.6;
  margin-top: 2.75rem; padding: .15rem 0 .15rem .8rem;
  border-left: 5px solid var(--magenta);
  text-wrap: balance;
}
.prose h3 {
  font-size: 1.0625rem; font-weight: 700; margin-top: 1.9rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.prose p { color: var(--text-2); font-weight: 300; }
.prose .answer {
  font-size: .9375rem; font-weight: 700; color: var(--text);
  background: var(--beige); padding: .8rem 1rem;
}
.prose ul { display: flex; flex-direction: column; gap: .4rem; }
.prose ul li { position: relative; padding-left: 1.1rem; color: var(--text-2); font-weight: 300; }
.prose ul li::before {
  content: ""; position: absolute; left: .2rem; top: .8em;
  width: .3rem; height: .3rem; background: var(--magenta);
}
.lead-plain { color: var(--text-2); font-weight: 300; }

/* 結論ブロック */
.verdict { background: var(--beige); padding: 1.1rem 1.25rem; margin: 1.6rem 0; }
.verdict__label {
  display: inline-block; background: var(--text); color: var(--beige);
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  padding: .15rem .7rem; margin-bottom: .6rem;
}
.verdict__label svg { display: none; }
.verdict p { font-size: .9375rem; color: var(--text); font-weight: 400; }
.verdict p b { font-weight: 700; }

/* 表 */
/* 表 — 記事の価値の中心になるので、本文より読みやすく作る。
   縦罫を引かず、ゼブラ（偶数行の地色）で行を追わせる。数字は桁を揃える。 */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: .875rem; line-height: 1.7; min-width: 22rem;
  font-feature-settings: "palt" 1;
}
.data-table th, .data-table td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  background: var(--beige); color: var(--bronze);
  font-size: .78125rem; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap; vertical-align: middle;
  border-bottom: 2px solid var(--line-2);
}
/* ゼブラ。罫線だけだと横に目が滑るため */
.data-table tbody tr:nth-child(even) { background: #FBF8F3; }
.data-table tbody tr:hover { background: var(--pink-wash); }
.data-table tbody tr:last-child td { border-bottom: none; }
/* 1列目は見出し的に扱う（何の行かを先に掴ませる） */
.data-table tbody td:first-child { font-weight: 700; color: var(--text); }
/* 数値は右寄せ・桁揃え・少し大きく。比較しやすさを優先する */
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: .9375rem;
  letter-spacing: .01em; white-space: nowrap;
}
/* 表の中の出典リンクは小さく添える */
.data-table a { font-size: .78125rem; color: var(--text-2); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.data-table a:hover { color: var(--magenta); }
@media (max-width: 40rem) {
  .data-table th, .data-table td { padding: .7rem .8rem; }
  .data-table { font-size: .8125rem; }
}

/* 記事カード — 直角・影なし。カテゴリは色付き英字ラベル */
.post-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); border-top: 1px solid var(--line); }
.post-card {
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex; flex-direction: column; gap: .4rem;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.post-card:hover { background: var(--pink-wash); }
.post-card__tag {
  align-self: flex-start; font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  color: #fff; background: var(--red); padding: .15rem .55rem; line-height: 1.7;
}
.post-card__tag .ja { display: none; }
.post-card__title { font-size: 1rem; font-weight: 700; line-height: 1.6; text-wrap: balance; }
.post-card__desc { font-size: .8125rem; color: var(--text-2); font-weight: 300; line-height: 1.85; flex: 1; }
.post-card__meta { font-size: .6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* 終了告知 */
.ended-notice { background: var(--gray-bg); border: 1px solid var(--line); padding: 1rem 1.15rem; margin: 1.1rem 0 1.5rem; }
.ended-notice b { display: block; font-size: 1rem; font-weight: 700; margin-bottom: .15rem; }
.ended-notice span { font-size: .78125rem; color: var(--text-2); font-weight: 300; font-variant-numeric: tabular-nums; }

/* 出典ブロック */
.sources {
  margin-top: 2.75rem; background: var(--gray-bg); padding: 1.2rem;
  font-size: .78125rem; color: var(--text-2); font-weight: 300; line-height: 1.9;
}
.sources h2 { font-size: .6875rem; font-weight: 700; letter-spacing: .18em; color: var(--text); margin-bottom: .55rem; }
.sources ul { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .65rem; }
.sources a { text-decoration: underline; text-underline-offset: 3px; }
.sources b { color: var(--text); font-weight: 700; }
.sources p + p { margin-top: .45rem; }

.perf { border-top: 1px solid var(--line); margin: 2.75rem 0 0; }

/* === 7. 収益枠 =========================================================== */
.pr-block { border: 1px solid var(--line); padding: 1rem 1.15rem; margin: 1.75rem 0; }
.pr-block__tag {
  display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .2em;
  color: var(--text-2); border: 1px solid var(--line); padding: .05rem .5rem;
  margin-bottom: .55rem; line-height: 1.8;
}
.pr-block__lead { font-size: .9375rem; color: var(--text-2); font-weight: 300; margin-bottom: .6rem; }
.pr-block__lead b { color: var(--text); font-weight: 700; }
.pr-links { display: flex; flex-direction: column; gap: .4rem; }
.pr-links a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .875rem; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
.pr-links a:hover { text-decoration-color: currentColor; }
.pr-links a span { font-size: .625rem; font-weight: 700; letter-spacing: .1em; color: var(--text-3); white-space: nowrap; text-decoration: none; }

.pr-notice {
  border: 1px solid var(--line); padding: .8rem 1rem; margin-top: 1.4rem;
  font-size: .78125rem; line-height: 1.9; color: var(--text-2); font-weight: 300;
}
.pr-notice b { color: var(--text); font-weight: 700; }
.pr-notice .pr-block__tag { margin: 0 .45rem 0 0; vertical-align: .05em; }

.ad-slot {
  border: 1px dashed var(--line); background: var(--gray-bg); color: var(--text-3);
  font-size: .6875rem; letter-spacing: .14em; text-align: center;
  padding: 2rem 1rem; margin: 1.9rem 0; line-height: 2;
}

/* === 8. フッタ =========================================================== */
.site-footer {
  background: var(--beige); border-top: 1px solid var(--line-2);
  padding-block: 2.25rem 2.5rem; margin-top: 3.5rem;
  font-size: .78125rem; line-height: 1.95; color: var(--bronze); font-weight: 300;
}
.site-footer__notice { margin-bottom: .6rem; max-width: 52rem; }
.site-footer__notice b { color: var(--text); font-weight: 700; }
.site-footer__cols {
  display: grid; gap: 1.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.75rem 0 1.25rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
}
.site-footer__cols h2 { font-size: .625rem; font-weight: 700; letter-spacing: .2em; color: var(--text); margin-bottom: .45rem; }
.site-footer__cols div { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.site-footer__cols a { color: var(--bronze); font-size: .78125rem; }
.site-footer__meta { color: var(--bronze); opacity: .8; font-size: .6875rem; padding-top: 1.1rem; border-top: 1px solid var(--line-2); }

/* === 9. 2カラム ========================================================== */
.layout { max-width: var(--w-site); }
.layout__main { min-width: 0; }
.layout__side { min-width: 0; }
@media (min-width: 64rem) {
  .layout { display: grid; grid-template-columns: minmax(0,1fr) var(--w-side); gap: 2.75rem; align-items: start; }
}
@media (max-width: 63.999rem) { .layout__side { margin-top: 2.75rem; } }

.side-block { margin-bottom: 1.75rem; }
/* サイドの見出しもベージュの帯 */
.side-title {
  background: var(--beige); color: var(--text);
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  padding: .5rem .75rem; margin-bottom: .6rem;
}
.side-title svg { display: none; }

.side-count { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .4rem; padding-inline: .1rem; }
.side-count b { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--red); }
.side-count span { font-size: .78125rem; color: var(--text-2); font-weight: 300; }

.side-list li { border-bottom: 1px solid var(--line); }
.side-list li:last-child { border-bottom: none; }
.side-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .55rem .1rem; font-size: .84375rem; font-weight: 700; color: var(--text);
}
.side-list__d { font-size: .6875rem; font-weight: 400; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.side-list__d--soon { color: var(--red); font-weight: 700; }

.side-more {
  display: block; margin-top: .55rem; padding: .45rem .75rem;
  background: var(--text); color: var(--paper);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-align: center;
}
.side-more:hover { background: var(--magenta); color: #fff; }
.side-more svg { display: none; }

.side-rank { counter-reset: rank; }
.side-rank li { counter-increment: rank; border-bottom: 1px solid var(--line); }
.side-rank li:last-child { border-bottom: none; }
.side-rank a {
  display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: .55rem; padding: .55rem .1rem;
  font-size: .84375rem; font-weight: 700; line-height: 1.6; color: var(--text);
}
.side-rank a::before {
  content: counter(rank);
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  background: var(--beige); color: var(--bronze);
  font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.side-rank li:nth-child(-n+3) a::before { background: var(--magenta); color: #fff; }

.side-cats li { border-bottom: 1px solid var(--line); }
.side-cats li:last-child { border-bottom: none; }
.side-cats a {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .1rem; font-size: .84375rem; font-weight: 700; color: var(--text);
}
.side-cats a > :first-child { flex: 1; }
.side-cats a span:last-child { font-size: .6875rem; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.side-cats li[data-c] a::before { content: ""; width: .2rem; height: .9rem; flex: none; background: var(--c); }
.side-cats li[data-c="screening"] { --c: var(--c-screening); }
.side-cats li[data-c="guide"]     { --c: var(--c-guide); }
.side-cats li[data-c="free"]      { --c: var(--c-free); }
.side-cats li[data-c="vod"]       { --c: var(--c-vod); }
.side-cats li[data-c="theater"]   { --c: var(--c-theater); }

.side-author { background: var(--beige); padding: 1rem 1.1rem; }
.side-author .side-title { background: transparent; padding: 0 0 .4rem; color: var(--bronze); }
.side-author__name { font-size: 1.0625rem; font-weight: 700; }
.side-author__bio { font-size: .78125rem; color: var(--bronze); font-weight: 300; line-height: 1.9; margin-top: .25rem; }
.side-author .side-more { background: var(--bronze); }

.side-sticky { position: sticky; top: 1rem; }
.ad-slot--side { margin: 0 0 1.75rem; padding: 3.25rem 1rem; }
.pr-block--side { margin: 0 0 1.75rem; }
.pr-block--side .pr-block__lead { font-size: .84375rem; }
.pr-block--side .pr-links a { font-size: .8125rem; }

/* === 10. カテゴリ色（英字ラベルにのみ使う） ============================== */
body[data-cat="screening"] { --cat: var(--c-screening); }
body[data-cat="guide"]     { --cat: var(--c-guide); }
body[data-cat="free"]      { --cat: var(--c-free); }
body[data-cat="vod"]       { --cat: var(--c-vod); }
body[data-cat="theater"]   { --cat: var(--c-theater); }
body[data-cat="site"]      { --cat: var(--text-3); }

.post-card__tag[data-c="screening"] { background: var(--c-screening); }
.post-card__tag[data-c="guide"]     { color: var(--c-guide); }
.post-card__tag[data-c="free"]      { color: var(--c-free); }
.post-card__tag[data-c="vod"]       { color: var(--c-vod); }
.post-card__tag[data-c="theater"]   { color: var(--c-theater); }
.post-card__tag[data-c="venue"]     { color: var(--c-guide); }

/* 応募ボタンは常にマゼンタ。カテゴリ色の影響を受けない（誤認防止の固定ルール） */
.btn-apply { background: var(--magenta); color: #fff; }

/* === 11. 追加：絞り込みの常時表示 ======================================== */
/* スクロールしても画面上部に残す。一覧でも記事でも常に出す。 */
.chips-bar {
  position: sticky; top: 0; z-index: 9;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}
.chips-bar .chips { padding: .6rem 0; }
/* 狭い画面では画面端まで使ってスクロールさせる（内側に余白を持たせる） */
@media (max-width: 48rem) {
  .chips-bar .container { padding-inline: 0; }
  .chips-bar .chips { padding-block: .6rem; }
}

/* サイドバー版の絞り込み（縦積み） */
.side-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.side-chips a {
  font-size: .78125rem; font-weight: 700; color: var(--text);
  border: 1px solid var(--line); padding: .3rem .65rem;
}
.side-chips a:hover { border-color: var(--magenta); color: var(--magenta); background: var(--pink-wash); }
.side-chips a b { color: var(--text-3); font-weight: 700; margin-left: .25rem; font-variant-numeric: tabular-nums; }
.side-chips a[aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; }
.side-chips a[aria-current="page"] b { color: rgba(255,255,255,.75); }
.side-chips a[data-hot="1"] { color: var(--red); border-color: var(--red); }
.side-chips a[data-hot="1"] b { color: var(--red); opacity: .7; }
.side-chips a[data-hot="1"][aria-current="page"] { color: #fff; }

/* === 12. 追加：作品情報・公式リンク・埋め込み ============================ */
/* 事実のみを並べる表。あらすじ等の文章は入れない（絶対制約2） */
.fact-table { width: 100%; border-collapse: collapse; font-size: .875rem; border-top: 1px solid var(--line); }
.fact-table th, .fact-table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.fact-table th { background: var(--beige); font-size: .8125rem; font-weight: 700; color: var(--bronze); white-space: nowrap; width: 7.5rem; }
.fact-table td { font-weight: 400; }

/* 公式サイトへのリンク集 */
.link-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem .25rem; border-bottom: 1px solid var(--line);
  font-size: .9375rem; font-weight: 700;
}
.link-list a:hover { background: var(--pink-wash); color: var(--magenta); }
.link-list a .host { font-size: .72rem; font-weight: 400; color: var(--text-3); white-space: nowrap; }

/* 公式が提供する埋め込みの置き場（予告編・公式ポスト） */
.embed-slot {
  border: 1px dashed var(--line); background: var(--gray-bg);
  padding: 2.25rem 1rem; text-align: center;
  color: var(--text-3); font-size: .78125rem; line-height: 2;
}
.embed-slot b { display: block; color: var(--text-2); font-weight: 700; font-size: .8125rem; margin-bottom: .2rem; }
.embed-note { font-size: .72rem; color: var(--text-3); margin-top: .5rem; }

/* 応募前チェックリスト（独自コンテンツ） */
.checklist { border-top: 1px solid var(--line); }
.checklist li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .25rem; border-bottom: 1px solid var(--line);
  font-size: .875rem; color: var(--text-2); font-weight: 400;
}
.checklist li::before {
  content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .4rem;
  border: 2px solid var(--magenta);
}
.checklist li b { color: var(--text); font-weight: 700; }

/* === 13. 追加：アーカイブ ================================================ */
.archive-year { margin-bottom: 2rem; }
.archive-year h3 {
  font-size: 1.15rem; font-weight: 700;
  padding-bottom: .4rem; margin-bottom: .6rem;
  border-bottom: 2px solid var(--text);
}
.archive-months { display: flex; flex-wrap: wrap; gap: .4rem; }
.archive-months a {
  font-size: .84375rem; font-weight: 700;
  border: 1px solid var(--line); padding: .4rem .8rem;
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.archive-months a:hover { border-color: var(--magenta); color: var(--magenta); background: var(--pink-wash); }
.archive-months a b { font-size: .72rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* === 14. 作品サムネイル =================================================
   映画ポスターは配給会社の著作物のため掲載できない（絶対制約3）。
   代わりに作品名を組んだポスター比率（2:3）のタイルを自動生成する。
   色は作品ごとに決まるので、一覧に写真のようなリズムが生まれる。
   公式から画像の利用許諾が得られた場合は、このタイルを <img> に差し替える。
   ========================================================================== */
.thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 3; width: 100%;
  background: var(--t-bg, #5C7CA6);
  display: flex; align-items: center; justify-content: center;
  padding: .35rem .3rem;
}
/* フィルムのパーフォレーション（上下の穴）。写真がない寂しさをここで補う */
.thumb::before, .thumb::after {
  content: ""; position: absolute; left: 0; right: 0; height: .35rem;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 38%, transparent 40%);
  background-size: .4rem .4rem; background-repeat: repeat-x; opacity: .7;
}
.thumb::before { top: .12rem; }
.thumb::after  { bottom: .12rem; }
.thumb__title {
  color: #fff; font-size: .625rem; font-weight: 700; line-height: 1.45;
  text-align: center; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
/* 作品ごとの配色。退色したフィルムの色から6色を順に当てる */
.thumb[data-tone="0"] { --t-bg: #5C7CA6; }
.thumb[data-tone="1"] { --t-bg: #4F8C85; }
.thumb[data-tone="2"] { --t-bg: #A86B4E; }
.thumb[data-tone="3"] { --t-bg: #7A6BA8; }
.thumb[data-tone="4"] { --t-bg: #B06A82; }
.thumb[data-tone="5"] { --t-bg: #6E8C56; }

/* 一覧の行にサムネ列を足す */
.screening-row { grid-template-columns: 3.1rem 4.25rem minmax(0, 1fr) auto; }
.screening-row__thumb { width: 3.1rem; }
@media (max-width: 40rem) {
  .screening-row { grid-template-columns: 2.75rem 3.5rem minmax(0,1fr); }
  .screening-row__thumb { width: 2.75rem; }
}

/* 主催者が非公表の項目（CLAUDE.md §6-1 / D-24）
   伏せられていることを事実として明示する。読者が誤解しないよう本文と同じ強さでは出さない。 */
.undisclosed {
  display: block; margin-top: .2rem;
  font-size: .75rem; font-weight: 400; color: var(--text-2); line-height: 1.7;
}


/* === 15. 日本語の改行位置 ===============================================
   日本語は単語の区切りが無いため、既定では意味の途中で折り返される。
   word-break: auto-phrase は文節の切れ目で折るので、読む速度が目に見えて変わる。
   対応していないブラウザでは従来どおり折り返すだけで、壊れることはない。
   ========================================================================== */
body { line-break: strict; }            /* 行頭に「。」「、」「）」が来ないようにする */
.prose p, .prose li, .page-lede, .verdict p, .answer,
.post-card__desc, .screening-row__meta, .data-table td {
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 見出しは行数が少ないぶん、割れ方が目立つ。意味で折って行長もそろえる */
.page-title, .article-title, .prose h2, .prose h3,
.post-card__title, .screening-row__title, .section-title {
  word-break: auto-phrase;
  text-wrap: balance;
}
/* 本文は最終行に1語だけ残る（孤立行）のを防ぐ */
.prose p, .page-lede, .verdict p { text-wrap: pretty; }

/* 数値と単位をまとまりとして扱う。「1,000」と「円」が泣き別れないように */
.nw { white-space: nowrap; }

/* === 16. 表の列幅 =======================================================
   出典URLをそのまま載せると列幅を食い潰し、肝心の説明列が潰れる。
   出典はドメインだけを小さく添え、本文の列に幅を渡す。
   ========================================================================== */
.data-table { table-layout: auto; }
.data-table .cell-src {
  width: 1%; white-space: nowrap;
  font-size: .75rem; font-weight: 400;
}
.data-table .cell-src a { color: var(--text-3); }
.data-table .cell-src a:hover { color: var(--magenta); }
.data-table .cell-date {
  width: 1%; white-space: nowrap;
  font-size: .75rem; font-weight: 400; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* 1列目（項目名）は折り返すが、広がりすぎないように上限を置く */
.data-table tbody td:first-child { max-width: 16rem; }
@media (max-width: 48rem) {
  .data-table .cell-src, .data-table .cell-date { font-size: .6875rem; }
}

/* 出典と確認日をまとめた小さなセル。本文の列に幅を譲る */
.data-table .cell-src { width: 1%; white-space: nowrap; font-size: .75rem; font-weight: 400; vertical-align: top; }
.data-table .cell-src a { display: block; }
.data-table .cell-src__date {
  display: block; margin-top: .15rem;
  font-size: .6875rem; color: var(--text-3); font-variant-numeric: tabular-nums;
}
/* 表は必ず枠いっぱいに広げる。縮むと説明列が潰れて行が縦に伸びる */
.table-scroll > .data-table { width: 100%; }
/* 本文が右端まで使うようになったので、表もカラムにきっちりそろえる。
   はみ出させると右端が本文とずれて、かえって散らかって見える。 */
/* 1列目の上限を緩める。項目名が2行になっても、説明列が潰れるより読みやすい */
.data-table tbody td:first-child { max-width: 14rem; }

/* === 17. 本文の幅と行長 ==================================================
   本文はカラムの右端までいっぱいに使う（運営者の指定）。
   そのぶん1行が長くなるので、文字を大きく・行間を広くして行の追いやすさを保つ。
   ========================================================================== */
.prose > p, .prose > ul, .prose > ol, .prose > blockquote,
.prose .answer, .verdict p, .page-lede {
  max-width: none;
}
.prose > p, .prose > ul, .prose > ol, .prose .answer {
  font-size: 1.0625rem;   /* 17px */
  line-height: 2.0;
}
.prose > li { line-height: 2.0; }

/* === 18. 意見ブロック ====================================================
   「運営者の判断」は事実ではなく意見。見た目で事実と切り分ける必要がある。
   ブラウザ標準の blockquote（左右40pxの余白だけ）では区別がつかず、
   右端も本文とそろわなかったので、幅は本文と同じにして左の罫で立てる。
   ========================================================================== */
.prose > blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--c-accent, #D6336C);
  background: #FBF8F3;
  border-radius: 0 6px 6px 0;
}
.prose > blockquote > :first-child { margin-top: 0; }
.prose > blockquote > :last-child  { margin-bottom: 0; }
.prose > blockquote p {
  font-size: 1rem;
  line-height: 1.95;
  color: #3A3A3A;
}
.prose > blockquote strong { color: #1A1A1A; }

/* === 19. 目次 ============================================================
   h2 が3つ以上の記事に自動で入る。h2 を親、h3 を子にした入れ子。
   見出しの id は連番（sec-1 / sec-1-1）。日本語の見出しをローマ字に
   起こすと読みを推測することになり、誤った id が URL に残るため。
   ========================================================================== */
.toc {
  margin: 2rem 0 2.5rem;
  padding: 1.25rem 1.5rem 1.4rem;
  background: #FBF8F3;
  border: 1px solid #EBE3D7;
  border-radius: 8px;
}
.toc__title {
  margin: 0 0 .75rem;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.toc__title::before {
  content: "";
  width: 3px; height: 1em;
  background: var(--c-accent, #D6336C);
  border-radius: 2px;
}
.toc__list, .toc__sub { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc__list > li { counter-increment: toc; margin: 0; }
.toc__list > li + li { margin-top: .5rem; }
.toc__list > li > a { padding-left: 1.9rem; }
.toc__list > li > a::before {
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  width: 1.6rem;
  text-align: right;
  color: var(--c-accent, #D6336C);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.toc a {
  position: relative;
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.7;
  word-break: auto-phrase;
}
.toc a:hover { color: var(--c-accent, #D6336C); text-decoration: underline; }
.toc__sub { margin: .4rem 0 .2rem 1.9rem; }
.toc__sub > li + li { margin-top: .3rem; }
.toc__sub a {
  font-size: .9375rem;
  color: #5A5A5A;
  padding-left: .9rem;
}
.toc__sub a::before {
  content: "";
  position: absolute;
  left: 0; top: .85em;
  width: .45rem; height: 1px;
  background: #C9BFB1;
}
/* 目次から飛んだとき、見出しが画面の上端に貼りつかないように余白を残す */
.prose h2, .prose h3 { scroll-margin-top: 5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* === 20. サイドバーのPRリンク ============================================
   横並び（text ⟷ ラベル）のままだと、幅の狭いサイドバーで文字列が押し出され、
   「…を比／較」のように1文字だけ次の行に落ちる。
   サイドバーではラベルを上の行に出して、本文に幅をまるごと渡す。
   ========================================================================== */
.pr-block--side .pr-links a {
  display: block;
  word-break: auto-phrase;
  line-height: 1.7;
}
.pr-block--side .pr-links a span {
  display: block;
  margin-bottom: .1rem;
  color: var(--text-3);
}

/* === 21. 図 ==============================================================
   記事に入れているイラストは当サイトで作ったもの。
   実在の劇場・作品・ポスターを写したものではない（CLAUDE.md 絶対条件3）。
   ========================================================================== */
.fig {
  margin: 2.25rem 0;
}
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #FBF8F3;   /* 読み込み中に枠だけ先に出す */
}
/* 記事の先頭に置く大きい図。見出しのすぐ下に来るので上の余白を詰める */
.fig--hero { margin: 1.5rem 0 2.5rem; }

/* 幅の狭い図（4:3のもの）は中央に寄せ、本文より小さく見せる */
.fig--spot img { max-width: 30rem; margin-inline: auto; }

.fig__note {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--text-3, #8A8A8A);
}
@media (max-width: 40rem) {
  .fig { margin: 1.75rem 0; }
}

/* ヘッダー画像は 16:9 のままだと高すぎて、本文が画面の外に出る。
   イラストは中央に主題があり上下に余白が多いので、切っても絵は欠けない。 */
.fig--hero img {
  aspect-ratio: 2.3 / 1;
  object-fit: cover;
}
@media (max-width: 40rem) {
  .fig--hero img { aspect-ratio: 16 / 9; }   /* 狭い画面では切らない */
}

/* === 22. 絞り込みチップの状態 ============================================
   0件のチップを赤で強調すると「ここを見て」と言いながら中身が無いことになる。
   件数があるときだけ目立たせ、0件のものは控えめにする。
   ========================================================================== */
.chips a[data-empty="1"] {
  opacity: .55;
}
.chips a[data-empty="1"] b {
  color: var(--text-3, #8A8A8A);
  font-weight: 400;
}
.chips a[data-empty="1"]:hover {
  opacity: 1;
}

/* === 23. 関連する記事 ====================================================
   記事の末尾に、同じ区分の記事へのリンクを出す。
   公開済みの記事だけを並べるので、行き止まりのリンクはできない。
   ========================================================================== */
.related {
  margin: 3rem 0 0;
  padding: 1.5rem 1.75rem 1.75rem;
  background: #FBF8F3;
  border-radius: 8px;
}
.related > h2 {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.related > h2::before {
  content: "";
  width: 3px; height: 1em;
  background: var(--c-accent, #D6336C);
  border-radius: 2px;
}
.related__list { list-style: none; margin: 0; padding: 0; }
.related__list li + li { margin-top: .6rem; }
.related__list a {
  color: #333;
  text-decoration: none;
  line-height: 1.7;
  word-break: auto-phrase;
  display: block;
  padding-left: 1.1rem;
  position: relative;
}
.related__list a::before {
  content: "";
  position: absolute; left: 0; top: .78em;
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--c-accent, #D6336C);
  border-bottom: 1.5px solid var(--c-accent, #D6336C);
  transform: rotate(-45deg);
}
.related__list a:hover { color: var(--c-accent, #D6336C); text-decoration: underline; }
.related__hub { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid #EBE3D7; }
.related__hub a { font-size: .9375rem; font-weight: 700; color: var(--c-accent, #D6336C); }