@charset "UTF-8";
/* =====================================================================
   公開ページ（トップ／記事／カテゴリ一覧／お知らせ／about）のスタイル。
   実色は書かない。色はすべて tokens.css のCSS変数経由で参照する。

   設計の前提（docs/kumashacho-ui-research.md）:
   - モバイルファースト。ファーストビュー約650pxに「誰が・何を・今」を収める
   - 本文は16〜17px・行間1.8以上（業務システムより明確に緩める）
   - タップ領域44px以上

   ビジュアル方針（2026-08 調査を受けて）:
   - 地色は生成り。記事本文とパネルだけが紙白の面に載る（明暗が旧テーマと逆）
   - 丸ゴシック（--font-heading）はサイト名と記事タイトルにしか使わない
   - 青緑はリンクと現在地表示だけ。区切り・装飾には使わない
   - 角丸は用途ごとに変える（写真＝非対称／ボタン＝4px／箱＝角丸なし）
   - 影は使わない。区切りは罫線と余白で行う
   ===================================================================== */

/* =====================================================================
   ヘッダー（sticky）＋ ハンバーガー
   地色に溶かし、下の1本の罫線だけで本文と切る
   ===================================================================== */
.pub-header {
  background: var(--color-base);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 30;
}
.pub-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--h-header);
}

/* ロゴ＝くま画像＋テキスト。画像に文字は焼き込まない（差し替えを容易に保つ）
   サイト名は丸ゴシックを使う数少ない場所のひとつ（くまの丸みと揃うため） */
.pub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
/* くまは背景透過PNG＋太い輪郭線なので、地にそのまま乗せる。
   紙白の円を敷くと生成り地の中で白丸だけが浮く。円と輪はどのサイズでも付けない
   （記事冒頭の20px・トップ帯の64px・著者ボックスの72pxも同じ扱い）。
   border-radius は素材が無いときのプレースホルダを丸くするために残す。 */
.pub-brand__mark {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill);
  object-fit: cover;
}
.pub-brand__mark--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-ink-heading); color: var(--color-base);
  font-family: var(--font-heading); font-weight: 800; font-size: 20px;
}
.pub-brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pub-brand__name {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  color: var(--color-ink-heading); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pub-brand__tagline {
  font-size: 10.5px; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pub-menu__btn {
  flex: none; width: 44px; height: 44px; border: none; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn);
}
.pub-menu__btn:hover { background: var(--color-surface); }
.pub-menu__bars { display: block; width: 22px; }
.pub-menu__bars span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--color-ink-heading);
}
.pub-menu__bars span + span { margin-top: 5px; }
.pub-menu__btn[aria-expanded="true"] .pub-menu__bars span { background: var(--color-primary); }

