/* 青山Indigo のHPの見た目（当社が書いたもの）。全ページでこの1本だけを読む。
   並び：色と大きさの決まり → 素の要素 → ページの枠（ヘッダー・メニュー・フッター・TO TOP）→ 共通の部品
   → 下層ページの部品 → トップの各欄 → 指し示したとき → 動き。
   幅の区切り：1000px以下がタブレット・スマホ、680px以下がスマホ。マウスの指し示し（hover）は1000px以上だけ。
   書き方：幅で変わる値は、部品ごとに頭で変数（--〇〇）にまとめ、幅の区切りではその変数だけを替える。
   部品の規則には幅の区切りを書かないので、1つの部品の幅ごとの違いは、その部品の頭を見れば分かる。 */

/* ===== 色と大きさの決まり ===== */

:root {
  /* 店のロゴの紺と朱。紺の地の上の小さな飾りは、ロゴの橙にする */
  --navy: #243262;
  --vermilion: #d64a14;
  --amber: #f0a030;
  /* 文字・細い線・紙の地・白 */
  --ink: #232315;
  --muted: #5c5c5c;
  --hairline: rgba(35, 35, 21, 0.1);
  --paper: #f9f7ef;
  --paper-deep: #f1eee4;
  --bright: #fff;
  /* 小見出しの線や英字の飾りの色。紺の地の上では --amber に替える */
  --accent: var(--vermilion);
  /* 紺の地と紙の地の模様（当社が作った画像） */
  --navy-cloth: var(--navy) url(/image/common/bg.webp) 0 0 / 250px auto repeat;

  /* 書体：英字は Poppins・Marcellus・Lobster（Google Fonts）。
     日本語の角ゴシックは、Mac はヒラギノ角ゴ Pro、iPhone はヒラギノ角ゴシック（Hiragino Sans）、Windows は游ゴシックの中太（なければメイリオ）、
     Android は端末の標準。明朝は、Mac と Windows は游明朝、iPhone はヒラギノ明朝、Android は端末の標準 */
  --font-gothic: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-mincho: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-base: "Poppins", var(--font-gothic);
  --font-sans-en: "Poppins", sans-serif;
  /* 英字の書体が届くまでの間（遅い回線・Google Fonts が読めない環境）に出す代わりの書体。見出しは角ゴシック、筆記体は Georgia */
  --font-display: "Marcellus", sans-serif;
  --font-script: "Lobster", "Georgia", serif;

  /* rem の基準と、文字の大きさの段（PC）。中身の余白は rem で書くので、基準に合わせて縮む */
  --root-size: 15px;
  --size-text: 15px;
  --size-note: 12px;
  --size-sub: 20px;
  --size-lead: 27px;
  --size-big: 35px;
  --size-head: 78px;
  --size-box: 60px;

  /* 固定ヘッダーの高さ（三本線のボタンも同じ大きさ）、中身の幅（画面の90%、最大1280px）の外の余白、欄の上下の余白 */
  --bar-h: 64px;
  --edge: max(5vw, (100vw - 1280px) / 2);
  --band: 6rem;
  /* スマホだけの改行（br.show_sp）と、三本線のボタン（1000px以下だけ） */
  --sp-break: none;
  --menu-button: none;
}
@media (max-width: 1000px) {
  :root {
    --root-size: 13px;
    --size-text: 13px;
    --size-note: 11px;
    --size-sub: 17px;
    --size-lead: 21px;
    --size-big: 27px;
    --size-head: 52px;
    --size-box: 43px;
    --band: 5rem;
    --menu-button: block;
  }
}
@media (max-width: 680px) {
  :root {
    --size-note: 10px;
    --size-sub: 16px;
    --size-lead: 19px;
    --size-big: 22px;
    --size-head: 39px;
    --size-box: 32px;
    --bar-h: 56px;
    --band: 4rem;
    --sp-break: block;
  }
}

/* ===== 素の要素 ===== */

html {
  font-size: var(--root-size);
  font-family: var(--font-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* 日本語の約物を詰める */
  font-feature-settings: "palt" 1;
  /* ページ内リンクで飛んだ先の見出しが、固定ヘッダーに隠れないようにする（JS が動かないときも効く） */
  scroll-padding-top: calc(var(--bar-h) - 2px);
}
/* スクロールバーは出さない（Chrome・Safari） */
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}
body {
  position: relative;
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-base);
  font-weight: 400;
}
*,
::before,
::after {
  box-sizing: border-box;
}
/* 見出し・段落・一覧・表の、ブラウザの初めの余白と太さを消す */
h1,
h2,
h3,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
table,
caption,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
ul,
ol {
  list-style: none;
}
img {
  display: block;
  width: 100%;
}
table {
  border-collapse: collapse;
}
a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* マウスで押したときは枠を出さず、キーボードで選んだときだけ出す */
button:focus:not(:focus-visible) {
  outline: none;
}
::selection {
  background: var(--hairline);
  color: var(--ink);
}
body small {
  font-family: var(--font-base);
  font-size: var(--size-note);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
}
/* 改行の調整：スマホだけで折る br、まとまりごと折らない語、行頭に「ー」「ィ」などを置かない文 */
.show_sp {
  display: var(--sp-break);
}
.u-nowrap,
a[href^="tel:"] {
  white-space: nowrap;
}
.p-text,
.p-lead,
.b-mv__text,
.b-faq__dt,
.b-faq__dd,
.p-table th,
.p-table td,
.p-attention li,
.l-footer__summary,
.p-info .add {
  line-break: strict;
}
/* 見出しや短い文は、語の途中で改行しない（対応するブラウザだけ。本文は両端揃えなので対象にしない） */
.title__main,
.p-lead,
.b-mv__noimage .b-mv__text,
.l-footer__summary,
.p-table td,
.p-table th,
.b-faq__dt {
  word-break: auto-phrase;
}
/* 語の切れ目を知らないブラウザ（Safari など）は文字の間のどこででも折るので、「…できます｜か？」「徒歩1｜分」のように折れる。
   よくある質問の問いと、スマホの幅の店の紹介文は、句読点・空白・HTML の <wbr> の所だけで折る（1行に入りきらない長さのときだけ、どこででも折る）。
   紹介文は、そうしても行の数が変わらない幅（360〜427px）に限る。それより広い幅では「徒歩1分」を1つにまとめるだけ（HTML の u-nowrap） */
@supports not (word-break: auto-phrase) {
  .b-faq__dt {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  @media (min-width: 360px) and (max-width: 427px) {
    .l-footer__summary {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
  }
}

/* ===== ページの枠 ===== */

/* 全体を包む箱：紙の地に、ざらつきの画像を掛け算で重ねる（ヘッダーにも掛かる）。
   ページ全体と本文を、それぞれ1枚の層として描く（文字や線の1px未満の丸め方が、これまでの描き方と同じになる） */
#wrapAll {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* 中身が短いページでも、フッターが画面の下に来る */
  min-height: calc(100vh + 1px);
  min-height: calc(100svh + 1px);
  overflow: hidden;
  background-color: var(--paper);
  will-change: opacity;
}
#wrapAll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 999999;
  background: url(/image/common/noise.webp) 0 0 / 250px auto repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.l-main {
  z-index: 1;
  flex-grow: 1;
  /* 固定ヘッダーの分だけ下げる */
  padding-top: var(--bar-h);
  will-change: opacity;
}
section {
  position: relative;
  background-color: var(--paper);
}
section.is-bg2 {
  background-color: var(--paper-deep);
}
/* 紺の地（ヘッダー・スマホのメニュー・フッター・紺の欄） */
section.is-key1,
.l-header::before,
.l-header__hbg__modal,
.l-footer {
  background: var(--navy-cloth);
}
/* 中身の幅と、欄の上下の余白 */
.l-header__wrap,
.l-footer__wrap,
.b-mv__noimage .b-mv__wrap,
section .section__wrap {
  width: min(90%, 1280px);
  margin-inline: auto;
}
section .section__wrap {
  position: relative;
  z-index: 5;
  padding-block: var(--band);
}

/* ロゴ：線画のロゴ（1896:1200）を箱いっぱいに描き、店名の文字は読み上げ用に隠す */
.p-logo__color2 {
  position: relative;
  display: block;
  aspect-ratio: 1896 / 1200;
}
.p-logo__color2 svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: inherit;
}
.p-logo__color2 > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- ヘッダー --- */

.l-header {
  /* 幅ごとの値：PCのナビの項目、三本線のボタンの分の右のあき、予約の丸の左右の余白とアイコンとのあき */
  --nav-items: list-item;
  --nav-room: 0px;
  --pill-pad: 1.2em;
  --pill-gap: 1.2em;
  position: fixed;
  inset: 0 0 auto;
  z-index: 99999;
  height: var(--bar-h);
}
@media (max-width: 1000px) {
  .l-header {
    --nav-items: none;
    --nav-room: calc(var(--bar-h) - 18px);
  }
}
@media (max-width: 680px) {
  .l-header {
    --pill-pad: 0.8em;
    --pill-gap: 0.5em;
  }
}
/* 地の紺は前に敷いた層で描く。トップの一番上（html.is-overMv）では消し、写真の上にロゴとメニューを載せる */
.l-header::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.3s;
}
.is-overMv .is-top .l-header::before {
  opacity: 0;
}
.l-header__wrap {
  position: relative;
  height: 100%;
}
/* ロゴを左の端、ナビを右の端に置く（横に並べた格子の両端） */
.l-header__inner {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  block-size: 100%;
}
.l-header__body {
  padding-right: var(--nav-room);
}
.l-header__logo {
  display: block;
  width: 5.3rem;
  fill: var(--bright);
  transition: opacity 200ms ease;
  will-change: opacity;
}
.l-header__nav__ul {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.l-header__nav__li:not(.reservation) {
  display: var(--nav-items);
}
.l-header__nav__link {
  display: block;
  padding-block: 1em;
  padding-inline: 1em;
  font-size: calc(var(--size-text) - 1px);
  letter-spacing: 0.02em;
  line-height: 1;
}
.l-header__nav__li:not(.reservation) .l-header__nav__link {
  color: var(--bright);
  transition: color 200ms ease;
}
/* 予約の丸いボタン（ヘッダーとスマホのメニューで同じ形）。アイコンを文字の左に置く */
.l-header__nav__li.reservation {
  margin-inline-start: 1rem;
}
.l-header__nav__li.reservation .l-header__nav__link,
.l-header__hbg__modal__nav__li.reservation .l-header__hbg__modal__nav__link {
  position: relative;
  padding: 0.1em var(--pill-pad, 1.2em);
  border: 1px solid transparent;
  border-radius: 3em;
  background-color: var(--paper);
  color: var(--navy);
  fill: var(--vermilion);
  letter-spacing: 0.02em;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, fill 200ms ease;
}
/* 見た目は小さいままで、押せる範囲を上下に広げて44px以上にする（ヘッダーの高さの中に収まる） */
.l-header__nav__li.reservation .l-header__nav__link::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.l-header__nav__li.reservation .l-header__nav__wrap,
.l-header__hbg__modal__nav__li.reservation .l-header__hbg__modal__nav__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--pill-gap, 1.2em);
}
.l-header__nav__icon,
.l-header__hbg__modal__nav__icon {
  width: 2em;
  aspect-ratio: 1;
}
.l-header__nav__icon svg,
.l-header__hbg__modal__nav__icon svg {
  width: 100%;
  height: 100%;
}

/* --- 三本線のボタンとスマホのメニュー（1000px以下） --- */

.l-header__hbg__icon {
  position: fixed;
  inset: 0 calc(5vw - 18px) auto auto;
  z-index: 9999999;
  display: var(--menu-button);
  width: var(--bar-h);
  height: var(--bar-h);
}
/* ボタンを1マスの格子にして、三本線の箱を真ん中に置く */
.l-header__hbg__icon .js-hbgicon {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
}
/* 三本の線（28×14）。開くと上下の線が×に重なり、真ん中が消える */
.l-header__hbg__icon .js-hbgicon > span {
  position: relative;
  inline-size: 28px;
  block-size: 14px;
}
.l-header__hbg__icon .js-hbgicon > span > span {
  --turn: 0deg;
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bright);
  transform-origin: center;
  transform: translate(-50%, var(--lift-y, -50%)) rotate(var(--turn));
  /* 閉じるとき：先に向きを戻し、そのあと上下へ離す */
  transition: transform 200ms ease, top 200ms ease 200ms, opacity 200ms ease;
  will-change: transform, opacity;
}
.l-header__hbg__icon .js-hbgicon > span > span:nth-child(1) {
  --lift-y: 0%;
  top: 0;
}
.l-header__hbg__icon .js-hbgicon > span > span:nth-child(2) {
  top: 50%;
}
.l-header__hbg__icon .js-hbgicon > span > span:nth-child(3) {
  top: 100%;
}
.is-menu-open .l-header__hbg__icon .js-hbgicon > span > span {
  --lift-y: 0%;
  top: 50%;
  /* 開くとき：先に真ん中へ寄せ、そのあと傾ける */
  transition: transform 200ms ease 200ms, top 200ms ease, opacity 0ms linear 200ms;
}
.is-menu-open .l-header__hbg__icon .js-hbgicon > span > span:nth-child(1) {
  --turn: 45deg;
}
.is-menu-open .l-header__hbg__icon .js-hbgicon > span > span:nth-child(2) {
  opacity: 0;
}
.is-menu-open .l-header__hbg__icon .js-hbgicon > span > span:nth-child(3) {
  --turn: -45deg;
}

/* メニューの面：画面いっぱいの紺。開いている間は背景のページをスクロールさせない（JS が html に is-menu-open を付ける） */
.l-header__hbg__modal {
  /* 幅ごとの値：スマホでは中身を少し縮め、ロゴを小さくする */
  --menu-zoom: none;
  --menu-logo: 18rem;
  --sns-align: center;
  position: fixed;
  inset: 0;
  z-index: var(--menu-layer, 0);
  visibility: var(--menu-shown, hidden);
  opacity: var(--menu-fade, 0);
  transition: opacity 400ms ease, visibility 400ms ease, z-index 400ms ease;
  will-change: opacity;
}
@media (max-width: 680px) {
  .l-header__hbg__modal {
    --menu-zoom: scale(0.85);
    --menu-logo: 15rem;
  }
}
/* 横向きのスマホなど高さの低い画面では、メニューの中をスクロールできるようにする */
@media (max-height: 500px) {
  .l-header__hbg__modal {
    overflow-y: auto;
  }
  .l-header__hbg__modal__wrap {
    height: auto;
    min-height: 100%;
  }
}
html.is-menu-open {
  --menu-layer: 999999;
  --menu-shown: visible;
  --menu-fade: 1;
}
html.is-menu-open,
html.is-menu-open body {
  overflow: hidden;
}
/* 中身を画面の真ん中に置く */
.l-header__hbg__modal__wrap {
  display: grid;
  place-items: center;
  height: 100%;
}
.l-header__hbg__modal__inner {
  padding-block: var(--bar-h);
  text-align: center;
  transform: var(--menu-zoom);
}
.l-header__hbg__modal__logo {
  display: block;
  width: var(--menu-logo);
  margin: 0 auto 1.5rem;
}
.l-header__hbg__modal__nav {
  width: 90%;
  margin: 0 auto 3rem;
}
.l-header__hbg__modal__nav__link {
  display: block;
  padding-block: 0.8em;
  padding-inline: 1em;
  font-size: calc(var(--size-text) + 2px);
  letter-spacing: 0.02em;
  line-height: 1;
}
.l-header__hbg__modal__nav__li:not(.reservation) .l-header__hbg__modal__nav__link {
  color: var(--bright);
  transition: color 200ms ease;
}
.l-header__hbg__modal__nav__li.reservation {
  margin-block-start: 1rem;
}
.l-header__hbg__modal__nav__li.reservation .l-header__hbg__modal__nav__link {
  width: fit-content;
  margin-inline: auto;
}
.l-header__hbg__modal .p-info {
  margin-bottom: 2rem;
}

/* --- フッター --- */

