/* site.css
   値の出典: references/design-tokens.md ／ 部品の寸法: references/components.md ／ 禁止: references/anti-ai-look.md
   印象: 親しみ（地元の工場仲間に相談する雰囲気）。丸いのはボタンだけ、ほかは角0〜4px。影はスマホのメニューだけ。
   決まり: 色・文字・余白・角丸・動きは :root の変数だけを使う。区切り幅は 600 / 900 / 1200 の min-width のみ。
   使わないもの: グラデーション・ぼかし・半透明の地・アイコン・絵文字・明朝・語の途中で折る指定
   2026-11-14 オーナー決定: 「動く要素をふんだんに使う」。ホバーで浮く動き・スクロールで現れる演出（opacity:0 から始まる）は解禁。動きは 23 節にまとめ、動きを減らす設定と「動きを止める」ボタンで全部止まる */

/* ============ 1. 変数（トークン） ============ */
:root {
  /* 色（白＋群青。2026-11-11 に「暖かい白＋橙」から変更。この12色のほかに足さない） */
  --bg: #ffffff;
  --surface: #f3f5f8;
  --line: #d9dee6;
  --ink: #222222;
  --ink-mute: #5c6070;
  --heading: #16183a;
  --cta: #0b1f9c;
  --cta-press: #08177a;
  --danger: #c62828;
  --footer-bg: #10143a;
  --on-dark-mute: #c3c7dc;
  --line-green: #06c755; /* LINEの緑（2026-11-14 追加。LINEのボタンだけに使う） */

  /* 文字 */
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --fs-h1-top: clamp(26px, 4.2vw, 40px);
  --fs-h1: clamp(24px, 3.4vw, 32px);
  --fs-h2: clamp(20px, 2.6vw, 26px);
  --fs-h3: clamp(17px, 1.9vw, 20px);
  --fs-lead: clamp(16px, 1.9vw, 18px);
  --fs-body: 16px;
  --fs-article: 17px;
  --fs-small: 14px;
  --fs-note: 12.5px;
  --fs-label: 13px;
  --fs-btn: 16px;
  --fs-num: 28px;
  --fs-stat: clamp(40px, 6.4vw, 64px);
  --fs-menu-sp: 18px;
  --ls-body: .02em;
  --ls-head: .04em;

  /* 余白 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --section-y: clamp(56px, 7vw, 88px);

  /* 幅 */
  --shell-w: 1120px;
  --prose-w: 720px;
  --measure: 38em;
  --header-h: 60px;

  /* 角丸（2つだけ） */
  --r-sm: 4px;
  --r-pill: 9999px;
  --r-btn: 8px;

  /* 動き（2026-11-14 に解禁。色の変化・メニュー・追従ボタンの出入りに加え、現れる・ホバー・流れる動き） */
  --t-fast: 160ms;
  --t-menu: 240ms;
  --t-reveal: 700ms;
  --t-hover: 200ms;
  --ease: cubic-bezier(.22, .68, 0, 1);
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
}

/* ============ 2. 土台 ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: var(--ls-body);
  color: var(--ink);
  background: var(--bg);
  /* 本文の折り返し */
  word-break: normal;
  line-break: strict;
  overflow-wrap: anywhere;
}

body.is-menu-open { overflow: hidden; }

img, svg { max-width: 100%; height: auto; }

/* 文字リンク: 本文色＋下線。ホバーで差し色（クラスの付いたリンクは各部品で決める） */
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color var(--t-fast) var(--ease);
}
a:where(:not([class])):hover { color: var(--cta); }

p { margin: 0 0 var(--s-4); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }

strong { font-weight: 700; color: var(--heading); }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--heading); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--heading);
  color: var(--bg);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--s-2); }

.shell {
  width: min(calc(100% - 32px), var(--shell-w));
  margin-inline: auto;
}

/* ============ 3. 見出しと文字 ============ */
h1, h2, h3, h4 {
  margin: 0 0 var(--s-6);
  color: var(--heading);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  text-align: left;
  /* 見出しの折り返し: 文節（.ib）の境目だけで折れる */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); line-height: 1.4; }
h2 { font-size: var(--fs-h2); line-height: 1.5; }
h3 { font-size: var(--fs-h3); line-height: 1.5; margin-bottom: var(--s-3); }
h4 { font-size: var(--fs-body); line-height: 1.6; margin-bottom: var(--s-2); }

.h1-top { font-size: var(--fs-h1-top); line-height: 1.4; }

.ib { display: inline-block; }
.nw { white-space: nowrap; }
br.pc { display: none; }
br.sp { display: inline; }

/* 見出し上の小ラベル: トップの最初の画面の1か所だけで使う */
.eyebrow {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-head);
  line-height: 1.5;
  color: var(--ink-mute);
  word-break: keep-all;
}

.lead { font-size: var(--fs-lead); line-height: 1.8; max-width: var(--measure); }
.small { font-size: var(--fs-small); line-height: 1.7; }
.note { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mute); margin: var(--s-3) 0 0; }
.fine { font-size: var(--fs-note); line-height: 1.6; color: var(--ink-mute); }
.measure { max-width: var(--measure); }

.tag,
.badge {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tag {
  display: inline-block;
  padding: 0 var(--s-2);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.8;
}

/* 実測／推定の印 */
.badge {
  display: inline-block;
  padding: 0 var(--s-2);
  border: 1px solid var(--ink-mute);
  border-radius: var(--r-sm);
  color: var(--ink-mute);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.7;
  vertical-align: middle;
}

.list { padding-left: 1.4em; }
.list li { margin-bottom: var(--s-2); }
.list li:last-child { margin-bottom: 0; }

/* 行き先を言葉で書いた文字リンク（矢印は付けない） */
.link-more {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.link-more:hover { color: var(--cta); }

/* ボタンの下・塊の最後に置く文字リンクの行 */
.more { margin: var(--s-6) 0 0; }

/* 主ボタン1つ＋注記＋2つ目の行き先（文字リンク）の塊 */
.action { margin-top: var(--s-8); }
.action .more { margin-top: var(--s-4); }
.prose .action p { margin-bottom: 0; }
.prose .action .note { margin-top: var(--s-3); }
.prose .action .more { margin-top: var(--s-4); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 日本語の折り返し: 短い文は文節で折る（対応しないブラウザは1行目の指定のまま）。段落は最後の行に1〜2字だけ落ちるのを減らす */
h1, h2, h3, h4,
.lead, .note, .fine, .small, .eyebrow,
.post__title, .post__text, .rows__title, .feature__title, .feature__metric,
.cta-block__lead, .cta-block__sub,
.footer-name, .footer-text, .footer-title, .footer-bottom,
.steps p, .rows__body p, .faq summary, .fact dd, .spec dd,
.summary-box__title, .toc__title, .field__help, .form__consent {
  word-break: keep-all;
  word-break: auto-phrase;
}
p, li { text-wrap: pretty; }

/* ============ 4. セクション ============ */
.section { padding-block: var(--section-y); }
/* セクション同士は 1px の線で区切る。面の色が変わる境目には線を引かない */
.section + .section { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--surface + .section,
.section + .section--surface { border-top: 0; }
.section__head { max-width: var(--measure); margin-bottom: var(--s-8); }
.section__head h2 { margin-bottom: var(--s-3); }
.section__head p:last-child { margin-bottom: 0; }
.section__foot { margin-top: var(--s-8); margin-bottom: 0; }
.stack > * + * { margin-top: var(--s-6); }

.page-hero { padding-block: var(--s-12) var(--s-8); }
@media (min-width: 900px) {
  .page-hero { padding-block: var(--s-16) var(--s-12); }
}
.page-hero .lead { margin-bottom: var(--s-6); }
.page-hero .lead:last-child { margin-bottom: 0; }

/* ============ 5. ボタン（1つの塊に1つ） ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: var(--fs-btn);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-hover) var(--ease);
}

.btn--primary {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--bg);
}
.btn--primary:hover { background: var(--cta-press); border-color: var(--cta-press); color: var(--bg); }

/* LINEのボタン: メールのボタンと同じ大きさで並べる。ロゴは使わず文字だけ */
.btn--line { background: var(--line-green); border-color: var(--line-green); color: var(--bg); }
.btn--line:hover { color: var(--bg); opacity: .88; }
.cta-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.cta-pair .btn { width: 100%; padding-inline: var(--s-3); white-space: nowrap; }
.mobile-menu__cta { display: grid; gap: var(--s-3); }
@media (min-width: 600px) {
  .cta-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .cta-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .cta-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 補助ボタン: そこにボタンが1つしか無い場面（404・送信完了など）だけで使う */
.btn--secondary {
  background: var(--bg);
  border-color: var(--heading);
  color: var(--heading);
}
.btn--secondary:hover { background: var(--surface); color: var(--heading); }

/* 大: 52px ／ 中: 48px ／ 小: 44px */
.btn--lg { min-height: 52px; min-width: 220px; }
.btn--md { min-height: 48px; }
.btn--sm { min-height: 44px; }
.btn--block { display: flex; width: 100%; min-width: 0; }

/* ============ 6. ヘッダー（不透明な白・下に常時 1px の線） ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* すりガラス（2026-11-14 オーナー提案）。使えるブラウザだけ半透明にして後ろをぼかす */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 100%;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  min-width: 0;
  color: var(--heading);
  text-decoration: none;
}
.brand__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-head); white-space: nowrap; }
.brand__sub { display: none; font-size: var(--fs-label); font-weight: 400; line-height: 1.3; color: var(--ink-mute); }

.gnav, .site-header__cta { display: none; }

.gnav ul { display: flex; align-items: stretch; gap: var(--s-1); height: 100%; margin: 0; padding: 0; list-style: none; }
.gnav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--s-3);
  border-block: 2px solid transparent;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.gnav a:hover { color: var(--cta); }
.gnav a[aria-current="page"] { color: var(--heading); border-bottom-color: var(--cta); }

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--heading);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--heading);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}
.menu-btn:hover { background: var(--surface); }
/* JS が動くときだけメニューボタンを出す（動かないときはフッターのリンクで足りる） */
.js .menu-btn { display: inline-flex; }

@media (min-width: 900px) {
  .gnav { display: block; height: 100%; }
  .site-header__cta { display: inline-flex; padding-inline: var(--s-6); }
  .js .menu-btn { display: none; }
}
@media (min-width: 1200px) {
  .brand__sub { display: block; }
  .gnav a { padding-inline: var(--s-4); }
  .site-header__cta { padding-inline: 32px; }
}

