/* 自動生成：v3.src.css の各ルールの先頭に :root[data-skin] を付けて、第2版までの指定より優先させています */
/* Cheetah デモ 第3版 — 8pxの物差し／角丸・影の統一／カードの再設計／フォーム・状態の作り込み */
:root[data-skin]{ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --bw: 2px; --r: 2px; --accent-soft: rgba(255,176,0,.18); --sec-y: 64px; }
@media (min-width: 900px){ :root[data-skin]{ --sec-y: 96px; } }

/* ===== 文字の3階層（見出し・本文・補足） ===== */
:root[data-skin] body{ font-size: 16px; line-height: 1.8; letter-spacing: .01em; }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3{ line-height: 1.3; }
:root[data-skin] .sec-title{ font-size: clamp(24px, 3vw, 36px); line-height: 1.3; margin: 0 0 var(--s4); }
:root[data-skin] .sec{ padding-block: var(--sec-y); }
:root[data-skin] .sec-title + p, :root[data-skin] .sec-lead{ margin-top: calc(var(--s2) * -1); margin-bottom: var(--s3); color: var(--muted); font-size: 15px; }
:root[data-skin] .eyebrow{ font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--muted); }
:root[data-skin] small, :root[data-skin] .note-s{ font-size: 13px; line-height: 1.6; }
:root[data-skin] .num{ font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; font-weight: 900; }

/* ===== ボタン・状態 ===== */
:root[data-skin] .btn{ min-height: 48px; border-width: var(--bw); border-radius: var(--r); font-size: 15px; letter-spacing: .02em; transition: transform .2s, background-color .2s, color .2s; }
:root[data-skin] .btn:hover{ transform: translateX(4px); }
:root[data-skin] .btn:active{ transform: translateY(1px); }
:root[data-skin] .btn:focus-visible, :root[data-skin] a:focus-visible, :root[data-skin] button:focus-visible, :root[data-skin] summary:focus-visible, :root[data-skin] .pick input:focus-visible + span{ outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
:root[data-skin] .btn[disabled], :root[data-skin] .btn.is-off{ opacity: .4; pointer-events: none; }
:root[data-skin] .btn.is-loading{ position: relative; pointer-events: none; }
:root[data-skin] .btn.is-loading::after{ content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--ink); transform-origin: left; animation: run 1s linear infinite; }
:root[data-skin] .btn.block{ display: flex; width: 100%; }
:root[data-skin] .chip{ min-height: 48px; border-width: var(--bw); border-radius: var(--r); }
:root[data-skin] .card-clickable{ transition: background-color .2s; }

/* ===== ヘッダー ===== */
:root[data-skin] .site-head{ display: flex; align-items: center; gap: var(--s2); height: 56px; padding: 0 var(--pad); }
:root[data-skin] .head-right{ display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
:root[data-skin] .site-nav{ display: none; gap: var(--s3); }
:root[data-skin] .head-login, :root[data-skin] .head-cta{ display: none; }
:root[data-skin] .menu-btn{ display: inline-flex; width: 44px; height: 44px; min-width: 44px; font-size: 20px; }
@media (min-width: 900px){
  :root[data-skin] .site-head{ height: 64px; }
  :root[data-skin] .site-nav{ display: flex; }
  :root[data-skin] .head-login, :root[data-skin] .head-cta{ display: inline-flex; }
  :root[data-skin] .menu-btn{ display: none; }
}
:root[data-skin] .head-login{ align-items: center; min-height: 44px; color: var(--bg); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; }
:root[data-skin] .head-login:hover{ border-bottom-color: var(--accent); }
:root[data-skin] .head-cta{ align-items: center; min-height: 40px; padding: 0 var(--s2); font-size: 14px; }
:root[data-skin] .head-acc{ display: flex; align-items: center; gap: var(--s2); font-size: 14px; }
:root[data-skin] .head-acc a{ color: var(--bg); text-decoration: none; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
:root[data-skin] .head-acc a:hover{ border-bottom-color: var(--accent); }
:root[data-skin] .head-acc .dot{ display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; background: var(--accent); color: var(--ink); font-family: var(--f-num); font-weight: 900; font-size: 12px; }
@media (max-width: 899px){ :root[data-skin] .head-acc .acc-hide{ display: none; } }
:root[data-skin] .menu-cta{ display: grid; gap: var(--s1); margin-top: var(--s3); }
:root[data-skin] .menu-overlay nav a{ font-size: 22px; padding: 12px 0; }

/* ===== ヒーロー（動画には見出しだけ。入力パネルは動画の下） ===== */
:root[data-skin] .hero{ padding-bottom: var(--s6); }
:root[data-skin] .top .hero{ padding-bottom: var(--s6); }
:root[data-skin] .hero .spots{ display: none; }
:root[data-skin] .hero-media{ height: clamp(272px, 44svh, 440px); }
:root[data-skin] .hero-overlay{ padding-bottom: var(--s4); }
:root[data-skin] .hero-title{ font-size: clamp(32px, 5vw, 56px) !important; line-height: 1.2; }
:root[data-skin] .hero-input{ display: grid !important; grid-template-columns: 1fr !important; gap: var(--s2) !important; margin-top: var(--s3) !important; padding: var(--s3) !important; background: var(--bg); border: var(--bw) solid var(--ink); box-shadow: none !important; }
:root[data-skin] .hero-input::after{ display: none !important; }
:root[data-skin] .hero-input > *{ grid-area: auto !important; margin: 0 !important; }
:root[data-skin] .hi-tag{ font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
:root[data-skin] .hi-side{ display: grid; gap: var(--s1); align-content: start; }
:root[data-skin] .hi-note{ font-size: 13px; color: var(--muted); line-height: 1.6; }
:root[data-skin] .hero-input textarea{ height: 88px !important; }
:root[data-skin] .hero-input select, :root[data-skin] .hero-input textarea{ margin-top: 4px; }
:root[data-skin] .hero-chips{ gap: var(--s1); margin: 0 !important; }
:root[data-skin] .hero-chips .chip{ padding: 0 var(--s2); font-size: 14px; }
:root[data-skin] .hi-chip-label{ font-size: 13px; font-weight: 700; letter-spacing: .06em; margin: 0 0 var(--s1); }
@media (min-width: 900px){
  :root[data-skin] .hero-input{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; column-gap: var(--s6) !important; padding: var(--s4) !important; }
  :root[data-skin] .hi-tag, :root[data-skin] .hi-chips{ grid-column: 1 / -1 !important; }
}

/* ===== 困りごとの実例（左：困りごと ⇄ 右：届く提案） ===== */
:root[data-skin] .pairs{ margin: var(--s4) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .pair{ display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .pair-arrow{ display: none; font-family: var(--f-num); font-weight: 900; text-align: center; }
:root[data-skin] .pair-meta{ font-size: 13px; color: var(--muted); line-height: 1.7; }
:root[data-skin] .pair-meta .tag{ display: inline-block; margin-right: var(--s1); padding: 0 8px; border: var(--bw) solid var(--ink); color: var(--ink); font-weight: 700; font-size: 12px; line-height: 20px; }
:root[data-skin] .pair h3{ margin-top: 4px; font-family: var(--f-head); font-weight: 700; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; }
:root[data-skin] .pair-a{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); font-size: 14px; }
:root[data-skin] .pair-a b{ font-family: var(--f-num); font-weight: 900; font-size: 22px; }
:root[data-skin] .pair-a .lbl{ font-size: 12px; color: var(--muted); letter-spacing: .06em; }
:root[data-skin] .pair-link{ display: block; text-decoration: none; color: inherit; }
:root[data-skin] .pair-link:hover h3{ text-decoration: underline; }
:root[data-skin] .pair.is-featured{ padding-inline: var(--s2); background: var(--accent-soft); border-bottom: var(--bw) solid var(--ink); }
:root[data-skin] .offers{ width: 100%; margin: 0; padding: 0; list-style: none; }
:root[data-skin] .offers li{ display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 4.5em; gap: var(--s1); align-items: baseline; padding: 4px 0; border-top: 1px solid rgba(13, 13, 11, .25); font-size: 14px; }
:root[data-skin] .offers li:first-child{ border-top: 0; }
:root[data-skin] .offers .n{ text-align: right; font-family: var(--f-num); font-weight: 900; font-variant-numeric: tabular-nums; }
:root[data-skin] .pair.is-free{ padding-inline: var(--s2); background: var(--ink); color: var(--bg); border-bottom: 0; }
:root[data-skin] .pair.is-free .pair-meta, :root[data-skin] .pair.is-free .lbl{ color: rgba(244, 240, 230, .75); }
:root[data-skin] .pair.is-free .pair-meta .tag{ border-color: var(--bg); color: var(--bg); }
@media (min-width: 900px){
  :root[data-skin] .pair{ grid-template-columns: minmax(0, 1.3fr) 32px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) 0; }
  :root[data-skin] .pair.is-featured, :root[data-skin] .pair.is-free{ padding-inline: var(--s3); }
  :root[data-skin] .pair-arrow{ display: block; }
}

/* ===== 流れ・安心・料金・FAQ ===== */
:root[data-skin] .flow-list{ margin: var(--s3) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .flow-list li{ display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); align-items: start; margin: 0 !important; padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .f-no{ display: grid; place-items: center; width: 56px; height: 44px; padding: 0; font-size: 26px; line-height: 1; transform: none; }
:root[data-skin] .flow-list h3{ font-family: var(--f-head); font-weight: 700; font-size: 20px; margin-bottom: 4px; }
:root[data-skin] .flow-list p{ font-size: 15px; }
:root[data-skin] .flow-note{ margin-top: var(--s2); font-size: 14px; color: var(--muted); }
:root[data-skin] .assure-list{ margin: var(--s3) 0 0; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .assure-list > div{ display: grid; grid-template-columns: 1fr; gap: 4px; padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .assure-list dt{ font-weight: 700; font-size: 17px; }
:root[data-skin] .assure-list dd{ margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 900px){ :root[data-skin] .assure-list > div{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4); } }
:root[data-skin] .spec-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
:root[data-skin] .spec-table th, :root[data-skin] .spec-table td{ padding: 12px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
:root[data-skin] .spec-table thead th{ font-size: 12px; letter-spacing: .1em; color: var(--muted); border-bottom: var(--bw) solid var(--ink); }
:root[data-skin] .fees-table th{ width: 8em; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
:root[data-skin] .fees-table td{ font-weight: 700; }
:root[data-skin] .fees-note{ margin-top: var(--s2); font-size: 14px; color: var(--muted); max-width: 40em; }
:root[data-skin] .faq-list summary{ min-height: 48px; padding: 12px 4px; }
:root[data-skin] .faq-list summary:hover{ background: var(--accent-soft); }
:root[data-skin] .band-ink{ padding-block: var(--s6); }
:root[data-skin] .divider-cg{ margin-block: 0; }

/* ===== 事業者ページ ===== */
:root[data-skin] .biz-stats{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s4); border-block: var(--bw) solid var(--ink); }
:root[data-skin] .biz-stats > div{ padding: var(--s2) var(--s1); border-right: 1px solid var(--hair); }
:root[data-skin] .biz-stats > div:last-child{ border-right: 0; }
:root[data-skin] .biz-stats dt{ font-size: 12px; letter-spacing: .06em; color: var(--muted); line-height: 1.5; }
:root[data-skin] .biz-stats dd{ margin: 4px 0 0; font-family: var(--f-num); font-weight: 900; font-size: clamp(30px, 6vw, 56px); line-height: 1.1; }
:root[data-skin] .biz-stats dd small{ font-family: var(--f-body); font-weight: 400; font-size: 12px; display: block; color: var(--muted); }
:root[data-skin] .calc{ display: grid; gap: var(--s3); margin-top: var(--s3); }
:root[data-skin] .calc-in{ display: grid; gap: var(--s2); }
:root[data-skin] .calc-res{ display: grid; grid-template-columns: 1fr; gap: var(--s2); }
:root[data-skin] .calc-box{ padding: var(--s2); border: var(--bw) solid var(--ink); background: transparent; }
:root[data-skin] .calc-box.win{ background: var(--accent-soft); }
:root[data-skin] .calc-box h3{ font-size: 13px; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
:root[data-skin] .calc-box dl{ margin: var(--s1) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s2); font-size: 15px; }
:root[data-skin] .calc-box dd{ margin: 0; text-align: right; font-family: var(--f-num); font-weight: 900; font-variant-numeric: tabular-nums; }
:root[data-skin] .calc-diff{ font-weight: 700; }
:root[data-skin] .calc-warn{ display: none; }
:root[data-skin] .calc-warn.on{ display: flex; }
@media (min-width: 700px){ :root[data-skin] .calc-res{ grid-template-columns: 1fr 1fr; } }
:root[data-skin] .cmp-table td.low{ font-weight: 700; background: var(--accent-soft); }
:root[data-skin] .cmp-table td, :root[data-skin] .cmp-table th{ text-align: right; }
:root[data-skin] .cmp-table td:first-child, :root[data-skin] .cmp-table th:first-child{ text-align: left; }

/* ===== 手順・ステップ表示 ===== */
:root[data-skin] .stepper{ display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 var(--s4); padding: 0; list-style: none; border: var(--bw) solid var(--ink); }
:root[data-skin] .stepper li{ padding: 8px 6px; font-size: 12px; line-height: 1.4; font-weight: 700; border-right: 1px solid var(--ink); text-align: left; }
:root[data-skin] .stepper li:last-child{ border-right: 0; }
:root[data-skin] .stepper li b{ display: block; font-family: var(--f-num); font-size: 16px; }
:root[data-skin] .stepper li.is-done{ background: var(--accent-soft); }
:root[data-skin] .stepper li.is-now{ background: var(--ink); color: var(--bg); }
:root[data-skin] .stepper li.is-now b{ color: var(--accent); }
:root[data-skin] .tl{ margin: var(--s3) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); counter-reset: tl; }
:root[data-skin] .tl li{ counter-increment: tl; display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .tl li::before{ content: counter(tl); display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--accent); font-family: var(--f-num); font-weight: 900; }
:root[data-skin] .tl h3{ font-size: 17px; font-weight: 700; margin-bottom: 4px; }
:root[data-skin] .tl p{ font-size: 15px; color: var(--muted); }

/* ===== フォーム ===== */
:root[data-skin] .auth{ padding-block: var(--s5) var(--s8); }
:root[data-skin] .auth-grid{ display: grid; gap: var(--s5); max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px){ :root[data-skin] .auth-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } :root[data-skin] .auth-grid.single{ grid-template-columns: minmax(0, 560px); justify-content: center; } }
:root[data-skin] .auth h1{ font-family: var(--f-head); font-weight: 700; font-size: clamp(26px, 4vw, 40px); margin-bottom: var(--s2); }
:root[data-skin] .panel{ padding: var(--s3); border: var(--bw) solid var(--ink); background: #F4F0E6; }
:root[data-skin] .form{ display: grid; gap: var(--s3); }
:root[data-skin] .f-row{ display: grid; gap: 4px; }
:root[data-skin] .f-label{ font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
:root[data-skin] .f-label .req{ font-size: 11px; letter-spacing: .08em; padding: 0 6px; background: var(--ink); color: var(--accent); line-height: 18px; }
:root[data-skin] .f-label .opt{ font-size: 11px; letter-spacing: .08em; padding: 0 6px; border: 1px solid var(--muted); color: var(--muted); line-height: 16px; }
:root[data-skin] .f-hint{ font-size: 13px; color: var(--muted); line-height: 1.6; }
:root[data-skin] .f-input{ width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: #F4F0E6; border: var(--bw) solid var(--ink); border-radius: var(--r); }
:root[data-skin] textarea.f-input{ min-height: 112px; line-height: 1.7; resize: vertical; }
:root[data-skin] .f-input:hover{ background: #F4F0E6; }
:root[data-skin] .f-input:focus{ outline: 0; box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--ink); }
:root[data-skin] .f-input[aria-invalid="true"]{ background: var(--accent-soft); border-width: 3px; }
:root[data-skin] .f-err{ display: none; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 700; line-height: 1.5; }
:root[data-skin] .f-row.has-err .f-err{ display: flex; }
:root[data-skin] .f-err::before{ content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; background: var(--ink); color: var(--accent); font-family: var(--f-num); font-weight: 900; font-size: 13px; }
:root[data-skin] .pw-wrap{ position: relative; }
:root[data-skin] .pw-wrap .f-input{ padding-right: 76px; }
:root[data-skin] .pw-toggle{ position: absolute; top: 0; right: 0; height: 48px; min-width: 64px; padding: 0 12px; border: 0; background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; }
:root[data-skin] .f-check{ display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.6; }
:root[data-skin] .f-check input{ width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
:root[data-skin] .pick-grid{ display: flex; flex-wrap: wrap; gap: var(--s1); }
:root[data-skin] .pick{ position: relative; }
:root[data-skin] .pick input{ position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
:root[data-skin] .pick span{ display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s2); border: var(--bw) solid var(--ink); border-radius: var(--r); font-weight: 700; font-size: 14px; background: #F4F0E6; }
:root[data-skin] .pick input:checked + span{ background: var(--ink); color: var(--bg); }
:root[data-skin] .pick input:hover + span{ background: var(--accent-soft); }
:root[data-skin] .pick input:checked:hover + span{ background: var(--ink); }
:root[data-skin] .file-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2); border: var(--bw) dashed var(--ink); background: #F4F0E6; }
:root[data-skin] .file-name{ font-size: 14px; color: var(--muted); }
:root[data-skin] .alert{ display: none; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--accent-soft); border: var(--bw) solid var(--ink); font-weight: 700; font-size: 14px; line-height: 1.6; }
:root[data-skin] .alert.on{ display: flex; }
:root[data-skin] .alert::before{ content: "!"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: var(--ink); color: var(--accent); font-family: var(--f-num); font-weight: 900; }
:root[data-skin] .notice{ padding: 8px 0 8px 16px; border-left: 6px solid var(--accent); font-size: 14px; line-height: 1.7; }
:root[data-skin] .notice b{ display: block; }
:root[data-skin] .form-foot{ display: grid; gap: var(--s2); }
:root[data-skin] .form-links{ font-size: 14px; }
:root[data-skin] .form-links a{ font-weight: 700; }
:root[data-skin] .done-panel{ display: none; }
:root[data-skin] .done-panel.on{ display: block; }
:root[data-skin] .is-hidden-form{ display: none; }
:root[data-skin] .provisional{ display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; border: 1px dashed var(--ink); line-height: 18px; vertical-align: middle; }
:root[data-skin] .demo-links{ margin-top: var(--s3); font-size: 12px; color: var(--muted); }
:root[data-skin] .demo-links a{ margin-right: var(--s2); }
:root[data-skin] .ex-box{ margin-top: var(--s3); border-top: var(--bw) solid var(--ink); }
:root[data-skin] .ex-box > div{ display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
:root[data-skin] .ex-box dt{ color: var(--muted); font-size: 13px; }
:root[data-skin] .ex-box dd{ margin: 0; font-weight: 700; }

/* ===== ステータスの札 ===== */
:root[data-skin] .st-b{ display: inline-block; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 20px; border: var(--bw) solid var(--ink); white-space: nowrap; }
:root[data-skin] .st-b.s-wait{ background: transparent; }
:root[data-skin] .st-b.s-now{ background: var(--accent); }
:root[data-skin] .st-b.s-ok{ background: var(--ink); color: var(--bg); }
:root[data-skin] .st-b.s-warn{ background: var(--accent-soft); }
:root[data-skin] .st-b.s-warn::before{ content: "! "; font-family: var(--f-num); font-weight: 900; }
:root[data-skin] .st-b.s-off{ border-color: var(--hair); color: var(--muted); }

/* ===== マイページ（利用者・事業者共通） ===== */
:root[data-skin] .dash{ padding-block: var(--s5) var(--s8); }
:root[data-skin] .dash h1{ font-family: var(--f-head); font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); }
:root[data-skin] .dash-sub{ color: var(--muted); font-size: 14px; margin-top: 4px; }
:root[data-skin] .dash-grid{ display: grid; gap: var(--s5); margin-top: var(--s4); }
@media (min-width: 900px){ :root[data-skin] .dash-grid.two{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s6); } }
:root[data-skin] .stat-row{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s3); border-block: var(--bw) solid var(--ink); }
:root[data-skin] .stat-row.four{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px){ :root[data-skin] .stat-row.four{ grid-template-columns: repeat(4, 1fr); } }
:root[data-skin] .stat{ padding: var(--s2) var(--s1); border-right: 1px solid var(--hair); }
:root[data-skin] .stat:last-child{ border-right: 0; }
:root[data-skin] .stat dt{ font-size: 12px; letter-spacing: .06em; color: var(--muted); }
:root[data-skin] .stat dd{ margin: 2px 0 0; font-family: var(--f-num); font-weight: 900; font-size: 28px; line-height: 1.2; }
:root[data-skin] .stat dd small{ font-family: var(--f-body); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 4px; }
:root[data-skin] .blk-h{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
:root[data-skin] .blk-h h2{ font-family: var(--f-head); font-weight: 700; font-size: 20px; }
:root[data-skin] .blk-h a{ font-size: 14px; font-weight: 700; }
:root[data-skin] .rows{ border-top: var(--bw) solid var(--ink); }
:root[data-skin] .row{ display: grid; gap: var(--s1); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .row-t{ font-weight: 700; font-size: 16px; line-height: 1.5; }
:root[data-skin] .row-m{ font-size: 13px; color: var(--muted); line-height: 1.7; }
:root[data-skin] .row-r{ display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
:root[data-skin] .row .btn{ min-height: 48px; padding: 0 var(--s2); font-size: 14px; }
@media (min-width: 900px){ :root[data-skin] .row{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); } }
:root[data-skin] .row.is-warn{ background: var(--accent-soft); padding-inline: var(--s2); }
:root[data-skin] .row .row-warn{ font-size: 13px; font-weight: 700; line-height: 1.6; }
:root[data-skin] .empty{ padding: var(--s3); border: var(--bw) dashed var(--ink); }
:root[data-skin] .empty b{ display: block; font-size: 16px; margin-bottom: 4px; }
:root[data-skin] .empty p{ font-size: 14px; color: var(--muted); }
:root[data-skin] .kv{ margin: 0; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .kv > div{ display: grid; grid-template-columns: 7em 1fr; gap: var(--s1); padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
:root[data-skin] .kv dt{ color: var(--muted); }
:root[data-skin] .kv dd{ margin: 0; font-weight: 700; overflow-wrap: anywhere; }
:root[data-skin] .pay-card{ display: grid; gap: 4px; padding: var(--s2); border: var(--bw) solid var(--ink); background: #F4F0E6; }
:root[data-skin] .pay-card .num-s{ font-family: var(--f-num); font-weight: 900; letter-spacing: .08em; font-size: 18px; }
:root[data-skin] .notif li{ padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.6; list-style: none; }
:root[data-skin] .notif{ margin: 0; padding: 0; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .notif time{ display: block; font-size: 12px; color: var(--muted); }
:root[data-skin] .fee-table td.r, :root[data-skin] .fee-table th.r{ text-align: right; }
:root[data-skin] .reply-box{ margin-top: var(--s1); padding: 12px; background: #F4F0E6; border: 1px solid var(--ink); display: none; }
:root[data-skin] .reply-box.on{ display: block; }
:root[data-skin] .rv-q{ font-size: 15px; line-height: 1.7; }

/* ===== 提案カード（比較画面）— 台帳の1行。スマホは1枚が画面の1/4以下 ===== */
:root[data-skin] .proposal{ --c-price: 176px; --c-time: 120px; --c-rate: 104px; padding: var(--s2) !important; margin-top: var(--s1) !important; border: var(--bw) solid var(--ink) !important; background: #F4F0E6 !important; box-shadow: none !important; row-gap: 8px !important; }
:root[data-skin] .proposal::before, :root[data-skin] .proposal::after{ display: none !important; }
:root[data-skin] .proposal .p-name{ font-size: 17px; line-height: 1.4; }
:root[data-skin] .proposal .p-tags{ display: none; }
:root[data-skin] .proposal .p-msg{ font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-skin] .proposal .n b{ font-size: 24px; }
:root[data-skin] .proposal .n small{ display: none; }
:root[data-skin] .proposal .n dt{ font-size: 11px; }
:root[data-skin] .proposal .p-nums{ padding-block: 4px !important; border: 0 !important; }
:root[data-skin] .proposal .p-act{ display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s1); }
:root[data-skin] .proposal .p-act .btn{ min-height: 48px; padding: 0 var(--s2); font-size: 14px; }
@media (min-width: 860px){
  :root[data-skin] .proposal{ padding: var(--s3) !important; }
  :root[data-skin] .proposal .p-tags{ display: flex; }
  :root[data-skin] .proposal .p-msg{ -webkit-line-clamp: 2; }
  :root[data-skin] .proposal .n small{ display: block; }
  :root[data-skin] .proposal .p-act{ grid-template-columns: 1fr; }
}

/* ===== コラムのカード（雑誌の目次のような行） ===== */
:root[data-skin] .col-grid{ gap: 0 !important; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .col-card{ border: 0 !important; border-bottom: 1px solid var(--hair) !important; background: transparent !important; box-shadow: none !important; padding: var(--s2) 0 !important; }
:root[data-skin] .col-card::after{ display: none !important; }
:root[data-skin] .col-card-t{ font-size: 18px !important; line-height: 1.5 !important; }
:root[data-skin] .col-card-d{ font-size: 14px !important; color: var(--muted) !important; }
:root[data-skin] .col-card.is-soon{ opacity: .6; }
:root[data-skin] a.col-card:hover{ background: var(--accent-soft) !important; }
@media (min-width: 800px){ :root[data-skin] .col-grid{ column-gap: var(--s6) !important; } }

/* ===== フッター・追従CTA・トースト ===== */
:root[data-skin] .site-foot{ padding-block: var(--s6) 112px; }
:root[data-skin] .sticky-cta{ padding-block: 8px; }
:root[data-skin] .sticky-cta .sc-text{ line-height: 1.5; }

/* ===== デモ用の状態切替リンク ===== */
:root[data-skin] .demo-states{ font-size: 12px; color: var(--muted); }
:root[data-skin] .demo-states a{ margin-right: var(--s2); }

/* ===== 状態（月額プランの契約状況） ===== */
:root[data-skin] body[data-plan="active"] [data-plan-only]:not([data-plan-only~="active"]){ display: none !important; }
:root[data-skin] body[data-plan="none"] [data-plan-only]:not([data-plan-only~="none"]){ display: none !important; }
:root[data-skin] body[data-plan="cancel"] [data-plan-only]:not([data-plan-only~="cancel"]){ display: none !important; }
:root[data-skin] body[data-plan="failed"] [data-plan-only]:not([data-plan-only~="failed"]){ display: none !important; }
:root[data-skin] body[data-plan="none"] .propose-btn, :root[data-skin] body[data-plan="failed"] .propose-btn{ opacity: .4; pointer-events: none; }
:root[data-skin] .cancel-box{ display: none; margin-top: var(--s2); padding: var(--s2); border: var(--bw) solid var(--ink); background: var(--accent-soft); }
:root[data-skin] .cancel-box.on{ display: block; }
:root[data-skin] .cancel-box p{ font-size: 14px; line-height: 1.7; }
:root[data-skin] [data-pay-state]{ display: none; }
:root[data-skin] [data-pay-state].on{ display: block; }
:root[data-skin] .pair.is-featured .pair-a .lbl{ display: none; }
:root[data-skin] .t-more-row{ margin-top: var(--s2); font-size: 14px; }
@media (max-width: 899px){ :root[data-skin] .menu-btn{ width: 48px; height: 48px; min-width: 48px; } :root[data-skin] .pair{ padding: 12px 0; } :root[data-skin] .pair.is-featured .offers li{ padding: 2px 0; } }
:root[data-skin] .proposal .p-msg{ display: none; }
@media (min-width: 860px){ :root[data-skin] .proposal .p-msg{ display: -webkit-box; } }
:root[data-skin] .col-card-d{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-skin] .hero-media{ height: clamp(240px, 36svh, 400px); }
:root[data-skin]{ --sec-y: 48px; }
@media (min-width: 900px){ :root[data-skin]{ --sec-y: 96px; } }
:root[data-skin] .table-scroll{ overflow-x: auto; }
:root[data-skin] .cmp-table, :root[data-skin] .fee-table{ min-width: 0; }
:root[data-skin] .cmp-table th, :root[data-skin] .cmp-table td, :root[data-skin] .fee-table th, :root[data-skin] .fee-table td{ padding: 12px 6px; font-size: 14px; }

/* ---- 小さめカード（スマホで画面の1/4以内に収める） ---- */
@media (max-width: 859px){
  :root[data-skin] .proposal{ padding: 12px var(--s2) !important; row-gap: 4px !important; }
  :root[data-skin] .proposal .p-nums{ padding-block: 0 !important; }
  :root[data-skin] .proposal .n b{ font-size: 22px; }
  :root[data-skin] .col-card-d{ -webkit-line-clamp: 1; }
}
@media (max-width: 899px){
  :root[data-skin] .pair{ gap: 4px; padding: 8px 0; }
  :root[data-skin] .pair.is-featured, :root[data-skin] .pair.is-free{ padding-block: 12px; }
  :root[data-skin] .pair.is-featured{ gap: 4px; }
}

/* ---- 装飾の整理：フォームやカードの角・縁には飾りを付けない ---- */
:root[data-skin] .panel, :root[data-skin] .wiz-summary{ box-shadow: none !important; border: var(--bw) solid var(--ink) !important; background: #F4F0E6; }
:root[data-skin] .panel::after, :root[data-skin] .wiz-summary::after, :root[data-skin] .hero-ticket::after, :root[data-skin] .hero-ticket::before, :root[data-skin] .stat-band::after, :root[data-skin] .hero-input::after, :root[data-skin] .ex-card::after{ display: none !important; content: none !important; }

/* ---- 黒い帯の中の文字は、必ず読める色に ---- */
:root[data-skin] .band-ink p, :root[data-skin] .band-ink .pro-lead, :root[data-skin] .band-ink .sec-lead, :root[data-skin] .hero .lead{ color: rgba(244, 240, 230, .88) !important; }
:root[data-skin] .band-ink .spots{ opacity: .12 !important; }

/* ---- 計算機・比較表：二重の縁を外し、スマホで切れないように ---- */
:root[data-skin] .calc{ box-shadow: none !important; border: var(--bw) solid var(--ink) !important; }
:root[data-skin] .hero .fees-note, :root[data-skin] .band-ink .fees-note{ color: rgba(244, 240, 230, .78) !important; }
:root[data-skin] .cmp-table{ table-layout: fixed; width: 100%; }
:root[data-skin] .cmp-table th, :root[data-skin] .cmp-table td{ padding: 8px 4px !important; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
:root[data-skin] .cmp-table th:first-child, :root[data-skin] .cmp-table td:first-child{ width: 29%; }
@media (min-width: 860px){ :root[data-skin] .cmp-table th, :root[data-skin] .cmp-table td{ padding: 12px 16px !important; font-size: 15px; } }

/* ---- 黒背景の小さな文字の読みやすさ ---- */
:root[data-skin] .biz-hero .biz-stats dt, :root[data-skin] .hero .biz-stats dt, :root[data-skin] .hero .biz-stats small{ color: rgba(244, 240, 230, .82) !important; }
:root[data-skin] .hero .fees-note, :root[data-skin] .band-ink .fees-note{ color: rgba(244, 240, 230, .9) !important; }


/* ---- 未ログインのヒーロー、ゲート、空状態、読み込み中 ---- */
:root[data-skin] .hero-title{ font-size: clamp(28px, 7.2vw, 56px) !important; line-height: 1.3; }
:root[data-skin] .hi-h{ margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; }
:root[data-skin] .hi-p{ margin-top: var(--s1); font-size: 14px; line-height: 1.8; }
:root[data-skin] .hero-input .btn + .btn{ margin-top: var(--s1); }
:root[data-skin] .gate{ max-width: 560px; margin: var(--s6) auto; }
:root[data-skin] .gate-h{ margin-top: var(--s1); font-family: var(--f-head); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.4; }
:root[data-skin] .gate p{ margin-top: var(--s2); font-size: 14px; line-height: 1.8; }
:root[data-skin] .gate .eyebrow{ margin-top: 0; }
:root[data-skin] .gate .form-foot{ margin-top: var(--s3); }
:root[data-skin] .auth-out, :root[data-skin] .auth-in{ display: contents; }
:root[data-skin] .skel{ margin-top: var(--s1); padding: 12px var(--s2); border: var(--bw) solid var(--ink); }
:root[data-skin] .skel i{ display: block; height: 12px; margin: 8px 0; background: linear-gradient(90deg, rgba(13,13,11,.08), rgba(13,13,11,.18), rgba(13,13,11,.08)); background-size: 200% 100%; animation: skel-move 1.2s linear infinite; }
:root[data-skin] .skel i.w60{ width: 60%; height: 16px; } :root[data-skin] .skel i.w90{ width: 90%; } :root[data-skin] .skel i.w40{ width: 40%; }
@keyframes skel-move{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){ :root[data-skin] .skel i{ animation: none; } }
:root[data-skin] .loading-t{ margin-top: var(--s2); font-size: 14px; color: var(--muted); }

/* ---- PCでは、カードを3列に ---- */
@media (min-width: 1024px){
  :root[data-skin] [data-proposals]{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); align-items: stretch; }
  :root[data-skin] [data-proposals][hidden]{ display: none !important; }
  :root[data-skin] [data-proposals] .proposal{ margin-top: 0 !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: none !important; align-content: start; }
  :root[data-skin] [data-proposals] .proposal > *{ grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; }
  :root[data-skin] [data-proposals] .proposal .p-act{ grid-template-columns: 1.4fr 1fr; }
  :root[data-skin] .col-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- 未ログインのヒーロー：白抜きでないボタン／PCカード3列の数字行 ---- */
:root[data-skin] .hero-input .btn-ghost{ color: var(--ink); border-color: var(--ink); background: transparent; }
:root[data-skin] .hero-input .btn-ghost:hover{ background: var(--accent); }
@media (min-width: 860px){
  :root[data-skin] [data-proposals] .proposal .p-nums{ display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: var(--s1); }
  :root[data-skin] [data-proposals] .proposal .n b{ font-size: 22px; }
  :root[data-skin] [data-proposals] .proposal .n-price dd small, :root[data-skin] [data-proposals] .proposal .n-rate dd small{ display: block; }
}

/* ---- 数字の桁をそろえる（表や一覧で並ぶ数字） ---- */
:root[data-skin] .num, :root[data-skin] td, :root[data-skin] .stat dd, :root[data-skin] .kv dd, :root[data-skin] .n b, :root[data-skin] dd b, :root[data-skin] .biz-stats dd, :root[data-skin] .calc-box dd, :root[data-skin] .pair-a b{ font-variant-numeric: lining-nums tabular-nums; }


/* ---- 絵（自作SVG）と、例のカード（BUTSU×2式：例を絵で見せる） ---- */
:root[data-skin] .sprite .ln{ fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
:root[data-skin] .sprite .a{ fill: var(--accent); }
:root[data-skin] .sprite .as{ stroke: var(--accent); }
:root[data-skin] .ic{ width: 48px; height: 48px; flex: none; color: var(--ink); }
:root[data-skin] .ic-s{ width: 28px; height: 28px; margin-right: 8px; vertical-align: -9px; }
:root[data-skin] .pair.is-free .ic{ color: var(--bg); }
:root[data-skin] .ic-speed{ width: 40px; height: 20px; color: var(--ink); flex: none; }
:root[data-skin] .ic-st{ width: 56px; height: 56px; }
:root[data-skin] .flow-list li{ grid-template-columns: 56px 1fr 56px !important; }
:root[data-skin] .flow-list .ic-fl{ width: 52px; height: 52px; align-self: center; }
:root[data-skin] .steps{ margin: var(--s3) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .steps li{ display: grid; grid-template-columns: 56px 1fr; gap: var(--s2); align-items: start; padding: var(--s2) 0; border-bottom: 1px solid var(--hair); }
:root[data-skin] .st-n{ margin: 0; font-family: var(--f-num); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
:root[data-skin] .steps h3{ margin: 2px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.4; }
:root[data-skin] .steps li p:not(.st-n){ margin: 0; font-size: 15px; color: var(--muted); }
:root[data-skin] .swipe-hint{ margin: var(--s2) 0 var(--s1); font-size: 13px; color: var(--muted); }
:root[data-skin] .swipe{ display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--s1); -webkit-overflow-scrolling: touch; }
:root[data-skin] .ex-c{ flex: 0 0 84%; scroll-snap-align: start; padding: 12px var(--s2); border: var(--bw) solid var(--ink); background: var(--bg); }
:root[data-skin] .ex-tag{ display: inline-block; margin: 0; padding: 0 8px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; line-height: 22px; }
:root[data-skin] .ex-art{ display: grid; grid-template-columns: 64px 40px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; }
:root[data-skin] .ex-ic{ display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
:root[data-skin] .ic-l{ width: 48px; height: 48px; }
:root[data-skin] .ex-tk{ display: grid; padding: 6px 10px; background: var(--accent); border: var(--bw) solid var(--ink); line-height: 1.3; }
:root[data-skin] .ex-tk span{ font-size: 11px; font-weight: 700; }
:root[data-skin] .ex-tk b{ font-size: 22px; font-weight: 900; font-variant-numeric: lining-nums tabular-nums; }
:root[data-skin] .ex-tk i{ font-style: normal; font-size: 12px; }
:root[data-skin] .ex-q{ margin: 8px 0 0; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px){
  :root[data-skin] .swipe-hint{ display: none; }
  :root[data-skin] .swipe{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  :root[data-skin] .ex-c{ flex: none; }
}

/* ---- 絵を、もう少し大きく ---- */
:root[data-skin] .ex-art{ grid-template-columns: 72px 40px minmax(0, 1fr); }
:root[data-skin] .ic-l{ width: 60px; height: 60px; }
:root[data-skin] .ic-s{ width: 32px; height: 32px; vertical-align: -11px; }
:root[data-skin] .ic-st{ width: 64px; height: 64px; }
:root[data-skin] .steps li{ grid-template-columns: 64px 1fr; }
:root[data-skin] .flow-list .ic-fl{ width: 56px; height: 56px; }


/* ---- シマウマ（利用者）とチーター（事業者） ---- */
:root[data-skin] .ex-art{ grid-template-columns: 56px minmax(0, 1fr) 64px; gap: 8px; }
:root[data-skin] .ex-z{ position: relative; width: 56px; height: 56px; }
:root[data-skin] .zb{ display: block; width: 56px; height: 56px; color: var(--ink); }
:root[data-skin] .ch{ display: block; width: 64px; height: 43px; color: var(--ink); }
:root[data-skin] .ex-bub{ position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 28px; height: 28px; background: var(--bg); border: var(--bw) solid var(--ink); border-radius: 50%; }
:root[data-skin] .ic-bub{ width: 17px; height: 17px; }
:root[data-skin] .ic-st{ width: 72px; height: 48px; }
:root[data-skin] .steps li{ grid-template-columns: 72px 1fr; }
:root[data-skin] .flow-list li{ grid-template-columns: 56px 1fr 72px !important; }
:root[data-skin] .flow-list .ic-fl{ width: 72px; height: 48px; }

/* ---- 2匹を、もう少し大きく ---- */
:root[data-skin] .ex-c{ flex: 0 0 88%; }
:root[data-skin] .ex-art{ grid-template-columns: 72px minmax(0, 1fr) 80px; }
:root[data-skin] .ex-z, :root[data-skin] .zb{ width: 72px; height: 72px; }
:root[data-skin] .ch{ width: 80px; height: 54px; }
:root[data-skin] .ex-bub{ top: -12px; left: -10px; width: 34px; height: 34px; }
:root[data-skin] .ic-bub{ width: 22px; height: 22px; }
:root[data-skin] .ex-tk b{ font-size: 21px; }
:root[data-skin] .ic-st{ width: 96px; height: 64px; }
:root[data-skin] .steps li{ grid-template-columns: 96px 1fr; }
:root[data-skin] .flow-list li{ grid-template-columns: 56px 1fr !important; }
:root[data-skin] .flow-list .f-no{ grid-row: 1 / span 2; }
:root[data-skin] .flow-list .ic-fl{ grid-column: 2; grid-row: 2; width: 96px; height: 64px; margin-top: 4px; align-self: start; }


/* ---- 例のカード：1枚ずつ切り替え（スマホ）。矢印とドットで、いま何枚目か分かる ---- */
:root[data-skin] .swipe{ gap: 12px; scroll-snap-type: x mandatory; }
:root[data-skin] .ex-c{ flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; }
:root[data-skin] .swipe-nav{ display: flex; align-items: center; justify-content: space-between; margin-top: var(--s1); }
:root[data-skin] .sw-btn{ width: 48px; height: 48px; padding: 0; border: var(--bw) solid var(--ink); background: var(--bg); color: var(--ink); font-size: 20px; font-weight: 900; cursor: pointer; }
:root[data-skin] .sw-btn:active{ background: var(--accent); }
:root[data-skin] .sw-dots{ display: flex; gap: 10px; }
:root[data-skin] .sw-dot{ width: 12px; height: 12px; padding: 0; border: var(--bw) solid var(--ink); border-radius: 50%; background: transparent; cursor: pointer; }
:root[data-skin] .sw-dot[aria-current="true"]{ background: var(--accent); }
@media (min-width: 900px){ :root[data-skin] .swipe-nav{ display: none; } :root[data-skin] .ex-c{ flex: none; } }

/* ---- 法務ページ（特商法・プライバシーポリシー・利用規約） ---- */
:root[data-skin] .legal{ padding: var(--s6) 0; }
:root[data-skin] .legal .wrap{ max-width: 760px; }
:root[data-skin] .legal h1{ margin: var(--s1) 0 var(--s2); font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.3; }
:root[data-skin] .legal h2{ margin: var(--s5) 0 var(--s1); padding-top: var(--s2); border-top: var(--bw) solid var(--ink); font-size: 18px; font-weight: 700; line-height: 1.4; }
:root[data-skin] .legal p, :root[data-skin] .legal li{ margin: var(--s1) 0 0; font-size: 15px; line-height: 1.85; }
:root[data-skin] .legal ul{ margin: var(--s1) 0 0; padding-left: 1.2em; }
:root[data-skin] .legal-note{ padding: 12px var(--s2); border: var(--bw) solid var(--ink); background: rgba(255, 176, 0, .18); font-size: 14px; }
:root[data-skin] .legal .kv > div{ grid-template-columns: 8.5em 1fr; }


/* ---- 利用例ページ ---- */
:root[data-skin] .case{ padding: var(--s4) 0 var(--s6); }
:root[data-skin] .case .wrap{ max-width: 760px; }
:root[data-skin] .crumb{ margin: 0; font-size: 13px; color: var(--muted); }
:root[data-skin] .crumb a{ color: var(--muted); }
:root[data-skin] .case h1{ margin: var(--s1) 0; font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; line-height: 1.4; }
:root[data-skin] .case-who{ margin: 0; font-size: 13px; color: var(--muted); }
:root[data-skin] .case .steps h2{ margin: 2px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.4; }
:root[data-skin] .case .steps p{ margin: 0; font-size: 15px; color: var(--ink); }
:root[data-skin] .q-quote{ margin: 8px 0 !important; padding: 8px 12px; border-left: 4px solid var(--accent); font-size: 15px; }
:root[data-skin] .case-meta{ margin: 4px 0 0 !important; font-size: 13px !important; color: var(--muted) !important; }
:root[data-skin] .offers-t{ width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; }
:root[data-skin] .offers-t th, :root[data-skin] .offers-t td{ padding: 8px 6px; border-bottom: 1px solid var(--hair); text-align: left; font-weight: 500; }
:root[data-skin] .offers-t th{ font-size: 12px; color: var(--muted); }
:root[data-skin] .offers-t .r{ text-align: right; }
:root[data-skin] .offers-t tr.pick td{ background: rgba(255, 176, 0, .18); font-weight: 700; }
:root[data-skin] .tk{ display: inline-grid; margin-top: 4px; padding: 6px 12px; background: var(--accent); border: var(--bw) solid var(--ink); line-height: 1.3; }
:root[data-skin] .tk span{ font-size: 11px; font-weight: 700; } :root[data-skin] .tk b{ font-size: 22px; font-weight: 900; } :root[data-skin] .tk i{ font-style: normal; font-size: 12px; }
:root[data-skin] .case .kv{ margin-top: 8px; }
:root[data-skin] .case-cta{ margin-top: var(--s5); padding: var(--s3); border: var(--bw) solid var(--ink); }
:root[data-skin] .case-cta p{ margin: 0 0 var(--s1); font-size: 14px; }
:root[data-skin] .case-cta .case-cta-t{ font-size: 17px; font-weight: 700; }
:root[data-skin] .case-cta .btn{ margin-top: var(--s1); }
:root[data-skin] .case-rel-h{ margin: var(--s5) 0 var(--s1); font-size: 17px; font-weight: 700; }
:root[data-skin] .case-rel{ margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--ink); }
:root[data-skin] .case-rel li{ padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.6; }
:root[data-skin] .case-rel a{ color: var(--ink); text-decoration: none; }
:root[data-skin] .case-rel a:hover{ text-decoration: underline; }

:root[data-skin] .steps li > div{ min-width: 0; }
:root[data-skin] .offers-t{ table-layout: fixed; }
:root[data-skin] .offers-t th:first-child, :root[data-skin] .offers-t td:first-child{ width: 46%; overflow-wrap: anywhere; }
:root[data-skin] .offers-t th:nth-child(2), :root[data-skin] .offers-t td:nth-child(2){ width: 28%; }
:root[data-skin] .offers-t .st-b{ display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 11px; line-height: 20px; vertical-align: 1px; }


/* ---- 支払い方法の表示（提案カード・事前決済・設定） ---- */
:root[data-skin] .p-pay{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: 11px; line-height: 16px; grid-area: auto !important; grid-column: 1 / -1; }
:root[data-skin] .pay-t{ color: var(--muted); margin-right: 2px; }
:root[data-skin] .pay-b{ padding: 0 6px; border: 1px solid var(--ink); font-weight: 700; }
:root[data-skin] .pay-when{ padding: 0 6px; background: var(--ink); color: var(--bg); font-weight: 700; }
:root[data-skin] .pay-step{ margin-top: var(--s2); padding: var(--s2); border: var(--bw) solid var(--ink); background: rgba(255, 176, 0, .18); }
:root[data-skin] .pay-step .pay-h{ margin: 0 0 var(--s1); font-size: 15px; font-weight: 700; }
:root[data-skin] .pay-step p{ font-size: 13px; }
:root[data-skin] .pay-step .pick-grid{ margin-bottom: var(--s1); }
:root[data-skin] .pay-note{ margin: var(--s1) 0 0 !important; color: var(--muted); }
:root[data-skin] .f-hint{ margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
:root[data-skin] [data-small-warn]{ display: none; }
:root[data-skin] [data-small-warn].on{ display: block; }


/* ---- LINE通知（連携の設定と、届き方のイメージ） ---- */
:root[data-skin] .line-card .line-st{ margin: 0 0 var(--s1); display: flex; align-items: center; gap: 8px; }
:root[data-skin] .line-who{ font-size: 14px; font-weight: 700; }
:root[data-skin] .line-card:not(.is-off) .off-only, :root[data-skin] .line-card.is-off .on-only{ display: none !important; }
:root[data-skin] .chat{ margin-top: var(--s2); padding: var(--s2); border: var(--bw) solid var(--ink); background: var(--bg); }
:root[data-skin] .chat-h{ margin: 0 0 var(--s1); padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: 12px; font-weight: 700; color: var(--muted); }
:root[data-skin] .chat-row{ display: flex; align-items: flex-end; gap: 8px; margin-top: var(--s1); }
:root[data-skin] .chat-b{ max-width: 82%; padding: 8px 12px; background: var(--accent); border: var(--bw) solid var(--ink); font-size: 14px; line-height: 1.6; }
:root[data-skin] .chat-b b{ font-weight: 900; }
:root[data-skin] .chat-t{ font-size: 11px; color: var(--muted); }
:root[data-skin] .line-sec .chat{ max-width: 420px; }

/* ---- 承認後の表示が、細い列に押し込まれないように ---- */
:root[data-skin] .proposal .approve-box{ grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
:root[data-skin] .proposal .p-act:has(.approve-box){ display: block; grid-template-columns: 1fr; }
:root[data-skin] .pay-step{ width: 100%; box-sizing: border-box; }
:root[data-skin] .approve-box .p-act{ display: grid; grid-template-columns: 1fr; margin-top: var(--s1); }