/* IDATSUKA — 子ページのエディトリアル型（刷新②）。css/tokens.css と css/site.css の上に重ねて使う。
   旧 style.css は読み込まない前提なので、ここに最低限の土台（リセット・メニューの部品）も持つ。
   色・書体は tokens.css の変数だけ。箱・角丸・影は使わず、区切りは 1px の罫線だけ。

   型の部品
     .pg            ページの枠（max 1360px、左右 56px／スマホ 20px、12カラム gap 24px）
     .pg-title      タイトル行：ローマ数字・h1・英字イタリック／右に説明文
     .pg-toc        段への目次（文字だけ）
     .pg-bar        セクション見出しバー：左に見出しと「EN — 件数」、右に絞り込み
     .ed-feature    特集：画像 8・情報 4（番号・作品名・副題・dl・「大きく見る」）
     .ed-grid       一覧：番号・正方形サムネ・作品名・副題
     .pg-read       読み物：12カラムのうち本文は 3〜10（8カラム）、行間 2.0。.pg-prose が本文の書式
     .pg-head       記事・日記の個別ページの見出し（日付・分類・題・リード）
     .pg-rows       罫線で区切る行の一覧（番号・題・説明）。サービス・手順・目次など
     .pg-link       文字だけのリンクボタン（下線 1px）。旧 .btn も同じ見た目
     .pg-form       フォーム（下線だけの入力欄）
     .pg-pager      前後の記事への行き来
     .pg-cta        ページの終わりの一行と、相談への入口
   旧ページの <style> が使う古い変数（--bg / --fg / --muted …）は、下で tokens.css の色に読み替える。 */

/* ── 古い変数の読み替え：ページ内の <style> や JS が使う --bg などを、tokens.css の色にそろえる ── */
:root {
  --bg: var(--c-bg); --bg2: var(--c-bg); --bg3: var(--c-bg);
  --bg-rgb: var(--c-bg-rgb);
  --fg: var(--c-fg); --fg-dim: var(--c-fg); --sheen: var(--c-fg); --select-fg: var(--c-bg);
  --muted: var(--c-sub); --dim: var(--c-sub);
  --accent: var(--c-accent); --accent-hi: var(--c-accent); --accent-2: var(--c-accent); --shu: var(--c-accent);
  --accent-soft: var(--c-accent); --danger: var(--c-accent); --on-accent: var(--c-bg);
  --border: var(--c-line); --border-strong: var(--c-sub);
  --nav-bg: rgba(var(--c-bg-rgb), .92); --overlay-bg: rgba(var(--c-bg-rgb), .97); --modal-scrim: rgba(var(--c-bg-rgb), .9);
  --serif: var(--f-serif); --mincho: var(--f-mincho); --sans: var(--f-sans); --mono: var(--f-sans);
  --ease-out: var(--ease-calm); --ease-soft: var(--ease-calm); --scrim: .9; --grain: 0;
  --fg-rgb: 236, 230, 220; --accent-rgb: 201, 168, 116;
}
:root[data-theme="light"] { --fg-rgb: 30, 28, 26; --accent-rgb: 138, 106, 60; }

/* ── 土台 ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pg-page { margin: 0; color-scheme: dark; background: var(--c-bg); color: var(--c-fg); font-family: var(--f-sans); font-weight: 300;
  font-size: 15px; line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* リセットは :where() で詳しさ 0 に（下の部品の margin などを打ち消さないように） */
:where(body.pg-page) :where(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
:where(body.pg-page) :where(ol, ul) { padding: 0; list-style: none; }
:where(body.pg-page) :where(img, canvas) { display: block; max-width: 100%; }
:where(body.pg-page) :where(a) { color: inherit; }
:where(body.pg-page) :where(button) { font: inherit; color: inherit; }
:root[data-theme="light"] body.pg-page { color-scheme: light; }
::selection { background: var(--c-accent); color: var(--c-bg); }
:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: 8px; z-index: 400; background: var(--c-bg); color: var(--c-fg); padding: 6px 10px; }

/* ヘッダーのメニュー部品（旧 style.css にあったもの） */
.menu-toggle { padding: 0; font-size: 13.3333px; line-height: normal; }
.menu-toggle span { display: block; position: absolute; left: 0; width: 100%; height: 1px;
  transition: transform var(--d-1) var(--ease-calm), opacity var(--d-1), top var(--d-1) var(--ease-calm); }
.menu-toggle span:nth-child(1) { top: 0; } .menu-toggle span:nth-child(2) { top: 50%; } .menu-toggle span:nth-child(3) { top: 100%; }
.menu-toggle.open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a { text-decoration: none; }

/* ── ページの枠 ── */
.pg { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 56px; }
.pg-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .pg { padding: 0 20px; } }

/* ── タイトル行 ── */
.pg-title { padding-top: calc(var(--head-h) + clamp(56px, 9vw, 120px)); padding-bottom: clamp(40px, 5vw, 64px); align-items: end; }
.pg-title-main { grid-column: 1 / 9; }
.pg-num { display: block; font-family: var(--f-serif); font-size: 22px; letter-spacing: .24em; color: var(--c-accent); margin-bottom: 18px; }
.pg-title h1 { font-family: var(--f-mincho); font-weight: 400; font-size: 104px; line-height: 1.12; letter-spacing: .14em; }
.pg-en { display: block; margin-top: 14px; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 30px; letter-spacing: .2em; color: var(--c-sub); }
.pg-desc { grid-column: 9 / 13; font-size: 14px; line-height: 2.2; color: var(--c-sub); padding-bottom: 10px; }
@media (max-width: 960px) { .pg-title h1 { font-size: clamp(56px, 9vw, 104px); } }
@media (max-width: 760px) {
  .pg-title-main, .pg-desc { grid-column: 1 / -1; }
  .pg-title h1 { font-size: 56px; letter-spacing: .12em; }
  .pg-en { font-size: 24px; }
}

/* 段への目次 */
.pg-toc { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-bottom: clamp(40px, 6vw, 72px); }
.pg-toc a { font-family: var(--f-mincho); font-size: 13px; letter-spacing: .22em; color: var(--c-sub); text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.pg-toc a:hover { color: var(--c-fg); }
.pg-toc a[hidden] { display: none; }

/* ── セクション見出しバー ── */
.pg-sec { padding-bottom: clamp(64px, 8vw, 120px); scroll-margin-top: var(--head-h); }
.pg-sec[hidden] { display: none; }
.pg-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px;
  border-top: 1px solid var(--c-fg); border-bottom: 1px solid var(--c-line); padding: 16px 0; }
.pg-bar-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.pg-bar h2 { white-space: nowrap; font-family: var(--f-mincho); font-weight: 400; font-size: 18px; letter-spacing: .2em; }
.pg-bar-en { font-family: var(--f-serif); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-sub); }
.pg-filter { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pg-filter[hidden], .pg-filter button[hidden] { display: none; }
.pg-filter button { appearance: none; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--c-sub);
  font-family: var(--f-mincho); font-size: 13px; letter-spacing: .16em; border-bottom: 1px solid transparent;
  transition: color var(--d-1) var(--ease-calm), border-color var(--d-1) var(--ease-calm); }
.pg-filter button:hover { color: var(--c-fg); }
.pg-filter button[aria-pressed="true"] { color: var(--c-fg); border-bottom-color: var(--c-accent); }
.pg-filter button:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
.pg-note { font-size: 13px; color: var(--c-sub); letter-spacing: .06em; padding-top: 14px; }

/* ── 特集：画像 8・情報 4 ── */
.ed-feature { margin-top: 40px; align-items: start; }
.ed-feature-pic { grid-column: 1 / 9; display: block; position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); max-height: 78vh; width: 100%; cursor: zoom-in; }
.ed-feature-pic img, .ed-feature-pic canvas { width: 100%; height: 100%; object-fit: contain; transition: transform var(--d-3) var(--ease-calm); }
.ed-feature-pic:hover img, .ed-feature-pic:hover canvas { transform: scale(1.025); }
.ed-info { grid-column: 9 / 13; border-top: 1px solid var(--c-fg); padding-top: 22px; }
.ed-no { display: block; font-family: var(--f-serif); font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: .06em; color: var(--c-accent); }
.ed-info h3 { margin-top: 26px; font-family: var(--f-mincho); font-weight: 400; font-size: 36px; line-height: 1.4; letter-spacing: .08em; }
.ed-sub { margin-top: 10px; font-family: var(--f-mincho); font-size: 18px; letter-spacing: .08em; color: var(--c-sub); }
.ed-note { margin-top: 18px; font-size: 13px; line-height: 2; color: var(--c-sub); }
.ed-dl { margin-top: 26px; border-top: 1px solid var(--c-line); }
.ed-dl div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.ed-dl dt { font-family: var(--f-serif); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--c-sub); }
.ed-dl dd { font-size: 13px; letter-spacing: .06em; }
.ed-disclaimer { margin-top: 14px; font-size: 11.5px; line-height: 1.9; color: var(--c-sub); }
.ed-open { appearance: none; background: none; border: 0; padding: 0 0 3px; margin-top: 26px; cursor: pointer; display: inline-block;
  font-size: 12px; letter-spacing: .22em; color: var(--c-fg); border-bottom: 1px solid currentColor; transition: color var(--d-1) var(--ease-calm); }
.ed-open:hover { color: var(--c-accent); }
@media (max-width: 760px) {
  .ed-feature-pic, .ed-info { grid-column: 1 / -1; }
  .ed-feature-pic { max-height: 72vh; }
  .ed-no { font-size: 56px; }
  .ed-info h3 { font-size: 28px; }
}

/* ── 一覧 ── */
.ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 40px 24px; margin-top: 56px; }
.ed-grid li { min-width: 0; }
.ed-card { display: block; border-top: 1px solid var(--c-fg); padding-top: 12px; text-decoration: none; color: inherit; }
.ed-card .ed-cno { display: block; font-family: var(--f-serif); font-size: 20px; letter-spacing: .1em; color: var(--c-accent); margin-bottom: 12px; }
.ed-thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ed-thumb img, .ed-thumb canvas { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease-calm); }
.ed-card:hover .ed-thumb img, .ed-card:hover .ed-thumb canvas { transform: scale(1.025); }
.ed-card b { display: block; margin-top: 14px; font-family: var(--f-mincho); font-weight: 400; font-size: 15px; letter-spacing: .08em; line-height: 1.6; }
.ed-card small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .08em; line-height: 1.7; color: var(--c-sub); }
.ed-card:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 6px; }
@media (max-width: 420px) { .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }

/* ── 読み物：本文は 8 カラム（3〜10）、行間 2.0 ── */
.pg-read { padding-bottom: clamp(72px, 9vw, 140px); }
.pg-read > * { grid-column: 3 / 11; }
.pg-read > .pg-wide { grid-column: 1 / -1; }
.pg-read > .pg-side { grid-column: 1 / 3; }
@media (max-width: 960px) { .pg-read > *, .pg-read > .pg-side { grid-column: 1 / -1; } }
.pg-prose { font-size: 15.5px; line-height: 2.05; letter-spacing: .04em; }
.pg-prose > * + * { margin-top: 1.4em; }
.pg-prose h2 { font-family: var(--f-mincho); font-weight: 400; font-size: 24px; line-height: 1.6; letter-spacing: .1em;
  margin-top: 2.8em; padding-top: 18px; border-top: 1px solid var(--c-fg); }
.pg-prose h3 { font-family: var(--f-mincho); font-weight: 400; font-size: 18px; line-height: 1.7; letter-spacing: .08em; margin-top: 2.2em; }
.pg-prose h2 + *, .pg-prose h3 + * { margin-top: .9em; }
.pg-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--c-accent); }
.pg-prose a:hover { color: var(--c-accent); }
.pg-prose strong, .pg-prose b { font-weight: 500; }
.pg-prose em { font-style: normal; color: var(--c-accent); }
.pg-prose ul, .pg-prose ol { padding-left: 1.4em; }
.pg-prose ul { list-style: none; }
.pg-prose ul > li { position: relative; }
.pg-prose ul > li::before { content: ''; position: absolute; left: -1.1em; top: 1.02em; width: .5em; height: 1px; background: var(--c-sub); }
.pg-prose ol { list-style: decimal; }
.pg-prose ol > li::marker { font-family: var(--f-serif); color: var(--c-accent); }
.pg-prose li + li { margin-top: .4em; }
.pg-prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--c-accent); color: var(--c-sub); font-family: var(--f-mincho); }
.pg-prose figure img { width: 100%; height: auto; }
.pg-prose figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; color: var(--c-sub); }
.pg-prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 3em 0; }
.pg-prose code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .88em; padding: 0 .25em; border-bottom: 1px solid var(--c-line); }
.pg-prose pre { overflow-x: auto; padding: 16px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-size: 13px; line-height: 1.8; }
.pg-prose pre code { border: 0; padding: 0; }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-prose th, .pg-prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.pg-prose th { font-weight: 400; color: var(--c-sub); }
.pg-lead { font-family: var(--f-mincho); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.9; letter-spacing: .1em; }
.pg-small { font-size: 12px; line-height: 1.9; letter-spacing: .06em; color: var(--c-sub); }
@media (max-width: 760px) { .pg-prose { font-size: 15px; line-height: 2; } .pg-prose h2 { font-size: 21px; } }

/* ── 個別ページ（記事・日記）の見出し ── */
.pg-head { padding-top: calc(var(--head-h) + clamp(48px, 7vw, 104px)); padding-bottom: clamp(36px, 5vw, 56px); }
.pg-head > * { grid-column: 3 / 11; }
@media (max-width: 960px) { .pg-head > * { grid-column: 1 / -1; } }
.pg-crumb { font-family: var(--f-serif); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-sub); }
.pg-crumb a { text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.pg-crumb a:hover { color: var(--c-fg); }
.pg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--c-fg); }
.pg-date { font-family: var(--f-serif); font-size: 18px; letter-spacing: .2em; color: var(--c-accent); }
.pg-tag { font-size: 11.5px; letter-spacing: .16em; color: var(--c-sub); }
.pg-head h1 { margin-top: 22px; font-family: var(--f-mincho); font-weight: 400; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.5; letter-spacing: .1em; }
.pg-head .pg-lead { margin-top: 22px; color: var(--c-sub); font-size: clamp(16px, 1.6vw, 19px); }
.pg-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.pg-hero img { width: 100%; height: auto; }

/* ── 罫線で区切る行の一覧：.pg-rows の子が1行。行の中身は .pg-row（li の中の a でも、li そのものでも） ── */
.pg-rows { border-top: 1px solid var(--c-line); }
.pg-rows > * { border-bottom: 1px solid var(--c-line); }
.pg-row { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); gap: 8px 24px; align-items: baseline;
  padding: 22px 0; text-decoration: none; color: inherit; }
.pg-rno { font-family: var(--f-serif); font-size: 20px; letter-spacing: .1em; color: var(--c-accent); }
.pg-rt { font-family: var(--f-mincho); font-size: 18px; letter-spacing: .08em; line-height: 1.6; transition: color var(--d-1) var(--ease-calm); }
.pg-rt small { display: block; margin-top: 2px; font-family: var(--f-serif); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--c-sub); }
.pg-rd { font-size: 13.5px; line-height: 2; color: var(--c-sub); }
a.pg-row:hover .pg-rt { color: var(--c-accent); }
@media (max-width: 760px) {
  .pg-row { grid-template-columns: 44px minmax(0, 1fr); }
  .pg-rd { grid-column: 2; }
}

/* ── 文字だけのリンクボタン（旧 .btn も同じ見た目に） ── */
.pg-link, .btn, .btn-filled { appearance: none; background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none;
  display: inline-block; padding: 0 0 4px; cursor: pointer; text-decoration: none; color: var(--c-fg);
  font-family: var(--f-sans); font-weight: 400; font-size: 12px; letter-spacing: .22em; line-height: 1.6;
  transition: color var(--d-1) var(--ease-calm); }
.pg-link:hover, .btn:hover, .btn-filled:hover { color: var(--c-accent); }
.pg-link[disabled], .btn[disabled], .btn-filled[disabled] { opacity: .45; cursor: default; }
.pg-links { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: baseline; }

/* 旧ページの小さな英字見出し（.label）も、新しい書体で */
.label { display: block; font-family: var(--f-serif); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-sub); margin-bottom: 16px; }

/* ── フォーム：下線だけの入力欄 ── */
.pg-form { display: grid; gap: 28px; }
.pg-form .pg-field { display: grid; gap: 8px; }
.pg-form label, .pg-form .pg-flabel { font-size: 12px; letter-spacing: .16em; color: var(--c-sub); }
.pg-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .pg-form select, .pg-form textarea {
  width: 100%; appearance: none; background: transparent; color: var(--c-fg); border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0;
  padding: 10px 0; font: inherit; font-size: 15px; letter-spacing: .04em; transition: border-color var(--d-1) var(--ease-calm); }
.pg-form select { background-image: linear-gradient(45deg, transparent 50%, var(--c-sub) 50%), linear-gradient(-45deg, transparent 50%, var(--c-sub) 50%);
  background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 22px; }
.pg-form select option { background: var(--c-bg); color: var(--c-fg); }
.pg-form textarea { min-height: 180px; resize: vertical; line-height: 1.9; }
.pg-form input:focus, .pg-form select:focus, .pg-form textarea:focus { outline: 0; border-bottom-color: var(--c-accent); }
.pg-form ::placeholder { color: var(--c-sub); opacity: .7; }
.pg-form .pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
@media (max-width: 760px) { .pg-form .pg-split { grid-template-columns: 1fr; } }

/* ── 前後の記事 ── */
.pg-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--c-fg); border-bottom: 1px solid var(--c-line); }
.pg-pager a { display: block; padding: 22px 0; text-decoration: none; }
.pg-pager a + a, .pg-pager .pg-next { text-align: right; grid-column: 2; }
.pg-pager small { display: block; font-family: var(--f-serif); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--c-sub); }
.pg-pager b { display: block; margin-top: 6px; font-family: var(--f-mincho); font-weight: 400; font-size: 16px; letter-spacing: .08em; line-height: 1.7; transition: color var(--d-1) var(--ease-calm); }
.pg-pager a:hover b { color: var(--c-accent); }
@media (max-width: 560px) { .pg-pager { grid-template-columns: 1fr; } .pg-pager a + a, .pg-pager .pg-next { grid-column: 1; border-top: 1px solid var(--c-line); } }

/* ── ページの終わり：一行と入口 ── */
.pg-cta { position: relative; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 140px); align-items: end; }
.pg-cta::before { content: ''; position: absolute; top: 0; left: 56px; right: 56px; border-top: 1px solid var(--c-line); }
@media (max-width: 760px) { .pg-cta::before { left: 20px; right: 20px; } }
.pg-cta h2 { grid-column: 1 / 9; font-family: var(--f-mincho); font-weight: 400; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.5; letter-spacing: .12em; }
.pg-cta h2 em { font-style: normal; color: var(--c-accent); }
.pg-cta > div, .pg-cta > p, .pg-cta > a { grid-column: 9 / 13; }
.pg-cta p { font-size: 14px; line-height: 2.2; color: var(--c-sub); margin-bottom: 18px; }
@media (max-width: 760px) { .pg-cta h2, .pg-cta > div, .pg-cta > p, .pg-cta > a { grid-column: 1 / -1; } }

/* 静的に書いた特集・一覧（JS で描かないページ用）：a 要素の特集、文字だけのカード */
a.ed-card:hover b { color: var(--c-accent); }
a.ed-feature-pic[href]:not([href^="#"]) { cursor: pointer; }   /* 別ページへのリンクのときは拡大の形にしない */
.ed-card b { transition: color var(--d-1) var(--ease-calm); }
.ed-thumb.is-wide { aspect-ratio: 16 / 10; }
.ed-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ed-info .pg-links { margin-top: 26px; }
.ed-info .ed-open + .ed-open { margin-left: 28px; }

/* ── ライトボックス：新しい色と書体で（角丸・影なし）。写真の邪魔をしないよう、いつも暗い面 ── */
.g-lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  background: rgba(20, 19, 18, .96); color: #ECE6DC; opacity: 0; visibility: hidden;
  transition: opacity var(--d-1) var(--ease-calm), visibility 0s linear var(--d-1); }
.g-lb.open { opacity: 1; visibility: visible; transition: opacity var(--d-1) var(--ease-calm); }
.g-lb-inner { width: min(100%, 1280px, calc((100vh - 220px) * var(--ar, 1.6))); }
.g-lb-stage { position: relative; aspect-ratio: var(--ar, 16 / 10); background: #141312 center / contain no-repeat; }
.g-lb-stage iframe, .g-lb-stage img, .g-lb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; display: block; }
.g-lb-meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 32px; align-items: baseline; padding-top: 18px; border-top: 1px solid #2F2C29; margin-top: 18px; }
.g-lb-meta h2 { font-family: var(--f-mincho); font-weight: 400; font-size: 20px; letter-spacing: .1em; }
.g-lb-meta .g-series { display: block; font-family: var(--f-serif); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #C9A874; margin-bottom: 6px; }
.g-lb-meta .g-spec { display: block; font-family: var(--f-serif); font-size: 12px; letter-spacing: .24em; color: #A69E92; margin-top: 4px; }
.g-lb-meta .g-subtitle { display: block; font-size: 13px; letter-spacing: .08em; color: #A69E92; margin-top: 4px; }
.g-lb-meta .yr { font-family: var(--f-serif); font-size: 16px; letter-spacing: .2em; color: #A69E92; }
.g-lb-meta p { grid-column: 1 / -1; font-size: 13px; line-height: 2; color: #A69E92; max-width: 46em; }
.g-lb-meta p[hidden] { display: none; }
.g-lb-meta .art-credit { font-size: 11.5px; letter-spacing: .08em; }
.g-lb-meta a { grid-column: 1 / -1; justify-self: start; font-size: 12px; letter-spacing: .2em; color: #ECE6DC; text-decoration: none; border-bottom: 1px solid currentColor; }
.g-lb-meta a[hidden] { display: none; }
.art-seed { display: flex; align-items: center; gap: 16px; }
.art-reseed { appearance: none; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; cursor: pointer; color: #ECE6DC; font-size: 12px; letter-spacing: .2em; }
.g-lb-btn { position: fixed; z-index: 2; appearance: none; background: none; border: 0; cursor: pointer; color: #ECE6DC; opacity: .72; padding: 12px;
  font-family: var(--f-mincho); font-size: 13px; letter-spacing: .2em; transition: opacity var(--d-1) var(--ease-calm); }
.g-lb-btn:hover, .g-lb-btn:focus-visible { opacity: 1; }
.g-lb-btn[hidden] { display: none; }
.g-lb-close { top: 14px; right: 18px; }
.g-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); font-family: var(--f-serif); font-size: 22px; }
.g-lb-next { right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--f-serif); font-size: 22px; }
body.g-locked { overflow: hidden; }
@media (max-width: 760px) {
  .g-lb-inner { width: 100%; }
  .g-lb-prev, .g-lb-next { top: auto; bottom: 8px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ed-feature-pic img, .ed-feature-pic canvas, .ed-thumb img, .ed-thumb canvas, .g-lb, .pg-filter button, .pg-toc a, .ed-open, .pg-link, .btn, .btn-filled, .pg-pager b, .ed-card b, .pg-form input, .pg-form textarea { transition: none; }
  .ed-feature-pic:hover img, .ed-feature-pic:hover canvas, .ed-card:hover .ed-thumb img, .ed-card:hover .ed-thumb canvas { transform: none; }
}