@charset "UTF-8";
/* 番号に使う明朝系の欧文（v2 だけで使う） */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');
/* 英字の小見出しに使う、少しクラシックなセリフ（NEWS・HATARAKI などの見出し） */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');
/* 欧文の Jost。ヘッダーのメニュー（500）と、トップページの大きな英字見出し（700）・日付など（400/500）に使う。
   読み込みの途中も、代わりの書体で文字は出しておく（swap） */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap');
/* 本文と同じ Noto Sans JP のうち、layout.php で読んでいない太さ。
   600 … トップページの記事の題名・コーナー名。
   300 も読んでいたが、どこにも使っていなかったので外した。和文の書体は重いので、
   使っていない太さを読ませない（2026-09-19 に確認。実際に出ている太さは 400/500/600/700） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');
/* ==========================================================================
   上杉勇煕 公式サイト — スタイルシート
   （Next.js + Tailwind 版から、同じデザイントークンで素のCSSに移植）
   ========================================================================== */

/* --------------------------------------------------------------- トークン */
:root {
  /* 現れる動きを、1つずつずらす間隔 */
  --reveal-step: 45ms;
  /* 番号に使う明朝系の欧文 */
  --font-serif: "Playfair Display", "Times New Roman", serif;
  /* 見出しに使う和文の明朝。端末に入っていればそちらを先に使う */
  --font-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;

  /* ---- 色（DAYLIGHT：昼のシティポップ） ----
     白い余白がいちばん広く、絵の青に目が行き、下を淡い水色のフッターが受け止める。
     濃紺は文字と小さな部品だけに使い、大きな面には敷かない。
     ピンクは無くても成り立つくらいの、ごく小さな印にだけ使う。 */
  --paper: #fafaf7;            /* ページの地。白に近いオフホワイト */
  --ink: #244869;              /* 文字・見出し（濃紺）。地の上で 9:1 */
  --ink-rgb: 36, 72, 105;      /* 濃紺を透かして使うとき（線・影） */
  --ink-sub: #4f6882;          /* 日付・要約などの補足。地の上で 5.5:1 */
  --ink-mute: #5f768e;         /* 仮の文言など、さらに控えめなもの。地の上で 4.5:1 */
  --blue: #246dc0;             /* リンク・操作の差し色（澄んだ青） */
  --blue-deep: #1f5fa8;        /* 淡い水色の上に置く青。フッターでも読める濃さ */
  --sky: #dcecf3;              /* フッターの面（ごく淡い水色） */
  --pink: #e5b1bc;             /* 補助の差し色。記事の中の注釈ノートの縦線、KIZASHI の図など */
  --pink-deep: #a8475b;        /* 桜色の濃い版。字に使える濃さ（白地で 5.65:1）。注釈ノートの札 */
  --aqua: #81d8d0;             /* ティファニーブルー。読み終えたしるしの、淡いほう */
  --aqua-deep: #18847a;        /* その濃い版。字にも使える濃さ（白地で 4.5:1）。
                                  記事で「いま読み手がどこまで来たか」を示す線と点、メモの札 */
  --rule: #d6e2ea;             /* 区切りの細い線（淡い青灰） */
  --media-bg: #e7eef3;         /* 絵が届く前の下地 */

  /* 前からある名前は、上の色に振り替えてある（黒・紫・金を使わないため） */
  --void: var(--paper);
  --deep: #f2f6f8;
  --surface: #edf3f7;
  --surface-2: #e1eaf0;
  --line: #c8d7e2;
  --line-soft: var(--rule);
  --muted: var(--ink-sub);
  --faint: var(--ink-mute);
  --nebula: var(--blue);
  --nebula-soft: var(--blue-deep);
  --star: var(--blue);
  --flare: #d2492a;
  --aurum: var(--blue-deep);

  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Outfit", "Noto Sans JP", sans-serif;
  /* 参考デザインのコンデンス欧文（ロゴ・大見出し用） */
  --font-condensed: "Oswald", "Noto Sans JP", sans-serif;
  /* 英字の小見出し。少しクラシックに見せたいところだけに使う */
  --font-classic: "Cormorant Garamond", "Times New Roman", serif;
  /* Galaxia Blog のメニューと同じ書体の並び。和文も欧文もヒラギノを先に使う */
  --font-gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* ヘッダーのメニュー（MORE の中・スマホのメニューを含む）だけに使う欧文 */
  --font-nav: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* 角丸は控えめに */
  --radius: 6px;
  --radius-sm: 4px;
  --container: 76rem;

  /* 中身の幅。1200px までに収めて真ん中に置き、左右に余白を取る。
     ヘッダー・本文・フッターの左右の端は、どれもこの2つの足し算でそろえる */
  --page-max: 1200px;
  --wrap-x: clamp(1.25rem, 4vw, 3.5rem);

  /* ヘッダーは地と同じ色に、ごく薄い水色の線を1本。
     --header-h は、下へ送っても残るヘッダーの高さ（スマホのヘッダー／PC ではメニューの段。PC の値は @media で決める） */
  --header-h: 68px;
  --header-bg: var(--paper);
  --header-line: #d5e8f1;
}

/* ----------------------------------------------------------------- リセット */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 中の入れ物（重ねた投稿など）を下まで送っても、ページ側には送らない。
     none ではなく contain なのは、**none だとスマホの「下に引っ張って読み込み直す」
     まで止まってしまう**ため（2026-09-24、本人の希望で戻した）。
     contain は伝わるのを止めるだけで、その場での跳ね返りと読み込み直しは残す */
  overscroll-behavior-y: contain;
  /* 跳ね返った先に見える色。
     ここを塗らないと body の地の色（生成り）が出て、淡い水色のフッターの下に
     別の色の帯が見え、ページがフッターの先へ続いているように見えていた
     （2026-09-18 に none で止めていた問題。色で解くほうに変えた）。
     body は自分の高さぶんだけ地を塗るので、その外側だけがこの色になる */
  background: var(--sky);
}

body {
  min-height: 100dvh;
  background-color: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "palt" 1;
  font-size: 16px;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }  /* 上の svg{display:block} が hidden 属性を打ち消すのを防ぐ */
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }

::selection { background: color-mix(in oklab, var(--nebula) 45%, transparent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--star);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  padding: 0.6rem 1.1rem; border-radius: 0.6rem;
  background: var(--nebula); color: var(--void); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- 背景の星空 */
.starfield {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background-color: var(--void);
}
.starfield__stars {
  position: absolute; inset: 0; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(var(--ink-rgb), .9), transparent),
    radial-gradient(1px 1px at 34% 68%, rgba(var(--ink-rgb), .7), transparent),
    radial-gradient(1.5px 1.5px at 58% 14%, rgba(var(--ink-rgb), .85), transparent),
    radial-gradient(1px 1px at 71% 47%, rgba(199,214,255,.8), transparent),
    radial-gradient(1px 1px at 86% 78%, rgba(var(--ink-rgb), .65), transparent),
    radial-gradient(1.5px 1.5px at 23% 88%, rgba(var(--ink-rgb), .55), transparent),
    radial-gradient(1px 1px at 47% 33%, rgba(var(--ink-rgb), .5), transparent),
    radial-gradient(1px 1px at 92% 18%, rgba(var(--ink-rgb), .7), transparent);
  background-size: 480px 480px;
  background-repeat: repeat;
}
.starfield__glow {
  position: absolute; border-radius: 50%;
  filter: blur(140px);
  animation: drift 24s ease-in-out infinite alternate;
}
.starfield__glow--a {
  top: -10rem; left: -6rem; width: 36rem; height: 36rem;
  background: color-mix(in oklab, var(--nebula) 20%, transparent);
}
.starfield__glow--b {
  top: 33%; right: -8rem; width: 30rem; height: 30rem;
  background: color-mix(in oklab, var(--star) 12%, transparent);
  filter: blur(150px);
}
.starfield__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 24rem;
  background: linear-gradient(to top, var(--void), transparent);
}

@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-3%,-4%,0) scale(1.08); }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 骨格 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.container--narrow { max-width: 48rem; }
.container--wide { max-width: 64rem; }

.section { padding-block: 4rem; }
.section--tight { padding-block: 2.5rem; }
.section--lead { padding-block: 4rem 6rem; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 640px) {
  .section { padding-block: 4rem; }
  .section--lead { padding-block: 6rem; }
}

.stack > * + * { margin-top: 1.5rem; }

/* グリッド */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.grid--split { grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) {
  .grid--split { grid-template-columns: 1.5fr 1fr; }
  .grid--split-even { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* --------------------------------------------------------------- 文字まわり */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--nebula-soft);
}
.eyebrow--aurum { color: var(--aurum); }
.eyebrow--star { color: var(--star); }
.eyebrow--flare { color: var(--flare); }

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
  margin-top: 1.25rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700; letter-spacing: -0.01em;
}
.lead {
  margin-top: 2rem;
  font-size: 1rem; line-height: 2; color: var(--muted);
  max-width: 44rem;
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.num { font-variant-numeric: tabular-nums; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem;
  margin-bottom: 2rem;
}
.section-head__desc {
  margin-top: 0.75rem; max-width: 42rem;
  font-size: 0.875rem; line-height: 1.8; color: var(--muted);
}
.section-head__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--muted);
  transition: color .2s;
}
.section-head__link:hover { color: var(--ink); }
.section-head__link span { transition: transform .2s; }
.section-head__link:hover span { transform: translateX(2px); }

/* ------------------------------------------------------------------ ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent;
  transition: opacity .2s, border-color .2s, color .2s, background-color .2s;
  text-align: center;
}
.btn--primary { background: linear-gradient(90deg, var(--nebula), var(--star)); color: var(--void); }
.btn--gold    { background: linear-gradient(90deg, var(--aurum), var(--flare)); color: var(--void); }
.btn--star    { background: linear-gradient(90deg, var(--star), var(--nebula)); color: var(--void); }
.btn--primary:hover, .btn--gold:hover, .btn--star:hover { opacity: .9; }
.btn--ghost { border-color: var(--line); color: var(--muted); }
.btn--ghost:hover { border-color: color-mix(in oklab, var(--nebula) 50%, transparent); color: var(--ink); }
.btn--ghost-gold { border-color: color-mix(in oklab, var(--aurum) 40%, transparent); color: var(--aurum); }
.btn--ghost-gold:hover { background: color-mix(in oklab, var(--aurum) 10%, transparent); }
.btn--sm { padding: 0.5rem 1.1rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------------ バッジ */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
}
.badge--md { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
.badge--article { border-color: color-mix(in oklab, var(--nebula) 35%, transparent); background: color-mix(in oklab, var(--nebula) 12%, transparent); color: var(--nebula-soft); }
.badge--video   { border-color: color-mix(in oklab, var(--flare) 35%, transparent);  background: color-mix(in oklab, var(--flare) 12%, transparent);  color: var(--flare); }
.badge--radio   { border-color: color-mix(in oklab, var(--star) 35%, transparent);   background: color-mix(in oklab, var(--star) 12%, transparent);   color: var(--star); }
.badge--members { border-color: color-mix(in oklab, var(--aurum) 40%, transparent);  background: color-mix(in oklab, var(--aurum) 12%, transparent);  color: var(--aurum); }
.badge--ask     { border-color: color-mix(in oklab, var(--aurum) 40%, transparent);  background: color-mix(in oklab, var(--aurum) 12%, transparent);  color: var(--aurum); }
.badge--news    { border-color: color-mix(in oklab, var(--nebula) 40%, transparent); background: color-mix(in oklab, var(--nebula) 12%, transparent); color: var(--nebula-soft); }
.badge--staff   { border-color: color-mix(in oklab, var(--star) 40%, transparent);   background: color-mix(in oklab, var(--star) 12%, transparent);   color: var(--star); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }

/* ------------------------------------------------------------------ チップ */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.875rem; color: var(--muted);
  transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { color: var(--ink); border-color: color-mix(in oklab, var(--nebula) 40%, transparent); }
.chip[aria-current="true"], .chip.is-active {
  border-color: color-mix(in oklab, var(--nebula) 50%, transparent);
  background: color-mix(in oklab, var(--nebula) 15%, transparent);
  color: var(--ink);
}
.chip--gold[aria-current="true"], .chip--gold.is-active {
  border-color: color-mix(in oklab, var(--aurum) 50%, transparent);
  background: color-mix(in oklab, var(--aurum) 15%, transparent);
}
.chip__count { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--faint); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.chip-row__label {
  font-family: var(--font-display);
  font-size: 0.6875rem; letter-spacing: .18em; color: var(--faint);
  margin-right: 0.25rem;
}

/* ------------------------------------------------------------------ カード */
.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: blur(6px);
  transition: border-color .3s;
}
.card--pad { padding: 1.75rem; }
.card--flat { background: color-mix(in oklab, var(--surface) 40%, transparent); }
.card--gold { border-color: color-mix(in oklab, var(--aurum) 25%, transparent);
  background: linear-gradient(140deg, var(--surface), var(--deep)); }
.card--star { border-color: color-mix(in oklab, var(--star) 25%, transparent); }
.card:hover { border-color: color-mix(in oklab, var(--nebula) 45%, transparent); }
.card--gold:hover { border-color: color-mix(in oklab, var(--aurum) 45%, transparent); }
.card--star:hover { border-color: color-mix(in oklab, var(--star) 45%, transparent); }
.card--nohover:hover { border-color: var(--line-soft); }

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 4rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ ヘッダー */
/* 地と同じオフホワイトに、ごく薄い水色の線を1本。左右の端は本文・フッターとそろえる。
   PC  … 雑誌の題字のように、ロゴを真ん中に大きく置き、その下の段にメニューを真ん中そろえで並べる。
         下へ送り始めたら、ロゴの段だけ上へ畳み、メニューの段を残す（左に小さなロゴを出す）
   スマホ … 左にロゴ、右にメニューを開くボタン */
.site-header {
  /* ロゴの幅（見えている文字の幅）と、手書きとロゴのすき間。PC では下の @media で大きくする */
  --logo-w: 160px;
  --hand-gap: 5px;
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
}
.site-header__bar {
  display: flex; align-items: center;
  gap: 24px;
  max-width: calc(var(--page-max) + var(--wrap-x) * 2);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--wrap-x);
}

/* ロゴ。紺の「Intelligence」の絵の右半分のすぐ上に、手書きの「知性に、遊びを」を小さく添える。
   どちらの絵も見えている文字のきわで切ってあるので、次の数字は見えている文字そのものの大きさ。
     手書きの幅 … ロゴの 1/3（縦横比 435:81 は変えない）
     右端       … ロゴの右端より 4% 内側
     ロゴとの間 … --hand-gap
   フッターのロゴも、同じ組み方で置く */
.brand,
.site-footer__brand {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--logo-w);
  padding-top: calc(var(--logo-w) / 3 * 81 / 435 + var(--hand-gap));
  line-height: 0;
}
.brand__logo { display: block; width: 100%; height: auto; }
.brand__hand {
  position: absolute; top: 0; right: 4%;
  width: 33.333%; height: auto;
}

/* メニュー。Jost の Medium を、少し広めの字間で控えめに置く。
   太字にはしない。ロゴのセリフ体や手書きの書体も使わない。
   この書体は、ヘッダーのメニュー（スマホのメニューを含む）だけに使う */
.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: 36px; }
.site-nav__link,
.more__link,
.mobile-nav__link {
  font-family: var(--font-nav);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s;
}
/* 上下に余白をとって、押せる高さを 44px ほど確保する（文字の位置は変えない） */
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding-block: 13px;
}
/* 触れたら少し明るい青に。太さや位置は変えない */
.site-nav__link:hover,
.more__link:hover,
.mobile-nav__link:hover { color: var(--blue); }
/* いま開いているページ。少し明るい青に、細い下線 */
.site-nav__link[aria-current="page"],
.more__link[aria-current="page"],
.mobile-nav__link[aria-current="page"] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* MORE。ほかの項目と同じ文字に、小さな下向きの山形を添える。ふだんは囲まない。
   押すと、下に小さな一覧を重ねて出す（ヘッダーや記事は押し下げない） */
.more { position: relative; }
.more__btn.is-current { color: var(--blue); }   /* いま見ているページが、MORE の中にあるとき */
.more__chev {
  width: 9px; height: 6px;
  stroke: currentColor; fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.more__btn[aria-expanded="true"] .more__chev { transform: rotate(180deg); }
/* 開いた一覧。白い地に、ごく薄い水色の枠。
   メニューは真ん中にまとまっているので、MORE の真下の真ん中に出しても画面の端からはみ出さない */
.more__panel {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 188px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--header-line);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(var(--ink-rgb), .05);
}
.more__link {
  display: flex; align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  text-align: left;
}

.nav-toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-left: auto;
  color: var(--ink);
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }

/* 下へ送ったときだけ、メニューの段の左に出す小さなロゴ（PC だけ） */
.brand-mini { display: none; }

@media (min-width: 1024px) {
  /* 畳んだあとに残るメニューの段の高さ。記事の目次などが止まる位置も、この高さに合わせる */
  :root { --header-h: 56px; }
  .site-header {
    --logo-w: 272px;
    --hand-gap: 8px;
    --brand-row: 120px;           /* ロゴの段の高さ。ロゴと手書きの組みを、この中の真ん中に置く */
    transition: transform .3s ease;
  }
  /* 上の段にロゴ、下の段にメニュー。どちらも真ん中にそろえる */
  .site-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--brand-row) var(--header-h);
    justify-items: center; align-items: center;
    gap: 0;
    height: auto;
  }
  /* 列は1本だけ。下の段では、メニュー（真ん中）と小さなロゴ（左）が同じ場所に重なる */
  .brand { grid-area: 1 / 1; }
  .site-nav { display: block; grid-area: 2 / 1; }
  .site-nav__list { gap: 40px; }
  .nav-toggle { display: none; }

  /* 送り始めたら、ロゴの段だけ上へ畳む。ヘッダーごと上へずらすだけなので、下の中身は動かない。
     残ったメニューの段の左に、小さなロゴを出す（家に戻る入口がなくならないように） */
  .site-header.is-scrolled { transform: translateY(calc(-1 * var(--brand-row))); }
  .brand-mini {
    display: block;
    grid-area: 2 / 1; justify-self: start;
    width: 128px;
    line-height: 0;
    visibility: hidden; opacity: 0;
    transition: opacity .2s ease, visibility .2s;
  }
  .brand-mini img { display: block; width: 100%; height: auto; }
  .site-header.is-scrolled .brand-mini { visibility: visible; opacity: 1; }
}

/* 幅の狭い画面で開くメニュー。PC のヘッダーと同じ項目を、同じ順に1列で並べる */
.mobile-nav {
  background: var(--header-bg);
  border-top: 1px solid var(--header-line);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { padding: 4px var(--wrap-x) 24px; }
.mobile-nav__link {
  display: flex; align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--header-line);
  font-size: 1rem;
}
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* まだ行き先の無い項目（href が null のもの）。リンクにしていないので、押せるようには見せない。
   並びの中で名前だけは見えるよう、書体も位置もほかと同じにして、色だけ一段落とす。
   触れても色を変えない（押せると誤解させないため）。

   色は --ink-sub。一段薄い --ink-mute では、ヘッダーの地で 4.49:1、
   フッターの水色の地で 3.88:1 と、読める境目（4.5:1）を下回っていた */
.site-nav__link--soon,
.site-nav__link--soon:hover,
.mobile-nav__link--soon,
.mobile-nav__link--soon:hover { color: var(--ink-sub); cursor: default; }

/* フッターの同じ項目。フッターのメニューと同じ文字にそろえ、色だけ落とす */
.site-footer__soon {
  font-family: var(--font-gothic);
  font-feature-settings: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink-sub);
}

/* ------------------------------------------------------------------ フッター */
/* 淡い水色の面に、濃紺の文字と細い青い線だけで組む。
   記事の絵にある空や海の色が、ページの最後まで静かにつながるようにする。
   上の線は水平線のつもり。左右の端は、フッターの中身の端とそろえる */
.site-footer {
  position: relative;
  margin-top: 0;
  background: var(--sky);
  color: var(--ink);
}
.site-footer__inner {
  max-width: calc(var(--page-max) + var(--wrap-x) * 2);
  margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3rem) var(--wrap-x) clamp(2.5rem, 3.5vw, 3.25rem);
}
/* 上の段。左にロゴとメニュー、右にお問い合わせ */
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--blue);
}

/* ロゴ。ヘッダーと同じ組み方（ロゴの絵＋手書き）で、少し小さく置く。
   組み方そのものは、ヘッダーのロゴと同じ規則（.brand と並べて書いたもの）を使う */
.site-footer__brand { --logo-w: clamp(168px, 15vw, 220px); --hand-gap: 7px; }
/* 各コンテンツへの入口。ヘッダーのメニューと同じ書体で、一段小さく */
.site-footer__nav ul {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 1.5rem;
}
.site-footer__nav a {
  font-family: var(--font-gothic);
  font-feature-settings: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink);
  transition: color .2s;
}
.site-footer__nav a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }

.site-footer__lead {
  max-width: 26rem;
  font-size: 0.875rem; line-height: 1.8;
  color: var(--ink);
}

/* お問い合わせ。英字は小見出しと同じクラシックな書体、線の端は矢じりの上半分だけ */
.contact-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.25rem;
  color: var(--ink);
  transition: color .2s;
}
.contact-link:hover { color: var(--blue-deep); }
.contact-link__en {
  font-family: var(--font-classic);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  letter-spacing: 0.12em;
  line-height: 1;
}
.contact-link__ja {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.contact-link__arrow {
  position: relative;
  width: 6.5rem; height: 1px;
  margin-top: 0.875rem;
  background: currentColor;
  transition: width .25s;
}
.contact-link__arrow::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 10px; height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: rotate(35deg);
}
.contact-link:hover .contact-link__arrow { width: 7.25rem; }

/* SNS。v2 ではヘッダーに置かず、フッターにまとめる */
.social { display: flex; align-items: center; }
.social__item { display: block; color: var(--ink); transition: color .2s; }
.social__item:hover { color: var(--blue); }
.social svg { fill: currentColor; }
.social--footer { gap: 1.25rem; }
.social--footer svg { width: 1.25rem; height: 1.25rem; }

/* 下の段。左に SNS、右にコピーライト */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
}
.site-footer__copy {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink-sub);
}

/* スマホでは、ロゴとメニュー → お問い合わせ → SNS → コピーライトの順に縦に積む */
@media (max-width: 760px) {
  .site-footer__main { grid-template-columns: minmax(0, 1fr); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------- ファーストビュー */
/* 一度に1枚ずつ、大きく明るい絵を見せる。題名と分類は、雑誌の表紙のように絵の左上へ白い文字で重ねる。
   送りの矢印は絵を左右から挟み、いま何枚目かの点は絵のすぐ下の真ん中に置く。 */
.carousel {
  /* 絵の高さ。幅は絵の形（3:2）から決まる。
     背の低い画面では小さくして、題名までが最初の画面に入るようにする。
     いちばん大きいときの 683px は、絵の幅が 1024px になる高さ
     （2026-09-16、サムネを 1536×1024 にそろえたのに合わせた。絵の幅は前と同じ） */
  --hero-h: clamp(360px, 100svh - 300px, 683px);
  /* 絵と矢印のすき間と、絵の左右に矢印のために残す幅（丸の幅＋すき間） */
  --hero-gutter: clamp(12px, 2vw, 24px);
  --hero-side: calc(44px + var(--hero-gutter));
  /* 3:2 の絵の幅。左右に矢印のぶんを残す */
  --hero-w: min(calc(var(--hero-h) * 1.5), 100% - var(--hero-side) * 2);
  /* 絵のすぐ下の帯（点と手書き）の、絵からの間隔 */
  --hero-gap: clamp(8px, 1vw, 14px);
  position: relative;
  /* 点と手書きは絵の下にはみ出して置くので、そのぶんの高さを下に取っておく */
  padding-bottom: calc(var(--hero-gap) + clamp(26px, 3.6vw, 44px));
}
.carousel__stage { position: relative; }

.carousel__track {
  position: relative;                 /* 送り先の位置（offsetLeft）をここから測る */
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

/* 1枚ぶんの場所は横いっぱいに取り、その中で絵を真ん中に置く。
   絵の形が1枚ずつ違っても、送る幅は毎回同じになる */
.carousel__item {
  flex: 0 0 100%;
  display: flex; justify-content: center;
  scroll-snap-align: center;
}

/* 1枚ぶん。枠はどの写真でも同じ大きさ（3:2）にする。
   以前は枠を写真の形に合わせていたが、形の違う写真が混ざると、送るたびに
   絵の大きさが変わって落ち着かなかった（2026-09-16、本人の希望）。
   3:2 にしたのは、サムネ置き場の写真を 1536×1024 にそろえたため。
   同じ形の写真なら、切れも余りも出ずに枠いっぱいに収まる。
   形の違う写真が来たときは、切らずに枠へ収まるまで縮める。
   枠の幅は矢印と点の枠（.carousel__frame）と同じにして、端をそろえる */
.slide {
  display: block;
  width: var(--hero-w);
  color: var(--ink);
}
.slide__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--media-bg);        /* 絵が届く前の下地 */
}
/* 縮めたときに余る左右（または上下）には、同じ写真をぼかして敷く。
   紺や白の帯にすると、その1枚だけ写真が小さく貧しく見えるため。
   写真のある1枚だけに敷く（--pic は pages/home.php が1枚ずつ入れる） */
.slide__media.has-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--pic) center / cover no-repeat;
  filter: blur(22px) brightness(.82);
  transform: scale(1.12);
}
.slide__pic {
  width: 100%; height: 100%;
  object-fit: contain;                /* 切らずに、枠に収まるまで縮める */
  transition: transform .22s ease;
}
/* 一覧のサムネ（.sc）の写真は「切って枠に合わせる」決まりで、それが下のほうに書いてあるため、
   上の一行だけでは負けてしまう。ヒーローの写真は切らないので、ここで書き直す */
.slide .sc__media .slide__pic { object-fit: contain; }
/* 触れたら、絵の枠の中で少しだけ大きくする（周りは動かさない）。押せる1枚だけ */
a.slide:hover .slide__pic { transform: scale(1.03); }

/* 絵の中の並びは、トップ以外のサムネイル（.sc。記事の一覧で使う部品）と同じにした（2026-09-15、本人の希望）。
   左上に分類の英字、右上に公開日、左下に短い線と題名。文字の読みやすさのための陰りも .sc のものを使う。
   文字の大きさ・余白はカードの幅に対する割合（cqw）なので、ヒーローの大きさに合わせて伸びる。
   .sc は 16:9 だが、ヒーローはサムネと同じ 3:2 にするので、ここで形を書き直す
   （.sc の指定はこれより下に書いてあり、同じ強さでは負けてしまうため） */
.slide__media.sc { aspect-ratio: 3 / 2; }
/* 題名の大きさも、下層ページのサムネと同じ決まり（.sc__title）のまま。ヒーローだけ大きくはしない（2026-09-15、本人の希望） */

/* 1枚が出てきたら、題名と、分類・日付をゆっくり浮かび上がらせる（題名 → 少し遅れて上の行）。
   絵が止まるのを待ってから始め、下から少し持ち上がりながら現れる。
   いまの1枚でなくなった文字は、静かに消す。
   隠すのは、スライダーが動く準備ができてから（is-ready）。動かないときは見せたまま */
.carousel.is-ready .slide .sc__bottom,
.carousel.is-ready .slide .sc__top { opacity: 0; transition: opacity .4s ease; }
.carousel.is-ready .carousel__item.is-active .slide .sc__bottom {
  animation: slide-rise 1.4s cubic-bezier(.22, 1, .36, 1) .6s both;
}
.carousel.is-ready .carousel__item.is-active .slide .sc__top {
  animation: slide-rise 1.4s cubic-bezier(.22, 1, .36, 1) .9s both;
}
@keyframes slide-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* 動きを減らす設定の人には、待たずにそのまま見せる */
@media (prefers-reduced-motion: reduce) {
  .carousel.is-ready .carousel__item.is-active .slide .sc__bottom,
  .carousel.is-ready .carousel__item.is-active .slide .sc__top { animation: none; opacity: 1; }
}

/* 絵のまわりに置くもの（矢印・点・手書き）の基準にする、見えない枠。
   16:9 の絵と同じ大きさで、絵にぴったり重ねる。
   枠そのものは指に反応させず、下の1枚が押せるようにしておく */
.carousel__frame {
  position: absolute; top: 0; left: 50%;
  width: var(--hero-w);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  pointer-events: none;
}

/* 手書きの「Life in a New Key」。絵の右下の角のすぐ下に置く */
.carousel__sign {
  position: absolute; top: calc(100% + var(--hero-gap)); right: 0;
  width: clamp(104px, 18.6%, 200px);
}
.carousel__sign img { display: block; width: 100%; height: auto; }

/* いま何枚目か。絵のすぐ下の真ん中に並べる。いまの1枚だけ横に伸ばす。押すとその1枚へ飛ぶ */
.carousel__dots {
  position: absolute; top: calc(100% + var(--hero-gap)); left: 0; right: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px;
}
.carousel__dot {
  position: relative;
  width: 20px; height: 26px;
  padding: 0;
  pointer-events: auto;
  transition: width .18s;
}
.carousel__dot span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line);
  transition: width .18s, background-color .18s;
}
.carousel__dot:hover span { background: var(--ink-mute); }
.carousel__dot[aria-current="true"] { width: 42px; }
.carousel__dot[aria-current="true"] span { width: 30px; background: var(--ink); }

/* 送りの矢印。細い線の丸を、絵の左右の外側に1つずつ置き、絵の高さの真ん中にそろえる。
   指でも押せる大きさ（44px）は取る */
.carousel__arrow {
  position: absolute; top: 50%;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), .28);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  pointer-events: auto;
  transition: color .2s, border-color .2s, background-color .2s;
}
.carousel__arrow--prev { right: calc(100% + var(--hero-gutter)); }
.carousel__arrow--next { left: calc(100% + var(--hero-gutter)); }
.carousel__arrow:hover { color: var(--blue); border-color: var(--blue); }
.carousel__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 980px) {
  .carousel { --hero-h: 360px; }
}
/* スマホでは、矢印を外に置くと絵が小さくなりすぎる。
   絵は横いっぱいに広げ、矢印は絵の左右の端の、高さの真ん中に重ねる
   （上の行は分類と日付、左下は題名なので、どちらともぶつからない位置）。
   写真の上でも見えるよう、地の色の丸にする */
@media (max-width: 640px) {
  .carousel { --hero-h: 260px; --hero-side: 0px; }
  .carousel__arrow {
    width: 40px; height: 40px;
    margin-top: -20px;
    border-color: transparent;
    background: rgba(250, 250, 247, .9);
  }
  .carousel__arrow:hover { border-color: transparent; background: var(--paper); }
  .carousel__arrow--prev { right: auto; left: 8px; }
  .carousel__arrow--next { left: auto; right: 8px; }
}

/* ==========================================================================
   トップページ（ヒーローより下）
   WHAT'S NEW（白）→ PICK UP（淡い水色の面）→ REGULARS（白）→ INFORMATION（白・小さく）→ フッター（水色）。
   大きな英字の見出しと、そのすぐ下の短い日本語。見出しの下の線・記事の左端は、中身の端にそろえる。
   ここの書体・字間・色は、この領域の中だけで使う（ヘッダー・ヒーロー・下の階層のページには広げない）
   ========================================================================== */
.tp {
  --tp-en: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --tp-sub: #526d80;              /* 補助文字の青灰（日付・コーナー名など） */
  --tp-rule: #cbdde7;             /* 薄い罫線 */
  --tp-pale: #f4f9fb;             /* ごく淡い青白（絵が届く前の下地） */
  /* セクションのあいだ。PC 80〜104px、スマホ 52px ほど。
     margin で空けるので、白いセクションどうしが続くところでも上下の余白は重ならない */
  --tp-gap: clamp(3.25rem, 7.2vw, 6.5rem);
  margin-block: var(--tp-gap);
  color: var(--ink);
}
/* ヒーローのすぐ下は、ヒーローの下にもう余白があるので詰める */
.first-view + .tp { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* 見出し。英字を大きく、すぐ下に短い日本語。下に薄い水色の線を1本 */
.tp-head {
  margin-bottom: clamp(2rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--tp-rule);
  text-align: center;
}
.tp-head__en {
  font-family: var(--tp-en);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.tp-head__ja {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* 日付・テーマ名などの小さな補助情報。題名のすぐ近くにまとめる */
.tp-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--tp-sub);
}
.tp-meta__date,
.tp-meta__name { font-family: var(--tp-en); font-size: 0.8125rem; letter-spacing: 0.06em; }
/* 2つめからは、前に細い縦線を1本 */
.tp-meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px; height: 0.9em;
  margin-right: 12px;
  vertical-align: -0.1em;
  background: currentColor;
  opacity: .35;
}

