/* ==========================================================================
   蕉風流 お煎茶教室 — スタイルシート v3「余白の茶室」
   2026-09 リデザイン:文言・情報は据え置き、ビジュアルを全面刷新
   - 色:OKLCH + color-mix()   - 書体:しっぽり明朝B1 / Zen角ゴシックNew / Cormorant
   - 縦組み(writing-mode)、傍点(text-emphasis)、文節改行(word-break:auto-phrase)
   - :has() / コンテナクエリ / :user-invalid / field-sizing / scroll-driven animations
   - 非対応ブラウザでは段階的に劣化(@supports / progressive enhancement)
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, motion;

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  *{-webkit-tap-highlight-color:transparent}
  img,video,svg,iframe{display:block;max-width:100%}
  button,input,select,textarea{font:inherit;color:inherit}
  ul,ol{list-style:none}
  a{color:inherit}
  table{border-collapse:collapse}
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root{
    color-scheme:light;
    interpolate-size:allow-keywords;

    /* 紙と墨 */
    --c-paper:   oklch(97.6% .007 95);   /* 生成り */
    --c-paper-2: oklch(95% .013 92);     /* 薄香 */
    --c-paper-3: oklch(91.5% .019 88);   /* 砂色 */
    --c-ink:     oklch(22% .015 160);    /* 墨 */
    --c-ink-2:   oklch(37% .014 160);    /* 本文 */
    --c-ink-3:   oklch(54% .014 120);    /* 注記 */

    /* 茶の色 */
    --c-green:      oklch(40% .062 150); /* 深緑(ブランド) */
    --c-green-deep: oklch(28% .042 158); /* 千歳緑 */
    --c-night:      oklch(19.5% .02 165);/* 夜の茶室 */
    --c-night-2:    oklch(24% .024 162);
    --c-leaf:       oklch(85% .115 118); /* 煎茶の水色 */
    --c-tint:       oklch(95.6% .026 118);/* 若葉の地 */

    /* 差し色 */
    --c-shu:      oklch(56% .16 34);     /* 朱 */
    --c-shu-deep: oklch(47% .145 32);
    --c-gold:     oklch(72% .085 80);    /* 金茶 */

    --c-line:        color-mix(in oklch, var(--c-ink) 12%, transparent);
    --c-line-strong: color-mix(in oklch, var(--c-ink) 26%, transparent);
    --c-line-light:  color-mix(in oklch, var(--c-paper) 16%, transparent);

    /* 旧トークン互換(インラインstyle・JS内で参照されている) */
    --ink:var(--c-ink); --ink-soft:var(--c-ink-2); --paper:var(--c-paper); --paper-deep:var(--c-paper-3);
    --washi:var(--c-paper); --matcha:var(--c-green); --matcha-deep:var(--c-green-deep); --sencha:var(--c-green);
    --tea:var(--c-ink-3); --clay:var(--c-shu); --gold:var(--c-gold); --line:var(--c-line);

    /* 書体 */
    --f-mincho:'Shippori Mincho B1','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
    --f-gothic:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',YuGothic,'Noto Sans JP',sans-serif;
    --f-latin:'Cormorant Garamond','Times New Roman',serif;

    /* 文字サイズ(流体) */
    --fs-2xs:clamp(.68rem,.66rem + .08vw,.74rem);
    --fs-xs: clamp(.74rem,.71rem + .1vw,.8rem);
    --fs-sm: clamp(.84rem,.81rem + .12vw,.92rem);
    --fs-md: clamp(.95rem,.91rem + .16vw,1.04rem);
    --fs-lg: clamp(1.08rem,1rem + .35vw,1.3rem);
    --fs-xl: clamp(1.35rem,1.16rem + .8vw,1.9rem);
    --fs-2xl:clamp(1.75rem,1.35rem + 1.7vw,2.9rem);
    --fs-3xl:clamp(2.15rem,1.5rem + 2.9vw,4.4rem);

    /* 余白・寸法 */
    --max:1320px;
    --gutter:clamp(20px,4.2vw,64px);
    --pad-x:max(var(--gutter), calc((100% - var(--max)) / 2));
    --section-y:clamp(88px,5rem + 5vw,176px);
    --header-h:clamp(60px,56px + 1vw,76px);
    --radius:4px;
    --radius-lg:10px;

    /* 影 */
    --shadow-1:0 1px 2px color-mix(in oklch,var(--c-ink) 6%,transparent),0 8px 24px -8px color-mix(in oklch,var(--c-ink) 14%,transparent);
    --shadow-2:0 2px 4px color-mix(in oklch,var(--c-ink) 6%,transparent),0 24px 48px -16px color-mix(in oklch,var(--c-green-deep) 26%,transparent);

    /* 動き */
    --ease-out-expo:cubic-bezier(.16,1,.3,1);
    --ease-out-quart:cubic-bezier(.25,1,.5,1);
    --ease-soft:cubic-bezier(.45,.05,.25,1);
    --dur-quick:.45s;
    --dur-base:.9s;
    --dur-slow:1.3s;
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  html{
    font-size:100%;
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 16px);
    scrollbar-gutter:stable;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    font-family:var(--f-gothic);
    font-size:var(--fs-md);
    line-height:1.95;
    letter-spacing:.04em;
    color:var(--c-ink-2);
    background:var(--c-paper);
    line-break:strict;
    text-spacing-trim:trim-start;
    text-autospace:normal;
    hanging-punctuation:allow-end;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-variant-numeric:lining-nums proportional-nums;
    position:relative;
    min-height:100dvh;
  }
  /* 和紙の地(ごく薄いノイズ) */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.55;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  ::selection{background:var(--c-leaf);color:var(--c-ink)}

  h1,h2,h3,h4,h5{
    font-family:var(--f-mincho);
    font-weight:500;
    color:var(--c-ink);
    line-height:1.45;
    letter-spacing:.06em;
    font-feature-settings:"palt";
    word-break:auto-phrase;
    text-wrap:balance;
  }
  p{text-wrap:pretty}
  strong{font-weight:700}
  a{text-decoration-thickness:1px;text-underline-offset:.3em}

  :focus-visible{outline:2px solid var(--c-shu);outline-offset:3px;border-radius:2px}

  .wrap{position:relative;z-index:2;width:100%;overflow-x:clip}
}

