@charset "UTF-8";
/* =============================================================
   株式会社イーアンドエヌ コーポレートサイト / LP
   style.css — モバイルファースト
   ============================================================= */

/* -------------------------------------------------------------
   1. Design Tokens
------------------------------------------------------------- */
/* =============================================================
   カラーパレット（3系統に統一）

   ＜ルール＞
   ① ベースカラー ： 深いネイビー（--c-navy-*）
        面（ダークセクション・見出し文字・地色）に使う。
   ② メインカラー ： 明るいブルー（--c-sky-*）
        BtoBの「信頼感」を担う主役色。リンク・図版・強調・罫線・淡い面。
   ③ アクセントカラー： オレンジ（--c-cv-*）
        CVボタンと「ここぞ」の一点強調だけに使う。面積を増やさない。

   ＜運用＞
   ・上記3系統 ＋ 無彩色（text / line / white）以外の «新しい色相» を
     追加しないこと。ゴールド・グリーン・レッドの装飾は本改修で全廃し、
     すべて上記3系統へ寄せている（--c-gold 等は互換のための別名のみ）。
   ・生のカラーコード（#xxxxxx）を新規に書かない。必ず変数を使う。
============================================================= */
:root {
  /* ① ベースカラー：ネイビー */
  --c-navy-950: #050f1f;
  --c-navy-900: #081a35;
  --c-navy-800: #0b2249;
  --c-navy-700: #12315f;
  --c-navy-600: #1a4480;
  --c-navy-500: #205293;

  /* ② メインカラー：水色（信頼感のある明るいブルー） */
  --c-sky-700: #14639f;
  --c-sky-600: #1c7ac2;
  --c-sky-500: #2f90d8;   /* ★メインカラー */
  --c-sky-400: #58a9e4;
  --c-sky-300: #8fc3f0;
  --c-sky-200: #bcdcf6;
  --c-sky-100: #e3f0fb;
  --c-sky-50:  #f2f8fd;

  /* ③ アクセントカラー：オレンジ（CV・一点強調） */
  --c-cv-700: #c25a00;
  --c-cv-600: #e86f00;
  --c-cv-500: #f77f00;
  --c-cv-400: #ff9f1c;
  --c-cv-300: #ffc078;   /* ダーク面上での見出し強調（旧 #ffd18a の置き換え） */
  --c-cv-100: #ffe3c2;
  --c-cv-50:  #fff5e9;
  --c-cv-grad: linear-gradient(135deg, #ff9f1c 0%, #f77f00 55%, #f25c05 100%);

  /* 旧トークンの別名（既存の指定を壊さないための互換エイリアス）。
     新規のコードでは --c-sky-* を使うこと。 */
  --c-blue-400: var(--c-sky-500);
  --c-blue-100: var(--c-sky-100);
  --c-blue-50:  var(--c-sky-50);
  --c-gold:     var(--c-cv-400);

  /* 無彩色 */
  --c-text: #24303f;
  --c-text-weak: #5b6b7c;
  --c-text-mute: #a3b1c0;
  --c-white: #ffffff;
  --c-line: #dbe4ee;
  /* フォームのエラー表示«専用»。装飾目的では使わない（色数を増やさないため） */
  --c-danger: #d64550;

  /* Shadow（多層のほのかなドロップシャドウ） */
  --shadow-sm: 0 1px 2px rgba(8, 26, 53, .04), 0 8px 24px rgba(8, 26, 53, .06);
  --shadow-md: 0 2px 4px rgba(8, 26, 53, .04), 0 16px 40px rgba(8, 26, 53, .10);
  --shadow-lg: 0 4px 8px rgba(8, 26, 53, .05), 0 28px 64px rgba(8, 26, 53, .14);
  --shadow-cv: 0 8px 20px rgba(242, 92, 5, .30);

  /* Typography */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-num: "Oswald", "Noto Sans JP", sans-serif;
  /* 価格の «主役の数字» 専用。
     Montserrat は字面が整いすぎて «LPの圧» が出なかったため Anton に変更。
     Anton＝Impact 系の極太コンデンス体で、字幅が詰まっているぶん
     同じ横幅でも文字を «より大きく» できる（＝インパクトを稼げる）。
     Web フォントが落ちた場合は OS の Impact →
     さらに無ければ Noto Sans JP 900 まで段階的に落とす。 */
  --font-price: "Anton", "Impact", "Haettenschweiler", "Noto Sans JP", sans-serif;

  /* Layout */
  --header-h: 68px;
  /* ＝＝ 角丸（2026-08 レビュー反映：脱AI感）＝＝
     14px / 22px の «ぽってりした角丸» は、AI生成のUIに特有の質感であり、
     BtoBに必要なシャープさ・堅さと相反していた。
     情報を «囲う» ための面（パネル・ボックス・ラベル）は
     ほぼ直角（2〜4px）に統一する。

     ※【重要】クリックできるCTAボタン（.btn / .lp-banner__btn /
       .sim-cta__btn / .float-cta / .partner-band__btn など）の
       丸み（999px のピル型）は «押せる» ことを示す記号なので、
       このトークンとは切り離して現状を維持している。
       ボタン以外でピル型を使っていたラベル・タグ類は角丸を落とした。 */
  --radius: 3px;
  --radius-lg: 4px;
  --ease: cubic-bezier(.25, .8, .35, 1);
}

/* -------------------------------------------------------------
   2. Reset / Base
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* -------------------------------------------------------------
   2b. 日本語の文字組み（サイト全体の共通ルール）

   ＜背景＞
   日本語は英語と違い「単語の区切り」が無いため、ブラウザは既定で
   ほぼ全ての文字間で改行する。その結果
     ・「ノウハウにならない非生産活動」が語中でぶつ切りになる
     ・最終行に「す。」だけが取り残される（泣き別れ／orphan）
   といった、日本語として不自然な文字組みが発生する。

   ＜3層で対策する＞
   ① text-wrap: pretty  … 最終行が極端に短くなる泣き別れを回避する。
                          「す。」だけが次行に落ちる問題はこれで解決。
   ② word-break: auto-phrase … 形態素解析にもとづき文節単位で改行する。
   ③ .nobr（下記ユーティリティ） … ①②が未対応のブラウザ向けの保険。
                          重要フレーズを手動で1かたまりに固定する。

   ①②は新しいCSS機能のため、未対応ブラウザではその宣言だけが無視される
   （＝従来どおりの改行に戻るだけで、レイアウトは壊れない）。
   だから重要箇所は必ず ③ の .nobr も併用すること。
------------------------------------------------------------- */
/* line-break / word-break / text-wrap はいずれも継承プロパティなので、
   body に一度だけ指定すればサイト全体に行き渡る。
   セレクタを列挙する方式だと <a> の中の <span> などが漏れるため、
   継承を使って包括的にかける。 */
body {
  /* 禁則処理を厳格に（小書き仮名・長音記号なども行頭に来ないようにする） */
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 見出しだけは pretty ではなく balance。
   各行の長さを均等に配分し「1行目だけ長く2行目に数文字」を防ぐ。 */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* URLなど極端に長い欧文だけは、はみ出す前に折る */
p, li, dd, td { overflow-wrap: break-word; }

/* 改行させたくないフレーズを包むユーティリティ。
   ＜運用ルール＞
   ・1つの .nobr は最長でも11文字程度に留める（約160px）。
     それ以上の長さを包むと、狭幅端末で横スクロールが発生する。
   ・長いフレーズは「文節ごと」に分割して複数の .nobr で包む。
     例）<span class="nobr">ノウハウにならない</span><span class="nobr">非生産活動</span>
     こうすると文節の内部では折れず、文節の「間」でのみ折れる。 */
.nobr { white-space: nowrap; }

/* スクリーンリーダー専用テキスト。
   外部リンクは「別タブで開く」ことを視覚以外にも伝える必要があるため使用する。 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 外部リンク（別タブ）を示すアイコン。矢印アイコンより一回り小さく置く */
.icon--ext { width: 1em; height: 1em; }

img, svg { max-width: 100%; vertical-align: middle; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.icon { width: 1.2em; height: 1.2em; fill: currentColor; flex-shrink: 0; }

/* ＝＝ コンテナ（左右余白の単一の情報源）＝＝

   ＜改修の意図：スマホで文字が画面端に寄る不具合＞
   旧実装は width: min(100% - 40px, 1120px) で «幅を削って» 余白を作っていた。
   この方式には2つの弱点があった。
     ① min() が効かない環境では余白がゼロになり、文字が画面端に張り付く。
     ② コンテナの «中» に置いたフルブリードの帯（ダークパネル等）へ
        余白が引き継がれない。
   そこで «幅を削る» 方式をやめ、padding で余白を持たせる方式へ変更した。
   box-sizing: border-box なので、内容幅は従来と1pxも変わらない。
   左右余白は --gutter に一元化し、以後はこの変数だけを調整すればよい。 */
:root { --gutter: 20px; }

.container {
  width: 100%;
  max-width: calc(1120px + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
/* 一段大きいコンテナ。左右2カラム（テキスト＋大きなビジュアル）のセクションで、
   ビジュアルを大きく取ってもテキスト側が窮屈にならないようにするためのもの。
   ※乱用すると «サイト全体の縦の通り» が崩れるので、REASON のように
     «横に情報が2つ並ぶ» セクションに限って使う。 */
.container--wide { max-width: calc(1280px + var(--gutter) * 2); }

.sp-only { display: inline; }
@media (min-width: 768px) { .sp-only { display: none; } }

/* -------------------------------------------------------------
   3. Buttons
------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-weight: 700;
  border-radius: 999px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
  overflow: hidden;
}

.btn--cv {
  background: var(--c-cv-grad);
  color: var(--c-white);
  padding: .8em 1.6em;
  font-size: .95rem;
  box-shadow: var(--shadow-cv);
}
.btn--cv:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(242, 92, 5, .45);
  filter: brightness(1.05);
}
.btn--cv:active { transform: translateY(-1px); }

.btn--lg {
  flex-direction: column;
  gap: .1em;
  padding: 1em 3.2em;
  font-size: 1.15rem;
}
.btn--xl {
  flex-direction: column;
  gap: .1em;
  padding: 1.1em 3.4em;
  font-size: 1.2rem;
}
.btn--block { width: 100%; }

.btn__sub {
  font-size: .68em;
  font-weight: 500;
  opacity: .95;
  letter-spacing: .06em;
}

.btn .icon--arrow {
  position: absolute;
  right: 1.1em;
  top: 50%;
  translate: 0 -50%;
  transition: transform .3s var(--ease);
}
.btn:hover .icon--arrow { transform: translateX(4px); }

/* 光沢が走るエフェクト */
.btn--shine::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 40%;
  height: 200%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: skewX(-25deg);
  animation: shine 3.6s var(--ease) infinite;
}
@keyframes shine {
  0%, 60% { left: -80%; }
  100% { left: 160%; }
}

/* -------------------------------------------------------------
   4. Header
------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background .35s, box-shadow .35s;
}
.header.is-scrolled,
.header--solid {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding-inline: 20px;
  max-width: 1280px;
  margin-inline: auto;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* 実ロゴ（E&Nマーク）を白いチップに載せ、写真上でも白背景でも可読に */
.header__logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--c-line);
  padding: 5px;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.header__logo-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.header__logo-company {
  font-weight: 900;
  font-size: .95rem;
  color: var(--c-navy-800);
  white-space: nowrap;
}
.header__logo-tagline {
  font-size: .62rem;
  color: var(--c-text-weak);
  white-space: nowrap;
}

/* Nav (SP: ドロワー) */
.header__nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(82vw, 340px);
  height: calc(100dvh - var(--header-h));
  background: var(--c-navy-900);
  padding: 32px 28px;
  transform: translateX(105%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
}
.header__nav.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

.header__nav-list { display: flex; flex-direction: column; gap: 4px; }
.header__nav-link {
  position: relative;
  display: block;
  padding: 12px 8px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-white);
  transition: color .3s;
}
.header__nav-link::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 6px;
  width: calc(100% - 16px);
  height: 2px;
  background: var(--c-cv-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.header__nav-link:hover::after { transform: scaleX(1); }

.header__cta-sp { margin-top: 28px; }

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

.header__tel { display: none; }

.header__cv { display: none; }

/* Burger */
.header__burger {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
  display: grid;
  place-items: center;
}
.header__burger span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-white);
  translate: -50% 0;
  transition: transform .3s var(--ease), opacity .3s, top .3s var(--ease);
}
.header__burger span:nth-child(1) { top: 15px; }
.header__burger span:nth-child(2) { top: 21px; }
.header__burger span:nth-child(3) { top: 27px; }
.header__burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* -------------------------------------------------------------
   4b. PCヘッダーの横幅設計

   ＜経緯＞
   ナビが6→7項目になり、1024〜1090px と 1200〜1255px の2帯域で
   ナビの必要幅が使える幅を上回っていた。フレックスアイテムは既定で
   縮む（flex-shrink: 1）ため、溢れる代わりに各リンクが縮んで
   テキストが2行に折り返され、ヘッダーが縦に伸びていた。

   ＜対策＞
   ① .header__nav-link に white-space: nowrap を指定し、
      そもそも折り返させない（＝崩れ方を「溢れ」に一本化して検知可能にする）。
   ② 横並びナビの開始位置を 1024px → 1160px に引き上げる。
      1024〜1159px は既存のドロワー（ハンバーガー）に任せる。
      7項目を窮屈に詰め込むより、ドロワーの方が操作性も良い。
   ③ 級数と余白を clamp() で流体化し、ブレークポイントの「段差」で
      急に溢れることが無いようにする。
   ④ 電話番号の表示開始を 1200px → 1320px へ。
      1200px で「電話が出現」と「ナビが拡大」が同時に起き、
      その瞬間だけ 56px 溢れる状態になっていたため、両者を分離した。

   ＜検算（全角=1em, 半角≈0.55em で概算）＞
     1160px: 使える幅 731 / ナビ 599 → 余り +132
     1320px: 使える幅 701 / ナビ 629 → 余り  +72
     1440px: 使える幅 701 / ナビ 660 → 余り  +41
   全域で正の余白を確保している。
------------------------------------------------------------- */

/* ① 折り返し禁止（ドロワー時も含め常時適用） */
.header__nav-link { white-space: nowrap; }

/* ② 1160px から横並びナビへ */
@media (min-width: 1160px) {
  .header__burger { display: none; }
  .header__cta-sp { display: none; }

  .header__nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    transform: none;
    transition: none;
    overflow: visible;
  }
  .header__nav-list {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
  }
  /* ③ 幅に応じて級数・余白をなめらかに変化させる。
     ※「会社情報」の追加でナビが7→8項目になり、上記の検算どおり
       1440px の余り（+41px）を約76px 上回ってロゴと衝突した。
       左右パディングと級数の上限を切り詰めて再び正の余白に戻している。 */
  .header__nav-link {
    padding: 8px clamp(5px, .62vw, 9px);
    font-size: clamp(.74rem, .9vw, .8rem);
    color: var(--c-navy-800);
  }

  .header__cv { display: inline-flex; }
}

/* ④ 電話番号は十分な余裕が生まれる 1320px から。
      電話番号はCTAセクション・フッター・モバイル追従バーにも掲載済み。 */
@media (min-width: 1320px) {
  .header__tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
    color: var(--c-navy-800);
  }
  .header__tel-number {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .header__tel-number .icon { color: var(--c-cv-500); }
  .header__tel-note { font-size: .62rem; opacity: .8; white-space: nowrap; }
}

/* ISOレスキュー専用サイトへの導線（ヘッダーナビ内）。
   外部サイトへ飛ぶ項目なので、他のアンカーリンクと明確に区別する。 */
.header__nav-link--lp {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.header__nav-link--lp::after { display: none; }   /* 共通の下線アニメは使わない */

@media (min-width: 1160px) {
  .header__nav-link--lp {
    margin-left: 6px;
    padding: 6px clamp(8px, .9vw, 12px);
    border-radius: 999px;
    color: var(--c-cv-700);
    background: var(--c-cv-50);
    border: 1px solid var(--c-cv-100);
    font-weight: 900;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .header__nav-link--lp:hover {
    background: var(--c-cv-grad);
    border-color: transparent;
    color: var(--c-white);
  }
}
/* SPドロワー内（ネイビー地）ではオレンジ文字＋枠で見せる */
@media (max-width: 1159px) {
  .header__nav-link--lp {
    margin-top: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 138, .5);
    color: var(--c-cv-300);
    justify-content: center;
  }
}

/* -------------------------------------------------------------
   5. Hero
------------------------------------------------------------- */
/* Heroセクション：背景写真（hero-bg-photo.jpg）のみを表示
   ※CSSは css/ 配下にあるため、画像への相対パスは ../images/ となる */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 36px) 0 64px;
  color: var(--c-navy-900);
  overflow: hidden;
  background-color: var(--c-navy-900); /* 画像読み込み前・失敗時のフォールバック */
  background-image: url("../images/hero-bg-photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ＜削除＞右上の «会社ロゴの透かし»（2026-08 レビュー反映）
   右カラムいっぱいに薄いロゴが敷かれていたため、
     ・料金と実績バッジの «主役» がロゴと視覚的に競合する
     ・背景のヘキサゴン模様と二重のノイズになり、面が濁る
   という2点で、右半分の情報が弱く見えていた。
   透かしを外して面を «空ける» ことで、右カラムの
   「価格」と「訴求ポイント」だけに視線が集まるようにしている。
   （.strength / .service セクションの透かしは、主役が文章のため残置） */

.hero__inner {
  position: relative;
  width: 100%;
  max-width: calc(1240px + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

/* ＜レイアウト＞
   全体センター揃えは廃止。左に「メッセージ＋実績＋CTA」、
   右に「料金体系」を置く非対称2カラム構成に戻す。

   DOM順は content → aside(料金) → actions(実績+CTA) とし、
   スマホでは «見出し → 料金 → 実績 → CTA» と、
   価格のインパクトを浴びてから CTA に着地する自然な流れになる。
   PC ではグリッドエリアで左列に content / actions を積み、
   料金は右列に2行ぶち抜きで配置する。 */
.hero__content { text-align: left; }
.hero__aside { margin-top: 40px; }
.hero__actions { margin-top: 36px; }

@media (min-width: 1024px) {
  .hero__inner {
    display: grid;
    /* 右カラムに «実績バッジ＋料金» の両方を載せたため、
       旧構成（左に実績・右に料金）より右を広く取る。
       左カラムはコピーとCTAだけになり、必要幅が下がった。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr);
    grid-template-areas:
      "content aside"
      "actions aside";
    align-content: center;
    gap: 30px 44px;
  }
  .hero__content { grid-area: content; }
  .hero__actions { grid-area: actions; margin-top: 0; }
  /* 料金は «上端揃え»。align-self: center だと右カラムが沈んで見えるため、
     start で持ち上げたうえで、リード（オレンジのピル）の高さぶんだけ
     下げて左の大見出しと目線を合わせる */
  .hero__aside {
    grid-area: aside;
    align-self: start;
    margin-top: 14px;
  }
}
@media (min-width: 1280px) {
  .hero__inner { gap: 34px 48px; }
}

/* -------------------------------------------------------------
   5a. ファーストビュー右カラム（実績バッジ ＋ 料金体系）

   ＜改修の意図：2026-08 クライアント／同業レビュー＞
   「空間や文字サイズが平坦でメリハリがない（AIっぽい）」という指摘への対応。
   原因は «全部を同じくらい大きく／同じ間隔で» 並べていたことにある。
   4サービスを等価の田の字に並べ、実績バッジも4つ同サイズ——という
   «均等配置» は、テンプレート然とした平坦な印象を生む。

   ＜設計原則：1つだけ振り切る＞
   ① ジャンプ率を «極端» につける。
      主役（ISO・Pマークの月額）の数字は最大 8rem。
      それを支えるラベルは 0.72rem まで落とす。比は約11倍。
      中間の級数（2〜3rem帯）をあえて «作らない» ことで、
      視線が «数字 → ラベル» の順に強制的に落ちる。
   ② 主従をつける。残り3サービスは1行の価格表に圧縮し、
      主役の «添え物» の位置に置く（＝4つを対等に並べない）。
   ③ 余白も «均等にしない»。主役の周りは大きく空け、
      脇役どうしは詰める。空間そのものに強弱をつける。
   ④ 装飾は増やさない。面はガラス1枚、罫はヘアライン、
      アクセントは «上端の1本と単位の〜» のみ。
      グラデーションは面にも文字にも使わない（アクセントバーも単色）。
------------------------------------------------------------- */
/* 数字は下でセル幅基準（cqi）で決まるため、ここの幅がそのまま数字の
   絶対サイズに効く。0.7倍への縮小は cqi 側の係数だけで行いたいので、
   この持ち幅は 640px のまま据え置く（ここも縮めると二重に効いてしまう）。 */
.hero__aside { max-width: 640px; }

/* ＝＝ 訴求ポイント（◎のバッジ）＝＝
   4つ同サイズをやめ、«審査合格率100%» だけを特大にする。
   残り3つは «傍証» として小さく添える。 */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
/* 脇役3つのラッパー。PC では «無いもの» として扱い、
   子の .badge が直接 .hero__badges の flex アイテムになるようにする。
   （＝従来の «4つ横並び» を1行も変えずに維持する）
   スマホでのみ display を上書きして «2行目の3つ» として機能させる。 */
.hero__badges-sub { display: contents; }
.badge__circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 脇役のサイズ。主役（--featured）だけが大きく飛び出す */
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--c-navy-800);
  color: var(--c-white);
  box-shadow: 0 10px 24px rgba(8, 26, 53, .24);
  text-align: center;
}
/* 脇役のバッジは «円１つ» だけ。同系色の内リングは重ねない。
   リングは主役（.badge--featured）のアクセント色のものだけに絞り、
   «リングがある＝主役» という意味を持たせる。 */
.badge__circle::before { content: none; }
.badge__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
}
.badge__num small { font-size: .5em; }
.badge__num--text {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: .92rem;
  line-height: 1.2;
}
.badge__label {
  color: var(--c-sky-300);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ★主役のバッジ：サイズ・色・数字の級数すべてで他と差をつける */
.badge--featured .badge__circle {
  width: 140px;
  height: 140px;
  background: var(--c-navy-900);
  box-shadow: 0 18px 40px rgba(8, 26, 53, .34);
}
.badge--featured .badge__circle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px solid var(--c-cv-500);
}
.badge--featured .badge__num {
  font-size: 3.4rem;
  letter-spacing: -.01em;
}
.badge--featured .badge__num small { font-size: .42em; }
.badge--featured .badge__label {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--c-white);
}

/* ＝＝ 価格表示（2026-08 改訂：箱をやめてタイポグラフィで見せる）＝＝

   ＜経緯＞
   直前の実装ではネイビーで塗りつぶした六角形のエンブレムに
   数字を載せていたが、«重たい／ダサい» というフィードバックを受けた。
   原因は明快で、価格という «一番読ませたい情報» を、
   それより主張の強い図形（濃い面＋六角形の輪郭）で囲ってしまっていたこと。
   図形が主役になり、数字が従になっていた。

   ＜方針：囲わない＞
   ・clip-path（六角形）、ネイビーのベタ塗り、枠線、影、厚いパディングを全廃。
     背景はヒーローの淡い地をそのまま透かす。
   ・そのぶん数字を大きく取り、文字そのものの装飾で主役を立てる。

   ＝＝ さらに 2026-08（第2次）：LP型へ振り切る ＝＝
   «背景に馴染んで price のインパクトが足りない» という指摘への対応。
   タイポグラフィだけでは «上品だが弱い» ため、以下を追加した。

     ① 書体   … Anton（Impact 系の極太コンデンス）に変更。
     ② 二重フチ … 内側に白・外側にネイビー／オレンジの2色アウトライン。
                  3枚重ね（::before ／ 本体 ／ ::after）で作る。
     ③ 塗り   … 単色をやめ、ゴールド系／ブルー系のグラデーション。
                  さらに光の帯を走らせて «キラッ» と光らせる。
     ④ 配置   … 田の字をやめ、下段を半アイテムぶん右へずらした階段状。
     ⑤ 登場   … カウントアップを廃止し、ドーンと飛び出すポップインへ。

   ＜維持したもの＞
   ・クラス名（.hexagon-price 等）。過去の命名をそのまま流用している。
   ・IntersectionObserver で «見えたら動く»（js/counter-up.js）。
------------------------------------------------------------- */
.hero__pricing-area { margin-top: 4px; }

/* 価格エリアの見出し「高品質 × リーズナブル な支援体系」 */
.hero__pricing-lead {
  /* 価格ブロック全体を 0.7 倍に落としたので、見出しも同率で下げる */
  margin-bottom: 21px;
  font-weight: 900;
  font-size: clamp(.91rem, 2.8vw, 1.13rem);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--c-navy-800);
}
.hero__pricing-hi { color: var(--c-navy-900); }
.hero__pricing-x {
  margin: 0 .3em;
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--c-cv-500);
}
.hero__pricing-lo { color: var(--c-sky-600); }
.hero__pricing-tail {
  display: inline-block;
  font-size: .76em;
  font-weight: 700;
  color: var(--c-text-weak);
}

/* ＝＝ 階段状（ジグザグ）レイアウト ＝＝
   «田の字» の2×2は整いすぎて動きが出ない。下段（3・4番目）を
   1アイテムぶんの半分だけ右へずらし、階段状に流れる配置にする。

   ＜実装＞ transform や margin で «ずらす» と右側がはみ出すため、
   グリッド自体を «5等分» し、各アイテムに2列ぶんを割り当てる。
     上段： item1 = 1〜2列 / item2 = 3〜4列（右端の5列目が空く）
     下段： item3 = 2〜3列 / item4 = 4〜5列（左端の1列目が空く）
   ＝ 1列ぶん（アイテム幅の50%）だけ下段が右へずれる。
     はみ出しゼロで «ずらし» が成立する。 */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 14px;
  /* 文字と同率（0.7倍）で詰める。詰めすぎると行同士がぶつかるので、
     縦だけは «文字1個ぶん» 残るところで止めている */
  row-gap: 31px;
}
.hex-grid > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.hex-grid > :nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
.hex-grid > :nth-child(3) { grid-area: 2 / 2 / 3 / 4; }
.hex-grid > :nth-child(4) { grid-area: 2 / 4 / 3 / 6; }

/* 1件ぶんの価格。囲みは無く、左揃えのタイポグラフィだけで構成する。
   container-type を持たせ、数字のサイズを «ビューポート» ではなく
   «このセルの実幅» を基準に決められるようにする（後述の cqi）。 */
.hexagon-price {
  position: relative;
  /* 数字の «はみ出し分» を吸収する余白。
     0 にすると、上の行や隣のブロックに数字が食い込む。 */
  padding: 8px 0 4px;
  background: none;
  border: none;
  box-shadow: none;
  container-type: inline-size;
}

/* 旧・六角形の本体。図形としての性質（切り抜き・塗り・比率）をすべて解除し、
   ただの «縦積みの入れ物» に戻す。 */
.hexagon-price__shape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 文字サイズと同率で詰める */
  gap: 7px;
  width: auto;
  padding: 0;
  text-align: left;
  color: inherit;
  background: none;
  aspect-ratio: auto;
  clip-path: none;
}

/* ① 訴求ラベル：囲みではなく «文字に添える小さなタグ»。
   絶対配置をやめて通常のフローに戻し、行頭に置く。 */
.hexagon-price__appeal {
  position: static;
  translate: none;
  display: inline-block;
  /* 絶対配置をやめて通常のフローに戻したので、
     下の «サービス名» との間隔は margin で取る（数字の巨大化に合わせて微増） */
  margin-bottom: 10px;
  /* パディングは em 指定なので、font-size を下げれば自動で 0.7 倍になる */
  padding: .32em .85em;
  border-radius: 3px;
  background: var(--c-sky-500);
  color: var(--c-white);
  font-size: .71rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.5;
  white-space: nowrap;
}

/* ② サービス名：淡い背景の上で読ませるためネイビー。
   エリア全体 0.7 倍化にあわせて 1.32rem → .92rem。
   数字も同率で落としているので、ジャンプ率（5〜6倍）は維持される。 */
.hexagon-price__label {
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--c-navy-900);
  /* 背景の模様に負けないよう、小さい文字にも白い «下敷き» を敷く。
     文字が小さくなったぶん、にじみ（ぼかし半径）も浅くする */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 4px rgba(255, 255, 255, .8);
}

/* ③④⑤ 金額のロックアップ。
   「月額／制作費」と「万円〜」は、どちらも数字と «横に» 並べない。
   数字が1.5倍になった結果、横に添えると数字の使える幅が半分近く削られ、
   かえって数字を大きくできないため、上下に積む構成にした。
       月額        ← 小見出し
       4           ← 主役（セル幅をフルに使える）
       万円〜      ← 単位
   これで数字は «セル幅いっぱい» まで振り切れる。 */
.hexagon-price__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 【被り対策】サービス名と数字の間の逃げ。0.7倍化に合わせて 22px → 15px */
  margin-top: 15px;
  line-height: 1;
}
/* 「月額」「制作費」＝数字の上の小見出し */
.hexagon-price__from {
  display: block;
  margin-bottom: 4px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  color: var(--c-sky-600);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

/* ============================================================
   ★主役はこの数字。3枚のレイヤーを «同じ文字» で重ねて作る。

     下：::before … 外側のフチ（ネイビー／オレンジの太い縁取り）
     中：要素本体 … 内側のフチ（白の太い縁取り）
     上：::after  … グラデーションの塗り ＋ キラッと走る光

   text-shadow ではなく «重ね» にしている理由：
   background-clip: text で塗ると、text-shadow は塗りの «上» に
   描かれてしまい、グラデーションを影が覆い隠す。
   そこで塗りを最前面の ::after に逃がし、フチは背面の
   ::before と本体テキストが担当する、という分担にしている。

   ::before / ::after の中身は data-num 属性から取る。

   ＜上部が «切れる» 問題への対策＞
   原因は2つあり、両方を潰している。
     ① line-height が 1 未満だと、行ボックスが字面より低くなり、
        Anton の背の高い数字が上へはみ出す。→ .82 から .92 へ戻す。
     ② それ以上に効いていたのが background-clip: text。
        グラデーションは «要素のパディングボックスの中» にしか描かれず、
        ボックスからはみ出した字面の上部は «塗られない»＝切れて見える。
        → 3枚すべてに同じ padding を入れ、字面より一回り大きい
          描画エリアを確保する（絶対配置の2枚も同じ padding を持たせて
          位置をズラさない）。
   ============================================================ */
.hexagon-price__num {
  position: relative;
  display: inline-block;
  font-family: var(--font-price);
  font-weight: 400; /* Anton は 400 単一ウェイト。900 指定は擬似ボールドで汚れる */
  /* ① フォールバック（コンテナクエリ非対応ブラウザ用：ビューポート基準） */
  font-size: clamp(3.78rem, 12.6vw, 5.18rem);
  /* ② セル幅の 57.4% を基準に（旧 82cqi の 0.7 倍）。
        数字を «横に» 何も置かない構成なので、2桁（10／20）でも収まる */
  font-size: clamp(3.78rem, 57.4cqi, 6.72rem);
  line-height: .92;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 字面がはみ出す上下に «描画のりしろ» を確保（切れ／被り対策の本命）。
     em 指定なので font-size 縮小に追随して自動で 0.7 倍になる */
  padding: .16em .04em .06em;
  /* 本体テキスト＝«内側の白いフチ»。塗りは持たせない。
     em のままだと実寸も 0.7 倍になり «線が消える» ため、
     係数側を少し上げて見えの太さを保つ（.032em → .038em） */
  color: transparent;
  -webkit-text-stroke: .038em var(--c-white);
  /* 数字を «浮かせる» ドロップシャドウ。px なので 0.7 倍して浅くする */
  filter: drop-shadow(0 6px 13px rgba(5, 15, 31, .2));
  transform-origin: 0% 78%;
}
.hexagon-price__num::before,
.hexagon-price__num::after {
  content: attr(data-num);
  position: absolute;
  top: 0;
  left: 0;
  /* 本体と同じ padding。絶対配置の基準は本体のパディングボックスなので、
     同じ値を入れることで字面がぴたりと重なる */
  padding: inherit;
  white-space: nowrap;
}
/* 下層：外側のフチ。本体の白フチより «太く» することで、
   白フチのさらに外側にネイビーの輪郭が現れる＝二重アウトライン。
   z-index: -1 で «本体テキストより下» に潜らせるのが要点
   （絶対配置は既定だと本文より上に来てしまい、白フチを塗り潰す）。
   親は filter で stacking context を作っているので外へは抜けない。 */
.hexagon-price__num::before {
  z-index: -1;
  color: transparent;
  /* 内側の白フチ（.038em）より太くして «二重» を成立させる。
     0.7倍化で実寸が細ると輪郭が甘くなるため、係数を .072em → .082em へ。
     白フチとの比（約2.2倍）は維持しているので «二重» の見えは変わらない */
  -webkit-text-stroke: .082em var(--c-navy-950);
}
/* 上層：グラデーションの塗り。
   中央に置いた明るい帯を background-position で走らせて «キラッ» を作る
   （CVボタンの .btn--shine と同じ発想を、文字の塗りで再現している） */
.hexagon-price__num::after {
  z-index: 1;
  -webkit-text-stroke: 0;
  color: transparent;
  /* 文字が巨大になると «帯» も比例して太くなり、光ではなく
     «グラデーションが動いているだけ» に見える。
     そこで明るい帯の幅を 47〜53% に絞り、細くシャープな筋にした。 */
  background-image: linear-gradient(
    104deg,
    var(--c-navy-900) 0%,
    var(--c-navy-800) 34%,
    var(--c-sky-500) 47%,
    #ffffff 50%,
    var(--c-sky-500) 53%,
    var(--c-navy-800) 66%,
    var(--c-navy-900) 100%
  );
  background-size: 220% 100%;
  background-position: 160% 0;
  -webkit-background-clip: text;
          background-clip: text;
  animation: price-shine 4.6s var(--ease) infinite;
}

/* キラッと走る光：一気に流し、残りの時間は止めて «たまに光る» に見せる */
@keyframes price-shine {
  0%        { background-position: 160% 0; }
  32%, 100% { background-position: -60% 0; }
}

/* 「万円」「〜」＝単位。エリア全体の拡大に合わせて上げるが、
   数字との比（＝ジャンプ率）が崩れない範囲に留める */
.hexagon-price__unit {
  display: block;
  margin-top: 3px;
  font-size: .99rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--c-navy-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 4px rgba(255, 255, 255, .8);
}
.hexagon-price__kara {
  margin-left: .08em;
  color: var(--c-cv-600);
}

/* ★主役（ISO・Pマーク）：級数・色・フチのすべてで一段上に置く */
.hexagon-price--primary .hexagon-price__appeal { background: var(--c-cv-500); }
.hexagon-price--primary .hexagon-price__from { color: var(--c-cv-600); }
.hexagon-price--primary .hexagon-price__label { font-size: .99rem; }
.hexagon-price--primary .hexagon-price__unit { font-size: 1.08rem; }
.hexagon-price--primary .hexagon-price__num {
  /* 1桁ぶんの余裕があるので、脇役よりさらに一段振り切る（旧値の 0.7 倍） */
  font-size: clamp(4.48rem, 15.4vw, 6.3rem);
  font-size: clamp(4.48rem, 78.4cqi, 9.1rem);
  filter: drop-shadow(0 7px 17px rgba(191, 87, 0, .3));
}
/* 外側のフチは «濃いオレンジ»。ネイビーより主役感が出る */
.hexagon-price--primary .hexagon-price__num::before {
  -webkit-text-stroke-color: var(--c-cv-700);
}
/* 塗りはゴールド〜オレンジのリッチなグラデーション */
.hexagon-price--primary .hexagon-price__num::after {
  background-image: linear-gradient(
    100deg,
    #c2410c 0%,
    #f77f00 26%,
    #ffc866 42%,
    #fffaf0 50%,
    #ffc866 58%,
    #f77f00 74%,
    #c2410c 100%
  );
}

/* ============================================================
   飛び出してくる登場アニメーション（カウントアップの置き換え）

   js/counter-up.js が IntersectionObserver で
   .hexagon-price に .is-active を付けた瞬間に発火する。
   JS が動かない環境で数字が消えたままにならないよう、
   «初期状態で隠す» 指定は html.js-price-pop が付いている時だけ効かせる。
   ============================================================ */
.js-price-pop .hexagon-price__num {
  opacity: 0;
  transform: scale(0);
}
.js-price-pop .hexagon-price.is-active .hexagon-price__num {
  animation: price-pop .68s cubic-bezier(.22, 1.2, .36, 1) both;
  /* エンブレムごとに少しずつ遅らせ、順番に «ドン・ドン» と出す */
  animation-delay: var(--pop-delay, 0s);
}
@keyframes price-pop {
  0%   { opacity: 0; transform: scale(0) rotate(-10deg); }
  45%  { opacity: 1; transform: scale(1.22) rotate(3deg); }
  68%  { transform: scale(.93) rotate(-1.5deg); }
  85%  { transform: scale(1.04) rotate(.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (min-width: 560px) {
  .hex-grid { column-gap: 17px; row-gap: 36px; }
  .hexagon-price__label { font-size: .98rem; }
  .hexagon-price--primary .hexagon-price__label { font-size: 1.05rem; }
  .hexagon-price__unit { font-size: 1.05rem; }
  .hexagon-price--primary .hexagon-price__unit { font-size: 1.13rem; }
  .hexagon-price__from { font-size: .83rem; }
  .hexagon-price__appeal { font-size: .76rem; }
}

@media (min-width: 1280px) {
  .hex-grid { column-gap: 20px; row-gap: 42px; }
  .hexagon-price { padding-top: 11px; }
  .hexagon-price__amount { margin-top: 18px; }
  .hexagon-price__label { font-size: 1.04rem; }
  .hexagon-price--primary .hexagon-price__label { font-size: 1.12rem; }
  .hexagon-price__unit { font-size: 1.11rem; }
  .hexagon-price--primary .hexagon-price__unit { font-size: 1.2rem; }
  .hexagon-price__from { font-size: .87rem; }
  .hexagon-price__appeal { font-size: .78rem; }
}

/* ============================================================
   〜559px：スマホは «2×2 のタイル» に組み替える

   1カラムの縦積みだと4件で画面を使い切ってしまい、
   «4サービスある» ことがひと目で伝わらなかった。
   2×2 にすると4件が同時に視界へ入り、正方形に近いタイルが
   規則的に並ぶことで «一覧» としての収まりも良くなる。

   ＜PC版から明示的に打ち消しているもの＞
   ・階段配置（5分割グリッドの grid-area 指定）
   ・ずらし（margin-left / padding-left / transform）
   → すべて解除し、2列の等幅グリッドで左揃えに整列させる。

   ＜金額の組み方＞
   1セルの幅が «画面のほぼ半分» に減るため、直前の
   «月額 4 万円〜» の横一列は入らない。PC と同じ縦積み
   （月額／数字／万円〜）に戻し、数字が幅をフルに使えるようにする。
   ============================================================ */
@media (max-width: 559px) {
  /* ＝＝ 実績バッジ：«1行目に100%／2行目に3つ» の2段構成 ＝＝
     4つを1行に並べると、主役の «審査合格率100%» が脇役と同じ列に
     埋もれてしまう。主役だけを独立した行に置いて中央に据え、
     傍証の3つを下の行に均等配置する。 */
  .hero__badges {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
  }
  /* PC では display: contents（＝存在しない扱い）だったラッパーを、
     ここで実体のある flex コンテナに切り替える */
  .hero__badges-sub {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 100%;
    /* 円が3つで最大 3×86px＝258px。左右の «抜け» を含めて 340px に収める */
    max-width: 340px;
    gap: 8px;
  }

  /* ① 2列の等幅グリッド。gap は «縦18px／横14px»。
     横は «列の境目» なので詰め気味、縦は数字の背が高いぶん少し広く取る。 */
  .hex-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    /* 行の高さを «中身なり» にする。stretch のままだと背の低いタイルが
       引き伸ばされ、下に不要な空白が生まれる */
    align-items: start;
    /* ※ justify-items: center / margin-inline: auto は «使えない»。
       どちらもタイル幅を fit-content にするが、.hexagon-price は
       container-type: inline-size のコンテナなので、
       自分の幅を «中身から» 決めることができない（inline-size 封じ込め）。
       結果、幅が 0 に潰れてレイアウトが壊れる。
       そのためタイルはセル幅いっぱいのまま残し、
       «中身» を中央に寄せることで同じ見た目を得る（下の align-items / text-align）。 */
    justify-items: stretch;
  }

  /* ② 階段配置と «ずらし» を完全に解除して左揃えに戻す */
  .hex-grid > :nth-child(1),
  .hex-grid > :nth-child(2),
  .hex-grid > :nth-child(3),
  .hex-grid > :nth-child(4) {
    grid-area: auto;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    transform: none;
  }

  /* ③ タイル内の余白。正方形に近い比率へ寄せるため、上下は最小限にする。
     aspect-ratio: 1 は «中身が収まるなら正方形に» という保険。
     中身のほうが高い場合は自動で伸びるので、文字が切れることはない。 */
  .hexagon-price {
    padding: 2px 0;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* ★中央揃え：タイルはセル幅いっぱいのまま、中身だけを中央に寄せる */
    align-items: center;
    text-align: center;
  }
  .hexagon-price__shape {
    gap: 4px;
    align-items: center;
    text-align: center;
  }

  /* ④ 訴求ラベルはサービス名の直上にコンパクトに寄せる */
  .hexagon-price__appeal {
    margin-bottom: 6px;
    padding: .26em .6em;
    font-size: .66rem;
    letter-spacing: .04em;
  }

  /* ⑤ 金額は縦積み（PC と同じ）。横一列の指定を明示的に戻し、
     «月額／数字／万円〜» の3行を中央で揃える */
  .hexagon-price__amount {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 0;
    margin-top: 7px;
  }
  .hexagon-price__from {
    display: block;
    margin-bottom: 3px;
    font-size: .7rem;
    letter-spacing: .06em;
  }
  .hexagon-price__unit {
    display: block;
    margin-top: 2px;
    font-size: .88rem;
  }

  /* ⑥ 数字はセル幅基準（cqi）なので、2列化で自動的に半分になる。
     係数は «タイルの縦横比が正方形に近づく» ところで決めた（40cqi）。
     これより上げると縦に伸びて長方形のタイルになる。
     横幅は 2桁でもセル幅の40%しか使わないので、溢れは構造的に起きない。
     上限は大きめの端末（〜559px）で伸びしろを残すためのもの。 */
  .hexagon-price__num { font-size: clamp(2.6rem, 40cqi, 5.6rem); }
  .hexagon-price--primary .hexagon-price__num { font-size: clamp(3.2rem, 50cqi, 6.8rem); }

  /* ⑦ サービス名は «ISO・Pマーク取得»（9文字）が基準。
     セル幅が狭いので、1〜2行で収まるところまで絞る */
  .hexagon-price__label { font-size: .82rem; line-height: 1.35; }
  .hexagon-price--primary .hexagon-price__label { font-size: .88rem; }
  .hexagon-price--primary .hexagon-price__unit { font-size: .94rem; }

  /* ⑧ 飛び出しアニメの支点。左揃え前提の 0% だと、中央揃えでは
     数字が «左から» 湧き出て見えるため、中央から膨らむように変える */
  .hexagon-price__num { transform-origin: 50% 78%; }

  /* 見出しまわりも同率で詰める
     （注記 .hero__pricing-note はこの下で定義しているため、
       上書きが効くよう定義の «後ろ» にメディアクエリを置いている） */
  .hero__pricing-lead { margin-bottom: 15px; }
}

/* 料金エリアの下に置く注記。
   ※ここだけ 0.7 倍を適用していない。厳密に掛けると .59rem（約9px）となり、
     本文として読める下限（約11px）を割ってしまうため .72rem で止めた。 */
.hero__pricing-note {
  margin-top: 22px;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--c-navy-700);
}
/* スマホは価格ブロック全体を詰めているので、注記の入り口も浅くする */
@media (max-width: 559px) {
  .hero__pricing-note { margin-top: 16px; }
}

/* ISO・Pマーク基調のオレンジで塗りつぶしたリード（クライアント要望） */
.hero__lead {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(.76rem, 2.4vw, .86rem);
  letter-spacing: .1em;
  color: var(--c-white);
  border: none;
  border-radius: 2px;
  padding: .45em 1.4em;
  margin-bottom: 20px;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
}

/* 見出し：左カラム（≒560px）に収まる範囲で最大限に大きく。
   右カラムの特大数字に負けない «塊» になるよう行間は詰め気味にする */
.hero__title {
  font-size: clamp(2rem, 5.8vw, 3.35rem);
  font-weight: 900;
  line-height: 1.26;
  letter-spacing: .005em;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.hero__title-line { display: block; }
.hero__title em {
  position: relative;
  color: var(--c-blue-400);
  padding: 0 .06em;
  /* 下地のオレンジ帯と白いシャドウがハレーションを起こすため、強調部は影なし */
  text-shadow: none;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .08em;
  height: .28em;
  /* 蛍光ペンの帯。左右で色を変えず単色にする（グラデーションの多用を避ける） */
  background: rgba(247, 127, 0, .8);
  z-index: -1;
  border-radius: 3px;
}

.hero__desc {
  font-size: clamp(.9rem, 2.2vw, 1.05rem);
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 14px;
}
.hero__desc strong { font-weight: 900; color: var(--c-navy-800); }

/* 「建設業以外にも対応」を伝える注記。主張を弱めないよう小さく添える */
.hero__note {
  font-size: .76rem;
  line-height: 1.7;
  color: var(--c-text-weak);
  margin-bottom: 30px;
}

/* ※実績バッジ（◎）のスタイルは「5a. ファーストビュー右カラム」に統合した。
   右カラムの主従設計（主役1つを特大にする）とセットで調整する必要があるため。 */

.hero__cta-note {
  margin-top: 14px;
  font-size: .75rem;
  color: var(--c-text-weak);
}

/* ＝＝ ファーストビューのサブ導線（SCS評価制度ページ）＝＝
   主役の «無料相談» ボタン（オレンジ）と競合しないよう、
   枠線だけの控えめなバーにして «第2の入口» であることを示す。
   FVは写真の上に載るため、白の半透明＋ぼかしで可読性を確保する。 */
.hero__sub-cta {
  margin-top: 16px;
}
.hero__sub-cta-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px);
  color: var(--c-navy-900);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.55;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.hero__sub-cta-link:hover {
  background: var(--c-white);
  border-color: var(--c-sky-500);
  transform: translateY(-2px);
}
.hero__sub-cta-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  font-family: var(--font-num);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--c-white);
  background: var(--c-cv-600);
}
.hero__sub-cta-text { flex: 1; }
.hero__sub-cta-text strong { color: var(--c-sky-700); }
.hero__sub-cta-link .icon--arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: var(--c-sky-600);
}

/* 幅が広がってもバッジを «全部» 大きくしない。
   主役（--featured）だけを伸ばし、脇役はほぼ据え置く。
   こうすると画面が広いほど主従の差が開き、メリハリが強くなる。 */
@media (min-width: 768px) {
  .hero { padding: calc(var(--header-h) + 64px) 0 84px; }
  .hero__badges { gap: 14px; }
  .badge__circle { width: 92px; height: 92px; }
  .badge__num { font-size: 1.6rem; }
  .badge__num--text { font-size: .98rem; }
  .badge__label { font-size: .58rem; }

  .badge--featured .badge__circle { width: 168px; height: 168px; }
  .badge--featured .badge__num { font-size: 4.2rem; }
  .badge--featured .badge__label { font-size: .8rem; }
}

/* 1024〜1279px：この帯だけ右カラムの実寸が狭く、
   «特大バッジ168px ＋ 脇役92px×3» が1行に収まらず折り返してしまう。
   主従の比（およそ1.6倍）は保ったまま、全体を一段だけ縮める。
   ※上の 768px ブロックより «後ろ» に置くこと。同一詳細度では後勝ちのため、
     前に置くと 768px 側の指定に打ち消される。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__badges { gap: 10px; }
  .badge__circle { width: 80px; height: 80px; }
  .badge__num { font-size: 1.4rem; }
  .badge__num--text { font-size: .88rem; }

  .badge--featured .badge__circle { width: 132px; height: 132px; }
  .badge--featured .badge__num { font-size: 3.2rem; }
  .badge--featured .badge__label { font-size: .7rem; }
}

/* -------------------------------------------------------------
   5b. Clients（実績ロゴスライダー / 無限マーキー）
------------------------------------------------------------- */
.clients {
  padding: 56px 0 48px;
  background: var(--c-white);
  overflow: hidden;
}

.clients__lead {
  text-align: center;
  font-size: .92rem;
  color: var(--c-text-weak);
  margin-bottom: 34px;
}
.clients__lead strong { color: var(--c-navy-800); font-weight: 700; }

.clients__marquee {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.marquee {
  position: relative;
  overflow: hidden;
  /* 両端をフェードアウト */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding-right: 20px; /* gap 分（複製トラックとの継ぎ目を揃える） */
}
/* JSでトラックを複製した後、全体を50%移動 → シームレスにループ */
.marquee--rtl .marquee__track { animation: marqueeRtl 42s linear infinite; }
.marquee--ltr .marquee__track { animation: marqueeLtr 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marqueeRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeLtr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.marquee__track li {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 190px;
  height: 76px;
  background: var(--c-sky-50);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
}
.marquee__track img {
  width: 156px;
  height: auto;
  opacity: .85;
}

.clients__caption {
  margin-top: 22px;
  text-align: center;
  font-size: .7rem;
  color: var(--c-text-mute);
}

@media (min-width: 768px) {
  .clients { padding: 72px 0 60px; }
  .marquee__track { gap: 26px; padding-right: 26px; }
  .marquee__track li { width: 216px; height: 84px; }
  .marquee__track img { width: 172px; }
}

/* -------------------------------------------------------------
   6. Section 共通
------------------------------------------------------------- */
/* ＝＝ 縦のリズム ＝＝
   全セクションを同じ余白で刻むと «一定間隔のスクロール» になり、
   どこが章の切れ目なのか分からない＝平坦に見える。
   そこで «通常の章» と «山場（ダーク面の章）» で余白を変え、
   ページ全体に強弱をつける。 */
.section { padding: 76px 0; }
@media (min-width: 768px) { .section { padding: 110px 0; } }

/* 山場（OUR VALUE／CONTACT など、地色が反転する章）は
   前後をさらに大きく空け、«ページが一度息を吸う» ようにする */
.value { padding: 96px 0; }
@media (min-width: 768px) { .value { padding: 150px 0; } }

.section-head { text-align: center; margin-bottom: 48px; }
@media (min-width: 768px) { .section-head { margin-bottom: 68px; } }
.section-head__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .3em;
  color: var(--c-cv-500);
  margin-bottom: 12px;
}
/* ＝＝ 見出しのジャンプ率 ＝＝
   本文 0.9rem に対し、PCで最大 2.9rem（約3.2倍）まで振る。
   ラベル（EN）は逆に 0.76rem まで落とし、上下で挟んで «段差» を作る。 */
.section-head__title {
  font-size: clamp(1.62rem, 5vw, 2.9rem);
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: -.01em;
  color: var(--c-navy-800);
}
.section-head__title em {
  background: linear-gradient(transparent 68%, rgba(247, 127, 0, .3) 68%);
  padding: 0 .05em;
}
.section-head__desc {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--c-text-weak);
}
.section-head--light .section-head__title { color: var(--c-white); }
.section-head--light .section-head__en { color: var(--c-cv-300); }
.section-head--light .section-head__desc { color: rgba(255, 255, 255, .78); }
.section-head--light .section-head__desc strong { color: var(--c-cv-300); font-weight: 900; }
@media (min-width: 768px) { .section-head { margin-bottom: 64px; } }

/* -------------------------------------------------------------
   7. Problem
------------------------------------------------------------- */
.problem {
  background: var(--c-white);
}

/* 解決宣言 */
.problem__answer {
  position: relative;
  margin-top: 72px;
  text-align: center;
  background: var(--c-sky-100);
  border-radius: var(--radius-lg);
  padding: 56px 24px 44px;
  box-shadow: var(--shadow-md);
}
.problem__arrow {
  position: absolute;
  top: -44px;
  left: 50%;
  translate: -50% 0;
  width: 0; height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-top: 30px solid var(--c-cv-500);
  filter: drop-shadow(0 6px 10px rgba(242, 92, 5, .35));
}
.problem__answer-lead {
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-navy-700);
}
.problem__answer-main {
  font-size: clamp(1.5rem, 5.4vw, 2.4rem);
  font-weight: 900;
  color: var(--c-navy-800);
  line-height: 1.5;
  margin: 6px 0 18px;
}
/* 7b. なぜ失敗するのか（サービス資料の 85% / 30時間ロジック）
   ※ 日本語の改行制御は「2b. 日本語の文字組み」に集約している。 */
.why-fail {
  margin-top: 56px;
  /* モバイルの内寸。コンテナの左右余白（--gutter）に加えて
     パネル内側にも 24px を確保し、ダーク面で文字が縁に張り付かないようにする */
  padding: 32px 24px 30px;
  border-radius: var(--radius-lg);
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow-lg);
}
.why-fail__title {
  font-size: clamp(1.2rem, 3.8vw, 1.65rem);
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  color: var(--c-white);
  margin-bottom: 32px;
}
.why-fail__title em { color: var(--c-cv-300); }

.why-fail__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }

.why-fail__label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--c-navy-900);
  background: var(--c-cv-300);
  border-radius: 2px;
  padding: .3em 1.2em;
  margin-bottom: 14px;
}
.why-fail__lead {
  font-size: clamp(1.02rem, 3.2vw, 1.12rem);
  font-weight: 900;
  line-height: 1.7;
  color: var(--c-white);
  margin-bottom: 12px;
}
.why-fail__lead strong { color: var(--c-cv-400); }

.why-fail__text,
.why-fail__stat-desc,
.why-fail__loss-text {
  /* 対応ブラウザでは文節単位で改行（未対応環境では無視される） */
  word-break: auto-phrase;
  line-break: strict;
}
.why-fail__text { font-size: .9rem; line-height: 2; }

/* 85% の数値ブロック（円グラフの代わりにCSSで見せる）
   狭幅では縦積みにして、説明文に十分な行長を確保する */
.why-fail__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 20px 18px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  /* 枠線は廃止。地色（ネイビー）との «明度差» だけで面を分ける */
  background: rgba(255, 255, 255, .08);
}
.why-fail__stat-num {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--c-cv-400);
}
.why-fail__stat-num small { font-size: .45em; }
.why-fail__stat-desc { font-size: .9rem; line-height: 1.85; }
.why-fail__stat-desc strong { color: var(--c-white); font-weight: 900; }

/* 警告枠：フレックスアイテムは「アイコン」と「本文ラッパー」の2つだけにする。
   本文を .why-fail__loss-text で包まないと、地の文と <strong> が
   それぞれ匿名フレックスアイテムに分割され、複数カラムに割れてしまう。 */
.why-fail__loss {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  /* 囲みをやめたので角丸そのものが不要 */
  border-radius: 0;
  /* 旧・レッドの警告色から «アクセント（オレンジ）» へ統一（色数の削減）。
     さらに «塗り＋同系色の枠» の二重表現をやめ、左の縦罫1本に整理した。
     囲うのではなく «傍線を引く» 方が、BtoBの資料的な緊張感に合う。 */
  background: none;
  border: none;
  border-left: 3px solid var(--c-cv-500);
  padding-left: 16px;
}
.why-fail__loss-text {
  flex: 1;
  min-width: 0;          /* フレックスアイテムの縮小を許可し、はみ出しを防ぐ */
  font-size: .88rem;
  line-height: 1.95;
}
.why-fail__loss strong { color: var(--c-cv-300); font-weight: 900; }
.why-fail__loss-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: .35em;     /* 1行目のベースラインに視覚的に揃える */
  border-radius: 50%;
  background: var(--c-cv-500);
  color: var(--c-white);
  font-weight: 900;
  font-size: .8rem;
  line-height: 1;
}

/* 数値と説明文を横並びにできる幅から横組みへ */
@media (min-width: 560px) {
  .why-fail__stat {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
  }
}

@media (min-width: 860px) {
  .why-fail { padding: 48px 48px 44px; }
  .why-fail__grid { grid-template-columns: 1fr 1.12fr; gap: 52px; }
  .why-fail__col:first-child {
    padding-right: 48px;
    border-right: 1px solid rgba(255, 255, 255, .16);
  }
}

.marker { background: linear-gradient(transparent 62%, rgba(247, 127, 0, .35) 62%); }
.problem__answer-desc { font-size: .9rem; color: var(--c-text-weak); }
.problem__answer-desc + .problem__answer-desc { margin-top: .9em; }
.problem__answer-desc strong {
  font-weight: 900;
  color: var(--c-navy-800);
  background: linear-gradient(transparent 70%, rgba(247, 127, 0, .28) 70%);
}


/* -------------------------------------------------------------
   8. Strength / REASON（ライト背景 + ソリッド白カード）

   ＜刷新方針＞
   ・旧デザインの半透明ガラス（backdrop-filter・透ける白カード）を全廃。
     読みやすさ・信頼感を最優先に、ライトな地＋不透明の白カードへ。
   ・ダーク基調は本セクションから外し、直後の Our Value（DX）へ集約。
     これにより「Problem(明)→REASON(明)→Our Value(暗)→Service(明)」と
     明暗のリズムを保ちつつ、REASONは純粋に読ませる面へ役割を絞る。
------------------------------------------------------------- */
.strength {
  position: relative;
  overflow: hidden;
  background: var(--c-sky-50);
  color: var(--c-text);
}
/* 会社ロゴのウォーターマーク（淡いダーク／ライト地に自然に沈める） */
.strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/logo-en-mark.png"); /* 会社ロゴの透かし：差し替える場合はこの3箇所（.hero/.strength/.service）を変更 */
  background-repeat: repeat;
  background-size: 150px auto;
  opacity: .03;
  pointer-events: none;
}
.strength .container { position: relative; z-index: 1; }

.strength__list { display: flex; flex-direction: column; gap: 56px; }

.strength__item {
  position: relative;
  display: grid;
  gap: 18px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 40px 26px 34px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.strength__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.strength__num {
  position: absolute;
  top: -30px;
  left: 18px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--c-cv-400);
  text-shadow: none;
}

.strength__title {
  font-size: clamp(1.2rem, 3.6vw, 1.55rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy-800);
}

/* -- 理由01「現役ISO審査員がマンツーマン指導」を最重要として格上げ --
   競合との決定的な差別化ポイントなので、他の理由と同格に並べず
   オレンジの枠・帯・大きめの級数で明確に序列をつける。 */
.strength__item--featured {
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
  box-shadow: 0 4px 10px rgba(242, 92, 5, .06), 0 20px 48px rgba(242, 92, 5, .14);
}
.strength__item--featured:hover {
  box-shadow: 0 6px 14px rgba(242, 92, 5, .08), 0 28px 60px rgba(242, 92, 5, .2);
}
.strength__flag {
  position: absolute;
  top: -14px;
  right: 20px;
  z-index: 1;
  padding: .35em 1.3em;
  border-radius: 2px;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
  color: var(--c-white);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
}
.strength__title--hero {
  font-size: clamp(1.3rem, 4.4vw, 1.9rem);
  line-height: 1.6;
}
.strength__title--hero em {
  color: var(--c-cv-600);
  background: linear-gradient(transparent 70%, rgba(247, 127, 0, .28) 70%);
}

@media (min-width: 900px) {
  .strength__flag { top: -16px; right: 32px; font-size: .76rem; }
}
.strength__text { font-size: .92rem; color: var(--c-text-weak); }
/* 訴求キーワードは濃紺＋オレンジのマーカーで立たせる（白カード上の可読性重視） */
.strength__text strong {
  color: var(--c-navy-800);
  font-weight: 900;
  background: linear-gradient(transparent 70%, rgba(247, 127, 0, .28) 70%);
}
.strength__tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-cv-600);
}

/* ビジュアル：AIイラストを廃し、アイコン＋CSS図形のメダリオンに統一。
   ネイビー背景にオレンジのリングが映えるBtoB向けの落ち着いた表現 */
/* ＝＝ REASON のビジュアル面（2026-08：3層の重なりを解消）＝＝

   ＜問題＞
   アイコン画像そのものが «純白の地» を持っているのに、
     ① .strength__visual … 淡い水色の面 ＋ 水色の枠線
     ② .strength__icon   … 白い面（角丸）
     ③ 画像の白い地
   と、白 → 水色 → 枠線 が三重に重なり、
   画像の «四角い切り抜き» がくっきり見えてしまっていた。

   ＜対応＞
   囲いの面と画像の地をどちらも «完全な純白（#ffffff）» に揃え、
   枠線を撤去する。これで画像と台座の境界が完全に消え、
   アイコンだけが宙に浮いて見える。
   面の存在は «影» だけで示す（線でも色でも囲わない）。 */
/* ＝＝ 2026-08：«台座» をやめ、カードの枠いっぱいへ ＝＝
   これまでは白い面（padding 26px・影つき）の «上に» 画像を置いていたため、
   カードの中にもう一枚パネルがあるように見え、絵も小さくなっていた。
   差し替え後のイラストは «背景が透過（RGBA）» なので、面そのものを消して
   カードの地の上に直接絵を置ける。囲いをゼロにして、絵をカードの端まで
   引っぱるのが、いちばん «同化» した状態になる。
   ・padding / border / background / box-shadow … すべて撤去
   ・margin のマイナス値でカードの padding を打ち消し、端まで到達させる
   ・端に届く以上、カードの角丸に合わせて自分の角も丸める（overflow: hidden） */
.strength__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  /* カードの padding（40px 26px 34px）の «左右と下» を打ち消す。
     スマホでは画像がカード下端いっぱいまで広がる。 */
  margin: 4px -26px -34px;
  padding: 0 0 16px;
  /* カード（--radius-lg）の下2角に合わせる */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  background-color: transparent;
  border: none;
  box-shadow: none;
}
/* ＝＝ REASON のアイコン（2026-08：フラットデザインの画像へ差し替え）＝＝

   ＜変更前＞オレンジのグラデーション円に白い線画SVGを載せる作り。
     ・グラデーションの円 ＝ 脱AI感の観点で排除したい表現
     ・線画SVG ＝ どの理由も «同じ形の丸» に見え、識別性が低い
   ＜変更後＞ネイビー＋オレンジのフラットアイコン画像（images/icon/）。
     画像自体が白地なので、円で «塗る» のをやめ、
     台座は淡い水色の面 ＋ 直角（角丸4px）に整理した。

   ※画像は差し替え前提。同名・正方形で置き換えればそのまま反映される。 */