.l-footer {
  /* 幅ごとの値：PCは左に店の情報・右に営業時間とリンクの2列、タブレット・スマホは真ん中に縦に並べる */
  --foot-top: 6rem;
  --foot-columns: flex;
  --foot-head-below: 7rem;
  --foot-logo: 20rem;
  --foot-logo-side: 0;
  --foot-align: left;
  --foot-summary-left: 0;
  --foot-info: block;
  --open-max: none;
  --open-side: 0;
  --open-below: 5rem;
  --open-pad: 3rem;
  --open-size: var(--size-text);
  --open-first: var(--size-lead);
  --sns-min: 30rem;
  --sns-max: none;
  --sns-room: 0;
  --sns-align: flex-start;
  --copy-pos: absolute;
  --copy-above: 0;
  position: relative;
}
@media (max-width: 1200px) {
  .l-footer {
    --sns-room: 4rem;
  }
}
@media (max-width: 1000px) {
  .l-footer {
    --foot-columns: block;
    --foot-head-below: 3rem;
    --foot-logo-side: auto;
    --foot-align: center;
    --foot-summary-left: auto;
    --foot-info: inline-block;
    --open-max: 35rem;
    --open-side: auto;
    --open-below: 2rem;
    --sns-min: 0;
    --sns-max: 35rem;
    --sns-room: 0;
    --sns-align: center;
    --copy-pos: relative;
    --copy-above: 6rem;
  }
}
@media (max-width: 680px) {
  .l-footer {
    --foot-top: 4rem;
    --foot-head-below: 2rem;
    --foot-logo: 18rem;
    --open-pad: 2rem;
    --open-size: calc(var(--size-text) + 2px);
    --open-first: var(--size-big);
  }
}
.l-footer__wrap {
  position: relative;
  height: 100%;
  padding: var(--foot-top) 0 2rem;
}
.l-footer__inner {
  position: relative;
  display: var(--foot-columns);
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
}
/* 著作権表示は左下に置くので、紹介文で高くなった左の欄と重ならないよう下をあける */
.l-footer__head {
  padding-bottom: var(--foot-head-below);
}
.l-footer__logo {
  display: block;
  width: var(--foot-logo);
  margin: 0 var(--foot-logo-side) 1.5rem;
}
/* 店の紹介文。PCは住所・電話と同じく左にそろえる */
.l-footer__summary {
  max-width: 34em;
  margin: 0 auto 2rem var(--foot-summary-left);
  color: var(--bright);
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.9;
  text-align: var(--foot-align);
}
.l-footer .p-info {
  text-align: var(--foot-align);
}
/* 営業時間の枠：1行目（ランチ）だけ大きく */
.l-footer__open {
  max-width: var(--open-max);
  margin: 0 var(--open-side) var(--open-below);
  border: 1px solid var(--bright);
  border-radius: 1rem;
}
.l-footer__open__wrap {
  padding: var(--open-pad);
}
/* 行（ランチ・ディナー・定休日）の間は、並べる箱のすき間でとる（2行目以降の文字の大きさの1つ分） */
.l-footer__open__wrap .p-dl {
  display: flex;
  flex-direction: column;
  row-gap: var(--open-size);
}
.l-footer__open__wrap dl {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--open-size);
  letter-spacing: 0.04em;
  line-height: 1;
}
.l-footer__open__wrap dl:first-child {
  padding-bottom: 0.5em;
  font-size: var(--open-first);
}
.l-footer__open__wrap dt,
.l-footer__open__wrap dd {
  color: var(--bright);
}
.l-footer__open__wrap dd {
  padding-left: 2em;
}
.l-footer__open__wrap dl:first-child dd {
  text-align: end;
}
/* ページの一覧（押せる高さ44px以上） */
.l-footer__nav ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0 2rem;
  margin: 0 0 2.4rem;
}
.l-footer__nav a {
  padding-block: 12px;
  color: var(--bright);
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.l-footer .p-sns {
  min-width: var(--sns-min);
  max-width: var(--sns-max);
  margin-inline: var(--open-side);
  padding-right: var(--sns-room);
}
.l-footer__copyright {
  position: var(--copy-pos);
  inset: auto auto 0 0;
  margin-top: var(--copy-above);
  color: var(--bright);
  letter-spacing: 0.12em;
}

/* --- TO TOP（右下に浮くボタン）。ハンバーガーの7つの層の絵と「TO TOP」の文字 --- */

.js-totop__float {
  position: fixed;
  inset: auto 5vw 0 auto;
  z-index: 5000;
  padding-block: 2rem;
  transition: opacity 200ms ease, visibility 0s;
}
@media (min-width: 1200px) {
  /* 広い画面では、右の余白の真ん中に置く */
  .js-totop__float {
    right: calc(var(--edge) / 2);
    transform: translate(50%, 0);
  }
}
/* スマホなどで表の価格の上に来ている間は消す（価格を隠さない） */
.js-totop__float.is-over-price {
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
/* 絵が引っ込んでいる間（JS が動かないとき・一番上の近く）は、ボタンごと隠す（見えないボタンに Tab で止まらない）。
   :has() を知らないブラウザでも1つ目は効くよう、2つの規則に分ける */
.js-totop__float:not(.is-armed) {
  visibility: hidden;
}
.js-totop__float:has(> .js-totop__float__fig.is-away) {
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.js-totop__float__fig {
  --fig-ink: var(--navy);
  position: relative;
  display: block;
  width: 2rem;
  transition: opacity 200ms ease, transform 200ms ease;
  will-change: opacity, transform;
}
/* 紺の地や写真の上では白くする */
.js-totop__float__fig.is-light {
  --fig-ink: var(--bright);
}
/* ページの一番上の近くでは右へ引っ込めて消す（JS が動かないときも消えたまま） */
.js-totop__float__fig.is-away,
.js-totop__float:not(.is-armed) .js-totop__float__fig {
  opacity: 0;
  transform: translate(100%, 0);
}
/* 絵の下の小さな「TO TOP」の文字（少し縮めて、絵の真ん中にそろえる） */
.js-totop__float__fig::before {
  content: "TO TOP";
  position: absolute;
  inset: 100% auto auto 50%;
  inline-size: 100px;
  translate: -50% 0;
  scale: 0.9;
  color: var(--fig-ink);
  font-size: 10px;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}
.js-totop__float__fig__wrap,
.js-totop__float__fig__wrap > span {
  display: block;
}
/* 層の1枚ずつ。--ratio は絵の縦横比（パン・具・パティ…） */
.js-totop__float__fig__wrap > span > span {
  position: relative;
  display: block;
  margin: 0;
  padding: 1% 0;
  fill: var(--fig-ink);
  transition: margin 200ms ease, fill 200ms ease;
}
.js-totop__float__fig__wrap svg {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio);
  fill: inherit;
}
.js-totop__float__fig__wrap > span > span:nth-child(1) { --ratio: 5 / 2; }
.js-totop__float__fig__wrap > span > span:nth-child(2) { --ratio: 50 / 17; }
.js-totop__float__fig__wrap > span > span:nth-child(3) { --ratio: 25 / 2; }
.js-totop__float__fig__wrap > span > span:nth-child(4) { --ratio: 25 / 3; }
.js-totop__float__fig__wrap > span > span:nth-child(5),
.js-totop__float__fig__wrap > span > span:nth-child(6) { --ratio: 25 / 4; }
.js-totop__float__fig__wrap > span > span:nth-child(7) { --ratio: 25 / 6; }
/* トップでは、いま見ている欄の順番（data-step）の層を朱にし、その上にすき間をあける */
.js-totop__float__fig[data-step="2"] .js-totop__float__fig__wrap > span > span:nth-child(1),
.js-totop__float__fig[data-step="3"] .js-totop__float__fig__wrap > span > span:nth-child(2),
.js-totop__float__fig[data-step="4"] .js-totop__float__fig__wrap > span > span:nth-child(3),
.js-totop__float__fig[data-step="5"] .js-totop__float__fig__wrap > span > span:nth-child(4),
.js-totop__float__fig[data-step="6"] .js-totop__float__fig__wrap > span > span:nth-child(5) {
  margin-bottom: 20%;
}
.js-totop__float__fig[data-step="1"] .js-totop__float__fig__wrap > span > span:nth-child(1),
.js-totop__float__fig[data-step="2"] .js-totop__float__fig__wrap > span > span:nth-child(2),
.js-totop__float__fig[data-step="3"] .js-totop__float__fig__wrap > span > span:nth-child(3),
.js-totop__float__fig[data-step="4"] .js-totop__float__fig__wrap > span > span:nth-child(4),
.js-totop__float__fig[data-step="5"] .js-totop__float__fig__wrap > span > span:nth-child(5),
.js-totop__float__fig[data-step="6"] .js-totop__float__fig__wrap > span > span:nth-child(6) {
  margin-bottom: 20%;
  fill: var(--vermilion);
}

/* ===== 共通の部品 ===== */

/* --- 見出し --- */

/* 欄の見出し（CONCEPT など）と下層ページの大見出し・中見出し：大きな英字の下に、両脇に線のある小さな飾り文字。
   --flourish は飾り文字の大きさ（英字に対する割合）。スマホでは大きめにする */
.p-title__sec,
.b-mv__noimage .b-mv__title,
.b-section .p-title__h2 {
  --flourish: 0.28em;
  display: block;
  margin-bottom: var(--title-below, 4rem);
  font-family: var(--font-display);
  font-size: var(--size-head);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
@media (max-width: 680px) {
  .p-title__sec {
    --flourish: 0.45em;
  }
}
.p-title__sec .title__wrap,
.b-mv__noimage .b-mv__title .title__wrap,
.b-section .p-title__h2 .title__wrap {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: var(--title-align, center);
  gap: 1rem;
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
}
.p-title__sec .title__main,
.b-mv__noimage .b-mv__title .title__main,
.b-section .p-title__h2 .title__main {
  color: var(--title-ink, var(--navy));
  text-transform: uppercase;
}
.p-title__sec .title__sub,
.b-mv__noimage .b-mv__title .title__sub,
.b-section .p-title__h2 .title__sub {
  position: relative;
  padding: 0 var(--flourish-end, 1.5em) 0 1.5em;
  color: var(--accent);
  font-family: var(--font-script);
  font-size: var(--flourish);
  line-height: 1;
  letter-spacing: 0;
}
/* 飾り文字の両脇の短い線 */
.p-title__sec .title__sub::before,
.p-title__sec .title__sub::after,
.b-mv__noimage .b-mv__title .title__sub::before,
.b-mv__noimage .b-mv__title .title__sub::after,
.b-section .p-title__h2 .title__sub::before,
.b-section .p-title__h2 .title__sub::after {
  content: "";
  position: absolute;
  inline-size: 1em;
  block-size: 1px;
  background-color: var(--accent);
  translate: 0 -50%;
}
.p-title__sec .title__sub::before,
.b-mv__noimage .b-mv__title .title__sub::before,
.b-section .p-title__h2 .title__sub::before {
  inset: 50% auto auto 0;
}
.p-title__sec .title__sub::after,
.b-mv__noimage .b-mv__title .title__sub::after,
.b-section .p-title__h2 .title__sub::after {
  inset: 50% 0 auto auto;
  display: var(--flourish-right, block);
}
/* 日本語の飾り文字（下層ページと、トップのよくある質問）は角ゴシックにする */
.b-mv__noimage .b-mv__title .title__sub,
.b-section .p-title__h2 .title__sub,
.page-top__faq .p-title__sec .title__sub {
  font-family: var(--font-gothic);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
}
/* 紺の地の欄：見出しは白、飾りは橙 */
section.is-key1 .p-title__sec {
  --accent: var(--amber);
  --title-ink: var(--bright);
}

/* 写真の上や紺の地に置く英字の小見出し（LUNCH など）。一文字だけ飾りの色にする */
.p-title__box {
  display: block;
  color: var(--bright);
  font-family: var(--font-display);
  font-size: var(--box-size, var(--size-box));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.p-title__box .title__wrap {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.p-title__box .title__main {
  display: block;
  color: var(--box-ink, var(--bright));
}
.p-title__box b {
  color: var(--accent);
  font-weight: 400;
}

/* 品名の小見出し（Indigo Burger など） */
.p-title__sub {
  display: block;
  font-family: var(--font-sans-en);
  font-size: var(--size-sub);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
.p-title__sub .title__wrap {
  position: relative;
  font: inherit;
  letter-spacing: inherit;
}
.p-title__sub .title__main {
  display: block;
  color: var(--navy);
}

/* --- 文 --- */

.p-text {
  font-family: var(--font-gothic);
  font-size: var(--size-text);
  line-height: 2;
  letter-spacing: 0.08em;
}
/* 明朝の大きめの文。--lead-size・--lead-track は幅で替える */
.p-lead {
  --lead-size: calc(var(--size-sub) + 2px);
  --lead-track: 0.1em;
  color: var(--navy);
  font-family: var(--font-mincho);
  font-size: var(--lead-size);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: var(--lead-track);
}
@media (max-width: 1000px) {
  .p-lead {
    --lead-track: 0.04em;
  }
}
@media (max-width: 680px) {
  .p-lead {
    --lead-size: calc(var(--size-sub) + 1px);
  }
}
/* 紺の地の欄の文は白（大きめの文と本文） */
section.is-key1 .p-text {
  color: var(--bright);
}
section.is-key1 .p-lead {
  color: var(--bright);
}
/* 文の中のリンクは下線（表の中は紺）。PCでは指し示すと下線を消す */
.p-text a,
.p-lead a,
.p-caption a,
.p-attention li a,
.p-table td > span a {
  color: var(--link-ink, inherit);
  text-decoration: underline;
}
.p-table td > span {
  --link-ink: var(--navy);
}
.p-caption {
  color: var(--muted);
  font-family: var(--font-base);
  font-size: var(--size-note);
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.p-date {
  color: var(--muted);
  font-family: var(--font-base);
  font-size: var(--size-text);
  line-height: 1;
  letter-spacing: 0.08em;
}
/* 注意書き：行頭に「※」。文字の大きさは一覧に持たせ、行の間は一覧のすき間（文字の0.6個分）でとる */
.p-attention {
  display: flex;
  flex-direction: column;
  row-gap: 0.6em;
  font-size: 12px;
}
.p-attention li {
  display: block;
  color: var(--muted);
  font-family: var(--font-gothic);
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.p-attention li > span {
  position: relative;
  display: block;
  padding-inline-start: 1.5em;
}
.p-attention li > span::before {
  content: "※";
  position: absolute;
  inset: 0 auto auto 0;
}

/* --- 住所と電話（トップの店の情報・スマホのメニュー・フッター） --- */

.p-info .add {
  margin-bottom: 1rem;
  font-family: var(--font-gothic);
  font-size: var(--size-text);
  line-height: 2;
  letter-spacing: var(--add-track, 0.08em);
}
@media (max-width: 1000px) {
  .p-info .add {
    --add-track: 0.02em;
  }
}
/* 地図への小さな丸いリンク。丸は中の文字の箱に描き、リンクの箱は見えないまま広げて押しやすくする。
   すぐ下に電話番号があるので、下へは少しだけ、上（住所の行）へ大きく広げる */
.p-info .add a {
  --pill-text: var(--bright);
  --pill-fill: var(--vermilion);
  --pill-line: var(--vermilion);
  position: relative;
  top: -1px;
  margin: -28px -6px -6px calc(0.5em - 6px);
  padding: 28px 6px 6px;
  vertical-align: middle;
  color: var(--pill-text);
  font-family: var(--font-base);
  font-size: var(--size-note);
  line-height: 1;
  letter-spacing: 0.04em;
}
.p-info .add a > span {
  display: block;
  padding: calc(0.4em - 1px) calc(1em - 1px);
  border: 1px solid var(--pill-line);
  border-radius: 3em;
  background-color: var(--pill-fill);
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
/* 紺の地の上（スマホのメニューとフッター）：白い線だけの丸。指し示すと朱で塗る */
.l-header__hbg__modal .p-info .add,
.l-footer .p-info .add {
  color: var(--bright);
}
.l-header__hbg__modal .p-info .add a,
.l-footer .p-info .add a {
  --pill-fill: transparent;
  --pill-line: var(--bright);
}
.p-info .info {
  display: var(--foot-info, block);
}
.l-header__hbg__modal .p-info .info {
  display: var(--menu-info, block);
}
@media (max-width: 1000px) {
  .l-header__hbg__modal {
    --menu-info: inline-block;
  }
}
/* 「Tel」の欄と番号を横に並べ、上でそろえる */
.p-info .info dl {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  inline-size: 100%;
}
.p-info .info dt,
.p-info .info dd {
  color: var(--info-ink, inherit);
  font-size: var(--size-text);
  letter-spacing: 0.04em;
  line-height: 1;
}
.l-header__hbg__modal .p-info .info,
.l-footer .p-info .info {
  --info-ink: var(--bright);
  --dash: var(--bright);
}
/* 「Tel」と番号のあいだの点線：「Tel」の欄の幅を文字5つ分にとり、点線（文字2つ分）をその右の端の高さの真ん中に置く。
   「Tel」は、中央揃えの所（スマホのフッターなど）でも欄の左に置く */
.p-info .info dt {
  position: relative;
  inline-size: 5em;
  text-align: start;
}
.p-info .info dt::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  inline-size: 2em;
  border-block-start: 1px dashed var(--dash, var(--ink));
  translate: 0 -50%;
}
.p-info .info dd {
  flex: 1;
  padding-left: 1em;
}
/* 番号のリンクは、PCでは下線なし、タブレット・スマホでは下線あり */
.p-info .info dd a {
  color: var(--info-ink, var(--ink));
  text-decoration: underline;
}
.p-info .info dd a.tel {
  text-decoration-line: var(--tel-line, none);
}
@media (max-width: 1000px) {
  .p-info .info {
    --tel-line: underline;
  }
}
/* 電話番号のリンクは、見た目の大きさは変えずに押せる範囲を上下に広げて44px以上にする。
   広げた所が次の行の文の下に隠れないよう、文より手前に置く */
a[href^="tel:"]:not(.p-button) {
  position: relative;
  z-index: 1;
  padding-block: 16px;
  margin-block: -16px;
}
/* 店の情報の電話は、すぐ上の Map と押せる範囲を分け合うので、上へは少しだけ、下へ大きく広げる。
   スマホのメニューでは中身を0.85倍で見せるため、縮めても44px以上残る大きさにしておく */
.p-info .info dd a.tel {
  padding-block: 12px 27px;
  margin-block: -12px -27px;
}

/* --- ボタン：丸い枠の中に文字とアイコン。
   塗り（::before）と枠線（::after）の2枚を重ね、変数で色と「塗りか線か」を切り替える --- */

.p-button {
  --btn-text: var(--bright);
  --btn-fill: var(--navy);
  --btn-texture: none;
  --btn-line: var(--navy);
  --btn-solid: 1;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--btn-max, 20rem);
  padding: 1em 1.5em;
  overflow: hidden;
  color: var(--btn-text);
  fill: var(--btn-text);
  font-family: var(--font-base);
  font-size: var(--size-text);
  line-height: 1;
  letter-spacing: 0.06em;
  transition: color 200ms ease, fill 200ms ease;
}
@media (max-width: 680px) {
  .p-button {
    --btn-max: 100%;
  }
}
.p-button::before,
.p-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-radius: 5rem;
  transition: opacity 200ms ease;
  will-change: opacity;
}
.p-button::before {
  z-index: 1;
  border-color: var(--btn-fill);
  background: var(--btn-fill) var(--btn-texture) 0 0 / 250px auto repeat;
  opacity: var(--btn-solid);
}
.p-button::after {
  z-index: 0;
  border-color: var(--btn-line);
  opacity: calc(1 - var(--btn-solid));
}
.p-button > span {
  position: relative;
  z-index: 2;
  display: block;
}
.p-button > svg {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--btn-icon, 1.5em);
  height: var(--btn-icon, 1.5em);
  margin: 0 var(--btn-icon-gap, 0.5em) 0 0;
}
/* 色の組み合わせ：紺の塗り（標準）／紺の線（reverse）／白の塗り（white）／白の線（white＋reverse） */
.p-button.is-color__reverse {
  --btn-text: var(--navy);
  --btn-solid: 0;
}
.p-button.is-color__white {
  --btn-text: var(--navy);
  --btn-fill: var(--bright);
  --btn-line: var(--bright);
}
.p-button.is-color__white.is-color__reverse {
  --btn-text: var(--bright);
}
.p-button.is-texture {
  --btn-texture: url(/image/common/bg.webp);
}
/* 紺の地の上の Instagram（スマホのメニューとフッター）：白い線。指し示すと朱で塗る */
.l-header__hbg__modal .p-sns .p-button,
.l-footer .p-sns .p-button {
  --btn-text: var(--bright);
  --btn-fill: var(--vermilion);
}
/* アイコンを文字の右に置く */
.p-button.is-reverse {
  flex-direction: row-reverse;
}
.p-button.is-reverse > svg {
  margin: 0 0 0 0.2em;
}
.p-button.is-size__large {
  --btn-max: 100%;
  --btn-icon: 2em;
  --btn-icon-gap: 0;
  gap: var(--btn-large-gap, 5em);
  padding: 1em 1.8em;
  font-size: calc(var(--size-text) + 2px);
}

/* 矢印つきの文字のリンク（下線つき） */
.p-link {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.5em;
  width: max-content;
  overflow: hidden;
  color: var(--navy);
  fill: var(--navy);
  font-family: var(--font-base);
  font-size: var(--size-text);
  line-height: 2;
  letter-spacing: 0.12em;
}
.p-link::after {
  content: "";
  position: absolute;
  inset: auto 0 var(--underline-gap, 0) 0;
  border-bottom: 1px solid;
  transform-origin: left center;
  transition: transform 200ms ease;
  will-change: transform;
}
.p-link > svg,
.p-link > span {
  position: relative;
  z-index: 2;
  display: block;
}
/* 矢印は文字の1.3倍の正方形。文字とのあいだは .p-link のすき間（0.5文字分） */
.p-link > svg {
  inline-size: 1.3em;
  block-size: 1.3em;
}
.p-link.is-color__white {
  color: var(--bright);
  fill: var(--bright);
}

/* --- 写真の枠：中の span に背景として写真を敷く（JS が見える所に近づいたら読む）。--frame は枠の縦横比 --- */

.p-image {
  position: relative;
  aspect-ratio: var(--frame, 3 / 2);
  overflow: hidden;
}
/* 写真を敷く中の箱（中身は持たない）。枠の高さいっぱいに広げる */
.p-image > span {
  position: relative;
  z-index: 0;
  display: flow-root;
  block-size: 100%;
}
.js-lazy_bgi {
  display: block;
  width: 100%;
  background: center / cover no-repeat;
}

/* --- Googleマップの埋め込み --- */

.p-map {
  --map-veil: 0;
  --map-label: 0;
  --map-label-drop: 0.2em;
  position: relative;
  aspect-ratio: var(--map-frame, 16 / 9);
  overflow: hidden;
}
/* 地図は枠いっぱいに敷く（iframe は中身の大きさを持つので、幅と高さを枠に合わせる） */
.p-map > iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  inline-size: 100%;
  block-size: 100%;
}
/* トップの小さな地図は、操作できない飾りとして上下を切って見せる（指し示すと暗くして「GoogleMap」と出す）。
   --map-crop は、地図の上下の案内を枠の外へ出して隠す量。地図はその分だけ上へずらし、上下の分だけ高くする */
.p-map.is-ovh {
  --map-crop: 170px;
}
.p-map.is-ovh > iframe {
  inset-block-start: calc(var(--map-crop) * -1);
  z-index: 0;
  block-size: calc(100% + var(--map-crop) * 2);
  pointer-events: none;
}
.p-map::before,
.p-map::after {
  position: absolute;
  will-change: opacity, transform;
}
.p-map::before {
  content: "";
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: var(--map-veil);
  transition: opacity 200ms ease;
}
.p-map::after {
  content: "GoogleMap";
  inset: 50% 0 auto;
  z-index: 2;
  color: #fff;
  font-family: var(--font-base);
  font-size: var(--size-note);
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  opacity: var(--map-label);
  transform: translate(0, calc(-50% + var(--map-label-drop)));
  transition: opacity 200ms ease, transform 200ms ease;
}

/* --- SNS のボタン（Instagram） --- */

.p-sns {
  --sns-gap: 1rem;
  --sns-text: 13px;
  --sns-track: 0.08em;
  --sns-icon-gap: 2em;
}
@media (max-width: 680px) {
  .p-sns {
    --sns-gap: 0.6rem;
    --sns-text: 11px;
    --sns-track: 0;
    --sns-icon-gap: 0;
  }
}
.p-sns ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: var(--sns-align, flex-start);
  align-items: flex-start;
  gap: var(--sns-gap);
}
.p-sns li {
  flex: 1;
}
.p-sns li a {
  flex-wrap: nowrap;
  max-width: 100%;
  padding: 0.5em 1em;
  font-size: var(--sns-text);
  letter-spacing: var(--sns-track);
}
.p-sns li a svg {
  width: 1.8rem;
  margin-right: var(--sns-icon-gap);
}

/* ボタンを並べる行 */
.b-links {
  display: flex;
  flex-flow: var(--links-flow, row wrap);
  justify-content: center;
  align-items: center;
  gap: var(--links-gap, 2rem);
  width: 100%;
}

/* --- よくある質問：問いは紺の「Q」の印、答えは薄い地の箱。開閉させずに開いたまま見せる --- */

.b-faq {
  --answer-pad: 2rem;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 680px) {
  .b-faq {
    --answer-pad: 1rem;
  }
}
.b-faq__dl {
  position: relative;
  border-top: 1px solid var(--hairline);
}
.b-faq__dt {
  position: relative;
  padding-block: 2rem;
  color: var(--navy);
  font-family: var(--font-base);
  font-size: var(--size-text);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.08em;
}
.b-faq__dt > span {
  position: relative;
  padding-left: 3rem;
}
/* 「Q」の印：1つの紺の四角に白い文字を入れる。四角は問いの行の頭より2px上から始め、文字はその5px下に置く */
.b-faq__dt > span::before {
  content: "Q";
  position: absolute;
  inset: -2px auto auto 0;
  inline-size: 2rem;
  block-size: 2rem;
  padding-block-start: 5px;
  background-color: var(--navy);
  color: var(--bright);
  line-height: 1;
  text-align: center;
}
.b-faq__dd > p > span {
  display: block;
  margin-bottom: 2rem;
  padding: var(--answer-pad);
  border-radius: 3px;
  background-color: var(--paper-deep);
  font-family: var(--font-base);
  font-size: var(--size-text);
  line-height: 2;
  letter-spacing: 0.08em;
}
.b-faq__dd a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --- 表（メニュー・料理・コース・営業時間など） --- */

.p-table {
  /* 幅ごとの値：セルの余白、価格の列の幅、2列の表の見出しの列の幅。スマホでは料理の表を縦に並べる */
  --cell-pad: 1rem;
  --price-col: 8.5em;
  --info-col: 9em;
  --dish-cell: table-cell;
  --dish-name: 38%;
  --dish-rule: 1px;
  width: 100%;
  overflow: hidden;
}
@media (max-width: 680px) {
  .p-table {
    --price-col: 7.6em;
    --info-col: 7em;
    --dish-cell: block;
    --dish-name: 100%;
    --dish-rule: 0;
  }
  .p-table.is-menu {
    --cell-pad: 0.8rem;
  }
}
.p-table table {
  width: 100%;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.p-table th,
.p-table td {
  padding: var(--cell-pad);
  overflow: hidden;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.p-table th {
  background-color: var(--paper-deep);
}
.p-table tbody th {
  min-width: 7em;
  max-width: 30%;
}
.p-table th > span,
.p-table td > span {
  display: block;
  font-family: var(--font-gothic);
  font-size: var(--size-text);
  line-height: 1.8;
  letter-spacing: 0.08em;
}
/* 表の題（スペシャル・ビール など） */
.p-table caption {
  padding: 0 0 0.8em;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
}
/* 価格の表：品名と説明を左、税込の価格を右。横にはみ出さない */
.p-table.is-menu table {
  table-layout: fixed;
}
.p-table.is-menu tbody th {
  width: auto;
  min-width: 0;
  max-width: none;
  background-color: var(--bright);
}
.p-table.is-menu tbody th > span,
.p-table.is-dish tbody th > span {
  font-weight: 500;
}
.p-table.is-menu tbody th small {
  display: block;
  margin-top: 0.3em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.p-table.is-menu tbody td {
  width: var(--price-col);
  text-align: right;
  white-space: nowrap;
}
/* 2列の表（営業時間・貸切の内容など）：左の見出しの列は狭め */
.p-table.is-info tbody th {
  width: var(--info-col);
}
.p-table.is-info td small {
  color: var(--muted);
  font-size: 13px;
}
/* 料理の表：品名を左に広め、スマホでは品名の下に説明を置く */
.p-table.is-dish tbody th,
.p-table.is-dish tbody td {
  display: var(--dish-cell);
}
.p-table.is-dish tbody th {
  width: var(--dish-name);
  max-width: none;
  border-bottom-width: var(--dish-rule);
}
.p-table.is-dish tbody td {
  width: var(--dish-td, auto);
}
@media (max-width: 680px) {
  .p-table.is-dish {
    --dish-td: 100%;
  }
}

/* --- パンくず（HOME / MENU）。紙の地に「差」で重ねて淡く見せる --- */

.p-pankuzu {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  padding-block: 1rem;
  line-height: 1;
  white-space: nowrap;
  mix-blend-mode: difference;
}
.p-pankuzu li + li {
  position: relative;
}
/* 区切りの斜めの線：項目のあいだ（20px）の真ん中に、項目と同じ高さの1pxの線を立てて30度傾ける */
.p-pankuzu li + li::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -10px;
  inline-size: 1px;
  block-size: 100%;
  translate: -50% -50%;
  rotate: 30deg;
  background-color: var(--muted);
}
.p-pankuzu div,
.p-pankuzu a {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 3px;
  width: 100%;
  color: var(--muted);
  fill: var(--muted);
  font-family: var(--font-base);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
/* 押せる高さを44px以上にする（見た目は変えない） */
.p-pankuzu a {
  margin-block: -17px;
  padding-block: 17px;
}
/* 長いページ名は、幅200pxの1行目までにして「…」で止める（2行目以降を隠す） */
.p-pankuzu span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-inline-size: 200px;
  overflow: hidden;
  white-space: normal;
}

/* ===== 下層ページ（メニュー・貸切・アクセス・よくある質問・404） ===== */

/* ページの頭：パンくず、大見出し、ページの答えを先に書く文 */
.b-mv__noimage {
  --head-top: 6rem;
  --head-text: 15px;
  --title-below: 0;
  position: relative;
}
@media (max-width: 680px) {
  .b-mv__noimage {
    --head-top: 4rem;
    --head-text: 14px;
  }
}
.b-mv__noimage .b-mv__wrap {
  position: relative;
  z-index: 0;
  padding-top: var(--head-top);
}
.b-mv__pankuzu {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1000;
}
.b-mv__noimage .b-mv__inner {
  position: relative;
  width: 100%;
}
.b-mv__noimage .b-mv__text {
  display: block;
  max-width: 46em;
  margin-top: 2.4rem;
  font-size: var(--head-text);
  letter-spacing: 0.08em;
  line-height: 2;
}
/* 真ん中寄せ：文の箱は真ん中、文そのものは左寄せ */
.is-center.b-mv__noimage .b-mv__inner,
.is-center.b-mv__noimage .b-mv__text {
  text-align: center;
}
.is-center.b-mv__noimage .b-mv__text {
  margin-inline: auto;
}
.is-center.b-mv__noimage .b-mv__text > span {
  display: inline-block;
  text-align: left;
}

/* 節：中見出しのあとに、文・表・ボタンの箱を縦に並べる。本文の幅は880pxまで */
.b-section .section__wrap {
  padding-bottom: 4rem;
}
/* 2つ目以降の節は上をつめる（飛んだときに見出しがヘッダーに隠れない分は残す） */
.b-section + .b-section .section__wrap {
  padding-top: 2rem;
}
.b-section__wrap {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}
/* 箱と箱のあいだ：それぞれの箱の下に4remあけ、最後の箱だけあけない（中の余白とは今までどおり重なる） */
.b-section__box {
  margin-block-end: 4rem;
}
.b-section__box:last-child {
  margin-block-end: 0;
}
.b-section .p-text > span {
  display: block;
  font-size: 15px;
  line-height: 2;
}
.b-section .b-links {
  --links-gap: 1.2rem 2rem;
}
/* 大きいボタンは、トップの予約の欄と同じくらいの幅まで */
.b-section .b-links .p-button.is-size__large {
  --btn-max: 430px;
}

/* ===== トップ ===== */

/* --- 最初の画面：店内の写真を画面いっぱいの背景にし、下側に英字の見出し・説明文・電話を重ねる。
   写真はヘッダーの裏まで敷く。文字は下に寄せ、写真の上半分は文字なしで見せる --- */

.page-top__mv {
  /* 幅ごとの値：文字の塊の上下の余白、写真の切り方、英字の見出しの大きさと行の高さ、
     日本語の見出しの大きさ、ボタンの並べ方（PC・タブレットは横、スマホは縦で電話を幅いっぱいに） */
  --mv-top: 4rem;
  --mv-bottom: 6.5rem;
  --mv-focus: 50% 30%;
  --mv-title: clamp(56px, 7vw, 112px);
  --mv-title-lh: 1;
  --mv-title-break: none;
  --mv-h1: 16px;
  --mv-links-flow: row wrap;
  --mv-links-align: center;
  --mv-links-gap: 1.2rem 2.8rem;
  --mv-links-top: 2.8rem;
  --mv-tel-width: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--bar-h));
  padding-top: var(--bar-h);
  overflow: hidden;
  background-color: var(--navy);
}
@media (max-width: 1000px) {
  .page-top__mv {
    --mv-top: 3rem;
    --mv-bottom: 4.5rem;
    /* 縦長の画面では、窓ぎわの席が見える左寄りで切る */
    --mv-focus: 25% 30%;
    --mv-title: clamp(44px, 12.4vw, 84px);
    --mv-title-lh: 0.98;
    --mv-title-break: inline;
  }
}
@media (max-width: 680px) {
  .page-top__mv {
    --mv-h1: 14px;
    --mv-links-flow: column nowrap;
    --mv-links-align: flex-start;
    --mv-links-gap: 1.2rem;
    --mv-links-top: 2.2rem;
    --mv-tel-width: 100%;
  }
}
.page-top__mv .section__wrap {
  z-index: 1;
  padding-block: var(--mv-top) var(--mv-bottom);
}
.page-top__mv__photo {
  position: absolute;
  inset: 0;
}
.page-top__mv__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mv-focus);
}
/* 白い文字が読めるよう、写真の上端（ヘッダー）と下側（文字）を紺がかった黒で暗くする。
   下側の暗さは画面の高さの割合で止めるが、文字の塊はほぼ一定の高さなので、低い画面でも下から420px・640pxまでは暗くする。
   いちばん下は店の紺にして、続く CONCEPT の紺の地とつなげる */
.page-top__mv__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 17, 38, 0.6), rgba(12, 17, 38, 0) 180px),
    linear-gradient(to top, rgba(36, 50, 98, 0.95), rgba(12, 17, 38, 0.86) 120px, rgba(12, 17, 38, 0.5) max(45%, 420px), rgba(12, 17, 38, 0.12) max(75%, 640px));
}
/* 「Aoyama, Tokyo —」：細い字なので、明るい所に乗っても読めるよう影で縁取る */
.page-top__mv__lead2 {
  --accent: var(--amber);
  margin: 0 0 0.6em;
  color: var(--accent);
  font-family: var(--font-script);
  font-size: var(--size-lead);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 1px 3px rgba(12, 17, 38, 0.9), 0 0 14px rgba(12, 17, 38, 0.7);
}
.page-top__mv__lead2 span {
  position: relative;
  display: inline-block;
  padding-right: 1.5em;
}
.page-top__mv__lead2 span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto auto;
  width: 1em;
  height: 1px;
  background-color: var(--accent);
  transform: translate(0, -50%);
}
/* 「CASUAL RESORT」：PCは1行、タブレット・スマホは2行 */
.page-top__mv__lead {
  color: var(--bright);
  font-family: var(--font-display);
  font-size: var(--mv-title);
  font-weight: 400;
  line-height: var(--mv-title-lh);
  letter-spacing: 0.02em;
  text-align: left;
  text-shadow: 0 2px 24px rgba(12, 17, 38, 0.45);
}
.page-top__mv__lead br {
  display: var(--mv-title-break);
}
/* 日本語の見出し（h1）。語の途中で改行しない。Safari は keep-all だと読点でも折れないので、HTML の読点の後ろに wbr を入れてある */
.page-top__mv__text {
  margin: 2rem 0 0;
  color: var(--bright);
  font-family: var(--font-gothic);
  font-size: var(--mv-h1);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.06em;
  text-align: left;
  text-shadow: 0 1px 12px rgba(12, 17, 38, 0.6);
  word-break: keep-all;
}
.page-top__mv__links {
  display: flex;
  flex-flow: var(--mv-links-flow);
  align-items: var(--mv-links-align);
  gap: var(--mv-links-gap);
  margin-top: var(--mv-links-top);
}
.page-top__mv__links .p-button {
  flex-wrap: nowrap;
  gap: var(--mv-tel-gap, 2em);
  width: var(--mv-tel-width);
  white-space: nowrap;
}
.page-top__mv__links .p-button > svg {
  flex-shrink: 0;
}
/* PCの電話のボタンは一回り小さくする */
@media (min-width: 1001px) {
  .page-top__mv__links .p-button {
    --mv-tel-gap: 1.4em;
    --btn-icon: 1.6em;
    padding: 0.9em 1.3em;
    font-size: 15px;
  }
}
/* 「メニューを見る」は押せる高さを44px以上にし、下線は文字の下に置いたままにする */
.page-top__mv__links .p-link {
  --underline-gap: 9px;
  padding-block: 9px;
}
/* 縦長の画面（スマホ・縦向きのタブレット）では、横長の写真を縦に切ると店内の様子が分からなくなるので、
   横長のまま（4:3。左右を少しだけ切る）幅いっぱいに上へ置く。ヘッダーは写真の上に透明のまま重ねる。
   写真の下は紺でなくサイトの明るい地にし、写真の下の端をその地へなじませ、英字の見出し・説明文・電話を紺の文字で置く。
   CONCEPT（紺）までの空きは詰める */
@media (orientation: portrait) {
  .page-top__mv {
    --mv-focus: 42% 50%;
    /* 写真の下に置く文字の塊（「Aoyama, Tokyo」から電話のボタンまで）の高さの目安。タブレットは下で替える */
    --mv-text-room: 360px;
    display: block;
    min-height: 0;
    padding-top: 0;
    background-color: var(--paper);
  }
  .page-top__mv .section__wrap {
    margin-top: -1.6rem;
    padding-block: 0 2.6rem;
  }
  /* 明るい地の上の文字とボタン：「Aoyama, Tokyo」は朱、見出しと説明文は紺、電話は紺の塗り（ほかの明るい欄の電話と同じ形） */
  /* 「Aoyama, Tokyo」は写真のなじませた所に重なるので、明るい地の色で縁取って写真の茶色から浮かせる */
  .page-top__mv__lead2 {
    --accent: var(--vermilion);
    text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 12px var(--paper);
  }
  .page-top__mv__lead,
  .page-top__mv__text {
    color: var(--navy);
    text-shadow: none;
  }
  .page-top__mv__links .p-button {
    --btn-text: var(--bright);
    --btn-fill: var(--navy);
    --btn-line: var(--navy);
    --btn-texture: url(/image/common/bg.webp);
  }
  .page-top__mv__links .p-link {
    color: var(--navy);
    fill: var(--navy);
  }
  .page-top__mv + .page-top__concept {
    --cc-top: 3.6rem;
  }
  .page-top__mv__photo {
    position: relative;
    inset: auto;
  }
  .page-top__mv__photo img {
    height: auto;
    aspect-ratio: 4 / 3;
    /* 背の低い画面（Safari で開いた iPhone SE・9.7インチの iPad など）でも電話のボタンが最初の画面に入るよう、
       写真の高さは画面の高さから文字の塊の分を引いた所まで（上下を少し切る） */
    max-height: max(160px, calc(100vh - var(--mv-text-room)));
    max-height: max(160px, calc(100svh - var(--mv-text-room)));
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  .page-top__mv__photo::after {
    background: linear-gradient(to bottom, rgba(12, 17, 38, 0.6), rgba(12, 17, 38, 0) calc(var(--bar-h) + 24px));
  }
}
@media (orientation: portrait) and (min-width: 681px) {
  .page-top__mv {
    --mv-text-room: 420px;
  }
}

/* --- CONCEPT：ランチ・ディナー・貸切の3つ。大きな写真と文を左右交互に置き、小さな写真を添える --- */

.page-top__concept {
  /* 幅ごとの値：上の余白、見出しの下、3つのあいだ、最後の下、一覧の幅（タブレットは画面の端まで）、
     写真と文を横に並べるか（スマホは縦に積む）、文の箱の余白、小さな写真の組の位置と大きさ */
  --cc-top: 8rem;
  --cc-title-below: 6rem;
  --cc-between: 8rem;
  --cc-last: 4rem;
  --cc-list-width: auto;
  --cc-list-shift: 0;
  --cc-row: flex;
  --cc-text-pad: 5vw 5vw 0;
  --cc-text-width: 55%;
  --cc-photo-width: 65%;
  --cc-titlebox-pad: 0;
  --cc-text-align: inherit;
  --cc-stack: block;
  --cc-photo1-width: auto;
  --cc-photo1-shift: 0;
  --cc-photo3-width: auto;
  --cc-sub1-width: 125%;
  --cc-sub1-margin: 5vw 0 0 -25%;
  --cc-sub3-margin: 5vw 0 0;
  --cc-p32-width: 30%;
  --cc-p32-top: 15%;
  --cc-p32-frame: 3 / 4;
  --cc-p33-width: 65%;
}
@media (max-width: 1000px) {
  .page-top__concept {
    --cc-between: 6rem;
    --cc-list-width: 100vw;
    --cc-list-shift: calc(-1 * var(--edge));
  }
}
@media (max-width: 680px) {
  .page-top__concept {
    --cc-top: 6rem;
    --cc-title-below: 4rem;
    --cc-between: 3rem;
    --cc-last: 1rem;
    --cc-list-width: 100%;
    --cc-list-shift: 0;
    --cc-row: block;
    --cc-text-pad: 0;
    --cc-text-width: 100%;
    --cc-photo-width: 100%;
    --cc-titlebox-pad: 2.5rem 5vw 0;
    --cc-text-align: center;
    /* 文の箱の中は、小さな写真を上に、文を下にする */
    --cc-stack: flex;
    --cc-photo1-width: 86%;
    --cc-photo1-shift: -5vw;
    --cc-photo3-width: 75%;
    --cc-sub1-width: 95%;
    --cc-sub1-margin: -20% -5vw 0 auto;
    --cc-sub3-margin: -25% -5vw 0 auto;
    --cc-p32-width: 40%;
    --cc-p32-top: 20%;
    --cc-p32-frame: 1;
    --cc-p33-width: 55%;
  }
}
.page-top__concept .section__wrap {
  padding-top: var(--cc-top);
}
.page-top__concept .p-title__sec {
  margin-bottom: var(--cc-title-below);
}
.page-top__concept__list {
  width: var(--cc-list-width);
  margin-left: var(--cc-list-shift);
}
.page-top__concept__list__li + .page-top__concept__list__li {
  margin-top: var(--cc-between);
}
.page-top__concept__list__li:last-child {
  padding-bottom: var(--cc-last);
}
.page-top__concept__box {
  --accent: var(--amber);
}
.page-top__concept__box__wrap {
  display: var(--cc-row);
  flex-direction: var(--cc-dir, row);
  align-items: flex-start;
}
/* 1つ目と3つ目は写真が左、2つ目は写真が右 */
.page-top__concept__list__li:nth-child(odd) .page-top__concept__box__imageBox,
.page-top__concept__list__li:nth-child(even) .page-top__concept__box__textBox {
  flex: 1;
}
.page-top__concept__list__li:nth-child(odd) .page-top__concept__box__textBox {
  width: var(--cc-text-width);
}
.page-top__concept__list__li:nth-child(even) {
  --cc-dir: row-reverse;
}
.page-top__concept__list__li:nth-child(even) .page-top__concept__box__imageBox {
  width: var(--cc-photo-width);
}
.page-top__concept__box__textBox {
  padding: var(--cc-text-pad);
}
.page-top__concept__box__textBox .titleBox {
  padding: var(--cc-titlebox-pad);
}
.page-top__concept__box__textBox .p-title__box {
  text-align: var(--cc-text-align);
}
.page-top__concept__box__textBox .p-lead {
  margin-top: 0.5em;
  white-space: nowrap;
  text-align: var(--cc-text-align);
}
.page-top__concept__box__textBox .p-text {
  margin-top: 1em;
  text-align: justify;
}
.page-top__concept__box.box1 .page-top__concept__box__textBox,
.page-top__concept__box.box3 .page-top__concept__box__textBox {
  display: var(--cc-stack);
  flex-flow: column-reverse wrap;
  align-items: flex-start;
}
.page-top__concept__list__li .page-top__concept__box.box1 .page-top__concept__box__imageBox {
  width: var(--cc-photo1-width);
  margin-left: var(--cc-photo1-shift);
}
.page-top__concept__list__li .page-top__concept__box.box3 .page-top__concept__box__imageBox {
  width: var(--cc-photo3-width);
}
/* 小さな写真の組（ランチ・貸切）：ランチはPCで左へはみ出させる */
.page-top__concept__box__subimages {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.page-top__concept__box.box1 .page-top__concept__box__subimages {
  width: var(--cc-sub1-width);
  margin: var(--cc-sub1-margin);
}
.page-top__concept__box.box3 .page-top__concept__box__subimages {
  margin: var(--cc-sub3-margin);
}
.page-top__concept__box .image1_1,
.page-top__concept__box .image3_1 {
  --frame: 3 / 4;
}
.page-top__concept__box .image1_2 {
  --frame: 1;
  width: 35%;
  margin-top: 15%;
}
.page-top__concept__box .image1_3 {
  width: 60%;
}
.page-top__concept__box .image3_2 {
  --frame: var(--cc-p32-frame);
  width: var(--cc-p32-width);
  margin-top: var(--cc-p32-top);
}
.page-top__concept__box .image3_3 {
  --frame: 1;
  width: var(--cc-p33-width);
}
/* 欄の下の、幅いっぱいの写真（CONCEPT・NEWS・RESERVATION） */
.page-top__concept__bgimg,
.page-top__news__bgimg,
.page-top__reservation__bgimg {
  --frame: var(--wide-frame, 5 / 2);
}
@media (max-width: 1000px) {
  :root {
    --wide-frame: 2;
  }
}
@media (max-width: 680px) {
  :root {
    --wide-frame: 3 / 2;
  }
}

/* --- MENU：見出し・切り抜きのバーガー・5品の紹介・4つの入口・料理の写真の帯 --- */

.page-top__menu {
  /* 幅ごとの値：見出しのそろえ（PC・タブレットは左、スマホは真ん中）、バーガーの写真の大きさと位置、
     5品の並べ方（スマホは品名を左に置いた縦の一覧）、4つの入口の並べ方と余白 */
  --mn-title-align: flex-start;
  --mn-flourish-end: 0;
  --mn-flourish-right: none;
  --mn-lead: var(--size-lead);
  --mn-burger-width: 80%;
  --mn-burger-margin: -15% auto 4%;
  --mn-points-below: 6rem;
  --mn-points-row: flex;
  --mn-points-gap: 0 2rem;
  --mn-points-rule: 0;
  --mn-point-pad: 0;
  --mn-point-rule: 0;
  --mn-name-pos: static;
  --mn-name-size: var(--size-sub);
  --mn-name-below: 1rem;
  --mn-point-text: var(--size-text);
  --mn-point-track: 0.04em;
  --mn-point-lh: 1.9;
  --mn-point-below: 0.5rem;
  --mn-caption: var(--size-note);
  --mn-doors: grid;
  --mn-doors-below: 4rem;
  --mn-door-pad: 8rem 0;
  --mn-door-title: var(--size-box);
  --mn-door-text-below: 2rem;
  --mn-door-button: 0.8em 2.4em;
  --mn-shade: 0.5;
}
@media (max-width: 1000px) {
  .page-top__menu {
    --mn-burger-margin: -4rem auto 3rem;
    --mn-points-below: 4rem;
    --mn-points-gap: 1rem;
    --mn-point-text: calc(var(--size-text) - 1px);
    --mn-point-track: 0.02em;
    --mn-point-lh: 1.8;
    --mn-caption: 10px;
    --mn-door-title: 35px;
    --mn-shade: 0.7;
  }
}
@media (max-width: 680px) {
  .page-top__menu {
    --mn-title-align: center;
    --mn-flourish-end: 1.5em;
    --mn-flourish-right: block;
    --mn-lead: calc(var(--size-sub) + 2px);
    --mn-burger-width: 100%;
    --mn-burger-margin: -2rem auto 2rem;
    --mn-points-below: 3rem;
    --mn-points-row: block;
    --mn-points-rule: 1px;
    --mn-point-pad: 1rem 0 1rem 8.5rem;
    --mn-point-rule: 1px;
    --mn-name-pos: absolute;
    --mn-name-size: calc(var(--size-text) + 2px);
    --mn-name-below: 0;
    --mn-point-text: var(--size-text);
    --mn-point-track: 0;
    --mn-point-below: 0.2em;
    --mn-doors: block;
    --mn-doors-below: 3rem;
    --mn-door-pad: 3rem 0;
    --mn-door-title: var(--size-box);
    --mn-door-text-below: 1rem;
    --mn-door-button: 0.6em 1.8em;
    --large-gap: 3em;
    --large-size: var(--size-text);
  }
}
/* 見出しは左寄せで、飾り文字の右の線を消す（スマホは真ん中で、両脇に線） */
.page-top__menu .p-title__sec {
  --title-align: var(--mn-title-align);
  --flourish-end: var(--mn-flourish-end);
  --flourish-right: var(--mn-flourish-right);
}
.page-top__menu__head .p-lead {
  --lead-size: var(--mn-lead);
  color: var(--navy);
  line-height: 2.3;
}
.page-top__menu__burger {
  width: var(--mn-burger-width);
  max-width: 888px;
  margin: var(--mn-burger-margin);
}
.page-top__menu__burger img {
  width: 100%;
  height: auto;
}
.page-top__menu__point {
  margin-bottom: var(--mn-points-below);
}
.page-top__menu__point__ul {
  display: var(--mn-points-row);
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--mn-points-gap);
  border-bottom: var(--mn-points-rule) solid var(--hairline);
}
.page-top__menu__point__li {
  position: relative;
  flex: 1;
  padding: var(--mn-point-pad);
  border-top: var(--mn-point-rule) solid var(--hairline);
}
/* スマホでは品名を左の欄に置く */
.page-top__menu__point .p-title__sub {
  position: var(--mn-name-pos);
  top: 1.5rem;
  left: 0;
  margin-bottom: var(--mn-name-below);
  font-size: var(--mn-name-size);
}
.page-top__menu__point .p-text {
  margin-bottom: var(--mn-point-below);
  font-size: var(--mn-point-text);
  letter-spacing: var(--mn-point-track);
  line-height: var(--mn-point-lh);
  text-align: justify;
}
.page-top__menu__point .p-caption {
  font-size: var(--mn-caption);
}
/* 4つの入口：写真を暗く敷いた上に英字の名前とボタン */
.page-top__menu__list {
  margin-bottom: var(--mn-doors-below);
}
.page-top__menu__list__ul {
  display: var(--mn-doors);
  grid-template-columns: 1fr 1fr;
  text-align: center;
}
.page-top__menu__list__li {
  overflow: hidden;
}
.page-top__menu__list__box {
  --box-size: var(--mn-door-title);
  display: block;
}
.page-top__menu__list__box__wrap {
  position: relative;
  display: block;
  padding: var(--mn-door-pad);
}
/* 写真の箱は、入口の真ん中を基準に置く（指し示したときの暗さの変化を、写真の層ごと滑らかにする） */
.page-top__menu__list__box__imageBox {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  translate: -50% -50%;
}
.page-top__menu__list__box__imageBox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background-color: var(--ink);
  opacity: var(--mn-shade);
  transition: opacity 200ms ease;
  will-change: opacity;
}
.page-top__menu__list__box__imageBox .p-image {
  --frame: auto;
  height: 100%;
}
/* 名前とボタンは写真の上に置き、指し示しは下の写真の箱が受ける */
.page-top__menu__list__box__textBox {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.page-top__menu__list__box .p-text {
  margin: 0.5rem 0 var(--mn-door-text-below);
  color: var(--bright);
}
.page-top__menu__list__box .p-button {
  width: fit-content;
  margin-inline: auto;
  padding: var(--mn-door-button);
}
.page-top__menu .b-links .p-button {
  --btn-large-gap: var(--large-gap, 5em);
  font-size: var(--large-size, calc(var(--size-text) + 2px));
}
/* 料理の写真の帯（自動で横に流れる）。上に透明の膜を敷いて、指でつかんで止めないようにする */
.page-top__menu__splide {
  margin-bottom: 4rem;
}
.page-top__menu__splide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 写真の帯（Splide）。Splide が幅と位置を入れる。動き出すまでは隠す */
.js-splide {
  position: relative;
  visibility: hidden;
}
.js-splide.is-initialized {
  visibility: visible;
}
.splide__track {
  position: relative;
  overflow: hidden;
}
.splide__list {
  display: flex;
  block-size: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* 写真は縮めず、Splide が決めた幅のまま並べる */
.splide__slide {
  position: relative;
  flex: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* 帯の下の矢印は使わない（Splide が隠す）。点の並びは空のままなので、JS が動かないときも場所を取らせない */
.splide__pagination:empty {
  display: none;
}

/* --- PARTY：コース（白い箱）と貸切（線の箱）の2つ --- */

.page-top__menu,
.page-top__party,
.page-top__reservation {
  --title-below: 2rem;
}
.page-top__party {
  /* 幅ごとの値：2つの箱を横に並べるか（タブレット・スマホは縦）、箱の余白、箱の中の一覧の列、余白 */
  --pt-lead-below: 4rem;
  --pt-boxes-below: 4rem;
  --pt-boxes: repeat(2, minmax(0, 1fr));
  --pt-pad: 4rem;
  --pt-align: inherit;
  --pt-items: repeat(2, minmax(0, 1fr));
  --pt-items-gap: 2rem;
  --pt-price-below: 2rem;
}
@media (max-width: 1000px) {
  .page-top__party {
    --pt-boxes-below: 2rem;
    --pt-boxes: minmax(0, 1fr);
    --pt-pad: 3rem;
  }
}
@media (max-width: 680px) {
  .page-top__party {
    --pt-lead-below: 2rem;
    --pt-pad: 2rem;
    --pt-align: center;
    --pt-items: minmax(0, 1fr);
    --pt-items-gap: 1.5rem;
    --pt-price-below: 1.5rem;
  }
}
.page-top__party .p-lead {
  margin-bottom: var(--pt-lead-below);
  text-align: center;
}
.page-top__party__list {
  margin-bottom: var(--pt-boxes-below);
}
/* 2列の箱と中の一覧が、文字の長さで広がらないようにする */
.page-top__party__list__ul {
  display: grid;
  grid-template-columns: var(--pt-boxes);
  gap: 2rem;
}
.page-top__party .b-box {
  height: 100%;
  padding: var(--pt-pad);
  border: 1px solid var(--bright);
  border-radius: 1rem;
  background-color: var(--box-ground, var(--bright));
  text-align: var(--pt-align);
}
.page-top__party .b-box.party {
  --box-ink: var(--navy);
  --price-ink: var(--vermilion);
}
.page-top__party .b-box.drink {
  --accent: var(--amber);
  --box-ground: transparent;
  --price-ink: var(--bright);
  --item-ink: var(--bright);
  --item-note: var(--bright);
}
.page-top__party .b-box__ul {
  display: grid;
  grid-template-columns: var(--pt-items);
  gap: var(--pt-items-gap);
}
.page-top__party .b-box .price {
  position: relative;
  margin-bottom: var(--pt-price-below);
  color: var(--price-ink);
  font-family: var(--font-script);
  font-size: var(--size-sub);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}
/* 項目名（日本語）と英語の添え書き。項目名は HTML の <wbr> の所だけで折る */
.page-top__party__menu {
  display: block;
  font-family: var(--font-base);
  font-size: var(--size-text);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
.page-top__party__menu .title__wrap {
  font: inherit;
  letter-spacing: inherit;
}
.page-top__party__menu .title__main {
  display: block;
  color: var(--item-ink, var(--ink));
  font-family: var(--font-gothic);
  line-height: 1.4;
  text-transform: uppercase;
  word-break: keep-all;
}
.page-top__party__menu .title__sub {
  display: block;
  margin-top: 0.5em;
  color: var(--item-note, var(--muted));
  font-size: var(--size-note);
  letter-spacing: 0;
}
.page-top__party .p-attention {
  width: fit-content;
  margin-inline: auto;
}
.page-top__party .p-attention li {
  color: var(--bright);
}

/* --- NEWS：Instagram の投稿3件 --- */

.page-top__news {
  /* 幅ごとの値：箱の余白、3列の並びのすき間（スマホは写真を左に小さく置いた一覧） */
  --nw-title-below: 3rem;
  --nw-pad: 4rem;
  --nw-list-below: 4rem;
  --nw-columns: repeat(3, 1fr);
  --nw-gap: 3rem 7.5%;
  --nw-item-pad: 0;
  --nw-item-rule: 0;
  --nw-row: block;
  --nw-photo-width: auto;
  --nw-photo-below: 1rem;
  --nw-title-lh: 1.9;
}
@media (max-width: 1000px) {
  .page-top__news {
    --nw-pad: 3rem;
    --nw-gap: 3rem 1rem;
  }
}
@media (max-width: 680px) {
  .page-top__news {
    --nw-title-below: 2rem;
    --nw-pad: 2rem;
    --nw-list-below: 3rem;
    --nw-columns: 1fr;
    --nw-gap: 0 1rem;
    --nw-item-pad: 1rem 0;
    --nw-item-rule: 1px;
    --nw-row: flex;
    --nw-photo-width: 100px;
    --nw-photo-below: 0;
    --nw-title-lh: 1.8;
  }
}
.page-top__news .p-title__sec {
  margin-bottom: var(--nw-title-below);
}
.page-top__news__wrap {
  padding: var(--nw-pad);
  border-radius: 1rem;
  background-color: var(--paper-deep);
}
.page-top__news__list {
  margin-bottom: var(--nw-list-below);
}
.page-top__news__list__ul {
  display: grid;
  grid-template-columns: var(--nw-columns);
  gap: var(--nw-gap);
}
.page-top__news__list__li {
  padding: var(--nw-item-pad);
  border-bottom: var(--nw-item-rule) solid var(--hairline);
}
.page-top__news__box__wrap {
  display: var(--nw-row);
  flex-flow: row wrap;
  align-items: center;
  gap: 1rem;
}
.page-top__news__box__imageBox,
.page-top__news__box .titleBox {
  display: block;
}
.page-top__news__box__imageBox {
  --frame: 1;
  width: var(--nw-photo-width);
  margin-bottom: var(--nw-photo-below);
}
.page-top__news__box__textBox {
  flex: 1 1 0%;
}
.page-top__news__box .p-date {
  margin-bottom: 0.2em;
  color: var(--navy);
}
.page-top__news__box__title .title__main {
  font-family: var(--font-gothic);
  font-size: var(--size-text);
  line-height: var(--nw-title-lh);
  letter-spacing: 0.08em;
}

/* --- SHOP INFO：外観と店内の写真・営業時間・お店のサービス・地図と行き方 --- */

.page-top__info {
  /* 幅ごとの値：写真と営業時間を横に並べるか（タブレット・スマホは縦）、各ブロックの下の余白、
     お店のサービスの列、地図の縦横比と、地図と行き方を横に並べるか（スマホは縦） */
  --if-title-below: 4rem;
  --if-open-below: 4rem;
  --if-open-dir: row;
  --if-open-gap: 4rem;
  --if-photo-width: auto;
  --if-hours-width: 28rem;
  --if-hours-head-below: 2rem;
  --if-open-size: var(--size-lead);
  --if-hours-pad: 2rem;
  --if-services-below: 6rem;
  --if-services: repeat(3, 1fr);
  --if-service-pad: 2rem;
  --if-service-gap: 1rem;
  --if-icon: 5rem;
  --if-service-name: 15px;
  --if-service-track: 0.08em;
  --if-service-note: var(--size-note);
  --if-access-title-below: 3rem;
  --if-access-row: flex;
  --if-access-gap: 4rem;
  --if-access-below: 0;
  --if-map-width: 50%;
  --if-map-below: 0;
  --if-map-frame: 4 / 3;
  --if-text-pad: 4rem 0;
  --if-info-align: inherit;
  --if-info-box: block;
  --if-train-margin: 2rem 0;
}
@media (max-width: 1000px) {
  .page-top__info {
    --if-open-below: 3rem;
    --if-open-dir: column;
    --if-open-gap: 3rem;
    --if-photo-width: 100%;
    --if-hours-width: 60%;
    --if-services-below: 4rem;
    --if-services: repeat(2, 1fr);
    --if-access-title-below: 2rem;
    --if-access-gap: 2rem;
    --if-map-frame: 3 / 4;
  }
}
@media (max-width: 680px) {
  .page-top__info {
    --if-title-below: 2rem;
    --if-open-below: 2rem;
    --if-open-gap: 1.5rem;
    --if-hours-width: 100%;
    --if-hours-head-below: 1.5rem;
    --if-open-size: var(--size-big);
    --if-hours-pad: 1rem;
    --if-services-below: 3rem;
    --if-service-pad: 1.5rem 0.5rem;
    --if-service-gap: 0.5rem;
    --if-icon: 3.5rem;
    --if-service-name: var(--size-text);
    --if-service-track: 0;
    --if-service-note: 10px;
    --if-access-row: block;
    --if-access-below: 2rem;
    --if-map-width: 100%;
    --if-map-below: 1.5rem;
    --if-map-frame: 1;
    --if-text-pad: 0;
    --if-info-align: center;
    --if-info-box: inline-block;
    --if-train-margin: 2rem 0 1rem;
  }
}
.page-top__info .p-title__sec {
  margin-bottom: var(--if-title-below);
}
.page-top__info__open {
  margin-bottom: var(--if-open-below);
}
.page-top__info__open__wrap {
  display: flex;
  flex-flow: var(--if-open-dir) wrap;
  align-items: center;
  gap: var(--if-open-gap);
}
.page-top__info__open__imageBox {
  flex: 1;
  width: var(--if-photo-width);
}
.page-top__info__open__textBox {
  width: var(--if-hours-width);
}
.page-top__info__open .titleBox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--if-hours-head-below);
}
.page-top__info__open .p-title__box,
.page-top__info__access .p-title__box {
  --box-ink: var(--navy);
}
/* OPEN の横の時間：大きい数字と、かっこ書きの夜の時間 */
.page-top__info__open .open {
  color: var(--navy);
  font-family: var(--font-base);
  font-size: var(--if-open-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}
.page-top__info__open .open small {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--size-text);
  quotes: "(" ")";
}
.page-top__info__open .open small::before {
  content: open-quote;
}
.page-top__info__open .open small::after {
  content: close-quote;
}
.page-top__info__open .p-dl {
  padding: var(--if-hours-pad);
  border: 1px solid var(--navy);
  border-radius: 1rem;
}
.page-top__info__open .p-dl dl {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.page-top__info__open .p-dl dl * {
  color: var(--navy);
  font-family: var(--font-base);
  font-size: calc(var(--size-text) + 2px);
  line-height: 2;
  letter-spacing: 0.08em;
}
.page-top__info__open .p-dl dd {
  padding-inline-start: 4rem;
}
/* 写真の切り替え（6枚がゆっくり重なって入れ替わる）と、右下の丸い印 */
.js-slide,
.js-slide__ul {
  position: relative;
}
.js-slide__ul {
  aspect-ratio: 3 / 2;
}
.js-slide__li {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1200ms ease 100ms;
  will-change: opacity;
}
.js-slide__li.is-current {
  z-index: 100;
  opacity: 1;
  transition: opacity 1000ms ease;
}
.js-slide__image {
  display: block;
  block-size: 100%;
}
.slide-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  margin: 0;
  padding: 0.5rem calc(0.5rem + 5px);
}
.slide-dots button {
  position: relative;
  display: block;
  width: 1.6rem;
  aspect-ratio: 1;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}
/* 選んでいない印は白い点、選んでいる印は白い輪の中の紺の点 */
.slide-dots button::before,
.slide-dots button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  translate: -50% -50%;
}
.slide-dots button::before {
  width: 17px;
  height: 17px;
  border: 1px solid var(--navy);
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
  will-change: opacity;
}
.slide-dots button::after {
  width: var(--dot, 6px);
  height: var(--dot, 6px);
  background-color: var(--dot-ink, rgba(255, 255, 255, 0.9));
  transition: background-color 200ms ease, width 200ms ease, height 200ms ease;
}
.slide-dots button[aria-current="true"] {
  --dot: 8px;
  --dot-ink: var(--navy);
}
.slide-dots button[aria-current="true"]::before {
  opacity: 1;
}
/* お店のサービス（6つ）：アイコンと名前のタイル */
.page-top__info__list {
  margin-bottom: var(--if-services-below);
}
/* 6つのタイルを2pxのすき間で並べ、外側の角だけ丸める */
.page-top__info__list__wrap {
  overflow: hidden;
  border-radius: 1rem;
}
.page-top__info__list__ul {
  display: grid;
  grid-template-columns: var(--if-services);
  gap: 2px;
}
.page-top__info__list__li {
  display: flex;
  align-items: center;
  gap: var(--if-service-gap);
  padding: var(--if-service-pad);
  background-color: var(--paper-deep);
}
.page-top__info__list__li svg {
  width: var(--if-icon);
  height: var(--if-icon);
  fill: var(--navy);
}
.page-top__info__list__title .title__main {
  display: block;
  color: var(--navy);
  font-family: var(--font-gothic);
  font-size: var(--if-service-name);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--if-service-track);
}
.page-top__info__list__title .title__sub {
  display: block;
  margin-top: 0.2em;
  color: var(--muted);
  font-family: var(--font-base);
  font-size: var(--if-service-note);
  line-height: 1;
  letter-spacing: 0;
}
/* 地図と行き方 */
.page-top__info__access .p-title__box {
  margin-bottom: var(--if-access-title-below);
  text-align: center;
}
.page-top__info__access__wrap {
  display: var(--if-access-row);
  flex-flow: row wrap;
  align-items: center;
  gap: var(--if-access-gap);
  margin-bottom: var(--if-access-below);
}
.page-top__info__access__imageBox {
  --map-frame: var(--if-map-frame);
  width: var(--if-map-width);
  margin-bottom: var(--if-map-below);
}
.page-top__info__access__textBox {
  flex: 1;
  padding: var(--if-text-pad);
}
.page-top__info__access .p-info {
  --foot-info: var(--if-info-box);
  text-align: var(--if-info-align);
}
.page-top__info__access .access {
  margin: var(--if-train-margin);
  padding: 2rem;
  border-radius: 1rem;
  background-color: var(--paper-deep);
}
.page-top__info__access .access dl {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 100%;
}
/* 「電車」と行き方のあいだの縦の線：「電車」を左に、文字1つ分の高さの線を右の端に並べる */
.page-top__info__access .access dt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  inline-size: 3rem;
  margin-inline-end: 1rem;
  font-family: var(--font-gothic);
  font-size: calc(var(--size-text) - 1px);
  line-height: 2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-top__info__access .access dt::after {
  content: "";
  inline-size: 1px;
  block-size: 1em;
  background-color: var(--hairline);
}
.page-top__info__access .access dd {
  flex: 1;
}
.page-top__info__access .access .p-text {
  font-size: calc(var(--size-text) - 1px);
}
.page-top__info__access .p-attention li {
  color: var(--navy);
}

/* --- FAQ（主な4つ。すべては /guide/ に置く） --- */

.page-top__faq__wrap {
  max-width: 880px;
  margin: 0 auto;
}
.page-top__faq .b-faq,
.page-top__faq .b-links {
  margin-top: 4rem;
}

/* --- RESERVATION：電話と Instagram のボタン、食べログ、予約の前に読む注意 --- */

.page-top__reservation {
  /* 幅ごとの値：中身の幅、各ブロックの下の余白、ボタンを横に並べるか（スマホは縦）、注意の枠の余白 */
  --rs-width: 80%;
  --rs-lead-below: 4rem;
  --rs-buttons-below: 4rem;
  --rs-link-below: 4rem;
  --rs-note-pad: 4rem;
  --rs-note-title-below: 1.5rem;
}
@media (max-width: 1000px) {
  .page-top__reservation {
    --rs-width: 100%;
    --rs-lead-below: 3rem;
    --rs-buttons-below: 3rem;
    --rs-link-below: 3rem;
  }
}
@media (max-width: 680px) {
  .page-top__reservation {
    --rs-lead-below: 2rem;
    --rs-buttons-below: 2rem;
    --rs-note-pad: 2rem;
    --rs-note-title-below: 1rem;
    --links-flow: column wrap;
  }
}
.page-top__reservation__wrap {
  width: var(--rs-width);
  max-width: 888px;
  margin-inline: auto;
}
.page-top__reservation .p-lead {
  margin-bottom: var(--rs-lead-below);
  color: var(--navy);
  text-align: center;
}
.page-top__reservation .b-links {
  margin-bottom: var(--rs-buttons-below);
}
.page-top__reservation .b-links .p-button {
  flex: 1 1 0%;
}
.page-top__reservation .p-link {
  margin: 0 auto var(--rs-link-below);
}
.page-top__reservation .caption {
  padding: var(--rs-note-pad);
  border-radius: 1rem;
  background-color: var(--paper);
}
.page-top__reservation .caption .title {
  margin-bottom: var(--rs-note-title-below);
  color: var(--navy);
  font-family: var(--font-gothic);
  font-size: var(--size-sub);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-align: center;
}
.page-top__reservation .caption .p-attention {
  font-size: calc(var(--size-text) - 1px);
}
.page-top__reservation .caption .p-attention li {
  color: var(--navy);
  font-family: var(--font-gothic);
  line-height: 2;
  letter-spacing: 0.08em;
}

/* ===== 指し示したとき（PC。1000px以上） ===== */

@media (min-width: 1000px) {
  .l-header__logo:hover,
  .p-pankuzu a:hover {
    opacity: 0.5;
  }
  .l-header__nav__li:not(.reservation) .l-header__nav__link:hover,
  .l-header__hbg__modal__nav__li:not(.reservation) .l-header__hbg__modal__nav__link:hover {
    color: var(--vermilion);
  }
  .l-header__nav__li.reservation .l-header__nav__link:hover {
    border-color: var(--bright);
    background-color: transparent;
    color: var(--bright);
    fill: var(--bright);
  }
  .p-text a:hover,
  .p-lead a:hover,
  .p-caption a:hover,
  .p-attention li a:hover,
  .p-table td > span a:hover,
  .p-info .info dd a:hover,
  .l-footer__nav a:hover {
    text-decoration-line: none;
  }
  /* ボタン：塗りと線を入れ替える */
  .p-button:hover {
    --btn-solid: 0;
    --btn-text: var(--navy);
  }
  .p-button.is-color__reverse:hover {
    --btn-solid: 1;
    --btn-text: var(--bright);
  }
  .p-button.is-color__white:hover {
    --btn-text: var(--bright);
  }
  .p-button.is-color__white.is-color__reverse:hover,
  .page-top__menu__list__box:hover .p-button {
    --btn-solid: 1;
    --btn-text: var(--navy);
  }
  .l-header__hbg__modal .p-sns .p-button:hover,
  .l-footer .p-sns .p-button:hover {
    --btn-solid: 1;
    --btn-text: var(--bright);
  }
  .p-info .add a:hover {
    --pill-text: var(--vermilion);
    --pill-fill: transparent;
  }
  .l-header__hbg__modal .p-info .add a:hover,
  .l-footer .p-info .add a:hover {
    --pill-text: var(--bright);
    --pill-fill: var(--vermilion);
    --pill-line: var(--vermilion);
  }
  /* 下線は右へ縮んで消え、離すと左から伸びる */
  .p-link:hover::after {
    transform: scaleX(0);
    transform-origin: right center;
  }
  .p-map.is-ovh:hover {
    --map-veil: 0.6;
    --map-label: 1;
    --map-label-drop: 0px;
  }
  .js-totop__float:hover .js-totop__float__fig {
    --fig-ink: var(--vermilion);
  }
  .slide-dots button:hover {
    --dot: 8px;
  }
  .page-top__menu__list__box__imageBox:hover {
    --mn-shade: 0.8;
  }
  .page-top__news__box:hover .page-top__news__box__title .title__main {
    color: var(--navy);
  }
}

/* ===== 動き ===== */

/* 下からふわっと出る（js-sa__up）と、一覧が順に出る（js-sa__list__op）。
   JS が画面の帯（上10%〜下95%）の外にあるものに is-waiting を付け、帯に入ったら外す。JS が動かないときは最初から見える。
   一覧の項目は、JS が入れる順番（--order）ごとに 0.06 秒ずつ遅らせる */
.js-sa__up {
  transition: opacity 400ms ease, transform 400ms ease;
  will-change: opacity, transform;
}
.js-sa__up.is-waiting {
  opacity: 0;
  transform: translate(0, 2rem);
}
.js-sa__list__op li {
  transition: opacity 400ms ease calc(var(--order, 0) * 60ms);
  will-change: opacity;
}
.js-sa__list__op.is-waiting li {
  opacity: 0;
}
/* 写真のゆっくりした上下の動き：JS がスクロールに合わせて --shift（写真の中のずれ）と --lift（浮き沈み）を入れる */
.js-sa__image {
  transform: translate3d(0, var(--shift, 0%), 0) scale(var(--zoom, 1));
  will-change: transform;
}
.js-sa__float {
  transform: translate3d(calc(var(--range-x, 0px) * var(--lift, 0)), calc(var(--range-y, 0px) * var(--lift, 0)), 0);
  will-change: transform;
}
/* 読み込みの直後に状態をそろえる間は、動きを止める */
.is-booting *,
.is-booting *::before,
.is-booting *::after {
  transition: none !important;
}
/* 動きを減らす設定の人には、下からの動きをせず、ふわっと出るだけにする */
@media (prefers-reduced-motion: reduce) {
  .js-sa__up.is-waiting {
    transform: none;
  }
}
/* 印刷では、まだ出ていない文と一覧も、初めから出した形で刷る */
@media print {
  .js-sa__up.is-waiting,
  .js-sa__list__op.is-waiting li {
    opacity: 1;
    transform: none;
  }
}