@charset "UTF-8";
/* =========================================================
   NABELOG - Minimal Blog Template
   Monochrome / White & Black
   ---------------------------------------------------------
   1.  Design Tokens
   2.  Base
   3.  Layout
   4.  Header / Nav / Drawer
   5.  Hero
   6.  Section Heading
   7.  Post Card / Post List / Ranking
   8.  Sidebar Widget
   9.  Breadcrumb / Pagination
   10. Single (entry header / TOC / content)
   11. Content Parts (box / balloon / merit / rating / cta ...)
   12. Share / Author / Related / Post Nav
   13. Footer / Page Top
   14. Utility
   ========================================================= */

/* =========================================================
   1. Design Tokens
   ========================================================= */
:root {
  /* 既定はライト。ダークは切り替えボタンで選んだときだけ
     （[data-theme="dark"]）。OS の設定には追従しない。 */
  color-scheme: light;

  /* color */
  --c-bg:        #ffffff;
  --c-bg-sub:    #f5f5f5;
  --c-bg-inv:    #0f0f0f;
  --c-text:      #111111;
  --c-text-body: #222222;   /* 記事本文だけ少し柔らかく */
  --c-text-sub:  #6b6b6b;
  --c-text-inv:  #fafafa;
  --c-text-inv-sub: #858585;   /* 反転した面（フッター）の控えめな文字。黒い下地の上で 5.19:1 */
  --c-line:      #e4e4e4;
  --c-line-str:  #111111;
  --c-accent:    #111111;
  --c-shade:     rgba(17, 17, 17, 0.30);   /* 横スクロールする枠の、まだ続く側に出す影 */

  /* typography */
  --f-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
            "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --f-en:   "Helvetica Neue", Arial, sans-serif;
  --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* metrics */
  --w-container: 1180px;
  --w-side:      320px;
  --gap-col:     56px;
  --bar-h:       40px;   /* ヘッダー1行目（サイト名と運営サイト）。追従しない */
  --nav-h:       56px;   /* ヘッダー2行目（ナビと道具）。これだけ追従する */
  --header-h:    56px;   /* 追従する高さ＝2行目。追従の TOC やアンカーの余白がこれを見る */

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:       #0d0d0d;
  --c-bg-sub:   #171717;
  --c-bg-inv:   #fafafa;
  --c-text:     #ededed;
  --c-text-body:#ededed;
  --c-text-sub: #9a9a9a;
  --c-text-inv: #0d0d0d;
  --c-text-inv-sub: #696969;   /* ダークではフッターの下地が白へ反転するので、別の色が要る。5.25:1 */
  --c-line:     #292929;
  --c-line-str: #ededed;
  --c-accent:   #ededed;
  --c-shade:    rgba(237, 237, 237, 0.34);
}

/* =========================================================
   2. Base
   ========================================================= */
/* 文字の大きさの段（2026-09-29、なべちゃんの指示「読者ファーストで」で決め直した）。
   基準は記事本文の 18px（600px 以下は 17px。.entry-content）。本文より小さい文字は次の 4 段のどれかにする
   （見出し・題名・人の名前は別。同じ部品の中で、下に並ぶ文字より大きくする）。

     16px  読む文        表の中身・目次・囲み・吹き出し・引用・入力欄・サイドバーの見出し
     15px  導線と抜粋    メニュー・サイドバーとフッターのリンク・ボタン・一覧の抜粋・運営者の紹介文
     14px  付随する情報  日付・パンくず・件数・札・キャプション・注釈（Amazon の免責）・コピーライト・商品の情報とボタン
     12px  飾りの英字    大文字の英字の見出し（CONTENTS・SITES・ABOUT・NEXT）と、46px の丸ボタンの中の文字

   **日本語を 14px 未満にしない。** デジタル庁デザインシステム（タイポグラフィ）が「14 CSS px未満の大きさの使用は
   原則として許容されません」、14px は「フッター要素などコンテンツに付随する情報」に限る、としている。
   12px を大文字の英字に使ってよいのは、大文字が小文字より背が高く、12px の大文字（8.3px）が 16px の小文字（8.6px）と
   ほぼ同じ高さになるため（英字の書体を ai-dev で測った値。2026-09-29）。Lighthouse も 12px 未満を「読みにくい」と数える。
   例外は小さな枠の中だけ。46〜60px の枠（TOP・目次の丸ボタン、吹き出しのアイコンの下の名前、追従バーの FOLLOW・SHARE、
   生成ツールのプレビュー枠の中）は 12px。入力欄は例外にしない（生成ツールの数値欄も 16px。iPhone の Safari は 16px 未満の欄に
   入ると、その字が 16px に見えるまでページを拡大する。WebKit の WKWebViewIOS.mm の _zoomToFocusRect）。記号だけのもの（■・i）は測っていない。
   段を増やさない。新しい部品もこの 4 段から選ぶ。 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a {
  color: inherit;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}

a:hover {
  opacity: 0.6;
}

::selection {
  background: var(--c-text);
  color: var(--c-bg);
}

/* =========================================================
   3. Layout
   ========================================================= */
.l-container {
  width: min(100% - 40px, var(--w-container));
  margin-inline: auto;
}

.l-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--w-side);
  gap: var(--gap-col);
  align-items: start;
  padding: 56px 0 96px;
}

.l-wrap--full {
  display: block;
  padding: 56px 0 96px;
}

.l-main {
  min-width: 0;
}

.l-side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.l-section {
  margin-bottom: 72px;
}

.l-section:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .l-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }
  .l-side {
    position: static;
  }
}

/* =========================================================
   4. Header / Nav / Drawer
   ========================================================= */
/* ヘッダーの箱を無くし、1行目と2行目を本文と同じ流れに置く。
   sticky は親の箱の中でしか留まれないので、<header> に箱があると2行目が
   ヘッダーごと（96px で）流れてしまう（実測）。600px 以下は flex に戻す。 */
.site-header {
  display: contents;
}

.site-bar {
  background: var(--c-bg);
}

/* 追従するのは2行目だけ。1行目はページと一緒に流れる（2026-09-18、なべちゃん） */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);   /* Safari 17 まで（iOS も）は接頭辞付きでしか効かない */
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}

/* 1行目：左端に自サイト名、右に残りの運営サイトと SNS。
   1100px 以下では一覧を横スクロールにし、600px 以下では自サイト名だけにする。
   2行目とのあいだの罫線は一度抜いたが、やはり入れる（2026-09-18、なべちゃん）。 */
.site-bar {
  border-bottom: 1px solid var(--c-line);
}

.site-bar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--bar-h);
}

.site-bar__sites {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-bar__sites::-webkit-scrollbar {
  display: none;
}

.site-bar__sites ul {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

/* 並びはどのサイトでも同じ。自サイト（.is-current）は太字と色で示す。
   21px だと FPSキーボードガイドで 1180px の枠に収まらないので 19px（実測）。
   601px 以上では左端の .site-logo は出さず、一覧の中の自サイトがその役をする */
.site-bar .site-logo {
  display: none;
}

.site-bar__sites .is-current a {
  font-family: var(--f-en);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-text);
}

.site-bar__sites a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-text-sub);
  transition: color 0.2s var(--ease);
}

