/* 松風 — 淡彩水墨 × 侘び寂び
   生成りの紙・墨・ほんの少しの朱。罫は髪の毛ほどの線だけ、箱も影も角丸も使わない。余白で見せる。 */
:root{
  --paper:#f3eee3; --paper2:#ebe5d7; --ink:#26231f; --ink2:#5f5a52; --ink3:#8f887c;
  --line:rgba(38,35,31,.14); --line2:rgba(38,35,31,.28); --shu:#a63d2f; --moss:#4a5a46;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --fude:"Yuji Syuku","Shippori Mincho",serif;
  --w:1080px; --tw:700px;
}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-weight:400;line-height:1.95;-webkit-font-smoothing:antialiased;letter-spacing:.02em}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .28 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
a:hover{color:var(--shu)}
p{margin:0 0 1em}
h1,h2,h3,.mei,.brand{font-family:var(--mincho);font-weight:600;letter-spacing:.08em;line-height:1.35}
h1{font-size:2rem;margin:0 0 .4em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
main{max-width:var(--w);margin:0 auto;padding:0 28px 72px}
small,.muted{color:var(--ink3)}
.lead{color:var(--ink2);max-width:var(--tw);font-size:.98rem}
.crumb{font-size:.82rem;color:var(--ink3);letter-spacing:.08em;margin:22px 0 8px}
.crumb a:hover{color:var(--shu)}

/* ヘッダ・フッタ */
.site-head{display:flex;align-items:center;justify-content:space-between;max-width:var(--w);margin:0 auto;padding:20px 28px 16px;border-bottom:1px solid var(--line)}
.site-head .brand{display:flex;align-items:baseline;gap:.8em;font-family:var(--fude);font-weight:400;font-size:1.55rem;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.brand small{font-family:var(--mincho);font-weight:500;font-size:.68rem;letter-spacing:.18em;color:var(--ink3)}
.site-head nav a{margin-left:24px;font-size:.9rem;letter-spacing:.14em;color:var(--ink2);white-space:nowrap}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--line2)}
.site-foot{max-width:var(--w);margin:24px auto 0;padding:26px 28px 56px;border-top:1px solid var(--line);color:var(--ink3);font-size:.8rem;letter-spacing:.04em}
.site-foot p{margin:.25em 0}
.site-foot .brand{font-family:var(--fude);font-size:1.1rem;color:var(--ink2);margin-bottom:.6em;display:flex;align-items:baseline;gap:.8em}

/* 節の見出し: 小さく・字間広く・朱の小さな印 */
.sec{margin-top:64px}
.sec-h{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;font-size:1.05rem;letter-spacing:.2em;font-weight:600}
.sec-h::before{content:"";width:7px;height:7px;background:var(--shu);align-self:center;opacity:.9}
.sec-h small{font-family:var(--gothic);font-weight:400;font-size:.78rem;letter-spacing:.1em;color:var(--ink3)}
.more{margin:22px 0 0;font-size:.9rem;letter-spacing:.06em}
.more a{border-bottom:1px solid var(--line2);padding-bottom:1px;margin-right:1.4em}
.more a:hover{border-color:var(--shu)}

