@charset "UTF-8";
/* ==========================================================================
   i-MAKER 研究室（/blog/）新記事テンプレート専用スタイル
   wp-revamp.css  —  single-revamp.php / header-revamp.php / footer-revamp.php
   元: wp-blog-revamp_202609/prototype/proto.css（記事 round 3・TOP round 5）
   作成: 2026-09-05
   このファイルだけを読む（wp-top.css / wp-article.css は読み込まない）。
   TOP 用の部品（.sec / .card / .row / .promo / .cats など）は将来の TOP 実装用に残してある。
   方向性: quiet, document-like（静かで資料的）
   アクセントは 1 色（ブランドのティール）。背景は白と極薄グレーのみ。
   round 2: 装飾を削り、フォントサイズを 6 段階・角丸を 2 トークンに集約。
   round 3: 「塗りは 1 ページに 1 種類、主行動が持つ」。
     ティールの塗り（--accent 背景）は主購入ボタンだけ。
     それ以外のボタンは outline かテキストリンク。
     見出しバッジ・ボックス・カテゴリピル・目次の現在章はネイビー／グレーへ。
   ========================================================================== */

/* --------------------------------------------------------------
   1. デザイントークン
   本番テーマ wp-top.css / wp-article.css の実測値をもとに調整
   （--navy:#1a2744 / --teal:#09b6ca / --tx:#1a1a1a / --brd:#e2e6ee）
   -------------------------------------------------------------- */
:root {
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", Meiryo, sans-serif;
  --font-num: "Inter", var(--font);

  --navy: #1a2744;          /* 見出し */
  --ink: #1a1a1a;           /* 本文 */
  --ink2: #4a5568;          /* 補助テキスト */
  --ink3: #5f6b7c;          /* メタ・日付（白地 5.5:1。#7d8798 は 3.59:1 で AA 未満だった・2026-09-17） */
  --line: #e2e6ee;          /* 罫線 */
  --line2: #eef0f4;         /* 薄い罫線・プレースホルダ地色 */
  --bg: #fff;
  --bg2: #f7f9fb;           /* テーブルのゼブラ・カード地 */
  --dk: #0f1419;            /* フッタ */

  --accent: #0a7d8a;        /* リンク・CTA・罫（ブランドティールを暗く） */
  --accent-strong: #075f69;
  --accent-bright: #09b6ca; /* 読了プログレスバー専用 */

  /* 角丸は 2 トークンのみ（＋ pill と 50% を意味のある場所だけで使う） */
  --r: 8px;                 /* 小: バッジ・ボックス・表・図版 */
  --rl: 12px;               /* 大: カード・CTA・アイキャッチ */
  --pill: 100px;

  /* タイプスケール（6 段）— 見出しは別途 clamp 変数 */
  --fs-1: 11px;             /* ラベル・キャプション最小 */
  --fs-2: 12px;             /* メタ・注記・カード補助 */
  --fs-3: 13px;             /* 小さめ UI・小ボタン */
  --fs-4: 14px;             /* 表・ボタン・カード本文 */
  --fs-5: 15px;             /* サイト標準テキスト */
  --fs-6: 17.5px;           /* リード・CTA見出し・価格 */
  --fs-h1: clamp(24px, 4.2vw, 33px);
  --fs-h2: clamp(20px, 2.6vw, 24px);
  --fs-h3: clamp(17px, 2.1vw, 19px);

  --hdr-h: 56px;
  --sticky-h: 72px;   /* ヘッダー実高 + 余白（アンカー位置の補正に使う） */

  --body-fs: 17px;
  --body-lh: 1.9;
  --gap: 2.2em;
}

/* --------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-5);
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
h1, h2, h3, p, ul, ol, dl, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; }
table { border-collapse: collapse; }

.l-shell { width: 100%; max-width: 1284px; margin: 0 auto; padding: 0 20px; }
.u-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* スキップリンク（インライン style を使わずクラスで出す） */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px;
  font-size: var(--fs-3); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 20px; color: #fff; }

/* --------------------------------------------------------------
   3. ヘッダー
   -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  max-width: 1284px; margin: 0 auto; padding: 0 20px;
  height: var(--hdr-h); display: flex; align-items: center; gap: 20px;
}
.hdr__brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; }
.hdr__brand img { height: 18px; width: auto; }
.hdr__nav { flex: 1; min-width: 0; }
.hdr__nav ul { display: flex; gap: 2px; list-style: none; flex-wrap: nowrap; }
.hdr__nav a {
  display: block; padding: 6px 12px; font-size: var(--fs-3); font-weight: 700;
  white-space: nowrap; color: var(--ink2); text-decoration: none; border-radius: var(--r);
}
@media (max-width: 1279px) { .hdr__nav a { padding: 6px 8px; font-size: var(--fs-2); } }
.hdr__nav a:hover { background: var(--bg2); color: var(--navy); }
.hdr__r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr__search { display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--pill); }
.hdr__search input {
  border: 0; outline: 0; background: transparent; padding: 6px 4px 6px 14px;
  font: inherit; font-size: var(--fs-3); width: 118px; color: var(--ink);
}
.hdr__search button { background: transparent; border: 0; padding: 6px 12px 6px 6px; cursor: pointer; color: var(--ink3); line-height: 0; }
.hdr__btn {
  padding: 7px 15px; font-size: var(--fs-2); font-weight: 700; border-radius: var(--pill);
  text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
}
/* 塗りはページの主行動（購入ボタン）だけが持つ。ヘッダーは 2 つとも枠線のみ */
/* round 5: 3DMedSupo は紺の枠線、消耗品ストアはテキストリンク（自社製品を一段上に。クラス名は据え置き） */
.hdr__btn--fill { background: #fff; color: var(--navy); border-color: var(--navy); }
.hdr__btn--fill:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.hdr__btn--line { color: var(--ink2); border-color: transparent; padding-left: 6px; padding-right: 6px; }
.hdr__btn--line:hover { color: var(--navy); text-decoration: underline; background: transparent; }
.hdr__navstrip { display: none; }

@media (max-width: 1023px) {
  :root { --sticky-h: 112px; }   /* ヘッダー56px + テーマ横スクロール帯 + 余白 */
  .hdr__in { gap: 12px; }
  .hdr__nav, .hdr__search, .hdr__btn--line { display: none; }
  .hdr__navstrip {
    display: block; border-bottom: 1px solid var(--line);
    background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .hdr__navstrip ul { display: flex; gap: 4px; list-style: none; padding: 8px 16px; width: max-content; }
  .hdr__navstrip a {
    display: block; padding: 5px 13px; font-size: var(--fs-2); font-weight: 700;
    color: var(--ink2); text-decoration: none; border: 1px solid var(--line); border-radius: var(--pill);
  }
}

/* --------------------------------------------------------------
   4. パンくず
   -------------------------------------------------------------- */
.crumbs { font-size: var(--fs-2); color: var(--ink3); padding: 18px 0 16px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink3); }

/* --------------------------------------------------------------
   5. 記事レイアウト（3カラム → 2カラム → 1カラム）
   -------------------------------------------------------------- */
.l-article {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  padding-bottom: 72px;
}
.l-toc { position: sticky; top: var(--sticky-h); max-height: calc(100vh - var(--sticky-h) - 16px); overflow-y: auto; scrollbar-width: thin; }
/* 右レール本体はスクロールさせない。中の 1 グループだけを sticky にする。
   （sticky の可動域を作るため、レール自体は行の高さいっぱいに伸ばす） */
.l-rail { position: static; align-self: stretch; }
.rail__grp { position: sticky; top: var(--sticky-h); }
/* 2026-09-16: レールが画面より長いとき（製品カード＋関連製品ページ）は下が切れるので、レール内でスクロールできるようにする */
.rail__grp { max-height: calc(100vh - var(--sticky-h) - 16px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 2px; }
.l-main { min-width: 0; }

/* 本文カラムを 680px に固定し、余りを左右の溝に配る（.wide の逃げ幅を作る） */
@media (min-width: 1280px) {
  .l-article {
    grid-template-columns: 200px minmax(0, 680px) 300px;
    justify-content: space-between;
    margin-left: -20px; margin-right: -20px;   /* .l-shell の左右パディングを相殺 */
  }
}

@media (max-width: 1279px) {
  .l-article { grid-template-columns: minmax(0, 1fr) 300px; }
  .l-toc { display: none; }
}
@media (max-width: 1023px) {
  .l-article { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 96px; }
  .l-rail { display: none; }
}

/* 製品が無い記事（imaker_product_id 未設定）＝ 右レール無しの 2 カラム。本文を中央に置く */
.l-article--norail { grid-template-columns: 200px minmax(0, 1fr); }
@media (min-width: 1280px) {
  /* 本文は 680px のまま（.wide の逃げ幅 40px を左右に残す） */
  .l-article--norail {
    grid-template-columns: 200px minmax(0, 680px);
    justify-content: center; column-gap: 96px;
    margin-left: 0; margin-right: 0;
  }
}
@media (max-width: 1279px) {
  .l-article--norail { grid-template-columns: minmax(0, 1fr); }
}

/* 見出しが無く目次を出せない記事＝左カラムを持たない */
.l-article--notoc { grid-template-columns: minmax(0, 1fr) 300px; }
.l-article--notoc.l-article--norail { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1280px) {
  .l-article--notoc { grid-template-columns: minmax(0, 680px) 300px; justify-content: center; margin-left: 0; margin-right: 0; }
  .l-article--notoc.l-article--norail { grid-template-columns: minmax(0, 680px); }
}

/* 本文カラムが 680px 前後になる 1280px 以上では 18px（1行 約38〜40字） */
@media (min-width: 1280px) { :root { --body-fs: 18px; } }

/* --------------------------------------------------------------
   6. 左サイド 目次（PC ≥1280px）
   -------------------------------------------------------------- */
.toc__hd {
  font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; color: var(--ink3);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.toc__list { list-style: none; }
.toc__list li { margin: 0; }
.toc__list a {
  display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start;
  padding: 6px 0; font-size: var(--fs-2); line-height: 1.55; color: var(--ink2);
  text-decoration: none; border-left: 2px solid transparent; padding-left: 8px;
}
.toc__list a:hover { color: var(--navy); }
.toc__list a > .toc__n {
  font-family: var(--font-num); font-size: var(--fs-1); font-weight: 700;
  color: var(--ink3); letter-spacing: .04em; padding-top: 1px;
}
.toc__list a.is-current { color: var(--navy); font-weight: 700; border-left-color: var(--navy); }
.toc__list a.is-current > .toc__n { color: var(--navy); }
/* H3 を含む目次（imaker_toc_depth = h2h3）のときだけ現れる */
.toc__list .toc__i--h3 > a { padding-left: 20px; }
.toc__list .toc__i--h3 > a > span:last-child { color: var(--ink3); }

.toc__prog { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.toc__prog-track { height: 3px; background: var(--line2); border-radius: var(--pill); overflow: hidden; }
.toc__prog-bar {
  height: 100%; width: 100%; background: var(--accent-bright); border-radius: var(--pill);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%;
  transition: transform .15s linear;
}
.toc__prog-txt { font-size: var(--fs-1); color: var(--ink3); margin-top: 6px; font-family: var(--font-num); }

/* SP/タブレット用の固定プログレス（画面最上部） */
.prog-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: transparent; display: none; }
.prog-top span {
  display: block; height: 100%; background: var(--accent-bright);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%;
}
@media (max-width: 1279px) { .prog-top { display: block; } }

/* --------------------------------------------------------------
   7. 記事ヘッダー
   -------------------------------------------------------------- */
.art__cat {
  display: inline-block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em;
  color: var(--navy); background: var(--line2);
  padding: 4px 12px; border-radius: var(--pill); text-decoration: none;
}
.art__cat:hover { background: var(--line); color: var(--navy); }
.art__ttl {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.45;
  letter-spacing: .005em; color: var(--navy); margin: 14px 0 0;
}
.art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-2); color: var(--ink3);
}
.art__meta b { color: var(--ink2); font-weight: 700; }
.art__meta b a { color: var(--ink2); text-decoration: none; }
.art__meta b a:hover { color: var(--navy); text-decoration: underline; }
.art__author-top { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
.art__author-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--line2);
  flex-shrink: 0; border: 1px solid var(--line);
}
.art__reviewer { color: var(--ink3); }
.art__reviewer b { color: var(--ink2); font-weight: 700; }
.art__eye { margin: 22px 0 0; }
.art__eye img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rl); }

