@charset "UTF-8";
/* =========================================================
   クラコツ（コツコツ得する暮らしのコツ） — デザイン 案 A「Editorial Magazine（暮らしの雑誌）」最終版
   紙のようなオフホワイト、墨に近いインク、髪の毛のように細い罫線、ゆとりのある余白。
   和文は Zen Kaku Gothic New（明朝は使わない）、欧文のアクセントは Fraunces のイタリック。
   アクセントはテラコッタ 1 色＋くすみ色。カテゴリ色は彩度を落とし、点や細い線にだけ使う。
   site.css（restartlife 流用の土台）の後に読み、上書きする。
   決まりごと
   ・番号は意味のあるところだけ: 「No.」は「まず読みたい記事」の通し番号、01–05 は「見直しの順番」、01–08 はカテゴリの索引（目次帯・扉・サイドバー）。
     順番の無いもの（表紙の 3 つの約束・ジャンル一覧）には番号を付けない。
   ・hover の動きは @media (hover: hover) の中だけ。prefers-reduced-motion では動きを止める。
   ・見出しと 1〜3 行の短い文は文節で折り返す（word-break: auto-phrase。非対応ブラウザは通常の折り返し）。数行にわたる散文は字詰め（右端を揃える）。
     カード・特集・サイドバーの題だけは、生成時に入れた <wbr> と keep-all で折り返す（どのブラウザでも語の中で切らない）。
   ========================================================= */

:root {
  --paper:       #f7f3ec;
  --paper-2:     #f0e9dd;
  --paper-3:     #e8dfd0;
  --surface:     #fdfbf7;
  --ink:         #24201b;
  --ink-2:       #443d35;
  --mute:        #685f55;
  --line:        #d6ccbd;
  --line-soft:   #e5dccf;
  --accent:      #a9553a;   /* テラコッタ（大きな数字・線） */
  --accent-deep: #96472d;   /* 小さな文字に使うテラコッタ（紙の上で AA） */
  --accent-pale: #f2e0d2;
  --accent-light:#f0c4a6;   /* 墨の地の上の文字・フォーカス枠（墨に対して 9:1） */
  --dusk:        #566b7c;   /* くすんだ青（2 色目） */
  --pr-bg:       #f8e8cb;   /* PR 表記の地（淡いからし）。注意書き（紙色）と区別する */
  --pr-line:     #e2c48f;

  /* 記事の h1 の inline style が var(--navy) を参照する。site.css も多用するので墨色に寄せて必ず定義する */
  --navy:        var(--ink);
  --navy-deep:   #1c1915;
  --text:        #221d18;
  --text-mute:   var(--mute);
  --border:      var(--line);
  --soft:        var(--paper-2);
  --cream:       var(--paper);
  --tint:        var(--paper-2);
  --bg:          var(--paper);
  --cyan:        var(--accent-deep);
  --cyan-pale:   var(--accent-pale);
  --orange:      var(--accent);
  --radius:      2px;
  --radius-lg:   4px;
  --shadow:      none;

  --wide:        1200px;
  --pad:         20px;
  --mast-h:      0px;       /* 追従時に上へ流すマストヘッドの高さ（720px 以上で設定） */
  --font-ja:     "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-head:   var(--font-ja);
  --font-serif:  "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", serif;   /* 読み込み前・失敗時は Times より形の近い Georgia */
  --en-display:  64px;      /* 英字の大見出し（セクション・扉・固定ページ）の大きさ。720px 以上で共通 */
  --font-en:     var(--font-serif);
  --ease:        cubic-bezier(.2, .7, .2, 1);
  /* 紙の質感: 小さなノイズのタイルを地（background）に敷く。文字や画像の上には乗せない */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 外部リンクの印（↗） */
  --icon-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E");

  /* カテゴリ色（彩度を落として揃える。点・線にだけ使う） */
  --c-furusato:     #b0654a;
  --c-takuhaishoku: #a9803f;
  --c-shokuhin:     #7d8150;
  --c-kaden:        #5b7487;
  --c-nichiyohin:   #5f8476;
  --c-kagu:         #87664d;
  --c-ryoko:        #5f8698;
  --c-kakei:        #7a5f72;
}
@media (min-width: 720px) { :root { --pad: 32px; --mast-h: 92px; } }

/* ---------- 土台 ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
@media (min-width: 720px) { html { scroll-padding-top: 72px; } }
body {
  background: var(--grain) 0 0 / 160px 160px, var(--paper);
  color: var(--text);
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .025em;
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
  line-break: strict;   /* 行頭に長音・小書きの仮名（ー ッ ャ など）を置かない */
}
/* ⚠️ Google Fonts 版の Zen Kaku Gothic New は palt / halt / chws を持たないので、約物の詰めは font-feature-settings では効かない。
   見出しの文中の「、」「。」は、テンプレートが <span class="yk"> で包み、負のマージンで半角分を詰める（.yk）。 */
h1, h2, h3, h4 { font-family: var(--font-ja); font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.yk { margin-inline-end: -.45em; }
.yk--open { margin-inline-end: 0; margin-inline-start: -.45em; }
/* 本文の「250〜500g」「6 か月〜1 年」のような範囲を「〜」の後ろで割らない（build-site.mjs の keepNumbers が「〜」と直後の数字を包む。数字と単位の間の空白は NBSP にしてある） */
.nw { white-space: nowrap; }
/* 見出し・リード文は文節で折り返し、行の長さを揃える（「返礼｜品」「す。」だけの行を作らない） */
h1, h2, h3, h4, .section__title, .kstep__item strong, .genre-tile__body strong,
.faq summary, .related a, .hero-points strong {
  word-break: auto-phrase; text-wrap: balance;
}
/* カード・特集・サイドバー・商品紹介の枠の題は、生成時に文節の切れ目へ <wbr> を入れてある（build-site.mjs の headText）。
   auto-phrase は「買う方｜法」「買い｜回り」と語の中で切ることがあり、Safari・Firefox は未対応なので使わない。
   keep-all で、<wbr>・空白・約物の後ろでだけ折り返す（入りきらない長い語だけは anywhere で折る＝はみ出さない） */
.post-card__title, .feature__title, .side-posts__title, .aff-box__title { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
/* サイドバーの紹介文（240〜288px の狭い段）も同じ組み。auto-phrase は「ふるさと｜納税」と語の中で切る */
.side-box__text { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
/* 1〜3 行の短い文（リード・手順・目次）は文節で折り返す */
.hero__lead, .kstep__item p, .hero-points__text {
  word-break: auto-phrase; text-wrap: pretty;
}
/* ジャンルの説明は 2 行程度。文節で折り返し、行の長さを揃える（「方法。」だけの行を作らない） */
.genre-tile__lead { word-break: auto-phrase; text-wrap: balance; }
/* 数行にわたる散文（固定ページの段落・FAQ の答え）は記事本文（.article p）と同じ字詰めの組み。右端が揃う。
   文節で切ると右端が大きく波打つ（行末が 10 文字分以上空く行が出る） */
.section--page p, .faq__a { word-break: normal; line-break: strict; text-wrap: pretty; }
/* カード・特集の説明は 2〜3 行なので balance で行の長さを揃える（Chromium の pretty は和文の 2 文字の最終行を防がない） */
.feature__desc, .post-card__desc { text-wrap: balance; }
.policy-box p { text-wrap: pretty; }
/* 箇条書き: スマホは字詰め＋balance（文節で切ると右端に大きな穴が開く。balance で最終行が「す。」だけにならない）。
   720px 以上の広い段は文節で折り返す（balance は 1 行強の項目を 6〜7 割の 2 行に割るので使わない） */
.article li, .section--page li { word-break: normal; text-wrap: balance; }
@media (min-width: 720px) { .article li, .section--page li { word-break: auto-phrase; text-wrap: pretty; } }
/* 目次の項目は 1〜2 行の見出しなので、どの幅でも文節で折り返す（上の箇条書きの規則より強く） */
.article .article__toc li { word-break: auto-phrase; text-wrap: pretty; }
/* 数字と単位の間は NBSP なので「2025 年 12 月 27 日〜2026 年 1 月 4 日）」が 1 つの塊になり、狭い段では右へはみ出す。
   入りきらない塊だけをその場で折る（break-word は他の行の折り返し位置も、表の列幅の計算も変えない） */
.article p, .article li { overflow-wrap: break-word; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .28em; }
a:hover { color: var(--accent-deep); }
::selection { background: var(--accent-pale); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 1px; }
img { max-width: 100%; height: auto; }
.wrap { padding: 0 var(--pad); }
.wrap--wide { max-width: var(--wide); }

/* =========================================================
   ヘッダー（誌名＝マストヘッド＋目次帯）
   スマホ: ロゴの行＋カテゴリ帯（計 100px 未満）がまるごと追従。下スクロールで隠れ、上スクロールで出る（site.js）。
   720px 以上: マストヘッドの行（高さ --mast-h）は流れて消え、カテゴリ帯だけが上端に残る（top を負にした sticky）。
   1024px 以上: 追従中だけ、カテゴリ帯の左に小さなロゴが出る（.is-stuck）。
   JS が無いときは隠れない・小さなロゴも出ないだけで、普通に表示・追従する。
   ========================================================= */
.site-header {
  position: sticky; top: calc(-1 * var(--mast-h)); z-index: 40;
  background: var(--grain) 0 0 / 160px 160px, var(--paper);
  border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .35s var(--ease), box-shadow .3s;
}
/* マストヘッドの中（ロゴ・運営者情報・広告掲載について）にキーボードのフォーカスがある間は、ヘッダー全体を上端に出す（隠れたまま操作させない） */
.site-header:has(.site-header__inner :focus-visible) { top: 0; }
.site-header.is-stuck { box-shadow: 0 12px 24px -22px rgba(36, 32, 27, .6); }
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
.site-header__inner { max-width: var(--wide); margin: 0 auto; padding: 4px var(--pad); display: flex; justify-content: center; align-items: center; }
.site-header__journal, .site-nav { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; padding: 4px 0; line-height: 1.25; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { flex: 0 0 30px; width: 30px; height: 30px; }
/* ロゴ画像（assets/img/logo.webp）。題字の代わりに置き、タグラインだけ文字で添える。高さで指定し幅は比率どおり（1000×663） */
.brand__logo { display: block; flex: 0 0 auto; width: auto; height: 52px; }   /* 横長ロゴ（1400×426）。タグラインはロゴの中にあるので文字では添えない */
.brand--logo { padding: 4px 0; }
.brand__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* 題字の字間は名前の長さで調整（短い名前は広く、長い名前は詰める。--chars は文字数） */
.brand__name { font-family: var(--font-ja); font-size: 17px; font-weight: 700; letter-spacing: clamp(.06em, calc(.28em - var(--chars, 8) * .02em), .22em); white-space: nowrap; }
.brand__sub { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.4; color: var(--mute); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64vw; }
@media (min-width: 720px) {
  .site-header__inner { height: var(--mast-h); padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .brand { grid-column: 2; gap: 14px; }
  .brand__mark { flex-basis: 40px; width: 40px; height: 40px; }
  .brand__name { font-size: 26px; letter-spacing: clamp(.08em, calc(.3em - var(--chars, 8) * .02em), .24em); }
  .brand__sub { margin-top: 5px; font-size: 11.5px; letter-spacing: .18em; max-width: none; }
  .brand__logo { height: 76px; }
  .site-nav { grid-column: 3; justify-self: end; display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; line-height: 1.7; }
  .site-nav a { color: var(--ink-2); text-decoration: none; letter-spacing: .1em; font-weight: 500; white-space: nowrap; }
  .site-nav a:hover { color: var(--accent-deep); }
}
@media (min-width: 1024px) {
  .site-header__journal { display: block; grid-column: 1; grid-row: 1; justify-self: start; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
  .site-header__journal::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: .32em; background: var(--accent); }
  .site-nav { flex-direction: row; gap: 24px; }
}

/* カテゴリ（誌面の目次帯）。上は二重罫、スマホは横スクロール */
.site-header__bar { position: relative; border-top: 3px double var(--ink); border-bottom: 1px solid var(--line); }
.cat-bar { display: block; background: none; }
.cat-bar__inner {
  --bar-mask: linear-gradient(90deg, #000 0, #000 82%, transparent); --bar-fade-l: 32px;
  display: flex; gap: 0; overflow-x: auto; max-width: var(--wide); margin: 0 auto; padding: 0 calc(var(--pad) - 12px);
  scroll-padding-inline: 16px 22%;   /* フォーカスで送られた項目を、右端のフェードの外に止める */
  scrollbar-width: none; -webkit-mask-image: var(--bar-mask); mask-image: var(--bar-mask);
}
.cat-bar__inner::-webkit-scrollbar { display: none; }
/* 末尾の余白はフェード（右 18%）と同じ幅。最後の項目まで送ったとき、薄くならずに読める */
.cat-bar__inner::after { content: ""; flex: 0 0 18%; }
/* 送られて左にも続きがあるとき（site.js が .is-scrolled）: 左端にも短いフェード（--bar-fade-l）。
   site.js は送った項目・フォーカスした項目の文字をフェードの終わりより右に止めるので、薄くなるのは手前の項目の端だけ */
.cat-bar__inner.is-scrolled { --bar-mask: linear-gradient(90deg, transparent 0, #000 var(--bar-fade-l), #000 82%, transparent); }
.cat-bar__item {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px;
  min-height: 45px; padding: 12px 12px 13px; border-radius: 0; background: none;   /* タップ領域 44px 以上（代わりのフォントで表示されても 45px。帯の高さも変わらない） */
  font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* 帯は overflow で上下が切れるので、フォーカス枠は内側に描く */
.cat-bar__item:focus-visible { outline-offset: -4px; }
.cat-bar__no { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; letter-spacing: 0; color: var(--accent-deep); }
.cat-bar__item::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
/* 全項目が 1 行に収まる幅では、中央に揃えてフェード・末尾の余白をやめる（site.js が項目の幅を実測して .is-fit / .is-scroll を付ける）。
   JS が無いとき: 720px 未満は横スクロール、720px 以上は中央揃え（safe: はみ出しても左端は切れず、横に送れる） */
.cat-bar__inner.is-fit { justify-content: center; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
.cat-bar__inner.is-fit::after { content: none; }
@media (min-width: 720px) {
  .cat-bar__inner:not(.is-scroll) { justify-content: safe center; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .cat-bar__inner:not(.is-scroll)::after { content: none; }
}
.cat-bar__item:hover { background: none; color: var(--ink); }
.cat-bar__item.is-current { background: none; color: var(--ink); font-weight: 700; }
.cat-bar__item.is-current::after { transform: scaleX(1); }
@media (hover: hover) { .cat-bar__item:hover::after { transform: scaleX(1); } }
.bar-brand { display: none; }
@media (min-width: 1024px) {
  .cat-bar__item { padding: 13px 14px 14px; }
  .cat-bar__item::after { left: 14px; right: 14px; }
  .bar-brand {
    position: absolute; top: 50%; left: max(var(--pad), calc(50% - var(--wide) / 2 + var(--pad))); z-index: 1;   /* 本文の左端に揃える */
    display: inline-flex; align-items: center; gap: 10px; transform: translateY(-50%);
    color: var(--ink); text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
  }
  .site-header.is-stuck .bar-brand { opacity: 1; visibility: visible; transition: opacity .3s; }
  .bar-brand .brand__mark { flex-basis: 28px; width: 28px; height: 28px; }
  .bar-brand__logo { display: block; width: auto; height: 40px; }
  .bar-brand__name { display: none; max-width: 128px;   /* 本文の左端から目次帯の先頭までに収まる幅（1280px 以上で一定） */ overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
}
@media (min-width: 1280px) { .bar-brand__name { display: inline; } }

/* ---------- パンくず ---------- */
.breadcrumb { padding: 16px 0 0; font-size: 12px; color: var(--mute); letter-spacing: .05em; line-height: 1.7; }
/* 1 行に固定し、長い現在地（最後の項目）だけを末尾省略にする。フォントの差し替えで 1 行↔2 行が変わらない（CLS を出さない）。全文は h1 にある */
.breadcrumb ol { flex-wrap: nowrap; }
.breadcrumb li { flex: none; pointer-events: none; }   /* 次の項目の箱が、前のリンクの広げた右端を覆って押せなくしないように（リンクだけが押せる） */
.breadcrumb li a { pointer-events: auto; }
.breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumb li + li::before { content: "/"; margin: 0 9px; color: var(--line); }
/* 行内要素の padding は行の高さを変えず、押せる範囲だけ広げる（縦 45px・横は左右 10px ずつ足して 44px 以上）。横は同じ量の負のマージンで見た目の位置を保つ */
.breadcrumb a { margin: 0 -10px; padding: 14px 10px; color: var(--mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- セクションと見出し ---------- */
.section { padding: 56px 0; }
.section--tint { background: var(--paper-2); }
@media (min-width: 720px) { .section { padding: 96px 0; } }
.sec-head { position: relative; margin-bottom: 28px; }
.section .section__label, .section__label { display: flex; align-items: center; gap: 18px; margin: 0; }
.section__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.section__en {
  font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 44px; line-height: 1;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap; font-variation-settings: "opsz" 144, "WONK" 0;
}
.section .section__title, .section__title { margin-top: 12px; font-size: 18px; line-height: 1.6; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
@media (min-width: 720px) {
  .sec-head { margin-bottom: 44px; }
  .section__en { font-size: var(--en-display); }
  .section .section__title, .section__title { font-size: 20px; margin-top: 16px; }
}
.sec-head--sub { margin-top: 64px; }
.sec-head--sub .section__en { font-size: 36px; }
.section .section__title--sub { font-size: 17px; }
.empty-note {
  grid-column: 1 / -1; margin: 0; padding: 28px 0; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; font-size: 14px; color: var(--ink-2); text-align: center;
}
.empty-note::before { content: "Coming soon"; display: block; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--accent-deep); margin-bottom: 4px; letter-spacing: 0; }

/* ---------- カテゴリの点（チップは控えめに） ---------- */
.cat-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; background: none;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--ink-2); line-height: 1.4;
}
.cat-chip::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--chip, var(--accent)); }
.cat-chip--furusato { --chip: var(--c-furusato); } .cat-chip--takuhaishoku { --chip: var(--c-takuhaishoku); }
.cat-chip--shokuhin { --chip: var(--c-shokuhin); } .cat-chip--kaden { --chip: var(--c-kaden); }
.cat-chip--nichiyohin { --chip: var(--c-nichiyohin); } .cat-chip--kagu { --chip: var(--c-kagu); }
.cat-chip--ryoko { --chip: var(--c-ryoko); } .cat-chip--kakei { --chip: var(--c-kakei); }
.cat-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; color: var(--surface); background: var(--accent); }
.cat-icon svg { width: 24px; height: 24px; }
.cat-icon--sm { width: 28px; height: 28px; } .cat-icon--sm svg { width: 15px; height: 15px; }
.cat-icon--furusato { background: var(--c-furusato); } .cat-icon--takuhaishoku { background: var(--c-takuhaishoku); }
.cat-icon--shokuhin { background: var(--c-shokuhin); } .cat-icon--kaden { background: var(--c-kaden); }
.cat-icon--nichiyohin { background: var(--c-nichiyohin); } .cat-icon--kagu { background: var(--c-kagu); }
.cat-icon--ryoko { background: var(--c-ryoko); } .cat-icon--kakei { background: var(--c-kakei); }

/* =========================================================
   トップ: 表紙
   スマホ・タブレット: 大きなイラストの左下に、紙の地の見出し札が小さく食い込む。
   1024px 以上: 左に見出し・リード・導線、右にイラスト（重ねない。人物に文字をかけない）。
   ========================================================= */
.home-hero { position: relative; background: none; border: 0; overflow: clip; }
.home-hero__inner { position: relative; max-width: var(--wide); margin: 0 auto; display: grid; }
.home-hero__media { position: relative; margin: 0; overflow: hidden; }   /* 画像のズームアウト（motion）を枠で切る */
.home-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 50%; border-radius: 0; box-shadow: none; }
.home-hero__ph { display: flex; gap: 12px; justify-content: center; padding: 80px 0; background: var(--paper-2); }
/* 札の右端＝本文の右端（右の切り欠きは余白 --pad と同じ幅）。中身の右端を下の罫と揃える */
.home-hero__text { position: relative; z-index: 2; margin: -40px var(--pad) 0 0; padding: 22px 0 0 var(--pad); background: var(--grain) 0 0 / 160px 160px, var(--paper); }
.home-hero__kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.3; letter-spacing: .01em; color: var(--accent-deep); }
.home-hero__kicker::before { content: ""; flex: 0 0 28px; height: 1px; background: currentColor; }
.home-hero__kicker span { margin: 0 .1em; color: var(--mute); }
.home-hero h1 { margin-top: 14px; font-size: 30px; line-height: 1.5; letter-spacing: .05em; font-weight: 700; color: var(--ink); }
.home-hero .hero__lead { margin-top: 14px; font-size: 14.5px; line-height: 1.95; color: var(--ink-2); max-width: 30em; }
/* 表紙の下の導線（「ジャンルから探す」「まず読みたい記事」）: 細い罫の下線＋矢印 */
.home-hero__guide { display: grid; margin-top: 22px; border-top: 1px solid var(--ink); }
.home-hero__guide a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 4px 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: var(--ink); text-decoration: none;
}
.home-hero__guide a::after { content: "→"; font-size: 17px; font-weight: 400; line-height: 1; color: var(--accent); transition: transform .3s var(--ease); }
@media (hover: hover) {
  .home-hero__guide a:hover { color: var(--accent-deep); }
  .home-hero__guide a:hover::after { transform: translateX(5px); }
}

.hero-points { max-width: var(--wide); margin: 40px auto 0; padding: 0 var(--pad); display: grid; gap: 0; }
/* 3 つの約束には順番が無いので番号は付けない。記事の h2 と同じ「墨の罫＋テラコッタの短い印」 */
.hero-points li {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px;
  padding: 14px 0 13px; margin: 0; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); font-size: 13px;
}
.hero-points li::before { content: ""; position: absolute; left: 0; top: -2px; width: 24px; height: 3px; background: var(--accent); }
.hero-points li:first-child { border-top-color: var(--ink); }
.hero-points li:last-child { border-bottom: 1px solid var(--line); }
.hero-points strong { font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.hero-points strong::before { content: none; }
.hero-points__text { color: var(--ink-2); font-size: 12.5px; letter-spacing: .03em; line-height: 1.7; }

@media (min-width: 720px) {
  .home-hero__inner { padding: 32px var(--pad) 0; }
  .home-hero__img { aspect-ratio: 16 / 10; }
  .home-hero__text { margin: -48px 30% 0 0; padding: 32px 40px 0 0; }
  .home-hero h1 { font-size: 42px; letter-spacing: .05em; }
  .home-hero .hero__lead { font-size: 15px; }
  .home-hero__guide { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 26px; border-top: 0; }
  .home-hero__guide a { gap: 22px; padding: 6px 0 7px; border-bottom-color: var(--ink); font-size: 14.5px; }
  .hero-points { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
  .hero-points li { grid-template-columns: minmax(0, 1fr); padding: 22px 24px 22px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
  .hero-points li::before { width: 36px; left: 24px; }
  .hero-points li + li { border-left: 1px solid var(--line); }
  .hero-points li:first-child { padding-left: 0; }
  .hero-points li:first-child::before { left: 0; }
  .hero-points strong { font-size: 15px; }
}
@media (min-width: 1024px) {
  .home-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: 40px; }
  .home-hero__media { grid-column: 6 / 13; grid-row: 1; }
  .home-hero__img { aspect-ratio: 16 / 11; }
  .home-hero__text { grid-column: 1 / 6; grid-row: 1; margin: 0; padding: 0 8px 0 0; background: none; }
  .home-hero__kicker { font-size: 17px; }
  .home-hero h1 { margin-top: 22px; font-size: clamp(36px, 3.55vw, 52px); line-height: 1.45; }
  .home-hero .hero__lead { margin-top: 20px; }
  .home-hero__guide { margin-top: 30px; }
  .hero-points { margin-top: 48px; }
}

/* ---------- ジャンルから探す（誌面の索引） ---------- */
.genre-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border-top: 1px solid var(--ink); }
.genre-tile {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  text-decoration: none; color: var(--ink); transition: none;
}
.genre-tile:hover { transform: none; box-shadow: none; color: var(--ink); }
.genre-tile__media { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.genre-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
/* 1023px まで（76px の丸）はカテゴリ色の線画アイコン。1600px の扉絵 8 枚（計 1.3MB）を小さな丸のために読ませない。
   扉絵は loading="lazy" なので、display: none の間は読み込まれない。1024px 以上は扉絵のアーチ（絵が無いカテゴリはアイコンのまま） */
.genre-tile__img { display: none; }
.genre-tile__media > .cat-icon { width: 100%; height: 100%; border-radius: 0; }
.genre-tile__media > .cat-icon svg { width: 32px; height: 32px; }
@media (min-width: 1024px) {
  .genre-tile__img { display: block; }
  .genre-tile__img + .cat-icon { display: none; }
  .genre-tile__media > .cat-icon svg { width: 25%; height: 25%; }
}
.genre-tile__body { display: block; min-width: 0; padding-right: 64px; }
.genre-tile__en { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--mute); letter-spacing: .01em; }
.genre-tile__body strong { display: block; margin-top: 2px; font-size: 16.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink); line-height: 1.5; }
.genre-tile__lead { display: block; margin-top: 4px; font-size: 13px; line-height: 1.75; color: var(--ink-2); letter-spacing: .02em; }
.genre-tile em { position: absolute; right: 0; top: 18px; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--ink-2); }
.genre-tile em.is-soon { color: var(--mute); }
@media (hover: hover) { .genre-tile:hover .genre-tile__img { transform: scale(1.06); } }
@media (min-width: 720px) and (max-width: 1023.98px) {
  .genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .genre-tile:nth-child(-n+2) { border-top: 1px solid var(--ink); }
}
@media (min-width: 1024px) {
  .genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 52px; border-top: 0; }
  .genre-tile { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; padding: 0; border: 0; }
  .genre-tile__media { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 999px 999px 0 0; }
  .genre-tile__body { padding: 0 0 18px; border-bottom: 1px solid var(--line); }
  .genre-tile__body strong { font-size: 18px; margin-top: 6px; }
  .genre-tile__lead { min-height: 3.5em; }
  .genre-tile em { position: static; display: block; margin-top: 10px; }
}
@media (min-width: 1024px) and (hover: hover) { .genre-tile:hover strong { color: var(--accent-deep); } }

/* ---------- まず読みたい記事（特集：大 1＋小 2。番号 No. はここだけ） ---------- */
.section--feature { background: var(--paper-2); }
.feature { display: grid; gap: 36px; }
.feature__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; text-decoration: none; color: var(--ink); }
.feature__item:hover { color: var(--ink); }
.feature__media { display: block; overflow: hidden; background: var(--paper-3); }
.feature__media img, .feature__media .post-card__ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; transition: transform .8s var(--ease); }
.feature__body { display: block; min-width: 0; }
.feature__no { display: block; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1; color: var(--accent-deep); letter-spacing: 0; }
.feature__meta { display: block; margin-top: 10px; }
.feature__title { display: block; margin-top: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.65; letter-spacing: .04em; }
.feature__desc { display: block; margin-top: 12px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.feature__more { display: none; }
.feature__item--lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
.feature__item--lead .feature__media { margin: 0 calc(-1 * var(--pad)); }
.feature__item--lead .feature__media img { aspect-ratio: 4 / 3; }
/* スマホ: 札の右端＝本文の右端（切り欠きは表紙・扉と同じ --pad の幅） */
.feature__item--lead .feature__body { position: relative; margin: -40px 0 0 calc(-1 * var(--pad)); padding: 20px 0 0 var(--pad); background: var(--paper-2); }
.feature__item--lead .feature__no { font-size: 34px; }
.feature__item--lead .feature__title { font-size: 20px; line-height: 1.6; }
.feature__item--lead .feature__more {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 16px;
  font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--ink); letter-spacing: 0;
}
.feature__item--lead .feature__more::after { content: ""; width: 40px; height: 1px; background: var(--ink); transition: width .35s var(--ease); }
@media (hover: hover) {
  .feature__item:hover .feature__media img { transform: scale(1.04); }
  .feature__item:hover .feature__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--accent); }
  .feature__item--lead:hover .feature__more::after { width: 64px; }
}
@media (min-width: 720px) {
  .feature__item { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .feature__item--lead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feature__media img, .feature__media .post-card__ph { aspect-ratio: 4 / 3; }
  .feature__title { font-size: 16.5px; }
  .feature__item--lead .feature__media { margin: 0; }
  .feature__item--lead .feature__body { margin: -72px 18% 0 0; padding: 28px 40px 0 0; }
  .feature__item--lead .feature__title { font-size: 24px; }
}
@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 56px; row-gap: 44px; align-items: start; }
  .feature__item--lead { grid-row: span 2; }
  .feature--n2 .feature__item--lead { grid-row: auto; }
  .feature--n1 { grid-template-columns: minmax(0, 1fr); }
  .feature--n1 .feature__item--lead { grid-row: auto; }
  .feature__item:not(.feature__item--lead) { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
  .feature__item:not(.feature__item--lead) .feature__body { padding-top: 18px; }
  .feature__item:not(.feature__item--lead) .feature__media img { aspect-ratio: 16 / 9; }
  .feature__item:not(.feature__item--lead) .feature__no { font-size: 26px; }
  .feature__item:not(.feature__item--lead) .feature__title { font-size: 17px; }
  /* 表紙・扉と同じく、PC では画像に札を重ねない（No.01 は画像の下） */
  .feature__item--lead .feature__body { margin: 0; padding: 26px 0 0; background: none; }
  .feature__item--lead .feature__title { font-size: 26px; line-height: 1.6; }
  .feature__item--lead .feature__no { font-size: 44px; }
}

/* ---------- 家計の見直しは、この順番で ---------- */
.kstep { display: grid; gap: 0; margin-top: 0; counter-reset: none; border-top: 1px solid var(--ink); }
.kstep__item {
  position: relative; display: grid; align-content: start; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; align-items: start;
  padding: 20px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.kstep__num { width: auto; height: auto; background: none; border-radius: 0; display: block; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 40px; line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.kstep__body { min-width: 0; }
.kstep__item a { text-decoration: none; color: var(--ink); }
.kstep__item a::after { content: ""; position: absolute; inset: 0; }
.kstep__item strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; color: var(--ink); }
.kstep__item p { margin-top: 6px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.kstep__cat { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--accent-deep); }
.kstep__cat::after { content: ""; width: 24px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
@media (hover: hover) {
  .kstep__item:hover .kstep__cat::after { width: 44px; }
  .kstep__item:hover strong { color: var(--accent-deep); }
}
/* 900–1279px: 1 列のままだと文字が左の半分にしかなく右が空くので、目次のような 3 列の行（番号｜題｜説明＋カテゴリ）にする */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .kstep__item { grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; }
  .kstep__body { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); column-gap: 40px; align-items: baseline; }
  .kstep__body > a { grid-row: 1 / 3; }
  .kstep__body > p, .kstep__cat { grid-column: 2; justify-self: start; }
  .kstep__item p { margin-top: 0; }
  .kstep__cat { margin-top: 6px; }
}
/* 5 列は 1 列が 200px 以上取れる 1280px から（それ未満は番号を左に置いた横長の列） */
@media (min-width: 1280px) {
  .kstep { grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .kstep__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 28px 22px 30px; border-bottom: 0; }
  .kstep__body { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
  .kstep__cat { margin-top: auto; padding-top: 12px; }
  .kstep__item + .kstep__item { border-left: 1px solid var(--line); }
  .kstep__item:first-child { padding-left: 0; }
  .kstep__item:last-child { padding-right: 0; }
  .kstep__num { font-size: 60px; margin-bottom: 22px; }
  .section--steps { padding-bottom: 32px; }
  .kstep__item strong { font-size: 16.5px; min-height: 3.2em; }   /* 題は 2 行分の高さを取り、5 列の説明文の書き出しを揃える（1 行の題があっても） */
}

/* =========================================================
   記事カード
   スマホ: 先頭の 1 本（新着・カテゴリ）は大きく、残りは「左サムネ・右タイトル」の横長リスト。
   720px 以上: 画像主体のカード（2 列 → 1024px 以上で 3 列）。タイトルは省略せず全文を出す。
   ========================================================= */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border-top: 1px solid var(--ink); }
