/* ============================================================
   KUSHITANI CAFE — 白基調 / チェッカーフラッグ / 赤は差し色のみ
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --tint:#F6F4F0;
  --tint-2:#EDEAE3;
  --ink:#3E3A37;
  --ink-2:#6E6862;
  --ink-3:#9C958D;
  --line:#E3DFD8;
  --red:#C4262E;
  --dark:#17140F;
  --maxw:1280px;
  --gut:clamp(20px,5vw,72px);
  /* ロゴは縦長のエンブレム。幅で指定すると背が高くなるので高さで揃える。
   縦横比は差し替えで変わるため svg_size() が viewBox から読んで width/height に流す */
  --logo-h:clamp(46px,5.6vw,64px);
  /* ヘッダーの高さ。ロゴかナビ(英字+日本語の2行)の高い方 + 上下の余白。
     JSが動けば実測値で上書きするので、これは読み込み直後用の見積もり。 */
  --header-h:calc(max(var(--logo-h), 62px) + 26px);
  --ease:cubic-bezier(.16,1,.3,1);
  /* 見出しは Barlow Condensed。以前は Anton だったが400(極太)しか無く
     太さを調整できなかったため差し替えた(2026-08-10 指示)。UIと同じ書体なので
     読み込みも1つ減っている。太さは --f-display-w で一括調整できる。 */
  --f-display:"Barlow Condensed","Noto Sans JP",sans-serif;
  --f-display-w:600;
  --f-ui:"Barlow Condensed","Noto Sans JP",sans-serif;
  --f-body:"Noto Sans JP",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  margin:0;font-family:var(--f-body);font-size:16px;line-height:1.95;
  color:var(--ink);background:var(--paper);overflow-x:hidden;
  font-feature-settings:"palt";text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit}
iframe{max-width:100%}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center}
.measure{max-width:44em;margin-inline:auto;color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:300;background:#fff;padding:10px 16px;border:2px solid var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.img-missing{
  display:grid;place-items:center;aspect-ratio:4/3;background:var(--tint-2);
  color:var(--ink-3);font-family:var(--f-ui);letter-spacing:.2em;font-size:13px;
}

/* セクション区切りのチェッカーフラッグ柄は不要との指示で撤去(2026-08-10)。
   区切りは band の余白と背景色(--tint)の切り替えだけで付ける。 */

/* ---- モーション(動きを減らす設定は全部止める) ----
   隠すのは JS が動いているときだけ。JSが無い/失敗した場合に本文が
   透明のまま消えてしまわないよう、.js が付いて初めて非表示にする。 */
.js [data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease) var(--d,0ms),transform .95s var(--ease) var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================== ヘッダー ============================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease),background .4s ease,border-color .4s ease;
}
.site-header.is-over{background:transparent;border-color:transparent;backdrop-filter:none}
.site-header.is-over .site-header__logo img{filter:brightness(0) invert(1)}
.site-header.is-over .site-nav a,.site-header.is-over .nav-toggle span{color:#fff}
.site-header.is-over .nav-toggle span{background:#fff}
.site-header.is-over::before{
  content:"";position:absolute;inset:0 0 -40px;pointer-events:none;
  background:linear-gradient(rgba(12,10,8,.46),rgba(12,10,8,0));
}
.site-header.is-hidden{transform:translateY(-102%)}
.site-header__inner{
  max-width:var(--maxw);margin-inline:auto;padding:12px var(--gut);min-height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;
}
.site-header__logo img{height:var(--logo-h);width:auto;transition:filter .4s ease}
.site-nav ul{display:flex;gap:clamp(14px,2.4vw,34px)}
.site-nav a{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 2px;position:relative;transition:color .3s ease;
}
.site-nav .en{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em}
.site-nav .ja{font-size:10px;letter-spacing:.08em;color:var(--ink-3);transition:color .3s ease}
.site-header.is-over .site-nav .ja{color:rgba(255,255,255,.78)}
.site-nav a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--red);
  transform:translateX(-50%);transition:width .4s var(--ease);
}
.site-nav a:hover::after,.site-nav li.is-active a::after{width:100%}
@media (max-width:860px){.site-nav{display:none}}

.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:860px){.nav-toggle{display:flex}}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;
  display:grid;place-content:center;gap:40px;text-align:center;
}
.drawer[hidden]{display:none}
.drawer ul{display:grid;gap:22px}
.drawer a{display:grid;gap:2px}
.drawer .en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:34px;letter-spacing:.03em;line-height:1}
.drawer .ja{font-size:12px;letter-spacing:.24em;color:rgba(255,255,255,.6)}
.drawer__sns{display:flex;justify-content:center}

/* ============================== ヒーロー ============================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;color:#fff}
.hero__media{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,8,.42) 0%,rgba(12,10,8,.14) 38%,rgba(12,10,8,.78) 100%);
}
.hero__body{position:relative;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(88px,13vh,150px);width:100%}
.hero__eyebrow,.hero__title,.hero__lead{overflow:hidden}
.hero__eyebrow span,.hero__title span,.hero__lead span{display:block;transform:translateY(115%);animation:riseIn 1.1s var(--ease) forwards}
.hero__eyebrow span{animation-delay:.15s}
.hero__title span{animation-delay:.28s}
.hero__lead span{animation-delay:.42s}
@keyframes riseIn{to{transform:none}}
.hero__eyebrow{font-family:var(--f-ui);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:14px}
.hero__title{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(52px,11.5vw,168px);line-height:.88;letter-spacing:.01em;margin-bottom:12px}
.hero__lead{font-size:clamp(16px,2.2vw,25px);font-weight:500;letter-spacing:.05em;margin-bottom:16px}
.hero__text{max-width:40em;color:rgba(255,255,255,.84);font-size:15px;opacity:0;animation:fadeIn .9s ease .8s forwards}
@keyframes fadeIn{to{opacity:1}}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;opacity:0;animation:fadeIn .9s ease .95s forwards}
.hero__scroll{
  position:absolute;right:var(--gut);bottom:clamp(88px,13vh,150px);
  display:grid;gap:10px;justify-items:center;font-family:var(--f-ui);
  font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.8);
}
.hero__scroll i{display:block;width:1px;height:56px;background:rgba(255,255,255,.45);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:#fff;animation:scrollLine 2.4s ease-in-out infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:700px){.hero__scroll{display:none}}

/* ---- 4つの看板へのショートカット ---- */
.quick{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,52px)}
.quick__list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vw,28px)}
@media (max-width:700px){.quick__list{grid-template-columns:repeat(2,1fr);gap:24px}}
.quick__list a{display:grid;justify-items:center;gap:6px;padding:10px 4px}
.quick__pic{display:grid;place-items:center}
.quick__img{
  height:clamp(84px,13vw,148px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(23,20,15,.18));
  transition:transform .6s var(--ease);
}
.quick__list a:hover .quick__img{transform:translateY(-8px) scale(1.06)}
.quick__en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(15px,2vw,22px);letter-spacing:.03em;line-height:1.2;text-align:center}
.quick__ja{font-family:var(--f-ui);font-size:12px;letter-spacing:.22em;color:var(--ink-3);font-weight:600}

/* ---- 流れる帯 ---- */
.marq{
  --dur:44s;overflow:hidden;border-block:1px solid var(--line);
  background:var(--paper);padding:clamp(10px,1.7vw,20px) 0;
}
.marq__track{display:flex;width:max-content;animation:marq var(--dur) linear infinite}
.marq--rev .marq__track{animation-direction:reverse}
.marq__group{display:flex;align-items:center;gap:clamp(22px,3.6vw,52px);padding-right:clamp(22px,3.6vw,52px)}
.marq b{
  font-family:var(--f-display);font-weight:var(--f-display-w);line-height:1;
  font-size:clamp(26px,4.6vw,62px);letter-spacing:.035em;white-space:nowrap;
}
.marq i{width:9px;height:9px;background:var(--red);border-radius:50%;flex:0 0 auto}
.marq--out b{color:transparent;-webkit-text-stroke:1px var(--ink-3)}
.marq--out i{background:var(--ink-3)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================== 汎用ブロック ============================== */
.band{padding:clamp(64px,9vw,132px) 0}
.band--flush{padding:clamp(44px,6vw,84px) 0}
.band--tint{background:var(--tint)}
.band--intro{padding-bottom:clamp(24px,4vw,56px)}
.band--concept{background:var(--tint)}
.band--gelato{background:var(--tint);overflow:hidden}
.band--social{background:var(--tint)}

.sec-title{margin-bottom:clamp(22px,3.4vw,44px)}
.sec-title h2,.sec-title h3{display:grid;gap:4px;line-height:1}
.sec-title .en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(30px,5.4vw,64px);letter-spacing:.02em}
.sec-title .ja{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.3em;color:var(--ink-3)}
.center .sec-title h2,.band--intro .sec-title h2{justify-items:center}

