:root{
  /* ライトモードのみ。ブランド色 #0F172A 1色（ボタン・リンク・選択状態）＋グレー。ポイント表示だけ青。グラデーションなし */
  --bg:#FFFFFF; --bg2:#F6F7F9; --line:#E3E6EA;
  --ink:#1A1D21; --ink2:#5B636E; --ink3:#6E7682;
  --brand:#0F172A; --brand-h:#1E293B; --pt:#2563EB;
  --cream:#F3EDE3;
  --max:1120px; --gut:16px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.4;word-break:auto-phrase}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.ib{display:inline-block}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
@media(min-width:768px){:root{--gut:32px}}
.skip{position:absolute;left:8px;top:-60px;z-index:50;background:var(--brand);color:#fff;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:8px;text-decoration:none}
.skip:focus{top:8px}
.num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.smp{display:inline-block;font-size:12px;line-height:1;font-weight:400;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 8px;white-space:nowrap}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;letter-spacing:.04em;font-size:17px;min-height:44px;white-space:nowrap}
.logo svg{width:26px;height:26px}
.hdr nav{display:none;gap:28px;font-size:14px;color:var(--ink2)}
.hdr nav a{text-decoration:none;padding:10px 0}
.hdr nav a:hover{color:var(--ink)}
.hdr .btn{min-height:44px;padding:0 16px;font-size:14px}
@media(min-width:960px){.hdr nav{display:flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;font-size:17px;text-decoration:none;letter-spacing:.02em;white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--brand-h)}
.btn svg{width:18px;height:18px}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--ink3)}
.tlink:hover{text-decoration-color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}

/* sections */
section{padding:72px 0}
@media(min-width:900px){section{padding:104px 0}}
.alt{background:var(--bg2)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink3);margin-bottom:14px}
.h2{font-size:28px}
@media(min-width:768px){.h2{font-size:38px}}
.lead{color:var(--ink2);margin-top:18px;max-width:640px;font-size:16px}
@media(min-width:768px){.lead{font-size:17px}}