.pub-menu {
  border-top: 1px solid var(--color-border);
  background: var(--color-base);
  max-height: calc(100dvh - var(--h-header)); overflow-y: auto;
}
.pub-menu__inner { padding-block: 14px 22px; }
/* 見出しラベルは等幅・字間広め。「小さくても読ませる」ための書体の役割変更 */
.pub-menu__heading {
  font-family: var(--font-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: .16em; color: var(--color-muted); margin: 14px 0 4px;
}
.pub-menu__list { display: flex; flex-direction: column; }
.pub-menu__list a {
  display: block; padding: 12px 4px; min-height: 44px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--color-ink-body); text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.pub-menu__list a:hover { color: var(--color-primary-deep); }

/* =====================================================================
   カテゴリ横スクロールタブ（sticky）
   塗りつぶしピルをやめ、素のテキスト＋現在地の下線にした。
   ピルが4つ並ぶ構図が「量産テンプレート」の代表的な見え方なので外している。
   右端はわざと見切れさせ、スクロールできることを示す。
   ===================================================================== */
.cat-tabs {
  position: sticky; top: var(--h-header); z-index: 25;
  background: var(--color-base);
  /* 帯の下にキャラメルの細い罫を1本。これが「タブが並ぶ台」を示し、
     現在地の青緑の下線がその上に乗ることでタブ列だと分かる（塗りピルは使わない）。 */
  border-bottom: 2px solid var(--color-line-accent);
}
.cat-tabs__scroller {
  display: flex; gap: 20px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px var(--gutter) 0;
  /* 右端の見切れ（最後の項目が少しだけ切れて見える） */
  padding-inline-end: calc(var(--gutter) + 28px);
  max-width: var(--maxw); margin-inline: auto;
}
.cat-tabs__scroller::-webkit-scrollbar { display: none; }
.cat-tabs__item { flex: 0 0 auto; }
.cat-tab {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 2px;
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  color: var(--color-ink-body-light); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.cat-tab:hover { color: var(--color-ink-heading); border-bottom-color: var(--color-border-strong); }
/* 現在地＝青緑。青緑を使ってよい2つの用途のうちの1つ（もう1つはリンク） */
.cat-tab.is-active { color: var(--color-ink-heading); border-bottom-color: var(--color-primary); }
.cat-tab.is-active:hover { color: var(--color-ink-heading); border-bottom-color: var(--color-primary); }

/* =====================================================================
   カテゴリラベル（バッジ）とセクションの色帯
   塗りつぶさず枠線で描く。4色の塗りが一覧に並ぶと画面が騒がしくなるため。
   ===================================================================== */
.cat-label {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  font-size: 10.5px; line-height: 1.7; padding: 1px 8px; border-radius: 0;
  letter-spacing: .04em;
  background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-ink-body-light);
  text-decoration: none; white-space: nowrap;
}
.cat-label--news     { border-color: var(--color-cat-news);     color: var(--color-cat-news); }
.cat-label--seido    { border-color: var(--color-cat-seido);    color: var(--color-cat-seido); }
.cat-label--hattatsu { border-color: var(--color-cat-hattatsu); color: var(--color-cat-hattatsu); }
.cat-label--ai       { border-color: var(--color-cat-ai);       color: var(--color-cat-ai); }

/* =====================================================================
   アイキャッチが無いときの「見出し組み」（cover）
   斜線のプレースホルダは廃止。カテゴリ色の地に記事タイトルを組み、
   新聞・雑誌の見出しのように見せる＝「画像が無い」ではなく「そういう誌面」にする。

   サイズ別の出し分け:
     大（ヒーロー16:9・次に読む16:7） … カテゴリ色の地＋タイトル
     小（カードのサムネ76px）         … 文字が読めないので色だけ（cover は使わない）
   文字色は紙白で統一する。4色とも紙白で5.8:1以上あり、出し分ける必要が無い
   （出し分けると「なぜここだけ黒いのか」の説明が要るぶん、かえって雑に見える）。
   ===================================================================== */
.cover {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  width: 100%; height: 100%; padding: 16px 18px 18px;
  background: var(--color-ink-heading); color: var(--color-white);
  text-align: left;
}
.cover--news     { background: var(--color-cat-news); }
.cover--seido    { background: var(--color-cat-seido); }
.cover--hattatsu { background: var(--color-cat-hattatsu); }
.cover--ai       { background: var(--color-cat-ai); }
/* カテゴリ未設定は墨。4色に無い5色目を作らない */
.cover--none     { background: var(--color-ink-heading); }
.cover__cat {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover__title {
  font-family: var(--font-heading); font-weight: 800; line-height: 1.45;
  letter-spacing: -.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* セクション見出しの色帯。既定はキャラメル（＝線の色）、カテゴリ別は当該色 */
.home-sec__bar { display: inline-block; width: 4px; height: 19px; border-radius: 0; background: var(--color-line-accent); }
.cat-bar--news     { background: var(--color-cat-news); }
.cat-bar--seido    { background: var(--color-cat-seido); }
.cat-bar--hattatsu { background: var(--color-cat-hattatsu); }
.cat-bar--ai       { background: var(--color-cat-ai); }

/* =====================================================================
   共通レイアウト
   ===================================================================== */
.pub-main { padding-block: 20px 64px; min-height: 60vh; }
.empty-note { color: var(--color-muted); padding: 48px 0; text-align: center; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary-deep); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-border-strong); }
.breadcrumb__current {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}

.list-hero { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--color-rule-heavy); }
.list-hero__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 24px;
  color: var(--color-ink-heading); margin-top: 8px; letter-spacing: -.01em;
}
.list-hero__lead { font-size: 14px; color: var(--color-ink-body-light); margin-top: 10px; }
.list-hero__count { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--color-muted); margin-top: 10px; }

