/* =====================================================================
   天狼院書店 — 新トップページ（雑誌型 / READING LIFE 2026 秋号）
   styles.css — magazine "誌面" component styles, built on the
   TENRO-IN design system tokens (colors_and_type.css).
   ===================================================================== */

html{overflow-x:hidden}
html,body{margin:0;padding:0;background:var(--paper-050);scroll-behavior:smooth}
*{box-sizing:border-box}
img{display:block;max-width:100%}
.app-root{min-height:100vh}

/* ---- layout wrappers ---- */
.wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.wrap-narrow{max-width:980px;margin:0 auto;padding:0 44px}
.wrap-read{max-width:760px;margin:0 auto;padding:0 44px}

/* ---- reveal (gentle fade + 8–16px rise, settles visible) ---- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}

/* ---- editorial primitives ---- */
.eyebrow-en{font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-700)}
.eyebrow-en.light{color:var(--gold-400)}
.kicker-it{font-family:var(--font-display);font-style:italic;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:.02em;color:var(--gold-700)}
.nombre{font-family:var(--font-display);font-style:italic;font-size:13px;letter-spacing:.18em;color:var(--fg-faint)}
.rule-thin{height:1px;background:var(--line);border:0;margin:0}

/* numbered magazine section header (誌面の特集見出し) */
.feat-head{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:end;
  padding-bottom:18px;border-bottom:2px solid var(--slate-800);margin-bottom:54px}
.feat-head .fh-no{font-family:var(--font-display);font-style:italic;font-size:clamp(2.6rem,5.4vw,3.9rem);
  color:var(--gold-600);line-height:.74}
.feat-head .fh-en{font-family:var(--font-label);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-700);margin-bottom:10px}
.feat-head .fh-jp{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.7rem);
  color:var(--fg-strong);margin:0;letter-spacing:.04em;line-height:1.2;display:flex;align-items:baseline;flex-wrap:wrap}
.fh-genre{letter-spacing:.06em;flex:0 1 auto;min-width:0}
/* ⚠️縮まない指定にすると、長い名を入れた節が器を押し広げ、狭い幅で横に振れる
     （実測＝内幅 320 で文書が 418 まで伸び、指で 114px 送れてしまった）。
     縮ませて折り返させる。短い名の節は元から器に収まるので、姿は変わらない。 */
.fh-dash{color:var(--gold-600);margin:0 .45em;flex:none}
.fh-lead{font-size:.62em;color:var(--fg-muted);font-weight:600;letter-spacing:.03em}
.feat-head .fh-link{font-family:var(--font-jp-sans);font-size:14px;color:var(--slate-600);cursor:pointer;
  white-space:nowrap;padding-bottom:6px;border:0;background:none;transition:color .2s}
.feat-head .fh-link:hover{color:var(--gold-700)}
.feat-head.is-dark{border-bottom-color:rgba(235,220,182,.5)}
.feat-head.is-dark .fh-no,.feat-head.is-dark .fh-en{color:var(--gold-400)}
.feat-head.is-dark .fh-jp{color:#fff}
.feat-head.is-dark .fh-lead{color:rgba(248,245,238,.72)}
.feat-head.is-dark .fh-dash{color:var(--gold-400)}
.feat-head.is-dark .fh-link{color:rgba(248,245,238,.7)}
.feat-head.is-dark .fh-link:hover{color:var(--gold-400)}

/* "記事に溶かす" inline CTA — a quiet underlined link with arrow */
.melt-cta{font-family:var(--font-jp-sans);font-size:15px;color:var(--slate-800);cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:6px 0;letter-spacing:.03em;
  position:relative;transition:gap .25s var(--ease),color .25s}
.melt-cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold-600);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.melt-cta:hover{gap:16px;color:var(--gold-700)}
.melt-cta:hover::after{transform:scaleX(1)}
.melt-cta .ar{font-size:15px}
.melt-cta.light{color:var(--paper-050)}
/* 首席の節が持つ、もう一段先へ渡す一行。⚠️この節は暗い面なので、明るい側の色で。
     釦ではないので `.melt-cta` より控えめに（下線だけを持たせる）。
     🔴意匠体系の散文リンクの規則が勝つので、上の並びと同じ `.ti a.<部品名>` の形で書く
       （実測＝部品名だけだと濃い字のまま出て、暗い面で読めなかった）。
     ⚠️体系の下線は背景で描くので、こちらは切って自分の下線だけを持たせる。 */
.ti a.learn-more-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--font-jp-sans);font-size:13px;letter-spacing:.02em;background-image:none;
  color:var(--paper-200);border-bottom:1px solid rgba(235,220,182,.4);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.ti a.learn-more-go:hover{color:var(--gold-400);border-color:var(--gold-400)}
.ti a.learn-more-go .ar{font-size:12px}
.melt-cta.light::after{background:var(--gold-400)}
.melt-cta.light:hover{color:var(--gold-400)}

.section{padding:clamp(72px,9vw,128px) 0}
.section-paper{background:var(--paper-050)}
.section-sunken{background:var(--paper-100);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* =====================================================================
   HEADER — 誌名＋号
   ===================================================================== */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .4s var(--ease),box-shadow .4s,border-color .4s}
.site-head{border-bottom:1px solid transparent}
.head-strip{max-width:1240px;margin:0 auto;padding:8px 44px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(235,220,182,.82);border-bottom:1px solid rgba(248,245,238,.16);transition:color .4s,border-color .4s}
.head-strip .hs-season{font-family:var(--font-jp-serif);letter-spacing:.14em;text-transform:none;color:rgba(248,245,238,.78)}
.head-inner{max-width:1240px;margin:0 auto;padding:0 44px;height:68px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;transition:height .4s var(--ease)}
.head-logo{justify-self:center;cursor:pointer;display:flex;align-items:center;background:none;border:0;padding:0}
.head-logo img{height:34px;display:block;transition:height .4s var(--ease)}
.head-nav{display:flex;gap:24px;align-items:center}
.head-nav.r{justify-content:flex-end}
.head-link{font-family:var(--font-jp-sans);font-size:13.5px;color:rgba(248,245,238,.86);cursor:pointer;
  position:relative;padding:5px 0;letter-spacing:.05em;white-space:nowrap;background:none;border:0;transition:color .2s}
.head-link:hover{color:#fff}
.head-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--gold-400);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.head-link:hover::after{transform:scaleX(1)}
.head-link.is-sister{color:rgba(235,220,182,.92)}
.head-link.is-sister .ar{font-size:11px;margin-left:3px}
/* the design system's .ti a is for prose links: it draws a gold underline at
   0 1.15em and owns `transition` (0,1,1). On component-shaped anchors
   (flex/grid/padded boxes) that line lands ON or ABOVE the text — suppress it,
   and re-declare each component's own transition, which .ti a otherwise kills.
   ★新しいコンポーネント型<a>クラスを作ったら必ずこのリストに追加すること */
.ti a.head-link,.ti a.melt-cta,.ti a.evp-logo,.ti a.evp-back,
.ti a.cal-row,.ti a.ev-row,.ti a.ws-row,.ti a.ws-foot-link,.ti a.club-join{background-image:none}
.ti a.head-link{transition:color .2s}
.ti a.melt-cta{transition:gap .25s var(--ease),color .25s}
.ti a.evp-back{transition:color .2s}
.ti a.ev-row{transition:background .3s var(--ease),padding-left .3s var(--ease)}
.ti a.ws-row{transition:border-color .25s var(--ease),background .25s,transform .25s}
.ti a.cal-row{transition:background .22s var(--ease),padding-left .22s var(--ease)}
.head-mini{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-jp-sans);font-size:12.5px;font-weight:600;
  color:var(--gold-400);cursor:pointer;background:none;border:1px solid rgba(214,188,126,.55);
  padding:7px 16px;border-radius:2px;letter-spacing:.06em;transition:color .25s,background .25s,border-color .25s}
.head-mini:hover{color:#fff;background:rgba(214,188,126,.14);border-color:var(--gold-400)}

/* solid (scrolled / on paper) */
.site-head.is-solid{background:rgba(252,251,246,.95);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);box-shadow:0 1px 18px rgba(41,54,58,.06)}
.site-head.is-solid .head-inner{height:60px}
.site-head.is-solid .head-logo img{height:30px}
.site-head.is-solid .head-strip{color:var(--warm-500);border-bottom-color:var(--line-soft)}
.site-head.is-solid .head-strip .hs-season{color:var(--warm-600)}
.site-head.is-solid .head-link{color:var(--slate-700)}
.site-head.is-solid .head-link:hover{color:var(--slate-900)}
.site-head.is-solid .head-link.is-sister{color:var(--gold-700)}
.site-head.is-solid .head-mini{color:var(--gold-700);border-color:var(--gold-500)}
.site-head.is-solid .head-mini:hover{color:var(--gold-700);background:var(--gold-050);border-color:var(--gold-600)}
/* hide centre logo while the giant cover masthead is showing */
.site-head .head-logo{transition:opacity .4s}
.site-head:not(.is-solid) .head-logo{opacity:0;pointer-events:none}

/* hamburger */
.head-burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;
  align-items:center;justify-content:center;color:rgba(248,245,238,.9)}
.site-head.is-solid .head-burger{color:var(--slate-800)}
.head-burger svg{width:22px;height:22px}

/* mobile drawer */
.mnav{position:fixed;inset:0;z-index:80;background:var(--night-900);color:var(--paper-050);
  display:flex;flex-direction:column;padding:26px 30px 40px;opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mnav.is-open{opacity:1;pointer-events:auto;transform:none}
.mnav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.mnav-top img{height:30px}
.mnav-close{background:none;border:0;color:var(--paper-050);cursor:pointer;font-size:26px;line-height:1}
.mnav-list{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}
.mnav-link{display:flex;align-items:baseline;gap:14px;padding:16px 4px;border-bottom:1px solid rgba(235,220,182,.16);
  cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.mnav-link .ml-en{font-family:var(--font-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400);min-width:62px}
.mnav-link .ml-jp{font-family:var(--font-jp-display);font-weight:600;font-size:21px;color:#fff;letter-spacing:.04em}
.mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:28px}

/* =====================================================================
   COVER — 表紙
   ===================================================================== */
.cover{position:relative;min-height:100svh;overflow:hidden;background:#0A1014;display:flex}
.cover-bg{position:absolute;inset:-3%;z-index:0;background:url('assets/hero.jpg') center/cover no-repeat;
  transform:scale(1.06);animation:coverZoom 18s var(--ease) both;will-change:transform}
@keyframes coverZoom{from{transform:scale(1.2)}to{transform:scale(1.06)}}
.cover-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,13,17,.74) 0%,rgba(8,13,17,.28) 26%,rgba(8,13,17,.42) 58%,rgba(8,13,17,.94) 100%)}
.cover-vign{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 50% 38%,transparent 50%,rgba(6,10,13,.55) 100%)}
.cover-in{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:96px 44px 30px;
  min-height:100svh;display:flex;flex-direction:column}

.cover-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(235,220,182,.9);padding-bottom:15px;border-bottom:1px solid rgba(235,220,182,.32)}
.cover-strip .cs-mid{font-family:var(--font-jp-serif);letter-spacing:.18em;text-transform:none;color:rgba(248,245,238,.7)}
.cover-strip .cs-season{font-family:var(--font-jp-serif);letter-spacing:.12em;text-transform:none;color:rgba(235,220,182,.95)}

.cover-masthead{text-align:center;margin-top:clamp(28px,5vw,54px)}
.cover-masthead img{height:clamp(70px,10vw,128px);width:auto;display:inline-block;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.6))}
.cover-masthead .cm-en{font-family:var(--font-label);font-size:clamp(10px,1vw,12px);letter-spacing:.42em;
  text-transform:uppercase;color:rgba(235,220,182,.82);margin-top:20px}

.cover-body{margin-top:auto;max-width:760px}
.cover-tab{display:inline-block;font-family:var(--font-jp-sans);font-weight:700;font-size:12px;letter-spacing:.2em;
  color:#16242B;background:var(--gold-400);padding:6px 16px;margin-bottom:22px}
.cover-theme{font-family:var(--font-jp-serif);font-size:clamp(14px,1.6vw,17px);letter-spacing:.16em;
  color:var(--gold-400);margin:0 0 14px}
.cover-title{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(3.2rem,9vw,6.4rem);
  color:#fff;line-height:1.04;letter-spacing:.04em;margin:0 0 26px;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.cover-lead{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,17px);line-height:2;
  color:rgba(248,245,238,.88);margin:0;max-width:44ch}

.cover-baseline{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:clamp(34px,5vw,58px)}
.cover-scroll{display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(248,245,238,.6);white-space:nowrap}
.cover-scroll .csl{width:1px;height:46px;background:linear-gradient(rgba(235,220,182,.7),transparent);position:relative;overflow:hidden}
.cover-scroll .csl::after{content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;
  background:linear-gradient(transparent,var(--gold-400));animation:scrollLine 2.6s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateY(0)}70%,100%{transform:translateY(92px)}}
.cover-issue{font-family:var(--font-display);font-style:italic;font-size:14px;letter-spacing:.06em;
  color:rgba(235,220,182,.8);text-align:right;white-space:nowrap}

/* cover entrance choreography */
@keyframes coverUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mastIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
/* Entrance is gated on .is-intro (added by JS, removed after it finishes) and
   on no-preference. Base state is VISIBLE, so if the animation never runs
   (reduced motion, print/export, a backgrounded tab) content is never hidden. */
@media (prefers-reduced-motion:no-preference){
  .cover.is-intro .cover-masthead{animation:mastIn 1.3s var(--ease) .4s both}
  .cover.is-intro .cover-body{animation:coverUp 1.1s var(--ease) .7s both}
  .cover.is-intro .cover-baseline{animation:coverUp 1.1s var(--ease) .95s both}
}
@media print{
  .cover-masthead,.cover-body,.cover-baseline{animation:none!important;opacity:1!important;transform:none!important}
}

/* =====================================================================
   CONTENTS — 目次
   ===================================================================== */
.toc{padding:clamp(76px,9vw,120px) 0 clamp(40px,6vw,72px)}
.toc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-bottom:3px solid var(--slate-800);padding-bottom:18px;margin-bottom:14px}
.toc-head .th-l{display:flex;flex-direction:column;flex:none}
.toc-head .th-l .th-kick{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--gold-700);margin-bottom:10px;white-space:nowrap}
.toc-head .th-l .th-en{font-family:"EB Garamond",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.8rem,3vw,2.4rem);color:var(--fg-faint);line-height:1;letter-spacing:.01em;white-space:nowrap}
.toc-head .th-jp{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.7rem,3vw,2.3rem);
  color:var(--fg-strong);letter-spacing:.28em}
.toc-issue-note{font-family:var(--font-jp-serif);font-size:13.5px;color:var(--fg-faint);
  letter-spacing:.06em;margin:0 0 36px;text-align:left;max-width:60ch;line-height:1.7}

.toc-list{list-style:none;margin:0;padding:0}
.toc-item{display:grid;grid-template-columns:78px 1fr auto;gap:26px;align-items:baseline;
  padding:24px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .3s var(--ease),border-bottom-color .3s var(--ease)}
.toc-item:hover{background:var(--paper-100);border-bottom-color:var(--gold-500)}
.toc-no{font-family:var(--font-display);font-style:italic;font-size:30px;color:var(--gold-700);line-height:1}
.toc-no .tn-pg{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--fg-faint);margin-top:6px;font-family:var(--font-label)}
.toc-cat{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:9px}
.toc-title{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.35rem,2.5vw,1.75rem);
  color:var(--fg-strong);line-height:1.4;margin:0 0 7px;display:flex;align-items:baseline;flex-wrap:wrap}
.toc-genre{color:var(--fg-strong);letter-spacing:.08em;flex:none}
.toc-dash{color:var(--gold-600);margin:0 .5em;flex:none}
.toc-lead-in{color:var(--fg-muted);font-size:.78em;letter-spacing:.03em;font-weight:600}
.toc-sub{font-family:var(--font-jp-serif);font-size:clamp(14.5px,1.2vw,16px);color:var(--fg-muted);
  letter-spacing:.03em;line-height:1.55;margin:0 0 6px}
.toc-by{font-family:var(--font-jp-serif);font-size:12.5px;color:var(--fg-faint);letter-spacing:.04em}
.toc-arrow{font-family:var(--font-jp-sans);font-size:18px;color:var(--slate-400);align-self:center;transition:transform .3s,color .3s}
.toc-item:hover .toc-arrow{color:var(--gold-700);transform:translateX(5px)}

/* =====================================================================
   FEATURE 01 — 4つの天狼院（店舗グラビア / scrollytelling crossfade）
   ===================================================================== */
.stores{position:relative;background:#0A0E11;color:var(--paper-050)}
.stores-intro{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:clamp(76px,9vw,120px) 44px 0}
.stores-intro .fh-jp,.stores-intro .fh-no,.stores-intro .fh-en{color:inherit}
.stores-lead{font-family:var(--font-jp-serif);font-size:clamp(15px,1.5vw,18px);line-height:2.05;
  color:rgba(248,245,238,.82);max-width:48ch;margin:0 0 8px}

.scrolly{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,72px) 44px clamp(60px,8vw,110px)}
.scrolly-media{position:sticky;top:0;height:100svh;align-self:start;margin-top:-1px}
.scrolly-media-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:98px 0 22px}
.scrolly-frame{position:relative;width:100%;height:min(72svh,560px);border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.scrolly-img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform 1.2s var(--ease);transform:scale(1.06)}
.scrolly-img.is-on{opacity:1;transform:scale(1)}
.scrolly-img image-slot{width:100%;height:100%;display:block}
.scrolly-imgcap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--font-label);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(248,245,238,.78);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.scrolly-count{position:absolute;right:16px;top:14px;z-index:2;font-family:var(--font-display);font-style:italic;
  font-size:15px;color:rgba(235,220,182,.9);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.scrolly-steps{display:flex;flex-direction:column}
.scrolly-step{min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:8svh 0 8svh 52px}
.store-en{font-family:var(--font-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-400)}
.store-no{font-family:var(--font-display);font-style:italic;font-size:13px;color:rgba(235,220,182,.7);margin-left:12px;letter-spacing:.06em}
.store-name{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.7rem);
  color:#fff;margin:14px 0 6px;letter-spacing:.04em;line-height:1.18}
.store-area{font-family:var(--font-jp-sans);font-size:13px;color:rgba(248,245,238,.62);letter-spacing:.08em;margin-bottom:22px}
.store-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.store-tag{font-family:var(--font-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(235,220,182,.92);border:1px solid rgba(235,220,182,.34);border-radius:999px;padding:5px 13px}
.store-essay{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,16.5px);line-height:2.05;
  color:rgba(248,245,238,.86);margin:0 0 26px;max-width:40ch}
.store-essay .drop{font-family:var(--font-jp-display);font-weight:600;font-size:2.6em;float:left;line-height:.82;
  margin:6px 12px 0 0;color:var(--gold-400)}

/* =====================================================================
   FEATURE 02 — 今月、天狼院で起きること（イベント / 誌面カレンダー）
   ===================================================================== */
.events{background:var(--paper-050)}
.ev-lead{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,17px);line-height:2;color:var(--fg-muted);
  max-width:52ch;margin:0 0 46px}
.ev-cal{border-top:1px solid var(--line)}
.ev-row{display:grid;grid-template-columns:150px 1fr auto;gap:34px;align-items:center;
  padding:30px 8px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .3s var(--ease),padding-left .3s var(--ease)}
