:root { --ink:#171717; --muted:#66615b; --paper:#f4f1eb; --card:#fff; --line:#ded8ce; --accent:#8a351f; --dark:#201914; font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); line-height:1.8; }
a { color:var(--accent); text-underline-offset:3px; }
.shell { width:min(900px,calc(100% - 32px)); margin-inline:auto; }
.hero { padding:70px 0 74px; background:linear-gradient(125deg,#181512,#513324); color:#fff; text-align:center; }
.eyebrow,.section-label { margin:0; color:var(--accent); font-size:.76rem; font-weight:900; letter-spacing:.18em; }
.hero .eyebrow { color:#d9bd9d; }
.hero h1 { margin:.1em 0; font-size:clamp(2.65rem,10vw,5.3rem); line-height:1.2; }
.lead { margin:14px auto 27px; color:#f4ece4; font-size:clamp(1rem,3vw,1.2rem); }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:11px 24px; border-radius:999px; font-weight:900; text-decoration:none; }
.button-light { background:#fff; color:var(--dark); }
.button-outline { border:1px solid rgba(255,255,255,.7); color:#fff; }
.button-dark { background:var(--dark); color:#fff; }
.category-nav { position:sticky; z-index:3; top:0; display:flex; justify-content:center; gap:8px; margin:24px 0 4px; padding:10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 6px 24px rgba(0,0,0,.06); }
.category-nav a { padding:6px 13px; border-radius:999px; color:var(--ink); font-size:.82rem; font-weight:800; text-decoration:none; }
.category-nav a:hover { background:#eee7df; }
.faq-section { padding:68px 0 0; scroll-margin-top:88px; }
h2 { margin:.15em 0 .9em; font-size:clamp(1.75rem,6vw,2.55rem); line-height:1.35; }
.faq-list { display:grid; gap:10px; }
.faq-list details { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.faq-list summary { position:relative; padding:20px 56px 20px 22px; font-weight:900; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"＋"; position:absolute; top:50%; right:22px; transform:translateY(-50%); color:var(--accent); font-size:1.4rem; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details[open] summary { border-bottom:1px solid var(--line); }
.faq-list p { margin:0; padding:18px 22px 22px; color:var(--muted); }
.section-intro { margin:-12px 0 24px; color:var(--muted); }
.line-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.line-guide-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.line-guide-card h3,.line-guide-note h3 { margin:.1em 0 .45em; font-size:1.18rem; line-height:1.45; }
.line-guide-card p { margin:0; color:var(--muted); }
.line-guide-number { color:var(--accent)!important; font-size:.78rem; font-weight:900; letter-spacing:.14em; }
.line-guide-note { margin-top:14px; padding:22px 24px; border-left:5px solid var(--accent); border-radius:12px; background:#e8ded2; }
.line-guide-note p { margin:0; color:var(--muted); }
.cta { margin:72px 0; padding:45px 28px; border-radius:22px; background:#e8ded2; text-align:center; }
.cta h2 { margin-bottom:.25em; }
.cta p:not(.section-label) { margin:0 auto 23px; color:var(--muted); }
footer { padding:25px 0; background:#222; color:#ddd; font-size:.8rem; text-align:center; }
@media (max-width:600px) {
  .shell { width:min(100% - 22px,900px); }
  .hero { padding:52px 0 57px; }
  .category-nav { justify-content:flex-start; overflow-x:auto; border-radius:14px; }
  .category-nav a { flex:0 0 auto; }
  .faq-section { padding-top:52px; }
  .faq-list summary { padding:17px 48px 17px 17px; font-size:.96rem; }
  .faq-list summary::after { right:17px; }
  .faq-list p { padding:16px 17px 19px; font-size:.9rem; }
  .line-guide-grid { grid-template-columns:1fr; }
  .line-guide-card { padding:20px 18px; }
  .line-guide-note { padding:20px 18px; }
  .cta { margin:54px 0; padding:36px 18px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }