/* ゆるっと住まい研究所：デザイン指針は _team\20261005-0948_競合と売れ筋リサーチ\04_デザイン設計.md（3章・5章） */
:root{
  --bg:#FFFDF8; --surface:#F6F1E9; --card:#FFFFFF; --text:#2F2A26; --text-sub:#5C544D;
  --brand:#2E6B5E; --brand-tint:#EEF5F2; --cta:#B8431B; --cta-hover:#963514; --price:#9A3412;
  --star:#A86A12; --note-bg:#FFF6DD; --focus:#1D5FA8; --line:#D9D2C7;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px;
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;letter-spacing:.02em}
img{max-width:100%;height:auto}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{line-height:1.4;text-wrap:balance;margin:0}
h1{font-size:22px}
h2{font-size:20px;border-left:4px solid var(--brand);padding-left:var(--s2);margin-top:var(--s5);margin-bottom:var(--s3)}
h3{font-size:18px;margin-top:var(--s4);margin-bottom:var(--s2)}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding-inline:var(--s3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ヘッダー・フッター */
.site-head{border-bottom:1px solid var(--line);background:var(--card)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:var(--s3)}
.logo{font-weight:700;font-size:18px;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:var(--s2)}
.logo svg{color:var(--brand)}
.head-nav{display:flex;gap:var(--s3);font-size:14px}
.head-nav a{color:var(--text-sub);text-decoration:none}
.site-foot{margin-top:var(--s6);border-top:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--text-sub)}
.site-foot .wrap{padding-block:var(--s4);display:grid;gap:var(--s2)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.site-foot a{color:var(--text-sub)}

/* パンくず */
.crumbs{font-size:14px;color:var(--text-sub);padding-block:var(--s2)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.crumbs li+li::before{content:"›";margin-right:var(--s1)}
.crumbs a{color:var(--text-sub)}
.crumbs li:last-child{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* トップ */
.hero{padding-block:var(--s4) var(--s3)}
.hero p{font-size:17px;margin:var(--s2) 0}
.chips{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);margin-inline:calc(var(--s3) * -1);padding-inline:var(--s3)}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;font-size:15px}
.chip[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
.section-title{font-size:18px;border:0;padding:0;margin:var(--s5) 0 var(--s3);display:flex;align-items:center;gap:var(--s2)}
.section-title::before{content:"";width:10px;height:10px;background:var(--brand);border-radius:2px}

/* 記事カード（一覧） */
.cards{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.acard{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);align-items:start;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:var(--s2)}
.acard img,.acard .ph{width:96px;height:72px;object-fit:contain;border-radius:8px;background:var(--surface)}
.acard .ph{display:grid;place-items:center;color:var(--brand)}
.acard h3{font-size:16px;margin:0 0 var(--s1);line-height:1.5}
.acard .meta{font-size:13px;color:var(--text-sub)}
.empty{padding:var(--s4);background:var(--surface);border-radius:12px;color:var(--text-sub)}
@media (min-width:768px){
  .cards--grid{grid-template-columns:repeat(3,1fr)}
  .cards--grid .acard{grid-template-columns:1fr}
  .cards--grid .acard img,.cards--grid .acard .ph{width:100%;height:160px}
}

/* 記事ページ */
.article-layout{display:grid;gap:var(--s4)}
.article{min-width:0;max-width:720px}
.pr{margin:var(--s3) 0;padding:var(--s2) var(--s3);background:var(--surface);border-radius:8px;color:var(--text-sub);font-size:16px}
.pr b{display:inline-block;margin-right:var(--s2);padding:0 var(--s2);border:1px solid var(--text-sub);border-radius:4px;font-size:14px}
.byline{font-size:14px;color:var(--text-sub);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-bottom:var(--s3)}
.byline a{color:var(--text-sub)}
.lead p{font-size:16px}

.conclusion{background:var(--brand-tint);border-left:4px solid var(--brand);border-radius:12px;padding:var(--s3);margin:var(--s4) 0}
.conclusion h2{border:0;padding:0;margin:0 0 var(--s3);font-size:18px}
.picks{display:grid;gap:var(--s3);list-style:none;margin:0;padding:0}
.pick{display:grid;grid-template-columns:72px 1fr;gap:var(--s3);background:var(--card);border-radius:8px;padding:var(--s3)}
.pick img{width:72px;height:72px;object-fit:contain}
.pick .label{font-size:13px;font-weight:700;color:var(--brand)}
.pick .pname{font-weight:700;line-height:1.5}
.pick .reason{font-size:14px;color:var(--text-sub);margin:var(--s1) 0 var(--s2)}
.pick .btn{grid-column:1/-1}
.to-table{display:inline-block;margin-top:var(--s3);font-size:15px}
@media (min-width:1024px){.picks{grid-template-columns:repeat(3,1fr)}.pick{grid-template-columns:1fr}.pick img{width:100%;height:120px}}

.toc{background:var(--surface);border-radius:12px;padding:var(--s3);margin:var(--s4) 0}
.toc summary{font-weight:700;cursor:pointer;min-height:32px}
.toc ol{margin:var(--s2) 0 0;padding-left:1.4em}
.toc li{margin:var(--s1) 0}

.points{counter-reset:pt;list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.points li{counter-increment:pt;position:relative;padding-left:44px}
.points li::before{content:counter(pt);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center}
.points h3{margin:0 0 var(--s1);font-size:17px}

.pro{background:var(--note-bg);border-radius:12px;padding:var(--s3);margin:var(--s4) 0}
.pro h2{border:0;padding:0;margin:0 0 var(--s2);font-size:18px;display:flex;align-items:center;gap:var(--s2)}
.pro ul{margin:0;padding-left:1.2em}

/* 比較表 */
.table-hint{font-size:14px;color:var(--text-sub);margin:0 0 var(--s2)}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.cmp-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cmp{border-collapse:separate;border-spacing:0;min-width:100%;font-size:14px;line-height:1.5}
.cmp th,.cmp td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;background:var(--card);text-align:left}
.cmp td{width:120px;min-width:120px}
.cmp tbody th,.cmp thead th:first-child{position:sticky;left:0;z-index:1;width:88px;min-width:88px;background:var(--brand-tint)}
.cmp thead th{background:var(--brand-tint);font-weight:700}
.cmp thead img{display:block;width:64px;height:64px;object-fit:contain;margin-bottom:var(--s1);background:#fff}
.cmp caption{caption-side:bottom;text-align:left;padding:8px;color:var(--text-sub)}
.cmp .btn{min-height:44px;font-size:14px;padding:0 var(--s2)}
.cmp .price{font-size:15px}
@media (min-width:768px){.table-hint{display:none}.cmp td{width:auto}}

/* 商品カード */
.products{display:grid;gap:var(--s4);list-style:none;margin:0;padding:0}
.pcard{background:var(--card);border-radius:12px;box-shadow:0 1px 3px rgba(47,42,38,.12);padding:var(--s3);display:grid;gap:var(--s2)}
.badges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.rank{background:var(--brand);color:#fff;border-radius:999px;padding:0 10px;font-size:14px;font-weight:700}
.tag{border:1px solid var(--brand);color:var(--brand);border-radius:999px;padding:0 10px;font-size:14px}
.brand{font-size:14px;color:var(--text-sub);margin:0}
.pcard h3{font-size:18px;margin:0}
.pmain{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);align-items:center}
.pmain img{width:120px;height:120px;object-fit:contain;background:#fff}
.price{font-size:20px;font-weight:700;color:var(--price);font-variant-numeric:tabular-nums}
.when,.review-src{font-size:14px;color:var(--text-sub);display:block}
.stars{color:var(--star);font-weight:700}
.features{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.features li{padding-left:24px;position:relative}
.features li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.forwho{background:var(--brand-tint);border-radius:8px;padding:var(--s2) var(--s3);font-size:15px}
.forwho b{display:block;font-size:13px;color:var(--brand)}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{border-top:1px solid var(--line);padding:6px 4px;text-align:left;vertical-align:top}
.specs th{width:7em;color:var(--text-sub);font-weight:400}
@media (min-width:768px){.pmain{grid-template-columns:160px 1fr}.pmain img{width:160px;height:160px}}

/* ボタン */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;padding:0 var(--s3);border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;text-align:center;line-height:1.3}
.btn--cta{background:var(--cta);color:#fff}
.btn--cta:hover{background:var(--cta-hover)}
.btn--sub{border:2px solid var(--brand);color:var(--brand);background:var(--card)}
.btns{display:grid;gap:var(--s2)}

/* Q&A・まとめ・注記 */
.faq details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;gap:var(--s2)}
.faq summary::before{content:"Q";color:var(--brand);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq .a{margin-top:var(--s2);padding-left:calc(1em + var(--s2))}
.summary-list{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:var(--s3)}
.summary-list li{display:grid;gap:var(--s2)}
.note{font-size:14px;color:var(--text-sub);background:var(--surface);border-radius:8px;padding:var(--s3);margin-top:var(--s5)}
.note p:last-child{margin:0}

/* 目次（PC） */
.side{display:none}
@media (min-width:1024px){
  h1{font-size:28px} h2{font-size:24px} h3{font-size:20px} body{font-size:17px}
  .article-layout{grid-template-columns:minmax(0,720px) 300px;justify-content:space-between}
  .side{display:block}
  .side .toc{position:sticky;top:16px;margin-top:0}
  .article .toc{display:none}
}

/* 固定ページ */
.page{max-width:720px;padding-bottom:var(--s5)}
.page h1{margin:var(--s4) 0 var(--s3)}
.page ul{padding-left:1.2em}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.cons{border:1px solid var(--line);border-radius:8px;padding:var(--s2) var(--s3);font-size:15px}
.cons b{display:block;font-size:13px;color:var(--text-sub)}
.cons ul{margin:0;padding-left:1.2em}
.method{font-size:14px;color:var(--text-sub);border-left:3px solid var(--line);padding-left:var(--s2)}
.note ul{margin:var(--s1) 0 0;padding-left:1.2em}