.site-bar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

/* YouTube は赤。文字色と同じ灰だと押せないものに見える */
.site-bar__icon--youtube {
  fill: #f00;
}

.site-bar__sites a:hover {
  opacity: 1;
  color: var(--c-text);
}

/* 運営サイトと SNS のあいだの仕切り */
.site-bar__sites li + .site-bar__ext:not(.site-bar__ext + .site-bar__ext) {
  margin-left: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--c-line);
}

/* 2行目：ナビと道具 */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-h);
}

.site-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

.site-logo__name {
  font-family: var(--f-en);
  font-size: 19px;       /* 1行目の他サイトと同じ大きさ（.site-bar__sites a） */
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.site-logo__tag {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--c-text-sub);
  white-space: nowrap;
}

.global-nav {
  margin-left: auto;
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
}

.global-nav__list a {
  position: relative;
  display: block;
  padding: 4px 0;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.global-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.global-nav__list a:hover {
  opacity: 1;
}

/* 線を出すのは今いるページの項目だけ。hover では出さない（2026-09-24、なべちゃんの指示） */
.global-nav__list .is-current a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  color: var(--c-text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

/* hover の枠はマウスのある端末だけ。触れる端末では、押した指を離しても
   :hover が次に触るまで残り、「三」を押したあとに枠が居座る（2026-09-18、なべちゃんの指摘） */
@media (hover: hover) {
  .icon-btn:hover {
    border-color: var(--c-line);
    background: var(--c-bg-sub);
  }
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2行目の左端のロゴ（題材の印＋サイト名）。1行目が流れたあとも、追従する行に
   どのサイトかが残る（2026-09-18、なべちゃん）。 */
.site-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text);
  white-space: nowrap;
}

.site-brand__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2つ目の印。1つ目との間を詰める（並びの gap 8px を 2px 相当に） */
.site-brand__icon--second {
  margin-left: -6px;
}

.site-brand__name {
  font-family: var(--f-en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
}

.icon-btn__moon { display: none; }
:root[data-theme="dark"] .icon-btn__sun { display: none; }
:root[data-theme="dark"] .icon-btn__moon { display: block; }

/* 横並びナビが隠れる幅（1100px 以下）でだけ出す。PC では出さない
   （2026-09-18、なべちゃん。以前は content.css が PC でも常に出していた） */
.menu-btn {
  display: none;
}

/* --- drawer --- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.drawer.is-open .drawer__overlay {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 360px);
  height: 100%;
  padding: 24px 28px 48px;
  background: var(--c-bg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 24px;
}

.drawer__title {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-text-sub);
}

.drawer__nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  letter-spacing: 0.06em;
}

.drawer__nav a::after {
  content: "→";
  float: right;
  color: var(--c-text-sub);
}

.drawer__sub {
  margin-top: 32px;
}

/* --- search --- */
.searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}

.searchbox input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  outline: none;
}

/* マウスで押したときは出さず、キーボードで辿ったときだけ出す（監査 M07）。
   outline を消している入力欄は、これが無いと現在位置が見えない。 */
.searchbox input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.searchbox input::placeholder {
  color: var(--c-text-sub);
}

/* 「検索」はボタンらしく。灰色の小さな文字では押せるものに見えなかった
   （2026-09-18、なべちゃんの指摘）。サイドバーは線で囲み、検索窓は塗りつぶす */
.searchbox button {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--c-line-str);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c-text);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

@media (hover: hover) {
  .searchbox button:hover {
    opacity: 1;
    background: var(--c-text);
    color: var(--c-bg);
  }
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: start center;
  padding-top: 18vh;
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(6px);   /* Safari 17 まで（iOS も）は接頭辞付きでしか効かない（MDN の互換表） */
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  /* 開くときは visibility を即座に、閉じるときは消え終わってから隠す。
     まとめて transition すると、開いた直後もしばらく hidden の扱いのままで、
     中の入力欄へ focus できない（監査 M07）。 */
  transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
}

.search-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s var(--ease), visibility 0s;
}

.search-modal__inner {
  width: min(100% - 40px, 640px);
}

.search-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.search-modal__label {
  display: block;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-text-sub);
}

.search-modal .searchbox {
  border: none;
  border-bottom: 1px solid var(--c-line-str);
  padding: 12px 0;
}

.search-modal .searchbox input {
  font-size: 20px;
}

/* 検索窓の「検索」は×と同じ高さ（52px）で塗りつぶし。入力欄の隣で目立たせる */
.search-modal .searchbox button {
  height: 52px;
  padding: 0 28px;
  border-color: var(--c-text);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: 16px;
  font-weight: 700;
}

@media (hover: hover) {
  .search-modal .searchbox button:hover {
    background: var(--c-bg);
    color: var(--c-text);
  }
}

/* 検索欄の枠の右上の閉じる。ヘッダーの道具（38px）より大きく、線で囲ってボタンと分かるようにする。
   画面の右上に置くと PC では検索欄から遠すぎる */
.search-modal__close {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-line-str);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.search-modal__close svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

@media (hover: hover) {
  .search-modal__close:hover {
    opacity: 1;
    background: var(--c-bg-sub);
    border-color: var(--c-text);
  }
}

@media (max-width: 1100px) {
  /* 1行目の一覧が収まらない幅。右端をぼかして、先があることを示す */
  .site-bar__sites {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  /* 末尾まで送ったとき、最後の項目がぼかしの外まで出るぶんの余白。
     ul を中身の幅にしないと、親からはみ出した分だけがスクロール量になり
     この余白が数えられない（実測）。 */
  .site-bar__sites ul {
    width: max-content;
    padding-right: 32px;
  }
  .global-nav {
    display: none;
  }
  .menu-btn {
    display: grid;
  }
  .header-tools {
    margin-left: auto;
  }
}

@media (max-width: 600px) {
  /* スマートフォンではヘッダーを1行にする（2行は邪魔。2026-09-18、なべちゃん）。
     構造は変えず、1行目（自サイト名）と2行目（道具）を横に並べる。
     他サイトと SNS はドロワーとフッターが担う。 */
  /* 1行なので、ヘッダーごと追従させる（2行目だけの追従は横並びの中では効かない） */
  .site-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-line);
  }
  .site-nav {
    position: static;
    flex: 0 0 auto;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
  }
  /* 地はヘッダー（上の .site-header のすりガラス）に任せる。1行目の不透明な地（var(--c-bg)）が
     残っていると、本文がヘッダーの下に来たときサイト名の部分だけ塗りつぶされ、道具の部分だけ
     透けていた（2026-09-24、なべちゃんの指摘） */
  .site-bar {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border-bottom: 0;
  }
  .site-bar__inner {
    width: auto;
    margin-inline: 0;
    padding-left: 20px;
    height: var(--nav-h);
  }
  .site-bar__sites {
    display: none;
  }
  .site-bar .site-logo {
    display: flex;
  }
  .site-header__inner {
    width: auto;
    margin-inline: 0;
    padding-right: 20px;
    gap: 12px;
  }
  /* 1行なので左のサイト名と重なる。ロゴは出さない */
  .site-brand {
    display: none;
  }
  .site-logo__tag {
    display: none;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
  }
}

/* =========================================================
   5. Hero
   ========================================================= */
.hero {
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--c-line);
}

.hero__eyebrow {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-text-sub);
  margin-bottom: 24px;
}

.hero__title {
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.hero__title em {
  font-style: normal;
  display: inline-block;
  border-bottom: 4px solid var(--c-line-str);
  padding-bottom: 2px;
}

.hero__lead {
  max-width: 620px;
  font-size: 16px;
  color: var(--c-text-sub);
  line-height: 2;
}

/* 背景画像つきのヒーロー（config.hero_image）。旧サイトのメインビジュアルと同じく、
   写真の上に暗い覆いを重ねて白い文字。ダークモードでも同じ（写真の上なので反転しない） */
.hero--image {
  position: relative;
  isolation: isolate;
  min-height: 380px;
  display: flex;
  align-items: center;
  border-bottom: 0;
  color: #fff;
  background: #222 var(--hero-bg) center / cover no-repeat;
}

.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* **薄くしないこと。** 下地が写真なので、薄い側（右）で白文字の比が割れる。
     0.62→0.38 だったとき、FPSイヤホンの eyebrow が 4.35、日記の lead が 3.59・eyebrow が 3.41 で
     基準を下回っていた（2026-09-23 に画素で実測）。 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.38));
}

/* **白を薄めないこと。** 下地が写真なので、薄めると比が写真しだいで割れる。
   rgba(255,255,255,0.82) だったとき、FPSイヤホンの eyebrow が 4.35、日記の lead が 3.59 で
   基準（4.5）を下回っていた（2026-09-23 に bg-contrast.sh で実測）。
   **contrast.sh では見つからない。** 覆いが擬似要素なので axe が判定できず「要確認」に落ちる。 */
.hero--image .hero__eyebrow,
.hero--image .hero__lead,
.hero--image .hero__meta {
  color: #fff;
  /* **影で下地を暗くして、写真の明るいところでも読めるようにする。**
     日記のタグラインだけが、1行の右半分（明るい木目）で 4.5 を下回っていた
     （2026-09-23。文字の画素 1,448 中 593 が基準未満、最小 3.32。文字が乗っている画素だけを
     1つずつ測って特定した）。**覆いを濃くする案は取り下げた** ── 30 か所中 29 か所は元から
     満たしており、5サイトの写真を暗くする理由が無かった（なべちゃんの「読みにくいと感じなかった」
     という指摘で計測を見直し、報告した 3 件のうち 2 件が計測の誤りだと分かった）。 */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hero--image .hero__title {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
  .hero--image {
    min-height: 300px;
  }
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 36px;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-text-sub);
}

/* =========================================================
   6. Section Heading
   ========================================================= */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--c-line-str);
}

.sec-head__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sec-head__en {
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--c-text-sub);
}

.sec-head__more {
  flex-shrink: 0;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--c-text-sub);
}

.sec-head__more::after {
  content: " →";
}

/* =========================================================
   7. Post Card / Post List / Ranking
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
}

.card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-card__thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-bg-sub);
  margin-bottom: 16px;
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.post-card:hover .post-card__thumb img {
  transform: scale(1.05);
}

.post-card a {
  display: block;
}

.post-card a:hover {
  opacity: 1;
}

.cat-label {
  display: inline-block;
  padding: 4px 10px;
  font-size: 14px;
  letter-spacing: 0.06em;   /* 14px で 0.14em だと札が題名より目立つ */
  line-height: 1.4;
  color: var(--c-text-inv);
  background: var(--c-bg-inv);
}

/* 320px 前後の一覧では札の入る幅が約 144px で、14px の「有名人の使用マウス」が 1 字だけ次の行へ落ちる。
   文字は小さくせず、左右の余白と字間を詰めて 1 行に収める */
@media (max-width: 360px) {
  .cat-label {
    padding: 4px 6px;
    letter-spacing: 0;
  }
}

/* 横断検索の結果に付くサイト名のバッジ。カテゴリーの札と並ぶときは少し空ける */
.site-badge + .cat-label {
  margin-left: 6px;
}

.cat-label--outline {
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-line-str);
}

.post-card__thumb .cat-label {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.post-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 10px;
  transition: opacity 0.2s var(--ease);
}

.post-card:hover .post-card__title {
  opacity: 0.6;
}

.post-card__excerpt {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text-sub);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--c-text-sub);
}

.post-meta time::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: currentColor;
}

/* --- 記事リスト（横並び） --- */
.post-list {
  display: flex;
  flex-direction: column;
}

.post-list__item {
  border-bottom: 1px solid var(--c-line);
}

.post-list__item:first-child {
  border-top: 1px solid var(--c-line);
}

.post-list__link {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  padding: 28px 0;
  align-items: start;
}

.post-list__link:hover {
  opacity: 1;
}

.post-list__thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-bg-sub);
}

.post-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.post-list__link:hover .post-list__thumb img {
  transform: scale(1.05);
}

.post-list__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  margin: 10px 0;
}

.post-list__link:hover .post-list__title {
  opacity: 0.6;
}

.post-list__excerpt {
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.9;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- ランキング --- */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  counter-reset: rank;
}

.rank-list__item {
  counter-increment: rank;
}

.rank-list__link {
  display: grid;
  grid-template-columns: 28px 88px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.rank-list__link:hover {
  opacity: 1;
}

.rank-list__num {
  font-family: var(--f-en);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-text-sub);
}

.rank-list__item:nth-child(-n + 3) .rank-list__num {
  color: var(--c-text);
}

.rank-list__num::before {
  content: counter(rank, decimal-leading-zero);
}

.rank-list__thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-sub);
}

.rank-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-list__title {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
}

.rank-list__link:hover .rank-list__title {
  opacity: 0.6;
}

.rank-list__date {
  display: block;
  margin-top: 4px;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--c-text-sub);
}

/* --- カテゴリータイル --- */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.cat-tiles a {
  display: block;
  padding: 32px 20px;
  background: var(--c-bg);
  text-align: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.cat-tiles a:hover {
  opacity: 1;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.cat-tiles__en {
  display: block;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-text-sub);
  margin-bottom: 8px;
}

.cat-tiles a:hover .cat-tiles__en,
.cat-tiles a:hover .cat-tiles__count {
  color: inherit;
}

.cat-tiles__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.cat-tiles__count {
  display: block;
  font-family: var(--f-en);
  font-size: 14px;
  color: var(--c-text-sub);
  margin-top: 6px;
}

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

@media (max-width: 600px) {
  .card-grid,
  .card-grid--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .post-list__link {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }
  .post-list__title {
    font-size: 15px;
    margin: 8px 0;
  }
  .post-list__excerpt {
    display: none;
  }
}

/* =========================================================
   8. Sidebar Widget
   ========================================================= */
.widget__title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--c-line-str);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.widget__title span {
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
  margin-left: 8px;
}

.profile-widget {
  text-align: center;
  border: 1px solid var(--c-line);
  padding: 32px 24px;
}

.profile-widget__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}

