/* ============================================================
   LUTIS round-4 案1 クレール CLAIRE — 「満月」  (prefix cl-)
   The moon version, integrating Sayaka's recorded favorites:
   Atelier's round full-moon hero glow (present from t=0) ×
   Journal's uniform petal timing (all 11 open together) ×
   the late pink climb × the gold waterline. Moon shapes echo
   down the page: full moon in the hero, half-moon arches on
   seminar thumbnails ONLY (contract §1.4), a faint moon halo
   behind the 01 brand-mark ornament. Hub-and-spoke IA:
   index + seminars + care share this one stylesheet.
   Zero JS. Element defaults = FINISHED scene; build-up
   keyframes define only `from`; ambient loops finite (still
   by ~39s); reduced-motion kill-switch at the bottom.
   iOS arch rule: every arch photo wrapper declares its OWN
   aspect-ratio; container-type never sits on an element that
   carries aspect-ratio (the round-3 Lumière iPhone bug).
   ============================================================ */

:root{
  --cl-bg:#ffffff;
  --cl-ground:#fbf6f5;         /* flower-era paper (quiet asides) */
  --cl-veil:#fdf0f1;           /* pink veil — menu plate */
  --cl-ink:#3a3436;            /* 12.18:1 white · 10.97:1 veil */
  --cl-soft:#564e4f;           /* 8.08:1 white · 7.28:1 veil */
  --cl-muted:#6e6163;          /* 5.91:1 white · 5.32:1 veil */
  --cl-accent:#b23a48;         /* 5.85:1 white · 5.26:1 veil */
  --cl-accent-deep:#93303c;    /* 7.70:1 white */
  --cl-quick:#3f6a86;          /* teal-blue — Quick type (5.81:1 white · 5.16:1 on quick-pale) */
  --cl-quick-pale:#eef2f5;     /* pale teal wash — Quick banner field */
  --cl-gold-line:#c9ad74;      /* decorative hairlines only */
  --cl-gold-text:#826b33;      /* 5.12:1 white · 4.61:1 veil */
  --cl-btn-gold:#6f5a2a;       /* 6.62:1 white · 5.96:1 veil */
  --cl-btn-line:#a68b56;
  --cl-hairline:#eee0df;
  --cl-card-line:#f3dedd;
  --cl-plate:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#fdf0f1 88%);
  --cl-halo:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(253,240,241,0));
  --cl-lightline:linear-gradient(90deg,rgba(201,173,116,0),#c9ad74 22%,#ffffff 50%,#c9ad74 78%,rgba(201,173,116,0));
  --cl-serif:"Gilda Display",Georgia,"Times New Roman",serif;
  --cl-caps:"Tenor Sans",-apple-system,"Helvetica Neue",sans-serif;
  --cl-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --cl-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --cl-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --cl-maxw:1080px;
  --cl-ease:cubic-bezier(.22,1,.36,1);
  --cl-petal-ease:cubic-bezier(.30,.80,.28,1);
}

*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;color:var(--cl-ink);background:var(--cl-bg);font-family:var(--cl-body);
  line-height:1.9;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--cl-accent);text-decoration:none}
a:hover{color:var(--cl-accent-deep);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--cl-head);font-weight:500;line-height:1.5}
p{margin:0}
main{display:block}
[id]{scroll-margin-top:1.2rem}
:focus-visible{outline:2px solid var(--cl-accent);outline-offset:3px}
.cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ============================================================
   sticky header — a thin bar (§2). It sits as a direct body child
   so it PERSISTS across the whole page (nesting it inside .cl-sky
   would confine its stickiness to the hero). Translucent/blurred
   backing keeps it legible over content. Left = brand mark + LUTIS
   (home link); right = compact nav. Byte-identical markup to
   _gen/header.html (only {{PREFIX}}/{{ACTIVE}} substituted).
   On large screens (≳1.5k viewports) the bar contents center on
   the --cl-maxw band instead of pinning to the screen corners,
   and the type scales up fluidly — floors keep laptop widths
   and below byte-identical.
   ============================================================ */
.cl-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:.6rem 1.2rem;
  padding:clamp(.5rem,.09rem + .46vw,.82rem) max(clamp(.9rem,3vw,1.6rem),calc((100% - var(--cl-maxw))/2));
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.15) blur(9px);
  -webkit-backdrop-filter:saturate(1.15) blur(9px);border-bottom:1px solid var(--cl-hairline)}
.cl-bar-home{display:inline-flex;align-items:center;gap:.5rem;color:var(--cl-accent);flex:none}
.cl-bar-home:hover{text-decoration:none;color:var(--cl-accent-deep)}
.cl-bar-mark{height:clamp(27.6px,14.26px + .92vw,37.95px);width:auto}
.cl-bar-name{font-family:var(--cl-serif);font-weight:400;font-size:clamp(1.33rem,.76rem + .64vw,1.78rem);
  line-height:1;letter-spacing:.22em;text-indent:.22em}
.cl-bar-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:.15rem 1.1rem;font-family:var(--cl-head);font-weight:500;
  font-size:clamp(.8rem,.41rem + .43vw,1.1rem);letter-spacing:.05em}
/* two nav groups: 3 MAINS (ink, current weight) then 3 REST (muted, lighter,
   smaller) with a faint separator between — a clear hierarchy (§CLAIRE.1) */
.cl-bar-main,.cl-bar-rest{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .95rem}
.cl-bar-rest{padding-left:1.1rem;border-left:1px solid var(--cl-hairline)}
/* third group: the official Instagram, hairline-separated like the rest group so it reads
   as its own little section at the far right (2026-08-21). Line art, never the filled app
   badge — docs/TASTE.md 3-8 bans app idioms. Sized in em on this one-line bar so it tracks
   the nav type; the floating masthead copy takes a fixed size instead (<=679px block).
   2026-08-23, Vincent 「make it shine a little bit partially red, in a gradient similar to
   the original Instagram logo, but without the blue」: the stroke takes a radial gradient
   that borrows the real logo's GEOMETRY — the glow anchored off the bottom-left corner,
   sweeping to deep at the top-right — while every colour is a LUTIS token. gold-line ->
   accent -> accent-deep, i.e. the site's own warm half of that ramp with the blue and the
   orange left out. The dominant rose is --cl-accent, the same crimson as the LUTIS
   wordmark at the other end of the bar, so the two ends of the header rhyme.
   The stops are painted HERE, not in the template, so the palette stays single-sourced. */
/* rest + sns travel together ON THE ONE-LINE BAR: a lone icon dropping to the next row
   would strand its hairline at the end of the row above (docs/DESIGN.md §1.3 names that
   defect). nowrap here only stops THIS pair splitting — .cl-bar-rest keeps its own wrap
   as a last resort. Below 680px the question cannot arise: the icon leaves the flow and
   floats in the bar's corner, so group2's row is simply the three rest links. */
.cl-bar-group2{display:flex;flex-wrap:nowrap;align-items:center;gap:.15rem 1.1rem}
.cl-bar-sns{display:flex;align-items:center;padding-left:1.1rem;
  border-left:1px solid var(--cl-hairline)}
.cl-bar-ig{display:inline-flex;padding:.25rem}
.cl-bar-ig svg{width:1.6em;height:1.6em;min-width:17px;min-height:17px;display:block;
  transition:filter .25s var(--cl-ease)}
.cl-ig-s1{stop-color:var(--cl-gold-line)}
.cl-ig-s2{stop-color:var(--cl-accent)}
.cl-ig-s3{stop-color:var(--cl-accent-deep)}
/* hover deepens the same gradient rather than swapping colour: gold in this nav means
   "you are here", so the icon must never resolve to a flat gold the way a link does. */
.cl-bar-nav .cl-bar-ig:hover svg{filter:saturate(1.18) brightness(.96)}
.cl-bar-nav a{color:var(--cl-ink);padding:.15rem 0;white-space:nowrap;transition:color .2s}
.cl-bar-rest a{color:var(--cl-muted);font-weight:400;font-size:.92em}
.cl-bar-nav a:hover{color:var(--cl-gold-text);text-decoration:none}
/* active item — subtle gold underline (generator sets data-active; the rest
   group's spoke pages joined the list in the 07-23 fix pass, and a marked-up
   aria-current="page" link gets the same treatment either way) */
.cl-bar-nav[data-active="seminars"] a[data-nav="seminars"],
.cl-bar-nav[data-active="care"] a[data-nav="care"],
.cl-bar-nav[data-active="connect"] a[data-nav="connect"],
.cl-bar-nav[data-active="reviews"] a[data-nav="reviews"],
.cl-bar-nav[data-active="columns"] a[data-nav="columns"],
.cl-bar-nav[data-active="contact"] a[data-nav="contact"],
.cl-bar-nav[data-active="studios"] a[data-nav="studios"],
.cl-bar-nav[data-active="medical"] a[data-nav="medical"],
.cl-bar-nav[data-active="corporate"] a[data-nav="corporate"],
.cl-bar-nav a[aria-current="page"]{
  color:var(--cl-gold-text);border-bottom:1px solid var(--cl-gold-line)}
/* ============================================================
   TWO header states, and only two (2026-08-22).

   >=680px : the one-line bar above — brand left, 3 mains | 3 rest | Instagram right.
   <=679px : the centered masthead (§tweak3) — the brand lockup CENTERED on row 1, the
             3 mains centered on row 2, the 3 rest centered on row 3. Two clear floors
             of menu under the logo. That is the shipped design and Vincent asked for it
             back after a 08-22 revision packed all seven items onto one centered row
             and coped by shrinking the type: 「2 clear kind of stages, 2 floors」.

   679 is not a round number — it is exactly where the one-line bar stops fitting now the
   nav carries seven items. The masthead used to stop at 560, which left 561-679px with
   the brand pinned left and the nav in two ragged right-aligned rows beside it: a third
   look, and the worst of the three. There is no width in between any more.

   The Instagram icon does NOT become a fourth floor: below 680 it leaves the flow
   altogether and floats in the bar's top-right corner, so it can never dictate how the
   menu wraps. Vincent: 「the Instagram logo in those cases should just hover on the top
   right of the page, so unaffected by the layout of the other stuff」.
   ============================================================ */
@media(max-width:679px){
  .cl-bar{flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .9rem}
  .cl-bar-home{justify-content:center}
  .cl-bar-nav{flex:0 0 100%;width:100%;justify-content:center;gap:.15rem .8rem;font-size:.72rem}
  /* mains and group2 ARE the two floors — each is forced to a full row so the split is
     the designed one, never whatever the width happens to produce. group2 carries the
     row rather than .cl-bar-rest, because rest sits inside it (the pair is wrapped for
     the desktop bar's sake); with sns out of flow, group2's row IS the rest links. */
  .cl-bar-main,.cl-bar-group2{flex:0 0 100%;justify-content:center}
  .cl-bar-rest{border-left:0;padding-left:0}
  /* the float, pinned to the corner. No position:relative needed — .cl-bar is
     position:sticky, so it is already the containing block, and its padding box starts at
     the page's own top-right corner (the only border is the bottom one). So top:0/right:0
     plus the anchor's own .5rem padding is what sets the inset: the icon's INK sits .5rem
     from both edges, and the 38px box it lives in runs right up into the corner, which is
     the easiest place on a phone screen to hit. .5rem is not arbitrary twice over — it is
     the bar's own padding-top, so the icon's cap line lands exactly on the top of the
     brand mark. No hairline here: floating, it is already its own thing. */
  .cl-bar-sns{position:absolute;top:0;right:0;padding-left:0;border-left:0}
  /* .cl-bar-nav .cl-bar-ig, not .cl-bar-ig: the base .cl-bar-nav a{padding:.15rem 0} is
     (0,1,1) and silently beats a bare .cl-bar-ig (0,1,0) — measured, the side padding
     simply never applied. Same escape hatch the :hover rule above already uses. */
  .cl-bar-nav .cl-bar-ig{padding:.5rem}
  .cl-bar-ig svg{width:22px;height:22px}
}

/* the huge Gilda LUTIS hero wordmark (the brand moment; scrolls away) */
.cl-wordmark{margin:0;font-family:var(--cl-serif);font-weight:400;line-height:1.05;
  font-size:clamp(2.9rem,12vw,4.4rem);letter-spacing:.2em;text-indent:.2em;color:var(--cl-accent)}
.cl-wordmark span{display:inline-block;animation:clLetter .95s var(--cl-ease) var(--d,0s) both}
.cl-mast-sub{position:relative;z-index:2;margin:.65rem 0 0;font-family:var(--cl-head);
  font-weight:500;font-size:.72rem;letter-spacing:.3em;text-indent:.3em;color:var(--cl-muted);
  animation:clFade 1s ease .8s both}
@keyframes clFade{from{opacity:0}}
@keyframes clLetter{from{opacity:0;transform:translateY(14px)}}

/* ============================================================
   hero — the full moon behind the lotus, present from t=0
   (Atelier glow geometry); waterline + waves kept; ALL petals
   open together on Journal's uniform clock (--d:2s --dur:2.2s,
   inline in index.html); the pink wash then climbs the flower
   bottom→top on the staggered --wd 4.5s→6.0s. Scene ≈7.9s.
   Defaults are the finished pink bloom on the moon.
   ============================================================ */
/* the moonlight glow now fills the WHOLE hero field via .cl-sky
   (inset:0) so the light reaches the edges — no white bars above/
   below a trapped disc (the round-4 defect). The white moonlight
   CORE is static from t=0; the PINK layer fades in over the wash
   window (~4.5→7.3s) so pink blooms only as the petals turn pink.
   dr-sky is the geometry model. No border-radius here: the radial
   draws the circle, so the arch geometry stays exclusive to the
   seminar thumbnails (grep-clean). */
.cl-sky{--cl-glow-y:250px;position:relative;background:var(--cl-bg)}
.cl-sky::before,.cl-sky::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.cl-sky::before{background:radial-gradient(circle min(520px,94vw) at 50% var(--cl-glow-y),
  rgba(255,255,255,.96) 0%,rgba(253,241,242,.55) 34%,rgba(255,255,255,0) 70%)}
/* pink radiance — default = FINISHED (shown); keyframe defines only `from` */
.cl-sky::after{background:radial-gradient(circle min(560px,98vw) at 50% var(--cl-glow-y),
  rgba(248,155,166,.30) 0%,rgba(248,155,166,.15) 40%,rgba(248,155,166,0) 72%);
  animation:clPinkGlow 2.8s ease-in-out 4.5s both}
@keyframes clPinkGlow{from{opacity:0}}
@media(min-width:880px){.cl-sky{--cl-glow-y:285px}}

.cl-hero{position:relative;z-index:1;text-align:center;
  padding:clamp(2.6rem,6vw,4rem) 1rem clamp(2.4rem,6vw,3.6rem)}
.cl-pond{position:relative;left:50%;width:520px;margin:-52px 0 0 -200px;pointer-events:none}
.cl-pond svg{position:relative;z-index:1;display:block;width:100%;height:auto}
@media(min-width:880px){.cl-pond{width:820px;margin:-96px 0 0 -315px}}

/* 地平線 — 2026-07-22判定。旧 SVG パス M0,310 H780 は「蓮を画面中央に置く」ポンド
   ジオメトリの中で左200px／右320px（@880px: 315/505）と非対称だった（さやか
   「ハスから右側と左側の距離が違う」）。HTML span に置換：left:38.4615%（=蓮の
   x=300/780、両ブレークポイント共通）＋translateX(-50%) で蓮＝画面中央を軸に厳密対称。
   長さ＝長い方に合わせつつ「ピンクのグロウよりちょっと長め」（可視ピンク径 ~806px）、
   PC では画面端まで届かない。両端フェード＝セクション線 --cl-lightline と同テクニック
   （中央の白ホットスポットは入れない — 光源は花自身で、線は静かな水面のまま）。
   金 #c9ad74/.6 は旧線の stroke と同値。中央から左右へ伸びる draw-in（旧線の
   --dur:1.25s/--d:.05s と同時刻）；デフォルト＝全開（reduce では完成形で静止）。 */
.cl-shore{position:absolute;left:38.4615%;top:72.09%;height:1px;width:min(96vw,1120px);
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(201,173,116,0),rgba(201,173,116,.6) 24%,
    rgba(201,173,116,.6) 76%,rgba(201,173,116,0));
  animation:clShore 1.25s cubic-bezier(.4,0,.2,1) .05s both}
@keyframes clShore{from{transform:translateX(-50%) scaleX(0)}}

/* 波紋 — 案2ドレの水面リング・エミッタの移植（前回決定；07-22「ハモンは出てない。
   まずそれを直してください」）。3つの扁平楕円・9s周期・2.4s位相差、開花開始
   （first petal --d:2s）と同時に発生。infinite は ambient-finite（~39sで静止）規則
   からの文書化された逸脱 — 波紋はブランドの隠喩（「私がやっていくことが波紋の
   ように広がってほしい」）なので鼓動は止めない。静止デフォルト＝opacity:0
   （reduce では不可視 — 水面は静か、それで正しい）。z: svg（z-index:1）の下＝花の後ろ。
   色はソフトゴールド（F3判定）— 金の地平線と同族で「水面の光」と読める。
   ピンク系 rgba(244,134,145,.3) も検証したが、ピンクのグロウ・波・花弁に埋もれて
   リングとして立たず、花と競合するだけだった（briefs/round5 スクショ判定）。 */
.cl-rip{position:absolute;left:200px;top:207px}
.cl-rip i{position:absolute;left:0;top:0;width:460px;height:132px;
  border:1px solid rgba(196,159,90,.28);border-radius:50%;
  transform:translate(-50%,-50%);opacity:0}
.cl-rip i:nth-child(1){animation:clRipple 9s ease-out 2s infinite}
.cl-rip i:nth-child(2){animation:clRipple 9s ease-out 4.4s infinite}
.cl-rip i:nth-child(3){animation:clRipple 9s ease-out 6.8s infinite}
@keyframes clRipple{0%{transform:translate(-50%,-50%) scale(.16);opacity:0}
  40%{opacity:.75}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(min-width:880px){.cl-rip{left:315px;top:326px;transform:scale(1.55)}}

.cl-draw{stroke-dasharray:1 1.02;stroke-dashoffset:0;
  animation:clDraw var(--dur,1.1s) cubic-bezier(.4,0,.2,1) var(--d,0s) both}
@keyframes clDraw{from{stroke-dashoffset:1}}
.cl-rise{animation:clRise 1.7s var(--cl-ease) 0s both,clFade .5s ease-out 0s both}
@keyframes clRise{from{transform:translateY(140px)}}
.cl-petal{transform:rotate(var(--r));transform-origin:300px 300px;transform-box:view-box;
  animation:clPetal var(--dur,2.2s) var(--cl-petal-ease) var(--d,2s) both}
@keyframes clPetal{from{transform:rotate(var(--r0,0deg))}}
/* petals arrive as thin gold line art; pink then climbs the flower
   from the low outer petals to the crown (per-petal --wd) */
.cl-wash{stroke-width:1.6;animation:clWash 1.3s ease-in-out var(--wd,4.5s) both}
@keyframes clWash{from{stroke:#9c8149;fill-opacity:0}}
.cl-blush{opacity:.5;animation:clFade 1.6s ease-in-out 5.4s both}
/* reflection arrives WITH the wash (§1 claire): pulled from 6.3s (the
   end) into the wash window so the mirror image appears as the petals
   turn pink. Default (no opacity set) = shown → reduced-motion finished. */
.cl-reflin{animation:clFade 1.7s ease-in-out 4.7s both}
.cl-refl{opacity:.35;animation:clBreathe 10s ease-in-out 9s 3}
@keyframes clBreathe{0%,100%{opacity:.35}50%{opacity:.2}}
.cl-sway{transform-origin:300px 300px;transform-box:view-box;animation:clSway 13s ease-in-out 8s 2}
@keyframes clSway{0%,100%{transform:rotate(0deg)}33%{transform:rotate(.4deg)}66%{transform:rotate(-.4deg)}}
.cl-waves{animation:clDrift 11s ease-in-out 4.5s 3}
@keyframes clDrift{0%,100%{transform:translateX(0)}30%{transform:translateX(2px)}70%{transform:translateX(-2px)}}

.cl-tag{margin:clamp(.3rem,1.6vw,.8rem) 0 0;font-family:var(--cl-mincho);font-weight:600;
  font-size:clamp(1.3rem,5.4vw,2.05rem);letter-spacing:.16em;text-indent:.16em;
  color:var(--cl-ink);line-height:1.6}
.cl-tag [aria-hidden]{white-space:nowrap}
/* 改行位置の制御（2026-07-31 さやか先生指摘の理念3見出し）：折り返しが必要な幅では
   このスパンの直前でのみ折る。1行に収まる幅では見た目に影響なし — 全幅で本文同一。 */
.cl-nobr{white-space:nowrap}
.cl-ch{display:inline-block;animation:clChar .85s var(--cl-ease) var(--d) both}
.cl-tag [aria-hidden] .cl-ch:last-child{margin-right:-.5em}
@keyframes clChar{from{opacity:0;transform:translateY(-9px)}}
.cl-lus{margin:.85rem 0 0;font-family:var(--cl-caps);font-size:.7rem;letter-spacing:.28em;
  text-indent:.28em;color:var(--cl-muted);animation:clUp 1s var(--cl-ease) 4.9s both}
.cl-lus b{font-weight:400;color:var(--cl-gold-text)}
.cl-hook{margin:1.05rem auto 0;max-width:24em;color:var(--cl-muted);font-size:.9rem;
  line-height:2.05;animation:clUp 1s var(--cl-ease) 5.2s both}
@keyframes clUp{from{opacity:0;transform:translateY(8px)}}

/* ============================================================
   plates + section grammar — Lumière's light-in-the-line:
   1px gold hairline that turns white at its center, then the
   gold Gilda folio, the Tenor eyebrow, the heading
   ============================================================ */
.cl-plate{padding:clamp(3.6rem,8vw,5.8rem) 0}
#mission,#services,#medical,#reservation{background:var(--cl-plate)}
#menu{background:var(--cl-veil)}
.cl-in{max-width:var(--cl-maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,1.75rem)}
.cl-sec{text-align:center;margin:0 0 clamp(2rem,4.8vw,2.9rem)}
.cl-sec::before{content:"";display:block;width:min(440px,72vw);height:1px;
  margin:0 auto clamp(1.9rem,4.5vw,2.6rem);background:var(--cl-lightline)}
/* no-rule variant — drops the gold hairline ornament above the title on the
   セミナー / 施術 page headers (Vincent: "don't need the gold line + 01 there").
   Homepage headers keep their hairline; only the folio numbers go. (§CLAIRE.4) */
.cl-sec--norule::before{display:none}
.cl-folio{margin:0;font-family:var(--cl-serif);font-size:1.02rem;letter-spacing:.24em;
  text-indent:.24em;color:var(--cl-gold-text)}
.cl-eyebrow{margin:.3rem 0 0;font-family:var(--cl-caps);text-transform:uppercase;
  font-size:.68rem;letter-spacing:.3em;text-indent:.3em;color:var(--cl-gold-text)}
/* 2026-07-20：「理念」の見出しが「ちょっとデカい」「ちょっとポップすぎる」「フォントがもうちょっと
   エレガントなやつの方が」との指摘。**書体は明朝に替えない** — docs/DECISIONS.md の確定事項：
   「when Sayaka said the early design felt "too pop," she meant size/colour/spacing, *not* the
   typeface（元サイトもゴシック）。Fix "pop" with scale/colour/space, not by switching to a serif
   JP face.」＝過去に同じ指摘を受けたときの結論。よってスケールを落とし、字送りと行間で品を出す。
   全セクション見出しに適用（「次のセクションにも同じフォントだと思うから、その考えをキープしながら」）。
   これで足りなければ次の手も色と余白であって、明朝ではない → ROUND5-CONTRACT.md 未決事項。 */
.cl-h{margin:.9rem auto 0;font-size:clamp(1.12rem,2.3vw,1.4rem);font-weight:500;
  letter-spacing:.14em;line-height:1.9;max-width:32em;text-wrap:balance}
.cl-h--gold{color:var(--cl-gold-text);font-size:clamp(1.16rem,2.4vw,1.44rem);
  letter-spacing:.42em;text-indent:.42em}
#services .cl-h,#partners .cl-h{font-size:clamp(1.02rem,2vw,1.24rem);letter-spacing:.1em}
/* PROFILE の見出し「LUTIS代表」(2026-08-26 Vincent)：LUTIS だけをヘッダーのワードマークと
   同じ字面に — --cl-serif / weight 400 / .22em トラッキング / アクセント赤 — 代表 は本文の
   墨のまま。.cl-ban-n・.cl-arch-n と同じ「ラテンは中、和文は外」イディオムで、これは好みでは
   なく必須：Gilda は Latin-only なので 代表 を span の中に入れるとシステム明朝に落ちる（禁止）。
   末尾のレタースペースはいったん打ち消したうえで、意図した空きを足す（2026-08-26 Vincent
   「a little bit of space in between them」）。打ち消さずに放っておくと空きは .22em ＝
   トラッキングの残りかすで、偶発的な単語間スペースに見える。ここは .24em を「決めて」置く
   （2026-08-26 Vincent「increase the distance ... by 30% or so」で .18em から広げた）。
   （ヘッダーは text-indent で同じ補正をしている — インライン span には効かない） */
.cl-h-mark{font-family:var(--cl-serif);font-weight:400;letter-spacing:.22em;
  margin-right:calc(.24em - .22em);color:var(--cl-accent)}
/* 和文側（2026-08-26 Vincent「the kanji look a little bit too 'pop'-y next to the very elegant
   letters in the Gilda font」）。処方は TASTE.md 禁止事項5 のとおり **書体を明朝に替えず**、
   ウェイト・字間で直す：
     ・--cl-head（Zen Kaku Gothic New 500）→ --cl-body（Noto Sans JP 400）。どちらもサイトで
       既に使っている書体で、Noto は本文用＝より中性的。Zen Kaku は意図的に丸く温かい書体で、
       Gilda の細い線の隣ではその温かさが「ポップ」に出る。
     ・字間を LUTIS と同じ .22em に揃え、ひとつのロックアップとして読ませる。
   **色は触らない** — 「the 代表 is the normal black it was before」（同日 Vincent）。
   末尾の字間は margin で打ち消す（打ち消さないと見出しの光学中心が右にずれる）。 */
.cl-h-jp{font-family:var(--cl-body);font-weight:400;letter-spacing:.22em;margin-right:-.22em}
/* 語の途中で折り返させない小ユーティリティ（見出しの「3つの取り組み」など） */
.cl-nw{white-space:nowrap}
.cl-lead{max-width:38em;margin:0 auto 1.4rem;color:var(--cl-soft);line-height:2.1;text-align:left}
.cl-notes{list-style:none;max-width:640px;margin:0 auto;padding:0;text-align:left}
.cl-notes li{font-size:.92rem;line-height:2;color:var(--cl-soft);
  padding:.6rem .1rem;border-bottom:1px solid var(--cl-hairline)}
.cl-notes li:last-child{border-bottom:0}
.cl-more{text-align:center;margin-top:clamp(1.8rem,4vw,2.5rem)}
.cl-more a{font-family:var(--cl-head);font-weight:500;font-size:.93rem;
  letter-spacing:.08em;color:var(--cl-ink);border-bottom:1px solid var(--cl-gold-line);
  padding-bottom:.3rem;transition:color .2s,border-color .2s}
.cl-more a:hover{color:var(--cl-accent);border-color:var(--cl-accent);
  text-decoration:none}
/* 法人向け／ピラティススタジオ向けの導線はテキストリンクではなくボタン（2026-07-20 レミさん：
   「会社の人とかが見たときにすぐコネクト取れるところがある」）。 */
.cl-act{text-align:center;margin-top:clamp(1.8rem,4vw,2.5rem)}
/* セクション内の小見出し＋補足（ピラティススタジオ向けセクション用。原稿の《内容》《過去の実績》） */
.cl-minih{max-width:640px;margin:clamp(1.9rem,4vw,2.5rem) auto .5rem;font-family:var(--cl-head);
  font-weight:700;font-size:.88rem;letter-spacing:.13em;color:var(--cl-gold-text);text-align:left}
.cl-note{max-width:640px;margin:.75rem auto 0;font-size:.84rem;line-height:1.95;
  color:var(--cl-muted);text-align:left}
.cl-note--center{text-align:center;margin-top:clamp(1.6rem,3.6vw,2.2rem)}
.cl-note--center + .cl-act{margin-top:.85rem}
.cl-plate--last{padding-bottom:clamp(4.2rem,9vw,6.4rem)}

/* ============================================================
   03 What We Do — three EQUAL photo cards, side-by-side ≥720px
   (§CLAIRE.5 rebalance). A compact routing section: each card is
   one photo + label + one line + a cue, and the whole card links
   to seminars / care / connect. Replaces the old lopsided teaser
   stack (one big banner + two text blocks). folio dropped.
   ============================================================ */
.cl-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem);
  max-width:980px;margin:0 auto}
@media(max-width:719.98px){.cl-svc{grid-template-columns:1fr;max-width:400px;gap:1.1rem}}
.cl-svc-card{display:flex;flex-direction:column;background:var(--cl-bg);
  border:1px solid var(--cl-card-line);border-radius:2px;overflow:hidden;color:var(--cl-ink);
  transition:box-shadow .25s,transform .25s,border-color .25s}
.cl-svc-card:hover{text-decoration:none;border-color:var(--cl-gold-line);
  box-shadow:0 12px 30px -20px rgba(58,52,54,.45);transform:translateY(-2px)}
.cl-svc-ph{display:block;overflow:hidden;background:var(--cl-veil)}
.cl-svc-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s var(--cl-ease)}
.cl-svc-card:hover .cl-svc-ph img{transform:scale(1.045)}
.cl-svc-body{display:flex;flex-direction:column;flex:1;
  padding:clamp(1rem,2.2vw,1.3rem) clamp(.95rem,2vw,1.2rem) clamp(1.05rem,2.3vw,1.35rem)}
.cl-svc-en{font-family:var(--cl-caps);text-transform:uppercase;font-size:.6rem;
  letter-spacing:.28em;text-indent:.28em;color:var(--cl-gold-text)}
.cl-svc-h{margin:.32rem 0 0;font-family:var(--cl-head);font-weight:600;font-size:1.06rem;
  letter-spacing:.06em;line-height:1.4;color:var(--cl-ink)}
.cl-svc-txt{margin:.55rem 0 0;font-size:.82rem;line-height:1.85;color:var(--cl-soft)}
.cl-svc-more{margin-top:auto;padding-top:.9rem;font-family:var(--cl-head);font-weight:500;
  font-size:.8rem;letter-spacing:.04em;color:var(--cl-gold-text)}
.cl-svc-card:hover .cl-svc-more{color:var(--cl-accent)}

/* ============================================================
   01 理念 — the brand mark as the section ornament (her idea):
   a small gold crest under the gold 理念 heading, resting in a
   faint circular moon halo — the one moon echo outside the hero
   ============================================================ */
.cl-ornament{position:relative;z-index:0;display:flex;justify-content:center;
  margin:calc(-1 * clamp(.6rem,1.6vw,1rem)) 0 clamp(1.8rem,4vw,2.4rem)}
.cl-ornament::before{content:"";position:absolute;left:50%;top:50%;width:238px;height:210px;
  transform:translate(-50%,-50%);z-index:-1;background:var(--cl-halo)}
.cl-ornament img{height:75.6px;width:auto}
.cl-phi-lead{max-width:34em;margin:0 auto;color:var(--cl-ink);
  font-size:clamp(.97rem,1.6vw,1.05rem);line-height:2.25;letter-spacing:.02em;
  text-align:center;text-wrap:pretty}  /* 2026-07-22: センタリング（理念見出しが中心軸） */
.cl-phi-lead strong{font-weight:600;color:var(--cl-gold-text)}
/* 理念リードは1行=1ブロック（2026-07-20 口述）。keep-all で語中折り返しを禁じ、狭い画面では
   HTML 側の <wbr> の位置でだけ折り返す。以前は1つの長い段落で「立ち上が／る」と割れていた。 */
.cl-phi-l{display:block;word-break:keep-all;overflow-wrap:normal}
.cl-phi-l--en{margin-top:.5em;letter-spacing:.07em}
.cl-phi-l--em{font-weight:700;color:var(--cl-accent-deep);letter-spacing:.09em}
/* mission — plain centered-number text blocks: no boxes, no photos */
.cl-mission{list-style:none;padding:0;margin:clamp(2.2rem,5vw,3rem) auto 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3.4vw,2.4rem)}
@media(max-width:820px){.cl-mission{grid-template-columns:1fr;max-width:560px}}
@media(min-width:821px){
  .cl-mission{row-gap:0}
  .cl-mission li{display:grid;grid-template-rows:subgrid;grid-row:span 3}
}
.cl-mission li{margin:0;text-align:center;font-size:.9rem;line-height:2;color:var(--cl-soft)}
.cl-mi-num{display:block;font-family:var(--cl-serif);font-size:1.5rem;letter-spacing:.1em;
  color:var(--cl-gold-text)}
.cl-mi-num::after{content:"";display:block;width:26px;height:1px;background:var(--cl-gold-line);
  margin:.55rem auto .95rem}
.cl-mission h3{margin:0 0 .55rem;font-size:1rem;font-weight:700;letter-spacing:.04em;line-height:1.8}
.cl-mission p{text-align:left;text-wrap:pretty}

/* ============================================================
   02 プロフィール — plain rectangle portrait, name Zen Kaku 500,
   headline achievements visible before the fold
   ============================================================ */
.cl-profile{display:grid;grid-template-columns:1fr;gap:2rem;max-width:920px;margin:0 auto;text-align:left}
@media(min-width:760px){.cl-profile{grid-template-columns:300px 1fr;gap:3rem;align-items:start}}
.cl-profile-photo{margin:0;max-width:280px}
@media(min-width:760px){.cl-profile-photo{max-width:none}}
.cl-profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}
.cl-name{margin:0;font-family:var(--cl-head);font-weight:500;
  font-size:clamp(1.45rem,3.2vw,1.7rem);letter-spacing:.12em}
.cl-creds{margin:.5rem 0 1.15rem;font-size:.86rem;color:var(--cl-muted);
  padding-bottom:1.05rem;border-bottom:1px solid var(--cl-hairline)}
.cl-bio{font-size:.94rem;line-height:2.1;color:var(--cl-ink)}
.cl-star{list-style:none;margin:1.15rem 0 0;padding:.9rem 1.05rem;
  background:rgba(201,173,116,.1);border-left:2px solid var(--cl-gold-line)}
.cl-star li{font-size:.9rem;line-height:1.95;color:var(--cl-ink)}
.cl-star li + li{margin-top:.35rem}
.cl-star b{font-weight:700;color:var(--cl-accent-deep)}
.cl-fold{margin-top:1.5rem;border-top:1px solid var(--cl-gold-line);border-bottom:1px solid var(--cl-gold-line)}
.cl-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.9rem;
  padding:1rem .15rem;font-family:var(--cl-head);font-weight:500;font-size:.9rem;
  letter-spacing:.06em;color:var(--cl-gold-text);transition:color .2s}
.cl-fold summary::-webkit-details-marker{display:none}
/* ASCII "+" (U+002B), not fullwidth "＋" (U+FF0B): --cl-serif is Gilda Display, which has
   U+002B and U+2212 but NOT U+FF0B — so the closed state used to fall through to a system
   serif while the open state rendered in Gilda, i.e. the indicator changed typeface as you
   opened it (fixed 2026-07-31). Keep both glyphs inside Gilda's coverage. */
.cl-fold summary::after{content:"+";margin-left:auto;font-family:var(--cl-serif);
  color:var(--cl-gold-text);flex:none}
.cl-fold[open] summary::after{content:"−"}
.cl-fold summary:hover{color:var(--cl-accent)}
.cl-fold-body{padding:.1rem .15rem 1.4rem}
.cl-fold h4{font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--cl-gold-text);
  margin:1.3rem 0 .3rem}
.cl-fold h4:first-child{margin-top:.2rem}
.cl-sub{font-weight:700;font-size:.82rem;color:var(--cl-muted);margin:.9rem 0 .1rem}
.cl-fold ul{list-style:none;margin:0;padding:0}
.cl-fold li{font-size:.85rem;line-height:1.95;color:var(--cl-soft);
  padding:.45rem 0;border-bottom:1px solid var(--cl-hairline)}
.cl-fold li:last-child{border-bottom:0}

/* ============================================================
   03 what we do — light one-line teasers (§7 IA dedup): label +
   one line + link. ONE featured Course banner is the only image.
   Also the seminars-surface featured fragment intro lives here.
   ============================================================ */
/* what-we-do = 3 EQUAL COMPACT image cards, side-by-side ≥720px, stacked on
   mobile (§CLAIRE.5). Routing only: small plain-rectangle photo (NO arch — arch
   geometry stays exclusive to seminar thumbs) + one-line blurb + link to the page.
   Equal heights via stretched grid rows + flex body with the blurb pushing the
   more-link to the foot. */
.cl-svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,1.8rem);
  max-width:960px;margin:0 auto}
@media(min-width:720px){.cl-svc-grid{grid-template-columns:repeat(3,1fr)}}
.cl-svc-card{display:flex;flex-direction:column;background:#fff;color:var(--cl-ink);
  border:1px solid var(--cl-card-line);overflow:hidden;transition:border-color .2s}
a.cl-svc-card:hover{border-color:var(--cl-gold-line);text-decoration:none}
.cl-svc-ph{display:block}
.cl-svc-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--cl-veil)}
.cl-svc-body{display:flex;flex-direction:column;flex:1;padding:1rem 1.15rem 1.2rem;text-align:left}
.cl-svc-en{font-family:var(--cl-caps);text-transform:uppercase;font-size:.62rem;
  letter-spacing:.28em;color:var(--cl-gold-text)}
.cl-svc-h{margin:.25rem 0 .45rem;font-family:var(--cl-head);font-weight:700;
  font-size:1.1rem;letter-spacing:.1em}
.cl-svc-txt{flex:1;font-size:.86rem;line-height:1.85;color:var(--cl-soft)}
.cl-svc-more{align-self:flex-start;margin-top:.75rem;font-family:var(--cl-head);font-weight:500;
  font-size:.84rem;color:var(--cl-ink);border-bottom:1px solid var(--cl-gold-line);
  padding-bottom:.12rem;transition:color .2s,border-color .2s}
a.cl-svc-card:hover .cl-svc-more{color:var(--cl-accent);border-color:var(--cl-accent)}
/* featured fragment (injected inside .cl-doc on seminars.html) */
.cl-featured{max-width:var(--cl-maxw);margin:0 auto}
.cl-sem-lead{margin:.6rem auto 0;font-size:.9rem;line-height:2.05;color:var(--cl-soft);max-width:44em}
.cl-featured .cl-lead,.cl-featured .cl-sem-lead{margin-left:auto;margin-right:auto;max-width:44em}
.cl-quickwrap{max-width:440px;margin:clamp(1.6rem,4vw,2.4rem) auto 0}

/* ============================================================
   SEMINAR TYPE GROUPS (2026-07-20) — セミナー一覧を種類ごとのセクションに割る。
   round 4 は「タイプ・チップの色で分かるはず」に賭けたが、外部の目（レミさん）で外れた：
   「そこは正直わかんなかった」。さやか先生も「それがいまいち伝わりにくい」「セクションを
   分けた方がいい気がする」。手本は施術ページ（本人が「こんな感じでセミナーもセクション
   分けしてもらったらめちゃくちゃいいです」と名指し）。チップは残すが、区別を担うのは見出し。
   ============================================================ */
.cl-semgroup{margin-top:clamp(2.6rem,6vw,4rem)}
.cl-semgroup-head{text-align:center;margin:0 0 clamp(.4rem,1.4vw,.8rem)}
.cl-semgroup-head::before{content:"";display:block;width:min(320px,58vw);height:1px;
  margin:0 auto clamp(1.3rem,3vw,1.8rem);background:var(--cl-lightline)}
.cl-semgroup-h{margin:0;font-family:var(--cl-head);font-weight:700;
  font-size:clamp(1rem,2.1vw,1.2rem);letter-spacing:.2em;text-indent:.2em;
  color:var(--cl-ink)}
.cl-semgroup-sub{margin:.6rem 0 0;font-size:.83rem;letter-spacing:.04em;color:var(--cl-muted)}
.cl-semgroup-note{max-width:38em;margin:clamp(1rem,2.4vw,1.4rem) auto 0;
  font-size:.86rem;line-height:2;color:var(--cl-soft);text-align:left}

/* ============================================================
   BANNER SYSTEM — the half-moon arches (the ONLY arch shapes,
   contract §1.4). Field: moonlight radial of the family pale.
   Photo untouched; white LUTIS mark bottom-right is the sole
   thing on it. One hairline per banner: the 64px gold rule
   under the title (Lumière's loved line). Type chip visible
   at top (パッと分かる); state = production pink square, once;
   info bar one line. Text left-aligned (contract §1.13).
   iOS rule: container-type lives HERE on .cl-ban (no
   aspect-ratio on it); every .cl-ban-phwrap declares its own
   aspect-ratio and never carries container-type.
   ============================================================ */
.cl-ban{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 38%;
  grid-template-rows:minmax(min-content,1fr) auto;
  gap:0 clamp(14px,3cqw,22px);container-type:inline-size;
  color:var(--cl-ink);--deep:#96525e;--deep2:var(--deep);--pale:#f7edef;
  background:radial-gradient(130% 105% at 50% 8%,#ffffff 0%,#ffffff 30%,var(--pale) 96%);
  padding:clamp(13px,3cqw,20px)}
a.cl-ban:hover{text-decoration:none}
a.cl-ban:hover .cl-ban-title{color:var(--deep2)}
.cl-ban--quick{--deep:var(--cl-quick);--deep2:var(--cl-quick);--pale:var(--cl-quick-pale)}
.cl-ban--course,.cl-ban--kotsu{--deep:#b23a48;--deep2:#93303c;--pale:#fbe9ed}
.cl-ban--collab{--deep:#6f5a2a;--deep2:#6f5a2a;--pale:#f8f1e2}

/* the arch — every wrapper has its OWN aspect-ratio (iOS rule).
   ≥660px: tall window in the right column. <660px (--feat): full-width 16/10 under the text.
   NOTE: the round-4 `max-height:clamp(112px,34vw,152px)` cap on the featured dome is GONE —
   capping the height of a 16/10 box let the 999px radius eat the whole top edge, which is exactly
   what she saw: 「なんか変な丸 上が平坦で、サイドは丸いみたいな」「写真も見せたいのか見せたくないのか
   よくわからん」. Never reintroduce a height cap here; control size with the banner's max-width. */
.cl-ban-phwrap{grid-area:1/2;position:relative;overflow:hidden;width:100%;
  align-self:center;aspect-ratio:4/5;border-radius:999px 999px 0 0}
.cl-ban-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 24%}
.cl-ban--course .cl-ban-ph{object-position:50% 22%}
.cl-ban--quick .cl-ban-ph{object-position:60% 22%}
/* kotsuban banner photo = kotsuban-banner.webp (pt3, purpose-built 16:10 crop of
   LUTIS主催/2.jpeg — 白衣写真は本人却下). 35% y protects her headroom if a window
   ever renders wider than 16:10 (media agent's measured recommendation). */
.cl-ban--kotsu .cl-ban-ph{object-position:50% 35%}
.cl-ban-mark{position:absolute;z-index:2;right:clamp(10px,2.4cqw,16px);
  bottom:clamp(8px,2cqw,13px);font-family:var(--cl-serif);font-weight:400;line-height:1;
  font-size:clamp(10px,2.4cqw,15px);letter-spacing:.3em;color:#fff;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* the type field */
.cl-ban-txt{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;min-width:0;text-align:left;padding:0;font-family:var(--cl-head)}
.cl-ban-typechip{display:inline-block;font-weight:700;line-height:1.5;letter-spacing:.05em;
  padding:.34em .9em;font-size:clamp(10px,2.9cqw,12.5px);white-space:nowrap}
/* type chips are FLAT filled tags (no border) so the outlined-pill
   chrome belongs uniquely to .cl-ban-state inactive badges — this stops
   the Course chip / prep-state hue collision on the 骨盤底筋 card (craft
   loop it.1). fill+text unchanged → contrast unchanged. */
.cl-ban-typechip--quick{color:var(--cl-quick);background:var(--cl-quick-pale)}
.cl-ban-typechip--course{color:#b23a48;background:#fbe9ed}
.cl-ban-typechip--collab{color:#6f5a2a;background:#f8f1e2}
.cl-ban-aud{margin-top:6px;font-weight:500;font-size:clamp(10px,2.9cqw,12px);
  letter-spacing:.1em;color:var(--cl-muted);line-height:1.55;word-break:keep-all;
  overflow-wrap:anywhere}
.cl-ban-hook{margin-top:5px;font-weight:700;font-size:clamp(11px,3.1cqw,14px);
  letter-spacing:.04em;color:var(--cl-soft);line-height:1.55;word-break:keep-all}
.cl-ban-title{margin-top:5px;font-weight:700;color:var(--deep);
  font-size:clamp(17px,5cqw,24px);line-height:1.45;letter-spacing:.03em}
.cl-ban-title b,.cl-ban-title small{display:inline-block}
.cl-ban-title .pt{font-size:.6em;font-weight:500;color:var(--cl-muted);
  letter-spacing:.02em;margin:0 .05em}
.cl-ban-title small:not(.pt){font-size:.62em;font-weight:500;color:var(--cl-muted)}
/* the one hairline of the banner */
.cl-ban-title::after{content:"";display:block;width:64px;height:1px;
  background:var(--cl-gold-line);margin:.38em 0 0}
.cl-ban-n{font-family:var(--cl-serif);font-weight:400;font-size:1.18em;letter-spacing:.02em}
.cl-ban-vol{font-family:var(--cl-serif);font-weight:400;font-size:1.12em;letter-spacing:.04em}
/* keep-all holds 熟語 together, which is what we want and is why it is here. Its cost is that a
   Japanese subtitle becomes ONE unbreakable run — no spaces, so no break opportunity anywhere —
   and .cl-ban-txt is a flex column with align-items:flex-start, so the item sizes to max-content
   and simply SPILLS out of the text column and under the photo instead of wrapping. Measured
   2026-08-21 on quick vol.33, whose ―…― tail off the Square item title runs 22 characters: +80px
   at 390, +49px at 768/1280, under the photo at every width, on the detail hero AND on its card
   on seminars.html.
   Two properties, and both are needed: max-width:100% clamps the flex item to the column (with
   flex-start it would otherwise keep its max-content width, so there is no overflow WITHIN the
   item for a wrap rule to act on), and overflow-wrap:break-word is then the last-resort escape —
   keep-all still decides where a break is PREFERRED; this only acts when the line would
   otherwise overflow. Not `anywhere`, which would also shrink min-content and let the grid
   re-size the text column. Verified by a site-wide census (114 pages × 390/768/1280): the only
   renderings that change are vol.33's six overflows and vol.31's 7px overhang at 390. */
.cl-ban-sub{margin-top:5px;font-weight:500;font-size:clamp(10.5px,3cqw,13px);
  letter-spacing:.05em;color:var(--cl-soft);line-height:1.6;word-break:keep-all;
  max-width:100%;overflow-wrap:break-word}
/* the trailing-detail tail (／￥1,500・を学ぶ). nowrap added 08-07: at 390px a tail broke
   after its ／, leaving the separator stranded at the end of the line. Tails are short by
   construction, so keeping one whole costs no overflow — and it reads as one unit, which is
   what it is. (08-21: the 骨盤底筋 定員 tail that prompted this moved to .cl-ban-cap in the
   foot bar on Sayaka's instruction; the rule still guards the price and 〜を学ぶ tails.) */
.cl-ban-sub small{font-size:.85em;color:var(--cl-muted);white-space:nowrap}
/* state — production pink-square port (.sch-status grammar): solid
   受付中, 2px outline アーカイブ, 1px solid outline 準備中 (production
   prep is solid, not dashed — craft loop it.1); square corners;
   appears exactly once */
/* the foot bar — state + one line of info, spanning BOTH columns (Lumière's grammar:
   the banner reads 情報 → 写真 → 一行のバー). State appears exactly once, in here. */
.cl-ban-bar{grid-area:2/1/3/3;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.45em .85em;margin-top:clamp(10px,2.4cqw,15px)}
/* 07-30: long info lines wrap WITHIN themselves beside the pill instead of the
   whole span dropping below it (今期終了 was landing alone on its own row) */
.cl-ban-info{flex:1 1 12em;min-width:0}
.cl-ban-state{display:inline-block;font-weight:700;line-height:1.5;
  letter-spacing:.06em;padding:.34em .95em;font-size:clamp(9.5px,2.7cqw,12px);white-space:nowrap}
.cl-ban-state.is-upcoming{background:var(--cl-accent);color:#fff}
.cl-ban-state.is-archive{background:#fff;border:2px solid var(--cl-accent);color:var(--cl-accent-deep)}
.cl-ban-state.is-prep{background:#fff;border:1px solid var(--cl-accent);color:var(--cl-accent-deep)}
/* 今期終了 (finished this term, 07-22 pt2): the quietest badge — veil + muted,
   deliberately whispers next to the red 受付中 */
.cl-ban-state.is-done{background:var(--cl-veil);color:var(--cl-muted)}
/* 次回○月開催予定 (fix pass 07-23): accent-red like 受付中 — visible, never
   grey; dashed = future, the same language as the schedule's is-next ribbons */
.cl-ban-state.is-next{background:#fff;border:1.5px dashed var(--cl-accent);color:var(--cl-accent-deep)}
/* …and its inline form — the featured fragment (and the detail heroes, which
   reuse this banner grammar) mark the 次回 note as a bare <span class="is-next">
   in the info line: same accent, bold, never muted — anywhere inside a banner */
.cl-ban .is-next{color:var(--cl-accent-deep);font-weight:700}
.cl-ban-info{font-weight:500;font-size:clamp(10px,2.9cqw,12.5px);
  letter-spacing:.04em;color:var(--cl-soft);line-height:1.6}
.cl-ban-info small{font-size:.85em;color:var(--cl-muted)}
/* the venue capacity (08-21, Sayaka: 「文字を大きくして」「開講／会場の行の右横に」). It shipped
   08-07 as a muted <small> tail on .cl-ban-sub; she asked for it bigger and moved down here.
   Grammar = the existing .cl-ban .is-next inline note — accent-deep, bold, never muted —
   plus one size step, which makes it the loudest thing in the bar. That is deliberate: with
   申込締切 declined (she answered 「今回は記載しません」 the same day), 定員 is the only scarcity
   cue the page has left. No chip/badge: a filled or outlined one here would collide with
   .cl-ban-state (is-done is veil-filled; is-archive/-prep are outlined). nowrap so the fact
   never breaks in half when the info line wraps beside the pill. */
.cl-ban-cap{margin-left:.6em;font-weight:700;font-size:1.15em;color:var(--cl-accent-deep);
  white-space:nowrap;letter-spacing:.02em}

/* featured — Round-3 Lumière's grammar (text ON TOP, full-width 16/10 arch BELOW, bar last).
   2026-07-22 pt2: this stack now holds at EVERY width — the ≥660px side-window variant is
   retired (it collapsed the course banners into the Quick-card look; Vincent disliked it,
   Sayaka agreed Course should read differently from Quick). Size discipline stays via
   max-width, never a photo height cap. Above-photo text got one size bump on the same call
   (「文字がちっちゃくない?」); the below-photo bar is deliberately unchanged. */
.cl-ban--feat{max-width:520px;margin:clamp(1.3rem,3.2vw,1.9rem) auto 0;
  grid-template-columns:minmax(0,1fr)}
.cl-ban--feat .cl-ban-txt{grid-area:1/1}
.cl-ban--feat .cl-ban-phwrap{grid-area:2/1;aspect-ratio:16/10;
  margin-top:clamp(11px,3.2vw,15px)}
.cl-ban--feat .cl-ban-bar{grid-area:3/1}
/* course category chip (fix pass 07-23): bumped to the same emphasis as the
   Quick/collab labels and past them — the most important offering must never
   carry the smallest label on the page. Fill/text colours unchanged. */
.cl-ban--feat .cl-ban-typechip{font-size:clamp(13.5px,3.8cqw,16.5px);letter-spacing:.06em}
.cl-ban--feat .cl-ban-title{font-size:clamp(19px,5.4cqw,25px);line-height:1.45}
.cl-ban--feat .cl-ban-sub{font-size:clamp(11.5px,3.2cqw,14px)}
.cl-ban--feat .cl-ban-state{font-size:clamp(10px,2.8cqw,12px)}
.cl-ban--feat .cl-ban-info{font-size:clamp(10px,2.9cqw,12.5px)}
.cl-ban--big{max-width:520px}
/* course banners line up like the archive grid below (3-up → 2-up → stack),
   same card at every width — only the count per row changes. Inside the grid
   the banners must NOT carry auto side-margins: on a grid item they cancel
   justify-self:stretch and the card collapses to min-content — one-kanji-per-
   line titles and a zero-width (thus zero-height) arch photo (the 07-29
   thin-strips bug). */
@media(min-width:561px){
  #course{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.1rem,2.5vw,1.6rem);max-width:1220px;margin-inline:auto}
  #course .cl-semgroup-head{grid-column:1/-1}
  #course .cl-ban--feat{margin-left:0;margin-right:0;max-width:none;
    /* photos + bars bottom-anchor so the three cards align regardless of how
       many lines each text block/bar takes; the txt row absorbs the slack */
    grid-template-rows:1fr auto auto}
  #course .cl-ban--feat:last-of-type:nth-of-type(odd){grid-column:1/-1;
    justify-self:center;width:100%;max-width:520px}
}
@media(min-width:861px){
  #course{grid-template-columns:repeat(3,minmax(0,1fr))}
  #course .cl-ban--feat:last-of-type:nth-of-type(odd){grid-column:auto;
    justify-self:stretch;max-width:none}
}

/* cards — small window arches: type left, narrow arch right,
   window sitting on the card's foot line */
.cl-ban-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.6vw,1.6rem);
  margin-top:clamp(1.2rem,3vw,1.8rem);align-items:stretch;max-width:920px;
  margin-left:auto;margin-right:auto}
@media(max-width:679.98px){.cl-ban-row{grid-template-columns:1fr;max-width:480px}}
.cl-ban--card{grid-template-columns:minmax(0,1fr) 36%;
  gap:0 clamp(12px,3.2cqw,18px);padding:clamp(12px,3cqw,18px)}
.cl-ban--card .cl-ban-phwrap{align-self:end;aspect-ratio:3/4}
.cl-ban--card .cl-ban-title{font-size:clamp(15px,4.6cqw,19px)}
.cl-ban--card .cl-ban-typechip{font-size:clamp(9.5px,2.8cqw,11.5px)}
.cl-ban--card .cl-ban-aud{font-size:clamp(9px,2.6cqw,11.5px);margin-top:8px}
.cl-ban--card .cl-ban-hook{font-size:clamp(9.5px,2.8cqw,12.5px);margin-top:5px}
.cl-ban--card .cl-ban-sub{font-size:clamp(9.5px,2.7cqw,12px)}
.cl-ban--card .cl-ban-info{font-size:clamp(9.5px,2.7cqw,12px)}
.cl-ban--card .cl-ban-mark{font-size:clamp(8px,2cqw,11px);right:clamp(7px,1.8cqw,11px);
  bottom:clamp(6px,1.5cqw,9px)}

/* ============================================================
   クイック「アーカイブ配信」 — vol.30→vol.1 compact rows
   (GEN:QUICKLIST, 2026-07-22 written feedback). Quiet index
   grammar: Gilda gold vol numerals left, Zen Kaku titles, one
   hairline per row (soft pink), one gold opening rule; 2-col
   ledger ≥760px (borders live on the li so hairlines align
   across the gutter), 1-col below. Subs wrap as a unit.
   cl-ban-row--one centers the lone vol.31 card in its row.
   ============================================================ */
.cl-ban-row--one{grid-template-columns:minmax(0,480px);justify-content:center}
.cl-qarch{margin:clamp(2.1rem,4.8vw,3rem) auto 0;max-width:760px}
.cl-qarch-head{text-align:center;margin:0 0 clamp(.85rem,2vw,1.15rem)}
.cl-qarch-h{margin:.15rem 0 0;font-family:var(--cl-head);font-weight:700;
  font-size:clamp(.92rem,1.9vw,1.05rem);letter-spacing:.18em;text-indent:.18em;
  color:var(--cl-ink)}
.cl-qarch-lead{max-width:38em;margin:0 auto clamp(1rem,2.4vw,1.4rem);
  font-size:.86rem;line-height:2;color:var(--cl-soft);text-align:left}
.cl-qarch-list{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--cl-gold-line);
  display:grid;grid-template-columns:1fr}
@media(min-width:760px){.cl-qarch-list{grid-template-columns:1fr 1fr;
  column-gap:clamp(1.7rem,3.6vw,2.6rem)}}
.cl-qarch-list li{display:flex;border-bottom:1px solid var(--cl-hairline)}
.cl-qrow{flex:1;display:flex;align-items:baseline;gap:.8em;
  padding:.74em .15em .7em;color:var(--cl-ink);line-height:1.65}
.cl-qrow:hover{text-decoration:none}
.cl-qrow:hover .cl-qrow-t{color:var(--cl-quick)}
.cl-qrow::after{content:"\203A";margin-left:auto;padding-left:.6em;
  color:var(--cl-gold-line);font-family:var(--cl-serif)}
.cl-qrow-vol{flex:0 0 3.2em;font-family:var(--cl-serif);font-weight:400;
  font-size:.88rem;letter-spacing:.04em;color:var(--cl-gold-text);white-space:nowrap}
.cl-qrow-t{font-family:var(--cl-head);font-weight:500;
  font-size:clamp(.82rem,2.1vw,.88rem);letter-spacing:.02em;min-width:0}
.cl-qrow-sub{display:inline-block;font-size:.84em;font-weight:400;
  color:var(--cl-muted);margin-left:.45em}
/* .cl-qarch-head / .cl-qarch-h above are the shared "archive sub-block" header —
   the コラボセミナー section reuses them for これまでのコラボセミナー (2026-07-30). The
   collab block needs air under the section note; the quick one sits right after a card. */
#collab .cl-qarch-head{margin-top:clamp(1.9rem,4.2vw,2.7rem)}

/* ============================================================
   「公開終了したセミナー記録」 — retired records as a text index
   (2026-07-30 Vincent). Same ledger grammar as the quick
   アーカイブ配信 above — ONE gold opening rule, one soft-pink
   hairline per row, gold guillemet — but a single column: these
   are CMS titles and run ~3x longer than a quick theme. Years
   group the list so a row carries only its own month/day.
   Only the YEAR is set in --cl-serif: Gilda is Latin-only, so
   月/日 inside it would fall back to system Mincho (banned) —
   same idiom as .cl-ban-n, digits in, kanji outside.
   《place》 and the 【format】 tail are demoted, never dropped:
   inline-block so each wraps as a unit and can't strand a single
   character at a line end (the repeated orphan defect).
   One rule total — thin+thick pairs are ダサい (docs/TASTE.md 13).
   ============================================================ */
.cl-doc--arch{max-width:760px;margin-inline:auto}
.cl-arch{border-top:1px solid var(--cl-gold-line);margin-top:clamp(1rem,2.4vw,1.4rem)}
.cl-arch-yr{margin:clamp(1.6rem,3.6vw,2.2rem) 0 .15rem;font-family:var(--cl-head);
  font-weight:500;font-size:.82rem;letter-spacing:.14em;color:var(--cl-gold-text)}
.cl-arch-yr:first-child{margin-top:clamp(.9rem,2vw,1.2rem)}
.cl-arch-n{font-family:var(--cl-serif);font-weight:400;font-size:1.3em;letter-spacing:.06em}
.cl-arch-list{list-style:none;margin:0;padding:0}
.cl-arch-list li{display:flex;border-bottom:1px solid var(--cl-hairline)}
.cl-arow{flex:1;display:flex;align-items:baseline;gap:.9em;
  padding:.74em .15em .7em;color:var(--cl-ink);line-height:1.65}
.cl-arow:hover{text-decoration:none}
.cl-arow:hover .cl-arow-t{color:var(--cl-accent)}
.cl-arow::after{content:"\203A";margin-left:auto;padding-left:.6em;
  color:var(--cl-gold-line);font-family:var(--cl-serif)}
/* 6.4em fits the widest CMS date (10月26,27日) so the column stays a column;
   nowrap keeps a date off two lines the way .cl-qrow-vol keeps vol.31 on one */
.cl-arow-d{flex:0 0 6.4em;font-size:.78rem;letter-spacing:.02em;
  color:var(--cl-muted);white-space:nowrap}
/* NOT word-break:keep-all here. That is the short-heading idiom (.cl-h--ka) and needs
   explicit <wbr>; on these long CMS titles it made 「月経痛・PMSに対して…」 break after the ・
   and strand 「月経痛・」 alone. Default CJK wrapping fills the line properly.
   line-break:strict applies full 禁則処理, which is what these titles need: without it
   「実技セミナ / ー【対面】」 put a 長音符 at the start of a line (three rows did). */
.cl-arow-t{font-family:var(--cl-head);font-weight:500;
  font-size:clamp(.82rem,2.1vw,.88rem);letter-spacing:.02em;min-width:0;
  line-break:strict;overflow-wrap:anywhere}
.cl-arow-pl,.cl-arow-tail{display:inline-block;font-size:.86em;font-weight:400;
  color:var(--cl-muted)}

/* ---- audience spoke pages (studios / medical / corporate, 2026-07-22) ---- */
/* katakana-heavy page h2: break only at the <wbr> points (medical's
   ウィメンズヘルスリハビリテーション broke mid-word at 390px without this);
   overflow-wrap:anywhere is the ultra-narrow escape hatch */
.cl-h--ka{word-break:keep-all;overflow-wrap:anywhere}
/* a .cl-lead paragraph that directly follows a .cl-notes list (medical's
   closing copy) — restores the paragraph break the list rows swallow */
.cl-lead--follow{margin-top:clamp(1.5rem,3.4vw,2rem)}
/* one shared 640px text column on the audience pages (2026-07-29 Vincent:
   ragged left edges — .cl-lead's 38em/608px column started 16px right of the
   640px .cl-dsec/.cl-notes/.cl-note column; li side-padding added ~2px more;
   medical's split h3 had no measure at all) */
#studios .cl-lead,#medical .cl-lead,#corporate .cl-lead{max-width:640px}
#studios .cl-notes li,#medical .cl-notes li,#corporate .cl-notes li{
  padding-left:0;padding-right:0}
#studios .cl-split-tx h3,#medical .cl-split-tx h3,#corporate .cl-split-tx h3{
  max-width:640px;margin-inline:auto}

/* ---- .cl-split — generic media+text two-column (fix pass 07-23) ----
   ≥900px: photo one side (~40%, the careintro measure) + text the other;
   <900px: stacked with the PHOTO FIRST regardless of DOM order (explicit
   grid rows), photo capped at 560px and centered. Children carry
   .cl-split-ph (a figure or a bare img) + .cl-split-tx (any block).
   Consumers: connect founder message, medical Matsuguchi block, care
   photo row. Images keep their own ratio — width-fit only, never
   distorted, never height-capped. */
.cl-split{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.2rem,3vw,1.6rem);align-items:center;
  max-width:920px;margin:1.6rem auto 0}
