/* HYAKUYOU フルモデルチェンジ案（CINRA型）
   正本：:root のトークン（一覧と根拠は docs/TOKENS_cinra.md）。後工程はここにある値だけを使い、色・書体を増やさない。
   モバイルファースト：ベース＝375px、min-width で拡張（主ブレークポイント 1024px、補助 768px / 1366px）。 */

:root {
  /* 色（CINRA 実測） */
  --c-bg: #fff;
  --c-ink: #000a02;            /* 本文・見出し */
  --c-ink-off: #757677;        /* 非選択タブの文字（不透明。白地 4.55:1） */
  --c-sub: #6a6b6c;            /* 文字用の灰：日付・著者・リード（白 5.34:1／#f4f5f6 4.89:1） */
  --c-border: #868788;         /* 罫・枠線・アイコン用の灰（CINRA 実測の灰。文字には使わない） */
  --c-icon: #c6c7c8;           /* アイコン灰・仮枠 */
  --c-line: #e3e4e5;           /* 罫 1px */
  --c-surface: #f4f5f6;        /* 面（検索窓・チップ・灰面ブロック） */
  --c-surface-hover: #eef0f1;  /* 面の hover */
  --c-accent: #f12b00;         /* 赤（非テキスト）：連載ブロックの三角だけ */
  --c-accent-text: #d92600;    /* 文字用の赤：実在の連載名（白 4.97:1／#f4f5f6 4.55:1） */
  --c-link: #224b8f;           /* 本文リンク・「この連載をみる」 */

  /* 書体（2つだけ） */
  --ff-ja: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ff-en: "DM Sans", var(--ff-ja);

  /* 文字サイズ（ベース＝SP。PC値は 1024px で上書き） */
  --fs-meta: 12px;       /* 日付・著者・チップ */
  --fs-label: 12px;      /* テーマ名（PC 13） */
  --fs-nav: 14px;        /* 英字ナビ・ボタン */
  --fs-tab: 15px;        /* 大分類タブ */
  --fs-lead: 16px;       /* リード */
  --fs-card: 18px;       /* カード見出し（PC 16） */
  --fs-hero: 18px;       /* 主役見出し（PC clamp 24→32） */
  --fs-section: 20px;    /* セクション見出し 和（PC 28） */
  --fs-section-en: 23px; /* セクション見出し 英（PC 32） */
  --fs-h1: 24px;         /* ページ h1（PC 36） */
  --lh-tight: 1.44;
  --lh-card: 1.53;
  --lh-body: 2;

  /* 寸法 */
  --container: 1600px;
  --gutter: 15px;        /* 768: 30 / 1024: 40 / 1366: 60 */
  --hd-top: 58px;        /* PC 80 */
  --hd-sub: 48px;
  --logo-h: 34px;        /* PC 44 */
  --logo-scale: .77;     /* スクロール時 */
  --tab-h: 44px;         /* PC 45 */
  --bar-h: 56px;         /* SP下部固定バー（セーフエリアは別に足す） */
  --tap: 44px;
  --btn-h: 48px;
  --chip-h: 32px;
  --gap-hero: 38px;      /* 主役：写真と文字の間（PC） */
  --gap-card: 30px;      /* 横組みカード：写真と文字の間 */
  --gap-col: 28px;       /* 2列の間 */
  --row-pad: 30px;       /* 行の上下（PC）。SPはカード間 24 */
  --wave-h: 4px;

  /* 角丸・影・動き */
  --r-photo: 0;
  --r-chip: 5px;
  --r-pill: 999px;
  --shadow: none;
  --hover-opacity: .6;
  --ease: cubic-bezier(.215, .61, .355, 1);
  --dur: .3s;

  /* 手描き風の波線（16px周期を3山＝48pxで少しずつ揺らす。mask で currentColor を通す） */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='4' viewBox='0 0 48 4'%3E%3Cpath d='M0 2.2C2.6.6 5.2.5 8 2.1s5.3 1.7 8 .1c2.8-1.5 5.5-1.7 8.2 0 2.6 1.6 5.2 1.5 7.8-.2 2.7-1.6 5.4-1.5 8.1.1 2.6 1.5 5.2 1.6 7.9-.1' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  :root { --gutter: 30px; }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --fs-label: 13px;
    --fs-card: 16px;
    --fs-hero: clamp(24px, 2.5vw, 32px);
    --fs-section: 28px;
    --fs-section-en: 32px;
    --fs-h1: 36px;
    --hd-top: 80px;
    --logo-h: 44px;
    --tab-h: 45px;
  }
}
@media (min-width: 1366px) {
  :root { --gutter: 60px; }
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* フォーカス移動・アンカーで要素が sticky ヘッダーや SP下部バーの下に隠れないように */
  scroll-padding-top: calc(var(--hd-top) + 16px);
  scroll-padding-bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { html { scroll-padding-top: 150px; scroll-padding-bottom: 0; } }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-ja);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  font-feature-settings: "palt"; /* CINRA と同じ。約物を詰める */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  padding-bottom: calc(var(--bar-h) + 1px + env(safe-area-inset-bottom, 0px));
}
/* 取材相談ページ：SP下部バーを出さないので、その分の下余白も外す */
body.no-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
html:has(body.no-bar) { scroll-padding-bottom: 16px; }
body.no-bar main { padding-bottom: 72px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: var(--c-bg); padding: 8px 12px; border: 1px solid var(--c-line); }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.bdx { word-break: keep-all; overflow-wrap: anywhere; }
.nb { white-space: nowrap; }
/* 10-26 Tommy了承：行の長さをそろえる。見出し・カードは PC（1024px以上）だけ balance（最後の行が「橋」「針路」の1〜2字や「──」だけにならない）。
   未対応のブラウザ（古い Safari）は今まで通りの折り返しになるだけ */
.hero__title, .card__title, .vcard__title, .lrow__title, .mini__title, .pn__title, .fx__title, .wwu__title, .consult__title,
.cheading__title, .sp__title, .feature__title, .sblock__title, .art-h2, .art-h3, .toc__list li { text-wrap: balance; }
/* 10-27 本文（.prose p ほか・.profile__text）の pretty は外した。iPhone の Safari（WebKit）の pretty は段落全体の行の長さをそろえ直すので、
   語の途中で切れるのに右端は大きく空く（5567 の 390幅で行の右の空き 平均78px→外すと30px）。Chrome は最後の数行しか触らないので気づけなかった。
   本文は普通の折り返し（行末まで詰める）。段落の最後が1〜2字だけの行になるのは日本語の本文では普通の範囲 */
/* 記事タイトル H1 と見出しの手動改行：改行で分けたかたまりを1行ずつのブロックにして、かたまりごとに balance（<br> は不要になるので隠す） */
.art__title > .bdx, .art-h2 > .bdx, .art-h3 > .bdx { display: block; text-wrap: balance; }
.art__title > br, .art-h2 > br, .art-h3 > br { display: none; }
/* 10-30 運営者の指摘7：カードの記事タイトルも、旧WP で <br> を入れていた所で改行する（lib/text.mjs の TL）。かたまりを1行ずつのブロックにして、間の <br> は隠す。
   旧サイトはスマホでも同じ所で改行していた（旧テーマの CSS に br を隠す指定なし）ので、幅で切り替えない */
.tl { display: block; }
.tl + br { display: none; }
/* 10-26 Tommy指示：スマホ（767px以下）は balance をやめて pretty に。balance だと行が短くそろい、右だけ空いて左右の余白がずれて見えた（前と同じく右端まで詰める。最後の1〜2字だけの行は pretty で防ぐ）
   10-26 Tommy指示：タブレット（768〜1023px）も右の空きが平均38px（前は22px）だったので pretty に広げる。1024px以上は balance のまま
   10-27 pretty もやめて普通の折り返し（wrap）に。Safari（WebKit）の pretty は行を組み直して右を空ける（WebKit 390幅の見出し・カードの右の空き 平均48〜58px→wrap で26〜40px） */
@media (max-width: 1023px) {
  .hero__title, .card__title, .vcard__title, .lrow__title, .mini__title, .pn__title, .fx__title, .wwu__title, .consult__title,
  .cheading__title, .sp__title, .feature__title, .sblock__title, .art-h2, .art-h3, .toc__list li,
  .art__title > .bdx, .art-h2 > .bdx, .art-h3 > .bdx { text-wrap: wrap; }
}
.icon { width: 24px; height: 24px; flex: none; }

.container {
  box-sizing: content-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* hover は opacity だけ（CINRA と同じ） */
@media (hover: hover) {
  a, .tab, .iconbtn { transition: opacity var(--dur) var(--ease); }
  a:hover, .tab:hover, .iconbtn:hover { opacity: var(--hover-opacity); }
  .chip:hover { opacity: 1; background: var(--c-surface-hover); }
}

/* ---------- ヘッダー ---------- */
.hd-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
}
.hd__top {
  height: var(--hd-top);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.hd__tagline { display: none; }
.hd__logo { grid-column: 2; line-height: 0; }
.hd__logo img {
  height: var(--logo-h);
  width: auto;
  transform-origin: 50% 50%;
  transition: transform var(--dur) var(--ease);
}
.hd.is-scrolled .hd__logo img { transform: scale(var(--logo-scale)); }
.hd__search { display: none; }
.hd__sp { grid-column: 3; justify-self: end; display: flex; margin-right: -10px; }
.iconbtn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}

.hd__sub { display: none; }

.follow { display: flex; align-items: center; gap: 14px; }
.follow__label { font-family: var(--ff-en); font-weight: 700; font-size: 12px; }
.follow__icon { width: var(--tap); height: var(--tap); display: grid; place-items: center; margin-inline: -10px; }
.follow-sp {
  display: flex; justify-content: space-between; gap: 12px;
  height: 45px; align-items: center;
  border-bottom: 1px solid var(--c-line);
}
/* 10-11：コンセプトの一言（PC の .hd__tagline と同じ文言）。Follow 行の左に置き、行の高さは変えない */
.follow-sp__tagline { min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-sp .follow { flex: none; }

.hd__field {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding-inline: 12px;
  background: var(--c-surface);
}
.hd__field .icon { width: 18px; height: 18px; }
.hd__field input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 16px; /* iOS のズーム防止 */
}
.hd__field input::placeholder { color: var(--c-sub); }
.hd__field:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }

@media (min-width: 1024px) {
  .follow-sp, .hd__sp { display: none !important; }
  .hd__top { border-bottom: 1px solid var(--c-line); }
  .hd__tagline {
    display: block; grid-column: 1; grid-row: 1;
    font-size: var(--fs-meta); color: var(--c-sub);
  }
  .hd__search { display: block; grid-column: 3; grid-row: 1; justify-self: end; width: min(240px, 100%); }
  .hd__search input { font-size: 13px; } /* PCはズームの心配がないので CINRA と同じ小さめ */
  .hd__sub { display: block; border-bottom: 1px solid var(--c-line); }
  .hd__subin { height: var(--hd-sub); display: flex; align-items: center; justify-content: space-between; }
  .gnav { display: flex; align-items: center; }
  .gnav__list { display: flex; }
  .gnav__list a, .gnav__cta {
    display: flex; align-items: center; height: var(--hd-sub);
    padding-inline: 11px;
    font-family: var(--ff-en); font-weight: 700; font-size: var(--fs-nav);
  }
  /* 取材・制作の相談：小さな墨ピル（見た目36px・当たり判定は ::after で上下に広げて44px） */
  .gnav__cta {
    font-family: var(--ff-ja); font-size: 13px;
    height: 36px; margin-left: 22px; padding-inline: 16px;
    position: relative;
    background: var(--c-ink); color: var(--c-bg); border-radius: var(--r-pill);
  }
  .gnav__cta::before {
    content: ""; position: absolute; left: -12px; top: 50%;
    width: 1px; height: 16px; margin-top: -8px; background: var(--c-line);
  }
  .gnav__cta::after { content: ""; position: absolute; inset: -4px 0; }
}

/* ---------- 10-30 指摘9：ロゴとコンセプトの存在感（見比べ用の2案。config.mjs の HEADER_LOGO → <html data-hd>。既定 now は下の指定が効かない） ----------
   色・書体は今のトークンのまま（墨 --c-ink・和文 --ff-ja・太字）。罫線も今の1本のまま */
/* 案A 控えめ：ロゴを一回り大きく・コンセプトを大きく濃く。ヘッダーの高さは今のまま（PC 80＋48・スマホ 58） */
html[data-hd="a"] { --logo-h: 40px; }
html[data-hd="a"] .follow-sp__tagline { font-size: var(--fs-nav); letter-spacing: .04em; }
@media (min-width: 1024px) {
  html[data-hd="a"] { --logo-h: 60px; --logo-scale: .73; }
  html[data-hd="a"] .hd__tagline { font-size: var(--fs-nav); font-weight: 700; color: var(--c-ink); letter-spacing: .04em; }
}
/* 案B はっきり：ロゴをさらに大きくし、コンセプトをロゴの直下に置いて一体で見せる。
   上段を --hd-extra だけ高くし、sticky の top を同じだけ上に出す（固定されたときに見えるのは今と同じ高さ＝PC 80＋48・スマホ 58。scroll-padding も今のまま）。
   固定されたら（.is-scrolled）コンセプトを消し、ロゴを見えている帯の中央まで下げて小さくする（高さは変えず transform だけ＝本文がずれない） */
html[data-hd="b"] { --logo-h: 42px; --hd-extra: 26px; --hd-b-shift: 24px; }
html[data-hd="b"] .hd { top: calc(-1 * var(--hd-extra)); }
html[data-hd="b"] .hd__top { height: calc(var(--hd-top) + var(--hd-extra)); grid-template-rows: auto auto; align-content: center; row-gap: 4px; }
html[data-hd="b"] .hd__logo { grid-column: 2; grid-row: 1; justify-self: center; transition: transform var(--dur) var(--ease); }
html[data-hd="b"] .hd__tagline {
  display: block; grid-column: 2; grid-row: 2; justify-self: center;
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--c-ink); letter-spacing: .02em; white-space: nowrap;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
html[data-hd="b"] .hd__sp { grid-row: 1 / -1; transition: transform var(--dur) var(--ease); }
html[data-hd="b"] .hd.is-scrolled .hd__logo { transform: translateY(var(--hd-b-shift)); }
html[data-hd="b"] .hd.is-scrolled .hd__tagline { opacity: 0; visibility: hidden; }
html[data-hd="b"] .hd.is-scrolled .hd__sp { transform: translateY(calc(var(--hd-extra) / 2)); }
/* スマホ・タブレット：コンセプトはロゴの下に出したので、Follow 行の同じ文は出さない（Follow は右寄せのまま） */
html[data-hd="b"] .follow-sp__tagline { display: none; }
html[data-hd="b"] .follow-sp { justify-content: flex-end; }
@media (min-width: 1024px) {
  html[data-hd="b"] { --logo-h: 72px; --logo-scale: .6; --hd-extra: 44px; --hd-b-shift: 36px; }
  html[data-hd="b"] .hd__top { row-gap: 6px; }
  html[data-hd="b"] .hd__tagline { font-size: var(--fs-tab); line-height: 21px; letter-spacing: .06em; }
  html[data-hd="b"] .hd__search { grid-row: 1 / -1; transition: transform var(--dur) var(--ease); }
  html[data-hd="b"] .hd.is-scrolled .hd__search { transform: translateY(calc(var(--hd-extra) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hd="b"] .hd__logo, html[data-hd="b"] .hd__tagline, html[data-hd="b"] .hd__sp, html[data-hd="b"] .hd__search { transition: none; }
}

/* ---------- 大分類タブ ---------- */
/* 10-18 Tommy「この三角いらん。もっとUXよく」：線の切り欠き（▼）をやめた。
   選択中＝墨・太字・そのタブの文字幅だけの3px下線／ほか＝灰・標準の太さ・全体に1pxの共通の下罫。動き（下線が滑るなど）は付けない。
   タブは文字の幅＋左右6px（フォーカスの枠が文字にかからないため）で左詰め、間は gap。下線は左右6pxを除いた文字の幅。太字にしても幅が変わらないよう、::before に太字の文字を見えない高さ0で入れて幅を取る（top.mjs の data-label）。
   375 で3つは収まる（実測）。収まらない幅になったら横スクロール（.tabs の overflow-x） */
.tabs-wrap { padding-inline: var(--gutter); }
.tabs {
  display: flex; gap: 16px; margin-inline: -6px;
  /* 共通の下罫は余白6pxの内側だけ（文字・下の写真の左端とそろえる） */
  background: linear-gradient(var(--c-line), var(--c-line)) 6px 100% / calc(100% - 12px) 1px no-repeat;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: max(var(--tab-h), 44px);
  background: none; border: 0; padding: 0 6px; cursor: pointer;
  font-size: var(--fs-tab); font-weight: 400;
  color: var(--c-ink-off);
}
.tab::before { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.tab[aria-selected="true"] { color: var(--c-ink); font-weight: 700; }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute; left: 6px; right: 6px; bottom: 0;
  height: 3px; background: var(--c-ink);
}
.tab:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
@media (hover: hover) {
  .tab:hover { opacity: 1; color: var(--c-ink); }
}
@media (min-width: 1024px) {
  .tabs { gap: 28px; }
}

/* ---------- 写真（3:2・角丸0・影0） ---------- */
.ph {
  aspect-ratio: 3 / 2;
  background: var(--c-surface);
  border-radius: var(--r-photo);
  overflow: hidden;
}
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* ---------- テーマ名（波線）と連載名（赤） ---------- */
.labels { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wave {
  position: relative; display: inline-block; flex: none;
  font-size: var(--fs-label); line-height: 1.3; padding-bottom: 5px;
}
.wave::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--wave-h); background: currentColor;
  -webkit-mask: var(--wave) repeat-x left center / 48px var(--wave-h);
  mask: var(--wave) repeat-x left center / 48px var(--wave-h);
}
.series {
  color: var(--c-accent-text);
  font-size: var(--fs-label); line-height: 1.45;
  padding-left: 12px; border-left: 1px solid var(--c-line);
  min-width: 0;
}

/* ---------- 主役記事 ---------- */
.tabpanel { padding-top: 15px; }
.hero__img { display: block; }
.hero__body { padding-top: 14px; display: flex; flex-direction: column; }
.hero__title { font-size: var(--fs-hero); line-height: var(--lh-card); font-weight: 700; }
.hero__lead { display: none; }
.meta { margin-top: 10px; }
.byline {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); color: var(--c-sub);
}
.byline img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line); }
.date { font-size: var(--fs-meta); color: var(--c-sub); }
.byline + .date { margin-top: 12px; }
.hero { padding-bottom: 24px; }