.profile-widget__name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.profile-widget__role {
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
  margin-bottom: 16px;
}

.profile-widget__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text-sub);
  text-align: left;
}

.profile-widget__link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.cat-links li + li {
  border-top: 1px solid var(--c-line);
}

.cat-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  transition: padding-left 0.25s var(--ease);
}

.cat-links a:hover {
  opacity: 1;
  padding-left: 6px;
}

/* サイドバーとフッターの運営サイト一覧。自サイトは太字で示す */
.site-links .is-current a {
  font-weight: 700;
}

.cat-links__count {
  font-family: var(--f-en);
  font-size: 14px;
  color: var(--c-text-sub);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud a {
  display: block;
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tag-cloud a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
  color: var(--c-text);
}

.widget-banner {
  display: block;
  padding: 28px 24px;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  text-align: center;
}

.widget-banner__en {
  display: block;
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  opacity: 0.6;
}

.widget-banner__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 6px;
}

.widget-banner__text {
  display: block;
  font-size: 14px;
  opacity: 0.7;
}

/* =========================================================
   9. Breadcrumb / Pagination
   ========================================================= */
.breadcrumb {
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  opacity: 0.4;
}

.breadcrumb li:last-child {
  color: var(--c-text);
}

/* **hover で薄くしない。** 既定の a:hover（opacity .6）が掛かると
   ライト 2.43・ダーク 3.19 まで落ちる（11px なので 4.5 が要る）。
   **下線も出さない**（hover でリンクの下に線を出さない。2026-09-24、なべちゃんの指示）。
   hover しても見た目は変わらない */
.breadcrumb a:hover {
  opacity: 1;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  font-family: var(--f-en);
  font-size: 15px;
  letter-spacing: 0.06em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.pagination a:hover {
  opacity: 1;
  border-color: var(--c-line-str);
}

.pagination .is-current {
  background: var(--c-bg-inv);
  border-color: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.pagination .is-dots {
  border-color: transparent;
  color: var(--c-text-sub);
  min-width: 24px;
}

/* =========================================================
   10. Single
   ========================================================= */
/* 上の余白は .l-wrap の padding-top（56px）が持つ。ここにも 48px を置くと
   二重になり、パンくずの下からタイトルまで 104px 空く。サイドバーの先頭
   （56px）とも 48px ずれていた。移行時からの持ち越しで、旧 SWELL は
   パンくずのすぐ下から記事の箱が始まっていた（2026-09-23 に外した）。 */
.entry-header {
  padding: 0 0 36px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 40px;
}

.entry-header__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.entry-title {
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

/* 上の 24px は、記事ページで下に続く .entry-header__meta との間隔。
   固定ページはタイトルの下に何も続かないので、padding-bottom の 36px に
   足されて 60px になり、区切り線までが間延びする。h1 が箱の最後の子の
   ときだけ外す（記事ページには効かない。2026-09-23）。 */
.entry-title:last-child {
  margin-bottom: 0;
}

.entry-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.entry-header__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--c-text-sub);
}

.entry-header__author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.entry-thumb {
  margin-bottom: 40px;
}

/* 下地は figure ではなく img に置く。figure に敷くと figcaption の
   後ろまで灰色になり、白地に出る本文の figcaption と見た目が変わる */
.entry-thumb img {
  width: 100%;
  background: var(--c-bg-sub);
}

/* アイキャッチのキャプション。本文の figcaption と同じ体裁にする。
   下の .entry-content figcaption と揃えること（片方だけ直さない） */
.entry-thumb figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--c-text-sub);
  text-align: center;
}

/* --- 目次 --- */
.toc {
  border: 1px solid var(--c-line);
  padding: 24px 28px;
  margin-bottom: 48px;
  background: var(--c-bg-sub);
}

.toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toc__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.toc__title span {
  font-family: var(--f-en);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
}

/* 本文の中の目次は、題（h2）に本文の見出しの規則（.entry-content h2。詳細度が高い）が掛かり、上の余白 3.2em で
   枠の上に 77px の空きができ、「閉じる」だけが上に浮いていた（2026-09-02 の移行から）。余白だけ打ち消す
   （大きさと下線は本文の見出しのまま。題は下に並ぶ 16px の項目より大きくする） */
.entry-content .toc__title {
  margin-top: 0;
}

.toc__toggle {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--c-text-sub);
}

.toc__body {
  margin-top: 18px;
  counter-reset: toc;
}

.toc.is-closed .toc__body {
  display: none;
}

.toc__body > li {
  counter-increment: toc;
}

.toc__body > li + li {
  margin-top: 12px;
}

.toc__body > li > a {
  display: block;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
}

.toc__body > li > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-en);
  font-size: 14px;
  color: var(--c-text-sub);
  margin-right: 10px;
}

.toc__body ul {
  margin: 8px 0 0 26px;
}

.toc__body ul li + li {
  margin-top: 6px;
}

.toc__body ul a {
  display: block;
  font-size: 15px;
  color: var(--c-text-sub);
  line-height: 1.7;
}

.toc__body ul a::before {
  content: "–";
  margin-right: 8px;
}

.toc__body a.is-active {
  opacity: 1;
  color: var(--c-text);
  font-weight: 700;
}

/* --- 本文タイポグラフィ --- */
.entry-content {
  /* 記事本文の可読性。幅（804px）は変えず、文字を大きくして
     1 行を約 43 字にする。日本語の長文は 35〜45 字が読みやすい。
     行間 2.0 は、行と行のあいだの余白を 16〜18px に保つための値
     （1.9 だと文字が大きくなるぶん余白が減って、狙いと逆になる）。
     600px 以下は 17px に据え置く（375px 幅で 1 行が 16 字まで減るのを避ける。
     下の @media を見ること）。 */
  font-size: 18px;
  line-height: 2.0;
  letter-spacing: 0.03em;
  color: var(--c-text-body);
}

.entry-content > * + * {
  margin-top: 1.6em;
}

.entry-content h2 {
  /* 本文 18px に対して 1.33 倍。本文が 16px だった頃の 22px（1.38 倍）と
     ほぼ同じ差を保つ。 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin-top: 3.2em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-line-str);
}

.entry-content h3 {
  /* 本文 18px に対して 1.17 倍。本文 16px の頃の 19px（1.19 倍）と同じ差。 */
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 2.6em;
  padding-left: 14px;
  border-left: 3px solid var(--c-line-str);
}

.entry-content h4 {
  /* 本文と同じ大きさ。太字と ■ で見出しとわかる（本文 16px の頃と同じ関係） */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  margin-top: 2.2em;
}

.entry-content h4::before {
  content: "■";
  margin-right: 8px;
  font-size: 11px;
  vertical-align: 2px;
}

@media (max-width: 600px) {
  /* スマートフォンでは本文 17px。18px だと 375px 幅で 1 行が 16 字になり、
     画面に入る量が減る。見出しは PC と同じ比率（1.35 / 1.18 / 1.0 倍）で下げる。 */
  .entry-content    { font-size: 17px; }
  .entry-content h2 { font-size: 23px; }
  .entry-content h3 { font-size: 20px; }
  .entry-content h4 { font-size: 17px; }
}

.entry-content a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.entry-content strong {
  font-weight: 700;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
}

.entry-content ul > li {
  list-style: none;
  position: relative;
}

.entry-content ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.85em;
  width: 6px;
  height: 6px;
  background: var(--c-text);
}

.entry-content ol {
  list-style: decimal;
}

.entry-content ol > li::marker {
  font-family: var(--f-en);
  font-size: 16px;
  color: var(--c-text-sub);
}

.entry-content li + li {
  margin-top: 0.5em;
}

.entry-content blockquote {
  position: relative;
  padding: 24px 28px 24px 56px;
  background: var(--c-bg-sub);
  font-size: 16px;
  color: var(--c-text-sub);
}

.entry-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 20px;
  top: 10px;
  font-family: var(--f-en);
  font-size: 46px;
  line-height: 1;
  color: var(--c-text);
  opacity: 0.25;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-style: normal;
}

.entry-content figure img {
  width: 100%;
}

.entry-content figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--c-text-sub);
  text-align: center;
}

.entry-content code {
  font-family: var(--f-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--c-bg-sub);
  border: 1px solid var(--c-line);
}

.entry-content pre {
  padding: 20px 22px;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.8;
}

.entry-content pre code {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}

.entry-content hr {
  height: 1px;
  background: var(--c-line);
  margin: 3em 0;
}

/* 横スクロールする表の枠。
   **キーボードで枠に入れるよう、HTML 側に tabindex="0" が付いている。**
   決まりは manage の tasks/done/audit_table-scroll-keyboard-and-contrast-tool.md */
.table-scroll {
  overflow-x: auto;
}

/* まだ続く側に影を出す。印を付けるのは main.js の initTableScroll。
   **影を background（グラデーション）で出さないこと。** 祖先に背景画像があると
   manage の contrast.sh が中の文字を測れなくなり（contrast.mjs の bgOf）、
   1ページで 240 か所が検査から漏れた（2026-09-22 に実測）。box-shadow なら測れる。 */
.table-scroll.is-scroll-left {
  box-shadow: inset 16px 0 13px -13px var(--c-shade);
}

.table-scroll.is-scroll-right {
  box-shadow: inset -16px 0 13px -13px var(--c-shade);
}

.table-scroll.is-scroll-left.is-scroll-right {
  box-shadow: inset 16px 0 13px -13px var(--c-shade),
              inset -16px 0 13px -13px var(--c-shade);
}

.table-scroll:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.entry-content table {
  width: 100%;
  min-width: 480px;
  font-size: 16px;
  border: 1px solid var(--c-line);
}

.entry-content th,
.entry-content td {
  padding: 12px 16px;
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.entry-content thead th {
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
}

.entry-content tbody th {
  background: var(--c-bg-sub);
  font-weight: 700;
  white-space: nowrap;
}

/* スマホ幅（600px 以下）では、表を横にスクロールさせない（2026-09-24）。
   表ごとに次のどれかになる。どれにするかは main.js の initTableCards が決める。
     そのまま   … 下の指定だけで画面幅に収まる表（3 列以下のほとんど）
     .tc-fit    … それでも枠からはみ出す表。本文のセルの語を途中で割ってでも収める
     .tc-table  … 4 列以上の表と、.tc-fit でも収まらない表。1 行を 1 枚のカードにする
   カードの形はクロトリwiki（gamers-wiki の shared/assets/table-cards.*）に倣った。
   JS が動かないときはカードにも .tc-fit にもならず、下の指定だけが効く。収まらない表は従来どおり横に送れる
   （枠の tabindex は HTML にあるので、キーボードでも届く）。 */
@media (max-width: 600px) {
  /* table.has-fixed-layout と書くのは、content.css の .has-fixed-layout（等分の固定幅）に勝つため。
     等分のままだと、列が狭いときに英数字の語が途中で割れる */
  .entry-content table,
  .entry-content table.has-fixed-layout {
    min-width: 0;
    table-layout: auto;
  }

  .entry-content th,
  .entry-content td {
    padding: 8px 10px;
    overflow-wrap: break-word;
  }

  .entry-content tbody th {
    white-space: normal;
  }

  /* URL とクロスヘアコードは語の途中で折ってよい。折らないと、それだけで枠からはみ出す */
  .entry-content td a,
  .entry-content td code {
    overflow-wrap: anywhere;
  }

  /* 左端の見出しの列が 1〜2 文字の幅まで潰れないよう、5 文字ぶんの幅を持たせる。
     min-width にしないこと。表のセルの min-width は Safari（WebKit）で効く保証が無い。
     中身の最も長い語がこれより広ければ、列はその幅まで広がる。
     content-box にするのは、5em を中身の幅にするため。余白込み（border-box）だと中身が 3 字強しかなく、
     「通信方／式」「再生周／波数帯／域」と 3 字ずつで折れていた（2026-09-29） */
  .entry-content tr > :first-child:not(:only-child) {
    box-sizing: content-box;
    width: 5em;
  }

  .entry-content .tc-fit td {
    overflow-wrap: anywhere;
  }

  /* ---- カード（.tc-table）---- */
  .table-scroll.tc-wrap {
    overflow-x: visible;
    box-shadow: none;
  }

  .entry-content .tc-table,
  .entry-content .tc-table thead,
  .entry-content .tc-table tbody,
  .entry-content .tc-table tfoot,
  .entry-content .tc-table tr {
    display: block;
  }

  .entry-content .tc-table {
    width: 100%;
    border: 0;
  }

  .entry-content .tc-table .tc-row {
    margin-bottom: 12px;
    border: 1px solid var(--c-line);
  }

  .entry-content .tc-table .tc-row:last-child {
    margin-bottom: 0;
  }

  /* tr まで書いて詳細度を (0,3,2) にし、上の :first-child の width: 5em（(0,3,1)）に、書く順に頼らず勝たせる */
  .entry-content .tc-table tr.tc-row > th,
  .entry-content .tc-table tr.tc-row > td {
    display: block;
    width: auto;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--c-line);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .entry-content .tc-table tr.tc-row > :first-child {
    border-top: 0;
  }

  /* 1 列目はカードの見出し。列の名前は付けない */
  .entry-content .tc-table .tc-head {
    background: var(--c-bg-sub);
    font-weight: 700;
  }

  /* 値の前に列の名前を出す。本文と同じ色の太字（薄めない） */
  .entry-content .tc-table [data-label]::before {
    content: attr(data-label) "：";
    font-weight: 700;
  }

  /* 画像のセルは、列の名前を画像の上の行に置く */
  .entry-content .tc-table .tc-media[data-label]::before {
    display: block;
    margin-bottom: 4px;
  }

  /* 画像はカードの幅いっぱいまで広げない。広い幅の表の列と同じくらいで止める。
     人物一覧のイラストは people.php が 150px で出しているので、それに揃えた。
     広げると、ロスター表の顔写真（900×900）が 1 人ぶんのカードを縦に長くする */
  .entry-content .tc-table .tc-media img {
    max-width: 150px;
  }

  /* 中身の無いセルは、列の名前ごと出さない */
  .entry-content .tc-table tr.tc-row > td:empty {
    display: none;
  }

  /* 列の見出しの行は、目では見えなくなるが支援技術には残す（読み上げの関連付けを切らない） */
  .entry-content .tc-table .tc-headrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 題の行（人物データのロスター表の「ロスター（選手名簿）」）は、カードの上に帯で残す */
  .entry-content .tc-table .tc-title {
    margin-bottom: 12px;
  }

  .entry-content .tc-table .tc-title > * {
    display: block;
  }
}

/* =========================================================
   11. Content Parts
   ========================================================= */
/* --- ボックス --- */
.n-box {
  position: relative;
  padding: 24px 26px;
  border: 1px solid var(--c-line-str);
}

.n-box__label {
  position: absolute;
  top: -0.8em;          /* 1行目を枠線に半分かける（行の高さ 1.6 の半分）。文字の大きさが変わっても合うよう em で書く。 */
  left: 20px;           /* 長い題が折れたときは、2行目から下が枠の内側へ流れる */
  padding: 0 10px;
  background: var(--c-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.n-box > *:first-child {
  margin-top: 0;
}

.n-box--fill {
  border: none;
  background: var(--c-bg-sub);
}

.n-box--dark {
  border: none;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.n-box--fill .n-box__label,
.n-box--dark .n-box__label {
  position: static;
  display: block;
  padding: 0;
  margin-bottom: 8px;
  background: none;
}

.n-box--dark .n-box__label {
  opacity: 0.6;
}

/* --- 吹き出し --- */
.n-balloon {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.n-balloon__icon {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
}

.n-balloon__icon img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
}

.n-balloon__name {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text-sub);
}

.n-balloon__text {
  position: relative;
  flex: 1;
  padding: 16px 20px;
  border: 1px solid var(--c-line-str);
  font-size: 16px;
  line-height: 1.9;
}

.n-balloon__text::before,
.n-balloon__text::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
}

.n-balloon__text::before {
  left: -10px;
  border-width: 7px 10px 7px 0;
  border-color: transparent var(--c-line-str) transparent transparent;
}

.n-balloon__text::after {
  left: -8.5px;
  border-width: 7px 10px 7px 0;
  border-color: transparent var(--c-bg) transparent transparent;
}

.n-balloon--right {
  flex-direction: row-reverse;
}

.n-balloon--right .n-balloon__text::before {
  left: auto;
  right: -10px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent var(--c-line-str);
}

.n-balloon--right .n-balloon__text::after {
  left: auto;
  right: -8.5px;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent var(--c-bg);
}

/* --- メリット / デメリット --- */
.n-goodbad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.n-gb {
  border: 1px solid var(--c-line-str);
  padding: 22px 24px;
}

.n-gb__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.n-gb__title::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.n-gb--good .n-gb__title::before {
  content: "◎";
}

.n-gb--bad .n-gb__title::before {
  content: "×";
}

.n-gb ul {
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.9;
}

.n-gb li {
  list-style: none;
  position: relative;
}

.n-gb li + li {
  margin-top: 8px;
}

.n-gb li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.8em;
  width: 5px;
  height: 5px;
  background: currentColor;
}

/* --- 評価 --- */
.n-review {
  border: 1px solid var(--c-line-str);
}

.n-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.n-review__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.n-review__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-en);
}

