/* 鬼ノ隠シ酒 ティザーサイト v2 ─ スクロール＝水深 */

:root{
  --abyss:#040a12;      /* 最深部（body の地） */
  --sea:#123a4c;        /* 現在の海色（JS が更新） */
  --ink:#e8e2d6;        /* 文字色は全て同じ生成り。灰色は使わない */
  --gold:#d2ab5c;
  --silver:#c3c8ce;
  --line:rgba(232,226,214,.28);
  --serif:"A1明朝","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --sans:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
  --display:"A1明朝","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --num:"Cormorant Garamond",serif;
  --caps:"Cinzel","Cormorant Garamond",serif;
  --goth:"New Rocker","Cinzel",serif;
  --w:1180px;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--abyss);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:500;
  font-size:15px;
  line-height:2.1;
  letter-spacing:0;
  font-feature-settings:"palt";
  /* 読みやすさのため文字を少しだけ太らせる（2026-09-15 辻指示）。游ゴシックは 600 以上が太字に飛ぶので、antialiased（細く見える）を外し、Retina では 0.35px の縁取りで一段だけ上げる（下の @media）。1x 画面では縁取りが 1px に丸まり太字に見えるため掛けない */
  overflow-x:hidden;
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-break:strict;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
b{font-weight:600}
.sp{display:none}
@media (max-width:767px){.sp{display:inline}}
/* 英字（ブラックレター・Cinzel・Cormorant の数字）は従来どおり antialiased・縁取りなし */
.en,.h2en,.kin__price b,.num b,.hero__scroll{-webkit-font-smoothing:antialiased}
@media (min-resolution:2dppx){
  body{-webkit-text-stroke:.2px currentColor}
  .en,.h2en,.kin__price b,.num b,.hero__scroll{-webkit-text-stroke:0}
}

/* ── 年齢確認 ─────────────────────── */
.age{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--abyss);padding:24px}
.age[hidden]{display:none}
.age__box{width:min(100%,480px);text-align:center;padding:48px 28px;border:1px solid var(--line)}
.age__logo{width:min(44%,164px);height:auto;margin:0 auto 26px}
.age__note{font-size:14px;line-height:1.9}
.age__q{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.6;margin:8px 0 26px}
.age__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.age__deny{margin-top:22px;font-size:14px}