.strength__icon {
  position: relative;
  display: grid;
  place-items: center;
  /* ＝＝ 横長イラストを «エリアいっぱい» に置く箱（2026-08）＝＝
     旧アイコンは 1254×1254 の正方形だったため 116px 角で足りていたが、
     差し替え後の絵は 1.4:1 〜 2:1 の横長。幅を目一杯使い、
     高さは aspect-ratio で確保する（＝ img の height:100% が効くようにする）。
     4枚で元画像の比率が違うため、箱の比率を固定して «並びの高さ» を揃える。 */
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  height: auto;
  /* 画像が透過PNGなので、台座は塗らない（カードの地をそのまま見せる）。
     ここに色や角丸を入れた瞬間、絵の «四角い切り抜き» が生まれる。 */
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.strength__icon img {
  width: 100%;
  height: 100%;
  /* イラスト（人物・文字入り）なので cover は不可。
     cover にすると図版の端が切り落とされて意味が壊れるため contain で全体を見せ、
     «幅いっぱいまで拡大» することでダイナミックさを出す。 */
  object-fit: contain;
  transition: transform .5s var(--ease);
}
/* ホバー：面（影）が無くなったので、絵そのものをわずかに寄せて反応を返す */
.strength__item:hover .strength__icon img { transform: scale(1.03); }
/* 旧・線画SVG用の指定（画像へ差し戻す場合に備えて残置） */
.strength__icon svg { width: 46px; height: 46px; fill: var(--c-white); }

.strength__icon-label {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  line-height: 1.6;
  text-align: center;
  color: var(--c-cv-600);
}
.strength__icon-label span {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--c-navy-800);
}
/* ※旧：ホバーで «白い台座» を浮かせる指定があったが、
   台座そのものを撤去したため不要になった。
   ホバーの反応は .strength__icon img の scale(1.03) に一本化している。 */

/* 8b. スリム化実績（サービス資料の実データ）
   ライトな REASON の中で、実データを見せる「証拠パネル」として
   あえてソリッドなダークカードで独立させる（半透明ガラスではない）。 */
.slim {
  position: relative;
  z-index: 1;
  margin-top: 72px;
  padding: 34px 24px 30px;
  border-radius: var(--radius-lg);
  /* 明るいセクションの上に置くダーク面。縁取りは不要（面のコントラストで足りる） */
  background: var(--c-navy-900);
  box-shadow: var(--shadow-lg);
}
/* 既にネイビー地のセクション（.section--dark）に置く場合は枠を外す */
.slim--bare {
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
}

.slim__head { text-align: center; margin-bottom: 26px; }
.slim__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .28em;
  color: var(--c-cv-300);
  margin-bottom: 8px;
}
.slim__title {
  font-size: clamp(1.15rem, 3.8vw, 1.6rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-white);
}
.slim__title em { color: var(--c-cv-400); }
.slim__lead {
  margin-top: 14px;
  font-size: .88rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .85);
}
.slim__lead strong {
  color: var(--c-white);
  font-weight: 900;
  background: linear-gradient(transparent 72%, rgba(247, 127, 0, .45) 72%);
}

.slim__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.slim__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .86rem;
}
.slim__caption {
  caption-side: top;
  text-align: left;
  font-size: .72rem;
  color: rgba(255, 255, 255, .6);
  padding-bottom: 8px;
}
.slim__table th,
.slim__table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: left;
  vertical-align: middle;
}
.slim__table thead th {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .6);
  border-bottom-color: rgba(255, 255, 255, .28);
}
.slim__table tbody th {
  font-weight: 900;
  color: var(--c-white);
  white-space: nowrap;
}
.slim__table tbody th span {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
}
.slim__table tbody tr:last-child th,
.slim__table tbody tr:last-child td { border-bottom: none; }

.slim__before {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  text-decoration: line-through;
  text-decoration-color: var(--c-cv-500);
  text-decoration-thickness: 2px;
}
.slim__arrow { margin: 0 .5em; color: var(--c-cv-300); font-weight: 700; }
.slim__after {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-num);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-cv-400);
  vertical-align: middle;
}
.slim__after small {
  font-family: var(--font-base);
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

/* PCではセル見出し（モバイル専用）を隠す（thead に列見出しがあるため） */
.slim__cell-label { display: none; }

/* 〜767px：スリム化実績も横スクロールを廃し、規格ごとのカードへ */
@media (max-width: 767px) {
  .slim__table-wrap { overflow-x: visible; }
  .slim__table {
    display: block;
    min-width: 0;                 /* 560px の下限を解除 */
  }
  .slim__table thead { display: none; }
  .slim__table tbody { display: block; }

  .slim__table tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 16px 16px 6px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .08);
  }
  .slim__table tbody tr:last-child { margin-bottom: 0; }

  .slim__table tbody th {
    display: block;
    padding: 0 0 12px;
    white-space: normal;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: 1rem;
  }
  .slim__table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 0;
    border-bottom: none;
  }
  .slim__table tbody td + td { border-top: 1px solid rgba(255, 255, 255, .1); }

  .slim__cell-label {
    display: block;
    width: 100%;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
  }
  .slim__caption { padding-bottom: 12px; }
}

.slim__result {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(247, 127, 0, .14);
}
.slim__result-num {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--c-cv-400);
}
.slim__result-num small { font-size: .4em; }
.slim__result-text { font-size: .86rem; line-height: 1.75; color: rgba(255, 255, 255, .85); }
.slim__result-text strong { display: block; color: var(--c-white); font-weight: 900; }

@media (min-width: 900px) {
  .slim { padding: 46px 46px 40px; }
  .slim--bare { padding: 0; }
  .strength__list { gap: 72px; }
  /* ＝＝ 左右バランス（2026-08）＝＝
     旧：1fr + 300px 固定 → コンテナを広げるとテキストだけが伸びて
         ビジュアルが相対的に痩せていく（絵が小さいまま取り残される）。
     新：比率で持つ（テキスト 60% : ビジュアル 40%）。
         コンテナ 1280px・左右 padding 52px・gap 48px なので、
         ビジュアルは実寸およそ 430px 確保できる。 */
  .strength__item {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: 52px 52px 46px;
  }
  .strength__item--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .strength__item--reverse .strength__body { order: 2; }
  .strength__item--reverse .strength__visual { order: 1; }

  .strength__num { font-size: 6rem; top: -44px; left: 28px; }
  /* 画像が左端まで来る --reverse では、左肩の番号がイラストに重なる。
     番号をテキスト側（右肩）へ振って、左右交互のリズムに合わせる。 */
  .strength__item--reverse .strength__num { left: auto; right: 28px; }

  /* ビジュアル面：カードの padding を打ち消して «上・下・外側» の3辺を
     カードの端まで到達させる。内側（テキストとの間）だけ gap 48px が残る。
     高さもカードいっぱいに伸ばしたいので align-self: stretch。 */
  .strength__visual {
    align-self: stretch;
    justify-content: center;
    margin: -52px -52px -46px 0;
    /* 絵は上・外側とも «枠いっぱい»。下だけラベルのぶんを空ける。 */
    padding: 0 0 22px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }
  .strength__item--reverse .strength__visual {
    margin: -52px 0 -46px -52px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  /* 縦にも目一杯使う。親の高さが確定している（stretch）ため、
     flex:1 で残り高さを受け取り、img の height:100% が効く。 */
  .strength__icon {
    flex: 1;
    aspect-ratio: auto;
    min-height: 200px;
  }
  .strength__icon-label { padding-inline: 16px; }
}

/* -------------------------------------------------------------
   8c. Our Value（コンサル×ITによるDX支援 / REASONから分離した独立セクション）

   ＜役割＞
   ・FVから撤去したDX訴求と、REASONから切り離した「認証×IT」の強みを、
     この1セクションへ集約。1メッセージに絞り、余白を大きく取ることで
     認知負荷を下げつつ、独自価値を強く印象づける。
   ・サイト全体のダークアンカーをここへ移設（旧 REASON のネイビーの代替）。
   ・「50%UP」は表組みにせず、数字そのものを主役にしたフラットな表現。
------------------------------------------------------------- */
.value {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-900);
  color: var(--c-white);
}
/* 右上に浮かべていた «光の玉» は削除（AI的な装飾の代表格）。
   index.html 側の <div class="value__glow" aria-hidden="true"> は
   マークアップを触らずに戻せるよう残し、描画だけ止めている。 */
.value__glow { display: none; }
.value .container { position: relative; z-index: 1; }

.value__feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

/* 50%UP：罫線で囲わず、数字そのものを主役にしたフラットな指標 */
.value__metric {
  display: flex;
  align-items: center;
  gap: 20px;
}
.value__metric-num {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(4.6rem, 15vw, 7rem);
  line-height: .88;
  color: var(--c-sky-300);
}
.value__metric-num small { font-size: .3em; }
.value__metric-num small span {
  font-family: var(--font-base);
  font-weight: 900;
  letter-spacing: .04em;
}
.value__metric-cap {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.value__metric-cap strong {
  display: inline-block;
  margin-top: 2px;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--c-sky-300);
}

.value__lead {
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-white);
  margin-bottom: 16px;
}
.value__lead em {
  color: var(--c-sky-300);
  background: linear-gradient(transparent 72%, rgba(47, 144, 216, .38) 72%);
}
.value__text {
  font-size: .92rem;
  line-height: 2;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 22px;
}
.value__text strong {
  color: var(--c-white);
  font-weight: 900;
  background: linear-gradient(transparent 72%, rgba(47, 144, 216, .45) 72%);
}

.value__points { display: flex; flex-direction: column; gap: 12px; }
.value__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}
.value__point strong { color: var(--c-white); font-weight: 900; }
.value__point-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: .12em;
  border-radius: 50%;
  background: var(--c-sky-600);
}
.value__point-icon svg { width: 14px; height: 14px; fill: #fff; }

@media (min-width: 860px) {
  .value__feature {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 56px;
  }
  .value__metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-right: 44px;
    border-right: 1px solid rgba(255, 255, 255, .16);
  }
}

/* -------------------------------------------------------------
   9. Service
------------------------------------------------------------- */
.service {
  position: relative;
  background:
    var(--c-white);
  padding-top: 130px;
  overflow: hidden;
}
/* 会社ロゴのウォーターマーク（大きく1つ／左下ブリード） */
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/logo-en-mark.png"); /* 会社ロゴの透かし：差し替える場合はこの3箇所（.hero/.strength/.service）を変更 */
  background-repeat: no-repeat;
  background-position: left -110px bottom -80px;
  background-size: auto 72%;
  opacity: .04;
  pointer-events: none;
}
.service .container { position: relative; z-index: 1; }

.service__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.service-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.service-card__link { display: flex; flex-direction: column; height: 100%; }

/* -- サムネイル写真 --
   ・aspect-ratio: 16/9 で高さを固定し、4枚のカードで頭を揃える。
     写真の縦横比（1.5〜2.3:1）はバラバラなので、比率を固定しないと
     カードごとに画像高さが変わり、グリッドの行が揃わなくなる。
   ・object-fit: cover で枠を隙間なく埋める。contain だと余白が出て
     写真の色味と地色が二重に見えるため、写真素材では cover が適切。
   ・width/height 属性と aspect-ratio を併記し、読み込み前から
     レイアウトが確定するようにする（CLS対策）。 */
.service-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--c-sky-50);   /* 読み込み前・失敗時のプレースホルダ */
}
.service-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__thumb img { transform: scale(1.05); }

/* 横長パノラマ写真（card-scs.jpg は約2.3:1）は、中央基準で16:9に
   切ると主題（星と指先）が右端で欠けるため、右寄せでトリミングする */
.service-card__thumb--right img { object-position: 100% center; }

/* ラベルが白飛びした写真の上でも読めるよう、上辺に暗いグラデを敷く */
.service-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(8, 26, 53, .5), transparent);
  pointer-events: none;
}

/* Coming Soon のカードは彩度を落として「準備中」を視覚的に示す */
.service-card--soon .service-card__thumb img { filter: saturate(.5) brightness(.95); }

/* -- 価格表示（費用感の明示） -- */
.service-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25em;
  font-weight: 700;
  color: var(--c-cv-600);
  border-radius: var(--radius);
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
  padding: .5em .9em;
}
.service-card__price span { font-size: .82rem; }
.service-card__price strong {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
}
.service-card__price small {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 500;
  color: var(--c-text-weak);
}
.service-card__price--ask,
.service-card__price--soon {
  color: var(--c-navy-700);
  background: var(--c-blue-50);
  border-color: var(--c-blue-100);
}
.service-card__price--ask strong,
.service-card__price--soon strong {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 1.1rem;
}
.service-card__price--soon { color: var(--c-text-weak); }

/* -- ISOカード：オレンジ基調（クライアント要望） -- */
.service-card--iso {
  border: 1px solid var(--c-cv-100);
  box-shadow: 0 2px 4px rgba(242, 92, 5, .06), 0 16px 40px rgba(242, 92, 5, .16);
}
.service-card--iso:hover {
  box-shadow: 0 4px 8px rgba(242, 92, 5, .08), 0 28px 64px rgba(242, 92, 5, .24);
}
.service-card--iso .service-card__title { color: var(--c-cv-700); }
.service-card--iso .service-card__label { background: var(--c-navy-800); }
.service-card--iso .service-card__tags li {
  color: var(--c-cv-700);
  background: var(--c-cv-50);
}

.service-card__label {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-white);
  background: var(--c-navy-700);
  border-radius: 2px;
  padding: .35em 1.1em;
  box-shadow: var(--shadow-sm);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 26px;
  flex: 1;
}
.service-card__title {
  font-size: 1.22rem;
  font-weight: 900;
  color: var(--c-navy-800);
  line-height: 1.5;
}
/* サービスブランド名（ISOレスキュー） */
.service-card__brandname {
  display: inline-block;
  margin-top: 2px;
  font-size: .84em;
  color: var(--c-cv-600);
}
/* 正式名称のサブライン（SCS評価制度など、長い制度名を小さく併記する） */
.service-card__fullname {
  display: block;
  margin-top: 5px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text-weak);
}

/* カード本文の前に置く差別化リード（ISOカードの最重要訴求） */
.service-card__lead {
  font-size: .92rem;
  font-weight: 900;
  line-height: 1.7;
  color: var(--c-cv-700);
  background: var(--c-cv-50);
  border-left: 3px solid var(--c-cv-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .7em .9em;
}

.service-card__text { font-size: .88rem; color: var(--c-text-weak); flex: 1; }
.service-card__text strong {
  font-weight: 900;
  color: var(--c-navy-800);
  background: linear-gradient(transparent 70%, rgba(247, 127, 0, .28) 70%);
}

.service-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-card__tags li {
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-navy-600);
  background: var(--c-blue-50);
  border-radius: 2px;
  padding: .25em 1em;
}

.service-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  align-self: flex-end;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-cv-600);
}
.service-card__more .icon--arrow { transition: transform .3s var(--ease); }
.service-card:hover .service-card__more .icon--arrow { transform: translateX(4px); }
.service-card__more--soon { color: var(--c-text-weak); }

/* Coming Soon 帯 */
.service-card--soon:hover { transform: none; box-shadow: var(--shadow-md); }
.service-card--soon:hover .service-card__thumb img { transform: none; }
.service-card__ribbon {
  position: absolute;
  top: 22px;
  right: -44px;
  z-index: 2;
  transform: rotate(45deg);
  background: var(--c-cv-grad);
  color: var(--c-white);
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: .4em 3.4em;
  box-shadow: var(--shadow-cv);
}

@media (min-width: 768px) {
  .service__grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

/* 下層ページ CTA 内の「専用サイトはこちら」導線。
   無料相談ボタン（オレンジ塗り）とぶつからないよう、
   白地＋オレンジ枠のセカンダリとして配置する。 */
.cta__lp {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  text-align: center;
}
.cta__lp-text {
  font-size: .86rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 16px;
}
.cta__lp-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: .76rem;
  color: rgba(255, 255, 255, .68);
}
/* ISO / SCS の2導線を並べるラッパー。
   SPは縦積み（1カラム）、700px以上で横並び。
   align-items: stretch により、ロゴ画像とテキストマークで
   中身の高さが違っても2つのボタンは同じ高さに揃う。 */
.cta__lp-btns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 700px) {
  .cta__lp-btns {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .cta__lp-btns .cta__lp-btn {
    flex: 1 1 300px;
    max-width: 360px;
  }
}

.cta__lp-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 2px solid var(--c-cv-500);
  box-shadow: 0 10px 26px rgba(8, 26, 53, .28);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.cta__lp-btn:hover {
  transform: translateY(-3px);
  background: var(--c-cv-50);
  box-shadow: 0 18px 40px rgba(242, 92, 5, .32);
}
.cta__lp-logo { width: min(60vw, 190px); height: auto; }

/* SCS側には専用ロゴが無いため、ISOレスキューのロゴ（190×63px）と
   同等の «塊» に見えるテキストマークを組んで、2ボタンの体裁を揃える。 */
.cta__lp-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 63px;
}
.cta__lp-mark strong {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-cv-600);
}
.cta__lp-mark span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--c-navy-800);
}

.cta__lp-btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.5;
  text-align: center;
  color: var(--c-cv-600);
}

/* -------------------------------------------------------------
   9c. ISOレスキュー専用サイトへの誘導バナー（全幅／オレンジ基調）

   ・price-band と同じく「全幅の帯」だが、あちらはフラットな情報バー、
     こちらはクリックさせるためのCVパネルなので、
     斜めストライプ＋大きなボタンでコントラストを付けている。
   ・角丸をなぞる縁取りに見えないよう、帯自体は角丸なしの長方形。
------------------------------------------------------------- */
.lp-banner {
  position: relative;
  overflow: hidden;
  padding: 52px 0;
  /* 帯はアクセント単色。奥行きは斜めストライプ（::before）だけで出す */
  background: var(--c-cv-500);
  color: var(--c-white);
}
/* 斜めストライプ（CSS図形のみ） */
.lp-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .07) 0 2px,
    transparent 2px 16px
  );
  pointer-events: none;
}
/* 背景に大きく敷くロゴの透かし */
.lp-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/logo-en-mark.png");
  background-repeat: no-repeat;
  background-position: left -70px center;
  background-size: auto 150%;
  filter: brightness(0) invert(1);
  opacity: .07;
  pointer-events: none;
}
.lp-banner .container { position: relative; z-index: 1; }

.lp-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}

.lp-banner__logo {
  width: min(70%, 240px);
  height: auto;
}

.lp-banner__label {
  display: inline-block;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--c-cv-700);
  background: var(--c-white);
  border-radius: 2px;
  padding: .3em 1.3em;
  margin-bottom: 14px;
}
.lp-banner__title {
  font-size: clamp(1.3rem, 4.6vw, 2.05rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--c-white);
}
.lp-banner__title em {
  /* 白帯に濃いオレンジ文字で「ISOレスキュー」を強調 */
  display: inline-block;
  padding: 0 .3em;
  background: var(--c-white);
  color: var(--c-cv-600);
  border-radius: 4px;
}
.lp-banner__desc {
  margin-top: 16px;
  font-size: clamp(.88rem, 2.4vw, .98rem);
  line-height: 2;
  color: rgba(255, 255, 255, .95);
}

.lp-banner__btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15em;
  padding: 1.05em 3.6em;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-cv-600);
  font-size: clamp(1rem, 3.2vw, 1.18rem);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(120, 45, 0, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-banner__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(120, 45, 0, .42);
}
.lp-banner__btn:active { transform: translateY(-1px); }
.lp-banner__btn-sub {
  font-size: .66em;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-weak);
}
.lp-banner__btn-main { display: inline-flex; align-items: center; gap: .4em; }
.lp-banner__btn .icon--ext { color: var(--c-cv-500); }

.lp-banner__note {
  font-size: .76rem;
  color: rgba(255, 255, 255, .9);
}

@media (min-width: 900px) {
  .lp-banner { padding: 64px 0; }
  .lp-banner__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    text-align: left;
  }
  .lp-banner__body { flex: 1; }
  .lp-banner__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
}

/* 9b. 見積シミュレーターへの導線バナー（estimate/ へ遷移） */
.sim-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  border: 1px solid var(--c-cv-100);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sim-cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(242, 92, 5, .08), 0 28px 64px rgba(242, 92, 5, .22);
}
.sim-cta__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
}
.sim-cta__icon svg { width: 32px; height: 32px; fill: #fff; }

.sim-cta__body { display: flex; flex-direction: column; gap: 4px; }
.sim-cta__label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--c-cv-600);
}
.sim-cta__title {
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--c-navy-800);
}
.sim-cta__note { font-size: .72rem; color: var(--c-text-weak); }

.sim-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .4em;
  padding: .85em 3.2em .85em 1.8em;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
  transition: box-shadow .3s var(--ease);
}
.sim-cta:hover .sim-cta__btn { box-shadow: 0 14px 30px rgba(242, 92, 5, .45); }
.sim-cta__btn .icon--arrow {
  position: absolute;
  right: 1.1em;
  top: 50%;
  translate: 0 -50%;
  transition: transform .3s var(--ease);
}
.sim-cta:hover .sim-cta__btn .icon--arrow { transform: translateX(4px); }

@media (min-width: 768px) {
  .sim-cta {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 24px;
    padding: 28px 32px;
  }
  .sim-cta__body { flex: 1; }
}

/* -------------------------------------------------------------
   10. Comparison
------------------------------------------------------------- */
.comparison { background: var(--c-blue-50); }

.comparison__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--c-white);
}

.comparison__table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .85rem;
  line-height: 1.6;
}

