@charset "utf-8";

:root{
  --red:#d20b1b;
  --ink:#212121;
  --dim:#b1b1b1;
  --paper:#fff;
  --pale:#f5f5f5;
  --amber:#e8b04b;

  --sans:"Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --en:"Figtree", var(--sans);

  --mincho:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --ease:cubic-bezier(.22,.61,.36,1);

  --ease-back:cubic-bezier(.34,1.7,.64,1);

  --r-cut:clamp(24px, 6.25vw, 120px);
  --r-photo:clamp(8px, 1.04vw, 20px);

  --max:1920px;

  --w:min(100vw, var(--max));
}

*,*::before,*::after{box-sizing:border-box}

html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

html:not(.lenis){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,body{overflow-x:clip}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.5}
p{margin:0}
/* figure にも 1em 40px の既定マージンが付く。位置指定が全部ずれるので潰す */
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

br.sp{display:none}

.bgv{
  position:fixed;inset:0;z-index:0;
  background:#000;
}
.bgv__v{
  width:100%;height:100%;
  object-fit:cover;

  transform:scale(1.02);
}

.bgv__veil{
  --veil-max:.88;
  position:absolute;inset:0;
  background:var(--paper);
  opacity:calc(var(--veil, 0) * var(--veil-max));
  will-change:opacity;
}
@media (prefers-reduced-motion:reduce){

  .bgv__veil{opacity:var(--veil-max)}
}

.hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(8px, 1.67vw, 32px) clamp(16px, 2.6vw, 51px);
  /* 右はロゴ側より詰める（バーの右端 1890 ＝ 余白 30px） */
  padding-right:clamp(16px, 1.56vw, 30px);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  pointer-events:none;
}
.hd.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hd__logo{pointer-events:auto}

.hd__logoImg{display:block;width:269px;height:auto}

.logo{
  position:relative;display:block;
  width:269px;aspect-ratio:543.25 / 110;
}
.logo--lg{width:min(543px, 28.3vw)}
.logo__type{position:absolute;left:0;top:0;width:81.22%;height:auto}
.logo__mark{position:absolute;left:87.20%;top:.79%;width:12.80%;height:auto}
.logo__sub {position:absolute;left:31.66%;top:83.64%;width:36.67%;height:auto}

/* 白いバーと、その右下にぶら下がる言語切替。
   言語は絶対配置にしておくと、バーとロゴの上下中央揃えに影響しない */
.hd__nav{position:relative}

.gnav{
  display:flex;align-items:center;gap:clamp(16px,.65vw,20px);
  height:65px;padding-left:clamp(18px,1.82vw,35px);
  background:var(--paper);border-radius:50px;
  box-shadow:3px 1px 10px rgba(147,131,131,.2);
  /* 右端の ONLINE SHOP を角丸に沿って切り落とす */
  overflow:clip;font-weight: 900;
}
.gnav__list{display:flex;align-items:center;gap:clamp(10px,1.09vw,21px)}
.gnav__list a{
  /* 1920px で 18px、1000px で 14px。その間はなめらかに変わる。
     vw そのままだと 1440px で下限に貼りついて可変にならないので、
     1000px を起点にした傾き（920px で 4px ぶん＝ /230）にしてある。
     SP では .gnav ごと非表示なので PC だけに効く */
  font-size:clamp(14px, calc(14px + (100vw - 1000px) / 230), 18px);
  font-weight:900;letter-spacing:.02em;
  transition:color .25s ease;
}
.gnav__list a:hover,
.gnav__list a.is-current{color:var(--red)}
/* 山本屋は別サイトなので、外部リンクの印を添える。
   他の項目と区別がつくよう、文字は細く・左右に余白を少し広めにとる */
.gnav__ex{
  display:inline-flex;align-items:center;gap:9px;
  padding-inline:clamp(5px, .52vw, 10px);
}
.gnav__list a.gnav__ex{font-weight: 700}
.exlink{flex:0 0 auto;width:13px;height:13px;margin-top: 3px}
.gnav__lang{
  position:absolute;right:14px;top:calc(100% + 16px);
  font-family:var(--en);font-weight:700;font-size:18px;letter-spacing:.05em;
  color:#d7d7d7;white-space:nowrap;
}
/* gt-current-lang は JS が動く前の保険。通常は is-current が付く */
.gnav__lang .is-current,
.gnav__lang .gt-current-lang{color:#ad0714}
.gnav__lang a{transition:color .25s ease}
.gnav__lang a:not(.is-current):hover{color:var(--ink)}
/* バーの右端を赤く塗り分けた ONLINE SHOP。高さはバーいっぱいで、
   白との切れ目は斜め（上端が --slant ぶん右に寄る）。
   右端はバー側の overflow:clip が角丸に沿って落としてくれる */
.gnav__shop{
  --slant:20.5px;
  align-self:stretch;
  display:grid;place-items:center;
  clip-path:polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  padding:0 clamp(18px,1.74vw,33px);
  background:var(--red);
  color:var(--paper);
  font-family:var(--en);font-weight:700;
  font-size:16px;letter-spacing:.03em;
  white-space:nowrap;
  /* 黒い塗りが左から伸びてくる。斜めの切り口は clip-path が切ってくれる */
  position:relative;
  overflow:hidden;
}

.mv{
  position:relative;z-index:1;
  height:100svh;min-height:560px;
  display:grid;place-items:center;
}
.mv__logo{margin:0}

/* MV の動画が流れ始めてから、透明・120% の状態から等倍へ寄っていく。
   .js を頭に付けているのは、JS が無い環境でロゴが消えたままにならないようにするため */
.js .mv__logo{
  opacity:0;transform:scale(1.2);
  /* 動画が流れ始めてすぐではなく、1秒ほど見せてから動き出す */
  transition:
    opacity 1.4s var(--ease) 1s,
    transform 1.6s var(--ease) 1s;
}
.mv__logo.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .mv__logo{opacity:1;transform:none;transition:none}
}

.tabs{
  position:fixed;right:0;top:42%;z-index:99;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;

  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
  pointer-events:none;
}
.tabs.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.tabs__item{
  display:grid;place-items:center;
  width:clamp(48px, 3.33vw, 64px);
  padding:clamp(20px,1.6vw,30px) 0;

  border-radius:clamp(10px, .94vw, 18px) 0 0 clamp(10px, .94vw, 18px);
  font-size:clamp(14px,.94vw,18px);font-weight:900;letter-spacing:.05em;
  writing-mode:vertical-rl;

  transition:width .35s var(--ease-back);
}
.tabs__item:hover{width:calc(clamp(48px, 3.33vw, 64px) + 12px)}

.tabs__item:first-child{
  background:var(--red);color:var(--paper);
  font-family:var(--en);letter-spacing:.05em;
}
.tabs__item:last-child{
  background:var(--paper);color:var(--red);
}
/* アイコンを添えるのは、下に貼りつく SP のバーだけ */
.tabs__icon{display:none}

.concept-pin{
  position:relative;z-index:1;
  height:300svh;
}
.concept{
  position:sticky;top:0;z-index:1;
  height:100svh;
  display:grid;place-items:center;
  padding:clamp(80px,10vw,180px) 20px;
  text-align:center;
}

.js .line{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .line.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .line{opacity:1;transform:none;transition:none}
}
.concept__ttl{
  color:var(--red);
  font-weight:700;
  font-size:clamp(24px, 2.34vw, 45px);
  line-height:2.22;
  letter-spacing:.05em;
}
.concept__lead{
  margin-top:clamp(24px,3.6vw,70px);
  color:var(--red);
  font-weight:700;
  font-size:clamp(15px, 1.35vw, 26px);
  line-height:3.46;
  letter-spacing:.03em;
}
.concept__lead .line{display:block}
.concept__ttl b{font-weight:900;font-size:1.4em;line-height:1}

.concept__lead b{
  font-weight:900;
  font-size:2.69em;
  letter-spacing:.03em;
  line-height:1;
}

.beer{
  position:relative;z-index:2;
  margin-top:-100svh;
  background:var(--pale);

  padding-bottom:clamp(135px, 14.01vw, 269px);
}
.beer__hero{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  aspect-ratio:1920 / 1300;
}

.bubbles{position:absolute;inset:0;z-index:0;overflow:hidden}

.bubble{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);aspect-ratio:1;
  animation:drift var(--dur,12s) var(--delay,0s) ease-in-out infinite;
}

.bubble::after{
  content:"";
  position:absolute;inset:0;
  background:var(--paper);
  border-radius:50%;
  animation:fizz var(--fizz,3.4s) var(--fdelay,0s) ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes drift{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-1.4vw)}
}
@keyframes fizz{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(.84);opacity:.5}
}

.bubble:nth-child(5n)  {--fizz:3.1s;--fdelay:-.4s}
.bubble:nth-child(5n+1){--fizz:4.3s;--fdelay:-2.2s}
.bubble:nth-child(5n+2){--fizz:2.6s;--fdelay:-1.1s}
.bubble:nth-child(5n+3){--fizz:5.2s;--fdelay:-3.6s}
.bubble:nth-child(5n+4){--fizz:3.7s;--fdelay:-.9s}

@media (prefers-reduced-motion:reduce){
  .bubble,.bubble::after{animation:none}
}

.beer__ttl{
  position:absolute;left:5.94%;top:0;
  z-index:2;
  color:var(--red);
  pointer-events:none;
}
.beer__en{
  display:block;
  font-family:var(--en);font-weight:700;
  font-size:clamp(46px, 7.55vw, 145px);
  line-height:1.138;
  letter-spacing:0;
}
.beer__en--lg{
  margin-left:-.28%;
  font-size:clamp(60px, 9.9vw, 190px);
  line-height:1.158;
}
.beer__ja{
  display:block;
  margin-top:clamp(14px, 1.8vw, 34px);
  margin-left:.57%;
  font-weight:700;
  font-size:clamp(24px, 3.49vw, 67px);
  line-height:1.045;
  letter-spacing:.03em;
}

.beer__ttl{top:37.5%}

/* 1文字ずつ出す見出し（共通）。.chars を付けた要素を JS が1文字ずつ包む */
.js .chars .char{
  display:inline-block;
  /* 1文字ずつ span に包むと半角スペースが潰れてしまう */
  white-space:pre;
  opacity:0;transform:translateY(var(--shift, 30%));
  transition:
    opacity .5s var(--ease-back) calc(var(--i) * .05s + var(--lead, 0s)),
    transform .5s var(--ease-back) calc(var(--i) * .05s + var(--lead, 0s));
}
.chars.is-in .char{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .chars .char{opacity:1;transform:none;transition:none}
}

.bottles{position:absolute;inset:0;z-index:1}
.bottles__i{position:absolute;top:14%}
.bottles__i img{width:100%;height:auto}
.bottles__i--1{left:32.60%;width:18.59%;--i:0}
.bottles__i--2{left:49.74%;width:18.54%;top:14.15%;--i:1}
.bottles__i--3{left:66.88%;width:18.91%;top:14.15%;--i:2}
.bottles__i--4{left:84.74%;width:18.21%;top:14.38%;--i:3}

.js .bottles__i{
  opacity:0;transform:translateY(6%);
  transition:
    opacity .7s var(--ease) calc(var(--i) * .12s),
    transform .7s var(--ease) calc(var(--i) * .12s);
}
.bottles.is-in .bottles__i{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .bottles__i{opacity:1;transform:none;transition:none}
}

.born{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  display:flex;align-items:center;
  gap:clamp(32px, 7.66vw, 147px);
  padding:clamp(56px,9vw,173px) clamp(20px,8.2vw,158px) 40px clamp(20px,9.69vw,186px);
}

.bgtext{
  position:absolute;z-index:0;
  writing-mode:vertical-rl;
  font-family:var(--en);font-weight:700;
  font-size:clamp(64px, 9.375vw, 180px);
  line-height:1;letter-spacing:0;
  color:#eaeaea;
  white-space:nowrap;
  pointer-events:none;user-select:none;
}

.bgtext--born{
  left:calc(-.15em - max(0px, (100vw - var(--max)) / 2));
  top:-2.7%;
}
.born > *:not(.bgtext){position:relative;z-index:1}
.born__ph{
  position:relative;flex:0 0 auto;
  width:min(805px, 41.93vw);aspect-ratio:1;
  margin:0;
}
.born__ph::before{
  content:"";position:absolute;inset:0;
  background:var(--red);border-radius:50%;
}
.born__ph img{
  position:absolute;left:3.6%;top:3.6%;
  width:92.8%;height:92.8%;
  object-fit:cover;object-position:53% 50%;
  border-radius:50%;
}

.js .born__ph,
.js .pair__ph{
  clip-path:circle(0%);
  transition:clip-path .5s var(--ease) calc(var(--i, 0) * .15s);
}
.js .born__ph img,
.js .pair__ph img{
  opacity:0;

  transition:opacity .3s ease calc(var(--i, 0) * .15s + .1s);
}
.born__ph.is-in,
.pair__ph.is-in{clip-path:circle(50%)}
.born__ph.is-in img,
.pair__ph.is-in img{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .born__ph,
  .js .pair__ph{clip-path:none;transition:none}
  .js .born__ph img,
  .js .pair__ph img{opacity:1;transition:none}
}

.born__tx{flex:1 1 auto;min-width:0}
.born__ttl,
.factory__ttl{
  font-weight:700;
  font-size:clamp(20px, 2.08vw, 40px);
  line-height:1.375;
  letter-spacing:.05em;
}

.born__big,
.factory__big{
  font-weight:500;
  font-size:2.5em;
  letter-spacing:.05em;
  color:var(--red);
}
.born__red,
.factory__red{color:var(--red)}
.born__lead,
.factory__lead{
  /* 見出しは .born__big / .factory__big（2.5em）が行ボックスを押し広げるので、
     文字の下に既に余りがある。マージンはその上乗せぶんだけに留める */
  margin-top:clamp(4px,.8vw,16px);
  font-weight:500;
  font-size:clamp(14px, 1.15vw, 22px);
  line-height:3.09;
  letter-spacing:.05em;
}

.factory{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  aspect-ratio:1920 / 900;
}

.bgtext--brewery{
  writing-mode:horizontal-tb;
  left:44.95%;
  top:2.1%;
}

.factory__ph{
  position:absolute;
  left:50%;top:16.9%;
  width:55.26%;
  aspect-ratio:1061 / 707;
  z-index:0;
}
.factory__blob{width:100%;height:100%}

.factory__c{
  position:absolute;margin:0;
  aspect-ratio:1;
  border-radius:50%;overflow:hidden;
}
.factory__c img{position:absolute;max-width:none}

.factory__c--sm{left:3.31%;top:41.59%;width:35.66%;--i:0}
/* 写真は傾けた状態の書き出しで四隅が白いので、上端の白が丸に入らないよう上へずらしてある */
.factory__c--sm img{left:-49.71%;top:-12%;width:200%;height:144%}

.factory__c--lg{left:41.19%;top:5.66%;width:55.02%;--i:1}
.factory__c--lg img{left:-29.63%;top:0;width:150.06%;height:100.04%}

.js .factory__c{
  clip-path:circle(0%);
  transition:clip-path .5s var(--ease) calc(var(--i) * .15s);
}
.js .factory__c img{
  opacity:0;
  transition:opacity .3s ease calc(var(--i) * .15s + .1s);
}
.factory__ph.is-in .factory__c{clip-path:circle(50%)}
.factory__ph.is-in .factory__c img{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js .factory__c{clip-path:none;transition:none}
  .js .factory__c img{opacity:1;transition:none}
}

.factory__tx{
  position:absolute;z-index:1;
  left:12.76%;top:36.6%;
  width:30.78%;
}

.factory__lead{margin-left:2.37%}

/* 左から右へ、マスクで流れて出てくるテキスト（共通）。
   .wipe を付けた要素に効く。出るタイミングだけ各所で上書きする */
.js .wipe{

  /* 要素が映すのはグラデーションの 1/4 ぶんなので、境目は 25%〜75% の内側に置く。
     75% ちょうどだと出始めに文字の左上がうっすら見えてしまう */
  -webkit-mask-image:linear-gradient(135deg, #000 0 45%, transparent 70%);
          mask-image:linear-gradient(135deg, #000 0 45%, transparent 70%);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;

  -webkit-mask-size:400% 400%;  mask-size:400% 400%;
  -webkit-mask-position:100% 100%;  mask-position:100% 100%;
  opacity:1;
}
.wipe.is-in{

  /* 見出しの1文字ずつの出現（--i × .05s ＋ .5s）が終わってから、ゆっくり流す。
     いちばん長い RESTAURANT が 15 文字 ＝ 約 1.2s なので、全ブロックそこに揃える。
     待っている間は上のマスク（mask-position:100% 100%）で伏せたままになる。 */
  animation:mask-wind 5.2s cubic-bezier(.215,.61,.355,1) 1.2s forwards;
  will-change:mask-position;
}

/* レストランと燻製は見出しとテキストが 300px 以上離れていて（見出し .1737 に対して
   テキスト .3433 など）、テキスト側の IntersectionObserver が見出しより確実に後で発火する。
   その分で既に待てているので、共通の 1.2s を打ち消して間を詰める */
.rest__lead.is-in,
.rest__body.is-in,
.smoke__lead.is-in,
.smoke__body.is-in{
  animation-delay:0s;
}
/* 城崎生まれ・自社工場・レストランの導入文は、見出し（11文字 ≒ 1.05s）が終わるのを待たず、
   跳ねている途中から流し始める。マスクは 5.2s かけてゆっくり進むので、
   重なっても見出しの邪魔にはならない */
.born__lead.is-in,
.factory__lead.is-in{
  animation-delay:.3s;
}
/* レストランの導入は、見出しが半分ほど出てからリード。
   見出しは26文字を1文字 .05s で送るので、半分なら .65s あたり */
.rsIntro__lead.is-in{animation-delay:.9s}
/* ビールの導入は、見出し（14文字 ＝ .65s ぶん）がまだ流れている途中から
   リードと4種が続く。上から順のまま、全体をかなり前へ詰めてある */
.beIntro__lead.is-in{animation-delay:.15s}
/* スモークの導入は 見出し →［燻製］→ リード → 写真 の順。
   リードは［燻製］と同時に流し始める */
.smIntro__lead.is-in{animation-delay:.8s}

@keyframes mask-wind{

  0%{
    -webkit-mask-position:100% 100%;  mask-position:100% 100%;
  }

  99%{
    -webkit-mask-position:0% 0%;  mask-position:0% 0%;
  }

  100%{
    -webkit-mask-image:none;  mask-image:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .js .wipe{-webkit-mask-image:none;mask-image:none;opacity:1}
  .wipe.is-in{animation:none}
}

.more{
  display:inline-flex;align-items:center;
  gap:clamp(10px, 1.3vw, 25px);
  margin-top:clamp(20px, 3.44vw, 66px);
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:22px;
  line-height:1.5;letter-spacing:.12em;
  white-space:nowrap;
}
.more__ar{
  flex:0 0 auto;
  width:clamp(48px, 4.95vw, 95px);height:auto;

  overflow:visible;
}

.more__arrow{transition:transform .4s var(--ease)}
.more:hover .more__arrow{transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){
  .more__arrow{transition:none}
}

.factory .more{margin-left:50.76%}

.rest{
  position:relative;z-index:2;
  background:var(--pale);
}
.rest__in{

  --rest-pin:200svh;

  position:relative;
  max-width:var(--max);margin-inline:auto;

  height:calc(.8813 * var(--w) + var(--rest-pin));
}

.bgtext--rest{
  right:-.15em;
  top:calc(-.0958 * var(--w));
}

.rest__ttl{
  position:absolute;
  left:8.54%;top:calc(.0607 * var(--w));
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:clamp(40px, 7.29vw, 140px);
  line-height:1;letter-spacing:.02em;
  white-space:nowrap;
}

.rest__big{font-size:1.724em;line-height:0;font-weight:800}

.rest__ruby{
  position:absolute;
  left:7.04em;top:-1.04em;
  /* 和文の Zen Kaku Gothic New に 800 は無く、継承させると 900 に丸められる。
     見え方を変えたくないので従来どおり 700 で固定する */
  font-weight:700;
  font-size:clamp(20px, 2.81vw, 54px);
  line-height:1;letter-spacing:.07em;
}

.ground{position:relative;z-index:2;background:var(--pale)}

.rest__panel{
  position:absolute;
  left:1.82%;top:calc(.1208 * var(--w));
  width:96.35%;
  height:calc(.7604 * var(--w) + var(--rest-pin));
  background:var(--red);
  border-radius:clamp(24px, 8.33vw, 160px);
}

.rest__tx{
  position:absolute;z-index:1;
  left:7.34%;top:calc(.0443 * var(--w));

  width:32.2%;
  color:var(--paper);
}
.rest__lead{
  font-weight:700;
  font-size:clamp(20px, 2.08vw, 40px);
  line-height:1.875;
  letter-spacing:.03em;
}
.rest__body{
  margin-top:clamp(16px, 2.19vw, 42px);
  font-weight:500;
  font-size:clamp(13px, 1.15vw, 22px);
  line-height:1.818;
  letter-spacing:.05em;
}

.rest__stage{
  position:absolute;z-index:1;
  left:0;top:calc(.1734 * var(--w));
  width:100%;
  height:calc(.3385 * var(--w) + var(--rest-pin));
}

.rest__stick{
  position:sticky;
  top:max(0px, calc((100svh - .3385 * var(--w)) / 2));
  height:calc(.3385 * var(--w));
}
.rest__main{
  position:absolute;
  left:47.34%;top:0;
  width:45.31%;
  aspect-ratio:870 / 650;

  border-radius:var(--r-photo) var(--r-cut) var(--r-photo) var(--r-photo);
  overflow:hidden;
}
.rest__slides{position:absolute;inset:0}
.rest__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity .9s var(--ease);
}
.rest__slide.is-current{opacity:1}
@media (prefers-reduced-motion:reduce){
  .rest__slide{transition:none}
}
.rest__slide img{width:100%;height:100%;object-fit:cover}

.rest__marks{
  position:absolute;inset:0;
  pointer-events:none;
}
.rest__mark{display:block;height:33.3333%}

.count{
  position:absolute;z-index:1;
  left:41.41%;top:calc(.2901 * var(--w));
  width:3.23%;aspect-ratio:62 / 92;
  color:var(--paper);
  font-family:var(--en);font-weight:400;line-height:1;
}
.count::before{
  content:"";
  position:absolute;left:0;bottom:0;
  width:2px;height:clamp(48px, 4.95vw, 95px);
  background:currentColor;
  transform-origin:0 100%;transform:rotate(40.7deg);
}
.count__now{
  position:absolute;left:0;top:0;
  /* <b> はブラウザ既定が bolder（＝親の400に対して700）になる。
     Figtree に 100 は無く最も細いのが 300 なので、そこまで落とす */
  font-weight:300;
  font-size:clamp(20px, 2.24vw, 43px);
}
.count__all{
  position:absolute;right:3%;bottom:0;
  font-size:clamp(12px, 1.35vw, 26px);
}

.rest__subs{
  position:absolute;z-index:1;
  left:7.34%;top:calc(.5865 * var(--w) + var(--rest-pin));
  width:66.15%;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.04%;
}
.rest__subs li{aspect-ratio:410 / 460;overflow:hidden}

.rest__subs li:first-child{border-bottom-left-radius:var(--r-cut)}
.rest__subs img{width:100%;height:100%;object-fit:cover}

.more--w{color:var(--paper)}
.rest__more{
  position:absolute;z-index:1;
  left:78.54%;top:calc(.6896 * var(--w) + var(--rest-pin));
  margin-top:0;
}

.smoke{

  position:relative;z-index:1;
  background:var(--pale);
}
.smoke__in{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  height:calc(1.0667 * var(--w));
}

.bgtext--gubi,
.bgtext--kino,
.bgtext--smoke{writing-mode:horizontal-tb}

.bgtext--gubi {left:-2.19%;top:calc(-.013 * var(--w))}
.bgtext--kino {left:7.50%; top:calc(.0789 * var(--w))}
.bgtext--smoke{left:3.28%; top:calc(.9448 * var(--w))}

.smoke__panel{
  position:absolute;
  left:1.82%;top:calc(.2198 * var(--w));
  width:96.35%;
  height:calc(.7781 * var(--w));
  background:var(--paper);
  border-radius:clamp(24px, 8.85vw, 170px);
}

.smoke__ttl{
  position:absolute;z-index:1;
  left:61.51%;top:calc(.1737 * var(--w));
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:clamp(40px, 7.29vw, 140px);
  line-height:1;letter-spacing:.02em;
  white-space:nowrap;
}
.smoke__big{font-size:1.6em;line-height:0}

.smoke__ruby{
  position:absolute;
  left:6.4em;top:-1.11em;
  /* 和文の Zen Kaku Gothic New に 800 は無く、継承させると 900 に丸められる */
  font-weight:700;
  font-size:clamp(18px, 2.6vw, 50px);
  line-height:1;letter-spacing:.05em;
}

.smoke__ph{
  position:absolute;z-index:1;margin:0;
  left:7.34%;top:calc(.2761 * var(--w));
  width:45.31%;
  aspect-ratio:870 / 650;

  border-radius:var(--r-cut) var(--r-photo) var(--r-photo) var(--r-photo);
  overflow:hidden;
}
.smoke__ph img{
  position:absolute;max-width:none;
  left:-16.21%;top:-16.47%;
  width:144.60%;height:140.82%;
}

.smoke__tx{
  position:absolute;z-index:1;
  left:64.27%;top:calc(.3433 * var(--w));
  width:24.90%;
}
.smoke__lead{
  color:var(--red);font-weight:700;
  font-size:clamp(20px, 2.08vw, 40px);
  line-height:1.875;letter-spacing:.03em;
}
.smoke__body{
  margin-top:clamp(16px, 2.19vw, 42px);
  color:var(--red);
  font-weight:500;
  font-size:clamp(13px, 1.15vw, 22px);
  line-height:1.818;letter-spacing:.05em;
}

.pair__ph{
  position:absolute;z-index:1;margin:0;
  top:calc(.6740 * var(--w));
  width:22.29%;aspect-ratio:1;
  background:var(--red);border-radius:50%;
}
.pair__ph--1{left:7.45%;--i:0}
.pair__ph--2{left:51.98%;--i:1}
.pair__mask{
  position:absolute;
  left:3.9%;top:3.9%;width:92.2%;height:92.2%;
  border-radius:50%;overflow:hidden;
}
.pair__mask img{position:absolute;max-width:none}
.pair__ph--1 img{left:-40.56%;top:-17.23%;width:174.04%;height:117.46%}
.pair__ph--2 img{left:-.26%;  top:-.26%;  width:150.72%;height:100.49%}

/* ×BEER とキャプションをひと箱にまとめて、箱ごと絶対配置する。
   箱の幅は中でいちばん広い ×BEER に合う（絶対配置の shrink-to-fit）ので、
   text-align:center だけでキャプションが上のテキストに対してセンターに乗る */
.pair__tx{
  position:absolute;z-index:1;
  top:calc(.7569 * var(--w));
  text-align:center;
}
.pair__tx--1{left:31.35%;--i:0}
.pair__tx--2{left:75.89%;--i:1}

/* キャプションはセンターからわずかに右へ寄せる。
   transform は登場アニメが使っているので position:relative + left で逃がす */
.pair__cap{position:relative}
.pair__tx--1 .pair__cap{left:1.5em}
.pair__tx--2 .pair__cap{left:2em}

.pair__ttl{
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:clamp(28px, 4.69vw, 90px);
  line-height:1;letter-spacing:0;
  white-space:nowrap;
}

.pair__x{font-size:.85em;margin-right:.2em}

.pair__cap{
  /* 元は top:calc(.8104 * var(--w)) の絶対配置。
     そこから ×BEER の高さ（line-height:1 なので font-size ぶん）を引いた差 */
  margin-top:calc(.0066 * var(--w));
  color:var(--red);font-weight:700;
  font-size:clamp(13px, 1.15vw, 22px);
  line-height:1;letter-spacing:.05em;
}

/* 円が開ききった直後に、右のテキストを持ち上げる。
   円は clip-path .5s ＋ --i × .15s で開き終わる（--1 が .5s / --2 が .65s）ので、
   その時間をそのまま待ち時間にして、キャプションだけさらに .1s 遅らせる。
   .js を頭に付けているのは、JS が無い環境で文字が消えたままにならないようにするため。 */
.js .pair__ttl,
.js .pair__cap{
  opacity:0;transform:translateY(24px);
  transition:
    opacity .8s var(--ease) calc(var(--i, 0) * .15s + .5s),
    transform .8s var(--ease) calc(var(--i, 0) * .15s + .5s);
}
.js .pair__cap{
  transition-delay:calc(var(--i, 0) * .15s + .6s);
}
.pair__ph--1.is-in ~ .pair__tx--1 .pair__ttl,
.pair__ph--1.is-in ~ .pair__tx--1 .pair__cap,
.pair__ph--2.is-in ~ .pair__tx--2 .pair__ttl,
.pair__ph--2.is-in ~ .pair__tx--2 .pair__cap{
  opacity:1;transform:none;
}
@media (prefers-reduced-motion:reduce){
  .js .pair__ttl,
  .js .pair__cap{opacity:1;transform:none;transition:none}
}

.smoke__more{
  position:absolute;z-index:1;
  left:74.64%;top:calc(.9183 * var(--w));
  margin-top:0;
}

.js .rise{
  opacity:0;transform:translateY(24px);
  transition:
    opacity .8s var(--ease) calc(var(--i, 0) * var(--step, .1s) + var(--lead, 0s)),
    transform .8s var(--ease) calc(var(--i, 0) * var(--step, .1s) + var(--lead, 0s));
}
.rise.is-in{opacity:1;transform:none}

/* 3つ・4つの横並びは、上の見出しからほんの少し置いてから出す。
   ずらし幅（--i × .1s）はそのまま */
.rsLink__item,
.rsSpace__item,
.smRest__item,
.beList__item,
.beFeat__item,
.beStep__item{--lead:.2s}

@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
}

.shop{
  position:relative;z-index:2;
  background:var(--pale);
}
.shop__in{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  height:calc(.7292 * var(--w));
}

.bgtext--shopR{
  right:-.15em;
  top:calc(-.0083 * var(--w));
}

.bgtext--shopL{
  left:-.15em;
  top:calc(.3443 * var(--w));
}

.ec,.ec__red{
  position:absolute;
  top:calc(.1000 * var(--w));
  height:calc(.2479 * var(--w));
}
.ec{
  left:17.03%;width:28.96%;
  background:var(--paper);
  border-radius:var(--r-photo) 0 0 var(--r-photo);
}
.ec__red{
  left:45.99%;width:36.93%;
  background:var(--red);
  border-radius:0 var(--r-photo) var(--r-photo) 0;
}

.ec__eyebrow{
  position:absolute;z-index:1;
  left:20.36%;top:calc(.1542 * var(--w));
  color:var(--red);font-weight:700;
  font-size:clamp(18px, 2.08vw, 40px);
  line-height:1.45;letter-spacing:0;
}

.ec__line{
  position:absolute;z-index:1;
  left:34.58%;top:calc(.1703 * var(--w));
  width:12.76%;height:3px;
  background:var(--red);
}
.ec__ttl{
  position:absolute;z-index:1;
  left:20.31%;top:calc(.1995 * var(--w));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:clamp(32px, 4.22vw, 81px);
  line-height:1.235;letter-spacing:0;
}
.ec__lead{
  position:absolute;z-index:1;
  left:50%;top:calc(.1495 * var(--w));
  width:29.90%;
  color:var(--paper);font-weight:500;
  font-size:clamp(13px, 1.15vw, 22px);
  line-height:2.5;letter-spacing:.05em;
  text-align:center;
}

.ec__btn{
  position:absolute;z-index:1;
  left:55.31%;top:calc(.2625 * var(--w));
  width:18.23%;height:calc(.0365 * var(--w));
  display:grid;place-items:center;
  background:var(--paper);color:var(--red);
  border-radius:9999px;
  font-weight:700;
  font-size:clamp(14px, 1.15vw, 22px);
  letter-spacing:.08em;
  overflow:hidden;
  transition:color .3s ease;
}

.ec__btn::before,
.news__more::before,
.gnav__shop::before,
.ft__shop::before,
.rsBook__btn::before,
.smBtn::before,
.beSet__btn::before,
.beTalk__btn::before{
  content:"";

  position:absolute;inset:-1px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}

.ec__btn span,
.news__more span,
.gnav__shop span,
.ft__shop span,
.ft__shop img,
.rsBook__btn span,
.smBtn span,
.beSet__btn span,
.beTalk__btn span{position:relative}
.ec__btn:hover{color:var(--paper)}
/* 塗りが黒になったので、赤のままだと読めない。文字とアイコンを白に返す */
.ft__shop:hover{color:var(--paper)}
.ft__shop:hover img{filter:brightness(0) invert(1)}
.ec__btn:hover::before,
.news__more:hover::before,
.gnav__shop:hover::before,
.ft__shop:hover::before,
.rsBook__btn:hover::before,
.smBtn:hover::before,
.beSet__btn:hover::before,
.beTalk__btn:hover::before{transform:scaleX(1)}

.ec__btn:not(:hover)::before,
.news__more:not(:hover)::before,
.gnav__shop:not(:hover)::before,
.ft__shop:not(:hover)::before,
.rsBook__btn:not(:hover)::before,
.smBtn:not(:hover)::before,
.beSet__btn:not(:hover)::before,
.beTalk__btn:not(:hover)::before{transform-origin:right center}

@media (prefers-reduced-motion:reduce){
  .ec__btn::before,
  .news__more::before,
  .gnav__shop::before,
  .ft__shop::before,
  .rsBook__btn::before,
  .smBtn::before,
  .beSet__btn::before,
  .beTalk__btn::before{transition:none}
}

.news__ttl{
  position:absolute;z-index:1;
  left:22.19%;top:calc(.5057 * var(--w));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:clamp(28px, 3.13vw, 60px);
  line-height:1.2;letter-spacing:0;
}
.news__sub{
  position:absolute;z-index:1;
  left:22.19%;top:calc(.5464 * var(--w));
  color:var(--red);font-weight:700;
  font-size:clamp(11px, .73vw, 14px);
  line-height:1.79;letter-spacing:.03em;
}
.news__more{
  position:absolute;z-index:1;
  left:21.88%;top:calc(.5927 * var(--w));
  width:10.42%;height:calc(.0313 * var(--w));
  display:grid;place-items:center;
  background:var(--red);color:var(--paper);
  border-radius:9999px;
  font-family:var(--en);font-weight:700;
  font-size:clamp(13px, .89vw, 17px);
  letter-spacing:.1em;
  overflow:hidden;
}

.news__list{
  position:absolute;z-index:1;
  left:36.41%;top:calc(.4568 * var(--w));
  width:41.67%;
  display:grid;gap:calc(.0052 * var(--w));
}
.news__list a{
  display:block;

  padding:clamp(12px, 1.61vw, 31px) clamp(16px, 2.5vw, 48px);
  background:var(--paper);
  border-radius:var(--r-photo);

  color:var(--ink);
  transition:transform .25s var(--ease), color .25s ease;
}
.news__list a:hover{transform:translateX(6px);color:var(--dim)}
.news__list time{
  display:block;
  font-family:var(--en);font-weight:700;
  font-size:clamp(13px, 1.04vw, 20px);
  letter-spacing:.02em;
}
.news__list span{
  display:block;
  margin-top:clamp(4px, .42vw, 8px);
  font-weight:500;
  font-size:clamp(13px, 1.04vw, 20px);
  line-height:1.6;letter-spacing:.03em;
}

.ryokan{
  position:relative;z-index:2;
  background:var(--pale);
}
.ryokan__in{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  height:calc(.4427 * var(--w));

  font-family:var(--mincho);
}
.ryokan__ph{
  position:absolute;margin:0;
  left:10.94%;top:calc(.0542 * var(--w));
  width:78.13%;aspect-ratio:1500 / 450;
  border-radius:var(--r-photo);
  overflow:hidden;
}

.ryokan__ph img{
  position:absolute;max-width:none;
  left:-4.27%;top:-23.33%;
  width:104.27%;height:231.78%;

  filter:brightness(.62);
}
.ryokan__logo{
  position:absolute;z-index:1;
  left:19.95%;top:calc(.1474 * var(--w));
  width:11.30%;height:auto;
}

.ryokan__vt{
  position:absolute;z-index:1;
  top:calc(.0880 * var(--w));
  writing-mode:vertical-rl;
  color:var(--paper);font-weight:500;
  line-height:1.3;letter-spacing:.2em;
}
.ryokan__vt--lg{left:37.38%;font-size:clamp(18px, 1.41vw, 27px)}
.ryokan__vt--sm{left:34.72%;font-size:clamp(15px, 1.15vw, 22px)}

.ryokan__info{
  position:absolute;z-index:1;
  left:54.74%;top:calc(.1177 * var(--w));
  color:var(--paper);
}
.ryokan__name{
  font-weight:500;
  font-size:clamp(18px, 1.25vw, 24px);
  line-height:1.35;letter-spacing:.05em;
}
.ryokan__addr{
  margin-top:clamp(8px, .83vw, 16px);
  font-weight:400;
  font-size:clamp(13px, .83vw, 16px);
  line-height:1.7;letter-spacing:.04em;
}
.ryokan__tel{
  margin-top:clamp(8px, .83vw, 16px);
  font-weight:400;
  font-size:clamp(13px, .83vw, 16px);
  letter-spacing:.04em;
}
.ryokan__btns{
  display:flex;gap:clamp(8px, .78vw, 15px);
  margin-top:clamp(14px, 1.77vw, 34px);
}
.ryokan__btns a{
  display:grid;place-items:center;
  width:clamp(120px, 10.42vw, 200px);
  height:clamp(38px, 2.60vw, 50px);
  background:var(--paper);color:var(--ink);
  border-radius:4px;
  font-weight:700;
  font-size:clamp(12px, .78vw, 15px);
  letter-spacing:.04em;
  transition:background-color .25s ease, color .25s ease;
}
.ryokan__btns a:hover{background:var(--red);color:var(--paper)}

.totop{

  position:fixed;z-index:100;
  right:clamp(14px, 1.98vw, 38px);
  bottom:clamp(14px, 1.98vw, 38px);
  width:clamp(56px, 5.63vw, 108px);
  display:block;

  opacity:0;visibility:hidden;
  transform:translateY(24px) scale(.85);
  transition:
    opacity .45s var(--ease), visibility .45s,
    transform .55s var(--ease-back);
  pointer-events:none;
}
.totop.is-visible{
  opacity:1;visibility:visible;transform:none;
  pointer-events:auto;
}
/* 色を変えられるよう、アイコンはマスクで塗る */
.totop__i{
  display:block;width:100%;aspect-ratio:1;
  background-color:var(--red);
  -webkit-mask:url(../img/btn-top.svg) no-repeat center/contain;
          mask:url(../img/btn-top.svg) no-repeat center/contain;
  transition:background-color .3s ease;
}
/* 赤い背景の上に来たら白に返す */
.totop.is-onRed .totop__i{background-color:var(--paper)}
.totop.is-visible:hover{transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  .totop{transform:none;transition:opacity .3s ease, visibility .3s}
}

/* フッターの台。角丸の外側や、上の継ぎ目に背景が覗かないよう、
   ページ本体（.ground）と同じ色をフッターの下に敷いている */
.ftBed{position:relative;z-index:2;background:var(--pale)}

.ft{
  position:relative;z-index:2;
  background:var(--red);color:var(--paper);
  border-radius:clamp(32px, 7.29vw, 140px) clamp(32px, 7.29vw, 140px) 0 0;
}
.ft__in{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  height:calc(.3203 * var(--w));
}
.ft a{transition:opacity .25s ease}

.ft a:hover:not(.ft__contact):not(.ft__map):not(.ft__shop){opacity:.7}

.ft__logo{
  position:absolute;
  left:5.10%;top:calc(.0802 * var(--w));
  width:15.31%;height:auto;
}
.ft__contact{
  position:absolute;
  left:6.25%;top:calc(.1396 * var(--w));
  width:13.02%;height:calc(.0240 * var(--w));
  display:grid;place-items:center;
  border:1px solid var(--paper);
  font-family:var(--en);font-weight:700;
  font-size:clamp(12px, .83vw, 16px);letter-spacing:.12em;
}
.ft__sns{
  position:absolute;
  left:10.21%;top:calc(.1990 * var(--w));
  display:flex;gap:clamp(10px, 1.35vw, 26px);
}

.ft__sns svg{height:clamp(22px, 1.67vw, 32px);width:auto;display:block}

.ft__nav{
  position:absolute;
  top:calc(.0484 * var(--w));
  font-weight:600;
  font-size:clamp(13px, .83vw, 16px);
  line-height:2.5;letter-spacing:.04em;
}

.ft__nav--1{left:27.50%;font-weight:700}
.ft__nav--2{left:39.11%;font-weight:500}

.ft__member{
  position:absolute;
  left:57.40%;top:calc(.0505 * var(--w));
  display:flex;align-items:center;gap:clamp(6px, .68vw, 13px);
  font-weight:600;
  font-size:clamp(13px, .83vw, 16px);letter-spacing:.04em;
}
.ft__member svg{width:clamp(20px, 1.35vw, 26px);height:auto;flex:0 0 auto}
.ft__shop{
  position:absolute;
  left:52.55%;top:calc(.0536 * var(--w));
  width:11.46%;height:calc(.0260 * var(--w));
  display:flex;align-items:center;justify-content:center;
  gap:clamp(6px, .68vw, 13px);
  background:var(--paper);color:var(--red);
  border-radius:9999px;
  overflow:hidden;
}
.ft__shop img{width:clamp(18px, 1.30vw, 25px);height:auto}
.ft__shop span{
  font-family:var(--en);font-weight:900;
  /* body の line-height:1.9 を継承すると行ボックスが文字の倍近くになり、
     枠に対して上下センターに見えない。文字の高さで揃える */
  line-height:1;
  font-size:clamp(14px, .94vw, 18px);letter-spacing:.02em;
}

.ft__line{
  position:absolute;
  left:27.50%;top:calc(.1542 * var(--w));
  width:65.16%;height:1px;
  background:rgba(255,255,255,.5);
}

.ft__machiya{
  position:absolute;
  left:27.50%;top:calc(.2182 * var(--w));
  width:9.90%;height:auto;
}
.ft__smoke{
  position:absolute;
  left:52.29%;top:calc(.2125 * var(--w));
  width:9.38%;height:auto;
}
.ft__place{position:absolute}
.ft__place--1{left:39.53%;top:calc(.1938 * var(--w))}
.ft__place--2{left:63.28%;top:calc(.1938 * var(--w))}
.ft__place-name{
  font-weight:600;
  font-size:clamp(11px, .73vw, 14px);
  line-height:1.6;letter-spacing:.04em;
}
.ft__place-name b{
  font-weight:700;
  font-size:clamp(13px, .94vw, 18px);
}
.ft__place-addr{
  margin-top:clamp(6px, .52vw, 10px);
  font-weight:600;
  font-size:clamp(11px, .73vw, 14px);
  line-height:1.7;letter-spacing:.03em;
}
.ft__map{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:clamp(8px, .83vw, 16px);
  padding:0 clamp(10px, .94vw, 18px);
  height:clamp(28px, 1.88vw, 36px);

  border:1px solid var(--paper);border-radius:9999px;
  color:var(--paper);
  font-weight:700;
  font-size:clamp(11px, .73vw, 14px);letter-spacing:.03em;
}
.ft__map svg{width:clamp(8px, .57vw, 11px);height:auto}

.ft a.ft__contact,
.ft a.ft__map{
  background-image:linear-gradient(var(--paper), var(--paper));
  background-repeat:no-repeat;
  /* 既定の background-origin:padding-box だと 100% 100% が「枠線の内側」の高さになり、
     1px ボーダーとの境目に隙間（サブピクセルの筋）が残る。枠線ぶんまで塗る */
  background-origin:border-box;
  background-clip:border-box;
  background-size:0% 100%;
  background-position:left center;
  transition:background-size .45s var(--ease), color .3s ease;
}
.ft a.ft__contact:hover,
.ft a.ft__map:hover{background-size:100% 100%;color:var(--red)}

@media (prefers-reduced-motion:reduce){
  .ft a.ft__contact,
  .ft a.ft__map{transition:color .2s ease}
}

.ft__yama{
  position:absolute;
  left:79.01%;top:calc(.2130 * var(--w));
  display:flex;align-items:center;gap:clamp(10px, 1.25vw, 24px);
}
.ft__yama img{width:clamp(70px, 6.30vw, 121px);height:auto}
.ft__yama-tx{
  display:grid;gap:4px;

  font-family:var(--mincho);
  font-weight:600;
  font-size:clamp(13px, .94vw, 18px);letter-spacing:.05em;
}
.ft__yama-tx b{
  font-weight:600;
  font-size:clamp(11px, .73vw, 14px);letter-spacing:.06em;
}

.ft__copy{
  position:absolute;
  left:4.22%;top:calc(.2854 * var(--w));
  font-family:var(--en);font-weight:600;
  font-size:clamp(11px, .73vw, 14px);letter-spacing:.03em;
}

.sec{position:relative;z-index:2;background:var(--paper);}
.sec__ph{
  display:grid;place-items:center;height:60vh;
  font-family:var(--en);font-weight:700;font-size:clamp(24px,3vw,56px);
  color:#ddd;letter-spacing:.08em;
}
.sec:nth-of-type(even) .sec__ph{background:#fafafa}

.burger{
  display:none;
  position:fixed;top:16px;right:16px;z-index:120;
  width:52px;height:52px;
  place-items:center;align-content:center;gap:5px;
  background:transparent;
  border:1px solid var(--paper);border-radius:50%;
  cursor:pointer;
  transition:background-color .3s ease, border-color .3s ease,
             transform .45s var(--ease-back);
}
.burger span{
  display:block;width:20px;height:1.5px;
  background:var(--paper);
  transition:transform .4s var(--ease-back), opacity .2s ease,
             background-color .3s ease;
}

/* 開いている間も、白い枠に白い線のまま（塗りつぶさない） */
.burger.is-open{transform:rotate(90deg)}

.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:110;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--red);
  visibility:hidden;

  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.55,0,.85,.3), visibility 0s .3s;
}
.menu.is-open{
  visibility:visible;transform:none;

  transition:transform .52s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.menu a{color:var(--paper)}

.menu__logo,
.menu__nav li,
.menu__sub li,
.menu__line,
.menu a.menu__shop,
.menu__sns,
.menu__contact,
.menu__places{
  opacity:0;
  transform:translateY(16px) scale(.96);
  transition:opacity .15s ease, transform .15s ease;
}

.menu__places{transform:translateY(16px)}

.menu.is-open .menu__logo,
.menu.is-open .menu__nav li,
.menu.is-open .menu__sub li,
.menu.is-open .menu__line,
.menu.is-open a.menu__shop,
.menu.is-open .menu__sns,
.menu.is-open .menu__contact,
.menu.is-open .menu__places{
  opacity:1;transform:none;
  transition:opacity .3s ease, transform .5s var(--ease-back);
}
.menu.is-open .menu__logo{transition-delay:.12s}
.menu.is-open .menu__nav li:nth-child(1){transition-delay:.18s}
.menu.is-open .menu__nav li:nth-child(2){transition-delay:.225s}
.menu.is-open .menu__nav li:nth-child(3){transition-delay:.27s}
.menu.is-open .menu__nav li:nth-child(4){transition-delay:.315s}
.menu.is-open .menu__sub li:nth-child(1){transition-delay:.28s}
.menu.is-open .menu__sub li:nth-child(2){transition-delay:.31s}
.menu.is-open .menu__sub li:nth-child(3){transition-delay:.34s}
.menu.is-open .menu__sub li:nth-child(4){transition-delay:.37s}
.menu.is-open .menu__line{transition-delay:.38s}
.menu.is-open a.menu__shop{transition-delay:.44s}
.menu.is-open .menu__sns{transition-delay:.48s}
.menu.is-open .menu__contact{transition-delay:.51s}
.menu.is-open .menu__places{transition-delay:.54s}

@media (prefers-reduced-motion:reduce){

  .menu{transform:none;opacity:0;transition:opacity .2s ease, visibility 0s .2s}
  .menu.is-open{opacity:1;transition:opacity .2s ease, visibility 0s}
  .menu__logo,
  .menu__nav li,
  .menu__sub li,
  .menu__line,
  .menu a.menu__shop,
  .menu__sns,
  .menu__contact,
  .menu__places{opacity:1;transform:none;transition:none}
  .burger.is-open{transform:none}
}

/* 中身の寸法は 375 幅のデザインの実数。画面が広くても間延びしないよう px で置く */
.menu{padding-bottom:55px}
.menu__red{position:relative;padding:25.64px 27px 46px}
.menu__logo{width:189px;height:auto;display:block}

/* 言語切替は右上の白い錠剤 */
.menu__lang{
  position:absolute;right:14px;top:84px;
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  width:102px;height:32px;
  background:var(--paper);border-radius:20px;
  color:#d7d7d7;
  font-family:var(--en);font-weight:700;
  font-size:18px;letter-spacing:.05em;
  white-space:nowrap;
}
.menu .menu__lang a{color:#d7d7d7}
/* 表示中の言語（ふだんは JP）は赤。gt-current-lang は GTranslate が動く前の保険 */
.menu .menu__lang .is-current,
.menu .menu__lang .gt-current-lang{color:var(--red)}

.menu__nav{margin-top:43px;font-weight:700;font-size:18px;line-height:2.0556;letter-spacing:.07em}
.menu__sub{margin-top:8px;font-weight:500;font-size:14px;line-height:2.2143;letter-spacing:.03em}
/* 山本屋だけ、上の3つからひと呼吸おいて外部リンクの印つき */
.menu__sub li:last-child{margin-top:13px}
.menu__ex{display:inline-flex;align-items:center;gap:12px}
.menu__ex .exlink{width:11px;height:11px}

.menu__line{
  display:block;height:1px;margin:26px 0 36px;
  background:rgba(255,255,255,.5);
}

.menu a.menu__shop{
  display:flex;align-items:center;justify-content:center;gap:5px;
  width:200px;height:44px;margin:0 auto;
  background:var(--paper);border-radius:25px;
  color:var(--red);
}
.menu__shop img{width:21px;height:auto}
.menu__shop span{
  font-family:var(--en);font-weight:800;
  font-size:18px;letter-spacing:.04em;
}
.menu__sns{
  display:flex;justify-content:center;gap:17px;
  margin-top:19px;
}
.menu__sns svg{height:33px;width:auto;display:block}
.menu__contact{
  display:grid;place-items:center;
  width:250px;height:46px;margin:32px auto 0;
  border:1px solid var(--paper);
  font-family:var(--en);font-weight:500;
  font-size:16px;letter-spacing:.15em;
}

/* 下に出る2つの入り口。メニューを開いている間だけ画面の下に貼りつく */
.menu__bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:188fr 187fr;
  height:55px;
}
.menu__bar-shop,
.menu__bar-book{
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1.5556;
}
.menu__bar-shop{
  gap:7px;
  background:#c50c1a;
  font-family:var(--en);font-weight:700;letter-spacing:.02em;
}
.menu a.menu__bar-shop{color:var(--paper)}
/* 赤地に乗るので、赤いアイコンを白く抜く */
.menu__bar-shop img{width:19px;height:auto;filter:brightness(0) invert(1)}
.menu__bar-book{
  background:#f8f8f8;
  font-weight:700;letter-spacing:.05em;
}
.menu a.menu__bar-book{color:var(--red)}

.menu__places{
  background:var(--paper);color:var(--ink);
  padding:36px 20px 38px 48px;
}
/* 左にロゴと Google MAP、右に店名と住所。列の幅は 48 → 187 ぶん */
.menu__place{
  display:grid;
  grid-template-columns:139px 1fr;
  align-items:start;gap:15px 0;
  padding:0;
}

.menu__place > div{grid-column:2;grid-row:1 / span 2}
.menu__place + .menu__place{margin-top:22px;border-top:0}
.menu__place img{width:107px;height:auto;flex:0 0 auto}
.menu__place-name{font-weight:600;font-size:13px;line-height:1.4615}
.menu__place-name b{display:block;font-weight:700;font-size:15px}
.menu__place-addr{margin-top:4px;font-weight:500;font-size:13px;line-height:1.4615}

.menu a.menu__map{
  grid-column:1;grid-row:2;justify-self:start;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  width:115px;height:28px;padding:0;
  border:1px solid var(--red);border-radius:18.5px;
  color:var(--red);font-weight:600;font-size:13px;
}
.menu__map svg{width:9px;height:auto}
.menu a.menu__place--yama{

  display:grid;grid-template-columns:139px 1fr;
  align-items:center;gap:0;
  margin-top:33px;
  border-top:0;
  color:var(--ink);
}
.menu__place--yama img{width:94px}
.menu__yama-tx{
  display:grid;gap:0;
  font-family:var(--mincho);font-weight:600;font-size:16px;line-height:2;
}
.menu__yama-tx b{justify-self:center;font-weight:700;font-size:13px;line-height:2}

@media (prefers-reduced-motion:reduce){
  .burger span,.menu{transition:none}
}

/* 下層ページは背景動画を読み込まないので、ページ地そのものを #f5f5f5 に。
   フッターの角R の隙間もこの色で埋まる */
body.sub{background:var(--pale)}

/* 下層ページ共通 ─ ページヘッダー */

.ph{
  position:relative;
  height:clamp(320px, 31.25vw, 600px);
  display:grid;place-items:center;
  overflow:clip;
  color:var(--paper);text-align:center;
}
.ph__ph{position:absolute;inset:0;overflow:clip}
.ph__ph::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,.3);
}
.ph__ph img{
  width:100%;height:100%;
  object-fit:cover;
}

/* 写真の見え方はマスク枠に合わせてページごとに指定する */

.ph--talk .ph__ph img{object-position:50% 54%;transform:scale(1.081)}

.ph--news .ph__ph img{
  position:absolute;
  left:0;top:-30.667%;      /* -184px / 600px */
  width:109.844%;           /* 2109px / 1920px */
  max-width:none;height:auto;
}
.ph__in{

  position:relative;z-index:1;
  padding-top:clamp(10px, .94vw, 18px);
}
.ph__en{
  font-family:var(--en);font-weight:700;
  font-size:clamp(34px, 3.125vw, 60px);
  line-height:1.2;letter-spacing:.05em;
}
.ph__ja{
  margin-top:clamp(5px, .52vw, 10px);
  font-weight:700;
  font-size:clamp(15px, 1.04vw, 20px);
  line-height:1.2;letter-spacing:.05em;
}

/* 下層ページ共通 ─ パンくず */

.bread{
  max-width:var(--max);margin-inline:auto;
  padding:clamp(14px, 1.56vw, 30px) clamp(16px, 5.26vw, 101px) 0;
  font-size:clamp(12px, .78vw, 15px);
  line-height:1.87;letter-spacing:.05em;
}
.bread__sep{margin:0 .35em}
.bread__now{color:#999}
.bread a{transition:color .25s ease}
.bread a:hover{color:var(--red)}

/* BEER TALK 一覧 */

.tlist{
  padding:clamp(34px, 4.06vw, 78px) 0 clamp(80px, 16.51vw, 317px);
}
.tlist__list{
  display:grid;gap:clamp(12px, 1.04vw, 20px);
  width:clamp(600px, 54.43vw, 1045px);
  margin-inline:auto;
}
.tlist__link{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px, 1.56vw, 30px);
  min-height:clamp(60px, 4.17vw, 80px);
  padding-block:clamp(12px, .83vw, 16px);
  padding-inline:clamp(24px, 2.29vw, 44px) clamp(16px, 1.56vw, 30px);
  background:var(--red);color:var(--paper);
  border-radius:clamp(6px, .52vw, 10px);
  transition:background-color .3s ease;
}
.tlist__ttl{
  font-weight:700;
  font-size:clamp(16px, 1.354vw, 26px);
  line-height:1.4;letter-spacing:.05em;
}
.tlist__arw{
  position:relative;flex:0 0 auto;
  width:clamp(28px, 1.93vw, 37px);
  transition:transform .35s var(--ease-back);
}
.tlist__arwBg{width:100%;height:auto}
.tlist__arwIn{

  position:absolute;left:50%;top:50%;
  width:27.03%;height:auto;
  transform:translate(-50%,-50%) rotate(90deg);
}
.tlist__link:hover{background:#b60916}
.tlist__link:hover .tlist__arw{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  .tlist__link,.tlist__arw{transition:none}
  .tlist__link:hover .tlist__arw{transform:none}
}

.tlist__empty{
  text-align:center;
  font-size:clamp(14px, .94vw, 18px);color:#777;
}

.tlist .nav-links{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(6px, .52vw, 10px);
  margin-top:clamp(24px, 2.08vw, 40px);
  font-family:var(--en);font-weight:700;
}
.tlist .page-numbers{
  display:grid;place-items:center;
  min-width:clamp(32px, 2.29vw, 44px);
  height:clamp(32px, 2.29vw, 44px);
  padding:0 .6em;
  background:var(--paper);color:var(--red);
  border-radius:50px;
  transition:background-color .25s ease, color .25s ease;
}
.tlist .page-numbers.current,
.tlist a.page-numbers:hover{background:var(--red);color:var(--paper)}
.tlist .screen-reader-text{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* NEWS 一覧 */

.nlist{
  padding:clamp(34px, 4.06vw, 78px) 0 clamp(60px, 12.29vw, 236px);
}
.nlist__list{
  display:grid;gap:clamp(8px, .52vw, 10px);
  width:clamp(600px, 52.08vw, 1000px);
  margin-inline:auto;
}
.nlist__link{
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(4px, .36vw, 7px);
  min-height:clamp(96px, 7.29vw, 140px);
  padding-block:clamp(16px, 1.25vw, 24px);
  padding-inline:clamp(24px, 2.5vw, 48px) clamp(24px, 3.23vw, 62px);
  background:var(--paper);
  border-radius:var(--r-photo);
  transition:transform .25s var(--ease), color .25s ease;
}
.nlist__date{
  font-family:var(--en);font-weight:800;
  font-size:clamp(15px, 1.04vw, 20px);
  line-height:1.3;letter-spacing:.05em;
}
.nlist__ttl{
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.5;letter-spacing:.05em;
}
.nlist__link:hover{transform:translateX(6px);color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  .nlist__link{transition:none}
  .nlist__link:hover{transform:none}
}

.nlist__empty{
  text-align:center;
  font-size:clamp(14px, .94vw, 18px);color:#777;
}

.nlist .nav-links{
  display:flex;justify-content:center;align-items:center;
  gap:clamp(12px, 1.56vw, 30px);
  margin-top:clamp(34px, 4.06vw, 78px);
  font-family:var(--en);font-weight:600;
  font-size:clamp(20px, 1.56vw, 30px);
  letter-spacing:.05em;
}
.nlist .page-numbers{
  display:grid;place-items:center;
  width:clamp(44px, 3.125vw, 60px);aspect-ratio:1;
  background:var(--paper);color:var(--red);
  border-radius:50%;
  transition:background-color .25s ease, color .25s ease;
}
.nlist .page-numbers.current,
.nlist a.page-numbers:hover{background:var(--red);color:var(--paper)}

/* 「…」は 10px の点 3 つで表現する */
.nlist .page-numbers.dots{
  width:clamp(36px, 2.6vw, 50px);
  height:clamp(7px, .52vw, 10px);
  aspect-ratio:auto;
  background:
    url("../img/pager-dot.svg") no-repeat left center,
    url("../img/pager-dot.svg") no-repeat center center,
    url("../img/pager-dot.svg") no-repeat right center;
  background-size:clamp(7px, .52vw, 10px) auto;
  border-radius:0;
  font-size:0;color:transparent;
}

.nlist .page-numbers.prev,
.nlist .page-numbers.next{
  width:clamp(24px, 1.82vw, 35px);
  aspect-ratio:auto;height:clamp(24px, 1.82vw, 35px);
  background:url("../img/pager-next.svg") no-repeat center / clamp(11px, .83vw, 16px) auto;
  border-radius:0;
}
/* 矢印は当たり判定のぶん字面より広いので、その差は中央寄せから除く */
.nlist .page-numbers.next{transform:rotate(90deg);margin-right:calc(-1 * clamp(10px, .78vw, 15px))}
.nlist .page-numbers.prev{transform:rotate(-90deg);margin-left:calc(-1 * clamp(10px, .78vw, 15px))}
.nlist a.page-numbers.prev:hover,
.nlist a.page-numbers.next:hover{opacity:.55}

.nlist .screen-reader-text{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* 会社概要 */

.ph--company .ph__ph img{
  position:absolute;
  left:0;top:-76.667%;      /* -460px / 600px */
  width:105.208%;           /* 2020px / 1920px */
  max-width:none;height:auto;
}

.cpage{
  padding:clamp(34px, 4.06vw, 78px) 0 clamp(80px, 9.375vw, 180px);
}
.csec + .csec{margin-top:clamp(48px, 5.26vw, 101px)}

/* 見出しは詰めた行送り（40px / 27px）にしてある */
.csec__ttl{
  margin-bottom:clamp(20px, 2.03vw, 39px);
  color:var(--red);text-align:center;
  font-size:clamp(24px, 2.08vw, 40px);
  line-height:.675;letter-spacing:.05em;
}
.csec__card{
  width:clamp(600px, 46.875vw, 900px);
  margin-inline:auto;
  padding:clamp(28px, 2.81vw, 54px) clamp(24px, 5.21vw, 100px);
  background:var(--paper);
  border-radius:var(--r-photo);
}

.cinfo__row{
  display:grid;
  grid-template-columns:clamp(120px, 11.41vw, 219px) 1fr;
  padding-block:clamp(14px, 1.367vw, 26.25px);
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.5;letter-spacing:.05em;
}

/* 行間の破線（3px 実線 + 3px 余白、#a9a9a9） */
.cinfo__row + .cinfo__row{
  background-image:repeating-linear-gradient(to right, #a9a9a9 0 3px, transparent 3px 6px);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:left top;
}
.cinfo dt{color:var(--red);font-weight:700}
.cinfo dd{margin:0}
.cinfo dd a{transition:color .25s ease}
.cinfo dd a:hover{color:var(--red)}
.cinfo__link{text-decoration:underline}

.csec__card--contact{
  padding-block:clamp(40px, 3.96vw, 76px);
  text-align:center;
}
.ccontact__lead{
  font-weight:500;
  font-size:clamp(16px, 1.25vw, 24px);
  line-height:1.9167;letter-spacing:.05em;
}
.ccontact__btn{
  display:grid;place-items:center;
  width:clamp(280px, 26.04vw, 500px);
  height:clamp(60px, 5.21vw, 100px);
  margin:clamp(24px, 2.24vw, 43px) auto 0;
  background:#000;color:var(--paper);
  border-radius:100px;
  font-weight:700;
  font-size:clamp(16px, 1.354vw, 26px);
  line-height:1;letter-spacing:0;
  transition:background-color .25s ease;
}
.ccontact__btn:hover{background:var(--red)}

@media (prefers-reduced-motion:reduce){
  .ccontact__btn{transition:none}
}

/* プライバシーポリシー */

/* 日本語が主見出し、英字が添えになるページ（プライバシーポリシー・お問い合わせ） */
.ph--jaTtl .ph__in{padding-top:clamp(11px, 1.04vw, 20px)}
.ph--jaTtl .ph__ja{
  margin-top:0;
  font-size:clamp(28px, 2.60vw, 50px);
  line-height:1.45;letter-spacing:0;
}
.ph--jaTtl .ph__en{
  margin-top:clamp(4px, .42vw, 8px);
  font-size:clamp(15px, 1.04vw, 20px);
  line-height:1.2;letter-spacing:.05em;
}
.ph--pp .ph__ph img{
  position:absolute;
  left:-20.260%;top:-67%;    /* -389px / 1920px, -402px / 600px */
  width:120.260%;            /* 2309px / 1920px */
  max-width:none;height:auto;
}

.pp{
  padding:clamp(34px, 4.06vw, 78px) 0 clamp(80px, 17.08vw, 328px);
}
.pp__card{
  width:clamp(600px, 78.125vw, 1500px);
  margin-inline:auto;
  padding:clamp(32px, 5.52vw, 106px) clamp(24px, 7.81vw, 150px) clamp(32px, 4.95vw, 95px);
  background:var(--paper);
  border-radius:var(--r-photo);
}
.pp__lead,
.pp__txt{
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.8333;letter-spacing:.05em;
}
.pp__sec{margin-top:clamp(30px, 2.97vw, 57px)}
.pp__sec + .pp__sec{margin-top:clamp(32px, 3.125vw, 60px)}
.pp__ttl{
  margin-bottom:clamp(12px, 1.04vw, 20px);
  font-weight:500;
  font-size:clamp(18px, 1.354vw, 26px);
  line-height:1.0385;letter-spacing:.05em;
}

/* 見出し下の破線（3px 実線 + 3px 余白、#a9a9a9） */
.pp__txt{
  padding-top:clamp(12px, 1.04vw, 20px);
  background-image:repeating-linear-gradient(to right, #a9a9a9 0 3px, transparent 3px 6px);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:left top;
}
.pp__list{
  margin-top:clamp(12px, 1.04vw, 20px);
  font-size:clamp(13px, .83vw, 16px);
  line-height:2.5;
}
.pp__list li{padding-left:1em;text-indent:-1em}
.pp__list li::before{content:"・"}

/* 条文の中の番号つき箇条書き。1. 2. 3. …
   番号は counter で出すので、ol 既定のマーカーは消す（記事本文の ol には触らない） */
.pp__list--num,
.pp__sub{list-style:none;padding-left:0}
.pp__list--num{counter-reset:pp}
.pp__list--num > li{
  padding-left:1.8em;text-indent:-1.8em;
  counter-increment:pp;
}
.pp__list--num > li::before{content:counter(pp) ". "}

/* そのさらに中の （1）（2）… */
.pp__sub{
  margin-top:clamp(4px, .31vw, 6px);
  counter-reset:pp;
}
.pp__sub > li{
  padding-left:2.6em;text-indent:-2.6em;
  counter-increment:pp;
}
.pp__sub > li::before{content:"（" counter(pp) "）"}

/* お問い合わせ窓口の「項目：内容」 */
.pp__info{
  margin-top:clamp(12px, 1.04vw, 20px);
  font-size:clamp(13px, .83vw, 16px);
  line-height:2.2;
}
.pp__info-k{
  display:inline-block;
  min-width:9em;
}
.pp__info-k::after{content:"："}
.pp__txt a{text-decoration:underline;text-underline-offset:.2em}
.pp__txt a:hover{color:var(--red)}

/* ============================================================
   記事詳細（BEER TALK / NEWS 共通）
   本文はブロックエディタで自由に組まれる前提なので、
   .entry__body 以下でコアブロックの見た目を揃えている
   ============================================================ */

.entry{
  padding:clamp(34px, 4.06vw, 78px) 0 clamp(80px, 9.90vw, 190px);
}
.entry__card{
  width:clamp(600px, 72.92vw, 1400px);
  margin-inline:auto;
  padding:clamp(28px, 4.06vw, 78px) clamp(24px, 5.21vw, 100px) clamp(32px, 5.31vw, 102px);
  background:var(--paper);
  border-radius:var(--r-photo);
}
/* NEWS 詳細だけタイトルの上に日付が入る */
.entry__date{
  display:block;
  margin-bottom:clamp(6px, .52vw, 10px);
  font-family:var(--en);font-weight:800;
  font-size:clamp(15px, 1.04vw, 20px);
  line-height:1.3;letter-spacing:.05em;
}
.entry__ttl{
  max-width:clamp(300px, 46.15vw, 886px);
  margin-bottom:clamp(20px, 1vw, 26px);
  font-weight:500;
  font-size:clamp(18px, 1.354vw, 26px);
  line-height:1.4;letter-spacing:.05em;
}

/* 本文の上の破線（3px 実線 + 3px 余白、#a9a9a9） */
.entry__body{
  padding-top:clamp(16px, 1.5625vw, 30px);
  background-image:repeating-linear-gradient(to right, #a9a9a9 0 3px, transparent 3px 6px);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:left top;

  font-size:clamp(15px, .9375vw, 18px);
  line-height:2.2222;letter-spacing:.05em;
  overflow-wrap:anywhere;
}
.entry__body::after{content:"";display:block;clear:both}

/* ブロック間の余白 */
.entry__body > * + *,
.entry__body .wp-block-group__inner-container > * + *,
.entry__body .wp-block-column > * + *,
.entry__body .wp-block-media-text__content > * + *{
  margin-top:clamp(12px, 2.17vw, 40px);
}
.entry__body > *:first-child{margin-top:0}
.entry__body > *:last-child{margin-bottom:0}

/* 見出し（デザインに指定が無いぶんは本文の階層に合わせた控えめな設定） */
.entry__body :is(h1, h2, h3, h4, h5, h6){
  margin-top:clamp(32px, 5.21vw, 100px);
  margin-bottom:0;
  font-weight:700;line-height:1.6;letter-spacing:.05em;
}
.entry__body h1{font-size:clamp(21px, 1.46vw, 28px)}
.entry__body h2{font-size:clamp(19px, 1.25vw, 24px)}
.entry__body h3{font-size:clamp(17px, 1.04vw, 20px)}
.entry__body :is(h4, h5, h6){font-size:clamp(15px, .9375vw, 18px)}
.entry__body :is(h1, h2, h3, h4, h5, h6) + *{margin-top:clamp(12px, 1.25vw, 24px)}

.entry__body :is(ul, ol){padding-left:1.6em}
.entry__body ul{list-style:disc}
.entry__body ol{list-style:decimal}
.entry__body li + li{margin-top:.2em}
.entry__body li::marker{color:var(--red)}

.entry__body a:not(.wp-block-button__link){
  text-decoration:underline;
  transition:color .25s ease;
}
.entry__body a:not(.wp-block-button__link):hover{color:var(--red)}

.entry__body strong{font-weight:700}
.entry__body em{font-style:italic}

/* 画像・図版
   margin-top はブロック間の余白ルールに任せるので、ここでは触らない */
.entry__body figure{margin-bottom:0;margin-inline:0}
.entry__body .wp-block-image.aligncenter img{margin-inline:auto}
.entry__body figcaption,
.entry__body .wp-element-caption{
  margin-top:clamp(8px, .63vw, 12px);
  font-size:clamp(12px, .73vw, 14px);
  line-height:1.8;color:#777;
  text-align:center;
}

/* メディアとテキスト ─ 既定は 430px : 680px。
   エディタで幅を動かした場合はインラインスタイルが優先される */
.entry__body .wp-block-media-text{
  grid-template-columns:35.83% 1fr;
  gap:clamp(20px, 4.69vw, 90px);
  align-items:start;
}
.entry__body .wp-block-media-text.has-media-on-the-right{
  grid-template-columns:1fr 35.83%;
}
.entry__body .wp-block-media-text__content{padding:0}
.entry__body .wp-block-media-text__media img{width:100%}

/* ギャラリー ─ 列数はエディタの指定に従い、間隔だけ揃える */
.entry__body .wp-block-gallery.has-nested-images{
  display:grid;
  gap:clamp(10px, 1.5625vw, 30px);
  grid-template-columns:repeat(3, 1fr);
}
.entry__body .wp-block-gallery.columns-1{grid-template-columns:1fr}
.entry__body .wp-block-gallery.columns-2{grid-template-columns:repeat(2, 1fr)}
.entry__body .wp-block-gallery.columns-4{grid-template-columns:repeat(4, 1fr)}
.entry__body .wp-block-gallery.columns-5{grid-template-columns:repeat(5, 1fr)}
.entry__body .wp-block-gallery.columns-6{grid-template-columns:repeat(6, 1fr)}
.entry__body .wp-block-gallery.columns-7{grid-template-columns:repeat(7, 1fr)}
.entry__body .wp-block-gallery.columns-8{grid-template-columns:repeat(8, 1fr)}
/* コア側が :not(#individual-image) で ID 相当の詳細度を使って
   figure に列数ぶんの width を指定しているため、ここだけ !important で上書きする */
.entry__body .wp-block-gallery.has-nested-images figure.wp-block-image{
  width:100% !important;
  margin:0;flex:none;
}
.entry__body .wp-block-gallery.is-cropped figure.wp-block-image:not(#individual-image){
  aspect-ratio:38 / 25;
}

/* カラム */
.entry__body .wp-block-columns{
  gap:clamp(20px, 4.69vw, 90px);
  margin-bottom:0;
}

/* 引用 */
.entry__body blockquote{
  margin-bottom:0;margin-inline:0;
  padding-left:clamp(16px, 1.25vw, 24px);
  border-left:3px solid var(--red);
  color:#555;
}
.entry__body blockquote cite{
  display:block;
  margin-top:.6em;
  font-size:.86em;font-style:normal;color:#777;
}

/* 表 ─ 貼り付けられた固定幅の表でもカードからはみ出さないようにする */
.entry__body .wp-block-table{overflow-x:auto}
.entry__body > *{max-width:100%}
.entry__body table{
  width:100%;max-width:100%;
  border-collapse:collapse;
  font-size:clamp(13px, .83vw, 16px);
  line-height:1.8;
}
.entry__body :is(th, td){
  padding:clamp(8px, .73vw, 14px) clamp(10px, .94vw, 18px);
  border:1px solid #e0e0e0;
  text-align:left;vertical-align:top;
}
.entry__body th{background:var(--pale);font-weight:700}

/* 区切り線 */
.entry__body hr{
  height:1px;border:0;margin-bottom:0;
  background-image:repeating-linear-gradient(to right, #a9a9a9 0 3px, transparent 3px 6px);
}
/* ドットスタイルはコア側が文字で点を描くので、高さの指定を外す */
.entry__body hr.is-style-dots{
  height:auto;background-image:none;
  color:#a9a9a9;
}

/* ボタン */
.entry__body .wp-block-button__link{
  display:inline-grid;place-items:center;
  min-height:clamp(48px, 3.13vw, 60px);
  padding-inline:clamp(24px, 2.08vw, 40px);
  background:#000;color:var(--paper);
  border-radius:100px;
  font-weight:700;
  font-size:clamp(14px, .83vw, 16px);
  line-height:1.4;letter-spacing:.05em;
  text-decoration:none;
  transition:background-color .25s ease;
}
.entry__body .wp-block-button__link:hover{background:var(--red);color:var(--paper)}
.entry__body .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--ink);
  border:2px solid var(--ink);
}
.entry__body .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--ink);color:var(--paper);
}

/* 動画・埋め込み・コード */
.entry__body :is(iframe, video, embed, object){max-width:100%}
.entry__body .wp-block-video video{width:100%;height:auto}
.entry__body .wp-block-embed__wrapper{max-width:100%}
.entry__body .wp-block-embed iframe{width:100%}
.entry__body pre{
  padding:clamp(14px, 1.04vw, 20px);
  background:var(--pale);
  border-radius:8px;
  font-size:.86em;line-height:1.8;
  overflow-x:auto;white-space:pre;
}
.entry__body code{
  padding:.15em .4em;
  background:var(--pale);border-radius:4px;
  font-size:.92em;
}
.entry__body pre code{padding:0;background:none}

/* 配置 ─ はみ出さないようカードの内側で止める */
.entry__body :is(.alignwide, .alignfull){
  width:auto;max-width:none;
  margin-inline:calc(-1 * clamp(24px, 5.21vw, 100px));
}
.entry__body .aligncenter{margin-inline:auto;text-align:center}
.entry__body .alignleft{
  float:left;max-width:50%;
  margin:0 clamp(16px, 2.08vw, 40px) clamp(16px, 2.08vw, 40px) 0;
}
.entry__body .alignright{
  float:right;max-width:50%;
  margin:0 0 clamp(16px, 2.08vw, 40px) clamp(16px, 2.08vw, 40px);
}

/* 前後の記事 */
.entry__nav{
  display:flex;justify-content:space-between;align-items:center;
  width:clamp(320px, 24.84vw, 477px);
  margin:clamp(40px, 4.27vw, 82px) auto 0;
}
.entry__navLink{
  display:inline-flex;align-items:center;
  gap:clamp(8px, .68vw, 13px);
  color:var(--red);
  font-weight:500;
  font-size:clamp(14px, 1.04vw, 20px);
  line-height:1.35;letter-spacing:.05em;
}
.entry__navArw{
  position:relative;flex:0 0 auto;
  width:clamp(30px, 1.93vw, 37px);
  transition:transform .35s var(--ease-back);
}
.entry__navArwBg{width:100%;height:auto}
.entry__navArwIn{
  position:absolute;left:50%;top:50%;
  width:27.03%;height:auto;
}
.entry__navLink--prev .entry__navArwIn{transform:translate(-50%,-50%) rotate(-90deg)}
.entry__navLink--next .entry__navArwIn{transform:translate(-50%,-50%) rotate(90deg)}
.entry__navLink--prev:hover .entry__navArw{transform:translateX(-5px)}
.entry__navLink--next:hover .entry__navArw{transform:translateX(5px)}

/* 一覧に戻る */
.entry__back{
  display:grid;place-items:center;
  width:clamp(280px, 26.04vw, 500px);
  height:clamp(60px, 5.21vw, 100px);
  margin:clamp(50px, 5.99vw, 115px) auto 0;
  background:#000;color:var(--paper);
  border-radius:100px;
  font-weight:700;
  font-size:clamp(16px, 1.354vw, 26px);
  line-height:1;
  transition:background-color .25s ease;
}
.entry__back:hover{background:var(--red)}

@media (prefers-reduced-motion:reduce){
  .entry__navArw,.entry__back{transition:none}
  .entry__navLink:hover .entry__navArw{transform:none}
}

/* お問い合わせ（Snow Monkey Forms の出力に被せる） */

.ph--contact .ph__ph img{
  position:absolute;
  left:-3.385%;top:-105.5%;   /* -65px / 1920px, -633px / 600px */
  width:120.625%;             /* 2316px / 1920px */
  max-width:none;height:auto;
}

.cform{
  padding:clamp(40px, 5.10vw, 98px) 0 clamp(80px, 15vw, 288px);
}
.cform .snow-monkey-form{
  width:clamp(600px, 62.76vw, 1205px);
  margin:0 auto;
}
/* SMF の simple-table 既定（item の余白・ラベル列 224px 固定）を解除する */
.cform .smf-item{
  display:grid;
  grid-template-columns:clamp(150px, 21.09vw, 405px) 1fr;
  align-items:start;
  padding:0;
}
.cform .smf-item__col--label{width:auto;max-width:none;padding:0}
.cform .smf-item__col--controls{width:100%;max-width:none;padding:0}
.cform .smf-item + .smf-item{margin-top:clamp(20px, 2.08vw, 40px)}
.cform .smf-item__label{
  padding-top:clamp(12px, 1.12vw, 21.5px);
  font-weight:700;
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.5;letter-spacing:.05em;
}

.cform .smf-text-control__control,
.cform .smf-textarea-control__control,
.cform .smf-select-control__control{
  width:100%;
  padding-inline:clamp(12px, 1.04vw, 20px);
  background:var(--paper);
  border:0;border-radius:clamp(6px, .52vw, 10px);
  font-family:inherit;
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.5;letter-spacing:.05em;
  color:var(--ink);
}
.cform .smf-text-control__control,
.cform .smf-select-control__control{height:clamp(52px, 3.65vw, 70px)}
.cform .smf-textarea-control__control{
  height:clamp(180px, 15.63vw, 300px);
  padding-block:clamp(12px, 1.04vw, 20px);
  resize:vertical;
}
.cform .smf-text-control__control:focus-visible,
.cform .smf-textarea-control__control:focus-visible,
.cform .smf-select-control__control:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}

/* 同意欄はラベルと1行目の高さを揃える */
.cform .smf-item:has(.smf-checkboxes-control){margin-top:clamp(40px, 4.01vw, 77px)}
.cform .smf-item:has(.smf-checkboxes-control) .smf-item__label{padding-top:0}

.cform .smf-checkbox-control{
  display:inline-flex;align-items:center;
  gap:clamp(10px, 1.15vw, 22px);
}
.cform .smf-checkbox-control__control{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;
  width:clamp(14px, .83vw, 16px);aspect-ratio:1;
  margin:0;
  background:var(--paper);
  border:1px solid #000;border-radius:0;
  cursor:pointer;
}
.cform .smf-checkbox-control__control:checked{
  background:#000;
  box-shadow:inset 0 0 0 3px var(--paper);
}
.cform .smf-checkbox-control__label{
  font-weight:700;
  font-size:clamp(14px, .94vw, 18px);
  line-height:1.5;letter-spacing:.05em;
}
.cform .smf-control-description{
  margin-top:clamp(12px, 1.20vw, 23px);
  font-weight:500;
  font-size:clamp(13px, .83vw, 16px);
  line-height:1.6875;letter-spacing:.05em;
}
.cform .smf-control-description a{text-decoration:underline}

.cform .smf-error-messages{
  margin-top:clamp(6px, .42vw, 8px);
  color:var(--red);
  font-size:clamp(12px, .73vw, 14px);
  line-height:1.7;
}

.cform .smf-action{
  margin:clamp(60px, 9.27vw, 178px) 0 0;
  display:flex;justify-content:center;align-items:center;
  gap:clamp(12px, 1.04vw, 20px);
}
.cform .smf-button-control__control{
  display:grid;place-items:center;
  width:clamp(280px, 26.04vw, 500px);
  height:clamp(60px, 5.21vw, 100px);
  background:#000;color:var(--paper);
  border:0;border-radius:100px;
  font-family:inherit;font-weight:700;
  font-size:clamp(16px, 1.354vw, 26px);
  line-height:1;letter-spacing:0;
  cursor:pointer;
  transition:background-color .25s ease;
}
.cform .smf-button-control__control:hover{background:var(--red)}

.cform__missing{
  text-align:center;
  font-size:clamp(14px, .94vw, 18px);color:#777;
}

@media (prefers-reduced-motion:reduce){
  .cform .smf-button-control__control{transition:none}
}

@media (max-width:899px){

  body{background:var(--pale)}
  .rest,.smoke,.shop,.ryokan{background:none}

  :root{--r-cut:28px;--r-photo:12px}

  .hd{padding:13px 15px}
  .hd__logoImg{width:152px}
  .gnav{display:none}
  /* 言語切替はハンバーガーメニューの中に入れたので、こちらは出さない */
  .gnav__lang{display:none}
  .burger{display:grid;top:13px;right:11px}
  /* メニューを開いている間は、左のロゴと高さを揃える
     （ページ側のロゴより、メニューのロゴのほうが 7px 下にあるため） */
  .burger.is-open{top:20px}

  /* 右端の縦タブではなく、ハンバーガーの中の menu__bar と同じ
     「画面の下に貼りつく2つの入り口」にする */
  .tabs{
    left:0;right:0;top:auto;bottom:0;
    display:grid;grid-template-columns:188fr 187fr;
    align-items:stretch;
    gap:0;
    height:55px;
  }
  .tabs__item{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:auto;padding:0;
    border-radius:0;
    font-size:18px;line-height:1.5556;font-weight:700;
    writing-mode:horizontal-tb;
  }
  .tabs__item:hover{width:auto}
  .tabs__item:first-child{background:#c50c1a;letter-spacing:.02em}
  .tabs__item:last-child{background:#f8f8f8;letter-spacing:.05em}
  /* 赤地に乗るので、赤いアイコンを白く抜く */
  .tabs__icon{display:block;width:19px;height:auto;filter:brightness(0) invert(1)}


  .totop{width:65px;right:22px;bottom:77px}

  .logo--lg{width:min(302px, 80.5vw)}

  br.sp{display:inline}

  br.pc{display:none}

  .concept{padding:60px 20px}

  .concept__ttl{font-size:min(7.5vw, 34px);line-height:2;letter-spacing:.04em}
  .concept__lead{margin-top:39px;font-size:16px;line-height:3.4;letter-spacing:.02em}
  .concept__lead b{font-size:1.96em}

  .bgtext{font-size:78px}

  .beer{padding-bottom:0}
  .beer__hero{aspect-ratio:auto;padding:120px 0 0}

  .bubbles{inset:0;overflow:visible}
  .bubble{left:var(--sx);top:var(--sy);width:var(--sd)}
  .bubble:nth-child(n+10){display:none}
  .bubble:nth-child(1){--sx:-5.07vw;--sy:57px; --sd:28.27vw}
  .bubble:nth-child(2){--sx:70.40vw;--sy:40px; --sd:13.87vw}
  .bubble:nth-child(3){--sx:47.20vw;--sy:99px; --sd:13.87vw}
  .bubble:nth-child(4){--sx:81.60vw;--sy:208px;--sd:21.33vw}
  .bubble:nth-child(5){--sx:51.20vw;--sy:243px;--sd:13.87vw}
  .bubble:nth-child(6){--sx:12.00vw;--sy:247px;--sd:21.33vw}
  .bubble:nth-child(7){--sx:-1.33vw;--sy:352px;--sd:13.87vw}
  .bubble:nth-child(8){--sx:67.20vw;--sy:348px;--sd:13.87vw}
  .bubble:nth-child(9){--sx:41.60vw;--sy:393px;--sd:21.33vw}

  .beer__ttl{position:relative;z-index:2;pointer-events:auto}

  .beer__en{font-size:min(18.67vw, 90px);line-height:.731}
  .beer__en--lg{margin-left:-2px;font-size:min(26.67vw, 128px);line-height:1.158}
  .beer__ja{margin:8px 0 0 2px;font-size:min(8.27vw, 40px)}

  .bottles{
    position:relative;z-index:1;
    display:flex;align-items:flex-end;gap:0;
    width:max-content;
    margin:26px 0 0 -6.2vw;
  }

  .bottles__i{
    position:relative;left:auto;top:auto;
    flex:0 0 30.1vw;width:30.1vw;
    overflow:hidden;
  }

  .bottles__i::before{content:"";display:block;padding-top:299.4%}
  .bottles__i img{
    position:absolute;inset:0;
    width:100%;height:102%;
    object-fit:cover;object-position:center bottom;
  }
  .bottles__i + .bottles__i{margin-left:-2.3vw}

  .born{
    flex-direction:column;align-items:stretch;
    gap:0;padding:109px 24px 0;
  }
  .bgtext--born{left:-.14em;top:45px}
  .born__ph{width:min(332px, 88.5vw);margin-inline:auto}
  .born__tx{margin-top:24px}

  .born__ttl{font-size:min(7.2vw, 32px);line-height:1.6}
  .factory__ttl{font-size:min(6.6vw, 30px);line-height:1.6}
  .born__big,
  .factory__big{font-size:2.2em}
  .born__lead,
  .factory__lead{margin-top:16px;font-size:16px;line-height:2}

  .factory{aspect-ratio:auto;padding:0 24px}

  .bgtext--brewery{left:20px;top:-45px}

  .factory__ph{
    position:relative;left:auto;top:auto;
    width:min(332px, 88.5vw);
    margin:76px 0 0 -5px;
  }
  .factory__tx{position:static;width:auto;margin-top:34px}
  .factory__lead{margin-left:0}

  .factory .more{
    display:flex;width:max-content;
    margin:20px 0 0 auto;
  }

  .rest__in{--rest-pin:0px;height:auto;padding-top:128px}
  .bgtext--rest{right:-.14em;top:32px}

  .rest__ttl{
    position:relative;left:auto;top:auto;
    margin: -.35em 0 -0.4em 1.075em;
    font-size:min(10.67vw, 48px);
    font-weight:800;
    line-height:1;letter-spacing:0;white-space:nowrap;
  }
  .rest__big{font-size:2.43em}
  .rest__ruby{left:4em;top:0.7em;font-size:.6em}

  .rest__panel{display:none}
  .rest__wrap{
    position:relative;
    margin:0 16px;padding:40px 22px 29px;
    background:var(--red);border-radius:32px;
  }

  .rest__stage,
  .rest__stick{position:static;width:auto;height:auto}
  .rest__stick{display:flex;flex-direction:column}
  .rest__marks{display:none}

  .rest__tx{position:static;width:auto;order:1}
  .rest__lead{font-size:24px;line-height:1.7}
  .rest__body{margin-top:24px;font-size:15px;line-height:1.87}

  .count{
    display:block;position:relative;left:auto;top:auto;
    order:2;
    width:46px;height:56px;aspect-ratio:auto;
    margin:30px 0 0 auto;
  }
  .count::before{height:52px}
  .count__now{font-size:26px}
  .count__all{font-size:15px}

  .rest__main{
    position:relative;order:3;
    left:auto;top:auto;width:auto;margin-top:20px;
  }

  .rest__subs{
    position:static;width:auto;
    margin:50px -38px 0 0;
    display:flex;gap:4px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;

    /* 横スワイプはブラウザのネイティブスクロールに任せる。
       touch-action:pan-y で横を塞いで JS の scrollLeft 付け替えに任せていたが、
       右端まで送ってから戻すと引っかかって戻れなかった。
       スナップは proximity（近いときだけ吸着）にして、指の動きを邪魔しない */
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
  }
  .rest__subs::-webkit-scrollbar{display:none}
  /* マウスでドラッグしている間だけは吸着を切る（JS のアニメと引っ張り合うため） */
  .rest__subs.is-drag{cursor:grabbing;scroll-snap-type:none}
  .rest__subs li{flex:0 0 221px;scroll-snap-align:start}

  .rest__subs img{user-select:none;-webkit-user-drag:none;pointer-events:none}

  .rest__subs li:first-child{border-bottom-left-radius:0}

  .rest__more{
    position:static;display:flex;width:max-content;
    margin:30px 0 0 auto;
  }

  .more{font-size:19px}
  .more__ar{width:58px}

  .smoke__in{height:auto;padding:50vw 0 48px}
  .bgtext--gubi{left:-.06em;top:-25px}
  .bgtext--kino{left:50px;top:47px}
  .bgtext--smoke{left:10px;top:auto;bottom:0}

  .smoke__ttl{
    position:relative;left:auto;top:auto;
    margin:-.2em 24px -14px 0;
    font-size:42px;line-height:1;text-align:right;
    font-weight:800;
  }

  .smoke__big{font-size:2.5em;font-weight:800}
  .smoke__ruby{left:auto;right:1em;top:0.6em;font-size:8vw}

  .smoke__panel{display:none}
  .smoke__wrap{
    position:relative;
    display:flex;flex-direction:column;
    margin:0 16px;padding:40px 22px 53px;
    background:var(--paper);border-radius:32px;
  }

  .smoke__tx{position:static;width:auto;order:-1}
  .smoke__lead{font-size:24px;line-height:1.7}
  .smoke__body{margin-top:24px;font-size:15px;line-height:1.87}

  .smoke__ph{
    position:relative;left:auto;top:auto;
    width:auto;margin-top:37px;
  }

  .pair__ph{
    position:relative;left:auto;top:auto;
    width:min(300px, 80vw);
    margin:41px auto 0;
  }
  .pair__ph--2{margin-top:40px}
  .pair__tx{position:static;left:auto;top:auto}
  .pair__ttl{
    font-size:72px;line-height:1;text-align:center;
  }

  .pair__x{display:block;margin:0 0 -20px;font-size:1em}
  .pair__cap{
    margin-top:4px;
    font-size:20px;text-align:center;
  }
  /* SP はブロック全体がセンター揃えなので、PC 用の右寄せは戻す */
  .pair__tx--1 .pair__cap,
  .pair__tx--2 .pair__cap{left:0}
  .smoke__more{
    position:static;display:flex;width:max-content;
    margin:44px 0 0 auto;
  }

  .shop__in{
    height:auto;
    display:flex;flex-direction:column;align-items:center;
    padding:72px 0 71px;
  }
  .bgtext--shopR{right:-.14em;top:275px}
  .bgtext--shopL{left:-.14em;top:300vw}

  .ec,.ec__red{display:none}
  .ec-card{
    width:min(300px, 80vw);
    border-radius:20px;overflow:hidden;
    text-align:center;
  }
  .ec__head{
    display:flex;flex-direction:column;align-items:center;
    padding:33px 16px 0;
    background:var(--paper);
  }
  .ec__foot{
    padding:48px 16px 35px;
    background:var(--red);
  }
  .ec__eyebrow{position:static;font-size:20px;line-height:1.45}
  .ec__ttl{position:static;margin-top:8px;font-size:42px;line-height:1.12}

  .ec__line{
    position:static;
    width:3px;height:19px;margin-top:9px;
  }

  .ec__lead{
    position:static;width:auto;
    font-size:min(3.7vw, 14px);line-height:1.95;letter-spacing:.02em;
    white-space:nowrap;
  }

  .ec__lead br.pc{display:none}
  .ec__btn{
    position:relative;left:auto;top:auto;
    width:min(196px, 100%);height:55px;
    margin:31px auto 0;
    font-size:17px;
  }

  .news__ttl,.news__sub,.news__list{position:static;width:auto}
  .news__ttl{order:2;margin-top:92px;font-size:58px;line-height:1}
  .news__sub{order:3;margin-top:10px;font-size:14px;line-height:1.6;text-align:center}
  .news__sub br{display:none}
  .news__list{order:4;width:100%;margin-top:31px;padding:0 16px;gap:11px}
  .news__list a{padding:28px 22px;border-radius:12px}
  .news__list a:hover{transform:none}
  .news__list time{font-size:15px}
  .news__list span{margin-top:7px;font-size:16px;line-height:1.6}
  .news__more{
    position:relative;left:auto;top:auto;order:5;
    width:199px;height:59px;margin-top:32px;
    font-size:15px;letter-spacing:.14em;
  }

  .ryokan{padding-bottom:min(31.2vw, 160px)}
  .ryokan__in{
    position:relative;
    width:min(89.33vw, 520px);
    height:auto;aspect-ratio:2.5/4;
    margin-inline:auto;
    border-radius:min(3.2vw, 18px);overflow:hidden;
  }
  .ryokan__ph{
    position:absolute;inset:0;
    left:0;top:0;width:auto;aspect-ratio:auto;
    border-radius:0;
  }
  .ryokan__ph img{
    position:absolute;inset:0;
    left:0;top:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 60%;
  }

  .ryokan__vt{top:6.76%}
  .ryokan__vt--lg{left:auto;right:6.57%;font-size:min(5.6vw, 30px)}

  .ryokan__vt--sm{left:auto;right:17.52%;font-size:min(5.6vw, 30px)}
  .ryokan__logo{left:7.16%;top:25.9%;width:38.81%}
  .ryokan__info{left:7.16%;top:53.6%;right:7.16%}
  .ryokan__name{font-size:min(5.07vw, 27px)}

  .ryokan__addr{margin-top:3.48%;font-size:min(4vw, 21px);line-height:1.7}

  .ryokan__tel{margin-top:3.48%;font-size:min(3.7vw, 19px);white-space:nowrap}
  .ryokan__btns{gap:3.48%;margin-top:7.67%}
  .ryokan__btns a{
    width:47.7%;height:auto;aspect-ratio:14/5;
    font-size:min(3.73vw, 19px);
  }

  .ft{border-radius:52px 52px 0 0}
  .ft__in{
    height:auto;
    display:flex;flex-direction:column;align-items:center;
    /* 下に貼りつくバー（55px）と重ならないよう、下だけ厚めに取る */
    padding:54px 20px 89px;
  }
  .ft__nav,.ft__member,.ft__shop,.ft__line,
  .ft__machiya,.ft__smoke,.ft__place,.ft__yama{display:none}

  .ft__logo{position:static;width:260px}
  .ft__contact{
    position:static;
    width:219px;height:45px;margin-top:32px;
    font-size:14px;
  }
  .ft__sns{position:static;margin-top:42px;gap:26px}
  .ft__sns svg{height:33px}
  .ft__copy{position:static;margin-top:55px;font-size:12px;text-align:center}

  .ph{height:min(78vw, 420px)}
  .ph__in{padding-top:10px}
  .ph__en{font-size:34px}
  .ph__ja{font-size:15px}

  .bread{padding:18px 15px 0;font-size:12px}

  .tlist{padding:28px 0 70px}
  .tlist__list{width:auto;margin-inline:15px;gap:10px}
  .tlist__link{
    gap:14px;
    min-height:64px;
    padding-block:14px;padding-inline:20px 16px;
    border-radius:8px;
  }
  .tlist__ttl{font-size:16px;letter-spacing:.04em}
  .tlist__arw{width:28px}
  .tlist__link:hover{background:var(--red)}
  .tlist__link:hover .tlist__arw{transform:none}

  /* SP はヒーローが縦長になるので、写真は cover で入れ直す */
  .ph--news .ph__ph img{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 28%;
  }

  .nlist{padding:28px 0 70px}
  .nlist__list{width:auto;margin-inline:15px;gap:8px}
  .nlist__link{
    gap:4px;
    min-height:0;
    padding-block:18px;padding-inline:20px;
  }
  .nlist__date{font-size:14px}
  .nlist__ttl{font-size:15px;letter-spacing:.04em}
  .nlist__link:hover{transform:none;color:inherit}

  .nlist .nav-links{gap:10px;margin-top:34px;font-size:18px}
  .nlist .page-numbers{width:44px}
  .nlist .page-numbers.dots{width:36px;height:7px}
  .nlist .page-numbers.prev,
  .nlist .page-numbers.next{width:24px;height:24px}

  .ph--company .ph__ph img{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 45%;
  }

  .cpage{padding:28px 0 70px}
  .csec + .csec{margin-top:48px}
  .csec__ttl{margin-bottom:22px;font-size:24px;line-height:1.4}
  .csec__card{width:auto;margin-inline:15px;padding:24px 20px}

  .cinfo__row{
    grid-template-columns:1fr;gap:4px;
    padding-block:16px;
    font-size:14px;
  }

  .csec__card--contact{padding-block:36px}
  .ccontact__lead{font-size:16px;line-height:1.9}
  .ccontact__btn{
    width:auto;max-width:320px;height:60px;
    margin-top:24px;
    font-size:16px;
  }

  .ph--jaTtl .ph__ja{font-size:26px}
  .ph--jaTtl .ph__en{margin-top:10px;font-size:14px}
  .ph--pp .ph__ph img{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 50%;
  }

  .pp{padding:28px 0 70px}
  .pp__card{width:auto;margin-inline:15px;padding:24px 20px 28px}
  .pp__lead,.pp__txt{font-size:14px;line-height:1.85}
  .pp__sec{margin-top:30px}
  .pp__sec + .pp__sec{margin-top:40px}
  .pp__ttl{margin-bottom:12px;font-size:18px;line-height:1.4}
  .pp__txt{padding-top:12px}
  .pp__list{margin-top:12px;font-size:13px;line-height:2}

  .ph--contact .ph__ph img{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 50%;
  }

  .cform{padding:32px 0 80px}
  .cform .snow-monkey-form{width:auto;margin-inline:15px}
  .cform .smf-item{grid-template-columns:1fr;gap:8px}
  .cform .smf-item + .smf-item{margin-top:20px}
  .cform .smf-item__label{padding-top:0;font-size:15px}
  .cform .smf-text-control__control,
  .cform .smf-select-control__control{height:52px;font-size:16px}
  .cform .smf-textarea-control__control{height:200px;font-size:16px}
  .cform .smf-item:has(.smf-checkboxes-control){margin-top:32px}
  .cform .smf-checkbox-control__label{font-size:15px}
  .cform .smf-control-description{margin-top:12px;font-size:13px}
  .cform .smf-action{margin-top:48px}
  .cform .smf-button-control__control{
    width:100%;max-width:320px;height:60px;
    font-size:16px;
  }

  .entry{padding:28px 0 70px}
  .entry__card{width:auto;margin-inline:15px;padding:24px 20px 28px}
  .entry__date{margin-bottom:6px;font-size:14px}
  .entry__ttl{max-width:none;margin-bottom:14px;font-size:19px}
  .entry__body{padding-top:16px;font-size:15px;line-height:2}
  .entry__body > * + *,
  .entry__body .wp-block-group__inner-container > * + *,
  .entry__body .wp-block-column > * + *,
  .entry__body .wp-block-media-text__content > * + *{margin-top:26px}
  .entry__body :is(h2, h3, h4, h5, h6){margin-top:38px;margin-bottom:-14px}

  /* SP は画像まわりを必ず縦積みにする */
  .entry__body .wp-block-media-text{grid-template-columns:1fr;gap:16px}
  .entry__body .wp-block-media-text.has-media-on-the-right{grid-template-columns:1fr}
  .entry__body .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:-1}
  .entry__body .wp-block-columns{flex-direction:column;gap:26px}
  .entry__body .wp-block-gallery.has-nested-images,
  .entry__body .wp-block-gallery.columns-3,
  .entry__body .wp-block-gallery.columns-4,
  .entry__body .wp-block-gallery.columns-5,
  .entry__body .wp-block-gallery.columns-6{grid-template-columns:repeat(2, 1fr)}
  .entry__body :is(.alignwide, .alignfull){margin-inline:-20px}
  .entry__body :is(.alignleft, .alignright){float:none;max-width:none;margin:0}

  .entry__nav{width:auto;margin-top:36px;gap:12px}
  .entry__navLink{font-size:14px}
  .entry__navArw{width:30px}
  .entry__back{
    width:100%;max-width:320px;height:60px;
    margin-top:44px;font-size:16px;
  }
}

@media (max-width:360px){
  .smoke__ttl{font-size:37px}
  .pair__ttl{font-size:62px}
  .news__ttl{font-size:50px}
  .ec__ttl{font-size:38px}
}

/* ============================================================
   レストラン（固定ページ）
   1920px 幅の絶対配置なので、--u（1920分の1）を基準に
   そのままの比率で縮小する。900px 未満は別レイアウトに切り替える。
   ============================================================ */

.rs{
  --u:calc(var(--w) / 1920);
  overflow-x:clip;
}

/* ヒーロー */
/* 書き出し済みの画像をそのまま幅100%で置く。
   高さは画像の縦横比に従うので、差し替えてもCSSを触らなくていい */
.rsHero{position:relative}
.rsHero__ph img{display:block;width:100%;height:auto}

/* キャッチコピー */
.rsIntro{padding-top:calc(32 * var(--u));text-align:center}
.rsIntro__ttl{
  color:var(--red);font-weight:700;
  font-size:calc(50 * var(--u));
  line-height:1.75;letter-spacing:.05em;
}
.rsIntro__ttl b{font-weight:900;font-size:1.6em}
.rsIntro__lead{
  margin-top:calc(40 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:2.2727;letter-spacing:.05em;
}
.rsIntro__ph{
  position:relative;
  width:calc(1190.68 * var(--u));
  aspect-ratio:1190.68 / 578;
  margin:calc(75 * var(--u)) auto 0;
  border-radius:var(--r-photo);overflow:clip;
}
.rsIntro__ph img{
  position:absolute;left:0;top:-27.163%;
  width:105.43%;max-width:none;height:auto;
}

/* ③ 写真ストリップ ─ 右から左へ無限スクロール。
   2番目・4番目だけ少し大きく表示する。画像は書き出したものを
   そのままの比率で置くので、高さは画像任せ（縦位置は中央で揃える） */
.rsStrip{margin-top:calc(106 * var(--u));overflow:clip}
.rsStrip__track{
  display:flex;width:max-content;
  animation:rsFlow 30s linear infinite;
}
/* 箱は中央寄せのまま 350.44 → 416.52 まで広がるので、レーンの隙間＝見た目の隙間ではない。
   大きい箱はレーンから左右に (416.52 - 350.44) / 2 ずつはみ出す。
   大 ⇔ 小 が隣り合ったときに 32px 空くよう、そのはみ出しぶんを足しておく。
   継ぎ目をずらさないため、末尾の margin-right も同じ値にする */
.rsStrip__list{
  display:flex;align-items:center;
  --gap:calc((32 + (416.52 - 350.44) / 2) * var(--u));
  gap:var(--gap);
  margin-right:var(--gap);
}
/* レーン（並びの枠）は 350 幅で固定。
   トラック幅が変わると無限ループの継ぎ目がずれるため、ここは動かさない。
   表示される箱だけを、画面内の位置に応じて 350×403 ⇔ 416×479 に実寸で切り替える。
   --k（0 か 1）は main.js が位置から決めて入れる */
.rsStrip__item{
  position:relative;flex:0 0 auto;
  width:calc(350.44 * var(--u));
  height:calc(479 * var(--u));
}
.rsStrip__box{
  position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  width:calc((350.44 + var(--k, 0) * 66.08) * var(--u));
  height:calc((403 + var(--k, 0) * 76) * var(--u));
  border-radius:var(--r-photo);overflow:clip;
  transition:width .5s var(--ease), height .5s var(--ease);
}
.rsStrip__box img{display:block;width:100%;height:100%;object-fit:cover}

@keyframes rsFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .rsStrip__track{animation:none}
}

/* ご予約・お問合わせ（共通） */
.rsBook__ttl{
  font-weight:700;letter-spacing:.05em;
  line-height:.96;
}
.rsBook__tel{
  font-family:var(--en);font-weight:800;
  font-size:calc(60 * var(--u));
  line-height:1;letter-spacing:0;
}
.rsBook__telLabel{
  font-size:.5em;letter-spacing:.05em;
  margin-right:calc(10 * var(--u));
}
.rsBook__hours{
  font-weight:500;
  font-size:calc(16 * var(--u));
  line-height:3;letter-spacing:.05em;
}
.rsBook__btn{
  display:grid;place-items:center;
  width:calc(300 * var(--u));height:calc(70 * var(--u));
  background:var(--paper);
  border-radius:100px;
  font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1;letter-spacing:.05em;
  transition:background-color .25s ease, color .25s ease;
}

/* ご予約・お問合わせ（上・赤カード） */
.rsBook--light{padding-top:calc(102 * var(--u));text-align:center}
.rsBook--light .rsBook__ttl{
  color:var(--red);
  font-size:calc(50 * var(--u));
}
.rsBook__card{
  position:relative;
  width:calc(1239 * var(--u));height:calc(333 * var(--u));
  margin:calc(34 * var(--u)) auto 0;
  background:var(--red);color:var(--paper);
  border-radius:var(--r-photo);
  text-align:left;
}
/* 中央の縦線 */
.rsBook__card::before{
  content:"";position:absolute;
  left:calc(627.5 * var(--u));top:calc(42 * var(--u));
  width:1px;height:calc(249 * var(--u));
  background:var(--paper);
}
.rsBook__card .rsBook__tel{position:absolute;left:calc(65.5 * var(--u));top:calc(63.5 * var(--u))}
.rsBook__card .rsBook__hours{
  position:absolute;left:0;top:calc(123.5 * var(--u));
  width:calc(619.5 * var(--u));text-align:center;
}
.rsBook__card .rsBook__btn{
  position:absolute;left:calc(154.5 * var(--u));top:calc(199.5 * var(--u));
  color:var(--red);
}
.rsBook__card .rsBook__btn:hover{color:var(--paper)}

.rsBook__shop{
  position:absolute;left:calc(701.5 * var(--u));top:calc(69.5 * var(--u));
  font-weight:700;letter-spacing:.05em;line-height:1;
}
.rsBook__shopSm{font-size:calc(30 * var(--u))}
.rsBook__shopLg{font-size:calc(34 * var(--u));margin-left:calc(20 * var(--u))}
.rsBook__addr{
  position:absolute;left:calc(701.5 * var(--u));top:calc(123.5 * var(--u));
  font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1.4545;letter-spacing:.05em;
}
.rsBook__meta{
  position:absolute;left:calc(737.5 * var(--u));top:calc(176.5 * var(--u));
  font-weight:700;
  font-size:calc(16 * var(--u));
  line-height:1.8125;letter-spacing:.05em;
}
.rsBook__meta li{position:relative}
.rsBook__meta li::before{
  content:"";position:absolute;
  left:calc(-33 * var(--u));top:50%;translate:0 -50%;
  width:calc(21 * var(--u));height:calc(21 * var(--u));
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.rsBook__meta--clock::before{background-image:url("../img/rest/rs-icon-clock.svg")}
.rsBook__meta--cal::before{background-image:url("../img/rest/rs-icon-cal.svg")}
.rsBook__meta--train::before{background-image:url("../img/rest/rs-icon-train.svg")}

.rsBook__map{
  position:absolute;left:calc(1016.5 * var(--u));top:calc(228 * var(--u));
  display:flex;align-items:center;justify-content:center;
  gap:calc(8 * var(--u));
  width:calc(151 * var(--u));height:calc(36 * var(--u));
  border:1.5px solid var(--paper);border-radius:100px;
  font-family:var(--en);font-weight:800;
  font-size:calc(15 * var(--u));letter-spacing:.05em;
}
/* ピンは文字と同じ色にしたいので、画像ではなくマスクで塗る */
.rsBook__map::before{
  content:"";
  width:calc(11 * var(--u));height:calc(16 * var(--u));
  background-color:currentColor;
  -webkit-mask:url("../img/rest/rs-pin.svg") no-repeat center / contain;
          mask:url("../img/rest/rs-pin.svg") no-repeat center / contain;
}
.rsBook__map:hover{color:var(--red)}

/* MENU */
.rsMenu{padding-top:calc(150 * var(--u));text-align:center}
.rsMenu__ttl{
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(70 * var(--u));
  line-height:1.2;
}
.rsMenu__list{
  display:grid;grid-template-columns:repeat(3, calc(318 * var(--u)));
  justify-content:center;
  column-gap:calc(59 * var(--u));row-gap:calc(41 * var(--u));
  margin-top:calc(40 * var(--u));
}
.rsMenu__link{
  display:grid;align-content:center;justify-items:center;
  width:calc(318 * var(--u));height:calc(318 * var(--u));
  background:var(--paper);border-radius:50%;
  color:var(--ink);
  transition:transform .35s var(--ease);
}
.rsMenu__link{transition:transform .35s var(--ease), opacity .35s var(--ease)}
.rsMenu__link[href]:hover{transform:translateY(-6px);opacity:.5}
/* PDF 未登録の丸は href が無い＝押せないので、何も起きないようにする */
.rsMenu__link:not([href]):hover{transform:none;opacity:1}
.rsMenu__en{
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:calc(55 * var(--u));
  line-height:1.0909;letter-spacing:.02em;
  padding-top: 0.35em;
}
/* 時間表記が無い3つ（VEGETARIAN／DRINK／TAKEOUT）は、英字の行数が違っても
   「メニューを見る」の位置が揃うよう、英字の枠を2行ぶんで固定する */
.rsMenu__item:nth-child(n+4) .rsMenu__en{
  display:grid;place-items:center;
  min-height:calc(2 * 1.0909em);
  padding-top:0;
}
.rsMenu__time{
  margin-top:calc(3 * var(--u));
  font-family:var(--en);font-weight:500;
  font-size:calc(20 * var(--u));line-height:1.2;
}
.rsMenu__more{
  margin-top:calc(30 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.2727;letter-spacing:.05em;
}
.rsMenu__en + .rsMenu__more{margin-top:calc(24 * var(--u))}

/* 横長写真 */
/* 書き出し済みの画像をそのまま全幅で置く */
.rsWide{
  position:relative;z-index:1;
  width:var(--w);
  margin:calc(180 * var(--u)) auto 0;
  overflow:clip;
}
.rsWide img{display:block;width:100%;height:auto}

/* ENJOY GUBIGABU（赤背景） */
.rsEnjoy{
  position:relative;
  margin-top:calc(-58 * var(--u));
  padding:calc(229 * var(--u)) 0 calc(154 * var(--u));
  background:var(--red);
  text-align:center;
}
.rsEnjoy__ja{
  color:var(--paper);font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
}
.rsEnjoy__en{
  margin-top:calc(14 * var(--u));
  color:var(--paper);
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}

/* 料理カード */
.rsCard{
  position:relative;
  width:calc(1636 * var(--u));
  margin-inline:auto;
  background:var(--paper);
  border-radius:calc(60 * var(--u));
  text-align:left;
  overflow:clip;
}
.rsCard--a{height:calc(1804 * var(--u));margin-top:calc(59 * var(--u))}
.rsCard--b{height:calc(1374 * var(--u));margin-top:calc(90 * var(--u))}
.rsCard--c{height:calc(1804 * var(--u));margin-top:calc(90 * var(--u))}

.rsCard__en{
  position:absolute;
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:calc(130 * var(--u));
  line-height:calc(140 * var(--u));
  letter-spacing:0;
}
.rsCard__en b{font-weight:700;font-size:calc(170 / 130 * 1em)}
.rsCard__l1,.rsCard__l2{display:block;white-space:nowrap}
.rsCard__l2{margin-left:var(--in2, 0)}

/* 170px の頭文字が inline-block で行箱を膨らませるので、1行目の高さは宣言どおりに決め打ち */
.rsCard__l1{height:calc(140 * var(--u))}
.rsCard--a .rsCard__en{left:calc(915 * var(--u));top:calc(100 * var(--u));--in2:calc(183 * var(--u))}
.rsCard--b .rsCard__en{left:calc(98 * var(--u));top:calc(80 * var(--u));--in2:calc(287 * var(--u))}
.rsCard--c .rsCard__en{left:calc(915 * var(--u));top:calc(100 * var(--u));--in2:calc(117 * var(--u))}

.rsCard__ja{
  position:absolute;
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:1.3333;letter-spacing:.05em;
}
.rsCard--a .rsCard__ja{left:calc(928 * var(--u));top:calc(410 * var(--u))}
.rsCard--b .rsCard__ja{left:calc(98 * var(--u));top:calc(390 * var(--u))}
.rsCard--c .rsCard__ja{left:calc(915 * var(--u));top:calc(410 * var(--u))}

.rsCard__wm{
  position:absolute;
  color:var(--pale);
  font-family:var(--en);font-weight:800;
  font-size:calc(140 * var(--u));
  line-height:calc(130 * var(--u));
  letter-spacing:.03em;
}
.rsCard--a .rsCard__wm{left:calc(961 * var(--u));top:calc(1319 * var(--u))}
.rsCard--b .rsCard__wm{left:calc(1035 * var(--u));top:calc(990 * var(--u))}

/* 料理の写真と見出しはひと組。
   組の枠を写真と同じ位置・ほぼ同じ大きさに置いてあるので、
   3枚が上から順に画面へ入り、その順で出る。
   枠をカード全面にすると3枚が同時に発火してしまうので、ここは広げないこと */
.rsDish__set{
  position:absolute;
  width:calc(680 * var(--u));height:calc(700 * var(--u));
}
.rsDish__set--a1{left:calc(118 * var(--u));top:calc(177 * var(--u))}
.rsDish__set--a2{left:calc(838 * var(--u));top:calc(560 * var(--u))}
.rsDish__set--a3{left:calc(118 * var(--u));top:calc(995 * var(--u))}
.rsDish__set--b1{left:calc(838 * var(--u));top:calc(168 * var(--u))}
.rsDish__set--b2{left:calc(118 * var(--u));top:calc(603 * var(--u))}
.rsDish__set--c1{left:calc(118 * var(--u));top:calc(177 * var(--u))}
.rsDish__set--c2{left:calc(838 * var(--u));top:calc(560 * var(--u))}
.rsDish__set--c3{left:calc(118 * var(--u));top:calc(995 * var(--u))}

/* 料理の写真 */
.rsDish__ph{
  position:absolute;left:0;top:0;
  width:calc(680 * var(--u));height:calc(550 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
.rsDish__ph img{position:absolute;max-width:none;height:auto}
.rsDish__set--a1 img{left:-8.68%;top:0;width:121.32%}
.rsDish__set--a2 img{left:-5.74%;top:-1.45%;width:126.47%}
.rsDish__set--a3 img{left:-11.57%;top:-1.12%;width:123.99%}
.rsDish__set--b1 img{left:-17.58%;top:-4.44%;width:138.02%}
.rsDish__set--b2 img{left:-6.68%;top:-.2%;width:121.81%}
.rsDish__set--c1 img{left:-29.58%;top:-32.66%;width:166.23%}
.rsDish__set--c2 img{left:-11.94%;top:-2.47%;width:123.9%}
.rsDish__set--c3 img{left:-11.73%;top:.27%;width:120.63%}

/* 料理の見出し。写真の下、矢印のぶん左へ 50 ずらす。
   top は 写真の高さ550 ＋ デザインの余白47 ＋ 行箱と字面の差10 */
.rsDish{position:absolute;left:calc(50 * var(--u));top:calc(607 * var(--u))}
.rsDish__ttl{
  position:relative;
  font-weight:900;
  font-size:calc(40 * var(--u));
  line-height:.5;letter-spacing:.05em;
  white-space:nowrap;
}
.rsDish__ttl::before{
  content:"";position:absolute;
  left:calc(-46.5 * var(--u));top:calc(-1.5 * var(--u));
  width:calc(28 * var(--u));height:calc(29 * var(--u));
  background:url("../img/rest/rs-arrow.svg") no-repeat center / contain;
}
.rsDish__sub{
  margin-top:calc(32 * var(--u));
  font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
  white-space:nowrap;
}

/* DINING SPACE */
.rsSpace{padding-top:calc(190 * var(--u));text-align:center}
.rsSpace__ja{
  color:var(--red);font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
}
.rsSpace__en{
  margin-top:calc(14 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}
.rsSpace__sub{
  margin-top:calc(-4 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
}
.rsSpace__list{
  display:grid;grid-template-columns:repeat(3, calc(510 * var(--u)));
  justify-content:center;
  column-gap:calc(53 * var(--u));
  margin-top:calc(53 * var(--u));
  text-align:left;
}
.rsSpace__ph{
  position:relative;
  width:calc(510 * var(--u));height:calc(357 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
.rsSpace__ph img{position:absolute;max-width:none;height:auto}
.rsSpace__item:nth-child(1) img{left:-.11%;top:-.63%;width:105.65%}
.rsSpace__item:nth-child(2) img{left:-1%;top:0;width:105%}
.rsSpace__item:nth-child(3) img{left:-.11%;top:-3.81%;width:100.15%}
.rsSpace__ttl{
  margin-top:calc(30 * var(--u));
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.1em;
}
.rsSpace__cap{
  margin-left:calc(20 * var(--u));
  font-weight:500;
  font-size:calc(18 / 30 * 1em);
  letter-spacing:.05em;
}
.rsSpace__tx{
  margin-top:calc(21 * var(--u));
  font-weight:500;
  font-size:calc(16 * var(--u));
  line-height:2.0625;letter-spacing:.02em;
}

/* ご予約・お問合わせ（下・写真背景） */
.rsBook--photo{
  position:relative;
  height:calc(600 * var(--u));
  margin-top:calc(110 * var(--u));
  overflow:clip;
  color:var(--paper);text-align:center;
}
.rsBook__bg{position:absolute;inset:0;overflow:clip}
.rsBook__bg::after{content:"";position:absolute;inset:0;background:rgba(19,19,20,.35)}
.rsBook__bg img{
  position:absolute;left:-.63%;top:-52%;
  width:101.27%;max-width:none;height:auto;
}
.rsBook__in{position:relative;z-index:1}
.rsBook--photo .rsBook__ttl{
  padding-top:calc(161 * var(--u));
  font-weight:900;
  font-size:calc(40 * var(--u));
  line-height:1.2;
}
.rsBook--photo .rsBook__tel{margin-top:calc(29 * var(--u))}
.rsBook--photo .rsBook__hours{margin-top:calc(10 * var(--u))}
.rsBook--photo .rsBook__btn{
  margin:calc(23 * var(--u)) auto 0;
  color:var(--ink);
}
.rsBook--photo .rsBook__btn:hover{color:var(--paper)}

/* BEER / SMOKE */
.rsLink{
  position:relative;
  padding:calc(115 * var(--u)) 0 calc(205 * var(--u));
  overflow:clip;
}
.rsLink__wm{position:absolute;left:0;right:0;top:calc(115 * var(--u));pointer-events:none}
.rsLink__wmL{
  position:absolute;left:calc(-38.29 * var(--u));top:0;
  width:calc(1622 * var(--u));height:auto;max-width:none;
}
.rsLink__wmR{
  position:absolute;left:calc(1703.03 * var(--u));top:calc(3.21 * var(--u));
  width:calc(255.669 * var(--u));height:auto;max-width:none;
}
.rsLink__list{
  position:relative;
  display:flex;justify-content:center;
  gap:calc(95.29 * var(--u));
  padding-top:calc(164 * var(--u));
}
.rsLink__a{display:block;width:calc(500 * var(--u));text-align:center}
.rsLink__ph{
  position:relative;margin:0;
  width:calc(500 * var(--u));height:calc(400 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
/* 画像は assets/img/common/ に 500×400 で切り抜いて置いてあるので、枠に流すだけ。
   figure はテーマのリセット対象外で margin:1em 40px が残るため、ここで潰す */
.rsLink__ph img{display:block;width:100%;height:100%;object-fit:cover}
.rsLink__en{
  display:block;
  margin-top:calc(19 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(70 * var(--u));
  line-height:1.2;
}
.rsLink__ja{
  display:block;
  margin-top:calc(9 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1.2727;letter-spacing:.05em;
}
.rsLink__a{transition:transform .35s var(--ease)}
.rsLink__a:hover{transform:translateY(-6px)}
/* 画像だけ薄くする。文字はそのまま読ませる */
.rsLink__ph img{transition:opacity .35s var(--ease)}
.rsLink__a:hover .rsLink__ph img{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .rsMenu__link,.rsLink__a,.rsLink__ph img{transition:none}
  .rsMenu__link:hover,.rsLink__a:hover{transform:none}
}

/* ② 画像を左上から右下へ、斜めのグラデーションで徐々に出す。
   マスクを要素の4倍（縦横とも）にして、右下から左上へ動かす。

   縦横を同じ倍率にしておくと、グラデーションの「0%〜100%」のうち
   要素が映すのはちょうど 1/4 ぶん。つまり境目が 25%〜75% の内側にあるかぎり、
   出始めは全面透明・出終わりは全面不透明になる ── 写真の縦横比や角度が変わっても
   この条件は崩れない。縦だけ 100% にすると比率ごとに安全域が動いてしまう。

   ぼかし幅は 8%（＝要素の見た目で 32% ぶん）。ここを広げると画像の大半が
   半透明のまま居座り、最後にまとめて濃くなる＝「ピカっと光った」ように見える */
.js .reveal{
  -webkit-mask-image:linear-gradient(145deg, #000 0 26%, transparent 54%);
          mask-image:linear-gradient(145deg, #000 0 26%, transparent 54%);
  -webkit-mask-size:400% 400%;
          mask-size:400% 400%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:100% 100%;
          mask-position:100% 100%;
  transition:
    -webkit-mask-position 2.5s ease-in-out calc(var(--i, 0) * .1s),
            mask-position 2.5s ease-in-out calc(var(--i, 0) * .1s);
  will-change:mask-position;
}
.js .reveal.is-in{
  -webkit-mask-position:0% 0%;
          mask-position:0% 0%;
}
/* メイン写真は、上のリード文と気持ち重ねて出す。
   発火そのものは写真自身が画面に入ったときなので、ここは軽い間だけ */
/* リード文と足並みを揃える。リードは 5.2s のマスクだがイージングで 1.9s ほどで読め、
   写真は既定の 2.5s だと遅れて見えるので、流す時間も合わせて短くする */
.js .rsIntro__ph{transition-delay:.9s;transition-duration:1.3s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{-webkit-mask-image:none;mask-image:none;transition:none}
}

/* ①の見出しは1文字ずつ出すので、親のフェードは外す */
.rsIntro__ttl,
.rsCard__en{opacity:1;transform:none}

/* ④ MENU は親が見えたら 1つずつ順番に下から上がる */
.js .rsMenu__item{
  opacity:0;transform:translateY(28px);
  transition:
    opacity .7s var(--ease) calc(var(--i, 0) * .2s),
    transform .7s var(--ease) calc(var(--i, 0) * .2s);
}
.js .rsMenu__list.is-in .rsMenu__item{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rsMenu__item{opacity:1;transform:none;transition:none}
}

/* ===============================================================
   スモーク（page-smoke.php）
   レストランページと同じく、実数（1920幅基準）をそのまま書いて
   --u で縮める。各セクションは「デザインの Y をそのまま原点」にした
   position:relative の箱で、中身は left / top で置く
   =============================================================== */

.sm{
  --u:calc(var(--w) / 1920);
  overflow-x:clip;
}

/* ヒーロー ─ 書き出した画像をそのまま幅100%。高さは画像の比率任せ */
.smHero{position:relative}
.smHero__ph img{display:block;width:100%;height:auto}

/* --- キャッチコピー（パンくずの下 = Y 752 を原点にする） --- */
.smIntro{
  position:relative;
  /* パンくずの余白はテーマ共通の clamp なので、デザインより 6px ぶん高い。
     ここから下は全部その分ずれるので、先頭で戻しておく */
  margin-top:calc(-6 * var(--u));
  height:calc(1268 * var(--u));
  text-align:center;
}
.smIntro__deco{
  position:absolute;
  height:auto;max-width:none;
  pointer-events:none;
}
.smIntro__deco--r{left:calc(1274 * var(--u));top:calc(101 * var(--u));width:calc(516.071 * var(--u))}
.smIntro__deco--l{left:calc(53 * var(--u));top:calc(771 * var(--u));width:calc(478 * var(--u))}

.smIntro__ttl{
  position:absolute;left:0;right:0;top:calc(119 * var(--u));
  font-weight:700;
  font-size:calc(50 * var(--u));
  line-height:.9;letter-spacing:.05em;
}
.smIntro__mark{
  position:absolute;left:0;right:0;top:calc(199 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(80 * var(--u));
  line-height:1;letter-spacing:.14em;
  /* letter-spacing は右側にだけ付くので、その分を戻して中央に見せる */
  text-indent:.14em;
}
.smIntro__lead{
  position:absolute;left:0;right:0;top:calc(335 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:2.5;letter-spacing:.05em;
}

.smIntro__ph1,
.smIntro__ph2{
  position:absolute;margin:0;
  border-radius:var(--r-photo);overflow:clip;
}
.smIntro__ph1 img,
.smIntro__ph2 img{display:block;width:100%;height:100%;object-fit:cover}

.smIntro__ph1{
  left:calc(312 * var(--u));top:calc(524 * var(--u));
  width:calc(781.395 * var(--u));height:calc(525 * var(--u));
}
/* 2枚目は枠自体はまっすぐ。中の写真がわずかに傾いているぶんは
   書き出し時に焼き込んであるので、ここで回転させない */
.smIntro__ph2{
  left:calc(1134 * var(--u));top:calc(643 * var(--u));
  width:calc(470 * var(--u));height:calc(520 * var(--u));
}

/* 導入の2枚はリード文のあと。ページを開いてすぐ目に入る位置なので、流すのは短めに。
   見出し0s →［燻製］0.8s → リード0.8s と続いた、その次 */
.js .smIntro__ph1,
.js .smIntro__ph2{transition-duration:1.8s}
.js .smIntro__ph1{transition-delay:1s}
.js .smIntro__ph2{transition-delay:1.2s}

/* --- レストランや、ご自宅でも（Y 2020 を原点） --- */
.smWays{position:relative;height:calc(750 * var(--u))}
.smWays__ttl{
  position:absolute;left:0;right:0;top:calc(56 * var(--u));
  color:var(--red);font-weight:900;
  font-size:calc(53 * var(--u));
  /* 行送りは 28px。文字サイズより小さいので、比率に直してそのまま使う */
  line-height:.5283;letter-spacing:.05em;
  text-align:center;
}
.smWays__list{
  position:absolute;left:0;top:calc(150 * var(--u));
  display:flex;width:100%;
}
.smWays__item{flex:0 0 50%}
.smWays__a{
  position:relative;display:block;
  height:calc(600 * var(--u));
  color:var(--paper);
  overflow:clip;
}
.smWays__ph{position:absolute;inset:0}
.smWays__ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 写真の上に重ねる陰。文字を読ませるためのもの */
.smWays__a::after{
  content:"";position:absolute;inset:0;
}
.smWays__item:nth-child(1) .smWays__a::after{
  background:linear-gradient(32.979deg, rgba(65,73,80,.413) 31.602%, rgba(65,73,80,.075) 57.747%);
}
.smWays__item:nth-child(2) .smWays__a::after{
  background:linear-gradient(46.185deg, rgba(80,71,65,.45) 15.674%, rgba(80,71,65,.075) 49.63%);
}
.smWays__cap,
.smWays__en,
.smWays__sub{position:absolute;z-index:1;display:block}
.smWays__cap{
  left:calc(49 * var(--u));top:calc(378 * var(--u));
  font-weight:700;
  font-size:calc(37 * var(--u));
  line-height:1.135;letter-spacing:.05em;
  white-space:nowrap;
}
.smWays__en{
  left:calc(47 * var(--u));top:calc(428 * var(--u));
  display:flex;align-items:center;
  gap:calc(21 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(95 * var(--u));
  line-height:1.2;
  white-space:nowrap;
}
.smWays__ar{
  flex:0 0 auto;
  width:calc(116.5 * var(--u));height:auto;
  /* ホバーで矢じりがはみ出すぶんを切らない */
  overflow:visible;
}
/* TOP の VIEW MORE と同じ、ホバーで矢じりだけ動く */
.smWays__a:hover .more__arrow{transform:translateX(8px)}
.smWays__sub{
  left:calc(53 * var(--u));top:calc(529 * var(--u));
  font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:2.25;letter-spacing:.02em;
  white-space:nowrap;
}
.smWays__a{transition:transform .4s var(--ease)}
.smWays__a:hover .smWays__ph img{transform:scale(1.04)}
.smWays__ph img{transition:transform .6s var(--ease)}

/* --- ENJOY SMOKE（赤背景・Y 2770 を原点） --- */
.smEnjoy{
  position:relative;
  height:calc(5963 * var(--u));
  background:var(--red);
  color:var(--paper);
}
.smEnjoy__head{position:absolute;left:0;right:0;top:0;text-align:center}
.smEnjoy__ja{
  margin-top:calc(139 * var(--u));
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
}
.smEnjoy__en{
  margin-top:calc(14 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}
.smEnjoy__sub{
  margin-top:calc(-4 * var(--u));
  font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
}

/* BEER / FOOD ─ 写真が左いっぱい、右に大きな透かし文字と本文 */
/* 中身は絶対配置だが、かたまりとして監視するので高さを持たせる */
.smTopic{position:absolute;left:0;right:0;height:calc(700 * var(--u))}
.smTopic--beer{top:calc(426 * var(--u))}
.smTopic--food{top:calc(2538 * var(--u))}

.smTopic__ph{
  position:absolute;left:0;top:0;margin:0;
  width:calc(1100 * var(--u));height:calc(700 * var(--u));
  border-radius:0 var(--r-photo) var(--r-photo) 0;
  overflow:clip;
}
.smTopic__ph img{display:block;width:100%;height:100%;object-fit:cover}

.smTopic__wm{
  position:absolute;top:calc(20 * var(--u));
  color:#c30413;
  font-family:var(--en);font-weight:700;
  font-size:calc(280 * var(--u));
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
.smTopic--beer .smTopic__wm{left:calc(1177 * var(--u))}
.smTopic--food .smTopic__wm{left:calc(1122 * var(--u))}

.smTopic__ttl{
  position:absolute;left:calc(1249 * var(--u));top:calc(207 * var(--u));
  font-weight:700;
  font-size:calc(40 * var(--u));
  line-height:1.75;letter-spacing:.05em;
  white-space:nowrap;
}
.smTopic__tx{
  position:absolute;left:calc(1249 * var(--u));top:calc(398 * var(--u));
  width:calc(520 * var(--u));
  font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:2.5;letter-spacing:.05em;
}

/* 商品カード（白） */
.smProd{
  position:absolute;
  left:calc(90 * var(--u));top:calc(1209 * var(--u));
  width:calc(1740 * var(--u));height:calc(1110 * var(--u));
  background:var(--paper);
  border-radius:calc(40 * var(--u));
}
.smProd__wm{
  position:absolute;
  color:var(--pale);
  font-family:var(--en);font-weight:800;
  font-size:calc(140 * var(--u));
  line-height:.9286;letter-spacing:.03em;
  white-space:nowrap;
  pointer-events:none;
}
.smProd__wm--smoke{left:calc(1143 * var(--u));top:calc(128 * var(--u))}
.smProd__wm--nuts{left:calc(417 * var(--u));top:calc(566 * var(--u))}

/* 赤い丸は画像ではなく CSS の円。文字はこの上に乗る。
   商品写真とは別のタイミングで出したいので、擬似要素ではなく実体の要素にしてある */
.smProd__circle{
  position:absolute;display:block;
  border-radius:50%;background:var(--red);
}
.smProd__item--a .smProd__circle{left:calc(409 * var(--u));top:calc(172 * var(--u));width:calc(462 * var(--u));height:calc(462 * var(--u))}
.smProd__item--b .smProd__circle{left:calc(1261 * var(--u));top:calc(340 * var(--u));width:calc(415 * var(--u));height:calc(415 * var(--u))}
/* 丸はふわっとではなく、少し跳ねて開く */
.js .smProd__circle{
  transform:scale(0);
  transition:
    opacity .3s var(--ease) calc(var(--i, 0) * .1s),
    transform .55s var(--ease-back) calc(var(--i, 0) * .1s);
}
.smProd__circle.is-in{transform:none}

.smProd__ph{position:absolute;margin:0}
.smProd__ph img{display:block;width:100%;height:auto}
.smProd__item--a .smProd__ph{left:calc(96 * var(--u));top:calc(126 * var(--u));width:calc(386 * var(--u))}
.smProd__item--b .smProd__ph{left:calc(969.84 * var(--u));top:calc(305.94 * var(--u));width:calc(379.357 * var(--u))}

.smProd__tx{position:absolute;color:var(--paper)}
.smProd__item--a .smProd__tx{left:calc(515 * var(--u));top:calc(292 * var(--u));width:calc(414 * var(--u))}
.smProd__item--b .smProd__tx{left:calc(1372 * var(--u));top:calc(419 * var(--u));width:calc(368 * var(--u))}

.smProd__ttl{
  margin:0;
  font-weight:700;
  font-size:calc(37 * var(--u));
  line-height:1.297;letter-spacing:.05em;
}
.smProd__body{
  margin-top:calc(15 * var(--u));
  font-weight:500;
  font-size:calc(16 * var(--u));
  line-height:1.875;letter-spacing:.05em;
}
.smProd__item--a .smProd__body{width:calc(270 * var(--u))}
.smProd__item--b .smProd__body{width:calc(231 * var(--u))}

.smProd__btn{position:absolute;left:calc(619 * var(--u));top:calc(914 * var(--u))}

/* 共通のボタン（黒い丸ボタン／赤い丸ボタン） */
.smBtn{
  display:grid;place-items:center;
  width:calc(500 * var(--u));height:calc(100 * var(--u));
  border-radius:calc(100 * var(--u));
  color:var(--paper);font-weight:700;
  font-size:calc(26 * var(--u));
  line-height:1;
}
.smBtn--dark{background:#000}
.smBtn--red{background:var(--red)}

/* --- 使い方（燻製しょうゆ／燻製オリーブオイル） --- */
.smUse{position:absolute;left:0;right:0}
.smUse--shoyu{top:calc(3378 * var(--u))}
.smUse--oil{top:calc(4662 * var(--u))}

.smUse__ttl{
  font-weight:700;
  font-size:calc(60 * var(--u));
  line-height:.4667;letter-spacing:.05em;
  text-align:center;
}
.smUse__lead{
  margin-top:calc(43 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.909;letter-spacing:.05em;
  text-align:center;
}

/* 白い帯。右端だけ丸い。スライダーは意図的にこの帯からはみ出す */
.smUse__panel{
  position:relative;
  margin-top:calc(45 * var(--u));
  width:calc(1740 * var(--u));height:calc(1000 * var(--u));
  background:var(--paper);
  border-radius:0 calc(40 * var(--u)) calc(40 * var(--u)) 0;
  color:var(--ink);
}
.smUse__bottle{position:absolute;margin:0}
.smUse__bottle img{display:block;width:100%;height:auto}
.smUse--shoyu .smUse__bottle{left:calc(180 * var(--u));top:calc(157 * var(--u));width:calc(257 * var(--u))}
.smUse--oil .smUse__bottle{left:calc(195 * var(--u));top:calc(174 * var(--u));width:calc(227 * var(--u))}

/* 縦書きのコピー。右の列が前置き、左の列が本文で、大きい字だけ別扱い。
   ここだけデザイン指定が Noto Serif JP なので、テーマ共通の明朝ではなくそちらを使う */
.smUse__vert{
  position:absolute;inset:0;margin:0;
  font-family:"Noto Serif JP", var(--mincho);
}
.smUse__vertSub,
.smUse__vertMain{
  position:absolute;
  writing-mode:vertical-rl;
  font-weight:500;
  font-size:calc(40 * var(--u));
  /* 縦書きでは letter-spacing が字送りになる。40px / 送り43px なので .075em */
  line-height:1.075;letter-spacing:.075em;
  white-space:nowrap;
}
.smUse__vertSub b,.smUse__vertSub i,
.smUse__vertMain b,.smUse__vertMain i{
  /* 大きい字だけ、小さい字の軸より少し左に寄せる */
  position:relative;left:calc(-14 * var(--u));
  font-style:normal;font-weight:300;
  font-size:calc(100 * var(--u));
  line-height:1;letter-spacing:.02em;
}
.smUse__vertSub i,
.smUse__vertMain i{color:#c7c7c7}

.smUse--shoyu .smUse__vertSub{left:calc(647 * var(--u));top:calc(117 * var(--u))}
.smUse--shoyu .smUse__vertMain{left:calc(495 * var(--u));top:calc(209 * var(--u))}
.smUse--oil .smUse__vertSub{left:calc(613 * var(--u));top:calc(101 * var(--u))}
.smUse--oil .smUse__vertMain{left:calc(479 * var(--u));top:calc(200 * var(--u))}

.smUse__btn{position:absolute;left:calc(1100 * var(--u))}
.smUse--shoyu .smUse__btn{top:calc(796 * var(--u))}
.smUse--oil .smUse__btn{top:calc(824 * var(--u))}

/* スライダー ─ 左端 841 から画面右端まで。左右の隣は見切れる */
.smSlider{
  position:absolute;
  /* 指で横にはらって送れるように。縦のスクロールはブラウザに任せる */
  touch-action:pan-y;
  left:calc(841 * var(--u));top:calc(153 * var(--u));
  width:calc(1079 * var(--u));height:calc(640 * var(--u));
  overflow:clip;
}
.smSlider__track{
  display:flex;
  gap:calc(20 * var(--u));
  /* 現在地（--n）を中央の定位置 297 に合わせる。1枚ぶんの間隔は 450+20 */
  transform:translateX(calc((297 - var(--n, 1) * 470) * var(--u)));
  transition:transform .6s var(--ease);
}
.smSlider__item{
  flex:0 0 auto;
  width:calc(450 * var(--u));
}
/* 複製から本体へ戻す一瞬だけ、中の動きごと止める。
   これをしないと写真の濃さが切り替わって、1枚目で光って見える */
.smSlider__track.is-jump,
.smSlider__track.is-jump *{transition:none !important}
.smSlider__ph{
  margin:0;
  background:var(--paper);
  width:calc(450 * var(--u));height:calc(500 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
.smSlider__ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;
  opacity:.3;
  transition:opacity .5s var(--ease);
}
.smSlider__item.is-current .smSlider__ph img{opacity:1}
.smSlider__ttl{
  margin:calc(21 * var(--u)) 0 0;
  height:calc(45 * var(--u));
  font-weight:700;
  font-size:calc(25 * var(--u));
  line-height:1.8;letter-spacing:.05em;
  white-space:nowrap;
}
.smSlider__tx{
  font-weight:400;
  font-size:calc(18 * var(--u));
  line-height:1.667;letter-spacing:.05em;
  white-space:nowrap;
}
.smSlider__item:not(.is-current) .smSlider__ttl,
.smSlider__item:not(.is-current) .smSlider__tx{color:#afafaf}

.smSlider__nav{
  position:absolute;top:calc(197 * var(--u));
  display:grid;place-items:center;
  width:calc(89 * var(--u));height:calc(89 * var(--u));
  padding:0;border:0;border-radius:50%;
  background:var(--red);
  cursor:pointer;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.smSlider__nav--prev{left:calc(148 * var(--u))}
.smSlider__nav--next{left:calc(807 * var(--u))}
.smSlider__nav img{width:calc(21 * var(--u));height:auto}
.smSlider__nav--prev img{rotate:-90deg}
.smSlider__nav--next img{rotate:90deg}
.smSlider__nav:hover{transform:scale(1.08)}
.smSlider__nav:disabled{opacity:.3;cursor:default;transform:none}

/* --- RESTAURANT（Y 8733 を原点） --- */
.smRest{position:relative;height:calc(1374 * var(--u))}
.smRest::before{
  content:"";position:absolute;
  left:calc(142 * var(--u));top:calc(156 * var(--u));
  width:calc(1636 * var(--u));height:calc(1171 * var(--u));
  background:var(--paper);
  border-radius:calc(60 * var(--u));
}
.smRest__ja,
.smRest__en,
.smRest__list,
.smRest__btn{position:absolute}

.smRest__ja{
  left:0;right:0;top:calc(266 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
  text-align:center;
}
.smRest__en{
  left:0;right:0;top:calc(308 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
  text-align:center;
}
.smRest__list{
  left:calc(205 * var(--u));top:calc(486 * var(--u));
  display:flex;
  gap:calc(80 * var(--u));
}
.smRest__item{width:calc(450 * var(--u))}
.smRest__ph{
  margin:0;
  width:calc(450 * var(--u));height:calc(450 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
.smRest__ph img{display:block;width:100%;height:100%;object-fit:cover}
.smRest__ttl{
  margin-top:calc(34 * var(--u));
  font-weight:700;
  font-size:calc(25 * var(--u));
  line-height:1.8;letter-spacing:.05em;
}
.smRest__tx{
  margin-top:calc(11 * var(--u));
  font-weight:500;
  font-size:calc(18 * var(--u));
  line-height:1.833;letter-spacing:.05em;
}
.smRest__btn{left:calc(709 * var(--u));top:calc(1158 * var(--u))}

/* --- SHOP（Y 10107 を原点） --- */
.smShop{position:relative;height:calc(1165 * var(--u))}
.smShop::before{
  content:"";position:absolute;left:calc(142 * var(--u));top:0;
  width:calc(1636 * var(--u));height:calc(1080 * var(--u));
  background:var(--paper);
  border-radius:calc(60 * var(--u));
}
.smShop__ja,
.smShop__en,
.smShop__lead,
.smShop__ph,
.smShop__info{position:absolute}

.smShop__ja{
  left:0;right:0;top:calc(101 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
  text-align:center;
}
.smShop__en{
  left:0;right:0;top:calc(143 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
  text-align:center;
}
.smShop__lead{
  left:0;right:0;top:calc(287 * var(--u));
  font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:2.15;letter-spacing:.05em;
  text-align:center;
}
.smShop__ph{
  left:calc(273 * var(--u));top:calc(427 * var(--u));margin:0;
  width:calc(700 * var(--u));height:calc(550 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
}
.smShop__ph img{display:block;width:100%;height:100%;object-fit:cover}

.smShop__info{left:calc(1125 * var(--u));top:calc(537 * var(--u))}
.smShop__name{
  color:var(--red);font-weight:700;
  font-size:calc(40 * var(--u));
  line-height:.75;letter-spacing:.05em;
}
.smShop__addr{
  margin-top:calc(33 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.4545;letter-spacing:.05em;
}
.smShop__fax{
  margin-top:calc(6 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.5;letter-spacing:.05em;
}
.smShop__meta{
  margin-top:calc(27 * var(--u));
  font-size:calc(18 * var(--u));
  line-height:1.944;letter-spacing:.05em;
}
.smShop__meta li{
  position:relative;
  padding-left:calc(38 * var(--u));
}
.smShop__meta li::before{
  content:"";position:absolute;left:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.smShop__meta--clock::before{top:calc(6 * var(--u));width:calc(23 * var(--u));height:calc(23 * var(--u));background-image:url(../img/smoke/sm-icon-clock.svg)}
.smShop__meta--cal::before{top:calc(9 * var(--u));width:calc(22.924 * var(--u));height:calc(16.742 * var(--u));background-image:url(../img/smoke/sm-icon-cal.svg)}
.smShop__meta--car::before{top:calc(9 * var(--u));width:calc(23 * var(--u));height:calc(18 * var(--u));background-image:url(../img/smoke/sm-icon-car.svg)}

.smShop__map{
  display:inline-flex;align-items:center;
  gap:calc(8 * var(--u));
  margin-top:calc(29 * var(--u));
  padding:0 calc(19 * var(--u)) 0 calc(17 * var(--u));
  width:calc(151 * var(--u));height:calc(36 * var(--u));
  border:calc(1.5 * var(--u)) solid var(--red);
  border-radius:calc(18.5 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:calc(15 * var(--u));
  line-height:1;letter-spacing:.05em;
  white-space:nowrap;
}
/* ピンは文字と同じ色にしたいので、画像ではなくマスクで塗る */
.smShop__map::before{
  content:"";flex:0 0 auto;
  width:calc(11 * var(--u));height:calc(16 * var(--u));
  background-color:currentColor;
  -webkit-mask:url(../img/smoke/sm-pin.svg) no-repeat center/contain;
          mask:url(../img/smoke/sm-pin.svg) no-repeat center/contain;
}

@media (prefers-reduced-motion:reduce){
  .smWays__a,.smWays__ph img,.smBtn,.smSlider__nav,.smSlider__track,.smSlider__item{transition:none}
  .smWays__a:hover .smWays__ph img{transform:none}
  .smBtn:hover,.smSlider__nav:hover{transform:none}
}


/* ===============================================================
   ボタンのホバー
   ・丸ボタンは TOP の「購入はこちら」(.ec__btn) と同じ作り。
     塗りの ::before を左から伸ばすので、文字は span で包んで上に出す
   ・Google MAP は TOP のフッターの MAP ボタンと同じ、背景を左から塗る作り
   =============================================================== */
.rsBook__btn,
.smBtn,
.beSet__btn,
.beTalk__btn{
  position:relative;
  overflow:hidden;
  transition:color .3s ease;
}
.beSet__btn:hover,
.beTalk__btn:hover{color:var(--paper)}
/* 伸びてくる塗りの色。既定は ec__btn と同じ黒。
   写真背景のご予約ボタンは赤、下地が黒い「オンラインショップで購入する」も赤にして反転させる。
   BEER TALK の「一覧を見る」も白い下地なので赤 */
.beTalk__btn::before{background:var(--red)}
.rsBook--photo .rsBook__btn::before{background:var(--red)}
.smBtn--dark::before{background:var(--red)}
.smBtn--red::before{background:var(--ink)}
.rsBook__btn:hover{color:var(--paper)}

/* Google MAP は白⇔赤の反転。ピンは currentColor なので文字と一緒に返る */
.rsBook__map,
.smShop__map,
.beAccess__map-link{
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:left center;
  background-origin:border-box;
  background-clip:border-box;
  transition:background-size .45s var(--ease), color .3s ease;
}
.rsBook__map:hover,
.smShop__map:hover,
.beAccess__map-link:hover{background-size:100% 100%}
.rsBook__map:not(:hover),
.smShop__map:not(:hover),
.beAccess__map-link:not(:hover){background-position:right center}
.rsBook__map{background-image:linear-gradient(var(--paper), var(--paper))}
.smShop__map{background-image:linear-gradient(var(--red), var(--red))}
.smShop__map:hover{color:var(--paper)}
.beAccess__map-link{background-image:linear-gradient(var(--red), var(--red))}
.beAccess__map-link:hover{color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .rsBook__map,
  .smShop__map,
  .beAccess__map-link{transition:color .2s ease}
}


/* 縦書きのコピーも1文字ずつ。縦書きでは translateY が「下へ」＝流れる向きになる。
   1文字ずつ inline-block に包むとベースライン揃えになり、大きい字と小さい字の
   中心がずれるので、縦中央で揃え直す */
/* 縦書きは瓶のあと */
.smUse__vert{--shift:40%;--lead:.8s}
.smUse__vert .char{vertical-align:middle}
/* 写真が半分ほど流れたところで、横のテキストが続く。
   かたまり（data-group）で同時に発火しているので、ここは純粋な待ち時間 */
.js .smTopic__ttl{transition-delay:1.4s}
.js .smTopic__tx{transition-delay:1.7s}

/* 商品は ナッツ一式 → ホタルイカ一式 の順。
   一式の中は 写真 → 赤丸 → 商品名 → 説明。
   写真はグラデーションで流すので、順番が読み取れるよう短めにしてある */
.js .smProd__ph{transition-duration:1s}

.js .smProd__item--a .smProd__ph    {transition-delay:0s}
.js .smProd__item--a .smProd__circle{transition-delay:.35s}
/* 商品名と説明文はセットで出す */
.js .smProd__item--a .smProd__ttl,
.js .smProd__item--a .smProd__body  {transition-delay:.6s}

.js .smProd__item--b .smProd__ph    {transition-delay:.5s}
/* ホタルイカは写真（.5s から 1s かけて流れる）が出きってから赤丸。
   ナッツ側とは重ならない */
.js .smProd__item--b .smProd__circle{transition-delay:1.2s}
.js .smProd__item--b .smProd__ttl,
.js .smProd__item--b .smProd__body  {transition-delay:1.5s}

.js .smProd__btn{transition-delay:2s}

/* 使い方パネルは左から順に。瓶 → 縦書き → スライダー。
   スライダーの中は、さらに左の1枚から --i で送る */
.js .smUse__bottle{transition-duration:1s}
/* スライダーは、縦書きが動き出してすぐ */
/* 3枚ずらすと段がついて見えるので、ひと組で出す */
.js .smSlider__item{transition-delay:1s}
.js .smSlider__nav{transition-delay:1.3s}
.js .smUse__btn{transition-delay:1.4s}

/* 「余」と「韻」は左右に少しズラす */
.smUse__vertMain i{left:calc(-40 * var(--u))}
.smUse__vertMain i.is-shift{left:calc(-8 * var(--u))}


/* ===============================================================
   城崎 地ビール（page-beer.php）
   レストラン／スモークと同じく、実数（1920幅基準）をそのまま書いて
   --u で縮める。各セクションは「デザインの Y をそのまま原点」にした箱
   =============================================================== */

.be{
  --u:calc(var(--w) / 1920);
  overflow-x:clip;
}

/* ヒーロー */
.beHero{position:relative}
.beHero__ph img{display:block;width:100%;height:auto}

/* --- KINOSAKI BEER（パンくずの下 = Y 752 を原点） --- */
.beIntro{
  position:relative;
  /* パンくずの余白はテーマ共通の clamp なので、デザインより 6px ぶん高い。
     ここから下は全部その分ずれるので、先頭で戻しておく */
  margin-top:calc(-6 * var(--u));
  height:calc(1127 * var(--u));
  text-align:center;
}

.beIntro__en{
  position:absolute;left:0;right:0;top:calc(89 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}
.beIntro__ja{
  position:absolute;left:0;right:0;top:calc(229 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
}
.beIntro__lead{
  position:absolute;left:0;right:0;top:calc(288 * var(--u));
  font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:2.5;letter-spacing:.05em;
}

/* 4種のカード。--c が各ビールの色 */
.beList{
  position:absolute;left:calc(38 * var(--u));top:calc(406 * var(--u));
  display:flex;
  gap:calc(20 * var(--u));
}
/* 導入は上から順に。見出し（1文字ずつ）→ 城崎 地ビール → リード → 4種。
   見出しが流れている途中から始まるよう、全体を前へ詰めてある。
   横の送りは共通より少しゆっくり */
.beIntro__ja{--lead:.05s}
/* カードは「空・海・川・雪〜」が実際に見え始めるのを待ってから。
   リードは .15s から流し始めるが、斜めのマスクなので文字が読めてくるのは
   そこから一呼吸あと。カードもその呼吸に合わせてある */
.beList__item{flex:0 0 auto;--lead:.35s;--step:.18s}
.beCard{
  position:relative;display:block;
  width:calc(446 * var(--u));height:calc(569 * var(--u));
  padding:0;border:0;
  background:var(--c);
  border-radius:calc(60 * var(--u));
  color:var(--paper);text-align:left;
  cursor:pointer;
  transition:transform .35s var(--ease);
}
.beCard:hover{transform:translateY(-6px)}
.beCard__ph{
  position:absolute;left:calc(160 * var(--u));top:calc(55 * var(--u));
  display:block;width:calc(127 * var(--u));
  /* 瓶は切り抜き（透過 webp）なので、箱ではなく形に沿う drop-shadow で落とす。
     img に直接かけると、iOS で画像のデコードが間に合わなかったときに
     透明部分を無視して四角い影が出ることがあるので、外側の span に掛ける */
  filter:drop-shadow(calc(12 * var(--u)) calc(3.5 * var(--u)) calc(17 * var(--u)) rgba(0,0,0,.2));
}
.beCard__ph img{display:block;width:100%;height:auto}
.beCard__name{
  position:absolute;left:calc(64 * var(--u));top:calc(472 * var(--u));
  display:block;
  font-weight:700;
  font-size:calc(40 * var(--u));
  line-height:.65;letter-spacing:.05em;
  white-space:nowrap;
}
.beCard__abv{
  position:absolute;left:calc(69 * var(--u));top:calc(513 * var(--u));
  display:block;
  font-weight:700;
  font-size:calc(16 * var(--u));
  line-height:1.625;letter-spacing:.05em;
  white-space:nowrap;
}
/* ＋のボタン。丸も十字も CSS で描く */
.beCard__more{
  position:absolute;left:calc(348 * var(--u));top:calc(472 * var(--u));
  display:block;
  width:calc(75 * var(--u));height:calc(75 * var(--u));
  border:calc(3 * var(--u)) solid currentColor;border-radius:50%;
  transition:transform .35s var(--ease);
}
.beCard__more::before,
.beCard__more::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;
  translate:-50% -50%;
}
.beCard__more::before{width:calc(30 * var(--u));height:calc(3 * var(--u))}
.beCard__more::after{width:calc(3 * var(--u));height:calc(30 * var(--u))}
.beCard:hover .beCard__more{transform:rotate(90deg)}

/* --- 飲み比べセット（Y 1879 を原点） --- */
.beSet{position:relative;height:calc(606 * var(--u))}

.beSet__wm{
  position:absolute;left:calc(1175 * var(--u));top:calc(356 * var(--u));
  color:#eaeaea;
  font-family:var(--en);font-weight:700;
  font-size:calc(210 * var(--u));
  line-height:.619;letter-spacing:.02em;
  white-space:nowrap;
  pointer-events:none;
}
/* SINCE は 1997 より小さいだけで、下端（ベースライン）は揃える。
   vertical-align を触らなければ、同じ行の中で自動的に揃う */
.beSet__wm span{
  margin-right:calc(10 * var(--u));
  font-size:calc(80 / 210 * 1em);
  letter-spacing:.03em;
}

/* 写真と赤い箱でひとつのバナー。まとめて下から出す */
.beSet__banner{position:absolute;left:0;right:0;top:0;height:calc(400 * var(--u))}

.beSet__ph{
  position:absolute;left:calc(460 * var(--u));top:0;margin:0;
  width:calc(420 * var(--u));height:calc(400 * var(--u));
  border-radius:var(--r-photo) 0 0 var(--r-photo);
  overflow:clip;
}
/* SP だけ切り抜きが違うので picture で包んである。
   包んでも枠いっぱいに伸びるよう、picture 自身も高さを持たせる */
.beSet__ph picture{display:block;width:100%;height:100%}
.beSet__ph img{display:block;width:100%;height:100%;object-fit:cover}

.beSet__box{
  position:absolute;left:calc(878 * var(--u));top:0;
  width:calc(582 * var(--u));height:calc(400 * var(--u));
  background:var(--red);
  border-radius:0 var(--r-photo) var(--r-photo) 0;
  color:var(--paper);
}
.beSet__ttl{
  position:absolute;left:calc(56 * var(--u));top:calc(80 * var(--u));
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
  white-space:nowrap;
}
.beSet__tx{
  position:absolute;left:0;right:0;top:calc(131 * var(--u));
  font-weight:700;
  font-size:calc(18 * var(--u));
  line-height:2;letter-spacing:.05em;
  text-align:center;
}
.beSet__btn{
  position:absolute;left:calc(167 * var(--u));top:calc(286 * var(--u));
  display:grid;place-items:center;
  width:calc(250 * var(--u));height:calc(60 * var(--u));
  background:var(--paper);
  border-radius:calc(100 * var(--u));
  color:var(--red);font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1;letter-spacing:.05em;
}

/* --- 料理とともに完成する一杯を。（赤背景・Y 3235 を原点） --- */
.beFood{
  position:relative;
  height:calc(5125 * var(--u));
  background:var(--red);
  color:var(--paper);
}
.beFood__wm{position:absolute;left:0;right:0;top:calc(97 * var(--u));pointer-events:none}
.beFood__wmL,
.beFood__wmR{
  position:absolute;display:block;
  background-color:#c90313;
}
.beFood__wmL{
  left:calc(-38 * var(--u));top:0;
  width:calc(1621.997 * var(--u));height:calc(246.386 * var(--u));
  -webkit-mask:url(../img/common/wm-left.svg) no-repeat center/contain;
          mask:url(../img/common/wm-left.svg) no-repeat center/contain;
}
.beFood__wmR{
  left:calc(1703.31 * var(--u));top:calc(3 * var(--u));
  width:calc(255.669 * var(--u));height:calc(227.592 * var(--u));
  -webkit-mask:url(../img/common/wm-right.svg) no-repeat center/contain;
          mask:url(../img/common/wm-right.svg) no-repeat center/contain;
}

.beFood__ttl{
  position:absolute;left:0;right:0;top:calc(262 * var(--u));
  font-weight:700;
  font-size:calc(50 * var(--u));
  line-height:.9;letter-spacing:.05em;
  text-align:center;
}
.beFood__lead{
  position:absolute;left:0;right:0;top:calc(350 * var(--u));
  font-weight:700;
  font-size:calc(24 * var(--u));
  line-height:2.292;letter-spacing:.05em;
  text-align:center;
}

/* 4枚の写真を右から左へ連続で流す。2セット並べて半分ぶん動かすので継ぎ目が出ない */
.beStrip{
  position:absolute;left:calc(-239 * var(--u));top:calc(600 * var(--u));
  right:0;
  overflow:clip;
}
.beStrip__track{
  display:flex;width:max-content;
  animation:beFlow 44s linear infinite;
}
@keyframes beFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .beStrip__track{animation:none}
}
.beStrip__item{
  flex:0 0 auto;
  width:calc(679.9 * var(--u));height:calc(679.9 * var(--u));
  overflow:clip;
}
.beStrip__item img{display:block;width:100%;height:100%;object-fit:cover}

/* FEATURES（白いカード） */
.beFeat{
  position:absolute;
  left:calc(140 * var(--u));top:calc(1426 * var(--u));
  width:calc(1639 * var(--u));height:calc(1080 * var(--u));
  background:var(--paper);
  border-radius:var(--r-photo);
  color:var(--red);
}
.beFeat__ja,
.beFeat__en,
.beFeat__sub{position:absolute;left:0;right:0;text-align:center}
.beFeat__ja{
  top:calc(112 * var(--u));
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
}
.beFeat__en{
  top:calc(154 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}
.beFeat__sub{
  top:calc(294 * var(--u));
  font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
}

.beFeat__list{
  position:absolute;left:calc(114 * var(--u));top:calc(367 * var(--u));
  display:flex;
  gap:calc(57 * var(--u));
}
.beFeat__item{
  flex:0 0 auto;
  width:calc(432 * var(--u));
  text-align:center;
}
/* FEATURES は見出しの3行が先（--i の 0,1,2 でそのまま上から順）。
   3枚のカードはそのあとから追いかける */
.beFeat__item{--lead:.35s}
/* 写真は赤い枠の内側に 16px 入る */
.beFeat__ph{
  margin:0 auto;
  padding:calc(16 * var(--u));
  width:calc(432 * var(--u));height:calc(332 * var(--u));
  background:var(--red);
  border-radius:calc(10 * var(--u));
}
.beFeat__ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  /* 赤い枠と同じ丸み（デザイン実測 10） */
  border-radius:calc(10 * var(--u));
}
.beFeat__num{
  margin-top:calc(28 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(60 * var(--u));
  line-height:1;letter-spacing:.05em;
}
.beFeat__ttl{
  margin-top:calc(19 * var(--u));
  font-weight:700;
  font-size:calc(28 * var(--u));
  line-height:.9286;letter-spacing:.05em;
}
.beFeat__tx{
  margin-top:calc(22 * var(--u));
  color:var(--ink);font-weight:500;
  font-size:calc(18 * var(--u));
  line-height:1.833;letter-spacing:.05em;
  text-align:left;
}

/* BEER FACTORY */
.beFac{position:absolute;left:0;right:0;top:calc(2620 * var(--u))}
.beFac__ja,
.beFac__en,
.beFac__sub{position:absolute;left:0;right:0;text-align:center}
.beFac__ja{
  top:0;
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
}
.beFac__en{
  top:calc(42 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(120 * var(--u));
  line-height:1.2;
}
.beFac__sub{
  top:calc(182 * var(--u));
  font-weight:700;
  font-size:calc(20 * var(--u));
  line-height:1.4;letter-spacing:.05em;
}
.beFac__ph1,
.beFac__ph2{position:absolute;margin:0;border-radius:var(--r-photo);overflow:clip}
.beFac__ph1 img,
.beFac__ph2 img{display:block;width:100%;height:100%;object-fit:cover}
/* 写真2枚と右のテキストはひと組で出す。受け皿を 248 の位置に置くので、
   中の座標はそのぶん引いてある（元は 248 / 518 / 390 / 678） */
.beFac__body{
  position:absolute;left:0;right:0;
  top:calc(248 * var(--u));height:calc(640 * var(--u));
}
.beFac__ph1{left:calc(140 * var(--u));top:0;width:calc(600 * var(--u));height:calc(580 * var(--u))}
.beFac__ph2{left:calc(770 * var(--u));top:calc(270 * var(--u));width:calc(350 * var(--u));height:calc(370 * var(--u))}
.beFac__tx{
  position:absolute;left:calc(1264 * var(--u));top:calc(142 * var(--u));
  width:calc(427 * var(--u));
  font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:2;letter-spacing:.05em;
}
/* スモークの ENJOY と同じで、写真が半分ほど流れてから横のテキスト */
.js .beFac__tx{transition-delay:1.4s}
.js .beFac__note{transition-delay:1.7s}

.beFac__note{
  position:absolute;left:calc(1264 * var(--u));top:calc(430 * var(--u));
  font-weight:500;
  font-size:calc(16 * var(--u));
  line-height:1.5;letter-spacing:.05em;
}

/* 製造工程 */
.beStep{position:absolute;left:0;right:0;top:calc(3628 * var(--u))}
/* 製造工程は、上の醸造所（beFac）が出きってから */
.beStep__ttl{--lead:.5s}
.beStep__item{--lead:.7s}
.beStep__ttl{
  font-weight:700;
  font-size:calc(30 * var(--u));
  line-height:.9333;letter-spacing:.05em;
  text-align:center;
}
.beStep__list{
  position:absolute;left:calc(140 * var(--u));top:calc(62 * var(--u));
  display:flex;
  gap:calc(20 * var(--u));
}
.beStep__item{
  position:relative;flex:0 0 auto;
  width:calc(394 * var(--u));height:calc(635 * var(--u));
  background:var(--paper);
  border-radius:var(--r-photo);
  color:var(--ink);text-align:center;
}
/* ＼STEP／ と番号は書き出した SVG をそのまま置く（文字の傾きが1字ずつ違うため） */
.beStep__label{
  position:absolute;left:calc(134 * var(--u));top:calc(38 * var(--u));
  width:calc(126 * var(--u));
}
.beStep__label img{display:block;width:100%;height:auto}
/* 挿絵は1枚ずつ大きさも位置も違うので、カードごとに置く */
.beStep__ph{position:absolute;margin:0}
.beStep__ph img{display:block;width:100%;height:auto}
/* 4枚とも同じ枠（STEP の見出しの下〜工程名の上）に、同じ大きさで置く */
.beStep__ph{left:calc(62 * var(--u));top:calc(165 * var(--u));width:calc(270 * var(--u))}
/* 写真が決まるまでの仮置き */
.beStep__dummy{
  position:absolute;left:calc(104 * var(--u));top:calc(254 * var(--u));
  display:grid;place-items:center;
  width:calc(188 * var(--u));height:calc(81 * var(--u));
  background:#000;
  color:var(--paper);font-weight:700;
  font-size:calc(42 * var(--u));
  line-height:1;letter-spacing:.05em;
}
.beStep__name{
  position:absolute;left:0;right:0;top:calc(450 * var(--u));
  font-weight:700;
  font-size:calc(28 * var(--u));
  line-height:1.4286;letter-spacing:.05em;
}
.beStep__tx{
  position:absolute;left:calc(42 * var(--u));top:calc(498 * var(--u));
  width:calc(310 * var(--u));
  font-weight:500;
  font-size:calc(18 * var(--u));
  line-height:1.944;letter-spacing:.05em;
}

/* ACCESS */
.beAccess{position:absolute;left:0;right:0;top:calc(4368 * var(--u))}
.beAccess__wm{
  position:absolute;left:calc(89 * var(--u));top:0;
  color:#c30413;
  font-family:var(--en);font-weight:700;
  font-size:calc(200 * var(--u));
  line-height:.9;
  pointer-events:none;
}
.beAccess__card{
  position:absolute;left:calc(360 * var(--u));top:calc(133 * var(--u));
  width:calc(1200 * var(--u));height:calc(520 * var(--u));
  background:var(--paper);
  border-radius:var(--r-photo);
  color:var(--ink);
}
/* 地図と文章は高さが違うので、それぞれ白い枠の上下中央に置く */
.beAccess__map{
  position:absolute;left:calc(57 * var(--u));top:50%;
  width:calc(600 * var(--u));height:calc(382 * var(--u));
  translate:0 -50%;
  border-radius:var(--r-photo);overflow:clip;
}
.beAccess__map iframe{display:block;width:100%;height:100%;border:0}

.beAccess__info{position:absolute;left:calc(749 * var(--u));top:50%;translate:0 -50%}
.beAccess__name{
  color:var(--red);font-weight:700;
  font-size:calc(34 * var(--u));
  line-height:.8824;letter-spacing:.05em;
  white-space:nowrap;
}
.beAccess__addr{
  margin-top:calc(25 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.4545;letter-spacing:.05em;
}
.beAccess__fax{
  margin-top:calc(12 * var(--u));
  font-weight:500;
  font-size:calc(22 * var(--u));
  line-height:1.5;letter-spacing:.05em;
}
.beAccess__meta{
  margin-top:calc(30 * var(--u));
  font-size:calc(16 * var(--u));
  line-height:2.125;letter-spacing:.05em;
}
.beAccess__meta li{position:relative;padding-left:calc(38 * var(--u))}
.beAccess__meta li::before{
  content:"";position:absolute;left:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.beAccess__meta--clock::before{top:calc(6 * var(--u));width:calc(23 * var(--u));height:calc(23 * var(--u));background-image:url(../img/smoke/sm-icon-clock.svg)}
.beAccess__meta--cal::before{top:calc(9 * var(--u));width:calc(22.924 * var(--u));height:calc(16.742 * var(--u));background-image:url(../img/smoke/sm-icon-cal.svg)}
.beAccess__meta--car::before{top:calc(9 * var(--u));width:calc(23 * var(--u));height:calc(18 * var(--u));background-image:url(../img/smoke/sm-icon-car.svg)}

.beAccess__map-link{
  display:inline-flex;align-items:center;
  gap:calc(8 * var(--u));
  margin-top:calc(26 * var(--u));
  padding:0 calc(19 * var(--u)) 0 calc(17 * var(--u));
  width:calc(151 * var(--u));height:calc(36 * var(--u));
  border:calc(1.5 * var(--u)) solid var(--red);
  border-radius:calc(18.5 * var(--u));
  color:var(--red);
  font-family:var(--en);font-weight:800;
  font-size:calc(15 * var(--u));
  line-height:1;letter-spacing:.05em;
  white-space:nowrap;
}
.beAccess__map-link::before{
  content:"";flex:0 0 auto;
  width:calc(11 * var(--u));height:calc(16 * var(--u));
  background-color:currentColor;
  -webkit-mask:url(../img/smoke/sm-pin.svg) no-repeat center/contain;
          mask:url(../img/smoke/sm-pin.svg) no-repeat center/contain;
}

/* --- BEER TALK（Y 8360 を原点） --- */
.beTalk{position:relative;height:calc(761 * var(--u))}
.beTalk__card{
  position:absolute;left:calc(310 * var(--u));top:calc(183 * var(--u));
  width:calc(1300 * var(--u));height:calc(540 * var(--u));
  border-radius:var(--r-photo);overflow:clip;
  color:var(--paper);text-align:center;
}
.beTalk__ph{position:absolute;inset:0;margin:0}
.beTalk__ph img{display:block;width:100%;height:100%;object-fit:cover}
/* 文字を読ませるための陰 */
.beTalk__card::after{
  content:"";position:absolute;inset:0;
  background:rgba(19,19,20,.67);
}
.beTalk__en,
.beTalk__lead,
.beTalk__btn{position:relative;z-index:1}
.beTalk__en{
  padding-top:calc(105 * var(--u));
  font-family:var(--en);font-weight:700;
  font-size:calc(100 * var(--u));
  line-height:1.2;
}
.beTalk__lead{
  margin-top:calc(11 * var(--u));
  font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1.8182;letter-spacing:.05em;
}
.beTalk__btn{
  display:grid;place-items:center;
  margin:calc(31 * var(--u)) auto 0;
  width:calc(250 * var(--u));height:calc(60 * var(--u));
  background:var(--paper);
  border-radius:calc(100 * var(--u));
  color:var(--ink);font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1;letter-spacing:.05em;
}

/* --- ビールの詳細ポップアップ --- */
/* main の外に置いてあるので、寸法のもとになる --u をここで持たせる */
.beModals{--u:calc(var(--w) / 1920)}
.beModal{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:calc(20 * var(--u));
}
.beModal[hidden]{display:none}
.beModal__veil{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.beModal__box{
  position:relative;
  width:calc(1500 * var(--u));height:calc(900 * var(--u));
  max-height:calc(100vh - 40px);
  background:var(--paper);
  border-radius:calc(50 * var(--u));
}

/* パッと出さず、幕と枠をふわっと寄せる。
   JS が hidden を外した1フレームあとに .is-open を付けてくれる */
.js .beModal__veil{opacity:0;transition:opacity .4s var(--ease)}
.js .beModal__box{
  /* 下から持ち上げるのではなく、奥から手前へ寄ってくる感じに */
  opacity:0;transform:scale(.9);
  transition:
    opacity .5s var(--ease),
    transform .55s var(--ease);
}
.js .beModal.is-open .beModal__veil{opacity:1}
.js .beModal.is-open .beModal__box{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .beModal__veil,
  .js .beModal__box{opacity:1;transform:none;transition:none}
}
/* ✕ は線2本で描く */
.beModal__close{
  position:absolute;right:calc(50 * var(--u));top:calc(43 * var(--u));
  width:calc(36 * var(--u));height:calc(36 * var(--u));
  padding:0;border:0;background:none;
  cursor:pointer;
}
.beModal__close::before,
.beModal__close::after{
  content:"";position:absolute;left:50%;top:50%;
  width:calc(36 * var(--u));height:calc(3 * var(--u));
  background:var(--ink);
  translate:-50% -50%;
}
.beModal__close::before{rotate:45deg}
.beModal__close::after{rotate:-45deg}

.beModal__ph{
  position:absolute;left:calc(76 * var(--u));top:calc(75 * var(--u));margin:0;
  width:calc(630 * var(--u));height:calc(750 * var(--u));
  overflow:clip;
}
.beModal__ph img{display:block;width:100%;height:100%;object-fit:cover}

/* 右半分は、文章の行数が違っても下が崩れないよう流し込みで積む。
   各要素の top から逆算した間隔を margin にしてある */
.beModal__tx{
  position:absolute;left:calc(781 * var(--u));top:calc(127 * var(--u));
  color:var(--c);
}
.beModal__en{
  font-family:var(--en);font-weight:700;
  font-size:calc(70 * var(--u));
  line-height:1.2857;
  white-space:nowrap;
}
.beModal__name{
  margin-top:calc(6 * var(--u));
  font-weight:700;
  font-size:calc(35 * var(--u));
  line-height:.7429;letter-spacing:.05em;
  white-space:nowrap;
}
.beModal__name span{
  margin-left:calc(10 * var(--u));
  font-size:calc(20 / 35 * 1em);letter-spacing:.05em;
}
.beModal__abv{
  margin-top:calc(33 * var(--u));
  display:grid;place-items:center;
  width:calc(210 * var(--u));height:calc(40 * var(--u));
  border:calc(2 * var(--u)) solid var(--c);
  font-weight:700;
  font-size:calc(18 * var(--u));
  line-height:1;letter-spacing:.05em;
}
.beModal__desc{
  margin-top:calc(30 * var(--u));
  width:calc(630 * var(--u));
  color:var(--ink);font-weight:500;
  font-size:calc(20 * var(--u));
  line-height:2;letter-spacing:.05em;
}
.beModal__food{
  margin-top:calc(32 * var(--u));
  width:calc(629 * var(--u));
  padding-bottom:calc(36 * var(--u));
  background:#f1f1f1;
  border-radius:calc(10 * var(--u));
  color:var(--ink);
}
.beModal__foodTtl{
  padding:calc(21 * var(--u)) 0 0 calc(44 * var(--u));
  font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:2.045;letter-spacing:.05em;
}
.beModal__foodTx{
  padding:0 calc(44 * var(--u));
  font-weight:400;
  font-size:calc(18 * var(--u));
  line-height:1.4444;letter-spacing:.05em;
}
.beModal__buy{
  margin-top:calc(68 * var(--u));
  display:flex;
  gap:calc(40 * var(--u));
}
.beModal__btn{
  display:inline-flex;align-items:center;
  gap:calc(37 * var(--u));
  padding:0 calc(40 * var(--u)) 0 calc(12 * var(--u));
  height:calc(70 * var(--u));
  background:var(--c);
  border-radius:calc(80 * var(--u));
  color:var(--paper);font-weight:700;
  font-size:calc(22 * var(--u));
  line-height:1;letter-spacing:.05em;
  white-space:nowrap;
  transition:opacity .25s ease;
}
.beModal__btn:hover{opacity:.85}
.beModal__cart{
  display:grid;place-items:center;flex:0 0 auto;
  width:calc(52 * var(--u));height:calc(52 * var(--u));
  background:var(--paper);border-radius:50%;
}
/* img で読み込んだ SVG には currentColor が効かないので、マスクで各ビールの色に塗る */
.beModal__cart::before{
  content:"";display:block;
  width:calc(25 * var(--u));height:calc(22.843 * var(--u));
  background-color:var(--c);
  -webkit-mask:url(../img/beer/be-cart.svg) no-repeat center/contain;
          mask:url(../img/beer/be-cart.svg) no-repeat center/contain;
}

@media (prefers-reduced-motion:reduce){
  .beCard,.beCard__more,.beModal__btn{transition:none}
  .beCard:hover{transform:none}
  .beCard:hover .beCard__more{transform:none}
}


/* ============================================================
   スマートフォン表示（固定3ページ）

   PC と同じ考え方で、デザインの実数をそのまま書いて --u で割る。
   ただし基準幅が違う（PC 1920 / SP 375）ので、この中で --u を置き直す。
   480px を超えたら伸ばしきらずに中央に寄せる ── 375 の設計を
   タブレット幅まで引き伸ばすと文字が大きくなりすぎるため。

   アニメーションの方針は main.js 側と対になっている。
   ・SP では data-group（かたまり発火）とカード内の順番待ちを使わない
   ・縦に積まれたものは、ひとつずつ画面に入った時点で下から出す
   ・斜めに流すグラデーション（.reveal / .wipe）は、横移動が
     縦積みに合わないので SP では使わず、下からのふわっとに寄せる
   ============================================================ */

@media (max-width:899px){

  /* SP デザイン（375 幅）を、そのまま画面幅いっぱいまで引き伸ばす。
     480px で頭打ちにすると 480〜899px の間で左右に余白が出てしまうので、
     上限は設けず 900px まで連続して大きくなるようにしている */
  .rs,.sm,.be,.beModals{--u:calc(100vw / 375)}

  /* パンくずの左右余白はデザインに合わせて 20 に */
  .rs .bread,.sm .bread,.be .bread{padding-inline:calc(20 * var(--u))}

  .rs,.sm,.be{
    width:calc(375 * var(--u));
    margin-inline:auto;
    /* overflow-x だけを clip にすると overflow-y が auto に計算されてしまい、
       ここ自体が縦スクロールの器になる（実機で中身がわずかに動く原因）。
       両方 clip にして、器にはしない */
    overflow:clip;
  }

  /* --- 出現アニメの SP 版 ------------------------------------- */

  /* 1文字ずつ出す見出しは span が inline-block なので、
     行送りを持たせると行間が二重にかかる。行間は親だけで決める */
  .js .chars .char{line-height:1}

  /* 斜めに流すマスクはやめて、下からのふわっとに揃える。
     縦積みの画面で左右に動くと、流れが横切ってしまうため */
  .js .reveal,
  .js .wipe{
    -webkit-mask-image:none;mask-image:none;
    opacity:0;transform:translateY(calc(24 * var(--u)));
    transition:
      opacity .8s var(--ease) calc(var(--i, 0) * var(--step, .1s) + var(--lead, 0s)),
      transform .8s var(--ease) calc(var(--i, 0) * var(--step, .1s) + var(--lead, 0s));
    animation:none;
  }
  .js .reveal.is-in,
  .js .wipe.is-in{opacity:1;transform:none;animation:none}

  /* PC で「隣の写真が流れ終わるのを待つ」ために置いた長い待ち時間は、
     縦積みになると間延びするだけなので、ひと呼吸ぶんに戻す */
  .js .smTopic__ttl,
  .js .smTopic__tx,
  .js .beFac__tx,
  .js .beFac__note,
  .js .smProd__ph,
  .js .smProd__circle,
  .js .smProd__ttl,
  .js .smProd__body,
  .js .smProd__btn,
  .js .smSlider__item,
  .js .smSlider__nav,
  .js .smUse__btn{transition-delay:calc(var(--i, 0) * .1s)}

  /* 導入は ［燻製］が出きってから リード → 写真 の順。
     SP は縦に長いぶん、PC より間を取る（PC 側の値は変えていない） */
  .smIntro__lead{--lead:1.3s}
  .smIntro__ph1{--lead:1.6s}
  .smIntro__ph2{--lead:1.8s}
  /* 商品のホタルイカ側は、SP では間延びするので PC より詰める */
  .js .smProd__item--b .smProd__circle{transition-delay:.55s}
  .js .smProd__item--b .smProd__ttl,
  .js .smProd__item--b .smProd__body{transition-delay:1s}
  .js .smProd__btn{transition-delay:1.5s}

  /* 縦書きのコピーも、SP では瓶のすぐあとに */
  .smUse__vert{--lead:.35s}


  .beStep__ttl,
  .beStep__item{--lead:.2s;--step:.1s}
  /* 導入は PC と同じく上から順。見出しが流れている途中から続くよう、
     PC と同じ呼吸まで前へ詰める */
  .beIntro__ja{--lead:.1s}
  .beIntro__lead{--lead:.25s}
  .beList__item{--lead:.45s;--step:.1s}

  /* 横スワイプになる並びは、ひと組として同時に出す */
  .beList__item,
  .beFeat__item,
  .beStep__item,
  .rsSpace__item,
  .smSlider__item{--step:0s}

  /* SP は1枚ずつしか見えないので、PC 用の「少し置いてから」は待たされるだけ。
     列が見えた時点で1枚目がすぐ動くようにする */
  .rsSpace__item{--lead:0s}

  /* --- 横スワイプの共通部品 ----------------------------------- */

  .spLane{
    display:flex;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .spLane::-webkit-scrollbar{display:none}
  .spLane > *{scroll-snap-align:center}

  .spDots{
    position:absolute;left:0;right:0;
    display:flex;justify-content:center;
    gap:calc(15 * var(--u));
    margin:0;padding:0;
    list-style:none;
  }
  .spDots__i{
    width:calc(14 * var(--u));height:calc(14 * var(--u));
    border-radius:50%;
    background:#d9d9d9;
    transition:background-color .3s var(--ease);
    cursor:pointer;
  }
  /* 選択中だけ色がつく。色は節ごとの currentColor（白地は赤、赤地は白） */
  .spDots__i.is-on{background:currentColor}
}

/* PC では点を出さない */
@media (min-width:900px){
  .spDots{display:none}
}

/* ------------------------------------------------------------
   城崎 地ビール（SP）
   375 幅のデザインの実数をそのまま書く。節ごとの原点は
   デザイン上の Y で、各要素はそこからの差で置いている。
   ------------------------------------------------------------ */

@media (max-width:899px){

  /* ヒーロー（Y 0） */
  .beHero__ph img{height:calc(230 * var(--u));object-fit:cover}

  /* 導入（Y 274 ＝ パンくずの下） */
  /* パンくずの高さはテーマ共通の clamp なので、デザインとの差をここで足す */
  .beIntro{margin-top:calc(3.6 * var(--u));height:calc(727 * var(--u))}
  /* 幅で「KINOSAKI / BEER」の2行に折る */
  .beIntro__en{
    left:50%;right:auto;top:calc(29 * var(--u));
    width:calc(264 * var(--u));translate:-50% 0;
    font-size:calc(55 * var(--u));line-height:1;
  }
  .beIntro__ja{top:calc(139 * var(--u));font-size:calc(14 * var(--u));line-height:2}
  .beIntro__lead{
    left:50%;right:auto;top:calc(179 * var(--u));
    width:calc(322 * var(--u));translate:-50% 0;
    font-size:calc(16 * var(--u));line-height:1.875;
  }

  /* 4種は横スワイプ。1枚を中央に置き、隣が少しのぞく */
  .beList{
    position:absolute;left:0;right:0;top:calc(299 * var(--u));
    gap:calc(10 * var(--u));
    padding-inline:calc(57.5 * var(--u));
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .beList::-webkit-scrollbar{display:none}
  .beList__item{scroll-snap-align:center}
  .beCard{
    width:calc(260 * var(--u));height:calc(332 * var(--u));
    border-radius:calc(30 * var(--u));
  }
  .beCard:hover{transform:none}
  .beCard__ph{
    left:calc(94 * var(--u));top:calc(29 * var(--u));width:calc(72 * var(--u));
    /* 影も SP デザインの実数（7 / 2 / 10・20%）に合わせる */
    filter:drop-shadow(calc(7 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.2));
  }
  /* 実機（iPhone）では 700 が太く出すぎるので、ここだけ細めに落とす */
  .beCard__name{
    left:calc(19 * var(--u));top:calc(262 * var(--u));
    font-weight:600;
    font-size:calc(30 * var(--u));line-height:.8667;
  }
  .beCard__abv{
    left:calc(24 * var(--u));top:calc(290 * var(--u));
    font-weight:400;
    font-size:calc(13 * var(--u));line-height:2;
  }
  .beCard__more{
    left:calc(200 * var(--u));top:calc(273 * var(--u));
    width:calc(47 * var(--u));height:calc(47 * var(--u));
    border-width:calc(2 * var(--u));
  }
  .beCard__more::before{width:calc(19 * var(--u));height:calc(2 * var(--u))}
  .beCard__more::after{width:calc(2 * var(--u));height:calc(19 * var(--u))}
  .beCard:hover .beCard__more{transform:none}
  .beIntro .spDots{top:calc(656 * var(--u));color:var(--red)}

  /* 飲み比べセット（Y 1001） */
  .beSet{height:calc(559 * var(--u))}
  .beSet__banner{height:calc(485 * var(--u))}
  .beSet__ph{
    left:calc(20 * var(--u));top:0;
    width:calc(335 * var(--u));height:calc(207 * var(--u));
    border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
  }
  .beSet__box{
    left:calc(20 * var(--u));top:calc(207 * var(--u));
    width:calc(335 * var(--u));height:calc(278 * var(--u));
    border-radius:0 0 calc(20 * var(--u)) calc(20 * var(--u));
  }
  .beSet__ttl{
    left:50%;right:auto;top:calc(18 * var(--u));
    width:calc(231 * var(--u));translate:-50% 0;
    font-size:calc(22 * var(--u));line-height:1.4545;
    text-align:center;white-space:normal;
  }
  .beSet__tx{
    left:50%;right:auto;top:calc(91 * var(--u));
    width:calc(286 * var(--u));translate:-50% 0;
    font-weight:500;
    font-size:calc(14 * var(--u));line-height:1.7857;
  }
  .beSet__btn{
    left:calc(37 * var(--u));top:calc(188 * var(--u));
    width:calc(250 * var(--u));height:calc(60 * var(--u));
    font-size:calc(18 * var(--u));
  }
  .beSet__wm{
    left:calc(9 * var(--u));top:calc(503 * var(--u));right:auto;
    font-size:calc(110 * var(--u));line-height:1.1818;letter-spacing:0;
  }
  .beSet__wm span{margin-right:calc(-3 * var(--u));letter-spacing:0}
}

@media (max-width:899px){

  /* レストランや、ご自宅でも（Y 1560・ビール／スモーク共通パーツ） */
  .smWays{height:calc(586 * var(--u))}
  /* ビールページはこの下が赤背景なので、端数ぶんの白い筋が見えてしまう。
     バナーの下端（117 + 234 + 234 = 585）に合わせて、赤を隙間なく続ける */
  .be .smWays{height:calc(585 * var(--u))}
  .smWays__ttl{
    left:50%;right:auto;top:calc(30 * var(--u));
    width:calc(310 * var(--u));translate:-50% 0;
    font-size:calc(26 * var(--u));line-height:1.4231;
  }
  /* 2枚は左右から上下へ。幅いっぱいのバナーを積む */
  .smWays__list{top:calc(117 * var(--u));display:block}
  .smWays__item{flex:none}
  .smWays__a{height:calc(234 * var(--u))}
  .smWays__item:nth-child(1) .smWays__a::after{
    background:linear-gradient(32.96deg, rgba(65,73,80,.585) 31.602%, rgba(65,73,80,.09) 57.747%);
  }
  .smWays__item:nth-child(2) .smWays__a::after{
    background:linear-gradient(46.185deg, rgba(80,71,65,.585) 15.674%, rgba(80,71,65,.09) 49.63%);
  }
  .smWays__cap{
    left:calc(12 * var(--u));top:calc(129 * var(--u));
    font-size:calc(16 * var(--u));line-height:2.625;
  }
  .smWays__en{
    left:calc(12 * var(--u));top:calc(164 * var(--u));
    gap:calc(10 * var(--u));
    font-size:calc(35 * var(--u));line-height:1.2;
  }
  .smWays__ar{width:calc(46 * var(--u))}
  .smWays__sub{
    left:calc(12 * var(--u));top:calc(189 * var(--u));
    font-size:calc(12 * var(--u));line-height:3.75;
  }

  /* 料理とともに完成する一杯を。（赤背景・Y 2146） */
  .beFood{height:calc(3048 * var(--u))}
  .beFood__wm{top:calc(29 * var(--u))}
  .beFood__wmL{left:0;width:calc(304.585 * var(--u));height:calc(46.267 * var(--u))}
  .beFood__wmR{
    left:calc(326.99 * var(--u));top:calc(.6 * var(--u));
    width:calc(48.01 * var(--u));height:calc(42.738 * var(--u));
  }
  .beFood__ttl{
    left:50%;right:auto;top:calc(59 * var(--u));
    width:calc(280 * var(--u));translate:-50% 0;
    font-size:calc(26 * var(--u));line-height:1.4231;
  }
  /* PC 用の2つ目の改行は、縦に長くなるぶん SP では外す */
  .beFood__lead br:nth-of-type(2){display:none}
  .beFood__lead{
    left:50%;right:auto;top:calc(148 * var(--u));
    width:calc(354 * var(--u));translate:-50% 0;
    font-weight:500;
    font-size:calc(16 * var(--u));line-height:1.875;
  }

  .beStrip{left:calc(-208 * var(--u));top:calc(299 * var(--u))}
  .beStrip__item{width:calc(275.96 * var(--u));height:calc(275.96 * var(--u))}

  /* FEATURES ─ 3つは横スワイプに */
  .beFeat{
    left:calc(20 * var(--u));top:calc(615 * var(--u));
    width:calc(335 * var(--u));height:calc(670 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .beFeat__ja{top:calc(35 * var(--u));font-size:calc(16 * var(--u));line-height:1.75}
  .beFeat__en{top:calc(71 * var(--u));font-size:calc(55 * var(--u));line-height:1}
  .beFeat__sub{top:calc(124 * var(--u));font-size:calc(14 * var(--u));line-height:2}
  .beFeat__list{
    left:0;right:0;top:calc(165 * var(--u));
    gap:calc(10 * var(--u));
    padding-inline:calc(22.5 * var(--u));
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .beFeat__list::-webkit-scrollbar{display:none}
  .beFeat__item{width:calc(290 * var(--u));scroll-snap-align:center}
  .beFeat__ph{
    padding:calc(10.7 * var(--u)) calc(11 * var(--u));
    width:calc(290 * var(--u));height:calc(222.626 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  /* 赤い枠だけでなく、中の写真もデザインどおり角を丸める */
  .beFeat__ph img{border-radius:calc(20 * var(--u))}
  .beFeat__num{margin-top:calc(10 * var(--u));font-size:calc(45 * var(--u));line-height:1.2}
  .beFeat__ttl{margin-top:calc(1 * var(--u));font-size:calc(23 * var(--u));line-height:1.1304}
  .beFeat__tx{margin-top:calc(8 * var(--u));font-size:calc(14 * var(--u));line-height:1.7857}
  .beFeat .spDots{top:calc(630 * var(--u));color:var(--red)}

  /* BEER FACTORY（Y 3485） */
  .beFac{top:calc(1339 * var(--u))}
  .beFac__ja{font-size:calc(16 * var(--u));line-height:1.75}
  .beFac__en{
    left:50%;right:auto;top:calc(36 * var(--u));
    width:calc(255 * var(--u));translate:-50% 0;
    font-size:calc(55 * var(--u));line-height:1;
  }
  .beFac__sub{top:calc(149 * var(--u));font-size:calc(14 * var(--u));line-height:2}
  .beFac__body{top:calc(189 * var(--u));height:calc(468 * var(--u))}
  .beFac__ph1{
    left:calc(21.9 * var(--u));top:0;
    width:calc(203.933 * var(--u));height:calc(197.136 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .beFac__ph2{
    left:calc(236.04 * var(--u));top:calc(91.77 * var(--u));
    width:calc(118.961 * var(--u));height:calc(125.759 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .beFac__tx{
    left:calc(21 * var(--u));top:calc(239 * var(--u));
    width:calc(334 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.875;
  }
  .beFac__note{
    left:calc(21 * var(--u));top:calc(428 * var(--u));
    width:calc(334 * var(--u));
    font-size:calc(13 * var(--u));line-height:1.5385;
  }

  /* 製造工程（Y 4184）─ 4枚は横スワイプ。SP デザインに見出しは無い */
  .beStep{top:calc(2038 * var(--u))}
  .beStep__ttl{display:none}
  .beStep__list{
    left:0;right:0;top:0;
    gap:calc(10 * var(--u));
    padding-inline:calc(57.5 * var(--u));
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .beStep__list::-webkit-scrollbar{display:none}
  .beStep__item{
    width:calc(260 * var(--u));height:calc(414 * var(--u));
    border-radius:calc(20 * var(--u));
    scroll-snap-align:center;
  }
  /* カードの横幅のちょうど真ん中に置く */
  .beStep__label{
    left:50%;top:calc(25 * var(--u));
    width:calc(76 * var(--u));translate:-50% 0;
  }
  /* SP は1枚ずつ送るので、挿絵の置き方はカードごとに変えず揃える */
  /* 絵の縦横比がばらばらなので枠を揃えて中に収める。
     高さを決めないと STEP2〜4 が商品名に重なる */
  .beStep__ph{
    left:calc(20 * var(--u));top:calc(97 * var(--u));
    width:calc(220 * var(--u));height:calc(168 * var(--u));
  }
  .beStep__ph img{width:100%;height:100%;object-fit:contain}
  /* STEP1・2 の絵は書き出しの上下の余白が広く、枠を揃えると小さく見える。
     絵そのものの高さが STEP3・4 とそろうよう、下端を基準に拡大する */
  .beStep__item:nth-child(1) .beStep__ph img{transform-origin:50% 100%;scale:1.1}
  .beStep__item:nth-child(2) .beStep__ph img{transform-origin:50% 100%;translate:0 calc(6 * var(--u));scale:1.15}
  .beStep__dummy{
    left:calc(74 * var(--u));top:calc(158 * var(--u));
    width:calc(113 * var(--u));height:calc(37 * var(--u));
    font-size:calc(22 * var(--u));
  }
  .beStep__name{top:calc(272 * var(--u));font-size:calc(25 * var(--u));line-height:1.6}
  /* 「ろ過とパッケージング」だけ長いので、1行に収まる大きさに */
  .beStep__item:nth-child(4) .beStep__name{font-size:calc(19 * var(--u))}
  .beStep__tx{
    left:calc(20 * var(--u));top:calc(315 * var(--u));
    width:calc(220 * var(--u));
    font-size:calc(13.5 * var(--u));line-height:1.7857;letter-spacing:0;
  }
  /* 赤地の上なので、選択中は白・それ以外はグレーではなく濃い赤（デザイン値） */
  .beStep .spDots{top:calc(434 * var(--u));color:var(--paper)}
  .beStep .spDots__i:not(.is-on){background:#a50411}

  /* ACCESS（Y 4599） */
  .beAccess{top:calc(2453 * var(--u))}
  .beAccess__wm{
    left:calc(10 * var(--u));right:auto;top:0;
    font-size:calc(80 * var(--u));line-height:2.25;
  }
  .beAccess__card{
    left:calc(20 * var(--u));top:calc(108 * var(--u));
    width:calc(335 * var(--u));height:calc(450 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  /* SP はデザインの座標どおりに積むので、PC の上下中央揃え（translate）は戻す */
  .beAccess__map{
    left:calc(28 * var(--u));top:calc(30 * var(--u));
    width:calc(280 * var(--u));height:calc(178 * var(--u));
    translate:none;
    border-radius:calc(10 * var(--u));
  }
  .beAccess__info{left:calc(28 * var(--u));top:calc(226 * var(--u));translate:none}
  .beAccess__name{font-size:calc(24 * var(--u));line-height:1.25}
  .beAccess__addr{margin-top:calc(6 * var(--u));font-size:calc(16 * var(--u));line-height:1.4375}
  .beAccess__fax{margin-top:calc(4 * var(--u));font-size:calc(16 * var(--u));line-height:1.4375}
  .beAccess__meta{margin-top:calc(13 * var(--u));font-size:calc(14 * var(--u));line-height:1.7857}
  .beAccess__meta li{padding-left:calc(28 * var(--u))}
  .beAccess__meta--clock::before{top:calc(3 * var(--u));width:calc(19.44 * var(--u));height:calc(19.44 * var(--u))}
  .beAccess__meta--cal::before{top:calc(7 * var(--u));width:calc(19.376 * var(--u));height:calc(14.152 * var(--u))}
  .beAccess__meta--car::before{top:calc(6 * var(--u));width:calc(19.44 * var(--u));height:calc(15.214 * var(--u))}
  /* 地図そのものから Google マップへ入れるので、SP デザインどおりボタンは置かない */
  .beAccess__map-link{display:none}

  /* BEER TALK（Y 5194） */
  .beTalk{height:calc(387 * var(--u))}
  .beTalk__card{
    left:calc(20 * var(--u));top:calc(45 * var(--u));
    width:calc(335 * var(--u));height:calc(300 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .beTalk__en{padding-top:calc(41 * var(--u));font-size:calc(55 * var(--u));line-height:1}
  .beTalk__lead{
    margin-top:calc(9 * var(--u));
    font-weight:500;
    font-size:calc(14 * var(--u));line-height:1.7857;
  }
  .beTalk__btn{
    margin-top:calc(25 * var(--u));
    width:calc(210 * var(--u));height:calc(60 * var(--u));
    font-size:calc(18 * var(--u));
  }

  /* RESTAURANT / SMOKE（Y 5581）─ 左右から上下へ */
  .rsLink{padding:0 0 calc(118 * var(--u))}
  .rsLink__wm{top:0}
  .rsLink__wmL{left:0;width:calc(304.585 * var(--u))}
  .rsLink__wmR{left:calc(326.99 * var(--u));top:calc(.6 * var(--u));width:calc(48.01 * var(--u))}
  .rsLink__list{display:block;padding-top:calc(43 * var(--u))}
  .rsLink__item + .rsLink__item{margin-top:calc(27 * var(--u))}
  .rsLink__a{width:calc(335 * var(--u));margin-inline:auto}
  .rsLink__a:hover{transform:none}
  .rsLink__ph{width:calc(335 * var(--u));height:calc(268 * var(--u));border-radius:calc(20 * var(--u))}
  .rsLink__en{margin-top:calc(10 * var(--u));font-size:calc(45 * var(--u));line-height:1.1}
  .rsLink__ja{margin-top:0;font-size:calc(15 * var(--u));line-height:1.8667}
}

/* ------------------------------------------------------------
   ビールの詳細ポップアップ（SP）
   PC は写真と文章の2段組だが、SP は上から縦に積む。
   画面が低い端末でも読めるよう、枠ごと縦スクロールさせる。
   ------------------------------------------------------------ */

@media (max-width:899px){

  .beModal{
    place-items:start center;
    padding:calc(22 * var(--u)) calc(20 * var(--u));
    overflow-y:auto;
  }
  /* 枠が画面より高いときも、幕は画面いっぱいのまま */
  .beModal__veil{position:fixed}

  .beModal__box{
    width:calc(335 * var(--u));height:auto;max-height:none;
    padding-bottom:calc(32 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .beModal__close{
    right:calc(22.5 * var(--u));top:calc(18 * var(--u));
    width:calc(25.456 * var(--u));height:calc(25.456 * var(--u));
  }

  .beModal__ph{
    position:static;
    margin:calc(59 * var(--u)) auto 0;
    width:calc(280 * var(--u));height:calc(333.334 * var(--u));
    border-radius:calc(20 * var(--u));
  }

  /* 文章は流し込み。間隔はデザインの Y から逆算して margin にしてある */
  .beModal__tx{
    position:static;
    margin:calc(16 * var(--u)) calc(28 * var(--u)) 0;
  }
  .beModal__en{font-size:calc(30 * var(--u));line-height:1}
  .beModal__name{
    margin-top:calc(4 * var(--u));
    font-size:calc(25 * var(--u));line-height:1.04;
  }
  .beModal__name span{margin-left:calc(10 * var(--u));font-size:calc(14 / 25 * 1em)}
  .beModal__abv{
    margin-top:calc(14 * var(--u));
    width:calc(159 * var(--u));height:calc(33 * var(--u));
    font-size:calc(13 * var(--u));
  }
  .beModal__desc{
    margin-top:calc(12 * var(--u));
    width:calc(270 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.7857;
  }
  .beModal__food{
    margin-top:calc(16 * var(--u));
    width:calc(270 * var(--u));
    padding-bottom:calc(15 * var(--u));
  }
  .beModal__foodTtl{
    padding:calc(11 * var(--u)) 0 0 calc(20 * var(--u));
    font-size:calc(18 * var(--u));line-height:2.5;
  }
  .beModal__foodTx{
    margin-top:calc(-5 * var(--u));
    padding:0 calc(20 * var(--u));
    font-weight:500;
    font-size:calc(14 * var(--u));line-height:1.7857;
  }

  /* 購入ボタンは横並びから縦積みへ */
  .beModal__buy{
    margin-top:calc(23 * var(--u));
    display:block;
  }
  .beModal__btn{
    display:flex;
    /* margin-left:calc(31 * var(--u)); */
    gap:calc(22 * var(--u));
    padding:0 0 0 calc(12 * var(--u));
    width:calc(267 * var(--u));height:calc(70 * var(--u));
    font-size:calc(16 * var(--u));
  }
  .beModal__btn + .beModal__btn{margin-top:calc(10 * var(--u))}
}

/* ------------------------------------------------------------
   レストラン（SP）
   ------------------------------------------------------------ */

@media (max-width:899px){

  /* ヒーロー（Y 0） */
  .rsHero__ph img{height:calc(230 * var(--u));object-fit:cover}

  /* キャッチコピー（Y 303） */
  .rsIntro{padding-top:calc(32.6 * var(--u))}
  /* 1行目「GUBIっと、GABUっと。」は改行させない。
     行の切れ目は <br> で決まっているので、折り返しは止めてよい */
  .rsIntro__ttl{
    margin-inline:auto;
    width:auto;white-space:nowrap;
    font-size:calc(26 * var(--u));line-height:1.5;
    letter-spacing:-.01em;
  }
  /* 大きい字で行の高さが膨らまないよう、ここだけ行送りを切る */
  .rsIntro__ttl b{font-size:calc(40 / 26 * 1em);line-height:1}
  /* 導入は PC と同じく 見出し → リード → 写真 の順 */
  .rsIntro__lead{--lead:1.1s}
  .rsIntro__ph{--lead:1.2s}

  /* PC 用の改行は、幅が狭いぶん SP では行数が増えるだけなので外す */
  .rsIntro__lead br{display:none}
  .rsIntro__lead{
    margin:calc(18 * var(--u)) auto 0;
    width:calc(335 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.875;
  }
  .rsIntro__ph{
    margin:calc(32 * var(--u)) auto 0;
    width:calc(335 * var(--u));height:calc(162.621 * var(--u));
    border-radius:calc(20 * var(--u));
  }

  /* 写真ストリップ（Y 762）─ PC の 0.5208 倍 */
  .rsStrip{margin-top:calc(34.4 * var(--u))}
  .rsStrip__list{--gap:calc((16.67 + (216.934 - 182.517) / 2) * var(--u))}
  .rsStrip__item{width:calc(182.517 * var(--u));height:calc(249.475 * var(--u))}
  .rsStrip__box{
    width:calc((182.517 + var(--k, 0) * 34.417) * var(--u));
    height:calc((209.895 + var(--k, 0) * 39.58) * var(--u));
    border-radius:calc(20 * var(--u));
  }

  /* ご予約・お問合わせ（Y 1059）─ 2段組を縦に積む */
  .rsBook--light{padding-top:calc(47.5 * var(--u))}
  .rsBook--light .rsBook__ttl{font-size:calc(26 * var(--u));line-height:1.4231}
  .rsBook__card{
    position:relative;
    display:block;
    margin:calc(11 * var(--u)) auto 0;
    width:calc(335 * var(--u));height:calc(533 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  /* PC は2段の仕切り線を引いているが、縦積みでは要らない */
  .rsBook__card::before{display:none}
  .rsBook__card .rsBook__tel{left:calc(27 * var(--u));top:calc(34 * var(--u))}
  .rsBook__tel{font-size:calc(35 * var(--u));line-height:1}
  .rsBook__telLabel{font-size:calc(18 / 35 * 1em)}
  .rsBook__card .rsBook__hours{
    left:0;top:calc(77 * var(--u));
    width:calc(335 * var(--u));
    font-size:calc(12 * var(--u));line-height:1.6667;
  }
  .rsBook__card .rsBook__btn{
    left:calc(43 * var(--u));top:calc(125 * var(--u));
    width:calc(250 * var(--u));height:calc(60 * var(--u));
    font-size:calc(18 * var(--u));
  }
  /* 右半分の内容は、カードを基準にそのまま下へ移す */
  .rsBook__shop{left:calc(27 * var(--u));top:calc(221 * var(--u))}
  /* 店名は2行に分ける */
  .rsBook__shopSm,
  .rsBook__shopLg{display:block;margin-left:0}
  .rsBook__shopSm{font-size:calc(20 * var(--u));line-height:1.5}
  .rsBook__shopLg{font-size:calc(25 * var(--u));line-height:1.2}
  .rsBook__addr{
    left:calc(27 * var(--u));top:calc(291 * var(--u));
    width:calc(220 * var(--u));
    font-size:calc(16 * var(--u));line-height:1.375;
  }
  .rsBook__meta{
    left:calc(57 * var(--u));top:calc(349 * var(--u));
    font-size:calc(14 * var(--u));line-height:2.0714;
  }
  .rsBook__meta li::before{
    left:calc(-30 * var(--u));
    width:calc(19.9 * var(--u));height:calc(19.9 * var(--u));
  }
  .rsBook__map{
    position:absolute;left:calc(28 * var(--u));top:calc(462 * var(--u));
    margin-top:0;
    width:calc(151 * var(--u));height:calc(36 * var(--u));
    font-size:calc(15 * var(--u));
  }

  /* MENU（Y 1681）─ 3列から2列へ */
  .rsMenu{padding-top:calc(41 * var(--u))}
  .rsMenu__ttl{font-size:calc(35 * var(--u));line-height:1.2}
  .rsMenu__list{
    grid-template-columns:repeat(2, calc(160 * var(--u)));
    column-gap:calc(15 * var(--u));row-gap:calc(10 * var(--u));
    margin-top:calc(6 * var(--u));
  }
  .rsMenu__link{width:calc(160 * var(--u));height:calc(160 * var(--u))}
  .rsMenu__link[href]:hover{transform:none;opacity:1}
  .rsMenu__en{font-size:calc(28 * var(--u));line-height:1.0714}
  .rsMenu__time{margin-top:calc(3 * var(--u));font-size:calc(13 * var(--u));line-height:1.2}
  .rsMenu__more{margin-top:calc(7 * var(--u));font-size:calc(14 * var(--u));line-height:2}
  .rsMenu__en + .rsMenu__more{margin-top:calc(1 * var(--u))}

  /* 横長の写真（Y 2288） */
  .rsWide{margin:calc(59 * var(--u)) auto 0}
  .rsWide img{height:calc(200 * var(--u));object-fit:cover}

  /* ENJOY GUBIGABU（赤背景・Y 2488） */
  .rsEnjoy{margin-top:0;padding:calc(38 * var(--u)) 0 calc(42 * var(--u))}
  .rsEnjoy__ja{font-size:calc(16 * var(--u));line-height:1.75}
  .rsEnjoy__en{
    margin:calc(1 * var(--u)) auto 0;
    width:calc(300 * var(--u));
    font-size:calc(55 * var(--u));line-height:1;
  }

  .rsCard{width:calc(335 * var(--u));border-radius:calc(20 * var(--u))}
  .rsCard--a{height:calc(1187 * var(--u));margin-top:calc(19 * var(--u))}
  .rsCard--b{height:calc(886 * var(--u));margin-top:calc(30 * var(--u))}
  .rsCard--c{height:calc(1208 * var(--u));margin-top:calc(30 * var(--u))}
  /* 背景の大きな英字は SP デザインに無い */
  .rsCard__wm{display:none}

  .rsCard__en{font-size:calc(55 * var(--u));line-height:1.4182}
  /* 大きい頭文字で行の高さが膨らまないよう、ここだけ行送りを切る。
     それでも inline-block のぶん膨らむので、1行目の高さは決め打ちにする */
  .rsCard__en b{font-size:calc(80 / 55 * 1em);line-height:1}
  .rsCard__l1{height:calc(78 * var(--u))}
  /* 2行目はもう少し上へ（手で詰めたぶんを --u 基準に直したもの） */
  .rsCard__l2{margin-top:calc(-8 * var(--u))}
  .rsCard--a .rsCard__en{left:calc(23 * var(--u));top:calc(6 * var(--u));--in2:calc(99 * var(--u))}
  .rsCard--b .rsCard__en{left:calc(23 * var(--u));top:calc(6 * var(--u));--in2:calc(132 * var(--u))}
  .rsCard--c .rsCard__en{left:calc(23 * var(--u));top:calc(6 * var(--u));--in2:calc(85 * var(--u))}
  .rsCard__ja{font-size:calc(18 * var(--u));line-height:2.2222}
  .rsCard--a .rsCard__ja{left:calc(23 * var(--u));top:calc(140 * var(--u))}
  .rsCard--b .rsCard__ja{left:calc(23 * var(--u));top:calc(144 * var(--u))}
  .rsCard--c .rsCard__ja{left:calc(23 * var(--u));top:calc(140 * var(--u))}

  /* 料理は写真と名前のひと組。SP は1列なので、組ごと縦に並ぶ */
  .rsDish__set{width:calc(290 * var(--u));height:auto;left:calc(23 * var(--u))}
  .rsDish__set--a1{top:calc(196 * var(--u))}
  .rsDish__set--a2{top:calc(519 * var(--u))}
  .rsDish__set--a3{top:calc(842 * var(--u))}
  .rsDish__set--b1{top:calc(200 * var(--u))}
  .rsDish__set--b2{top:calc(539 * var(--u))}
  .rsDish__set--c1{top:calc(196 * var(--u))}
  .rsDish__set--c2{top:calc(531 * var(--u))}
  .rsDish__set--c3{top:calc(866 * var(--u))}
  .rsDish__ph{
    width:calc(290 * var(--u));height:calc(234.559 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .rsDish__set img{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .rsDish{left:calc(25 * var(--u));top:calc(246 * var(--u))}
  .rsDish__ttl{font-size:calc(18 * var(--u));line-height:1.5556}
  .rsDish__ttl::before{
    left:calc(-23 * var(--u));top:calc(9 * var(--u));
    width:calc(15 * var(--u));height:calc(13 * var(--u));
  }
  .rsDish__sub{
    margin-top:calc(3 * var(--u));
    width:calc(264 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.3571;
    white-space:normal;
  }

  /* DINING SPACE（Y 6109）─ 3つ並びから横スワイプへ */
  .rsSpace{padding:calc(42 * var(--u)) 0 calc(55 * var(--u))}
  .rsSpace__ja{font-size:calc(16 * var(--u));line-height:1.75}
  .rsSpace__en{
    margin:calc(8 * var(--u)) auto 0;
    width:calc(240 * var(--u));
    font-size:calc(55 * var(--u));line-height:1;
  }
  .rsSpace__sub{margin-top:calc(3 * var(--u));font-size:calc(14 * var(--u));line-height:2}
  .rsSpace__list{
    display:flex;
    /* PC のセンター揃えのままだと、あふれたぶんが左に隠れてしまう */
    justify-content:flex-start;
    gap:calc(16 * var(--u));
    padding-inline:calc(38 * var(--u));
    margin-top:calc(7 * var(--u));
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .rsSpace__list::-webkit-scrollbar{display:none}
  .rsSpace__item{flex:0 0 calc(300 * var(--u));scroll-snap-align:center}
  .rsSpace__ph{
    width:calc(300 * var(--u));height:calc(210 * var(--u));
    border-radius:calc(10 * var(--u));
  }
  .rsSpace__ph img{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .rsSpace__ttl{margin-top:calc(20 * var(--u));font-size:calc(22 * var(--u));line-height:1.2727}
  .rsSpace__cap{margin-left:calc(10 * var(--u));font-size:calc(14 / 22 * 1em)}
  .rsSpace__tx{margin-top:calc(7 * var(--u));font-size:calc(14 * var(--u));line-height:1.7857}
  .rsSpace .spDots{position:static;margin-top:calc(24 * var(--u));color:var(--red)}

  /* 写真背景のご予約（Y 6726・共通パーツ）。
     PC は位置を手で合わせているが、SP は枠が低いので cover で敷き直す */
  .rsBook--photo{height:calc(290 * var(--u))}
  .rsBook__bg img{
    left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  /* レストランだけ、上に少し間がある */
  .rs .rsLink{margin-top:calc(38 * var(--u))}
  .rsBook--photo{margin-top:0}
  .rsBook--photo .rsBook__ttl{
    padding-top:calc(35 * var(--u));
    font-size:calc(24 * var(--u));line-height:2;
  }
  .rsBook--photo .rsBook__tel{margin-top:calc(6 * var(--u));font-size:calc(37 * var(--u))}
  .rsBook--photo .rsBook__hours{
    margin-top:calc(1 * var(--u));
    font-size:calc(13 * var(--u));line-height:3.6923;
  }
  .rsBook--photo .rsBook__btn{
    margin:calc(16 * var(--u)) auto 0;
    width:calc(230 * var(--u));height:calc(60 * var(--u));
    font-size:calc(18 * var(--u));
  }
}

/* ------------------------------------------------------------
   スモーク（SP）
   ------------------------------------------------------------ */

@media (max-width:899px){

  .smHero__ph img{height:calc(230 * var(--u));object-fit:cover}

  /* 導入（Y 274 ＝ パンくずの下） */
  .smIntro{margin-top:calc(3.6 * var(--u));height:calc(708 * var(--u))}
  .smIntro__ttl{top:calc(28 * var(--u));font-size:calc(23 * var(--u));line-height:1.6087}
  .smIntro__mark{top:calc(56 * var(--u));font-size:calc(45 * var(--u));line-height:1.7778}
  .smIntro__lead{
    left:50%;right:auto;top:calc(137 * var(--u));
    width:calc(334 * var(--u));translate:-50% 0;
    font-size:calc(16 * var(--u));line-height:1.875;
  }
  .smIntro__ph1{
    left:calc(20 * var(--u));top:calc(285 * var(--u));
    width:calc(284.146 * var(--u));height:calc(190.91 * var(--u));
  }
  .smIntro__ph2{
    left:calc(183.64 * var(--u));top:calc(493.45 * var(--u));
    width:calc(170.91 * var(--u));height:calc(189.092 * var(--u));
  }
  .smIntro__deco{width:calc(183.205 * var(--u));height:auto}
  .smIntro__deco--r{left:calc(184 * var(--u));top:calc(113 * var(--u));right:auto}
  .smIntro__deco--l{left:calc(32 * var(--u));top:calc(452 * var(--u))}

  /* 共通バナーはスモークだけ位置が違う（Y 982） */
  .sm .smWays{height:calc(556 * var(--u))}
  .sm .smWays__ttl{top:0}
  .sm .smWays__list{top:calc(88 * var(--u))}

  /* ENJOY SMOKE（赤背景・Y 1538） */
  /* 見出しは絶対配置の箱の中で流し込み。間隔は margin で決める */
  .smEnjoy{height:calc(4385 * var(--u))}
  .smEnjoy__ja{margin-top:calc(38 * var(--u));font-size:calc(16 * var(--u));line-height:1.75}
  .smEnjoy__en{
    margin:calc(8 * var(--u)) auto 0;
    width:calc(300 * var(--u));
    font-size:calc(55 * var(--u));line-height:1;
  }
  .smEnjoy__sub{margin-top:calc(3 * var(--u));font-size:calc(14 * var(--u));line-height:2}

  /* BEER / FOOD の2ブロック */
  .smTopic--beer{top:calc(233 * var(--u))}
  .smTopic--food{top:calc(1831 * var(--u))}
  .smTopic{height:calc(420 * var(--u))}
  .smTopic__ph{
    left:0;top:0;
    width:calc(343 * var(--u));height:calc(218.273 * var(--u));
    border-radius:0 calc(20 * var(--u)) calc(20 * var(--u)) 0;
  }
  .smTopic__wm{top:calc(175 * var(--u));font-size:calc(130 * var(--u));line-height:1}
  .smTopic--beer .smTopic__wm{left:calc(29 * var(--u))}
  .smTopic--food .smTopic__wm{left:calc(4 * var(--u))}
  .smTopic__ttl{
    left:calc(20 * var(--u));top:calc(249 * var(--u));
    font-size:calc(24 * var(--u));line-height:1.4583;
  }
  .smTopic__tx{
    left:calc(20 * var(--u));top:calc(330 * var(--u));
    width:calc(334 * var(--u));
    font-weight:500;
    font-size:calc(16 * var(--u));line-height:1.875;
  }
  .smTopic--food .smTopic__tx{top:calc(328 * var(--u))}

  /* 商品（白いカード・Y 2245） */
  .smProd{
    left:calc(20 * var(--u));top:calc(707 * var(--u));
    width:calc(335 * var(--u));height:calc(1077 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  /* 背景の大きな英字は SP デザインに無い */
  .smProd__wm{display:none}
  .smProd__item--a .smProd__circle{left:calc(23 * var(--u));top:calc(243 * var(--u));width:calc(290 * var(--u));height:calc(290 * var(--u))}
  .smProd__item--b .smProd__circle{left:calc(23 * var(--u));top:calc(669 * var(--u));width:calc(290 * var(--u));height:calc(290 * var(--u))}
  .smProd__item--a .smProd__ph{left:calc(84 * var(--u));top:calc(28 * var(--u));width:calc(167 * var(--u))}
  .smProd__item--b .smProd__ph{left:calc(90 * var(--u));top:calc(538 * var(--u));width:calc(158.229 * var(--u))}
  .smProd__tx{text-align:center}
  .smProd__item--a .smProd__tx{left:calc(63 * var(--u));top:calc(359 * var(--u));width:calc(210 * var(--u))}
  .smProd__item--b .smProd__tx{left:calc(63 * var(--u));top:calc(785 * var(--u));width:calc(210 * var(--u))}
  .smProd__ttl{font-size:calc(22 * var(--u));line-height:1.3636}
  .smProd__body{margin-top:calc(4 * var(--u));font-size:calc(14 * var(--u));line-height:1.7857}
  .smProd__item--a .smProd__body,
  .smProd__item--b .smProd__body{width:calc(210 * var(--u))}
  .smProd__btn{left:calc(18 * var(--u));top:calc(986 * var(--u))}
  .smBtn{
    width:calc(300 * var(--u));height:calc(60 * var(--u));
    border-radius:calc(100 * var(--u));
    font-size:calc(18 * var(--u));
  }

  /* 使い方（燻製しょうゆ Y 3864／燻製オリーブオイル Y 4903） */
  .smUse--shoyu{top:calc(2326 * var(--u))}
  .smUse--oil{top:calc(3365 * var(--u))}
  .smUse__ttl{font-size:calc(30 * var(--u));line-height:.9333;text-align:left}
  .smUse--shoyu .smUse__ttl{padding-left:calc(94 * var(--u))}
  .smUse--oil .smUse__ttl{padding-left:calc(47 * var(--u))}
  .smUse__lead{
    margin-top:calc(15 * var(--u));
    padding-left:calc(21 * var(--u));
    width:calc(355 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.7857;
    text-align:left;
  }
  .smUse__panel{
    margin-top:calc(17 * var(--u));
    width:calc(345 * var(--u));height:calc(837 * var(--u));
    border-radius:0 calc(20 * var(--u)) calc(20 * var(--u)) 0;
  }
  .smUse--shoyu .smUse__bottle{left:calc(54 * var(--u));top:calc(35 * var(--u));width:calc(114 * var(--u))}
  .smUse--oil .smUse__bottle{left:calc(60 * var(--u));top:calc(35 * var(--u));width:calc(101 * var(--u))}

  /* 縦書きのコピー */
  .smUse__vertSub,
  .smUse__vertMain{font-size:calc(20 * var(--u))}
  .smUse__vertSub b,.smUse__vertSub i,
  .smUse__vertMain b,.smUse__vertMain i{
    left:calc(-7 * var(--u));
    font-size:calc(50 * var(--u));
  }
  .smUse__vertMain i{left:calc(-17 * var(--u))}
  .smUse__vertMain i.is-shift{left:calc(2 * var(--u))}
  .smUse--shoyu .smUse__vertSub{left:calc(268 * var(--u));top:calc(26 * var(--u))}
  .smUse--shoyu .smUse__vertMain{left:calc(200 * var(--u));top:calc(37 * var(--u))}
  .smUse--oil .smUse__vertSub{left:calc(268 * var(--u));top:calc(21 * var(--u))}
  .smUse--oil .smUse__vertMain{left:calc(197 * var(--u));top:calc(69 * var(--u))}

  /* スライダー。枠より写真が広いので、左右の隣が重なって見切れる */
  .smSlider{
    left:0;top:calc(377 * var(--u));
    width:calc(345 * var(--u));height:calc(330 * var(--u));
  }
  .smSlider__track{
    gap:calc(16 * var(--u));
    transform:translateX(calc((71 - var(--n, 1) * 250) * var(--u)));
  }
  .smSlider__item{width:calc(234 * var(--u))}
  .smSlider__ph{
    width:calc(234 * var(--u));height:calc(260 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .smSlider__ttl{
    margin:calc(3 * var(--u)) 0 0;
    width:calc(234 * var(--u));height:calc(45 * var(--u));
    font-size:calc(20 * var(--u));line-height:2.25;
  }
  .smSlider__tx{
    width:calc(234 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.4286;
    white-space:normal;
  }
  .smSlider__nav{
    top:calc(105 * var(--u));
    width:calc(49 * var(--u));height:calc(49 * var(--u));
  }
  .smSlider__nav--prev{left:calc(36 * var(--u))}
  .smSlider__nav--next{left:calc(287 * var(--u))}
  .smSlider__nav img{width:calc(12 * var(--u))}
  .smUse__btn{left:calc(38 * var(--u))}
  .smUse--shoyu .smUse__btn{top:calc(740 * var(--u))}
  .smUse--oil .smUse__btn{top:calc(740 * var(--u))}

  /* レストラン（白いカード・Y 5979） */
  .smRest{height:calc(1624 * var(--u))}
  .smRest::before{
    left:calc(20 * var(--u));top:calc(56 * var(--u));
    width:calc(335 * var(--u));height:calc(1538 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .smRest__ja{top:calc(83 * var(--u));font-size:calc(16 * var(--u));line-height:1.75}
  .smRest__en{
    left:50%;right:auto;top:calc(134 * var(--u));
    width:calc(290 * var(--u));translate:-50% 0;
    font-size:calc(55 * var(--u));line-height:0.9;
  }
  .smRest__list{
    position:absolute;left:calc(43 * var(--u));top:calc(246 * var(--u));
    display:block;
  }
  .smRest__item + .smRest__item{margin-top:calc(25 * var(--u))}
  .smRest__ph{width:calc(290 * var(--u));height:calc(290 * var(--u));border-radius:calc(20 * var(--u))}
  .smRest__ttl{margin-top:calc(4 * var(--u));font-size:calc(18 * var(--u));line-height:2.5}
  .smRest__tx{
    margin-top:calc(-6 * var(--u));
    width:calc(290 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.7857;
  }
  .smRest__btn{left:calc(38 * var(--u));top:calc(1510 * var(--u))}

  /* SHOP（白いカード・Y 7547） */
  .smShop{height:calc(807 * var(--u))}
  .smShop::before{
    left:calc(20 * var(--u));top:0;
    width:calc(335 * var(--u));height:calc(760 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .smShop__ja{top:calc(27 * var(--u));font-size:calc(16 * var(--u));line-height:1.75}
  .smShop__en{top:calc(63 * var(--u));font-size:calc(55 * var(--u));line-height:1}
  .smShop__lead{
    left:50%;right:auto;top:calc(125 * var(--u));
    width:calc(290 * var(--u));translate:-50% 0;
    font-size:calc(14 * var(--u));line-height:1.7857;
  }
  .smShop__ph{
    left:calc(43 * var(--u));top:calc(242 * var(--u));
    width:calc(290 * var(--u));height:calc(227.857 * var(--u));
    border-radius:calc(20 * var(--u));
  }
  .smShop__info{left:calc(43 * var(--u));top:calc(488 * var(--u))}
  .smShop__name{font-size:calc(24 * var(--u));line-height:1.25}
  .smShop__addr{margin-top:calc(6 * var(--u));font-size:calc(16 * var(--u));line-height:1.4375}
  .smShop__fax{margin-top:calc(4 * var(--u));font-size:calc(16 * var(--u));line-height:1.4375}
  .smShop__meta{margin-top:calc(13 * var(--u));font-size:calc(14 * var(--u));line-height:1.7857}
  .smShop__meta li{padding-left:calc(28 * var(--u))}
  .smShop__meta--clock::before{top:calc(3 * var(--u));width:calc(19.44 * var(--u));height:calc(19.44 * var(--u))}
  .smShop__meta--cal::before{top:calc(7 * var(--u));width:calc(19.376 * var(--u));height:calc(14.152 * var(--u))}
  .smShop__meta--car::before{top:calc(6 * var(--u));width:calc(19.44 * var(--u));height:calc(15.214 * var(--u))}
  .smShop__map{
    margin-top:calc(25 * var(--u));
    width:calc(151 * var(--u));height:calc(36 * var(--u));
    font-size:calc(15 * var(--u));
  }

  .sm .rsLink{margin-top:0}
}

/* ==========================================================
   スモーク：英語表示（GTranslate）のときだけの調整
   Google 翻訳が効くと html に .translated-ltr が付く。
   日本語の見た目・アニメーションには一切触らない
   ========================================================== */
/* 和文の位置で入れた改行は、英文では文の途中に来てしまうので外す */
.translated-ltr .smTopic__ttl br,
.translated-ltr .smTopic__tx br,
.translated-ltr .smProd__body br{display:none}

.translated-ltr .smTopic__ttl{
  width:calc(560 * var(--u));
  font-size:calc(32 * var(--u));
  line-height:1.4;letter-spacing:.02em;
  white-space:normal;
}
.translated-ltr .smTopic__tx{line-height:2;letter-spacing:.02em}

/* 赤丸の中に収める */
.translated-ltr .smProd__ttl{font-size:calc(30 * var(--u));line-height:1.25;letter-spacing:.02em}
.translated-ltr .smProd__body{font-size:calc(16 * var(--u));line-height:1.6;letter-spacing:.02em}
.translated-ltr .smProd__item--b .smProd__body{width:calc(250 * var(--u))}
.translated-ltr .smProd__item--b .smProd__tx{top:calc(400 * var(--u))}
.translated-ltr .smProd__item--b .smProd__ttl{width:calc(240 * var(--u))}

.translated-ltr .smSlider__tx{
  font-size:calc(15 * var(--u));
  line-height:1.5;letter-spacing:.02em;
  white-space:normal;
}

/* 住所が長いので、白いカードの右端で折り返す */
.translated-ltr .smShop__info{width:calc(600 * var(--u))}
.translated-ltr .smShop__name{line-height:1.2}

@media (max-width:899px){
  .translated-ltr .smEnjoy__ja{
    margin-top:calc(24 * var(--u));
    padding:0 calc(20 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.5;
  }

  .translated-ltr .smTopic__ttl{
    width:calc(335 * var(--u));
    font-size:calc(18 * var(--u));line-height:1.4;
  }
  .translated-ltr .smTopic__tx{font-size:calc(14 * var(--u));line-height:1.7}

  /* 写真の下端から赤丸の下端までに収める */
  .translated-ltr .smProd__item--a .smProd__tx{top:calc(355 * var(--u))}
  .translated-ltr .smProd__item--b .smProd__tx{top:calc(775 * var(--u))}
  .translated-ltr .smProd__ttl,
  .translated-ltr .smProd__item--b .smProd__ttl{width:auto;font-size:calc(18 * var(--u));line-height:1.3}
  .translated-ltr .smProd__body{font-size:calc(14 * var(--u));line-height:1.45}
  .translated-ltr .smProd__item--a .smProd__body,
  .translated-ltr .smProd__item--b .smProd__body{width:calc(220 * var(--u));margin-inline:calc(-5 * var(--u))}

  /* 見出しを折り返せるようにし、そのぶん枠を少し伸ばす（下のボタンにはかからない） */
  .translated-ltr .smSlider{height:calc(360 * var(--u))}
  .translated-ltr .smSlider__ttl{
    margin-top:calc(8 * var(--u));
    height:auto;
    font-size:calc(16 * var(--u));line-height:1.4;
    white-space:normal;
  }
  .translated-ltr .smSlider__tx{
    margin-top:calc(4 * var(--u));
    font-size:calc(13 * var(--u));line-height:1.4;
  }

  .translated-ltr .smRest__ja{
    top:calc(80 * var(--u));
    padding:0 calc(40 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.4;
  }
  .translated-ltr .smRest__ttl{width:calc(290 * var(--u));margin-top:calc(8 * var(--u));line-height:1.4}
  .translated-ltr .smRest__tx{margin-top:calc(4 * var(--u));font-size:calc(13 * var(--u));line-height:1.6}
  /* 3品目の説明がボタンにかからないよう、カードとボタンを少し下げる */
  .translated-ltr .smRest{height:calc(1664 * var(--u))}
  .translated-ltr .smRest::before{height:calc(1578 * var(--u))}
  .translated-ltr .smRest__btn{top:calc(1550 * var(--u))}

  .translated-ltr .smShop__ja{
    top:calc(18 * var(--u));
    padding:0 calc(40 * var(--u));
    font-size:calc(13 * var(--u));line-height:1.35;
  }
  .translated-ltr .smShop__lead{font-size:calc(13 * var(--u));line-height:1.6}
  .translated-ltr .smShop__info{width:calc(290 * var(--u))}
  .translated-ltr .smShop__name{font-size:calc(20 * var(--u))}
  .translated-ltr .smShop__addr,
  .translated-ltr .smShop__fax{font-size:calc(14 * var(--u))}
  .translated-ltr .smShop__meta{font-size:calc(13 * var(--u))}
  /* 英文は行数が増えるので、カードだけ少し伸ばす */
  .translated-ltr .smShop{height:calc(847 * var(--u))}
  .translated-ltr .smShop::before{height:calc(800 * var(--u))}
}

/* ==========================================================
   英語表示（GTranslate）共通
   1文字ずつ出す和文見出し（.chars）は、JS が隣に置く翻訳用の控え（.trTx）に差し替える。
   日本語表示では控えは出さない
   ========================================================== */
/* 控えの display は元の見出しのクラスのものをそのまま使う（英語表示では何も上書きしない） */
html:not(.translated-ltr) .trTx{display:none}
.translated-ltr .hasTr{display:none}

/* 英語表示（共通パーツ） */
@media (max-width:899px){
  /* 下に貼りつく2つの入り口。英語は長いので小さく */
  .translated-ltr .tabs__item{font-size:15px}

  /* レストランや、ご自宅でも（ビール／スモーク共通）。3行になってもバナーにかからないように */
  .translated-ltr .smWays__ttl br{display:none}
  .translated-ltr .smWays__ttl{
    top:calc(20 * var(--u));
    width:calc(335 * var(--u));
    font-size:calc(20 * var(--u));line-height:1.35;
  }
  .translated-ltr .smWays__cap{font-size:calc(14 * var(--u))}
}

/* ----------------------------------------------------------
   スモーク：英語表示（追加分）
   ---------------------------------------------------------- */
/* 縦書きコピーは英文も縦に流す。和文と同じ位置の帯に収める */
/* 和文と同じく、ふつうの字と大きい字（b）・大きい薄墨の字（i）で強弱をつける。
   span 1つが縦の1列 */
.translated-ltr .smUse__vertEn{
  inset:auto;
  top:calc(120 * var(--u));left:calc(470 * var(--u));
  writing-mode:vertical-rl;
  font-weight:400;
  font-size:calc(38 * var(--u));
  line-height:1.2;letter-spacing:.03em;
  white-space:nowrap;
}
.translated-ltr .smUse__vertEn span{display:block}
.translated-ltr .smUse__vertEn b,
.translated-ltr .smUse__vertEn i{
  font-style:normal;font-weight:300;
  font-size:calc(90 / 38 * 1em);
  line-height:1;letter-spacing:0;
}
.translated-ltr .smUse__vertEn i{color:#c7c7c7}
@media (max-width:899px){
  .translated-ltr .smIntro__ttl{font-size:calc(20 * var(--u))}
  .translated-ltr .smIntro__mark{font-size:calc(30 * var(--u))}

  .translated-ltr .smUse__vertEn{
    top:calc(28 * var(--u));left:calc(186 * var(--u));
    font-size:calc(18 * var(--u));
  }
  .translated-ltr .smUse__vertEn b,
  .translated-ltr .smUse__vertEn i{font-size:calc(42 / 18 * 1em)}
}

/* ----------------------------------------------------------
   ビール：英語表示
   ---------------------------------------------------------- */
/* FEATURES は本文が長くなるぶん、白いカードを少し伸ばす */
.translated-ltr .beFeat{height:calc(1120 * var(--u))}
.translated-ltr .beFeat__ttl{line-height:1.15}
/* PC で3つ並ぶとき、見出しが1行のものも2行ぶんの高さを取り、本文の書き出しを揃える */
@media (min-width:900px){
  .translated-ltr .beFeat__ttl{
    display:flex;align-items:center;justify-content:center;
    min-height:calc(2 * 1.15em);
  }
}
.translated-ltr .beFac__tx{line-height:1.8;letter-spacing:.02em}
.translated-ltr .beFac__note{width:calc(520 * var(--u))}

/* 製造工程。工程名が2行になるので、カードを少し伸ばして文章を詰める */
.translated-ltr .beStep__item{height:calc(670 * var(--u))}
.translated-ltr .beStep__name{
  top:calc(440 * var(--u));left:calc(20 * var(--u));right:calc(20 * var(--u));
  font-size:calc(24 * var(--u));line-height:1.3;letter-spacing:.02em;
}
.translated-ltr .beStep__tx{
  top:calc(505 * var(--u));left:calc(32 * var(--u));
  width:calc(330 * var(--u));
  line-height:1.65;letter-spacing:.02em;
}
.translated-ltr .beAccess{top:calc(4403 * var(--u))}
.translated-ltr .beFood{height:calc(5160 * var(--u))}

/* ACCESS。白いカードの右端で折り返す */
.translated-ltr .beAccess__info{width:calc(410 * var(--u))}
.translated-ltr .beAccess__name{
  font-size:calc(30 * var(--u));line-height:1.2;
  white-space:normal;
}
.translated-ltr .beAccess__addr,
.translated-ltr .beAccess__fax{font-size:calc(20 * var(--u))}
.translated-ltr .beAccess__meta{font-size:calc(15 * var(--u));line-height:1.8}

@media (max-width:899px){
  /* リードの下に少し余白。4種のカードから下をそのぶん下げる */
  .translated-ltr .beIntro{height:calc(747 * var(--u))}
  .translated-ltr .beList{top:calc(319 * var(--u))}
  .translated-ltr .beIntro .spDots{top:calc(676 * var(--u))}

  .translated-ltr .beSet__ttl{font-size:calc(20 * var(--u));line-height:1.4}
  .translated-ltr .beSet__tx{top:calc(80 * var(--u));font-size:calc(13 * var(--u));line-height:1.6}

  .translated-ltr .beFood__ttl{
    width:calc(330 * var(--u));
    font-size:calc(22 * var(--u));line-height:1.3;
  }
  .translated-ltr .beFood__lead br{display:none}
  .translated-ltr .beFood__lead{
    width:calc(335 * var(--u));
    font-size:calc(13.5 * var(--u));line-height:1.6;
  }

  /* FEATURES。本文が長いので白いカードを 70 伸ばし、下に続く醸造所〜ACCESS も同じだけ下げる */
  .translated-ltr .beFeat{height:calc(690 * var(--u))}
  .translated-ltr .beFeat .spDots{top:calc(650 * var(--u))}
  .translated-ltr .beFeat__ja{
    top:calc(24 * var(--u));
    padding:0 calc(20 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.4;
  }
  .translated-ltr .beFeat__ttl{font-size:calc(20 * var(--u))}
  .translated-ltr .beFeat__tx{font-size:calc(13 * var(--u));line-height:1.6}

  .translated-ltr .beFac{top:calc(1359 * var(--u))}
  .translated-ltr .beFac__ja{
    top:calc(-12 * var(--u));
    padding:0 calc(20 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.35;
  }
  .translated-ltr .beFac__tx{font-size:calc(14 * var(--u));line-height:1.7}

  /* 製造工程。カードを 40 伸ばす */
  .translated-ltr .beStep{top:calc(2058 * var(--u))}
  .translated-ltr .beStep__item{height:calc(454 * var(--u))}
  .translated-ltr .beStep .spDots{top:calc(474 * var(--u))}
  .translated-ltr .beStep__name,
  .translated-ltr .beStep__item:nth-child(4) .beStep__name{
    top:calc(266 * var(--u));left:calc(12 * var(--u));right:calc(12 * var(--u));
    font-size:calc(18 * var(--u));line-height:1.3;
  }
  .translated-ltr .beStep__tx{
    top:calc(318 * var(--u));left:calc(15 * var(--u));
    width:calc(230 * var(--u));
    font-size:calc(12.5 * var(--u));line-height:1.55;
  }

  /* ACCESS。カードを 50 伸ばす */
  .translated-ltr .beAccess{top:calc(2513 * var(--u))}
  .translated-ltr .beAccess__card{height:calc(500 * var(--u))}
  .translated-ltr .beAccess__info{width:calc(280 * var(--u))}
  .translated-ltr .beAccess__name{font-size:calc(20 * var(--u))}
  .translated-ltr .beAccess__addr,
  .translated-ltr .beAccess__fax{font-size:calc(14 * var(--u))}
  .translated-ltr .beAccess__meta{font-size:calc(13 * var(--u));line-height:1.7}
  .translated-ltr .beFood{height:calc(3158 * var(--u))}
}

/* ----------------------------------------------------------
   レストラン：英語表示
   ---------------------------------------------------------- */
.translated-ltr .rsIntro__ttl{
  margin-inline:auto;
  width:calc(1400 * var(--u));
  font-size:calc(44 * var(--u));line-height:1.5;
}
/* 控えは組みごと写してあるので GUBI／GABU の太く大きい字はそのまま。改行だけ英文に任せる */
.translated-ltr .rsIntro__ttl br{display:none}
.translated-ltr .rsIntro__ttl b{line-height:1}

/* ご予約カード（上）。右半分は文が長いので、店名を2段にして下へ順に詰める */
.translated-ltr .rsBook__card .rsBook__hours{
  padding:0 calc(40 * var(--u));
  font-size:calc(14 * var(--u));line-height:1.6;
}
.translated-ltr .rsBook__shop{top:calc(45 * var(--u))}
.translated-ltr .rsBook__shopSm,
.translated-ltr .rsBook__shopLg{display:block;margin-left:0}
.translated-ltr .rsBook__shopSm{font-size:calc(20 * var(--u));line-height:1.3}
.translated-ltr .rsBook__shopLg{font-size:calc(28 * var(--u));line-height:1.2}
.translated-ltr .rsBook__addr{
  top:calc(115 * var(--u));
  width:calc(490 * var(--u));
  font-size:calc(17 * var(--u));line-height:1.4;
}
.translated-ltr .rsBook__meta{
  top:calc(172 * var(--u));
  width:calc(460 * var(--u));
  font-size:calc(14 * var(--u));line-height:1.6;
}
.translated-ltr .rsBook__map{left:calc(701.5 * var(--u));top:calc(255 * var(--u))}

/* 料理名と説明は折り返す */
.translated-ltr .rsDish__ttl{
  width:calc(630 * var(--u));
  font-size:calc(30 * var(--u));line-height:1.25;
  white-space:normal;
}
.translated-ltr .rsDish__ttl::before{top:calc(4 * var(--u))}
.translated-ltr .rsDish__sub{
  margin-top:calc(12 * var(--u));
  width:calc(630 * var(--u));
  font-size:calc(18 * var(--u));
  white-space:normal;
}

@media (max-width:899px){
  .translated-ltr .rsIntro__ttl{
    width:calc(335 * var(--u));
    white-space:normal;
    font-size:calc(22 * var(--u));line-height:1.45;letter-spacing:.02em;
  }

  .translated-ltr .rsBook__card{height:calc(575 * var(--u))}
  .translated-ltr .rsBook__card .rsBook__hours{padding:0 calc(15 * var(--u));font-size:calc(12 * var(--u))}
  .translated-ltr .rsBook__shop{top:calc(215 * var(--u))}
  .translated-ltr .rsBook__shopSm{font-size:calc(17 * var(--u))}
  .translated-ltr .rsBook__shopLg{font-size:calc(23 * var(--u))}
  .translated-ltr .rsBook__addr{
    top:calc(282 * var(--u));
    width:calc(280 * var(--u));
    font-size:calc(14 * var(--u));line-height:1.4;
  }
  .translated-ltr .rsBook__meta{
    top:calc(360 * var(--u));
    width:calc(250 * var(--u));
    font-size:calc(12.5 * var(--u));line-height:1.6;
  }
  .translated-ltr .rsBook__meta li + li{margin-top:calc(4 * var(--u))}
  .translated-ltr .rsBook__map{left:calc(28 * var(--u));top:calc(509 * var(--u))}

  .translated-ltr .rsBook--photo .rsBook__hours{padding:0 calc(15 * var(--u))}

  /* 料理カード。英文は行数が読めないので、座標で置かずに上から順に積む */
  .translated-ltr .rsCard{height:auto;padding:calc(196 * var(--u)) 0 calc(30 * var(--u))}
  .translated-ltr .rsCard--b{padding-top:calc(200 * var(--u))}
  .translated-ltr .rsCard__ja{width:calc(290 * var(--u));font-size:calc(15 * var(--u));line-height:1.5}
  .translated-ltr .rsDish__set{position:relative;left:auto;top:auto;margin-left:calc(23 * var(--u))}
  .translated-ltr .rsDish__set + .rsDish__set{margin-top:calc(25 * var(--u))}
  .translated-ltr .rsDish__ph{position:relative}
  .translated-ltr .rsDish{position:static;margin-top:calc(12 * var(--u));padding-left:calc(25 * var(--u))}
  .translated-ltr .rsDish__ttl{width:calc(264 * var(--u));font-size:calc(16 * var(--u));line-height:1.35}
  .translated-ltr .rsDish__ttl::before{top:calc(5 * var(--u))}
  .translated-ltr .rsDish__sub{margin-top:calc(4 * var(--u));width:calc(264 * var(--u));font-size:calc(13 * var(--u));line-height:1.45}
}
@media (max-width:899px){
  .translated-ltr .beFac__note{width:calc(334 * var(--u))}
  .translated-ltr .smUse__ttl{padding-left:calc(21 * var(--u))}
}

/* ----------------------------------------------------------
   TOP・フッター：英語表示
   ---------------------------------------------------------- */

.translated-ltr .ec__lead{font-size:clamp(12px, 1vw, 19px);line-height:1.8;letter-spacing:.02em}

/* 山本屋。縦書きは英文だと長いので小さく、字間を詰める */
.translated-ltr .ryokan__vt{letter-spacing:.05em}
.translated-ltr .ryokan__vt--lg{font-size:clamp(14px, 1.04vw, 20px)}
.translated-ltr .ryokan__vt--sm{font-size:clamp(12px, .89vw, 17px)}
.translated-ltr .ryokan__info{width:30%}
.translated-ltr .ryokan__btns a{
  padding:0 8px;
  font-size:clamp(11px, .68vw, 13px);line-height:1.3;
  text-align:center;
}

/* フッターの店舗住所。隣のロゴの手前で折り返す */
.translated-ltr .ft__place--1{width:12%}
.translated-ltr .ft__place--2{width:15%}

@media (max-width:899px){
  .translated-ltr .concept__lead{line-height:2.2}

  .translated-ltr .ec__lead{
    font-size:min(3.7vw, 14px);
    white-space:normal;
  }

  .translated-ltr .ryokan__vt--lg,
  .translated-ltr .ryokan__vt--sm{font-size:min(3.6vw, 18px)}
  .translated-ltr .ryokan__info{width:auto}
  .translated-ltr .ryokan__addr{font-size:min(3.6vw, 19px)}
  .translated-ltr .ryokan__tel{font-size:min(3.4vw, 17px)}
  .translated-ltr .ryokan__btns a{font-size:min(3.2vw, 16px)}

}

/* ビールの詳細ポップアップ：英語表示。本文が長いので、下のボタンが枠からはみ出さないよう詰める（PC のみ） */
@media (min-width:900px){
  .translated-ltr .beModal__desc{font-size:calc(18 * var(--u));line-height:1.8;letter-spacing:.02em}
  .translated-ltr .beModal__buy{margin-top:calc(40 * var(--u))}
}
.translated-ltr .beModal__foodTx{letter-spacing:.02em}
@media (max-width:899px){
  .translated-ltr .beModal__foodTtl{line-height:1.4;padding-bottom:calc(6 * var(--u))}
}

/* 飲み比べセットの赤い箱（PC）：英語表示では見出しも本文・ボタンと同じく中央揃えに */
@media (min-width:900px){
  .translated-ltr .beSet__ttl{left:0;right:0;text-align:center}
  .translated-ltr .beSet__tx{padding:0 calc(40 * var(--u))}
}

/* 英語表示・SP の個別調整 */
@media (max-width:899px){
  .translated-ltr .rsBook__card .rsBook__btn{top:calc(138 * var(--u))}
  .translated-ltr .rsBook--photo .rsBook__hours{line-height:2}
  .translated-ltr .smUse--shoyu .smUse__vertEn{
    top:calc(49 * var(--u));left:calc(173 * var(--u));
    font-size:calc(18 * var(--u));
    line-height:2.25;
  }
  /* メニューを開いたときの下のバーも、ページ側の追従バー（.tabs）と同じ見た目に */
  .translated-ltr .menu__bar-shop,
  .translated-ltr .menu__bar-book{font-size:15px}
}

/* 英語表示・PC の個別調整 */
@media (min-width:900px){
  .translated-ltr .beFeat__tx{letter-spacing:0}
  /* 工程名と本文の間を詰める（カードの高さはそのまま） */
  .translated-ltr .beStep__tx{top:calc(482 * var(--u))}
}

/* SHOP（スモーク・PC）：英語は情報の行数が増えるので、写真の上下中央に情報の中心を合わせる（日本語と同じ並び） */
@media (min-width:900px){
  .translated-ltr .smShop__info{top:calc((427 + 550 / 2) * var(--u));translate:0 -50%}
}

/* TOP（PC）：英語は文章の行数が増えるので、写真の上下中央に文章の中心を合わせる */
@media (min-width:900px){
  .translated-ltr .rest__tx{top:50%;translate:0 -50%}
  /* 写真の中心 = top .2761w ＋ 高さ（幅 45.31% × 650/870）の半分 */
  .translated-ltr .smoke__tx{top:calc((.2761 + .4531 * 650 / 870 / 2) * var(--w));translate:0 -50%}

  /* 山本屋の縦書き「Kinosaki's / charming / atmosphere」を1語ずつ3列に */
  .translated-ltr .ryokan__vt--lg{inline-size:min-content}
  /* 3列になって幅が増えたぶん、ロゴと店舗情報の間の中央に2本をまとめて置き直す */
  .translated-ltr .ryokan__vt--lg{left:42.29%}
  .translated-ltr .ryokan__vt--sm{left:39.64%}
}
@media (max-width:899px){
  /* TOP のコピー：最後の「.」だけが次の行に落ちないよう、少し小さくして字間を詰める。
     和文用の改行は英文では空行になるだけなので外す。対応ブラウザでは1語だけの行も避ける */
  /* 「smoked」は「燻製」の倍の幅があり、そのままだと大きい S にかかるので少し小さく */
  .translated-ltr .smoke__ttl.trTx .smoke__ruby{font-size:6vw}
  .translated-ltr .rest__ttl.trTx .rest__ruby{top:0.5em}
  /* 日本語側は1文字ずつ inline-block（行送り1）に包まれていて、大きい頭文字の行の高さが保たれている。
     英語の控えは包まれていないので、頭文字だけ同じ組みにして位置を揃える */
  .translated-ltr .rest__ttl.trTx .rest__big,
  .translated-ltr .smoke__ttl.trTx .smoke__big{display:inline-block;line-height:1}
  /* 「beer.」だけが次の行に落ちないよう、少しだけ小さく */
  .translated-ltr .concept__ttl{font-size:min(6.9vw, 34px)}
  .translated-ltr .concept__lead{font-size:15.5px;letter-spacing:0;text-wrap:pretty}
  .translated-ltr .concept__lead br{display:none}

}