/* =====================================================
   Atelier UI — Reimagined Layout (Sidebar + Hero Layer)
   ===================================================== */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --ink:#e5e7eb;
  --ink-2:#cbd5e1;
  --muted:#94a3b8;
  --brand:#7c3aed;
  --brand-2:#2563eb;
  --accent:#22d3ee;
  --border:#1f2937;
  --card:#0b1220;
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 20px 70px rgba(2,6,23,.3);
  --shadow-sm:0 8px 30px rgba(2,6,23,.22);
  --w:1200px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc;
    --panel:#ffffff;
    --ink:#0f172a;
    --ink-2:#334155;
    --muted:#64748b;
    --brand:#7c3aed;
    --brand-2:#2563eb;
    --accent:#06b6d4;
    --border:#e2e8f0;
    --card:#ffffff;
    --shadow:0 16px 60px rgba(2,6,23,.08);
    --shadow-sm:0 8px 24px rgba(2,6,23,.06);
  }
}
html[data-theme="dark"]{
  --bg:#0b1220; --panel:#0f172a; --ink:#e5e7eb; --ink-2:#cbd5e1; --muted:#94a3b8;
  --accent:#22d3ee; --border:#1f2937; --card:#0b1220;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP","Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-color: color-mix(in srgb, var(--accent) 60%, transparent)}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:10px;top:10px;width:auto;height:auto;background:var(--panel);padding:8px 12px;border-radius:10px}

/* ===== Shell ===== */
.shell{
  display:grid; grid-template-columns: 300px 1fr; gap:0; min-height:100dvh;
}
@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
}

/* ===== Sidebar / Topbar ===== */
.sidebar{
  position:sticky; top:0; align-self:start;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, var(--panel)) 0%, var(--panel) 55%);
  border-right:1px solid var(--border);
  padding:20px; min-height:100dvh;
  display:flex; flex-direction:column; gap:18px;
}
@media (max-width: 980px){
  .sidebar{position:static; min-height:auto; border-right:none; border-bottom:1px solid var(--border)}
}

.brand{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none}
.brand img{filter:drop-shadow(0 6px 16px rgba(37,99,235,.45))}
.brand-text small{color:var(--muted)}

.nav-toggle{
  display:none; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--ink); cursor:pointer;
}
.nav ul, .nav li{margin:0; padding:0; list-style:none}
.nav ul{display:grid; gap:6px}
.nav a{display:block; padding:10px 12px; border-radius:12px; color:var(--ink)}
.nav a:hover{background: color-mix(in srgb, var(--brand) 10%, var(--panel));}
.nav a.active{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:white}

.meta{margin-top:auto; display:grid; gap:10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--panel); color:var(--ink); box-shadow: var(--shadow-sm)}
.tel{justify-content:center; font-weight:700}
@media (max-width: 980px){
  .nav-toggle{display:inline-flex}
  .nav ul{display:none}
  .nav[aria-expanded="true"] ul{display:grid}
}

/* ===== Main ===== */
.main{max-width:var(--w); margin-inline:auto; width:100%}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background: radial-gradient(800px 380px at 90% 10%, color-mix(in srgb, var(--brand-2) 30%, transparent) 0%, transparent 65%),
              radial-gradient(900px 460px at 10% -10%, color-mix(in srgb, var(--brand) 24%, transparent) 0%, transparent 70%);
}
.hero-layer{
  position:absolute; inset:-20% -10% -20% -10%; pointer-events:none;
  background:
    conic-gradient(from 200deg at 70% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 30%),
    radial-gradient(600px 400px at 85% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  filter: blur(40px) saturate(120%); opacity:.7;
}
.hero-wrap{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:24px; padding:48px 28px}
.hero-text h1{font-size:clamp(28px,3.4vw,46px); line-height:1.2; margin:0 0 10px}
.accent{background:linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--ink-2)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:12px 0; list-style:none}
.hero-badges li{padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--ink-2)}

.hero-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid2 li{background:var(--card); border:1px dashed var(--border); border-radius:12px; padding:10px; color:var(--ink-2)}
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
}

/* ===== Sections ===== */
.sec{padding:48px 28px}
.sec.alt{background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 65%, var(--bg)) 0%, var(--bg) 100%); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.sec-hd h2{margin:0 0 4px}
.sec-hd p{margin:0; color:var(--muted)}

/* Cards */
.cards{display:grid; gap:16px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.label{display:inline-block; margin-top:8px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--muted)}
.quote blockquote{margin:0; color:var(--ink-2)}
@media (max-width: 980px){ .cards.three{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .cards.three{grid-template-columns:1fr} }

/* Split */
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:16px}
.map iframe{width:100%; height:200px; border:0; border-radius:12px}
.bullets{padding-left:18px}
@media (max-width: 980px){ .split{grid-template-columns:1fr} }

/* Timeline */
.timeline{list-style:none; padding-left:0; margin:0; position:relative}
.timeline::before{content:""; position:absolute; left:20px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand), var(--brand-2)); border-radius:2px}
.timeline li{display:grid; grid-template-columns:60px 1fr; gap:10px; align-items:start; padding:12px 0}
.num{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; font-weight:800; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow-sm)}

/* FAQ */
details.faq{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; margin-top:10px}
details.faq summary{cursor:pointer; font-weight:700}

/* Contact */
.contact form .fi{display:grid; gap:6px}
input, select, textarea{font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
textarea{min-height:140px}
.agree{display:flex; gap:8px; align-items:center; margin-top:6px; color:var(--muted)}
.actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--ink); text-decoration:none; font-weight:700; box-shadow:var(--shadow-sm); cursor:pointer}
.btn.primary{color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--brand), var(--brand-2))}
.btn.ghost{background:transparent}
.btn:hover{filter:brightness(1.05)}

/* Footer */
.footer{border-top:1px solid var(--border); background:linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 80%, var(--bg)))}
.foot-grid{display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:16px; padding:28px}
.foot-brand{display:flex; align-items:center; gap:10px}
.foot-links, .foot-legal{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.copy{text-align:center; color:var(--muted); padding:12px}
@media (max-width: 980px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .foot-grid{grid-template-columns:1fr} }

/* FAB */
.fab{position:fixed; right:16px; bottom:16px; display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%;
  border:1px solid var(--border); background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; box-shadow:var(--shadow); cursor:pointer}

/* Focus */
:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset:3px; border-radius:10px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }