/* ============================================================
   エース株式会社 コーポレートサイト 共通スタイル
   カラー原則: ネイビー1色＋無彩色。アンバーは警告表示のみ
   ============================================================ */

:root {
  /* ACE Navy 正式カラー（ロゴパッケージ README より） */
  --navy: #01226A;
  --navy-hover: #0B357F;
  --ink: #222B3D;
  --muted: #5F6983;
  --bg: #FFFFFF;
  --gray: #F2F4F8;
  --line: #DFE4ED;
  --amber: #A97B22; /* 「要精密検査」等の警告表示のみに使用 */
  --blue: #2F6FE0; /* ヘッダーの現在ページ・オンマウスのみに使用 */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Montserrat", "Noto Sans JP", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font-jp);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.95;
  font-size: 16px;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  height: 72px; display: flex; align-items: center; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .brand-symbol { height: 54px; width: auto; }
.brand .brand-wordmark { height: 20px; width: auto; }
.global-nav { margin-left: auto; }
.global-nav ul { display: flex; gap: 28px; list-style: none; align-items: center; }
.global-nav a { font-size: 14px; font-weight: 500; color: var(--ink); transition: color 0.2s; }
.global-nav a:not(.btn):hover { color: var(--blue); }
.global-nav a.btn { color: #fff; }
.global-nav a.btn:hover { color: #fff; }

.btn {
  display: inline-block; background: var(--navy); color: #fff;
  font-weight: 600; text-align: center;
  padding: 16px 40px; border: 1px solid var(--navy); border-radius: 2px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s; cursor: pointer; font-size: 16px;
  font-family: var(--font-jp); letter-spacing: 0.05em;
}
.btn:hover { background: var(--navy-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(1, 34, 106, 0.28); }
.btn.small:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(1, 34, 106, 0.25); }
.btn.small { padding: 10px 22px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--gray); }
.btn-pair { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn-pair .btn { min-width: 220px; }
.btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); box-shadow: none; }
.btn.ghost-light:hover { background: rgba(255,255,255,0.1); }
.hero .btn.ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); box-shadow: none; }
.hero .btn.ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.global-nav a.current { color: var(--blue); font-weight: 600; }
.global-nav a.btn:hover { background: var(--navy-hover); }

/* サービスの下に開くメニュー（4サービスを2×2のパネルで） */
.global-nav .has-sub { position: relative; padding: 26px 0; }
.global-nav .has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.25s; }
.global-nav .has-sub:hover > a::after, .global-nav .has-sub:focus-within > a::after { transform: translateY(3px) rotate(225deg); }
.global-nav .sub-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: absolute; top: 100%; left: 50%; width: 600px; padding: 10px; background: #fff; border-top: 2px solid var(--navy); border-radius: 0 0 4px 4px; box-shadow: 0 24px 48px rgba(1, 21, 64, 0.16); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; z-index: 130; }
.global-nav .has-sub:hover .sub-nav, .global-nav .has-sub:focus-within .sub-nav { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.global-nav .has-sub.sub-closed .sub-nav { opacity: 0; visibility: hidden; transform: translate(-50%, 10px); }
.global-nav .sub-nav a { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 18px 40px 18px 20px; border-radius: 2px; transition: background 0.2s; }
.global-nav .sub-nav a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--navy); border-right: 1.5px solid var(--navy); transform: translate(-6px, -50%) rotate(45deg); opacity: 0; transition: transform 0.2s, opacity 0.2s; }
.global-nav .sub-nav a:hover { background: var(--gray); }
.global-nav .sub-nav a:hover::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.global-nav .sub-nav .sn-en { font-family: var(--font-en); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.global-nav .sub-nav strong { font-size: 15.5px; font-weight: 700; color: var(--navy); letter-spacing: 0.04em; }
.global-nav .sub-nav .sn-desc { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.global-nav .sub-nav a.current strong { color: var(--blue); }
.global-nav .sub-nav.narrow { grid-template-columns: 1fr; width: 300px; }

.nav-toggle { display: none; }

/* ---------- セクション共通 ---------- */
main { padding-top: 72px; }
.section { padding: 104px 0; }
.section.gray { background: var(--gray); }
.section.navy { background: var(--navy); color: #fff; }
.section.navy a { color: #fff; }

.sec-label {
  font-family: var(--font-en); font-weight: 600; font-size: 12px;
  letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase;
  margin-bottom: 16px;
}
.section.navy .sec-label { color: rgba(255, 255, 255, 0.55); }

.sec-title {
  font-size: 34px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--navy); margin-bottom: 40px;
  text-wrap: balance; /* 行末に1〜2文字だけ残る折返しを防ぐ（対応ブラウザのみ） */
}
/* 見出しは単語の途中で折らない（改行機会は読点と <wbr> のみ。収まらない場合だけ任意位置で折る） */
.hero-copy, .sec-title { word-break: keep-all; overflow-wrap: break-word; }
.section.navy .sec-title { color: #fff; }

.lead { font-size: 16px; max-width: 760px; }
.lead + .lead { margin-top: 1.2em; }

/* ---------- ファーストビュー（ネイビー反転） ---------- */
.hero {
  padding: 120px 0 96px; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 620px at 76% 30%, rgba(64, 100, 172, 0.5), rgba(64, 100, 172, 0) 62%),
    linear-gradient(148deg, #032161 0%, #01226A 48%, #011540 100%);
}
.hero-inner { display: flex; align-items: center; gap: 56px; position: relative; max-width: none; padding-left: max(24px, calc((100% - 1080px) / 2 + 24px)); padding-right: max(24px, calc((100% - 1260px) / 2 + 24px)); }
.hero-text { flex: 1 1 auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85); margin-bottom: 20px;
}
.hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(255, 255, 255, 0.55); }
.hero-copy {
  font-size: clamp(31px, 3.8vw, 48px); font-weight: 700; line-height: 1.4;
  letter-spacing: 0.05em; color: #fff; margin-bottom: 24px;
}
.hero-sub { font-size: 17px; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; max-width: 560px; }
.hero .btn {
  background: #fff; color: var(--navy); border-color: #fff;
  box-shadow: 0 14px 34px rgba(0, 9, 34, 0.35);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.hero .btn:hover {
  background: #EDF1F8; transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 9, 34, 0.45);
}
.cta-note { font-size: 13.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.88); margin-top: 14px; }
.hero-visual { flex: 0 0 clamp(460px, 40vw, 560px); display: flex; justify-content: center; }
.hero-visual img { width: 260px; opacity: 0.96; }

/* ブラウザウィンドウ風モック（診断結果画面） */
.browser-mock {
  width: 100%; max-width: 640px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 36px 90px rgba(0, 9, 34, 0.5); overflow: hidden;
  animation: heroCardIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both, heroFloat 10s 1.2s ease-in-out infinite;
  will-change: transform;
}
/* レーダーチャートの実データが後から描画される演出 */
.browser-mock .radar-data {
  transform-origin: 850px 360px; transform-box: view-box;
  animation: radarIn 1.1s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes radarIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* キービジュアル背景（同心円＋周回するアクセント円弧） */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .arc-svg { position: absolute; top: -300px; right: -260px; width: 860px; height: 860px; }
/* ネイビー背景用：SVG属性の色をCSSで白系に上書き */
.hero-bg circle { stroke: rgba(255, 255, 255, 0.10); }
.hero-bg .arc-accent { stroke: rgba(255, 255, 255, 0.55); }
.hero-bg .ping { stroke: #fff; }
/* アクセント円弧が同心円上を周回し、ソナーの発信がゆっくり広がる */
.hero-bg .orbit { transform-origin: 430px 430px; transform-box: view-box; animation: arcOrbit 30s linear infinite; }
.hero-bg .orbit.rev { animation: arcOrbitRev 48s linear infinite; }
.hero-bg .ping {
  transform-origin: 430px 430px; transform-box: view-box;
  opacity: 0; animation: arcPing 42s cubic-bezier(0.2, 0.55, 0.4, 1) infinite;
}
/* 発生間隔≒波紋が最初の同心円に到達する時間（約6秒） */
.hero-bg .ping.p2 { animation-delay: 6s; }
.hero-bg .ping.p3 { animation-delay: 12s; }
.hero-bg .ping.p4 { animation-delay: 18s; }
.hero-bg .ping.p5 { animation-delay: 24s; }
.hero-bg .ping.p6 { animation-delay: 30s; }
.hero-bg .ping.p7 { animation-delay: 36s; }
@keyframes arcOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes arcOrbitRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* 波紋：1波・2波・3波が短い間隔で連続発生し、一緒に広がりながら薄くなっていく */
@keyframes arcPing {
  0% { transform: scale(0.15); opacity: 0; stroke-width: 2.6; }
  6% { opacity: 0.35; }
  100% { transform: scale(2.4); opacity: 0; stroke-width: 0.5; }
}

/* スコアカード（キービジュアル） */
@keyframes heroCardIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* 代表プロフィールのSNSリンク */
.sns-links { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; align-items: center; }
.sns-links .sns-pill {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px;
  width: 210px; font-size: 13px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 16px;
  transition: border-color 0.2s, color 0.2s;
}
.sns-links .sns-pill:hover { border-color: var(--navy); color: var(--navy); }
.sns-links .sns-pill svg { flex-shrink: 0; width: 15px; height: 15px; }

/* ---------- 3点差別化カード ---------- */
.point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.point-grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.point-card { background: #fff; border: 1px solid var(--line); padding: 40px 32px; border-radius: 2px; }
.section.navy .point-card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.point-card .num {
  font-family: var(--font-en); font-weight: 600; font-size: 13px;
  letter-spacing: 0.2em; color: var(--muted); display: block; margin-bottom: 14px;
}
.section.navy .point-card .num { color: rgba(255, 255, 255, 0.55); }
.point-card h3 { font-size: 21px; color: var(--navy); margin-bottom: 14px; line-height: 1.5; }
.section.navy .point-card h3 { color: #fff; }
.point-card p { font-size: 14.5px; line-height: 1.9; }

/* ---------- CTAブロック ---------- */
.cta-block { text-align: center; }
.section.navy .cta-block .btn { background: #fff; color: var(--navy); border-color: #fff; }
.section.navy .cta-block .btn:hover { background: var(--gray); }

/* ---------- PMVV ---------- */
.pmvv-list { list-style: none; max-width: 760px; margin: 0 auto; }
.pmvv-list li { display: flex; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.section.navy .pmvv-list li { border-color: rgba(255, 255, 255, 0.16); }
.pmvv-list .label {
  flex: 0 0 120px; font-family: var(--font-en); font-weight: 600;
  font-size: 13px; letter-spacing: 0.22em; color: var(--muted);
}
.section.navy .pmvv-list .label { color: rgba(255, 255, 255, 0.55); }
.pmvv-list .value { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.7; }
.section.navy .pmvv-list .value { color: #fff; }
.pmvv-list .desc { display: block; font-size: 14px; font-weight: 400; color: var(--ink); margin-top: 8px; }
.section.navy .pmvv-list .desc { color: rgba(255, 255, 255, 0.75); }

/* ---------- サービス ---------- */
.service-block { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 56px; margin-bottom: 36px; }
.service-block h4 { font-size: 16px; color: var(--navy); margin: 28px 0 10px; }
.service-block ul { padding-left: 1.4em; font-size: 15px; }
.service-block li { margin-bottom: 6px; }
.price-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.price-note a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 会社概要 ---------- */
.company-table { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 15px; }
.company-table th, .company-table td { border-bottom: 1px solid var(--line); padding: 18px 12px; text-align: left; vertical-align: top; }
.company-table th { width: 160px; font-weight: 600; color: var(--navy); white-space: nowrap; }

/* ---------- フォーム ---------- */
.form { max-width: 640px; }
.form .field { margin-bottom: 26px; }
.form label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; color: var(--navy); }
.form label .req { color: var(--amber); font-size: 12px; margin-left: 8px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea, .form select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-jp); font-size: 16px; background: #fff; color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
.form textarea { min-height: 160px; resize: vertical; }
.form .form-note { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.form label .opt { color: var(--muted); font-size: 12px; margin-left: 8px; font-weight: 500; }
.form .agree-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.form .agree-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; }
.form .agree-row label { margin: 0; font-weight: 500; font-size: 14px; color: var(--ink); }
.form .btn-center { display: block; margin: 0 auto; min-width: 260px; }

/* ---------- 診断ツール ---------- */
.shindan-app { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 56px; max-width: 860px; margin: 0 auto; }
.shindan-progress { height: 4px; background: var(--gray); border-radius: 2px; margin-bottom: 40px; overflow: hidden; }
.shindan-progress .bar { height: 100%; background: var(--navy); width: 0; transition: width 0.3s; }
.shindan-step-label { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 14px; text-transform: uppercase; }
.shindan-q { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.6; margin-bottom: 32px; }
.choice-list { list-style: none; display: grid; gap: 14px; }
.choice-list button {
  width: 100%; text-align: left; padding: 18px 24px; font-size: 16px;
  font-family: var(--font-jp); background: #fff; border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  line-height: 1.7; color: var(--ink);
}
/* モバイルでは1行の選択肢も2行の選択肢と同じ高さに揃え、文言を垂直中央に置く */
@media (max-width: 768px) {
  .choice-list button { display: flex; align-items: center; min-height: 92px; padding-top: 12px; padding-bottom: 12px; }
}
.choice-list button:hover { border-color: var(--navy); background: #F7F9FC; }
/* 代表の物語（about）：事実→学び→志の3楽章。強調は冒頭・核・結びの3箇所のみ */
.story-open { font-size: 20px; font-weight: 700; line-height: 1.7; color: var(--navy); letter-spacing: 0.03em; margin-bottom: 20px; }
.story-part { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.story-key { font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.6; margin-bottom: 14px; }
.story-close { font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.5; letter-spacing: 0.03em; margin-top: 28px; }
@media (max-width: 480px) { .story-open { font-size: 18px; } .story-close { font-size: 21px; } .story-open br { display: none; }
}

/* 財務入力の折りたたみ（細かい項目は初見の負荷が高いため隠す） */
.fin-more { margin: 2px 0 16px; }
.fin-more summary { font-size: 13px; color: var(--navy); cursor: pointer; padding: 6px 0; }
.fin-more summary:hover { text-decoration: underline; }
.fin-more[open] { padding-top: 8px; }

/* タップした選択肢のハイライト（押下フィードバック。160ms表示して次の設問へ） */
.choice-list button.sel { border-color: var(--navy); background: var(--navy); color: #fff; }
.shindan-back { margin-top: 28px; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; font-family: var(--font-jp); }
.shindan-back:hover { color: var(--navy); text-decoration: underline; }
.dummy-notice { font-size: 12px; color: var(--amber); margin-top: 24px; }

/* 診断結果 */
.result-score { text-align: center; margin-bottom: 40px; }
.result-score .score-num { font-family: var(--font-en); font-size: 72px; font-weight: 600; color: var(--navy); line-height: 1; }
.result-score .score-max { font-size: 20px; color: var(--muted); }
.result-chart { display: flex; justify-content: center; margin: 32px 0; }
/* ---------- 診断結果画面 v2（2026-08-19） ---------- */
.type-share { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.type-share .ts-label { font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.ts-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); padding: 0; }
.ts-btn:hover { background: var(--gray); }
.ts-btn svg { width: 16px; height: 16px; fill: currentColor; }
/* 結果カード画像（シェア画像そのものを結果画面の先頭に表示する） */
.result-hero { max-width: 640px; margin: 0 auto; }
.result-hero img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(1, 34, 106, 0.10); }
.result-share { max-width: 640px; margin: 16px auto 0; padding-top: 0; border-top: none; }
.type-desc-line { max-width: 640px; margin: 28px auto 0; font-size: 13.5px; line-height: 1.9; }
.result-overview { margin-top: 36px; }
/* 推定企業価値パネル（結果画面。トップのモックと同じ灰色パネルUI） */
.val-panel { max-width: 560px; margin: 30px auto 0; background: var(--gray); border-radius: 2px; padding: 24px 26px; text-align: left; }
.val-panel .vp-label { font-size: 12px; letter-spacing: 0.12em; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.val-panel .vp-value { font-size: 30px; font-weight: 700; color: var(--navy); margin: 2px 0 4px; white-space: nowrap; }
@media (max-width: 480px) { .val-panel .vp-value { font-size: 24px; }
}
.val-panel .vp-intro { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.val-panel .vp-desc { font-size: 13px; color: var(--ink); line-height: 1.7; margin-top: 8px; }
.val-panel .vp-edit { font-size: 11.5px; color: var(--muted); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-jp); }
.result-bridge { max-width: 560px; margin: 40px auto 6px; font-size: 16px; font-weight: 700; color: var(--navy); text-align: center; }
.val-panel .other-input { background: #fff; }
.other-input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-jp); font-size: 16px; background: #fff; color: var(--ink);
}
.other-input:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
/* 財務入力欄（ラベル＋常時表示の万円単位＋読み替え表示） */
.fin-field { margin-bottom: 10px; }
.fin-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.fin-wrap { position: relative; }
.fin-wrap .other-input { padding-right: 58px; }
.fin-unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.fin-read { font-size: 11.5px; color: var(--muted); margin-top: 3px; min-height: 14px; text-align: right; }
.shindan-app .note { font-size: 11.5px; color: var(--muted); line-height: 1.8; }
/* 「その他」選択時にその枠内で入力欄＋開始ボタンを横並び表示する
   （.choice-list button の白い選択肢スタイルより優先させるため子孫セレクタで上書き） */
/* 次のランクまでの残り点数（結果カード直下の一行） */
.rank-gap { text-align: center; font-size: 14px; color: var(--muted); margin: 14px 0 2px; }
.rank-gap span { font-family: var(--font-en); font-size: 19px; font-weight: 600; color: var(--navy); padding: 0 2px; }

.result-rank { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.result-rank .grade {
  font-family: var(--font-en); font-weight: 600; font-size: 26px; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 2px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.result-rank .comment { font-size: 14.5px; font-weight: 700; color: var(--navy); }
.result-overview { display: flex; gap: 36px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.result-overview .result-chart { margin: 0; }
.cat-score-list { list-style: none; padding: 0; margin: 0; flex: 0 1 320px; min-width: 270px; }
.cat-score-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cat-score-list .csl-label { font-weight: 700; color: var(--navy); flex: 0 0 3em; }
.cat-score-list .csl-num { margin-left: auto; font-family: var(--font-en); font-weight: 600; }
.cat-score-list .csl-max { font-size: 11px; color: var(--muted); }
.cat-badge { font-size: 11.5px; font-weight: 700; border-radius: 2px; padding: 3px 8px; flex-shrink: 0; }
.cat-badge.ok { color: #1F7A4D; background: #E8F4ED; }
.cat-badge.warn { color: #9A6700; background: #FBF0DC; }
.cat-badge.bad { color: #B4232A; background: #FBE7E8; }
.result-col { background: var(--gray); border-radius: 2px; padding: 24px 26px; }
.result-col h4 { font-size: 15px; margin-bottom: 12px; }
.result-col.good h4 { color: #1F7A4D; }
.result-col ul { list-style: none; padding: 0; margin: 0; }
.result-col li { font-size: 13.5px; line-height: 1.8; padding-left: 1.1em; position: relative; margin-bottom: 8px; }
.result-col li::before { content: "・"; position: absolute; left: 0; }
.result-col.single { max-width: 760px; margin: 0 auto 32px; }
/* 8つの経営タイプ（診断LP） */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.type-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 26px 18px 22px; text-align: center; }
.type-card svg { width: 64px; height: 64px; margin-bottom: 14px; }
.type-card h3 { font-size: 16.5px; color: var(--navy); margin-bottom: 8px; line-height: 1.5; }
.type-card .tc-axes { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 10px; }
.type-card p { font-size: 12.5px; line-height: 1.8; text-align: left; }
@media (max-width: 900px) { .type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .type-grid { grid-template-columns: 1fr; gap: 10px; } .type-card { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 16px 16px 14px; } .type-card svg { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; } .type-card h3 { font-size: 16px; margin-bottom: 2px; } .type-card .tc-axes { font-size: 12px; margin-bottom: 4px; } .type-card p { font-size: 13px; line-height: 1.7; }
}
.advice-block { max-width: 760px; margin: 0 auto 8px; }
.advice-block h4 { font-size: 15px; color: var(--navy); margin-bottom: 12px; }
.advice-card { border: 1px solid var(--line); border-radius: 2px; padding: 18px 20px; margin-bottom: 12px; background: #fff; }
.advice-card p { font-size: 14px; margin-top: 8px; }
.report-teaser { max-width: 640px; margin: 0 auto 40px; border: 1.5px dashed var(--navy); border-radius: 2px; padding: 26px 28px; text-align: center; background: #fff; }
.report-teaser .rt-title { font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.report-teaser .rt-desc { font-size: 13.5px; text-align: left; margin-bottom: 16px; }
.btn.outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn.outline:hover { background: var(--gray); color: var(--navy); }

.result-rx { text-align: center; margin: 40px 0; padding: 36px; background: var(--gray); border-radius: 2px; }
.result-rx .rx-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.result-rx .rx-name { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.result-rx .rx-desc { font-size: 14.5px; max-width: 520px; margin: 0 auto; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 22px 8px; font-weight: 600; font-size: 16px; color: var(--navy); cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.faq-list summary::after { content: "+"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-en); font-size: 20px; color: var(--muted); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list .faq-a { padding: 0 8px 24px; font-size: 15px; }

/* ---------- 経年グラフ等 ---------- */
.figure-box { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 40px; max-width: 640px; margin: 0 auto; }
.figure-caption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
/* 成長ステージ図（5段階のカード列：段階 → 危機 → 人数と成長のキーワード） */
.growth-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 22px; max-width: 1000px; margin: 0 auto; }
.gs { position: relative; text-align: center; }
.gs .gs-stage { display: block; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; padding: 10px 6px; border-radius: 2px 2px 0 0; }
.gs .gs-crisis { display: flex; align-items: center; justify-content: center; min-height: 44px; background: #E7ECF4; color: var(--navy); font-size: 13px; font-weight: 600; padding: 6px; }
.gs .gs-body { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 2px 2px; padding: 26px 8px 28px; }
.gs .gs-size { display: block; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.gs .gs-key { display: block; font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.4; margin: 6px 0 4px; }
.gs .gs-by { display: block; font-size: 13px; color: var(--ink); }
/* 列間の矢印（段階バンドの高さに置く） */
.gs + .gs::before { content: ""; position: absolute; left: -16px; top: 15px; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
@media (max-width: 900px) {
  .growth-grid { gap: 0 14px; }
  .gs .gs-stage, .gs .gs-crisis { font-size: 12px; }
  .gs .gs-key { font-size: 20px; }
  .gs + .gs::before { left: -12px; width: 7px; height: 7px; }
}
@media (max-width: 768px) {
  .growth-grid { grid-template-columns: 1fr; gap: 12px; }
  .gs { display: grid; grid-template-columns: 144px 1fr; text-align: left; }
  .gs .gs-stage { padding: 10px 12px; border-radius: 2px 0 0 0; }
  .gs .gs-crisis { justify-content: flex-start; padding: 8px 12px; min-height: 0; border-radius: 0 0 0 2px; font-size: 12px; white-space: nowrap; }
  .gs .gs-body { grid-column: 2; grid-row: 1 / span 2; border-top: 1px solid var(--line); border-left: 0; border-radius: 0 2px 2px 0; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .gs .gs-key { font-size: 19px; margin: 0; }
  .gs .gs-size { order: 3; width: 100%; font-size: 12.5px; }
  .gs + .gs::before { display: none; }
  .figure-caption { text-align: left; margin-top: 20px; }
}

/* ---------- フッター ---------- */
.site-footer { background: var(--navy); color: #fff; padding: 72px 0 40px; }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.footer-company { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.65); line-height: 2; }
.copyright { text-align: center; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.4); margin-top: 40px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .point-grid, .point-grid.cols2 { grid-template-columns: 1fr; }
  .hero-inner { flex-direction: column; align-items: flex-start; text-align: left; gap: 56px; }
  .hero-visual { align-self: center; }
  .hero-visual { flex-basis: auto; }
  .hero-visual img { width: 180px; }
  .hero-bg .arc-svg { top: -220px; right: -240px; width: 600px; height: 600px; }
  .hero-bg .arc-accent { display: none; }
  .hero-visual { flex-basis: auto; width: 100%; }
  .browser-mock { width: 100%; max-width: 440px; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  .section { padding: 72px 0; }
  .sec-title { font-size: 24px; letter-spacing: 0.03em; }
  .hero-copy { font-size: 26px !important; letter-spacing: 0.03em; }
  /* PC用の強制改行はモバイルでは解除し、自然な折返しに任せる */
  .sec-title br, .hero-copy br, .hero-sub br, .philosophy br, .lead br, .vp-desc br, .cb-desc br, .pmvv-list .desc br { display: none; }
  .lead { text-wrap: pretty; }
  .hero-copy, .philosophy { text-wrap: balance; }
  /* PMVVも料金表と同じ「帯ラベル＋内容」の縦積みに */
  .pmvv-list li { display: block; padding: 0 0 24px; margin-bottom: 24px; }
  .pmvv-list .label {
    display: block; background: #E7ECF4; color: var(--navy);
    padding: 8px 14px; margin-bottom: 14px; border-radius: 2px; line-height: 1.6;
  }
  .hero { padding: 52px 0 64px; }
  .service-block { padding: 32px 24px; }
  .shindan-app { padding: 32px 20px; }
  .company-table th { width: 110px; }

  /* backdrop-filter があると fixed のメニューがヘッダー基準になるため、モバイルでは無効化 */
  .site-header { backdrop-filter: none; background: #fff; }

  .nav-toggle {
    display: block; margin-left: auto; background: none; border: none;
    width: 44px; height: 44px; cursor: pointer; position: relative; z-index: 120;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; background: var(--navy);
    margin: 6px auto; transition: transform 0.25s, opacity 0.25s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .global-nav {
    position: fixed; inset: 0; background: #fff; padding: 110px 32px 40px;
    transform: translateX(100%); transition: transform 0.28s; margin-left: 0;
  }
  .global-nav.open { transform: translateX(0); }
  .global-nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .global-nav li { width: 100%; border-bottom: 1px solid var(--line); }
  .global-nav a { display: block; padding: 16px 4px; font-size: 16px; }
  .global-nav li.nav-cta { border-bottom: none; margin-top: 24px; }
  .global-nav .has-sub { padding: 0; }
  .global-nav .has-sub > a::after { display: none; }
  .global-nav .sub-nav { display: block; position: static; width: auto; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 10px 16px; }
  .global-nav .has-sub:hover .sub-nav, .global-nav .has-sub:focus-within .sub-nav, .global-nav .has-sub.sub-closed .sub-nav { opacity: 1; visibility: visible; transform: none; }
  .global-nav .sub-nav a:hover { background: none; }
  .global-nav .sub-nav.narrow { width: auto; }
  .global-nav .sub-nav li { border-bottom: none; }
  .global-nav .sub-nav a { padding: 9px 4px; gap: 0; }
  .global-nav .sub-nav a::after, .global-nav .sub-nav .sn-en, .global-nav .sub-nav .sn-desc { display: none; }
  .global-nav .sub-nav strong { font-size: 14.5px; font-weight: 500; color: var(--muted); }
  .global-nav li.nav-cta .btn { width: 100%; }
}

/* ---------- 事業モデル（経営人材ファンド） ---------- */
.model-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 40px 0 0; padding: 0; }
.model-steps.cols4 { grid-template-columns: repeat(4, 1fr); }
.model-steps.cols5 { grid-template-columns: repeat(5, 1fr); }
.model-steps.cols3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .model-steps, .model-steps.cols4, .model-steps.cols5, .model-steps.cols3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .model-steps, .model-steps.cols4, .model-steps.cols5, .model-steps.cols3 { grid-template-columns: 1fr; }
}
.model-steps li { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 22px 18px 20px; }
.model-steps .ms-num { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; color: var(--muted); display: block; }
.model-steps .ms-en { font-family: var(--font-en); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; display: block; margin-top: 2px; }
.model-steps strong { display: block; font-size: 18px; color: var(--navy); margin: 12px 0 6px; line-height: 1.4; }
.model-steps p { font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.model-note { margin-top: 18px; font-size: 13px; color: var(--muted); }
/* ファンドとの違い: 料金表(.plan-table)と同じ罫線の表。全幅で表のまま・中央ぞろえ */
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; margin-top: 44px; table-layout: fixed; word-break: keep-all; overflow-wrap: anywhere; }
.compare-table th, .compare-table td { border: 1px solid var(--line); padding: 16px 14px; text-align: center; vertical-align: middle; }
.compare-table thead th { background: #E7ECF4; color: var(--navy); font-weight: 600; font-size: 14.5px; }
.compare-table thead th:first-child { background: transparent; border-top-color: transparent; border-left-color: transparent; }
.compare-table thead th:last-child { background: var(--navy); color: #fff; }
.compare-table tbody th { background: #E7ECF4; color: var(--navy); font-weight: 600; }
.compare-table td.ace { color: var(--navy); font-weight: 600; }
.compare-table td.ace span { display: block; margin-top: 4px; }
@media (max-width: 900px) { .model-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .model-steps { grid-template-columns: 1fr; gap: 10px; }
  .model-steps li { padding: 16px 16px 14px; }
  .model-steps strong { margin: 8px 0 4px; font-size: 17px; }
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 12px 6px; }
  .compare-table thead th { font-size: 12.5px; }
  .compare-table col:first-child { width: 72px !important; }
  .compare-table td.ace span { font-size: 11.5px !important; }
}

/* ---------- アクセス（地図） ---------- */
.access { max-width: 760px; }
.map-wrap { border: 1px solid var(--line); border-radius: 2px; overflow: hidden; line-height: 0; }
.map-wrap iframe { filter: grayscale(1) contrast(1.04); }
.access-note { margin-top: 14px; font-size: 14px; color: var(--ink); }

/* ---------- チーム ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.member-card { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 28px 28px 30px; }
.member-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; margin-bottom: 20px; }
.member-role { font-size: 12.5px; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 4px; }
.member-name { font-size: 21px; color: var(--navy); margin-bottom: 12px; }
.member-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.member-tags span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--navy); background: var(--gray); border-radius: 20px; padding: 3px 11px; }
.member-bio { font-size: 14px; line-height: 1.9; color: var(--ink); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; }
}
.team-grid.single { grid-template-columns: 1fr; }
.member-card.feature { display: flex; gap: 40px; align-items: flex-start; padding: 36px; }
.member-card.feature .member-photo { flex: 0 0 240px; width: 240px; margin-bottom: 0; }
.member-card.feature .member-body { flex: 1 1 auto; min-width: 0; }
.member-card.feature .member-bio { font-size: 14.5px; max-width: 640px; }
.member-en { display: block; font-family: var(--font-en); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; color: var(--muted); margin-top: 4px; }
@media (max-width: 700px) { .member-card.feature { display: block; padding: 24px; } .member-card.feature .member-photo { width: 100%; margin-bottom: 20px; }
}

/* ---------- キャンペーンコード入力（入力欄＋ボタンを1行、狭幅では縦積み） ---------- */
.rt-code-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.rt-code-row .other-input { flex: 1 1 180px; max-width: 240px; }
.rt-code-row .btn { flex: 0 0 auto; padding: 13px 24px; font-size: 14px; }
@media (max-width: 480px) {
  .rt-code-row .other-input { flex: 1 1 100%; max-width: none; }
  .rt-code-row .btn { width: 100%; }
}

/* ---------- トップ: 4つの相談テーマ ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.theme-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 26px 24px 24px; color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
.theme-card:hover { border-color: var(--navy); transform: translateY(-2px); color: var(--ink); }
.theme-card strong { font-size: 20px; line-height: 1.4; color: var(--navy); }
.theme-card .svc { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.theme-card p { font-size: 13.5px; line-height: 1.7; margin-top: 6px; }
@media (max-width: 900px) { .theme-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .theme-grid { grid-template-columns: 1fr; gap: 10px; } .theme-card { padding: 20px 18px; }
}
/* 悩み6項目: PCは2列×3段 */
@media (min-width: 769px) { .symptom-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; } .symptom-list li { margin-bottom: 0; } }
/* .is-hidden はスマホの固定ボタンの節で、滑らかに隠す */
/* ---------- CV改善: モバイル固定CTA ---------- */
.sticky-cta { display: none; }
@media (max-width: 768px) {
  .sticky-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255,255,255,0.96); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { width: 100%; padding: 14px; font-size: 15.5px; }
  .sticky-cta .sticky-sub { font-size: 11.5px; color: var(--muted); text-decoration: none; }
  body.has-sticky-cta { padding-bottom: 96px; }
}

/* スマホの帯: 見出し → 説明 → レポートカード → ボタン の順に並べる */
@media (max-width: 900px) {
  .hero-inner { gap: 0; }
  .hero-text { display: contents; }
  .hero-eyebrow { order: 1; }
  .hero-copy { order: 2; }
  .hero-sub { order: 3; }
  .hero-visual { order: 4; margin: 0 0 30px; }
  .hero-text > .btn, .hero-text > .btn-pair { order: 5; }
  .hero-text > .cta-note { order: 6; }
  .hero .btn-pair { width: 100%; }
  .hero .btn-pair .btn { flex: 1 1 100%; }
}
.plan-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--navy); border-radius: 2px; padding: 2px 8px; }

/* ---------- 料金: 会員プラン × サービスの表 ---------- */
.plan-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 12px; font-size: 14px; line-height: 1.7; }
.plan-table th, .plan-table td { border: 1px solid var(--line); padding: 14px 16px; text-align: center; vertical-align: middle; }
.plan-table thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 14.5px; }
.plan-table thead th:first-child { background: transparent; border-top-color: transparent; border-left-color: transparent; width: 150px; }
.plan-table thead .plan-badge { margin-left: 8px; background: #fff; color: var(--navy); }
.plan-table tbody th { background: #E7ECF4; color: var(--navy); font-weight: 600; }
.plan-table tbody th a { color: var(--navy); border-bottom: 1px solid var(--navy); }
.plan-table .price-row td { font-size: 13px; color: var(--muted); }
.plan-table .price-row strong { font-size: 24px; color: var(--navy); margin-right: 2px; }
.plan-table td.none { color: var(--muted); }
.section.gray .plan-table td { background: #fff; }
/* スマホ: 料金表は表のまま横にスライドして見る（左の項目名は固定） */
.table-scroll-hint { display: none; }
@media (max-width: 760px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px -24px 0; padding: 0 24px 10px; scroll-snap-type: x proximity; }
  .table-scroll .plan-table { width: 760px; margin-top: 0; font-size: 13px; border-collapse: separate; border-spacing: 0; }
  .table-scroll .plan-table th, .table-scroll .plan-table td { padding: 12px 10px; border-width: 0 1px 1px 0; scroll-snap-align: start; }
  .table-scroll .plan-table thead th { border-top-width: 1px; }
  .table-scroll .plan-table th:first-child { position: sticky; left: 0; z-index: 2; width: 104px; border-left-width: 1px; box-shadow: 6px 0 10px -6px rgba(1, 21, 64, 0.18); }
  .table-scroll .plan-table thead th:first-child { background: var(--gray); border-color: transparent; box-shadow: none; }
  .table-scroll .plan-table .price-row strong { font-size: 20px; }
  .table-scroll-hint { display: block; margin-top: 14px; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
}
/* ---------- 下層ページの帯: トップと同じ円弧を静止で右上に ---------- */
.hero.arc::after { content: ""; position: absolute; top: -330px; right: -240px; width: 860px; height: 860px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 860 860%22 fill=%22none%22%3E%3Cg stroke=%22%23fff%22 stroke-width=%221%22%3E%3Ccircle cx=%22430%22 cy=%22430%22 r=%22150%22 stroke-opacity=%22.1%22/%3E%3Ccircle cx=%22430%22 cy=%22430%22 r=%22230%22 stroke-opacity=%22.1%22/%3E%3Ccircle cx=%22430%22 cy=%22430%22 r=%22310%22 stroke-opacity=%22.1%22/%3E%3Ccircle cx=%22430%22 cy=%22430%22 r=%22390%22 stroke-opacity=%22.08%22/%3E%3C/g%3E%3Cpath d=%22M430 120A310 310 0 0 1 740 430%22 stroke=%22%23fff%22 stroke-opacity=%22.55%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22649%22 cy=%22211%22 r=%224%22 fill=%22%23fff%22/%3E%3C/svg%3E") center / contain no-repeat; }
.hero.arc > .container { position: relative; z-index: 1; }
@media (max-width: 768px) { .hero.arc::after { top: -250px; right: -300px; width: 640px; height: 640px; }
}
/* ---------- 手順の箱を矢印でつなぐ（伴走支援の流れ） ---------- */
.model-steps.flow { gap: 30px; }
.model-steps.flow li { position: relative; }
.model-steps.flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -20px; width: 9px; height: 9px; border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: translateY(-50%) rotate(45deg); }
@media (min-width: 769px) and (max-width: 900px) { .model-steps.cols4.flow { grid-template-columns: repeat(4, 1fr); gap: 24px; } .model-steps.flow li:not(:last-child)::after { right: -16px; }
}
@media (max-width: 768px) {
  .model-steps.cols4.flow { grid-template-columns: 1fr; gap: 30px; }
  .model-steps.flow li:not(:last-child)::after { top: auto; bottom: -20px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
/* ---------- 文節で改行する（tools/phrase_wrap.py が <wbr> を入れる。語の途中では折らない） ---------- */
main.bx { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* ---------- 料金表（スマホ）: プランごとのカードを左右のフリックで切り替える（main.js が表から生成） ---------- */
.plan-swipe { display: none; }
@media (max-width: 760px) {
  .has-plan-swipe .table-scroll, .has-plan-swipe .table-scroll-hint { display: none; }
  .plan-swipe { display: block; margin-top: 12px; }
  .plan-dots { display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
  .plan-dot { appearance: none; border: 0; background: none; padding: 10px 6px; cursor: pointer; }
  .plan-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #C9D1E0; transition: background 0.2s, transform 0.2s; }
  .plan-dot.active::before { background: var(--navy); transform: scale(1.25); }
  .plan-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 14px; scroll-padding: 0 24px; scrollbar-width: none; }
  .plan-track::-webkit-scrollbar { display: none; }
  .plan-slide { flex: 0 0 86%; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); border-radius: 2px; padding: 22px 20px 8px; }
  .plan-slide .ps-name { font-size: 16px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
  .plan-slide .ps-price { font-size: 13px; color: var(--muted); margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .plan-slide .ps-price strong { font-size: 30px; color: var(--navy); margin-right: 2px; letter-spacing: 0.01em; }
  .plan-slide .ps-per { margin-left: 2px; }
  .plan-slide .ps-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .plan-slide .ps-row:last-child { border-bottom: 0; }
  .plan-slide .ps-label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .plan-slide .ps-label a { color: var(--navy); border-bottom: 1px solid var(--navy); }
  .plan-slide .ps-body { font-size: 13.5px; line-height: 1.75; }
  .plan-slide .ps-body.none { color: var(--muted); }
  .plan-common { margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 16px 20px; }
  .plan-common .ps-label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .plan-common .ps-label a { color: var(--navy); border-bottom: 1px solid var(--navy); }
  .plan-common .ps-body { font-size: 13.5px; line-height: 1.75; }
}
/* ---------- ネクストボード: 他のサービスとの違い（3列の比較表。スマホは横にスライド） ---------- */
.cmp-title { font-size: 20px; color: var(--navy); margin: 56px 0 0; letter-spacing: 0.04em; }
.compare-table.cmp3 { margin-top: 20px; font-size: 14.5px; }
.compare-table.cmp3 td { background: #fff; font-weight: 400; }
.compare-table.cmp3 td.ace { background: #F4F7FC; font-weight: 600; }
.compare-table.cmp3 .cmp-sub { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.compare-table.cmp3 thead th { background: #E7ECF4; color: var(--navy); }
.compare-table.cmp3 thead th:first-child { background: transparent; }
.compare-table.cmp3 thead th:last-child { background: var(--navy); color: #fff; }
@media (max-width: 768px) {
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 8px; }
  .cmp-scroll .compare-table.cmp3 { width: 640px; font-size: 13px; }
  .compare-table.cmp3 col:first-child { width: 84px !important; }
  .cmp-title { font-size: 18px; margin-top: 44px; }
}
/* ---------- トップ: 診方・味方・観方を見せ場に／サービスのカードに行き先を出す ---------- */
.point-card .num.mikata { font-family: var(--font-jp, inherit); font-size: 34px; font-weight: 700; letter-spacing: 0.12em; color: #fff; margin-bottom: 16px; line-height: 1.2; }
.section.navy .point-card .num.mikata { color: #fff; }
.theme-card .go { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.04em; }
.theme-card .go::after { content: " →"; display: inline-block; transition: transform 0.2s; }
.theme-card:hover .go::after { transform: translateX(4px); }
@media (max-width: 600px) { .point-card .num.mikata { font-size: 28px; }
}
/* ---------- 帯の診断カード: スマホでは要点だけを大きく見せる ---------- */
.score-m { display: none; }
@media (max-width: 600px) {
  .hero-visual .browser-mock { display: none; }
  .score-m { display: block; width: 100%; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 9, 34, 0.35); text-align: left; }
  .score-m .sm-head { display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; padding: 9px 16px; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; }
  .score-m .sm-pill { font-size: 11px; font-weight: 500; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; }
  .score-m .sm-body { padding: 12px 16px 14px; }
  .score-m .sm-label { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
  .score-m .sm-score { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: var(--navy); }
  .score-m .sm-score strong { font-family: var(--font-en); font-size: 44px; font-weight: 700; line-height: 1; }
  .score-m .sm-score span { font-family: var(--font-en); font-size: 18px; color: var(--muted); }
  .score-m .sm-score em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; background: #E7ECF4; color: var(--navy); padding: 5px 12px; border-radius: 2px; }
  .score-m .sm-value { background: #F2F4F8; padding: 8px 12px; margin: 0 0 10px; }
  .score-m .sm-yen { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: 0.02em; }
  .score-m .sm-bars { list-style: none; margin: 6px 0 0; padding: 0; }
  .score-m .sm-bars li { display: grid; grid-template-columns: 38px 1fr 26px; align-items: center; gap: 10px; padding: 2px 0; font-size: 13px; line-height: 1.5; color: var(--navy); }
  .score-m .sm-bar { height: 8px; background: #E7ECF4; border-radius: 8px; overflow: hidden; }
  .score-m .sm-bar i { display: block; height: 100%; background: var(--navy); border-radius: 8px; }
  .score-m .sm-val { font-family: var(--font-en); font-weight: 700; text-align: right; }
  .score-m .sm-type { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0; }
  .score-m .sm-label { line-height: 1.4; }
}
/* ---------- 4つのサービスのカード: マウスを合わせたら紺で塗る ---------- */
a.theme-card { transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s; }
a.theme-card:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(1, 34, 106, 0.22); }
a.theme-card:hover strong, a.theme-card:hover p, a.theme-card:hover .go { color: #fff; }
a.theme-card:hover .svc { color: rgba(255, 255, 255, 0.7); }
/* ---------- 3つのミカタ: 箱（ボタンに見える）をやめ、縦線で区切った3列の宣言にする ---------- */
.mikata-grid { gap: 0; }
.section.navy .mikata-grid .point-card { background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0; padding: 6px 36px 10px; }
.section.navy .mikata-grid .point-card:first-child { border-left: 0; padding-left: 0; }
.mikata-grid .point-card .num.mikata { display: flex; align-items: center; gap: 12px; font-size: 28px; letter-spacing: 0.14em; margin-bottom: 16px; }
.mikata-grid .mk-icon { width: 30px; height: 30px; flex: 0 0 auto; opacity: 0.9; }

.mikata-grid .point-card h3 { font-size: 19px; margin-bottom: 10px; }
@media (max-width: 900px) {
  .section.navy .mikata-grid .point-card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); padding: 26px 0 22px; }
  .section.navy .mikata-grid .point-card:first-child { border-top: 0; padding-top: 0; }
  .mikata-grid .point-card .num.mikata { font-size: 26px; }
}
/* ---------- スマホ: 節の中のボタンは幅いっぱい・中ぞろえ ---------- */
@media (max-width: 600px) {
  main .section .btn { display: block; width: 100%; text-align: center; padding-left: 16px; padding-right: 16px; }
  main .section .form .btn { width: 100%; }
}
/* ---------- トップ: 中央ぞろえの節（4つのサービス／経営人材／3つのミカタ） ---------- */
.center-block .sec-label, .center-block .sec-title, .center-block > .container > .lead { text-align: center; }
.center-block > .container > .lead { max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 44px; }
.center-block .sec-title { margin-bottom: 18px; }
.center-cta { margin-top: 32px; text-align: center; }
.ic { width: 34px; height: 34px; color: var(--navy); flex: 0 0 auto; }
/* 4つのサービス: アイコンを上に置いた中央ぞろえのカード */
.svc-grid .svc-card { align-items: center; text-align: center; padding: 34px 22px 26px; gap: 10px; }
.svc-grid .svc-card strong { font-size: 18px; }
.svc-grid .svc-card p { margin-top: 0; }
.svc-grid .svc-card .go { padding-top: 16px; }
a.theme-card:hover .ic { color: #fff; }
/* 経営人材: 上に図の帯、肩書きを大きく、稼働の目安を数字で見せるカード */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.role-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.role-card p { margin: 0; }
.role-card .rc-fig { display: flex; align-items: center; gap: 14px; background: #E7ECF4; color: var(--navy); padding: 22px 20px; min-height: 104px; }
.role-card .rc-fig .ic { width: 52px; height: 52px; }
.role-card .rc-fig span { font-size: 12.5px; font-weight: 500; line-height: 1.7; }
.role-card .rc-in { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 22px; }
.role-card .rc-role { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 10px; }
.role-card .rc-title { font-size: 23px; font-weight: 700; line-height: 1.4; letter-spacing: 0.03em; color: var(--navy); }
.role-card .rc-age { font-size: 14px; color: var(--muted); margin: 6px 0 12px; }
.role-card .rc-tag { font-size: 14px; font-weight: 700; color: #1D4FBF; line-height: 1.6; margin-bottom: 8px; }
.role-card .rc-desc { font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.role-card .rc-time { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.role-card .rc-time-label { font-size: 11.5px; color: var(--muted); }
.role-card .rc-time-val { font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: 0.04em; }
.role-card .rc-time-val b { font-family: var(--font-en); font-size: 32px; font-weight: 600; margin: 0 2px; }
@media (max-width: 1000px) { .role-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .role-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 10px; scroll-padding: 0 24px; scrollbar-width: none; }
  .role-grid::-webkit-scrollbar { display: none; }
  .role-card { flex: 0 0 80%; scroll-snap-align: start; }
}
/* 3つのミカタ: 中央ぞろえ・大きな文字 */
.center-block .mikata-grid .point-card { text-align: center; padding: 10px 28px 12px; }
.section.navy.center-block .mikata-grid .point-card:first-child { padding-left: 28px; }
.center-block .mikata-grid .point-card .num.mikata { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 28px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 16px; line-height: 1.2; }
.center-block .mikata-grid .mk-icon { width: 44px; height: 44px; opacity: 0.95; }
.center-block .mikata-grid .point-card .num.mikata::after { content: ""; display: block; width: 32px; height: 1px; background: rgba(255, 255, 255, 0.55); margin-top: 2px; }
@media (max-width: 900px) {
  .section.navy.center-block .mikata-grid .point-card, .section.navy.center-block .mikata-grid .point-card:first-child { padding: 28px 0 24px; }
  .section.navy.center-block .mikata-grid .point-card:first-child { padding-top: 0; }
  .center-block .mikata-grid .point-card .num.mikata { font-size: 25px; }
  .center-block .mikata-grid .mk-icon { width: 38px; height: 38px; }
}
.role-card .rc-fig { gap: 12px; padding: 16px 18px; min-height: 112px; }
.role-card .rc-art { width: 118px; height: auto; flex: 0 0 auto; }
/* ---------- トップ: 無料会員登録の案内（左に写真、右に文） ---------- */
.join-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.join-photo { margin: 0; }
.join-photo img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 44px rgba(1, 34, 106, 0.14); }
.join-photo figcaption { margin-top: 8px; font-size: 11px; color: var(--muted); }
.join-text .sec-title { margin-bottom: 20px; }
@media (max-width: 900px) { .join-split { grid-template-columns: 1fr; gap: 28px; }
}
/* ---------- 全ページ共通: 節の見出しまわりは中央ぞろえ（帯・フォーム・長文・法務ページの本文は左のまま） ---------- */
main .section > .container > .sec-label,
main .section > .container > .sec-title,
main .section > .container > .lead,
main .section > .container > .cmp-title { text-align: center; }
main .section > .container > .lead { max-width: 760px; margin-left: auto; margin-right: auto; }
main .section > .container > .lead.lead-left { text-align: left; }
main .section > .container > a.btn { display: table; margin-left: auto; margin-right: auto; }
main .section > .container > p:has(> a.btn),
main .section > .container > div[style]:has(> a.btn),
main .section > .container > .flow-note,
main .section > .container > .consult-note,
main #concept > .container > p { text-align: center; }
main .section > .container > .form { margin-left: auto; margin-right: auto; }
main .section > .container > .company-table, main .section > .container > .access, main .section > .container > .faq-list,
main .section > .container > [style*="max-width"] { margin-left: auto; margin-right: auto; }
main .section > .container > h3 { text-align: center; }
main #preregister > .container > p { text-align: center; }
/* ---------- 項目とアイコンの統一（サービス4つ・人材の役割4つ） ---------- */
.role-point .rp-art { display: block; background: #E7ECF4; border-radius: 4px; padding: 12px 16px; margin-bottom: 18px; }
.role-point .rp-art .rc-art { display: block; width: 110px; height: auto; }
.global-nav .sub-nav a:has(> .sn-ic) { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; row-gap: 3px; align-items: start; }
.global-nav .sub-nav .sn-ic { grid-row: 1 / span 3; width: 28px; height: 28px; margin-top: 4px; color: var(--navy); }
@media (max-width: 768px) { .global-nav .sub-nav a:has(> .sn-ic) { display: block; } .global-nav .sub-nav .sn-ic { display: none; }
}
/* サービスのアイコン（2色の線画）。紺で塗られたカードの上では、塗りを白の薄い色に */
.ic .f0 { fill: #fff; }
.ic .f1 { fill: #C9D6EE; }
a.theme-card:hover .ic .f0 { fill: rgba(255, 255, 255, 0.1); }
a.theme-card:hover .ic .f1 { fill: rgba(255, 255, 255, 0.3); }
.svc-grid .svc-card .ic { width: 52px; height: 52px; }
.global-nav .sub-nav .sn-ic { width: 32px; height: 32px; margin-top: 2px; }
.global-nav .sub-nav a:has(> .sn-ic) { grid-template-columns: 34px 1fr; }
/* スマホの横フリックの目印（●）。PCでは出さない */
.swipe-dots { display: none; }
@media (max-width: 600px) {
  .swipe-dots { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
  .swipe-dots .plan-dot { appearance: none; border: 0; background: none; padding: 10px 6px; cursor: pointer; width: auto; display: inline-block; }
  .swipe-dots .plan-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #C9D1E0; transition: background 0.2s, transform 0.2s; }
  .swipe-dots .plan-dot.active::before { background: var(--navy); transform: scale(1.25); }
}
.join-text .sec-label, .join-text .sec-title, .join-text .lead { text-align: left; }
/* ---------- 診断の結果画面: 企業価値向上レポートの案内は、濃紺のパネルに白抜き ---------- */
.report-teaser { background: #E7ECF4; border: 0; border-radius: 4px; padding: 32px 30px; }
.report-teaser .rt-title { font-size: 21px; }
/* ---------- 私たちについて: 代表の経歴（薄い青のパネルに、年ごとの一覧） ---------- */
.career-box { max-width: 860px; margin: 48px auto 0; background: #E7ECF4; border-radius: 4px; padding: 32px 36px 30px; text-align: left; }
.career-box h3 { font-size: 17px; color: var(--navy); letter-spacing: 0.08em; margin: 0 0 18px; text-align: left; }
.career-box p { margin: 0; font-size: 15px; line-height: 2; }
.career-box p + p { margin-top: 12px; }
@media (max-width: 600px) { .career-box { padding: 24px 20px 22px; } .career-box p { font-size: 14.5px; line-height: 1.9; }
}
/* 比較表のマスは白地（灰色の節の上でも読みやすく） */
.compare-table td { background: #fff; }
.compare-table td.ace { background: #F4F7FC; }
.mk-svc { margin-top: 14px !important; font-size: 12.5px; color: rgba(255, 255, 255, 0.75); }
/* 私たちについて: 3つのミカタ（白地） */
.mikata-light .mikata-grid .point-card { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.mikata-light .mikata-grid .point-card:first-child { border-left: 0; }
.mikata-light .point-card .num.mikata, .mikata-light .point-card h3 { color: var(--navy); }
.mikata-light .center-block .mikata-grid .point-card .num.mikata::after, .mikata-light.center-block .mikata-grid .point-card .num.mikata::after { background: var(--navy); opacity: .5; }
.mikata-light .mk-svc { color: var(--muted); }
@media (max-width: 900px) { .mikata-light .mikata-grid .point-card { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 22px; } .mikata-light .mikata-grid .point-card:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   v2（2026-10）: 余白と罫線と大きな文字で組み直す。色は紺1色のまま
   ============================================================ */
:root {
  --container: 1200px;
  --gutter: clamp(24px, 4.5vw, 64px);   /* 左右の余白：ノートPCの幅で端に詰まらないように（2026-10-08） */
  --sp: clamp(80px, 9vw, 128px);          /* 節の上下 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --navy-deep: #011540;
  --navy-soft: #E7ECF4;
}
.container { max-width: var(--container); padding: 0 var(--gutter); }
.header-inner { max-width: var(--container); padding: 0 var(--gutter); }
.footer-inner { max-width: var(--container); padding: 0 var(--gutter); }
.section { padding: var(--sp) 0; }

/* ---- 文字の階層 ---- */
.sec-label { font-size: 11.5px; letter-spacing: 0.3em; margin-bottom: 20px; }
.sec-label::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; margin: 0 10px 4px 0; opacity: .6; }
.sec-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.38; letter-spacing: 0.01em; margin-bottom: 28px; }
.lead { font-size: 16.5px; line-height: 2; color: var(--ink); }
.tlink { display: inline-block; font-weight: 600; color: var(--navy); padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size .3s var(--ease); }
.tlink::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .3s var(--ease); }
.tlink:hover { background-size: 0 1px; }
.tlink:hover::after { transform: translateX(4px); }
.section.navy .tlink { color: #fff; }

/* ---- ボタン ---- */
.btn { padding: 17px 36px; letter-spacing: 0.04em; font-size: 15.5px; border-radius: 3px; }
.btn.small { padding: 11px 22px; font-size: 13px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(1, 34, 106, 0.22); }
.hero .btn { box-shadow: 0 10px 30px rgba(0, 9, 34, 0.3); }
.hero .btn.ghost-light { box-shadow: none; }

/* ---- ヘッダー ---- */
.site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: transparent; transition: border-color .3s, box-shadow .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { height: 76px; }
main { padding-top: 76px; }
html { scroll-padding-top: 96px; }
.global-nav ul { gap: 32px; }
.global-nav a { letter-spacing: 0.03em; }
.global-nav > ul > li > a:not(.btn) { position: relative; padding: 4px 0; }
.global-nav > ul > li > a:not(.btn)::before { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.global-nav > ul > li:hover > a:not(.btn)::before, .global-nav > ul > li > a.current::before { transform: scaleX(1); transform-origin: left; }
.global-nav a:not(.btn):hover { color: var(--navy); }
.global-nav a.current { color: var(--navy); }

/* ---- 現れ方（スクロールで下から浮く。動きを減らす設定なら止める） ---- */
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-bg .orbit, .hero-bg .ping, .browser-mock { animation: none !important; }
}

/* ---- 帯（トップ） ---- */
.hero-v2 { padding: clamp(72px, 9vw, 120px) 0 0; }
.hero-v2 .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 1; }
.hero-v2 .hero-eyebrow { font-size: 13.5px; letter-spacing: 0.2em; margin-bottom: 26px; }
.hero-v2 .hero-copy { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.26; letter-spacing: 0.005em; margin-bottom: 28px; font-feature-settings: "palt"; }
.hero-v2 .hero-sub { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 2; margin-bottom: 36px; color: rgba(255, 255, 255, 0.86); }
.hero-v2 .btn-pair .btn { min-width: 200px; }
.hero-v2 .cta-note { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.hero-v2 .hero-visual { flex: none; width: 100%; display: block; }
.hero-v2 .browser-mock { width: 100%; max-width: 560px; margin: 0 auto; transition: transform .7s var(--ease); will-change: transform; }
.hero-v2 .browser-mock svg { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 40px 90px rgba(0, 6, 28, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero-v2 .hero-visual > p { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); text-align: center; margin-top: 12px; }

/* 数字の帯（帯の下端） */
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 7vw, 96px) 0 0; padding: 32px 0 34px; border-top: 1px solid rgba(255, 255, 255, 0.18); position: relative; z-index: 1; }
.facts li { display: flex; flex-direction: column; gap: 6px; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.facts b { font-family: var(--font-en); font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1; color: #fff; letter-spacing: -0.01em; }
.facts b small { font-family: var(--font-jp); font-size: 14px; font-weight: 500; margin-left: 4px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.facts span { font-size: 13px; color: rgba(255, 255, 255, 0.72); line-height: 1.7; }

/* ---- 左に見出し、右に中身の節 ---- */
.ed-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.ed-head { position: sticky; top: 108px; }
.ed-head .sec-title { margin-bottom: 20px; }
.ed-head .lead { font-size: 15.5px; color: var(--muted); }
.ed-note { margin-top: 32px; font-size: 15px; line-height: 2; color: var(--muted); }
.ed-note .tlink { margin-left: 10px; }
main .section.ed > .container .sec-label, main .section.ed > .container .sec-title, main .section.ed > .container .lead { text-align: left; margin-left: 0; margin-right: 0; }

/* 症状：番号つきの罫線の行 */
.sym-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sym-list li { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; color: var(--navy); letter-spacing: 0.02em; position: relative; }
.sym-list .no { font-family: var(--font-en); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); }
.sym-list li::after { content: ""; width: 18px; height: 18px; border: 1.5px solid var(--navy); border-radius: 2px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.5l3 3 6-7'/%3E%3C/svg%3E") center / 14px no-repeat; justify-self: end; }

/* 3つのミカタ：大きな漢字の3列 */
.mikata-v2 { position: relative; overflow: hidden; }
.mikata-v2::before { content: ""; position: absolute; right: -180px; top: -240px; width: 720px; height: 720px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; }
.mikata-v2::after { content: ""; position: absolute; right: -60px; top: -120px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: none; }
.mikata-v2 .container { position: relative; z-index: 1; }
main .mikata-v2 > .container > .sec-label, main .mikata-v2 > .container > .sec-title, main .mikata-v2 > .container > .lead { text-align: left; margin-left: 0; }
.mikata-v2 .lead { color: rgba(255, 255, 255, 0.82); max-width: 640px; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(48px, 5vw, 80px); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.mk { padding: 40px 36px 8px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.mk:first-child { padding-left: 0; border-left: 0; }
.mk-kanji { font-size: clamp(44px, 4.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: 0.14em; color: #fff; margin: 0 0 26px; font-feature-settings: "palt"; }
.mk h3 { font-size: 19px; color: #fff; margin-bottom: 12px; line-height: 1.5; }
.mk p:not(.mk-kanji) { font-size: 14.5px; line-height: 1.9; color: rgba(255, 255, 255, 0.82); }

/* 4つのサービス：一覧の行。合わせると紺で塗る */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-list a { display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) 140px; align-items: center; gap: 20px; padding: 26px 20px 26px 0; color: var(--ink); position: relative; transition: color .35s var(--ease), padding .35s var(--ease); }
.svc-list a::before { content: ""; position: absolute; inset: 0 -20px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: -1; }
.svc-list li { position: relative; z-index: 0; }
.svc-list a:hover { color: #fff; padding-left: 20px; }
.svc-list a:hover::before { transform: scaleX(1); }
.svc-list .no { font-family: var(--font-en); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; color: var(--muted); transition: color .3s; }
.svc-list .ic-wrap { display: flex; }
.svc-list .ic { width: 40px; height: 40px; transition: color .3s; }
.svc-list .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-list strong { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: var(--navy); letter-spacing: 0.02em; transition: color .3s; }
.svc-list .desc { font-size: 14px; color: var(--muted); line-height: 1.7; transition: color .3s; }
.svc-list .meta { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--navy); background: var(--navy-soft); padding: 5px 11px; border-radius: 2px; white-space: nowrap; transition: background .3s, color .3s; }
.svc-list .go { font-size: 13px; font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; transition: color .3s; }
.svc-list .go::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .35s var(--ease); }
.svc-list a:hover .no, .svc-list a:hover strong, .svc-list a:hover .desc, .svc-list a:hover .go, .svc-list a:hover .ic { color: #fff; }
.svc-list a:hover .desc { color: rgba(255, 255, 255, 0.78); }
.svc-list a:hover .meta { background: rgba(255, 255, 255, 0.14); color: #fff; }
.svc-list a:hover .go::after { transform: translateX(6px); }
.svc-list a:hover .ic .f0 { fill: rgba(255, 255, 255, 0.1); }
.svc-list a:hover .ic .f1 { fill: rgba(255, 255, 255, 0.3); }

/* 中央の見出しの組（人材の節） */
.sec-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.sec-head .sec-title { margin-bottom: 18px; }
.sec-head .lead { color: var(--muted); font-size: 15.5px; }
.sub-link { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.center-cta { margin-top: 40px; }
.model-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* 人材のカード（v2の整え） */
.role-grid { gap: 20px; }
.role-card { border-radius: 4px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.role-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(1, 34, 106, 0.12); }
.role-card .rc-fig { background: var(--navy-soft); }
.role-card .rc-tag { color: var(--navy); }

/* 一言の節 */
.statement .container { max-width: 900px; }
.st-copy { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; color: var(--navy); margin: 0 0 24px; font-feature-settings: "palt"; }
.statement .lead { max-width: 640px; margin-bottom: 26px; }
main .statement > .container > .sec-label, main .statement > .container > .lead, main .statement > .container > p { text-align: left; margin-left: 0; }

/* 登録の案内 */
.join-split { gap: clamp(32px, 5vw, 72px); }
.join-photo img { border-radius: 6px; box-shadow: 0 30px 60px rgba(1, 34, 106, 0.16); }
.join-text .lead { margin-bottom: 28px; }

/* ---- 下層ページの帯：文字を大きく、余白を整える ---- */
.hero.arc { padding: clamp(64px, 7vw, 104px) 0 clamp(52px, 6vw, 80px) !important; }
.hero.arc .sec-label { color: rgba(255, 255, 255, 0.6); }
.hero.arc .hero-copy { font-size: clamp(32px, 4vw, 54px) !important; line-height: 1.28; letter-spacing: 0.01em; margin-bottom: 18px; font-feature-settings: "palt"; }
.hero.arc .hero-sub { font-size: 16.5px; line-height: 2; color: rgba(255, 255, 255, 0.84); }

/* ---- フッター ---- */
.site-footer { background: var(--navy-deep); padding: clamp(64px, 7vw, 96px) 0 36px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer-brand img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand .f-purpose { font-size: 17px; font-weight: 700; letter-spacing: 0.06em; margin: 22px 0 6px; line-height: 1.7; }
.footer-brand .f-slogan { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.5); }
.footer-col h4 { font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.5); margin-bottom: 18px; text-transform: uppercase; }
.footer-col a { display: block; color: rgba(255, 255, 255, 0.86); font-size: 13.5px; padding: 6px 0; transition: color .2s, transform .3s var(--ease); }
.footer-col a:hover { color: #fff; transform: translateX(4px); }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 28px; }
.footer-bottom .footer-company { text-align: left; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.9; }
.footer-bottom .copyright { margin: 0; text-align: right; }

/* ---- スマホ・タブレット ---- */
@media (max-width: 1000px) {
  .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-v2 .hero-visual { max-width: 560px; margin: 0 auto; }
  .ed-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ed-head { position: static; }
  .ed-head .sec-title br { display: none; }
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .header-inner { height: 64px; }
  main { padding-top: 64px; }
  .hero-v2 { padding-top: 48px; }
  .hero-v2 .hero-grid { display: grid; }
  .hero-v2 .hero-text { display: contents; }
  .hero-v2 .hero-eyebrow { order: 1; margin-bottom: 18px; }
  .hero-v2 .hero-copy { order: 2; font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.32; margin-bottom: 18px; min-width: 0; }
  .hero-v2 .hero-copy br { display: inline; }
  .hero-v2 .hero-sub br { display: none; }
  .hero-v2 .hero-sub { order: 3; margin-bottom: 28px; }
  .hero-v2 .hero-visual { order: 4; margin: 0 auto 8px; }
  .hero-v2 .btn-pair { order: 5; width: 100%; }
  .hero-v2 .btn-pair .btn { flex: 1 1 100%; min-width: 0; }
  .hero-v2 .cta-note { order: 6; margin-top: 12px; }
  .hero-v2 .browser-mock svg { box-shadow: 0 24px 50px rgba(0, 6, 28, 0.5); }
  .facts { margin-top: 48px; padding: 24px 0 28px; }
  .facts li { padding: 0 16px; }
  .facts b { font-size: 30px; }
  .facts span { font-size: 12px; }
  .sec-title { font-size: 26px; }
  .sym-list li { grid-template-columns: 40px 1fr 24px; gap: 12px; padding: 18px 0; font-size: 16px; }
  .mk-grid { grid-template-columns: 1fr; border-top: 0; margin-top: 36px; }
  .mk { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 28px 0 24px; }
  .mk:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .mk-kanji { font-size: 40px; margin-bottom: 16px; }
  .svc-list a { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "no body" "ic body" ". go"; row-gap: 10px; column-gap: 14px; padding: 22px 0; }
  .svc-list .no { grid-area: no; }
  .svc-list .ic-wrap { grid-area: ic; display: none; }
  .svc-list .body { grid-area: body; }
  .svc-list .meta { grid-area: meta; justify-self: start; }
  .svc-list .go { grid-area: go; }
  .svc-list a:hover { padding-left: 0; }
  .svc-list a::before { display: none; }
  .svc-list a:hover, .svc-list a:hover .no, .svc-list a:hover strong, .svc-list a:hover .go { color: var(--navy); }
  .svc-list a:hover .desc { color: var(--muted); }
  .svc-list a:hover .meta { background: var(--navy-soft); color: var(--navy); }
  .st-copy { font-size: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom .copyright { text-align: left; }
  main .section .center-cta .btn { display: block; width: 100%; }
}

/* ---- v2: 下層ページの共通部品。箱をやめて罫線で区切る ---- */
.point-grid { gap: 0; border-top: 1px solid var(--line); }
.point-grid > .point-card { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 34px 32px 8px; }
.point-grid > .point-card:first-child { border-left: 0; padding-left: 0; }
.point-grid > .point-card .num { font-size: 12px; letter-spacing: 0.24em; margin-bottom: 18px; }
.point-grid > .point-card h3 { font-size: 20px; line-height: 1.5; margin-bottom: 12px; }
.point-grid > .point-card p { font-size: 14.5px; color: var(--ink); }
.section.navy .point-grid { border-top-color: rgba(255, 255, 255, 0.2); }
.section.navy .point-grid > .point-card { border-left-color: rgba(255, 255, 255, 0.2); }
.point-grid.cols2 > .point-card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
.point-grid.cols2 > .point-card:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 34px; }
.point-grid:not(.cols2) > .point-card:nth-child(n+4) { border-top: 1px solid var(--line); padding-top: 34px; }
.point-grid:not(.cols2) > .point-card:nth-child(3n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 900px) {
  .point-grid { border-top: 0; }
  .point-grid > .point-card, .point-grid > .point-card:first-child, .point-grid.cols2 > .point-card:nth-child(2n+1), .point-grid:not(.cols2) > .point-card:nth-child(3n+1), .point-grid.cols2 > .point-card:nth-child(n+3), .point-grid:not(.cols2) > .point-card:nth-child(n+4) { border-left: 0; border-top: 1px solid var(--line); padding: 26px 0 6px; }
  .point-grid > .point-card:first-child { border-top: 0; padding-top: 0; }
  .section.navy .point-grid > .point-card { border-top-color: rgba(255, 255, 255, 0.2); }
}
.model-steps { gap: 0; border-top: 1px solid var(--line); margin-top: 36px; }
.model-steps li { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 26px 22px 6px; }
.model-steps li:first-child { border-left: 0; padding-left: 0; }
.model-steps strong { font-size: 17px; }
@media (max-width: 900px) { .model-steps li { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 4px; } .model-steps { border-top: 0; } .model-steps li:first-child { border-top: 0; padding-top: 0; } }
.theme-grid { gap: 20px; }
.theme-card { border-radius: 4px; padding: 30px 26px 26px; gap: 8px; }
.theme-card strong { font-size: 19px; }
.faq-list { max-width: 820px; }
.faq-list summary { font-size: 17px; padding: 24px 44px 24px 0; line-height: 1.6; }
.faq-list summary::after { right: 4px; font-size: 22px; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { content: "+"; transform: translateY(-50%) rotate(45deg); }
.faq-list .faq-a { padding: 0 0 26px; font-size: 15px; line-height: 2; color: var(--ink); }
.plan-table thead th { font-size: 15px; padding: 18px 16px; }
.plan-table .price-row strong { font-family: var(--font-en); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.plan-table tbody th { font-size: 14px; }
.compare-table th, .compare-table td { padding: 18px 14px; }
.company-table th, .company-table td { padding: 20px 12px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea, .form select { border-radius: 3px; padding: 15px 16px; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(1, 34, 106, 0.12); }
.member-card { border-radius: 4px; }
.career-box, .report-teaser { border-radius: 6px; }
main .section > .container > .sec-title { margin-bottom: 24px; }
main .section > .container > .lead { margin-bottom: 40px; }
main .section > .container > .lead + .point-grid, main .section > .container > .lead + .theme-grid, main .section > .container > .lead + .role-grid, main .section > .container > .lead + .model-steps { margin-top: 0; }

/* ---- v2: 帯の上ではヘッダーを透明にして白抜き。帯を過ぎたら白地に戻す ---- */
html.js .site-header.over-hero, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
html.js .site-header.over-hero .brand img, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .brand img { filter: brightness(0) invert(1); }
html.js .site-header.over-hero .global-nav > ul > li > a:not(.btn), html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav > ul > li > a:not(.btn) { color: #fff; }
html.js .site-header.over-hero .global-nav > ul > li > a:not(.btn)::before, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav > ul > li > a:not(.btn)::before { background: #fff; }
html.js .site-header.over-hero .global-nav > ul > li > a.current, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav > ul > li > a.current { color: #fff; }
html.js .site-header.over-hero .nav-cta .btn, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .nav-cta .btn { background: #fff; color: var(--navy); border-color: #fff; }
html.js .site-header.over-hero .nav-cta .btn:hover, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .nav-cta .btn:hover { background: #EDF1F8; }
html.js .site-header.over-hero .nav-toggle span, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .nav-toggle span { background: #fff; }
.site-header .brand img { transition: filter .3s; }
.site-header { transition: background .35s, border-color .35s, box-shadow .35s; }
@media (max-width: 768px) {
  html.js .site-header.over-hero.menu-open, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header.menu-open { background: #fff; }
  html.js .site-header.over-hero.menu-open .brand img, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header.menu-open .brand img { filter: none; }
  html.js .site-header.over-hero.menu-open .nav-toggle span, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header.menu-open .nav-toggle span { background: var(--navy); }
}
.sec-title, .hero-copy, .st-copy, .mk-kanji { font-feature-settings: "palt"; }

/* ---- v2: 帯が先頭のページは、帯をヘッダーの下まで伸ばす（ヘッダーが透明でも白地が出ないように） ---- */
main:has(> .hero:first-child), body.hero-top main { padding-top: 0; }
main > .hero:first-child { padding-top: calc(clamp(72px, 9vw, 120px) + 76px); }
main > .hero.arc:first-child { padding-top: calc(clamp(64px, 7vw, 104px) + 76px) !important; }
@media (max-width: 768px) {
  main > .hero:first-child { padding-top: calc(48px + 64px); }
  main > .hero.arc:first-child { padding-top: calc(48px + 64px) !important; }
}
/* フッターのロゴはヘッダーと同じ組み合わせ（印＋文字）を白抜きで */
.footer-brand .f-logo { display: flex; align-items: center; gap: 12px; }
.footer-brand .f-logo img { height: auto; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand .f-logo .brand-symbol { height: 54px; }
.footer-brand .f-logo .brand-wordmark { height: 20px; }

/* ---- v2: 左見出し＋右中身の節の部品 ---- */
.ed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ed-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.ed-list .no { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; color: var(--muted); padding-top: 7px; line-height: 1.6; }
.ed-list h3 { font-size: 19px; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.ed-list p { font-size: 14.5px; line-height: 1.9; margin: 0; }
.ed-cta { margin-top: 32px; }
.ed-head .lead { font-size: 15.5px; color: var(--muted); margin-bottom: 0; }
.ed-fig { margin: 32px 0 0; max-width: 280px; }
.ed-fig img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 48px rgba(1, 34, 106, 0.14); }
.ed-fig.logo img { max-width: 200px; box-shadow: none; border-radius: 0; }
.ed-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; }
.ed-fig .sns-links { align-items: flex-start; }
.ed-body h3.sub { font-size: 19px; color: var(--navy); margin: 0 0 12px; line-height: 1.5; }
.ed-body h3.sub + p { font-size: 15px; line-height: 2; margin-bottom: 36px; }
.ed-body h3.sub + p:last-child { margin-bottom: 0; }
.story-body .lead { max-width: none; }
.story-body .career-box { margin-top: 48px; }
.ed-body .company-table { max-width: none; }
.ed-body .access { margin-top: 56px; }
.ed-body .access .sec-label { margin-bottom: 16px; }
.section.gray .ed-list li, .section.gray .ed-list { border-color: #D5DCE8; }
/* 私たちについて: 3つのミカタを白地で */
.mikata-v2.light { background: #fff; color: var(--ink); }
.mikata-v2.light::before, .mikata-v2.light::after { border-color: var(--line); }
.mikata-v2.light .sec-label { color: var(--muted); }
.mikata-v2.light .sec-title, .mikata-v2.light .mk-kanji, .mikata-v2.light .mk h3 { color: var(--navy); }
.mikata-v2.light .lead { color: var(--ink); }
.mikata-v2.light .mk-grid, .mikata-v2.light .mk { border-color: var(--line); }
.mikata-v2.light .mk p:not(.mk-kanji) { color: var(--ink); }
.mikata-v2.light .mk-svc { color: var(--muted) !important; }
.mk-svc { margin-top: 14px !important; font-size: 12.5px !important; }
@media (max-width: 768px) {
  .ed-list li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .ed-list .no { padding-top: 0; }
  .ed-fig { margin-top: 24px; }
  .mikata-v2.light .mk, .mikata-v2.light .mk:first-child { border-color: var(--line); }
}

/* ---- v2: 料金をプランごとに縦に並べる ---- */
.plan-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan-col { display: flex; flex-direction: column; }
.plan-col { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 30px 28px 26px; }
.plan-col.premium { }
.pc-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); margin: 0; }
.pc-price { margin: 10px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--navy); line-height: 1; }
.pc-price strong { font-family: var(--font-en); font-weight: 600; font-size: 36px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pc-price .yen { font-size: 15px; font-weight: 700; margin-left: 2px; }
.pc-price small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.plan-col > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-col > ul > li { position: relative; padding: 2px 0 2px 28px; font-size: 14.5px; line-height: 1.7; }
/* 機能のまとまり：見出しで区切り、全プランで行の位置をそろえる（使えない機能は薄く「—」。2026-10-08） */
.plan-col > .pc-g { margin: 26px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }  /* 線は使わず余白で区切る */
.plan-col > .pc-year + .pc-g, .plan-col > .pc-price + .pc-g { margin-top: 6px; }
.plan-col > .pc-g + ul > li { white-space: nowrap; }
.plan-col > ul > li.off { color: var(--muted); opacity: .45; }
.plan-col > .pc-year.blank { visibility: hidden; }
.plan-col > ul > li.off::before { background: none; border-top: 2px solid var(--muted); width: 10px; height: 0; border-radius: 0; left: 4px; top: 14px; }
.plan-col > ul > li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2301226A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan-col.premium > ul > li::before { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5'/%3E%3C/svg%3E"); }
.ed-cta.center { text-align: center; }
@media (max-width: 900px) { .plan-cols { grid-template-columns: 1fr; gap: 14px; } .plan-col { padding: 24px 22px 20px; } }

/* ---- 企業価値診断: 推移の図（会員サイトの画面と同じ描き方） ---- */
.trend-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.trend-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px 20px 14px; }
.trend-lbl { font-size: 13px; font-weight: 700; color: var(--navy); margin: 0 0 6px; letter-spacing: 0.04em; }
.trend { display: block; width: 100%; height: auto; }
.trend .gl { stroke: var(--line); stroke-width: 1; }
.trend .ax { font-size: 9.5px; fill: var(--muted); font-family: var(--font-en); }
.trend .vl { font-size: 10.5px; font-weight: 700; fill: var(--ink); font-family: var(--font-en); }
.trend .ln { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.trend .dot { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.trend .dot.end { fill: var(--navy); }
.trend .rg { fill: var(--navy-soft); stroke: var(--navy); stroke-width: 1.5; }
.trend .rg.end { fill: var(--navy); }
@media (max-width: 700px) { .trend-pair { grid-template-columns: 1fr; } }

/* ---- 帯の現れ方は、画面の監視に頼らずCSSのアニメで出す ---- */
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* （帯は .rv で出す。CSSアニメ版は2026-10-01に取りやめ） */
/* よくある質問 */
.faq-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; }
.faq-jump a { display: inline-block; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 600; transition: background .2s, border-color .2s; }
.faq-jump a:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.ed-body .faq-list { max-width: none; }
.ed-body .faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-a a { color: var(--navy); font-weight: 600; border-bottom: 1px solid var(--navy); }

/* ---- CXOレポート: 種類×会員の表（縦に3種、右に誰に届くか） ---- */
.rep-matrix { max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.rep-matrix ~ .price-note { max-width: 960px; margin-left: auto; margin-right: auto; }  /* 表の下の注記は、表の左端にそろえる */
.rep-matrix .rm-head, .rep-matrix .rm-row, .rep-matrix .rm-foot { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px 130px; align-items: center; }
.rep-matrix .rm-head { background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.rep-matrix .rm-head .rm-name { padding: 14px 22px; }
.rep-matrix .rm-head .rm-col { padding: 14px 8px; text-align: center; }
.rep-matrix .rm-row { border-top: 1px solid var(--line); }
.rep-matrix .rm-row .rm-name { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.rep-matrix .rm-row strong { font-size: 17px; color: var(--navy); }
.rep-matrix .rm-row .rm-name span { font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.rep-matrix .rm-row .rm-col { text-align: center; font-size: 15px; color: #C5CCDA; border-left: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.rep-matrix .rm-row .rm-col.on { color: var(--navy); font-size: 20px; font-weight: 700; }
.rep-matrix .rm-foot { border-top: 2px solid var(--navy); background: var(--navy-soft); }
.rep-matrix .rm-foot .rm-name { padding: 14px 22px; font-size: 13px; font-weight: 700; color: var(--navy); }
.rep-matrix .rm-foot .rm-col { text-align: center; font-size: 13px; color: var(--navy); border-left: 1px solid #D5DCE8; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 2px; }
.rep-matrix .rm-foot b { font-family: var(--font-en); font-size: 22px; font-weight: 600; }
@media (max-width: 700px) {
  .rep-matrix .rm-head, .rep-matrix .rm-row, .rep-matrix .rm-foot { grid-template-columns: minmax(0, 1fr) 58px 66px 66px; }
  .rep-matrix .rm-head .rm-col, .rep-matrix .rm-foot .rm-col { font-size: 10px; letter-spacing: 0; padding: 12px 0; word-break: keep-all; white-space: nowrap; }
  .rep-matrix .rm-head .rm-name, .rep-matrix .rm-foot .rm-name { padding: 12px 14px; }
  .rep-matrix .rm-row .rm-name { padding: 16px 14px; }
  .rep-matrix .rm-row strong { font-size: 15px; }
  .rep-matrix .rm-row .rm-name span { font-size: 12.5px; }
  .rep-matrix .rm-foot b { font-size: 18px; }
}
/* フッターの文は文節でだけ折る（<wbr> の位置） */
.site-footer .f-purpose { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
/* スマホ: 帯のボタンは幅いっぱい（節の中のボタンと同じ扱い） */
@media (max-width: 600px) { main > .hero .btn:not(.small) { display: block; width: 100%; text-align: center; } }

/* ---- フォーム: 選択肢はボタン型（チップ）、同意は左ぞろえで折り返す ---- */
.form input[type="url"] { width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-jp); font-size: 16px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.form input[type="url"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(1, 34, 106, 0.12); }
.form .field > label { margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; margin: 0; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); background: #fff; transition: background .2s, border-color .2s, color .2s; }
.chips label:hover span { border-color: var(--navy); }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(1, 34, 106, 0.2); }
.chips input:disabled + span { opacity: .45; cursor: default; }
.form .consent { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.form .consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--navy); flex-shrink: 0; }
.form .consent label { margin: 0; font-weight: 400; font-size: 14.5px; line-height: 1.8; color: var(--ink); }
.form .consent label a { color: var(--navy); font-weight: 600; }
/* 種類×会員の表: 文字のマス（参加費あり／なし） */
.rep-matrix .rm-row .rm-col.txt { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.rep-matrix .rm-row .rm-col.txt.on { font-size: 12.5px; color: var(--navy); }
@media (max-width: 700px) { .rep-matrix .rm-row .rm-col.txt, .rep-matrix .rm-row .rm-col.txt.on { font-size: 10.5px; letter-spacing: 0; } }
/* 中央のボタンが2つ並ぶとき */
.center-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.center-cta .sub-link { flex-basis: 100%; }
.btn.ghost { background: #fff; color: var(--navy); }
.btn.ghost:hover { background: var(--navy-soft); box-shadow: none; }
@media (max-width: 600px) { .center-cta .btn { flex-basis: 100%; } }
.form label .req, .form label .opt { white-space: nowrap; display: inline-block; }

/* ---- ヘッダーのログイン（未登録のときだけ出す） ---- */
body.is-member .nav-login { display: none; }
@media (max-width: 768px) { .global-nav li.nav-login { border-bottom: none; margin-top: 16px; } .global-nav li.nav-login a { color: var(--navy); font-weight: 600; } }
/* 左見出し＋右中身の節のボタンは、ページの中央に */
.ed-grid > .ed-cta { grid-column: 1 / -1; text-align: center; margin-top: 8px; }
.login-help { margin-top: 28px; padding: 16px 20px; background: var(--navy-soft); border-radius: 6px; font-size: 13.5px; line-height: 1.9; text-align: left; color: var(--ink); }
.login-help .tlink { display: inline-block; margin-top: 4px; }

/* ---- 入力のページ（登録・ログイン・問い合わせ）は帯を小さく、すぐ入力欄へ ---- */
main > .hero.arc.compact:first-child { padding-top: calc(36px + 76px) !important; padding-bottom: 36px !important; }
.hero.arc.compact .hero-copy { font-size: clamp(28px, 3.2vw, 40px) !important; margin-bottom: 12px; }
.hero.arc.compact .hero-sub { font-size: 15.5px; }
.hero.arc.compact + .section { padding-top: clamp(40px, 5vw, 64px); }
.hero-v2 .cta-note { font-size: 14px; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 768px) { main > .hero.arc.compact:first-child { padding-top: calc(28px + 64px) !important; padding-bottom: 28px !important; } }

/* ---- 料金: プランの価値の一文と年払いの額 ---- */
.pc-value { margin: 8px 0 0; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.pc-price { margin-top: 14px; }
.pc-year { margin: -10px 0 18px; font-size: 12px; color: var(--muted); }
.pc-year + ul { margin-top: 0; }
/* ---- トップ: 創業者の経験 ---- */
.founder-lead { font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.9; color: var(--navy); margin: 0 0 18px; letter-spacing: 0.01em; }

/* ---- 料金: 合わせると「こんな会社に」の吹き出し ---- */
.plan-cols { overflow: visible; }
.plan-col { position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; outline: none; }
.plan-col:hover, .plan-col:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(1, 34, 106, 0.16); border-color: var(--navy); z-index: 2; }
.pc-rec { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 8px); width: min(300px, 92vw); padding: 18px 20px 16px; background: linear-gradient(150deg, #0B357F 0%, #01226A 55%, #011540 100%); color: #fff; border-radius: 10px; box-shadow: 0 24px 48px rgba(0, 9, 34, 0.35); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s; pointer-events: none; text-align: left; z-index: 5; }
.pc-rec::after { content: ""; position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; background: #011540; transform: translate(-50%, -7px) rotate(45deg); border-radius: 2px; }
.plan-col:hover .pc-rec, .plan-col:focus-visible .pc-rec { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.pc-rec-en { font-family: var(--font-en); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 0 0 6px; }
.pc-rec-t { font-size: 15.5px; font-weight: 700; line-height: 1.5; margin: 0 0 10px; }
.pc-rec ul { list-style: none; margin: 0; padding: 0; }
.pc-rec li { position: relative; padding: 4px 0 4px 16px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.pc-rec li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 2px; background: rgba(255, 255, 255, 0.7); }
@media (max-width: 900px) {
  /* スマホ: 吹き出しではなく、カードの上に畳んで見せる（押すと開く） */
  .plan-col:hover, .plan-col:focus-within { transform: none; box-shadow: none; }
  .pc-rec { position: static; transform: none; width: auto; opacity: 1; visibility: visible; margin: 0 0 16px; padding: 14px 16px 12px; border-radius: 8px; box-shadow: none; pointer-events: auto; }
  .pc-rec::after { display: none; }
  .plan-col:hover .pc-rec, .plan-col:focus-within .pc-rec { transform: none; }
  .pc-rec ul { display: none; }
  .plan-col:focus-within .pc-rec ul { display: block; }
  .pc-rec-t { margin-bottom: 0; }
  .pc-rec-t::after { content: "＋"; margin-left: 8px; font-weight: 400; color: rgba(255,255,255,.7); }
  .plan-col:focus-within .pc-rec-t { margin-bottom: 8px; }
  .plan-col:focus-within .pc-rec-t::after { content: "−"; }
}
/* 帯の一言: 「企業価値10億円」を白・太字・細い下線で強調（色は増やさない） */
.hero-v2 .hero-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; color: #fff; }
.hero-eyebrow .hl { font-style: normal; }
@media (max-width: 768px) { .hero-v2 .hero-eyebrow { font-size: 13.5px; letter-spacing: 0.08em; } }
.founder-more { margin-top: 36px; }
#founder .ed-fig { max-width: 200px; margin-top: 28px; }
/* 創業者の節: 本文の右に写真 */
.founder-body { display: flex; gap: 40px; align-items: flex-start; }
.founder-text { flex: 1 1 auto; min-width: 0; }
.founder-fig { flex: 0 0 200px; margin: 6px 0 0; }
.founder-fig img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 24px 48px rgba(1, 34, 106, 0.14); }
@media (max-width: 768px) { .founder-body { flex-direction: column; gap: 24px; } .founder-fig { flex-basis: auto; width: 180px; } }

/* ---- サービスのメニューの下段：料金 ---- */
.global-nav .sub-nav .sn-foot { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.global-nav .sub-nav .sn-foot a { display: block; padding: 12px 20px; font-size: 13.5px; font-weight: 700; color: var(--navy); text-align: center; }
@media (max-width: 768px) { .global-nav .sub-nav .sn-foot { border-top: 0; margin: 0; padding: 0; } .global-nav .sub-nav .sn-foot a { text-align: left; padding: 9px 4px; font-size: 14.5px; font-weight: 500; color: var(--muted); } }
/* ---- スマホのメニュー：ヘッダーのぼかしが fixed の基準になって、開いたメニューが途中で切れる不具合を直す ---- */
@media (max-width: 768px) {
  .site-header, html.js .site-header.over-hero, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .global-nav.open { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.nav-open { overflow: hidden; }
}

/* ---- スマホの固定ボタン：白い帯をやめ、ボタンだけを浮かせる ---- */
@media (max-width: 768px) {
  .sticky-cta { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; background: none; border: 0; padding: 0; transition: transform .35s var(--ease), opacity .3s var(--ease); }
  .sticky-cta .btn { display: block; width: 100%; padding: 15px 18px; border-radius: 999px; font-size: 15.5px; letter-spacing: 0.03em; box-shadow: 0 16px 36px rgba(1, 21, 64, 0.38), 0 2px 6px rgba(1, 21, 64, 0.2); border-color: var(--navy); }
  .sticky-cta .btn small { font-size: 12.5px; font-weight: 500; margin-left: 4px; opacity: .9; }
  .sticky-cta .sticky-sub { display: none; }
  .sticky-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
  body.has-sticky-cta { padding-bottom: 92px; }
  body.has-sticky-cta .site-footer { padding-bottom: 60px; }
}

/* ---- スマホ：帯の上（ヘッダー透明）でメニューを開いたとき、白いパネルの上で文字が白くならないように ---- */
@media (max-width: 768px) {
  html.js .site-header.over-hero .global-nav.open > ul > li > a:not(.btn), html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav.open > ul > li > a:not(.btn) { color: var(--ink); }
  html.js .site-header.over-hero .global-nav.open > ul > li > a:not(.btn)::before, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav.open > ul > li > a:not(.btn)::before { background: var(--navy); }
  html.js .site-header.over-hero .global-nav.open .nav-cta .btn, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav.open .nav-cta .btn { background: var(--navy); color: #fff; border-color: var(--navy); }
  html.js .site-header.over-hero .global-nav.open .nav-login a, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header .global-nav.open .nav-login a { color: var(--navy); }
  html.js .site-header.over-hero:has(.global-nav.open), html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header:has(.global-nav.open) { background: #fff; }
  html.js .site-header.over-hero:has(.global-nav.open) .brand img, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header:has(.global-nav.open) .brand img { filter: none; }
  html.js .site-header.over-hero:has(.global-nav.open) .nav-toggle span, html.js:not(.hd-ready) body:has(> main > .hero:first-child) .site-header:has(.global-nav.open) .nav-toggle span { background: var(--navy); }
}

/* ---- スマホのメニュー：紺の全面パネル。大きな項目・番号・下に2つのボタン ---- */
@media (max-width: 768px) {
  @keyframes mnavIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .global-nav { background: linear-gradient(160deg, #0B357F 0%, #01226A 45%, #011540 100%); padding: 104px 28px 40px; display: flex; flex-direction: column; }
  .global-nav.open { overflow-y: auto; }
  .global-nav > ul { gap: 0; counter-reset: mnav; flex: 1 1 auto; }
  .global-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); opacity: 0; }
  .global-nav.open > ul > li { animation: mnavIn .5s var(--ease) both; }
  .global-nav.open > ul > li:nth-child(1) { animation-delay: .05s; } .global-nav.open > ul > li:nth-child(2) { animation-delay: .1s; }
  .global-nav.open > ul > li:nth-child(3) { animation-delay: .15s; } .global-nav.open > ul > li:nth-child(4) { animation-delay: .2s; }
  .global-nav.open > ul > li:nth-child(5) { animation-delay: .25s; } .global-nav.open > ul > li:nth-child(6) { animation-delay: .3s; }
  .global-nav > ul > li > a:not(.btn) { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 18px 0; font-size: 22px; font-weight: 700; letter-spacing: 0.03em; color: #fff !important; }
  .global-nav > ul > li > a:not(.btn)::before { content: counter(mnav, decimal-leading-zero); counter-increment: mnav; position: static; width: auto; height: auto; transform: none; background: none; font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); }
  .global-nav .has-sub > a::after { display: none; }
  .global-nav .sub-nav { margin: 0 0 18px; padding: 6px 0 2px 32px; }
  .global-nav .sub-nav li { border: 0; }
  .global-nav .sub-nav a { padding: 9px 0; }
  .global-nav .sub-nav strong { color: rgba(255, 255, 255, 0.85) !important; font-size: 15.5px; font-weight: 500; }
  .global-nav .sub-nav .sn-foot a { color: rgba(255, 255, 255, 0.7); font-size: 13.5px; padding-top: 12px; }
  .global-nav .sub-nav .sn-foot { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 6px; }
  /* ログインと会員登録は一番下に横並び */
  .global-nav li.nav-login, .global-nav li.nav-cta { border: 0; margin: 0; }
  .global-nav li.nav-login { margin-top: auto; padding-top: 28px; }
  .global-nav li.nav-login a { display: block; text-align: center; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 3px; font-size: 15.5px !important; font-weight: 600 !important; color: #fff !important; }
  .global-nav li.nav-login a::before { display: none; }
  .global-nav li.nav-cta { margin-top: 10px; }
  .global-nav li.nav-cta .btn { width: 100%; padding: 16px; font-size: 15.5px; background: #fff !important; color: var(--navy) !important; border-color: #fff !important; }
  /* 開いている間、ヘッダーは透明・ロゴと×は白 */
  html.js .site-header:has(.global-nav.open), .site-header:has(.global-nav.open) { background: transparent !important; }
  .site-header:has(.global-nav.open) .brand { position: relative; z-index: 121; }
  .site-header:has(.global-nav.open) .brand img { filter: brightness(0) invert(1) !important; }
  .site-header:has(.global-nav.open) .nav-toggle span { background: #fff !important; }
}
@media (max-width: 768px) {
  .global-nav { padding-top: 92px; }
  .global-nav > ul > li > a:not(.btn) { padding: 15px 0; font-size: 21px; }
  .global-nav > ul > li > a:not(.btn)::before { background: transparent !important; }
  .global-nav .sub-nav, .global-nav .has-sub:hover .sub-nav, .global-nav .has-sub:focus-within .sub-nav { background: transparent !important; box-shadow: none !important; border: 0 !important; }
  .global-nav .sub-nav a:hover { background: transparent; }
  .global-nav .sub-nav { margin-bottom: 12px; padding-top: 2px; }
  .global-nav .sub-nav a { padding: 7px 0; }
  .global-nav li.nav-login a { display: block !important; text-align: center; }
  .global-nav li.nav-login { padding-top: 20px; }
}
body.is-member .js-guest-only { display: none; }
/* 人材カードの「表示例」の印 */
.role-card { position: relative; }
.rc-sample { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--navy); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.hero-note { font-size: 13px; color: rgba(255, 255, 255, 0.78); margin-top: 14px; max-width: 560px; }
/* 人材カードの絵: 高さをそろえて中央に */
.role-card .rc-fig { align-items: center; min-height: 118px; }
.role-card .rc-art { width: auto; height: 84px; max-width: 118px; object-fit: contain; flex: 0 0 auto; }
.rc-sample { display: none; }
/* 診断の流れ: 5段の矢印つき */
.model-steps.cols5.flow { gap: 28px; }
.model-steps.flow li { padding-right: 8px; }
.model-steps.flow .ms-en { font-size: 11px; letter-spacing: 0.2em; color: var(--navy); }
@media (min-width: 901px) { .model-steps.cols5.flow li:not(:last-child)::after { right: -19px; } }
@media (max-width: 900px) { .model-steps.cols5.flow { grid-template-columns: 1fr; gap: 26px; } .model-steps.flow li:not(:last-child)::after { top: auto; bottom: -18px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); } }
/* 推移グラフの見本（会員サイトと同じ描き方） */
.trend .axl { stroke: #C9D1DE; stroke-width: 1; }
.trend .ax.dim { fill: #9AA3B5; }
.trend .dot { fill: #fff; stroke: var(--navy); stroke-width: 2.5; }
.trend .vl { font-size: 12px; font-weight: 700; fill: var(--navy); }
.trend .ax { font-size: 10.5px; fill: #5F6983; }
/* 比較表のACEはロゴで（紺の見出し行なので白抜き） */
.cmp-logo { height: 15px; width: auto; display: inline-block; vertical-align: middle; filter: brightness(0) invert(1); }
/* ログインの下に開くメニュー（法人会員／経営人材で入口を分ける。サービスのメニューと同じ作り） */
.global-nav .sub-nav.login-menu { width: 320px; left: auto; right: -20px; transform: translate(0, 10px); }
.global-nav .has-sub:hover .sub-nav.login-menu, .global-nav .has-sub:focus-within .sub-nav.login-menu { transform: translate(0, 0); }
.global-nav .has-sub.sub-closed .sub-nav.login-menu { transform: translate(0, 10px); }
@media (max-width: 900px) {
  /* スマホのメニューでは「ログイン」の見出しを出さず、2つの入口をボタンとして並べる */
  .global-nav li.nav-login > a { display: none !important; }
  .global-nav .nav-login .sub-nav.login-menu { width: auto; right: auto; transform: none; padding: 0; display: grid; gap: 10px; background: none; border: 0; box-shadow: none; }
  .global-nav .nav-login .sub-nav.login-menu li { border: 0; }
  .global-nav .nav-login .sub-nav.login-menu a { display: block !important; }
  .global-nav .nav-login .sub-nav.login-menu strong { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
  .global-nav .nav-login .sub-nav.login-menu .sn-ic, .global-nav .nav-login .sub-nav.login-menu .sn-en, .global-nav .nav-login .sub-nav.login-menu .sn-desc { display: none; }
}

/* 帯のあるページは、読み込み直後から透明のヘッダーで描く（JSが付ける over-hero を待つと、白→透明の切り替えで一瞬黒く見えるため。2026-10-08） */

/* 診断のあとの流れ：会員画面の実物の画像（2026-10-08） */
.flow-shots { display: grid; gap: 56px; }
.fs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; align-items: center; }
.fs-no { font-family: var(--font-en, Montserrat, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.fs-text h3 { font-size: 22px; color: var(--navy); margin-bottom: 10px; }
.fs-text p:last-child { color: var(--muted); font-size: 15px; line-height: 1.9; }
.fs-fig { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(1, 34, 106, .10); }
.fs-fig img { display: block; width: 100%; height: auto; }
.fs-fig.tall { max-height: 560px; }
.fs-fig.tall img { object-fit: cover; object-position: top; }
@media (max-width: 860px) { .fs-row { grid-template-columns: 1fr; gap: 18px; } .flow-shots { gap: 40px; } }
.ev-photos { max-width: 960px; margin: 0 auto 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ev-photo { margin: 0; }
.ev-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.ev-photo figcaption { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 8px; }
.ev-photos.one { grid-template-columns: 1fr; max-width: 720px; }
.ev-cap { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .ev-photos { grid-template-columns: 1fr; } }

/* サービスページ：機能を選ぶと、その画面が右に出る（2026-10-08） */
.feat-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.feat-head .sec-title { margin-bottom: 16px; }
.feat-head .lead { font-size: 15.5px; color: var(--muted); margin: 0; }
.feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.feat-tabs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feat-tabs button { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.feat-tabs button:hover { background: rgba(255, 255, 255, .7); }
.feat-tabs button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.feat-tabs button[aria-selected="true"] { background: #fff; border-color: var(--line); box-shadow: 0 12px 28px rgba(1, 34, 106, .08); }
.feat-tabs button[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--navy); }
.ft-no { font-family: var(--font-en); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--muted); padding-top: 4px; }
.feat-tabs button[aria-selected="true"] .ft-no { color: var(--navy); }
.ft-t b { display: block; font-size: 16.5px; color: var(--navy); line-height: 1.6; }
.ft-t span { display: none; font-size: 13.5px; line-height: 1.85; color: var(--muted); margin-top: 6px; }
.feat-tabs button[aria-selected="true"] .ft-t span { display: block; }
.feat-view { position: sticky; top: 100px; }
.feat-win { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(1, 34, 106, .14); }
.feat-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F7F8FB; border-bottom: 1px solid var(--line); }
.feat-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DCE8; }
.feat-bar span { margin-left: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.feat-shot { display: flex; flex-direction: column; height: clamp(300px, 34vw, 470px); overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: #F2F4F8; animation: featIn .35s ease; }
.feat-shot[hidden] { display: none; }
.feat-shot img { display: block; width: 100%; height: auto; margin: auto 0; border-radius: 8px; box-shadow: 0 1px 0 rgba(1, 34, 106, .06), 0 6px 18px rgba(1, 34, 106, .06); }
.feat-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
@keyframes featIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feat-desc { display: none; }
@media (max-width: 900px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feat-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter, 20px) * -1); padding: 2px var(--gutter, 20px); }
  .feat-tabs::-webkit-scrollbar { display: none; }
  .feat-tabs button { display: block; width: auto; white-space: nowrap; padding: 9px 16px; border-radius: 999px; border-color: var(--line); background: #fff; }
  .feat-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); box-shadow: none; }
  .feat-tabs button[aria-selected="true"]::before, .ft-no, .ft-t span, .feat-tabs button[aria-selected="true"] .ft-t span { display: none; }
  .ft-t b { font-size: 14px; }
  .feat-tabs button[aria-selected="true"] .ft-t b { color: #fff; }
  .feat-view { position: static; }
  .feat-desc { display: block; margin: 0 0 12px; font-size: 14px; line-height: 1.85; color: var(--muted); }
  .feat-shot { height: clamp(240px, 70vw, 380px); padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .feat-shot { animation: none; } }