/* 記事・コーナーの題名はどれも Noto Sans JP の 600。左そろえ */
.nw-card__title,
.pk-main__title,
.pk-sub__title,
.rg-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  color: var(--ink);
  transition: color .2s;
}
/* 触れたら題名を少し明るい青に、絵をわずかに大きくする（枠の中だけで） */
.nw-card:hover .nw-card__title,
.pk-main:hover .pk-main__title,
.pk-sub:hover .pk-sub__title,
.rg-card:hover .rg-card__title { color: var(--blue); }

/* 絵の枠。角は少しだけ丸め、枠線や影は付けない。絵が届く前は淡い青白 */
.nw-card__media,
.pk-main__media,
.pk-sub__media,
.rg-card__cover {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tp-pale);
}
.nw-card__media img,
.pk-main__media img,
.pk-sub__media img,
.rg-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .22s ease;
}
.nw-card:hover img,
.pk-main:hover img,
.pk-sub:hover img,
.rg-card:hover img { transform: scale(1.03); }

/* 一覧へのボタン。地と同じ色に、紺の細い線 */
.tp-more { margin-top: clamp(2rem, 3.4vw, 2.75rem); text-align: center; }
.tp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 0 2.25rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color .2s, border-color .2s;
}
.tp-btn:hover { color: var(--blue); border-color: var(--blue); }

/* ---- 絵の無い記事の表紙。コーナーの色と名前だけで組む（仮の写真やロゴで埋めない）。
   上に小さく媒体名やテーマ、下に大きくローマ字のコーナー名。
   文字の大きさは表紙の幅に合わせて伸び縮みさせる（cqw ＝ 表紙の中の幅に対する割合）。
   表紙そのものの余白は % で取る（cqw にすると、表紙の外の画面の幅が基準になり、小さい表紙で文字が潰れる） */
.tp-cover {
  position: absolute; inset: 0;
  container-type: inline-size;
  display: flex; flex-direction: column;
  padding: 6.5% 7%;
  background: var(--cover-bg, var(--sky));
  color: var(--cover-ink, var(--ink));
}
.tp-cover__note {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: max(11px, 4.2cqw);
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.tp-cover__en {
  margin-top: auto;
  font-family: var(--tp-en);
  font-weight: 700;
  font-size: 12.5cqw;
  line-height: 1;
  letter-spacing: 0.02em;
}
/* ---- 写真の表紙に重ねるコーナー名（.tp-over）。
   写真のある記事も、絵だけでどのコーナーの記事か分かるようにする（2026-09-15）。
   文字だけの表紙（.tp-cover）と同じ余白・同じ大きさ（.tp-cover__en）で、左下に置く。
   写真の上なので文字は白にし、下のほうだけ紺を薄く敷いて、明るい写真でも読めるようにする */
.tp-over {
  position: absolute; inset: 0;
  z-index: 1;
  container-type: inline-size;
  display: flex; flex-direction: column;
  padding: 6.5% 7%;
  color: #fff;
  background: linear-gradient(to top,
    rgba(var(--ink-rgb), .6) 0%,
    rgba(var(--ink-rgb), .24) 40%,
    rgba(var(--ink-rgb), 0) 66%);
  text-shadow: 0 1px 14px rgba(var(--ink-rgb), .28);
  pointer-events: none;
}

/* コーナーごとの色。紺・青・水色・白で、互いに見分けがつくように（ピンクは使わない） */
.tp-cover--hataraki  { --cover-bg: var(--ink);     --cover-ink: #fff; }
.tp-cover--kokoromi  { --cover-bg: var(--blue);    --cover-ink: #fff; }
.tp-cover--kizashi   { --cover-bg: var(--sky);     --cover-ink: var(--ink); }
.tp-cover--tsuzuri   { --cover-bg: #1b3a57;        --cover-ink: #fff; }
.tp-cover--tashinami { --cover-bg: #fff;           --cover-ink: var(--blue); box-shadow: inset 0 0 0 1px var(--tp-rule); }
.tp-cover--nikki     { --cover-bg: var(--tp-pale); --cover-ink: var(--ink);  box-shadow: inset 0 0 0 1px var(--tp-rule); }
/* LIFESTYLE の MACHI・KYUJITSU。色は増やさず、いまある面の色の組み合わせを変えて見分ける */
.tp-cover--machi     { --cover-bg: var(--surface-2); --cover-ink: var(--ink); }
.tp-cover--kyujitsu  { --cover-bg: var(--tp-pale);   --cover-ink: var(--blue); box-shadow: inset 0 0 0 1px var(--tp-rule); }
/* 水色の面の上では、水色の表紙が地に溶けないよう白にする */
.tp--pickup .tp-cover--kizashi { --cover-bg: #fff; }

/* ---- WHAT'S NEW：横長（16:9）の絵を主役に。先頭の2本を大きく、残りを小さく並べる。
   大きさ（lg＝2列、md＝3列、sm＝4列ぶんの幅）は、件数に合わせて home.php で決める */
.nw {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 3.4vw, 2.75rem) clamp(1.25rem, 2.4vw, 2rem);
}
.nw__item--lg { grid-column: span 6; }
.nw__item--md { grid-column: span 4; }
.nw__item--sm { grid-column: span 3; }
.nw-card { display: block; }
.nw-card__media { aspect-ratio: 16 / 9; }
/* 絵と題名は一つの記事として読めるよう、近くに置く */
.nw-card__body { display: block; min-width: 0; margin-top: 14px; }
.nw-card__title {
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.nw__item--lg .nw-card__title { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem); line-height: 1.5; }
.nw-card__body .tp-meta { margin-top: 8px; }

/* ---- PICK UP：淡い水色の面を、画面の端から端まで敷く（中身の幅はほかと同じ） */
.tp--pickup {
  margin-inline: calc(var(--band-x, 0px) * -1);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--sky);
}
.tp--pickup > .wrap {
  max-width: calc(var(--page-max) + var(--wrap-x) * 2);
  margin-inline: auto;
}
.tp--pickup .tp-head { border-bottom-color: rgba(var(--ink-rgb), .16); }
/* 選んだものの共通点から決めた、日本語の短い企画名 */
.pk__theme {
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
/* 左に主役（大きな横長の絵・7割）、右に関連（小さな横長の絵＋題名）を縦に */
.pk {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3.4vw, 2.75rem);
  align-items: start;
}
.pk--solo { grid-template-columns: minmax(0, 1fr); }
.pk-main { display: block; }
.pk-main__media { aspect-ratio: 16 / 9; }
.pk-main__body { display: block; margin-top: 18px; }
.pk-main__title {
  margin-top: 10px;
  font-size: clamp(1.3125rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.5;
}
.pk-main__lead {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: 14px;
  font-size: 0.9375rem;
  line-height: 1.75;
}
/* 主役1本だけのとき。左に絵、右に文字 */
.pk--solo .pk-main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3.4vw, 2.75rem);
  align-items: center;
}
.pk--solo .pk-main__body { margin-top: 0; }

/* 右の列の高さを、主役の絵（左の列 × 9/16）と同じにして、最後の1本を列の下に寄せる。
   こうすると、右の下段の絵の底辺が、主役の絵の底辺にそろう（2026-09-15）。
   左右の幅は 7:5 なので、右の列の横:縦 は 16×5 : 9×7 ＝ 80:63。
   題名が長くて収まらないときは、列のほうが伸びる（文字が絵の外にはみ出さない） */
.pk__subs {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  aspect-ratio: 80 / 63;
  align-content: space-between;
}
.pk-sub {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: start;
  column-gap: 16px;
}
.pk-sub__media { aspect-ratio: 16 / 9; }
.pk-sub__body { display: block; min-width: 0; }
.pk-sub__title {
  margin-top: 6px;
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ---- REGULARS：コーナーの表紙（1:1）を1列に4つ。日本語の表示名を、ローマ字名より大きく */
.rg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.rg-card { display: block; }
.rg-card__cover { aspect-ratio: 1; }
/* 絵の中に文字がある表紙は、切らずに収め、余りは絵の地と同じ色で塗る */
.rg-card__cover--contain img { object-fit: contain; }
/* 絵の決まっていないコーナーは、記事と同じ「コーナーの色と名前で組んだ表紙」（.tp-cover）を使う */
.rg-card__title {
  margin-top: 14px;
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem);
  line-height: 1.45;
}
.rg-card__en {
  display: block;
  margin-top: 4px;
  font-family: var(--tp-en);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--tp-sub);
}
.rg-card__lead {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ---- INFORMATION：サイトからのお知らせ。見出しは小さく、日付と題名だけを並べる */
.tp--info .info {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.25rem clamp(2rem, 4vw, 4rem);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  border-top: 1px solid var(--tp-rule);
}
.info__en {
  font-family: var(--tp-en);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.info__ja { margin-top: 6px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; }
.info__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 14px;
  border-bottom: 1px solid var(--tp-rule);
}
.info__list > li:first-child .info__row { padding-top: 4px; }
.info__date {
  font-family: var(--tp-en);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--tp-sub);
}
.info__title { font-size: 0.9375rem; line-height: 1.7; transition: color .2s; }
.info__row:hover .info__title { color: var(--blue); }
.info__more { margin-top: 6px; text-align: right; }
.info__more a {
  display: inline-block;
  padding-block: 10px;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.info__more a:hover { color: var(--blue); }

/* 幅が足りなくなってきたら、段を減らす */
@media (max-width: 900px) {
  /* 新着は、どのカードも2列で並べる */
  .nw__item--lg,
  .nw__item--md,
  .nw__item--sm { grid-column: span 6; }
  .nw__item--lg .nw-card__title { font-size: 1.0625rem; }
  .rg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 760px) {
  .pk,
  .pk--solo .pk-main { grid-template-columns: minmax(0, 1fr); }
  .pk--solo .pk-main__body { margin-top: 18px; }
  /* 1列に積むときは、主役の下に続けて並べるだけ（高さをそろえる相手がいない） */
  .pk__subs { aspect-ratio: auto; align-content: start; }
  .tp--info .info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* スマホ：大きな2本は絵を上に大きく。ほかは、左に横長の小さな絵・右に題名の行にする */
  .nw { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nw__item--lg,
  .nw__item--md,
  .nw__item--sm { grid-column: auto; }
  .nw__item--md .nw-card,
  .nw__item--sm .nw-card {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
  }
  .nw__item--md .nw-card__body,
  .nw__item--sm .nw-card__body { margin-top: 0; }
  .nw-card__title { font-size: 0.9375rem; }
  .nw__item--lg .nw-card__title { font-size: 1.125rem; }
  .pk-main__title { font-size: 1.3125rem; }
  .pk-sub { grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; }
  .rg { column-gap: 16px; }
  .rg-card__title { margin-top: 12px; }
  .info__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------------------------------- 記事カード */
.post-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
.post-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card--featured .post-card__cover { aspect-ratio: 16 / 10; }
.post-card__cover img,
.post-card__cover .post-card__art {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s;
}
.post-card:hover .post-card__cover img,
.post-card:hover .post-card__art { transform: scale(1.05); }
.post-card__art { position: relative; display: block; }
.post-card__art-icon {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3rem; opacity: .2;
}
.post-card__scrim {
  position: absolute; inset-inline: 0; bottom: 0; height: 66%;
  background: linear-gradient(to top, color-mix(in oklab, var(--void) 85%, transparent), transparent);
}
.post-card__badges { position: absolute; left: 0.75rem; top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.post-card__duration {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  padding: 0.1rem 0.4rem; border-radius: 0.375rem;
  background: color-mix(in oklab, var(--void) 75%, transparent);
  backdrop-filter: blur(4px);
  font-family: var(--font-display); font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--ink) 90%, transparent);
}
.post-card__body { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; padding: 1.25rem; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--faint); }
.post-card__title {
  font-family: var(--font-display); font-weight: 700; line-height: 1.4;
  font-size: 1.125rem;
  transition: color .2s;
}
.post-card--featured .post-card__title { font-size: 1.5rem; }
.post-card:hover .post-card__title { color: var(--nebula-soft); }
.post-card__excerpt {
  font-size: 0.875rem; line-height: 1.7; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.post-card__author {
  margin-top: auto; padding-top: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: var(--faint);
}
.avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--font-display); font-size: 0.625rem; color: var(--muted);
}
.avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; color: var(--ink);
  background: linear-gradient(140deg, color-mix(in oklab, var(--nebula) 40%, transparent), color-mix(in oklab, var(--star) 30%, transparent)); }

/* コンパクトな行 */
.post-row {
  display: flex; gap: 1rem;
  padding: 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.post-row:hover { border-color: var(--line); background: color-mix(in oklab, var(--surface) 50%, transparent); }
.post-row__thumb {
  position: relative; flex-shrink: 0;
  width: 6rem; height: 4rem; border-radius: var(--radius-sm); overflow: hidden;
}
.post-row__thumb-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.125rem; opacity: .4; }
.post-row__meta { margin-bottom: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.6875rem; color: var(--faint); }
.post-row__title {
  font-size: 0.875rem; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  transition: color .2s;
}
.post-row:hover .post-row__title { color: var(--nebula-soft); }
.post-list { display: flex; flex-direction: column; gap: 0.25rem; }

/* ------------------------------------------------------------ 記事の本文 */
.article-header { border-bottom: 1px solid var(--line-soft); padding-block: 3rem; }
@media (min-width: 640px) { .article-header { padding-block: 4rem; } }
.breadcrumb { margin-bottom: 2rem; font-size: 0.75rem; color: var(--faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.breadcrumb a:hover { color: var(--muted); }
.article-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -0.02em;
}
.article-lead { margin-top: 1.25rem; font-size: 1rem; line-height: 1.8; color: var(--muted); }
.article-byline {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.article-byline__who { display: flex; align-items: center; gap: 0.75rem; }
.article-byline__name { font-size: 0.875rem; font-weight: 500; }
.article-byline__sub { font-size: 0.75rem; color: var(--faint); }

.article-body {
  font-size: 1.0625rem; line-height: 2;
  color: color-mix(in oklab, var(--ink) 92%, transparent);
}
.article-body > * + * { margin-top: 1.5em; }
.article-body h2 {
  margin-top: 3rem; padding-left: 0.9rem;
  border-left: 3px solid var(--nebula);
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.article-body h3 { margin-top: 2.25rem; font-size: 1.175rem; font-weight: 700; color: var(--ink); }
.article-body a {
  color: var(--star);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, var(--star) 40%, transparent);
  transition: text-decoration-color .2s;
}
.article-body a:hover { text-decoration-color: var(--star); }
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body ul { list-style: disc; padding-left: 1.4em; }
.article-body ol { list-style: decimal; padding-left: 1.4em; }
.article-body li::marker { color: var(--nebula-soft); }
.article-body li + li { margin-top: 0.5em; }
.article-body blockquote {
  border-left: 2px solid var(--line);
  padding: 0.25rem 0 0.25rem 1.25rem;
  color: var(--muted);
}
.article-body hr {
  border: 0; height: 1px; margin-block: 3rem;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.article-body code {
  font-size: 0.875em; padding: 0.15em 0.4em;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.375rem;
}
.article-body pre {
  background: var(--deep); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.25rem; overflow-x: auto; line-height: 1.7;
}
.article-body pre code { background: none; border: 0; padding: 0; font-size: 0.875rem; }
.article-body img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.article-body table { width: 100%; font-size: 0.9375rem; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 0.6rem 0.9rem; text-align: left; }
.article-body th { background: var(--surface); font-weight: 700; }
.article-body--fade {
  -webkit-mask-image: linear-gradient(to bottom, #fff 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #fff 55%, transparent 100%);
}

.tag-list { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------- ペイウォール */
.paywall {
  position: relative; margin-top: -6rem;
  border: 1px solid color-mix(in oklab, var(--aurum) 30%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--surface), var(--deep));
  box-shadow: 0 40px 120px -40px color-mix(in oklab, var(--aurum) 40%, transparent);
  padding: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) { .paywall { padding: 2.5rem; } }
.paywall__inner { max-width: 32rem; margin-inline: auto; }
.lock-icon {
  display: grid; place-items: center; margin-inline: auto;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--aurum) 40%, transparent);
  background: color-mix(in oklab, var(--aurum) 10%, transparent);
  color: var(--aurum);
}
.lock-icon svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.paywall__title { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.paywall__desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.benefit-list { margin: 1.75rem auto 0; max-width: 28rem; text-align: left; display: flex; flex-direction: column; gap: 0.75rem; }
.benefit-list li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.benefit-list li::before { content: "✦"; color: var(--aurum); flex-shrink: 0; }

/* -------------------------------------------------------------- 数字パネル */
.stats {
  display: grid; gap: 1px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--line-soft); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .stats--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stats--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stats > div { background: color-mix(in oklab, var(--surface) 70%, transparent); padding: 1.5rem; backdrop-filter: blur(6px); }
.stats__value {
  display: flex; align-items: baseline; gap: 0.25rem;
  font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; line-height: 1;
}
@media (min-width: 640px) { .stats__value { font-size: 2.25rem; } }
.stats__unit { font-size: 1rem; color: var(--nebula-soft); }
.stats__label { margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.stats__note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--faint); }

/* ------------------------------------------------------------------ 年表 */
.timeline { position: relative; }
.timeline__line {
  position: absolute; top: 0.5rem; bottom: 0; left: 11px; width: 1px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--nebula) 60%, transparent), var(--line), transparent);
}
.timeline__item { position: relative; padding-left: 2.5rem; padding-bottom: 3.5rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__node {
  position: absolute; left: 0; top: 0.375rem;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--nebula) 40%, transparent);
  background: var(--void);
}
.timeline__node span {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--nebula), var(--star));
}
.timeline__year-mobile {
  margin-bottom: 0.75rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--nebula-soft);
}
.timeline__year-desktop { display: none; }
.milestone { padding: 1.5rem; }
@media (min-width: 640px) { .milestone { padding: 2rem; } }
.milestone__tag {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--nebula) 30%, transparent);
  background: color-mix(in oklab, var(--nebula) 10%, transparent);
  font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.18em;
  color: var(--nebula-soft);
}
.milestone__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
@media (min-width: 640px) { .milestone__title { font-size: 1.5rem; } }
.milestone__body { margin-top: 1rem; font-size: 0.9375rem; line-height: 2; color: var(--muted); }
.milestone__highlights { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.milestone__hl-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--nebula-soft); }
@media (min-width: 640px) { .milestone__hl-value { font-size: 1.875rem; } }
.milestone__hl-label { margin-top: 0.5rem; font-size: 0.75rem; color: var(--faint); }
.milestone__source { margin-top: 1.25rem; display: inline-flex; gap: 0.375rem; font-size: 0.75rem; color: var(--faint); }
.milestone__source:hover { color: var(--star); }

@media (min-width: 1024px) {
  .timeline__line { left: 50%; transform: translateX(-50%); }
  .timeline__item {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: start; column-gap: 2.5rem; padding-left: 0;
  }
  .timeline__node { left: 50%; transform: translateX(-50%); }
  .timeline__spacer { width: 1.5rem; }
  .timeline__year-mobile { display: none; }
  .timeline__year-desktop {
    display: block; padding-top: 0.25rem;
    font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--line);
  }
  .timeline__item--right .timeline__year-desktop { text-align: right; }
  .timeline__item--right .milestone { text-align: right; }
  .timeline__item--right .milestone__highlights { justify-content: flex-end; }
}

/* --------------------------------------------------------------- 教えて社長 */
.ask-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ask-card__q { position: relative; padding: 1.5rem; border-bottom: 1px solid var(--line-soft); background: color-mix(in oklab, var(--deep) 50%, transparent); }
.ask-card__mark {
  position: absolute; right: 1.25rem; top: 1rem;
  font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--line);
}
.ask-card__question { position: relative; max-width: 85%; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.7; }
.ask-card__asker { margin-top: 1rem; font-size: 0.75rem; color: var(--faint); }
.ask-card__a { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; padding: 1.5rem; }
.ask-card__a-mark {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: color-mix(in oklab, var(--aurum) 15%, transparent);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--aurum);
}
.ask-card:hover .post-card__title, .ask-card:hover .ask-card__title { color: var(--aurum); }
.ask-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.4; transition: color .2s; }

.ask-quote {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--aurum) 25%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--surface), var(--deep));
  padding: 1.5rem;
}
@media (min-width: 640px) { .ask-quote { padding: 2rem; } }
.ask-quote__mark {
  position: absolute; right: -0.5rem; top: -1rem;
  font-family: var(--font-display); font-size: 6rem; line-height: 1;
  color: color-mix(in oklab, var(--aurum) 10%, transparent);
}
.ask-quote__label { position: relative; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--aurum); }
.ask-quote__text { position: relative; margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.8; }
@media (min-width: 640px) { .ask-quote__text { font-size: 1.25rem; } }
.ask-quote__asker { position: relative; margin-top: 1.25rem; font-size: 0.875rem; color: var(--faint); }

.access-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.75rem; }
.access-note__item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 999px; border: 1px solid; }
.access-note__item svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
.access-note__item--ask { border-color: color-mix(in oklab, var(--aurum) 35%, transparent); background: color-mix(in oklab, var(--aurum) 10%, transparent); color: var(--aurum); }
.access-note__item--read { border-color: color-mix(in oklab, var(--star) 35%, transparent); background: color-mix(in oklab, var(--star) 10%, transparent); color: var(--star); }

/* ------------------------------------------------------------- 時事ネタ */
.news-list { border-top: 1px solid var(--line-soft); }
.news-item {
  display: flex; flex-direction: column; gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .2s;
}
@media (min-width: 640px) {
  .news-item { flex-direction: row; gap: 2rem; padding-inline: 1rem; }
}
.news-item:hover { background: color-mix(in oklab, var(--surface) 40%, transparent); }
.news-item__date { display: flex; align-items: baseline; gap: 0.5rem; flex-shrink: 0; }
@media (min-width: 640px) { .news-item__date { width: 6rem; flex-direction: column; align-items: flex-start; gap: 0; } }
.news-item__md {
  font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--line); transition: color .2s;
}
.news-item:hover .news-item__md { color: color-mix(in oklab, var(--nebula) 60%, transparent); }
.news-item__md span { font-size: 1.125rem; }
.news-item__year { font-family: var(--font-display); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--faint); }
@media (min-width: 640px) { .news-item__year { margin-top: 0.5rem; } }
.news-item__title { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.4; transition: color .2s; }
.news-item:hover .news-item__title { color: var(--nebula-soft); }
.news-item__headline {
  margin-top: 0.5rem; padding-left: 0.75rem; border-left: 2px solid var(--line);
  font-size: 0.75rem; line-height: 1.7; color: var(--faint);
}
.news-item__excerpt {
  margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.news-source {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: color-mix(in oklab, var(--deep) 60%, transparent);
  padding: 1.25rem;
}
@media (min-width: 640px) { .news-source { padding: 1.5rem; } }
.news-source__label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; color: var(--faint); }
.news-source__headline { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.7; }
.news-source__meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--faint); }
.news-source__meta a { color: var(--star); }

/* ------------------------------------------------------------- 社員自慢 */
.staff-card { display: flex; flex-direction: column; height: 100%; padding: 1.5rem; }
@media (min-width: 640px) { .staff-card { padding: 1.75rem; } }
.staff-card__head { display: flex; align-items: center; gap: 1rem; }
.staff-portrait {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: 4rem; height: 4rem; border-radius: 50%;
  border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
}
.staff-portrait img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.staff-card__praise {
  margin-top: 1.5rem; padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--star) 25%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--star) 8%, transparent);
}
.staff-card__praise-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; color: var(--star); }
.staff-card__praise-text { margin-top: 0.625rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; line-height: 1.8; }
.staff-card__body { margin-top: 1.25rem; font-size: 0.875rem; line-height: 2; color: var(--muted); }
.staff-card__posts { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.staff-card__posts-label { margin-bottom: 0.75rem; font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--faint); }
.staff-card__posts li + li { margin-top: 0.5rem; }
.staff-card__posts a { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); transition: color .2s; }
.staff-card__posts a:hover { color: var(--ink); }
.staff-card__posts a::before { content: "→"; color: var(--star); flex-shrink: 0; }

/* ------------------------------------------------------------- 社長の趣味 */
.hobby-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.hobby-card__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.hobby-card__icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.75rem; opacity: .25; }
.hobby-card__item { padding-left: 0.75rem; border-left: 2px solid var(--line); }
.hobby-card__item-name { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; line-height: 1.4; }
.hobby-card__item-note { margin-top: 0.25rem; font-size: 0.75rem; color: var(--faint); }
.genre-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid; font-size: 0.6875rem; font-weight: 500; }
.genre-chip--aurum  { border-color: color-mix(in oklab, var(--aurum) 35%, transparent);  background: color-mix(in oklab, var(--aurum) 12%, transparent);  color: var(--aurum); }
.genre-chip--flare  { border-color: color-mix(in oklab, var(--flare) 35%, transparent);  background: color-mix(in oklab, var(--flare) 12%, transparent);  color: var(--flare); }
.genre-chip--star   { border-color: color-mix(in oklab, var(--star) 35%, transparent);   background: color-mix(in oklab, var(--star) 12%, transparent);   color: var(--star); }
.genre-chip--nebula { border-color: color-mix(in oklab, var(--nebula) 35%, transparent); background: color-mix(in oklab, var(--nebula) 12%, transparent); color: var(--nebula-soft); }

/* ------------------------------------------------------------- 社長の目標 */
.goal { padding: 1.5rem; }
@media (min-width: 640px) { .goal { padding: 1.75rem; } }
.goal--achieved { border-color: color-mix(in oklab, var(--aurum) 40%, transparent); background: linear-gradient(140deg, var(--surface), var(--deep)); }
.goal--progress { border-color: color-mix(in oklab, var(--star) 25%, transparent); }
.goal__inner { display: flex; gap: 1rem; }
.goal__mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid;
}
.goal__mark--achieved { border-color: var(--aurum); background: var(--aurum); color: var(--void); }
.goal__mark--achieved svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.goal__mark--progress { border-color: color-mix(in oklab, var(--star) 60%, transparent); background: color-mix(in oklab, var(--star) 15%, transparent); color: var(--star); }
.goal__mark--progress span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.goal__mark--wish { border-color: var(--line); color: var(--faint); }
.goal__mark--wish span { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: .5; }
.goal__status { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; }
.goal__status--achieved { color: var(--aurum); }
.goal__status--progress { color: var(--star); }
.goal__status--wish { color: var(--faint); }
.goal__title { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.goal__body { margin-top: 0.75rem; font-size: 0.875rem; line-height: 2; color: var(--muted); }
.goal__achieved {
  margin-top: 1.25rem; padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--aurum) 25%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--aurum) 8%, transparent);
}
.goal__achieved-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-family: var(--font-display); font-size: 0.75rem; color: var(--aurum); }
.goal__achieved-note { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.8; color: color-mix(in oklab, var(--ink) 85%, transparent); }
.goal__foot {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: 0.75rem; color: var(--faint);
}
.goal__comments { margin-top: 1.25rem; }
.comment { display: flex; gap: 0.75rem; }
.comment + .comment { margin-top: 1rem; }
.comment__bubble {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--void) 50%, transparent);
  padding: 0.75rem 1rem;
}
.comment__name { font-size: 0.75rem; color: var(--faint); }
.comment__text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.8; color: var(--muted); white-space: pre-wrap; word-break: break-word; }

/* ------------------------------------------------------------- ロック表示 */
.locked { position: relative; overflow: hidden; border: 1px solid color-mix(in oklab, var(--aurum) 30%, transparent); border-radius: var(--radius); background: linear-gradient(to bottom, var(--surface), var(--deep)); }
.locked__preview { padding: 1.5rem; opacity: .32; filter: blur(1.5px); pointer-events: none; user-select: none; }
@media (min-width: 640px) { .locked__preview { padding: 2rem; } }
.locked__overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-inline: 1.25rem; text-align: center;
  background: color-mix(in oklab, var(--void) 55%, transparent);
  backdrop-filter: blur(2px);
}
.locked__inner { max-width: 28rem; }
.locked__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.locked__desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.locked__note { margin-top: 1rem; font-size: 0.75rem; color: var(--faint); }
.skeleton { height: 5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--void) 60%, transparent); }

/* ----------------------------------------------------------- 音声プレイヤー */
.player {
  border: 1px solid color-mix(in oklab, var(--star) 25%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--surface), var(--deep));
  box-shadow: 0 24px 80px -40px color-mix(in oklab, var(--star) 50%, transparent);
  padding: 1.25rem;
}
@media (min-width: 640px) { .player { padding: 1.5rem; } }
.player__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.player__ep { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; color: var(--star); }
.player__title { margin-top: 0.25rem; font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__speeds { display: flex; gap: 0.25rem; flex-shrink: 0; }
.player__speed { padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-family: var(--font-display); font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--faint); transition: all .2s; }
.player__speed:hover { color: var(--muted); }
.player__speed.is-active { background: color-mix(in oklab, var(--star) 20%, transparent); color: var(--star); }
.player__controls { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.player__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--muted); transition: all .2s; }
.player__btn:hover { background: var(--surface-2); color: var(--ink); }
.player__btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.player__play {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--star), var(--nebula)); color: var(--void);
  transition: transform .2s;
}
.player__play:hover { transform: scale(1.05); }
.player__play:active { transform: scale(.95); }
.player__play svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.player__bar { flex: 1; display: flex; align-items: center; gap: 0.75rem; margin-left: 0.25rem; }
.player__time { font-family: var(--font-display); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--faint); }
.player__seek { position: relative; flex: 1; }
.player__seek-track { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.player__seek-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--star), var(--nebula)); }
.player__seek input[type="range"] { position: absolute; inset-inline: 0; top: -0.5rem; width: 100%; height: 1.25rem; opacity: 0; cursor: pointer; }
.player__error { margin-top: 1rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in oklab, var(--flare) 30%, transparent); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--flare) 10%, transparent); font-size: 0.75rem; color: var(--flare); }

.video-embed { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 24px 80px -32px color-mix(in oklab, var(--flare) 40%, transparent); }
.video-embed__frame { position: relative; aspect-ratio: 16 / 9; }
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------- 共有ボタン */
.share { position: relative; display: flex; align-items: center; gap: .5rem; }
.share__btn {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(var(--ink-rgb), .25); border-radius: 50%;
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.share__btn svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; }
.share__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 押したときの短い知らせ。並びを押し広げないよう、下に浮かせる */
.share__toast {
  position: absolute; top: 100%; right: 0;
  margin-top: .5rem;
  max-width: min(22rem, 80vw);
  font-size: .75rem; line-height: 1.6; text-align: right; color: var(--ink-sub);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.share__toast.is-on { opacity: 1; }

@media (max-width: 640px) {
  .share__btn { width: 2.25rem; height: 2.25rem; }
  .share__btn svg { width: 1rem; height: 1rem; }
}

/* ------------------------------------------------------------------ フォーム */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field__label { font-size: 0.875rem; font-weight: 500; }
.field__req { margin-left: 0.375rem; font-size: 0.6875rem; color: var(--flare); }
.field__hint { font-size: 0.75rem; line-height: 1.6; color: var(--faint); }
.input, .textarea, .select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--deep); color: var(--ink);
  font-size: 0.9375rem; line-height: 1.7;
  transition: border-color .2s;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: color-mix(in oklab, var(--nebula) 50%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.textarea { min-height: 8rem; resize: vertical; font-family: inherit; }
.textarea--tall { min-height: 22rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.checkbox { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--muted); cursor: pointer; }
.checkbox input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var(--nebula); flex-shrink: 0; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; stroke: var(--faint); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-field .input { padding-left: 2.75rem; border-radius: 999px; }

.alert { padding: 0.875rem 1.125rem; border-radius: var(--radius-sm); border: 1px solid; font-size: 0.875rem; line-height: 1.7; }
.alert--success { border-color: color-mix(in oklab, var(--star) 35%, transparent); background: color-mix(in oklab, var(--star) 10%, transparent); color: var(--star); }
.alert--error { border-color: color-mix(in oklab, var(--flare) 35%, transparent); background: color-mix(in oklab, var(--flare) 10%, transparent); color: var(--flare); }
.alert--info { border-color: var(--line); background: color-mix(in oklab, var(--surface) 50%, transparent); color: var(--muted); }
.alert + .alert { margin-top: 0.75rem; }
.flash-area { margin-bottom: 1.5rem; }

.auth-card { max-width: 26rem; margin-inline: auto; padding: 2rem; }
.auth-card__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-align: center; }
.auth-card__desc { margin-top: 0.75rem; text-align: center; font-size: 0.875rem; color: var(--muted); }
.auth-card__foot { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--faint); }
.auth-card__foot a { color: var(--star); }

/* ------------------------------------------------------------- ページ送り */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 3rem; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.75rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  font-family: var(--font-display); font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: var(--muted); transition: all .2s;
}
.pagination a:hover { border-color: color-mix(in oklab, var(--nebula) 50%, transparent); color: var(--ink); }
.pagination .is-current { border-color: color-mix(in oklab, var(--nebula) 50%, transparent); background: color-mix(in oklab, var(--nebula) 15%, transparent); color: var(--ink); }
.pagination .is-disabled { opacity: .35; }

/* --------------------------------------------------------------- CTAブロック */
.cta {
  overflow: hidden; border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--aurum) 25%, transparent);
  background: linear-gradient(140deg, var(--surface), var(--deep));
  padding: 2rem;
}
@media (min-width: 640px) { .cta { padding: 3rem; } }
.cta--center { text-align: center; }
.cta__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.7; }
@media (min-width: 640px) { .cta__title { font-size: 1.875rem; } }
.cta__desc { margin-top: 1.25rem; max-width: 36rem; font-size: 0.875rem; line-height: 2; color: var(--muted); }
.cta--center .cta__desc { margin-inline: auto; }
.cta__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .cta__grid { grid-template-columns: 1.1fr 1fr; } }

/* ------------------------------------------------------------- プラン */
.plan { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; }
.plan--featured { border-color: color-mix(in oklab, var(--aurum) 40%, transparent); background: linear-gradient(to bottom, var(--surface), var(--deep)); box-shadow: 0 32px 100px -48px color-mix(in oklab, var(--aurum) 50%, transparent); }
.plan__badge { align-self: flex-start; margin-bottom: 1rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: color-mix(in oklab, var(--aurum) 15%, transparent); font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--aurum); }
.plan__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.plan__price { margin-top: 0.75rem; display: flex; align-items: baseline; gap: 0.25rem; }
.plan__price b { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; }
.plan__price span { font-size: 0.875rem; color: var(--faint); }
.plan__desc { margin-top: 1rem; font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.plan__features { flex: 1; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.plan__features li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.plan__features li::before { content: "✦"; color: var(--nebula-soft); flex-shrink: 0; }
.plan--featured .plan__features li::before { color: var(--aurum); }
.plan .btn { margin-top: 2rem; }

/* ------------------------------------------------------------- プロフィール */
.profile-hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .profile-hero { grid-template-columns: 1fr 0.8fr; gap: 4rem; } }
.profile-photo {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: linear-gradient(140deg, var(--surface-2), var(--deep));
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo__glow {
  position: absolute; inset: 0; opacity: .6;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(124,107,255,.35), transparent 65%),
    radial-gradient(80% 60% at 80% 85%, rgba(79,209,224,.25), transparent 60%);
}
.profile-photo__fallback { position: relative; text-align: center; }
.profile-photo__fallback p:first-child { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: color-mix(in oklab, var(--ink) 80%, transparent); }
.profile-photo__fallback p:last-child { margin-top: 0.5rem; font-family: var(--font-display); font-size: 0.625rem; letter-spacing: 0.3em; color: var(--faint); }
.profile-catch {
  margin-top: 2rem; padding-left: 1.25rem;
  border-left: 2px solid color-mix(in oklab, var(--nebula) 50%, transparent);
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.7;
}
@media (min-width: 640px) { .profile-catch { font-size: 1.5rem; } }
.career-list { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 40%, transparent); }
.career-list > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem; }
.career-list > div + div { border-top: 1px solid var(--line-soft); }
@media (min-width: 640px) { .career-list > div { flex-direction: row; gap: 2rem; } }
.career-list dt { flex-shrink: 0; width: 5rem; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--nebula-soft); }
.career-list dd { font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.facet { padding: 1.75rem; }
.facet--nebula { border-color: color-mix(in oklab, var(--nebula) 35%, transparent); }
.facet--flare  { border-color: color-mix(in oklab, var(--flare) 35%, transparent); }
.facet--star   { border-color: color-mix(in oklab, var(--star) 35%, transparent); }
.facet--aurum  { border-color: color-mix(in oklab, var(--aurum) 35%, transparent); }
.facet__no { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.2em; opacity: .7; }
.facet--nebula .facet__no { color: var(--nebula-soft); }
.facet--flare  .facet__no { color: var(--flare); }
.facet--star   .facet__no { color: var(--star); }
.facet--aurum  .facet__no { color: var(--aurum); }
.facet__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.facet__body { margin-top: 1rem; font-size: 0.875rem; line-height: 2; color: var(--muted); }

/* ------------------------------------------------------------- ラジオ一覧 */
.episode-list { overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 40%, transparent); }
.episode { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; transition: background-color .2s; }
.episode + .episode { border-top: 1px solid var(--line-soft); }
@media (min-width: 640px) { .episode { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.5rem; } }
.episode:hover { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.episode__no {
  display: grid; place-items: center; flex-shrink: 0;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--star) 30%, transparent);
  background: color-mix(in oklab, var(--star) 10%, transparent);
  font-family: var(--font-display); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--star);
}
.episode__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 1.4; transition: color .2s; }
.episode:hover .episode__title { color: var(--star); }
.episode__excerpt { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.episode__play { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-2); color: var(--star); transition: transform .2s; }
.episode:hover .episode__play { transform: scale(1.1); }
.episode__play svg { width: 1rem; height: 1rem; fill: currentColor; margin-left: 2px; }

/* ------------------------------------------------------------------ 404 */
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding-block: 6rem; text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: 3.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--nebula-soft); }

/* ==========================================================================
   リデザイン（参考デザインに合わせたセクション）
   ========================================================================== */

/* 左右の余白。ヘッダーより広く取る */
.wrap { padding-inline: var(--wrap-x); }

/* 画像が無いあいだのプレースホルダー */
.media-ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--media-bg);
  border: 1px solid rgba(var(--ink-rgb), .12);
  font-family: var(--font-condensed);
  font-size: 0.875rem; letter-spacing: 0.18em;
  color: rgba(var(--ink-rgb), .22);
}

/* ------------------------------------------------ 英字＋小さな和文の見出し */
/* 英字は、トップの見出し（WHAT'S NEW）・章の名前・ヘッダーと同じ Jost の太字にそろえる。
   以前は細いクラシックなセリフ（Cormorant Garamond）を字間を広げて小さく出していたが、
   ページの中で見出しが目立たず、英字の書体も章の名前と2種類になっていたため（2026-09-15）。
   セクションの区切りは、見出しと余白と細い線で見せる */
.sec-head { margin-bottom: clamp(1.5rem, 2.6vw, 2rem); }
.sec-head__en {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sec-head__ja {
  margin-top: 0.625rem;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* 見出しを左、view more を右の同じ行に置く。一覧はその下に並べる。
   一覧の下にリンクの行を置かないので、セクションの終わりに空きが残らない */
.sec-head--row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}

/* 文字と小さな矢印だけのリンク。矢印は短い線に、矢じりの上半分だけを付ける */
.more-link {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  padding-block: 10px;                /* 指で押せる高さを取る */
  font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s;
}
.more-link:hover { color: var(--blue); }
.more-link__arrow {
  position: relative;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform .2s;
}
.more-link__arrow::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 7px; height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: rotate(35deg);
}
.more-link:hover .more-link__arrow { transform: translateX(3px); }

/* --------------------------------------------------- view more のリンク */
/* 箱にはせず、文字の下に細い線を1本引くだけにする。
   線の右端は矢じりの上半分だけを跳ね上げて、先へ進むことを伝える */
.btn-view-row { display: flex; justify-content: flex-end; margin-top: clamp(1.5rem, 3vw, 2.75rem); }
.btn-view {
  position: relative;
  display: flex; align-items: center;
  width: min(100%, 13rem);
  /* 上下の余白は押せる広さ（高さ 44px ほど）を取るため。
     右は、長い文言が矢じりの真上まで来て窮屈に見えないように空ける */
  padding: 0.625rem 1.5rem 0.625rem 0;
  color: var(--ink);
  transition: color .2s;
}
.btn-view:hover { color: var(--blue); }
.btn-view__label { font-size: 1rem; line-height: 1.5; letter-spacing: 0.04em; }
/* 下の線。リンクの幅いっぱいに引く */
.btn-view__arrow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .25s;
}
/* 矢じりの上半分。線の右端を軸にして、左上へ跳ね上げる */
.btn-view__arrow::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 12px; height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: rotate(35deg);
}
/* 触れたら線が少し先へ伸びる（フッターのお問い合わせと同じ動き） */
.btn-view:hover .btn-view__arrow { right: -0.625rem; }

/* ------------------------------------------------------------------ NEWS */
/* ------------------------------------------------- セクション（共通の型） */
.block {
  position: relative;
  /* セクションどうしの間は、上下を足して 56〜80px ほど */
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  /* 背景は敷かない。白系の地をページの最後まで続ける */
}
/* 最後のセクションとフッターのあいだは、少し広めに空ける */
main > .block:last-child { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
/* 背景に写真を敷くセクション。--photo に url(...) を入れる */
.block--photo {
  background:
    var(--photo, none) center / cover no-repeat,
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%, var(--paper) 100%);
}
.block--photo::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(250, 250, 247, .62);
  pointer-events: none;
}
.block > .wrap { position: relative; }

/* セクションどうしの区切り。トップページのように .block が続く場所にだけ出る */
.block + .block::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--wrap-x);
  right: var(--wrap-x);
  height: 1px;
  background: var(--rule);
}

/* カードの3列。カードは箱にせず、絵・分類・題名・要約を1つのまとまりとして並べる */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2rem);
}
.tile { display: block; color: var(--ink); }
.tile__media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--media-bg);
}
/* 触れたら、絵の枠の中で少しだけ大きくする（周りは動かさない） */
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.tile:hover .tile__media img { transform: scale(1.03); }
/* 絵の下の文字は、小さなラベル → 主見出し → 説明 の順。
   絵から文字まで 20px、ラベルから見出しまで 6px、見出しから説明まで 10px。
   カードの下端をそろえるための空きは入れない（中身のまとまりを先に守る） */

/* 分類・プロジェクト名などの小さなラベル。枠や色の札にはせず、文字だけで置く */
.tile__tag {
  display: block;
  margin-top: 20px;
  font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-sub);
}
.tile__tag + .tile__title { margin-top: 6px; }
/* 主見出し。太くしすぎず、2行ほどで読み切れる大きさに */
.tile__title {
  margin-top: 20px;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: 500; line-height: 1.6;
  letter-spacing: 0.02em;
  text-wrap: pretty;                  /* 最後の行に1文字だけ残るのを避ける */
  color: var(--ink);
  transition: color .2s;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.tile:hover .tile__title { color: var(--blue); }
.tile__date {
  margin-top: 8px;
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--ink-sub);
}
/* 説明は見出しの補足。一覧では2行までにして、全文は詳しいページで読む */
.tile__excerpt {
  margin-top: 10px;
  font-size: 0.875rem; line-height: 1.75;
  color: var(--ink-sub);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
/* --------------------------------------------------- 下層ページの見出しと本文 */
/* トップより上を広く取る */
.block--page { padding-top: clamp(2.25rem, 4vw, 3.75rem); }

/* TOP > HATARAKI の巨大なパンくず。現在地だけ白 */
.page-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 0.4em;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.1;
}
.page-head__crumb,
.page-head__sep { color: var(--ink-mute); }
.page-head__crumb { transition: color .2s; }
.page-head__crumb:hover { color: var(--ink); }
.page-head__current { color: var(--ink); }

/* 記事と日記のページでは、パンくずより記事の見出しを大きく見せる。
   コーナーの入口では、パンくずがそのままページの題になるので大きいまま */
.is-article .page-head { font-size: clamp(1.125rem, 1.6vw, 1.5rem); }
.is-article .page-head__crumb,
.is-article .page-head__sep { color: var(--ink-sub); }
/* 和文はコンデンス体が無く大きく見えるので、少し落として釣り合わせる */
.page-head__current--ja {
  font-family: var(--font-sans);
  font-size: 0.7em;
  letter-spacing: -0.01em;
}

/* 導入文 */
.lede {
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  max-width: 46rem;
}
.lede p {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 2.2;
  color: var(--ink);
}
.lede p + p { margin-top: 2.25rem; }

/* 締めの一文を、ほかより大きく太く出す（KOKOROMI の入口） */
.lede--closing p:last-child {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.9;
  color: var(--ink);
}

/* ------------------------------------------------- テーマの一覧（3列×2段） */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.375rem);
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}
.cat-tile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: 7rem;
  padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid rgba(var(--ink-rgb), .4);
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.cat-tile:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-tile__label { font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 700; line-height: 1.4; }
.cat-tile__arrow {
  position: relative; flex-shrink: 0;
  width: 2.75rem; height: 1px;
  background: currentColor;
}
.cat-tile__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* 記事が1件も無いとき */
.empty-note {
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  font-size: 0.9375rem; color: var(--ink-sub);
}
/* 一覧ページのカードは行間を広めに */
.tile-grid--list { margin-top: clamp(2.5rem, 5vw, 4.25rem); row-gap: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 「記事一覧」は横いっぱいに置く */
.cat-filter { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.cat-filter .cat-grid { margin-top: clamp(0.75rem, 1.6vw, 1.375rem); }
.cat-tile--all { width: 100%; min-height: 5.5rem; }
/* 選ばれているものは白背景・黒文字 */
.cat-tile.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ------------------------------------------------------------- PROJECT */
.pj-list {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.pj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.125rem);
  align-items: start;
}
.pj__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--media-bg); }
.pj__media img { width: 100%; height: 100%; object-fit: cover; }
.pj__title {
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  font-weight: 700; line-height: 1.4; letter-spacing: 0.01em;
  color: var(--ink);
}

/* 見出しと呼び名を、縦線ではさんで1行に組む。
   縦線はパンくずの「＞」と同じ扱いで、少し引いた色にする */
.pj__bar {
  padding-inline: 0.375em;
  font-weight: 400;
  color: var(--ink-mute);
}
.pj__name { color: var(--ink-sub); }

/* 詳細ページの見出し */
.pj-detail__title {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  max-width: 46rem;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 700; line-height: 1.45; letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.pj-detail__title + .lede { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.pj__text {
  margin-top: 1.75rem;
  font-size: 1rem; line-height: 1.95;
  color: var(--ink);
}

/* 詳細ページ */
.pj-detail__media {
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--media-bg);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pj-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.btn-view-row--back {
  justify-content: flex-start;
  max-width: var(--art-text);
  margin-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 900px) {
  .pj { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- 連載（話数） */
.pj__count {
  margin-top: 0.75rem;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--ink-sub);
}

.ep-head { margin-top: clamp(3rem, 6vw, 5rem); }
.ep-head__en {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
}
.ep-head__ja {
  margin-top: 0.5rem;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--ink-sub);
}

.ep-list {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.ep {
  display: flex; align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-block: clamp(1.125rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
}
.ep__no {
  flex-shrink: 0; min-width: 3.25rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.6vw, 1.4375rem);
  line-height: 1.3;
  color: var(--ink);
}
.ep__title {
  flex: 1;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
}
.ep__format {
  flex-shrink: 0;
  padding: 0.3125rem 0.75rem;
  border: 1px solid rgba(var(--ink-rgb), .45);
  font-family: var(--font-condensed);
  font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.1em;
  color: var(--ink);
}

@media (max-width: 560px) {
  .ep { flex-wrap: wrap; }
  .ep__title { flex: 1 1 100%; order: 3; }
}

/* ---------------------------------------------------------------- MEDIA */
.cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cat-tile__num {
  margin-left: 0.625rem;
  font-family: var(--font-condensed);
  font-size: 0.8125rem; font-weight: 600;
  opacity: .6;
}

/* サムネイルの上に置く再生マーク */
.tile__media { position: relative; }
.tile__play {
  position: absolute; left: 1rem; bottom: 1rem;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(var(--ink-rgb), .6);
  color: var(--ink);
  transition: background-color .25s;
}
.tile:hover .tile__play { background: rgba(255, 255, 255, .8); }
.tile__play svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

.tile__meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 20px; }
.tile__meta .tile__tag { margin-top: 0; }
.tile__duration {
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--ink-sub);
}
.tile__meta + .tile__title { margin-top: 6px; }

/* 「記事を見る」 */
.tile__to-article {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.875rem; color: var(--ink);
}
.tile__to-article-arrow {
  position: relative; display: block;
  width: 1.75rem; height: 1px; background: currentColor;
  transition: width .25s;
}
.tile__to-article-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.tile:hover .tile__to-article-arrow { width: 2.5rem; }

@media (max-width: 560px) {
  .cat-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- KIZASHI */
/* 記事の書き方の4段階 */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.75rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.flow__step {
  position: relative;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(var(--ink-rgb), .4);
}
.flow__no {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 700; font-size: 1.25rem; line-height: 1;
  color: var(--ink-sub);
}
.flow__text {
  margin-top: 0.75rem;
  font-size: clamp(0.875rem, 1.1vw, 1rem); line-height: 1.7;
  color: var(--ink);
}
/* 段階のあいだの矢印 */
.flow__step--next::after {
  content: ""; position: absolute;
  top: 2.5rem; right: -1.75rem;
  width: 8px; height: 8px;
  border-top: 1px solid rgba(var(--ink-rgb), .55);
  border-right: 1px solid rgba(var(--ink-rgb), .55);
  transform: rotate(45deg);
}

/* 記事の一覧。日付を先頭に置く */
.kz-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
.kz { border-bottom: 1px solid var(--line); }
.kz__link {
  display: flex; align-items: baseline;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
}
.kz__link:hover .kz__title { color: var(--blue); }
.kz__date {
  flex-shrink: 0; min-width: 6.5rem;
  font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 500; line-height: 1.3;
  color: var(--ink);
}
.kz__year {
  display: block; margin-top: 0.25rem;
  font-family: var(--font-condensed);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--ink-sub);
}
.kz__body { flex: 1; }
.kz__title {
  display: block;
  font-size: clamp(1rem, 1.3vw, 1.1875rem); font-weight: 500; line-height: 1.6;
  color: var(--ink);
  transition: color .2s;
}
/* 元ニュースの行。媒体のロゴ（または媒体名の枠）と、元記事の見出しを横に並べる。
   幅が足りなければ見出しだけ次の行へ回す */
.kz__source {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem; line-height: 1.6;
  color: var(--ink-sub);
}
.kz__headline { min-width: 0; }
.kz__arrow {
  position: relative; flex-shrink: 0;
  width: 2rem; height: 1px; background: rgba(var(--ink-rgb), .6);
  align-self: center;
}
.kz__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid rgba(var(--ink-rgb), .6);
  border-right: 1px solid rgba(var(--ink-rgb), .6);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.75rem; }
  .flow__step--next:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .flow__step--next::after { display: none; }
  .kz__arrow { display: none; }
}

/* -------------------------------------------------------------- PROFILE */
.pf-intro {
  display: grid;
  grid-template-columns: clamp(12rem, 20vw, 16.25rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(3rem, 7vw, 6rem);
  /* 揃えは stretch のまま。文章が長いときは写真の枠がその高さまで伸び、
     文章が枠からはみ出さない */
}
.pf-intro__photo {
  aspect-ratio: 4 / 5;
  height: 100%;
  overflow: hidden;
  background: var(--media-bg);
}
.pf-intro__photo img { width: 100%; height: 100%; object-fit: cover; }

.pf-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.875rem; }
.pf-name__ja {
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
  color: var(--ink);
}
.pf-name__roman {
  font-family: var(--font-condensed);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink);
}
.pf-lead {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  max-width: 44rem;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); line-height: 2.1;
  color: var(--ink);
}
.pf-lead p + p { margin-top: 1.75rem; }

/* 経歴などの表 */
.pf-table { margin-top: clamp(3.5rem, 7vw, 6rem); }
.pf-row {
  display: grid;
  grid-template-columns: clamp(5.5rem, 13vw, 10.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.75rem);
  align-items: center;
  max-width: 62rem;
}
.pf-row + .pf-row { border-top: 1px solid rgba(var(--ink-rgb), .35); }
.pf-row__label {
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
  line-height: 1.6;
  color: var(--ink);
}
.pf-val {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding-block: clamp(0.875rem, 1.5vw, 1.125rem);
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem); line-height: 1.7;
  color: var(--ink);
}
.pf-val:last-child { border-bottom: 0; }
.pf-val__year {
  flex-shrink: 0; min-width: 3.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (max-width: 860px) {
  .pf-intro { grid-template-columns: minmax(0, 1fr); }
  /* 1列になると、写真と名前が左に寄って右側が空いて見えるので中央に置く。
     中央寄せにすると列いっぱいに伸びなくなるので、幅と高さは自分で決める */
  .pf-intro__photo {
    width: min(15rem, 100%);
    max-width: none;
    height: auto;
    margin-inline: auto;
  }
  .pf-name { justify-content: center; }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 0.5rem 0; }
  .pf-row__label { padding-top: 1rem; color: var(--ink-sub); }
}

/* ------------------------------------------- ロゴを写真で埋めるモザイク */
.logo-mosaic {
  margin-top: clamp(4rem, 8vw, 7rem);
  /* 左右の余白を打ち消して画面いっぱいに広げる */
  margin-inline: calc(-1 * clamp(1.25rem, 7vw, 6.25rem));
}
.logo-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2px;
  /* ロゴの形で切り抜く */
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* 1マスは正方形。写真は切り抜いて収めるので、縦横比は崩れない */
.logo-mosaic__cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
}
.logo-mosaic__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真がまだ入っていないマス */
.logo-mosaic__cell--empty {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .06);
}
.logo-mosaic__note {
  margin-top: 1.25rem;
  padding-inline: clamp(1.25rem, 7vw, 6.25rem);
  font-size: 0.8125rem;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------ 記事ページ */
.art-head { margin-top: clamp(2.5rem, 5vw, 4.25rem); }
/* 日付と、この記事を渡すボタンを、同じ高さに置く */
.art-head__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.art-head__meta { display: flex; align-items: center; gap: 1rem; }
.art-head__tag {
  display: inline-block;
  padding: 0.3125rem 0.75rem;
  border: 1px solid rgba(var(--ink-rgb), .45);
  font-size: 0.8125rem; line-height: 1; letter-spacing: 0.06em;
  color: var(--ink);
}
.art-head__date {
  font-family: var(--font-condensed);
  font-weight: 500;
  font-size: 1.0625rem; letter-spacing: 0.04em;
  color: var(--ink-sub);
}
.art-head__title {
  margin-top: 1.25rem;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700; line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
  /* 2行になるとき、行末に1文字だけ残らないよう均等に割る */
  text-wrap: balance;
}

/* 記事の頭に敷く写真 */
.art-hero {
  position: relative;
  display: block;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--media-bg);
}
.art-hero img { width: 100%; height: 100%; object-fit: cover; }

/* 本文
   ------------------------------------------------------------------
   長文を最後まで追えるように組む（2026-09-18、本人の希望）。考え方は3つ。

   1. 文章の列は写真より細くする。文章は --art-text（約37字）、
      写真や表は --art-media まで広げる。誌面の「読む→見る→読む」の調子。
   2. 段落の間は、行の間から離しすぎない。この雑誌の文章は一文ごとに
      段落を変えるので、間が広いと文章ではなくカードの列に見えてしまう。
   3. 色は「濃紺＝編集のデザイン／黒＝読む文字」で分ける（--art-ink）。
      本文から濃紺を抜くと、かえって濃紺の見出しや目次が目立つ。 */
/* 本文は「文章の柱」と「そこからはみ出すもの」の二本立てで組む。
   真ん中の列が文章（--art-text）で、両わきの列は写真がはみ出すためのもの。
   両わきが同じ幅なので、写真は文章と同じ中心のまま左右へ広がる。
   狭い画面では両わきが 0 になり、そのまま1列になる（2026-09-19） */
.art-body {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  max-width: var(--art-media);
  display: grid;
  grid-template-columns:
    [media-start] minmax(0, 1fr)
    [text-start] min(var(--art-text), 100%) [text-end]
    minmax(0, 1fr) [media-end];
  /* 章の番号を、右の INDEX と同じ数え方で振るため */
  counter-reset: art-sec;
}
.art-body > * { grid-column: text-start / text-end; }

/* 長い日本語の本文。17px・行送り1.9。
   行の間はゆったり、段落の間はそこから離しすぎない（2026-09-24、本人の希望）。

   大事なのは、段落の間の「絶対の広さ」ではなく、行の間との「比」のほう。
   行送り 1.75・段落 1.3em だと、段落の空きは行の空きの 1.17 倍。
   行送り 1.9・段落 1.1em だと 1.05 倍になり、同じくらいの広さでも
   「一文ずつ並べた展示」ではなく「続いている文章」に見える。
   この雑誌の文章は一文ごとに段落を変えて書かれているので、この比が効く */
.art-body p {
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--art-ink);
}
/* 余白の段は、行の間 ＜ 段落の間 ＜ 小見出しの前 ＜ 章の前 */
.art-body p + p { margin-top: 1.1em; }
/* 1回だけ改行した行（同じ段落の中）は、段落の間より明らかに狭い。
   「改行」と「段落」が目で見て分かれる */
.art-body p br { line-height: inherit; }
.art-body__lead { color: var(--art-ink); }

/* ## は章の見出し（右の INDEX に並ぶのもこれ）。
   ページを分けない代わりに、ここで「次の章に入った」と分かるようにする。
   前の章の本文 →（52〜72px）→ ごく薄い線 →（20〜26px）→ 番号 → 見出し。
   線を濃くするのではなく、余白と番号で切り替える。

   2026-09-24：ここを以前の 8割ほどに詰めた。余白で章を分けるのは変えないが、
   広すぎると、長い記事では章の変わり目ごとに読むのが一度切れてしまう。
   代わりに「見出しの前」と「見出しの後ろ」の差をはっきりさせた。
   前は広く（章を分ける）、後ろは狭く（見出しと本文をひとかたまりに見せる） */
.art-body h3 {
  margin-top: clamp(3.25rem, 5.2vw, 4.5rem);
  padding-top: clamp(1.25rem, 1.8vw, 1.625rem);
  border-top: 1px solid var(--art-rule);
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  font-weight: 700; line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--art-heading);
  /* 目次から飛んだとき、固定ヘッダーの下に隠れないようにする */
  scroll-margin-top: calc(var(--header-h) + 3rem);
}
/* 章の番号。右の INDEX の 01・02 と同じものが、本文の側にも小さく出る。
   いまどの章を読んでいるかが、目次を見に行かなくても分かる */
.art-body h3[data-toc-heading] { counter-increment: art-sec; }
.art-body h3[data-toc-heading]::before {
  content: counter(art-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.12em; line-height: 1;
  color: var(--art-faint);
  font-variant-numeric: lining-nums;
}
/* 見出しと、その下の最初の段落は、ひとかたまりに見せる。
   段落どうしの間（約19px）よりは広いが、章の前（52〜72px）よりずっと狭い */
.art-body h3 + p { margin-top: 1.375rem; }
.art-body ul { margin-top: 1.5rem; padding-left: 1.375rem; }
.art-body li {
  list-style: disc;
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--art-ink);
}
.art-body li + li { margin-top: 0.5rem; }
.art-body ul + p { margin-top: 1.5rem; }
/* 引用は囲まない。左に細い線を一本引いて、余白と字の大きさで差をつける */
.art-body blockquote {
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
  padding-left: clamp(1.125rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(var(--ink-rgb), .28);
}
.art-body blockquote p {
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem);
  line-height: 1.9; color: var(--art-heading);
}
.art-body blockquote + h3 { margin-top: clamp(3rem, 5vw, 4rem); }

/* 仮のカードでも、リンクになっているものは押せると分かるようにする */
a.tile--empty { cursor: pointer; }
a.tile--empty:hover .tile__title { color: var(--ink); }

/* ---------------------------------------------------------- サイトマップ */
.sm { margin-top: clamp(3rem, 6vw, 5rem); max-width: 46rem; }
.sm-list { list-style: none; }

.sm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(var(--ink-rgb), .3);
}
.sm-row__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ink);
  transition: opacity .2s;
}
.sm-row__arrow {
  position: relative; flex-shrink: 0;
  width: 3.75rem; height: 1px;
  background: rgba(var(--ink-rgb), .7);
  transition: width .25s;
}
.sm-row__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid rgba(var(--ink-rgb), .7);
  border-right: 1px solid rgba(var(--ink-rgb), .7);
  transform: translateY(-50%) rotate(45deg);
}
.sm-row:hover .sm-row__label { opacity: .55; }
.sm-row:hover .sm-row__arrow { width: 4.75rem; }

/* 下の段（和文のページ）は区切り線を引かず、間隔も詰める */
.sm-list--sub { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.sm-row--sub {
  padding-block: clamp(0.75rem, 1.2vw, 1rem);
  border-bottom: 0;
}
.sm-row--sub .sm-row__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .sm-row__arrow { width: 2.5rem; }
  .sm-row:hover .sm-row__arrow { width: 3rem; }
}

/* --------------------------------------------- スクロールで現れる動き */
/* js-reveal は JavaScript が動いたときだけ付く。付かなければ普通に見える */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .42s cubic-bezier(.22, 1, .36, 1),
    transform .42s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------ 銀河の背景 */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  background-image: var(--space);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.space-bg.is-on { opacity: .16; }
/* 昼のシティポップ（DAYLIGHT）では、白い余白をページの最後まで続けたいので、
   背景の写真は敷かない。同じ写真はトップのスライドの1枚目で大きく見せている */
.space-bg { display: none; }
/* 上下を暗く落として、文字が読みにくくならないようにする */
.space-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .88) 0%,
    rgba(255, 255, 255, .7) 30%,
    rgba(255, 255, 255, .7) 70%,
    rgba(255, 255, 255, .88) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .space-bg { transition: none; }
}
/* 縦長の画面では、縦向きに切り出した画像に差し替える。
   用意が無ければ横長のものをそのまま使う */
@media (max-width: 900px) and (orientation: portrait) {
  .space-bg { background-image: var(--space-sp, var(--space)); }
}

/* 中身は背景より前に置く。
   ヘッダーは position: sticky を打ち消さないよう、ここには含めない
   （.site-header は z-index: 50 なので、もともと背景より前に来る） */
main,
.site-footer { position: relative; z-index: 1; }

/* ---------------------------------------------------- NEWS の一覧形式 */
/* サムネイルを使わず、日付とタイトルを横並びに置く。行間の罫線は無し */
.news-list { margin-top: clamp(0.5rem, 1vw, 1rem); }
/* 上の罫線と1行目のあいだを、行と行のあいだと同じだけ空ける。
   これが無いと、記事が1件のときに文字が罫線に貼り付いて見える */
.news-list > .news-row:first-child { margin-top: clamp(1.125rem, 2vw, 1.625rem); }
.news-row + .news-row { margin-top: clamp(1.125rem, 2vw, 1.625rem); }
.news-row__link {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 4vw, 4.5rem);
  transition: opacity .2s;
}
.news-row__link:hover .news-row__title { color: var(--blue); }
.news-row__date {
  flex-shrink: 0;
  min-width: 6rem;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-sub);
}
.news-row__title {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  transition: color .2s;
}

@media (max-width: 560px) {
  .news-row__link { flex-direction: column; gap: 0.375rem; }
  .news-row__date { min-width: 0; }
}

/* ヘッダーとファーストビューのあいだに間隔を取る。
   下は、次の NEWS までがセクションどうしの間隔と同じになるよう、セクションの余白と同じだけ空ける */
