/* モグカツ デザインシステム（tokens.json）準拠 */
:root {
  /* 地・面 */
  --page: #fbf9f6; --section-ground: #f4efe9; --surface: #ffffff; --surface-sunken: #fbf8f4;
  --tint-200: #eee7df; --summary: #ede9e5; --line: #e7dfd5; --connector: #c6b4a2;
  /* 文字 */
  --ink: #5d402e; --ink-body: #7c6552; --ink-sub: #8b7660; --ink-muted: #a08f7e; --ink-faint: #bba894; --ink-disabled: #cbb8aa;
  /* 主役 */
  --rose: #c98198; --on-rose: #ffffff; --rose-ink: #9c5a76; --rose-tint: #f6e7eb; --rose-line: #eacfd8;
  /* 注釈・警告 */
  --note: #5a7f8a; --note-tint: #edf2f4; --note-line: #d7e3e7; --warning-red: #c62828;
  /* 余白・角丸・影 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-rose: 0 8px 24px rgba(201, 129, 152, 0.28); --shadow-ink: 0 8px 24px rgba(93, 64, 46, 0.18); --halo-rose: 0 0 0 6px rgba(201, 129, 152, 0.14);
  --border-hairline: 1px; --border-strong: 1.5px; --bar-width: 40px;
  --font-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--page); }
body { font-family: var(--font-sans); color: var(--ink); font-size: 14px; line-height: 1.8; font-weight: 700; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }

/* アイコン（DSの線画SVGをマスクにして色を文脈に合わせる） */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.ic-document { --src: url(/assets/icons/document.svg); } .ic-users { --src: url(/assets/icons/users.svg); }
.ic-store { --src: url(/assets/icons/store.svg); } .ic-yen { --src: url(/assets/icons/yen.svg); }
.ic-messages { --src: url(/assets/icons/messages.svg); } .ic-check { --src: url(/assets/icons/check.svg); }

/* ヘッダー：BrandLockup */
.top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); background: var(--page); border-bottom: var(--border-hairline) solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.brand img { width: 108px; height: auto; display: block; }
.brand-label { font-size: 9.5px; line-height: 1.4; font-weight: 700; letter-spacing: .3em; color: var(--ink-muted); text-transform: uppercase; }

/* Chip */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12px; line-height: 1.4; font-weight: 700; white-space: nowrap; }
.chip-neutral { background: var(--surface-sunken); border: var(--border-hairline) solid var(--line); color: var(--ink-body); }
.req { display: inline-flex; align-items: center; padding: 0 8px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--rose-tint); border: var(--border-hairline) solid var(--rose-line); color: var(--rose-ink); font-size: 10.5px; line-height: 18px; font-weight: 700; vertical-align: 1px; }

/* PageHeader */
.wrap { max-width: 880px; margin: 0 auto; padding: var(--space-10) var(--space-4) 112px; }
.intro { position: relative; padding-left: calc(var(--bar-width) + var(--space-4)); }
.intro::before { content: ""; position: absolute; left: 0; top: 17px; width: var(--bar-width); height: 6px; border-radius: var(--radius-pill); background: var(--ink); }
.intro h1 { font-size: 32px; line-height: 1.2; font-weight: 900; letter-spacing: .04em; color: var(--ink); }
.intro p { margin-top: var(--space-2); font-size: 14px; line-height: 1.7; font-weight: 500; letter-spacing: .03em; color: var(--ink-sub); }

/* ステップ */
.steps { list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-6); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ink-muted); text-align: center; position: relative; }
.steps li::after { content: ""; position: absolute; top: 22px; left: calc(50% + 30px); right: calc(-50% + 30px); height: var(--border-strong); background: var(--line); }
.steps li:last-child::after { display: none; }
.steps .tile { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--section-ground); color: var(--ink-body); }
.steps li.done { color: var(--rose-ink); cursor: pointer; }
.steps li.done .tile { background: var(--rose-tint); color: var(--rose-ink); }
.steps li.done .tile .ic { --src: url(/assets/icons/check.svg); }
.steps li.done::after { background: var(--rose-line); }
.steps li.on { color: var(--ink); font-weight: 900; }
.steps li.on .tile { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-ink); }

/* Card */
.card { background: var(--surface); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-8) var(--space-6); color: var(--ink-body); }
.card-hd { display: flex; align-items: center; gap: var(--space-3); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 900; letter-spacing: .08em; background: var(--rose); color: var(--on-rose); }
.badge-ink { background: var(--ink); color: var(--surface); }
.card h2 { font-size: 20px; line-height: 1.4; font-weight: 900; color: var(--ink); letter-spacing: .03em; }
.card h3 { font-size: 15px; font-weight: 900; color: var(--ink); margin: var(--space-8) 0 var(--space-3); padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--line); }
.lead { color: var(--ink-body); font-size: 13px; line-height: 1.8; margin: var(--space-2) 0 var(--space-6); }
.sub { font-size: 10.5px; font-weight: 700; color: var(--ink-muted); letter-spacing: .04em; margin: 0 0 var(--space-3); }

