/* v20.1: アンカークリック時の挙動をスムーズスクロールに (Hajimariのみ)
   design-detail.css は Hajimari でのみ読み込まれるので、html へ直接書いて問題なし */
html {
  scroll-behavior: smooth;
}

@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Design 中ページ スタイル (v18.9)
   ファイル: design-detail.css
   ---
   v18.9 (CDガイド準拠 - レイアウト再構築):
   - 各エントリを2行2列のGridに
     [Row1] 1/20 (左)  ‖  日付 (右)
     [Row2] タイトル (左)  ‖  サムネ (右、上端揃え)
     [Row3] (空)  ‖  SNSアイコン (右)
   - 全 tsuku-old テキストに .tsuku-bold が当たる構造
   ---
   注: PC基準で実装。TAB/SP は後続対応。
   ========================================================================== */

/* ==========================================================================
   ページ全体
   ベースフォントを筑紫オールド明朝に固定 (Goudy要素は個別 override)
   ========================================================================== */
.detail-page {
  background-color: var(--color-bg-light);
  color: var(--color-wine-typo);
  font-family: var(--font-tsuku-old);
  font-weight: 400;
}

/* h1〜h6 のブラウザデフォルト bold (700) をリセット
   → .tsuku-bold の stroke との二重がけを防ぐ (v18.11) */
.detail-page h1,
.detail-page h2,
.detail-page h3,
.detail-page h4,
.detail-page h5,
.detail-page h6 {
  font-weight: 400;
}

/* ==========================================================================
   ヘッダー (Home準拠の動的挙動型) v20.5
   - position:fixed + 子は絶対配置 (Home opening__jomonow/logo と同構造)
   - JOMONÖW(リンク→Home) は上16px、ロゴ(アンカー→#top) はその下89px
   - body.is-scrolled (SPのみCSS反応): JOMONÖW が上へ流れて消え、ロゴが上端へ
   - body.jomonow-in-footer: フッター到達でヘッダー全体をフェードアウト
     (フッターの site-footer__brand-wrap が入れ替わりにフェードイン)
   ========================================================================== */
.detail-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;            /* 子を絶対配置するため高さ0 */
  z-index: var(--z-overlay);
  pointer-events: none;
  background-color: transparent;
  transition: opacity 0.3s var(--ease-out);
}

.detail-header__jomonow,
.detail-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;   /* v20.5: 子の利用可能幅(left:50%由来)に縛られず
                           reset の img{max-width:100%} で画像が縮まないようにする */
  display: block;
  pointer-events: auto;
  text-decoration: none;
  /* v38.7: top は --detail-px で scroll 連動(連続補間)するため transition しない
     (Home の .opening__* と同様、即時反映でないとスクロール追従が崩れる)。
     opacity のみ残す (フッター受け渡し/イントロ用)。 */
  transition: opacity 0.35s var(--ease-out);
}

/* v38.7: detail も Home と同じ連続 scroll 連動の emblem-only 化。
   detail-header.js が --detail-px = scrollY を毎フレーム設定し、
   JOMONÖW は上へ流れて画面外へ(opacity:1のまま)、エンブレムは中心128→66 を連続補間。
   base デフォルト 0px (JS実行前/イントロ中の calc 無効化を防ぐ)。 */
body {
  --detail-px: 0px;
}

.detail-header__jomonow {
  /* v38.7: lockup top:31 から --detail-px ぶん上へ連続流し (画面外へ, opacity:1のまま) */
  top: calc(31px - var(--detail-px));
}
.detail-header__logo {
  /* v38.7: lockup 中心128(top:107) → emblem-only 中心66(top:45) を --detail-px で連続補間 (Homeと一致) */
  top: max(45px, calc(107px - var(--detail-px)));
}

/* v21.4: JOMONÖW/ロゴの明るくなるホバーは撤去。
   ロゴのホバー反応はフッター流用の Lottie ワンショット (logo-motion.js) に統一。 */

/* v21.5: Lottie流用は挙動不安定のため撤去 → 負荷の低いCSSホバー(少し拡大+明るく)に変更。
   ロゴだけが対象 (JOMONÖWは無反応)。hover 可能端末のみ → SP/タッチでは無反応。 */
/* v21.9: ロゴのホバーは brightness ではなく色変更 (小豆#720b2e/琥珀#fdd700) のクロスフェードに。
   logo-hover.svg を base に重ね、hover時に opacity:1。hover可能端末のみ → SP無反応。 */
.detail-header__logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .detail-header__logo-hover { transition: opacity 0.3s var(--ease-out); }
  .detail-header__logo:hover .detail-header__logo-hover { opacity: 1; }
}

.detail-header__jomonow img {
  display: block;
  width: 225.7px;  /* Home の縮小後サイズ (v18.11) — 全ブレークポイント共通 */
  height: auto;
}

.detail-header__logo img {
  display: block;
  width: 48px;  /* Home の縮小後サイズ (v18.11) — 全ブレークポイント共通 */
  height: auto;
}

/* v38.7: 旧 discrete な is-scrolled トグル (JOMONÖW opacity:0 + emblem top:43, 0.35s transition) と
   js-scrolling override を撤去。スクロールでの JOMONÖW流し/emblem縮小は base の --detail-px 連続補間
   (calc(31px - detail-px) / max(45px, calc(107px - detail-px))) が全ビューポートで担う。
   戻りは smoothScrollToTopDetail が scrollY→0 へ JS スクロールし、apply() が毎フレーム --detail-px を
   更新するので、emblem/JOMONÖW が scroll に連動して滑らかに降りてくる (Home と同挙動)。 */
html.js-scrolling {
  scroll-behavior: auto;   /* JS スクロール中は native smooth と競合させない */
}

/* フッター到達: ヘッダーをフェードアウト (ブランドセットへバトンタッチ) */
body.jomonow-in-footer .detail-header {
  opacity: 0;
  pointer-events: none;
}

/* v20.6 演出①: 初回ロードで JOMONÖW → ロゴ の順にフェードイン。
   ※ 中央寄せ transform(translateX(-50%)) と競合させないため reveal は使わず
     opacity のみの keyframe を使用。backwards で再生前は不可視、
     再生後は通常の opacity (1) に戻り、is-scrolled/in-footer の遷移も生きる。 */
@keyframes detailHeaderIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.detail-header__jomonow {
  animation: detailHeaderIn 0.8s var(--ease-out) 0.1s backwards;
}
.detail-header__logo {
  animation: detailHeaderIn 0.8s var(--ease-out) 0.3s backwards;
}
/* v21.3: ファーストプレビュー以外 (intro-skip) はヘッダー登場アニメ無効 */
html.intro-skip .detail-header__jomonow,
html.intro-skip .detail-header__logo {
  animation: none;
}
/* v21.3: intro-skip は reveal 演出を完全無効化し全要素を即表示 (Hajimari用) */
html.intro-skip .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .detail-header__jomonow,
  .detail-header__logo { animation: none; }
}

/* fixed 化に伴うコンテンツ上余白 (旧 sticky ヘッダー約143px分を補償)
   → パターン上端 = 143 + margin-top24 = 167px (PC、従来同値) */
.detail-main {
  /* v21.8: 白地(ヘッダー)天地を Op-4 と同じ 130px に。
     パターン上端 = padding-top(106) + .detail-pattern margin-top(24) = 130px
     → logo中心(top109+h21=130) が境界をまたぐ (Op-4 と同一) */
  padding-top: 106px;
}

/* ==========================================================================
   ヘッダーパターン + DESIGN タイトル
   ========================================================================== */
.detail-pattern {
  position: relative;
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 24px;
}

.detail-pattern__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: none;
  z-index: var(--z-base);
}

.detail-pattern__title {
  position: relative;
  z-index: var(--z-content);
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  margin: 0;
}

/* ==========================================================================
   16:9 ヒーロー画像 (画面いっぱい、両端揃え)
   ========================================================================== */
.detail-hero {
  width: 100%;
  margin: 24px auto 0;  /* v21.3: DESIGNヘッダーと画像の間に24px */
}

.detail-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ==========================================================================
   メインタイトル (60pt / 行送り 105pt = 1.75)
   ガイド: ヒーロー画像下 114px の余白
   ========================================================================== */
.detail-title-block {
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 66px auto 0;                 /* タイトル上の余白 66px */
  position: relative;
  display: flex;
  justify-content: center;             /* v25.0: SVG単体をページ中央に (中央=はじまりは×デザインの間) */
  align-items: center;
}

.detail-title-block__main {
  margin: 0;
  line-height: 0;
}
.detail-title-block__main img {
  display: block;
  width: 485px;                        /* v24.9: SVG原寸 (viewBox 485.21) */
  height: auto;
}

.detail-title-block__sub {
  position: absolute;                  /* v25.0: SVG中央を崩さず左にぶら下げ */
  top: 50%;
  right: calc(50% + 306.5px);          /* SVG左端(50%-242.5) から64px左に右端 */
  transform: translateY(-50%);
  font-family: var(--font-tsuku-old);
  font-size: 32px;                     /* PC 32pt */
  line-height: var(--lh-base);
  letter-spacing: -0.05em;             /* v25.0: 文字を詰める */
  color: var(--color-wine-typo);
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;                 /* v25.0: 1列固定 (改列防止) */
}

/* タイトルブロック後の余白 → 罫線(リード前) (ガイド: 114px) */
.detail-title-block + .detail-divider {
  margin-top: 66px;
  /* v22.4: CONTENTS下の罫線(=.detail-toc幅)と長さを一致させる。toc と同じ幅式に揃える
     (PCは最低マージン68px死守で calc(100%-136px)) */
  width: calc(100% - 136px);
  max-width: 1024px;
}

/* ==========================================================================
   リード = 本の帯 (v21.3)
   haji-obi3.svg を背景に、PC 天地360px / SP 300px でマスク。
   背景はデザインヘッダー同様、幅100%(最大1800)で中央配置しオーバーフロー隠し。
   ========================================================================== */
.detail-lead--obi {
  position: relative;
  width: 100%;
  height: 360px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detail-lead__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1800px;
  height: auto;
  z-index: var(--z-base);
}
.detail-lead__inner {
  position: relative;
  z-index: var(--z-content);
  width: calc(100% - 48px);
  max-width: 1200px;
  text-align: center;
}

.detail-lead__main {
  font-family: var(--font-tsuku-old);
  font-size: 72px;            /* v21.3 ガイド: PC 72pt */
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  margin: 0;
  font-feature-settings: "palt" 1;  /* 約物半角 (タイトル/バナーと統一) */
}

.detail-lead__sub {
  font-family: var(--font-tsuku-old);
  font-size: 36px;            /* v21.3 ガイド: PC 36pt / 行送り63pt(=1.75) */
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  margin: 0.4em 0 0;
  font-feature-settings: "palt" 1;
}

/* リード後の余白 → 罫線(リード後) (ガイド: 60px) */
.detail-lead + .detail-divider {
  margin-top: 60px;
}

/* ==========================================================================
   罫線 (中央寄せ、ワインカラー)
   - 太い 3pt: リード前後
   - 細い 1pt: 目次見出し後、各エントリ間
   - width: 100% + max-width で正しい幅を確保
   ========================================================================== */
.detail-divider {
  border: none;
  background-color: var(--color-wine-typo);
  margin: 0 auto;
  width: 100%;
}

.detail-divider--thick {
  height: 3px;
}

.detail-divider--thin {
  height: 1px;
}

/* v68.8: まとめ購読ブロックを挟む罫線。CD指示 6px。
   章の罫線(3px)と差をつけ、ブロックを括る。SPは 3px (thick 2px の倍) */
.detail-divider--bundle {
  height: 6px;
}

.detail-divider--w1200 {
  max-width: 1200px;
}