.post-card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  color: var(--ink); text-decoration: none; transition: none; overflow: visible;
}
.post-card:hover { box-shadow: none; transform: none; color: var(--ink); }
.post-card__media { display: block; overflow: hidden; background: var(--paper-2); }
.post-card__thumb, .post-card__ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transition: transform .8s var(--ease); }
.post-card__ph { display: flex; align-items: center; justify-content: center; color: var(--surface); background: var(--paper-3); }
.post-card__ph svg { width: 30%; height: auto; }
.post-card__ph--furusato { background: var(--c-furusato); } .post-card__ph--takuhaishoku { background: var(--c-takuhaishoku); }
.post-card__ph--shokuhin { background: var(--c-shokuhin); } .post-card__ph--kaden { background: var(--c-kaden); }
.post-card__ph--nichiyohin { background: var(--c-nichiyohin); } .post-card__ph--kagu { background: var(--c-kagu); }
.post-card__ph--ryoko { background: var(--c-ryoko); } .post-card__ph--kakei { background: var(--c-kakei); }
.post-card__body { display: block; min-width: 0; padding: 0; }
.post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.post-card .post-meta { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--mute); }
.post-card__title { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--ink); }
.post-card__desc { display: none; }
/* 400px 未満: サムネを少し小さく・題の字間を詰めて、題の段を広げる（4〜5 行の題でリストが重くならない） */
@media (max-width: 399.98px) {
  .post-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .post-card__title { letter-spacing: .02em; }
}
@media (hover: hover) {
  .post-card:hover .post-card__thumb { transform: scale(1.04); }
  .post-card:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--accent); }
}
/* 新着・カテゴリ: 先頭の 1 本は大きく（罫は下にだけ） */
.post-grid--latest, .post-grid--cat { border-top: 0; }
/* ⚠️ flex の縦並びでは align-items: stretch を必ず指定する（.post-card の start を引き継ぐと、画像の枠が読み込み前に幅 0 になり CLS が出る） */
.post-grid--latest > .post-card:first-child, .post-grid--cat > .post-card:first-child { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 22px; border-bottom-color: var(--ink); }
.post-grid--latest > .post-card:first-child .post-card__media { margin: 0 calc(-1 * var(--pad)); }
/* カテゴリ: 扉の絵のすぐ下なので、先頭の画像は全幅にせず紙の余白を残す */
.post-grid--cat > .post-card:first-child .post-card__media { margin: 0; }
.post-grid--latest > .post-card:first-child .post-card__thumb, .post-grid--cat > .post-card:first-child .post-card__thumb { aspect-ratio: 16 / 10; }
.post-grid--latest > .post-card:first-child .post-card__body, .post-grid--cat > .post-card:first-child .post-card__body { padding-top: 16px; }
.post-grid--latest > .post-card:first-child .post-card__title, .post-grid--cat > .post-card:first-child .post-card__title { margin-top: 8px; font-size: 19px; line-height: 1.6; }
.post-grid--latest > .post-card:first-child .post-card__desc, .post-grid--cat > .post-card:first-child .post-card__desc { display: block; margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
@media (min-width: 720px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; border-top: 0; }
  .post-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; }
  .post-card__body { padding-top: 16px; }
  .post-card__title { margin-top: 8px; font-size: 16.5px; line-height: 1.65; }
  .post-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
  /* 先頭の 1 本は横長の「リード記事」 */
  .post-grid--latest > .post-card:first-child, .post-grid--cat > .post-card:first-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start;
    padding-bottom: 44px; border-bottom: 1px solid var(--line);
  }
  .post-grid--latest > .post-card:first-child .post-card__media, .post-grid--cat > .post-card:first-child .post-card__media { margin: 0; }
  .post-grid--latest > .post-card:first-child .post-card__body, .post-grid--cat > .post-card:first-child .post-card__body { padding: 0; }
  .post-grid--latest > .post-card:first-child .post-card__title, .post-grid--cat > .post-card:first-child .post-card__title { margin-top: 12px; font-size: 19px; }
  .post-grid--latest > .post-card:first-child .post-card__desc, .post-grid--cat > .post-card:first-child .post-card__desc { display: block; margin-top: 14px; font-size: 14px; }
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; row-gap: 56px; }
  /* 新着は 3 列 × 3 段の誌面（リードを作らない） */
  .post-grid--latest > .post-card:first-child { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0; border-bottom: 0; }
  .post-grid--latest > .post-card:first-child .post-card__thumb { aspect-ratio: 4 / 3; }
  .post-grid--latest > .post-card:first-child .post-card__body { padding-top: 16px; }
  .post-grid--latest > .post-card:first-child .post-card__title { margin-top: 8px; font-size: 16.5px; line-height: 1.65; }
  .post-grid--latest > .post-card:first-child .post-card__desc { display: -webkit-box; margin-top: 10px; font-size: 13.5px; }
  .post-grid--cat > .post-card:first-child { align-items: center; }
  .post-grid--cat > .post-card:first-child .post-card__title { margin-top: 14px; font-size: 24px; }
}
/* 端数の組み（カテゴリの一覧・関連記事）: 最後の段に空きを作らない。
   余りが 1 本 → 段の幅いっぱいの横長カード（画像の幅は 1 列分）。3 列で余りが 2 本 → 2 本で段を半分ずつ（画像は左、題は右）。
   一覧（--cat）は先頭のリード記事を除いて数える */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .post-grid--related > .post-card:last-child:nth-child(odd),
  .post-grid--cat > .post-card:last-child:nth-child(even) {
    grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - 32px) / 2) minmax(0, 1fr); column-gap: 32px; align-items: center;
  }
  .post-grid--related > .post-card:last-child:nth-child(odd) .post-card__body,
  .post-grid--cat > .post-card:last-child:nth-child(even) .post-card__body { padding-top: 0; }
}
@media (min-width: 1024px) {
  .post-grid--related, .post-grid--cat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .post-grid--related > .post-card, .post-grid--cat > .post-card { grid-column: span 2; }
  .post-grid--cat > .post-card:first-child { grid-column: 1 / -1; }
  .post-grid--related > .post-card:last-child:nth-child(3n+1),
  .post-grid--cat > .post-card:last-child:nth-child(3n+2) {
    grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - 72px) / 3) minmax(0, 600px); column-gap: 36px; align-items: center;   /* 文の段は 600px まで（説明文の 1 行を長くしない） */
  }
  /* 余り 2 本: 1279px までは縦組みのカードのまま半分ずつ（画像 16:9）。横長にすると画像が 174px に縮み、題の段だけが縦に伸びる */
  .post-grid--related > .post-card:nth-last-child(2):nth-child(3n+1), .post-grid--related > .post-card:last-child:nth-child(3n+2),
  .post-grid--cat > .post-card:nth-last-child(2):nth-child(3n+2), .post-grid--cat > .post-card:last-child:nth-child(3n) { grid-column: span 3; }
  .post-grid--related > .post-card:nth-last-child(2):nth-child(3n+1) .post-card__thumb, .post-grid--related > .post-card:last-child:nth-child(3n+2) .post-card__thumb,
  .post-grid--cat > .post-card:nth-last-child(2):nth-child(3n+2) .post-card__thumb, .post-grid--cat > .post-card:last-child:nth-child(3n) .post-card__thumb { aspect-ratio: 16 / 9; }
  .post-grid--related > .post-card:last-child:nth-child(3n+1) .post-card__body, .post-grid--cat > .post-card:last-child:nth-child(3n+2) .post-card__body { padding-top: 0; }
}
/* 1280px 以上: 余り 2 本は「画像は左、題は右」の横長カード（画像 209px 以上） */
@media (min-width: 1280px) {
  .post-grid--related > .post-card:nth-last-child(2):nth-child(3n+1), .post-grid--related > .post-card:last-child:nth-child(3n+2),
  .post-grid--cat > .post-card:nth-last-child(2):nth-child(3n+2), .post-grid--cat > .post-card:last-child:nth-child(3n) {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 28px; align-items: start;
  }
  .post-grid--related > .post-card:nth-last-child(2):nth-child(3n+1) .post-card__thumb, .post-grid--related > .post-card:last-child:nth-child(3n+2) .post-card__thumb,
  .post-grid--cat > .post-card:nth-last-child(2):nth-child(3n+2) .post-card__thumb, .post-grid--cat > .post-card:last-child:nth-child(3n) .post-card__thumb { aspect-ratio: 4 / 3; }
  .post-grid--related > .post-card:nth-last-child(2):nth-child(3n+1) .post-card__body, .post-grid--related > .post-card:last-child:nth-child(3n+2) .post-card__body,
  .post-grid--cat > .post-card:nth-last-child(2):nth-child(3n+2) .post-card__body, .post-grid--cat > .post-card:last-child:nth-child(3n) .post-card__body { padding-top: 0; }
}

