:root{
  color-scheme: only light;
  --bg:#EAF1EE; --surface:#FFFFFF; --ink:#1E3638; --muted:#5B7273;
  --mint:#7DB9A5; --mint-soft:#D4E9E1; --butter:#F3C44F; --line:#C9DAD3;
  --fridge:#FBFDFC; --fridge-edge:#B7CCC4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  line-height:1.75; font-size:16px;
}
.wrap{max-width:1040px; margin:0 auto; padding:24px 20px 64px}
.site{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px}
.site-name{font-weight:700; font-size:.95rem}
.pr{display:inline-block; font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 6px}

.tabs{display:flex; gap:6px; overflow-x:auto; padding:4px; margin:0 0 26px; background:var(--surface); border:1.5px solid var(--line); border-radius:14px; width:max-content; max-width:100%}
.tabs button{
  font:inherit; font-size:.95rem; cursor:pointer; border:0; background:transparent; color:var(--ink);
  padding:8px 16px; border-radius:10px; white-space:nowrap;
}
.tabs button[aria-selected="true"]{background:var(--mint-soft); font-weight:700}
.tabs button:focus-visible{outline:3px solid var(--butter); outline-offset:1px}

h1{font-size:clamp(1.7rem,4.6vw,2.6rem); line-height:1.3; font-weight:900; margin:0 0 8px; letter-spacing:.01em}
.lead{color:var(--muted); margin:0 0 28px; max-width:36em}

.layout{display:grid; grid-template-columns:1fr 300px; gap:36px; align-items:start}
@media (max-width:820px){ .layout{grid-template-columns:1fr} .side{order:-1} }

fieldset{border:0; margin:0 0 26px; padding:0}
legend{font-weight:700; font-size:1.05rem; margin-bottom:10px; padding:0}
legend small{display:block; font-weight:400; color:var(--muted); font-size:.85rem}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts label{
  cursor:pointer; padding:9px 16px; border-radius:999px; background:var(--surface);
  border:1.5px solid var(--line); font-size:.95rem; transition:background .15s,border-color .15s;
}
.opts label:hover{border-color:var(--mint)}
.opts input:checked + label{background:var(--mint-soft); border-color:var(--mint); font-weight:700}
.opts input:focus-visible + label{outline:3px solid var(--butter); outline-offset:2px}
.progress{color:var(--muted); font-size:.9rem; margin:0 0 20px}

/* Side visuals */
.side{position:sticky; top:calc(env(safe-area-inset-top,0px) + 20px)}
@media (max-width:820px){ .side{position:static} }
.visual{min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center}
.fill{position:absolute; left:0; right:0; bottom:0; height:0; transition:height .5s ease; background:var(--mint-soft)}
.fill.veg{background:#B5D8CB; background:color-mix(in srgb, var(--mint) 45%, var(--surface))}
.fill.frz{background:#F8DE9E; background:color-mix(in srgb, var(--butter) 55%, var(--surface))}
.fill.rice-fill{background:#FBEDC7; background:color-mix(in srgb, var(--butter) 30%, var(--surface))}

.fridge{width:200px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:22px 22px 14px 14px; padding:10px; position:relative}
.compart{position:relative; border:2px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface)}
.compart + .compart{margin-top:8px}
.c-top{height:150px} .c-mid{height:46px} .c-bot{height:70px}
.shelf{position:absolute; left:8px; right:8px; height:2px; background:var(--line)}
.handle{position:absolute; right:-9px; top:36px; width:6px; height:60px; border-radius:4px; background:var(--fridge-edge)}
.feet{display:flex; justify-content:space-between; width:170px}
.feet span{width:18px; height:8px; background:var(--fridge-edge); border-radius:0 0 4px 4px}

.rice{width:200px}
.rice-lid{width:176px; height:50px; margin:0 auto -3px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:90px 90px 10px 10px; position:relative; z-index:1}
.rice-lid::after{content:""; position:absolute; left:50%; top:-12px; width:40px; height:12px; margin-left:-20px; background:var(--fridge-edge); border-radius:8px 8px 0 0}
.rice-body{position:relative; height:150px; background:var(--surface); border:3px solid var(--fridge-edge); border-radius:12px 12px 44px 44px; overflow:hidden}
.rice-panel{position:absolute; left:50%; bottom:22px; width:70px; height:26px; margin-left:-35px; border-radius:8px; background:var(--fridge); border:2px solid var(--fridge-edge)}

.mw{width:250px; height:160px; display:flex; gap:10px; padding:12px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:16px}
.mw-win{flex:1; position:relative; overflow:hidden; border:2px solid var(--line); border-radius:8px; background:var(--surface)}
.mw-panel{width:42px; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:8px}
.mw-panel span{width:22px; height:22px; border-radius:50%; border:2px solid var(--fridge-edge)}
.mw-panel span:first-child{width:30px; height:12px; border-radius:3px}

.dw{width:220px; padding:10px 12px 12px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:16px}
.dw-top{display:flex; justify-content:flex-end; gap:6px; height:20px; align-items:center; margin-bottom:8px}
.dw-top span{width:12px; height:12px; border-radius:50%; background:var(--fridge-edge)}
.dw-win{position:relative; height:150px; overflow:hidden; border:2px solid var(--line); border-radius:10px; background:var(--surface)}
.rack{position:absolute; left:10px; right:10px; height:0; border-top:2px dashed var(--line); z-index:1}

.readout{text-align:center; margin-top:16px}
.readout b{font-size:3rem; font-weight:900; line-height:1; font-variant-numeric:tabular-nums}
.readout span{font-size:1.2rem; font-weight:700; margin-left:2px}
.readout p{margin:4px 0 0; color:var(--muted); font-size:.85rem}

/* Result */
.result{background:var(--surface); border:2px solid var(--mint); border-radius:16px; padding:24px; margin-top:8px}
.result[hidden]{display:none}
.result h2{font-size:1.4rem; margin:0 0 6px; line-height:1.4}
.result .type{color:var(--muted); margin:0 0 18px}
.result h3{font-size:1rem; margin:18px 0 6px}
.result ul{margin:0; padding-left:1.2em}
.result li{margin-bottom:4px}
.shop{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.shop a{text-decoration:none; font-weight:700; padding:11px 20px; border-radius:10px; background:var(--butter); color:#2A2410; border:2px solid transparent}
.shop a.alt{background:transparent; color:var(--ink); border-color:var(--line)}
.shop a:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.note{font-size:.8rem; color:var(--muted); margin-top:14px}
footer{margin-top:48px; font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:16px}
@media (prefers-reduced-motion: reduce){ .fill{transition:none} }

/* ---- washer ---- */
.wm{width:210px; height:240px; display:flex; flex-direction:column; align-items:center; padding:10px 14px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:16px}
.wm-top{width:100%; height:30px; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--line); margin-bottom:20px}
.wm-top span{width:18px; height:18px; border-radius:50%; border:2px solid var(--fridge-edge)}
.wm-top i{width:60px; height:12px; border-radius:3px; background:var(--fridge-edge)}
.wm-door{position:relative; width:150px; height:150px; border-radius:50%; border:7px solid var(--fridge-edge); overflow:hidden; background:var(--surface)}

/* ---- site chrome ---- */
.header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.logo{font-weight:900; color:var(--ink); text-decoration:none; font-size:1rem}
.nav{display:flex; gap:4px; overflow-x:auto; max-width:100%; padding:4px; background:var(--surface); border:1.5px solid var(--line); border-radius:14px}
.nav a{color:var(--ink); text-decoration:none; padding:7px 14px; border-radius:10px; white-space:nowrap; font-size:.92rem}
.nav a[aria-current="page"]{background:var(--mint-soft); font-weight:700}
.nav a:focus-visible,.logo:focus-visible{outline:3px solid var(--butter); outline-offset:2px}
.crumbs{font-size:.82rem; color:var(--muted); margin:0 0 14px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"›"; margin-right:6px}
.crumbs a{color:var(--muted)}
.pr-line{font-size:.82rem; color:var(--muted); margin:0 0 14px}

/* ---- article ---- */
.article{max-width:40em; margin-top:56px}
.article h2{font-size:1.35rem; line-height:1.45; margin:40px 0 10px}
.article p{margin:0 0 14px}
.article details{background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px}
.article summary{cursor:pointer; font-weight:700}
.article details p{margin:10px 0 0}
.related{margin-top:48px}
.related h2{font-size:1.15rem; margin:0 0 12px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.card{display:block; text-decoration:none; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:16px}
.card:hover{border-color:var(--mint)}
.card:focus-visible{outline:3px solid var(--butter); outline-offset:2px}
.card b{display:block; font-size:1.05rem; margin-bottom:4px}
.card span{color:var(--muted); font-size:.88rem; line-height:1.6; display:block}
footer a{color:var(--muted)}
footer p{margin:4px 0}
.prose{max-width:40em}
.prose h2{font-size:1.2rem; margin:32px 0 8px}

/* ---- vacuum ---- */
.vc{position:relative; width:130px; height:260px}
.vc-handle{position:absolute; left:46px; top:0; width:38px; height:44px; border:3px solid var(--fridge-edge); border-radius:16px 16px 4px 4px}
.vc-body{position:absolute; left:38px; top:40px; width:54px; height:96px; overflow:hidden; background:var(--surface); border:3px solid var(--fridge-edge); border-radius:14px}
.vc-pole{position:absolute; left:61px; top:134px; width:8px; height:104px; background:var(--fridge-edge); border-radius:4px}
.vc-head{position:absolute; left:15px; bottom:0; width:100px; height:24px; background:var(--fridge); border:3px solid var(--fridge-edge); border-radius:10px}

/* ---- わたしが使っている ---- */
.mine{margin-top:56px; max-width:44em; background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:26px}
.mine-label{display:inline-block; margin:0 0 6px; font-size:.82rem; font-weight:700; color:var(--ink); background:var(--mint-soft); border-radius:999px; padding:2px 12px}
.mine h2{font-size:1.35rem; margin:0 0 10px; line-height:1.45}
.mine h3{font-size:1rem; margin:18px 0 6px}
.mine p{margin:0 0 10px}
.mine ul{margin:0; padding-left:1.2em}
.mine-name{font-weight:700; font-size:1.1rem}
.mine-name span{font-weight:400; font-size:.85rem; color:var(--muted); margin-left:10px}
.mine-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin:12px 0}
.mine-photos img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:block}
.photo-ph{aspect-ratio:4/3; border:2px dashed var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; text-align:center; padding:8px}
.gb{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){ .gb{grid-template-columns:1fr} }
.cand{list-style:none; padding:0 !important}
.cand li{border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px}
.cand b{display:block}
.cand span{color:var(--muted); font-size:.92rem}
.mine-foot{font-size:.85rem; color:var(--muted); margin-top:12px}
.example-badge{display:inline-block; font-size:.8rem; font-weight:700; color:#8A1C1C; background:#FCE4E4; border-radius:6px; padding:2px 10px; margin:0 0 12px}
.example-badge.small{margin:0 8px 8px 0}
.home-list{display:grid; gap:14px; max-width:44em}
.home-item{display:block; text-decoration:none; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:20px}
.home-item:hover{border-color:var(--mint)}
.home-item:focus-visible{outline:3px solid var(--butter); outline-offset:2px}
.home-item h2{font-size:1.2rem; margin:4px 0 6px}
.home-item p{margin:0 0 6px}
.tag{display:inline-block; font-size:.78rem; font-weight:700; background:var(--mint-soft); border-radius:999px; padding:1px 10px}
.tag.wait{background:#FAE6AE; background:color-mix(in srgb, var(--butter) 35%, var(--surface))}
.more{color:var(--muted); font-size:.88rem}

/* ---- おすすめ機種 ---- */
.picks{margin-top:18px}
.pick-grid{display:grid; gap:10px}
.pick{display:grid; grid-template-columns:1fr 132px; gap:14px; align-items:center; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg)}
.pick b{display:block; font-size:1rem; line-height:1.5}
.pick-spec{display:block; font-size:.85rem; color:var(--muted); line-height:1.6}
.pick-spec em{font-style:normal; font-weight:700; color:var(--ink); margin-left:8px; white-space:nowrap}
.pick p{font-size:.9rem; line-height:1.65; margin:6px 0 0}
.pick-btns{display:flex; flex-direction:column; gap:6px}
.pick-btns a{text-align:center; text-decoration:none; font-weight:700; font-size:.88rem; padding:9px 6px; border-radius:9px; background:var(--butter); color:#2A2410; border:2px solid transparent; white-space:nowrap}
.pick-btns a.alt{background:transparent; color:var(--ink); border-color:var(--line)}
.pick-btns a:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
@media (max-width:560px){
  .pick{grid-template-columns:1fr}
  .pick-btns{flex-direction:row}
  .pick-btns a{flex:1}
  .pick-spec em{display:block; margin-left:0}
}
.pick-note{font-size:.8rem; color:var(--muted); margin:10px 0 0; line-height:1.6}
.pick-note span{display:inline-block; margin-left:8px; font-weight:700}

/* ---- 暮らしの道具 ---- */
.goods-main{max-width:46em}
.byline{font-size:.82rem; color:var(--muted); margin:-18px 0 24px}
.items{display:grid; gap:16px; margin:24px 0}
.item{display:grid; grid-template-columns:200px 1fr; gap:20px; background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:20px}
.item.no-photo{grid-template-columns:1fr}
.item-photo{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; display:flex}
.item h2{font-size:1.2rem; line-height:1.5; margin:6px 0 6px; display:flex; gap:10px; align-items:baseline}
.item .num{flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.8em; height:1.8em; border-radius:50%; background:var(--mint-soft); font-size:.85rem; font-weight:900}
.item p{margin:0 0 8px}
.item-period{font-size:.8rem; color:var(--muted); margin-left:8px}
.gb.small{gap:12px; margin:6px 0 4px}
.gb.small h4{font-size:.85rem; margin:0 0 2px}
.gb.small ul{margin:0; padding-left:1.1em; font-size:.9rem}
.shop.small{margin-top:12px}
.shop.small a{padding:8px 16px; font-size:.9rem}
.card-cat{font-size:.75rem !important; font-weight:700; color:var(--ink) !important; background:var(--mint-soft); border-radius:999px; padding:1px 10px; display:inline-block !important; margin-bottom:6px}
.card.is-soon{opacity:.6}
@media (max-width:620px){ .item{grid-template-columns:1fr} .item-photo{aspect-ratio:4/3} }
.article a, .lead a, .related p a{color:var(--ink); text-decoration-color:var(--mint); text-decoration-thickness:2px; text-underline-offset:3px}
@media (max-width:620px){
  h1 br{display:none}
  .nav{flex-wrap:wrap; overflow:visible}
}
.history{margin-top:28px; font-size:.88rem}
.history ul{margin:8px 0 0; padding-left:1.1em}
.history time{font-weight:700; margin-right:10px}
.logo small{display:block; font-size:.72rem; font-weight:500; color:var(--muted); margin-top:1px; letter-spacing:.02em}