/* ★自動生成: scripts/build-css.mjs。直接編集しない。
   編集するのは tokens.json（値）/ scripts/templates/wp-faithful-base.css（不変・共通）/ site/scss/decorations.scss（装飾）。 */

/* ---------- (1) tokens (:root) <- site/tokens.json ---------- */
:root {
  --wp--preset--color--base: #f5f6f8;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--primary: #7087af;
  --wp--preset--color--primary-soft: #e9edf4;
  --wp--preset--color--navy: #50658a;
  --wp--preset--color--accent: #d4a373;
  --wp--preset--color--accent-deep: #8f6434;
  --wp--preset--color--logo: #6c9bd2;
  --wp--preset--color--text: #2f2f2f;
  --wp--preset--color--text-light: #68707d;
  --wp--preset--color--border: #e2e7ee;
  --wp--preset--color--dark: #2c3a55;

  --wp--preset--font-family--sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --wp--preset--font-family--serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --wp--preset--font-family--display: 'Jost', 'Noto Sans JP', sans-serif;

  --wp--preset--font-size--site-sm: 14px;
  --wp--preset--font-size--site-base: 16px;
  --wp--preset--font-size--site-lg: 20px;
  --wp--preset--font-size--site-xl: 28px;
  --wp--preset--font-size--site-2xl: 40px;
  --wp--preset--font-size--site-3xl: 48px;

  --wp--preset--spacing--space-xs: 8px;
  --wp--preset--spacing--space-sm: 16px;
  --wp--preset--spacing--space-md: 24px;
  --wp--preset--spacing--space-lg: 32px;
  --wp--preset--spacing--space-xl: 48px;
  --wp--preset--spacing--space-2xl: 64px;
  --wp--preset--spacing--space-3xl: 80px;
  --wp--preset--spacing--space-4xl: 120px;

  --content-size: 1140px;
}

/* ---------- (1b) 色ユーティリティ（tokens.colors から生成） ---------- */
/* WP プリセット色ユーティリティ（tokens.colors から生成）。背景透明バグ防止＝§2 */
.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-white-color { color: var(--wp--preset--color--white) !important; }
.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-primary-soft-color { color: var(--wp--preset--color--primary-soft) !important; }
.has-navy-color { color: var(--wp--preset--color--navy) !important; }
.has-accent-color { color: var(--wp--preset--color--accent) !important; }
.has-accent-deep-color { color: var(--wp--preset--color--accent-deep) !important; }
.has-logo-color { color: var(--wp--preset--color--logo) !important; }
.has-text-color { color: var(--wp--preset--color--text) !important; }
.has-text-light-color { color: var(--wp--preset--color--text-light) !important; }
.has-border-color { color: var(--wp--preset--color--border) !important; }
.has-dark-color { color: var(--wp--preset--color--dark) !important; }
.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-white-background-color { background-color: var(--wp--preset--color--white) !important; }
.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-primary-soft-background-color { background-color: var(--wp--preset--color--primary-soft) !important; }
.has-navy-background-color { background-color: var(--wp--preset--color--navy) !important; }
.has-accent-background-color { background-color: var(--wp--preset--color--accent) !important; }
.has-accent-deep-background-color { background-color: var(--wp--preset--color--accent-deep) !important; }
.has-logo-background-color { background-color: var(--wp--preset--color--logo) !important; }
.has-text-background-color { background-color: var(--wp--preset--color--text) !important; }
.has-text-light-background-color { background-color: var(--wp--preset--color--text-light) !important; }
.has-border-background-color { background-color: var(--wp--preset--color--border) !important; }
.has-dark-background-color { background-color: var(--wp--preset--color--dark) !important; }

/* ---------- (2) WP忠実ベース <- scripts/templates/wp-faithful-base.css ---------- */
/* =====================================================================
   wp-faithful-base.css — 実WordPress を忠実に再現する「不変ベース」
   ---------------------------------------------------------------------
   ★全プロジェクト共通。サイトごとに書き換えない（＝WPシミュレータ層）。
   過去の忠実性バグ（背景透明 / contentSize / columns縦揃え / cover padding /
   flex stretch / cover overlayのz-index）は全てこの層。1ファイルに固定して再発を防ぐ。

   使い方: 各サイトの style.css 冒頭で読み込む:
     @import "wp-faithful-base.css";
   このファイルは token 変数（--wp--preset--*）が :root で定義済みである前提。
   token は site の style.css / tokens.css 側で定義する（gen-root-css.mjs）。
   ===================================================================== */

/* box-sizing */
* { box-sizing: border-box; }
.wp-block-group { box-sizing: border-box; }

/* body margin: WP/テーマは body 既定 8px マージンを除去（alignfull が端まで届く前提）。
   静的にこれが無いと alignfull が 8px 内側に入り x=8/w=幅-16 で WP とズレる（型非依存）。 */
html, body { margin: 0; }

/* ★body 背景／文字色: WP の global-styles は body に background/color を必ず持つが、静的で未指定だと
   body が透明＝プレビューで暗幕が透けて「暗いサイト」に誤認、かつ WP と不一致になる（毎サイト踏む）。
   ここで必ず出す＝decorations で書き忘れても透明にならない。ページ背景は `base` スラッグが正
   （tokens.colors に base を置く＝自由デザインの約束）。未定義なら白にフォールバック。
   decorations の body 規則は style.css の後段なので、必要ならサイト側で上書きできる。 */
body { background-color: var(--wp--preset--color--base, #ffffff); color: var(--wp--preset--color--text, #2c2622); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* constrained: WP は constrained の「子」を contentSize 幅に絞る（blanket で属性を潰さない＝§4.6） */
.is-layout-constrained > * { max-width: var(--content-size, 1140px); margin-left: auto; margin-right: auto; }
.is-layout-constrained > .alignfull { max-width: none; }
.alignfull { max-width: none; width: 100%; }

/* ★block-gap（flow/constrained）: CSS の gap: は flex/grid 専用で flow には無効。WP は flow/constrained の
   子に margin-block-start で block-gap を入れる。これを忠実再現する（無いと blockGap 指定のセクションで
   子（FAQグループ・News行リスト等）が 0px で密着＝スペース欠け）。値はマークアップ側が
   --wp--style--block-gap で渡す（inject-block-gap.mjs が inline gap: から自動補完）。未設定なら 0＝無害。 */
.is-layout-constrained > * + *,
.is-layout-flow > * + * { margin-block-start: var(--wp--style--block-gap, 0); }

/* ★段落の既定マージン除去: WP/TT5 は core paragraph の margin を 0 にし、要素間スペースは block-gap
   （flow/constrained の margin-block-start）か flex/grid の gap で出す。静的の <p> は UA 既定の
   margin（上下 ~1em）を残すため、flex カード内（card-body / voice-card 等）で WP より縦が膨らみ
   measure の h が合わない（型非依存・毎サイト踏む）。ここで 0 にして静的==WP にする。 */
p { margin: 0; }

/* ★見出しの既定マージン除去: WP/TT5 は core heading の margin を 0 にし、要素間スペースは block-gap で出す。
   静的の hN は UA 既定マージン（~0.67em）を残すため WP より縦が膨らむ。**要素セレクタ（低詳細度）で 0** に
   するのがミソ: 上の `.is-layout-constrained > * + *`（block-gap）が勝てるので、非先頭の見出しは block-gap 分
   だけ離れ（WP と同じ）、先頭の見出しは 0 になる。`.wp-block-heading{margin:0}` を decorations に書くと
   block-gap と同詳細度で後勝ちし block-gap を殺す（plan の page-header で h1↔eyebrow 間が詰まる）ので、ここで element 指定にする。 */
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* flex: WP は flex グループに align-items:flex-start を出力（子が内容幅に縮む。stretch だと見出し幅がズレる） */
.is-layout-flex { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-md, 24px); align-items: flex-start; }

/* columns: 縦揃えはクラス起点（blanket の align-items:center にしない＝§3.8） */
.wp-block-columns { display: flex; gap: var(--wp--preset--spacing--space-xl, 48px); }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }

.wp-block-image { margin: 0; }
.wp-block-image img { max-width: 100%; height: auto; }   /* WP/テーマ既定。無いと原寸画像がカラムを突き破る（初回バグの定番） */
/* 画像は既定で角丸なし（＝WP/TT5 の実挙動。四角が忠実）。角丸が欲しい設計の時だけ
   そのサイトの tokens/decorations で `.wp-block-image img{border-radius:…}` を付ける。
   ★ここに固定の border-radius を焼かない（全サイトの画像が勝手に丸くなる＝美的デフォルトの混入）。 */
/* ★constrained の「直接の子」画像は他の子と同様に中央寄せ（WP の実挙動）。
   上の margin:0 が constrained 子の中央寄せ（margin-inline:auto）を同詳細度で打ち消し、
   記事本文(article-body 等)直下の figure が左寄せになるのを防ぐ（型非依存・毎サイト踏む）。 */
.is-layout-constrained > .wp-block-image { margin-left: auto; margin-right: auto; }

/* テキスト配置 */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* ★WP プリセット色ユーティリティ（has-{slug}-color / has-{slug}-background-color）は
   パレットのスラッグ依存なので、ここには固定で書かない。
   build-css.mjs が tokens.json の colors から生成して style.css に挿入する（!important も WP に合わせる）。
   無いと has-*-background-color が静的で無視され全セクション背景が透明になる（背景バグの元）。 */

/* ボタン（基本。色は has-スラッグ や インラインで付与） */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-sm, 16px); }
.wp-block-button__link {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: 16px 36px; /* TT5 既定ボタン padding（型非依存）。静的に無いと WP だけ大きくなる（h・x ズレ） */
  border-radius: 0;   /* 四角＝中立（WP/TT5 既定の pill を打ち消す）。build-theme-json がこの値を導出＝静的==WP。
                         ★角丸・hover・transition は"スタイル"なので焼かない。欲しい設計だけ decorations で付ける（REMOVED-STYLE-DEFAULTS.md）。 */
}
/* ★outline スタイル: WP core の「Outline」は透明背景＋2px 枠（枠色＝文字色 currentColor）。
   静的ベースに無いと is-style-outline ボタンが塗りボタンに見える（枠が出ない）。型非依存。
   枠色を文字と変えたい等の個別調整は当該ボタンの css 属性で。 */
.is-style-outline > .wp-block-button__link { background-color: transparent; border: 2px solid currentColor; }

/* 見出しフォントは"スタイル"（サイト毎の選択）→ 焼かない。未指定なら body フォントを継承（中立）。
   serif 見出しにしたい等はそのサイトの decorations で `.wp-block-heading{font-family:var(--…serif)}`。
   build-theme-json がその値を CSS から導出して global-styles に出すので静的==WP（REMOVED-STYLE-DEFAULTS.md）。 */

/* ★ロゴ（site-title）のリンク色: WP core は site-title の <a> を color:inherit にする
   （`.wp-block-site-title a{color:inherit}`）。静的でロゴを <p class="site-logo-text"><a> で書くと
   <a> が既定リンク色（青）になり WP と不一致＝毎サイト踏む。WP挙動を忠実再現する。 */
.site-logo-text a { color: inherit; text-decoration: none; }

.wp-block-list { padding-left: 1.2em; }
.wp-block-list li { margin-bottom: var(--wp--preset--spacing--space-xs, 8px); }
.wp-block-separator { border: none; border-top: 1px solid var(--wp--preset--color--border); margin: var(--wp--preset--spacing--space-xl, 48px) auto; }

/* Cover の WP プリミティブ（グラデ等の装飾はサイト側 style.css に書く）。
   ・padding:16px = WP core の最小 padding ・inner-container は z-index:2 で overlay の上 */
.wp-block-cover { position: relative; display: flex; align-items: center; overflow: hidden; padding: 16px; background-size: cover; background-position: center; }
.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }

/* レスポンシブの不変部分（columns 縦積み・flex 均等カードの縦積み） */
@media (max-width: 768px) {
  .wp-block-columns { flex-direction: column; gap: var(--wp--preset--spacing--space-lg, 32px); }
  [style*="flex-basis:0"] { flex-basis: 100% !important; }
}

/* ---------- (3) サイト固有の装飾 <- site/scss/decorations.scss ---------- */
@charset "UTF-8";
/* =====================================================================
   ヒヤシンスソフト decorations
   信頼のブルーグレー × 温かみのキャメル。BtoBの落ち着き＋伴走型の親しみ。
   角丸は控えめ、アニメーションは上質なフェードインのみ。
   ルールは block-mappable（横断セレクタ・:has()・100vw 禁止）を守る。
   ===================================================================== */
/* スマホは 767px 以下（768px＝iPad縦はタブレット2カラム扱い） */
/* ---------- 基礎タイポグラフィ ---------- */
body {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--site-base);
  font-weight: 400; /* TT5 既定は 300 — 明示しないと WP 側だけ細くなる */
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

/* 見出しは TT5 が element スタイル（line-height 1.125 / letter-spacing -0.1px 等）を当てる。
   静的では body 継承なので、WP でも同じになるよう inherit を明示（クラス指定があればそちらが勝つ） */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 行末の孤立行（最終行に1〜2文字だけ残る）を抑制する。
   WP(TT5) は p/hN に text-wrap:pretty を当てるので、静的にも同じ規則を置いて
   静的==WP の行組みを一致させる。表セル・リストにも広げて日本語の折り返しを整える。 */
p, h1, h2, h3, h4, h5, h6, li, td, figcaption {
  text-wrap: pretty;
}

/* ---------- 共通レイアウト ---------- */
.inner {
  max-width: var(--content-size);
  margin-inline: auto;
  padding-inline: 24px;
}

.inner-narrow {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 104px;
}

.bg-white {
  background: var(--wp--preset--color--white);
}

/* ---------- 装飾改行のレスポンシブ制御 ---------- */
/* 日本語の意味の切れ目に入れた <br> は、画面が狭いと「前半が折り返して1〜2文字だけ残る
   孤立行」を作る（例: 「…なくし、」の"し、"だけが1行）。幅に応じて改行自体を無効化し、
   自然な流し込みに戻す。.br-pc = タブレット以下で無効 / .br-sp = スマホで無効。 */
@media (max-width: 1024px) {
  .br-pc {
    display: none;
  }
}
@media (max-width: 767px) {
  .br-sp {
    display: none;
  }
}
/* ---------- PC の日本語折り返し ---------- */
/* 既定の日本語折り返しは文字単位のため「確かな成果（花）を咲／かせます。」のように
   送り仮名が分断される。PC 幅だけ文節単位の改行に切り替えて防ぐ。
   SP/タブレットの折り返しには一切影響させない（$bp-tab より上のみ適用）。
   未対応ブラウザでは無視されるので、特に目立つ箇所は <br class="br-pc"> でも担保する。 */
@media (min-width: 1025px) {
  .mission-body p,
  .sec-lead, .page-lead, .case-detail-title,
  .case-title, .case-excerpt,
  .service-text, .service-detail-text, .service-detail-points li,
  .mvv-text, .reason-text, .step-text, .consult-list li,
  .case-result-label, .message-body p,
  .doc-body p, .doc-body li, .spec-table td {
    word-break: auto-phrase;
  }
}
@media (max-width: 767px) {
  .section {
    padding-block: 64px;
  }
}
/* ---------- セクション見出し ---------- */
.eyebrow {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--site-sm);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  margin-bottom: 10px;
}

.sec-head {
  text-align: center;
  margin-bottom: 56px;
}
.sec-head .sec-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-wrap: balance;
}
.sec-head .sec-lead {
  margin-top: 18px;
  color: var(--wp--preset--color--text-light);
  text-wrap: balance;
}

@media (max-width: 767px) {
  .sec-head {
    margin-bottom: 36px;
  }
  .sec-head .sec-title {
    font-size: 24px;
  }
}
.sec-foot {
  text-align: center;
  margin-top: 56px;
}

@media (max-width: 767px) {
  .sec-foot {
    margin-top: 36px;
  }
}
/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid rgba(112, 135, 175, 0.45);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn-primary {
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}
.btn-primary:hover {
  background: var(--wp--preset--color--dark);
}

.btn-accent {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--dark);
}
.btn-accent:hover {
  background: #e0b789;
}

.btn-outline {
  background: transparent;
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--navy);
}
.btn-outline:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

.btn-white {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}
.btn-white:hover {
  background: var(--wp--preset--color--primary-soft);
}

/* ---------- ヘッダー ---------- */
/* WP: ヘッダーはテンプレートパーツの外側ラッパ <header class="wp-block-template-part"> に包まれる。
   sticky は「親要素の高さの範囲内」でしか効かず、内側 .site-header に掛けても親ラッパ(76px)を
   超えた瞬間に流れる。ページ全高を持つ .wp-site-blocks 直下のラッパ自体を sticky にする。
   静的サイトには .wp-block-template-part が無いので無害（.site-header の body直下 sticky が効く）。 */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--wp--preset--color--border);
  /* blur は ::before に置く（要素自身に backdrop-filter を置くと fixed の
     モバイルメニューの包含ブロックになりパネルが潰れる） */
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}