.comparison__table thead th {
  padding: 18px 14px;
  text-align: center;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-navy-700);
  border-right: 1px solid rgba(255, 255, 255, .15);
  font-size: .88rem;
}
.comparison__table thead th:first-child { border-radius: 0; background: var(--c-navy-800); }
.comparison__table thead th:last-child { border-right: none; }

.comparison__head-us {
  position: relative;
  background: var(--c-cv-grad) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}
.comparison__crown {
  display: block;
  margin: 0 auto 2px;
}
.comparison__crown svg { width: 22px; height: 22px; fill: var(--c-cv-300); }

.comparison__table tbody th {
  padding: 16px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--c-navy-800);
  background: var(--c-blue-100);
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
  width: 160px;
}
.comparison__table tbody td {
  padding: 16px 14px;
  text-align: center;
  border-bottom: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  vertical-align: middle;
  color: var(--c-text-weak);
}
.comparison__table tbody td:last-child { border-right: none; }
.comparison__table tbody tr:last-child th,
.comparison__table tbody tr:last-child td { border-bottom: none; }

/* 自社列のハイライト（背景トーンのみで上品に強調） */
.comparison__us {
  position: relative;
  background: var(--c-cv-50) !important;
  color: var(--c-text) !important;
  font-weight: 700;
}

.mark {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--c-blue-400);
}
.mark--best { color: var(--c-cv-500); font-size: 1.8rem; }
.mark--bad { color: var(--c-text-mute); }
.comparison__note { display: block; font-size: .74rem; line-height: 1.5; }

.comparison__caption {
  margin-top: 14px;
  font-size: .74rem;
  color: var(--c-text-weak);
  text-align: right;
}

/* PCでは各セルの見出しラベル（モバイル専用）を隠す。
   thead に列見出しがあるため重複するだけになる。 */
.comparison__who { display: none; }

/* -------------------------------------------------------------
   10b. Comparison（〜767px）：横スクロールを廃し、項目ごとのカードへ

   ＜方針＞
   ・HTMLは1つのまま、CSSだけでカード表示に組み替える。
     モバイル用の別マークアップを持つと、内容の二重管理になり
     読み上げの重複やSEO上の重複も生むため採らない。
   ・列見出し（thead）はモバイルでは非表示にする代わりに、
     各セル内の .comparison__who（DOM上の実テキスト）で誰の評価かを示す。
     CSSの content: attr() は支援技術での読み上げが不安定なため、
     生成コンテンツではなく実DOMに置いている。
   ・1項目 = 1カード、カード内は「当社 → 他社 → 自社取得」の順。
     当社の行にオレンジの左罫と地色を敷き、優位性が一目で分かるようにする。
   ・◎○△× を左の固定幅カラムに揃え、縦にスキャンできるようにしている。
------------------------------------------------------------- */
@media (max-width: 767px) {
  .comparison__scroll {
    overflow-x: visible;          /* 横スクロールを廃止 */
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .comparison__table {
    display: block;
    min-width: 0;                 /* 720px の下限を解除 */
    font-size: 1rem;
  }
  .comparison__table thead { display: none; }
  .comparison__table tbody { display: block; }

  /* 1項目 = 1カード */
  .comparison__table tbody tr {
    display: block;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .comparison__table tbody tr:last-child { margin-bottom: 0; }

  /* カード見出し＝比較項目 */
  .comparison__table tbody th {
    display: block;
    width: auto;
    white-space: normal;
    padding: 13px 16px;
    background: var(--c-navy-800);
    color: var(--c-white);
    font-size: .95rem;
    border-bottom: none;
  }

  /* 各選択肢の行：[評価マーク][ラベル＋補足] の2カラム */
  .comparison__table tbody td {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    padding: 13px 16px;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--c-line);
  }
  .comparison__table tbody tr:last-child td { border-bottom: 1px solid var(--c-line); }
  .comparison__table tbody td:last-child { border-bottom: none !important; }

  .mark {
    grid-column: 1;
    grid-row: 1 / span 2;
    text-align: center;
    font-size: 1.9rem;
  }
  .mark--best { font-size: 2.1rem; }

  .comparison__who {
    display: block;
    grid-column: 2;
    grid-row: 1;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.5;
    color: var(--c-navy-800);
  }
  .comparison__note {
    grid-column: 2;
    grid-row: 2;
    font-size: .8rem;
    line-height: 1.7;
  }
  /* 表の狭い列に合わせて入れていた強制改行は、カード表示では不要 */
  .comparison__note br { display: none; }

  /* 当社の行を強調 */
  .comparison__us {
    border-left: 4px solid var(--c-cv-500);
    background: var(--c-cv-50) !important;
  }
  .comparison__us .comparison__who { color: var(--c-cv-700); }

  .comparison__caption { text-align: left; margin-top: 16px; }
}

/* -------------------------------------------------------------
   11. Voice
------------------------------------------------------------- */
.voice {
  background:
    var(--c-white);
}

.voice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.voice-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.voice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

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

.voice-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.voice-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.voice-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.tag {
  font-size: .66rem;
  font-weight: 700;
  color: var(--c-text-weak);
  background: var(--c-blue-50);
  border-radius: 2px;
  padding: .2em .75em;
}
.tag--industry { color: var(--c-white); background: var(--c-navy-600); }
.tag--it { background: var(--c-sky-700); }
.tag--const { background: var(--c-cv-700); }

.voice-card__name { font-size: .78rem; font-weight: 700; color: var(--c-text-weak); }

.voice-card__title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-navy-800);
  line-height: 1.6;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-blue-100);
}
.voice-card__text { font-size: .85rem; color: var(--c-text-weak); }

@media (min-width: 900px) {
  .voice__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* -------------------------------------------------------------
   12. Flow
------------------------------------------------------------- */
.flow { background: var(--c-blue-50); }

/* -------------------------------------------------------------
   12b. Blog & Column（トップページの記事一覧）

   ＜将来のCMS化を見据えた構造＞
   .blog-card 1枚＝1記事のループ単位。PHP動的化・AIによる自動更新の際は
   .blog__grid の中身を «カード1枚ぶん» のテンプレートで回すだけで済むよう、
   カード単体で完結するスタイルにしてある（親の nth-child 等に依存しない）。

   ＜脱AI感のルール＞
   ・角丸は --radius（3px）まで。サムネイルも «四角» を保つ。
   ・浮きは -4px、画像の拡大は 1.03 倍まで。大きく動かすと «テンプレ感» が出る。
   ・色はネイビー（文字）／水色（罫線・カテゴリ）／オレンジ（日付・矢印）の3系統のみ。
------------------------------------------------------------- */
.blog { background: var(--c-white); }

.blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.blog-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-sky-300);
  box-shadow: var(--shadow-md);
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

/* サムネイル：比率を 16:10 に固定して «高さのそろった» グリッドにする */
.blog-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-sky-50);
}
.blog-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.blog-card:hover .blog-card__thumb img { transform: scale(1.03); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 18px 20px;
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 日付：数字書体＋アクセント色で «更新されている感» を出す */
.blog-card__date {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--c-cv-600);
}

.blog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
}
/* カテゴリは .tag（Voice と共通）を流用。ブログでは水色寄りの配色にする */
.blog-card__tags .tag { background: var(--c-sky-100); color: var(--c-sky-700); }
.blog-card__tags .tag--cat { background: var(--c-navy-600); color: var(--c-white); }

.blog-card__title {
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-navy-800);
  transition: color .3s var(--ease);
}
.blog-card:hover .blog-card__title { color: var(--c-sky-700); }

/* 抜粋：2行で打ち切り（…）。CMS化後も本文の長さに左右されない */
.blog-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--c-text-weak);
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-sky-100);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-sky-700);
}
.blog-card__more .icon {
  width: 15px;
  height: 15px;
  fill: var(--c-cv-500);
  transition: transform .3s var(--ease);
}
.blog-card:hover .blog-card__more .icon { transform: translateX(3px); }

.blog__foot { margin-top: 40px; text-align: center; }

/* -- スマホ（〜559px）：縦に積むぶん、カード間の余白を詰めて «一覧» に見せる -- */
@media (max-width: 559px) {
  .blog__grid { row-gap: 16px; }
  .blog-card__body { padding: 15px 15px 17px; }
  .blog-card__title { font-size: .94rem; }
  .blog__foot { margin-top: 28px; }
  .blog__foot .btn { width: 100%; }
}

@media (min-width: 560px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .blog__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* -------------------------------------------------------------
   13. FAQ
------------------------------------------------------------- */
.faq { background: var(--c-white); }

.faq__list { display: flex; flex-direction: column; gap: 14px; }

.faq__item {
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .3s var(--ease);
}
.faq__item:hover, .faq__item[open] { box-shadow: var(--shadow-md); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-navy-800);
}
.faq__q-mark, .faq__a-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.faq__q-mark { background: var(--c-navy-700); color: var(--c-white); }
.faq__a-mark { background: var(--c-cv-grad); color: var(--c-white); }

.faq__q-text { flex: 1; line-height: 1.6; }

.faq__toggle {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.faq__toggle::before, .faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-cv-500);
  translate: -50% -50%;
  transition: rotate .3s var(--ease);
}
.faq__toggle::after { rotate: 90deg; }
.faq__item[open] .faq__toggle::after { rotate: 0deg; }

.faq__a {
  display: flex;
  gap: 14px;
  padding: 4px 20px 20px;
}
.faq__a p { font-size: .88rem; color: var(--c-text-weak); padding-top: 4px; }

/* -------------------------------------------------------------
   14. Closing CTA
------------------------------------------------------------- */
.cta {
  position: relative;
  padding: 90px 0 100px;
  color: var(--c-white);
  overflow: hidden;
}
.cta__bg {
  position: absolute;
  inset: 0;
  background: var(--c-navy-900);
}
.cta__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}

.cta__inner { position: relative; text-align: center; }
.cta__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .28em;
  color: var(--c-cv-300);
  margin-bottom: 12px;
}
.cta__title {
  font-size: clamp(1.6rem, 5.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 18px;
}
.cta__desc {
  font-size: .92rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 44px;
}

.cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.cta__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* 塗りと枠の二重表現をやめ、背景は透明にして枠だけで成立させる */
  background: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-lg);
  padding: 18px 44px;
  transition: background .3s, transform .3s var(--ease);
}
.cta__tel:hover { background: rgba(255, 255, 255, .12); transform: translateY(-3px); }
.cta__tel-label { font-size: .74rem; font-weight: 700; color: var(--c-cv-300); }
.cta__tel-number {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: .03em;
  line-height: 1.2;
}
.cta__tel-number .icon { color: var(--c-cv-500); width: .8em; height: .8em; }
.cta__tel-note { font-size: .7rem; color: rgba(255, 255, 255, .7); }

.cta__note { margin-top: 26px; font-size: .75rem; color: rgba(255, 255, 255, .65); }

@media (min-width: 900px) {
  .cta { padding: 120px 0 130px; }
  .cta__buttons { flex-direction: row; justify-content: center; align-items: stretch; gap: 28px; }
  .cta__tel { justify-content: center; }
}

/* -------------------------------------------------------------
   15. Footer
------------------------------------------------------------- */
.footer {
  background: var(--c-navy-950);
  color: rgba(255, 255, 255, .8);
  padding: 56px 0 90px;
  font-size: .85rem;
}

.footer__grid { display: grid; gap: 36px; }

.footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--c-white);
  margin-bottom: 8px;
}
/* 実ロゴ（E&Nマーク）を白抜きにして暗いフッターに載せる */
.footer__logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .92;
}
.footer__tagline { font-size: .78rem; color: rgba(255, 255, 255, .55); margin-bottom: 20px; }

.footer__info div { display: flex; gap: 12px; margin-bottom: 6px; }
.footer__info dt {
  flex-shrink: 0;
  width: 72px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  padding-top: .15em;
}
.footer__info dd { font-size: .82rem; }
.footer__info a { text-decoration: underline; text-underline-offset: 3px; }

.footer__nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer__nav a {
  display: inline-block;
  padding: 4px 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .7);
  transition: color .3s;
}
.footer__nav a:hover { color: var(--c-white); }

/* フッターナビ内の専用サイト導線（外部リンクなので色で区別する） */
.footer__nav-lp {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--c-cv-300) !important;
  font-weight: 700;
}
.footer__nav-lp:hover { color: var(--c-cv-400) !important; }

.footer__copy {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  font-size: .72rem;
  color: rgba(255, 255, 255, .45);
}

@media (min-width: 900px) {
  .footer { padding-bottom: 56px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .footer__nav ul { flex-direction: column; gap: 2px; }
}

/* -------------------------------------------------------------
   16. 追従CTA（モバイル）・ページトップ
------------------------------------------------------------- */
.fixed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 1px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(8, 26, 53, .92);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.fixed-cta.is-visible { transform: translateY(0); }

.fixed-cta__tel, .fixed-cta__mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 10px;
  padding: 12px 8px;
  color: var(--c-white);
}
.fixed-cta__tel {
  flex: 1;
  /* 塗りがあるので枠線は重ねない */
  background: var(--c-navy-600);
}
.fixed-cta__mail {
  flex: 1.5;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
}

/* 追従CTAを消すのは、ヘッダー内に「無料相談」ボタン（.header__cv）が
   現れる 1160px から。1024px で消すと 1024〜1159px の帯域だけ
   常時表示のCVボタンが画面から消えてしまうため、切替点を揃えている。 */
@media (min-width: 1160px) { .fixed-cta { display: none; } }

.to-top {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(8, 26, 53, .85);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-navy-600); }
@media (min-width: 1024px) { .to-top { bottom: 28px; right: 28px; } }

/* -------------------------------------------------------------
   17. Scroll Reveal（IntersectionObserverで .is-inview 付与）
------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-inview { opacity: 1; transform: translateY(0); }

.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }
.delay-3 { transition-delay: .36s; }
.delay-4 { transition-delay: .48s; }

/* -------------------------------------------------------------
   18. 下層ページ共通（services/ 配下）
------------------------------------------------------------- */
/* ページヒーロー：ネイビーグラデーションのコンパクトなファーストビュー */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 64px) 0 64px;
  color: var(--c-white);
  overflow: hidden;
  background: var(--c-navy-900);
}
/* 旧「グリーン版」ページヒーロー。
   パレット整理（ベース＝ネイビー／メイン＝水色／アクセント＝オレンジ）に伴い、
   グリーンは廃止してベースカラーのバリエーションへ統合した。
   クラス名は各ページのHTMLで使われているため残している。 */
.page-hero--green {
  background: var(--c-navy-800);
}

/* ページ別の背景写真：グラデーションを重ねず、写真そのものを表示する */
.page-hero--iso {
  background: url("../images/page-bg-iso.jpg") center / cover no-repeat;
}
.page-hero--scs {
  background: url("../images/page-bg-scs.jpg") center / cover no-repeat;
}
.page-hero--itdev {
  background: url("../images/page-bg-itdev.jpg") center / cover no-repeat;
}

/* 明るい背景写真のページ（iso / scs / it-dev）は、文字を濃色に反転して可読性を確保。
   ダーク背景の tool ページは対象外（白文字のまま） */
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) { color: var(--c-navy-900); }

:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .page-hero__title {
  color: var(--c-navy-900);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .page-hero__en {
  color: var(--c-cv-600);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .page-hero__lead {
  color: var(--c-text);
}

/* パンくずリスト：濃グレー基調＋リンクはネイビー */
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .breadcrumb {
  color: var(--c-text-weak);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .breadcrumb a {
  color: var(--c-navy-700);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .breadcrumb a:hover {
  color: var(--c-cv-600);
}

/* 実績チップ：白地＋ソフトシャドウの引き締まったカードに変更 */
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .stat-chip {
  background: var(--c-white);
  box-shadow: var(--shadow-md);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .stat-chip__num {
  color: var(--c-cv-600);
}
:is(.page-hero--iso, .page-hero--scs, .page-hero--itdev) .stat-chip__label {
  color: var(--c-text-weak);
}
.page-hero--tool {
  background:
    linear-gradient(100deg, rgba(5, 15, 34, .82) 0%, rgba(6, 19, 41, .55) 55%, rgba(6, 19, 41, .28) 100%),
    url("../images/page-bg-tool.jpg") center / cover no-repeat;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em;
  font-size: .72rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 26px;
}
.breadcrumb a { color: rgba(255, 255, 255, .8); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.page-hero__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .28em;
  color: var(--c-cv-300);
  margin-bottom: 10px;
}
.page-hero__title {
  font-size: clamp(1.7rem, 4.8vw, 2.7rem);
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 16px;
}
/* 制度の正式名称を、見出しの上に小さく添える（正式名称→通称の順で認知させる） */
.page-hero__fullname {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(.82rem, 2.2vw, 1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--c-cv-300);
}
.page-hero__lead {
  max-width: 720px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
}

/* ヒーロー下部の実績チップ */
.page-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 132px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px);
}
.stat-chip__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--c-cv-300);
}
.stat-chip__num small { font-size: .55em; }
.stat-chip__label { font-size: .68rem; font-weight: 700; color: rgba(255, 255, 255, .85); }

/* Coming Soon フラグ */
.soon-flag {
  display: inline-block;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .22em;
  color: var(--c-white);
  background: var(--c-cv-grad);
  border-radius: 2px;
  padding: .45em 1.6em;
  margin-bottom: 20px;
  box-shadow: var(--shadow-cv);
}

/* 対応規格などのチップ列 */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  font-weight: 700;
  font-size: .85rem;
  color: var(--c-navy-700);
  background: var(--c-white);
  border-radius: 2px;
  padding: .5em 1.4em;
  box-shadow: var(--shadow-sm);
}

/* 汎用の特徴カード */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.feature-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.feature-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 4px;
  background: var(--c-sky-100);
  margin-bottom: 16px;
}
.feature-card__icon svg { width: 30px; height: 30px; fill: var(--c-navy-600); }
.feature-card__title {
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--c-navy-800);
  line-height: 1.55;
  margin-bottom: 10px;
}
.feature-card__text { font-size: .88rem; color: var(--c-text-weak); }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (min-width: 1024px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* 料金プラン */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 38px 30px 32px;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-white);
  background: var(--c-cv-grad);
  border-radius: 2px;
  padding: .4em 1.5em;
  box-shadow: var(--shadow-cv);
}
.pricing-card--featured { background: var(--c-cv-50); }

.pricing-card__plan {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .18em;
  color: var(--c-cv-600);
}
.pricing-card__name {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--c-navy-800);
  line-height: 1.4;
}
.pricing-card__price {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--c-navy-800);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-blue-100);
}
.pricing-card__price small { font-size: .38em; font-weight: 700; font-family: var(--font-base); color: var(--c-text-weak); }
.pricing-card__desc { font-size: .85rem; color: var(--c-text-weak); }
.pricing-card__list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pricing-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: .86rem;
  font-weight: 500;
}
.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-cv-500);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.3-4.3 1.7-1.7 2.6 2.6 5.8-5.8 1.7 1.7-7.5 7.5z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.6-4.3-4.3 1.7-1.7 2.6 2.6 5.8-5.8 1.7 1.7-7.5 7.5z"/></svg>') center / contain no-repeat;
}
.pricing-card .btn { margin-top: 18px; }
.pricing__note { margin-top: 20px; text-align: center; font-size: .78rem; color: var(--c-text-weak); line-height: 1.9; }
.pricing__note strong { color: var(--c-cv-700); font-weight: 900; }

/* 18b. 初回取得プラン（新規認証フルプラン）の横長カード */
.pricing-lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-lg);
}
.pricing-lead__label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--c-navy-900);
  background: var(--c-cv-300);
  border-radius: 2px;
  padding: .2em 1.1em;
  margin-bottom: 10px;
}
.pricing-lead__name {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 900;
  color: var(--c-white);
  margin-bottom: 10px;
}
.pricing-lead__desc { font-size: .86rem; line-height: 1.85; }

.pricing-lead__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .08);
  text-align: center;
}
.pricing-lead__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1.05;
  color: var(--c-cv-400);
}
.pricing-lead__unit { font-size: 1.1rem; font-weight: 900; color: var(--c-cv-400); }
.pricing-lead__unit small { font-size: .62em; font-weight: 500; color: rgba(255, 255, 255, .7); }
.pricing-lead__note {
  margin-top: 8px;
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
}

.pricing__subhead {
  text-align: center;
  font-size: .95rem;
  font-weight: 900;
  color: var(--c-navy-800);
  margin-bottom: 24px;
}

/* プランの対象ターゲット */
.pricing-card__target {
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-cv-700);
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
  border-radius: var(--radius);
  padding: .6em .9em;
}

/* 対応規格チップ下の注記 */
.chip-row__note {
  margin-top: 20px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.8;
  color: var(--c-text-weak);
}
.chip-row__note strong { color: var(--c-cv-700); font-weight: 900; }

/* ページヒーローのサービスブランド名 */
.page-hero__brand {
  display: inline-block;
  margin-top: .2em;
  font-size: .74em;
  color: var(--c-cv-300);
}

@media (min-width: 860px) {
  .pricing-lead {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 36px 40px;
  }
  .pricing-lead__body { flex: 1; }
  .pricing-lead__price { min-width: 260px; }
}

@media (min-width: 900px) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-card--featured { transform: translateY(-10px); }
  .pricing-card--featured:hover { transform: translateY(-16px); }
}