/* =========================================================
   カテゴリページ（特集の扉）
   スマホ・タブレット: イラストの左下に紙の札が小さく食い込む。1024px 以上: 左に題字、右にイラスト。
   ========================================================= */
.cat-hero { position: relative; overflow: clip; padding: 0; background: none; border: 0; }
.cat-hero--img::after { content: none; }
.cat-hero__inner { position: relative; max-width: var(--wide); margin: 0 auto; }
.cat-hero__media { position: relative; margin-top: 16px; overflow: hidden; }
.cat-hero__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cat-hero__card { position: relative; z-index: 1; padding: 32px var(--pad) 0; }
.cat-hero--img .cat-hero__card { margin: -40px var(--pad) 0 0; padding-top: 22px; padding-right: 0; background: var(--grain) 0 0 / 160px 160px, var(--paper); }
.cat-hero__label { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.3; letter-spacing: 0; color: var(--accent-deep); }
.cat-hero__no { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); }
.cat-hero__no::before { content: ""; width: 28px; height: 1px; background: var(--ink); }
.cat-hero__en { margin: 12px 0 0; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 46px; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); font-variation-settings: "opsz" 144, "WONK" 0; }
.cat-hero h1 { margin-top: 12px; font-size: 24px; line-height: 1.5; letter-spacing: .08em; font-weight: 700; color: var(--ink); }
.cat-hero .hero__lead { margin-top: 8px; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }
.cat-hero__count { display: inline-block; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .12em; color: var(--ink-2); }
.cat-hero .hero__eyebrow { display: none; }
.section--list { padding-top: 36px; }
@media (min-width: 720px) {
  .cat-hero__inner { padding: 0 var(--pad); }
  .cat-hero__media { margin-top: 20px; }
  .cat-hero__img { aspect-ratio: 16 / 8; }
  .cat-hero__card { padding: 36px 0 0; }
  .cat-hero--img .cat-hero__card { margin: -56px 0 0; width: min(600px, 72%); padding: 32px 48px 0 0; }
  .cat-hero__en { font-size: var(--en-display); }
  .cat-hero h1 { font-size: 30px; }
  .cat-hero .hero__lead { font-size: 15px; }
  .section--list { padding-top: 64px; }
}
@media (min-width: 1024px) {
  .cat-hero--img .cat-hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .cat-hero--img .cat-hero__media { grid-column: 6 / 13; grid-row: 1; margin-top: 28px; }
  .cat-hero__img { aspect-ratio: 16 / 9; }
  .cat-hero--img .cat-hero__card { grid-column: 1 / 6; grid-row: 1; width: auto; margin: 28px 0 0; padding: 0 8px 0 0; background: none; }
  .cat-hero__en { font-size: clamp(52px, 5.4vw, var(--en-display)); }   /* 左の 5/12 列に「Meal Delivery」が 1 行で入る大きさ。1186px 以上は共通の大きさ */
}

/* =========================================================
   記事ページ（誌面の読み物）
   ========================================================= */
.is-post main { background: none; }
.layout { max-width: var(--wide); margin: 0 auto; }
/* 1024px 未満: サイドバーの「まず読みたい記事」「新着記事」だけを、記事の後ろに続ける（読み終えた後の行き先） */
.sidebar { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--pad) 56px; }
@media (max-width: 1023.98px) {
  .side-box--about, .side-box--cats { display: none; }
}
/* 1024px 以上: 本文の左端・サイドバーの右端を、ヘッダーやトップの左右の端（--wide の内側）に揃える */
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: minmax(0, 720px) 288px; justify-content: space-between; column-gap: 48px; max-width: var(--wide); padding: 0 var(--pad); }
  .layout .wrap { padding: 0; max-width: 720px; margin: 0; }
  .sidebar { max-width: none; margin: 0; padding: 58px 0 0; }
}
/* 1280px 以上: 本文の段を 680px に（16.5px の本文で 1 行 40 字まで。720px だと 42 字で長い）。
   余りはサイドバーに回して 336px に（本文との溝は 120px。288px のままだと溝が 168px 空いて間延びする） */
@media (min-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 680px) 336px; }
  .layout .wrap { max-width: 680px; }
}

.article { padding: 4px 0 64px; }
.article .hero__eyebrow {
  display: inline-block; margin-top: 22px; padding-left: 40px;
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.25; letter-spacing: .01em;
  color: var(--accent-deep); text-transform: lowercase;
  background: linear-gradient(var(--accent), var(--accent)) 0 55% / 28px 1px no-repeat;
}
.article .hero__eyebrow::first-letter { text-transform: uppercase; }
.article h1 {
  font-family: var(--font-ja) !important; font-size: 23px !important; line-height: 1.6 !important; font-weight: 700 !important;
  color: var(--ink) !important; letter-spacing: .02em !important; margin-top: 12px !important;
  word-break: keep-all; overflow-wrap: anywhere;   /* 題はテンプレートが文節に <wbr> を入れる（カードの題と同じ） */
}
@media (min-width: 720px) { .article h1 { font-size: 29px !important; line-height: 1.55 !important; margin-top: 14px !important; } }
.article .post-meta { margin-top: 14px; padding-bottom: 0; font-size: 12px; letter-spacing: .14em; color: var(--mute); display: flex; align-items: center; gap: 14px; }
.article .post-meta::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
/* スマホで 2 行になるとき「更新日 2026-｜10-09」と日付の途中（ハイフンの後ろ）で折れるので、行の長さを揃えて全角空白の位置で割る */
.article .post-meta { text-wrap: balance; }
/* 題のすぐ下にも PR の札を出す（全記事に PR 表記が入る仕様なので内容は食い違わない）。
   ノート PC の最初の画面に、本文先頭の PR 表記が入らない場合の補い。本文先頭の .pr-notice はそのまま残す */
.is-post .article .post-meta::before {
  content: "PR"; flex: none; padding: 1px 10px; border-radius: 3px;
  background: var(--accent-deep); color: #fff; font-family: var(--font-ja); font-size: 13px; font-weight: 700; line-height: 1.75; letter-spacing: .12em;
}
/* アイキャッチは枠（.article__eyecatch-box）に入れる。枠が幅と余白を持ち、画像のズームアウト（motion）を枠で切る */
.article__eyecatch-box { display: block; width: calc(100% + 2 * var(--pad)); max-width: none; margin: 20px calc(-1 * var(--pad)) 0; overflow: hidden; }
.article__eyecatch { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; border-radius: 0; }
@media (min-width: 720px) { .article__eyecatch-box { width: 100%; margin: 22px 0 0; } }
@media (min-width: 1024px) { .article__eyecatch { aspect-ratio: 2 / 1; } }
.eyecatch { display: flex; align-items: center; gap: 18px; margin: 20px 0 0; padding: 0 26px; aspect-ratio: 16 / 7; border-radius: 0; color: var(--surface); background: var(--ink); }
.eyecatch--furusato { background: var(--c-furusato); } .eyecatch--takuhaishoku { background: var(--c-takuhaishoku); }
.eyecatch--shokuhin { background: var(--c-shokuhin); } .eyecatch--kaden { background: var(--c-kaden); }
.eyecatch--nichiyohin { background: var(--c-nichiyohin); } .eyecatch--kagu { background: var(--c-kagu); }
.eyecatch--ryoko { background: var(--c-ryoko); } .eyecatch--kakei { background: var(--c-kakei); }
.eyecatch svg { flex: 0 0 56px; width: 56px; height: 56px; }
.article .eyecatch__cat { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; letter-spacing: .04em; }
.article .eyecatch__title { margin-top: 4px; font-size: 19px; font-weight: 700; line-height: 1.5; }

/* PR 表記（景品表示法: はっきり読める大きさとコントラスト。淡いからしの地＋テラコッタの PR タグで、注意書きと区別する） */
.pr-notice, .article .pr-notice {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 12px 16px; border: 1px solid var(--pr-line); border-radius: 4px;
  background: var(--pr-bg); font-size: 13.5px; font-weight: 500; line-height: 1.8; letter-spacing: .02em; color: var(--ink);
}
.pr-notice::before {
  content: "PR"; flex: none; margin-top: 1px; padding: 1px 10px; border-radius: 3px;
  background: var(--accent-deep); color: #fff; font-family: var(--font-ja); font-size: 13px; font-weight: 700; line-height: 1.75; letter-spacing: .12em;
}

