@charset "UTF-8";
/* ============================================================
   営業AIソリューション LP — 緑系統（/sapir/ 系デザイン参照）

   タイポグラフィ
     見出し   : Zen Kaku Gothic New   --font-heading
     本文     : Noto Sans JP          --font-body
     ラベル・番号 : Space Mono         --font-mono

   前提：reset.css を本ファイルより先に読み込むこと。
        box-sizing / body の margin / img の max-width・display /
        見出し・p の margin / ul の list-style / button・input の
        初期化 / [hidden] は reset.css 側で処理済みのため、
        本ファイルには記載していません。

   ── 目次 ────────────────────────────────────
     00  トークン（:root）
     01  ベース
     02  レイアウト（container / section / 見出しブロック）
     03  ユーティリティ
     04  共通パーツ（ボタン / アイコンバッジ / カード）
     05  ヘッダー・グローバルナビ
     06  ヒーロー（ファーストビュー）
     07  01 PAIN POINT
     08  02 SOLUTION
     09  ナレッジデータベース
     10  03 FUNCTION
     11  04 CASE STUDY
     12  05 PROCESS
     13  06 CONTACT / フォーム
     14  フッター
     15  レスポンシブ（メディアクエリはすべてここに集約）
     16  モーション配慮
   ────────────────────────────────────────
   ※ 01〜14 は「デスクトップ表示」を基準に記述しています。
     タブレット・スマートフォン向けの差分はすべて 15 にあります。
   ============================================================ */


/* ============================================================
   00  トークン
   ============================================================ */
:root {
  /* --- 色 --- */
  --color-bg: #ffffff;
  --color-surface: #f4f5f7;
  --color-text: #1a1c20;
  --color-accent: #0f8a4a;
  --color-accent-600: #0b7440;
  --color-accent-700: #0a5c34;
  --color-accent-100: #eaf5ee;
  --color-accent-200: #cfe8d9;
  --navy: #132a52;
  --navy-700: #0d1e3c;
  --navy-200: #c9d2e0;
  --navy-pale: #8fb3d9;
  --line: #d9dde4;
  --text-sub: #3d434d;
  --text-mute: #5a616c;
  --text-faint: #7c828c;
  --label-gray: #8b919b;
  --footer-bg: #0a1730;

  /* --- 書体 --- */
  --font-heading: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-mono: "Space Mono", "Zen Kaku Gothic New", monospace;

  /* --- 背景画像（/img/ の実ファイル名に合わせて書き換えてください） --- */
  --img-hero-pc: url("../img/hero-wave-pc.png");        /* ファーストビュー：901px 以上 */
  --img-hero-sp: url("../img/hero-wave-sp.png");        /* ファーストビュー：900px 以下 */
  --img-hero-drawer: url("../img/hero-wave-drawer.png");/* SPドロワー */
  --img-section-surface: url("../img/section-surface-bg.png"); /* .section--surface */

  /* --- 画像の読み込み前・失敗時の下地 --- */
  --hero-fallback: #f3f7fb;
  --surface-fallback: #f5f8fc; /* .section--surface 用。画像の白場に合わせた青白 */

  /* --- カード共通の影 --- */
  --shadow-card: 0 1px 3px rgba(19, 42, 82, 0.05);
}


/* ============================================================
   01  ベース
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

body {
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent-700);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-600);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--color-accent-200);
}

/* overflow-x: hidden は overflow-y を auto にしてスクロールコンテナ化し、
   子孫の position: sticky を無効化してしまう。clip なら横はみ出しだけを
   抑えつつ sticky が生きるため、ヘッダーの追従が機能する。 */
.page {
  max-width: 100%;
  overflow-x: clip;
}


/* ============================================================
   02  レイアウト
   ============================================================ */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

.section {
  border-bottom: 1px solid #d2e1f3;
  background: #fff;
}

.section__inner {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* --- ネットワーク＋波の背景を敷くセクション（02 SOLUTION / 04 CASE STUDY） --- */
.section--surface {
  background-color: var(--surface-fallback);
  /* 白いレイヤーを重ねて画像を薄くする。0に近いほど濃く、1に近いほど薄い */
  --section-bg-fade: 0.55;
  background-image:
    linear-gradient(rgba(255, 255, 255, var(--section-bg-fade)), rgba(255, 255, 255, var(--section-bg-fade))),
    var(--img-section-surface);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/* 背景の上に乗るカードは、白ベタだと浮くのでわずかに透過させて馴染ませる */
.section--surface .feature-card,
.section--surface .strip__grid,
.section--surface .case-box {
  background-color: rgba(255, 255, 255, 0.92);
}

/* --- セクション見出し（キッカー + h2 + リード文の2カラム） --- */
.sec-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.sec-head--tight {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.fn-list {
  margin-bottom: 72px;
}

/* キッカー：hero__kicker と同じ緑バー付き */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  font-weight: 600;
  margin-bottom: 14px;
}

.kicker::before {
  content: "";
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  flex: 0 0 auto;
}

.sec-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.35;
  color: var(--navy);
}

.sec-lead {
  font-size: 15px;
  color: var(--text-sub);
  align-self: end;
  line-height: 1.9;
  /* text-wrap: pretty は Firefox 未対応・Safari は独自アルゴリズムのため、
     Chrome だけ折り返し位置が変わる。3ブラウザで揃えるため使わない。
     ここで折り返し位置を固定したい場合は .u-nobr（03 ユーティリティ）を使う。 */
}

.sec-lead strong {
  color: var(--navy);
}


/* ============================================================
   03  ユーティリティ
   ============================================================ */
/* Google Material Symbols（仮）。
   不要なウェイト／サイズがあれば font-variation-settings を調整 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* スクリーンリーダー用テキスト */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* SPだけで効かせる改行（表示は 15-2 で） */
/* 折り返し位置を固定したい語句に付ける。
   例：<span class="u-nobr">AI活用を設計します。</span>
   この塊が1行に入らないときは必ず塊ごと次の行へ送られるため、
   ブラウザ差（text-wrap: pretty の有無など）に左右されない。 */
.u-nobr {
  white-space: nowrap;
}

.u-br-sp {
  display: none;
}


/* ============================================================
   04  共通パーツ
   ============================================================ */
/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  border-radius: 0; /* 角丸なしが既定。hero のボタンのみ 4px */
}

.btn__arrow {
  font-family: var(--font-heading);
}

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  font-size: 15px;
  padding: 16px 28px 18px;
}

.btn--primary:hover {
  background: var(--color-accent-600);
  color: #fff;
  text-decoration: none;
}

.btn--ghost {
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 15px;
  padding: 14px 26px 18px;
}

.btn--ghost:hover {
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}

/* --- 丸型アイコンバッジ（.fact__icon と同意匠） --- */
.pain-card__icon,
.layer-card__icon,
.feature-card__icon,
.strip__icon,
.kdb-card__icon,
.fn-row__icon,
.input-card__icon,
.step-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef1f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.pain-card__icon .material-symbols-outlined,
.layer-card__icon .material-symbols-outlined,
.feature-card__icon .material-symbols-outlined,
.strip__icon .material-symbols-outlined,
.kdb-card__icon .material-symbols-outlined,
.fn-row__icon .material-symbols-outlined,
.input-card__icon .material-symbols-outlined,
.step-card__icon .material-symbols-outlined {
  font-size: 24px;
}

/* カード上部に単独で置くバッジは下余白を持たせる */
.layer-card__icon,
.input-card__icon,
.step-card__icon {
  margin-bottom: 14px;
}

/* --- カード共通：角丸 + 枠線 + 薄い影（hero SPのfactカード準拠） --- */
.pain-card,
.layer-card,
.feature-card,
.kdb-card,
.input-card,
.step-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

/* --- BudouX ---
   <budoux-ja> の中身に文節区切り（ゼロ幅スペース）が挿入されるので、
   「区切り以外では折り返さない」状態にする。keep-all だけだと英単語やURLが
   はみ出すため、overflow-wrap: anywhere をセットで指定する。 */
budoux-ja {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --- セクション内の画像（仮画像） ---
   すべて aspect-ratio + object-fit: cover で切り抜くため、差し替える画像の
   縦横比が多少違っても崩れない。HTML の width/height 属性は CLS 対策用で、
   表示サイズはここで決まる。 */
.sec-visual {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.sec-visual__img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

/* カード上部のサムネイル（layer / feature / step） */
.feature-card__visual,
.step-card__visual,
.case-panel__visual {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-surface);
}

.feature-card__visual {
  aspect-ratio: 16 / 9;
}

.step-card__visual {
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
}

.case-panel__visual {
  aspect-ratio: 16 / 9;
  margin-bottom: 20px;
}

/* 機能例の行末サムネイル */
.fn-row__visual {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-surface);
}


/* ============================================================
   05  ヘッダー・グローバルナビ
   ※ SPのドロワー表示は 15-2 に集約
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(19, 42, 82, 0.08);
}

.site-header__inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand__logo {
  height: 38px;
  width: auto;
}

/* ナビ + CTA のまとまり（SPではドロワーの中身になる） */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin-left: auto;
}

.gnav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gnav__link {
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
  white-space: nowrap;
}

/* ヘッダーのお問い合わせCTA（緑） */
.header-cta {
  background: var(--color-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 13px 24px 15px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  background: var(--color-accent-600);
  color: #fff;
  text-decoration: none;
}

/* .drawer__foot は PC ではナビ末尾のCTA置き場、SP ではドロワー下部になる */
.drawer__foot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* --- ドロワー専用パーツ：PCでは非表示 --- */
.gnav__icon,
.gnav__chevron,
.header-cta__icon,
.header-cta__arrow,
.drawer__head,
.nav-overlay,
.nav-close {
  display: none;
}

/* --- ハンバーガーボタン：PCでは非表示（表示は 15-2） --- */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--navy);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.nav-toggle__bars::before {
  top: -9px;
}

.nav-toggle__bars::after {
  top: 9px;
}


/* ============================================================
   06  ヒーロー（ファーストビュー：全画面）
   ============================================================ */
/* ヘッダーは sticky なので、その高さぶんを差し引いた残りを埋める。
   --header-h はブレイクポイントごとに実測値へ切り替える（15章）。 */