/* 背景を淡色にする汎用モディファイア */
.section--tint { background: var(--c-blue-50); }

/* -------------------------------------------------------------
   19. レイアウトバリエーション（単調なカード連続の打破）
------------------------------------------------------------- */

/* 19-1. お悩みリスト：カードで囲まない罫線区切りのクリーンなリスト */
.pain-list {
  max-width: 820px;
  margin-inline: auto;
}
.pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 6px;
  border-bottom: 1px solid var(--c-line);
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.8;
}
.pain-list li:first-child { border-top: 1px solid var(--c-line); }
.pain-list li strong { color: var(--c-cv-700); }
.pain-list__icon { flex-shrink: 0; width: 28px; height: 28px; margin-top: .15em; }
.pain-list__icon svg { width: 100%; height: 100%; fill: var(--c-cv-500); }
@media (min-width: 768px) {
  .pain-list li { padding: 26px 10px; font-size: 1.05rem; }
}

/* 19-2. タイムライン：大きな数字と縦ラインでつなぐカードレスなFLOW */
.timeline {
  max-width: 780px;
  margin-inline: auto;
}
.timeline__item {
  position: relative;
  padding: 0 0 48px 92px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 54px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--c-navy-600), rgba(26, 68, 128, .18));
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__num {
  position: absolute;
  left: 0;
  top: -8px;
  width: 64px;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1.3;
  color: var(--c-navy-600);
}
.timeline__item--goal .timeline__num {
  font-size: 1.3rem;
  letter-spacing: .06em;
  line-height: 1.2;
  top: 6px;
  color: var(--c-cv-500);
}
.timeline__title {
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--c-navy-800);
  margin-bottom: 8px;
  padding-top: 4px;
}
.timeline__item--goal .timeline__title { color: var(--c-cv-600); }
.timeline__text { font-size: .9rem; color: var(--c-text-weak); max-width: 620px; }

/* 19-3. ジグザグ（2カラム交互）レイアウト */
.zigzag {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.zigzag__item {
  display: grid;
  gap: 26px;
  align-items: center;
}
.zigzag__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--c-sky-600);
  margin-bottom: 10px;
}
.zigzag__title {
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy-800);
  margin-bottom: 14px;
}
.zigzag__text { font-size: .93rem; color: var(--c-text-weak); }
.zigzag__tag {
  margin-top: 16px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-cv-600);
}
.zigzag__media { width: 100%; max-width: 440px; margin-inline: auto; }
.zigzag__media img { display: block; width: 100%; height: auto; }

/* -- 特徴01「現役ISO審査員がマンツーマン指導」を最重要として格上げ --
   トップページの .strength__item--featured と同じ扱い（明るい地色向け） */
.zigzag__item--featured .zigzag__body {
  position: relative;
  padding: 34px 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
  box-shadow: 0 14px 36px rgba(242, 92, 5, .14);
}
.zigzag__flag {
  display: inline-block;
  margin-bottom: 12px;
  padding: .35em 1.3em;
  border-radius: 2px;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
  color: var(--c-white);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  white-space: nowrap;
}
.zigzag__title--hero {
  font-size: clamp(1.22rem, 4.2vw, 1.72rem);
  line-height: 1.6;
}
.zigzag__title--hero em {
  color: var(--c-cv-600);
  background: linear-gradient(transparent 72%, rgba(247, 127, 0, .3) 72%);
}
.zigzag__item--featured .zigzag__text strong {
  font-weight: 900;
  color: var(--c-navy-800);
  background: linear-gradient(transparent 72%, rgba(247, 127, 0, .28) 72%);
}
@media (min-width: 900px) {
  .zigzag__item--featured .zigzag__body { padding: 40px 36px 36px; }
}

/* AIイラストの代替。トップページの .strength__icon と同じ視覚言語
   （オレンジのグラデ円＋二重リング）を、明るい地色向けに調整したもの。
   下層ページの .zigzag / .bento で共通利用する。 */
.zigzag__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 44px 24px 38px;
  border-radius: var(--radius-lg);
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
}
.zigzag__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--c-cv-grad);
  box-shadow: 0 14px 32px rgba(242, 92, 5, .32);
}
.zigzag__icon::before {
  /* ＜無効化＞同系色の二重リングは撤去（.strength__icon と同じ理由） */
  content: none;
}
.zigzag__icon::after {
  content: none;
}
.zigzag__icon svg { width: 48px; height: 48px; fill: #fff; }

.zigzag__icon-label {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  line-height: 1.7;
  text-align: center;
  color: var(--c-cv-600);
}
.zigzag__icon-label span {
  display: block;
  font-family: var(--font-base);
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--c-navy-800);
}

/* ネイビー地のセクションに置く場合の調整 */
.section--dark .zigzag__figure {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.section--dark .zigzag__icon-label { color: var(--c-cv-300); }
.section--dark .zigzag__icon-label span { color: var(--c-white); }

@media (min-width: 900px) {
  .zigzag { gap: 88px; }
  .zigzag__item { grid-template-columns: 1fr 1fr; gap: 64px; }
  .zigzag__item--reverse .zigzag__body { order: 2; }
  .zigzag__item--reverse .zigzag__media { order: 1; }
  .zigzag__media { max-width: none; }
  .zigzag__figure { max-width: none; padding: 56px 28px 48px; }
  .zigzag__item--reverse .zigzag__figure { order: 1; }
  .zigzag__icon { width: 124px; height: 124px; }
  .zigzag__icon svg { width: 56px; height: 56px; }
}

/* -------------------------------------------------------------
   19-3b. .overlap — 重なり付きジグザグ（services/it-dev.html 専用）

   ＜狙い＞
   «同じ形のカードが3つ縦に並ぶ» だけの構成はテンプレート感が強く、
   BtoBの «作り込んだ感» が出ない。そこで、
     ① 画像とテキストを左右交互（Z型）に置く
     ② テキストの白ボックスを画像に «少しだけ» 重ねる（-72px）
     ③ ボックスの背後に巨大な数字を透かす（Anton・7.5rem・不透明度7%）
     ④ ボックス左端にオレンジの細いバーを立てて «起点» を作る
   の4点で、平面的な並びに奥行きと視線の流れを与える。

   ＜色＞ ネイビー（文字）／水色（面・EN見出し）／オレンジ（バー・タグ）のみ。
   ＜角丸＞ ボックス・画像とも --radius〜--radius-lg（3〜4px）。丸めない。

   ※ .zigzag（services/iso.html と共用）とは別ブロックにしてある。
     こちらを触っても iso.html の見た目は変わらない。
------------------------------------------------------------- */
.overlap {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.overlap__item {
  display: grid;
  /* スマホでは «重ねない» ので、素直な余白として gap を使う。
     PC では gap を 0 にし、重なり幅をネガティブマージンだけで作る。 */
  gap: 20px;
  align-items: center;
}

/* -- 画像：白地のイラストなので «囲い» は付けない。
      奥行きは、左上にずらして敷いた水色の面（::before）だけで出す。 -- */
.overlap__media {
  position: relative;
  z-index: 0;
}
.overlap__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14px;
  left: -14px;
  width: 62%;
  height: 62%;
  background: var(--c-sky-100);
  border-radius: var(--radius);
}
.overlap__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* -- テキストボックス：白・シャープな角丸・薄い影。
      画像の «上» に乗るので z-index を持たせる。 -- */
.overlap__body {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 30px 24px 28px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* 左端のオレンジのバー（«ここから読む» の起点をつくる） */
.overlap__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--c-cv-grad);
}

/* -- 巨大な数字：ボックスの «背景» として透かす。
      Anton（--font-price）＝Impact系の極太コンデンス。
      文字ではなく «模様» として扱うので、行送りも詰めて右上へ逃がす。 -- */
.overlap__num {
  position: absolute;
  top: -18px;
  right: 8px;
  z-index: -1;
  font-family: var(--font-price);
  font-size: 7.5rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(8, 26, 53, .07);
  pointer-events: none;
  user-select: none;
}

.overlap__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--c-sky-600);
  margin-bottom: 8px;
}
.overlap__title {
  font-size: clamp(1.2rem, 3.2vw, 1.5rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy-800);
  margin-bottom: 14px;
}
.overlap__text { font-size: .9rem; color: var(--c-text-weak); }
.overlap__tag {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-sky-100);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-cv-600);
}

/* ※スマホ（〜899px）は重なり «なし»。
   DOM順どおり 画像 → テキストボックス が gap: 20px で縦に並ぶ。 */

@media (min-width: 900px) {
  .overlap { gap: 96px; }
  .overlap__item { gap: 0; }

  /* 画像 55% ／ テキスト 45% の2カラム。gap は 0 にして、
     重なり幅（-72px）をネガティブマージン側だけで制御する。 */
  .overlap__item { grid-template-columns: 1.22fr 1fr; }

  .overlap__media::before { top: -22px; left: -22px; }

  .overlap__body {
    margin: 0 0 0 -72px;
    padding: 40px 36px 36px;
    box-shadow: var(--shadow-lg);
  }
  .overlap__num { font-size: 9rem; top: -26px; right: 14px; }

  /* -- 偶数ブロック（--reverse）：テキストが左・画像が右 --
     DOM順は media → body のままなので、order で入れ替える。
     重なりの向きと、背後に敷く水色の面の向きも左右反転させる。 */
  .overlap__item--reverse .overlap__media { order: 2; }
  .overlap__item--reverse .overlap__body { order: 1; }
  .overlap__item--reverse { grid-template-columns: 1fr 1.22fr; }
  .overlap__item--reverse .overlap__body { margin: 0 -72px 0 0; }
  .overlap__item--reverse .overlap__media::before {
    left: auto;
    right: -22px;
  }
}

/* 19-4. ダークセクション＋ナンバードリスト（カードレス） */
.section--dark {
  background: var(--c-navy-900);
  color: var(--c-white);
}
.dark-grid {
  display: grid;
  gap: 36px;
  max-width: 960px;
  margin-inline: auto;
}
.dark-grid__item {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 24px;
}
.dark-grid__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-cv-400);
}
.dark-grid__title {
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--c-white);
  line-height: 1.55;
  margin: 10px 0 10px;
}
.dark-grid__text { font-size: .88rem; color: rgba(255, 255, 255, .82); }
@media (min-width: 768px) {
  .dark-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 56px; }
  .dark-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 48px 44px; }
}

/* 19-5. ベントーグリッド */
.bento { display: grid; gap: 22px; }
.bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bento__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.bento__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 4px;
  background: var(--c-sky-100);
}
.bento__icon svg { width: 28px; height: 28px; fill: var(--c-navy-600); }
.bento__title { font-size: 1.1rem; font-weight: 900; color: var(--c-navy-800); line-height: 1.5; }
.bento__text { font-size: .87rem; color: var(--c-text-weak); }

/* ネイビーのアクセントタイル */
.bento__item--navy {
  background: var(--c-navy-800);
}
.bento__item--navy .bento__title { color: var(--c-white); }
.bento__item--navy .bento__text { color: rgba(255, 255, 255, .82); }
.bento__item--navy .bento__icon { background: rgba(255, 255, 255, .12); }
.bento__item--navy .bento__icon svg { fill: var(--c-cv-300); }

.bento__media { margin-top: auto; }
.bento__media img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: var(--radius);
}

/* AIイラストの代替。横長タイルの右側を、装飾ではなく
   「何ができるか」を伝える要点リストで埋める（テキスト主体） */
.bento__points {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--c-cv-50);
  border: 1px solid var(--c-cv-100);
}
.bento__points li {
  position: relative;
  padding-left: 1.6em;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy-800);
}
/* チェックマーク（CSS図形のみ） */
.bento__points li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .5em;
  width: .5em;
  height: .28em;
  border-left: 2px solid var(--c-cv-500);
  border-bottom: 2px solid var(--c-cv-500);
  transform: rotate(-45deg);
}
/* ネイビータイル内 */
.bento__points--navy {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}
.bento__points--navy li { color: rgba(255, 255, 255, .92); }
.bento__points--navy li::before {
  border-left-color: var(--c-cv-300);
  border-bottom-color: var(--c-cv-300);
}

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .bento__item--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 36px;
    padding: 40px 44px;
  }
  .bento__item--wide .bento__media { margin-top: 0; }
  .bento__item--wide .bento__points { margin-top: 0; }
}

/* 19-6. お客様の声：単一事例用の横長カード */
.voice-card--horizontal { max-width: 900px; margin-inline: auto; }
@media (min-width: 768px) {
  .voice-card--horizontal {
    display: grid;
    grid-template-columns: 236px 1fr;
    grid-template-areas:
      "head title"
      "head text";
    align-items: start;
    column-gap: 36px;
    padding: 36px 40px;
  }
  .voice-card--horizontal .voice-card__head {
    grid-area: head;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-right: 1px solid var(--c-blue-100);
    padding-right: 28px;
    height: 100%;
  }
  .voice-card--horizontal .voice-card__avatar { width: 96px; height: 96px; }
  .voice-card--horizontal .voice-card__title { grid-area: title; }
  .voice-card--horizontal .voice-card__text { grid-area: text; }
}

/* -------------------------------------------------------------
   20. モバイル最適化（〜767px / 〜400px）

   PC表示には一切影響させないため、すべて max-width のメディアクエリ内に
   閉じ込めている。ファイル末尾に置くことでカスケードの取り回しも明確にする。
------------------------------------------------------------- */
@media (max-width: 767px) {
  /* -- タップ領域の確保（目安44px以上） -- */
  /* フッターナビは padding 4px で約32pxしかなく、指では押しづらかった */
  .footer__nav a { padding: 11px 0; font-size: .85rem; }
  .footer__info dd a { display: inline-block; padding: 4px 0; }
  .breadcrumb a { display: inline-block; padding: 4px 0; }

  /* -- 小さすぎた注記類を底上げ（12px→12.5px前後） -- */
  .hero__cta-note,
  .cta__note { font-size: .78rem; }

  /* -- 横並びが窮屈になる箇所を縦積みへ -- */
  .slim__result { flex-direction: column; text-align: center; gap: 10px; }
  .cta__lp-btn { width: 100%; padding: 18px 20px; }

  /* -- 見出し直後の詰まりを緩和 -- */
  .section-head { margin-bottom: 36px; }
}

/* -- 大型CTAボタン（〜480px）--
   .btn--lg / .btn--xl は左右 padding が 3.2〜3.4em あり、
   Heroの「無料相談・お見積りはこちら」は約357px を要求していた。
   320〜390px 端末では表示領域（280〜350px）に収まらず溢れていたため、
   幅いっぱいに広げたうえで級数と余白を詰める。
   矢印アイコンは right: 1.1em ＋ 幅1.2em ＝ 2.3em の位置に来るので、
   padding は必ず 2.4em 以上を確保して文字と重ならないようにしている。 */
@media (max-width: 480px) {
  .btn--lg,
  .btn--xl {
    width: 100%;
    padding: 1em 2.4em;
    font-size: .98rem;
  }
  .cta__tel { width: 100%; }
  .cta__buttons { gap: 16px; }
}

/* 狭幅端末（〜400px）向けの追い込み */
@media (max-width: 400px) {
  /* 左右余白 20px → 16px（下限。これ以下には詰めない）。
     --gutter を変えるだけで .container / .hero__inner の両方に効く */
  :root { --gutter: 16px; }

  /* セクション間の余白を控えめに（縦スクロール量の削減） */
  .section { padding: 60px 0; }

  /* 320px級：主従の «比» は保ったまま、全体を一段だけ縮める。
     ここで主役まで小さくするとメリハリが消えるため、
     縮めるのは脇役と内寸のみに留める。
     （価格ブロックの狭幅対応は「価格」節の
       @media (max-width: 559px) 側で行っている） */
  .badge__circle { width: 70px; height: 70px; }
  .badge__num { font-size: 1.24rem; }
  .badge__num--text { font-size: .8rem; }
  .badge--featured .badge__circle { width: 116px; height: 116px; }
  .badge--featured .badge__num { font-size: 2.8rem; }
  /* スマホでは縦2段（1つ＋3つ）になっているので、
     この gap は «段と段の間» の意味になる。横並び前提の 8px では
     詰まりすぎるため、段組みとして成立する値に上げる */
  .hero__badges { gap: 14px; }

  /* 比較カードのマーク列を少し詰める */
  .comparison__table tbody td { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 13px; }
  .comparison__table tbody th { padding: 12px 13px; }

  /* 対応規格チップ。最長の「ISO 27001 / ISMS（情報セキュリティ）」が
     約294px を要求し、320px端末の表示領域（288px）を超えていた */
  .chip { font-size: .78rem; padding: .5em 1.1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn--shine::after, .marquee__track { animation: none; }
  /* 価格の «キラッ» と «飛び出し» は止め、光の帯は明るい位置で固定する */
  .hexagon-price__num::after { animation: none; background-position: 50% 0; }
  .js-price-pop .hexagon-price__num { opacity: 1; transform: none; }
  .js-price-pop .hexagon-price.is-active .hexagon-price__num { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------
   20. 会社情報ページ（company.html）

   ＜設計方針＞
   ・新規コンポーネントは3つだけ（.mvv / .message / .overview）。
     ページヒーロー・セクション見出し・CTA・フッターは既存クラスを流用し、
     サイト全体との統一感を保つ。
   ・箱で囲い込む «カード連打» は避け、
     縦罫（指針）・写真フレーム（代表メッセージ）・横ヘアライン（会社概要）と
     区切り方を変えることで、単調にならないようにしている。
------------------------------------------------------------- */

/* 20-0. ページヒーローの背景写真（会社情報ページ専用）

   写真だけを敷くと白文字が沈むため、濃紺のオーバーレイを重ねて可読性を確保する。
   グラデーションと画像は同じ background プロパティで «重ね順» を作れる
   （先に書いたレイヤーが手前）。左を濃く・右を薄くすることで、
   左寄せのテキストは読みやすく、右側は写真の情報量を残している。

   ※ファイル名が日本語のため、サーバー環境によるエンコード差異を避けて
     url() ではパーセントエンコード表記にしている（実体は
     images/会社情報背景画像.jpeg）。 */
.page-hero--company {
  background:
    linear-gradient(100deg,
      rgba(8, 26, 53, .88) 0%,
      rgba(8, 26, 53, .72) 45%,
      rgba(11, 34, 73, .55) 100%),
    url("../images/%E4%BC%9A%E7%A4%BE%E6%83%85%E5%A0%B1%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F.jpeg")
      center / cover no-repeat;
}

/* 20-1. 現在地のグローバルナビ */
.header__nav-link.is-current {
  color: var(--c-cv-600);
  font-weight: 900;
}

/* 20-2. ミッション／ビジョン／バリュー
   背景の塗りは使わず、左の «縦罫» だけで3ブロックを切り分ける。 */
.mvv {
  display: grid;
  gap: 34px;
  max-width: 980px;
  margin-inline: auto;
}
.mvv__item {
  position: relative;
  padding-left: 24px;
  border-left: 3px solid var(--c-blue-100);
}
/* 縦罫の «頭» だけをオレンジにして視線の起点を作る */
.mvv__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 42px;
  background: var(--c-cv-grad);
}
.mvv__en {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .18em;
  color: var(--c-cv-600);
  margin-bottom: 8px;
}
.mvv__title {
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--c-navy-800);
  margin-bottom: 14px;
}
.mvv__title em {
  color: var(--c-navy-900);
  background: linear-gradient(transparent 62%, rgba(255, 159, 28, .45) 62%);
  padding: 0 .05em;
}
.mvv__text {
  font-size: .95rem;
  line-height: 1.95;
  color: var(--c-text-weak);
}

/* VALUE の3項目：番号ではなく «小見出し＋説明» の2段組 */
.mvv__values {
  display: grid;
  gap: 16px;
}
.mvv__values li {
  display: grid;
  gap: 4px;
  padding-left: 20px;
  position: relative;
}
.mvv__values li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-cv-grad);
}
.mvv__values strong {
  font-size: 1rem;
  font-weight: 900;
  color: var(--c-navy-800);
}
.mvv__values span {
  font-size: .9rem;
  line-height: 1.85;
  color: var(--c-text-weak);
}

@media (min-width: 768px) {
  .mvv { gap: 44px; }
  .mvv__item { padding-left: 30px; }
  .mvv__values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/* 20-3. 代表メッセージ
   写真（またはプレースホルダー）とテキストの2カラム。
   写真は «角丸＋オレンジのL字» で、証明写真的な硬さを和らげる。 */
.message {
  display: grid;
  gap: 32px;
  max-width: 1000px;
  margin-inline: auto;
}
.message__figure {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
}
/* 写真の背後に敷くオレンジのL字（CSS図形。画像不要） */
.message__figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12px;
  bottom: 46px;
  width: 64%;
  height: 64%;
  border-left: 3px solid var(--c-cv-500);
  border-bottom: 3px solid var(--c-cv-500);
  border-bottom-left-radius: 10px;
  opacity: .5;
}
.message__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-white);
  box-shadow: var(--shadow-lg);
}
/* 支給写真は 5032×7545（縦2:3）の全身カット。
   枠（4:5）に cover で嵌めると上下が17%しか切れず、頭上に大きな余白が残る。
   そこで «上寄せ（object-position）» で余白を削ったうえで、
   拡大（scale）して上半身に寄せた «バストアップ» の見え方に整えている。
   枠側は overflow: hidden なので、はみ出しは枠内でクリップされる。 */
