@charset "UTF-8";
/* =========================================================
   株式会社スカイアップ LP 共通スタイル
   - 色はすべて :root の変数で管理（ブランドカラー確定後はここだけ差し替え）
   - モバイルファースト（min-width で PC 向けを上書き）
   ========================================================= */

/* ---------- 1. デザイントークン ---------- */
:root {
  /* ▼ ブランドカラー（仮）: ここを差し替える */
  --color-primary: #0b649f;        /* メイン（ロゴの空色に合わせた青） */
  --color-primary-700: #0a5a8f;    /* リンク等の文字色 */
  --color-primary-050: #eaf5fc;    /* メインのごく薄い背景 */
  --color-brand-sky: #0081bb;      /* ロゴ背景の空色（装飾用。白文字は不可） */
  --hero-gradient: linear-gradient(160deg, #0b649f 0%, #0a6fae 100%);
  --color-accent-on-dark: #fff0d1; /* 青背景の上の小さな強調文字 */
  --color-accent: #f0a81c;         /* アクセント（CTA・強調） */
  --color-accent-hover: #ffbd3d;
  --color-on-accent: #0a2f4d;      /* アクセント上の文字色 */
  --color-accent-ink: #8a5800;     /* 白背景上でアクセント色の文字を使う場合 */

  /* ▼ ニュートラル */
  --color-bg: #ffffff;
  --color-bg-alt: #f2f8fc;
  --color-text: #17202e;
  --color-text-muted: #4b5668;
  --color-line: #d6dee8;
  --color-on-primary: #ffffff;
  --color-on-primary-muted: #e3f0f9;
  --color-grid: rgba(255, 255, 255, 0.06); /* 紺背景の方眼 */
  --color-grid-light: rgba(10, 61, 98, 0.05);

  /* ▼ 文字 */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ▼ 寸法 */
  --container: 1120px;
  --gutter: 20px;
  --radius: 4px;
  --header-h: 60px;
  --section-y: 72px;
}

/* ---------- 2. ベース ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.45; font-feature-settings: "palt"; letter-spacing: 0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: var(--color-primary-700); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
address { font-style: normal; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 8px 14px; font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }
/* 日本語の改行位置を整える: 塊ごとに折り返す */
.kw { display: inline-block; }
.mono { font-family: var(--font-mono); }
.only-pc { display: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------- 3. ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; line-height: 1.4; text-decoration: none; text-align: center;
  transition: background-color .15s, transform .15s;
}
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: var(--color-accent-hover); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-lg { min-height: 60px; padding: 16px 32px; font-size: 1.0625rem; width: 100%; max-width: 420px; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: .875rem; }
.btn-arrow::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* ---------- 4. ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--header-h);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto;
  height: var(--header-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--color-primary); text-decoration: none; font-weight: 700; margin-right: auto; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-sub { display: none; font-size: .75rem; color: var(--color-text-muted); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.footer-logo { height: 24px; width: auto; margin-bottom: 12px; }
.brand-text { font-size: .875rem; letter-spacing: .02em; white-space: nowrap; }
.header-cta { white-space: nowrap; }
.menu-btn {
  width: 44px; height: 44px; margin-right: -8px; padding: 0; flex: none;
  background: none; border: 0; color: var(--color-primary); cursor: pointer;
  display: grid; place-items: center;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .2s, background-color .2s;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -7px; }
.menu-bars::after { top: 7px; }
.is-open .menu-bars { background: transparent; }
.is-open .menu-bars::before { transform: translateY(7px) rotate(45deg); }
.is-open .menu-bars::after { transform: translateY(-7px) rotate(-45deg); }
.gnav {
  display: none;
  position: absolute; left: 0; right: 0; top: var(--header-h);
  background: var(--color-bg); border-bottom: 1px solid var(--color-line);
  box-shadow: 0 12px 24px rgba(10, 61, 98, .08);
}
.is-open .gnav { display: block; }
.gnav ul { list-style: none; padding: 8px var(--gutter) 16px; }
.gnav a {
  display: block; padding: 14px 4px; border-bottom: 1px solid var(--color-line);
  color: var(--color-text); text-decoration: none; font-weight: 700;
}

/* ---------- 5. 見出し・共通パーツ ---------- */
.section-head { margin-bottom: 40px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .12em;
  color: var(--color-primary-700); margin-bottom: 12px;
}
.eyebrow::after { content: ""; flex: 0 0 40px; height: 1px; background: currentColor; }
.section-dark .eyebrow { color: var(--color-accent-on-dark); }
.section-title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem); color: var(--color-primary); }
.section-dark .section-title { color: var(--color-on-primary); }
.section-lead { margin-top: 16px; color: var(--color-text-muted); max-width: 46em; }
.section-dark .section-lead { color: var(--color-on-primary-muted); }
.note { margin-top: 20px; font-size: .8125rem; color: var(--color-text-muted); }
.todo { /* 【要記入】の目印。公開前にすべて差し替えること */
  display: inline; background: #fff4d6; color: #6b4500; padding: 0 .25em; border-radius: 2px; font-weight: 700;
}
.section-dark .todo { background: #4a3a10; color: #ffe2a3; }

/* 図面風のコーナーマーク付きカード */
.card {
  position: relative; background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 24px 20px;
}
.card::before, .card::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--color-primary); border-style: solid;
}
.card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.card-title { font-size: 1.125rem; color: var(--color-primary); }
.card-text { margin-top: 8px; color: var(--color-text-muted); font-size: .9375rem; }
.card-id { font-family: var(--font-mono); font-size: .75rem; color: var(--color-text-muted); letter-spacing: .1em; margin-bottom: 6px; display: block; }

.grid { display: grid; gap: 16px; list-style: none; }

/* 画像差し替え枠 */
.ph-frame {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 3 / 2; width: 100%;
  border: 1px dashed #9aa8ba; border-radius: var(--radius);
  background:
    linear-gradient(var(--color-grid-light) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--color-grid-light) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--color-primary-050);
  color: var(--color-text-muted); font-size: .8125rem; padding: 16px;
}
.ph-frame .mono { display: block; font-size: .75rem; letter-spacing: .08em; }

/* タグ */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tag {
  display: inline-block; padding: 4px 12px; border: 1px solid currentColor; border-radius: 2px;
  font-size: .8125rem; font-weight: 700; line-height: 1.6;
}

/* ---------- 6. ヒーロー ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--hero-gradient);
  color: var(--color-on-primary);
  padding: 48px 0 56px;
}
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--color-accent-on-dark); margin-bottom: 16px; }
.hero-title { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 3rem); line-height: 1.4; letter-spacing: .03em; }
.hero-lead { margin-top: 20px; color: var(--color-on-primary-muted); font-size: 1rem; max-width: 34em; }
.hero .tags { margin-top: 24px; color: var(--color-on-primary); }
.hero .tag { border-color: rgba(255, 255, 255, .4); font-weight: 600; }
.hero-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.hero-cta-note { font-size: .8125rem; color: var(--color-on-primary-muted); }
.hero-visual { max-width: 420px; width: 100%; margin: 0 auto; }
.hero-visual svg { display: block; width: 100%; height: auto; }

/* 回路図風ダイアグラム */
.dg-trace { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.dg-via { fill: var(--color-accent); }
.dg-node { fill: var(--color-primary); stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.dg-core { fill: var(--color-accent); }
.dg-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-label { fill: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; }
.dg-sub { fill: var(--color-on-primary-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; }
.dg-core-text { fill: var(--color-on-accent); font-family: var(--font-sans); font-size: 13px; font-weight: 700; }

/* ---------- 7. 課題 ---------- */
.problems .grid { grid-template-columns: 1fr; }
.problem-card .card-title { display: flex; gap: 10px; align-items: baseline; }

/* ---------- 8. 選ばれる理由 ---------- */
.reasons-list { display: grid; gap: 56px; counter-reset: reason; list-style: none; }
.reason { display: grid; gap: 24px; align-items: center; }
.reason-num { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--color-accent-ink); }
.reason-title { margin-top: 6px; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); color: var(--color-primary); }
.reason-text { margin-top: 12px; color: var(--color-text-muted); }
.reason-points { margin-top: 16px; list-style: none; display: grid; gap: 8px; }
.reason-points li { position: relative; padding-left: 20px; }
.reason-points li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; background: var(--color-accent); }
.reason-figure { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 20px; }
.reason-figure figcaption { margin-top: 12px; font-size: .75rem; color: var(--color-text-muted); }