.first-view {
  padding-top: clamp(1.5rem, 3.2vw, 3.125rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* ------------------------------------------- 形式ごとの並び（TEXT / VIDEO / AUDIO） */
.fmt { margin-top: clamp(3rem, 6vw, 5rem); }
/* テーマの絞り込みを出さないページ（HATARAKI）は、本文から記事一覧までを、
   タイルがあったころの「本文 → タイル」と同じだけに詰める */
.no-cat-filter .lede + .fmt { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
/* 区画の見出し（EDITOR'S SELECTION・LATEST STORIES など）。章の名前より一段小さく、本文の題名よりははっきり大きく */
.sec-head--sub { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.sec-head--sub .sec-head__en { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.625rem); }

/* 中身が入るまでの仮の枠 */
.tile--empty { display: block; cursor: default; }
.tile--empty .tile__title { color: var(--ink-sub); font-weight: 500; }
.tile--empty .tile__src { color: var(--ink-mute); }

/* KIZASHI の RELATED。サムネイルの下に媒体名を置いてから、タイトル */
.tile__src {
  display: block;
  margin-top: 20px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.14em; line-height: 1;
  color: var(--ink-sub);
}
.tile__src + .tile__title { margin-top: 6px; }

.cat-filter__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-sub);
}

/* ロゴだけを置くとき */
.logo-mosaic--plain { display: flex; justify-content: center; }
.logo-mosaic__logo {
  display: block;
  width: auto;
  height: clamp(3rem, 11vw, 10rem);
  max-width: 100%;
  object-fit: contain;
  /* ロゴ画像（logo-white.png）は白一色なので、地を白にした v2 では
     そのままだと見えない。白と黒を入れ替えて黒いロゴとして見せる。
     透明な部分は透明のまま残る。v1（黒地）は style.css なので影響しない */
  filter: invert(1);
}

/* 記事がまだ無いときの仮の行 */
.news-row__link--empty { cursor: default; }
.news-row__link--empty .news-row__title { color: var(--ink-sub); }
.news-row__link--empty .news-row__date { color: var(--ink-mute); }

/* KIZASHI の各行に置くサムネイル */
.kz__thumb {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: clamp(7rem, 14vw, 11.25rem);
  /* 記事の表紙を出す枠。サムネは 1536×1024 にそろえたので、その形にして切らない（2026-09-16） */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--media-bg);
}
.kz__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.kz__link:hover .kz__thumb img { transform: scale(1.03); }
.kz__link--empty { cursor: default; }
.kz__link--empty .kz__title { color: var(--ink-sub); }
.kz__link--empty .kz__date,
.kz__link--empty .kz__year { color: var(--ink-mute); }
/* サムネイルが入るぶん、上下の中央で揃える */
.kz__link { align-items: center; }

/* スマホでは、サムネイルを左に、見出しを右に置く。
   日付は見出しの下にまわし、サムネイルは2行ぶんの高さをまたがせる */
@media (max-width: 560px) {
  .kz__link {
    display: grid;
    grid-template-columns: clamp(6.5rem, 36%, 9.5rem) minmax(0, 1fr);
    align-items: start;
    column-gap: 0.875rem;
    row-gap: 0.375rem;
  }
  .kz__thumb { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  .kz__body { grid-column: 2; grid-row: 1; }
  .kz__title { line-height: 1.5; }
  .kz__source { margin-top: 0.375rem; font-size: 0.75rem; }
  /* 日付は小さく灰色で。年から先に読ませて「2026年8月25日」にする */
  .kz__date {
    grid-column: 2; grid-row: 2;
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
    align-items: baseline;
    min-width: 0;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
    color: var(--ink-sub);
  }
  .kz__year { display: inline; margin-top: 0; font-size: inherit; letter-spacing: inherit; }
  .kz__year::after { content: "年"; }
  /* 媒体名の枠は、幅が狭いと後ろの文が変な所で折り返すので、単独の行にする */
  .kz__source .kz__media { display: block; width: max-content; max-width: 100%; margin: 0 0 0.375rem; }
}

/* ------------------------------------------------ デザイン切り替えの目印 */
/* ふだんのデザインではないときだけ出る。左下に小さく置く */
.design-flag {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(var(--ink-rgb), .4);
  font-family: var(--font-condensed);
  font-size: 0.75rem; letter-spacing: 0.08em; line-height: 1;
}
.design-flag__name { color: var(--ink); font-weight: 600; }
.design-flag__back {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-sub);
  text-decoration: underline;
}
.design-flag__back:hover { color: var(--ink); }

/* ================================================================
   ページ全体の地（v2）
   ヘッダーの下から画面いっぱいを白にして、その上に中身を置く。
   以前は左右に黒を残して中央に白い帯を通していたが、その黒帯はやめた。
   --band-x は帯の幅ではなく「中身をどれだけ内側に寄せるか」として残している。
   ================================================================ */
.is-band {
  /* 中身を左右にどれだけ内側へ寄せるか。
     中身が --page-max（1200px）を超えないぶんだけ寄せ、狭い画面では 0 になる。
     その内側に .wrap の余白（--wrap-x）が入る */
  --band-x: max(0px, (100vw - var(--page-max)) / 2 - var(--wrap-x));
  /* 地は下の ::before が敷く。ここは画面を引っぱったときに見える色 */
  background: var(--paper);
}

/* 地は画面に貼り付けておく。
   中身が短いページでも、下に地の切れ目が出ないようにするため */
.is-band::before {
  content: "";
  position: fixed;
  top: var(--header-h); bottom: 0;
  left: 0; right: 0;
  background: var(--paper);
  z-index: 0;
  pointer-events: none;
}
/* 中身は地の上に乗せ、左右を内側に寄せる */
.is-band main,
.is-band .site-footer {
  position: relative; z-index: 1;
  background: transparent;
  margin-inline: var(--band-x);
}
/* フッターの水色は画面の端まで届かせる。ここで指定しないと、上の transparent に負ける。
   中身の幅は .site-footer__inner が決めるので、ここでは寄せない */
.is-band .site-footer {
  background: var(--sky);
  margin-inline: 0;
}
.is-band .wrap { padding-inline: var(--wrap-x); }

/* 背景の写真も、地と同じく端まで広げる */
.is-band .space-bg,
.is-band .page-bg {
  inset: var(--header-h) 0 0 0;
}

/* 左下の目印（ふだんと違うデザインを見ているときだけ出る） */
.is-band .design-flag {
  background: rgba(250, 250, 247, .92);
  border-color: var(--line);
}
.is-band .design-flag__name { color: var(--ink); }
.is-band .design-flag__back { color: var(--ink-sub); }
.is-band .design-flag__back:hover { color: var(--blue); }

/* --------------------------------------------- テーマに振る番号（v2） */

.is-band .cat-tile {
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 7.5rem;
  padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem);
}
/* 番号と見出しを、左に並べて置く */
.is-band .cat-tile__head {
  display: flex; align-items: baseline;
  gap: clamp(0.625rem, 1.1vw, 0.9375rem);
  min-width: 0;
}
.is-band .cat-tile__num {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: inherit;
  opacity: .8;
  /* 0 が O に見える旧式の数字にならないようにする */
  font-variant-numeric: lining-nums;
}
.is-band .cat-tile__label {
  font-size: clamp(1.0625rem, 1.65vw, 1.4375rem);
  line-height: 1.4;
  /* 「マーケティン／グ」のように語の途中で折れないようにする */
  word-break: keep-all;
}
/* 番号と見出しに場所を譲るため、矢印は少し短くする */
.is-band .cat-tile__arrow { width: 2rem; }

/* ================================================================
   記事を読むときの地と字（Reading Theme）
   ----------------------------------------------------------------
   トップや一覧は「見つけてもらう場所」、記事は「読む場所」。
   記事に入ったら刺激をひと目盛り落として、読む方へ寄せる（2026-09-19、本人の希望）。

   書体は変えない。本文は前から Noto Sans JP の 400（端末に無ければ
   ヒラギノ角ゴ → 游ゴシック → メイリオ）で、長い文章に向いた組み合わせに
   なっている。和文の書体はファイルが重いので、読みやすさのために足さない。
   変えるのは地の色と、字の色の三段だけ。
   ================================================================ */
body.is-reading {
  /* 地は純白（2026-09-19、本人の希望）。
     ほかのページは #fafaf7 のオフホワイト。記事に入ったときだけ、地をいちばん白くする。
     暖かい白（#faf9f5）も並べて比べたが、白のほうが写真と濃紺がはっきり出るので
     こちらを選んだ。読む方へ寄せているのは、地ではなく下の「字の三段」 */
  --paper: #ffffff;
  --void: #ffffff;
  --header-bg: #ffffff;
}

/* ================================================================
   記事ページ（v2）
   ----------------------------------------------------------------
   組み方の芯は「読む柱」。文章の中心を画面の中心に置き、
   目次はその外側の余白に浮かせる（2026-09-19、本人の希望）。

   前は「記事の列 ＋ 目次の列」をひとまとめにして真ん中へ置いていたので、
   目次のぶんだけ文章が左へ押し出されていた（1440px で 264px も左）。
   目線の基準が画面の真ん中から外れていると、長い文章を追い続けるのがつらい。

   いまの組み方は、
     ・.art-main を真ん中に置く（＝文章の中心が画面の中心）
     ・目次は .art-main から外へ出して、右の余白に浮かせる
   なので、目次があってもなくても文章の位置は動かない。
   ================================================================ */
/* 幅の目盛りは、記事の箱そのものではなく、それを包んでいる箱に置く。
   こうしておくと、記事の前に出るパンくずからも同じ寸法が使える */
.art-layout,
:has(> .art-layout) {
  /* 幅は三段。中心はどれも同じ（＝読む柱）で、幅だけが変わる。
       --art-text   … 文章。18px で1行 33〜36字。40字を超えると行の頭へ戻れない
       --art-source … 引用元。文章より少し広いが、題名までは広げない
       --art-media  … 題名・写真・図・表。いちばん広い。
                      題名を本文より広く取ると「表紙と中面」の段ができ、
                      写真で視界がひらいて、また文章に戻る呼吸も生まれる
     題名と写真を同じ幅にそろえているのは、16px ちがいの線が二重に見えるのを
     避けるため。段は「文章 → 引用元 → 題名と写真」の三つで足りる */
  --art-text: clamp(37.5rem, 46vw, 41rem);
  --art-source: clamp(41rem, 50vw, 45rem);
  --art-media: clamp(44rem, 54vw, 48rem);
  --art-title: var(--art-media);

  /* 目次を置く、柱の外側の余白。
       --art-gap   … 文章の右端から目次までの距離（80〜112px）。
                     ここが近いと、読んでいるあいだ目次の字が視界に入り続ける
       --art-shift … 画面が狭くて目次が入りきらないぶんだけ、柱を左へ寄せる。
                     上限 40px。これを超えるなら、目次は横に置かない（下の @media）
       --art-rail  … 目次の幅。残った余白から決めるので、画面から溢れない
     16.5rem は「目次の幅 15rem ＋ 画面の端に残す 1.5rem」 */
  /* 色は「役割」で分ける（2026-09-19、本人の希望）。
     濃紺＝編集のデザイン（題名・章見出し・分類・目次・番号・罫線・リンク）
     黒　＝読むための文字（長い本文だけ）
     本文から濃紺を抜くと、かえって濃紺のブランド要素のほうが目立つ。
     本文は色味のない黒にする。真っ黒（#000）は白地の上で強すぎるので、
     少しだけ柔らかい #1a1a1a。地の上で 17.4:1。
     目次や補足は既存のトークン（--ink-sub / --ink-mute）をそのまま使う */
  --art-heading: var(--ink);
  --art-ink: #1a1a1a;
  --art-muted: var(--ink-sub);
  --art-faint: var(--ink-mute);
  --art-rule: rgba(var(--ink-rgb), .16);
  --art-link: var(--ink);

  /* 2026-09-24：ここを少し広げた（80〜112px → 88〜124px）。
     目次を薄くするだけでなく、物理的に遠ざけるほうが効く */
  --art-gap: clamp(5.5rem, 7.6vw, 7.75rem);
  --art-shift: clamp(0px, calc(var(--art-text) / 2 + var(--art-gap) + 16.5rem - 50vw), 2.5rem);
  --art-rail: min(15rem, calc(50vw + var(--art-shift) - var(--art-text) / 2 - var(--art-gap) - 1.5rem));
}

/* パンくずの字も、読むときの補足の色にそろえる（青みを一段抜く） */
.is-reading .page-head__crumb,
.is-reading .page-head__sep { color: var(--art-muted); }

/* パンくずも、記事と同じ柱にそろえる。ここだけ画面の左端に残ると、
   本文が真ん中にあることが、かえって落ち着かなく見える */
:has(> .art-layout) > .page-head {
  max-width: var(--art-media);
  margin-inline: auto;
  position: relative;
  right: var(--art-shift);
}

/* 記事そのもの。これを真ん中に置くことが、このページの組み方のすべて。
   中に入る箱（題名・引用元・写真・本文・読み終えたあと）は、
   どれも同じ中心にそろえ、幅だけを変える */
.art-main {
  max-width: var(--art-media);
  margin-inline: auto;
  /* 目次が入りきらない幅でだけ、柱をわずかに左へ寄せる。ふだんは 0 */
  position: relative;
  right: var(--art-shift);
}
/* 題名から本文の終わりまで＝「記事そのもの」。
   目次を浮かせる基準はここ。読み終えた先（次の1本・ほかの記事）は外にあるので、
   目次はちょうど本文の終わりで止まる */
.art-read { position: relative; }
.art-head,
.art-hero,
.art-body,
.art-end,
.btn-view-row--back { margin-inline: auto; }

/* ------------------------------------------------------ 右の見出し一覧 */
/* 記事ページで最優先するのは本文。この欄は「あると助かるが、読んでいる
   あいだは意識させない」濃さに落とす（2026-09-18、本人の希望）。
   そのために、文字を一段小さく・色を薄く・線を細くしてある。
   ほかの記事への入口（SERIES・EDITOR'S PICK）は、読み終えた先に置いた */
/* 右の余白に置くもの（レール）。上から CONTENTS → SOURCE。
     CONTENTS … いま読んでいる記事の中を移動する
     SOURCE   … いま読んでいる記事の背景を知る
   「次の記事へ進むための導線」は入れない。それは読み終えた先（SERIES）に置く
   （2026-09-24、本人の希望）。

   広い画面では、記事の柱から外へ絶対配置で浮かせる。
   だからレールの有無で本文の位置は 1px も動かない。
   基準は .art-read（position: relative）。left: 50% がちょうど読む柱にあたる */
@media (min-width: 1150px) {
  .art-rail {
    position: absolute;
    top: 0;
    left: 50%;
    /* 柱の中心から、文章の右端 → すき間、と辿った先 */
    margin-left: calc(var(--art-text) / 2 + var(--art-gap));
    box-sizing: border-box;
    width: var(--art-rail);
    /* 記事の高さいっぱいに置いておき、中身だけを貼り付かせる */
    height: 100%;
  }
  .art-rail__sticky {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    /* 見出しが多い記事でも画面から溢れないようにする */
    max-height: calc(100vh - var(--header-h) - 5rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .art-rail__sticky::-webkit-scrollbar { display: none; }
}

/* INDEX の見出し。狭い画面では畳むボタンを兼ねる */
.art-toc__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding-bottom: 0.5rem;
  /* 罫線はごく薄く。本文を読んでいるあいだ、線が視界に入らないように */
  border-bottom: 1px solid var(--art-rule);
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em; line-height: 1;
  /* 薄くしても、読める濃さから下げない */
  color: var(--art-faint);
  text-align: left;
  transition: color .2s;
}
/* 畳むボタンの印。狭い画面でだけ出す */
.art-toc__mark {
  position: relative;
  flex-shrink: 0;
  width: 0.625rem; height: 0.625rem;
}
.art-toc__mark::before,
.art-toc__mark::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0.625rem; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .25s;
}
.art-toc__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.art-toc__head[aria-expanded="true"] .art-toc__mark::after { transform: translate(-50%, -50%) rotate(0deg); }

/* 畳んでいるあいだは中身を出さない */
.art-toc__head[aria-expanded="false"] + .art-toc__inner { display: none; }

@media (min-width: 1150px) {
  /* 広い画面では畳まない。ここでは「見出し」として置くだけ */
  .art-toc__head { pointer-events: none; }
  .art-toc__mark { display: none; }
  .art-toc__head[aria-expanded="false"] + .art-toc__inner { display: block; }
}

.art-toc__inner { position: relative; margin-top: 0.875rem; padding-left: 1.125rem; }

/* 数直線の軸。左端を上から下へ通す */
.art-toc__rail {
  position: absolute;
  left: 3px; top: 0.6rem; bottom: 0.6rem;
  width: 1px;
  background: var(--art-rule);
}
/* 読み進めたぶんだけ伸びる。ここがティファニーブルー（2026-09-24、本人の希望）。
   色の役割は4つ：
     濃紺 … 編集のデザイン（題名・見出し・目次の字・罫線）
     黒　 … 読むための文字（本文）
     ティファニーブルー … いま読み手がどこまで来たか
                           （この軸・上の細い線・現在地の点・終止符）
     桜色 … 本文のあいだに挟む注釈ノート（.art-note）
   色が付くのは線と点と小さな札だけなので、文章と見出しの静けさは変わらない。
   「どこまで来たか」と「本文への補足」は別のことなので、色も分けてある */
.art-toc__rail-fill {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 0;
  background: var(--aqua-deep);
  transition: height .15s linear;
}

.art-toc__list { list-style: none; }
.art-toc__item { position: relative; }
.art-toc__item + .art-toc__item { margin-top: 0.375rem; }

/* 軸の上に置く目盛り。いま読んでいる章だけを、静かに示す。
   丸を大きくしたり光らせたりすると、本文を読んでいるあいだ右が気になる */
.art-toc__item::before {
  content: "";
  position: absolute;
  left: -1.125rem; top: 0.5rem;
  width: 5px; height: 5px;
  border: 1px solid rgba(var(--ink-rgb), .24);
  border-radius: 50%;
  background: var(--void);
  transition: background-color .2s, border-color .2s;
}
/* 読み終えた章は淡いティファニーブルー、いま読んでいる章は濃いほう。
   まだ読んでいない章だけが、色のない輪郭のまま残る */
.art-toc__item.is-read::before {
  background: var(--aqua);
  border-color: var(--aqua);
}
.art-toc__item.is-current::before {
  background: var(--aqua-deep); border-color: var(--aqua-deep);
}

.art-toc__link {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding-left: 0.5rem;
  /* いま読んでいる章に、左の細い線を出すための場所。ふだんは透明 */
  border-left: 1px solid transparent;
  /* ここを透かして薄くすると 2:1 ほどになり、読めない字になる。
     控えめさは「小さく・細く・遠くに」で出し、色は読める濃さを保つ。
     2026-09-24：いま読んでいない章は --ink-mute（4.5:1）まで落とした。
     opacity で 0.5 まで透かすと 2.4:1 になり、目次としては使えなくなる。
     「本文より弱い」は、色だけでなく 字の小ささ・線の細さ・本文からの距離で作る */
  color: var(--art-faint);
  transition: color .2s, border-color .2s;
}
.art-toc__link:hover { color: var(--art-heading); }
/* 番号は「何章目か」が分かればよい。大きな明朝の数字は本文と張り合うので、
   小さな英字にして、色も一段薄くする */
.art-toc__no {
  flex-shrink: 0;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--art-faint);
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
/* 本文（17px）に対して、はっきり小さく。読めるが、視界の端では文字と認識されない */
.art-toc__label { font-size: 0.75rem; line-height: 1.5; }
/* いま読んでいる章だけ、濃紺ではっきり出す。
   ここが目次の仕事のすべて（＝いま自分がどこにいるか）。
   ほかの章との差は、色（4.5:1 → 9:1）と左の細い線で作る */
.art-toc__item.is-current .art-toc__link {
  /* 線は現在地の印なので差し色。字は濃紺のまま（読むものの色は変えない） */
  border-left-color: var(--aqua-deep);
  color: var(--art-heading);
}
.art-toc__item.is-current .art-toc__no { color: var(--art-muted); }
/* 読み終えた章は、色をさらに薄くするのではなく、左の目盛りの丸で示す */

/* 目次を横に置けない幅では、本文の前に「畳んだ INDEX」として置き直す。
   前はここで目次ごと消していたが、長い記事では章の見当がつかなくなる。
   畳んであるので、読み始めるまでの間に余計なものは出ない（2026-09-19）。
   柱の位置はこの幅でも変わらない（.art-main は常に真ん中） */
@media (max-width: 1149.98px) {
  /* 目次を横に置かない幅では、柱を寄せる理由が無くなる。
     0 に戻さないと、記事ぜんぶが 40px 左へずれたままになる */
  .art-layout,
  :has(> .art-layout) { --art-shift: 0px; }

  /* レールを解いて、中身を記事の流れに並べ直す。
     display: contents で包みを消すと、CONTENTS と SOURCE が
     .art-read の直接の子になり、order で置き場所を変えられる。
       CONTENTS … 本文の前（畳んだまま）
       SOURCE   … 本文の後ろ。読みはじめる流れを止めないため、記事の頭には置かない
     （2026-09-24、本人の希望） */
  .art-read { display: flex; flex-direction: column; }
  .art-rail,
  .art-rail__sticky { display: contents; }
  .srcbox { order: 1; }
  /* 並べ替えのために flex にすると、margin-inline: auto を持つ子は
     「中身の幅」まで縮んでしまい、題名が1文字ずつ折れる。
     幅いっぱいに伸ばしてから、max-width と auto の余白で真ん中に置く */
  .art-read > *,
  .art-rail__sticky > * { width: 100%; }

  .art-toc__fold,
  .art-also {
    /* 本文の幅にそろえる。ここだけ広いと、読む柱がぼやける */
    max-width: var(--art-text);
    margin-inline: auto;
  }
  .art-also { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  .art-toc__fold { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  .art-also + .art-toc__fold { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
  /* 畳むボタンなので、押せる高さを確保する */
  .art-toc__head { padding-block: 0.625rem 0.75rem; }
  /* JS が動いて初めて畳めるようになる。それまでは札ごと出さない
     （押しても開けない札を見せないため）。広い画面では畳まないので関係ない */
  .art-toc__fold:not(.is-ready) { display: none; }
  .art-toc__inner { margin-top: 1rem; }
}

/* ================================================================
   記事ページ（v2）中面の組み方
   分類（小さく）→ 題名（大きく）→ 細い線 → 著者と日付、の順に置く。
   分類・著者・日付をひと続きの1行に詰め込むと、よくあるブログの見出しに
   なってしまうため、題名そのものが誌面として立つように離す
   ================================================================ */

/* 題名のまわり。題名そのものの大きさは変えず、添える情報（分類・著者・
   日付・共有）の間だけを詰めて、最初の画面から本文が見えるようにする
   （2026-09-18、本人の希望）。
   幅は文章と同じにして、題名・著者の下の線・SOURCE・本文の右端をそろえる。
   広いのは写真だけ、という約束にしておくと、誌面の骨格が読み取りやすい。

   container-type は、題名を1行に収めるための「物差し」。
   これがあると、題名の側で 100cqi（＝この欄の幅）が使えるようになる */
.art-head {
  /* 題名は本文より広くてよい。題名＝表紙、本文＝中面、という段をつくる。
     中心は本文と同じ（読む柱）なので、広がるのは左右へ均等（2026-09-19） */
  max-width: var(--art-title);
  container-type: inline-size;
  /* container-type は、上下の余白が重なって1つにまとまる働き（余白の相殺）を止める。
     そのままだと、この箱の上の余白と、中の .art-kicker の上の余白が足し算になり、
     パンくずとのあいだが倍に空く。間の取り方は .art-kicker 側に任せる */
  margin-top: 0;
}

/* 題名の上に置く分類。「HATARAKI / 営業」 */
.art-kicker {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 3.6vw, 3.25rem);
  font-size: 0.75rem; line-height: 1.4;
}
.art-kicker__en {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 本文から濃紺を抜いたので、分類の札は差し色の水色ではなく濃紺にする。
     濃紺は「編集のデザイン」の側にまとめる（2026-09-19） */
  color: var(--art-heading);
}
.art-kicker__sep { color: rgba(var(--ink-rgb), .4); }
.art-kicker__ja { color: var(--art-muted); letter-spacing: 0.02em; }

/* 題名。ここが誌面の顔になるので、いちばん大きく取る。
   長い題名は、折り返さずに字を縮めて1行に収める（2026-09-18、本人の希望）。
   PILOT の企画名と同じ考え方で、計算は「欄の幅 ÷ 題名が何文字ぶんか」。
     --chars … 全角1・半角0.5で数えた文字数（PHP の text_width()）
     100cqi  … .art-head の幅。パソコンで 672px、スマホでその画面ぶん
     0.98    … 端でぎりぎり溢れないための、わずかな控え
   min() で「ふだんの大きさ」と比べ、小さいほうを採る。短い題名は今までどおり。
   max() の 1.75rem は下限。これより小さくなるくらい長い題名は、
   無理に1行にせず折り返す（スマホでは多くの題名がこちらになる） */
.art-head__title {
  margin-top: 0.75rem;
  color: var(--art-heading);
  font-size: max(
    1.75rem,
    min(clamp(1.875rem, 3.9vw, 3.375rem), calc(100cqi / var(--chars, 14) * 0.98))
  );
}

/* 日付と、渡すボタン。細い線の下に、同じ高さで並べる */
.art-byline {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.125rem, 1.9vw, 1.5rem);
  padding-top: clamp(0.75rem, 1.2vw, 0.9375rem);
  border-top: 1px solid var(--art-rule);
}
.art-byline__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.art-byline__date {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--art-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- 右の欄（読み物への入口） */
/* 以前はここに大きな日付を置いていたが、日付は題名のすぐ下にもう出ている。
   同じことを二度言ううえ、26px の数字は読んでいるあいだ右で主張し続けるので、
   外した。右の余白に残すのは、道案内である INDEX だけ（2026-09-19） */


/* --------------------------------------------------- 読み終えたしるし */
/* 本文の終わりに置く、小さな菱形。誌面の終止符と同じ役目。
   ここで記事はおしまい、と分かってから、次の1本の話になる */
.art-end {
  display: flex; align-items: center; justify-content: center;
  max-width: var(--art-text);
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
}
.art-end::before {
  content: "";
  width: 6px; height: 6px;
  /* 読み終えた＝ここが道のりの終点なので、現在地の色で置く */
  background: var(--aqua-deep);
  transform: rotate(45deg);
}

/* ------------------------------------------ 読んでいる位置を示す細い線 */
/* ページ送りをしない代わりに、「あとどれくらいか」だけを静かに伝える。
   2px・ティファニーブルー、画面のいちばん上。数字も割合も出さない。
   目次を畳んでいる狭い画面では、位置の手がかりはこれだけになる
   （2026-09-19。色は 2026-09-24 に薄い紺から差し色へ） */
.art-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}
.art-progress__fill {
  display: block;
  width: 0; height: 100%;
  background: var(--aqua-deep);
  transition: width .15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .art-progress__fill { transition: none; }
}

/* ------------------------------------------------ 本文に出せるもの一式 */
/* Markdown で書けるのに見た目が決まっていないと、使ったときに崩れる。
   色の付いた背景や大きな囲みは使わず、余白と文字だけで段差をつける */
.art-body > :first-child { margin-top: 0; }

/* 表と、字を詰めた塊だけは、文章の柱からはみ出させる。
   表は列が潰れると読めないし、プログラムの行は折り返すと意味が変わる。

   写真は、置き方で列を変える（2026-09-24、本人の希望）。
     ふつうの写真（pos=full・素の画像）… 文章と同じ幅・同じ左端。
       読んでいる途中に出てくるので、目を戻す左端が動かないほうがいい
     横に文章を置く写真（pos=left / right）… 広い列いっぱい。
       文章の柱まで狭めると、横に置いた文章が1行20字ほどになって読めない */
.art-body > table,
.art-body > pre,
.art-body > .fig--cols,
.art-body > .fig--wrap { grid-column: media-start / media-end; }

/* ## は節の見出しで、上に線を引く（右の INDEX に並ぶのもこれ）。
   ### はその中の小見出しなので、線は引かずに大きさだけで分ける。
   余白の段は 段落間（約22px）＜ 小見出しの前（約40px）＜ 章の前（約64px） */
.art-body h3:not([data-toc-heading]),
.art-body h4 {
  margin-top: clamp(1.875rem, 2.8vw, 2.5rem);
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  font-weight: 700; line-height: 1.7;
  color: var(--art-heading);
  color: var(--ink);
}
.art-body h3:not([data-toc-heading]) + p,
.art-body h4 + p { margin-top: 1rem; }

.art-body ol { margin-top: 1.625rem; padding-left: 1.625rem; }
.art-body ol li { list-style: decimal; }

/* 本文のあいだに挟む、言葉の補足（TASHINAMI NOTE など）
   ------------------------------------------------------------------
   2026-09-24、本人の希望。本文に「**TASHINAMI NOTE｜D.O.って何？**」と
   書いた段落を、読み物の本文から一段下の階層として組み直す
   （拾っているのは App\Core\Markdown::markNotes）。

   形は「しおり」。左に細い縦線を1本だけ引く（2026-09-24、本人が3案から選んだ）。
   面も敷かず、囲みもしない。長い記事にメモが何個も入っても重くならない形。

   縦線は桜色（--pink）。記事の中の差し色は役割で分けてある。
     ティファニーブルー … 読み手の現在地（目次の軸・上の線・終止符）
     桜色 … 本文のあいだに挟む注釈ノート
   「どこまで来たか」と「本文への補足」は別のことなので、色も分ける
   （2026-09-24、本人の希望）。札だけは字なので、読める濃さの --pink-deep（5.65:1）を使う */
/* 記事の外（BLOG・日記）にも同じ書き方が出たときのために、
   ここは記事の外でも成り立つようにしておく（--art-* が無い場所では
   もとの --ink-* に落ちる）。前後の空きだけ、記事の本文用に別で決める。

   セレクタに `p.` を付けてあるのは、本文の `.art-body p`（クラス1＋要素1）と
   詳細度をそろえるため。`.art-note` だけだと詳細度で負けて、
   メモの字が本文と同じ黒になってしまう。札（strong）も同じ理由で `strong.` を付ける */
p.art-note {
  margin-top: clamp(2rem, 3.2vw, 2.5rem);
  padding: 0.125rem 0 0.125rem 1.375rem;
  border-left: 2px solid var(--pink);
  font-size: 0.9375rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--art-muted, var(--ink-sub));
}
/* 補足が終わって本文に戻るところも、同じだけ空ける */
.art-body .art-note + p,
.art-body .art-note + ul,
.art-body .art-note + blockquote { margin-top: clamp(2rem, 3.2vw, 2.5rem); }
/* 補足が続けて並ぶときは、そのつど離さない */
.art-body .art-note + .art-note { margin-top: 1.5rem; }

/* 「TASHINAMI NOTE」の札。目次の見出しと同じ、小さな英字。
   ここだけ差し色の濃い版にして、縦線と呼応させる */
strong.art-note__label {
  display: block;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em; line-height: 1;
  color: var(--pink-deep);
}
/* 「｜」の後ろに書いた小見出し。本文の小見出しより小さく、濃紺で */
strong.art-note__title {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700; line-height: 1.6;
  color: var(--art-heading, var(--ink));
}
strong.art-note__label + .art-note__body { display: block; margin-top: 0.5rem; }
strong.art-note__title + .art-note__body { display: block; margin-top: 0.25rem; }
.art-body ol + p,
.art-body ol + h3 { margin-top: 1.625rem; }

/* リンクは、差し色の水色ではなくブランドの濃紺。下線があればリンクと分かる。
   長い文章のなかで色が何度も変わると、そのたびに目が止まる（2026-09-19） */
.art-body a {
  color: var(--art-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--ink-rgb), .42);
  text-underline-offset: 0.2em;
  transition: text-decoration-color .2s;
}
.art-body a:hover { text-decoration-color: currentColor; }
/* 強調は太さだけで出す。ここで色まで変えると、本文のなかに
   濃紺の語が点々と散って、行を追う目が引っかかる */