/* ── ボタン ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 26px;
  font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.1em;line-height:1;
  border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;
  white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--fill{background:var(--ink);color:var(--abyss)}
.btn--fill:hover{background:var(--gold);border-color:var(--gold);color:var(--abyss)}
.btn--line:hover{background:rgba(232,226,214,.12)}
.btn--lg{min-height:60px;padding:0 40px;font-size:17px}

/* ── ローダー（深度計）────────────── */
.loader{position:fixed;inset:0;z-index:900;pointer-events:none}
.loader__bg{position:absolute;inset:0;background:linear-gradient(180deg,#0a1c2c 0%,#071624 55%,#050f1a 100%);transition:opacity 1.1s var(--ease)}
.loader__bubbles{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s var(--ease)}
/* 読み込み中のロゴ。FV のロゴと同じ位置・同じ大きさなので、海が現れても動かない */
.loader__logo{z-index:2}
.loader.is-done .loader__logo{opacity:0;transition:none}
.loader.is-done .loader__bubbles{opacity:0}
.loader.is-done .loader__bg{opacity:0}

/* ── 背景（海）────────────────────── */
.sea{position:fixed;inset:0;z-index:0;background:var(--sea);pointer-events:none;transition:background-color .2s linear}
.sea__ripple,.sea__rays,.sea__snow{position:absolute;inset:0;width:100%;height:100%}
.sea__ripple{display:none}
.sea.has-ripple .sea__ripple{display:block}
.sea.has-ripple .sea__rays{opacity:.7}
.sea__rays{mix-blend-mode:screen;opacity:.9}

/* ── ヘッダー（ハンバーガーのみ） ───────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:flex-start;
  padding:30px calc(var(--gut)/2) 22px;
  background:linear-gradient(180deg,rgba(4,10,18,.45) 0%,rgba(4,10,18,.16) 60%,rgba(4,10,18,0) 100%);
  opacity:0;transform:translateY(-8px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.header.is-on{opacity:1;transform:none}
.header__logo{display:block;line-height:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.header__logo img{width:clamp(119px,10.9vw,152px);height:auto}
/* FV のあいだは出さない。スクロールしてから中央に現れる */
.header.is-hero .header__logo{opacity:0;transform:translateY(-10px);pointer-events:none}
.header__menu{width:92px;height:46px;border:0;background:transparent;cursor:pointer;position:absolute;right:calc(var(--gut)/2);top:50%;margin-top:-23px}
.header__menu span{position:absolute;left:4px;width:84px;height:1px;background:var(--ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.header__menu span:nth-child(1){top:18px}.header__menu span:nth-child(2){top:27px}
.header__menu[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(18deg)}
.header__menu[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-18deg)}

/* ── メニュー（全幅オーバーレイ） ───────── */
.spnav{position:fixed;inset:0;z-index:90;
  /* 全面黒ではなく、右（メニュー側）が濃く左へ抜けていく半透明のグラデーション（2026-09-15 辻指示） */
  background:linear-gradient(90deg,rgba(4,10,18,0) 0%,rgba(4,10,18,0) 46%,rgba(4,10,18,.42) 60%,rgba(4,10,18,.86) 78%,rgba(4,10,18,.95) 100%);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.6vh,30px);padding:100px var(--gut) 60px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.spnav.is-open{opacity:1;visibility:visible}
.spnav__logo{align-self:flex-end;margin-bottom:clamp(10px,2.4vh,28px)}
.spnav__logo img{width:clamp(96px,9vw,132px);height:auto}
.spnav{text-align:right}
.spnav a{font-size:clamp(15px,1.5vw,21px);font-family:var(--display);font-weight:400;letter-spacing:.06em;align-self:flex-end}
.spnav>a:not(.spnav__logo){position:relative;padding-bottom:4px}
.spnav>a:not(.spnav__logo)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.spnav>a:not(.spnav__logo):hover::after{transform:scaleX(1);transform-origin:left}
.spnav__cta{margin-top:clamp(10px,2vh,22px);font-family:var(--sans)!important;font-size:14px!important;letter-spacing:.04em}
.spnav__cta::after{display:none}
@media (max-width:767px){
  .header{padding:14px 9px 14px}
  /* SP はハンバーガーを小さく、右上の角へ寄せる（2026-09-15 辻指示） */
  .header__menu{width:56px;height:40px;right:6px;top:8px;margin-top:0}
  .header__menu span{left:8px;width:40px}
  .header__menu span:nth-child(1){top:15px}.header__menu span:nth-child(2){top:23px}
  .header__menu[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(18deg)}
  .header__menu[aria-expanded="true"] span:nth-child(2){top:19px;transform:rotate(-18deg)}
  .spnav{padding:96px 18px 48px;
    /* SP は幅が狭いので左端も少し暗くして、下のリード文と重ならないようにする */
    background:linear-gradient(90deg,rgba(4,10,18,.5) 0%,rgba(4,10,18,.5) 30%,rgba(4,10,18,.86) 58%,rgba(4,10,18,.96) 100%)}
}

/* 差し替え前提の仮素材につける看板。公開前にこの2ルールごと消す */
.fig--kari .fig__win{outline:2px solid #e8336d;outline-offset:-2px}
.fig--kari::after{content:attr(data-kari);position:absolute;left:0;top:0;z-index:3;
  background:#e8336d;color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.04em;line-height:1;padding:9px 14px}

/* ── 共通：セクション ────────────── */
main{position:relative;z-index:1}
.sec{position:relative;padding:clamp(96px,10vw,150px) 0}
.sec__inner{position:relative;width:min(100% - var(--gut)*2,var(--w));margin:0 auto}
.sec__inner>*,.seasec__grid>*,.kin__pair>*,.work__item>*{min-width:0}
.h2en{font-family:var(--num);font-style:italic;font-weight:500;font-size:clamp(18px,1.6vw,24px);line-height:1.4;letter-spacing:.02em;margin-bottom:.6em}
.legend__text .h2en{text-align:center}
@media (max-width:767px){.legend__text .h2en{text-align:left}}
.en{font-family:var(--goth);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1;letter-spacing:.14em;margin-bottom:1.5em}
.legend__text .en{margin-bottom:0;writing-mode:vertical-rl;letter-spacing:.2em;padding-top:.2em}
@media (max-width:767px){.en{font-size:17px;margin-bottom:1.3em}}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.45vw,34px);line-height:1.6;letter-spacing:.06em;
  margin-bottom:.9em;
}
.p{font-family:var(--sans);font-size:clamp(14px,1.05vw,15px);line-height:2.3;letter-spacing:0;margin-bottom:1.6em}
.p:last-child{margin-bottom:0}
.note{font-size:13px;line-height:2;margin-top:2em;letter-spacing:0}
ruby{ruby-position:over;-webkit-ruby-position:before}
ruby rt{font-size:.5em;letter-spacing:.04em;font-weight:400;line-height:1;transform:translateY(.12em)}
.pull{
  font-family:var(--display);font-weight:400;font-size:clamp(16px,1.5vw,20px);line-height:1.9;letter-spacing:.08em;
  margin-top:2.6em
}

.fig{position:relative}
.fig__win{position:relative;overflow:hidden;background:#081521}
.fig picture{display:block;height:112%;margin-top:-6%}
.fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.8s var(--ease)}
.fig.is-in img{transform:scale(1)}
.fig figcaption{font-size:13px;line-height:1.9;margin-top:12px;letter-spacing:0}

/* 出現：水面から浮かび上がるように（ぼかし→鮮明） */
.reveal{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .fig img{transform:none}
}

/* ── ヒーロー ────────────────────── */
.hero{position:relative;min-height:100svh;overflow:hidden}
/* 下端で映像そのものを消し、固定背景の海へ溶かす（境目をつくらない） */
.hero__media{position:absolute;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 82%,rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 82%,rgba(0,0,0,0) 96%)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%}
.hero__video--sp{display:none}
/* 陰影は視差で動かさない。下端の手前で完全に海の色へ溶かし、次のセクションと同色で継ぐ */
.hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,0) 96%);
  background:
  linear-gradient(180deg,rgba(4,10,18,.70) 0%,rgba(4,10,18,.50) 30%,rgba(4,10,18,.40) 55%,rgba(4,10,18,.21) 80%,rgba(4,10,18,0) 96%),
  radial-gradient(ellipse at 50% 42%,rgba(4,10,18,0) 38%,rgba(4,10,18,.22) 100%)}
.hero__body{position:absolute;inset:0;z-index:2}
/* 中央：白抜き縦ロゴ */
.hero__logo{position:absolute;left:50%;top:46%;width:clamp(360px,38vw,552px);aspect-ratio:230.32/221.67;transform:translate(-50%,-42%)}
.hero__logo .hl{position:absolute;left:0;top:0;width:100%;height:auto;opacity:0;filter:blur(7px);
  transition:opacity 1.5s var(--ease),transform 1.5s var(--ease),filter 1.5s var(--ease)}
.hl--setouchi {transform:translateY(-22px)}
.hl--aging   {transform:translateY(18px)}
.hl--sake     {transform:translateY(26px)}
.hl--name     {transform:translate(10px,20px)}
.hl--seto   {transform:translateX(14px)}
.hl--kaitei   {transform:translateX(-14px)}
.hl--oni-left {transform:translate(-20px,24px) scale(1.03)}
.hl--oni-right{transform:translate(20px,24px) scale(1.03)}
html.is-logo .hl{opacity:1;transform:none;filter:none}
html.is-logo .hl--setouchi {transition-delay:.15s}
html.is-logo .hl--aging   {transition-delay:.33s}
html.is-logo .hl--sake     {transition-delay:.51s}
html.is-logo .hl--name     {transition-delay:.74s}
html.is-logo .hl--seto   {transition-delay:.92s}
html.is-logo .hl--kaitei   {transition-delay:1.04s}
/* 左右のイラストは遅れて現れる */
html.is-logo .hl--oni-left {transition-delay:1.28s;transition-duration:1.8s}
html.is-logo .hl--oni-right{transition-delay:1.68s;transition-duration:1.8s}
/* 出そろったあと、左右の絵だけがゆっくり漂う（出現の transition が終わってから始める） */
@keyframes hlFloatL{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes hlFloatR{0%,100%{transform:translateY(0)}46%{transform:translateY(-8px)}}
html.is-logo .hl--oni-left {animation:hlFloatL 9.5s 3.1s ease-in-out infinite}
html.is-logo .hl--oni-right{animation:hlFloatR 11.5s 3.5s ease-in-out infinite}

/* 右上：キャッチを縦書きで小さく */
.hero__title{
  position:absolute;right:18%;top:clamp(140px,20vh,240px);
  writing-mode:vertical-rl;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,1.78vw,26px);line-height:2;letter-spacing:.14em;
}
.hero__title .line{display:block;padding-left:.1em;margin-left:-.1em}
.hero__title .line>span{display:block;opacity:0;transition:opacity 1.4s var(--ease)}
.hero.is-in .hero__title .line:nth-child(1)>span{opacity:1;transition-delay:.35s}
.hero.is-in .hero__title .line:nth-child(2)>span{opacity:1;transition-delay:.6s}
/* 左下：リードと事実 */
.hero__foot{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(58px,7.4vh,92px);max-width:560px}
.hero__lead{font-family:var(--sans);font-size:clamp(13px,1.05vw,15px);line-height:2.3;letter-spacing:0;transition-delay:.7s}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 32px;font-size:12px;letter-spacing:0;line-height:1.8;transition-delay:.9s;border-top:1px solid var(--line);padding-top:18px}
.hero__facts div{display:flex;gap:12px;align-items:baseline}
.hero__facts dt{position:relative;padding-left:14px;white-space:nowrap}
.hero__facts dt::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--ink)}
.hero__facts dd{white-space:nowrap}
.hero__scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(22px,3.6vh,48px);z-index:2;
  font-family:var(--caps);font-size:11px;letter-spacing:.3em;display:flex;align-items:center;gap:14px}
