/*
Theme Name: Shizuku
Description: ラルム（感情浴のすすめ）の専用テーマ
Version: 0.1.0
Text Domain: shizuku
*/
/* 方向: モック第3版（和モダン）。見出しは明朝・本文はゴシック、白地に薄いグレーと黒の帯、細い罫、角のない四角。
   約束: 見出しは日本語。英語の小見出しと見出し横の縦線は使わない。見出しの右上にリンクを置かず、一覧の末尾に置く */
:root{
  --white:#ffffff;
  --pale:#f4f4f2;
  --ink:#141414;
  --sub:#727272;
  --line:#e3e3e0;
  --teal:#2b615d;
  --dark:#16191b;
  --dark-sub:#9aa1a3;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Noto Sans JP","Hiragino Sans",sans-serif;
  --roman:"Cormorant Garamond","Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--gothic);font-weight:400;font-size:15px;line-height:1.95;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:14px}
.logo svg{width:13px}
.logo b{font-family:var(--mincho);font-weight:600;font-size:19px;letter-spacing:.2em}
.nav{display:flex;gap:34px;font-size:13px;letter-spacing:.08em}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .35s}
.nav a:hover::after{right:0}

/* 最初の画面（ソウゾウの森の型：左に文字、右に大きな写真の枠、下に重なる欧文） */
.hero{position:relative;padding:72px 0 0}
.hero .grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:end}
.hero .txt{padding-bottom:120px}
.hero h1{font-family:var(--mincho);font-weight:500;font-size:clamp(30px,3.3vw,46px);line-height:1.6;letter-spacing:.08em;margin:0 0 28px}
.hero .sub{color:var(--sub);font-size:14px;line-height:2.1;margin:0 0 40px;max-width:26em}
.photo{position:relative;aspect-ratio:5/6;background:
  radial-gradient(80% 60% at 70% 30%,rgba(255,255,255,.55),transparent 60%),
  linear-gradient(170deg,#c9d6d4 0%,#8fa9a6 45%,#4f6f6c 100%);overflow:hidden}
.photo::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.18'/></svg>");mix-blend-mode:multiply}
.photo .note{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.85);z-index:2}
.photo svg.d{position:absolute;left:50%;top:42%;width:12%;transform:translate(-50%,-50%);z-index:2;opacity:.9}
.wordmark{position:relative;z-index:3;margin:-0.52em 0 0;font-family:var(--roman);font-weight:300;font-size:clamp(64px,12.5vw,178px);letter-spacing:.04em;line-height:1;white-space:nowrap}
.wordmark small{font-family:var(--mincho);font-size:14px;letter-spacing:.3em;margin-left:18px;vertical-align:middle;color:var(--sub)}

/* リンク（丸いボタンは使わず、文字＋線の矢印） */
.link{display:inline-flex;align-items:center;gap:16px;font-size:13.5px;letter-spacing:.1em;padding:6px 0}
.link i{display:block;width:48px;height:1px;background:currentColor;position:relative;transition:width .35s}
.link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.link:hover i{width:72px}

/* 帯と見出し */
.sec{padding:140px 0}
.sec.pale{background:var(--pale)}
.head{display:grid;grid-template-columns:5fr 7fr;gap:64px;margin-bottom:64px;align-items:end}
.h2{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,2.6vw,34px);letter-spacing:.1em;line-height:1.5;margin:0}
.lead{color:var(--sub);font-size:14px;margin:0;max-width:34em}
.more{margin-top:56px;text-align:right}

/* 感情浴とは */
.about{display:grid;grid-template-columns:5fr 7fr;gap:64px}
.about .big{font-family:var(--mincho);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.9;letter-spacing:.08em;margin:0}
.about p{margin:0 0 1.3em;font-size:15px;line-height:2.2}