/* ───────────────────────── layout: header / hero / sections ───────────────────────── */
@layer layout {

  /* ── Header ── */
  header{
    position:fixed;inset:0 0 auto;z-index:100;
    height:var(--header-h);
    padding-inline:var(--pad-x);
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    color:var(--c-ink);
    background:color-mix(in oklch,var(--c-paper) 80%,transparent);
    backdrop-filter:blur(18px) saturate(1.4);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid transparent;
    transition:transform .55s var(--ease-out-expo),background-color .45s var(--ease-soft),border-color .45s var(--ease-soft),color .45s var(--ease-soft);
  }
  header.is-scrolled{background:color-mix(in oklch,var(--c-paper) 92%,transparent);border-bottom-color:var(--c-line)}
  header.is-hidden{transform:translateY(-102%)}
  /* 動画ヒーローの上では透過+白抜き(:has) */
  body:has(.hero--video):not(.menu-open) header:not(.is-scrolled){
    background:linear-gradient(to bottom,oklch(10% .01 160 / .38),transparent);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    color:var(--c-paper);
  }

  .logo{font-family:var(--f-mincho);font-weight:700;font-size:clamp(1.12rem,1rem + .45vw,1.42rem);letter-spacing:.34em;line-height:1.1}
  .logo a{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:.7em;text-decoration:none;color:inherit}
  .logo a::before{content:"";grid-row:1 / 3;width:.72em;height:.72em;background:var(--c-shu);border-radius:1px;box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--c-shu) 70%,white)}
  .logo .en{grid-column:2;display:block;margin-top:.35em;font-family:var(--f-gothic);font-weight:500;font-size:.44em;letter-spacing:.3em;text-transform:uppercase;opacity:.62}

  .header-actions{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px)}
  .nav-desktop{display:none}
  @media (min-width:1080px){
    .nav-desktop{display:flex;align-items:center;gap:clamp(1rem,.2rem + 1.4vw,2.2rem)}
    .nav-desktop a{
      position:relative;padding-block:6px;
      font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;
      color:inherit;text-decoration:none;white-space:nowrap;
      transition:color .3s var(--ease-soft);
    }
    .nav-desktop a .num{font-family:var(--f-latin);font-style:italic;font-size:1.1em;margin-right:.45em;opacity:.55;letter-spacing:0}
    .nav-desktop a::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
      transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out-expo);
    }
    .nav-desktop a:hover::after,.nav-desktop a.current::after{transform:scaleX(1);transform-origin:left}
    .nav-desktop a.current{color:var(--c-shu)}
    .menu-btn{display:none}
  }

  .header-trial{
    display:none;align-items:center;gap:.6em;
    padding:.72em 1.35em .72em 1.5em;border-radius:999px;
    background:var(--c-shu);color:var(--c-paper);
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-decoration:none;
    box-shadow:0 6px 18px -8px color-mix(in oklch,var(--c-shu) 70%,transparent);
    transition:background-color .3s var(--ease-soft),transform var(--dur-quick) var(--ease-out-expo);
  }
  .header-trial::after{content:"→";transition:transform var(--dur-quick) var(--ease-out-expo)}
  .header-trial:hover{background:var(--c-shu-deep)}
  .header-trial:hover::after{transform:translateX(3px)}
  .header-trial:active{transform:scale(.97)}
  @media (min-width:1080px){.header-trial{display:inline-flex}}

  .menu-btn{
    position:relative;width:44px;height:44px;margin-right:-10px;
    background:none;border:0;cursor:pointer;color:inherit;
  }
  .menu-btn span{
    position:absolute;left:10px;height:1.5px;border-radius:2px;background:currentColor;
    transition:transform .45s var(--ease-out-expo),opacity .3s var(--ease-soft),width .35s var(--ease-soft),top .35s var(--ease-out-expo);
  }
  .menu-btn span:nth-child(1){top:15px;width:24px}
  .menu-btn span:nth-child(2){top:21.5px;width:16px}
  .menu-btn span:nth-child(3){top:28px;width:20px}
  .menu-btn:hover span{width:24px}
  .menu-btn.is-open span:nth-child(1){top:21.5px;transform:rotate(45deg);width:24px}
  .menu-btn.is-open span:nth-child(2){opacity:0}
  .menu-btn.is-open span:nth-child(3){top:21.5px;transform:rotate(-45deg);width:24px}

  /* ── モバイルメニュー(共通JSが .nav-desktop から生成) ── */
  .mobile-menu{
    position:fixed;inset:0;z-index:98;overflow-y:auto;
    display:flex;flex-direction:column;justify-content:center;
    padding:calc(var(--header-h) + 24px) var(--gutter) max(32px,env(safe-area-inset-bottom));
    background:var(--c-paper);
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease-out-quart),visibility 0s .5s;
  }
  .mobile-menu::before{
    content:"茶";position:absolute;right:calc(var(--gutter) - .06em);bottom:24px;
    writing-mode:vertical-rl;font-family:var(--f-mincho);font-weight:800;
    font-size:clamp(9rem,42vw,15rem);line-height:1;color:transparent;
    -webkit-text-stroke:1px color-mix(in oklch,var(--c-green) 22%,transparent);
    pointer-events:none;user-select:none;
  }
  .mobile-menu.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out-quart),visibility 0s 0s}
  .mobile-menu-links{display:flex;flex-direction:column;position:relative;z-index:1;counter-reset:mm}
  .mobile-menu-links a{
    display:flex;align-items:baseline;gap:16px;
    padding-block:clamp(14px,2.2vh,20px);
    border-bottom:1px solid var(--c-line);
    font-family:var(--f-mincho);font-size:clamp(1.3rem,5.4vw,1.75rem);font-weight:500;letter-spacing:.1em;
    color:var(--c-ink);text-decoration:none;
    opacity:0;transform:translateY(18px);
    transition:opacity .6s var(--ease-out-expo) calc(.08s + var(--mi,0) * 60ms),transform .6s var(--ease-out-expo) calc(.08s + var(--mi,0) * 60ms);
  }
  .mobile-menu-links a .num{font-family:var(--f-latin);font-style:italic;font-size:.62em;color:var(--c-shu);letter-spacing:0}
  .mobile-menu.is-open .mobile-menu-links a{opacity:1;transform:none}
  .mobile-menu:not(.is-open) .mobile-menu-links a{transition-delay:0s;transition-duration:.25s}
  .mobile-menu-cta{
    position:relative;z-index:1;margin-top:clamp(28px,5vh,44px);
    display:flex;justify-content:center;align-items:center;gap:10px;
    padding:1.1em 24px;border-radius:999px;
    background:var(--c-shu);color:var(--c-paper);
    font-weight:700;font-size:var(--fs-sm);letter-spacing:.28em;text-decoration:none;
    opacity:0;transform:translateY(18px);
    transition:opacity .6s var(--ease-out-expo) calc(.08s + var(--mi,0) * 60ms),transform .6s var(--ease-out-expo) calc(.08s + var(--mi,0) * 60ms);
  }
  .mobile-menu-cta::after{content:"→"}
  .mobile-menu.is-open .mobile-menu-cta{opacity:1;transform:none}
  .mobile-menu:not(.is-open) .mobile-menu-cta{transition-delay:0s;transition-duration:.25s}
  body.menu-open{overflow:hidden}

  /* ── Section 基本 ── */
  .section{
    position:relative;
    padding:var(--section-y) var(--pad-x);
    background:var(--c-paper);
  }
  .section + .section{border-top:1px solid var(--c-line)}

  /* 見出しブロック:ヘアライン+ラベル+大見出し。副題は広い画面で右カラムへ */
  .section-header{
    position:relative;
    display:grid;grid-template-columns:minmax(0,1fr);
    align-items:end;
    margin-bottom:clamp(44px,3rem + 2.5vw,96px);
  }
  @media (min-width:1024px){
    .section-header:has(> .section-subtitle){grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,120px)}
    .section-header > .section-subtitle{grid-column:2;grid-row:1 / span 4;align-self:end;margin-top:0}
  }
  .section-num{
    display:flex;align-items:center;gap:.9em;
    margin-bottom:clamp(14px,1.2vw,22px);
    font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;
    letter-spacing:.26em;text-transform:uppercase;color:var(--c-ink-3);
  }
  .section-num::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-shu)}
  .section-title{
    font-size:var(--fs-3xl);font-weight:500;line-height:1.28;letter-spacing:.05em;
    color:var(--c-ink);
  }
  .section-title .jp{
    display:block;margin-top:.95em;
    font-family:var(--f-gothic);font-size:max(.72rem,.2em);font-weight:500;
    letter-spacing:.42em;color:var(--c-green);
  }
  .section-subtitle{
    margin-top:clamp(18px,1.6vw,26px);
    max-width:40em;
    font-size:var(--fs-md);line-height:2.05;color:var(--c-ink-2);
  }

  /* テキストリンク(下線が伸縮) */
  .section-link{
    display:inline-flex;align-items:center;gap:.8em;
    margin-top:clamp(28px,2.2vw,40px);padding-bottom:.45em;
    font-size:var(--fs-sm);font-weight:500;letter-spacing:.2em;
    color:var(--c-green-deep);text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
    transition:background-size .55s var(--ease-out-expo),background-position 0s .55s,color .3s var(--ease-soft);
  }
  .section-link::after{content:"→";transition:transform var(--dur-quick) var(--ease-out-expo)}
  .section-link:hover{color:var(--c-shu);background-size:0 1px;background-position:100% 100%;transition:background-size .55s var(--ease-out-expo),background-position 0s 0s,color .3s var(--ease-soft)}
  .section-link:hover::after{transform:translateX(5px)}

  /* ── Hero(トップ) ── */
  .hero{
    position:relative;isolation:isolate;overflow:hidden;
    min-height:100svh;
    padding:calc(var(--header-h) + clamp(28px,4vw,64px)) var(--pad-x) clamp(24px,3vw,44px);
    display:grid;grid-template-rows:1fr auto;
    background:var(--c-night);
  }
  .hero--video{color:var(--c-paper)}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--c-night)}
  .hero-scrim{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(120% 90% at 100% 0%,oklch(12% .02 160 / .62) 0%,transparent 55%),
      linear-gradient(to top,oklch(11% .015 160 / .82) 0%,oklch(11% .015 160 / .35) 38%,transparent 62%),
      linear-gradient(to right,oklch(11% .015 160 / .45),transparent 60%);
  }
  .hero-kanji{
    position:absolute;z-index:0;left:calc(var(--pad-x) - .08em);top:calc(var(--header-h) + 3vh);
    writing-mode:vertical-rl;
    font-family:var(--f-mincho);font-weight:800;line-height:1;
    font-size:clamp(9rem,26vw,24rem);letter-spacing:-.04em;
    color:transparent;-webkit-text-stroke:1px oklch(98% .01 95 / .13);
    pointer-events:none;user-select:none;
  }
  .hero-mark{
    position:absolute;z-index:3;
    right:var(--pad-x);bottom:clamp(96px,11vh,132px);
    width:clamp(78px,7vw,112px);aspect-ratio:1;border-radius:50%;
    display:grid;place-items:center;
    color:var(--c-paper);
    border:1px solid oklch(98% .01 95 / .35);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    animation:rotate 36s linear infinite;
  }
  .hero-mark svg{position:absolute;inset:0;width:100%;height:100%;font-family:var(--f-latin)}
  .hero-mark-dot{width:9px;height:9px;border-radius:50%;background:var(--c-shu);box-shadow:0 0 0 6px oklch(56% .16 34 / .18)}
  @keyframes rotate{to{transform:rotate(360deg)}}

  .hero-content{
    position:relative;z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto 1fr auto auto;
    column-gap:clamp(20px,4vw,72px);
    min-height:100%;
  }
  .hero-eyebrow{
    grid-column:1;grid-row:1;align-self:start;
    display:flex;align-items:center;gap:14px;
    font-family:var(--f-latin);font-style:italic;font-size:clamp(.95rem,.85rem + .35vw,1.25rem);
    letter-spacing:.24em;color:var(--c-gold);
  }
  .hero-eyebrow::before{content:"";width:clamp(28px,3vw,56px);height:1px;background:currentColor}

  /* 縦組みのキャッチコピー */
  .hero h1{
    grid-column:2;grid-row:1 / -1;justify-self:end;align-self:start;
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:clamp(2.35rem,1.35rem + 3.7vw,5.5rem);
    font-weight:500;line-height:1.55;letter-spacing:.16em;
    color:var(--c-paper);
    text-wrap:wrap;word-break:normal;
    text-shadow:0 2px 24px oklch(10% .01 160 / .45);
  }
  .hero h1 em{
    font-style:normal;color:var(--c-leaf);
    text-emphasis:filled sesame var(--c-gold);
    -webkit-text-emphasis:filled sesame var(--c-gold);
  }
  .hero h1 .small{
    display:block;
    margin-block-start:1.1em;
    font-size:.36em;font-weight:400;letter-spacing:.34em;line-height:1.8;
    color:oklch(93% .015 92);
  }
  .hero-lead{
    grid-column:1;grid-row:3;
    max-width:32em;
    margin-bottom:clamp(24px,2.4vw,40px);
    font-family:var(--f-mincho);font-size:clamp(.98rem,.9rem + .3vw,1.2rem);
    line-height:2.25;letter-spacing:.14em;
    color:oklch(95% .012 92);
    text-shadow:0 1px 12px oklch(10% .01 160 / .5);
  }
  .hero-cta{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;gap:12px}
  .hero-foot{
    position:relative;z-index:2;
    display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
    margin-top:clamp(28px,4vh,56px);padding-top:18px;
    border-top:1px solid oklch(98% .01 95 / .18);
    font-size:var(--fs-2xs);letter-spacing:.3em;text-transform:uppercase;
    color:oklch(92% .012 92 / .82);
  }
  .scroll-indicator{
    display:flex;align-items:center;gap:12px;
    font-family:var(--f-latin);font-style:italic;font-size:var(--fs-sm);letter-spacing:.2em;text-transform:none;
  }
  .scroll-indicator::after{
    content:"";width:clamp(40px,5vw,80px);height:1px;background:currentColor;
    transform-origin:left;animation:scrollLine 2.4s var(--ease-soft) infinite;
  }
  @keyframes scrollLine{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

  @media (max-width:767px){
    .hero{padding-top:calc(var(--header-h) + 20px)}
    .hero-content{grid-template-columns:minmax(0,1fr) auto;row-gap:0}
    .hero h1{grid-row:1 / 3;font-size:clamp(2.1rem,9.6vw,2.9rem);letter-spacing:.12em}
    .hero h1 .small{font-size:.42em;letter-spacing:.24em}
    .hero-eyebrow{writing-mode:vertical-rl;font-size:.9rem;letter-spacing:.3em}
    .hero-eyebrow::before{width:1px;height:36px}
    .hero-lead{grid-column:1 / -1;margin-top:28px;font-size:.95rem;line-height:2.1;letter-spacing:.1em}
    .hero-cta{grid-column:1 / -1}
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    .hero-mark{display:none}
    .hero-kanji{font-size:62vw;left:-.12em;top:auto;bottom:18vh;opacity:.7}
    .hero-foot > span{font-size:.62rem;letter-spacing:.2em}
  }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

  /* ── ボタン ── */
  .btn,.btn-trial,.btn-cta,.btn-big,.form-submit,.back-link,.btn-retry{
    --btn-bg:var(--c-shu);--btn-fg:var(--c-paper);--btn-bd:transparent;
    --btn-bg-h:var(--c-shu-deep);--btn-fg-h:var(--c-paper);--btn-bd-h:transparent;
    position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:.8em;
    padding:1.05em 2em;border-radius:999px;
    border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
    font-family:var(--f-gothic);font-size:var(--fs-sm);font-weight:700;letter-spacing:.2em;line-height:1.4;
    text-decoration:none;white-space:nowrap;cursor:pointer;
    transition:background-color .35s var(--ease-soft),color .35s var(--ease-soft),border-color .35s var(--ease-soft),transform var(--dur-quick) var(--ease-out-expo),box-shadow var(--dur-quick) var(--ease-out-expo);
  }
  .btn:hover,.btn-trial:hover,.btn-cta:hover,.btn-big:hover,.form-submit:hover:not(:disabled),.back-link:hover,.btn-retry:hover{
    background:var(--btn-bg-h);color:var(--btn-fg-h);border-color:var(--btn-bd-h);
  }
  .btn:active,.btn-trial:active,.btn-cta:active,.btn-big:active,.form-submit:active:not(:disabled),.back-link:active{transform:scale(.975);transition-duration:.15s}

  .btn-primary{box-shadow:0 10px 30px -12px color-mix(in oklch,var(--c-shu) 80%,transparent)}
  .btn-secondary{--btn-bg:transparent;--btn-fg:var(--c-green-deep);--btn-bd:var(--c-line-strong);--btn-bg-h:var(--c-green-deep);--btn-fg-h:var(--c-paper);--btn-bd-h:var(--c-green-deep)}
  .hero--video .btn-secondary{
    --btn-bg:oklch(98% .01 95 / .08);--btn-fg:var(--c-paper);--btn-bd:oklch(98% .01 95 / .45);
    --btn-bg-h:var(--c-paper);--btn-fg-h:var(--c-green-deep);--btn-bd-h:var(--c-paper);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }

  /* 矢印付き横長ボタン(文言末尾の <em>→</em>) */
  .btn-trial,.btn-big{justify-content:space-between;width:100%;padding:1.15em 1.6em 1.15em 2em}
  .btn-trial em,.btn-big em{
    font-style:normal;flex:none;
    display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;
    background:oklch(98% .01 95 / .16);letter-spacing:0;
    transition:transform var(--dur-quick) var(--ease-out-expo),background-color .3s var(--ease-soft);
  }
  .btn-trial:hover em,.btn-big:hover em{transform:translateX(4px)}

  .btn-cta::after{content:"→";transition:transform var(--dur-quick) var(--ease-out-expo)}
  .btn-cta:hover::after{transform:translateX(4px)}

  /* ── カード共通の質感 ── */
  .card-surface,
  .course,.tr-meta-item,.tr-inc-item,.ef-step,.heritage-era,.form-card,.contact-aside-card,.trial-calendar,.voice,.slot-card,.access-info dl{
    background:color-mix(in oklch,var(--c-paper) 70%,white);
    border:1px solid var(--c-line);
    border-radius:var(--radius);
  }

  /* ── 価格表示 ── */
  .price,.price-val{font-family:var(--f-latin);font-weight:500;color:var(--c-ink);line-height:1;letter-spacing:.01em;font-variant-numeric:lining-nums}
  .price .yen,.price-val .yen{font-size:.55em;margin-right:.08em;vertical-align:.12em}
  .price .unit,.price-val .unit{font-family:var(--f-gothic);font-size:max(.72rem,.3em);font-weight:500;color:var(--c-ink-3);margin-left:.6em;letter-spacing:.14em}

  /* ── 小ラベル(英字キャプション) ── */
  .course-label,.heritage-gen,.master-role,.cal-header small,.news-block h3 small,.trial-price-card .lbl,
  .contact-aside-card .label,.form-intro small,.form-success-num,.page-cta small,.sel-bar-label,
  .ts-row dt,.ts-total dt,.info-row dt,.tr-meta-item .num,.footer-col h5,.res-number small,.nd-related small,.media-row-label small{
    font-family:var(--f-gothic);font-style:normal;font-weight:500;
    font-size:var(--fs-2xs);letter-spacing:.24em;text-transform:uppercase;
    color:var(--c-ink-3);
  }

  /* ── バッジ ── */
  .news-cat,.nd-cat,.cal-slot,.step-time{
    display:inline-flex;align-items:center;gap:.4em;
    padding:.28em .9em;border-radius:999px;
    font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;line-height:1.5;white-space:nowrap;
  }
}

/* ───────────────────────── pages: トップの各セクション ───────────────────────── */
@layer pages {

  /* ── News ── */
  @media (min-width:1024px){
    .news{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,120px);align-items:start}
    .news > .section-header{position:sticky;top:calc(var(--header-h) + 32px);margin-bottom:0}
  }
  .news-grid{display:block}
  .news-block h3{
    display:flex;justify-content:space-between;align-items:baseline;
    padding-bottom:16px;border-bottom:1px solid var(--c-ink);
    font-size:var(--fs-lg);letter-spacing:.14em;
  }
  .news-list li{
    position:relative;
    display:grid;grid-template-columns:minmax(6.8em,auto) minmax(0,1fr);gap:4px clamp(16px,2vw,36px);align-items:baseline;
    padding:clamp(18px,1.6vw,26px) 4px;
    border-bottom:1px solid var(--c-line);
    transition:background-color .35s var(--ease-soft);
  }
  .news-list li:not(.news-empty):hover{background:color-mix(in oklch,var(--c-tint) 70%,transparent)}
  .news-date{font-family:var(--f-latin);font-size:clamp(1rem,.94rem + .2vw,1.15rem);font-weight:500;letter-spacing:.08em;color:var(--c-ink-3);font-variant-numeric:lining-nums tabular-nums}
  .news-title{font-size:var(--fs-md);line-height:1.8;color:var(--c-ink)}
  .news-title a{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .9em;padding-right:2.4em;text-decoration:none;color:inherit}
  .news-title a::after{
    content:"→";position:absolute;right:8px;top:50%;translate:0 -50%;
    color:var(--c-shu);opacity:0;transform:translateX(-8px);
    transition:opacity .3s var(--ease-soft),transform var(--dur-quick) var(--ease-out-expo);
  }
  .news-list li:hover .news-title a::after{opacity:1;transform:none}
  .news-list li:hover .news-title{color:var(--c-green-deep)}
  .news-cat{background:var(--c-tint);color:var(--c-green-deep);border:1px solid color-mix(in oklch,var(--c-green) 22%,transparent)}
  .news-list li.news-empty{color:var(--c-ink-3)}
  .news-list li.news-empty .news-title{color:var(--c-ink-3)}
  @media (max-width:560px){.news-list li{grid-template-columns:1fr}}

  /* ── About ── */
  .about{background:var(--c-paper-2)}
  .about-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:start}
  @media (min-width:900px){.about-inner{grid-template-columns:auto minmax(0,1fr)}}
  .about-quote{
    writing-mode:vertical-rl;
    justify-self:center;
    padding-inline:clamp(8px,2vw,40px);
    font-family:var(--f-mincho);font-size:clamp(1.3rem,1rem + 1.15vw,2.1rem);font-weight:500;
    line-height:2.15;letter-spacing:.2em;color:var(--c-ink);
    border-inline:1px solid var(--c-line);
    padding-block:.4em;
  }
  .about-quote .hl{
    color:var(--c-green-deep);
    background:linear-gradient(to left,transparent 58%,color-mix(in oklch,var(--c-leaf) 55%,transparent) 58%,color-mix(in oklch,var(--c-leaf) 55%,transparent) 92%,transparent 92%);
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
  }
  .about-body{font-size:var(--fs-md);line-height:2.15;color:var(--c-ink-2);max-width:42em}
  .about-body p:first-child{font-family:var(--f-mincho);font-size:var(--fs-lg);line-height:2.05;color:var(--c-ink)}
  .about-body p + p{margin-top:1.4em}
  .about-sublinks{
    display:grid;grid-template-columns:minmax(0,1fr);
    margin-top:clamp(36px,3vw,56px);
    border-top:1px solid var(--c-ink);
  }
  @media (min-width:640px){.about-sublinks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px)}}
  .about-sublinks a{
    position:relative;isolation:isolate;
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;
    padding:18px 6px 16px;border-bottom:1px solid var(--c-line);
    font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:500;letter-spacing:.1em;
    color:var(--c-ink);text-decoration:none;
    transition:color .3s var(--ease-soft),padding .45s var(--ease-out-expo);
  }
  .about-sublinks a small{grid-row:2;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.24em;color:var(--c-ink-3)}
  .about-sublinks a::after{
    content:"→";grid-column:2;grid-row:1 / 3;
    display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--c-line-strong);font-family:var(--f-gothic);font-size:.85rem;color:var(--c-green-deep);
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft),transform var(--dur-quick) var(--ease-out-expo);
  }
  .about-sublinks a:hover{color:var(--c-green-deep);padding-left:14px}
  .about-sublinks a:hover::after{background:var(--c-green-deep);border-color:var(--c-green-deep);color:var(--c-paper);transform:translateX(-4px)}

  /* ── Flow(稽古の一日):タイムライン ── */
  .flow-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
  .step{
    position:relative;
    display:grid;grid-template-columns:clamp(64px,14vw,88px) minmax(0,1fr);gap:0 16px;
    padding-block:clamp(22px,3vw,32px);
  }
  .step::before{content:"";position:absolute;left:calc(clamp(64px,14vw,88px) / 2 - 36px);top:0;bottom:0;width:1px;background:var(--c-line-strong)}
  .step:first-child::before{top:clamp(38px,4.5vw,50px)}
  .step:last-child::before{bottom:auto;height:clamp(38px,4.5vw,50px)}
  .step-num{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-left:0}
  .step-num .no{
    position:relative;
    font-family:var(--f-latin);font-weight:400;font-size:clamp(2.4rem,2rem + 1.4vw,3.6rem);line-height:1;letter-spacing:0;
    color:var(--c-green-deep);font-variant-numeric:lining-nums;
  }
  .step-num .label{margin-top:8px;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.24em;color:var(--c-ink-3)}
  .step-body h4{font-size:var(--fs-lg);margin-bottom:10px;letter-spacing:.1em}
  .step-body p{font-size:var(--fs-sm);line-height:2;color:var(--c-ink-2)}
  .step-time{margin-top:14px;background:var(--c-paper-2);color:var(--c-green-deep);border:1px solid var(--c-line)}
  @media (max-width:1099px){
    .flow-grid{padding-left:28px}
    .step::before{left:-28px}
    .step::after{content:"";position:absolute;left:calc(-28px - 4.5px);top:clamp(38px,4.5vw,50px);width:10px;height:10px;border-radius:50%;background:var(--c-paper);border:1.5px solid var(--c-green)}
    .step + .step{border-top:1px solid var(--c-line)}
  }
  @media (min-width:1100px){
    .flow-grid{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(16px,2vw,36px)}
    .flow-grid::before{content:"";position:absolute;left:0;right:0;top:calc(clamp(2.4rem,2rem + 1.4vw,3.6rem) + 38px);height:1px;background:var(--c-line-strong)}
    .step{grid-template-columns:minmax(0,1fr);gap:0;padding-block:0}
    .step::before{display:none}
    .step-num{flex-direction:row;align-items:baseline;gap:12px;height:calc(clamp(2.4rem,2rem + 1.4vw,3.6rem) + 38px);margin-bottom:30px}
    .step-num::after{content:"";position:absolute;left:0;bottom:-5.5px;width:11px;height:11px;border-radius:50%;background:var(--c-paper);border:1.5px solid var(--c-green)}
    .step-num .label{margin:0}
  }
  .flow-note{margin-top:clamp(24px,2vw,36px);text-align:right;font-size:var(--fs-xs);color:var(--c-ink-3);letter-spacing:.12em}

  /* ── Trial(最重要CV) ── */
  .trial{background:var(--c-tint)}
  .trial::after{
    content:"";position:absolute;inset:auto auto 0 50%;translate:-50% 0;pointer-events:none;
    width:min(1600px,160vw);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(closest-side,color-mix(in oklch,var(--c-leaf) 40%,transparent),transparent);
    opacity:.55;transform:translateY(62%);z-index:0;
  }
  .trial > *{position:relative;z-index:1}
  .trial-badge{
    display:inline-flex;align-items:center;gap:.7em;justify-self:start;
    margin-bottom:22px;padding:.5em 1.2em;border-radius:999px;
    background:var(--c-shu);color:var(--c-paper);
    font-size:var(--fs-2xs);font-weight:700;letter-spacing:.28em;
  }
  .trial-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-paper)}
  .trial .trial-inner{
    display:grid;grid-template-columns:minmax(0,1fr);
    background:color-mix(in oklch,var(--c-paper) 82%,white);
    border:1px solid color-mix(in oklch,var(--c-green) 16%,transparent);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-2);
    overflow:hidden;
  }
  @media (min-width:960px){.trial .trial-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
  .trial .trial-info{padding:clamp(28px,4vw,64px)}
  .trial .trial-calendar{
    border:0;border-radius:0;
    border-top:1px solid var(--c-line);
    background:color-mix(in oklch,var(--c-paper-2) 80%,transparent);
    padding:clamp(28px,4vw,56px);
    display:flex;flex-direction:column;
  }
  @media (min-width:960px){.trial .trial-calendar{border-top:0;border-left:1px solid var(--c-line)}}
  .trial-lead{font-size:var(--fs-xl);line-height:1.75;letter-spacing:.08em;margin-bottom:clamp(24px,2vw,36px)}
  .trial-lead em{font-style:normal;color:var(--c-shu);text-emphasis:filled sesame var(--c-shu);-webkit-text-emphasis:filled sesame var(--c-shu);text-emphasis-position:over right}
  .trial-highlights{display:grid;gap:12px;margin-bottom:clamp(28px,2.4vw,40px)}
  .trial-highlights li{
    position:relative;padding-left:2.1em;
    font-size:var(--fs-sm);line-height:1.8;color:var(--c-ink-2);
  }
  .trial-highlights li::before{
    content:"";position:absolute;left:0;top:.28em;width:1.3em;height:1.3em;border-radius:50%;
    background:var(--c-green-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f3ea' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10 16.5 18 8.5'/%3E%3C/svg%3E") center / 72% no-repeat;
  }
  /* チケット型の料金カード(マスクで切り欠き) */
  .trial-price-card{
    display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
    padding:clamp(20px,2vw,28px) clamp(26px,2.4vw,36px);
    background:var(--c-paper-2);
    border-radius:var(--radius);
    background-image:linear-gradient(to bottom,var(--c-line-strong) 50%,transparent 50%);
    background-size:1px 8px;background-repeat:repeat-y;background-position:calc(100% - 9.5em) 0;
    -webkit-mask:radial-gradient(circle at 0 50%,#0000 11px,#000 11.5px) left / 51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 11px,#000 11.5px) right / 51% 100% no-repeat;
            mask:radial-gradient(circle at 0 50%,#0000 11px,#000 11.5px) left / 51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 11px,#000 11.5px) right / 51% 100% no-repeat;
  }
  .trial-price-card .lbl{display:block;color:var(--c-shu)}
  .trial-price-card .note{margin-top:6px;font-size:var(--fs-xs);color:var(--c-ink-3);letter-spacing:.08em;line-height:1.7}
  .trial-price-card .price-val{font-size:clamp(2.2rem,1.8rem + 1.2vw,3rem);white-space:nowrap}
  @media (max-width:520px){.trial-price-card{background-image:none}}

  .cal-header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--c-ink)}
  .cal-header h4{font-size:var(--fs-lg);letter-spacing:.12em}
  .cal-list{flex:1;margin-bottom:clamp(20px,2vw,32px)}
  .cal-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1.4vw,22px);align-items:center;padding:16px 0;border-bottom:1px solid var(--c-line)}
  .cal-date{display:flex;align-items:baseline;gap:3px;font-family:var(--f-latin);color:var(--c-ink);font-variant-numeric:lining-nums tabular-nums}
  .cal-date .m{font-size:1.05rem;color:var(--c-ink-3)}
  .cal-date .sep{color:var(--c-line-strong)}
  .cal-date .d{font-size:clamp(1.7rem,1.5rem + .6vw,2.1rem);font-weight:500;line-height:1}
  .cal-date .w{margin-left:8px;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;color:var(--c-ink-3)}
  .cal-time{font-size:var(--fs-sm);color:var(--c-ink-2);font-variant-numeric:tabular-nums}
  .cal-slot{color:var(--c-green-deep);background:var(--c-tint);border:1px solid color-mix(in oklch,var(--c-green) 25%,transparent)}
  .cal-slot.few{color:var(--c-shu);background:color-mix(in oklch,var(--c-shu) 8%,var(--c-paper));border-color:color-mix(in oklch,var(--c-shu) 35%,transparent)}
  .cal-slot.full{color:var(--c-ink-3);background:transparent;border-color:var(--c-line)}
  .cal-list li.cal-empty{display:block;padding:28px 4px;text-align:left;font-size:var(--fs-sm);line-height:2;color:var(--c-ink-3);border-bottom:0}
  .cal-list li.cal-empty a{color:var(--c-green-deep)}
  .trial .trial-inner + .trial-inner{margin-top:clamp(28px,2.5vw,44px) !important}

  /* ── Seasons(四季):夜の地に季節の色 ── */
  .seasons{background:var(--c-night);color:var(--c-paper);border-top:0 !important;overflow:hidden}
  .seasons + .section{border-top:0}
  .seasons .section-num{color:oklch(80% .02 120)}
  .seasons .section-title{color:var(--c-paper)}
  .seasons .section-title .jp{color:var(--c-leaf)}
  .seasons .section-subtitle{color:oklch(86% .015 110)}
  .season-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
  .season-card{
    --season:var(--c-leaf);
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;
    min-height:clamp(380px,32vw,480px);
    padding:clamp(24px,2.2vw,36px);
    border-radius:var(--radius-lg);
    background:linear-gradient(to bottom,color-mix(in oklch,var(--season) 12%,transparent),transparent 55%),var(--c-night-2);
    border:1px solid oklch(98% .01 95 / .08);
    transition:transform .7s var(--ease-out-expo),border-color .5s var(--ease-soft);
  }
  .season-card:nth-child(1){--season:oklch(82% .085 5)}    /* 桜 */
  .season-card:nth-child(2){--season:oklch(74% .09 225)}   /* 水 */
  .season-card:nth-child(3){--season:oklch(72% .13 52)}    /* 柿 */
  .season-card:nth-child(4){--season:oklch(90% .02 250)}   /* 雪 */
  .season-card::before{
    content:"";position:absolute;inset:-30% -30% auto auto;width:90%;aspect-ratio:1;border-radius:50%;z-index:-1;
    background:radial-gradient(closest-side,color-mix(in oklch,var(--season) 42%,transparent),transparent);
    opacity:.5;transition:opacity .6s var(--ease-soft),transform .9s var(--ease-out-expo);
  }
  .season-card:hover{transform:translateY(-6px);border-color:color-mix(in oklch,var(--season) 45%,transparent)}
  .season-card:hover::before{opacity:.9;transform:scale(1.15)}
  .season-kanji{
    font-family:var(--f-mincho);font-weight:700;line-height:1;
    font-size:clamp(4.2rem,3rem + 3.6vw,7.4rem);
    color:var(--season);
    margin-bottom:auto;padding-bottom:28px;
  }
  .season-name{font-family:var(--f-mincho);font-size:var(--fs-lg);letter-spacing:.3em;color:var(--c-paper)}
  .season-en{margin:4px 0 18px;font-family:var(--f-latin);font-style:italic;font-size:1rem;letter-spacing:.14em;color:color-mix(in oklch,var(--season) 75%,white)}
  .season-tea{padding-top:18px;border-top:1px solid oklch(98% .01 95 / .14);font-size:var(--fs-sm);line-height:2;color:oklch(86% .012 100)}
  .season-tea strong{display:block;margin-bottom:6px;font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:600;letter-spacing:.12em;color:var(--c-paper)}
  @media (max-width:959px){
    .season-grid{
      display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
      margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
      scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);scrollbar-width:none;
    }
    .season-grid::-webkit-scrollbar{display:none}
    .season-card{flex:0 0 min(78vw,320px);scroll-snap-align:start;min-height:420px}
  }

  /* ── Master(家元):掛け軸 ── */
  .master-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,112px);align-items:start}
  @media (min-width:900px){.master-inner{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.master-portrait{position:sticky;top:calc(var(--header-h) + 64px)}}
  @media (max-width:899px){.master-portrait{width:min(62vw,250px);margin-top:36px}}
  .master-portrait{
    position:relative;isolation:isolate;
    width:min(100%,360px);justify-self:center;
    aspect-ratio:5 / 9;
    /* 表装:本紙の外側に裂地 */
    border:clamp(14px,1.6vw,22px) solid transparent;
    border-top-width:clamp(34px,4vw,54px);border-bottom-width:clamp(48px,5.5vw,76px);
    background:
      radial-gradient(90% 60% at 50% 38%,oklch(99% .006 95),var(--c-paper-2)) padding-box,
      repeating-linear-gradient(45deg,oklch(36% .045 150) 0 3px,oklch(33% .042 150) 3px 6px) border-box;
    box-shadow:0 30px 60px -24px oklch(20% .03 160 / .45);
    display:grid;place-items:center;
  }
  /* 軸棒(上下) */
  .master-portrait::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:calc(clamp(34px,4vw,54px) * -1 - 8px) calc(clamp(14px,1.6vw,22px) * -1 - 12px) calc(clamp(48px,5.5vw,76px) * -1 - 12px);
    background:
      linear-gradient(oklch(26% .02 60),oklch(20% .02 60)) top / 100% 8px no-repeat,
      linear-gradient(oklch(30% .03 60),oklch(20% .02 60)) bottom / 100% 12px no-repeat;
    border-radius:4px;
  }
  .master-portrait::after{
    content:"家元";writing-mode:vertical-rl;
    font-family:var(--f-mincho);font-weight:600;font-size:clamp(3.6rem,2.6rem + 3vw,5.4rem);line-height:1;letter-spacing:.3em;
    color:var(--c-ink);opacity:.86;
    margin-top:-8%;
  }
  .master-portrait-seal{
    position:absolute;left:14%;bottom:12%;
    width:clamp(40px,3.2vw,52px);aspect-ratio:1;display:grid;place-items:center;
    background:var(--c-shu);color:var(--c-paper);border-radius:3px;
    font-family:var(--f-mincho);font-weight:700;font-size:clamp(1.3rem,1rem + .8vw,1.7rem);
    box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--c-shu) 65%,white);
    rotate:-3deg;
  }
  .master-role{display:block;margin-bottom:14px;color:var(--c-shu)}
  .master-name{font-size:clamp(2.4rem,1.8rem + 2.4vw,4.2rem);font-weight:500;letter-spacing:.14em;line-height:1.2}
  .master-intro{
    margin:clamp(28px,2.6vw,44px) 0;
    padding-left:clamp(20px,2vw,32px);border-left:2px solid var(--c-green);
    font-family:var(--f-mincho);font-size:var(--fs-md);line-height:2.25;color:var(--c-ink);
  }
  .master-credits{display:grid;border-top:1px solid var(--c-ink)}
  .master-credits li{
    position:relative;padding:13px 0 13px 1.6em;border-bottom:1px solid var(--c-line);
    font-size:var(--fs-sm);line-height:1.85;color:var(--c-ink-2);
  }
  .master-credits li::before{content:"";position:absolute;left:2px;top:1.35em;width:6px;height:6px;border-radius:50%;background:var(--c-gold)}

  /* ── Books(著書):本棚 ── */
  .books{background:var(--c-paper-2)}
  .books-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(18px,2.4vw,40px);perspective:1400px}
  @media (min-width:720px){.books-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (min-width:1180px){.books-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
  .book{display:flex;flex-direction:column;cursor:default}
  .book-cover{
    --cover:linear-gradient(160deg,oklch(42% .06 150),oklch(26% .04 158) 70%,oklch(20% .02 160));
    position:relative;aspect-ratio:3 / 4.2;margin-bottom:22px;
    display:grid;place-items:center;
    border-radius:2px 5px 5px 2px;
    background:var(--cover);
    transform:rotateY(-16deg);transform-origin:left center;transform-style:preserve-3d;
    box-shadow:
      1px 0 0 oklch(98% .01 95 / .25) inset,
      6px 6px 0 -2px oklch(97% .01 90),
      6px 6px 0 -1px var(--c-line-strong),
      18px 24px 36px -14px oklch(20% .03 160 / .55);
    transition:transform .8s var(--ease-out-expo),box-shadow .8s var(--ease-out-expo);
  }
  .book:hover .book-cover{transform:rotateY(0) translateY(-8px);box-shadow:1px 0 0 oklch(98% .01 95 / .25) inset,3px 3px 0 -1px oklch(97% .01 90),3px 3px 0 0 var(--c-line-strong),10px 34px 44px -16px oklch(20% .03 160 / .5)}
  .book:nth-child(2) .book-cover{--cover:linear-gradient(160deg,oklch(62% .08 75),oklch(44% .07 60))}
  .book:nth-child(3) .book-cover{--cover:linear-gradient(160deg,oklch(55% .15 34),oklch(38% .11 30))}
  .book:nth-child(4) .book-cover{--cover:linear-gradient(160deg,oklch(62% .1 128),oklch(36% .06 150))}
  .book:nth-child(5) .book-cover{--cover:linear-gradient(160deg,oklch(28% .03 250),oklch(18% .02 250))}
  .book:nth-child(6) .book-cover{--cover:linear-gradient(160deg,oklch(90% .02 90),oklch(80% .03 85))}
  .book-cover::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(to right,oklch(0% 0 0 / .28),oklch(100% 0 0 / .08) 60%,transparent);border-radius:2px 0 0 2px}
  .book-cover::after{content:"";position:absolute;inset:7% 8% 7% 14%;border:1px solid oklch(98% .01 95 / .28)}
  .book:nth-child(6) .book-cover::after{border-color:oklch(30% .02 90 / .25)}
  .book-cover-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;color:var(--c-paper);padding-left:6%}
  .book:nth-child(6) .book-cover-inner{color:var(--c-ink)}
  .book-cover-inner .bktitle{writing-mode:vertical-rl;font-family:var(--f-mincho);font-size:clamp(1rem,.85rem + .5vw,1.35rem);font-weight:600;letter-spacing:.28em;line-height:1.8}
  .book-cover-inner .bkmark{font-family:var(--f-latin);font-style:italic;font-size:.66rem;letter-spacing:.3em;color:var(--c-gold)}
  .book-name{font-family:var(--f-mincho);font-size:var(--fs-sm);font-weight:600;line-height:1.6;letter-spacing:.06em;color:var(--c-ink);margin-bottom:6px}
  .book-meta{font-size:var(--fs-2xs);letter-spacing:.1em;color:var(--c-ink-3);line-height:1.7}

  /* ── Voices ── */
  .voice-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2vw,32px)}
  @media (min-width:900px){.voice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .voice{
    position:relative;display:flex;flex-direction:column;
    padding:clamp(28px,2.6vw,44px);
    border-radius:var(--radius-lg);
    transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo);
  }
  .voice:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
  .voice::before{
    content:"";display:block;width:28px;height:2px;margin-bottom:22px;background:var(--c-shu);
  }
  .voice-text{flex:1;font-family:var(--f-mincho);font-size:var(--fs-md);line-height:2.1;color:var(--c-ink);margin-bottom:28px}
  .voice-meta{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--c-line)}
  .voice-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c-green-deep);color:var(--c-paper);font-family:var(--f-latin);font-size:1.25rem;font-weight:500}
  .voice-name{font-family:var(--f-mincho);font-size:var(--fs-sm);font-weight:600;color:var(--c-ink);letter-spacing:.08em}
  .voice-name small{display:block;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.14em;color:var(--c-ink-3)}

  /* ── Album:ベントーグリッド ── */
  .album-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
  .insta-handle{
    display:inline-flex;align-items:center;gap:.6em;padding:.6em 1.2em;border-radius:999px;
    border:1px solid var(--c-line-strong);
    font-family:var(--f-latin);font-size:1.05rem;font-weight:500;letter-spacing:.08em;
    color:var(--c-ink);text-decoration:none;
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft);
  }
  .insta-handle:hover{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
  .album-tabs{
    display:inline-flex;flex-wrap:wrap;gap:4px;margin-bottom:clamp(24px,2.4vw,40px);
    padding:4px;border-radius:999px;background:var(--c-paper-2);border:1px solid var(--c-line);
  }
  .album-tab{
    padding:.6em 1.2em;border:0;border-radius:999px;background:transparent;cursor:pointer;
    font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;color:var(--c-ink-2);
    transition:background-color .35s var(--ease-soft),color .35s var(--ease-soft);
  }
  @media (max-width:600px){
    .album-tabs{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}
    .album-tabs::-webkit-scrollbar{display:none}
    .album-tab{flex:none}
  }
  .album-tab small{margin-left:.6em;font-size:.72em;letter-spacing:.16em;color:var(--c-ink-3)}
  .album-tab:hover{color:var(--c-ink)}
  .album-tab.active{background:var(--c-ink);color:var(--c-paper)}
  .album-tab.active small{color:oklch(80% .02 110)}
  .album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(8px,1vw,16px)}
  .album-item{
    position:relative;overflow:hidden;aspect-ratio:1;border-radius:var(--radius);
    background:
      radial-gradient(circle at 30% 30%,oklch(98% .01 95 / .5),transparent 60%),
      repeating-linear-gradient(135deg,var(--c-paper-3) 0 1px,transparent 1px 12px),
      var(--c-paper-2);
  }
  .album-item:nth-child(1){grid-column:span 2;aspect-ratio:4 / 3}
  .album-item:nth-child(6){grid-column:span 2;aspect-ratio:2 / 1}
  @media (min-width:760px){
    .album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .album-item:nth-child(1){grid-row:span 2;aspect-ratio:1}
  }
  .album-item img{width:100%;height:100%;object-fit:cover;color:transparent;font-size:0;transition:transform 1.1s var(--ease-out-quart),filter .6s var(--ease-soft);filter:saturate(.92)}
  .album-item:hover img{transform:scale(1.05);filter:saturate(1.05)}
  .album-item-caption{
    position:absolute;inset:auto 0 0 0;padding:28px 16px 14px;
    background:linear-gradient(to top,oklch(15% .02 160 / .78),transparent);
    font-family:var(--f-mincho);font-size:var(--fs-sm);letter-spacing:.1em;color:var(--c-paper);
    opacity:0;transform:translateY(10px);
    transition:opacity .45s var(--ease-soft),transform .6s var(--ease-out-expo);
  }
  .album-item-caption small{display:block;font-family:var(--f-latin);font-style:italic;font-size:.85rem;letter-spacing:.14em;color:var(--c-leaf)}
  .album-item:hover .album-item-caption,.album-item:focus-within .album-item-caption{opacity:1;transform:none}
  @media (hover:none){.album-item-caption{opacity:1;transform:none}}

  /* ── Access ── */
  .access{background:var(--c-paper-2)}
  .access-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:stretch}
  @media (min-width:900px){.access-inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
  .access-info dl{padding:clamp(8px,1vw,14px) clamp(22px,2.4vw,40px)}
  .info-row{display:grid;grid-template-columns:clamp(84px,8vw,120px) minmax(0,1fr);gap:16px;padding:clamp(16px,1.6vw,24px) 0;border-bottom:1px solid var(--c-line)}
  .info-row:last-child{border-bottom:0}
  .info-row dt{padding-top:.3em}
  .info-row dd{font-size:var(--fs-md);line-height:1.85;color:var(--c-ink)}
  .info-row dd small{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--c-ink-3);letter-spacing:.06em}
  .map-visual{position:relative;overflow:hidden;min-height:340px;border-radius:var(--radius-lg);border:1px solid var(--c-line);background:var(--c-paper-3)}
  .map-visual iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.08) contrast(.96)}

  /* こどもページ:兄弟割引の案内カード(旧インラインstyleを置換) */
  .map-visual.promo-card{
    display:grid;place-items:center;text-align:center;
    padding:clamp(32px,4vw,64px);
    background:
      radial-gradient(60% 60% at 80% 10%,color-mix(in oklch,var(--c-leaf) 45%,transparent),transparent),
      var(--c-tint);
    border-color:color-mix(in oklch,var(--c-green) 18%,transparent);
  }
  .promo-en{margin-bottom:16px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.32em;color:var(--c-shu)}
  .promo-main{margin-bottom:16px;font-family:var(--f-mincho);font-size:clamp(1.35rem,1.1rem + 1vw,2rem);font-weight:500;line-height:1.75;letter-spacing:.1em;color:var(--c-ink)}
  .promo-note{font-size:var(--fs-sm);line-height:2;color:var(--c-ink-2)}

  /* ── Contact(トップ末尾) ── */
  .contact{
    position:relative;overflow:hidden;
    padding:var(--section-y) var(--pad-x);
    background:var(--c-green-deep);color:var(--c-paper);
  }
  .contact::before{
    content:"";position:absolute;right:-12vw;top:50%;translate:0 -50%;pointer-events:none;
    width:min(760px,90vw);aspect-ratio:1;border-radius:50%;
    border:1px solid oklch(98% .01 95 / .1);
    box-shadow:0 0 0 clamp(30px,4vw,60px) oklch(98% .01 95 / .012);
  }
  .contact .section-num{color:oklch(84% .03 120)}
  .contact .section-num::before{background:var(--c-leaf)}
  .contact .section-title{color:var(--c-paper)}
  .contact .section-title .jp{color:var(--c-leaf)}
  .contact-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:end}
  @media (min-width:900px){.contact-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
  .contact-body{font-family:var(--f-mincho);font-size:var(--fs-lg);line-height:2.15;letter-spacing:.08em;color:oklch(94% .012 95)}
  @media (max-width:600px){.contact-body{font-size:.94rem;letter-spacing:.03em}}
  .contact-small{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;font-family:var(--f-latin);font-size:1.05rem;letter-spacing:.1em;color:oklch(84% .03 110)}
  .contact-inner > div:last-child{display:grid;gap:12px}
  .btn-big{--btn-bg:var(--c-paper);--btn-fg:var(--c-green-deep);--btn-bg-h:var(--c-leaf);--btn-fg-h:var(--c-ink);font-size:var(--fs-md);padding-block:1.25em}
  .btn-big em{background:var(--c-green-deep);color:var(--c-paper)}
  .btn-big.sec{--btn-bg:transparent;--btn-fg:var(--c-paper);--btn-bd:oklch(98% .01 95 / .3);--btn-bg-h:oklch(98% .01 95 / .08);--btn-fg-h:var(--c-paper);--btn-bd-h:var(--c-leaf)}
  .btn-big.sec em{background:oklch(98% .01 95 / .12)}

  /* ── Footer ── */
  footer{
    position:relative;z-index:2;
    padding:clamp(64px,6vw,112px) var(--pad-x) max(28px,env(safe-area-inset-bottom));
    background:var(--c-night);color:oklch(86% .012 100);
  }
  .footer-top{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;
    padding-bottom:clamp(40px,4vw,72px);margin-bottom:28px;
    border-bottom:1px solid var(--c-line-light);
  }
  @media (min-width:900px){.footer-top{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
  .footer-brand{grid-column:1 / -1}
  @media (min-width:900px){.footer-brand{grid-column:auto}}
  .footer-brand h4{
    font-family:var(--f-mincho);font-weight:700;color:var(--c-paper);
    font-size:clamp(3.2rem,2rem + 5vw,6.4rem);line-height:1;letter-spacing:.14em;
    margin-bottom:18px;
  }
  .footer-brand .en{display:block;margin-bottom:16px;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.24em;color:var(--c-gold);text-transform:uppercase}
  .footer-brand p{max-width:26em;font-size:var(--fs-sm);line-height:2;color:oklch(80% .012 100)}
  .footer-col h5{margin-bottom:18px;color:var(--c-leaf)}
  .footer-col ul{display:grid;gap:10px}
  .footer-col li{font-size:var(--fs-sm);letter-spacing:.06em}
  .footer-col a{color:oklch(90% .01 100);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease-out-expo),color .3s var(--ease-soft)}
  .footer-col a:hover{color:var(--c-paper);background-size:100% 1px}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:var(--fs-2xs);letter-spacing:.2em;color:oklch(64% .015 120)}
}

/* ───────────────────────── pages: 下層ページ ───────────────────────── */
@layer pages {

  /* ── Page Hero:テキスト+掛け軸 ── */
  .page-hero{
    position:relative;overflow:hidden;
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(32px,6vw,120px);
    min-height:min(64svh,640px);
    padding:calc(var(--header-h) + clamp(48px,6vw,112px)) var(--pad-x) clamp(56px,6vw,104px);
    background:
      radial-gradient(70% 80% at 100% 0%,color-mix(in oklch,var(--c-tint) 90%,transparent),transparent 70%),
      var(--c-paper-2);
    border-bottom:1px solid var(--c-line);
  }
  .page-hero-inner{grid-column:1;grid-row:1;max-width:52em}
  body:has(.news-detail) .page-hero{min-height:0}
  body:has(.news-detail) .page-hero-kanji{width:clamp(84px,8vw,120px);font-size:clamp(2.2rem,1.6rem + 1.6vw,3.4rem)}
  .section:has(> .news-detail){padding-top:clamp(48px,5vw,88px)}
  .page-hero-kanji{
    grid-column:2;grid-row:1;align-self:center;
    position:relative;isolation:isolate;
    width:clamp(120px,13vw,200px);aspect-ratio:5 / 12;
    display:grid;place-items:center;
    border:clamp(8px,.9vw,12px) solid transparent;
    border-top-width:clamp(22px,2.2vw,32px);border-bottom-width:clamp(30px,3vw,44px);
    background:
      radial-gradient(90% 60% at 50% 40%,oklch(99% .006 95),var(--c-paper-2)) padding-box,
      repeating-linear-gradient(45deg,oklch(36% .045 150) 0 3px,oklch(33% .042 150) 3px 6px) border-box;
    box-shadow:0 28px 50px -24px oklch(20% .03 160 / .5);
    font-family:var(--f-mincho);font-weight:700;line-height:1;
    font-size:clamp(3.6rem,2.4rem + 3.8vw,6.6rem);color:var(--c-ink);
    user-select:none;
  }
  .page-hero-kanji::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    inset:calc(clamp(22px,2.2vw,32px) * -1 - 6px) calc(clamp(8px,.9vw,12px) * -1 - 9px) calc(clamp(30px,3vw,44px) * -1 - 9px);
    background:
      linear-gradient(oklch(26% .02 60),oklch(20% .02 60)) top / 100% 6px no-repeat,
      linear-gradient(oklch(30% .03 60),oklch(20% .02 60)) bottom / 100% 9px no-repeat;
    border-radius:3px;
  }
  .page-hero-kanji::after{
    content:"";position:absolute;left:18%;bottom:10%;
    width:clamp(16px,1.6vw,22px);aspect-ratio:1;border-radius:2px;
    background:var(--c-shu);box-shadow:inset 0 0 0 2px color-mix(in oklch,var(--c-shu) 65%,white);rotate:-4deg;
  }
  .breadcrumb{
    display:flex;align-items:center;flex-wrap:wrap;gap:.4em .8em;
    margin-bottom:clamp(28px,3vw,48px);
    font-size:var(--fs-xs);letter-spacing:.12em;color:var(--c-ink-3);
  }
  .breadcrumb a{color:inherit;text-decoration:none;transition:color .3s var(--ease-soft)}
  .breadcrumb a:hover{color:var(--c-shu)}
  .breadcrumb .sep{opacity:.5}
  .breadcrumb .current{color:var(--c-ink)}
  .page-title{
    font-size:var(--fs-3xl);font-weight:500;line-height:1.28;letter-spacing:.06em;color:var(--c-ink);
    margin:0 0 clamp(22px,2vw,34px);
  }
  .page-title .jp{display:block;margin-top:.9em;font-family:var(--f-gothic);font-size:max(.72rem,.2em);font-weight:500;letter-spacing:.42em;color:var(--c-green)}
  .page-lead{max-width:40em;font-size:var(--fs-md);line-height:2.1;color:var(--c-ink-2)}
  @media (max-width:767px){
    .page-hero{display:block;min-height:0;padding-top:calc(var(--header-h) + 36px)}
    .page-hero-kanji{position:absolute;right:var(--pad-x);top:calc(var(--header-h) + 34px);width:62px;font-size:2rem;border-width:5px;border-top-width:14px;border-bottom-width:18px}
    .page-hero-kanji::before{inset:-18px -9px -22px}
    .page-hero-kanji::after{width:9px;left:14%}
    .page-hero .breadcrumb,.page-hero .section-num,.page-hero .page-title{padding-right:84px}
  }

  /* ── Sibling nav ── */
  .sibling-nav{
    display:grid;grid-template-columns:minmax(0,1fr);
    padding:0 var(--pad-x);
    background:var(--c-paper);
    border-top:1px solid var(--c-line);
  }
  @media (min-width:720px){.sibling-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .sibling-nav a{
    position:relative;
    display:grid;gap:4px;
    padding:clamp(32px,4vw,64px) clamp(56px,5vw,88px);
    text-decoration:none;
    transition:background-color .4s var(--ease-soft);
  }
  .sibling-nav a:hover{background:var(--c-paper-2)}
  .sibling-nav a small{font-size:var(--fs-2xs);font-weight:500;letter-spacing:.3em;color:var(--c-ink-3)}
  .sibling-nav a strong{font-family:var(--f-mincho);font-size:var(--fs-xl);font-weight:500;letter-spacing:.08em;color:var(--c-ink)}
  .sibling-nav .arrow{
    position:absolute;top:50%;translate:0 -50%;
    display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--c-line-strong);font-size:.9rem;color:var(--c-ink);
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),transform var(--dur-quick) var(--ease-out-expo),border-color .3s var(--ease-soft);
  }
  .sibling-nav .sn-prev{padding-left:clamp(76px,6vw,104px)}
  .sibling-nav .sn-prev .arrow{left:clamp(20px,2vw,36px)}
  .sibling-nav .sn-next{text-align:right;justify-items:end;padding-right:clamp(76px,6vw,104px)}
  .sibling-nav .sn-next .arrow{right:clamp(20px,2vw,36px)}
  @media (min-width:720px){.sibling-nav .sn-next{border-left:1px solid var(--c-line)}}
  @media (max-width:719px){.sibling-nav .sn-next{border-top:1px solid var(--c-line)}}
  .sibling-nav a:hover .arrow{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
  .sibling-nav .sn-prev:hover .arrow{transform:translateX(-4px)}
  .sibling-nav .sn-next:hover .arrow{transform:translateX(4px)}
  .sibling-nav .sn-disabled{opacity:.3;pointer-events:none}

  /* ── Sub-page CTA ── */
  .page-cta{
    position:relative;overflow:hidden;isolation:isolate;
    padding:clamp(88px,8vw,152px) var(--pad-x);
    background:var(--c-green-deep);color:var(--c-paper);text-align:center;
  }
  .page-cta::before{
    content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;pointer-events:none;
    width:min(640px,120vw);aspect-ratio:1;border-radius:50%;
    border:1px solid oklch(98% .01 95 / .12);
    box-shadow:0 0 0 clamp(26px,3vw,48px) oklch(98% .01 95 / .015);
    background:radial-gradient(closest-side,color-mix(in oklch,var(--c-leaf) 14%,transparent),transparent);
  }
  .page-cta-inner{max-width:40em;margin-inline:auto}
  .page-cta small{display:block;margin-bottom:18px;color:var(--c-leaf)}
  .page-cta h3{font-size:var(--fs-2xl);line-height:1.6;letter-spacing:.1em;color:var(--c-paper);margin-bottom:22px}
  .page-cta p{font-size:var(--fs-sm);line-height:2.1;color:oklch(88% .015 110);margin-bottom:clamp(32px,3vw,48px)}
  .btn-cta{padding:1.1em 2.6em}

  /* ── Heritage ── */
  .heritage-timeline{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2vw,32px);margin-bottom:clamp(56px,5vw,96px)}
  @media (min-width:800px){.heritage-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .heritage-era{position:relative;padding:clamp(28px,2.6vw,44px);border-radius:var(--radius-lg);transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo)}
  .heritage-era:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
  .heritage-era::before{content:"";position:absolute;left:clamp(28px,2.6vw,44px);top:-1px;width:48px;height:3px;background:var(--c-shu)}
  .heritage-year{font-family:var(--f-latin);font-weight:300;font-size:clamp(3.6rem,2.8rem + 2.6vw,5.6rem);line-height:1;letter-spacing:-.01em;color:var(--c-green-deep);font-variant-numeric:lining-nums}
  .heritage-gen{margin:12px 0 20px}
  .heritage-era h4{font-size:var(--fs-xl);letter-spacing:.14em;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--c-line)}
  .heritage-era p{font-size:var(--fs-sm);line-height:2.05;color:var(--c-ink-2)}
  .heritage-values{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--c-ink)}
  @media (min-width:800px){.heritage-values{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .hv-item{padding:clamp(28px,2.6vw,44px) clamp(4px,2vw,36px) clamp(28px,2.6vw,44px) 0;border-bottom:1px solid var(--c-line)}
  @media (min-width:800px){.hv-item{border-bottom:0;padding-left:clamp(20px,2vw,36px)}.hv-item + .hv-item{border-left:1px solid var(--c-line)}.hv-item:first-child{padding-left:0}}
  .hv-kan{
    display:grid;place-items:center;width:clamp(56px,4.4vw,72px);aspect-ratio:1;margin-bottom:20px;
    border-radius:4px;background:var(--c-shu);color:var(--c-paper);
    font-family:var(--f-mincho);font-weight:700;font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);line-height:1;
    box-shadow:inset 0 0 0 3px color-mix(in oklch,var(--c-shu) 60%,white);
  }
  .hv-item h5{font-size:var(--fs-lg);letter-spacing:.14em;margin-bottom:10px}
  .hv-item p{font-size:var(--fs-sm);line-height:2.05;color:var(--c-ink-2)}

  /* ── Courses ── */
  .course-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px)}
  @media (min-width:900px){.course-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .course{
    container-type:inline-size;
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;
    padding:clamp(28px,2.6vw,40px);
    border-radius:var(--radius-lg);cursor:pointer;
    transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo),border-color .4s var(--ease-soft);
  }
  .course::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--c-green);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out-expo)}
  .course:hover,.course.active{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in oklch,var(--c-green) 30%,transparent)}
  .course:hover::before,.course.active::before{transform:scaleX(1)}
  .course-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
  .course-label{margin-bottom:10px;color:var(--c-shu)}
  .course-name{font-family:var(--f-mincho);font-size:var(--fs-xl);font-weight:500;line-height:1.35;letter-spacing:.08em;color:var(--c-ink)}
  .course-name .sub{display:block;margin-top:8px;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.2em;color:var(--c-ink-3)}
  .course-badge{
    flex:none;width:64px;aspect-ratio:1;border-radius:50%;
    display:grid;place-content:center;text-align:center;
    background:var(--c-green-deep);color:var(--c-paper);
    font-size:.6rem;letter-spacing:.08em;line-height:1.2;
  }
  .course-badge strong{display:block;font-family:var(--f-latin);font-size:1.45rem;font-weight:500;letter-spacing:0;line-height:1}
  .course-badge.kami{background:var(--c-shu)}
  .course-badge.kami strong{font-family:var(--f-mincho);font-size:1.1rem}
  .course-desc{flex:1;margin-bottom:22px;font-size:var(--fs-sm);line-height:2.05;color:var(--c-ink-2)}
  .course-meta{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--c-line)}
  .course-meta span{padding:.3em .9em;border-radius:999px;background:var(--c-paper-2);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.1em;color:var(--c-ink-2)}
  .course-price{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
  .course-price .price{font-size:clamp(2rem,1.7rem + 1vw,2.6rem)}
  .course-link{
    display:inline-flex;align-items:center;gap:.6em;padding:.6em 1.1em;border-radius:999px;
    border:1px solid var(--c-line-strong);
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;color:var(--c-green-deep);text-decoration:none;
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft);
  }
  .course-link::after{content:"→";transition:transform var(--dur-quick) var(--ease-out-expo)}
  .course:hover .course-link,.course-link:hover{background:var(--c-green-deep);border-color:var(--c-green-deep);color:var(--c-paper)}
  .course:hover .course-link::after{transform:translateX(3px)}
  @container (max-width:300px){
    .course-badge{width:52px}
    .course-price{flex-direction:column;align-items:flex-start}
  }

  /* ── Enrollment ── */
  .enroll-flow{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,24px);margin-bottom:clamp(32px,3vw,56px);counter-reset:ef}
  @media (min-width:800px){.enroll-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px)}}
  .ef-step{position:relative;padding:clamp(28px,2.6vw,40px);border-radius:var(--radius-lg)}
  @media (min-width:800px){
    .ef-step:not(:last-child)::after{
      content:"→";position:absolute;top:50%;right:calc(clamp(28px,3vw,48px) / -2);translate:50% -50%;z-index:1;
      display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
      background:var(--c-ink);color:var(--c-paper);font-size:.8rem;
    }
  }
  .ef-no{margin-bottom:18px;font-family:var(--f-latin);font-size:clamp(2.6rem,2rem + 1.6vw,3.6rem);font-weight:400;line-height:1;color:var(--c-green-deep)}
  .ef-step h4{font-size:var(--fs-lg);letter-spacing:.12em;margin-bottom:12px}
  .ef-step p{font-size:var(--fs-sm);line-height:2.05;color:var(--c-ink-2)}
  .fee-table{width:100%;border-top:1px solid var(--c-ink)}
  .fee-table tr{border-bottom:1px solid var(--c-line)}
  .fee-table th,.fee-table td{padding:clamp(20px,2vw,30px) 8px;text-align:left;vertical-align:baseline}
  .fee-table th{width:30%;font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:600;letter-spacing:.12em;color:var(--c-ink)}
  .fee-table td{font-size:var(--fs-sm);color:var(--c-ink-2)}
  .fee-table td strong{margin-right:.2em;font-family:var(--f-latin);font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem);font-weight:500;line-height:1;color:var(--c-ink)}
  .fee-table td small{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--c-ink-3);letter-spacing:.06em}
  @media (max-width:600px){
    .fee-table tr{display:block;padding-block:18px}
    .fee-table th,.fee-table td{display:block;width:auto;padding:0}
    .fee-table th{margin-bottom:6px;font-size:var(--fs-sm)}
  }

  /* ── FAQ ── */
  @media (min-width:1024px){
    .faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,120px);align-items:start}
    .faq > .section-header{position:sticky;top:calc(var(--header-h) + 32px);margin-bottom:0}
  }
  .faq-list{border-top:1px solid var(--c-ink)}
  .faq-item{border-bottom:1px solid var(--c-line);transition:background-color .4s var(--ease-soft)}
  .faq-item[open]{background:color-mix(in oklch,var(--c-paper-2) 70%,transparent)}
  .faq-item summary{
    display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px);
    padding:clamp(20px,2vw,28px) clamp(4px,1vw,16px);
    list-style:none;cursor:pointer;
    font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:600;line-height:1.7;letter-spacing:.06em;color:var(--c-ink);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .q-mark{flex:none;font-family:var(--f-latin);font-style:italic;font-size:1.5em;font-weight:500;line-height:1;color:var(--c-shu)}
  .faq-item summary .q-txt{flex:1;text-wrap:pretty}
  .faq-item summary::after{
    content:"";flex:none;align-self:center;width:28px;height:28px;border-radius:50%;
    border:1px solid var(--c-line-strong);
    background:
      linear-gradient(currentColor,currentColor) center / 10px 1.5px no-repeat,
      linear-gradient(currentColor,currentColor) center / 1.5px 10px no-repeat;
    transition:transform .5s var(--ease-out-expo),background-color .3s var(--ease-soft),color .3s var(--ease-soft);
  }
  .faq-item[open] summary::after{transform:rotate(45deg);background-color:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
  .faq-item summary:hover .q-txt{color:var(--c-green-deep)}
  .faq-answer{padding:0 clamp(16px,4vw,64px) clamp(24px,2.2vw,32px) calc(clamp(4px,1vw,16px) + 1.5em + clamp(14px,1.6vw,24px));font-size:var(--fs-sm);line-height:2.1;color:var(--c-ink-2)}
  /* 開閉アニメーション(::details-content + interpolate-size 対応ブラウザのみ) */
  @supports selector(::details-content){
    .faq-item::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .55s var(--ease-out-expo),opacity .4s var(--ease-soft),content-visibility .55s allow-discrete}
    .faq-item[open]::details-content{block-size:auto;opacity:1}
  }

  /* ── News detail ── */
  .news-detail{max-width:780px;margin-inline:auto}
  .news-detail .nd-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:20px}
  .news-detail .nd-date{font-family:var(--f-latin);font-size:1.15rem;font-weight:500;letter-spacing:.08em;color:var(--c-ink-3)}
  .news-detail .nd-cat{background:var(--c-tint);color:var(--c-green-deep);border:1px solid color-mix(in oklch,var(--c-green) 22%,transparent)}
  .news-detail .nd-title{font-size:var(--fs-2xl);line-height:1.55;letter-spacing:.06em;margin-bottom:clamp(28px,2.6vw,40px);padding-bottom:clamp(22px,2vw,30px);border-bottom:1px solid var(--c-ink)}
  .news-detail .nd-body{font-size:var(--fs-md);line-height:2.15;color:var(--c-ink-2)}
  .news-detail .nd-body p{margin:0 0 1.3em}
  .news-detail .nd-body a{color:var(--c-shu)}
  .news-detail .nd-related{margin-top:clamp(32px,3vw,48px);padding:22px 26px;border-radius:var(--radius);background:var(--c-paper-2);border-left:3px solid var(--c-green)}
  .news-detail .nd-related small{display:block;margin-bottom:8px}
  .news-detail .nd-related a{color:var(--c-green-deep);font-size:var(--fs-sm);word-break:break-all}
  .news-detail .nd-back{
    display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(36px,3vw,56px);
    padding:.8em 1.5em;border-radius:999px;border:1px solid var(--c-line-strong);
    font-size:var(--fs-sm);font-weight:500;letter-spacing:.14em;color:var(--c-ink);text-decoration:none;
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft);
  }
  .news-detail .nd-back:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
  .news-detail .nd-state{padding:clamp(48px,5vw,80px) 20px;text-align:center;color:var(--c-ink-3);line-height:1.9}
  .news-detail .nd-state strong{display:block;margin-bottom:10px;font-family:var(--f-mincho);font-size:var(--fs-xl);font-weight:500;color:var(--c-ink)}
}

/* ───────────────────────── pages: 予約・申込・お問い合わせ ───────────────────────── */
@layer pages {

  /* ── Trial / Workshop 概要 ── */
  .trial-overview{background:var(--c-paper-2)}
  .tr-meta{
    display:grid;grid-template-columns:minmax(0,1fr);
    margin-bottom:clamp(32px,3vw,56px);
    border-top:1px solid var(--c-ink);
  }
  @media (min-width:560px){.tr-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:1024px){.tr-meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .tr-meta-item{
    display:flex;flex-direction:column;
    padding:clamp(24px,2.4vw,36px) clamp(4px,1.6vw,28px) clamp(24px,2.4vw,36px) 0;
    background:none;border:0;border-radius:0;border-bottom:1px solid var(--c-line);
  }
  @media (min-width:560px){.tr-meta-item:nth-child(even){padding-left:clamp(16px,1.6vw,28px);border-left:1px solid var(--c-line)}}
  @media (min-width:1024px){
    .tr-meta-item{border-bottom:0}
    .tr-meta-item + .tr-meta-item{padding-left:clamp(16px,1.6vw,28px);border-left:1px solid var(--c-line)}
  }
  .tr-meta-item .num{margin-bottom:16px}
  .tr-meta-item h4{font-size:var(--fs-md);letter-spacing:.14em;margin-bottom:8px}
  .tr-meta-item .big{
    display:block;margin-bottom:14px;
    font-family:var(--f-latin);font-size:clamp(2.6rem,2rem + 1.8vw,3.8rem);font-weight:500;line-height:1.05;letter-spacing:0;color:var(--c-green-deep);
  }
  .tr-meta-item .big:not(:has(.unit)){font-family:var(--f-mincho);font-size:clamp(2rem,1.6rem + 1.4vw,2.8rem);font-weight:600;letter-spacing:.08em}
  .tr-meta-item .big .sup{font-size:.5em;margin-right:.08em;vertical-align:.3em}
  .tr-meta-item .big .unit{margin-left:.35em;font-family:var(--f-gothic);font-size:max(.78rem,.26em);font-weight:500;letter-spacing:.12em;color:var(--c-ink-3)}
  .tr-meta-item p{font-size:var(--fs-sm);line-height:2;color:var(--c-ink-2)}

  .tr-includes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
  @media (min-width:800px){.tr-includes{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .tr-inc-item{
    display:flex;gap:18px;align-items:flex-start;
    padding:clamp(22px,2vw,32px);border-radius:var(--radius-lg);
    transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo);
  }
  .tr-inc-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
  .tr-inc-icon{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--c-tint);color:var(--c-green-deep);border:1px solid color-mix(in oklch,var(--c-green) 20%,transparent)}
  .tr-inc-icon svg{width:46%;height:46%}
  .tr-inc-body h5{font-size:var(--fs-md);letter-spacing:.1em;margin-bottom:6px}
  .tr-inc-body p{font-size:var(--fs-sm);line-height:1.95;color:var(--c-ink-2)}

  /* ── 予約ページ:2択カード(reserve) ── */
  .trial-overview .trial-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,36px)}
  @media (min-width:900px){.trial-overview .trial-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .trial-overview .trial-calendar{
    display:flex;flex-direction:column;
    padding:clamp(28px,3vw,48px);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
    transition:transform .6s var(--ease-out-expo),box-shadow .6s var(--ease-out-expo);
  }
  .trial-overview .trial-calendar:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
  .trial-overview .trial-calendar .cal-header{margin-bottom:24px}
  .trial-overview .trial-calendar .cal-header h4{font-size:var(--fs-xl)}
  .trial-overview .trial-calendar .trial-highlights{flex:1}
  .trial-overview .btn-trial{margin-top:clamp(22px,2vw,32px) !important}

  /* ── 日程選択 ── */
  .trial-select{background:var(--c-paper)}
  .slot-legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:clamp(20px,2vw,32px);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--c-ink-2)}
  .slot-legend span{display:inline-flex;align-items:center;gap:8px}
  .slot-legend span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-green)}
  .slot-legend span.few::before{background:var(--c-shu)}
  .slot-legend span.full::before{background:var(--c-line-strong)}
  .slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(10px,1.2vw,18px)}
  .slot-card{
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;gap:12px;
    min-height:176px;padding:22px 24px;
    border-radius:var(--radius-lg);cursor:pointer;
    transition:transform .5s var(--ease-out-expo),box-shadow .5s var(--ease-out-expo),border-color .3s var(--ease-soft),background-color .3s var(--ease-soft);
  }
  .slot-card:hover:not(.full):not(.selected){transform:translateY(-3px);border-color:var(--c-line-strong);box-shadow:var(--shadow-1)}
  .slot-card.selected{border-color:var(--c-green-deep);background:var(--c-tint);box-shadow:0 0 0 1px var(--c-green-deep),var(--shadow-1)}
  .slot-check{
    position:absolute;top:18px;right:18px;width:26px;height:26px;border-radius:50%;
    display:grid;place-items:center;border:1.5px solid var(--c-line-strong);background:var(--c-paper);
    transition:background-color .3s var(--ease-soft),border-color .3s var(--ease-soft),transform .5s var(--ease-out-expo);
  }
  .slot-check svg{width:13px;height:13px;color:transparent;stroke-width:3}
  .slot-card.selected .slot-check{background:var(--c-green-deep);border-color:var(--c-green-deep);transform:scale(1.08)}
  .slot-card.selected .slot-check svg{color:var(--c-paper)}
  .slot-card.full{opacity:.5;cursor:not-allowed;background:var(--c-paper-2)}
  .slot-card.full::before{content:"満席";position:absolute;top:18px;right:18px;padding:.2em .8em;border-radius:999px;background:var(--c-ink-3);color:var(--c-paper);font-size:var(--fs-2xs);letter-spacing:.2em}
  .slot-card.full .slot-check{display:none}
  .slot-date{display:flex;align-items:baseline;gap:4px;font-family:var(--f-latin);color:var(--c-ink);font-variant-numeric:lining-nums}
  .slot-date .m{font-size:1.05rem;letter-spacing:.1em;color:var(--c-ink-3)}
  .slot-date .sep{color:var(--c-line-strong)}
  .slot-date .d{font-size:2.6rem;font-weight:500;line-height:1}
  .slot-date .w{margin-left:8px;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.16em;color:var(--c-ink-3)}
  .slot-time{padding-top:12px;border-top:1px solid var(--c-line);font-family:var(--f-mincho);font-size:var(--fs-lg);font-weight:600;letter-spacing:.08em;color:var(--c-ink);font-variant-numeric:tabular-nums}
  .slot-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
  .slot-avail{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:500;letter-spacing:.1em;color:var(--c-green)}
  .slot-avail::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .slot-avail.few{color:var(--c-shu)}
  .slot-season{font-family:var(--f-mincho);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--c-ink-3)}
  .slot-state{
    grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:16px;
    padding:clamp(44px,4vw,72px) 24px;border:1px dashed var(--c-line-strong);border-radius:var(--radius-lg);
    text-align:center;font-size:var(--fs-sm);line-height:2;color:var(--c-ink-3);
  }
  .slot-state-dot{width:10px;height:10px;border-radius:50%;background:var(--c-green);animation:slotPulse 1.2s ease-in-out infinite}
  @keyframes slotPulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
  .slot-error{border-color:color-mix(in oklch,var(--c-shu) 50%,transparent);color:var(--c-shu)}
  .slot-error p{color:var(--c-ink-2)}
  .btn-retry{--btn-bg:transparent;--btn-fg:var(--c-green-deep);--btn-bd:var(--c-line-strong);--btn-bg-h:var(--c-green-deep);--btn-fg-h:var(--c-paper);padding:.8em 1.8em}

  /* ── 選択中バー ── */
  .sel-bar{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
    max-width:880px;margin:0 auto clamp(24px,2.4vw,40px);
    padding:18px 26px;border-radius:999px;
    background:var(--c-green-deep);color:var(--c-paper);
    transition:background-color .4s var(--ease-soft),box-shadow .4s var(--ease-soft);
  }
  .sel-bar-info{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;min-width:0}
  .sel-bar-label{color:var(--c-leaf)}
  .sel-bar-detail{font-family:var(--f-mincho);font-size:var(--fs-lg);letter-spacing:.08em}
  .sel-bar-detail em{font-style:normal;font-family:var(--f-latin);font-size:1.2em;font-weight:500;color:var(--c-leaf);margin:0 .2em}
  .sel-bar-change{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.24em;color:var(--c-leaf);text-decoration:none;padding:.5em 1em;border-radius:999px;border:1px solid oklch(98% .01 95 / .3);transition:background-color .3s var(--ease-soft)}
  .sel-bar-change:hover{background:oklch(98% .01 95 / .1)}
  .sel-bar.empty{background:transparent;color:var(--c-ink-3);border:1px dashed var(--c-line-strong)}
  .sel-bar.empty .sel-bar-label{color:var(--c-ink-3)}
  .sel-bar.empty .sel-bar-detail{font-family:var(--f-gothic);font-size:var(--fs-sm);color:var(--c-ink-3)}
  .sel-bar.empty .sel-bar-change{display:none}
  @media (max-width:640px){.sel-bar{border-radius:var(--radius-lg)}}

  /* ── フォーム ── */
  .contact-form-section{background:var(--c-paper-2)}
  .contact-form-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
  @media (min-width:1024px){.contact-form-inner{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
  /* 予約・申込ページは1カラム中央寄せ(旧インラインstyleの意図を踏襲) */
  .contact-form-inner:not(:has(.contact-aside)){grid-template-columns:minmax(0,1fr) !important;max-width:880px;margin-inline:auto}

  .form-card{position:relative;padding:clamp(28px,4vw,64px);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
  .form-intro{margin-bottom:clamp(28px,2.6vw,44px);padding-bottom:clamp(22px,2vw,30px);border-bottom:1px solid var(--c-line);font-size:var(--fs-sm);line-height:2.05;color:var(--c-ink-2)}
  .form-intro small{display:block;margin-bottom:10px;color:var(--c-shu)}
  .form-group{margin-bottom:clamp(24px,2.2vw,34px)}
  .form-group > label,.form-label{
    display:flex;align-items:center;gap:10px;margin-bottom:12px;
    font-size:var(--fs-sm);font-weight:700;letter-spacing:.12em;color:var(--c-ink);
  }
  .form-label .req,.form-label .opt{padding:.1em .7em;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .form-label .req{background:color-mix(in oklch,var(--c-shu) 10%,var(--c-paper));color:var(--c-shu)}
  .form-label .opt{background:var(--c-paper-2);color:var(--c-ink-3)}
  .form-label-note{display:block;margin-top:10px;font-size:var(--fs-xs);line-height:1.8;color:var(--c-ink-3);letter-spacing:.06em}
  .form-label-note a{color:var(--c-shu) !important}

  .form-input,.form-textarea,.form-select{
    width:100%;padding:14px 18px;
    border:1px solid var(--c-line-strong);border-radius:var(--radius);
    background:var(--c-paper);
    font-size:max(16px,var(--fs-md));letter-spacing:.04em;color:var(--c-ink);
    transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft),background-color .3s var(--ease-soft);
  }
  .form-input::placeholder,.form-textarea::placeholder{color:var(--c-ink-3);opacity:.6}
  .form-input:hover,.form-textarea:hover,.form-select:hover{border-color:var(--c-ink-3)}
  .form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--c-green-deep);background:white;box-shadow:0 0 0 4px color-mix(in oklch,var(--c-leaf) 45%,transparent)}
  .form-input:user-invalid,.form-textarea:user-invalid{border-color:var(--c-shu);box-shadow:0 0 0 4px color-mix(in oklch,var(--c-shu) 12%,transparent)}
  .form-textarea{resize:vertical;min-height:160px;line-height:1.9;field-sizing:content;max-height:60vh}
  .form-select{
    appearance:none;cursor:pointer;padding-right:48px;
    background:var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23283d2b' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 20px center / 12px 8px;
  }
  .form-row{display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(16px,1.6vw,24px)}
  @media (min-width:720px){.form-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

  .form-radio-group{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  @media (min-width:560px){.form-radio-group{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .form-radio-item{position:relative}
  .form-radio-item input{position:absolute;opacity:0;pointer-events:none}
  .form-radio-item > label{
    display:flex;align-items:center;gap:12px;height:100%;
    padding:14px 18px;border:1px solid var(--c-line-strong);border-radius:var(--radius);
    background:var(--c-paper);cursor:pointer;
    font-size:var(--fs-sm);font-weight:500;letter-spacing:.06em;color:var(--c-ink-2);
    transition:border-color .3s var(--ease-soft),background-color .3s var(--ease-soft),color .3s var(--ease-soft);
  }
  .form-radio-item > label::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--c-ink-3);background:var(--c-paper);transition:all .3s var(--ease-soft)}
  .form-radio-item:has(input:checked) > label{border-color:var(--c-green-deep);background:var(--c-tint);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-green-deep)}
  .form-radio-item input:checked + label::before{border-color:var(--c-green-deep);background:var(--c-green-deep);box-shadow:inset 0 0 0 3.5px var(--c-paper)}
  .form-radio-item input:focus-visible + label{outline:2px solid var(--c-shu);outline-offset:2px}
  .form-conditional{display:none;margin-top:16px;padding:20px;border-left:3px solid var(--c-gold);background:var(--c-paper-2)}
  .form-conditional.show{display:block;animation:fadeDown .5s var(--ease-out-expo) both}
  @keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}}

  .form-privacy-box{
    max-height:190px;overflow-y:auto;margin-bottom:14px;padding:20px 22px;
    border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-paper-2);
    font-size:var(--fs-xs);line-height:2;color:var(--c-ink-2);
    scrollbar-width:thin;scrollbar-color:var(--c-line-strong) transparent;
  }
  .form-privacy-box h5{margin-bottom:8px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em}
  .form-privacy-box p + p{margin-top:10px}
  .form-checkbox{
    display:flex;gap:12px;align-items:flex-start;
    padding:16px 18px;border:1px solid var(--c-line-strong);border-radius:var(--radius);background:var(--c-paper);
    cursor:pointer;transition:border-color .3s var(--ease-soft),background-color .3s var(--ease-soft);
  }
  .form-checkbox:has(input:checked){border-color:var(--c-green-deep);background:var(--c-tint)}
  .form-checkbox input{flex:none;width:18px;height:18px;margin-top:.3em;accent-color:var(--c-green-deep);cursor:pointer}
  .form-checkbox label{font-size:var(--fs-sm);line-height:1.8;color:var(--c-ink);cursor:pointer}

  .counter-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
  .counter{display:inline-flex;align-items:center;padding:4px;border:1px solid var(--c-line-strong);border-radius:999px;background:var(--c-paper)}
  .counter button{
    width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;
    font-size:1.25rem;color:var(--c-green-deep);
    transition:background-color .3s var(--ease-soft),color .3s var(--ease-soft);
  }
  .counter button:hover:not(:disabled){background:var(--c-green-deep);color:var(--c-paper)}
  .counter button:disabled{opacity:.25;cursor:not-allowed}
  .counter-value{min-width:56px;text-align:center;font-family:var(--f-latin);font-size:1.7rem;font-weight:500;line-height:1;color:var(--c-ink);font-variant-numeric:tabular-nums}
  .counter-note{font-size:var(--fs-xs);line-height:1.8;color:var(--c-ink-3)}

  /* 確認ブロック(旧インラインstyleを置換) */
  .form-summary-head{margin:clamp(36px,3.4vw,56px) 0 18px !important;padding-top:28px;border-top:1px solid var(--c-line)}
  .form-summary-head .section-num{margin-bottom:10px}
  .form-summary-head h3{font-size:var(--fs-lg);letter-spacing:.12em}
  .trial-summary{display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;margin-bottom:16px;padding:6px 24px;border-radius:var(--radius);background:var(--c-paper-2)}
  @media (min-width:640px){.trial-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .ts-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--c-line)}
  .ts-row:last-child{border-bottom:0}
  @media (min-width:640px){.trial-summary > .ts-row:nth-last-child(2):nth-child(odd){border-bottom:0}}
  .ts-row[hidden]{display:none}
  .ts-row dd{text-align:right;font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:600;color:var(--c-ink)}
  .ts-row dd small{display:block;font-family:var(--f-gothic);font-size:var(--fs-2xs);font-weight:400;color:var(--c-ink-3)}
  .ts-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;padding:20px 26px;border-radius:var(--radius);background:var(--c-green-deep);color:var(--c-paper)}
  .ts-total dt{color:var(--c-leaf)}
  .ts-total dd{font-family:var(--f-latin);font-size:clamp(2.2rem,1.8rem + 1.2vw,3rem);font-weight:500;line-height:1}
  .ts-total dd .yen{font-size:.55em;margin-right:.1em}
  .ts-total dd .unit{margin-left:.5em;font-family:var(--f-gothic);font-size:.72rem;letter-spacing:.14em;color:oklch(86% .02 110)}

  .form-submit{width:100%;padding:1.3em 2em;font-size:var(--fs-md);letter-spacing:.3em;box-shadow:0 14px 34px -14px color-mix(in oklch,var(--c-shu) 80%,transparent)}
  .form-submit:disabled{--btn-bg:var(--c-ink-3);opacity:.6;cursor:not-allowed;box-shadow:none}
  .form-submit .arr{transition:transform var(--dur-quick) var(--ease-out-expo)}
  .form-submit:hover .arr{transform:translateX(4px)}
  .form-submit .spinner{display:none;width:16px;height:16px;border:2px solid oklch(98% .01 95 / .3);border-top-color:var(--c-paper);border-radius:50%;animation:spin .8s linear infinite}
  .form-submit.loading .spinner{display:inline-block}
  .form-submit.loading .arr{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  .form-footnote{margin-top:16px;text-align:center;font-size:var(--fs-xs);line-height:2;letter-spacing:.06em;color:var(--c-ink-3)}
  .form-error-banner{margin:18px 0;padding:16px 20px;border-radius:var(--radius);border:1px solid color-mix(in oklch,var(--c-shu) 40%,transparent);border-left:4px solid var(--c-shu);background:color-mix(in oklch,var(--c-shu) 7%,var(--c-paper));font-size:var(--fs-sm);line-height:1.9;color:var(--c-shu-deep)}

  /* ワークショップ日程セレクタ */
  .ws-slot-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  @media (min-width:720px){.ws-slot-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .ws-slot-option{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:16px 20px;border:1px solid var(--c-line-strong);border-radius:var(--radius);
    background:var(--c-paper);cursor:pointer;text-align:left;
    transition:transform var(--dur-quick) var(--ease-out-expo),border-color .3s var(--ease-soft),background-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft);
  }
  .ws-slot-option:hover:not(:disabled){transform:translateY(-2px);border-color:var(--c-green-deep)}
  .ws-slot-option.selected{border-color:var(--c-green-deep);background:var(--c-tint);box-shadow:inset 0 0 0 1px var(--c-green-deep)}
  .ws-slot-option .wso-date{font-family:var(--f-mincho);font-size:var(--fs-md);font-weight:600;letter-spacing:.06em;line-height:1.5;color:var(--c-ink)}
  .ws-slot-option .wso-date em{font-style:normal;font-family:var(--f-latin);font-size:1.35em;font-weight:500;margin-right:4px}
  .ws-slot-option .wso-meta{flex:none;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.12em;white-space:nowrap;color:var(--c-green)}
  .ws-slot-option .wso-meta.few{color:var(--c-shu)}
  .ws-slot-option .wso-meta.full{color:var(--c-ink-3)}
  .ws-slot-option:disabled,.ws-slot-option.is-full{opacity:.5;cursor:not-allowed;background:var(--c-paper-2)}
  .ws-slot-option.wso-consult{flex-direction:column;align-items:flex-start;gap:6px}
  .ws-slot-option.wso-consult .wso-date{color:var(--c-green-deep)}
  .ws-slot-option.wso-consult .wso-meta{white-space:normal;color:var(--c-ink-3)}

  /* ワークショップ:開催内容 */
  .details-info{max-width:760px}
  .program-list{padding-left:1.4em;list-style:decimal;line-height:1.95}
  .program-list li::marker{font-family:var(--f-latin);font-weight:500;color:var(--c-green)}

  /* ── 送信完了 ── */
  .form-success{
    display:none;position:relative;overflow:hidden;
    padding:clamp(48px,5vw,88px) clamp(24px,3vw,48px);
    border-radius:var(--radius-lg);text-align:center;
    background:
      radial-gradient(60% 50% at 50% 0%,color-mix(in oklch,var(--c-leaf) 30%,transparent),transparent),
      var(--c-paper);
    border:1px solid var(--c-line);
  }
  .form-success.show{display:block;animation:successIn .8s var(--ease-out-expo) both}
  @keyframes successIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
  .form-success-icon{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 26px;border-radius:50%;background:var(--c-green-deep);color:var(--c-paper);box-shadow:0 0 0 10px color-mix(in oklch,var(--c-leaf) 35%,transparent)}
  .form-success-icon svg{width:38px;height:38px}
  .form-success-num{display:block;margin-bottom:12px;color:var(--c-shu)}
  .form-success h3{font-size:var(--fs-xl);line-height:1.6;letter-spacing:.1em;margin-bottom:18px}
  .form-success p{max-width:36em;margin:0 auto 32px;font-size:var(--fs-sm);line-height:2.1;color:var(--c-ink-2)}
  .form-success .form-success-sub{margin-top:-14px;font-size:var(--fs-xs);color:var(--c-ink-3)}
  .form-success .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
  .back-link{--btn-bg:transparent;--btn-fg:var(--c-green-deep);--btn-bd:var(--c-line-strong);--btn-bg-h:var(--c-green-deep);--btn-fg-h:var(--c-paper);--btn-bd-h:var(--c-green-deep)}
  .back-link.primary{--btn-bg:var(--c-green-deep);--btn-fg:var(--c-paper);--btn-bd:var(--c-green-deep);--btn-bg-h:var(--c-ink);--btn-bd-h:var(--c-ink)}
  .res-number{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 28px;padding:16px 36px;border:1px dashed var(--c-green);border-radius:var(--radius);background:var(--c-tint)}
  .res-number strong{font-family:var(--f-latin);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:500;letter-spacing:.14em;color:var(--c-ink)}

  /* ── お問い合わせ:サイド情報 ── */
  .contact-aside{display:grid;gap:16px}
  @media (min-width:1024px){.contact-aside{position:sticky;top:calc(var(--header-h) + 24px)}}
  .contact-aside-card{padding:clamp(24px,2.2vw,34px);border-radius:var(--radius-lg)}
  .contact-aside-card .label{display:block;margin-bottom:10px;color:var(--c-shu)}
  .contact-aside-card h4{font-size:var(--fs-lg);letter-spacing:.1em;margin-bottom:12px}
  .contact-aside-card .big{display:block;margin-bottom:6px;font-family:var(--f-latin);font-size:clamp(1.9rem,1.6rem + 1vw,2.5rem);font-weight:500;line-height:1.15;letter-spacing:.04em;color:var(--c-ink);overflow-wrap:anywhere}
  .contact-aside-card .big.is-mail{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);letter-spacing:.06em}
  .contact-aside-card .big-sub{display:block;margin-bottom:16px;font-size:var(--fs-2xs);letter-spacing:.1em;line-height:1.8;color:var(--c-ink-3)}
  .contact-aside-card p{font-size:var(--fs-sm);line-height:2;color:var(--c-ink-2)}
  .contact-aside-card .info-dl{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--c-line)}
  .contact-aside-card .info-dl > div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}
  .contact-aside-card .info-dl dt{padding-top:.2em;font-size:var(--fs-2xs);font-weight:500;letter-spacing:.18em;color:var(--c-ink-3)}
  .contact-aside-card .info-dl dd{font-size:var(--fs-sm);line-height:1.8;color:var(--c-ink-2)}
  .contact-map{position:relative;overflow:hidden;aspect-ratio:4 / 3;margin:18px 0 6px;border-radius:var(--radius);border:1px solid var(--c-line);background:var(--c-paper-3)}
  .contact-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.08) contrast(.96)}
  .contact-aside-card .section-link{margin-top:14px}
}

/* ───────────────────────── motion ───────────────────────── */
@layer motion {

  /* リビール:JSが有効な環境でだけ初期状態を隠す(JS無効でも本文が消えない) */
  @media (scripting: enabled){
    .reveal{
      opacity:0;transform:translateY(28px);
      transition:opacity var(--dur-base) var(--ease-out-expo),transform var(--dur-base) var(--ease-out-expo);
      transition-delay:var(--reveal-delay,0s);
    }
    .reveal.in{opacity:1;transform:none}

    /* 見出しはマスクで下から立ち上がる */
    .section-header.reveal .section-title,.page-hero-inner.reveal .page-title{
      clip-path:inset(-10% -6% 105% -6%);transform:translateY(.4em);
      transition:clip-path var(--dur-slow) var(--ease-out-expo) .08s,transform var(--dur-slow) var(--ease-out-expo) .08s;
    }
    .section-header.reveal.in .section-title,.page-hero-inner.reveal.in .page-title{clip-path:inset(-10% -6% -14% -6%);transform:none}

    /* 縦組みの詩は右から一行ずつ現れる */
    .about-quote.reveal{transform:none;clip-path:inset(0 0 0 100%);transition:opacity .4s var(--ease-soft),clip-path 1.8s var(--ease-out-quart) .1s}
    .about-quote.reveal.in{clip-path:inset(-4% -4% -4% -4%)}

    /* 本の表紙は少し遅れて起き上がる */
    .books-grid .book.reveal{transform:translateY(40px)}
    .books-grid .book.reveal.in{transform:none}
  }

  /* ── ヒーロー入場 ── */
  .hero-video{animation:heroVideoIn 1.8s var(--ease-out-quart) both}
  .hero-scrim{animation:fadeIn 1.4s ease-out both}
  .hero-eyebrow{animation:fadeUp 1s var(--ease-out-expo) .3s both}
  .hero h1{animation:fadeIn 1.2s var(--ease-out-expo) .45s both}
  .hero-lead{animation:fadeUp 1.1s var(--ease-out-expo) 1.1s both}
  .hero-cta{animation:fadeUp 1.1s var(--ease-out-expo) 1.3s both}
  .hero-foot{animation:fadeIn 1.2s var(--ease-soft) 1.5s both}
  .hero-kanji{animation:fadeIn 2.4s var(--ease-soft) .2s both}

  /* 1文字ずつ(JSが .is-split を付与):縦組みなので上から、にじむように */
  .hero h1.is-split{animation:none;opacity:1}
  .hero h1.is-split .ch{
    display:inline-block;
    opacity:0;transform:translateY(-.35em);filter:blur(10px);
    animation:chIn 1.1s var(--ease-out-expo) forwards;
    animation-delay:calc(.4s + var(--ch-i) * 70ms);
  }
  .hero h1.is-split .small{opacity:0;animation:fadeIn 1.2s var(--ease-out-expo) forwards;animation-delay:calc(.6s + var(--ch-total) * 70ms)}
  .hero h1 em::after{content:none}

  @keyframes chIn{to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes heroVideoIn{from{opacity:0}to{opacity:1}}

  /* ── スクロール連動(対応ブラウザのみ) ── */
  @supports (animation-timeline: scroll()){
    .hero-content{animation:heroRecede linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes heroRecede{to{transform:translateY(64px);opacity:0}}
    .hero-video{animation:heroVideoIn 1.8s var(--ease-out-quart) both,heroZoom linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 120vh}
    @keyframes heroZoom{to{transform:scale(1.12)}}
    .hero-foot{animation:fadeIn 1.2s var(--ease-soft) 1.5s both,heroFootFade linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 25vh}
    @keyframes heroFootFade{to{opacity:0}}
    .hero-kanji{animation:fadeIn 2.4s var(--ease-soft) .2s both,heroKanjiDrift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
    @keyframes heroKanjiDrift{to{transform:translateY(-18%)}}

    /* ページ上部の読み進みバー */
    body::after{
      content:"";position:fixed;left:0;top:0;z-index:120;height:2px;width:100%;pointer-events:none;
      background:linear-gradient(to right,var(--c-green),var(--c-leaf));
      transform-origin:left;transform:scaleX(0);
      animation:progress linear both;animation-timeline:scroll(root);
    }
    @keyframes progress{to{transform:scaleX(1)}}
  }
  @supports (animation-timeline: view()){
    /* 掛け軸がわずかに揺れ下がる */
    .page-hero-kanji{animation:scrollHang linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes scrollHang{to{transform:translateY(22%) rotate(1.2deg)}}
    /* 四季の大きな漢字は視差 */
    .season-kanji{animation:parallaxUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes parallaxUp{from{transform:translateY(18px)}to{transform:translateY(-18px)}}
    /* 家元の掛け軸 */
    .master-portrait::after{animation:parallaxUp linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* 画像はわずかにズームアウトしながら入ってくる */
    .album-item img{animation:imgSettle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes imgSettle{from{scale:1.14}to{scale:1}}
  }

  /* ── ページ遷移(View Transitions) ── */
  header{view-transition-name:site-header}
  ::view-transition-old(root){animation:vtOut .32s var(--ease-soft) both}
  ::view-transition-new(root){animation:vtIn .5s var(--ease-out-expo) both}
  @keyframes vtOut{to{opacity:0;filter:blur(4px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* ── reduced-motion:全モーション停止・即時表示 ── */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0ms !important;scroll-behavior:auto !important}
    .hero-content,.hero-video,.hero-scrim,.hero-foot,.hero-kanji,.hero-eyebrow,.hero h1,.hero-lead,.hero-cta,
    .page-hero-kanji,.season-kanji,.master-portrait::after,.album-item img,.hero-mark,.scroll-indicator::after,body::after{animation:none !important}
    body::after{display:none}
    .reveal,.reveal.in{opacity:1 !important;transform:none !important;clip-path:none !important}
    .section-header.reveal .section-title,.page-hero-inner.reveal .page-title{clip-path:none !important;transform:none !important}
    .hero h1.is-split .ch,.hero h1.is-split .small{opacity:1;transform:none;filter:none;animation:none}
  }
}

/* ───────────────────────── View Transitions(レイヤー外に置く) ───────────────────────── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}

/* ───────────────────────── アルバム絞り込み(2026-09-24 追加) ───────────────────────── */
@layer pages {
  .album-item[hidden]{display:none}
  /* 絞り込み中はベントーの大小をやめて均等に並べる */
  .album-grid.is-filtered .album-item{grid-column:auto;grid-row:auto;aspect-ratio:1}
  @media (min-width:760px){.album-grid.is-filtered{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .album-tab{position:relative}
  /* 並び替えアニメーション用に各写真へ名前を付ける(遷移中のみ) */
  .album-grid.is-animating .album-item:nth-child(1){view-transition-name:album-1}
  .album-grid.is-animating .album-item:nth-child(2){view-transition-name:album-2}
  .album-grid.is-animating .album-item:nth-child(3){view-transition-name:album-3}
  .album-grid.is-animating .album-item:nth-child(4){view-transition-name:album-4}
  .album-grid.is-animating .album-item:nth-child(5){view-transition-name:album-5}
  .album-grid.is-animating .album-item:nth-child(6){view-transition-name:album-6}
  .album-grid.is-animating .album-item:nth-child(7){view-transition-name:album-7}
  .album-grid.is-animating .album-item:nth-child(8){view-transition-name:album-8}
  .album-grid.is-animating .album-item img{animation:none}
}
/* アルバムの並び替え時はページ全体のフェードを止め、写真だけを動かす */
html.vt-album::view-transition-old(root),html.vt-album::view-transition-new(root){animation:none}
html.vt-album::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ───────────────────────── 家元写真・生徒さんの声(1件)2026-09-24 追加 ───────────────────────── */
@layer pages {
  /* 家元:掛け軸をやめて写真を横長で大きく見せる */
  .master-inner:has(.master-portrait--photo){grid-template-columns:minmax(0,1fr) !important;gap:clamp(36px,4vw,64px)}
  .master-portrait--photo{
    position:relative;width:100%;margin:0;justify-self:stretch;
    aspect-ratio:3 / 2;border:0;border-radius:var(--radius-lg);overflow:hidden;
    background:var(--c-paper-3);box-shadow:var(--shadow-2);
  }
  @media (min-width:900px){.master-portrait--photo{aspect-ratio:21 / 10;position:relative !important;top:auto !important}}
  .master-portrait--photo::before,.master-portrait--photo::after{content:none}
  .master-portrait--photo img{width:100%;height:100%;object-fit:cover;object-position:55% 72%}
  @media (max-width:899px){.master-portrait--photo{aspect-ratio:5 / 4}.master-portrait--photo img{object-position:74% 70%}.master-portrait--photo .master-portrait-seal{width:34px;font-size:1.05rem}}
  .master-portrait--photo .master-portrait-seal{left:auto;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:1}
  @media (min-width:900px){
    .master-portrait--photo ~ .master-bio{
      display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:start;
    }
    .master-portrait--photo ~ .master-bio > .master-role,
    .master-portrait--photo ~ .master-bio > .master-name,
    .master-portrait--photo ~ .master-bio > .master-intro{grid-column:1}
    .master-portrait--photo ~ .master-bio > .master-credits{grid-column:2;grid-row:1 / span 3;align-self:start;margin-top:.4em}
  }

  /* 生徒さんの声:1件のときは大きな引用として見せる */
  .voice-grid:has(> .voice:only-child){grid-template-columns:minmax(0,1fr);max-width:960px;margin-inline:auto}
  .voice:only-child{padding:clamp(36px,5vw,80px) clamp(28px,6vw,96px);text-align:center;align-items:center}
  .voice:only-child::before{margin-inline:auto}
  .voice:only-child .voice-text{font-size:clamp(1.05rem,1rem + .5vw,1.4rem);line-height:2.2;letter-spacing:.08em;max-width:30em;text-align:left;text-wrap:pretty}
  .voice:only-child .voice-meta{justify-content:center;border-top:0;padding-top:0}
  .voice:only-child .voice-name{text-align:left}
}