:root{
  --sumi:#12100e; --sumi-2:#1a1714; --sumi-3:#241f1b; --sumi-line:#3a322b;
  --washi:#ebe4d6; --washi-2:#f3eee3; --washi-3:#ded4c0;
  --kin:#b8945a; --kin-hi:#d8b878; --kin-dim:#7d6437; --shu:#9c3a2e;
  --ink:#221e1a; --ink-mid:#5d5347; --on-sumi:#ded5c6; --on-sumi-mid:#9a9084;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","MS PMincho",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
  --wrap:1120px; --gut:clamp(18px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--washi);color:var(--ink);font-family:var(--mincho);
  font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased}
a{color:#6d5326;text-decoration:none;border-bottom:1px solid rgba(109,83,38,.28)}
a:hover{color:var(--shu);border-bottom-color:var(--shu)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

.top{background:var(--sumi);color:var(--on-sumi);border-bottom:1px solid var(--sumi-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;flex-wrap:wrap}
.top a{color:var(--on-sumi);border:0}
.top .brand{font-size:15px;letter-spacing:.22em}
.top .brand small{display:block;font-family:var(--gothic);font-size:9.5px;
  letter-spacing:.3em;color:var(--kin);margin-top:2px}
.top nav{display:flex;gap:18px;font-family:var(--gothic);font-size:12px;letter-spacing:.12em}
.top nav a:hover{color:var(--kin-hi)}

.hd{background:var(--sumi-2);color:var(--on-sumi);padding:clamp(34px,6vw,64px) 0 clamp(28px,5vw,48px);
  border-bottom:1px solid var(--sumi-line)}
.hd h1{margin:0 0 10px;font-size:clamp(23px,3.6vw,34px);font-weight:600;letter-spacing:.06em;color:#f0e9db}
.hd p{margin:0;color:var(--on-sumi-mid);font-size:13.5px;line-height:2}
.eyebrow{font-family:var(--gothic);font-size:10.5px;letter-spacing:.3em;color:var(--kin);
  margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor}

main{padding:clamp(28px,5vw,56px) 0 72px}
.panel{background:var(--washi-2);border:1px solid var(--washi-3);padding:clamp(16px,3vw,26px);
  margin:0 0 26px}
.filters{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  font-family:var(--gothic);font-size:13px}
.filters label{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--ink-mid);margin-bottom:5px}
.filters input,.filters select{width:100%;padding:9px 11px;border:1px solid var(--washi-3);
  background:#fff;font:inherit;font-family:var(--gothic);color:var(--ink);border-radius:0}
.filters input:focus,.filters select:focus{outline:2px solid var(--kin);outline-offset:-2px}
.count{font-family:var(--gothic);font-size:12px;letter-spacing:.1em;color:var(--ink-mid);
  margin:14px 0 0}
.count b{color:var(--shu);font-size:15px}

.list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:1px;background:var(--washi-3);
  border:1px solid var(--washi-3)}
.list li{background:var(--washi-2);padding:13px clamp(12px,2vw,18px);display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap}
.list .nm{font-size:17px;letter-spacing:.03em}
.list .meta{font-family:var(--gothic);font-size:11.5px;color:var(--ink-mid);letter-spacing:.06em}
.badge{font-family:var(--gothic);font-size:10px;letter-spacing:.1em;padding:2px 7px;
  border:1px solid var(--kin-dim);color:var(--kin-dim);white-space:nowrap}
.badge.mj{background:var(--kin);border-color:var(--kin);color:#241f1b}
.badge.src{border-color:#a99a80;color:#7a6d58}
.more{display:block;width:100%;margin:22px 0 0;padding:13px;text-align:center;
  font-family:var(--gothic);font-size:12.5px;letter-spacing:.16em;background:var(--sumi);
  color:var(--on-sumi);border:0;cursor:pointer}
.more:hover{background:var(--sumi-3)}

.dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0}
.dl dt{font-family:var(--gothic);font-size:11px;letter-spacing:.16em;color:var(--ink-mid);
  padding:11px 22px 11px 0;border-bottom:1px solid var(--washi-3);white-space:nowrap}
.dl dd{margin:0;padding:11px 0;border-bottom:1px solid var(--washi-3);font-size:15px}
@media(max-width:560px){.dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:0;border:0}.dl dd{padding-top:2px}}

h2.sec{font-size:19px;letter-spacing:.1em;margin:44px 0 16px;padding-bottom:9px;
  border-bottom:1px solid var(--washi-3);font-weight:600}
.src-list{list-style:none;margin:0;padding:0}
.src-list li{padding:13px 0;border-bottom:1px solid var(--washi-3)}
.src-list .sname{font-size:15px}
.src-list .lic{font-family:var(--gothic);font-size:11px;color:var(--ink-mid);letter-spacing:.06em;
  display:block;margin-top:3px}
.cta{background:var(--sumi);color:var(--on-sumi);padding:clamp(18px,3vw,26px);margin:36px 0 0}
.cta h3{margin:0 0 8px;font-size:16px;letter-spacing:.08em;color:var(--kin-hi)}
.cta p{margin:0 0 16px;font-size:13.5px;color:var(--on-sumi-mid);line-height:2}
.btn{display:inline-block;background:var(--kin);color:#241f1b;padding:11px 26px;
  font-family:var(--gothic);font-size:12.5px;letter-spacing:.14em;border:0}
.btn:hover{background:var(--kin-hi);color:#241f1b}
.near{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.near li a{display:inline-block;font-family:var(--gothic);font-size:12px;padding:6px 12px;
  border:1px solid var(--washi-3);background:var(--washi-2);border-bottom:1px solid var(--washi-3)}
.crumb{font-family:var(--gothic);font-size:11px;letter-spacing:.1em;color:var(--on-sumi-mid);margin:0 0 12px}
.crumb a{color:var(--kin)}

/* みんなの投稿 */
.posts{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.post{background:var(--washi-2);border:1px solid var(--washi-3);padding:clamp(14px,2.5vw,20px)}
.post .ph{margin:0 0 12px;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.post .ph a{border:0;display:block}
.post .ph img{width:100%;height:auto;display:block;background:var(--washi-3)}
.post .bd{margin:0;white-space:pre-wrap;font-size:15px;line-height:1.95}
.post .ft{font-family:var(--gothic);font-size:11px;letter-spacing:.06em;color:var(--ink-mid);
  margin:12px 0 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.post .who{color:var(--ink);font-size:12px}
.post .tag{border:1px solid var(--washi-3);padding:2px 8px}
.posts-note{font-family:var(--gothic);font-size:11.5px;color:var(--ink-mid);margin:14px 0 0}
footer{background:var(--sumi);color:var(--on-sumi-mid);padding:38px 0;font-size:12px;line-height:2.1}
footer a{color:var(--kin)}
footer .lic{font-family:var(--gothic);font-size:11px;line-height:2;margin:14px 0 0;color:#7d7468}