.detail-divider--w1024 {
  max-width: 1024px;
}

.detail-divider--w1000 {
  max-width: 1000px;  /* v21.3: 章内継続の罫線 (1pt と併用) */
}

/* ==========================================================================
   目次セクション
   ガイド: 罫線後44px、目次見出し、44px後の罫線(W1024/1pt)
   ========================================================================== */
.detail-toc {
  /* v22.4: PCは右コンテンツアンカー(footprint約56px)が必ず収まる最低マージン68pxを死守
     (calc(100%-136px))。W1024上限なので広い画面は従来どおり中央1024。 */
  width: calc(100% - 136px);
  max-width: 1024px;
  margin: 44px auto 0;  /* ガイド: リード後罫線 → 目次見出し 44px */
}

.detail-toc__heading {
  font-family: var(--font-tsuku-old);
  font-size: 48px;
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  text-align: center;
  margin: 0;
}

/* v21.3: 「目次」→「CONTENTS」 Goudy 30pt */
.detail-toc__heading--goudy {
  font-family: var(--font-goudy);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: var(--ls-display);
}

/* 目次見出し後の罫線 (W1024/1pt、ガイド: 44px の余白) */
.detail-toc__heading + .detail-divider {
  margin-top: 44px;
}

/* ==========================================================================
   toc-entry: 各更新エントリ
   2列Grid: 左コンテンツ / 右サムネ(360px)
   行は auto で3行構成:
     Row1: 1/20 (左) ‖ 日付 (右)
     Row2: タイトル/内容 (左) ‖ サムネ (右、上端揃え)
     Row3: (空) ‖ SNSアイコン (右)
   ========================================================================== */
.toc-entry {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: 48px;
  row-gap: 16px;
  padding: 44px 10px;  /* v19.10: 上下 24→44px、左右10px (CD指示) */
  /* v20.0: アンカークリック時、ロゴ中心 (Y=108px) が罫線位置に来るオフセット */
  scroll-margin-top: 108px;
}

/* 1/20 (Goudy 30pt) */
.toc-entry__index {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-goudy);
  font-size: 30px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  white-space: nowrap;
}

/* 日付 (Goudy 30pt、右寄せ、1/20と同じ高さ) */
.toc-entry__date {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-goudy);
  font-size: 30px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  text-align: right;
  white-space: nowrap;
  margin: 0;
}

.toc-entry__status-label {
  font-style: normal;   /* v31.0: 「 Scheduled」(先頭半角空き)。公開後はJSなしdata-statusで非表示 */
}
/* v68.1: 月相 ● 新月 / ○ 満月。日付と同サイズ (1em) で組む。CD指示により
   「●＋半角アキ＋Sep.11,2026」。コロンは廃止。--moon-size / --moon-shift が調整ノブ。 */
.toc-entry__moon {
  font-family: var(--font-tsuku-old);
  font-size: var(--moon-size, 0.7em);   /* v68.2: 日付30px時に21px。CD指定 */
  letter-spacing: 0;
  position: relative;
  top: var(--moon-shift, 0);
}

/* v31.1: 目次見出し内の欧文/和文サイズ出し分け (CD指示)
   .toc-en      = 03/15 の欧文引用句  Goudy 36(PC)/21(SP) ＊SP行替え
   .toc-jomonow = 19 の JOMONÖW        Goudy 48(PC)/31(SP)
   .toc-imani   = 19 の〜縄文をイマに〜 Tsuku-bold 36(PC)/28(SP) ＊SP行替え */
.toc-en {
  font-family: var(--font-goudy);
  font-size: 36px;
  letter-spacing: 0;                       /* v31.7: 中間=0 (詰めも開きも無し)。調整ノブ */
  font-feature-settings: normal;          /* v31.5: 親.tsuku-boldのpalt継承を解除 */
  -webkit-text-stroke: 0 transparent;
}
/* v41.8: 欧文Goudy化ユーティリティ(サイズ継承版・CD指示)。訪問地英題/参考文献の括弧内英字に使用。
   全角括弧はtsukuのまま(Goudyに全角グリフ無し=フォールバック乱れ防止で英字のみ囲む) */
.toc-goudy {
  font-family: var(--font-goudy);
  letter-spacing: 0;
  font-feature-settings: normal;
  -webkit-text-stroke: 0 transparent;
}
.toc-jomonow {
  font-family: var(--font-goudy);
  font-size: 48px;
  letter-spacing: 0;                       /* v31.7: 中間=0。調整ノブ */
  font-feature-settings: normal;          /* v31.5: 同上 */
  -webkit-text-stroke: 0 transparent;
}
/* v42.1: 11/12+12/12 ペア構造 (CD指示・罫線で区切り/ボタン共有) — PC: W250 1pt罫・上下42px(row-gap16込み=margin26)。
   access は r2〜r5 を貫き align-self:end → ボタン下端=あとがき下端 */
.toc-entry--pair .toc-entry__content { grid-column: 1; grid-row: 2; }
.toc-entry--pair .toc-entry__pair-divider {
  grid-column: 1 / -1; grid-row: 3;
  width: 250px; justify-self: center;
  border: 0; border-top: 1px solid var(--color-wine-typo);
  margin: 44px 0 26px;                  /* 上=sublist margin18+gap16+44…実効42 / 下=gap16+26=42 */
  scroll-margin-top: 108px;             /* v42.2: アンカー12着地=罫線がロゴ天地センター(Y108) CD指示 */
}
.toc-entry--pair .toc-entry__index--second { grid-column: 1; grid-row: 4; margin: 0; }
.toc-entry--pair .toc-entry__content--second { grid-column: 1; grid-row: 5; }
.toc-entry--pair .toc-entry__access { grid-row: 2 / 6; }
/* v41.1: 末尾メタ(訪問地/参考文献)= index/date行なし→content/accessを1行目へ。日付ボタンはnote無 */
.toc-entry--meta .toc-entry__content,
.toc-entry--meta .toc-entry__access { grid-row: 1; }
.toc-entry--meta-top .toc-entry__content,
.toc-entry--meta-top .toc-entry__access { align-self: start; }   /* 訪問地=上揃え(CD指示) */
.toc-entry--meta-top .toc-entry__content { margin-top: -5px; }   /* v41.7: 縄文訪問地を5px上へ (CD指示) */
/* v41.7: 訪問地/参考文献ボタン = Almost here... (Goudy 28pt・CD指示。日付表記を置換) */
.toc-schedb--almost .toc-schedb__date { font-size: 26px; }  /* v49.0: 28→26 (CD指示。単一ルールのため全幅26px=SP/TABも約92%縮小) */
/* v41.1: 11/11 あとがき直前のハイフン区切り */
.toc-entry__dash { margin: 0; color: var(--color-wine-typo); font-family: var(--font-tsuku-old); font-size: 26px; line-height: 1.75; }
.toc-imani {
  font-family: var(--font-tsuku-old);
  font-size: 28px;                        /* v41.0: 〜縄文をイマに〜 28pt (CD指示。旧36) */
}

/* v31.1: ch19 = 金背景(#e1b41f) のため文字は wine(#720b2e)。ロックは wine版(HTML側 lock.svg) */
#toc-19 .toc-note,
#toc-19 .toc-note__de { color: #720b2e; }
/* v32.0 TODO: ch19は金背景→noteロゴ(金固定)が見えない。公開時にwine版ロゴ差替えが必要 */

/* v31.3: SP (≤481) — 月相/見出し欧文の縮小・SP行替え */
@media (max-width: 481px) {
  .toc-en   { font-size: 21px; display: block; }   /* SP行替え */
  .toc-jomonow { font-size: 31px; }
  .toc-imani { font-size: 28px; display: block; }   /* SP行替え */
}

/* v31.3: PC(≥1025=コンテナW1024) は見出し行を折返さない (CD指示)。
   本文列(1fr≈596px)を越えて右の余白(=ロックは下端・日付は上段で当該行は空き)へ伸ばす。
   TAB(≤1024)/SP は従来どおり折返し＋SP行替え。 */
@media (min-width: 1025px) {
  .toc-entry__title,
  .toc-entry__phase,
  .toc-entry__sub-heading { white-space: nowrap; }
}

/* See You Next Full Moon (右上、日付の位置) */
.toc-entry__status-msg {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-goudy);
  font-size: 24px;
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  text-align: right;
  margin: 0;
  font-style: normal;   /* v21.6: イタリック→正体 (CD指示) */
}

/* 左コンテンツ (タイトル/サブ項目) */
.toc-entry__content {
  grid-column: 1;
  grid-row: 2;  /* v20.2: media-col と同じ row 2 (両方とも上端から開始) */
  min-width: 0;
}

/* タイトル (1/20「はじめに」など) — 48pt / 84pt */
.toc-entry__title,
.toc-entry__phase {
  font-family: var(--font-tsuku-old);
  font-size: 48px;
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  margin: 0;
  font-feature-settings: "palt" 1;
}

/* 見出し1 (sub-heading) — 28pt / 49pt */
.toc-entry__sub-heading {
  font-family: var(--font-tsuku-old);
  font-size: 36px;
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  margin: 0;
  padding-left: 1em;
  font-feature-settings: "palt" 1;
}

/* 見出し1 (sublist top) */
.toc-entry__sublist {
  list-style: none;
  padding-left: 1em;
  margin: 0;
  font-family: var(--font-tsuku-old);
  font-size: 36px;
  line-height: var(--lh-body);   /* v25.8: 一覧リスト 200% */
  color: var(--color-wine-typo);
  font-feature-settings: "palt" 1;
}

/* 見出し2 (sublist ネスト) — 24pt */
.toc-entry__sublist ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
  font-size: 24px;
}

/* v28.1: 5/20冒頭「縄文中期〜後期〜晩期〜弥生初頭」は 4/20「土偶デザインの
   全体像」の続き(サイズ③)。以降の「土偶の稀少性」等は通常の②(36px)。
   ③はネストul相当の深さ(計2em)・24pxに揃える */
.toc-entry__sublist .toc-entry__sub3 {
  font-size: 24px;
  padding-left: 1em;
}

/* 番号付きリスト (なぜリスト) — 24pt / 42pt */
.toc-entry__numlist {
  list-style: none;
  padding-left: 2em;
  margin: 0;
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: var(--lh-body);   /* v25.8: 一覧リスト 200% */
  color: var(--color-wine-typo);
  font-feature-settings: "palt" 1;
  counter-reset: numlist;
}

.toc-entry__numlist > li {
  counter-increment: numlist;
  position: relative;
}

.toc-entry__numlist > li::before {
  content: counter(numlist, decimal-leading-zero) "◉";  /* v24.9: 01~ ゼロ詰め */
  margin-right: 0.25em;
}

/* ==========================================================================
   右カラム: サムネ + リンクアイコン (v20.2 で wrapper化)
   ========================================================================== */

/* media-col: サムネとSNSをまとめた縦flex (v20.2)
   - サムネ→SNS の間隔を gap で 24px に固定
   - サムネは margin-top 20px (タイトルから20px下) */
.toc-entry__media-col {
  grid-column: 2;
  grid-row: 2;  /* v20.2: content と同じ row 2 (両方とも上端から開始) */
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: start;
  margin-top: 20px;
}

/* サムネ枠 (W360 × H202.5、角R 10px、罫線W1024と右端揃え) */
.toc-entry__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  aspect-ratio: 16 / 9;
  position: relative;
  right: -10px;  /* 罫線W1024と右端揃え (親padding-rightキャンセル) */
  background-color: rgba(114, 11, 46, 0.08);
  border-radius: 10px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.toc-entry__thumb:hover {
  background-color: rgba(114, 11, 46, 0.15);
}

.toc-entry__thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(114, 11, 46, 0.4);
}