.n-review__score b {
  font-size: 24px;
  line-height: 1;
}

.n-review__score span {
  font-size: 14px;
  opacity: 0.6;
}

.n-review__body {
  padding: 20px 22px;
}

.n-rating {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px 14px;
  font-size: 14px;
}

.n-rating__label {
  color: var(--c-text-sub);
  letter-spacing: 0.06em;
}

.n-rating__bar {
  position: relative;
  height: 6px;
  background: var(--c-line);
}

.n-rating__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--c-text);
}

.n-rating__num {
  font-family: var(--f-en);
  font-size: 14px;
  text-align: right;
}

.n-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* --- CTA ボタン --- */
.n-cta {
  text-align: center;
  border: 1px solid var(--c-line);
  padding: 28px 24px;
}

.n-cta__note {
  font-size: 14px;
  color: var(--c-text-sub);
  margin-bottom: 14px;
}

.n-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid var(--c-line-str);
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  text-decoration: none !important;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.btn::after {
  content: "→";
  font-weight: 400;
}

.btn:hover {
  opacity: 1;
  background: var(--c-bg);
  color: var(--c-text);
}

.btn--outline {
  background: transparent;
  color: var(--c-text);
}

.btn--outline:hover {
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
}

.btn--sm {
  min-width: 0;
  padding: 10px 20px;
  font-size: 14px;
}

/* 本文内のリンク色（.entry-content a）に負けないよう明示的に上書き。
   詳細度が同じ場合は後勝ちのため、この4行の順番は変えないこと */
.entry-content .btn          { color: var(--c-text-inv); }
.entry-content .btn:hover    { color: var(--c-text); }
.entry-content .btn--outline { color: var(--c-text); }
.entry-content .btn--outline:hover { color: var(--c-text-inv); }

/* --- ブログカード --- */
.n-blogcard {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  border: 1px solid var(--c-line);
  padding: 16px;
  text-decoration: none !important;
  transition: border-color 0.25s var(--ease);
}

.n-blogcard:hover {
  opacity: 1;
  border-color: var(--c-line-str);
}

.n-blogcard__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-sub);
}

.n-blogcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.n-blogcard__label {
  display: block;
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
}

.n-blogcard__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin: 6px 0 8px;
}

.n-blogcard__excerpt {
  font-size: 14px;
  color: var(--c-text-sub);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* --- FAQ --- */
.n-faq {
  border-top: 1px solid var(--c-line);
}

.n-faq details {
  border-bottom: 1px solid var(--c-line);
}

.n-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  cursor: pointer;
  list-style: none;
}

.n-faq summary::-webkit-details-marker {
  display: none;
}

.n-faq summary::before {
  content: "Q";
  font-family: var(--f-en);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  margin-top: 3px;
}

.n-faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-en);
  font-weight: 400;
  color: var(--c-text-sub);
}

.n-faq details[open] summary::after {
  content: "−";
}

.n-faq__answer {
  display: flex;
  gap: 12px;
  padding: 0 0 20px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text-sub);
}

.n-faq__answer::before {
  content: "A";
  font-family: var(--f-en);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  border: 1px solid var(--c-line-str);
  color: var(--c-text);
  margin-top: 3px;
}

/* --- 広告表記 --- */
.n-pr {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--c-line);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-text-sub);
}

@media (max-width: 600px) {
  .n-goodbad {
    grid-template-columns: minmax(0, 1fr);
  }
  .n-blogcard {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
  }
  .n-rating {
    grid-template-columns: 88px minmax(0, 1fr) 36px;
  }
  .btn {
    min-width: 100%;
  }
}

/* =========================================================
   12. Share / Author / Related / Post Nav
   ========================================================= */
