/* ===== top-mono ページ固有（項目12〜18） ===== */

/* 【12→v22】ヒーロー: 固有ビジュアル（FAX/TEL用紙→データ粒→Web受注一覧） */
.hero .inner { position: relative; z-index: 1; }
.hero-vis { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 530px; height: 430px; pointer-events: none; }
.hv-paper { position: absolute; width: 150px; background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(11,44,85,.14); padding: 40px 18px 22px; }
.hv-paper--1 { left: 8px; top: 36px; transform: rotate(-7deg); }
.hv-paper--2 { left: 44px; top: 220px; transform: rotate(5deg); width: 132px; padding-bottom: 18px; }
.hv-tag { position: absolute; top: 12px; left: 18px; font-family: var(--font-num); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--kg-quiet); border: 1px solid var(--kg-line); border-radius: 4px; padding: 2px 8px; }
.hv-paper i { display: block; height: 7px; border-radius: 4px; background: var(--kg-t1); margin-top: 10px; }
.hv-paper i:nth-child(odd) { width: 82%; }
.hv-dots { position: absolute; left: 186px; top: 205px; display: flex; gap: 13px; align-items: center; }
.hv-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--kg-blue2); opacity: .3; }
.hv-dots i:nth-child(3) { opacity: .55; }
.hv-dots i:nth-child(4) { opacity: .8; width: 11px; height: 11px; }
.hv-dots i:nth-child(5) { opacity: 1; width: 12px; height: 12px; }
.hv-shot { position: absolute; right: 0; top: 26px; width: 300px; background: #fff; border-radius: 14px; box-shadow: 0 30px 70px rgba(11,44,85,.20); overflow: hidden; }
.hv-bar { display: flex; gap: 5px; padding: 10px 14px; background: var(--kg-t2); }
.hv-bar i { width: 8px; height: 8px; border-radius: 50%; background: #C9DCF5; }
.hv-cap { font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #0F4FBE, #2B7DE9); padding: 10px 16px; letter-spacing: .06em; }
.hv-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--kg-t1); }
.hv-row:first-of-type { border-top: none; }
.hv-row span { width: 64px; height: 8px; border-radius: 4px; background: var(--kg-t1); }
.hv-row b { flex: 1; height: 8px; border-radius: 4px; background: var(--kg-t2); }
.hv-row em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--kg-blue); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* v28（2026-08-10 デザインレビュー対応）: 旧「@media (max-width:1100px) { .hero-vis { display:none } }」を撤去。
   1100px以下でも消さず、CTAの下にコンパクト版（高さ200px）を出す。実装は末尾 v28 ① を参照 */

/* 【13】ミューコマースとは: 2カラム拡張＋塊の整理 */
.about-media { grid-template-columns: 1fr 440px; }
.about-media img { width: 440px; max-width: 100%; height: auto; align-self: center; }
.about-block > * + * { margin-top: 24px; }
.about-block + .about-block { margin-top: 72px; }
.sec .oklist { margin-left: -36px; }
@media (max-width: 749px) {
  .about-media { grid-template-columns: 1fr; }
  .about-media img { width: 100%; }
  .sec .oklist { margin-left: 0; }
}

/* 【14】MIGRATION枠: 塗り円図解＋●英字ラベル＋見出し句折り */
.mig-eyebrow { display: block; font-family: var(--font-num); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: #1668DC; margin-bottom: 28px; }
.mig-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1668DC; margin-right: 10px; vertical-align: 1px; }
.mig-h span { display: inline-block; }
.mig-fig { width: 340px; height: 340px; border-radius: 50%; background: #EAF3FE; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; }
.mig-box { display: flex; align-items: center; justify-content: center; width: 200px; border-radius: 999px; padding: 13px 10px; line-height: 1.4; }
.mig-box--now { background: #fff; border: 1px solid #C9DCF5; color: var(--kg-ink); font-size: 16px; font-weight: 600; }
.mig-box--shopify { background: #0F4FBE; color: #fff; font-size: 18px; font-weight: 700; }
.mig-fig .mig-arrow { display: block; margin: 0; flex: 0 0 auto; }
@media (max-width: 749px) { .mig-fig { width: 280px; height: 280px; } }

/* 【15】お悩み01〜03: ゴースト数字の規律化 */
.ghost-list .gitem { padding-top: 52px; }
.ghost-list .gitem-no { font-size: 110px; top: -44px; left: -10px; }

/* 【16】数字帯: 区切り線短縮・数字強調・注記分離 */
.nums-dark { padding: 72px 0; }
.nums-dark .num + .num { border-left: none; position: relative; }
.nums-dark .num + .num::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56px; background: var(--kg-line); }
.nums-dark .num-v { font-size: clamp(56px, 6vw, 80px); color: #0F4FBE; }
.nums-dark .num-v small { font-size: 20px; font-weight: 700; color: var(--kg-ink); }
.nums-dark .nums-note { margin-top: 48px; font-size: 13px; }
@media (max-width: 749px) {
  .nums-dark .num + .num::before { display: none; }
  .nums-dark .num + .num { border-top: 1px solid var(--kg-line); }
}

/* 【17】Before/After: 円シェブロン矢印＋結びコールアウト */
.ba-wrap .ba-arrow { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #EAF3FE; display: flex; align-items: center; justify-content: center; align-self: center; }
.ba-wrap .ba-arrow svg { width: 14px; height: 14px; display: block; fill: none; stroke: #1668DC; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ba-row--after .ba-arrow { background: #1668DC; }
.ba-row--after .ba-arrow svg { stroke: #fff; }
.sec--band .punch { background: #fff; box-shadow: var(--card-sh); padding: 22px 28px; border-radius: 12px; }
.sec--band .punch::before { content: none; }

/* 【18】提供2つカード: way-footをカードフッターに */
.ways .way-foot { border-top: 1px solid #E9F1FB; background: var(--kg-t2); padding: 16px 32px; font-size: 14px; color: #4A5E78; letter-spacing: .03em; }
.ways .way-foot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3D9BF5; margin-right: 10px; vertical-align: 1px; }
@media (max-width: 749px) { .ways .way-foot { padding-left: 26px; padding-right: 26px; } }

/* Before/After: 流れイラスト（高さ統一・親幅は最幅の6.png基準・画像は左揃え） */
.ba-box { flex-direction: column; align-items: center; gap: 14px; padding: 10px 14px; min-height: 0; background: none; }
.ba-row--after .ba-box { background: none; }
.ba-illust { width: 150px; height: 136px; display: block; }
.ba-illust img { height: 136px; width: auto; display: block; margin: 0 auto; }
.ba-illust img[src$="ba-3.png"], .ba-illust img[src$="ba-6.png"] { margin-left: 0; margin-right: auto; }
.ba-label { display: block; line-height: 1.8; font-size: 15px; font-weight: 700; }
@media (max-width: 749px) { .ba-illust { width: 118px; height: 108px; } .ba-illust img { height: 108px; } }

/* 無料相談から開店・運用までの流れ（料金ページから移設・PC横5列） */
@media (min-width: 750px) {
  #flow .steps { max-width: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
  #flow .step { display: flex; flex-direction: column; align-items: center; padding-bottom: 0; }
  #flow .step::before { display: none; }
  #flow .step:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(50% + 40px); width: calc(100% - 52px); height: 1px; background: var(--kg-line); }
  #flow .step-no { width: 56px; height: 56px; font-size: 18px; }
  #flow .step-no + div { width: 100%; margin-top: 18px; }
  #flow .step-t { font-size: 17px; font-weight: 700; color: var(--kg-ink); padding-top: 0; text-align: center; }
  #flow .step-t small { display: block; margin-left: 0; margin-top: 6px; }
  #flow .step-d { font-size: 13px; margin-top: 12px; max-width: none; }
}
/* 運用サポートカードの費用箇条書き */
.way-ul { list-style: none; margin: 0; padding: 4px 40px 22px; font-size: 13.5px; }
.way-ul li { padding: 10px 0; border-top: 1px solid var(--kg-line); line-height: 1.95; }
.way { display: flex; flex-direction: column; }
.way .way-ul { margin-top: auto; }

/* とは節キャッチ: 大きめ＋背景色 */
.about-catch { display: inline-block; background: var(--kg-t1); padding: 10px 20px; border-radius: 10px; font-size: clamp(20px,2.2vw,24px); margin-top: 22px; }
.about-media .sec-p { margin-top: 26px; }
/* 費用の定義リスト */
.fee-sum { margin-top: 32px; max-width: 620px; }
.fee-sum-label { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--kg-blue); letter-spacing: .2em; }
.fee-sum dl { margin-top: 8px; }
.fee-sum dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--kg-line); align-items: baseline; }
.fee-sum dl div:first-of-type { border-top: 1px solid var(--kg-line); }
.fee-sum dt { font-weight: 700; color: var(--kg-ink); font-size: 14.5px; }
.fee-sum dd { font-size: 14.5px; margin: 0; }
/* 流れSTEP: 見出しブロックの高さを固定して本文開始位置を揃える */
@media (min-width: 750px) { #flow .step-t { min-height: 56px; } }

/* FVの声量を抑える（さき指示: AIっぽい特大太字をやめる） */
.hero h1 { font-size: clamp(30px, 3.9vw, 50px); font-weight: 600; letter-spacing: .035em; }
.hero-sub { font-size: clamp(14px, 1.3vw, 15.5px); max-width: 46em; font-weight: 600; color: var(--kg-ink); }

/* Web受注への切り替え図解: ラベル大きめ・全体を詰める */
.ba-tag { font-size: 15px; padding: 7px 22px; }
.sec--band.ba-sec { padding: 76px 0; }
.ba-sec .ba-wrap { margin-top: 36px; gap: 20px; }
.ba-sec .ba-row { padding: 22px 28px; }
.ba-sec .ba-flow { margin-top: 12px; }
.ba-sec .ba-box { padding: 4px 10px; gap: 10px; }

/* とは節: 帯からなじむグラデーション（背景大文字はv22で削除） */
.about-sec { position: relative; overflow: hidden; background: linear-gradient(180deg, #E7F1FD 0%, #FFFFFF 42%); }
.about-sec .inner { position: relative; z-index: 1; }

/* おすすめリスト: 文字を大きく */
.oklist li { font-size: 16.5px; }

/* 機能のグループ小見出し */
/* FEATURES: 2グループボックス+小カード */
.fgroups { display: grid; gap: 28px; margin-top: 40px; }
.fgroup { background: #fff; border-radius: 22px; padding: 36px 40px 40px; box-shadow: 0 10px 30px rgba(15, 79, 190, .06); }
.fgroup-h { display: flex; align-items: center; gap: 10px; font-size: 17.5px; font-weight: 700; color: var(--kg-ink); }
.fgroup-h svg { width: 22px; height: 22px; color: var(--kg-blue); flex: none; }
.fgroup .feats { margin-top: 24px; gap: 20px; }
.fgroup .feat { background: var(--kg-t2); border-radius: 14px; padding: 22px 24px 24px; }
.fgroup .feat::before { content: none; }
.fgroup .feat-d { font-size: 13px; }
@media (max-width: 749px) {
  .fgroup { padding: 26px 22px 28px; }
  .fgroup .feats { margin-top: 18px; gap: 14px; }
}

/* SERVICEカード: 価格統合・縦圧縮 */
.way-head--icon { padding-top: 26px; gap: 4px; }
.way-head--icon img { width: 88px; height: 88px; margin-bottom: 6px; }
.way-no { font-family: var(--font-num); font-weight: 700; color: var(--kg-blue); margin-right: 10px; font-size: .92em; }
.way-price { font-family: var(--font-num); font-size: 26px; font-weight: 600; color: var(--kg-ink); margin-top: 6px; }
.way-price small { font-family: var(--font-jp); font-size: 13px; font-weight: 700; }
.way-price-sub { font-family: var(--font-jp); font-size: 13px; font-weight: 600; color: var(--kg-body); margin-left: 4px; }
.way .way-d { padding-top: 20px; }
.svc-notes { text-align: center; margin-top: 36px; font-size: 13px; color: var(--kg-quiet); line-height: 2.1; }
.svc-cta { text-align: center; margin-top: 30px; }
.svc-cta-lead { font-size: 13.5px; margin-bottom: 12px; }

/* PCで左右カードの行（価格→説明→リスト→リンク）の高さを揃える */
@media (min-width: 750px) {
  .ways { grid-template-rows: auto; column-gap: 36px; row-gap: 0; }
  .ways .way { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  .way .way-ul { margin-top: 0; align-self: start; }
  .way .way-foot { align-self: end; }
}

/* とは節: 4つの特長 2×2カード */
.tokucho-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 800px; margin: 28px auto 0; }
.tm-card { background: #fff; border-radius: 14px; box-shadow: var(--card-sh); padding: 22px 26px; }
.tm-no { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--kg-blue); letter-spacing: .14em; }
.tm-t { font-size: 16.5px; font-weight: 700; color: var(--kg-ink); margin-top: 6px; }
.tm-d { font-size: 13px; margin-top: 6px; line-height: 1.9; }
@media (max-width: 749px) { .tokucho-mini { grid-template-columns: 1fr; } }
/* SERVICEカード: ブロック間を詰める・リンク右寄せ */
.way .way-d { padding: 18px 40px 14px; }
.way .way-ul { padding: 0 40px 12px; }
.way-ul li { padding: 8px 0; }
.way-foot { text-align: right; }

/* ===== v21（2026-08-09 トップ全面レビュー: リズム・声量・視線誘導） ===== */
.hero-sub { font-size: clamp(15px, 1.35vw, 16.5px); }
/* PROBLEM: 巨大薄数字→小さな青番号+縦罫 */
.prob .ghost-list { gap: 0; margin-top: 56px; }
.prob .gitem { padding: 0 40px; }
.prob .gitem:first-child { padding-left: 0; }
.prob .gitem:last-child { padding-right: 0; }
.prob .gitem + .gitem { border-left: 1px solid var(--kg-line); }
.prob .gitem-no { position: static; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--kg-blue); letter-spacing: .16em; display: block; }
.prob .gitem-t { margin-top: 14px; }
.prob .gitem-d { font-size: 15px; }
/* BEFORE/AFTER: 導入前=グレー/導入後=淡青+青枠+間の下向き矢印 */
.ba-sec .ba-row--before { background: #F3F6FA; box-shadow: none; }
.ba-sec .ba-row--after { background: var(--kg-t1); border: 2px solid var(--kg-blue); box-shadow: var(--card-sh); }
.ba-down { display: flex; justify-content: center; margin: -2px 0; }
.ba-down span { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-btn); box-shadow: 0 8px 20px rgba(22,104,220,.3); display: flex; align-items: center; justify-content: center; }
.ba-down svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* ABOUT: キャッチ控えめ・おすすめ2列・特長カード格上げ */
.about-catch { font-size: clamp(18px, 1.9vw, 21px); padding: 8px 16px; }
@media (min-width: 750px) {
  .about-sec .oklist { max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; padding: 14px 40px; }
  .about-sec .oklist li:nth-child(2) { border-top: none; }
}
.tm-card { padding: 28px 30px 30px; }
.tm-t { font-size: 18px; }
.tm-d { font-size: 13.5px; }
/* SERVICE: 価格を主役に */
.way .way-t { font-size: 20px; }
.way-price { font-size: 36px; margin-top: 10px; }
.way-price small { font-size: 15px; }
.way-price-sub { display: block; margin-left: 0; margin-top: 6px; }
/* FEATURES: カード内カード廃止→背景なし+縦罫 */
.fgroup-h { padding-bottom: 18px; border-bottom: 1px solid var(--kg-line); }
.fgroup .feats { gap: 0; margin-top: 26px; }
.fgroup .feat { background: transparent; border-radius: 0; padding: 2px 28px 0; }
.fgroup .feat:first-child { padding-left: 0; }
.fgroup .feat:last-child { padding-right: 0; }
.fgroup .feat + .feat { border-left: 1px solid var(--kg-line); }
.fgroup .feat-d { font-size: 13.5px; }
/* FLOW */
#flow .step-d { font-size: 13.5px; }
/* MIGRATION: 円の器→移行図 */
.mig-fig { width: auto; height: auto; border-radius: 0; background: transparent; gap: 10px; padding: 8px 0; }
.mig-items { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mig-items span { font-size: 12.5px; font-weight: 700; color: var(--kg-deep); background: var(--kg-t1); border-radius: 999px; padding: 6px 16px; }
@media (max-width: 749px) {
  .prob .gitem { padding: 26px 0; }
  .prob .gitem:first-child { padding-top: 0; }
  .prob .gitem + .gitem { border-left: none; border-top: 1px solid var(--kg-line); }
  .fgroup .feat { padding: 18px 0; }
  .fgroup .feat:first-child { padding-top: 6px; }
  .fgroup .feat + .feat { border-left: none; border-top: 1px solid var(--kg-line); }
}

/* ===== v22（2026-08-09 レビュー第2ラウンド: 見せ場強化・カード削減・世界観モチーフ） ===== */
/* PROBLEM: 見出しを主役に（番号は脇役） */
.prob .gitem-t { font-size: 25px; line-height: 1.7; margin-top: 14px; }
.prob .gitem-d { font-size: 15.5px; margin-top: 16px; }
/* ABOUT: おすすめの白大カードを外す（カードは特長4つだけ） */
.about-sec .oklist { background: transparent; box-shadow: none; padding: 0; max-width: 960px; margin-top: 34px; }
.about-sec .oklist li { border-top: none; }
/* SERVICE: 料金 > サービス名 > 説明 > 詳細 の視覚階層 */
.way-price { font-size: 48px; }
.way-price small { font-size: 16px; }
/* BEFORE/AFTER: 見せ場化（Before=乱雑・グレー / After=一直線・白カード） */
.ba-row--before .ba-arrow { background: #E7EBF1; }
.ba-row--before .ba-arrow svg { stroke: #8A99AB; }
.ba-row--before .ba-box:nth-of-type(1) { transform: rotate(-1.8deg); }
.ba-row--before .ba-box:nth-of-type(2) { transform: rotate(1.4deg); }
.ba-row--before .ba-box:nth-of-type(3) { transform: rotate(-1.2deg); }
.ba-row--after .ba-box { background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(22,104,220,.10); padding: 14px 16px; }
.ba-down span { width: auto; height: 54px; padding: 0 30px; gap: 10px; font-size: 16.5px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.ba-down svg { width: 17px; height: 17px; }
/* FLOW: 3+2配置で1項目を大きく */
@media (min-width: 750px) {
  #flow .steps { grid-template-columns: repeat(6, 1fr); gap: 56px 28px; }
  #flow .step { grid-column: span 2; }
  #flow .step:nth-child(3)::after { display: none; }
  #flow .step:nth-child(4) { grid-column: 2 / 4; }
  #flow .step:nth-child(5) { grid-column: 4 / 6; }
  #flow .step-t { font-size: 19px; min-height: 0; }
  #flow .step-d { font-size: 14.5px; margin-top: 12px; max-width: 24em; margin-left: auto; margin-right: auto; text-align: center; }
}
/* 最終CTA: 声量↑ */
.close { padding: 128px 32px 116px; }
.close h2 { font-size: clamp(30px, 3.9vw, 50px); }
.close .btn-p--rev { height: 74px; padding: 0 60px; font-size: 17.5px; }
.close-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }


/* ============================================================
   v23（2026-08-09 さき採用の外部デザイン指示書: 恒久方針適用・トップ）
   ============================================================ */
/* FV: 散らばる紙の3枚目 */
.hv-paper--3 { left: 60px; top: 10px; width: 110px; padding: 18px 14px 14px; transform: rotate(11deg); opacity: .7; }

/* BEFORE/AFTER: mc-transform（文字ステップ図解・イラスト廃止） */
.mc-transform { padding: clamp(80px, 9vw, 140px) 0; background: var(--kg-t2); }
.mc-transform .mc-section-head { margin-bottom: 48px; }
.mc-transform__panel { position: relative; padding: clamp(28px, 4vw, 48px); border-radius: 28px; }
.mc-transform__panel--before { background: #fff; border: 1px solid var(--kg-line); }
.mc-transform__panel--after {
  background: radial-gradient(circle at 85% 15%, rgba(61, 155, 245, .14), transparent 34%), #fff;
  border: 2px solid var(--kg-blue);
  box-shadow: 0 20px 60px rgba(22, 104, 220, .10);
}
.mc-transform__label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; }
.mc-transform__label span { font-family: var(--font-num); font-size: 12px; letter-spacing: .18em; font-weight: 800; color: var(--kg-blue); }
.mc-transform__label strong { font-size: 24px; color: var(--kg-ink); }
.mc-transform__steps { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; align-items: stretch; }
.mc-transform__step { min-height: 150px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.mc-transform__panel--before .mc-transform__step { background: #F8FAFC; }
.mc-transform__panel--after .mc-transform__step { background: var(--kg-t2); }
.mc-transform__num { font-family: var(--font-num); font-size: 13px; font-weight: 800; color: var(--kg-blue); letter-spacing: .08em; }
.mc-transform__step h3 { margin: 24px 0 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; line-height: 1.55; color: var(--kg-ink); }
.mc-transform__arrow { display: grid; place-items: center; font-family: var(--font-num); font-size: 24px; color: var(--kg-blue); }
.mc-transform__change { height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--kg-blue); font-family: var(--font-num); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.mc-transform__change i { width: 2px; height: 30px; margin-top: 8px; background: linear-gradient(var(--kg-blue), transparent); }

/* SERVICE: 料金主役の階層（ENキッカー→名前→大価格→✓リスト） */
.way-kicker { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--kg-blue); letter-spacing: .2em; }
.way-head--icon .way-t { margin-top: 4px; }
.way-ul li { position: relative; padding-left: 26px; }
.way-ul li::before { content: "✓"; position: absolute; left: 2px; top: 8px; color: var(--kg-blue); font-weight: 700; }

/* FEATURES: 番号円＋見出し上の短い青線（さき承認で復活） */
.fgroup-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kg-blue); color: #fff; font-family: var(--font-num); font-size: 12px; font-weight: 800; flex: none; }
.fgroup .feat-t { position: relative; padding-top: 16px; font-size: 19px; }
.fgroup .feat-t::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; border-radius: 99px; background: var(--kg-blue); }
.fgroup .feat-d { font-size: 15px; line-height: 1.9; }


/* MIGRATION: 現在のシステム（内訳リスト）→データ移行→Shopify */
.mig-fig2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.mig2-box--now { background: #fff; border: 1.5px solid var(--kg-line); border-radius: 14px; padding: 18px 22px 10px; min-width: 170px; }
.mig2-t { font-size: 14.5px; font-weight: 700; color: var(--kg-ink); padding-bottom: 10px; border-bottom: 1px solid var(--kg-line); }
.mig2-box--now ul { list-style: none; margin: 0; padding: 0; }
.mig2-box--now li { font-size: 13px; color: var(--kg-body); padding: 8px 2px; border-top: 1px solid var(--kg-t1); }
.mig2-box--now li:first-child { border-top: none; }
.mig2-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mig2-arrow svg { transform: rotate(90deg); margin: 14px 0; }
.mig2-arrow span { font-size: 11.5px; font-weight: 700; color: var(--kg-deep); letter-spacing: .08em; }
.mig2-box--shopify { background: var(--kg-deep); color: #fff; font-size: 18px; font-weight: 700; border-radius: 999px; padding: 16px 34px; }

/* 最終CTA: 声量の最終調整 */
.close h2 { font-size: clamp(32px, 3.4vw, 44px); }
.close p { font-size: 16.5px; }

@media (max-width: 749px) {
  .mc-transform__steps { grid-template-columns: 1fr; }
  .mc-transform__arrow { height: 38px; transform: rotate(90deg); }
  .mc-transform__step { min-height: auto; }
  .mig-fig2 { gap: 10px; }
}


/* v23.1（2026-08-09 さき指示）: BEFORE/AFTERにイラスト復活（新パネル構造内・高さ統一116px・ba-3/6のみ左揃え）
   FLOWは前の丸数字カード版（v22）へ戻し（mc-flowは撤去・上辺着色の例外は不使用に） */
.mc-transform__step { justify-content: flex-start; min-height: 0; }
.mc-transform__illust { display: flex; justify-content: center; margin-top: 18px; height: 116px; }
.mc-transform__illust img { height: 116px; width: auto; }
.mc-transform__illust--left { justify-content: flex-start; }
.mc-transform__step h3 { margin-top: 16px; }
@media (max-width: 749px) {
  .mc-transform__illust, .mc-transform__illust img { height: 100px; }
}

/* v24（2026-08-10 さき指示「ミガキ型ボタンをFVにも」）: ヒーローCTAを角丸カード型へ
   要点=うっすら広がる青グロー（ぼかし50px・オフセットほぼ0）＋右端の丸アイコン。
   色はミューコマースのトークン（--kg-blue / --kg-blue2 / --kg-t1）のみ使用＝パレット外なし。
   適用はトップのヒーロー限定（.hero スコープ）。他ページ・ページ内CTA・フォーム送信は従来のピルのまま */
/* v24.1（2026-08-10 さき指示）: PCでも縦並び（ミガキと同じ積み方）。幅は2本そろえる */
.hero .hero-cta {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.hero .btn-p,
.hero .btn-s {
  height: 64px;
  width: 100%;
  max-width: 360px;
  padding: 0 17px 0 32px;
  border-radius: 16px;
  gap: 20px;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: opacity .2s ease, background-color .2s ease;
}
.hero .btn-p {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 104, 220, .22), 0 2px 44px rgba(61, 155, 245, .62);
}
.hero .btn-p:hover { opacity: .9; }
.hero .btn-s,
.hero.on-dark .btn-s {
  background: #fff;
  color: var(--kg-ink);
  border: 0;
  box-shadow: 0 6px 18px rgba(22, 104, 220, .12), 0 4px 44px rgba(61, 155, 245, .55);
}
.hero .btn-s:hover { background: var(--kg-t2); }

/* 右端の丸アイコン（白丸＋青点／副ボタンは淡青丸＋青点）。矢印グリフを置き換える */
.hero .btn-p::after,
.hero .btn-s::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0;
  background: radial-gradient(circle, var(--kg-blue) 0 4px, #fff 4px);
}
.hero .btn-s::after {
  background: radial-gradient(circle, var(--kg-blue) 0 4px, var(--kg-t1) 4px);
}

@media (max-width: 749px) {
  .hero .hero-cta { align-items: stretch; }
  .hero .btn-p,
  .hero .btn-s {
    max-width: none;
    font-size: 15px;
    padding: 0 14px 0 24px;
  }
}

/* ============================================================
   v25（2026-08-10 さき指示）: タブレット帯（750〜1023px）
   これまで 749px の1本しかなく、750〜1439px はPC用の多列レイアウトが
   そのまま縮んで適用されていた（768pxで見出しが単語途中で折れる・
   価格が3行に割れる等）。ここで列数だけを落として詰まりを解消する。
   ============================================================ */
@media (min-width: 750px) and (max-width: 1023px) {
  /* ABOUT: 1fr 440px（固定幅入り2列）→ 1列。画像は440pxのまま中央寄せ */
  .about-media { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .about-media img { justify-self: center; }

  /* PROBLEM: 3列 → 2列。縦罫は2列だと2行目の左端に浮くので余白で分ける */
  .prob .ghost-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 44px; margin-top: 48px; }
  .prob .gitem { padding: 0; }
  .prob .gitem + .gitem { border-left: none; }
  .prob .gitem-t { font-size: 22px; margin-top: 12px; } /* v28: 21→22px（問題提起の声量を戻す） */
  .prob .gitem-d { font-size: 14.5px; margin-top: 12px; }

  /* BEFORE/AFTER: 1fr 42px 1fr 42px 1fr → 1列（矢印は縦向き）。
     1列だと1ステップが横に伸びて間延びするので、ステップ内を横並びに畳む */
  .mc-transform__steps { grid-template-columns: minmax(0, 1fr); }
  .mc-transform__arrow { height: 34px; transform: rotate(90deg); }
  .mc-transform__step { flex-direction: row; align-items: center; gap: 22px; padding: 16px 22px; min-height: 0; }
  .mc-transform__num { flex: 0 0 auto; }
  .mc-transform__illust { flex: 0 0 auto; margin-top: 0; height: 88px; }
  .mc-transform__illust img { height: 88px; }
  .mc-transform__step h3 { margin: 0; font-size: 18px; }
  .mc-transform__label { margin-bottom: 22px; }

  /* SERVICE: 2列は維持（構築と運用の対比）。左右paddingと価格を縮めて折り返しを解消 */
  .ways { column-gap: 24px; }
  .way-head, .way .way-d, .way .way-ul, .ways .way-foot { padding-left: 26px; padding-right: 26px; }
  .way-head--icon { padding-top: 26px; }
  .way-head--icon img { width: 76px; height: 76px; }
  .way .way-t { font-size: 18.5px; }
  .way-price { font-size: clamp(28px, 3.6vw, 42px); margin-top: 8px; }
  .way-price small { font-size: 14px; }
  .way-price-sub { font-size: 12.5px; }
  .way-ul { font-size: 13px; }

  /* FEATURES: 3列 → 2列。縦罫は外し、見出し上の青線が区切りを担う */
  .fgroup { padding: 30px 30px 32px; }
  .fgroup .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
  .fgroup .feat { padding: 0; }
  .fgroup .feat + .feat { border-left: none; }
  .fgroup .feat-t { font-size: 17.5px; }
  .fgroup .feat-d { font-size: 14px; }

  /* FLOW: 6列span2（3+2配置）→ 2列。ステップ間の横線は2列だと繋がらないので消す */
  #flow .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
  #flow .step { grid-column: auto; }
  #flow .step:nth-child(4),
  #flow .step:nth-child(5) { grid-column: auto; }
  #flow .step:not(:last-child)::after { display: none; }
  #flow .step-t { font-size: 17.5px; }
  #flow .step-d { font-size: 14px; max-width: none; }

  /* MIGRATION: 枠内2列 → 1列（テキスト列が潰れてリンクが折れていた） */
  .frame { padding: 36px 32px 40px; }
  .frame .cols { grid-template-columns: minmax(0, 1fr); }

  /* 数字帯: 3列のままだが左右の詰まりを緩める */
  .nums-dark { padding: 60px 0; }
  .nums-dark .num-v { font-size: clamp(44px, 6vw, 60px); }
  .nums-dark .num-v small { font-size: 17px; }
}

/* v25: タブレット帯の外側（1024〜1099px）でも初期構築の価格3つが3行に割れていた
   （実測: 1024pxで .way-price が229px高＝2行余分に折り返し）。文字サイズだけ落として1行に戻す */
@media (min-width: 1024px) and (max-width: 1099px) {
  .way-price { font-size: 40px; }
  .way-price small { font-size: 15px; }
}

/* v25: 可読性の下限（11.5px未満を作らない）。全幅に適用して帯の境目で文字サイズが跳ねないようにする */
#flow .step-t small { font-size: 11.5px; letter-spacing: .12em; }
.mig-eyebrow { font-size: 11.5px; }

/* v25: スマホでも初期構築の価格が2行に割れて「・」が行末に残っていたので1行に収める */
@media (max-width: 749px) {
  .way-price { font-size: 30px; }
  .way-price small { font-size: 13px; }
}

/* v25: タブレット・スマホのタップ領域（高さ32px以上を確保） */
@media (max-width: 1023px) {
  .tlink { padding-top: 5px; padding-bottom: 5px; }
}

/* v25.1（2026-08-10）: SPの最終CTAはmono.css側の共通指定（padding 22px・15px）に委ねる。
   PC/タブレットの大型指定（height 74px・padding 0 60px・17.5px）は749px超でのみ効かせる */
@media (max-width: 749px) {
  .close .btn-p--rev { height: 64px; padding: 0 22px; font-size: 15px; }
}


/* ============================================================
   v28（2026-08-10 デザインレビュー対応・TOP）
   触らないもの: 数字帯 / FEATURES / ABOUT本文 / 最終CTA / 文言・リンク
   ============================================================ */

/* ---- ① FV: 1100px以下でもビジュアルを消さず、CTA下にコンパクト版（高さ200px）を残す ----
   HTML上 .hero-vis は .inner より前にあるため、position:static でフローに戻すとH1の上に出る。
   そこで絶対配置のまま「ヒーロー下端」に付け替え、ヒーローの padding-bottom を
   232px（ビジュアル200px + 余白32px）ぶん増やして場所を作る。HTMLは無改修。 */
@media (max-width: 1100px) {
  .hero .hero-vis {
    top: auto;
    right: 32px;
    left: 32px;
    transform: none;
    width: auto;
    max-width: 380px;
    height: 200px;
  }

  /* 紙（FAX / TEL / 無地）: 重なりの構図は保ったまま縮小 */
  .hero .hv-paper { border-radius: 8px; box-shadow: 0 8px 20px rgba(11, 44, 85, .13); }
  .hero .hv-paper i { height: 5px; margin-top: 7px; }
  .hero .hv-paper--1 { left: 0; top: 24px; width: 86px; padding: 30px 11px 12px; }
  .hero .hv-paper--2 { left: 18px; top: 104px; width: 76px; padding: 28px 10px 10px; }
  .hero .hv-paper--3 { left: 28px; top: 0; width: 62px; padding: 12px 9px 9px; opacity: .75; }
  .hero .hv-tag { top: 8px; left: 9px; padding: 1px 6px; line-height: 1.5; letter-spacing: .12em; }

  /* データ粒 */
  .hero .hv-dots { left: 32%; top: 92px; gap: 6px; }
  .hero .hv-dots i { width: 6px; height: 6px; }
  .hero .hv-dots i:nth-child(4) { width: 7px; height: 7px; }
  .hero .hv-dots i:nth-child(5) { width: 8px; height: 8px; }

  /* Web受注画面 */
  .hero .hv-shot { right: 0; top: 16px; width: 47%; max-width: 180px; border-radius: 10px; box-shadow: 0 16px 36px rgba(11, 44, 85, .17); }
  .hero .hv-bar { padding: 7px 12px; gap: 4px; }
  .hero .hv-bar i { width: 6px; height: 6px; }
  .hero .hv-cap { padding: 7px 12px; line-height: 1.5; letter-spacing: .04em; }
  .hero .hv-row { padding: 9px 12px; gap: 8px; }
  .hero .hv-row span { width: 40px; height: 6px; }
  .hero .hv-row b { height: 6px; }
  .hero .hv-row em { width: 18px; height: 18px; }
}
/* 帯ごとの下端位置（mono.css の .hero padding-bottom に 232px を足す） */
@media (min-width: 1024px) and (max-width: 1100px) {
  .hero { padding-bottom: 360px; }
  .hero .hero-vis { bottom: 128px; }
}
@media (min-width: 750px) and (max-width: 1023px) {
  .hero { padding-bottom: 328px; }
  .hero .hero-vis { bottom: 96px; }
}
@media (max-width: 749px) {
  .hero { padding-bottom: 316px; }
  .hero .hero-vis { bottom: 84px; left: 22px; right: 22px; }
}

/* ---- ③ BEFORE / AFTER: 矢印を長くし、AFTERだけ1本の青線で3ボックスを貫く ----
   線を通す高さ = ステップ上端から60px（padding-top 24px + 番号行 26.6px + 空き18pxの中央9px）。
   番号とイラストの間の空き帯なので、文字にもイラストにも当たらない。 */
@media (min-width: 1024px) {
  /* v29.2（2026-08-11 さき指示）: 導入後を貫く1本のレールは撤去。
     矢印を5pxに太くした結果、レールと矢印が同じ高さで重なって二重線に見えるため。
     「データが連続」は太い矢印そのもので十分に伝わる。 */
  /* 矢印: 24pxのグリフ → 線＋矢尻の約76px（左右の余白へはみ出させて伸ばす） */
  .mc-transform__arrow {
    position: relative;
    align-self: start;
    height: 28px;
    margin-top: 46px;
    font-size: 0;
  }
  /* v29.1（2026-08-11 さき「矢印が崩れている」）:
     矢尻をborderの45度回転で作ると、太くしたとき回転で実効幅が変わり線との接続が破綻する。
     **ベタ塗りの三角（border三角形）**に作り替え。回転を使わないので崩れようがない。
     線は左→右で濃くなるグラデ、三角はグラデ終端と同じベタ色にして地続きに見せる。 */
  .mc-transform__arrow::before {
    content: "";
    position: absolute;
    left: -14px;
    right: -8px;
    top: 50%;
    margin-top: -2.5px;
    height: 5px;
    border-radius: 2.5px 0 0 2.5px;
    background: linear-gradient(90deg, rgba(22, 104, 220, .18) 0%, rgba(22, 104, 220, .55) 45%, var(--kg-blue) 100%);
  }
  .mc-transform__arrow::after {
    content: "";
    position: absolute;
    right: -19px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -7px;
    border-left: 11px solid var(--kg-blue);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
}

/* ---- ④ SERVICE: 価格を約6〜8%拡大（全幅で1行を実測確認） ----
   拡大の原資として .way-price の字間（body由来の .03em）を0にする。
   実測: 「66万円・88万円・154万円」の1行必要幅（2026-08-11 税込表記へ変更。桁数は同じなので実測値は据え置き） = 6.271 × 価格px + 6 × 万円px。
   入れ物は PC1120px以上=430px / 1100px=420px / 1024px=382px / 830px=323px / 390px=294px。
   字間ありのままだと1100px幅で余裕4%しかなく、5%以上の拡大は1行に収まらない。
   「万円（small）」は既存値のまま（拡大の余白をここで確保している）。 */
.way-price { letter-spacing: 0; font-size: 51px; }           /* 48 → 51px（+6.3%）。実効は1120px以上 */
.way-price-sub { letter-spacing: .03em; }                    /* 補足文の字間は従来どおり */
@media (min-width: 1024px) and (max-width: 1119px) {
  .way-price { font-size: 43px; }                            /* 40 → 43px（+7.5%）。1100〜1119pxで51pxは1.8px足りず折れる */
}
@media (min-width: 750px) and (max-width: 1023px) {
  .way-price { font-size: clamp(30px, 3.9vw, 45px); }        /* 28〜36.8 → 30〜39.9px（+7〜8%） */
}
@media (max-width: 749px) {
  .way-price { font-size: clamp(28px, 8.2vw, 33px); }        /* 30px固定 → 390pxで31.98px（+6.6%）。
                                                                32px固定は375px幅（iPhone SE）で2行に割れるため可変にした */
}

/* ---- ⑤ FLOW: 番号を結ぶ線を「円のふちから次の円のふちまで」に伸ばす ----
   旧: left calc(50% + 40px) / width calc(100% - 52px) ＝ 円との間に12pxずつ隙間があり分断して見えた。
   新: 円半径28px＋列間28pxぶんを差し引いて、切れ目なく1本に見せる。カード化はしない。 */
@media (min-width: 1024px) {
  #flow .step:not(:last-child)::after {
    left: calc(50% + 28px);
    width: calc(100% - 28px);
  }
}

/* ---- ⑥ MIGRATION: 右の移行図をPCで約1.3倍 ----
   ※レビュー票の「.mig-fig（340px円）」は v21 で器（円）を廃止済みで、
     現在の実体は .mig-fig2（現在のシステム→データ移行→Shopify）。そちらを1.3倍する。 */
@media (min-width: 1024px) {
  .mig-fig2 { gap: 16px; }
  .mig2-box--now { min-width: 221px; padding: 23px 29px 13px; border-radius: 18px; }
  .mig2-t { font-size: 19px; padding-bottom: 13px; }
  .mig2-box--now li { font-size: 17px; padding: 10px 3px; }
  .mig2-arrow span { font-size: 15px; }
  .mig2-arrow svg { width: 83px; height: 21px; margin: 18px 0; }
  .mig2-box--shopify { font-size: 23.5px; padding: 21px 44px; }
}

/* ---- ⑦ タブレット帯（750〜1023px）: ABOUT を2カラムに戻す ----
   v25で1列にしたが「全部を同じbreakpointで縦積みにしない」方針に合わせ2列を維持。
   画像は440px固定をやめて可変（38%・上限320px）にし、テキスト列が窮屈にならないようにする。 */
@media (min-width: 750px) and (max-width: 1023px) {
  .about-media { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 32px; align-items: center; }
  .about-media img { width: 100%; max-width: 320px; justify-self: end; }
}

/* ---- v30（2026-08-11 さき「WEB化の部分のデザインが変。おしゃれに」）----
   旧版は「短い横線＋文字＋縦線」の寄せ集めでまとまりがなかった。
   **青グラデのピル（＝サイトのCTAと同じ意匠）＋下向き矢印**の2要素だけに整理する。
   矢印はステップ間と同じ作り（線＋ベタ塗り三角・回転なし）なので崩れない。
   下へ向かうほど濃くして、視線が「導入後」パネルへ落ちるようにする。 */
.mc-transform__change {
  height: auto;
  padding: 34px 0 30px;
  gap: 0;
  font-size: inherit;
  letter-spacing: normal;
}
.mc-transform__change span {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: #fff;
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(22, 104, 220, .26);
}
/* 下向き矢印: 線（上=薄 → 下=濃）＋ベタ塗りの三角 */
.mc-transform__change i {
  position: relative;
  width: 5px;
  height: 38px;
  margin-top: 18px;
  border-radius: 2.5px 2.5px 0 0;
  background: linear-gradient(180deg, rgba(22, 104, 220, .2) 0%, rgba(22, 104, 220, .6) 45%, var(--kg-blue) 100%);
}
.mc-transform__change i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  margin-left: -7px;
  width: 0;
  height: 0;
  border-top: 11px solid var(--kg-blue);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

@media (max-width: 1023px) {
  .mc-transform__change { padding: 28px 0 26px; }
  .mc-transform__change span { height: 42px; padding: 0 26px; font-size: 15px; }
  .mc-transform__change i { height: 32px; margin-top: 16px; }
}
@media (max-width: 749px) {
  .mc-transform__change { padding: 24px 0 22px; }
  .mc-transform__change span { height: 38px; padding: 0 22px; font-size: 13.5px; letter-spacing: .14em; }
  .mc-transform__change i { height: 28px; margin-top: 14px; }
}

/* ---- v29-2: タブレット・SPの矢印もPCと同じ太さに揃える ----
   1023px以下は縦積みなので矢印は下向き。グリフ（細い↓）をやめてCSS描画にし、
   上→下で濃くなるグラデ（流れの向き）にする。太さ・矢尻はPCと同値。 */
@media (max-width: 1023px) {
  .mc-transform__arrow {
    position: relative;
    transform: none;
    font-size: 0;
  }
  .mc-transform__arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -2.5px;
    top: 2px;
    bottom: 9px;
    width: 5px;
    border-radius: 2.5px 2.5px 0 0;
    background: linear-gradient(180deg, rgba(22, 104, 220, .18) 0%, rgba(22, 104, 220, .55) 45%, var(--kg-blue) 100%);
  }
  .mc-transform__arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -7px;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 11px solid var(--kg-blue);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }
}