.toc-entry__thumb-placeholder .link-icon--lg {
  width: 56px;
  height: 56px;
}

.toc-entry__thumb--scheduled {
  cursor: default;
}

.toc-entry__thumb--scheduled:hover {
  background-color: rgba(114, 11, 46, 0.08);
}

/* SNSアイコン (v20.3: media-col 内の flex item、 サムネとは違って 罫線W1024 と揃え (10px内側)) */
.toc-entry__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  /* v20.3: PCはサムネより10px内側 (はみ出しなし、CD指示) */
  /* 一番大きい Spotify アイコンを基準に揃えるのは align-items: center で実現 */
}

.toc-entry__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-wine-typo);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.toc-entry__links a:hover {
  opacity: 0.7;  /* v21.7: 1px移動(translateY)を撤去、フッターSNSと同じ明るくなる挙動に (CD指示) */
}

/* SVGアイコン原寸サイズ */
.link-icon {
  display: block;
  fill: currentColor;
}

/* SNSアイコン個別サイズ (v20.3: 部分一致 *= で「(準備中)」付きにも対応) */
.toc-entry__links li:has([aria-label*="YouTube"]) .link-icon { width: 19.05px; height: 13.33px; }
.toc-entry__links li:has([aria-label*="Spotify"]) .link-icon { width: 21px; height: 21px; }       /* 一番大きい (Spotify基準) */
.toc-entry__links li:has([aria-label*="Podcast"]) .link-icon { width: 17.73px; height: 19.56px; }
.toc-entry__links li:has([aria-label*="note"]) .link-icon    { width: 13.33px; height: 13.19px; }

.link-icon--lg {
  width: 56px;
  height: auto;
}

/* ==========================================================================
   状態別レイアウト
   ========================================================================== */

/* text-only: 右カラム不要、全幅で左コンテンツのみ */
.toc-entry[data-status="text-only"] {
  grid-template-columns: 1fr;
}

.toc-entry[data-status="text-only"] .toc-entry__content {
  grid-column: 1;
  grid-row: 2;
}

/* see-you: サムネなし、status-msg のみ右上に */
.toc-entry[data-status="see-you"] .toc-entry__content {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ==========================================================================
   Almost Here…
   ========================================================================== */
.detail-toc__almost {
  margin-top: 48px;
  padding: 44px 0;  /* v19.10: 48→44 (CDガイド準拠) */
  text-align: center;
}

.detail-toc__almost-text {
  font-family: var(--font-goudy);
  font-size: 48px;  /* v19.10: 42→48 (CD指示) */
  line-height: 1;
  color: var(--color-wine-typo);
  letter-spacing: var(--ls-display);
  margin: 0;
  /* v20.0: italic 解除 (CD指示) */
}

/* ==========================================================================
   フッター
   ========================================================================== */
.detail-page .site-footer {
  margin-top: 0;   /* v21.4: gapはパンくず上へ移動 → パンくず帯がフッターに密着 */
}

/* v20.6: 旧「ブランドセット常時表示」override は撤去。
   footer.css の base (opacity:0) → body.jomonow-in-footer で opacity:1 に従い、
   ロゴがフッターに差しかかった時だけ入れ替わりで登場する (Home と同仕様)。 */

/* ==========================================================================
   TAB対応 (482px〜1024px) — v19.5
   ベース仕様の約70-80%スケール
   ========================================================================== */
@media (max-width: 1024px) {

  /* ヘッダー: 全ブレークポイント Home サイズ (225.7/48) に統一済。 */

  /* hero バナー: TAB は 5:4 (design-1-tab.png / W1000) */
  .detail-hero__img { aspect-ratio: 5 / 4; }
  /* v22.0: DESIGNヘッダー↔画像のマージンは SP/TAB は 12px (PCは24px / Home共有済) */
  .detail-hero { margin-top: 12px; }

  /* DESIGN パターンタイトル (高さはPC同じ130px、タイトルだけ縮小) */
  .detail-pattern__title { font-size: 34px; }

  /* メインタイトル (guide: 36 / 32) */
  .detail-title-block { margin-top: 80px; }
  .detail-title-block__main { font-size: 36px; }
  .detail-title-block__sub { font-size: 32px; }
  .detail-title-block + .detail-divider { margin-top: 80px; }

  /* リード(帯) (guide: 48 / 24、天地300px) */
  .detail-lead--obi { height: 300px; }
  /* v22.1: 背景パターンを帯全体に左右目一杯 (cover)。
     旧 height駆動+min-width:100% は広いTABでSVGがletterboxされ左右に隙間が出ていた。 */
  .detail-lead__bg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    min-width: 0;
    max-width: none;
  }
  .detail-lead__main { font-size: 48px; }
  .detail-lead__sub { font-size: 24px; }

  /* 目次: コンテンツ列を罫線(W900)と同幅にし、テキスト左右マージンを罫線端から10px共通に。
     v22.4: TAB は左右マージンを48pxに広げる (アンカーとの余白確保 / calc(100%-96)) */
  .detail-toc { margin-top: 30px; width: calc(100% - 96px); max-width: 900px; }
  .detail-toc__heading { font-size: 38px; }
  .detail-toc__heading--goudy { font-size: 30px; }
  .detail-toc__heading + .detail-divider,
  .detail-toc__subtitle + .detail-divider { margin-top: 30px; }

  /* 罫線 W900px (guide) */
  .detail-divider--w1024,
  .detail-divider--w1000 { max-width: 900px; }
  /* v22.4: トップ罫線も toc と同幅(calc(100%-96) / 48pxマージン)に揃える */
  .detail-title-block + .detail-divider { width: calc(100% - 96px); max-width: 900px; }

  /* エントリ (guide: Youtube W342 を罫線右端揃え。本文が1fr) */
  .toc-entry {
    grid-template-columns: 1fr 342px;
    column-gap: 32px;
    padding: 20px 10px;
  }
  .toc-entry__index { font-size: 24px; }        /* guide 24pt */
  .toc-entry__date { font-size: 24px; }
  .toc-entry__status-msg { font-size: 20px; }
  .toc-entry__title,
  .toc-entry__phase { font-size: 40px; }         /* guide 40pt */
  .toc-entry__sub-heading { font-size: 28px; }   /* 見出し2 28pt */
  .toc-entry__sublist { font-size: 28px; }       /* 見出し2 28pt */
  .toc-entry__sublist ul { font-size: 21px; }    /* 見出し3 21pt */
  .toc-entry__sublist .toc-entry__sub3 { font-size: 21px; }   /* v58.4: 見出し3と同じ扱い */
  .toc-entry__numlist { font-size: 21px; }

  /* サムネ Youtube W342 (guide。media-col内で最大342・狭幅は縮小) */
  .toc-entry__thumb { width: 100%; max-width: 342px; }
  .toc-entry__thumb--scheduled { width: 100%; max-width: 342px; }
  .toc-entry__links { gap: 14px; }

  /* Almost Here */
  .detail-toc__almost-text { font-size: 34px; }
}

/* ==========================================================================
   TAB 狭帯 (482〜700px) — v22.0
   2カラムだと罫線まわり/本文が窮屈になる (CD指示: W700 から1カラム)。
   フォントサイズは TAB(≤1024) 値を維持し、エントリのグリッドのみ1カラム化。
   ========================================================================== */
@media (min-width: 482px) and (max-width: 900px) {
  .toc-entry {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
    padding: 20px 10px;
  }
  .toc-entry__index { grid-column: 1; grid-row: 1; }
  .toc-entry__date,
  .toc-entry__status-msg { grid-column: 1; grid-row: 1; justify-self: end; }
  .toc-entry__content { grid-column: 1; grid-row: 2; }
  .toc-entry[data-status="see-you"] .toc-entry__content { grid-column: 1; grid-row: 2; }
  .toc-entry__media-col {
    grid-column: 1;
    grid-row: 3;
    margin-top: 16px;
    width: 100%;
    align-items: center;   /* サムネ・SNS を中央寄せ */
  }
  .toc-entry__thumb,
  .toc-entry__thumb--scheduled { width: 100%; max-width: 342px; }
  .toc-entry__links {
    width: 100%;
    justify-content: flex-end;
    gap: 14px;
    padding-right: 10px;
  }
}

/* ==========================================================================
   SP対応 (〜481px) — v19.5
   1列レイアウト、タイトル下にサムネ
   ========================================================================== */
