/* 本田政邦 個人サイト（mhonda.com）
   2026-10-12 デザイン刷新。基準は context/design-rules-web.md（GRAVITY・SHIFTで決めた2026年の傾向の採り方）。
   - 採る：太く階層のはっきりした見出し、区画ごとのカード（ベントーグリッド）、広い余白、絞った色数。
   - 見送る：半透明の重ね、グラデーション、3D、スクロール連動の動き。ヘッダー・固定ボタンも不透明。
   - 色は「ベース・文字・アクセント」の3役。アクセントは主な操作（ご相談ボタン）と手順の番号だけに使う。
     文中リンクは同じ緑の文字＋下線（色だけで区別しない）。
   - コントラスト比（計算済み）：本文14.7:1、補足7.0:1以上、ボタン白文字7.9:1。ダークモードも全て7:1以上。
   - 角丸8px、余白は 8／24／32／40px を基本にする。 */

:root {
  /* 2026-11-01 Material 3 の配色「墨」（#3a4149 を元の色に、公式の計算部品 material-color-utilities で算出。本田決定で緑ベースをやめた）。
     地・線・文字は TonalSpot の neutral、ボタン・ラベルは元の色のトーナルパレット（ボタンは元の色のまま、押したときはトーン17）。
     コントラスト比：本文15.4:1、補足8.4:1、ボタン10.3:1、リンク9.3:1（リンクは下線で区別） */
  --base: #f1f3f9;
  --surface: #ffffff;
  --line: #c2c7cf;
  --text: #181c20;
  --text-sub: #42474e;
  --accent: #3a4149;
  --accent-hover: #242b32;
  --on-accent: #ffffff;

  --radius: 8px;
  --s1: 8px;
  --s2: 24px;
  --s3: 32px;
  --s4: 40px;
  --header-h: 60px;

  /* 2026-11-01 動きの曲線（Material 3 の easing トークン） */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-dec: cubic-bezier(0, 0, 0, 1);
  --ease-standard-acc: cubic-bezier(0.3, 0, 1, 1);
  --ease-emph-dec: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emph-acc: cubic-bezier(0.3, 0, 0.8, 0.15);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #101418;
    --surface: #181c20;
    --line: #42474e;
    --text: #e0e2e8;
    --text-sub: #c2c7cf;
    --accent: #c0c7d1;
    --accent-hover: #dce3ed;
    --on-accent: #2a3139;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
  word-break: auto-phrase;
}

.nw { white-space: nowrap; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { top: 8px; }

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--s2);
}

/* ---- ヘッダー（上部固定・不透明） ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--base);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.gnav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
}
.gnav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 700;
}
.gnav a:hover { color: var(--accent); text-decoration: underline; }

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  border: 2px solid var(--accent);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover { color: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.gnav .btn { min-height: 40px; padding: 6px 16px; color: var(--on-accent); }
.gnav .btn:hover { color: var(--on-accent); text-decoration: none; }

/* ---- ファーストビュー ---- */
.hero { padding: 56px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: center;
}
.label {
  font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  color: var(--text-sub);
  text-transform: uppercase;
}
.hero-name {
  font-size: clamp(2.5rem, 7vw, 4rem);
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-top: var(--s1);
}
.hero-kana {
  margin-top: 4px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.08em;
}
.hero-roles {
  list-style: none;
  margin-top: var(--s2);
  display: grid;
  gap: 2px;
  font-weight: 700;
}
.hero-lead {
  margin-top: var(--s2);
  font-size: 1.0625rem;
}
.hero-cta {
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ---- 区画・見出し ---- */
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--line); }
.sec-title {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  margin-top: 4px;
}
.sec-lead {
  margin-top: 12px;
  color: var(--text-sub);
  max-width: 44em;
}
.sec-head { margin-bottom: var(--s3); }
.sub-title {
  font-size: 1.125rem;
  margin: var(--s3) 0 12px;
}
.sub-title:first-child { margin-top: 0; }

/* ---- ご相談いただけること（ベントー） ---- */
.services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.service {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
  grid-column: span 2;
}
.service.wide { grid-column: span 3; }
.service h3 { font-size: 1.125rem; }
.service p { margin-top: var(--s1); color: var(--text-sub); }
.note {
  margin-top: var(--s2);
  color: var(--text-sub);
}

/* ---- 依頼の流れ（番号付き） ---- */
.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--s3);
}
.step {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
}
.step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.step h3, .step h4 { font-size: 1.0625rem; }
.step p { margin-top: 6px; color: var(--text-sub); font-size: 0.9375rem; }
.cta-row { margin-top: var(--s3); text-align: center; }

