/* ========================================
   宮崎 すし貴 - スタイルシート
   フォント：Noto Serif JP / Noto Sans JP
   カラー：墨色 #1a1a1a / 深紅 #8b0000 / 和紙白 #fafaf8
======================================== */

/* ---------- カスタムプロパティ ---------- */
:root {
  --color-main:       #1a1a1a;   /* 墨色 */
  --color-accent:     #8b0000;   /* 深紅 */
  --color-accent-lt:  #a80000;   /* ホバー用（少し明るめ） */
  --color-bg:         #fafaf8;   /* 和紙白 */
  --color-bg-alt:     #f3f0ea;   /* セクション交互背景 */
  --color-gray:       #6b6b6b;
  --color-border:     #d8d2c7;
  --color-white:      #ffffff;

  --font-serif:  'Noto Serif JP', serif;
  --font-sans:   'Noto Sans JP', sans-serif;

  --sp: 768px;                   /* スマホブレークポイント */
  --header-h: 72px;
  --section-pad: 96px 24px;
  --radius: 2px;
  --transition: 0.28s ease;
}

/* ---------- リセット ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--color-main);
  background-color: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}

a:hover {
  opacity: 0.75;
}

ul, ol {
  list-style: none;
}

/* ---------- 汎用ユーティリティ ---------- */

/* プレースホルダー（画像の仮置き） */
.placeholder {
  background-color: #c9c0b0;
  position: relative;
  overflow: hidden;
}

.placeholder::after {
  content: 'IMAGE';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.6);
}

.placeholder--warm  { background-color: #b5a898; }
.placeholder--cool  { background-color: #8fa3a8; }
.placeholder--green { background-color: #8a9e8a; }

/* ボタン共通 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.btn:hover {
  opacity: 1;
}

/* アクセントボタン（深紅塗り） */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-lt);
  border-color: var(--color-accent-lt);
}

/* プライマリボタン（墨色塗り） */
.btn--primary {
  background-color: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
}

.btn--primary:hover {
  background-color: #333;
  border-color: #333;
}

/* アウトラインボタン */
.btn--outline {
  background-color: transparent;
  color: var(--color-main);
  border-color: var(--color-main);
}

.btn--outline:hover {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* セクション共通レイアウト */
.section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.section__heading {
  text-align: center;
  margin-bottom: 56px;
}

.section__heading-en {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.section__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-main);
}

.section__divider {
  width: 40px;
  height: 2px;
  background-color: var(--color-accent);
  margin: 20px auto 0;
}

/* ---------- ヘッダー ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 100;
  transition: background-color var(--transition), box-shadow var(--transition);
  /* 初期状態：透明 */
  background-color: transparent;
}

/* スクロール時に白背景 */
.header.is-scrolled {
  background-color: var(--color-white);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 32px;
  gap: 32px;
}

.header__logo {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-white);
  flex-shrink: 0;
  transition: color var(--transition);
}

.header.is-scrolled .header__logo {
  color: var(--color-main);
}

.header__nav {
  flex: 1;
}

.header__nav-list {
  display: flex;
  gap: 28px;
  justify-content: flex-end;
}

.header__nav-link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
  position: relative;
  transition: color var(--transition);
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--transition);
}

.header__nav-link:hover::after {
  width: 100%;
}

.header__nav-link:hover {
  opacity: 1;
  color: var(--color-white);
}

.header.is-scrolled .header__nav-link {
  color: var(--color-main);
}

.header.is-scrolled .header__nav-link:hover {
  color: var(--color-main);
}

.header__reserve {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 0.8125rem;
}

/* ハンバーガーボタン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.hamburger__line {
  display: block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-white);
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition);
}

.header.is-scrolled .hamburger__line {
  background-color: var(--color-main);
}

/* ハンバーガー：開いた状態 */
.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- ヒーロー：スライドショー ---- */
.hero__slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}

.hero__slide.is-active {
  opacity: 1;
}

/* テキスト可読性用オーバーレイ（既存 .hero__bg::after 相当を移植） */
.hero__slideshow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.45) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 24px;
}

.hero__sub {
  font-family: var(--font-serif);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  letter-spacing: 0.4em;
  margin-bottom: 16px;
  opacity: 0.9;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.hero__title-prefix {
  font-size: 0.5em;
}

.hero__desc {
  font-family: var(--font-sans);
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  letter-spacing: 0.15em;
  margin-top: 20px;
  opacity: 0.85;
}

.hero__contact {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.hero__tel {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 6px 0 4px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

.hero__hours {
  font-size: 0.75rem;
  opacity: 0.8;
  letter-spacing: 0.12em;
}

/* スクロール誘導 */
.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  opacity: 1;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  animation: scrollLine 1.6s ease infinite;
}

.hero__scroll-text {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 3つのカード ---------- */
.cards {
  background-color: var(--color-bg);
}

.cards .section__inner {
  padding-top: 80px;
  padding-bottom: 80px;
}

.cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.09);
  transform: translateY(-4px);
}

.card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card__body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}

.card__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
}

.card__text {
  font-size: 0.875rem;
  color: var(--color-gray);
  line-height: 1.85;
  flex: 1;
}

.card__hours {
  padding: 14px;
  background-color: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  font-size: 0.8125rem;
  color: var(--color-gray);
  line-height: 1.9;
}

.card__hours .label {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 500;
  min-width: 4.5em;
  margin-right: 4px;
}

/* ---------- 季節のご案内 ---------- */
.seasonal {
  background-color: var(--color-bg-alt);
}

.seasonal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.seasonal__img {
  width: 100%;
  height: auto;
  display: block;
}

.seasonal__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.seasonal__sub {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.seasonal__desc {
  font-size: 0.9375rem;
  color: var(--color-gray);
  line-height: 1.9;
  margin-bottom: 12px;
}

.seasonal__text .btn {
  margin-top: 12px;
}

/* ---- 季節のご案内：カードグリッド ---- */
.seasonal__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  margin-top: 4rem;
  padding-top: 3.2rem;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}

.seasonal__card {
  background: #fff;
  border: 1px solid rgba(139, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.seasonal__card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.seasonal__card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.seasonal__card-body {
  padding: 1.6rem 2rem 2rem;
}

.seasonal__card-period {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #8b0000;
  margin-bottom: 0.4rem;
}

.seasonal__card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.8rem;
  letter-spacing: 0.06em;
}

.seasonal__card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.8;
  color: #555;
}

.seasonal__card-link {
  margin-top: 1.6rem;
}

.seasonal__footer {
  text-align: center;
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}

/* ---------- アクセス ---------- */
.access {
  background-color: var(--color-bg);
}

.access__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.access__shop-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.access__detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 20px;
  margin-bottom: 32px;
  font-size: 0.9rem;
}

.access__detail dt {
  font-weight: 500;
  color: var(--color-gray);
  white-space: nowrap;
  padding-top: 2px;
}

.access__detail dd {
  line-height: 1.8;
  color: var(--color-main);
}

.access__detail a {
  color: var(--color-accent);
  font-weight: 500;
}

.access__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.access__btns .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.access__map {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 769px) {
  .access__body {
    align-items: stretch;
  }

  .access__map {
    aspect-ratio: unset;
    height: 100%;
    min-height: 400px;
  }
}

/* ---------- フッター ---------- */
.footer {
  background-color: var(--color-main);
  color: rgba(255,255,255,0.85);
}

.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 32px;
}

.footer__top {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer__logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-white);
  margin-bottom: 8px;
}

.footer__address {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.footer__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8);
  transition: color var(--transition), opacity var(--transition);
}

.footer__link:hover {
  color: var(--color-white);
  opacity: 1;
}

.footer__reserve-btn {
  font-size: 0.8125rem;
  padding: 10px 24px;
}

.footer__bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer__copy {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* ---------- オーバーレイ（スマホメニュー用） ---------- */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity var(--transition);
}

.nav-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* ========================================
   レスポンシブ（768px以下）
