@charset "UTF-8";
/* ============================================================
   style.css — スターター基盤
   構成: 1.トークン → 2.リセット/ベース → 3.レイアウト
        → 4.コンポーネント → 5.モーション → 6.停止ポリシー
   触り方は TEMPLATE-GUIDE.md 参照。トークン以外の削除は慎重に。
   ============================================================ */

/* ---------- 1. トークン(株式会社PathForge / AIDXコーポレート路線) ---------- */
:root {
  /* 色: AIDX提案資料と同一の世界観(ネイビー#123162×クールライト) */
  --color-bg: #ffffff;          /* 地(Wiz寄せ・純白) */
  --color-surface: #ffffff;     /* 面(カード・フォーム) */
  --color-text: #16181d;        /* 本文(黒寄り) */
  --color-muted: #5e6a7c;       /* 補助テキスト */
  --color-accent: #2c63eb;      /* ブライトブルー(Wiz寄せ・CTA/ラベル) */
  --color-accent-2: #2c63eb;    /* 同上(互換用) */
  --color-accent-ink: #ffffff;  /* accent上の文字色 */
  --color-line: #e8ecf3;        /* 罫線(薄く) */
  --color-navy-dk: #0c2247;     /* 幾何アクセント濃 */
  --color-navy-md: #24457a;     /* 幾何アクセント中 */
  --color-tint: #e9eef7;        /* 淡ブルー面 */

  /* タイポ: 見出しもゴシック(参考デザイン準拠)。英字=Inter、スクリプト=Sacramento */
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Helvetica Neue", sans-serif;
  --font-script: "Sacramento", cursive;

  /* 型: 8px系 */
  --space: 8px;
  --section-pad: clamp(84px, 13vw, 168px);
  --container: 1120px;
  --container-narrow: 760px;
  --radius: 16px;

  /* 階層 */
  --z-header: 100;
  --z-nav: 200;
  --z-modal: 1000;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.8s;
}

/* ---------- 2. リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;                 /* 日本語本文の床 */
  font-size: 16px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;          /* 長いURL・英単語のはみ出し事故防止 */
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:hover { opacity: 0.7; transition: opacity 0.3s; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* ---------- 3. レイアウト ---------- */
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { width: min(var(--container-narrow), 100% - 48px); margin-inline: auto; }

.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

/* セクション見出しの型(シグネチャーに差し替える前提の仮デザイン) */
.section-head { margin-bottom: calc(var(--space) * 7); }
.section-head__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 2);
}
.section-head__title { font-size: clamp(28px, 4.5vw, 44px); }

/* ---------- 4. コンポーネント ---------- */

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(20px, 4vw, 48px);
  background: color-mix(in srgb, #ffffff 78%, transparent);
  backdrop-filter: blur(8px);
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header__logo { font-family: var(--font-display); font-size: 20px; text-decoration: none; }

.global-nav ul { display: flex; gap: calc(var(--space) * 4); list-style: none; padding: 0; }
.global-nav a { text-decoration: none; font-size: 14px; letter-spacing: 0.18em; font-weight: 500; }
.global-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
}

/* ハンバーガー(SP) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;           /* タップ領域44px確保 */
  background: none; border: none; cursor: pointer;
  position: relative; z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px auto;
  background: var(--color-text); transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .global-nav {
    position: fixed; inset: 0; z-index: var(--z-nav);
    background: var(--color-bg);
    display: grid; place-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; }
  .global-nav ul { flex-direction: column; text-align: center; gap: calc(var(--space) * 4); }
  .global-nav a { font-size: 20px; }
}

/* ヒーロー(トップ) */
.hero {
  min-height: 92svh;                   /* svh: モバイルのアドレスバー事故防止 */
  display: flex; align-items: center;
  padding: calc(var(--section-pad) * 0.9) 0 calc(var(--space) * 10);
}
.hero__title {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1.25;
}
.hero__lead { margin-top: calc(var(--space) * 4); max-width: 34em; color: var(--color-muted); }

/* 下層ページヘッダー */
.page-header { padding: calc(var(--section-pad) * 1.2) 0 calc(var(--section-pad) * 0.5); }
.page-header__en {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}
.page-header__title { font-size: clamp(32px, 5vw, 56px); margin-top: calc(var(--space) * 1); }

