@import url("/assets/shared/css/forms.css");
:root {
  --bg:#fff; --bg2:#f7f7f8; --surface:#fff; --ink:#1f1f1f; --ink2:#5f6368; --line:#dadce0;
  --primary:#0b57d0; --primary-soft:#d3e3fd; --on-primary:#fff; --error:#b3261e; --success:#146c2e;
  --shadow:0 4px 20px #00000016; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --r-s:8px; --r-m:12px; --r-l:16px; --r-pill:999px;
  color-scheme:light dark; font-family:Roboto,"Noto Sans JP",system-ui,sans-serif; font-synthesis:none;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --bg:#131314; --bg2:#1e1f20; --surface:#282a2c; --ink:#e3e3e3; --ink2:#c4c7c5; --line:#444746; --primary:#a8c7fa; --primary-soft:#0842a0; --on-primary:#062e6f; --error:#f2b8b5; --success:#6dd58c; --shadow:0 4px 20px #00000050; }
}
:root[data-theme="dark"] { --bg:#131314; --bg2:#1e1f20; --surface:#282a2c; --ink:#e3e3e3; --ink2:#c4c7c5; --line:#444746; --primary:#a8c7fa; --primary-soft:#0842a0; --on-primary:#062e6f; --error:#f2b8b5; --success:#6dd58c; --shadow:0 4px 20px #00000050; color-scheme:dark; }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.75; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--primary); text-underline-offset:4px; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.38; }
button, a { touch-action:manipulation; }
svg,img { flex-shrink:0; max-width:100%; }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; }
h1,.display { font-size:28px; line-height:1.3; font-weight:500; letter-spacing:-.035em; }
h2 { font-size:20px; line-height:1.45; font-weight:500; letter-spacing:-.02em; }
h3 { font-size:16px; font-weight:500; }
p { max-width:68ch; }
small,.ui { font-size:13px; line-height:1.4; font-weight:500; font-variant-numeric:tabular-nums; }
.muted { color:var(--ink2); }
.eyebrow { font-size:11px; line-height:1.5; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink2); }
.brand-name { text-transform:none; }
.skip-link { position:fixed; top:8px; left:16px; padding:8px 16px; z-index:100; background:var(--bg); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.appbar { height:64px; padding:0 32px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--bg); border-bottom:0; }
.appbar.is-scrolled { box-shadow:var(--shadow); }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:17px; font-weight:500; white-space:nowrap; min-height:44px; }
.appbar-actions,.nav { display:flex; align-items:center; gap:8px; }
.nav a { min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:var(--r-pill); color:var(--ink2); text-decoration:none; font-size:13px; font-weight:500; }
.nav a:hover,.nav a[aria-current="page"] { background:var(--bg2); color:var(--ink); }
.nav-menu-btn { display:none!important; }
.theme-toggle { gap:8px; margin-left:8px; }
.theme-toggle [data-theme-label] { min-width:5em; }
.btn-filled,.btn-tonal,.btn-text { min-height:44px; padding:10px 22px; display:inline-flex; justify-content:center; align-items:center; gap:8px; border:0; border-radius:var(--r-pill); font-size:13px; font-weight:500; line-height:1.5; text-decoration:none; transition:filter .15s,background .15s; }
.btn-filled { background:var(--primary); color:var(--on-primary); }
.btn-tonal { background:var(--primary-soft); color:var(--ink); }
.btn-text { background:transparent; color:var(--primary); }
.btn-filled:hover:not(:disabled),.btn-tonal:hover:not(:disabled) { filter:brightness(.95); }
.btn-text:hover:not(:disabled) { background:var(--bg2); }
.page { flex:1; width:100%; padding:48px 40px 64px; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:40px; }
.page-header h1 { margin-top:12px; }
.page-header p { margin-top:16px; color:var(--ink2); }
.workspace { width:100%; display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; }
.side-note { padding-top:4px; }
.side-note p { margin-top:12px; color:var(--ink2); font-size:13px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.card { border:1px solid var(--line); border-radius:var(--r-m); padding:24px; background:var(--surface); min-width:0; }
.card p { color:var(--ink2); }
.card h2+p,.card h3+p { margin-top:8px; }
.service-card { padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); overflow:hidden; }
.service-copy { padding:36px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.service-copy h2 { font-size:24px; }
.service-preview { background:var(--bg2); border-left:1px solid var(--line); padding:36px; display:flex; align-items:center; justify-content:center; }
.thumbnail-outline { width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:8px; position:relative; padding:24px; display:flex; flex-direction:column; justify-content:space-between; background:var(--bg); }
.thumbnail-outline strong { font-size:clamp(18px,2vw,32px); font-weight:700; letter-spacing:-.03em; line-height:1.5; }
.thumbnail-meta { display:flex; align-items:center; justify-content:space-between; color:var(--ink2); font-size:10px; letter-spacing:.12em; }
.process-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.process-list li { padding-top:20px; border-top:1px solid var(--line); }
.process-list .eyebrow { display:block; margin-bottom:12px; }
.process-list p { font-size:13px; color:var(--ink2); margin-top:6px; }
.section-space { margin-top:40px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label,.field-label { font-size:13px; font-weight:500; }
.input,.textarea,.select { width:100%; min-height:44px; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--ink); font-size:15px; }
.textarea { resize:vertical; min-height:120px; }

.input[aria-invalid="true"] { border-color:var(--error); }
.field-error { color:var(--error); font-size:13px; }
.segment { display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; width:fit-content; max-width:100%; }
.segment button { min-height:44px; background:transparent; color:var(--ink); padding:8px 20px; font-size:13px; border:0; border-right:1px solid var(--line); }
.segment button:last-child { border-right:0; }
.segment button[aria-pressed="true"] { background:var(--primary-soft); }
.segment button:focus-visible { outline-offset:-4px; }
.dropzone { border:1px dashed var(--line); border-radius:var(--r-m); background:var(--bg2); padding:28px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.dropzone input[type="file"] { width:100%; min-width:0; max-width:100%; }
.chip { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:transparent; color:var(--ink); font-size:13px; }
.chip[aria-pressed="true"] { background:var(--primary-soft); border-color:transparent; }
.chip[aria-pressed="true"]::before { content:'✓'; margin-right:8px; }
.badge { display:inline-flex; align-items:center; font-size:11px; color:var(--ink2); border:1px solid var(--line); padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.toast-region { position:fixed; bottom:24px; left:24px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:calc(100% - 48px); }
.toast { display:flex; align-items:center; gap:16px; border-radius:var(--r-s); padding:10px 12px 10px 20px; box-shadow:var(--shadow); background:var(--ink); color:var(--bg); font-size:13px; }
.toast-action,.toast-close { border:0; min-height:44px; min-width:44px; background:transparent; color:inherit; font-size:13px; }
.toast-action { text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.toast-close { font-size:22px; }
dialog.nb-dialog { width:calc(100% - 32px); max-width:480px; padding:28px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
dialog.nb-dialog::backdrop { background:#0006; }
dialog.nb-dialog p { margin:16px 0 24px; color:var(--ink2); }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }
.footer { width:100%; padding:24px 40px; border-top:1px solid var(--line); color:var(--ink2); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; }
.component-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.component-grid>section { display:flex; flex-direction:column; gap:20px; }
.swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.swatch { border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:12px; }
.swatch-color { height:48px; border-bottom:1px solid var(--line); }
.swatch-label { padding:8px; display:flex; flex-direction:column; }
.full-span { grid-column:1/-1; }
@media(max-width:900px) { .workspace { grid-template-columns:1fr; gap:24px; } .side-note p { margin-top:8px; } .service-copy,.service-preview { padding:24px; } }
@media(max-width:640px) {
  .appbar { height:56px; padding:0 16px; gap:8px; } .brand { gap:8px; font-size:15px; } .brand svg { width:24px; }
  .theme-toggle { padding:10px; margin-left:0; } .theme-toggle [data-theme-label] { display:none; } .appbar-actions { gap:0; }
  .nav-menu-btn { display:inline-flex!important; padding:10px; } .nav { display:none; position:absolute; right:16px; top:60px; min-width:200px; padding:8px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); box-shadow:var(--shadow); } .nav.is-open { display:flex; flex-direction:column; align-items:stretch; }
  .page { padding:32px 20px 48px; } .page-header { flex-direction:column; gap:16px; margin-bottom:32px; } h1,.display { font-size:24px; }
  .service-card { grid-template-columns:1fr; } .service-preview { border-left:0; border-top:1px solid var(--line); } .service-copy h2 { font-size:22px; }
  .process-list,.component-grid { grid-template-columns:1fr; } .card { padding:20px; } .service-card { padding:0; } .footer { padding:20px; }
  .toast-region { left:16px; right:16px; bottom:16px; max-width:none; } .toast { gap:8px; padding-left:16px; } .toast span { min-width:0; overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }