/* ============================================================
   きろくね — サイト共通スタイル
   デザイン基準: stitch-design-taste / DESIGN.md
   Creativity 8 / Density 4 / Variance 8 / Motion 6

   構造は CSS Grid で組む。囲みは階層を示す場所にだけ置き、
   それ以外は罫・字下げ・余白で分ける。
   アクセント（ラベンダー）を面として使うのは
   プライマリCTAと、ごく薄いウォッシュだけ。

   日本語向けの調整:
   DESIGN.md の見出し leading 1.1 / tracking -.025em はラテン向けの値。
   和文は字面が詰まるため leading 1.45〜1.6 / tracking -.02em までとし、
   「本文より締める」という意図だけを引き継ぐ。
   ============================================================ */

:root {
  /* ---- 地色・紙 ---- */
  --bg: #faf8f4;            /* わずかに温かいオフホワイト */
  --surface: #fffdfa;       /* 囲みの中の紙。地色と同じ色温度 */
  --tint: #f2ede3;          /* 締めくくりの帯 */

  /* ---- 文字（純黒は使わない） ---- */
  --ink: #201c33;
  --ink-soft: #453e5c;
  --body: #4a4457;
  --body-strong: #3f3a4d;
  --muted: #665e7d;

  /* ---- アクセント（単色・彩度30%前後） ---- */
  --accent: #6b5aa6;
  --accent-hover: #52447f;
  --accent-deep: #4a3d78;
  --accent-soft: #b8abd6;
  --accent-mute: #8d84a6;
  --accent-wash: #efeaf5;

  /* ---- 注意（機能色。アクセントとしては数えない） ---- */
  --danger: #9f3b46;

  /* ---- カテゴリチップ（アクセント単色に統一。articles.css が参照） ---- */
  --chip-hint-bg: #efeaf5;  --chip-hint-fg: #4a3d78;
  --chip-home-bg: #efeaf5;  --chip-home-fg: #4a3d78;
  --chip-work-bg: #efeaf5;  --chip-work-fg: #4a3d78;
  --chip-self-bg: #efeaf5;  --chip-self-fg: #4a3d78;

  /* ---- 罫 ---- */
  --line-whisper: rgba(101, 88, 66, .16);
  --line: #e6dfd2;
  --line-strong: #d5ccbb;
  --line-warm: #c9bfa9;
  --line-warm-2: #ded6c6;

  /* ---- 影（拡散のみ。グローは使わない） ---- */
  --shadow-diffused: 0 20px 40px -15px rgba(36, 31, 61, .07);
  --shadow-lift: 0 26px 52px -18px rgba(36, 31, 61, .12);

  /* ---- 形 ---- */
  --radius-card: 2.5rem;
  --radius-card-sm: 1.25rem;
  --radius-panel: 1.25rem;
  --radius-fig: .75rem;
  --radius-thumb: .5rem;

  /* ---- 版面 ----
     本文の版面（読みやすさの上限）は 620〜900px に収まる。
     外枠を 1400px にすると右側が大きく空き、右寄せの要素だけが
     版面から離れて浮いて見えるため、外枠も本文に近い幅で止める。 */
  --shell: 1200px;
  --pad-x: 1rem;
  --header-h: 60px;

  /* ---- 書体 ----
     Geist / Satoshi / Cabinet Grotesk は和文グリフを持たないため、
     ラテンと数字を Outfit（DESIGN.md 指定リスト）、和文を Noto Sans JP で受ける。
     Inter は使わない。 */
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-display: "Outfit", var(--font-ja);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-num: var(--font-mono);

  /* ---- 動き（臨界制動のばね。行き過ぎない） ---- */
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --dur: .55s;
}

@media (min-width: 768px) {
  :root { --pad-x: 2rem; --header-h: 68px; }
}
@media (min-width: 1100px) {
  :root { --pad-x: 4rem; --header-h: 76px; }
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;      /* 横スクロールは重大な破綻として封じる */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 1rem;
  line-height: 1.9;
  font-feature-settings: "palt";
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent); }
img, svg { display: block; max-width: 100%; height: auto; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 入場（段差つきの現れ方） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur) var(--ease-spring),
    transform var(--dur) var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- スキップリンク ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: top .18s var(--ease-spring);
}
.skip-link:focus-visible { top: 12px; color: #fff; }

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

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  transition: opacity .2s var(--ease-spring);
}
.brand:hover { opacity: .72; }
.brand__logo { width: 112px; height: auto; }
.brand__name {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--accent-deep);
}
.brand__logo + .brand__name { display: none; }

.nav-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .375rem;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent-deep);
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nav-toggle__bars span {
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform .28s var(--ease-spring), opacity .2s linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* モバイル: ヘッダー直下に降りてくる全幅のシート */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--shadow-diffused);
}
.site-nav.is-open { display: block; animation: nav-sheet .32s var(--ease-spring) both; }
@keyframes nav-sheet {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open { animation: none; }
}