.hero {
  --header-h: 71px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h)); /* iOS のアドレスバー伸縮に追従 */
  border-bottom: 1px solid #d2e1f3;
  position: relative;
  /* 背景：1枚画像を全面に敷く。900px 以下は SP 用へ差し替え（15-2） */
  background-color: var(--hero-fallback);
  background-image: var(--img-hero-pc);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 縦の余白は vh 基準にして、画面高さに応じて自動で詰まるようにする */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(24px, 5vh, 72px);
  padding-bottom: calc(clamp(24px, 5vh, 72px) + 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vh, 56px);
  align-items: center;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(12px, 2.4vh, 20px);
}

.hero__kicker-bar {
  width: 36px;
  height: 2px;
  background: var(--color-accent);
  display: block;
}

.hero__kicker-text {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--color-accent-700);
  font-weight: 600;
}

/* 画面高さも判断材料に入れ、縦が短い端末では見出しを小さくする */
.hero__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(30px, min(5.4vw, 7.4vh), 62px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(10px, 2.2vh, 18px);
  color: var(--navy);
}

.hero__sub {
  font-size: clamp(15px, min(2vw, 2.6vh), 22px);
  font-weight: 700;
  color: var(--color-accent-700);
  margin: 0 0 clamp(12px, 2.6vh, 24px);
  line-height: 1.6;
}

.hero__desc {
  font-size: clamp(13.5px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--text-sub);
  margin: 0 0 clamp(18px, 3.4vh, 32px);
  max-width: 40em;
  /* text-wrap: pretty は不採用（理由は .sec-lead のコメント参照） */
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__actions .btn {
  border-radius: 4px;
}

/* --- 実績（ファクト） --- */
.hero__facts {
  align-self: center;
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 40px);
}

.fact {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(10px, 1.8vh, 18px) 0;
  border-bottom: 1px solid var(--line);
}

.fact:first-child {
  padding-top: 0;
}

.fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fact__icon {
  flex: 0 0 auto;
  width: clamp(48px, 4.6vw, 62px);
  height: clamp(48px, 4.6vw, 62px);
  border-radius: 50%;
  background: #eef1f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.fact__icon .material-symbols-outlined {
  font-size: clamp(24px, 2.2vw, 30px);
}

.fact__body {
  min-width: 0;
}

.fact__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: 2px;
  line-height: 1.5;
}

.fact__value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, min(3.6vw, 4.4vh), 40px);
  color: var(--navy);
  line-height: 1.2;
}


/* ============================================================
   07  01 課題（PAIN POINT）
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.pain-card {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  gap: 16px;
  align-items: center;
}

.pain-card:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-200);
}

.pain-card__body {
  min-width: 0;
}

/* 番号は小さなモノスペースラベル（fact__label のトーン） */
.pain-card__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent-700);
  margin-bottom: 4px;
  line-height: 1;
}

.pain-card__text {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
}

/* --- レイヤー（戦略は実行までの間に…） --- */
.layers-head {
  margin-top: clamp(36px, 5vw, 64px);
}

.layers-head__title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
}

.layers-head__note {
  font-size: 13.5px;
  color: var(--text-mute);
  margin: 0 0 24px;
}

/* --- 階層フロー（経営層 → マネジャー → メンバー） ---
   3枚のカードを矢印でつなぎ、「上から下へ伝わるうちにズレが増える」
   流れとして読ませる。PCは横並び、900px以下は縦積み＋矢印を回転。 */
.layer-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}

.layer-card {
  background: #fff;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 画像は上部に全幅で入る。img タグごと消しても下のレイアウトは崩れない */
.layer-card__figure {
  position: relative;
  line-height: 0;
}

.layer-card__visual {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-surface);
}

.layer-card__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 12px 6px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.layer-card__body {
  flex: 1;
  padding: clamp(20px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layer-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* 共通バッジの下余白はここでは不要（横並びのため） */
.layer-card__icon {
  margin-bottom: 0;
}

.layer-card__name {
  min-width: 0;
}

.layer-card__en {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--label-gray);
  margin-bottom: 4px;
}

.layer-card__role {
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
}

/* 「本来の役割」「起きているズレ」の2ブロック */
.layer-card__row-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--label-gray);
  margin-bottom: 6px;
}

.layer-card__does {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.8;
}

.layer-card__row--gap {
  margin-top: auto;
  padding: 14px 16px 15px;
  border-radius: 8px;
  background: var(--color-accent-100);
}

.layer-card__row--gap .layer-card__row-label {
  color: var(--color-accent-600);
}

.layer-card__gap {
  font-size: 13.5px;
  color: var(--color-accent-700);
  font-weight: 700;
  line-height: 1.7;
}

/* --- カード間の矢印 --- */
.layer-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 78px;
  color: var(--text-faint);
  text-align: center;
}

.layer-arrow__icon {
  font-size: 26px;
  color: var(--color-accent);
  line-height: 1;
}

.layer-arrow__text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

/* --- 締めの一文（カードの流れの着地点） ---
   囲みボックスにせず、縦罫 → ラベル → 大きめの一文、という
   「結論」の見せ方に。強調部分だけ下線を敷いてリズムを付ける。 */
.layers-result {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
}

.layers-result__line {
  display: block;
  width: 1px;
  height: clamp(28px, 4vw, 44px);
  margin: 0 auto 18px;
  background: linear-gradient(to bottom, var(--color-accent-200), var(--color-accent));
}

.layers-result__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-accent-700);
  margin-bottom: 12px;
}

.layers-result__text {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2.4vw, 27px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.65;
  max-width: 26em;
  margin: 0 auto;
  text-wrap: balance;
}

/* 強調部分の下線（下端から少し浮かせて敷く） */
.layers-result__em {
  font-weight: 700;
  background-image: linear-gradient(var(--color-accent-200), var(--color-accent-200));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.32em;
}

/* 中間幅：矢印の文字までは入らないのでアイコンだけにする */
@media (max-width: 1080px) {
  .layer-arrow {
    width: 40px;
  }

  .layer-arrow__text {
    display: none;
  }
}



/* ============================================================
   08  02 特徴（SOLUTION）
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.feature-card {
  background: #fff;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature-card__no {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  line-height: 1;
}

.feature-card__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  display: block;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}

.feature-card__body {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.9;
}

.feature-card__tag {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  font-weight: 700;
}

/* --- 変革ストリップ --- */
.strip {
  margin-top: clamp(32px, 4vw, 56px);
}

.strip__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.4;
  margin: 0 0 20px;
  color: var(--navy);
}

.strip__grid {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 32px);
}

.strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Space Mono は等幅で存在感が強いため、連番はやや小さく */
.strip__no {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  font-weight: 600;
  margin-bottom: 6px;
}

.strip__text {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.6;
}


/* ============================================================
   09  ナレッジデータベース
   ============================================================ */
.kdb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.kdb-card {
  background: #fff;
  padding: clamp(20px, 2.4vw, 30px);
}

/* アイコンと見出しを横並びにして、カード上部の余白をつぶす。
   SP（900px以下）では 15章で縦積み・中央寄せに戻す。 */
.kdb-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.kdb-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--label-gray);
  margin-bottom: 4px;
}

.kdb-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
}

/* 3枚の役割の違いを一言で説明する行 */
.kdb-card__desc {
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.85;
  margin-bottom: 16px;
}

/* 項目を面でくくり、カード内の重心をつくる */
.kdb-card__list {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 4px 16px;
}

.kdb-card__item {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.9;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

/* 行頭のドット。inline-block なので SP の中央寄せでも位置が崩れない */
.kdb-card__item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.kdb-card__item:last-child {
  border-bottom: none;
}

.kdb-figure {
  margin: clamp(28px, 4vw, 48px) 0;
}

.kdb-figure__img {
  width: 100%;
}

.kdb-figure__caption {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 12px;
  line-height: 1.7;
  text-align: center;
}



/* ============================================================
   10  03 機能例（FUNCTION）
   ============================================================ */
.fn-row {
  padding: clamp(20px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}

.fn-row:first-child {
  border-top: 1px solid var(--line);
}

.fn-row:hover {
  background: var(--color-accent-100);
}

.fn-row__inner {
  display: grid;
  /* タイトル列は「ロールプレイ（SAPIロープレ）」が1行に収まる幅を確保する。
     1.1fr / gap 32px だと Chrome ではぎりぎり収まり、Firefox・Safari では
     数px足りず閉じ括弧だけが次の行へ送られていた。 */
  /* 列幅は「1行に収まるか」で決めている（コンテナ最大幅1240px＝内側1144px時）。
       タイトル列 約291px … 最長「ロールプレイ（SAPIロープレ）」が約270px
       本文列   約465px … 最長級の1行文が約450px
     本文列が450px前後だと Safari だけ数px足りず「…提示しま／す。」と
     1文字だけ送られていたため、余白を1割ほど確保している。 */
  grid-template-columns: 48px minmax(200px, 1.25fr) minmax(240px, 2fr) clamp(140px, 15vw, 180px);
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.fn-row__no {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.92em;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.fn-row__title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
}

.fn-row__body {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.9;
}

  /* --- 入力方法（INPUT） --- */
.input-grid__title {
   font-family: var(--font-heading);
   font-weight: 700;
   font-size: clamp(20px, 2.6vw, 30px);
   line-height: 1.4;
   margin: 0 0 20px;
   color: var(--navy);
}

/* --- 入力方法（INPUT） --- */
.input-grid {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.input-card {
  background: #fff;
  padding: 18px;
  text-align: center;
}

.input-card__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
}

.input-card__icon .material-symbols-outlined {
  font-size: 22px;
}

.input-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--label-gray);
  margin-bottom: 6px;
}

.input-card__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}


/* ============================================================
   11  04 導入イメージ（CASE STUDY）
   ============================================================ */
.case-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.case-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.case-tabs button.case-tab {
  flex: 1;
  min-width: 150px;
  min-height: 56px;
  /* 6等分したタブ幅（最大幅時 約190px）に「損保代理店グループ」9文字＝126px が
     収まるだけの余白しか残らない。18px/8px のままだと Chrome だけぎりぎり収まり、
     Firefox・Safari では「グルー／プ」と文字の途中で折り返していた。 */
  padding: 16px 14px 18px;
  border-right: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  background: #fff;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-tabs button.case-tab:last-child {
  border-right: none;
}

/* タブ幅が足りない場合でも文字の途中では折り返さず、
   HTML 側の <wbr> を入れた位置だけで折り返す。 */
.case-tab__text {
  word-break: keep-all;
  overflow-wrap: anywhere; /* 最終手段。<wbr> があるので通常は発動しない */
}

/* ホバーはマウス環境のみ。タッチだとタップ後も色が残り、
   選択中のタブと見分けがつかなくなるため。 */
@media (hover: hover) and (pointer: fine) {
  .case-tab:hover {
    background: var(--color-accent-100);
  }
}

/* 選択中は「濃紺 ＋ 下端のアクセント線」。
   色だけでなく形でも差をつけ、下のパネルと繋がって見えるようにする。 */
.case-tab.is-active,
.case-tab.is-active:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 -4px 0 var(--color-accent);
}

.case-tab.is-active,
.case-tab.is-active:hover {
  background: var(--navy);
  color: #fff;
}

.case-tab__icon {
  font-size: 20px;
  color: var(--color-accent);
  flex: 0 0 auto;
}

.case-tab.is-active .case-tab__icon,
.case-tab.is-active:hover .case-tab__icon {
  color: #8fd8b2;
}

/* パネルの表示領域。スワイプ誘導ヒント（.case-hint）の位置の基準になる */
.case-stage {
  position: relative;
}

/* パネルの表示切替は JS（hidden 属性 + is-active / is-shown）で行う */
.case-panel {
  display: none;
}

.case-panel.is-active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  /* 横方向のスライド＋フェード。
     どちら側から入る（へ抜ける）かは JS が --case-from を書き換えて決める。
     「次へ」= 右から入って左へ抜ける／「前へ」= 左から入って右へ抜ける。
     .case-box に overflow:hidden があるため、はみ出しても横スクロールは出ない。 */
  opacity: 0;
  transform: translateX(var(--case-from, 32px));
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.case-panel.is-active.is-shown {
  opacity: 1;
  transform: translateX(0);
}

/* ---- 横スワイプできることを伝えるヒント（SPのみ表示） ---- */
/* PCはタブと前後ボタンで操作できるため出さない。
   display は SP のメディアクエリ側で flex に切り替える。 */
.case-hint {
  display: none;
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 108px;
  padding: 12px 8px 14px;
  border-radius: 10px;
  background: rgba(10, 18, 33, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  /* 下のパネルのスワイプを邪魔しない */
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* JS が最初の操作で付与する */
.case-hint.is-hidden {
  opacity: 0;
}

.case-hint__arrows {
  display: flex;
  gap: 8px;
}

.case-hint__arrows .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}

.case-panel__col {
  background: #fff;
  padding: clamp(24px, 3vw, 40px);
}

.case-panel__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  margin-bottom: 12px;
}

.case-panel__industry {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  line-height: 1.35;
}

.case-panel__scale {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  margin-bottom: 24px;
}

.case-panel__block {
  border-top: 2px solid var(--navy);
  padding-top: 16px;
  margin-bottom: 20px;
}

.case-panel__block--sub {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}

.case-panel__block-label {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--label-gray);
  margin-bottom: 8px;
}

.case-panel__issue {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.7;
}

.case-panel__target {
  font-size: 13px;
  color: var(--text-mute);
  margin: 8px 0 0;
  line-height: 1.8;
}

.case-panel__point {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.9;
}

.case-panel__side-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--label-gray);
  margin-bottom: 16px;
}

.case-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.case-item__title {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.case-item__body {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.8;
}

.case-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.case-footer__note {
  font-size: 11.5px;
  color: var(--text-faint);
}

.case-footer__nav {
  display: flex;
  gap: 8px;
}

.case-nav-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--navy);
  font-family: var(--font-heading);
  font-size: 16px;
  padding-bottom: 4px;
}

.case-nav-btn--prev {
  background: #fff;
  color: var(--navy);
}

.case-nav-btn--prev:hover {
  background: var(--navy);
  color: #fff;
}

.case-nav-btn--next {
  background: var(--navy);
  color: #fff;
}

.case-nav-btn--next:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}


/* ============================================================
   12  05 導入の流れ（PROCESS）
   ============================================================ */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.step-card {
  background: #fff;
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-card__icon {
  margin-top: 6px;
  margin-bottom: 8px;
}

.step-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.step-card__step {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.step-card__term {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--navy);
  padding: 4px 10px 5px;
}

.step-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
}

.step-card__group--dev {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.step-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--label-gray);
  margin-bottom: 6px;
}

.step-card__item {
  font-size: 13.5px;
  color: var(--text-sub);
  line-height: 1.8;
}


/* ============================================================
   13  06 お問い合わせ（CONTACT）
   ============================================================ */
.contact {
  background: var(--navy);
  color: #fff;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.contact .kicker {
  color: var(--navy-pale);
}

.contact__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.3;
  margin: 0 0 20px;
}

.contact__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 8px 16px 9px;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-accent-700);
  font-size: 13.5px;
  font-weight: 700;
}