.ev-row:hover{background:var(--paper-100);border-bottom-color:var(--gold-500)}
.ev-date{display:flex;flex-direction:column;gap:2px}
.ev-date .ed-md{font-family:var(--font-display);font-size:34px;color:var(--fg-strong);line-height:1;letter-spacing:.01em}
.ev-date .ed-dow{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700);margin-top:7px}
.ev-date .ed-time{font-family:var(--font-jp-sans);font-size:12px;color:var(--fg-faint);margin-top:3px}
.ev-main .ev-cat{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:8px;display:inline-flex;gap:10px;align-items:center}
.ev-main .ev-place{color:var(--fg-faint);letter-spacing:.06em}
.ev-main .ev-ttl{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.55rem);
  color:var(--fg-strong);line-height:1.4;margin:0 0 8px}
.ev-main .ev-desc{font-family:var(--font-jp-serif);font-size:14px;line-height:1.85;color:var(--fg-muted);margin:0;max-width:54ch}
.ev-go{display:flex;align-items:center;gap:14px;justify-self:end}
.ev-seats{font-family:var(--font-jp-sans);font-size:12px;color:var(--fg-faint);white-space:nowrap}
.ev-seats.hot{color:var(--danger)}
.ev-book{font-family:var(--font-jp-sans);font-size:13.5px;color:var(--slate-700);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:color .25s,gap .25s}
.ev-row:hover .ev-book{color:var(--gold-700);gap:12px}
.ev-foot{display:flex;justify-content:flex-end;margin-top:32px}

/* =====================================================================
   FEATURE 03 — THE SYLLABUS（天狼院ゼミ、年間時間割）
   ===================================================================== */
.syl-section{position:relative;overflow:hidden}
.learn{position:relative;overflow:hidden}
/* --- dark half: FeatHead + faculty index + flagship --- */
.syl-dark{position:relative;background:var(--night-900);color:var(--paper-050);overflow:hidden;
  padding:clamp(76px,9vw,120px) 0 clamp(56px,7vw,96px)}
.learn-bg{position:absolute;inset:0;z-index:0;background:url('assets/shelf.jpg') center/cover no-repeat;opacity:.30}
.learn-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(18,30,36,.94),rgba(18,30,36,.78) 40%,rgba(18,30,36,.97))}
.syl-dark-in{position:relative;z-index:2}
.syl-sub{font-family:var(--font-jp-serif);font-size:clamp(13.5px,1.2vw,15px);line-height:1.85;
  color:rgba(248,245,238,.7);letter-spacing:.04em;margin:-30px 0 0;max-width:62ch}

/* --- Block 2 · FACULTY INDEX --- */
.fac-index{margin:clamp(40px,5vw,64px) 0 clamp(48px,6vw,72px)}
.fac-intro{font-family:var(--font-jp-serif);font-size:clamp(15px,1.5vw,17.5px);line-height:2;
  color:rgba(248,245,238,.86);max-width:46ch;margin:0 0 28px}
.fac-rail-head{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid rgba(235,220,182,.28);padding-bottom:12px;margin-bottom:6px}
.fac-rail-en{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--gold-400)}
.fac-rail-jp{font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(248,245,238,.58)}
.fac-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px)}
.fac-row{display:grid;grid-template-columns:30px 38px 1fr auto;gap:16px;align-items:center;
  padding:16px 6px;border-bottom:1px solid rgba(248,245,238,.12);cursor:pointer;
  transition:background .25s var(--ease),border-bottom-color .25s}
.fac-row:hover{background:rgba(248,245,238,.05);border-bottom-color:var(--gold-500)}
.fac-no{font-family:var(--font-display);font-style:italic;font-size:16px;color:rgba(235,220,182,.7)}
.fac-glyph{font-family:var(--font-jp-display);font-weight:600;font-size:26px;color:var(--acc,#8aa0a6);
  filter:saturate(1.4) brightness(1.5);line-height:1;text-align:center}
.fac-main{min-width:0}
.fac-name{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.18rem);color:#fff;
  letter-spacing:.04em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fac-en{font-family:var(--font-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(235,220,182,.6)}
.fac-meta{font-family:var(--font-jp-sans);font-size:12px;color:rgba(248,245,238,.62);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fac-flag{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;color:#16242B;background:var(--gold-400);padding:2px 7px;border-radius:2px}
.fac-soon{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;color:rgba(235,220,182,.7);border:1px solid rgba(235,220,182,.34);padding:2px 7px;border-radius:999px}
.fac-arrow{font-family:var(--font-jp-sans);font-size:15px;color:rgba(235,220,182,.5);transition:transform .25s,color .25s}
.fac-row:hover .fac-arrow{color:var(--gold-400);transform:translateY(3px)}
.fac-row.is-coming{opacity:.62}
.fac-row.is-active{background:rgba(235,220,182,.1);padding-left:14px;box-shadow:inset 3px 0 0 var(--acc)}
.fac-row.is-active .fac-name{color:#fff}
.fac-row.is-active .fac-arrow{color:var(--gold-400)}
.fac-row.is-active.is-coming{opacity:1}

/* --- FLAGSHIP SLIDER --- */
.fslider{margin-top:clamp(38px,4.5vw,60px)}
.fslide-stage{position:relative;margin-top:clamp(30px,4vw,48px);padding-top:clamp(30px,4vw,46px);
  border-top:2px solid rgba(235,220,182,.45);min-height:clamp(420px,40vw,500px)}
.fslide{animation:fslideIn .7s var(--ease) both}
@keyframes fslideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fslide{animation:none}}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-jp-display);font-weight:600;
  font-size:14px;color:#fff;letter-spacing:.05em;margin-bottom:18px}
.hero-tag .hero-glyph{font-family:var(--font-jp-display);font-weight:600;font-size:24px;color:var(--acc);
  filter:saturate(1.4) brightness(1.55);line-height:1}
.hero-tag .hero-en{font-family:var(--font-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(235,220,182,.7)}
.fslide-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(30px,4vw,46px)}
.fslide-arrow{width:44px;height:44px;border-radius:999px;border:1px solid rgba(235,220,182,.34);background:none;
  color:rgba(248,245,238,.86);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .25s var(--ease),border-color .25s,color .25s}
.fslide-arrow:hover{background:rgba(248,245,238,.1);border-color:rgba(235,220,182,.7);color:#fff}
.fslide-arrow svg{width:18px;height:18px}
.fslide-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fslide-dot{width:34px;height:34px;border-radius:999px;border:1px solid rgba(235,220,182,.26);background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease)}
.fslide-dot span{font-family:var(--font-jp-display);font-weight:600;font-size:13px;color:rgba(235,220,182,.66);line-height:1}
.fslide-dot:hover{border-color:rgba(235,220,182,.6)}
.fslide-dot:hover span{color:rgba(248,245,238,.95)}
.fslide-dot.is-on{background:var(--gold-400);border-color:transparent}
.fslide-dot.is-on span{color:#16242B}

/* --- Block 3 · FLAGSHIP --- */
.flagship{margin-top:clamp(40px,5vw,64px);padding-top:clamp(34px,4vw,52px);border-top:2px solid rgba(235,220,182,.45)}
.flagship-badge{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-jp-sans);font-size:12.5px;
  color:rgba(248,245,238,.86);letter-spacing:.06em;margin-bottom:26px}
.flagship-badge .fb-mark{font-family:var(--font-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-400);background:linear-gradient(transparent 62%,rgba(194,160,82,.32) 62%);padding:2px 4px}
.flagship-lead .drop{font-family:var(--font-jp-display);font-weight:600;font-size:3.1em;float:left;line-height:.78;
  margin:6px 14px -2px 0;color:var(--gold-400)}
.flagship-price{margin-top:18px;font-family:var(--font-jp-sans);font-size:13px;letter-spacing:.04em;
  color:rgba(248,245,238,.72);text-align:center}
.flagship-price b{color:var(--gold-400);font-weight:600;font-size:1.16em}
.syl-cell-more{margin-top:10px;font-size:11.5px!important;color:var(--slate-600)!important;text-align:left}

/* --- Block 4 · turn lead (dark→light bridge) --- */
.syl-turn{margin:clamp(44px,5vw,68px) auto 0;max-width:64ch;text-align:center;
  font-family:var(--font-jp-serif);font-size:clamp(15px,1.5vw,17px);line-height:1.9;letter-spacing:.06em;
  color:rgba(248,245,238,.82);position:relative;padding-top:30px}
.syl-turn::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:1px;background:rgba(235,220,182,.5)}

/* --- Block 5 · SYLLABUS MATRIX (light) --- */
.syl-light{position:relative;background:var(--paper-050);padding:clamp(64px,8vw,104px) 0 clamp(72px,9vw,120px)}
.syl-light-head{margin-bottom:clamp(30px,4vw,44px)}
.syl-light-head .slh-en{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--gold-700)}
.syl-light-head .slh-jp{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);
  color:var(--fg-strong);letter-spacing:.05em;margin:6px 0 12px}
.syl-light-head .slh-note{font-family:var(--font-jp-serif);font-size:14.5px;line-height:1.9;color:var(--fg-muted);margin:0;max-width:60ch}

.syl-matrix{border-top:2px solid var(--slate-800)}
.syl-colhead{display:grid;grid-template-columns:180px repeat(4,1fr);gap:12px;padding:14px 0 10px;border-bottom:1px solid var(--line)}
.syl-colhead-corner{display:flex;flex-direction:column;gap:3px;padding-left:4px}
.syl-colhead-corner .sch-en{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--gold-700)}
.syl-colhead-corner .sch-jp{font-family:var(--font-jp-sans);font-size:11px;color:var(--fg-faint);letter-spacing:.06em}
.syl-col{display:flex;flex-direction:column;gap:3px;padding:6px 10px;border-left:1px solid var(--line-soft)}
.syl-col-jp{font-family:var(--font-jp-display);font-weight:600;font-size:13.5px;color:var(--fg-strong);letter-spacing:.04em}
.syl-col-sub{font-family:var(--font-label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-700)}

.syl-row{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:stretch;
  border-bottom:1px solid var(--line);padding:18px 0}
.syl-rowhead{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"glyph name" "glyph meta";
  column-gap:14px;align-items:center;background:none;border:0;border-left:3px solid var(--acc);
  padding:6px 0 6px 16px;text-align:left;cursor:default;width:100%}
.syl-glyph{grid-area:glyph;font-family:var(--font-jp-display);font-weight:600;font-size:34px;color:var(--acc);line-height:1;align-self:center}
.syl-rowname{grid-area:name;font-family:var(--font-jp-display);font-weight:600;font-size:1.15rem;color:var(--fg-strong);
  letter-spacing:.05em;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.syl-rowen{font-family:var(--font-label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.syl-rowmeta{grid-area:meta;font-family:var(--font-jp-sans);font-size:12px;color:var(--fg-muted);margin-top:5px;letter-spacing:.03em}
.syl-rowtoggle{display:none}
.syl-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.syl-slot{display:flex;flex-direction:column;gap:12px}
.syl-slot-span{grid-column:1/-1}
/* 創の系だけが持つ帯 ── つくるものの札と、学んだ先の流れ。
   ⚠️行は 180px + 1fr の二列なので、帯はコマと同じ二列目に置く（狭い幅では下の @media で戻す）。
   ⚠️札も流れも wrap で折る。器に連れる形にして、下限で器をはみ出させない。 */
.syl-craft{grid-column:2;margin-top:14px;padding-top:15px;border-top:1px solid var(--line)}
.syl-craft-genres{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.syl-craft-lab{font-family:var(--font-label);font-size:9px;letter-spacing:.16em;color:var(--fg-faint)}
.syl-genre{font-family:var(--font-label);font-size:10.5px;letter-spacing:.10em;color:var(--slate-700);
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 11px;background:var(--paper-000)}
/* ⚠️歩は器に連れる格子で揃える。折れ方を成り行きに任せると、広い器で
     四つ＋二つのような不揃いな折れ方になる（実測＝器 960 に対し中身 1159）。
     ⚠️下限は `min(…,100%)` で包む。固定のままだと、器が下限より狭い幅で
     一列が器をはみ出す ── しかも横スクロールが出ないので目では気づけない。 */
.syl-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:14px 0;margin:15px 0 0;padding:0;list-style:none}
.syl-flow-step{position:relative;display:flex;flex-direction:column;gap:3px;padding-right:15px;margin-right:15px;min-width:0}
.syl-flow-step+.syl-flow-step::before{content:"→";position:absolute;left:-16px;top:1px;
  color:var(--fg-faint);font-size:11px;line-height:1.5}
.syl-flow-t{font-size:12.5px;font-weight:600;color:var(--slate-800);letter-spacing:.04em}
.syl-flow-d{font-size:11px;color:var(--slate-600);line-height:1.65}
.syl-flow-go{color:var(--slate-700);border-bottom:1px solid var(--line-strong)}
.syl-flow-go:hover{color:var(--slate-800)}
.syl-slot.is-empty{border:1px dashed var(--line);border-radius:var(--radius-md);min-height:120px;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(41,54,58,.04) 9px,rgba(41,54,58,.04) 10px)}
.syl-more{align-self:flex-start;color:var(--slate-600)}

/* --- cells --- */
.syl-cell{position:relative;background:var(--paper-000);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 14px 12px;display:flex;flex-direction:column;cursor:pointer;min-height:144px;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.syl-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--slate-300)}
.syl-cell-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.syl-code{font-family:var(--font-label);font-size:9.5px;letter-spacing:.16em;color:var(--fg-faint)}
.syl-tag{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-700);border:1px solid var(--line-strong);padding:3px 9px;border-radius:999px}
.syl-tag.is-main{color:#16242B;background:var(--gold-400);border-color:transparent}
.syl-tag.is-free{color:var(--success);border-color:color-mix(in srgb,var(--success) 50%,transparent)}
.syl-tag.is-coming{color:var(--fg-faint);border-style:dashed}
.syl-star{font-family:var(--font-jp-sans);font-size:11px;color:var(--gold-700);letter-spacing:.1em;margin-bottom:6px}
.syl-name{font-family:var(--font-jp-display);font-weight:600;font-size:1rem;color:var(--fg-strong);
  line-height:1.38;letter-spacing:.01em;margin:0 0 7px}
.syl-hook{font-family:var(--font-jp-serif);font-size:12.5px;line-height:1.7;color:var(--fg-muted);margin:0 0 11px}
.syl-proof{font-family:var(--font-jp-sans);font-size:11.5px;color:var(--slate-700);letter-spacing:.03em;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:7px 0;margin-bottom:12px;line-height:1.5}
.syl-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.syl-price{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--fg-strong);font-weight:500;letter-spacing:.02em}
.syl-cell.is-main{border-top:3px solid var(--acc);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 6%,var(--paper-000)),var(--paper-000))}
.syl-cell.is-free .syl-price{color:var(--success)}
.syl-cell.is-limited{border-color:color-mix(in srgb,var(--gold-600) 40%,var(--line))}

/* empty + coming = letterpress hatch */
.syl-cell.is-coming{cursor:default;border-style:dashed;
  background-image:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(41,54,58,.04) 9px,rgba(41,54,58,.04) 10px)}
.syl-cell.is-coming:hover{transform:none;box-shadow:none;border-color:var(--line)}
.syl-cell.is-coming .syl-name,.syl-cell.is-coming .syl-price{color:var(--fg-muted)}
.syl-stamp{position:absolute;top:12px;right:-6px;font-family:var(--font-label);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-700);border:1px solid var(--gold-600);border-radius:2px;
  padding:3px 8px;transform:rotate(-5deg);background:var(--paper-000);opacity:.85}

/* --- Block 6 · section CTA band --- */
.syl-cta{margin-top:clamp(44px,5vw,68px);text-align:center;padding-top:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.syl-cta-line{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--fg-strong);letter-spacing:.04em;margin:0 0 22px}
.syl-cta-row{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap}

/* melt-cta size/weight variants used in this section */
.melt-cta.sm{font-size:13px;gap:7px;padding:4px 0}
.melt-cta.sm .ar{font-size:13px}
.melt-cta.is-strong{font-weight:600}
.melt-cta.is-soon{color:var(--fg-faint)}
.melt-cta.is-soon::after{background:var(--fg-faint)}
.melt-cta.is-soon:hover{color:var(--slate-700)}
.melt-cta.light.is-strong{color:#fff}

/* legacy flagship inner styles (kept) */
.learn-in{position:relative;z-index:2}
.learn-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,80px);align-items:center}
.learn-eyebrow{font-family:var(--font-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-400);margin-bottom:18px}
.learn-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(2rem,4vw,3.1rem);color:#fff;
  line-height:1.32;letter-spacing:.03em;margin:0 0 26px}
.learn-h .em{color:var(--gold-400)}
.learn-p{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,16.5px);line-height:2.1;
  color:rgba(248,245,238,.84);margin:0 0 22px;max-width:46ch}
.learn-quote{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.9;color:#fff;border-left:2px solid var(--gold-500);padding-left:22px;margin:30px 0;letter-spacing:.03em}
.learn-quote cite{display:block;font-family:var(--font-jp-sans);font-size:13px;font-style:normal;
  color:rgba(235,220,182,.8);margin-top:14px;letter-spacing:.06em}
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(235,220,182,.22);
  border:1px solid rgba(235,220,182,.22);border-radius:6px;overflow:hidden}
.proof-cell{background:rgba(18,30,36,.6);backdrop-filter:blur(2px);padding:34px 26px;text-align:center}
.proof-num{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.8rem);color:var(--gold-400);line-height:1;letter-spacing:.01em}
.proof-num .pn-u{font-size:.42em;color:rgba(248,245,238,.86);margin-left:4px;letter-spacing:.04em}
.proof-lbl{font-family:var(--font-jp-sans);font-size:12.5px;color:rgba(248,245,238,.7);margin-top:12px;letter-spacing:.06em;line-height:1.5}
.learn-cta-row{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* shared solid buttons */
.btn{font-family:var(--font-jp-sans);font-weight:500;font-size:15px;border-radius:999px;padding:14px 30px;
  border:1px solid transparent;cursor:pointer;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;transition:all .25s var(--ease)}
.btn-gold{background:var(--gold-500);color:var(--slate-900)}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-1px);box-shadow:0 10px 26px rgba(194,160,82,.3)}
.btn-ink{background:var(--slate-800);color:var(--paper-050)}
.btn-ink:hover{background:var(--slate-700);transform:translateY(-1px)}
.btn-ghost-l{background:transparent;color:var(--paper-050);border-color:rgba(248,245,238,.42)}
.btn-ghost-l:hover{background:rgba(248,245,238,.1);border-color:rgba(248,245,238,.75)}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--slate-800)}
.btn-outline:hover{border-color:var(--slate-500);background:var(--paper-100)}

/* =====================================================================
   04 読書クラブ — READING LIFE 編集部入口
   ===================================================================== */
.club{background:var(--paper-050)}

/* ① identity ＋ ② offer */
.club-id{display:grid;grid-template-columns:1.5fr .95fr;gap:clamp(34px,5vw,72px);align-items:start;
  padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,60px);border-bottom:1px solid var(--line)}
.club-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.9rem,3.8vw,3rem);
  color:var(--fg-strong);line-height:1.32;letter-spacing:.02em;margin:0 0 20px}
.club-h .ch-em{color:var(--gold-700);position:relative;white-space:nowrap}
.club-h .ch-em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.34em;
  background:linear-gradient(transparent 55%,rgba(194,160,82,.26) 55%);z-index:-1}
.club-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(17px,1.7vw,21px);color:var(--gold-700);margin:0 0 14px;letter-spacing:.02em}
.club-lead{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,16.5px);line-height:2.05;color:var(--fg-muted);margin:0;max-width:46ch}