@media (max-width: 481px) {

  /* ヘッダー: v21.8 — Op-4 と同じ白地130px。パターン上端 = padding-top(106)+margin24 = 130px */
  .detail-main { padding-top: 106px; }

  /* v38.7: SP の is-scrolled discrete 規則は撤去。JOMONÖW流し/emblem縮小は base の
     --detail-px 連続補間が全ビューポート共通で担う。 */

  /* task4 (v20.6): コンテンツアンカークリック時、罫線がロゴ上下センターに来る。
     SP スクロール後ロゴ中心 = top43 + 高(42.3)/2 ≒ 64px (v34.0で64へ)。
     → PC ではなく 64px に上書き (PCと同じ「罫線=ロゴ中心」仕様) */
  .toc-entry {
    scroll-margin-top: 64px;
  }

  /* task2: DESIGN パターン帯を 130px いっぱいに充填 (天地の隙間をなくす)
     高さ基準で拡大し、幅は自動 (最低でも画面幅) → 中央トリミング */
  .detail-pattern__bg {
    height: 130px;
    width: auto;
    min-width: 100%;
    max-width: none;
  }

  /* DESIGN パターンタイトル (v20.6: SP 38px ← CD指示。高さは PC同じ130px) */
  .detail-pattern__title { font-size: 38px; }

  /* v20.4: SP ではHero画像が縦長 design-1-sp.png (390×488) に切替 */
  .detail-hero__img {
    aspect-ratio: 390 / 488;
  }

  /* メインタイトル */
  .detail-title-block { margin-top: 42px; flex-direction: column; gap: 42px; }
  .detail-title-block__main img { width: 242.6px; }   /* v24.9: SVG 50% */
  .detail-title-block__sub { position: static; transform: none; right: auto; font-size: 24px; writing-mode: horizontal-tb; }  /* SP: 横組み24pt(v31.8 21→24 CD指示)・絶対配置解除 (文字詰めは基底palt継承) */
  .detail-title-block + .detail-divider { margin-top: 42px; }

  /* 太罫線 → SPでは2px (3pt→2px、視覚的に同等) */
  .detail-divider--thick { height: 2px; }
  .detail-divider--bundle { height: 4px; }

  /* リード(帯) SP: 天地300px、背景はheight駆動で帯を充填 */
  .detail-lead--obi { height: 300px; }
  .detail-lead__bg { height: 300px; width: auto; min-width: 100%; max-width: none; }
  .detail-lead__main { font-size: 36px; }
  .detail-lead__sub { font-size: 18px; }

  /* 目次 */
  .detail-toc { margin-top: 20px; }
  .detail-toc__heading { font-size: 28px; }
  .detail-toc__heading--goudy { font-size: 24px; }
  .detail-toc__heading + .detail-divider,
  .detail-toc__subtitle + .detail-divider { margin-top: 20px; }

  /* エントリ: 1列レイアウトに */
  .toc-entry {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
    padding: 20px 0;
  }
  .toc-entry__index {
    grid-column: 1;
    grid-row: 1;
    font-size: 21px;  /* v20.4: 28→21px (CDガイド Goudy 21pt 数字そのまま) */
  }
  /* 日付は 1/20 と同じ行に置いたまま右寄せ */
  .toc-entry__date {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    font-size: 21px;  /* v20.6: 14→21px (CD指示。日時を 1/20 と同サイズに) */
  }
  .toc-entry__status-msg {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    font-size: 21px;  /* v20.6: date と揃える */
  }
  /* コンテンツ */
  .toc-entry__content {
    grid-column: 1;
    grid-row: 2;
  }
  /* v20.5: フォントサイズ (CD赤字スクショ準拠)
     - エントリタイトル/Phase: 34px (tsuku-bold 34pt) ← v20.4の36pxから修正
     - sub-heading: 24px
     - sublist: 18px */
  .toc-entry__title,
  .toc-entry__phase { font-size: 30px; }                                  /* ① SP30 */
  .toc-entry__sub-heading { font-size: 21px; padding-left: 0.5em; }       /* ② SP21 */
  .toc-entry__sublist { font-size: 21px; padding-left: 0.5em; }           /* ② SP21 */
  .toc-entry__sublist ul { font-size: 16px; padding-left: 0.7em; }        /* ③ SP16 */
  .toc-entry__sublist .toc-entry__sub3 { font-size: 16px; padding-left: 0.7em; }   /* v58.4: 見出し3と同じ扱い */
  .toc-entry__numlist { font-size: 16px; padding-left: 1.2em; }           /* ③ SP16 */

  /* v20.2: SP では media-col を 1列 grid の row 3 に配置 */
  .toc-entry__media-col {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;  /* SP では PC の 20px をリセット */
    width: 100%;
    align-items: center;  /* v20.3: サムネとSNS を中央寄せ */
  }

  /* v20.3 サムネ幅 SP: 342px (CDガイド)、 画面が狭ければ画面いっぱい */
  .toc-entry__thumb {
    width: 342px;
    max-width: 100%;
    right: 0;  /* はみ出しキャンセル */
  }
  .toc-entry__thumb--scheduled {
    width: 342px;
    max-width: 100%;
    right: 0;
  }

  /* SNSアイコン (v20.8: 中央寄せ → 右端10px内側、PC同様 / CD指示) */
  .toc-entry__links {
    width: 100%;            /* media-col 内で全幅化 → flex-end が右端まで効く */
    justify-content: flex-end;
    gap: 16px;
    right: 0;
    padding-right: 10px;    /* 右端から10px内側 */
  }

  /* see-you: コンテンツを1列幅で */
  .toc-entry[data-status="see-you"] .toc-entry__content {
    grid-column: 1;
    grid-row: 2;
  }

  /* Almost Here */
  .detail-toc__almost { padding: 32px 0; }
  .detail-toc__almost-text { font-size: 26px; }

  /* v42.1: ペア(11+12) SP — 罫線W80 1pt・上下42px(row-gap12込み=margin30)。access=最下段 */
  .toc-entry--pair .toc-entry__pair-divider { width: 80px; margin: 30px 0; scroll-margin-top: 64px; }  /* v42.2: SP着地=罫線がロゴ中心(64) */
  .toc-entry--pair .toc-entry__index--second { grid-row: 4; }
  .toc-entry--pair .toc-entry__content--second { grid-row: 5; }
  .toc-entry--pair .toc-entry__access { grid-column: 1; grid-row: 6; }
  /* v42.3: 〜縄文をイマに〜 SP=18pt・JOMONÖW「直下」センター・行マージン24px。
     v42.2のinline-block+block子はベースラインが最終行(imani)基準になり Epoch: と行が割れるバグ
     → imaniを絶対配置(wrap=単一行ボックス=Epoch:と同ベースライン維持)+phase下に余白確保 */
  .toc-jomonow-wrap { position: relative; display: inline-block; }
  .toc-imani {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 0; font-size: 18px; white-space: nowrap;      /* 実効行間10px (CD指示) */
  }
  .toc-entry--pair .toc-entry__phase { padding-bottom: 43px; }  /* imani+間10+下余白12の領域確保 (CD指示) */
  /* v42.1: 末尾メタ(訪問地/参考文献) SP=1列に戻す (grid-row:1強制で重なるバグ修正) */
  .toc-entry--meta .toc-entry__content { grid-row: 2; }
  .toc-entry--meta .toc-entry__access { grid-row: 3; }
  .toc-entry--meta-top .toc-entry__content { margin-top: 0; }
  /* v52.1: 日付付きメタ(訪問地/参考文献)のSP=日付row1・本文row2・ボタンrow3で縦積み。
     content/accessは既存の --meta ルール(row2/row3)を継承。日付のrow1のみ明示。 */
  .toc-entry--meta-dated .toc-entry__date { grid-row: 1; }

  /* フッター */
  .detail-page .site-footer { margin-top: 64px; }
}

/* ==========================================================================
   コンテンツアンカー (画面右端の 1〜20 番号) v19.10
   1/20 (#toc-1) が viewport に入った時点で fade-in
   ========================================================================== */
.toc-anchor {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));   /* v45.9: iPhone横向きのカメラ位置を避け、章アンカー(番号)が読めるように */
  top: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}

.toc-anchor.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.toc-anchor__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;  /* 数値間隔 */
}

.toc-anchor__item {
  font-family: var(--font-goudy);
  font-size: 21px;
  color: var(--color-wine-typo);
  text-decoration: none;
  letter-spacing: var(--ls-display);
  line-height: 1;
  display: block;
  text-align: center;
  min-width: 1.5em;
  /* v20.8: ホバー/クリックで反応 (拡大+ゴールド)。右端基準で左へ伸ばし見切れ防止 */
  transform-origin: right center;
  transition:
    opacity 0.2s ease,
    transform 0.18s var(--ease-out),
    color 0.18s ease;
}

/* ホバー: ぐっと拡大してゴールドに (リンク=1〜10 のみ) */
a.toc-anchor__item:hover {
  opacity: 1;
  color: var(--color-yellow);
  transform: scale(1.5);
}
/* クリック押下: 少し戻して「押した」感 */
a.toc-anchor__item:active {
  transform: scale(1.25);
}

/* B (v20.10): 現在地 — ロゴ中心ラインを通過中のセクション番号を点灯。
   ホバーと同系統 (ゴールド) だが常時表示なので拡大は控えめに。
   detail-header.js が .is-current を付与/解除。 */
a.toc-anchor__item.is-current {
  opacity: 1;
  color: var(--color-yellow);
  transform: scale(1.35);
}
/* 手動ホバー中はホバー側を優先 (二重強調を避ける) */
.toc-anchor:hover a.toc-anchor__item.is-current:not(:hover) {
  color: var(--color-wine-typo);
  transform: scale(1);
}

/* v23.5: 5〜20=未解禁は50%表記 (機能は稼働。is-current/hoverで100%点灯) */
.toc-anchor__item--dim {
  opacity: 1;   /* v32.1: 半透明廃止(全章100%) */
}

/* TAB/SP でもアンカー表示 (v20.2 CD指示)
   font-size 12px (Goudy 12pt 数字そのまま)、 right 10px に縮小 */
@media (max-width: 1024px) {
  .toc-anchor {
    right: 10px;
  }
  .toc-anchor__item {
    font-size: 18px;  /* v21.10: guide TAB Goudy 18pt (旧12px) */
    min-width: 1.2em;
  }
  .toc-anchor__list {
    gap: 1.0em;
  }
}

/* v22.1b: 右コンテンツアンカーは消さずに常時表示。
   縮小は「2カラムでサムネが罫線右端に来る 701〜979px」のみに限定
   (この帯だけ余白24pxにサムネ右端が来てアンカーが被るため)。
   ≤700 (1カラム) と SP は従来サイズ(18px)のまま。 */
/* v22.4: TABの左右マージンを48pxに広げたため、701〜979の縮小は不要に。
   アンカーは ≤1024 の 18px のまま (SPのみ 12px)。被りは48px余白で解消。 */

/* ==========================================================================
   SP用 改行制御 .br-sp (PC/TABでは消す、SPでのみ改行) v19.10
   ========================================================================== */
.br-sp { display: none; }

@media (max-width: 481px) {
  .br-sp { display: inline; }

  /* SP: 目次コンテンツ幅 = 左右24pxインセット (赤字スクショの緑ガイド)
     v20.5: 旧 width:100% (viewport基準) から calc(100%-48px)=342 に修正。
     これにより index(左) / date(右) / 罫線がすべて24pxガイドに揃う。 */
  .detail-toc {
    width: 312px;  /* v24.5: SP全体W=312px (アンカー被り回避) */
    max-width: none;
  }

  /* SP: エントリ上下32px、左右0 (ガターは index/content/date の padding 10px で付与) */
  .toc-entry {
    padding: 32px 0;
  }

  /* SP: SNSアイコン (v20.8: 右端寄せに統一。中央寄せ override は撤去) */
  .toc-entry__links {
    justify-content: flex-end;
  }

  /* SP: 罫線幅 = toc幅いっぱい (342px / 24pxインセット)。
     v20.5: 赤字スクショ「罫線 W342px/1pt」準拠。太/細とも342に統一。 */
  .detail-divider--w1200,
  .detail-divider--w1024 {
    width: 100%;       /* 親(.detail-toc)が342。直下childの--w1024は342 */
    max-width: none;
  }
  /* タイトル/リード間の太罫線(--w1200)は .detail-main 直下 (親=390) なので
     個別に342へ揃える */
  .detail-main > .detail-divider--w1200 {
    width: calc(100% - 48px);  /* 390 - 48 = 342 */
  }

  /* SP: コンテンツアンカー番号を右端から4px (赤字スクショ準拠)。
     フォントは以前の 12px に (18pxは大きすぎ。12pxで本文/日付にも被らない) */
  .toc-anchor {
    right: 14px;   /* v24.5: SP 右端から14px */
  }
  .toc-anchor__item { font-size: 12px; min-width: 0; }
}

/* ==========================================================================
   v46.2: 横向きスマホ — 右端番号ナビ(00〜12の13個)を画面高に収める
   ---
   現状 font21px/gap1.2em では13個の縦高さ≒573pxで、横向き画面高(390-440px)を
   超過し 00・01・12 が上下に見切れる(CD実機確認・Chrome/Brave共通)。
   font12px + gap圧縮で13個≒300pxに収め、00〜12すべてを表示。
   判定は Statement/Manifest と同じ (orientation:landscape) and (max-height:500px)。
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .toc-anchor__list {
    gap: 12px;                 /* 1.2em(≒25px) → 12px に圧縮 */
  }
  .toc-anchor__item {
    font-size: 12px;
    min-width: 0;
  }
  /* v46.3: Braveは横向きで env(safe-area-inset-right) を fixed要素に反映せず、
     番号ナビが画面右端に貼り付く(Chromeは右端から≒69px内側=実測)。
     max()で最低マージンを保証: env が効く Chrome は 24px+env、効かない Brave も 60px 確保。
     本文マージン(html padding)と視覚的に揃い、番号ナビがマージン内に収まる。 */
  .toc-anchor {
    right: max(calc(24px + env(safe-area-inset-right)), 60px);
  }
}

/* ==========================================================================
   パンくずリスト (v21.3) — フッター直前のバー
   ガイド: H72px / 背景 #e7e6e6 / tsuku-bold 16pt
   ========================================================================== */