/* ---------- 横組みカード（SPは縦組み1列、PCは2列） ---------- */
.card { padding-block: 24px 0; }
.card__img { display: block; }
.card__body { padding-top: 14px; }
.card__title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 700; }

.more { display: flex; justify-content: center; padding-block: 36px 40px; }
.pill {
  display: flex; align-items: center; justify-content: center; position: relative;
  width: min(300px, 86%); min-height: var(--btn-h); padding: 8px 16px 8px 40px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: var(--fs-nav); font-weight: 700; text-align: center;
}
.pill .icon { position: absolute; left: 18px; width: 16px; height: 16px; }

/* 768〜1023（タブレット）：写真が画面幅いっぱいに膨らまないよう、主役もカードも横組みにする（CINRA 未確認の幅・当方判断） */
@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-card); }
  .hero__body { padding-top: 0; }
  .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 24px; }
  .card__body { padding-top: 0; }
  .bar .bar__cta { flex: 0 1 360px; margin-left: auto; }
}
@media (min-width: 1024px) {
  .tabpanel { padding-top: 35px; }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-hero);
    padding-bottom: var(--row-pad);
    border-bottom: 1px solid var(--c-line);
  }
  .hero__body { padding-top: 0; }
  .hero .labels { margin-bottom: 14px; }
  .hero__title { line-height: 1.55; }
  .hero__lead {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
    margin-top: 16px; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-sub);
  }
  .hero .meta { margin-top: auto; padding-top: 24px; }
  .hero .byline + .date { margin-top: 32px; }

  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap-col);
    padding-block: var(--row-pad);
    border-bottom: 1px solid var(--c-line);
  }
  .card {
    display: grid;
    grid-template-columns: minmax(0, 300fr) minmax(0, 256fr);
    column-gap: var(--gap-card);
    padding: 0;
  }
  .card__body { padding-top: 0; display: flex; flex-direction: column; }
  .card__title { line-height: var(--lh-tight); }
  .card .meta { margin-top: auto; padding-top: 16px; }
  .card .byline + .date { margin-top: 20px; }
  .more { padding-block: 40px 56px; }
}

/* ---------- タブ3：テーマから探す ---------- */
/* 当たり判定を上下6px広げる（.chip::after）。横スクロール枠で切れないよう枠の上下に6pxの余白を足し、同じだけ負のマージンで相殺（見た目は不変） */
.chips { display: flex; gap: 12px 8px; overflow-x: auto; padding-block: 6px 10px; margin-block: -6px; scrollbar-width: none; }
.chips li { flex: none; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--chip-h); padding-inline: 12px;
  background: var(--c-surface); border-radius: var(--r-chip);
  font-size: var(--fs-meta); font-weight: 700;
}
.chip::after { content: ""; position: absolute; inset: calc((44px - var(--chip-h)) / -2) 0; } /* 見た目32px・当たり判定44px（B9） */
.chip__n { color: var(--c-sub); font-weight: 400; }
.wave--lg { font-size: inherit; }
@media (min-width: 1024px) {
  .chips { flex-wrap: wrap; overflow: visible; }
}

/* ---------- ボタン（墨地の主ボタン：取材・制作の相談だけ） ---------- */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding-inline: 18px;
  background: var(--c-ink); color: var(--c-bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-nav); font-weight: 700;
}
.btn-primary .icon { width: 18px; height: 18px; }

/* ---------- SP下部固定バー ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.bar__find {
  display: flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding-inline: 4px 10px;
  font-size: 13px; font-weight: 700; flex: none;
}
.bar__find .icon { width: 20px; height: 20px; }
.bar__cta { flex: 1; min-width: 0; }
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .bar { display: none; }
}


/* =========================================================================
   STEP4 ここから：トップ中段・一覧・記事・固定ページ
   ========================================================================= */

/* ---------- 本文の列（1列）。10-26 Tommy指示：記事詳細の右サイドバー（ランキング）を外し、全ページ サイドバー列なしの1列に ---------- */
.layout__main { min-width: 0; max-width: 840px; margin-inline: auto; }
/* 1024px 以上：本文をヘッダー・タブと同じコンテナ幅に揃え、左端をそろえる（取材相談の1列は中央のまま） */
@media (min-width: 1024px) {
  .layout:not(.layout--single) > .layout__main { max-width: none; margin-inline: 0; }
}

/* ---------- セクション見出し（英字 DM Sans＋和の小見出し） ---------- */
.sec-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 6px; margin-bottom: .875em; line-height: 1; font-size: var(--fs-section-en); }
.sec-title__en { font-family: var(--ff-en); font-weight: 700; }
.sec-title__ja { font-size: 14px; font-weight: 700; }
.block { margin-top: 64px; }
@media (min-width: 1024px) { .block { margin-top: 88px; } }

/* ---------- 横スクロール枠（SP）→ 3列（768〜） ---------- */
.hscroll {
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.hscroll::-webkit-scrollbar { display: none; }
.grid3 { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; }
.grid3 > * { scroll-snap-align: start; }
@media (min-width: 768px) {
  .hscroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .grid3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}

/* 縦組みカード（3列ブロック） */
.vcard__img { display: block; margin-bottom: 12px; }
.vcard .labels { margin-bottom: 8px; }
.vcard__title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 700; }
.vcard .meta { margin-top: 10px; }
.vcard .byline + .date { margin-top: 10px; }
.who { margin-bottom: 4px; font-size: 13px; font-weight: 700; }
@media (min-width: 1024px) { .vcard__title { line-height: var(--lh-tight); } }

/* ボタンの変種 */
.more--in { padding-block: 32px 0; }
.pill--white, .pill--sm { display: inline-flex; }
.pill--white { background: var(--c-bg); border-color: var(--c-bg); width: auto; padding-inline: 44px 28px; }
.pill--sm { width: auto; min-height: 44px; padding: 6px 16px 6px 36px; font-size: 13px; flex: none; }
.pill--sm .icon { left: 14px; width: 14px; height: 14px; }
.btn-primary--wide { width: min(300px, 86%); min-height: var(--btn-h); margin-inline: auto; }