.contact__badge-icon {
  font-size: 18px;
  color: var(--color-accent);
}

.contact__lead {
  font-size: 15px;
  color: #c2cfe0;
  line-height: 1.9;
  margin: 0 0 32px;
  max-width: 32em;
  /* text-wrap: pretty は不採用（理由は .sec-lead のコメント参照） */
}

.contact__mark {
  background: var(--color-accent-100);
  color: var(--navy);
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  /* 複数行にまたがっても、各行それぞれにマーカー背景が付くように */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.company-list {
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.company-list__row {
  display: grid;
  grid-template-columns: minmax(90px, 110px) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.company-list__key {
  font-size: 12.5px;
  color: var(--navy-pale);
}

.company-list__value {
  font-size: 13.5px;
  color: #fff;
  line-height: 1.7;
}

.company-list__value a {
  color: #fff;
  text-decoration: underline;
}

/* --- フォーム --- */
/* 【ブラウザ差分について】
   input / select / button は「intrinsic size（固有の幅）を持つ要素」として
   扱われ、grid の stretch が効くかどうかがブラウザで異なります。
   - Chrome  : トラック幅いっぱいに伸びる
   - Firefox / Safari : input の size 属性（既定20文字）由来の幅が優先され、
                        トラック幅を超えてはみ出す
   そのため、以下では
     1) 親グリッドのトラック最小値を 0 にする（minmax(0, 1fr) / min-width: 0）
     2) コントロール側に width: 100% を明示する
   の2点を必ずセットで指定し、3ブラウザで同じ幅になるようにしています。
   ここを消すと Firefox / Safari でフォームが右にはみ出します。 */
.contact-form {
  background: #fff;
  color: var(--color-text);
  padding: clamp(22px, 3vw, 36px);
  display: grid;
  gap: 18px;
  min-width: 0; /* グリッドアイテムとしての最小幅。中身に押し広げられないように */
}

/* --- フォームのエラー表示（WordPress化で追加）---
   モック用の .form-done（送信完了メッセージ）は、送信成功時に
   サンクスページ（/salesai/thankyou/）へ遷移する構成に変わったため廃止。
   代わりにサーバー／JS双方から使うエラー表示のスタイルを定義する。 */

/* フォーム上部・エラー通知（サーバー側エラーの表示と、JS検証の総括通知を兼用） */
.form-notification {
  background: #fdf1f3;
  border-left: 4px solid #e11d48;
  padding: 16px;
  font-size: 14px;
  color: #b0123a;
  font-weight: 700;
}

/* 入力枠の赤ハイライト（salesai-form.js が .is-error を付与） */
.form-control.is-error {
  border-color: #e11d48;
}
.form-control.is-error:focus {
  border-color: #e11d48;
  outline-color: #e11d48;
}

/* フィールド下の赤字メッセージ（data-error-for でJSが書き込む） */
.form-error {
  font-size: 12px;
  line-height: 1.5;
  color: #e11d48;
}
.form-error:empty {
  display: none;
}

/* プライバシーポリシー同意欄のエラー状態 */
.form-agree.is-error .form-agree__checkbox {
  outline: 2px solid #e11d48;
  outline-offset: 1px;
}

/* フォーム下部の注記 */
.form-note {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-mute);
}

.form-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* auto だと input の固有幅でトラックが広がる */
  gap: 6px;
  min-width: 0;
}

.form-field__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
}

.form-field__required {
  color: var(--color-accent);
}

.form-grid {
  display: grid;
  /* min(200px, 100%) : 極端に狭い幅でもトラックがコンテナを超えないようにする */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

.form-control {
  width: 100%; /* Firefox / Safari で size 属性由来の幅にならないように */
  min-width: 0;
  max-width: 100%;
  border: 1px solid #c3c9d2;
  padding: 12px;
  font-size: 14px;
  /* reset.css の方針どおり body の line-height は継承させず、ここで明示する。
     未指定（normal）だとブラウザごとに1〜2px高さがずれるため。 */
  line-height: 1.5;
  background: #fff;
  color: var(--color-text);
}

.form-control::placeholder {
  color: var(--text-faint);
  opacity: 1; /* Firefox は既定で opacity を下げるため戻す */
}

.form-control:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* select は Safari だけネイティブのボタン風UIになり、padding も無視されるため、
   見た目を自前に統一する（矢印もこちらで描画する）。
   reset.css で input 全体に appearance:none を当てていないのは意図的なので、
   ここでは select だけを対象にしている。 */
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a616c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px auto;
  cursor: pointer;
}

/* Firefox：フォーカス時に選択中の文言がハイライト色になるのを防ぐ */
select.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--color-text);
}

textarea.form-control {
  display: block; /* インライン扱いによる下の余白を出さない */
}

.form-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.7;
}