/* 4領域グリッド */
.domains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.domain {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 14px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg);
}
.domain svg { width: 40px; height: 40px; color: var(--color-primary); }
.domain-name { font-weight: 700; color: var(--color-primary); line-height: 1.5; font-size: .9375rem; }
.domain-code { font-family: var(--font-mono); font-size: .6875rem; color: var(--color-text-muted); letter-spacing: .08em; }
.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 因数分解の概念図 */
.tree { display: grid; gap: 8px; }
.tree-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; }
.tree-label { font-size: .75rem; font-weight: 700; color: var(--color-text-muted); text-align: right; }
.tree-nodes { display: flex; gap: 6px; }
.tree-node { flex: 1; height: 28px; border: 1px solid var(--color-primary-700); border-radius: 2px; background: var(--color-primary-050); }
.tree-row:first-child .tree-node { background: var(--color-primary); }
.tree-row:last-child .tree-node { background: var(--color-accent); border-color: var(--color-accent); height: 20px; }
.tree-arrow { margin-left: 100px; height: 14px; border-left: 1px dashed var(--color-text-muted); }

/* 工程フロー */
.process { list-style: none; display: grid; gap: 0; counter-reset: p; }
.process li {
  position: relative; padding: 10px 12px 10px 44px; font-weight: 700; color: var(--color-primary);
  border-left: 2px solid var(--color-primary); margin-left: 14px;
}
.process li::before {
  counter-increment: p; content: counter(p, decimal-leading-zero);
  position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--color-bg); border: 2px solid var(--color-primary); border-radius: 50%;
  font-family: var(--font-mono); font-size: .6875rem;
}
.process-note { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--color-accent-ink); color: var(--color-accent-ink); font-size: .8125rem; font-weight: 700; border-radius: var(--radius); }

/* ---------- 9. 実績 ---------- */
.stats { display: grid; gap: 1px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .18); list-style: none; }
.stat { background: var(--color-primary); padding: 24px 20px; }
.stat-label { font-size: .875rem; color: var(--color-on-primary-muted); }
.stat-value { margin-top: 4px; font-family: var(--font-mono); font-weight: 600; font-size: 2.5rem; line-height: 1.2; color: var(--color-on-primary); }
.stat-value small { font-family: var(--font-sans); font-size: 1rem; margin-left: 4px; font-weight: 700; }
.stat-prefix { font-family: var(--font-sans); font-size: 1rem; margin-right: 4px; font-weight: 700; }
.results-sub { margin-top: 48px; font-size: 1.125rem; }
.industries { margin-top: 16px; }
.industries .tag { border-color: rgba(255, 255, 255, .35); font-weight: 600; }
.case {
  margin-top: 48px; padding: 24px 20px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius);
  display: grid; gap: 12px;
}
.case-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--color-accent-on-dark); }
.case-title { font-size: 1.25rem; }
.case-text { color: var(--color-on-primary-muted); }
.section-dark .note { color: var(--color-on-primary-muted); }

/* ---------- 10. サービス ---------- */
.services .grid { grid-template-columns: 1fr; }
.service-card { padding: 28px 20px; }
.service-list { margin-top: 16px; list-style: none; display: grid; gap: 0; }
.service-list li { padding: 10px 0 10px 18px; border-top: 1px solid var(--color-line); position: relative; font-size: .9375rem; }
.service-list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 2px; background: var(--color-primary); }
.service-list .is-key { font-weight: 700; color: var(--color-primary); }
.badge {
  display: inline-block; margin-left: 6px; padding: 0 8px; font-size: .6875rem; font-weight: 700; line-height: 1.8; vertical-align: 1px;
  background: var(--color-accent); color: var(--color-on-accent); border-radius: 2px;
}