/* 本文の太字は「太さだけ」。色を変えると濃紺の語が点々と散って、行を追う目が引っかかる。
   メモの札と小見出し（.art-note__label / __title）は、太字ではあっても
   本文の一部ではなく見出しなので、ここから外して自分の色を持たせる */
.art-body strong:not([class^="art-note__"]) { font-weight: 700; color: inherit; }

/* 日本語は斜体が読みにくい。*強調* は水色の下敷きにして、線を引いた跡に見せる */
.art-body em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--sky) 62%);
}

.art-body hr {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  border: 0;
  border-top: 1px solid rgba(var(--ink-rgb), .3);
}

.art-body code {
  padding: 0.1em 0.35em;
  background: rgba(var(--ink-rgb), .06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.art-body pre {
  margin-top: 2rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  overflow-x: auto;
  background: rgba(var(--ink-rgb), .05);
}
.art-body pre code { padding: 0; background: none; }

.art-body table {
  width: 100%; margin-top: 2rem;
  border-collapse: collapse;
  font-size: 0.9375rem; line-height: 1.8;
}
.art-body th,
.art-body td {
  padding: 0.75em 0.9em;
  border-bottom: 1px solid rgba(var(--ink-rgb), .25);
  text-align: left; vertical-align: top;
  word-break: break-word;
}
.art-body thead th {
  border-bottom-color: rgba(var(--ink-rgb), .5);
  font-weight: 700; color: var(--ink);
}

.art-body img { margin-top: 2rem; }

/* 表紙の無い記事は、組んだ表紙を絵の枠に敷く（仮の写真で埋めない） */
.rel__media { position: relative; }

/* ================================================================
   章扉（第一階層）
   トップが表紙、記事が誌面。その間にある「章を開いた」感じを作る。
   トップから受け継ぐのは 大きな横長写真 と 大きな英字 の2つだけで、
   水色の面と、写真に重ねる文字は使わない
   ================================================================ */

/* 章名は下で大きく出すので、パンくずは記事ページと同じ大きさまで下げる */
.is-chapter .page-head {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------- 扉 */
.ch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.ch-hero__text { min-width: 0; }
/* 章番号。サイト内でここにしか出ない */
.ch-hero__no {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  color: var(--ink-mute);
  font-variant-numeric: lining-nums;
}
.ch-hero__en {
  margin-top: 0.25rem;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ch-hero__tagline {
  margin-top: 0.7rem;
  font-size: clamp(1.0625rem, 1.9vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.ch-hero__lead {
  margin-top: clamp(1.125rem, 2vw, 1.625rem);
  max-width: 32em;
  font-size: 0.9375rem;
  line-height: 2.05;
  color: var(--ink-sub);
}
.ch-hero__visual { min-width: 0; }
/* 扉の絵は、この枠の中では余白を持たせない */
.ch-hero__visual .lede-img { margin: 0; }

/* ------------------------------------------- 扉（写真を使わない章） */
/* 写真を置かず、章名そのものを絵として見せる扉。
   右側は空けたままにして、そこを一本の線が横切る。
   写真は EDITOR'S SELECTION まで出さない。そこで初めて
   「HATARAKI という考え方」から「実際の仕事」へ切り替わる */
.ch-hero--opener {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* 高さは章扉とわかる程度に。画面を全部は埋めない。
     少しスクロールすると次の区画が見えるくらいで止める */
  min-height: min(68vh, 38rem);
  margin-top: clamp(0.5rem, 1.6vw, 1.25rem);
  padding-block: clamp(1.75rem, 4vw, 3.5rem);
  /* 左端から少し入れる。パンくずと端を揃えないことで、
     一覧の見出しではなく「開いた扉」に見せる */
  padding-left: 4%;
}
.ch-hero--opener .ch-hero__text { position: relative; z-index: 1; }

/* 番号と、その章が扱うもの。短い罫でつなぐ */
.ch-hero--opener .ch-hero__meta {
  display: flex; align-items: baseline;
  gap: clamp(0.75rem, 1.8vw, 1.375rem);
}
.ch-hero--opener .ch-hero__no {
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  color: var(--ink-sub);
}
.ch-hero__label {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.ch-hero__label::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: clamp(1.25rem, 3.2vw, 2.75rem); height: 1px;
  margin-right: 0.9em;
  background: rgba(var(--ink-rgb), .35);
}

/* 文章として読むより、形として見るくらいの大きさ。画面の 55〜60% を使う */
.ch-hero--opener .ch-hero__en {
  margin-top: clamp(0.375rem, 1vw, 0.875rem);
  font-size: clamp(3rem, 11.6vw, 9.75rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.ch-hero--opener .ch-hero__tagline {
  margin-top: clamp(1rem, 2.2vw, 1.75rem);
  font-size: clamp(1.0625rem, 1.7vw, 1.4375rem);
}
.ch-hero--opener .ch-hero__lead {
  margin-top: clamp(1.125rem, 2.2vw, 1.875rem);
  max-width: 30em;
}

/* ------------------------------------------------- 手で引いた一本の線 */
/* 文字の後ろを通す。目立たせるものではないので、濃さは 0.22 まで。
   線の太さは画面幅で変えない（ペンで引いた線は、紙が大きくても太くならない） */
.ch-line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%; height: auto;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.ch-line--sp { display: none; }
.ch-line__path {
  fill: none;
  stroke: rgba(var(--ink-rgb), .22);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 一度だけ描く。繰り返さない。スクロールにも追従させない */
  stroke-dasharray: var(--len);
  animation: ch-line-draw 1.3s cubic-bezier(.25, .6, .3, 1) .5s both;
}
@keyframes ch-line-draw {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}

/* 出てくる順。01 → HATARAKI → 線 → 仕事を見る。→ リード */
.ch-hero--opener .ch-hero__meta    { animation: ch-rise .7s ease-out both; }
.ch-hero--opener .ch-hero__en      { animation: ch-rise .8s ease-out .12s both; }
.ch-hero--opener .ch-hero__tagline { animation: ch-rise .7s ease-out 1s both; }
.ch-hero--opener .ch-hero__lead    { animation: ch-rise .7s ease-out 1.15s both; }
@keyframes ch-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- KIZASHI の線 */
/* HATARAKI が濃紺で「書く」線なら、KIZASHI は淡いピンクで「現れて、伸びる」線。
   同じ部品・同じ作りのまま、色と濃さと動きだけで別の章だと分かるようにする。
   濃さは線に沿って上げていく（まだ見えない → 気づく → 輪郭が出る） */
.ch-line--kizashi .ch-line__stop--from { stop-color: var(--pink); stop-opacity: .10; }
.ch-line--kizashi .ch-line__stop--mid  { stop-color: var(--pink); stop-opacity: .38; }
.ch-line--kizashi .ch-line__stop--to   { stop-color: var(--pink); stop-opacity: .62; }
/* 淡い色なので、濃紺の線より少しだけ太くしないと見えない */
.ch-line--kizashi .ch-line__path { stroke-width: 2; }

/* 書くのではなく、現れながら伸びる。濃さも一緒に上がる */
.ch-line--kizashi .ch-line__path {
  animation: ch-line-emerge 1.5s cubic-bezier(.33, .5, .2, 1) .35s both;
}
@keyframes ch-line-emerge {
  from { stroke-dashoffset: var(--len); opacity: 0; }
  40%  { opacity: .55; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

/* KIZASHI は HATARAKI より一段軽く、空気を多く。
   書体は増やさず、同じ Jost の細い方に落として大きさも少し下げる */
.ch-hero--kizashi { padding-block: clamp(2.25rem, 5vw, 4.5rem); }
/* 軽さは字の細さで出す。大きさは落とさない。
   小さくすると右の余白が空きすぎて、章名より線のほうが主役に見えてしまう */
.ch-hero--kizashi .ch-hero__en {
  font-size: clamp(2.75rem, 13vw, 11.5rem);
  font-weight: 500;
  letter-spacing: 0.015em;
}
.ch-hero--kizashi .ch-hero__lead { max-width: 28em; }

/* ------------------------------------------------- KOKOROMI の線 */
/* HATARAKI（濃紺で書く）とも、KIZASHI（淡いピンクが現れて伸びる）とも違う「試す」線。
   色は濃紺のまま。HATARAKI より少し細く、少し濃くして、ペン先の迷いが見えるようにする。
   動きは途中で一度ためらう。戻る描き方はしない（引き返しは線の形そのものに入れてある）。
   ためらう位置は、文字の終わりを越えて引き返すあたり（線の長さの5割強） */
.ch-line--kokoromi .ch-line__path {
  stroke: rgba(var(--ink-rgb), .3);
  stroke-width: 1.5;
  animation: ch-line-try 1.4s linear .45s both;
}
@keyframes ch-line-try {
  0%   { stroke-dashoffset: calc(var(--len) * 1px);   animation-timing-function: cubic-bezier(.3, .55, .45, 1); }
  52%  { stroke-dashoffset: calc(var(--len) * .46px); animation-timing-function: linear; }
  62%  { stroke-dashoffset: calc(var(--len) * .43px); animation-timing-function: cubic-bezier(.35, .45, .25, 1); }
  100% { stroke-dashoffset: 0; }
}

/* KOKOROMI の章名。HATARAKI（太く、形として置く）より少しだけ軽く、人の手の近さを残す。
   KIZASHI ほど細くはしない（観察ではなく、手を動かしている章のため） */
.ch-hero--kokoromi .ch-hero__en {
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* リードは段落で分けてある。行間は章扉と同じにして、段落のあいだだけ空ける */
.ch-hero__lead--paras p + p { margin-top: 1em; }
.ch-hero--kokoromi .ch-hero__lead { max-width: 32em; }

/* KOKOROMI の線は、章扉の上端を基準に置く。
   ほかの章は「扉の高さの真ん中」に線を置いている。KOKOROMI はリードが5段落あって扉が縦に長く、
   真ん中がリードの位置まで下がり、線が文字の上を横切ってしまった（400点中128点）。
   上端から測れば、章名の位置は扉の長さに左右されない。
   -4.5rem は、線の横に走る部分（箱の y=250 付近）が章名の中心に来る値。
   実測では 1440px で -68、1280px で -77、1024px で -60 が合い、ずれは最大12px（章名の高さの1割未満）。
   スマホは元から上端基準（top: 0）なので、ここでは触らない */
.ch-hero--kokoromi .ch-line--pc { top: -4.5rem; transform: none; }

/* 動きを控える設定のときは、最初から描き終わった状態で出す */
@media (prefers-reduced-motion: reduce) {
  .ch-line__path { stroke-dasharray: none; animation: none; }
  .ch-line--kizashi .ch-line__path { animation: none; opacity: 1; }
  .ch-line--kokoromi .ch-line__path { animation: none; }
  .ch-hero--opener .ch-hero__meta,
  .ch-hero--opener .ch-hero__en,
  .ch-hero--opener .ch-hero__tagline,
  .ch-hero--opener .ch-hero__lead { animation: none; }
}

/* ================================================================
   KOKOROMI の入口（CURRENT PROJECTS ほか）
   カードにしない。白い角丸・影・アイコン・進み具合のバーは使わない。
   番号・細い罫線・余白で、進行中の物語として縦に並べる
   ================================================================ */
.kk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--ink-rgb), .35); }

.kk-story {
  display: grid;
  grid-template-columns: clamp(4.5rem, 9vw, 8rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid rgba(var(--ink-rgb), .16);
}
/* 実際に撮った写真が登録されたときだけ、本文の右に置く */
.kk-story--photo { grid-template-columns: clamp(4.5rem, 9vw, 8rem) minmax(0, 1fr) minmax(0, 34%); }

/* 番号は章番号（01 ── WORK / PEOPLE / COMPANY）と同じ書体で、形として大きく */
.kk-story__no {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: .9;
  color: var(--ink-sub);
  font-variant-numeric: lining-nums;
}

/* PROJECT 01 と状態。章扉のラベルと同じ小さな英字で、管理画面の札には見せない */
.kk-story__eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem 1rem;
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
.kk-status { white-space: nowrap; }
.kk-status::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.25rem; height: 1px; margin-right: 0.6em;
  background: currentColor; opacity: .5;
}
/* 状態は色の強さだけで分ける。やめたもの（STOPPED）も隠さず、同じ場所に同じ大きさで出す */
.kk-status--running   { color: var(--ink); }
.kk-status--paused    { color: var(--ink-sub); }
.kk-status--completed { color: var(--ink-sub); }
.kk-status--stopped   { color: var(--ink-mute); }

.kk-story__title {
  margin-top: 0.75rem;
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.kk-story__title a { color: inherit; transition: color .2s; }
.kk-story__title a:hover { color: var(--blue); }

.kk-story__meta {
  margin-top: 0.5rem;
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}

.kk-story__desc {
  margin-top: clamp(1rem, 2vw, 1.375rem);
  max-width: 36em;
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--ink-sub);
}
.kk-story__desc p + p { margin-top: 0.9em; }

/* 始めた月・最新の更新日。値があるものだけ、小さな英字で添える */
.kk-facts {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1.25rem 0 0;
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.kk-facts div { display: flex; gap: 0.6em; }
.kk-facts dd { margin: 0; color: var(--ink); }

.kk-story__go { margin-top: 1.5rem; }
.kk-story__go a {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink);
  transition: color .2s, border-color .2s;
}
.kk-story__go a:hover { color: var(--blue); border-color: var(--blue); }

.kk-story__photo { margin: 0; }
.kk-story__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  background: var(--tp-pale);
}

@media (max-width: 720px) {
  .kk-story,
  .kk-story--photo { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .kk-story__no { font-size: 2.25rem; }
}

/* ------------------------------------------ 更新の並び（入口・詳細で共通） */
.kk-updates { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--ink-rgb), .35); }
.kk-updates li { border-bottom: 1px solid rgba(var(--ink-rgb), .16); }
.kk-update {
  display: grid;
  grid-template-columns: 5.5rem 11rem minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
}
.kk-update__date,
.kk-update__project {
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.kk-update__title { font-size: 0.9375rem; font-weight: 700; line-height: 1.7; color: var(--ink); transition: color .2s; }
.kk-update:hover .kk-update__title { color: var(--blue); }
@media (max-width: 720px) {
  .kk-update { grid-template-columns: auto minmax(0, 1fr); }
  .kk-update__title { grid-column: 1 / -1; }
}

/* ------------------------------------------------- アーカイブ（小さく） */
.kk-archive { margin-top: clamp(3rem, 6vw, 4.5rem); }
.kk-archive__head {
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
.kk-archive__list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.kk-archive__list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .12);
  font-family: var(--font-nav); font-size: 0.6875rem; letter-spacing: 0.18em;
}
.kk-archive__title { font-family: var(--font-sans); font-size: 0.875rem; letter-spacing: 0; color: var(--ink); }

/* ================================================================
   KOKOROMI のプロジェクト1件
   ================================================================ */
/* 読み幅。46rem（736px）では窄まって見え、読ませる気がないように感じられたので広げた
   （2026-09-17、本人の希望）。広げすぎると1行が長くなって目が迷うので、62rem（992px）で止める */
.kk-detail { max-width: 62rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.kk-detail__title {
  margin-top: 0.875rem;
  font-family: var(--font-sans);
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.kk-detail__photo { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }
.kk-detail__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.kk-detail__block { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.kk-detail__label {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
}
/* 本文は 15px では小さく、読ませる気がないように見えた。画面の広さに応じて 16〜18px にする（2026-09-17） */
.kk-detail__body {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 2;
  color: var(--ink);
}
.kk-detail__body p + p { margin-top: 1.2em; }
.kk-detail__block .kk-updates { margin-top: 0; border-top: 0; }
.kk-detail__empty { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-mute); }

/* 以前の説明。消さずに残すが、いまの説明より一段控えめに */
.kk-detail__previous {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(var(--ink-rgb), .16);
}
.kk-detail__previous .kk-detail__label { border-bottom: 0; padding-bottom: 0; color: var(--ink-mute); letter-spacing: 0.08em; font-family: var(--font-sans); }
.kk-detail__prev-title { margin-top: 0.75rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; color: var(--ink-sub); }
.kk-detail__prev-lead { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.95; color: var(--ink-sub); }
/* これまでの説明は、いまの説明より一段だけ小さく（本文が大きくなったぶん、ここも上げる） */
.kk-detail__previous .kk-detail__body { font-size: 1rem; color: var(--ink-sub); }

.kk-back { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kk-back a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
}

/* スマホ。PC の縮小版にはしない。
   縦に積み、線は HATARAKI の後ろから右端へ抜けて下へ少し戻るだけにする。
   余白を取りすぎると EDITOR'S SELECTION まで何度もスクロールすることになるので、
   高さの下限はここで外す */
@media (max-width: 640px) {
  .ch-hero--opener {
    min-height: 0;
    padding-left: 0;
    padding-block: clamp(1.25rem, 5vw, 2rem) clamp(1.75rem, 7vw, 2.75rem);
  }
  /* 画面幅いっぱいまでは伸ばさない。端末が少し狭いだけではみ出すため */
  .ch-hero--opener .ch-hero__en { font-size: clamp(2.5rem, 13.4vw, 4.25rem); }
  .ch-line--pc { display: none; }
  .ch-line--sp { display: block; top: 0; transform: none; }
}

/* 区画のあいだ。読むより先に「章の構成」が見えるよう、間は広く取る */
.ch-block { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* ------------------------------------------------- 入口の帯（絵） */
/* ページの冒頭の下に置く横長の絵（partials/page-band）。切らずに、段の幅いっぱいに置く。
   冒頭とのあいだは区画どうしの間より狭くして、冒頭の続きとして読ませる。
   次の区画とのあいだは、その区画の余白に任せる。
   高さは img の width・height から決まるので、読み込む前後で下の中身がずれない */
.page-band { margin: clamp(0.5rem, 2vw, 1.5rem) 0 0; }
.page-band img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--tp-pale);
}

/* ------------------------------------------ 記事のサムネイル（.sc） */
/* トップページ以外の一覧で使う（partials/story-card）。2026-09-15 に、本人の希望でこの形にそろえた。
   絵の中に、左上に分類の英字、右上に公開日、左下に短い線と題名を重ねる。絵の下には何も置かない。
   文字の大きさ・余白はカードの幅に対する割合（cqw）で決めるので、置く場所は幅だけを決めればよい。
   写真は 16:9 の枠に合わせて切る（文字の位置をどのカードでもそろえるため）。
   表紙の無い記事は、コーナーの色の面（.tp-cover--* の --cover-bg・--cover-ink）に同じ並びで文字を置く */
.sc {
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cover-bg, var(--ink));
  color: var(--cover-ink, #fff);
  /* コーナーの色（.tp-cover--*）が使う淡い青白と薄い罫線は、トップページの中（.tp）でしか決めていない。
     トップ以外のページでも同じ色になるよう、カードの側にも同じ値を置く（値は .tp と同じ） */
  --tp-pale: #f4f9fb;
  --tp-rule: #cbdde7;
}
.sc:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sc__media { position: absolute; inset: 0; }
.sc__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.sc:hover .sc__media img { transform: scale(1.03); }
/* 写真の上の文字が読めるよう、上端と下端にだけ紺を薄く敷く（真ん中は写真のまま見せる） */
.sc__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--ink-rgb), .45) 0%,
    rgba(var(--ink-rgb), 0) 30%,
    rgba(var(--ink-rgb), 0) 42%,
    rgba(var(--ink-rgb), .72) 100%);
}
.sc.has-photo { color: #fff; }
.sc.has-photo .sc__top,
.sc.has-photo .sc__bottom { text-shadow: 0 1px 12px rgba(var(--ink-rgb), .35); }

.sc__top {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex; align-items: baseline; gap: 1em;
  padding: clamp(10px, 4.4cqw, 28px) clamp(12px, 4.6cqw, 30px) 0;
  font-family: var(--font-nav);
  line-height: 1.2;
}
.sc__label {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
  font-size: clamp(10px, 2.3cqw, 14px);
  letter-spacing: 0.16em;
}
.sc__date {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 500;
  font-size: clamp(11px, 2.5cqw, 16px);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.sc__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0 clamp(12px, 4.6cqw, 30px) clamp(12px, 4.6cqw, 30px);
}
.sc__bar {
  display: block;
  width: clamp(18px, 6cqw, 40px);
  height: clamp(2px, 0.5cqw, 3px);
  margin-bottom: clamp(8px, 2.6cqw, 16px);
  background: currentColor;
  transition: width .25s;
}
.sc:hover .sc__bar { width: clamp(28px, 10cqw, 64px); }
.sc__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(14px, 3.7cqw, 30px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}
/* 小さなカード（スマホで2列に並べた関連など）は、日付を外して題名に場所を譲る */
@container (max-width: 300px) {
  .sc__date { display: none; }
  .sc__title { font-size: 12.5px; }
  .sc__bar { margin-bottom: 6px; }
}

/* ------------------------------------------------- 選んだ記事 */
/* 主役を上に大きく1本、その下に残りを横並びにする */
.ch-sel { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }

/* 主役でも、幅いっぱいまで伸ばすと大きすぎる。
   上限を決めて、下に並ぶ2本より一段大きい、くらいに留める */
.ch-sel__main { max-width: min(100%, 52rem); }
/* 日付とテーマの1行（LIFESTYLE の入口の記事の行で使う）。
   テーマは囲まずに # を付けた文字だけにする。一覧に並んだとき、
   写真と題名のあいだに囲みの線が入ると、線ばかりが目立つため */
.ch-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  /* 日付とテーマのあいだは広めに取る。近づけると1つの文字列に見えてしまう */
  gap: 0.25rem 1.375rem;
  font-family: var(--font-nav);
  font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.ch-meta__tag { font-family: var(--font-sans); letter-spacing: 0.04em; }

/* 主役の下に、残りを横並びに置く。本数は --sub-cols で渡す
   （1本のときに半分だけ埋まって空きができないようにするため） */
.ch-sel__subs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--sub-cols, 2), minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1rem, 2.4vw, 2rem);
}

/* ------------------------------ 一覧（同じ大きさで2列に並べる） */
/* 大きさを変えて並べると、どれが重要なのかという意味が生まれてしまう。
   ここは「最近公開した記事」なので、順番以外の差は付けない */
.eg {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* 記事ページの下の RELATED。1列に3枚まで（本数は --sc-cols で渡す）。
   1本しか無いときに、幅いっぱいまで伸びて本文の写真より大きくならないよう上限を置く */
.sc-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--sc-cols, 3), minmax(0, 1fr));
  gap: clamp(0.875rem, 1.8vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: calc(var(--sc-cols, 3) * 26rem);
}

/* ---------------------------------------------------- ページ送り */
/* 使う部品は他のページと同じ（partials/pagination.php）。
   見た目だけ、この章のページに合わせて細い線の作りにそろえる。
   位置は中央。以前は上の一覧の左端にそろえていたが、本人の希望で中央にした（2026-09-15） */
.is-chapter .pagination {
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.is-chapter .pagination a,
.is-chapter .pagination span {
  min-width: 2.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(var(--ink-rgb), .35);
  border-radius: 0;
  background: none;
  text-align: center;
  color: var(--ink-sub);
  transition: color .2s, border-color .2s;
}
.is-chapter .pagination a:hover {
  border-color: rgba(var(--ink-rgb), .7);
  background: none;
  color: var(--ink);
}
/* いま見ているページ。濃い線1本だけで示す */
.is-chapter .pagination .is-current {
  border-color: var(--ink);
  background: none;
  color: var(--ink);
}
.is-chapter .pagination .is-disabled {
  border-color: rgba(var(--ink-rgb), .15);
  color: var(--ink-mute);
  opacity: 1;
}

/* ------------------------------------------------ 幅が狭いとき */
@media (max-width: 900px) {
  .ch-hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* スマホでは横並びをやめ、1枚ずつ縦に積む。
     題名を絵の中に入れたので、絵の下の文字のぶん1枚が短く、4本積んでも長くなりすぎない */
  .ch-sel__subs,
  .eg { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  /* 関連は6本あるので、2列にして小さなカードの形（日付を外す）にする */
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
}

/* ------------------------------- KOKOROMI の並び（v2：左右を交互にする） */
/* 偶数番目だけ、写真と文章の列を入れ替える */
.pj:nth-child(even) .pj__media { grid-column: 2; grid-row: 1; }
.pj:nth-child(even) .pj__body  { grid-column: 1; grid-row: 1; }
/* 写真が右に来る回は、view more も文章側（左）に寄せる */
.pj:nth-child(even) .btn-view-row { justify-content: flex-start; }

/* 1列に戻る幅では、写真が先・文章が後の順に揃える */
@media (max-width: 900px) {
  .pj:nth-child(even) .pj__media,
  .pj:nth-child(even) .pj__body {
    grid-column: 1;
    grid-row: auto;
  }
  .pj:nth-child(even) .btn-view-row { justify-content: flex-end; }
}

/* ================================================================
   TSUZURI（v2）
   動画はサムネイルの並び、音声は再生一覧。ひと目で見分けられるようにする
   ================================================================ */

/* 動画の再生マークは、記事ページと同じ白丸に揃える */
.tile__play {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.tile:hover .tile__play { background: var(--ink); transform: scale(1.08); }

/* ------------------------------------------------ 音声：再生一覧の形 */
.au-list {
  list-style: none;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.au {
  display: flex; align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  padding-right: clamp(0.5rem, 1.2vw, 1rem);
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
}

.au__link {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  gap: clamp(0.875rem, 2vw, 1.75rem);
  padding: clamp(0.875rem, 1.6vw, 1.125rem) clamp(0.5rem, 1.2vw, 1rem);
  color: var(--ink);
  transition: background-color .2s;
}
.au__link:hover { background: rgba(var(--ink-rgb), .06); }
.au__link--empty { cursor: default; }

/* 通し番号 */
.au__no {
  flex-shrink: 0;
  min-width: 1.75rem;
  font-family: var(--font-serif);
  font-size: 1.25rem; line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ink-sub);
}

/* ジャケット */
.au__art {
  flex-shrink: 0;
  width: clamp(3rem, 5vw, 4rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--media-bg);
}
.au__art img { width: 100%; height: 100%; object-fit: cover; }

.au__body { flex: 1; min-width: 0; }
.au__title {
  display: block;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  font-weight: 700; line-height: 1.5;
  color: var(--ink);
}
.au__link--empty .au__title { color: var(--ink-sub); font-weight: 500; }
.au__tag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(var(--ink-rgb), .45);
  font-size: 0.75rem; line-height: 1; letter-spacing: 0.06em;
  color: var(--ink);
}

.au__len {
  flex-shrink: 0;
  font-family: var(--font-condensed);
  font-size: 0.9375rem; letter-spacing: 0.04em;
  color: var(--ink-sub);
}

/* 再生ボタン */
.au__play {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: transform .2s;
}
.au__play svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; margin-left: 2px; }
.au__play:hover { transform: scale(1.08); }
.au__play--off { background: rgba(var(--ink-rgb), .45); }
/* 再生中の行は、ボタンを目立たせる */
.au__play.is-playing { box-shadow: 0 0 0 4px rgba(var(--ink-rgb), .25); }

@media (max-width: 560px) {
  .au__no { display: none; }
  .au__tag { display: none; }
}

/* --------------------------------------- 記事の下に並べる関連（v2） */
/* 数に合わせて列を作るので、最後の列が空いたままにならない */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(var(--rel-cols, 3), minmax(0, 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  /* 1本しか無いときに、写真が幅いっぱいまで伸びて主役より大きくならないようにする。
     3本並ぶときは本来の幅より広いので、この上限は効かない */
  max-width: calc(var(--rel-cols, 3) * 24rem);
}
.rel { display: block; }
.rel__media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--media-bg);
}
.rel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rel:hover .rel__media img { transform: scale(1.04); }
.rel__tag {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(var(--ink-rgb), .45);
  font-size: 0.6875rem; line-height: 1; letter-spacing: 0.06em;
  color: var(--ink);
}
.rel__title {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.8125rem; font-weight: 500; line-height: 1.6;
  color: var(--ink-sub);
  transition: color .2s;
}
.rel:hover .rel__title { color: var(--ink); }

