/* MOYOUGAE — 試作 prototype/board.html (v12) を本番用に整理したもの。色は ink / surface / moss の3色 */
:root{
  --bg:#FFFFFF; --surface:#F4F4F2; --mount:#F1F1EF; --ink:#161716; --muted:#6F726D; --line:#E1E2DE; --moss:#3F5A3A; --amber:#B8742E;
  --brand:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;
  --ui:"Murecho","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --r:18px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;overflow-x:clip}
button,input{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.wrap{padding-inline:clamp(12px,2.6vw,36px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== header ===== */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,24px);padding-block:18px 12px}
.bar-spacer{height:calc(118px + env(safe-area-inset-top,0px))}
.bar.fixed-compact + .bar-spacer{height:calc(84px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;text-decoration:none;white-space:nowrap;color:var(--ink)}
.brand b{font-family:var(--brand);font-weight:500;font-size:clamp(1.2rem,.9rem + 1.3vw,1.95rem);letter-spacing:.4em;margin-right:-.4em;line-height:1;text-transform:uppercase}
.brand b span{display:inline-block}
html.first .brand b span{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i) * 40ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(.6em);filter:blur(4px)}}
.tools{display:flex;align-items:center;gap:2px}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);text-decoration:none;transition:background .25s var(--ease)}
.icon-btn:hover{background:var(--surface)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.icon-btn[aria-pressed="true"] svg{fill:currentColor}
.icon-btn[aria-expanded="true"]{background:var(--surface)}
.badge{position:absolute;top:5px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ink);color:#fff;font-size:.6rem;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.badge.bump{animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}

.searchbar{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s var(--ease),opacity .2s var(--ease)}
.searchbar.open{max-height:72px;opacity:1}
.search{display:block;position:relative;margin-bottom:12px}
.search input{width:100%;height:44px;border:0;border-radius:999px;background:var(--surface);padding:0 18px 0 44px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s var(--ease);font-size:16px}
.search input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}

/* ジャンル一覧：最上部では開いていて、スクロールでメニューアイコンへ吸い込まれる */
.chips-wrap{max-height:140px;transition:max-height .3s cubic-bezier(.5,0,.25,1)}
.bar.collapsing .chips-wrap{max-height:0}
.bar.compact .chips-wrap{max-height:0;overflow:hidden;visibility:hidden}
.chips{display:flex;flex-wrap:wrap;gap:6px;row-gap:4px;padding-block:2px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border-radius:999px;padding:.5em 1.05em;color:var(--muted);font-size:.86rem;font-weight:500;line-height:1.5;text-decoration:none;white-space:nowrap;will-change:transform;transition:background .25s var(--ease),color .25s}
.chip:hover{color:var(--ink);background:var(--surface)}
.chip[aria-current="page"]{background:var(--ink);color:var(--surface)}
.chip sup{font-size:.62em;margin-left:.3em;opacity:.55;font-variant-numeric:tabular-nums;vertical-align:.5em}
@media (max-width:720px){.chips{flex-wrap:nowrap;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:40px}}
/* メニューアイコン：ジャンルが出ている間は点2つ、吸い込んだら線2本 */
.menu-btn svg path{stroke-dasharray:.01 16;stroke-dashoffset:-8;stroke-width:2.6;transition:stroke-dasharray .3s var(--ease),stroke-dashoffset .3s var(--ease),stroke-width .3s var(--ease)}
.bar.collapsing .menu-btn svg path,.bar.compact .menu-btn svg path{stroke-dasharray:16 16;stroke-dashoffset:0;stroke-width:1.5}

/* ===== board ===== */
main.wrap{position:relative;z-index:1}
.intro{display:flex;justify-content:space-between;align-items:end;gap:10px 16px;flex-wrap:wrap;padding-block:16px 18px}
.intro h1{margin:0;font-size:clamp(1.25rem,1rem + 1vw,1.7rem);font-weight:700;letter-spacing:.02em;text-wrap:balance}
.intro h1 small{font-family:var(--brand);font-weight:500;font-size:.5em;letter-spacing:.4em;color:var(--muted);margin-left:1.2em;vertical-align:.25em}
.intro .lede{flex-basis:100%;margin:0;color:var(--muted);font-size:.84rem;max-width:46em}
.intro p{margin:0;color:var(--muted);font-size:.78rem}
.pr{display:inline-block;border:1px solid var(--muted);border-radius:4px;padding:0 .4em;margin-right:.5em;font-size:.68rem;line-height:1.5;letter-spacing:.08em;color:var(--muted)}

.grid{position:relative;margin-bottom:56px}
.grid.ready{transition:height .4s var(--ease)}
.tile{break-inside:avoid}
.js .grid .tile{position:absolute;top:0;left:0;will-change:transform}
.js .grid:not(.on) .tile{opacity:0}
.grid.ready .tile{transition:transform .5s var(--ease),opacity .3s var(--ease)}
.tile.out{opacity:0;pointer-events:none;visibility:hidden}
/* JS が無いときは CSS の段組みで並べる */
html:not(.js) .grid{columns:5 220px;column-gap:16px}
html:not(.js) .tile{margin-bottom:26px}
.card{position:relative;display:block;border-radius:var(--r);isolation:isolate}
/* 重なり順: 写真 < カード全体リンク(1) < 保存・楽天で見る(2) */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--mount);aspect-ratio:1/var(--ar,1)}
/* タイルは正方形の枠いっぱいに表示（横長の写真は左右の端を切る。上下に灰色の帯を出さない。2026-10-07 ユーザー指摘） */
.ph img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
.card:hover .ph img,.card:focus-within .ph img{transform:scale(1.045)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.2),transparent 40%);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.card:hover .ph::after,.card:focus-within .ph::after{opacity:1}
.save{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.92);cursor:pointer;opacity:0;transform:translateY(-4px) scale(.92);transition:opacity .2s var(--ease),transform .2s var(--ease),background .25s}
.save svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.8;transition:fill .25s,stroke .25s}
.save.on{background:var(--moss)}
.save.on svg{fill:#fff;stroke:#fff}
.save.pop svg{animation:pop .4s var(--ease)}
@keyframes pop{35%{transform:scale(1.35)}}
.go{position:absolute;left:10px;bottom:10px;z-index:2;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:.42em .85em;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-size:.74rem;font-weight:700;text-decoration:none;opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.card:hover .save,.card:focus-within .save,.save.on,.card:hover .go,.card:focus-within .go{opacity:1;transform:none}
@media (hover:none){.save{opacity:1;transform:none}.go{display:none}}
.meta{padding:9px 4px 0}
.meta h3{margin:0;font-size:.84rem;font-weight:500;line-height:1.5}
.meta h3 a{text-decoration:none}
.meta h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.meta h3 a:focus-visible{outline:0}
.meta h3 a:focus-visible::after{outline:2px solid var(--moss);outline-offset:3px}
.meta p{margin:2px 0 0;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.7em}
.meta p span{white-space:nowrap}
.meta .yen{color:var(--ink);font-family:var(--brand);font-weight:500;font-size:.92rem;letter-spacing:.02em}
.empty{padding:48px 0;text-align:center;color:var(--muted)}

/* ===== item page ===== */
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4.5vw,64px);align-items:start;padding-block:10px 40px}
.hero-col{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);display:flex;flex-direction:column;align-items:center;gap:12px}
.hero{width:100%;max-width:min(100%,640px);border-radius:26px;view-transition-name:hero}
/* 商品ページの大きな写真は切らずに、写真そのものの縦横比で出す（帯も切り落としも無し） */
.hero.ph{isolation:isolate;aspect-ratio:auto}
.hero.ph img{height:auto}
.hero.ph::after{display:none}
.thumbs{display:flex;gap:8px}
.thumbs button{width:64px;height:64px;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--mount);cursor:pointer;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s}
.thumbs button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.thumbs img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.d-info{display:flex;flex-direction:column;gap:18px;padding-top:6px;max-width:40em}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.d-pr{margin:0;font-size:.74rem;color:var(--muted)}
.d-info h1{margin:0;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);font-weight:700;line-height:1.35;letter-spacing:.01em;text-wrap:balance}
.pname{margin:-8px 0 0;font-size:.84rem;color:var(--muted)}
.lead{margin:0;font-size:.98rem;line-height:1.95}
.buy{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.price{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price b{font-family:var(--brand);font-weight:500;font-size:1.9rem;letter-spacing:.02em;line-height:1}
.price span{font-size:.74rem;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;border:0;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--surface)}
.btn.ghost{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.btn.ghost.on{background:var(--moss);color:#fff;box-shadow:none}
.d-note{font-size:.74rem;color:var(--muted);margin:0}
.rv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;background:var(--surface);border-radius:14px;padding:12px 16px}
.rv-score b{font-variant-numeric:tabular-nums}
.rv-n{color:var(--muted);flex:1;min-width:12em}
.rv a{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.rv a:hover{text-decoration:underline}
.sec{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.sec h2{margin:0;font-size:1.02rem;font-weight:700;line-height:1.5}
.sec h2 small{display:block;font-size:.72rem;font-weight:400;color:var(--muted)}
.sec p{margin:0;font-size:.92rem;line-height:1.95}
.sec .eyebrow{font-family:var(--brand);font-size:.66rem;letter-spacing:.4em;color:var(--muted);margin:0 0 -6px}
.pc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pc-grid>div{background:var(--surface);border-radius:14px;padding:14px 16px}
.pc-grid h3{margin:0 0 8px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:6px}
.pc-grid h3::before{content:"";width:8px;height:8px;border-radius:50%}
.pc-good::before{background:var(--moss)}
.pc-bad::before{background:var(--amber)}
.pc-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.pc-grid li{font-size:.8rem;line-height:1.6;padding-left:1.1em;position:relative}
.pc-grid li::before{content:"–";position:absolute;left:0;color:var(--muted)}
.faq{display:flex;flex-direction:column;gap:14px}
.faq h3{margin:0 0 2px;font-size:.92rem;font-weight:700}
.faq p{font-size:.88rem}
.spec{display:grid;grid-template-columns:7em 1fr;gap:8px 12px;margin:0;font-size:.84rem}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
.rel-h{margin:8px 0 18px;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);font-weight:700;letter-spacing:.02em;border-top:1px solid var(--line);padding-top:22px}
@media (max-width:820px){
  .detail{grid-template-columns:minmax(0,1fr)}
  .hero-col{position:static}
  .hero{max-width:100%}
}
@media (max-width:480px){.pc-grid{grid-template-columns:minmax(0,1fr)}.actions .btn{flex:1}}

/* ===== ジャンル一覧の解説（選び方・よくある質問） ===== */
.hub{max-width:1120px;border-top:1px solid var(--line);padding-block:26px 48px;display:flex;flex-direction:column;gap:14px}
.hub h2{margin:10px 0 0;font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);font-weight:700}
.hub h3{margin:0 0 4px;font-size:.95rem;font-weight:700}
.hub p{margin:0;font-size:.9rem;line-height:1.95}
.hub .faq{max-width:46em}
.hub .eyebrow{font-family:var(--brand);font-size:.66rem;letter-spacing:.4em;color:var(--muted);margin:0 0 -8px}
.hub-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hub-steps>div{background:var(--surface);border-radius:14px;padding:16px 18px}
@media (max-width:820px){.hub-steps{grid-template-columns:minmax(0,1fr)}}

/* ===== text pages ===== */
.prose{max-width:42em;padding-block:24px 56px}
.prose h1{margin:0 0 20px;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);font-weight:700;line-height:1.35}
.prose h2{margin:34px 0 8px;font-size:1.02rem;font-weight:700;border-top:1px solid var(--line);padding-top:20px}
.prose p,.prose li{font-size:.92rem;line-height:1.95}
.prose ul{padding-left:1.2em}
.prose .meta-line{color:var(--muted);font-size:.78rem}
.prose a{text-underline-offset:3px}

/* お問い合わせフォーム */
.contact{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.contact .f{display:flex;flex-direction:column;gap:6px}
.contact label{font-size:.86rem;font-weight:500}
.contact .req,.contact .opt{margin-left:.6em;font-size:.68rem;font-weight:400;padding:0 .45em;border-radius:4px}
.contact .req{background:var(--ink);color:var(--surface)}
.contact .opt{box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.contact input,.contact select,.contact textarea{width:100%;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px;font-size:16px;line-height:1.6;transition:box-shadow .2s}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.contact small{font-size:.74rem;color:var(--muted)}
.contact .agree{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.contact .agree input{width:18px;height:18px;margin:4px 0 0;flex:none;box-shadow:none;accent-color:var(--moss)}
.contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:#FBF3EC;color:#7A4A1E;border-radius:12px;padding:12px 16px;font-size:.86rem}

/* ===== footer ===== */
.foot{border-top:1px solid var(--line);padding-block:22px calc(32px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:.74rem;display:flex;justify-content:space-between;gap:10px 28px;flex-wrap:wrap}
.foot p{margin:0}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .credit{flex-basis:100%}

/* ===== genre menu ===== */
.menu{position:fixed;inset:0;z-index:60}
.menu[hidden]{display:none}
.menu-bg{position:absolute;inset:0;background:rgba(18,19,18,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.menu-panel{position:absolute;top:0;right:0;height:100%;width:min(480px,100%);background:#FFFFFF;display:flex;flex-direction:column;padding:0 clamp(20px,4vw,40px) calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;box-shadow:-30px 0 60px -30px rgba(0,0,0,.25)}
.menu-head{display:flex;justify-content:space-between;align-items:center;min-height:76px;padding-top:env(safe-area-inset-top,0px)}
.menu-brand{font-family:var(--brand);font-weight:500;letter-spacing:.4em;font-size:.9rem}
.menu-label{margin:18px 0 6px;font-family:var(--brand);font-size:.66rem;letter-spacing:.4em;color:var(--muted)}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-list a{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.menu-list .en{font-family:var(--brand);font-weight:500;font-size:clamp(1.45rem,1.1rem + 1.6vw,2.1rem);letter-spacing:.2em;line-height:1.1;transition:transform .3s var(--ease),letter-spacing .3s var(--ease)}
.menu-list .ja{font-size:.76rem;color:var(--muted)}
.menu-list .n{margin-left:auto;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.menu-list a:hover .en,.menu-list a:focus-visible .en{transform:translateX(8px);letter-spacing:.26em}
.menu-list a[aria-current="page"] .en::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--moss);margin-left:.5em;vertical-align:.3em}
.menu-foot{margin:auto 0 0;padding-top:28px;font-size:.72rem;color:var(--muted)}
.menu-foot a{color:var(--muted);margin-right:1.2em}

/* ===== cursor（マウスのみ） ===== */
.cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:0;height:0}
.cursor i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;font-size:0;font-style:normal;font-weight:700;letter-spacing:.14em;white-space:nowrap;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .2s,border .2s,font-size .2s}
.cursor.view i{width:78px;height:78px;margin:-39px 0 0 -39px;font-size:.72rem;background:rgba(22,23,22,.88);backdrop-filter:blur(4px)}
.cursor.link i{width:36px;height:36px;margin:-18px 0 0 -18px;background:transparent;border:1.5px solid var(--ink)}
.cursor.hide i{width:0;height:0;margin:0}
html.has-cursor .meta h3 a::after{cursor:none}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ===== ページ間の切り替え（対応ブラウザのみ。速く・同時に） ===== */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
::view-transition-group(*){animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
::view-transition-old(root){animation-duration:.16s}
::view-transition-new(root){animation-duration:.26s}
::view-transition-group(bar){z-index:10}
::view-transition-group(hero){z-index:5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  @view-transition{navigation:none}
}
.sec.note{background:var(--surface,#F4F4F2);padding:14px 18px;border-radius:2px}
.ended-msg{font-size:.9rem;line-height:1.8;margin:0 0 12px}.ended-msg b{display:block;margin-bottom:4px}
.guide h1{margin-bottom:.4em}.guide .lead{font-size:1rem;line-height:1.9}
.plan{margin:24px 0}.plan svg{width:100%;height:auto;max-width:620px;display:block}
.plan .pr0{fill:#F4F4F2;stroke:#161716;stroke-width:2}.plan .ps{fill:#3F5A3A;opacity:.85}.plan .pt{fill:#fff;stroke:#6F726D;stroke-width:1.5}
.plan .pl{font:600 13px Murecho,sans-serif;text-anchor:middle;fill:#161716}.plan .pl-in{fill:#fff}.plan .pn{font:12px Murecho,sans-serif;text-anchor:middle;fill:#6F726D}.plan .pd{dominant-baseline:auto}
.plan figcaption{font-size:.74rem;color:var(--muted,#6F726D);margin-top:6px}
.tbl{overflow-x:auto}.tbl table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:560px}
.tbl th,.tbl td{border-bottom:1px solid var(--line,#E1E2DE);padding:8px 10px;text-align:left;vertical-align:middle}
.tbl td a{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}.tbl td img{width:60px;height:60px;object-fit:cover;flex:none}
.guide-link{display:block;max-width:1120px;margin:24px auto 0;padding:16px 18px;border:1px solid var(--line,#E1E2DE);color:inherit;text-decoration:none;font-weight:500}
.guide-link small{display:block;font:500 11px Jost,sans-serif;letter-spacing:.2em;color:var(--muted,#6F726D);margin-bottom:4px}
.guide.prose{max-width:880px}.tbl td:first-child{min-width:220px}.tbl th{font-weight:500;font-size:.78rem;color:var(--muted,#6F726D);white-space:nowrap}
.tool.prose{max-width:880px}
.calc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 8px}
.calc label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted,#6F726D)}
.calc label span{display:flex;align-items:baseline;gap:6px;color:var(--ink,#161716);font-size:.9rem}
.calc input{width:100%;font:600 1.6rem/1.2 Jost,Murecho,sans-serif;border:0;border-bottom:2px solid var(--ink,#161716);padding:4px 0;background:transparent;color:inherit;border-radius:0}
.calc input:focus{outline:none;border-bottom-color:#3F5A3A}
.calc-sum{font-size:1rem;margin:16px 0 0}.calc-sum b{font-size:1.4rem;color:#3F5A3A}
.tbl tr.ng{opacity:.45}
.tool-link{margin:20px 0}.tool-link a{display:inline-block;font-weight:500;border-bottom:1px solid currentColor;text-decoration:none;color:inherit}
@media (max-width:560px){.calc{grid-template-columns:1fr;gap:16px}}
.tool .plan svg{max-height:320px;width:auto;max-width:100%;margin:0 auto}
.hub-cards{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.hub-card{flex:1 1 240px;max-width:360px;padding:14px 16px;border:1px solid var(--line,#E1E2DE);color:inherit;text-decoration:none;font-weight:500;font-size:.92rem;line-height:1.5}
.hub-card small{display:block;font:500 11px Jost,sans-serif;letter-spacing:.2em;color:#3F5A3A;margin-bottom:4px}
.hub-card:hover{border-color:var(--ink,#161716)}

/* ===================================================================
   MAGAZINE（2026-10-25〜 ユーザー選定のC案「雑誌」）
   紙の色の地・明朝の見出し・角のない写真と罫線。色は ink / paper / moss の3色
   =================================================================== */
:root{--bg:#EFECE6;--surface:#E6E2DA;--mount:#FFFFFF;--line:#CFCAC0;--r:0px;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif}
.bar{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--ink)}
.brand b{font-weight:300;letter-spacing:.18em;margin-right:-.18em;font-size:clamp(1.5rem,1rem + 2vw,2.6rem)}
.chip{border-radius:0;padding:.35em .2em;margin-right:1.1em;color:var(--ink);font-family:var(--serif);font-weight:500;font-size:.9rem;border-bottom:1px solid transparent}
.chip:hover{background:none;border-bottom-color:var(--ink)}
.chip[aria-current="page"]{background:none;color:var(--ink);border-bottom:2px solid var(--moss)}
.chip sup{font-family:var(--brand);opacity:.7}
.search input{border-radius:0;background:#fff}
.icon-btn{border-radius:0}

/* 表紙 */
.cover{padding-top:6px}
.cv-mast{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--ink);font:500 .76rem var(--brand);letter-spacing:.22em}
.cv-mast span:last-child{font-family:var(--serif);letter-spacing:.12em;font-size:.86rem}
.cv-spread{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start}
.cv-vt{writing-mode:vertical-rl;margin:0;font:400 clamp(2rem,1.2rem + 2.6vw,3.6rem)/1.3 var(--serif);letter-spacing:.12em;display:flex;gap:.1em}
.cv-vt small{font:500 .82rem var(--serif);letter-spacing:.3em;color:var(--moss);margin-right:.8em}
.cv-photo{position:relative;display:block;background:#fff}
.cv-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.cv-no{position:absolute;left:-10px;top:-12px;background:var(--bg);padding:0 .25em .1em 0;font:300 clamp(3.4rem,2rem + 4vw,6.4rem)/1 var(--brand);color:var(--ink)}
.cv-col{display:flex;flex-direction:column;gap:20px}
.cv-lead{margin:0;font:500 1.04rem/2.15 var(--serif);text-align:justify}
.cv-picks{display:flex;flex-direction:column}
.pick{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--ink);text-decoration:none}
.pick img{width:84px;height:84px;object-fit:cover;background:#fff}
.pick small{display:block;font:500 .66rem var(--brand);letter-spacing:.24em;color:var(--moss)}
.pick span{font:500 .9rem/1.6 var(--serif)}
.pick:hover span{text-decoration:underline}
.cv-pr{margin:0;font-size:.72rem;color:var(--muted)}

/* 目次 */
.toc{margin:56px 0 0;border-top:3px double var(--ink);padding-top:18px}
.toc-h,.cat-h p{margin:0 0 14px;font:300 1.9rem/1 var(--brand);letter-spacing:.14em}
.toc-h small,.cat-h small{font:500 .8rem var(--serif);letter-spacing:.2em;margin-left:.8em;color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:clamp(18px,3vw,40px)}
.toc a{display:grid;grid-template-columns:2.6em 3em 1fr;align-items:baseline;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.toc b{font:300 1.35rem var(--brand)}
.toc small{font:500 .72rem var(--serif);color:var(--moss);letter-spacing:.1em}
.toc span{font:500 .95rem/1.5 var(--serif)}
.toc a:hover span{text-decoration:underline}
.cat-h{margin:56px 0 18px;border-top:1px solid var(--ink);padding-top:18px}

/* 連載（ジャンル）の見出し */
.mag-intro{display:block;padding-top:8px;border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:22px}
.mag-intro .kicker{font:500 .74rem var(--brand);letter-spacing:.28em;color:var(--moss);margin:0 0 6px}
.mag-intro h1{font:400 clamp(2rem,1.4rem + 2vw,3.2rem)/1.2 var(--serif);letter-spacing:.08em;margin:0 0 12px}
.mag-intro .lede{font:500 .95rem/2 var(--serif);color:var(--ink);margin:8px 0 0}

/* タイル（カタログ） */
.ph{background:#fff}
.ph img{mix-blend-mode:normal}
.meta h3{font-family:var(--serif);font-weight:500;font-size:.88rem}
.save,.go,.btn{border-radius:0}

/* 商品ページ・ガイド・ツールの見出しと本文 */
.hero{border-radius:0;background:#fff}
.d-info h1,.guide h1,.tool h1,.prose h1{font-family:var(--serif);font-weight:400;letter-spacing:.04em}
.lead,.guide .lead{font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:2.1}
.sec h2,.prose h2,.rel-h{font-family:var(--serif);font-weight:500;letter-spacing:.04em}
.sec{border-top:1px solid var(--ink)}
.rv{border-radius:0;background:var(--surface)}
.btn.primary{background:var(--ink)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.hub-card,.guide-link{background:transparent;border-color:var(--ink)}

@media (max-width:820px){
  .cv-spread{grid-template-columns:auto minmax(0,1fr)}
  .cv-col{grid-column:1 / -1}
  .cv-vt{font-size:1.9rem}
  .toc a{grid-template-columns:2.4em 2.8em 1fr}
}
/* 写真を紙に溶け込ませる（白い背景が紙の色になり、切り抜きのカタログに見える） */
.ph{background:var(--bg)}
.ph img,.hero.ph img,.cv-photo img,.pick img,.tbl td img{mix-blend-mode:multiply}
.cv-photo,.pick img,.hero{background:transparent}
/* 一覧のページ番号と寸法 */
.tno{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 2px!important;border-top:1px solid var(--ink);padding-top:6px}
.tno span{font:500 .62rem var(--brand);letter-spacing:.18em;color:var(--muted)}
.tno b{font:300 1.55rem/1 var(--brand);letter-spacing:-.01em;color:var(--ink)}
/* 商品ページの柱 */
.running{display:flex;align-items:baseline;gap:.6em;margin:0;font:500 .7rem var(--brand);letter-spacing:.22em;color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:8px}
.running b{margin-left:auto;font:300 2.4rem/1 var(--brand);letter-spacing:0;color:var(--ink)}
/* 表紙の題字と、縦書きの見出しを1字ずつ */
.cv-logo{margin:0 0 4px;font:300 clamp(3.2rem,1rem + 9.5vw,9.5rem)/.82 var(--brand);letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.cv-vt i{font-style:normal;display:inline-block}
html.js .cv-vt i{opacity:0;animation:vt .7s var(--ease) forwards;animation-delay:calc(var(--d) * 70ms + 200ms)}
@keyframes vt{from{opacity:0;transform:translateY(-.4em);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
/* ページを移るとき、誌面をめくるように切り替える（対応ブラウザだけ） */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.42s var(--ease) both pg-out}
::view-transition-new(root){animation:.42s var(--ease) both pg-in}
@keyframes pg-out{to{opacity:0;transform:translateX(-3%) rotateY(4deg)}}
@keyframes pg-in{from{opacity:0;transform:translateX(3%) rotateY(-4deg)}}
@media (prefers-reduced-motion:reduce){html.js .cv-vt i{animation:none;opacity:1}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* 明朝は細め（400/500）で、大きさと字間で見せる（2026-10-25 ユーザー指摘「太い明朝がダサい」） */
.cv-vt{font-size:clamp(2.2rem,1.3rem + 2.8vw,3.9rem);letter-spacing:.16em}
.mag-intro h1{letter-spacing:.14em}
.d-info h1,.guide h1,.tool h1,.prose h1{letter-spacing:.06em;line-height:1.5}
.pick{grid-template-columns:2.2em 84px 1fr}
.pick b{font:300 1.5rem/1 var(--brand)}
html.static .cv-vt i{animation:none;opacity:1}
/* ロゴは左上のヘッダーの1つだけ。表紙の大きな題字は置かない（2026-10-25 ユーザー指示） */
/* 号数の上の線（ヘッダーの下線）は無し。号数の下の線は細く薄く（2026-10-25 ユーザー指示） */
.bar{border-bottom:0}
.cv-mast{border-bottom:.5px solid var(--line)}
/* 罫線は全体に細く薄く、さりげなく（2026-10-25 ユーザー指示「線全般、色が濃くて主張しすぎ」） */
:root{--rule:#D9D4CA}
.cv-mast,.pick,.cat-h,.toc,.toc a,.mag-intro,.sec,.tno,.running,.tbl th,.tbl td,.hub-card,.guide-link,.buy,.it,.cv-picks .pick{border-color:var(--rule)!important}
.toc{border-top:.5px solid var(--rule)}
.pick,.cat-h,.sec,.tno{border-top-width:.5px}
.cv-mast,.mag-intro,.running,.toc a{border-bottom-width:.5px}
.hub-card,.guide-link{border-width:.5px}
.btn.ghost{box-shadow:inset 0 0 0 .5px var(--muted)}
/* タイルの写真の下の線は無し（2026-10-25 ユーザー指示） */
.tno{border-top:0!important;padding-top:8px}
/* 写真の上の寸法の注記（何を基準に選ぶサイトかを写真で伝える） */
.cv-note{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 90%,transparent);font:500 .8rem/1.6 var(--serif)}
.cv-note b{font:300 1.7rem/1 var(--brand);letter-spacing:0}
/* スマホの最初の画面: 横書きの見出し＋何のサイトか、写真は小さめの正方形（2026-10-25 ユーザー指摘） */
.cv-mob{display:none}
@media (max-width:820px){
  .cv-mob{display:block;margin:4px 0 16px}
  .cv-mob-t{margin:0;font:400 2rem/1.4 var(--serif);letter-spacing:.12em}
  .cv-mob-s{margin:6px 0 0;font:500 .78rem var(--brand),var(--serif);letter-spacing:.2em;color:var(--moss)}
  .cv-spread{grid-template-columns:minmax(0,1fr)}
  .cv-vt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cv-photo img{aspect-ratio:1/1}
  .cv-no{font-size:2.8rem;left:-4px;top:-6px}
  .cv-note b{font-size:1.4rem}
}
@media (max-width:820px){.cv-photo img{aspect-ratio:auto!important;height:min(82vw,420px)!important;width:100%}}
/* 保存の表示中・検索中は表紙と目次を畳む */
html.filtering .cover,html.filtering .toc{display:none}
html.filtering .cat-h{margin-top:8px}
/* スマホでも縦書きの見出しを残す（2026-10-26 ユーザー指摘「縦書きが良い味」）。横書きは何のサイトかを伝える一行だけ */
@media (max-width:820px){
  .cv-mob-t{display:none}
  .cv-mob{margin:0 0 12px}
  .cv-spread{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .cv-vt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:clamp(1.5rem,6.4vw,2.1rem)}
  .cv-vt small{display:none}
  .cv-photo img{height:min(76vw,400px)!important}
}
/* 表紙のリード文は小さめに（2026-10-26 ユーザー指摘「字が大きすぎる」） */
.cv-lead{font-size:.86rem;line-height:2.1;letter-spacing:.04em}