/* 右の点が、ゆっくり上から下へ落ちるのをくり返す */
.hero__scroll i{width:5px;height:26px;position:relative;display:block}
.hero__scroll i::after{content:"";position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:var(--ink);animation:drop 2.6s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(0);opacity:0}18%{opacity:1}70%{transform:translateY(21px);opacity:1}92%,100%{transform:translateY(21px);opacity:0}}
@media (max-width:1023px){
  .hero__scroll{display:none}
}
@media (max-width:767px){
  .hero__video--pc{display:none}.hero__video--sp{display:block}
  .hero__logo{width:min(79vw,360px);top:46%}
  .hero__title{right:18px;top:84px;font-size:16px;line-height:1.9;letter-spacing:.1em}
  .hero__foot{left:20px;right:20px;bottom:72px}
  .hero__lead{font-size:13px;line-height:2.2}
  .hero__facts{gap:6px 0;flex-direction:column;font-size:12px}
  .hero__facts dd{white-space:normal}
}

/* ── 01 この酒について ───────────── */
.sec--about .sec__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,110px);align-items:center}
.about__fig .fig__win{aspect-ratio:4/3}
@media (max-width:767px){
  .sec--about .sec__inner{grid-template-columns:1fr;gap:48px}
}

/* ── 02 言い伝え ─────────────────── */
.sec--legend{padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(110px,12vw,170px)}
.legend__inner{display:grid;grid-template-columns:1fr;place-items:center}
.legend__text{position:relative;z-index:2;width:auto;max-width:100%;display:flex;flex-direction:row-reverse;justify-content:center;align-items:flex-start;gap:clamp(32px,4vw,64px)}
.legend__text .h2{writing-mode:vertical-rl;margin:0;line-height:1.4;letter-spacing:.1em;padding-top:.2em}
.legend__story{writing-mode:vertical-rl;height:clamp(470px,60vh,620px);
  --fs:clamp(15px,1.2vw,17px);--pitch:calc(var(--fs) * 2);font-size:var(--fs)}
/* 列の間隔（＝line-height）を全段落でそろえ、段落間は 0.7 列ぶん空ける
   （2026-09-15：原稿が 9列→15列に増え、イラストが画面外に見切れたため 2.4→2.0・段落間 1列→0.7列に詰めた） */