.entry-footer {
  margin-top: 64px;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

/* 記事末尾のフォローカード（partials/sns-cta.php）。旧 WordPress の p-snsCta と
   同じく、記事のアイキャッチを背景に敷いて暗い覆いを重ね、白い文字を中央に置く。
   旧テーマの build/css/modules/parts/sns-cta.css を実測した値（下地 #1d1d1d・
   覆い rgba(0,0,0,.7)・最小の高さ 200px）。ヒーロー（764 行）と同じで、写真の
   上なのでダークモードでも反転しない。 */
.sns-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 40px;
  color: #fff;
  background: #1d1d1d;
}

.sns-cta__figure {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sns-cta__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* **薄くしないこと。** 下地が記事ごとに違う写真なので、薄めると白文字の比が
   写真しだいで割れる（ヒーローの 782 行と同じ理由）。旧サイトも .7 だった。 */
.sns-cta__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  padding: 24px 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

.sns-cta__message {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

/* **下地（rgba）を外さないこと。** 覆いだけだと、明るいアイキャッチの記事で
   13px の白文字が基準を割る（/earphone-shape-type/ で 4.35。基準 4.5。
   2026-09-23 に bg-contrast.sh で実測）。文言（16px 700）は 9.15 で通るが、
   ボタンの字は細いので足りない。ここを敷くと写真に関わらず 10 を超える。 */
.sns-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fff;
  padding: 10px 18px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.sns-cta__icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* 既定の a:hover（opacity .6）が掛かると比が落ちるので、色そのものを反転する */
@media (hover: hover) {
  .sns-cta__btn:hover {
    opacity: 1;
    background: #fff;
    color: #1d1d1d;
  }
}

/* 記事末尾の共有。旧 WordPress（SWELL）の c-shareBtns と同じ形に戻した
   （2026-09-23、なべちゃんの指示）。塗りつぶしのボタンを横幅いっぱいに均等割りし、
   URL のコピーは全幅の独立したボタン。**高さだけ旧サイトの 30px ではなく 44px。**
   指で押す目安（Apple 44pt / Google 48dp）に合わせてある（AGENTS.md のコピーボタンの節と
   同じ理由）。スマートフォンではここが唯一の共有の口で、サイド追従バーは 1320px 以上に
   しか出ない。 */
.share {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 旧 WordPress の c-shareBtns__message。字の両脇に 1px の棒を ±40 度 傾けて
   「＼ 〜 ／」に見せる（旧テーマの build/css/modules/page/single.css の実測値。
   文字ではないので、フォントに依らず同じ形になる）。 */
.share__message {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.share__message span {
  display: inline-block;
  position: relative;
  padding: 0 1.5em;
  line-height: 1.5;
}

.share__message span::before,
.share__message span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 1.5em;
  background: currentcolor;
}

.share__message span::before {
  left: 0;
  transform: rotate(-40deg);
}

.share__message span::after {
  right: 0;
  transform: rotate(40deg);
}

.share__list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* flex: 1 で均等割り。min-width: 0 が無いと、中身より縮まない */
.share__item {
  flex: 1;
  min-width: 0;
}

.share__btn,
.share__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border: 0;
  cursor: pointer;
  transition: filter 0.2s var(--ease);
}

/* 下地は各社の色。ボタンは currentcolor で塗り、印は白で抜く（旧サイトと同じ手）。
   .share__icon--<key> の色指定より詳細度が高いので、ここが勝つ。 */
.share__btn {
  background: currentcolor;
}

.share__item--facebook  { color: #1877f2; }
.share__item--x         { color: #000000; }
.share__item--hatena    { color: #00a4de; }
.share__item--pinterest { color: #bd081c; }
.share__item--line      { color: #06c755; }

/* **X の黒はダークの下地（#0d0d0d）に沈む**ので、ダークでは白地に黒い印へ反転する
   （X の公式ブランドガイドも黒地に白・白地に黒の両方を認めている）。 */
:root[data-theme="dark"] .share__item--x {
  color: #fafafa;
}

:root[data-theme="dark"] .share__item--x .share__icon {
  fill: #0d0d0d;
}

/* フォーカスの枠は既定（reset.css）だと currentColor で、各社の色は隣のボタンに紛れ、コピーは白（文字色）で
   ライトの白地に消える。追従バー（.sns-rail__btn--fill）と同じく文字色で描く */
.share__btn:focus-visible,
.share__copy:focus-visible {
  outline-color: var(--c-text);
}

.share__btn .share__icon {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.share__copy {
  background: #5f6264;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* 旧サイトは #717475 だったが、白文字とのコントラストが 4.64 で基準（4.5）すれすれ
   だったので、少し濃くしてある（2026-09-23 に bg-contrast.sh で実測）。 */
.share__copy-done {
  display: none;
}

.share__copy.is-copied .share__copy-label {
  display: none;
}

.share__copy.is-copied .share__copy-done {
  display: block;
}

@media (hover: hover) {
  .share__btn:hover,
  .share__copy:hover {
    opacity: 1;
    filter: brightness(0.88);
  }
}

.author-box {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 32px;
  margin-top: 48px;
  border: 1px solid var(--c-line);
}

.author-box__avatar img {
  width: 92px;
  height: 92px;
  border-radius: 50%;
}

.author-box__role {
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
}

.author-box__name {
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 10px;
}

.author-box__text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text-sub);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.post-nav__item {
  background: var(--c-bg);
  padding: 24px;
  transition: background 0.25s var(--ease);
}

.post-nav__item:hover {
  opacity: 1;
  background: var(--c-bg-sub);
}

.post-nav__label {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--c-text-sub);
  margin-bottom: 8px;
}

.post-nav__item--next {
  text-align: right;
}

.post-nav__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .author-box {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    padding: 28px 20px;
  }
  .author-box__avatar img {
    margin: 0 auto;
  }
  .author-box__text {
    text-align: left;
  }
  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-nav__item--next {
    text-align: left;
  }
}

/* =========================================================
   13. Footer / Page Top
   ========================================================= */
.site-footer {
  background: var(--c-bg-inv);
  color: var(--c-text-inv);
  padding: 72px 0 32px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-text-inv) 20%, transparent);
}

.site-footer .site-logo__name {
  font-size: 24px;
}

.site-footer__desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.9;
  opacity: 0.65;
  max-width: 32em;
}

/* **フッターの控えめな文字を opacity で薄めないこと。** 下地が
   ライト＝黒・ダーク＝白と反転するので、同じ opacity でも比が変わる
   （見出しとコピーライトはライト 5.19 に対しダーク 3.58 だった。2026-09-22 に実測）。
   色そのものを書く。決まりは manage/docs/agent-rules.md の
   「文字が読める濃さかは、目で見ずに測る」。 */
.footer-nav__title {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-text-inv-sub);
  margin-bottom: 18px;
}

.footer-nav__list li + li {
  margin-top: 12px;
}

.footer-nav__list a {
  font-size: 15px;
  opacity: 0.85;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
}

/* Amazon のライセンスが求める表示。小さくてよいが、読める大きさを保つ */
.site-footer__amazon-notice {
  flex-basis: 100%;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-inv-sub);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  opacity: 0.7;
}

.copyright {
  font-family: var(--f-en);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--c-text-inv-sub);
}