/* ---- 講演・登壇 ---- */
.talks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.talk {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px var(--s2);
}
.talk.feature { grid-column: 1 / -1; }
.talk-date {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-sub);
}
.talk-title {
  display: block;
  margin-top: 4px;
  font-weight: 700;
}
.talk-host {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--text-sub);
}

/* ---- 表（経歴・委員歴・執筆） ---- */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 var(--s2);
}
.table-row {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
}
.table-row + .table-row { border-top: 1px solid var(--line); }
.table dt {
  font-weight: 700;
  color: var(--text-sub);
  font-size: 0.9375rem;
}

/* ---- プロフィール素材 ---- */
.kit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
}
.box + .box { margin-top: 16px; }
.kit-part + .kit-part { margin-top: var(--s3); }
.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.box-head h3 { font-size: 1.125rem; }
.plain-list { list-style: none; display: grid; gap: 4px; }
.prose p + p { margin-top: 1em; }
.copy {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.copy:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.photos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.photos a { display: block; border-radius: var(--radius); }
.photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.photo-cap {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* ---- 最後のお問い合わせ ---- */
.contact-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s4);
  text-align: center;
}
.contact-box p { margin-top: 12px; color: var(--text-sub); }
.contact-box p.label { margin-top: 0; } /* 枠の上下の余白をそろえる */
.contact-box .btn { margin-top: var(--s2); min-width: 280px; }

/* ---- フッター ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0;
  font-size: 0.875rem;
  color: var(--text-sub);
}
.foot-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 12px;
}

/* ---- スマートフォン下部の固定ボタン（不透明） ---- */
.mobile-cta { display: none; }

