:root { --ink:#171a33; --ink-2:#3b3f5c; --muted:#616a7d; --paper:#faf7f0; --paper-2:#f2ecdf; --panel:#fff; --line:#e6e0d3; --indigo:#312e81; --navy:#1e1b4b; --vermilion:#f43f5e; --amber:#fbbf24; --ok:#15803d; --warn:#b45309; --err:#b91c1c; --radius:16px; }
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; line-height:1.7; font-size:15px }
a { color:var(--indigo) }
.wrap { width:min(980px, 100% - 32px); margin:0 auto }
header.top { background:var(--navy); color:#fff; display:flex; align-items:center; padding:10px 20px; gap:16px; position:sticky; top:0; z-index:5 }
header.top .brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:18px; letter-spacing:.02em }
header.top .brand img { width:30px; height:30px; border-radius:8px }
header.top .brand b { color:var(--amber); font-weight:800 }
header.top nav { margin-left:auto; display:flex; gap:14px; align-items:center; font-size:14px }
header.top nav a, header.top nav button { color:#fff; opacity:.9; background:none; border:0; font:inherit; cursor:pointer; text-decoration:none }
header.top nav .who { opacity:.7 }
main { padding:28px 0 48px; min-height:70vh }
h1 { font-size:24px; margin:0 0 6px } h2 { font-size:18px; margin:0 0 12px }
.muted { color:var(--muted) } .small { font-size:13px }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:0 0 18px; box-shadow:0 2px 0 rgba(23,26,51,.04) }
.narrow { max-width:440px; margin:24px auto }
label { display:block; font-size:13px; font-weight:700; margin:12px 0 4px; color:var(--ink-2) }
input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fff }
input:focus { outline:2px solid #c7d2fe; border-color:var(--indigo) }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:999px; font-weight:700; border:2px solid transparent; cursor:pointer; font:inherit; font-weight:700; text-decoration:none }
.btn.primary { background:var(--vermilion); color:#fff } .btn.primary:hover { filter:brightness(1.05) }
.btn.indigo { background:var(--indigo); color:#fff }
.btn.ghost { background:#fff; border-color:var(--line); color:var(--ink) }
.btn.danger { background:#fff; border-color:#fecaca; color:var(--err) }
.btn[disabled] { opacity:.5; cursor:default }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.err { color:var(--err); font-size:14px; margin-top:10px; min-height:1em }
.ok { color:var(--ok) }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; font-size:13px; font-weight:700; background:var(--paper-2); color:var(--ink-2) }
.chip.ready { background:#dcfce7; color:var(--ok) } .chip.error { background:#fee2e2; color:var(--err) } .chip.busy { background:#fef3c7; color:var(--warn) } .chip.stopped { background:#e5e7eb; color:#374151 }
.chip .dot { width:8px; height:8px; border-radius:50%; background:currentColor }
.chip.busy .dot { animation:pulse 1s infinite }
@keyframes pulse { 50% { opacity:.3 } }
.hero { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center }
@media (max-width:640px){ .hero { grid-template-columns:1fr } }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px } @media (max-width:720px){ .stats { grid-template-columns:repeat(2,1fr) } }
.stat { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px 14px } .stat .lbl { font-size:12px; color:var(--muted) } .stat .v { font-size:20px; font-weight:800; color:var(--indigo) }
.bar { height:8px; background:var(--paper-2); border-radius:99px; overflow:hidden; margin-top:6px } .bar > i { display:block; height:100%; background:var(--indigo) }
.notice { margin:0 0 18px; background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; border-radius:12px; padding:12px 14px; font-size:13px }
.step { font-size:14px; color:var(--ink-2); margin-top:8px }
.spinner { width:18px; height:18px; border:3px solid #c7d2fe; border-top-color:var(--indigo); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; vertical-align:middle }
@keyframes spin { to { transform:rotate(360deg) } }
table { width:100%; border-collapse:collapse; font-size:13px } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top } th { color:var(--muted); font-weight:700 }
td .btn { padding:4px 10px; font-size:12px }
.code { font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--paper-2); padding:2px 8px; border-radius:6px }
details summary { cursor:pointer; font-weight:700; color:var(--ink-2) }
.foot { color:var(--muted); font-size:12px; padding:20px 0 30px; border-top:1px solid var(--line) }
.tabs { display:flex; gap:6px; margin-bottom:14px } .tabs a { padding:6px 14px; border-radius:999px; text-decoration:none; color:var(--ink-2); background:var(--paper-2); font-size:14px } .tabs a.on { background:var(--indigo); color:#fff }
/* 0.2: プラン・相談・パートナー・管理 */
header.top nav a.on { opacity:1; border-bottom:2px solid var(--amber) }
.badge { display:inline-block; min-width:18px; padding:0 6px; border-radius:99px; background:var(--vermilion); color:#fff; font-size:11px; font-weight:800; text-align:center; line-height:18px }
select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fff }
td select, td input { width:auto; padding:5px 8px; font-size:13px }
textarea { resize:vertical }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px } .grid2 > .card { margin:0 0 18px } @media (max-width:720px){ .grid2 { grid-template-columns:1fr } }
.big { font-size:30px; font-weight:800; color:var(--indigo); line-height:1.2 } .big small { font-size:14px; font-weight:700; color:var(--muted) }
.bar.warn > i { background:var(--warn) } .bar.err > i { background:var(--err) }
.warn-text { color:var(--warn); font-size:14px; margin:8px 0 0 }
.notice.warn { background:#fffbeb; border-color:#fde68a; color:#92400e } .notice.ok-note { background:#ecfdf5; border-color:#a7f3d0; color:#065f46 }
.sep { border:0; border-top:1px solid var(--line); margin:18px 0 }
.plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin:14px 0 } .plan { background:var(--panel); border:2px solid var(--line); border-radius:var(--radius); padding:22px; position:relative }
.plan.on { border-color:var(--indigo) } .plan .tag { position:absolute; top:-12px; left:18px; background:var(--indigo); color:#fff; font-size:12px; font-weight:700; padding:2px 10px; border-radius:99px }
.plan h3 { margin:0; font-size:20px } .plan .price { font-size:30px; font-weight:800; color:var(--indigo); margin:4px 0 8px } .plan .price small { font-size:14px; color:var(--muted) }
.plan ul { list-style:none; padding:0; margin:0 0 14px } .plan li { padding:6px 0; border-top:1px dashed var(--line); font-size:14px } .plan li b { display:inline-block; width:7em; color:var(--muted); font-weight:500; font-size:13px }
label.check { display:flex; gap:8px; align-items:flex-start; font-weight:500; color:var(--ink); font-size:14px } label.check input { width:auto; margin-top:4px }
.consent { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:10px 12px; margin-top:8px } .consent label.check { display:inline-flex; margin:4px 12px 0 0 }
.tabs { flex-wrap:wrap }
@media (max-width:640px){ table { display:block; overflow-x:auto } header.top { flex-wrap:wrap } header.top nav { flex-wrap:wrap; gap:10px } }
.row > select, .row > input { width:auto; flex:1 1 150px; max-width:320px }
.minis { display:grid; gap:8px; margin-top:12px } .mini { font-size:13px } .mini span { color:var(--muted) } .mini b { float:right; color:var(--ink-2) } .mini .bar { clear:both; height:6px; margin-top:4px }