.site-header-inner {
  max-width: var(--content-size);
  margin-inline: auto;
  padding-inline: 24px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-logo-text {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  letter-spacing: 0.12em;
}
.site-logo-text a {
  color: var(--wp--preset--color--logo);
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.25;
}

.logo-l1 {
  color: var(--wp--preset--color--navy);
}

.logo-l2 {
  color: var(--wp--preset--color--logo);
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.site-nav li {
  margin: 0;
}
.site-nav p {
  margin: 0;
}
.site-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  font-size: 15px;
  font-weight: 500;
  padding-block: 6px;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.site-nav a:hover {
  color: var(--wp--preset--color--navy);
}
.site-nav a:hover::after {
  transform: scaleX(1);
}

.nav-contact {
  display: none;
} /* PCは右のCTAボタンが担う。SPメニュー内でのみ表示 */
.nav-sub {
  display: none;
} /* 資料DL・SNSはSPメニュー内のみ */
.header-cta {
  padding: 12px 28px;
}

.nav-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .header-cta {
    display: none;
  }
  .nav-toggle {
    display: block;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 110;
  }
  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--wp--preset--color--navy);
    margin: 6px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .site-nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--wp--preset--color--white);
    padding: 40px 28px;
    overflow-y: auto;
    display: none;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav a {
    display: block;
    padding: 16px 4px;
    border-bottom: 1px solid var(--wp--preset--color--border);
    font-size: 16px;
  }
  .site-nav a::after {
    content: none;
  }
  .nav-contact {
    display: block;
  }
  .nav-sub {
    display: block;
    margin-top: 32px;
    text-align: center;
  }
  .nav-sub .btn {
    width: 100%;
  }
  ul.nav-sns {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    margin: 28px 0 0;
    padding: 0;
  }
  ul.nav-sns a {
    color: var(--wp--preset--color--primary);
    border-bottom: none;
    padding: 8px;
  }
  ul.nav-sns svg {
    width: 22px;
    height: 22px;
  }
  .nav-open {
    overflow: hidden;
  }
  .nav-open .site-nav {
    display: block;
  }
  .nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}
/* ---------- 掲載画像 ---------- */
/* イラスト（後日、実写に差し替え可能。縦横比は画像の実寸で決まる） */
.visual-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.case-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

/* ---------- 画像プレースホルダ（写真差し替え前提） ---------- */
.ph {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--wp--preset--color--primary), var(--wp--preset--color--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
.ph svg {
  width: 84px;
  height: 84px;
  opacity: 0.55;
  position: relative;
  z-index: 1;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.2), transparent 55%);
}

.ph-warm {
  background: linear-gradient(140deg, var(--wp--preset--color--accent), #b98a5e);
}

.ph-deep {
  background: linear-gradient(140deg, var(--wp--preset--color--navy), var(--wp--preset--color--dark));
}

.ph-label {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

/* ---------- ファーストビュー ---------- */
.hero {
  background: radial-gradient(circle at 85% 10%, rgba(212, 163, 115, 0.12), transparent 45%), linear-gradient(135deg, #ffffff 0%, #eef1f6 55%, #e4eaf3 100%);
  overflow: hidden;
}

.hero {
  padding-block: 104px;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

/* コピー側を広めに。44px×15文字の見出しが 1/2 幅（518px）に収まらず
   「し、」だけの孤立行が出ていたため、幅と文字サイズの両方で解消する。 */
.hero-copy {
  flex: 1.6 1 0;
  min-width: 0;
}

.hero-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--site-sm);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--wp--preset--color--primary);
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--text);
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  color: var(--wp--preset--color--navy);
  background: linear-gradient(transparent 68%, rgba(212, 163, 115, 0.38) 68%);
}

.hero-lead {
  margin-top: 24px;
  font-size: 17px;
  color: var(--wp--preset--color--text-light);
  letter-spacing: 0.05em;
}

.hero-points {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.hero-points li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 13px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-light);
}
.hero-points strong {
  flex: 0 0 52px;
  color: var(--wp--preset--color--navy);
  font-size: 12px;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.hero-visual {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.hero-visual .ph {
  aspect-ratio: 4/3;
}
.hero-visual::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 45%;
  height: 45%;
  border-radius: 12px;
  background: rgba(212, 163, 115, 0.35);
  z-index: 0;
}
.hero-visual .ph {
  position: relative;
  z-index: 1;
}
.hero-visual .visual-img {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .hero {
    padding-block: 56px;
  }
  .hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-lead {
    font-size: 15px;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
  }
  .hero-visual::before {
    right: -12px;
    bottom: -12px;
  }
}
/* ---------- Mission ---------- */
.mission-copy {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--navy);
  text-wrap: balance;
  text-align: center;
}

.mission-body {
  margin-top: 28px;
  text-align: center;
  color: var(--wp--preset--color--text-light);
}
.mission-body p {
  margin-top: 12px;
}

@media (max-width: 767px) {
  .mission-copy {
    font-size: 20px;
  }
  .mission-body {
    text-align: left;
  }
}
/* ---------- 選ばれる理由（3 Reasons） ---------- */
.reasons-cols {
  display: flex;
  align-items: center;
  gap: 64px;
}

.reasons-visual {
  flex: 5 1 0;
  min-width: 0;
}
.reasons-visual .ph {
  aspect-ratio: 4/3.4;
}

.reasons-list {
  flex: 6 1 0;
  min-width: 0;
}

.reason-item {
  display: flex;
  gap: 24px;
  padding-block: 26px;
}
.reason-item + .reason-item {
  border-top: 1px solid var(--wp--preset--color--border);
}

.reason-num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--wp--preset--color--accent-deep);
  flex: 0 0 56px;
}

.reason-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  text-wrap: balance;
}

.reason-text {
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
}

@media (max-width: 767px) {
  .reasons-cols {
    flex-direction: column;
    gap: 36px;
  }
}
/* ---------- サービスカード ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .card-grid, .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .card-grid, .card-grid-4 {
    grid-template-columns: 1fr;
  }
}
.service-card {
  display: block;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 40px 32px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(80, 101, 138, 0.14);
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-name {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  text-wrap: balance;
}

/* 4カラム時はカード内側が 183px しかなく「SES・エンジニア支援」の最後の1文字だけが
   折り返していた。左右パディングを詰め、見出しを僅かに小さくして1行に収める。 */
.card-grid-4 .service-card {
  padding-inline: 24px;
}

.card-grid-4 .service-name {
  font-size: 18px;
}

.service-text {
  font-size: 14px;
  color: var(--wp--preset--color--text-light);
}

.card-more {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--accent-deep);
}

/* ---------- 事例カード ---------- */
.case-card {
  display: block;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(80, 101, 138, 0.14);
}
.case-card .ph {
  border-radius: 0;
  aspect-ratio: 16/10;
}

.case-body {
  padding: 26px 26px 30px;
}

.case-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.case-meta time {
  font-family: var(--wp--preset--font-family--display);
  font-size: 13px;
  color: var(--wp--preset--color--text-light);
  letter-spacing: 0.08em;
}

.chip {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--navy);
  font-size: 12px;
  font-weight: 600;
}

.case-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 10px;
  /* 長い事例タイトルが狭いカードで折り返すと最終行が数文字だけ残る。行幅を均等化する */
  text-wrap: balance;
}

.case-excerpt {
  font-size: 14px;
  color: var(--wp--preset--color--text-light);
}

.case-result-summary {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--wp--preset--color--navy);
}
.case-result-summary span {
  display: inline-block;
  margin-right: 8px;
  color: var(--wp--preset--color--accent-deep);
  font-size: 12px;
}

/* ---------- News 行リスト ---------- */
.news-list {
  border-top: 1px solid var(--wp--preset--color--border);
  max-width: 860px;
  margin-inline: auto;
}

.news-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.25s ease;
}
.news-row:hover {
  background: var(--wp--preset--color--white);
}
.news-row:hover .news-title {
  color: var(--wp--preset--color--navy);
}
.news-row time {
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--text-light);
  /* 「2026年8月10日」など桁の多い日付が「…20／日」と折り返さない幅を確保する */
  flex: 0 0 128px;
  white-space: nowrap;
}

.news-title {
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s ease;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .news-row {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .news-title {
    flex-basis: 100%;
  }
}
/* ---------- フッターCTA帯 ---------- */
.cta-band {
  position: relative;
  background: radial-gradient(circle at 88% 20%, rgba(212, 163, 115, 0.22), transparent 50%), linear-gradient(135deg, var(--wp--preset--color--navy), var(--wp--preset--color--dark));
  color: var(--wp--preset--color--white);
  padding-block: 88px;
  text-align: center;
  overflow: hidden;
}

.cta-band-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--site-sm);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 14px;
}

.cta-band-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

.cta-band-lead {
  margin-top: 18px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: balance;
}

.cta-band-actions {
  margin-top: 36px;
}

.cta-band-hours {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767px) {
  .cta-band {
    padding-block: 60px;
  }
  .cta-band-title {
    font-size: 23px;
  }
  .cta-band-actions .btn {
    width: 100%;
  }
}
/* ---------- フッター ---------- */
.site-footer {
  background: var(--wp--preset--color--dark);
  color: #dfe5ef;
}
.site-footer p {
  margin: 0;
}
.site-footer a {
  color: #dfe5ef;
  text-decoration: none;
  transition: color 0.25s ease;
}
.site-footer a:hover {
  color: var(--wp--preset--color--accent);
}

.footer-inner {
  max-width: var(--content-size);
  margin-inline: auto;
  padding: 72px 24px 32px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-logo a {
  color: #ffffff;
}
.footer-logo .logo-l1 {
  color: #ffffff;
}
.footer-logo .logo-l2 {
  color: #a9c4e6;
}

.footer-company {
  margin-top: 14px;
  font-size: 14px;
}

.footer-sns {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
}
.footer-sns li {
  margin: 0;
}
.footer-sns svg {
  width: 20px;
  height: 20px;
}

.footer-nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, auto));
  gap: 12px 40px;
  margin: 0;
  padding: 0;
}
.footer-nav li {
  margin: 0;
}
.footer-nav a {
  font-size: 14px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
}

.footer-copy {
  font-size: 12px;
  color: #a8b3c6;
  letter-spacing: 0.06em;
}

.to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--display);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.to-top:hover {
  border-color: var(--wp--preset--color--accent);
}

@media (max-width: 767px) {
  .footer-top {
    flex-direction: column;
    gap: 36px;
  }
  .footer-inner {
    padding-top: 52px;
  }
  .footer-nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
  }
}
/* ---------- 下層ページヘッダー ---------- */
.page-header {
  background: radial-gradient(circle at 85% 0%, rgba(212, 163, 115, 0.14), transparent 45%), linear-gradient(135deg, #eef1f6, #e4eaf3);
  padding-block: 76px;
  text-align: center;
}
.page-header .eyebrow {
  margin-bottom: 12px;
}

.page-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-wrap: balance;
}

.page-lead {
  margin-top: 18px;
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .page-header {
    padding-block: 48px;
  }
  .page-title {
    font-size: 26px;
  }
}
/* ---------- サービス詳細 ---------- */
.service-detail {
  display: flex;
  align-items: center;
  gap: 56px;
  /* ページ内リンクの着地点が固定ヘッダー(76px)の下に潜るのを防ぐ */
  scroll-margin-top: 104px;
}
.service-detail + .service-detail {
  margin-top: 88px;
}
.service-detail .ph {
  aspect-ratio: 4/3;
  flex: 4 1 0;
  min-width: 0;
}

.service-detail-body {
  flex: 6 1 0;
  min-width: 0;
}

.service-detail-num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--wp--preset--color--accent-deep);
  margin-bottom: 10px;
}

.service-detail-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  text-wrap: balance;
}

.service-detail-text {
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
}

.service-detail-points {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.service-detail-points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  text-wrap: balance; /* 2行になる項目の最終行が数文字だけ残るのを防ぐ */
}
.service-detail-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  transform: rotate(-45deg);
}

.service-detail.is-reverse {
  flex-direction: row-reverse;
}

.service-diagram {
  flex: 4 1 0;
  min-width: 0;
  aspect-ratio: 4/3;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(145deg, var(--wp--preset--color--white), var(--wp--preset--color--primary-soft));
  padding: 26px;
  display: grid;
  align-content: center;
  gap: 16px;
  overflow: hidden;
}

.service-diagram-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.service-diagram-step {
  min-height: 82px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(80, 101, 138, 0.12);
  padding: 14px 12px;
}