.detail-breadcrumb {
  width: 100%;
  min-height: 64px;   /* v34.0: 64px共通 (リバースヘッダー/スクロール後ロゴ中心と統一, 旧72) */
  margin-top: 100px;   /* v21.4: gapはパンくず上へ → パンくずはフッターに密着 */
  background-color: #e7e6e6;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* v21.4: 右寄せ */
}
.detail-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 12px 48px 12px 24px;   /* v21.4: 右端48px */
  font-family: var(--font-tsuku-old);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-wine-typo);
  /* v21.4: tsuku-bold (オプティカル太らせ) */
  -webkit-text-stroke-width: calc(1em * 0.02083);
  -webkit-text-stroke-color: currentColor;
  paint-order: stroke fill;
}
.detail-breadcrumb__list li { display: inline-flex; align-items: center; }
.detail-breadcrumb__list li + li::before {
  content: "/";
  margin: 0 0.6em;
  opacity: 0.5;
  color: var(--color-wine-typo);   /* 「/」は常に小豆色 (現ページ06の金を継承しない) */
}
.detail-breadcrumb__list a {
  color: var(--color-wine-typo);
  text-decoration: none;
  display: inline-block;                       /* transform 適用のため */
  transition: transform 0.2s var(--ease-out);
}
/* v40.7: 下線廃止 → 左へ-4px (戻る/章ナビprev 呼応・色は小豆のまま)。CD採用=見本3′ */
.detail-breadcrumb__list a:hover { transform: translateX(-4px); }
.detail-breadcrumb__list [aria-current="page"] { color: #e1b41f; }  /* v21.4: 現ページ=ゴールド */

@media (max-width: 481px) {
  .detail-breadcrumb__list {
    font-size: 13px;       /* SP: 14ptでは折返すため13pt (CD指示) */
    letter-spacing: -0.02em;  /* SP: 文字詰めを緩く (折返さない範囲) */
    padding: 20px 24px;   /* SP: 天地60px (上下20px+行20px) */
  }
  .detail-breadcrumb__list li + li::before { margin: 0 0.4em; }
}

/* ==========================================================================
   v21.4 SP 微調整 (CD赤字スクショ準拠)
   ========================================================================== */
@media (max-width: 481px) {
  /* Designヘッダー↔画像のマージン 12px */
  .detail-hero { margin-top: 12px; }

  /* v22.4: SP は左右24pxマージン死守。toc幅を24pxに戻す(TAB帯の48px継承を打ち消す) */
  .detail-toc { width: 312px; }

  /* 1本目の罫線(タイトル→CONTENTS) を CONTENTS下の罫線(=toc幅)と一致させる。
     toc は calc(100%-48)/max900 なので同値に (旧 max342固定は481で短すぎたため撤去) */
  .detail-title-block + .detail-divider {
    width: 312px;              /* v24.6: CONTENTS上罫線も全体W312に統一 */
    max-width: none;
  }

  /* 1/20・はじめに は 10px 右に / 日付は 10px 左に */
  .toc-entry__index   { padding-left: 10px; }
  .toc-entry__content { padding-left: 10px; }
  .toc-entry__date,
  .toc-entry__status-msg { padding-right: 10px; }

  /* パンくず帯はフッターに密着 (gapはパンくず上へ) */
  .detail-breadcrumb { margin-top: 40px; }   /* SP: 章ナビ〜パンくず 40px */
  .detail-page .site-footer { margin-top: 0; }

  /* 5/20 SP: 見出し2(18px)、インデントを「縄文中期〜」(left54)に揃える */
  #toc-5 .toc-entry__sublist {
    font-size: 18px;
    line-height: var(--lh-body);   /* v25.8 */
    padding-left: 30px;
  }
  /* v31.5: 「縄文中期〜後期〜晩期〜弥生初頭」= 見出し③ は sublist②(18px)より小さく */
  #toc-5 .toc-entry__sub3 { font-size: 16px; }
}

/* ==========================================================================
   v23.2: アクセス/価格ブロック (旧 media-col を置換)
   - 無料章:「無料公開 →」/ 有料章(4): 価格 +「購入手続へ」ボタン
   - 矢印は Design① の矢印 (arrow.js) を流用。100%=ホバーうねり / 50%=反応なし
   - 縦位置: 下罫線から44px (entry padding-bottom 44px + align-self:end)
   - 価格・章番号は index.html の該当1箇所で差し替え可 (将来WPフィールド化)
   ========================================================================== */
.toc-entry__access {
  grid-column: 2;
  grid-row: 2;
  align-self: end;            /* 下罫線基準 (00-02=--singleで上揃え) */
  margin-top: 0;
  text-align: right;
  font-family: var(--font-goudy);
  color: var(--color-wine-typo);
  position: relative;
  right: -10px;               /* 旧YouTubeサムネと同様、右端を罫線W1024に揃える */
}
.toc-entry__free {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--color-wine-typo);
}
.toc-entry__free-label,
.toc-entry__buy-label {
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}
/* 価格 (和文・値段=tsuku-bold / 章番号=Goudy) */
.toc-entry__price {
  margin: 0 0 20px;
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: 1.8;
}
.toc-entry__price-line { display: block; white-space: nowrap; }
.toc-entry__chap {
  font-family: var(--font-goudy);
  letter-spacing: var(--ls-display);
}
/* 購入手続ボタン: 360×60 / 角丸10 / #720b2e */
.toc-entry__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 360px;
  max-width: 100%;
  height: 60px;
  padding: 0;
  border-radius: 10px;
  background-color: #720b2e;   /* --color-wine-typo */
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
/* ホバーでボタンも少し明るく (解禁=100%のみ) */
.toc-entry:not(.is-locked) .toc-entry__buy:hover { background-color: #8c1540; }
.toc-entry__buy .toc-entry__buy-label { color: #fff; }

/* Design矢印の流用 (arrow.js が SVG を生成)。toc 用にインライン・幅調整 */
/* Design矢印を hajimari でも正しく描画 (design.css 非読込のため自前定義)。
   path 既定の黒塗りを止め、stroke 線+矢じりにする */
.toc-arrow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.toc-arrow path {
  fill: none;
  stroke: var(--color-wine-typo);
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.toc-entry__access .toc-arrow {
  position: relative;
  display: inline-block;
  width: 160px;        /* Home (--d-arrow-w) と同サイズ流用 */
  height: 28px;
  margin: 0;
  vertical-align: middle;
  flex: none;
}
.toc-entry__buy .toc-arrow path { stroke: #fff; }  /* ボタン上は白 */

/* v31.0: 半透明(opacity 0.5)ロック案は廃止。未解禁表現はロックpillが担う */
.toc-entry.is-locked .toc-entry__free,
.toc-entry.is-locked .toc-entry__buy { pointer-events: none; cursor: default; }

/* CONTENTS 直下のサブタイトル (tsuku-bold 16pt) */
.detail-toc__subtitle {
  font-family: var(--font-tsuku-old);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--color-wine-typo);
  margin: 8px 0 0;
}
/* サブタイトル挿入で切れた「見出し→罫線44px」を復活 */
.detail-toc__subtitle + .detail-divider { margin-top: 44px; }

/* TAB (≤1024) */
@media (max-width: 1024px) {
  .toc-entry__free-label,
  .toc-entry__buy-label { font-size: 21px; }
  .toc-entry__price { font-size: 21px; }
  .toc-entry__access .toc-arrow { width: 120px; }
  .toc-entry__buy { width: 342px; }   /* 旧サムネTAB幅に揃える */
}

/* 482–900: 1列化 (旧media-colと同様 col1/row3)。1カラム境界=900px */
@media (min-width: 482px) and (max-width: 900px) {
  .toc-entry__access { grid-column: 1; grid-row: 3; align-self: start; margin-top: 12px; right: 0; }
}

/* SP (≤481) */
@media (max-width: 481px) {
  .toc-entry__access { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; right: 0; }
  .toc-entry__free-label,
  .toc-entry__buy-label { font-size: 17px; }
  .toc-entry__price { font-size: 17px; margin-bottom: 14px; }
  .toc-entry__access .toc-arrow { width: 100px; }
  .toc-entry__buy { height: 56px; }
  .detail-toc__subtitle { font-size: 14px; }
}

/* ==========================================================================
   v24.0: note導線ボタン (読む→ / noteで読む) — 価格ブロックを置換
   - 無料・公開済み: 「読む →」(自サイト章ページ) + 「noteで読む ↗」(note)
   - 有料・公開済み: 「noteで読む ↗」のみ
   - 無料・未公開: 「無料公開予定」表記のみ
   - note ボタン色は当面すべて小豆。将来 章カラーに差し替え (1箇所)
   ========================================================================== */
.toc-entry__access {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  align-self: end;                   /* v41.0: 03-11は下揃えに戻す(CD指示)。00-02は--singleで上揃え維持 */
  --toc-note-w: 140px;               /* 既定値。実幅はJSで計測し上書き (note中央/読む頭揃え) */
}
/* 一行タイトル(はじめに/まえがき/あとがき)のみ頭揃え */
.toc-entry--single .toc-entry__access { align-self: start; margin-top: 20px; }  /* 読む頭を「はじめに」に揃える */

/* ==========================================================================
   v32.2: ボタン(access)を「文字の下端」に揃える。
   現状は access が行ボックス下端(align-self:end)に揃い、最終行の下ハーフレディング
   (=(行高-文字)/2) ぶん下がって見え、最終行のフォントで量が変わっていた
   (リスト36px→18px / 24px→12px / sub-heading→13.5px)。
   最終行(葉ノード)の下ハーフレディングを負マージンで除去し、グリフ下端に揃える。
   01/02/20(--single=タイトルのみ)は対象外(現状ママ)。SP(stack)も対象外。
   ========================================================================== */
@media (min-width: 482px) {
  /* リスト最終行(葉li, lh2.0→0.5em) */
  .toc-entry__content > ul:last-child > li:last-child:not(:has(ul, ol)),
  .toc-entry__content > ol:last-child > li:last-child:not(:has(ul, ol)),
  /* 1段ネストの最終葉li (ch04型) */
  .toc-entry__content > ul:last-child > li:last-child > ul:last-child > li:last-child,
  .toc-entry__content > ul:last-child > li:last-child > ol:last-child > li:last-child {
    margin-bottom: -0.5em;
  }
  /* sub-heading が最終行 (ch14/15, lh1.75→0.375em) */
  .toc-entry__content > .toc-entry__sub-heading:last-child {
    margin-bottom: -0.375em;
  }
}

.toc-read,
.toc-note {
  position: relative;
  display: flex;
  align-items: center;
  width: 360px;
  max-width: 100%;
  height: 64px;
  border-radius: 999px;
  text-decoration: none;
  box-sizing: border-box;
}
/* 読む → (自サイト内・白フチ)。「読む」は「noteで読む」の頭に揃える */
.toc-read {
  background: transparent;
  border: 1.5px solid var(--color-wine-typo);
  color: var(--color-wine-typo);
}
.toc-read:hover { background-color: #fff; }
.toc-read__label {
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: 1;
  margin-left: calc((100% - var(--toc-note-w)) / 2);   /* note頭に揃える */
}
.toc-read .toc-arrow {
  position: absolute;
  right: 32px;                       /* v32.0: 角R起点(半径32) */
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 28px;
  margin: 0;
}

/* noteで読む ↗ (note・章カラー塗り。色は --note-bg を各章で指定、既定=小豆) */
.toc-note {
  background-color: var(--note-bg, #720b2e);
  color: #fdd700;
  border: none;
  transition: filter 0.25s ease;
}
.toc-note__label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: calc((100% - var(--toc-note-w)) / 2);   /* ボタンに対しセンタリング */
}
.toc-note__logo { height: 14.4px; width: auto; display: block; }   /* v32.1: noteロゴ実寸(14.4=SVG原寸) */
.toc-note__de   { font-family: var(--font-tsuku-old); font-size: 24px; line-height: 1; }
.toc-note__ext  {
  position: absolute;
  right: 32px;                       /* v32.0: 角R起点 */
  top: 50%;
  transform: translateY(-50%);
  width: 19.5px;                     /* note-ext 原寸 */
  height: 19.5px;
  display: block;
}
/* v32.3: □(枠)と↗(矢印)を重ねる。□は固定、↗だけ動かす */
.toc-note__ext-box,
.toc-note__ext-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* v32.4: noteホバーで □は固定・↗(arrow)だけ「上がって戻る」を1回(ループ無し) */
@keyframes note-ext-fly {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(3px, -3px); }
  100% { transform: translate(0, 0); }
}
.toc-entry:not(.is-locked) .toc-note:hover .toc-note__ext-arrow {
  animation: note-ext-fly 0.55s var(--ease-out, ease-in-out) 1;
}
.toc-entry:not(.is-locked) .toc-note:hover { filter: brightness(1.12); }

/* 無料公開予定 (表記のみ・ボタン無し) — 訪問地/参考文献用 */
.toc-entry__pending {
  font-family: var(--font-tsuku-old);
  font-size: 17px;
  color: var(--color-wine-typo);
  line-height: 1;
}

/* ==========================================================================
   v31.0: 公開前/公開後の状態切替 (data-status) + ロックpill + 推敲プレビュー
   - scheduled (公開前): ロックpillを表示・実ボタン(読む/note)は隠す。日付=「● Scheduled: …」
   - published (公開後): 実ボタンを表示・ロックpillとScheduledラベルを隠す。日付=「●: …」
   - .is-preview (#dev): 実ページのある章でロックpillを隠し「読む」(推敲)を出す
   公開操作は該当 article の data-status を scheduled→published に変えるだけ。
   ========================================================================== */
.toc-schedb,
.toc-preview { display: none; }   /* 既定 */

.toc-entry[data-status="scheduled"] .toc-read,
.toc-entry[data-status="scheduled"] .toc-note { display: none; }
.toc-entry[data-status="scheduled"] .toc-schedb { display: flex; }
.toc-entry[data-status="published"] .toc-schedb { display: none; }

/* 上段ラベル: scheduled=無料公開予定/公開予定, published=●: 日付 */
.toc-entry__sched-label { display: none; }
.toc-entry[data-status="scheduled"] .toc-entry__sched-label { display: inline; }
.toc-entry[data-status="scheduled"] .toc-entry__pub-date { display: none; }
.toc-entry__pub-date { position: relative; top: var(--pubdate-shift, 0); }   /* v68.3: v32.1の-2pxを解除。月相15px時代の値で、21pxではラベルとベースラインがずれる */

.is-preview .toc-entry.is-haspage[data-status="scheduled"] .toc-schedb { display: none; }
.is-preview .toc-entry[data-status="scheduled"] .toc-preview { display: flex; }

/* 上段「無料公開予定/公開予定」= Tsuku-bold PC24/SP18 */
.toc-entry__sched-label {
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  color: var(--color-wine-typo);
}

/* 公開前 pill (TypeB): 色なしoutline・日付内蔵・lock。note版はnアイコン */
.toc-schedb {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 360px;
  max-width: 100%;
  height: 64px;
  border-radius: 999px;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--color-wine-typo);
  color: var(--color-wine-typo);
  cursor: default;
}
.toc-schedb__date {
  font-family: var(--font-goudy);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  top: -2px;                   /* v32.1: 光学的に少し上げる */
}
.toc-schedb__lock {
  position: absolute;
  right: 32px;                 /* 角Rの起点(半径32px)に揃え */
  top: 50%;
  transform: translateY(-50%);
  width: 17.5px;
  height: 20px;
  display: block;
}
.toc-schedb__n {
  position: absolute;
  left: 32px;                  /* 左の角R起点に揃え */
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: auto;
  display: block;
}

/* v32.1: 公開前pillホバーで lock が「イヤイヤ」首振り (任意演出) */
@keyframes lock-iyaiya {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  15% { transform: translateY(-50%) rotate(-13deg); }
  30% { transform: translateY(-50%) rotate(11deg); }
  45% { transform: translateY(-50%) rotate(-9deg); }
  60% { transform: translateY(-50%) rotate(7deg); }
  75% { transform: translateY(-50%) rotate(-4deg); }
}
.toc-schedb:hover .toc-schedb__lock {
  transform-origin: center;
  animation: lock-iyaiya 0.55s var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce) {
  .toc-schedb:hover .toc-schedb__lock { animation: none; }
  .toc-entry:not(.is-locked) .toc-note:hover .toc-note__ext-arrow { animation: none; }
}


/* 推敲プレビュー「読む」(#dev時のみ) */
.toc-preview {
  position: relative;
  align-items: center;
  width: 360px;
  max-width: 100%;
  height: 64px;
  border-radius: 999px;
  text-decoration: none;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--color-wine-typo);
  color: var(--color-wine-typo);
}
.toc-preview:hover { background-color: #fff; }
.toc-preview__label {
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: 1;
  margin-left: calc((100% - var(--toc-note-w)) / 2);
}
.toc-preview .toc-arrow {
  position: absolute;
  right: 32px;                 /* 角R起点 */
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 28px;
  margin: 0;
}

/* TAB */
@media (max-width: 1024px) {
  .toc-schedb, .toc-preview { width: 342px; }
  .toc-schedb__date { font-size: 24px; }
  .toc-preview .toc-arrow { width: 120px; }
}
/* SP */
@media (max-width: 481px) {
  .toc-schedb, .toc-preview { height: 56px; width: 100%; }
  .toc-schedb__date { font-size: 21px; }
  .toc-preview__label { font-size: 20px; }
  .toc-entry__sched-label { font-size: var(--sched-size, 0.7em); }   /* v68.2: 日付30px時に21px。CD指定 */
  .toc-schedb__lock { right: 28px; }      /* SP角R起点(半径28) */
  .toc-schedb__n { left: 28px; }
  .toc-preview .toc-arrow { width: 120px; right: 28px; }
}

/* TAB (≤1024) */
@media (max-width: 1024px) {
  .toc-read, .toc-note { width: 342px; }
}
/* SP (≤481) */
@media (max-width: 481px) {
  .toc-entry__access { --toc-note-w: 150px; }
  .toc-read, .toc-note { height: 56px; width: 100%; }
  .toc-read__label { font-size: 20px; }
  .toc-read .toc-arrow { width: 120px; right: 28px; }
  .toc-note__logo { height: 12px; }
  .toc-note__de { font-size: 20px; }
  .toc-note__ext { right: 28px; }   /* v32.0: 角R起点(半径28) */
}

/* v28.3: 目次の①Phase/見出し(48px)も stroke 半分(tsuku-mid相当)に統一 (CD指示) */
.toc-entry__title,
.toc-entry__phase {
  -webkit-text-stroke-width: calc(1em * 0.01042);
}

/* ============================================================
   v49.0: はじまりトップのFOUT対策(CD報告: Revealがシステムフォントで
   現れ、後から筑紫に読み替わる)。トップ(body.detail-page かつ
   .chapter-detail でない)の .reveal を Webフォント確定(wf-active)まで
   隠す → 確定後に reveal 自身の transition でフェード表示
   =「読み込んでからRevealで筑紫のまま現れる」。
   wf-inactive(読込失敗)時は wf-loading が外れるため素で表示(隠れ残り無し)。
   章ページ(.chapter-detail)は既存のHero用wf制御があるため対象外。
   ============================================================ */
html.wf-loading body.detail-page:not(.chapter-detail) .reveal {
  opacity: 0 !important;
  transition: none !important;
}

/* ============================================================
   v49.4: 02まえがき/03条件と視点 のエントリ調整(CD指示)
   - 下層見出し(sublist)を③レベル(深さ2em)に下げ、筑紫26px
     (IDセレクタのためブレークポイント上書きにも勝つ=全幅26px)
   - 02(--single)のリンクボタンをテキスト下合わせに(align-self:end)。
     最終行の下ハーフレディング除去はv32.2の葉ノード負マージンが自動適用。
   ============================================================ */
#toc-2 .toc-entry__sublist,
#toc-3 .toc-entry__sublist {
  padding-left: 1em;   /* v49.7: PCも全角1つ分(CD指示。旧2em) */
  font-size: 26px;
}
#toc-2 .toc-entry__access {
  align-self: end;
  margin-top: 0;
}

/* v49.5: SPの02/03下層見出しは21px(CD指示。PCは26pxのまま) */
@media (max-width: 481px) {
  #toc-2 .toc-entry__sublist,
  #toc-3 .toc-entry__sublist { font-size: 21px; }
}

/* v49.6: SPの02/03下層見出しインデント=全角1つ分(1em)。PCは2emのまま(CD指示) */
@media (max-width: 481px) {
  #toc-2 .toc-entry__sublist,
  #toc-3 .toc-entry__sublist { padding-left: 1em; }
}

/* v51.0: はじまりトップの部立て接頭辞(Prologue/Phase/Epoch)のみ縮小(CD指示) PC44/SP28 */
.toc-entry__prefix { font-size: 44px; }
@media (max-width: 481px) {
  .toc-entry__prefix { font-size: 28px; }
}

/* v51.5→v52.1: 訪問地・参考文献に公開日を持たせた(10と同日・無料公開)。
   日付行(row1)が入るため、PCでは content/access を通常エントリと同じ row2(横並び)に。
   ※ v52.1: このPC用ルールがSPメディアクエリより後方にあり、SPの縦積み(row2/row3)を
     上書きして重なるバグ→ min-width:482px で囲ってPC限定にした。 */
@media (min-width: 482px) {
  .toc-entry--meta-dated .toc-entry__content,
  .toc-entry--meta-dated .toc-entry__access { grid-row: 2; }
}


/* ============================================================
   v65.8 目次エントリー 再設計（CD指示）
   - 日付は右上の定位置に常時表示（公開前/公開後を問わず）
   - ロックpill(.toc-schedb)は廃止。日時の二重表示をなくす
   - 公開前もボタンを表示し、鍵アイコン。公開後は 矢印 / 外部リンク
   - 金額はボタン内へ（¥＝筑紫 / 数字＝Goudy）。〈500円〉ラベルは廃止
   - noteロゴ画像は使わず、サービス名を Goudy のテキストで表記
     （ブランドガイドラインはロゴの色変更を禁じているため、
      黄色=JOMONÖW独自色を使う本サイトではロゴを用いない）
   ============================================================ */

/* 日付は常時表示 */
.toc-entry[data-status="scheduled"] .toc-entry__pub-date { display: inline; }
.toc-entry__sched-label { font-size: var(--sched-size, 0.7em); }   /* v68.2: 日付30px時に21px。CD指定 */
.toc-entry[data-status="published"] .toc-entry__sched-label { display: inline; }

/* 公開前もボタンを出す */
.toc-entry[data-status="scheduled"] .toc-read,
.toc-entry[data-status="scheduled"] .toc-note { display: flex; }
.toc-entry[data-status="scheduled"] .toc-read,
.toc-entry[data-status="scheduled"] .toc-note { pointer-events: none; cursor: default; }

/* 公開前の note は枠線。公開後は塗り */
.toc-entry[data-status="scheduled"] .toc-note {
  background-color: transparent;
  border: 1.5px solid var(--color-wine-typo);
  color: var(--color-wine-typo);
}

/* 鍵 / 矢印の出し分け */
.toc-lock { width: 19.5px; height: 19.5px; display: none; }
.toc-entry[data-status="scheduled"] .toc-lock { display: block; }
.toc-entry[data-status="scheduled"] .toc-arrow,
.toc-entry[data-status="scheduled"] .toc-note__ext { display: none; }