/* =====================================================================
   プロフィール帯 / 著者ボックス（3層のうち第1層・第2層）
   ===================================================================== */
.author-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg);
  padding: 20px 20px 22px;
  margin-top: 32px;
}
.author-box__head { display: flex; align-items: center; gap: 14px; }
/* 円も輪も付けない（.pub-brand__mark と同じ理由）。
   紙白のカード上では円が地と同色で見えず、細い輪だけが残っていて、
   地に直接置いている記事冒頭の20pxと不揃いだった。 */
.author-box__face {
  width: 72px; height: 72px; border-radius: var(--radius-pill); flex: none; object-fit: cover;
}
.author-box__face--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-ink-heading); color: var(--color-base);
  font-family: var(--font-heading); font-weight: 800; font-size: 30px;
}
.author-box__name { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--color-ink-heading); }
.author-box__title { font-size: 13px; color: var(--color-ink-body-light); line-height: 1.7; margin-top: 2px; }
.author-box__cred { font-size: 12px; color: var(--color-muted); margin-top: 4px; }
.author-box__bio { font-size: 14px; line-height: 1.9; color: var(--color-ink-body); margin-top: 14px; }
.author-box__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.author-box__link {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--color-primary-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 32px;
}
.author-box__link:hover { text-decoration: underline; }
.author-box__ai {
  font-size: 11.5px; line-height: 1.8; color: var(--color-muted);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border);
}

/* トップ上部の帯（約90px）。ここで0.5秒「個人メディアだ」と分からせる。
   面を作らず、下の1本の罫線だけで区切る（色のついた箱は1ページに1つまで） */
.author-box--band {
  margin-top: 0; padding: 4px 0 20px;
  background: transparent; border: none; border-bottom: 1px solid var(--color-border);
}
.author-box--band .author-box__face { width: 64px; height: 64px; }
.author-box--band .author-box__links { margin-top: 10px; }

/* =====================================================================
   ヒーロー記事（トップのファーストビュー後半）
   ===================================================================== */
.hero { margin-top: 24px; }
.hero__link { display: block; text-decoration: none; color: inherit; }
.hero__thumb {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-photo);
  background: var(--color-thumb-empty);
}
.hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 見出し組みのヒーロー。タイトルは地の中に組むので、下のテキスト列には出さない
   （同じ文言が隣接すると冗長になるため。下に残すのは日付だけ） */
/* 新聞の見出し組み。カテゴリ名とタイトルはひとかたまりにして下に置き、
   上に残る空きを「余白」として使う（両端揃えにすると面の中央が抜けて見える）。
   高さは中身で決める（aspect-ratio を外す）＝面が余らないので比率の調整も要らない。
   写真があるときは 16:9 のまま。 */
.hero--cover .hero__thumb { aspect-ratio: auto; }
/* 上の余白は「面の残り」ではなく、下の見出しを据えるための空き。
   下余白の1.5倍程度に留める（それ以上あると面の上半分が抜けて見える） */
.hero__cover { padding: 26px 18px 18px; }
.hero__cover .cover__title { font-size: clamp(19px, 5vw, 25px); -webkit-line-clamp: 3; }
.hero--cover .hero__body { padding-top: 10px; }
.hero__body { padding-top: 14px; }
.hero__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.45;
  color: var(--color-ink-heading); margin-top: 9px; letter-spacing: -.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  overflow-wrap: anywhere;
}
.hero__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--color-muted); margin-top: 10px; }
.hero__link:hover .hero__title { color: var(--color-primary-deep); }

