:root{
  --ink:#0f172a; --sub:#475569; --line:#e2e8f0; --bg:#ffffff;
  --blue:#1f6feb; --mint:#25c2a0; --soft:#f8fafc;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.8; font-size:16px;
}
img,svg{max-width:100%}
a{color:var(--blue); text-decoration:none}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 20px}

/* header */
.hd{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--ink); letter-spacing:.02em}
.lg-mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--mint)); color:#fff; font-weight:800; font-size:16px}
.nav{display:flex; gap:22px; font-size:14px; color:var(--sub)}
.nav a{color:var(--sub)}
.nav a:hover{color:var(--blue)}

/* hero */
.hero{background:linear-gradient(180deg,#f5f9ff 0%,#ffffff 100%); border-bottom:1px solid var(--line); padding:54px 0 60px}
.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.tag{display:inline-block; margin:0 0 16px; padding:5px 12px; border-radius:999px; background:#e8f0fe; color:#1a4fbf; font-size:13px; font-weight:600}
h1{font-size:40px; line-height:1.35; margin:0 0 18px; letter-spacing:.01em}
.lead{margin:0 0 26px; color:var(--sub); font-size:16px}
.cta{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.btn{display:inline-block; padding:15px 34px; border-radius:12px; background:var(--blue); color:#fff; font-weight:700; font-size:17px; box-shadow:0 8px 20px rgba(31,111,235,.24)}
.btn:hover{filter:brightness(1.06)}
.meta{margin:0; font-size:13px; color:#64748b}
.art{max-width:280px; justify-self:center; filter:drop-shadow(0 22px 40px rgba(15,23,42,.18))}

/* sections */
.sec{padding:58px 0}
.sec h2{font-size:26px; margin:0 0 24px; letter-spacing:.01em}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{border:1px solid var(--line); border-radius:16px; padding:24px; background:#fff}
.card h3{margin:14px 0 8px; font-size:18px}
.card p{margin:0; color:var(--sub); font-size:14.5px}
.ic{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; font-weight:800; font-size:14px}
.ic-a{background:#e8f0fe; color:#1a4fbf}
.ic-b{background:#e6f7f2; color:#0d8c72}
.ic-c{background:#fdf1e3; color:#b2620a}

/* band */
.band{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0}
.band-in{display:flex; align-items:center; justify-content:space-between; gap:28px}
.band h2{font-size:22px; margin:0 0 8px}
.band p{margin:0; color:var(--sub); font-size:15px; max-width:620px}
.btn-ghost{background:#fff; color:var(--blue); border:1.5px solid var(--blue); box-shadow:none; padding:13px 28px; font-size:16px; white-space:nowrap}

/* spec table */
.spec{width:100%; border-collapse:collapse; font-size:15px}
.spec th,.spec td{border-bottom:1px solid var(--line); padding:15px 16px; text-align:left; vertical-align:top}
.spec th{width:190px; color:var(--sub); font-weight:600; background:var(--soft)}

/* faq */
details{border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:12px; background:#fff}
details summary{cursor:pointer; font-weight:600; font-size:15.5px; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"＋"; color:var(--blue); margin-right:10px; font-weight:700}
details[open] summary::before{content:"−"}
details p{margin:12px 0 2px; color:var(--sub); font-size:14.5px}

/* footer */
.ft{background:#0f172a; color:#cbd5e1; padding:40px 0 28px; margin-top:40px}
.ft-in{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12)}
.ft-logo{margin:0; font-size:18px; font-weight:700; color:#fff}
.ft-note{margin:4px 0 0; font-size:13px; color:#94a3b8}
.ft-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
.ft-links a{color:#cbd5e1}
.ft-links a:hover{color:#fff}
.cr{margin:18px 0 0; font-size:12.5px; color:#94a3b8}

/* legal pages */
.doc{padding:46px 0 20px}
.doc h1{font-size:28px; margin:0 0 8px}
.doc .upd{color:#64748b; font-size:13.5px; margin:0 0 28px}
.doc h2{font-size:19px; margin:34px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.doc p,.doc li{color:#334155; font-size:15px}
.doc ol,.doc ul{padding-left:22px}
.doc .back{display:inline-block; margin:32px 0 0; font-size:14px}
.form{max-width:640px}
.form label{display:block; font-size:14px; font-weight:600; margin:18px 0 6px}
.form input,.form textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; background:#fff}
.form textarea{min-height:140px; resize:vertical}
.form .btn{margin-top:22px; border:0; cursor:pointer}
.note{background:var(--soft); border-left:3px solid var(--blue); padding:14px 18px; font-size:14px; color:var(--sub); border-radius:0 8px 8px 0}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr; gap:32px}
  .art{max-width:220px; order:-1}
  h1{font-size:30px}
  .cards{grid-template-columns:1fr}
  .band-in{flex-direction:column; align-items:flex-start}
  .nav{display:none}
  .sec{padding:44px 0}
  .sec h2{font-size:22px}
  .spec th{width:auto; display:block; border-bottom:0; padding-bottom:2px}
  .spec td{display:block; padding-top:2px}
  .spec tr{display:block; border-bottom:1px solid var(--line); padding:10px 0}
  .spec th,.spec td{border-bottom:0}
  .ft-in{flex-direction:column}
}