/* 入力 */
.field { display: block; margin: 0 0 var(--space-5); border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 900; color: var(--ink); margin-bottom: var(--space-2); padding: 0; }
.field small { display: block; font-size: 11.5px; line-height: 1.7; color: var(--ink-body); margin-top: 6px; }
.half { max-width: 400px; }
.field small a, a.ext { color: var(--rose-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
a.ext::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }
a.ext:hover { color: var(--ink); }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ink);
  background: var(--surface); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); padding: 11px 14px; transition: border-color .15s, box-shadow .15s;
}
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-body) 50%), linear-gradient(135deg, var(--ink-body) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 72px; }
input:hover, select:hover, textarea:hover { border-color: var(--connector); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rose); box-shadow: var(--halo-rose); }
::placeholder { color: var(--ink-disabled); font-weight: 500; }
.invalid input:not([type=radio]):not([type=checkbox]), .invalid select, .invalid textarea { border-color: var(--warning-red); border-width: var(--border-strong); }
.err { color: var(--warning-red); font-size: 12px; font-weight: 700; margin-top: 6px; }
.err::before { content: "※ "; }

.grid2, .grid3, .grid-addr { display: grid; gap: 0 var(--space-4); }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: repeat(3, 1fr); }
.grid-addr { grid-template-columns: 180px 240px; }
.addr { background: var(--surface-sunken); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-1); margin: 0 0 var(--space-5); }

.radios { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radios label, .agree label { cursor: pointer; background: var(--surface); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-md); color: var(--ink-body); transition: border-color .15s, background .15s; }
.radios label { display: flex; align-items: center; gap: var(--space-2); padding: 10px 18px; font-size: 14px; font-weight: 700; }
.radios label:hover, .agree label:hover { border-color: var(--connector); }
.radios label:has(input:checked), .agree label:has(input:checked) { background: var(--rose-tint); border: var(--border-strong) solid var(--rose-line); color: var(--rose-ink); }
input[type=radio], input[type=checkbox] { accent-color: var(--rose); width: 18px; height: 18px; flex: none; margin: 0; }
input[type=radio]:focus-visible, input[type=checkbox]:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); align-items: stretch; padding-top: var(--space-2); }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); transition: border-color .15s, background .15s, box-shadow .15s; }
.plan:hover { border-color: var(--connector); }
.plan-featured { border: 2px solid var(--rose-line); }
.plan:has(input:checked) { background: var(--rose-tint); border: 2px solid var(--rose); box-shadow: var(--halo-rose); }
.plan-main { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-4) var(--space-4); cursor: pointer; flex: 1; }
.plan-main input { position: absolute; top: var(--space-4); right: var(--space-4); }
.plan-hd { display: flex; flex-direction: column; gap: 2px; padding-right: var(--space-6); }
.plan-name { font-size: 16px; line-height: 1.4; font-weight: 900; color: var(--ink); }
.plan-catch { font-size: 11px; line-height: 1.6; font-weight: 700; color: var(--ink-sub); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--rose); color: var(--on-rose); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; padding: 3px 12px; border-radius: var(--radius-pill); box-shadow: var(--shadow-rose); }
.plan-price { display: flex; align-items: baseline; gap: 4px; color: var(--ink); }
.plan-price .amt { font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: 0; }
.plan-price .unit { font-size: 11px; font-weight: 900; }
.plan-feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-feat li { position: relative; padding-left: 18px; font-size: 11.5px; line-height: 1.6; font-weight: 700; color: var(--ink-body); }
.plan-feat li::before { position: absolute; left: 0; top: 0; font-weight: 900; }
.plan-feat li.yes::before { content: "✓"; color: var(--rose-ink); }
.plan-feat li.no { color: var(--ink-disabled); }
.plan-feat li.no::before { content: "—"; color: var(--ink-disabled); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.plan-target { border-top: var(--border-hairline) solid var(--line); margin: 0 var(--space-4); padding: var(--space-3) 0; font-size: 11.5px; }
.plan-target summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 900; color: var(--ink); }
.plan-target summary::-webkit-details-marker { display: none; }
.plan-target summary::after { content: "＋"; color: var(--rose-ink); font-weight: 900; }
.plan-target[open] summary::after { content: "－"; }
.plan-target p { margin-top: var(--space-2); line-height: 1.7; color: var(--ink-body); }
.plan-target .plan-note { color: var(--ink-sub); }
.plan-other { grid-column: 1 / -1; }
.plan-other .plan-main { flex-direction: row; align-items: center; padding: var(--space-4) var(--space-5); }
.plan-notes { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin-top: var(--space-3); font-size: 11.5px; color: var(--ink-body); }
.plan-notes span::before { content: "※ "; color: var(--note); }

.store { background: var(--surface-sunken); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-1); margin-bottom: var(--space-4); }
.store .addr { background: var(--surface); }
.opt-head { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-hairline) dashed var(--line); }
.store-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.store-ttl { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 900; color: var(--ink); }