@media (max-width: 1100px) {
  .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------ ページの背景に敷く写真（v2） */
/* トップページの背景と同じ考え方。文字が読めるよう、暗く落として薄く重ねる */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: page-bg-in 1.4s ease both;
}
/* 上下を濃く落として、見出しや本文にかからないようにする */
.page-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .72) 30%,
    rgba(255, 255, 255, .72) 70%,
    rgba(255, 255, 255, .9) 100%
  );
}
@keyframes page-bg-in {
  from { opacity: 0; }
  to   { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .page-bg { animation: none; opacity: .4; }
}

/* ================================================================
   NIKKI（日記）
   左に本文、右にカレンダー。書いた日には印を付ける
   ================================================================ */
.nk-layout {
  display: grid;
  /* 右の一覧に幅を確保してから、残りを本文にあてる。
     こうしないと、画面が狭いときに右だけ潰れる */
  /* 本文の上限を決めたうえで、余った幅は左に送る。
     こうすると一覧とのあいだに空きが残らず、
     画面が広くても1行が長くなりすぎない */
  grid-template-columns: minmax(0, 52rem) clamp(15rem, 22vw, 20rem);
  justify-content: end;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* 日記が左の端に貼り付いて見えるので、少し内側から始める */
  padding-left: clamp(0rem, 4vw, 4.5rem);
}

/* ------------------------------------------------------ 日記の本文 */
.nk-entry__date { display: flex; align-items: baseline; gap: 0.75rem; }
/* 日付は添えもの。いちばん大きく出すのは見出し */
.nk-entry__ymd {
  font-family: var(--font-condensed);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.04em; line-height: 1;
  color: var(--ink-sub);
}
.nk-entry__dow {
  font-size: 0.8125rem; line-height: 1;
  color: var(--ink-sub);
}

.nk-entry__title {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700; line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.nk-entry__body { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.nk-entry__body p {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.9;
  color: var(--ink);
}
.nk-entry__body p + p { margin-top: 1.625rem; }

/* 日記の本文は Markdown で書く。記事と同じ書き方がそのまま使える */
/* 節の見出し。本文よりはっきり大きくして、左に短い線を添える */
.nk-entry__body h2 {
  position: relative;
  margin-top: clamp(2.75rem, 4.5vw, 3.75rem);
  padding-left: 0.875rem;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  font-weight: 700; line-height: 1.6;
  color: var(--ink);
}
.nk-entry__body h2::before {
  content: "";
  position: absolute; left: 0; top: 0.15em; bottom: 0.15em;
  width: 3px;
  background: var(--ink);
}
.nk-entry__body h3 {
  margin-top: clamp(2rem, 3.2vw, 2.5rem);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700; line-height: 1.6;
  color: var(--ink);
}
.nk-entry__body h2 + p,
.nk-entry__body h3 + p { margin-top: 1.25rem; }
.nk-entry__body ul, .nk-entry__body ol { margin-top: 1.5rem; padding-left: 1.375rem; }
.nk-entry__body li {
  list-style: disc;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 2.05;
  color: var(--ink);
}
.nk-entry__body ol li { list-style: decimal; }
.nk-entry__body li + li { margin-top: 0.5rem; }
.nk-entry__body ul + p, .nk-entry__body ol + p { margin-top: 1.75rem; }
.nk-entry__body blockquote {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid rgba(var(--ink-rgb), .45);
}
.nk-entry__body blockquote p { color: var(--ink); }
.nk-entry__body strong { color: var(--ink); font-weight: 700; }
.nk-entry__body a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* 読み上げの音声への入口。押すと画面の下に再生バーが出る */
.nk-audio {
  display: flex; align-items: center; gap: 0.875rem;
  width: 100%; max-width: 26rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0.875rem 1.125rem;
  border: 1px solid rgba(var(--ink-rgb), .35);
  text-align: left;
  transition: background-color .2s, border-color .2s;
}
.nk-audio:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), .04); }
.nk-audio__play {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--ink);
}
.nk-audio__play svg { width: 1rem; height: 1rem; fill: #fff; }
.nk-audio__text { display: block; min-width: 0; }
.nk-audio__title { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.nk-audio__note {
  display: block; margin-top: 0.125rem;
  font-size: 0.75rem; color: var(--ink-sub);
}

/* 下書きの日記は、管理者にしか出ない。公開済みと見まちがえないようにする */
.nk-entry__draft {
  margin-top: 1.25rem; padding: .75rem 1rem;
  border: 1px dashed rgba(var(--ink-rgb), .45);
  font-size: .8125rem; color: var(--ink);
}

/* 日記の断り書き。見出しの下に、本文より小さい字で置く */
.nk-entry__note { margin-top: 1.25rem; }
.nk-entry__note p {
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.95;
  color: var(--ink-sub);
}
.nk-entry__note p + p { margin-top: 0.875rem; }

/* ------------------------------------------------ NIKKI の一覧（入口） */
.nk-index__note { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 46rem; }
.nk-index__note p {
  font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
  line-height: 1.95;
  color: var(--ink-sub);
}
.nk-index__note p + p { margin-top: 0.875rem; }

.nk-cards {
  list-style: none;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
@media (max-width: 1000px) { .nk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .nk-cards { grid-template-columns: minmax(0, 1fr); } }

.nk-card { border-top: 1px solid rgba(var(--ink-rgb), .55); }
.nk-card__link {
  display: block;
  padding-top: 1.125rem;
  transition: opacity .2s;
}
.nk-card__link:hover { opacity: .6; }
.nk-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.nk-card__date {
  font-family: var(--font-condensed);
  font-size: 0.875rem; letter-spacing: 0.06em;
  color: var(--ink-sub);
}
.nk-card__draft {
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(var(--ink-rgb), .35);
  font-size: 0.6875rem; line-height: 1.6;
  color: var(--ink-sub);
}
.nk-card__title {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 700; line-height: 1.6;
  color: var(--ink);
}
.nk-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* 2行で切る。カードの高さをそろえるため */
  overflow: hidden;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* --------------------------------------------- 右に出す、ほかの日記 */
.nk-side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.nk-side__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.2em; line-height: 1;
  color: var(--ink);
  text-align: center;
}
.nk-side__list { list-style: none; }
.nk-side__item { border-bottom: 1px solid rgba(var(--ink-rgb), .18); }
.nk-side__link {
  display: block;
  padding-block: 1rem;
  transition: opacity .2s;
}
.nk-side__link:hover { opacity: .6; }
.nk-side__date {
  display: block;
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--ink-sub);
}
.nk-side__title {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700; line-height: 1.65;
  color: var(--ink);
}
.nk-side__empty { margin-top: 1rem; font-size: 0.8125rem; color: var(--ink-sub); }

/* 幅が足りない画面では、本文の下に回す */
@media (max-width: 900px) {
  .nk-side { position: static; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
}


/* ================================================================
   BLOG（今日のGalaxia）の入口（/nikki）
   2026-09-15 に、本人の希望でほかの章と同じ組み方にそろえた
   （それまでは、カードを並べず時間が流れていく一本の帯として組んでいた）。
     扉 … partials/chapter-hero（FROM KITAKYUSHU / TO NEW YORK・大きな BLOG・一言・リード・線）
     帯 → 日々の一覧（サムネイル .sc を2列）→ ページ送り → 月ごとの ARCHIVE → 断り書き
   ================================================================ */

/* 番号を持たない扉（BLOG）は、番号の場所ごと詰める */
.ch-hero__no:empty { display: none; }

/* BLOG の線。リードが6文あって扉が縦に長いので、KOKOROMI と同じく扉の上端を基準に置く */
.ch-hero--nikki .ch-line--pc { top: -4.5rem; transform: none; }
/* リードは1文が長いので、ほかの章より少し広く取り、文と文のあいだを詰める */
.ch-hero--nikki .ch-hero__lead { max-width: 38em; }
.ch-hero--nikki .ch-hero__lead--paras p + p { margin-top: 0.5em; }

.bl-empty {
  padding-block: clamp(1rem, 3vw, 2rem);
  font-size: 0.9375rem;
  color: var(--ink-mute);
}

/* 月で絞っているときの「すべて見る」 */
.bl-all {
  margin-left: 0.875rem;
  color: var(--ink-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.bl-all:hover { color: var(--blue); }

/* 管理者にだけ並ぶ下書きの印（サムネイルの左上、分類名の隣） */
.sc__draft {
  flex-shrink: 0;
  padding: 0.2em 0.7em;
  border-radius: 1em;
  background: var(--pink);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-shadow: none;
}

/* --------------------------------------------------- 月ごとに読む棚 */
/* 年ごとにまとめ、月は横に並べる */
.bl-arch__group + .bl-arch__group { margin-top: 1.5rem; }
.bl-arch__year {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  color: var(--ink-sub);
}
.bl-arch__list {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 2rem;
  list-style: none; margin: 0.5rem 0 0; padding: 0;
}
.bl-arch__link {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding-block: 0.375rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ink-sub);
  transition: color .2s;
}
.bl-arch__link:hover { color: var(--blue); }
.bl-arch__link.is-on {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.bl-arch__n {
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--ink-mute);
}

/* ------------------------------------------------------- 断り書き */
.bl-note {
  max-width: 44rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(var(--ink-rgb), .16);
  font-size: 0.75rem;
  line-height: 2;
  color: var(--ink-mute);
}
.bl-note p + p { margin-top: 0.625rem; }

/* ================================================================
   BLOG の1本
   読みやすさだけを優先する。横に柱を立てず、本文に集中させる
   ================================================================ */
.bl-entry {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* 本文の幅。日本語で1行が長すぎず短すぎない範囲に収める */
.bl-entry .wrap > * { max-width: 43rem; margin-inline: auto; }

.bl-entry__corner {
  font-family: var(--font-condensed);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--ink-mute);
}
.bl-entry__corner a { color: inherit; }

.bl-entry__meta {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--ink-sub);
}
.bl-entry__sep {
  width: 1.25rem; height: 1px;
  background: rgba(var(--ink-rgb), .35);
}

.bl-entry__title {
  margin-top: 0.875rem;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.bl-entry__draft {
  margin-top: 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--pink);
  font-size: 0.75rem;
  color: var(--ink-sub);
}

.bl-entry__body {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-size: 0.9375rem;
  line-height: 2.15;
  color: var(--ink);
}
.bl-entry__body p + p { margin-top: 1.5rem; }
.bl-entry__body h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-size: 1.125rem; font-weight: 700; line-height: 1.7;
}
.bl-entry__body h3 {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-size: 1rem; font-weight: 700; line-height: 1.7;
}
.bl-entry__body h2 + p, .bl-entry__body h3 + p { margin-top: 1rem; }
.bl-entry__body ul, .bl-entry__body ol { margin-top: 1.375rem; padding-left: 1.375rem; }
.bl-entry__body li + li { margin-top: 0.5rem; }
.bl-entry__body ol li { list-style: decimal; }
.bl-entry__body blockquote {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--pink);
  color: var(--ink-sub);
}
/* 本文に入れた写真は、この幅の中でそのまま出す */
.bl-entry__body .fig { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* 読み上げの音声 */
.bl-audio {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(var(--ink-rgb), .2);
  background: none;
  cursor: pointer;
  text-align: left;
}
.bl-audio__play svg { width: 1.5rem; height: 1.5rem; fill: var(--ink); }
.bl-audio__title { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.bl-audio__note  { display: block; font-size: 0.6875rem; color: var(--ink-mute); }

/* ------------------------------------------------------- 書いた人 */
/* 大きな筆者紹介は置かない。誰が書いたかが分かれば足りる */
.bl-author {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--ink-rgb), .16);
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  line-height: 2;
  color: var(--ink-mute);
}
/* 名前・肩書き・場所を、それぞれ別の行にする。
   1行に混ぜると肩書きと地名がつながって読め、どこまでが役職か分からなくなる */
.bl-author__name  { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.bl-author__role  { display: block; }
.bl-author__place { display: block; }

.bl-note--entry { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --------------------------------------------- 前の日・次の日 */
/* 関連記事を大量に出さない。前の日と次の日へつなぐほうが自然 */
.bl-around {
  display: grid; gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(var(--ink-rgb), .16);
  border-block: 1px solid rgba(var(--ink-rgb), .16);
}
@media (min-width: 720px) { .bl-around { grid-template-columns: 1fr 1fr; } }

.bl-around__item {
  display: block;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  background: var(--paper);
  transition: opacity .2s;
}
.bl-around__item--next { text-align: right; }
.bl-around__item:hover { opacity: .65; }
.bl-around__item--off { color: var(--ink-mute); }
.bl-around__label {
  display: block;
  font-family: var(--font-condensed);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
}
.bl-around__date {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-condensed);
  font-size: 0.75rem; letter-spacing: 0.14em;
  color: var(--ink-sub);
}
.bl-around__title {
  display: block; margin-top: 0.25rem;
  font-size: 0.875rem; font-weight: 700; line-height: 1.7;
  color: var(--ink);
}

.bl-back { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.bl-back a {
  font-family: var(--font-condensed);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--ink);
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  padding-bottom: 0.25rem;
}

/* ================================================================
   トップに出す FROM THE BLOG
   本誌の新着とは別の区画。日付と題名だけの短い並びにする
   ================================================================ */
.tp-blog { list-style: none; margin: 0; padding: 0; }
.tp-blog li + li { border-top: 1px solid rgba(var(--ink-rgb), .16); }
.tp-blog__row {
  display: grid; gap: 0.25rem 1.25rem;
  padding-block: clamp(0.875rem, 2vw, 1.125rem);
  transition: opacity .2s;
}
@media (min-width: 720px) {
  .tp-blog__row { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; }
}
.tp-blog__row:hover { opacity: .62; }
.tp-blog__date {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.tp-blog__title {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.7;
  color: var(--ink);
}
.tp-blog__more { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.tp-blog__more a {
  font-family: var(--font-condensed);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
}

/* ------------------------------------------------ 前後の日記へ */
.nk-nav {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.nk-nav__item {
  display: flex; align-items: center; gap: 0.875rem;
  color: var(--ink);
  transition: opacity .2s;
}
.nk-nav__item--next { margin-left: auto; text-align: right; }
a.nk-nav__item:hover { opacity: .6; }
.nk-nav__item--off { color: var(--ink-mute); }

.nk-nav__text { display: block; }
.nk-nav__label {
  display: block;
  font-size: 0.8125rem; line-height: 1.4;
  color: var(--ink-sub);
}
.nk-nav__item--off .nk-nav__label { color: var(--ink-mute); }
.nk-nav__date {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--font-condensed);
  font-size: 1.0625rem; letter-spacing: 0.04em; line-height: 1;
}

.nk-nav__arrow {
  position: relative; flex-shrink: 0;
  width: 2.25rem; height: 1px;
  background: currentColor;
}
.nk-nav__arrow::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.nk-nav__item--next .nk-nav__arrow::after {
  right: 0; border-right: 1px solid currentColor;
}
.nk-nav__item--prev .nk-nav__arrow::after {
  left: 0; border-left: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

/* ---------------------------------------------------- カレンダー */

/* 日記のある日 */
/* いま見ている日 */

@media (max-width: 1100px) {
  .nk-layout { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .nk-entry { max-width: none; }
}
/* 狭い画面でも、左に「前の日記」右に「次の日記」で横に並べる。
   縦に積むと、どちらがどちらか分からなくなるため */
@media (max-width: 560px) {
  .nk-nav { gap: 0.75rem; }
  .nk-nav__item { gap: 0.5rem; }
  .nk-nav__arrow { width: 1.5rem; }
  .nk-nav__label { font-size: 0.75rem; }
  .nk-nav__date { font-size: 0.9375rem; margin-top: 0.25rem; }
  /* 端の日記では、長い一言が場所を取りすぎないようにする */
  .nk-nav__item--off .nk-nav__label { font-size: 0.6875rem; line-height: 1.5; }
}

/* ------------------------------------ 音声版・動画版へのご案内（v2） */
.art-also { margin-top: 0; }
/* ALSO の下に INDEX が続く */
.art-also + .art-toc__fold { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.art-also__head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.2em; line-height: 1;
  color: var(--ink);
}

/* ------------------------------- KOKOROMI の並び（v2：左右を交互にする） */
/* 偶数番目だけ、写真と文章の列を入れ替える */
.pj:nth-child(even) .pj__media { grid-column: 2; grid-row: 1; }
.pj:nth-child(even) .pj__body  { grid-column: 1; grid-row: 1; }
/* 写真が右に来る回は、view more も文章側（左）に寄せる */
.pj:nth-child(even) .btn-view-row { justify-content: flex-start; }

/* 1列に戻る幅では、写真が先・文章が後の順に揃える */
@media (max-width: 900px) {
  .pj:nth-child(even) .pj__media,
  .pj:nth-child(even) .pj__body {
    grid-column: 1;
    grid-row: auto;
  }
  .pj:nth-child(even) .btn-view-row { justify-content: flex-end; }
}

/* ------------------------------------------- 音声：再生機のような見た目 */
.art-audio {
  display: block; width: 100%; text-align: left;
  cursor: pointer;
  margin-top: 0.875rem;
  padding: clamp(0.75rem, 1.2vw, 1rem);
  border: 1px solid rgba(var(--ink-rgb), .55);
  color: var(--ink);
  transition: background-color .25s, border-color .25s;
}
.art-audio:hover { background: var(--surface); border-color: var(--ink); }

/* 幅が狭いときは、右下に浮かぶ入口が同じ役目をするので、こちらは出さない。
   同じ指定を目次まわりの @media にも書いていたが、そちらはこの定義より前に
   あるため効いていなかった（強さが同じなら、後に書いたほうが勝つ）。
   入口が2つ出ているのに気づかなかったのは、音を付けた記事がこれまで
   ラジオの回の再生機に回っていて、この欄自体が出ていなかったため
   （2026-09-19 に直した） */
@media (max-width: 1149.98px) {
  .art-audio { display: none; }
}

.art-audio__top { display: flex; align-items: center; justify-content: space-between; }
.art-audio__en {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.16em; line-height: 1;
}
.art-audio__len {
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1;
  opacity: .7;
}

/* ジャケットと文字 */
.art-audio__row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.art-audio__text { min-width: 0; }
.art-audio__title {
  display: block;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.5;
}
.art-audio__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem; line-height: 1.4;
  opacity: .7;
}

.art-audio__play {
  flex-shrink: 0; margin-left: auto;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: transform .2s;
}
.art-audio__play svg { width: 1.125rem; height: 1.125rem; fill: currentColor; margin-left: 2px; }
.art-audio:hover .art-audio__play { transform: scale(1.08); }

/* ------------------------------------------- 動画：サムネイルを大きく見せる */
.art-video {
  display: block;
  margin-top: 0.75rem;
  padding: clamp(0.75rem, 1.2vw, 1rem);
  border: 1px solid rgba(var(--ink-rgb), .55);
  color: var(--ink);
  transition: background-color .25s, border-color .25s;
}
.art-video:hover { background: var(--surface); border-color: var(--ink); }

.art-video__top { display: flex; align-items: center; justify-content: space-between; }
.art-video__en {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.16em; line-height: 1;
}
.art-video__len {
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1;
  opacity: .7;
}

.art-video__media {
  position: relative; display: block;
  margin-top: 0.625rem;
  aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--media-bg);
}
.art-video__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.art-video:hover .art-video__media img { transform: scale(1.04); }
.art-video__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: transform .2s;
}
.art-video__play svg { width: 1.125rem; height: 1.125rem; fill: currentColor; margin-left: 2px; }
.art-video:hover .art-video__play { transform: translate(-50%, -50%) scale(1.08); }

.art-video__title {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.5;
}
.art-video__note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem; line-height: 1.4;
  opacity: .7;
}

/* ------------------------------------ 元になった Vamos の記事へ（v2） */
/* ================================================================
   引用元（SOURCE）
   以前は右の欄に縦置きしていたが、タイトルのすぐ下に横長で置くことにした。
   本文を読みはじめる前に「どこから来た話か」が分かるようにするため。
   ================================================================ */
/* SOURCE は本文ではなく補足。本文と同じ幅に収め、高さ・余白・線の濃さを
   落として、記事の中身と見まちがえないようにする（2026-09-18、本人の希望）。
   外の記事への入口だと分かればよいので、矢印と媒体名は残す */
/* ================================================================
   SOURCE — この記事のもとになった記事
   ----------------------------------------------------------------
   本文ではなく補足なので、記事より強く見せない。
   広い画面では右の余白（CONTENTS の下）に縦に積み、
   狭い画面では本文を読み終えた先に、絵を左にした横組みで置く。
   囲みを強くせず、絵・媒体名・見出し・READ ARTICLE の並びだけで
   「もとになった記事」だと分かるようにする（2026-09-24、本人の希望）
   ================================================================ */
.srcbox { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* SOURCE の札。CONTENTS と同じ形にそろえる */
.srcbox__head {
  margin-bottom: 0.75rem;
  padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--art-rule);
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.18em; line-height: 1;
  color: var(--art-faint);
}

.srcbox__card {
  display: block;
  color: var(--art-heading);
}

/* 媒体の絵。ロゴがある媒体はロゴ、無ければ媒体名を書いた枠 */
.srcbox__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--media-bg);
  border: 1px solid var(--art-rule);
}
.srcbox__thumb img {
  width: 100%; height: 100%;
  padding: 12%;
  object-fit: contain;
}
.srcbox__plate {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.1em; line-height: 1.3;
  text-align: center;
  color: var(--art-muted);
}

.srcbox__body { display: block; margin-top: 0.75rem; }

.srcbox__name {
  display: block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.1em; line-height: 1.2;
}
/* 元記事の見出し。長いものが多いので、3行で切る（続きは押した先で読める） */
.srcbox__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.375rem;
  font-size: 0.8125rem; font-weight: 400; line-height: 1.55;
  color: var(--art-muted);
}

.srcbox__go {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.75rem;
}
.srcbox__label {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.14em; line-height: 1.4;
}

/* 矢印。軸と頭を別々に置き、どちらも縦の中心にそろえる。
   （頭を右端を軸に回すと、線の中心から下にずれて崩れて見える） */
.srcbox__arrow {
  position: relative; flex-shrink: 0;
  width: 2rem; height: 9px;
  transition: width .25s;
}
.srcbox__arrow::before {
  content: ""; position: absolute;
  left: 0; right: 2px; top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.srcbox__arrow::after {
  content: ""; position: absolute;
  right: 1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
/* 読んでいる最中に光らせない。下線と矢印だけで、押せると分かればよい */
.srcbox__card:hover .srcbox__title { color: var(--art-heading); }
.srcbox__card:hover .srcbox__arrow { width: 2.75rem; }
.srcbox__card:hover .srcbox__thumb { border-color: rgba(var(--ink-rgb), .38); }

/* 押した先で読めないことがある、という断り */
.srcbox__caution {
  margin-top: 0.625rem;
  font-size: 0.6875rem; line-height: 1.7;
  color: var(--art-faint);
}

/* 狭い画面では、本文を読み終えた先に置く。
   絵を左に小さく、文字を右にした横組みにする（縦に積むと絵が大きくなりすぎる） */
@media (max-width: 1149.98px) {
  .srcbox {
    max-width: var(--art-text);
    margin-inline: auto;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }
  .srcbox__card {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: clamp(1rem, 2.4vw, 1.375rem);
    align-items: start;
  }
  .srcbox__body { margin-top: 0; }
}
@media (max-width: 480px) {
  .srcbox__card { grid-template-columns: 5.5rem minmax(0, 1fr); }
}


/* ================================================================
   画面の下に貼り付く再生バー
   ページを移動しても鳴り続ける
   ================================================================ */
.pbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.pbar[hidden] { display: none; }

/* 再生位置のバー。バーの上端いっぱいに置く */
.pbar__seek {
  position: relative;
  height: 3px;
  background: rgba(var(--ink-rgb), .2);
  cursor: pointer;
}
.pbar__seek-fill {
  position: absolute; left: 0; top: 0;
  width: 0; height: 100%;
  background: var(--ink);
}
.pbar__seek-fill::after {
  content: "";
  position: absolute; right: -4px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.pbar__inner {
  display: flex; align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  padding: clamp(0.625rem, 1.2vw, 0.875rem) clamp(0.875rem, 2.4vw, 2.25rem);
}

/* 送り・戻し・再生 */
.pbar__ctrl { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.pbar__btn {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: var(--ink);
  transition: opacity .2s, transform .2s;
}
.pbar__btn:hover { opacity: .6; }
.pbar__btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.pbar__btn--play {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--ink); color: #fff;
}
.pbar__btn--play svg { width: 1.25rem; height: 1.25rem; }
.pbar__btn--play:hover { opacity: 1; transform: scale(1.06); }
.pbar__btn--close svg { fill: none; }

/* ジャケット */
.pbar__art {
  flex-shrink: 0;
  display: block;
  width: 2.75rem; height: 2.75rem;
  overflow: hidden;
  background: var(--media-bg);
}
.pbar__art img { width: 100%; height: 100%; object-fit: cover; }

/* 見出し */
.pbar__text { min-width: 0; }
.pbar__title {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.4;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbar__sub {
  margin-top: 0.1875rem;
  font-size: 0.75rem; line-height: 1.4;
  color: var(--ink-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pbar__time {
  flex-shrink: 0;
  display: flex; align-items: baseline; gap: 0.375rem;
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--ink-sub);
}
.pbar__time-sep { opacity: .5; }

@media (max-width: 700px) {
  .pbar__time { display: none; }
  .pbar__ctrl .pbar__btn:not(.pbar__btn--play) { display: none; }
}

/* 再生バーのぶん、ページの下に余白を足す */
.has-pbar .site-footer { padding-bottom: 5.5rem; }

.btn-view--wide { width: min(100%, 24rem); }

/* ------------------------ KIZASHI：引用した媒体のサムネイル */
/* 画像がまだ無い媒体は、媒体名を書いた枠を代わりに出す */
.kz__plate {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb), .25);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(0.625rem, 1vw, 0.8125rem);
  letter-spacing: 0.1em; line-height: 1.3;
  text-align: center;
  color: var(--ink);
}
/* 元ニュースの行に置く、媒体のロゴ。
   ロゴの絵はどれも周りの余白が広く、そのまま小さくすると字が読めない。
   横長の枠に入れて上下を切り、字が大きく見えるようにする（2026-09-16）。
   白地のロゴが生成りの地に溶けないよう、白を敷いて細い枠を付ける */
.kz__logo {
  flex-shrink: 0;
  display: block;
  width: clamp(4.25rem, 9vw, 5.25rem);
  height: 1.5rem;
  object-fit: cover;
  border: 1px solid rgba(var(--ink-rgb), .12);
  border-radius: 2px;
  background: #fff;
}
/* 日経のロゴだけ、絵の中の字が真ん中より少し上にある（縦 39%〜56%、中心 47%）。
   真ん中で切ると字の上が札のふちに触れるので、切る位置を少し上へずらす（2026-09-16） */
.kz__logo[data-source="nikkei"] { object-position: 50% 47%; }

/* 媒体の名前（ロゴの絵を置いていない媒体で使う） */
.kz__media {
  display: inline-block;
  margin-right: 0.625rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid rgba(var(--ink-rgb), .45);
  font-size: 0.6875rem; line-height: 1; letter-spacing: 0.04em;
  color: var(--ink);
  vertical-align: 0.1em;
}

/* ------------------------------------------ 再生バー：右側の操作 */
.pbar__right {
  display: flex; align-items: center; gap: 0.25rem;
  margin-left: auto; flex-shrink: 0;
}
.pbar__btn--close { margin-left: 0.25rem; }

/* 音量 */
.pbar__vol { display: flex; align-items: center; gap: 0.5rem; }
.pbar__vol-range {
  appearance: none; -webkit-appearance: none;
  width: 5rem; height: 3px;
  background: rgba(var(--ink-rgb), .3);
  cursor: pointer;
}
.pbar__vol-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 0;
}
.pbar__vol-range::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 0;
}

/* ------------------------------------ 再生バー：次に再生するもの */
.pbar__panel {
  position: absolute;
  right: clamp(0.875rem, 2.4vw, 2.25rem);
  bottom: calc(100% + 0.5rem);
  width: min(22rem, calc(100vw - 2rem));
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  padding: clamp(0.875rem, 1.6vw, 1.25rem);
  background: #fff;
  border: 1px solid rgba(var(--ink-rgb), .45);
}
.pbar__panel[hidden] { display: none; }

.pbar__panel-head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.2em; line-height: 1;
  color: var(--ink);
}
.pbar__panel-empty {
  margin-top: 1rem;
  font-size: 0.8125rem; line-height: 1.7;
  color: var(--ink-sub);
}

.pbar__queue { list-style: none; margin-top: 0.75rem; }
.pbar__queue-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.5rem;
  text-align: left;
  color: var(--ink);
  transition: background-color .2s;
}
.pbar__queue-item:hover { background: rgba(var(--ink-rgb), .08); }
.pbar__queue-no {
  flex-shrink: 0; min-width: 1.5rem;
  font-family: var(--font-serif, "Times New Roman", serif);
  font-size: 0.9375rem; line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ink-sub);
}
.pbar__queue-art {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  overflow: hidden; background: var(--media-bg);
}
.pbar__queue-art img { width: 100%; height: 100%; object-fit: cover; }
.pbar__queue-text { min-width: 0; flex: 1; }
.pbar__queue-title {
  display: block;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbar__queue-sub {
  display: block; margin-top: 0.125rem;
  font-size: 0.6875rem; line-height: 1.3;
  color: var(--ink-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* いま鳴っているもの */
.pbar__queue-item.is-now { background: rgba(var(--ink-rgb), .12); }
.pbar__queue-item.is-now .pbar__queue-no { color: var(--ink); }

@media (max-width: 700px) {
  .pbar__vol-range { display: none; }
}

/* ================================================================
   TASHINAMI（嗜み）
   テーマごとに別ページを持つので、絞り込みではなくリンクで並べる
   ================================================================ */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}
.ts {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 12rem;
  padding: clamp(1.125rem, 2vw, 1.625rem);
  border: 1px solid rgba(var(--ink-rgb), .4);
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.ts:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.ts__head { display: flex; align-items: baseline; gap: clamp(0.625rem, 1.1vw, 0.9375rem); }
.ts__no {
  flex-shrink: 0;
  font-family: var(--font-serif, "Times New Roman", serif);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1; letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
  opacity: .8;
}
.ts__label {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 700; line-height: 1.4;
  word-break: keep-all;
}
.ts__en {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.16em; line-height: 1;
  opacity: .6;
}
.ts__lead {
  display: block;
  margin-top: 1rem;
  font-size: 0.9375rem; line-height: 1.85;
  opacity: .85;
}
.ts__arrow {
  position: relative; align-self: flex-end;
  margin-top: auto;
  width: 2.25rem; height: 1px;
  background: currentColor;
  transition: width .25s;
}
.ts__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.ts__lead { margin-bottom: 1.5rem; }
.ts:hover .ts__arrow { width: 3rem; }

/* テーマのページの見出し脇 */
.ts-en {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.2em; line-height: 1;
  color: var(--ink-sub);
}

/* ほかのテーマへ */
.ts-chips {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.ts-chip {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.6875rem 1rem;
  border: 1px solid rgba(var(--ink-rgb), .4);
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.ts-chip:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ts-chip__ja { font-size: 0.9375rem; font-weight: 700; line-height: 1; }
.ts-chip__en {
  font-family: var(--font-condensed);
  font-size: 0.625rem; letter-spacing: 0.14em; line-height: 1;
  opacity: .6;
}

@media (max-width: 900px) {
  .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ts-grid { grid-template-columns: minmax(0, 1fr); }
  .ts { min-height: 0; }
}

/* ------------------------------------------ 再生バー：再生の速さ */
.pbar__rate { position: relative; }
.pbar__btn--rate {
  width: auto; min-width: 2.5rem;
  padding-inline: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1;
}
.pbar__rates {
  position: absolute;
  right: 0; bottom: calc(100% + 0.5rem);
  min-width: 5rem;
  padding: 0.375rem;
  background: #fff;
  border: 1px solid rgba(var(--ink-rgb), .45);
}
.pbar__rates[hidden] { display: none; }
.pbar__rate-item {
  display: block; width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-family: var(--font-condensed);
  font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1;
  color: var(--ink);
  transition: background-color .2s;
}
.pbar__rate-item:hover { background: rgba(var(--ink-rgb), .1); }
.pbar__rate-item.is-on { background: var(--ink); color: #fff; font-weight: 700; }

/* --------------------------- NEWS の一覧ページ（区切りのない一覧） */
.news-list--page {
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.news-list--page .news-row {
  margin-top: 0;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
}
.news-list--page .news-row + .news-row { margin-top: 0; }
.news-list--page .news-row__link {
  padding-block: clamp(1.125rem, 2.2vw, 1.75rem);
  padding-inline: clamp(0.25rem, 1vw, 0.75rem);
}
.news-list--page a.news-row__link:hover { background: rgba(var(--ink-rgb), .06); opacity: 1; }

@media (max-width: 640px) {
  .news-list--page .news-row__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* --------------------- 記事：右下に浮かせる音声への入口（v2） */
/* 幅が足りない画面では右の欄（ALSO）が出ないので、
   そこに置いていた音声への入口を、代わりに右下へ浮かせる */
.art-fab { display: none; }

@media (max-width: 1180px) {
  .art-fab {
    position: fixed;
    /* 中身の列に合わせる。列より外へは出さない */
    right: calc(var(--band-x, 0px) + 1rem);
    bottom: 1.25rem;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 1.125rem 0.6875rem 0.9375rem;
    border: 1px solid rgba(var(--ink-rgb), .5);
    border-radius: 999px;
    background: rgba(250, 250, 247, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 26px rgba(255, 255, 255, .5);
    color: var(--ink);
    cursor: pointer;
    transition: transform .18s, opacity .18s;
  }
  .art-fab__icon { flex-shrink: 0; display: block; width: 1.3125rem; height: 1.3125rem; }
  .art-fab__icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .art-fab__text {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.1875rem; line-height: 1;
  }
  .art-fab__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
  .art-fab__len {
    font-family: var(--font-condensed);
    font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em;
    color: var(--ink-sub);
  }
  .art-fab:active { transform: scale(.97); }

  /* 再生バーが出ているあいだは、そちらで操作できるので引っこめる */
  .has-pbar .art-fab { display: none; }

  /* 浮かせたボタンが footer の文字に重ならないようにする */
  .has-audio-fab .site-footer { padding-bottom: 5.5rem; }
}

/* ------------------ HATARAKI：テーマの選び分け（スマホ・v2） */
/* 1つずつ縦に並べると1枚が大きくなりすぎて選びにくいので、
   横2つ×縦3つに収める。6テーマがちょうど1画面に近い形で並ぶ */
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .is-band .cat-tile {
    min-height: 4.5rem;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
  }
  /* 番号を見出しの上に置いて、狭い横幅を見出しに使わせる */
  .is-band .cat-tile__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .is-band .cat-tile__num { font-size: clamp(1rem, 4vw, 1.25rem); }
  .is-band .cat-tile__label { font-size: clamp(0.875rem, 3.6vw, 1.0625rem); }
  /* 矢印は場所を取るわりに要らないので、この幅では出さない */
  .is-band .cat-tile__arrow { display: none; }
}

/* ================================================================
   フッターの2つめの型（?footer=b）
   メニューを前に出し、お問い合わせを横長の枠で見せる
   ================================================================ */
.ft-b {
  /* 左右の端は本文とそろえる */
  max-width: calc(var(--page-max) + var(--wrap-x) * 2);
  margin-inline: auto;
  padding-inline: var(--wrap-x);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------- サイト名と、各コンテンツへの入口 */
.ft-b__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 4vw, 3.625rem);
  border-top: 1px solid rgba(var(--ink-rgb), .5);
}
.ft-b__brand {
  font-family: var(--font-condensed);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.ft-b__nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem 1.5rem;
}
.ft-b__nav a {
  font-family: var(--font-condensed);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: opacity .2s;
}
.ft-b__nav a:hover { opacity: .55; }

/* --------------------------------------------------- お問い合わせ */
.ft-b__contact { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ft-b__lead {
  max-width: 34rem;
  font-size: 0.9375rem; line-height: 1.9;
  color: var(--ink);
}
.ft-b__cta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 1.25rem;
  padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid rgba(var(--ink-rgb), .5);
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s;
}
.ft-b__cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ft-b__cta-text { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ft-b__cta-en {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
}
.ft-b__cta-ja { font-size: 0.9375rem; letter-spacing: 0.04em; }
.ft-b__cta-arrow {
  position: relative; flex-shrink: 0;
  margin-left: auto;
  width: 3rem; height: 1px;
  background: currentColor;
  transition: width .25s;
}
.ft-b__cta-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.ft-b__cta:hover .ft-b__cta-arrow { width: 4rem; }

/* --------------------------------------------------------- SNSと著作権 */
.social--ftb {
  justify-content: center;
  gap: 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.ft-b__bottom {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(var(--ink-rgb), .25);
  font-size: 0.8125rem;
  color: var(--ink);
}

@media (max-width: 760px) {
  .ft-b__top { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .ft-b__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  /* 矢印は場所を取るので、いちばん狭い画面では短くする */
  .ft-b__cta { gap: 0.75rem; padding-inline: 1.125rem; }
  .ft-b__cta-arrow { width: 2rem; }
}

/* ------------------ TASHINAMI：テーマが扱うもの（食・ワイン…） */
.ts__topics {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.02em;
  opacity: .7;
}
/* 一覧では、扱うものの下に説明が続くので間を詰める */
.ts__topics + .ts__lead { margin-top: 0.75rem; }

.ts-topics {
  margin-top: 0.75rem;
  font-size: 0.875rem; line-height: 1.8; letter-spacing: 0.02em;
  color: var(--ink-sub);
}

/* 6テーマになったので、広い画面では横3つ×縦2つで収まる */
@media (min-width: 1181px) {
  .ts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------ TASHINAMI：テーマの並び（スマホ・v2） */
/* 6つが縦一列だと見渡せないので、横2つ×縦3つに収める。
   狭い枠に説明文まで入れると読みづらいので、そこでは
   「何を扱うか」までを見せ、説明はテーマのページで読んでもらう */
@media (max-width: 560px) {
  .ts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 扱うものの行数が違っても、枠の高さは揃える */
    grid-auto-rows: 1fr;
    gap: 0.625rem;
  }
  .ts {
    min-height: 0;
    padding: 0.875rem 0.875rem 1rem;
  }
  .ts__no { font-size: clamp(1rem, 4vw, 1.25rem); }
  .ts__label { font-size: clamp(0.9375rem, 3.8vw, 1.125rem); }
  .ts__en { margin-top: 0.375rem; font-size: 0.625rem; letter-spacing: 0.12em; }
  .ts__topics { margin-top: 0.5rem; font-size: 0.6875rem; line-height: 1.65; }
  .ts__lead { display: none; }
  .ts__arrow { display: none; }
}

/* 文章が長いと、height:100% と aspect-ratio が噛み合って
   写真の「横幅」まで伸び、本文に重なってしまう。
   横幅は列に合わせ、高さは比率で決めて、上に揃える。
   1列に戻る幅では、写真を中央に置く指定が別にあるのでそちらに任せる */
.pf-intro { align-items: start; }
@media (min-width: 861px) {
  .pf-intro__photo { width: 100%; height: auto; }
}

/* 引用元と ALSO が両方あるときは、間を空ける（v2） */

/* ============================================================
   コーナーの入口に置く一文（v2）
   明朝の大きな字と、細い罫線・囲みで組む。
   飾りではなく、文の中で話が移るところを目に見えるようにするため。
   ============================================================ */
.lt-art {
  position: relative;
  margin-top: clamp(2rem, 4.5vw, 4rem);
  padding-block: clamp(1rem, 2.5vw, 2.5rem);
}

/* 左上に小さく置く欧文。字の塊に入る前の助走 */
.lt-art__en {
  position: relative;
  padding-left: 1rem;
  margin-bottom: clamp(1rem, 2.2vw, 1.75rem);
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.22em;
  color: var(--ink-sub);
}
/* 欧文の左に立てる細い縦線 */
.lt-art__en::before {
  content: "";
  position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
  width: 1px;
  background: rgba(var(--ink-rgb), .45);
}

/* 右端に縦で置く欧文 */
.lt-art__side {
  position: absolute; top: 0; right: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  pointer-events: none;
}

/* ------------------------------------------------ 一文そのもの */
.lede-title {
  position: relative;
  max-width: 52rem;
  font-family: var(--font-mincho);
  font-weight: 600;
  /* かたまりごとに大きさが変わるので、行の間はここでまとめて決める */
  font-size: clamp(1.0625rem, 1.7vw, 1.5rem);
  line-height: 2.6;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ひとかたまり。大きさが混ざっても字の足元が揃うようにする */
.lt { display: inline; vertical-align: baseline; }

/* いちばん大きく。文の着地点を1文字だけ */
.lt--hero {
  font-size: 3.4em;
  font-weight: 600;
  letter-spacing: 0;
}

/* 大きく。文の起点 */
.lt--xl {
  font-size: 2.3em;
  letter-spacing: -0.01em;
}

/* 少し大きく。起点の「仕事」に近い重さを持たせる */
.lt--lg { font-size: 1.75em; }

/* 小さく、少し引いた色で */
.lt--sm {
  font-size: 0.78em;
  color: var(--ink-sub);
}

/* うしろに四角い囲みを敷く。hero と組で使う */
.lt--frame {
  position: relative;
  display: inline-block;
  /* 行の高さをそのまま持つと、囲みが上下に間延びする。字の高さに合わせる */
  line-height: 1;
  z-index: 0;
  /* 囲みは字より右にはみ出す。続く文字がその上に重ならないよう、同じ分だけ空ける */
  margin-right: 0.34em;
}
/* 字よりひとまわり大きい四角を、右下にずらして重ねる。
   中にはうっすら斜線を敷いて、面として見えるようにする */
.lt--frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.20em; right: -0.34em;
  top: -0.06em; bottom: -0.10em;
  border: 1px solid rgba(var(--ink-rgb), .45);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(var(--ink-rgb), .10) 0 1px,
    transparent 1px 8px
  );
}

/* 一文の下に引く長い罫線 */
.lt-art__rule {
  display: block;
  max-width: 30rem;
  height: 1px;
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  background: rgba(var(--ink-rgb), .4);
}

/* 見出しのすぐ下に本文が来るときは、間を詰める */
.lt-art + .lede { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* 入口の一文の下に置く記事。罫線とのあいだを空ける */
.tile-grid--picks { margin-top: clamp(2rem, 4vw, 3rem); }
/* 記事がまだ無いあいだの「準備中」の枠。写真のところは NO IMAGE と同じ灰色になる */
.tile--soon { cursor: default; }
.tile--soon .tile__title { color: rgba(var(--ink-rgb), .34); font-weight: 500; }
/* そのあとに本文が続くときの間 */
.tile-grid--picks + .lede { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ------------------------------------------------ 幅が狭いとき */
@media (max-width: 900px) {
  /* 縦の欧文は、字と重なるので出さない */
  .lt-art__side { display: none; }
  .lede-title { line-height: 2.4; }
  .lt--hero { font-size: 2.8em; }
  .lt--xl { font-size: 2em; }
}

@media (max-width: 560px) {
  .lede-title { line-height: 2.2; letter-spacing: 0.02em; }
  .lt--hero { font-size: 2.3em; }
  .lt--xl { font-size: 1.7em; }
  .lt--lg { font-size: 1.45em; }
  .lt-art__en { font-size: 0.625rem; letter-spacing: 0.16em; }
  .lt-art__rule { max-width: 12rem; }
}

/* -------------------- コーナーの入口に置く一文（画像で用意したとき） */
.lede-img {
  margin-top: clamp(2rem, 4.5vw, 4rem);
}
.lede-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* 幅が狭いと字が小さくなりすぎるので、黒い帯の端まで広げる */
@media (max-width: 900px) {
  .lede-img { margin-inline: calc(-1 * var(--wrap-x)); }
}
/* 画像のすぐ下に本文が来るときの間 */
.lede-img + .lede { margin-top: clamp(1.75rem, 3.5vw, 3rem); }

/* -------------------- view more：スマホでは少し小さくする（v2） */
/* 線の長さがパソコンのままだと、画面の半分ほどを横切って目立ちすぎる */
@media (max-width: 560px) {
  .btn-view { width: min(100%, 11rem); }
  .btn-view__label { font-size: 0.9375rem; }
  /* 記事の下に置く「元記事はこちら」は、文が長いので広いままにする */
  .btn-view--wide { width: 100%; }
}

/* 記事はいつでも本文が真ん中に来るので、右の欄の有無で組み方は変えない。
   （--solo は、2列で組んでいた頃の名残。いまは何もしない） */

/* スマホでは、本文を少し小さくして行間も詰める。
   そのままの大きさだと1文が何度も折り返して、かえって読みにくい。

   記事ページ（.art-body）は、ここで小さくするのをやめた（2026-09-18、本人の希望）。
   15px は長い記事を読み続けるには小さく、段落の間（26px）も広かった。
   いまは幅によらず 17〜18px・行送り1.9・段落の間 1.25em で通している。
   日記（.nk-entry__body）は1回が短いので、これまでのままにしておく */
@media (max-width: 640px) {
  .nk-entry__body p,
  .nk-entry__body li {
    font-size: 0.9375rem;
    line-height: 1.9;
  }
  .nk-entry__body p + p { margin-top: 1.5rem; }
}

/* ------------------------------------------------ ラジオの回の再生機 */
.radio {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(var(--ink-rgb), .35);
}
.radio__head { display: flex; align-items: baseline; gap: 1rem; }
.radio__en, .radio__ep {
  font-family: var(--font-condensed);
  font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.18em;
  color: var(--ink);
}
.radio__ep { color: var(--ink-sub); }

.radio__row { display: flex; align-items: center; gap: 1.125rem; margin-top: 1rem; }
.radio__toggle {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--ink);
  transition: opacity .2s;
}
.radio__toggle:hover { opacity: .8; }
.radio__icon { width: 1.25rem; height: 1.25rem; fill: #fff; }
.radio__icon--pause { display: none; }
.radio.is-playing .radio__icon--play { display: none; }
.radio.is-playing .radio__icon--pause { display: block; }

.radio__body { flex: 1; min-width: 0; }
.radio__title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

.radio__seek {
  position: relative;
  height: 4px; margin-top: 0.75rem;
  background: rgba(var(--ink-rgb), .18);
  cursor: pointer;
}
.radio__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); }

.radio__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: 0.625rem;
  font-size: 0.75rem; color: var(--ink-sub);
}
.radio__time { font-family: var(--font-condensed); letter-spacing: 0.04em; }
.radio__state { color: var(--ink); }
.radio__rates { display: flex; gap: 0.375rem; margin-left: auto; }
.radio__rate {
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(var(--ink-rgb), .25);
  font-size: 0.6875rem; color: var(--ink-sub);
  transition: all .2s;
}
.radio__rate.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.radio__note { margin-top: 0.875rem; font-size: 0.75rem; color: var(--ink-sub); }

/* ================================================================
   本文の中に置く図
   画像と、その横に並ぶ文章。管理画面の「画像」から差し込まれる。
   ================================================================ */
.fig { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
/* 図のあとに本文が続くときも、同じだけ空ける */
.art-body .fig + p,
.art-body .fig + ul,
.art-body .fig + blockquote { margin-top: clamp(2rem, 3.2vw, 2.75rem); }

.fig__media { margin: 0; }                 /* figure の既定の余白を消す */
.fig__media img { width: 100%; height: auto; background: var(--media-bg); }

/* 押したら大きく見せる。ボタンだが、見た目は画像そのもの */
.fig__zoom, .fig__link {
  display: block; width: 100%; padding: 0;
  border: 0; background: none;
}
.fig__zoom { cursor: zoom-in; }
.fig__zoom:focus-visible, .fig__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.fig__cap { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.8; color: var(--ink-sub); }
/* 記事の中の写真の説明は、本文よりはっきり小さく・弱く。ただし読める濃さは残す */
.art-body .fig__cap { font-size: 0.78125rem; color: var(--art-muted); }
.fig__text > p:first-child { margin-top: 0; }

/* 画像の幅（割） */
.fig--w3 { --fig-w: 30%; }
.fig--w4 { --fig-w: 40%; }
.fig--w5 { --fig-w: 50%; }

/* 切り抜く形と、残すところ */
.fig--r16x9 .fig__media img { aspect-ratio: 16 / 9; object-fit: cover; }
.fig--r4x3  .fig__media img { aspect-ratio: 4 / 3;  object-fit: cover; }
.fig--r1x1  .fig__media img { aspect-ratio: 1 / 1;  object-fit: cover; }
.fig--focus-top    .fig__media img { object-position: 50% 15%; }
.fig--focus-bottom .fig__media img { object-position: 50% 85%; }

/* 中央に寄せて、幅をしぼる */
.fig--center .fig__media { width: 70%; margin-inline: auto; }
.fig--center .fig__cap { text-align: center; }

/* 2枚ならべる */
.fig--pair .fig__media {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.fig--pair .fig__cap { grid-column: 1 / -1; }

/* 横に並べる（文章が回り込まない） */
.fig--cols { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.fig--cols.fig--left  { grid-template-columns: var(--fig-w, 40%) minmax(0, 1fr); }
.fig--cols.fig--right { grid-template-columns: minmax(0, 1fr) var(--fig-w, 40%); }
.fig--cols.fig--right .fig__media { grid-column: 2; grid-row: 1; }
.fig--cols.fig--right .fig__text  { grid-column: 1; grid-row: 1; }

/* 横に並べる（文章が画像の下まで回り込む） */
.fig--wrap { overflow: hidden; }           /* 回り込みをここで止める */
.fig--wrap .fig__media { width: var(--fig-w, 40%); }
.fig--wrap.fig--left  .fig__media { float: left;  margin: 0.35em clamp(1.5rem, 3vw, 2.25rem) 1.25rem 0; }
.fig--wrap.fig--right .fig__media { float: right; margin: 0.35em 0 1.25rem clamp(1.5rem, 3vw, 2.25rem); }

/* 幅が狭いときは、どれも縦に積む */
@media (max-width: 780px) {
  .fig--cols { grid-template-columns: minmax(0, 1fr); }
  .fig--cols .fig__media,
  .fig--cols .fig__text { grid-column: 1; grid-row: auto; }
  /* 回り込みを外すところ。
     打ち消す相手が .fig--wrap.fig--left / .fig--right（クラス3つ）なので、
     こちらもクラス3つで書かないと詳細度で負けて float が残る。
     @media は詳細度を上げてくれない（2026-09-24 に気づいて直した） */
  .fig--wrap {
    display: flex; flex-direction: column;
    gap: 1.25rem;
    overflow: visible;        /* 回り込みを止めるための hidden を戻す */
  }
  .fig--wrap.fig--left .fig__media,
  .fig--wrap.fig--right .fig__media { float: none; width: 100%; margin: 0; }
  .fig--wrap .fig__text { width: 100%; }

  /* 縦に積むときの並び順は、広い画面での読む順をそのまま倒す
     （2026-09-24、本人の希望）。
       pos=right（文章が左・写真が右）… 文章を読んでから写真 → 写真は下
       pos=left （写真が左・文章が右）… 写真を見てから文章   → 写真は上
     横組みでは文章のほうが先に目に入るので、縦にしたときだけ
     写真が文章の上に飛び出すと、読む順が入れ替わってしまう。
     order=text と書いてあれば、置き方に関わらず文章が先 */
  .fig--cols.fig--right .fig__media,
  .fig--wrap.fig--right .fig__media,
  .fig--cols.fig--text-first .fig__media,
  .fig--wrap.fig--text-first .fig__media { order: 2; }
  .fig--center .fig__media { width: 100%; }

  /* 縦に積んだ写真が、画面のほとんどを占めないようにする（2026-09-24、本人の希望）。
     縦長の写真は、幅を100%にすると高さが画面の6割を超えて、
     文章を読んでいる途中で画面が一度写真だけになってしまう。

     やっているのは2つ。
       1. 高さの上限を決める。切り抜かず、比率はそのままに縮める
       2. width を auto にして、元の写真より大きく引き伸ばさない。
          小さい写真を無理に広げると、画面が細かいぶん粗さがはっきり出る
     結果として横に余りが出るので、写真も説明文も真ん中に置く。
     2枚ならべ（pos=pair）は、2枚で1つの絵なのでここから外す */
  .art-body .fig:not(.fig--pair) .fig__media img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 58vh;
    margin-inline: auto;
  }
  .art-body .fig:not(.fig--pair) .fig__cap { text-align: center; }
}

/* 図の前後の空き。章の変わり目（52〜72px）より狭くして、
   写真をまたいでも同じ章を読み続けているとわかるようにする */
.art-body > .fig { margin-top: clamp(2rem, 3.2vw, 2.75rem); }

/* ---------------------------------------------- 押して大きく見たとき */
.zoom {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(var(--ink-rgb), .92);
}
.zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.zoom__x {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  background: none; color: #fff;
  font-size: 1.125rem; line-height: 1;
  cursor: pointer;
}
.zoom__x:hover { background: rgba(255, 255, 255, .12); }
.zoom__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ================================================================
   オープニング（トップページ）

   8秒の映像をページの上に重ねる。終わると重なりが消え、
   その下にすでに出来ているトップページが現れる。移動は起きない。

   言葉は、映像の「まだ描かれていないところ」に置く。
     0.7〜2.8秒  左3分の1だけ描かれている → 右の余白へ
     2.7〜5.2秒  上半分だけ描かれている   → 下の余白へ
     5.2秒〜     絵が埋まる               → 生成りの薄い膜を敷いてから

   文字は白ではなく濃紺。この映像は生成り地に黒い線なので、
   黒い膜を重ねると絵そのものが灰色に濁ってしまう。
   ================================================================ */

/* 映像の地の色。映像側の白色点を補正して純白に焼き直してあるので、
   余白もこの白でそろえる。少しでもずれると、縦画面の上下で額縁が見えてしまう */
.opening { --film: #ffffff; }

/* オープニング中はページを動かさない */
.is-opening, .is-opening body { overflow: hidden; }

.opening {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--film);
  opacity: 1;
  /* 終わりは急がない。ゆっくり薄れて、下のトップページが現れる */
  transition: opacity 1.2s ease;
}
.opening.is-done { opacity: 0; pointer-events: none; }

.opening__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--film);
}

/* 文字の背後にだけ敷く、生成りの薄い膜。
   画面いっぱいに広げると映像そのものが色褪せてしまうので、
   中央の文字が乗る大きさに限る。外側の街並みには一切かけない */
.opening__veil {
  position: absolute;
  left: 50%; top: 52%;
  width: min(58rem, 76vw);
  height: min(26rem, 40vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side ellipse,
              rgba(255, 255, 255, .92) 0%,
              rgba(255, 255, 255, .70) 55%,
              rgba(255, 255, 255, 0) 100%);
  opacity: 0;
}

.opening__stage { position: absolute; inset: 0; }

.opening__copy,
.opening__peak,
.opening__logo {
  position: absolute;
  margin: 0;
  color: var(--ink);
  opacity: 0;
}

/* 前半の2つは「広告コピー」ではなく、映像の横に置かれた短い文章。
   必要以上に大きくしない */
.opening__copy {
  /* 明朝。記事の冒頭に置く一文（.lede-title）と同じ書体にそろえる。
     このサイトでは「立ち止まって読ませる一文」はすでに明朝なので、
     オープニングだけゴシックだと、そこだけ別の声で喋っているように見える。
     読み込んである明朝は太さ600がいちばん細い。小さい字だと横線が細く、
     いままでのゴシック500より弱く見えるので、そのぶんだけ字を大きくして補う */
  font-family: var(--font-mincho);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  /* 行間は広いほど静かに読めるが、広げるほど文章が縦に伸び、
     まだ絵が描かれていない帯から先頭行がはみ出す。2.0 がその境目 */
  line-height: 2.0;
  letter-spacing: 0.05em;
  /* 画面の縦横比によって映像の切り取られ方が変わり、安全な帯も動く。
     どの比率でも読めるよう、ごく淡い白い光を保険として回しておく */
  text-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 3px rgba(255, 255, 255, .85);
}

/* 文章の後ろに敷く、柔らかい白い膜。
   絵は時間とともに全面を埋めるので、白い場所を探して置くやり方では
   4行を読むだけの時間が取れない（実測で上限 5.5秒）。
   手書きの「知性に、遊びを」と同じように、文字の後ろだけを白く抜いて支える。
   縁をぼかしてあるので、四角い板が乗っているようには見えない */
.opening__copy::before {
  content: "";
  position: absolute;
  inset: -2.2em -3.4em;
  z-index: -1;
  /* 映像の終盤は群衆で真っ黒になる。中心は白で覆い切り、
     外へ向けてゆっくり抜く。中途半端な濃さだと人影が透けて読めない */
  background: radial-gradient(closest-side ellipse,
              rgba(255, 255, 255, 1)   0%,
              rgba(255, 255, 255, 1)   52%,
              rgba(255, 255, 255, .90) 70%,
              rgba(255, 255, 255, .50) 85%,
              rgba(255, 255, 255, 0)   100%);
}

/* 置き場所は、表示している「あいだずっと」白いところに限る。
   絵は上から下へ描かれていくので、出はじめに空いていても、
   消えるころには塞がっていることがある。
   各コマを格子に分けて数えたところ、期間を通して確実に白いのは
   コピー1が下38%の帯、コピー2が左下と右下の角だった。
   両方に共通する左下へ、2つとも置く。読む位置が動かないほうが、
   広告のように切り替わって見えず、一つの文章として読める */
/* はじめの一文は、映像が始まる前の白い画面に置く。
   まだ絵が無いので、画面の真ん中でひとつの文章として読ませる */
.opening__copy--1 { top: 38%; left: 12%; right: 12%; text-align: center; }

/* 残りは描かれていく絵の上。3つとも同じ場所に置く。
   読む位置が動かないほうが、広告のように切り替わって見えず、
   一続きの文章として読める */
.opening__copy--2,
.opening__copy--3,
.opening__copy--4 { bottom: 12%; left: 9%; text-align: left; }


/* --------------------------------------------- 飛ばすための案内 */
/* 画面のどこを押しても、ESCでも終われるのは前から同じ。
   ただし、それを知らせる場所がどこにも無かった。
   急いでいる人に逃げ場が見えないのは不親切なので、右下に小さく置く。
   文章は左下に出るので、ぶつからない。

   背景に白い小さな板を敷く。終盤の映像は右下が群衆で暗くなるため、
   文字だけを置くと沈んで読めなくなる。
   色は薄めない。透明度を下げると明暗の差が足りなくなり、
   押せる部品として成り立たなくなる。小ささと字間の広さで静けさを出す */
.opening__skip {
  position: absolute;
  right: clamp(1rem, 3vw, 2.75rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  /* 言葉を置く面（.opening__stage）は画面全体を覆っているので、
     重ねる順を上げておかないと押せない */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55rem 1.05rem;
  appearance: none;
  border: 0;
  border-radius: 2rem;
  /* 板は透かさず、白で塗り切る。
     0.8 で透かしていたときは、後ろが群衆だと板そのものが rgb(230,230,230) まで
     沈み、文字との明暗の差が 3.77:1 に落ちていた（読めるとされる境目は 4.5:1）。
     0.95 まで上げる手もあるが、それでも 4.52:1 で、ぎりぎり超えるだけ。
     塗り切ってしまえば後ろが何であっても 4.70:1 で動かない。
     あとで映像を差し替えても崩れない、という意味でもこちらが確実 */
  background: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .3s ease;
}

/* 触れたとき・キーボードで来たときは、字をいちばん濃い色まで引き上げる */
.opening__skip:hover,
.opening__skip:focus-visible {
  color: var(--ink);
}

.opening__skip:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* 手書きとロゴが出る最後の場面では、案内を引く。
   ブランドの言葉の横に「スキップ」が残るのは見苦しい。
   このあいだも、画面を押せば終われるのは変わらない。

   ただし動きを控える設定のときは、はじめから is-outro が付く作りなので、
   同じ扱いにすると案内が一度も見えなくなる。そのときだけは消さない */
.opening.is-outro:not(.is-still) .opening__skip,
.opening.is-done .opening__skip {
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}


/* ここがいちばん残ってほしい言葉。一段大きく、真ん中に */
.opening__peak {
  top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.opening__peak img {
  width: clamp(14rem, 34vw, 31rem);
  height: auto;
  /* 手書きの線は細く、描き込まれた街並みの上では負けてしまう。
     映像を暗くする代わりに、地と同じ白い光を文字のまわりに回して浮かせる */
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .95))
          drop-shadow(0 0 5px rgba(255, 255, 255, .9));
}

/* 最後に出て、そのままヘッダーのロゴの位置へ向かって静かに縮む */
.opening__logo {
  top: 62%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
.opening__logo img {
  width: clamp(9rem, 21vw, 19rem);
  height: auto;
  /* ロゴは太くて元から読めるので、光は手書きより控えめに */
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .85));
}

/* ------------------------------------------- 前半（映像が流れているあいだ） */
/* 同じ場所に置くので、2つが同時に見えている時間をなくす */
/* 読む時間を最優先する。
   後ろに白い膜を敷いたので、絵が埋まったあとも置いておける。
   4行あるほうに時間を多く渡し、映像が終わる手前まで使う */
/* 1つめは白い画面の上だけで読ませ、読み終わるころに絵が描き始める。
   2つめ以降は 0.8倍で流れる映像（8秒→10秒）に合わせて置く */
.opening.is-playing .opening__copy--1 { animation: op-copy 3.2s ease 0.5s  both; }
.opening.is-playing .opening__copy--2 { animation: op-copy 3.0s ease 4.0s  both; }
.opening.is-playing .opening__copy--3 { animation: op-copy 3.0s ease 7.1s  both; }
.opening.is-playing .opening__copy--4 { animation: op-copy 3.6s ease 10.2s both; }

/* --------------------------------------------- 後半（絵が描き終わってから） */
/* 起点は「再生開始から◯秒」ではなく、映像が終わった瞬間（app.js が is-outro を付ける）。
   固定の時計で動かすと、読み込みが遅れた端末では
   絵が描き終わる前にロゴが出てしまうため。
   まず少しのあいだ、描き終わった絵をそのまま見せる */
.opening.is-outro .opening__veil { animation: op-in   0.9s ease 1.3s both; }
.opening.is-outro .opening__peak { animation: op-rise 1.3s cubic-bezier(.2,.6,.3,1) 1.6s both; }
.opening.is-outro .opening__logo { animation: op-rise 1.1s cubic-bezier(.2,.6,.3,1) 2.9s both; }

/* 出て、しばらく置いて、引く */
/* 出入りは短く、見えている時間を長く取る。
   読むための時間なので、消える動きに尺を使わない */
@keyframes op-copy {
  0%   { opacity: 0; transform: translateY(0.6rem); }
  15%  { opacity: 1; transform: none; }
  85%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-0.4rem); }
}
/* 出たら、最後まで残す */
@keyframes op-rise {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 0.9rem)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes op-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 終わりぎわ。ロゴがヘッダーのロゴの位置へ向かって縮んでいく。
   その下に本物のヘッダーが同じ真ん中ぞろえで待っているので、収まって見える */
.opening.is-done .opening__logo {
  transform: translate(-50%, -50%) translateY(-26vh) scale(.42);
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
.opening.is-done .opening__peak,
.opening.is-done .opening__veil { opacity: 0; transition: opacity .8s ease; }

/* ------------------------------------------- 縦長の画面（スマホ） */
/* 3:2 の映像を縦画面で cover にすると横の7割が切り落とされ、
   絵がほとんど見えなくなる。線画なので全体を出し、
   余った上下は映像と同じ地の色で埋める（境目は見えない） */
@media (orientation: portrait) {
  .opening__video { object-fit: contain; }

  /* PC の縮小版にはしない。置き場所も改行も別に決める */
  .opening__copy {
    left: 7%; right: 7%;
    /* 横画面と同じ理由で、明朝の細さを補うぶんだけ大きくする */
    font-size: clamp(0.9375rem, 4.1vw, 1.125rem);
    line-height: 2.05;
    text-align: center;
  }
  /* 縦画面は contain なので上下に白い余白ができる。
     そこへ置けば、絵の描かれ具合によらず常に読める */
  /* はじめの一文は、縦画面でも白い画面の真ん中に置く */
  .opening__copy--1 { top: 34%; bottom: auto; left: 7%; right: 7%; }
  /* 残りは白い余白（映像の帯の下）に置く。3つとも同じ位置 */
  .opening__copy--2,
  .opening__copy--3,
  .opening__copy--4 { top: auto; bottom: 15%; left: 7%; right: 7%; }
  .opening__peak  { top: 46%; }
  .opening__peak img { width: min(78vw, 22rem); }
  .opening__logo { top: 61%; }
  .opening__logo img { width: min(56vw, 16rem); }
  .opening.is-done .opening__logo {
    transform: translate(-50%, -50%) translateY(-30vh) scale(.5);
  }
}

/* --------------------------------- 動きを控える設定のとき */
/* 映像は流さず、描き終わった絵を静止画で出して短く終える。
   この静止画（210KB）は、この設定の人だけが読み込む */
@media (prefers-reduced-motion: reduce) {
  .opening.is-still .opening__video { display: none; }
  .opening.is-still {
    background: var(--film) url('/assets/video/opening-still.webp') center / cover no-repeat;
  }
  /* 順に出さず、最初からすべて見えている状態にする。
     後半は is-outro に移したので、そちらも打ち消す */
  .opening.is-playing .opening__copy--1,
  .opening.is-playing .opening__copy--2,
  .opening.is-outro .opening__veil,
  .opening.is-outro .opening__peak,
  .opening.is-outro .opening__logo { animation: none; opacity: 1; }
  .opening.is-outro .opening__peak,
  .opening.is-outro .opening__logo { transform: translate(-50%, -50%); }
  .opening.is-done .opening__logo { transition: none; }
  /* 言葉が重ならないよう、前半の2つは出さない（静止画では読む間がないため） */
  .opening.is-still .opening__copy { display: none; }
}

/* ================================================================
   LIFESTYLE（入口は /lifestyle、区画のページは /lifestyle/...）
   仕事の外へ出るための章。中に TASHINAMI・MACHI・KYUJITSU の3つの区画を持つ。
   2026-09-15 に、本人の希望で入口をほかの章と同じ組み方にそろえた。
     扉 … partials/chapter-hero（線は淡いピンク）
     区画 … 英字の見出し＋一言、記事のサムネイル（.sc）、VIEW の一言
   区画のページ・テーマのページは、ここにある見出し（.lf-head）と一言・リード（.lf-sec__*）を使う
   ================================================================ */

/* ------------------------------------------------------------ 扉の線 */
/* LIFESTYLE の線。淡いピンクで、同じ濃さのまま、章名の後ろをゆっくり渡る。
   KIZASHI（濃さが上がっていく、兆しの線）とは違い、出かけていく線として引く */
.ch-line--lifestyle .ch-line__path {
  stroke: var(--pink);
  stroke-width: 2;
  animation: ch-line-draw 2s cubic-bezier(.3, .5, .25, 1) .6s both;
}
/* リードが3段落あって扉が縦に長いので、KOKOROMI と同じく扉の上端を基準に線を置く */
.ch-hero--lifestyle .ch-line--pc { top: -4.5rem; transform: none; }
.ch-hero--lifestyle .ch-hero__lead { max-width: 32em; }

/* ------------------------------------------------------------ 入口の区画 */
/* スマホでは、区画のサムネイルを1枚ずつ縦に積む（BUSINESS の一覧と同じ） */
@media (max-width: 640px) {
  .sc-grid--stack { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* 6つのテーマ。入口では小さな1行のリンクに留める（並べて見せるのは TASHINAMI のページ） */
.lf-themes {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1.25rem;
  max-width: 30em;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--ink-rgb), .16);
}
.lf-themes__head {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
.lf-themes__list { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; list-style: none; margin: 0; padding: 0; }
.lf-themes__list a {
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(var(--ink-rgb), .25);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.lf-themes__list a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* 区画の終わりの一言（VIEW TASHINAMI など）。矢印は細い線で */
.lf-go { margin-top: clamp(2rem, 4vw, 2.75rem); }
.lf-go a {
  display: inline-flex; align-items: center; gap: 0.875rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: color .2s, border-color .2s;
}
.lf-go a:hover { color: var(--blue); border-color: var(--blue); }
.lf-go__arrow { position: relative; width: 1.75rem; height: 1px; background: currentColor; transition: width .25s; }
.lf-go__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 0.45rem; height: 1px; background: currentColor;
  transform-origin: right center; transform: rotate(35deg);
}
.lf-go a:hover .lf-go__arrow { width: 2.5rem; }

/* ------------------------------------------- 区画のページの見出し */
/* 区画の見出し。番号・名前・扱うもの */
.lf-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.875rem, 2.2vw, 1.75rem);
  align-items: baseline;
}
.lf-head__no {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  color: var(--ink-sub);
  font-variant-numeric: lining-nums;
}
.lf-head__title {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(2.5rem, 7.4vw, 6rem);
  line-height: .95;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.lf-head__label {
  grid-column: 2;
  margin-top: 0.875rem;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
.lf-head__label::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: clamp(1.25rem, 2.6vw, 2rem); height: 1px;
  margin-right: 0.9em;
  background: rgba(var(--ink-rgb), .35);
}
/* 歩きはじめる場所（MACHI）。地図の余白に書き込む程度の小ささで */
.lf-head__place {
  grid-column: 2;
  margin-top: 0.5rem;
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.8;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
.lf-head__place span { display: block; }
@media (min-width: 900px) {
  .lf-head--place { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lf-head--place .lf-head__place {
    grid-column: 3; grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    text-align: right;
  }
}

.lf-sec__tagline {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
.lf-sec__lead {
  max-width: 30em;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.9375rem;
  line-height: 2.05;
  color: var(--ink-sub);
}
.lf-sec__lead p + p { margin-top: 1em; }

/* ------------------------------------------------------------ 結び */
.lf-close { margin-top: clamp(4.5rem, 10vw, 8.5rem); padding-left: 4%; }
.lf-close__main {
  font-size: clamp(1.25rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}
/* 読点の切れ目でだけ折り返す */
.lf-close__main span { display: inline-block; }
.lf-close__sub {
  display: flex; flex-wrap: wrap;
  gap: 0.25rem 1.25em;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* ---------------------------------- 区画のページ（/lifestyle/...）・テーマのページ */
.lf-page { margin-top: clamp(2rem, 4.5vw, 3.5rem); padding-left: 4%; }
.lf-page .lf-sec__tagline { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.lf-page__themes-head { margin-top: clamp(3rem, 6vw, 4.5rem); }
.lf-page .ts-topics + .lf-sec__lead { margin-top: 1.25rem; }
.lf-page__themes.ts-grid { margin-top: 0; }
.lf-empty { font-size: 0.9375rem; color: var(--ink-mute); }
.lf-back { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.lf-theme__eyebrow {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}
.lf-theme__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

/* ------------------------------------------------------------ スマホ */
@media (max-width: 640px) {
  .lf-close,
  .lf-page { padding-left: 0; }
}

/* 動きを控える設定のときは、最初から描き終わった状態で出す */
@media (prefers-reduced-motion: reduce) {
  .ch-line--lifestyle .ch-line__path { animation: none; }
}

/* ================================================================
   PILOT（/pilot、/pilot/{slug}。2026-09-15 に FEATURE から改名。クラス名は ft- のまま）
   新しい編集企画を試す場所。ほかの章と同じ文字・色・罫線・余白で組み、
   特別さは色ではなく、番号の大きさ・表紙の形・組み方で出す。
   おすすめ記事の一覧に見せないため、カードを格子に並べない
   ================================================================ */

/* ------------------------------------------------------------ 扉 */
/* 一本の線が扉を囲もうとして、最後の角だけ閉じない。
   線は扉の箱いっぱいに伸び縮みするので、文字は線の内側に余白を取って置く */
.ft-hero {
  position: relative;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  /* 上下は詰めてある。1440×900 の画面で、線の下の辺まで最初の画面に入るように */
  padding: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 6vw, 5.5rem) clamp(3rem, 5.5vw, 4.25rem);
}
.ft-hero .ch-line {
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: none;
}
.ft-hero__inner { position: relative; z-index: 1; }

.ft-hero__eyebrow {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--ink);
  animation: ch-rise .7s ease-out both;
}
.ft-hero__title {
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(3.25rem, 12vw, 10.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--ink);
  animation: ch-rise .8s ease-out .12s both;
}
.ft-hero__tagline {
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  animation: ch-rise .7s ease-out .9s both;
}
.ft-hero__lead {
  margin-top: clamp(1.25rem, 2.6vw, 2rem);
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-sub);
  animation: ch-rise .7s ease-out 1.05s both;
}
.ft-hero__lead p + p { margin-top: 0.7em; }
/* 広い画面では、一言の右にリードを並べる（扉を縦に伸ばしすぎない） */
@media (min-width: 900px) {
  .ft-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    grid-template-areas: "eyebrow eyebrow" "title title" "tagline lead";
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .ft-hero__eyebrow { grid-area: eyebrow; }
  .ft-hero__title   { grid-area: title; }
  .ft-hero__tagline { grid-area: tagline; }
  .ft-hero__lead    { grid-area: lead; padding-top: 0.4rem; }
}

/* 線は濃紺で、ほかの章より少しゆっくり一度だけ描く */
.ch-line--feature .ch-line__path {
  stroke: rgba(var(--ink-rgb), .34);
  stroke-width: 1.5;
  animation: ch-line-draw 2.6s cubic-bezier(.35, .4, .2, 1) .35s both;
}

/* ------------------------------------------------------------ 区画 */
.ft-block { margin-top: clamp(4.5rem, 10vw, 8rem); }

/* 生まれた編集領域と状態。バッジにせず、小さな英字の添え書きにする */
.ft-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-top: 0.75rem;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--ink-sub);
}
.ft-meta a { color: inherit; border-bottom: 1px solid rgba(var(--ink-rgb), .25); transition: color .2s, border-color .2s; }
.ft-meta a:hover { color: var(--blue); border-color: var(--blue); }
.ft-meta__status { color: var(--ink); white-space: nowrap; }
.ft-meta__status::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.25rem; height: 1px; margin-right: 0.6em;
  background: currentColor; opacity: .5;
}

/* PILOT と番号。号数の真似にはせず、編集の実験が積み重なっている数として大きく出す */
.ft-num { display: flex; align-items: baseline; gap: 0.875rem; }
.ft-num__label {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--ink-sub);
}
.ft-num__no {
  font-family: var(--font-serif);
  font-size: clamp(3.25rem, 7vw, 5.5rem);
  line-height: 0.9;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

/* ----------------------------------------------------- 表紙 */
/* 写真の形は企画ごとに変える（縦長・横長・寄り）。写真は切らずに枠いっぱいに置く。
   写真が無いあいだは、白地に PILOT と番号、閉じていない枠で組んだ文字の表紙 */
.ft-cover {
  position: relative;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  background: #fff;
  color: var(--ink);
}
.ft-cover--wide   { aspect-ratio: 21 / 9; }
.ft-cover--square { aspect-ratio: 1 / 1; }
.ft-cover.has-photo { background: var(--media-bg); }
.ft-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
/* 写真はごく軽く寄るだけ */
.ft-cover.has-photo:hover img { transform: scale(1.03); }

.ft-cover__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.ft-cover__frame path {
  fill: none;
  stroke: rgba(var(--ink-rgb), .3);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ft-cover__top {
  position: absolute; top: 12%; left: 12%; right: 12%;
  display: flex; flex-direction: column; gap: 0.6em;
}
.ft-cover__label {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--ink-sub);
}
/* 表紙の題名。表紙の幅に合わせて伸び縮みさせる */
.ft-cover__title {
  font-size: 7.5cqw;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.ft-cover__no {
  position: absolute; left: 11%; bottom: 10%;
  font-family: var(--font-serif);
  font-size: 34cqw;
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.ft-cover--wide .ft-cover__top   { top: 15%; left: 6%; right: 40%; }
.ft-cover--wide .ft-cover__title { font-size: 3.6cqw; }
.ft-cover--wide .ft-cover__no    { left: 5.5%; bottom: 14%; font-size: 17cqw; }

/* ------------------------------------------------- NOW TESTING */
.ft-item {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
  border-top: 1px solid rgba(var(--ink-rgb), .35);
}
.ft-item__eyebrow {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  color: var(--ink-sub);
}
/* 題名の幅を測る器。中の題名が、この幅に合わせて字を縮める */
.ft-item__head { container-type: inline-size; }
/* 題名は、1行に入りきらないときだけ字を小さくして収める（2026-09-18、本人の希望）。
   「欄の幅 ÷ 何文字ぶんか（--chars。PHP の text_width で数える）」が、1行に収まる大きさ。
   ふだんの大きさ（clamp）より小さいときだけ、そちらを使う。
   小さくなりすぎないよう下限を置き、それでも入らないときは、これまでどおり折り返す */
.ft-item__title {
  margin-top: 0.5rem;
  font-size: max(1.125rem, min(clamp(1.625rem, 3.4vw, 2.5rem), calc(100cqi / var(--chars, 12) * 0.98)));
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.ft-item__title a { color: inherit; transition: color .2s; }
.ft-item__title a:hover { color: var(--blue); }
/* 先頭の1本は Cover Story として、題名をひとまわり大きく */
.ft-item--lead .ft-item__title {
  font-size: max(1.25rem, min(clamp(2rem, 4.6vw, 3.5rem), calc(100cqi / var(--chars, 12) * 0.98)));
  line-height: 1.3;
}
.ft-item__desc {
  max-width: 30em;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  font-size: 0.9375rem;
  line-height: 2;
  color: var(--ink-sub);
}
.ft-item__desc p + p { margin-top: 0.9em; }

.ft-go { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ft-go a {
  display: inline-flex; align-items: center; gap: 0.875rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: color .2s, border-color .2s;
}
.ft-go a:hover { color: var(--blue); border-color: var(--blue); }
.ft-go__arrow { position: relative; width: 1.75rem; height: 1px; background: currentColor; transition: width .25s; }
.ft-go__arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 0.45rem; height: 1px; background: currentColor;
  transform-origin: right center; transform: rotate(35deg);
}
.ft-go a:hover .ft-go__arrow { width: 2.5rem; }

@media (min-width: 900px) {
  /* 寄り（square）… 左に表紙、右に文字 */
  .ft-item--square {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  /* 縦長（portrait）… 左に文字、右に細めの表紙。寄りの企画と左右を入れ替える */
  .ft-item--portrait {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  .ft-item--portrait .ft-cover { grid-column: 2; grid-row: 1; }
  .ft-item--portrait .ft-item__body { grid-column: 1; grid-row: 1; padding-left: 4%; }
  /* 横長（wide）… 表紙を段の幅いっぱいに、その下で題名と説明を左右に分ける */
  .ft-item--wide .ft-item__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .ft-item--wide .ft-item__desc { margin-top: 0.5rem; }
}

/* ------------------------------------------------ NOW A SERIES */
.ft-empty {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--ink-rgb), .35);
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--ink-sub);
}
.ft-series__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--ink-rgb), .35); }
.ft-series__list li { border-bottom: 1px solid rgba(var(--ink-rgb), .16); }
/* 企画だったころ（左）と、いまの連載（右）を、細い線でつなぐ */
.ft-series__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3rem, 8vw, 7rem) minmax(0, 1.4fr);
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(1.25rem, 2.6vw, 1.75rem);
  color: var(--ink);
}
.ft-series__from, .ft-series__now { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ft-series__from-no, .ft-series__label, .ft-series__ep {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}
.ft-series__from-no { color: var(--ink-mute); }
.ft-series__from-title { font-size: 0.9375rem; color: var(--ink-sub); }
.ft-series__line { position: relative; height: 1px; background: rgba(var(--ink-rgb), .45); }
.ft-series__line::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 0.5rem; height: 1px; background: rgba(var(--ink-rgb), .45);
  transform-origin: right center; transform: rotate(35deg);
}
.ft-series__label { color: var(--ink); }
.ft-series__title { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 700; line-height: 1.45; transition: color .2s; }
.ft-series__item:hover .ft-series__title { color: var(--blue); }
.ft-series__ep { color: var(--ink-sub); }

/* ---------------------------------------------- PILOT ARCHIVE */
/* 状態の意味。凡例として小さく */
.ft-legend {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.ft-legend div { display: flex; align-items: baseline; gap: 0.75em; }
.ft-legend dt {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.ft-legend dd { margin: 0; font-size: 0.8125rem; color: var(--ink-sub); }

/* 企画のバックナンバー。番号を大きく、1行ずつ積む。写真がある企画だけ右に小さく添える */
.ft-archive__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--ink-rgb), .35); }
.ft-archive__list li { border-bottom: 1px solid rgba(var(--ink-rgb), .16); }
.ft-back {
  display: grid;
  grid-template-columns: clamp(4.5rem, 10vw, 8rem) minmax(0, 1fr);
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--ink);
}
.ft-back--photo { grid-template-columns: clamp(4.5rem, 10vw, 8rem) minmax(0, 1fr) clamp(5rem, 12vw, 9rem); }
.ft-back__no {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  color: var(--ink-sub);
  font-variant-numeric: lining-nums;
  transition: color .2s;
}
.ft-back__body { display: block; min-width: 0; }
.ft-back__title {
  display: block;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-weight: 700;
  line-height: 1.5;
  transition: color .2s;
}
.ft-back .ft-meta { margin-top: 0.35rem; }
.ft-back:hover .ft-back__title,
.ft-back:hover .ft-back__no { color: var(--blue); }
.ft-back__thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--media-bg); }
.ft-back__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ft-back:hover .ft-back__thumb img { transform: scale(1.03); }

