:root { color-scheme: light; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --paper:#f8fafc; --card:#fff; --accent:#e87932; --accent-dark:#c45a1c; --danger:#b42318; --success:#087443; font-family: -apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); } a { color:inherit; text-decoration:none; }
.site-header { align-items:center; background:rgba(248,250,252,.94); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:16px max(20px,calc((100% - 1100px)/2)); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }
.brand { font-size:1.1rem; font-weight:800; letter-spacing:.12em; } .brand span { color:var(--accent); } .nav { display:flex; gap:22px; font-size:.9rem; } .nav a:hover { color:var(--accent-dark); } .icon-button { display:none; background:none; border:0; font-size:1.4rem; }
main { margin:auto; max-width:1100px; padding:22px 20px 50px; } .panel { background:var(--card); border:1px solid var(--line); border-radius:22px; margin:20px 0; padding:clamp(22px,5vw,48px); box-shadow:0 12px 30px rgba(15,23,42,.04); }
.hero { align-items:center; background:linear-gradient(135deg,#fff7ed,#fff); display:grid; gap:35px; grid-template-columns:1.1fr .9fr; min-height:420px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(2.1rem,6vw,4.5rem); line-height:1.15; letter-spacing:-.04em; margin-bottom:18px; } h2 { font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:0; } h3 { margin-bottom:7px; } .eyebrow { color:var(--accent-dark); font-size:.72rem; font-weight:800; letter-spacing:.16em; margin-bottom:10px; } .muted { color:var(--muted); line-height:1.7; }
.vehicle-placeholder { align-items:center; background:linear-gradient(145deg,#334155,#94a3b8); border-radius:20px; color:white; display:flex; flex-direction:column; justify-content:center; min-height:280px; text-align:center; } .vehicle-placeholder span { font-size:1.7rem; font-weight:800; letter-spacing:.08em; } .vehicle-placeholder small { margin-top:8px; opacity:.7; }
.section-heading { align-items:center; display:flex; justify-content:space-between; margin-bottom:24px; } .status-dot { color:var(--success); font-size:.8rem; } .form-grid { display:grid; gap:16px; grid-template-columns:1fr 1fr; } .form-grid.compact { grid-template-columns:1fr 1fr; } label { color:var(--muted); display:grid; font-size:.82rem; gap:8px; } input { background:#fff; border:1px solid #cbd5e1; border-radius:11px; color:var(--ink); font:inherit; padding:13px 14px; width:100%; } input:focus { border-color:var(--accent); outline:3px solid #fed7aa; }
.button { border:0; border-radius:999px; cursor:pointer; display:inline-flex; font:inherit; font-weight:700; justify-content:center; padding:13px 20px; transition:transform .15s,background .15s; } .button:hover { transform:translateY(-1px); } .primary { background:var(--accent); color:white; } .primary:hover { background:var(--accent-dark); } .secondary { background:#eef2f7; color:var(--ink); } .danger { background:#fee4e2; color:var(--danger); } .full { grid-column:1/-1; } .message { min-height:26px; margin-top:16px; } .message.error { color:var(--danger); } .message.success { color:var(--success); } .message.warning { color:#9a6700; }
.card-list { display:grid; gap:12px; margin-top:18px; } .vehicle-card,.status-card,.notice { background:#f8fafc; border:1px solid var(--line); border-radius:15px; padding:18px; } .vehicle-card { align-items:center; display:flex; justify-content:space-between; } .tabs { border-bottom:1px solid var(--line); display:flex; gap:18px; margin-bottom:20px; } .tab { background:none; border:0; border-bottom:3px solid transparent; color:var(--muted); cursor:pointer; font:inherit; padding:10px 3px; } .tab.active { border-color:var(--accent); color:var(--ink); font-weight:700; } .turnstile-box { align-items:center; border:1px dashed #cbd5e1; border-radius:11px; color:var(--muted); display:flex; grid-column:1/-1; min-height:58px; padding:12px; }
.notice-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin-top:14px; } .notice strong,.notice span { display:block; } .notice span { color:var(--muted); font-size:.88rem; margin-top:8px; } .action-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .hidden { display:none !important; } footer { color:var(--muted); display:flex; font-size:.8rem; justify-content:space-between; margin:auto; max-width:1100px; padding:0 20px 32px; }
@media (max-width:720px) { .site-header { padding:13px 18px; } .icon-button { display:block; } .nav { background:white; border:1px solid var(--line); border-radius:14px; display:none; flex-direction:column; gap:0; padding:8px; position:absolute; right:18px; top:58px; width:180px; } .nav.open { display:flex; } .nav a { padding:12px; } .hero { grid-template-columns:1fr; min-height:0; } .vehicle-placeholder { min-height:190px; } .form-grid,.form-grid.compact,.notice-grid { grid-template-columns:1fr; } .panel { border-radius:17px; padding:24px 19px; } .section-heading { align-items:flex-start; gap:10px; } .vehicle-card { align-items:flex-start; flex-direction:column; gap:15px; } .vehicle-card .button { width:100%; } footer { flex-direction:column; gap:8px; } }