/* シートの背後を沈める。下の内容とCTAが二重に見えるのを防ぐ。
   ヘッダー(z-index 50)より下、本文より上の層に単独で置く。
   背後の巻き取りは止めない —— html/body に overflow:hidden を掛けると
   sticky なヘッダーが基準を失って外れるため。 */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(32, 28, 51, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease-spring);
}
html.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
@media (min-width: 1100px) {
  .nav-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-scrim { transition: none; }
}
.site-nav ul {
  max-width: var(--shell);
  margin: 0 auto;
  padding: .5rem var(--pad-x) 1rem;
  display: grid;
}
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--body);
  border-bottom: 1px solid var(--line-whisper);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.site-nav .site-nav__cta {
  margin-top: 1rem;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  min-height: 48px;
  border-bottom: 0;
}
.site-nav .site-nav__cta:hover { background: var(--accent-hover); color: #fff; }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    justify-self: end;
  }
  .site-nav ul {
    padding: 0;
    grid-auto-flow: column;
    align-items: center;
    gap: .25rem;
  }
  .site-nav a {
    min-height: 44px;
    padding: 0 .625rem;
    font-size: .875rem;
    color: var(--body);
    border-bottom: 0;
    white-space: nowrap;
  }
  .site-nav a[aria-current="page"] {
    font-weight: 700;
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
  .site-nav .site-nav__cta {
    margin-top: 0;
    margin-left: 1.25rem;
    padding: 0 1.25rem;
    min-height: 44px;
    font-size: .875rem;
    box-shadow: none;
    transition: background-color .2s var(--ease-spring), transform .2s var(--ease-spring);
  }
  .site-nav .site-nav__cta:active { transform: translateY(-1px); }
  .brand__logo { width: 132px; }
}

/* ---------- レイアウト ---------- */
.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.container--narrow { max-width: 760px; }
.container--mid { max-width: 860px; }

/* セクションの縦リズム。上余白だけで組む */
.section { padding: clamp(3rem, 8vw, 6rem) 0 0; }
.section--tight { padding-top: clamp(2.75rem, 7vw, 5.25rem); }
.section--breathe { padding-top: clamp(3.5rem, 10vw, 7.5rem); }
.section--tint {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.25rem, 7.5vw, 6rem);
  background: var(--tint);
}
@media (min-width: 960px) {
  .section--tint-mid { padding-bottom: 5.5rem; }
}
.rule-list--warm { border-top-color: var(--line-warm); }
.rule-list--warm > div { border-bottom-color: var(--line-warm-2); }

/* ---------- 見出し・小ラベル ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--muted);
}
.eyebrow--plain { display: block; }
.eyebrow--rule::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}
.eyebrow--accent { color: var(--accent-deep); }
.eyebrow--accent.eyebrow--rule::before { background: var(--accent-soft); }
.eyebrow--warm.eyebrow--rule::before { background: var(--line-warm); }
@media (min-width: 960px) {
  .eyebrow { font-size: .8125rem; }
}

.section__title {
  margin-top: .875rem;
  font-size: clamp(1.4375rem, 1rem + 1.9vw, 2.375rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.015em;
  max-width: 20em;
}
.section__lead {
  margin-top: 1rem;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.09375rem);
  line-height: 2.05;
  color: var(--body);
  max-width: 34em;
}
@media (min-width: 960px) {
  .section__title { margin-top: 1.125rem; }
  .section__lead { margin-top: 1.25rem; }
}

/* 見出し行（左に見出し、右に補足やリンク） */
.head-row {
  display: grid;
  gap: 1rem;
  align-items: end;
}
@media (min-width: 700px) {
  .head-row { grid-template-columns: 1fr auto; gap: 1.5rem; }
}

/* ---------- ボタン・リンク ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5625rem;
  min-height: 56px;
  padding: .5rem 2.125rem;
  border-radius: 999px;
  font-size: 1.03125rem;
  font-weight: 700;
  text-align: center;
  transition:
    background-color .2s var(--ease-spring),
    border-color .2s var(--ease-spring),
    color .2s var(--ease-spring),
    transform .18s var(--ease-spring);
}
.btn:active { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--accent-deep);
  font-weight: 600;
  font-size: .90625rem;
  min-height: 44px;
  padding: .5rem 1.375rem;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* セカンダリはテキストリンク。プライマリと同格に見せない */
.link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--accent-deep);
  box-shadow: inset 0 -1px 0 var(--accent-soft);
  transition: box-shadow .2s var(--ease-spring), color .2s var(--ease-spring);
}
.link-underline:hover { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }

.link-plain {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--accent-deep);
}
.link-plain::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform .24s var(--ease-spring);
}
.link-plain:hover::after { transform: translateX(4px); }

.cta-row {
  display: grid;
  justify-items: start;
  gap: .25rem;
  margin-top: 1.75rem;
}
.cta-row .btn { width: 100%; }
@media (min-width: 700px) {
  .cta-row { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1.75rem; }
  .cta-row .btn { width: auto; }
}

/* ---------- ヒーロー ----------
   トップページは中央揃えの面で組む（採用案 B）。
   中央揃え・淡いグラデーションの面・ピル型バッジ・端末の重ね合わせは
   DESIGN.md の禁止項目にあたるが、owner 判断で解除している（2026-08-12）。
   トピックページ（家の中のこと／職場のこと）は従来どおり左揃え。
   -------------------------------------------------------------- */
.hero { padding: clamp(2.25rem, 6vw, 5.5rem) 0 0; }

.hero__title {
  margin-top: 1rem;
  font-size: clamp(1.9375rem, 1.1rem + 3.6vw, 4.125rem);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.02em;
}
.hero__lead {
  margin-top: 1.125rem;
  font-size: clamp(.9375rem, .9rem + .35vw, 1.09375rem);
  line-height: 2.05;
  color: var(--body);
  max-width: 30em;
}

/* 保証の一文。罫の下に置く */
.hero__assurance {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .78125rem;
  line-height: 1.85;
  letter-spacing: -.01em;
  color: var(--muted);
}
@media (min-width: 700px) {
  .hero__assurance { grid-auto-flow: column; justify-content: start; gap: 2.25rem; }
}
/* トピックごとの見出しの大きさ（読み手の状況に合わせて変える） */
.hero__title--home { font-size: clamp(1.6875rem, 1.1rem + 2.5vw, 3.125rem); line-height: 1.55; letter-spacing: -.012em; }
.hero__title--work { font-size: clamp(1.8125rem, 1.1rem + 3vw, 3.5rem); line-height: 1.5; letter-spacing: -.016em; }

@media (min-width: 1060px) {
  /* 画面の高さいっぱいには広げない。内容が400px程度しかないところに
     100dvh を強制すると、下に大きな空きが残るだけになるため。 */
  .hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
}

/* ---------- トップのヒーロー（中央揃えの面） ---------- */
.hero--panel { padding: 1.25rem 0 0; }
.hero-panel {
  padding: clamp(2rem, 6vw, 3.75rem) clamp(1.25rem, 4vw, 3rem) 0;
  text-align: center;
  background: linear-gradient(180deg, #ece6f6 0%, #f6f3fb 52%, #fcfbfe 100%);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: .4375rem 1.125rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.hero-panel .hero__title {
  margin-top: 1.25rem;
  font-size: clamp(1.8125rem, 1.15rem + 3vw, 3.5rem);
  color: var(--ink);
}
.hero-panel__lead {
  margin-top: 1rem;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
  line-height: 1.95;
  color: var(--body);
}
.hero-panel__cta { margin-top: 1.75rem; }
.hero-panel__cta .btn { width: 100%; }
.hero-panel__note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.8;
  color: var(--muted);
}
@media (min-width: 700px) {
  .hero-panel__cta .btn { width: auto; min-width: 320px; }
}

/* 広い画面では左右に分ける。左に言葉、右に端末。
   横に並べたときは中央揃えの見出しが浮くので、左カラムだけ左揃えに戻す。 */
@media (min-width: 1060px) {
  .hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(2.5rem, 4vw, 4rem);
    padding: clamp(3rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem);
    text-align: left;
  }
  .hero-panel__cta .btn { min-width: 0; }
  .hero-panel__visual { min-width: 0; }
  .hero-fan { margin-top: 0; }
  .hero-fan__caption { padding-bottom: 0; text-align: center; }
}

/* 端末を扇状に。中央を大きく前に、左右を少し伏せて重ねる */
.hero-fan {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero-fan__item { flex: none; width: 38%; max-width: 250px; }
.hero-fan__item img {
  width: 100%;
  height: auto;
  border-radius: 1.125rem;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 26px 50px -20px rgba(36, 31, 61, .34);
}
.hero-fan__item--left  { transform: translateX(22%) rotate(-6deg); margin-bottom: 1.25rem; }
.hero-fan__item--right { transform: translateX(-22%) rotate(6deg); margin-bottom: 1.25rem; }
.hero-fan__item--center { position: relative; z-index: 2; width: 44%; max-width: 288px; }
.hero-fan__caption {
  margin-top: 1rem;
  padding-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
}
/* 狭い画面では3枚だと1枚あたりが小さすぎて中身が読めない。2枚に絞って大きく見せる */
@media (max-width: 699px) {
  .hero-fan__item--right { display: none; }
  .hero-fan__item--left {
    width: 46%;
    max-width: none;
    transform: translateX(15%) rotate(-6deg);
    margin-bottom: 1rem;
  }
  .hero-fan__item--center { width: 52%; max-width: none; }
}
@media (min-width: 700px) {
  .hero-fan__item--left  { transform: translateX(18%) rotate(-7deg); margin-bottom: 2rem; }
  .hero-fan__item--right { transform: translateX(-18%) rotate(7deg); margin-bottom: 2rem; }
}

.section__after { margin-top: 1.25rem; }

/* ---------- できること（イラストカード） ---------- */
/* イラストは白地・横3:2で描き起こしている。カードの囲みは絵の側だけに付け、
   見出しと本文は地色の上に直接置く。文字まで囲むと、絵の白と囲みの白が
   二重になって重く見える。 */
.feature-grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 2.25rem 1.75rem;
}
.feature-card {
  display: grid;
  align-content: start;
  gap: .5rem;
}
.feature-card__figure {
  margin-bottom: .375rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-diffused);
}
/* 3:2 の絵をそのまま置く。高さを指定しないので、幅が変わっても比率は崩れない。 */
.feature-card__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.feature-card__title {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--accent-deep);
}
.feature-card__body {
  font-size: .90625rem;
  line-height: 1.95;
  color: var(--body);
  max-width: 34em;
}
@media (min-width: 720px) {
  .feature-grid {
    margin-top: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.75rem 2rem;
  }
  .feature-card__title { font-size: 1.125rem; }
  .feature-card__body { font-size: .9375rem; }
}
@media (min-width: 1120px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem 2.25rem;
  }
  .feature-card__title { font-size: 1.1875rem; }
  .feature-card__body { font-size: .96875rem; }
}