/* ---------- 灰面ブロック（Meet Your Neighbors） ---------- */
.surface {
  background: var(--c-surface);
  margin-inline: calc(var(--gutter) * -1);
  padding: 32px var(--gutter);
}
.neighbors { margin-top: 64px; }
.neighbors__head { border-bottom: 1px solid var(--c-ink); margin-bottom: 20px; padding-bottom: 14px; }
.neighbors__head .sec-title { margin-bottom: 0; }
@media (min-width: 768px) { .surface { margin-inline: 0; padding: 40px; } }
@media (min-width: 1024px) { .neighbors { margin-top: 88px; } .neighbors__head { margin-bottom: 24px; } }


/* ---------- 連載バナー（Special Feature の位置：840×443 の写真全面） ---------- */
.feature { margin-top: 64px; }
.feature__img .ph { aspect-ratio: 3 / 2; }
.feature__body { padding-top: 16px; }
.feature__kicker { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.feature__kicker .icon { width: 18px; height: 18px; }
.feature__title { margin-top: 8px; font-size: 22px; line-height: 1.4; font-weight: 700; }
.feature__lead { margin-block: 8px 20px; font-size: 14px; line-height: 1.7; color: var(--c-sub); }
.feature .pill { display: inline-flex; margin: 0; width: auto; padding-inline: 44px 28px; border-color: var(--c-line); }
/* 768〜：写真を主役に全面で見せ、文字は写真の下部に重ねる。覆いは文字の帯だけ（墨60%＝白文字が最も明るい写真の上でも4.5:1以上） */
@media (min-width: 768px) {
  .feature { position: relative; color: var(--c-bg); }
  .feature__img .ph { aspect-ratio: 840 / 473; }
  .feature__body {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding: 20px 32px 24px; background: rgb(0 10 2 / .6);
  }
  .feature__text { min-width: 0; max-width: 520px; }
  .feature__title { font-size: clamp(22px, 2.6vw, 28px); }
  .feature__lead { margin-bottom: 0; color: var(--c-bg); font-size: 13px; }
  .feature .pill { flex: none; color: var(--c-ink); border-color: var(--c-bg); }
}
@media (min-width: 1024px) { .feature { margin-top: 88px; } }

/* ---------- コンセプト帯の別案（10-11・config.mjs の CONCEPT_BAND で切替。写真を使わない3案） ---------- */
.fx { margin-top: 64px; }
.fx .feature__kicker { margin-bottom: 12px; }
.fx__title { font-size: 22px; line-height: 1.4; font-weight: 700; }
.fx__lead { margin-block: 12px 24px; font-size: 14px; line-height: 1.8; color: var(--c-sub); max-width: 34em; }
.fx .pill { display: inline-flex; margin: 0; width: auto; padding-inline: 44px 28px; }
@media (min-width: 1024px) { .fx { margin-top: 88px; } }

/* 案A 文字だけ：墨の帯。SPは画面の端まで塗る */
.fx--text {
  background: var(--c-ink); color: var(--c-bg);
  margin-inline: calc(var(--gutter) * -1); padding: 40px var(--gutter) 44px;
}
.fx--text .fx__title { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.3; letter-spacing: -.01em; }
.fx--text .fx__lead { color: var(--c-bg); margin-bottom: 28px; }
.fx--text .pill { color: var(--c-ink); }
@media (min-width: 768px) {
  .fx--text { margin-inline: 0; padding: 56px 48px; }
  .fx--text .fx__title { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.2; }
  .fx--text .fx__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-border); }
  .fx--text .fx__lead { margin: 0; }
  .fx--text .pill { flex: none; }
}
@media (min-width: 1024px) { .fx--text { padding: 72px 64px 64px; } }

/* 案B 百人百様を形で：同じ升目に形と向きが違う印を100個。SPは横20×縦5の帯、768〜は横10×縦10の正方形を右に */
.fx--pattern { border-top: 1px solid var(--c-ink); padding-top: 28px; }
.fx__fig { color: var(--c-ink); }
.fx__marks { display: block; width: 100%; height: auto; }
.fx__marks path, .fx__marks circle { vector-effect: non-scaling-stroke; stroke-width: 1.6px; }
.fx__marks .m-fill { fill: currentColor; stroke: none; }
.fx__marks .m-gray { stroke: var(--c-border); }
.fx__marks .m-fill.m-gray { fill: var(--c-border); }
.fx__marks--c10 { display: none; }
.fx--pattern .fx__text { margin-top: 28px; }
.fx--pattern .pill { border-color: var(--c-line); }
@media (min-width: 768px) {
  .fx--pattern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 40px; }
  .fx--pattern .fx__fig { order: 2; justify-self: end; width: min(100%, 440px); }
  .fx__marks--c20 { display: none; }
  .fx__marks--c10 { display: block; }
  .fx--pattern .fx__text { margin-top: 0; }
  .fx--pattern .fx__title { font-size: clamp(26px, 3.2vw, 40px); }
}

/* 案C 記事の言葉を引く：引用が主役、コンセプトの文は脇 */
.fx--quote { border-top: 1px solid var(--c-ink); padding-top: 28px; display: flex; flex-direction: column; }
.fx--quote .fx__text { order: 2; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.fx--quote .pill { border-color: var(--c-line); }
.fx__quote { margin: 0; }
.fx__quote blockquote { margin: 0; font-size: 24px; line-height: 1.6; font-weight: 700; }
.fx__quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; margin-top: 20px; font-size: 14px; }
.fx__who { font-weight: 700; }
.fx__role { color: var(--c-sub); font-size: 13px; }
.fx__src { flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--c-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fx__src .icon { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .fx--quote { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 56px; align-items: start; padding-top: 40px; }
  .fx--quote .fx__text { order: 0; margin-top: 0; padding-top: 0; border-top: 0; }
  .fx__quote blockquote { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.5; }
}

/* ---------- 連載ブロック（赤三角＋赤の連載名＋「この連載をみる」） ---------- */
.sblock, .tblock { padding-bottom: 32px; border-bottom: 1px solid var(--c-line); margin-bottom: 32px; }
.sblock__head, .tblock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sblock__title { position: relative; padding-left: 14px; color: var(--c-accent-text); font-size: 18px; line-height: 1.45; font-weight: 700; min-width: 0; }
.sblock__title::before {
  content: ""; position: absolute; left: 0; top: .55em;
  border-left: 6px solid var(--c-accent); border-block: 4px solid transparent;
}
.sblock__more { display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: var(--tap); margin-top: -10px; color: var(--c-link); font-size: 13px; font-weight: 700; }
.sblock__more .icon { width: 14px; height: 14px; }
.tblock__title { font-size: 16px; font-weight: 700; }
.tblock__lead { margin: -6px 0 16px; font-size: var(--fs-meta); line-height: 1.7; color: var(--c-sub); }
@media (min-width: 1024px) { .tblock__title { font-size: 18px; } }

/* ---------- 取材・制作の帯（CINRA JOB の位置。新色は作らず墨地＋白文字） ---------- */
.band { margin-top: 64px; }
.band__bar {
  background: var(--c-ink); color: var(--c-bg);
  padding: 12px 20px;
  font-weight: 700; font-size: var(--fs-section); line-height: 1.3;
}
.band__text { margin-top: 16px; font-size: 14px; line-height: 1.8; }
.band__sub { margin-block: 24px 14px; font-size: 13px; font-weight: 700; color: var(--c-sub); }
.more--band { padding-block: 32px 8px; }
@media (min-width: 1024px) { .band { margin-top: 88px; } .band__bar { padding: 13px 20px; } }

/* ---------- SPメニュー：<dialog> のドロワー（右から重ねる。外側タップ・Esc で閉じる。背面はスクロール停止） ---------- */
.drawer {
  inset: 0 0 0 auto;
  margin: 0;
  width: min(86%, 360px); max-width: none;
  height: 100%; max-height: none;
  padding: 0; border: 0;
  background: var(--c-bg); color: var(--c-ink);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease), overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
.drawer[open] { transform: none; }
@starting-style { .drawer[open] { transform: translateX(100%); } }
.drawer::backdrop { background: rgb(0 10 2 / .4); }
html:has(.drawer[open]), html.is-locked { overflow: hidden; }
.drawer__in { padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--hd-top); margin-right: -10px; border-bottom: 1px solid var(--c-line);
}
.drawer__title { font-family: var(--ff-en); font-weight: 700; font-size: 14px; }
.drawer__search { margin-top: 20px; }
.drawer__list { margin-block: 12px 24px; }
.drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; border-bottom: 1px solid var(--c-line);
  font-weight: 700; font-size: 15px;
}
.drawer__list .icon { width: 16px; height: 16px; color: var(--c-border); }
.drawer .btn-primary { min-height: var(--btn-h); }
.drawer__follow { display: flex; justify-content: center; margin-top: 20px; }

/* ---------- フッター手前の全幅面「Work with us」（CINRA の Newsletter の位置） ---------- */
.wwu { margin-top: 72px; background: var(--c-surface); overflow: hidden; }
.wwu__in { display: grid; gap: 32px; padding-top: 48px; }
.wwu__text { text-align: center; }
.wwu__en { font-family: var(--ff-en); font-weight: 700; font-size: 40px; line-height: 1.1; }
.wwu__title { margin-top: 16px; font-size: 18px; line-height: 1.5; font-weight: 700; }
.wwu__lead { margin-block: 12px 24px; font-size: 14px; line-height: 2; color: var(--c-sub); }
.wwu__btn { width: min(300px, 86%); min-height: var(--btn-h); margin-inline: auto; }
.wwu__mock { display: flex; justify-content: center; align-items: flex-end; }
.phone {
  width: min(260px, 72%);
  height: 340px; overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-line); border-bottom: 0;
  border-radius: 28px 28px 0 0;
  padding: 10px 10px 0;
}
.phone img { width: 100%; border-radius: 18px 18px 0 0; }
@media (min-width: 768px) {
  .wwu__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 0; }
  .wwu__text { padding-block: 64px; }
  .wwu__mock { align-self: end; padding-top: 48px; }
  .phone { width: min(280px, 80%); height: 380px; }
}
/* 10-27 Tommy指示：スマホ画面の絵が記事タイトルの途中で切れていた。絵を全部収め、画面の枠も下まで閉じる。
   「タイトルの下で切って下端を灰面へ消す」案と撮り比べ、下の相談ボタンまで見えて置き物として収まる全部入りを採った（screenshots/2026-10-27_pc3fix/compare_wwu_*） */
.wwu--fit .wwu__mock { padding-bottom: 40px; }
.wwu--fit .phone { width: min(220px, 62%); height: auto; border-bottom: 1px solid var(--c-line); border-radius: 28px; padding-bottom: 10px; }
.wwu--fit .phone img { border-radius: 18px; }
@media (min-width: 768px) {
  .wwu--fit .wwu__mock { align-self: center; padding-block: 48px; }
  .wwu--fit .phone { width: min(240px, 80%); }
}
@media (min-width: 1024px) {
  .wwu--fit .phone { width: 260px; }
}
@media (min-width: 1024px) {
  .wwu { margin-top: 96px; }
  .wwu__en { font-size: 48px; }
  .wwu__title { font-size: 22px; }
}

/* ---------- フッター（テーマを / 区切り） ---------- */
.ft { padding-top: 40px; }
.ft__in { display: grid; gap: 32px; }
.ft__row { display: grid; gap: 8px; margin-bottom: 24px; }
.ft__label { font-size: 13px; color: var(--c-sub); }
.slash { display: flex; flex-wrap: wrap; row-gap: 4px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.slash li:not(:last-child)::after { content: "/"; margin-inline: 8px; font-weight: 700; }
.ft__brand { border-top: 1px solid var(--c-line); padding-top: 28px; }
.ft__logo img { height: 56px; width: auto; }
.ft__tagline { margin-top: 10px; font-size: var(--fs-meta); color: var(--c-sub); }
.ft__brand .follow { margin-top: 12px; }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 28px; padding-block: 24px 32px; border-top: 1px solid var(--c-line); }
.ft__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 13px; }
.ft__links a { display: flex; align-items: center; min-height: var(--tap); }
.ft__copy { font-size: var(--fs-meta); color: var(--c-sub); align-self: center; }
@media (min-width: 1024px) {
  .ft { padding-top: 48px; }
  .ft__in { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .ft__row { grid-template-columns: 100px minmax(0, 1fr); gap: 0; }
  .ft__brand { border-top: 0; padding-top: 0; text-align: right; }
  .ft__logo { display: inline-block; }
  .ft__brand .follow { justify-content: flex-end; }
  .ft__links { display: flex; flex-wrap: wrap; gap: 0 26px; }
}

/* ---------- 一覧（c-heading → チップ → リード → 横組み1列 → ページ送り） ---------- */
.cheading { padding-top: 28px; border-bottom: 1px solid var(--c-line); margin-bottom: 20px; }
.cheading__row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.cheading__title { font-size: var(--fs-h1); line-height: 1.4; font-weight: 700; min-width: 0; }
.cheading__title--red { color: var(--c-accent-text); }
.cheading__en { display: block; margin-bottom: 4px; font-family: var(--ff-en); font-size: 13px; color: var(--c-sub); }
.cheading__total { padding-block: 12px 14px; text-align: right; font-size: var(--fs-meta); color: var(--c-sub); }
.cheading__page { margin-left: 4px; }
.chip.is-on { background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-ink); }
.list-lead { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--c-sub); }
.list { margin-top: 8px; }
.lrow { padding-block: 24px; border-bottom: 1px solid var(--c-line); }
.lrow__img { display: block; }
.lrow__body { padding-top: 14px; }
.lrow__title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 700; }
.lrow .byline + .date { margin-top: 10px; }
.insert { margin-block: 8px 0; padding-bottom: 32px; border-bottom: 1px solid var(--c-line); }
.insert .neighbors, .insert .feature, .insert .band { margin-top: 32px; }
@media (min-width: 768px) {
  .lrow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 28px; padding-block: 20px; }
  .lrow__body { padding-top: 0; display: flex; flex-direction: column; }
  .lrow .meta { margin-top: auto; padding-top: 14px; }
  .lrow__title { font-size: 20px; line-height: 1.45; }
}
@media (min-width: 1024px) {
  .cheading { padding-top: 40px; }
  .lrow__title { font-size: 22px; }
}
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-bottom: 16px; }
.pager__n {
  display: grid; place-items: center; min-width: var(--tap); height: var(--tap);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-family: var(--ff-en); font-weight: 700; font-size: 14px;
}
.pager__n.is-on { border-color: var(--c-ink); }
.pager__prev .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.pager__next { display: inline-flex; gap: 2px; padding: 0 12px 0 16px; font-family: var(--ff-ja); font-weight: 700; font-size: 13px; }
.pager__next .icon { width: 16px; height: 16px; }
.search-result { margin-top: 8px; }
.search-result__head { padding-block: 16px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--c-line); }
.search-result__head:focus { outline: none; } /* スクリプトで移したフォーカス（tabindex=-1）だけ。キーボードでは届かない */
.search-result__none { padding-block: 24px 8px; font-size: 14px; line-height: 1.8; }
.search-result__none .sp__links { margin-top: 20px; }
.search-result__none .pill { width: auto; padding-inline: 44px 24px; white-space: nowrap; }