/* note = Goudy のテキスト */
.toc-note__logo {
  font-family: var(--font-goudy);
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: inherit;
  display: block;
}
.toc-entry[data-status="published"] .toc-note__logo { color: var(--note-fg, #fdd700); }
.toc-entry[data-status="published"] .toc-note { color: var(--note-fg, #fdd700); }

/* 金額 */
.toc-note__price {
  font-family: var(--font-goudy);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--ls-display);
  margin-left: auto;
  margin-right: 12px;
  white-space: nowrap;
}
.toc-note__yen { font-family: var(--font-tsuku-old); font-size: 24px; letter-spacing: 0; }

@media (max-width: 767px) {
  .toc-note__logo  { font-size: 28px; }
  .toc-note__price { font-size: 18px; }
  .toc-note__yen   { font-size: 18px; }
  .toc-lock { width: 16px; height: 16px; }
}

/* v65.9 組みの調整 */
/* ① note(Goudy36) と で読む(筑紫24) のベースラインを揃える */
.toc-note__label { align-items: baseline; gap: 4px; }
.toc-note__logo  { position: relative; top: 2px; }

/* ② 〈無料公開〉と月相のアキ。v68.3: モック実測に合わせて 12px→0.24em (PC 21px時に5.0px)。
   emにしたのでTAB/SPも同率で追従する。 */
.toc-entry__sched-label { margin-right: var(--sched-gap, 0.24em); }

/* ③ 金額は右端の外部リンク/鍵の手前に固定（ラベルのセンタリングを崩さない） */
.toc-note__price {
  position: absolute;
  right: 64px;                     /* ext/鍵(right:32px, 幅19.5px) の手前 */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.toc-note .toc-lock {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}
.toc-read .toc-lock {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .toc-note__logo { font-size: 28px; top: 1px; }
  .toc-note__price { right: 56px; }
  .toc-note .toc-lock, .toc-read .toc-lock { right: 28px; }
}

/* ============================================================
   v66.0 目次ボタンの組み（CD指示・実フォントでの確認を反映）
   ① 「読む」「noteで読む」の字面開始をボタン左から 46px に揃える
   ② note(Goudy) を「で読む」と同じベースラインに載せる
   ③ ラベル全体をボタンの上下センターへ
   ④ 鍵はホバーで lock-iyaiya（旧ロックpillの動きを踏襲）
   ============================================================ */

/* ① 左46pxで頭を揃える（旧: --toc-note-w によるセンタリング） */
.toc-read__label,
.toc-note__label { margin-left: 46px; }

/* ②③ ベースライン合わせと、上下センター
   .toc-note / .toc-read は align-items:center。ベースライン合成で
   ラベル箱が Goudy のディセンダぶん下に伸びるため、その分を戻す。
   ※実フォントでのズレはこの1値（--toc-label-y）で調整可能 */
.toc-note { --toc-label-y: -4px; }   /* v66.6: 実フォントで「読む」より1px下がって見えるため、-3 → -4 */
.toc-note__label { align-items: baseline; position: relative; top: var(--toc-label-y); }
.toc-note__logo  { top: -1px; }   /* v66.9: 0.5pxでは下がって見えるため -1px に戻す（v66.7の値） */

/* ④ 鍵のイヤイヤ（ホバー） */
.toc-read:hover .toc-lock,
.toc-note:hover .toc-lock { transform-origin: center; animation: lock-iyaiya 0.55s var(--ease-out, ease); }
.toc-entry[data-status="scheduled"] .toc-read,
.toc-entry[data-status="scheduled"] .toc-note { pointer-events: auto; cursor: default; }
.toc-entry[data-status="scheduled"] .toc-read,
.toc-entry[data-status="scheduled"] .toc-note { text-decoration: none; }

@media (max-width: 767px) {
  .toc-read__label, .toc-note__label { margin-left: 32px; }
}

/* v66.1: 公開前(枠線)の note ボタンも、ホバーで地が白くなる。「読む」と挙動を揃える */
.toc-entry[data-status="scheduled"] .toc-note:hover { background-color: #fff; }

/* ============================================================
   v66.2 ボタンの寸法と枠線（CD指示）
   - 高さ 64 → 60px（SPは56pxのまま）
   - 枠線は border だと Chrome が整数デバイスピクセルに丸めて 1px になるため、
     inset box-shadow で 1.5px を確実に描く。border は透明にして外形を保つ。
   ============================================================ */
.toc-read, .toc-note { height: 60px; }
@media (max-width: 767px) { .toc-read, .toc-note { height: 56px; } }   /* SPは従来どおり */

.toc-read {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-wine-typo);
}
.toc-entry[data-status="scheduled"] .toc-note {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-wine-typo);
}
.toc-entry[data-status="published"] .toc-note { box-shadow: none; }

/* v66.3: JOMON HOMON / 参考文献 は章ではないため、日付をボタン位置のピルに入れる例外扱い（CD指示）。
   公開後のラベル語は未定。決まり次第この中身を差し替える。 */
.toc-metab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  max-width: 100%;
  height: 60px;
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1.5px var(--color-wine-typo);
  color: var(--color-wine-typo);
}
.toc-metab__date {
  font-family: var(--font-goudy);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.toc-metab__lock { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 17.5px; height: 20px; }
.toc-metab:hover .toc-metab__lock { transform-origin: center; animation: lock-iyaiya 0.55s var(--ease-out, ease); }
/* v68.7: 公開予告ピル(参考文献 / JOMON HOMON / まとめ購読)のホバー。
   地色が未指定だったため、鍵アイコンだけ動いて背景が白くならなかった。
   章ボタン .toc-read:hover と同じ挙動に揃える (トランジションなし)。 */
.toc-metab { background-color: transparent; }
.toc-metab:hover { background-color: #fff; }
@media (max-width: 481px) {
  /* v67.23: 全幅にするのはSPのみ。482〜767pxでは章のボタン(342px)と幅が揃わず、
     メタ2件だけが罫線と同じ長さになっていた。 */
  .toc-metab { width: calc(100% - 20px); height: 56px; margin: 0 10px; }   /* v76.1: 罫線より左右10px内側 */
  .toc-metab__date { font-size: 20px; }
  .toc-metab__lock { right: 28px; }
}

/* v66.4: JOMON HOMON｜縄文を訪れ問う が PC で「う」だけ折り返していた。
   実測で1行に必要な幅=約561px に対し、使える幅=560px。1px足りないだけの状態。
   メタ項目の見出しのみ 36→35px にして余白を確保する（章の小見出しには影響させない）。 */
.toc-entry--meta .toc-entry__sublist > li { font-size: 35px; }

/* ============================================================
   v66.9 PC のボタンを上揃えに（CD指示）
   日付を右上の定位置に固定したことで、下揃えのままだと日付とボタンが離れ、
   公開待ちの状態が伝わるまでに間が空く。05・07のように目次が長い章ほど顕著。
   ※ v41.0 で「03-11は下揃え」としていた指定を、この判断で上書きする。
   SPは1カラムで元から上揃えのため変更なし。
   ============================================================ */
@media (min-width: 901px) {
  /* v67.23: 2カラムは901px以上。768〜1024pxは1カラムで、
     .toc-entry__access が grid-row:2/6 と複数行にまたがるため、
     align-self:start にすると本文の上に乗り上げる。適用幅を絞る。 */
  .toc-entry__access { align-self: start; margin-top: 20px; }
  #toc-2 .toc-entry__access { align-self: start; margin-top: 20px; }
}

/* v67.0: 08は「Phase5: 土偶の核心」＋英題が長く、white-space:nowrap のため
   タイトル列からはみ出してボタンに重なっていた。英題だけを改行して2行に組む。
   （PCのみ。SPは元から折り返している） */
@media (min-width: 768px) {
  #toc-8 .toc-en { display: block; }
}

/* v67.1: 09/10間の仕切り。PCのみ 幅250→120px、border-top ではなく高さと背景で描く。
   同じ1px指定でも、border は 0.25px ずれた描画位置で上下2列に分散して薄く見えるため、
   JOMON HOMON下の .detail-divider--thin（height:1px + background）と方式を揃える。
   SP（幅80px・margin30px）は現状のまま。 */
@media (min-width: 768px) {
  .toc-entry--pair .toc-entry__pair-divider {
    width: 120px;
    height: 2px;                      /* v67.3: 2px に（CD指示） */
    border: 0;
    background-color: var(--color-wine-typo);
  }
}

/* v67.3: SPの 09/10 仕切りも 2px に。border ではなく高さと背景で描く（PCと同方式）。 */
@media (max-width: 767px) {
  .toc-entry--pair .toc-entry__pair-divider {
    height: 2px;
    border: 0;
    background-color: var(--color-wine-typo);
  }
}

/* v67.4: JOMON HOMON は1行しかないため、見出しとボタンを天地センターで揃える（CD指示）。
   参考文献(#toc-refs)は3行あるので従来どおり上揃えのまま。 */
@media (min-width: 901px) {
  /* v67.23: 2カラム時のみ。1024px以下は1カラムで、両方をcenterにすると重なる */
  #toc-sites .toc-entry__content,
  #toc-sites .toc-entry__access { align-self: center; margin-top: 0; }
  /* 小見出しの li には行間調整の margin-bottom:-17.5px が入っており、
     ボックスの中心と字面の中心が約9pxずれる。1行しかないここでは打ち消す。 */
  #toc-sites .toc-entry__sublist > li { margin-bottom: 0; }
}

/* v67.14: 目次エントリーと罫線のアキを48pxに統一（CD指示）。
   ・.toc-entry の上下パディングを 44 → 48px
   ・末尾の小見出しリストに入っている margin-bottom:-17.5px（行間調整用）が
     罫線との間隔を詰めていたので、エントリー最後の要素でのみ打ち消す
   ・章エントリーは先頭が番号、メタ2件は先頭が見出しと構造が違うが、
     箱の上下は48pxで揃う。字面の見え方は行送りの差でわずかに残る。 */
.toc-entry { padding-top: 48px; padding-bottom: 48px; }
.toc-entry .toc-entry__content > *:last-child { margin-bottom: 0; }
.toc-entry .toc-entry__sublist:last-child > li:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .toc-entry { padding-top: 32px; padding-bottom: 32px; }
}

/* v67.15: 罫線と本文のアキを48pxで揃える仕上げ。
   ・メタ2件は番号・日付の行がなく content が grid-row:2 に置かれるため、
     空の1行ぶん row-gap(16px) が上に足されて 64px になっていた → 1行目へ寄せる
   ・参考文献の入れ子リスト最終行に margin-bottom:-12px が残り 36px になっていた → 打ち消す */
@media (min-width: 901px) {
  /* v67.23: 2カラムは901px以上（1024px以下は1fr=1カラム）。
     1カラムの幅で両方を row:1 にすると同じセルで重なるため、ここだけに適用する。 */
  .toc-entry--meta .toc-entry__content { grid-row: 1; }
  .toc-entry--meta .toc-entry__access  { grid-row: 1; }
}
.toc-entry .toc-entry__sublist li:last-child,
.toc-entry .toc-entry__sublist li:last-child ul > li:last-child,
.toc-entry .toc-entry__content > *:last-child li:last-child,
.toc-entry .toc-entry__content ul:last-child > li:last-child,
.toc-entry .toc-entry__content ul:last-child > li:last-child > ul:last-child > li:last-child { margin-bottom: 0 !important; }

/* v67.19: 1カラム（1024px以下）では、メタ2件の本文とボタンを行送りで積む。
   .toc-entry__access が grid-row:2/6 を持つため、明示的に auto へ戻す。 */
/* v67.21: 09の副題を常に改行（08の英題と同じ扱い）。nowrap のためボタンに寄っていた */
/* v67.25: inline-block は最終行のベースラインで揃うため「Epoch:」が2行目まで下がる。
   top 揃えにして1行目に留める。 */
#toc-9 .toc-jomonow-wrap { display: inline-block; text-align: center; vertical-align: top; }
#toc-9 .toc-imani { display: block; }

@media (max-width: 900px) {
  /* v67.23: 1カラムになるのは900px以下（901〜1024pxは 1fr 342px の2カラム）。
     v67.21で1024pxに広げたため、2カラムの幅でもボタンを左カラムへ押し込んでいた。
     .toc-entry--pair / --meta 側の指定のほうが詳細度が高いので、同じ強さで auto に戻す。
     DOM順（番号→本文→仕切り→番号→本文→ボタン）のまま縦に積まれる。 */
  .toc-entry .toc-entry__content,
  .toc-entry .toc-entry__access,
  .toc-entry--pair .toc-entry__content,
  .toc-entry--pair .toc-entry__content--second,
  .toc-entry--pair .toc-entry__access,
  .toc-entry--meta .toc-entry__content,
  .toc-entry--meta .toc-entry__access,
  .toc-entry--meta-dated .toc-entry__content,
  .toc-entry--meta-dated .toc-entry__access {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    margin-top: 0;
  }
}

/* v67.23: 482〜900px の1カラムで、メタ2件のボタンだけ 360px と章の342pxで揃わない。
   章のボタン幅に合わせる。 */
@media (min-width: 482px) and (max-width: 900px) {
  .toc-metab { width: 342px; }
}

/* ==========================================================================
   v68.4: まとめ購読ブロック（検証用・09-10 の直後 / 参考文献の手前）
   章エントリーとは別種のものなので、grid ではなく罫線幅いっぱいのセンター組み。
   ボタンは .toc-note をそのまま流用（金額が4桁になるため幅だけ 360→440）。
   ========================================================================== */
.toc-bundle {
  max-width: 1024px;
  margin: 0 auto;
  padding: 56px 0 60px;
  text-align: center;
  background-color: var(--bundle-bg, transparent);   /* v69.5: CD案 #e7e6e6 */
}
/* 全幅版（検証用）。罫線は1024幅のままなので、帯として敷く場合はこちら */
.toc-bundle.is-fullbleed {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 512px));
  padding-right: max(24px, calc(50vw - 512px));
}
.toc-bundle__title {
  font-family: var(--font-tsuku-old);
  font-size: 40px;
  line-height: var(--lh-base);
  color: var(--color-wine-typo);
  margin: 0;
  font-feature-settings: "palt" 1;
}
.toc-bundle__lead {
  font-family: var(--font-tsuku-old);
  font-size: 24px;
  line-height: 1.6;
  color: var(--color-wine-typo);
  margin: 12px 0 0;
}
.toc-bundle__access {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.toc-bundle__note {
  position: relative;
  width: 360px;          /* v68.6: CD指示。章ボタンと同幅 */
}
/* v68.5: CD指示。センタリングをやめ、SPと同じ左揃えに統一。
   実フォントでは「noteで購読」が想定より広く、センターだと ¥3,200 と衝突する。 */
.toc-bundle__note .toc-note__label { margin-left: 32px; margin-right: auto; }
/* v68.6: CD指示の配色。地=#211414 / 文字は章ボタンと同じ #fdd700 (.toc-note の既定) */
.toc-bundle__note { --note-bg: #211414; }
.toc-bundle__caption {
  font-family: var(--font-tsuku-old);
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-wine-typo);
  margin: 24px 0 0;
}
/* 公開前: ボタンの代わりに日付ピル。章エントリーと同じ data-status で切り替える。
   v68.9: 04公開日 (9.nov.2026) に data-status を published へ書き換えれば購入ボタンになる。 */
.toc-bundle__sched { display: none; }
.toc-bundle[data-status="scheduled"] .toc-bundle__note  { display: none; }
.toc-bundle[data-status="scheduled"] .toc-bundle__sched { display: flex; }
.toc-bundle__sched .toc-metab__date { letter-spacing: var(--ls-display); }
.toc-bundle__moon {
  font-family: var(--font-tsuku-old);
  font-size: var(--moon-size, 0.7em);
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .toc-bundle { max-width: 900px; padding: 48px 0 52px; }
  .toc-bundle__title { font-size: 34px; }
  .toc-bundle__lead  { font-size: 21px; }
}
@media (max-width: 767px) {
  .toc-bundle { padding: 40px 0 44px; }
  .toc-bundle__title { font-size: 30px; }
  .toc-bundle__lead  { font-size: 18px; }
  .toc-bundle__note  { width: 100%; height: 56px; }
  .toc-bundle__note .toc-note__label { margin-left: 24px; }
  /* v69.6: CD指示。SPはコピーの左右に10pxのアキ */
  .toc-bundle__caption { font-size: 15px; text-align: left; padding: 0 10px; }
}

/* ==========================================================================
   v76.1 目次の JOMON HOMON 行 (地色のみ #c7a076。公開が近づいたら意匠を足す)
   ========================================================================== */
.toc-entry.toc-homon { background-color: #c7a076; }

/* v76.1: ピル(日付+ロック)は罫線の内側へ (罫線と端がぴったり揃うのを避ける) */
.toc-metab { margin-right: 10px; }

/* v76.0: 確認用モード (#dev / test.) では日付+ロックのピルから中に入れる */
.toc-metab.is-enterable, .toc-schedb.is-enterable { cursor: pointer; transition: background-color .25s; }
.toc-metab.is-enterable:hover, .toc-schedb.is-enterable:hover { background-color: #fff; }

/* ==========================================================================
   v77.8 公開済みの章は「読む」も章カラー塗りに（CD指示）
   セオリー: 各章の Hero カラーがボタンの色になる。塗り=公開済み / 枠線のみ=未解禁。
   これまで 00 は note だけを章カラーにして note へ誘導していたが、
   実際にはサイト側で読まれており差別化が効いていなかったため、2つとも章カラーに揃える。
   ========================================================================== */
.toc-entry[data-status="published"] .toc-read {
  background-color: var(--note-bg, #720b2e);
  color: var(--note-fg, #fdd700);
  box-shadow: none;
  transition: filter 0.25s ease;
}
.toc-entry[data-status="published"] .toc-read:hover { background-color: var(--note-bg, #720b2e); filter: brightness(1.12); }
/* v77.9: 「読む」の矢印だけ地色 #f7f6f6 (文字は黄のまま。CD指示) */
.toc-entry[data-status="published"] .toc-read .toc-arrow path,
.toc-entry[data-status="published"] .toc-read .toc-arrow line,
.toc-entry[data-status="published"] .toc-read .toc-arrow polyline { stroke: #f7f6f6; }

/* v78.5: 参考文献 / JOMON HOMON にも〈無料公開〉を。
   これらはピルが日付を兼ねる例外行なので、ラベルはピルの直上に右揃えで置く。
   大きさは章(00〜03)と同じ実寸 = 日付30px × 0.7 = 21px (SP は 24px × 0.7 = 17px)。
   親が .toc-entry__date ではないため em 基準が効かず、実寸で指定する。 */
.toc-metab__free {
  display: block;
  font-family: var(--font-tsuku-old);
  font-size: 21px;
  line-height: 1;
  color: var(--color-wine-typo);
  margin-bottom: 2px;
}
@media (max-width: 481px) { .toc-metab__free { font-size: 17px; } }

/* v78.8: 参考文献 / JOMON HOMON の2行は、章と同じく
   〈無料公開〉=上（タイトルと同じ高さ） / ピル=下 に分ける。
   access を行の高さいっぱいに伸ばし、上下に振り分ける。 */
.toc-entry--meta .toc-entry__access,
.toc-entry--meta-top .toc-entry__access {
  align-self: stretch;
  justify-content: flex-start;
  gap: 18px;
}
/* v79.3: 参考文献のピルは「◉視覚の書」の行に高さを揃える。
   ラベル(21px)+gap の下に来るので、その差ぶんだけ下げる */
.toc-entry--meta-dated:not(.toc-homon) .toc-entry__access { padding-top: 125px; }   /* v79.4: さらに21px上げ、視覚の書の行に中心を合わせる */
.toc-entry--meta-dated:not(.toc-homon) .toc-entry__access .toc-metab__free { position: absolute; top: 0; right: 10px; }   /* v79.4: 見出しと同じ高さへ */
.toc-entry--meta-dated:not(.toc-homon) { position: relative; }

/* v78.8: ピル内の月相。日付は 24px なので 0.7em では小さすぎるため実寸で揃える */
.toc-metab__moon { font-size: 21px; }

/* v78.9: まとめて購読の地にパターン（3200.svg）。地色 #e7e6e6 はそのまま、模様を重ねる */
.toc-bundle { position: relative; overflow: hidden; }
.toc-bundle > *:not(.toc-bundle__pattern) { position: relative; z-index: 1; }
.toc-bundle__pattern {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; min-height: 100%; max-width: none;
  object-fit: cover; pointer-events: none; user-select: none;
}

/* v79.0: JOMON HOMON の行。中ページと同じ紋様(doban2)を敷き、中身はセンター合わせ。
   〈無料公開〉だけは右上に置く（章と同じ位置関係）。ピルの中は地色 #f7f6f6。 */
.toc-entry.toc-homon {
  position: relative; overflow: hidden; display: block;
  padding-left: 0; padding-right: 0; text-align: center;
  min-height: 400px;                 /* v79.2: まとめ購読(397px)と同格 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.toc-entry.toc-homon > *:not(.toc-homon__pattern) { position: relative; z-index: 1; }
.toc-homon__pattern {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 120%; max-width: none; height: auto; pointer-events: none; user-select: none;
}
.toc-entry.toc-homon .toc-homon__access { position: static; }   /* ラベルの基準を行(article)にする */
.toc-entry.toc-homon .toc-metab__free { position: absolute; top: 60px; right: 10px; z-index: 2; }   /* v79.5: 罫線に接していたので 60px 下げる */
.toc-entry.toc-homon .toc-homon__content { margin: 0; }
.toc-entry.toc-homon .toc-entry__sublist { text-align: center; padding-left: 0; margin-left: 0; }
.toc-entry.toc-homon .toc-entry__sublist > li { padding-left: 0; margin-left: 0; text-indent: 0; }
.toc-entry.toc-homon .toc-entry__sublist > li { display: block; }
/* v79.2: 「縄文を訪れ問う」= 28px (JOMON HOMON は Goudy のまま) */
.toc-entry.toc-homon .toc-entry__sublist > li { font-size: 28px; line-height: 1.6; }
.toc-entry.toc-homon .toc-goudy { font-size: 42px; }   /* v79.4 */
.toc-entry.toc-homon .toc-homon__access {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  right: 0; margin-top: 24px;
}
.toc-entry.toc-homon .toc-metab { margin-right: 0; background-color: #f7f6f6; }

/* v79.0: まとめ購読のピルの中も地色 */
.toc-bundle .toc-metab { background-color: #f7f6f6; }

/* v79.1: 上の2つが .toc-metab:hover(#fff) を打ち消していたので、ホバーを効かせ直す。
   鍵のイヤイヤは .toc-metab:hover .toc-metab__lock で共通に効く。 */
.toc-bundle .toc-metab:hover,
.toc-entry.toc-homon .toc-metab:hover { background-color: #fff; }

/* v79.6 SP: 参考文献 / JOMON HOMON の〈無料公開〉を章(01〜03)と同じ扱いに。
   絶対配置をやめて流れに戻し（ピルの直上・右揃え）、大きさも章と同じ 0.7em 実寸に揃える。 */
@media (max-width: 481px) {
  /* ラベルの基準を行(article)にし、章と同じ「行の右上」に置く */
  .toc-entry--meta-dated .toc-entry__access { position: static; }
  .toc-entry--meta-dated:not(.toc-homon) .toc-entry__access .toc-metab__free,
  .toc-entry.toc-homon .toc-metab__free {
    position: absolute; top: 20px; right: 12px;
    display: block; text-align: right;
    font-size: 14.7px;                  /* 章: 日付21px × 0.7 */
    margin-bottom: 0;
  }
  .toc-entry--meta-dated:not(.toc-homon) .toc-entry__access { padding-top: 0; }
  /* SP: 紋様が天地に余るので、短辺基準で全面を覆う */
  .toc-homon__pattern { width: 120%; height: 120%; object-fit: cover; }
}