/* =====================================================================
   記事カード（横並びリスト型・サムネ76px）
   1画面に3〜4件見える密度にする。枠は作らず下罫線だけで区切る。
   サムネ未設定時の地色はカテゴリごとに変える（「こここ」方式＝バッジに頼らない識別）
   ===================================================================== */
.a-list { display: flex; flex-direction: column; }
.a-card { border-bottom: 1px solid var(--color-border); }
.a-card__link {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 2px; text-decoration: none; color: inherit; min-height: 44px;
}
.a-card__link:hover .a-card__title { color: var(--color-primary-deep); }
.a-card__thumb {
  width: 76px; height: 76px; flex: none; border-radius: var(--radius-photo-sm); overflow: hidden;
  background: var(--color-thumb-empty);
}
.a-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.a-card__ph { display: block; width: 100%; height: 100%; }
.a-card--news     .a-card__thumb { background: var(--color-cat-news-tint); }
.a-card--seido    .a-card__thumb { background: var(--color-cat-seido-tint); }
.a-card--hattatsu .a-card__thumb { background: var(--color-cat-hattatsu-tint); }
.a-card--ai       .a-card__thumb { background: var(--color-cat-ai-tint); }
.a-card__body { min-width: 0; flex: 1; }
.a-card__title {
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1.6;
  color: var(--color-ink-heading); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.a-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.a-card__date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--color-muted); }
.a-list--page .a-card__link { padding-block: 17px; }

/* =====================================================================
   トップのセクション
   セクション間の余白に大小をつける（新着＝中／カテゴリ別＝大）
   ===================================================================== */
.home-sec { margin-top: var(--space-sec); }
.home-sec--cat {
  background: var(--color-section); padding-block: 32px; margin-top: var(--space-sec-lg);
  border-block: 1px solid var(--color-border);
}
.home-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-sec__title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 800; font-size: 18px;
  color: var(--color-ink-heading); letter-spacing: .01em;
}
.home-sec__link {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--color-primary-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.home-sec__link:hover { text-decoration: underline; }
.home-sec__desc { font-size: 13px; color: var(--color-ink-body-light); margin-top: 6px; }
.home-sec__more { margin-top: 20px; }
.home-sec--cat .a-card { border-bottom-color: var(--color-border); }

/* =====================================================================
   記事ページ
   本文は生成りの地にそのまま乗せる（面を作らない）。
   構造は罫線と余白だけで示し、地色を画面の主役に保つ。
   紙白の面を使うのは著者ボックス・「次に読む」など、地から浮かせたいものだけ。
   ===================================================================== */
.post {
  background: transparent;
  padding-block: 4px 8px;
}
.post__head { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.post__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 25px; line-height: 1.5;
  color: var(--color-ink-heading); overflow-wrap: anywhere; letter-spacing: -.01em;
}
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.post__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--color-muted); }
.post__date--upd { color: var(--color-ink-body-light); }
.post__byline { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.post__byface { width: 20px; height: 20px; border-radius: var(--radius-pill); object-fit: cover; }
.post__writer { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--color-ink-body-light); }

.post__eyecatch {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-photo);
  background: var(--color-thumb-empty); margin-bottom: 24px;
}
.post__eyecatch img { width: 100%; height: 100%; object-fit: cover; }

/* この記事の結論（先に答えを出す）
   塗りの箱をやめ、キャラメルの太罫で挟む。点もキャラメル（＝線と点の色） */
.conclusion {
  background: transparent;
  border-top: 3px solid var(--color-line-accent);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0 18px; margin-bottom: 26px;
}
.conclusion__title {
  font-family: var(--font-body); font-weight: 800; font-size: 12.5px; letter-spacing: .12em;
  color: var(--color-ink-heading); margin-bottom: 10px;
}
.conclusion__list { display: flex; flex-direction: column; gap: 6px; }
.conclusion__list li {
  position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.8;
  color: var(--color-ink-body);
}
.conclusion__list li::before {
  content: ''; position: absolute; left: 2px; top: .72em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-line-accent);
}