/* ============ 7. スマホのメニュー（幅900未満）。影を付けるのはここだけ ============ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  padding: 0 var(--s-4) var(--s-8);
  background: var(--bg);
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform var(--t-menu) var(--ease), visibility 0s linear var(--t-menu);
}
.mobile-menu.is-open {
  visibility: visible;
  transform: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--heading) 18%, transparent);
  transition: transform var(--t-menu) var(--ease), visibility 0s;
}
.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.mobile-menu__list { margin: 0 0 var(--s-8); padding: 0; list-style: none; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-menu-sp);
  font-weight: 700;
  text-decoration: none;
}
.mobile-menu__list a[aria-current="page"] { color: var(--heading); text-decoration: underline; text-decoration-color: var(--cta); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.mobile-menu__cta { margin-bottom: var(--s-6); }
.mobile-menu__contact { margin: 0; font-size: var(--fs-small); }

@media (min-width: 900px) {
  .mobile-menu { display: none; }
}

/* ============ 8. ファーストビュー（トップ） ============ */
.hero { padding-block: var(--s-12) var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
.hero h1 { font-size: var(--fs-h1-top); line-height: 1.4; }
.hero .lead { margin-bottom: var(--s-8); }
@media (min-width: 900px) {
  .hero { padding-top: var(--s-16); }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: var(--s-12); }
}

/* 写真の仮置き（作業中の印。公開前に枠ごと外す） */
.photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-mute);
  font-size: var(--fs-small);
  line-height: 1.6;
  text-align: center;
}
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-1-1 { aspect-ratio: 1 / 1; }
.ar-og { aspect-ratio: 1200 / 630; }

/* ============ 9. 横罫線の一覧（困りごと・料金・作ったもの） ============ */
.rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.rows__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-12);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.rows__title { margin: 0; }
.rows__body > :last-child { margin-bottom: 0; }
.rows__body p { margin-bottom: var(--s-3); }
@media (min-width: 900px) {
  .rows__item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding-block: var(--s-8); }
}

/* ============ 10. 横長1件（事例） ============ */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.feature__meta { margin-bottom: var(--s-3); }
.feature__title { margin-bottom: var(--s-4); font-size: var(--fs-h2); line-height: 1.5; }
.feature__metric { margin-bottom: var(--s-6); }
.feature__body > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: var(--s-12); }
}

/* ============ 11. 進め方（順番に意味があるので番号を付ける） ============ */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.steps > li { padding-top: var(--s-4); border-top: 1px solid var(--heading); }
.steps__num { display: block; margin-bottom: var(--s-3); color: var(--ink); font-size: var(--fs-num); font-weight: 700; line-height: 1; letter-spacing: 0; }
.steps h3 { margin-bottom: var(--s-2); }
.steps p { margin: 0; }
@media (min-width: 900px) {
  .steps { gap: var(--s-8); }
  .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============ 12. 項目と中身の表（サービス・事例の数字） ============ */
.spec { margin: 0; border-top: 1px solid var(--line); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-8);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.spec dt { font-weight: 700; color: var(--heading); }
.spec dd { margin: 0; }
.spec dd > :last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .spec__row { grid-template-columns: 10em minmax(0, 1fr); }
}

/* ページ内リンクの一覧 */
.jump { max-width: var(--measure); margin-top: var(--s-8); }
.jump__title { margin: 0 0 var(--s-2); font-weight: 700; color: var(--heading); }
.jump ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.jump li { border-bottom: 1px solid var(--line); }
.jump a { display: flex; align-items: center; min-height: 48px; padding-block: var(--s-2); }

/* ============ 13. コラムの一覧（枠も影も付けない） ============ */
.posts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8) var(--s-6);
  align-items: start;
}
@media (min-width: 600px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.post { display: block; color: var(--ink); text-decoration: none; }
.post__thumb { margin-bottom: var(--s-4); }
.post__meta { margin-bottom: var(--s-2); }
.post__title { margin-bottom: var(--s-2); font-size: var(--fs-h3); line-height: 1.5; }
.post:hover .post__title { text-decoration: underline; text-underline-offset: .2em; }
.post__date { margin-bottom: var(--s-2); font-size: var(--fs-small); color: var(--ink-mute); }
.post__text { margin: 0; }
/* 1本だけの棚は横長に置く（左に絵・右に文）。3列の1つ分だけ埋めて右を空けない */
@media (min-width: 600px) {
  .posts > .post:only-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: repeat(3, auto) 1fr;
    column-gap: var(--s-8);
  }
  .posts > .post:only-child > * { grid-column: 2; }
  .posts > .post:only-child > .post__thumb { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
}

/* ============ 14. 運営者の紹介・書いた人 ============ */
.person { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.person__photo { width: 160px; }
.person h2, .person h3 { margin-bottom: var(--s-3); }
.person p:last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .person { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-8); }
}
.author {
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.author__name { margin: 0 0 var(--s-1); font-weight: 700; color: var(--heading); }
.author p:last-child { margin-bottom: 0; }

/* ============ 15. よくある質問 ============ */
.faq { border-top: 1px solid var(--line); max-width: var(--prose-w); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) 0;
  font-weight: 700;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\FF0B"; flex: none; color: var(--ink-mute); }
.faq details[open] summary::after { content: "\FF0D"; }
.faq__a { padding: 0 0 var(--s-6); }
.faq__a p:last-child { margin-bottom: 0; }

/* ============ 16. 相談ブロック（全ページ共通・最下部。左ぞろえ） ============ */
.cta-block {
  padding-block: var(--section-y);
  background: var(--surface);
}
.cta-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.cta-block h2 { margin-bottom: var(--s-3); }
.cta-block__lead { margin-bottom: 0; max-width: var(--measure); }
.cta-block__sub { margin: var(--s-4) 0 0; font-size: var(--fs-small); color: var(--ink-mute); }
@media (min-width: 900px) {
  .cta-block__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-12); align-items: center; }
}

/* ============ 17. スマホの追従ボタン（不透明な白・上に 1px の線） ============ */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  transition: transform var(--t-menu) var(--ease), visibility 0s;
}
.js .sticky-cta { display: block; }
.sticky-cta.is-hidden {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--t-menu) var(--ease), visibility 0s linear var(--t-menu);
}
@media (min-width: 900px) {
  .js .sticky-cta { display: none; }
}

/* ============ 18. パンくず ============ */
.breadcrumb { padding-block: var(--s-4) 0; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mute); }
.breadcrumb ol { display: flex; flex-wrap: wrap; column-gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
/* 区切りは前の項目の末尾に付ける（次の行の頭に「＞」だけが来ないようにする） */
.breadcrumb li:not(:last-child)::after { content: "\FF1E"; margin-left: var(--s-2); white-space: nowrap; }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--cta); }

/* ============ 19. フッター（地は1色） ============ */
.site-footer {
  padding-block: var(--s-12) var(--s-24);
  background: var(--footer-bg);
  color: var(--bg);
  font-size: var(--fs-small);
}
.site-footer a { color: var(--on-dark-mute); text-underline-offset: .2em; }
.site-footer a:hover { color: var(--bg); }
.site-footer :focus-visible { outline-color: var(--bg); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.footer-name { margin: 0 0 var(--s-2); font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.footer-title { margin: 0 0 var(--s-3); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-head); color: var(--on-dark-mute); }
.footer-list { margin: 0; padding: 0; list-style: none; }
.footer-list li { margin-bottom: var(--s-1); }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-text { margin: 0 0 var(--s-2); color: var(--on-dark-mute); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-mute);
  font-size: var(--fs-note);
  color: var(--on-dark-mute);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-6); margin: 0; padding: 0; list-style: none; }
.footer-bottom ul a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom p { margin: 0; line-height: 1.6; }
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .site-footer { padding-block: var(--s-16) var(--s-8); }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
}

/* ============ 20. コラム記事・事例の本文 ============ */
.prose { max-width: var(--prose-w); margin-inline: auto; font-size: var(--fs-article); }
.prose > h2 { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: var(--s-8); }
.prose p { margin-bottom: var(--s-6); }
.prose ul, .prose ol { margin-bottom: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }
.prose > .photo-ph, .prose > .shot { margin-bottom: var(--s-12); }
.prose .action { margin-bottom: var(--s-6); }

.article-head { max-width: var(--prose-w); margin-inline: auto; padding-block: var(--s-8) var(--s-6); }
.article-head h1 { margin-bottom: var(--s-4); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-6); font-size: var(--fs-small); color: var(--ink-mute); }
.article-body { padding-bottom: var(--section-y); }
.article-body + .section { border-top: 1px solid var(--line); }

/* 要点: 記事の中で面で囲むのはここだけ */
.summary-box {
  max-width: var(--prose-w);
  margin: 0 auto var(--s-6);
  padding: var(--s-6);
  background: var(--surface);
  border-radius: var(--r-sm);
  font-size: var(--fs-body);
}
/* 目次: 上下の線だけ */
.toc {
  max-width: var(--prose-w);
  margin: 0 auto var(--s-12);
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
  font-size: var(--fs-body);
}
.summary-box__title, .toc__title { margin: 0 0 var(--s-3); font-size: var(--fs-body); font-weight: 700; color: var(--heading); line-height: 1.5; }
.summary-box ul, .toc ol { margin: 0; padding-left: 1.4em; }

/* 記事の中の関連事例: 上下の線だけ */
.inline-case {
  margin: var(--s-12) 0;
  padding-block: var(--s-6);
  border-block: 1px solid var(--line);
  font-size: var(--fs-body);
}
.inline-case__title { font-weight: 700; color: var(--heading); }
.inline-case p { margin: 0 0 var(--s-3); }
.inline-case p:last-child { margin-bottom: 0; }

/* 広い画面: 左に本文・右に目次（読み進めても付いてくる）。題・本文・相談の帯の左端がそろう */
@media (min-width: 1200px) {
  .article-head { max-width: none; }
  .article-head h1 { max-width: var(--prose-w); }
  .article-body {
    display: grid;
    grid-template-columns: minmax(0, var(--prose-w)) minmax(220px, 1fr);
    column-gap: var(--s-16);
    align-items: start;
  }
  .article-body > * { grid-column: 1; margin-inline: 0; }
  .article-body > .toc {
    grid-column: 2;
    grid-row: 1 / span 40;
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    max-height: calc(100vh - var(--header-h) - var(--s-12));
    overflow-y: auto;
    margin: 0;
  }
}