.message__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transform: scale(1.42);
  transform-origin: center 20%;
  display: block;
}
.message__caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 16px;
  text-align: center;
}
.message__role {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-weak);
}
.message__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-navy-900);
}
.message__name-en {
  font-family: var(--font-num);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--c-text-weak);
}

.message__body p {
  font-size: .95rem;
  line-height: 2;
  color: var(--c-text);
}
.message__body p + p { margin-top: 1.2em; }
.message__lead {
  font-size: clamp(1.2rem, 3.6vw, 1.55rem) !important;
  font-weight: 900;
  line-height: 1.6 !important;
  color: var(--c-navy-800) !important;
  margin-bottom: 6px;
}

@media (min-width: 900px) {
  .message {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .message__figure { margin-inline: 0; }
}

/* 20-4. 会社概要
   格子状の «表組み» にはせず、1行1本の横ヘアラインだけで整理する。 */
.overview {
  border-top: 1px solid var(--c-line);
}
.overview__row {
  display: grid;
  gap: 4px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-line);
}
.overview__row dt {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-navy-700);
}
.overview__row dd {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--c-text);
}
.overview__tel {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-navy-800);
  letter-spacing: .02em;
}
.overview__tel:hover { color: var(--c-cv-600); }
.overview__note {
  font-size: .82rem;
  color: var(--c-text-weak);
  margin-left: .4em;
}
.overview__services {
  display: grid;
  gap: 8px;
}
.overview__services li {
  position: relative;
  padding-left: 18px;
}
.overview__services li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-cv-500);
}

@media (min-width: 768px) {
  .overview__row {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 24px;
    padding: 22px 8px;
    align-items: start;
  }
  .overview__row dt { padding-top: .15em; }
}

/* -------------------------------------------------------------
   21. お問い合わせページ（contact.html）＋ 右下固定CTA
------------------------------------------------------------- */

/* 21-1. 右下に常時固定される「無料相談」ボタン（フローティングCTA）

   ＜他の固定要素との重なり回避＞
   既存の固定要素は2つある。
     ・.fixed-cta（モバイル追従バー）… 画面下部・全幅・1160px未満のみ表示
     ・.to-top（ページトップへ）    … 右下・46px角
   そこで縦の «段» を次のように積み、いずれも重ならないようにしている。
     1160px未満 : [追従バー] → その上に [本ボタン] → その上に [到頂ボタン]
     1160px以上 : 追従バーが消えるため [本ボタン] を最下段に置き、上に [到頂ボタン]
   z-index は追従バー・到頂ボタン（90）より1つ上の 91。 */
.float-cta {
  position: fixed;
  z-index: 91;
  right: 14px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--c-cv-grad);
  color: var(--c-white);
  font-weight: 900;
  font-size: .9rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(242, 92, 5, .45), 0 2px 6px rgba(8, 26, 53, .25);
  border: 2px solid rgba(255, 255, 255, .55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.float-cta .icon { width: 20px; height: 20px; flex: none; }
.float-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(242, 92, 5, .55), 0 2px 6px rgba(8, 26, 53, .25);
}
/* 到頂ボタンを本ボタンのぶんだけ持ち上げる（既存指定の上書き） */
.to-top { bottom: 140px; }

@media (min-width: 1024px) {
  .float-cta {
    right: 28px;
    padding: 15px 26px;
    font-size: .95rem;
  }
  .to-top { bottom: 150px; right: 28px; }
}
/* 1160px以上は追従バーが消えるため、本ボタンを画面下端へ寄せる */
@media (min-width: 1160px) {
  .float-cta { bottom: 28px; }
  .to-top { bottom: 96px; }
}

/* 21-2. お問い合わせページ本体 */
.contact-page { padding-top: 56px; }

/* 電話導線（フォームの前に置く «急ぎの人» 向けの出口） */
.contact-tel {
  margin-bottom: 32px;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--c-blue-50);
  border: 1px solid var(--c-blue-100);
  text-align: center;
}
.contact-tel__label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--c-text-weak);
  margin-bottom: 6px;
}
.contact-tel__number {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--c-navy-900);
}
.contact-tel__number .icon { color: var(--c-cv-500); width: 26px; height: 26px; }
.contact-tel__number:hover { color: var(--c-cv-600); }
.contact-tel__note {
  font-size: .8rem;
  color: var(--c-text-weak);
  margin-top: 4px;
}

/* フォーム外枠：白カード＋やわらかい影で «入力領域» を明示する */
.form-wrap {
  padding: 28px 20px 32px;
  border-radius: var(--radius-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.form-head {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.form-head__title {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 900;
  color: var(--c-navy-800);
  margin-bottom: 8px;
}
.form-head__note {
  font-size: .84rem;
  line-height: 1.8;
  color: var(--c-text-weak);
}

/* 必須／任意バッジ */
.req-mark, .opt-mark {
  display: inline-block;
  margin-left: .6em;
  padding: .2em .6em;
  border-radius: 2px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 2px;
  white-space: nowrap;
}
.req-mark { background: var(--c-cv-600); color: var(--c-white); }
.opt-mark { background: var(--c-blue-100); color: var(--c-navy-700); }

.form__row { margin-bottom: 26px; }
.form__row--type { border: 0; padding: 0; }
.form__label {
  display: block;
  margin-bottom: 10px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--c-navy-800);
}
.form__help {
  margin-top: 8px;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--c-text-weak);
}
.form__help--center { text-align: center; }

/* 入力欄：タップしやすい高さ（44px以上）と、明快なフォーカス表示 */
.form__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-sky-50);
  font-family: inherit;
  font-size: 1rem;       /* iOSの自動ズーム防止のため16px相当を維持 */
  line-height: 1.7;
  color: var(--c-text);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form__input::placeholder { color: var(--c-text-mute); }
.form__input:hover { border-color: var(--c-blue-100); }
.form__input:focus {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-cv-500);
  box-shadow: 0 0 0 4px rgba(247, 127, 0, .16);
}
/* 未入力のまま送信して弾かれた項目だけを赤くする
   （:invalid だけだと «入力前» から赤くなり圧迫感が出るため user-invalid を使う） */
.form__input:user-invalid {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 4px rgba(214, 69, 80, .14);
}
.form__textarea { resize: vertical; min-height: 180px; }

/* セレクトボックス。ブラウザ既定の矢印を消し、
   メインカラー（水色）の山形を背景画像として描く。
   ※data URI の SVG を使うため外部ファイルは増えない。 */
.form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f90d8'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
/* 会社プロフィール等、短い項目を2列に並べるためのグリッド。
   モバイルは1列（＝縦積み）のまま。 */
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 20px;
}
@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ＝＝ 条件表示パネル（種別に応じた詳細選択）＝＝
   選択中の種別に紐づく設問であることが一目で分かるよう、
   左にメインカラーの縦罫を1本引いて «入れ子» であることを示す。 */
.form__cond {
  margin-bottom: 26px;
  padding: 22px 20px 2px;
  border-left: 3px solid var(--c-sky-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--c-sky-50);
}
.form__cond[hidden] { display: none; }
.form__cond .form__grid { gap: 0 20px; }
.form__row--check { border: 0; padding: 0; }

/* ＝＝ 複数選択のチップ（対象規格など）＝＝
   チェックボックスの見た目を «選べるタグ» に置き換える。
   規格名（主）＋補足（従）の2段組みで、初見でも意味が分かるようにする。 */
.form__checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.check-chip { cursor: pointer; }
.check-chip input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.check-chip__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 14px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--c-navy-800);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.check-chip__box small {
  font-size: .74rem;
  font-weight: 500;
  color: var(--c-text-weak);
}
.check-chip:hover .check-chip__box { border-color: var(--c-sky-300); }
.check-chip input:checked + .check-chip__box {
  border-color: var(--c-cv-500);
  background: var(--c-cv-50);
  box-shadow: 0 6px 16px rgba(247, 127, 0, .16);
}
.check-chip input:checked + .check-chip__box small { color: var(--c-cv-700); }
.check-chip input:focus-visible + .check-chip__box {
  outline: 3px solid var(--c-sky-500);
  outline-offset: 2px;
}

/* お問い合わせ種別：ラジオを «選択カード» として見せる */
.form__radios {
  display: grid;
  gap: 10px;
}
.radio-card { cursor: pointer; }
.radio-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.radio-card__box {
  position: relative;
  display: block;
  padding: 14px 16px 14px 46px;
  border: 2px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-sky-50);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
/* ラジオの «丸» を擬似要素で自作（ブラウザ差を無くす） */
.radio-card__box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid var(--c-line);
  background: var(--c-white);
  transition: border-color .25s;
}
.radio-card__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 22px;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) scale(0);
  border-radius: 50%;
  background: var(--c-cv-500);
  transition: transform .25s var(--ease);
}
.radio-card:hover .radio-card__box { border-color: var(--c-cv-100); }
.radio-card input:checked + .radio-card__box {
  border-color: var(--c-cv-500);
  background: var(--c-cv-50);
  box-shadow: 0 6px 18px rgba(242, 92, 5, .14);
}
.radio-card input:checked + .radio-card__box::before { border-color: var(--c-cv-500); }
.radio-card input:checked + .radio-card__box::after { transform: translateY(-50%) scale(1); }
/* キーボード操作でも選択位置が分かるようにする */
.radio-card input:focus-visible + .radio-card__box {
  outline: 3px solid rgba(247, 127, 0, .45);
  outline-offset: 2px;
}
.radio-card__title {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--c-navy-800);
  line-height: 1.5;
}
.radio-card__desc {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--c-text-weak);
}

/* プライバシーポリシー同意 */
.form__row--agree {
  padding: 20px 16px;
  border-radius: var(--radius);
  background: var(--c-blue-50);
  text-align: center;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox__box {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 3px;
  border: 2px solid var(--c-line);
  background: var(--c-white);
  transition: background .25s, border-color .25s;
}
.checkbox__box svg { width: 16px; height: 16px; fill: var(--c-white); opacity: 0; transition: opacity .2s; }
.checkbox input:checked + .checkbox__box {
  background: var(--c-cv-grad);
  border-color: var(--c-cv-500);
}
.checkbox input:checked + .checkbox__box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box {
  outline: 3px solid rgba(247, 127, 0, .45);
  outline-offset: 2px;
}
.checkbox__text {
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-navy-800);
}

.form__submit { text-align: center; margin-top: 30px; }
.form__submit .btn { width: min(100%, 420px); }
.form__submit-note {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--c-text-weak);
}

/* サービス別導線（CTAセクションと同じ .cta__lp を明るい背景で使うため反転） */
.contact-page__lp {
  border-top-color: var(--c-line);
  margin-top: 44px;
}
.contact-page__lp .cta__lp-text { color: var(--c-text); }
.contact-page__lp .cta__lp-text strong { color: var(--c-navy-800); }

@media (min-width: 768px) {
  .form-wrap { padding: 40px 44px 44px; }
  .form__radios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .contact-tel { padding: 26px 24px; }
}

/* -------------------------------------------------------------
   22. 送信完了ページ（thanks.html）／規約ページ（privacy.html）
------------------------------------------------------------- */

/* 22-0. セカンダリボタン（枠線のみ）
   CVボタン（オレンジ塗り）と並べたときに主従が明確になるよう、
   ネイビーの枠線だけの控えめな見た目にする。 */
.btn--ghost {
  padding: .8em 1.6em;
  font-size: .95rem;
  color: var(--c-navy-800);
  background: var(--c-white);
  border: 2px solid var(--c-line);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--c-navy-600);
  color: var(--c-navy-900);
  box-shadow: var(--shadow-md);
}

/* 22-1. 送信完了 */
.thanks {
  text-align: center;
  padding: 8px 0 0;
}
.thanks__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--c-cv-grad);
  box-shadow: var(--shadow-cv);
}
.thanks__icon svg { width: 40px; height: 40px; fill: var(--c-white); }
.thanks__title {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy-900);
  margin-bottom: 18px;
}
.thanks__lead {
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height: 2;
  color: var(--c-text);
  margin-bottom: 32px;
}

/* 補足情報：本文と混ざらないよう淡いブルー地のブロックにまとめる */
.thanks__notes {
  display: grid;
  gap: 14px;
  text-align: left;
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--c-blue-50);
  border: 1px solid var(--c-blue-100);
  margin-bottom: 36px;
}
.thanks__note {
  font-size: .88rem;
  line-height: 1.9;
  color: var(--c-text-weak);
}
.thanks__note strong {
  display: block;
  font-size: .92rem;
  font-weight: 900;
  color: var(--c-navy-800);
  margin-bottom: 2px;
}
.thanks__note a {
  font-weight: 700;
  color: var(--c-cv-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.thanks__note a:hover { color: var(--c-cv-500); }

.thanks__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.thanks__actions .btn { min-width: min(100%, 280px); }

@media (min-width: 600px) {
  .thanks__actions { flex-direction: row; justify-content: center; }
  .thanks__notes { padding: 26px 28px; }
}

/* 22-2. 規約・方針ページ（プライバシーポリシー等）

   長文を読ませるページなので、装飾は最小限に留め
   «行間・見出しの階層・箇条書きのぶら下げ» で可読性を作る。 */
.legal__intro {
  font-size: .95rem;
  line-height: 2;
  color: var(--c-text);
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}
.legal__section { padding: 26px 0; border-bottom: 1px solid var(--c-line); }
.legal__section:last-of-type { border-bottom: 0; }

/* 見出し：番号を «ぶら下げ» にし、折り返しても本文が揃うようにする */
.legal__title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(1.08rem, 3.2vw, 1.24rem);
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-navy-800);
  margin-bottom: 14px;
}
.legal__num {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--c-cv-grad);
  color: var(--c-white);
  font-family: var(--font-num);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(1px);
}
.legal__section p {
  font-size: .92rem;
  line-height: 2;
  color: var(--c-text);
}
.legal__section p + p { margin-top: 1em; }

.legal__list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.legal__list li {
  position: relative;
  padding-left: 20px;
  font-size: .92rem;
  line-height: 1.9;
  color: var(--c-text);
}
.legal__list li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-cv-500);
}

/* 窓口情報：会社概要（.overview）と同じヘアライン方式で揃える */
.legal__contact {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--c-blue-50);
}
.legal__contact dl { display: grid; gap: 12px; }
.legal__contact dt {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--c-navy-700);
  margin-bottom: 2px;
}
.legal__contact dd {
  font-size: .92rem;
  line-height: 1.8;
  color: var(--c-text);
}
.legal__contact a {
  font-weight: 700;
  color: var(--c-cv-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__contact a:hover { color: var(--c-cv-500); }

.legal__date {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
  font-size: .84rem;
  line-height: 2;
  color: var(--c-text-weak);
  text-align: right;
}

@media (min-width: 768px) {
  .legal__section { padding: 32px 0; }
  .legal__contact dl { grid-template-columns: 132px minmax(0, 1fr); gap: 14px 20px; }
  .legal__contact dl > div { display: contents; }
  .legal__contact dt { margin-bottom: 0; padding-top: .1em; }
}

/* お問い合わせフォーム内のプライバシーポリシーへのリンク */
.checkbox__link {
  color: var(--c-cv-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkbox__link:hover { color: var(--c-cv-500); }

/* -------------------------------------------------------------
   23. お問い合わせ／送信完了ページのヒーロー背景
------------------------------------------------------------- */

/* 写真の上に濃紺のオーバーレイを重ね、白文字の可読性を確保する。
   会社情報ページ（.page-hero--company）と同じ «左を濃く・右を薄く» の
   グラデーションで統一し、サイト内のトーンを揃えている。 */
.page-hero--contact {
  background:
    linear-gradient(100deg,
      rgba(8, 26, 53, .88) 0%,
      rgba(8, 26, 53, .74) 45%,
      rgba(11, 34, 73, .58) 100%),
    url("../images/contactimg.jpeg") center / cover no-repeat;
}

/* -------------------------------------------------------------
   24. パートナーサイト（Smartflow Design）への導線
------------------------------------------------------------- */

/* 24-1. トップページ サービスカード内の導線

   ＜構造上の注意＞
   .service-card 全体が <a class="service-card__link"> で囲われているため、
   この導線はカードのリンクの «外側»（.service-card 直下）に置いている。
   リンクの入れ子は不正なHTMLで、ブラウザが勝手にDOMを組み替えるため。 */
/* ＜必須＞カードを «リンク＋導線» の2段構成にする
   .service-card は overflow: hidden で、かつ .service-card__link が
   height: 100% でカードいっぱいに広がる。そのままだと導線がカードの
   外側に押し出され、overflow: hidden で «切れて見えなくなる»。
   カードを flex 化し、リンク側を flex: 1（height は auto に戻す）に
   することで、導線の高さぶんがカード内に確保される。 */
.service-card--partner { display: flex; flex-direction: column; }
.service-card--partner .service-card__link { flex: 1 1 auto; height: auto; }

.service-card__partner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 18px 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--c-line);
}
.service-card__partner-lead {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--c-text-weak);
  text-align: center;
}
/* CVボタン（オレンジ塗り）と競合しないよう、白地＋ネイビー枠のセカンダリに */
.service-card__partner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--c-white);
  border: 2px solid var(--c-navy-600);
  color: var(--c-navy-800);
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card__partner-btn .icon--ext { flex: none; width: 15px; height: 15px; }
.service-card__partner-btn:hover {
  background: var(--c-navy-700);
  border-color: var(--c-navy-700);
  color: var(--c-white);
  box-shadow: 0 10px 24px rgba(8, 26, 53, .28);
}

/* 24-2. WEB制作・システム開発ページの誘導バナー（全幅の帯）

   ISOレスキューのバナー（.lp-banner／オレンジ基調）と役割が重なるため、
   こちらは «ネイビー基調» にして別サービスであることを色で区別する。 */
.partner-band {
  padding: 40px 0;
  background: var(--c-blue-50);
}
.partner-band__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--c-navy-900);
  box-shadow: var(--shadow-lg);
  color: var(--c-white);
}
.partner-band__label {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--c-cv-300);
  margin-bottom: 8px;
}
.partner-band__title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 10px;
}
.partner-band__title em {
  color: var(--c-cv-300);
  font-style: normal;
}
.partner-band__text {
  font-size: .9rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .82);
}

/* ボタン：帯がネイビーなので、こちらはオレンジ塗りで最も目立たせる */
.partner-band__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--c-cv-grad);
  color: var(--c-white);
  box-shadow: var(--shadow-cv);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.partner-band__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(242, 92, 5, .45);
  filter: brightness(1.05);
}
.partner-band__btn-sub {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .9;
}
.partner-band__btn-main {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: 1.02rem;
  font-weight: 900;
  white-space: nowrap;
}
.partner-band__btn-main .icon--ext { flex: none; width: 16px; height: 16px; }

@media (min-width: 480px) {
  .service-card__partner { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .service-card__partner-lead { text-align: left; }
  .service-card__partner-btn { flex: none; }
}
@media (min-width: 900px) {
  .partner-band { padding: 52px 0; }
  .partner-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    padding: 32px 38px;
  }
}

/* -------------------------------------------------------------
   25. ポータル（ハブ）用コンポーネント
       ── 2026-08 大規模改修で追加 ──

   トップページを «LP» から «ポータル» へ作り替えるにあたり、
   「要約＋アイキャッチ＋詳細ページへのリンク」を組み立てるための
   最小限の部品をここにまとめた。
   長文セクション（.strength / .slim / .comparison など）は
   下層ページ（about.html ほか）でそのまま使い続ける。
------------------------------------------------------------- */

/* 25-1. 図解プレースホルダー
   文字を削った箇所に «後から図解を差し込む» ための枠。
   画像は images/placeholder-diagram.png を仮置きしている。
   差し替え時は <img> の src と alt を変えるだけでよい。 */
.hub-figure {
  margin: 0;
}
/* 【重要】このプロジェクトは Tailwind を読み込んでいないため、
   HTML側の w-full / object-contain / rounded-lg といったクラスは
   «意図を示すラベル» でしかなく、実際の見た目はこのルールが決める。
   HTMLのクラスを触るときは、必ずここも合わせて直すこと。

   object-fit は cover ではなく contain。
   図解は «端が切れると意味が壊れる» ため、枠に対して比率が合わない
   画像に差し替えられても、全体が必ず収まるようにしておく。
   （現在の3点 PROBLEM2 / COMPARISON / WHY はいずれも 1672×941＝16:9
     ちょうどなので、cover / contain どちらでも見た目は変わらない） */
.hub-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-blue-50);
}
.hub-figure__cap {
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--c-text-mute);
  text-align: center;
}
/* 単独で大きく置く場合（下層ページの導入部など） */
.hub-figure--wide {
  max-width: 900px;
  margin: 0 auto 40px;
}

/* 25-2. 図解 ＋ 要約テキストの2カラム
   スマホでは «図解 → テキスト» の1列。PCで左右に分ける。
   --reverse で図解を右に置く（セクションが続くときの単調さ回避）。 */
.hub-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.hub-split__body > * + * { margin-top: 20px; }