/* 目次（既定で開く・H2のみ）。番号は等幅の灰でごく静かに */
.toc {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 4px 16px 6px; margin-bottom: 28px; background: transparent;
}
.toc__summary {
  cursor: pointer; list-style: none; padding: 12px 0; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: .08em;
  color: var(--color-ink-heading);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::before {
  content: '▾'; color: var(--color-ink-heading); font-size: 12px; transition: transform .15s;
}
.toc:not([open]) .toc__summary::before { transform: rotate(-90deg); }
/* olの既定マーカーは消す（番号は counter で自前に振る＝二重表示を防ぐ） */
.toc__list { counter-reset: toc; list-style: none; padding: 0 0 12px; display: flex; flex-direction: column; gap: 2px; }
.toc__list li { counter-increment: toc; }
.toc__list a {
  display: flex; gap: 10px; padding: 8px 0; min-height: 40px; align-items: center;
  font-size: 14px; color: var(--color-ink-body); text-decoration: none; line-height: 1.6;
}
.toc__list a::before {
  content: counter(toc,decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); flex: none;
}
.toc__list a:hover { color: var(--color-primary-deep); text-decoration: underline; }

/* 見出しへスクロールしたとき sticky ヘッダーの下に隠れないようにする */
.post-body .blk-h { scroll-margin-top: calc(var(--h-header) + var(--h-tabs) + 12px); }

/* 記事末尾CTA（CTA②）
   塗りの箱をやめ、上を太罫・下を細罫で挟む。行動を促す色はボタンだけが持つ */
.post-cta {
  margin-top: 44px; padding: 26px 4px 28px; border-radius: var(--radius-card-lg);
  background: transparent;
  border-top: 3px solid var(--color-rule-heavy);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.post-cta--line { border-top-color: var(--color-primary); }
.post-cta__lead {
  font-family: var(--font-body); font-weight: 800; font-size: 16.5px; line-height: 1.65;
  color: var(--color-ink-heading); margin-bottom: 18px;
}
.post-cta__text {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  margin-top: 12px; font-size: 13.5px; color: var(--color-ink-body-light); text-decoration: underline;
}
.post-cta__text:hover { color: var(--color-primary-deep); }

/* 出典・一次情報 */
.sources {
  margin-top: 36px; padding: 18px 18px 20px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
}
.sources__title { font-family: var(--font-body); font-weight: 800; font-size: 12.5px; letter-spacing: .12em; color: var(--color-ink-heading); }
.sources__list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sources__list li { font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere; }
.sources__asof {
  margin-top: 12px; font-size: 12px; color: var(--color-muted); line-height: 1.8;
}
.sources__list + .sources__asof { padding-top: 12px; border-top: 1px solid var(--color-border); }

/* 関連記事（同カテゴリ3件） */
.rel { margin-top: var(--space-sec); }
.rel__title {
  font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  color: var(--color-ink-heading); margin-bottom: 8px;
  padding-bottom: 10px; border-bottom: 2px solid var(--color-rule-heavy);
}

/* 次に読む（別カテゴリ1件）。関連記事と視覚的にはっきり変える。
   ここは「構造の装置」なので墨で描く（青緑は使わない） */
.next-read { margin-top: 34px; }
.next-read__eyebrow {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 10.5px;
  letter-spacing: .16em; color: var(--color-base); background: var(--color-rule-heavy);
  padding: 4px 12px;
}
.next-read__card {
  display: block; text-decoration: none; color: inherit;
  border: 1.5px solid var(--color-rule-heavy); border-radius: 0;
  overflow: hidden; background: var(--color-surface);
}
.next-read__thumb { aspect-ratio: 16 / 7; background: var(--color-thumb-empty); }
.next-read__thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-read__cover { min-height: 116px; }
.next-read__cover .cover__title { font-size: 16px; -webkit-line-clamp: 2; }
.next-read__body { padding: 15px 16px 18px; }
.next-read__title {
  font-family: var(--font-body); font-weight: 800; font-size: 16.5px; line-height: 1.55;
  color: var(--color-ink-heading); margin-top: 9px; overflow-wrap: anywhere;
}
.next-read__excerpt {
  font-size: 13px; line-height: 1.8; color: var(--color-ink-body-light); margin-top: 8px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.next-read__card:hover .next-read__title { color: var(--color-primary-deep); }

.post__tolist { margin-top: 32px; }

/* =====================================================================
   about ページ
   ===================================================================== */
.about-sec { margin-top: var(--space-sec); }
.about-sec__title {
  font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: .12em;
  color: var(--color-ink-heading); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--color-rule-heavy);
}
/* about の地の文。読ませる文章なので about-list(14px) より大きく、
   記事本文(.blk-p 17px)より小さくして、記事の読み心地と competing しないようにする。 */
.about-body p { font-size: 15px; line-height: 2; color: var(--color-ink-body); }
.about-body p + p { margin-top: 16px; }
.about-cats { display: flex; flex-direction: column; gap: 2px; }
.about-cats__item { border-bottom: 1px solid var(--color-border); }
.about-cats__item a {
  display: block; padding: 14px 2px; min-height: 44px; text-decoration: none; color: inherit;
}
.about-cats__desc { display: block; font-size: 13px; color: var(--color-ink-body-light); margin-top: 6px; line-height: 1.8; }
.about-cats__item a:hover .about-cats__desc { color: var(--color-primary-deep); }
.about-list { display: flex; flex-direction: column; gap: 10px; }
.about-list li {
  position: relative; padding-left: 18px; font-size: 14px; line-height: 1.9; color: var(--color-ink-body);
}
.about-list li::before {
  content: ''; position: absolute; left: 2px; top: .78em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-line-accent);
}
.about-contact { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================
   お知らせ一覧（/info）
   ===================================================================== */
.news-list { display: flex; flex-direction: column; gap: 2px; }
.news-row { border-bottom: 1px solid var(--color-border); }
.news-row.is-pinned {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); margin-bottom: 8px;
}
.news-row__link { display: block; text-decoration: none; color: inherit; padding: 16px 12px; min-height: 44px; }
.news-row__link:hover .news-row__title { color: var(--color-primary-deep); }
.news-row__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
.news-row__date { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; }
.news-row__title {
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  color: var(--color-ink-heading); margin-top: 8px; overflow-wrap: anywhere;
}

/* =====================================================================
   ページャ
   ===================================================================== */
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; }
.pager__btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  color: var(--color-primary); text-decoration: none; padding: 10px 16px; min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-btn); border: 1.5px solid var(--color-border-strong);
}
.pager__btn.is-disabled { color: var(--color-muted-2); border-color: var(--color-border); }
.pager__status { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: var(--color-muted); }

