/* 自前サイト。地は胡粉、文字は墨、差し色は 1 か所 */
:root{--bg:#f6f3ec;--ink:#3a3a36;--sub:#a09c92;--faint:rgba(58,58,54,.12);--accent:#c9a24a;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--serif:"Shippori Mincho","Yu Mincho",serif;--latin:"Cormorant Garamond",serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:300 15px/2.1 var(--sans);letter-spacing:.08em;padding:0 20px 96px}
a{color:inherit;text-decoration:none}
header.top{max-width:960px;margin:0 auto;padding:44px 0 40px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.logo{font:400 17px var(--serif);letter-spacing:.4em;color:var(--ink)}
.logo small{font:400 10px var(--latin);letter-spacing:.3em;color:var(--sub);margin-left:14px;text-transform:lowercase}
.tagline{display:block;font:300 11px var(--sans);letter-spacing:.2em;color:var(--sub);margin-top:6px}
.pr-site{font-size:11px;color:var(--sub);letter-spacing:.1em;opacity:.8}
main{max-width:960px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px 32px}
.tile{position:relative;display:block}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.tile .mark{position:absolute;left:12px;top:10px;font:400 14px var(--serif);color:var(--sub);letter-spacing:.3em}
.mark i{font:400 10px var(--sans);letter-spacing:.2em;margin-left:10px;color:var(--sub);font-style:normal;border:1px solid var(--faint);padding:0 5px}
.tile .tname{display:block;font-size:13px;margin-top:8px;color:var(--ink)}
/* 画像なしの投稿：一覧では 4:5 の静かな札、記事では見出しの帯だけ（本文と商品が主役） */
.tile .textcard{aspect-ratio:4/5;background:var(--bg);border:1px solid var(--faint);display:flex;align-items:center;justify-content:center;padding:12%}
.tile .textcard .lead{font:400 18px/1.9 var(--serif);letter-spacing:.15em;color:var(--ink);text-align:left}
.post .textcard{grid-column:1/-1;position:relative;border-top:1px solid var(--faint);border-bottom:1px solid var(--faint);padding:28px 0 22px}
.post .textcard .mark{font:400 14px var(--serif);color:var(--sub);letter-spacing:.3em;display:block;margin-bottom:10px}
.post .textcard .lead{font:400 24px/1.8 var(--serif);letter-spacing:.2em;color:var(--ink)}
.post.noimg{grid-template-columns:1fr;max-width:640px}
.post{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.post{grid-template-columns:1fr 1fr}}
.hero{width:100%;display:block}
.text p{margin-bottom:10px}
.product{border-top:1px solid var(--faint);padding:16px 0}
.product .brand{display:block;font:400 13px var(--latin);letter-spacing:.3em;color:var(--sub);text-transform:uppercase}
.product .name{display:block;font:400 18px var(--serif);letter-spacing:.1em;margin:4px 0}
.product .facts{display:block;font-size:13px;color:var(--sub)}
.rate{list-style:none;margin:8px 0}
.rate li{display:flex;justify-content:space-between;max-width:240px;font-size:13px;color:var(--sub);padding:4px 0;border-top:1px solid var(--faint)}
.sc{display:inline-flex;gap:5px}.sc i{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);opacity:.6;display:inline-block}.sc i.f{background:var(--ink);opacity:1}
.go{display:inline-block;margin-top:10px;padding:6px 18px;border:1px solid var(--ink);font-size:13px;letter-spacing:.2em}
.go:hover{background:var(--ink);color:var(--bg)}
.src{display:block;font-size:11px;color:var(--sub);margin-top:6px}
.tags,.date{font-size:12px;color:var(--sub);margin-top:14px}
footer{max-width:960px;margin:96px auto 0;border-top:1px solid var(--faint);padding-top:24px;font-size:11px;line-height:2;color:var(--sub)}
footer .credit a{color:var(--sub);text-decoration:underline}