.service-diagram-num {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--accent-deep);
  margin-bottom: 6px;
}

.service-diagram-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--navy);
}

.service-diagram-note {
  font-size: 13px;
  color: var(--wp--preset--color--text-light);
}

@media (max-width: 767px) {
  .service-detail, .service-detail.is-reverse {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }
  .service-detail + .service-detail, .service-detail.is-reverse + .service-detail {
    margin-top: 56px;
  }
  .service-detail .ph, .service-detail.is-reverse .ph,
  .service-detail .service-diagram, .service-detail.is-reverse .service-diagram {
    flex: none;
  }
  .service-diagram {
    padding: 20px;
  }
  .service-diagram-row {
    grid-template-columns: 1fr;
  }
}
/* ---------- 支援の流れ（ステップ） ---------- */
.steps {
  display: flex;
  gap: 20px;
}

.step {
  flex: 1 1 0;
  min-width: 0;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 30px 22px;
  text-align: center;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--display);
  font-size: 18px;
  font-weight: 500;
}

.step-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-text {
  font-size: 13px;
  color: var(--wp--preset--color--text-light);
}

@media (max-width: 1024px) {
  .steps {
    flex-wrap: wrap;
  }
  .steps .step {
    flex: 1 1 30%;
  }
}
@media (max-width: 767px) {
  .steps {
    flex-direction: column;
  }
  .steps .step {
    flex: none;
  }
}
/* ---------- よくある相談 ---------- */
.consult-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  margin-inline: auto;
}
.consult-list li {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 20px 24px 20px 56px;
  margin-bottom: 14px;
  position: relative;
  font-size: 15px;
}
.consult-list li::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 30px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--wp--preset--color--accent);
  border-bottom: 2px solid var(--wp--preset--color--accent);
  transform: rotate(-45deg);
}

/* ---------- 絞り込みチップ・ページネーション ---------- */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.filter-chips a {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text-light);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.filter-chips a:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--navy);
}
.filter-chips .is-current {
  background: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}
.pagination a, .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: 6px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--display);
  font-size: 15px;
  text-decoration: none;
}
.pagination a:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--navy);
}
.pagination .is-current {
  background: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}
.pagination .page-numbers {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .page-numbers li {
  display: flex;
}
.pagination .page-numbers .current {
  background: var(--wp--preset--color--navy);
  border-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}
@media (max-width: 767px) {
  .pagination .page-numbers {
    gap: 6px;
  }
  .pagination a,
  .pagination span {
    min-width: 40px;
    height: 40px;
    padding-inline: 9px;
  }
}

/* ---------- 会社概要 ---------- */
.mvv-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
}

.mvv-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  margin-bottom: 14px;
}

.mvv-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
  text-wrap: balance;
}

.mvv-text {
  font-size: 14px;
  color: var(--wp--preset--color--text-light);
  text-align: left;
}

.message-cols {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.message-cols.message-cols-text-only {
  max-width: 860px;
  margin-inline: auto;
}
.message-cols .ph {
  flex: 3 1 0;
  min-width: 0;
  aspect-ratio: 3/3.6;
}

.message-body {
  flex: 7 1 0;
  min-width: 0;
}
.message-cols-text-only .message-body {
  flex: 1 1 auto;
}
.message-body p {
  margin-bottom: 16px;
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
}

.message-title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: 24px;
  color: var(--wp--preset--color--text);
  text-wrap: balance;
}

.message-sign {
  margin-top: 28px;
  text-align: right;
  font-size: 14px;
  color: var(--wp--preset--color--text);
  /* 氏名が姓と名の間で分断されないよう折り返しを禁止する */
}
.message-sign strong {
  font-size: 18px;
  font-weight: 700;
  margin-left: 10px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .message-cols {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .message-cols .ph {
    flex: none;
    max-width: 320px;
    margin-inline: auto;
    width: 100%;
  }
  /* スマホでは代表者名を独立した行にして読みやすくする */
  .message-sign strong {
    display: block;
    margin-left: 0;
    margin-top: 6px;
  }
}
.spec-table {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  border-collapse: collapse;
}
.spec-table th, .spec-table td {
  padding: 22px 24px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}
.spec-table th {
  width: 220px;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  white-space: nowrap;
}
.spec-table {
  /* 住所・事業内容は最終行に1〜2文字だけ残りやすいので行幅を均等化する */
}
.spec-table td {
  text-wrap: balance;
}

@media (max-width: 767px) {
  .spec-table th, .spec-table td {
    display: block;
    padding: 0;
    border: none;
  }
  .spec-table th {
    padding: 16px 4px 4px;
  }
  .spec-table td {
    padding: 0 4px 16px;
    border-bottom: 1px solid var(--wp--preset--color--border);
  }
}
.access-map {
  margin-top: 48px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
}
.access-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* ---------- お問い合わせ ---------- */
.contact-form {
  max-width: 760px;
  margin-inline: auto;
}

.site-form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-md);
  max-width: 760px;
  margin-inline: auto;
}

.site-form .wpcf7-form-control-wrap {
  display: block;
}

.site-form .form-row p,
.site-form .consent-row p,
.site-form .form-submit p {
  margin: 0;
}

.form-row {
  margin-bottom: 28px;
}

.form-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.req, .opt {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: 2px;
  line-height: 1.3;
}

.req {
  background: var(--wp--preset--color--accent-deep);
  color: var(--wp--preset--color--white);
}

.opt {
  background: var(--wp--preset--color--border);
  color: var(--wp--preset--color--navy);
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
  background: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: 15px;
  color: var(--wp--preset--color--text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px rgba(112, 135, 175, 0.18);
}

textarea.form-control {
  min-height: 180px;
  resize: vertical;
}

.site-form input.wpcf7-form-control:not(.wpcf7-submit),
.site-form select.wpcf7-form-control,
.site-form textarea.wpcf7-form-control {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
  background: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: 15px;
  color: var(--wp--preset--color--text);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.site-form select.wpcf7-form-control:focus,
.site-form textarea.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px rgba(112, 135, 175, 0.18);
}

.form-consent {
  text-align: center;
  font-size: 14px;
  margin: 36px 0 28px;
}
.form-consent a {
  color: var(--wp--preset--color--navy);
}
.form-consent input {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--wp--preset--color--navy);
  vertical-align: -2px;
}