/* =====================================================================
   いいねボタン
   丸い形は意図的な例外（「押せる・跳ねる」ことを形で示す唯一の場所）
   ===================================================================== */
.like-wrap { margin-top: 36px; text-align: center; }
.like-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1.5px solid var(--color-spot-border); color: var(--color-spot-deep);
  border-radius: var(--radius-pill); padding: 11px 24px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  min-height: 48px; line-height: 1; transition: background .15s, border-color .15s;
}
.like-btn:hover { background: var(--color-spot-tint); border-color: var(--color-spot); }
.like-btn__heart { display: inline-flex; }
.like-btn__heart svg { fill: none; stroke: var(--color-spot-deep); stroke-width: 1.7; }
.like-btn.is-liked { background: var(--color-spot); border-color: var(--color-spot); color: var(--color-white); }
.like-btn.is-liked:hover { background: var(--color-spot-deep); border-color: var(--color-spot-deep); }
.like-btn.is-liked .like-btn__heart svg { fill: var(--color-white); stroke: var(--color-white); }
.like-btn__count { min-width: 1ch; text-align: left; font-variant-numeric: tabular-nums; }
.like-wrap__hint { margin-top: 10px; font-size: 12px; color: var(--color-muted); }
.like-btn__heart.is-pop { animation: heart-pop .32s ease; }
@keyframes heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.38); }
  55% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* =====================================================================
   フッタ（濃ティール → 墨）
   ===================================================================== */
.pub-footer { background: var(--color-footer-deep); color: var(--color-on-dark); margin-top: var(--space-sec-lg); }
.pub-footer__inner { padding-block: 34px; text-align: center; }
.pub-footer__brand { font-family: var(--font-heading); font-weight: 800; color: var(--color-white); }
.pub-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 16px; }
.pub-footer__nav a {
  color: var(--color-on-dark-dim); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; min-height: 36px;
}
.pub-footer__nav a:hover { color: var(--color-white); }
.pub-footer__nav--sub a { font-size: 12px; color: var(--color-on-dark-faint); }
.pub-footer__note {
  font-size: 11.5px; line-height: 1.8; color: var(--color-on-dark-faint);
  margin-top: 18px; max-width: 34em; margin-inline: auto;
}
.pub-footer__copy { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--color-on-dark-faint); margin-top: 16px; }

/* =====================================================================
   メッセージ/エラーカード
   ===================================================================== */
.msg-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card-lg); padding: 36px 26px; text-align: center; margin-top: 24px;
}
.msg-card h1 { font-family: var(--font-body); font-weight: 800; font-size: 21px; color: var(--color-ink-heading); }
.msg-card p { color: var(--color-ink-body-light); margin-top: 12px; }

/* =====================================================================
   デスクトップ展開（モバイルの構成をそのまま2カラム等へ無理なく広げる）
   ===================================================================== */
@media (min-width: 720px) {
  .pub-brand__name { font-size: 18px; }
  .pub-brand__tagline { font-size: 12px; }
  /* ヒーローは横並びに。16:9のまま全幅に伸ばすと画像だけで1画面を食うため */
  .hero__link { display: flex; gap: 26px; align-items: center; }
  .hero__thumb { width: 58%; flex: none; }
  .hero__body { padding-top: 0; flex: 1; min-width: 0; }
  .hero__title { font-size: 27px; }

  /* 見出し組みのヒーローは横並びにしない。右の列に日付しか残らず間が抜けるため。
     写真と違って文字が主役なので全幅の帯にし、高さは16:6に抑えて1画面を食わせない。 */
  .hero--cover .hero__link { display: block; }
  .hero--cover .hero__thumb { width: 100%; }
  .hero--cover .hero__cover { padding: 44px 32px 30px; }
  .hero--cover .cover__title { font-size: 30px; -webkit-line-clamp: 2; }
  .hero--cover .hero__body { padding-top: 12px; }
  .post__title { font-size: 30px; }
  .list-hero__title { font-size: 28px; }

  /* 新着・関連は2カラム。カードの形（サムネ76px＋テキスト）は変えない */
  .a-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .a-card__title { font-size: 15.5px; }

  .home-sec__more .btn-outline--block,
  .post__tolist .btn-outline--block { width: auto; min-width: 280px; display: inline-flex; }
  .home-sec__more, .post__tolist { text-align: center; }

  .author-box { padding: 24px 26px 26px; }
  .author-box--band { padding: 6px 0 22px; }

  .next-read__card { display: flex; align-items: stretch; }
  .next-read__thumb { width: 40%; flex: none; aspect-ratio: auto; }
  .next-read__body { flex: 1; }
}

@media (min-width: 1000px) {
  /* 記事ページは可読幅（約760px）を保つ。段組みにはしない */
  .a-list { column-gap: 34px; }
  .home-sec { margin-top: 68px; }
}