@charset "utf-8";
/* ===========================================================
   共通スタイル  hikaku-media
   ・モバイルファースト / 横スクロール禁止
   ・角丸カードの均一グリッドで埋めない設計
   =========================================================== */

:root{
  --paper:#F6F1E9;
  --paper-warm:#EFE7DA;
  --card:#FFFFFF;
  --ink:#211D18;
  --ink-soft:#5B534A;
  --ink-mute:#8A8177;
  --line:#E4DACB;
  --line-soft:#EFE8DC;
  --accent:#9C5A37;
  --accent-deep:#7C4326;
  --accent-tint:#F3E7DD;
  --gold:#AF8850;
  --good:#3C6A50;
  --good-tint:#E7F0E9;
  --warn:#A45A2C;
  --warn-tint:#F5E7DB;
  --shadow:0 18px 40px -28px rgba(53,38,24,.45);
  --shadow-sm:0 8px 22px -16px rgba(53,38,24,.4);
  --wrap:1080px;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  line-height:1.85;font-size:15px;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  padding-bottom:76px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.4;letter-spacing:.01em;margin:0}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:760px}

.pr-bar{background:var(--paper-warm);color:var(--ink-soft);font-size:11px;letter-spacing:.04em;
  text-align:center;padding:7px 16px;border-bottom:1px solid var(--line)}