.lead-lg{font-size:clamp(19px,2.5vw,29px);font-weight:500;line-height:1.65;margin-bottom:16px}
.note{font-size:13px;color:var(--ink-3);line-height:1.9}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.4vw,68px);align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 28px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.14em;
  position:relative;overflow:hidden;transition:color .4s var(--ease);
}
.btn span,.btn i{position:relative;z-index:1}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:translateX(-101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:none}
.btn:hover i{transform:translateX(5px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--onDark{border-color:rgba(255,255,255,.5);color:#F3F0EA}
/* 写真の上に置くボタン。地も枠も白にして、暗い背景でも確実に読めるようにする
   (以前は btn--ghost で文字色が濃く、ヒーロー写真に沈んでいた) */
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{color:#fff}
.text-link{
  font-family:var(--f-ui);font-weight:600;letter-spacing:.1em;font-size:15px;
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s ease,color .3s ease;
}
.text-link:hover{border-color:var(--red);color:var(--red)}
.band__body .btn,.band__body .sec-title{margin-top:0}
.band__body .btn{margin-top:22px}
.center .btn{margin-top:30px}

/* ============================== 4つの看板 ============================== */
.sig{position:relative;padding:clamp(72px,10vw,146px) 0;overflow:clip}
.sig--alt{background:var(--tint)}
.sig__wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative}
.sig__no{
  position:absolute;top:-.36em;right:-.04em;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(150px,24vw,330px);line-height:.75;
  color:transparent;-webkit-text-stroke:1.2px var(--line);
}
.sig--alt .sig__no{-webkit-text-stroke-color:#DBD5CB}
.sig--rev .sig__no{right:auto;left:-.04em}
.sig__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,5vw,76px);align-items:center;
}
.sig--rev .sig__media{order:-1}
@media (max-width:900px){
  .sig__grid{grid-template-columns:1fr;gap:34px}
  .sig--rev .sig__media{order:0}
}
.sig__eyebrow{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.3em;color:var(--red);margin-bottom:14px}
.sig__head{display:grid;gap:6px;margin-bottom:22px}
.sig__en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(42px,7vw,100px);line-height:.9;letter-spacing:.01em}
.sig__ja{font-family:var(--f-ui);font-weight:600;font-size:clamp(14px,1.6vw,18px);letter-spacing:.34em;color:var(--ink-2)}
.sig__catch{font-size:clamp(17px,2.1vw,24px);font-weight:500;line-height:1.7;margin-bottom:16px}
.sig__text{color:var(--ink-2);max-width:34em;margin-bottom:24px}
.sig__spec{
  display:inline-block;font-family:var(--f-ui);font-weight:600;font-size:16px;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:999px;padding:6px 20px;margin-bottom:26px;background:var(--paper);
}
/* ---- 受賞（賞状のように、本文から独立させて置く） ---- */
.award{
  position:relative;margin:0 0 26px;padding:20px 22px 18px;
  border:1px solid var(--line);border-left:3px solid var(--red);background:var(--paper);
  max-width:34em;
}
/* メダル画像は白バックの撮影なので、カードも不透明な白にして継ぎ目を出さない */
.sig--alt .award{background:var(--paper)}
.award--medal{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.award__medal img{
  width:clamp(84px,11vw,132px);height:auto;
  filter:drop-shadow(0 8px 14px rgba(23,20,15,.18));
}
@media (max-width:520px){
  .award--medal{grid-template-columns:1fr;justify-items:center}
  .award__medal{margin-bottom:4px}
  .award--medal .award__body{text-align:center}
  .award--medal .award__dl{justify-items:center}
}
.award__en{
  font-family:var(--f-ui);font-weight:700;font-size:11px;letter-spacing:.26em;
  color:var(--red);margin-bottom:6px;
}
.award__title{font-size:clamp(16px,1.9vw,20px);font-weight:500;line-height:1.5;margin-bottom:14px}
.award__dl{
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;
  font-size:13px;line-height:1.75;margin:0 0 12px;
}
.award__dl dt{
  font-family:var(--f-ui);font-weight:600;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap;
}
.award__dl dd{margin:0}
.award__note{font-size:12px;color:var(--ink-3);line-height:1.8}
@media (max-width:520px){
  .award{padding:16px 16px 14px}
  .award__dl{grid-template-columns:1fr;gap:2px}
  .award__dl dd{margin-bottom:6px}
}

.sig__media{position:relative;display:grid;justify-items:center;align-content:center;gap:18px}
.sig__stage{position:relative;display:grid;place-items:center;width:100%;min-height:clamp(220px,30vw,340px)}
.sig__glow{
  position:absolute;inset:8% 6% 6%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(23,20,15,.14),rgba(23,20,15,0) 72%);
}
/* 縦長の商品は高さ基準、横長(--wide)は幅基準。どちらか一辺を確定させておかないと、
   読み込み前の高さが0になり、写真が入った瞬間にページが飛ぶ(レイアウトシフト)。 */
.sig__hero-img{
  position:relative;z-index:1;height:clamp(250px,40vw,460px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 30px 42px rgba(23,20,15,.24));
  animation:floaty 8s ease-in-out infinite;
  transition:opacity .45s ease;
}
.sig__hero-img.is-wide{height:auto;width:100%;max-width:min(100%,560px)}
.sig__hero-img.is-swapping{opacity:0}
@keyframes floaty{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
.sig__subs{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sig__sub{
  border:1px solid transparent;background:none;padding:6px;cursor:pointer;border-radius:4px;
  display:grid;place-items:center;transition:border-color .3s ease,transform .5s var(--ease);
}
.sig__sub:hover{transform:translateY(-5px)}
.sig__sub.is-current{border-color:var(--line);background:rgba(255,255,255,.7)}
.sig__sub-img{width:clamp(42px,6vw,64px);height:auto;filter:drop-shadow(0 8px 10px rgba(23,20,15,.16))}
.sig__scene{
  position:absolute;z-index:0;right:-2%;bottom:-4%;width:clamp(120px,21vw,230px);
  border:5px solid var(--paper);box-shadow:0 18px 34px rgba(23,20,15,.16);
}
.sig--rev .sig__scene{right:auto;left:-2%}
.sig__scene img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:900px){.sig__scene{display:none}}
.sig__movie{margin-top:26px;max-width:340px}

/* ============================== 動画 ============================== */
.vfacade{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;
}
.vfacade__media{
  display:block;position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;
}
.vfacade__img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s ease}
.vfacade:hover .vfacade__img{transform:scale(1.07);opacity:.86}
.vfacade__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;transition:transform .5s var(--ease),background .3s ease;
}
.vfacade__play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:16px solid var(--ink);border-block:10px solid transparent;
}
.vfacade__play::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,255,255,.75);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.55);opacity:0}}
.vfacade:hover .vfacade__play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.vfacade__short{
  position:absolute;left:10px;top:10px;font-family:var(--f-ui);font-weight:600;
  font-size:11px;letter-spacing:.16em;background:var(--red);color:#fff;padding:3px 9px;
}
.vfacade__meta{display:block;padding-top:12px}
.vfacade__tag{
  display:inline-block;font-family:var(--f-ui);font-weight:600;font-size:11px;
  letter-spacing:.2em;color:var(--ink-3);margin-bottom:4px;
}
.vfacade__title{display:block;font-size:14px;font-weight:500;line-height:1.6}
.vfacade--inline .vfacade__title{font-size:13px}

.movie{background:var(--dark);color:#F3F0EA;padding:clamp(72px,10vw,140px) 0}
.movie .sec-title .ja{color:rgba(243,240,234,.55)}
.movie__lead{color:rgba(243,240,234,.72);margin-bottom:clamp(26px,4vw,46px);max-width:42em}
.movie__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,2.2vw,28px);
}
.movie__cell--wide{grid-column:span 2}
@media (max-width:560px){.movie__cell--wide{grid-column:span 1}}
.movie .vfacade__tag{color:rgba(243,240,234,.5)}
.movie .vfacade__title{color:#F3F0EA}
.movie .center{margin-top:clamp(30px,4vw,52px)}

/* ---- 再生モーダル ---- */
.lb{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);background:rgba(10,8,6,.94);
  opacity:0;transition:opacity .4s ease;
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__stage{
  width:min(100%,1120px);aspect-ratio:16/9;background:#000;
  transform:scale(.97);transition:transform .5s var(--ease);
}
.lb.is-open .lb__stage{transform:none}
.lb[data-ratio="9-16"] .lb__stage{width:auto;height:min(86svh,880px);aspect-ratio:9/16}
.lb__stage iframe{width:100%;height:100%;border:0;display:block}
.lb__close{
  position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);
  width:48px;height:48px;border:1px solid rgba(255,255,255,.4);background:none;
  cursor:pointer;border-radius:50%;transition:background .3s ease,transform .4s var(--ease);
}
.lb__close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.lb__close span{position:absolute;inset:0}
.lb__close span::before,.lb__close span::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:#fff;
}
.lb__close span::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb__close span::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ============================== SNS ============================== */
/* 本体サイト(kushitani.co.jp/news/)と同じ見せ方。枠も見出しも付けず、
   全幅のウィジェットを縦に積むだけ。カードの列数やデザインは別オリジンの
   iframe内なのでCSSでは触れず、SnapWidget側の設定で決まる。 */
.social__walls{
  display:grid;gap:clamp(18px,2.6vw,34px);margin-top:clamp(24px,3.4vw,42px);
}
/* ウィジェットは allowtransparency で透過なので、下地はセクションの地色に任せる。
   ここに白を置くと、セクションの --tint(#F6F4F0) の上に白い矩形が浮いて見える。 */
.social__wall{background:transparent}
/* 高さは snapwidget.js が実寸へ書き換える。これは読み込み前に潰れないための下敷き。 */
.social__wall iframe{display:block;width:100%;border:0;min-height:240px}
/* FOLLOW US 内のSNSアイコンはフッターと重複するので置かない(2026-08-10 指示) */

/* ============================== 下層ページ共通 ============================== */
.page-hero{position:relative;min-height:min(52svh,460px);display:grid;align-items:end;color:#fff;overflow:hidden;margin-top:0}
.page-hero__media{position:absolute;inset:0}
.page-hero__img{width:100%;height:100%;object-fit:cover;animation:kenburns 30s ease-in-out infinite alternate}
.page-hero__veil{position:absolute;inset:0;background:linear-gradient(rgba(12,10,8,.5),rgba(12,10,8,.34) 45%,rgba(12,10,8,.66))}
.page-hero__body{position:relative;max-width:var(--maxw);margin-inline:auto;width:100%;padding:0 var(--gut) clamp(38px,6vw,68px)}
.page-hero h1{display:grid;gap:6px;line-height:1}
.page-hero .en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(40px,8vw,96px);letter-spacing:.02em}
.page-hero .ja{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.34em;color:rgba(255,255,255,.82)}

.anchor-nav{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.anchor-nav ul{display:flex;gap:22px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.anchor-nav ul::-webkit-scrollbar{display:none}
.anchor-nav a{
  font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:.14em;
  white-space:nowrap;color:var(--ink-2);transition:color .3s ease;
}
.anchor-nav a:hover{color:var(--red)}

/* ---- メニュー ---- */
.menu-wrap{padding-block:clamp(40px,6vw,80px)}
.menu-cat{
  display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,4vw,60px);
  align-items:start;padding-block:clamp(36px,5vw,64px);border-top:1px solid var(--line);
  scroll-margin-top:120px;
}
.menu-cat:first-of-type{border-top:0}
@media (max-width:820px){.menu-cat{grid-template-columns:1fr}}
.menu-cat__media--product{
  display:grid;place-items:center;background:var(--tint);padding:24px;
  min-height:clamp(240px,30vw,348px);
}
.menu-cat__media--product img{
  height:clamp(190px,25vw,300px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(23,20,15,.18));
  animation:floaty 9s ease-in-out infinite;
}
.menu-cat__media--product img.is-wide{height:auto;width:100%}
.menu-cat__head{margin-bottom:20px}
.menu-cat__head h2{display:grid;gap:3px;line-height:1}
.menu-cat__head .en{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(26px,4vw,46px);letter-spacing:.02em}
.menu-cat__head .ja{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:.3em;color:var(--ink-3)}
.menu-cat__desc{margin-top:10px;color:var(--ink-2);font-size:14px}
.menu-cat--feature .menu-cat__head .en{color:var(--red)}
.item-list{display:grid}
.item{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px dotted var(--line);
}
.item__name{display:grid;gap:1px}
.item__name .ja{font-weight:500;font-size:16px}
.item__name .en{font-family:var(--f-ui);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.item__name .temp{
  display:inline-block;font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;
  color:var(--ink-2);border:1px solid var(--line);padding:0 7px;margin-left:8px;border-radius:2px;
}
.item__note{font-size:12px;color:var(--ink-3);margin-top:5px;max-width:32em}
.item__prices{display:flex;gap:14px;white-space:nowrap;font-family:var(--f-ui);font-weight:600;font-size:17px}
.item__prices .size{font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-right:5px}

/* ---- ジェラート ---- */
.gelato-hero__grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:820px){.gelato-hero__grid{grid-template-columns:1fr}}
.gelato-hero__pic{position:relative;display:grid;place-items:center;padding:20px;height:clamp(280px,44vw,470px)}
/* ---- フレーバーのロゴバッジ(A1のPOPから切り出したもの) ---- */
.flavor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(14px,2vw,26px)}
.flavor{
  display:grid;justify-items:center;gap:2px;padding:14px 10px 18px;text-align:center;
  border-radius:4px;transition:background .35s ease,transform .5s var(--ease);
}
.flavor:hover{background:var(--tint);transform:translateY(-4px)}
.flavor__logo{display:grid;place-items:center;margin-bottom:8px}
.flavor__logo img{
  width:clamp(120px,15vw,180px);height:auto;
  filter:drop-shadow(0 12px 16px rgba(23,20,15,.16));
  transition:transform .6s var(--ease);
}
.flavor:hover .flavor__logo img{transform:scale(1.06) rotate(-2deg)}
.flavor__en{font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.16em}
.flavor__ja{font-size:12px;color:var(--ink-3)}
.flavor-grid--compact{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.flavor-grid--compact .flavor__logo img{width:clamp(84px,11vw,116px)}
.flavor-grid--compact .flavor__en{font-size:11px;letter-spacing:.12em}
.flavor-grid--compact .flavor__ja{font-size:11px}

.menu-flavors{margin-top:clamp(24px,3.4vw,40px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--line)}
.menu-flavors__head{
  font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.28em;margin-bottom:16px;
}
.menu-flavors__head span{font-size:11px;letter-spacing:.2em;color:var(--ink-3);margin-left:10px}
.menu-flavors .note{margin-top:14px}

/* ---- トップの流れるフレーバー帯 ---- */
.flavor-marq{overflow:hidden;padding:clamp(18px,3vw,34px) 0}
.flavor-marq__track{display:flex;width:max-content;animation:marq 90s linear infinite}
.flavor-strip{display:flex;gap:clamp(10px,1.6vw,22px);padding-right:clamp(10px,1.6vw,22px);align-items:flex-start}
.flavor-chip{display:grid;justify-items:center;gap:1px;white-space:nowrap;text-align:center}
.flavor-chip .flavor__logo img{
  width:clamp(96px,11vw,142px);height:auto;filter:drop-shadow(0 10px 14px rgba(23,20,15,.15));
}
.flavor-chip .flavor__en{font-family:var(--f-ui);font-weight:600;font-size:11px;letter-spacing:.14em;margin-top:6px}
.flavor-chip .flavor__ja{font-size:11px;color:var(--ink-3)}

/* ---- コンセプト ---- */
.why{border:1px solid var(--line);border-left:3px solid var(--red);padding:clamp(24px,4vw,48px);background:var(--tint)}
.why h3{
  font-family:var(--f-ui);font-weight:600;font-size:13px;letter-spacing:.28em;
  color:var(--ink-3);margin-bottom:14px;
}
/* 取材で出てきた核心を、まず一行で立てる */
.why__catch{
  font-size:clamp(22px,3.4vw,40px);font-weight:500;line-height:1.45;
  letter-spacing:.01em;margin-bottom:20px;max-width:24em;
}
.why p{color:var(--ink-2);max-width:40em}
.why p+p{margin-top:0}
.point-list{display:grid;gap:clamp(40px,6vw,84px);padding-block:clamp(30px,5vw,60px)}
.point{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,58px);align-items:center}
.point--rev .point__media{order:2}
@media (max-width:820px){.point{grid-template-columns:1fr}.point--rev .point__media{order:0}}
.point__no{font-family:var(--f-display);font-weight:var(--f-display-w);font-size:clamp(40px,6vw,72px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--ink-3);display:block;margin-bottom:8px}
.point__body h3{font-size:clamp(18px,2.3vw,25px);margin-bottom:12px;line-height:1.6}
.point__body p{color:var(--ink-2)}