.cl-split-ph{grid-row:1;margin:0;width:100%;max-width:560px;justify-self:center;min-width:0}
.cl-split-tx{grid-row:2;min-width:0}
.cl-split-ph img,img.cl-split-ph{display:block;width:100%;max-width:100%;height:auto}

/* 本文内の連続画像（2枚以上）— dtl テンプレートが .cl-dgal に束ねる（2026-07-31、産前産後
   ページの指摘）。PC＝2枚並び（.cl-split と同じ width-fit・非変形・高さ制限なしの文法）、
   モバイル＝横スクロール snap（次の1枚が2割のぞく、バナーの peek 文法）。max-height 禁則。 */
.cl-dtl .cl-dgal{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;margin:.2rem 0 1.1rem}
.cl-dtl .cl-dgal p{flex:0 0 80%;margin:0;scroll-snap-align:center}
.cl-dtl .cl-dgal img{display:block;width:100%;height:auto}
@media(min-width:640px){
  .cl-dtl .cl-dgal{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;overflow:visible}
}
figure.cl-split-ph figcaption{margin-top:.5rem;font-size:.78rem;line-height:1.8;
  color:var(--cl-muted)}
@media(min-width:900px){
  .cl-split{grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    column-gap:clamp(1.8rem,4vw,2.8rem)}
  .cl-split-ph{grid-area:1/1;max-width:none;justify-self:stretch}
  .cl-split-tx{grid-area:1/2}
  /* bare-children consumer (connect founder message: .message-letter +
     .sig-seal, no -ph/-tx hooks): auto-placement lands letter left / sig
     right, and the ratio flips so the TEXT gets the wide side. Mobile stays
     the natural text→signature stack (a signature is not a lead photo). */
  .cl-split:has(>.sig-seal){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .cl-doc .cl-split>.sig-seal{margin-top:0}
}

/* ============================================================
   04 医療機関 + 05 コラム — square white prints, full size
   ============================================================ */
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.5vw,1.6rem);
  margin:1.8rem 0 0}
@media(max-width:860px){.cl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cl-grid{grid-template-columns:1fr;max-width:480px;
  margin-left:auto;margin-right:auto}}
.cl-card{display:flex;flex-direction:column;background:#fff;color:var(--cl-ink);
  border:1px solid var(--cl-card-line);overflow:hidden;transition:border-color .2s}
a.cl-card:hover{border-color:var(--cl-gold-line);text-decoration:none}
.cl-card > img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cl-veil)}
.cl-card-body{display:block;padding:1rem 1.1rem 1.2rem;text-align:left}
.cl-date{display:block;font-family:var(--cl-serif);font-size:.8rem;letter-spacing:.1em;
  color:var(--cl-gold-text);margin-bottom:.35rem}
.cl-card-t{display:block;font-family:var(--cl-head);font-weight:700;font-size:.96rem;
  line-height:1.75;letter-spacing:.02em}
a.cl-card:hover .cl-card-t{color:var(--cl-accent)}
.cl-card-x{display:block;margin-top:.5rem;font-size:.82rem;line-height:1.95;color:var(--cl-muted)}
.cl-card h3{font-size:1rem;font-weight:700;line-height:1.7;margin-bottom:.45rem}
.cl-card h3 a{color:var(--cl-ink)}
.cl-card h3 a:hover{color:var(--cl-accent)}
.cl-card p{font-size:.84rem;line-height:1.95;color:var(--cl-soft)}
.cl-card p a{word-break:break-all;color:var(--cl-gold-text)}

/* ============================================================
   07 ご予約 (index CTA) / care spoke — veil-lit plates, gold
   square buttons, menu as white sub-sections on the pink veil
   ============================================================ */
.cl-care-lead{margin:0 auto 1.4rem;text-align:center;font-family:var(--cl-head);font-weight:700;
  font-size:clamp(1.02rem,2.6vw,1.2rem);letter-spacing:.08em;line-height:2}
.cl-careintro{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:920px;
  margin:clamp(1.6rem,4vw,2.2rem) auto 0}
@media(min-width:760px){.cl-careintro{grid-template-columns:minmax(260px,440px) minmax(0,1fr);
  column-gap:2.8rem;align-items:center}}
.cl-careintro-ph{margin:0;max-width:460px}
.cl-careintro-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 42%}
.cl-careintro-copy{font-size:.95rem;line-height:2.1;color:var(--cl-ink);margin-bottom:1rem}
.cl-careintro-txt .cl-notes{margin:0}

.cl-menu{max-width:760px;margin:0 auto;text-align:left}
.cl-mgroup{background:#fff;border:1px solid var(--cl-card-line);
  padding:clamp(1.3rem,3.5vw,1.9rem) clamp(1rem,3vw,1.7rem) clamp(1rem,2.8vw,1.4rem);
  margin:0 0 clamp(1.2rem,3vw,1.7rem)}
.cl-mghead{display:flex;align-items:baseline;gap:.9rem;margin:0 0 .3rem;
  font-family:var(--cl-head);font-weight:700;font-size:1.02rem;letter-spacing:.14em}
/* minutes (60分/90分) — clearly legible so 60 vs 90 reads instantly: ~1rem,
   distinct weight + color, no tiny-caps tracking (§CLAIRE.8). Gold hairline
   ornament (.cl-mghead::after) removed. */
.cl-mghead span{font-family:var(--cl-head);font-weight:700;font-size:1rem;letter-spacing:.02em;
  color:var(--cl-accent-deep);flex:none}
.cl-mi{display:grid;grid-template-columns:1fr auto auto;gap:.25rem 1.4rem;align-items:center;
  padding:.85rem .1rem;border-bottom:1px solid var(--cl-hairline)}