/* ---- タブレット ---- */
@media (max-width: 900px) {
  .gnav li:not(:last-child) { display: none; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service, .service.wide { grid-column: span 1; }
  .cols, .kit { grid-template-columns: minmax(0, 1fr); }
}

/* ---- スマートフォン ---- */
@media (max-width: 640px) {
  :root { --header-h: 56px; }
  .wrap { padding: 0 16px; }
  .gnav { display: none; }
  .hero { padding: var(--s3) 0 var(--s4); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .hero-photo { order: -1; max-width: 180px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .section { padding: var(--s4) 0; }
  .services { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .talks { grid-template-columns: minmax(0, 1fr); }
  .table { padding: 0 16px; }
  .table-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
  .box { padding: 20px 16px; }
  .contact-box { padding: var(--s3) 16px; }
  .contact-box .btn { min-width: 0; width: 100%; }
  .mobile-cta {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--base);
    border-top: 1px solid var(--line);
  }
  .mobile-cta .btn { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 0.9375rem; }
  .site-footer { padding-bottom: 96px; }
}

/* ---- 320px未満の小さい画面：下部ボタンの文字が折り返さないようにする ---- */
@media (max-width: 340px) {
  .mobile-cta { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .mobile-cta .btn { font-size: 0.8125rem; padding: 8px 4px; letter-spacing: 0; }
}

/* 肩書き・委員の箇条書き（行頭の「・」は本文の文字）。折り返した2行目を字下げする */
.plain-list li { padding-left: 1em; text-indent: -1em; }

/* 講演・登壇を経歴と同じ表の形にした（2026-10-12）。主催などは2行目に小さく出す */
.dd-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  color: var(--text-sub);
}

/* ヘッダーは名前を置かず、ページ内の案内だけにする（2026-10-12本田指示）。
   スマートフォンは案内を出さないので、ヘッダー自体を出さない（下部の固定ボタンで代わりにする） */
.site-header .wrap { justify-content: flex-end; }
@media (max-width: 640px) {
  .site-header { display: none; }
  html { scroll-padding-top: 16px; }
}

/* ご相談のカードの「オンライン対応・全国」の表示 */
.chip {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-sub);
  line-height: 1.6;
}
.service p.chip { margin-top: 0; }

/* 写真の利用案内 */
.photo-note { margin-bottom: 12px; font-size: 0.9375rem; }

/* ご相談の主力カード（全幅）と、カード内の箇条書き */
.service.feature { grid-column: 1 / -1; }
.svc-list {
  list-style: disc;
  margin: 12px 0 0;
  padding-left: 1.4em;
  color: var(--text);
}
.svc-list li + li { margin-top: 4px; }
.service p.svc-proof {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 900px) {
  .service.feature { grid-column: 1 / -1; }
}

/* ---- 2026-10-12 本田指示：ボタンを「ご相談・ご依頼」1つにして大きく、スマホの写真を横幅いっぱいに、フッターを中央に ---- */
.btn-lg {
  min-height: 56px;
  padding: 14px 40px;
  font-size: 1.125rem;
}
.site-footer { text-align: center; }
.foot-links { justify-content: center; }

@media (max-width: 640px) {
  .hero-photo { max-width: none; width: 100%; }
  .hero-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;
  }
  .hero-cta .btn-lg { width: 100%; }
  .mobile-cta .btn { flex: 1 1 100%; min-height: 48px; font-size: 1rem; }
}

/* 最初の画面のボタンが見えている間は、下部の固定ボタンを隠す（js/ui.js） */
@media (max-width: 640px) {
  .mobile-cta.is-hidden { display: none; }
}

/* picture で包んだ写真も、これまでの img と同じ大きさで表示する */
.hero-photo picture, .photos picture { display: block; }

/* ---- 2026-10-13 最初の画面の大見出しを「何をする人か」に。名前はその下 ---- */
.hero-title { margin: 0; }
.hero-catch {
  display: block;
  font-size: clamp(1.625rem, 4.2vw, 2.5rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.hero-title .hero-name {
  display: block;
  margin-top: var(--s2);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.service p.svc-proof-sub {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--text-sub);
}

/* 画面には出さず、読み上げソフトにだけ伝える文字（h1のキャッチと名前の区切りなど） */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 区画のリード文：PCでは1文が1行に収まる幅にする（文節ごとの span.nw と組み合わせて、言葉の途中で改行しない） */
.sec-lead { max-width: 52em; }
/* PC・タブレットだけで改行する（スマートフォンでは文節の切れ目で自然に折り返す） */
@media (max-width: 640px) { br.pc-br { display: none; } }

/* ---- 2026-10-13 本田指示 ---- */
/* 対応地域の表示（オンライン対応・全国）：色は「対応地域」を表す。2026-11-01 墨のトーナルパレット（トーン90／30）に変更。
   文字と背景のコントラストは 7.3:1（ダークも 7.3:1） */
.chip {
  background: #dce3ed;
  border-color: #dce3ed;
  color: #404750;
}
@media (prefers-color-scheme: dark) {
  .chip {
    background: #404750;
    border-color: #404750;
    color: #dce3ed;
  }
}
/* お問い合わせ欄の説明文：箱の中央に置き、行は左寄せ（句点ごとに改行） */
.contact-box p.contact-lead {
  display: inline-block;
  text-align: left;
  max-width: 46em;
}

/* なぜ、この仕事をしているか（本田の一人称の文章。読み物として行間と幅を取る） */
.story {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: 1.0625rem;
  line-height: 2;
}
.story p + p { margin-top: 1.2em; }
.story p.story-sign {
  text-align: right;
  font-weight: 700;
  color: var(--text-sub);
}
@media (max-width: 640px) {
  .story { padding: var(--s2) 20px; font-size: 1rem; line-height: 1.9; }
}

/* 料金の目安（区分名の下に金額） */
.price-table dt .price { display: block; color: var(--text); font-size: 1rem; margin-top: 2px; }

/* 初回のご相談（無料） */
.free-first { margin: var(--s3) 0 0; }
.free-first-title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.price-table .table-row { align-items: center; }

/* 料金表の「おすすめ」（色は使わず枠線で示す） */
.price-table .badge { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--text); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--text); line-height: 1.7; vertical-align: 1px; }

/* 主力以外のご相談（空き家の引き取り）：主力のご相談より目立たせない */
.sub-offer { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--text-sub); }
.sub-offer-title { font-size: 1rem; font-weight: 700; color: var(--text-sub); }
.sub-offer p { margin-top: 6px; }

/* ---- 2026-10-13 見直し：要点の札・進め方と流れの図・料金の条件 ---- */
/* 最初の画面の要点（色は使わず枠線だけ） */
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.hero-facts li { padding: 4px 12px; border: 1px solid var(--text); border-radius: 999px; font-size: 0.875rem; font-weight: 700; color: var(--text); }

/* ストーリーの各段落の見出し */
.story h3.story-h { font-size: 0.9375rem; font-weight: 700; color: var(--text); line-height: 1.6; }
.story h3.story-h:not(:first-child) { margin-top: var(--s3); }
.story h3.story-h + p { margin-top: 4px; }

/* 4段の手順図（PCは横並びで矢印、スマホは縦並びで下向き矢印） */
.steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.steps-arrow .step { position: relative; }
.steps-arrow .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -21px;
  width: 14px;
  height: 14px;
  border-top: 2px solid var(--text-sub);
  border-right: 2px solid var(--text-sub);
  transform: translateY(-50%) rotate(45deg);
}
.step h3 .badge, .price-table .badge { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid var(--text); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--text); line-height: 1.7; vertical-align: 2px; }
@media (max-width: 900px) {
  .steps.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-arrow .step:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .steps.steps-4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps-arrow .step:not(:last-child)::after {
    display: block;
    top: auto;
    bottom: -21px;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* 料金の条件（見出し付きの箇条書き） */
.price-notes { margin-top: var(--s2); display: grid; gap: 8px; font-size: 0.9375rem; color: var(--text-sub); }
.price-notes > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; }
.price-notes dt { font-weight: 700; color: var(--text); }
@media (max-width: 640px) {
  .price-notes > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* 料金表：月2回プラン（おすすめ）の行を目立たせる。色は使わず、太い枠線と塗りの札で示す */
.price-table .table-row.is-recommended { margin: 0 -12px; padding-left: 10px; padding-right: 10px; border: 2px solid var(--text); border-radius: var(--radius); }
.price-table .table-row.is-recommended + .table-row { border-top: 0; }
.price-table .table-row.is-recommended .badge { background: var(--text); color: var(--surface); border-color: var(--text); font-size: 0.8125rem; padding: 1px 10px; }
.price-table .table-row.is-recommended .price { font-size: 1.125rem; }

/* ---- 2026-10-14 見直し：困りごとの例・5段の流れ・約束の一文・ページ内の案内 ---- */
.svc-pains { list-style: none; margin-top: 4px; padding: 0; display: grid; gap: 4px; }
.svc-pains li { padding-left: 1.1em; text-indent: -1.1em; font-size: 0.9375rem; color: var(--text); }
.svc-pains li::before { content: "・"; }
.steps.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.price-promise { margin: 4px 0 12px; font-weight: 700; color: var(--text); }
.hero-links { display: none; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hero-links a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; font-weight: 700; color: var(--text); text-decoration: none; background: var(--surface); }
@media (max-width: 900px) {
  .steps.steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-links { display: flex; }
}
@media (max-width: 640px) {
  .steps.steps-5 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-photo { max-width: 200px; margin-left: auto; margin-right: auto; }
}

/* ---- 2026-10-13 ご相談のカード：説明・困りごと・できることを見分けやすく ---- */
.service p.svc-lead { margin-top: 8px; color: var(--text); font-weight: 700; font-size: 1rem; line-height: 1.7; }
.svc-cols { display: grid; gap: 12px; margin-top: 14px; }
.service.feature .svc-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.svc-block { border-radius: var(--radius); padding: 14px 16px; }
.svc-block-pains { background: var(--base); }
.svc-block-offers { border: 1px solid var(--line); }
.service p.svc-label { margin: 0 0 8px; font-size: 0.875rem; font-weight: 700; color: var(--text); letter-spacing: 0.04em; }
.svc-block .svc-pains, .svc-block .svc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.svc-block .svc-pains li, .svc-block .svc-list li { position: relative; padding-left: 1.4em; text-indent: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--text); margin: 0; }
.svc-block .svc-pains li::before { content: "・"; position: absolute; left: 0.2em; }
.svc-block .svc-list li::before { content: ""; position: absolute; left: 0.25em; top: 0.55em; width: 0.45em; height: 0.8em; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
@media (max-width: 900px) {
  .service.feature .svc-cols { grid-template-columns: minmax(0, 1fr); }
}
/* スポット相談（料金表の下の1行） */
.price-spot { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 0.9375rem; }

/* ---- 料金：3つのプランを横に並べる（PC）。真ん中の月2回プランを太枠と塗りの札で目立たせる。色は使わない ---- */
.price-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) 20px; text-align: center; }
.price-card.is-recommended { border: 2px solid var(--text); }
.price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 2px 14px; border-radius: 999px; background: var(--text); color: var(--surface); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.price-name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-sub); }
.price-amount { margin: 6px 0 0; font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.price-amount span { font-size: 0.9375rem; font-weight: 700; margin-left: 2px; }
.price-desc { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--text); text-align: left; line-height: 1.7; }
@media (max-width: 760px) {
  .price-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---- ご契約の条件：表の形にする ---- */
.price-notes { margin-top: var(--s2); display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.price-notes > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: 0; }
.price-notes > div + div { border-top: 1px solid var(--line); }
.price-notes dt { padding: 12px 16px; background: var(--base); font-weight: 700; color: var(--text); font-size: 0.9375rem; }
.price-notes dd { margin: 0; padding: 12px 16px; color: var(--text); font-size: 0.9375rem; line-height: 1.7; }
@media (max-width: 640px) {
  .price-notes > div { grid-template-columns: minmax(0, 1fr); }
  .price-notes dt { padding: 10px 16px 6px; }
  .price-notes dd { padding: 6px 16px 12px; }
}
.price-total { margin: 10px 0 0; font-size: 0.875rem; font-weight: 700; color: var(--text-sub); text-align: left; }
.foot-note { margin-top: 12px; font-size: 0.75rem; color: var(--text-sub); text-align: center; }

/* ---- 経歴・実績（2列・行を詰める） ---- */
.tl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
}
.tl .sub-title { margin: 28px 0 10px; font-size: 1rem; }
.tl .sub-title:first-child { margin-top: 0; }
.tl-note { text-align: center; }
.tl-lead { margin: 0 0 10px; font-size: 0.9375rem; color: var(--text-sub); }
.tl .table { padding: 0 20px; }
.tl .table-row {
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.tl .table dt { font-size: 0.875rem; }
.tl .dd-sub { font-size: 0.8125rem; }
@media (max-width: 900px) {
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tl .table { padding: 0 16px; }
  .tl .table-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; }
}