/* 本文（細めの書体なので、色を濃く・字間を詰め・行送りを整えて長文の疲れを減らす） */
.article p { margin-top: 1em; font-size: 16px; line-height: 1.9; letter-spacing: .025em; color: var(--text); text-wrap: pretty; }
@media (min-width: 720px) { .article p { font-size: 16.5px; line-height: 1.95; letter-spacing: .03em; } }
.article li { color: var(--text); }
.article p strong, .article li strong { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 64%, var(--accent-pale) 64%); }
.article p a:not([class]), .article li a:not([class]) { color: var(--accent-deep); text-decoration: underline; text-decoration-color: rgba(150, 71, 45, .4); }
.article p a:not([class]):hover, .article li a:not([class]):hover { text-decoration-color: currentColor; }

/* 見出し: 番号は付けない。墨の細い罫に、テラコッタの短い印を重ねる */
.article h2 {
  position: relative; margin-top: 48px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none;
  font-size: 21px; line-height: 1.6; letter-spacing: .05em; color: var(--ink);
}
.article h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; background: var(--accent); }
.article h2::after { content: none; }
@media (min-width: 720px) { .article h2 { margin-top: 72px; padding-top: 22px; font-size: 23px; } }
.article h3 {
  position: relative; margin-top: 36px; padding: 0 0 0 22px; border: 0; background: none;
  font-size: 17.5px; line-height: 1.6; letter-spacing: .05em; color: var(--ink);
}
.article h3::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--accent); }
@media (min-width: 720px) { .article h3 { font-size: 19px; margin-top: 44px; } }

.article ul, .article ol { margin-top: 16px; }
.article ul.bullets, .section ul.bullets { list-style: none; padding: 0; margin-top: 16px; }
.bullets li, .section ul.bullets li { position: relative; margin: 8px 0; padding-left: 22px; line-height: 1.9; }
.bullets li::before { content: ""; position: absolute; left: 3px; top: calc(.95em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.article ol.numbered, .section ol.numbered { list-style: none; padding: 0; margin-top: 18px; counter-reset: num; }
.article ol.numbered li, .section ol.numbered li { counter-increment: num; position: relative; margin: 12px 0; padding: 0 0 12px 40px; border-bottom: 1px solid var(--line-soft); line-height: 1.9; }
.article ol.numbered li:last-child { border-bottom: 0; padding-bottom: 0; }
.article ol.numbered li::before, .section ol.numbered li::before { content: counter(num, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--accent-deep); letter-spacing: 0; }

/* 目次（見出しと同じテラコッタの短い印。番号は付けない） */
.article__toc { margin-top: 32px; padding: 18px 0 14px; background: none; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; font-size: 14.5px; }
.article__toc strong { display: flex; align-items: baseline; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--ink-2); }
.article__toc strong::before { content: "Contents"; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 23px; letter-spacing: 0; color: var(--ink); }
.article .article__toc ol { list-style: none; padding: 0; margin-top: 10px; }
.article__toc li { position: relative; margin: 0; padding: 10px 0 10px 26px; border-top: 1px dotted var(--line); line-height: 1.7; }
.article__toc li:first-child { border-top: 0; }
.article__toc li::before { content: ""; position: absolute; left: 0; top: calc(10px + .85em); width: 14px; height: 2px; background: var(--accent); }
/* site.js が見出しへのリンクにする（JS が無いときは文字だけのまま）。行全体を押せる */
.article .article__toc li > a {
  display: block; margin: -10px 0 -10px -26px; padding: 10px 0 10px 26px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line); text-underline-offset: .34em;
}
.article .article__toc li > a:hover { color: var(--accent-deep); text-decoration-color: var(--accent); }

/* 注意書き（紙色の地＋ Note。PR 表記とは色と形で区別する） */
.note, .article .note {
  margin-top: 28px; padding: 18px 20px; background: var(--paper-2); border: 0; border-left: 0; border-radius: 0;
  font-size: 14px; line-height: 1.85; color: var(--ink-2);
}
.note strong, .article .note strong { display: flex; align-items: baseline; gap: 12px; color: var(--ink); font-size: 13px; letter-spacing: .12em; background: none; }
.note strong::before { content: "Note"; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 19px; letter-spacing: 0; color: var(--accent-deep); }
.note ul, .article .note ul { list-style: none; margin-top: 8px; padding: 0; }
.note li, .article .note li { position: relative; margin: 6px 0; padding-left: 18px; color: var(--ink-2); }
.note li::before { content: ""; position: absolute; left: 0; top: .92em; width: 8px; height: 1px; background: var(--ink-2); }

/* 表: 上辺は墨の罫。横にはみ出すときは右端に影（スクロールの手がかり）。スマホは 1 列目を固定 */
.table-wrap {
  position: relative; margin-top: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--ink);
  background:
    linear-gradient(270deg, var(--paper) 45%, rgba(247, 243, 236, 0)) 100% 0 / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(36, 32, 27, .2), rgba(36, 32, 27, 0)) 100% 0 / 14px 100% no-repeat scroll;
}
table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.7; background: none; letter-spacing: .02em; }
table.cmp th, table.cmp td { padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; background: none; word-break: auto-phrase; }
table.cmp tr:first-child th { background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid var(--ink); }
table.cmp th { background: var(--paper-2); color: var(--ink); font-weight: 700; }
table.cmp td { background: none; color: var(--text); }
table.cmp tr:nth-child(odd) td { background: none; }
table.cmp td:first-child { font-weight: 700; color: var(--ink); }
.article table.cmp { min-width: 520px; }
.article table.cmp td:first-child, .article table.cmp th:first-child { white-space: nowrap; }
.article table.cmp td, .article table.cmp th { text-wrap: balance; }
/* 「横にスクロールできます」（site.js が、はみ出す表の上にだけ入れる。高さ 0 なのでレイアウトは動かない） */
.table-hint { position: relative; height: 0; margin: 0; }
.table-hint[hidden] { display: none; }
.table-hint > span { position: absolute; right: 0; top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .08em; color: var(--accent-deep); white-space: nowrap; }
@media (max-width: 719.98px) {
  /* 固定する 1 列目は 8.5em 幅で折り返す（長い品目名で画面を占めない）。
     列の多い表は width だけだと最小幅まで縮み「うな｜ぎかば｜焼き」と語の中で折れるので min-width も付ける */
  .article table.cmp tr > :first-child {
    position: sticky; left: 0; z-index: 1; width: 9em; min-width: 9em; padding-left: 10px; padding-right: 12px; white-space: normal; word-break: auto-phrase;
    background: var(--paper); box-shadow: inset -1px 0 0 var(--line);
  }
  .article table.cmp tr > th:first-child { background: var(--paper-2); }
}

/* FAQ */
.faq { display: block; margin-top: 20px; border-top: 1px solid var(--ink); }
.faq details { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.faq summary { position: relative; padding: 17px 36px 17px 36px; font-size: 15.5px; font-weight: 700; line-height: 1.65; letter-spacing: .04em; color: var(--ink); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 2px; top: 14px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--accent); }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { content: ""; transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-deep); }
.faq .faq__a { position: relative; padding: 0 8px 20px 36px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.faq .faq__a::before { content: "A"; position: absolute; left: 3px; top: -3px; font-family: var(--font-serif); font-style: italic; font-size: 23px; line-height: 1.2; color: var(--mute); }

/* 関連リンク */
.related { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--ink); }
.related::before { content: "Related"; display: block; padding: 16px 0 6px; font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.2; color: var(--ink); }
.related a {
  position: relative; display: flex; flex-direction: column; padding: 14px 44px 14px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.65; color: var(--ink); text-decoration: none;
}
.related a::after { content: "→"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 400; color: var(--accent); transition: transform .3s var(--ease); }
.related a:hover { border-color: var(--line); color: var(--accent-deep); }
@media (hover: hover) { .related a:hover::after { transform: translate(5px, -50%); } }
.related small { order: -1; margin-bottom: 2px; font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--accent-deep); }

/* 挿絵 */
.article__figure { margin-top: 28px; }
.article__figure-img { width: 100%; height: auto; border-radius: 0; }
.article__figure figcaption { margin-top: 8px; font-size: 12px; color: var(--mute); letter-spacing: .05em; }