.club-offer{background:var(--night-900);color:var(--paper-050);border-radius:var(--radius-lg);
  padding:clamp(26px,2.6vw,34px) clamp(24px,2.4vw,32px);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.club-offer::before{content:"✦";position:absolute;top:-10px;right:6px;font-size:90px;color:rgba(235,220,182,.07);line-height:1}
.co-en{font-family:var(--font-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-400);margin-bottom:14px}
.co-price{display:flex;align-items:baseline;gap:4px;color:#fff;font-family:var(--font-display);line-height:1}
.co-price b{font-size:clamp(3rem,5.2vw,4rem);font-weight:500;letter-spacing:.01em}
.co-cur{font-family:var(--font-jp-display);font-weight:600;font-size:1.1rem;margin-left:2px}
.co-per{font-family:var(--font-jp-sans);font-size:14px;color:rgba(248,245,238,.66);margin-left:6px}
.co-allin{display:inline-block;font-family:var(--font-jp-sans);font-weight:700;font-size:11px;letter-spacing:.16em;
  color:#16242B;background:var(--gold-400);padding:4px 12px;border-radius:999px;margin:14px 0 18px}
.co-list{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(235,220,182,.2);
  display:flex;flex-direction:column;gap:11px}
.co-list li{font-family:var(--font-jp-serif);font-size:14px;color:rgba(248,245,238,.86);line-height:1.5;
  padding-left:22px;position:relative}
.co-list li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--gold-400);font-size:11px}

/* ③ 主役 ＋ ⑥ スケジュール（midnight panel） */
.club-core{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--night-900);color:var(--paper-050);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:clamp(34px,4vw,52px)}
.cc-proof{padding:clamp(30px,3.4vw,48px);position:relative}
.cc-kick{display:flex;align-items:center;gap:12px;font-family:var(--font-jp-sans);font-size:13px;
  color:rgba(235,220,182,.86);letter-spacing:.06em;margin-bottom:18px}
.cc-mark{font-family:var(--font-jp-sans);font-weight:700;font-size:11px;letter-spacing:.14em;color:#16242B;
  background:var(--gold-400);padding:4px 11px;border-radius:999px}
.cc-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.6rem,2.8vw,2.3rem);color:#fff;
  line-height:1.34;letter-spacing:.03em;margin:0 0 16px}
.cc-p{font-family:var(--font-jp-serif);font-size:15px;line-height:2;color:rgba(248,245,238,.82);margin:0 0 28px;max-width:40ch}
.cc-eq{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:0 0 18px}
.eq-side{border:1px solid rgba(235,220,182,.24);border-radius:var(--radius-md);padding:18px 14px;text-align:center;
  display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.02)}
.eq-side .eq-cap{font-family:var(--font-jp-sans);font-size:11px;letter-spacing:.08em;color:rgba(248,245,238,.6)}
.eq-side .eq-calc{font-family:var(--font-jp-sans);font-size:13px;color:rgba(248,245,238,.82)}
.eq-side .eq-calc i{font-style:normal;color:rgba(235,220,182,.7);margin:0 2px}
.eq-side .eq-sum{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:.01em;margin-top:3px}
.eq-side .eq-sum small{font-family:var(--font-jp-sans);font-size:.32em;letter-spacing:.04em;margin-left:3px;font-weight:400}
.eq-win{border-color:rgba(194,160,82,.5);background:rgba(194,160,82,.08)}
.eq-win .eq-sum{color:var(--gold-400)}
.eq-fee .eq-sum{color:rgba(248,245,238,.92)}
.eq-gt{font-family:var(--font-display);font-size:2.4rem;color:var(--gold-400);line-height:1;text-align:center}
.cc-foot{font-family:var(--font-jp-display);font-weight:600;font-size:15px;color:var(--gold-400);margin:0;letter-spacing:.04em}

/* ⑥ schedule rail */
.cc-sched{padding:clamp(26px,3vw,38px);background:rgba(8,13,17,.42);border-left:1px solid rgba(235,220,182,.16);
  display:flex;flex-direction:column}
.ws-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.ws-kick{font-family:var(--font-jp-display);font-weight:600;font-size:16px;color:#fff;letter-spacing:.03em}
.ws-series{font-family:var(--font-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-top:5px}
.ws-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(248,245,238,.6);white-space:nowrap;flex:none}
.ws-live .ws-dot{width:7px;height:7px;border-radius:999px;background:rgba(248,245,238,.4)}
.ws-live.is-on{color:var(--gold-400)}
.ws-live.is-on .ws-dot{background:var(--gold-400);box-shadow:0 0 0 0 rgba(194,160,82,.5);animation:wsPulse 2s var(--ease) infinite}
@keyframes wsPulse{0%{box-shadow:0 0 0 0 rgba(194,160,82,.5)}70%,100%{box-shadow:0 0 0 7px rgba(194,160,82,0)}}
@media (prefers-reduced-motion:reduce){.ws-live.is-on .ws-dot{animation:none}}
.ws-list{display:flex;flex-direction:column;gap:8px;max-height:332px;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:rgba(235,220,182,.3) transparent}
.ws-list::-webkit-scrollbar{width:5px}
.ws-list::-webkit-scrollbar-thumb{background:rgba(235,220,182,.28);border-radius:999px}
.ws-row{display:grid;grid-template-columns:48px 30px 1fr auto;gap:12px;align-items:center;text-decoration:none;
  padding:11px 12px;border:1px solid rgba(235,220,182,.16);border-radius:var(--radius-md);
  background:rgba(255,255,255,.02);transition:border-color .25s var(--ease),background .25s,transform .25s}
.ws-row:hover{border-color:rgba(235,220,182,.5);background:rgba(235,220,182,.06);transform:translateX(3px)}
.ws-date{text-align:center;line-height:1.1}
.ws-date b{display:block;font-family:var(--font-display);font-size:17px;color:#fff;letter-spacing:.01em}
.ws-date i{font-family:var(--font-jp-sans);font-style:normal;font-size:10px;color:rgba(248,245,238,.55)}
.ws-type{width:30px;height:30px;border-radius:999px;border:1px solid rgba(235,220,182,.4);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;
  color:var(--gold-400);font-style:italic}
.ws-type.is-sp{font-family:var(--font-jp-sans);font-size:10px;font-style:normal;color:#16242B;background:var(--gold-400);border-color:transparent;letter-spacing:.02em}
.ws-main{min-width:0}
.ws-title{display:block;font-family:var(--font-jp-serif);font-size:13.5px;color:rgba(248,245,238,.92);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-time{font-family:var(--font-jp-sans);font-size:10.5px;color:rgba(248,245,238,.5);letter-spacing:.04em}
.ws-go{font-family:var(--font-jp-sans);font-size:12px;color:rgba(235,220,182,.86);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.ws-go i{font-style:normal;transition:transform .25s var(--ease)}
.ws-row:hover .ws-go{color:var(--gold-400)}
.ws-row:hover .ws-go i{transform:translateX(3px)}
.ws-row.is-special{border-color:rgba(194,160,82,.4);background:rgba(194,160,82,.07)}
.ws-spdiv{display:flex;align-items:center;gap:12px;margin:6px 2px 2px}
.ws-spdiv span{font-family:var(--font-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)}
.ws-spdiv::after{content:"";flex:1;height:1px;background:rgba(235,220,182,.2)}
.ws-skel{height:54px;border-radius:var(--radius-md);background:rgba(255,255,255,.04);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 14px;overflow:hidden;position:relative}
.ws-skel span{height:9px;border-radius:4px;background:rgba(235,220,182,.12)}
.ws-skel span:first-child{width:40%}.ws-skel span:last-child{width:72%}
.ws-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(235,220,182,.08) 50%,transparent 70%);
  transform:translateX(-100%);animation:wsShimmer 1.5s infinite}
@keyframes wsShimmer{to{transform:translateX(100%)}}
.ws-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(235,220,182,.16);
  font-family:var(--font-jp-sans);font-size:12px;color:rgba(248,245,238,.6)}
.ws-foot b{color:var(--gold-400);font-weight:600}
.ws-foot-link{display:inline-flex;align-items:center;gap:5px;color:rgba(235,220,182,.86);text-decoration:none;white-space:nowrap}
.ws-foot-link i{font-style:normal}
.ws-foot-link:hover{color:var(--gold-400)}

/* ④ ⑤ duo cards */
.club-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px);margin-bottom:clamp(34px,4vw,48px)}
.club-card{background:var(--paper-000);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,2.8vw,38px);box-shadow:var(--shadow-xs);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.club-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--slate-300)}
.cd-icon{width:46px;height:46px;border-radius:999px;background:var(--paper-100);border:1px solid var(--gold-200);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-jp-display);font-weight:600;
  font-size:20px;color:var(--gold-700);margin-bottom:18px}
.cd-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.65rem);color:var(--fg-strong);
  line-height:1.4;letter-spacing:.03em;margin:0 0 12px}
.cd-p{font-family:var(--font-jp-serif);font-size:14.5px;line-height:1.95;color:var(--fg-muted);margin:0 0 18px;max-width:42ch}

/* 主CTA */
.club-join-row{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.club-join{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-jp-sans);font-weight:500;
  font-size:clamp(16px,1.6vw,18px);color:var(--gold-700);letter-spacing:.04em;text-decoration:none;
  padding:15px 38px;border:1.5px solid var(--gold-500);border-radius:999px;background:transparent;
  transition:background .3s var(--ease),color .3s,gap .3s,box-shadow .3s}
.club-join .ar{transition:transform .3s var(--ease)}
.club-join:hover{background:var(--gold-500);color:#16242B;gap:18px;box-shadow:0 12px 30px rgba(194,160,82,.26)}
.club-join:hover .ar{transform:translateX(4px)}
.club-note{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--fg-faint);margin:0;letter-spacing:.03em}

