@charset "UTF-8";
/* Source: style.css */

/* ==========================================================================
   合同会社あいびー — 共通スタイル
   デザインの正：mockup.html（配色・フォント・レイアウトを勝手に変えない）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  /* --- 色：紺・白・グレーを基調に、アクセントはロゴのブランドグリーン --- */
  --ink:        #17243a;  /* 主文字・濃色面（紺） */
  --deep:       #0f1b2d;  /* さらに濃い紺の面 */
  --paper:      #f4f6f1;  /* 地色（淡い） */
  --white:      #ffffff;
  --sand:       #eef1ec;  /* 淡い緑みのグレー */
  --mist:       #e3e6e7;
  --line:       #cbd0d2;  /* 罫線 */
  --line-dark:  #526070;  /* 濃色面の上の罫線 */
  --muted:      #5c666e;  /* 補助文字（本文コントラスト4.5:1以上） */
  --accent:     #1c6f57;  /* ブランドグリーン（CTA・強調） */
  --accent-dk:  #145440;  /* ホバー時 */
  --brand-dk:   #0f4340;  /* ロゴの濃緑 */
  --lime:       #5aa832;  /* 数字のハイライト */

  /* --- フォント（Google Fonts のみ） --- */
  --serif: "Zen Old Mincho", serif;
  --sans:  "Zen Kaku Gothic New", sans-serif;

  /* --- 余白スケール（8pxの倍数） --- */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  80px;
  --s-8:  112px;

  /* --- レイアウト --- */
  --wrap:      1180px;
  --gutter:    32px;
  --header-h:  96px;
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }  /* width/height属性と併用して縦横比を保つ */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

/* --------------------------------------------------------------------------
   3. タイポグラフィ（日本語組版の規約）
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .035em;
  color: var(--text-ink, var(--ink));
  background: var(--paper);
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.4;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.3; }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
h4 { font-size: 17px; line-height: 1.6; }

p { max-width: 40em; }
p + p { margin-top: var(--s-2); }

.lead { font-size: 17px; }
.note { font-size: 13px; line-height: 1.8; color: var(--text-muted, var(--muted)); max-width: 46em; }
.nowrap { white-space: nowrap; }

/* 改行制御ユーティリティ（改行位置は必ず明示する） */
.pc { display: inline; }
.sp { display: none; }

/* --------------------------------------------------------------------------
   4. 共通レイアウト
   -------------------------------------------------------------------------- */
.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.section { padding: var(--s-7) 0 var(--s-8); position: relative; scroll-margin-top: calc(var(--header-h) + 16px); }
.section-grid { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 54px; }

/* 縦組みのセクション索引（シグネチャー要素） */
.vertical-label {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-size: 14px; letter-spacing: .26em;
  border-left: 1px solid currentColor; padding-left: 20px;
  align-self: stretch; min-height: 220px; opacity: .85;
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(460px, 1.28fr) minmax(280px, .72fr);
  gap: 56px; align-items: end; margin-bottom: var(--s-6);
}
.sec-kicker { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--text-muted, var(--muted)); }
/* 章立て：番号を大きく取り、ラベルと落差をつける（参考：内藤・大塚法律事務所の chapter 表記） */
.sec-kicker:has(.sec-num) { display: flex; align-items: baseline; gap: 14px; }
.sec-num {
  font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1;
  color: var(--text-accent, var(--accent)); font-weight: 700; letter-spacing: 0;
}
.is-dark .sec-num { color: var(--lime); }
.sec-label { position: relative; padding-left: 46px; }
.sec-label::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 32px; height: 1px; background: currentColor; opacity: .5;
}
.sec-head h2 { margin-top: var(--s-2); }
.sec-head p { min-width: 18em; font-size: 15px; color: var(--text-muted, var(--muted)); }
.is-dark .sec-head p { color: #b9c4ce; }

/* 濃色面 */
.is-dark { background: var(--deep); color: var(--white); }
.is-dark .sec-kicker { color: #9fb0c0; }
.is-dark .note { color: #b9c4ce; }
.is-dark .vertical-label { border-color: #718096; }

/* --------------------------------------------------------------------------
   5. リンク・ボタン・フォーカス
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.is-dark :focus-visible { outline-color: var(--lime); }

.skip {
  position: fixed; left: 10px; top: -100px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip:focus { top: 10px; }

.btn {
  min-height: 56px; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-1); padding: 12px 26px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.is-dark .btn-line:hover { background: #fff; color: var(--text-ink, var(--ink)); border-color: #fff; }
.btn-white { background: #fff; color: var(--text-accent, var(--accent)); }
.btn-white:hover { background: var(--sand); }

/* セクション末尾のミニCTA */
.mini-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-4); font-size: 14px; font-weight: 700;
  padding: 11px 0; border-bottom: 1px solid currentColor;
}
.mini-cta::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.mini-cta:hover { color: var(--text-accent, var(--accent)); }
.is-dark .mini-cta:hover { color: var(--lime); }
/* R-07：別タブで開く外部リンクは、矢印の向きで区別できるようにする */
.mini-cta[target="_blank"]::after {
  width: 12px; height: 12px; background: none;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(1px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  height: var(--header-h); display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line); background: var(--white);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: stretch; justify-content: space-between;
  width: 100%; gap: var(--s-4);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.brand { display: flex; align-items: center; }
.brand img { width: 168px; height: 56px; object-fit: contain; object-position: left center; }

.nav { display: flex; align-items: stretch; }

/* 英字＋和文の2段ラベル。項目のあいだは細い縦罫で区切る */
.nav-list { display: flex; align-items: stretch; }
.nav-list li { display: flex; }
.nav-list li + li { border-left: 1px solid var(--line); }
.nav-list a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0 clamp(16px, 1.7vw, 26px); position: relative;
  transition: color .2s;
}
.nav-list a b { font-size: 13px; font-weight: 700; letter-spacing: .14em; line-height: 1; }
.nav-list a span { font-size: 11px; color: var(--text-muted, var(--muted)); letter-spacing: .04em; line-height: 1; }
.nav-list a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--accent); transition: left .2s, right .2s;
}
.nav-list a:hover::after { left: 18%; right: 18%; }
.nav-list a[aria-current="page"] { color: var(--text-accent, var(--accent)); }
.nav-list a[aria-current="page"] span { color: var(--text-accent, var(--accent)); }
.nav-list a[aria-current="page"]::after { left: 18%; right: 18%; }

/* 右端に接する2つのCTAブロック（アイコン＋文字の2段） */
.header-cta { display: flex; align-items: stretch; margin-left: var(--s-3); }
.hcta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 0 clamp(18px, 2vw, 30px); color: #fff; text-align: center;
  transition: background-color .2s;
}
.hcta svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hcta strong { font-size: 15px; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.hcta small { font-size: 10px; opacity: .82; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; }
.hcta-tel { background: var(--ink); }
.hcta-tel:hover { background: var(--deep); }
.hcta-tel strong { font-family: var(--serif); font-size: 17px; }
.hcta-form { background: var(--accent); }
.hcta-form:hover { background: var(--accent-dk); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   7. フッター
   -------------------------------------------------------------------------- */
.site-footer { background: #0b1423; color: #d8dde2; padding: var(--s-7) 0 var(--s-6); }
.footer-inner { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: var(--s-6); align-items: start; }
.footer-brand img { width: 190px; height: 68px; object-fit: contain; background: #fff; padding: 8px 12px; }
.site-footer address { font-size: 13px; line-height: 1.9; margin-top: var(--s-3); color: #c8d0d8; }
.site-footer address a:hover { color: #fff; }
.footer-nav { display: grid; gap: 12px; font-size: 14px; }
.footer-nav a { display: inline-block; padding: 4px 0; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-tel { font-family: var(--serif); font-size: 24px; color: #fff; display: inline-block; padding: 4px 0; }
.copyright { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid #22314a; font-size: 12px; color: #a4b0bb; }

/* --------------------------------------------------------------------------
   8. スマホ固定CTA
   -------------------------------------------------------------------------- */
.mobile-cta { display: none; }

/* --------------------------------------------------------------------------
   9. 表（料金・会社概要）
   -------------------------------------------------------------------------- */
.table-plain { border-top: 1px solid var(--ink); font-size: 15px; }
.table-plain th, .table-plain td { text-align: left; padding: 16px 8px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-plain th { width: 170px; font-weight: 700; }
.table-plain a[href^="tel:"] { display: inline-block; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.table-plain a[href^="tel:"]:hover { color: var(--text-accent, var(--accent)); }
.is-dark .table-plain a[href^="tel:"]:hover { color: var(--lime); }
.is-dark .table-plain { border-top-color: #fff; }
.is-dark .table-plain th, .is-dark .table-plain td { border-bottom-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   10. 汎用パーツ
   -------------------------------------------------------------------------- */
.page-head { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.page-head .sec-kicker { display: block; margin-bottom: var(--s-2); }
.page-head p { margin-top: var(--s-3); }

.breadcrumb { font-size: 12px; color: var(--text-muted, var(--muted)); padding: 14px 0 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: "／"; margin-right: 8px; }
.breadcrumb a:hover { color: var(--text-accent, var(--accent)); }

/* 引用（代表の一言・FAQの答え）
   R-03：白の地色と大型の引用記号で、原文の重みに見合う格を持たせる */
.quote {
  position: relative; overflow: hidden;
  background: var(--white);
  border-left: 3px solid var(--accent);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  font-family: var(--serif); font-size: 19px; line-height: 2.1; max-width: 34em;
}
.quote::before {
  content: "\201C";
  position: absolute; top: -18px; left: 12px; z-index: 0;
  font-family: var(--serif); font-size: 110px; line-height: 1;
  color: var(--text-accent, var(--accent)); opacity: .1; pointer-events: none;
}
.quote p { max-width: none; position: relative; z-index: 1; }
.quote p + p { margin-top: var(--s-3); }
.quote-name {
  font-family: var(--sans); font-size: 13px; letter-spacing: .12em;
  color: var(--text-muted, var(--muted)); margin-top: var(--s-3);
  display: flex; align-items: center; gap: 14px;
}
.quote-name::before { content: ""; width: 40px; height: 1px; background: var(--accent); flex: none; }

/* 写真の色調を揃える（実写真とAI生成画像の混在対策） */
.photo-tone { filter: saturate(.94) contrast(1.03); }

/* アニメーション（1回だけフェード） */
.reveal { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. ヒーロー（トップページ）
   -------------------------------------------------------------------------- */
.hero { position: relative; }

/* 左＝文字（wrapの左端に揃える）／右＝写真を画面右端まで抜く */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: stretch;
  min-height: min(880px, calc(100svh - var(--header-h)));
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-7) var(--s-6) var(--s-7) max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.eyebrow::before { content: ""; display: inline-block; width: 36px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; }
.hero h1 { margin: var(--s-4) 0 var(--s-4); font-size: clamp(42px, 5.2vw, 80px); line-height: 1.2; }
.hero h1 .accent { color: var(--text-accent, var(--accent)); }
.hero-lead { font-size: 17px; max-width: 30em; }
.hero-lead p + p { margin-top: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }

/* 全面配置の写真＋重なる一言（コラージュの考え方は残す） */
.hero-visual { position: relative; overflow: visible; }
.hero-visual picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, var(--paper) 0%, rgba(244, 246, 241, .45) 9%, rgba(244, 246, 241, 0) 26%);
}
.hero-note {
  position: absolute; z-index: 2; left: 0; bottom: clamp(28px, 6vw, 64px);
  background: var(--white); padding: var(--s-3) var(--s-4);
  font-family: var(--serif); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.85;
  border-left: 4px solid var(--accent); max-width: 24em;
  transform: translateX(-14%);
}

/* 縦のブランドラベル（画面右端） */
.hero::after {
  content: "IVY / HOME CARE FRANCHISE";
  position: absolute; right: 14px; top: clamp(120px, 18vh, 220px); z-index: 3;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; letter-spacing: .34em; color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* 数字の帯（ヒーロー下） */
.hero-stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: var(--s-6) 0 var(--s-8); }
.hero-stat { padding: 16px 30px 16px 0; margin-right: 30px; border-right: 1px solid var(--line); font-size: 12px; }
.hero-stat:last-child { border-right: 0; margin-right: 0; }
.hero-stat b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--brand-dk); }

/* --------------------------------------------------------------------------
   12. 困りごと＋料金（決め手1位を最上部に）
   -------------------------------------------------------------------------- */
.pain-layout { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(400px, 1.05fr); gap: var(--s-6); align-items: start; }
/* R-01 こんな方へ：罫線リストからカードへ（面積を確保して読み飛ばされないようにする）
   ※ 左カラムが約400pxのため2列にすると本文が18字未満になる。1列カードで面積を確保する */
.pain-list { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.pain-list li {
  background: var(--deep); padding: var(--s-3);
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-2); align-items: start;
}
.pain-icon { width: 42px; height: 42px; border: 1px solid #55657a; display: grid; place-items: center; }
.pain-icon svg { width: 24px; height: 24px; stroke: var(--lime); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pain-text { font-size: 15px; line-height: 1.85; min-width: 14em; }
.pain-close {
  margin-top: var(--s-3); padding-left: var(--s-3);
  border-left: 2px solid var(--accent); font-size: 15px; font-weight: 700;
}

.price-sheet { background: #fff; color: var(--text-ink, var(--ink)); padding: 14px 34px 26px; box-shadow: 20px 20px 0 #28364a; }
.price-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.price-row:last-of-type { border-bottom: 0; }
.price-label small { display: block; color: var(--text-muted, var(--muted)); font-size: 11px; letter-spacing: .12em; }
.price-label strong { font-size: 16px; }
.price-value { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); color: var(--text-accent, var(--accent)); font-weight: 700; line-height: 1.2; text-align: right; }
.price-value.is-text { font-size: clamp(22px, 2.4vw, 30px); }
/* 金額の単位は数字より小さく組む */
.price-value .unit { font-size: .46em; margin-left: .12em; letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   13. 支援内容の索引
   -------------------------------------------------------------------------- */
.service-index { display: grid; grid-template-columns: .92fr 1.08fr; border-top: 1px solid var(--ink); }
.service-title { padding: 30px 44px 30px 0; border-bottom: 1px solid var(--ink); display: flex; gap: 18px; align-items: center; }
.service-title .num { font-family: var(--serif); font-size: 14px; color: var(--text-accent, var(--accent)); flex: none; }
/* R-04：走査の手がかりになる自作アイコン（見出しより小さく、主役を奪わない） */
.service-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); }
.service-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-index:hover .service-title, .service-index:hover .service-copy { transition: background-color .2s; }
.service-copy { padding: 30px 0 30px 44px; border-bottom: 1px solid var(--ink); }
.service-copy p { max-width: 34em; }

/* --------------------------------------------------------------------------
   14. 一人で開業する場合との違い
   -------------------------------------------------------------------------- */
.ba { background: var(--sand); }
.ba-board { display: grid; grid-template-columns: 1fr 86px 1fr; align-items: stretch; }
.ba-col { background: var(--white); padding: var(--s-5) var(--s-5); }
.ba-col.before { border-top: 6px solid #8a949a; }
.ba-col.after { border-top: 6px solid var(--accent); }
.ba-tag { font-size: 10px; letter-spacing: .25em; font-weight: 700; color: var(--text-muted, var(--muted)); }
.ba-col h3 { margin: 14px 0 var(--s-3); }
.ba-col li { padding: 12px 0 12px 26px; border-top: 1px solid var(--line); position: relative; font-size: 15px; }
.ba-arrow { display: flex; align-items: center; justify-content: center; }
.ba-arrow svg { width: 54px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 1.2; }
.ba-col li svg { position: absolute; left: 0; top: 18px; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* 開業までの流れ（緑の基準線に吊るす） */
.roadmap { margin-top: var(--s-7); position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; overflow: hidden; }
/* 基準線は各ステップが自分の分を引く（段をまたいでも1本に見せるため） */
.roadmap::before { content: ""; display: none; position: absolute; background: var(--accent); opacity: .45; }
.road-step { position: relative; padding-top: 56px; }
.road-step::after { content: ""; position: absolute; top: 27px; left: 0; right: -22px; height: 1px; background: var(--accent); opacity: .45; z-index: 0; }
.road-step:last-child::after { right: 0; }
.road-step::before { content: ""; position: absolute; top: 21px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--sand); border: 2px solid var(--accent); z-index: 1; }
.road-step b { font-size: 10px; letter-spacing: .16em; font-weight: 700; color: var(--text-muted, var(--muted)); }
.road-step h3 { font-size: 19px; margin: 8px 0 6px; }
.road-step p { font-size: 13px; line-height: 1.75; }
/* 開業までの流れの後半2ステップ（service.html） */
.roadmap--wrap { grid-template-columns: repeat(4, 1fr); row-gap: var(--s-6); }

/* --------------------------------------------------------------------------
   15. 数字のフルブリード帯
   -------------------------------------------------------------------------- */
.numbers { background: var(--white); padding: 0; }
.numbers-head { padding: var(--s-7) 0 var(--s-5); }
.proof-band { min-height: 250px; display: grid; grid-template-columns: 1.1fr .9fr; }
.proof-band:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
.proof-band:nth-child(even) .band-photo { order: 2; }
.band-photo { position: relative; overflow: hidden; background: var(--mist); }
.band-photo img { width: 100%; height: 100%; object-fit: cover; }
.band-copy { background: var(--deep); color: #fff; padding: var(--s-5) clamp(32px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; }
.band-copy b { font-family: var(--serif); font-size: clamp(38px, 5vw, 66px); color: var(--lime); line-height: 1.1; }
.band-copy span { font-size: 14px; margin-top: 10px; }
.numbers-note { padding: var(--s-4) 0 var(--s-7); }

/* --------------------------------------------------------------------------
   16. 安心のポイント
   -------------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust-item { background: var(--paper); padding: var(--s-4); display: grid; grid-template-columns: 56px 1fr; gap: 22px; }
/* R-05：決め手の1位を「面」で強調する。
   2列ぶんに広げるとグリッドに空セルができるため、列は広げず白の地色とアクセント罫で優先順位をつける */
.trust-item.is-lead { background: var(--white); box-shadow: inset 3px 0 0 var(--accent); }
.trust-item.is-lead .trust-icon { border-color: var(--accent); }
.trust-item.is-lead .trust-icon svg { stroke: var(--accent); }
.trust-item.is-lead h3 { font-size: 21px; }
.trust-icon { width: 54px; height: 54px; border: 1px solid var(--ink); display: grid; place-items: center; }
.trust-icon svg { width: 28px; height: 28px; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.trust-item h3 { font-size: 18px; margin-bottom: 6px; }
.trust-item p { font-size: 14px; }

/* --------------------------------------------------------------------------
   17. 対応エリア
   -------------------------------------------------------------------------- */
.area-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--s-6); align-items: start; }
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-3) 0; }
.area-chips { gap: 10px; }
.area-chips span { border: 1px solid #718096; padding: 11px 16px; font-size: 14px; font-family: var(--serif); }
/* 地図を画面右端まで抜いて、面としての存在感を出す */
.area-map { border: 1px solid #647184; border-right: 0; overflow: hidden; min-height: 460px; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2)); }
.area-map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; filter: grayscale(.25) contrast(1.05); }

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */
.faq-box { border-top: 1px solid var(--ink); max-width: 46em; }
.faq-item { border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }
.faq-q, .faq-a { display: grid; grid-template-columns: 40px 1fr; gap: 6px; }
.faq-q { font-weight: 700; }
.faq-a { margin-top: 12px; font-size: 15px; }
.faq-q b, .faq-a b { font-family: var(--serif); color: var(--text-accent, var(--accent)); font-size: 20px; line-height: 1.5; }
.faq-a p { max-width: none; }

/* --------------------------------------------------------------------------
   19. 会社概要・代表
   -------------------------------------------------------------------------- */
.founder { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: var(--s-6); align-items: start; }
.founder-photo img { width: 100%; height: auto; }
.company-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: stretch; }
.company-layout figure { height: 100%; min-height: 320px; }
.company-layout figure img { width: 100%; height: 100%; object-fit: cover; }

/* <picture> は高さを持たないため、height:100% を通すために block 化する */
.hero-visual picture,
.band-photo picture,
.founder-photo picture,
.company-layout figure picture { display: block; width: 100%; height: 100%; }

/* 加盟の条件で受けられることの一覧（service.html） */
.cond-list { margin-top: var(--s-3); border-top: 1px solid var(--line-dark); }
.cond-list li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
.cond-list li svg { position: absolute; left: 0; top: 20px; width: 15px; height: 15px; stroke: var(--lime); fill: none; stroke-width: 1.8; }

/* 代表あいさつの帯：写真を画面左端まで抜き、ヒーロー（右抜き）と対にする */
.founder-band {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
/* 直前の対応エリア（--deep）と隣り合うため、ひとつ明るい紺にして境目を作る */
.founder-band.is-dark { background: var(--ink); }
.founder-visual { position: relative; overflow: hidden; min-height: 560px; }
.founder-visual picture { display: block; width: 100%; height: 100%; }
.founder-visual img { width: 100%; height: 100%; object-fit: cover; }
.founder-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-8) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) var(--s-8) var(--s-7);
}
.founder-body h2 { margin: var(--s-2) 0 var(--s-5); }
.founder-band .quote { background: rgba(255, 255, 255, .06); border-left-color: var(--lime); max-width: 32em; }
.founder-band .quote::before { color: var(--lime); opacity: .16; }
.founder-band .quote-name { color: #c8d2dc; }
.founder-body > .mini-cta, .founder-body > .sec-kicker, .founder-body > .quote-name { align-self: flex-start; }
.founder-band .quote-name::before { background: var(--lime); }

/* --------------------------------------------------------------------------
   20. 最終CTA
   -------------------------------------------------------------------------- */
.cta-final { background: var(--accent); color: #fff; padding: var(--s-7) 0; }
.cta-final .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cta-final h2 { color: #fff; }
.cta-final p { color: #e2efe9; }
.cta-tel { display: block; font-family: var(--serif); font-size: 30px; color: #fff; margin-top: 6px; }

/* --------------------------------------------------------------------------
   21. フォーム
   -------------------------------------------------------------------------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: var(--s-7); align-items: start; }
.form-field { margin-bottom: var(--s-4); }
.form-field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.req, .opt { font-size: 11px; font-weight: 700; padding: 3px 8px; margin-left: 10px; vertical-align: 2px; }
.req { background: var(--accent); color: #fff; }
.opt { background: var(--mist); color: var(--text-muted, var(--muted)); }
.form-field input, .form-field textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: #fff;
  font-size: 16px; line-height: 1.7; min-height: 56px;
}
.form-field textarea { min-height: 180px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); }
.form-hint { font-size: 13px; color: var(--text-muted, var(--muted)); margin-top: 8px; }
.form-gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { margin-top: var(--s-4); }
.form-submit .btn { width: 100%; max-width: 420px; }
.form-privacy { font-size: 13px; color: var(--text-muted, var(--muted)); margin-top: var(--s-3); }
.form-privacy a { text-decoration: underline; }
.contact-side { background: var(--white); border: 1px solid var(--line); padding: var(--s-4); }
.contact-side .footer-tel { color: var(--text-ink, var(--ink)); font-size: 28px; }

/* --------------------------------------------------------------------------
   22. 記事的なページ（プライバシー・404・thanks）
   -------------------------------------------------------------------------- */
.prose { max-width: 42em; }
.prose h2 { font-size: clamp(22px, 2vw, 28px); margin-top: var(--s-6); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s-2); }
.center-block { text-align: center; padding: var(--s-8) 0; }
.center-block p { margin-inline: auto; }
.center-block .btn { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   23. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
  .pain-layout, .area-layout, .founder, .company-layout, .form-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .founder-band { grid-template-columns: 1fr; }
  .founder-visual { min-height: 0; height: clamp(260px, 52vw, 420px); }
  .founder-body { padding: var(--s-6) var(--gutter) var(--s-7); }
  .area-map { margin-right: 0; border-right: 1px solid #647184; min-height: 340px; }
  .area-map iframe { min-height: 340px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); min-height: min(760px, calc(100svh - var(--header-h))); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --header-h: 72px; --s-8: 72px; --s-7: 56px; }
  .brand img { width: 138px; height: 48px; }
  .nav-list {
    position: fixed; inset: var(--header-h) 0 0; background: var(--paper);
    display: grid; grid-auto-rows: max-content; gap: 0; align-content: start;
    padding: var(--s-3) var(--gutter) var(--s-7); overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease; z-index: 60;
  }
  .nav-list.is-open { transform: none; }
  .nav-list li { display: block; border-bottom: 1px solid var(--line); border-left: 0; }
  .nav-list li + li { border-left: 0; }
  /* ドロワーでは英字と和文を横並びにして1行に */
  .nav-list a {
    display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: 14px; padding: 18px 0; text-align: left;
  }
  .nav-list a b { font-size: 12px; color: var(--text-muted, var(--muted)); min-width: 76px; }
  .nav-list a span { font-size: 16px; color: var(--text-ink, var(--ink)); }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"] span { color: var(--text-accent, var(--accent)); }

  /* スマホ：電話ブロックのみ残し、受付時間は隠して1行に収める */
  .header-cta { margin-left: 0; }
  .hcta { padding: 0 14px; gap: 3px; }
  .hcta small { display: none; }
  .hcta strong { font-size: 15px; }
  .hcta svg { width: 19px; height: 19px; }
  .hcta-form { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 48px; height: 48px; align-self: center;
    border: 1px solid var(--line); background: #fff; margin-left: var(--s-2);
    margin-right: var(--gutter);
  }
  .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  body.is-locked { overflow: hidden; }

  .hero::after { display: none; }
  .hero-inner { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: var(--s-6) var(--gutter) var(--s-5); order: 2; }
  /* 高さは写真側に持たせる。figure を固定高にすると一言ボックスが溢れて次の要素に重なる */
  .hero-visual { order: 1; height: auto; }
  .hero-visual picture { height: clamp(260px, 46vw, 400px); }
  .hero-visual::before { background: linear-gradient(180deg, rgba(244,246,241,.5) 0%, rgba(244,246,241,0) 30%); }
  .hero-note { position: relative; z-index: 2; transform: none; max-width: none; margin: -32px var(--gutter) 0; inset: auto; }
  .section-grid { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
  .vertical-label { font-size: 10px; padding-left: 10px; min-height: 120px; }
  .service-index { grid-template-columns: 1fr; }
  .service-title { padding: 22px 0 12px; border-bottom: 0; }
  .service-copy { padding: 0 0 22px; }
  .ba-board { grid-template-columns: 1fr; }
  .ba-arrow { height: 60px; transform: rotate(90deg); }
  .roadmap, .roadmap--wrap { grid-template-columns: 1fr; gap: 0; row-gap: 0; margin-top: var(--s-5); overflow: visible; }
  .roadmap::before { display: block; top: 6px; bottom: 6px; left: 6px; right: auto; width: 1px; height: auto; }
  .road-step { padding: 0 0 26px 40px; }
  .road-step::before { top: 4px; left: 0; }
  .road-step::after { display: none; }
  .proof-band, .proof-band:nth-child(even) { grid-template-columns: 1fr; }
  .band-photo { min-height: 220px; }
  .proof-band:nth-child(even) .band-photo { order: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .company-layout figure { height: auto; min-height: 0; }
  .company-layout figure img { height: auto; }
  .cta-final .wrap { flex-direction: column; align-items: flex-start; }
  .price-sheet { padding: 10px 22px 22px; box-shadow: 10px 10px 0 #28364a; }

  /* スマホ固定CTA（電話＋フォームの2択） */
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .16);
    transition: transform .25s ease;
  }
  .mobile-cta.is-hidden { transform: translateY(120%); }
  .mobile-cta a { min-height: 56px; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
  .mobile-cta a:first-child { background: #fff; color: var(--text-ink, var(--ink)); }
  .mobile-cta a:last-child { background: var(--accent); color: #fff; }
  .site-footer { padding-bottom: 100px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pc { display: none; }
  .sp { display: inline; }
  .section-grid { display: block; }
  .vertical-label {
    writing-mode: horizontal-tb; border-left: 0; border-top: 1px solid currentColor;
    min-height: 0; padding: 10px 0 0; margin-bottom: var(--s-3); display: inline-block;
  }
  .hero-visual picture { height: clamp(280px, 62vw, 360px); }
  .hero-note { font-size: 15px; padding: 14px 18px; }
  .hero-actions .btn { width: 100%; }
  .hero-stat { padding: 14px 20px 14px 0; margin-right: 20px; }
  .price-row { grid-template-columns: 1fr; gap: 6px; }
  .price-value { text-align: left; }
  .ba-col { padding: var(--s-4) var(--s-3); }
  .trust-item { grid-template-columns: 44px 1fr; padding: var(--s-3); gap: 16px; }
  .trust-icon { width: 44px; height: 44px; }
  .trust-item.is-lead h3 { font-size: 19px; }
  .trust-icon svg { width: 24px; height: 24px; }
  .table-plain { font-size: 14px; }
  .table-plain th { width: 106px; }
  .quote { font-size: 17px; padding-left: var(--s-3); }
  .cta-final .wrap .btn { width: 100%; }
}

/* Source: refresh.css */

/* Design 07 restored for production at the user's request, 2026-09-06.
   Existing content is unchanged. */
:root {
  --ink: #1c211b;
  --deep: #f6f8ec;
  --paper: #fff;
  --sand: #f7f8f0;
  --line: #dce0d5;
  --muted: #62685f;
  --accent: #477321;
  --accent-dk: #36591a;
  --lime: #b4cb00;
  --serif: "Zen Kaku Gothic New", sans-serif;
  --mark: #63b334;   /* アクセントの丸印。ロゴのフレッシュグリーン */
}
.site-header { border: 0; position: relative; }
.header-inner { padding-inline: 32px; gap: 20px; }
.brand img { width: 180px; height: 64px; }
.nav-list li + li { border-left: 0; }
.nav-list a { padding-inline: 20px; gap: 8px; }
.nav-list a b { font-size: 12px; letter-spacing: .035em; }
.nav-list a span { font-size: 10px; }
.nav-list a::after { display: none; }
.nav-list a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: calc(50% - 6px);
  width: 12px; height: 7px; border-radius: 0 0 12px 12px; background: var(--mark);
}
.header-cta { margin-left: 16px; align-items: center; }
.hcta-tel { background: none; color: var(--text-ink, var(--ink)); padding: 0 0 0 24px; border-left: 1px solid var(--line); min-height: 44px; }
.hcta-tel:hover { background: none; color: var(--text-accent, var(--accent)); }
.hcta-tel svg, .hcta-form { display: none; }
.hcta-tel strong { font-size: 17px; }
.hero { isolation: isolate; overflow: hidden; }
.hero-shape { position: absolute; }
.hero::after { display: none; }
.hero-inner { display: block; position: relative; min-height: 680px; height: min(49vw, 790px); }
.hero-text { position: relative; z-index: 2; }
.hero-text {
  display: block; position: relative; z-index: 2; width: 70%;
  padding: clamp(44px, 4.2vw, 74px) 0 0 7.1%; pointer-events: none;
}
.hero-text a { pointer-events: auto; }
.hero .eyebrow { color: var(--text-accent, var(--accent)); font-size: 15px; letter-spacing: .08em; }
.hero .eyebrow::before { width: 9px; height: 9px; border-radius: 50%; background: var(--mark); }
.hero h1 { font-size: clamp(56px, 5.7vw, 92px); line-height: 1.18; letter-spacing: -.045em; margin: 16px 0 24px; }
.hero h1 .accent { color: var(--text-accent, var(--accent)); }
/* 小さい文字が写真に重ならない幅に抑える（アーチの左端は約550px） */
.hero-lead { font-size: 15px; line-height: 1.75; max-width: 26em; color: #4b5247; }
.hero-lead p + p { margin-top: 4px; }
.hero-actions { margin-top: 22px; flex-direction: column; align-items: flex-start; gap: 4px; }
.hero-actions .btn {
  padding: 0; min-height: 46px; border: 0; background: none; color: var(--text-ink, var(--ink));
  font-size: 14px; text-decoration: underline; text-underline-offset: 5px; gap: 14px;
}
.hero-actions .btn::before { content: "→"; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.hero-actions .btn:hover { color: var(--text-accent, var(--accent)); }
.hero-actions .btn-line { font-size: 12px; color: var(--text-muted, var(--muted)); }
.hero-actions .btn-line::before { background: #f0f3e4; color: var(--text-ink, var(--ink)); }
.hero-visual { position: absolute; width: 100%; height: 100%; top: 0; right: 0; left: 0; }
.hero-visual picture { clip-path: none; }
.hero-visual img { object-position: 58% center; }
.hero-visual::before {
  display: block; inset: 0; z-index: 1; pointer-events: none; clip-path: none;
  background: linear-gradient(96deg, rgba(247,248,240,.97) 0%, rgba(247,248,240,.93) 26%, rgba(247,248,240,.55) 44%, rgba(247,248,240,.12) 60%, rgba(247,248,240,0) 72%);
}
.hero-note {
  left: auto; right: 6%; bottom: 9%; transform: none; margin: 0;
  padding: 21px 28px 21px 49px; border: 0; border-radius: 4px;
  font-size: 15px; font-weight: 700; line-height: 1.75;
  box-shadow: 0 6px 26px #27300c12;
}
.hero-note::before { content: ""; position: absolute; left: 25px; top: 30px; width: 9px; height: 9px; background: var(--mark); border-radius: 50%; }
.hero > .wrap { width: 100%; padding: 44px 7.1%; background: var(--sand); }
.hero-stats { border: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-stat { padding: 4px 24px; margin: 0; text-align: center; }
.hero-stat b { color: var(--text-ink, var(--ink)); font-size: 32px; margin-bottom: 10px; }
.hero-stat:first-child b { color: var(--text-accent, var(--accent)); }
.section { padding-block: 100px; }
.section-grid { grid-template-columns: 1fr; gap: 22px; }
.vertical-label { writing-mode: horizontal-tb; min-height: 0; border: 0; padding: 0; font-size: 12px; letter-spacing: .08em; color: var(--text-accent, var(--accent)); opacity: 1; }
.vertical-label::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--mark); border-radius: 50%; margin-right: 10px; }
.sec-num { font-size: 36px; color: var(--text-accent, var(--accent)); }
.sec-label { padding-left: 0; }
.sec-label::before { display: none; }
.sec-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sec-head h2 { font-size: clamp(29px, 3vw, 44px); line-height: 1.5; }
.is-dark { background: var(--sand); color: var(--text-ink, var(--ink)); }
.is-dark .sec-head p, .is-dark .sec-kicker, .is-dark .note { color: var(--text-muted, var(--muted)); }
.is-dark .sec-num { color: var(--text-accent, var(--accent)); }
.is-dark .vertical-label { color: var(--text-accent, var(--accent)); }
.is-dark .mini-cta:hover { color: var(--text-accent, var(--accent)); }
.is-dark .table-plain { border-color: var(--line); }
.is-dark .table-plain th, .is-dark .table-plain td { border-bottom-color: var(--line); }
.pain-list { background: none; border: 0; gap: 0; }
.pain-list li { background: none; padding: 23px 0; border-bottom: 1px solid var(--line); }
.pain-icon, .service-icon, .trust-icon { border: 0; border-radius: 50%; background: #edf2d7; }
.pain-icon svg { stroke: var(--accent); }
.price-sheet { border-radius: 16px; box-shadow: none; padding: 20px 36px; }
.service-index, .service-title, .service-copy { border-color: var(--line); }
.btn { border-radius: 40px; }
.ba-col { border-radius: 0 0 16px 16px; }
.band-copy { background: #f2f5e4; color: var(--text-ink, var(--ink)); }
.band-copy b { color: var(--text-accent, var(--accent)); }
.trust-grid { gap: 20px; background: none; border: 0; }
.trust-item, .trust-item.is-lead { background: var(--sand); border-radius: 12px; box-shadow: none; }
.area-chips span { border-color: var(--line); border-radius: 30px; background: #fff; }
.quote { border-radius: 0 16px 16px 0; }
.founder-band.is-dark { background: var(--sand); }
.founder-band .quote { background: #fff; border-left-color: var(--accent); }
.founder-band .quote-name { color: var(--text-muted, var(--muted)); }
.site-footer { background: #f3f5eb; color: var(--text-ink, var(--ink)); }
.site-footer address, .site-footer .footer-tel, .copyright { color: var(--text-muted, var(--muted)); }
.site-footer a:hover { color: var(--text-accent, var(--accent)); }
.copyright { border-color: var(--line); }
.footer-brand img { background: transparent; padding: 0; }
.center-block h1 { font-size: clamp(28px, 5.2vw, 62px); }
@media (max-width: 1100px) {
  .nav-list a { padding-inline: 14px; }
  .hero-inner { min-height: 650px; }
  .hero-text { padding-left: 5%; }
  .hero h1 { font-size: 66px; }
  .hero-lead { max-width: 24em; font-size: 14px; }
  .hero-lead p { max-width: 23em; }
  .sec-head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .header-inner { padding-inline: 20px; gap: 8px; }
  .brand img { width: 138px; height: 48px; }
  .header-cta { margin-left: 0; }
  .hcta-tel { border: 0; padding: 0 12px; }
  .hcta-tel strong { font-size: 14px; }
  .nav-toggle { border: 0; margin: 0; width: 44px; }
  .nav-list { visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .nav-list.is-open { visibility: visible; }
  .nav-list a { padding: 22px 0; }
  .nav-list a b { font-size: 12px; }
  .nav-list a span { font-size: 16px; }
  .nav-list a[aria-current="page"]::before { display: none; }
  .hero-inner { min-height: 0; height: auto; padding-bottom: 10px; }
  .hero-text { width: 100%; padding: 40px 24px 0; }
  .hero .eyebrow { font-size: 12px; }
  .hero h1 { font-size: clamp(40px, 7.8vw, 66px); margin: 20px 0; }
  .hero-lead { font-size: 14px; max-width: 33em; }
  .hero-lead p { max-width: none; }
  .hero-actions { margin-top: 23px; gap: 2px; }
  .hero-actions .btn { width: auto; }
  .hero-visual { position: relative; width: 100%; right: -8%; height: clamp(340px, 65vw, 510px); margin-top: 18px; }
  .hero-visual picture { height: 100%; }
  .hero-visual::before { display: none; }
  .hero-note { position: absolute; bottom: 8%; right: 14%; padding: 16px 22px 16px 38px; max-width: none; font-size: 13px; }
  .hero-note::before { left: 18px; top: 25px; width: 7px; height: 7px; }
  .hero > .wrap { padding: 30px 20px; }
  .hero-stats { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .hero-stat { padding: 4px 8px; margin: 0; font-size: 11px; }
  .hero-stat:nth-child(2) { border-right: 0; }
  .hero-stat b { font-size: 26px; }
  .section { padding-block: 64px; }
  .vertical-label { margin-bottom: 0; }
  .section-grid { display: grid; }
  .price-sheet { padding: 16px 24px; box-shadow: none; }
  .pain-text { min-width: 0; }
  .sec-head p { min-width: 0; }
}
@media (max-width: 360px) {
  .header-inner { padding-inline: 12px; }
  .brand img { width: 116px; }
  .hcta-tel { padding-inline: 8px; }
  .hcta-tel strong { font-size: 12px; }
  .hero-text { padding-inline: 20px; }
  .hero h1 { font-size: 37px; }
  .trust-item { display: block; }
  .trust-icon { margin-bottom: 16px; }
  .quote { padding: 20px 16px; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   ヒーローのリード：実績 → 安心 → だからフランチャイズ の3段構成
   -------------------------------------------------------------------------- */
.hero-lead p { display: flex; align-items: baseline; gap: 12px; }
.hero-lead p b {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 3px;
  transform: translateY(-1px);
}
.hero-lead .is-lead-close {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-weight: 700; color: var(--text-ink, var(--ink)); font-size: 16px;
}
@media (max-width: 560px) {
  .hero-lead p { gap: 10px; }
  .hero-lead p b { font-size: 10px; padding: 3px 8px; }
  .hero-lead .is-lead-close { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   ファーストビュー直下：実績 → 安心 → だからフランチャイズ
   加盟を検討する人が最初に確かめる「数字」と「支え」を大きく見せる
   -------------------------------------------------------------------------- */
.fv-proof { background: var(--sand); padding: 11px 0 12px; }

.fv-row { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: clamp(14px, 1.6vw, 24px); align-items: center; }
.fv-row + .fv-row { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }

/* 見出しラベル（実績／安心） */
.fv-label { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.fv-label b {
  flex: none; font-family: var(--serif); font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1; color: #fff; background: var(--accent); padding: 8px 13px; letter-spacing: .08em;
}
.fv-label span { font-size: 11px; line-height: 1.4; color: var(--text-muted, var(--muted)); white-space: nowrap; }

/* 実績：数字を主役に */
.fv-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); }
.fv-nums li { display: flex; flex-direction: column; gap: 6px; }
.fv-nums b {
  font-family: var(--serif); font-weight: 700; line-height: 1.05;
  font-size: clamp(24px, 2.4vw, 34px); color: var(--text-accent, var(--accent)); letter-spacing: -.03em;
  white-space: nowrap;
}
.fv-nums span { font-size: 12px; color: var(--text-muted, var(--muted)); line-height: 1.4; }

/* 安心：支える範囲をチップで */
.fv-items { display: flex; flex-wrap: wrap; gap: 10px; }
.fv-items li {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: #fff; border: 1px solid var(--line); border-radius: 40px;
  font-size: clamp(14px, 1.2vw, 16px); font-weight: 700;
}
.fv-items svg { width: 15px; height: 15px; flex: none; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 締め：だから〜 */
.fv-conclusion {
  margin-top: 7px; padding-top: 7px; border-top: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px;
  font-family: var(--serif); font-size: clamp(14px, 1.2vw, 17px); color: var(--text-ink, var(--ink)); max-width: none;
}
.fv-conclusion > span { flex: 1 1 auto; }
.fv-conclusion b { color: var(--text-accent, var(--accent)); }
.fv-conclusion .mini-cta { margin: 0; margin-left: auto; font-family: var(--sans); font-size: 14px; }

@media (max-width: 900px) {
  .fv-row { grid-template-columns: 1fr; gap: 18px; }
  .fv-label { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
  .fv-label b { padding: 9px 15px; }
  .fv-conclusion { font-size: 19px; }
  .fv-conclusion .mini-cta { margin-left: 0; }
}
@media (max-width: 560px) {
  .fv-nums { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .fv-nums li:first-child { grid-column: 1 / -1; }
  .fv-items li { padding: 11px 16px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   実績・安心の帯を、写真の下端に重ねる（ヒーローの高さは変えない）
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* 文字と帯が重ならない高さを確保する */
  /* ヒーローの高さは変更しない */

  .fv-proof {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    background: rgba(247, 248, 240, .93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 3px solid var(--accent);
    box-shadow: 0 -16px 40px rgba(28, 33, 27, .08);
  }
  /* 一言ボックスは帯に隠れない位置へ */
  .hero-note { bottom: auto; top: 9%; }
}

/* 締めの一文は帯の外（写真の直下）に置く */
.fv-after { background: var(--sand); padding: 14px 0 16px; }
.fv-after .fv-conclusion { margin-top: 0; padding-top: 0; border-top: 0; }

/* ==========================================================================
   実績・安心の帯：デザインの精度を上げる
   参考手法：数字を特大に、単位だけ小さくベースラインを揃える
   （クボタ空調「350名」／昭建「92年」の数値表現）
   ========================================================================== */

/* --- パネル本体：面をきれいに見せる --- */
.fv-proof {
  border-top-width: 2px;
  box-shadow: 0 -16px 44px rgba(28, 33, 27, .10);
}
.fv-proof::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, .6); pointer-events: none;
}

/* --- ラベル（実績／安心）：小さく締めて、罫線で内容につなぐ --- */
.fv-label { gap: 11px; }
.fv-label b {
  font-size: clamp(14px, 1.25vw, 17px); padding: 7px 12px 6px;
  letter-spacing: .22em; text-indent: .22em; border-radius: 2px;
}
.fv-label span {
  position: relative; padding-left: 15px; letter-spacing: .04em;
}
.fv-label span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--line);
}

/* --- 実績：数字を主役に、単位は小さくベースライン揃え --- */
.fv-nums { gap: 0; }
.fv-nums li {
  flex-direction: column; gap: 3px;
  padding-left: clamp(14px, 1.6vw, 26px);
  border-left: 1px solid var(--line);
}
.fv-nums li:first-child { padding-left: 0; border-left: 0; }
.fv-nums span {
  order: -1; font-size: 11px; letter-spacing: .1em; color: var(--text-muted, var(--muted));
  line-height: 1.3;
}
.fv-nums b {
  display: flex; align-items: baseline; gap: 1px;
  font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "palt" 0;
}
.fv-nums b i {
  font-style: normal; font-size: .44em; letter-spacing: .02em;
  color: var(--text-accent, var(--accent)); opacity: .9; transform: translateY(-.04em);
}

/* --- 安心：タグを軽く、余白と線を整える --- */
.fv-items { gap: 7px; }
.fv-items li {
  padding: 6px 13px 6px 11px; gap: 7px;
  border-color: rgba(28, 33, 27, .14);
  font-size: 13px; letter-spacing: .02em;
  background: rgba(255, 255, 255, .92);
  transition: border-color .2s, background-color .2s;
}
.fv-items li:hover { border-color: var(--accent); background: #fff; }
.fv-items svg { width: 13px; height: 13px; stroke-width: 2.4; }

/* --- 行間の罫線を細く --- */
.fv-row + .fv-row { border-top-color: rgba(28, 33, 27, .1); }

@media (max-width: 900px) {
  .fv-nums li { padding-left: 0; border-left: 0; }
  .fv-label span::before { display: none; }
  .fv-label span { padding-left: 0; }
}

/* 余白に合わせて数字をひと回り大きく（帯の余裕内で最大化） */
.fv-proof { padding: 16px 0 18px; }
.fv-nums b { font-size: clamp(30px, 3.4vw, 50px); }
.fv-nums span { font-size: 12px; }
.fv-label b { font-size: clamp(15px, 1.35vw, 18px); }
.fv-items li { font-size: 13.5px; padding: 7px 14px 7px 12px; }

/* 数字は flex ではなく通常のインライン組に（flexだと単位が別行に折り返す） */
.fv-nums b {
  display: block; white-space: nowrap;
  line-height: 1.08;
}
.fv-nums b i {
  display: inline; vertical-align: baseline; transform: none;
  margin-left: 1px;
}

/* Source: fc.css */

/* ==========================================================================
   FC加盟募集レイアウト（刷新案R4の本実装）
   style.css → refresh.css の後に読み込む最終レイヤー
   ========================================================================== */

/* --- 配色をロゴ由来のブランドカラーに戻す --- */
:root {
  --ink:       #17243a;
  --deep:      #0f1b2d;
  --paper:     #f4f6f1;
  --sand:      #eef1ec;
  --line:      #d6dbd1;
  --muted:     #5c666e;
  --accent:    #1c6f57;
  --accent-dk: #145440;
  --brand-dk:  #0f4340;
  --lime:      #5aa832;
  --mark:      #5aa832;
  --header-h:  132px;
}

/* --------------------------------------------------------------------------
   ヘッダー：上段＝ロゴ＋電話＋CTA／下段＝目的別ナビ
   -------------------------------------------------------------------------- */
.site-header {
  height: auto; display: block; background: #fff;
  border-bottom: 0; box-shadow: 0 1px 0 var(--line);
  position: sticky; top: 0; z-index: 60;
}
.header-inner { display: block; width: 100%; padding: 0; }

.hd-top {
  display: flex; align-items: stretch; justify-content: space-between;
  height: 82px; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 150px; height: 52px; object-fit: contain; object-position: left center; }
.brand-sub {
  font-size: 14px; font-weight: 700; color: var(--text-accent, var(--accent)); letter-spacing: .06em;
  border-left: 1px solid var(--line); padding-left: 14px;
}
.hd-right { display: flex; align-items: stretch; }
.hd-tel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 22px; text-align: right;
}
.hd-tel small { font-size: 10.5px; color: var(--text-muted, var(--muted)); letter-spacing: .06em; line-height: 1.5; }
.hd-tel strong { font-family: var(--serif); font-size: 29px; line-height: 1.15; letter-spacing: .01em; color: var(--text-ink, var(--ink)); }
.hd-tel span { font-size: 10.5px; color: var(--text-muted, var(--muted)); line-height: 1.5; }
.hd-form {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 0 28px; background: var(--accent); color: #fff;
  transition: background-color .2s;
}
.hd-form:hover { background: var(--accent-dk); }
.hd-form svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.hd-form b { font-size: 14px; }

.nav { display: block; }
.nav-list {
  display: flex; justify-content: center; align-items: stretch;
  border-top: 1px solid var(--line); position: static; transform: none; background: none;
  padding: 0; gap: 0; overflow: visible;
}
.nav-list li { display: flex; border: 0; }
.nav-list li + li { border-left: 0; }
.nav-list a {
  display: flex; align-items: center; padding: 13px 26px;
  font-size: 14px; font-weight: 700; position: relative; border-bottom: 0; gap: 0;
}
.nav-list a b, .nav-list a span { font-size: inherit; color: inherit; letter-spacing: .02em; }
.nav-list a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px;
  background: var(--accent); transition: left .2s, right .2s;
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { left: 14%; right: 14%; }
.nav-list a[aria-current="page"] { color: var(--text-accent, var(--accent)); }

/* --------------------------------------------------------------------------
   ヒーロー：全面写真の上に直接コピー＋丸バッジ
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 0; }
.hero::after { display: none; }
.hero-inner {
  position: relative; display: block; height: auto;
  min-height: min(660px, calc(100svh - var(--header-h)));
  display: flex; align-items: center;
}
.hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; right: 0; z-index: 0; }
.hero-visual picture { display: block; width: 100%; height: 100%; clip-path: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 38%; }
.hero-visual::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: none;
  background: linear-gradient(100deg,
    rgba(244,246,241,.97) 0%, rgba(244,246,241,.92) 26%,
    rgba(244,246,241,.55) 44%, rgba(244,246,241,.05) 62%, rgba(244,246,241,0) 74%);
}
.hero-note { display: none; }

.hero-body {
  position: relative; z-index: 2;
  width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  padding-block: clamp(28px, 3.4vw, 52px);
}
.hero-text { display: block; padding: 0; }

.fc-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; padding: 9px 18px;
}
.fc-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

.hero h1 {
  font-family: var(--sans); font-weight: 700;
  margin: 18px 0 0; font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.28; letter-spacing: -.03em;
}
.hero h1 em { font-style: normal; color: var(--text-accent, var(--accent)); }
.hero h1 .mk { background: linear-gradient(transparent 62%, rgba(90, 168, 50, .32) 62%); }

.hero-lead {
  margin-top: 18px; font-size: clamp(15px, 1.35vw, 18px); font-weight: 700;
  line-height: 1.85; max-width: 27em; color: var(--text-ink, var(--ink));
}
.hero-lead p { max-width: none; display: block; }
.hero-lead p + p { margin-top: 0; }
.hero-lead b { color: var(--text-accent, var(--accent)); font-size: 1.12em; }

.hero-actions { margin-top: 24px; display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; }
.hero-actions .btn {
  min-height: 60px; padding: 12px 30px; font-size: 16px; font-weight: 700;
  border: 2px solid transparent; border-radius: 0; text-decoration: none; background: none;
}
.hero-actions .btn::before { display: none; }
.hero-actions .btn-primary { background: var(--accent); color: #fff; }
.hero-actions .btn-primary:hover { background: var(--accent-dk); }
.hero-actions .btn-line { border-color: var(--ink); background: rgba(255, 255, 255, .8); color: var(--text-ink, var(--ink)); font-size: 16px; }
.hero-actions .btn-line:hover { background: var(--ink); color: #fff; }

/* 丸バッジ */
.fc-badges { display: flex; flex-direction: column; gap: 16px; }
.fc-badge {
  width: clamp(156px, 14.5vw, 212px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 14px;
  box-shadow: 0 10px 26px rgba(15, 27, 45, .2);
}
.fc-badge small { font-size: 12px; letter-spacing: .06em; line-height: 1.55; opacity: .95; }
.fc-badge b { font-family: var(--serif); line-height: 1.05; margin-top: 2px; letter-spacing: -.02em; }
.fc-badge .n { font-size: clamp(32px, 3.4vw, 48px); }
.fc-badge .u { font-size: .46em; margin-left: 1px; }
.fc-badge--record { background: var(--accent); }
.fc-badge--safe { background: var(--ink); }
.fc-badge--safe b { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.45; }

/* --------------------------------------------------------------------------
   直下の証明帯（実績・安心・条件）
   -------------------------------------------------------------------------- */
.fv-proof {
  position: static; left: auto; right: auto; top: auto; bottom: auto;
  background: var(--sand); border-top: 4px solid var(--accent);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  padding: clamp(22px, 2.4vw, 34px) 0;
}
.fv-proof::after { display: none; }
.fv-proof .wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); padding: 0; }
.fv-row { grid-template-columns: 150px minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); align-items: center; }
.fv-row + .fv-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fv-label b { background: var(--accent); }
.fv-nums b { color: var(--text-accent, var(--accent)); font-size: clamp(26px, 2.9vw, 44px); }
.fv-items svg { stroke: var(--accent); }
.fv-items li { border-radius: 0; background: #fff; }
.fv-items li:hover { border-color: var(--accent); }
.fv-after { background: var(--sand); padding: 0 0 clamp(20px, 2.2vw, 30px); }
.fv-conclusion { border-top: 2px solid var(--ink); margin-top: 0; padding-top: 12px; }
.fv-conclusion b { color: var(--text-accent, var(--accent)); }

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --header-h: 108px; }
  .hd-top { height: 66px; }
  .brand-sub, .hd-tel small, .hd-tel span { display: none; }
  .brand img { width: 120px; height: 42px; }
  .hd-tel { padding: 0 12px; }
  .hd-tel strong { font-size: 20px; white-space: nowrap; }
  .hd-form { padding: 0 16px; }
  .hd-form b { font-size: 12px; }

  .nav-list {
    position: static; inset: auto; transform: none; background: #fff;
    display: flex; justify-content: flex-start; overflow-x: auto; padding: 0;
    grid-auto-rows: auto; align-content: initial;
  }
  .nav-list.is-open { transform: none; }
  .nav-list a { padding: 11px 16px; font-size: 13px; white-space: nowrap; }
  .nav-toggle { display: none; }

  .hero-inner { min-height: 0; display: block; }
  .hero-visual { position: relative; inset: auto; width: 100%; height: clamp(230px, 48vw, 340px); right: 0; margin: 0; }
  .hero-visual::before {
    background: linear-gradient(180deg, rgba(244,246,241,.55) 0%, rgba(244,246,241,.1) 40%, rgba(244,246,241,0) 100%);
  }
  .hero-body { grid-template-columns: 1fr; gap: 20px; padding-block: 24px 28px; }
  .hero-actions .btn { width: 100%; }
  .fc-badges { flex-direction: row; gap: 12px; }
  .fc-badge { width: clamp(126px, 38vw, 158px); }

  .fv-row { grid-template-columns: 1fr; gap: 12px; }
  .fv-nums { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fv-nums li { padding-left: 0; border-left: 0; }
  .fv-nums li:first-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   旧テーマの残り指定を打ち消す
   -------------------------------------------------------------------------- */
/* .hero-text の width:70% がテキスト列を狭めていた */
.hero-text { width: auto; max-width: none; pointer-events: auto; }

/* リード文の <b> が旧「実績」ラベルのスタイル（緑の箱）を拾っていた */
.hero-lead p b {
  background: none; color: var(--text-accent, var(--accent)); padding: 0; border-radius: 0;
  font-size: 1.12em; transform: none; letter-spacing: 0;
}

/* バッジは面積が小さいので、単位を小さくしすぎると「億」が点に見える */
.fc-badge .u { font-size: .62em; }

/* スマホ：見出しが4行になるためサイズを下げる（規約は最大3行） */
@media (max-width: 560px) {
  .hero h1 { font-size: 25px; line-height: 1.35; }
  .hero-lead { font-size: 14.5px; }
  .fc-tag { font-size: 11.5px; padding: 8px 14px; }
}

/* 単位の文字は opacity で薄めない（4.38 でコントラスト基準4.5未満だった） */
.fv-nums b i { opacity: 1; color: var(--text-accent, var(--accent)); }

/* 旧CSSの order:2 でスマホ時にバッジが見出しより先に出ていた */
@media (max-width: 900px) {
  .hero-text { order: 0; }
  .fc-badges { order: 1; }
  .nav-list { justify-content: flex-start; }
  .nav-list a { color: var(--text-ink, var(--ink)); }
}

/* refresh.css がドロワー前提で .nav-list を visibility:hidden にしていた。
   FC型は常時表示の横並びナビなので解除する */
@media (max-width: 900px) {
  .nav-list { visibility: visible; }
}

/* ==========================================================================
   CTA設計の強化
   ========================================================================== */

/* --- 押す直前の不安を消す一言 --- */
.cta-assure {
  margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-muted, var(--muted));
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.cta-final .cta-assure { color: rgba(255, 255, 255, .93); justify-content: center; margin-top: 10px; }
.cta-final-act { display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------------------------
   追従CTA：スマホは下部固定、PCは右下に浮かせる
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: flex; position: fixed; z-index: 70;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-cta.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
.mobile-cta a {
  display: flex; align-items: center; gap: 10px; text-align: left;
  transition: background-color .2s;
}
.mobile-cta svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mobile-cta span { display: flex; flex-direction: column; line-height: 1.3; }
.mobile-cta b { font-size: 14px; font-weight: 700; }
.mobile-cta small { font-size: 10.5px; opacity: .82; }
.mobile-cta .fx-tel { background: var(--ink); color: #fff; }
.mobile-cta .fx-tel:hover { background: var(--deep); }
.mobile-cta .fx-form { background: var(--accent); color: #fff; }
.mobile-cta .fx-form:hover { background: var(--accent-dk); }

/* PC：右下に縦積みで浮かせる */
@media (min-width: 901px) {
  .mobile-cta {
    right: 24px; bottom: 24px; left: auto;
    flex-direction: column; gap: 10px; width: auto;
    filter: drop-shadow(0 10px 26px rgba(15, 27, 45, .22));
  }
  .mobile-cta a { padding: 14px 22px; min-width: 232px; }
  .mobile-cta.is-hidden { transform: translateY(24px); }
}

/* スマホ：画面下に2分割で固定 */
@media (max-width: 900px) {
  .mobile-cta {
    left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 22px rgba(15, 27, 45, .18);
  }
  .mobile-cta a { justify-content: center; padding: 11px 10px; min-height: 62px; }
  .mobile-cta b { font-size: 13px; }
  .mobile-cta small { font-size: 9.5px; }
  .site-footer { padding-bottom: 110px; }
}

/* ==========================================================================
   ファーストビューに「実績・安心・条件」まで収める
   ========================================================================== */
@media (min-width: 901px) {
  /* ヒーローが画面を占有していたので、中身に合わせた高さにする */
  .hero-inner { min-height: 0; }
  .hero-body { padding-block: 20px 22px; }

  .fc-tag { padding: 7px 15px; font-size: 12.5px; }
  .hero h1 { margin-top: 12px; font-size: clamp(28px, 2.85vw, 40px); line-height: 1.3; }
  .hero-lead { margin-top: 12px; font-size: 15px; line-height: 1.7; max-width: 32em; }
  .hero-actions { margin-top: 16px; gap: 10px; }
  .hero-actions .btn { min-height: 52px; padding: 10px 24px; font-size: 15px; }
  .cta-assure { margin-top: 8px; font-size: 12px; }

  /* バッジは横並びにして高さを抑える */
  .fc-badges { flex-direction: row; gap: 14px; }
  .fc-badge { width: clamp(132px, 11.4vw, 168px); padding: 10px; }
  .fc-badge small { font-size: 11px; line-height: 1.45; }
  .fc-badge .n { font-size: clamp(26px, 2.5vw, 36px); }
  .fc-badge--safe b { font-size: clamp(14px, 1.25vw, 17px); line-height: 1.4; }

  /* 帯と締めを詰める */
  .fv-proof { padding: 14px 0 12px; }
  .fv-row + .fv-row { margin-top: 10px; padding-top: 10px; }
  .fv-nums b { font-size: clamp(24px, 2.5vw, 36px); }
  .fv-after { padding: 0 0 14px; }
  .fv-conclusion { padding-top: 10px; font-size: clamp(15px, 1.3vw, 18px); }
  .header-inner .nav-list a { padding: 11px 24px; }
}

/* 画面高700pxでも収まるよう、さらに詰める */
@media (min-width: 901px) {
  .header-inner .nav-list a { padding: 9px 24px; }
  .hero-body { padding-block: 14px 16px; }
  .hero-actions { margin-top: 12px; }
  .fv-proof { padding: 10px 0 10px; }
  .fv-after { padding: 0 0 10px; }
  .fv-conclusion { padding-top: 8px; }
}

/* ラベル列が狭く「本部が支える範囲」がチップに接していた */
@media (min-width: 901px) {
  .fv-row { grid-template-columns: 176px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   ファーストビューを画面ぴったりに満たす
   余った高さはヒーロー（写真）に配分し、「だから〜」の行が画面下端に来る。
   次のセクション（代表あいさつ）が下から覗き込まない。
   ヘッダー実測 128px ＋「だから〜」の行 60px ＝ 188px
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero { display: flex; flex-direction: column; min-height: calc(100svh - 188px); }
  .hero-inner { flex: 1 1 auto; min-height: 0; }
  .fv-proof { flex: none; }
}

/* Source: care.css */

/* ==========================================================================
   合同会社あいびー — 「PANORAMIC DIGNITY」デザイン層
   デザインの正：proof/design-proposals-20260907/care-reference/01-panoramic-dignity.png
   骨格：白い細ヘッダー（1段）／全幅の写真ヒーロー（左の暗がりに白い明朝）／
         白い余白の広い実績面（左＝見出し・右＝数字）／淡い灰緑の細罫パネル（支援・費用）
   ========================================================================== */

:root {
  --header-h: 92px;
  --ink:       #22282a;  /* 主文字（やや温かい濃墨） */
  --muted:     #566059;  /* 補助文字（白地でコントラスト4.5:1以上） */
  --line:      #dde2dc;  /* 細罫 */
  --paper:     #ffffff;  /* 地色は白 */
  --sand:      #f2f5f1;  /* 淡い灰緑（パネル・交互の面） */
  --accent:    #1c6f57;
  --accent-dk: #14543f;
  --shade:     #191d1a;  /* 写真の上の暗がり */
  --radius:    2px;
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

body { background: var(--paper); color: var(--text-ink, var(--ink)); }

/* --------------------------------------------------------------------------
   1. 白い細ヘッダー（1段組み）
   -------------------------------------------------------------------------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
.header-inner {
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 38px);
  width: min(1440px, calc(100% - var(--gutter) * 2));
  margin-inline: auto; min-height: var(--header-h); padding: 0;
}
.hd-top, .hd-right { display: contents; }

.brand { order: 0; margin-right: auto; display: flex; align-items: center; padding: 0; }
.brand img { width: 148px; height: 51px; object-fit: contain; }
.brand-sub { display: none; }

.site-header .nav { order: 1; border: 0; background: none; }
.site-header .nav-list {
  display: flex; align-items: center; gap: clamp(15px, 1.9vw, 36px);
  border: 0; background: none; padding: 0; margin: 0; min-height: 0; visibility: visible;
}
.header-inner .nav-list a {
  padding: 8px 0; font-size: 14.5px; font-weight: 700; color: var(--text-ink, var(--ink));
  letter-spacing: .04em; border: 0; background: none; border-radius: 0;
}
.header-inner .nav-list a::before,
.header-inner .nav-list a::after { display: none; }
.header-inner .nav-list a:hover { color: var(--text-accent, var(--accent)); }
.header-inner .nav-list a[aria-current="page"] { color: var(--text-accent, var(--accent)); font-weight: 700; }

.hd-form {
  order: 2; display: inline-flex; flex-direction: row; align-items: center; gap: 9px;
  background: var(--accent); color: #fff; border-radius: var(--radius);
  padding: 13px 22px; min-height: 0; height: auto; width: auto;
  font-size: 14.5px; font-weight: 700; letter-spacing: .04em;
}
.hd-form:hover { background: var(--accent-dk); }
.hd-form svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.hd-form b { font-weight: 700; }

.hd-tel { order: 3; display: block; text-align: right; background: none; color: var(--text-ink, var(--ink)); padding: 0; }
.hd-tel small { display: none; }
.hd-tel strong {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  font-family: var(--sans); font-size: clamp(19px, 1.5vw, 23px); font-weight: 700;
  letter-spacing: .02em; line-height: 1.2; color: var(--text-ink, var(--ink));
}
.hd-tel strong::before {
  content: ""; width: 17px; height: 17px; flex: none; background: var(--accent);
  -webkit-mask: var(--ico-tel) center / contain no-repeat;
  mask: var(--ico-tel) center / contain no-repeat;
}
.hd-tel span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted, var(--muted)); letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   2. ヒーロー：全幅の写真＋左の暗がりに白い明朝
   -------------------------------------------------------------------------- */
.hero { display: block; position: relative; overflow: hidden; background: var(--shade); min-height: 0; }
.hero-inner { display: block; position: relative; min-height: 0; height: auto; }

.hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-visual picture { display: block; width: 100%; height: 100%; clip-path: none; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 46%; filter: none; }
.hero-visual::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; clip-path: none;
  background:
    linear-gradient(97deg,
      rgba(21, 24, 21, .92) 0%,  rgba(21, 24, 21, .86) 20%,
      rgba(21, 24, 21, .62) 36%, rgba(21, 24, 21, .28) 50%,
      rgba(21, 24, 21, .07) 62%, rgba(21, 24, 21, 0) 73%),
    linear-gradient(180deg, rgba(21, 24, 21, .34) 0%, rgba(21, 24, 21, 0) 32%);
}

.hero-body {
  position: relative; z-index: 2;
  width: min(1440px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  display: flex; align-items: center;
  padding-block: clamp(40px, 4.6vw, 74px);
}
.hero-text { display: block; width: min(48%, 31em); padding: 0; }

/* カテゴリ（小さく字間を広く。囲みは付けない） */
.fc-tag {
  display: block; background: none; border: 0; padding: 0; border-radius: 0;
  color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 700; letter-spacing: .17em;
}
.fc-tag::before { display: none; }

.hero h1 {
  margin: clamp(16px, 1.7vw, 24px) 0 0;
  font-family: var(--serif); font-weight: 700; color: #fff;
  font-size: clamp(33px, 3.6vw, 54px); line-height: 1.42; letter-spacing: .045em;
  text-shadow: 0 2px 26px rgba(10, 12, 10, .4);
}
.hero h1 em, .hero h1 .mk { font-style: normal; color: #fff; background: none; padding: 0; }
.hero h1 .hero-sub {
  display: block; margin-top: clamp(13px, 1.4vw, 20px);
  font-size: clamp(17px, 1.4vw, 22px); line-height: 1.75; letter-spacing: .06em;
  color: rgba(255, 255, 255, .97); text-shadow: 0 2px 20px rgba(10, 12, 10, .4);
}

/* 見出しと補足をつなぐ短い罫 */
.hero-desc {
  position: relative; margin-top: clamp(20px, 2.2vw, 32px); padding-top: clamp(20px, 2.2vw, 30px);
  font-size: 15px; line-height: 1.9; letter-spacing: .04em; color: #fff; max-width: 26em;
}
.hero-desc::before {
  content: ""; position: absolute; left: 0; top: 0; width: 62px; height: 1px;
  background: rgba(255, 255, 255, .6);
}

.hero-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
  margin-top: clamp(22px, 2.4vw, 34px);
}
.hero-actions .btn-ghost {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 34px;
  min-height: 58px; padding: 14px 24px; min-width: 300px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--radius);
  background: none; color: #fff; font-size: 15.5px; font-weight: 700; letter-spacing: .06em;
}
.hero-actions .btn-ghost::after { content: "\203A"; font-size: 20px; line-height: 1; }
.hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.hero-link {
  display: inline-flex; align-items: center; gap: 11px;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 4px;
}
.hero-link::after { content: "\203A"; font-size: 17px; line-height: 1; }
.hero-link:hover { border-bottom-color: #fff; }
.hero .cta-assure { margin-top: 13px; font-size: 12.5px; color: #fff; justify-content: flex-start; }
.hero-note, .fc-badges { display: none; }

/* --------------------------------------------------------------------------
   3. 実績：白い余白の広い面。左＝見出し／右＝数字（左右非対称）
   -------------------------------------------------------------------------- */
.fv-proof {
  position: static; background: var(--paper); border: 0; box-shadow: none;
  padding: clamp(34px, 3.8vw, 58px) 0 clamp(26px, 2.8vw, 40px);
}
.fv-proof::after, .fv-proof::before { display: none; }
.fv-proof .wrap {
  width: min(1440px, calc(100% - var(--gutter) * 2)); padding: 0;
  display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 58px); align-items: start;
}
.fv-head h2 {
  margin: 0; font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent));
  font-size: clamp(22px, 2vw, 30px); line-height: 1.55; letter-spacing: .05em;
}
.fv-head p { margin-top: 13px; font-size: 14px; line-height: 1.9; color: var(--text-muted, var(--muted)); }

.fv-nums {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
  margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line);
}
.fv-nums li { padding: 2px clamp(12px, 1.6vw, 26px) 2px clamp(16px, 2vw, 34px); }
.fv-nums li + li { border-left: 1px solid var(--line); }
.fv-nums span { display: block; font-size: 13.5px; letter-spacing: .06em; color: var(--text-muted, var(--muted)); line-height: 1.5; }
.fv-nums b {
  display: block; margin-top: 5px; font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent));
  font-size: clamp(36px, 4vw, 60px); line-height: 1.15; letter-spacing: .01em; white-space: nowrap;
}
.fv-nums b i { font-style: normal; font-size: .42em; letter-spacing: .04em; opacity: 1; color: var(--text-accent, var(--accent)); }

/* --------------------------------------------------------------------------
   4. 本部が支えること／加盟にかかる費用（淡い灰緑の細罫パネル）
   -------------------------------------------------------------------------- */
.fv-after { background: var(--paper); padding: 0 0 clamp(30px, 3.2vw, 52px); }
.fv-after .wrap { width: min(1440px, calc(100% - var(--gutter) * 2)); }
.fv-panel {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius);
}
.fv-panel-col { padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2.2vw, 36px); text-align: center; }
.fv-panel-col + .fv-panel-col { border-left: 1px solid var(--line); }
.fv-panel-t { font-size: 13.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted, var(--muted)); }

.fv-items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  margin: 13px 0 0; padding: 0; list-style: none;
}
.fv-items li {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 15px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-ink, var(--ink));
}
.fv-items svg { display: none; }

.fv-fee {
  margin-top: 11px; font-family: var(--serif); font-weight: 700; color: var(--text-ink, var(--ink));
  font-size: clamp(16px, 1.4vw, 21px); letter-spacing: .05em; line-height: 1.45;
}
.fv-fee b { color: var(--text-accent, var(--accent)); font-size: 1.5em; font-weight: 700; letter-spacing: 0; }
.fv-fee .sep { color: #b9c2b8; margin: 0 .45em; }
.fv-panel .mini-cta { margin-top: 9px; }

/* --------------------------------------------------------------------------
   5. サイト全体に同じ言語を通す
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .045em; }
.section h2, .founder-band h2, .cta-final h2, .page-head h1, .numbers h2 {
  font-weight: 700; line-height: 1.5;
}
.section h2, .founder-band h2, .page-head h1, .numbers h2 { color: var(--text-accent, var(--accent)); }
.sec-label { letter-spacing: .16em; font-size: 12px; color: var(--text-muted, var(--muted)); font-weight: 700; }

.section { background: var(--paper); }
.section.is-dark, .founder-band.is-dark, .numbers { background: var(--sand); }

/* 角は小さく、面は細罫で締める */
.btn, .card, .box, .faq-item, .price-table, input, textarea, select { border-radius: var(--radius); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.mini-cta {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--text-accent, var(--accent));
  border-bottom: 1px solid rgba(28, 111, 87, .45); padding-bottom: 3px;
}
.mini-cta::after { content: "\203A"; font-size: 16px; line-height: 1; }
.mini-cta:hover { border-bottom-color: var(--accent); }

/* 数字の見せ方を実績面に合わせる */
.numbers .num b, .num-list b { font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent)); }

/* --------------------------------------------------------------------------
   6. スマートフォン
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* スマホは2段（上＝ロゴ・電話・お問い合わせ／下＝横スクロールのナビ） */
  :root { --header-h: 108px; }
  .header-inner { display: block; width: 100%; min-height: 0; }
  .hd-top {
    display: flex; align-items: center; gap: 10px; height: 66px;
    width: min(1440px, calc(100% - var(--gutter) * 2)); margin-inline: auto;
  }
  .hd-right { display: flex; align-items: center; gap: 10px; }
  .brand { margin-right: auto; }
  .brand img { width: 118px; height: 41px; }
  .site-header .nav { border-top: 1px solid var(--line); }
  .site-header .nav-list {
    display: flex; justify-content: flex-start; gap: 0; overflow-x: auto;
    width: min(1440px, calc(100% - var(--gutter) * 2)); margin-inline: auto;
  }
  .header-inner .nav-list a { padding: 13px 16px; font-size: 13px; white-space: nowrap; }
  .header-inner .nav-list li:first-child a { padding-left: 0; }
  .nav-toggle { display: none; }
  /* 横幅が足りないのでアイコンだけの正方形に（読み上げ用の文字は残す） */
  .hd-tel { order: 2; }
  .hd-form {
    order: 3; flex: none; width: 46px; height: 46px; padding: 0; gap: 0;
    justify-content: center; overflow: hidden;
  }
  .hd-form svg { width: 21px; height: 21px; flex: none; }
  .hd-form b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hd-tel strong { font-size: 19px; white-space: nowrap; }
  .hd-tel span { display: none; }

  .hero-visual img { object-position: 68% 46%; }
  .hero-visual::before {
    background: linear-gradient(180deg,
      rgba(21, 24, 21, .74) 0%, rgba(21, 24, 21, .46) 36%,
      rgba(21, 24, 21, .64) 70%, rgba(21, 24, 21, .88) 100%);
  }
  .hero-body { padding-block: 44px 40px; min-height: 60svh; }
  .hero-text { width: 100%; }
  .hero h1 { font-size: clamp(27px, 7.2vw, 34px); line-height: 1.45; }
  .hero h1 .hero-sub { font-size: 16px; }
  .hero-desc { max-width: none; font-size: 14.5px; }
  .hero-actions { align-self: stretch; width: 100%; }
  .hero-actions .btn-ghost { width: 100%; min-width: 0; }

  .fv-proof .wrap { grid-template-columns: 1fr; gap: 20px; }
  .fv-nums { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--line); }
  .fv-nums li { padding: 13px 0; }
  .fv-nums li + li { border-left: 0; border-top: 1px solid var(--line); }
  .fv-nums b { font-size: clamp(34px, 9.5vw, 46px); }

  .fv-panel { grid-template-columns: 1fr; }
  .fv-panel-col + .fv-panel-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   7. ファーストビューを画面ちょうどに満たす
   ヒーロー・実績・費用パネルを1つの箱にまとめ、余った高さは写真に配分する。
   -------------------------------------------------------------------------- */
.hd-form { align-self: center; }

@media (min-width: 901px) {
  .fv { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); }
  .hero { flex: 1 1 auto; display: flex; }
  .hero-inner { flex: 1 1 auto; display: flex; }
  .hero-body { flex: none; }  /* 幅は自前の min() を使う（伸ばすと左の余白が消える） */
  .fv-proof, .fv-after { flex: none; }

}

/* --------------------------------------------------------------------------
   8. タップ領域を44px以上にする
   下線はボーダーではなく背景の線で引き、上下に見えない余白を足す。
   -------------------------------------------------------------------------- */
.hd-tel {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  min-height: 46px;
}
.header-inner .nav-list a { padding-block: 13px; }

.mini-cta, .hero-link {
  padding: 11px 0 11px; border-bottom: 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
}
.mini-cta { color: var(--text-accent, var(--accent)); }
.mini-cta:hover, .hero-link:hover { opacity: .78; }

/* --------------------------------------------------------------------------
   9. 見出しの大きさを抑える
   参考デザインの狙い：主見出しは「大きすぎない、品のある大きさ」
   -------------------------------------------------------------------------- */
.page-head h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.5; }
.section h2, .founder-band h2, .numbers h2 { font-size: clamp(25px, 2.6vw, 37px); line-height: 1.5; }
.cta-final h2 { font-size: clamp(24px, 2.5vw, 35px); line-height: 1.5; }
.section h3, .founder-band h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; }

/* --------------------------------------------------------------------------
   10. 04 実績の帯：地色と数字の組み方をサイトに揃える
   -------------------------------------------------------------------------- */
.numbers { background: var(--paper); }
.band-copy { background: var(--sand); color: var(--text-ink, var(--ink)); }
.band-copy b { font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent)); font-size: clamp(34px, 4.2vw, 58px); }
.band-copy span { color: var(--text-muted, var(--muted)); letter-spacing: .06em; }
.quote, .quote-box { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   11. 新しいヒーロー写真（和室で向かい合う場面）に合わせた調整
   写真そのものが左に暗がりを持つので、被せる暗幕は弱める。
   -------------------------------------------------------------------------- */
.hero-visual img { object-position: 64% 62%; }
.hero-visual::before {
  background:
    linear-gradient(97deg,
      rgba(18, 20, 17, .80) 0%,  rgba(18, 20, 17, .70) 22%,
      rgba(18, 20, 17, .46) 38%, rgba(18, 20, 17, .20) 52%,
      rgba(18, 20, 17, .05) 64%, rgba(18, 20, 17, 0) 75%),
    linear-gradient(180deg, rgba(18, 20, 17, .28) 0%, rgba(18, 20, 17, 0) 30%);
}
@media (max-width: 900px) {
  .hero-visual img { object-position: 52% 46%; }
  .hero-visual::before {
    background: linear-gradient(180deg,
      rgba(18, 20, 17, .76) 0%, rgba(18, 20, 17, .52) 36%,
      rgba(18, 20, 17, .66) 70%, rgba(18, 20, 17, .88) 100%);
  }
}

/* --------------------------------------------------------------------------
   12. ファーストビューを1画面に収める（参考デザインと同じ「開いた時点で全部見える」状態）
   ヘッダー＋ヒーロー＋実績＋費用パネルの合計を 100svh に収め、
   余った高さはヒーロー（写真）に配分する。
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  :root { --header-h: 78px; }
  .header-inner { min-height: 78px; }
  .brand img { width: 132px; height: 45px; }
  .header-inner .nav-list a { font-size: 14px; padding-block: 11px; }
  .hd-form { padding: 11px 19px; font-size: 14px; }
  .hd-tel strong { font-size: clamp(18px, 1.35vw, 21px); }
  .hd-tel { min-height: 44px; }

  /* ヒーロー：参考どおり「本題とCTAだけ」。字を一段落として高さを詰める */
  .hero-body { padding-block: clamp(22px, 2.2vw, 34px); }
  .hero h1 {
    margin-top: clamp(10px, 1.1vw, 15px);
    font-size: clamp(30px, 2.95vw, 44px); line-height: 1.38;
  }
  .hero h1 .hero-sub { margin-top: clamp(9px, .95vw, 13px); font-size: clamp(15px, 1.22vw, 18.5px); line-height: 1.7; }
  .hero-desc { margin-top: clamp(13px, 1.4vw, 19px); padding-top: clamp(13px, 1.4vw, 19px); font-size: 14.5px; line-height: 1.8; }
  .hero-actions { margin-top: clamp(15px, 1.6vw, 22px); gap: 11px; }
  .hero-actions .btn-ghost { min-height: 50px; padding: 12px 22px; min-width: 286px; font-size: 15px; }
  .hero-link { font-size: 13.5px; }
  .hero .cta-assure { margin-top: 9px; font-size: 11.5px; }
  .fc-tag { font-size: 12.5px; }

  /* 実績：見出しと数字の高さを詰める */
  .fv-proof { padding: clamp(20px, 2.1vw, 32px) 0 clamp(16px, 1.7vw, 24px); }
  .fv-head h2 { font-size: clamp(19px, 1.72vw, 26px); line-height: 1.5; }
  .fv-head p { margin-top: 9px; font-size: 13px; line-height: 1.8; }
  .fv-nums b { font-size: clamp(30px, 3.1vw, 46px); margin-top: 3px; }
  .fv-nums span { font-size: 12.5px; }

  /* 費用パネル */
  .fv-after { padding-bottom: clamp(18px, 1.9vw, 28px); }
  .fv-panel-col { padding: clamp(13px, 1.4vw, 19px) clamp(18px, 2.2vw, 36px); }
  .fv-panel-t { font-size: 13px; }
  .fv-items { margin-top: 10px; gap: 8px; }
  .fv-items li { padding: 7px 14px; font-size: 13px; }
  .fv-fee { margin-top: 9px; font-size: clamp(15px, 1.3vw, 19px); }
  .fv-panel .mini-cta { margin-top: 4px; font-size: 13px; }
}

/* リンクと安心の一言を1行に並べる（縦の高さを使わない） */
.hero-actions-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.hero-actions-sub .cta-assure { display: inline; margin: 0; color: rgba(255, 255, 255, .92); font-size: 12.5px; }

@media (min-width: 901px) {
  /* --- さらに詰めて 1画面に収める --- */
  :root { --header-h: 70px; }
  .header-inner { min-height: 70px; }
  .brand img { width: 124px; height: 43px; }
  .hd-form { padding: 10px 18px; }
  .hd-tel { min-height: 44px; }

  .hero-body { padding-block: clamp(16px, 1.6vw, 22px); }
  .hero h1 { margin-top: clamp(8px, .8vw, 11px); font-size: clamp(27px, 2.5vw, 37px); line-height: 1.36; }
  .hero h1 .hero-sub { margin-top: clamp(7px, .75vw, 10px); font-size: clamp(14px, 1.08vw, 16.5px); line-height: 1.65; }
  .hero-desc { margin-top: clamp(10px, 1vw, 14px); padding-top: clamp(10px, 1vw, 14px); font-size: 14px; line-height: 1.75; }
  .hero-actions { margin-top: clamp(11px, 1.15vw, 16px); gap: 8px; }
  .hero-actions .btn-ghost { min-height: 46px; padding: 10px 20px; min-width: 268px; font-size: 14.5px; }
  .hero-actions-sub .cta-assure { font-size: 12px; }
  .fc-tag { font-size: 12px; }

  .fv-proof { padding: clamp(14px, 1.5vw, 22px) 0 clamp(11px, 1.2vw, 17px); }
  .fv-head h2 { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.48; }
  .fv-head p { margin-top: 6px; font-size: 12.5px; line-height: 1.7; }
  .fv-nums b { font-size: clamp(27px, 2.7vw, 40px); margin-top: 2px; }
  .fv-nums span { font-size: 12px; }

  .fv-after { padding-bottom: clamp(12px, 1.3vw, 19px); }
  .fv-panel-col { padding: clamp(10px, 1vw, 14px) clamp(16px, 2vw, 32px); }
  .fv-panel-t { font-size: 12.5px; }
  .fv-items { margin-top: 7px; gap: 7px; }
  .fv-items li { padding: 6px 13px; font-size: 12.5px; }
  .fv-fee { margin-top: 6px; font-size: clamp(14px, 1.2vw, 18px); }
  .fv-panel .mini-cta { margin-top: 1px; font-size: 12.5px; padding-block: 11px; }
}

@media (min-width: 901px) {
  /* 参考デザインのパネルはリンクを持たない。ヒーローの
     「開業にいくら必要か見る」が同じ #price を指しているので重複させない */
  .fv-panel .mini-cta { display: none; }
}

/* ロゴのリンクもタップ領域44px以上（ヘッダーの高さは変えない） */
.brand { min-height: 46px; }

/* Source: split.css */

/* ==========================================================================
   合同会社あいびー — 参考デザイン（左＝淡い緑の面／右＝写真）の実装層
   骨格：白いヘッダー（ロゴ／ナビ／緑の電話／緑のボタン）
         ヒーロー＝左の淡い緑の面に緑の明朝＋緑のボタン、右は写真を画面右端まで
         緑の細い区切り線 → 実績の帯（白）→ 支援の帯（淡い緑）→ 費用とCTAの帯（白）
   ========================================================================== */

:root {
  --header-h: 88px;
  --mint:  #e8efe8;  /* ヒーロー左の面 */
  --mint2: #f1f5ef;  /* 支援の帯 */
  --rule:  #dbe2da;  /* 細い縦罫 */
}

/* --------------------------------------------------------------------------
   1. ヘッダー：電話を緑にして、お問い合わせボタンより先に置く
   -------------------------------------------------------------------------- */
.header-inner { min-height: var(--header-h); }
.hd-tel { order: 2; min-height: 46px; }
.hd-form { order: 3; }
.hd-tel strong { color: var(--text-accent, var(--accent)); font-size: clamp(20px, 1.6vw, 25px); }
.hd-tel span { color: var(--text-muted, var(--muted)); }
.hd-form { padding: 15px 26px; font-size: 14.5px; }
.hd-form svg { display: none; }

/* --------------------------------------------------------------------------
   2. ヒーロー：左＝淡い緑の面／右＝写真
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; background: var(--mint);
  border-bottom: 5px solid var(--accent);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 39%) minmax(0, 61%);
  align-items: stretch; min-height: 0; height: auto;
}

/* 左：文字の面（wrapの左端に文字を揃える） */
.hero-body {
  position: relative; z-index: 2; width: auto; margin: 0;
  display: flex; align-items: center; background: var(--mint);
  padding: clamp(28px, 3.4vw, 56px) clamp(28px, 3vw, 48px) clamp(28px, 3.4vw, 56px)
           max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
}
.hero-text { width: 100%; max-width: 27em; }

/* 右：写真を画面の右端まで抜く */
.hero-visual { position: relative; inset: auto; width: 100%; height: 100%; margin: 0; }
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.hero-visual::before { display: none; }

/* カテゴリ（小さな文字＋短い罫） */
.fc-tag {
  display: block; color: var(--text-muted, var(--muted)); font-size: 13.5px; font-weight: 700; letter-spacing: .16em;
  padding-bottom: clamp(12px, 1.3vw, 18px); margin-bottom: clamp(12px, 1.3vw, 18px);
  border-bottom: 1px solid #b9c6b8; width: max-content; max-width: 100%;
}

.hero h1 {
  margin: 0; color: var(--text-accent, var(--accent)); font-family: var(--serif); font-weight: 700;
  font-size: clamp(31px, 3.15vw, 47px); line-height: 1.42; letter-spacing: .04em;
  text-shadow: none;
}
.hero h1 .hero-sub { display: none; }

.hero-desc {
  margin-top: clamp(14px, 1.5vw, 22px); padding-top: 0; color: var(--text-ink, var(--ink));
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.8; letter-spacing: .03em; max-width: none;
}
.hero-desc::before { display: none; }

.hero-actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(12px, 1.3vw, 18px); margin-top: clamp(18px, 2vw, 30px);
}
.hero-actions .btn-primary {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 30px;
  min-height: 58px; min-width: 300px; padding: 14px 24px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  font-size: 15.5px; font-weight: 700; letter-spacing: .05em;
}
.hero-actions .btn-primary::after { content: "\203A"; font-size: 20px; line-height: 1; }
.hero-actions .btn-primary:hover { background: var(--accent-dk); }
.hero .hero-link {
  color: var(--text-accent, var(--accent)); border-bottom: 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
}
.hero .cta-assure, .hero-actions-sub { display: none; }

/* --------------------------------------------------------------------------
   3. 実績の帯（白）：左＝言い切り／右＝数字
   -------------------------------------------------------------------------- */
.fv-proof { background: var(--paper); padding: clamp(24px, 2.6vw, 40px) 0; border: 0; }
.fv-proof .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px); align-items: center;
  width: min(1440px, calc(100% - var(--gutter) * 2));
}
.fv-claim {
  margin: 0; font-family: var(--sans); font-weight: 700; color: var(--text-accent, var(--accent));
  font-size: clamp(20px, 2.05vw, 31px); line-height: 1.5; letter-spacing: .02em;
}

.fv-nums { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; border: 0; }
.fv-nums li {
  padding: 0 clamp(16px, 2vw, 34px); text-align: center; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.fv-nums li + li { border-left: 1px solid var(--rule); }
.fv-nums span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-muted, var(--muted)); letter-spacing: .04em; }
.fv-nums b {
  display: block; margin-top: 4px; font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent));
  font-size: clamp(28px, 2.9vw, 43px); line-height: 1.15; white-space: nowrap;
}
.fv-nums b i { font-style: normal; font-size: .5em; margin: 0 .06em; }

/* --------------------------------------------------------------------------
   4. 支援の帯（淡い緑）：自作アイコン＋細い縦罫
   -------------------------------------------------------------------------- */
.fv-support { background: var(--mint2); padding: clamp(16px, 1.8vw, 26px) 0; }
.fv-support .wrap { width: min(1440px, calc(100% - var(--gutter) * 2)); }
.fv-support .fv-items {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; gap: 0;
}
.fv-support .fv-items li {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1vw, 14px);
  padding: clamp(6px, .8vw, 12px) clamp(6px, 1vw, 16px);
  background: none; border: 0; border-radius: 0;
}
.fv-support .fv-items li + li { border-left: 1px solid var(--rule); }
.fv-support .fv-items svg {
  display: block; flex: none; width: clamp(26px, 2.3vw, 34px); height: clamp(26px, 2.3vw, 34px);
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fv-support .fv-items b {
  font-size: clamp(14px, 1.25vw, 18px); font-weight: 700; color: var(--text-ink, var(--ink)); letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   5. 費用とCTAの帯（白）
   -------------------------------------------------------------------------- */
.fv-after { background: var(--paper); padding: clamp(18px, 2vw, 30px) 0 clamp(22px, 2.4vw, 36px); }
.fv-after .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: clamp(18px, 2.4vw, 44px);
  width: min(1440px, calc(100% - var(--gutter) * 2));
}
.fv-fee {
  margin: 0; font-family: var(--sans); font-weight: 700; color: var(--text-ink, var(--ink));
  font-size: clamp(16px, 1.45vw, 22px); letter-spacing: .02em; line-height: 1.4; text-align: left;
}
.fv-fee b { font-family: var(--serif); font-weight: 700; color: var(--text-ink, var(--ink)); font-size: 1.55em; letter-spacing: 0; }
.fv-fee .sep { color: var(--text-ink, var(--ink)); margin: 0 .35em; }
.fv-after .btn-primary {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 30px;
  min-height: 56px; min-width: 330px; padding: 13px 24px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  font-size: 15.5px; font-weight: 700; letter-spacing: .05em;
}
.fv-after .btn-primary::after { content: "\203A"; font-size: 20px; line-height: 1; }
.fv-after .btn-primary:hover { background: var(--accent-dk); }
.fv-after .mini-cta { display: inline-flex; }

/* --------------------------------------------------------------------------
   6. ファーストビューを1画面に収める（余りはヒーローに配分）
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .fv { display: flex; flex-direction: column; min-height: calc(100svh - var(--header-h)); }
  .hero { flex: 1 1 auto; display: flex; }
  .hero-inner { flex: 1 1 auto; }
  .fv-proof, .fv-support, .fv-after { flex: none; }
}

/* --------------------------------------------------------------------------
   7. スマートフォン：上に写真、下に文字。帯は積む
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { border-bottom-width: 4px; }
  .hero-inner { display: flex; flex-direction: column; }
  .hero-visual { order: 0; height: clamp(210px, 52vw, 300px); }
  .hero-body { order: 1; padding: 26px var(--gutter) 30px; }
  .hero-text { max-width: none; }
  .hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
  .hero-actions { align-self: stretch; }
  .hero-actions .btn-primary { width: 100%; min-width: 0; }

  .fv-proof .wrap { grid-template-columns: 1fr; gap: 16px; }
  .fv-claim { font-size: clamp(19px, 5.4vw, 24px); }
  .fv-nums { justify-content: space-between; }
  .fv-nums li { padding: 0 8px; flex: 1; }
  .fv-nums li:first-child { padding-left: 0; }
  .fv-nums li:last-child { padding-right: 0; }
  .fv-nums b { font-size: clamp(22px, 6.4vw, 30px); }
  .fv-nums span { font-size: 11.5px; }

  .fv-support .fv-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-support .fv-items li { justify-content: flex-start; padding: 9px 10px; }
  .fv-support .fv-items li:nth-child(odd) { border-left: 0; }
  .fv-support .fv-items li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .fv-support .fv-items li:last-child { grid-column: 1 / -1; }

  .fv-after .wrap { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .fv-fee { text-align: center; }
  .fv-after .btn-primary { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   8. 写真が高さを押し広げないようにする（高さは左の文字面が決める）
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero-visual { overflow: hidden; }
  .hero-visual picture { position: absolute; inset: 0; }
  .hero-visual img { position: absolute; inset: 0; }

  /* --- 1画面に収めるための寸法 --- */
  :root { --header-h: 76px; }
  .header-inner { min-height: 76px; }
  .brand img { width: 130px; height: 45px; }
  .hd-tel strong { font-size: clamp(18px, 1.4vw, 22px); }
  .hd-form { padding: 12px 20px; font-size: 14px; }

  .hero-body { padding-block: clamp(18px, 1.9vw, 30px); }
  .fc-tag { font-size: 12.5px; padding-bottom: clamp(8px, .9vw, 12px); margin-bottom: clamp(8px, .9vw, 12px); }
  .hero h1 { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.4; }
  .hero-desc { margin-top: clamp(10px, 1.1vw, 15px); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.7; }
  .hero-actions { margin-top: clamp(13px, 1.4vw, 20px); gap: clamp(9px, 1vw, 13px); }
  .hero-actions .btn-primary { min-height: 50px; min-width: 274px; padding: 12px 22px; font-size: 14.5px; }
  .hero .hero-link { font-size: 13.5px; }

  .fv-proof { padding: clamp(14px, 1.5vw, 23px) 0; }
  .fv-claim { font-size: clamp(17px, 1.62vw, 25px); }
  .fv-nums b { font-size: clamp(24px, 2.35vw, 35px); margin-top: 2px; }
  .fv-nums span { font-size: 12px; }

  .fv-support { padding: clamp(8px, .95vw, 14px) 0; }
  .fv-support .fv-items svg { width: clamp(22px, 1.85vw, 28px); height: clamp(22px, 1.85vw, 28px); }
  .fv-support .fv-items b { font-size: clamp(13px, 1.12vw, 16px); }
  .fv-support .fv-items li { padding: clamp(4px, .5vw, 8px) clamp(5px, .8vw, 12px); }

  .fv-after { padding: clamp(11px, 1.2vw, 18px) 0 clamp(13px, 1.4vw, 22px); }
  .fv-fee { font-size: clamp(15px, 1.32vw, 20px); }
  .fv-after .btn-primary { min-height: 50px; min-width: 300px; padding: 12px 22px; font-size: 14.5px; }
}

@media (min-width: 901px) {
  /* --- さらに詰めて 1画面に収める --- */
  .hero-body { padding-block: clamp(14px, 1.5vw, 24px); }
  .fc-tag { font-size: 12px; padding-bottom: clamp(6px, .7vw, 10px); margin-bottom: clamp(6px, .7vw, 10px); }
  .hero h1 { font-size: clamp(24px, 2.28vw, 34px); line-height: 1.4; }
  .hero-desc { margin-top: clamp(8px, .85vw, 12px); font-size: clamp(13.5px, .98vw, 15px); line-height: 1.68; }
  .hero-actions { margin-top: clamp(10px, 1.05vw, 15px); gap: clamp(7px, .75vw, 10px); }
  .hero-actions .btn-primary { min-height: 48px; min-width: 262px; padding: 11px 20px; font-size: 14px; }
  .hero .hero-link { font-size: 13px; }

  .fv-proof { padding: clamp(10px, 1.1vw, 16px) 0; }
  .fv-claim { font-size: clamp(16px, 1.5vw, 23px); }
  .fv-nums b { font-size: clamp(22px, 2.15vw, 32px); }
  .fv-nums span { font-size: 11.5px; }

  .fv-support { padding: clamp(6px, .7vw, 10px) 0; }
  .fv-support .fv-items svg { width: clamp(20px, 1.7vw, 26px); height: clamp(20px, 1.7vw, 26px); }
  .fv-support .fv-items b { font-size: clamp(12.5px, 1.05vw, 15px); }

  .fv-after { padding: clamp(9px, .95vw, 14px) 0 clamp(11px, 1.15vw, 17px); }
  .fv-fee { font-size: clamp(14px, 1.22vw, 18px); }
  .fv-after .btn-primary { min-height: 48px; min-width: 286px; padding: 11px 20px; font-size: 14px; }
  .fv-after .mini-cta { font-size: 13px; }
}

/* 数字を右側いっぱいに広げて置く（参考デザインの間隔に合わせる） */
@media (min-width: 901px) {
  .fv-proof .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .fv-nums { display: grid; grid-template-columns: 1.22fr 1fr 1.16fr; }
  .fv-nums li { padding: 0 clamp(10px, 1.2vw, 20px); }
}

@media (max-width: 900px) {
  /* スマホのヘッダーはアイコンだけの正方形ボタンなので、アイコンを消さない */
  .site-header .hd-form svg { display: block; width: 21px; height: 21px; min-width: 21px; flex: none; }
}

@media (max-width: 900px) {
  /* 幅が足りずラベルが折り返すので、1つ目だけ全幅にして2段に組む */
  .fv-nums { display: grid; grid-template-columns: 1fr 1fr; }
  .fv-nums li { padding: 8px 10px; }
  .fv-nums li:first-child { grid-column: 1 / -1; border-left: 0; border-bottom: 1px solid var(--rule); }
  .fv-nums li + li { border-left: 0; }
  .fv-nums li:last-child { border-left: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   9. 数字を強調する
   数字を大きくし、単位を相対的に小さくして桁を主役にする。
   増えた高さは各帯の上下余白を詰めて相殺し、1画面に収めたまま保つ。
   -------------------------------------------------------------------------- */
.fv-nums b i { font-size: .4em; margin: 0 .05em; letter-spacing: .02em; }
.fv-fee b { color: var(--text-accent, var(--accent)); font-size: 1.9em; }
.fv-fee .sep { color: #b3bdb2; }

@media (min-width: 901px) {
  .fv-proof { padding: clamp(6px, .7vw, 10px) 0; }
  .fv-nums b { font-size: clamp(30px, 3.1vw, 48px); margin-top: 0; line-height: 1.1; }
  .fv-nums span { font-size: 12px; }

  .fv-support { padding: clamp(5px, .6vw, 8px) 0; }

  .fv-after { padding: clamp(8px, .9vw, 12px) 0 clamp(9px, 1vw, 14px); }
  .fv-fee { font-size: clamp(13.5px, 1.16vw, 17px); }
}

@media (max-width: 900px) {
  .fv-nums b { font-size: clamp(28px, 8vw, 38px); }
  .fv-fee { font-size: clamp(15px, 4.2vw, 18px); }
}

/* 04 実績の帯：桁を主役にして単位を小さく（ファーストビューと同じ組み方） */
.band-copy b { font-size: clamp(40px, 5vw, 74px); line-height: 1.1; letter-spacing: .01em; }
.band-copy b i { font-style: normal; font-size: .4em; margin: 0 .05em; letter-spacing: .02em; }
.band-copy span { margin-top: 12px; font-size: 14px; }

/* --------------------------------------------------------------------------
   10. 数字は太いゴシックで強調する
   対象：売上（2億7千万）／従業員（60名）／利用者様（200名以上）／
         加盟金（150万円）／ロイヤリティ（10万円）
   明朝の細い横画は大きくしても「太く」見えないため、ゴシックの太字に変える。
   -------------------------------------------------------------------------- */
.fv-nums b,
.fv-fee b,
.band-copy b,
.price-value {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.01em;
}
.fv-nums b i, .band-copy b i, .price-value .unit { font-weight: 700; letter-spacing: .01em; }

/* Source: yamato.css */

/* ==========================================================================
   合同会社あいびー — 有機的な形とスクロール演出の層
   仕様：PROMPT-yamato.md（参考サイトからは設計手法のみを抽出。意匠は流用しない）
   骨格：温かいオフホワイトの地／ブロブで抜いた写真／波形のセクション区切り／
         縦組みの主見出し／行ごとの立ち上がり／ピルボタンと円形の矢印
   ========================================================================== */

:root {
  --paper: #f4f2ee;   /* 温かいオフホワイト（地色） */
  --card:  #ffffff;   /* 情報の面だけ白 */
  --mint:  #e7ede4;   /* ヒーロー左の淡い面 */
  --mint2: #eef2ea;   /* 支援の帯 */
  --leaf:  #dfe9df;   /* 波の淡い側 */
  --rule:  #d9ded6;
  --ease:  cubic-bezier(.2, .8, .2, 1);
}

.shape-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

body { background: var(--paper); font-weight: 700; }
.section, .fv-proof, .fv-after, .numbers { background: var(--paper); }
.section.is-dark, .founder-band.is-dark { background: var(--mint2); }

/* --------------------------------------------------------------------------
   1. ヒーロー：左＝縦組みの見出し／右＝ブロブで抜いた写真
   -------------------------------------------------------------------------- */
.hero { background: var(--mint); border-bottom: 0; overflow: visible; }
.hero-inner { position: relative; }
.hero-body { background: none; }

/* 縦組みの主見出しを右に、説明とCTAを左に置く */
.hero-text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2.2vw, 34px); align-items: stretch;
  max-width: none; width: 100%;
}
.hero h1 {
  grid-column: 2; grid-row: 1 / span 3; margin: 0;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 700; color: var(--text-accent, var(--accent));
  line-height: 1.5; letter-spacing: .12em; text-align: start;
}
.fc-tag     { grid-column: 1; grid-row: 1; align-self: start; }
.hero-desc  { grid-column: 1; grid-row: 2; align-self: center; }
.hero-actions { grid-column: 1; grid-row: 3; align-self: end; }

/* 写真は地色の上にブロブで浮かせる（右端まで抜かない） */
.hero-visual {
  align-self: center; height: auto; padding: 0 clamp(14px, 2vw, 40px) 0 0;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual picture {
  position: relative; inset: auto; display: block; width: 100%; height: 100%;
  clip-path: url(#blob-a); overflow: hidden;
}
.hero-visual img { position: relative; inset: auto; width: 100%; height: 100%; object-fit: cover; }

/* Scroll のピル */
.scroll-pill {
  position: absolute; left: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 16px; border: 1px solid var(--accent); border-radius: 999px;
  background: rgba(255, 255, 255, .72); color: var(--text-accent, var(--accent));
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
}
.scroll-pill i {
  width: 1px; height: 13px; background: currentColor; position: relative;
  animation: scrollHint 1.6s var(--ease) infinite;
}
.scroll-pill i::after {
  content: ""; position: absolute; left: -3px; bottom: 0;
  width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
@keyframes scrollHint { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* --------------------------------------------------------------------------
   2. 波形のセクション区切り
   -------------------------------------------------------------------------- */
.wave { position: relative; line-height: 0; background: var(--mint); margin-top: -1px; }
.wave svg { display: block; width: 100%; height: clamp(40px, 5vw, 74px); }
.wave--down svg { fill: var(--paper); }
.wave--up { background: var(--paper); }
.wave--up svg { fill: var(--mint2); transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   3. 写真はすべて有機的な形で抜く
   -------------------------------------------------------------------------- */
.founder-visual picture { clip-path: url(#blob-b); overflow: hidden; }
.band-photo picture     { clip-path: url(#blob-c); overflow: hidden; }
.company-layout figure picture { clip-path: url(#blob-b); overflow: hidden; }

/* --------------------------------------------------------------------------
   4. ピルボタンと円形の矢印
   -------------------------------------------------------------------------- */
.btn, .hd-form, .fv-panel .mini-cta { border-radius: 999px; }
.hero-actions .btn-primary,
.fv-after .btn-primary,
.cta-final .btn,
.contact-cta .btn {
  border-radius: 999px; padding-right: 12px;
}
.hero-actions .btn-primary::after,
.fv-after .btn-primary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .2) var(--ico-arrow) center / 13px 13px no-repeat;
  transition: transform .25s var(--ease);
}
.hero-actions .btn-primary:hover::after,
.fv-after .btn-primary:hover::after { transform: translateX(3px); }
:root {
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.hd-form { padding: 12px 22px; }

/* 支援の帯は柔らかい面に */
.fv-support { background: var(--mint2); }
.fv-support .fv-items li + li { border-color: #d5ddd2; }

/* --------------------------------------------------------------------------
   5. 演出（すべて自作。reduce で停止し、停止時も最終状態が見える）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-lines:not(.hero-text) > * { opacity: 1; transform: none; }
  .reveal-lines.is-in > * {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal-lines.is-in > *:nth-child(1) { transition-delay: 0s; }
  .reveal-lines.is-in > *:nth-child(2) { transition-delay: .06s; }
  .reveal-lines.is-in > *:nth-child(3) { transition-delay: .12s; }
  .reveal-lines.is-in > *:nth-child(4) { transition-delay: .18s; }

  .founder-visual picture, .band-photo picture {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .is-shown picture { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-pill i { animation: none; }
}

/* --------------------------------------------------------------------------
   6. スマートフォン
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; }
  .hero-visual { order: 0; height: clamp(230px, 58vw, 320px); padding: 18px var(--gutter) 0; }
  .hero-body { order: 1; }
  .hero-text { grid-template-columns: 1fr; }
  .hero h1 {
    grid-column: 1; grid-row: auto; writing-mode: horizontal-tb;
    letter-spacing: .04em; line-height: 1.45; margin-bottom: 4px;
  }
  .fc-tag { grid-row: auto; }
  .hero-desc, .hero-actions { grid-column: 1; grid-row: auto; }
  .scroll-pill { display: none; }
  .wave svg { height: 34px; }
}

/* --------------------------------------------------------------------------
   7. 高さの制御と細部の直し
   -------------------------------------------------------------------------- */
/* ヘッダーは白のまま（地色にするとロゴの白地が四角く浮く） */
.site-header { background: var(--card); }

/* 写真がヒーローの高さを押し広げないようにする */
@media (min-width: 901px) {
  .hero-visual {
    position: relative; align-self: stretch; height: auto; padding: 0;
  }
  .hero-visual picture {
    position: absolute; top: clamp(8px, 1.2vw, 20px); bottom: clamp(8px, 1.2vw, 20px);
    left: 0; right: clamp(12px, 1.8vw, 34px); width: auto; height: auto;
  }
  .hero-visual img { position: absolute; inset: 0; }

  /* 説明とCTAは縦にばらけさせず、ひとかたまりで中央に置く */
  .hero-text { align-content: center; row-gap: clamp(10px, 1.2vw, 18px); }
  .fc-tag, .hero-desc, .hero-actions { align-self: start; }
}

/* 波はファーストビューの高さ配分の対象にしない */
.wave { flex: none; }

/* --------------------------------------------------------------------------
   8. 波はヒーローに重ねて置く（高さを食わせない＝写真を大きく取る）
   -------------------------------------------------------------------------- */
:root { --wave-h: clamp(38px, 4.6vw, 70px); }
.wave svg { height: var(--wave-h); }
.wave--down { margin-top: calc(-1 * var(--wave-h)); }

@media (min-width: 901px) {
  .hero-body { padding-bottom: calc(var(--wave-h) + 10px); }
  .hero-visual picture { bottom: calc(var(--wave-h) * .45); }
  .hero-visual img { object-position: 50% 38%; }
  .scroll-pill { bottom: calc(var(--wave-h) + 8px); z-index: 4; }
}
@media (max-width: 900px) {
  .hero-body { padding-bottom: calc(var(--wave-h) + 16px); }
}

/* Scroll のピルと文字が重ならないよう、左の文字列は上から並べる */
@media (min-width: 901px) {
  .hero-text { align-content: start; }
  .hero-body { padding-top: clamp(16px, 1.8vw, 26px); }
  .scroll-pill { bottom: calc(var(--wave-h) + 4px); }
}

/* 縦組みの見出しは高さを他の要素に伝えない（重なりの原因になるため独立させる） */
@media (min-width: 901px) {
  .hero-text {
    display: block; position: relative;
    padding-right: clamp(104px, 8.4vw, 148px);
  }
  .hero h1 {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    max-height: 100%;
  }
  .fc-tag { margin-bottom: clamp(12px, 1.4vw, 20px); }
  .hero-desc { margin-top: 0; }
  .hero-actions { margin-top: clamp(14px, 1.5vw, 22px); }
}

/* 縦組みはヒーロー全体の高さを基準に中央へ（文字列の高さに縛られない） */
@media (min-width: 901px) {
  .hero-body { position: relative; }
  .hero-text { position: static; }
  .hero h1 {
    position: absolute; right: clamp(2px, .8vw, 14px); top: 50%; transform: translateY(-50%);
    max-height: none; margin: 0;
  }
}

/* 縦組みは上下いっぱいの箱にして中央寄せ（top:50% だと高さが半分になり列が折れる） */
@media (min-width: 901px) {
  .hero h1 {
    top: 0; bottom: 0; transform: none; height: auto;
    display: flex; justify-content: center; align-items: flex-start;
  }
}

/* CTA へ入る波（下の濃い緑面へつなぐ） */
.wave--up { background: var(--paper); margin: 0; }
.wave--up svg { transform: none; fill: var(--accent); height: var(--wave-h); }
.cta-final { margin-top: -1px; }

/* ブロブが画面端で切れないように内側へ寄せる */
@media (min-width: 901px) {
  .founder-visual { padding: clamp(12px, 1.6vw, 28px) 0 clamp(12px, 1.6vw, 28px) clamp(16px, 2.2vw, 44px); }
  .band-photo { padding: clamp(10px, 1.4vw, 24px); }
}


/* ファーストビューの写真と文字は最初から見えている状態にする
   （登場アニメで隠すと LCP がその分だけ遅れるため） */
.hero-visual picture, .hero-text > * { opacity: 1 !important; transform: none !important; }

/* 2026-09-08: 選択された参考サイトの構成。最初の一画面は写真と縦組みに使う。 */
.fv--collage { display: block; min-height: 0; }
.hero.hero--collage {
  display: block; height: calc(100svh - var(--header-h)); min-height: 650px;
  background: var(--paper); overflow: hidden; border: 0;
}
.collage-stage { position: relative; width: min(1600px, 100%); height: 100%; margin: auto; }
.collage-copy { position: absolute; top: 9%; right: 8%; z-index: 2; }
.collage-label { margin: 0 0 24px; font-size: 12px; letter-spacing: .16em; color: var(--text-accent, var(--accent)); }
.hero--collage h1 {
  position: static; display: flex; flex-direction: row-reverse; gap: .25em;
  writing-mode: horizontal-tb; height: auto; margin: 0; padding: 0;
  font-size: clamp(36px, 3.3vw, 54px); line-height: 1.65; letter-spacing: .13em;
  font-weight: 700; color: #263e33; text-align: left;
}
.hero--collage h1 span { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.collage-desc {
  position: absolute; right: calc(100% + 28px); top: 48px; margin: 0;
  writing-mode: vertical-rl; white-space: nowrap; font-size: 15px; line-height: 2.2; letter-spacing: .15em; color: #45534a;
}
.collage-photo { position: absolute; margin: 0; }
.collage-photo picture, .collage-photo img { display: block; width: 100%; height: 100%; }
.collage-photo picture { overflow: hidden; }
.collage-photo img { object-fit: cover; }
.collage-photo--main { left: 25%; top: 5%; width: 40%; height: 52%; }
.collage-photo--main picture { border-radius: 48% 52% 39% 46% / 52% 44% 43% 48%; }
.collage-photo--main img { object-position: 50% 40%; }
.collage-photo--care { left: -3%; top: 36%; width: 33%; height: 48%; }
.collage-photo--care picture { border-radius: 43% 52% 47% 39% / 42% 44% 52% 53%; }
.collage-photo--care img { object-position: 87% 50%; }
.collage-photo--support { left: 45%; top: 62%; width: 24%; height: 28%; }
.collage-photo--support picture { border-radius: 48% 54% 41% 53% / 49% 40% 56% 47%; }
.collage-actions { position: absolute; right: 7%; bottom: 16%; z-index: 3; display: grid; gap: 13px; }
.collage-actions .btn { border-radius: 999px; padding: 15px 18px 15px 25px; min-width: 260px; display: flex; gap: 18px; justify-content: space-between; font-size: 14px; }
.collage-actions .btn span { border: 1px solid #ffffff60; border-radius: 50%; width: 29px; height: 29px; display: grid; place-items: center; }
.collage-price { display: flex; align-items: center; min-height: 44px; justify-content: space-between; padding: 5px 18px 5px 25px; color: var(--text-accent, var(--accent)); font-size: 12px; letter-spacing: .04em; }
.collage-scroll { position: absolute; left: 7%; bottom: 3%; z-index: 4; display: flex; min-height: 44px; gap: 22px; align-items: center; color: #fff; font-size: 10px; letter-spacing: .18em; }
.collage-scroll span { font-size: 20px; }
.collage-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 17%; pointer-events: none; }
.collage-wave svg { display: block; width: 100%; height: 100%; fill: var(--accent); }
.fv--collage .fv-proof { padding: 60px 0 38px; scroll-margin-top: var(--header-h); }
.fv--collage .fv-claim { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.1vw, 32px); }
.fv--collage .fv-nums b { font-size: clamp(30px, 3vw, 44px); }
.fv--collage .fv-support { padding: 20px 0; }
.fv--collage .fv-after { padding: 30px 0 60px; }
@media (min-width: 901px) and (max-width: 1150px) {
  .collage-copy { right: 5%; }
  .collage-actions { right: 4%; }
  .fv--collage .fv-proof .wrap { grid-template-columns: 1fr; text-align: center; }
  .fv--collage .fv-nums { justify-content: center; }
}
@media (max-width: 900px) {
  .hero.hero--collage { height: calc(100svh - 118px); min-height: 700px; }
  .collage-copy { display: contents; }
  .collage-label { position: absolute; top: 5%; right: 7%; font-size: 10px; letter-spacing: .08em; margin: 0; }
  .hero--collage h1 { position: absolute; top: 10%; right: 7%; bottom: auto; font-size: clamp(28px, 6.4vw, 42px); line-height: 1.6; gap: .1em; }
  .collage-desc { position: absolute; top: calc(10% + 4px); left: auto; right: calc(7% + clamp(92.4px, 21.12vw, 138.6px) + 6px); width: auto; max-width: none; writing-mode: vertical-rl; margin: 0; font-size: 12px; line-height: 1.9; letter-spacing: .08em; text-align: left; z-index: 2; }
  .collage-photo--main { left: -8%; top: 10%; width: 61%; height: 33%; }
  .collage-photo--main img { object-position: 47% 50%; }
  .collage-photo--care { left: 7%; top: 43%; width: 49%; height: 26%; }
  .collage-photo--support { left: 61%; top: 48%; width: 35%; height: 19%; }
  .collage-actions { right: 8%; left: 8%; bottom: 9%; gap: 5px; }
  .collage-actions .btn { width: min(100%, 260px); justify-self: center; min-width: 0; min-height: 54px; font-size: 13px; padding-block: 11px; }
  .collage-price { justify-content: center; gap: 20px; font-size: 11px; }
  .collage-wave { height: 8%; }
  .collage-scroll { left: 8%; bottom: 0; gap: 12px; font-size: 9px; }
  .fv--collage .fv-proof { padding: 38px 0 28px; }
  .fv--collage .fv-claim { font-size: clamp(19px, 4.6vw, 28px); }
  .fv--collage .fv-nums b { font-size: clamp(25px, 6.4vw, 38px); }
  .fv--collage .fv-support { padding: 14px 0; }
  .fv--collage .fv-after { padding: 25px 0 40px; }
}
/* 非表示の追従CTAは、動きを減らす設定でも非表示を維持する。 */
body:has(.hero--collage) .mobile-cta.is-hidden { visibility: hidden; opacity: 0 !important; pointer-events: none; }

/* 2026-09-09: 閲覧と問い合わせの操作性改善。 */
/* 固定ヘッダーの電話と問い合わせ導線に集約し、本文を覆う重複導線を外す。 */
.mobile-cta { display: none !important; }
.site-header { position: sticky; top: 0; }
.contact-page .page-head { padding-block: 28px 24px; }
.contact-page .page-head .lead { margin-top: 12px; }
.contact-page #form { padding-top: 32px; }
.contact-page .form-layout { gap: clamp(28px, 4vw, 56px); }
.contact-page .form-field textarea { min-height: 150px; }
.contact-page #form form { margin-top: 24px !important; }
.form-error { color: #a12320; font-size: 13px; margin-top: 8px; line-height: 1.7; }
.form-error[hidden] { display: none; }
.form-field input[aria-invalid="true"] { border-color: #a12320; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body:not(.garden-background) { position: relative; isolation: isolate; background: #f8f7f3; }
body:not(.garden-background)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,#faf9f30d,#faf9f33d 28%,#faf9f34d 60%,#faf9f314),url('../images/backgrounds/washi-leaf.webp') center/cover;
  filter: contrast(1.16) brightness(.97);
}
body:not(.garden-background) :is(.service-intro,.page-intro,main>.numbers,.proof-band,.band-copy,.site-footer) { background: transparent; }
@media(max-width:900px) {
  body:not(.garden-background)::before {
    background-image: linear-gradient(90deg,#faf9f31a,#faf9f338 55%,#faf9f30d),url('../images/backgrounds/washi-leaf-mobile.webp');
  }
}
body:not(.garden-background) :is(main>.section,.contact-page .page-head) { background-color: transparent; }
.faq-q { font-family: var(--sans); }
.faq-item > summary { cursor:pointer;list-style:none;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;min-height:44px; }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary:focus-visible { outline:2px solid var(--accent);outline-offset:5px; }
.faq-toggle::before { content:"+";font-size:23px;font-weight:400;color:var(--text-accent, var(--accent)); }
.faq-item[open] .faq-toggle::before { content:"−"; }
.faq-a p, .form-field, .form-hint { font-family: var(--sans); }
@media(max-width:900px) {
 .contact-page .page-head { padding-block: 20px 18px; }
 .contact-page #form { padding-top: 24px; }
 .contact-page #form h2 { font-size: 24px; }
 .site-footer { padding-bottom: 40px; }
}

/* ==========================================================================
   2026-09-10 全体見直し：文字の大きさとコントラストを底上げする
   ・日本語は12px未満を作らない／リンク・ラベルは13px以上
   ・本文4.5:1、大きい文字3:1を全要素で満たす
   ========================================================================== */

/* --- 小さすぎた文字を上げる --- */
.collage-label { font-size: 13px; }
.collage-price { font-size: 13.5px; }
.collage-scroll { font-size: 11.5px; }
.ba-tag { font-size: 12.5px; letter-spacing: .16em; }
.road-step b { font-size: 11.5px; letter-spacing: .12em; }
.req, .opt { font-size: 12.5px; padding: 3px 9px; }
.hd-tel span { font-size: 12.5px; }
.fv-nums span { font-size: 12.5px; }
/* 数字に添える単位（億・千万・名）が10pxまで落ちないようにする */
.fv-nums b i, .band-copy b i { font-size: max(12.5px, .4em); }

@media (max-width: 900px) {
  .collage-label { font-size: 12.5px; }
  .collage-price { font-size: 13px; }
  .collage-scroll { font-size: 11.5px; }
  .fv-nums span { font-size: 12.5px; }
}

/* --- 薄すぎた区切り「・」を本文と同じ濃さに --- */
.fv-fee .sep { color: var(--text-muted, var(--muted)); }

/* --------------------------------------------------------------------------
   2026-09-10 Googleマップの右はみ出しを直す
   style.css の負の右マージンで地図を画面右端まで抜いていたため、
   PC（2カラム）では本文の枠を越えて飛び出して見えていた。枠の中に収める。
   -------------------------------------------------------------------------- */
.area-map {
  margin-right: 0;
  border-right: 1px solid #647184;
  border-radius: var(--radius);
}

/* 実績の見出し・数字・写真を同じ本文幅に収める。 */
@media (min-width: 901px) {
  #numbers .numbers-head { padding-bottom: 24px; }
  #numbers .proof-band {
    width: min(var(--wrap), calc(100% - var(--gutter) * 2));
    margin-inline: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  #numbers .proof-band:nth-child(even) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  #numbers .proof-band + .proof-band { margin-top: 32px; }
  #numbers .band-photo { padding: 0; min-height: 0; }
  #numbers .band-photo picture { aspect-ratio: 3 / 2; height: auto; }
  #numbers .band-copy { padding: 24px 0; min-width: 0; }
  #numbers .numbers-note { padding-top: 28px; }
}

/* ヒーローの費用リンク: 文字と矢印の下に一本線を添える。 */
.hero--collage .collage-price { position: relative; text-decoration: none; }
.hero--collage .collage-price::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 18px;
  bottom: 1px;
  height: 1px;
  background: currentColor;
}

/* 本文の文字リンクを、矢印と一本の下線へ統一する。 */
main .mini-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  max-width: 100%;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
}
main .mini-cta::before {
  content: "";
  position: absolute;
  inset: auto 0 1px;
  height: 1px;
  background: currentColor;
}
main .mini-cta::after,
main .mini-cta[target="_blank"]::after {
  content: "→";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 18px;
  background: none;
  border: 0;
  transform: none;
}
main .mini-cta[target="_blank"]::after { content: "↗"; }

/* 文字専用の濃色。背景・ボタンの塗り・罫線の色は維持する。 */
:root { --text-ink: #17211c; --text-muted: #3f4d43; --text-accent: #14513e; }
.collage-copy h1 { color: #1c3327; }
.collage-desc { color: var(--text-muted); }

/* 下層3ページの冒頭背景。文字と既存の余白は維持する。 */
:is(.service-intro, .page-intro) {
  background-image: linear-gradient(to bottom, transparent 76%, #f4f2ee 100%), url('../images/backgrounds/service-intro.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 650px) {
  :is(.service-intro, .page-intro) { background-image: linear-gradient(to bottom, #faf9f655 0%, #faf9f655 75%, #f4f2ee 100%), url('../images/backgrounds/service-intro.webp'); background-position: 65% center; }
}

/* 支援の写真帯は数字ではなく見出しの書体にそろえる。 */
.service-scenes .band-copy > b { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; }

/* モバイルは右上のハンバーガーからナビを開く。JSなしでは従来の横並び。 */
@media (max-width: 900px) {
  .nav-ready { --header-h: 66px; }
  .nav-ready .site-header { height: 66px; }
  .nav-ready .header-inner { position: relative; }
  .nav-ready .hd-top { padding-right: 52px; gap: 8px; }
  .nav-ready .hd-right { gap: 8px; }
  .nav-ready .brand img { width: 104px; height: auto; }
  .nav-ready .site-header .nav { border: 0; }
  .nav-ready .nav-toggle {
    display: flex; position: absolute; top: 11px; right: var(--gutter);
    width: 44px; height: 44px; padding: 0; margin: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: transparent; border: 0; border-radius: 50%; z-index: 102;
  }
  .nav-ready .nav-toggle span { width: 22px; height: 1.5px; background: var(--text-accent); }
  .nav-ready .nav-toggle:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
  .nav-ready .site-header .nav-list {
    display: none; position: absolute; inset: 66px 0 auto; width: 100%; height: auto;
    margin: 0; padding: 14px var(--gutter) 24px; gap: 0;
    max-height: calc(100dvh - 66px); overflow: auto;
    background: #f8f7f3; border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 20px #173b2514; transform: none; visibility: hidden;
  }
  .nav-ready .site-header .nav-list.is-open { display: flex; flex-direction: column; visibility: visible; }
  .nav-ready .header-inner .nav-list a,
  .nav-ready .header-inner .nav-list li:first-child a {
    display: flex; min-height: 54px; width: 100%; padding: 14px 8px;
    font-size: 15px; border-bottom: 1px solid var(--rule); color: var(--text-ink);
  }
  .nav-ready .header-inner .nav-list a[aria-current="page"] { color: var(--text-accent); }
}
@media (max-width: 900px) {
  .nav-ready .header-inner { padding: 0; }
  .nav-ready .brand { flex: none; }
  .nav-ready .hd-right { margin-left: auto; }
  .nav-ready .hd-tel { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
  .nav-ready .hd-tel strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-ready .hd-tel::before { content: ""; display: block; width: 21px; height: 21px; background: var(--text-accent); mask: var(--ico-tel) center / contain no-repeat; }
}
@media (max-width: 900px) {
  .nav-ready .nav-toggle span { transition: none; }
  .nav-ready .site-header .nav-list { align-items: stretch; }
  .nav-ready .site-header .nav-list li { width: 100%; }
}

/* 費用帯は金額のみ。削除したCTA用の列間を残さない。 */
.fv--collage .fv-after .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* 代表メッセージ: 見出しと説明文のまとまりを明確にする。 */
.quote--support { padding: clamp(24px, 4vw, 40px); }
.quote--support::before { content: none; }
.quote--support h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.6; color: var(--text-accent); }
.quote--support p { font-size: 16px; line-height: 1.9; }
.quote--support p + h3 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* TOPの呼びかけを問い合わせボタンの上に配置。 */
.collage-actions { bottom: 8%; }
.collage-invitation { margin: 0 0 8px; padding: 0; font-size: 16px; line-height: 1.65; letter-spacing: .01em; color: var(--text-accent); text-align: left; }
.collage-invitation li { display: flex; gap: 12px; align-items: center; }
.collage-invitation li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid #1c6f5740; }
.collage-invitation .invitation-number { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border: 1px solid var(--accent); border-radius: 50%; font-size: 12px; }
.invitation-break { display: initial; }
@media(min-width:901px) {
 .hero.hero--collage { min-height: 850px; }
}
@media(max-width:900px) {
 .hero.hero--collage { min-height: 1140px; }
 .collage-actions { top: calc(69% + 70px); bottom: auto; gap: 8px; }
 .collage-invitation {
   width: min(100%, 320px); justify-self: center; padding: 0;
   font-size: 16px; line-height: 1.65; letter-spacing: .01em;
   color: var(--text-accent); text-align: left; margin-bottom: 8px;
 }
 .collage-invitation li { display: flex; gap: 12px; align-items: center; }
 .collage-invitation li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid #1c6f5740; }
 .collage-invitation .invitation-number { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border: 1px solid var(--accent); border-radius: 50%; font-size: 12px; }
 .invitation-break { display: initial; }
}

/* 狭い画面では縦書きの説明を主見出しの下に置き、写真との重なりを避ける。 */
@media(max-width:400px) {
 .collage-desc { top: calc(10% + 206px); right: 7%; }
}