/* ---------- 11. 導入の流れ ---------- */
.steps { list-style: none; display: grid; gap: 12px; counter-reset: step; }
.step { position: relative; padding: 20px 20px 20px 72px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: "STEP" counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; bottom: 0; width: 56px;
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; line-height: 1.3; letter-spacing: .04em;
  background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius) 0 0 var(--radius);
  padding: 0 6px; word-break: break-all;
}
.step-title { font-size: 1.0625rem; color: var(--color-primary); }
.step-text { margin-top: 4px; font-size: .875rem; color: var(--color-text-muted); }

/* ---------- 12. 料金 ---------- */
.plans { display: grid; gap: 20px; }
.plan { padding: 32px 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.plan.is-recommended { border: 2px solid var(--color-primary); }
.plan-badge {
  position: absolute; top: -14px; left: 20px;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: .8125rem; font-weight: 700; padding: 2px 12px; border-radius: 2px;
}
.plan-type { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--color-text-muted); }
.plan-name { font-size: 1.375rem; color: var(--color-primary); }
.plan-model { font-weight: 700; }
.plan-price { padding: 12px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); font-size: 1.125rem; font-weight: 700; color: var(--color-primary); }
.plan-for { font-size: .9375rem; color: var(--color-text-muted); }
.plan-for strong { color: var(--color-text); }

/* ---------- 13. FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 52px 18px 52px; font-weight: 700; color: var(--color-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q"; position: absolute; left: 18px; top: 16px; font-family: var(--font-mono); font-weight: 600; color: var(--color-accent-ink); font-size: 1.125rem; }
.faq-item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-answer { position: relative; padding: 0 20px 20px 52px; color: var(--color-text-muted); }
.faq-answer::before { content: "A"; position: absolute; left: 18px; top: -2px; font-family: var(--font-mono); font-weight: 600; color: var(--color-primary-700); font-size: 1.125rem; }

/* ---------- 14. CTA・フォーム ---------- */
.cta-section .section-head { text-align: left; }
.form-wrap { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius); padding: 8px; }
.form-iframe { display: block; width: 100%; border: 0; }
.form-pending { padding: 40px 20px; text-align: center; border: 1px dashed var(--color-line); border-radius: var(--radius); }
.form-pending-title { font-weight: 700; font-size: 1.125rem; color: var(--color-primary); margin-bottom: 8px; }
.form-privacy { margin-top: 16px; font-size: .875rem; }
.section-dark .form-privacy a { color: #fff; }
.cta-points { margin-top: 20px; list-style: none; display: grid; gap: 8px; }
.cta-points li { position: relative; padding-left: 26px; }
.cta-points li::before {
  content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px;
  border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg);
}

/* スマホ追従CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 100, 159, .97);
  transform: translateY(110%); transition: transform .25s;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* ---------- 15. フッター ---------- */
.site-footer { background: #08527f; color: var(--color-on-primary-muted); padding: 48px 0 24px; font-size: .875rem; }
body:has(.sticky-cta) .site-footer { padding-bottom: calc(24px + 80px); }
.footer-inner { display: grid; gap: 32px; }
.corp-banner { display: block; margin-bottom: 48px; border-radius: var(--radius); overflow: hidden; background: #fff; text-decoration: none; }
.corp-banner img { width: 100%; height: auto; }
.corp-banner-text { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 16px; color: var(--color-primary) !important; font-weight: 700; font-size: .9375rem; }
.corp-banner-text::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.corp-banner:hover .corp-banner-text { text-decoration: underline; }
.footer-name { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.site-footer a { color: #fff; }
.footer-nav ul { list-style: none; display: grid; gap: 10px; }
.copyright { text-align: center; margin-top: 40px; color: var(--color-on-primary-muted); }

/* ---------- 16. 下層ページ（thanks / privacy） ---------- */
.page-hero {
  background:
    linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--hero-gradient);
  color: var(--color-on-primary); padding: 48px 0;
}
.page-hero .eyebrow { color: var(--color-accent-on-dark); }
.page-title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.prose { max-width: 820px; }
.prose h2 { font-size: 1.25rem; color: var(--color-primary); margin-top: 48px; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose dl { margin-top: 16px; }
.prose dl { display: grid; grid-template-columns: 7em 1fr; gap: 8px 16px; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; }
.prose ul { padding-left: 1.5em; }
.prose li + li { margin-top: 6px; }
.thanks-box { max-width: 720px; text-align: center; margin: 0 auto; }
.thanks-box .btns { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.thanks-icon { width: 64px; height: 64px; margin: 0 auto 24px; color: var(--color-primary); }

/* ---------- 17. パートナーページ固有 ---------- */
.photo-band { position: relative; margin: 0; height: 180px; overflow: hidden; background: var(--color-primary); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; }
.photo-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,111,174,.45) 0%, rgba(10,111,174,0) 25%, rgba(255,255,255,0) 86%, rgba(255,255,255,1) 100%); }
@media (min-width: 1024px) { .photo-band { height: 300px; } }
.target-list { display: grid; gap: 16px; grid-template-columns: 1fr; list-style: none; }
.style-table { width: 100%; border-collapse: collapse; background: var(--color-bg); }
.style-table th, .style-table td { padding: 16px; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.style-table th { width: 32%; background: var(--color-primary-050); color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.project-grid { display: grid; gap: 16px; grid-template-columns: 1fr; list-style: none; }
.target-list, .domains, .steps, .plans { list-style: none; }
.project-card .ph-line { height: 10px; background: var(--color-primary-050); border-radius: 2px; margin-top: 10px; }
.project-card .ph-line:nth-child(odd) { width: 70%; }

/* =========================================================
   タブレット以上
   ========================================================= */
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .problems .grid { grid-template-columns: repeat(2, 1fr); }
  .services .grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .domains { grid-template-columns: repeat(4, 1fr); }
  .reason-figure .domains { grid-template-columns: repeat(2, 1fr); }
  .target-list { grid-template-columns: repeat(3, 1fr); }
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-cta { flex-direction: row; align-items: center; gap: 20px; }
  .btn-lg { width: auto; }
  .thanks-box .btns { flex-direction: row; justify-content: center; }
}

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 1024px) {
  :root { --header-h: 72px; --section-y: 112px; --gutter: 32px; }
  .only-pc { display: inline; }
  .only-sp { display: none; }
  .menu-btn { display: none; }
  .gnav { display: block; position: static; background: none; border: 0; box-shadow: none; }
  .gnav ul { display: flex; gap: 4px; padding: 0; }
  .gnav a { border: 0; padding: 8px 10px; font-size: .875rem; color: var(--color-text); }
  .gnav a:hover { color: var(--color-primary-700); text-decoration: underline; }
  .brand-logo { height: 26px; }
  .brand-sub { display: inline; padding-left: 12px; border-left: 1px solid var(--color-line); }
  .header-cta { margin-left: 8px; }

  .hero { padding: 96px 0 104px; }
  .hero-inner { grid-template-columns: 1.15fr .85fr; gap: 56px; }
  .hero-visual { max-width: 460px; }

  .section-head { margin-bottom: 56px; }
  .problems .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .card { padding: 28px 24px; }

  .reason { grid-template-columns: 1fr 1fr; gap: 56px; }
  .reason:nth-child(even) .reason-body { order: 2; }
  .reasons-list { gap: 88px; }

  .services .grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { padding: 64px 20px 24px; }
  .step::before { right: 0; bottom: auto; width: auto; height: 40px; border-radius: var(--radius) var(--radius) 0 0; }
  .plans { grid-template-columns: 1fr 1fr; gap: 32px; }
  .case { grid-template-columns: 220px 1fr; align-items: start; padding: 32px; }
  .case-label { grid-row: span 2; }

  .cta-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
  .sticky-cta { display: none; }
  body:has(.sticky-cta) .site-footer { padding-bottom: 24px; }
  .footer-inner { grid-template-columns: 1fr auto; }
}