.breadcrumb { padding-block: calc(var(--space) * 2); font-size: 12px; color: var(--color-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.6em; }
.breadcrumb a { text-decoration: none; }

/* ボタン */
.button {
  display: inline-block;
  padding: 16px 44px;
  background: var(--color-accent); color: var(--color-accent-ink);
  border: 1px solid var(--color-accent); border-radius: 999px;
  font-size: 15px; letter-spacing: 0.08em; text-decoration: none;
  cursor: pointer; transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.button:hover { background: transparent; color: var(--color-accent); opacity: 1; }
.button:disabled { opacity: 0.5; cursor: wait; }

/* フォーム */
.form { display: grid; gap: calc(var(--space) * 4); }
.form__field { display: grid; gap: calc(var(--space) * 1); }
.form__field label { font-size: 14px; font-weight: 600; }
.form__field .required { color: var(--color-accent); font-size: 12px; margin-left: 0.5em; }
.form input, .form textarea {
  font: inherit; padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius);
}
.form input:focus, .form textarea:focus { border-color: var(--color-accent); outline: none; }
.form [aria-invalid="true"] { border-color: #c0392b; }
.form__error { color: #c0392b; font-size: 13px; min-height: 1.2em; }
.form__hp { position: absolute; left: -9999px; }  /* ハニーポット: 削除禁止 */

/* フッター */
.site-footer {
  padding: calc(var(--space) * 8) 0 calc(var(--space) * 4);
  border-top: 1px solid var(--color-line);
  font-size: 13px; color: var(--color-muted);
}

/* ---------- 5. モーション基盤 ---------- */
/* JSが .is-inview を付ける。演出を変えるならこのクラスのtransform/opacityだけ触る */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.js-reveal.is-inview { opacity: 1; transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }

/* ---------- 6. モーション停止(SKILL.mdのポリシー実装。削除禁止) ---------- */
.motion-stop {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: var(--z-modal);
  padding: 10px 16px; font-size: 12px;
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: 999px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .motion-stop { display: block; }     /* reduced-motion環境にだけボタンを出す */
}
html.is-motion-off .js-reveal,
html.is-motion-off *[class] {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
}
html.is-motion-off .js-reveal { opacity: 1; transform: none; }

/* ============================================================
   7. PathForge コンポーネント層(コーポレート路線・AIDX世界観)
   ============================================================ */

/* 幾何コーナーアクセント(Wiz寄せ改修で不使用・非表示) */
.geo { display: none !important; }
.geo { position: absolute; pointer-events: none; }
.geo--tl { inset: 0 auto auto 0; width: 220px; height: 140px; }
.geo--br { inset: auto 0 0 auto; width: 220px; height: 140px; transform: rotate(180deg); }
.geo i { position: absolute; display: block; }
.geo i:nth-child(1) { width: 210px; height: 134px; background: var(--color-navy-dk);
  clip-path: polygon(0 0, 71% 0, 29% 71%, 0 71%); }
.geo i:nth-child(2) { width: 180px; height: 129px; background: var(--color-accent);
  clip-path: polygon(33% 0, 71% 0, 24% 71%, 0 71%, 0 46%); }
.geo i:nth-child(3) { width: 210px; height: 92px; background: var(--color-navy-md);
  clip-path: polygon(57% 0, 71% 0, 41% 71%, 29% 71%); }

/* スクリプト英字(シグネチャー) */
.script {
  font-family: var(--font-script);
  color: var(--color-accent-2);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  transform: rotate(-4deg);
  display: inline-block;
}
.script--muted { color: #a8c2ef; }

/* 英字ミニラベル(MISSION等) */
.label-en {
  display: block;
  font-family: var(--font-en); font-weight: 700;
  font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: calc(var(--space) * 2);
}
.label-en::before, .section-head__en::before, .page-header__en::before { content: "# "; }

/* ヒーロー(トップ) */
.hero { position: relative; overflow: hidden;
  background: #ffffff; }
.hero__inner { position: relative; }
.hero__lockup { font-family: var(--font-en); font-weight: 800; font-size: clamp(26px, 3vw, 34px);
  letter-spacing: 0.06em; color: var(--color-accent); }
.hero__lockup small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.34em; color: var(--color-navy-md); margin-top: 4px; }
.hero__title { font-size: clamp(40px, 6.8vw, 84px); font-weight: 900; color: var(--color-text);
  line-height: 1.28; margin-top: calc(var(--space) * 5); }
.hero__script { margin-top: calc(var(--space) * 3); }
.hero__lead { margin-top: calc(var(--space) * 4); max-width: 36em; color: var(--color-muted); }
.hero__cta { margin-top: calc(var(--space) * 5); display: flex; gap: 16px; flex-wrap: wrap; }

/* パスライン(道モチーフ・ヒーロー右) */
.pathline { position: absolute; right: -4%; bottom: -6%; width: min(52vw, 640px); opacity: 0.9; }

/* ボタン第2種 */
.button--ghost { background: transparent; color: var(--color-accent); }
.button--soft { background: #dfe9fb; color: var(--color-accent); border-color: #dfe9fb; }
.button--soft:hover { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }
.button--ghost:hover { background: var(--color-accent); color: var(--color-accent-ink); }

/* MVVセクション(理念) */
.mvv { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.mvv + .mvv { margin-top: calc(var(--section-pad) * 0.9); }
.mvv--flip .mvv__body { order: 2; }
.mvv--flip .mvv__visual { order: 1; }
.mvv__statement { font-size: clamp(28px, 4.2vw, 46px); font-weight: 900; color: var(--color-text); line-height: 1.5; }
.mvv__text { margin-top: calc(var(--space) * 4); color: var(--color-muted); max-width: 32em; }
.mvv__visual { position: relative; min-height: 240px; display: grid; place-items: center;
  background: #f4f7fd; border-radius: 24px; padding: 40px; }
@media (max-width: 767px) {
  .mvv { grid-template-columns: 1fr; }
  .mvv--flip .mvv__body { order: 1; }
  .mvv--flip .mvv__visual { order: 2; }
}

/* VALUE 3本 */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.value-card { text-align: center; padding: 48px 28px; background: var(--color-surface);
  border-radius: 24px; box-shadow: 0 16px 48px rgba(22, 24, 29, 0.06); }
.value-card__num { font-family: var(--font-en); font-weight: 700; font-size: 26px; color: var(--color-accent-2); }
.value-card__icon { width: 88px; height: 88px; margin: 16px auto; border-radius: 50%;
  background: var(--color-tint); display: grid; place-items: center; }
.value-card__icon svg { width: 38px; height: 38px; stroke: var(--color-accent); fill: none; stroke-width: 1.8; }
.value-card__en { font-family: var(--font-en); font-weight: 700; font-size: 22px; color: var(--color-text); }
.value-card__ja { font-weight: 700; margin-top: 4px; }
.value-card__line { width: 28px; height: 2px; background: var(--color-accent-2); margin: 14px auto; }
.value-card__text { font-size: 14px; color: var(--color-muted); text-align: left; }
@media (max-width: 767px) { .value-grid { grid-template-columns: 1fr; } }

/* サービスカード */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.svc-card { border-radius: 20px; padding: 40px 32px; display: flex; flex-direction: column; gap: 12px;
  color: #ffffff; box-shadow: 0 18px 48px rgba(30, 70, 180, 0.16); }
.svc-card--g1 { background: linear-gradient(135deg, #1b48b8, #3a6ef0); }
.svc-card--g2 { background: linear-gradient(135deg, #5f8ed6, #90b6ea); }
.svc-card--g3 { background: linear-gradient(135deg, #2f9ba3, #52c2c8); }
.svc-card__en { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.svc-card__name { font-size: 24px; font-weight: 900; color: #ffffff; }
.svc-card__text { font-size: 14px; color: rgba(255, 255, 255, 0.92); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }

/* 比較(事務員 vs AI社員) */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.compare__card { padding: 32px; border-radius: var(--radius); }
.compare__card--human { background: #eceff4; }
.compare__card--ai { background: var(--color-accent); color: var(--color-accent-ink); }
.compare__card--ai .compare__label { color: #bcd0ee; }
.compare__label { font-size: 13px; font-weight: 700; color: var(--color-muted); }
.compare__num { font-size: clamp(30px, 4vw, 44px); font-weight: 900; font-family: var(--font-en); }
.compare__vs { display: grid; place-items: center; font-family: var(--font-en); font-weight: 700; color: var(--color-accent-2); }
.compare__note { font-size: 12.5px; margin-top: 12px; opacity: 0.85; }
@media (max-width: 767px) { .compare { grid-template-columns: 1fr; } .compare__vs { padding: 4px; } }

/* フロー(導入の流れ) */
.flow { counter-reset: step; display: grid; gap: 14px; }
.flow li { list-style: none; counter-increment: step; display: flex; gap: 20px; align-items: baseline;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 20px 24px; }
.flow li::before { content: "0" counter(step); font-family: var(--font-en); font-weight: 700;
  font-size: 22px; color: var(--color-accent-2); }
.flow b { color: var(--color-accent); }
.flow span { display: block; font-size: 13.5px; color: var(--color-muted); }

/* 会社概要表 */
.company-table { width: 100%; border-collapse: collapse; }
.company-table th, .company-table td { padding: 18px 8px; border-bottom: 1px solid var(--color-line);
  text-align: left; vertical-align: top; font-size: 15px; }
.company-table th { width: 9em; color: var(--color-accent); font-weight: 700; }

/* 役員カード */
.exec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.exec-card { background: var(--color-surface);
  box-shadow: 0 12px 40px rgba(22, 24, 29, 0.08); border-radius: 24px; padding: 40px; }
.exec-card__en { font-family: var(--font-en); font-weight: 700; font-size: 12px; letter-spacing: 0.22em;
  color: var(--color-accent-2); text-transform: uppercase; }
.exec-card__role { font-size: 15px; font-weight: 700; margin-top: 10px; }
.exec-card__name { font-size: 26px; font-weight: 900; color: var(--color-text); margin-top: 2px; }
.exec-card__text { font-size: 14px; color: var(--color-muted); margin-top: 14px; }
@media (max-width: 767px) { .exec-grid { grid-template-columns: 1fr; } }

/* ニュース */
.news-list { display: grid; }
.news-list a { display: grid; grid-template-columns: 7em auto 1fr; gap: 16px; padding: 18px 4px;
  border-bottom: 1px solid var(--color-line); text-decoration: none; align-items: baseline; font-size: 14px; }
.news-list time { font-family: var(--font-en); font-size: 14px; color: var(--color-muted); }
.news-list .cat { font-size: 11px; font-weight: 700; color: var(--color-accent-2);
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 12px; justify-self: start; }
@media (max-width: 600px) { .news-list a { grid-template-columns: auto auto; } .news-list p { grid-column: 1 / -1; } }

/* CTAバンド(締め) */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, #2c63eb 0%, #4f86ff 100%);
  color: #ecf2fb; text-align: center; padding-block: calc(var(--section-pad) * 0.9); }
.cta-band .label-en { color: rgba(255,255,255,0.8); }
.cta-band__title { font-size: clamp(26px, 4vw, 42px); font-weight: 900; color: #ffffff; }
.cta-band .script { color: rgba(255,255,255,0.85); }
.cta-band .button { background: #ffffff; color: var(--color-accent); border-color: #ffffff; margin-top: 32px; border-radius: 999px; }
.cta-band .button:hover { background: transparent; color: #ffffff; }

/* フッター */
.site-footer { background: var(--color-surface); }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 24px; }
.footer-grid nav ul { list-style: none; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.footer-grid a { text-decoration: none; }
.footer-logo { font-family: var(--font-en); font-weight: 800; font-size: 20px; color: var(--color-text); }
.footer-logo small { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--color-accent); }

/* ページヘッダー(下層)の上書き */
.page-header { position: relative; overflow: hidden; background: #ffffff; }
.page-header__en { font-family: var(--font-en); font-weight: 700; color: var(--color-accent-2); }
.page-header__title { color: var(--color-text); font-weight: 900; font-size: clamp(40px, 6.5vw, 72px); }

/* ============================================================
   8. Wiz忠実レイヤー(2026-07-25 なおむ指示「Wizにかなり忠実に」)
   KVヒーロー / 巨大EN見出し / 黒帯見出し / 円形矢印 / バナー / CONTACT帯
   ============================================================ */

/* --- KVヒーロー --- */
.hero-kv { position: relative; min-height: 92svh; display: flex; align-items: center;
  background: #0a1830 url("/assets/img/kv_city2.jpg") center / cover no-repeat; overflow: hidden; }
.hero-kv__inner { position: relative; width: min(var(--container), 100% - 48px); margin-inline: auto;
  padding-top: 60px; }
.hero-kv__title { font-family: var(--font-en); font-weight: 800; color: #ffffff;
  font-size: clamp(48px, 7.6vw, 104px); line-height: 1.06; letter-spacing: 0.01em;
  text-shadow: 0 4px 40px rgba(4, 12, 30, 0.55); }
.hero-kv__chip { display: inline-block; margin-top: 22px; padding: 10px 18px;
  background: rgba(10, 16, 28, 0.86); color: #ffffff; font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; }
@media (max-width: 767px) {
  .hero-kv { background-image: url("/assets/img/kv_city2_mb.jpg"); }
}

/* KV下の3枚グラデカード(Wizの企業情報/事業情報/採用情報) */
.kv-cards { position: relative; z-index: 2; margin-top: -76px;
  width: min(var(--container), 100% - 48px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.kv-card { display: grid; place-content: center; text-align: center; gap: 6px;
  min-height: 118px; border-radius: 10px; color: #ffffff; text-decoration: none;
  box-shadow: 0 20px 56px rgba(10, 24, 48, 0.16); transition: transform 0.35s var(--ease-out), box-shadow 0.35s; }
.kv-card:hover { transform: translateY(-4px); opacity: 1; box-shadow: 0 26px 60px rgba(10, 24, 48, 0.22); }
.kv-card__ja { font-size: 19px; font-weight: 700; letter-spacing: 0.14em; }
.kv-card__en { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.8); text-transform: uppercase; }
.kv-card--g1 { background: linear-gradient(125deg, #1b48b8, #3568e0); }
.kv-card--g2 { background: linear-gradient(125deg, #5f8ed6, #88b0e8); }
.kv-card--g3 { background: linear-gradient(125deg, #2f9ba3, #4fc0c5); }
@media (max-width: 767px) { .kv-cards { grid-template-columns: 1fr; margin-top: -56px; } }

/* --- 巨大EN見出し + 小さな青JPラベル(Wizトップの型) --- */
.en-head { line-height: 1.05; }
.en-head__en { font-family: var(--font-en); font-weight: 800; color: var(--color-text);
  font-size: clamp(42px, 6.2vw, 80px); letter-spacing: -0.015em; }
.en-head__x { color: var(--color-accent); font-size: 0.62em; vertical-align: middle; padding-inline: 0.18em; }
.slash-bg { position: relative; overflow: hidden; }
.slash-bg::before { content: ""; position: absolute; left: 6%; top: -12%; width: clamp(120px, 16vw, 240px); height: 130%;
  background: linear-gradient(180deg, #eef2f8, #e3eaf4); transform: skewX(-18deg); z-index: 0; }
.slash-bg > .container { position: relative; z-index: 1; }
.en-head__jp { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--color-accent);
  letter-spacing: 0.12em; }

/* --- 黒帯見出しチップ(Wiz BUSINESSの型) --- */
.bar-title { display: grid; gap: 10px; justify-items: start; }
.bar-title span { display: inline-block; background: #16181d; color: #ffffff;
  font-size: clamp(18px, 2.6vw, 27px); font-weight: 700; letter-spacing: 0.06em;
  padding: 8px 18px; }

/* --- 円形矢印 / MOREピル --- */
.arrow-circle { display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--color-accent); color: var(--color-accent);
  font-family: var(--font-en); font-size: 15px; transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out); flex: none; }
a:hover .arrow-circle { background: var(--color-accent); color: #ffffff; }
.arrow-circle--fill { background: var(--color-accent); color: #ffffff; border: none; }
.more-pill { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; color: var(--color-text); }

/* ニュース行に矢印(Wiz型) */
.news-list a { grid-template-columns: 7em auto 1fr 36px; align-items: center; }
.news-list a:hover { opacity: 1; background: #f6f9ff; }
.news-list time { color: var(--color-accent); font-weight: 600; }

/* --- グラデバナー(Wizの代理店募集/メディアの型) --- */
.banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.banner-card { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 110px; padding: 28px 32px; border-radius: 12px; color: #ffffff; text-decoration: none;
  font-size: 19px; font-weight: 700; letter-spacing: 0.1em;
  box-shadow: 0 16px 44px rgba(30, 70, 180, 0.14); transition: transform 0.45s var(--ease-out), box-shadow 0.45s; }
.banner-card:hover { transform: translateY(-4px); opacity: 1; }
.banner-card .arrow-circle { border-color: #ffffff; color: #ffffff; }
.banner-card:hover .arrow-circle { background: #ffffff; color: var(--color-accent); }
.banner-card--g2 { background: linear-gradient(120deg, #5f8ed6, #90b6ea); }
.banner-card--g3 { background: linear-gradient(120deg, #2f9ba3, #52c2c8); }
@media (max-width: 767px) { .banner-grid { grid-template-columns: 1fr; } }

/* --- CONTACT帯(Wizの青帯・巨大EN+白ピル) --- */
.contact-band { background: linear-gradient(120deg, #2c63eb 0%, #4f86ff 100%); color: #ffffff;
  padding-block: calc(var(--section-pad) * 0.8); }
.contact-band__inner { width: min(var(--container), 100% - 48px); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.contact-band .en-head__en { color: #ffffff; }
.contact-band .en-head__jp { color: rgba(255, 255, 255, 0.85); }
.contact-band__buttons { display: grid; gap: 14px; }
.contact-band__btn { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-width: min(360px, 76vw); padding: 16px 26px; background: #ffffff; color: var(--color-text);
  border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700;
  transition: transform 0.3s var(--ease-out); }
.contact-band__btn:hover { transform: translateX(4px); opacity: 1; }
@media (max-width: 860px) { .contact-band__inner { grid-template-columns: 1fr; } }

/* --- 背景ウォーターマーク(超薄の巨大EN) --- */
.wm-section { position: relative; overflow: hidden; }
.watermark { position: absolute; right: -2%; bottom: 4%; z-index: 0; pointer-events: none;
  font-family: var(--font-en); font-weight: 800; text-align: right;
  font-size: clamp(64px, 9vw, 140px); color: rgba(22, 24, 29, 0.035); line-height: 1.06;
  letter-spacing: 0.01em; }
.wm-section > .container, .wm-section > .container--narrow { position: relative; z-index: 1; }

/* ============================================================
   9. ライトフォト層(2026-07-25 参考「AIDX PHILOSOPHY」に寄せる)
   実写真(白×淡ブルー加工済み)を使う明るいヒーロー/MVVビジュアル
   ============================================================ */

/* 明るいスプリットヒーロー(左テキスト/右に階段写真) */
.hero-light { position: relative; min-height: 88svh; display: grid;
  grid-template-columns: 1.05fr 0.95fr; align-items: stretch; overflow: hidden;
  background: linear-gradient(160deg, #ffffff 30%, #eef4fb 100%); }
.hero-light__body { display: flex; flex-direction: column; justify-content: center;
  padding: 120px clamp(24px, 5vw, 72px) 80px; }
.hero-light__title { font-family: var(--font-en); font-weight: 800; color: var(--color-text);
  font-size: clamp(46px, 6.4vw, 92px); line-height: 1.05; }
.hero-light__chip { display: inline-block; align-self: flex-start; margin-top: 22px; padding: 10px 18px;
  background: #16181d; color: #ffffff; font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; }
.hero-light__script { margin-top: 20px; font-size: clamp(28px, 3.4vw, 44px); transform: rotate(-3deg); }
.hero-light__visual { position: relative; min-height: 420px;
  background: url("/assets/img/stairs_sky.jpg") center 30% / cover no-repeat; }
.hero-light__visual::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 26%); }
@media (max-width: 860px) {
  .hero-light { grid-template-columns: 1fr; min-height: auto; }
  .hero-light__visual { min-height: 320px; order: 2; }
  .hero-light__visual::after { background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 24%); }
}

/* MVVフォトビジュアル(理念ページ) */
.mvv__visual--photo { padding: 0; overflow: hidden; min-height: 340px;
  display: grid; align-items: end; justify-items: center; }
.mvv__visual--photo.is-stairs { background: url("/assets/img/stairs_white.jpg") center 20% / cover no-repeat; }
.mvv__visual--photo.is-city { background: url("/assets/img/city_light.jpg") center / cover no-repeat; }
.mvv__visual--photo .script { position: relative; z-index: 1; padding: 0 24px 34px;
  color: #2c63eb; text-shadow: 0 2px 18px rgba(255, 255, 255, 0.85); }
.mvv__visual--photo::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.35)); }
.mvv--flip .mvv__visual--photo { justify-items: start; }

/* CTA帯に淡い都市写真を重ねる(参考の空気感) */
.contact-band { position: relative; overflow: hidden; }
.contact-band::before { content: none; }
.contact-band__inner { position: relative; z-index: 1; }

/* ============================================================
   10. モックアップ準拠層(2026-07-25 なおむ共有モックに寄せる)
   ============================================================ */

/* ヘッダーCTA(青ピル) */
.nav-cta { display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent); color: #ffffff !important; padding: 10px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: 0.06em; margin-left: 10px; }
.nav-cta:hover { opacity: 0.85; }
@media (max-width: 767px) { .site-header > .nav-cta { display: none; } }

/* 夜ヒーロー(モック準拠・タイトル2行) */
.hero-kv { min-height: 78svh; }
.hero-kv__title { font-size: clamp(46px, 6.2vw, 88px); letter-spacing: 0.02em; line-height: 1.12; font-weight: 800; }

/* KVカード改(モック: JP小+EN大+左下矢印) */
.kv-card { text-align: center; place-content: center; align-content: center; padding: 26px 20px; gap: 6px;
  min-height: 104px; position: relative; border-radius: 10px; }
.kv-card__ja { font-size: 18px; font-weight: 700; letter-spacing: 0.22em; }
.kv-card__en { font-family: var(--font-en); font-weight: 600; font-size: 11px;
  letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.82); text-transform: uppercase; }
.kv-card .arrow-circle { display: none; }

/* サービスページの画像バナー */
.page-banner { height: clamp(160px, 24vw, 260px);
  background: url("/assets/img/svc_banner.jpg") center / cover no-repeat; }

/* サービスカード改(白アイコンチップ+番号+左下矢印) */
.svc-card { position: relative; padding-bottom: 66px; border-radius: 16px; }
.svc-card__top { display: flex; align-items: center; gap: 14px; }
.svc-card__icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, 0.18);
  display: grid; place-items: center; flex: none; }
.svc-card__icon svg { width: 26px; height: 26px; stroke: #ffffff; fill: none; stroke-width: 1.8; }
.svc-card__num { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: rgba(255,255,255,0.9); }
.svc-card .arrow-circle { position: absolute; left: 32px; bottom: 20px; border-color: #ffffff; color: #ffffff; }
.svc-card:hover .arrow-circle { background: #ffffff; color: var(--color-accent); }

/* 横型フロー(アイコン円+番号+矢印) */
.flow-h { display: flex; gap: 4px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.flow-h .fstep { text-align: center; width: min(190px, 42vw); }
.flow-h .fstep i { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
  background: var(--color-tint); margin: 0 auto; }
.flow-h .fstep i svg { width: 36px; height: 36px; stroke: var(--color-accent); fill: none; stroke-width: 1.6; }
.flow-h .fstep .num { display: block; font-family: var(--font-en); font-weight: 700; color: var(--color-accent);
  margin-top: 14px; }
.flow-h .fstep b { display: block; margin-top: 2px; font-size: 15px; }
.flow-h .fstep span { display: block; font-size: 12px; color: var(--color-muted); margin-top: 6px; line-height: 1.7; }
.flow-h .farr { color: var(--color-accent); font-size: 20px; padding-top: 34px; font-family: var(--font-en); }
@media (max-width: 860px) { .flow-h { flex-direction: column; align-items: center; } .flow-h .farr { transform: rotate(90deg); padding: 4px 0; } }

/* VALUE: カード→オープン列(モック/参考画像準拠) */
.value-grid--open { gap: 0; }
.value-grid--open .value-card { background: transparent; box-shadow: none; border-radius: 0; padding: 12px 32px; }
.value-grid--open .value-card + .value-card { border-left: 1px solid var(--color-line); }
@media (max-width: 767px) {
  .value-grid--open .value-card + .value-card { border-left: none; border-top: 1px solid var(--color-line); }
}

/* 会社概要: 2カラム+アバター付き役員カード */
.company-cols { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .company-cols { grid-template-columns: 1fr; } }
.exec-list { display: grid; gap: 22px; }
.exec-card { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: start; padding: 28px; }
.exec-card__avatar { width: 92px; height: 112px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(155deg, #dfe9f7, #b9cdea); display: grid; place-items: end center; }
.exec-card__avatar svg { width: 70px; height: 84px; fill: #8ba6cf; display: block; }
.exec-card__name { font-size: 22px; }

/* お問い合わせ: 2カラム+サイドカード */
.contact-cols { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (max-width: 900px) { .contact-cols { grid-template-columns: 1fr; } }
.side-card { background: #ffffff; border: 1px solid var(--color-line); border-radius: 14px; padding: 24px 26px; }
.side-card + .side-card { margin-top: 18px; }
.side-card h2, .side-card h3 { font-size: 15px; color: var(--color-accent); margin-bottom: 8px; }
.side-links a { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 2px; border-bottom: 1px solid var(--color-line); text-decoration: none;
  font-size: 13.5px; font-weight: 600; }
.side-links a:last-child { border-bottom: none; }
.side-links .arrow-circle { width: 26px; height: 26px; font-size: 12px; }
.side-note { font-size: 13px; color: var(--color-muted); }

/* サンクス: チェックサークル */
.thanks-check { width: 96px; height: 96px; border-radius: 50%; background: var(--color-accent);
  display: grid; place-items: center; margin: 0 auto 30px; box-shadow: 0 14px 36px rgba(44,99,235,0.3); }
.thanks-check svg { width: 44px; height: 44px; stroke: #ffffff; fill: none; stroke-width: 3; }

/* 黒フッター(モック準拠) */
.site-footer { background: #111318; color: #9aa3b2; border-top: none; }
.site-footer .footer-logo { color: #ffffff; }
.site-footer .footer-logo small { color: #7f9be0; }
.site-footer a:hover { color: #ffffff; opacity: 1; }

/* ============================================================
   11. 理念ページ・モック忠実層(2026-07-25 なおむ共有モック2)
   ラベル+罫線 / 全幅断ち落とし写真 / 淡ブルーVALUEカード
   ============================================================ */

.mvv-label { display: flex; align-items: center; gap: 18px;
  font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: 0.22em;
  color: var(--color-accent); text-transform: uppercase; }
.mvv-label::after { content: ""; flex: 1; height: 1.5px; background: var(--color-accent); opacity: 0.8; }

.mvv-bleed { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.mvv-bleed__text { padding: clamp(48px, 7vw, 100px) clamp(24px, 4vw, 72px); }
.mvv-bleed__text--l { padding-left: max(24px, calc((100vw - var(--container)) / 2)); }
.mvv-bleed__text--r { padding-right: max(24px, calc((100vw - var(--container)) / 2)); }
.mvv-bleed__statement { font-size: clamp(24px, 2.9vw, 36px); font-weight: 900; line-height: 1.65;
  margin-top: 28px; letter-spacing: 0.02em; }
.mvv-label--center { justify-content: center; }
.mvv-label--center::after { display: none; }
.mvv-bleed__body { margin-top: 22px; color: #3d4652; line-height: 2.3; font-size: 14.5px; max-width: 30em; }
.mvv-bleed__img { position: relative; align-self: stretch; min-height: 440px;
  background-size: cover; background-position: center; }
.mvv-bleed__img--stairs { background-image: url("/assets/img/stairs_sky.jpg"); background-position: center 22%; }
.mvv-bleed__img--city { background-image: url("/assets/img/city_light.jpg"); background-position: center 62%; }
.mvv-bleed__img .script { position: absolute; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3;
  transform: rotate(-8deg); color: #2c63eb; text-shadow: 0 2px 24px rgba(255, 255, 255, 0.95); }
.mvv-bleed__img--stairs .script { left: 4%; top: 36%; }
.mvv-bleed__img--city .script { left: 8%; top: 12%; }
.mvv-bleed__img--stairs::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 46%); }
.mvv-bleed__img--city::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0) 48%); }
@media (max-width: 860px) {
  .mvv-bleed { grid-template-columns: 1fr; }
  .mvv-bleed__img { min-height: 300px; order: 2; }
  .mvv-bleed__text--l, .mvv-bleed__text--r { padding-inline: 24px; }
}

/* VALUE: 淡ブルー角丸カード(番号+円形アイコン) */
.vcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 30px); }
.vcard { position: relative; background: #f6f9fe; border: 1px solid #e2ebf8; border-radius: 16px;
  padding: 46px 28px 38px; text-align: center; }
.vcard__num { position: absolute; left: 28px; top: 26px; font-family: var(--font-en); font-weight: 700;
  font-size: 23px; color: var(--color-accent); }
.vcard__icon { width: 86px; height: 86px; margin: 0 auto; border-radius: 50%; background: #e6edfa;
  display: grid; place-items: center; }
.vcard__icon svg { width: 34px; height: 34px; stroke: var(--color-accent); fill: none; stroke-width: 1.7; }
.vcard__en { font-family: var(--font-en); font-weight: 700; font-size: 23px; color: var(--color-accent);
  margin-top: 20px; }
.vcard__ja { font-weight: 700; margin-top: 4px; }
.vcard__line { display: block; width: 26px; height: 2px; background: var(--color-accent); margin: 16px auto; opacity: 0.7; }
.vcard__text { font-size: 13.5px; line-height: 2.1; }
@media (max-width: 767px) { .vcard-grid { grid-template-columns: 1fr; } }

/* ============================================================
   12. IPOグレード層(2026-07-25 なおむ「上場レベルに」)
   透明ヘッダー / ヒーロー演出 / NUMBERS / マーキー / 大型フッター
   ============================================================ */

/* 透明ヘッダー(トップのみ)→スクロールで白化 */
body.p-home .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; box-shadow: none; }
body.p-home .site-header:not(.is-scrolled) .footer-logo { color: #ffffff; }
body.p-home .site-header:not(.is-scrolled) .footer-logo small { color: #9db8e8; }
body.p-home .site-header:not(.is-scrolled) .global-nav a { color: #ffffff; }
body.p-home .site-header:not(.is-scrolled) .global-nav a[aria-current="page"] { color: #ffffff; border-color: #ffffff; }
body.p-home .site-header:not(.is-scrolled) .nav-toggle span { background: #ffffff; }
body.p-home .site-header:not(.is-scrolled) .nav-cta { background: #ffffff; color: var(--color-accent) !important; }

/* ヒーロー演出: KVスローズーム+行マスクリビール+スクロール線 */
.hero-kv { isolation: isolate; }
.hero-kv::before { content: ""; position: absolute; inset: -4%; z-index: -1;
  background: inherit; background-size: cover; background-position: center;
  animation: kvZoom 18s var(--ease-out) forwards; }
.hero-kv { background-attachment: scroll; }
@keyframes kvZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(110%); }
.is-hero-in .line-mask > span { transform: translateY(0);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1); }
.is-hero-in .line-mask:nth-child(2) > span { transition-delay: 0.12s; }
.hero-scroll { position: absolute; left: clamp(20px, 4vw, 48px); bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #cfe0f8; font-family: var(--font-en); font-size: 10px; letter-spacing: 0.3em; }
.hero-scroll::after { content: ""; width: 1.5px; height: 74px;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0));
  animation: scrollLine 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero-scroll span { writing-mode: vertical-rl; }

/* NUMBERS(実績数字) */
.num-band { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.num-item { text-align: center; padding: clamp(36px, 5vw, 64px) 20px; }
.num-item + .num-item { border-left: 1px solid var(--color-line); }
.num-item__label { font-size: 13px; font-weight: 700; color: var(--color-muted); letter-spacing: 0.1em; }
.num-item__value { margin-top: 10px; color: var(--color-accent); font-weight: 900; }
.num-item__value b { font-family: var(--font-en); font-weight: 800; font-size: clamp(44px, 5.4vw, 72px);
  letter-spacing: -0.02em; }
.num-item__value small { font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; margin-left: 6px; }
@media (max-width: 767px) { .num-grid { grid-template-columns: 1fr; } .num-item + .num-item { border-left: none; border-top: 1px solid var(--color-line); } }

/* ENマーキー帯 */
.marquee { overflow: hidden; white-space: nowrap; padding-block: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: #ffffff; }
.marquee__inner { display: inline-block; animation: marquee 30s linear infinite; }
.marquee__inner span { font-family: var(--font-en); font-weight: 800; font-size: clamp(40px, 5vw, 72px);
  letter-spacing: 0.01em; color: transparent; -webkit-text-stroke: 1.2px #c9d6ea; padding-right: 56px; }
.marquee__inner span i { font-style: normal; color: var(--color-accent); -webkit-text-stroke: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.is-motion-off .marquee__inner { animation: none; }

/* 大型フッター */
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(40px, 6vw, 72px); align-items: start; }
.footer-mission { font-size: 13.5px; color: #8791a2; line-height: 2.1; margin-top: 18px; max-width: 26em; }
.footer-nav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.footer-nav2 a { display: block; padding: 8px 0; font-size: 13.5px; color: #c3cad6; text-decoration: none; letter-spacing: 0.08em; }
.footer-cta { display: inline-flex; align-items: center; gap: 12px; background: var(--color-accent); color: #ffffff;
  padding: 16px 30px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-top: 1px solid #262b34; padding-top: 22px; font-size: 12px; }
.back-top { display: inline-flex; align-items: center; gap: 8px; color: #c3cad6; text-decoration: none;
  font-family: var(--font-en); font-size: 11px; letter-spacing: 0.22em; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr; } }

/* 全体: セクション番号(左端の小さなEN) */
.sec-index { position: absolute; left: clamp(12px, 2vw, 26px); top: 24px;
  font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.26em;
  color: #b8c4d6; writing-mode: vertical-rl; }
.section { position: relative; }

/* ============================================================
   13. 品質向上パス v8(2026-07-25 なおむ「構成はWiz近似のまま全体品質を上げる」)
   ヒーロー淡色化 / タイポ精度 / 影・角丸・色の統一 / ディテール仕上げ
   ============================================================ */

/* --- 13-1. 品質トークン(影・罫線・面を統一) --- */
:root {
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.07), 0 18px 40px rgba(16, 24, 40, 0.08);
  --surface-alt: #f5f7fa;       /* セクション交互面 */
  --line-soft: #e9edf3;
}

/* --- 13-2. ヒーロー: 淡色デイライトKV × 黒タイポ(最重要の品質転換) --- */
.hero-kv {
  min-height: 86svh;
  background: #eef2f6 url("/assets/img/kv_day.jpg") center 38% / cover no-repeat;
  color: var(--color-text);
}
.hero-kv::before { background: inherit; }
.hero-kv::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
  pointer-events: none; }
.hero-kv__inner { z-index: 1; }
.hero-kv__title { color: #0e1116; font-weight: 800; text-shadow: none;
  font-size: clamp(52px, 7.6vw, 112px); line-height: 0.98; letter-spacing: -0.035em; }
.hero-kv__chip { background: #101216; color: #ffffff; border: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; padding: 11px 20px; margin-top: 26px; }
.hero-scroll { color: #5e6a7c; }
.hero-scroll::after { background: linear-gradient(180deg, #101216, rgba(16,18,22,0)); }
@media (max-width: 767px) {
  .hero-kv { background-image: url("/assets/img/kv_day_mb.jpg"); min-height: 74svh; }
}

/* ヘッダー: 淡色ヒーローの上では黒文字(透明のまま) */
body.p-home .site-header:not(.is-scrolled) .footer-logo { color: #101216; }
body.p-home .site-header:not(.is-scrolled) .footer-logo small { color: var(--color-accent); }
body.p-home .site-header:not(.is-scrolled) .global-nav a { color: #101216; }
body.p-home .site-header:not(.is-scrolled) .global-nav a[aria-current="page"] { color: #101216; border-color: #101216; }
body.p-home .site-header:not(.is-scrolled) .nav-toggle span { background: #101216; }
body.p-home .site-header:not(.is-scrolled) .nav-cta { background: #101216; color: #ffffff !important; }

/* --- 13-3. ヘッダー精度(全ページ) --- */
.site-header { padding-block: 16px; }
.site-header .footer-logo { font-size: 19px; letter-spacing: 0.04em; }
.global-nav a { font-size: 13.5px; letter-spacing: 0.04em; }
.nav-cta { padding: 11px 24px; font-size: 12.5px; letter-spacing: 0.1em; }

/* --- 13-4. タイポグラフィ精度 --- */
.en-head__en { letter-spacing: -0.03em; line-height: 1.0; }
.en-head__jp { letter-spacing: 0.14em; }
body { letter-spacing: 0.03em; }
p { line-height: 2.05; }
.section-head__title { letter-spacing: 0.03em; }

/* --- 13-5. KV下3カード: 彩度を絞りブランド1系統に(teal廃止) --- */
.kv-card { border-radius: 12px; box-shadow: var(--shadow-md); }
.kv-card--g1 { background: linear-gradient(130deg, #0e2f6e 0%, #1d49b8 100%); }
.kv-card--g2 { background: linear-gradient(130deg, #1d49b8 0%, #2c63eb 100%); }
.kv-card--g3 { background: linear-gradient(130deg, #2c63eb 0%, #5f8ed6 100%); }
.kv-card__ja { font-size: 17px; letter-spacing: 0.2em; }
.kv-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(12, 34, 71, 0.24); }

/* バナー2枚もブランド1系統に統一 */
.banner-card { border-radius: 12px; box-shadow: var(--shadow-sm); }
.banner-card--g2 { background: linear-gradient(120deg, #16408f, #2c63eb); }
.banner-card--g3 { background: linear-gradient(120deg, #0e2f6e, #24457a); }

/* --- 13-6. NUMBERS: 数字は黒(上場企業レポートの型)・単位のみ青 --- */
.num-item__value { color: #101216; }
.num-item__value small { color: var(--color-accent); }
.num-item__label { letter-spacing: 0.16em; font-size: 12.5px; }

/* --- 13-7. 面のリズム統一(白⇔淡グレー交互・淡ブルー面は廃止寄せ) --- */
.section { background-clip: padding-box; }
.num-band { background: var(--surface-alt); border-color: var(--line-soft); }
.slash-bg::before { background: linear-gradient(180deg, #f0f4fa, #e6edf8); opacity: 0.85; }

/* --- 13-8. ニュース行・矢印・ピルの精度 --- */
.news-list a { padding-block: 22px; border-bottom: 1px solid var(--line-soft); }
.news-list a:hover { background: transparent; }
.news-list a:hover p { color: var(--color-accent); }
.news-list p { transition: color 0.25s var(--ease-out); font-weight: 600; font-size: 14.5px; }
.news-list .cat { border: 1px solid #d8e2f4; border-radius: 3px; padding: 3px 10px; background: #f2f6fd; }
.arrow-circle { width: 34px; height: 34px; border-width: 1px; transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.more-pill { font-size: 12.5px; letter-spacing: 0.16em; }

/* --- 13-9. ボタン統一(過剰な丸/彩度を抑える) --- */
.button { border-radius: 6px; letter-spacing: 0.06em; box-shadow: none; }
.button:hover { opacity: 1; }
.button--soft { border-radius: 6px; }
.footer-cta { border-radius: 6px; }
.nav-cta { border-radius: 6px; }
.cta-band .button { border-radius: 6px; }

/* --- 13-10. CONTACT帯: 深いネイビーで落ち着かせる --- */
.contact-band { background: linear-gradient(130deg, #0c2247 0%, #16408f 62%, #1d49b8 100%); }
.contact-band__btn { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04); padding: 20px 24px; }
.contact-band__btn:hover { background: rgba(255, 255, 255, 0.12); transform: none; }

/* --- 13-11. フッター精度 --- */
.site-footer { background: #0e1015; }
.footer-mission { color: #7d8798; }
.footer-nav2 a { color: #aeb6c4; font-size: 13px; }
.footer-nav2 a:hover { color: #ffffff; }
.footer-bottom { border-color: #1f242e; color: #6b7482; }
.footer-bottom small { color: #6b7482; }

/* --- 13-12. 下層ページヘッダーの精度 --- */
.page-header { background: var(--surface-alt); padding: calc(var(--section-pad) * 1.05) 0 calc(var(--section-pad) * 0.42); }
.page-header__title { letter-spacing: 0.02em; }
.breadcrumb { border-bottom: 1px solid var(--line-soft); }

/* --- 13-13. カード・表・フォームの角と影を統一 --- */
.side-card { border-radius: 10px; border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.exec-card { border-radius: 12px; background: #ffffff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.company-table th { letter-spacing: 0.08em; }
.vcard { box-shadow: var(--shadow-sm); }
.case-band, .svc-card { box-shadow: var(--shadow-sm); }
.form input, .form textarea { border-radius: 8px; }
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(44, 99, 235, 0.14); outline: none; }

/* --- 13-14. 追加修正: サービスカードのブランド色統一 / VISION改行事故 --- */
.svc-card--g1 { background: linear-gradient(135deg, #0e2f6e, #1d49b8); }
.svc-card--g2 { background: linear-gradient(135deg, #1d49b8, #2c63eb); }
.svc-card--g3 { background: linear-gradient(135deg, #2c63eb, #5f8ed6); }
.mvv-bleed__statement { font-size: clamp(22px, 2.5vw, 31px); line-height: 1.75; }

/* --- 13-15. スクロール体感改善(2026-07-25 なおむ「アニメが遅くストレス」) ---
   リビールを短く小さく・遅延を半減。Lenisは撤去済み(main.js)。 */
.js-reveal { transition-duration: 0.5s; transform: translateY(16px); }
.js-reveal.is-inview { transform: none; }
.js-reveal[data-delay="1"] { transition-delay: 0.06s; }
.js-reveal[data-delay="2"] { transition-delay: 0.12s; }
.js-reveal[data-delay="3"] { transition-delay: 0.18s; }
.is-hero-in .line-mask > span { transition-duration: 0.85s; }
.is-hero-in .line-mask:nth-child(2) > span { transition-delay: 0.08s; }

/* ============================================================
   14. v9(2026-07-25 なおむ4点修正)
   オープニング演出強化 / スクロール再調整 / 理念写真&VALUE図解 / サービスカード刷新
   ============================================================ */

/* --- 14-1. オープニング: ネイビーのヴェール→文字が1字ずつドンと着地 --- */
.intro-veil { position: fixed; inset: 0; z-index: 9999; background: #0e1015;
  transform-origin: top; pointer-events: none;
  animation: veilUp 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.18s forwards; }
@keyframes veilUp { to { transform: translateY(-101%); } }
html.is-motion-off .intro-veil { display: none; }

/* 文字単位の着地(main.jsが<i>分解+--ciを付与) */
.hero-kv__title .line-mask { overflow: hidden; }
.hero-kv__title .line-mask > span { transform: none; transition: none; }
.hero-kv__title .line-mask i { display: inline-block; font-style: normal;
  transform: translateY(120%) rotate(4deg); white-space: pre; }
.is-hero-in .hero-kv__title .line-mask i {
  transform: translateY(0) rotate(0);
  transition: transform 0.86s cubic-bezier(0.16, 1.24, 0.24, 1);
  transition-delay: calc(var(--ci, 0) * 0.034s); }
.hero-kv__chip { opacity: 0; transform: translateY(14px); }
.is-hero-in .hero-kv__chip { opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out) 0.85s, transform 0.6s var(--ease-out) 0.85s; }
html.is-motion-off .hero-kv__title .line-mask i { transform: none; transition: none; }
html.is-motion-off .hero-kv__chip { opacity: 1; transform: none; }

/* --- 14-2. スクロール再調整: 移動をさらに小さく・短く・遅延ほぼ撤廃 --- */
.js-reveal { transition-duration: 0.42s; transform: translateY(10px); }
.js-reveal[data-delay="1"] { transition-delay: 0.04s; }
.js-reveal[data-delay="2"] { transition-delay: 0.08s; }
.js-reveal[data-delay="3"] { transition-delay: 0.12s; }

/* --- 14-3. 理念: 写真の明瞭化とサイズ調整 --- */
.mvv-bleed__img { min-height: 360px; }
.mvv-bleed__img--stairs { background-image: url("/assets/img/mission_up.jpg"); background-position: center 40%; }
.mvv-bleed__img--stairs::before { background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%); }
.mvv-bleed__img--city { background-image: url("/assets/img/kv_day.jpg"); background-position: center 64%; }
.mvv-bleed__img--city::before { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 42%); }
.mvv-bleed__img .script { display: none; }  /* 写真上の筆記体は視認性優先で廃止 */

/* --- 14-4. VALUE図解: 接続線つき3ステップフロー --- */
.value-flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px); margin-top: clamp(36px, 5vw, 56px); }
.value-flow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 43px; height: 2px;
  background: linear-gradient(90deg, #c9d9f5, var(--color-accent), #c9d9f5); opacity: 0.55; }
.vstep { position: relative; text-align: center; }
.vstep__icon { position: relative; z-index: 1; width: 86px; height: 86px; margin: 0 auto;
  border-radius: 50%; background: #ffffff; border: 2px solid var(--color-accent);
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(44, 99, 235, 0.14); }
.vstep__icon svg { width: 34px; height: 34px; stroke: var(--color-accent); fill: none; stroke-width: 1.7; }
.vstep__num { position: absolute; top: -6px; left: calc(50% + 26px); z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); color: #ffffff;
  font-family: var(--font-en); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.vstep__en { font-family: var(--font-en); font-weight: 700; font-size: 22px; color: var(--color-text);
  margin-top: 20px; letter-spacing: -0.01em; }
.vstep__ja { display: inline-block; margin-top: 6px; padding: 4px 14px; background: #101216; color: #ffffff;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; border-radius: 3px; }
.vstep__txt { font-size: 13.5px; line-height: 2; color: #3d4652; margin-top: 14px; text-align: left; }
.vstep__arw { position: absolute; top: 36px; right: calc(-1 * clamp(9px, 1.5vw, 20px) - 7px);
  color: var(--color-accent); font-family: var(--font-en); font-weight: 700; font-size: 17px; }
@media (max-width: 767px) {
  .value-flow { grid-template-columns: 1fr; gap: 34px; }
  .value-flow::before { display: none; }
  .vstep__arw { display: none; }
  .vstep__txt { text-align: center; }
}

/* --- 14-5. サービスカード刷新: 写真ヘッダー×白ボディ --- */
.svc2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 860px) { .svc2-grid { grid-template-columns: 1fr; } }
.svc2 { position: relative; display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.svc2:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc2__ph { position: relative; height: 188px; margin: 0; overflow: hidden; }
.svc2__ph > i { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.7s var(--ease-out); }
.svc2:hover .svc2__ph > i { transform: scale(1.05); }
.svc2__ph::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(12, 34, 71, 0.34), rgba(44, 99, 235, 0.10) 60%, rgba(0,0,0,0)); }
.svc2__num { position: absolute; left: 18px; top: 16px; z-index: 1;
  font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  color: #ffffff; background: rgba(16, 18, 22, 0.62); padding: 5px 12px; border-radius: 3px; }
.svc2__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 24px; }
.svc2__en { font-family: var(--font-en); font-weight: 700; font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-accent); }
.svc2__ttl { font-size: 21px; font-weight: 900; margin-top: 6px; letter-spacing: 0.02em; }
.svc2__txt { font-size: 13.5px; line-height: 2; color: #3d4652; margin-top: 12px; }
.svc2__foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: flex-end; }
.svc2:hover .arrow-circle { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }

/* ============================================================
   15. v9.1(2026-07-25 なおむ「NEWSは下部へ/オープニングはakushu-llc.com参考」)
   波紋オープニング: 黒地→中心の点→同心円リング拡張→タグライン→明けて文字着地
   ============================================================ */
.intro-veil { display: grid; place-items: center; overflow: hidden;
  animation: veilFade 0.7s ease 2.0s forwards; transform: none; }
@keyframes veilFade { to { opacity: 0; visibility: hidden; } }

.intro-veil__dot { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #e8ecf5; opacity: 0; transform: scale(0);
  animation: dotIn 0.5s var(--ease-out) 0.12s forwards; }
@keyframes dotIn { to { opacity: 1; transform: scale(1); } }

.intro-veil__ring { position: absolute; border: 1px solid rgba(210, 222, 245, 0.16);
  border-radius: 50%; opacity: 0; transform: scale(0.1); }
.intro-veil__ring--1 { width: 34vmax; height: 34vmax;
  animation: ringOut 1.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards; }
.intro-veil__ring--2 { width: 62vmax; height: 62vmax; border-color: rgba(210, 222, 245, 0.11);
  animation: ringOut 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards; }
.intro-veil__ring--3 { width: 92vmax; height: 92vmax; border-color: rgba(210, 222, 245, 0.07);
  animation: ringOut 2.1s cubic-bezier(0.16, 1, 0.3, 1) 0.64s forwards; }
@keyframes ringOut { 30% { opacity: 1; } to { opacity: 1; transform: scale(1); } }

.intro-veil__tag { position: absolute; color: #cfd9ea; font-family: var(--font-en);
  font-weight: 600; font-size: clamp(14px, 1.5vw, 19px); letter-spacing: 0.34em;
  text-transform: lowercase; opacity: 0; transform: translateY(6px);
  animation: tagIn 0.9s var(--ease-out) 0.85s forwards; }
@keyframes tagIn { to { opacity: 1; transform: none; } }

/* 2回目以降(同一セッション)は短縮版: JSが.intro-veil--skipを付与 */
.intro-veil--skip { animation: veilFade 0.45s ease 0.15s forwards; }
.intro-veil--skip .intro-veil__dot,
.intro-veil--skip .intro-veil__ring,
.intro-veil--skip .intro-veil__tag { animation: none; opacity: 0; }

html.is-motion-off .intro-veil { display: none; }

/* ============================================================
   16. v9.2(2026-07-25 なおむ指示: ヒーロー動画背景/コピー変更/KVカードWiz忠実化)
   ============================================================ */

/* --- ヒーロー動画背景(淡トーンの都市空撮ループ+白ウォッシュで文字可読性を維持) --- */
.hero-kv { position: relative; }
.hero-kv__video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%; }
.hero-kv__wash { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244, 248, 252, 0.62), rgba(238, 244, 250, 0.34) 55%, rgba(240, 245, 251, 0.5)); }
.hero-kv__inner, .hero-scroll { position: relative; z-index: 1; }
@media (max-width: 767px) { .hero-kv__video { display: none; } }  /* モバイルは静止画のまま(通信量) */
html.is-motion-off .hero-kv__video { display: none; }

/* --- KV下カード: Wiz実測値に忠実化(340x148・角丸6px・中央・JP28px太字+EN14px・色相差グラデ) --- */
.kv-cards { gap: clamp(20px, 3.4vw, 50px); }
.kv-card { min-height: 148px; border-radius: 6px; align-items: center; justify-content: center;
  text-align: center; padding: 36px 10px 38px; gap: 12px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.kv-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 60, 140, 0.22); }
.kv-card__ja { font-size: clamp(21px, 2vw, 28px); font-weight: 700; letter-spacing: 0.06em; }
.kv-card__en { font-size: 14px; font-weight: 400; letter-spacing: 0.115em; text-transform: uppercase; opacity: 0.92; }
.kv-card--g1 { background: linear-gradient(90deg, #0f4fd0, #2c63eb); }
.kv-card--g2 { background: linear-gradient(90deg, #3f8ae8, #6aa8f0); }
.kv-card--g3 { background: linear-gradient(90deg, #18a9c9, #2cc7e0); }

/* --- 16-2. CONTACT帯ボタンの文字色修正(透明背景化の際に黒文字が残っていた) --- */
.contact-band__btn { color: #ffffff; }
.contact-band__btn .arrow-circle { border-color: rgba(255,255,255,0.7); color: #ffffff; }

/* --- 16-3. お問い合わせ/資料請求の切替タブ+資料請求フォーム --- */
.form-tabs { display: flex; gap: 10px; margin-bottom: 34px; }
.form-tab { flex: 1; padding: 14px 10px; text-align: center; font-size: 14.5px; font-weight: 700;
  border: 1.5px solid var(--color-line); border-radius: 8px; background: #ffffff; cursor: pointer;
  color: var(--color-muted); transition: all 0.25s var(--ease-out); }
.form-tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #ffffff; }
.form-pane[hidden] { display: none; }
.form__check { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px;
  background: #f1f5fb; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.form__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex: none; }
.doc-note { font-size: 12.5px; color: var(--color-muted); line-height: 1.9; }

/* ============================================================
   17. v9.4(2026-07-25 なおむ指示: 文字サイズ拡大/BUSINESS強化/理念調整/事業内容の新構成)
   ============================================================ */

/* --- 17-1. ヒーロー下のチップ・グローバルナビを大きく --- */
.hero-kv__chip { font-size: clamp(16px, 1.85vw, 24px); padding: 14px 26px; letter-spacing: 0.03em; }
.global-nav ul a { font-size: 16px; letter-spacing: 0.04em; }
.nav-cta { font-size: 14.5px; }
@media (min-width: 1200px) { .global-nav ul { gap: clamp(22px, 2.4vw, 38px); } }

/* --- 17-2. BUSINESSセクションのデザイン強化 --- */
.wm-section { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f7fafd 0%, #eef4fb 100%); }
.wm-section::before { content: ""; position: absolute; left: -12%; top: -30%; width: 46%; height: 160%;
  background: linear-gradient(160deg, rgba(44,99,235,0.09), rgba(44,99,235,0)); transform: skewX(-16deg); }
.wm-section .container { position: relative; z-index: 1; }
.bar-title span { box-shadow: 0 10px 26px rgba(16, 18, 22, 0.16); }
.biz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
@media (max-width: 860px) { .biz-cards { grid-template-columns: 1fr; } }
.biz-card { position: relative; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 26px 24px 24px; box-shadow: var(--shadow-sm);
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out); }
.biz-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.biz-card__no { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--color-accent); }
.biz-card__ttl { font-size: 19px; font-weight: 900; margin-top: 8px; }
.biz-card__txt { font-size: 13.5px; line-height: 1.95; color: #3d4652; margin-top: 10px; }
.biz-card__bar { position: absolute; left: 0; top: 0; width: 100%; height: 4px; border-radius: 12px 12px 0 0; }
.biz-card:nth-child(1) .biz-card__bar { background: linear-gradient(90deg, #0f4fd0, #2c63eb); }
.biz-card:nth-child(2) .biz-card__bar { background: linear-gradient(90deg, #3f8ae8, #6aa8f0); }
.biz-card:nth-child(3) .biz-card__bar { background: linear-gradient(90deg, #18a9c9, #2cc7e0); }

/* --- 17-3. 企業理念: ラベル文字を大きく --- */
.mvv-label { font-size: clamp(16px, 1.8vw, 22px); letter-spacing: 0.24em; }
.page-header__en, .page-header__en span { font-size: clamp(14px, 1.5vw, 18px); letter-spacing: 0.24em; }
.vstep__en { font-size: clamp(22px, 2.2vw, 28px); }
.vstep__ja { font-size: 13.5px; }

/* --- 17-4. 事業内容: 詳細セクション(特徴グリッド/成果物/AI社員チップ/改善サイクル) --- */
.svc-detail__head { max-width: 46em; }
.svc-detail__badge { display: inline-block; font-family: var(--font-en); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; color: #ffffff; background: var(--color-accent); padding: 6px 14px; border-radius: 3px; }
.svc-detail__ttl { font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; margin-top: 16px; letter-spacing: 0.01em; }
.svc-detail__lead { font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; line-height: 2; margin-top: 14px; color: #3d4652; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 34px; }
.feat { background: #f5f8fd; border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; padding: 20px 22px; }
.feat b { display: block; font-size: 15.5px; font-weight: 900; }
.feat span { display: block; font-size: 13px; line-height: 1.9; color: #4a5462; margin-top: 8px; }

.deliver { margin-top: 34px; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 28px 30px; box-shadow: var(--shadow-sm); }
.svc-detail[style*="ffffff"] .deliver { background: #f8fafd; }
.deliver__ttl { font-size: 15px; font-weight: 900; padding-bottom: 14px; border-bottom: 2px solid var(--color-accent);
  display: inline-block; }
.deliver__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 26px; }
.deliver__list li { position: relative; padding-left: 26px; }
.deliver__list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--color-accent);
  font-weight: 900; font-size: 14px; }
.deliver__list b { display: block; font-size: 14.5px; font-weight: 800; }
.deliver__list span { display: block; font-size: 12.5px; line-height: 1.85; color: var(--color-muted); margin-top: 4px; }

.staff-role { margin-top: 40px; }
.staff-role__ttl { font-size: 15px; font-weight: 900; }
.staff-role__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.staff-role__chips span { display: block; background: #ffffff; border: 1px solid var(--color-line); border-radius: 10px;
  padding: 16px 18px; font-size: 15px; font-weight: 800; box-shadow: 0 4px 14px rgba(22,24,29,0.04); }
.staff-role__chips i { display: block; font-style: normal; font-size: 12.5px; font-weight: 400;
  color: var(--color-muted); margin-top: 6px; line-height: 1.75; }
.staff-role__note { font-size: 12.5px; line-height: 1.95; color: var(--color-muted); margin-top: 16px; }

.cycle { margin-top: 34px; }
.cycle__ttl { font-size: 15px; font-weight: 900; margin-bottom: 16px; }
.cycle__row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.cycle__item { flex: 1 1 190px; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.cycle__item span { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-accent); }
.cycle__item b { display: block; font-size: 14px; font-weight: 800; margin-top: 8px; line-height: 1.7; }
.cycle__arw { align-self: center; color: var(--color-accent); font-weight: 700; }
@media (max-width: 767px) { .cycle__arw { display: none; } }

/* svc2をaタグにしたのでリンク装飾を消す */
a.svc2 { text-decoration: none; color: inherit; }

/* --- 17-5. 導入の流れ(5ステップ縦カード)＋進め方の例 --- */
.flow5 { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1024px) { .flow5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flow5 { grid-template-columns: 1fr; } }
.flow5 li { position: relative; background: #f5f8fd; border-radius: 12px; padding: 26px 22px 24px;
  border-top: 4px solid var(--color-accent); }
.flow5 li::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  color: var(--color-accent); font-weight: 700; font-size: 15px; }
.flow5 li:last-child::after { content: none; }
@media (max-width: 1024px) { .flow5 li::after { content: none; } }
.flow5__no { display: block; font-family: var(--font-en); font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--color-accent); }
.flow5 b { display: block; font-size: 17px; font-weight: 900; margin-top: 8px; }
.flow5__txt { display: block; font-size: 13px; line-height: 1.95; color: #4a5462; margin-top: 10px; }

.pattern { margin-top: 48px; }
.pattern__ttl { font-size: 16px; font-weight: 900; padding-bottom: 12px;
  border-bottom: 2px solid var(--color-accent); display: inline-block; }
.pattern__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
@media (max-width: 860px) { .pattern__grid { grid-template-columns: 1fr; } }
.pattern__card { background: #ffffff; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 24px 24px 22px; box-shadow: var(--shadow-sm); }
.pattern__card b { display: block; font-size: 15.5px; font-weight: 900; }
.pattern__card p { font-size: 13px; line-height: 1.95; color: #4a5462; margin-top: 10px; }
.pattern__route { display: block; margin-top: 14px !important; padding: 12px 14px; background: #f1f5fb;
  border-radius: 8px; font-size: 12.5px !important; font-weight: 700; color: var(--color-text) !important; }
.pattern__route i { font-style: normal; color: var(--color-accent); padding-inline: 4px; }
.pattern__note { font-size: 13px; font-weight: 700; margin-top: 18px; }

/* ============================================================
   18. v9.5(2026-07-26 なおむ指示: AIDX LPの図解を事業内容へ移植+ヒーローチップ再拡大)
   ============================================================ */

/* --- ヒーローチップさらに拡大(前回24pxでも小さい指摘) --- */
.hero-kv__chip { font-size: clamp(19px, 2.3vw, 30px); padding: 16px 30px; font-weight: 900; }

/* --- 共通: 中央見出し・青強調・帯 --- */
.section-head--c { text-align: center; }
.section-head--c .section-head__title { font-size: clamp(26px, 3.4vw, 40px); }
.section-head__title em { font-style: normal; color: var(--color-accent); }
.band-note { text-align: center; font-size: clamp(15px, 1.8vw, 19px); font-weight: 900; margin-top: 40px; }
.band-note em { font-style: normal; color: var(--color-accent); }
.band-dark { margin-top: 36px; background: #101828; color: #ffffff; text-align: center; font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 900; padding: 22px 20px; border-radius: 10px; }
.band-dark em { font-style: normal; color: #7aa5f8; }

/* --- WHY NOW 3カラム図解 --- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 44px; align-items: start; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr; } }
.why-col { background: #f7fafd; border: 1px solid var(--line-soft); border-radius: 14px; padding: 24px 20px; }
.why-col__ttl { text-align: center; font-size: 15px; font-weight: 900; padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 2px solid var(--color-accent); }
.why-item { display: flex; gap: 12px; align-items: flex-start; background: #ffffff; border-radius: 10px;
  padding: 14px 16px; margin-top: 10px; box-shadow: 0 3px 10px rgba(22,24,29,0.04); }
.why-item i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #101828; }
.why-item i svg { width: 19px; height: 19px; stroke: #9db8ee; fill: none; stroke-width: 1.7; }
.why-item--good i { background: var(--color-accent); }
.why-item--good i svg { stroke: #ffffff; }
.why-item b { display: block; font-size: 14.5px; font-weight: 900; }
.why-item span { display: block; font-size: 12px; line-height: 1.8; color: #4a5462; margin-top: 3px; }
.vs-box { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.vs-box__head { text-align: center; font-size: 15px; font-weight: 900; color: #ffffff; padding: 12px; }
.vs-box--old .vs-box__head { background: #3c4657; }
.vs-box--new .vs-box__head { background: linear-gradient(90deg, #1d4fd6, #2c63eb); }
.vs-box ul { list-style: none; margin: 0; padding: 16px 18px; background: #ffffff; }
.vs-box--new ul { background: #eef4fe; }
.vs-box li { position: relative; padding: 6px 0 6px 24px; font-size: 13px; font-weight: 700; }
.vs-box li::before { content: "✓"; position: absolute; left: 2px; color: #9aa5b5; font-weight: 900; }
.vs-box--new li::before { color: var(--color-accent); }
.vs-arrow { text-align: center; color: var(--color-accent); font-size: 18px; padding: 8px 0; }

/* --- 4ステップ+一気通貫 --- */
.step4 { display: flex; align-items: stretch; gap: 8px; margin-top: 44px; }
@media (max-width: 1024px) { .step4 { flex-direction: column; } .step4__arw { transform: rotate(90deg); align-self: center; } }
.step4__item { flex: 1; position: relative; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 30px 22px 24px; text-align: center; box-shadow: var(--shadow-sm); }
.step4__no { position: absolute; left: 16px; top: 12px; font-family: var(--font-en); font-size: 13px; font-weight: 700;
  color: var(--color-accent); letter-spacing: 0.12em; }
.step4__item i { display: grid; place-items: center; width: 58px; height: 58px; margin: 4px auto 0; border-radius: 50%;
  background: #eef4fe; }
.step4__item i svg { width: 26px; height: 26px; stroke: var(--color-accent); fill: none; stroke-width: 1.7; }
.step4__item b { display: block; font-size: 17px; font-weight: 900; margin-top: 14px; padding-bottom: 10px;
  border-bottom: 2px solid #dfe9fb; }
.step4__item > span:last-child { display: block; font-size: 12.5px; line-height: 1.9; color: #4a5462; margin-top: 10px; text-align: left; }
.step4__arw { align-self: center; color: var(--color-accent); font-size: 15px; flex: none; }

/* --- 効果カード(バー/折れ線) --- */
.fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 1024px) { .fx-grid { grid-template-columns: 1fr; } }
.fx-card { background: #f7fafd; border: 1px solid var(--line-soft); border-radius: 14px; padding: 26px 26px 22px; }
.fx-card__cat { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 900; }
.fx-card__cat i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent); }
.fx-card__cat svg { width: 18px; height: 18px; stroke: #ffffff; fill: none; stroke-width: 1.8; }
.fx-card__big { font-size: clamp(20px, 2vw, 26px); font-weight: 900; color: var(--color-accent); line-height: 1.5;
  margin-top: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.fx-bars { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin-top: 18px; }
.fx-bars__label { font-size: 12px; font-weight: 700; color: var(--color-muted); }
.fx-bars__bar { display: block; height: 14px; border-radius: 7px; }
.fx-bars__bar--before { background: #c3ccd9; }
.fx-bars__bar--after { background: linear-gradient(90deg, #1d4fd6, #4b82f0); }
.fx-line { margin-top: 18px; }
.fx-line svg { width: 100%; height: 64px; }
.fx-card__note { font-size: 12.5px; font-weight: 700; margin-top: 14px; }
.fx-card__note em { font-style: normal; color: var(--color-accent); }

/* --- 総合的な経営効果/導入のメリット帯 --- */
.mgmt { margin-top: 32px; background: #ffffff; border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 26px 30px; box-shadow: var(--shadow-sm); }
section:not([style*="ffffff"]) .mgmt { background: #ffffff; }
.mgmt__ttl { text-align: center; font-size: 16px; font-weight: 900; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); }
.mgmt__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 860px) { .mgmt__row { grid-template-columns: 1fr 1fr; } }
.mgmt__item { display: flex; gap: 10px; align-items: flex-start; }
.mgmt__item i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); }
.mgmt__item svg { width: 18px; height: 18px; stroke: #ffffff; fill: none; stroke-width: 1.8; }
.mgmt__item b { display: block; font-size: 14px; font-weight: 900; }
.mgmt__item span { display: block; font-size: 11.5px; color: #4a5462; margin-top: 3px; line-height: 1.7; }

/* --- AI社員 放射図解 --- */
.radial { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-top: 44px; }
@media (max-width: 1024px) { .radial { grid-template-columns: 1fr; } .radial__line { display: none; } }
.radial__side { display: grid; gap: 14px; }
.radial__card { display: flex; gap: 12px; align-items: flex-start; background: #ffffff; border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.radial__card i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #101828; }
.radial__card svg { width: 20px; height: 20px; stroke: #9db8ee; fill: none; stroke-width: 1.7; }
.radial__card b { display: block; font-size: 15px; font-weight: 900; padding-bottom: 6px; border-bottom: 1px solid #dfe9fb; }
.radial__card span { display: block; font-size: 12px; line-height: 1.8; color: #4a5462; margin-top: 6px; }
.radial__center { position: relative; display: grid; place-items: center; padding: 20px 26px; }
.radial__core { position: relative; z-index: 1; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #24438f, #101f45 70%); border: 3px solid #35509d;
  box-shadow: 0 18px 44px rgba(16, 31, 69, 0.35); display: grid; place-content: center; justify-items: center;
  text-align: center; padding: 20px; }
.radial__core svg { width: 34px; height: 34px; stroke: #9db8ee; fill: none; stroke-width: 1.6; }
.radial__core b { color: #ffffff; font-size: 24px; font-weight: 900; margin-top: 8px; letter-spacing: 0.04em; }
.radial__core span { color: #b8c6e4; font-size: 11px; line-height: 1.8; margin-top: 8px; max-width: 150px; }
.radial__line { position: absolute; left: 50%; top: 50%; width: 190px; height: 1.5px;
  background: linear-gradient(90deg, rgba(44,99,235,0.55), rgba(44,99,235,0.05)); transform-origin: left center; }
.radial__line--1 { transform: rotate(160deg); } .radial__line--2 { transform: rotate(180deg); }
.radial__line--3 { transform: rotate(200deg); } .radial__line--4 { transform: rotate(20deg); }
.radial__line--5 { transform: rotate(0deg); } .radial__line--6 { transform: rotate(-20deg); }

/* --- 比較表 --- */
.cmp-wrap { overflow-x: auto; margin-top: 36px; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; }
.cmp thead th { padding: 16px 14px; text-align: center; font-size: 15px; font-weight: 900; color: #ffffff;
  background: #101828; border: 1px solid #2a3548; }
.cmp thead th:first-child { background: transparent; border: none; }
.cmp thead th.cmp__hl { background: linear-gradient(90deg, #1d4fd6, #2c63eb); border-color: #1d4fd6; }
.cmp tbody th { width: 110px; padding: 18px 12px; background: #101828; color: #ffffff; font-size: 13.5px;
  font-weight: 900; text-align: center; border: 1px solid #2a3548; }
.cmp tbody td { padding: 18px 16px; background: #f7fafd; border: 1px solid var(--color-line); color: #4a5462;
  line-height: 1.9; text-align: center; }
.cmp tbody td.cmp__hl { background: #eef4fe; color: var(--color-text); font-weight: 700; text-align: left; }
.cmp td.cmp__hl i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px;
  margin-right: 8px; border-radius: 50%; background: var(--color-accent); color: #ffffff; font-size: 11px; font-weight: 900; }

/* --- AI顧問 PDCA --- */
.advisor-cols { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; margin-top: 36px; }
@media (max-width: 860px) { .advisor-cols { grid-template-columns: 1fr; justify-items: center; } }
.pdca { width: 300px; height: 300px; }

/* --- Before/After --- */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 1024px) { .ba-grid { grid-template-columns: 1fr; } }
.ba__before, .ba__after { border-radius: 12px; padding: 22px 24px; }
.ba__before { background: #f1f3f7; border: 1px solid var(--color-line); }
.ba__after { background: #eef4fe; border: 1px solid #c8daf9; }
.ba__tag { display: inline-block; font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  padding: 4px 12px; border-radius: 999px; }
.ba__before .ba__tag { background: #3c4657; color: #ffffff; }
.ba__after .ba__tag { background: var(--color-accent); color: #ffffff; }
.ba b { display: block; font-size: 17px; font-weight: 900; margin-top: 10px; }
.ba__after b { color: var(--color-accent); }
.ba ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ba li { position: relative; padding: 4px 0 4px 20px; font-size: 12.5px; color: #4a5462; line-height: 1.8; }
.ba li::before { content: "・"; position: absolute; left: 4px; font-weight: 900; }
.ba__after li::before { color: var(--color-accent); }
.ba__arw { text-align: center; color: var(--color-accent); padding: 6px 0; font-size: 15px; }

/* ============================================================
   19. v9.6(2026-07-26 なおむ指示: 図解クオリティ向上/チップ再拡大/AI映像対応)
   ============================================================ */

/* --- 19-1. ヒーローチップを大型サブコピー化 --- */
.hero-kv__chip { font-size: clamp(22px, 2.9vw, 38px); padding: 18px 34px; border-radius: 6px;
  background: rgba(12, 16, 24, 0.82); backdrop-filter: blur(4px); letter-spacing: 0.04em; }

/* --- 19-2. AI映像(ブルートーン)向けにウォッシュを調整・タイトルを白に --- */
.hero-kv__wash { background: linear-gradient(180deg, rgba(10, 16, 30, 0.34), rgba(10, 16, 30, 0.16) 55%, rgba(10, 16, 30, 0.42)); }
.hero-kv__title { color: #ffffff; text-shadow: 0 4px 34px rgba(4, 10, 24, 0.5); }
.hero-scroll { color: #dfe7f5; }
.hero-scroll::after { background: #dfe7f5; }

/* --- 19-3. 図解の質感向上(共通トーン: 白カード+柔らかい多層影+グラデアクセント) --- */
.why-col { background: #ffffff; border-radius: 16px; border: 1px solid #e7edf6; padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(22, 34, 64, 0.07); }
.why-col__ttl { font-size: 16px; border-bottom: none; position: relative; padding-bottom: 16px; }
.why-col__ttl::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1d4fd6, #4b82f0); }
.why-item { background: #f7fafd; border: 1px solid #eef2f8; box-shadow: none; }
.why-item i { background: linear-gradient(150deg, #1b2b4d, #0f1830); box-shadow: inset 0 0 0 1.5px rgba(157, 184, 238, 0.35); }
.why-item--good i { background: linear-gradient(150deg, #2c63eb, #1d4fd6); box-shadow: 0 6px 14px rgba(44, 99, 235, 0.28); }
.vs-box { box-shadow: 0 14px 34px rgba(22, 34, 64, 0.10); border-radius: 14px; }
.vs-arrow { display: grid; place-items: center; width: 40px; height: 40px; margin: 10px auto; padding: 0;
  border-radius: 50%; background: linear-gradient(150deg, #2c63eb, #1d4fd6); color: #ffffff; font-size: 14px;
  box-shadow: 0 8px 18px rgba(44, 99, 235, 0.3); }

.step4 { gap: 18px; }
.step4__item { border-radius: 16px; border: 1px solid #e7edf6; box-shadow: 0 12px 30px rgba(22, 34, 64, 0.08);
  padding-top: 34px; }
.step4__no { left: 50%; top: -17px; transform: translateX(-50%); width: 36px; height: 36px; display: grid;
  place-items: center; border-radius: 50%; background: linear-gradient(150deg, #2c63eb, #1d4fd6); color: #ffffff;
  font-size: 13px; letter-spacing: 0.04em; box-shadow: 0 8px 18px rgba(44, 99, 235, 0.32); }
.step4__item i { background: linear-gradient(160deg, #eaf1fe, #dbe7fc); box-shadow: inset 0 0 0 1.5px #cfdff9; }
.step4__arw { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(150deg, #2c63eb, #1d4fd6); color: #ffffff; font-size: 11px;
  box-shadow: 0 6px 14px rgba(44, 99, 235, 0.3); }

.fx-card { position: relative; background: #ffffff; border-radius: 16px; border: 1px solid #e7edf6;
  box-shadow: 0 12px 30px rgba(22, 34, 64, 0.08); overflow: hidden; }
.fx-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, #1d4fd6, #4b82f0); }
.fx-card__cat i { box-shadow: 0 6px 14px rgba(44, 99, 235, 0.28); background: linear-gradient(150deg, #2c63eb, #1d4fd6); }
.fx-bars__bar--before { background: linear-gradient(90deg, #cdd6e3, #bcc7d8); }

.mgmt { border-radius: 16px; border: 1px solid #e7edf6; box-shadow: 0 12px 30px rgba(22, 34, 64, 0.08); }
.mgmt__item i { background: linear-gradient(150deg, #2c63eb, #1d4fd6); box-shadow: 0 6px 14px rgba(44, 99, 235, 0.28); }

.radial__card { border-radius: 14px; border: 1px solid #e7edf6; box-shadow: 0 10px 26px rgba(22, 34, 64, 0.08);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.radial__card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(22, 34, 64, 0.13); }
.radial__card i { background: linear-gradient(150deg, #1b2b4d, #0f1830); box-shadow: inset 0 0 0 1.5px rgba(157, 184, 238, 0.35); }
.radial__core { box-shadow: 0 24px 60px rgba(16, 31, 69, 0.4), 0 0 0 12px rgba(44, 99, 235, 0.07),
  0 0 0 26px rgba(44, 99, 235, 0.035); }
.radial__line { height: 2px; }
.radial__line::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #2c63eb; opacity: 0.55; }

.cmp-wrap { border-radius: 14px; box-shadow: 0 14px 34px rgba(22, 34, 64, 0.10); }
.cmp tbody td { background: #ffffff; }
.cmp tbody tr:nth-child(even) td { background: #fbfcfe; }
.cmp tbody tr:nth-child(even) td.cmp__hl, .cmp tbody td.cmp__hl { background: #eef4fe; }

.ba__before, .ba__after { border-radius: 14px; box-shadow: 0 10px 26px rgba(22, 34, 64, 0.07); }
.ba__arw { display: grid; place-items: center; width: 36px; height: 36px; margin: 8px auto; padding: 0;
  border-radius: 50%; background: linear-gradient(150deg, #2c63eb, #1d4fd6); color: #ffffff; font-size: 12px;
  box-shadow: 0 8px 18px rgba(44, 99, 235, 0.3); }

.band-dark { background: linear-gradient(120deg, #0d1b3a, #16294f 55%, #0f1f42); border-radius: 12px;
  position: relative; overflow: hidden; }
.band-dark::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 26px); }

.flow5 li { background: #ffffff; border: 1px solid #e7edf6; border-top: none; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(22, 34, 64, 0.07); overflow: hidden; }
.flow5 li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, #1d4fd6, #4b82f0); }
.pattern__card { border-radius: 14px; border: 1px solid #e7edf6; box-shadow: 0 10px 26px rgba(22, 34, 64, 0.07); }

.feat { position: relative; background: #ffffff; border: 1px solid #e7edf6; border-left: none;
  border-radius: 12px; box-shadow: 0 8px 22px rgba(22, 34, 64, 0.06); overflow: hidden; padding-left: 25px; }
.feat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #1d4fd6, #4b82f0); }
.deliver { border-radius: 16px; border: 1px solid #e7edf6; box-shadow: 0 12px 30px rgba(22, 34, 64, 0.08); }
.staff-role__chips span { border-radius: 12px; border: 1px solid #e7edf6; box-shadow: 0 8px 22px rgba(22, 34, 64, 0.06); }
.cycle__item { border-radius: 12px; border: 1px solid #e7edf6; box-shadow: 0 8px 22px rgba(22, 34, 64, 0.06); }



/* ============================================================
   20. v9.7(2026-07-26 リサーチ反映: Givery型黒帯JPコピー/都市×AI流線映像/詳細図解強化)
   ============================================================ */

/* --- 20-1. ヒーロー: 明るい都市×青流線に合わせて再設計 --- */
.hero-kv__wash { background: linear-gradient(180deg, rgba(244, 248, 252, 0.5), rgba(240, 245, 251, 0.22) 55%, rgba(240, 245, 251, 0.44)); }
.hero-kv__en { font-family: var(--font-en); font-weight: 700; font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.32em; color: var(--color-accent); text-transform: uppercase;
  opacity: 0; transform: translateY(10px); }
.is-hero-in .hero-kv__en { opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out) 0.1s, transform 0.6s var(--ease-out) 0.1s; }
.hero-kv__title--jp { color: inherit; text-shadow: none; margin-top: 18px;
  font-size: clamp(28px, 4vw, 56px); line-height: 1; letter-spacing: 0.04em; }
.hero-kv__title--jp .line-mask { display: block; margin-top: 14px; }
.hero-kv__title--jp .band { display: inline-block; background: #101828; color: #ffffff;
  padding: 12px 28px 14px; box-shadow: 0 14px 34px rgba(16, 24, 40, 0.28); }
.hero-scroll { color: #3d4652; }

/* --- 20-2. 詳細図解: featアイコン化 --- */
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(150deg, #2c63eb, #1d4fd6); box-shadow: 0 8px 18px rgba(44, 99, 235, 0.28); }
.feat__ic svg { width: 22px; height: 22px; stroke: #ffffff; fill: none; stroke-width: 1.7; }
.feat > div > b { display: block; font-size: 15.5px; font-weight: 900; }
.feat > div > span { display: block; font-size: 13px; line-height: 1.9; color: #4a5462; margin-top: 6px; }

/* --- 20-3. 成果物パネルをネイビーの提供物リストに刷新 --- */
.deliver { background: linear-gradient(135deg, #101f45, #0d1830); border: none;
  box-shadow: 0 18px 44px rgba(16, 31, 69, 0.3); }
.svc-detail[style*="ffffff"] .deliver { background: linear-gradient(135deg, #101f45, #0d1830); }
.deliver__ttl { color: #ffffff; border-bottom-color: #4b82f0; }
.deliver__list li { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px; padding: 16px 16px 14px 42px; }
.deliver__list li::before { left: 14px; top: 17px; display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: #2c63eb; color: #ffffff; font-size: 11px; }
.deliver__list b { color: #ffffff; }
.deliver__list span { color: #b8c6e4; }

/* ============================================================
   21. v9.8(2026-07-26 なおむモック準拠: 夜の街×光の階段KV)
   ============================================================ */
.hero-kv { background: #0a1428 url("/assets/img/kv_dubai_v6.jpg") center 30% / cover no-repeat; }
@media (max-width: 767px) { .hero-kv { background-image: url("/assets/img/kv_dubai_v6_mb.jpg"); } }
.hero-kv__wash { background: linear-gradient(90deg, rgba(6, 12, 26, 0.5), rgba(6, 12, 26, 0.12) 52%, rgba(6, 12, 26, 0) 70%),
  linear-gradient(180deg, rgba(6, 12, 26, 0.24), rgba(6, 12, 26, 0) 30%, rgba(6, 12, 26, 0.28)); }
.hero-kv__title { color: #ffffff; text-shadow: 0 6px 40px rgba(2, 8, 22, 0.55);
  font-size: clamp(46px, 6.4vw, 96px); line-height: 1.08; letter-spacing: 0.01em; }
.hero-kv__chip { font-size: clamp(16px, 1.7vw, 23px); padding: 13px 24px; font-weight: 700;
  background: rgba(10, 14, 22, 0.88); border-radius: 4px; }
.hero-scroll { color: #cfdaec; }

/* トップ最上部の透明ヘッダーは白文字(夜景上) */
.p-home .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgba(6, 10, 20, 0.5), rgba(6, 10, 20, 0)); }
.p-home .site-header:not(.is-scrolled) .site-header__logo { color: #ffffff !important; }
.p-home .site-header:not(.is-scrolled) .site-header__logo small { color: #9dc0f2 !important; }
.p-home .site-header:not(.is-scrolled) .global-nav ul a { color: #ffffff !important; }
.p-home .site-header:not(.is-scrolled) .nav-toggle span { background: #ffffff !important; }

/* KVカード: モック準拠(JP小ラベル+EN大+丸矢印・左寄せ) */
.kv-card { align-items: flex-start; text-align: left; justify-content: flex-start;
  padding: 22px 26px 20px; min-height: 150px; gap: 6px; border-radius: 10px; }
.kv-card__ja { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.95; }
.kv-card__en { font-family: var(--font-en); font-size: clamp(20px, 1.9vw, 27px); font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; opacity: 1; }
.kv-card__arw { margin-top: auto; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.8); border-radius: 50%; font-size: 13px; color: #ffffff;
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.kv-card:hover .kv-card__arw { background: rgba(255, 255, 255, 0.18); transform: translateX(3px); }

/* --- 21-2. 表示保証フォールバック: タイマー遅延環境でもタイトル/チップを必ず表示 --- */
@keyframes charFallback { to { transform: translateY(0) rotate(0); } }
.hero-kv__title .line-mask i { animation: charFallback 0.8s cubic-bezier(0.16, 1.24, 0.24, 1) 2.5s forwards; }
@keyframes chipFallback { to { opacity: 1; transform: none; } }
.hero-kv__chip { animation: chipFallback 0.6s ease 3s forwards; }
html.is-motion-off .hero-kv__title .line-mask i,
html.is-motion-off .hero-kv__chip { animation: none; }

/* --- 21-3. WHY NOW図解のカラムバランス統一(2026-07-26 なおむ指摘) ---
   3カラムを同じ高さに伸ばし、項目を均等分配して左右の高低差をなくす */
.why-grid { align-items: stretch; }
.why-col { display: flex; flex-direction: column; }
.why-col__ttl { flex: none; }
.why-item { flex: 1; align-items: center; }
.why-col > .vs-box { flex: 1; display: flex; flex-direction: column; }
.vs-box ul { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.vs-arrow { flex: none; }

/* --- 22. v10.2: WHY図解のバランス統一(3カラム等高・アイテム等分配置) --- */
.why-grid { align-items: stretch; }
.why-col { display: flex; flex-direction: column; }
.why-col__ttl { flex: none; }
.why-item { flex: 1; display: flex; align-items: center; min-height: 92px; }
.why-item + .why-item { margin-top: 14px; }
.why-col .vs-box--old { flex: 1; }
.why-col .vs-box--new { flex: 1; }
.vs-arrow { flex: none; }

/* --- 23. v10.7(2026-07-27): ナビのホバーアンダーライン(左から伸びる) --- */
.global-nav ul a { position: relative; padding-bottom: 6px; }
.global-nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
.global-nav ul a:hover::after,
.global-nav ul a:focus-visible::after { transform: scaleX(1); }
.global-nav a[aria-current="page"] { border-bottom: none; }
.global-nav a[aria-current="page"]::after { transform: scaleX(1); }
html.is-motion-off .global-nav ul a::after { transition: none; }

/* --- 24. v11(2026-07-27): 詳細セクションに自作フラットイラスト --- */
.svc-detail__top { display: grid; grid-template-columns: 1fr minmax(250px, 400px);
  gap: clamp(24px, 4vw, 64px); align-items: center; }
.svc-detail__art svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .svc-detail__top { grid-template-columns: 1fr; }
  .svc-detail__art { max-width: 330px; margin-inline: auto; }
}


/* ============================================================
   26. v12.3(2026-07-31): AI市場の構造セクション(事業内容)
   ============================================================ */
.mkt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .mkt-grid { grid-template-columns: 1fr; } }
.mkt { position: relative; display: flex; flex-direction: column; background: #ffffff;
  border: 1px solid #e7edf6; border-radius: 16px; padding: 30px 26px 24px;
  box-shadow: 0 10px 30px rgba(22, 34, 64, 0.07); }
.mkt__no { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto;
  border-radius: 50%; background: #c3cedd; color: #ffffff; font-family: var(--font-en);
  font-weight: 700; font-size: 17px; }
.mkt__name { font-size: 19px; font-weight: 900; text-align: center; margin-top: 14px; color: var(--color-text); }
.mkt__phase { font-size: 12px; text-align: center; color: var(--color-muted); margin-top: 6px;
  padding-bottom: 14px; border-bottom: 1px solid #e7edf6; }
.mkt__list { list-style: none; padding: 0; margin: 16px 0 0; flex: 1; }
.mkt__list li { position: relative; font-size: 13px; line-height: 1.9; color: #3d4652; padding-left: 16px; }
.mkt__list li::before { content: "・"; position: absolute; left: 0; }
.mkt__goal { margin-top: 18px; background: #f1f5fb; border-radius: 10px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 900; text-align: center; color: var(--color-text); }
.mkt__goal span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--color-muted); margin-bottom: 4px; }

/* ② 実装市場 = 主戦場(ネイビー塗り) */
.mkt--main { background: linear-gradient(160deg, #14264e, #0d1b3a); border: none;
  box-shadow: 0 18px 44px rgba(16, 31, 69, 0.28); }
.mkt--main .mkt__no { background: #ffffff; color: #14264e; }
.mkt--main .mkt__name { color: #ffffff; }
.mkt--main .mkt__phase { color: #c2cfe2; border-bottom-color: rgba(255,255,255,0.14); }
.mkt--main .mkt__list li { color: #d3dff0; font-weight: 700; }
.mkt--main .mkt__goal { background: rgba(255,255,255,0.1); color: #ffffff; }
.mkt--main .mkt__goal span { color: #9dc0f2; }
.mkt__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #2c63eb, #4b82f0); color: #ffffff; font-size: 11.5px;
  font-weight: 900; letter-spacing: 0.08em; padding: 5px 18px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(44, 99, 235, 0.35); white-space: nowrap; }

/* ③ 経営市場 = ティールアクセント(カード配色系統と統一) */
.mkt--future { border: 1.5px solid #2cc7e0; }
.mkt--future .mkt__no { background: linear-gradient(90deg, #18a9c9, #2cc7e0); }
.mkt--future .mkt__name { color: #128ba6; }

.mkt-flow { margin-top: 34px; background: #ffffff; border: 1px solid #e7edf6; border-radius: 14px;
  padding: 20px 24px; box-shadow: 0 8px 22px rgba(22, 34, 64, 0.06); }
.mkt-flow__ttl { font-size: 12px; font-weight: 900; text-align: center; color: var(--color-accent);
  letter-spacing: 0.12em; }
.mkt-flow__row { display: flex; align-items: stretch; gap: 12px; margin-top: 14px; }
@media (max-width: 860px) { .mkt-flow__row { flex-direction: column; } .mkt-flow__arw { transform: rotate(90deg); } }
.mkt-flow__item { flex: 1; text-align: center; }
.mkt-flow__item b { display: block; font-size: 13px; font-weight: 800; line-height: 1.7; }
.mkt-flow__item span { display: block; font-size: 11px; color: var(--color-muted); margin-top: 4px; }
.mkt-flow__arw { align-self: center; color: var(--color-accent); font-weight: 700; flex: none; }

.mkt-band { margin-top: 22px; background: linear-gradient(120deg, #0d1b3a, #16294f); border-radius: 14px;
  padding: 26px 30px; text-align: center; }
.mkt-band p { color: #d3dff0; font-size: 14px; line-height: 2; }
.mkt-band b { color: #ffffff; font-size: 16.5px; }

/* ============================================================
   27. v12.4(2026-07-31): AI実装市場ポジショニングの積極訴求
   ============================================================ */
/* ヒーローの宣言文 */
.hero-kv__pos { margin-top: 18px; color: #ffffff; font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 2px 18px rgba(4, 10, 24, 0.6);
  opacity: 0; transform: translateY(12px); }
.hero-kv__pos b { color: #9dc0f2; padding-inline: 2px; }
.is-hero-in .hero-kv__pos { opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.5s; }
@keyframes posFallback { to { opacity: 1; transform: none; } }
.hero-kv__pos { animation: posFallback 0.6s ease 3.2s forwards; }
html.is-motion-off .hero-kv__pos { opacity: 1; transform: none; animation: none; }

/* トップのポジショニングセクション */
.pos-sec { background: linear-gradient(180deg, #ffffff, #f4f8fd); }
.pos-lead { margin-top: 34px; font-size: clamp(26px, 3.4vw, 44px); font-weight: 900;
  letter-spacing: 0.02em; line-height: 1.5; }
.pos-lead span { color: var(--color-accent); border-bottom: 4px solid rgba(44, 99, 235, 0.25); padding-bottom: 2px; }
.pos-body { margin-top: 22px; font-size: clamp(14px, 1.7vw, 17px); line-height: 2.15; color: #3d4652; }
.pos-body b { color: var(--color-text); }

.pos-strip { display: flex; align-items: stretch; gap: 14px; margin-top: 38px; }
@media (max-width: 860px) { .pos-strip { flex-direction: column; } .pos-arw { transform: rotate(90deg); align-self: center; } }
.pos-tier { position: relative; flex: 1; background: #ffffff; border: 1px solid #e7edf6; border-radius: 14px;
  padding: 24px 20px 20px; text-align: center; box-shadow: 0 8px 22px rgba(22, 34, 64, 0.06); }
.pos-tier i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 10px;
  border-radius: 50%; background: #c3cedd; color: #ffffff; font-style: normal;
  font-family: var(--font-en); font-weight: 700; font-size: 14px; }
.pos-tier b { display: block; font-size: 16.5px; font-weight: 900; }
.pos-tier span { display: block; font-size: 12px; color: var(--color-muted); margin-top: 6px; }
.pos-arw { align-self: center; color: var(--color-accent); font-weight: 700; font-size: 18px; flex: none; }

.pos-tier--main { background: linear-gradient(160deg, #14264e, #0d1b3a); border: none;
  box-shadow: 0 16px 38px rgba(16, 31, 69, 0.28); padding-top: 30px; }
.pos-tier--main i { background: #ffffff; color: #14264e; }
.pos-tier--main b { color: #ffffff; font-size: 18px; }
.pos-tier--main span { color: #c2cfe2; }
.pos-tier--main em { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-style: normal; background: linear-gradient(90deg, #2c63eb, #4b82f0); color: #ffffff;
  font-size: 11px; font-weight: 900; letter-spacing: 0.08em; padding: 4px 16px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(44, 99, 235, 0.35); white-space: nowrap; }

/* ============================================================
   28. v12.5(2026-07-31): AI市場の階段状デザイン+ワークフロー動画バンド
   ============================================================ */
/* --- 共通: 階層アイコン --- */
.pos-tier__ic, .mkt__ic { display: grid; place-items: center; width: 46px; height: 46px;
  margin: 0 auto 10px; border-radius: 12px; background: #eef3fc; }
.pos-tier__ic svg, .mkt__ic svg { width: 22px; height: 22px; stroke: var(--color-accent); fill: none; stroke-width: 1.7; }
.pos-tier--main .pos-tier__ic, .mkt--main .mkt__ic { background: rgba(255, 255, 255, 0.12); }
.pos-tier--main .pos-tier__ic svg, .mkt--main .mkt__ic svg { stroke: #9dc0f2; }
.mkt--future .mkt__ic { background: #e5f7fb; }
.mkt--future .mkt__ic svg { stroke: #128ba6; }

/* --- トップ: 階段状ストリップ(右肩上がり=Path) --- */
.pos-strip--stairs { position: relative; align-items: flex-end; padding-top: 26px; }
.pos-path { position: absolute; left: 4%; right: 4%; bottom: 78px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #c9d8ee, var(--color-accent) 55%, #2cc7e0);
  transform: rotate(-6.5deg); transform-origin: left bottom; opacity: 0.5; pointer-events: none; }
.pos-path::after { content: "▶"; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%); color: #2cc7e0; font-size: 13px; }
.pos-tier { z-index: 1; }
.pos-tier--s1 { margin-bottom: 0; }
.pos-tier--s2 { margin-bottom: 34px; }
.pos-tier--s3 { margin-bottom: 68px; }
.pos-tier--main.pos-tier--s2 { transform: scale(1.05); }
@media (max-width: 860px) {
  .pos-strip--stairs { align-items: stretch; padding-top: 14px; }
  .pos-tier--s1, .pos-tier--s2, .pos-tier--s3 { margin-bottom: 0; }
  .pos-tier--main.pos-tier--s2 { transform: none; }
  .pos-path { display: none; }
}

/* --- 事業内容: 市場カードも階段状に --- */
@media (min-width: 861px) {
  .mkt-grid { align-items: start; }
  .mkt--s1 { margin-top: 72px; }
  .mkt--s2 { margin-top: 36px; }
  .mkt--s3 { margin-top: 0; }
}

/* --- ワークフロー動画バンド --- */
.demo-band { margin-top: 48px; background: linear-gradient(150deg, #0b1630, #10224a 55%, #0b1a3a);
  border-radius: 18px; padding: clamp(28px, 4vw, 52px); position: relative; overflow: hidden;
  box-shadow: 0 22px 54px rgba(9, 20, 46, 0.35); }
.demo-band::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 30px); }
.demo-band > * { position: relative; }
.demo-band__en { font-family: var(--font-en); font-weight: 700; font-size: 11px;
  letter-spacing: 0.3em; color: #6fa4e8; }
.demo-band__ttl { color: #ffffff; font-size: clamp(19px, 2.4vw, 27px); font-weight: 900; margin-top: 10px; }
.demo-band__sub { color: #c2cfe2; font-size: 13.5px; line-height: 2; margin-top: 12px; }
.demo-band__video { display: block; width: 100%; max-width: 880px; margin: 26px auto 0;
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12); }
.demo-band__note { color: #8fa3c8; font-size: 11.5px; margin-top: 14px; text-align: center; }

/* ============================================================
   29. v12.6(2026-07-31): AI市場図解を参考図準拠に(フラット3カード+太矢印)
   ============================================================ */
/* 旧: 階段レイアウトの無効化 */
.pos-strip { align-items: stretch !important; padding-top: 26px; }
.pos-tier--main { transform: none !important; }

/* --- 3カード --- */
.mkt2-row { display: flex; align-items: stretch; gap: 0; }
.mkt2 { flex: 1; display: flex; flex-direction: column; background: #ffffff;
  border: 1.5px solid #d8dfe9; border-radius: 12px; padding: 26px 24px 22px; text-align: center; }
.mkt2__no { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto;
  border-radius: 50%; background: #9aa6b5; color: #ffffff;
  font-family: var(--font-en); font-weight: 700; font-size: 17px; }
.mkt2__name { font-size: clamp(19px, 2vw, 24px); font-weight: 900; margin-top: 12px; }
.mkt2__phase { font-size: 12.5px; font-weight: 700; margin-top: 6px; color: #3d4652; }
.mkt2__icons { display: flex; justify-content: center; gap: 22px; margin-top: 18px;
  padding-bottom: 16px; border-bottom: 1px solid #d8dfe9; }
.mkt2__icons svg { width: 44px; height: 44px; stroke: #16264d; color: #16264d; fill: none; stroke-width: 1.5; }
.mkt2__list { list-style: none; padding: 0; margin: 16px auto 0; text-align: left; flex: 1; }
.mkt2__list li { position: relative; font-size: 13.5px; font-weight: 700; line-height: 2; padding-left: 16px; color: #23283a; }
.mkt2__list li::before { content: "・"; position: absolute; left: 0; }
.mkt2__goal { margin-top: 16px; background: #eef1f6; border-radius: 8px; padding: 12px 14px;
  font-size: 14px; font-weight: 900; color: #23283a; }
.mkt2__goal span { display: block; font-size: 10.5px; font-weight: 700; margin-bottom: 4px; color: #5a6472; }

/* ① リテラシー(グレー) */
.mkt2--lit .mkt2__name { color: #23283a; }
/* ② 実装(ネイビー塗り=主戦場) */
.mkt2--main { background: linear-gradient(165deg, #16294f, #0e1f42); border: none;
  box-shadow: 0 18px 44px rgba(14, 31, 66, 0.3); }
.mkt2--main .mkt2__no { background: transparent; border: 2px solid #ffffff; color: #ffffff; }
.mkt2--main .mkt2__name { color: #ffffff; }
.mkt2--main .mkt2__phase { color: #c2cfe2; }
.mkt2--main .mkt2__icons { border-bottom-color: rgba(255,255,255,0.22); }
.mkt2--main .mkt2__icons svg { stroke: #ffffff; color: #ffffff; }
.mkt2--main .mkt2__list li { color: #eaf1fb; }
.mkt2--main .mkt2__goal { background: #ffffff; color: #14264e; }
.mkt2--main .mkt2__goal span { color: #3a5a8c; }
/* ③ 経営(ティール=HP配色) */
.mkt2--mgmt { border-color: #2cc7e0; }
.mkt2--mgmt .mkt2__no { background: linear-gradient(90deg, #18a9c9, #2cc7e0); }
.mkt2--mgmt .mkt2__name { color: #128ba6; }
.mkt2--mgmt .mkt2__phase { color: #128ba6; }
.mkt2--mgmt .mkt2__icons svg { stroke: #128ba6; color: #128ba6; }
.mkt2--mgmt .mkt2__list li { color: #14606f; }
.mkt2--mgmt .mkt2__goal { background: #e5f7fb; color: #0f7a91; }
.mkt2--mgmt .mkt2__goal span { color: #128ba6; }

/* --- 太矢印 --- */
.mkt2-arw { flex: none; align-self: center; width: 46px; height: 34px; margin: 0 8px;
  background: #b9c3d2; clip-path: polygon(0 26%, 52% 26%, 52% 0, 100% 50%, 52% 100%, 52% 74%, 0 74%); }
.mkt2-arw--navy { background: #16294f; }
.mkt2-arw--sm { width: 34px; height: 26px; margin: 0 4px; }
@media (max-width: 860px) {
  .mkt2-row { flex-direction: column; gap: 14px; }
  .mkt2-arw { transform: rotate(90deg); margin: -2px auto; }
}

/* --- 進化の流れ --- */
.mkt2-flow { margin-top: 30px; border: 1.5px solid #16294f; border-radius: 10px;
  padding: 18px 24px 20px; background: #ffffff; }
.mkt2-flow__ttl { position: relative; text-align: center; font-size: 14px; font-weight: 900; color: #16264d; }
.mkt2-flow__ttl::before, .mkt2-flow__ttl::after { content: ""; position: absolute; top: 50%; width: 60px;
  height: 1.5px; background: #16294f; }
.mkt2-flow__ttl::before { left: calc(50% - 150px); }
.mkt2-flow__ttl::after { right: calc(50% - 150px); }
.mkt2-flow__row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (max-width: 860px) { .mkt2-flow__row { flex-direction: column; } .mkt2-flow__sep { transform: rotate(90deg); } }
.mkt2-flow__item { flex: 1; text-align: center; }
.mkt2-flow__item b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.7; color: #23283a; }
.mkt2-flow__item span { display: block; font-size: 11.5px; color: #5a6472; margin-top: 4px; }
.mkt2-flow__sep { flex: none; font-style: normal; font-size: 26px; color: #b9c3d2; font-weight: 700; line-height: 1; }

/* --- 結論帯 --- */
.mkt2-down { text-align: center; color: #16294f; font-size: 17px; margin: 14px 0 12px; }
.mkt2-band { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg, #14264e, #0e1f42);
  border-radius: 10px; padding: 18px 28px; }
.mkt2-band__ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: #ffffff; }
.mkt2-band__ic svg { width: 26px; height: 26px; stroke: #16294f; fill: none; stroke-width: 1.7; }
.mkt2-band p { color: #ffffff; font-size: clamp(14px, 1.7vw, 17.5px); font-weight: 700; line-height: 1.9; }
.mkt2-band b { color: #9dc0f2; }
@media (max-width: 600px) { .mkt2-band { flex-direction: column; text-align: center; } }

/* --- 30. v12.7(2026-07-31): トップPOSITIONING図解も参考図準拠のミニ版に --- */
.pos-strip--v2 { display: flex; align-items: stretch; gap: 0; padding-top: 18px; }
.pos-strip--v2 .mkt2 { position: relative; }
.mkt2--mini { padding: 24px 20px 20px; }
.mkt2--mini .mkt2__name { font-size: clamp(17px, 1.8vw, 21px); }
.mkt2--mini .mkt2__phase { font-size: 12px; }
.mkt2--mini .mkt2__icons { border-bottom: none; padding-bottom: 4px; gap: 18px; }
.mkt2--mini .mkt2__icons svg { width: 36px; height: 36px; }
.mkt2__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-style: normal; background: linear-gradient(90deg, #2c63eb, #4b82f0); color: #ffffff;
  font-size: 11.5px; font-weight: 900; letter-spacing: 0.08em; padding: 5px 18px;
  border-radius: 999px; box-shadow: 0 6px 16px rgba(44, 99, 235, 0.35); white-space: nowrap; z-index: 1; }
@media (max-width: 860px) {
  .pos-strip--v2 { flex-direction: column; gap: 14px; }
  .pos-strip--v2 .mkt2-arw { transform: rotate(90deg); margin: -2px auto; }
}

/* ============================================================
   31. v12.9(2026-08-03): AI顧問セクションの図解精度向上
   ============================================================ */
.advisor-cols { display: grid; grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 44px; }
@media (max-width: 860px) { .advisor-cols { grid-template-columns: 1fr; } }
.pdca { width: 100%; max-width: 340px; height: auto; display: block; margin-inline: auto;
  filter: drop-shadow(0 14px 30px rgba(22, 34, 64, 0.12)); }

.advisor-txt__en { font-family: var(--font-en); font-weight: 700; font-size: 11px;
  letter-spacing: 0.28em; color: var(--color-accent); }
.advisor-txt__ttl { font-size: clamp(17px, 2vw, 22px); font-weight: 900; margin-top: 10px; }
.advisor-txt__body { font-size: 13.5px; line-height: 2.05; color: #3d4652; margin-top: 12px; }
.advisor-txt__list { list-style: none; padding: 0; margin: 18px 0 0; }
.advisor-txt__list li { position: relative; padding: 10px 14px 10px 40px; font-size: 13.5px;
  font-weight: 700; color: #23283a; background: #f5f8fd; border-radius: 8px; }
.advisor-txt__list li + li { margin-top: 8px; }
.advisor-txt__list li::before { content: "✓"; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--color-accent); color: #ffffff; font-size: 11px; font-weight: 900; }

/* 4ステップ版flow5 */
.flow5--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .flow5--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flow5--4 { grid-template-columns: 1fr; } }

/* --- 32. v13(2026-08-03): 詳細イラストをunDrawに統一 --- */
.svc-detail__art img { width: 100%; max-width: 400px; height: auto; display: block; margin-inline: auto; }

/* ============================================================
   33. v13.2(2026-08-03): セクション間の余白を圧縮(ページが長く見える対策)
   ============================================================ */
:root { --section-pad: clamp(52px, 7vw, 96px); }
.section-head { margin-bottom: calc(var(--space) * 5); }
.page-header { padding: calc(var(--section-pad) * 0.9) 0 calc(var(--section-pad) * 0.45); }
/* 図解ブロックの上下も詰める */
.mkt-flow, .cycle, .pattern { margin-top: 26px; }
.demo-band, .deliver, .staff-role { margin-top: 32px; }
.advisor-cols { margin-top: 34px; }
.feat-grid { margin-top: 26px; }

/* ============================================================
   34. v14(2026-08-04): ヒーローを日本語主役の特大見出しに(参考画像準拠)
   ============================================================ */
/* 英字ラベル(小・上) */
.hero-kv__en { font-family: var(--font-en); font-weight: 700;
  font-size: clamp(12px, 1.25vw, 16px); letter-spacing: 0.3em;
  color: #9dc0f2; text-transform: uppercase;
  opacity: 0; transform: translateY(10px); }
.is-hero-in .hero-kv__en { opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s; }
@keyframes heroEnFallback { to { opacity: 1; transform: none; } }
.hero-kv__en { animation: heroEnFallback .6s ease 3s forwards; }

/* 日本語の特大見出し(参考画像レベル) */
.hero-kv__title--jp { font-family: var(--font-base); font-weight: 900;
  font-size: clamp(40px, 7.4vw, 108px); line-height: 1.16; letter-spacing: 0.02em;
  color: #ffffff; margin-top: 20px;
  text-shadow: 0 4px 40px rgba(4, 10, 24, 0.55); }
.hero-kv__title--jp .line-mask { display: block; }
.hero-kv__title--jp .line-mask + .line-mask { margin-top: 4px; }

/* サブコピー */
.hero-kv__sub { margin-top: 26px; color: #ffffff; font-weight: 700;
  font-size: clamp(16px, 2.1vw, 28px); letter-spacing: 0.04em;
  text-shadow: 0 2px 22px rgba(4, 10, 24, 0.6);
  opacity: 0; transform: translateY(12px); }
.is-hero-in .hero-kv__sub { opacity: 1; transform: none;
  transition: opacity .6s var(--ease-out) .5s, transform .6s var(--ease-out) .5s; }
@keyframes heroSubFallback { to { opacity: 1; transform: none; } }
.hero-kv__sub { animation: heroSubFallback .6s ease 3.2s forwards; }
html.is-motion-off .hero-kv__en,
html.is-motion-off .hero-kv__sub { opacity: 1; transform: none; animation: none; }

/* 背景を少し暗くして特大白文字を安定させる */
.hero-kv__wash { background: linear-gradient(90deg, rgba(6,11,24,0.62), rgba(6,11,24,0.34) 55%, rgba(6,11,24,0.12)); }

/* --- 34-2. ヒーローのテキストを左端寄せに --- */
.hero-kv__inner { width: min(1320px, 100% - 96px);
  margin-left: clamp(28px, 4.5vw, 72px); margin-right: auto; }
@media (max-width: 767px) { .hero-kv__inner { margin-left: 24px; width: calc(100% - 48px); } }

/* --- 34-4. ヒーローは夜景写真KVに差し戻し(2026-08-05 なおむ指示)。テキストの左寄せのみ維持 --- */
.hero-kv__wash { background: linear-gradient(90deg, rgba(6,11,24,0.62), rgba(6,11,24,0.34) 55%, rgba(6,11,24,0.12)); }
.hero-kv__en { color: #ffffff; }
.hero-kv__title--jp { color: #ffffff; text-shadow: 0 4px 40px rgba(4, 10, 24, 0.55); }
.hero-kv__sub { color: #ffffff; text-shadow: 0 2px 22px rgba(4, 10, 24, 0.6); }
.hero-scroll { color: #cfdaec; }
.hero-scroll::after { background: #cfdaec; }
.p-home .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgba(6, 10, 20, 0.5), rgba(6, 10, 20, 0)); }
.p-home .site-header:not(.is-scrolled) .site-header__logo,
.p-home .site-header:not(.is-scrolled) .global-nav ul a { color: #ffffff !important; }
.p-home .site-header:not(.is-scrolled) .site-header__logo small { color: #9dc0f2 !important; }
.p-home .site-header:not(.is-scrolled) .nav-toggle span { background: #ffffff !important; }

/* ============================================================
   35. モバイル最適化層 (2026-08-07)
   スマホ(767px以下)のUI/UX改善。この層はすべて @media 内に閉じてあり、
   PC表示には一切影響しない。
   ============================================================ */
@media (max-width: 767px) {

  /* --- 35-1. ドロワーメニューの致命バグ修正 ---------------------------
     ①白背景×白文字でリンクが完全に不可視だった(トップページ)
     ②ヘッダー(z:100) < ドロワー(z:200) のため閉じるボタンが背面に隠れ、
       リンクを踏む以外にメニューを閉じられなかった                     */
  .site-header { z-index: calc(var(--z-nav) + 10); }
  .global-nav {
    background: #0d1526;
    place-content: start stretch;
    padding: 96px 24px 0;
  }
  .global-nav ul { gap: 0; width: 100%; }
  .global-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .global-nav ul a,
  .p-home .site-header:not(.is-scrolled) .global-nav ul a {
    color: #ffffff !important;
    display: block; padding: 19px 4px; font-size: 17px;
    letter-spacing: 0.08em; text-align: left;
  }
  .global-nav ul a::after { content: none; }
  .global-nav a[aria-current="page"],
  .p-home .site-header:not(.is-scrolled) .global-nav a[aria-current="page"] {
    color: #7fa9f5 !important; border-color: #7fa9f5;
  }
  body.nav-open .site-header { background: transparent; backdrop-filter: none; box-shadow: none; }
  body.nav-open .site-header__logo,
  body.nav-open .p-home .site-header__logo { color: #ffffff !important; }
  body.nav-open .site-header__logo small { color: #9dc0f2 !important; }
  body.nav-open .nav-toggle span,
  .p-home .site-header:not(.is-scrolled) .nav-toggle[aria-expanded="true"] span { background: #ffffff !important; }

  /* ロゴはヘッダー内で非配置(z:auto)のため、配置済みのドロワー(z:200)に隠れていた */
  body.nav-open .site-header__logo { position: relative; z-index: calc(var(--z-nav) + 1); }

  /* お問い合わせ導線: SPはヘッダーCTAが非表示で導線が無かったのでドロワー内に出す */
  .global-nav.is-open ~ .nav-cta,
  body.p-home .site-header:not(.is-scrolled) .global-nav.is-open ~ .nav-cta {
    display: inline-flex; position: fixed; z-index: calc(var(--z-nav) + 1);
    left: 24px; right: 24px; bottom: 44px; margin: 0;
    justify-content: center; padding: 17px 24px; font-size: 15px;
    background: var(--color-accent); color: #ffffff !important;
  }

  /* --- 35-2. ヒーロー: 見出しが大きすぎて「進化」が行またぎで分断されていた --- */
  .hero-kv { min-height: 72svh; }
  .hero-kv__en { font-size: 11px; letter-spacing: 0.13em; }
  .hero-kv__title--jp { font-size: clamp(29px, 8.4vw, 36px); line-height: 1.32; }
  .hero-kv__title--jp .line-mask + .line-mask { margin-top: 2px; }
  .hero-kv__sub { font-size: 14px; margin-top: 16px; }

  /* --- 35-3. KV下カード: 1枚が大きく3枚でほぼ1画面を占有していた --- */
  .kv-cards { gap: 12px; }
  .kv-card { min-height: 96px; padding: 18px 20px; }
  .kv-card__en { font-size: 21px; }
  .kv-card__arw { width: 26px; height: 26px; margin-top: 10px; }

  /* --- 35-4. PATH × FORGE: 2カラムのままで右カラムが潰れ、
         本文が2文字で折返し・ボタンが3行になっていた(インラインstyle上書き) --- */
  .slash-bg > .container { grid-template-columns: 1fr !important; gap: 20px !important; }
  .slash-bg .en-head__en { font-size: clamp(40px, 12vw, 56px); }
  .slash-bg .button--soft { width: 100%; justify-content: space-between !important; }

  /* --- 35-5. 比較表: 主役のPathForge列が画面外に隠れたままだった。
         横スクロールをやめ、画面幅に収めて全列を見せる --- */
  .cmp { min-width: 0; width: 100%; table-layout: fixed; font-size: 11.5px; }
  .cmp thead th { padding: 11px 6px; font-size: 12px; }
  .cmp tbody th { width: 66px; padding: 12px 6px; font-size: 11.5px; letter-spacing: 0; }
  .cmp tbody td { padding: 12px 8px; line-height: 1.7; }
  .cmp tbody td.cmp__hl { padding-left: 10px; }
  .cmp td.cmp__hl i { width: 16px; height: 16px; }

  /* --- 35-6. 長文リードの中央寄せ＋PC用改行で行が不揃いになる --- */
  .section .container > p[style*="text-align:center"] { text-align: left !important; }
  .section .container > p[style*="text-align:center"] br { display: none; }
  .pos-body br, .svc-detail__lead br { display: none; }

  /* --- 35-7. 会社概要の役員カード: アバターに押され本文が1文字残りになる --- */
  .exec-card { grid-template-columns: 60px 1fr; gap: 14px; padding: 20px; }
  .exec-card__avatar { width: 60px; height: 74px; }
  .exec-card__name { font-size: 22px; }
  .exec-card__text { line-height: 1.85; }

  /* --- 35-8. 縦の詰め: 図解が1カラムに積み上がりページが極端に長くなる
         (事業内容ページ 実測 25,233px → 圧縮) --- */
  .why-grid, .fx-grid, .ba-grid, .radial, .step4, .flow5 { margin-top: 26px; gap: 12px; }
  .why-col { padding: 20px 16px; }
  .why-item { min-height: 0; padding: 12px 14px; }
  .fx-card { padding: 20px 18px 18px; }
  .flow5 li { padding: 20px 18px 18px; }
  .radial__card { padding: 14px 16px; }
  .svc2-grid { gap: 14px; }
  .svc2__body { padding: 20px 20px 18px; }
  .pattern__grid { gap: 12px; }
  .mkt2 { padding: 22px 18px; }
  .mkt2__icons svg { width: 26px; height: 26px; }

  /* --- 35-9. タップ領域: フッターのリンクが高さ18-21pxで押しにくい --- */
  .footer-nav a, .footer-top a:not(.footer-logo), .back-top { display: inline-block; padding-block: 10px; }
}

/* ============================================================
   35. v17: 納品ロゴ反映(2026-08-09・260809納品データ)
   ============================================================ */
.site-header__logo { display: flex; align-items: center; }
.site-header__logo .logo-img { height: 30px; width: auto; display: block; }
.site-header__logo .logo-img--white { display: none; }
.p-home .site-header:not(.is-scrolled) .logo-img--color { display: none; }
.p-home .site-header:not(.is-scrolled) .logo-img--white { display: block; }
.footer-logo .logo-img { height: 32px; width: auto; display: block; }
@media (max-width: 767px) { .site-header__logo .logo-img { height: 24px; } }

/* ============================================================
   36. v18: 証拠と導線(数字帯/WHY US/FLOW/CTA二段/演出)
   ============================================================ */
/* --- WHY US --- */
.why-sec { background: #f6f9fc; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); margin-top: 34px; }
.why-card { position: relative; background: #ffffff; border: 1px solid #e2e9f2; border-radius: 12px;
  padding: 30px 26px 26px; box-shadow: 0 10px 30px rgba(18, 44, 84, 0.05); }
.why-card__no { font-family: var(--font-en); font-weight: 800; font-size: 15px; color: var(--color-accent); letter-spacing: 0.08em; }
.why-card__ttl { margin-top: 10px; font-size: clamp(17px, 1.9vw, 21px); font-weight: 900; line-height: 1.5; }
.why-card__txt { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--color-muted); }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

/* --- FLOW(3ステップ) --- */
.flow3 { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); counter-reset: none; }
.flow3 li { position: relative; background: #ffffff; border: 1px solid #e2e9f2; border-radius: 12px; padding: 26px 24px 22px; }
.flow3 li::after { content: "→"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%);
  color: var(--color-accent); font-weight: 900; font-size: 18px; z-index: 1; }
.flow3 li:last-child::after { content: none; }
.flow3__no { font-family: var(--font-en); font-weight: 800; font-size: 14px; color: var(--color-accent); letter-spacing: 0.08em; }
.flow3__ttl { margin-top: 8px; font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; }
.flow3__ttl em { font-style: normal; margin-left: 10px; font-size: 0.68em; font-weight: 700; color: var(--color-accent);
  background: #eaf1fd; border-radius: 999px; padding: 3px 10px; vertical-align: 2px; }
.flow3__txt { margin-top: 10px; font-size: 13.5px; line-height: 1.95; color: var(--color-muted); }
@media (max-width: 860px) {
  .flow3 { grid-template-columns: 1fr; }
  .flow3 li::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%); }
}

/* --- CONTACT帯: 主CTAを塗りに --- */
.contact-band__btn--main { background: #ffffff; color: #16264a !important; border-color: #ffffff; }
.contact-band__btn--main:hover { background: rgba(255, 255, 255, 0.88); }

/* --- ヒーローKen Burns(静止画に生命感・GPUのみ) --- */
.hero-kv { overflow: hidden; background: #0a1428; }
.hero-kv::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/kv_dubai_v6.jpg") center 30% / cover no-repeat;
  transform-origin: 62% 38%; animation: kvZoom 28s ease-in-out infinite alternate; }
@media (max-width: 767px) { .hero-kv::before { background-image: url("/assets/img/kv_dubai_v6_mb.jpg"); } }
@keyframes kvZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
html.is-motion-off .hero-kv::before { animation: none; }

/* --- POSITIONING図解の順次点灯(学ぶ→実装→経営を目で追わせる) --- */
.pos-strip .mkt2, .pos-strip .mkt2-arw { opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.pos-strip.is-inview > *:nth-child(1) { transition-delay: 0s; }
.pos-strip.is-inview > *:nth-child(2) { transition-delay: 0.14s; }
.pos-strip.is-inview > *:nth-child(3) { transition-delay: 0.28s; }
.pos-strip.is-inview > *:nth-child(4) { transition-delay: 0.42s; }
.pos-strip.is-inview > *:nth-child(5) { transition-delay: 0.56s; }
.pos-strip.is-inview .mkt2, .pos-strip.is-inview .mkt2-arw { opacity: 1; transform: none; }
.pos-strip.is-inview .mkt2--main .mkt2__badge { animation: badgePop 0.4s 0.75s var(--ease-out) backwards; }
@keyframes badgePop { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
html.is-motion-off .pos-strip .mkt2, html.is-motion-off .pos-strip .mkt2-arw { opacity: 1; transform: none; transition: none; }
html.is-motion-off .pos-strip .mkt2__badge { animation: none; }

/* --- ウォーターマークの超低速ドリフト --- */
.watermark { animation: wmDrift 44s ease-in-out infinite alternate; }
@keyframes wmDrift { from { transform: translateX(0); } to { transform: translateX(-3.5%); } }
html.is-motion-off .watermark { animation: none; }

/* ============================================================
   37. v18.2: KVカードの脱Wiz(2026-08-10 なおむ指示)
   角丸を大きく+ロゴ配色(紺×オレンジ)へ。青→水色→ティールの
   3色進行はWizと同一のため全廃(v9忠実化レイヤーの上書き)
   ============================================================ */
.kv-card { border-radius: 24px; }
.kv-card--g1 { background: linear-gradient(130deg, #12294f, #1e4083); }
.kv-card--g2 { background: linear-gradient(130deg, #1d49b8, #2c63eb); }
.kv-card--g3 { background: linear-gradient(130deg, #c24a1e, #e0702f); }
.banner-card, .contact-band__btn { border-radius: 18px; }

/* --- 37-2. WHY US訴求強化(金額は出さない方針・2026-08-10) --- */
.why-card { border-top: 3px solid #e0702f; border-radius: 0 0 12px 12px; }
.why-card__no { color: #c24a1e; }
.why-card__ttl { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.55; }
.why-card__txt { font-size: 14.5px; }

/* --- 37-3. v19 FLOW: 道メタファー図解(スクロールで道が引かれる) --- */
.fpath { position: relative; margin-top: 30px; }
.fpath__road { display: block; width: 100%; height: clamp(90px, 11vw, 150px); overflow: visible; }
.fpath__bg { fill: none; stroke: #dbe4f0; stroke-width: 3; stroke-dasharray: 1 8; stroke-linecap: round; }
.fpath__line { fill: none; stroke: #e0702f; stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.fpath__dot circle { fill: #16264a; }
.fpath__dot .fpath__halo { fill: rgba(224, 112, 47, 0.16); }
.fpath__dot { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
html.is-motion-off .fpath__line { stroke-dashoffset: 0; transition: none; }
html.is-motion-off .fpath__dot { opacity: 1; transform: none; transition: none; }
.fpath__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: 6px; }
.fpath-card { background: #ffffff; border: 1px solid #e2e9f2; border-radius: 12px; padding: 24px 22px 20px;
  box-shadow: 0 10px 30px rgba(18, 44, 84, 0.05); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.fpath-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(18, 44, 84, 0.1); }
.fpath-card__no { font-family: var(--font-en); font-weight: 800; font-size: 14px; color: #c24a1e; letter-spacing: 0.08em; }
.fpath-card__ttl { margin-top: 8px; font-size: clamp(16px, 1.8vw, 19px); font-weight: 900; }
.fpath-card__ttl em { font-style: normal; margin-left: 10px; font-size: 0.66em; font-weight: 700; color: #c24a1e;
  background: #fbeee4; border-radius: 999px; padding: 3px 10px; vertical-align: 2px; white-space: nowrap; }
.fpath-card__txt { margin-top: 10px; font-size: 13.5px; line-height: 1.95; color: var(--color-muted); }
.fpath__note { margin-top: 26px; text-align: center; font-size: clamp(14px, 1.6vw, 16.5px); line-height: 1.9; }
.fpath__note b { font-weight: 900; }
@media (max-width: 860px) {
  .fpath__road { display: none; }
  .fpath__cards { grid-template-columns: 1fr; }
  .fpath-card { border-left: 3px solid #e0702f; border-radius: 0 12px 12px 0; }
}

/* --- 37-4. FLOW: 矢印とSTEP明示(2026-08-10) --- */
.fpath-card { position: relative; }
.fpath-card:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: 50%;
  transform: translateY(-50%); color: #e0702f; font-weight: 900; font-size: 20px; z-index: 1; }
@media (max-width: 860px) {
  .fpath-card:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px;
    transform: translateX(-50%); }
  .fpath__cards { row-gap: 26px; }
}

/* --- 37-5. v19.3 FLOW: 矢印が巡回し、着いたステップが点灯する逐次演出 --- */
.fpath__cursor polygon { fill: #e0702f; }
.fpath__cursor { transition: opacity 0.3s var(--ease-out); }
.fpath__dot.is-on { opacity: 1; transform: none; }
.fpath .fpath-card { opacity: 0.25; transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.fpath .fpath-card.is-on { opacity: 1; transform: none; animation: fpCardPop 0.5s var(--ease-out); }
@keyframes fpCardPop { 0% { transform: translateY(10px) scale(0.98); } 60% { transform: translateY(-4px) scale(1.015); } 100% { transform: none; } }
.fpath.is-done .fpath__dot, html.is-motion-off .fpath .fpath__dot { opacity: 1; transform: none; }
.fpath.is-done .fpath-card, html.is-motion-off .fpath .fpath-card { opacity: 1; transform: none; animation: none; }
.fpath.is-done .fpath__cursor, html.is-motion-off .fpath .fpath__cursor { opacity: 1 !important; }
html.is-motion-off .fpath .fpath__line { stroke-dashoffset: 0; }

/* --- 37-6. v19.5 FLOW: 5ステップ化(serviceページの段取りに統一) --- */
.fpath__cards { grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.fpath-card { padding: 18px 16px 16px; }
.fpath-card__no { font-size: 12px; }
.fpath-card__ttl { font-size: clamp(15px, 1.5vw, 18px); }
.fpath-card__txt { font-size: 12.5px; line-height: 1.85; }
.fpath-card:not(:last-child)::after { right: -16px; font-size: 16px; }
@media (max-width: 1024px) and (min-width: 861px) {
  .fpath__cards { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .fpath-card__txt { font-size: 11.5px; }
}
@media (max-width: 860px) { .fpath__cards { grid-template-columns: 1fr; } }