.cl-mgroup .cl-mi:last-of-type{border-bottom:0}
.cl-mi-t{font-size:.93rem;letter-spacing:.02em;line-height:1.8}
.cl-mi-t small{display:block;font-size:.75rem;letter-spacing:.04em;color:var(--cl-gold-text)}
.cl-mi-p{font-family:var(--cl-serif);font-size:1rem;white-space:nowrap;justify-self:end}
.cl-mi-b{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.cl-btn{display:inline-block;text-align:center;font-family:var(--cl-head);font-weight:500;
  font-size:.78rem;letter-spacing:.12em;color:var(--cl-btn-gold);background:#fff;
  border:1px solid var(--cl-btn-line);padding:.34rem 1.1rem;white-space:nowrap;
  transition:background .22s,color .22s}
.cl-btn:hover{background:var(--cl-btn-gold);border-color:var(--cl-btn-gold);
  color:#fff;text-decoration:none}
@media(max-width:559px){
  .cl-mi{grid-template-columns:1fr auto;row-gap:.15rem}
  .cl-mi-t{grid-column:1/-1}
  .cl-mi-p{grid-row:2;grid-column:1;justify-self:start}
  .cl-mi-b{grid-row:2;grid-column:2}
}
.cl-menu-note{margin-top:1.05rem;font-size:.8rem;line-height:2;color:var(--cl-soft)}
.cl-menu-note a{color:var(--cl-gold-text);text-decoration:underline;text-underline-offset:3px}
.cl-rsv{max-width:720px;margin:clamp(2.2rem,5.5vw,3.2rem) auto 0;background:#fff;
  text-align:center;border:1px solid var(--cl-gold-line);
  outline:1px solid rgba(201,173,116,.4);outline-offset:5px;
  padding:clamp(2.2rem,6vw,3.2rem) clamp(1.2rem,4vw,2.6rem)}
.cl-rsv-lead{font-size:.95rem;letter-spacing:.04em}
.cl-rsv-btn{margin:1.6rem 0 1.8rem}
.cl-btn--web{font-size:.95rem;font-weight:700;padding:.85rem 2.6rem;
  letter-spacing:.16em;text-indent:.16em}
/* --reco / --alt (2026-08-07): the recommended option among sibling buttons.
   One rule, stated once and applied on both surfaces — EXACTLY ONE solid-red
   button; the alternatives stay quiet. Same grammar as the single red 受付中
   pill among the blue archive ones, which is the emphasis Sayaka is on record
   liking (「逆になんか目立って…いい」, docs/TASTE.md). No new colour token.
   --reco is the loud half and works anywhere; --alt is the quiet half and is
   only meaningful inside .cl-bookbar, where the base button is ALREADY red so
   there is nothing left to promote — the siblings have to recede instead. */
.cl-btn--reco{color:#fff;background:var(--cl-accent);border-color:var(--cl-accent);
  font-weight:700}                                   /* #fff on #b23a48 = 5.85:1 */
.cl-btn--reco:hover{background:var(--cl-accent-deep);border-color:var(--cl-accent-deep);
  color:#fff}
.cl-tel{margin:0;font-family:var(--cl-serif);font-size:clamp(1.5rem,4.5vw,1.85rem);
  letter-spacing:.05em}
.cl-tel small{font-family:var(--cl-caps);font-size:.56em;letter-spacing:.24em;
  color:var(--cl-gold-text);margin-right:.55em;vertical-align:.12em;text-transform:uppercase}
.cl-tel a{color:var(--cl-ink)}
.cl-tel a:hover{color:var(--cl-accent);text-decoration:none}
.cl-access{margin-top:.9rem;font-size:.82rem;color:var(--cl-muted)}
#reservation .cl-more{margin-top:1.6rem}

/* ============================================================
   footer — trimmed + compact (§5): logo, one inline link row,
   inline address, SNS, copyright. White + gold,
   the real lockup, never pink. Byte-identical to _gen/footer.html.
   ============================================================ */
.cl-foot{padding:clamp(2.2rem,5vw,3rem) 1.25rem 1.4rem;background:#fff;
  border-top:1px solid var(--cl-gold-line);text-align:center}
.cl-foot-brand{margin:0 0 1rem}
.cl-foot-logo{width:clamp(100.8px,12.6vw,126px);height:auto;margin:0 auto;display:block}
.cl-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.1rem;
  margin:0 0 .9rem;font-family:var(--cl-head);font-weight:500;font-size:.82rem;letter-spacing:.04em}
.cl-foot-links a{color:var(--cl-ink);transition:color .2s}
.cl-foot-links a:hover{color:var(--cl-gold-text);text-decoration:none}
.cl-foot-addr{margin:0 auto .55rem;max-width:660px;font-size:.76rem;line-height:1.85;color:var(--cl-muted)}
.cl-foot-addr a{color:var(--cl-muted);text-decoration:underline;text-underline-offset:2px}
.cl-foot-addr a:hover{color:var(--cl-accent)}
.cl-foot-sns{margin:0 0 .5rem;font-size:.8rem}
.cl-foot-sns a{color:var(--cl-gold-text)}
.cl-copy{margin:.6rem 0 0;font-family:var(--cl-caps);font-size:.64rem;
  letter-spacing:.16em;color:var(--cl-muted)}

/* ============================================================
   CONTENT SKIN — styles build.py's generic content classes in the
   claire visual language, scoped under `.cl-doc` (the generator's
   content wrapper `<main class="cl-doc">`). Generated pages —
   reviews + review/…, news + news/…, columns + column/…, connect,
   contact, privacy, the seminars schedule + archive, and the 63
   seminar/… detail pages — load ONLY this stylesheet, so their look
   lives here. Reuses the gold-hairline + Gilda-folio grammar; the
   `.cl-doc` scope keeps it clear of the hero/banner rules above.
   Seminar chrome recolors per type via --sh-* (quick=mauve default,
   course=bordeaux); pink-square state badges (§1.6) keep square
   corners like the bespoke banners.
   ============================================================ */
.cl-doc{--sh-accent:#96525e;--sh-deep:#96525e;--sh-on:#fff;
  --sh-bg:#faf3f4;--sh-line:rgba(150,82,94,.30);
  max-width:var(--cl-maxw);margin:0 auto;
  padding:clamp(1.8rem,4.5vw,2.8rem) clamp(1.1rem,4vw,1.75rem) clamp(3rem,7vw,4.5rem)}
.cl-doc .semhead--course,.cl-doc .semcard-head--course,.cl-doc .feature-head--course{
  --sh-accent:#b23a48;--sh-deep:#93303c;--sh-bg:#fbf1f3;--sh-line:rgba(178,58,72,.30)}

/* ---- page frame ---- */
.cl-doc .hero-sub{text-align:center;margin:0 auto clamp(2rem,4.8vw,2.9rem);
  padding-bottom:clamp(1.2rem,3vw,1.8rem)}
.cl-doc .hero-sub::before{content:"";display:block;width:min(440px,72vw);height:1px;
  margin:0 auto clamp(1.6rem,4vw,2.3rem);background:var(--cl-lightline)}
.cl-doc .hero-sub h1{font-family:var(--cl-head);font-weight:500;
  font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:.14em;text-indent:.14em;color:var(--cl-gold-text)}
.cl-doc .hero-sub h1::after{content:"";display:block;width:40px;height:1px;
  background:var(--cl-gold-line);margin:1rem auto 0}
.cl-doc .hero-sub p{color:var(--cl-muted);margin-top:.9rem;font-size:.92rem}
.cl-doc .block{padding:clamp(2.6rem,6vw,4rem) 0;border-bottom:1px solid var(--cl-hairline)}
.cl-doc .block:last-of-type{border-bottom:0}
.cl-doc .block.narrow,.cl-doc .narrow{max-width:720px;margin-left:auto;margin-right:auto}
.cl-doc .block.alt,.cl-doc .block.band{background:transparent;margin-left:0;margin-right:0;
  padding-left:0;padding-right:0}
.cl-doc .block h2{text-align:center;font-family:var(--cl-caps);text-transform:uppercase;
  font-weight:400;letter-spacing:.3em;text-indent:.3em;color:var(--cl-gold-text);
  font-size:clamp(1.05rem,2.6vw,1.5rem);margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.cl-doc .block h2::before{content:"";display:block;width:min(360px,64vw);height:1px;
  margin:0 auto clamp(1.3rem,3vw,1.8rem);background:var(--cl-lightline);text-indent:0}
.cl-doc .block h2 span{display:block;font-family:var(--cl-head);font-weight:500;font-size:.8rem;
  color:var(--cl-muted);letter-spacing:.2em;text-indent:0;margin-top:.7rem;text-transform:none}
.cl-doc .block h3{font-family:var(--cl-head);font-size:1.06rem;font-weight:700;
  letter-spacing:.04em;margin:2.2rem 0 .6rem}
.cl-doc .center{text-align:center}
.cl-doc .muted{color:var(--cl-muted)}
.cl-doc .big{font-size:1.14rem}
.cl-doc .detail .cover,.cl-doc .cover{width:100%;margin:1.2rem 0 1.6rem}
.cl-doc .date{font-family:var(--cl-serif);letter-spacing:.06em;color:var(--cl-gold-text)}
.cl-doc .more{margin-top:1.4rem}
.cl-doc .more a,.cl-doc .center a.more,.cl-doc p.more a{font-family:var(--cl-head);font-weight:500;
  color:var(--cl-ink);border-bottom:1px solid var(--cl-gold-line);padding-bottom:.15rem}
.cl-doc .notice{background:#fff8ef;border:1px solid var(--cl-card-line);color:var(--cl-soft);
  padding:.8rem 1rem;font-size:.88rem;margin:1rem 0}

/* ---- article body ---- */
.cl-doc .detail{max-width:780px;margin:0 auto}
.cl-doc .crumb{font-family:var(--cl-caps);font-size:.8rem;letter-spacing:.06em;margin-bottom:1.2rem}
.cl-doc .crumb a{color:var(--cl-gold-text)}
.cl-doc .detail h1{font-family:var(--cl-head);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.1rem);
  letter-spacing:.04em;line-height:1.6;margin:.2rem 0}
.cl-doc .detail h1::after{content:"";display:block;width:44px;height:1px;
  background:var(--cl-gold-line);margin:.9rem 0 0}
.cl-doc .detail .date{display:block;font-size:.85rem;margin:.6rem 0 1rem}
.cl-doc .detail .body{font-size:1rem}
.cl-doc .body h2{font-family:var(--cl-head);font-size:1.28rem;font-weight:700;color:var(--cl-ink);
  text-align:left;letter-spacing:.02em;margin:2rem 0 .8rem}
.cl-doc .body h2::before{content:none}
.cl-doc .body h3{font-family:var(--cl-head);font-size:1.08rem;font-weight:700;margin:1.6rem 0 .5rem}
.cl-doc .body p{margin:1.05rem 0;line-height:2}
.cl-doc .body ul,.cl-doc .body ol{margin:1rem 0;padding-left:1.4em}
.cl-doc .body li{margin:.4rem 0;line-height:1.9}
.cl-doc .body img{margin:1.2rem 0;width:100%}
.cl-doc .body a{color:var(--cl-accent);text-decoration:underline;text-underline-offset:3px}
/* 2026-08-07 — the deferred defect from DECISIONS §6p, fixed. The rule above is (0,2,1)
   and .cl-btn is (0,1,0), so every in-body お申し込み button shipped as underlined red
   text inside a white gold-keyline box — contradicting the intent recorded at the
   .cl-bookbar .cl-btn rule ("In-page .cl-btn uses keep the gold-keyline look; only bars
   are red"). Body links stay red-underlined; buttons re-assert the button look at
   matching specificity. */
.cl-doc .body a.cl-btn{color:var(--cl-btn-gold);text-decoration:none}
.cl-doc .body a.cl-btn:hover{color:#fff}
/* ...and the same (0,3,1) reach is needed to let --reco keep its white text in
   here; the generic .cl-btn--reco is only (0,1,0). Must stay AFTER the rule
   above — equal specificity, so source order decides. */
.cl-doc .body a.cl-btn--reco,.cl-doc .body a.cl-btn--reco:hover{color:#fff}
.cl-doc .body strong{font-weight:700;color:var(--cl-ink)}

/* ---- meta table (review attributes / seminar 補足) + member CTA ---- */
.cl-doc .meta{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.9rem}
.cl-doc .meta th,.cl-doc .meta td{text-align:left;padding:.6rem .8rem;
  border-bottom:1px solid var(--cl-hairline);vertical-align:top}
.cl-doc .meta th{white-space:nowrap;width:6.5em;color:var(--cl-gold-text);font-weight:700;font-family:var(--cl-head)}
.cl-doc .meta td{color:var(--cl-soft)}
.cl-doc .connect-login a{font-family:var(--cl-head);font-size:.85rem;color:var(--cl-gold-text);
  text-decoration:underline;text-underline-offset:3px}

/* ---- button ---- */
.cl-doc .btn,.cl-doc .book-btn{display:inline-block;font-family:var(--cl-head);font-weight:700;
  font-size:.9rem;letter-spacing:.1em;color:#fff;background:var(--cl-accent);
  border:1px solid var(--cl-accent);padding:.7rem 2rem;transition:background .2s,border-color .2s}
.cl-doc .btn:hover,.cl-doc .book-btn:hover{background:var(--cl-accent-deep);
  border-color:var(--cl-accent-deep);color:#fff;text-decoration:none}
.cl-doc .book-cta{margin:1.5rem 0 .5rem}
.cl-doc .book-cta.multi{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  background:var(--cl-ground);border:1px solid var(--cl-card-line);padding:1.2rem 1.3rem}
.cl-doc .book-cta .book-label{font-family:var(--cl-caps);text-transform:uppercase;letter-spacing:.12em;
  color:var(--cl-gold-text);font-size:.76rem;margin:0}
.cl-doc .book-cta.multi .btn{margin:0}

/* ---- lists / cards / feature ---- */
.cl-doc .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.5vw,1.6rem);margin:1.8rem 0}
@media(max-width:860px){.cl-doc .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cl-doc .grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}
.cl-doc .grid-section{padding:clamp(2.2rem,5vw,3.2rem) 0 0}
.cl-doc .grid-section h2{text-align:center;font-family:var(--cl-head);font-weight:500;
  font-size:1.1rem;letter-spacing:.1em;color:var(--cl-ink);margin:0 0 .4rem}
.cl-doc .grid-section > .muted{text-align:center;margin:0 auto 1.2rem}
.cl-doc .card{display:flex;flex-direction:column;background:#fff;color:var(--cl-ink);
  border:1px solid var(--cl-card-line);overflow:hidden;transition:border-color .2s}
.cl-doc a.card:hover{border-color:var(--cl-gold-line);text-decoration:none}
.cl-doc .card > img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cl-veil)}
.cl-doc .card-body{padding:1rem 1.1rem 1.2rem}
.cl-doc .card .date{display:block;font-size:.8rem;margin-bottom:.3rem}
.cl-doc .card h3{font-family:var(--cl-head);font-size:.98rem;font-weight:700;line-height:1.7;
  letter-spacing:.02em;margin:0}
.cl-doc a.card:hover h3{color:var(--cl-accent)}
.cl-doc .card p{font-size:.82rem;line-height:1.9;color:var(--cl-muted);margin:.4rem 0 0}
.cl-doc .feature{display:grid;grid-template-columns:1.2fr 1fr;background:#fff;color:var(--cl-ink);
  border:1px solid var(--cl-card-line);overflow:hidden;margin:1.8rem 0;transition:border-color .2s}
.cl-doc a.feature:hover{border-color:var(--cl-gold-line);text-decoration:none}
@media(max-width:640px){.cl-doc .feature{grid-template-columns:1fr}}
.cl-doc .feature-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--cl-veil)}
.cl-doc .feature-body{padding:clamp(1.4rem,3.5vw,2.2rem);display:flex;flex-direction:column;justify-content:center}
.cl-doc .feature-body .date{font-size:.82rem}
.cl-doc .feature-body h2{font-family:var(--cl-head);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.5rem);
  line-height:1.5;letter-spacing:.02em;color:var(--cl-ink);margin:.4rem 0 .6rem;text-align:left;text-transform:none}
.cl-doc .feature-body h2::before{content:none}
.cl-doc .feature-body p{color:var(--cl-muted);font-size:.86rem;margin:0 0 .9rem}
.cl-doc .feature-more{font-family:var(--cl-head);font-weight:500;color:var(--cl-accent);
  letter-spacing:.04em;font-size:.85rem}
.cl-doc .flip{order:2}

/* ---- annual SCHEDULE (Gantt) — production ported, recolored, square badges ---- */
.cl-doc .schedule-section{padding:clamp(2.2rem,5vw,3.2rem) 0}
.cl-doc .schedule{max-width:920px;margin:1.6rem auto 0}
.cl-doc .sch-group{font-family:var(--cl-head);font-weight:700;font-size:.9rem;color:var(--cl-accent);
  letter-spacing:.04em;margin:1.8rem 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--cl-card-line)}
.cl-doc .sch-months{display:grid;grid-template-columns:13rem repeat(12,1fr);gap:.1rem;align-items:end;
  margin-bottom:.5rem;padding-bottom:.45rem;border-bottom:1px solid var(--cl-hairline)}
.cl-doc .sch-m{font-size:.66rem;color:var(--cl-muted);text-align:center}
.cl-doc .sch-m.now{color:var(--cl-accent);font-weight:700}
.cl-doc .sch-track{display:grid;grid-template-columns:13rem 1fr;gap:.9rem;align-items:center;
  padding:.65rem 0;border-bottom:1px solid var(--cl-hairline)}
.cl-doc .sch-track:last-of-type{border-bottom:0}
.cl-doc .sch-name{font-family:var(--cl-head);font-weight:700;font-size:.95rem;margin:0;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.4}
.cl-doc .sch-name a{color:var(--cl-ink)}
.cl-doc .sch-name a:hover{color:var(--cl-accent)}
.cl-doc .sch-sub{font-size:.74rem;color:var(--cl-muted);margin:.25rem 0 0;line-height:1.5}
.cl-doc .sch-status{font-family:var(--cl-head);font-weight:700;font-size:.62rem;letter-spacing:.05em;
  padding:.16rem .55rem;white-space:nowrap}
.cl-doc .sch-status.open{background:var(--cl-accent);color:#fff}
.cl-doc .sch-status.prep{border:1px solid var(--cl-accent);color:var(--cl-accent-deep)}
.cl-doc .sch-status.done{background:var(--cl-hairline);color:var(--cl-muted)}
.cl-doc .sch-note{font-size:.62rem;color:var(--cl-accent-deep);border:1px solid var(--cl-gold-line);
  padding:.08rem .45rem;white-space:nowrap}
.cl-doc .sch-bars{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;min-height:1.9rem}
.cl-doc .sch-bar{font-size:.72rem;padding:.32rem .8rem;display:flex;align-items:center;
  justify-content:space-between;gap:.6rem;white-space:nowrap;overflow:hidden;min-width:0}
.cl-doc .sch-bar.open{background:var(--cl-accent);color:#fff}
.cl-doc .sch-bar.prep{border:1px solid var(--cl-accent);color:var(--cl-accent-deep)}
.cl-doc .sch-bar.done{background:var(--cl-hairline);color:var(--cl-muted)}
.cl-doc .sch-bar.tbd{border:1px solid var(--cl-card-line);color:var(--cl-muted);justify-content:center}
.cl-doc .sch-badge{font-family:var(--cl-caps);font-size:.64rem;letter-spacing:.02em;
  background:rgba(255,255,255,.24);padding:.06rem .45rem;white-space:nowrap}
.cl-doc .sch-legend{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin:1.5rem 0 0;
  font-size:.74rem;color:var(--cl-muted)}
.cl-doc .sch-legend span{display:inline-flex;align-items:center;gap:.4rem}
.cl-doc .sch-legend span::before{content:"";width:16px;height:11px;display:inline-block}
.cl-doc .sch-legend .open::before{background:var(--cl-accent)}
.cl-doc .sch-legend .prep::before{border:1px solid var(--cl-accent)}
.cl-doc .sch-legend .done::before{background:var(--cl-hairline)}
.cl-doc .sch-notes{margin:1.4rem auto 0;max-width:760px}
@media(max-width:720px){
  .cl-doc .sch-months{display:none}
  .cl-doc .sch-track{grid-template-columns:1fr;gap:.45rem;padding:.95rem 0}
  .cl-doc .sch-bars{grid-template-columns:1fr}
  .cl-doc .sch-bar{grid-column:1/2!important;white-space:normal;justify-content:flex-start;gap:.8rem}
}

/* ---- seminar detail header + list/archive card mini-banner ---- */
.cl-doc .semhead{position:relative;overflow:hidden;background:var(--sh-bg);border:1px solid var(--sh-line);
  margin:1.2rem 0 1.6rem;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,.8fr)}
.cl-doc .semhead-body{position:relative;z-index:2;padding:clamp(1.4rem,4vw,2.3rem) clamp(1.1rem,3.5vw,2.1rem)}
.cl-doc .semhead-photo{position:relative;background-size:cover;background-position:60% 28%;min-height:210px}
.cl-doc .semhead-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sh-bg) 0%,transparent 45%)}
.cl-doc .semhead-mark{position:absolute;right:.9rem;bottom:.7rem;width:54px;opacity:.4;z-index:2;
  mix-blend-mode:multiply;pointer-events:none;user-select:none}
.cl-doc .semhead-audience{display:inline-block;background:var(--sh-accent);color:var(--sh-on);
  font-family:var(--cl-head);font-weight:500;font-size:.72rem;letter-spacing:.06em;padding:.3rem .85rem;margin:0 0 1rem}
.cl-doc .semhead-catch,.cl-doc .semhead-hook{font-family:var(--cl-head);font-weight:700;color:var(--sh-deep);
  font-size:.92rem;letter-spacing:.06em;margin:0 0 .1rem}
.cl-doc .semhead-series{font-family:var(--cl-head);color:var(--cl-muted);letter-spacing:.1em;font-size:.86rem;margin:.15rem 0 0}
.cl-doc .semhead-vol{font-family:var(--cl-serif);font-size:1.3em;color:var(--sh-deep);letter-spacing:.03em}
.cl-doc .detail .semhead h1.semhead-title{font-family:var(--cl-head);font-weight:700;color:var(--sh-deep);
  font-size:clamp(1.4rem,4vw,2rem);line-height:1.55;letter-spacing:.03em;margin:.4rem 0 .2rem;text-align:left}
.cl-doc .detail .semhead h1.semhead-title::after{display:none}
.cl-doc .semhead-subtitle{font-family:var(--cl-head);color:var(--sh-deep);font-size:1rem;letter-spacing:.1em;margin:.1rem 0 0}
.cl-doc .semhead--course .semhead-subtitle{color:var(--cl-ink)}
.cl-doc .semhead-state{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1.4rem 0 0;font-family:var(--cl-head)}
.cl-doc .semhead-state.is-upcoming{display:inline-flex;background:var(--sh-accent);color:var(--sh-on);
  padding:.55rem 1.05rem;font-size:.92rem;letter-spacing:.05em}
.cl-doc .semhead-state.is-upcoming .semhead-where::after{content:"｜";margin:0 .55em;opacity:.6}
.cl-doc .semhead-state.is-archive .semhead-archive{display:inline-block;border:2px solid var(--sh-accent);
  color:var(--sh-deep);padding:.45rem 1.05rem;font-weight:700;letter-spacing:.06em;font-size:.92rem}
.cl-doc .semhead-held{color:var(--cl-muted);font-size:.85rem;letter-spacing:.04em}
@media(max-width:640px){
  .cl-doc .semhead{grid-template-columns:1fr}
  .cl-doc .semhead-photo{order:-1;min-height:150px;background-position:60% 22%}
  .cl-doc .semhead-photo::before{background:linear-gradient(180deg,transparent 55%,var(--sh-bg) 100%)}
}
.cl-doc .semcard-head{aspect-ratio:16/9;position:relative;overflow:hidden;background-color:var(--sh-bg);
  background-size:cover;background-position:62% 25%;border-bottom:1px solid var(--sh-line)}
.cl-doc .semcard-head::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sh-bg) 38%,transparent 90%)}
.cl-doc .semcard-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:.1rem;padding:1rem 1.15rem}
.cl-doc .semcard-series{font-family:var(--cl-head);font-size:.7rem;letter-spacing:.12em;color:var(--cl-muted)}
.cl-doc .semcard-vol{font-family:var(--cl-serif);font-size:2rem;line-height:1.1;color:var(--sh-deep)}
.cl-doc .semcard-vol--text{font-family:var(--cl-head);font-weight:700;font-size:1rem;letter-spacing:.06em;line-height:1.4}
.cl-doc .semcard-state{margin-top:.4rem;font-family:var(--cl-head);font-weight:700;font-size:.66rem;
  letter-spacing:.05em;padding:.16rem .55rem}
.cl-doc .semcard-state.is-upcoming{background:var(--sh-accent);color:var(--sh-on)}
.cl-doc .semcard-state.is-archive{border:1px solid var(--sh-accent);color:var(--sh-deep);background:rgba(255,255,255,.72)}
.cl-doc .feature-head{height:100%;min-height:250px;position:relative;overflow:hidden;
  background-color:var(--sh-bg);background-size:cover;background-position:68% 26%}
.cl-doc .feature-head::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--sh-bg) 32%,transparent 88%)}
.cl-doc .feature-head-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:.1rem;padding:1.6rem 1.7rem}
@media(max-width:640px){.cl-doc .feature-head{min-height:185px}}

/* ---- LUTIS CONNECT (membership) page ---- */
.cl-doc .connect-hero{text-align:center;padding:clamp(1rem,3vw,2rem) 1rem clamp(1.6rem,4vw,2.6rem)}
.cl-doc .connect-wordmark{width:min(340px,74vw);height:auto;margin:0 auto}
.cl-doc .connect-sub{font-family:var(--cl-head);font-weight:500;font-size:.8rem;letter-spacing:.24em;
  color:var(--cl-gold-text);margin:.9rem 0 0}
.cl-doc .connect-hero .lead{max-width:32em;line-height:2.1;color:var(--cl-soft);
  margin:clamp(1.6rem,4vw,2.6rem) auto clamp(1.8rem,4.5vw,2.8rem)}
.cl-doc .reward-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;max-width:900px;margin:clamp(1.2rem,2.5vw,1.8rem) auto 0}  /* 07-29 r2: the PNGs carry 18-29% internal top whitespace (~65-100px at PC size), so the row margin drops hard — visual rhythm stays generous */
.cl-doc .reward-art{display:flex;justify-content:center}
.cl-doc .reward-art img{width:clamp(240px,34vw,360px);height:auto;mix-blend-mode:multiply}
.cl-doc .reward-row.flip .reward-art{order:2}
.cl-doc .reward-folio{font-family:var(--cl-serif);font-size:clamp(2rem,5vw,3.2rem);line-height:1;
  color:var(--cl-gold-line);margin:0 0 .5rem}
.cl-doc .reward-text h3{font-family:var(--cl-head);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.4rem);
  letter-spacing:.04em;color:var(--cl-ink);margin:0}
.cl-doc .reward-text h3::after{content:"";display:block;width:32px;height:1px;background:var(--cl-gold-line);margin:.7rem 0 1rem}
.cl-doc .reward-body{font-size:.92rem;line-height:1.95;color:var(--cl-soft);margin:0;max-width:32em}
.cl-doc .reward-note{font-size:.8rem;line-height:1.7;color:var(--cl-muted);margin:1rem 0 0;
  border-top:1px solid var(--cl-hairline);padding-top:.8rem;max-width:32em}
@media(max-width:640px){
  .cl-doc .reward-row{grid-template-columns:1fr;gap:0;text-align:center;margin-top:clamp(2rem,7vw,3rem)}
  /* 07-29 r2: the illustrations have 7-21% internal bottom whitespace baked in (21-58px at
     280px render) — the folio pulls up under the ink instead of adding to it */
  .cl-doc .reward-row .reward-text{margin-top:-1.9rem}
  .cl-doc .reward-row.flip .reward-art{order:0}
  .cl-doc .reward-art img{width:min(70vw,280px)}
  .cl-doc .reward-text h3::after{margin-left:auto;margin-right:auto}
  .cl-doc .reward-body,.cl-doc .reward-note{margin-left:auto;margin-right:auto}
}
.cl-doc .rewards-intro{max-width:32em;margin-left:auto;margin-right:auto}
/* fix pass 07-23: 「…5つの特典をご用意しています」(~34em) must sit on ONE line
   on PC — the 32em cap wrapped it mid-phrase. Room, not nowrap: overflow-safe
   if the copy ever grows, and it still centers under the heading. */
@media(min-width:900px){.cl-doc .rewards-intro{max-width:44em}}
.cl-doc .roles-line{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;
  margin:0 auto 1.6rem;max-width:720px;font-family:var(--cl-head);font-size:.86rem;color:var(--cl-soft)}
.cl-doc .roles-line span{background:var(--cl-ground);border:1px solid var(--cl-hairline);padding:.3rem .9rem}
.cl-doc .osusume-head{text-align:center;font-family:var(--cl-head);font-weight:700;font-size:1.04rem;
  letter-spacing:.08em;color:var(--cl-ink);margin:0 0 1.5rem}
.cl-doc .osusume-head::before{content:"";display:block;width:1px;height:32px;background:var(--cl-gold-line);margin:0 auto 1rem}
.cl-doc .osusume-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3rem;max-width:840px;margin:0 auto}
@media(max-width:640px){.cl-doc .osusume-grid{grid-template-columns:1fr;gap:1.4rem}}
.cl-doc .osusume-item{display:flex;gap:1rem;align-items:flex-start}
.cl-doc .osusume-idx{font-family:var(--cl-serif);font-size:1.2rem;line-height:1.5;color:var(--cl-gold-text);flex:0 0 auto}
.cl-doc .osusume-item p{font-size:.94rem;line-height:1.9;color:var(--cl-ink);margin:0}
.cl-doc .fee-amount{text-align:center;font-family:var(--cl-serif);font-size:clamp(3rem,7vw,4.6rem);
  color:var(--cl-accent);letter-spacing:.03em;margin:0}