/* ---------- 商品紹介の枠（PR）: 誌面の細い罫と平らな面に合わせた台紙（角は PR 表記と同じ 4px、落ち影なし） ---------- */
.aff-box, .article .aff-box {
  position: relative; margin-top: 36px; padding: 30px 22px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; box-shadow: none;
}
.aff-box::before {
  content: "PR"; position: absolute; top: -12px; left: 20px; padding: 1px 10px; border-radius: 3px;
  background: var(--accent-deep); color: #fff; font-family: var(--font-ja); font-size: 13px; font-weight: 700; line-height: 1.75; letter-spacing: .14em;
}
.aff-box::after { content: "Pick up"; position: absolute; top: 9px; right: 18px; font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.4; color: var(--mute); letter-spacing: .01em; }
.article .aff-box__title { margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--ink); text-wrap: balance; }   /* .article p の pretty より優先 */
/* 補足は 1〜3 行。文節で折り返して行の長さを揃える（ボタンの真上に「ます。」だけの行を作らない） */
.article .aff-box__note { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--ink-2); word-break: auto-phrase; text-wrap: balance; }
.aff-box__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* 押せることはボタンの色と ↗ で伝える（影は付けない） */
.aff-link {
  flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 20px;
  border-radius: 4px; box-shadow: none;
  font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-align: center; text-decoration: none;
  transition: background-color .2s, transform .25s var(--ease);
}
/* 外部サイトへ移ることを示す ↗ */
.aff-link::after { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon-out) center / contain no-repeat; mask: var(--icon-out) center / contain no-repeat; transition: transform .3s var(--ease); }
.aff-link:hover { opacity: 1; }
.aff-link:active { transform: translateY(1px); }
.aff-link--rakuten, .aff-link--rakuten:hover { background: #bf0000; color: #fff; }
.aff-link--rakuten:hover { background: #a30000; }
.aff-link--amazon, .aff-link--amazon:hover { background: #ff9900; color: #111; }
.aff-link--amazon:hover { background: #f08a00; }
/* ASP（A8.net・もしも・バリューコマース等）経由の公式サイト。ブランド色は使わず墨のボタン */
.aff-link--asp, .aff-link--asp:hover { background: var(--ink); color: var(--paper); }
.aff-link--asp:hover { background: var(--navy-deep); }
.aff-pixel { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .aff-link:hover { transform: translateY(-1px); }
  .aff-link:hover::after { transform: translate(2px, -2px); }
}
@media (min-width: 720px) {
  .aff-box, .article .aff-box { padding: 32px 28px 26px; }
  .aff-link { flex: 0 1 320px; }   /* 1 本のときに幅いっぱいの帯にしない（2 本なら横に並ぶ） */
}

/* ---------- サイドバー（PC だけ） ---------- */
.side-box { margin: 0 0 40px; padding: 0; background: none; border: 0; border-radius: 0; }
.side-box--about { padding: 26px 24px 24px; background: var(--paper-2); text-align: left; }
.side-box__label { margin: 0 0 14px; font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--ink); }
.side-box__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0; }
.side-box__mark { width: 56px; height: 56px; display: block; }
.side-box__name { margin-top: 14px; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.side-box__text { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--ink-2); text-align: left; }
.side-box__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--ink); text-decoration: none; }
.side-box__more::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.side-box__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0 8px; border: 0; border-top: 1px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--ink-2); }
.side-box__title i { font-family: var(--font-serif); font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.side-cats li a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--ink); text-decoration: none; }
.side-cats li:last-child a { border-bottom: 0; }
.side-cats li a:hover { color: var(--accent-deep); }
.side-cats__no { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--accent-deep); letter-spacing: 0; }
/* 記事リスト: 小さな水彩サムネ＋題 */
.side-posts li { padding: 0; border-bottom: 1px solid var(--line-soft); }
.side-posts li:last-child { border-bottom: 0; }
.side-posts a { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; color: var(--ink); text-decoration: none; }
.side-posts__media { display: block; width: 60px; height: 60px; overflow: hidden; background: var(--paper-2); }
.side-posts__thumb, .side-posts__ph { display: block; width: 60px; height: 60px; object-fit: cover; transition: transform .6s var(--ease); }
.side-posts__ph { display: grid; place-items: center; color: var(--surface); }
.side-posts__ph svg { width: 24px; height: 24px; }
.side-posts__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.side-posts__title { font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }
.side-posts__date { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; line-height: 1.3; color: var(--mute); letter-spacing: .02em; }
.side-posts a:hover .side-posts__title { color: var(--accent-deep); }
@media (hover: hover) {
  .side-box__more:hover::after { width: 44px; }
  .side-posts a:hover .side-posts__thumb { transform: scale(1.06); }
}
@media (min-width: 1024px) {
  .side-posts__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .sidebar { align-self: stretch; }
  .sidebar > .side-box:last-child { position: sticky; top: 76px; }
}

/* =========================================================
   固定ページ（運営者情報・広告掲載について・プライバシー・404）
   ========================================================= */
.is-page main { background: none; }
.section--page { padding: 8px 0 88px; }
/* 720px の列で組む。1024px 以上は、マストヘッド・カテゴリ帯と同じく列を中央に置く（サイドバーの無い固定ページで左だけが重くならない）。パンくずも同じ列に揃える */
.section--page > .wrap--wide > * { max-width: 720px; }
@media (min-width: 1024px) {
  .section--page > .wrap--wide, .is-page main:has(> .section--page) > .wrap--wide { max-width: calc(720px + 2 * var(--pad)); }
}
.page-head { margin: 24px 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.section--page .page-head .page-head__label, .page-head__label { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 46px; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); font-variation-settings: "opsz" 144, "WONK" 0; }
.section--page .page-head .page-head__label--big { font-size: 96px; color: var(--accent); }
.section--page .page-head h1 { margin-top: 12px; font-size: 22px; line-height: 1.5; letter-spacing: .08em; color: var(--ink); }
.section--page h2 { position: relative; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 19px; line-height: 1.6; letter-spacing: .06em; color: var(--ink); }
.section--page h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; background: var(--accent); }
.section--page p { margin-top: 14px; font-size: 15.5px; line-height: 1.95; color: var(--text); }
.section--page .table-wrap { margin-top: 0; background: none; }
.section--page table.cmp th { width: 32%; white-space: nowrap; font-size: 13px; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
.section--page table.cmp td:first-child { font-weight: 400; }
.section--page table.cmp tr:first-child th { border-bottom-color: var(--line); }
.section--page table.cmp td { font-size: 14.5px; }
.section--404 ul.bullets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 28px; border-top: 1px solid var(--line); }
.section--404 ul.bullets li { margin: 0; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); }
.section--404 ul.bullets li::before { top: calc(12px + .95em - 3px); }
.section--404 ul.bullets a { display: block; margin: -12px 0 -12px -22px; padding: 12px 0 12px 22px; text-decoration: none; font-weight: 500; }   /* 行全体を押せる */
.section--404 ul.bullets a:hover { color: var(--accent-deep); text-decoration: underline; }
.about__img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; margin: 0 0 32px; box-shadow: none; }
@media (min-width: 720px) {
  .page-head { margin-top: 40px; }
  .section--page .page-head .page-head__label { font-size: var(--en-display); }
  .section--page .page-head .page-head__label--big { font-size: 140px; }
  .section--page .page-head h1 { font-size: 26px; }
}

/* ---------- トップ: 編集方針（Editor's note） ---------- */
.section--note { padding-top: 0; }
.policy-box { display: grid; gap: 18px; padding: 36px 0 0; background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; }
.section .policy-box .policy-box__label, .policy-box__label { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 36px; line-height: 1.1; color: var(--ink); font-variation-settings: "opsz" 144, "WONK" 0; }
.section .policy-box h2, .policy-box h2 { margin-top: 10px; font-size: 17px; line-height: 1.6; letter-spacing: .1em; color: var(--ink); }
.section .policy-box p, .policy-box p { margin-top: 0; font-size: 14.5px; line-height: 2; color: var(--ink-2); }
.section .policy-box p + p { margin-top: 14px; }
.policy-box a { color: var(--accent-deep); }
@media (min-width: 1024px) {
  .policy-box { grid-template-columns: 360px minmax(0, 1fr); column-gap: 72px; padding-top: 48px; }
  .section .policy-box .policy-box__label { font-size: 48px; }
  .policy-box__body { columns: 2; column-gap: 48px; }
  .section .policy-box__body p + p { margin-top: 0; padding-top: 0; }
  .policy-box__body p { break-inside: avoid; }
}

/* =========================================================
   フッター（墨の地。「Thank you for reading.」＋タグライン。最後にサイト名を大きな細字で薄く組む＝装飾、aria-hidden）
   ========================================================= */
.site-footer { margin-top: 0; background: var(--ink); color: rgba(247, 243, 236, .8); }
.site-footer__inner { max-width: var(--wide); margin: 0 auto; padding: 52px var(--pad) 24px; container-type: inline-size; }
.site-footer__head { text-align: center; padding-bottom: 32px; border-bottom: 1px solid rgba(247, 243, 236, .16); }
.site-footer__kicker { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--paper); letter-spacing: -.005em; font-variation-settings: "opsz" 144, "WONK" 0; }
.site-footer__tagline { margin-top: 14px; font-size: 12px; letter-spacing: .16em; color: rgba(247, 243, 236, .74); }
.site-footer__cols { display: grid; gap: 28px; padding: 32px 0 28px; }
.site-footer__label { grid-column: 1 / -1; margin: 0 0 6px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--accent-light); letter-spacing: 0; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; justify-content: start; align-content: start; margin: 0; }
.site-footer__nav a { display: block; padding: 9px 0; color: var(--paper); font-size: 14px; line-height: 1.9; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }   /* タップ領域 45px。語の途中で改行しない */
/* 380px 未満は段が 148px 前後しかないので字間を詰め、「プライバシーポリシー」を 1 行に収める */
@media (max-width: 379.98px) { .site-footer__nav a { letter-spacing: .03em; } }
.site-footer__nav a:hover { color: var(--accent-light); text-decoration: underline; }
.site-footer__note { word-break: auto-phrase; text-wrap: pretty; margin: 0; padding-top: 22px; border-top: 1px solid rgba(247, 243, 236, .16); font-size: 12.5px; line-height: 1.85; color: rgba(247, 243, 236, .74); }
/* フッターの最後にロゴ（2026-10-06 人間指示: 大きな文字のワードマークはやめてロゴを置く）。
   墨の地では茶色の小さな文字が沈むので、紙色の台紙に載せる */
.site-footer__logo { display: block; width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 16px 22px; border-radius: 10px; background: var(--paper); line-height: 0; }
.site-footer__logo-img { display: block; width: auto; max-width: 100%; height: 72px; }
@media (min-width: 720px) { .site-footer__logo { margin-top: 56px; padding: 22px 36px; } .site-footer__logo-img { height: 104px; } }
@media (hover: hover) { .site-footer__logo { transition: transform .4s var(--ease-out); } .site-footer__logo:hover { transform: translateY(-3px); } }
/* ロゴが無いときの代替（大きな細字のサイト名） */
.site-footer__wordmark {
  margin: 36px 0 0; padding-bottom: .04em; overflow: hidden; white-space: nowrap; text-align: center;
  font-family: var(--font-ja); font-weight: 400; font-size: clamp(36px, 9vw, 140px); line-height: 1.1; letter-spacing: 0; font-feature-settings: normal;
  color: rgba(247, 243, 236, .17);
}
@supports (width: 1cqi) { .site-footer__wordmark { font-size: min(calc(100cqi / var(--chars, 8) * .97), 140px); } }
.site-footer__copyright { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(247, 243, 236, .16); font-size: 12px; text-align: left; letter-spacing: .05em; color: rgba(247, 243, 236, .66); }
.site-footer__copyright span { white-space: nowrap; }   /* 「All rights reserved.」を割らない */
/* 墨の地の上ではフォーカス枠を明るい色に（3:1 以上） */
.site-footer :focus-visible { outline-color: var(--accent-light); }
@media (min-width: 720px) {
  .site-footer__inner { padding-top: 80px; padding-bottom: 28px; }
  .site-footer__head { padding-bottom: 40px; }
  .site-footer__tagline { margin-top: 18px; }
  .site-footer__kicker { font-size: 48px; }
  .site-footer__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 64px; padding: 40px 0 32px; }
  .site-footer__nav--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__nav:not(.site-footer__nav--cats) { grid-template-columns: minmax(0, 1fr); }
  .site-footer__wordmark { margin-top: 64px; }
}
@media (min-width: 1024px) { .site-footer__nav--cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* =========================================================
   動き（2026-10-06）
   方針
   ・読み込み時に「開く」のは表紙（トップ・カテゴリ扉・固定ページの題字）だけ。イラストが左から現れ、文字が順に立ち上がる。
   ・それ以外は、画面に入ったときに一度だけ静かに立ち上がる（site.js が最初の画面より下の要素に .reveal を付け、入ったら .is-in）。
     同じタイミングで入った要素は 80ms ずつずらす（site.js が transition-delay を付ける）。最初の画面にある要素には付けない（読み込み直後に空白を見せない）。
   ・記事の本文は動かさない（読む邪魔をしない）。h2 のテラコッタの印だけが、読み進めると描かれる。
   ・ページの切り替えは View Transitions（対応ブラウザだけ。ヘッダーは残り、本文がやわらかく入れ替わる）。
   ・hover は @media (hover: hover) の中だけ。prefers-reduced-motion: reduce ではすべて止める。JS が無ければ最初から全部見えている。
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.read-progress { view-transition-name: read-progress; }

@media (prefers-reduced-motion: no-preference) {
  /* ---- 表紙（トップ）: イラストが左から開き、文字が順に立ち上がる ---- */
  .is-home .home-hero__media { animation: unveil 1.1s var(--ease-out) both; }
  .is-home .home-hero__img { animation: zoomout 2.8s var(--ease-out) both; }
  .is-home .home-hero__text > * { animation: rise .9s var(--ease-out) .3s both; }
  .is-home .home-hero__text > :nth-child(2) { animation-delay: .42s; }
  .is-home .home-hero__text > :nth-child(3) { animation-delay: .54s; }
  .is-home .home-hero__text > :nth-child(4) { animation-delay: .66s; }
  .is-home .home-hero__kicker::before { animation: draw .8s var(--ease-out) .5s both; transform-origin: 0 50%; }
  .is-home .hero-points li { animation: rise .8s var(--ease-out) both; }
  .is-home .hero-points li:nth-child(1) { animation-delay: .8s; }
  .is-home .hero-points li:nth-child(2) { animation-delay: .9s; }
  .is-home .hero-points li:nth-child(3) { animation-delay: 1s; }
  .is-home .hero-points li::before { animation: draw .7s var(--ease-out) both; animation-delay: inherit; transform-origin: 0 50%; }
  /* ---- カテゴリ扉・固定ページの題字 ---- */
  .cat-hero__media { animation: unveil 1s var(--ease-out) both; }
  .cat-hero__img { animation: zoomout 2.8s var(--ease-out) both; }
  /* 記事のアイキャッチも読み込み時にゆっくり引く */
  .is-post .article__eyecatch { animation: zoomout 2.8s var(--ease-out) both; }
  /* ---- 画像のズームアウト: 少し寄った状態から、ゆっくり元の大きさへ ----
     カード・特集・ジャンル・サイドバー・挿絵の画像は、要素が画面に入ったとき（.is-in）、または最初の画面にあるとき（.is-now。site.js）に動く。
     fill は backwards: 終わった後は通常の値に戻るので、hover の「寄る」動きがそのまま効く */
  .is-in .post-card__thumb, .is-now .post-card__thumb, .is-in .feature__media img, .is-now .feature__media img,
  .is-in .genre-tile__img, .is-now .genre-tile__img, .is-in .side-posts__thumb, .is-now .side-posts__thumb,
  .is-in .article__figure-img, .is-now .article__figure-img { animation: zoomout 2.6s var(--ease-out) backwards; }
  .cat-hero__card > * { animation: rise .8s var(--ease-out) .25s both; }
  .cat-hero__card > :nth-child(2) { animation-delay: .35s; }
  .cat-hero__card > :nth-child(3) { animation-delay: .45s; }
  .cat-hero__card > :nth-child(4) { animation-delay: .55s; }
  .cat-hero__card > :nth-child(5) { animation-delay: .65s; }
  .page-head > * { animation: rise .8s var(--ease-out) .1s both; }
  .page-head > :nth-child(2) { animation-delay: .22s; }
  /* 記事: 題まわりだけ静かに立ち上がる（本文・画像は動かさない） */
  .is-post .article .hero__eyebrow, .is-post .article h1, .is-post .article .post-meta { animation: rise .8s var(--ease-out) both; }
  .is-post .article h1 { animation-delay: .1s; }
  .is-post .article .post-meta { animation-delay: .2s; }
  /* 目次帯: いま見ているカテゴリの下線を描く */
  .cat-bar__item.is-current::after { animation: draw .6s var(--ease-out) .35s both; }

  /* ---- スクロールで現れる（site.js） ---- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
  /* セクションの見出し: 英字の下の罫が左から伸びる */
  .sec-head.reveal .section__label::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .25s; }
  .sec-head.reveal.is-in .section__label::after { transform: scaleX(1); }
  /* 記事の h2: 文字は動かさず、テラコッタの印だけ描く */
  .article h2.reveal, .section--page h2.reveal { opacity: 1; transform: none; transition: none; }
  .article h2.reveal::before, .section--page h2.reveal::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out) .1s; }
  .article h2.reveal.is-in::before, .section--page h2.reveal.is-in::before { transform: scaleX(1); }
  /* 見直しの順番: 番号が少し遅れて浮かぶ */
  .kstep__item.reveal .kstep__num { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease-out) .25s, transform .7s var(--ease-out) .25s; }
  .kstep__item.reveal.is-in .kstep__num { opacity: 1; transform: none; }
  /* 遅延読み込みの画像: 読み込めたら浮かび上がる（site.js。読み込み済みのものには付けない） */
  img.lazy-fade { opacity: 0; transition: opacity .6s ease; }
  img.lazy-fade.is-loaded { opacity: 1; }
  /* FAQ: 開いた答えが下から出る */
  .faq details[open] .faq__a { animation: rise .45s var(--ease-out) both; }
  /* ページの切り替え: 前のページは短く消え、次のページがやわらかく入る */
  ::view-transition-old(root) { animation-duration: .18s; }
  ::view-transition-new(root) { animation-duration: .36s; }

  @keyframes unveil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes zoomout { from { transform: scale(1.1); } to { transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- hover の仕上げ（押せるものは、押す前に少し応える） ---- */
@media (hover: hover) {
  /* 文字のリンク: 下線を左から引く */
  .site-nav a, .site-footer__nav a, .side-box__more, .breadcrumb a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .4s var(--ease-out), color .2s;
  }
  .site-nav a:hover, .site-footer__nav a:hover, .side-box__more:hover, .breadcrumb a:hover { background-size: 100% 1px; text-decoration: none; }
  /* カード・特集の題: 下線が色づく（線は最初から引いてあり、透明→テラコッタ） */
  .post-card__title, .feature__title, .side-posts__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: transparent; transition: text-decoration-color .35s, color .2s; }
  .post-card:hover .post-card__title, .feature__item:hover .feature__title, .side-posts a:hover .side-posts__title { text-decoration-color: var(--accent); }
  /* 画像はゆっくり寄る。ジャンルのアーチは少し浮く */
  .genre-tile__media { transition: transform .7s var(--ease-out); }
  .genre-tile:hover .genre-tile__media { transform: translateY(-6px); }
  .genre-tile em { transition: color .2s; }
  .genre-tile:hover em { color: var(--accent-deep); }
  .kstep__num { transition: color .3s; }
  .kstep__item:hover .kstep__num { color: var(--accent-deep); }
  .cat-chip::before { transition: transform .3s var(--ease-out); }
  .post-card:hover .cat-chip::before, .feature__item:hover .cat-chip::before { transform: scale(1.5); }
}

/* ---- 記事の読みやすさ ---- */
/* 書き出しの段落（PR 表記の直後）は少し大きく、リードとして読ませる */
.article .pr-notice + p { font-size: 17px; line-height: 2; color: var(--ink); }
@media (min-width: 720px) { .article .pr-notice + p { font-size: 18px; letter-spacing: .035em; } }
/* 読んでいる位置: 画面の上端にテラコッタの細い線（site.js。記事ページだけ） */
.read-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
/* 目次: いま読んでいる節の印が墨になり、文字がテラコッタに（site.js） */
.article__toc li::before { transition: width .35s var(--ease-out), background-color .35s; }
.article .article__toc li.is-active::before { width: 22px; background: var(--ink); }
.article .article__toc li.is-active > a { color: var(--accent-deep); text-decoration-color: var(--accent); }
/* 先頭へ戻る（site.js。1.5 画面より下で現れる） */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 46px; height: 46px; padding: 0; margin: 0;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .4s var(--ease-out), background-color .2s, color .2s, visibility 0s linear .3s;
}
.to-top::before { content: ""; display: block; width: 18px; height: 18px; margin: 0 auto; background: currentColor; -webkit-mask: var(--icon-up) center / contain no-repeat; mask: var(--icon-up) center / contain no-repeat; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease-out), background-color .2s, color .2s; }
@media (hover: hover) { .to-top:hover { background: var(--ink); color: var(--paper); } }
@media (min-width: 720px) { .to-top { right: 28px; bottom: 28px; } }
:root { --icon-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .site-header.is-hidden { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}