@charset "utf-8";
/* ============================================================
   EV充電器LP ワイヤーフレーム 共通コンポーネント
   トンマナ：白・濃紺・グレー基調＋EVブルー/シアンをアクセント
   （04_design 設計前提に準拠。丸形カード多用・金色・過度な未来感は避ける）
   ============================================================ */
:root {
    --ink: #22303c;          /* 本文 */
    --sub: #5d6b75;          /* 補足 */
    --line: #c9d4db;         /* 罫線 */
    --line-soft: #dde5ea;
    --paper: #ffffff;
    --bg: #f4f7f9;           /* セクション交互背景 */
    --navy: #1e3a5f;         /* 見出し・濃紺 */
    --navy-deep: #152a43;    /* 最終CTA帯 */
    --ev: #00bf63;           /* EVブルー（アクセント） */
    --ev-soft: #e3f1f9;      /* アクセント淡 */
    --warn: #8a6d3b;         /* 注意（落ち着いた琥珀） */
    --ph-bg: #eef3f6;        /* プレースホルダ地 */
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; font-size: 16px; line-height: 1.8; }
h1, h2, h3, p, ul, ol, dl, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
strong { margin: 0; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.define_wrap { padding-right: 40px; padding-left: 40px; }
.define_inner { width: min(1160px, 100%); margin: 0 auto; }

@media screen and (min-width: 768px) { .sp { display: none !important; } }
@media screen and (max-width: 767px) { .pc { display: none !important; } }

/* ---------- ヘッダー ---------- */
.l-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); }
.l-header__inner { display: flex; min-height: 66px; align-items: center; gap: 28px; }
.l-header__logo { margin-right: auto; }
.l-header__nav { display: flex; gap: 22px; font-size: 13px; font-weight: 600; color: var(--navy); }
.l-header__nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.l-header__nav a:hover { border-bottom-color: var(--ev); }
.l-header__cta { padding: 10px 18px; border-radius: 4px; background: var(--ev); color: #fff; font-size: 13px; font-weight: 700; }

/* ---------- フッター ---------- */
.l-footer { border-top: 1px solid var(--line); background: var(--bg); }
.l-footer__inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 32px 0; color: var(--sub); font-size: 12px; }

/* ---------- セクション共通 ---------- */
.c-ws { position: relative; padding-top: 88px; padding-bottom: 96px; border-bottom: 1px solid var(--line-soft); }
.c-ws:nth-child(even) { background: var(--bg); }
/* コンテンツは12カラムグリッド。既定で10カラム中央（左右に1カラムずつグリッド余白） */
.c-ws__inner { min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
.c-ws__inner > * { grid-column: 2 / 12; }
.c-ws__head { margin-bottom: 40px; }
.c-eyebrow { margin-bottom: 10px; color: var(--ev); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.c-h2 { color: var(--navy); font-size: 30px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
.c-h2-sub { margin-top: 14px; color: var(--sub); font-size: 15px; }
.c-h2-sub em { color: var(--navy); font-weight: 700; }
.c-hero-ttl { color: var(--navy); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.35; letter-spacing: .02em; }
.c-hero-ttl em { color: var(--ev); }
.c-lead { margin-top: 18px; font-size: 15px; }
.c-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border: 1px solid var(--warn); border-radius: 3px; color: var(--warn); font-size: 13px; font-weight: 700; }
.c-ws p + p { margin-top: 14px; }

/* 2カラム基本骨格：親の12カラムをサブグリッドで継承し、整数カラムに分割（既定 6:4） */
.c-ws__cols { grid-column: 2 / 12; display: grid; grid-template-columns: subgrid; column-gap: 24px; align-items: center; min-width: 0; }
.c-ws__cols > .c-ws__copy { grid-column: span 6; }
.c-ws__cols > .c-ws__visual { grid-column: span 4; }
.c-ws__copy, .c-ws__visual { min-width: 0; }

/* ---------- ワイヤー注記（トグル対象） ---------- */
.c-tag { position: absolute; top: 14px; left: 40px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--navy); color: #fff; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.4; border-radius: 2px; }
.c-tag b { color: #86efac; font-size: 12px; }
.c-note { margin-top: 36px; padding: 12px 16px; border: 1px dashed #b08d3f; background: #fdf8ec; color: #7a6023; font-size: 12px; line-height: 1.6; }
body.is-notes-off .c-tag, body.is-notes-off .c-note, body.is-notes-off .c-ph b, body.is-notes-off .c-ph span { display: none !important; }

/* ---------- 画像プレースホルダ ---------- */
.c-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; border: 1px solid #a9bcc7; background: var(--ph-bg) repeating-linear-gradient(45deg, transparent 0 14px, rgba(137,160,173,.14) 14px 15px); color: #62788a; text-align: center; }
.c-ph .ic { width: 30px; height: 30px; opacity: .7; }
.c-ph b { font-size: 12px; letter-spacing: .1em; }
.c-ph span { font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.5; }
.c-ph--3x2 { aspect-ratio: 3 / 2; }
.c-ph--4x3 { aspect-ratio: 4 / 3; }
.c-ph--16x9 { aspect-ratio: 16 / 9; }
.c-ph--logo { display: inline-flex; flex-direction: row; gap: 6px; padding: 8px 14px; font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; }
.c-ph--logo .ic { width: 16px; height: 16px; }

/* ---------- セクション背景画像プレースホルダ ---------- */
.c-hero-body, .c-ws__body { min-width: 0; }
.c-ws--bgphoto { position: relative; isolation: isolate; }
.c-ws__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--ph-bg); background-image: repeating-linear-gradient(45deg, transparent 0 16px, rgba(137,160,173,.16) 16px 17px); }
.c-ws__bg span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: 90%; padding: 7px 15px; background: rgba(255,255,255,.72); border: 1px dashed #90a6b2; color: #566e7f; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.4; text-align: center; }
.c-ws__bg span .ic { width: 20px; height: 20px; flex: none; }
.c-ws__bg::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* FV：左→右の白グラデ（左コピー可読・右へ写真が透ける） */
.c-ws--hero.c-ws--bgphoto { min-height: 600px; }
.c-ws--hero .c-ws__bg { justify-content: flex-end; padding-right: 5%; }
.c-ws--hero .c-ws__bg::after { background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.62) 72%, rgba(255,255,255,.42) 100%); }
/* 悩み・適合性：薄い白ベール */
.c-ws--problem .c-ws__bg::after { background: rgba(244,247,249,.9); }
.c-ws--fit .c-ws__bg::after { background: rgba(244,247,249,.92); }

/* ---------- CTA ---------- */
.c-cta { margin-top: 32px; text-align: center; }
.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 320px; padding: 18px 32px; border-radius: 6px; background: var(--ev); box-shadow: 0 3px 0 0 #0a5f8a; color: #fff; font-size: 17px; font-weight: 700; }
.c-btn .ic { width: 18px; height: 18px; }
.c-btn--ghost { background: #fff; border: 2px solid var(--ev); box-shadow: none; color: var(--ev); }
.c-btn--onnavy { background: #fff; box-shadow: 0 3px 0 0 rgba(0,0,0,.35); color: var(--navy); }
.c-cta__micro { margin-top: 10px; color: var(--sub); font-size: 12px; }

/* ---------- チェックリスト／悩みリスト ---------- */
.c-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 600; }
.c-checklist .ic { margin-top: 4px; color: var(--ev); }
.c-checklist--hero { margin-top: 22px; padding: 14px 18px; border: 1px solid var(--line); background: #fff; }
.c-checklist--hero li { padding: 5px 0; font-size: 14px; }
.c-painlist li { display: flex; align-items: flex-start; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.c-painlist li:first-child { border-top: 1px solid var(--line); }
.c-painlist .ic { margin-top: 4px; margin-right: 14px; color: var(--ev); width: 22px; height: 22px; }
.c-painlist li strong { color: var(--navy); }
.c-painlist li.is-strong .ic { color: var(--ev); }

/* ---------- FV 3ステップフロー図 ---------- */
.c-flow3 { display: flex; align-items: stretch; gap: 6px; margin-top: 24px; }
.c-flow3__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--line); background: #fff; text-align: center; }
.c-flow3__item b { color: var(--navy); font-size: 14px; }
.c-flow3__item span { color: var(--sub); font-size: 11px; line-height: 1.5; }
.c-flow3__item .ic { width: 26px; height: 26px; color: var(--sub); }
.c-flow3__item.is-strong { border-color: var(--navy); }
.c-flow3__item.is-strong .ic { color: var(--navy); }
.c-flow3__item.is-accent { border-color: var(--ev); background: var(--ev-soft); }
.c-flow3__item.is-accent .ic, .c-flow3__item.is-accent b { color: var(--ev); }
.c-flow3__arrow { display: flex; align-items: center; color: var(--sub); }
.c-flow3__arrow .ic { width: 18px; height: 18px; }

/* ---------- 03 判断分岐図 ---------- */
.c-branch { padding: 24px; border: 1px solid var(--line); background: #fff; }
.c-branch__start { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(300px, 100%); margin: 0 auto 14px; padding: 12px; border: 1px solid var(--navy); color: var(--navy); font-size: 14px; font-weight: 700; text-align: center; }
.c-branch__paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; padding-top: 18px; }
.c-branch__paths::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 18px; border: 1px solid var(--line); border-bottom: 0; }
.c-branch__path { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); text-align: center; }
.c-branch__path > b { font-size: 14px; }
.c-branch__result { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; font-size: 12px; line-height: 1.6; }
.c-branch__path.is-dim { background: #f1f4f6; color: var(--sub); }
.c-branch__path.is-dim .c-branch__result { background: #fff; }
.c-branch__path.is-dim .ic { color: var(--warn); }
.c-branch__path.is-accent { border-color: var(--ev); }
.c-branch__path.is-accent > b { color: var(--ev); }
.c-branch__path.is-accent .c-branch__result { background: var(--ev-soft); color: var(--navy); font-weight: 700; }
.c-branch__path.is-accent .ic { color: var(--ev); }

/* ---------- 04 事業モデル図 ---------- */
.c-bizmodel { margin-top: 48px; padding: 28px; border: 1px solid var(--line); background: #fff; }
.c-bizmodel__ttl { margin-bottom: 20px; color: var(--navy); font-size: 15px; font-weight: 700; text-align: center; }
.c-bizmodel__flow { display: flex; align-items: stretch; justify-content: center; gap: 4px; }
.c-bizmodel__node { flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--line); background: var(--bg); text-align: center; }
.c-bizmodel__node .ic { width: 28px; height: 28px; color: var(--navy); }
.c-bizmodel__node b { color: var(--navy); font-size: 14px; }
.c-bizmodel__node span { color: var(--sub); font-size: 11px; }
.c-bizmodel__node.is-you { border-color: var(--ev); background: var(--ev-soft); }
.c-bizmodel__node.is-you .ic, .c-bizmodel__node.is-you b { color: var(--ev); }
.c-bizmodel__arr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; color: var(--sub); }
.c-bizmodel__arr i { font-style: normal; font-size: 10px; white-space: nowrap; }
.c-bizmodel__return { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 16px auto 0; padding: 10px 22px; border: 1px dashed var(--ev); border-radius: 40px; color: var(--navy); font-size: 13px; }
.c-bizmodel__return .ic { color: var(--ev); }
.c-bizmodel__return b { color: var(--ev); }
.c-bizmodel__note { margin-top: 14px; color: var(--sub); font-size: 12px; text-align: center; }

/* ---------- 05 判断基準カード ---------- */
.c-cards5 { display: grid; gap: 20px; }
.c-card { position: relative; padding: 24px 20px 20px; border: 1px solid var(--line); border-top: 3px solid var(--navy); background: #fff; }
.c-card__num { position: absolute; top: -1px; right: 14px; padding: 2px 10px 4px; background: var(--navy); color: #fff; font-style: normal; font-size: 15px; font-weight: 700; }
.c-card .ic { width: 30px; height: 30px; color: var(--ev); }
.c-card h3 { margin: 10px 0 8px; color: var(--navy); font-size: 16px; line-height: 1.5; }
.c-card p { color: var(--sub); font-size: 13px; }

/* ---------- 06 注意点 ---------- */
.c-risks { counter-reset: risk; display: grid; gap: 0; }
.c-risks li { display: flex; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.c-risks li:first-child { border-top: 1px solid var(--line); }
.c-risks li > i { flex: none; width: 44px; color: var(--sub); font-style: normal; font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; line-height: 1.3; }
.c-risks h3 { color: var(--navy); font-size: 17px; margin-bottom: 6px; }
.c-risks p { color: var(--ink); font-size: 14px; }
.c-reasons3 { margin-top: 36px; padding: 24px; border: 1px solid var(--line); background: #fff; }
.c-reasons3__ttl { margin-bottom: 14px; color: var(--navy); font-size: 15px; font-weight: 700; text-align: center; }
.c-reasons3 ul { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.c-reasons3 li { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--ev-soft); color: var(--navy); font-size: 14px; font-weight: 700; border-radius: 40px; }
.c-reasons3 .ic { color: var(--ev); }

/* ---------- ミニタイムライン（06③・09） ---------- */
.c-minitl { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 14px; padding: 14px 90px 14px 14px; border: 1px solid var(--line); background: var(--bg); font-size: 12px; }
.c-minitl span { flex: none; padding: 4px 10px; border: 1px solid var(--line); background: #fff; white-space: nowrap; }
.c-minitl i { flex: 1; min-width: 10px; height: 1px; background: var(--sub); }
.c-minitl b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 6px 10px; background: var(--navy); color: #fff; font-size: 12px; white-space: nowrap; }

/* ---------- 07 比較表 ---------- */
.c-tablewrap { overflow-x: auto; }
.c-tablewrap__hint { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--sub); font-size: 12px; }
.c-compare { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; font-size: 13px; }
.c-compare th, .c-compare td { padding: 14px 14px; border: 1px solid var(--line); text-align: left; vertical-align: middle; }
.c-compare thead th { background: var(--navy); color: #fff; font-size: 13px; }
.c-compare thead th .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.c-compare tbody th { width: 12.5em; white-space: nowrap; background: var(--bg); color: var(--navy); font-size: 13px; }
.c-compare .is-hl { background: var(--ev-soft); border-right: 2px solid var(--ev); border-left: 2px solid var(--ev); }
.c-compare thead .is-hl { background: var(--ev); border-color: var(--ev); }
.c-compare tbody tr:last-child .is-hl { border-bottom: 2px solid var(--ev); }
.c-mark { display: grid; place-items: center; width: 44px; height: 32px; margin: 0 auto; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(137,160,173,.25) 6px 7px); border: 1px dashed #a9bcc7; color: #62788a; font-family: ui-monospace, monospace; font-size: 10px; }
.c-compare td:nth-child(3), .c-compare td:nth-child(4) { text-align: center; }

/* ---------- 08 適合性 ---------- */
.c-fit { grid-column: 2 / 12; display: grid; grid-template-columns: subgrid; column-gap: 24px; }
.c-fit__panel { grid-column: span 5; }
.c-fit__panel { padding: 28px; border: 1px solid var(--line); background: #fff; }
.c-fit__panel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 18px; }
.c-fit__panel li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 14px; }
.c-fit__panel li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.c-fit__panel.is-yes { border-top: 3px solid var(--ev); }
.c-fit__panel.is-yes h3 { color: var(--ev); }
.c-fit__panel.is-yes li::before { background: var(--ev); }
.c-fit__panel.is-yes li { font-weight: 600; }
.c-fit__panel.is-no { border-top: 3px solid #9aa8b1; background: #f6f8f9; color: var(--sub); }
.c-fit__panel.is-no h3 { color: var(--sub); }
.c-fit__panel.is-no li::before { background: #9aa8b1; }
.c-fit__note { margin-top: 14px; font-size: 12px; }

/* ---------- 09 シミュレーションパネル ---------- */
.c-sim { padding: 24px; border: 1px solid var(--navy); background: #fff; }
.c-sim__ttl { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); color: var(--navy); font-size: 15px; font-weight: 700; }
.c-sim__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-kpi { padding: 14px; border: 1px solid var(--line); background: var(--bg); }
.c-kpi span { display: block; color: var(--sub); font-size: 11px; font-weight: 700; }
.c-kpi b { display: block; margin: 2px 0; color: var(--navy); font-size: 26px; line-height: 1.2; letter-spacing: .01em; }
.c-kpi b i { font-style: normal; font-size: 14px; margin-left: 2px; }
.c-kpi small { display: block; color: var(--sub); font-size: 10px; line-height: 1.5; }
.c-kpi.is-accent { border-color: var(--ev); background: var(--ev-soft); }
.c-kpi.is-accent b { color: var(--ev); }
.c-sim .c-minitl { margin-top: 12px; }
.c-sim__note { margin-top: 12px; color: var(--sub); font-size: 11px; line-height: 1.6; }

/* ---------- 10 業務分担図 ---------- */
.c-roles { display: grid; grid-template-columns: 5fr auto 7fr; gap: 20px; align-items: stretch; }
.c-roles__panel { padding: 24px; border: 1px solid var(--line); background: #fff; }
.c-roles__panel h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--navy); font-size: 16px; }
.c-roles__desc { margin-bottom: 12px; color: var(--ev); font-size: 13px; font-weight: 700; }
.c-roles__panel.is-you { border-top: 3px solid var(--navy); }
.c-roles__panel.is-you li { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; }
.c-roles__panel.is-you .ic { color: var(--ev); }
.c-roles__panel.is-partner { border-top: 3px solid var(--ev); }
.c-roles__divider { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ev); font-size: 12px; font-weight: 700; }
.c-roles__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.c-roles__chips li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 600; }
.c-roles__chips .ic { color: var(--ev); }

/* ---------- 11 市場データ ---------- */
.c-chartcard { padding: 24px; border: 1px solid var(--line); background: #fff; }
.c-chartcard__ttl { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--navy); font-size: 15px; font-weight: 700; }
.c-bars { display: flex; align-items: flex-end; justify-content: center; gap: 48px; height: 210px; padding: 0 12px 0; border-bottom: 2px solid var(--navy); background: repeating-linear-gradient(to top, transparent 0 51px, var(--line-soft) 51px 52px); }
.c-bars__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.c-bars__item b { color: var(--ev); font-size: 22px; line-height: 1.2; }
.c-bars__bar { width: 64px; height: var(--v); background: var(--ev); }
.c-bars__item span { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); color: var(--navy); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.4; white-space: nowrap; }
.c-bars__item span small { color: var(--sub); font-size: 10px; font-weight: 400; }
.c-bars__item.is-jp b { color: var(--sub); }
.c-bars__item.is-jp .c-bars__bar { background: #9ab4c4; }
.c-statline { display: flex; align-items: center; gap: 8px; margin-top: 56px; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; }
.c-statline .ic { color: var(--ev); }
.c-statline b { color: var(--navy); font-size: 16px; }
.c-statline small { color: var(--sub); }
.c-chartcard__note { margin-top: 12px; color: var(--sub); font-size: 11px; line-height: 1.6; }

/* ---------- 12 信頼グリッド ---------- */
.c-trustgrid { display: grid; gap: 20px; }
.c-trust { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 26px 16px 18px; border: 1px solid var(--line); border-top: 3px solid var(--ev); background: #fff; text-align: center; }
.c-trust .ic { width: 30px; height: 30px; margin-bottom: 6px; color: var(--ev); }
.c-trust b { color: var(--navy); font-size: 24px; line-height: 1.25; }
.c-trust b i { font-style: normal; font-size: 14px; }
.c-trust span { color: var(--ink); font-size: 13px; font-weight: 700; }
.c-trust small { margin-top: 6px; color: var(--sub); font-size: 10px; line-height: 1.5; }
.c-supportline { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 32px auto 0; padding: 12px 18px; border: 1px dashed var(--line); font-size: 13px; color: var(--navy); font-weight: 600; }
.c-supportline i { width: 28px; height: 1px; background: var(--sub); }
.c-supportline .is-accent { color: var(--ev); }

/* ---------- 13 導入フロー ---------- */
.c-steps { position: relative; }
.c-steps__group { display: none; }
.c-steps__list { counter-reset: step; display: grid; gap: 16px; }
.c-steps__list li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid var(--line); background: #fff; }
.c-steps__list li > i { color: var(--ev); font-style: normal; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.c-steps__list .ic { width: 26px; height: 26px; color: var(--navy); }
.c-steps__list h3 { color: var(--navy); font-size: 15px; line-height: 1.4; }
.c-steps__list p { color: var(--sub); font-size: 12px; }

/* ---------- 14 FAQ ---------- */
.c-faqs { display: grid; gap: 14px; }
.c-faq { border: 1px solid var(--line); background: #fff; }
.c-faq summary { display: flex; align-items: baseline; gap: 14px; padding: 16px 44px 16px 18px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--navy); list-style: none; position: relative; }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    left: auto;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    border: 1px solid var(--ev);
    border-radius: 50%;
    background-image: linear-gradient(var(--ev), var(--ev)), linear-gradient(var(--ev), var(--ev));
    background-position: center, center;
    background-size: 10px 1.5px, 1.5px 10px;
    background-repeat: no-repeat, no-repeat;
}
.c-faq[open] summary::after { background-size: 10px 1.5px, 0 1.5px; }
.c-faq summary i, .c-faq__a i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 700; }
.c-faq summary i { background: var(--navy); color: #fff; }
.c-faq__a { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; border-top: 1px dashed var(--line); background: var(--bg); font-size: 14px; }
.c-faq__a i { background: var(--ev); color: #fff; }

/* ---------- 15 最終CTA ---------- */
.c-ws--final { background: var(--navy-deep) !important; border-bottom: 0; color: #e8eef4; }
.c-ws--final .c-h2 { color: #fff; }
.c-ws--final .c-ws__copy strong { color: #86efac; }
.c-final-promise { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.35); font-size: 14px; }
.c-final-promise .ic { margin-top: 4px; color: #86efac; }
.c-confirm { padding: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); }
.c-confirm__ttl { margin-bottom: 14px; color: #86efac; font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.c-confirm ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 22px; }
.c-confirm li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.c-confirm .ic { color: #86efac; }
.c-confirm .c-btn { width: 100%; min-width: 0; }
.c-ws--final .c-tag { background: #86efac; color: var(--navy-deep); }
.c-ws--final .c-tag b { color: var(--navy-deep); }
/* 最終CTA：濃紺の背景（斜線パターンなし） */
.c-ws--final { position: relative; overflow: hidden; }
.c-ws--final .c-ws__bg { display: none; }
.c-ws--final .c-ws__inner { position: relative; z-index: 1; }

/* ---------- 16 フォーム ---------- */
.c-formwrap { grid-column: 2 / 12; display: grid; grid-template-columns: subgrid; column-gap: 24px; align-items: start; row-gap: 40px; }
.c-formwrap__side { grid-column: span 4; }
.c-formmock { grid-column: span 6; }
.c-formwrap__side .c-ph { margin-top: 20px; }
.c-formmock { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--line); border-top: 3px solid var(--ev); background: #fff; }
.c-field label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.c-field label i { padding: 1px 8px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.c-field label i.is-req { background: #c0392b; }
.c-field label i.is-any { background: #7f8c9b; }
.c-field__input { display: grid; place-items: center; min-height: 50px; border: 1px solid #a9bcc7; background: var(--ph-bg); color: #62788a; font-family: ui-monospace, monospace; font-size: 11px; }
.c-field__input--ta { min-height: 120px; }
.c-field__consent { padding: 12px; background: var(--bg); font-size: 12px; text-align: center; }
.c-field__submit { display: grid; place-items: center; min-height: 58px; border-radius: 6px; background: var(--ev); box-shadow: 0 3px 0 0 #0a5f8a; color: #fff; font-size: 16px; font-weight: 700; }
.c-field__support { color: var(--sub); font-size: 11px; text-align: center; }

/* ---------- 引用 ---------- */
.c-quote { margin: 20px 0; padding: 18px 22px; border-left: 4px solid var(--ev); background: var(--ev-soft); color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.5; }
.c-quote em { color: var(--ev); }

/* ---------- ワイヤーツールバー ---------- */
.wire-toolbar { position: fixed; right: 12px; bottom: 12px; z-index: 100; display: flex; gap: 8px; }
.wire-toolbar button { padding: 8px 14px; border: 1px solid var(--navy); border-radius: 4px; background: #fff; color: var(--navy); font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.wire-toolbar button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* ---------- デバッグモード（a/b/c 準拠：実寸・カラム幅・gap・12グリッド） ---------- */
.c-debug-target { position: relative; outline: 1px solid rgba(209,17,68,.5); outline-offset: 1px; }
.c-debug-overlay { position: absolute; inset: 0; z-index: 20; pointer-events: none; user-select: none; }
.c-debug-label, .c-debug-size, .c-debug-width, .c-debug-height, .c-debug-column, .c-debug-gap { position: absolute; z-index: 2; padding: 2px 4px; border: 1px solid #d14; background: rgba(255,255,255,.94); color: #7a0027; font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.25; white-space: nowrap; }
.c-debug-label { top: 3px; left: 3px; }
.c-debug-size { top: 20px; left: 3px; }
.c-debug-width { right: 0; bottom: -18px; left: 0; border-width: 1px 0 0; text-align: center; }
.c-debug-height { top: 0; right: -30px; bottom: 0; width: 26px; border-width: 0 0 0 1px; writing-mode: vertical-rl; text-align: center; }
.c-debug-gap { top: 50%; transform: translate(-50%, -50%); }
.c-debug-column { bottom: -34px; transform: translateX(-50%); }
.c-debug-grid { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.c-debug-grid__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; width: min(1160px, calc(100vw - 80px)); height: 100%; margin: 0 auto; }
.c-debug-grid__inner span { background: rgba(14, 127, 184, .06); border-right: 1px solid rgba(14, 127, 184, .18); border-left: 1px solid rgba(14, 127, 184, .18); }
body.is-debug-off .c-debug-target { outline: 0; }
body.is-debug-off .c-debug-overlay, body.is-debug-off .c-debug-grid { display: none; }

/* ---------- SP 共通 ---------- */
@media screen and (max-width: 767px) {
    .define_wrap { padding-right: 20px; padding-left: 20px; }
    /* SP：12カラムグリッドを1カラムに畳む */
    .c-ws__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .c-ws__inner > * { grid-column: 1 / -1 !important; min-width: 0; }
    .c-ws__cols, .c-fit, .c-formwrap { grid-template-columns: 1fr; row-gap: 28px; }
    .c-ws__cols > .c-ws__copy, .c-ws__cols > .c-ws__visual,
    .c-fit__panel, .c-formwrap__side, .c-formmock { grid-column: 1 / -1; }
    .c-ws { padding-top: 56px; padding-bottom: 64px; }
    .c-ws__head { margin-bottom: 28px; }
    .c-h2 { font-size: 23px; }
    .c-hero-ttl { font-size: 25px; line-height: 1.3; }
    .c-tag { left: 20px; top: 10px; font-size: 10px; }
    .c-ws__cols { gap: 28px; }
    .l-header__nav { display: none; }
    .l-header__inner { min-height: 56px; }
    .c-btn { width: 100%; min-width: 0; font-size: 15px; padding: 16px 20px; }
    /* FV：モバイルは1画面に収める（flow3を横1行に圧縮し補足文は隠す） */
    .c-ws--hero .c-eyebrow { font-size: 11px; margin-bottom: 6px; }
    .c-ws--hero .c-lead { margin-top: 10px; font-size: 13px; line-height: 1.7; }
    .c-flow3 { flex-direction: row; gap: 4px; margin-top: 14px; }
    .c-flow3__item { padding: 9px 3px; }
    .c-flow3__item .ic { width: 20px; height: 20px; }
    .c-flow3__item b { font-size: 11px; }
    .c-flow3__item span { display: none; }
    .c-flow3__arrow { align-items: center; transform: none; }
    .c-flow3__arrow .ic { width: 12px; height: 12px; }
    .c-checklist--hero { margin-top: 14px; padding: 12px 14px; }
    .c-checklist--hero li { padding: 4px 0; font-size: 12.5px; }
    .c-ws--hero .c-cta { margin-top: 16px; }
    .c-ws--hero .c-cta__micro { font-size: 11px; }
    .c-ws--hero.c-ws--bgphoto { min-height: 0; }
    .c-branch__paths { grid-template-columns: 1fr; }
    .c-branch__paths::before { display: none; }
    .c-bizmodel { padding: 18px; }
    .c-bizmodel__flow { flex-direction: column; align-items: stretch; }
    .c-bizmodel__node { max-width: none; }
    .c-bizmodel__arr { flex-direction: row; justify-content: center; padding: 4px 0; }
    .c-bizmodel__arr .ic { transform: rotate(90deg); }
    .c-cards5 { grid-template-columns: 1fr !important; }
    .c-risks li { flex-direction: column; gap: 8px; padding: 18px 0; }
    .c-minitl { flex-wrap: wrap; padding: 12px; }
    .c-minitl b { position: static; transform: none; margin-left: auto; }
    .c-fit { grid-template-columns: 1fr !important; }
    .c-sim__kpis { grid-template-columns: 1fr; }
    .c-roles { grid-template-columns: 1fr; }
    .c-roles__divider { flex-direction: row; }
    .c-roles__divider .ic { transform: rotate(90deg); }
    .c-roles__chips { grid-template-columns: 1fr 1fr; }
    .c-bars { gap: 28px; height: 180px; }
    .c-trustgrid { grid-template-columns: 1fr 1fr !important; }
    .c-supportline { flex-wrap: wrap; justify-content: center; }
    .c-steps__list { grid-template-columns: 1fr !important; }
    .c-confirm ul { grid-template-columns: 1fr; }
    .c-formwrap { grid-template-columns: 1fr !important; }
    .c-formmock { padding: 20px; }
    .c-quote { font-size: 17px; }
    .c-debug-grid__inner { width: calc(100vw - 40px); gap: 12px; }
    .c-debug-height, .c-debug-column { display: none; }
}

/* d */

/* ============================================================
   Option D：編集型（Fパターン・左起点 2カラム）
   幅はすべて12カラムグリッドのカラムスパンで決める（10カラム基準）。
   ============================================================ */

/* 2カラム：整数カラムスパンで分割（copy : visual） */
.option-d.c-ws--decision .c-ws__copy   { grid-column: span 5; }
.option-d.c-ws--decision .c-ws__visual { grid-column: span 5; }
.option-d.c-ws--business .c-ws__copy   { grid-column: span 5; }
.option-d.c-ws--business .c-ws__visual { grid-column: span 5; }
.option-d.c-ws--simulation .c-ws__cols { align-items: start; }
.option-d.c-ws--simulation .c-ws__copy   { grid-column: span 4; }
.option-d.c-ws--simulation .c-ws__visual { grid-column: span 6; }
.option-d.c-ws--simulation .c-cta { text-align: left; }
.option-d.c-ws--simulation .c-btn { min-width: 0; width: 100%; }
.option-d.c-ws--market .c-ws__cols { align-items: start; }
.option-d.c-ws--market .c-ws__copy   { grid-column: span 5; }
.option-d.c-ws--market .c-ws__visual { grid-column: span 5; }
.option-d.c-ws--final .c-ws__copy   { grid-column: span 6; }
.option-d.c-ws--final .c-ws__visual { grid-column: span 4; }

/* FV：背景写真の上に左寄せ（7カラム＝grid 2/9） */
.option-d.c-ws--hero { padding-top: 48px; padding-bottom: 56px; }
.option-d .c-hero-body { grid-column: 2 / 9; }

/* 02 悩み：9カラムの読み物（grid 2/11） */
.option-d.c-ws--problem .c-ws__body { grid-column: 2 / 11; }

/* 05 判断基準：上段3枚＋下段2枚（10カラム幅の内部を6分割） */
.option-d .c-cards5 { grid-template-columns: repeat(6, 1fr); column-gap: 24px; }
.option-d .c-cards5 .c-card { grid-column: span 2; }
.option-d .c-cards5 .c-card:nth-child(4),
.option-d .c-cards5 .c-card:nth-child(5) { grid-column: span 3; }

/* 06 注意点：9カラムの読み物 */
.option-d .c-risks { grid-column: 2 / 11; }

/* 08 適合性：左右対比（向いている6：向いていない4） */
.option-d .c-fit { align-items: start; }
.option-d .c-fit .is-yes { grid-column: span 6; }
.option-d .c-fit .is-no  { grid-column: span 4; }

/* 12 信頼性：4カード横並び（10カラム幅の内部を4分割） */
.option-d .c-trustgrid { grid-template-columns: repeat(4, 1fr); column-gap: 24px; }

/* 13 導入フロー：横6ステップ＋上部グループ帯（10カラム幅の内部を6分割） */
.option-d .c-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.option-d .c-steps__group { display: block; grid-column: 1 / 4; padding-bottom: 8px; border-bottom: 2px solid var(--navy); color: var(--navy); font-size: 12px; font-weight: 700; }
.option-d .c-steps__group.is-second { grid-column: 4 / 7; border-bottom-color: var(--ev); color: var(--ev); }
.option-d .c-steps__group.is-second b { float: right; font-weight: 700; }
.option-d .c-steps__list { display: contents; }

/* 14 FAQ：8カラム中央（grid 3/11） */
.option-d .c-faqs { grid-column: 3 / 11; }

/* 16 フォーム：左に安心材料（4）、右にフォーム（6）＝基本形（base）のまま */

@media screen and (max-width: 767px) {
    .option-d .c-cards5 { grid-template-columns: 1fr; }
    .option-d .c-cards5 .c-card,
    .option-d .c-cards5 .c-card:nth-child(4),
    .option-d .c-cards5 .c-card:nth-child(5) { grid-column: 1 / -1; }
    .option-d .c-steps { grid-template-columns: 1fr; gap: 10px; }
    .option-d .c-steps__group,
    .option-d .c-steps__group.is-second { grid-column: 1 / -1; }
    .option-d.c-ws--simulation .c-cta { text-align: center; }
}

/* e */

/* ============================================================
   Option E：モジュラー・カード型（中央整列）
   幅は12カラムグリッドのカラムスパンで決める。
   中央寄せは対称スパン（例：3/11＝8カラム中央）で表現し、グリッド線に乗せる。
   ============================================================ */
.option-e .c-ws__head { text-align: center; }
.option-e .c-h2-sub { max-width: 680px; margin-right: auto; margin-left: auto; }
.option-e .c-label { margin-right: auto; margin-left: auto; }
.option-e.c-ws { padding-top: 96px; padding-bottom: 104px; }

/* 2カラム系は display:contents で親グリッドへ展開し、対称スパンで縦積み中央 */
.option-e .c-ws__cols { display: contents; }
.option-e .c-ws__cols > .c-ws__copy   { grid-column: 3 / 11; text-align: center; }
.option-e .c-ws__cols > .c-ws__visual { grid-column: 3 / 11; }

/* 01 FV：背景写真の上に中央整列（8カラム中央） */
.option-e.c-ws--hero { padding-top: 56px; }
.option-e.c-ws--hero .c-ws__bg { align-items: flex-end; justify-content: center; padding: 0 0 22px; }
.option-e.c-ws--hero .c-ws__bg::after { background: rgba(255,255,255,.9); }
.option-e .c-hero-body { grid-column: 3 / 11; text-align: center; }
.option-e.c-ws--hero .c-hero-ttl { font-size: clamp(32px, 3.8vw, 48px); }
.option-e .c-checklist--hero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; text-align: left; }
.option-e .c-flow3 { margin-top: 24px; }

/* 02 悩み：8カラム中央の1カラム */
.option-e.c-ws--problem .c-ws__body { grid-column: 3 / 11; }
.option-e .c-painlist { padding: 28px 32px; border: 1px solid var(--line); background: #fff; }
.option-e.c-ws--problem .c-lead { text-align: center; }

/* 03 判断軸：引用を中央に大きく */
.option-e .c-quote { text-align: center; border-left: 0; border-top: 4px solid var(--ev); font-size: 22px; }

/* 05 判断基準：5カードをサブグリッドで各2カラムに（10カラム＝2×5） */
.option-e .c-cards5 { grid-template-columns: subgrid; column-gap: 24px; }
.option-e .c-card { grid-column: span 2; padding: 22px 14px 18px; text-align: center; }
.option-e .c-card .ic { margin: 0 auto; }
.option-e .c-card h3 { font-size: 14px; }
.option-e .c-card p { font-size: 12px; text-align: left; }

/* 06 注意点：番号カードをサブグリッドで各5カラム、最終行は全幅 */
.option-e .c-risks { grid-column: 2 / 12; grid-template-columns: subgrid; column-gap: 24px; row-gap: 18px; }
.option-e .c-risks li { grid-column: span 5; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); background: #fff; }
.option-e .c-risks li:first-child { border-top: 1px solid var(--line); }
.option-e .c-risks li:last-child { grid-column: 1 / -1; }

/* 08 適合性：左右対称の2カード（base の 5:5 をそのまま使用） */

/* 09 シミュレーション：導入文は中央、パネルは10カラム全幅 */
.option-e.c-ws--simulation .c-ws__visual { grid-column: 2 / 12; }
.option-e .c-sim__kpis { grid-template-columns: repeat(2, 1fr); }

/* 10 分担図・11 市場 */
.option-e .c-chartcard { grid-column: 3 / 11; }
.option-e.c-ws--market .c-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }

/* 12 信頼性：4カード横並び（10カラム幅の内部を4分割） */
.option-e .c-trustgrid { grid-template-columns: repeat(4, 1fr); column-gap: 24px; }

/* 13 導入フロー：3×2 グリッド */
.option-e .c-steps__list { grid-template-columns: repeat(3, 1fr); }
.option-e .c-steps__list li { align-items: center; text-align: center; }

/* 14 FAQ：サブグリッドで各5カラム（10カラム＝5×2） */
.option-e .c-faqs { grid-template-columns: subgrid; column-gap: 24px; row-gap: 14px; }
.option-e .c-faq { grid-column: span 5; align-self: start; }

/* 15 最終CTA：中央整列 */
.option-e.c-ws--final .c-ws__copy { text-align: center; }
.option-e .c-final-promise { justify-content: center; }
.option-e .c-confirm { width: min(640px, 100%); margin: 0 auto; }

/* 16 フォーム：フォームを中央、安心材料は上に横並び（flexで縦積み中央） */
.option-e .c-formwrap { display: flex; flex-direction: column; align-items: center; }
.option-e .c-formwrap__side { width: min(880px, 100%); }
.option-e .c-formwrap__side .c-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.option-e .c-formwrap__side .c-ph { display: none; }
.option-e .c-formmock { width: min(880px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-e .c-field:nth-child(7), .option-e .c-field__consent, .option-e .c-field__submit, .option-e .c-field__support { grid-column: 1 / -1; }
.option-e .c-field__submit { width: min(420px, 100%); margin: 0 auto; }

@media screen and (max-width: 767px) {
    .option-e.c-ws { padding-top: 64px; padding-bottom: 72px; }
    .option-e .c-checklist--hero, .option-e.c-ws--market .c-checklist { grid-template-columns: 1fr; }
    .option-e .c-cards5 { grid-template-columns: 1fr; }
    .option-e .c-card { grid-column: 1 / -1; text-align: left; }
    .option-e .c-card .ic { margin: 0; }
    .option-e .c-risks { grid-template-columns: 1fr; }
    .option-e .c-risks li, .option-e .c-risks li:last-child { grid-column: 1 / -1; }
    .option-e .c-steps__list { grid-template-columns: 1fr; }
    .option-e .c-faqs { grid-template-columns: 1fr; }
    .option-e .c-faq { grid-column: 1 / -1; }
    .option-e .c-formmock { grid-template-columns: 1fr; }
    .option-e .c-field:nth-child(7), .option-e .c-field__consent, .option-e .c-field__submit, .option-e .c-field__support { grid-column: auto; }
}

/* f */

/* ============================================================
   Option F：縦読みストーリー型（提案書・1カラム）
   コンテンツは8カラム中央（grid 3/11）に固定し、
   幅はすべてグリッドのカラム線に乗せる。
   ============================================================ */
.option-f { font-size: 16.5px; }
.option-f.c-ws { padding-top: 88px; padding-bottom: 96px; }
.option-f .c-h2 { font-size: 32px; }

/* コンテンツは既定で8カラム中央（提案書の本文幅） */
.option-f .c-ws__inner > * { grid-column: 3 / 11; }

/* 2カラムは display:contents で展開し、8カラム中央に縦積み */
.option-f .c-ws__cols { display: contents; }
.option-f .c-ws__cols > .c-ws__copy,
.option-f .c-ws__cols > .c-ws__visual { grid-column: 3 / 11; }

/* 01 FV：背景写真の上に提案書冒頭のコピー（8カラム中央） */
.option-f.c-ws--hero { padding-top: 56px; }

/* 03 判断軸：引用を全幅の帯にする */
.option-f .c-quote { padding: 26px 28px; font-size: 24px; text-align: center; border-left: 0; border-top: 4px solid var(--ev); border-bottom: 1px solid var(--line); }

/* 05 判断基準：縦1列（番号を左に振る） */
.option-f .c-cards5 { grid-template-columns: 1fr; gap: 0; }
.option-f .c-card { display: grid; grid-template-columns: 44px 34px 1fr; align-items: start; gap: 0 14px; padding: 22px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.option-f .c-card:first-child { border-top: 1px solid var(--line); }
.option-f .c-card__num { position: static; padding: 0; background: transparent; color: var(--ev); font-size: 26px; font-family: ui-monospace, monospace; }
.option-f .c-card h3 { margin: 0 0 4px; grid-column: 3; grid-row: 1; }
.option-f .c-card .ic { grid-column: 2; grid-row: 1; margin-top: 2px; }
.option-f .c-card p { grid-column: 3; }

/* 08 適合性：向いている → 向いていない の縦積み */
.option-f .c-fit { display: block; }
.option-f .c-fit__panel + .c-fit__panel { margin-top: 20px; }

/* 09 シミュレーション：導入文 → パネル（DOM順のまま縦積み） */
.option-f.c-ws--simulation .c-ws__copy { text-align: center; }

/* 10 運営：役割図は縦積み（8カラム幅では窮屈なため） */
.option-f .c-roles { grid-template-columns: 1fr; row-gap: 16px; }
.option-f .c-roles__divider { flex-direction: row; }
.option-f .c-roles__divider .ic { transform: rotate(90deg); }

/* 12 信頼性：2×2 */
.option-f .c-trustgrid { grid-template-columns: 1fr 1fr; }

/* 13 導入フロー：縦タイムライン */
.option-f .c-steps__list { position: relative; gap: 0; }
.option-f .c-steps__list::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 21px; width: 2px; background: var(--line); }
.option-f .c-steps__list li { display: grid; grid-template-columns: 44px 26px 1fr; align-items: start; column-gap: 16px; row-gap: 4px; padding: 18px 0; border: 0; border-bottom: 1px dashed var(--line-soft); background: transparent; }
.option-f .c-steps__list li > i { grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ev); background: #fff; color: var(--ev); font-size: 9px; }
.option-f .c-steps__list li .ic { grid-column: 2; grid-row: 1; margin-top: 2px; }
.option-f .c-steps__list h3 { grid-column: 3; grid-row: 1; font-size: 16px; }
.option-f .c-steps__list p { grid-column: 3; grid-row: 2; font-size: 13px; }

/* 14 FAQ：1カラム */
.option-f .c-faqs { grid-template-columns: 1fr; }

/* 15 最終CTA・16 フォーム：1カラム */
.option-f.c-ws--final .c-ws__copy { text-align: center; }
.option-f .c-final-promise { justify-content: center; }
.option-f .c-formwrap { display: block; }
.option-f .c-formwrap__side { margin-bottom: 28px; }
.option-f .c-formwrap__side .c-ph { display: none; }
.option-f .c-formwrap__side .c-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }

@media screen and (max-width: 767px) {
    .option-f { font-size: 16px; }
    .option-f .c-h2 { font-size: 24px; }
    .option-f .c-quote { font-size: 19px; }
    .option-f .c-card { grid-template-columns: 36px 28px 1fr; }
    .option-f .c-trustgrid { grid-template-columns: 1fr; }
}

/* sp-mobile */

/* ============================================================
   モバイル最終最適化（連結の最後に読み込む＝最優先で上書き）
   PCの中央整列(E)・狭幅提案書(F)デザインを、モバイルでは
   「左揃え1カラム」に統一して読みやすくする。
   ============================================================ */
@media screen and (max-width: 767px) {
    /* 見出し・補足・本文・リードをすべて左揃えに統一（中央整列はPC専用アクセント） */
    .option-e .c-ws__head { text-align: left; }
    .option-e .c-ws__head .c-eyebrow { text-align: left; }
    .c-h2-sub { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }
    .option-e .c-ws__cols > .c-ws__copy { text-align: left; }
    .option-e.c-ws--problem .c-lead { text-align: left; }
    .option-e.c-ws--simulation .c-ws__copy,
    .option-f.c-ws--simulation .c-ws__copy { text-align: left; }
    .option-e.c-ws--final .c-ws__copy,
    .option-f.c-ws--final .c-ws__copy { text-align: left; }
    .c-final-promise { justify-content: flex-start; }

    /* 悩みリストのカード枠（E）は左パディングを詰めて可読域を広げる */
    .option-e .c-painlist { padding: 18px 16px; }

    /* 見出し直下の余白をモバイル用に軽く詰める */
    .c-ws__head { margin-bottom: 22px; }
    .c-h2-sub { margin-top: 12px; font-size: 14px; }

    /* 最終CTA：確認項目の枠内パディングを詰める */
    .c-confirm { padding: 20px; }
    .c-confirm ul { gap: 8px 16px; }

    /* セクション注記タグ：モバイルで縦に潰れないよう1行固定＋はみ出し抑制 */
    .c-tag { white-space: nowrap; max-width: calc(100% - 40px); overflow: hidden; }

    /* 2カラム分割はSPで完全に1カラムへ（D/E/Fのカラムスパン/ライン指定を無効化）。
       → 03判断軸などでH2が独立表示され、本文の重なり・縦潰れが解消する */
    .c-ws__cols > .c-ws__copy,
    .c-ws__cols > .c-ws__visual { grid-column: 1 / -1 !important; }

    /* 02悩みリスト：flexの3カラム化（本文｜太字｜本文）を解消し、1つの文章として折り返す */
    .c-painlist li { display: block; position: relative; padding: 16px 4px 16px 34px; }
    .c-painlist li .ic { position: absolute; left: 2px; top: 18px; }

    /* 11市場の統計行：flexの分断折り返しを避け、アイコン＋文章をインライン一体に */
    .c-statline { display: block; }
    .c-statline .ic { display: inline-block; vertical-align: -4px; margin-right: 6px; }

    /* 13導入フロー（縦タイムライン）：見出しと説明を上下に積み、右カラム幅を活かして折り返しを減らす */
    .option-f .c-steps__list li { display: grid; grid-template-columns: 44px 26px 1fr; align-items: start; column-gap: 12px; row-gap: 2px; }
    .option-f .c-steps__list li > i { grid-column: 1; grid-row: 1 / span 2; }
    .option-f .c-steps__list li .ic { grid-column: 2; grid-row: 1; margin-top: 2px; }
    .option-f .c-steps__list li h3 { grid-column: 3; grid-row: 1; }
    .option-f .c-steps__list li p { grid-column: 3; grid-row: 2; }

    /* 06/09 ミニタイムライン：縦の工程表示。工程枠は文字数に関わらず同じ幅に揃える */
    .c-minitl { flex-direction: column; align-items: center; gap: 0; padding: 14px; }
    .c-minitl span { width: 150px; max-width: 100%; text-align: center; padding: 7px 8px; white-space: nowrap; }
    .c-minitl i { width: 1px; height: 10px; min-width: 0; flex: none; }
    .c-minitl b { position: static; transform: none; margin: 8px 0 0; }

    /* 06 おすすめ理由チップ：縦並びにして枠幅を揃える */
    .c-reasons3 ul { flex-direction: column; align-items: center; }
    .c-reasons3 li { width: 280px; max-width: 100%; justify-content: center; }

    /* 12 サポート線：同じく縦の工程表示にする */
    .c-supportline { flex-direction: column; align-items: center; gap: 0; padding: 14px 18px; width: auto; }
    .c-supportline span { padding: 5px 0; text-align: center; }
    .c-supportline i { width: 1px; height: 10px; }

    /* 10 運営：御社パネルの見出しと「本業へ集中」を1行に並べる */
    .option-e .c-roles__panel.is-you h3 { display: inline-flex; vertical-align: middle; margin-bottom: 0; }
    .option-e .c-roles__panel.is-you .c-roles__desc { display: inline; vertical-align: middle; margin: 0 0 0 10px; }
    .option-e .c-roles__panel.is-you ul { margin-top: 14px; }

    /* フォント：ジャンプ率を確保（見出しは大きめ・本文はやや詰める） */
    body { font-size: 15px; }
    .c-h2 { font-size: 22px; line-height: 1.5; }
    .c-h2-sub { font-size: 13.5px; }
    .c-lead { font-size: 14px; }
    .c-hero-ttl { font-size: 25px; }
}

/* ============================================================
   本番用オーバーライド（デバッグ表示を除き実UIに）
   ============================================================ */

/* ヘッダー／フッターのロゴ（テキスト） */
.l-header__logo a { color: var(--navy); font-size: 18px; font-weight: 800; letter-spacing: .02em; }
.l-header__logo a:hover { color: var(--ev); }
/* ヘッダーロゴ（画像）：ヘッダー高さ(min-height 66px)に収まる縦サイズに固定 */
.l-header__logo img { display: block; height: 32px; width: auto; }
.l-footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.l-footer__disclaimer { color: var(--sub); font-size: 11px; line-height: 1.7; }
.l-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.l-footer__logo { color: var(--navy); font-size: 16px; font-weight: 800; }
.l-footer__meta { color: var(--sub); font-size: 12px; }

/* 画像プレースホルダ（実画像差し替えまでの下地・アイコンのみ） */
.c-ph { background: linear-gradient(135deg, #eef3f7, #e2ebf1); border: 1px solid var(--line); color: #9fb2be; }
.c-ph .ic { width: 34px; height: 34px; opacity: .85; }

/* 実写差し替え済みの画像（.c-ph--16x9／.c-ph--4x3のaspect-ratio定義は流用） */
.c-photo { display: block; width: 100%; height: auto; border: 1px solid var(--line); object-fit: cover; }

/* セクション背景（FVは実写に差し替え。ブランドトーンのグラデーションは下地として残し、写真の下に重ねる） */
.c-ws--hero .c-ws__bg {
    background-color: #dbe7f0;
    background-image: url(../images/hero-bg-pc.webp), linear-gradient(135deg, #dbe7f0 0%, #eaf2f7 48%, #f4f8fb 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center right, center;
}
.c-ws--problem .c-ws__bg { background: var(--bg); }
.c-ws--fit .c-ws__bg {
    background-color: var(--bg);
    background-image: url(../images/owner-factory-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 比較表の補足文 */
.c-compare-note { margin-top: 16px; color: var(--sub); font-size: 13px; }

/* お問い合わせ実フォーム */
.c-formwrap > .c-form { grid-column: span 6; display: grid; gap: 16px; align-content: start; padding: 32px; border: 1px solid var(--line); border-top: 3px solid var(--ev); background: #fff; }
.c-form .c-field { display: grid; gap: 6px; }
.c-form .c-field label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.c-form .c-field label i { padding: 1px 8px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; }
.c-form .c-field label i.is-req { background: #c0392b; }
.c-form .c-field label i.is-any { background: #7f8c9b; }
.c-form input, .c-form select, .c-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #a9bcc7; border-radius: 6px; background: #fff; font-family: inherit; font-size: 15px; color: var(--ink); }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { outline: 2px solid var(--ev); outline-offset: 1px; border-color: var(--ev); }
.c-form textarea { resize: vertical; min-height: 110px; }
.c-form input::placeholder, .c-form textarea::placeholder { color: #aab8c2; }
.c-form .form-hint { margin: 0; color: var(--sub); font-size: 12px; }
.c-form__consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.c-form__consent input { width: 18px; height: 18px; accent-color: var(--ev); }
.c-form__submit { padding: 18px; border: 0; border-radius: 6px; background: var(--ev); box-shadow: 0 3px 0 0 #0a5f8a; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.c-form__submit:hover { filter: brightness(1.04); }
.c-form__support { color: var(--sub); font-size: 12px; text-align: center; }

@media screen and (max-width: 767px) {
    .c-formwrap > .c-form { grid-column: 1 / -1; padding: 20px; }
    .l-header__logo a { font-size: 16px; }
    .l-header__logo img { height: 28px; }
    .l-header__nav { display: none; }
    /* hero-bg-sp調達済み。SP専用カットに差し替え、横長構図をcenterでcoverする */
    .c-ws--hero .c-ws__bg { background-image: url(../images/hero-bg-sp.webp), linear-gradient(135deg, #dbe7f0 0%, #eaf2f7 48%, #f4f8fb 100%); background-position: center, center; }
    .c-ws--hero .c-ws__bg::after { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.82) 50%, rgba(255,255,255,.86) 100%); }
}