/* Google Fonts 由来の3書体をセルフホストする（fonts/）。外部への通信は無い。
   収録字はサイト内で使う文字＋かな・英数・記号だけに絞ってあるので、
   文章に新しい漢字を足したら python3 tools/build-fonts.py で作り直すこと。
   サブセット済みで分割していないため unicode-range は付けない */
@font-face {
  font-family: "Noto Sans JP";
  src: url("fonts/noto-sans-jp.woff2") format("woff2");
  /* 可変フォントなので400/500/700が1ファイルで賄える */
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("fonts/shippori-mincho-600.woff2") format("woff2");
  /* こちらは静的フォントなのでウェイトごとにファイルが要る */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho";
  src: url("fonts/shippori-mincho-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald.woff2") format("woff2");
  /* 可変フォント。500/700が1ファイル */
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --base: #ffffff; /* 白（AIベージュを排除）*/
  --text: #2b1e19; /* 濃茶（本文・見出し）*/
  --wood: #7a5847; /* 補助の茶 */
  --red: #bc2a1d; /* 深く鮮やかな赤（主役）*/
  --amber: #e8a11c; /* 飴色（少量スパイス）。ソフト・かき氷まわりのワンポイント用に確保。現在CSSでは未使用 */
  --line: #ece6dd; /* 極薄の罫線 */
  --serif: "Shippori Mincho", serif; /* 見出し */
  --sans: "Noto Sans JP", sans-serif; /* 本文 */
  --num: "Oswald", "Noto Sans JP", sans-serif; /* 数字（0-9だけ効く）*/
  /* stickyヘッダーの高さ。ナビのオーバーレイ位置とアンカーのずれ補正で共用する */
  --header-h: 64px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--base);
  line-height: 1.9;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
section {
  padding: 76px 0;
}
/* ヘッダーがstickyなので、ナビのアンカーで飛んだとき見出しが下に潜らないようにする */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.eyebrow {
  font-family: var(--num);
  color: var(--red);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
}
h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin: 8px 0 30px;
  line-height: 1.35;
}

/* header */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--base);
  border-bottom: 1px solid var(--line);
}
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
/* ロゴ＝筆文字＋落款のユニット。--logo-h だけで両方まとめて拡大縮小する */
.logo {
  /* 「しんたろう」の表示高さ。落款の大きさと間隔はここから比率で決まる */
  --logo-h: 36px;
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.22);
}
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
/* 落款（いか焼き 大判焼のハンコ）。印影は6文字あり、右列「いか焼き」の1文字は
   箱の高さの約17%しかない。文字が読める大きさ（1文字10px＝箱60px）はロゴを超えてしまうので、
   落款の立場を保てる上限＝箱の高さを「しんたろう」とほぼ同じ（--logo-h の0.90倍）にしている。
   canvasに対する墨の高さは logo.png 0.943 / hanko.webp 0.864 なので、墨だけ比べると約82%。
   見た目の大きさを変えたいときはこの 0.90 だけを動かす。画像を差し替えたら比を測り直すこと */
.logo .logo-hanko {
  height: calc(var(--logo-h) * 0.9);
  /* 完全な上下中央よりわずかに下寄りに座らせる */
  transform: translateY(5%);
}

/* ハンバーガーボタン（720px未満のみ表示）*/
.nav-toggle {
  appearance: none;
  background: none;
  border: 0;
  /* アイコン28px＋左右12pxでタップ領域52px。見た目の右端はwrapの内側に揃える */
  padding: 12px;
  margin-right: -12px;
  cursor: pointer;
}
/* 三本線(78×49)と×(78×71)は縦横比が違うので、共通の正方形に contain で収める。
   幅がほぼ同じ原画なので幅基準で揃い、開閉で切り替えてもボタンの寸法が動かない */
.nav-toggle-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.nav-toggle-x {
  display: none;
}
/* 開いている間だけ×に入れ替える */
body.nav-open .nav-toggle-bars {
  display: none;
}
body.nav-open .nav-toggle-x {
  display: block;
}

/* グローバルナビ（720px未満はヘッダー下を覆う全画面オーバーレイ）*/
.global-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--base);
  display: flex;
  flex-direction: column;
  padding: 8px 24px 40px;
  /* 画面が低いときにリンクが切れないように */
  overflow-y: auto;
  /* 閉じているとき。visibilityなのでタブ順からも外れる */
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    visibility 0.18s;
}
body.nav-open .global-nav {
  visibility: visible;
  opacity: 1;
}
/* 開いている間は背後をスクロールさせない */
body.nav-open {
  overflow: hidden;
}
.global-nav a {
  color: var(--text);
  text-decoration: none;
  /* オーバーレイでは見出しと同じ明朝で大きめに */
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.global-nav a:last-child {
  border-bottom: none;
}
.global-nav a:hover,
.global-nav a:focus-visible {
  color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .global-nav {
    transition: none;
  }
}

/* hero（実店舗写真・フルブリード）*/
.hero {
  line-height: 0;
}
.hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* news */
.news-item {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  gap: 20px;
}
.news-date {
  font-family: var(--num);
  color: var(--red);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  letter-spacing: 0.06em;
}

/* about */
/* キャッチコピー。見出しと同じ明朝で本文より一段大きく。囲みや色は付けない */
.about-catch {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.04em; /* h2・.policy-heading と同値 */
  line-height: 1.6;
  margin-bottom: 18px;
}
/* 既定だと日本語はどこでも折れて「…まちのお／店。」になる。
   読点で切った2つを inline-block にして、折り返しをその境目だけに限る */
.about-catch span {
  display: inline-block;
}
/* 本文はサイト共通のサイズのまま。段落間はプライバシーポリシー本文と同じ空け方 */
.about-text p + p {
  margin-top: 14px;
}

/* 営業時間・アクセスの情報リスト（ラベル左／内容右）*/
.info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 600px;
}
.info-list dt,
.info-list dd {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.info-list dt {
  color: var(--wood);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  padding-right: 28px;
}
.info-list dd {
  /* 時刻・番地の数字だけOswaldが効く（並び順で制御）*/
  font-family: var(--num);
}

/* Googleカレンダー・Googleマップの埋め込み枠（薄い罫線のみ・影なし）*/
.embed-frame {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.embed-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}
.calendar-embed {
  margin-top: 28px;
}
.calendar-embed iframe {
  height: 440px;
}
.map-embed {
  margin-bottom: 28px;
}
.map-embed iframe {
  height: 300px;
}

/* footer（ヘッダーと同じ白地・赤ロゴ）*/
footer {
  background: var(--base);
  color: var(--text);
  text-align: center;
  padding: 44px 24px;
  border-top: 1px solid var(--line);
}
/* footerのロゴユニット。--logo-h 以外はheaderと同じ比率をそのまま共有する。
   flexの中身なので footer の text-align: center は効かない（justify-contentで中央寄せ）*/
.logo-foot {
  --logo-h: 48px;
  justify-content: center;
  margin: 0 auto 6px;
}
footer small {
  color: var(--wood);
  letter-spacing: 0.1em;
}
.footer-nav {
  margin-top: 18px;
}
.footer-nav a {
  color: var(--wood);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--red);
  border-bottom-color: currentColor;
}

/* プライバシーポリシー */
.page-head {
  margin-bottom: 36px;
}
.page-head h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin: 4px 0 0;
  line-height: 1.35;
}
.policy-body {
  max-width: 720px;
}
.policy-section {
  /* section要素の共通paddingを打ち消し、節ごとの間隔は余白で作る */
  padding: 0;
  margin-bottom: 40px;
}
.policy-section:last-of-type {
  margin-bottom: 0;
}
.policy-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.policy-body p {
  font-size: 0.95rem;
}
.policy-body p + p {
  margin-top: 14px;
}
.policy-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 12px 0;
  font-size: 0.95rem;
}
.policy-link-wrap a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.policy-date {
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--wood);
}

@media (min-width: 720px) {
  h2 {
    font-size: 2.2rem;
  }
  /* PCではヘッダーを画面幅いっぱいに広げる（ロゴ最左・ナビ最右）*/
  header .wrap {
    max-width: none;
    padding: 0 clamp(24px, 4vw, 48px);
  }
  /* PCではハンバーガーを隠し、ナビを横並びに戻す */
  .nav-toggle {
    display: none;
  }
  .global-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    padding: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .global-nav a {
    font-family: var(--sans);
    font-size: 0.9rem;
    letter-spacing: normal;
    padding: 0;
    margin-left: 20px;
    border-bottom: none;
  }
  /* PCではヒーローの高さをスマホ相当に固定（横フルのまま上下をトリミング）*/
  .hero img {
    height: 420px;
    object-fit: cover;
    object-position: center;
  }
  /* PCではメニュー合成画像2枚を左右2列に */
  .menu-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 行方向は、1段目の看板と2段目の商品（先端が箱の上端まで来るソフトクリーム）が
       近づきすぎない程度に。列方向は 2rem = 従来の32px のまま */
    --menu-row-gap: 3rem;
    gap: var(--menu-row-gap) 2rem;
    /* 左右の値段看板の下端を揃える */
    align-items: end;
    margin-bottom: 20px;
  }
  .menu-features .ikayaki-feature {
    max-width: none;
    margin: 0;
  }
  /* かき氷の補足＋詳細メニューは3行目の右列（＝かき氷の真下）に置く。
     商品と同じセルに入れるとかき氷だけ背が高くなり、2段目の看板の下端揃えが崩れる。
     行gapは商品同士の間隔なので、看板と地続きに見えるよう同じ分だけ詰め戻す */
  .menu-features .kakigori-details {
    grid-column: 2;
    max-width: none;
    margin: calc(var(--menu-row-gap) * -1) 0 0;
  }
  /* PCではお店についてを 文言左・画像右 の2カラムに */
  .about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .about-cols .about-photo {
    margin-top: 0;
  }
  /* 見出しがPCで大きくなるのに合わせて、キャッチも一段上げる */
  .about-catch {
    font-size: 1.4rem;
  }
  /* PCでは埋め込みを大きめに */
  .calendar-embed iframe {
    height: 560px;
  }
  .map-embed iframe {
    height: 380px;
  }
  .page-head h1 {
    font-size: 2.2rem;
  }
}

/* セクション見出し左のアイコン */
.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.icon-hours {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
}
.icon-menu {
  height: 56px;
  width: auto;
  display: block;
  flex: none;
}
.icon-access {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
}
.icon-about {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
}
.icon-news {
  height: 50px;
  width: auto;
  display: block;
  flex: none;
}
.sec-head-txt h2 {
  margin: 4px 0 0;
}
/* お店について 写真（3枚の自動スライダー）。
   ここは表示領域の箱。比率で高さが決まるので、画像が切り替わっても
   セクションの高さも文章の位置も動かない */
.about-photo {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 30px;
  aspect-ratio: 4 / 3; /* 3枚とも4:3 */
  overflow: hidden; /* はみ出した画像を隠す */
}
/* 3枚＋複製1枚を横一列に並べたトラック。箱の幅は表示領域と同じなので、
   translateX の -100% がちょうど1枚分になる */
.about-track {
  display: flex;
  height: 100%;
  animation: about-slide 18s ease-in-out infinite;
}
.about-track img {
  flex: 0 0 100%; /* 1枚＝表示領域の幅 */
  height: 100%;
  object-fit: cover;
}
/* 静止5秒 → 1秒かけて左へスライド、を3回（1周18秒）。
   最後は複製した1枚目の位置で終わり、次の周回の頭（同じ絵）に戻るので巻き戻りが見えない */
@keyframes about-slide {
  0%,
  27.778% {
    transform: translateX(0);
  }
  33.333%,
  61.111% {
    transform: translateX(-100%);
  }
  66.667%,
  94.444% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-300%);
  }
}

/* いか焼き・大判焼フィーチャー（写真の下に値段看板を少し重ねる）*/
.ikayaki-feature {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px;
}
.ikayaki-photo {
  display: block;
  width: 72%;
  max-width: 420px;
  /* 商品ごとに写真の比率が違うので、全商品共通の箱に収める。
     箱の高さが揃う＝看板の位置が揃う。5/4は4品の見かけの大きさが最も揃う比率 */
  aspect-ratio: 5 / 4;
  object-fit: contain;
  /* 被写体の下端を箱の下端に合わせ、看板との重なり量を全商品で同じにする */
  object-position: center bottom;
  margin: 0 auto;
}
.ikayaki-sign {
  display: block;
  width: 86%;
  max-width: 540px;
  /* 上マイナスマージンで皿の下端にわずかに重ねる（%なので画面幅に追従）*/
  margin: -3.5% auto 0;
}

/* かき氷の補足＋詳細メニュー（アコーディオン）。
   看板の直下に続くブロックなので、商品と同じ幅・中央揃えに合わせる */
.kakigori-details {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px;
  /* お品書きの折り返しは「かき氷カラムの幅」で決めたい。PCの2列でもカラム幅は
     画面幅で変わるので、ビューポートではなくコンテナ幅で切り替える
     （720pxのメディアクエリだとPC最小幅でお品書きの横一列が入りきらない）*/
  container-type: inline-size;
}
/* 夏季限定の注記。値段看板より目立たせないので補助色＋小さめ */
.kakigori-season {
  color: var(--wood);
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 0.6em;
}
/* 開閉ボタン。既存の埋め込み枠と同じ「薄い罫線＋角丸6px・影なし」に合わせる */
.kakigori-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.7em;
  padding: 0.5em 1.1em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--base);
  color: var(--red);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
}
.kakigori-toggle:hover,
.kakigori-toggle:focus-visible {
  border-color: var(--red);
}
.kakigori-toggle-mark::before {
  content: "▼";
  font-size: 0.75em;
}
.kakigori-toggle[aria-expanded="true"] .kakigori-toggle-mark::before {
  content: "▲";
}
/* 開閉アニメーション。高さをpxで決め打ちしなくて済むよう 0fr→1fr で伸ばす */
.kakigori-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}
.kakigori-toggle[aria-expanded="true"] + .kakigori-panel {
  grid-template-rows: 1fr;
}
.kakigori-panel-inner {
  overflow: hidden;
  /* 閉じている間はタブ順・読み上げからも外す（グローバルナビと同じ考え方）*/
  visibility: hidden;
  transition: visibility 0.24s;
}
.kakigori-toggle[aria-expanded="true"] + .kakigori-panel .kakigori-panel-inner {
  visibility: visible;
}
/* 中身の余白は閉じたとき0にならないと隙間が残るので、inner ではなく内側に持たせる */
.kakigori-panel-inner > :first-child {
  margin-top: 0.9em;
}
/* お品書き本体。既存の値段看板を実測して合わせている
   （枠＝赤・地＝ほぼ白・商品名＝黒・価格＝赤）。カードを4枚並べるのではなく、
   1枚の枠の中を細い区切り線で分ける。幅は .ikayaki-sign と同じ 86%/540px なので、
   「かき氷 180円」の看板と左右端がちょうど重なる */
.kakigori-board {
  /* 商品名の筆文字画像に共通の「墨そのものの高さ」。3枚の見た目を揃える基準 */
  --name-h: 1.2rem;
  /* 区切り線。新しい赤を足さず、主役色を薄めて作る */
  --board-rule: color-mix(in srgb, var(--red) 25%, transparent);
  width: 86%;
  max-width: 540px;
  margin-inline: auto;
  border: 3px solid var(--red);
  background: var(--base);
  text-align: left;
  font-size: 0.9rem;
  display: grid;
  /* 狭いとき: ラベル / 価格 の2列。商品名と味の一覧は全幅に置く */
  grid-template-columns: auto 1fr;
  column-gap: 0.9em;
}
/* 行ごとに独立したグリッドにすると auto 列の幅が行ごとに変わり、
   「宇治金時だけ価格が右へずれる」。subgrid で親の列を共有して全行を揃える */
.kakigori-board-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  /* 商品名の段だけは、一番背の高い宇治金時の画像に高さを合わせる。
     画像側に min-height を付けると width:auto が引きずられて墨の高さが揃わなくなるので、
     行トラックの下限として指定する */
  grid-template-rows: minmax(calc(var(--name-h) / 0.667), auto);
  align-items: center;
  row-gap: 0.25em;
  padding: 0.75em 0.9em;
}
.kakigori-board-row + .kakigori-board-row {
  border-top: 1px solid var(--board-rule);
}
/* 狭いときは商品名と味の一覧を独立した行にして、価格を下に折り返す */
.kakigori-board-name,
.kakigori-name,
.kakigori-flavors {
  grid-column: 1 / -1;
}
.kakigori-board-name {
  font-weight: 500;
  line-height: 1.5;
}
/* 「（7種類）」は商品名に続けて小さく置く（商品名は全幅の独立行なので改行しない）*/
.kakigori-board-count {
  display: inline;
  font-size: 0.8em;
  color: var(--wood);
}
.kakigori-flavors {
  font-size: 0.85rem;
  line-height: 1.8;
  /* 既定だとCJKはどこでも折れて「マンゴー・み／ぞれ」のように味名が分断される。
     keep-all で味名の途中では折らず、中黒の位置で折り返す。
     ただしSafariは keep-all だと中黒でも折らないので、HTML側の <wbr> で
     折り返し位置を明示している（消さないこと）*/
  word-break: keep-all;
  /* 最後の保険。1つの味名すら入らない極端に狭い幅でも、枠を突き抜けさせない */
  overflow-wrap: anywhere;
}
/* 価格をまとめている箱は見た目を持たない。display: contents で消すと4つの span は
   .kakigori-board-row（subgrid）の直接の子として扱われるので、狭いときは金時・宇治と
   同じ「ラベル＝1列目／価格＝2列目」に自動で積まれ、横一列のときは下のブロックで
   2〜5列目に置ける。つまりシロップの価格は常に他の行と同じ組み方になる */
.kakigori-syrup-prices {
  display: contents;
}
.kakigori-price-label {
  font-size: 0.8rem;
}
/* 価格は看板と同じ赤。数字はOswaldが効く（並び順で制御）*/
.kakigori-price {
  font-family: var(--num);
  color: var(--red);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
/* 金時・宇治・宇治金時の商品名（筆文字の透過WebP）。
   3枚は文字数も余白の取り方も違うので、同じ width でも同じ height でも文字の大きさは揃わない。
   「墨の高さ」が揃うよう、実測した 墨の平均高さ÷canvas高さ で割って表示高さを画像ごとに決める
   （文字ごとに分割して実測: 金時0.916 / 宇治0.742 / 宇治金時0.667）*/
.kakigori-name {
  /* 高さ基準で決めるので幅は成り行き＝縦横比を維持 */
  width: auto;
  max-width: 100%;
  /* 万一カラム幅で頭打ちになっても潰さない（img{max-width:100%}がグローバルにあるため）*/
  object-fit: contain;
  object-position: left center;
}
.kakigori-name.is-kintoki {
  height: calc(var(--name-h) / 0.916);
}
.kakigori-name.is-uzi {
  height: calc(var(--name-h) / 0.742);
}
.kakigori-name.is-uzikintoki {
  height: calc(var(--name-h) / 0.667);
}
/* お品書きに横一列が入る幅があるときだけ、商品名と価格を1行に並べる */
@container (min-width: 30rem) {
  .kakigori-board {
    /* 商品名を1frにして余りを吸わせ、価格を右へまとめる */
    grid-template-columns: 1fr auto auto auto auto;
  }
  .kakigori-board-name,
  .kakigori-name {
    grid-column: 1;
  }
  .kakigori-flavors {
    grid-column: 1 / -1;
  }
  /* 「通常」と「クリーム入り」の区切り。align-items:center なのでラベルの高さ分だけ出る */
  .kakigori-price-label.is-cream {
    border-left: 1px solid var(--board-rule);
    padding-left: 0.9em;
  }
  /* シロップは商品名と価格の間に味の一覧が入るぶん自動配置が1列ずれるので、
     4つを他の行と同じ2〜5列目に置き直す。行は自動配置に任せる
     （商品名＝1行目・味の一覧＝2行目の下、3行目に4つ揃って入る）*/
  .kakigori-syrup-prices > :nth-child(1) {
    grid-column: 2;
  }
  .kakigori-syrup-prices > :nth-child(2) {
    grid-column: 3;
  }
  .kakigori-syrup-prices > :nth-child(3) {
    grid-column: 4;
  }
  .kakigori-syrup-prices > :nth-child(4) {
    grid-column: 5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kakigori-panel,
  .kakigori-panel-inner {
    transition: none;
  }
  /* スライダーは動かさず、1枚目（about01）で静止する */
  .about-track {
    animation: none;
  }
}

/* メニューセクション全体の下地 */
#menu {
  background: #f4f1eb;
}