/* サイド追従の SNS バー（画面左端の中央）。solo-work-lab の共有バーを手本にした。
   コンテンツ幅 1180px の左にバー 40px と余白が収まる 1320px 以上でだけ出す。
   出し入れは main.js の initSnsRail（300px スクロールしたら .is-visible） */
.sns-rail {
  position: fixed;
  left: 20px;
  top: 50%;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0s 0.2s;
}

@media (min-width: 1320px) {
  .sns-rail {
    display: flex;
  }
}

.sns-rail.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease), visibility 0s;
}

.sns-rail__label {
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.12em;   /* 12px で 0.24em だと、1320px の幅で本文の左端（70px）にかかる */
  color: var(--c-text-sub);
  margin-bottom: 2px;
}

/* FOLLOW と SHARE の群の間 */
.sns-rail__label:not(:first-child) {
  margin-top: 12px;
}

/* URL をコピーしたら、鎖の印をチェックに差し替えて2秒見せる（文字を出す場所が無い） */
.sns-rail__icon--check {
  display: none;
}

.sns-rail__btn.is-copied .sns-rail__icon--check {
  display: block;
}

.sns-rail__btn.is-copied .sns-rail__icon--link {
  display: none;
}

.sns-rail__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);
  color: var(--c-text);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), filter 0.2s var(--ease);
}

/* SHARE は記事末尾の共有ボタン（.share__btn）と同じ各社の色で塗り、印を白で抜く（2026-09-29、なべちゃんの判断。
   旧サイトの固定シェアボタンも塗りだった）。FOLLOW は運営者カード・サイドバーの SNS と同じ枠線のまま */
.sns-rail__btn--x        { color: #000000; }
.sns-rail__btn--facebook { color: #1877f2; }
.sns-rail__btn--hatena   { color: #00a4de; }
.sns-rail__btn--pinterest { color: #bd081c; }
.sns-rail__btn--line     { color: #06c755; }
.sns-rail__btn--copy     { color: #5f6264; }

.sns-rail__btn--fill {
  background: currentcolor;
  border-color: currentcolor;
}

.sns-rail__btn--fill .sns-rail__icon {
  fill: #fff;
}

/* フォーカスの枠は既定（reset.css）だと currentColor で各社の色になり、ライトの LINE・はてなは白地に沈む。文字色で描く */
.sns-rail__btn--fill:focus-visible {
  outline-color: var(--c-text);
}

/* 鎖とチェックは線画なので、塗らずに線の色（currentColor）を白にする（上の fill より後に置く） */
.sns-rail__btn--copy .sns-rail__icon {
  color: #fff;
  fill: none;
}

/* X の黒はダークの下地に沈むので、記事末尾と同じく白地に黒い印へ反転する */
:root[data-theme="dark"] .sns-rail__btn--x {
  color: #fafafa;
}

:root[data-theme="dark"] .sns-rail__btn--x .sns-rail__icon {
  fill: #0d0d0d;
}

.sns-rail__icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* FOLLOW（枠線）のロゴの色（.sns-rail__icon の fill: currentColor より後に置く）。X は文字色のまま。
   SHARE は塗りなので、印は上の --fill の白。鎖とチェックは線画なので塗らない。
   FOLLOW が hover で反転したときは白（下） */
.sns-rail__icon--youtube  { fill: #f00; }
.sns-rail__icon--link,
.sns-rail__icon--check    { fill: none; }

/* hover：FOLLOW（枠線）は白黒反転、SHARE（塗り）は記事末尾と同じく少し暗くする */
@media (hover: hover) {
  .sns-rail__btn:not(.sns-rail__btn--fill):hover {
    opacity: 1;
    background: var(--c-bg-inv);
    color: var(--c-text-inv);
    border-color: var(--c-bg-inv);
  }
  .sns-rail__btn:not(.sns-rail__btn--fill):hover .sns-rail__icon {
    fill: var(--c-text-inv);
  }
  .sns-rail__btn--fill:hover {
    opacity: 1;
    filter: brightness(0.88);
  }
}

#pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  /* 地の色（ライトは白地に黒文字・ダークは黒地に白文字）＋枠線のすりガラス。目次ボタン
     （content.css の .toc-fab）と同じ見た目で、**片方だけ変えない**（2026-09-24、なべちゃんの指示。
     主要な機能ではないので目立たせない。以前は反転色の塗りだった）。
     地だけを半透明にして下をぼかし、文字は透かさない（全体を半透明にすると、下の本文の字が
     ボタンの文字に重なって読めなくなった）。**62% より薄くしない**：下地がいちばん暗いとき
     （ダークで白い下地が透けるとき）の文字との差の見込みが 4.69 で、下げると基準 4.5 を割る */
  border: 1px solid var(--c-line-str);
  background: var(--c-bg);   /* color-mix が効かない古いブラウザ用 */
  background: color-mix(in srgb, var(--c-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);   /* Safari 17 まで（iOS も）は接頭辞付きでしか効かない */
  backdrop-filter: blur(6px);
  color: var(--c-text);
  font-family: var(--f-en);
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

#pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 記事のページは「記事」と「TOP」の2行（footer.php。2026-09-24、なべちゃんの指示）。
   「記事」は目次ボタンの「目次」と同じ書き方（本文の書体・太字・字間なし） */
#pagetop.pagetop--article {
  align-content: center;
  gap: 3px;
  line-height: 1;
}

.pagetop__sub {
  font-family: var(--f-sans);
  font-weight: 700;
  letter-spacing: 0;
}

/* キーボードで選んだときの枠は、ボタンの内側に描く（2026-09-24、なべちゃんの指示）。
   既定（reset.css）の外側の枠は、外に出すと選んだボタンだけ一回り大きく見える。内側なら外寸（46px）は変わらない。
   **半透明にしない**（なべちゃんの意図と違った）。色は文字の色なので、地との差は文字と同じになる。
   **目次ボタン（content.css の .toc-fab:focus-visible）と同じ値にしてある。片方だけ変えない** */
#pagetop:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

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

/* =========================================================
   14. Utility
   ========================================================= */
.u-center { text-align: center; }
.u-mt-0   { margin-top: 0 !important; }
.u-mt-40  { margin-top: 40px !important; }
.u-mt-64  { margin-top: 64px !important; }
.u-mb-0   { margin-bottom: 0 !important; }

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

.is-noscroll {
  overflow: hidden;
}

/* --- 404 --- */
.notfound {
  text-align: center;
  padding: 120px 0;
}

.notfound__num {
  font-family: var(--f-en);
  font-size: clamp(72px, 18vw, 180px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.notfound__title {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 12px;
}

.notfound__text {
  font-size: 16px;
  color: var(--c-text-sub);
  margin-bottom: 32px;
}

/* --- スタイルガイド用 --- */
.sg-item {
  padding: 40px 0;
  border-bottom: 1px dashed var(--c-line);
}

.sg-item__label {
  font-family: var(--f-en);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--c-text-sub);
  margin-bottom: 20px;
}

.sg-code {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--c-bg-sub);
  border: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-sub);
  overflow-x: auto;
  white-space: pre;
}

.sg-swatch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.sg-swatch__chip {
  height: 72px;
  border: 1px solid var(--c-line);
}

.sg-swatch__name {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-sub);
}