/* ---------------------------------------------- 企画1つのページ */
.ft-detail { max-width: 48rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
/* 題名の幅を測る器（企画のページ。一覧と同じ考え方で、1行に収まるまで字を縮める） */
.ft-intro { container-type: inline-size; }
.ft-intro__title {
  margin-top: clamp(1rem, 2vw, 1.375rem);
  font-size: max(1.25rem, min(clamp(2rem, 5vw, 3.5rem), calc(100cqi / var(--chars, 12) * 0.98)));
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.ft-intro__desc {
  max-width: 32em;
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  font-size: 1rem;
  line-height: 2.05;
  color: var(--ink);
}
.ft-intro__desc p + p { margin-top: 1em; }
.ft-detail__series {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  margin-top: 1.5rem;
  font-family: var(--font-nav);
  font-size: 0.75rem; letter-spacing: 0.18em;
  color: var(--ink);
}
/* 連載の名前（日本語）まで英字の字間で広げない */
.ft-detail__series [lang="ja"] { font-family: var(--font-sans); font-size: 0.8125rem; letter-spacing: 0.04em; }
/* 写真の組み方だけを企画ごとに変える。机は本文と同じ幅、街は段の幅いっぱい、手元は細く寄せる */
.ft-detail__photo { margin: clamp(2rem, 4.5vw, 3rem) 0 0; }
.ft-detail__photo img { display: block; width: 100%; height: auto; }
.ft-detail--wide { max-width: none; }
.ft-detail--wide .ft-intro,
.ft-detail--wide .ft-detail__block,
.ft-detail--wide .ft-detail__back { max-width: 48rem; }
.ft-detail--detail .ft-detail__photo { max-width: 30rem; }

.ft-detail__block { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.ft-detail__label {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.ft-detail__empty { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-sub); }
.ft-stories { list-style: none; margin: 0; padding: 0; }
.ft-stories li { border-bottom: 1px solid rgba(var(--ink-rgb), .16); }
.ft-story {
  display: grid;
  grid-template-columns: 6rem 7rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  align-items: baseline;
  padding-block: 1rem;
  color: var(--ink);
}
.ft-story__date, .ft-story__no {
  font-family: var(--font-nav);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ink-sub);
}
.ft-story__title { font-size: 0.9375rem; font-weight: 700; line-height: 1.7; transition: color .2s; }
.ft-story:hover .ft-story__title { color: var(--blue); }
.ft-detail__back { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ------------------------------------------------------------ スマホ */
/* PC の縮小版にしない。表紙 → 題名の順に縦に積み、先頭の企画は大きく、
   バックナンバーは番号を小さくして詰める */
@media (max-width: 640px) {
  /* 線と文字の間が詰まりすぎないよう、左右は広めに取る */
  .ft-hero { padding: 2.5rem 1.875rem 3rem; }
  .ft-cover--wide { aspect-ratio: 16 / 10; }
  .ft-cover--wide .ft-cover__top   { top: 12%; left: 9%; right: 9%; }
  .ft-cover--wide .ft-cover__title { font-size: 7cqw; }
  .ft-cover--wide .ft-cover__no    { left: 8%; bottom: 11%; font-size: 26cqw; }
  /* 先頭の企画のほかは、表紙を少し小さくして題名を早く見せる */
  .ft-item:not(.ft-item--lead) .ft-cover--portrait { width: 72%; }
  .ft-series__item { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .ft-series__line { width: 1px; height: 1.5rem; margin-left: 0.25rem; }
  .ft-series__line::after { display: none; }
  .ft-back { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.25rem 1rem; }
  .ft-back--photo { grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem; }
  .ft-back__no { font-size: 1.75rem; }
  .ft-story { grid-template-columns: auto minmax(0, 1fr); }
  .ft-story__title { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-line--feature .ch-line__path { animation: none; }
  .ft-hero__eyebrow,
  .ft-hero__title,
  .ft-hero__tagline,
  .ft-hero__lead { animation: none; }
}

/* ==========================================================================
   すべての記事（/blog）
   分け方はヘッダーのメニューと同じものだけ。形式・テーマの札・キーワード検索は置かない
   （札が多すぎて、何を選べばよいのか分からなかったため。2026-09-16、本人の希望）
   ========================================================================== */
.bl-nav {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-nav);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.bl-nav__item {
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  color: var(--ink-sub);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.bl-nav__item:hover { color: var(--ink); }
.bl-nav__item.is-current {
  border-bottom-color: var(--blue);
  color: var(--ink);
  font-weight: 700;
}

/* ==========================================================================
   プロジェクトの組写真（/project/○○ の上）
   横長と縦長を混ぜて、すき間なく敷き詰める。
   どの写真がどの形になるかは「並びの位置」で決めるので、写真を入れ替えても組み方は変わらない。
   5列。3枚目と5枚目が縦長（2段ぶん）、6枚目と8枚目が横長（2列ぶん）。11枚で一回りする。
   写真は枠に合わせて切る（2026-09-17、本人の希望）
   ========================================================================== */
/* 組写真とエピソードは、記事の読み幅（.kk-detail の 62rem）から外へ広げる。
   幅の基準は、ページの外枠（.kk-page）そのもの。
   画面幅（100vw）で測るとスクロールバーのぶんだけはみ出すので、そちらは使わない。
     --inner … ページの内側の幅（wrap の中身と同じ）。組写真はこの幅
     --band  … それより外まで出す帯の幅。エピソードはこの幅（2026-09-17、本人の希望で大きくした）
   記事の列は左寄せなので、帯は「内側の幅との差の半分」だけ左右へはみ出させて、中央にそろえる */
/* 幅の物差しは、プロジェクトのページ（.kk-page）と企画のページ（.ft-page）で同じものを使う */
.kk-page,
.ft-page {
  container-type: inline-size;
  /* 幅の物差しは、ここでまとめて決める（中の要素が使う）
       --inner … ページの内側の幅（wrap の中身と同じ）。組写真はこの幅
       --band  … それより外まで出す帯の幅。エピソードと、その下の入口はこの幅。
                 100vw はスクロールバーのぶんだけ実際より広いが、引いている 2.5rem（40px）の
                 ほうが太いので、はみ出さない */
  --inner: min(var(--page-max), calc(100cqw - var(--wrap-x) * 2));
  --band: min(1600px, calc(100vw - 2.5rem));
}

.kk-mosaic {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(4px, 0.6vw, 10px);
  width: var(--inner);
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* 5枚に満たないときは、すき間が出ないよう2列で組む */
.kk-mosaic--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 企画（PILOT）のページでは、組写真を帯の幅まで広げて中央に置く。
   本文の列（48rem）はプロジェクトより狭いぶん、写真は大きく見せたい
   （2026-09-17、本人の希望。エピソードの帯と同じ手法）。
   記事の列は左寄せなので、内側の幅との差の半分だけ左右へはみ出させて、中央にそろえる */
.ft-page .kk-mosaic {
  width: var(--band);
  margin-inline: calc((var(--inner) - var(--band)) / 2);
  /* 写真と写真のすき間は、プロジェクトの組写真より狭くする（2026-09-18、本人の希望）。
     ここは1枚ずつ投稿が積まれていく器なので、すき間が細いほど一続きの面に見える。
     1440px で 8.6px → 4.3px、スマホで 4px → 2px。0 にしないのは、
     写真どうしの境目が分からなくなり、1枚の大きな絵に見えてしまうため */
  gap: clamp(2px, 0.3vw, 5px);
}

.kk-mosaic__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--media-bg);   /* 絵が届く前の下地 */
  /* 1枚ぶんの枠は正方形。段の高さは、この正方形が決める */
  aspect-ratio: 1;
}
/* 縦長・横長は、いくつぶんの場所を取るかだけを決め、高さは段に合わせる */
.kk-mosaic__item--tall { grid-row: span 2; aspect-ratio: auto; }
.kk-mosaic__item--wide { grid-column: span 2; aspect-ratio: auto; }

/* まだ写真が入っていない枠。これから埋まる場所として見せる
   （2026-09-17、本人の希望。写真が増えるほど、器が下へ続いていく）。

   真っ黒（#111）だと、写真の隣で重く沈んで見えたので、サイトの濃紺（--ink）を
   少し落とした色にした。地・写真・文字と同じ系統の色なので、黒い穴には見えない。
   中央の細い十字は「ここに入る」ことを示すだけの印。線は1pxで、遠目には気配だけ残る。
   下絵（.kk-mosaic--under）がないときの姿。下絵があるときは、下で透ける色に上書きする */
.kk-mosaic__item--empty {
  background: #1b3450;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.kk-mosaic__item--empty::before,
.kk-mosaic__item--empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.kk-mosaic__item--empty::before {
  width: clamp(10px, 1.4vw, 18px);
  height: 1px;
  transform: translate(-50%, -50%);
}
.kk-mosaic__item--empty::after {
  width: 1px;
  height: clamp(10px, 1.4vw, 18px);
  transform: translate(-50%, -50%);
}

/* 器がまだ埋まりきらないあいだ、下に敷く絵（2026-09-17、本人の希望）。
   1枚目（企画の顔になる写真）を器いっぱいに大きく置き、空いた枠から透かして見せる。
   写真が1枚ずつ置かれるたびに下絵が隠れ、ひと回り（11枚）で見えなくなる。

   下絵の調子は、ページの背景に敷く写真（.page-bg）と同じ考え方。
   ぼかして薄く落とし、地（--paper）に沈めて、上に載る写真の邪魔をしない。
   ぼかしは端が薄くなるので、枠より外まで広げてから overflow で切る */
.kk-mosaic--under {
  position: relative;
  isolation: isolate;   /* 下絵（z-index: -1）が、ページの地より下へ落ちないようにする */
  overflow: hidden;
}
.kk-mosaic--under::before {
  content: "";
  position: absolute;
  inset: -32px;
  z-index: -1;
  background: var(--kk-under) center / cover no-repeat;
  /* ぼかしは、何の写真か分かる程度にとどめる。
     強くかけると（12px）ただの色の面になり、下絵に見えなかった */
  filter: blur(3px);
  opacity: .55;
}

/* 下絵があるときの、空いた枠。
   色で塞がず、白をうっすらかけるだけにして、下絵を透かす。
   白をかけるのは、暗い写真が下絵でも、枠線と十字（濃紺）が見えるようにするため。
   枠と枠のすき間は下絵がそのまま出るので、枠のほうが少し明るく、
   マス目として読める（写真が置かれる場所の割り付けが分かる） */
.kk-mosaic--under .kk-mosaic__item--empty {
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .14);
}
.kk-mosaic--under .kk-mosaic__item--empty::before,
.kk-mosaic--under .kk-mosaic__item--empty::after {
  background: rgba(var(--ink-rgb), .3);
}

/* 入った写真は、下絵の上に「置かれた」ように見せる。影はごく薄く */
.kk-mosaic--under .kk-mosaic__item:not(.kk-mosaic__item--empty) {
  box-shadow: 0 3px 12px rgba(var(--ink-rgb), .18);
}

/* 写真は枠に重ねて置く。
   ふつうに置くと、横長の枠が中の写真の縦横に引っぱられて背が高くなり、
   正方形の段と高さがそろわなくなるため（2026-09-17） */
.kk-mosaic__item img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.kk-mosaic__item:hover img { transform: scale(1.03); }

/* 組写真は、狭い画面でも5列のまま。1枚が小さくなっても、
   型（縦長・横長の組み方）は崩さない（2026-09-17、本人の希望） */

/* EPISODE の並び。
   記事の読み幅ではなく、組写真と同じ「ページの内側いっぱい」に広げる。
   横は3つ。4つだと1枚が230pxまで小さくなり、題名が12.5pxで読ませる気がないように見えた
   （2026-09-17、本人の希望）。3つなら1枚 384×256 で、題名も20px前後になる。
   枠は 3:2。サムネを 1536×1024 にそろえたので、この形なら切れず、ちょうど4倍の大きさで収まる。
   狭い画面では2つ、スマホでも2つ（.sc-grid にも決まりはあるが、こちらが後に書いてあって強い） */
/* エピソードの帯。ページ全体の枠（1200px + 左右の余白）より外まで広げて、
   画面の幅いっぱいに近づける（2026-09-17、本人の希望で横に展開した）。
   記事の列は左寄せなので、内側の幅との差の半分だけ左右へはみ出させて、画面の中央にそろえる */
.kk-episodes {
  width: var(--band);
  /* .sc-grid には「列数 × 26rem」という幅の上限がある。
     この帯はもっと広げたいので、ここでは外す（2026-09-17） */
  max-width: none;
  margin-inline: calc((var(--inner) - var(--band)) / 2);
}
.kk-episodes .sc { aspect-ratio: 3 / 2; }
/* 題名の大きさは、カードの幅に対する割合で決まる（一覧のサムネと同じ 3.7cqw）。
   その割合だと、この大きさのカードでも下限の14pxに張り付いて小さいので、この並びだけ上げる */
.kk-episodes .sc__title { font-size: clamp(15px, 4.4cqw, 22px); }

@media (max-width: 1000px) {
  .kk-episodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* スマホでは1枚ずつ縦に積む。題名を絵の中に入れているので、2つ並べると字が小さくなりすぎる
   （ほかの章のカード（.eg）と同じ考え方。2026-09-17） */
@media (max-width: 640px) {
  .kk-episodes { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* すべてのエピソードを並べたページへの入口。並びのすぐ下、画面の中央に置く。
   記事の列の中で中央にすると、帯より左へずれるので、帯と同じ幅にしてから中央にそろえる
   （2026-09-17、本人の希望） */
.kk-episodes__more {
  width: var(--band);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  margin-inline: calc((var(--inner) - var(--band)) / 2);
  text-align: center;
}
.kk-episodes__more a {
  display: inline-flex; align-items: baseline; gap: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .35);
  font-family: var(--font-nav);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.kk-episodes__more a:hover { border-bottom-color: var(--blue); color: var(--blue); }
.kk-episodes__count { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-sub); }

/* サムネイルの中に出す「動画」「音声」の印。記事のときは出さない。
   行き先が記事とは限らないことが、絵だけで分かるようにするため（2026-09-17） */
.sc__kind {
  flex-shrink: 0;
  padding: 0.15em 0.55em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-nav);
  font-size: clamp(9px, 2cqw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .kk-mosaic__item img { transition: none; }
  .kk-mosaic__item:hover img { transform: none; }
}

/* ==========================================================================
   PILOT の投稿（/pilot/{slug}/{id}）
   インスタグラムの投稿と同じ組み方（2026-09-18、本人の希望）。
     左  … 写真。切らずに全体を見せる（地は黒。縦長でも横長でも中央に収まる）
     右  … 企画の名前・文章・投稿日・企画のページへの入口
     端  … 前後へ動く丸い矢印と、閉じる×
   狭い画面では、写真の下に文章が来るように積み直す。
   PC では、企画のページの上にこの .pp-post だけを重ねて開く（.pp-dialog）
   ========================================================================== */
/* 組写真の1枚を、投稿へのリンクにする。枠いっぱいを押せるように */
.kk-mosaic__link {
  position: absolute; inset: 0;
  display: block;
}
.kk-mosaic__link:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.pp-post {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  max-width: 68rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
}

/* ------------------------------------------------ 左：写真 */
.pp-media {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  background: #0d1520;
}
.pp-media img {
  display: block;
  width: auto; max-width: 100%;
  height: auto; max-height: min(72vh, 44rem);
}

/* ------------------------------------------------ 右：文章 */
.pp-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid rgba(var(--ink-rgb), .14);
}

.pp-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(var(--ink-rgb), .14);
}
.pp-head__pilot {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  color: var(--ink);
}
.pp-avatar {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--media-bg);
}
.pp-avatar--text {
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--ink-rgb), .2);
  font-family: var(--font-nav);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--ink-sub);
}
.pp-head__names { display: flex; flex-direction: column; min-width: 0; }
.pp-head__no {
  font-family: var(--font-nav);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-sub);
}
.pp-head__title {
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .2s;
}
.pp-head__pilot:hover .pp-head__title { color: var(--blue); }
.pp-head__count {
  margin-left: auto;
  font-family: var(--font-nav);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 文章。長いときは、ここだけが動く（写真と入口は動かさない） */
.pp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}
.pp-caption {
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pp-caption p { margin: 0; }
.pp-caption p + p { margin-top: 1em; }
/* 文章のはじめに企画の名前を置く（インスタグラムで、はじめに名前が来るのと同じ） */
.pp-caption__name { margin-right: .4em; font-weight: 700; }
.pp-date {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-nav);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--ink-sub);
}

.pp-foot {
  padding: .875rem 1rem;
  border-top: 1px solid rgba(var(--ink-rgb), .14);
}
.pp-foot__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .8125rem;
  color: var(--ink);
  transition: color .2s;
}
.pp-foot__link:hover { color: var(--blue); }
.pp-foot__arrow { transition: transform .2s; }
.pp-foot__link:hover .pp-foot__arrow { transform: translateX(.25rem); }

/* ------------------------------------------------ 端：前後の矢印と閉じる */
/* 矢印を入れる箱そのものは、場所を取らせない（取らせると、投稿の下に空の帯ができる） */
.pp-nav { display: contents; }
.pp-nav__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #16283a;
  font-size: 1.5rem;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 2px 10px rgba(8, 18, 30, .25);
  transition: background .2s;
}
.pp-nav__btn:hover { background: #fff; }
.pp-nav__btn--prev { left: .75rem; }
/* 右の矢印は、写真の右端（文章の欄の手前）に置く */
.pp-nav__btn--next { right: calc(25rem + .75rem); }

/* ページとして開いたときは、×を出さない（パンくずと入口で戻れる） */
.pp-page .pp-close { display: none; }

/* ------------------------------------------------ 重ねて開いたとき */
html.pp-open { overflow: hidden; }
.pp-dialog {
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pp-dialog::backdrop { background: rgba(10, 18, 28, .82); }
.pp-dialog .pp-post {
  width: min(72rem, calc(100vw - 9rem));
  /* 高さは写真に合わせる。決め打ちにすると、横長の写真で上下に黒い余白が大きく出る */
  height: auto;
  max-height: min(44rem, calc(100vh - 5rem));
  margin: 0;
  border: 0;
  box-shadow: 0 24px 80px rgba(8, 18, 30, .45);
}
.pp-dialog .pp-media img { max-height: min(44rem, calc(100vh - 5rem)); }
/* 矢印と×は、画面の端に出す（インスタグラムと同じ位置） */
.pp-dialog .pp-nav__btn { position: fixed; }
.pp-dialog .pp-nav__btn--prev { left: 1rem; }
.pp-dialog .pp-nav__btn--next { right: 1rem; }
.pp-dialog .pp-close {
  position: fixed;
  top: .5rem; right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.pp-dialog .pp-close:hover { color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: no-preference) {
  .pp-dialog[open] { animation: pp-in .22s ease both; }
  .pp-dialog[open]::backdrop { animation: pp-fade .22s ease both; }
}
@keyframes pp-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------ 狭い画面では、写真の下に文章 */
@media (max-width: 899px) {
  .pp-post { grid-template-columns: minmax(0, 1fr); }
  .pp-side {
    border-left: 0;
    border-top: 1px solid rgba(var(--ink-rgb), .14);
  }
  .pp-media img { max-height: 62vh; }
  .pp-nav__btn--next { right: .75rem; }
  .pp-nav__btn { top: 30%; }
}