.legend__story p{font-family:var(--serif);font-weight:500;font-size:var(--fs);line-height:var(--pitch);letter-spacing:.06em;margin:0 0 0 calc(var(--pitch) * .7)}
.legend__story p br{display:inline}  /* 列の折り返しは <br> の位置で固定（長い文を途中で切らない） */
.legend__key{font-family:var(--display)!important;font-weight:400;font-size:calc(var(--fs) * 1.75)!important;line-height:var(--pitch)!important;margin:0 0 0 var(--pitch)!important;padding:0}
.legend__last{font-family:var(--display)!important;font-weight:400;font-size:calc(var(--fs) * 1.12)!important;line-height:var(--pitch)!important;margin:0 0 0 var(--pitch)!important}
.legend__oni{position:absolute;z-index:3;width:clamp(220px,22vw,400px);height:auto;pointer-events:none;display:block}
/* 視差は外側（picture）、ふわふわは内側（img）に分けて掛ける */
.legend__oni img{width:100%;height:auto;animation:oniFloat 9s ease-in-out infinite;will-change:transform}
.legend__oni--ao img{animation-duration:11.5s;animation-delay:-4s}
@keyframes oniFloat{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  30%{transform:translate3d(5px,-14px,0) rotate(.9deg)}
  60%{transform:translate3d(-4px,-22px,0) rotate(-.7deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@media (prefers-reduced-motion:reduce){.legend__oni img{animation:none}}
html.is-static .legend__oni img{animation:none}
.fade{opacity:0;transition:opacity 1.8s var(--ease)}
.fade.is-in{opacity:1}

.legend__text .note{text-align:center}
@media (max-width:1023px){

}
@media (max-width:767px){
  .legend__inner{min-height:0;display:flex;flex-direction:column}
  /* SP の鬼は PC 比で半分程度に（2026-09-15 辻指示）。赤鬼は左寄せ、青鬼は右寄せで動きを出す */
  .legend__oni{position:static;width:min(46%,190px);transform:none!important}
  .legend__text .legend__oni--aka{margin:0 auto 28px 0}
  .legend__text .legend__oni--ao{margin:32px 0 0 auto}
  .legend__text{width:100%;display:flex;flex-direction:column}
  .legend__oni--aka{order:-1}
  .legend__oni--ao{order:9}
  .legend__text .en{writing-mode:horizontal-tb;margin-bottom:1.3em;letter-spacing:.14em;padding:0}
  .legend__text .h2{writing-mode:horizontal-tb;margin-bottom:.9em;letter-spacing:.04em;padding:0}
  .legend__story{writing-mode:horizontal-tb;height:auto;text-align:left}
  .legend__story p{margin:0 0 1.4em;line-height:2.3}
  .legend__story p br{display:inline}
  .legend__key{margin:1.2em 0 1.4em!important;padding:0}
  .legend__last{margin-left:0!important}
}

/* ── 03 海の底で ─────────────────── */
.work__head{max-width:640px;margin-bottom:clamp(56px,7vw,96px)}
.work__list{display:grid;gap:clamp(64px,9vw,120px)}
.work__item{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
.work__item:nth-child(even){grid-template-columns:1fr 1.25fr}
.work__item:nth-child(even) .work__media{order:2}
.work__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#081521}
.work__media video{width:100%;height:112%;object-fit:cover;margin-top:-6%}
.work__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,0) 55%,rgba(4,10,18,.45) 100%);pointer-events:none}
.work__num{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,27px);line-height:1;display:block;margin-bottom:20px;letter-spacing:.1em}
.work__num em{font-style:normal;font-size:.46em;letter-spacing:.14em;margin-right:.3em;vertical-align:.14em}
.work__text h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.7;margin-bottom:.7em}
.work__text p{font-size:clamp(14px,1.05vw,15px);line-height:2.2}
@media (max-width:767px){
  .work__item,.work__item:nth-child(even){grid-template-columns:1fr;gap:20px}
  .work__item:nth-child(even) .work__media{order:0}
  .work__media{aspect-ratio:4/5}
  }

/* ── 04 海のこと ─────────────────── */
.seasec__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center;margin-bottom:clamp(72px,9vw,120px)}
.seasec__fig .fig__win{aspect-ratio:4/3}
/* 大成生コンのロゴ（先方支給 logo-1.png を #e8e2d6 に単色化。元が 275px 幅なので 2倍密度になる 138px で表示） */
.seasec__partner{margin-top:.6em}
.seasec__logo{display:block;width:138px;margin:0 0 14px}
.seasec__logo img{width:100%;height:auto}
.seasec__partner .kin__link{margin-top:0}
.cycle{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cycle li{position:relative;padding:36px 18px;text-align:center}
.cycle li+li::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:1px;background:var(--ink)}
.cycle b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1.3;margin-bottom:6px}
.cycle span{font-size:13px;letter-spacing:0;white-space:nowrap}
@media (max-width:767px){
  .seasec__grid{grid-template-columns:1fr;gap:40px}
  .cycle{grid-template-columns:1fr 1fr}
  .cycle li{padding:26px 10px}
  .cycle li:nth-child(3)::before{display:none}
  .cycle li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ── 05 金と銀 ───────────────────── */
.kin__head{max-width:640px;margin-bottom:clamp(48px,6vw,80px)}
.kin__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);margin-bottom:clamp(56px,7vw,96px)}
.kin__card{position:relative;padding:clamp(24px,3vw,40px) 0;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,40px);align-items:start}
.kin__card::before{content:none}
.kin__card--kin::before{background:linear-gradient(90deg,rgba(210,171,92,0),var(--gold),rgba(210,171,92,0))}
.kin__card--gin::before{background:linear-gradient(90deg,rgba(195,200,206,0),var(--silver),rgba(195,200,206,0))}
.kin__glyph{position:absolute;right:-6px;bottom:-26px;font-family:var(--display);font-weight:400;font-size:clamp(120px,14vw,200px);line-height:1;pointer-events:none}
.kin__card--kin .kin__glyph{color:var(--gold);opacity:.12}
.kin__card--gin .kin__glyph{color:var(--silver);opacity:.12}
.kin__logo{width:clamp(56px,6vw,84px);height:clamp(120px,13vw,180px);display:flex;align-items:center;justify-content:center}
.kin__logo img{max-width:100%;max-height:100%;width:auto;height:auto}
.kin__body{position:relative;z-index:1;min-width:0}
.kin__card h3{font-family:var(--display);font-weight:400;font-size:clamp(15px,1.3vw,18px);line-height:1.6;margin-bottom:.6em}
.kin__data{font-size:13px;line-height:1.9;margin-bottom:1.2em}
.kin__data div{display:flex;gap:14px}
.kin__data dt{flex:0 0 3.2em;white-space:nowrap}
.kin__data dd{min-width:0}
.kin__card p{font-size:14px;line-height:2}
.kin__link{display:inline-block;margin-top:14px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:2px}
.kin__link:hover{border-color:var(--ink)}
.kin__fig{width:min(100%,900px);margin:0 auto clamp(40px,5vw,64px)}
.kin__fig .fig__win{aspect-ratio:16/9}
.kin__spec{text-align:center;font-size:clamp(14px,1.05vw,15px);line-height:2.3}
.kin__mark{display:block;width:clamp(210px,26.6vw,378px);max-width:100%;height:auto;margin:0 auto clamp(28px,3.4vw,48px)}
.kin__price{font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);margin:.4em 0}
.kin__price b{font-family:var(--num);font-weight:500;font-size:2em;line-height:1;margin:0 .1em;letter-spacing:.02em;font-variant-numeric:lining-nums}
.kin__price span{font-size:.8em}
@media (max-width:767px){
  .kin__pair{grid-template-columns:1fr}
  .kin__glyph{font-size:120px}
  .kin__card{grid-template-columns:1fr;gap:20px}
  .kin__logo{height:110px;width:auto;justify-content:flex-start}
}

/* ── 06 数字 ─────────────────────── */
.num{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.num li{padding:clamp(28px,3.4vw,44px) clamp(18px,2.4vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.num b{display:block;font-family:var(--num);font-weight:400;font-size:clamp(48px,5.4vw,80px);line-height:1;letter-spacing:.01em;margin-bottom:14px;font-variant-numeric:lining-nums tabular-nums}
.num b em{font-style:normal;font-family:var(--serif);font-size:.3em;margin-right:.3em;vertical-align:middle}
.num b small{font-family:var(--serif);font-size:.28em;margin-left:.2em;vertical-align:baseline}
.num li>span{font-size:13px;letter-spacing:0;line-height:1.8;white-space:nowrap}
.num--zero b{color:var(--gold)}
@media (max-width:767px){
  .num{grid-template-columns:1fr 1fr}
  .num li{padding:24px 14px}
  .num b{font-size:38px;white-space:nowrap}
  .num li>span{white-space:normal;font-size:12px}
}

/* ── 07 クラウドファンディング ────── */
.sec--cf .sec__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,110px);align-items:center}
.cf__box{padding:clamp(40px,5vw,72px) clamp(28px,4vw,64px);border:1px solid var(--line);background:rgba(4,10,18,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cf__actions{margin-top:2.6em}
.cf__sub{font-size:13px;line-height:2;margin-top:14px;letter-spacing:0}
.cf__ig{display:inline-block;margin-top:22px;font-size:14px;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:2px}
.cf__ig:hover{border-color:var(--ink)}
.cf__fig .fig__win{aspect-ratio:4/3}
@media (max-width:767px){
  .sec--cf .sec__inner{grid-template-columns:1fr;gap:40px}
  .btn--lg{width:100%;padding:0 16px;font-size:15px}
}

/* ── フッター ────────────────────── */
.footer{position:relative;z-index:1;padding:clamp(80px,10vw,140px) 0 40px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(4,10,18,0),rgba(4,10,18,.7))}
.footer__inner{width:min(100% - var(--gut)*2,var(--w));margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:48px;align-items:start;padding-bottom:64px}
.footer__brand img{width:min(58%,190px);height:auto;margin-bottom:14px}
.footer__company{font-size:14px;line-height:2.2}
.footer__links{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}
.footer__nav{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:2}
.footer__legal{width:min(100% - var(--gut)*2,var(--w));margin:0 auto;border-top:1px solid var(--line);padding-top:32px;font-size:12px;line-height:2.1;letter-spacing:0;position:relative}
.footer__legal p{margin-bottom:.8em}
.footer__copy{margin-top:1.6em;padding-bottom:40px}
.footer__top{position:absolute;right:0;bottom:40px;font-size:12px;letter-spacing:.1em;border-bottom:1px solid var(--line);padding-bottom:2px}
@media (max-width:1023px){.footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:767px){
  .footer__inner{grid-template-columns:1fr;gap:36px}
  .footer__top{position:static;margin:12px 0 0 auto;display:block;width:max-content}
}

/* ── 確認用（?static）：全画面キャプチャ時にビューポート依存を固定 ── */
html.is-static .hero{min-height:900px;height:900px}
html.is-static .legend__inner{min-height:0}
html.is-static .hero__scroll{display:none}
@media (max-width:767px){html.is-static .hero{min-height:844px;height:844px}}
html.is-static .reveal,html.is-static .fade,html.is-static .fig img,html.is-static .hero__title .line>span,html.is-static .header{transition:none!important;transform:none!important;filter:none!important;opacity:1!important}
html.is-static .hero__logo{transform:translate(-50%,-42%)!important}
html.is-static .hl{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
html.is-static .header__logo{opacity:1!important;transform:none!important}
html.is-static body{position:relative}
html.is-static{--sea:#133d50}
html.is-static .sea{position:absolute;height:100%;background:linear-gradient(180deg,#133d50 0,#133d50 900px,#0f3346 1500px,#0a2233 2600px,#061524 3900px,#050d18 5400px,#040a12 100%)}

/* 海底に着いたら、砂地を薄く敷く（JS が .is-seabed を付ける） */
.sea__floor{position:absolute;inset:0;background:url(../img/depth-gauge-1600.jpg) center/cover no-repeat;opacity:0;transition:opacity 1.6s var(--ease)}
.sea.is-seabed .sea__floor{opacity:.18}

/* ── 開始のお知らせ登録 ── */
.notify__label{display:block;font-family:var(--display);font-weight:400;font-size:clamp(14px,1.15vw,16px);line-height:1.6;margin-bottom:14px}
.notify__row{display:flex;gap:10px;max-width:520px}
.notify__input{flex:1;min-width:0;height:52px;padding:0 16px;border:1px solid var(--ink);background:rgba(4,10,18,.35);color:var(--ink);font-family:var(--sans);font-size:15px;letter-spacing:0;border-radius:0;-webkit-appearance:none}
.notify__input::placeholder{color:var(--ink);opacity:1}
.notify__input:focus{outline:none;background:rgba(232,226,214,.08)}
.notify__btn{height:52px;padding:0 22px;white-space:nowrap}
.notify__note{font-size:12px;line-height:1.9;margin-top:12px;letter-spacing:0}
.notify__done{font-size:14px;line-height:1.9;margin-top:12px}
@media (max-width:767px){.notify__row{flex-direction:column}.notify__btn{width:100%}}

/* ── ランダム配置（言い伝えの周囲） ── */
.sec--legend .legend__inner{position:relative;min-height:clamp(860px,100vh,1180px)}
.scat{position:absolute;z-index:1;pointer-events:none}
.scat figcaption{font-size:11px;margin-top:8px}
.scat--1{left:calc(50% - min(48vw,690px));top:-4%;width:clamp(180px,20vw,300px)}
.scat--2{right:calc(50% - min(47vw,680px));top:-2%;width:clamp(120px,12vw,180px)}
.scat--2 .fig__win{aspect-ratio:3/4}
.scat--3{left:calc(50% - min(38vw,540px));bottom:-10%;width:clamp(120px,13vw,190px)}
.scat--4{right:calc(50% - min(46vw,660px));bottom:-12%;width:clamp(160px,18vw,260px)}
.scat--4 .fig__win{aspect-ratio:4/3}
.legend__oni--aka{right:100%;left:auto;top:-14%;margin-right:clamp(2px,0.8vw,16px)}
.legend__oni--ao{left:100%;right:auto;top:20%;margin-left:clamp(2px,0.8vw,16px)}
@media (max-width:1023px){
  .scat--1{left:0}.scat--2{right:0}.scat--3{left:0}.scat--4{right:0}
}
@media (max-width:767px){
  .scat{position:static;width:auto;pointer-events:auto}
  .legend__inner{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}
  .legend__text{grid-column:1/-1}
  .scat--1{grid-column:1/-1;order:5}.scat--2{order:6;margin-top:24px}.scat--3{order:7}.scat--4{grid-column:1/-1;order:8}
}
/* ── この酒のこと：重ねたコラージュ ── */
.about__gallery{position:relative;min-height:clamp(460px,46vw,700px)}
.about__main{position:absolute;right:0;top:0;width:82%}
.about__main .fig__win{aspect-ratio:4/3}
.about__sub{position:absolute;left:-6%;top:54%;width:46%}
.about__sub .fig__win{aspect-ratio:4/3}
.about__tiny{position:absolute;right:4%;top:88%;width:24%}
.about__tiny .fig__win{aspect-ratio:4/3}
.sec--about .sec__inner{align-items:start}
@media (max-width:767px){
  .about__gallery{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
  .about__main,.about__sub,.about__tiny{position:static;width:auto}
  .about__main{grid-column:1/-1}
  .about__tiny{margin-bottom:28px}
}
/* ── 海に残すもの：2枚ずらし ── */
.seasec__grid{align-items:start}
.seasec__fig{margin-top:-8%;width:92%;margin-left:auto}
.seasec__sub{width:46%;margin:-14% 0 0 -6%}
.seasec__sub .fig__win{aspect-ratio:4/3}
.seasec__sub figcaption{font-size:11px}
@media (max-width:767px){
  .seasec__fig{margin:0;width:100%}
  .seasec__sub{width:60%;margin:14px 0 0 auto}
}

/* ── 全幅の区切り（背景写真・動画） ── */
.bleed{position:relative;height:clamp(520px,86vh,880px);overflow:hidden;z-index:1}
.bleed--tall{height:clamp(560px,96vh,960px)}
.bleed__media{position:absolute;left:0;right:0;top:-14%;bottom:-14%}
.bleed__media picture,.bleed__media img,.bleed__media video{display:block;width:100%;height:100%;object-fit:cover}
.bleed__shade{position:absolute;inset:0;background:linear-gradient(180deg,var(--sea) 0%,rgba(4,10,18,.05) 22%,rgba(4,10,18,.05) 70%,var(--sea) 100%)}
.bleed__text{position:absolute;left:var(--gut);bottom:clamp(48px,8vh,96px);font-family:var(--display);font-weight:400;font-size:clamp(16px,1.6vw,23px);line-height:1.9;letter-spacing:.08em}
.bleed__text--center{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.bleed__text--center.reveal{transform:translate(-50%,-50%) translateY(26px)}
.bleed__text--center.reveal.is-in{transform:translate(-50%,-50%)}
@media (max-width:767px){
  .bleed{height:72vh}.bleed--tall{height:80vh}
  .bleed__text{font-size:16px}
  .bleed__text--center{white-space:normal;width:calc(100% - 40px)}
}
/* 作業：全幅の項目 */
.work__item--bleed{display:block;position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(520px,84vh,860px);overflow:hidden}
.work__item--bleed .work__media{position:absolute;left:0;right:0;top:-12%;bottom:-12%;aspect-ratio:auto;background:none}
.work__item--bleed .work__media video{height:100%;margin:0}
.work__item--bleed .work__media::after{background:linear-gradient(180deg,var(--sea) 0%,rgba(4,10,18,.05) 25%,rgba(4,10,18,.2) 70%,var(--sea) 100%)}
.work__item--bleed .work__text{position:absolute;left:var(--gut);bottom:clamp(48px,8vh,96px);max-width:560px}
.work__item--bottom .work__text{left:auto;right:var(--gut);text-align:right}
.work__list{gap:clamp(48px,6vw,96px)}
.work__item:not(.work__item--bleed){grid-template-columns:1fr 1.25fr}
.work__item:not(.work__item--bleed) .work__media{order:2;width:92%;margin-left:auto}
@media (max-width:767px){
  .work__item--bleed{height:70vh}
  .work__item--bleed .work__text{left:20px;right:20px;bottom:36px}
  .work__item--bottom .work__text{text-align:left}
  .work__item:not(.work__item--bleed) .work__media{order:0;width:100%}
}
/* CF：箱を中央に */
.sec--cf .sec__inner{display:block}
.cf__box{width:min(100%,760px);margin:0 auto}
html.is-static .bleed{height:820px}html.is-static .bleed--tall{height:900px}html.is-static .work__item--bleed{height:800px}
@media (max-width:767px){html.is-static .bleed,html.is-static .bleed--tall,html.is-static .work__item--bleed{height:560px}}
@media (max-width:767px){.work__item:not(.work__item--bleed){grid-template-columns:1fr}}
html.is-static .bleed__text--center{transform:translate(-50%,-50%)!important}

/* 縦組みでは横組み用の文字詰め（palt）を切る。掛けたままだと字が列の中心から左右にぶれる */
.hero__title,.legend__text .en,.legend__text .h2,.legend__story,.legend__story p{
  font-feature-settings:normal;
  font-kerning:none;
}