.site-head{position:sticky;top:0;z-index:40;background:rgba(246,241,233,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-head .row{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--serif)}
.brand b{font-size:18px;font-weight:600;letter-spacing:.04em}
.brand span{font-size:10.5px;color:var(--ink-mute);font-family:var(--sans);letter-spacing:.14em}
.nav{display:flex;gap:20px;font-size:13px}
.nav a{color:var(--ink-soft);padding:4px 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a.on{color:var(--accent);border-color:var(--accent)}
.nav .n-ladies{display:none}
@media(min-width:600px){.nav .n-ladies{display:inline}}

.kicker{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.06em;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:9px}
.kicker::before{content:"";width:26px;height:1.5px;background:var(--accent);display:inline-block}
.sec-title{font-size:clamp(21px,5.4vw,30px);letter-spacing:.02em}
.sec-lead{color:var(--ink-soft);font-size:14px;margin-top:12px}
section{padding-block:clamp(44px,9vw,78px)}
.sec-tight{padding-block:clamp(30px,6vw,50px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);
  font-weight:700;font-size:15px;letter-spacing:.03em;padding:15px 26px;border-radius:9px;cursor:pointer;
  border:0;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;text-align:center;line-height:1.4}
.btn-main{background:linear-gradient(180deg,#A9633E,#8A4A29);color:#fff;
  box-shadow:0 12px 26px -14px rgba(124,67,38,.9);width:100%}
.btn-main:hover{transform:translateY(-2px)}
.btn-main .arw{transition:transform .2s ease}
.btn-main:hover .arw{transform:translateX(3px)}
.btn-ghost{background:#fff;color:var(--accent-deep);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:12px 18px;font-size:13.5px;border-radius:8px}
.btn-row{display:flex;flex-direction:column;gap:11px;margin-top:22px}
@media(min-width:600px){.btn-main{width:auto;min-width:280px}.btn-row{flex-direction:row;flex-wrap:wrap}}
.note-cta{font-size:11.5px;color:var(--ink-mute);margin-top:9px;text-align:center}

.ph{position:relative;overflow:hidden;background:var(--paper-warm);border:1px solid var(--line);border-radius:14px}
.ph img{width:100%;height:100%;object-fit:cover}
.ratio-43{aspect-ratio:4/3}
.ratio-photo{aspect-ratio:5/6}
.ratio-wide{aspect-ratio:16/10}

.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:999px;line-height:1.5}
.tag-best{background:var(--accent);color:#fff}
.tag-pop{background:#2E2A24;color:#fff}
.tag-first{background:var(--good);color:#fff}
.tag-soft{background:var(--accent-tint);color:var(--accent-deep)}
.tag-line{background:#fff;color:var(--ink-soft);border:1px solid var(--line)}

.hero{position:relative;padding-top:clamp(30px,7vw,58px)}
.hero-grid{display:grid;gap:26px}
.hero-copy h1{font-size:clamp(27px,7.4vw,46px);line-height:1.32;letter-spacing:.015em}
.hero-copy h1 .u{background:linear-gradient(transparent 62%,var(--accent-tint) 62%);padding-inline:2px}
.hero-lead{color:var(--ink-soft);font-size:15px;margin-top:20px;max-width:34em}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-media{position:relative}
.hero-media .stamp{position:absolute;left:-8px;bottom:-14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-sm);padding:12px 15px;font-size:12px;color:var(--ink-soft);max-width:210px}
.hero-media .stamp b{font-family:var(--serif);color:var(--ink);font-size:13.5px}
@media(min-width:820px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px}
  .hero-copy h1{font-size:46px}}

.split{display:grid;gap:16px;margin-top:8px}
.split-card{position:relative;display:grid;grid-template-columns:96px 1fr;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);align-items:center;
  transition:transform .18s ease,box-shadow .2s ease}
.split-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.split-card .ph{border-radius:12px;aspect-ratio:1/1}
.split-card h3{font-size:18px}
.split-card .lbl{font-size:11px;color:var(--accent);letter-spacing:.08em;margin-bottom:4px}
.split-card p{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
.split-card .go{margin-top:9px;font-size:13px;color:var(--accent-deep);font-weight:700}
.split-card.is-main::after{content:"主力";position:absolute;top:-9px;right:14px;background:var(--accent);
  color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px}
@media(min-width:720px){.split{grid-template-columns:1fr 1fr}}

.about{background:var(--paper-warm);border-block:1px solid var(--line)}
.about-grid{display:grid;gap:24px}
.about-photo .ph{max-width:280px}
.about-body h2{font-size:clamp(20px,5vw,27px)}
.about-body p{color:var(--ink-soft);font-size:14px;margin-top:16px}
.about-sign{margin-top:18px;font-family:var(--serif);font-size:15px}
.about-sign span{display:block;font-family:var(--sans);font-size:11.5px;color:var(--ink-mute);margin-top:2px;letter-spacing:.06em}
.stance{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.stance li{padding-left:20px;position:relative;font-size:13.5px;color:var(--ink-soft)}
.stance li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.stance li b{color:var(--ink);font-weight:700}
@media(min-width:780px){.about-grid{grid-template-columns:280px 1fr;align-items:start;gap:44px}}

.picks{display:grid;gap:14px;margin-top:26px}
.pick{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.pick .pick-tag{margin-bottom:12px}
.pick h3{font-size:18px}
.pick .price{font-family:var(--serif);margin-top:10px;color:var(--accent-deep)}
.pick .price b{font-size:26px}
.pick .price small{font-size:11.5px;color:var(--ink-mute);font-family:var(--sans);display:block;margin-top:2px}
.pick .why{font-size:12.5px;color:var(--ink-soft);margin-top:11px;flex:1}
.pick .btn{margin-top:16px}
.pick.feature{border-color:var(--accent);box-shadow:var(--shadow)}
@media(min-width:760px){.picks{grid-template-columns:repeat(3,1fr);align-items:stretch}}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:14px;background:var(--card);box-shadow:var(--shadow-sm)}
.scroll-hint{font-size:11.5px;color:var(--ink-mute);margin:0 0 9px;display:flex;align-items:center;gap:7px}
.scroll-hint::before{content:"";width:22px;height:1px;background:var(--ink-mute)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:12.5px}
table.cmp th,table.cmp td{padding:13px 12px;text-align:center;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.cmp thead th{background:var(--paper-warm);font-family:var(--sans);font-weight:700;color:var(--ink-soft);
  font-size:11.5px;white-space:nowrap;position:sticky;top:0}
table.cmp tbody th{text-align:left;font-family:var(--sans);position:sticky;left:0;background:var(--card);
  min-width:120px;box-shadow:1px 0 0 var(--line-soft)}
table.cmp .co{font-weight:700;color:var(--ink);font-size:13px;display:block}
table.cmp .co small{font-weight:400;color:var(--ink-mute);font-size:10.5px}
table.cmp .yen{font-family:var(--serif);color:var(--accent-deep);font-weight:600;font-size:13.5px}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}
.chk{color:var(--good);font-weight:700}
.cross{color:var(--ink-mute)}

.reviews{display:grid;gap:clamp(26px,5vw,42px)}
.rev{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.rev-head{display:grid;gap:0}
.rev-media{position:relative}
.rev-media .ph{border-radius:0;border:0;aspect-ratio:16/10}
.rev-rank{position:absolute;top:14px;left:14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:6px 12px;font-family:var(--serif);font-size:13px;box-shadow:var(--shadow-sm)}
.rev-rank b{color:var(--accent);font-size:17px}
.rev-body{padding:22px 20px 24px}
.rev-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.rev-body h3{font-size:22px}
.rev-body h3 small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--ink-mute);font-weight:400;margin-top:5px;letter-spacing:.04em}
.rev-summary{font-size:13.5px;color:var(--ink-soft);margin-top:13px}
.spec{list-style:none;padding:0;margin:18px 0 0;border-top:1px dashed var(--line);display:grid;gap:0}
.spec li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px;align-items:baseline}
.spec .k{color:var(--ink-mute);font-size:11.5px;letter-spacing:.03em}
.spec .v b{font-family:var(--serif);color:var(--accent-deep);font-size:16px}
.spec .v small{color:var(--ink-mute);font-size:11px}
.pmcols{display:grid;gap:12px;margin-top:20px}
.pm{border-radius:12px;padding:15px 15px 16px;font-size:12.5px}
.pm h4{font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pm h4::before{content:"";width:14px;height:2px;border-radius:2px}
.pm.good{background:var(--good-tint)}
.pm.good h4{color:var(--good)}
.pm.good h4::before{background:var(--good)}
.pm.bad{background:var(--warn-tint)}
.pm.bad h4{color:var(--warn)}
.pm.bad h4::before{background:var(--warn)}
.pm ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pm li{padding-left:15px;position:relative;color:var(--ink-soft)}
.pm li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.voice{margin-top:18px;background:var(--paper);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:13px 16px;font-size:12.5px;color:var(--ink-soft)}
.voice b{display:block;font-size:11px;color:var(--ink-mute);letter-spacing:.06em;margin-bottom:5px;font-weight:700}
.rev .btn-row{margin-top:20px}
@media(min-width:720px){.rev-head{grid-template-columns:300px 1fr}
  .rev-media .ph{height:100%;aspect-ratio:auto;min-height:260px}
  .pmcols{grid-template-columns:1fr 1fr}}

.howto{background:var(--paper-warm);border-block:1px solid var(--line)}
.steps{counter-reset:s;display:grid;gap:16px;margin-top:26px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 18px 60px;position:relative;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:#fff;font-family:var(--serif);font-size:14px;display:grid;place-items:center}
.step h4{font-size:15px}
.step p{font-size:13px;color:var(--ink-soft);margin-top:6px}
@media(min-width:760px){.steps{grid-template-columns:1fr 1fr}}

.faq{display:grid;gap:12px;margin-top:24px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 18px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:700;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--accent);font-weight:700;transition:transform .2s ease}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 0 16px;font-size:13px;color:var(--ink-soft)}

.legal-note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:18px 20px;font-size:12px;color:var(--ink-soft);line-height:1.9}
.legal-note b{color:var(--ink)}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:center;box-shadow:0 -10px 30px -22px rgba(53,38,24,.6);
  transform:translateY(110%);transition:transform .3s ease}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .sc-txt{flex:1;min-width:0}
.sticky-cta .sc-txt b{display:block;font-size:12px;font-family:var(--serif);color:var(--ink);line-height:1.3}
.sticky-cta .sc-txt span{font-size:10.5px;color:var(--ink-mute)}
.sticky-cta .btn{flex:0 0 auto;padding:12px 20px;font-size:13.5px;white-space:nowrap}
@media(min-width:820px){body{padding-bottom:0}.sticky-cta{display:none}}

.site-foot{background:#241F1A;color:#CDC3B4;padding:44px 0 30px;margin-top:20px}
.site-foot .fgrid{display:grid;gap:26px}
.site-foot .brand b{color:#fff}
.site-foot .brand span{color:#8f8577}
.site-foot p{font-size:12px;color:#a89e90;margin-top:14px;line-height:1.9}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px}
.foot-links a{color:#CDC3B4}
.foot-links a:hover{color:#fff}
.foot-pr{font-size:11px;color:#8f8577;border-top:1px solid #3a332b;margin-top:26px;padding-top:18px;line-height:1.9}
@media(min-width:760px){.site-foot .fgrid{grid-template-columns:1.4fr 1fr;align-items:start}}

.crosslink{display:grid;gap:14px}
.cl-card{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:transform .18s ease}
.cl-card:hover{transform:translateY(-2px)}
.cl-card .ph{width:64px;height:64px;flex:0 0 auto;border-radius:12px;aspect-ratio:1/1}
.cl-card b{font-family:var(--serif);font-size:15px}
.cl-card p{font-size:12px;color:var(--ink-soft);margin-top:3px}
.cl-card .go{margin-left:auto;color:var(--accent);font-weight:700;font-size:20px;flex:0 0 auto}
@media(min-width:700px){.crosslink{grid-template-columns:1fr 1fr}}

.center{text-align:center}
.mt-s{margin-top:14px}
.divider{height:1px;background:var(--line);border:0;margin:0}
.hl{color:var(--accent-deep);font-weight:700}