.form-agree__checkbox {
  flex: none; /* Safari で潰れないように */
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.form-submit {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: var(--color-accent);
  color: #fff;
  padding: 18px 18px 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Firefox：ボタン内側の点線枠を消す */
.form-submit::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.form-submit:hover {
  background: var(--color-accent-600);
}

.form-submit:active {
  background: var(--color-accent-700);
}


/* ============================================================
   14  フッター
   ============================================================ */
.footer {
  background: var(--footer-bg);
}

.footer__top {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.footer__logo {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer__tagline {
  font-size: 12.5px;
  color: #9db4d1;
  line-height: 1.8;
  margin: 14px 0 0;
}

/* --- 上場・認証バッジ（元画像が白地のため、白い台紙に載せる） --- */
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

.footer__badge {
  background: #fff;
  border-radius: 4px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer__badge img {
  height: 100px;
  width: auto;
}

/* --- リンク（2カラム） --- */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(16px, 3vw, 40px);
}

.footer__list li + li {
  margin-top: 2px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #fff;
  line-height: 1.6;
  padding: 9px 0;
  transition: color 0.2s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--navy-pale);
  text-decoration: underline;
}

/* 外部リンクアイコン */
.footer__ext {
  font-size: 16px;
  flex: 0 0 auto;
  color: #7f9cbf;
}

/* --- 最下部（社名・コピーライト） --- */
.footer__inner {
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: center;
}

.footer__text {
  font-size: 11.5px;
  color: #9db4d1;
}


/* ============================================================
   15  レスポンシブ
   ------------------------------------------------------------
   ブレイクポイント一覧
     15-1  min-width: 901px                    … PC（横並びレイアウト）
     15-2  min-width: 901px / max-width: 1024px … タブレット（ナビ調整）
     15-3  max-width: 900px                    … スマートフォン（ドロワー）
     15-4  max-width: 640px                    … 狭幅（機能例の折り返し）
     15-5  max-height: 560px（幅640px以上）     … 横向きスマホ・低背ノート
     15-6  max-height: 430px（幅640px以上）     … 横向きスマホ

   ※ 記述順＝適用の優先順です。並べ替えると打ち消し関係が壊れます。
   ============================================================ */

/* ------------------------------------------------------------
   15-1  PC：min-width: 901px
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  /* 見出しの折り返しを優先し、実績カラムは固定幅寄りに */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  }
}

/* ------------------------------------------------------------
   15-2  タブレット：901px 〜 1024px
        ナビが2段になるのを避けるため間隔を詰める
   ------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1024px) {
  .site-header__nav {
    gap: 14px;
  }

  .gnav {
    gap: 12px;
  }

  .gnav__link {
    font-size: 12px;
  }

  .header-cta {
    padding: 11px 16px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------
   15-3  スマートフォン：max-width: 900px
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  html {
    scroll-padding-top: 64px;
  }

  :root {
    --drawer-width: min(80vw, 340px);
  }

  /* === ユーティリティ === */
  .u-br-sp {
    display: inline;
  }

  /* === ヘッダー === */
  .site-header__inner {
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand__logo {
    height: 30px;
  }

  .nav-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .case-tabs button.case-tab:nth-child(even) {
    border-right: none;
  }

  /* === ドロワー：背面のオーバーレイ === */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 18, 33, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .nav-overlay.is-open {
    opacity: 1;
  }

  .case-panel.is-active {
    touch-action: pan-y;
  }

  .sec-visual__img {
    aspect-ratio: 16 / 9;
  }

  /* 機能例：中間幅では 5カラムが収まらないので、タイトルと本文を縦積みに */
  .fn-row__inner {
    grid-template-columns: 48px 64px 1fr clamp(140px, 22vw, 200px);
    row-gap: 4px;
  }

  .fn-row__icon,
  .fn-row__no,
  .fn-row__visual {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .fn-row__title {
    grid-column: 3;
    grid-row: 1;
  }

  .fn-row__body {
    grid-column: 3;
    grid-row: 2;
  }

  .case-hint {
    display: flex;
  }

  /* === ドロワー本体（下部に波の背景） === */
  .site-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: var(--drawer-width);
    margin-left: 0;
    display: block;
    background-color: #fff;
    background-image: var(--img-hero-drawer);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }

  .site-header__nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s ease, visibility 0s linear 0s;
  }

  .case-footer__nav {
    margin: 0 auto;
  }

  /* === ドロワー上部：ロゴ + 閉じるボタン === */
  .drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(20px, 5vw, 28px);
    border-bottom: 1px solid var(--line);
  }

  .layer-card {
    text-align: center;
  }

  /* 階層フローは縦積みにして、矢印を下向きへ回転させる */
  .layer-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .layer-arrow {
    flex-direction: row;
    width: auto;
    padding: 10px 0;
  }

  .layer-arrow__icon {
    transform: rotate(90deg);
  }

  .layer-arrow__text {
    display: inline;
  }

  .layer-card__top {
    flex-direction: column;
    gap: 10px;
  }

  .layer-card__row--gap {
    margin-top: 0;
  }

  .layers-result__em {
    background-size: 100% 0.3em;
  }

  .drawer__logo {
    height: 28px;
    width: auto;
  }

  .nav-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--navy);
  }

  .nav-close .material-symbols-outlined {
    font-size: 30px;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  }

  .nav-close__label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  .kdb-card {
    text-align: center;
  }

  /* === ドロワー：リンク一覧（アイコン + ラベル + 矢印） === */
  .gnav {
    display: block;
    padding: 0 clamp(20px, 5vw, 28px);
  }

  .gnav__link {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }

  .gnav__link:hover,
  .gnav__link:active {
    color: var(--color-accent-700);
    text-decoration: none;
  }

  .gnav__icon {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 26px;
    color: var(--navy);
  }

  .gnav__text {
    flex: 1 1 auto;
  }

  .gnav__chevron {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--navy-200);
  }

  /* === ドロワー下部のCTA === */
  .drawer__foot {
    display: block;
    padding: 24px clamp(20px, 5vw, 28px) 40px;
  }

  .header-cta {
    display: flex;
    padding: 18px;
    font-size: 15px;
    text-align: center;
  }

  .header-cta__icon {
    display: inline-block;
    font-size: 24px;
  }

  .header-cta__arrow {
    display: inline-block;
    font-family: var(--font-heading);
  }

  /* === ヒーロー === */
  .hero {
    --header-h: 51px;
    min-height: auto;
    background-image: var(--img-hero-sp);
    background-position: center top;
  }

  .hero__inner {
    gap: clamp(20px, 3.4vh, 36px);
  }

  .hero__actions {
    gap: 10px;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 17px 20px;
  }

  /* 実績はカード積みに */
  .hero__facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    border-left: none;
    padding-left: 0;
  }

  .fact {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
    gap: 14px;
  }

  .fact:first-child {
    padding-top: 14px;
  }

  .fact:last-child {
    padding-bottom: 14px;
  }

  .fact__icon {
    width: 54px;
    height: 54px;
  }

  .fact__icon .material-symbols-outlined {
    font-size: 26px;
  }

  .fact__label {
    font-size: 12px;
  }

  .fact__value {
    font-size: clamp(22px, 6.4vw, 30px);
  }

  /* === セクション背景 ===
     SP は縦に長くなり cover の拡大率が上がるため、上端寄せで柄を見せる */
  .section--surface {
    background-position: center top;
  }

  /* === フッター === */
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .footer__badge img {
    height: 46px;
  }
}

/* ------------------------------------------------------------
   15-4  狭幅：max-width: 640px
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .fn-row__inner {
    grid-template-columns: 48px 1fr;
    row-gap: 2px;
  }

  .fn-row__icon {
    grid-row: 1 / span 3;
    align-self: start;
  }

  .fn-row__no,
  .fn-row__title,
  .fn-row__body,
  .fn-row__visual {
    grid-column: 2;
    grid-row: auto;
  }

  .fn-row__visual {
    margin-top: 10px;
    max-width: 320px;
  }
}

/* ------------------------------------------------------------
   15-5  縦が短い画面：max-height: 560px（幅640px以上）
        1カラムのままでは収まらないため、横幅があれば2カラムへ
        切り替えて縦を稼ぐ
   ------------------------------------------------------------ */
@media (max-height: 560px) and (min-width: 640px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: clamp(16px, 3vw, 32px);
    padding-top: clamp(16px, 4vh, 32px);
    padding-bottom: clamp(16px, 4vh, 32px);
  }

  .hero__desc {
    margin-bottom: clamp(12px, 3vh, 20px);
  }

  .hero__actions .btn {
    width: auto;
  }

  /* 実績はカード積みをやめ、罫線リストへ戻す */
  .hero__facts {
    display: block;
    border-left: 1px solid var(--line);
    padding-left: clamp(16px, 2.5vw, 28px);
  }

  .fact {
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 6px 0;
    gap: 12px;
  }

  .fact:last-child {
    border-bottom: none;
  }

  .fact__icon {
    width: 40px;
    height: 40px;
  }

  .fact__icon .material-symbols-outlined {
    font-size: 22px;
  }

  .fact__label {
    font-size: 11px;
    margin-bottom: 0;
  }

  .fact__value {
    font-size: clamp(18px, 4.6vh, 26px);
  }
}

/* ------------------------------------------------------------
   15-6  横向きスマホ相当：max-height: 430px（幅640px以上）
        15-5 からさらに切り詰める
   ------------------------------------------------------------ */
@media (max-height: 430px) and (min-width: 640px) {
  .hero__inner {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 18px;
  }

  .hero__kicker {
    margin-bottom: 8px;
  }

  .hero__title {
    font-size: clamp(22px, 6.4vh, 32px);
    margin-bottom: 8px;
  }

  .hero__sub {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .hero__desc {
    font-size: 12.5px;
    line-height: 1.7;
    margin-bottom: 12px;
  }

  .hero__actions .btn {
    padding: 9px 18px;
    font-size: 13px;
  }

  .fact {
    padding: 4px 0;
  }

  .fact__icon {
    width: 34px;
    height: 34px;
  }

  .fact__icon .material-symbols-outlined {
    font-size: 20px;
  }

  .fact__value {
    font-size: 18px;
  }
}



/* ============================================================
   16  モーション配慮
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header__nav,
  .site-header__nav.is-open,
  .nav-overlay,
  .nav-close {
    transition: none;
  }

  .case-panel.is-active {
    transition: none;
    opacity: 1;
    transform: none;
  }

  /* transform は translateX(-50%) が必要なため打ち消さない */
  .case-hint {
    transition: none;
  }
}