/* ---------- 記事詳細（冒頭写真 → ラベル → h1 → 日付 → クレジット帯 → 共有＋本文590） ---------- */
/* 10-27 Tommy指示：HTML はパンくず → 見出し → クレジット → 写真の順（h1 を写真より前に）。1023px 以下は今どおり写真を先に見せる */
@media (max-width: 1023px) {
  .art__top { display: flex; flex-direction: column; }
  .art__top > .crumbs { order: -2; }
  .art__top > .art__photo { order: -1; }
}
.art__photo { width: 100%; margin-inline: auto; } /* 10-30 Tommy指示：本文の写真と同じ幅・同じ見え方（SP も左右の余白の内側。前は画面いっぱい） */
.art__photo .ph { aspect-ratio: auto; } /* 本文の写真（.art-fig）と同じく元の縦横比のまま。切り抜かない */
.art__photo .ph img { height: auto; }
.art__photo--tall { max-width: 420px; } /* 縦長は本文の .art-fig--tall と同じ */
.art__head { padding-top: 20px; }
.art__title { font-size: var(--fs-h1); line-height: 1.4; font-weight: 700; }
.art__date { margin-top: 14px; font-size: var(--fs-meta); color: var(--c-sub); font-family: var(--ff-en); }
.credit { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 20px; padding-block: 16px; border-block: 1px solid var(--c-line); }
.credit__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.credit__icon { width: 50px; height: 50px; flex: none; border-radius: 50%; border: 1px solid var(--c-line); }
.credit__icon--blank { display: grid; place-items: center; background: var(--c-surface); color: var(--c-icon); border-color: var(--c-surface); }
.credit__role { display: block; font-size: 11px; color: var(--c-sub); }
.credit__name { display: block; font-size: 13px; font-weight: 700; }
.art__share { margin-top: 16px; }
.share { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.share__btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); background: none; border: 0; padding: 0; cursor: pointer; color: var(--c-ink); }
.share__btn .icon { width: 26px; height: 26px; }
.share__done { min-height: 1em; font-size: var(--fs-meta); color: var(--c-sub); }
.art__body { margin-top: 12px; min-width: 0; }
@media (min-width: 768px) {
  .art__photo:not(.art__photo--tall) { max-width: 590px; }
  .art__body { max-width: 590px; margin-inline: auto; }
}
/* 10-17 PC の本文幅3案（比較＝screenshots/2026-10-17/article_width_3options.png）。切り替えは config.mjs の ARTICLE_WIDTH 1か所（<html data-artw="N"> になる）。
   値はこの3行だけ。1024px 以上にだけ効く（768〜1023 は 590 のまま、SP は変えない）
     案1 現状   本文590（18px で1行33字）・写真も590。左に共有ボタンの列（sticky）
     案2 広げる 本文648（18px×36字。約物を詰める palt 込みの実測で1行 中央39字・9割が40字以内）・写真も648。共有ボタンの列は左に残す。
              10-17 根拠（JLREQ 2.4.2 横組は最大40字くらい／デジタル庁DADS 全角40字程度／WCAG 1.4.8 CJK40字）から既定にした。根拠＝docs/本文の行長_根拠.md。
              画面幅では伸ばさない（CINRA は 1920 で55字まで伸びて上限を超える）。720 は palt 込みで7割の行が40字を超えるので採らない
     案3 はみ出し 本文720・写真だけ840（左右に60ずつはみ出す＝本文840の列いっぱい）。共有ボタンは本文の上に横並び（写真と重なるので sticky の縦列はやめる）
   --art-w＝本文（文字）の幅、--art-fig-out＝写真が文字の列から左右にはみ出す量。.art__body は写真の幅（＝文字の幅＋はみ出し×2）になる */
:root { --art-w: 590px; --art-fig-out: 0px; }
html[data-artw="2"] { --art-w: 648px; }
html[data-artw="3"] { --art-w: 720px; --art-fig-out: 60px; }
@media (min-width: 1024px) {
  .art__photo { margin-top: 32px; }
  .art__head { padding-top: 24px; }
  .art__title { line-height: 1.4; }
  .art__cols { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(0, var(--art-w)); margin-top: 40px; }
  /* シェア列は本文を読み進めても左に付いてくる（sticky。grid の中で align-self: start にして本文の高さぶん追従） */
  .art__share { margin-top: 0; position: sticky; top: 150px; align-self: start; }
  .share { flex-direction: column; align-items: flex-start; }
  .art__body { margin: 0; max-width: none; }
}
/* 1024px 以上：本文を中央に置き、右寄りで左が空くのを防ぐ（10-26 サイドバー廃止で 1200px 以上も同じに） */
@media (min-width: 1024px) {
  .art__cols { grid-template-columns: minmax(60px, 1fr) minmax(0, var(--art-w)) minmax(0, 1fr); }
}
/* 10-26 Tommy指示：記事の外枠をヘッダー・トップ・一覧の端にそろえる。写真は外枠いっぱいで横長（2:1）に切り、
   1画面目にタイトルの1行目が入るよう画面の高さで抑える。共有ボタンは本文の左（前の840列と同じ96px）に付ける */
@media (min-width: 1024px) {
  /* 10-27 Tommy指示：写真はタイトル・クレジットの下へ（HTML の順のまま）。
     10-30 Tommy指示：外枠いっぱい・高さ最大400px の横長切り抜きをやめ、本文の写真の列と同じ幅・同じ左右の位置に（.art__body の写真の幅＝文字の幅＋はみ出し×2） */
  .art__photo:not(.art__photo--tall) { max-width: calc(var(--art-w) + var(--art-fig-out) * 2); }
  .art__share { justify-self: end; width: 96px; }
}
/* 10-26 Tommy指示：記事末の前後の記事・Meet Your Neighbors。768〜1023 は前と同じ本文の列、1024px 以上は外枠いっぱいでトップと同じ3列 */
@media (min-width: 768px) and (max-width: 1023px) {
  .art__end { max-width: 590px; margin-inline: auto; }
}
/* 10-27 Tommy指示：前の記事／次の記事は本文の列（648・中央）と同じ左右の端に。外枠いっぱいだと本文の終わりから左端が段ズレして見えた */
@media (min-width: 1024px) {
  .art__end .pn { max-width: var(--art-w); margin-inline: auto; }
}
@media (min-width: 1024px) {
  .related .sec-title { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--c-ink); } /* トップの Meet Your Neighbors の見出しと同じ */
  .related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .related .mini { display: block; padding-block: 0; border-top: 0; }
  .related .mini__img { margin-bottom: 12px; }
  .related .mini__title { font-size: var(--fs-card); line-height: var(--lh-card); }
}
/* 案3：共有ボタンは本文の上に横並び。.art__body は写真の幅で列の中央、文字の要素だけ --art-w に絞って中央に置く */
@media (min-width: 1024px) {
  html[data-artw="3"] .art__cols { display: block; }
  html[data-artw="3"] .art__share { position: static; width: auto; max-width: var(--art-w); margin: 0 auto 8px; }
  html[data-artw="3"] .share { flex-direction: row; align-items: center; }
  html[data-artw="3"] .art__body { max-width: calc(var(--art-w) + var(--art-fig-out) * 2); margin-inline: auto; }
  html[data-artw="3"] .art__body > :not(.prose),
  html[data-artw="3"] .prose > :not(.art-fig, .art-figs, .wp-block-gallery),
  html[data-artw="3"] .art-figs__item > :not(.art-fig) { max-width: var(--art-w); margin-inline: auto; }
}

/* 本文：SP 16/32・PC 18/36、段落間 22/27 */
/* 本文は行頭禁則を厳しめに（小書きの「っ」「ゃ」や長音「ー」を行頭に置かない）。どこでも折る overflow-wrap: anywhere は禁則より優先されるので本文では使わず、長いURLだけ a で折る */
.prose { font-size: 16px; line-height: 32px; line-break: strict; overflow-wrap: break-word; }
.prose p { margin-bottom: 22px; }
.prose a { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a.art-url { overflow-wrap: normal; word-break: break-all; } /* URLだけのリンク：直後の「）」を行頭に回さない（article.mjs） */
.prose strong { font-weight: 700; }
@media (min-width: 1024px) {
  .prose { font-size: 18px; line-height: 36px; }
  .prose p { margin-bottom: 27px; }
}
/* 本文の箇条書き・引用・表（10-17 Tommy了承）。文字の大きさ・行間は本文のまま、余白は段落と同じ 22/27。色は墨と灰の罫だけ
   WP（5204 の ul・4034 の blockquote）と microCMS のリッチエディタ（li・blockquote・セルの中の p）を同じ見た目にする */
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul > li::marker { color: var(--c-sub); }
.prose li + li { margin-top: 8px; }
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: 8px; }
.prose li > ul, .prose li > ol { margin: 8px 0 0; padding-left: 1.5em; }
.prose li > ul { list-style: circle; }
.prose blockquote { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--c-line); color: var(--c-sub); quotes: none; }
.prose blockquote p { margin-bottom: 12px; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote cite, .prose .art-cite { display: block; margin-top: 4px; font-size: 14px; line-height: 1.7; font-style: normal; }
.art-table { margin: 0 0 22px; overflow-x: auto; overscroll-behavior-x: contain; }
.art-table:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--c-border); font-size: 15px; line-height: 1.75; }
.prose th, .prose td { min-width: 6em; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose th { font-weight: 700; }
.prose thead th, .prose table > tbody:first-child > tr:first-child > th { border-bottom-color: var(--c-border); }
.prose th p, .prose td p { margin: 0; }
.prose th p + p, .prose td p + p { margin-top: 6px; }
.art-table + .art-table__cap { margin: -14px 0 22px; font-size: var(--fs-meta); line-height: 1.7; color: var(--c-sub); }
@media (min-width: 1024px) {
  .prose ul, .prose ol, .prose blockquote, .art-table { margin-bottom: 27px; }
  .prose blockquote { padding-left: 20px; }
  .prose blockquote p { margin-bottom: 14px; }
  .prose blockquote cite, .prose .art-cite { font-size: 15px; }
  .prose table { font-size: 16px; }
  .art-table + .art-table__cap { margin: -19px 0 27px; }
}
.art-h2 { position: relative; margin-top: 56px; margin-bottom: 0; padding-bottom: 36px; font-size: 20px; line-height: 1.4; font-weight: 700; scroll-margin-top: 80px; }
.art-h2 + * { margin-top: 0; }
.art-h2::after {
  content: ""; position: absolute; left: 0; bottom: 16px;
  width: 40px; height: 3px; background: currentColor;
  -webkit-mask: var(--wave) no-repeat left center / 48px 3px;
  mask: var(--wave) no-repeat left center / 48px 3px;
}
@media (min-width: 1024px) {
  .art-h2 { margin-top: 72px; font-size: 28px; line-height: 1.39; scroll-margin-top: 150px; }
  .art-h2::after { width: 50px; }
}
.art-fig { margin: 8px 0 27px; }
.art-fig figcaption { margin-top: 8px; font-size: var(--fs-meta); line-height: 1.7; color: var(--c-sub); text-align: center; } /* 中央そろえ（10-18 運営者の要望。旧サイトも中央） */
/* 10-30 運営者の指摘8「PC だと写真のキャプションが小さすぎる」：本文の文字との釣り合いで、本文より2段小さい大きさに（引用の出典 cite と同じ）。
   768〜1023＝本文16px に 14px、1024px 以上＝本文18px に 15px。スマホ（本文16px・キャプション12px）は今のまま */
@media (min-width: 768px) { .art-fig figcaption { margin-top: 10px; font-size: var(--fs-nav); } }
@media (min-width: 1024px) { .art-fig figcaption { font-size: var(--fs-tab); } }
/* 本文の写真は元の縦横比のまま（一覧の写真のような 3:2 の切り抜きはしない）。縦長の写真は幅を抑える */
.art-fig .ph { aspect-ratio: auto; }
.art-fig .ph img { height: auto; }
.art-fig__link { display: block; } /* 外へのリンク付きの写真（10-29・5390）。フォーカスの枠は .ph の外側に出す（.ph は overflow:hidden） */
.art-fig--tall { max-width: 420px; margin-inline: auto; }
/* WP の段組み（写真を横に並べたもの）：SP は縦に積む */
.art-figs { display: grid; gap: 0 16px; }
@media (min-width: 768px) { .art-figs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.art-figs .art-fig--tall { max-width: none; }
/* 写真と文章を横に並べた段組み（5518）：本文の列が 590px しかないので並べずに縦に積む（写真は本文列いっぱい・縦長は 420px まで） */
.art-figs:has(> .art-figs__item > :not(.art-fig)) { display: block; }
.art-figs:has(> .art-figs__item > :not(.art-fig)) .art-fig--tall { max-width: 420px; }
/* 小見出し（記事の中の2段目。INDEX には載せない） */
.art-h3 { margin: 48px 0 24px; font-size: 18px; line-height: 1.5; font-weight: 700; } /* 上下の空き（10-25 運営者の要望「本文との間をもう少し・見出しが独立する感じに」。旧 40/16） */
@media (min-width: 1024px) { .art-h3 { margin-top: 56px; margin-bottom: 28px; font-size: 21px; } }
.art-h2 + .art-h3 { margin-top: 0; }
/* 見出しの色（10-18 運営者の要望「小見出しの色は今のまま」）：旧サイト hyakuyou.com の実測。h2＝黒 #000（太さ700・線なし）、
   h3＝青 #0870b0（太さ700・左に6pxの青い線）。大きさは新サイトのまま。
   10-25 運営者の要望「旧サイトと同じく左に縦線を」：青の見出しに左の6pxの線を足し、波線はやめて縦線にそろえた（黒の見出しは波線のまま）。
   クラスは元の段（article.mjs）：h3 が最上位の記事（4905・5635 など）は .art-h2 の大きさで青 */
.art-h--wp2 { color: #000; }
.art-h--wp3 { color: #0870b0; padding-left: 14px; border-left: 6px solid currentColor; } /* 白地 5.3:1 */
.art-h2.art-h--wp3 { padding-bottom: 0; margin-bottom: 24px; }
.art-h2.art-h--wp3::after { content: none; }
@media (min-width: 1024px) { .art-h2.art-h--wp3 { margin-bottom: 28px; } }
/* 段落の上の空き＝旧サイトの空行（10-18 運営者の要望。article.mjs の空行の印）。1行＝本文の行の高さ（SP 32・PC 36）。margin は前の段落の下と重なって消えるので padding で取る */
.prose .art-gap1 { padding-top: 32px; }
.prose .art-gap2 { padding-top: 64px; }
.prose .art-gap3 { padding-top: 96px; }
.prose .art-gap4 { padding-top: 128px; }
.prose .art-gap5 { padding-top: 160px; }
@media (min-width: 1024px) {
  .prose .art-gap1 { padding-top: 36px; }
  .prose .art-gap2 { padding-top: 72px; }
  .prose .art-gap3 { padding-top: 108px; }
  .prose .art-gap4 { padding-top: 144px; }
  .prose .art-gap5 { padding-top: 180px; }
}
/* WP の記事カードの埋め込みは、リンク1行にした */
.art-embed { padding: 14px 16px; background: var(--c-surface); }

/* INDEX（罫で挟む・番号付き） */
.toc { margin-block: 8px 16px; padding-block: 22px; border-block: 1px solid var(--c-line); }
.toc__label { font-family: var(--ff-en); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.toc__list { margin: -11px 0 0; padding-left: 1.6em; list-style: decimal; }
.toc__list li { font-size: 14px; line-height: 1.6; line-break: strict; }
.toc__list a { display: block; padding-block: 11px; } /* 1行でも高さ44px（B9）。先頭の上余白は ul の負マージンで相殺 */
.toc__list li::marker { font-weight: 700; }
@media (min-width: 768px) {
  .toc { display: grid; grid-template-columns: 100px minmax(0, 1fr); }
  .toc__label { margin: 0; }
}

/* 記事末：プロフィール・関連・タグ・取材相談・パンくず・新着 */
.profile { margin-top: 48px; background: var(--c-surface); padding: 12px; }
.profile__label { padding: 8px 4px 12px; font-size: 16px; font-weight: 700; }
.profile__box { background: var(--c-bg); padding: 18px 16px; }
.profile__name { font-size: 16px; font-weight: 700; }
.profile__text { margin-top: 10px; font-size: 14px; line-height: 1.9; }
.related { margin-top: 32px; }
.related .sec-title { margin-bottom: 8px; }
.mini { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding-block: 14px; border-top: 1px solid var(--c-line); }
.mini:first-child { border-top: 0; }
.mini__img { display: block; }
.mini__title { font-size: 14px; line-height: 1.5; font-weight: 700; }
.mini .byline { margin-top: 8px; }
@media (min-width: 768px) { .mini { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; } }
.tags { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.consult { margin-top: 32px; padding-block: 36px; border-block: 1px solid var(--c-line); text-align: center; }
.consult__title { font-size: 18px; line-height: 1.5; font-weight: 700; }
.consult__text { margin-block: 10px 22px; font-size: 14px; line-height: 1.8; color: var(--c-sub); }
@media (min-width: 1024px) { .consult__title { font-size: 20px; } }
.crumbs { margin-top: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 0; font-size: var(--fs-meta); color: var(--c-sub); min-width: 0; }
.crumbs li { flex: none; }
.crumbs li:last-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li + li::before { content: "/"; margin-inline: 8px; }
.crumbs a { display: inline-block; padding-block: 12px; }
.crumbs--top { margin-top: 0; margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
/* 前の記事／次の記事 */
.pn { margin-top: 32px; }
.pn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block: 1px solid var(--c-line); }
.pn__item + .pn__item { border-top: 1px solid var(--c-line); }
.pn__item a { display: block; padding-block: 16px; min-height: var(--tap); }
.pn__label { display: block; font-size: var(--fs-meta); color: var(--c-sub); }
.pn__title { display: block; margin-top: 4px; font-size: 15px; line-height: var(--lh-card); font-weight: 700; }
@media (min-width: 768px) {
  .pn ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn__item + .pn__item { border-top: 0; border-left: 1px solid var(--c-line); }
  .pn__item--next { text-align: right; }
  .pn__item a { padding-inline: 0 20px; }
  .pn__item--next a { padding-inline: 20px 0; }
  .pn__item--next:only-child { grid-column: 2; border-left: 0; }
}
.more-series { margin-top: 48px; }
.more-series__title { margin-bottom: 18px; font-size: 20px; font-weight: 700; }
@media (min-width: 1024px) { .more-series__title { font-size: 22px; } }

/* ---------- 固定ページ（コンセプト・取材相談・ポリシー・404） ---------- */
/* 10-18 Tommy「幅ずれ」：見出し・罫線・本文・運営者欄・フォームを1本の列にそろえる。列の幅は記事の本文と同じ
   （SP＝画面いっぱい／768〜1023＝590・16px／1024〜＝--art-w＝648・18px）で、画面の中央に置く。画面幅では伸ばさない。
   前は concept・policy・404 の見出しが画面いっぱい（layout--noside）、contact は840、本文は640 の左寄せと、ページごとに列がばらばらだった */
.sp { margin-inline: auto; }
@media (min-width: 768px) { .sp { max-width: 590px; } }
@media (min-width: 1024px) { .sp { max-width: var(--art-w); } }
.sp__head { padding-top: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.sp__en { font-family: var(--ff-en); font-weight: 700; font-size: 13px; color: var(--c-sub); margin-bottom: 4px; }
.sp__title { font-size: var(--fs-h1); line-height: 1.4; font-weight: 700; }
.sp__body { margin-top: 8px; }
.sp__body > .art-h2:first-child { margin-top: 32px; }
.sp__sign { margin-top: 24px; text-align: right; font-size: 14px; line-height: 1.9; }
.sp__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.sp__links .pill { margin: 0; }
.prose--en { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--c-line); font-size: 15px; line-height: 1.9; }
.prose--en p { margin-bottom: 18px; }
@media (min-width: 1024px) { .prose--en { font-size: 16px; } } /* 648の列で1行約80字（WCAG 1.4.8 の80字以内） */
/* ポリシーも本文と同じ 16/32・PC 18/36（15px のままだと648の列で1行46字になり、40字の上限を超える） */
.policy__h { margin: 36px 0 12px; font-size: 18px; line-height: 1.5; font-weight: 700; }
@media (min-width: 1024px) { .policy__h { font-size: 20px; } }
.policy__ol { margin: 0 0 20px; padding-left: 1.6em; }
.policy__ol li { margin-bottom: 10px; }
.ph--tbc { display: grid; place-items: center; color: var(--c-sub); font-size: 13px; }
.tbc-note { font-size: 13px; color: var(--c-sub); }
/* 運営者に見せる仮置き：灰面＋左の墨罫＋ラベルで「仮」と分かるようにする */
.tbc { margin-top: 24px; padding: 20px; background: var(--c-surface); border-left: 3px solid var(--c-ink); font-size: 15px; line-height: 1.9; }
.tbc > * + * { margin-top: 8px; }
.tbc__label { font-size: var(--fs-meta); font-weight: 700; }
.tbc__sign { text-align: right; font-size: 14px; }
.ph--tbc { background: var(--c-surface); }
@media (min-width: 1024px) { .sp__head { padding-top: 40px; } .sp__body { margin-top: 16px; } }

.opinfo { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.opinfo__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.opinfo--lead { margin-top: 24px; padding-top: 16px; }
/* 相談の送り先（10-29：公開時はフォームの代わりにメールアドレスを載せる）。アドレスは1回のタップで全体を選べるようにする */
.mailto__addr { font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.mailto__open { margin-top: 4px; font-size: 14px; }
.mailto__open a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-link); text-decoration: underline; }
.mailto__note { margin-top: 16px; font-size: 14px; }
.mailto__items { margin: 8px 0 0; padding-left: 1.5em; list-style: disc; font-size: 14px; line-height: 1.8; }
.mailto__items li + li { margin-top: 4px; }
.opinfo__list div { display: grid; grid-template-columns: 72px minmax(0, 1fr); padding-block: 8px; font-size: 14px; }
.opinfo__list dt { color: var(--c-sub); }
.opinfo__list dd { margin: 0; }
.opinfo__list a { color: var(--c-link); text-decoration: underline; }

/* ---------- 人気記事ランキング（E3〜E5）：白地・1px罫で区切る・写真3:2角丸0・順位は DM Sans 700 の墨数字。色と書体はトークンだけ ---------- */
.rank__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.rank__item { border-bottom: 1px solid var(--c-line); }
.rank__link { display: grid; grid-template-columns: 28px 96px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: var(--tap); padding-block: 14px; }
.rank__no { font-family: var(--ff-en); font-weight: 700; font-size: 28px; line-height: 1; text-align: center; color: var(--c-ink); }
.rank__title { font-size: 14px; line-height: 1.5; font-weight: 700; }
.rank__note { margin-top: 10px; font-size: var(--fs-meta); line-height: 1.5; color: var(--c-sub); }
/* 記事末：10-26 Tommy指示でサイドバーを外したので、全幅で表示 */
.rank--end { margin-top: 48px; }
/* 10-27 Tommy指示：1024px 以上は外枠いっぱいの1行並びだとタイトルが横に伸びて読みにくい。Meet Your Neighbors と同じ縦型カードの5列にし、
   順位は写真の左上に白地の数字（人気記事ページの .rankno と同じ形）。1023px 以下は今の縦の一覧のまま */
@media (min-width: 1024px) {
  .rank--end .sec-title { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--c-ink); }
  .rank--end .rank__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; border-top: 0; }
  .rank--end .rank__item { border-bottom: 0; }
  .rank--end .rank__link { display: block; position: relative; padding-block: 0; }
  .rank--end .rank__no {
    position: absolute; left: 0; top: 0; z-index: 1;
    display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 8px;
    background: var(--c-bg); font-size: 20px;
  }
  .rank--end .rank__title { display: block; margin-top: 12px; font-size: var(--fs-card); line-height: var(--lh-card); }
  .rank--end .rank__more { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Instagram 帯（G1・Movie の置き換え。外へ見に行くだけ。灰面＋アイコン＋1行＋ボタン） ---------- */
.igband { margin-top: 64px; }
.igband__head { display: flex; align-items: center; gap: 14px; }
.igband__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; }
.igband__icon .icon { width: 40px; height: 40px; }
.igband__text { min-width: 0; }
.igband__title { font-family: var(--ff-en); font-size: var(--fs-section-en); line-height: 1.2; font-weight: 700; }
.igband__lead { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--c-sub); }
.igband__btn { margin: 24px auto 0; background: var(--c-bg); }
@media (min-width: 768px) {
  .igband { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .igband__btn { flex: none; width: auto; margin: 0; padding-inline: 44px 28px; }
}
@media (min-width: 1024px) { .igband { margin-top: 88px; } }

/* ---------- 人気記事の順位（G2・G3）：写真の左上に白地の数字。読み上げはタイトル頭の「N位」 ---------- */
.hero__img, .card__img, .lrow__img { position: relative; }
.rankno {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 8px;
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--ff-en); font-size: 20px; line-height: 1; font-weight: 700;
}
.hero .rankno { min-width: 52px; height: 52px; font-size: 28px; }
.rank__more { display: flex; justify-content: flex-end; margin-top: 4px; }
.rank__more .sblock__more { margin-top: 0; }
/* トップの「テーマから探す」：チップ1行（G4・テーマ別5ブロックの置き換え） */
.topics .chips { margin-top: 0; }
/* 人気記事ページ（G3）：一覧の横組み1列を <ol> で並べる */
.ranklist { list-style: none; margin-block: 8px 0; padding: 0; }
.ranklist + .rank__note { margin-block: 16px 40px; }
/* 10-27 Tommy指示：1024px 以上は記事末のランキングと同じ縦型カード（5列×4段）。順位は写真の左上の白地の数字（.rankno） */
@media (min-width: 1024px) {
  .ranklist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 20px; margin-top: 16px; }
  .ranklist .lrow { display: block; padding-block: 0; border-bottom: 0; }
  .ranklist .lrow__body { display: block; padding-top: 12px; }
  .ranklist .lrow__title { font-size: var(--fs-card); line-height: var(--lh-card); }
  .ranklist .lrow .meta { margin-top: 0; padding-top: 10px; }
}