/* ---- 掲載・出演の動画（YouTubeの横長動画を埋め込む） ---- */
.media-video { margin: 12px 0 0; width: 100%; max-width: 480px; }
.media-video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.media-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-video figcaption { margin-top: 6px; font-size: 0.8125rem; color: var(--text-sub); line-height: 1.5; }

/* ---- 2026-10-17 デザイン・UI/UXの点検を受けた手直し ---- */
/* 最初の画面の条件は押せないので枠で囲まず、チェック付きの一覧にする */
.hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 4px 16px; }
.hero-facts li { position: relative; padding: 0 0 0 1.5em; border: 0; border-radius: 0; font-size: 0.9375rem; }
.hero-facts li::before { content: ""; position: absolute; left: 0.3em; top: 0.4em; width: 0.45em; height: 0.8em; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
/* ページ内の案内（スマホ・タブレットのみ）：申込ボタンの下に、押せるリンクとして置く */
.hero-links { justify-content: center; gap: 0 16px; margin-top: 12px; }
.hero-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--accent); text-decoration: underline; font-size: 0.9375rem; }

/* 見出しを本文より立たせる */
.story h3.story-h { font-size: 1.1875rem; line-height: 1.5; }
.service h3 { font-size: 1.375rem; }
.service p.svc-lead { font-weight: 400; }

/* 動画の枠はほかの部品と同じく、影ではなく線で囲む */
.media-video-frame { box-shadow: none; border: 1px solid var(--line); }

/* 申込ボタン：流れの下のボタンもスマホでは横幅いっぱい */
@media (max-width: 640px) {
  .cta-row .btn { width: 100%; }
}

/* 表の左の列：年月・項目名が語の途中で折り返さない幅にする */
.tl .table-row { grid-template-columns: 9.5em minmax(0, 1fr); }
.dt-sub { display: block; }
.price-notes > div { grid-template-columns: 12em minmax(0, 1fr); }
@media (max-width: 640px) {
  .tl .table-row { grid-template-columns: minmax(0, 1fr); }
  .price-notes > div { grid-template-columns: minmax(0, 1fr); }
  .dt-sub { display: inline; }
}

/* 料金カード：左にそろえ、「6か月で〇万円」の行をカードの下端にそろえる */
.price-card { display: flex; flex-direction: column; text-align: left; }
.price-desc { flex-grow: 1; }
.price-total { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ご依頼の流れ：PC・タブレットも縦に並べ、1つの手順を1行にする（番号・見出し・説明） */
.steps.steps-5 { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 820px; }
.steps-arrow.steps-5 .step:not(:last-child)::after {
  display: block;
  top: auto;
  bottom: -21px;
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(135deg);
}
@media (min-width: 641px) {
  .steps.steps-5 .step { display: grid; grid-template-columns: 32px 15em minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px var(--s2); }
  .steps.steps-5 .step::before { margin-bottom: 0; }
  .steps.steps-5 .step p { margin-top: 0; }
}
.steps-5 + .cta-row { max-width: 820px; }

/* ---- 2026-10-17 マーケティング点検を受けた追加 ---- */
/* ご相談のカード：6か月で手元に残るものの例（成果物の例。数字の約束はしない） */
.svc-outcome { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.svc-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.svc-outcomes li { position: relative; padding-left: 1.1em; font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
.svc-outcomes li::before { content: "・"; position: absolute; left: 0; }
.svc-outcome-note { margin-top: 12px; font-size: 0.9375rem; color: var(--text-sub); }
/* ご依頼の流れの下の注記（スポット相談） */
.flow-note { margin-top: var(--s2); max-width: 820px; font-size: 0.9375rem; color: var(--text-sub); }
/* ご依頼の流れ：枠は上の表と同じく幅いっぱいにし、右端をそろえる。注記とボタンは中央 */
.steps.steps-5 { max-width: none; }
.flow-note { max-width: none; text-align: center; }
.steps-5 + .cta-row, .flow-note + .cta-row { max-width: none; }
@media (max-width: 640px) { .flow-note { text-align: left; } }

/* 1文字だけの最終行を防ぐ（js/ui.js が行末の4文字を .tail で包む） */
.tail { white-space: nowrap; }
/* 最初の画面の条件：1項目を1行に収め、「（税抜）」などが泣き別れにならないようにする */
.hero-facts { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.hero-facts li { white-space: nowrap; }
@media (max-width: 380px) { .hero-facts li { white-space: normal; } }
/* スマホの大きいボタン：左右の余白を詰め、文言が1行に収まるようにする */
@media (max-width: 640px) { .btn-lg { padding-left: 16px; padding-right: 16px; } }
/* 計測の除外を確かめるための一時表示（?notrack=1／0／status を開いたときだけ。js/ga.js） */
.notrack-note { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 100; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--radius); background: var(--text); color: var(--surface); font-size: 0.875rem; font-weight: 700; }

/* ---- ページの先頭へ戻るボタン（右下。色は使わず、白地に線と矢印） ---- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 55;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  /* 2026-11-01 Material 3：消えるとき0.15秒（加速）、出るとき0.2秒（減速） */
  transition: opacity 0.15s var(--ease-standard-acc), visibility 0.15s;
}
.to-top::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--text);
  border-left: 2px solid var(--text);
  transform: translate(-50%, -50%) rotate(45deg);
}
.to-top.is-show { opacity: 1; visibility: visible; transition: opacity 0.2s var(--ease-standard-dec), visibility 0s; }
.to-top:hover { border-color: var(--text); }
@media (max-width: 640px) {
  /* 画面下の固定の申込ボタンと重ならないよう、その上に置く */
  .to-top { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- 大見出しへの移動（2026-10-18本田決定）：上部の案内に7つの大見出しを並べる。
   PC（1081px以上）は従来のメニュー。1080px以下は高さ44pxの固定の帯にして横にスクロールできるようにする。
   いま読んでいる見出しは、色を使わず下線と太字で示す（js/ui.js が .is-current を付ける） ---- */
.gnav a.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1080px) {
  :root { --header-h: 44px; }
  .site-header { display: block; }
  .site-header .wrap { height: var(--header-h); padding: 0; justify-content: flex-start; }
  .gnav { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav ul { gap: 0; padding: 0 8px; width: max-content; white-space: nowrap; }
  .gnav li, .gnav li:not(:last-child) { display: block; }
  .gnav a:not(.btn) { display: flex; align-items: center; height: var(--header-h); padding: 0 10px; font-size: 0.875rem; border-bottom: 2px solid transparent; }
  .gnav a.is-current { text-decoration: none; border-bottom-color: var(--text); }
  .gnav .btn { min-height: 32px; padding: 4px 12px; margin: 0 8px 0 4px; font-size: 0.8125rem; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }
}
@media (max-width: 640px) {
  /* 申込は画面下の固定ボタンがあるので、帯からは外す */
  .gnav li:last-child { display: none; }
}

/* 最初の画面の肩書き：行頭に「・」を付けて箇条書きにする。2行に折り返したときは字下げする（2026-10-18） */
.hero-roles li { position: relative; padding-left: 1.1em; }
.hero-roles li::before { content: "・"; position: absolute; left: 0; }

/* ---- 2026-10-18 操作への反応（本田承認：ボタンの手ごたえと、下線がすべる帯）---- */
/* ボタン：押すと少し沈む */
.btn { transition: transform 0.1s var(--ease-standard), background-color 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard), color 0.15s var(--ease-standard); } /* 2026-11-01 Material 3 の standard */
.btn:active { transform: scale(0.97); }
/* 上部の案内：いまの見出しの下線は、1本の線（.gnav-bar）が見出しから見出しへすべって移る（js/ui.js が位置を決める） */
.gnav { position: relative; }
.gnav a.is-current { text-decoration: none; }
.gnav-bar { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--text); opacity: 0; pointer-events: none; transition: transform 0.3s var(--ease-standard), width 0.3s var(--ease-standard), opacity 0.2s var(--ease-standard); }
.gnav-bar.is-on { opacity: 1; }
@media (min-width: 1081px) {
  .gnav a:not(.btn) { display: inline-block; padding: 6px 0; }
}
@media (max-width: 1080px) {
  .gnav a.is-current { border-bottom-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .gnav-bar { transition: none; }
  .btn:active { transform: none; }
}

/* ---- 最初の画面の見出し：読み込み時に1回だけ、文節ごとに下から浮かび上がる（2026-10-18本田決定）。
   目を引くための演出に寄りすぎないよう、動きは小さく（8px）、全体で1秒弱に収める ---- */
.hero-catch .nw { display: inline-block; animation: hero-rise 0.5s var(--ease-emph-dec) both; } /* 2026-11-01 Material 3 の emphasized decelerate。ずらしを0.1秒から0.05秒に */
.hero-catch .nw:nth-child(2) { animation-delay: 0.05s; }
.hero-catch .nw:nth-child(3) { animation-delay: 0.1s; }
.hero-catch .nw:nth-child(4) { animation-delay: 0.15s; }
.hero-catch .nw:nth-child(5) { animation-delay: 0.2s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-catch .nw { animation: none; } }

/* 最初の画面：写真は上端にそろえる。中央寄せだと、書体の読み込みで文章の高さが変わったときに写真が動き、
   レイアウトのずれ（CLS）になるため（2026-10-18、PC の CLS 0.139 の原因） */
@media (min-width: 641px) {
  .hero-grid { align-items: start; }
  .hero-photo { margin-top: 12px; }
}

/* 最初の画面の条件：1項目ずつ角丸の枠で囲み、タグの形にする（2026-10-18本田指示）。押せる部品ではないので、ホバーの変化は付けない */
.hero-facts { gap: 8px; }
.hero-facts li { padding: 4px 12px 4px 29px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.875rem; line-height: 1.5; }
.hero-facts li::before { left: 12px; top: 50%; transform: translateY(-65%) rotate(45deg); }

/* ===== 図解の反映（2026-10-18本田確定。試作 https://claude.ai/artifact/VbMuRytVgUNznHbAqJGrcE の第6版）：①なぜ、この仕事をしているか ②経歴・実績 ③ご相談いただけること、料金の「ご契約の条件」の開閉 ===== */
/* 色はサイトの3役（ベース・文字・アクセント）のまま。アクセントは順序の番号だけ。区別は線種（実線・破線）で付ける。 */


/* ---- ③ ご相談いただけること ---- */
.svc-list-short li b { display: block; font-weight: 700; color: var(--text); }
.svc-list-short li > span { display: block; font-size: 0.875rem; color: var(--text-sub); line-height: 1.7; }
.svc-list-short li + li { margin-top: 10px; }
.docs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.doc {
  position: relative; width: 9.5em; min-height: 7.6em; padding: 34px 12px 12px;
  background: var(--surface); border: 1px solid var(--text-sub); border-radius: 2px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.5; color: var(--text);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.doc::before { /* 折り返した角 */
  content: ""; position: absolute; top: -1px; right: -1px; width: 17px; height: 17px;
  background: linear-gradient(to bottom left, transparent 50%, var(--text-sub) 50%, var(--text-sub) calc(50% + 1px), var(--line) calc(50% + 1px));
}
.doc::after { /* 本文の行の印 */
  content: ""; position: absolute; left: 12px; right: 28px; top: 14px; height: 8px;
  border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
}
.service.wide .doc { width: 8.6em; }

/* ---- ① なぜ、この仕事をしているか ---- */
.story-tl { list-style: none; margin: 0; padding: 0; counter-reset: tl; display: grid; gap: 0; }
.story-tl > li { counter-increment: tl; position: relative; padding: 0 0 var(--s3) 56px; }
.story-tl > li::before {
  content: counter(tl); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.story-tl > li:not(:last-child)::after { /* 番号をつなぐ縦線 */
  content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; border-left: 2px solid var(--line);
}
.tl-period { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text-sub); line-height: 36px; }
.tl-h { font-size: 1.25rem; margin: 0 0 8px; text-wrap: balance; }
.story-tl > li > p:not(.tl-period) { max-width: 46em; }
.tasks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; }
.tasks li { white-space: nowrap; flex: none; padding: 3px 10px; border: 1px solid var(--text); border-radius: 4px; background: var(--surface); font-size: 0.875rem; line-height: 1.6; }
.tasks li:not(:last-child)::after { content: "›"; margin-left: 10px; margin-right: -4px; color: var(--text-sub); }
.tl-after { margin-top: 12px; font-weight: 700; }
.rebuilt { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rebuilt li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.rebuilt b { display: block; font-size: 0.9375rem; }
.rebuilt li > span { display: block; margin-top: 4px; font-size: 0.875rem; color: var(--text-sub); line-height: 1.7; }
.reasons-title { margin: var(--s2) 0 12px; }
.reasons { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reasons li { border-top: 2px solid var(--text); padding-top: 12px; min-width: 0; }
.reasons b { display: block; font-size: 1rem; line-height: 1.6; }
.reasons p { margin-top: 6px; font-size: 0.9375rem; color: var(--text-sub); line-height: 1.8; }

/* ---- ② 経歴・実績 ---- */
.stats { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stat-num { font-family: "Roboto Condensed", "Noto Sans JP", sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-num small { font-family: "Noto Sans JP", sans-serif; font-size: 0.9375rem; margin-left: 2px; }
.stat-label { font-size: 0.8125rem; color: var(--text-sub); line-height: 1.6; }
/* 表を縦線の年表に（文字は同じ） */
#career .table { background: transparent; border: 0; border-radius: 0; padding: 0 0 0 4px; }
#career .table-row { position: relative; display: block; padding: 0 0 16px 24px; border-top: 0; }
#career .table-row + .table-row { border-top: 0; }
#career .table-row::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 11px; height: 11px; border-radius: 50%; background: var(--base); border: 2px solid var(--text-sub); box-sizing: border-box; }
#career .table-row:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: calc(0.45em + 13px); bottom: 2px; border-left: 1px solid var(--line); }
#career .table dt { font-size: 0.8125rem; line-height: 1.6; }
#career .table dd { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.7; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rebuilt, .reasons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .story-tl > li { padding-left: 46px; }
  .story-tl > li::before { width: 32px; height: 32px; }
  .story-tl > li:not(:last-child)::after { left: 15px; top: 40px; }
  .tl-period { line-height: 32px; }
  .tl-h { font-size: 1.125rem; }
  .doc, .service.wide .doc { width: calc(50% - 6px); min-height: 6.6em; }
  .stat-num { font-size: 1.875rem; }
}

/* ---- 料金：ご契約の条件（開閉式。見出しで中身が予想できるように、問いの形の説明を添える） ---- */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terms { margin-top: var(--s2); }
.terms-title { font-size: 1rem; }
.terms-hint { margin-top: 2px; font-size: 0.875rem; color: var(--text-sub); }
.terms-list { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.terms-list details + details { border-top: 1px solid var(--line); }
.terms-list summary {
  list-style: none; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
  padding: 12px 48px 12px 16px; font-size: 0.9375rem; line-height: 1.6;
}
.terms-list summary::-webkit-details-marker { display: none; }
.terms-list summary::after { /* 開閉の印（＋／−） */
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 1px solid var(--text-sub); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text); line-height: 1;
}
.terms-list details[open] summary::after { content: "−"; }
.terms-list summary:hover b { text-decoration: underline; }
.terms-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.terms-list summary b { color: var(--text); }
.terms-list summary span { color: var(--text-sub); }
.terms-list details p { margin: 0; padding: 0 48px 14px calc(12em + 32px); font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .terms-list summary { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .terms-list details p { padding: 0 16px 14px; }
}
/* 手元に残るもの：4枚を1列にそろえる（3枚＋1枚の段落ちを防ぐ） */
.docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 44em; }
.doc, .service.wide .doc { width: auto; min-width: 0; padding: 34px 10px 12px; }
@media (max-width: 640px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc, .service.wide .doc { width: auto; } }
/* 条件の見出しは1行だけにする（10月18日本田指示） */
.terms-list summary { display: block; font-weight: 700; color: var(--text); }
.terms-list summary:hover { text-decoration: underline; }
.terms-list details p { padding: 0 48px 14px 16px; }
.terms-list summary { text-wrap: balance; } /* 「か？」だけが次の行に落ちるのを防ぐ */


/* ご依頼の流れ：スマートフォンでも番号を見出しの左に置き、番号だけの行をなくす（2026-10-18本田指示。縦に長くなるのを防ぐ） */
@media (max-width: 640px) {
  .steps.steps-5 .step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 20px; }
  .steps.steps-5 .step::before { grid-row: 1 / span 2; margin-bottom: 0; }
  .steps.steps-5 .step h3 { grid-column: 2; padding-top: 3px; }
  .steps.steps-5 .step p { grid-column: 2; margin-top: 2px; }
}

/* 料金：「おすすめ」の理由（2026-10-18。理由のない推奨にしないため） */
.price-why { margin-top: 12px; font-size: 0.9375rem; color: var(--text-sub); }

/* ---- 2026-11-01 開閉（ご契約の条件・よくある質問）：開くとき0.4秒（emphasized decelerate）、閉じるとき0.2秒（emphasized accelerate）。
   ::details-content と interpolate-size に対応するブラウザ（Chrome系）だけ動き、Safari などは今までどおり瞬時に開閉する ---- */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.2s var(--ease-emph-acc), content-visibility 0.2s allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
    transition: block-size 0.4s var(--ease-emph-dec), content-visibility 0.4s allow-discrete;
  }
}
@media (prefers-reduced-motion: reduce) {
  details::details-content, details[open]::details-content { transition: none; }
  .to-top, .to-top.is-show { transition: none; }
}