/* hero */
.hero{padding:40px 0 64px}
.hero .wrap{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.hero{padding:72px 0 96px}.hero .wrap{grid-template-columns:1.05fr .95fr;gap:56px}}
.hero-tag{display:inline-block;font-size:14px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:22px;background:#fff}
.h1{font-size:40px;line-height:1.25;letter-spacing:-.035em}
.h1 span{display:block}
@media(min-width:768px){.h1{font-size:60px}}
.hero-sub{font-size:17px;color:var(--ink2);margin:22px 0 32px;max-width:520px;line-height:1.9}
@media(min-width:768px){.hero-sub{font-size:18px}}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.hero-facts li{display:flex;align-items:center;gap:6px}
.hero-facts svg{width:16px;height:16px;flex:none}

/* phone */
.phone-stage{position:relative;display:flex;justify-content:center}
.phone-stage::before{content:"";position:absolute;inset:8% 0 0;background:var(--bg2);border-radius:12px}
@media(min-width:960px){.phone-stage::before{inset:10% -24px -24px 18%}}
.phone-stage .smp{position:absolute;right:8px;bottom:8px;z-index:3}
.phone{position:relative;z-index:1;width:310px;max-width:100%;border-radius:46px;background:#E3E6EA;padding:10px;border:1px solid #CDD2D9}
.screen{background:#fff;border-radius:37px;overflow:hidden;font-size:12px;line-height:1.5;color:var(--ink)}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 4px;font-size:12px;font-weight:700}
.sbar .notch{width:84px;height:22px;background:#CDD2D9;border-radius:12px}
.sbar i{width:22px;height:10px;border:1.5px solid var(--ink);border-radius:3px}
.app-top{display:flex;justify-content:space-between;align-items:center;padding:8px 16px}
.app-top b{font-size:15px;letter-spacing:.04em}
.app-top .cart{width:30px;height:30px;border-radius:50%;background:var(--bg2);display:grid;place-items:center}
.app-top .cart svg{width:16px;height:16px}
.sbox{margin:4px 14px 0;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);padding:9px 12px;color:var(--ink3)}
.sbox svg{width:15px;height:15px;flex:none}
.cats{display:flex;gap:6px;padding:10px 14px 4px;overflow:hidden}
.cats span{flex:none;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink2);background:#fff}
.cats span.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.shead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px 6px;font-size:13px;font-weight:700}
.shead small{font-size:12px;font-weight:400;color:var(--ink3)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px}
.pcard .im{aspect-ratio:1/1;border-radius:8px;background:var(--cream);position:relative;overflow:hidden}
.pcard .im svg{position:absolute;inset:10%;width:80%;height:80%}
.pcard .nm{font-size:12px;margin-top:4px;line-height:1.4;height:2.8em;overflow:hidden}
.pcard .pr{font-size:13px;font-weight:700}
.pcard .sh{font-size:12px;color:var(--ink3)}
.newrow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.newrow .im{width:44px;height:44px;border-radius:6px;background:var(--cream);position:relative}
.newrow .im svg{position:absolute;inset:4px;width:36px;height:36px}
.newrow b{font-size:12px;display:block}
.newrow span{font-size:12px;color:var(--ink3)}
.newrow .pr{font-size:12px;font-weight:700}
.tabbar{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:8px 0 14px;font-size:12px;color:var(--ink3);margin-top:6px}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar svg{width:18px;height:18px}
.tabbar .on{color:var(--ink);font-weight:700}

/* find (4 ways) */
.find{margin-top:48px;display:grid;gap:20px}
@media(min-width:768px){.find{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.find{grid-template-columns:repeat(4,1fr)}}
.fcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px}
.fcard .k{font-size:13px;font-weight:700;color:var(--ink3);letter-spacing:.06em}
.fcard h3{font-size:19px}
.fcard p{font-size:15px;color:var(--ink2)}
.fui{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;font-size:13px}
.fui .sbox{margin:0}
.fui .cats{padding:0;flex-wrap:wrap}
.rank li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;padding:5px 0;align-items:center}
.rank li b{color:var(--ink3);font-size:12px}
.rank li span:last-child{font-weight:700}
.newl li{display:flex;justify-content:space-between;gap:8px;padding:5px 0}
.newl li em{font-style:normal;font-size:12px;color:var(--ink3);white-space:nowrap}

/* product page */
.pp{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.pp{grid-template-columns:1fr 1fr;gap:72px}}
.checks{margin-top:28px;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:28px 1fr;gap:2px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
.checks svg{width:22px;height:22px;margin-top:3px;grid-row:span 2}
.checks h3{font-size:17px}
.checks p{font-size:15px;color:var(--ink2)}
.pdp{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:460px;width:100%;justify-self:center;position:relative}
.pdp .smp{position:absolute;right:10px;top:10px;z-index:2}
.pdp .ph{background:var(--cream);aspect-ratio:4/3;position:relative}
.pdp .ph svg{position:absolute;inset:8% 28%;width:44%;height:84%}
.pdp .bd{padding:18px 20px 20px}
.pdp .shop{font-size:13px;color:var(--ink3)}
.pdp .ttl{font-size:20px;font-weight:700;margin-top:2px}
.pdp .price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.pdp .price b{font-size:28px;letter-spacing:-.02em}
.pdp .price small{font-size:13px;color:var(--ink3)}
.pdp dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;border-top:1px solid var(--line);padding-top:14px}
.pdp dt{color:var(--ink3)}
.pdp dd{margin:0}
.pdp .ptchip{display:inline-block;font-size:12px;font-weight:700;color:var(--pt);background:var(--bg2);border-radius:6px;padding:2px 8px}
.pdp .desc{font-size:14px;color:var(--ink2);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pdp .seller{font-size:13px;margin-top:14px;padding:12px 14px;background:var(--bg2);border-radius:8px}
.pdp .seller a{color:var(--ink)}
.pdp .buy{display:flex;margin-top:16px;min-height:48px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;align-items:center;justify-content:center}

/* reading */
.read{display:grid;gap:40px;align-items:center}
@media(min-width:960px){.read{grid-template-columns:1fr 1fr;gap:72px}.read .fig{order:-1}}
.fig{background:#fff;border-radius:12px;padding:28px;display:flex;justify-content:center;position:relative}
.fig .smp{position:absolute;right:8px;bottom:8px}
@media(max-width:480px){.fig{padding:18px}}
.article{background:#fff;border:1px solid var(--line);border-radius:12px;max-width:400px;width:100%;overflow:hidden}
.article .ph{height:120px;background:var(--cream);position:relative}
.article .ph svg{position:absolute;left:50%;top:10px;width:90px;height:100px;margin-left:-45px}
.article .bd{padding:18px}
.article .k{font-size:12px;color:var(--ink3);display:flex;justify-content:space-between}
.article h4{font-size:17px;margin:6px 0 8px}
.article p{font-size:14px;color:var(--ink2)}
.article .rel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;font-size:13px}
.article .rel .im{width:40px;height:40px;border-radius:6px;background:var(--cream);position:relative}
.article .rel .im svg{position:absolute;inset:3px;width:34px;height:34px}
.points-ul{margin-top:22px;display:grid;gap:10px;font-size:15px}
.points-ul li{display:flex;gap:10px}
.points-ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);margin-top:11px;flex:none}

/* point note */
.ptbox{margin-top:40px;display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
@media(min-width:768px){.ptbox{grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:28px 32px}}
.ptbox .ptchip{display:inline-block;font-size:14px;font-weight:700;color:var(--pt);background:var(--bg2);border-radius:8px;padding:6px 12px;white-space:nowrap}
.ptbox p{font-size:15px;color:var(--ink2)}

/* safety */
.safe{display:grid;gap:40px}
@media(min-width:960px){.safe{grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}}
.safe-list li{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.safe-list li:last-child{border-bottom:1px solid var(--line)}
.safe-list svg{width:22px;height:22px;margin-top:3px;grid-row:span 2}
.safe-list h3{font-size:17px}
.safe-list p{font-size:15px;color:var(--ink2)}

/* faq */
.faq{display:grid;gap:40px}
@media(min-width:960px){.faq{grid-template-columns:.7fr 1.3fr;gap:80px}}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;min-height:64px;font-weight:700;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq .a{padding:0 44px 22px 0;color:var(--ink2);font-size:15px}
.faq .a b{color:var(--ink)}

/* final */
.final{text-align:center}
.final .h2{font-size:30px;line-height:1.35}
@media(min-width:768px){.final .h2{font-size:48px}}
.final .lead{margin:20px auto 36px}
.final .cta-row{justify-content:center}
.final .note{font-size:13px;color:var(--ink3);margin-top:18px}

footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:13px;color:var(--ink3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
footer a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
footer a:hover{color:var(--ink)}
.legal{margin-top:10px;line-height:1.8}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}