@charset "utf-8";
/* Patent Compass — 版面の正は docs/DESIGN_SPEC.md。
   生成物（src/patentpipe/site/theme.py）。site/ を手で直さない。 */
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/noto-sans-jp-400.woff2?v=7489e447") format("woff2");}
@font-face{font-family:"Noto Sans JP";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/noto-sans-jp-700.woff2?v=4b87e85a") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.woff2?v=728e309c") format("woff2");}
:root{
  --bg:#FFFFFF;
  --bg-soft:#F4F7FB;
  --rule:#E3E8EF;
  --ink:#1E2430;
  --ink-2:#5A6578;
  --blue:#0B63E5;
  --blue-d:#0A56C8;
  --orange:#FF6A2B;
  --orange-t:#C43A0B;
  --navy:#0A1B3D;
  --navy-2:#8FA6C8;
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
  --en:"Inter","Noto Sans JP",sans-serif;
  --mark:#FFE3D3;
  --shadow:0 2px 14px rgba(30,36,48,.10);
  --ease:cubic-bezier(.33,1,.68,1);
  --edge:64px;
  --vw:100vw;
  --side:max(var(--edge), calc((var(--vw) - 1120px) / 2));
  --sec:96px;
}

/* ============================================================
   2. 土台
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--jp); font-size:17px; line-height:1.95;
  font-weight:400; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-d); }
h1,h2,h3,p,ul,ol,figure,table,dl{ margin:0; }
ul{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.wrap{ width:min(1120px, 100% - var(--edge) * 2); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--ink); padding:10px 16px; border:1px solid var(--rule);
}
.skip:focus{ left:8px; top:8px; }

/* ============================================================
   3. 文字の型
   ============================================================ */
.kicker{
  font-family:var(--en); font-size:13px; line-height:1; font-weight:700;
  letter-spacing:.14em; color:var(--blue);
  display:flex; align-items:center; gap:10px;
}
.kicker::before{
  content:""; width:14px; height:2px; background:var(--orange); flex:0 0 auto;
}

h1{ font-size:44px; line-height:1.35; letter-spacing:-.02em; font-weight:700; }
h2{ font-size:30px; line-height:1.4; letter-spacing:-.02em; font-weight:700; }
h3{ font-size:20px; line-height:1.6; font-weight:700; }

.lead{ font-size:18px; line-height:1.9; color:var(--ink); }
.note{ font-size:13px; line-height:1.7; color:var(--ink-2); }

.sec{ padding:var(--sec) 0; }
.sec--soft{ background:var(--bg-soft); }
.sec__head{
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:12px 24px; margin-bottom:36px;
}
.sec__head .kicker{ grid-column:1; margin-bottom:14px; }
.sec__head h2{ grid-column:1; }
.sec__head .link-arrow{ grid-column:2; grid-row:1 / span 3; align-self:end; }
.sec__head p.note{ grid-column:1; margin-top:10px; }
.sec__lead{ grid-column:1; margin-top:12px; max-width:46em;
  font-size:16px; line-height:1.9; color:var(--ink-2); }

/* ============================================================
   4. ボタン・矢印・リンク
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px; border-radius:6px;
  font-size:16px; font-weight:700; line-height:1; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease), border-color .22s var(--ease);
}
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-d); color:#fff; transform:translateY(-1px); }
.btn--ghost{ background:#fff; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ background:var(--bg-soft); color:var(--ink); }
.btn--onphoto{ background:transparent; border-color:#fff; color:#fff; }
.btn--onphoto:hover{ background:#fff; color:var(--navy); }

.arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 28px; border-radius:50%;
  border:1px solid var(--rule); color:var(--ink); background:#fff;
  transition:background-color .22s var(--ease), border-color .22s var(--ease),
             color .22s var(--ease), transform .22s var(--ease);
}
.arrow svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
.arrow--on{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700; color:var(--blue); line-height:1.4;
}
.link-arrow .arrow{ border-color:var(--rule); color:var(--blue); }
.link-arrow:hover{ color:var(--blue-d); }
.link-arrow:hover span:first-child{ text-decoration:underline; }
.link-arrow:hover .arrow{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(4px); }

/* 橙の上に白文字を置かない（2.86:1）。札は必ず濃いインクで組む（仕様 §2） */
.badge{
  display:inline-block; height:22px; padding:0 8px; border-radius:3px;
  background:var(--orange); color:var(--ink);
  font-size:11px; font-weight:700; line-height:22px; letter-spacing:.04em;
}

.ic{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2;
     stroke-linecap:butt; stroke-linejoin:miter; }

/* ============================================================
   5. ヘッダー／メガメニュー
   ============================================================ */
.hdwrap{ position:sticky; top:0; z-index:60; background:#fff; }
.hd{
  height:84px; border-bottom:1px solid var(--rule); background:#fff;
  display:flex; align-items:center; gap:28px;
  padding-inline:var(--side);
}
/* ロゴは画像（assets/logo/logo.svg）。高さだけ決めて幅は比率任せ。
   ★`width`/`height` 属性を必ず付けること（読み込み前に場所を取らないと、
     ヘッダーの高さが一瞬変わってページ全体が跳ねる） */
.lg{ display:block; flex:0 0 auto; }
.lg img{ height:44px; width:auto; }
.ft-btm .lg img{ height:40px; }
.hd__nav{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.hd__nav > a{
  position:relative; display:block; padding:6px 0;
  font-size:15px; font-weight:700; color:var(--ink); line-height:1.6;
  transition:color .22s var(--ease);
}
.hd__nav > a::after{
  /* ★現在地の印は**状態を示す図形**なので 3:1 が要る。差し色の橙
     （#FF6A2B）は白地 2.86:1 で足りないため、文字版の濃い橙を使う
     （`scripts/check_contrast.py` の該当行）。飾りの罫は明るい方のまま */
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--orange-t); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.hd__nav > a:hover{ color:var(--blue); }
.hd__nav > a:hover::after,
.hd__nav > a[aria-current="page"]::after,
.hd__nav > a.is-open::after{ transform:scaleX(1); }
.hd__cta{ flex:0 0 auto; height:44px; padding:0 20px; font-size:14px; }
.hd__burger{ display:none; }

.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--rule);
  box-shadow:var(--shadow);
  padding:40px 0 44px;
}
.mega__in{ display:grid; grid-template-columns:300px 1fr; gap:48px; }
.mega__lead{ font-size:14px; line-height:1.8; color:var(--ink-2); margin:14px 0 18px; }
.mega__in h2{ font-size:22px; letter-spacing:-.01em; margin-top:14px; }
/* 2列×2段。横一列に4枚並べると1項目192pxになり、語の途中で折れる（実測） */
.mega__list{ display:grid; grid-template-columns:repeat(2,minmax(0,340px)); gap:22px 32px; }
.mega__item{ display:flex; gap:14px; align-items:center; }
.mega__item img{ width:112px; height:72px; object-fit:cover; border-radius:4px; flex:0 0 112px; border:1px solid var(--rule); }
.mega__item span{
  font-size:14px; line-height:1.6; font-weight:700; color:var(--ink);
  transition:color .22s var(--ease);
  word-break:normal; overflow-wrap:normal; line-break:strict;
}
.mega__item:hover span{ color:var(--blue); }
html.js .mega[hidden]{ display:none; }
html.js .mega{ opacity:0; transform:translateY(-8px); transition:opacity .2s var(--ease), transform .2s var(--ease); }
html.js .mega.is-open{ opacity:1; transform:none; }
/* JSが無いときはメガメニューを開けない。行き先はナビとフッターのサイトマップに
   すべてあるので、板そのものは hidden のまま畳んでおく */

.mnav{ display:none; }

/* ============================================================
   6. 表紙
   ============================================================ */
.hero{
  display:grid; grid-template-columns:50fr 50fr; align-items:stretch;
  min-height:620px; background:#fff; border-bottom:1px solid var(--rule);
}
.hero__text{
  padding:0 56px 0 var(--side);
  display:flex; flex-direction:column; justify-content:center;
}
/* 60px・2行は左48%（実効553px）に物理的に入らない。54px・3行が正（仕様 §3） */
.hero__text h1{ font-size:54px; line-height:1.35; letter-spacing:-.03em; margin:22px 0 0; }
.hero__lead{ font-size:18px; line-height:1.9; margin-top:22px; max-width:30em; }
/* 意味の切れ目でだけ折る（「お手／伝いします」のように語の途中で折らない） */
.hero__lead .nb{ display:inline-block; }
.hero__btns{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero__note{
  margin-top:34px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:13px; line-height:1.7; color:var(--ink-2);
}
.hero__media{ position:relative; overflow:hidden; min-height:620px; }
.hero__media > img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
.hero__media::before{
  content:""; position:absolute; inset:0 auto 0 0; width:120px; z-index:2;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%);
}
.hero__strip{
  position:absolute; right:0; top:0; bottom:0; width:220px; z-index:3;
  display:grid; grid-template-rows:repeat(3,1fr); gap:2px;
  background:#fff; border-left:2px solid #fff;
}
.hero__strip img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   7. カード
   ============================================================ */
.grid{ display:grid; gap:28px 24px; }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--rule); border-radius:6px;
  color:var(--ink); overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card figure{ overflow:hidden; background:var(--bg-soft); }