/* 気分から探す（罫で区切った表） */
.moods{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.mood{padding:34px 28px 30px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;transition:background .3s}
.mood:not(:nth-child(3n)){border-right:1px solid var(--line)}
.mood:not(:nth-child(3n+1)){padding-left:28px}
.mood .n{font-family:var(--roman);font-size:16px;color:var(--sub);letter-spacing:.1em}
.mood b{font-family:var(--mincho);font-weight:500;font-size:24px;letter-spacing:.1em;white-space:nowrap}
.mood p{margin:0;font-size:13px;color:var(--sub)}
.mood .cnt{margin-top:18px;font-size:12px;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.mood .cnt::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.mood:hover{background:var(--pale)}

/* 感情浴会の記録（黒の帯） */
.dark{background:var(--dark);color:#e8eaeb}
.dark .lead{color:var(--dark-sub)}
.dark .h2{color:#fff}
.logs{border-top:1px solid #33383b}
.log{display:grid;grid-template-columns:120px 140px 1fr 80px;align-items:baseline;gap:24px;padding:28px 0;border-bottom:1px solid #33383b;transition:padding .35s}
.log:hover{padding-left:12px}
.log .no{font-family:var(--roman);font-weight:300;font-size:46px;line-height:1;color:#fff}
.log .no small{font-family:var(--gothic);font-size:11px;margin-left:6px;color:var(--dark-sub)}
.log .ym{font-family:var(--roman);font-size:18px;color:var(--dark-sub);letter-spacing:.08em}
.log .t{font-family:var(--mincho);font-size:19px;letter-spacing:.1em;color:#fff}
.log .t small{display:block;font-family:var(--gothic);font-size:12.5px;color:var(--dark-sub);letter-spacing:.04em;margin-top:4px}
.log .n{font-size:12px;color:var(--dark-sub);text-align:right}

/* 作品の記録 */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 28px}
.work .cover{aspect-ratio:3/4;margin-bottom:18px;position:relative;overflow:hidden}
.work .cover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:.35s}
.work:hover .cover::after{background:rgba(0,0,0,.06)}
.c1{background:linear-gradient(170deg,#d7dfde,#a9bbb9)}.c2{background:linear-gradient(170deg,#e4ded5,#c2b5a2)}.c3{background:linear-gradient(170deg,#dededc,#b7b7b3)}.c4{background:linear-gradient(170deg,#e2dde0,#bdb0b8)}
.work .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);letter-spacing:.1em}
.work h3{font-family:var(--mincho);font-weight:500;font-size:17px;letter-spacing:.06em;margin:8px 0 12px;line-height:1.7}
.drops{display:flex;gap:5px;align-items:center}
.drops svg{width:9px}
.drops span{font-size:11.5px;color:var(--sub);margin-left:10px}

/* 運営 */
.org{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;border-top:1px solid var(--line);padding-top:56px}
.org b{font-family:var(--mincho);font-weight:500;font-size:22px;letter-spacing:.2em}
.org p{margin:0 0 18px;font-size:14.5px;color:#333}

/* フッター */
.ft{background:var(--dark);color:#cfd3d5;padding:90px 0 44px}
.ft .top{display:grid;grid-template-columns:5fr 7fr;gap:64px}
.ft .logo b{color:#fff}
.ft nav{display:grid;grid-template-columns:repeat(3,auto);gap:12px 40px;font-size:13px;letter-spacing:.08em;justify-content:end}
.ft .bottom{display:flex;justify-content:space-between;margin-top:80px;padding-top:24px;border-top:1px solid #33383b;font-size:11.5px;color:var(--dark-sub);letter-spacing:.1em}

/* 動き */
.fade{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1s ease}
.fade.on{opacity:1;transform:none}

/* スマホ */
@media (max-width:720px){
  .wrap{padding:0 20px}
  .nav{display:none}
  .hero{padding-top:40px}
  .hero .grid,.head,.about,.org,.ft .top{grid-template-columns:1fr;gap:28px}
  .hero .txt{padding-bottom:0}
  .wordmark{font-size:15.5vw;margin-top:-.5em}
  .wordmark small{display:block;margin:10px 0 0;font-size:12px}
  .sec{padding:90px 0}
  .moods{grid-template-columns:1fr}
  .mood,.mood:not(:nth-child(3n+1)){padding:24px 0;border-right:0}
  .log{grid-template-columns:70px 1fr;gap:6px 14px}
  .log .no{font-size:36px}
  .log .t,.log .n{grid-column:1/-1;text-align:left}
  .works{grid-template-columns:1fr 1fr;gap:28px 14px}
  .ft nav{grid-template-columns:1fr 1fr;justify-content:start}
}

/* ===== ここからテーマ用（一覧・記事・固定ページ） ===== */
.page-top{padding:110px 0 60px;border-bottom:1px solid var(--line)}
.page-top .h1{font-family:var(--mincho);font-weight:500;font-size:clamp(28px,3.4vw,44px);letter-spacing:.1em;line-height:1.5;margin:0 0 14px}
.page-top .lead{max-width:40em}
.crumb{font-size:12px;color:var(--sub);letter-spacing:.08em;margin-bottom:26px}
.crumb a:hover{color:var(--ink)}

.list-sec{padding:70px 0 140px}
.logs.light{border-top:1px solid var(--ink)}
.logs.light .log{border-bottom:1px solid var(--line)}
.logs.light .log .no,.logs.light .log .t{color:var(--ink)}
.logs.light .log .ym,.logs.light .log .n,.logs.light .log .t small{color:var(--sub)}
.logs.light .log:hover{background:var(--pale)}

.pager{margin-top:70px;display:flex;justify-content:center;gap:8px;font-family:var(--roman);font-size:18px}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line)}
.pager .current{background:var(--ink);color:#fff;border-color:var(--ink)}

.entry-top{padding:100px 0 50px}
.entry-top .meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--sub);letter-spacing:.08em;margin-bottom:22px}
.entry-top .meta a:hover{color:var(--ink)}
.entry-top h1{font-family:var(--mincho);font-weight:500;font-size:clamp(26px,3vw,40px);letter-spacing:.08em;line-height:1.6;margin:0 0 20px;max-width:24em}
.entry-top .drops{margin-top:6px}
.entry-top .drops svg{width:12px}
.entry-eye{margin:0 0 70px}
.entry-eye img{width:100%;height:auto;display:block}
.entry{max-width:720px;margin:0 auto;padding:0 0 120px;font-size:16px;line-height:2.15}
.entry p{margin:0 0 1.7em}
.entry h2{font-family:var(--mincho);font-weight:500;font-size:24px;letter-spacing:.08em;line-height:1.6;margin:2.6em 0 1em;padding-bottom:.6em;border-bottom:1px solid var(--line)}
.entry h3{font-family:var(--mincho);font-weight:500;font-size:19px;letter-spacing:.06em;margin:2.2em 0 .8em}
.entry blockquote{margin:2em 0;padding:1.4em 1.8em;background:var(--pale);font-family:var(--mincho);font-size:17px;line-height:2.1}
.entry blockquote p:last-child{margin:0}
.entry img{max-width:100%;height:auto}
.entry a{border-bottom:1px solid currentColor}
.entry ul,.entry ol{padding-left:1.4em;margin:0 0 1.7em}
.entry-foot{max-width:720px;margin:0 auto 140px;border-top:1px solid var(--line);padding-top:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}
.entry-foot .tags a{display:inline-block;margin:0 14px 6px 0;color:var(--sub)}
.entry-foot .tags a:hover{color:var(--ink)}

.empty{padding:60px 0;color:var(--sub);text-align:center}
.nf{padding:160px 0;text-align:center}
.nf .h1{font-family:var(--mincho);font-size:30px;letter-spacing:.1em;margin:0 0 20px}

@media (max-width:720px){
  .page-top{padding:70px 0 40px}
  .entry-top{padding:60px 0 36px}
  .entry{font-size:15.5px;padding-bottom:90px}
}