/* ==========================================================
   秒速IS LP  style.css
   デザイン方針：金融・ビジネス映画のポスターのように、文字の大小・白黒のコントラスト・余白・罫線で見せる。
   装飾は増やさず、構図と情報の強弱でインパクトを作る。
   配色ルール：使ってよい色は下の :root のトークン（＝リニューアル前のLPで使っていた色）だけ。
   新しい色・グラデーションは追加しないこと（色をどの要素に置くかは変えてよい）
   ========================================================== */

:root {
  /* ロゴのオレンジ #FB3F00 をベースに、白文字でも読める濃さへ微調整 */
  --brand: #F03C00;
  --brand-dark: #B82E00;
  --brand-strong: #D23400;   /* 小さい文字用（白地でコントラスト比 4.5 以上） */
  --brand-secondary: #A62900;
  --brand-secondary-dark: #7A1E00;
  --brand-border: #FFC4AA;
  --brand-on-dark: #FF8A55;  /* 黒背景の上のアクセント */
  --surface: #FFF5F0;
  --surface-strong: #FFE6DA;
  --ink: #1D1E1F;
  --black: #0B0B0B;          /* FVの背景 */
  --gray: #666666;
  --gray-light: #F2F2F2;
  --line: #ECE4E0;
  --white: #ffffff;
  --on-dark: #DDD;           /* 黒背景の上の本文 */
  --on-dark-mute: #BBB;      /* 黒背景の上の注釈 */
  --rule-dark: rgba(255,255,255,.18);
  --rule-dark-strong: rgba(255,255,255,.28);
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en: "Roboto", "Noto Sans JP", sans-serif;
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --sec-pad: clamp(96px, 9vw, 160px);
  --header-h: 68px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--white);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; }
section { scroll-margin-top: var(--header-h); }
.inner { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sp { display: none; }
.pc { display: inline; }
.note { font-size: .78rem; color: var(--gray); margin-top: 20px; line-height: 1.7; }
.note--light { color: var(--on-dark-mute); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* 見出しは文節の途中で折り返さない（対応ブラウザのみ） */
.story__h2, .reveal__h2, .story__close, .ask__q, .cta-band__lead, .form-card__title,
.asks3 h3, .convert-steps h3, .reveal__catch, .strengths__title, .reveal__close, .doubt__q,
.asks3__ans, .est__metric small, .est__result-sub, .sc__title, .sc__base, .stepflow h3, .stepflow p, .chain li, .share__notes li, .flow__list p, .flow__roles li, .flow__need h3 { word-break: auto-phrase; }

/* ---------- buttons（角を立てたフラットな矩形） ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 64px; padding: 0 2.2em;
  border: 1px solid transparent; border-radius: 0;
  background: var(--brand); color: #fff;
  font-weight: 900; font-size: 1.1rem; line-height: 1.3; letter-spacing: .06em;
  text-align: center; word-break: keep-all; overflow-wrap: anywhere; /* 長いCTA文言は<wbr>の位置で折り返す */
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: scale(.98); }
.btn::after {
  content: ""; flex-shrink: 0; width: .55em; height: .55em; margin-left: .3em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform .2s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn:hover::after { transform: translateX(4px) rotate(-45deg); }
.btn--header { min-height: 44px; font-size: .95rem; padding: 0 1.5em; white-space: nowrap; flex-shrink: 0; }
.btn--big { min-height: 88px; font-size: 1.45rem; padding: 0 1.8em; width: min(100%, 720px); }
.btn--fv { min-height: 68px; font-size: 1.1rem; padding: 0 2em; }
.section-cta { margin-top: 72px; }
/* メインCTA（左）＋電話相談（右・サブ）。並びきらない幅では折り返す */
.cta-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px 16px; }
.section-cta.cta-pair { justify-content: flex-start; }
.btn--line { flex-shrink: 0; padding: 0 1.6em; font-size: 1rem; }
.btn__icon { width: 1.3em; height: 1.3em; flex-shrink: 0; margin-right: -.2em; }
/* 電話ボタン：白地では黒、黒地では白の枠線 */
.btn.btn--tel { background: var(--ink); color: #fff; }
.btn.btn--tel:hover { background: #000; }
.btn--tel::after { display: none; }
.is-dark .btn.btn--tel, .fv .btn.btn--tel { background: transparent; border-color: rgba(255,255,255,.5); font-weight: 700; }
.is-dark .btn.btn--tel:hover, .fv .btn.btn--tel:hover { background: rgba(255,255,255,.1); }
.tag {
  display: inline-block; background: var(--ink); color: #fff;
  font-size: .72em; font-weight: 700; padding: .15em .7em; border-radius: 0; line-height: 1.6; letter-spacing: .08em;
  flex-shrink: 0; white-space: nowrap;
}

/* ---------- 見出し・本文の共通部品 ---------- */
.story__kicker {
  display: flex; align-items: center; gap: 16px;
  color: var(--brand-strong); font-weight: 700; font-size: .95rem; letter-spacing: .16em; line-height: 1.6; margin-bottom: 28px;
}
.story__kicker::before { content: ""; width: 48px; height: 2px; background: currentColor; flex-shrink: 0; }
.story__kicker--light { color: var(--brand-on-dark); }
.story__h2 {
  font-weight: 900; font-size: clamp(34px, 2.9vw + 12px, 72px);
  line-height: 1.28; letter-spacing: .01em; margin-bottom: 64px;
}
.story__h2--light { color: #fff; }
/* セクションの締めの一文：罫線の下に置く短いステートメント */
.story__close {
  margin-top: 104px; padding-top: 40px; border-top: 1px solid var(--ink);
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(22px, 1.3vw + 12px, 36px); line-height: 1.7; letter-spacing: .03em;
}
.story__close strong { color: var(--brand-strong); font-weight: 900; }
.story__close--light { color: #fff; border-top-color: var(--rule-dark-strong); }
.story__close--light strong { color: var(--brand-on-dark); }

.letter { max-width: 720px; font-size: 1.1rem; line-height: 2.05; font-weight: 500; }
.letter p + p { margin-top: 1.4em; }
.letter strong { font-weight: 900; }
.letter--light { color: #f0f0f0; }
.letter--aside { margin: 72px 0 0 auto; }
.letter__turn { margin-top: 2.4em !important; padding-left: 22px; border-left: 4px solid var(--brand); font-family: var(--font-serif); font-weight: 700; font-size: 1.25em; line-height: 1.75; }

/* 見出しブロック：見出しは横幅いっぱいに大きく、本文は右側のカラムに寄せる */
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; margin-bottom: 88px; }
.sec-head > * { grid-column: 1 / -1; }
.sec-head > .story__h2 { margin-bottom: 0; }
.sec-head > .letter, .sec-head > .flow__lead { grid-column: 2; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink); max-width: none; }
.is-dark .sec-head > .letter { border-top-color: var(--rule-dark-strong); }

/* 問いかけ：特大の「?」を左に置いた一文 */
.ask { position: relative; max-width: 1080px; margin: 128px 0 0; padding: 8px 0 8px clamp(120px, 15vw, 230px); }
.ask__mark {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-en); font-weight: 900; font-size: clamp(150px, 17vw, 280px); line-height: .8; color: var(--brand);
}
.ask__q { font-family: var(--font-serif); font-weight: 900; font-size: clamp(28px, 2vw + 12px, 52px); line-height: 1.5; letter-spacing: .03em; }
.ask__sub { margin-top: 20px; font-size: 1.05rem; font-weight: 700; color: var(--gray); line-height: 1.85; }
.ask--light { color: #fff; }
.ask--light .ask__sub { color: var(--on-dark); }

.checks li { position: relative; padding-left: 1.7em; font-size: 1.02rem; font-weight: 700; line-height: 1.6; margin-bottom: .7em; }
.checks li::before { content: ""; position: absolute; left: 0; top: .22em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--brand); }
.checks li::after {
  content: ""; position: absolute; left: .36em; top: .38em; width: .3em; height: .55em;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.header__inner { width: auto; margin: 0; padding: 0 var(--gutter); gap: 16px; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.header__logo { display: block; flex-shrink: 0; }
.header__logo img { display: block; width: auto; height: 38px; }
.header__cta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.btn--header-line { font-size: .9rem; padding: 0 1.3em; }

/* ---------- FV：黒地に写真とコピーを並べた、映画のキービジュアルのような構図 ----------
   PCは左に写真・右にコピー、タブレット・スマホは写真の下にコピー。
   右側（下側）は メインコピー → 成果 → 対応範囲 → 実績 → CTA の順に読む */
.fv { --fv-header-h: var(--header-h); position: relative; background: var(--black); color: #fff; }
.fv__visual { position: relative; }
/* 写真は縦書きコピーなし。差し伸べた手（画像の横22〜40%）から縁をつかむ右手（〜80%）までを残して切り取る */
.fv__photo { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.fv__picture { display: contents; }
.fv__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% 50%; }
.fv__vcopy { display: none; } /* スマホ専用 */
.fv__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(to bottom, rgba(11,11,11,0), var(--black)); pointer-events: none; }
.fv__copy { position: relative; z-index: 1; max-width: 760px; padding: 40px var(--gutter) 64px; }
.fv__title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(48px, 3.6vw + 20px, 92px); line-height: 1.14; letter-spacing: .04em; }
.fv__title span { display: block; white-space: nowrap; }
.fv__lead { position: relative; margin-top: 28px; padding-top: 24px; font-size: clamp(20px, .7vw + 14px, 28px); font-weight: 700; line-height: 1.5; }
.fv__lead::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--brand); }
.fv__note { margin-top: 12px; font-size: 1rem; font-weight: 500; line-height: 1.75; color: var(--on-dark); }
/* 説明文は意味の切れ目でだけ折り返す */
.fv__lead span, .fv__note span, .fv__proof-label span { display: inline-block; }
/* 実績：数字と「何の数字か」をひとまとまりに。数字はCTAの塗りと競合しないよう明るいアクセント色 */
.fv__proof { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule-dark); }
.fv__proof-num { font-family: var(--font-en); font-weight: 900; font-size: clamp(48px, 1.8vw + 26px, 64px); line-height: 1; letter-spacing: -.03em; color: var(--brand-on-dark); white-space: nowrap; }
.fv__proof-num small { font-size: .45em; margin-left: .06em; letter-spacing: 0; }
.fv__proof-label { margin-top: 10px; font-size: .95rem; font-weight: 700; line-height: 1.5; color: #fff; }
.fv__proof-note { margin-top: 6px; font-size: .75rem; line-height: 1.6; color: var(--on-dark-mute); }
.fv__cta { margin-top: 32px; justify-content: flex-start; align-items: flex-start; }
.fv__cta-main { display: flex; flex-direction: column; gap: 10px; }
.fv__cta-sub { font-size: .85rem; font-weight: 500; line-height: 1.5; color: var(--on-dark); word-break: keep-all; overflow-wrap: anywhere; }
.fv__cta .btn--line { min-height: 56px; margin-top: 6px; } /* 68pxのメインボタンと上下中央をそろえる */

@media (min-width: 1025px) {
  /* 左右50%ずつにコピーと写真。写真は差し伸べた手から縁をつかむ左手まで（画像の横18〜84%）が必ず入る高さを上限にし、
     コピーの方が高いときは写真を上下中央に置いて、上下と左端を黒になじませる */
  .fv__visual { --fv-photo-h: calc(50vw * 6 / 7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fv__photo { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: var(--fv-photo-h); }
  .fv__img {
    position: absolute; left: 0; top: 50%; height: min(100%, var(--fv-photo-h)); transform: translateY(-50%);
    object-position: 52% 45%; /* 人物の中心を写真の中央に */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .fv__photo::after { inset: 0 auto 0 0; width: 6%; height: auto; background: linear-gradient(to left, rgba(11,11,11,0), var(--black)); }
  .fv__copy { grid-column: 1; grid-row: 1; align-self: center; max-width: 720px; padding: 48px clamp(28px, 2.6vw, 48px) 48px var(--gutter); }
  .fv__title { font-size: clamp(50px, 2.6vw + 26px, 84px); }
  .fv__lead { margin-top: 22px; padding-top: 20px; }
  .fv__proof { margin-top: 26px; padding-top: 18px; }
  .fv__cta { margin-top: 26px; }
}

/* ---------- FV直下：無料相談フォーム ---------- */
.fv-inquiry { background: var(--white); padding: 96px 0; border-bottom: 1px solid var(--line); }
.fv__right .form-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 72px; padding: 0; box-shadow: none; }
.fv__right .form-card__title { grid-column: 1; display: block; text-align: left; font-size: clamp(28px, 1.4vw + 14px, 42px); line-height: 1.35; }
.fv__right .form-card__title .tag { display: table; margin-bottom: 20px; font-size: .9rem; }
.fv__right .form-card__note { grid-column: 1; text-align: left; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink); font-size: .95rem; line-height: 1.8; }
.fv__right .form { grid-column: 2; grid-row: 1 / span 2; }
.fv__right .form__fields:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.fv__right .form .field { margin-bottom: 0; }
.fv__right .form .field:nth-child(5) { grid-column: 1 / -1; }
.fv__right .form .agree { grid-column: 1 / -1; margin: 0; }
.fv__right .form .btn { grid-column: 1 / -1; }

/* form */
.form-card { background: #fff; color: var(--ink); border-radius: 0; padding: 48px; }
.form-card__title { font-weight: 900; font-size: 1.1rem; line-height: 1.5; }
.form-card__note { font-size: .9rem; color: var(--brand-strong); font-weight: 700; margin: 0 0 28px; line-height: 1.6; }
.form .field { margin-bottom: 20px; }
.form label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; letter-spacing: .04em; }
.req { display: inline-block; background: var(--brand-strong); color: #fff; font-size: .68rem; padding: 0 .55em; border-radius: 0; margin-left: .6em; line-height: 1.7; vertical-align: middle; letter-spacing: .04em; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form select, .form textarea {
  width: 100%; min-height: 54px; border: 1px solid var(--on-dark-mute); border-radius: 0; padding: 13px 14px;
  font: inherit; font-size: 1rem; line-height: 1.5; background: #fafafa; color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink); }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand-secondary); outline-offset: 0; border-color: transparent; background: #fff; }
.form .agree { display: flex; gap: .6em; align-items: flex-start; font-size: .86rem; font-weight: 500; margin: 8px 0 20px; line-height: 1.5; }
.form .agree input { margin-top: .2em; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }
.form .agree a { text-decoration: underline; }
.form .btn { width: 100%; min-height: 68px; }
.form__done { font-weight: 700; padding: 24px 0; color: var(--brand-strong); }

/* ---------- 1. scene（共感） ---------- */
.story { padding: var(--sec-pad) 0; position: relative; z-index: 2; background: #fff; }
.sec-head--scene { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; margin-bottom: 0; }
.sec-head--scene > .story__kicker { grid-column: 1; position: sticky; top: calc(var(--header-h) + 40px); }
.sec-head--scene > .letter { grid-column: 2; margin: 0; padding-top: 0; border-top: 0; font-size: 1.15rem; line-height: 2.15; }
.story__kicker--title {
  display: block; color: var(--ink); font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(34px, 2.4vw + 12px, 64px); line-height: 1.35; letter-spacing: .03em; margin: 0;
}
.story__kicker--title::before { display: block; width: 48px; height: 4px; margin-bottom: 32px; background: var(--brand); }
.story--scene .letter strong { font-family: var(--font-en); font-size: 1.9em; line-height: 1; color: var(--brand); letter-spacing: -.02em; }

/* 3つの悩み：罫線で区切った3段組み。番号は輪郭だけの特大数字。
   Roboto 太字は「3」などの字形の内部で線が重なっているため、輪郭線だけだと内側に余計な線が出る。
   太めの線を引いてから白（背景色）で塗り重ね（paint-order）、外側半分の線だけを見せる */
.asks3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 120px; border-top: 2px solid var(--ink); }
.asks3 li { position: relative; display: flex; flex-direction: column; padding: 36px 36px 8px; border-left: 1px solid var(--line); }
.asks3 li:first-child { padding-left: 0; border-left: 0; }
.asks3 li:last-child { padding-right: 0; }
.asks3__num { font-family: var(--font-en); font-weight: 900; font-size: clamp(64px, 4vw + 24px, 104px); line-height: .9; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.asks3 h3 { font-weight: 900; font-size: 1.35rem; line-height: 1.6; margin: 28px 0 24px; }
.asks3__voice { font-size: .98rem; color: var(--gray); font-weight: 500; line-height: 1.7; padding-left: 16px; border-left: 2px solid var(--line); margin-bottom: 28px; }
.asks3__ans { position: relative; margin-top: auto; padding: 18px 0 0 1.5em; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.02rem; line-height: 1.7; }
.asks3__ans::before { content: "→"; position: absolute; left: 0; top: 18px; color: var(--brand-strong); font-weight: 900; }

/* ---------- 2. structure（事業構造） ---------- */
.structure { background: var(--ink); color: #fff; padding: var(--sec-pad) 0; }
/* 「媒体が決める」→「御社が決められる」を左右の対比で見せる */
.structure__formula { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: stretch; margin: 0 0 88px; border-top: 1px solid var(--rule-dark-strong); border-bottom: 1px solid var(--rule-dark-strong); }
.structure__formula span { display: flex; align-items: center; padding: 44px 32px 44px 0; color: var(--on-dark-mute); font-weight: 700; font-size: clamp(18px, .8vw + 10px, 24px); line-height: 1.55; }
.structure__formula i { display: grid; place-items: center; padding: 0 28px; font-style: normal; font-family: var(--font-en); font-weight: 900; font-size: 2.6rem; color: var(--brand-on-dark); }
.structure__formula strong { display: flex; align-items: center; padding: 44px 48px; background: var(--brand); font-size: clamp(24px, 1.5vw + 10px, 42px); font-weight: 900; line-height: 1.4; }
.structure .letter { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.structure .letter p + p { margin-top: 0; }
.chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 88px; }
.chain li { position: relative; padding: 28px 28px 32px; border-top: 2px solid var(--rule-dark-strong); font-weight: 700; line-height: 1.75; font-size: 1.08rem; color: var(--on-dark); }
.chain li + li::before { content: ""; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left: 10px solid var(--brand-on-dark); border-right: 0; }
.chain li:last-child { background: var(--brand); border-top-color: var(--brand); color: #fff; }

/* ---------- 3. 反響が届く時間帯（63.4%） ---------- */
.funnelsec { padding: var(--sec-pad) 0; }
.share { margin-top: 0; }
.share__big { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; font-weight: 900; }
.share__big strong { font-family: var(--font-en); font-size: clamp(120px, 17vw, 300px); color: var(--brand); line-height: .78; letter-spacing: -.05em; }
.share__big strong small { font-size: .32em; margin-left: .04em; letter-spacing: 0; }
.share__big span { display: block; max-width: 11em; padding-bottom: .2em; font-size: clamp(20px, 1vw + 10px, 30px); line-height: 1.45; }
.share__bar { display: flex; margin-top: 64px; min-height: 96px; }
.share__bar span { display: flex; align-items: center; padding: 12px 20px; font-weight: 900; font-size: 1rem; line-height: 1.4; }
.share__off { background: var(--brand); color: #fff; }
.share__on { background: var(--line); color: var(--gray); }
.share__sub { margin-top: 4px; }
.share__sub span { display: block; background: var(--ink); color: #fff; padding: 8px 20px; font-weight: 700; font-size: .88rem; line-height: 1.4; }
.share__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; }
.share__notes li { padding-top: 16px; border-top: 1px solid var(--ink); font-weight: 700; line-height: 1.75; }

/* ---------- 4. 初動の速さ（82.1% vs 33.3%） ---------- */
.operation { background: var(--black); color: #fff; padding: var(--sec-pad) 0; }
.operation .story__kicker { color: var(--brand-on-dark); }
.operation .story__h2 { color: #fff; }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-top: 1px solid var(--rule-dark-strong); border-bottom: 1px solid var(--rule-dark-strong); }
.versus__card { padding: 48px 48px 44px 0; }
.versus__card--bad { padding: 48px 0 44px 48px; }
.versus__when { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 1.25rem; }
.versus__when::before { content: ""; width: 12px; height: 12px; background: var(--brand); flex-shrink: 0; }
.versus__card--bad .versus__when { color: var(--on-dark-mute); }
.versus__card--bad .versus__when::before { background: var(--gray); }
.versus__rate { margin-top: 20px; font-family: var(--font-en); font-weight: 900; font-size: clamp(96px, 12vw, 220px); line-height: .85; letter-spacing: -.05em; color: var(--brand); }
.versus__rate small { font-size: .32em; margin-left: .04em; letter-spacing: 0; }
.versus__card--bad .versus__rate { color: var(--gray); }
.versus__lbl { margin-top: 16px; font-size: .95rem; font-weight: 700; color: var(--on-dark-mute); }
.versus__vs { display: flex; align-items: center; padding: 0 36px; border-left: 1px solid var(--rule-dark-strong); border-right: 1px solid var(--rule-dark-strong); font-family: var(--font-en); font-weight: 900; font-size: 1.2rem; letter-spacing: .2em; color: var(--on-dark-mute); }
.operation .note { color: var(--on-dark-mute); }
.operation .letter { color: #f0f0f0; }
.operation .letter strong { color: var(--brand-on-dark); }

/* ---------- 5. 6工程の打ち手（番号付きカードを矢印でつなぐフロー図。PC 3列×2段 / TB 2列×3段 / SP 縦1列） ---------- */
.stepflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 56px; }
.stepflow li { position: relative; display: flex; flex-direction: column; padding: 24px 28px 28px; background: var(--surface); border-top: 2px solid var(--ink); }
.stepflow li + li::before { content: ""; position: absolute; left: -34px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left: 12px solid var(--brand); border-right: 0; }
.stepflow li:nth-child(3n+1)::before { display: none; }
.stepflow__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stepflow__num { font-family: var(--font-en); font-weight: 900; font-size: clamp(40px, 1.6vw + 18px, 52px); line-height: 1; letter-spacing: .04em; color: var(--brand); }
.stepflow__icon { flex: none; width: 40px; height: 40px; color: var(--ink); }
.stepflow h3 { margin: 18px 0 8px; font-size: 1.3rem; font-weight: 900; line-height: 1.5; }
.stepflow p { font-size: .98rem; font-weight: 500; line-height: 1.75; }
.funnelsec--steps .story__close { margin-top: 56px; }

/* ---------- 6. reveal（秒速ISの登場）：全面オレンジに特大の白文字 ---------- */
.reveal { background: var(--brand); color: #fff; padding: var(--sec-pad) 0; position: relative; }
.reveal__kicker { display: flex; align-items: center; gap: 16px; font-weight: 700; letter-spacing: .16em; font-size: 1rem; }
.reveal__kicker::before { content: ""; width: 48px; height: 2px; background: currentColor; flex-shrink: 0; }
.reveal__h2 { font-weight: 900; font-size: clamp(44px, 5.6vw + 4px, 120px); line-height: 1.12; letter-spacing: -.01em; margin: 28px 0 88px; }
.reveal__panel { background: #fff; color: var(--ink); padding: clamp(32px, 5.5vw, 88px); }
.reveal__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
.reveal__logo { grid-column: 1; }
.reveal__logo img { display: block; width: min(100%, 320px); height: auto; }
.reveal__catch { grid-column: 1; margin-top: 36px; font-weight: 900; font-size: clamp(28px, 1.8vw + 10px, 50px); letter-spacing: .02em; line-height: 1.3; }
.reveal__def { grid-column: 2; grid-row: 1 / span 2; padding-left: 40px; border-left: 1px solid var(--line); font-size: 1.1rem; line-height: 2.05; font-weight: 500; }
.reveal__def strong { color: var(--brand-strong); font-weight: 900; }
.strengths__title { margin-top: 104px; padding-top: 36px; border-top: 2px solid var(--ink); font-weight: 900; font-size: clamp(24px, 1.3vw + 12px, 38px); line-height: 1.45; letter-spacing: .02em; }
.strengths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.strengths li { padding: 0 36px 8px; border-left: 1px solid var(--line); }
.strengths li:first-child { padding-left: 0; border-left: 0; }
.strengths li:last-child { padding-right: 0; }
.strengths__num { font-family: var(--font-en); font-weight: 900; color: var(--brand); letter-spacing: -.03em; font-size: 3.4rem; line-height: 1; }
.strengths__icon { width: 52px; height: 52px; margin: 24px 0 20px; color: var(--ink); }
.strengths__icon svg { width: 52px; height: 52px; }
.strengths h4 { font-size: 1.4rem; font-weight: 900; margin-bottom: 12px; line-height: 1.45; }
.strengths p { font-size: 1rem; line-height: 1.9; font-weight: 500; }
/* 仕組み（グレー）と人（黒）の役割分担 */
/* 役割分担の図：仕組み（グレー）→ 通知 → 人（黒）→ 来店確定、両者が締めの一文に合流 */
.roles { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); margin-top: 96px; position: relative; }
.roles__col { display: flex; flex-direction: column; background: var(--gray-light); padding: 40px 44px 36px; }
.roles__col--people { background: var(--ink); color: #fff; }
.roles__tag { font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--gray); }
.roles__col--people .roles__tag { color: var(--on-dark-mute); }
.roles h3 { margin-top: 8px; font-size: 1.5rem; font-weight: 900; line-height: 1.3; }
.roles__role { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 4px 14px; font-size: .95rem; font-weight: 900; letter-spacing: .08em; background: var(--brand); color: #fff; }
.roles__list { margin-top: 24px; border-top: 1px solid var(--ink); }
.roles__col--people .roles__list { border-top-color: var(--rule-dark-strong); }
.roles__list li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0; border-bottom: 1px solid #DCDCDC; font-size: 1.05rem; font-weight: 700; line-height: 1.45; }
.roles__col--people .roles__list li { border-bottom-color: var(--rule-dark); }
.roles__list svg { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--brand-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.roles__col--people .roles__list svg { stroke: var(--brand-on-dark); }
.roles__goal { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; font-weight: 900; font-size: 1.1rem; color: var(--brand-on-dark); }
.roles__goal::before { content: ""; order: -2; width: 22px; height: 2px; background: currentColor; }
.roles__goal::after { content: ""; order: -1; margin-left: -14px; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
/* 中央の連結：仕組み → 人 */
.roles__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--brand); }
.roles__link-label { font-size: .85rem; font-weight: 900; letter-spacing: .1em; }
.roles__link-arrow { position: relative; width: 100%; height: 2px; background: currentColor; }
.roles__link-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border: 8px solid transparent; border-left: 12px solid currentColor; border-right: 0; }
/* 両者 → 締めの一文 への合流線 */
.roles::after { content: ""; position: absolute; left: calc((100% - 96px) / 4); right: calc((100% - 96px) / 4); top: 100%; height: 40px; border: 2px solid var(--brand); border-top: 0; }
.reveal__close.reveal__close--roles { position: relative; margin-top: 96px; padding-top: 40px; }
.reveal__close--roles::before { content: ""; position: absolute; left: 50%; top: -56px; width: 2px; height: 72px; background: var(--brand); transform: translateX(-50%); }
.reveal__close--roles::after { content: ""; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); border: 8px solid transparent; border-top: 12px solid var(--brand); border-bottom: 0; }
.reveal__close { margin-top: 88px; text-align: center; font-family: var(--font-serif); font-weight: 900; font-size: clamp(24px, 1.8vw + 10px, 48px); line-height: 1.55; letter-spacing: .04em; }

/* ---------- 7. convert（行きたい気持ちを作る） ---------- */
.convert { background: #fff; padding: var(--sec-pad) 0; }
.convert__intro p:first-child { font-family: var(--font-serif); font-weight: 900; font-size: 1.5em; line-height: 1.6; }
.convert__intro strong { color: var(--brand-strong); }
/* 聞く → 気持ちをつくる → 送り出す：動詞を見出しのように大きく。最後の工程だけ黒地で強調 */
.convert-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.convert-steps li { position: relative; padding: 40px 36px 48px; border-top: 2px solid var(--ink); border-left: 1px solid var(--line); }
.convert-steps li:first-child { padding-left: 0; border-left: 0; }
.convert-steps li:last-child { background: var(--ink); color: #fff; border-left: 0; }
.convert-steps li + li::before { content: ""; position: absolute; left: -7px; top: -9px; border: 8px solid transparent; border-top: 10px solid var(--brand); border-bottom: 0; }
.convert-steps__head { display: flex; flex-direction: column; gap: 14px; }
.convert-steps__num { font-family: var(--font-en); font-weight: 900; font-size: 1rem; letter-spacing: .14em; line-height: 1; color: var(--brand-strong); }
.convert-steps li:last-child .convert-steps__num { color: var(--brand-on-dark); }
.convert-steps__verb { font-family: var(--font-serif); font-weight: 900; font-size: clamp(32px, 1.9vw + 12px, 48px); line-height: 1.2; letter-spacing: .02em; }
.convert-steps h3 { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 1.3rem; font-weight: 900; line-height: 1.55; }
.convert-steps li:last-child h3 { border-top-color: var(--rule-dark-strong); }
.convert-steps li > p:not(.convert-steps__head) { font-size: 1rem; line-height: 1.9; font-weight: 500; margin-top: 14px; }
.convert-steps li:last-child > p:not(.convert-steps__head) { color: var(--on-dark); }
.convert .letter--aside strong { color: var(--brand-strong); }

/* ---------- 8. cases（工程ごとの効果）：黒地に特大の数字 ---------- */
.cases { background: var(--ink); color: #fff; padding: var(--sec-pad) 0; }
/* 3枚の比較カード：場面 → 打ち手 → 指標 → 特大の数値 → 比較条件 の順に揃える。
   伝えたい数値（時間外の確定率）のカードだけをオレンジで塗る */
.story-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.story-cases li { display: flex; flex-direction: column; padding: 36px 32px 32px; border: 1px solid var(--rule-dark-strong); }
.sc__tag { align-self: flex-start; white-space: nowrap; padding: .25em .9em; border: 1px solid var(--brand-on-dark); color: var(--brand-on-dark); font-weight: 700; font-size: .85rem; line-height: 1.6; letter-spacing: .04em; }
.sc__title { margin-top: 16px; font-size: 1.3rem; font-weight: 900; line-height: 1.5; }
.sc__metric { margin-top: 28px; font-size: .95rem; font-weight: 700; line-height: 1.5; color: var(--on-dark); }
.sc__num { margin-top: 8px; font-family: var(--font-en); font-weight: 900; font-size: clamp(26px, 1vw + 16px, 36px); line-height: 1; color: var(--brand); white-space: nowrap; }
.sc__num strong { font-size: clamp(64px, 4.4vw + 16px, 112px); letter-spacing: -.04em; }
.sc__base { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule-dark-strong); font-size: .9rem; font-weight: 700; line-height: 1.6; color: var(--on-dark); }
.sc__num + .sc__base { margin-top: 28px; }
.sc__key { flex-shrink: 0; padding: 0 .6em; background: var(--rule-dark); color: #fff; font-size: .78rem; letter-spacing: .08em; }
.sc__base b { font-family: var(--font-en); font-weight: 900; font-size: 1.25em; color: #fff; white-space: nowrap; }
.story-cases li.is-key { background: var(--brand); border-color: var(--brand); }
.is-key .sc__tag { border-color: #fff; color: #fff; }
.is-key .sc__metric, .is-key .sc__base { color: #fff; }
.is-key .sc__num { color: #fff; }
.cases .note { color: var(--on-dark-mute); }

/* ---------- 9. 試算・比較の表 ---------- */
.days { padding: var(--sec-pad) 0; }
.compare { margin: 0 0 120px; }
.compare__title { display: flex; align-items: center; gap: 14px; font-weight: 900; font-size: clamp(20px, .8vw + 12px, 28px); line-height: 1.5; margin-bottom: 24px; }
.compare__title::before { content: ""; width: 14px; height: 14px; background: var(--brand); flex-shrink: 0; }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare__table { width: 100%; min-width: 720px; border-top: 2px solid var(--ink); }
.compare__table th, .compare__table td { padding: 22px 24px; text-align: left; font-size: 1.02rem; vertical-align: middle; line-height: 1.55; border-bottom: 1px solid var(--line); }
.compare__table thead th { padding: 16px 24px; color: var(--gray); font-weight: 700; font-size: .92rem; letter-spacing: .08em; border-bottom: 1px solid var(--ink); }
.compare__table thead th.is-hl { background: var(--brand); color: #fff; font-weight: 900; font-size: 1.05rem; }
.compare__table tbody th { font-weight: 900; font-size: 1rem; padding-left: 0; width: 22%; }
.compare__table tbody td { width: 39%; }
.compare__table tbody td.is-hl { background: var(--surface); color: var(--brand-strong); font-weight: 900; font-size: 1.1rem; }
.compare__table .nw { display: inline-block; }
.compare__table td small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--gray); }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
/* 試算：結論 → 比較図 → 前提と計算の順。
   文字は3段階（結論＝--est-l ／ 比較の数値・差分＝--est-m ／ 注釈＝--est-s）に揃える */
.est { --est-m: clamp(30px, 1.2vw + 16px, 40px); --est-s: .92rem; border-top: 2px solid var(--ink); }
.est__result { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px 48px; padding: 40px 48px; background: var(--brand); color: #fff; }
.est__result-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 1.05rem; letter-spacing: .04em; }
.est__tag { padding: 0 .7em; border: 1px solid #fff; font-size: .8rem; font-weight: 700; line-height: 1.7; letter-spacing: .08em; }
.est__result-num { font-family: var(--font-en); font-weight: 900; font-size: clamp(26px, 1vw + 16px, 36px); line-height: 1; white-space: nowrap; }
.est__result-num strong { font-size: clamp(64px, 4.4vw + 16px, 112px); letter-spacing: -.03em; }
.est__sign { font-size: clamp(36px, 2vw + 16px, 60px); }
.est__unit { font-size: .7em; }
.est__result-sub { padding-bottom: .4em; font-weight: 700; font-size: 1.1rem; line-height: 1.7; }
.est__result-sub b { font-family: var(--font-en); font-weight: 900; }

.est__chart { padding: 16px 0 28px; border-bottom: 1px solid var(--line); }
.est__row { display: grid; grid-template-columns: 180px 1fr 200px; align-items: center; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.est__metric { font-weight: 900; font-size: 1.25rem; line-height: 1.5; }
.est__metric small { display: block; margin-top: 4px; font-size: var(--est-s); font-weight: 700; color: var(--brand-strong); line-height: 1.6; }
.est__bars { display: grid; gap: 12px; }
.est__bar { display: grid; grid-template-columns: 7.5em 1fr 5.5em; align-items: center; gap: 16px; font-size: var(--est-s); }
.est__bar-label { font-weight: 700; color: var(--gray); white-space: nowrap; }
.est__bar-track { display: block; height: 24px; background: var(--gray-light); }
.est__bar-fill { display: block; width: var(--v); height: 100%; }
.est__bar.is-now .est__bar-fill { background: var(--gray); opacity: .45; }
.est__bar.is-is .est__bar-fill { background: var(--brand); }
.est__bar-val { font-family: var(--font-en); font-weight: 700; white-space: nowrap; }
.est__bar-val b, .est__diff b { font-size: var(--est-m); font-weight: 900; line-height: 1; }
.est__bar.is-is .est__bar-label, .est__bar.is-is .est__bar-val { color: var(--brand-strong); }
.est__diff { padding-left: 24px; border-left: 2px solid var(--brand); font-family: var(--font-en); font-weight: 700; font-size: 1.05rem; color: var(--brand-dark); white-space: nowrap; }
.est__scale { margin-top: 12px; font-size: var(--est-s); color: var(--gray); text-align: right; }

.est__calc { padding-top: 32px; }
.est__h { margin-bottom: 12px; font-weight: 900; font-size: 1rem; letter-spacing: .06em; }
.est__calc ol { counter-reset: est; }
.est__calc li { counter-increment: est; position: relative; padding: 12px 0 12px 2.4em; border-bottom: 1px solid var(--line); font-family: var(--font-en); font-weight: 700; font-size: var(--est-s); line-height: 1.7; }
.est__calc li::before { content: counter(est); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--surface-strong); color: var(--brand-strong); font-size: .85em; font-weight: 900; }
.est__calc li span { display: inline-block; min-width: 5.5em; margin-right: 8px; font-family: var(--font-base); color: var(--gray); }
.est__calc li b { color: var(--brand-dark); font-weight: 900; white-space: nowrap; }
.est + .note { font-size: var(--est-s, .92rem); }

/* ---------- 10. doubts（「でも……」への答え） ---------- */
.doubts { padding: var(--sec-pad) 0; border-top: 1px solid var(--line); }
.doubt-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.doubt-list li { padding: 32px 0 44px; border-top: 1px solid var(--ink); }
.doubt__q { position: relative; font-family: var(--font-serif); font-weight: 900; font-size: 1.35rem; line-height: 1.55; padding-left: 2.2em; }
.doubt__q::before { content: "Q"; position: absolute; left: 0; top: -.15em; font-family: var(--font-en); font-weight: 900; color: var(--brand); font-size: 1.7rem; line-height: 1.3; }
.doubt__a { position: relative; margin-top: 16px; font-size: 1rem; line-height: 1.95; font-weight: 500; padding-left: 2.97em; }
.doubt__a::before { content: "A"; position: absolute; left: 0; top: -.15em; font-family: var(--font-en); font-weight: 900; color: var(--ink); font-size: 1.7rem; line-height: 1.3; }
.doubt__a strong { font-weight: 900; color: var(--brand-dark); }

/* ---------- 11. flow（導入の流れ） ---------- */
.flow { background: var(--gray-light); padding: var(--sec-pad) 0; }
.flow__lead { font-size: 1.1rem; line-height: 2; font-weight: 500; }
/* PC：4枚のカードを横に並べ、間の矢印で順番を示す（.stepflow と同じ作法） */
.flow__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.flow__list > li { position: relative; display: flex; flex-direction: column; padding: 24px 24px 28px; background: #fff; border-top: 2px solid var(--ink); }
.flow__list > li + li::before { content: ""; position: absolute; left: -32px; top: 41px; border: 9px solid transparent; border-left: 12px solid var(--brand); border-right: 0; }
.flow__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.flow__num { font-family: var(--font-en); font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: .02em; color: var(--brand); }
.flow__term { flex: none; padding: 4px 12px; border: 1px solid var(--ink); font-size: .85rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; }
.flow__list h3 { font-size: 1.3rem; font-weight: 900; margin: 16px 0 8px; line-height: 1.4; }
.flow__list p { font-size: .98rem; line-height: 1.75; font-weight: 500; }
.flow__list .flow__tag { margin-top: auto; padding-top: 14px; color: var(--brand-strong); font-weight: 700; font-size: .88rem; }
.flow__roles { margin-top: 12px; display: grid; gap: 8px; }
.flow__roles li { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; font-weight: 700; line-height: 1.6; }
/* 担当ラベル：御社＝ブランド色の塗り、秒速IS＝墨の線 */
.flow__who { flex: none; display: inline-block; min-width: 4.6em; padding: 1px 6px; border: 1px solid var(--ink); font-size: .75rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; text-align: center; color: var(--ink); background: #fff; }
.flow__who--client { border-color: var(--brand); background: var(--brand); color: #fff; }
.flow__need { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; margin-top: 64px; background: #fff; padding: 44px 56px; }
.flow__need h3 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 900; margin-bottom: 20px; line-height: 1.5; }
.flow__need h3 .flow__who { font-size: .8rem; }
.flow__ours { border-left: 1px solid var(--line); padding-left: 48px; }
.flow__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flow__chips li { padding: 4px 12px; background: var(--gray-light); font-size: .92rem; font-weight: 700; line-height: 1.6; }

/* ---------- 12. P.S.（追伸） ---------- */
.ps { padding: var(--sec-pad) 0; background: #fff; }
.ps__paper {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 56px;
  max-width: 1000px; margin: 0 auto; padding-top: 48px; border-top: 4px solid var(--ink);
  font-family: var(--font-serif); font-size: 1.15rem; line-height: 2.2; font-weight: 700;
}
.ps__paper > p { grid-column: 2; }
.ps__label { grid-column: 1 !important; grid-row: 1 / span 4; font-weight: 900; font-size: 2.6rem; line-height: 1.2; color: var(--brand-strong); letter-spacing: .1em; }
.ps__paper p + p { margin-top: 1.4em; }
.ps__paper .ps__label + p { margin-top: 0; }
.ps__sign { text-align: right; font-size: 1rem; margin-top: 2.4em !important; line-height: 1.8; }

/* ---------- 最終CTA：全面オレンジに大きなコピー ---------- */
.cta-band { background: var(--brand); padding: clamp(88px, 8vw, 144px) 0; position: relative; }
.cta-band__inner { display: flex; justify-content: center; }
.cta-band__main { text-align: center; flex: 1; }
.cta-band__lead { display: block; color: #fff; font-family: var(--font-serif); font-weight: 900; font-size: clamp(30px, 3vw + 10px, 76px); line-height: 1.4; letter-spacing: .03em; margin-bottom: 56px; }
.cta-band__sub { margin-top: 24px; color: #fff; font-weight: 700; font-size: 1rem; }
.cta-band--final .btn { background: var(--ink); }
.cta-band--final .btn:hover { background: #000; }
.cta-band--final .btn .tag { background: var(--brand); }
.cta-band--final .btn.btn--tel { background: #fff; color: var(--ink); font-size: 1.15rem; }
.cta-band--final .btn.btn--tel:hover { background: var(--gray-light); }

/* ---------- contact：黒地に白いフォーム ---------- */
.contact { background: var(--ink); color: #fff; padding: var(--sec-pad) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.contact__head { display: block; margin: 0; position: sticky; top: calc(var(--header-h) + 40px); }
.contact__head .story__h2 { font-size: clamp(30px, 1.8vw + 14px, 52px); }
.form-card--wide { padding: 48px 48px 44px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field--full { grid-column: 1 / -1; }

/* ---------- footer ---------- */
.footer { background: var(--black); color: #fff; padding: 64px 0 36px; font-size: .88rem; border-top: 1px solid var(--rule-dark); }
.footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.footer__logo { display: inline-block; padding: 10px 14px; background: #fff; }
.footer__brand img { display: block; width: auto; height: 36px; }
.footer__tagline { margin-top: 12px; font-weight: 700; color: var(--on-dark); }
.footer__tagline:nth-of-type(2) { margin-top: 20px; font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: .02em; }
.footer__company { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; max-width: 580px; line-height: 1.6; }
.footer__company dt { font-weight: 700; color: var(--on-dark-mute); }
.footer__links { display: flex; gap: 28px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule-dark); font-size: .8rem; flex-wrap: wrap; }
.footer__links a { text-decoration: underline; }
.footer__copy { margin-top: 18px; font-size: .75rem; color: var(--on-dark-mute); }

/* ---------- floating SP CTA ---------- */
.consultation-float { position: fixed; right: 24px; bottom: 24px; z-index: 90; }
.sp-cta { display: none; }


/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .est__row { grid-template-columns: 140px 1fr 140px; gap: 24px; }
  .est__result { padding: 32px; gap: 8px 32px; }
  :root { --sec-pad: 88px; }
  .btn--header-line { display: none; }
  .sec-head { grid-template-columns: 1fr; margin-bottom: 64px; }
  .sec-head > .letter, .sec-head > .flow__lead { grid-column: 1; margin-top: 36px; }
  .sec-head--scene { margin-bottom: 0; }
  .sec-head--scene > .story__kicker { grid-column: 1; position: static; margin-bottom: 40px; }
  .sec-head--scene > .letter { grid-column: 1; }

  /* FV：メインコピーは写真の縦書き（タブレットは画像内、スマホは .fv__vcopy）で見せ、見出しは読み上げ用に残す */
  .fv__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .fv__lead { margin-top: 0; }
  .fv__photo { aspect-ratio: 16 / 9; } /* 画像内の縦書きコピーを切らない */
  .fv__photo::after { height: 12%; }

  .fv__right .form-card { grid-template-columns: 1fr; }
  .fv__right .form-card__note { margin-bottom: 32px; }
  .fv__right .form { grid-column: 1; grid-row: auto; }

  .asks3 { grid-template-columns: 1fr; margin-top: 80px; }
  .asks3 li, .asks3 li:first-child, .asks3 li:last-child { padding: 32px 0 36px; border-left: 0; }
  .asks3 li + li { border-top: 1px solid var(--line); }
  .asks3__ans { margin-top: 0; }
  .stepflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .stepflow li:nth-child(3n+1)::before { display: block; }
  .stepflow li + li::before { left: -26px; }
  .stepflow li:nth-child(odd)::before { display: none; }

  .structure__formula { grid-template-columns: 1fr; }
  .structure__formula span { padding: 28px 0; }
  .structure__formula i { padding: 0 0 16px; justify-content: start; transform: rotate(90deg); width: 1em; }
  .structure__formula strong { padding: 32px; }
  .structure .letter { grid-template-columns: 1fr; gap: 0; }
  .structure .letter p + p { margin-top: 1.4em; }
  .chain { grid-template-columns: 1fr; gap: 28px; }
  .chain li + li::before { left: 28px; top: -22px; transform: none; border: 8px solid transparent; border-top: 10px solid var(--brand-on-dark); border-bottom: 0; }

  .reveal__intro { grid-template-columns: 1fr; }
  .reveal__def { grid-column: 1; grid-row: auto; margin-top: 32px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .strengths { grid-template-columns: 1fr; }
  .roles { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .roles::after { left: calc((100% - 64px) / 4); right: calc((100% - 64px) / 4); }
  .roles__col { padding: 32px 28px 28px; }
  .roles__list li { font-size: 1rem; gap: 10px; }
  .strengths li, .strengths li:first-child, .strengths li:last-child { padding: 32px 0; border-left: 0; }
  .strengths li + li { border-top: 1px solid var(--line); }
  .strengths li { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: start; }
  .strengths__num { grid-row: 1 / span 3; }
  .strengths__icon { margin: 0 0 12px; }

  .convert-steps { grid-template-columns: 1fr; }
  .convert-steps li, .convert-steps li:first-child { padding: 36px 0 40px; border-left: 0; }
  .convert-steps li:last-child { padding: 36px 32px 40px; }
  .convert-steps li + li::before { left: 24px; }

  /* タブレット・スマホ：1列。左に場面と打ち手、右に数値を置いて1枚の高さを抑える */
  .story-cases { grid-template-columns: 1fr; gap: 16px; }
  .story-cases li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag num" "title num" "metric num" "base base"; column-gap: 24px; align-items: end; padding: 28px 32px; }
  .sc__tag { grid-area: tag; justify-self: start; }
  .sc__title { grid-area: title; }
  .sc__metric { grid-area: metric; margin-top: 12px; }
  .sc__num { grid-area: num; margin-top: 0; text-align: right; }
  .sc__base, .sc__num + .sc__base { grid-area: base; margin-top: 20px; padding-top: 16px; }

  .doubt-list { grid-template-columns: 1fr; }
  /* タブレット以下：縦のタイムライン。左列に番号と期間、右列に内容 */
  .flow__list { grid-template-columns: 1fr; gap: 32px; }
  .flow__list > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px; align-content: start; padding: 22px 24px; }
  .flow__list > li > :not(.flow__head) { grid-column: 2; }
  .flow__list > li + li::before { left: 60px; top: -25px; transform: translateX(-50%); border: 9px solid transparent; border-top: 12px solid var(--brand); border-bottom: 0; }
  .flow__head { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 0; }
  .flow__num { font-size: 44px; }
  .flow__term { padding: 2px 8px; font-size: .78rem; }
  .flow__list h3 { margin: 4px 0 6px; }
  .flow__list .flow__tag { margin-top: 0; padding-top: 8px; }
  .flow__need { grid-template-columns: 1fr; gap: 28px; }
  .flow__ours { border-left: 0; padding: 24px 0 0; border-top: 1px solid var(--line); }

  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .contact__head { position: static; }
}

@media (max-width: 767px) {
  :root { --header-h: 56px; --sec-pad: 72px; }
  .sp { display: inline; }
  .pc { display: none; }
  body { font-size: 15.5px; padding-bottom: calc(136px + env(safe-area-inset-bottom)); }

  .story__kicker { font-size: .82rem; gap: 10px; margin-bottom: 18px; letter-spacing: .1em; }
  .story__kicker::before { width: 24px; }
  .story__h2 { font-size: clamp(25px, 7.2vw, 32px); line-height: 1.38; letter-spacing: 0; }
  .sec-head { margin-bottom: 44px; }
  .sec-head > .letter, .sec-head > .flow__lead { margin-top: 28px; padding-top: 20px; }
  .story__close { font-size: 19px; margin-top: 64px; padding-top: 28px; line-height: 1.8; }
  .story__close br, .letter__turn br { display: none; }
  .letter { font-size: 1.02rem; line-height: 1.95; }
  .letter--aside { margin-top: 44px; }
  .letter__turn { font-size: 1.1em; padding-left: 16px; }
  .ask { margin-top: 80px; padding: 0 0 0 76px; }
  .ask__mark { font-size: 110px; top: 4px; transform: none; }
  .ask__q { font-size: 21px; line-height: 1.6; }
  .ask__sub { font-size: .92rem; margin-top: 12px; }

  .header__inner { gap: 10px; padding: 0 16px; }
  .header__logo img { width: auto; height: 28px; }
  .btn--header { min-height: 40px; font-size: .8rem; padding: 2px .9em; white-space: normal; flex-shrink: 1; line-height: 1.25; letter-spacing: 0; }
  .btn--header::after { display: none; }

  /* FV：ヘッダーを除いた画面の高さちょうどに収め、スクロールせずにCTAまで見せる。
     説明〜CTAの高さを先に確保し、残りの高さをすべて写真に使う（写真は横長すぎ・縦長すぎにならない範囲で伸縮） */
  .fv { display: flex; flex-direction: column; min-height: calc(100vh - var(--fv-header-h)); min-height: calc(100svh - var(--fv-header-h)); }
  .fv__visual { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  /* スマホ用の写真（fv-is-sp.jpg）は縦書きコピーなし。差し伸べた手から縁をつかむ左手までが入るよう人物を中心に左右を切り、
     写真は枠の116%の高さで描いて、頭上の空（画像の上約4%）と手より下の岩肌（下約10%）を切り落とす */
  .fv__photo { aspect-ratio: auto; flex: 1 1 0; min-height: 50vw; max-height: 80vw; container-type: size; }
  .fv__photo::after { height: 16%; }
  .fv__img, .fv__vcopy { position: absolute; left: 0; top: -4.5%; width: 100%; height: 116%; }
  .fv__img { object-position: 52% 50%; }
  /* 縦書きコピー：PC画像内のコピーと同じく明朝の極太。写真と同じ枠に重ね、枠の高さに合わせて文字サイズを変える。
     「決め切る。」は左上の岩肌〜空（差し伸べた手より上）、「掬い獲る。」は右上の空（顔と左腕の間）に置く */
  .fv__vcopy {
    display: block; pointer-events: none;
    font-family: var(--font-serif); font-weight: 900; color: #fff;
    font-size: clamp(18px, 9vw, 46px); font-size: clamp(18px, 11cqh, 46px);
    line-height: 1; letter-spacing: .04em;
    text-shadow: 0 0 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
  }
  .fv__vcopy span { position: absolute; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }
  .fv__vcopy span:first-child { top: 6.5%; left: 4%; }
  /* 「掬い獲る。」は太陽の明るい空に乗るため黒文字にし、影も白のにじみに替える */
  .fv__vcopy span:last-child { top: 10%; right: 4%; color: var(--black); text-shadow: 0 0 10px rgba(255,255,255,.7), 0 0 2px rgba(255,255,255,.8); }
  /* 説明〜CTA：小さい画面でも収まる詰めた寸法。画面が高いときは下の (min-height: 720px) で広げる */
  .fv__copy { flex: none; margin-block: auto; padding: 10px 16px 14px; }
  .fv__lead { padding-top: 0; font-size: 1.04rem; line-height: 1.45; }
  .fv__lead::before { display: none; }
  .fv__note { margin-top: 4px; font-size: .84rem; line-height: 1.55; }
  .fv__proof { margin-top: 10px; padding-top: 8px; }
  .fv__proof-num { font-size: 2.1rem; }
  .fv__proof-label { margin-top: 2px; font-size: .84rem; }
  .fv__proof-note { margin-top: 2px; font-size: .66rem; line-height: 1.45; }
  .fv__cta { margin-top: 12px; gap: 8px; }
  .fv__cta-main { width: 100%; gap: 5px; }
  .fv__cta-sub { font-size: .74rem; text-align: center; }
  .btn--fv { width: 100%; min-height: 52px; font-size: 1rem; padding: 0 1em; }
  .fv__cta .btn--line { width: 100%; min-height: 42px; margin-top: 0; font-size: .9rem; }

  .fv-inquiry { padding: 56px 0; }
  .fv__right .form-card__title { font-size: 24px; }
  .fv__right .form-card__title .tag { margin-bottom: 12px; font-size: .8rem; }
  .fv__right .form-card__note { margin: 16px 0 24px; padding-top: 14px; font-size: .9rem; }
  .fv__right .form__fields:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .form-card { padding: 24px 18px 22px; }
  .form .field { margin-bottom: 16px; }

  .story--scene .story__kicker--title { font-size: 30px; }
  .story__kicker--title::before { margin-bottom: 20px; }
  .sec-head--scene > .story__kicker { margin-bottom: 28px; }
  .sec-head--scene > .letter { font-size: 1.02rem; line-height: 2; }
  .asks3 { margin-top: 56px; }
  .asks3 li, .asks3 li:first-child, .asks3 li:last-child { padding: 24px 0 28px; }
  .asks3__num { font-size: 52px; }
  .asks3 h3 { font-size: 1.15rem; margin: 16px 0 14px; }
  .asks3__voice { font-size: .92rem; margin-bottom: 16px; }
  .asks3__ans { font-size: .95rem; padding-top: 14px; }
  .asks3__ans::before { top: 14px; }
  .stepflow { grid-template-columns: 1fr; gap: 28px; }
  .stepflow li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-content: start; padding: 18px 18px 20px; }
  .stepflow li:nth-child(odd)::before { display: block; }
  .stepflow li + li::before { left: 40px; top: -21px; transform: translateX(-50%); border: 8px solid transparent; border-top: 11px solid var(--brand); border-bottom: 0; }
  .stepflow__head { grid-row: 1 / span 2; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; }
  .stepflow__num { font-size: 32px; }
  .stepflow__icon { width: 28px; height: 28px; }
  .stepflow h3 { margin: 0 0 4px; font-size: 1.12rem; }
  .stepflow p { font-size: .93rem; line-height: 1.7; }
  .funnelsec--steps .story__close { margin-top: 40px; }

  .structure__formula { margin-bottom: 56px; }
  .structure__formula span { padding: 20px 0; font-size: 1rem; }
  .structure__formula i { font-size: 1.8rem; padding-bottom: 10px; }
  .structure__formula strong { padding: 22px 20px; font-size: 1.3rem; }
  .chain { margin-top: 56px; gap: 24px; }
  .chain li { padding: 18px 16px 20px; font-size: .98rem; }
  .chain li br { display: none; }

  .share__big { gap: 8px; }
  .share__big strong { font-size: 33vw; }
  .share__big span { font-size: 1.1rem; }
  .share__bar { margin-top: 36px; min-height: 64px; }
  .share__bar span { font-size: .74rem; padding: 6px 8px; }
  .share__sub span { font-size: .72rem; padding: 5px 8px; }
  .share__notes { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  .share__notes li { font-size: .95rem; }

  .versus { grid-template-columns: 1fr; }
  .versus__card, .versus__card--bad { padding: 28px 0; }
  .versus__vs { padding: 10px 0; border: 0; border-top: 1px solid var(--rule-dark-strong); border-bottom: 1px solid var(--rule-dark-strong); font-size: .95rem; }
  .versus__when { font-size: 1.05rem; }
  .versus__rate { font-size: 30vw; margin-top: 14px; }

  .reveal__kicker { font-size: .88rem; gap: 10px; }
  .reveal__kicker::before { width: 24px; }
  .reveal__h2 { font-size: clamp(32px, 10vw, 44px); margin: 16px 0 44px; line-height: 1.2; }
  .reveal__panel { padding: 32px 20px 28px; }
  .reveal__logo img { width: min(100%, 220px); }
  .reveal__catch { margin-top: 24px; font-size: 26px; }
  .reveal__def { font-size: 1rem; line-height: 1.95; margin-top: 24px; }
  .strengths__title { margin-top: 56px; padding-top: 24px; }
  .strengths { margin-top: 12px; }
  .strengths li { column-gap: 16px; padding: 24px 0 !important; }
  .strengths__num { font-size: 2.4rem; }
  .strengths__icon, .strengths__icon svg { width: 40px; height: 40px; }
  .strengths h4 { font-size: 1.15rem; }
  .strengths p { font-size: .93rem; }
  .roles { grid-template-columns: 1fr; margin-top: 44px; }
  .roles::after { display: none; }
  .roles__col { padding: 24px 20px 20px; }
  .roles__tag { font-size: .8rem; }
  .roles h3 { font-size: 1.25rem; margin-top: 4px; }
  .roles__role { margin-top: 8px; font-size: .88rem; padding: 3px 12px; }
  .roles__list { margin-top: 16px; }
  .roles__list li { min-height: 48px; padding: 8px 0; font-size: .98rem; }
  .roles__list svg { width: 22px; height: 22px; }
  .roles__goal { padding-top: 16px; font-size: 1rem; }
  .roles__link { flex-direction: row; gap: 12px; height: 56px; }
  .roles__link-arrow { width: 2px; height: 36px; margin-top: -8px; }
  .roles__link-arrow::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%); border: 7px solid transparent; border-top: 10px solid currentColor; border-bottom: 0; }
  .roles__link-label { order: 2; }
  .reveal__close { font-size: 22px; margin-top: 48px; }
  .reveal__close.reveal__close--roles { margin-top: 56px; padding-top: 32px; }
  .reveal__close--roles::before { top: -56px; height: 64px; }
  .reveal__close--roles::after { top: 6px; }

  .convert__intro p:first-child { font-size: 1.3em; }
  .convert-steps li, .convert-steps li:first-child { padding: 28px 0 32px; }
  .convert-steps li:last-child { padding: 28px 20px 32px; }
  .convert-steps__verb { font-size: 30px; }
  .convert-steps h3 { margin-top: 20px; padding-top: 16px; font-size: 1.15rem; }
  .convert-steps h3 br { display: none; }
  .convert-steps li > p:not(.convert-steps__head) { font-size: .93rem; }

  .story-cases { gap: 12px; }
  .story-cases li { column-gap: 12px; padding: 22px 18px 18px; }
  .sc__tag { font-size: .78rem; }
  .sc__title { margin-top: 10px; font-size: 1.05rem; }
  .sc__metric { margin-top: 6px; font-size: .85rem; }
  .sc__num { font-size: 22px; }
  .sc__num strong { font-size: clamp(48px, 15vw, 64px); }
  .sc__base, .sc__num + .sc__base { gap: 10px; margin-top: 16px; padding-top: 12px; font-size: .85rem; }

  .compare { margin-bottom: 72px; }
  .compare__title { font-size: 1.1rem; margin-bottom: 16px; gap: 10px; }
  .compare__title::before { width: 10px; height: 10px; }
  .compare__table { min-width: 0; }
  .compare__table th, .compare__table td { font-size: .86rem; padding: 14px 8px; }
  .compare__table thead th { font-size: .8rem; padding: 10px 8px; letter-spacing: .02em; }
  .compare__table thead th.is-hl { font-size: .88rem; }
  .compare__table tbody td.is-hl { font-size: .9rem; }
  .compare__table td small { font-size: .7rem; }
  .compare__table tbody th { width: 24%; font-size: .84rem; }
  .est { --est-m: 26px; --est-s: .84rem; }
  .est__result { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .est__result-num strong { font-size: clamp(52px, 15vw, 72px); }
  .est__sign { font-size: 32px; }
  .est__result-sub { padding-bottom: 0; font-size: .95rem; }
  .est__chart { padding: 4px 0 20px; }
  .est__row { grid-template-columns: 1fr auto; grid-template-areas: "metric diff" "bars bars"; gap: 14px 16px; padding: 22px 0; }
  .est__metric { grid-area: metric; font-size: 1.05rem; }
  .est__diff { grid-area: diff; align-self: start; padding-left: 12px; font-size: .9rem; }
  .est__bars { grid-area: bars; gap: 10px; }
  .est__bar { grid-template-columns: 6.6em 1fr 4.6em; gap: 8px; }
  .est__bar-track { height: 18px; }
  .est__calc { padding-top: 24px; }
  .est__calc li span { display: block; min-width: 0; }
  /* 狭い幅では塊ごとの折り返し（.nw）をやめ、文節単位で自然に折り返す */
  .compare__table .nw { display: inline; }
  .compare__table th, .compare__table td { word-break: auto-phrase; }

  .doubt-list li { padding: 22px 0 28px; }
  .doubt__q { font-size: 1.1rem; }
  .doubt__q::before { font-size: 1.4rem; }
  .doubt__a { font-size: .95rem; line-height: 1.9; padding-left: 2.6em; }
  .doubt__a::before { font-size: 1.4rem; }

  .flow__list { gap: 26px; }
  .flow__list > li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px 20px; }
  .flow__list > li + li::before { left: 42px; top: -22px; border-width: 8px; border-top-width: 11px; }
  .flow__num { font-size: 34px; }
  .flow__term { padding: 1px 4px; font-size: .7rem; letter-spacing: 0; }
  .flow__list h3 { margin: 2px 0 4px; font-size: 1.12rem; }
  .flow__list p { font-size: .93rem; line-height: 1.7; }
  .flow__roles { margin-top: 8px; gap: 6px; }
  .flow__roles li { font-size: .9rem; }
  .flow__who { min-width: 4.2em; font-size: .7rem; }
  .flow__need { margin-top: 40px; padding: 26px 20px; gap: 20px; }
  .flow__need h3 { font-size: 1.05rem; gap: 10px; margin-bottom: 14px; }
  .flow__ours { padding-top: 20px; }
  .flow__chips { gap: 6px; }
  .flow__chips li { padding: 3px 10px; font-size: .85rem; }

  .ps__paper { grid-template-columns: 1fr; padding-top: 32px; font-size: 1rem; line-height: 2.05; }
  .ps__paper > p { grid-column: 1; }
  .ps__label { grid-row: auto; font-size: 1.8rem; margin-bottom: 16px; }

  .cta-band__lead { font-size: 26px; margin-bottom: 32px; }
  .cta-band__sub { font-size: .9rem; }
  .btn--big { min-height: 72px; font-size: 1.1rem; padding: 8px 1.4em; }
  .form .btn { padding: 8px 1.4em; }
  .section-cta { margin-top: 48px; }
  .section-cta .btn { width: 100%; padding: 8px 1.4em; }
  /* SP：横並びだと文字が小さくなるため縦積み。電話はメインより一段低くしてサブに見せる */
  .cta-pair { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-pair .btn { width: 100%; }
  .cta-pair .btn--line { min-height: 52px; font-size: 1rem; padding: 0 1em; }

  .contact__grid { gap: 32px; }
  .contact__head .story__h2 { font-size: clamp(25px, 7.2vw, 32px); }
  .form-card--wide { padding: 28px 18px 24px; }
  .form__grid { grid-template-columns: 1fr; }

  .footer { padding: 48px 0 28px; }
  .footer__top { flex-direction: column; gap: 28px; }
  .footer__tagline:nth-of-type(2) { font-size: 1.25rem; }
  .footer__company { grid-template-columns: 1fr; gap: 0; }
  .footer__company dt { margin-top: 10px; }

  .consultation-float {
    left: 0; right: 0; bottom: 0;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    /* FVを過ぎるまでは隠す（main.js で .is-visible を付与） */
    transform: translateY(110%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .consultation-float.is-visible { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
  .sp-cta { display: grid; gap: 8px; }
  .sp-cta .btn { width: 100%; min-height: 54px; padding: 0 1em; font-size: clamp(.88rem, 4vw, 1.02rem); }
  .sp-cta .btn--line { min-height: 44px; font-size: .95rem; }
}

@media (max-width: 767px) and (min-height: 720px) {
  /* 縦に長いスマホは写真の上限を横幅の96%まで広げ、余った高さで説明〜CTAの文字と余白を広げる。
     枠が縦長になる分、写真の拡大（116%）はやめて左右の切り落としを抑える */
  .fv__photo { max-height: 96vw; }
  .fv__img, .fv__vcopy { top: 0; height: 100%; }
  .fv__copy { padding: 16px 16px 22px; }
  .fv__lead { position: relative; padding-top: 14px; font-size: 1.1rem; }
  .fv__lead::before { display: block; width: 24px; }
  .fv__note { margin-top: 8px; font-size: .9rem; line-height: 1.65; }
  .fv__proof { margin-top: 16px; padding-top: 12px; }
  .fv__proof-num { font-size: 2.5rem; }
  .fv__proof-label { margin-top: 6px; font-size: .88rem; }
  .fv__proof-note { margin-top: 4px; font-size: .7rem; line-height: 1.55; }
  .fv__cta { margin-top: 18px; gap: 10px; }
  .fv__cta-main { gap: 8px; }
  .fv__cta-sub { font-size: .8rem; }
  .btn--fv { min-height: 56px; font-size: 1.02rem; }
  .fv__cta .btn--line { min-height: 46px; font-size: .92rem; }
}
@media (max-width: 767px) and (max-height: 620px) {
  /* 背の低いスマホ（iPhone SEの初代など）は電話ボタンをFVから外して1画面に収める。電話相談はFVを過ぎると出る追従CTAに残る */
  .fv__cta .btn--line { display: none; }
  .fv__photo { min-height: 56vw; }
  .btn--fv { font-size: .94rem; letter-spacing: .02em; }
}
/* ==========================================================
   アニメーション
   - FV：読み込み時に CSS だけで順に表示する（JSが動かなくても表示される）
   - スクロール演出：<head> のスクリプトが html に .js-anim を付けたときだけ初期状態を隠し、
     main.js が画面に入った要素へ .is-inview を付けて表示する（初回のみ）。
     JSが動かない・動きを減らす設定のときは .js-anim が付かず、すべて静止表示のまま
   - 動かすのは opacity / transform / clip-path だけ（レイアウトを動かさない）
   ========================================================== */
:root { --ease-out: cubic-bezier(.22, .61, .36, 1); }

/* ---------- FV：メインコピー → 補足コピー → 写真 → 実績 → CTA ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fv__title, .fv__vcopy, .fv__lead, .fv__note, .fv__proof, .fv__cta { animation: anim-up .5s var(--ease-out) both; }
  .fv__img { animation: anim-fade .6s ease-out .25s both; } /* PCの写真は translateY で中央に置いているため opacity だけ */
  .fv__lead { animation-delay: .1s; }
  .fv__note { animation-delay: .2s; }
  .fv__proof { animation-delay: .3s; }
  .fv__cta { animation-delay: .4s; }
  /* フォームの送信完了メッセージ */
  .form__done:not([hidden]) { animation: anim-fade .4s ease-out both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
  /* タブレット・スマホはメインコピーが写真の上（画像内／.fv__vcopy）にあるため、写真を先に出す */
  .fv__img { animation-delay: 0s; }
  .fv__vcopy { animation-delay: .1s; }
  .fv__lead { animation-delay: .2s; }
  .fv__note { animation-delay: .3s; }
  .fv__proof { animation-delay: .4s; }
  .fv__cta { animation-delay: .5s; }
}
@keyframes anim-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes anim-fade { from { opacity: 0; } }

/* ---------- スクロール演出：共通（フェードイン＋上へ10px）。一覧は main.js の ITEMS と揃える ----------
   同時に画面に入った兄弟要素は、main.js が --anim-delay で少しずつ遅らせる */
.js-anim :is(
  .sec-head:not(.contact__head) > *, .story__close, .ask, .letter--aside, .letter--light, .section-cta,
  .asks3 > li, .chain > li, .structure__formula, .share__big, .share__notes, .stepflow > li,
  .reveal__kicker, .reveal__h2, .reveal__intro, .strengths__title, .strengths > li, .reveal__close,
  .convert-steps > li, .story-cases > li, .days .compare__title, .est__result, .est__calc,
  .doubts .compare, .doubt-list > li, .flow__list > li, .flow__need, .ps__paper, .cta-band__main
):not(.is-inview) { opacity: 0; transform: translateY(10px); }
.js-anim .is-inview {
  transition: opacity var(--anim-dur, .45s) var(--ease-out) var(--anim-delay, 0s),
              transform var(--anim-dur, .45s) var(--ease-out) var(--anim-delay, 0s);
}
.stepflow > li { --anim-dur: .35s; } /* 6工程は1枚ずつ短く、矢印（li::before）もカードと一緒に順に出る */

/* ---------- 82.1% vs 33.3%：30分以内 → VS → 12時間超 の順に出し、数値は main.js でカウントアップ ---------- */
.js-anim .versus > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out) var(--anim-delay, 0s), transform .5s var(--ease-out) var(--anim-delay, 0s);
}
.js-anim .versus.is-inview > * { opacity: 1; transform: none; }
.versus__vs { --anim-delay: .1s; }
.versus__card--bad { --anim-delay: .2s; }

/* ---------- 63.4%の帯：左から右へ塗り広げる ---------- */
.js-anim .share__bar, .js-anim .share__sub { clip-path: inset(0 100% 0 0); }
.js-anim .share__bar.is-inview, .js-anim .share__sub.is-inview { clip-path: inset(0); transition: clip-path .8s var(--ease-out) var(--anim-delay, 0s); }
.share__sub { --anim-delay: .3s; }

/* ---------- 仕組みが担う → 通知 → 人が担う → 締めの一文への合流線 ---------- */
.js-anim .roles__col, .js-anim .roles__link {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out) var(--anim-delay, 0s), transform .45s var(--ease-out) var(--anim-delay, 0s);
}
.js-anim .roles__link-arrow { transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease-out) .35s; }
.js-anim .roles::after { opacity: 0; transition: opacity .4s ease-out .75s; }
.roles__link { --anim-delay: .2s; }
.roles__col--people { --anim-delay: .45s; }
.js-anim .roles.is-inview :is(.roles__col, .roles__link) { opacity: 1; transform: none; }
.js-anim .roles.is-inview .roles__link-arrow { transform: none; }
.js-anim .roles.is-inview::after { opacity: 1; }

/* ---------- 試算グラフ：指標ごとに 現状 → 秒速IS運用時 の順に棒を伸ばし、差分を最後に出す ---------- */
.js-anim .est__bar { opacity: 0; transition: opacity .3s ease-out var(--anim-delay); }
.js-anim .est__bar-fill { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease-out) var(--anim-delay); }
.js-anim .est__diff {
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease-out var(--anim-delay), transform .3s var(--ease-out) var(--anim-delay);
}
.est__bar.is-now { --anim-delay: 0s; }
.est__bar.is-is { --anim-delay: .2s; }
.est__diff { --anim-delay: .7s; }
.est__row + .est__row .est__bar.is-now { --anim-delay: .15s; }
.est__row + .est__row .est__bar.is-is { --anim-delay: .35s; }
.est__row + .est__row .est__diff { --anim-delay: .85s; }
.js-anim .est__chart.is-inview .est__bar { opacity: 1; }
.js-anim .est__chart.is-inview .est__bar-fill { transform: none; }
.js-anim .est__chart.is-inview .est__diff { opacity: 1; transform: none; }

/* カウントアップ中は最終値の幅を確保して右揃えにし、後ろの「%」「件」を動かさない（main.js） */
.countup.is-counting { display: inline-block; text-align: right; }

@media (max-width: 767px) {
  .js-anim .roles__link-arrow { transform: scaleY(0); transform-origin: center top; } /* SPは縦の矢印 */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn::after { transition: none; }
}