/* 今日: 絵の上に、きょうの銘 */
.hero{max-width:var(--w);margin:24px auto 0;padding:0 28px}
.hero .art{position:relative;aspect-ratio:3/2;background:var(--paper2) center right/cover no-repeat;overflow:hidden}
.hero .txt{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:54%}
.hero .date{font-family:var(--mincho);font-size:.95rem;letter-spacing:.3em;color:var(--ink2);margin:0 0 .2em;white-space:nowrap}
.hero h1{font-size:4.8rem;font-weight:700;letter-spacing:.14em;margin:0;line-height:1.1;color:#1f1c18}
.hero h1 a:hover{color:#1f1c18}
.hero .yomi{display:block;font-family:var(--gothic);font-weight:400;font-size:.95rem;letter-spacing:.4em;color:var(--ink2);margin:.6em 0 0}
.hero .kou{font-family:var(--mincho);font-size:1.08rem;letter-spacing:.14em;margin:1.2em 0 0;color:#3b352f}
.hero .kou b{color:var(--shu);font-weight:600}
.hero .kou span{display:block;font-family:var(--gothic);font-size:.82rem;letter-spacing:.1em;color:var(--ink2);margin-top:.2em}
.datebar{display:flex;align-items:center;justify-content:flex-end;gap:10px;max-width:var(--w);margin:10px auto 0;padding:0 28px;font-size:.8rem;color:var(--ink3);letter-spacing:.06em}
.datebar input{font:inherit;color:var(--ink2);padding:2px 4px;border:0;border-bottom:1px solid var(--line2);background:transparent}
.datebar button{font:inherit;color:var(--ink2);padding:2px 0;border:0;border-bottom:1px solid var(--line2);background:transparent;cursor:pointer;letter-spacing:.06em}
.datebar button:hover,.datebar input:hover{color:var(--shu);border-color:var(--shu)}

/* きょうの三つ */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.pick{position:relative;padding:22px 0 20px;border-top:1px solid var(--line2)}
.pick .n{position:absolute;right:0;top:16px;font-family:var(--mincho);color:var(--shu);font-size:1.15rem;opacity:.85}
.pick h3{margin:0 0 10px;font-weight:600}
.pick .mei{font-size:2.3rem;letter-spacing:.1em;display:block;line-height:1.2}
.pick .yomi{font-family:var(--gothic);font-size:.82rem;letter-spacing:.24em;color:var(--ink2);font-weight:400}
.pick p{margin:.55em 0;font-size:.9rem}
.pick .why{padding:2px 0 2px 14px;border-left:2px solid var(--ink);font-size:.88rem;color:#3b352f}
.pick .why b{display:block;font-weight:600;letter-spacing:.14em;color:var(--shu);font-size:.72rem;margin-bottom:.1em}
.pick .lbl{font-size:.72rem;letter-spacing:.16em;color:var(--ink3);margin-right:.6em}
.picks.small .pick .mei{font-size:1.5rem}
.picks.small .pick{padding-top:16px}

/* 他の候補: 二列の静かな一覧 */
.rank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:1px solid var(--line2)}
.rank li{padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.7}
.rank .mei{font-size:1.15rem;letter-spacing:.08em}
.rank .yomi{color:var(--ink2);font-size:.8rem;margin-left:8px;letter-spacing:.14em}
.rank .tag{float:right;font-size:.74rem;letter-spacing:.1em;color:var(--ink3);margin-top:.35em}
.rank .tag.hit{color:var(--shu)}
.rank small{display:block;color:var(--ink2);font-size:.8rem;line-height:1.6;margin-top:1px}

/* 今月・行事 */
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:0 48px}
.two>div{border-top:1px solid var(--line2);padding-top:18px}
.two .sec-h{margin-bottom:12px}
.dl{margin:0;display:grid;grid-template-columns:7.5em 1fr;gap:4px 14px;font-size:.9rem}
.dl dt{color:var(--ink3);letter-spacing:.12em}.dl dd{margin:0}
.hito{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line2);font-size:.9rem;color:#3b352f}
.gy{list-style:none;margin:0;padding:0}
.gy li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.gy li span{color:var(--ink3);font-size:.8rem;letter-spacing:.04em;text-align:right}
.gy li.now b{color:var(--shu)}
.gy b{font-weight:500}

/* 辞典 */
.search{margin:26px 0 8px;display:flex;align-items:baseline;gap:14px;max-width:var(--tw)}
.search input{flex:1;font:inherit;font-size:1.05rem;padding:8px 2px;border:0;border-bottom:1px solid var(--line2);background:transparent;color:var(--ink);letter-spacing:.04em}
.search input:focus{outline:0;border-color:var(--ink)}
.search span{color:var(--ink3);font-size:.82rem;min-width:3em}
.tabs{display:flex;flex-wrap:wrap;margin:10px 0 0}
.tabs a{font-family:var(--mincho);font-size:.9rem;letter-spacing:.1em;padding:4px 12px 4px 0;margin-right:12px;color:var(--ink2);border-bottom:1px solid transparent}
.tabs a:hover{color:var(--shu);border-color:var(--shu)}
.group{margin-top:48px}
.group h2{font-size:1.15rem;letter-spacing:.16em;margin:0 0 6px;display:flex;align-items:baseline;gap:12px}
.group h2 small{font-family:var(--gothic);font-size:.78rem;letter-spacing:.1em;color:var(--ink3)}
.mei-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line2)}
.mei-item{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:0 20px}
.mei-item a .mei{font-size:1.25rem;letter-spacing:.1em}
.mei-item a:hover .mei{color:var(--shu)}
.mei-item a .yomi{color:var(--ink2);font-size:.8rem;margin-left:10px;letter-spacing:.16em}
.mei-item .meta{color:var(--ink3);font-size:.76rem;letter-spacing:.06em;align-self:center}
.mei-item .imi{grid-column:1/3;margin:0;color:var(--ink2);font-size:.86rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 1銘1ページ・月ページの上の絵 */
.strip{max-width:var(--w);margin:20px auto 0;padding:0 28px}
.strip div{height:220px;background:var(--paper2) center right/cover no-repeat}
.strip.sm div{height:160px}
.mei-page{max-width:var(--tw)}
.mei-page h1{margin:.2em 0 .2em}
.mei-page h1 .mei{font-size:3.4rem;letter-spacing:.14em;font-weight:700}
.mei-page h1 .yomi{display:block;font-family:var(--gothic);font-weight:400;font-size:.95rem;letter-spacing:.4em;color:var(--ink2);margin-top:.4em}
.mei-page .meta{color:var(--ink3);font-size:.84rem;letter-spacing:.06em;padding-bottom:18px;border-bottom:1px solid var(--line2)}
.mei-page h2{font-size:.86rem;letter-spacing:.24em;color:var(--ink2);margin:2.2em 0 .5em;font-weight:600;display:flex;align-items:center;gap:10px}
.mei-page h2::before{content:"";width:6px;height:6px;background:var(--shu);opacity:.85}
.mei-page p{font-size:.98rem;max-width:var(--tw)}
.mei-page .kanren a{font-family:var(--mincho);font-size:1.1rem;letter-spacing:.1em;margin-right:1.2em;border-bottom:1px solid var(--line2)}
.mei-page .kanren a:hover{border-color:var(--shu)}
.back{margin-top:3em;font-size:.88rem;letter-spacing:.06em}
.back a{border-bottom:1px solid var(--line2)}

/* 月ごと */
.month-grid{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.month-grid a{display:block;color:var(--ink)}
.month-grid .th{aspect-ratio:4/3;background:var(--paper2) center right/cover no-repeat;margin-bottom:10px}
.month-grid b{font-family:var(--mincho);font-size:1.2rem;letter-spacing:.1em;font-weight:600}
.month-grid .wn{font-family:var(--mincho);color:var(--ink2);font-size:.9rem;letter-spacing:.1em;margin-left:8px}
.month-grid small{display:block;color:var(--ink3);font-size:.78rem;line-height:1.6;margin-top:2px;letter-spacing:.04em}
.month-grid a:hover b{color:var(--shu)}
.mon h1{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:.3em 0 .3em}
.mon h1 .num{font-size:2.6rem;letter-spacing:.1em;font-weight:700}
.mon h1 .wamei{font-size:1.15rem;color:var(--ink2);font-weight:500;letter-spacing:.12em}
.mon h1 .ro{font-family:var(--gothic);font-weight:400;font-size:.8rem;letter-spacing:.18em;color:var(--shu);border:1px solid rgba(166,61,47,.5);padding:0 8px;line-height:1.7}
.mon h2{font-size:.9rem;letter-spacing:.24em;color:var(--ink2);margin:2.6em 0 .7em;font-weight:600;display:flex;align-items:center;gap:10px}
.mon h2::before{content:"";width:6px;height:6px;background:var(--shu);opacity:.85}
.mon h2 small{font-family:var(--gothic);letter-spacing:.1em;font-size:.76rem;color:var(--ink3);margin-left:4px}
.kou-list{list-style:none;padding:0;margin:0;font-size:.9rem;max-width:var(--tw);border-top:1px solid var(--line2)}
.kou-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.kou-list b{font-family:var(--mincho);font-size:1.05rem;letter-spacing:.1em;margin-right:6px}
.kou-list .k{display:block;color:var(--ink2);font-size:.86rem;padding-left:1em}
.kou-list .k i{font-style:normal;color:var(--ink3);font-size:.8rem;margin-left:.4em}
.pn{margin-top:3em;display:flex;justify-content:space-between;font-family:var(--mincho);letter-spacing:.1em}
.pn a{border-bottom:1px solid var(--line2)}

/* 動画 */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;margin-top:8px}
.vgrid.sm{grid-template-columns:repeat(3,1fr)}
.vcard{display:block;color:var(--ink);font-size:.86rem;line-height:1.6}
.vcard .th{display:block;position:relative;aspect-ratio:16/9;background:var(--paper2);margin-bottom:8px;filter:saturate(.85);overflow:hidden}
.vcard .th img{display:block;width:100%;height:100%;object-fit:cover}
.vcard:hover .th{filter:saturate(1)}
.vcard .th i{position:absolute;right:6px;bottom:6px;font-style:normal;font-size:.7rem;letter-spacing:.04em;color:#fff;background:rgba(38,35,31,.72);padding:0 6px;line-height:1.6}
.vcard b{display:block;font-family:var(--mincho);font-weight:600;font-size:.98rem;letter-spacing:.02em;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard:hover b{color:var(--shu)}
.vcard small{display:block;color:var(--ink3);font-size:.76rem;margin-top:2px;letter-spacing:.04em}
.vcard .hk{display:block;color:var(--ink2);font-size:.82rem;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vcard .tg{display:block;color:var(--ink3);font-size:.72rem;letter-spacing:.06em;margin-top:4px}
.vfilters{margin:18px 0 26px;border-top:1px solid var(--line2);padding-top:6px}
.frow{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.frow>span{color:var(--ink3);font-size:.74rem;letter-spacing:.16em;min-width:5.5em}
.frow a{padding:2px 8px;color:var(--ink2);border-bottom:1px solid transparent}
.frow a.on{color:var(--shu);border-color:var(--shu)}
.frow a:hover{color:var(--shu)}
.vmore{text-align:center;margin-top:36px}
.fclear{margin:8px 0 0;font-size:.78rem;color:var(--ink3)}
.fclear a{border-bottom:1px solid var(--line2)}
.vpage{max-width:900px}
.embed{aspect-ratio:16/9;background:#1f1c18;margin:20px 0 22px}
.embed iframe{width:100%;height:100%;border:0}
.vpage h1{font-size:1.5rem;letter-spacing:.04em;line-height:1.5;margin:0 0 .4em}
.vpage .vch{color:var(--ink2);font-size:.9rem;margin:0 0 .3em}
.vpage .vch a{border-bottom:1px solid var(--line2);font-size:.82rem}
.vpage .meta{color:var(--ink3);font-size:.84rem;letter-spacing:.06em;padding-bottom:16px;border-bottom:1px solid var(--line2)}
.vpage .hk{font-size:.98rem;max-width:var(--tw);margin-top:1em}
.vpage h2{font-size:.86rem;letter-spacing:.24em;color:var(--ink2);margin:2.4em 0 .8em;font-weight:600;display:flex;align-items:center;gap:10px}
.vpage h2::before{content:"";width:6px;height:6px;background:var(--shu);opacity:.85}

@media (max-width:760px){
  .vgrid,.vgrid.sm{grid-template-columns:1fr 1fr;gap:20px 14px}
  .frow>span{min-width:100%;padding-top:2px}
  .vpage h1{font-size:1.2rem}
  .site-head{padding:14px 18px 12px}
  .site-head .brand{font-size:1.35rem;display:block}
  .site-head .brand small{display:block;margin-top:1px;font-size:.6rem;letter-spacing:.14em}
  .site-head nav a{margin-left:14px;font-size:.84rem;letter-spacing:.06em}
  main{padding:0 18px 48px}
  .sec{margin-top:46px}
  .hero{padding:0;margin-top:0}
  .hero .art{aspect-ratio:4/5;background-position:74% center}
  .hero .txt{left:18px;right:18px;top:auto;bottom:24px;transform:none;max-width:none;padding:60px 0 0 0;background:linear-gradient(180deg,rgba(243,238,227,0),rgba(243,238,227,.72) 45%,rgba(243,238,227,.86))}
  .hero .date{font-size:.8rem;letter-spacing:.18em}
  .hero h1{font-size:3.2rem}
  .hero .kou{font-size:.98rem;margin-top:.8em}
    .datebar{padding:0 18px}
  .picks,.rank,.two{grid-template-columns:1fr}
  .pick .mei{font-size:2rem}
  .two>div+div{margin-top:36px}
  .dl{grid-template-columns:1fr;gap:0}
  .dl dt{margin-top:.6em}
  .strip{padding:0;margin-top:0}
  .strip div{height:170px;background-position:72% center}
  .strip.sm div{height:120px}
  .mei-page h1 .mei{font-size:2.6rem}
  .month-grid{grid-template-columns:1fr 1fr;gap:20px 16px}
  .mei-item{grid-template-columns:1fr}
  .mei-item .imi{grid-column:1}
  .tabs a{margin-right:6px;padding-right:8px}
}