.agree { display: grid; gap: var(--space-2); }
.agree label { display: flex; gap: var(--space-3); align-items: flex-start; padding: 14px var(--space-4); font-size: 13px; line-height: 1.7; }
.agree input { margin-top: 3px; }
.agree a { color: var(--rose-ink); text-underline-offset: 3px; }
.note { font-size: 12px; line-height: 1.8; color: var(--ink-body); margin: var(--space-5) 0 var(--space-1); background: var(--note-tint); border: var(--border-hairline) solid var(--note-line); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.auto-note { margin-top: var(--space-2); font-size: 12px; line-height: 1.7; color: var(--ink-body); background: var(--note-tint); border: var(--border-hairline) solid var(--note-line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.auto-note::before { content: "※ "; color: var(--note); }
.ts-widget { margin-top: var(--space-4); min-height: 65px; }
.note::before { content: "※ "; color: var(--note); }

/* 確認画面 */
.sum { border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden; }
.sum-hd { display: flex; justify-content: space-between; align-items: center; background: var(--section-ground); padding: 10px var(--space-5); }
.sum h4 { font-size: 14px; font-weight: 900; color: var(--ink); }
.sum dl { display: grid; grid-template-columns: 180px 1fr; padding: var(--space-1) var(--space-5) var(--space-3); font-size: 13px; }
.sum dt { color: var(--ink-sub); font-weight: 700; padding: 7px 0; border-bottom: var(--border-hairline) solid var(--line); }
.sum dd { color: var(--ink); padding: 7px 0; border-bottom: var(--border-hairline) solid var(--line); white-space: pre-wrap; word-break: break-all; }
.sum dt:nth-last-child(2), .sum dd:last-child { border-bottom: 0; }

/* ボタン */
.nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.nav .primary { margin-left: auto; }
.btn { font: inherit; cursor: pointer; border-radius: var(--radius-pill); border: var(--border-hairline) solid transparent; letter-spacing: .06em; }
.btn.primary { background: var(--rose); color: var(--on-rose); font-size: 17px; font-weight: 900; padding: 14px 40px; box-shadow: var(--shadow-rose); }
.btn.primary:hover { filter: brightness(.96); }
.btn.primary:focus-visible { outline: none; box-shadow: var(--shadow-rose), var(--halo-rose); }
.btn.primary:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: var(--surface); color: var(--ink-body); border-color: var(--line); font-size: 14px; font-weight: 700; padding: 12px 28px; }
.btn.ghost:hover { border-color: var(--connector); }
.link { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--rose-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.alert { background: var(--surface); border: var(--border-strong) solid var(--warning-red); color: var(--warning-red); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); font-size: 13px; margin-bottom: var(--space-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* LINE問い合わせ（全ページ右下に固定） */
.line-fab { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 30; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 12px 20px 12px 16px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-ink);
  font-size: 13px; font-weight: 900; letter-spacing: .04em; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.line-fab .ic { width: 20px; height: 20px; }
.line-fab:hover { transform: translateY(-2px); }
.line-fab:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
@media print { .line-fab { display: none; } }

/* 完了・無効ページ */
.msg { max-width: 560px; margin: 88px auto; text-align: center; background: var(--surface); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-8); }
.msg .big { width: 68px; height: 68px; border-radius: var(--radius-lg); margin: 0 auto var(--space-5); display: flex; align-items: center; justify-content: center; background: var(--rose); color: var(--on-rose); box-shadow: var(--shadow-rose); }
.msg .big.neutral { background: var(--section-ground); color: var(--ink-body); box-shadow: none; }
.msg .big .ic { width: 30px; height: 30px; }
.msg h1 { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: var(--space-3); }
.msg p { color: var(--ink-body); font-size: 13px; line-height: 1.9; }

@media (max-width: 680px) {
  .line-fab { right: var(--space-4); bottom: var(--space-4); padding: 11px 16px 11px 13px; font-size: 12px; }
  .plans { grid-template-columns: 1fr; }
  .top { padding: var(--space-3) var(--space-4); }
  .brand img { width: 72px; }
  .brand-label { display: none; }
  .wrap { padding: var(--space-6) var(--space-4) 128px; } /* 右下のLINEボタンと「次へ」が重ならない余白 */
  .intro { padding-left: 0; padding-top: var(--space-4); }
  .intro::before { top: 0; }
  .intro h1 { font-size: 24px; }
  .card { padding: var(--space-5) var(--space-4) var(--space-3); }
  .grid2, .grid3, .grid-addr { grid-template-columns: 1fr; }
  .half { max-width: none; }
  .steps { gap: 2px; }
  .steps li { font-size: 9.5px; }
  .steps .tile { width: 36px; height: 36px; border-radius: 10px; }
  .steps .ic { width: 18px; height: 18px; }
  .steps li::after { top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px); }
  .sum dl { grid-template-columns: 1fr; }
  .sum dt { border-bottom: 0; padding-bottom: 0; }
  .btn.primary { padding: 14px 24px; }
}