.form-note {
  text-align: center;
  font-size: 13px;
  color: var(--wp--preset--color--text-light);
  margin-top: 8px;
}

.form-submit {
  text-align: center;
}
.form-submit .btn {
  min-width: 280px;
  border: none;
  font-family: inherit;
}

.site-form .wpcf7-submit {
  min-width: 280px;
  border: none;
  font-family: inherit;
  display: inline-block;
  padding: 15px 40px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-form .wpcf7-submit:hover {
  background: var(--wp--preset--color--dark);
}

.site-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
}

.site-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
}

.site-form .wpcf7-turnstile {
  margin: 4px auto 0;
}

/* 非活性（同意チェック前）: 有効時と同じ青のままだと「押せない理由」が分からないため、
   灰色＋not-allowed で一目で区別できるようにする。:hover より後に置いて確実に勝たせる。 */
.btn:disabled,
.btn[disabled] {
  background: #c2c8d2;
  color: #ffffff;
  cursor: not-allowed;
  box-shadow: none;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  background: #c2c8d2;
}

/* ---------- 事例詳細ページ ---------- */
/* ページヘッダー内の日付＋業種バッジ */
.case-meta-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.case-meta-top time {
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--text-light);
}

/* 詳細ページの見出しは一覧より情報量が多いので明朝を少し小さく */
.case-detail-title {
  font-size: 30px;
  line-height: 1.6;
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .case-detail-title {
    font-size: 22px;
  }
}
/* メインビジュアル */
.case-mv {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 成果のハイライト */
.case-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.case-result-item {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

/* .doc-body 内に置くため、`.doc-body p`（15px・text-light）に負けないよう
   同じ詳細度で指定する。数値ではなく短い日本語句が入るので 20px。 */
.case-result-num,
.doc-body .case-result-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--wp--preset--color--accent-deep);
  margin-bottom: 8px;
  text-wrap: balance;
}

.case-result-label,
.doc-body .case-result-label {
  font-size: 14px;
  color: var(--wp--preset--color--text-light);
  margin-bottom: 0;
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .case-result {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* 前後の事例ナビ */
.post-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  max-width: 940px;
  margin-inline: auto;
}

.post-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.post-nav-item:hover {
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-2px);
}
.post-nav-item.is-next {
  text-align: right;
}

.post-nav-label {
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--accent-deep);
}

.post-nav-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: balance;
}

.post-nav-back {
  align-self: center;
  flex: 0 0 auto;
  padding: 14px 28px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 6px;
  color: var(--wp--preset--color--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.post-nav-back:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
}

@media (max-width: 767px) {
  .post-nav {
    flex-direction: column;
  }
  .post-nav-item.is-next {
    text-align: left;
  }
  .post-nav-back {
    align-self: stretch;
    text-align: center;
  }
}
/* ---------- プライバシーポリシー等の記事 ---------- */
.doc-body h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 48px 0 16px;
  padding: 8px 12px 8px 16px;
  border-left: 4px solid var(--wp--preset--color--accent);
}
.doc-body p {
  margin-bottom: 14px;
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
}
.doc-body ul {
  margin: 0 0 14px;
  padding-left: 1.4em;
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
}
.doc-body li {
  margin-bottom: 6px;
  text-wrap: balance;
}
.doc-body .doc-date {
  text-align: right;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
  margin-top: 40px;
}

/* ---------- フェードイン（JSが .fade-in を付与。JS無効時は常時表示） ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 課題別サービス案内 ---------- */
.service-guide-list {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--wp--preset--color--border);
}
.service-guide-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 20px;
  align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease, padding 0.2s ease;
}
.service-guide-link:hover {
  padding-inline: 16px;
  background: var(--wp--preset--color--primary-soft);
}
.service-guide-problem {
  font-size: 15px;
  font-weight: 600;
}
.service-guide-target {
  color: var(--wp--preset--color--accent-deep);
  font-size: 14px;
  font-weight: 700;
}
.service-guide-arrow {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--display);
  font-size: 18px;
}

