:root{
    --ink:#04050a;
    --night:#080b18;
    --sumi:#101426;
    --gold:#c6a24a;
    --gold-bright:#e7cd86;
    --moon:#f3ecdb;
    --silver:#8b96ad;
    --line:rgba(198,162,74,.25);
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior: smooth; }
  body{
    background-color: var(--ink); color: var(--moon);
    font-family:"Shippori Mincho", serif; overflow-x:hidden;
    -webkit-font-smoothing:antialiased; line-height:2;
  }
  .en{ font-family:"Cormorant Garamond", serif; }
  .track{ letter-spacing:.45em; }

  /* ---------- 背景 WebGL Canvas ---------- */
  #gl{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block; pointer-events:none; }
  .scrim{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(100% 100% at 50% 40%, transparent 20%, rgba(4,5,10,.6) 70%, #04050a 100%);
  }
  .cursor-aura{ position:fixed; z-index:220; left:0; top:0; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0); background:radial-gradient(circle,rgba(231,205,134,.13),rgba(198,162,74,.055) 34%,transparent 70%); filter:blur(.4px); mix-blend-mode:screen; transition:width .35s ease,height .35s ease,margin .35s ease,opacity .35s ease; }
  .cursor-aura::before,.cursor-aura::after{ content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(231,205,134,.16); border-radius:50%; transform:translate(-50%,-50%) scale(.35,.18); animation:cursorWater 3.2s ease-out infinite; }
  .cursor-aura::after{ animation-delay:1.6s; }
  body.cursor-ready .cursor-aura{ opacity:1; }
  body.cursor-focus .cursor-aura{ width:112px; height:112px; margin:-56px 0 0 -56px; }
  @keyframes cursorWater{ 0%{width:18px;height:8px;opacity:0} 20%{opacity:.55} 100%{width:78px;height:34px;opacity:0} }
  @media(pointer:coarse){.cursor-aura{display:none!important}}

  /* ---------- エントリー画面（ラグジュアリー英字） ---------- */
  #overlay{
    position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    background:transparent; isolation:isolate; overflow:hidden;
    transition:opacity .28s ease, visibility 0s linear .28s;
  }
  /* ゲートの手前で世界観を予告するため、二枚の暗幕を完全に閉じきらず、
     中央にわずかな隙間を残して背後の月・星屑シーンを薄く覗かせる */
  #overlay::before,#overlay::after{ content:""; position:absolute; top:0; bottom:0; width:47%; z-index:0; opacity:1; background:radial-gradient(90% 75% at 50% 45%,#0b1022 0%,#04050a 78%,#010205 100%); transition:opacity .78s cubic-bezier(.4,0,.2,1) .18s; will-change:opacity; }
  #overlay::before{ left:0; transform-origin:left; mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%); }
  #overlay::after{ right:0; transform-origin:right; mask-image:linear-gradient(270deg,#000 0%,#000 78%,transparent 100%); -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 78%,transparent 100%); }
  #overlay > *{ position:relative; z-index:2; }
  #overlay.hidden{ opacity:0; visibility:hidden; }
  #overlay.departing::before,#overlay.departing::after{ opacity:0; }
  #overlay.departing .o-ring{ animation:none; transform:scale(.16); opacity:0; transition:transform .58s cubic-bezier(.7,0,.84,0),opacity .38s ease; }
  #overlay.departing .o-sub,#overlay.departing .o-title-en,#overlay.departing .o-line,#overlay.departing .enter-btn,#overlay.departing .o-note{ opacity:0; transform:translateY(-12px); transition:opacity .25s ease,transform .42s ease; }
  .entry-beam{ position:absolute!important; z-index:4!important; left:50%; top:50%; width:2px; height:120vh; transform:translate(-50%,-50%) scale(1,0); background:linear-gradient(180deg,transparent,var(--gold-bright) 28%,#fff7d7 50%,var(--gold-bright) 72%,transparent); box-shadow:0 0 18px rgba(231,205,134,.85),0 0 70px rgba(198,162,74,.55); opacity:0; pointer-events:none; will-change:transform,opacity; }
  .entry-ripple{ position:absolute!important; z-index:3!important; left:50%; top:50%; width:100px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(231,205,134,.7); transform:translate(-50%,-50%) scale(.15); opacity:0; pointer-events:none; }
  #overlay.departing .entry-beam{ animation:entryBlade 1.05s cubic-bezier(.16,1,.3,1) forwards; }
  #overlay.departing .entry-ripple{ animation:entryRipple 1.1s cubic-bezier(.16,1,.3,1) .04s forwards; }
  @keyframes entryBlade{ 0%{transform:translate(-50%,-50%) scale(1,0);opacity:0} 18%{opacity:1} 52%{transform:translate(-50%,-50%) scale(1,1);opacity:1} 100%{transform:translate(-50%,-50%) scale(420,1);opacity:0} }
  @keyframes entryRipple{ 0%{transform:translate(-50%,-50%) scale(.1);opacity:0} 26%{opacity:1} 100%{transform:translate(-50%,-50%) scale(16);opacity:0;border-color:rgba(231,205,134,0)} }
  .o-ring{
    width:84px; height:84px; border-radius:50%; border:1px solid var(--line);
    position:relative; margin-bottom:3rem;
    box-shadow:0 0 50px rgba(231,205,134,.16), inset 0 0 35px rgba(231,205,134,.06);
    animation:breathe 7s ease-in-out infinite;
  }
  .o-ring::after{
    content:""; position:absolute; inset:18px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(243,236,219,.95), rgba(198,162,74,.3) 60%, transparent 75%);
    filter: blur(0.5px);
  }
  @keyframes breathe{ 0%,100%{ transform:scale(1); opacity:0.8 } 50%{ transform:scale(1.05); opacity:1 } }
  
  .o-sub{ font-size:.65rem; color:var(--gold); letter-spacing:.4em; text-transform:uppercase; margin-bottom:1.5rem; font-family:"Shippori Mincho", serif; }
  .o-title-en { font-family:"Cormorant Garamond", serif; font-weight:300; font-size:clamp(3.5rem, 9vw, 6.5rem); letter-spacing:.25em; padding-left:.25em; color:var(--moon); line-height:1; }
  .o-line{ color:var(--silver); margin-top:2rem; letter-spacing:.3em; font-size:0.95rem; font-weight:400; }
  
  .enter-btn{
    position:relative; margin-top:3.5rem; padding:1.15rem 3.6rem; cursor:pointer;
    font-family:"Cormorant Garamond", serif; font-size:.85rem; letter-spacing:.4em; font-weight:400;
    text-transform: uppercase; color:var(--moon); background:transparent; border:1px solid var(--line); overflow:hidden;
    transition:color .6s cubic-bezier(0.16, 1, 0.3, 1), border-color .6s ease;
  }
  .enter-btn span { position:relative; z-index:2; padding-left:.4em; }
  .enter-btn::before{
    content:""; position:absolute; inset:0; z-index:1; transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg,var(--gold),var(--gold-bright));
    transition:transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .enter-btn:hover{ color:#04050a; border-color:transparent; box-shadow: 0 0 40px rgba(231,205,134,0.25); }
  .enter-btn:hover::before{ transform:scaleX(1); }
  .enter-btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:4px; }
  .o-note{ color:rgba(196,204,224,0.62); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; margin-top:2.5rem; font-family: sans-serif; }

  /* ---------- コンテンツ・レイアウト構造 ---------- */
  #app{ position:relative; z-index:2; opacity:0; transition:opacity 1.15s cubic-bezier(.22,.61,.36,1) .08s; }
  #app.revealed{ opacity:1; }
  .wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); }
  .eyebrow{ font-size:.7rem; color:var(--gold); letter-spacing:.4em; text-transform:uppercase; }
  .hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent); }

  /* Hero (文字と画像の干渉を完全防衛) */
  .hero{ min-height:100vh; display:flex; align-items:center; position:relative; isolation:isolate; background:#020308; }
  /* 実写の竹は「風景」ではなく、ボトルを浮かせる空気と奥行きとして扱う。 */
  .hero::before{ content:""; position:absolute; z-index:0; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
    background-image:linear-gradient(90deg,rgba(2,3,8,.62) 0%,rgba(2,3,8,.38) 38%,rgba(2,3,8,.2) 65%,rgba(2,3,8,.7) 100%),linear-gradient(180deg,rgba(2,3,8,.42),transparent 38%,rgba(2,3,8,.72) 100%),radial-gradient(ellipse 60% 72% at 52% 50%,transparent 20%,rgba(2,3,8,.42) 100%),url("images/hero-bamboo-bg.jpg");
    background-size:cover; background-position:center; }
  .hero::after{ content:""; position:absolute; z-index:1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
    background:radial-gradient(ellipse 38% 48% at 73% 50%,rgba(218,184,101,.13),transparent 72%),radial-gradient(ellipse 34% 42% at 73% 73%,rgba(180,138,62,.1),transparent 75%); mix-blend-mode:screen; }
  .hero-grid { display:grid; grid-template-columns:1fr; width:100%; gap:4rem; align-items:center; z-index:5; }
  @media(min-width:860px){ .hero-grid { grid-template-columns:1.1fr 0.9fr; gap:2rem; } }
  
  .hero .name{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(3.8rem, 9vw, 6.8rem); letter-spacing:.12em; line-height:1; margin:.5rem 0 0;
    background:linear-gradient(180deg,#fff,#e7cd86 60%,#b78e37); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero .kana{ color:var(--gold-bright); letter-spacing:.45em; font-size:1.1rem; margin:.8rem 0 2rem; padding-left:.45em; }
  .hero .lede{ color:var(--silver); font-size:1.05rem; line-height:2.1; text-align:justify; max-width:28rem; }

  /* 3Dボトルステージ枠（Heroの右側を確保） */
  .hero-stage { width:100%; height:62vh; display:flex; align-items:center; justify-content:center; position:relative;
    background:radial-gradient(circle at 50% 47%, rgba(231,205,134,.11), rgba(198,162,74,.04) 30%, transparent 60%); }
  .hero-stage canvas{ display:block; width:100%!important; height:100%!important; }
  @media(min-width:860px) { .hero-stage { height:min(80vh,780px); } }

  /* Mobile Hero: keep copy and the bottle stage within the first viewport. */
  @media(max-width:859px) {
    .section{ padding:72px 0; }
    .section + .section{ padding-top:56px; }
    .hero{ min-height:100svh; padding-top:clamp(5.5rem,12svh,7rem); padding-bottom:2.25rem; align-items:flex-start; }
    .hero::before{ background-image:linear-gradient(180deg,rgba(2,3,8,.62) 0%,rgba(2,3,8,.45) 36%,rgba(2,3,8,.3) 60%,rgba(2,3,8,.82) 100%),linear-gradient(90deg,rgba(2,3,8,.55),rgba(2,3,8,.14) 70%,rgba(2,3,8,.62)),radial-gradient(ellipse 60% 72% at 52% 50%,transparent 20%,rgba(2,3,8,.42) 100%),url("images/hero-bamboo-bg-mobile.jpg"); background-position:center; }
    .hero::after{ background:radial-gradient(ellipse 54% 24% at 50% 65%,rgba(218,184,101,.12),transparent 75%); }
    .hero-grid{ min-height:calc(100svh - clamp(7.75rem,18svh,9.5rem)); grid-template-rows:auto minmax(0,1fr); gap:clamp(.7rem,2.2svh,1.2rem); }
    .hero .name{ font-size:clamp(3.1rem,15vw,4.5rem); margin:.25rem 0 0; }
    .hero .kana{ margin:.45rem 0 1rem; font-size:.88rem; letter-spacing:.32em; }
    .hero .lede{ font-size:.92rem; line-height:1.9; max-width:32rem; }
    .story-body{ font-size:.95rem; line-height:2.05; text-align:left; }
    .hero-stage{ height:clamp(285px,39svh,360px); min-height:0; }
    .hero [data-reveal]{ opacity:1; transform:none; }
    .scroll-cue{ bottom:.85rem; gap:.45rem; }
    .scroll-cue .bar{ height:28px; }

    .purchase-modal{ width:calc(100vw - 2rem); max-height:calc(100svh - 2rem); border-color:rgba(231,205,134,.4); }
    .modal-shell{ padding:max(4.25rem, env(safe-area-inset-top)) 1.35rem max(1.5rem, env(safe-area-inset-bottom)); }
    .modal-shell::before{ width:250px; top:-152px; }
    .modal-shell::after{ inset:.55rem; }
    .modal-close{ top:.75rem; right:.75rem; width:38px; height:38px; font-size:1.3rem; }
    .modal-kicker{ font-size:.58rem; letter-spacing:.24em; }
    .modal-mark{ width:54px; margin:1.15rem auto; }
    .modal-title{ font-size:clamp(1.18rem,5.6vw,1.55rem); line-height:1.65; letter-spacing:.07em; }
    .modal-copy{ margin-top:1rem; font-size:.82rem; line-height:1.85; }
    .modal-action{ width:100%; min-width:0; margin-top:1.55rem; padding:1rem 1.15rem; letter-spacing:.22em; }

    /* Mobile editorial rhythm: preserve the cinematic pauses without leaving
       long, empty stretches between the principal visual beats. */
    .story-flex{ gap:3rem; }
    .story-myth{ min-height:500px; }
    .story-body{ max-width:none; color:#aeb3c0; }
    .botanical-map{ margin-top:48px; height:clamp(300px,82vw,390px); }
    .bot-grid{ margin-top:44px; }
    .bot-cell{ min-height:205px; padding:38px 28px; }
    .bot-jp{ font-size:2.15rem; }
    .bot-note{ font-size:.98rem; line-height:1.9; text-align:left; }
    .craft-stage{ gap:3rem; }
    .still-visual{ min-height:440px; }
    .craft-grid{ gap:1.75rem; margin-top:44px; }
    .taste-grid{ margin-top:44px; }
    .taste-cell{ padding:40px 28px; }
    .taste-cell p{ font-size:1.08rem; text-align:left; }
    .final-cta{ min-height:78svh; }
    .final-cta-inner{ padding:6rem 1.15rem; }
    .final-cta-title{ font-size:clamp(2rem,9.5vw,3rem); }
    .final-cta-copy{ font-size:.92rem; }
    footer{ padding:64px 0 32px; }
  }

  .scroll-cue{ position:absolute; z-index:5; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.7rem; color:var(--silver); font-size:.55rem; letter-spacing:0.35em; font-family: sans-serif; }
  .scroll-cue .bar{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:drop 2.5s ease-in-out infinite; }

  /* 各種セクションの背景パネル演出化 */
  .section{ position:relative; padding:118px 0; transition: background 0.5s ease; }
  /* 連続するsectionの間が320pxの空白になるのを避ける */
  .section + .section{ padding-top:96px; }
  .panel{ background:linear-gradient(180deg, rgba(4,5,10,0.5), rgba(8,11,24,0.75)); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .reveal{ opacity:0; transform:translateY(35px); transition:opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .reveal.in{ opacity:1; transform:none; }
  .flow-char{ display:inline-block; opacity:0; transform:translateY(.85em) rotateX(-72deg); filter:blur(7px); transform-origin:center bottom; transition:opacity .72s ease,transform .95s cubic-bezier(.16,1,.3,1),filter .82s ease; transition-delay:calc(var(--flow-i) * 24ms); will-change:opacity,transform,filter; }
  .flow-space{ width:.35em; }
  [data-flow].flow-in .flow-char{ opacity:1; transform:none; filter:blur(0); }

  /* 竹取の月輪 — 文字だけだった物語を、光と竹の立体標本へ */
  .story-flex { display:grid; grid-template-columns:1fr; gap:5rem; align-items:center; }
  @media(min-width:900px){ .story-flex { grid-template-columns:minmax(280px,.82fr) minmax(460px,1.18fr); gap:clamp(4rem,8vw,9rem); } }
  .story-myth{ position:relative; min-height:580px; display:flex; justify-content:center; align-items:center; isolation:isolate; overflow:hidden; }
  .story-myth::before{ content:"THE FIRST LIGHT / 竹取の系譜"; position:absolute; left:0; bottom:1rem; color:rgba(139,150,173,.45); font-family:"Cormorant Garamond",serif; font-size:.62rem; letter-spacing:.34em; writing-mode:vertical-rl; }
  .lunar-seal{ position:absolute; width:min(82vw,440px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(231,205,134,.35); box-shadow:0 0 80px rgba(198,162,74,.08),inset 0 0 80px rgba(231,205,134,.045); animation:sealFloat 9s ease-in-out infinite; }
  .lunar-seal::before,.lunar-seal::after{ content:""; position:absolute; border-radius:50%; border:1px solid rgba(198,162,74,.16); }
  .lunar-seal::before{ inset:8%; border-style:dashed; animation:sealSpin 42s linear infinite; }
  .lunar-seal::after{ inset:26%; background:radial-gradient(circle at 38% 35%,rgba(243,236,219,.16),rgba(198,162,74,.035) 54%,transparent 72%); filter:blur(1px); }
  .seal-cross{ position:absolute; inset:50% auto auto 50%; width:120%; height:1px; background:linear-gradient(90deg,transparent,rgba(231,205,134,.25),transparent); transform-origin:center; }
  .seal-cross:nth-child(1){ transform:translate(-50%,-50%) rotate(31deg); }
  .seal-cross:nth-child(2){ transform:translate(-50%,-50%) rotate(121deg); }
  .bamboo-grove{ position:absolute; inset:6% 12%; display:flex; align-items:flex-end; justify-content:space-around; opacity:.38; filter:drop-shadow(0 0 16px rgba(198,162,74,.16)); }
  .bamboo-grove i{ position:relative; width:2px; height:var(--h); background:linear-gradient(180deg,transparent,rgba(231,205,134,.72) 15%,rgba(198,162,74,.2)); transform:rotate(var(--r)); transform-origin:bottom; }
  .bamboo-grove i::before,.bamboo-grove i::after{ content:""; position:absolute; width:36px; height:1px; background:linear-gradient(90deg,rgba(231,205,134,.5),transparent); transform-origin:left; }
  .bamboo-grove i::before{ top:28%; transform:rotate(-34deg); }
  .bamboo-grove i::after{ top:57%; transform:rotate(27deg) scaleX(-1); }
  .story-quote{ position:relative; z-index:3; font-weight:500; font-size:clamp(1.55rem,3.4vw,2.55rem); line-height:2.1; letter-spacing:.22em; margin:0; writing-mode:vertical-rl; text-orientation:mixed; height:clamp(420px,50vw,560px); max-height:none; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; color:var(--moon); text-shadow:0 0 28px rgba(4,5,10,.95); }
  .story-body{ color:var(--silver); font-size:1.02rem; line-height:2.2; text-align:justify; max-width:30rem; }

  @keyframes sealSpin{ to{ transform:rotate(360deg); } }
  @keyframes sealFloat{ 0%,100%{ transform:translateY(0) scale(1); opacity:.78; } 50%{ transform:translateY(-12px) scale(1.025); opacity:1; } }

  .h2{ font-weight:500; font-size:clamp(2rem,4.5vw,2.8rem); letter-spacing:.12em; margin-top:1rem; }

  /* 六素材を一つの暗い彫刻群として沈める背景レイヤー */
  .botanical-section{ position:relative; isolation:isolate; overflow:hidden; }
  .botanical-section > .wrap{ position:relative; z-index:2; }
  .botanical-shadows{ position:absolute; z-index:0; inset:2% -8% 0; pointer-events:none; perspective:1200px; mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%); }
  .botanical-shadow{ position:absolute; display:block; width:min(78vw,1120px); height:auto; opacity:0; will-change:transform,opacity; filter:sepia(.6) saturate(1.35) brightness(.82) contrast(1.08); mix-blend-mode:screen; transition:opacity 1.5s ease; }
  .botanical-shadow-back{ right:-9%; top:0; transform:translate3d(0,18px,0) scale(1.06); }
  .botanical-shadow-mid{ left:-16%; top:24%; transform:translate3d(0,28px,0) scaleX(-1) scale(1.03); }
  .botanical-shadow-front{ right:-12%; bottom:-3%; transform:translate3d(0,38px,0) scale(1.08); }
  .botanical-shadows.is-visible .botanical-shadow-back{ opacity:.46; }
  .botanical-shadows.is-visible .botanical-shadow-mid{ opacity:.4; }
  .botanical-shadows.is-visible .botanical-shadow-front{ opacity:.56; }
  @media(max-width:700px){ .botanical-shadows{inset:4% -24% 0}.botanical-shadow{width:125vw}.botanical-shadows.is-visible .botanical-shadow-back{opacity:.32}.botanical-shadows.is-visible .botanical-shadow-mid{opacity:.27}.botanical-shadows.is-visible .botanical-shadow-front{opacity:.4} }

  /* 六つの香りを結ぶ星図 */
  .botanical-map{ position:relative; width:100%; height:clamp(310px,46vw,500px); margin-top:70px; border-block:1px solid var(--line); overflow:hidden; isolation:isolate; }
  .botanical-map::before{ content:""; position:absolute; inset:12% 24%; border-radius:50%; background:radial-gradient(circle,rgba(198,162,74,.12),transparent 68%); filter:blur(16px); }
  .botanical-map svg{ width:100%; height:100%; overflow:visible; }
  .botanical-map .orbit{ fill:none; stroke:rgba(198,162,74,.22); stroke-width:.7; stroke-dasharray:3 7; transform-origin:50% 50%; animation:orbitTurn 54s linear infinite; }
  .botanical-map .thread{ fill:none; stroke:url(#botanicalGold); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 3.2s cubic-bezier(.22,.61,.36,1); transition-delay:var(--line-delay,0s); }
  .botanical-map.in .thread{ stroke-dashoffset:0; }
  .botanical-map .node-ring{ fill:rgba(4,5,10,.86); stroke:rgba(231,205,134,.48); stroke-width:1; }
  .botanical-map .node-core{ fill:var(--gold-bright); filter:url(#botGlow); animation:nodeBreath 4.8s ease-in-out infinite; }
  .botanical-map text{ fill:var(--moon); font-family:"Shippori Mincho",serif; font-size:12px; letter-spacing:.2em; text-anchor:middle; }
  .botanical-map .distill-drop{ fill:url(#dropGold); filter:url(#botGlow); }
  .botanical-caption{ position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); color:rgba(139,150,173,.62); font-family:"Cormorant Garamond",serif; font-size:.62rem; letter-spacing:.36em; white-space:nowrap; }
  @keyframes orbitTurn{ to{ transform:rotate(360deg); } }
  @keyframes nodeBreath{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

  /* ボタニカル・カード構造 */
  .bot-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:60px; }
  @media(min-width:640px){ .bot-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(min-width:960px){ .bot-grid{ grid-template-columns:repeat(3,1fr); } }
  .bot-cell{ --mx:50%; --my:50%; position:relative; overflow:hidden; background:rgba(6,8,16,0.85); padding:50px 40px; min-height:235px; display:flex; flex-direction:column; justify-content:flex-end; gap:.8rem; transition:background .55s ease,transform .55s cubic-bezier(.16,1,.3,1); }
  .bot-cell::before{ content:""; position:absolute; inset:-30%; background:radial-gradient(circle at var(--mx) var(--my),rgba(231,205,134,.2),transparent 29%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .bot-cell::after{ content:attr(data-symbol); position:absolute; right:1rem; top:-1.1rem; color:rgba(231,205,134,.055); font-size:8rem; line-height:1; pointer-events:none; }
  .bot-cell:hover{ background:rgba(16,21,41,0.94); transform:translateY(-4px); }
  .bot-cell:hover::before{ opacity:1; }
  .bot-cell > *{ position:relative; z-index:1; }
  .bot-index{ color:rgba(231,205,134,.48); font-family:"Cormorant Garamond",serif; font-size:.7rem; letter-spacing:.28em; }
  .bot-jp{ font-size:2.4rem; color:var(--gold-bright); line-height:1; }
  .bot-en{ font-family:"Cormorant Garamond",serif; letter-spacing:.25em; text-transform:uppercase; font-size:.75rem; color:var(--silver); }
  .bot-note{ color:var(--silver); font-size:0.95rem; line-height:1.8; text-align:justify; }

  /* 銅製蒸溜器の断面図 */
  .craft-stage{ display:grid; grid-template-columns:1fr; gap:4rem; align-items:center; }
  @media(min-width:900px){ .craft-stage{ grid-template-columns:minmax(340px,.85fr) minmax(420px,1fr); gap:clamp(3rem,6vw,6rem); } }
  .still-visual{ --mx:50%; --my:50%; position:relative; min-height:520px; border:1px solid rgba(198,162,74,.22); background:radial-gradient(circle at var(--mx) var(--my),rgba(198,162,74,.12),transparent 32%),linear-gradient(155deg,rgba(16,20,38,.68),rgba(4,5,10,.86)); overflow:hidden; }
  .still-visual::before{ content:""; position:absolute; inset:8%; border:1px solid rgba(198,162,74,.09); }
  .still-visual::after{ content:"DISTILLATION / 0045"; position:absolute; right:1.2rem; top:1.6rem; color:rgba(139,150,173,.5); font-family:"Cormorant Garamond",serif; font-size:.58rem; letter-spacing:.28em; writing-mode:vertical-rl; }
  .still-svg{ position:absolute; inset:7% 9%; width:82%; height:86%; overflow:visible; }
  .still-outline{ fill:none; stroke:url(#copperLine); stroke-width:1.4; stroke-dasharray:760; stroke-dashoffset:760; transition:stroke-dashoffset 2.6s cubic-bezier(.16,1,.3,1); }
  .still-visual.in .still-outline{ stroke-dashoffset:0; }
  .still-detail{ fill:none; stroke:rgba(231,205,134,.24); stroke-width:.8; }
  .still-vapor{ fill:none; stroke:rgba(243,236,219,.4); stroke-width:1; stroke-dasharray:4 9; animation:vaporRise 8s linear infinite; }
  .still-drop{ position:absolute; left:72%; top:54%; width:8px; height:12px; border-radius:60% 40% 65% 35%; background:var(--gold-bright); box-shadow:0 0 22px rgba(231,205,134,.6); animation:dropFall 3.4s ease-in infinite; }
  .still-scale{ position:absolute; left:1.6rem; bottom:1.5rem; display:flex; gap:1rem; align-items:end; color:rgba(139,150,173,.62); font-family:"Cormorant Garamond",serif; font-size:.62rem; letter-spacing:.18em; }
  .still-scale i{ display:block; width:1px; height:var(--h); background:rgba(198,162,74,.35); }
  @keyframes vaporRise{ to{ stroke-dashoffset:-130; } }
  @keyframes dropFall{ 0%{ transform:translateY(-20px) scale(.5); opacity:0; } 28%{ opacity:1; } 72%{ opacity:1; } 100%{ transform:translateY(96px) scale(1); opacity:0; } }

  /* クラフト・スタッツ */
  .craft-grid{ display:grid; grid-template-columns:1fr; gap:3rem; margin-top:60px; }
  @media(min-width:760px){ .craft-grid{ grid-template-columns:repeat(3,1fr); } }
  .stat-num{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(3.5rem,6.5vw,5rem); line-height:1; color:var(--gold-bright); }
  .stat-num.k{ font-family:"Shippori Mincho",serif; }
  .stat-lab{ font-size:.75rem; color:var(--silver); letter-spacing:.25em; margin-top:1rem; text-transform:uppercase; }

  /* 映像を奥行きのある光学レイヤーとして扱う3Dシネマティック・ポア */
  .pour-section{ position:relative; height:100svh; min-height:680px; background:#020304; }
  .pour-sticky{ --rx:0deg; --ry:0deg; --mx:50%; --my:50%; --scroll-z:0; --depth-scale:.94; --word-scale:.92; position:relative; height:100%; overflow:hidden; isolation:isolate; perspective:1400px; background:#020304; }
  .pour-video{ position:absolute; z-index:0; inset:-6%; width:112%; height:112%; object-fit:cover; object-position:center; opacity:.58; filter:saturate(.68) brightness(.74) contrast(1.08); transform:scale(1.13); clip-path:circle(9% at 50% 50%); transition:clip-path 1.55s cubic-bezier(.16,1,.3,1),transform 8s cubic-bezier(.16,1,.3,1),opacity 1.2s ease; }
  .pour-sticky.is-active .pour-video{ clip-path:circle(78% at 50% 50%); transform:scale(1.02); opacity:.78; }
  .pour-grade{ position:absolute; z-index:1; inset:0; pointer-events:none; background:radial-gradient(circle at var(--mx) var(--my),rgba(231,205,134,.08),transparent 28%),linear-gradient(90deg,rgba(2,3,7,.84),rgba(2,3,7,.18) 35%,rgba(2,3,7,.24) 65%,rgba(2,3,7,.82)),linear-gradient(180deg,rgba(2,3,7,.42),transparent 30%,transparent 65%,rgba(2,3,7,.78)); }
  .pour-depth-word{ position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%) translateZ(-120px) scale(var(--word-scale)); color:transparent; -webkit-text-stroke:1px rgba(231,205,134,.12); font-family:"Cormorant Garamond",serif; font-size:clamp(9rem,27vw,30rem); font-weight:300; letter-spacing:.12em; white-space:nowrap; pointer-events:none; }
  .pour-orbit{ position:absolute; z-index:2; left:50%; top:50%; width:min(72vmin,720px); aspect-ratio:1; border:1px solid rgba(231,205,134,.18); border-radius:50%; pointer-events:none; opacity:0; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(calc(68deg + var(--rx))) rotateZ(calc(-12deg + var(--ry))) translateZ(-20px) scale(.25); transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity .8s ease; }
  .pour-sticky.is-active .pour-orbit{ opacity:1; transform:translate(-50%,-50%) rotateX(calc(68deg + var(--rx))) rotateZ(calc(-12deg + var(--ry))) translateZ(-20px) scale(1); }
  .pour-orbit::before,.pour-orbit::after{ content:""; position:absolute; border-radius:50%; border:1px solid rgba(231,205,134,.1); }
  .pour-orbit::before{ inset:12%; transform:translateZ(35px); }
  .pour-orbit::after{ inset:-14%; border-style:dashed; opacity:.55; }
  .pour-lens{ position:absolute; z-index:3; left:50%; top:50%; width:min(62vw,960px); aspect-ratio:16/9; opacity:0; transform-style:preserve-3d; transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(80px) scale(.76); border:1px solid rgba(231,205,134,.42); box-shadow:0 45px 120px rgba(0,0,0,.62),inset 0 0 90px rgba(231,205,134,.05); pointer-events:none; transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .7s ease,border-color .5s ease; }
  .pour-sticky.is-active .pour-lens{ opacity:1; transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(80px) scale(var(--depth-scale)); }
  .pour-lens::before{ content:""; position:absolute; inset:0; background:linear-gradient(112deg,transparent 35%,rgba(255,244,211,.16) 48%,transparent 58%),radial-gradient(circle at var(--mx) var(--my),rgba(231,205,134,.16),transparent 24%); mix-blend-mode:screen; opacity:.7; }
  .pour-lens::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(231,205,134,.12); }
  .pour-copy{ position:absolute; z-index:5; pointer-events:none; text-shadow:0 12px 45px rgba(0,0,0,.85); }
  .pour-copy-main{ left:clamp(1.5rem,6vw,7rem); top:15%; }
  .pour-copy-main strong{ display:block; color:var(--moon); font-size:clamp(2.2rem,5vw,5.4rem); font-weight:400; letter-spacing:.18em; }
  .pour-copy-main span,.pour-copy-foot{ color:rgba(231,205,134,.65); font-family:"Cormorant Garamond",serif; font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; }
  .pour-copy-foot{ right:clamp(1.5rem,5vw,6rem); bottom:11%; text-align:right; line-height:2; }
  .pour-rail{ position:absolute; z-index:5; left:clamp(1rem,2.3vw,2.3rem); top:15%; bottom:15%; width:1px; background:rgba(231,205,134,.18); }
  .pour-rail i{ display:block; width:1px; height:100%; background:var(--gold-bright); transform:scaleY(0); transform-origin:top; transition:transform .12s linear; }
  .pour-index{ position:absolute; z-index:5; right:clamp(1rem,2.3vw,2.3rem); top:50%; color:rgba(231,205,134,.45); font-family:"Cormorant Garamond",serif; font-size:.55rem; letter-spacing:.34em; writing-mode:vertical-rl; transform:translateY(-50%); }
  .pour-noise{ position:absolute; z-index:6; inset:0; pointer-events:none; opacity:.12; background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.28) 0 1px,transparent 1px 4px); background-size:5px 5px; mix-blend-mode:soft-light; }
  .pour-blades{ position:absolute; z-index:7; inset:0; pointer-events:none; }
  .pour-blades i{ position:absolute; left:50%; top:50%; width:1px; height:140vmax; background:linear-gradient(transparent,rgba(255,244,210,.9),transparent); box-shadow:0 0 20px rgba(231,205,134,.48); opacity:0; transform-origin:center; }
  .pour-sticky.is-active .pour-blades i:nth-child(1){ animation:bladeCut 1.35s cubic-bezier(.16,1,.3,1) forwards; }
  .pour-sticky.is-active .pour-blades i:nth-child(2){ animation:bladeCut 1.5s cubic-bezier(.16,1,.3,1) .12s forwards; transform:translate(-50%,-50%) rotate(58deg) scaleY(0); }
  .pour-sticky.is-active .pour-blades i:nth-child(3){ animation:bladeCut 1.5s cubic-bezier(.16,1,.3,1) .2s forwards; transform:translate(-50%,-50%) rotate(-58deg) scaleY(0); }
  @keyframes bladeCut{ 0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--blade-angle,0deg)) scaleY(0)} 28%{opacity:1} 72%{opacity:.75;transform:translate(-50%,-50%) rotate(var(--blade-angle,0deg)) scaleY(1)} 100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--blade-angle,0deg)) scaleY(1)} }
  .pour-blades i:nth-child(2){--blade-angle:58deg}.pour-blades i:nth-child(3){--blade-angle:-58deg}
  @media(max-width:700px){ .pour-section{height:100svh;min-height:680px}.pour-lens{width:88vw}.pour-depth-word{font-size:45vw}.pour-copy-main{top:12%}.pour-copy-main strong{font-size:clamp(2.4rem,12vw,4rem)}.pour-copy-foot{bottom:9%;max-width:70vw}.pour-orbit{width:76vmin} }

  /* テイスティング・トリアド */
  .taste-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:60px; }
  @media(min-width:760px){ .taste-grid{ grid-template-columns:repeat(3,1fr); } }
  .taste-cell{ background:rgba(6,8,16,0.85); padding:50px 40px; }
  .taste-cell h3{ font-size:.8rem; color:var(--gold); letter-spacing:.35em; margin:0 0 1.5rem; text-transform:uppercase; }
  .taste-cell p{ color:var(--moon); font-size:1.15rem; line-height:2; text-align:justify; }

  /* フッター */
  footer{ border-top:1px solid var(--line); padding:80px 0 40px; text-align:center; }
  .f-logo{ font-family:"Cormorant Garamond",serif; font-size:2.8rem; font-weight:300; letter-spacing:.25em; margin-bottom:15px; }
  .drink-note{ color:var(--silver); font-size:.65rem; letter-spacing:.15em; opacity:0.6; margin-top:60px; line-height:1.8; }
  /* フッター上段：ブランド名と規格表記を左右に振り分ける */
  .f-top{ display:grid; gap:48px; align-items:end; text-align:left; }
  @media (min-width:820px){ .f-top{ grid-template-columns:minmax(0,1fr) auto; gap:64px; } }
  .f-top .spec{ display:grid; gap:18px; }
  @media (min-width:520px){ .f-top .spec{ grid-auto-flow:column; gap:44px; align-items:end; } }
  .f-top .spec > div{ display:grid; gap:7px; }
  .f-top .spec b{
    font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.45rem;
    letter-spacing:.08em; color:var(--moon); line-height:1;
  }
  .f-top .spec b.k{ font-family:"Shippori Mincho",serif; font-size:1.3rem; letter-spacing:.1em; }
  .f-top .spec small{
    font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--silver); opacity:.62; line-height:1.6;
  }

  /* 最終購入導線：フッターと分離した一画面の明確なCTA */
  .final-cta{ position:relative; min-height:90svh; display:grid; place-items:center; overflow:hidden; text-align:center; border-top:1px solid rgba(198,162,74,.18); background:radial-gradient(circle at 50% 38%,rgba(119,83,34,.12),transparent 30%),linear-gradient(180deg,#04050a,#070608); isolation:isolate; }
  .final-cta::before{ content:""; position:absolute; z-index:-1; left:50%; top:38%; width:min(58vw,620px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(201,165,86,.28); opacity:0; transform:translate(-50%,-46%) scale(.58); box-shadow:0 0 100px rgba(154,112,47,.08),inset 0 0 100px rgba(154,112,47,.05); transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1); }
  .final-cta::after{ content:"KAGUYA"; position:absolute; z-index:-2; left:50%; bottom:-.12em; opacity:0; transform:translate(-50%,40px); color:transparent; -webkit-text-stroke:1px rgba(177,139,68,.08); font-family:"Cormorant Garamond",serif; font-size:clamp(8rem,24vw,25rem); letter-spacing:.08em; white-space:nowrap; transition:opacity 1.4s ease .45s,transform 1.8s cubic-bezier(.16,1,.3,1) .35s; }
  .final-cta.is-awake::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .final-cta.is-awake::after{opacity:1;transform:translate(-50%,0)}
  .final-cta-inner{ width:min(92vw,860px); padding:8rem 1.5rem; }
  .final-cta-kicker,.final-cta-title,.final-cta-copy,.final-cta-button{opacity:0;filter:blur(7px);transform:translateY(28px);transition:opacity .9s ease,filter 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
  .final-cta.is-awake .final-cta-kicker,.final-cta.is-awake .final-cta-title,.final-cta.is-awake .final-cta-copy,.final-cta.is-awake .final-cta-button{opacity:1;filter:none;transform:none}
  .final-cta.is-awake .final-cta-title{transition-delay:.16s}.final-cta.is-awake .final-cta-copy{transition-delay:.32s}.final-cta.is-awake .final-cta-button{transition-delay:.58s}
  .final-cta-kicker{ color:#a98243; font-size:.68rem; letter-spacing:.45em; }
  .final-cta-title{ margin:2rem 0 1.5rem; color:var(--moon); font-size:clamp(1.9rem,6vw,5rem); font-weight:400; line-height:1.5; letter-spacing:.08em; text-wrap:balance; }
  .final-cta-copy{ max-width:34rem; margin:0 auto; color:#9295a0; line-height:2; }
  .final-cta-button{ position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:3rem; min-width:min(88vw,420px); margin-top:3.5rem; padding:1.4rem 1.6rem 1.4rem 2.2rem; overflow:hidden; border:1px solid #b9914c; background:rgba(31,23,14,.94); color:#eee5d1; font-family:"Shippori Mincho",serif; font-size:.92rem; letter-spacing:.22em; cursor:pointer; box-shadow:0 18px 60px rgba(113,77,29,.22),inset 0 0 45px rgba(185,145,76,.05); }
  .final-cta-button::before{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(105deg,transparent 30%,rgba(229,197,128,.16),transparent 68%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .final-cta-button span{ display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(210,174,102,.45); color:#d0aa64; font-family:Arial,sans-serif; font-size:1.2rem; letter-spacing:0; }
  .final-cta-button:hover{ transform:translateY(-6px)!important; border-color:#d7b66f; background:rgba(43,31,17,.98); box-shadow:0 28px 80px rgba(122,84,31,.3),inset 0 0 60px rgba(185,145,76,.09); }
  .final-cta-button:hover::before{transform:translateX(110%)}
  .final-cta-button:focus-visible{ outline:2px solid #fff4ce; outline-offset:5px; }

  /* 購入遷移インフォメーション・モーダル */
  .purchase-modal{ position:fixed; inset:0; width:min(92vw,680px); max-height:min(88vh,760px); margin:auto; padding:0; border:1px solid rgba(231,205,134,.32); color:var(--moon); background:rgba(5,7,15,.97); box-shadow:0 50px 140px rgba(0,0,0,.72),0 0 80px rgba(198,162,74,.08); overflow:auto; }
  .purchase-modal::backdrop{ background:rgba(1,2,6,.8); backdrop-filter:blur(14px) saturate(.72); -webkit-backdrop-filter:blur(14px) saturate(.72); }
  .modal-shell{ position:relative; padding:clamp(3rem,7vw,5.5rem); text-align:center; overflow:hidden; isolation:isolate; }
  .modal-shell::before{ content:""; position:absolute; width:380px; aspect-ratio:1; border-radius:50%; left:50%; top:-230px; transform:translateX(-50%); border:1px solid rgba(231,205,134,.25); box-shadow:0 0 80px rgba(198,162,74,.1),inset 0 0 70px rgba(231,205,134,.05); z-index:-1; }
  .modal-shell::after{ content:""; position:absolute; inset:1rem; border:1px solid rgba(198,162,74,.08); pointer-events:none; }
  .modal-close{ position:absolute; right:1.2rem; top:1.2rem; width:42px; height:42px; border:1px solid rgba(198,162,74,.2); background:transparent; color:var(--moon); cursor:pointer; font-size:1.3rem; transition:border-color .4s ease,background .4s ease; z-index:2; }
  .modal-close:hover{ border-color:var(--gold-bright); background:rgba(198,162,74,.1); }
  .modal-kicker{ color:var(--gold); font-family:"Cormorant Garamond",serif; font-size:.68rem; letter-spacing:.42em; text-transform:uppercase; }
  .modal-mark{ width:74px; aspect-ratio:1; margin:2rem auto; border-radius:50%; border:1px solid rgba(231,205,134,.38); display:grid; place-items:center; box-shadow:0 0 45px rgba(198,162,74,.12); }
  .modal-mark span{ width:9px; height:9px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 24px rgba(231,205,134,.82); }
  .modal-title{ margin:0; font-family:"Shippori Mincho",serif; font-size:clamp(1.5rem,4vw,2.25rem); font-weight:500; letter-spacing:.12em; line-height:1.8; }
  .modal-copy{ max-width:33rem; margin:1.5rem auto 0; color:var(--silver); font-size:.88rem; line-height:2; }
  .modal-action{ margin-top:2.5rem; min-width:180px; padding:1rem 2.4rem; border:1px solid #b9914c; background:#21180e; color:#eee5d1; box-shadow:inset 0 0 35px rgba(185,145,76,.06); font-family:"Shippori Mincho",serif; letter-spacing:.3em; cursor:pointer; transition:background .35s ease,border-color .35s ease,transform .35s ease; }
  .modal-action:hover{ background:#302111; border-color:#d3af64; transform:translateY(-3px); }
  .purchase-modal[open]{ animation:modalIn .65s cubic-bezier(.16,1,.3,1); }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }

  @media(prefers-reduced-motion:reduce){ .lunar-seal,.lunar-seal::before,.botanical-map .orbit,.botanical-map .node-core,.still-vapor,.still-drop{ animation:none!important; } .flow-char{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .entry-beam,.entry-ripple{display:none!important} .pour-section{height:100svh!important;min-height:620px!important}.pour-video{transform:none!important}.pour-lens{transform:translate(-50%,-50%)!important}.pour-orbit{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg)!important} }