.surface-accessories{
  --accent:#0067b8;
  --accent-hover:#005da6;
  --bg:#ffffff;
  --bg-alt:#ffffff;
  --bg-banner:#ffffff;
  --hover:#f0f0f0;
  --surface:#ffffff;
  --text:#171717;
  --text-muted:#505050;
  --text-faint:#6e6e6e;
  --border:#e3e3e3;
  --border-strong:#c8c8c8;
  --ph-from:#e9e9ec;
  --ph-to:#d2d2d7;
  --ph-label:#8a8a91;
  --focus:#0067b8;
  --shadow:0 1.6px 3.6px rgba(0,0,0,.09), 0 3.2px 7.2px rgba(0,0,0,.09);
  --radius:4px;
  --maxw:1200px;
  --font:"Segoe UI","Segoe UI Web (Japan)","Yu Gothic UI","Meiryo","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  box-sizing:border-box;
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
}
@media (prefers-color-scheme: dark){
  /* ダーク OS でも背景は白（#ffffff）固定。配色は変更しない。 */
  .surface-accessories{
    --bg:#ffffff;
    --bg-alt:#ffffff;
    --bg-banner:#ffffff;
    --surface:#ffffff;
    --hover:#f0f0f0;
    --text:#171717;
    --text-muted:#505050;
    --text-faint:#6e6e6e;
  }
}
body.surface-accessories-page{margin:0}
@scope (.surface-accessories){
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p{margin:0}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.skip-link{
  position:absolute;inset-block-start:-100px;inset-inline-start:8px;z-index:100;
  background:var(--surface);color:var(--accent);padding:10px 16px;
  border:1px solid var(--border-strong);border-radius:var(--radius);
}
.skip-link:focus{inset-block-start:8px}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.shell{padding-inline:16px}}

/* ---------- Nav ---------- */
.topbar{
  position:sticky;inset-block-start:0;z-index:50;
  background:var(--surface);
  border-block-end:1px solid var(--border);
}
.topbar__inner{
  display:flex;align-items:center;gap:8px;
  min-height:48px;
}
.brand{
  font-size:15px;font-weight:600;letter-spacing:.2px;
  color:var(--text);text-decoration:none;
  padding-inline-end:16px;white-space:nowrap;
}
.navlinks{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  color:var(--text);text-decoration:none;font-size:13px;
  padding:8px 12px;border-radius:var(--radius);white-space:nowrap;
}
.navlinks a:hover{background:var(--hover);text-decoration:underline}
.navtools{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;
  background:none;border:0;border-radius:var(--radius);
  color:var(--text);cursor:pointer;padding:0;
}
.iconbtn:hover{background:var(--hover)}
.iconbtn svg{inline-size:17px;block-size:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Placeholder blocks ---------- */
.ph{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ph-from) 0%,var(--ph-to) 100%);
  color:var(--ph-label);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  text-align:center;padding:12px;
  border-radius:var(--radius);
  overflow:hidden;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  pointer-events:none;
}

/* ---------- Hero ---------- */
.hero{background:var(--bg);padding-block:40px 48px;text-align:center}
.hero__head{margin-block-end:28px}
.hero h1{font-size:40px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.hero__body{margin-block-start:28px}
.hero p{font-size:17px;color:var(--text-muted);max-inline-size:62ch;margin-inline:auto}
.hero__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-block-start:24px}
/* PC 版では本文と同じ最大幅に揃える */
.hero__media{
  display:block;
  inline-size:100%;
  max-inline-size:var(--maxw);
  margin-inline:auto;
  border-radius:0;
  overflow:hidden;
  /* モバイル（860px 未満）: 実画像 1125×1224 */
  aspect-ratio:1125/1224;
}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
/* デスクトップ（860px 以上）: 実画像 1800×795 */
@media (min-width:860px){
  .hero__media{aspect-ratio:1800/795}
}
@media (max-width:640px){
  .hero{padding-block:28px 36px}
  .hero h1{font-size:30px}
  .hero p{font-size:16px}
}

/* ---------- Category tile banner ---------- */
.tiles{margin-block-start:32px;text-align:start}
.tiles__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
@media (min-width:640px){.tiles__grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1100px){.tiles__grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.tile{
  display:flex;flex-direction:column;block-size:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  color:var(--text);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile__media{
  display:block;overflow:hidden;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--ph-from) 0%,var(--ph-to) 100%);
}
@media (min-width:640px){.tile__media{aspect-ratio:4/3}}
.tile__media img{
  display:block;inline-size:100%;block-size:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.tile__body{display:block;background:var(--surface);padding:14px 16px 16px}
.tile__label{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--text)}
.tile__sub{
  display:inline-flex;align-items:center;gap:4px;
  margin-block-start:4px;
  font-size:13px;font-weight:600;color:var(--accent);
}
.tile__sub .chev{font-size:15px;line-height:1}
.tile:hover,.tile:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--border-strong);
}
.tile:hover .tile__media img,.tile:focus-visible .tile__media img{transform:scale(1.03)}
.tile:hover .tile__sub{text-decoration:underline}
@media (max-width:640px){.tiles{margin-block-start:24px}}
@media (prefers-reduced-motion:reduce){
  .tile,.tile__media img{transition:none}
  .tile:hover,.tile:focus-visible{transform:none}
  .tile:hover .tile__media img,.tile:focus-visible .tile__media img{transform:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:600;
  padding:10px 22px;min-block-size:40px;
  border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--bg);border-color:var(--text-muted)}
.link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);font-size:14px;font-weight:600;text-decoration:none;
}
.link:hover{text-decoration:underline}
.link .chev{font-size:15px;line-height:1}

/* ---------- Sections ---------- */
.section{padding-block:56px;border-block-start:1px solid var(--border)}
.section:first-of-type{border-block-start:0}
.section__head{max-inline-size:78ch;margin-inline:auto;margin-block-end:28px;text-align:center}
.section__head h2{font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.section__head p{margin-block-start:12px;font-size:16px;color:var(--text-muted)}
.note{margin-block-start:10px;font-size:13px;color:var(--text-faint)}
.section__head .note{font-size:13px;font-weight:400;color:var(--text-faint)}
.section__foot{margin-block-start:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
@media (max-width:640px){
  .section{padding-block:40px}
  .section__head h2{font-size:23px}
}

/* ---------- Carousel component ---------- */
.carousel-static{display:block;inline-size:100%}
.carousel-static img{display:block;inline-size:100%;height:auto}
/* ---------- Closing ---------- */
.closing{background:var(--bg);padding-block:64px;text-align:center;border-block-start:1px solid var(--border)}
.closing h2{font-size:30px;font-weight:600;line-height:1.3;max-inline-size:22ch;margin-inline:auto}
.closing p{margin-block-start:16px;font-size:16px;color:var(--text-muted);max-inline-size:62ch;margin-inline:auto}
.closing .btn{margin-block-start:28px;cursor:default}
@media (max-width:640px){.closing{padding-block:44px}.closing h2{font-size:24px}}

/* ---------- Footer ---------- */
.footer{background:var(--bg);padding-block:40px;font-size:12px;color:var(--text-faint);border-block-start:1px solid var(--border)}
.disclaimer{display:grid;gap:8px;max-inline-size:110ch}
.footer__links{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  margin-block-start:28px;padding-block-start:24px;
  border-block-start:1px solid var(--border);
}
.footer__links a{color:var(--text-muted);text-decoration:none;font-size:12px}
.footer__links a:hover{text-decoration:underline}
.footer__legal{margin-block-start:20px;font-size:12px}

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