/* ============================================================
   しずおかAIXエージェント  —  MODERN / インパクト版
   Vision-first hero. Impact from scale + motion + monochrome
   restraint (not from color). Light ground, never black.
   Reference tone: posimedi.jp. Shares refined base + markup.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap");
@import url("styles-refined.css");

:root {
  --m-ground: #f1f2f4;                 /* light, barely-cool neutral */
  --m-ghost: #e6e8ec;                  /* giant kinetic bg text */
  --m-grad: linear-gradient(105deg, #2b6bff 0%, #6c5cf6 55%, #9a54e8 100%);
}

/* セクション番号 01/02… はプレゼンのスライド番号のように見え、
   本当の順序情報ではないので modern では非表示にする。
   （FDE/導入フローの連番は実プロセスの順序なので残す） */
.sec-no { display: none; }

/* ============================================================ HERO */
.mhero {
  position: relative;
  overflow: hidden;
  background: var(--m-ground);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;                   /* clear the fixed header */
  isolation: isolate;
}

/* --- kinetic background typography --- */
.mhero-kin {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 0.04em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.mhero-row {
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 13vw;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--m-ghost);
  will-change: transform;
}
.mhero-row.r1 { animation: m-marq-l 46s linear infinite; }
.mhero-row.r2 { animation: m-marq-r 58s linear infinite; }
@keyframes m-marq-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes m-marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --- foreground copy --- */
.mhero-inner { position: relative; z-index: 2; padding-block: clamp(56px, 8vw, 104px); }

.mhero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 26px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-2);
}
.mhero-eyebrow .bar { width: 26px; height: 2px; border-radius: 2px; background: var(--m-grad); }

.mhero-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 26px;
  text-wrap: balance;
}
.mhero-title .grad {
  background: var(--m-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.mhero-lead {
  margin: 0 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-weight: 900; line-height: 1.24; letter-spacing: -0.01em;
  color: var(--ink);
  word-break: keep-all;               /* 句の途中で折り返さない */
}

.mhero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* CTAの横に置く安心コピー（ボタン1つの余白バランス＋CV後押し） */
.mhero-assure {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 24ch; word-break: keep-all;   /* 句点で自然に折り返し */
  font-size: 0.9rem; font-weight: 500; line-height: 1.5;
  color: var(--sub);
}
.mhero-assure svg { width: 16px; height: 16px; flex: none; color: var(--blue); }

/* --- scroll cue --- */
.mhero-scroll {
  position: absolute; right: clamp(14px, 2.4vw, 40px); bottom: 40px; z-index: 3;
  writing-mode: vertical-rl;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--faint);
  display: flex; align-items: center; gap: 14px;
}
.mhero-scroll .ln {
  width: 1px; height: 56px;
  background: linear-gradient(var(--faint), transparent);
  transform-origin: top;
  animation: m-cue 1.9s ease-in-out infinite;
}
@keyframes m-cue { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* --- load-in --- */
.m-rise { opacity: 0; transform: translateY(16px); animation: m-rise 0.8s var(--ease) forwards; }
.m-d1 { animation-delay: 0.08s; }
.m-d2 { animation-delay: 0.18s; }
.m-d3 { animation-delay: 0.30s; }
@keyframes m-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mhero-row { animation: none; transform: translateX(-25%); }
  .m-rise { animation: none; opacity: 1; transform: none; }
  .mhero-scroll .ln { animation: none; }
}

/* --- responsive --- */
@media (max-width: 820px) {
  .mhero { min-height: auto; padding-top: 108px; padding-bottom: 40px; }
  .mhero-row { font-size: 24vw; }
  .mhero-title { font-size: min(13vw, 4.2rem); white-space: nowrap; }
  .mhero-lead { max-width: none; }
  .mhero-actions { align-items: flex-start; flex-direction: column; }
  .mhero-assure { width: 100%; max-width: 100%; min-width: 0; }
  .mhero-assure > span { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
  .mhero-scroll { display: none; }
  .sticky-cta { display: none; }
  .sticky-cta.is-visible { display: block; }
}

/* ============================================================
   全セクションのトーン統一（refinedベースを modern に寄せる）
   refined はトークン駆動なので、トークン上書きで一括して色を寄せる。
   方針: オレンジ差し色を廃止し青1色に集約／地色を hero(#f1f2f4) に合わせる／
   装飾イリデッセント画像をモノクロ化して派手さを抜く。
   ============================================================ */
:root {
  --blue: #2b6bff;          /* hero のグラデ始点に合わせる */
  --blue-soft: #eaf1fc;
  --orange: #2b6bff;        /* オレンジ廃止 → 青に統合（モノクロ+1アクセント） */
  --orange-soft: #eaf1fc;
  --paper-2: #f1f2f4;       /* 薄いセクション地を hero と同色に */
  --paper-3: #e9ebef;
}

/* 装飾ストック画像＆ゴースト英字パネルは撤去（"これは？"回避）。
   実コンテンツ（数値・提供内容）が入るまで該当セクションは単カラムで見せる。 */
/* 注: refined の元セレクタは詳細度の高い `.s-problem .problem-top` なので、
   同じ詳細度で当てないと打ち消せない（`.problem-top` だけでは負ける）。 */
.s-problem .problem-top,
.answer-grid,
.fde-head-grid,
.flow-head-grid,
.reasons-grid { grid-template-columns: 1fr; }
.problem-visual,
.answer-visual,
.fde-visual,
.flow-visual,
.reasons-visual { display: none; }

/* 信頼カードの写真はモノクロで統一 */
.trust-card img { filter: grayscale(1) contrast(1.02); }

/* 和文の不自然な折り返しを抑制。
   ※ keep-all は「幅の広い見出し／リード」だけに適用する。
   狭いカード本文に効かせると句読点が行頭・行末に孤立するため、
   カード本文は既定の禁則処理に任せる。 */
/* 和文の不自然な改行対策：文節（フレーズ）境界で折り返す。
   keep-all は狭いカードで単字が孤立（例：開発して終わりにな／る）するため不可。
   auto-phrase は日本語を自然な区切りで改行する（Chrome/Edge 等 Chromium系）。
   非対応ブラウザでは既定に劣化するだけで後退はない（progressive enhancement）。 */
/* auto-phrase は「見出し・短ラベル」だけに限定する。
   本文段落に効かせると各行が文節末で終わり、モバイルで右余白が大きくなる
   （行を埋めない）。本文は既定の折り返しで幅いっぱいに流す。 */
h1, h2, h3, h4,
.h-sec, .offer-title,
.card h3, .fde-step h4, .flow-item h4,
.reason-item h4, .scene-card h3, .trust-card h3,
.answer-emph, .compare-emph, .faq-q,
.eyebrow, .hero-kicker {
  word-break: auto-phrase;
}

/* 「選ばれる理由」の先頭を強調ブロック化（手離れ／ベンダーロック皆無）。
   埋もれやすい強い差別化を、目立つカードとして最上部に。 */
.reason-item--feature {
  border-bottom: 0 !important;
  border: 1px solid #dbe4f5; border-radius: var(--radius-lg);
  background: radial-gradient(130% 160% at 100% 0%, #eef2fe 0%, rgba(255,255,255,0) 55%), #fff;
  box-shadow: 0 22px 55px -32px rgba(43,86,214,0.40);
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
  margin-bottom: 22px; position: relative; overflow: hidden;
}
.reason-item--feature::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--m-grad);
}
.reason-item--feature .ic.chip { background: var(--m-grad) !important; color: #fff !important; }
.reason-item--feature .feature-tag {
  display: inline-block; margin-bottom: 8px;
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: transparent; background: var(--m-grad); -webkit-background-clip: text; background-clip: text;
}
.reason-item--feature h4 { font-size: clamp(18px, 2vw, 22px); }
.reason-item--feature:hover { padding-left: clamp(22px, 2.8vw, 34px); }

/* FDE「スモールスタート」オファー枠。撤去した装飾枠の跡地に実データを、
   インパクト強めに（グラデ左バー＋区切り線＋特大数値＋金額はブランドグラデ）。 */
.offer-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 3.4vw, 42px) clamp(28px, 4vw, 52px);
  border: 1px solid #dbe4f5; border-radius: var(--radius-lg);
  background: radial-gradient(130% 150% at 100% 0%, #eef2fe 0%, rgba(255,255,255,0) 55%), #fff;
  box-shadow: 0 22px 55px -30px rgba(43,86,214,0.40);
  position: relative; overflow: hidden;
}
.offer-band::before {   /* グラデの左アクセントバー */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--m-grad);
}
.offer-tag {
  display: inline-flex; align-items: center; margin-bottom: 14px;
  font-family: "Outfit", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em;
  color: #fff; background: var(--m-grad); padding: 6px 13px; border-radius: 999px;
}
.offer-title { margin: 0; font-size: clamp(17px, 1.9vw, 22px); font-weight: 800; color: var(--ink); line-height: 1.55; word-break: keep-all; }
.offer-title b { color: var(--blue); font-weight: 800; }
.offer-metrics { display: flex; align-items: stretch; }
.offer-metric { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; padding: 2px clamp(16px, 2.2vw, 30px); }
.offer-metric:first-child { padding-left: 0; }
.offer-metric:last-child { padding-right: 0; }
.offer-metric + .offer-metric { border-left: 1px solid var(--line); }
.offer-metric .v { font-family: "Outfit", sans-serif; font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 0.95; color: var(--ink); }
.offer-metric .v small { font-size: 0.42em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.offer-metric .k { font-size: 12.5px; color: var(--sub); font-weight: 600; }
.offer-metric:last-child .v {   /* 金額はブランドグラデで最大の見せ場に */
  background: var(--m-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (max-width: 720px) {
  .offer-band { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 22px; }
  .offer-metrics { width: 100%; justify-content: space-between; }
  .offer-metric { padding: 0 8px; }
  .offer-metric:first-child { padding-left: 0; }
  .offer-metric:last-child { padding-right: 0; }
  .offer-metric .v { font-size: clamp(24px, 8vw, 40px); }
}

/* --- ダーク帯を light に統一（黒背景にしない方針の徹底） --- */
/* ミドルCTA: 濃紺帯 → 淡いブルーの強調バンド */
.s-cta-mid { background: var(--blue-soft); color: var(--ink); }
.s-cta-mid::before { display: none; }
.s-cta-mid .h-sec { color: var(--ink); }
.s-cta-mid .lead { color: var(--sub); }
.s-cta-mid .mini { color: var(--faint); }
.s-cta-mid .btn--on-dark { background: var(--ink); color: #fff; }
.s-cta-mid .btn--on-dark:hover { background: var(--blue); }

/* 問い合わせ: 濃紺背景 → light（フォームは白カードのまま） */
.s-contact { background: var(--paper-2); color: var(--ink); }
/* keep-all を効かせたリードで min-content が膨らみ、フォーム列が
   細く潰れる grid blow-out を修正（grid子に min-width:0） */
.contact-grid > * { min-width: 0; }

/* ============================================================
   "AI感"を抜く調整（線を減らす・角を立てる・数字に個性・塗り箱を弱める）
   ============================================================ */
/* 角丸をほぼ0に（rounded 多用は生成AIデザインの典型） */
:root { --radius-sm: 2px; --radius: 2px; --radius-lg: 2px; --radius-xl: 2px; }

/* 線を減らす①：カードの1px罫線グリッド → 余白で分ける */
.grid { background: transparent; border: 0; border-radius: 0; overflow: visible;
        gap: clamp(10px, 2vw, 20px) clamp(28px, 4vw, 60px); }
.card { padding: clamp(4px, 0.8vw, 10px) 0; }
.card:hover { background: transparent; }

/* 線を減らす②：オファー枠・強調ブロックの枠と影を外す（箱感を消す） */
.offer-band { border: 0; box-shadow: none;
  background: linear-gradient(90deg, #eef2fb 0%, rgba(238,242,251,0) 62%); }
.offer-band::before { width: 3px; }
.reason-item--feature { border: 0; box-shadow: none; background: transparent; padding: 22px 0 22px 20px; }
.reason-item { border-bottom: 0; padding-block: 14px; }
.reason-list { border-top: 0; gap: clamp(14px, 2vw, 22px); }

/* 装飾アイコン(絵文字的な塗りチップ)を全撤去。ボタンのアイコンも外し文字だけに。 */
.card .chip, .scene-card .chip,
.reason-item .ic.chip, .reason-item--feature .ic.chip { display: none; }
.btn .icon { display: none; }

/* カードの白ブロックをやめ、内容を地に直接置く（箱感を消す） */
.card { background: transparent; }

/* できること／活用シーン：editorial な"インデックス"項目に
   （意味のある細い罫線1本＋Fraunces通し番号＋強い見出し。アイコン無し） */
.s-services .grid, .s-scenes .grid { counter-reset: idx; }
.s-services .card, .s-scenes .scene-card {
  counter-increment: idx; overflow: visible;
  border-top: 1px solid rgba(15,19,32,0.20); border-radius: 0;
  background: transparent; padding: 24px 0 6px;
}
.s-services .card::before, .s-scenes .scene-card::before {
  content: counter(idx, decimal-leading-zero);
  display: block; margin-bottom: 16px;
  font-family: "Fraunces", serif; font-weight: 600; font-size: 15px; color: var(--blue);
}
.s-services .card h3, .s-scenes .scene-card h3 {
  font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; margin: 0 0 10px; line-height: 1.5;
}
.scene-card .scene-top { display: block; padding: 0; }
.scene-card .scene-body { padding: 0; }

/* 選ばれる理由も editorial インデックスに揃える（通し番号＋罫線1本＋見出し） */
.reason-list { counter-reset: rn; border-top: 0; display: block; }
.reason-item { display: block; counter-increment: rn; gap: 0;
  border-top: 1px solid rgba(15,19,32,0.20); border-bottom: 0; padding: 22px 0 6px; transition: none; }
.reason-item:hover { padding-left: 0; }
.reason-item::before { content: counter(rn, decimal-leading-zero); display: block;
  margin-bottom: 14px; font-family: "Fraunces", serif; font-weight: 600; font-size: 15px; color: var(--blue); }
.reason-item h4 { font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; margin: 0 0 8px; line-height: 1.5; }

/* 強調タグの角も立てる */
.offer-tag { border-radius: 2px; }

/* 信頼セクション：写真カード → 見出しブロックに（写真・箱・▶を撤去、editorialに）。
   2枚は縦積みにして、見出しは他セクション（h-sec）と同じ大きさに。 */
.s-trust .trust-grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 72px); }
.trust-card { min-height: 0; display: block; background: transparent;
  border: 0; box-shadow: none; border-radius: 0; isolation: auto;
  border-top: 1px solid rgba(15,19,32,0.20); padding-top: 26px; }
.trust-card img, .trust-card::after { display: none; }
.trust-card .trust-copy { padding: 0; }
.trust-card .eyebrow .tri { display: none; }
.trust-card h3 { font-size: clamp(27px, 3.7vw, 46px); font-weight: 900; line-height: 1.42; margin-bottom: 16px; }

/* 数字だけ個性書体に（Outfit汎用 → Fraunces：editorialなセリフ）。
   ※ヒーローの英字（Developer as a Service）はそのまま。 */
.offer-metric .v, .fde-step .n, .flow-item .step-n,
.faq-q .qi, .problem-card .qmark {
  font-family: "Fraunces", "Outfit", serif;
  letter-spacing: 0;
}
.offer-metric .v { font-weight: 600; }

/* 導入の流れ：外枠を撤去し、番号ボックス → 素の数字だけ（枠なし・STEP表記なし） */
.flow-steps { border: 0; border-radius: 0; counter-reset: fs; }
.flow-item { counter-increment: fs; border: 0; border-top: 1px solid rgba(15,19,32,0.16);
  border-radius: 0; padding: 22px 0; background: transparent; }
.flow-item:hover { background: transparent; }
.flow-item .step-n { background: transparent; box-shadow: none; width: auto; height: auto;
  border-radius: 0; font-size: 0; }
.flow-item .step-n::before { content: counter(fs); font-family: "Fraunces", serif;
  font-weight: 600; font-size: clamp(28px, 3vw, 38px); color: var(--blue); line-height: 1; }

/* 見出しの中央寄せをやめ、全て左揃えに統一（比較・FAQ 等） */
.sec-head--center { margin-inline: 0; text-align: left; }
.sec-head--center .eyebrow { justify-content: flex-start; }

/* FAQは見出しから質問一覧まで、通常セクションと同じ左端に揃える */
.s-faq .faq-list { margin-inline: 0; }

/* AIネイティブの考え方と具体例を一続きに見せる */
.answer-examples-head { margin-top: clamp(64px, 8vw, 104px); }

/* 数字の書体：Futura系の Jost（0が真円・点なし）。等幅数字で桁を揃える */
:root { --font-num: "Jost", "Century Gothic", sans-serif; }
.offer-metric .v, .fde-step .n, .flow-item .step-n::before,
.faq-q .qi, .problem-card .qmark,
.s-services .card::before, .s-scenes .scene-card::before, .reason-item::before {
  font-family: var(--font-num); letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* 「作って終わりではなく、使われるところまで。」＝囲み・バーを全て外し、
   プレーンな大きい一文に（ワードは残す）。 */
.answer-emph { display: block; background: transparent; border: 0; box-shadow: none;
  border-radius: 0; padding: 0; position: static;
  font-size: clamp(22px, 2.7vw, 32px); font-weight: 900; line-height: 1.5; color: var(--ink); }
.answer-emph .bar { display: none; }

/* 英字ディスプレイを Outfit → Jost（Futura系）に統一。脱・AI感（Outfitは生成AI定番書体） */
.mhero-title, .en, .eyebrow, .offer-tag, .mhero-scroll,
.compare-head > div, .footer-col h5, .footer-bottom, .brand-name small {
  font-family: "Jost", "Century Gothic", sans-serif;
}

/* ヒーロー：Developer as a Service タグ＋定義サブ行 */
.mhero-tag { margin: 0 0 22px; font-family: "Jost", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--blue); }
.mhero-sub2 {
  margin: 0 0 34px;
  max-width: 38em;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.6;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 課題カード：Q表記を使わず、連番として認識できるバッジにする */
.problem-card .qmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--m-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

/* modern版は直線的な造形を基本とし、装飾的な角丸を使わない */
.card,
.scene-card,
.trust-card,
.offer-band,
.compare,
.contact-form,
.form-assure,
.simple-card,
.engagement-card,
.provider-photo,
.btn,
input,
textarea,
select {
  border-radius: 0;
}

.section-more { margin-top: clamp(28px, 4vw, 48px); text-align: center; }
.subpage-main { padding-top: 80px; }
.subpage-main .sec-head { max-width: 1000px; }
.subpage-main .sec-head .lead { word-break: keep-all; }
.sub-hero { padding: clamp(90px, 12vw, 150px) 0 clamp(64px, 8vw, 100px); background: var(--m-ground); }
.sub-hero .eyebrow { margin-bottom: 22px; color: var(--blue); }
.sub-title { max-width: 12ch; margin: 0 0 28px; font-family: "Jost", "Century Gothic", sans-serif; font-size: clamp(3rem, 8vw, 7rem); line-height: .98; letter-spacing: -.04em; }
.sub-lead { max-width: 64em; margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.9; color: var(--ink-2); word-break: keep-all; }
.simple-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.simple-card { padding: clamp(26px, 3vw, 38px); border-top: 2px solid var(--blue); background: #fff; }
.simple-card .num { display: block; margin-bottom: 22px; color: var(--blue); font-weight: 700; }
.simple-card h3 { margin: 0 0 14px; font-size: 1.25rem; }
.simple-card p { margin: 0; line-height: 1.8; color: var(--sub); }
.engagement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.engagement-card { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); background: #fff; }
.engagement-card--featured { border-color: rgba(43, 107, 255, .35); background: linear-gradient(145deg, rgba(43,107,255,.08), #fff 58%); }
.engagement-tag { display: block; margin-bottom: 22px; color: var(--blue); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.engagement-card h3 { margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.65rem); }
.engagement-card p { min-height: 5.4em; margin: 0; color: var(--sub); line-height: 1.8; }
.engagement-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.engagement-price strong { color: var(--ink); font-size: clamp(1.45rem, 2.7vw, 2rem); font-weight: 700; }
.engagement-price span { color: var(--sub); font-size: .85rem; }
.sub-cta { padding: clamp(84px, 11vw, 156px) 0; text-align: center; background: var(--m-ground); }
.sub-cta h2 { margin: 0 0 28px; font-size: clamp(2rem, 4vw, 3.5rem); }
.sub-cta--compact { text-align: left; }
.sub-cta-inner { display: flex; align-items: flex-start; flex-direction: column; gap: 26px; }
.sub-cta--compact .eyebrow { margin-bottom: 14px; color: var(--blue); }
.sub-cta--compact h2 { margin: 0; font-size: clamp(27px, 3.7vw, 46px); line-height: 1.42; font-weight: 900; letter-spacing: .01em; }
.sub-cta--compact .btn { flex: none; }
@media (max-width: 820px) { .simple-list, .engagement-grid { grid-template-columns: 1fr; } .engagement-card p { min-height: 0; } .sub-lead, .subpage-main .sec-head .lead { word-break: normal; } .sub-cta-inner { align-items: flex-start; flex-direction: column; } }

.provider-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
.provider-photo { width: 100%; max-width: 460px; margin: 0; overflow: hidden; border-radius: 2px; background: var(--m-ground); }
.provider-photo img { display: block; width: 100%; height: auto; }
.provider-copy h2 { margin: 0 0 28px; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.42; letter-spacing: .01em; white-space: nowrap; }
.provider-copy p { max-width: 38em; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 2; color: var(--ink-2); }
.provider-label { display: block; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 700; }
.company-profile { padding-bottom: 0; }
.about-brand { display: flex; align-items: center; gap: 18px; margin: 8px 0 42px; }
.about-brand img { display: block; width: min(340px, 52vw); height: auto; }
.about-brand strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.operator-label { display: block; margin-bottom: 8px; color: var(--sub); font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.company-name { margin: 0; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: .04em; }
.office-list { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-top: 36px; }
.office-list > div { padding: 24px 0; border-top: 1px solid var(--line); }
.office-name { display: block; margin-bottom: 10px; font-weight: 700; color: var(--ink); }
.office-list p { margin: 0; line-height: 1.8; color: var(--sub); }
.company-contact { margin-top: 30px; }
.section-actions { text-align: left; }
.provider-sign { width: fit-content; margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); }
.provider-sign span { display: block; margin-bottom: 8px; color: var(--sub); font-size: .85rem; letter-spacing: .08em; }
.provider-sign strong { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .08em; }
.office-visual { margin: 0; }
.office-visual img { display: block; width: 100%; }
.office-caption { margin-top: 18px; color: var(--sub); font-size: .9rem; }
@media (max-width: 820px) { .provider-grid { grid-template-columns: 1fr; } .provider-photo { max-width: 520px; } .provider-copy h2 { white-space: normal; } .office-list { grid-template-columns: 1fr; } }

/* FDE 3ステップ：外枠・仕切り線を撤去し、番号＋見出しの editorial に */
.fde-flow { border: 0; border-radius: 0; gap: clamp(20px, 3vw, 44px); }
.fde-step { flex: 1 1 0; min-width: 0; border: 0; border-right: 0;
  border-top: 1px solid rgba(15,19,32,0.18); background: transparent; padding: 22px 0 6px; }
.fde-step:hover { background: transparent; }
.fde-step .n { font-size: 15px; color: var(--blue); }
.fde-step h4 { font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; margin-top: 12px; }
.fde-step p { margin: 10px 0 0; color: var(--sub); font-size: 14px; line-height: 1.9; }

/* 2カラムだと窮屈＆重なりが出るため、中央寄せの単カラムにして
   フォームにゆとりを持たせる（intro を上、フォームを下に積む） */
.contact-grid {
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 52px);
  max-width: 880px;
  margin-inline: auto;
}
.s-contact .contact-bg { display: none; }
.s-contact::after { display: none; }
.contact-intro .h-sec { color: var(--ink); }
.contact-intro .lead { color: var(--sub); }
.contact-point { color: var(--ink-2); }
.contact-point svg { color: var(--blue); }
.s-contact .eyebrow--white { color: var(--blue); }
.s-contact .eyebrow--white .tri { color: var(--blue); }
.contact-card { border: 1px solid var(--line); }