.hub-split__answer {
  padding: 22px 24px;
  border-left: 4px solid var(--c-cv-500);
  background: var(--c-cv-50);
  border-radius: var(--radius);
}
.hub-split__answer-lead {
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text-weak);
}
.hub-split__answer-main {
  margin-top: 4px;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-navy-800);
}
.hub-split__answer-desc {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.9;
}

@media (min-width: 900px) {
  .hub-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
  /* DOM順は «図解 → テキスト»（スマホの表示順）で固定し、
     PCでの左右入れ替えは order だけで行う。 */
  .hub-split--reverse .hub-figure { order: 2; }
  .hub-split--reverse .hub-split__body { order: 1; }
}

/* お悩みリストの詰めたバリエーション（トップの要約用） */
.pain-list--compact { max-width: none; }
.pain-list--compact li {
  padding: 14px 2px;
  gap: 14px;
  font-size: .92rem;
  line-height: 1.75;
}
@media (min-width: 768px) {
  .pain-list--compact li { padding: 15px 4px; font-size: .96rem; }
}

/* 25-3. チェックリスト（比較の要点を短く並べる） */
.check-list li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--c-line);
  font-size: .95rem;
  line-height: 1.8;
}
.check-list li:first-child { border-top: 1px solid var(--c-line); }
.check-list li::before {
  content: "";
  position: absolute;
  top: 1.15em;
  left: 4px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--c-sky-500);
  border-bottom: 3px solid var(--c-sky-500);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--c-navy-800); }
.check-list em {
  font-style: normal;
  font-weight: 900;
  color: var(--c-cv-700);
}

/* 25-4. ハブカード（要約カードのグリッド）
   トップの «選ばれる理由» «サービス» のダイジェストで使う。
   長文は入れず、見出し＋2行程度に留めること。 */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1000px) {
  .hub-grid { grid-template-columns: repeat(4, 1fr); }
}

.hub-card {
  position: relative;
  padding: 26px 22px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.hub-card__num {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-sky-300);
}
.hub-card__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: .25em 1em;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--c-white);
  background: var(--c-navy-600);
  border-radius: 2px;
}
.hub-card__title {
  margin-top: 10px;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-navy-800);
}
.hub-card__price {
  margin-top: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-text-weak);
}
.hub-card__price strong {
  font-family: var(--font-num);
  font-size: 1.35rem;
  color: var(--c-cv-600);
}
.hub-card__price small { display: block; font-size: .72rem; font-weight: 500; }
.hub-card__text {
  margin-top: 10px;
  font-size: .87rem;
  line-height: 1.85;
  color: var(--c-text-weak);
}
.hub-card__more {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: 14px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--c-sky-600);
}

/* カード全体がリンクになるパターン */
.hub-card--link { padding: 0; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hub-card--link > a {
  display: block;
  height: 100%;
  padding: 26px 22px;
  color: inherit;
  text-decoration: none;
}
.hub-card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.hub-card--soon { opacity: .92; }
.hub-card--soon .hub-card__eyebrow { background: var(--c-text-mute); }

/* 25-5. 「もっと見る」導線
   各セクションの末尾に置き、下層の詳細ページへ送り出す。 */
.section-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
  text-align: center;
}

/* 25-6. ISOレスキュー帯の «建設業特化» バリエーション

   【運用ルール】サイト全体は全業界向けの汎用メッセージで統一する。
   「建設業特化」「経審W評点」「入札」「丸投げOK」といった
   強い特化メッセージは、この .lp-banner--const と
   services/index.html の .service-card__const にだけ置くこと。 */
.lp-banner--const .lp-banner__title em {
  /* 白地オレンジ字のキーワード強調（経審・入札）を少し詰める */
  padding: 0 .25em;
}
.lp-banner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  justify-content: center;
}
.lp-banner__tags li {
  padding: .3em 1em;
  font-size: .76rem;
  font-weight: 900;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 2px;
}
@media (min-width: 900px) {
  .lp-banner__tags { justify-content: flex-start; }
}

/* サービス一覧内・ISOレスキューカード下部の建設業導線 */
.service-card__const {
  margin-top: auto;
  padding: 20px 22px;
  background: var(--c-cv-50);
  border-top: 3px solid var(--c-cv-500);
}
.service-card--iso { display: flex; flex-direction: column; }
.service-card__const-label {
  display: inline-block;
  padding: .25em 1em;
  font-size: .72rem;
  font-weight: 900;
  color: var(--c-white);
  background: var(--c-cv-600);
  border-radius: 2px;
}
.service-card__const-text {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.85;
}
.service-card__const-text strong { color: var(--c-cv-700); }
.service-card__const-btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: 14px;
  padding: .8em 1.8em;
  font-size: .9rem;
  font-weight: 900;
  color: var(--c-white);
  background: var(--c-cv-grad);
  border-radius: 999px;
  box-shadow: var(--shadow-cv);
  transition: transform .3s var(--ease);
}
.service-card__const-btn:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------
   26. REASON セクションの図表コンポーネント
       ── 2026-08 改修：長文を «図・表・フロー» へ置き換える ──

   about.html #reason 専用。各理由（01〜04）の本文を削り、
   ひと目で構造が伝わる部品に置き換えるために追加した。

   ＜共通ルール＞
   ・色は3系統（ネイビー / 水色 / オレンジ）＋無彩色のみ。新色は足さない。
   ・角丸は 2〜4px（--radius / --radius-lg）。ピル型はボタンだけ。
   ・矢印・ループ記号はすべて CSS 図形（border の三角）で描く。画像は使わない。
   ・モバイルは1カラムへ落とす（表は «カード積み» に解体する）。
   ・.strength__body は PC で約 640px 幅（1.5fr）。この中に収まる寸法で組む。
------------------------------------------------------------- */

/* 26-0. 各理由の «短いリード文»（旧 .strength__text の置き換え） */
.strength__lead {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--c-text-weak);
}
.strength__lead strong {
  color: var(--c-navy-800);
  font-weight: 900;
  background: linear-gradient(transparent 70%, rgba(247, 127, 0, .28) 70%);
}

/* =============================================================
   26-1. .rmx — 比較マトリクス（理由01の体制比較／理由02の作業分担）

   ＜レスポンシブの考え方＞
   スマホで3列の表を横スクロールさせると «比較» が成立しない
   （左右のセルを同時に見られない）ため、
     ・モバイル … 1行＝1ブロックのカード積み。
                  各セルの頭に .rmx__label（誰の話か）を出す。
     ・900px〜  … .rmx__label を隠して通常の table に戻す。
   既存の .comparison__table と同じ設計思想。
============================================================= */
.rmx {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  line-height: 1.75;
}
.rmx__caption {
  margin-bottom: 10px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--c-navy-600);
  text-align: left;
}
.rmx strong { color: var(--c-cv-700); font-weight: 900; }

/* -- モバイル：表の骨格を解体してブロック積みにする -- */
.rmx thead { display: none; }
.rmx tr { display: block; }
.rmx tbody tr + tr { margin-top: 14px; }
.rmx th[scope="row"] {
  display: block;
  padding: .5em .9em;
  background: var(--c-navy-800);
  color: var(--c-white);
  font-size: .82rem;
  font-weight: 900;
  text-align: left;
  border-radius: var(--radius) var(--radius) 0 0;
}
.rmx td {
  display: block;
  padding: .7em .9em;
  border: 1px solid var(--c-line);
  border-top: none;
  background: var(--c-white);
}
.rmx tr td:last-child { border-radius: 0 0 var(--radius) var(--radius); }
/* 各セルの «誰の話か» ラベル（モバイルのみ） */
.rmx__label {
  display: block;
  margin-bottom: 2px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--c-text-mute);
}
/* 自社セルは淡いオレンジ地＋左に太い罫で «推し» を示す */
.rmx__us {
  background: var(--c-cv-50);
  border-left: 3px solid var(--c-cv-500);
}
.rmx__us .rmx__label { color: var(--c-cv-700); }

@media (min-width: 900px) {
  /* -- PC：通常の表へ戻す -- */
  .rmx { display: table; }
  .rmx thead { display: table-header-group; }
  .rmx tr { display: table-row; }
  .rmx tbody tr + tr { margin-top: 0; }
  .rmx__label { display: none; }

  .rmx thead th {
    padding: .6em .8em;
    font-size: .78rem;
    font-weight: 900;
    color: var(--c-text-weak);
    background: var(--c-sky-50);
    border-bottom: 2px solid var(--c-line);
    text-align: center;
  }
  .rmx thead th:first-child { text-align: left; }
  /* 自社の列だけネイビーで反転させ、視線を集める */
  .rmx thead .rmx__us-head {
    color: var(--c-white);
    background: var(--c-navy-800);
    border-bottom-color: var(--c-cv-500);
  }

  .rmx th[scope="row"] {
    display: table-cell;
    width: 26%;
    padding: .8em;
    background: transparent;
    color: var(--c-navy-800);
    font-size: .82rem;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    vertical-align: middle;
  }
  .rmx td {
    display: table-cell;
    padding: .8em;
    border: none;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    vertical-align: middle;
  }
  .rmx tr td:last-child { border-radius: 0; }
  .rmx__us {
    background: var(--c-cv-50);
    border-left: none;
    box-shadow: inset 3px 0 0 var(--c-cv-500);
  }
}

/* =============================================================
   26-2. .rstats — 数値実績バッジ（理由01）
   1つ（合格率100%）だけを大きく扱い、残り2つは控えめに。
============================================================= */
.rstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rstats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px 6px;
  text-align: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.rstats__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--c-navy-800);
}
.rstats__num small { font-size: .48em; margin-left: .1em; }
.rstats__label {
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text-weak);
}
/* 主役の1つだけネイビー反転＋大きく */
.rstats__item--main {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
}
.rstats__item--main .rstats__num { color: var(--c-cv-400); font-size: 2.3rem; }
.rstats__item--main .rstats__label { color: var(--c-white); }

@media (min-width: 480px) {
  .rstats__num { font-size: 2.2rem; }
  .rstats__item--main .rstats__num { font-size: 2.7rem; }
  .rstats__label { font-size: .72rem; }
}

/* =============================================================
   26-3. .rprice — 料金カード（理由02）
============================================================= */
.rprice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rprice__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-cv-100);
  border-left: 3px solid var(--c-cv-500);
  border-radius: var(--radius);
}
.rprice__label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-text-weak);
}
.rprice__num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--c-cv-600);
  white-space: nowrap;
}
.rprice__num small { font-size: .44em; margin-left: .15em; }
/* 「縛りなし」は数字ではないので、書体を本文用に戻して級数を落とす */
.rprice__num--text {
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 1.1rem;
}
.rprice__item--note {
  border-color: var(--c-line);
  border-left-color: var(--c-navy-600);
}
.rprice__item--note .rprice__num { color: var(--c-navy-800); }
.rprice__foot {
  font-size: .72rem;
  line-height: 1.7;
  color: var(--c-text-mute);
}
.rprice__foot strong { color: var(--c-text-weak); }

@media (min-width: 700px) {
  .rprice { grid-template-columns: repeat(3, 1fr); }
  .rprice__item { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* =============================================================
   26-4. .ltree — メリットロジックツリー（理由03）
   «課題 → 対策 → 経営メリット» の3段。

   矢印は ::after の border で描く三角。
     ・モバイル … セルの下に «下向き»
     ・860px〜  … セルの右に «右向き»
   .ltree__head（列見出し）はPCでのみ表示する。
============================================================= */
.ltree { display: grid; gap: 18px; }

.ltree__head { display: none; }

.ltree__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 14px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.ltree__cell {
  position: relative;
  padding: 12px 14px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.6;
  border-radius: var(--radius);
}
/* セル内の小見出し（モバイルのみ。PCでは列見出しが担う） */
.ltree__cap {
  display: block;
  margin-bottom: 3px;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .75;
}
/* 矢印（下向き）。セルとセルの gap の中央に置く */
.ltree__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--c-sky-300);
}

.ltree__cell--issue {
  background: var(--c-sky-50);
  color: var(--c-text-weak);
  border: 1px dashed var(--c-sky-200);
}
.ltree__cell--act {
  background: var(--c-sky-100);
  color: var(--c-navy-800);
}
/* ゴール（経営メリット）だけオレンジで着地感を出す */
.ltree__cell--goal {
  background: var(--c-cv-500);
  color: var(--c-white);
  font-weight: 900;
}

@media (min-width: 860px) {
  .ltree__head {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 14px;
  }
  .ltree__head-cell {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: center;
    color: var(--c-text-mute);
  }
  .ltree__head-cell--goal { color: var(--c-cv-600); }

  .ltree__row {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
  .ltree__cap { display: none; }
  .ltree__cell {
    display: flex;
    align-items: center;
    font-size: .82rem;
  }
  /* 矢印を «右向き» へ差し替える */
  .ltree__cell:not(:last-child)::after {
    left: auto;
    right: -15px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    border-left: 9px solid var(--c-sky-300);
    border-right: none;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
}

/* =============================================================
   26-5. .cycle — 年間運用サポートサイクル（理由04）
   取得 → 内部監査 → マネジメントレビュー → 更新審査、
   そして翌年へ戻るループ構造。
============================================================= */
.cycle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
}
.cycle__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-sky-500);
  border-radius: var(--radius);
}
/* ステップ間の矢印（下向き）。gap の中央に落とす */
.cycle__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--c-sky-300);
}
.cycle__no {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--c-sky-600);
}
.cycle__title {
  font-size: .9rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy-800);
}
.cycle__text {
  font-size: .76rem;
  line-height: 1.6;
  color: var(--c-text-weak);
}
.cycle__text strong { color: var(--c-cv-700); font-weight: 900; }

.cycle__step--start { border-top-color: var(--c-navy-700); }
.cycle__step--start .cycle__no { color: var(--c-navy-700); }
/* ゴール（更新審査の合格）はオレンジで締める */
.cycle__step--goal {
  background: var(--c-cv-50);
  border-color: var(--c-cv-100);
  border-top-color: var(--c-cv-500);
}
.cycle__step--goal .cycle__no { color: var(--c-cv-600); }

/* ループの説明行。左の記号（回転矢印）だけCSSで描く */
.cycle__loop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 14px;
  font-size: .78rem;
  line-height: 1.7;
  color: var(--c-text-weak);
  background: var(--c-sky-50);
  border-left: 3px solid var(--c-sky-500);
  border-radius: var(--radius);
}
.cycle__loop strong { color: var(--c-navy-800); font-weight: 900; }
.cycle__loop-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: .25em;
  border: 2px solid var(--c-sky-500);
  /* 円の一部を欠けさせて «回っている» ことを示す */
  border-right-color: transparent;
  border-radius: 50%;
}

@media (min-width: 700px) {
  /* 4ステップを2×2に。矢印は «右向き» と «下向き» を使い分ける */
  .cycle { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  /* 左列（1・3番目）→ 右へ */
  .cycle__step:nth-child(odd)::after {
    left: auto;
    right: -16px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    border-left: 9px solid var(--c-sky-300);
    border-right: none;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
  /* 右列の2番目 → 次の行へ «下向き»（3番目は左列に戻る） */
  .cycle__step:nth-child(2)::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -19px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--c-sky-300);
    border-bottom: none;
  }
}

/* 26-6. 図表化にともなうビジュアル列の調整（PCのみ）
   本文が «表・フロー» に置き換わったことで .strength__body が縦に伸び、
   イラスト列（align-self: stretch）が数百px単位で間延びしていた。
   object-fit: contain なので絵は横幅で頭打ちになり、上下に大きな余白が
   できてしまう。高さに上限を設けて、絵を列の中央に据える。 */
@media (min-width: 1000px) {
  .strength__visual { justify-content: center; }
  .strength__icon { flex: 0 1 auto; max-height: 420px; }
}

/* -------------------------------------------------------------
   27. スマホの改行位置・はみ出し対策（2026-08 点検にもとづく修正）

   ＜点検でわかったこと＞
   375px 時点の «本文の使える幅» は
     ・.container         … 375 - (--gutter 20px × 2) = 335px
     ・カードの中（padding 22〜26px）… 283〜291px
   これに対し、見出しの clamp() の «下限値» が大きすぎるため、
   13〜16文字の1行が幅を1〜3割超えてしまう箇所が複数あった。
   例）.section-head__title は下限 1.62rem = 25.9px。
       「こんなお悩みありませんか？」13文字 × 25.9px = 337px > 335px。

   ＜方針＞
   ① 見出しの clamp() 下限を «375px で確実に収まる» 値まで下げる。
      vw 側（真ん中の値）は触らない。560px 以上の見た目は変わらない。
   ② 折り返し自体は body の word-break: auto-phrase（文節改行）に任せる。
      個々の «切れてほしくない語» は HTML 側の .nobr が担当し、
      1つの .nobr は最長11文字程度に収める（.nobr のコメント参照）。
   ③ 欧文の長い連続（URL・英字サービス名など）だけは最後の保険として
      overflow-wrap: anywhere で強制的に折る。日本語には影響しない。
------------------------------------------------------------- */

/* 27-0. 欧文の長い連続によるはみ出しを止める最終防衛ライン。
   日本語は auto-phrase が先に折るため、この指定が効くのは
   «途中に改行機会がまったく無い» 欧文・数字の連続だけ。 */
@media (max-width: 559px) {
  p, li, dd, dt, td, th, figcaption,
  h1, h2, h3, h4, h5, h6,
  .btn, .hub-card__title, .service-card__title {
    overflow-wrap: anywhere;
  }
}

/* 27-1. 見出しの clamp() 下限を 375px 基準へ引き下げる。
   （数値の根拠は各行のコメント。文字数 × px が 335px / 283px を
     下回るように決めている） */
@media (max-width: 559px) {
  /* ヒーロー見出し：下限 2rem(32px) → 1.75rem(28px)
     「会社の信頼と生産性を」10文字 = 320px → 280px */
  .hero__title { font-size: clamp(1.75rem, 5.8vw, 3.35rem); }

  /* 下層ページ見出し：下限 1.7rem(27.2px) → 1.35rem(21.6px)
     「認証取得から業務改善のIT化まで、」15文字 = 408px → 324px */
  .page-hero__title { font-size: clamp(1.35rem, 4.8vw, 2.7rem); }

  /* セクション見出し：下限 1.62rem(25.9px) → 1.45rem(23.2px)
     「こんなお悩みありませんか？」13文字 = 337px → 302px */
  .section-head__title { font-size: clamp(1.45rem, 5vw, 2.9rem); }

  /* CTA見出し：下限 1.6rem(25.6px) → 1.45rem(23.2px) */
  .cta__title { font-size: clamp(1.45rem, 5.4vw, 2.6rem); }

  /* REASON カード内の見出し：カード内幅は 283px しかない。
     下限 1.2rem(19.2px) → 1.1rem(17.6px)
     「面倒な書類作成は「丸投げOK」。」15文字 = 288px → 264px */
  .strength__title { font-size: clamp(1.1rem, 3.6vw, 1.55rem); }
  .strength__title--hero { font-size: clamp(1.2rem, 4.4vw, 1.9rem); }

  /* サービスカードの見出し（「ISO・Pマーク取得コンサルティング」が最長） */
  .service-card__title { font-size: 1.1rem; }

  /* 文書スリム化・ISOレスキュー帯の見出し */
  .slim__title { font-size: clamp(1.05rem, 3.8vw, 1.6rem); }
  .lp-banner__title { font-size: clamp(1.18rem, 4.6vw, 2.05rem); }
}

/* 27-2. 320〜400px の最狭帯。ここだけもう一段落とす。
   （Android の 360px 幅では本文幅が 320px しかない） */
@media (max-width: 400px) {
  .hero__title { font-size: 1.62rem; }
  .page-hero__title { font-size: 1.28rem; }
  .section-head__title { font-size: 1.34rem; }
  .cta__title { font-size: 1.34rem; }
}

/* 27-3. ボタン：ラベルが2行になっても «潰れない / 高さが揃う» ようにする。

   .btn は inline-flex なので、ラベルが折り返すと
   アイコン（矢印）とテキストが縦にずれたり、
   上下の padding が効かずに窮屈に見えることがあった。 */
@media (max-width: 559px) {
  .btn {
    /* 折り返しても中央揃えを保つ */
    text-align: center;
    line-height: 1.5;
    /* 1行でも2行でも «押せる面» の高さを確保する */
    min-height: 46px;
  }
  .btn--lg, .btn--xl { min-height: 58px; }
  /* 矢印アイコンはテキストと一緒に折り返させない */
  .btn .icon--arrow, .btn .icon--ext { flex-shrink: 0; }

  /* 「もっと見る」導線：2つ並ぶ場合は縦に積んで幅いっぱいにする
     （横並びのままだと1つあたり 160px しか取れず、
       ラベルが3行に折り返してガタつく） */
  .section-more { flex-direction: column; align-items: stretch; gap: 12px; }
  .section-more .btn { width: 100%; }
}

/* 27-4. カードの内側余白：文字がぎりぎりまで迫るのを避ける。
   見出しを小さくしたぶん、行数が増えて «詰まって» 見えるため、
   最狭帯では左右を少しだけ詰めて1行あたりの文字数を稼ぐ。 */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .strength__item { padding: 36px 18px 30px; }
  .strength__visual { margin: 4px -18px -30px; }
  .hub-card { padding: 22px 16px; }
  .hub-card--link { padding: 0; }
  .hub-card--link > a { padding: 22px 16px; }
}