:root{
  --bg:#14110d;
  --bg-alt:#1d1812;
  --text:#ece4d3;
  --muted:#b9ad94;
  --gold:#e4b93c;
  --gold-dark:#b8891a;
  --line:#3a3226;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9;font-size:16px;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:100}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(20,17,13,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.logo img{width:150px;height:auto}
.gnav{display:flex;gap:22px}
.gnav a{color:var(--text);text-decoration:none;font-size:14px;letter-spacing:.04em;padding:6px 0;border-bottom:2px solid transparent}
.gnav a:hover{border-color:var(--gold);color:var(--gold)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--text);margin:6px 0;transition:.2s}

/* hero */
.hero{background:linear-gradient(rgba(20,17,13,.55),rgba(20,17,13,.88)),url("../img/dragon-pas-far-point.png") center/cover no-repeat;
  padding:110px 0 100px;text-align:center}
.hero-kicker{margin:0;color:var(--gold);letter-spacing:.18em;font-size:13px;text-transform:uppercase}
.hero h1{margin:.3em 0;font-size:clamp(30px,6vw,52px);line-height:1.3;letter-spacing:.06em}
.hero-lead{margin:0 0 28px;color:var(--text);font-size:clamp(15px,2.4vw,18px)}
.sp{display:none}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:#1a1409;text-decoration:none;font-weight:700;
  padding:12px 32px;border-radius:4px;letter-spacing:.06em;transition:.2s}
.btn:hover{background:#f2cc5a;transform:translateY(-1px)}

/* sections */
.sec{padding:80px 0}
.sec-alt{background:var(--bg-alt)}
.sec-title{margin:0 0 40px;text-align:center;font-size:clamp(22px,4vw,30px);letter-spacing:.1em}
.sec-title::after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin:14px auto 0}
.sec-title span{color:var(--gold)}
.center{text-align:center}
.two-col{display:grid;grid-template-columns:5fr 6fr;gap:40px;align-items:center}
.two-col.rev{grid-template-columns:6fr 5fr}
.col-img img{border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.5);width:100%}
.col-text p{margin:0 0 1.1em}

/* products */
.product{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:36px;padding:36px 0;border-top:1px solid var(--line)}
.product:first-of-type{border-top:0}
.p-img img{border-radius:6px;width:100%}
.p-body h3{margin:0 0 14px;font-size:clamp(18px,3vw,22px);line-height:1.5;color:var(--gold)}
.p-body h3 small{display:block;font-size:.72em;color:var(--muted);font-weight:400;margin-top:2px}
.p-body p{margin:0 0 1em}
.p-body ul{margin:0 0 1em;padding-left:1.3em}
.contents{background:var(--bg-alt);border-left:3px solid var(--gold-dark);padding:14px 18px;font-size:.94em}

/* support */
.sheet-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:36px}
.sheet-pair img{width:100%;border-radius:4px;border:1px solid var(--line)}
.dl-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dl{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:20px 24px}
.dl p{margin:0 0 .6em}
.pdf::before{content:"PDF";display:inline-block;background:#c0392b;color:#fff;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:3px;margin-right:8px;vertical-align:1px}

/* footer */
.site-footer{background:#0d0b08;border-top:1px solid var(--line);padding:40px 0;font-size:12.5px;color:var(--muted);line-height:1.8}
.site-footer p{margin:0 0 1em}
.site-footer a{color:var(--muted)}
.totop{display:inline-block;border:1px solid var(--line);padding:6px 16px;text-decoration:none;letter-spacing:.1em}

/* mobile */
@media (max-width:820px){
  .menu-btn{display:block}
  .gnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line)}
  .gnav.open{display:flex}
  .gnav a{padding:16px 24px;border-bottom:1px solid var(--line);font-size:15px}
  .logo img{width:128px}
  .hero{padding:72px 0 64px}
  .sp{display:inline}
  .sec{padding:56px 0}
  .two-col,.two-col.rev,.product,.dl-list{grid-template-columns:1fr;gap:24px}
  .two-col.rev .col-img{order:-1}
  .p-img{max-width:360px;margin:0 auto}
  .sheet-pair{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}