/* ---------- トピックページのイラスト ---------- */
/* トップの feature-card と同じ扱い。囲みは図版だけに付け、文字は地色の上に置く。
   トップと違って本文のとなりに添えるので、幅は絵の側で止める。 */
/* 囲みは図版だけに付ける。説明文まで囲むと、絵の白と囲みの白が二重になって重い。 */
.topic-fig img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-diffused);
}
/* ヒーローの下。文章を読み終えた先に置く。回り込みはさせない。 */
.topic-fig--hero {
  margin-top: 2rem;
  max-width: 720px;
}
/* 節の見出しと本文のあいだに1枚だけ挟むとき。 */
.topic-fig--lead {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  max-width: 720px;
}
/* 3枚を横に並べる。狭い画面では1枚ずつ縦に積む。 */
.topic-figs {
  margin-top: 1.75rem;
  margin-bottom: 2.5rem;
  display: grid;
  gap: 1.75rem;
}
.topic-figs figcaption {
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--muted);
}
@media (min-width: 900px) {
  .topic-figs {
    margin-top: 2.25rem;
    margin-bottom: 3rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .topic-fig--hero { margin-top: 2.5rem; }
  .topic-figs figcaption { font-size: .90625rem; }
}

/* ---------- 記録の三つの層（重なりを字下げで示す） ---------- */
.layers { margin-top: 1.75rem; max-width: 860px; display: grid; }
.layer { padding: 1.125rem 0 1.125rem 1.125rem; }
.layer--own {
  border-left: 3px solid var(--accent);
  background: var(--surface);
}
.layer--transcript {
  margin-left: 1rem;
  border-left: 3px solid var(--accent-soft);
}
.layer--draft {
  margin-left: 2rem;
  border-left: 1px dashed var(--line-warm);
}
.layer__head { display: flex; align-items: baseline; gap: .875rem; }
.layer__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--accent);
}
.layer--draft .layer__num { color: var(--accent-mute); }
.layer__title { font-size: 1rem; line-height: 1.6; font-weight: 700; }
.layer--draft .layer__title { color: var(--body); }
.layer__body {
  margin-top: .5rem;
  font-size: .90625rem;
  line-height: 1.95;
  color: var(--body);
}
@media (min-width: 960px) {
  .layers { margin-top: 2.5rem; }
  .layer { padding: 1.375rem 0 1.375rem 1.625rem; }
  .layer--transcript { margin-left: 2.5rem; }
  .layer--draft { margin-left: 5rem; }
  .layer__title { font-size: 1.0625rem; }
  .layer__body { font-size: .9375rem; line-height: 2; }
}

/* ---------- 定義リスト（罫で分ける情報の並び） ---------- */
.rule-list {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
  display: grid;
}
.rule-list > div {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.rule-list dt {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
}
.rule-list dd {
  margin-top: .375rem;
  font-size: .90625rem;
  line-height: 1.95;
  color: var(--body);
  max-width: 34em;
}
@media (min-width: 960px) {
  .rule-list { margin-top: 2.75rem; }
  .rule-list > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 3.5rem;
    padding: 1.625rem 0;
  }
  .rule-list dt { font-size: 1.25rem; }
  .rule-list dd { margin-top: 0; font-size: .96875rem; line-height: 2; }
  .rule-list--narrow > div { grid-template-columns: 230px minmax(0, 1fr); }
  .rule-list--narrow dt { font-size: 1.0625rem; }
  .rule-list--tight > div { gap: 3rem; padding: 1.5rem 0; }
  .rule-list--stack > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rule-list--stack dt { font-size: 1rem; }
  .rule-list--stack dd { margin-top: .375rem; font-size: .90625rem; line-height: 1.95; }
}

/* 2カラムの定義リスト（FAQ・職場ページの5項目） */
.grid-list { margin-top: 1.75rem; display: grid; }
.grid-list > div {
  padding: 1.375rem 0;
  border-top: 1px solid var(--line);
}
.grid-list > div:first-child { border-top-color: var(--line-strong); }
.grid-list dt, .grid-list__title {
  font-size: .96875rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--ink);
}
.grid-list dd, .grid-list__body {
  margin-top: .375rem;
  font-size: .875rem;
  line-height: 1.95;
  color: var(--body);
}
@media (min-width: 900px) {
  .grid-list {
    margin-top: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.5rem;
  }
  .grid-list > div { padding: 1.625rem 0; }
  .grid-list > div:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
  .grid-list dt, .grid-list__title { font-size: 1.0625rem; }
  .grid-list dd, .grid-list__body { font-size: .90625rem; }
}

/* ---------- 左に見出し・右に本体の非対称2カラム ---------- */
.split { display: grid; gap: 1.75rem; }
.split__aside { max-width: 34em; }
/* 段の間隔は .split の gap が持つ。中の罫線リストは自前の上余白を足さない */
.split .rule-list { margin-top: 0; }
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 5rem;
    align-items: start;
  }
  .split__body { margin-top: 0; }
}
.split__title {
  margin-top: .875rem;
  font-size: clamp(1.4375rem, 1rem + 1.5vw, 2.0625rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.015em;
}
.split__text {
  margin-top: .875rem;
  font-size: .9375rem;
  line-height: 2;
  color: var(--body);
}
@media (min-width: 960px) {
  .split__title { margin-top: 1.125rem; }
}

/* ---------- 手順（2列ジグザグ。等幅3列は使わない） ---------- */
.steps { margin-top: 1.75rem; display: grid; gap: 1.5rem; }
.step__num {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}
.step:not(:first-child) .step__num { color: var(--accent-mute); }
.step__title { margin-top: .625rem; font-size: 1.0625rem; font-weight: 700; }
.step__body { margin-top: .375rem; font-size: .875rem; line-height: 1.95; color: var(--body); }

.steps--zig .step { padding-top: 1.125rem; border-top: 1px solid var(--line-strong); }
.steps--zig .step:first-child { border-top: 2px solid var(--accent); }
@media (min-width: 900px) {
  .steps--zig {
    margin-top: 2.5rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: clamp(2.5rem, 5vw, 4rem);
  }
  .steps--zig .step:nth-child(1) { grid-column: 1 / span 5; }
  .steps--zig .step:nth-child(2) { grid-column: 7 / span 6; }
  .steps--zig .step:nth-child(3) { grid-column: 4 / span 6; }
  .steps--zig .step { padding-top: 1.5rem; }
  .step__num { font-size: 2rem; }
  .step__title { margin-top: .875rem; font-size: 1.1875rem; }
  .step__body { font-size: .90625rem; }
}

/* 縦の時系列（家の中のこと） */
.timeline {
  margin-top: 1.75rem;
  border-left: 1px solid var(--line-strong);
  display: grid;
}
.timeline > li {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
}
.timeline > li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  margin-left: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.timeline > li:first-child::before { background: var(--accent); }
.timeline__step {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent-mute);
}
.timeline > li:first-child .timeline__step { color: var(--accent); }
.timeline__title { margin-top: .375rem; font-size: 1.0625rem; font-weight: 700; }
.timeline__body { margin-top: .375rem; font-size: .90625rem; line-height: 1.95; color: var(--body); max-width: 34em; }
@media (min-width: 960px) {
  .timeline { margin-top: 2.5rem; }
  .timeline > li { padding: 0 0 2rem 1.875rem; }
  .timeline__step { font-size: .75rem; }
  .timeline__title { font-size: 1.1875rem; }
  .timeline__body { font-size: .9375rem; line-height: 2; }
}

/* ---------- 字下げの注記 ---------- */
.indent-note {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line-strong);
  font-size: .8125rem;
  line-height: 1.95;
  color: var(--muted);
}
.indent-note__title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--accent-deep);
}
.indent-note__list { margin-top: .625rem; display: grid; gap: .375rem; }
@media (min-width: 960px) {
  .indent-note { padding-left: 1.625rem; font-size: .84375rem; }
}

/* ---------- 区切りだけの一行並び ---------- */
.inline-list {
  margin-top: 1.375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  font-size: .875rem;
  color: var(--ink);
}
.inline-list > li { display: flex; align-items: center; gap: 0 1rem; }
.inline-list > li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 14px;
  background: var(--line-strong);
}
@media (min-width: 960px) {
  .inline-list { gap: 0 1.25rem; font-size: .9375rem; }
  .inline-list > li { gap: 0 1.25rem; }
}

/* ---------- 記事の並び ---------- */
.post-list {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
  display: grid;
}
.post-list > li { border-bottom: 1px solid var(--line); }
.post-list > li > a {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;   /* 図版と本文の背が違うので、上寄せだと下に空きが残る */
  gap: 1rem;
  padding: 1.25rem 0;
  color: inherit;
  transition: transform .28s var(--ease-spring), opacity .2s linear;
}
.post-list > li > a:hover { color: inherit; transform: translateX(4px); }
/* 図版は縦横比だけで揃える。高さを直に指定すると比率がばらつく */
.post-list__image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-thumb);
  background: var(--tint);
}
.post-list__meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--muted);
}
.post-list__cat { font-weight: 500; color: var(--accent-deep); }
.post-list__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: .625rem;
  vertical-align: -1px;
  background: var(--line-strong);
}
.post-list__title {
  margin-top: .375rem;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink);
}
/* 抜粋は2行で止める。行の高さが揃わないと並びが散らかって見える */
.post-list__excerpt {
  margin-top: .375rem;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--body);
  max-width: 36em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 960px) {
  .post-list { margin-top: 2.5rem; }
  .post-list > li > a { grid-template-columns: 168px minmax(0, 1fr); gap: 1.75rem; padding: 1.625rem 0; }
  .post-list__meta { font-size: .75rem; }
  .post-list__title { font-size: 1.1875rem; line-height: 1.6; }
  .post-list__excerpt { font-size: .90625rem; }
}

/* 先頭を大きく扱う編集的な並び（トップページのみ） */
@media (min-width: 960px) {
  .post-list--feature {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 4rem;
  }
  .post-list--feature > li:first-child {
    grid-row: span 3;
    border-bottom: 0;
  }
  .post-list--feature > li:first-child > a {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;   /* 縦積みなので中央寄せは効かせない */
    gap: 1.25rem;
    padding-top: 1.75rem;
  }
  .post-list--feature > li:first-child .post-list__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-fig);
  }
  .post-list--feature > li:first-child .post-list__title { font-size: 1.5rem; }
  .post-list--feature > li:first-child .post-list__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
  /* 右列は幅が狭いので図版を小さく持つ */
  .post-list--feature > li:not(:first-child) > a { grid-template-columns: 124px minmax(0, 1fr); gap: 1.25rem; }
  .post-list--feature > li:first-child > a:hover { transform: translateY(-4px); }
}

/* ---------- 版面の幅 ---------- */
.measure-660 { max-width: 660px; }
.measure-700 { max-width: 700px; }
.measure-760 { max-width: 760px; }
.measure-820 { max-width: 820px; }
.measure-900 { max-width: 900px; }

/* ---------- 見開きのヒーロー（職場のこと） ---------- */
.spread {
  margin-top: 1.75rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--line-strong);
  display: grid;
  gap: 1.125rem;
}
.spread__lead {
  font-size: .9375rem;
  line-height: 2.05;
  color: var(--body);
  max-width: 620px;
}
.spread__aside {
  font-size: .8125rem;
  line-height: 1.95;
  color: var(--muted);
}
@media (min-width: 960px) {
  /* 添えの一文は本文のとなりに置く。版面いっぱいに広げると、
     本文との間が空きすぎて右端に取り残されて見える。 */
  .spread {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    max-width: 900px;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 3rem;
  }
  .spread__lead { font-size: 1.0625rem; line-height: 2.15; }
  .spread__aside { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}

/* ---------- 番号つきの2列（職場のこと） ---------- */
.num-grid { margin-top: 1.75rem; display: grid; }
.num-grid__item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.num-grid__item:first-child { border-top-color: var(--line-strong); }
.num-grid__num {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--accent);
}
.num-grid__title { margin-top: .375rem; font-size: 1rem; line-height: 1.6; font-weight: 700; }
.num-grid__body { margin-top: .375rem; font-size: .875rem; line-height: 1.95; color: var(--body); }
@media (min-width: 900px) {
  .num-grid {
    margin-top: 2.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4.5rem;
  }
  .num-grid__item { padding: 1.5rem 0; }
  .num-grid__item:nth-child(-n+2) { border-top: 1px solid var(--line-strong); }
  /* 最後の1件だけ2列ぶんを使って行を閉じる。中の組み方は他の項目と同じにする。
     ここだけ番号と見出しを横並びにすると、上の段と字面が揃わない。 */
  .num-grid__item--wide {
    grid-column: span 2;
    border-bottom: 1px solid var(--line);
  }
  .num-grid__item--wide .num-grid__body { max-width: 34em; }
  .num-grid__title { font-size: 1.125rem; }
  .num-grid__body { font-size: .90625rem; }
}

/* ---------- 縦罫で区切った横3列の手順（職場のこと） ---------- */
.steps--cols { margin-top: 1.75rem; }
@media (min-width: 900px) {
  .steps--cols {
    margin-top: 2.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line-strong);
  }
  .steps--cols .step { padding: 1.75rem 2.5rem 0 0; border-top: 0; }
  .steps--cols .step:nth-child(2) { padding: 1.75rem 2.5rem 0; border-left: 1px solid var(--line); }
  .steps--cols .step:nth-child(3) { padding: 1.75rem 0 0 2.5rem; border-left: 1px solid var(--line); }
}
.step__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent-mute);
}
.step:first-child .step__label { color: var(--accent); }

/* ---------- 囲み（階層を示す場所にだけ置く） ---------- */
.panel {
  margin-top: 1.5rem;
  padding: 1.75rem 1.375rem 1.625rem;
  background: var(--surface);
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-diffused);
}
.panel--narrow { max-width: 820px; }
.panel--note {
  margin-top: 1.875rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--radius-panel);
  box-shadow: none;
  font-size: .84375rem;
  line-height: 1.95;
  color: var(--body);
}
.panel__title {
  margin-top: .875rem;
  font-size: clamp(1.4375rem, 1rem + 1.5vw, 2.0625rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.015em;
}
.panel__text {
  margin-top: .875rem;
  font-size: .9375rem;
  line-height: 2.05;
  color: var(--body);
  max-width: 44em;
}
.panel__divider {
  margin-top: 1.375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  line-height: 2;
  color: var(--body);
}
.panel__links { margin-top: .75rem; display: grid; justify-items: start; }
@media (min-width: 700px) {
  .panel__links { grid-auto-flow: column; justify-content: start; gap: 1.75rem; }
}
@media (min-width: 960px) {
  .panel {
    margin-top: 2rem;
    padding: 3rem 3.25rem 2.75rem;
    border-radius: var(--radius-card);
  }
  .panel--note { padding: 1.375rem 1.5rem; font-size: .875rem; border-radius: var(--radius-panel); }
  .panel__title { margin-top: 1.125rem; }
  .panel__text { font-size: .96875rem; }
  .panel__divider { margin-top: 1.625rem; padding-top: 1.5rem; font-size: .90625rem; }
}

/* ---------- 最終CTA（左揃え） ---------- */
.final-cta__title {
  font-size: clamp(1.4375rem, 1rem + 1.9vw, 2.375rem);
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: -.015em;
}
.final-cta__lead {
  margin-top: .875rem;
  font-size: clamp(.9375rem, .9rem + .25vw, 1rem);
  line-height: 2;
  color: var(--body);
}
.final-cta__note {
  margin-top: 1.125rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.85;
  color: var(--muted);
}
.final-cta .cta-row .btn { width: 100%; }
/* .cta-row で包まずボタンを直に置いているページがあるため、幅も上余白も合わせる */
.final-cta .container > .btn { width: 100%; margin-top: 1.75rem; }
.final-cta__more { display: none; }
@media (min-width: 700px) {
  .final-cta .cta-row .btn,
  .final-cta .container > .btn { width: auto; }
  .final-cta__more { display: inline-flex; }
}
.final-cta--rule {
  max-width: 900px;
  padding-top: 1.875rem;
  border-top: 1px solid var(--line-strong);
}

/* ---------- フッター ---------- */
.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  background: var(--ink);
  color: #bdb5d4;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
}
.section--tint + .site-footer { margin-top: 0; }
.site-footer__brand {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: #efecf9;
}
.site-footer__nav {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .8125rem;
  color: #bdb5d4;
  transition: color .2s var(--ease-spring);
}
.site-footer__nav a:hover { color: #fff; }
.site-footer__note {
  margin-top: .875rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .8125rem;
  line-height: 1.85;
  color: #cfc7e2;
  max-width: 46em;
}
.site-footer__copyright {
  margin-top: .875rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: #9a91b8;
}
@media (min-width: 960px) {
  .site-footer__nav { gap: 0 1.75rem; }
}

/* ---------- アクセス解析の同意 ---------- */
.consent-banner {
  position: fixed;
  z-index: 70;
  right: 0;
  bottom: 0;
  left: 0;
}
.consent-banner__card {
  margin: 0 .75rem .75rem;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lift);
}
.consent-banner__title {
  font-size: .9375rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
}
.consent-banner__body,
.consent-banner__link {
  margin-top: .5rem;
  font-size: .78125rem;
  line-height: 1.8;
  color: var(--body);
}
.consent-banner__link a { box-shadow: inset 0 -1px 0 var(--accent-soft); }
.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: .875rem;
}
.consent-banner__actions .btn {
  min-height: 44px;
  font-size: .90625rem;
  padding: .5rem 1.375rem;
}
@media (min-width: 700px) {
  .consent-banner { right: 1.5rem; bottom: 1.5rem; left: auto; width: min(400px, calc(100vw - 3rem)); }
  .consent-banner__card { margin: 0; }
}

/* ---------- 記事ページ（/articles/ と /columns/ の土台） ---------- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  z-index: 60;
  pointer-events: none;
}
.progress-bar__fill {
  width: 0;
  height: 100%;
  background: var(--accent);
}

.article-header { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.article-header__title {
  margin-top: .75rem;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.625rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.article-header__meta {
  margin-top: .625rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.7;
  color: var(--muted);
}

.article-body > p {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 2.05;
  color: var(--body-strong);
}
.article-body > h2 {
  margin-top: 2.625rem;
  font-size: clamp(1.3125rem, 1rem + .8vw, 1.5rem);
  line-height: 1.55;
  font-weight: 700;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.article-body > h3 {
  margin-top: 1.875rem;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.1875rem);
  line-height: 1.6;
  font-weight: 700;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
@media (min-width: 960px) {
  .article-body > p { font-size: 1.03125rem; line-height: 2.15; }
  .article-body > h2 { margin-top: 3rem; line-height: 1.6; }
  .article-body > h3 { margin-top: 2.125rem; }
}

/* パンくず。BreadcrumbList の構造化データと同じ並びを画面にも出す。
   末尾(現在地)はリンクにせず、長いタイトルは1行で省略する。 */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .5rem;
  list-style: none;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0 .5rem;
  min-width: 0;
  font-size: .84375rem;
  color: var(--muted);
}
.breadcrumb li + li::before {
  content: "/";
  color: var(--line-strong);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
}
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
/* 現在地は、狭い画面で折り返さずに省略する */
.breadcrumb li:last-child span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 22ch;
}
@media (min-width: 720px) {
  .breadcrumb li:last-child span { max-width: 44ch; }
}

/* 引用 */
.pull-quote {
  margin-top: 1.75rem;
  padding-left: 1.375rem;
  border-left: 1px solid var(--accent-soft);
}
.pull-quote p {
  font-size: clamp(1.0625rem, .9rem + .8vw, 1.25rem);
  line-height: 1.9;
  font-weight: 500;
  color: var(--ink);
}
@media (min-width: 960px) {
  .pull-quote { margin-top: 2.125rem; padding-left: 1.75rem; }
}

/* 番号つきの箱（/articles/ の本文で使用） */
.article-body .num-box {
  margin-top: 1.375rem;
  padding-left: 1.375rem;
  border-left: 1px solid var(--line-strong);
}
.article-body .num-box ol {
  display: grid;
  gap: .625rem;
  counter-reset: numbox;
}
.article-body .num-box li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6875rem;
  font-size: .90625rem;
  line-height: 1.8;
  counter-increment: numbox;
  list-style: none;
}
.article-body .num-box li::before {
  content: counter(numbox, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 2.1;
}

.article-note {
  margin-top: 1.375rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-panel);
  background: var(--surface);
  font-size: .78125rem;
  line-height: 1.9;
  color: var(--body);
}
@media (min-width: 960px) {
  .article-note { font-size: .8125rem; }
}

/* /articles/ の目次（コラムは columns.css で置き換え） */
.toc {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.toc__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--muted);
}
.toc ol { margin-top: .5rem; display: grid; }
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .84375rem;
  line-height: 1.6;
  color: var(--body);
}
.toc a:hover { color: var(--accent); }

/* /articles/ の一覧（ガイド） */
.card-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
.article-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-card-sm);
  background: var(--surface);
  box-shadow: var(--shadow-diffused);
  color: inherit;
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease-spring);
}
.article-card:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.article-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5625rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
}
.article-card__title { margin-top: .6875rem; font-size: 1.03125rem; line-height: 1.6; font-weight: 700; }
.article-card__excerpt { margin-top: .5rem; font-size: .84375rem; line-height: 1.85; color: var(--body); }
.article-card__date { margin-top: .75rem; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }

.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6875rem;
  border-radius: 999px;
  font-family: var(--font-ja);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--accent-wash);
  color: var(--accent-deep);
}

/* /articles/ 一覧の見出し（renderIndexPage が使う） */
.section-title {
  font-size: clamp(1.4375rem, 1rem + 1.9vw, 2.375rem);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.015em;
}
.section-lead {
  margin-top: 1rem;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.09375rem);
  line-height: 2.05;
  color: var(--body);
  max-width: 34em;
}

/* ---------- 運営・法務ページ ---------- */
.legal-intro {
  margin-top: 1rem;
  font-size: .90625rem;
  line-height: 2;
  color: var(--body);
}
.legal-meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
}
.legal-section {
  margin-top: 2.125rem;
  padding-top: 1.875rem;
  border-top: 1px solid var(--line);
}
.legal-section__title {
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 700;
}
.legal-section p {
  margin-top: .8125rem;
  font-size: .90625rem;
  line-height: 2;
  color: var(--body);
}
.legal-section ul {
  margin-top: .8125rem;
  padding-left: 1.25em;
  list-style: disc;
}
.legal-section li {
  margin-top: .5rem;
  font-size: .90625rem;
  line-height: 1.9;
  color: var(--body);
}
.legal-table {
  margin-top: 1rem;
  border-top: 1px solid var(--line-strong);
  display: grid;
}
.legal-table > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.legal-table dt { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.legal-table dd { margin-top: .3125rem; font-size: .90625rem; line-height: 1.9; color: var(--body); }
@media (min-width: 900px) {
  .legal-table > div { grid-template-columns: 220px minmax(0, 1fr); display: grid; gap: 2.5rem; }
  .legal-table dd { margin-top: 0; }
}
.legal-callout {
  margin-top: 1.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line-whisper);
  border-radius: var(--radius-panel);
  background: var(--surface);
  font-size: .84375rem;
  line-height: 1.9;
  color: var(--body);
}

.save-feedback {
  margin-top: .875rem;
  font-size: .84375rem;
  font-weight: 500;
  color: var(--accent-deep);
  min-height: 1.5em;
}

/* ---------- 絞り込みの空表示（コラム一覧） ---------- */
.filter-empty {
  margin-top: 1.5rem;
  padding: 1.5rem 0;
  color: var(--body);
  font-size: .875rem;
  display: none;
}
.filter-empty.is-visible { display: block; }