/* 記事末：カテゴリ・タグのアーカイブへ戻るリンク行（T-31。ピルは .art__cat と同じ見た目） */
.art__terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.art__terms .art__cat--tag { background: #fff; border: 1px solid var(--line); color: var(--ink2); }
.art__terms .art__cat--tag:hover { background: var(--line2); color: var(--navy); }

/* --------------------------------------------------------------
   8. 本文タイポグラフィ
   -------------------------------------------------------------- */
.art__body { font-size: var(--body-fs); line-height: var(--body-lh); color: var(--ink); }
.art__body > * + * { margin-top: var(--gap); }
.art__body p { text-align: left; word-break: normal; overflow-wrap: break-word; line-break: strict; }
.art__body strong { font-weight: 700; color: var(--navy); }
/* 本文リンクはネイビー＋下線（ティールの文字は使わない） */
.art__body a:not(.btn) {
  color: var(--navy); text-decoration-line: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.art__body a:not(.btn):hover { color: var(--navy); text-decoration-thickness: 2px; }

.art__lead { font-size: var(--fs-6); font-weight: 700; color: var(--navy); line-height: 1.85; }

/* 本文中の素のリンク行（カードにしない CTA） */
.body-links { color: var(--ink2); }
.body-links a { font-weight: 700; }
.body-links .sep { color: var(--ink3); margin: 0 .5em; }

/* 章見出し H2 —— 番号バッジ＋下罫 */
.art__body h2 {
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.5;
  color: var(--navy); letter-spacing: .01em;
  margin-top: 2.6em; padding: 0 0 12px 0;
  border-bottom: 2px solid var(--navy);
  scroll-margin-top: var(--sticky-h);
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline;
}
.art__body h2 .ch {
  font-family: var(--font-num); font-size: var(--fs-2); font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--navy); border-radius: var(--r);
  padding: 3px 8px; align-self: start; position: relative; top: 2px;
}
.art__body h3 {
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.6;
  color: var(--navy); margin-top: 2.1em; padding-left: 12px;
  border-left: 4px solid var(--navy);
  scroll-margin-top: var(--sticky-h);
}
.art__body ul, .art__body ol { padding-left: 1.35em; }
.art__body li { margin-top: .5em; }
.art__body ul { list-style: disc; }
.art__body ol { list-style: decimal; }

/* --------------------------------------------------------------
   9. ボックス類（統一 1 スタイル）
   -------------------------------------------------------------- */
.box {
  border: 1px solid var(--line); border-left: 4px solid var(--navy);
  border-radius: var(--r); background: var(--bg2); padding: 20px 22px;
}
.box__hd {
  font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; color: var(--navy);
  margin-bottom: 10px;
}
.box p + p { margin-top: .9em; }
.box .box__hd + p, .box .box__hd + ul { margin-top: 0; }
.box ul { padding-left: 1.25em; list-style: disc; }
.box li + li { margin-top: .55em; }
.box--quiet { border-left-color: var(--ink3); }
.box--sum { border-left-color: var(--navy); }
.box__hd--sum { color: var(--navy); }
.box--warn { border-left-color: #a16207; }
.box__hd--warn { color: #a16207; }

/* --------------------------------------------------------------
   10. 目次（本文内 details） — タブレット/SP
   -------------------------------------------------------------- */
.toc-inline { border: 1px solid var(--line); border-radius: var(--rl); background: #fff; }
@media (min-width: 1280px) { .toc-inline { display: none; } }
.toc-inline > summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-size: var(--fs-3); font-weight: 700; letter-spacing: .06em; color: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
}
.toc-inline > summary::-webkit-details-marker { display: none; }
.toc-inline > summary::after { content: "▾"; color: var(--ink3); font-size: var(--fs-2); }
.toc-inline[open] > summary { border-bottom: 1px solid var(--line); }
.toc-inline[open] > summary::after { content: "▴"; }
.toc-inline ol { list-style: none; padding: 8px 18px 16px; }
.toc-inline li { margin: 0; }
.toc-inline a {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px;
  padding: 7px 0; font-size: var(--fs-4); line-height: 1.6; color: var(--ink2); text-decoration: none;
}
.toc-inline a .toc__n { font-family: var(--font-num); font-size: var(--fs-2); font-weight: 700; color: var(--ink3); }

/* --------------------------------------------------------------
   11. 図版
   -------------------------------------------------------------- */
.fig { margin: 0; }
/* 2026-09-16: 元の寸法より大きく引き伸ばさない（600px 幅の写真を段幅まで拡大すると間延びする）。
   横長の写真は段幅まで、縦長（fig--portrait）は高さで抑える。小さな造形サンプル（fig--sm）は右に回り込ませる */
.fig img {
  display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: var(--r); background: var(--line2);
}
/* 12-B-4 の .art__body figure { max-width: 100% } より強くするため .art__body を付ける */
.art__body .fig--portrait img { max-height: 520px; }
.art__body .fig--sm { max-width: 240px; float: right; margin: 4px 0 12px 20px; }
.art__body .fig--sm img { border: 1px solid var(--line2); }
.art__body .fig--sm figcaption { margin-top: 6px; }
.art__body .fig--sm ~ h2, .art__body .fig--sm ~ h3, .art__body .fig--sm ~ .box,
.art__body .fig--sm ~ .tbl-wrap, .art__body .fig--sm ~ table { clear: both; }
/* 小さな図版が 2 枚以上続くときは回り込ませず 2 列に並べる（本文が細く潰れるのを防ぐ） */
.art__body .fig-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.art__body .fig-row .fig--sm { float: none; max-width: none; margin: 0; }
.art__body .fig-row .fig--sm img { max-height: 260px; }
@media (max-width: 767px) {
  .art__body .fig--portrait img { max-height: 420px; }
  .art__body .fig--sm { float: none; max-width: 200px; margin: 0 auto 12px; }
  .art__body .fig-row .fig--sm { max-width: none; margin: 0; }
}
.fig--ph img { border: 1px dashed #ccd3de; }
.fig figcaption {
  font-size: var(--fs-2); line-height: 1.75; color: var(--ink3); margin-top: 8px;
}
.fig--ph figcaption::before {
  content: "画像プレースホルダ / "; font-weight: 700; color: #b3bbc9;
}
/* --------------------------------------------------------------
   11-B. 概要図の部品（2026-09-16・Itsuro「1 記事 1 概要図」）
   入稿ツールが「図: 段階 | …」「図: 一覧 | …」の直後の GFM 表から生成する。
   画像ではなく HTML なので AI・検索が文字を読め、スマホで崩れない。
   -------------------------------------------------------------- */
.fig-steps, .fig-tiles { margin: 0; }
.fig-steps > figcaption, .fig-tiles > figcaption {
  font-size: var(--fs-5); font-weight: 700; color: var(--navy); margin-bottom: 12px;
}
/* 段階図: 横並びのカード。左から右へ段が上がる */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line2); border-radius: var(--r);
  padding: 14px 14px 12px; margin: 0; border-top: 4px solid #09b6ca; }
.step:nth-child(2) { border-top-color: #2b8fd6; }
.step:nth-child(3) { border-top-color: #4d5fd6; }
.step:nth-child(4) { border-top-color: var(--navy); }
.step__no { font-size: var(--fs-2); font-weight: 700; color: var(--ink3); letter-spacing: .08em; margin: 0; }
.step__no::before { content: "STEP "; }
.step__hd { font-size: var(--fs-5); font-weight: 700; color: var(--navy); margin: 2px 0 8px; line-height: 1.4; }
.step__dl, .tile__dl { margin: 0; font-size: var(--fs-4); line-height: 1.6; }
.step__dl dt, .tile__dl dt { font-weight: 700; color: var(--ink3); font-size: var(--fs-2); margin-top: 8px; }
.step__dl dd, .tile__dl dd { margin: 0; color: var(--ink); }
/* 一覧: 名前のカード格子（種類マップ） */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tile { background: #fff; border: 1px solid var(--line2); border-radius: var(--r); padding: 12px 14px; margin: 0; }
.tile__hd { font-size: var(--fs-5); font-weight: 700; color: var(--navy); margin: 0 0 4px; line-height: 1.4; }
.tile__link { margin: 10px 0 0; font-size: var(--fs-3); }
.tile__link a { font-weight: 700; }
/* ◎○△×－不明 のバッジ */
.mk { display: inline-block; min-width: 1.6em; padding: 0 .35em; border-radius: 999px; text-align: center;
  font-weight: 700; line-height: 1.6; font-size: var(--fs-4); }
.mk--3 { background: #e3f6ef; color: #0f7a5c; }
.mk--2 { background: #e6f0fb; color: #1f5fa8; }
.mk--1 { background: #fff1dc; color: #a35a00; }
.mk--0 { background: #f0f1f4; color: #6b7280; }
.mk--na { background: #f0f1f4; color: #6b7280; }
/* .art__body ol/ul/li の既定（decimal・padding-left・li margin）より強くする */
.art__body .steps, .art__body .tiles { list-style: none; padding-left: 0; }
.art__body .step, .art__body .tile { margin-top: 0; }
.art__body .step__dl dd, .art__body .tile__dl dd { margin-top: 0; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .steps { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 画像未受領のプレースホルダは公開面に出さない（D-04 d）。
   本文フィルタでも DOM から除いているが、保険として CSS でも隠す */
.fig--pending { display: none; }

/* --------------------------------------------------------------
   12. 表
   -------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); }
.tbl-wrap table { width: 100%; min-width: 520px; font-size: var(--fs-4); line-height: 1.75; }
.tbl-wrap caption {
  caption-side: top; text-align: left; font-size: var(--fs-2); font-weight: 700;
  color: var(--ink2); padding: 12px 14px; background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.tbl-wrap th, .tbl-wrap td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl-wrap thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: var(--fs-3); white-space: nowrap; }
.tbl-wrap tbody tr:nth-child(even) { background: var(--bg2); }
.tbl-wrap tbody tr:last-child td, .tbl-wrap tbody tr:last-child th { border-bottom: 0; }
.tbl-wrap tbody th { font-weight: 700; color: var(--navy); }
.tbl-note { font-size: var(--fs-2); color: var(--ink3); line-height: 1.8; }

/* 幅の広い表・図版を本文カラム（680px）より 80px 広く見せる */
@media (min-width: 1280px) {
  .art__body .wide { width: calc(100% + 80px); max-width: none; margin-left: -40px; }
}

/* SP: 行見出しを左に貼り付けたまま横スクロールさせる */
@media (max-width: 767px) {
  .tbl-wrap tbody th[scope="row"] {
    position: sticky; left: 0; z-index: 1; min-width: 116px;
    background: #fff; box-shadow: 1px 0 0 var(--line);
  }
  .tbl-wrap tbody tr:nth-child(even) th[scope="row"] { background: var(--bg2); }
}

/* --------------------------------------------------------------
   12-B. 旧 Gutenberg ブロックの受け皿
   旧記事の本文には wp-block-columns / wp-block-column /
   figure.wp-block-table.align* が残っている（本文フィルタは inline style を
   落とすが class は残す）。core のブロック CSS は本文カラム 680px を前提に
   していないため、ここで新テンプレの 1 カラム本文に収まるよう受け止める。
   2026-09-06 追加: 56060（公開記事 33988 の複製下書き）で 46 個の表が
   1280 / 1024 / 390px すべてでビューポート右端をはみ出していたことへの対処。
   ※ 本文に wp-block-* を含まない記事（56051 など）には一切影響しない。
   -------------------------------------------------------------- */

/* 12-B-1. カラムブロック: core の flex をやめ、折り返す grid にする
   （旧 wp-article.css と同じ形。1 列あたり 240px を割るときは自動で 1 列に落ちる） */
.art__body .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 2em 0;
}
/* 縦リズムの .art__body > * + * は直下の子にしか効かないので、
   カラム内の縦間隔はここで別に与える（二重にはならない） */
.art__body .wp-block-column { min-width: 0; }
.art__body .wp-block-column > * + * { margin-top: 1em; }

/* 12-B-2. カラム内の表: min-width 520px を解除してカラム幅に収める
   （収まらない分は .tbl-wrap 自身の overflow-x でスクロールする）。
   .wide の食い出し（左 -40px）はカラム内では成立しないので打ち消す */
.art__body .wp-block-column .tbl-wrap { max-width: 100%; }
.art__body .wp-block-column .tbl-wrap table { min-width: 0; }
.art__body .wp-block-column .wide { width: auto; max-width: 100%; margin-left: 0; }

/* 12-B-3. align* 付きの表 figure: core の
   `.wp-block-table.align{left,right,center}{display:table;width:auto}` が
   shrink-to-fit を作り、内側の min-width 520px でカラムを突き破る。
   本文フィルタは align* を落とさないので CSS 側で通常のブロック表に戻す */
.art__body figure.wp-block-table.alignleft,
.art__body figure.wp-block-table.alignright,
.art__body figure.wp-block-table.aligncenter {
  display: block; float: none; width: auto; max-width: 100%;
  margin-left: 0; margin-right: 0;
}

/* 12-B-4. 旧本文の画像・figure が本文幅を超えないための保険 */
.art__body img, .art__body figure { max-width: 100%; }

/* --------------------------------------------------------------
   13. CTA コンポーネント
   -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 22px; font-family: var(--font); font-size: var(--fs-4); font-weight: 700;
  line-height: 1.4; letter-spacing: .02em; border-radius: var(--pill);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.btn--outline { background: #fff; color: var(--accent); border-color: var(--accent); }
.btn--outline:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 主購入ボタン（ページ内で唯一の塗り）— レール／10章／14章で共通 */
.btn--buy { padding: 16px 28px; font-size: var(--fs-5); }
.btn--sm { padding: 12px 16px; font-size: var(--fs-3); min-height: 44px; }   /* タップ領域 44px 以上（2026-09-17） */
.btn--block { display: flex; width: 100%; }
/* 2 行ボタン（主文＋補足） */
.btn--stack { flex-direction: column; gap: 1px; padding-top: 7px; padding-bottom: 7px; line-height: 1.35; }
.btn--stack span { font-size: var(--fs-1); font-weight: 400; letter-spacing: 0; }

/* 本文内 CTA（購入／相談 共通の 1 スタイル） */
.cta {
  border: 1px solid var(--line);
  border-radius: var(--rl); background: #fff; padding: 22px 24px;
}
.cta--buy { border: 2px solid var(--accent); }
.cta__label { font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; color: var(--ink3); }
.cta__ttl { font-size: var(--fs-6); font-weight: 700; color: var(--navy); line-height: 1.55; margin-top: 6px; }
.cta__txt { font-size: var(--fs-4); line-height: 1.85; color: var(--ink2); margin-top: 8px; }
.cta__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
/* .cta__link は本文外（レール・記事末）にも置くため色を明示する
   （本文内では .art__body a のネイビーに乗っていたが、外に出ると既定のティールになるため） */
.cta__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;   /* タップ領域 44px 以上（2026-09-17） */
  font-size: var(--fs-3); font-weight: 700; color: var(--navy);
  text-decoration-line: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.cta__link:hover { color: var(--navy); text-decoration-thickness: 2px; }
.cta__tel { font-size: var(--fs-3); color: var(--ink3); margin-top: 12px; }
.cta__tel a { font-weight: 700; color: var(--ink2); }   /* 電話番号リンクは 7.4:1（2026-09-17） */
.cta__price { font-size: var(--fs-4); font-weight: 700; color: var(--navy); margin-top: 10px; }
.cta__price small { font-weight: 400; color: var(--ink3); font-size: var(--fs-2); }

/* --------------------------------------------------------------
   14. FAQ アコーディオン
   -------------------------------------------------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; }
.faq > details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 18px; position: relative;
  font-size: var(--fs-5); font-weight: 700; line-height: 1.65; color: var(--navy); background: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--bg2); }
.faq summary::after {
  content: "＋"; position: absolute; right: 18px; top: 15px;
  color: var(--ink3); font-weight: 700; font-size: var(--fs-5);
}
.faq details[open] > summary::after { content: "－"; }
.faq details[open] > summary { background: var(--bg2); }
.faq__a { padding: 4px 18px 18px; font-size: var(--fs-5); line-height: 1.9; color: var(--ink); background: var(--bg2); }
.faq__group {
  font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; color: var(--ink3);
  margin-top: 1.8em; margin-bottom: .6em;
}

/* --------------------------------------------------------------
   15. 右レール（1 つの sticky グループ／PC ≥1024px）
   -------------------------------------------------------------- */
.rail__grp > * + * { margin-top: 10px; }

/* a. 製品カード */
.pcard { border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; background: #fff; }
.pcard__img { background: var(--bg2); border-bottom: 1px solid var(--line2); }
.pcard__img img { width: 100%; height: 118px; object-fit: contain; padding: 6px 0; }
.pcard__bd { padding: 11px 14px 13px; }
.pcard__name { font-size: var(--fs-4); font-weight: 700; color: var(--navy); line-height: 1.45; }
.pcard__price { font-size: var(--fs-6); font-weight: 700; color: var(--navy); line-height: 1.4; margin-top: 3px; font-family: var(--font-num); }
.pcard__price span { font-size: var(--fs-2); font-weight: 400; color: var(--ink3); font-family: var(--font); }
.pcard__note { font-size: var(--fs-2); color: var(--ink3); line-height: 1.5; margin-top: 1px; }
.pcard__acts { display: grid; gap: 7px; margin-top: 10px; }

/* b–c. 小カード（回収・サンプル） */
.rcard { border: 1px solid var(--line); border-radius: var(--rl); background: var(--bg2); padding: 12px 14px; }
.rcard__hd { display: flex; align-items: center; gap: 10px; }
.rcard__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--r); background: #fff; object-fit: contain; }
.rcard__ttl { font-size: var(--fs-4); font-weight: 700; color: var(--navy); line-height: 1.45; }
.rcard__txt { font-size: var(--fs-2); color: var(--ink2); line-height: 1.6; margin-top: 5px; }
.rcard__hd .rcard__txt { margin-top: 3px; }
.rcard .btn { margin-top: 9px; }
/* 関連する製品ページ（imaker_rail_cards・2026-09-16） */
.rail__links > * + * { margin-top: 8px; }
.rail__hd { font-size: var(--fs-2); font-weight: 700; color: var(--ink3); letter-spacing: .06em; margin: 0 0 6px; }
.mob-cards .rail__links { display: grid; gap: 8px; }
/* 記事冒頭の製品ストリップ（≤1023px。PC は右レールがあるので出さない）。関連する製品ページを横スクロールで */
.prod-strip { display: none; }
@media (max-width: 1023px) {
  .prod-strip { display: block; margin: 14px 0 4px; }
  .prod-strip .rail__links { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .prod-strip .rail__links > * + * { margin-top: 0; }
  .prod-strip .rail__hd { flex: 0 0 100%; margin: 0; }
  .prod-strip .rcard { flex: 0 0 240px; scroll-snap-align: start; }
}

/* d. 電話番号（カードにしない素の 1 行） */
.rail__tel { font-size: var(--fs-2); color: var(--ink3); line-height: 1.6; padding: 0 2px; }
.rail__tel a { color: var(--ink2); font-weight: 700; }

/* 記事末の関連リンク（旧・レールの「関連する基幹記事」） */
.relbox { margin-top: 40px; }
.relbox__hd {
  font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; color: var(--ink3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.rail__links { list-style: none; }
.rail__links li { border-bottom: 1px solid var(--line2); }
.rail__links a {
  display: block; padding: 10px 0; font-size: var(--fs-4); line-height: 1.6;
  color: var(--ink); text-decoration: none;
}
.rail__links a:hover { color: var(--navy); text-decoration: underline; }

/* SP/タブレットのみ本文末に出す 回収・サンプルカード */
.mob-cards { display: none; }
@media (max-width: 1023px) { .mob-cards { display: grid; gap: 12px; } }

/* --------------------------------------------------------------
   15-B. 記事末「次に読む」（知識型のみ）
   2026-09-06 追加: cta_profile=knowledge の記事は購入ボタンを持たないので、
   記事末の主行動を「次の記事へ進むこと」にする（Itsuro 承認）。
   先頭 1 本だけ画像つきの大きいカード（PC は画像左・≤600px は画像上）、
   残りは従来どおり .rail__links のリスト。
   塗りボタン（.btn--primary）は使わない ＝「ティールの塗りは購入だけ」を守る。
   product / consider は従来の .relbox のまま（このセクションは効かない）。
   -------------------------------------------------------------- */
.next { margin-top: 40px; }
.next__hd {
  font-size: var(--fs-2); font-weight: 700; letter-spacing: .08em; color: var(--ink3);
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* カード全体が 1 つのリンク（.card と同じ作り・記事末なので横並び） */
.next__card {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 14px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--rl);
  text-decoration: none; color: inherit;
}
.next__card:hover { border-color: var(--navy); }
.next__thumb {
  display: block; flex: 0 0 200px; width: 200px;
  background: var(--line2); border-radius: var(--r); overflow: hidden;
}
/* 縦長の画像でも見出し部分が切れないよう、.card__img img と同じ上寄せトリミング */
.next__thumb img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 22%;
}
.next__bd { display: block; min-width: 0; }
/* カテゴリのピル（.art__cat と同じ見た目。カード内なので hover は付けない） */
.next__cat {
  display: inline-block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em;
  color: var(--navy); background: var(--line2);
  padding: 4px 12px; border-radius: var(--pill);
}
.next__ttl {
  display: block; font-size: var(--fs-6); font-weight: 700; line-height: 1.55;
  color: var(--navy); margin-top: 8px;
}
.next__card:hover .next__ttl { text-decoration: underline; }
.next__txt {
  display: block; font-size: var(--fs-2); line-height: 1.75; color: var(--ink2); margin-top: 7px;
}
.next__more { margin-top: 6px; }

/* スマホ: 画像を上に回す */
@media (max-width: 600px) {
  .next__card { display: block; padding: 12px; }
  .next__thumb { width: 100%; flex: none; }
  .next__bd { margin-top: 12px; }
}

/* --------------------------------------------------------------
   16. モバイル固定 CTA バー（≤1023px）
   -------------------------------------------------------------- */
.mbar { display: none; }
@media (max-width: 1023px) {
  /* 固定バーに隠れる分だけ下に余白（バーのある記事ページだけ）。
     余白を白く見せないよう、フッタの地色をその分だけ下へ伸ばす */
  body:has(.mbar) { padding-bottom: 78px; }
  body:has(.mbar) .ft { padding-bottom: 78px; margin-bottom: -78px; }
  .mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    align-items: center; gap: 12px; padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
  }
  .mbar__txt { flex: 1; min-width: 0; }
  .mbar__name { font-size: var(--fs-2); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__price { font-size: var(--fs-3); font-weight: 700; color: var(--ink); font-family: var(--font-num); }
  .mbar__price span { font-size: var(--fs-1); font-weight: 400; color: var(--ink3); font-family: var(--font); }
  .mbar .btn { flex-shrink: 0; }
}
@media (max-width: 400px) { .mbar__name { display: none; } }

/* --------------------------------------------------------------
   17. 著者ボックス（記事末）
   -------------------------------------------------------------- */
.author {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--rl); padding: 18px 20px; background: var(--bg2);
  margin-top: 28px;
}
.author__avatar { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
/* 組織名義の著者はテーマの i-MAKER マーク（icon.png）を img で出す。丸の中に余白を取って収める */
img.author__avatar { object-fit: contain; padding: 7px; box-sizing: border-box; display: block; }
img.art__author-avatar { object-fit: contain; padding: 4px; box-sizing: border-box; background: #fff; display: block; }
.author__name { font-size: var(--fs-4); font-weight: 700; color: var(--navy); }
.author__name a { color: var(--navy); text-decoration: none; }
.author__name a:hover { text-decoration: underline; }
.author__role { font-size: var(--fs-2); color: var(--ink3); margin-top: 2px; }
.author__txt { font-size: var(--fs-3); color: var(--ink2); line-height: 1.8; margin-top: 8px; }

/* --------------------------------------------------------------
   18. TOP ページ
   -------------------------------------------------------------- */
.sec { padding: 44px 0; }
.sec--alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec__ttl { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.sec__ttl small { display: block; font-size: var(--fs-2); font-weight: 400; color: var(--ink3); margin-top: 4px; letter-spacing: .04em; }
.sec__more { font-size: var(--fs-3); font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--navy); }

/* Hero（注目記事 1 本） */
.hero { padding: 22px 0 0; }
.page-hd { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.page-ttl { font-size: clamp(22px, 3.2vw, 27px); font-weight: 700; line-height: 1.4; color: var(--navy); letter-spacing: .01em; }
.page-lede { font-size: var(--fs-4); line-height: 1.85; color: var(--ink2); margin-top: 8px; max-width: 62ch; }
.hero__link {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: center;
  text-decoration: none; color: inherit;
}
.hero__img { display: block; }
.hero__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rl); }
.hero__label { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .12em; color: var(--ink3); }
.hero__ttl { display: block; font-size: clamp(19px, 2.8vw, 27px); font-weight: 700; line-height: 1.5; color: var(--navy); margin-top: 10px; }
.hero__ex { display: block; font-size: var(--fs-4); line-height: 1.85; color: var(--ink2); margin-top: 12px; }
.hero__meta { display: block; font-size: var(--fs-2); color: var(--ink3); margin-top: 12px; }
@media (max-width: 767px) { .hero__link { grid-template-columns: 1fr; gap: 16px; } }

/* カード（バリエーション A：画像つき大カード） */
.cards { display: grid; gap: 18px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden;
  text-decoration: none; color: inherit;
}
.card:hover { border-color: var(--navy); }
.card__img { display: block; background: var(--line2); }
/* 縦長のテーマ画像でも見出し部分が切れないよう、上寄りでトリミングする */
.card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 22%; }
.card__bd { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.card__label { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; color: var(--ink3); }
.card__ttl { display: block; font-size: var(--fs-5); font-weight: 700; line-height: 1.55; color: var(--navy); margin-top: 6px; }
.card__desc { display: block; font-size: var(--fs-2); line-height: 1.75; color: var(--ink2); margin-top: 7px; }
.card__foot { display: block; font-size: var(--fs-2); color: var(--ink3); margin-top: auto; padding-top: 12px; }

/* カード（バリエーション B：行リスト） */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline;
  padding: 14px 2px; text-decoration: none; color: inherit;
}
.row:hover .row__ttl { color: var(--navy); text-decoration: underline; }
.row__ttl { font-size: var(--fs-5); font-weight: 500; line-height: 1.65; color: var(--ink); }
.row__date { font-size: var(--fs-1); color: var(--ink3); font-family: var(--font-num); white-space: nowrap; }
@media (max-width: 767px) {
  .row { grid-template-columns: 1fr; gap: 3px; }
  .row__date { grid-row: 1; }
}

/* 行リストの先頭 1 本だけサムネつきで大きく出す（各テーマの入口記事） */
.row--feat { grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 18px; padding: 16px 2px; }
.row__thumb { display: block; }
.row__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--line2); }
.row__bd { display: block; min-width: 0; }
.row--feat .row__ttl { display: block; font-size: var(--fs-6); font-weight: 700; line-height: 1.5; color: var(--navy); }
.row--feat .row__date { display: block; margin-top: 10px; }
@media (max-width: 767px) {
  .row--feat { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .row--feat .row__ttl { font-size: var(--fs-5); }
  .row--feat .row__date { grid-row: auto; }
}

/* テーマ別ブロック（入口 → 記事リスト） */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
.theme-grid > div { display: flex; flex-direction: column; }
.theme__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.theme__ttl { font-size: var(--fs-5); font-weight: 700; color: var(--navy); }
.theme__count { font-size: var(--fs-1); color: var(--ink3); font-family: var(--font-num); }
.theme__desc { font-size: var(--fs-2); line-height: 1.75; color: var(--ink2); margin-top: 10px; }
.theme-grid .rows { margin-top: 14px; }
/* margin-top:auto で段の下端に揃える */
.theme__more { display: inline-block; margin-top: auto; padding-top: 12px; font-size: var(--fs-2); font-weight: 700; text-decoration: none; color: var(--navy); }
.sec__more:hover, .theme__more:hover { color: var(--navy); text-decoration: underline; }

@media (max-width: 1023px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .theme-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 767px) {
  .cards--4, .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .sec { padding: 32px 0; }
}

/* 3DMedSupo 帯（TOP） */
.promo {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 280px; gap: 24px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--rl); background: #fff;
  padding: 22px 26px; margin-top: 28px;
}
.promo__img { display: block; }
.promo__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg2); border-radius: var(--r); }
.promo__bd { display: block; min-width: 0; }
.promo__label { display: block; font-size: var(--fs-2); font-weight: 700; color: var(--ink3); letter-spacing: .04em; }
.promo__ttl { display: block; font-size: var(--fs-6); font-weight: 700; color: var(--navy); margin-top: 4px; line-height: 1.45; }
.promo__txt { display: block; font-size: var(--fs-3); line-height: 1.8; color: var(--ink2); margin-top: 6px; }
.promo__price { display: block; font-size: var(--fs-3); font-weight: 700; color: var(--navy); margin-top: 8px; font-family: var(--font-num); }
.promo__price span { font-family: var(--font); font-size: var(--fs-1); font-weight: 400; color: var(--ink3); }
.promo__acts { display: grid; gap: 8px; }
.promo__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.promo__row .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.promo__link { font-size: var(--fs-2); font-weight: 700; color: var(--navy); text-align: center; }
@media (max-width: 1023px) {
  .promo { grid-template-columns: 120px minmax(0, 1fr); }
  .promo__acts { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .promo { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .promo__img { max-width: 140px; }
}

/* すべてのカテゴリ（.art__cat と同じ薄グレー地・紺文字のピル。塗りではない） */
.cats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cats__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  font-size: var(--fs-4); font-weight: 700; color: var(--navy); text-decoration: none;
}
.cats__item span { font-family: var(--font-num); font-size: var(--fs-2); font-weight: 400; color: var(--ink3); }
.cats__item:hover { border-color: var(--navy); }

/* --------------------------------------------------------------
   19. フッター
   -------------------------------------------------------------- */
.ft { background: var(--dk); color: rgba(255, 255, 255, .55); padding: 40px 0 0; margin-top: 8px; }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1.6fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.ft__logo img { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.ft__tl { font-size: var(--fs-2); line-height: 1.9; color: rgba(255, 255, 255, .35); margin-top: 12px; }
.ft__hd { font-size: var(--fs-1); font-weight: 700; color: rgba(255, 255, 255, .85); letter-spacing: .08em; margin-bottom: 12px; }
.ft__lks { list-style: none; }
.ft__lks li + li { margin-top: 8px; }
/* カテゴリ 15 件は 2 列に折り返す */
.ft__lks--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ft__lks--2col li + li { margin-top: 0; }
.ft__lks a { font-size: var(--fs-2); color: rgba(255, 255, 255, .45); text-decoration: none; }
.ft__lks a:hover { color: #fff; }
.ft__bot {
  border-top: 1px solid rgba(255, 255, 255, .08); padding: 16px 0;
  font-size: var(--fs-1); color: rgba(255, 255, 255, .25);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
}
/* 法的リンク 3 件（footer-lab.php から引き継ぎ） */
.ft__leg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ft__leg a { font-size: var(--fs-1); color: rgba(255, 255, 255, .45); text-decoration: none; }
.ft__leg a:hover { color: #fff; }
.ft__cp { font-size: var(--fs-1); color: rgba(255, 255, 255, .25); }
@media (max-width: 1023px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .ft__grid { grid-template-columns: 1fr; gap: 24px; } }

/* --------------------------------------------------------------
   20. 印刷
   -------------------------------------------------------------- */
@media print {
  .hdr, .hdr__navstrip, .l-toc, .l-rail, .mbar, .prog-top, .crumbs, .ft, .toc-inline, .cta, .mob-cards { display: none !important; }
  body { font-size: 10.5pt; color: #000; padding-bottom: 0; }
  .l-article { display: block; padding: 0; margin: 0; }
  .art__body { font-size: 10.5pt; line-height: 1.7; }
  .art__body h2, .art__body h3 { break-after: avoid; color: #000; }
  .art__body .wide { width: auto; margin-left: 0; }
  .tbl-wrap { overflow: visible; border-color: #000; }
  .tbl-wrap table { min-width: 0; }
  .tbl-wrap thead th { background: #eee !important; color: #000 !important; }
  .faq details { break-inside: avoid; }
  .faq summary::after { content: ""; }
  .art__body a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  .fig img { border: 1px solid #999; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .toc__prog-bar, .prog-top span { transition: none; }
}