======================================== */
@media screen and (max-width: 768px) {

  /* ヘッダー */
  .header.is-scrolled {
    background-color: var(--color-white);
  }

  .header__inner {
    padding: 0 20px;
    gap: 12px;
  }

  .header__logo {
    font-size: 1rem;
  }

  /* ナビをドロワーに変換 */
  .header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(280px, 80vw);
    height: 100%;
    background-color: var(--color-white);
    z-index: 200;
    padding: 96px 32px 40px;
    transition: right var(--transition);
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  }

  .header__nav.is-open {
    right: 0;
  }

  .header__nav-list {
    flex-direction: column;
    gap: 0;
  }

  .header__nav-link {
    display: block;
    padding: 18px 0;
    font-size: 1rem;
    color: var(--color-main);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: 0.08em;
  }

  .header__nav-link::after {
    display: none;
  }

  .header__reserve {
    display: none;   /* スマホではハンバーガー内の予約ボタンで対応 */
  }

  .hamburger {
    display: flex;
    z-index: 201;
  }

  /* ヒーロー */
  .hero__slide {
    background-position: center 25%;
  }

  .hero__contact {
    bottom: 64px;
    font-size: 0.75rem;
  }

  .hero__scroll {
    bottom: 16px;
  }

  /* カード */
  .cards__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .card__img {
    aspect-ratio: 16 / 9;
  }

  /* 季節 */
  .seasonal__body {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .seasonal__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 3.2rem;
    padding-top: 2.4rem;
  }

  .seasonal__card-img {
    aspect-ratio: 16 / 9;
  }

  /* アクセス */
  .access__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .access__map {
    aspect-ratio: 4 / 3;
  }

  /* フッター */
  .footer__links {
    flex-direction: column;
    gap: 20px;
  }

  /* セクション余白を縮小 */
  :root {
    --section-pad: 64px 20px;
  }
}

/* ======================================
   お盆期間限定メニューのお知らせバナー
   ====================================== */

.notice {
  background: #fafaf8;
  border-top: 1px solid rgba(139, 0, 0, 0.15);
  border-bottom: 1px solid rgba(139, 0, 0, 0.15);
  padding: 1.6rem 5%;
}

.notice__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.notice__badge {
  flex-shrink: 0;
  background: #8b0000;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: 2px;
}

.notice__text {
  flex: 1;
  min-width: 260px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  color: #1a1a1a;
}

.notice__text strong {
  font-weight: 500;
  color: #8b0000;
}

.notice__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .notice__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .notice__btn {
    width: 100%;
    text-align: center;
  }
}

.card__note {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: #8b0000;
  font-weight: 400;
}

/* ======================================
   スマホ縦画面：スライド1の看板位置調整
   ====================================== */
@media (max-width: 480px) {
  .hero__slide--night2 {
    /* 看板3文字が画角中央にバランスよく入る位置
       （「す」の左切れと「貴」の右切れがほぼ均等になる値） */
    background-position: 64% 25%;
  }
}

/* ======================================
   アクセス：店舗外観写真
   ====================================== */

.access__photo {
  margin-top: 2.4rem;
}

.access__photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (min-width: 769px) {
  .access__photo img {
    max-height: 280px;
    object-fit: cover;
    object-position: center 40%;
  }
}

.access__photo-caption {
  margin-top: 0.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  color: #777;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 季節カード：実画像用 */
.seasonal__card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.seasonal__card-img-wrap .seasonal__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 768px) {
  .seasonal__card-img-wrap {
    aspect-ratio: 16 / 9;
  }
}

/* ======================================
   法人・団体様向けのご案内
   ====================================== */

.corporate {
  background-color: var(--color-bg);
}

.corporate__lead {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-gray);
  line-height: 1.9;
  margin-bottom: 2.4rem;
}

.corporate__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
}

.corporate__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.6rem 2rem;
}

/* 法人向けカードの写真。.corporate__item の padding（1.6rem 2rem）を打ち消して枠の内側いっぱいに広げる。
   .corporate__item の padding を変えたら、ここの margin と width も合わせて直すこと。
   max-width:none は、グローバルの img { max-width:100% } を外すために必要。 */
.corporate__photo {
  display: block;
  width: calc(100% + 4rem);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: -1.6rem -2rem 1.2rem;
}

.corporate__item-use {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

.corporate__item-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 0.4rem;
  letter-spacing: 0.06em;
}

.corporate__item-price {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-main);
  margin-bottom: 0.6rem;
}

.corporate__item-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-gray);
}

.corporate__note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8125rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-gray);
  max-width: 640px;
  margin: 0.8rem auto 0;
}

.corporate__note:first-of-type {
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-border);
}

.corporate__cta {
  text-align: center;
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-border);
}

.corporate__cta-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8125rem;
  color: var(--color-gray);
  margin-top: 1.2rem;
}

.corporate__cta-note a {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .corporate__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .corporate__note {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ======================================
   店内のお品書き（仮:menu-dinein）
   ====================================== */

.dinein {
  background-color: var(--color-bg-alt);
}

.dinein__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2.4rem;
}

.dinein__tab {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-gray);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.dinein__tab:hover {
  color: var(--color-main);
}

.dinein__tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.dinein__category {
  max-width: 720px;
  margin: 0 auto 3.2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-border);
}

.dinein__category:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dinein__category-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-main);
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.dinein__category-name[id] {
  scroll-margin-top: 88px;
}

.dinein__jump {
  margin-bottom: 2rem;
}

.dinein__jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  list-style: none;
}

.dinein__jump-link {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-gray);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.dinein__jump-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.dinein__category-subtitle {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--color-gray);
  margin-bottom: 0.8rem;
}

.dinein__category-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.dinein__category-note {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--color-gray);
  line-height: 1.8;
}

.dinein__category-note::before {
  content: '※ ';
}

.dinein__items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dinein__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border);
}

.dinein__items .dinein__item:first-child {
  border-top: none;
}

.dinein__item-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-main);
  margin: 0;
}

.dinein__item-price {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-main);
  margin: 0;
  white-space: nowrap;
}

.dinein__item-desc {
  flex-basis: 100%;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--color-gray);
  line-height: 1.8;
  margin: 0;
}

.dinein__item-contents {
  flex-basis: 100%;
}

.dinein__item-collapsible { flex-basis: 100%; }
.dinein__item--has-img .dinein__item-collapsible { grid-column: 1 / -1; grid-row: 2; }
.dinein__item-toggle {
  display: block;
  list-style: none;
  cursor: pointer;
}
.dinein__item-toggle::-webkit-details-marker { display: none; }
.dinein__item-toggle .dinein__item-name {
  color: #1e5aa0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.dinein__item-collapsible > .dinein__item-contents { margin-top: 0.6rem; }
.dinein__item:not(.dinein__item--has-img) > .dinein__item-collapsible > .dinein__item-contents { margin-top: 0.4rem; }
.dinein__item-toggle::marker { content: ''; }
.dinein__item-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 1.2rem;
}
.dinein__item-toggle-title {
  display: flex;
  align-items: baseline;
  column-gap: 0.6rem;
  min-width: 0;
}
.dinein__item-toggle-row .dinein__item-price { flex-shrink: 0; }
.dinein__item-toggle-hint {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1e5aa0;
  white-space: nowrap;
}
.dinein__item-toggle-hint::after { content: '\25B6\FE0E'; margin-left: 0.2em; }
.dinein__item-collapsible[open] .dinein__item-toggle-hint::after { content: '\25BC\FE0E'; }

.dinein__item-contents-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-gray);
  line-height: 1.7;
  margin: 0;
}

.dinein__item-contents-list {
  list-style: none;
}

.dinein__item-content {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--color-gray);
  line-height: 1.7;
}

/* 画像を持つ品目のみ。img がない品目には影響しない（DOMも変わらない）。 */
.dinein__item--has-img {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.2rem;
  row-gap: 0.6rem;
  align-items: baseline;
}

.dinein__item-img {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 0.2rem;
}

.dinein__item--has-img .dinein__item-name { grid-column: 1; grid-row: 2; }
.dinein__item--has-img .dinein__item-price { grid-column: 2; grid-row: 2; }
.dinein__item--has-img .dinein__item-desc { grid-column: 1 / -1; grid-row: 3; }
.dinein__item--has-img .dinein__item-contents { grid-column: 1 / -1; grid-row: 3; }

.dinein__options {
  margin-top: 1.2rem;
  padding: 1.2rem 1.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.dinein__options-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 0.8rem;
}

.dinein__options-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dinein__option {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-main);
}

.dinein__option:not(:first-child) {
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .dinein__tabs {
    gap: 0.2rem;
  }

  .dinein__tab {
    padding: 0.7rem 1.1rem;
    font-size: 0.875rem;
  }

  .dinein__category {
    margin-bottom: 2.4rem;
  }

  .dinein__options {
    padding: 1rem 1.2rem;
  }
}

/* ======================================
   お部屋のご案内
   ====================================== */

.rooms__lead {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #555;
  margin-bottom: 2.4rem;
}

.rooms__map {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.rooms__map img {
  width: 100%;
  height: auto;
  display: block;
}

.rooms__hotspot {
  position: absolute;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.rooms__hotspot:hover,
.rooms__hotspot:focus-visible {
  background: rgba(139, 0, 0, 0.12);
  border-color: rgba(139, 0, 0, 0.5);
}

.rooms__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
}

.rooms__list-btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.rooms__list-btn:hover {
  background: #8b0000;
  border-color: #8b0000;
  color: #fff;
}

/* モーダル */
.room-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.room-modal.is-open {
  display: block;
}

.room-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.room-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(90vw, 800px);
  max-height: 85vh;
  background: #fff;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
}

.room-modal__img {
  width: 100%;
  height: auto;
  max-height: calc(85vh - 6rem);
  object-fit: contain;
  display: block;
  touch-action: none;
}

.room-modal__caption {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  color: #1a1a1a;
  margin-top: 0.8rem;
}

.room-modal__note {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-gray);
  margin-top: 0.4rem;
  line-height: 1.6;
}

/* 説明文（margin-top 0.4rem ＋ 1行 0.875rem×1.6 ＝ 1.8rem）のぶん写真を低くし、はみ出しを防ぐ */
.room-modal--has-note .room-modal__img {
  max-height: calc(85vh - 6rem - 1.8rem);
}

.room-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 768px) {
  .rooms__list {
    flex-direction: column;
    align-items: stretch;
  }
  .rooms__list-btn {
    text-align: center;
    padding: 0.9rem 1.4rem; /* タップしやすい高さ */
  }
}

/* ---- 部屋モーダル：タブレット（〜1024px） ---- */
@media (max-width: 1024px) {
  .room-modal__content {
    width: 96vw;
    max-width: 96vw;
    max-height: 94vh;
    padding: 0.6rem;
  }
  .room-modal__img {
    max-height: calc(94vh - 5rem);
  }
}

/* ---- 部屋モーダル：スマホ（〜768px）フルスクリーン ---- */
@media (max-width: 768px) {
  .room-modal__content {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100dvh; /* iOSのアドレスバー対応でdvhを使用 */
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 0;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .room-modal__img {
    width: 100%;
    max-height: calc(100dvh - 5.5rem);
    object-fit: contain;
    background: #1a1a1a;
  }
  .room-modal__caption {
    color: #fff;
    padding: 0.8rem 1rem;
    margin-top: 0;
  }
  .room-modal__close {
    top: max(0.8rem, env(safe-area-inset-top));
    right: 0.8rem;
    z-index: 10;
  }
}

/* ---- 部屋モーダルの説明文：タブレット（〜1024px） ---- */
@media (max-width: 1024px) {
  .room-modal--has-note .room-modal__img {
    max-height: calc(94vh - 5rem - 1.8rem);
  }
}

/* ---- 部屋モーダルの説明文：スマホ（〜768px） ---- */
@media (max-width: 768px) {
  .room-modal__note {
    color: #fff;
    padding: 0 1rem;
  }
  .room-modal--has-note .room-modal__img {
    max-height: calc(100dvh - 5.5rem - 1.8rem);
  }
}

/* ======================================
   出前・テイクアウトのご注文
   ====================================== */

.order {
  background-color: var(--color-bg);
}

/* 他ページから index.html#order で来たときに、固定ヘッダーの下に見出しを出すため。ページ内の移動は js/main.js が位置を計算するので影響しない */
#order { scroll-margin-top: var(--header-h); }

/* ---- リード文 ---- */
.order__lead {
  max-width: 760px;
  margin: 0 auto 3.2rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-gray);
}

.order__lead p {
  margin-bottom: 0.8rem;
}

.order__lead strong {
  font-weight: 500;
  color: var(--color-main);
}

.order__lead-note {
  margin-top: 1.2rem;
  padding: 0.9rem 1.2rem;
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
  font-size: 0.85rem;
  color: var(--color-main);
}

.order__lead-note strong {
  color: var(--color-accent);
}

/* ---- カテゴリ ---- */
.order__category {
  margin-bottom: 2.8rem;
}

.order__category-head {
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--color-main);
}

.order__category-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-main);
}

.order__category-note {
  margin-left: 0.5em;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-accent);
}

.order__category-packaging {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-gray);
}

/* ---- 品目リスト ---- */
.order__items {
  display: flex;
  flex-direction: column;
}

.order__item {
  display: grid;
  grid-template-columns: 1fr 9em 6.5em;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.order__item-name {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-main);
  line-height: 1.6;
}

.order__item-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-gray);
}

.order__item-price {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-main);
  text-align: right;
  white-space: nowrap;
}

.order__item-qty {
  display: flex;
  justify-content: flex-end;
}

.order__item-select {
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.order__item-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.order__item--has-img .order__item-img {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.order__qty-note {
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-gray);
  text-align: center;
}

/* ---- 受け取り方法 ---- */
.order__receive {
  max-width: 760px;
  margin: 2.8rem auto 0;
  text-align: center;
}

.order__receive-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 1rem;
}

.order__receive-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.order__receive-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-main);
  cursor: pointer;
}

.order__receive-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ---- お届けの容器（㊱：器／使い捨てパック） ---- */
.order__container {
  max-width: 760px;
  margin: 2.8rem auto 0;
  text-align: center;
}

.order__container-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 1rem;
}

.order__container-options {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}

.order__container-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-sans);
  color: var(--color-main);
  cursor: pointer;
}

.order__container-option input {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.order__container-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.order__container-option-name {
  font-size: 0.9rem;
}

.order__container-option-note {
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-gray);
}

.order__container-recovery {
  max-width: 520px;
  margin: 1rem auto 0;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-gray);
  text-align: left;
}

/* ---- お届け先の地域 ---- */
.order__area {
  max-width: 760px;
  margin: 0 auto 2.8rem;
}

/* §12ステップ2＋4：.order__area の直前が .order__receive になったため、
   本来上マージンを持たない .order__area の上に、他の主要ブロック間と
   同じ間隔（2.8rem）を確保する（.order__receiveの下マージンは0のため） */
.order__receive + .order__area {
  margin-top: 2.8rem;
}

.order__area-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 0.8rem;
  text-align: center;
}

.order__area-desc {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--color-gray);
  line-height: 1.8;
  text-align: center;
  margin-bottom: 1.4rem;
}

.order__area-result {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-main);
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-accent);
}

/* エリア外の案内：既存のエラー表示（--color-accent）を流用した警告色 */
.order__area-result--warning {
  color: var(--color-accent);
  font-weight: 500;
  background-color: var(--color-bg-alt);
  border-left-color: var(--color-accent);
}

/* ---- ご注文者様情報 ---- */
.order__customer {
  max-width: 760px;
  margin: 2.8rem auto 0;
}

/* §12ステップ3：日付ブロックの移動により .order__customer が2つ連続で並ぶことに
   なった。両者は同じ「ご注文者様情報」の続きなので、他の主要ブロック間と同じ
   2.8remを再度足すと見出しのない箇所に不自然な余白ができてしまう。そのため
   隣接時のみ上マージンを打ち消す */
.order__customer + .order__customer {
  margin-top: 0;
}

/* ---- お届け日（§12ステップ1で.order__customerから独立させたブロック）
   .order__field 自身のmargin-bottomで前後の間隔を作るため、このブロック自体には
   縦方向のmarginを持たせない（横幅・中央寄せのみ.order__customerと揃える） */
.order__date {
  max-width: 760px;
  margin: 0 auto;
}

/* §12ステップ3：.order__date の直後が #order-categories になったため、
   他の主要ブロック間と同じ2.8remの間隔を確保する（.order__dateの実質的な
   下マージンは中の.order__fieldのmargin-bottom分＝1.6remしかないため） */
.order__date + .order__categories {
  margin-top: 2.8rem;
}

/* §12段階D（関門型）：日付未選択時に #order-categories の中へ出す案内 */
.order__date-gate {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.4rem;
  background-color: var(--color-bg-alt);
  text-align: center;
  font-family: var(--font-sans);
}

.order__date-gate-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-main);
}

.order__date-gate-note {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-gray);
}

.order__customer-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 1.6rem;
  text-align: center;
}

.order__field {
  margin-bottom: 1.6rem;
}

.order__field--radio {
  border: 0;
  padding: 0;
}

.order__field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-main);
  margin-bottom: 0.6rem;
}

/* display を明示指定すると hidden 属性の既定表示（display:none）が打ち消されてしまうため、
   hidden時は確実に非表示にする */
.order__field-label[hidden] {
  display: none;
}

.order__field-label--sub {
  margin-top: 1rem;
  font-weight: 400;
}

.order__required-badge,
.order__optional-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.order__required-badge {
  color: var(--color-white);
  background-color: var(--color-accent);
}

.order__optional-badge {
  color: var(--color-gray);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.order__field-input,
.order__field-select,
.order__field-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-sans);
  /* iOS Safariは16px未満の入力欄にフォーカスすると自動ズームしレイアウトが崩れるため
     1rem（=16px、html { font-size: 16px; }前提）以上を必ず確保する */
  font-size: 1rem;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.order__field-textarea {
  min-height: 88px;
  resize: vertical;
}

.order__field-input:focus-visible,
.order__field-select:focus-visible,
.order__field-textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.order__field-input:disabled,
.order__field-select:disabled,
.order__field-textarea:disabled {
  background-color: var(--color-bg-alt);
  color: var(--color-gray);
  cursor: not-allowed;
}

.order__field-note {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-gray);
}

.order__field-error {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-accent);
}

.order__radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.order__radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-main);
  cursor: pointer;
}

.order__radio-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* 商品小計は条件を満たしているが、ご注文者様情報が未入力な状態の見た目（ネイティブdisabledと同じ見え方） */
.order__submit--incomplete {
  opacity: 0.4;
  cursor: not-allowed;
}

.order__submit--incomplete:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- 合計表示エリア ---- */
.order__summary {
  max-width: 760px;
  margin: 2.4rem auto 0;
  padding: 1.4rem 1.6rem;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.order__summary-empty {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-gray);
}

.order__summary-list {
  margin-bottom: 1rem;
}

.order__summary-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-main);
  border-bottom: 1px dashed var(--color-border);
}

.order__summary-totals {
  padding-top: 0.6rem;
}

.order__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-gray);
  padding: 0.3rem 0;
}

.order__summary-row--total {
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--color-main);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-main);
}

.order__summary-error {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
  text-align: center;
}

/* 赤字のエラーとは別に、まだ入力・選択の余地がある軽い案内（地域未選択の促し等） */
.order__summary-note {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-gray);
  text-align: center;
}

/* ---- 合計表示エリア：内訳の開閉（スマホのみ有効化。既定＝PCでは常時展開） ---- */
.order__summary-toggle-row {
  display: none;
}

.order__summary-total-inline {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-main);
}

.order__summary-total-inline strong {
  font-weight: 600;
  color: var(--color-accent);
}

.order__summary-toggle {
  min-height: 44px;
  padding: 0 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.order__summary-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.order__summary-details {
  display: block;
}

/* ---- 送信ボタン ---- */
.order__submit-wrap {
  max-width: 760px;
  margin: 2rem auto 0;
  text-align: center;
}

.order__submit {
  width: 100%;
  max-width: 360px;
  min-height: 48px;
}

.order__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.order__submit:disabled:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- 送信結果サマリー ---- */
.order__confirm {
  max-width: 760px;
  margin: 2.4rem auto 0;
  padding: 1.6rem 1.8rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-accent);
}

.order__confirm-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-main);
  margin-bottom: 1rem;
}

.order__confirm-list li {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-main);
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--color-border);
}

.order__confirm p {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-main);
  margin-top: 0.6rem;
}

.order__confirm-total {
  font-size: 1.05rem;
  font-weight: 500;
}

.order__confirm-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-accent);
}

/* ---- レスポンシブ：768px以下 ---- */
@media (max-width: 768px) {
  .order__receive-options {
    gap: 1.4rem;
  }
}

/* ---- レスポンシブ：480px以下 ---- */
@media (max-width: 480px) {
  /* .order__footer（position: sticky）の実際の親は .section__inner のため、
     スクロール余白は .order ではなくここに付与する（sticky が効く範囲は
     最も近いブロックレベルの親＝containing block の内側に限られるため）。
     --order-footer-h は js/main.js の ResizeObserver が .order__footer の実測高さ（px）を
     毎回書き込むカスタムプロパティ。明細の開閉・数量変更・受け取り方法の切替に追随するため、
     固定vh値ではなくこの実測値を使う。40vh はJSが動かなかった場合のフォールバック。 */
  .order .section__inner {
    padding-bottom: calc(var(--order-footer-h, 40vh) + 24px);
  }

  /* .order__footer は position: sticky で画面下部を占有するため、ブラウザ標準の
     scrollIntoView（アンカー遷移やフォーカス移動を含む）がこれらの要素を固定エリアの
     真裏までスクロールして見えなくしてしまうのを防ぐ。上と同じ実測値＋余裕24pxを使う。 */
  .order__receive,
  .order__qty-note,
  .order__field-input,
  .order__field-select,
  .order__field-textarea,
  .order__field-error,
  .order__radio-group {
    scroll-margin-bottom: calc(var(--order-footer-h, 40vh) + 24px);
  }

  .order__item {
    row-gap: 0.6rem;
    padding: 1rem 0.2rem;
  }

  .order__item-name {
    grid-column: 1 / -1;
  }

  .order__item-price {
    text-align: left;
  }

  .order__item-price,
  .order__item-qty {
    grid-column: auto;
  }

  .order__item-price {
    display: flex;
    align-items: center;
  }

  .order__item-qty {
    justify-content: flex-start;
  }

  .order__item {
    grid-template-columns: 1fr 1fr;
  }

  .order__receive-options {
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
  }

  .order__receive-option {
    justify-content: center;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .order__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow: hidden;
    margin: 2rem -20px 0;
    padding: 0 20px calc(0.8rem + env(safe-area-inset-bottom));
    background-color: var(--color-white);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }

  .order__summary {
    display: flex;
    flex-direction: column;
    min-height: 0; /* flexアイテムとして子要素（内訳）を縮小・スクロール可能にする */
    margin: 0 auto;
    max-width: none;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: transparent;
  }

  .order__summary-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-shrink: 0;
    padding: 0.7rem 0;
  }

  .order__summary-details {
    display: none;
    flex-shrink: 1;
    min-height: 0;
    max-height: 35vh;
    overflow-y: auto;
  }

  .order__summary-details.is-open {
    display: block;
  }

  .order__summary-error {
    flex-shrink: 0;
  }

  .order__submit-wrap {
    flex-shrink: 0;
    margin: 0.8rem auto 0;
  }

  .order__submit {
    max-width: none;
  }
}

/* ======================================
   配達エリア地図モーダル
   ====================================== */

/* 起動ボタン：地図はあくまで補助のため、既存の .btn--outline を控えめなサイズで流用する */
.order__area-map-btn {
  display: inline-flex;
  margin: 0 0 1.4rem;
  padding: 0.55rem 1.2rem;
  font-size: 0.78rem;
}

/* モーダルの開閉・アクセシビリティの扱いは .room-modal（お部屋のご案内）と同じ流儀
   （is-open クラスでの表示切替、aria-hidden、オーバーレイ、data-modal-close）に揃える */
.area-map-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.area-map-modal.is-open {
  display: block;
}

.area-map-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.area-map-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 6px;
  padding: 1.6rem;
  box-sizing: border-box;
}

.area-map-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.area-map-modal__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 1rem;
}

.area-map-modal__map-wrap {
  position: relative;
}

.area-map-modal__map {
  width: 100%;
  height: 500px; /* PC：500px程度 */
  border-radius: 4px;
  background-color: var(--color-bg-alt);
}

/* Leafletの内部ドラッグ操作と背景ページのタッチスクロールが競合しないようにする */
.area-map-modal__map,
.area-map-modal .leaflet-container {
  touch-action: none;
}

.area-map-modal__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-gray);
  background-color: rgba(250, 250, 248, 0.9);
  pointer-events: none;
}

.area-map-modal__status--error {
  color: var(--color-accent);
  font-weight: 500;
}

.area-map-modal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin-top: 1.2rem;
}

.area-map-modal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-main);
}

.area-map-modal__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid var(--color-border);
}

.area-map-modal__note {
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--color-gray);
  background-color: var(--color-bg-alt);
  border-left: 3px solid var(--color-border);
}

.area-map-modal__credit {
  margin-top: 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-gray);
  text-align: right;
}

/* ---- ポップアップ内（Leafletが生成するpopup DOMに直接差し込む） ---- */
.area-map-modal__popup {
  font-family: var(--font-sans);
  min-width: 180px;
}

.area-map-modal__popup-title {
  margin-bottom: 0.4rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-main);
}

.area-map-modal__popup-note {
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-gray);
}

.area-map-modal__popup-amount {
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-main);
}

.area-map-modal__popup-conds {
  margin-bottom: 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--color-main);
}

.area-map-modal__popup-conds li {
  list-style: disc;
  margin-bottom: 0.2rem;
}

.area-map-modal__popup-select {
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

/* ---- Leafletのデフォルトスタイルとサイト全体のリセットが衝突しないようにする ----
   （*{margin/padding:0} は Leaflet 自身のクラスセレクタより詳細度が低いため実際には
   衝突しないが、a{color:inherit} の型セレクタとフォントだけは明示的に上書きする） */
.area-map-modal .leaflet-container {
  font-family: var(--font-sans);
  background-color: var(--color-bg-alt);
}

.area-map-modal .leaflet-popup-content a,
.area-map-modal .leaflet-control-attribution a {
  color: var(--color-accent);
  text-decoration: underline;
}

.area-map-modal .leaflet-bar a {
  color: var(--color-main);
}

@media (max-width: 768px) {
  .area-map-modal__content {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100dvh; /* iOSのアドレスバー対応でdvhを使用（.room-modalと同じ流儀） */
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 1rem;
  }

  .area-map-modal__map {
    height: 60vh; /* スマホ：画面高さの60%程度 */
  }

  .area-map-modal__close {
    top: max(0.8rem, env(safe-area-inset-top));
    right: 0.8rem;
  }
}

/* hidden 属性を CSS の display 指定に負けさせないためのガード。
   季節の出し分け（data-season-mode）が効かないと、金額の異なる文言が
   2つ並んで表示されてしまうため。 */
[hidden] { display: none !important; }

/* ======================================
   お食い初めのやり方（okuizome.html）
   ====================================== */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.okuizome {
  padding-top: var(--header-h);
}

.okuizome__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.okuizome__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.okuizome__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.okuizome__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* 画像は切り取らずに全体を見せる（object-fit は指定しない） */
.okuizome__img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 20px auto;
}

.okuizome__steps {
  list-style: decimal;
  padding-left: 1.6em;
  margin-top: 20px;
}

.okuizome__step {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 14px;
}

.okuizome__note {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-gray);
}

.okuizome__cta {
  text-align: center;
  margin-top: 28px;
}

.okuizome__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.okuizome__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ======================================
   控えめな演出（2026/10/4 追加）
   4つは独立している。まとまりごと消せば、その演出だけが無くなる。
   ====================================== */

/* anim-A: ヒーロー写真のゆっくりズーム */
/* 表示中の1枚を 5秒かけて 1.00倍 → 1.06倍にする。js/main.js の切り替え間隔（5.5秒）より
   短いので、切り替えの時点では 1.06倍で止まっている。
   消えていく1枚は、フェード（1.5秒）が終わるまで 1.06倍のまま保ち、見えなくなってから 1.00倍に戻す。
   はみ出した分は .hero__slideshow の overflow: hidden が切り取る。 */
.hero__slide {
  animation: heroSlideHold 1.6s linear;
}

.hero__slide.is-active {
  animation: heroSlideZoom 5s ease-out forwards;
}

@keyframes heroSlideZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@keyframes heroSlideHold {
  from { transform: scale(1.06); }
  to   { transform: scale(1.06); }
}

/* anim-D: 店内のお品書きのタブ切替フェード */
/* hidden が外れて表示されるたびに、最初から再生される。動かすのは opacity だけ。 */
.dinein__panel {
  animation: dineinPanelFade 0.3s ease;
}

@keyframes dineinPanelFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* anim-C2: 料理写真の読み込み前の下地 */
.dinein__item-img,
.order__item--has-img .order__item-img {
  background-color: var(--color-bg-alt);
}

/* anim-F: 動きを減らす設定への対応 */
/* anim-A と anim-D だけを止める。スライドの切り替えのフェードなど、既存の動きには触れない。 */
@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active {
    animation: none;
  }

  .dinein__panel {
    animation: none;
  }
}

/* to-top: ページ先頭へ戻るボタン
   ・表示の切替は、js/main.js が header に付ける is-scrolled に連動する（JS は足していない）
   ・z-index は 5。スマホで固定される .order__footer（10）・ドロワーの overlay（99）・モーダル（1000）より下にして、
     それらが出ている間はボタンが下に隠れるようにしている。10 以上に上げないこと
   ・このまとまりごと消し、index.html の <a class="to-top"> を消せば、ボタンだけが無くなる */
.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), background-color var(--transition), transform 0.1s ease;
}

.header.is-scrolled ~ .to-top {
  opacity: 1;
  visibility: visible;
}

.to-top:active {
  transform: scale(0.9);
}

@media (hover: hover) {
  .to-top:hover {
    background-color: var(--color-accent-lt);
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}

/* anim-H: 店内のお品書きの料理写真のふわっと表示（スクロール連動）
   ・写真（.dinein__item--has-img の中の .dinein__item-img）が、画面の下から入ってくるあいだに
     透明 → 不透明 になり、横に --dinein-img-slide の分だけずれた位置から定位置へ動く。
     動かすのは opacity と translateX だけ（縦方向・大きさ・レイアウトは変えない）
   ・現在は --dinein-img-slide が 0px なので、透明 → 不透明 だけで、横には動かない（2026/10/4・実機で見て、スライドは採用しなかった）
   ・--dinein-img-slide を 24px などにすると、左右交互のスライドに戻る。0 にするときも単位 px を付けたままにする
   ・左右は、カテゴリの一覧の中で「写真のある品」だけを数えて、奇数番目が左から・偶数番目が右から。
     :nth-child(even of …) が写真の無い品を数から外している
   ・animation-range の「entry 0% entry 50%」は、写真の上端が画面の下端に来たとき（0%）に始まり、
     写真の高さの半分が画面に入ったとき（50%）に不透明・定位置になる、という意味
   ・overflow-x: clip は、ずれている間の写真が品（li）の左右の外に出て見えたり、横スクロールが出たりしないための切り取り。
     位置・大きさは変えない。hidden にしないこと（hidden にすると、li がスクロールの基準になって演出が動かなくなる）
   ・:focus-within の2つは、キーボードで「詳細」の見出しを選んでいる品だけ、切り取りを外してスライドもやめる指定。
     切り取ったままだと、選択中を示す輪の左右が欠けるため
   ・@supports の外には何も書いていない。対応していないブラウザでは、何も足されず今までどおり表示される
   ・「動きを減らす」設定のときは、@media (prefers-reduced-motion: no-preference) に当たらないので、何も足されない
   ・このまとまりごと消せば、この演出だけが無くなる */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dinein {
      --dinein-img-slide: 0px;
    }

    .dinein__item--has-img {
      --dinein-img-from: calc(var(--dinein-img-slide) * -1);
    }

    .dinein__item--has-img:nth-child(even of .dinein__item--has-img) {
      --dinein-img-from: var(--dinein-img-slide);
    }

    .dinein__item--has-img:not(:focus-within) {
      overflow-x: clip;
    }

    .dinein__item--has-img:focus-within > .dinein__item-img {
      --dinein-img-from: 0px;
    }

    .dinein__item--has-img > .dinein__item-img {
      animation-name: dineinImgSlide;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    @keyframes dineinImgSlide {
      from { opacity: 0; transform: translateX(var(--dinein-img-from)); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* anim-I: 出前・テイクアウトの注文フォームの写真のふわっと表示（スクロール連動）
   ・品目の写真（.order__item--has-img の中の .order__item-img）が、画面の下から入ってくるあいだに 透明 → 不透明 になる。
     動かすのは写真の opacity だけ。位置・大きさ・レイアウトと、品名・価格・数量・合計・フッターには触れていない
   ・仕組みは anim-H と同じ CSS のスクロール連動アニメーション（animation-timeline: view()）。JS は足していない
   ・view( ) の中の「block 0px var(--order-footer-h, 0px)」は、画面の上側を 0px・下側を --order-footer-h の分だけ内側に寄せて測る、という意味。
     スマホ（480px 以下）では .order__footer が画面の下に固定されるので、画面の下端ではなく「固定されたフッターの上端」を基準にしている。
     --order-footer-h は js/main.js がフッターの実測の高さを .order .section__inner に入れている値（481px 以上では入らないので 0px＝画面の下端が基準）
   ・animation-range の「entry 0% entry 50%」は、写真の上端がその基準に来たとき（0%）に始まり、
     写真の高さの半分が見えたとき（50%）に不透明になる、という意味
   ・@supports の外には何も書いていない。対応していないブラウザでは、何も足されず今までどおり表示される
   ・「動きを減らす」設定のときは、@media (prefers-reduced-motion: no-preference) に当たらないので、何も足されない
   ・このまとまりごと消せば、この演出だけが無くなる（anim-H とは独立している） */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .order__item--has-img .order__item-img {
      animation-name: orderImgFade;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block 0px var(--order-footer-h, 0px));
      animation-range: entry 0% entry 50%;
    }

    @keyframes orderImgFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
  }
}

/* detail-link: お食い初め料理から okuizome.html へのリンク */
/* データに detailUrl を持つ品だけに出る（js/dinein-ui.js の buildItem・js/main.js の renderCategories）。
   見た目は折りたたみの品（.dinein__item-toggle 系）に合わせている。押せる範囲は「品名＋詳細▶」だけ。
   このまとまりごと消し、データの detailUrl を消せば、リンクだけが無くなる */
.dinein__item-detail-link {
  display: flex;
  align-items: baseline;
  column-gap: 0.6rem;
  min-width: 0;
  justify-self: start;
}
.dinein__item--has-img .dinein__item-detail-link { grid-column: 1; grid-row: 2; }
.dinein__item-detail-link .dinein__item-name {
  color: #1e5aa0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.dinein__item-detail-hint {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: #1e5aa0;
  white-space: nowrap;
}
.dinein__item-detail-hint::after { content: '\25B6\FE0E'; margin-left: 0.2em; }

.order__item-detail-link {
  color: #1e5aa0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* inline-block にして、品名の下線が「詳細▶」に伸びないようにしている。
   line-height: 1 は、inline-block が行の高さを押し広げないようにするため（無いと行が 0.75px 高くなる） */
.order__item-detail-link::after {
  content: '詳細\25B6\FE0E';
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* osechi-soldout: 受付終了の品（データの soldOut が true）で、数量の選択の代わりに出す文言 */
/* js/main.js の renderCategories が .order__item-qty の中に出す。このまとまりごと消しても文言は出る（見た目だけが素に戻る） */
.order__item-soldout {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-accent);
}

/* 幅が足りないときは「ご予約の受付は／終了しました」の位置でだけ折り返す（まとまりの途中では折り返さない） */
.order__item-soldout-part {
  display: inline-block;
  white-space: nowrap;
}

/* osechi: おせちの詳細ページ */
/* osechi.html だけが使う。見た目は okuizome.html（.okuizome__〜）にそろえてある。このまとまりごと消しても、ほかのページには影響しない */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.osechi {
  padding-top: var(--header-h);
}

.osechi__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.osechi__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.osechi__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.osechi__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

.osechi__price {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-align: center;
  margin-top: 20px;
}

/* 画像は切り取らずに全体を見せる（object-fit は指定しない） */
.osechi__img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 20px auto;
}

.osechi__note {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-gray);
}

.osechi__tier {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 32px;
}

/* お品書き：幅が狭いときは2列、広いときは3列に並べる（1品＝1つの li） */
.osechi__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  margin-bottom: 12px;
}

.osechi__item {
  position: relative;
  padding-left: 1em;
  font-size: 0.9375rem;
  line-height: 1.9;
}

.osechi__item::before {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 0.8em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}

@media (min-width: 600px) {
  .osechi__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.osechi__info-term {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-accent);
  margin-top: 16px;
}

.osechi__info-desc {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-left: 0;
}

.osechi__cta {
  text-align: center;
  margin-top: 28px;
}

.osechi__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.osechi__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* musubizen: 結び膳の詳細ページ（スライドは CSS だけで動かす。JS なし） */
/* musubizen.html と musubizen-hatsuzekku.html の2ページが使う（2ページは同じ作りで、h1 とリード文だけが違う）。見た目は osechi.html（.osechi__〜）にそろえてある。このまとまりごと消しても、ほかのページには影響しない */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.musubizen {
  padding-top: var(--header-h);
}

.musubizen__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.musubizen__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.musubizen__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.musubizen__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* スライド：13枚を同じ枠に重ねて、不透明度だけで切り替える。枠は 3:2（写真と同じ比）なので、cover でも切り取られない */
.musubizen__slides {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* 2〜13枚目は透明が既定。1枚目だけは常に見えている土台（アニメーションを付けない） */
.musubizen__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.musubizen__slide:nth-child(1) {
  opacity: 1;
}

/* 1周52秒・1枚あたり4秒（切り替え1秒を含む）で 01 → 02 → … → 09 → オプション4枚（天ぷら・ステーキ・お造り・焼き鯛）→ 01 と繰り返す。
   ・後ろの写真ほど上に重なる（HTML の並び順）。n 枚目は (n − 1) × 4 秒から出はじめる
   ・2〜12枚目：1秒で出る → 5秒まで保つ → 6秒までに消える。次の1枚が上に出きってから、下で消える
     （先に消すと、切り替えの途中で土台の1枚目が透けて見えるため）
   ・13枚目：1秒で出る → 4秒まで保つ → 5秒までに消える。消えると土台の1枚目が見え、これが1周の頭になる
   ・keyframes の割合は 秒 ÷ 52 × 100（1秒＝1.9231%）
   ・「動きを減らす」設定のときは、@media (prefers-reduced-motion: no-preference) に当たらないので、
     何も足されず、1枚目だけが止まって見える */
@media (prefers-reduced-motion: no-preference) {
  .musubizen__slide:nth-child(2) { animation: musubizenSlide 52s linear 4s infinite; }
  .musubizen__slide:nth-child(3) { animation: musubizenSlide 52s linear 8s infinite; }
  .musubizen__slide:nth-child(4) { animation: musubizenSlide 52s linear 12s infinite; }
  .musubizen__slide:nth-child(5) { animation: musubizenSlide 52s linear 16s infinite; }
  .musubizen__slide:nth-child(6) { animation: musubizenSlide 52s linear 20s infinite; }
  .musubizen__slide:nth-child(7) { animation: musubizenSlide 52s linear 24s infinite; }
  .musubizen__slide:nth-child(8) { animation: musubizenSlide 52s linear 28s infinite; }
  .musubizen__slide:nth-child(9) { animation: musubizenSlide 52s linear 32s infinite; }
  .musubizen__slide:nth-child(10) { animation: musubizenSlide 52s linear 36s infinite; }
  .musubizen__slide:nth-child(11) { animation: musubizenSlide 52s linear 40s infinite; }
  .musubizen__slide:nth-child(12) { animation: musubizenSlide 52s linear 44s infinite; }
  .musubizen__slide:nth-child(13) { animation: musubizenSlideLast 52s linear 48s infinite; }

  @keyframes musubizenSlide {
    0%       { opacity: 0; }
    1.9231%  { opacity: 1; }
    9.6154%  { opacity: 1; }
    11.5385% { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes musubizenSlideLast {
    0%       { opacity: 0; }
    1.9231%  { opacity: 1; }
    7.6923%  { opacity: 1; }
    9.6154%  { opacity: 0; }
    100%     { opacity: 0; }
  }
}

/* 一覧の画像は切り取らずに全体を見せる（object-fit は指定しない） */
.musubizen__img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 20px auto;
}

/* オプション（写真＋品名）。一覧の写真（.musubizen__img）と同じ幅・同じ間隔に見えるようにする。
   一覧の .musubizen__img とは別の class にしてある（テストが一覧9枚とオプション4枚を分けて数えるため） */
.musubizen__option {
  max-width: 560px;
  margin: 20px auto;
}

.musubizen__option-img {
  display: block;
  width: 100%;
  height: auto;
}

.musubizen__option-name {
  font-size: 0.9375rem;
  line-height: 1.9;
  text-align: center;
  margin-top: 0.5rem;
}

.musubizen__note {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-gray);
}

.musubizen__cta {
  text-align: center;
  margin-top: 28px;
}

.musubizen__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.musubizen__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* enkai: 歓送迎会・忘年会・新年会の詳細ページ */
/* enkai.html だけが使う。宣言は musubizen のまとまり（.musubizen__〜）と同じで、違うのはスライドの枚数・時間・keyframes だけ。
   このまとまりごと消しても、ほかのページには影響しない */
/* ■ 写真の枚数を変えるときに直す場所（いまは6枚・1枚4秒・1周24秒）
   1. enkai.html：スライド（.enkai__slide）と一覧（.enkai__img）の img を、同じ枚数・同じ順にする
   2. 下の @media の中の animation：2枚目から最後の1枚まで、1枚につき1行ずつ書く（まとめて指定しない）
        ・1周の秒数 ＝ 枚数 × 4。全部の行の「24s」をこの値にする
        ・n 枚目の待ち時間（2つ目の秒数）＝ (n − 1) × 4
        ・最後の1枚だけ enkaiSlideLast、それ以外は enkaiSlide を使う
   3. 下の @keyframes の％：1周の秒数に対する割合なので、枚数を変えたら4つとも計算し直す
        enkaiSlide     … 1秒 ／ 5秒 ／ 6秒 にあたる％（いまは 1÷24・5÷24・6÷24）
        enkaiSlideLast … 1秒 ／ 4秒 ／ 5秒 にあたる％（いまは 1÷24・4÷24・5÷24）
   4. tests/site-content.test.js：EXPECTED_ENKAI_IMGS と、Check 41・44 の枚数 */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.enkai {
  padding-top: var(--header-h);
}

.enkai__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.enkai__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.enkai__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.enkai__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* スライド：6枚を同じ枠に重ねて、不透明度だけで切り替える。枠は 3:2（写真と同じ比）なので、cover でも切り取られない */
.enkai__slides {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* 2〜6枚目は透明が既定。1枚目だけは常に見えている土台（アニメーションを付けない） */
.enkai__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.enkai__slide:nth-child(1) {
  opacity: 1;
}

/* 1周24秒・1枚あたり4秒（切り替え1秒を含む）で 01 → 02 → … → 06 → 01 と繰り返す。
   ・後ろの写真ほど上に重なる（HTML の並び順）。n 枚目は (n − 1) × 4 秒から出はじめる
   ・2〜5枚目：1秒で出る → 5秒まで保つ → 6秒までに消える。次の1枚が上に出きってから、下で消える
     （先に消すと、切り替えの途中で土台の1枚目が透けて見えるため）
   ・6枚目：1秒で出る → 4秒まで保つ → 5秒までに消える。消えると土台の1枚目が見え、これが1周の頭になる
   ・「動きを減らす」設定のときは、@media (prefers-reduced-motion: no-preference) に当たらないので、
     何も足されず、1枚目だけが止まって見える */
@media (prefers-reduced-motion: no-preference) {
  .enkai__slide:nth-child(2) { animation: enkaiSlide 24s linear 4s infinite; }
  .enkai__slide:nth-child(3) { animation: enkaiSlide 24s linear 8s infinite; }
  .enkai__slide:nth-child(4) { animation: enkaiSlide 24s linear 12s infinite; }
  .enkai__slide:nth-child(5) { animation: enkaiSlide 24s linear 16s infinite; }
  .enkai__slide:nth-child(6) { animation: enkaiSlideLast 24s linear 20s infinite; }

  @keyframes enkaiSlide {
    0%       { opacity: 0; }
    4.1667%  { opacity: 1; }
    20.8333% { opacity: 1; }
    25%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes enkaiSlideLast {
    0%       { opacity: 0; }
    4.1667%  { opacity: 1; }
    16.6667% { opacity: 1; }
    20.8333% { opacity: 0; }
    100%     { opacity: 0; }
  }
}

/* 一覧の画像は切り取らずに全体を見せる（object-fit は指定しない） */
.enkai__img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 20px auto;
}

.enkai__note {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--color-gray);
}

.enkai__cta {
  text-align: center;
  margin-top: 28px;
}

.enkai__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.enkai__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ehomaki: 節分の恵方巻の詳細ページ */
/* 年・日付・恵方・価格は毎年 ehomaki.html を書き換える（このまとまりには日付も価格も書いていない） */
/* ehomaki.html だけが使う。inner・title・heading・text・img・cta・tel の宣言は enkai のまとまり（.enkai__〜）と同じ値。
   スライドは無い（アニメーションも keyframes も書かない）。このまとまりごと消しても、ほかのページには影響しない */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.ehomaki {
  padding-top: var(--header-h);
}

.ehomaki__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.ehomaki__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.ehomaki__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

/* リード文（h1 の直後）は本文と同じ値 */
.ehomaki__lead,
.ehomaki__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* 写真は切り取らずに全体を見せる（object-fit も aspect-ratio も指定しない。縦長の写真は縦長のまま出る） */
.ehomaki__img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin: 20px auto;
}

/* 具材：文字サイズ・行間は本文と同じで、色だけ薄くする */
.ehomaki__ingredients {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-gray);
}

/* 価格：文字サイズ・行間は本文と同じで、少し太くする */
.ehomaki__price {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-main);
  font-weight: 500;
}

.ehomaki__cta {
  text-align: center;
  margin-top: 28px;
}

.ehomaki__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.ehomaki__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* corporate-page: 法人・団体様向けのご案内の詳細ページ */
/* corporate.html だけが使う。inner の上下の余白と title の宣言は ehomaki のまとまり（.ehomaki__〜）と同じ値。
   4品・注記・ボタン・案内文は既存の .corporate__〜 をそのまま使う（ここでは上書きしない）。
   このまとまりごと消しても、ほかのページには影響しない */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.corporate-page {
  padding-top: var(--header-h);
}

/* 幅はトップの .section__inner と同じ（4品の並びを、トップにあったときと同じ大きさにするため） */
.corporate-page__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.corporate-page__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.corporate-page__lead {
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: 0.9375rem;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .corporate-page__inner {
    padding: 48px 20px 72px;
  }
}

/* notice-season: お知らせバナーの2つ目の案内（シーズンメニューの PDF） */
/* index.html の #notice の中で、1つ目の案内（.notice__inner）の下に、細い線で区切って別の行として並べる。
   並び方（PC は横並び・スマホは縦並び）は既存の .notice__inner のまま。ここでは上の余白と線だけを足している。
   2つ目の案内を外すときは、index.html の .notice__inner--season の div と、このまとまりを消す */
.notice__inner--season {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(139, 0, 0, 0.15);
}

/* goyou: 御用納め・御用始めの詳細ページ */
/* 日付・曜日は毎年 goyou.html と js/goyou.js を書き換える（このまとまりには日付も価格も書いていない） */
/* goyou.html だけが使う。inner・title・heading・text・img・cta・tel の宣言は ehomaki のまとまり（.ehomaki__〜）と同じ値。
   アニメーションは無い（animation も keyframes も書かない）。このまとまりごと消しても、ほかのページには影響しない */
/* ヘッダーが position: fixed のため、その高さぶん本文を下げる */
.goyou {
  padding-top: var(--header-h);
}

.goyou__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

.goyou__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 24px;
}

.goyou__heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--color-main);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
}

/* リード文（h1 の直後）は本文と同じ値 */
.goyou__lead,
.goyou__text {
  font-size: 0.9375rem;
  line-height: 1.9;
  margin-bottom: 12px;
}

/* 品の並び：375px幅では1列、600px以上で2列 */
.goyou__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

/* 写真は切り取らずに全体を見せる（object-fit も aspect-ratio も指定しない） */
.goyou__img {
  display: block;
  width: 100%;
  height: auto;
}

/* 品名：写真のある品は写真の下、無い品は品名だけ */
.goyou__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--color-main);
  margin-top: 8px;
}

/* 注記：文字サイズ・行間は本文と同じで、色だけ薄くする */
.goyou__note {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-gray);
  margin-top: 16px;
}

/* 箇条書き：文字サイズ・行間は本文と同じ */
.goyou__list {
  font-size: 0.9375rem;
  line-height: 1.9;
  list-style: disc;
  padding-left: 1.4em;
}

.goyou__list li {
  margin-bottom: 6px;
}

.goyou__cta {
  text-align: center;
  margin-top: 28px;
}

.goyou__tel {
  font-size: 0.9375rem;
  text-align: center;
  margin-top: 16px;
}

.goyou__tel a {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (min-width: 600px) {
  .goyou__items {
    grid-template-columns: 1fr 1fr;
  }
}

/* tel-red: アクセス欄の「お席のネット予約」と電話ボタンを、ヘッダーの予約ボタンと同じ赤にそろえる（2026/10/13 追加）
   共有の .btn--primary / .btn--outline は書き換えず、アクセス欄（.access__btns）と
   詳細ページの電話ボタン（.tel-cta の直下）だけに効かせる。
   このまとまり（ファイルの末尾まで）を消せば、元の墨色に戻る。 */
.access__btns .btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.access__btns .btn--primary:hover {
  background-color: var(--color-accent-lt);
  border-color: var(--color-accent-lt);
}

.access__btns .btn--outline,
.tel-cta > .btn--outline {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.access__btns .btn--outline:hover,
.tel-cta > .btn--outline:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* 詳細ページ8つ：直前のボタンの下に電話ボタンを並べ、幅を直前のボタンにそろえる。
   まん中の列の幅は直前のボタン（max-content）で決まる。電話ボタンは width: 0 で列の幅に影響させず、
   min-width: 100% で列いっぱいに広げる。番号が収まるよう左右の余白だけ詰める */
.tel-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
}

.tel-cta > .btn {
  grid-column: 2;
}

.tel-cta > .btn--outline {
  width: 0;
  min-width: 100%;
  margin-top: 12px;
  padding-left: 8px;
  padding-right: 8px;
}

/* corporate.html：ボタンのあいだの文は、これまでどおり横幅いっぱいに置く */
.tel-cta > .corporate__cta-note {
  grid-column: 1 / -1;
}

/* select-arrow: 注文フォームの選択欄の下向き矢印を、「お届け日」のカレンダーアイコンと同じ位置（中心が欄の右端から 24px）にそろえる（2026/10/13 追加）
   ブラウザ標準の矢印は CSS では動かせないため、標準の矢印を消して（appearance: none）、同じ形・色・大きさの矢印を背景画像で描く。
   矢印は幅 10px・高さ 7px の画像（線の色は --color-main と同じ #1a1a1a）。画像の右端を枠線の内側から 18px に置く（1px の枠線＋18px＋画像の半分 5px＝24px）。
   padding-right は、選んだ文字が矢印の下にもぐらないための余白。
   このまとまり（ファイルの末尾まで）を消せば、ブラウザ標準の矢印に戻る。 */
.order__field-select,
.order__item-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.15L5 5.15L9 1.15' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 10px 7px;
  padding-right: 36px;
}

/* 標準の矢印を消すと、ブラウザが欄の内側に足していた余白（左 4px・上下 1px）も無くなり、文字が左へ 4px 寄って、欄の高さも変わる
   （高さは Web フォントの読み込み前後でも変わる）。これまでと同じ文字の位置・同じ高さ（47.19px）になるよう、
   左に 4px、上下に 1px ずつ足し、行の高さを 24px（16px × 1.5）に固定する。
   数量の欄（.order__item-select）は min-height: 44px で高さが決まるので、左の 4px だけを足す */
.order__field-select {
  padding-top: calc(0.6rem + 1px);
  padding-bottom: calc(0.6rem + 1px);
  padding-left: calc(0.8rem + 4px);
  line-height: 1.5;
}

.order__item-select {
  padding-left: calc(0.6rem + 4px);
}

/* order-send: 注文の送信まわり（2026/10/13 追加）
   確認表示（.order__confirm）の下の「この内容で送信する」「修正する」、送信中・失敗の表示、受付完了の表示、
   個人情報の一文、機械送信よけの欄。既存の宣言は書き換えていない。
   このまとまり（ファイルの末尾まで）と、index.html・js/main.js の order-send の部分を消せば、送信の前の状態に戻る。 */
.order__privacy-note {
  max-width: 760px;
  margin: 1rem auto 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--color-main);
  text-align: center;
}

/* 機械送信よけの欄：画面の外に置く（display: none にすると入力しない機械があるため、位置で隠す） */
.order__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.order__send {
  max-width: 760px;
  margin: 1.2rem auto 0;
  text-align: center;
}

.order__send-notice {
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
}

.order__send-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.order__send-btn {
  flex: 1 1 220px;
  max-width: 360px;
  min-height: 48px;
}

.order__send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.order__send-status {
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-main);
}

.order__send-status--error {
  color: var(--color-accent);
  font-weight: 500;
}

/* 受付完了の表示（.order__confirm の中） */
.order__confirm-done {
  font-weight: 500;
  line-height: 1.9;
}

/* order-tel: 注文欄のリード文の電話ボタン（当日のご注文はお電話で）（2026/10/16 追加）
   .tel-cta は詳細ページ用に「直前のボタンの幅にそろえる」作りのため、ボタンが1つだけのここでは
   幅が潰れる。ここだけ幅を中身に合わせ、余白を共通の .btn と同じに戻す。
   上下の間隔はリード文の段落（.order__lead p）にそろえる。
   このまとまり（ファイルの末尾まで）を消せば、元に戻る。 */
.order__tel {
  margin-bottom: 0.8rem;
}

.order__tel .tel-cta > .btn--outline {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding-left: 28px;
  padding-right: 28px;
}