/* ---- 店舗 ---- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.6vw,32px);margin-bottom:10px}
.shop-card{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.shop-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(23,20,15,.1)}
.shop-card__media img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shop-card__body{padding:20px 22px 24px;display:grid;gap:8px;align-content:start;flex:1}
.shop-card__area{font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;color:var(--ink-3)}
.shop-card__body h3{font-size:19px;line-height:1.5}
.shop-card__catch{font-size:14px;color:var(--ink-2)}
.shop-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;margin-top:4px}
.shop-card dt{font-family:var(--f-ui);letter-spacing:.1em;color:var(--ink-3)}
.shop-card dd{margin:0}
.shop-card .text-link{margin-top:10px;justify-self:start}

.shop-detail{padding-block:clamp(40px,6vw,84px);border-top:1px solid var(--line);scroll-margin-top:110px}
.shop-detail:first-of-type{border-top:0}
.shop-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:900px){.shop-detail__grid{grid-template-columns:1fr}}
.shop-detail__body h2{font-size:clamp(21px,3vw,32px);line-height:1.4;margin-bottom:8px}
.shop-detail__dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:18px 0;font-size:14px}
.shop-detail__dl dt{font-family:var(--f-ui);letter-spacing:.12em;color:var(--ink-3)}
.shop-detail__dl dd{margin:0}
.shop-detail__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;margin-top:6px}
.shop-detail__row a{border-bottom:1px solid var(--line)}
.shop-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:24px}
.shop-gallery img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .6s var(--ease)}
.shop-gallery li{overflow:hidden}
.shop-gallery li:hover img{transform:scale(1.07)}
.shop-detail__map{margin-top:24px;aspect-ratio:16/7;border:1px solid var(--line)}
.shop-detail__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3)}

/* ---- イベント ---- */
.event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(18px,2.6vw,32px)}
.event-card{display:flex;flex-direction:column;gap:14px}
.event-card__media{overflow:hidden}
.event-card__media img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.event-card:hover .event-card__media img{transform:scale(1.06)}
.event-card__body{display:grid;gap:8px}
.event-card .meta{display:flex;align-items:center;gap:10px;font-family:var(--f-ui);font-size:12px;letter-spacing:.14em;color:var(--ink-3)}
.tag{background:var(--ink);color:#fff;padding:2px 9px;font-size:11px;letter-spacing:.14em}
.event-card h3{font-size:17px;line-height:1.6}
.event-card p{font-size:14px;color:var(--ink-2)}
/* 日付・カテゴリ・見出しで文字サイズがばらついて段が揃わなかったので、
   列幅を固定して日付と見出しを同じ大きさに揃えた。 */
.news-list li{
  display:grid;grid-template-columns:6.5em 6.5em 1fr;gap:4px 18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.news-list time{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:.08em;color:var(--ink-3)}
.news-list .tag{justify-self:start;align-self:center}
.news-list p{font-size:15px;line-height:1.7}
.news-list a{border-bottom:1px solid var(--line);transition:color .3s ease,border-color .3s ease}
.news-list a:hover{color:var(--red);border-color:var(--red)}
@media (max-width:640px){
  .news-list li{grid-template-columns:auto 1fr;gap:8px 14px}
  .news-list p{grid-column:1/-1}
}

/* ============================== フッター ============================== */
.site-footer{background:var(--ink);color:#F3F0EA;padding:clamp(48px,7vw,84px) 0 26px}
.site-footer__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,5vw,72px);align-items:start;
}
@media (max-width:760px){.site-footer__inner{grid-template-columns:1fr}}
/* 従来の 96/12vw/140px から1.5倍 */
.site-footer__brand img{height:clamp(144px,18vw,210px);width:auto;filter:brightness(0) invert(1)}
.site-footer__cols{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px);align-items:flex-start}
.footer-nav,.footer-links{display:grid;gap:10px}
.footer-nav a,.footer-links a{font-family:var(--f-ui);font-size:14px;letter-spacing:.12em;color:rgba(243,240,234,.8);transition:color .3s ease}
.footer-nav a:hover,.footer-links a:hover{color:#fff}
.copyright{
  max-width:var(--maxw);margin:clamp(32px,5vw,56px) auto 0;padding-inline:var(--gut);
  font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;color:rgba(243,240,234,.45);
}
.sns{display:flex;gap:14px}
.sns a{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  border-radius:50%;transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.sns a:hover{background:var(--red);color:#fff;border-color:var(--red)}
.site-footer .sns a{border-color:rgba(243,240,234,.28);color:rgba(243,240,234,.85)}
.site-footer .sns a:hover{background:#fff;color:var(--ink);border-color:#fff}
.sns--inverse a{border-color:rgba(255,255,255,.3);color:#fff}