/* 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; /* 極薄の罫線 */
  --menu-bg: #f4f1eb; /* メニューセクションだけの下地 */
  --serif: "Shippori Mincho", serif; /* 見出し */
  --sans: "Noto Sans JP", sans-serif; /* 本文 */
  --num: "Oswald", "Noto Sans JP", sans-serif; /* 数字（0-9だけ効く）*/
  /* 固定ヘッダーの高さ。スマホ60px／720px以上80px（PC側は下の @media で上書き）。
     ナビのオーバーレイの位置、本文の上余白、アンカーのずれ補正、ヒーローの max-height が
     まとめてこの値を見ている。52px角のハンバーガーで上下4pxしか残らないので、
     60pxより詰めるならボタンの寸法ごと見直すこと */
  --header-h: 60px;
  /* セクションの上下パディング。スマホ40px（セクション間80px）／720px以上56px（同112px）。
     区切り線を引かず余白だけでセクションを区切るので、これ以上詰めると境目が消える
     （セクション内で一番大きい余白は h2 の下30px。それより明確に大きく見せる必要がある）。
     .hero の max-height もこの値を見ているので、変えるのはここだけでよい */
  --section-pad: 40px;
}
* {
  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;
  /* width/height 属性による高さ固定を打ち消す（消すと .ikayaki-photo / .ikayaki-sign が
     原寸で表示されてメニューが数千px伸びる）。
     高さを自分で決めている .logo img などはセレクタが強いのでこれに負けない */
  height: auto;
}
/* 画面には出さないが読み上げには残すテキスト用。
   display:none だと読み上げからも消えるので、1pxに切り抜いて流し込みから外す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
/* セクションの上下余白。値は `--section-pad`（スマホ40px／PC56px）で持っている。
   `.hero` の `max-height` も同じ変数を見ているので、余白を変えるときは変数だけを動かす。
   privacy の `.policy-section` はこれを `padding: 0` で打ち消して、節の間隔を margin で作る */
section {
  padding: var(--section-pad) 0;
}
/* ヘッダーが fixed なので、アンカーで飛んだとき見出しが下に潜らないようにする */
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--scrolled のような後付けをしないこと）。
   --header-pad は wrap の左右パディング。.wrap の値を直接書かず変数で持つ */
/* ヘッダーに置くのは筆文字ロゴ＋落款と開閉ボタンの2つ。
   ロゴが出るのはヘッダーとフッターの2か所だけ */
header {
  --header-pad: 24px;
  /* ヘッダーの下地。うっすら背景が透ける白。不透明な白に戻さないこと
     （0.7 は黒い筆文字ロゴが暗い写真の上でも読める下限）*/
  --header-bg: rgba(255, 255, 255, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--header-bg);
}
header .wrap {
  padding: 0 var(--header-pad);
}
/* fixed のヘッダーのぶん本文を下げる（トップ・下層ページとも）。
   スクロール中に本文がヘッダーの下を通るのは fixed なので変わらない */
main {
  padding-top: var(--header-h);
}
/* 720px未満のメニューは画面を覆うので、開いている間だけヘッダーにも不透明の白を敷いて
   1枚の白い面に見せる。PCは下の @media で --header-bg に戻す */
body.nav-open header {
  background: var(--base);
}
.header-in {
  display: flex;
  align-items: center;
  /* 左に筆文字ロゴ＋落款、右に開閉ボタン。
     .global-nav は流れから外れているので、並ぶのはこの2つだけ */
  justify-content: space-between;
  height: var(--header-h);
}

/* ロゴのユニット＝筆文字（logo.png 1375×422）と落款（hanko.webp 200×198）。
   --logo-h だけで両方まとめて拡大縮小する。ヘッダーとフッターで同じユニットを使う */
.logo {
  /* 「しんたろう」の表示高さ。落款の大きさと間隔はここから比率で決まる */
  --logo-h: 36px;
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.22);
  /* リンクなので、下線と文字色の継承を切っておく */
  text-decoration: none;
}
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
/* 落款。箱の高さを「しんたろう」とほぼ同じ（--logo-h の0.90倍）にして、
   墨の高さで約82%に見せている。見た目の大きさを変えたいときはこの 0.90 を動かす。
   画像を差し替えたら墨とcanvasの比を測り直すこと */
.logo .logo-hanko {
  height: calc(var(--logo-h) * 0.9);
  /* 完全な上下中央よりわずかに下寄りに座らせる */
  transform: translateY(5%);
}

/* ハンバーガーボタン。出すのは720px未満だけ（PCは下の @media で隠す）*/
.nav-toggle {
  appearance: none;
  /* 下地は敷かない（ヘッダー自体の白でアイコンが写真に埋もれない）*/
  background: none;
  border: 0;
  /* アイコン28px＋左右12pxでタップ領域52px。見た目の右端はwrapの内側に揃える */
  padding: 12px;
  margin-right: -12px;
  cursor: pointer;
}
/* 三本線と×はどちらも 24×24 の正方形SVG（線色は黒 #000）。
   <img> で読んでいるのでCSSからは色を変えられない——変えるときはSVGの stroke を書き換える。
   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未満はヘッダーの下を覆う全画面オーバーレイ、
   720px以上は横並びのリンク（下の @media で上書き）。
   閉じているときの visibility / opacity と、リンクの見た目はここが本体 */
.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;
}
.global-nav a:hover,
.global-nav a:focus-visible {
  color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .global-nav {
    transition: none;
  }
}

/* hero。3枚を送る自動スライダー。全画面幅で同じ絵柄、重ねものは無し。
   動くのはCSSアニメーションだけで、JSは足さないこと（サイトで動く画像はここだけ）。

   | | |
   |---|---|
   | 画像 | 3枚とも 1366×768（比1.779）|
   | 動き | 静止5秒 → 1秒かけて浮き上がる。3枚で1周18秒 |

   比の違う素材を混ぜても object-fit: cover が吸収するが、切れ方がその1枚だけ変わる。
   画像の縁に黒いギザギザがあるものは素材に焼き込まれた黒なので触らない */
.hero {
  /* 中の .hero-track（absolute で重なる3枚）の位置の基準 */
  position: relative;
  line-height: 0;
  overflow: hidden; /* 隣のコマを隠す */
  /* 箱の比は画面幅で変える。スマホは 3:2（375px幅で250px）、PCは素材どおり（下の @media）。
     素材は比1.779なので、箱を高くするほど object-fit: cover で左右が切れて被写体が
     大きく写る（3:2で16%、4:3で25%、6:5で33%、1:1で44%）。切れるのは左右で上下ではない。
     cover は箱を埋める最小の拡大率なので、箱を高くしたまま引きの絵にはできない
     ——引きたければ箱を低くすること */
  aspect-ratio: 3 / 2;
  /* この width: 100% を消さないこと。aspect-ratio を持つブロックの幅が auto だと、
     下の max-height で高さが頭打ちになった瞬間に幅まで比に合わせて縮み、
     ヒーローの右側に白い余白ができる（横スクロールは出ないので気づきにくい）*/
  width: 100%;
  /* 高さの上限。無いとPCで画面より背の高いヒーローになり「お知らせ」が
     ファーストビューから消える。引いているのは「ヘッダー ＋ #news の上パディング ＋
     見出しの上側34px」で、これで「お知らせ」が必ず覗く。
     スマホ幅では 3:2 の高さがこの値に届かないので効かない */
  max-height: calc(100vh - var(--header-h) - var(--section-pad) - 34px);
}
/* 3枚を同じ場所に重ね、下から浮き上がる入れ替えで送る。
   rise-3 の1つのキーフレームを、負の animation-delay をずらして3枚に当てているだけ。
   3枚とも比1.779なので、スマホの 3:2 の箱ではどれも左右が16%切れる */
.hero-track {
  position: relative;
  height: 100%;
  /* これを消さないこと。中の写真は z-index を入れ替えながら浮き上がるので、
     isolate で重なりの文脈をここに閉じないと z-index が親まで漏れる */
  isolation: isolate;
}
.hero-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 浮き上がる高さ。動きを減らす設定のときだけ 0% にして、位置の移動をやめる
     （キーフレームは1本のまま切り替え自体は続ける。下の @media を参照）*/
  --rise: 2.5%;
  /* アニメーションが効かない場合に備えて素の状態は不透明。
     動いている間の opacity はキーフレームが持つ */
  opacity: 1;
  animation: rise-3 18s ease-in-out infinite;
  /* 1枚目は「浮き上がり終わった直後」から始める＝読み込み直後に動かない */
  animation-delay: -1s;
  object-fit: cover;
  /* 上の max-height で縦が切られるときに上を残す指定。
     画像を差し替えたらこの値を測り直すこと */
  object-position: center 25%;
}
/* 出番は 1周18秒 ÷ 3 ＝ 6秒おき。負の delay は「1周 − 出番の時刻」。
   1枚目の -1s のぶん全体が1秒ずれるので、2枚目は t=5秒（18−13）、3枚目は t=11秒（18−7）
   から浮き上がる。数字の並びが直感と逆に見えるが入れ替えないこと。
   枚数を変えたら「1周の秒数」「キーフレームの区切り」「z-indexの段数」も一緒に見直す。

   特定の1枚だけ寄せたくなったら、`transform` ではなく `scale` で書くこと
   （`transform` は浮き上がりのキーフレームが握っていて上書きし合う。
   `scale` は独立したプロパティなので重ねて効く）*/
.hero-track img:nth-child(2) {
  animation-delay: -13s;
}
.hero-track img:nth-child(3) {
  animation-delay: -7s;
}
/* 「下から浮き上がってくる」入れ替え・3枚用（1周18秒 ＝ 静止5秒 ＋ 浮き上がり1秒 を3回）。
   使うのはヒーロー（.hero-track）だけ。5.556% ＝ 1秒。33.333% ＝ 6秒。66.667% ＝ 12秒。

   白い地が透けないように z-index も一緒に動かしているのが肝。入ってくる1枚だけを最前面に
   置いて opacity を 0→1 にし、裏にいる1枚はずっと不透明のままにする。ふつうのクロスフェード
   （両方を半透明にする）にすると、入れ替わりの1秒だけ下地の白が透けて画面が光る。
   translateY(var(--rise)) から0へ戻すのが「浮き上がり」。上端にできる隙間は裏の1枚が埋める。
   --rise が 0% のときは位置が動かないので、同じ形のままクロスフェードになる。

   z-index は3段: 2＝浮き上がってくる1枚、1＝直前の1枚（浮き上がる絵の裏に居るのはここ）、
   0＝いちばん古い1枚。段を減らすとDOMの並び順が勝ち、裏に別の1枚が来る。
   枚数を変えるときは「1周の秒数」「キーフレームの区切り」「z-indexの段数」をまとめて作り直す */
@keyframes rise-3 {
  0% {
    opacity: 0;
    transform: translateY(var(--rise));
    z-index: 2;
  }
  5.556%,
  33.333% {
    opacity: 1;
    transform: translateY(0);
    z-index: 2;
  }
  33.34%,
  66.667% {
    opacity: 1;
    transform: translateY(0);
    z-index: 1;
  }
  66.68%,
  100% {
    opacity: 1;
    transform: translateY(0);
    z-index: 0;
  }
}

/* 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;
}
/* 行ごとの下線は引かない。行の区切りは padding の余白だけ */
.info-list dt,
.info-list dd {
  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。中身は店名ロゴ、プライバシーポリシーへのリンク、コピーライトの3つ */
footer {
  background: var(--base);
  color: var(--text);
  text-align: center;
  /* 区切り線は引かない。本文との切り分けはこの余白だけで取る */
  padding: 44px 24px;
}
/* フッターの店名ロゴ（トップページへのリンク）。ヘッダーと同じ .logo ユニットなので、
   変えるのは --logo-h と中央寄せだけ。.logo は flex なので footer の text-align が効かない
   ——width: fit-content で中身の幅に絞ってから margin: auto で中央へ寄せる
   （リンクなので行いっぱいが当たり判定にならない意味もある）*/
.logo-foot {
  --logo-h: 48px;
  width: fit-content;
  margin: 0 auto 6px;
}
.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;
}
/* コピーライト。"All Rights Reserved" は付けない（法的効力を持たない文言のため）。
   サイズ・字間・色は .footer-nav a に、上の余白は .footer-nav に揃えてある。
   数字用の var(--num) は使わない（© まで Oswald で描かれて字面が変わる）*/
.footer-copy {
  margin-top: 18px;
  color: var(--wood);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* プライバシーポリシー */
.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;
}
/* p と .policy-body を前に置いて詳細度を上げること。.policy-date 単体だと
   上の .policy-body p に font-size を奪われる（あとに書いても勝てない）*/
.policy-body p.policy-date {
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--wood);
}

@media (min-width: 720px) {
  /* ヘッダーと余白はPCだけ元の値に戻す。header ではなく :root に書くのは、
     section[id] の scroll-margin-top や main の padding-top、.hero の max-height も
     この値を見ているため */
  :root {
    --header-h: 80px;
    /* セクションの余白もPCだけ56pxに戻す（スマホは40px。ベース側のコメント参照）*/
    --section-pad: 56px;
  }
  h2 {
    font-size: 2.2rem;
  }
  /* PCのヒーローは素材どおりの比。スマホだけ 3:2 に詰めて背を高くしてある（ベース側）*/
  .hero {
    aspect-ratio: 1366 / 768;
  }
  /* PCではヘッダーを画面幅いっぱいに広げる（ロゴが左端、ナビが右端）*/
  header {
    --header-pad: clamp(24px, 4vw, 48px);
  }
  header .wrap {
    max-width: none;
  }
  /* PCはヘッダーのロゴも一回り大きく（ヘッダー高80pxに対して44px）。
     セレクタを .logo 単独にしないこと——フッターの .logo-foot と詳細度が並び、
     PCだけフッターまで44pxに縮む */
  header .logo {
    --logo-h: 44px;
  }
  /* PCはハンバーガーを消して、リンクを横並びで常時出す
     （720px未満はハンバーガー＋全画面オーバーレイ）*/
  .nav-toggle {
    display: none;
  }
  /* 開閉の指定（fixed・visibility・opacity）を全部打ち消して、ヘッダーの中に並べ直す */
  .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;
  }
  /* 幅をまたいだ直後の一瞬だけ nav-open が残ることがあるので、
     背後のスクロールを止めたままにしない保険 */
  body.nav-open {
    overflow: visible;
  }
  /* 同じ理由で、ヘッダーに不透明の白を敷いたままにしない（うっすら透けたまま）*/
  body.nav-open header {
    background: var(--header-bg);
  }
  /* 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カラムに。
     上端揃え（align-items: start）にすること——center にすると、背の低いほうのカラムが
     中央に浮いて見出しから離れる */
  .about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .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;
  }
}

/* セクション見出し。アイコンは置かず、ラテンラベル（.eyebrow）＋ h2 の2段だけ */
.sec-head {
  margin-bottom: 14px;
}
.sec-head-txt h2 {
  margin: 4px 0 0;
}
/* お店について 写真（about-shintaro.webp 1366×768 の1枚）。動かす指定は足さないこと。
   店構えの横位置の1枚なので aspect-ratio の箱で切らない（切ると軒先やのぼりが落ちる）。
   高さは素材の比なりに決まるので、比の違う素材に差し替えてもそのままの比で出る */
.about-photo {
  margin-top: 30px;
}
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* いか焼き・大判焼フィーチャー（写真の下に値段看板を少し重ねる）*/
.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は中黒でも折らなくなるため、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;
  }
  /* ヒーローは浮き上がり（位置の移動）だけをやめ、同じ周期のクロスフェードで送る。
     ここで animation を切らないこと——iOS は低電力モードでもこの指定が効くので、
     切ると hero-image-01 で固定されたまま切り替わらなくなる */
  .hero-track img {
    --rise: 0%;
  }
}

/* メニューセクション全体の下地 */
#menu {
  background: var(--menu-bg);
}