@media (max-width:1000px){
  .club-id{grid-template-columns:1fr;gap:32px}
  .club-core{grid-template-columns:1fr}
  .cc-sched{border-left:0;border-top:1px solid rgba(235,220,182,.16)}
  .club-duo{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cc-eq{grid-template-columns:1fr;gap:8px}
  .eq-gt{transform:rotate(90deg);font-size:1.8rem;margin:2px 0}
  .ws-row{grid-template-columns:44px 28px 1fr;gap:10px}
  .ws-go{grid-column:2/-1;justify-self:start;margin-top:2px}
}

/* (legacy .series-* styles retired — replaced by .club-*) */

/* =====================================================================
   COLUMN — BOOKLove（本で出会う）
   ===================================================================== */
.column{background:var(--paper-050)}
.col-card{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--paper-000);box-shadow:var(--shadow-sm)}
.col-media{position:relative;min-height:340px;background:linear-gradient(150deg,#5A6E73,#29363A)}
.col-media image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.col-media .cm-badge{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--font-label);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:#16242B;background:var(--gold-400);padding:6px 14px}
.col-body{padding:clamp(34px,4vw,56px)}
.col-kick{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--gold-700);margin-bottom:8px}
.col-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.6rem,2.8vw,2.2rem);color:var(--fg-strong);
  line-height:1.4;letter-spacing:.03em;margin:0 0 20px}
.col-p{font-family:var(--font-jp-serif);font-size:15.5px;line-height:2.05;color:var(--fg-muted);margin:0 0 18px;max-width:46ch}
.col-quiz{display:flex;align-items:center;gap:16px;margin-top:26px;padding:18px 22px;
  background:var(--paper-100);border:1px solid var(--line-soft);border-radius:var(--radius-md)}
.col-quiz .cq-t{font-family:var(--font-jp-sans);font-size:13.5px;color:var(--fg-muted);line-height:1.6}
.col-quiz .cq-t b{color:var(--fg-strong);font-weight:700}

/* =====================================================================
   BOOKSHELF — 今月の一冊（海の出版社・相互送客）
   ===================================================================== */
.bookshelf{background:var(--paper-100);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.bs-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(40px,5vw,72px);align-items:center}
.bs-book{position:relative;justify-self:center}
.bs-book .bsk{width:236px;height:330px;border-radius:3px 6px 6px 3px;box-shadow:0 26px 60px rgba(41,54,58,.28),
  -7px 0 0 #d8cdb6 inset,-9px 0 0 rgba(0,0,0,.05) inset;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#1E2F37,#121E24)}
.bs-book .bsk image-slot{width:100%;height:100%;display:block}
.bs-book .bsk-spine{position:absolute;left:0;top:0;bottom:0;width:11px;background:rgba(0,0,0,.18);z-index:2}
.bs-book .bsk-band{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px;
  background:linear-gradient(transparent,rgba(8,13,17,.82));color:#fff}
.bs-book .bsk-band .bb-en{font-family:var(--font-label);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400)}
.bs-book .bsk-band .bb-t{font-family:var(--font-jp-display);font-weight:600;font-size:15px;margin-top:4px;line-height:1.4}
.bs-book .bsk-tag{position:absolute;top:-12px;right:-12px;z-index:3;width:64px;height:64px;border-radius:999px;
  background:var(--gold-500);color:var(--slate-900);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-jp-sans);box-shadow:var(--shadow-md);transform:rotate(6deg)}
.bs-book .bsk-tag b{font-size:11px}
.bs-book .bsk-tag span{font-family:var(--font-display);font-size:18px;line-height:1}
.bs-body .bs-kick{font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--gold-700);margin-bottom:8px}
.bs-body .bs-h{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--fg-strong);
  line-height:1.4;letter-spacing:.03em;margin:0 0 8px}
.bs-body .bs-meta{font-family:var(--font-jp-sans);font-size:13px;color:var(--fg-faint);margin-bottom:20px;letter-spacing:.04em}
.bs-body .bs-review{font-family:var(--font-jp-serif);font-size:15.5px;line-height:2.05;color:var(--fg-muted);margin:0 0 18px;max-width:54ch}
.bs-body .bs-review .lead-q{font-family:var(--font-jp-display);font-weight:600;color:var(--fg-strong);font-size:1.06em}
.bs-cta-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.bs-sister{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--fg-faint);letter-spacing:.04em}

/* =====================================================================
   GALLERY — 天狼院クリエイターズ（横スワイプ グラビア）
   ===================================================================== */
.gallery{position:relative;background:#0A0E11;color:var(--paper-050);overflow:hidden;padding:clamp(76px,9vw,120px) 0 clamp(60px,8vw,104px)}
.gallery-bg{position:absolute;inset:0;z-index:0;background:url('assets/hero.jpg') center/cover no-repeat;opacity:.16}
.gallery-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,17,.9),rgba(10,14,17,.78))}
.gallery-in{position:relative;z-index:2}
.gallery-intro{max-width:1240px;margin:0 auto;padding:0 44px}
.gallery-tease{font-family:var(--font-jp-serif);font-size:clamp(15px,1.5vw,17.5px);line-height:2.1;
  color:rgba(248,245,238,.84);max-width:50ch;margin:0 0 8px}
.gallery-note{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);margin-top:18px}
/* 楽市の節（05）── 町そのものを見せる一枚と、ふたつの戸口。
     ⚠️この節は暗い面なので、字は明るい側。隣の `.gallery-tease` と同じ体系で。
     ⚠️戸口は意匠体系の散文リンクの規則が勝つので、`.ti a.<部品名>` の形で書く。 */
.mk-key{margin:22px 0 20px;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm)}
/* 読書クラブの節（04）の顔。⚠️こちらは明るい面なので、添え字は濃い側。 */
.club-key{margin:26px 0 4px;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm)}
.club-key img{display:block;width:100%;height:auto}
.club-key figcaption{font-family:var(--font-label);font-size:10.5px;letter-spacing:.16em;
  color:var(--slate-600);padding:10px 2px 0}
