/* 3書体を fonts/ にセルフホスト。サイトで使う文字だけのサブセット */
@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; /* 白 */
  --text: #2b1e19; /* 濃茶（本文・見出し）*/
  --wood: #7a5847; /* 補助の茶 */
  --red: #bc2a1d; /* 赤（主役）*/
  --amber: #e8a11c; /* 飴色（ワンポイント用。現在は未使用）*/
  --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 */
  --header-h: 60px;
  /* セクションの上下パディング。スマホ40px／720px以上56px */
  --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 属性による高さ固定を打ち消す */
  height: auto;
}
/* 画面には出さないが読み上げには残すテキスト用 */
.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 {
  padding: var(--section-pad) 0;
}
/* アンカーで飛んだとき見出しが固定ヘッダーに潜らないようにする */
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。画面に固定し、下地は背景が透ける白。中身はロゴと開閉ボタンの2つ */
header {
  --header-pad: 24px;
  /* ヘッダーの下地。背景がうっすら透ける白 */
  --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 のヘッダーのぶん本文を下げる */
main {
  padding-top: var(--header-h);
}
/* 720px未満でメニューを開いている間はヘッダーも不透明の白にする */
body.nav-open header {
  background: var(--base);
}
.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);
  /* リンクなので下線と文字色の継承を切る */
  text-decoration: none;
}
.logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}
/* 落款。箱の高さを --logo-h の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 */
  padding: 12px;
  margin-right: -12px;
  cursor: pointer;
}
/* 三本線と×は 24×24 のSVG。色はSVG側の stroke で持つ */
.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以上は横並び */
.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枚を重ねて送る自動スライダー。静止5秒＋浮き上がり1秒を3回で1周18秒 */
.hero {
  /* 中の .hero-track の位置の基準 */
  position: relative;
  line-height: 0;
  overflow: hidden; /* 隣のコマを隠す */
  /* 箱の比。スマホは 3:2、PCは素材どおり */
  aspect-ratio: 3 / 2;
  /* aspect-ratio の箱が max-height で頭打ちになったとき幅まで縮むのを防ぐ */
  width: 100%;
  /* 高さの上限。PCでヒーローだけで画面が埋まらないようにする */
  max-height: calc(100vh - var(--header-h) - var(--section-pad) - 34px);
}
/* 3枚を同じ場所に重ね、負の animation-delay をずらして順に送る */
.hero-track {
  position: relative;
  height: 100%;
  /* 中の z-index を親へ漏らさない */
  isolation: isolate;
}
.hero-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 浮き上がる高さ。動きを減らす設定のときだけ 0% にする */
  --rise: 2.5%;
  /* アニメーションが効かない場合に備えて素の状態は不透明 */
  opacity: 1;
  animation: rise-3 18s ease-in-out infinite;
  /* 1枚目は浮き上がり終わった直後から始める */
  animation-delay: -1s;
  object-fit: cover;
  /* 縦が切られるときに上を残す */
  object-position: center 25%;
}
/* 出番は6秒おき。負の delay は「1周 − 出番の時刻」 */
.hero-track img:nth-child(2) {
  animation-delay: -13s;
}
.hero-track img:nth-child(3) {
  animation-delay: -7s;
}
/* 浮き上がりの入れ替え・3枚用。入ってくる1枚だけを最前面に置いて opacity を 0→1 にする */
@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);
}

.info-list .address {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 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 は flex なので 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;
}
/* コピーライト。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を打ち消し、節の間隔は margin で作る */
  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-body p より詳細度を上げるため p と .policy-body を前に置く */
.policy-body p.policy-date {
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--wood);
}

@media (min-width: 720px) {
  /* ヘッダーと余白はPCだけ元の値に戻す */
  :root {
    --header-h: 80px;
    /* セクションの余白もPCだけ56pxに */
    --section-pad: 56px;
  }
  h2 {
    font-size: 2.2rem;
  }
  /* PCのヒーローは素材どおりの比 */
  .hero {
    aspect-ratio: 1366 / 768;
  }
  /* PCではヘッダーを画面幅いっぱいに広げる */
  header {
    --header-pad: clamp(24px, 4vw, 48px);
  }
  header .wrap {
    max-width: none;
  }
  /* PCのヘッダーのロゴ。.logo 単独にするとフッターまで縮む */
  header .logo {
    --logo-h: 44px;
  }
  /* 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;
  }
  /* 幅をまたいだ直後に nav-open が残っても背後を止めたままにしない保険 */
  body.nav-open {
    overflow: visible;
  }
  /* 同じ理由で、ヘッダーの白も戻す */
  body.nav-open header {
    background: var(--header-bg);
  }
  /* PCではメニューを左右2列に */
  .menu-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 行方向の間隔。列方向は 2rem */
    --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行目の右列に置き、行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: start;
  }
  .about-cols .about-photo {
    margin-top: 0;
  }
  /* 見出しに合わせてキャッチも一段上げる */
  .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-photo {
  margin-top: 30px;
}
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* メニューの1品。写真の下に値段看板を少し重ねる */
.ikayaki-feature {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px;
}
.ikayaki-photo {
  display: block;
  width: 72%;
  max-width: 420px;
  /* 全商品共通の箱。箱の高さが揃う＝看板の位置が揃う */
  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;
  /* お品書きの折り返しはビューポートではなくコンテナ幅で切り替える */
  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: "▲";
}
/* 開閉アニメーション。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;
}
/* 閉じたとき隙間が残らないよう余白は内側に持たせる */
.kakigori-panel-inner > :first-child {
  margin-top: 0.9em;
}
/* お品書き本体。白地＋赤枠を1枚の枠にして細い区切り線で分ける。幅は .ikayaki-sign と同じ */
.kakigori-board {
  /* 商品名の筆文字画像に共通の「墨の高さ」*/
  --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;
}
/* subgrid で親の列を共有して全行の列幅を揃える */
.kakigori-board-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  /* 商品名の段の高さを一番背の高い画像に合わせる */
  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がどこでも折れるのを止める。折り返し位置はHTML側の <wbr> で指定 */
  word-break: keep-all;
  /* 極端に狭い幅でも枠を突き抜けさせない保険 */
  overflow-wrap: anywhere;
}
/* 価格をまとめる箱。display: contents で消し、4つの span を行の直接の子として扱わせる */
.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;
}
/* 商品名の筆文字。墨の高さが揃うよう 墨÷canvas の比で割って表示高さを決める */
.kakigori-name {
  /* 高さ基準で決めるので幅は成り行き */
  width: auto;
  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 {
    /* 商品名に余りを吸わせ、価格を右へまとめる */
    grid-template-columns: 1fr auto auto auto auto;
  }
  .kakigori-board-name,
  .kakigori-name {
    grid-column: 1;
  }
  .kakigori-flavors {
    grid-column: 1 / -1;
  }
  /* 「通常」と「クリーム入り」の区切り */
  .kakigori-price-label.is-cream {
    border-left: 1px solid var(--board-rule);
    padding-left: 0.9em;
  }
  /* シロップは味の一覧が入るぶん自動配置が1列ずれるので、2〜5列目に置き直す */
  .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;
  }
  /* ヒーローは位置の移動だけをやめ、同じ周期のクロスフェードで送る */
  .hero-track img {
    --rise: 0%;
  }
}

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