.cl-doc .steps{list-style:none;max-width:680px;margin:1.6rem auto 0;padding:0}
.cl-doc .step{display:flex;gap:1.1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--cl-hairline)}
.cl-doc .step:last-child{border-bottom:0}
.cl-doc .step-num{flex:0 0 2.4rem;width:2.4rem;height:2.4rem;border:1px solid var(--cl-gold-line);
  color:var(--cl-gold-text);font-family:var(--cl-serif);font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.cl-doc .step h3{font-family:var(--cl-head);font-weight:700;font-size:1rem;margin:.1rem 0 .3rem}
.cl-doc .step p{font-size:.88rem;line-height:1.9;color:var(--cl-soft);margin:0}
.cl-doc .message-letter{max-width:640px;margin:0 auto;font-size:.96rem;line-height:2.1;color:var(--cl-ink)}
.cl-doc .message-letter p{margin:1.1rem 0}
.cl-doc .sig-seal{text-align:center;margin-top:clamp(2rem,5vw,3.2rem)}
/* 4:5,同じく object-fit:cover — トップページの .cl-profile-photo img と同一の見せ方。
   2026-08-26 Vincent の決定で正方形をやめた。見た目を揃える以上の意味がある：写真そのものを
   4:5 で書き出しておけば、4:5 の枠に cover で入れても **一切トリミングされない** ので、
   「頭が切れる」がそもそも起こり得なくなる（さやか先生からの指摘3回・test_media.py）。
   だから object-position も要らない。ここを正方形に戻すなら、切り出し位置の計算も
   一緒に戻ってくる。 */
.cl-doc .sig-avatar{width:min(100%,190px);height:auto;aspect-ratio:4/5;object-fit:cover;
  margin:0 auto .7rem}
@media(min-width:900px){.cl-doc .sig-avatar{width:min(100%,300px)}}
.cl-doc .sig-role{font-family:var(--cl-caps);font-size:.66rem;letter-spacing:.24em;color:var(--cl-gold-text);text-transform:uppercase}
.cl-doc .sig-name{font-family:var(--cl-head);font-weight:500;font-size:1.2rem;letter-spacing:.12em;margin-top:.2rem}
.cl-doc .join-cta{margin-top:1.6rem}

/* ============================================================
   SCHEDULE v4.1 (2026-07-30 owner review; v4 = 07-23 pt3 call) —
   left label column + multi-ribbon 12-col tracks, full-year view.
   The three seminar categories get IDENTICAL h4.cl-sch-cat band
   headers (同じカテゴライズ) — v4.1: FULLY identical (no --lead, no
   keyline, no link underlines; course primacy = its 3 rows + being
   the only band with red ribbons); collab is an in-chart row
   (.cl-sch-row--tbd); legend (.cl-sch-keyrow) sits OUTSIDE the band
   so the full-height now-column (.cl-sch-band::before, --now-m)
   doesn't cross it. Quick = 12 monthly pills in the quick blue
   (never one long bar; ALWAYS stateless — no is-now, and past
   months stay blue: vols still sell as アーカイブ配信). Course
   ribbons: uniform 2-month width, is-past (#b3a5a8 終了) / is-now
   (accent 受付中) / is-next (dashed 開催予定). EDITING RULES: the
   doc-comment in tools/templates/schedule.html — read it before
   touching this. Since B4 the band is generator-emitted from
   content facts; this CSS stays hand-authored.
   ============================================================ */
.cl-sch{--now-m:9;   /* 現在＝9月 — AUTHORED value; must equal now_month in
   content/schedule-page.yml (check.py FAILS on mismatch — the generator never
   touches this file). Monthly flip: tools/templates/schedule.html §3 / RUNBOOK §3 */
  --now-band:rgba(248,155,166,.13);
  max-width:640px;margin:clamp(2rem,4.6vw,3rem) auto 0;
  padding:0 clamp(1.1rem,4vw,1.75rem)}
.cl-sch-head{text-align:center;margin:0 0 clamp(1.1rem,2.4vw,1.5rem)}
.cl-sch-en{margin:0;font-family:var(--cl-caps);text-transform:uppercase;
  font-size:.64rem;letter-spacing:.3em;text-indent:.3em;color:var(--cl-gold-text)}
.cl-sch-h{margin:.45rem 0 0;font-family:var(--cl-head);font-weight:500;
  font-size:clamp(1rem,2.1vw,1.2rem);letter-spacing:.16em;text-indent:.16em;color:var(--cl-ink)}
.cl-sch-h span{font-family:var(--cl-serif);font-weight:400;color:var(--cl-gold-text);
  letter-spacing:.08em}

/* full-height current-month column (v4.1) — one overlay instead of per-row
   gradients, so the pink runs through header rows too. z-index:-1 + the
   band's isolation:isolate are BOTH required: without them the pseudo either
   paints over the pills/ribbons/numerals or escapes behind page backgrounds. */
.cl-sch-band{position:relative;isolation:isolate}
.cl-sch-band::before{content:"";position:absolute;top:0;bottom:0;z-index:-1;
  pointer-events:none;
  left:calc(var(--lblw) + (100% - var(--lblw)) * ((var(--now-m) - 1) / 12));
  width:calc((100% - var(--lblw)) / 12);
  background:var(--now-band)}
.cl-sch-scale{list-style:none;display:grid;grid-template-columns:repeat(12,1fr);
  margin:0;padding:0 0 .3rem;border-bottom:1px solid var(--cl-hairline);
  font-family:var(--cl-serif);font-size:.76rem;color:var(--cl-muted)}
.cl-sch-scale li{text-align:center}
.cl-sch-scale li.now{color:var(--cl-accent)}
.cl-sch{--lblw:clamp(62px,16.5vw,74px)}
.cl-sch-scalerow{display:grid;grid-template-columns:var(--lblw) minmax(0,1fr)}
.cl-sch-scalerow .cl-sch-scale{grid-column:2}
.cl-sch-row{display:grid;grid-template-columns:var(--lblw) minmax(0,1fr);
  align-items:center;row-gap:0;padding:0;background:none;
  border-bottom:1px solid var(--cl-hairline)}
.cl-sch-lbl{grid-column:1;justify-self:start;padding-right:.5em;
  font-family:var(--cl-head);font-weight:700;font-size:.8rem;line-height:1.45;
  letter-spacing:.02em;color:var(--cl-ink);white-space:nowrap}
a.cl-sch-lbl:hover{color:var(--cl-accent);text-decoration:none}
.cl-sch-track{grid-column:2;display:grid;grid-template-columns:repeat(12,1fr);
  align-items:center;padding:.78rem 0}
/* ribbons — --from/--to are month positions 1…13 and accept HALVES
   (8.5 = mid-August; fix pass 07-23). The old grid-column:var(--from)/var(--to)
   only took integer grid lines; the same geometry now comes from margin-left/
   width over the full 12-col span: left=(from−1)/12, width=(to−from)/12 —
   integer values render identically (the track has no column gap). Quick
   pills (.cl-sch-q) keep their integer --m grid placement. */
.cl-sch-rib{grid-row:1;grid-column:1/-1;justify-self:start;
  margin-left:calc((var(--from) - 1)*100%/12);
  width:calc((var(--to) - var(--from))*100%/12);
  height:10px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
/* is-past darkened 07-29: #cfc6c7 was 1.67:1 on white — the 月経 row's lone
   ribbon vanished. #b3a5a8 = 2.37:1, still clearly subordinate to accent
   (5.85:1). Escalation if review finds it faint: #a99a9e — never darker,
   never taller. Must equal .cl-sch-key .k-past (qa checks the pairing). */
.cl-sch-rib.is-past{background:#b3a5a8;box-shadow:none}
.cl-sch-rib.is-now{background:var(--cl-accent)}
/* is-next = accent-red like 受付中 (fix pass 07-23) — the washed pink #cd8794
   read as grey; dashed keeps the future meaning, the colour makes it visible */
.cl-sch-rib.is-next{background:none;border:1.5px dashed var(--cl-accent);box-shadow:none}
.cl-sch-q{grid-row:1;grid-column:var(--m);justify-self:center;width:64%;height:8px;
  background:var(--cl-quick)}
/* quick pills are ALWAYS stateless (07-30 owner ruling) — 受付中 lives on
   banners/detail pages, the year chart only says "every month" */
/* band category headers — 07-23 call: 「同じカテゴライズのされ方」; v4.1
   (07-30 owner review): FULLY identical, all three — one size, one tracking,
   one padding, no keyline, never serif/red/gold text. Course primacy comes
   from its 3 rows and from red ribbons existing only in its band. */
.cl-sch-cat{margin:0;padding:1.05rem 0 .3rem;font-family:var(--cl-head);
  font-weight:700;font-size:.9rem;letter-spacing:.14em;color:var(--cl-ink)}
.cl-sch-cat a{color:inherit}
.cl-sch-cat a:hover{color:var(--cl-accent);text-decoration:none}
/* quick row gutter annotation — non-link; the band header owns the #quick
   link and the .cl-sr state string */
.cl-sch-sub{grid-column:1;justify-self:start;padding-right:.5em;
  font-family:var(--cl-head);font-weight:500;font-size:.68rem;
  letter-spacing:.06em;color:var(--cl-muted);white-space:nowrap}
/* collab while undated: a real row in the band, no ribbons; the note is the
   row's only content so it must NEVER be aria-hidden */
.cl-sch-note{grid-column:2;justify-self:center;margin:0;padding:.6rem 0;
  font-size:.72rem;letter-spacing:.14em;color:var(--cl-muted)}
/* legend rides the same 2-col grid so its right edge = track right edge —
   the 07-23 "one unit" ask */
.cl-sch-keyrow{display:grid;grid-template-columns:var(--lblw) minmax(0,1fr)}
.cl-sch-keyrow .cl-sch-key{grid-column:2}
.cl-sch-key{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:.3rem .85rem;margin:.35rem 0 0;padding:0;font-size:.68rem;letter-spacing:.05em;
  color:var(--cl-muted)}
.cl-sch-key li{display:flex;align-items:center;gap:.45em}
.cl-sch-key i{display:inline-block;width:20px;height:8px}
.cl-sch-key .k-past{background:#b3a5a8}
.cl-sch-key .k-now{background:var(--cl-accent)}
.cl-sch-key .k-next{background:none;border:1.5px dashed var(--cl-accent)}
.cl-sch-foot{margin:.95rem 0 0;font-size:.78rem;line-height:1.9;color:var(--cl-muted)}

/* ============================================================
   round5 seminar DETAIL pages — 2026-07-22 pt2 call (~01:11–01:31).
   Generated pages come from gen.py dtl_transform; the hand-authored
   quick_031 / kotsuban2026aug pages use the same vocabulary.
   Hero = the listing .cl-ban grammar as a NON-LINK header (div, so
   a.cl-ban hover rules never apply); body gets .cl-dsec/.cl-dsub/
   .cl-dtime; booking = fixed bottom bar (.cl-bookbar). Zero JS.
   The bar is static chrome — nothing animates, so no reduced-motion
   branch is needed; @media print parks it back in the flow.
   ============================================================ */
/* hero */
.cl-dhero{margin:0 0 clamp(1.6rem,4vw,2.3rem)}
.cl-dhero .cl-ban--feat{margin:.45rem auto 0}
/* the hero owns the page <h1>; re-assert the banner-title look over
   .cl-doc .detail h1 (and its 44px ::after rule). Size matches the
   listing's post-bump title clamp. */
.cl-doc .detail .cl-dhero h1.cl-ban-title{margin:5px 0 0;font-family:var(--cl-head);
  font-weight:700;font-size:clamp(19px,5.4cqw,25px);line-height:1.45;
  letter-spacing:.03em;color:var(--deep)}
.cl-doc .detail .cl-dhero h1.cl-ban-title::after{content:"";display:block;width:64px;
  height:1px;background:var(--cl-gold-line);margin:.38em 0 0}
/* Quick hero window (fix pass 07-23): .cl-dhero--win — QUICK detail heroes
   only — renders the photo in the listing Quick card's window grammar (the
   .cl-ban--card language: tall 3/4 arch beside the text, resting on the foot
   line) instead of the course half-circle. Same corner radius, same iOS rule
   (the wrapper keeps its own aspect-ratio). Works with the class on the
   .cl-dhero header or on the .cl-ban itself; course heroes are unchanged. */
:is(.cl-dhero--win .cl-ban,.cl-ban.cl-dhero--win){
  grid-template-columns:minmax(0,1fr) 36%;gap:0 clamp(12px,3.2cqw,18px)}
.cl-dhero--win .cl-ban-txt{grid-area:1/1}
.cl-dhero--win .cl-ban-phwrap{grid-area:1/2;align-self:end;aspect-ratio:3/4;margin-top:0}
.cl-dhero--win .cl-ban-bar{grid-area:2/1/3/3}

/* generalized (fix pass 07-23): the audience pages reuse .cl-dsec/.cl-dsub
   OUTSIDE .cl-doc .body — same look in any context; standalone uses sit in
   the 640px notes column (aligning with .cl-notes/.message-letter). The
   .cl-doc .block form re-asserts over the centered gold block-h2 and drops
   its lightline; inside .cl-doc .body the original rules below still win. */
.cl-dsec,.cl-doc .block h2.cl-dsec{margin:clamp(2.4rem,5.5vw,3.2rem) auto 1.05rem;
  max-width:640px;font-family:var(--cl-head);font-weight:700;
  font-size:clamp(.95rem,2.2vw,1.04rem);letter-spacing:.16em;line-height:1.7;
  color:var(--cl-gold-text);text-align:left;text-transform:none;text-indent:0}
.cl-dsec::before,.cl-doc .block h2.cl-dsec::before{content:"";display:block;
  width:64px;height:1px;background:var(--cl-gold-line);margin:0 0 .6rem}
.cl-dsub,.cl-doc .block p.cl-dsub{margin:1.6rem auto .55rem;max-width:640px;
  font-family:var(--cl-head);font-weight:700;font-size:.93rem;
  letter-spacing:.07em;color:var(--cl-soft)}
/* body sections — the banner-title hairline grammar at sub scale
   (「メインページみたいなでかいセクションじゃない方がいい…ちょっと可愛くエレガント」) */
.cl-doc .body h2.cl-dsec{margin:clamp(2.4rem,5.5vw,3.2rem) 0 1.05rem;max-width:none;
  font-family:var(--cl-head);font-weight:700;font-size:clamp(.95rem,2.2vw,1.04rem);
  letter-spacing:.16em;line-height:1.7;color:var(--cl-gold-text)}
.cl-doc .body h2.cl-dsec::before{content:"";display:block;width:64px;height:1px;
  background:var(--cl-gold-line);margin:0 0 .6rem}
.cl-doc .body p.cl-dsub{margin:1.6rem 0 .55rem;max-width:none;font-family:var(--cl-head);
  font-weight:700;font-size:.93rem;letter-spacing:.07em;color:var(--cl-soft)}
/* 日時 rows — hairline list (the .cl-notes row grammar) */
.cl-doc .body p.cl-dtime{margin:0;padding:.5rem .25rem;line-height:1.85;
  font-size:.95rem;color:var(--cl-soft);border-bottom:1px solid var(--cl-hairline)}
.cl-doc .body :not(.cl-dtime)+p.cl-dtime{border-top:1px solid var(--cl-hairline)}
/* the 銀行振込 anchor target (generated pages put it on the block's first <p>;
   quick_031/kotsuban2026aug carry it on their .cl-dsec instead — untouched here) */
.cl-doc .body p#bank{margin-top:2.4rem;font-weight:700;color:var(--cl-ink)}

/* fixed booking bar — full-width, floats over content, safe-area aware */
.cl-bookbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--cl-gold-line);
  box-shadow:0 -12px 30px -20px rgba(58,52,54,.35);
  padding:1rem clamp(.9rem,3vw,1.5rem) calc(1rem + env(safe-area-inset-bottom))}  /* 07-29: taller bar (was .6 → .85 → 1rem) */
.cl-bookbar-in{max-width:780px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;gap:.5rem .85rem}
/* 07-29: the .cl-bookbar-label is retired everywhere — it only ever showed on desktop
   (mobile hid it), which broke the no-content-discrepancy rule, and the buttons say it.
   B2B pages instead carry a friendly note AFTER the button, visible at every width. */
.cl-bookbar-note{font-size:.82rem;letter-spacing:.04em;color:var(--cl-muted)}
.cl-bookbar .cl-btn{font-size:.8rem;padding:.42rem 1.05rem;
  /* 07-29: bar CTAs fill accent red (same as the connect in-page CTA) — the white
     gold-keyline button vanished against the white bar and didn't read as a CTA.
     In-page .cl-btn uses keep the gold-keyline look; only bars are red. */
  color:#fff;background:var(--cl-accent);border-color:var(--cl-accent)}
.cl-bookbar .cl-btn:hover{background:var(--cl-accent-deep);border-color:var(--cl-accent-deep);color:#fff}
/* 08-07: on a bar that offers a recommended option, the alternatives recede so the
   one red button reads as the recommendation. Veil fill + accent keyline = the
   .cl-ban-state demotion grammar, and the same red→quiet move already made on
   .cl-bookbar-bank below. NOT the 07-29 failure: what vanished then was white +
   GOLD keyline; this keeps the red family, so it still reads as a button.
   Must stay AFTER .cl-bookbar .cl-btn — equal specificity (0,2,0). */
.cl-bookbar .cl-btn--alt{color:var(--cl-accent-deep);background:var(--cl-veil);
  border-color:var(--cl-accent)}                     /* #93303c on #fdf0f1 = 6.93:1 */
.cl-bookbar .cl-btn--alt:hover{background:var(--cl-accent);border-color:var(--cl-accent);
  color:#fff}
.cl-bookbar-bank{margin-left:auto;font-size:.78rem;font-weight:500;
  color:var(--cl-gold-text);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap}  /* 07-29: red→gold so it recedes behind the red CTA */
.cl-bookbar-bank:hover{color:var(--cl-btn-gold)}
@media(max-width:659.98px){
  .cl-bookbar-in{gap:.45rem .55rem}
  .cl-bookbar-in:has(.cl-bookbar-note){justify-content:center;text-align:center}
  .cl-bookbar-note{font-size:.76rem;width:100%}  /* wraps to its own centered row under the button */
  .cl-bookbar .cl-btn{font-size:.74rem;letter-spacing:.06em;padding:.4rem .8rem}
  .cl-bookbar-bank{font-size:.74rem}
}
/* keep page content (and the footer) clear of the bar */
.cl-doc .detail.cl-dtl{padding-bottom:1.5rem}
body:has(.cl-bookbar){padding-bottom:6.3rem}
@media(max-width:659.98px){body:has(.cl-bookbar){padding-bottom:9.7rem}}
/* PC bump (fix pass 07-23, Sayaka:「PCで小さい」→ 大きく・目立つ): at ≥900px the
   bar gains real presence — larger label + button, a touch more air, and a
   matching content clearance. Mobile rules above are untouched; the safe-area
   padding and the print park-back below keep working as-is. */
@media(min-width:900px){
  .cl-bookbar{padding:1.3rem clamp(.9rem,3vw,1.5rem) calc(1.3rem + env(safe-area-inset-bottom))}  /* 07-29: taller on PC too (1.1 → 1.3rem) */
  .cl-bookbar-in{gap:.6rem 1.15rem}
  .cl-bookbar-note{font-size:.92rem;letter-spacing:.05em}
  .cl-bookbar .cl-btn{font-size:.98rem;font-weight:700;padding:.62rem 2rem;letter-spacing:.14em}
  .cl-bookbar-bank{font-size:.9rem}
  body:has(.cl-bookbar){padding-bottom:8rem}
}
@media print{.cl-bookbar{position:static;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
  body:has(.cl-bookbar){padding-bottom:0}}

/* （.cl-pending — 導入実績の「近日掲載予定」枠のスタイルは 2026-07-30 に削除。
   枠ごと medical.html から撤去したため未使用。原稿が届いたら本文は .cl-lead / .cl-split の
   既存文法で組む＝この破線プレースホルダは復活させない。経緯は content/pages/medical.md の
   社内メモと docs/STATUS.md §4。） */

/* the sitewide kill-switch — reduced motion shows every finished
   scene: the full pink bloom on the lit moon, dressed banners */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}