/* ============================================================
   ミューコマース モノクロ設計 v2
   階調10段・primary/secondary体系・セクション型のバリエーション
   円モチーフ（ゴースト円・丸数字・円形バッジ）を署名要素として通す
   ============================================================ */
:root {
  --k950: #0D0D0F;  /* ヒーロー・CTA帯・最強 */
  --k900: #17171A;  /* ダークパネル */
  --k800: #26262B;
  --k700: #3A3A41;  /* セカンダリの濃 */
  --k500: #55555C;  /* 本文 */
  --k400: #85858C;  /* 補足 */
  --k300: #B6B6BC;  /* 弱いテキスト・ゴースト線 */
  --k200: #D8D8DD;  /* 強い罫線 */
  --k100: #EAEAEE;  /* ヘアライン */
  --k50:  #F6F6F8;  /* 淡帯 */
  --ghost: #F0F0F3; /* ゴースト数字 */
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-num: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1120px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-jp); color: var(--k500); background: #fff; font-size: 15.5px; line-height: 2.05; letter-spacing: .03em; }
img { max-width: 100%; height: auto; display: block; filter: grayscale(1); }
a { color: inherit; }
.inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ============ ボタン体系（primary=黒ピル / secondary=枠ピル / tertiary=下線リンク） ============ */
.btn-p, .btn-s {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: .05em;
  text-decoration: none; padding: 16px 38px; border-radius: 999px;
  transition: opacity .2s, background .2s, color .2s;
}
.btn-p { background: var(--k950); color: #fff; }
.btn-p::after { content: "→"; font-family: var(--font-num); font-weight: 400; }
.btn-p:hover { opacity: .82; }
.btn-s { background: transparent; color: var(--k950); border: 1.5px solid var(--k950); }
.btn-s:hover { background: var(--k950); color: #fff; }
.on-dark .btn-p, .btn-p--rev { background: #fff; color: var(--k950); }
.on-dark .btn-s, .btn-s--rev { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn-s:hover { background: #fff; color: var(--k950); }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--k950); text-decoration: none; border-bottom: 1.5px solid var(--k950); padding-bottom: 3px; }
.tlink::after { content: "→"; font-family: var(--font-num); }
.tlink:hover { opacity: .65; }

/* ============ ヘッダー ============ */
.gh { border-bottom: 1px solid var(--k100); background: rgba(255,255,255,.96); position: sticky; top: 0; z-index: 50; }
.gh .inner { display: flex; align-items: center; gap: 36px; height: 66px; }
.gh-brand { font-size: 17px; font-weight: 700; letter-spacing: .12em; color: var(--k950); text-decoration: none; }
.gh-nav { display: flex; gap: 30px; margin-left: auto; }
.gh-nav a { font-size: 13.5px; color: var(--k500); text-decoration: none; padding-bottom: 4px; }
.gh-nav a:hover { color: var(--k950); }
.gh-nav a.on { color: var(--k950); font-weight: 600; border-bottom: 2px solid var(--k950); }
.gh-cta { font-size: 13.5px; font-weight: 600; color: #fff; background: var(--k950); border-radius: 999px; padding: 11px 24px; text-decoration: none; }
.gh-cta:hover { opacity: .82; }

/* ============ ヒーロー（トップ）: 黒・左寄せ・中抜き文字・ゴースト円 ============ */
.hero { background: var(--k950); color: #fff; position: relative; overflow: hidden; padding: 120px 0 128px; }
.hero-circle { position: absolute; right: -180px; top: 50%; transform: translateY(-50%); width: 640px; height: 640px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; pointer-events: none; }
.hero-circle::before { content: ""; position: absolute; inset: 72px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.hero-eyebrow { font-family: var(--font-num); font-size: 12px; font-weight: 600; letter-spacing: .3em; color: var(--k400); }
.hero h1 { font-size: clamp(34px, 5vw, 64px); font-weight: 700; line-height: 1.5; letter-spacing: .04em; margin-top: 26px; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.hero-sub { font-size: clamp(14.5px, 1.4vw, 16.5px); color: var(--k300); margin-top: 30px; line-height: 2.2; max-width: 44em; }
.hero-cta { margin-top: 46px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 12.5px; color: var(--k400); margin-top: 20px; letter-spacing: .05em; }

/* ============ 下層ページ頭: 白・特大タイトル＋ゴースト英字 ============ */
.ph { padding: 96px 0 72px; border-bottom: 1px solid var(--k100); position: relative; overflow: hidden; }
.ph-ghost { position: absolute; right: -10px; bottom: -34px; font-family: var(--font-num); font-size: clamp(90px, 13vw, 180px); font-weight: 700; letter-spacing: .02em; color: var(--ghost); line-height: 1; user-select: none; pointer-events: none; }
.ph-eyebrow { font-family: var(--font-num); font-size: 12px; font-weight: 600; letter-spacing: .28em; color: var(--k400); }
.ph h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; letter-spacing: .05em; color: var(--k950); margin-top: 16px; line-height: 1.45; position: relative; }
.ph-lead { margin-top: 20px; max-width: 46em; position: relative; }

/* ============ セクション共通 ============ */
.sec { padding: 112px 0; position: relative; }
.sec--band { background: var(--k50); }
.sec--dark { background: var(--k900); color: var(--k300); }
.sec--dark .sec-h { color: #fff; }
.sec--center { text-align: center; }
.sec--center .sec-p, .sec--center .sec-note { margin-left: auto; margin-right: auto; }
.eyebrow { display: block; font-family: var(--font-num); font-size: 12px; font-weight: 600; letter-spacing: .26em; color: var(--k400); margin-bottom: 20px; }
.sec-h { font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; line-height: 1.6; letter-spacing: .05em; color: var(--k950); }
.sec-p { margin-top: 24px; max-width: 46em; }
.sec-note { font-size: 12.5px; color: var(--k400); margin-top: 22px; line-height: 2.0; max-width: 56em; }
.mt-lg { margin-top: 56px; }

/* 2カラム */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cols--rev .col-text { order: 2; }
.cols--rev .col-visual { order: 1; }
.col-visual img, .col-visual svg { max-width: 400px; margin: 0 auto; display: block; }
/* オフセット枠パネル（イラストの台座・版画風） */
.plate { background: #fff; border: 1.5px solid var(--k950); border-radius: 14px; padding: 40px 32px; box-shadow: 10px 10px 0 var(--k100); }
.sec--band .plate { box-shadow: 10px 10px 0 var(--k200); }

/* ============ ゴースト数字の3項目（お悩み等・枠なし） ============ */
.ghost-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 64px; }
.gitem { position: relative; padding-top: 58px; }
.gitem-no { position: absolute; top: -14px; left: -6px; font-family: var(--font-num); font-size: 96px; font-weight: 700; color: var(--ghost); line-height: 1; z-index: 0; user-select: none; }
.sec--band .gitem-no { color: #E6E6EA; }
.gitem-t { position: relative; font-size: 20px; font-weight: 700; color: var(--k950); line-height: 1.75; }
.gitem-d { position: relative; font-size: 14.5px; margin-top: 14px; line-height: 2.05; }

/* ============ 実績数字帯（ダーク） ============ */
.nums-dark { background: var(--k950); color: #fff; padding: 84px 0; }
.nums { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.num { text-align: center; padding: 8px 20px; }
.num + .num { border-left: 1px solid var(--k800); }
.num-v { font-family: var(--font-num); font-size: clamp(48px, 6vw, 76px); font-weight: 600; line-height: 1.15; }
.num-v small { font-size: .36em; font-weight: 700; font-family: var(--font-jp); letter-spacing: .08em; margin-left: 6px; }
.num-l { font-size: 13px; color: var(--k400); margin-top: 12px; letter-spacing: .06em; }
.nums-note { text-align: center; font-size: 12.5px; color: var(--k400); margin-top: 44px; }

/* ============ 大写しスクショ（ブラウザ枠つき） ============ */
.browser { margin: 60px auto 0; max-width: 880px; border-radius: 12px; overflow: hidden; border: 1px solid var(--k200); box-shadow: 0 32px 80px rgba(13,13,15,.14); background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 6px; background: var(--k100); padding: 11px 16px; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--k300); }
.browser img { border: none; box-shadow: none; border-radius: 0; }
.shot-cap { font-size: 12px; color: var(--k400); margin-top: 16px; text-align: center; }

/* ============ 枠カード（お引っ越し等のOPTION枠） ============ */
.frame { border: 2px solid var(--k950); border-radius: 18px; padding: 56px 56px 60px; position: relative; background: #fff; }
.frame-tag { position: absolute; top: -14px; left: 40px; background: var(--k950); color: #fff; font-family: var(--font-num); font-size: 11.5px; font-weight: 600; letter-spacing: .22em; padding: 5px 18px; border-radius: 999px; }

/* ============ 料金（大数字＋下線） ============ */
.bigprice { margin-top: 40px; }
.bigprice .v { font-family: var(--font-num); font-size: clamp(56px, 8vw, 104px); font-weight: 600; color: var(--k950); line-height: 1.15; }
.bigprice .v small { font-family: var(--font-jp); font-size: .3em; font-weight: 700; letter-spacing: .04em; }
.bigprice .plus { font-size: clamp(17px, 2vw, 23px); font-weight: 700; color: var(--k950); margin-top: 14px; }
.price-rule { width: 88px; height: 3px; background: var(--k950); margin: 34px auto 0; border-radius: 2px; }

/* ============ 進め方2つ（大型枠パネル） ============ */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 60px; }
.way { border: 1.5px solid var(--k200); border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color .2s; }
.way:hover { border-color: var(--k950); }
.way-head { padding: 40px 40px 0; }
.way-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--k500); background: var(--k50); border-radius: 999px; padding: 5px 16px; letter-spacing: .04em; }
.way-t { font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; color: var(--k950); line-height: 1.6; margin-top: 16px; }
.way-d { font-size: 14px; padding: 14px 40px 30px; line-height: 2.0; flex: 1; }
.way-foot { background: var(--k50); font-size: 11.5px; color: var(--k400); padding: 14px 40px; letter-spacing: .03em; }

/* ============ 2×2画面グリッド ============ */
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 60px; }
.screen { background: #fff; border: 1px solid var(--k100); border-radius: 16px; padding: 36px 36px 40px; position: relative; }
.sec--band .screen { border-color: var(--k200); }
.screen-no { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: var(--k300); letter-spacing: .2em; }
.screen-t { font-size: 18.5px; font-weight: 700; color: var(--k950); margin-top: 10px; }
.screen-t .badge { font-size: 10.5px; font-weight: 700; color: var(--k500); background: var(--k100); border-radius: 3px; padding: 3px 8px; margin-left: 10px; vertical-align: 3px; letter-spacing: .06em; }
.screen-d { font-size: 14px; margin-top: 10px; line-height: 2.0; }

/* ============ プラン3列 ============ */
.plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 60px; align-items: stretch; }
.plan { border: 1.5px solid var(--k200); border-top: 3px solid var(--k950); border-radius: 16px; padding: 40px 36px 44px; background: #fff; display: flex; flex-direction: column; }
.plan--rec { background: var(--k900); border-color: var(--k900); color: var(--k300); position: relative; }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #fff; border: 1.5px solid var(--k950); color: var(--k950); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; border-radius: 999px; padding: 4px 18px; }
.plan-name { font-size: 16px; font-weight: 700; letter-spacing: .1em; color: var(--k950); }
.plan--rec .plan-name { color: #fff; }
.plan-catch { font-size: 12.5px; color: var(--k400); margin-top: 6px; line-height: 1.9; }
.plan-price { font-family: var(--font-num); font-size: clamp(36px, 3.6vw, 48px); font-weight: 600; color: var(--k950); margin-top: 18px; line-height: 1.2; }
.plan--rec .plan-price { color: #fff; }
.plan-price small { font-family: var(--font-jp); font-size: .36em; font-weight: 700; }
.plan-points { list-style: none; margin-top: 22px; font-size: 13px; line-height: 2.0; flex: 1; }
.plan-points li { padding: 10px 0 10px 2px; border-top: 1px solid var(--k100); }
.plan--rec .plan-points li { border-top-color: var(--k800); }
.plan-target { font-size: 12px; color: var(--k400); margin-top: 18px; line-height: 1.9; }

/* ============ 比較表 ============ */
.cmp-wrap { margin-top: 60px; overflow-x: auto; border: 1px solid var(--k200); border-radius: 14px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; font-size: 13.5px; }
.cmp thead th { background: var(--k950); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 16px 18px; text-align: center; position: sticky; top: 0; }
.cmp thead th:first-child { text-align: left; border-radius: 0; }
.cmp thead .rec { background: var(--k700); }
.cmp thead .rec span { display: block; font-size: 10px; letter-spacing: .2em; color: var(--k300); margin-bottom: 2px; }
.cmp .grp th { background: var(--k100); color: var(--k950); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-align: left; padding: 10px 18px; }
.cmp tbody th { text-align: left; font-weight: 600; color: var(--k950); padding: 14px 18px; border-top: 1px solid var(--k100); vertical-align: top; width: 34%; background: #fff; }
.cmp tbody th small { display: block; font-size: 11.5px; font-weight: 400; color: var(--k400); margin-top: 2px; line-height: 1.8; }
.cmp tbody td { text-align: center; padding: 14px 14px; border-top: 1px solid var(--k100); vertical-align: middle; color: var(--k500); background: #fff; line-height: 1.8; }
.cmp tbody td.rec { background: var(--k50); font-weight: 600; color: var(--k950); }
.cmp td.no { color: var(--k300); }

/* ============ 数式 ============ */
.formula { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 34px; margin-top: 52px; }
.f-card { text-align: center; }
.f-num { font-family: var(--font-num); font-size: clamp(42px, 5.6vw, 68px); font-weight: 600; color: var(--k950); line-height: 1.2; }
.f-num small { font-family: var(--font-jp); font-size: .32em; font-weight: 700; }
.f-lbl { font-size: 12.5px; color: var(--k400); margin-top: 8px; letter-spacing: .04em; }
.f-op { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; color: var(--k300); }

/* ============ ○−パネル（primary/secondary の主従） ============ */
.oxwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 60px; align-items: start; }
.oxcard { border-radius: 16px; padding: 36px 38px 30px; }
.oxcard--do { background: #fff; border: 2px solid var(--k950); }
.oxcard--not { background: var(--k50); border: 1px solid var(--k100); }
.oxh { font-size: 16px; font-weight: 700; color: var(--k950); letter-spacing: .06em; }
.oxcard--not .oxh { color: var(--k400); }
.oxlist { list-style: none; margin-top: 16px; }
.oxlist li { padding: 13px 0 13px 32px; border-top: 1px solid var(--k100); font-size: 14px; position: relative; line-height: 1.95; }
.oxlist li::before { position: absolute; left: 2px; top: 13px; font-weight: 700; font-family: var(--font-num); }
.oxcard--do li::before { content: "○"; color: var(--k950); }
.oxcard--not li::before { content: "−"; color: var(--k300); }
.oxcard--not li { color: var(--k400); }

/* ============ チップ ============ */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; list-style: none; }
.chips li { font-size: 13.5px; background: #fff; border: 1.5px solid var(--k200); border-radius: 999px; padding: 9px 20px; line-height: 1.6; color: var(--k500); }
.chips--dark li { background: transparent; border-color: var(--k700); color: var(--k300); }

/* ============ 縦タイムライン（丸数字） ============ */
.steps { margin-top: 64px; max-width: 760px; }
.step { display: grid; grid-template-columns: 68px 1fr; gap: 0 36px; position: relative; padding-bottom: 48px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 33px; top: 68px; bottom: 0; width: 1.5px; background: var(--k200); }
.step:last-child::before { display: none; }
.step-no { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 1.5px solid var(--k950); color: var(--k950); font-family: var(--font-num); font-size: 21px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.step--now .step-no { background: var(--k950); color: #fff; }
.step-t { font-size: 19px; font-weight: 700; color: var(--k950); line-height: 1.6; padding-top: 8px; }
.step-t small { font-size: 12px; font-weight: 600; color: var(--k400); margin-left: 14px; letter-spacing: .06em; }
.step-d { font-size: 14px; margin-top: 8px; max-width: 44em; }

/* ============ FAQ（アコーディオン） ============ */
.faq { margin-top: 56px; max-width: 860px; }
.faq details { border-bottom: 1px solid var(--k100); }
.faq details:first-child { border-top: 1px solid var(--k100); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 30px; gap: 18px; align-items: start; padding: 24px 4px; font-size: 15.5px; font-weight: 700; color: var(--k950); line-height: 1.9; }
.faq summary::-webkit-details-marker { display: none; }
.faq .qmark { width: 32px; height: 32px; border-radius: 50%; background: var(--k950); color: #fff; font-family: var(--font-num); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.faq .plus { font-family: var(--font-num); font-size: 22px; font-weight: 400; color: var(--k400); text-align: center; margin-top: 4px; transition: transform .2s; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq .ans { padding: 2px 34px 28px 58px; font-size: 14.5px; line-height: 2.05; color: var(--k500); }

/* ============ 三層ダイアグラム（works） ============ */
.layers { margin-top: 64px; max-width: 680px; margin-left: auto; margin-right: auto; position: relative; }
.layers::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 1.5px; background: var(--k200); transform: translateX(-50%); }
.layer { position: relative; background: #fff; border: 1.5px solid var(--k200); border-radius: 14px; padding: 28px 34px 28px 96px; margin-bottom: 26px; }
.layer:last-child { margin-bottom: 0; }
.layer-no { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--k950); color: #fff; font-family: var(--font-num); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.layer-t { font-size: 17px; font-weight: 700; color: var(--k950); }
.layer-d { font-size: 13.5px; margin-top: 4px; line-height: 1.95; }

/* ============ 機能グリッド（works） ============ */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 44px; margin-top: 64px; }
.feat { border-top: 2px solid var(--k950); padding-top: 20px; }
.feat-t { font-size: 16.5px; font-weight: 700; color: var(--k950); }
.feat-d { font-size: 13.5px; margin-top: 8px; line-height: 2.0; }

/* ============ 表（概要） ============ */
.tb { width: 100%; border-collapse: collapse; margin-top: 48px; max-width: 780px; }
.tb th { width: 10em; text-align: left; font-size: 13px; color: var(--k950); font-weight: 700; padding: 18px 20px; background: var(--k50); border-bottom: 2px solid #fff; vertical-align: top; letter-spacing: .06em; }
.tb td { font-size: 14.5px; padding: 18px 24px; border-bottom: 1px solid var(--k100); line-height: 1.95; }

/* ============ フロー1行ストリップ ============ */
.flow-strip { border-top: 1px solid var(--k100); border-bottom: 1px solid var(--k100); padding: 38px 0; }
.flow-strip .inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 0; }
.fs-item { display: flex; align-items: center; }
.fs-dot { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--k950); color: var(--k950); font-family: var(--font-num); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.fs-t { font-size: 14.5px; font-weight: 700; color: var(--k950); }
.fs-t small { display: block; font-size: 11px; font-weight: 400; color: var(--k400); letter-spacing: .04em; }
.fs-line { width: 48px; height: 1.5px; background: var(--k200); margin: 0 18px; }
.flow-strip .lbl { font-family: var(--font-num); font-size: 12px; letter-spacing: .24em; color: var(--k400); margin-right: 30px; font-weight: 600; }

/* ============ クロージング ============ */
.close { background: var(--k950); color: #fff; text-align: center; padding: 116px 32px; position: relative; overflow: hidden; }
.close-circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 860px; height: 860px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.close h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 700; letter-spacing: .06em; line-height: 1.7; position: relative; }
.close p { color: var(--k400); margin-top: 24px; font-size: 14.5px; max-width: 46em; margin-left: auto; margin-right: auto; position: relative; }
.close .btn-p--rev { margin-top: 42px; position: relative; }
.close-note { font-size: 12.5px; color: var(--k400); margin-top: 20px; position: relative; }

/* ============ フッター ============ */
.foot { background: #0A0A0C; color: var(--k400); padding: 64px 0 48px; font-size: 13px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot-brand { font-size: 16px; font-weight: 700; letter-spacing: .12em; color: #fff; }
.foot-brand small { display: block; font-family: var(--font-num); font-size: 10px; letter-spacing: .26em; color: var(--k400); margin-top: 8px; font-weight: 600; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot-meta { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--k800); font-size: 12px; color: var(--k400); line-height: 2.1; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ============ フォーム ============ */
.form { max-width: 720px; margin-top: 8px; }
.fsec { display: flex; align-items: center; gap: 16px; font-size: 20px; font-weight: 700; color: var(--k950); margin: 64px 0 30px; }
.fsec-no { width: 38px; height: 38px; border-radius: 50%; background: var(--k950); color: #fff; font-family: var(--font-num); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.frow { margin-bottom: 34px; }
.frow > label, .frow > .flabel { display: block; font-size: 14.5px; font-weight: 600; color: var(--k950); margin-bottom: 12px; }
.req, .opt2 { font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 2px 9px; margin-left: 10px; vertical-align: 2px; letter-spacing: .08em; }
.req { color: #fff; background: var(--k950); }
.opt2 { color: var(--k400); background: var(--k100); }
.frow input[type="text"], .frow input[type="email"], .frow input[type="url"], .frow textarea {
  width: 100%; font-size: 15px; font-family: inherit; padding: 14px 16px;
  border: 1.5px solid var(--k200); border-radius: 8px; background: #fff; color: var(--k950);
}
.frow input:focus, .frow textarea:focus { outline: none; border-color: var(--k950); }
.frow ::placeholder { color: var(--k300); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 400; color: var(--k500); border: 1.5px solid var(--k200); border-radius: 8px; padding: 12px 18px; margin: 0; cursor: pointer; background: #fff; transition: border-color .15s; }
.choice label:hover { border-color: var(--k400); }
.choice input { accent-color: var(--k950); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.fnote { font-size: 12.5px; color: var(--k400); margin-top: 10px; }
.consent { display: flex; align-items: center; gap: 12px; font-size: 14.5px; margin-top: 48px; font-weight: 600; color: var(--k950); }
.consent input { accent-color: var(--k950); width: 18px; height: 18px; }
.submit { margin-top: 34px; }
.submit .btn-p { width: 100%; justify-content: center; font-size: 16px; padding: 20px 0; border-radius: 10px; }
.submit-note { font-size: 12.5px; color: var(--k400); margin-top: 16px; text-align: center; }
.form-divider { border: none; border-top: 1px solid var(--k100); margin: 56px 0; }

/* ============ SP ============ */
@media (max-width: 749px) {
  body { font-size: 14.5px; }
  .inner { padding: 0 22px; }
  .gh-nav { display: none; }
  .hero { padding: 76px 0 84px; }
  .hero-circle { right: -260px; width: 480px; height: 480px; }
  .ph { padding: 60px 0 48px; }
  .sec { padding: 72px 0; }
  .cols { grid-template-columns: 1fr; gap: 44px; }
  .cols--rev .col-text { order: 1; }
  .cols--rev .col-visual { order: 2; }
  .col-visual img, .col-visual svg { max-width: 280px; }
  .plate { padding: 28px 20px; box-shadow: 7px 7px 0 var(--k100); }
  .ghost-list { grid-template-columns: 1fr; gap: 40px; }
  .nums { grid-template-columns: 1fr; }
  .num { padding: 22px 0; }
  .num + .num { border-left: none; border-top: 1px solid var(--k800); }
  .frame { padding: 40px 24px 44px; }
  .ways { grid-template-columns: 1fr; }
  .way-head, .way-d, .way-foot { padding-left: 26px; padding-right: 26px; }
  .screens { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .oxwrap { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; gap: 32px; }
  .steps .step { grid-template-columns: 50px 1fr; gap: 0 20px; }
  .step-no { width: 50px; height: 50px; font-size: 17px; }
  .step::before { left: 24px; top: 50px; }
  .layer { padding: 22px 20px 22px 78px; }
  .layer-no { left: 16px; }
  .flow-strip .inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fs-line { display: none; }
  .flow-strip .lbl { margin-bottom: 4px; }
  .faq summary { grid-template-columns: 34px 1fr 24px; gap: 12px; }
  .faq .ans { padding-left: 46px; padding-right: 8px; }
  .foot-meta { flex-direction: column; }
}


/* ============================================================
   モノクロ確定レイヤー（2026-08-07 さき決定: 白黒グレーで行く）
   色レイヤーv4〜v7は全撤去。残すのは文字階層の修正と結論文の格上げのみ
   ============================================================ */
.punch { font-size: 17px; font-weight: 700; color: var(--k950); margin-top: 48px; letter-spacing: .04em; line-height: 2.0; }
.punch::before { content: ""; display: inline-block; width: 28px; height: 3px; background: var(--k950); border-radius: 2px; vertical-align: 6px; margin-right: 16px; }


/* ============================================================
   KAGAMIライトレイヤー v8（2026-08-07 さき指定の参考: jp.is-kagami.com）
   明るい青の世界: 白→淡青グラデ背景・半透明浮遊シェイプ・白角丸カード＋
   青影・青グラデ帯とボタン・ネイビー文字。ダーク面は青グラデに置換
   ============================================================ */
:root {
  --kg-ink: #0B2C55;        /* 見出しネイビー */
  --kg-body: #3C5878;       /* 本文 */
  --kg-quiet: #7A93AC;
  --kg-blue: #1668DC;       /* 主役ブルー */
  --kg-blue2: #3D9BF5;      /* グラデの明側 */
  --kg-deep: #0F4FBE;
  --kg-t1: #EAF3FE;         /* 淡青タイル */
  --kg-t2: #F2F8FE;
  --kg-line: #DCE9F7;
  --grad-band: linear-gradient(120deg, #0F4FBE 0%, #2B7DE9 100%);
  --grad-btn: linear-gradient(90deg, #1668DC 0%, #3D9BF5 100%);
  --grad-page: linear-gradient(180deg, #F2F8FE 0%, #E7F1FD 100%);
  --card-sh: 0 12px 32px rgba(22, 90, 190, .10);
}
body { color: var(--kg-body); }
.sec-h, .ph h1, .gitem-t, .promise-t, .layer-t, .feat-t, .screen-t, .way-t, .row-t, .plan-name, .oxh, .rec-t { color: var(--kg-ink); }
.sec-note { color: var(--kg-quiet); }
img { filter: none; }

/* ヘッダー */
.gh { border-bottom: 1px solid var(--kg-line); }
.gh-brand { color: var(--kg-ink); }
.gh-nav { gap: 22px; }
.gh-nav a { font-size: 12.5px; color: var(--kg-body); }
.gh-nav a.on { color: var(--kg-blue); border-bottom-color: var(--kg-blue); }
.gh-cta { background: var(--grad-btn); border-radius: 999px; box-shadow: 0 6px 16px rgba(22,104,220,.3); }

/* ヒーロー: 光のグラデ＋浮遊シェイプ */
.hero { background: linear-gradient(165deg, #FFFFFF 0%, #EDF6FE 45%, #DCEDFD 100%); color: var(--kg-ink); }
.hero h1 { color: var(--kg-ink); }
.hero .outline { -webkit-text-stroke: 0; color: var(--kg-blue); background: none; }
.hero-sub { color: var(--kg-body); }
.hero-note { color: var(--kg-quiet); }
.hero-eyebrow { color: var(--kg-blue); }
.hero-circle { border: none; border-radius: 56px; background: linear-gradient(135deg, rgba(61,155,245,.30), rgba(22,104,220,.10)); transform: translateY(-50%) rotate(14deg); width: 500px; height: 500px; right: -100px; }
.hero-circle::before { border: none; border-radius: 40px; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(61,155,245,.18)); inset: 90px -60px -40px 120px; transform: rotate(-10deg); }

/* セクションラベル: 青ドット＋青文字（KAGAMIの「● ラベル」） */
.eyebrow, .ph-eyebrow { color: var(--kg-blue); }
.eyebrow::before, .ph-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kg-blue); margin-right: 10px; vertical-align: 2px; }
.on-dark .eyebrow, .sec--dark .eyebrow { color: #A9D3FB; }
.on-dark .eyebrow::before, .sec--dark .eyebrow::before { background: #A9D3FB; }

/* 帯: 淡青グラデ／ダーク帯は青グラデ */
.sec--band { background: var(--grad-page); }
.sec--dark, .chap { background: var(--grad-band) !important; color: #fff; }
.sec--dark .sec-h { color: #fff; }
.sec--dark .sec-p { color: rgba(255,255,255,.85); }
.close { background: var(--grad-band); }
.close p { color: rgba(255,255,255,.85); }
.close-note { color: rgba(255,255,255,.7); }
.foot { background: linear-gradient(120deg, #0B2C55 0%, #14459B 60%, #1668DC 130%); color: rgba(255,255,255,.8); }
.foot-meta { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }
.foot-brand small { color: rgba(255,255,255,.5); }

/* ボタン: 青グラデピル */
.btn-p, .on-dark .btn-p { background: var(--grad-btn); color: #fff; box-shadow: 0 8px 22px rgba(22,104,220,.32); }
.btn-p:hover { opacity: .9; }
.btn-p--rev { background: #fff; color: var(--kg-blue); box-shadow: 0 8px 22px rgba(10,40,90,.25); }
.btn-s { background: #fff; color: var(--kg-blue); border: 1.5px solid var(--kg-blue); }
.btn-s:hover { background: var(--kg-t1); color: var(--kg-blue); }
.on-dark .btn-s { color: #fff; border-color: rgba(255,255,255,.8); background: transparent; }
.tlink { color: var(--kg-blue); border-bottom-color: var(--kg-blue); }

/* 数字帯: 白→淡青・青い大数字 */
.nums-dark { background: linear-gradient(180deg, #FFFFFF 0%, #F0F7FE 100%); border-top: 1px solid var(--kg-line); border-bottom: 1px solid var(--kg-line); color: var(--kg-ink); }
.nums-dark .num-v { color: var(--kg-blue); }
.nums-dark .num-l { color: var(--kg-quiet); }
.nums-dark .num + .num { border-left: 1px solid var(--kg-line); }
.nums-dark .nums-note { color: var(--kg-quiet); }

/* カード類: 白角丸＋青影 */
.way, .screen, .layer, .browser, .oxcard--do, .faq-wrap, .plan { border: none; border-radius: 18px; box-shadow: var(--card-sh); background: #fff; }
.way-foot { background: var(--kg-t2); color: var(--kg-quiet); }
.way-tag { background: var(--kg-t1); color: var(--kg-blue); }
.screen { border: none; }
.sec--band .screen, .sec--aqua .screen { box-shadow: var(--card-sh); }
.plate { border: none; border-radius: 20px; box-shadow: 0 16px 40px rgba(22, 90, 190, .14); }
.sec--band .plate, .sec--warm .plate, .sec--aqua .plate { box-shadow: 0 16px 40px rgba(22, 90, 190, .14); }
.frame { border: none; box-shadow: var(--card-sh); border-radius: 20px; }
.frame-tag { background: var(--grad-btn); }
.oxcard--not { background: var(--kg-t2); border: none; border-radius: 18px; }
.oxcard--do { border: 2px solid var(--kg-blue); box-shadow: var(--card-sh); }
.oxcard--do li::before { color: var(--kg-blue); }
.oxcard--not .oxh { color: var(--kg-quiet); }
.oxlist li { border-top-color: var(--kg-line); }
.chips li { border: 1px solid var(--kg-line); box-shadow: 0 2px 8px rgba(22,90,190,.06); color: var(--kg-body); }
.chips--dark li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }

/* 丸数字・番号: 青 */
.fsec-no, .layer-no, .faq .qmark { background: var(--kg-blue); }
.faq .plus { color: var(--kg-blue); }
.step-no { border-color: var(--kg-blue); color: var(--kg-blue); background: #fff; }
.step--now .step-no { background: var(--kg-blue); border-color: var(--kg-blue); color: #fff; }
.step::before { background: var(--kg-line); }
.fs-dot { border-color: var(--kg-blue); color: var(--kg-blue); }
.fs-t { color: var(--kg-ink); }
.flow-strip { border-color: var(--kg-line); }
.screen-no, .rec-cat { color: var(--kg-blue); }
.ghost, .gitem-no { color: #E2EEFA; }
.sec--band .gitem-no, .sec--aqua .gitem-no { color: #D8E8F8; }
.promise-no { color: #E2EEFA; }
.chap-ghost { color: rgba(255,255,255,.10); }
.chap-no { color: rgba(255,255,255,.6); }
.chap-sub { color: rgba(255,255,255,.75); }

/* プラン: おすすめ=青グラデパネル */
.plan { border-top: none; }
.plan--rec { background: var(--grad-band); color: rgba(255,255,255,.9); }
.plan--rec .plan-catch { color: rgba(255,255,255,.75); }
.plan--rec .plan-points li { border-top-color: rgba(255,255,255,.25); }
.plan--rec .plan-target { color: rgba(255,255,255,.7); }
.plan-badge { background: #fff; border: none; color: var(--kg-blue); box-shadow: 0 4px 12px rgba(10,40,90,.2); }
.plan-points li { border-top-color: var(--kg-line); }
.plan-target { color: var(--kg-quiet); }
.plan-catch { color: var(--kg-quiet); }

/* 比較表 */
.cmp-wrap { border: 1px solid var(--kg-line); border-radius: 16px; }
.cmp thead th { background: var(--kg-deep); }
.cmp thead .rec { background: var(--kg-blue2); color: #fff; }
.cmp thead .rec span { color: rgba(255,255,255,.8); }
.cmp tbody td.rec { background: var(--kg-t1); color: var(--kg-ink); }
.cmp .grp th { background: var(--kg-t2); color: var(--kg-ink); }
.cmp tbody th, .cmp tbody td { border-top-color: var(--kg-line); }
.cmp tbody th small { color: var(--kg-quiet); }
.cmp td.no { color: #B9C7D6; }

/* 数式・料金 */
.formula .f-num, .bigprice .v { color: var(--kg-blue); }
.price-rule { background: var(--kg-blue); }
.punch { color: var(--kg-ink); }
.punch::before { background: var(--kg-blue); }

/* 表・フォーム */
.tb th { background: var(--kg-t2); color: var(--kg-ink); }
.tb td { border-bottom-color: var(--kg-line); }
.faq details { border-bottom-color: var(--kg-line); }
.faq details:first-child { border-top-color: var(--kg-line); }
.faq summary { color: var(--kg-ink); }
.faq .ans { color: var(--kg-body); }
.frow input[type="text"], .frow input[type="email"], .frow input[type="url"], .frow textarea { border-color: #C9DCF1; border-radius: 10px; }
.frow input:focus, .frow textarea:focus { border-color: var(--kg-blue); }
.choice label { border-color: #C9DCF1; border-radius: 10px; }
.choice label:hover { border-color: var(--kg-blue); }
.choice input, .consent input { accent-color: var(--kg-blue); }
.req { background: var(--kg-blue); }
.opt2 { background: var(--kg-t1); color: var(--kg-quiet); }
.frow > label, .frow > .flabel, .consent { color: var(--kg-ink); }
.fsec { color: var(--kg-ink); }
.submit .btn-p { border-radius: 12px; }
.ph { border-bottom: 1px solid var(--kg-line); background: linear-gradient(165deg, #FFFFFF 30%, #EFF6FE 100%); }
.ph-lead { color: var(--kg-body); }
.career-inline .ci { border-left-color: #A9D3FB; }
.rec-link { border-bottom-color: var(--kg-line); }
.rec-link:first-child { border-top-color: var(--kg-line); }
.rec-link:hover { background: var(--kg-t2); }
.rec-arrow { color: var(--kg-blue); }
.mig-h2 { color: var(--kg-ink); }


/* v8 微修正: セレクタ強度（ヒーロー中抜き→青ベタ）・ヒーロー副ボタンのライト化 */
.hero h1 .outline { -webkit-text-stroke: 0; color: var(--kg-blue); background: none; }
.hero .btn-s, .hero.on-dark .btn-s { color: var(--kg-blue); border-color: var(--kg-blue); background: #fff; }
.hero .btn-s:hover { background: var(--kg-t1); }


/* ============================================================
   v9（2026-08-07）: メニュー対応の再編＋章帯の可読性修正
   - 章帯: グレー文字廃止→白ピルラベル＋白文字
   - KAGAMI /price 型のアンカーカード
   ============================================================ */
.chap-no { display: inline-block; background: #fff; color: var(--kg-blue); font-size: 11.5px; font-weight: 700; padding: 5px 18px; border-radius: 999px; letter-spacing: .2em; }
.chap h2 { color: #fff; }
.chap-sub { color: rgba(255,255,255,.94); }

.acards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.acard { background: #fff; border-radius: 16px; box-shadow: var(--card-sh); padding: 28px 20px 24px; text-align: center; text-decoration: none; font-weight: 700; color: var(--kg-ink); font-size: 16.5px; transition: transform .15s; }
.acard:hover { transform: translateY(-2px); }
.acard span { display: block; margin-top: 10px; color: var(--kg-blue); font-size: 15px; }
@media (max-width: 749px) { .acards { grid-template-columns: 1fr; } }


/* v10: 注文の流れ ビフォー→アフター図解（機能ページの主役） */
.ba-wrap { margin-top: 56px; display: grid; gap: 28px; }
.ba-row { background: #fff; border-radius: 18px; box-shadow: var(--card-sh); padding: 32px 36px; }
.ba-row--after { border: 2px solid var(--kg-blue); }
.ba-tag { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; border-radius: 999px; padding: 5px 18px; }
.ba-row--before .ba-tag { background: var(--kg-t2); color: var(--kg-quiet); }
.ba-row--after .ba-tag { background: var(--kg-blue); color: #fff; }
.ba-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ba-box { flex: 1 1 140px; background: var(--kg-t2); border-radius: 12px; padding: 16px 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--kg-ink); display: flex; align-items: center; justify-content: center; line-height: 1.8; min-height: 64px; }
.ba-row--after .ba-box { background: var(--kg-t1); }
.ba-arrow { align-self: center; font-family: var(--font-num); font-size: 20px; color: var(--kg-quiet); flex: 0 0 auto; }
.ba-row--after .ba-arrow { color: var(--kg-blue); }
.ba-note { font-size: 13px; margin-top: 16px; line-height: 1.9; }
.ba-row--before .ba-note { color: var(--kg-quiet); }
.ba-row--after .ba-note { color: var(--kg-blue); font-weight: 600; }
@media (max-width: 749px) { .ba-flow { flex-direction: column; } .ba-arrow { transform: rotate(90deg); align-self: center; } }


/* ============================================================
   v11（2026-08-08）: HP文章v4反映用の新設部品
   ph-catch / sec-catch / nextcard / oklist / reclist / fbadge /
   legend / notice / acards--4 / duo（支援の中身の対比）
   ============================================================ */
/* ヒーロー・節の太字キャッチ（3層構造の2段目） */
.ph-catch { font-size: 18px; font-weight: 700; color: var(--kg-ink); margin-top: 20px; position: relative; }
.sec-catch { font-size: clamp(17px, 2vw, 20px); font-weight: 700; color: var(--kg-ink); margin-top: 18px; line-height: 1.9; }

/* 次ページ予告カード */
.nextcard { display: flex; align-items: center; gap: 24px; max-width: 720px; margin: 96px auto 0; background: #fff; border-radius: 18px; box-shadow: var(--card-sh); padding: 30px 36px; text-decoration: none; transition: transform .15s; }
.nextcard:hover { transform: translateY(-2px); }
.nextcard-tag { flex: 0 0 auto; background: var(--kg-blue); color: #fff; font-family: var(--font-num); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; border-radius: 999px; padding: 5px 16px; }
.nextcard-body { flex: 1; }
.nextcard-t { font-size: 20px; font-weight: 700; color: var(--kg-ink); line-height: 1.6; }
.nextcard-d { font-size: 14px; color: var(--kg-body); margin-top: 4px; line-height: 1.9; }
.nextcard-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--kg-blue); color: var(--kg-blue); font-family: var(--font-num); font-size: 17px; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.nextcard:hover .nextcard-arrow { background: var(--kg-blue); color: #fff; }
@media (max-width: 749px) { .nextcard { flex-wrap: wrap; padding: 24px 22px; gap: 14px; margin-top: 64px; } .nextcard-body { flex-basis: 100%; order: 3; } }

/* チェックリストカード（おすすめ3項目） */
.oklist { list-style: none; max-width: 720px; background: #fff; border-radius: 16px; box-shadow: var(--card-sh); padding: 12px 36px; margin-top: 40px; }
.oklist li { padding: 16px 0 16px 40px; border-top: 1px solid var(--kg-line); position: relative; font-size: 15px; font-weight: 600; color: var(--kg-ink); line-height: 1.9; }
.oklist li:first-child { border-top: none; }
.oklist li::before { content: "✓"; position: absolute; left: 0; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--kg-blue); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* リンク行リスト（実装の記録） */
.reclist { max-width: 860px; background: #fff; border-radius: 16px; box-shadow: var(--card-sh); padding: 8px 32px; margin-top: 48px; }
.reclist a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 8px; border-top: 1px solid var(--kg-line); text-decoration: none; font-size: 15px; font-weight: 600; color: var(--kg-ink); line-height: 1.9; transition: background .15s; }
.reclist a:first-child { border-top: none; }
.reclist a:hover { background: var(--kg-t2); }
.reclist a::after { content: "→"; font-family: var(--font-num); color: var(--kg-blue); flex: 0 0 auto; }

/* 機能ラベルバッジ */
.fbadge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 12px; margin-left: 10px; vertical-align: 3px; letter-spacing: .04em; white-space: nowrap; }
.fbadge--std { background: var(--kg-blue); color: #fff; }
.fbadge--opt { background: #fff; color: var(--kg-blue); border: 1.5px solid var(--kg-blue); }
.fbadge--ops { background: var(--kg-t1); color: var(--kg-quiet); }

/* ラベル凡例カード・お知らせ小カード */
.legend { background: var(--kg-t2); border-radius: 14px; padding: 24px 30px; max-width: 860px; margin-top: 48px; font-size: 13.5px; line-height: 2.1; }
.legend .fbadge { margin-left: 0; margin-right: 8px; vertical-align: 1px; }
.legend-note { font-size: 12.5px; color: var(--kg-quiet); margin-top: 10px; }
.notice { background: var(--kg-t1); border-radius: 12px; padding: 18px 26px; font-size: 13.5px; line-height: 2.0; max-width: 720px; margin: 28px auto 0; color: var(--kg-body); }

/* アンカーカード4列（Q&A） */
.acards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 749px) { .acards--4 { grid-template-columns: 1fr; } }

/* 運用プランのカード（3.3万=白+青枠 / 5.5万=青グラデの推奨 / 11万=白+青枠。2026-08-19 K10で3段化） */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 60px; align-items: stretch; }
.duo-card { border-radius: 18px; padding: 40px 38px 36px; display: flex; flex-direction: column; }
.duo-card--basic { background: #fff; border: 2px solid var(--kg-blue); box-shadow: var(--card-sh); }
.duo-card--plus { background: var(--grad-band); color: rgba(255,255,255,.9); }
.duo-name { font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--kg-blue); }
.duo-card--plus .duo-name { color: #fff; }
.duo-price { font-family: var(--font-num); font-size: clamp(28px, 3vw, 36px); font-weight: 600; color: var(--kg-ink); margin-top: 10px; line-height: 1.3; }
.duo-price .duo-tax { font-family: var(--font-jp); font-size: 16px; font-weight: 700; white-space: nowrap; }  /* 税込が折り返さないように（2026-08-19） */
.duo-price small { font-family: var(--font-jp); font-size: .4em; font-weight: 700; }
.duo-card--plus .duo-price { color: #fff; }
.duo-list { list-style: none; margin-top: 20px; flex: 1; }
.duo-list li { padding: 12px 0 12px 30px; border-top: 1px solid var(--kg-line); font-size: 13.5px; position: relative; line-height: 1.95; }
.duo-list li::before { content: "○"; position: absolute; left: 2px; top: 12px; font-weight: 700; font-family: var(--font-num); color: var(--kg-blue); }
.duo-card--plus .duo-list li { border-top-color: rgba(255,255,255,.25); }
.duo-card--plus .duo-list li::before { color: #fff; }
.duo-note { font-size: 13px; margin-top: 18px; line-height: 2.0; }
.duo-card--plus .duo-note { color: rgba(255,255,255,.8); }
.duo--3 { grid-template-columns: repeat(3, 1fr); }  /* 運用プラン3段化（2026-08-19 K10） */
@media (max-width: 1023px) { .duo--3 { grid-template-columns: 1fr; } }
@media (max-width: 749px) { .duo { grid-template-columns: 1fr; } .duo-card { padding: 30px 24px; } }

/* 機能の流れ(1)〜(4): stepブロック内にカードを吊るす */
.step-cards { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 749px) { .step-cards { grid-template-columns: 1fr; } }
.step--flow { padding-bottom: 64px; }
.step--flow .step-d { max-width: none; }


/* ============================================================
   v12（2026-08-08）: 画像発注スロット（画像が入ったらこのレイヤーごと削除）
   ============================================================ */
.imgslot { border: 2px dashed var(--kg-blue2); background: var(--kg-t2); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.imgslot-id { align-self: flex-start; font-family: var(--font-num); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--kg-blue); border-radius: 999px; padding: 3px 12px; letter-spacing: .08em; }
.imgslot-spec { font-size: 11.5px; font-weight: 700; color: var(--kg-quiet); letter-spacing: .04em; }
.imgslot-prompt { font-size: 11.5px; color: var(--kg-body); line-height: 1.85; }
.imgslot--icon { width: 92px; min-height: 92px; border-radius: 18px; padding: 10px 6px; align-items: center; justify-content: center; text-align: center; gap: 4px; flex: 0 0 auto; }
.imgslot--icon .imgslot-id { align-self: center; font-size: 9.5px; padding: 2px 8px; }
.imgslot--icon .imgslot-spec { font-size: 9px; font-weight: 600; }
.gitem-media { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: center; }
@media (max-width: 749px) { .gitem-media { grid-template-columns: 1fr; gap: 20px; } }


/* ============================================================
   v13（2026-08-08 さき指示）: KAGAMI型アイコンカード
   アイコンを主役サイズに（カード上部中央・大きく）
   ============================================================ */
.way-head--icon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 40px; }
.way-head--icon img { width: 128px; height: 128px; object-fit: contain; margin-bottom: 8px; }
.way-head--icon + .way-d { text-align: left; }
.icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.icard { background: #fff; border-radius: 18px; box-shadow: var(--card-sh); padding: 40px 32px 36px; text-align: center; }
.icard img { width: 112px; height: 112px; object-fit: contain; }
.icard-t { font-size: 18px; font-weight: 700; color: var(--kg-ink); margin-top: 18px; line-height: 1.75; }
.icard-d { font-size: 13.5px; color: var(--kg-body); margin-top: 12px; line-height: 2.0; text-align: left; }
@media (max-width: 749px) {
  .icards { grid-template-columns: 1fr; }
  .way-head--icon { padding-top: 30px; }
  .way-head--icon img, .icard img { width: 100px; height: 100px; }
}


/* ============================================================
   v14（2026-08-08 さき承認・KAGAMI比較38項目の共通レイヤー）
   部品の1言語化: ボタン・ゴースト・タイポ・リンク・ヘッダー・
   フッター・CTA帯・ピル・カード枠
   ============================================================ */
/* 1. ボタン統一: 高さ60pxピル・天地中央 */
.btn-p, .btn-s { height: 60px; padding: 0 40px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 999px; font-size: 15px; }
.gh-cta { height: 44px; padding: 0 26px; display: inline-flex; align-items: center; box-sizing: border-box; }
.submit .btn-p { width: 100%; height: 64px; border-radius: 14px; justify-content: center; }

/* 2. ゴースト英字の規律: ブランド青5%・下端切断禁止・本文非干渉 */
.ph { border-bottom: none; background: linear-gradient(180deg, #F2F8FE 0%, #FCFDFF 70%, #FFFFFF 100%); }
.ph .inner { position: relative; z-index: 1; }
.ph-ghost { color: var(--kg-blue); opacity: .05; font-size: clamp(100px, 12vw, 170px); line-height: 1; bottom: 0; right: -0.06em; z-index: 0; }

/* 3. ヒーロー右の質量: CSSシェイプ（各ページ共通の器） */
.ph-deco { position: absolute; right: -40px; top: 40px; width: 300px; height: 300px; z-index: 0; pointer-events: none; }
.ph-deco::before { content: ""; position: absolute; inset: 0; border-radius: 64px; background: linear-gradient(135deg, rgba(61,155,245,.14), rgba(22,104,220,.05)); transform: rotate(14deg); }
.ph-deco::after { content: ""; position: absolute; inset: 90px -50px -30px 110px; border-radius: 44px; background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(61,155,245,.12)); transform: rotate(-8deg); }

/* 4. 見出しの声量階層 */
.ph h1 { font-size: clamp(34px, 3.8vw, 48px); letter-spacing: .03em; }
.sec-h { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: .02em; }
.sec-catch, .ph-catch { font-weight: 600; }

/* 5. ピル体系の統一: 機能バッジの青ベタ降格（青ベタはCTA専用） */
.fbadge--std { background: var(--kg-t1); color: var(--kg-deep); }
.fbadge { font-size: 11.5px; padding: 4px 12px; letter-spacing: .02em; }

/* 6. ヘアライン全廃・凡例/注記カードの造形統一 */
.flow-strip { border: none; }
.legend { background: #fff; border-radius: 16px; border-left: 4px solid var(--kg-blue); box-shadow: var(--card-sh); padding: 28px 36px; }

/* 7. 孤立行の解消 */
.sec-p, .ph-lead, .hero-sub, .gitem-d, .screen-d, .icard-d, .way-d, .step-d, .faq .ans, .duo-note, .plan-target { text-wrap: pretty; }
h1, h2, h3, .sec-h, .gitem-t, .screen-t, .icard-t, .way-t { text-wrap: balance; }

/* 8. リンク下線の軽量化 */
.tlink { border-bottom: none; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(22,104,220,.45); }
.tlink:hover { opacity: 1; text-decoration-color: var(--kg-blue); }

/* 9. ヘッダーの声量 */
.gh .inner { height: 88px; gap: 40px; }
.gh-brand { font-size: 18px; }
.gh-nav { gap: 32px; }
.gh-nav a { font-size: 14px; letter-spacing: .02em; }

/* 10. フッター2層 */
.foot { padding: 80px 0 40px; }
.foot-tag { margin-top: 16px; font-size: 13.5px; color: rgba(255,255,255,.78); letter-spacing: .04em; }
.foot-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 44px; }
.foot-nav a { position: relative; padding-left: 14px; text-decoration: none; font-size: 14px; line-height: 1.9; }
.foot-nav a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #3D9BF5; }
.foot-nav a:hover { color: #fff; }
.foot-meta a { text-decoration: none; margin-right: 28px; }
.foot-meta a:hover { color: #fff; }

/* 11. CTA帯の整え */
.close { padding: 96px 32px 88px; border-radius: 48px 48px 0 0; }
.close-circle { width: 1200px; height: 1200px; top: auto; bottom: -820px; }
.close-btns { margin-top: 42px; display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; }

/* 26/33/34. 枠線カードの廃止（白面＋影の1言語・上辺アクセントバーで役割表示） */
.oxcard--do, .duo-card--basic { border: none; box-shadow: var(--card-sh); position: relative; overflow: hidden; }
.oxcard--do::before, .duo-card--basic::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-btn); }
.oxcard--not { background: var(--kg-t2); }
.oxcard--not .oxh { color: var(--kg-ink); }
.oxwrap { align-items: stretch; }

/* 25. featsの濃紺罫線→短いアクセントバー */
.feat { border-top: none; padding-top: 18px; position: relative; }
.feat::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--kg-blue); border-radius: 2px; }

/* 29. プランカード: 空洞解消＋スタンダード持ち上げ */
.plans { align-items: start; }
.plan-points { flex: none; }
.plan--rec { transform: translateY(-16px); box-shadow: 0 24px 48px rgba(15,79,190,.25); }

/* 30. 比較表の列柱 */
.cmp tbody td { border-left: 1px solid var(--kg-t1); font-weight: 600; }
.cmp tbody td.rec { border-inline: 1px solid #BFDBFE; }
.cmp td.no { font-weight: 400; }

/* 28. 対カードの等高廃止 */
.ways { align-items: start; }

/* 35. アイコンカード左揃え */
.icard { text-align: left; }
.icard img { display: block; }
.icard-t { font-size: 18px; line-height: 1.6; }

/* SP調整 */
@media (max-width: 749px) {
  .gh .inner { height: 68px; }
  .ph-deco { display: none; }
  .close { border-radius: 28px 28px 0 0; }
  .foot-nav { grid-template-columns: 1fr 1fr; }
  .plan--rec { transform: none; }
}


/* ============================================================
   v15（2026-08-08 さき指示）: 上辺の色バー装飾を全廃。
   secondaryカードは薄い背景塗りで表現（基本サポート等）
   ============================================================ */
.oxcard--do::before, .duo-card--basic::before { content: none; }
.duo-card--basic { background: var(--kg-t2); box-shadow: none; }
.duo-card--basic .duo-list li { border-top-color: rgba(11,44,85,.08); }
.duo-card--basic .duo-name { background: #fff; color: var(--kg-deep); display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px; }


/* v16（2026-08-08 さき指示・恒久）: 角丸カードの1辺着色は全廃 */
.legend { border-left: none; }


/* ============================================================
   v17（2026-08-08 さき指示）: CTA帯ボタン位置修正・区切り線・
   凡例の行間・ステップ番号のグラデ格上げ
   ============================================================ */
/* CTA帯: 旧レイヤーのmargin-top:42px残留で主ボタンが21px沈んでいた修正 */
.close .btn-p--rev { margin-top: 0; }

/* 同背景セクション間の区切り線（1px・中身幅） */
.secline { border: none; height: 1px; background: var(--kg-line); max-width: 1120px; margin: 0 auto; }
.secline--narrow { max-width: 860px; }

/* 凡例: バッジ行の高さ */
.legend > p { margin-bottom: 14px; }
.legend > p:first-child { margin-bottom: 18px; }
.legend .fbadge { margin-right: 10px; margin-left: 0; }
.legend-note { margin-top: 18px; margin-bottom: 0 !important; }
.legend-note + .legend-note { margin-top: 8px; }

/* ステップ番号: 青グラデ円＋点線接続（流れ・作業・契約フロー共通） */
.step-no { background: var(--grad-btn); border: none; color: #fff; box-shadow: 0 10px 24px rgba(22,104,220,.28); }
.step::before { width: 0; background: none; border-left: 1.5px dashed #B9D6F5; }
.step--flow .step-no { font-size: 20px; }
.step-t small { font-family: var(--font-num); font-size: 11px; font-weight: 600; color: var(--kg-quiet); letter-spacing: .22em; margin-left: 14px; }


/* v18（2026-08-08 さき指示）: テキストリンクの矢印を丸塗りアイコンに（下線付き矢印の解消） */
.tlink::after { content: ""; display: inline-block; width: 21px; height: 21px; border-radius: 50%; margin-left: 8px; vertical-align: -5px; background-color: var(--kg-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h6M6 3.5 8.5 6 6 8.5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 11px; }


/* v19（2026-08-09）: CTA帯の角丸の外側を前セクション色でつなぐ */
.close-wrap--band { background: #E7F1FD; }
.close-wrap--white { background: #fff; }


/* v20（2026-08-09）: 本文コントラスト強化（薄い青灰の長文を濃紺寄りに） */
:root { --kg-body: #2F4C6E; }


/* ============================================================
   v21（2026-08-09 トップ全面レビューの全ページ共通分）
   セクション余白統一96px・ヘッダー/フッター/数字帯の声量↑・CTA帯格上げ
   ============================================================ */
.sec { padding: 96px 0; }
.gh .inner { height: 92px; }
.gh-brand { font-size: 19px; }
.gh-nav a { font-size: 14.5px; }
.gh-cta { height: 48px; padding: 0 30px; font-size: 14.5px; }
.nums-dark .num-l { font-size: 14px; color: var(--kg-body); }
.foot { font-size: 14px; }
.foot-nav a { font-size: 14.5px; }
.foot-tag { font-size: 14px; }
.foot-meta { font-size: 12.5px; }
.close h2 { font-size: clamp(28px, 3.6vw, 46px); }
.close p { font-size: 15.5px; color: rgba(255,255,255,.92); }
.close .btn-p--rev, .close .btn-p { height: 68px; padding: 0 54px; font-size: 16.5px; }
.close-note { font-size: 13px; }
@media (max-width: 749px) {
  .sec { padding: 68px 0; }
  .gh .inner { height: 70px; }
  .close .btn-p--rev, .close .btn-p { height: 60px; padding: 0 36px; font-size: 15px; }
}


/* ============================================================
   v25（2026-08-10 さき指示）: タブレット帯（750〜1023px）
   これまで 750〜1439px はPC用レイアウトがそのまま縮んでいた。
   既存ルールは書き換えず、この層で上書きする（加算方式）
   ============================================================ */

/* --- 全幅共通の底上げ: 11.5px未満の文字とタップ領域32px未満のリンクを解消 --- */
.foot-brand small { font-size: 11.5px; }
.fs-t small { font-size: 11.5px; }
.screen-t .badge { font-size: 11.5px; }
.req, .opt2 { font-size: 11.5px; }
.cmp thead .rec span { font-size: 11.5px; }
.tlink { padding: 4px 0; }
.foot-nav a { padding-top: 4px; padding-bottom: 4px; }
.foot-meta a { display: inline-block; padding: 5px 0; }

/* v26（2026-08-10 さき指示「ドロワーメニューがいる。タブレットを含む幅で」）:
   v25の「ヘッダー2段組」は撤去し、**1079px以下はドロワー（ハンバーガー）に一本化**する。
   理由: 2段組は7項目を詰め込む形で窮屈だったうえ、749px以下は .gh-nav が display:none で
   メニュー自体が存在せずフッターからしか回遊できなかった。ドロワーなら両方が同時に解決する。
   1行ナビに必要な幅は実測1037pxなので、境界は1079/1080px（PCは1080px以上）。
   JSは使わない（checkbox+label方式）＝デザイン指示書の「派手なアニメーション不可」に沿い
   スライドは0.25sの控えめな1回のみ。 */
.gh-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.gh-burger,
.gh-scrim,
.gh-drawer { display: none; }

@media (max-width: 1079px) {
  .gh .inner { gap: 14px; }
  .gh-nav { display: none; }
  .gh-cta { margin-left: auto; height: 42px; padding: 0 20px; font-size: 13.5px; }

  /* ハンバーガー */
  .gh-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--kg-line);
    border-radius: 12px;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .gh-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--kg-blue);
    transition: transform .2s ease, opacity .2s ease;
  }
  .gh-drawer-toggle:checked ~ .gh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gh-drawer-toggle:checked ~ .gh-burger span:nth-child(2) { opacity: 0; }
  .gh-drawer-toggle:checked ~ .gh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 背面のスクリム（外側タップで閉じる） */
  .gh-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 44, 85, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 60;
  }
  .gh-drawer-toggle:checked ~ .gh-scrim { opacity: 1; visibility: visible; }

  /* ドロワー本体 */
  .gh-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    background: linear-gradient(180deg, #fff 0%, var(--kg-t2) 100%);
    box-shadow: -10px 0 40px rgba(11, 44, 85, .18);
    padding: 68px 26px 32px;
    box-sizing: border-box;
    transform: translateX(105%);
    transition: transform .25s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 70;
  }
  .gh-drawer-toggle:checked ~ .gh-drawer { transform: translateX(0); }

  .gh-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; cursor: pointer; }
  .gh-close::before,
  .gh-close::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--kg-blue);
  }
  .gh-close::before { transform: rotate(45deg); }
  .gh-close::after { transform: rotate(-45deg); }

  .gh-drawer-nav { display: flex; flex-direction: column; }
  .gh-drawer-nav a {
    font-size: 16px;
    font-weight: 700;
    color: var(--kg-ink);
    text-decoration: none;
    padding: 16px 6px;
    border-bottom: 1px solid var(--kg-line);
    position: relative;
  }
  .gh-drawer-nav a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid var(--kg-blue2);
    border-bottom: 2px solid var(--kg-blue2);
    transform: rotate(-45deg);
  }
  .gh-drawer-nav a.on { color: var(--kg-blue); }

  .gh-drawer-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .gh-drawer-cta,
  .gh-drawer-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .gh-drawer-cta { background: var(--grad-btn); color: #fff; box-shadow: 0 4px 30px rgba(61, 155, 245, .5); }
  .gh-drawer-sub { background: #fff; color: var(--kg-blue); border: 1.5px solid var(--kg-line); }

  /* 開いている間は背面のページをスクロールさせない（:has() で親を選ぶ・JS不要） */
  body:has(.gh-drawer-toggle:checked) { overflow: hidden; }
}

/* 1080px以上ではドロワー関連を完全に無効化（PCは従来の1行ナビ） */
@media (min-width: 1080px) {
  .gh-burger,
  .gh-scrim,
  .gh-drawer { display: none; }
}

/* --- 装飾の巨大シェイプを版面内に収める（親のoverflow:hiddenに頼らず実寸で封じる） --- */
@media (min-width: 750px) and (max-width: 1279px) {
  .close-circle { width: min(1200px, 92vw); height: min(1200px, 92vw); bottom: calc(340px - min(1200px, 92vw)); }
  .ph-deco { right: 0; }
}

@media (min-width: 750px) and (max-width: 1023px) {
  /* 1. 版面と章の呼吸 */
  .inner { padding: 0 28px; }
  .sec { padding: 80px 0; }
  .mt-lg { margin-top: 44px; }

  /* 2. 列数を落とす（3列以上→2列 / 固定幅を含む2列・比較カード3枚→1列） */
  .ghost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; margin-top: 48px; }
  .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
  .acards, .acards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
  .plan--rec { transform: none; }
  .gitem-media { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* 3. 2列のまま残すものは gap と内側パディングだけ詰める */
  .cols { gap: 44px; }
  .col-visual img, .col-visual svg { max-width: 320px; }
  .plate { padding: 32px 26px; }
  .ways { gap: 24px; }
  .way-head, .way-d, .way-foot { padding-left: 26px; padding-right: 26px; }
  .way-head { padding-top: 32px; }
  .way-head--icon { padding-top: 34px; }
  .way-head--icon img { width: 104px; height: 104px; }
  .screens { gap: 20px; }
  .screen { padding: 28px 26px 30px; }
  .oxwrap { gap: 22px; }
  .oxcard { padding: 30px 26px 26px; }
  .duo { gap: 22px; }
  .duo-card { padding: 32px 26px 30px; }
  .step-cards { gap: 18px; }
  .icard { padding: 32px 26px 30px; }
  .icard img { width: 96px; height: 96px; }
  /* .nums は3列のまま（数字＋短いラベルで窮屈にならず、2列だと3枚目が孤立して
     .num + .num の縦罫線の意味も崩れるため。実測 768px で1列237px） */
  .num { padding: 8px 12px; }

  /* 4. 装飾・見出し帯を版面内に収める（横スクロール封じ） */
  .hero { padding: 88px 0 96px; }
  .hero-circle { width: 380px; height: 380px; right: -90px; }
  .ph { padding: 72px 0 56px; overflow: hidden; }
  .ph-deco { width: 210px; height: 210px; top: 28px; }
  .ph-ghost { font-size: clamp(84px, 11vw, 120px); }
  .close { padding: 80px 28px 76px; overflow: hidden; }

  /* 5. 細部 */
  .steps { max-width: none; }
  .frame { padding: 44px 32px 48px; }
  .layer { padding: 24px 26px 24px 86px; }
  .formula { gap: 16px 26px; }
  .nextcard { margin-top: 72px; padding: 26px 28px; gap: 18px; }
  .legend { padding: 26px 28px; }
  .foot { padding: 64px 0 40px; }
  .foot-top { gap: 32px; }
}

/* v25.1（2026-08-10）: SPで最終CTAのラベルが2行に折れる問題（実測 lineCount=2）。
   .close 帯のボタンは左右paddingが広く、390px幅では文字が入りきらない。
   SPだけpaddingと文字サイズを詰めて1行に収める（他ページの .close も同じ症状のため共通側で対処） */
@media (max-width: 749px) {
  .close .btn-p,
  .close .btn-s,
  .close .btn-p--rev {
    padding: 0 22px;
    font-size: 15px;
    letter-spacing: .02em;
  }
  .close-btns { gap: 12px; width: 100%; }
  .close-btns .btn-p,
  .close-btns .btn-s,
  .close-btns .btn-p--rev { width: 100%; justify-content: center; }
}

/* ============================================================
   v28（2026-08-10 デザインレビュー対応）: 下層ページFVの「テンプレート感」を壊す。
   全下層ページが「H1→説明→白いアンカーカード→巨大な薄い英字（FEATURE/FUNCTION/PRICE/SUPPORT）」
   という同じ構造に見えていたため、**巨大英字 .ph-ghost を撤去**し、
   ミューコマース固有のブランドモチーフ「紙・注文情報 → データ → Web画面」に差し替える。
   （参照サイトの意匠は使わず、自社の提供価値そのものを図にする）
   ============================================================ */
.ph-ghost { display: none !important; }

.ph { position: relative; overflow: hidden; }

.ph-motif {
  position: absolute;
  top: 50%;
  right: max(6vw, 48px);
  width: 330px;
  height: 210px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .72;
  z-index: 0;
}

/* 紙（注文書・FAX） */
.ph-paper {
  position: absolute;
  width: 92px;
  height: 118px;
  padding: 22px 14px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(22, 104, 220, .18);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(11, 44, 85, .06);
}
.ph-paper--01 { left: 0; top: 32px; transform: rotate(-7deg); }
.ph-paper--02 { left: 42px; top: 53px; transform: rotate(5deg); opacity: .7; }
.ph-paper i {
  display: block;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(22, 104, 220, .22);
}

/* データの流れ */
.ph-flow {
  position: absolute;
  left: 132px;
  top: 99px;
  width: 55px;
  display: flex;
  justify-content: space-between;
}
.ph-flow i { width: 5px; height: 5px; border-radius: 50%; background: var(--kg-blue); }
.ph-flow::before,
.ph-flow::after {
  content: "";
  position: absolute;
  top: 2px;
  height: 1px;
  background: rgba(22, 104, 220, .28);
}
.ph-flow::before { left: -28px; width: 25px; }
.ph-flow::after { right: -28px; width: 25px; }

/* Web画面 */
.ph-screen {
  position: absolute;
  right: 0;
  top: 42px;
  width: 135px;
  height: 103px;
  padding: 28px 16px 12px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(22, 104, 220, .16);
  border-radius: 11px;
  box-shadow: 0 18px 45px rgba(22, 104, 220, .09);
}
.ph-screen-head {
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  border-radius: 10px 10px 0 0;
  background: var(--kg-blue);
}
.ph-screen i {
  display: block;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #edf5ff;
}
.ph-screen i::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 1px 0 0 2px;
  border-radius: 50%;
  background: var(--kg-blue2);
}

/* モチーフと既存の淡い角丸装飾が重なるので、モチーフのあるページでは装飾を後退させる */
.ph:has(.ph-motif) .ph-deco { opacity: .5; }

@media (max-width: 900px) {
  .ph-motif {
    right: -35px;
    width: 250px;
    transform: translateY(-50%) scale(.78);
    transform-origin: right center;
    opacity: .45;
  }
}
@media (max-width: 600px) {
  .ph-motif {
    top: 42px;
    right: -74px;
    transform: scale(.55);
    transform-origin: right top;
    opacity: .28;
  }
}

/* モチーフとテキストの衝突回避（PCのみ・モチーフ左端より内側にテキストを収める） */
@media (min-width: 1080px) {
  .ph:has(.ph-motif) .inner > h1,
  .ph:has(.ph-motif) .inner > .ph-catch,
  .ph:has(.ph-motif) .inner > .ph-lead,
  .ph:has(.ph-motif) .inner > .doc-crumbs,
  .ph:has(.ph-motif) .inner > .doc-meta-row { max-width: 760px; }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .ph:has(.ph-motif) .inner > h1,
  .ph:has(.ph-motif) .inner > .ph-catch,
  .ph:has(.ph-motif) .inner > .ph-lead { max-width: 62%; }
}