:root{
    --bg:#ffffff;
    --card:#f9f9fb;
    --text:#111;
    --muted:#666;
    --line:#e9e9ef;
    --accent:#111;
    --focus:#0a84ff;
    --radius:14px;
    --shadow:0 10px 30px rgba(0,0,0,.06);
}
  
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    line-height:1.7;
}
  
/* Header */
.faq-header{
    position:relative;
    background:linear-gradient(180deg,#fff, #f7f8fb);
    border-bottom:1px solid var(--line);
}
.faq-header__inner{
    max-width:1000px;
    margin:0 auto;
    padding:48px 20px 28px;
}
.faq-title{
    margin:0 0 8px;
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing:.02em;
}
.faq-sub{margin:0;color:var(--muted)}
.faq-updated{margin:6px 0 0;color:var(--muted);font-size:.9rem}
  
/* Main */
.faq-main{
    max-width:1000px;
    margin:0 auto;
    padding:28px 20px 80px;
}
  
/* Category pills */
.faq-nav{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom:18px;
}
.pill{
    display:inline-block;
    padding:10px 14px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.pill:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); background:#fff }
  
/* Tip */
.faq-tip{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:12px 14px;
    margin-bottom:24px;
    color:var(--muted);
}
  
/* Sections */
.faq-section{
    margin:28px 0 40px;
    padding-top:20px;
    border-top:1px solid var(--line);
}
.faq-heading{
    margin:0 0 14px;
    font-size: clamp(20px, 3.2vw, 26px);
}
  
/* Accordion */
.faq-item{
    margin:10px 0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    box-shadow: var(--shadow);
    overflow:hidden;
}
  
.faq-item > summary{
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:16px 54px 16px 16px;
    font-weight:600;
    transition:background .2s ease;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary:focus{ outline:none; }
.faq-item > summary:focus-visible{ box-shadow:0 0 0 3px rgba(10,132,255,.25); }
  
.faq-item > summary::after{
    content:"＋";
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-weight:700;
    color:#888;
}
.faq-item[open] > summary{ background:#fafbff; }
.faq-item[open] > summary::after{ content:"－"; color:#444; }
  
.answer{
    padding:14px 16px 18px;
    border-top:1px solid var(--line);
    background:#fff;
}
  
/* Helpers */
.muted{ color:var(--muted); }
.strong{ font-weight:700; }
.placeholder{
    background:linear-gradient(90deg,#fff 0,#f2f4f8 50%,#fff 100%);
    border-radius:6px; padding:0 2px;
}
  
  /* CTA */
.faq-cta{
    margin-top:32px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,#fff,#f8fafc);
    text-align:center;
    box-shadow: var(--shadow);
}
.faq-cta h3{ margin:0 0 6px; font-size: clamp(18px, 3vw, 22px); }
.faq-cta p{ margin:0 0 14px; color:var(--muted); }
.btn{
    display:inline-block;
    padding:12px 18px;
    background:var(--accent);
    color:#fff; text-decoration:none;
    border-radius:999px;
    transition:opacity .2s ease, transform .06s ease;
}
  .btn:hover{ opacity:.9; transform:translateY(-1px); }
  
  /* Responsive */
@media (max-width: 640px){
    .faq-header__inner{ padding:36px 16px 20px; }
    .faq-main{ padding:20px 16px 60px; }
    .faq-item > summary{ padding-right:48px; }
}