/* 事例: 確認済みの変化（上の線＋行の線で組む表） */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin: 0 0 var(--s-6); }
.fact { border-top: 1px solid var(--heading); font-size: var(--fs-body); }
.fact__title { margin: 0; padding-block: var(--s-3); font-weight: 700; color: var(--heading); border-bottom: 1px solid var(--line); }
.fact dl { margin: 0; }
.fact__row {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.fact dt { font-size: var(--fs-small); color: var(--ink-mute); }
.fact dd { margin: 0; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 枠なしの2列 */
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8) var(--s-12); }
.cols-2 ul { margin-bottom: 0; }
@media (min-width: 600px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ 21. フォーム ============ */
/* 質問・相談: 狭い画面は「よくある質問→フォーム」の順、広い画面は左にフォーム・右によくある質問 */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-16); align-items: start; }
@media (min-width: 1200px) {
  .contact-cols { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .contact-cols__form { grid-column: 1; grid-row: 1; }
  .contact-cols__faq { grid-column: 2; grid-row: 1; }
}
.form { display: grid; gap: var(--s-6); max-width: var(--prose-w); }
.field label, .field .field__label { display: block; margin-bottom: var(--s-2); font-weight: 700; color: var(--heading); }
.field__req, .field__opt { margin-left: var(--s-2); font-size: var(--fs-label); font-weight: 700; }
/* 「必須」: 赤は入力の誤りだけに使うので、文字色＋細い枠線で示す */
.field__req { padding: 0 var(--s-2); border: 1px solid var(--heading); border-radius: var(--r-sm); color: var(--heading); line-height: 1.7; vertical-align: middle; }
.field__opt { color: var(--ink-mute); }
.field__help { margin: 0 0 var(--s-2); font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.7; }
.input, .textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink-mute);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}
.textarea { min-height: 160px; resize: vertical; }
.input:focus-visible, .textarea:focus-visible { outline: 3px solid var(--heading); outline-offset: 2px; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }
.field__error { margin: var(--s-2) 0 0; font-size: var(--fs-small); line-height: 1.7; color: var(--danger); }
.form__error { padding: var(--s-4); border: 1px solid var(--danger); border-radius: var(--r-sm); color: var(--danger); }
.form__consent { margin: 0; font-size: var(--fs-small); color: var(--ink-mute); }
/* 書きかけを戻したときの1行（docs/フォームの操作_2026-11-11.md） */
.form__restored { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-sm); font-size: var(--fs-small); }
.form__clear { margin-left: var(--s-2); padding: var(--s-2) var(--s-1); border: 0; background: none; font: inherit; color: var(--cta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.form__clear:focus-visible { outline: 3px solid var(--heading); outline-offset: 2px; }
/* 送信中はボタンを押せなくする */
.btn[disabled] { opacity: .6; cursor: wait; }
.btn--primary[disabled]:hover { background: var(--cta); border-color: var(--cta); }
.form__stub { max-width: var(--prose-w); padding: var(--s-4); background: var(--surface); border-radius: var(--r-sm); font-size: var(--fs-small); }
.form__stub + .note { margin-bottom: var(--s-4); }
/* 見えない罠の欄（人には見えない。入っていたら捨てる） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ 21b. 制作実績（数字の帯・一覧） ============ */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin: 0 0 var(--s-8); padding: var(--s-8) var(--s-6); border-radius: var(--r-sm); background: var(--cta); color: var(--bg); }
.stats__label { margin: 0 0 var(--s-1); font-size: var(--fs-small); font-weight: 700; color: var(--on-dark-mute); }
.stats__value { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--bg); }
.stats__num { margin-inline: var(--s-1); font-size: var(--fs-stat); letter-spacing: 0; }
.stats__trio { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); margin: var(--s-6) 0 0; }
.stats__trio dt { font-size: var(--fs-small); color: var(--on-dark-mute); }
.stats__trio dd { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; color: var(--bg); }
.stats__note { margin: var(--s-6) 0 0; font-size: var(--fs-note); color: var(--on-dark-mute); }
.sub-head { margin: var(--s-8) 0 var(--s-4); font-size: var(--fs-h3); line-height: 1.5; color: var(--heading); }
.numcards--words .numcard__before, .numcards--words .numcard__after { white-space: normal; }
.numcards--words .numcard__after { font-size: var(--fs-h3); line-height: 1.5; }
@media (min-width: 900px) {
  .stats { padding: var(--s-12); }
}

/* ============ 21b-2. トップ: 画面の4枚組・相談できること ============ */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.shots__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; background: var(--bg); border: 1px solid var(--line); }
.topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.topic { padding: var(--s-6); border-top: 2px solid var(--cta); border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--bg); }
.topic__no { margin: 0 0 var(--s-3); font-size: var(--fs-num); font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--cta); }
.topic__title { margin: 0 0 var(--s-3); font-size: var(--fs-h3); line-height: 1.5; }
.topic__text { margin: 0; }
@media (min-width: 900px) {
  .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

/* 記事の中の表: 罫線だけ。狭い画面でも横にはみ出さない */
.plain-table { width: 100%; margin: 0 0 var(--s-6); border-collapse: collapse; font-size: var(--fs-small); line-height: 1.7; table-layout: fixed; }
.plain-table th, .plain-table td { padding: var(--s-3); border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.plain-table th { background: var(--surface); color: var(--heading); font-weight: 700; }

/* ============ 21c. 数字のカード（トップと制作実績の上の段） ============ */
.numcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.numcard { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-4) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.numcard__title { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--heading); word-break: keep-all; word-break: auto-phrase; }
.numcard__time { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; }
.numcard__before { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-mute); text-decoration: line-through; white-space: nowrap; }
.numcard__after { font-size: var(--fs-h1-top); font-weight: 700; line-height: 1.3; color: var(--cta); white-space: nowrap; }
.numcard__link { display: flex; align-items: center; min-height: 44px; margin-top: auto; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.numcard__link:hover { color: var(--cta); }
.numcards__foot { margin: 0; font-size: var(--fs-small); color: var(--ink-mute); }
@media (min-width: 600px) {
  .numcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .numcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numcards--words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 制作実績の一覧: 表をやめた軽い並び */
.case-item, #other { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.case-item__sub { margin: var(--s-6) 0 var(--s-1); font-size: var(--fs-small); font-weight: 700; color: var(--ink-mute); }
.case-item__title + .case-item__sub { margin-top: 0; }
.case-item__body p { margin-bottom: var(--s-2); }
.case-effect { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0 0 var(--s-2); line-height: 1.4; }
.case-effect--words { display: block; }
.case-effect__before { font-size: var(--fs-body); color: var(--ink-mute); text-decoration: line-through; white-space: nowrap; }
.case-effect__after { font-size: var(--fs-h1-top); font-weight: 700; color: var(--cta); white-space: nowrap; }
.case-effect--words { font-size: var(--fs-body); line-height: 1.7; color: var(--heading); }

/* コラムのカード（上に画像16:9・下に題と日付。枠線1px・角丸4px・影なし） */
.posts--cards .post { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg); }
.posts--cards .post__thumb { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin: 0; border-bottom: 1px solid var(--line); }
.posts--cards .post__title { margin: 0; padding: var(--s-4) var(--s-4) var(--s-2); }
.posts--cards .post__date { margin: 0; padding: 0 var(--s-4) var(--s-4); }
.posts--cards .post:hover .post__title { color: var(--cta); }
@media (min-width: 600px) {
  .posts--cards > .post:only-child { grid-column: auto; display: block; }
  .posts--cards > .post:only-child > * { grid-column: auto; }
}

/* 運営会社の欄（トップ） */
.company { max-width: var(--prose-w); }
.company > p { color: var(--ink-mute); }

/* 図（画像＋下の説明文） */
.fig { margin: 0; }
.fig__img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.fig__cap { margin-top: var(--s-2); color: var(--ink-mute); font-size: var(--fs-small); line-height: 1.6; }
.prose > .fig { margin-bottom: var(--s-12); }

/* ============ 22. 色の帯と数字（2026-11-14 オーナー決定「色と数字＋後で写真」） ============ */
/* 下層ページの頭: パンくずと見出しを薄い色の帯にする */
.breadcrumb { background: var(--surface); }
.page-hero { background: var(--surface); }

/* 年表: 年を差し色で大きく */
.spec--timeline dt { font-size: var(--fs-h3); line-height: 1.5; letter-spacing: 0; color: var(--cta); }

/* 制作実績の一覧: 広い画面では画像と説明を横に並べる */
.case-list { margin: 0; padding: 0; list-style: none; }
.case-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-12); border-top: 1px solid var(--line); }
.case-item:first-child { padding-top: 0; border-top: 0; }
.case-item__media { margin: 0; }
.case-item__media .shot { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; border: 1px solid var(--line); }
.case-item__no { margin: 0 0 var(--s-2); font-size: var(--fs-small); font-weight: 700; color: var(--cta); }
@media (min-width: 900px) {
  .case-item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-12); align-items: start; }
}

/* よくある質問: 質問の頭に Q */
.faq summary { justify-content: flex-start; }
.faq summary::before { content: "Q"; flex: none; font-size: var(--fs-h3); line-height: 1; letter-spacing: 0; color: var(--cta); }
.faq summary::after { margin-left: auto; }

/* 最下部のお問い合わせ: 差し色の帯。ボタンは白に反転 */
.cta-block { background: var(--cta); color: var(--bg); }
.cta-block h2 { color: var(--bg); }
.cta-block .note, .cta-block__sub { color: var(--on-dark-mute); }
.cta-block a:not(.btn) { color: var(--bg); }
.cta-block .btn--primary { background: var(--bg); border-color: var(--bg); color: var(--cta); }
.cta-block .btn--primary:hover { background: var(--surface); border-color: var(--surface); color: var(--cta-press); }
.cta-block :focus-visible { outline-color: var(--bg); }

/* ============ 23. 動き（2026-11-14 オーナー決定「動く要素をふんだんに使う」で解禁） ============
   決まり: 動かすのは transform（translate・scale を含む）と opacity だけ。時間は :root の --t-reveal・--t-hover、イージングは --ease。
   隠した初期状態は html.js-motion の下だけ（js-motion は <head> の motion-boot.js が、動きを減らす設定でなく「動きを止める」も押されていないときだけ付ける）。
   一番下の @media (prefers-reduced-motion: reduce) と html.motion-off で、動き続けるものを止め、現れる演出は表示済みにする。 */

/* 横スクロールを出さない（左右から入る要素・はみ出す飾りの保険。clip は position: sticky を壊さない） */
main { overflow-x: clip; }

/* ---- A1. スクロールで現れる（JS が data-reveal を付け、見えたら is-in を付ける） ---- */
html.js-motion:not(.motion-off) [data-reveal] {
  --rv-d: calc(var(--i, 0) * 90ms);
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease) var(--rv-d), translate var(--t-reveal) var(--ease) var(--rv-d), scale var(--t-reveal) var(--ease) var(--rv-d);
}
html.js-motion:not(.motion-off) [data-reveal="up"],
html.js-motion:not(.motion-off) [data-reveal="left"],
html.js-motion:not(.motion-off) [data-reveal="right"] { translate: 0 28px; }
html.js-motion:not(.motion-off) [data-reveal="zoom"] { scale: .96; }
@media (min-width: 900px) {
  html.js-motion:not(.motion-off) [data-reveal="left"] { translate: -40px 0; }
  html.js-motion:not(.motion-off) [data-reveal="right"] { translate: 40px 0; }
}
html.js-motion:not(.motion-off) [data-reveal].is-in,
html.js-motion:not(.motion-off) [data-reveal-group].is-in > [data-reveal] {
  opacity: 1;
  translate: none;
  scale: none;
}
/* カードは「現れる」と「ホバー」の両方の transition を持つ */
html.js-motion:not(.motion-off) .topic[data-reveal],
html.js-motion:not(.motion-off) .numcard[data-reveal],
html.js-motion:not(.motion-off) .posts--cards .post[data-reveal] {
  transition: opacity var(--t-reveal) var(--ease) var(--rv-d), translate var(--t-reveal) var(--ease) var(--rv-d), scale var(--t-reveal) var(--ease) var(--rv-d), transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

/* ---- A2. トップの最初の画面の入り方（CSS だけ。backwards なので終わったあとはホバー等の transform を邪魔しない） ---- */
.ib__in { display: inline-block; }
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes line-up { from { transform: translateY(110%); } }
@keyframes shot-in { from { opacity: 0; transform: scale(.9); } }
html.js-motion:not(.motion-off) .hero h1 .ib { clip-path: inset(0); }
html.js-motion:not(.motion-off) .hero h1 .ib__in { animation: line-up 600ms var(--ease) backwards; }
html.js-motion:not(.motion-off) .hero h1 .ib:nth-child(2) .ib__in { animation-delay: 120ms; }
html.js-motion:not(.motion-off) .hero h1 .ib:nth-child(3) .ib__in { animation-delay: 240ms; }
html.js-motion:not(.motion-off) .hero .lead { animation: rise-in 600ms var(--ease) 450ms backwards; }
html.js-motion:not(.motion-off) .hero .hero__text .btn { animation: rise-in 600ms var(--ease) 600ms backwards; }
html.js-motion:not(.motion-off) .shots__img { animation: shot-in 600ms var(--ease) 300ms backwards; }
html.js-motion:not(.motion-off) .shots__cell:nth-child(2) .shots__img { animation-delay: 420ms; }
html.js-motion:not(.motion-off) .shots__cell:nth-child(3) .shots__img { animation-delay: 540ms; }
html.js-motion:not(.motion-off) .shots__cell:nth-child(4) .shots__img { animation-delay: 660ms; }

/* ---- A3. 数字が数え上がる（JS）。数えている間に幅が動かない ---- */
.stats__num { font-variant-numeric: tabular-nums; }

/* ---- A4. 数字カードの強調（現れた直後に落ち着く） ---- */
@keyframes pop-in { from { transform: scale(1.12); } }
html.js-motion:not(.motion-off) .numcards.is-in .numcard__after {
  transform-origin: left center;
  animation: pop-in 400ms var(--ease) calc(var(--i, 0) * 90ms + 600ms) backwards;
}

/* ---- A5. 見出しの下線が引かれる（JS が動かないとき・動きを止めたときは最初から48px） ---- */
.section__head h2 { position: relative; }
.section__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--s-2) * -1);
  width: 48px;
  height: 3px;
  background: var(--cta);
  transform-origin: left;
}
html.js-motion:not(.motion-off) .section__head[data-reveal] h2::after {
  transform: scaleX(0);
  transition: transform 500ms var(--ease) 300ms;
}
html.js-motion:not(.motion-off) .section__head[data-reveal].is-in h2::after { transform: scaleX(1); }

/* ---- A6. よくある質問を開いたとき ---- */
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } }
.faq details[open] .faq__a { animation: faq-open 250ms var(--ease); }

/* ---- B. マウスを乗せたとき（タッチでは何も起きない） ---- */
.topic, .numcard, .posts--cards .post { transition: transform var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.posts--cards .post__thumb { transition: transform var(--t-hover) var(--ease); }
.link-more, .numcard__link { transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); }
@media (hover: hover) and (min-width: 900px) {
  .topic:hover, .numcard:hover, .posts--cards .post:hover { border-color: var(--cta); }
  .link-more:hover, .numcard__link:hover { text-decoration-color: var(--cta); }
}
@media (hover: hover) and (min-width: 900px) {
  html:not(.motion-off) .topic:hover, html:not(.motion-off) .numcard:hover, html:not(.motion-off) .posts--cards .post:hover { transform: translateY(-4px); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: none; }
  .posts--cards .post:hover .post__thumb { transform: scale(1.04); }
}

/* ---- C1. 回路の線を信号が流れる飾り（2026-11-14 回る輪から差し替え） ---- */
@keyframes sig-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.deco { position: absolute; z-index: 0; pointer-events: none; }
.deco .circuit { display: block; width: 100%; height: auto; }
.deco .circuit__trace { opacity: .55; }
.deco .circuit__sig { stroke-dasharray: 7 93; animation: sig-run 6s linear infinite; }
.deco .circuit__sig--2 { animation-duration: 8s; animation-delay: -3s; }
.deco .circuit__sig--3 { animation-duration: 4.5s; animation-delay: -1s; }
.deco .circuit__sig--4 { animation-duration: 7s; animation-delay: -5s; }
.deco .circuit__sig--5 { animation-duration: 5.5s; animation-delay: -2s; }
.deco .circuit__sig--6 { animation-duration: 4s; animation-delay: -2.5s; }
.deco--hero-sm .circuit, .deco--cta-sm .circuit { transform: scale(-1, -1); }

.hero, .page-hero, .stats, .cta-block { position: relative; overflow: clip; }
.hero__grid, .page-hero .shell, .stats__item, .cta-block__inner { position: relative; z-index: 1; }

.deco--hero-lg { width: 320px; right: -120px; top: -90px; color: var(--cta); opacity: .1; --spin: 40s; }
.deco--hero-sm { width: 200px; left: -60px; bottom: -60px; color: var(--cta); opacity: .16; --spin: 24s; }
.deco--stats { width: 300px; right: -90px; top: 50%; margin-top: -150px; color: var(--bg); opacity: .16; --spin: 30s; }
.deco--cta-lg { width: 380px; left: -120px; bottom: -170px; color: var(--bg); opacity: .12; --spin: 36s; }
.deco--cta-sm { width: 180px; right: -40px; top: -50px; color: var(--bg); opacity: .14; --spin: 20s; }
.deco--page { width: 260px; right: -60px; top: 50%; margin-top: -130px; color: var(--cta); opacity: .12; --spin: 32s; }
@media (min-width: 600px) {
  .deco--hero-lg { width: 560px; right: -200px; top: -160px; opacity: .14; }
}

/* 画面の外にある動き続けるものは止める（JS が親に is-paused を付ける） */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* ---- C2. 流れ続けるツール名の帯 ---- */
.ticker { overflow: hidden; padding-block: var(--s-4); background: var(--heading); color: var(--bg); }
.ticker__inner { display: flex; width: max-content; animation: ticker-move 30s linear infinite; }
.ticker__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; }
.ticker__list li { display: flex; align-items: center; margin: 0 var(--s-12) 0 0; white-space: nowrap; }
.ticker__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: var(--s-4); background: var(--on-dark-mute); }
.ticker:hover .ticker__inner { animation-play-state: paused; }
@keyframes ticker-move { to { transform: translateX(-50%); } }
@media (min-width: 600px) {
  .ticker__inner { animation-duration: 45s; }
}

/* ---- C3. 最初の画面の4枚が浮く動きは 2026-11-14 に外した ---- */
.shots__cell { min-width: 0; }

/* ---- C4. 下へ促す線（900px 以上だけ） ---- */
.hero__cue { display: none; }
@keyframes cue-flow { from { transform: translateY(-16px); } to { transform: translateY(48px); } }
@media (min-width: 900px) {
  .hero__cue { display: block; position: absolute; left: 50%; bottom: var(--s-4); width: 1px; height: 48px; overflow: hidden; background: var(--line); }
  .hero__cue::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--cta); animation: cue-flow 1.8s ease-in-out infinite; }
}

/* ---- C5. 問い合わせボタン2つの波紋は 2026-11-14 に外した（この2つには動きを付けない） ---- */
.cta-pair .btn:hover, .cta-pair .btn:active { transform: none; }

/* ---- 「動きを止める」ボタン（フッター最下段。フッターのリンクと同じ見た目の文字ボタン） ---- */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark-mute);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.motion-toggle:hover { color: var(--bg); }
.motion-toggle:focus-visible { outline-color: var(--bg); }

/* ---- 動きを減らす設定の人・「動きを止める」を押した人: 動き続けるものは止め、現れる演出は表示済みにする ---- */
@media (prefers-reduced-motion: reduce) {
  html:not(.js-motion) .deco .circuit__sig, html:not(.js-motion) .shots__cell, html:not(.js-motion) .shots__img, html:not(.js-motion) .ticker__inner, html:not(.js-motion) .hero__cue::after,
  html:not(.js-motion) .faq details[open] .faq__a, html:not(.js-motion) .numcards .numcard__after, html:not(.js-motion) .hero .lead, html:not(.js-motion) .hero .hero__text .btn, html:not(.js-motion) .hero h1 .ib__in { animation: none !important; }
  html:not(.js-motion) [data-reveal], html:not(.js-motion) .section__head h2::after, html:not(.js-motion) .topic, html:not(.js-motion) .numcard, html:not(.js-motion) .post, html:not(.js-motion) .post__thumb, html:not(.js-motion) .btn, html:not(.js-motion) .link-more, html:not(.js-motion) .numcard__link { transition: none !important; }
  html:not(.js-motion) [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  html:not(.js-motion) .section__head h2::after { transform: none !important; }
  html:not(.js-motion) .ticker__list[aria-hidden="true"] { display: none; }
  html:not(.js-motion) .ticker__inner { display: block; width: auto; }
  html:not(.js-motion) .ticker__list { flex-wrap: wrap; row-gap: var(--s-2); width: min(calc(100% - 32px), var(--shell-w)); margin-inline: auto; }
  html:not(.js-motion) .ticker__list li { white-space: normal; word-break: keep-all; word-break: auto-phrase; }
}
html.motion-off .deco .circuit__sig, html.motion-off .shots__cell, html.motion-off .shots__img, html.motion-off .ticker__inner,
html.motion-off .hero__cue::after,
html.motion-off .faq details[open] .faq__a, html.motion-off .numcards .numcard__after,
html.motion-off .hero .lead, html.motion-off .hero .hero__text .btn, html.motion-off .hero h1 .ib__in { animation: none !important; }
html.motion-off [data-reveal], html.motion-off .section__head h2::after { transition: none !important; }
html.motion-off [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
html.motion-off .section__head h2::after { transform: none !important; }
html.motion-off .ticker__list[aria-hidden="true"] { display: none; }
html.motion-off .ticker__inner { display: block; width: auto; }
html.motion-off .ticker__list { flex-wrap: wrap; row-gap: var(--s-2); width: min(calc(100% - 32px), var(--shell-w)); margin-inline: auto; }
html.motion-off .ticker__list li { white-space: normal; word-break: keep-all; word-break: auto-phrase; }

/* 最下部の問い合わせ: 1200px以上はボタン2つを横に並べるので、右の列を広げる（上の 3fr:2fr より後ろに書く） */
@media (min-width: 1200px) {
  .cta-block__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}