.card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.card:hover{ box-shadow:var(--shadow); border-color:#D7DEE9; }
.card:hover figure img{ transform:scale(1.04); }
.card:hover h3{ color:var(--blue); }
.card:hover .arrow{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(4px); }
.card h3{ transition:color .22s var(--ease); }
.card__body{ padding:18px 20px 18px; display:flex; flex-direction:column; flex:1 1 auto; }
.card__body h3{ font-size:17px; line-height:1.6; }
.card__body p{ font-size:13px; line-height:1.7; color:var(--ink-2); margin-top:8px; }

/* 矢印はカードの右下に絶対配置しない。価格・日付と同じ行の右端に置く
   （絶対配置にすると説明が1行のカードで下が90px空く。2026-09-20 の講評）。
   ★セレクタを `.card__body .card__foot` まで上げてある。`.card__foot` だけだと
     1つ上の `.card__body p{ margin-top:8px }`（詳細度 0,2,0）に負けて
     `margin-top:auto` が効かず、題が1行のカードだけ日付が 27px 浮く
     ——同じ行に2行題のカードがあると段違いに見える（2026-09-21 実測）。
     `.step__n` が `<p>` で負けたのと同じ型の罠（仕様 §5.8） */
.card__body .card__foot{
  margin-top:auto; padding-top:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card__price{ font-family:var(--en); font-size:20px; font-weight:700; line-height:1; color:var(--ink); letter-spacing:-.01em; }
.card__price span{ font-family:var(--jp); font-size:11px; font-weight:400; color:var(--ink-2); margin-left:6px; }
.card__kind{ font-size:13px; line-height:1.6; color:var(--ink-2); margin-bottom:6px; }
/* ★`.card__body .card__foot` に上げた副作用。`.card__foot--end`（0,1,0）のままだと
   `justify-content` で負けて、矢印が右端ではなく左端に出る（2026-09-21 実測） */
.card__body .card__foot--end{ justify-content:flex-end; }

/* 写真の画角合わせ（object-position だけを足す小さな道具）。
   縦長の写真を横長の枠に入れると切れるのは天地 */
.img-op-top{ object-position:center 26%; }
.img-op-left{ object-position:35% center; }
.img-op-mid{ object-position:center 42%; }

.card--lg figure{ aspect-ratio:16/10; }
.card--md figure{ aspect-ratio:3/2; }
.card__body .badge{ align-self:flex-start; margin-bottom:10px; }
.card--md h3{ font-size:17px; }
.card--md time{ font-family:var(--en); font-size:13px; color:var(--ink-2); letter-spacing:.02em; }

/* 一覧の先頭の1枚だけ2列ぶん（仕様 §7.4）。8本を3列に並べると最後の行が
   2枚で終わって右に穴が残る。先頭を2枠にすると 2+7＝9枠＝3行で埋まる */
.card--feature{ grid-column:span 2; }
/* ★写真は横長に切る（2.5:1）。2:1 にすると大カードが普通のカードより 156px 高くなり、
   同じ行の1枚の中に 190px の空白ができる（日付は下端に揃うため）。実測で詰めた値 */
.card--feature figure{ aspect-ratio:2.5/1; }
.card--feature .card__body{ padding:22px 26px 22px; }
.card--feature h3{ font-size:22px; line-height:1.5; }
.card--feature .card__body p{ font-size:14px; line-height:1.85; margin-top:10px; max-width:46em; }

.card--tile{ border:0; border-radius:6px; }
.card--tile figure{ aspect-ratio:4/3; margin:0; height:100%; }
.card--tile .card__label{
  position:absolute; left:0; right:0; bottom:0; padding:64px 18px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  color:#fff; font-size:15px; font-weight:700; line-height:1.4;
  /* ★ グラデの % は「この帯の高さ」に対する割合。padding-top を取らずに 16px に
     すると帯の高さが51pxしかなく、文字の位置（下から約7割）ではほぼ透明になる。
     2026-09-20 の実測で明るい写真のタイルが 2.31:1 まで落ちていた原因がこれ。
     この値なら、ほぼ白の写真（平均222）でも 12.2:1 出る */
  background:linear-gradient(0deg,
    rgba(10,27,61,.94) 0%, rgba(10,27,61,.86) 34%,
    rgba(10,27,61,.45) 64%, rgba(10,27,61,0) 100%);
}
.card--tile:hover .card__label{ color:#fff; }

/* ============================================================
   8. バナー（写真＋紺グラデ）
   ============================================================ */
.banner{ position:relative; height:320px; overflow:hidden; background:var(--navy); }
.banner > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 右端を 0 にしない。0 だと明るい写真で帯全体が白茶ける（仕様 §2）。
   .12 でも右半分の中央値が 107 までしか下がらず、数字の帯（10,27,61）と
   並べると白茶けて見えた。右端は .42 まで上げている */
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,27,61,.90) 0%, rgba(10,27,61,.68) 58%, rgba(10,27,61,.42) 100%);
}
.banner__text{
  position:relative; z-index:2; height:100%; max-width:560px;
  padding-left:var(--side); padding-right:24px;
  display:flex; flex-direction:column; justify-content:center; color:#fff;
}
.banner__text .kicker{ color:#fff; }
.banner__text h2{ margin:14px 0 10px; color:#fff; }
.banner__text p{ font-size:16px; line-height:1.8; color:#fff; }
.banner__text p + p{ margin-top:6px; }
.banner__text .btn{ margin-top:22px; align-self:flex-start; }
/* ★一覧・ギャラリー・図の個票は `.sec` の器を使っていない（`.wrap` に直置き）。
   そのままだとカードや図の下端に濃紺の帯が食い付く——実測で
   `/articles/` 9px・`/guides/` 5px・`/data/` 2px しか空いていなかった
   （2026-09-21）。節の器を使っている面（`.sec`・`.doc`）は自分で下余白を
   持っているので、**ここで足すのは器の無い3つだけ**。全部に効かせると倍になる。
   ★`.guides-grid` の名前は `.guidelist` にしないこと——凍結中の旧CSS
     （`site/assets.py` 1507行）に同名で**別物**（`<li>` の縦リスト）がある */
.arts, .gallery, .figmeta, .guides-grid{ margin-bottom:var(--sec); }

/* ============================================================
   9. お試し集計の帯
   ============================================================ */
.trial{ display:grid; grid-template-columns:44fr 56fr; gap:56px; align-items:center; }
.trial h2{ margin:16px 0 14px; }
.trial p{ font-size:17px; line-height:1.9; }
.trial .btn{ margin-top:26px; }
.trial__sheets{ position:relative; height:400px; }
.trial__sheets img{
  position:absolute; top:0; width:250px; height:354px; object-fit:cover; object-position:top center;
  background:#fff; border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--shadow);
}
.trial__sheets img:first-child{ left:14%; transform:rotate(-6deg); }
.trial__sheets img:last-child{ left:44%; top:34px; transform:rotate(6deg); }

/* ============================================================
   10. 数字の帯
   ============================================================ */
.stats{ background:var(--navy); color:#fff; padding:96px 0 72px; }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.stats__cell{ padding:4px 32px; border-left:1px solid rgba(255,255,255,.18); }
.stats__cell:first-child{ border-left:0; padding-left:0; }
.stats__bar{ width:28px; height:3px; background:var(--orange); margin-bottom:18px; }
.stats__num{ font-family:var(--en); font-size:52px; line-height:1.1; letter-spacing:-.02em; font-weight:700; color:#fff; }
.stats__num i{ font-style:normal; font-family:var(--jp); font-size:26px; letter-spacing:0; margin-left:2px; }
.stats__lab{ margin-top:10px; font-size:13px; line-height:1.7; color:var(--navy-2); }
.stats__foot{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); font-size:13px; color:var(--navy-2); }

/* ============================================================
   11. 手順（1→2→3）— 枠のあるカード3枚。
   丸と丸を結ぶ横罫は引かない（列に地色が付くと隙間にだけ棒が残る）
   ============================================================ */
.sec--flow{ padding:72px 0; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:6px;
  padding:28px 24px 26px;
}
/* ★ `.step p{color:var(--ink-2)}` に詳細度で負けて数字が灰色になる罠（1.10:1）。
   span で組み、`.step .step__n` まで詳細度を上げる */
.step .step__n{
  width:44px; height:44px; border-radius:50%;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--en); font-size:18px; font-weight:700; line-height:1; margin:0;
}
.step h3{ margin-top:18px; font-size:20px; display:flex; align-items:center; gap:10px; }
.step h3 .ic{ color:var(--blue); flex:0 0 24px; }
.step p{ margin-top:10px; font-size:15px; line-height:1.85; color:var(--ink-2); }
/* 番号の無い箱（「お役に立てる場面」）。丸のぶんの天は詰める */
.steps--2{ grid-template-columns:repeat(2,1fr); }
.step--plain h3{ margin-top:0; }

/* サービスの目次4枚。次の節に密着しないよう1節ぶん空ける */
.svc-index{ margin-bottom:var(--sec); }
.svc-index__note{ margin:-22px 0 26px; max-width:46em; }

/* 地の文の節（名乗り・特許から始める理由）。
   肩と題を左の柱に置いて、右に本文。1カラムだと右半分が空く */
.lede{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.lede__head h2{ margin-top:14px; }
.prose{ max-width:38em; }
.prose p{ font-size:17px; line-height:1.95; }
.prose p + p{ margin-top:14px; }
.prose--after{ margin-top:36px; }
.subs{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:44px; }
.sub{ background:var(--bg-soft); border:1px solid var(--rule); border-radius:6px; padding:26px 24px; }
.sub h3{ font-size:18px; }
.sub p{ margin-top:10px; font-size:15px; line-height:1.85; color:var(--ink-2); }
.sub p + p{ margin-top:8px; }

/* ============================================================
   12. 料金表
   ============================================================ */
.price{ border-top:1px solid var(--rule); }
.price tr{ border-bottom:1px solid var(--rule); transition:background-color .22s var(--ease); }
.price tbody tr:hover{ background:var(--bg-soft); }
.price td{ padding:20px 16px; vertical-align:middle; }
.price td:first-child{ padding-left:0; width:112px; }
.price td:last-child{ padding-right:0; width:44px; }
.price img{ width:80px; height:80px; object-fit:cover; border-radius:6px; border:1px solid var(--rule); }
/* 行にアイコンは置かない。写真と役割が重なる（仕様 §5.7） */
.price__name{ font-size:17px; font-weight:700; line-height:1.5; }
.price__name a{ color:inherit; }
.price__desc{ font-size:13px; line-height:1.7; color:var(--ink-2); margin-top:4px; }
.price__give{ width:300px; font-size:13px; line-height:1.7; color:var(--ink-2); }
.price__give b{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink-2); opacity:.8; margin-bottom:2px; }
.price__val{ text-align:right; white-space:nowrap; font-family:var(--en); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.price__val span{ font-family:var(--jp); font-size:11px; font-weight:400; color:var(--ink-2); margin-left:6px; }
.price tbody tr:hover .arrow{ background:var(--blue); border-color:var(--blue); color:#fff; }
.price-note{ margin-top:18px; }

/* ============================================================
   13. パンくず・ページ題
   ============================================================ */
.crumb{ padding:18px 0 20px; font-size:12px; line-height:1.8; color:var(--ink-2); }
.crumb a{ color:var(--ink-2); }
.crumb a:hover{ color:var(--blue); text-decoration:underline; }
.crumb span{ color:var(--ink-2); }
.page-head{ padding:26px 0 44px; }
.page-head h1{ margin:16px 0 0; }
.page-head .lead{ margin-top:18px; max-width:44em; }

/* ============================================================
   14. サービスの節
   ============================================================ */
.sec--tight{ padding-top:0; }
.svc{ padding:72px 0; border-top:1px solid var(--rule); scroll-margin-top:100px; }
.svc__in{ display:grid; grid-template-columns:1fr 440px; gap:56px; align-items:start; }
.svc h2{ margin:14px 0 18px; }
.svc p{ font-size:17px; line-height:1.95; }
.svc__pts{ margin-top:26px; display:grid; gap:14px; }
.svc__pts li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.8; }
.svc__pts .ic{ color:var(--blue); flex:0 0 24px; margin-top:4px; }
.svc__fig img{ width:100%; aspect-ratio:440/360; object-fit:cover; border-radius:6px; border:1px solid var(--rule); }
.svc__fig figcaption{ margin-top:10px; font-size:13px; color:var(--ink-2); line-height:1.7; }
.svc__note{ margin-top:18px; font-size:13px; line-height:1.9; color:var(--ink-2); }
.svc__note a{ color:var(--blue); }

/* 納品見本：大1枚＋小3枚。262px角だと紙面の字が読めない。
   ★左右の高さを揃える割付：左 L=0.5625W+49、右 R=3(0.5625w+39)+48。
     W+w=1096 で解くと W≈864・w≈232。688px にすると右が400px長くなって左下が空く */
.samples{ display:grid; grid-template-columns:864px 1fr; gap:24px; align-items:start; }
.samples__side{ display:grid; gap:24px; }
.samples a{ display:block; border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:#fff;
  transition:box-shadow .3s var(--ease); }
.samples a:hover{ box-shadow:var(--shadow); }
.samples img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top center; transition:transform .4s var(--ease); }
.samples a:hover img{ transform:scale(1.04); }
.samples figcaption{ padding:12px 14px 14px; font-size:13px; line-height:1.6; color:var(--ink-2); }
.samples__side figcaption{ padding:8px 12px 10px; font-size:12px; }
.samples__inc{ margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 28px; }
.samples__inc li{ position:relative; padding-left:18px; font-size:14px; line-height:1.8; }
.samples__inc li::before{ content:""; position:absolute; left:0; top:12px; width:8px; height:2px; background:var(--orange); }
.samples__note{ margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:13px; line-height:1.9; color:var(--ink-2); max-width:56em; }

.box{ background:var(--bg-soft); border-radius:6px; padding:34px 36px; }
.box h2{ font-size:20px; }
.box ul{ margin-top:16px; display:grid; gap:10px; }
.box li{ font-size:15px; line-height:1.8; padding-left:18px; position:relative; }
.box li::before{ content:""; position:absolute; left:0; top:13px; width:8px; height:2px; background:var(--orange); }

/* 実物の紙面（お試し集計・納品見本の縦並び） */
.shots{ display:grid; gap:36px; }
.shot{ border:1px solid var(--rule); border-radius:6px; overflow:hidden; background:#fff; }
.shot img{ width:100%; height:auto; }
.shot figcaption{ padding:14px 18px 16px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.shot figcaption b{ display:block; font-size:15px; color:var(--ink); margin-bottom:4px; }
.dl{ margin-top:26px; display:grid; gap:10px; }
.dl li{ font-size:14px; line-height:1.8; }
.dl .size{ color:var(--ink-2); font-size:12px; margin-left:8px; }
.dl .cap{ display:block; color:var(--ink-2); font-size:12px; }
.mail-plain{ margin-top:12px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.mail-plain .addr{ font-family:var(--en); color:var(--ink); }

/* ============================================================
   14b. 一覧の絞り込みと、サイト内の検索（記事一覧の頭）
   ============================================================ */
/* ★どちらも **JSが動くときだけ出す**。`<html class="js">` は静的に書いて
   あるので、消す側は `<noscript>` の1枚（`NOSCRIPT_CSS`）が担当する。
   JSが無い環境では、絞り込みの行も検索の欄も現れず、カードは全部出る
   （押しても何も起きないボタンを本番に出さない）。 */
.filters, .sitesearch{ display:none; }
html.js .filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 24px;
  border-bottom:1px solid var(--rule); margin-bottom:34px;
}
.filters button{
  position:relative; padding:10px 0 12px;
  font-size:14px; font-weight:700; color:var(--ink); line-height:1.6;
  transition:color .22s var(--ease);
}
.filters button::after{
  /* 現在地の印は**状態を示す図形**なので 3:1 が要る（ヘッダーの罫と同じ理由）。
     明るい橙 #FF6A2B は白地 2.86 で足りないため、文字版の濃い橙で引く */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--orange-t); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.filters button:hover{ color:var(--blue); }
.filters button:hover::after,
.filters button[aria-pressed="true"]::after{ transform:scaleX(1); }
.filters .n{ font-family:var(--en); font-size:12px; font-weight:400;
  color:var(--ink-2); margin-left:6px; }

html.js .sitesearch{ display:block; margin-bottom:34px; }
.sitesearch__t{ font-size:13px; font-weight:700; line-height:1.6; margin-bottom:10px; }
.sitesearch input{
  width:100%; max-width:520px; height:48px; padding:0 16px;
  border:1px solid var(--rule); border-radius:6px; background:#fff;
  font-family:var(--jp); font-size:16px; line-height:1.6; color:var(--ink);
}
.sitesearch input::placeholder{ color:var(--ink-2); }
.search-results{ margin-top:12px; max-width:760px; }
.search-results li{ border-bottom:1px solid var(--rule); }
.search-results a{ display:block; padding:12px 2px; color:var(--ink);
  transition:background-color .22s var(--ease); }
.search-results a:hover{ background:var(--bg-soft); }
.search-results .t{ display:block; font-size:15px; font-weight:700; line-height:1.6; }
.search-results a:hover .t{ color:var(--blue); }
.search-results .s{ display:block; margin-top:4px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.search-results mark{ background:var(--mark); color:var(--ink); }
.search-results .none{ padding:12px 2px; font-size:14px; line-height:1.8; color:var(--ink-2); border-bottom:0; }

/* ============================================================
   14c. 記事・解説の本文（手本は preview/c/article.html）
   ============================================================ */
.art__cover{ height:360px; overflow:hidden; background:var(--bg-soft); }
.art__cover img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; }
.art__head{ padding:44px 0 0; }
.art__meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.art__meta time{ font-family:var(--en); font-size:13px; color:var(--ink-2); }
.art__head h1{ margin-top:18px; max-width:20em; }
/* ★38em（684px）だと39〜40字のリードが1字だけ次行に落ちる（富士フイルムは
   「た。」の2字だけが2行目に残っていた。2026-09-21 実測）。42em＝約42字で、
   仕様の「1行42〜46字」の下端。ここを超えて広げない */
.art__head .lead{ margin-top:20px; max-width:42em; }
/* 本文は1段組み（720px・1行42〜46字）。左の柱は目次だけ */
.art__body{ display:grid; grid-template-columns:180px 720px; gap:64px;
  padding:48px 0 var(--sec); align-items:start; }
/* 目次が4項目に満たない記事は柱を立てない（空の列を作らない）。
   本文を版面の中央に置き、図の板の寄せ幅も (1120-720)/2 = 200px に変える */
.art__body--solo{ grid-template-columns:720px; justify-content:center; }
.art__body--solo .fig--wide{ margin-left:-200px; }
.art__body--solo .fig--full{ margin-left:calc(var(--side) * -1); }
.art__body--solo .fig--full figcaption,
.art__body--solo .fig--full .figtitle,
.art__body--solo .fig--full .figtools{ margin-left:var(--side); }
/* 一覧のカードは、絞り込みで隠れても列が詰まるだけ（`hidden` を効かせる） */
.arts [hidden]{ display:none; }
/* 目次は**JSが動くときだけ**追従させる（2026-09-21）。
   幅の広い図（`.fig--wide` / `.fig--full`）は目次の柱まで食い込むので、
   追従したままだと図の上に目次が乗る。避ける仕組みはJS（`site.js` の
   「目次と広い図の重なり」）が `is-off` を付け外しして担当するので、
   **JSが無い環境では追従させない**（`NOSCRIPT_CSS` が static に戻す）。
   素の `.toc` が static なのは、1279px以下の畳んだ目次と同じ状態 */
.toc{ position:static; }
html.js .toc{ position:sticky; top:108px; transition:opacity .2s var(--ease); }
/* 広い図と矩形が重なっている間だけ消す。場所は空けたまま（opacity）なので、
   消えている間も矩形は動かない＝点滅しない。`visibility` は遷移が終わってから
   効かせる（消えた目次にTabで入れないように） */
html.js .toc.is-off{
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .2s var(--ease), visibility 0s linear .2s;
}
.toc__t{ font-family:var(--en); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
.toc ol{ margin:14px 0 0; padding:0; list-style:none; counter-reset:t; display:grid; gap:12px; }
.toc li{ counter-increment:t; }
.toc a{ display:flex; gap:8px; font-size:13px; line-height:1.7; color:var(--ink-2); }
.toc a::before{ content:counter(t); font-family:var(--en); color:var(--orange-t); font-weight:700; }
.toc a:hover{ color:var(--blue); }
.toc details summary{ display:none; }

/* 要点（記事の頭の箱） */
.points{ background:var(--bg-soft); border:1px solid var(--rule); border-radius:6px;
  padding:24px 26px; margin-bottom:36px; }
.points__t{ font-size:15px; font-weight:700; line-height:1.6; margin-bottom:12px;
  display:flex; align-items:center; gap:10px; }
.points__t::before{ content:""; width:14px; height:2px; background:var(--orange); flex:0 0 auto; }
.points li{ position:relative; padding-left:18px; font-size:15px; line-height:1.85; }
.points li + li{ margin-top:8px; }
.points li::before{ content:""; position:absolute; left:0; top:13px; width:8px; height:2px; background:var(--orange); }

/* 長文の地の文（記事本文・解説本文・固定ページで共通） */
.rich > h2{ font-size:26px; line-height:1.5; margin:56px 0 20px; scroll-margin-top:110px; }
.rich > h2:first-child{ margin-top:0; }
.rich > h3{ font-size:19px; margin:34px 0 12px; }
.rich > p{ margin-top:20px; font-size:17px; line-height:1.95; }
.rich > p:first-child{ margin-top:0; }
.rich > ul, .rich > ol{ margin-top:18px; display:grid; gap:9px; padding-left:0; }
.rich > ol{ list-style:decimal; padding-left:1.4em; }
.rich > ul > li{ position:relative; padding-left:18px; font-size:16px; line-height:1.9; }
.rich > ul > li::before{ content:""; position:absolute; left:0; top:14px; width:8px; height:2px; background:var(--orange); }
.rich > ol > li{ font-size:16px; line-height:1.9; }
.rich strong{ font-weight:700; }
.rich mark{ background:var(--mark); color:var(--ink); }
.rich .num{ font-family:var(--en); font-weight:700; letter-spacing:-.01em; }
.rich code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:var(--bg-soft); border:1px solid var(--rule); border-radius:3px; padding:1px 5px; }
.rich hr{ border:0; border-top:1px solid var(--rule); margin:40px 0; }
.rich > .lead{ margin-top:0; font-size:18px; line-height:1.9; }
.rich .pull{ margin:34px 0; font-size:21px; line-height:1.8; font-weight:700; }
.rich blockquote{ margin:26px 0; padding:2px 0 2px 20px; border-left:2px solid var(--rule); }
.rich blockquote p{ font-size:16px; line-height:1.9; color:var(--ink-2); }
.rich .pen{ margin:26px 0; padding:16px 20px; background:var(--bg-soft);
  border-left:2px solid var(--orange); border-radius:0 6px 6px 0; }
.rich .pen p{ font-size:16px; line-height:1.85; }
.rich .contact{ margin-top:20px; font-family:var(--en); font-size:18px; font-weight:700; }
.rich .missing{ margin-top:20px; font-size:14px; color:var(--orange-t); }
.tablewrap{ margin-top:26px; overflow-x:auto; }
.rich table{ border-top:1px solid var(--rule); font-size:15px; }
.rich th, .rich td{ padding:12px 14px; border-bottom:1px solid var(--rule);
  line-height:1.7; vertical-align:top; }
.rich th{ background:var(--bg-soft); font-weight:700; white-space:nowrap; }
.rich td:first-child, .rich th:first-child{ padding-left:0; }
.ta-right{ text-align:right; }
.ta-center{ text-align:center; }

/* 集計条件・注記は畳む（仕様どおり `<details>`。開いていないと本文が
   注記で分断される。閉じていれば1行しか場所を取らない） */
.foldnote{ margin:26px 0; background:var(--bg-soft); border:1px solid var(--rule); border-radius:6px; }
.foldnote > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:700; line-height:1.6; color:var(--ink);
}
.foldnote > summary::-webkit-details-marker{ display:none; }
.foldnote > summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--ink-2); }
.foldnote[open] > summary::after{ content:"–"; }
.foldnote__in{ padding:0 18px 16px; }
.foldnote__in p{ font-size:14px; line-height:1.9; color:var(--ink-2); }
.foldnote__in p + p, .foldnote__in ul, .foldnote__in ol{ margin-top:10px; }
.foldnote__in li{ font-size:14px; line-height:1.9; color:var(--ink-2); margin-left:1.3em; }
.foldnote__in ol li{ list-style:decimal; }
.foldnote__in ul li{ list-style:disc; }

/* --- 図の3段階（本文幅 / 1120px の板 / 全幅）------------------------------
   原稿は `@fig <キー> [narrow|wide|full]`。既定は wide（仕様 §7.5）。
   ★`.fig--wide` の左寄せ 244px は「目次の柱180 ＋ 溝64」。
     `.art__body` の列幅を変えたらここも変える（版面がずれる） */
.fig{ margin:44px 0; }
/* ★図は `<picture>`（WebP＋PNGの退路）で包んである（`site/markdown._figure_html`）。
   `display:contents` で**包みの箱を版面から消す**ので、`<img>` は今までどおり
   `.fig` の直接の子として並ぶ（狭い画面の flex の order も効く）。
   選択子だけは `.fig > img` では当たらなくなるので `.fig img` にしてある
   ——`.fig` の中に図以外の `<img>` は無い */
.fig picture{ display:contents; }
.fig img{ width:100%; height:auto; background:#fff;
  border:1px solid var(--rule); border-radius:6px; }
.fig figcaption{ margin-top:12px; max-width:840px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.figtitle{ margin-bottom:12px; font-size:15px; font-weight:700; line-height:1.7;
  padding-left:12px; border-left:3px solid var(--orange); }
/* 図の下の操作（CSV・原寸SVG・拡大）。**1行にまとめる**——別々のブロックに
   すると、図1枚につき灰色の行が3段重なる（2026-09-21 に実際そうなっていた）。
   説明（`figcaption`）とは分け、操作はこの箱だけに集める */
.figtools{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:14px;
}
.figlinks{ font-size:13px; line-height:1.6; }
.figlinks a{ color:var(--blue); }
.csv-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border:1px solid var(--rule); border-radius:6px;
  font-size:13px; font-weight:700; color:var(--blue); background:#fff;
  transition:background-color .22s var(--ease), border-color .22s var(--ease);
}
.csv-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.csv-btn:hover{ background:var(--bg-soft); border-color:#D7DEE9; }
.fig--wide{ width:1120px; margin-left:-244px; }
.fig--full{ width:var(--vw); margin-left:calc((var(--side) + 244px) * -1); }
.fig--full img{ border-radius:0; border-left:0; border-right:0; }
.fig--full figcaption, .fig--full .figtitle, .fig--full .figtools{
  margin-left:calc(var(--side) + 244px);
}
/* 手がかり（cursor と「図を大きく見る」）は**JSが実際に繋いだときだけ**出す。
   `html.js` は静的に書いてあるので、そちらを条件にすると嘘になる */
img.is-zoomable{ cursor:zoom-in; }
.zoombtn{ font-size:13px; line-height:1.6; color:var(--blue); }
.zoombtn:hover{ text-decoration:underline; }

/* 記事の末尾（数え方の2〜3行 → サービス → 広告 → 次に読む） */
.art__foot{ margin-top:52px; padding-top:26px; border-top:1px solid var(--rule); }
.data-note{ font-size:13px; line-height:1.9; color:var(--ink-2); }
.data-note a{ color:var(--blue); }
.art__foot .link-arrow{ margin-top:16px; }
.handoff{ margin-top:40px; background:var(--bg-soft); border:1px solid var(--rule);
  border-radius:6px; padding:26px 28px; }
.handoff .kicker{ margin-bottom:12px; }
.handoff h2{ font-size:20px; }
.handoff p{ margin-top:10px; font-size:15px; line-height:1.85; color:var(--ink-2); }
.handoff .link-arrow{ margin-top:16px; }

/* 転職広告（`site/ad.py`）。**控えめに置く**——版面でいちばん目立つ物が
   広告、という状態を作らない。枠は本文幅より狭くし、罫1本で囲うだけ */
.cta{ margin-top:36px; padding-top:22px; border-top:1px solid var(--rule); }
.cta-label{ display:inline-block; height:20px; padding:0 8px; border-radius:3px;
  background:var(--bg-soft); border:1px solid var(--rule);
  font-size:11px; font-weight:700; line-height:18px; color:var(--ink-2); }
.cta-context{ margin-top:10px; font-size:13px; line-height:1.8; color:var(--ink-2); }
.cta-cre{ display:block; margin-top:12px; max-width:520px; }
.cta-cre-svg{ width:100%; height:auto; border-radius:6px; }
.cta-cre-sp{ display:none; }
/* ★バナーの絵は**インラインSVGで、塗りはCSSが持っている**（`site/ad.py`）。
   第2段で旧CSS（`site/assets.py`）を配るのをやめたとき、この一群だけが
   移植から漏れ、全記事のバナーが**黒い長方形**になっていた（2026-09-21 実測）。
   `fill` の既定が黒なので、**壊れても例外は出ない**。触るときは実物を見ること */
.cta-cre-svg .bg{ fill:var(--navy); }
.cta-cre-svg .tone{ fill:var(--blue); }
.cta-cre-svg .glow{ fill:var(--orange); }
.cta-cre-svg .bar{ fill:var(--navy-2); opacity:.42; }
.cta-cre-svg .bar-hot{ fill:var(--orange); }
.cta-cre-svg .base{ stroke:var(--navy-2); stroke-width:2.4; stroke-linecap:round; opacity:.5; }
.cta-cre-svg .arrow{ stroke:var(--orange); stroke-width:6; fill:none; stroke-linecap:round; }
.cta-cre-svg .arrow-head{ fill:var(--orange); }
.cta-cre-svg text{ font-family:var(--jp); }
.cta-cre-svg .t-strip{ fill:var(--navy-2); font-size:26px; font-weight:700; }
.cta-cre-svg .t-name{ fill:#fff; font-size:56px; font-weight:700; letter-spacing:-.02em; }
.cta-cre-svg .t-lead{ fill:rgba(255,255,255,.88); font-size:22px; }
.cta-cre-svg .t-foot{ fill:var(--navy-2); font-size:21px; }
/* ボタンは**線**。すぐ上のサービスへの案内が塗りなので、同じ形の塗りを2つ縦に
   並べない。★橙を文字に使えるのは**紺の面の上だけ**（5.94:1）。白地へ持ち出さない */
.cta-cre-svg .cta-cre-act rect{ fill:none; stroke:var(--orange); stroke-width:2.5; }
.cta-cre-svg .cta-cre-act text{ fill:var(--orange); font-size:26px; font-weight:700; }
.cta-cre-svg .cta-cre-act .arw{ font-family:var(--en); font-size:28px; }
/* 縦長版は版面が 470px しかない。**同じ px を使うと文字が枠から出る**。
   ここの値は `ad.py` の `_wrap()` の折り幅と対で決まっている */
.cta-cre-sp .t-strip{ font-size:21px; }
.cta-cre-sp .t-name{ font-size:44px; }
.cta-cre-sp .t-lead{ font-size:22px; }
.cta-cre-sp .t-foot{ font-size:21px; }
.cta-cre-sp .cta-cre-act text{ font-size:24px; }
.cta-cre-sp .cta-cre-act .arw{ font-size:26px; }
.cta-cre-svg .cta-cre-act, .cta-cre-svg .arrow, .cta-cre-svg .arrow-head{
  transition:transform .18s var(--ease);
}
.cta-cre:hover .cta-cre-act{ transform:translateY(-2px); }
.cta-cre:hover .arrow, .cta-cre:hover .arrow-head{ transform:translate(8px,-6px); }
@media (prefers-reduced-motion: reduce){ .cta-cre-svg *{ transition:none; } }
.cta-banner{ margin-top:12px; }
.cta-banner img{ max-width:100%; height:auto; }
.cta-px{ position:absolute; width:1px; height:1px; }
.cta-disclosure{ margin-top:10px; font-size:12px; line-height:1.8; color:var(--ink-2); }
/* 記事冒頭の広告表示（ファーストビュー。**消さない**——A8の提携条件と
   景表法のステマ規制がここを見ている） */
/* ★`.rich > p`（0,1,1）に負けて 17px で出ていた——本文と同じ大きさの断りが
   記事の頭に立ち、要点の箱より先に目に入っていた（2026-09-21 実測）。
   セレクタを `p.pr-note` まで上げる。**消さない**（A8の提携条件と景表法） */
p.pr-note, .rich > p.pr-note{ display:flex; align-items:baseline; gap:10px;
  margin-bottom:16px; font-size:12px; line-height:1.8; color:var(--ink-2); }
.pr-badge{ flex:0 0 auto; height:20px; padding:0 8px; border-radius:3px;
  background:var(--bg-soft); border:1px solid var(--rule);
  font-size:11px; font-weight:700; line-height:18px; color:var(--ink-2); }

/* 図の拡大（`<dialog>`。JSが無ければ何も起きない＝SVGのリンクが退路） */
dialog.figzoom{ width:min(1400px, 94vw); max-width:none; max-height:92vh;
  padding:0; border:0; border-radius:6px; background:#fff; overflow:auto; }
dialog.figzoom::backdrop{ background:rgba(10,27,61,.74); }
dialog.figzoom .zbar{ position:sticky; top:0; z-index:2; display:flex; align-items:center;
  gap:16px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--rule);
  font-size:13px; line-height:1.6; color:var(--ink-2); }
dialog.figzoom .zbar button{ margin-left:auto; height:34px; padding:0 14px;
  border:1px solid var(--rule); border-radius:6px; font-size:13px; font-weight:700; color:var(--ink); }
dialog.figzoom .zbar button:hover{ background:var(--bg-soft); }
dialog.figzoom img{ display:block; width:100%; height:auto; }

/* ============================================================
   14d. データで見る（トップの面・一覧・図の個票）
   ============================================================ */
.sec--data{ background:var(--navy); color:#fff; padding:72px 0; }
.data{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:center; }
.data .kicker{ color:#fff; }
.data h2{ color:#fff; margin:14px 0 12px; }
.data__lead{ font-size:16px; line-height:1.9; color:#fff; }
.data__list{ margin:18px 0 26px; display:grid; gap:10px; }
.data__list a{ display:flex; gap:10px; font-size:14px; line-height:1.7; color:var(--navy-2); }
.data__list a::before{ content:""; width:8px; height:2px; background:var(--orange); flex:0 0 8px; margin-top:12px; }
.data__list a:hover{ color:#fff; text-decoration:underline; }
.data__fig{ background:#fff; border-radius:6px; padding:20px 22px 16px; }
.data__fig img{ width:100%; height:auto; }
.data__fig figcaption{ margin-top:10px; font-size:13px; line-height:1.7; color:var(--ink-2); }

/* 一覧は**図そのものを大きく**出す（サムネにしない。700px を割らない） */
.gallery{ display:grid; gap:56px; }
.gitem{ border-top:1px solid var(--rule); padding-top:32px; }
.gitem:first-child{ border-top:0; padding-top:0; }
.gitem__in{ display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; }
.gitem__fig{ min-width:0; background:#fff; border:1px solid var(--rule); border-radius:6px;
  padding:18px 20px 14px; transition:box-shadow .3s var(--ease); }
.gitem__fig img{ width:100%; height:auto; }
a.gitem__fig:hover{ box-shadow:var(--shadow); }
.gitem h2{ font-size:22px; line-height:1.5; }
.gitem h2 a{ color:var(--ink); }
.gitem h2 a:hover{ color:var(--blue); }
.gitem__lead{ margin-top:12px; font-size:15px; line-height:1.85; color:var(--ink-2); }
.gitem__stat{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); }
.gitem__num{ font-family:var(--en); font-size:32px; font-weight:700; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); }
.gitem__num i{ font-style:normal; font-family:var(--jp); font-size:16px; margin-left:3px; }
.gitem__lab{ margin-top:6px; font-size:12px; line-height:1.7; color:var(--ink-2); }
.gitem .link-arrow{ margin-top:18px; }

/* 図の個票 */
.figpage{ background:#fff; border:1px solid var(--rule); border-radius:6px;
  padding:24px 26px 20px; }
.figpage img{ width:100%; height:auto; }
.figmeta{ display:grid; grid-template-columns:1fr 320px; gap:48px; margin-top:40px; align-items:start; }
.figmeta p{ font-size:16px; line-height:1.9; }
/* ★`.figmeta p` は詳細度 (0,1,1) で `.gitem__num` (0,1,0) に勝つ。
   数字だけ 16px に潰れるので、ここで指し直す（実際に潰れていた） */
.figmeta .gitem__num{ font-size:32px; line-height:1.1; }
.figmeta .gitem__lab{ font-size:12px; line-height:1.7; }
.figmeta .note{ margin-top:18px; }
.figside{ background:var(--bg-soft); border:1px solid var(--rule); border-radius:6px; padding:24px 26px; }
.figside h2{ font-size:16px; }
/* 2つ目以降の見出しは、前の塊から離す（詰まると1つの箱に見える） */
.figside h2 ~ h2{ margin-top:24px; padding-top:18px; border-top:1px solid var(--rule); }
.figside .link-arrow{ margin-top:12px; align-items:flex-start; }
.figside .dl{ margin-top:14px; display:grid; gap:8px; }
.figside .dl li{ font-size:14px; line-height:1.7; }
.figside .dl a{ font-weight:700; }
/* 行リスト（仕様 §5.5）。1行1件・下に1pxの罫・hover で地が変わり矢印が動く。
   写真の無い入口（図の個票の「ほかの図」）はこの形で出す——カードにすると
   枠の中を図のサムネで埋めることになり、ラベルが実効3pxまで潰れる */
.rowlist{ border-top:1px solid var(--rule); }
.rowlist__i{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 16px; border-bottom:1px solid var(--rule); color:var(--ink);
  font-size:17px; font-weight:700; line-height:1.6;
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.rowlist__i:hover{ background:#fff; color:var(--blue); }
.rowlist__i:hover .arrow{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(4px); }

.minilist{ margin-top:14px; display:grid; gap:10px; }
.minilist a{ display:flex; gap:10px; font-size:14px; line-height:1.7; color:var(--ink); }
.minilist a::before{ content:""; width:8px; height:2px; background:var(--orange); flex:0 0 8px; margin-top:12px; }
.minilist a:hover{ color:var(--blue); text-decoration:underline; }

/* ============================================================
   14e. 固定ページ（このサイトについて・規約類）と 404
   ============================================================ */
.doc{ display:grid; grid-template-columns:720px 300px; gap:64px;
  padding:8px 0 var(--sec); align-items:start; }
/* 柱の無いページ（規約類）は本文を版面の中央に置く。左寄せのまま 400px 空けない。
   器（`.wrap--doc`）ごと 720px に絞ってあるので、パンくず・題・本文の左端が揃う */
.doc--solo{ grid-template-columns:minmax(0,1fr); }
.wrap--doc{ width:min(720px, 100% - var(--edge) * 2); margin-inline:auto; }
.doc__side{ position:sticky; top:108px; }
.doc__stamp{ margin-top:40px; padding-top:18px; border-top:1px solid var(--rule); }
.nums{ margin-top:16px; display:grid; gap:18px; }
.figside__n .gitem__num{ font-size:26px; }
.notfound{ padding:120px 0 var(--sec); }
.notfound h1{ max-width:16em; }
.notfound p{ margin-top:20px; font-size:17px; line-height:1.95; }
.notfound .hero__btns{ margin-top:30px; }

/* ============================================================
   15. フッター
   ============================================================ */
.ft-tiles{ padding:var(--sec) 0; }
.ft-map{ background:var(--navy); color:#fff; padding:56px 0 44px; }
.ft-map__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 24px; }
.ft-map h2{ font-size:13px; font-weight:700; letter-spacing:.06em; color:#fff; line-height:1.6; }
.ft-map ul{ margin-top:16px; display:grid; gap:11px; }
.ft-map a{ font-size:13px; line-height:1.6; color:var(--navy-2); }
.ft-map a:hover{ color:#fff; text-decoration:underline; }
.ft-btm{
  background:var(--navy); color:var(--navy-2); padding:26px 0 44px;
  border-top:1px solid rgba(255,255,255,.18);
}
.ft-btm__in{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.ft-btm p{ font-size:12px; line-height:1.9; color:var(--navy-2); text-align:right; }

/* ============================================================
   16. 動き
   ============================================================ */
html.js .rv{ opacity:0; transform:translateY(16px); }
html.js .rv.is-in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }

html.js .hero__text .kicker,
html.js .hero__text h1,
html.js .hero__text .hero__lead,
html.js .hero__text .hero__btns,
html.js .hero__text .hero__note{ opacity:0; animation:rise .5s var(--ease) forwards; }
html.js .hero__text .kicker{ animation-delay:.04s; }
html.js .hero__text h1{ animation-delay:.08s; }
html.js .hero__text .hero__lead{ animation-delay:.12s; }
html.js .hero__text .hero__btns{ animation-delay:.16s; }
html.js .hero__text .hero__note{ animation-delay:.20s; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  html.js .rv{ opacity:1; transform:none; }
  html.js .hero__text > *{ opacity:1; animation:none; }
  /* 目次の出し入れは遷移なしで切り替える（上の `transition-duration` は
     `!important` で潰せるが、`visibility` に掛けた**遅延**は残るため） */
  html.js .toc, html.js .toc.is-off{ transition:none !important; }
}

/* ============================================================
   17. 1279px 以下
   ============================================================ */
@media (max-width:1279px){
  :root{ --edge:40px; }
  .hd__nav{ gap:18px; }
  .hd__nav > a{ font-size:14px; }
  .hero__text h1{ font-size:44px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .mega__in{ grid-template-columns:240px 1fr; gap:32px; }
  .mega__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data{ grid-template-columns:280px 1fr; gap:36px; }
  .svc__in{ grid-template-columns:1fr 360px; gap:36px; }
  .lede{ grid-template-columns:260px 1fr; gap:36px; }
  .samples{ grid-template-columns:1fr 240px; }
  .price__give{ width:220px; }
  .samples__inc{ grid-template-columns:repeat(2,1fr); }

  /* 記事本文：目次は題の下に畳む（`<details>`）。図の板は版面いっぱいに戻す */
  .art__body{ grid-template-columns:minmax(0,1fr); gap:0; }
  .art__body > article{ max-width:720px; }
  /* ★`html.js .toc` より**詳細度を上げておく**。素の `.toc` では負けて、
     狭い画面でも追従したままになる（畳んだ目次が画面に貼り付く） */
  .toc, html.js .toc{ position:static; }
  html.js .toc.is-off{ opacity:1; pointer-events:auto; visibility:visible; }
  .toc details{ border:1px solid var(--rule); border-radius:6px; padding:14px 18px; }
  .toc details summary{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; font-size:14px; font-weight:700; list-style:none;
  }
  .toc details summary::-webkit-details-marker{ display:none; }
  .toc details summary::after{ content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--ink-2); }
  .toc details[open] summary::after{ content:"–"; }
  .toc details[open] ol{ margin-top:16px; }
  .toc__t{ display:none; }
  .fig--wide, .fig--full{ width:100%; margin-left:0; }
  .fig--full > img{ border-radius:6px; border:1px solid var(--rule); }
  .fig--full figcaption, .fig--full .figtitle, .fig--full .figtools{ margin-left:0; }

  .doc, .doc--solo{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .doc > .rich{ max-width:720px; }
  .doc__side{ position:static; }
  .gitem__in{ grid-template-columns:1fr 250px; gap:28px; }
  .figmeta{ grid-template-columns:1fr 270px; gap:32px; }
}

/* ============================================================
   17b. 1023px 以下 — 表紙は縦積みに切り替える
   ============================================================ */
@media (max-width:1023px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  .hero__media{ order:-1; min-height:0; height:300px; }
  .hero__media::before{ display:none; }
  .hero__text{ padding:40px var(--edge) 56px; }
  .hero__text h1{ font-size:40px; }
  .banner__text{ max-width:none; padding-right:var(--edge); }
}

/* ============================================================
   18. 767px 以下（スマホ）。**下タブバーは置かない**（仕様 §8）
   ============================================================ */
@media (max-width:767px){
  :root{ --edge:20px; --sec:56px; }
  body{ font-size:16px; }
  h1{ font-size:30px; }
  h2{ font-size:24px; }

  .hd{ height:60px; gap:12px; }
  .lg img{ height:32px; }
  .hd__nav, .hd__cta{ display:none; }
  html.js .hd__burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto; width:44px; height:44px; align-items:center;
  }
  .hd__burger i{ display:block; width:22px; height:2px; background:var(--ink); transition:transform .22s var(--ease), opacity .22s var(--ease); }
  .hd__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hd__burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
  .hd__burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* JSが無い環境ではハンバーガーを出さず、ナビを素のリンクの列として出す */
  html:not(.js) .hd__nav{
    display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 0 auto;
  }
  html:not(.js) .hd{ height:auto; padding-block:12px; flex-wrap:wrap; }
  html:not(.js) .hd__cta{ display:inline-flex; }
  html.js .mega{ display:none !important; }

  html.js .mnav{
    display:block; position:fixed; inset:60px 0 0; background:#fff; z-index:70;
    overflow-y:auto; padding:8px var(--edge) 40px;
  }
  html.js .mnav[hidden]{ display:none; }
  .mnav__row{ border-bottom:1px solid var(--rule); }
  .mnav__row > a{ display:block; padding:18px 0; font-size:22px; font-weight:700; color:var(--ink); line-height:1.5; }
  .mnav__row--x{ display:flex; align-items:center; justify-content:space-between; }
  .mnav__row--x > a{ flex:1 1 auto; }
  .mnav__more{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--ink); }
  .mnav__more::before{ content:"+"; font-size:26px; font-weight:400; line-height:1; }
  .mnav__more[aria-expanded="true"]::before{ content:"–"; }
  .mnav__sub{ display:grid; gap:2px; padding:0 0 16px; }
  .mnav__sub[hidden]{ display:none; }
  .mnav__sub a{ display:block; padding:9px 0 9px 14px; font-size:15px; color:var(--ink-2); border-left:2px solid var(--rule); }
  .mnav .btn{ width:100%; margin-top:28px; }

  .hero__media{ height:240px; }
  .hero__strip{ display:none; }
  .hero__text{ padding:34px var(--edge) 44px; }
  .hero__text h1{ font-size:32px; margin-top:18px; }
  .hero__lead{ font-size:16px; margin-top:16px; }
  .hero__btns{ flex-direction:column; align-items:stretch; margin-top:26px; }
  .hero__btns .btn{ width:100%; }

  .sec__head{ grid-template-columns:1fr; margin-bottom:26px; }
  .sec__head .link-arrow{ grid-column:1; grid-row:auto; margin-top:6px; }
  .grid--4, .grid--3, .grid--2{ grid-template-columns:1fr; }
  .grid{ gap:20px; }
  /* 1列になったら先頭の大カードも1枠。`span 2` を残すと列がはみ出す */
  .card--feature{ grid-column:span 1; }
  .card--feature figure{ aspect-ratio:3/2; }
  .card--feature h3{ font-size:19px; }
  .card--feature .card__body{ padding:18px 20px; }
  .card--lg figure{ aspect-ratio:16/9; }

  .banner{ height:auto; }
  .banner__text{ max-width:none; padding:44px var(--edge); }
  /* 縦組みでは文字が写真の全面に乗るので、上端でも AA を保てる濃さにする */
  .banner::after{ background:linear-gradient(0deg, rgba(10,27,61,.88) 0%, rgba(10,27,61,.76) 100%); }

  .trial{ grid-template-columns:1fr; gap:28px; }
  .trial__sheets{ height:290px; }
  .trial__sheets img{ width:180px; height:255px; }
  .trial__sheets img:first-child{ left:2%; }
  .trial__sheets img:last-child{ left:42%; top:24px; }

  .stats__grid{ grid-template-columns:1fr; }
  .stats__cell{ border-left:0; border-top:1px solid rgba(255,255,255,.18); padding:26px 0 22px; }
  .stats__cell:first-child{ border-top:0; padding-top:0; }
  .stats__num{ font-size:42px; }

  .steps, .steps--2{ grid-template-columns:1fr; gap:20px; }
  .lede{ grid-template-columns:1fr; gap:22px; }
  .subs{ grid-template-columns:1fr; gap:16px; margin-top:32px; }
  .samples__inc{ grid-template-columns:1fr; gap:6px; }

  .price td{ display:block; padding:0; }
  .price tr{ display:grid; grid-template-columns:56px 1fr; gap:6px 14px; padding:18px 0; align-items:start; }
  .price td:first-child{ width:56px; grid-row:1 / span 4; }
  .price img{ width:56px; height:56px; }
  .price td:last-child{ display:none; }
  .price__give{ width:auto; }
  .price__val{ text-align:left; font-size:18px; }

  .svc__in{ grid-template-columns:1fr; gap:26px; }
  .svc__fig{ order:-1; }
  .samples{ grid-template-columns:1fr; gap:16px; }
  .samples__side{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .samples__side figcaption{ display:none; }
  .box{ padding:26px 22px; }

  /* --- 一覧の絞り込みと検索 --- */
  /* ★狭い画面では横に流す。右端で「電池」が切れるだけだと、まだ先があることが
     見えない。画面の右端を白にぼかして**続きがある**と分からせる
     （図の横スクロールには文字の手がかりを置いているが、この行は語が短く
     1行の注記を足すと行が2段になるので、ぼかしで済ませる。2026-09-21） */
  html.js .filters{
    flex-wrap:nowrap; overflow-x:auto; gap:0 18px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  }
  html.js .filters::-webkit-scrollbar{ display:none; }
  .filters button{ white-space:nowrap; }
  .filters button:last-child{ padding-right:20px; }

  /* --- 記事本文 --- */
  .art__cover{ height:220px; }
  .art__head{ padding-top:28px; }
  .art__head h1{ margin-top:14px; }
  .art__body{ padding:28px 0 var(--sec); }
  .rich > h2{ font-size:21px; margin:40px 0 14px; }
  .rich > p{ font-size:16px; }
  .rich .pull{ font-size:18px; }
  /* ★図は縮めない。**横に流す。** 1,120pxの図を390pxに縮めると、9〜11pxの
     ラベルが実効3pxになって完全に読めなくなる（2026-09-20 実測）。
     題・注記・CSVのボタンは `position:sticky; left:0` で画面の左に残す */
  .fig{
    display:flex; flex-direction:column; align-items:flex-start;
    width:100vw; max-width:none; margin:28px 0 28px calc(var(--edge) * -1);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .fig img{ order:2; width:1120px; max-width:none;
    border-radius:0; border-left:0; border-right:0; }
  .fig--narrow img{ width:720px; }
  .fig > .figtitle{
    order:1; position:sticky; left:0; margin-bottom:10px;
    width:calc(100vw - var(--edge) * 2); margin-left:var(--edge);
  }
  .fig::after{
    order:3; content:"横にスクロールすると全体が見えます。";
    display:block; position:sticky; left:0; padding-top:10px;
    width:calc(100vw - var(--edge) * 2); margin-left:var(--edge);
    font-size:12px; line-height:1.7; color:var(--ink-2);
  }
  .fig > figcaption{
    order:4; position:sticky; left:0; margin-top:6px;
    width:calc(100vw - var(--edge) * 2); margin-left:var(--edge);
  }
  .fig > .figtools{
    order:5; position:sticky; left:0; margin-top:12px;
    width:calc(100vw - var(--edge) * 2); margin-left:var(--edge);
  }
  .handoff{ padding:22px 20px; }
  .cta-cre-pc{ display:none; }
  .cta-cre-sp{ display:block; }
  .cta-cre{ max-width:340px; }

  /* --- データで見る --- */
  .data{ grid-template-columns:1fr; gap:26px; }
  /* 図は縮めない。700pxのまま横に流す（350pxに縮めるとラベルが実効5px） */
  .data__fig, .gitem__fig, .figpage{
    display:flex; flex-direction:column;
    padding:14px 0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .data__fig img, .gitem__fig img, .figpage img{ order:1; width:700px; max-width:none; }
  .data__fig::after, .gitem__fig::after, .figpage::after{
    order:2; content:"横にスクロールすると全体が見えます。";
    display:block; position:sticky; left:0; padding-top:8px;
    width:calc(100vw - var(--edge) * 2 - 28px); margin-inline:14px;
    font-size:12px; line-height:1.7; color:var(--ink-2);
  }
  .data__fig figcaption{
    order:3; position:sticky; left:0; margin-top:4px;
    width:calc(100vw - var(--edge) * 2 - 28px); margin-inline:14px;
  }
  /* ★`.figpage` は狭い画面で flex になる。JSが足す「図を大きく見る」の箱は
     `order` を持たないので 0 になり、**図より上**に出ていた（2026-09-21 実測） */
  .figpage .figtools{
    order:4; position:sticky; left:0; margin-top:10px;
    width:calc(100vw - var(--edge) * 2 - 28px); margin-inline:14px;
  }
  .gallery{ gap:40px; }
  .gitem__in, .figmeta{ grid-template-columns:1fr; gap:22px; }
  .gitem h2{ font-size:20px; }

  .doc{ padding-top:0; }
  /* ★1列になると、右の柱（`/about/` の数字3つ）は DOM の順どおり**本文の全部の
     後ろ**に落ちる。看板の数字が「最終更新」の下、5,000px スクロールした先に
     出ていた（2026-09-21 実測）。題のすぐ下へ上げる */
  .doc__side{ order:-1; margin-bottom:8px; }

  .ft-map__grid{ grid-template-columns:repeat(2,1fr); gap:26px 20px; }
  .ft-btm__in{ flex-direction:column; align-items:flex-start; }
  .ft-btm p{ text-align:left; }
}