.mk-key img{display:block;width:100%;height:auto}
.mk-gates{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ti a.mk-gate{display:inline-flex;align-items:center;gap:8px;background-image:none;
  font-family:var(--font-jp-sans);font-size:13.5px;letter-spacing:.02em;
  color:var(--paper-050);border:1px solid rgba(235,220,182,.42);border-radius:999px;padding:9px 20px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.ti a.mk-gate:hover{color:var(--gold-400);border-color:var(--gold-400)}
.ti a.mk-gate.is-in{background:var(--gold-400);border-color:transparent;color:#16242B}
.ti a.mk-gate.is-in:hover{background:var(--gold-600);color:#16242B}
.ti a.mk-gate .ar{font-size:12px}

.swipe{margin-top:clamp(34px,4vw,56px);position:relative}
.swipe-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 44px 28px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.swipe-track::-webkit-scrollbar{display:none}
.swipe-track.is-drag{cursor:grabbing;scroll-snap-type:none}
.grav{position:relative;flex:0 0 min(78vw,560px);scroll-snap-align:center;border-radius:4px;overflow:hidden;
  background:#11181C;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.grav-media{position:relative;aspect-ratio:4/5;overflow:hidden}
.grav-media image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.grav-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,13,17,.1) 30%,rgba(8,13,17,.9))}
.grav-top{position:absolute;top:16px;left:16px;right:16px;z-index:2;display:flex;justify-content:space-between;align-items:flex-start}
.grav-kind{font-family:var(--font-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#16242B;background:var(--gold-400);padding:5px 12px}
.grav-pg{font-family:var(--font-display);font-style:italic;font-size:14px;color:rgba(235,220,182,.9)}
.grav-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.grav-cap .gc-name{font-family:var(--font-jp-display);font-weight:600;font-size:1.5rem;color:#fff;letter-spacing:.03em;margin:0 0 4px}
.grav-cap .gc-role{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)}
.grav-body{padding:22px 22px 24px}
.grav-title{font-family:var(--font-jp-display);font-weight:600;font-size:1.15rem;color:#fff;line-height:1.5;margin:0 0 10px}
.grav-text{font-family:var(--font-jp-serif);font-size:14px;line-height:1.95;color:rgba(248,245,238,.78);margin:0 0 18px}
.grav-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(235,220,182,.18);padding-top:16px}
.grav-foot .gf-act{font-family:var(--font-jp-sans);font-size:13px;color:rgba(248,245,238,.86);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:gap .25s,color .25s}
.grav-foot .gf-act:hover{color:var(--gold-400);gap:12px}
.swipe-hint{display:flex;align-items:center;gap:14px;max-width:1240px;margin:14px auto 0;padding:0 44px;
  font-family:var(--font-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,245,238,.5)}
.swipe-hint .sh-line{flex:1;height:1px;background:rgba(248,245,238,.18)}
.swipe-arrows{display:flex;gap:10px}
.swipe-arrow{width:42px;height:42px;border-radius:999px;border:1px solid rgba(248,245,238,.3);background:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease)}
.swipe-arrow:hover{background:rgba(248,245,238,.12);border-color:rgba(248,245,238,.6)}
.swipe-arrow svg{width:18px;height:18px}

/* placeholder gradients used inside image-slots for variety */
/* image-slot empty-state caption is hardcoded dark inside its shadow DOM;
   `color` inherits across the shadow boundary, so lift it to a light tone
   on every slot here (all sit on dark/mid placeholder fills). Specificity
   beats the component's :host{color} rule. */
.scrolly-img image-slot,.scrolly-mob image-slot,.col-media image-slot,
.grav-media image-slot,.bsk image-slot,.note-cover image-slot{color:rgba(248,245,238,.78)}
/* Headings on dark surfaces must beat the design system's
   `.ti h2/h3/h4{color:var(--fg-strong)}` (0,1,1) — raise to (0,2,0). */
.ti .cover-title,.ti .store-name,.ti .learn-h,.ti .grav-title,
.ti .gc-name{color:#fff}
.ti .learn-h .em{color:var(--gold-400)}
.ph-a{background:linear-gradient(150deg,#2C4049,#121E24)}
.ph-b{background:linear-gradient(150deg,#5A6E73,#38484D)}
.ph-c{background:linear-gradient(150deg,#283D46,#16242B)}
.ph-d{background:linear-gradient(150deg,#4A5C61,#29363A)}
.ph-e{background:linear-gradient(150deg,#6F6A5E,#38484D)}

/* =====================================================================
   note / 連載・読み物
   ===================================================================== */
.note{background:var(--paper-050)}
.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.note-card{display:flex;flex-direction:column;background:var(--paper-000);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.note-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--slate-300)}
.note-cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.note-cover image-slot{position:absolute;inset:0;width:100%;height:100%;display:block}
.note-cover .nc-cat{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-label);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#EBDCB6;background:rgba(8,13,17,.5);backdrop-filter:blur(4px);padding:5px 11px;border-radius:999px}
.note-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.note-ser{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--gold-700);margin-bottom:8px}
.note-t{font-family:var(--font-jp-display);font-weight:600;font-size:1.12rem;color:var(--fg-strong);line-height:1.5;margin:0 0 12px}
.note-m{font-family:var(--font-jp-sans);font-size:12px;color:var(--fg-faint);margin-top:auto;letter-spacing:.04em}

/* =====================================================================
   裏表紙 — フッター
   ===================================================================== */
.colophon{background:var(--paper-100);border-top:1px solid var(--line-soft);padding:clamp(48px,6vw,80px) 0}
.colo-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4vw,64px);align-items:center}
.colo-quote{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.85;color:var(--fg-strong);letter-spacing:.03em;margin:0}
.colo-sister{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-000);padding:30px 32px;box-shadow:var(--shadow-xs)}
.colo-sister .cso-en{font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-700)}
.colo-sister .cso-h{font-family:var(--font-jp-display);font-weight:600;font-size:1.5rem;color:var(--fg-strong);margin:8px 0 10px;letter-spacing:.03em}
.colo-sister .cso-p{font-family:var(--font-jp-serif);font-size:14px;line-height:1.9;color:var(--fg-muted);margin:0 0 18px}

.site-foot{background:var(--night-900);color:var(--fg-on-dark)}
.foot-stores{max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,72px) 44px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(248,245,238,.1)}
.foot-store{background:var(--night-900);padding:24px 22px}
.foot-store .fst-en{font-family:var(--font-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400)}
.foot-store .fst-name{font-family:var(--font-jp-display);font-weight:600;font-size:17px;color:#fff;margin:7px 0 10px;letter-spacing:.03em}
.foot-store .fst-l{font-family:var(--font-jp-sans);font-size:12.5px;color:rgba(248,245,238,.66);line-height:1.85;display:block}
.foot-top{max-width:1240px;margin:0 auto;padding:8px 44px 48px;display:grid;grid-template-columns:.9fr 2.1fr;gap:48px;
  border-top:1px solid rgba(248,245,238,.1)}
.foot-brand img{height:58px;display:block;opacity:.96}
.foot-tag{font-family:var(--font-jp-serif);font-size:14px;color:var(--fg-on-dark-muted);margin:18px 0 16px;line-height:1.85}
.foot-stars{display:flex;gap:10px;align-items:center;color:var(--gold-400)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-h{font-family:var(--font-jp-sans);font-weight:700;font-size:13px;color:var(--gold-400);letter-spacing:.08em;margin-bottom:16px}
.foot-l{display:block;font-family:var(--font-jp-sans);font-size:13.5px;color:var(--fg-on-dark-muted);margin-bottom:11px;
  cursor:pointer;background:none;border:0;text-align:left;padding:0;transition:color .2s}
.foot-l:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(248,245,238,.1);padding:22px 44px;max-width:1240px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-jp-sans);font-size:12px;color:rgba(248,245,238,.5)}
.foot-sns{display:flex;gap:14px}
.foot-sns button{background:none;border:0;color:rgba(248,245,238,.6);cursor:pointer;font-family:var(--font-label);font-size:11px;letter-spacing:.1em}
.foot-sns button:hover{color:var(--gold-400)}

/* =====================================================================
   モバイル追従CTA
   ===================================================================== */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  background:rgba(252,251,246,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .4s var(--ease)}
.mcta.is-show{transform:none}
.mcta-in{display:flex;align-items:center;gap:12px}
.mcta-l{flex:1;min-width:0}
.mcta-l .mc-k{font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-700)}
.mcta-l .mc-t{font-family:var(--font-jp-display);font-weight:600;font-size:14px;color:var(--fg-strong);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcta .btn{padding:12px 22px;font-size:14px;flex:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .learn-grid{grid-template-columns:1fr;gap:40px}
  .fac-list{grid-template-columns:1fr}
  .syl-colhead{grid-template-columns:140px repeat(4,1fr);gap:8px}
  .syl-row{grid-template-columns:140px 1fr;gap:8px}
  .syl-cells{gap:8px}
  .syl-glyph{font-size:26px}
  .col-card{grid-template-columns:1fr}
  .col-media{min-height:260px}
  .bs-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .bs-body{text-align:left}
  .bs-cta-row{justify-content:flex-start}
  .colo-in{grid-template-columns:1fr;gap:30px}
  .foot-stores{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .note-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .head-nav{display:none}
  .head-burger{display:flex}
  .head-mini.desk{display:none}
  /* matrix → faculty accordion */
  .syl-colhead{display:none}
  .syl-row{grid-template-columns:1fr;gap:0;padding:0;border-bottom:1px solid var(--line)}
  .syl-rowhead{grid-template-columns:auto 1fr auto;grid-template-areas:"glyph name toggle" "glyph meta toggle";
    cursor:pointer;padding:18px 6px 18px 14px;align-items:center}
  .syl-rowtoggle{display:block;grid-area:toggle;font-family:var(--font-jp-sans);font-size:20px;color:var(--gold-700);
    transition:transform .3s var(--ease);align-self:center}
  .syl-row.is-open .syl-rowtoggle{transform:rotate(45deg)}
  .syl-cells{grid-template-columns:1fr;gap:12px;max-height:0;overflow:hidden;opacity:0;
    transition:max-height .45s var(--ease),opacity .35s,padding .3s}
  .syl-row.is-open .syl-cells{max-height:2400px;opacity:1;padding:0 4px 22px}
  /* 狭い幅では行が一列になるので、帯も一列目に戻す。
     ⚠️畳まれている行では帯も隠す（コマだけ畳んで帯が残ると、行の外に字が浮く）。 */
  .syl-craft{grid-column:1;margin:0 4px;padding:0 0 20px}
  .syl-row:not(.is-open) .syl-craft{display:none}
  .syl-cell{min-height:0}
  .syl-slot.is-empty{min-height:80px}
  .mcta{display:block}
  .scrolly{grid-template-columns:1fr;padding:0 0 40px}
  .scrolly-media{display:none}
  .scrolly-steps{padding:0}
  .scrolly-step{min-height:0;padding:0 44px clamp(40px,7vw,64px)}
  .scrolly-step .scrolly-mob{display:block;margin-bottom:26px;border-radius:4px;overflow:hidden;
    aspect-ratio:4/5;box-shadow:0 20px 50px rgba(0,0,0,.45)}
  .scrolly-step .scrolly-mob image-slot{width:100%;height:100%;display:block}
}
@media (min-width:861px){.scrolly-mob{display:none}}
@media (max-width:680px){
  .wrap,.wrap-narrow,.wrap-read,.head-inner,.head-strip,.cover-in,.foot-stores,.foot-top,.foot-bottom,.stores-intro,.gallery-intro,.swipe-hint{padding-left:22px;padding-right:22px}
  .cover-in{padding-top:88px}
  .head-strip{font-size:9px;letter-spacing:.16em}
  .head-strip .hs-en{display:none}
  .cover-baseline{flex-direction:column;align-items:flex-start;gap:22px}
  .cover-issue{text-align:left}
  .toc-item{grid-template-columns:54px 1fr;gap:16px}
  .toc-arrow{display:none}
  .ev-row{grid-template-columns:84px 1fr;gap:18px}
  .ev-go{grid-column:1/-1;justify-self:start;justify-content:flex-start;margin-top:6px}
  .ev-date .ed-md{font-size:26px}
  .proof{grid-template-columns:1fr 1fr}
  .swipe-track{padding-left:22px;padding-right:22px}
  .grav{flex-basis:84vw}
  .note-grid{grid-template-columns:1fr}
  .foot-stores{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .feat-head{grid-template-columns:auto 1fr;gap:18px}
  .feat-head .fh-link{grid-column:1/-1;justify-self:start}
}

/* =====================================================================
   EVENTS — ダイジェスト（マガジン 02 節）追補
   ===================================================================== */
.ev-catbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-jp-sans);font-weight:600;
  font-size:11px;letter-spacing:.04em;padding:3px 10px;border-radius:999px;margin-right:12px}
.ev-rowskel{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:24px 8px;border-bottom:1px solid var(--line-soft)}
.ev-rowskel span{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--paper-100),var(--paper-200),var(--paper-100));
  background-size:200% 100%;animation:calShimmer 1.3s linear infinite}
.ev-rowskel span:first-child{height:30px;width:64px}
.ev-row[href]{cursor:pointer;text-decoration:none}

/* 02節 軽量フィルタ */
.ev-filters{display:flex;flex-direction:column;gap:12px;margin:0 0 26px}
.ev-stores{display:flex;flex-wrap:wrap;gap:8px}
.ev-store{font-family:var(--font-jp-sans);font-size:13.5px;letter-spacing:.04em;color:var(--slate-700);
  background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 20px;cursor:pointer;transition:all .22s var(--ease)}
.ev-store:hover{border-color:var(--slate-500);background:var(--paper-100)}
.ev-store.is-on{background:var(--slate-800);border-color:var(--slate-800);color:var(--paper-050)}
.ev-cats{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ev-catbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-jp-sans);font-size:12px;font-weight:600;
  letter-spacing:.03em;background:var(--paper-000);border:1px solid;border-radius:999px;padding:5px 13px;cursor:pointer;transition:all .2s var(--ease)}
.ev-catbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.ev-reset{font-family:var(--font-jp-sans);font-size:12px;color:var(--slate-600);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;letter-spacing:.04em;margin-left:4px;transition:color .2s}
.ev-reset:hover{color:var(--gold-700)}
.ev-reset i{font-style:normal;font-size:13px;width:17px;height:17px;border:1px solid currentColor;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ev-overflow{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--fg-faint);letter-spacing:.04em;margin-right:auto}
.ev-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px}

/* =====================================================================
   EVENTS PAGE — 専用ページ chrome
   ===================================================================== */
.evp-head{position:sticky;top:0;z-index:50;background:rgba(252,251,246,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.evp-head-in{max-width:1240px;margin:0 auto;padding:12px 44px;display:flex;justify-content:space-between;align-items:center}
.evp-logo img{height:30px;display:block}
.evp-back{font-family:var(--font-jp-sans);font-size:13.5px;color:var(--slate-700);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.evp-back:hover{color:var(--gold-700)}
.evp-nav{display:flex;align-items:center;gap:26px}
.evp-hero{background:var(--paper-050);padding:clamp(40px,5vw,64px) 0 clamp(20px,3vw,32px)}
.evp-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-700);
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.evp-strip-mid{font-family:var(--font-jp-serif);letter-spacing:.14em;text-transform:none;color:var(--warm-600)}
.evp-lead{font-family:var(--font-jp-serif);font-size:clamp(15px,1.4vw,17px);line-height:2;color:var(--fg-muted);
  max-width:60ch;margin:22px 0 0}
.evp-cal-section{background:var(--paper-050);padding:clamp(24px,3vw,40px) 0 clamp(60px,8vw,100px)}
.evp-foot{background:var(--night-900);color:var(--fg-on-dark);padding:clamp(40px,5vw,64px) 0}
.evp-foot-in{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.evp-foot-in img{height:46px;opacity:.96}
.evp-foot-in p{font-family:var(--font-jp-serif);font-size:14px;color:var(--fg-on-dark-muted);margin:0}

/* =====================================================================
   EVENT CALENDAR — フィルタ
   ===================================================================== */
.cal-root{margin-top:8px}
.cal-filters{display:flex;flex-direction:column;gap:16px;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.cal-stores{display:flex;flex-wrap:wrap;gap:8px}
.cal-store{font-family:var(--font-jp-sans);font-size:14px;letter-spacing:.04em;color:var(--slate-700);
  background:none;border:1px solid var(--line-strong);border-radius:999px;padding:9px 22px;cursor:pointer;
  transition:all .22s var(--ease)}
.cal-store:hover{border-color:var(--slate-500);background:var(--paper-100)}
.cal-store.is-on{background:var(--slate-800);border-color:var(--slate-800);color:var(--paper-050)}
.cal-cats{display:flex;flex-wrap:wrap;gap:7px}
.cal-cat{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-jp-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.03em;background:var(--paper-000);border:1px solid;border-radius:999px;padding:6px 14px;cursor:pointer;
  transition:all .2s var(--ease)}
.cal-cat:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.cc-dot{width:8px;height:8px;border-radius:999px;flex:none}
.cal-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cal-reset{font-family:var(--font-jp-sans);font-size:12.5px;color:var(--slate-600);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em;transition:color .2s}
.cal-reset:hover{color:var(--gold-700)}
.cal-reset i{font-style:normal;font-size:14px;width:18px;height:18px;border:1px solid currentColor;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cal-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-faint);margin-left:auto}
.cal-live-dot{width:7px;height:7px;border-radius:999px;background:var(--slate-300)}
.cal-live.is-on .cal-live-dot{background:var(--success);box-shadow:0 0 0 3px rgba(31,138,91,.16);animation:calPulse 2.4s var(--ease) infinite}
@keyframes calPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---- 月グリッド ---- */
.cal-bar{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:18px}
.cal-nav{width:42px;height:42px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--slate-700);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .22s var(--ease)}
.cal-nav:hover{border-color:var(--slate-500);background:var(--paper-100);color:var(--slate-900)}
.cal-nav svg{width:18px;height:18px}
.cal-month{display:flex;align-items:baseline;gap:4px;font-family:var(--font-display);color:var(--fg-strong)}
.cal-month b{font-size:30px;font-weight:500;letter-spacing:.01em}
.cal-month span{font-size:22px;color:var(--gold-600)}
.cal-month i{font-family:var(--font-label);font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--gold-700);margin-left:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.cal-dowh{background:var(--paper-100);text-align:center;padding:10px 0;font-family:var(--font-jp-sans);font-weight:600;
  font-size:12px;color:var(--fg-muted);letter-spacing:.1em}
.cal-dowh.is-sun{color:#9C6F74}
.cal-dowh.is-sat{color:#5E8086}
.cal-cell{background:var(--paper-000);min-height:104px;padding:8px 7px;display:flex;flex-direction:column;gap:5px;
  transition:background .2s var(--ease)}
.cal-cell.is-empty{background:var(--paper-050)}
.cal-cell.has-ev{cursor:pointer}
.cal-cell.has-ev:hover{background:var(--paper-100)}
.cal-cell.is-today{background:var(--gold-050)}
.cal-cell.is-sel{box-shadow:inset 0 0 0 2px var(--gold-500)}
.cal-dn{font-family:var(--font-display);font-size:15px;color:var(--fg-muted);line-height:1}
.cal-dn.is-sun{color:#9C6F74}
.cal-dn.is-sat{color:#5E8086}
.cal-cell.is-today .cal-dn{color:var(--gold-700);font-weight:600}
.cal-chips{display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-chip{display:flex;align-items:center;gap:5px;font-family:var(--font-jp-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.02em;padding:2.5px 7px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cal-chip-dot{width:6px;height:6px;border-radius:999px;flex:none}
.cal-more{font-family:var(--font-jp-sans);font-size:10px;color:var(--fg-faint);padding-left:3px;letter-spacing:.04em}

/* ---- スケルトン ---- */
.cal-skel-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.cal-skel-cell{background:var(--paper-000);min-height:104px}
.cal-skel-cell:nth-child(odd){background:var(--paper-050)}
@keyframes calShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- 一覧 ---- */
.cal-list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin:clamp(40px,5vw,64px) 0 22px;padding-bottom:14px;border-bottom:2px solid var(--slate-800)}
.cal-lh-en{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--gold-700);margin-bottom:4px}
.cal-lh-jp{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--fg-strong);
  letter-spacing:.04em;margin:0}
.cal-lh-ct{font-family:var(--font-jp-sans);font-size:13px;color:var(--fg-faint);letter-spacing:.04em;white-space:nowrap;padding-bottom:4px}
.cal-list-filternote{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--font-jp-sans);
  font-size:13px;color:var(--gold-700);letter-spacing:.06em}
.cal-monthgroup{margin-bottom:8px}
.cal-mg-head{display:flex;align-items:center;gap:14px;padding:18px 2px 8px}
.cal-mg-no{font-family:var(--font-jp-display);font-weight:600;font-size:15px;color:var(--fg-muted);letter-spacing:.08em;flex:none}
.cal-mg-rule{flex:1;height:1px;background:var(--line)}
.cal-mg-ct{font-family:var(--font-label);font-size:10px;letter-spacing:.16em;color:var(--fg-faint);flex:none}
.cal-row{display:grid;grid-template-columns:64px 56px auto 1fr auto;gap:18px;align-items:center;text-decoration:none;
  padding:16px 10px;border-bottom:1px solid var(--line-soft);transition:background .22s var(--ease),padding-left .22s var(--ease)}
.cal-row:hover{background:var(--paper-100);padding-left:18px}
.cal-row-date{text-align:center;line-height:1.1}
.cal-row-date b{display:block;font-family:var(--font-display);font-size:20px;color:var(--fg-strong);letter-spacing:.01em}
.cal-row-date i{font-style:normal;font-family:var(--font-jp-sans);font-size:11px;color:var(--fg-faint)}
.cal-row-time{font-family:var(--font-jp-sans);font-size:13px;color:var(--fg-muted)}
.cal-row-badges{display:flex;align-items:center;gap:8px}
.cal-store-badge{font-family:var(--font-jp-sans);font-size:11.5px;font-weight:600;color:var(--slate-700);
  border:1px solid var(--line-strong);border-radius:999px;padding:3px 11px;white-space:nowrap}
.cal-cat-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-jp-sans);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;padding:4px 11px;border-radius:999px;white-space:nowrap}
.cal-row-title{font-family:var(--font-jp-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.12rem);color:var(--fg-strong);
  line-height:1.45;letter-spacing:.02em}
.cal-row-go{font-family:var(--font-jp-sans);font-size:13px;color:var(--slate-600);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color .22s,gap .22s}
.cal-row-go i{font-style:normal}
.cal-row:hover .cal-row-go{color:var(--gold-700);gap:10px}
.cal-empty{padding:40px 10px;text-align:center;font-family:var(--font-jp-serif);font-size:15px;color:var(--fg-faint)}
.cal-rowskel{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:16px 10px;border-bottom:1px solid var(--line-soft)}
.cal-rowskel span{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--paper-100),var(--paper-200),var(--paper-100));
  background-size:200% 100%;animation:calShimmer 1.3s linear infinite}
.cal-rowskel span:first-child{height:30px;width:50px}

@media (max-width:760px){
  .evp-head-in,.evp-hero .wrap{padding-left:22px;padding-right:22px}
  .cal-month b{font-size:24px}
  .cal-cell{min-height:74px;padding:6px 5px}
  .cal-chip{font-size:0;gap:0;padding:4px;width:fit-content}
  .cal-chip-dot{width:8px;height:8px}
  .cal-more{font-size:9px}
  .cal-dn{font-size:13px}
  .cal-row{grid-template-columns:54px 1fr;gap:10px 14px}
  .cal-row-time{display:none}
  .cal-row-badges{grid-column:2;grid-row:2}
  .cal-row-title{grid-column:1/-1;grid-row:3}
  .cal-row-go{grid-column:1/-1;grid-row:4;justify-self:start;margin-top:2px}
  .cal-row-date{grid-row:1;grid-column:1}
  .cal-row-badges{grid-row:1;grid-column:2;justify-self:start}
}