:root{
  --bg:#f5ede5;
  --paper:#fffdf9;
  --surface:#ffffff;
  --text:#3b322d;
  --muted:#9a8c82;
  --accent:#c14b6e;
  --accent-deep:#a4385a;
  --accent-bg:#fbeef2;
  --info:#3a6ea5;
  --info-bg:#eaf1fb;
  --border:#ece2d9;
  --gold:#cf9f4d;
  --tape:rgba(207,159,77,.34);
  --tape-pink:rgba(193,75,110,.20);
  --radius:12px;
  --hand:"Zen Kurenaido","Hiragino Sans",sans-serif;
  --pen:"Klee One","Hiragino Mincho ProN",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 88% -5%, #fbeef2 0%, rgba(251,238,242,0) 38%),
    radial-gradient(circle at 6% 4%, #f6f0e6 0%, rgba(246,240,230,0) 32%),
    radial-gradient(rgba(193,75,110,.05) 1.1px, transparent 1.1px);
  background-size:auto, auto, 23px 23px;
  background-attachment:fixed, fixed, scroll;
}
a{color:inherit;text-decoration:none}
.container{max-width:940px;margin:0 auto;padding:0 18px;position:relative}
.nowrap{white-space:nowrap}
.sp-only{display:none}

/* ---------- top bar ---------- */
.topbar{
  background:repeating-linear-gradient(-45deg,#fbeef2 0 14px,#f9e6ec 14px 28px);
  color:var(--accent);
  font-size:12px;padding:6px 12px;letter-spacing:.02em;line-height:1.4;
  display:flex;align-items:center;justify-content:center;gap:5px 18px;flex-wrap:wrap;text-align:center;
}
.topbar__update{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap;color:var(--accent-deep)}
/* ログイン中風の点滅ドット（コアがふわっと明滅＋外側にパルスリング） */
.topbar__dot{position:relative;width:8px;height:8px;border-radius:50%;background:#13b34c;flex:none;box-shadow:0 0 7px rgba(19,179,76,.8),0 0 0 1px rgba(19,179,76,.3);animation:onlineBlink .8s ease-in-out infinite}
.topbar__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#13b34c;animation:onlinePulse 1s ease-out infinite}
@keyframes onlinePulse{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3.8);opacity:0}}
@keyframes onlineBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.74)}}

/* ---------- header ---------- */
.header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;box-shadow:0 2px 0 rgba(193,75,110,.05)}
.header__inner{display:flex;align-items:center;justify-content:space-between;min-height:62px;gap:16px;flex-wrap:wrap}
.logo{font-family:var(--pen);font-size:21px;font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:baseline;gap:4px;transform:rotate(-1.2deg)}
.logo__heart{color:var(--accent);font-size:.92em}
/* ロゴ直下に小さなステータスチップ（更新日＋ログイン中ドット） */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
.header__right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.header__right .brand__update{margin-top:0}
.brand__update{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 10px 3px 8px;border-radius:999px;background:#fdeef3;border:1px solid rgba(193,75,110,.14);font-size:10px;font-weight:700;white-space:nowrap;color:var(--accent-deep);letter-spacing:.01em}
.nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.nav a{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.03em;transition:color .15s;position:relative}
.nav a:hover{color:var(--accent)}
.nav__soon{font-size:10px;background:#f3ebe6;color:var(--muted);padding:1px 6px;border-radius:999px;margin-left:5px;vertical-align:middle}

/* ---------- decorative bits ---------- */
.washi{position:absolute;width:104px;height:25px;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(46deg,var(--tape) 0 7px,rgba(255,255,255,.32) 7px 14px);
  box-shadow:0 1px 3px rgba(59,50,45,.10);}
.washi--pink{background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.34) 7px 14px);}
.doodle{font-family:var(--hand);color:var(--accent);opacity:.5;position:absolute;pointer-events:none;user-select:none}
.heart-rain{color:var(--accent);opacity:.45}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 85% 18%, rgba(193,75,110,.10) 0, rgba(193,75,110,0) 45%),
    var(--accent-bg);
  border:1px solid #f3d9e2;
  border-radius:var(--radius);
  padding:24px 28px 22px;
  margin:24px 0 14px;
  box-shadow:0 8px 26px rgba(193,75,110,.08);
  overflow:hidden;
}
.hero__body{position:relative;z-index:2;max-width:560px}
/* 文字を読みやすくする白グラデーション（キャラ画像と文字の間） */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:var(--radius);
  background:linear-gradient(105deg, var(--accent-bg) 0%, rgba(251,238,242,.96) 30%, rgba(251,238,242,.74) 50%, rgba(251,238,242,.3) 70%, rgba(251,238,242,0) 88%)}
/* 背景透過PNGのキャライラストを、文字の下のレイヤー（右側背景）として重ねる */
.hero__char{position:absolute;right:-4px;bottom:0;top:0;height:100%;width:auto;max-width:54%;
  object-fit:contain;object-position:right bottom;z-index:0;pointer-events:none;
  filter:drop-shadow(0 6px 16px rgba(59,50,45,.12))}
.hero__char--ph{position:absolute;right:20px;top:24px;bottom:24px;width:42%;max-width:300px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  font-family:var(--pen);font-size:15px;line-height:1.6;color:rgba(164,56,90,.42);
  border:2px dashed rgba(193,75,110,.22);border-radius:12px;background:rgba(255,255,255,.16);z-index:1}
.hero__lead{font-family:var(--hand);font-size:15px;color:var(--accent);margin-bottom:4px;transform:rotate(-.6deg)}
.hero__title{font-family:var(--pen);font-size:clamp(19px,3vw,30px);font-weight:600;margin:6px 0 6px;color:var(--accent-deep);line-height:1.4;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 16px rgba(255,255,255,.85)}
.hero__text{font-size:14px;color:var(--accent);opacity:.9;margin-bottom:12px;max-width:46em;white-space:pre-line}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__tape{top:-12px;left:34px;transform:rotate(-7deg)}

/* ---------- affiliate picks inside hero (表紙サムネ横一列) ---------- */
.hero__picks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:410px;margin-top:14px}
.hpick{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border-radius:9px;overflow:hidden;
  background:linear-gradient(135deg,#fbe3ec 0%,#f6e7f6 55%,#eae7fb 100%);
  border:1px solid #f0d8e2;box-shadow:0 5px 14px rgba(193,75,110,.14);
  transition:transform .16s ease,box-shadow .16s ease}
.hpick:hover{transform:translateY(-3px);box-shadow:0 11px 22px rgba(193,75,110,.24)}
.hpick__ph{font-family:var(--pen);font-size:10px;letter-spacing:.16em;color:rgba(164,56,90,.36)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:10px 20px;border-radius:9px;border:none;cursor:pointer;transition:transform .14s,box-shadow .14s,opacity .14s;text-align:center}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(193,75,110,.26)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(193,75,110,.34)}
.btn--ghost{background:transparent;border:1px solid var(--border);color:var(--muted);font-weight:400}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- inline handwritten affiliate link ---------- */
.aff-inline{font-family:var(--hand);font-size:15px;color:var(--accent-deep);font-weight:400;
  border-bottom:2px dotted var(--accent);padding-bottom:1px;transition:color .15s;display:inline}
.aff-inline:hover{color:var(--accent)}
.aff-inline::after{content:" ♡";color:var(--accent);font-size:.85em}
.pr-tag{font-family:"Hiragino Sans",sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;color:#b69a55;background:#f6efdd;border:1px solid #e6d6a8;padding:1px 5px;border-radius:4px;vertical-align:middle;margin-left:5px}

/* ---------- sections ---------- */
.section{margin:40px 0;position:relative}
.section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.section__title{font-family:var(--pen);font-size:21px;font-weight:600;letter-spacing:.01em;position:relative}
.section__title .mark{background:linear-gradient(transparent 62%, rgba(207,159,77,.40) 62%);padding:0 2px}
.link{font-family:var(--hand);font-size:15px;color:var(--info);font-weight:400}
.link:hover{text-decoration:underline}
.more-row{display:flex;justify-content:flex-end;margin-top:10px}
.more-link{font-family:var(--hand);font-size:14px;color:var(--info);font-weight:600;text-decoration:none}
.more-link:hover{text-decoration:underline}
.hero-update{display:none}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;vertical-align:middle;margin-left:6px}
.badge--live{background:#e7f4ec;color:#2e7d52}
.badge--soon{background:#f3ebe6;color:var(--muted)}
.badge--hot{background:var(--accent);color:#fff;transform:rotate(-3deg)}

/* ---------- illustration grid (polaroid) ---------- */
.grid--illust{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
.illust{position:relative;background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:11px 11px 8px;box-shadow:0 5px 16px rgba(59,50,45,.10);
  transition:transform .18s,box-shadow .18s;}
.illust::before{content:"";position:absolute;top:-11px;left:50%;width:92px;height:22px;transform:translateX(-50%) rotate(-2.5deg);
  background:repeating-linear-gradient(46deg,var(--tape) 0 7px,rgba(255,255,255,.34) 7px 14px);
  box-shadow:0 1px 2px rgba(59,50,45,.10);}
.illust:nth-child(3n+1){transform:rotate(-1.5deg)}
.illust:nth-child(3n+2){transform:rotate(1deg)}
.illust:nth-child(3n+3){transform:rotate(-.4deg)}
.illust:nth-child(4n+2)::before{transform:translateX(-50%) rotate(3deg);background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.34) 7px 14px)}
.illust:hover{transform:rotate(0) translateY(-5px) scale(1.025);box-shadow:0 16px 34px rgba(59,50,45,.18);z-index:5}
.illust__img{aspect-ratio:3/4;border-radius:2px;background:
  linear-gradient(135deg,#efe5df 0%,#f4ece6 100%);
  display:flex;align-items:center;justify-content:center;color:#c9bbb2;font-size:11px;letter-spacing:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.illust__cap{font-family:var(--pen);font-size:15px;font-weight:600;padding:12px 6px 0;line-height:1.6;text-wrap:pretty}
.illust__foot{display:flex;align-items:center;gap:2px;padding:9px 0 1px 4px}
.illust__date{font-family:var(--hand);font-size:12px;color:var(--muted);margin-right:auto}
.like{border:none;background:transparent;padding:2px 2px;margin:0;cursor:pointer;line-height:1;display:inline-flex;align-items:center}
.like__heart{font-size:18px;line-height:1;display:inline-block;transition:transform .14s}
.like:hover .like__heart{transform:scale(1.15)}
.like__n{font-family:var(--hand);font-size:13px;font-weight:700;color:var(--accent-deep);text-align:left}
.illust__tags{padding:8px 6px 4px;display:flex;gap:5px;flex-wrap:wrap}
.tag{font-family:var(--hand);font-size:12px;background:#f5ede8;color:#9a8579;padding:1px 9px;border-radius:999px;line-height:1.6}
.tag::before{content:"#";opacity:.55;margin-right:1px}

/* ---------- recommendation / review cards (affiliate) ---------- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px 18px}
.rec{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  overflow:visible;box-shadow:0 5px 16px rgba(59,50,45,.09);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.rec:nth-child(2n){transform:rotate(.7deg)}
.rec:nth-child(2n+1){transform:rotate(-.7deg)}
.rec:hover{transform:rotate(0) translateY(-4px);box-shadow:0 14px 30px rgba(59,50,45,.16);z-index:4}
.rec__cover{aspect-ratio:3/4;border-radius:10px 10px 0 0;background:
  repeating-linear-gradient(135deg,#efe4de 0 10px,#f3eae4 10px 20px);
  display:flex;align-items:center;justify-content:center;color:#bdaea4;font-size:11px;letter-spacing:2px;position:relative}
.rec__pin{position:absolute;top:-9px;right:14px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8da6,#c14b6e 70%);box-shadow:0 2px 4px rgba(59,50,45,.28)}
.rec__body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.rec__title{font-family:var(--pen);font-size:15px;font-weight:600;line-height:1.5;margin-bottom:2px}
.rec__author{font-size:11px;color:var(--muted);margin-bottom:7px}
.stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:8px}
.stars__off{color:#e3dace}
.rec__note{font-family:var(--hand);font-size:13.5px;color:var(--text);background:#fff8f0;border:1px dashed #ecd9c2;
  border-radius:8px;padding:8px 10px;line-height:1.65;margin-bottom:12px;position:relative}
.rec__note::before{content:"わたし";font-family:"Hiragino Sans";font-size:9px;font-weight:700;color:#c9a866;
  position:absolute;top:-8px;left:9px;background:#fff8f0;padding:0 4px;letter-spacing:.05em}
.rec__buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rec__price{font-size:12px;color:var(--muted)}
.rec__price b{color:var(--accent);font-size:14px}
.rec__btn{font-size:12.5px;font-weight:700;color:#fff;background:var(--accent);padding:7px 13px;border-radius:8px;
  box-shadow:0 3px 9px rgba(193,75,110,.28);transition:transform .14s,box-shadow .14s;white-space:nowrap}
.rec__btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(193,75,110,.36)}

/* ---------- pick of the month (feature review) ---------- */
.pick{position:relative;display:flex;gap:22px;background:var(--paper);border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;box-shadow:0 8px 24px rgba(59,50,45,.10);flex-wrap:wrap;
  background-image:radial-gradient(circle at 100% 0,rgba(207,159,77,.10) 0,transparent 40%)}
.pick__ribbon{position:absolute;top:-12px;left:22px;font-family:var(--hand);font-size:13px;font-weight:700;color:#fff;
  background:var(--gold);padding:4px 14px;border-radius:999px;transform:rotate(-3deg);box-shadow:0 3px 8px rgba(207,159,77,.4)}
.pick__cover{flex:0 0 150px;aspect-ratio:3/4;border-radius:8px;background:repeating-linear-gradient(135deg,#ece0d9 0 10px,#f2e8e2 10px 20px);
  display:flex;align-items:center;justify-content:center;color:#bdaea4;font-size:11px;letter-spacing:2px;box-shadow:0 4px 12px rgba(59,50,45,.12)}
.pick__body{flex:1;min-width:230px}
.pick__title{font-family:var(--pen);font-size:20px;font-weight:600;margin:4px 0 2px}
.pick__author{font-size:12px;color:var(--muted);margin-bottom:8px}
.pick__text{font-size:14px;color:var(--text);line-height:1.85;margin-bottom:14px}
.pick__text em{font-family:var(--hand);font-style:normal;color:var(--accent-deep);background:linear-gradient(transparent 60%,rgba(193,75,110,.16) 60%)}
.pick__buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- affiliate banner (sticker / PR) ---------- */
.aff-banner{position:relative;display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,#fff4f7 0%,#fdeef3 100%);
  border:1px solid #f2d3de;border-radius:12px;padding:14px 16px;margin:20px 0;flex-wrap:wrap;
  box-shadow:0 5px 16px rgba(193,75,110,.10);transform:rotate(-.5deg)}
.aff-banner::before{content:"";position:absolute;top:-10px;left:24px;width:80px;height:20px;transform:rotate(-5deg);
  background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.34) 7px 14px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.aff-banner__icon{flex:0 0 52px;height:66px;border-radius:6px;background:repeating-linear-gradient(135deg,#efe1da 0 8px,#f4ebe5 8px 16px);
  display:flex;align-items:center;justify-content:center;color:#c0b1a7;font-size:9px;letter-spacing:1px;box-shadow:0 2px 6px rgba(59,50,45,.12)}
.aff-banner__body{flex:1;min-width:170px}
.aff-banner__kicker{font-family:var(--hand);font-size:12px;color:var(--gold);font-weight:700;margin-bottom:2px}
.aff-banner__name{font-family:var(--pen);font-size:15px;font-weight:600;margin-bottom:3px;line-height:1.4}
.aff-banner__meta{font-size:12px;color:var(--muted)}
.aff-banner__meta b{color:var(--accent)}
.aff-banner__btn{font-size:13px;font-weight:700;color:#fff;background:var(--accent);padding:9px 16px;border-radius:9px;white-space:nowrap;
  box-shadow:0 4px 11px rgba(193,75,110,.3);transition:transform .14s,box-shadow .14s}
.aff-banner__btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 7px 16px rgba(193,75,110,.4)}

/* ---------- mii sticky note ---------- */
.sticky{position:relative;font-family:var(--hand);font-size:14px;line-height:1.7;color:#5c4a3f;
  background:#fff6cf;padding:18px 18px 16px;border-radius:2px;box-shadow:0 6px 16px rgba(59,50,45,.14);
  transform:rotate(-1.6deg);max-width:300px}
.sticky::before{content:"";position:absolute;top:-9px;left:50%;width:78px;height:20px;transform:translateX(-50%) rotate(2deg);
  background:repeating-linear-gradient(46deg,rgba(255,255,255,.5) 0 7px,rgba(207,159,77,.3) 7px 14px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sticky b{color:var(--accent-deep)}
.sticky--pink{background:#ffe1ea}

/* ---------- diary blurb ---------- */
.diary{position:relative;background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:22px 24px;
  margin:24px 0;box-shadow:0 6px 18px rgba(59,50,45,.08);
  background-image:repeating-linear-gradient(transparent 0 30px,rgba(193,75,110,.07) 30px 31px)}
.diary__head{font-family:var(--pen);font-size:16px;font-weight:600;color:var(--accent-deep);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.diary__head::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.diary__text{font-family:var(--hand);font-size:15px;line-height:1.95;color:var(--text);white-space:pre-line}
.diary__date{font-family:var(--hand);font-size:12px;color:var(--muted);margin-top:10px;text-align:right}

/* ---------- soon (review placeholder, legacy) ---------- */
.soon{border:1.5px dashed var(--border);border-radius:var(--radius);padding:34px 20px;text-align:center;background:var(--surface)}
.soon__title{font-family:var(--pen);font-size:17px;font-weight:600;color:var(--muted);margin-bottom:8px}
.soon__text{font-size:13px;color:var(--muted);line-height:1.8}

/* ---------- footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--border);margin-top:48px;padding:24px 0 30px;position:relative}
.footer::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);width:120px;height:22px;
  background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.34) 7px 14px);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.footer__inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.footer__inner>span:first-child{font-family:var(--pen);font-size:14px;color:var(--text)}
.footer__nav{display:flex;gap:14px;flex-wrap:wrap}
.footer__nav a:hover{color:var(--accent)}
.footer__copy{margin-left:auto}
.footer__pr{font-size:11px;color:var(--muted);margin-top:12px;text-align:center;opacity:.85}

/* ---------- age gate ---------- */
.agegate{position:fixed;inset:0;z-index:100;background:rgba(40,28,30,.80);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.agegate__box{position:relative;background:var(--surface);border-radius:var(--radius);padding:32px 28px;max-width:360px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.agegate__box::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);width:110px;height:24px;
  background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.4) 7px 14px);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.agegate__title{font-family:var(--pen);font-size:18px;font-weight:600;margin-bottom:10px}
.agegate__text{font-size:13px;color:var(--muted);margin-bottom:20px}
.agegate__btns{display:flex;flex-direction:column;gap:10px}

/* ---------- page head ---------- */
.page-head{margin:30px 0 22px;position:relative}
.page-head__title{font-family:var(--pen);font-size:27px;font-weight:600;margin-bottom:6px;display:inline-block;transform:rotate(-1deg)}
.page-head__title .mark{background:linear-gradient(transparent 62%,rgba(207,159,77,.4) 62%);padding:0 3px}
.page-head__text{font-size:14px;color:var(--muted);margin-bottom:16px;max-width:40em}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{font-family:var(--hand);font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--border);
  padding:5px 14px;border-radius:999px;cursor:pointer;transition:all .15s}
.filter::before{content:"#";opacity:.5;margin-right:1px}
.filter:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.filter--on{background:var(--accent);color:#fff;border-color:var(--accent)}
.filter--on::before{color:#fff;opacity:.7}

.gallery-note{font-family:var(--hand);font-size:13px;color:var(--muted);text-align:center;margin-top:26px}

/* ---------- prose ---------- */
.prose{max-width:740px;font-size:14px;line-height:1.95;color:var(--text);padding-bottom:10px}
.prose h2{font-family:var(--pen);font-size:17px;font-weight:600;margin:28px 0 10px;padding-left:11px;border-left:4px solid var(--accent)}
.prose p{margin-bottom:13px}
.prose a{color:var(--info);text-decoration:underline}
.prose__date{font-family:var(--hand);font-size:12px;color:var(--muted);margin-top:24px}
.info-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(59,50,45,.06)}
.info-table th,.info-table td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:top}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
.info-table th{width:120px;color:var(--muted);font-weight:600;background:var(--bg)}

/* ---------- form ---------- */
.form{max-width:520px;display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--border);
  border-radius:14px;padding:22px 22px 24px;box-shadow:0 8px 24px rgba(59,50,45,.08);position:relative}
.form::before{content:"";position:absolute;top:-11px;left:30px;width:100px;height:22px;transform:rotate(-4deg);
  background:repeating-linear-gradient(46deg,var(--tape) 0 7px,rgba(255,255,255,.34) 7px 14px);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.form__label{font-size:13px;font-weight:600;color:var(--text);display:flex;flex-direction:column;gap:6px}
.form__input{font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-weight:400}
.form__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form__textarea{resize:vertical}
.form button{align-self:flex-start;margin-top:4px}
.form__alt{font-family:var(--hand);font-size:14px;color:var(--muted);margin-top:22px;line-height:1.95}
.form__alt a{color:var(--info)}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .topbar{font-size:10px;padding:4px 12px;letter-spacing:0;line-height:1.35;white-space:nowrap}
  .topbar__notice{overflow:hidden;text-overflow:ellipsis}
  .header__inner{min-height:auto;flex-direction:column;padding:10px 0;gap:6px}
  .brand{align-self:center;align-items:center}
  .header__right{align-items:center;gap:9px;margin:9px 0}
  .header__right .brand__update{display:none}
  .brand__update{font-size:9.5px;margin-top:5px}
  .hero-update{display:inline-flex;align-items:center;gap:6px;font-family:var(--hand);font-weight:700;
    white-space:nowrap;color:var(--accent-deep);font-size:12px;margin:12px 0 2px}
  .nav{gap:14px}
  .nav a{font-size:12.5px}
  .hero{padding:20px 16px}
  .hero__char{max-width:62%;opacity:.5}
  .hero__picks{max-width:none;gap:8px;margin-top:12px}
  .hpick__ph{font-size:9px}
  .hero__char--ph{display:none}
  .hero__title{font-size:18px;white-space:normal;line-height:1.45}
  .sp-only{display:inline}
  .hero__text{font-size:13px;white-space:normal}
  .diary{padding:15px 16px;margin:18px 0;background-image:repeating-linear-gradient(transparent 0 20px,rgba(193,75,110,.06) 20px 21px)}
  .diary__head{font-size:14px;margin-bottom:5px}
  .diary__text{white-space:normal;font-size:12.5px;line-height:1.55}
  .diary__date{font-size:11px;margin-top:6px}
  .hero__cta{flex-direction:column;align-items:flex-start;gap:10px}
  .aff-inline{white-space:nowrap;font-size:13px}
  .grid--illust{grid-template-columns:repeat(2,1fr);gap:14px 10px}
  #topGallery .illust:nth-child(n+5){display:none}
  .illust{padding:8px 8px 6px}
  .illust__cap{display:none}
  .illust__tags{gap:4px;padding:6px 4px 2px}
  .tag{white-space:nowrap;font-size:10px;padding:1px 6px}
  .pick{gap:16px}
  .pick__cover{flex-basis:120px}
  .footer__copy{margin-left:0}
}

/* ---------- bio block with centered background portrait ---------- */
.bio-block{position:relative;display:flex;align-items:center;justify-content:center;
  padding:40px 26px;margin:4px 0 10px;border-radius:14px;isolation:isolate}
.bio-block__bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:440px;max-width:90%;opacity:.5;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 75%);
  mask-image:radial-gradient(circle,#000 58%,transparent 75%)}
.bio-block__text{position:relative;z-index:1}
.bio-block__text p{text-shadow:0 1px 2px #fbf7f3,0 0 10px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.95)}

/* ---------- ごちゃごちゃ color accents ---------- */
.tag:nth-child(3n+1){background:#fdecf0;color:#c14b6e}
.tag:nth-child(3n+2){background:#e7f0fb;color:#4f78b3}
.tag:nth-child(3n+3){background:#f4ecfa;color:#8a64b8}
.illust:nth-child(4n+2) .tag:nth-child(1){background:#e4f5ec;color:#3f9e74}
.illust:nth-child(4n+3) .tag:nth-child(2){background:#fbf0dc;color:#c89545}
.filter:nth-child(4n+2){border-color:#cfe0f4;color:#4f78b3}
.filter:nth-child(4n+3){border-color:#e6d6f4;color:#8a64b8}
.filter:nth-child(4n+4){border-color:#f1dcab;color:#c89545}
.filter:nth-child(5n+1){border-color:#bfe6cf;color:#3f9e74}
/* alternating highlighter colors on section titles */
.section:nth-of-type(3n+2) .section__title .mark{background:linear-gradient(transparent 62%, rgba(79,120,179,.32) 62%)}
.section:nth-of-type(3n+3) .section__title .mark{background:linear-gradient(transparent 62%, rgba(138,100,184,.30) 62%)}
/* multi-color washi tapes on stickies/illusts */
.sticky:nth-of-type(2n)::before{background:repeating-linear-gradient(46deg,rgba(79,120,179,.30) 0 7px,rgba(255,255,255,.5) 7px 14px)}
.illust:nth-child(5n+2)::before{background:repeating-linear-gradient(46deg,rgba(79,120,179,.28) 0 7px,rgba(255,255,255,.34) 7px 14px)}
.illust:nth-child(5n+4)::before{background:repeating-linear-gradient(46deg,rgba(138,100,184,.26) 0 7px,rgba(255,255,255,.34) 7px 14px)}
.illust:nth-child(5n+3)::before{background:repeating-linear-gradient(46deg,rgba(63,158,116,.26) 0 7px,rgba(255,255,255,.34) 7px 14px)}
/* extra sticky note colors */
.sticky--blue{background:#dbeafe}
.sticky--mint{background:#d7f3e4}
.sticky--lilac{background:#ece1fb}
/* dotted diary lines tinted */
.diary{background-image:repeating-linear-gradient(transparent 0 30px,rgba(79,120,179,.07) 30px 31px)}
.rec__pin{background:radial-gradient(circle at 35% 30%,#7fb2ff,#4f78b3 70%)}
.rec:nth-child(3n+2) .rec__pin{background:radial-gradient(circle at 35% 30%,#b58ce6,#8a64b8 70%)}
.rec:nth-child(3n+3) .rec__pin{background:radial-gradient(circle at 35% 30%,#ff8da6,#c14b6e 70%)}

/* ---------- affiliate strip (heroから出した版) ---------- */
.aff-strip{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  margin:8px 0 16px;padding:15px 16px 16px;
  background:var(--paper);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 5px 16px rgba(59,50,45,.07)}
.aff-strip::before{content:"";position:absolute;top:-10px;left:26px;width:84px;height:20px;transform:rotate(-4deg);
  background:repeating-linear-gradient(46deg,var(--tape-pink) 0 7px,rgba(255,255,255,.34) 7px 14px);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.aff-strip .hero__picks{margin-top:2px}

/* ---------- time-triggered illustrations (slide in from left/right, diagonally up) ---------- */
.rinks{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.rink{position:fixed;opacity:0;transform-origin:center;pointer-events:auto;cursor:pointer;text-decoration:none;
  transition:transform 1.7s cubic-bezier(.22,1,.36,1),opacity 1.6s ease;will-change:transform,opacity}
.rink__img{height:23vh;max-height:230px;min-height:120px;width:auto;display:block;
  filter:drop-shadow(0 12px 28px rgba(59,50,45,.22));transform:rotate(45deg)}
.rink--r1 .rink__img,.rink--r2 .rink__img,.rink--r3 .rink__img{transform:rotate(-45deg)}
/* emerge from the left / right screen edges; cropped edge stays hidden off the side */
.rink--l1{left:0;top:40%;transform:translate(-185%,40%)}
.rink--l2{left:0;bottom:6%;transform:translate(-185%,-70%)}
.rink--r1{right:0;top:40%;transform:translate(185%,40%)}
.rink--r2{right:0;bottom:6%;transform:translate(185%,-70%)}
.rink--l3{left:0;top:56%;transform:translate(-185%,40%)}
.rink--r3{right:0;top:56%;transform:translate(185%,40%)}
.rink--l1.is-in,.rink--l2.is-in,.rink--l3.is-in{opacity:1 !important;transform:translate(-26%,0) !important}
.rink--r1.is-in,.rink--r2.is-in,.rink--r3.is-in{opacity:1 !important;transform:translate(26%,0) !important}
/* speech bubble — crisp black & white pop style, sits on the inner (screen-center) side */
.rink__bubble{position:absolute;top:14%;opacity:0;pointer-events:none;white-space:nowrap;z-index:5;
  background:#fff;border:2px solid #111;border-radius:14px;padding:9px 15px;
  font-family:var(--hand);font-weight:700;font-size:16px;color:#111;
  box-shadow:3px 3px 0 #111;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.56,.64,1);transform:translateY(8px) scale(.85)}
.rink--l1 .rink__bubble,.rink--l2 .rink__bubble,.rink--l3 .rink__bubble{left:118%}
.rink--r1 .rink__bubble,.rink--r2 .rink__bubble,.rink--r3 .rink__bubble{right:118%}
/* tail: outer black + inner white triangle, pointing toward the character */
.rink__bubble::before,.rink__bubble::after{content:"";position:absolute;top:50%;border:9px solid transparent}
.rink--l1 .rink__bubble::before,.rink--l2 .rink__bubble::before,.rink--l3 .rink__bubble::before{left:-19px;margin-top:-9px;border-right-color:#111}
.rink--l1 .rink__bubble::after,.rink--l2 .rink__bubble::after,.rink--l3 .rink__bubble::after{left:-14px;margin-top:-7px;border-width:7px;border-right-color:#fff}
.rink--r1 .rink__bubble::before,.rink--r2 .rink__bubble::before,.rink--r3 .rink__bubble::before{right:-19px;margin-top:-9px;border-left-color:#111}
.rink--r1 .rink__bubble::after,.rink--r2 .rink__bubble::after,.rink--r3 .rink__bubble::after{right:-14px;margin-top:-7px;border-width:7px;border-left-color:#fff}
.rink.show-bubble .rink__bubble{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:560px){
  .rink__img{height:17vh;max-height:165px;min-height:96px}
  .rink__bubble{font-size:14px;padding:7px 12px}
  /* 前回の4体の位置（上40%・下6%）はそのまま、rink07/08は上下の真ん中へ（透過PNGなので重なってOK） */
  .rink--l3,.rink--r3{top:58%;bottom:auto}
}