@charset "UTF-8";
/* ==========================================================================
   株式会社HSP コーポレートサイト
   clients/HSP/corporate/site/2026-renewal/public/assets/css/style.css

   デザイントークンは clients/HSP/corporate/brand/tokens.css をコピーしたもの
   （基準の README が認めている「B) コピペ」方式）。
   ★守るのは3つだけ：ロゴ／メインカラー／使う書体3つ。それ以外は参考値。
   ========================================================================== */

/* ---------- トークン ---------- */
:root {
  /* HSP（会社） */
  --hsp-primary: #12284A;
  --hsp-primary-dark: #0B1A31;

  /* AI Heroes（サービス） */
  --ai-primary: #1A5CE0;
  --ai-primary-dark: #12489C;
  --ai-pale: #EEF2FC;
  --ai-light: #7DA6F5;   /* 濃紺の上に青を置くときだけ使う明るい方の青 */

  /* 共通 */
  /* 本文は真っ黒から少し引く。ベタの黒は紙面が固くなる（白地で約9.7:1、可読性は確保） */
  --ink: #333B47;
  --muted: #5A6474;
  --line: #E4E7EB;
  --soft: #F5F7FA;
  --paper: #FFFFFF;
  --alert: #A74B43;

  /* 書体（この3つ以外は使わない） */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;

  /* 形・余白 */
  --radius: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --gutter: 72px;

  /* 文字サイズ。本文はLTJ実測（15.12px）に合わせて15px（2026-09-17 社長判断で16pxから変更）。
     以前は「本文16px・最小15px」を自分で決めていたが、ウェイトを300に下げたので
     16pxのままだと字面が間延びする */
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: 40px;
  --fs-h1: 56px;
  --fs-hero: 72px;

  /* 行間。本文は広く、大きい明朝は詰める。文字が大きいほど行間は狭くてよい */
  --lh-body: 1.95;
  --lh-heading-lg: 1.32;
  --lh-heading-md: 1.46;
}

/* ---------- ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  /* 明朝の見出しの隣に置くと、ゴシック400は太く見える。本文は300で受ける。
     読み込んでいるのも 300 と 500 の2つだけ（400は使っていない） */
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--hsp-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--hsp-primary-dark); }

.mincho { font-family: var(--font-serif); font-weight: 400; }
.en { font-family: var(--font-en); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- レイアウト ---------- */
.section { padding: 128px var(--gutter); }
.section--soft { background: var(--soft); }
.section--navy { background: var(--hsp-primary); color: #fff; }
.section--blue { background: var(--ai-primary); color: #fff; }
.section--pale { background: var(--ai-pale); }

.sec-label {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: 56px;
}
/* 英字ラベルは小さく・字間を広く。読ませる文字ではなく、位置を示す印なので
   サイズを下げて字間を開けたほうが締まる（本文の最小15pxとは別扱い） */
.sec-label__txt {
  font-family: var(--font-en); font-size: 13px; font-weight: 500;
  letter-spacing: 0.3em; color: var(--muted); white-space: nowrap;
}
.sec-label__rule { flex-grow: 1; height: 1px; background: var(--line); }

/* まとまりの小見出し。「導入の流れ」の区切りと「料金」で共通して使う。
   文字だけだと並びの一項目に見えてしまうため、濃紺のボックスにして一度切る */
.group-label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-2);
  margin-bottom: var(--sp-3); padding: 13px var(--sp-3);
  background: var(--hsp-primary); border-radius: var(--radius);
}
.group-label b { font-weight: 500; font-size: var(--fs-small); letter-spacing: 0.1em; color: #fff; }
.group-label span { font-size: var(--fs-small); color: rgba(255,255,255,.70); }
.section--navy .sec-label__txt,
.section--blue .sec-label__txt { color: rgba(255,255,255,.7); }
.section--navy .sec-label__rule,
.section--blue .sec-label__rule { background: rgba(255,255,255,.22); }

/* 見出し（左）＋本文（右）の2カラム。
   以前は左を 520px 固定・縮小禁止にしていたため、画面幅が 768〜1000px のとき
   右に100px程度しか残らず、本文が1〜2文字ずつ改行されていた。
   両方に「これくらい欲しい」幅を持たせ、足りなければ按分して縮むようにしている。
   1000px より広いときの見え方は以前と同じ（左520px・右が余りを取る）。 */
.split { display: flex; gap: 96px; align-items: flex-start; }
.split__side { flex: 0 1 520px; min-width: 0; }
.split__main { flex: 1 1 400px; min-width: 0; }
/* 右側に段落が複数並ぶとき。p のマージンは全体で0にしてあるので、ここで間隔を戻す */
.split__main > p + p { margin-top: var(--sp-3); }

/* ---------- 見出し ---------- */
.h-hero {
  font-family: var(--font-serif); font-size: var(--fs-hero);
  line-height: var(--lh-heading-lg); letter-spacing: 0.03em;
}
.h-lg {
  font-family: var(--font-serif); font-size: var(--fs-h1);
  line-height: var(--lh-heading-lg); letter-spacing: 0.03em; color: var(--hsp-primary);
}
.h-md {
  font-family: var(--font-serif); font-size: var(--fs-h2);
  line-height: var(--lh-heading-md); letter-spacing: 0.03em; color: var(--hsp-primary);
}
.section--navy .h-lg, .section--navy .h-md,
.section--blue .h-lg, .section--blue .h-md { color: #fff; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-width: 304px; height: 64px; padding: 0 var(--sp-3);
  border-radius: var(--radius); font-size: var(--fs-body); font-weight: 500;
  letter-spacing: 0.04em; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-jp); transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { flex-shrink: 0; }
.btn--navy { background: var(--hsp-primary); color: #fff; }
.btn--navy:hover { background: var(--hsp-primary-dark); color: #fff; }
.btn--blue { background: var(--ai-primary); color: #fff; }
.btn--blue:hover { background: var(--ai-primary-dark); color: #fff; }
.btn--white { background: #fff; color: var(--hsp-primary); }
.btn--white:hover { background: var(--soft); color: var(--hsp-primary); }
.btn--white-blue { background: #fff; color: var(--ai-primary); }
.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--outline-blue { border-color: var(--ai-primary); color: var(--ai-primary); }
/* ボタンを2つ並べるとき。縦に積んで幅を揃える。
   横並びだと文字数の差がそのまま幅の差になり、2つの重さが違って見える。
   縦積みなら、幅は長いほうに合わせて自動でそろう（align-items が既定の stretch のため）。 */
.btn-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }

/* ---------- ヘッダー ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 var(--gutter); background: var(--hsp-primary);
}
.site-header--onhero { position: relative; z-index: 2; background: transparent; height: 96px; }
.brand { display: flex; align-items: baseline; gap: var(--sp-2); }
.brand__mark { font-family: var(--font-serif); font-size: 22px; letter-spacing: 0.16em; color: #fff; }
.brand__en { font-family: var(--font-en); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.22em; color: rgba(255,255,255,.62); }
.gnav ul { display: flex; align-items: center; gap: var(--sp-4); }
.gnav a {
  font-family: var(--font-en); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: 0.12em; color: rgba(255,255,255,.86);
}
.gnav a:hover { color: #fff; }
.nav-toggle { display: none; }

/* ---------- ファーストビュー（トップ） ---------- */
.hero { position: relative; min-height: 880px; background: var(--hsp-primary-dark); overflow: hidden; display: flex; flex-direction: column; }
.hero__canvas { position: absolute; inset: 0; display: block; }
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  /* 中心を人物の位置（右寄り）に合わせる。ここを左に置くと、人物が暗い側に入って粒が沈む。
     外周の濃さ（最後の値）も粒の明るさに直接効く。上げすぎると人物の右半分が沈む */
  background: radial-gradient(120% 92% at 78% 46%, rgba(11,26,49,0) 0%, rgba(11,26,49,.20) 66%, rgba(11,26,49,.60) 100%);
}
/* 見出しの上にラベルを置くので縦並び */
.hero__body {
  position: relative; z-index: 1; flex-grow: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 var(--gutter); pointer-events: none;
}
.hero__body .eyebrow { margin-bottom: var(--sp-3); }
.hero__title { color: #fff; }
.hero__foot {
  position: relative; z-index: 1; display: flex; justify-content: center;
  padding: 0 var(--gutter) 48px; pointer-events: none;
}

/* 英字ラベル。読ませる文字ではなく飾りなので、小さく・細く・字間を広く */
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow__rule { width: 24px; height: 1px; background: var(--ai-primary); }
.eyebrow__txt { font-family: var(--font-en); font-size: 10px; font-weight: 400; letter-spacing: 0.34em; color: rgba(255,255,255,.72); }

/* スクロール誘導。縦長の枠の中を点が落ちる */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scroll-cue__mouse {
  position: relative; display: block; width: 24px; height: 38px;
  border: 1px solid rgba(255,255,255,.42); border-radius: 12px;
}
.scroll-cue__mouse i {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: rgba(255,255,255,.9);
  animation: scroll-dot 1.9s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  68%  { transform: translateY(16px); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}
.scroll-cue__txt { font-family: var(--font-en); font-size: 10px; letter-spacing: 0.3em; color: rgba(255,255,255,.45); }
/* 親が pointer-events:none なので、押せるようにリンクだけ戻す */
.hero__body a, .hero__foot a { pointer-events: auto; }

/* ---------- ページ見出し（下層） ----------
   ヘッダーと地続きの濃紺の帯。下層に入っても同じ会社の中にいると分かるようにしている。
   AIサービス紹介だけ、右上から青い光を差し込ませて色を変える（.page-head--ai）。 */
.page-head {
  position: relative; overflow: hidden;
  padding: 128px var(--gutter) 104px;
  /* ヘッダーと同じ濃紺。境目に段差が出ないよう、あえて同じ値にしている */
  background: var(--hsp-primary);
  color: #fff;
}
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(86% 128% at 82% 0%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 58%);
}
.page-head--ai::before {
  background: radial-gradient(86% 128% at 82% 0%, rgba(26,92,224,.46) 0%, rgba(26,92,224,0) 62%);
}
.page-head > * { position: relative; z-index: 1; }
.page-head .eyebrow__rule { background: rgba(255,255,255,.45); }
.page-head .eyebrow__txt { color: rgba(255,255,255,.72); }
.page-head--ai .eyebrow__rule { background: var(--ai-light); }
.page-head--ai .eyebrow__txt { color: var(--ai-light); }
.page-head__title { margin: 32px 0 0; color: #fff; }
.page-head p { color: rgba(255,255,255,.80); }

/* ---------- 問いと答え（トップ） ----------
   以前は「問い」と「答え」が別セクションに分かれ、高さを 720px 固定して中央寄せしていた。
   中身が3行しかないため、あいだに330pxほどの何も無い余白ができ、2つが別々の話に見えていた。
   1セクションにまとめ、高さの固定をやめ、あいだを縦の細い線でつないである。 */
.ask { padding: 144px var(--gutter) 144px; }
.ask__q { margin: 0; }
.ask__body { max-width: 720px; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
/* 次のセクションへの受け渡しの1行。ここだけ本文より一段上げる */
.ask__pivot { margin-top: var(--sp-3); font-size: var(--fs-h3); letter-spacing: 0.03em; color: var(--hsp-primary); }
/* 問いから答えへ下りる線。トップのSCROLLの線と同じ引き方にしている */
.ask__thread {
  display: block; width: 1px; height: 96px; margin: var(--sp-4) 0;
  background: linear-gradient(180deg, var(--hsp-primary) 0%, rgba(18,40,74,.12) 100%);
}

/* ---------- 行組みの表 ---------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: 32px 0; border-top: 1px solid var(--line);
}
/* 1行目の上の線は引かない。見出しラベルの罫線とすぐ近くで二重になるため */
.rows > .row:first-child { border-top: 0; padding-top: 0; }
.rows .row:last-child { border-bottom: 1px solid var(--line); }
.row--baseline { align-items: baseline; }
.row__num { width: 64px; flex-shrink: 0; font-family: var(--font-en); font-size: var(--fs-h3); letter-spacing: 0.04em; color: var(--hsp-primary); }
.row__num--blue { color: var(--ai-primary); }
.row__label { width: 280px; flex-shrink: 0; font-size: var(--fs-body); font-weight: 500; color: var(--muted); }
/* 見出し語は明朝。ゴシックで残すのは本文と、表の小さいラベル（15px）だけ */
.row__key { width: 280px; flex-shrink: 0; font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 400; letter-spacing: 0.03em; color: var(--hsp-primary); }
.row__main { flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
/* 文になっている見出しは明朝。単語のラベル（row__label / row__key）はゴシックのまま */
.row__title {
  font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400;
  line-height: var(--lh-heading-md); letter-spacing: 0.03em; color: var(--hsp-primary);
}

/* 濃紺・青の地に表組みを置くとき。罫線と文字を地に合わせて反転する */
.section--navy .row, .section--blue .row,
.section--navy .rows .row:last-child, .section--blue .rows .row:last-child { border-color: rgba(255,255,255,.18); }
.section--navy .row__title, .section--blue .row__title,
.section--navy .row__num, .section--blue .row__num,
.section--navy .row__key, .section--blue .row__key { color: #fff; }
.section--navy .row__label, .section--blue .row__label { color: rgba(255,255,255,.62); }
.section--navy .row__main p, .section--blue .row__main p { color: rgba(255,255,255,.72); }
/* 濃紺・青の地では本文を真っ白にしない。白ベタは見出しと同じ強さになって階層が消える */
.section--navy p, .section--blue p { color: rgba(255,255,255,.78); }

/* ---------- 事業（トップ） ---------- */
/* 下に別の行を並べていたときの間隔（104px）は、その行を消したので付けない */
.biz-main { display: flex; gap: 96px; align-items: flex-start; }
.biz-main__title { width: 400px; flex-shrink: 0; }
.biz-main__body { flex-grow: 1; display: flex; flex-direction: column; gap: 32px; padding-top: var(--sp-1); }
.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-body); font-weight: 500; color: var(--ai-primary); }
.link-arrow:hover { color: var(--ai-primary-dark); }

/* ---------- 写真 ---------- */
.photo { display: block; width: 100%; height: 616px; object-fit: cover; filter: grayscale(1) contrast(1.04) brightness(.98); }

/* ---------- 私たちについて（トップ冒頭） ---------- */
/* レイアウトは他の長文セクションと同じ .split（見出し左・本文右）を使っている。
   写真を横に置く形も試したが、本文が長く、写真の下に470pxの空白が残ったのでやめた。
   写真はセクション直後の全幅の帯（.photo） */
/* 「新しい事業を考えること。〜」の4つは、明朝＋罫線で目立たせる形も試したが不採用。
   地の文のまま流す（2026-09-17 社長判断）。専用のclassは持たせていない */
/* ABOUTの本文は9段落あり、24pxの段落間だけで192px使っていた。
   文字を1字も削らずに高さを詰めるため、ここだけ14pxにしている。
   これ以上詰めると、段落の切れ目が行間（約29px）に埋もれて読めなくなる */
.about__text > p + p { margin-top: 14px; }

/* ---------- 料金 ---------- */
/* 一度だけの費用と、毎月の費用を別のまとまりにする。
   同じ表に混ぜると、385,000円と4,980円が同じ種類の金額に見える */
.price__group { margin-bottom: var(--sp-5); }
.price__addon { margin-top: var(--sp-3); }
.price .row { align-items: baseline; padding: var(--sp-3) 0; }
.price__name { width: 280px; flex-shrink: 0; font-size: var(--fs-body); color: var(--hsp-primary); }
.price__name--lead { font-weight: 500; }
.price__amount { width: 240px; flex-shrink: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--hsp-primary); }
.price__amount--lead { font-size: 32px; color: var(--ai-primary); }
.price__note { flex-grow: 1; color: var(--muted); }
.price .row--pick { background: var(--ai-pale); }
.price .row--pick .price__name { font-weight: 500; color: var(--ai-primary); padding-left: var(--sp-2); }
.price .row--pick .price__amount { font-size: 32px; color: var(--ai-primary); }
.price .row--pick .price__note { color: var(--ink); padding-right: var(--sp-2); }

/* ---------- 注記 ---------- */
.note { font-size: var(--fs-small); line-height: var(--lh-body); letter-spacing: 0.03em; color: var(--muted); }
.note--mt { margin-top: var(--sp-4); }

/* ---------- フロー ---------- */
/* ---------- 導入の流れ（縦のタイムライン） ----------
   以前は「A → B → C …」と10個を1行に並べていたが、矢印でつないだだけで
   どこまでが無料か・どこで承認が要るかが読み取れなかったため、縦に組み直した。
   --rail は背骨から本文までの距離。スマホで詰めるのでここを1か所で持つ。 */
.tl {
  --rail: 40px;
  position: relative; list-style: none;
  margin: 0 0 var(--sp-5); padding: 0 0 0 var(--rail);
}
.tl li { position: relative; }

/* 区切り（ご契約前／ご契約後／納品後）。見た目は .group-label と共通。
   背骨の分だけ左へはみ出させ、帯として工程の並びを断ち切る */
.tl__phase { margin: var(--sp-4) 0 var(--sp-3) calc(-1 * var(--rail)); }
.tl__phase:first-child { margin-top: 0; }

/* 各工程 */
.tl__step { display: flex; align-items: baseline; gap: var(--sp-4); padding: 14px 0; }
.tl__step::before {
  content: ""; position: absolute; left: calc(-1 * var(--rail) - 1px); top: 21px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
/* 背骨は工程ごとに引く。自分の点から次の点までちょうど届く高さ（＝自分の高さ）にしてあるので、
   工程を足しても消しても線がずれない。最後の点で止める */
.tl__step::after {
  content: ""; position: absolute; left: calc(-1 * var(--rail) + 5px); top: 33px;
  width: 1px; height: calc(100% - 12px); background: var(--line);
}
.tl li:last-child::after { display: none; }
/* 御社に確認・判断していただく場面は、塗りつぶした青の点にする */
.tl__step--key::before { background: var(--ai-primary); border-color: var(--ai-primary); }
.tl__name { width: 280px; flex-shrink: 0; font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 400; letter-spacing: 0.03em; color: var(--hsp-primary); }
.tl__step--key .tl__name { color: var(--ai-primary); }
.tl__note { flex-grow: 1; font-size: var(--fs-small); color: var(--muted); }

/* ---------- FAQ ---------- */
.faq .row { align-items: flex-start; }
/* 質問も文なので明朝（.row__title と同じ扱い） */
.faq__q {
  width: 440px; flex-shrink: 0; font-family: var(--font-serif); font-size: var(--fs-h4);
  font-weight: 400; line-height: var(--lh-heading-md); letter-spacing: 0.03em; color: var(--hsp-primary);
}
.faq__a { flex-grow: 1; }

/* ---------- 代表メッセージ ---------- */
.message__body { display: flex; flex-direction: column; gap: 28px; padding-top: var(--sp-1); }
/* 署名は明朝。手書き書体は使わない（ブランド基準で使える書体が3つに限られているため） */
.message__sign {
  margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h4);
  letter-spacing: 0.06em; color: var(--hsp-primary);
}

/* ---------- フォーム ---------- */
.form { width: 720px; flex-shrink: 0; }
.field { margin-bottom: 32px; }
.field__label { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); font-weight: 500; color: var(--hsp-primary); margin-bottom: 12px; }
.badge-req { font-size: var(--fs-small); font-weight: 500; color: var(--alert); }
.badge-opt { font-size: var(--fs-small); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; padding: 0 var(--sp-2); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  /* 入力欄だけ16px。iPhoneは16px未満の入力欄をタップすると画面を勝手に拡大する */
  font-family: var(--font-jp); font-size: 16px; letter-spacing: 0.04em; color: var(--ink);
}
.input, .select { height: 56px; }
.textarea { height: 184px; padding: var(--sp-2); line-height: var(--lh-body); resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--hsp-primary); outline-offset: -2px; }
.input::placeholder, .textarea::placeholder { color: #9AA3AF; }
.field-pair { display: flex; gap: var(--sp-3); }
.field-pair .field { flex-grow: 1; }
.consent {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--sp-3); background: var(--soft); border-radius: var(--radius); margin-bottom: 32px;
}
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--hsp-primary); }
.privacy-box { flex-grow: 1; padding: 32px; background: var(--soft); border-radius: var(--radius); }
.privacy-box dl { margin: 0; display: flex; flex-direction: column; }
.privacy-box div { padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.privacy-box div:last-child { border-bottom: 1px solid var(--line); }
.privacy-box dt { font-size: var(--fs-small); font-weight: 500; color: var(--muted); margin-bottom: var(--sp-1); }
.privacy-box dd { margin: 0; }

/* ---------- プライバシーポリシー ---------- */
.article { display: flex; gap: var(--sp-5); align-items: flex-start; padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.article:last-of-type { border-bottom: 1px solid var(--line); }
.article__num { width: 64px; flex-shrink: 0; font-family: var(--font-en); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.16em; color: var(--muted); padding-top: 4px; }
.article__title { width: 320px; flex-shrink: 0; font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 400; letter-spacing: 0.03em; line-height: var(--lh-heading-md); color: var(--hsp-primary); }
.article__body { flex-grow: 1; }
.article__body li { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.article__body li::before { content: ""; width: 4px; height: 4px; flex-shrink: 0; background: var(--muted); border-radius: 50%; margin-top: 11px; }
.contact-card { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--soft); border-radius: var(--radius); }
.contact-card div { display: flex; gap: var(--sp-3); padding: var(--sp-1) 0; }
.contact-card dt { width: 120px; flex-shrink: 0; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.contact-card dd { margin: 0; }

/* ---------- CTA ---------- */
.cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 96px; }
.cta__lead { max-width: 560px; color: rgba(255,255,255,.85); }

/* ---------- フッター ---------- */
.site-footer { padding: var(--sp-5) var(--gutter) var(--sp-4); background: var(--hsp-primary-dark); color: rgba(255,255,255,.68); }
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.16); }
.site-footer__info { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer address { font-style: normal; font-size: var(--fs-small); line-height: var(--lh-body); }
.fnav { display: flex; gap: var(--sp-5); }
.fnav ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.fnav a { font-family: var(--font-en); font-size: var(--fs-small); letter-spacing: 0.12em; color: rgba(255,255,255,.82); }
.fnav a:hover { color: #fff; }
.copyright { display: block; padding-top: var(--sp-3); font-family: var(--font-en); font-size: var(--fs-small); letter-spacing: 0.12em; color: rgba(255,255,255,.45); }

/* ==========================================================================
   小さめのPC・タブレット横（1079px以下）
   左520px＋右400px＋間96px＝1016px。これに左右の余白144pxを足すと1160px必要になる。
   足りない幅で2カラムを維持すると、右の本文が1行10文字台になって読めない。
   この幅からは素直に縦に積む
   ========================================================================== */
@media (max-width: 1079px) {
  .split, .biz-main, .cta__inner { flex-direction: column; gap: var(--sp-4); align-items: stretch; }
  .split__side, .split__main { flex: 0 0 auto; width: 100%; }
  .biz-main__title { width: 100%; }

  /* 縦積みでは写真を下に回す。テキストが先に読まれる順のほうが自然 */

  /* 料金の行だけ3カラム（名前・金額・説明）なので、他より早く苦しくなる。
     名前と金額は1行に残し、説明だけ下の行へ送る */
  .price .row { flex-wrap: wrap; row-gap: var(--sp-1); }
  .price__name { width: 200px; }
  .price__amount { width: auto; }
  /* 名前(200px)＋間(40px)ぶん下げて、金額の真下に揃える。左端に置くと別の項目に見える */
  .price__note { flex: 1 0 100%; padding-left: 240px; }
}

/* ==========================================================================
   スマホ（767px以下）
   文字サイズの下限は15px。本文は16pxのまま下げない
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    /* 画面幅375pxの本文領域は327px。見出しが1行に収まる上限から逆算した値
       （文字サイズ×字間0.03em×文字数 ≦ 327px）。ここを上げると単語の途中で割れる */
    --fs-h1: 26px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-hero: 32px;
  }

  .section { padding: 80px var(--gutter); }
  .sec-label { padding-bottom: 32px; gap: var(--sp-2); }
  .split, .biz-main, .cta__inner { flex-direction: column; gap: var(--sp-3); }
  /* 縦積みになるので、flex-basis は解除する（縦積みだと basis が「高さ」として効いてしまう） */
  .split__side, .split__main { flex: 0 0 auto; }
  .split__side, .biz-main__title, .form { width: 100%; }

  /* ヘッダー */
  .site-header { height: 64px; }
  .site-header--onhero { height: 64px; }
  .gnav { display: none; }
  .gnav.is-open {
    display: block; position: absolute; top: 64px; left: 0; right: 0; z-index: 10;
    background: var(--hsp-primary); padding: var(--sp-2) var(--gutter) var(--sp-3);
  }
  .gnav.is-open ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .gnav.is-open a { display: flex; align-items: center; height: 48px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: -12px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }

  /* ファーストビュー。人物を下げるぶん、高さを足して全体を下へずらす */
  .hero { min-height: 760px; }
  /* 人物は高さの13%〜55%に立つ。そこは透明のままにして粒を沈ませない。
     暗くするのは見出しが乗る下半分だけ */
  .hero__veil {
    background: linear-gradient(180deg,
      rgba(11,26,49,.32) 0%, rgba(11,26,49,0) 12%,
      rgba(11,26,49,0) 54%, rgba(11,26,49,.60) 76%, rgba(11,26,49,.80) 100%);
  }
  /* 縦並びなので、下寄せは justify-content 側で指定する */
  .hero__body { flex-grow: 1; justify-content: flex-end; align-items: flex-start; padding-bottom: var(--sp-4); }
  .hero__foot { padding-bottom: var(--sp-3); }

  /* まとまりの小見出し */
  .group-label { padding: 12px var(--sp-2); }

  /* 導入の流れ */
  .tl { --rail: 28px; }
  .tl__step { flex-direction: column; gap: 4px; padding: 12px 0; }
  .tl__name { width: 100%; font-size: var(--fs-body); }
  .tl__step::before { top: 17px; }
  .tl__step::after { top: 29px; }

  /* ページ見出し（下層） */
  .page-head { padding: 72px var(--gutter) 64px; }
  .page-head__title { margin-top: var(--sp-3); }

  .ask { padding: 80px var(--gutter); }
  .ask__body { margin-top: var(--sp-3); }
  .ask__pivot { font-size: var(--fs-h4); }
  .ask__thread { height: 56px; margin: var(--sp-3) 0; }

  /* 行組み：縦積みに */
  .row { flex-direction: column; gap: 12px; padding: var(--sp-3) 0; }
  .row__num, .row__label, .row__key, .faq__q, .price__name, .price__amount { width: 100%; }
  .price .row--pick { padding: var(--sp-3) var(--sp-2); }
  .price .row--pick .price__name { padding-left: 0; }
  /* 1079px以下で入れた金額そろえのインデントは、縦積みになるここでは外す */
  .price__note { padding-left: 0; }

  /* 記事 */
  .article { flex-direction: column; gap: var(--sp-2); }
  .article__num, .article__title { width: 100%; }
  .contact-card div { flex-direction: column; gap: 4px; }
  .contact-card dt { width: 100%; }

  /* フォーム */
  .field-pair { flex-direction: column; gap: 0; }
  .btn { width: 100%; min-width: 0; }

  /* 写真 */
  .photo { height: 280px; }

  /* フッター */
  .site-footer__top { flex-direction: column; gap: var(--sp-3); }
  .fnav { gap: var(--sp-4); }
  /* 指で押せるように1項目44px。この高さ自体が間隔になるので、項目間の隙間は入れない
     （PCの16pxをそのまま残すと、44+16=60px空いて間延びする） */
  .fnav a { height: 44px; display: flex; align-items: center; }
  .fnav ul { gap: 0; }
}

/* 動きを減らす設定の人には粒子を止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 点の落下も止める（粒子と同じ扱い） */
  .scroll-cue__mouse i { animation: none; opacity: 1; }
}