/* ---------- 事例のBefore / After ---------- */
.case-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.case-comparison-item {
  padding: 24px;
  border-left: 4px solid var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary-soft);
}
.case-comparison-item.is-after {
  border-left-color: var(--wp--preset--color--accent);
  background: #fbf5ee;
}
.case-comparison-label {
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--navy);
}
.case-comparison-item.is-after .case-comparison-label {
  color: var(--wp--preset--color--accent-deep);
}
.case-comparison-text {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

/* ---------- お問い合わせ導線 ---------- */
.contact-flow {
  max-width: 860px;
  margin: 0 auto 48px;
  padding-top: 28px;
  border-top: 1px solid var(--wp--preset--color--border);
}
.contact-flow-title {
  color: var(--wp--preset--color--navy);
  font-size: 18px;
  font-weight: 700;
}
.contact-flow-lead {
  margin-top: 8px;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
}
.contact-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.contact-steps li {
  min-width: 0;
  padding-top: 14px;
  border-top: 2px solid var(--wp--preset--color--primary);
}
.contact-step-number {
  display: block;
  color: var(--wp--preset--color--accent-deep);
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.contact-step-title {
  display: block;
  margin-top: 8px;
  color: var(--wp--preset--color--navy);
  font-size: 15px;
  font-weight: 700;
}
.contact-step-text {
  display: block;
  margin-top: 6px;
  color: var(--wp--preset--color--text-light);
  font-size: 13px;
  line-height: 1.7;
}
.contact-assurance {
  max-width: 760px;
  margin: 0 auto 24px;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
  line-height: 1.8;
}

.faq-list {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--wp--preset--color--border);
}
.faq-list details {
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--display);
  font-size: 24px;
  font-weight: 400;
}
.faq-list details[open] summary::after {
  content: "-";
}
.faq-answer {
  margin: 0 0 22px;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 767px) {
  .service-guide-link {
    grid-template-columns: 1fr 20px;
    gap: 8px 16px;
  }
  .service-guide-target {
    grid-column: 1;
  }
  .service-guide-arrow {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .case-comparison,
  .contact-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-comparison-item {
    padding: 20px;
  }
}

/* ---------- P2: サービス詳細・業種別ソリューション ---------- */
.p2-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.p2-overview-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  background: var(--wp--preset--color--white);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.p2-overview-card:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--blue);
  box-shadow: 0 14px 28px rgba(80, 101, 138, 0.12);
}
.p2-card-kicker,
.p2-process-number {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--blue);
  letter-spacing: 0.08em;
}
.p2-overview-card h2 {
  margin-top: 14px;
  font-size: 22px;
  line-height: 1.45;
}
.p2-overview-card p {
  margin-top: 14px;
  color: var(--wp--preset--color--text-light);
  font-size: 15px;
  line-height: 1.9;
}
.p2-card-link {
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}
.p2-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wp--preset--color--border);
}
.p2-check-list li {
  position: relative;
  padding: 20px 0 20px 30px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: 16px;
  line-height: 1.8;
}
.p2-check-list li::before {
  position: absolute;
  top: 27px;
  left: 2px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--wp--preset--color--blue);
  border-left: 2px solid var(--wp--preset--color--blue);
  content: "";
  transform: rotate(-45deg);
}
.p2-scope-grid,
.p2-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p2-scope-item,
.p2-process li {
  min-width: 0;
  border-top: 3px solid var(--wp--preset--color--blue);
  padding-top: 20px;
}
.p2-scope-item h3,
.p2-process h3 {
  font-size: 18px;
  line-height: 1.55;
}
.p2-scope-item p,
.p2-process p {
  margin-top: 10px;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
  line-height: 1.9;
}
.p2-process-number {
  margin-bottom: 12px;
}
.p2-price-guidance {
  border-left: 4px solid var(--wp--preset--color--gold);
  padding: 30px 32px;
  background: #f8f7f3;
}
.p2-price-guidance h2 {
  margin-top: 10px;
  font-size: 24px;
}
.p2-price-guidance p {
  margin-top: 14px;
  color: var(--wp--preset--color--text-light);
  line-height: 1.9;
}
.p2-service-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.p2-service-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 18px 4px;
  color: var(--wp--preset--color--navy);
  font-weight: 700;
  text-decoration: none;
}
.p2-service-links a:hover {
  color: var(--wp--preset--color--blue);
}
.p2-faq-list {
  border-top: 1px solid var(--wp--preset--color--border);
}
.p2-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.p2-faq-item summary {
  position: relative;
  cursor: pointer;
  padding: 21px 40px 21px 0;
  color: var(--wp--preset--color--navy);
  font-weight: 700;
  line-height: 1.7;
  list-style: none;
}
.p2-faq-item summary::-webkit-details-marker {
  display: none;
}
.p2-faq-item summary::after {
  position: absolute;
  top: 23px;
  right: 6px;
  color: var(--wp--preset--color--blue);
  content: "+";
  font-family: var(--wp--preset--font-family--display);
  font-size: 22px;
  font-weight: 400;
}
.p2-faq-item[open] summary::after {
  content: "-";
}
.p2-faq-item p {
  padding: 0 40px 22px 0;
  color: var(--wp--preset--color--text-light);
  line-height: 1.9;
}
.p2-industry-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-block: 40px;
}
.p2-industry-intro h2 {
  margin-top: 10px;
  font-size: 26px;
}
.p2-industry-intro p {
  margin-top: 12px;
  color: var(--wp--preset--color--text-light);
  line-height: 1.9;
}
.p2-industry-intro .btn {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .p2-overview-grid,
  .p2-scope-grid,
  .p2-process,
  .p2-service-links {
    grid-template-columns: 1fr;
  }
  .p2-overview-card {
    min-height: 0;
    padding: 26px 24px;
  }
  .p2-overview-card h2 {
    font-size: 20px;
  }
  .p2-card-link {
    padding-top: 20px;
  }
  .p2-scope-grid,
  .p2-process {
    gap: 24px;
  }
  .p2-price-guidance {
    padding: 24px 22px;
  }
  .p2-price-guidance h2,
  .p2-industry-intro h2 {
    font-size: 22px;
  }
  .p2-service-links {
    gap: 0;
  }
  .p2-industry-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding-block: 32px;
  }
  .p2-industry-intro .btn {
    width: 100%;
  }
}

/* ---------- 完了画面・採用情報 ---------- */
.thanks-summary {
  max-width: 760px;
  margin-inline: auto;
  border-left: 4px solid var(--wp--preset--color--gold);
  padding: 28px 32px;
  background: #f8f7f3;
}
.thanks-summary h2 {
  color: var(--wp--preset--color--navy);
  font-size: 24px;
}
.thanks-summary p {
  margin-top: 14px;
  color: var(--wp--preset--color--text-light);
  line-height: 1.9;
}
.thanks-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}
.recruit-role-list {
  margin: 0;
  border-top: 1px solid var(--wp--preset--color--border);
}
.recruit-role-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.28fr) 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 22px 0;
}
.recruit-role-list dt {
  color: var(--wp--preset--color--navy);
  font-weight: 700;
}
.recruit-role-list dd {
  margin: 0;
  color: var(--wp--preset--color--text-light);
  line-height: 1.9;
}
.recruit-note {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--wp--preset--color--text-light);
  font-size: 14px;
  line-height: 1.9;
}
@media (max-width: 767px) {
  .thanks-summary {
    padding: 24px 22px;
  }
  .thanks-summary h2 {
    font-size: 21px;
  }
  .thanks-actions {
    flex-direction: column;
  }
  .thanks-actions .btn {
    width: 100%;
  }
  .recruit-role-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
}