@charset "UTF-8";

/* ==================================================================
   石臼碾き手打そば 百日紅
   style.css

   CSS設計：FLOCSS + BEM（PROJECT.md §16 / 02_design_system.md §90〜§97）
   ルートスコープ：.sarusuberi-site
   記述順：
     1. Foundation（Variables / Reset / Base / スムーススクロール）
     2. Layout      l-
     3. Component   c-
     4. Project     p-
     5. Utility     u-
     6. Motion / Print
   Media Query：Mobile First（min-width）で各ブロック内に併記
================================================================== */


/* ==================================================================
   1. Foundation
================================================================== */

/* ------------------------------------------------
   1-1. Variables
   カラーの正本は 02_design_system.md §7 の7色。
   ここに定義された7色以外の色を実装側で追加しない。
------------------------------------------------ */
.sarusuberi-site {
  /* Color */
  --color-white: #ffffff;       /* Base */
  --color-bg: #f7f6f3;          /* Base（補助）Warm White */
  --color-red: #913325;         /* Primary 百日紅朱 */
  --color-navy: #2a3a49;        /* Secondary 藍鼠 */
  --color-text: #222222;        /* Text */
  --color-text-muted: #666666;  /* Text（補助）*/
  --color-border: #e5e2de;      /* Border */

  /* Font */
  --font-mincho: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
                 "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --font-gothic: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
                 "Noto Sans JP", sans-serif;

  /* Space（基本単位 4px / 02 §30） */
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* セクション上下余白（SP 64〜88px / PC 96〜144px：02 §32） */
  --section-space: clamp(64px, 9vw, 120px);
  --section-space-brand: clamp(80px, 12vw, 160px);

  /* Width（02 §34） */
  --width-text: 720px;
  --width-content: 1200px;

  /* 横方向余白（02 §35） */
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion（02 §54） */
  --duration: 250ms;
  --easing: ease;
}

/* ------------------------------------------------
   1-2. Reset
   Cocoonの既存CSSを壊さないよう、リセットもスコープ内に限定する（10 §66）。
   グローバルな h1 / p / a / img への指定は行わない（08 §175）。
------------------------------------------------ */
.sarusuberi-site,
.sarusuberi-site *,
.sarusuberi-site *::before,
.sarusuberi-site *::after {
  box-sizing: border-box;
}

.sarusuberi-site h1,
.sarusuberi-site h2,
.sarusuberi-site h3,
.sarusuberi-site p,
.sarusuberi-site figure,
.sarusuberi-site dl,
.sarusuberi-site dd,
.sarusuberi-site ul,
.sarusuberi-site ol {
  margin: 0;
  padding: 0;
}

.sarusuberi-site ul,
.sarusuberi-site ol {
  list-style: none;
}

.sarusuberi-site img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.sarusuberi-site address {
  font-style: normal;
}

.sarusuberi-site button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ------------------------------------------------
   1-3. Base
   本文は 15〜17px（SP）／16〜18px（PC）、line-height 1.8〜2.0（02 §18 / §19）
------------------------------------------------ */
.sarusuberi-site {
  margin: 0;
  font-family: var(--font-gothic);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.9;
  color: var(--color-text);
  background-color: var(--color-white);
  letter-spacing: 0.02em;
}

.sarusuberi-site a {
  color: inherit;
}

/* フォーカスは outline を消さず、ブランドカラーで明示する（02 §88 / 08 §158） */
.sarusuberi-site a:focus-visible,
.sarusuberi-site button:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* ------------------------------------------------
   1-4. スムーススクロール（ページ内リンク）

   PROJECT.md §17 はスムーススクロールを使用可としている。
   08 §148「スクロールはJSなし」に従い、JavaScriptを使わずCSSだけで実現する。

   ■ なぜルート要素に書くのか
     ビューポートのスクロール挙動を決めるのは scroll-behavior の
     ルート要素（html）の値。body（＝ .sarusuberi-site）に書いても効かない。

   ■ なぜ :has() で囲うのか
     html への無条件指定は、WordPress / Cocoon 組み込み後に
     百日紅以外のページまで巻き込む。スコープ規定（02 §91 / 04 §123 /
     08 §175 / 10 §66）に反するため、「.sarusuberi-site を含む文書」に限定する。
     :has() 非対応環境ではこの規則ごと無効になり、従来どおり瞬時に移動する。
     機能は失われないため、フォールバックとして問題ない。

   ■ 影響範囲
     サイト内のページ内リンクは次の2種類だけ（他に # 付きリンクは無い）。
       ・スキップリンク #main … 移動距離はヘッダー分のみ。体感差はない
       ・ページの先頭へ戻る #top … 3-19
     いずれもリンク先へのフォーカス移動は即座に行われる。動くのは表示位置だけ。

   ■ 動きを減らす設定
     6-1 の @media (prefers-reduced-motion: reduce) で auto に戻す。
     その指定は .sarusuberi-site 配下しか対象にしないため、
     ルート要素ぶんを別途書いている。片方だけ消さないこと。
------------------------------------------------ */
html:has(.sarusuberi-site) {
  scroll-behavior: smooth;
}


/* ==================================================================
   2. Layout
================================================================== */

/* ------------------------------------------------
   2-1. Container
------------------------------------------------ */
.sarusuberi-site .l-container {
  width: 100%;
  max-width: calc(var(--width-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------
   2-2. Header
   常時固定はせず通常フローとする（04 §24）
------------------------------------------------ */
.sarusuberi-site .l-header {
  position: relative;
  z-index: 10;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: calc(var(--width-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--space-xs) var(--gutter);
}

.sarusuberi-site .l-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 1;
}

.sarusuberi-site .l-header__logo img {
  width: 56px;
}

/* SP：ナビは初期状態で非表示。JSで開閉する */
.sarusuberi-site .l-header__nav {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding: var(--space-sm) var(--gutter) var(--space-lg);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .l-header__nav.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .sarusuberi-site .l-header__logo img {
    width: 68px;
  }

  /* PC：常時表示。JSの開閉状態に依存させない */
  .sarusuberi-site .l-header__nav,
  .sarusuberi-site .l-header__nav.is-open {
    display: block;
    position: static;
    padding: 0;
    border-bottom: none;
  }
}

/* ------------------------------------------------
   2-3. Main
------------------------------------------------ */
.sarusuberi-site .l-main {
  display: block;
}

/* ------------------------------------------------
   2-4. Section
   下層ページ共通のセクション余白（02 §32 / 04 §30）。
   レイアウト層は余白のみを担い、背景色・装飾は持たせない（08 §46）。
   背景の切り替えが必要な場合は、各ページのProject層で指定する。
------------------------------------------------ */
.sarusuberi-site .l-section {
  padding-block: var(--section-space);
}

/* ブランドストーリーを担うセクション用（03 §95） */
.sarusuberi-site .l-section--brand {
  padding-block: var(--section-space-brand);
}

/* ------------------------------------------------
   2-5. Footer
   背景 #2a3a49 は確定仕様（02 §62 / 04 §109）。薄くしない。
   ロゴ画像は配置せず、店舗名＋読みのテキストがブランド表示を担う
   （01 §35 / 02 §63 / 03 §87 / 04 §108）。
------------------------------------------------ */
.sarusuberi-site .l-footer {
  padding-block: var(--section-space) var(--space-xl);
  color: var(--color-white);
  background-color: var(--color-navy);

  /*
    フッター上端の青海波（3-18）。背景 #2a3a49 は薄くしない（02 §62 / 04 §109）。
    .p-shopinfo と同じ「上端に寄せて下で消す」扱いに揃える。停止位置は px 固定。
  */
  background-image:
    linear-gradient(to bottom,
      rgba(42, 58, 73, 0) 0,
      rgba(42, 58, 73, 0.45) 80px,
      rgba(42, 58, 73, 1) 192px),
    url("/assets/images/decor/seigaiha-navy.svg");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
}

.sarusuberi-site .l-footer__inner {
  display: grid;
  gap: var(--space-xl);
  max-width: calc(var(--width-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
  フッターのブランド表示。
  ロゴ画像は使用せず、FVと同じ「店舗名＋読み」の組で店名そのものを見せる。
  階層は罫線を増やさず余白で作る（02 §12 / §13）。
*/
.sarusuberi-site .l-footer__shopname-main {
  display: block;
  font-family: var(--font-mincho);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.sarusuberi-site .l-footer__shopname-read {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.72);
}

.sarusuberi-site .l-footer__address,
.sarusuberi-site .l-footer__hours {
  font-size: 0.875rem;
  line-height: 2;
}

/* 店舗名からは一段大きく離し、住所と営業時間は同じまとまりとして扱う */
.sarusuberi-site .l-footer__address {
  margin-top: var(--space-md);
}

.sarusuberi-site .l-footer__hours {
  margin-top: var(--space-sm);
}

.sarusuberi-site .l-footer__tel {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sarusuberi-site .l-footer__note {
  display: inline-block;
  margin-top: var(--space-2xs);
}

.sarusuberi-site .l-footer__copyright {
  padding-top: var(--space-md);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

@media (min-width: 768px) {
  .sarusuberi-site .l-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .sarusuberi-site .l-footer__copyright {
    grid-column: 1 / -1;
  }
}


/* ==================================================================
   3. Component
================================================================== */

/* ------------------------------------------------
   3-1. Skip link
------------------------------------------------ */
.sarusuberi-site .c-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  color: var(--color-white);
  background-color: var(--color-navy);
  /* 画面外へ退避。負のleftを使うと横スクロールの原因になるためtransformで隠す */
  transform: translateY(-101%);
}

.sarusuberi-site .c-skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------
   3-2. Section title
   英字ラベル → 日本語見出し（02 §22 / §71、04 §31）
------------------------------------------------ */
.sarusuberi-site .c-section-title {
  margin-bottom: var(--space-xl);
}

.sarusuberi-site .c-section-title__en {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-red);
}

.sarusuberi-site .c-section-title__ja {
  margin-top: var(--space-2xs);
  font-family: var(--font-mincho);
  font-size: clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* 濃色背景セクション用 */
.sarusuberi-site .c-section-title--light .c-section-title__en {
  color: var(--color-white);
}

.sarusuberi-site .c-section-title--center {
  text-align: center;
}

/* ------------------------------------------------
   3-3. Page title（下層ページ専用）
   英字ラベル → h1 → リード（04 §35 / §36）。
   TOPでは使用しない（TOPのh1はFV内にある）。
   装飾線は使わず、余白と文字サイズだけで階層を作る（02 §72）。
------------------------------------------------ */
.sarusuberi-site .c-page-title {
  padding-block: clamp(32px, 6vw, 64px) clamp(48px, 8vw, 88px);
}

.sarusuberi-site .c-page-title__en {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-red);
}

/* h2（clamp 1.375〜1.875rem）より一段大きくし、ページ主題であることを示す */
.sarusuberi-site .c-page-title__ja {
  margin-top: var(--space-xs);
  font-family: var(--font-mincho);
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.sarusuberi-site .c-page-title__lead {
  max-width: var(--width-text);
  margin-top: var(--space-md);
}

/* ------------------------------------------------
   3-4. Breadcrumb
   下層ページのみで使用。TOPには設置しない（01 §16 / 04 §102 / 08 §289）。
   WordPress組み込み時、Cocoon標準パンくずと二重表示しないこと（06 §228 / 08 §290）。
------------------------------------------------ */
.sarusuberi-site .c-breadcrumb {
  padding-block: var(--space-sm);
}

.sarusuberi-site .c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.sarusuberi-site .c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text);
}

/* 区切りは記号ではなく細い罫線。読み上げ対象にしないため擬似要素で表現する */
.sarusuberi-site .c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  width: 12px;
  height: 1px;
  background-color: var(--color-border);
}

.sarusuberi-site .c-breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration) var(--easing),
              border-color var(--duration) var(--easing);
}

@media (hover: hover) {
  .sarusuberi-site .c-breadcrumb__link:hover {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
  }
}

/* ------------------------------------------------
   3-5. Link with arrow
   基本CTA：テキスト＋細い線＋小さな矢印（02 §49、03 §99）
------------------------------------------------ */
.sarusuberi-site .c-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--color-red);
  text-decoration: none;
  border-bottom: 1px solid var(--color-red);
  transition: color var(--duration) var(--easing),
              border-color var(--duration) var(--easing);
}

/* 矢印は装飾のため擬似要素で表現し、SVGの重複出力を避ける（08 §308） */
.sarusuberi-site .c-link-arrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--duration) var(--easing);
}

.sarusuberi-site .c-link-arrow--light {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.sarusuberi-site .c-link-arrow--quiet {
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}

@media (hover: hover) {
  .sarusuberi-site .c-link-arrow:hover::after {
    transform: translateX(6px);
  }

  .sarusuberi-site .c-link-arrow--quiet:hover {
    color: var(--color-red);
    border-bottom-color: var(--color-red);
  }
}

/* ------------------------------------------------
   3-6. Button（見た目がボタンでもページ遷移・電話は a を使用：04 §140）
   角丸は 0〜2px（02 §50）
------------------------------------------------ */
.sarusuberi-site .c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-xs) var(--space-lg);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-red);
  border: 1px solid var(--color-red);
  border-radius: 2px;
  transition: color var(--duration) var(--easing),
              background-color var(--duration) var(--easing);
}

.sarusuberi-site .c-button--outline {
  color: var(--color-red);
  background-color: transparent;
}

@media (hover: hover) {
  .sarusuberi-site .c-button:hover {
    color: var(--color-red);
    background-color: var(--color-white);
  }

  .sarusuberi-site .c-button--outline:hover {
    color: var(--color-white);
    background-color: var(--color-red);
  }
}

/* ------------------------------------------------
   3-7. Placeholder（仮素材）
   ※本番公開前にすべて実画像へ差し替える（09 §119 / §161）。
   　仮素材であることを明示するため破線を使用しており、
   　差し替え後はこのコンポーネント自体を削除する。
------------------------------------------------ */
.sarusuberi-site .c-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;          /* CLS対策として表示領域を確保 */
  padding: var(--space-sm);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border: 1px dashed var(--color-border);
}

.sarusuberi-site .c-placeholder--portrait { aspect-ratio: 4 / 5; }
.sarusuberi-site .c-placeholder--wide     { aspect-ratio: 16 / 9; }
.sarusuberi-site .c-placeholder--square   { aspect-ratio: 1 / 1; }

/* FVはPCで高さいっぱいに伸びるため、PC側でaspect-ratioを解除する（4-1で指定） */
.sarusuberi-site .c-placeholder--fv {
  aspect-ratio: 3 / 2;
}

/*
  FVメインビジュアル。SPは3:2で領域を確保し、PCではカラムの高さいっぱいに伸ばす。
  縦位置写真のため object-position で蕎麦（下寄り）を残す（02 §42）。
*/
.sarusuberi-site .p-fv__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 60%;
}

.sarusuberi-site .c-placeholder--dark {
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
}

/* ------------------------------------------------
   3-8. TODO（要確認テキスト）
   ※本番公開前にすべて確定原稿へ差し替える。
------------------------------------------------ */
.sarusuberi-site .c-todo {
  color: var(--color-text-muted);
}

/* ------------------------------------------------
   3-9. Nav toggle（モバイルメニュー開閉）
------------------------------------------------ */
.sarusuberi-site .c-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;             /* タップ領域の確保（04 §156） */
  padding: 0 var(--space-2xs);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.sarusuberi-site .c-nav-toggle__bar {
  position: relative;
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--color-text);
}

.sarusuberi-site .c-nav-toggle__bar::before,
.sarusuberi-site .c-nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-text);
  transition: transform var(--duration) var(--easing);
}

.sarusuberi-site .c-nav-toggle__bar::before { top: -6px; }
.sarusuberi-site .c-nav-toggle__bar::after  { top: 6px; }

.sarusuberi-site .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar {
  background-color: transparent;
}

.sarusuberi-site .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.sarusuberi-site .c-nav-toggle[aria-expanded="true"] .c-nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .sarusuberi-site .c-nav-toggle {
    display: none;
  }
}

/* ------------------------------------------------
   3-10. Global navigation
   現在位置は aria-current="page" で示し、状態用クラスを重複させない
   （色だけに依存させないため、PCでは下線も併用する：02 §86）
------------------------------------------------ */
.sarusuberi-site .c-gnav__link {
  display: block;
  padding-block: var(--space-xs);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .c-gnav__link[aria-current="page"] {
  color: var(--color-red);
}

@media (min-width: 1024px) {
  .sarusuberi-site .c-gnav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-sm), 2vw, var(--space-lg));
  }

  .sarusuberi-site .c-gnav__link {
    padding-block: var(--space-2xs);
    font-size: 0.875rem;
    border-bottom: 1px solid transparent;
    transition: color var(--duration) var(--easing),
                border-color var(--duration) var(--easing);
  }

  .sarusuberi-site .c-gnav__link[aria-current="page"] {
    border-bottom-color: var(--color-red);
  }

  @media (hover: hover) {
    .sarusuberi-site .c-gnav__link:hover {
      color: var(--color-red);
      border-bottom-color: var(--color-red);
    }
  }
}

/* ------------------------------------------------
   3-11. Footer navigation
------------------------------------------------ */
.sarusuberi-site .c-fnav {
  display: grid;
  gap: var(--space-2xs);
}

.sarusuberi-site .c-fnav__link {
  display: inline-block;
  padding-block: var(--space-2xs);
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--easing);
}

.sarusuberi-site .c-fnav__link[aria-current="page"] {
  border-bottom-color: currentColor;
}

/* Instagram / Googleマップへの外部リンク。サイト内ナビとは一段離して置く */
.sarusuberi-site .c-fnav--external {
  margin-top: var(--space-md);
}

@media (hover: hover) {
  .sarusuberi-site .c-fnav__link:hover {
    border-bottom-color: currentColor;
  }
}

@media (min-width: 768px) {
  .sarusuberi-site .c-fnav {
    grid-template-columns: repeat(2, minmax(0, auto));
    column-gap: var(--space-xl);
  }
}

/* ------------------------------------------------
   3-12. Shop information（dl / dt / dd：04 §83）

   既定は濃色背景（TOP 店舗情報セクション）。
   白背景でも同一コンポーネントを使えるよう、罫線と補助テキストの色だけを
   コンポーネント内変数に切り出し、--light で差し替える。
   同じ役割のコンポーネントを別名で重複作成しない（04 §1 / §2 / 08 §184）。
   --light で使用するのは 02 §7 の7色のみ。新規カラーは追加していない。
------------------------------------------------ */
.sarusuberi-site .c-shop-info {
  --shop-info-line: rgba(255, 255, 255, 0.24);
  --shop-info-term: rgba(255, 255, 255, 0.72);
  --shop-info-note: rgba(255, 255, 255, 0.78);

  border-top: 1px solid var(--shop-info-line);
}

/* 白背景用（/access/ など） */
.sarusuberi-site .c-shop-info--light {
  --shop-info-line: var(--color-border);
  --shop-info-term: var(--color-text-muted);
  --shop-info-note: var(--color-text-muted);
}

.sarusuberi-site .c-shop-info__term {
  padding-top: var(--space-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--shop-info-term);
}

.sarusuberi-site .c-shop-info__desc {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--shop-info-line);
}

.sarusuberi-site .c-shop-info__note {
  display: block;
  margin-top: var(--space-2xs);
  font-size: 0.875rem;
  color: var(--shop-info-note);
}

.sarusuberi-site .c-shop-info__tel {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 濃色背景では補助テキスト色（#666666）ではコントラストが不足するため上書きする */
.sarusuberi-site .p-shopinfo .c-todo {
  color: rgba(255, 255, 255, 0.72);
}

.sarusuberi-site .l-footer .c-todo {
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 768px) {
  .sarusuberi-site .c-shop-info {
    display: grid;
    grid-template-columns: 8em 1fr;
  }

  .sarusuberi-site .c-shop-info__term {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--shop-info-line);
  }

  .sarusuberi-site .c-shop-info__desc {
    padding-block: var(--space-sm);
  }
}

/* ------------------------------------------------
   3-13. News list（04 §72〜§75）
------------------------------------------------ */
.sarusuberi-site .c-news-list {
  border-top: 1px solid var(--color-border);
}

.sarusuberi-site .c-news-list__item {
  border-bottom: 1px solid var(--color-border);
}

/*
  __link はリンクあり、__body はリンクなしの同一レイアウト。
  記事URL（投稿スラッグ）が未確定の一覧では __body を使い、
  WordPress投稿ループへ置換する際に __link へ差し替える。
*/
.sarusuberi-site .c-news-list__link,
.sarusuberi-site .c-news-list__body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-sm);
  text-decoration: none;
  transition: color var(--duration) var(--easing);
}

.sarusuberi-site .c-news-list__date {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.sarusuberi-site .c-news-list__category {
  justify-self: start;
  padding: 2px var(--space-2xs);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-red);
  border: 1px solid var(--color-border);
}

.sarusuberi-site .c-news-list__title {
  grid-column: 1 / -1;
  font-size: 1rem;
}

@media (hover: hover) {
  .sarusuberi-site .c-news-list__link:hover .c-news-list__title {
    color: var(--color-red);
  }
}

@media (min-width: 768px) {
  .sarusuberi-site .c-news-list__link,
  .sarusuberi-site .c-news-list__body {
    grid-template-columns: 7em 7em 1fr;
  }

  .sarusuberi-site .c-news-list__title {
    grid-column: auto;
  }
}

/* ------------------------------------------------
   3-14. Menu list（お品書き：04 §65〜§69 / 05 §36）
   カードを並べず「カテゴリ → 料理名 → 価格」の読みやすい構成にする（02 §65）。
   価格だけを大きくして価格比較サイトのようにしない（02 §66）。
   写真のない料理を無理にカード化しない（04 §70）。
------------------------------------------------ */
.sarusuberi-site .c-menu-list {
  max-width: var(--width-text);
  border-top: 1px solid var(--color-border);
}

.sarusuberi-site .c-menu-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .c-menu-list__name {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
}

/* 価格は右端。数字は読みやすさを優先し装飾しない（02 §29） */
.sarusuberi-site .c-menu-list__price {
  flex-shrink: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* 替えざる・大盛りなどの追加項目。本体より一段控えめに見せる */
.sarusuberi-site .c-menu-list--sub .c-menu-list__name {
  font-family: var(--font-gothic);
  font-size: 0.9375rem;
}

/* ------------------------------------------------
   3-15. Menu card（写真つきのお品書き）
   写真 → 料理名 → 価格 という視線の流れを作る（02 §65 / §66 / 04 §67）。
   写真を主役にするため1行の点数を絞り、小さなカードを大量に並べない（02 §40）。
   写真が未入稿の品は c-placeholder が入る。入稿後は img へ置換するだけでよい。
------------------------------------------------ */
.sarusuberi-site .c-menu-card-list {
  display: grid;
  gap: var(--space-2xl) var(--space-lg);
}

/* SPでも写真が小さくなりすぎないよう1カラムを維持する（指示24 / 02 §81） */
@media (min-width: 768px) {
  .sarusuberi-site .c-menu-card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3xl) clamp(var(--space-lg), 3vw, var(--space-xl));
  }
}

/* 写真は3:2で領域を確保し、料理が切れないよう cover で中央を見せる（02 §42 / 08 §106） */
.sarusuberi-site .c-menu-card__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sarusuberi-site .c-menu-card__name {
  margin-top: var(--space-sm);
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}

/* 仮画像であることの注記。写真の内容を誤認させないために表示する（09 §172-2） */
.sarusuberi-site .c-menu-card__note {
  margin-top: var(--space-2xs);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* 価格だけを大きくして価格比較サイトのように見せない（02 §66） */
.sarusuberi-site .c-menu-card__price {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------
   3-16. FAQ（details / summary：04 §79 / §80 / 05 §84 / 08 §229）
   JavaScriptを使わずCSSだけで開閉する。装飾は最小限（02 §67 / §133）。
------------------------------------------------ */
.sarusuberi-site .c-faq {
  max-width: var(--width-text);
  border-top: 1px solid var(--color-border);
}

.sarusuberi-site .c-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .c-faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration) var(--easing);
}

/* Safari の既定マーカーを消す。矢印は擬似要素で描く */
.sarusuberi-site .c-faq__q::-webkit-details-marker {
  display: none;
}

.sarusuberi-site .c-faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--easing);
}

.sarusuberi-site .c-faq__item[open] .c-faq__q::after {
  transform: translateY(2px) rotate(-135deg);
}

.sarusuberi-site .c-faq__a {
  padding-bottom: var(--space-md);
}

@media (hover: hover) {
  .sarusuberi-site .c-faq__q:hover {
    color: var(--color-red);
  }
}

/* ------------------------------------------------
   3-17. CTA（来店導線）
   TOPの最終CTAと下層ページの最終CTAは同一の役割のため、
   別コンポーネントに分けず本コンポーネントを共用する（04 §1 / §2 / 08 §184）。

   ・__copy   … 短いコピー。TOPのみ使用（03 §83 / §84）
   ・__links  … 次に読むページへの導線。下層ページのみ使用（05 §181 / §182）
   モバイル画面下部の固定CTAは初期実装では設置しない（03 / 05 §176 / §177）。
------------------------------------------------ */
.sarusuberi-site .c-cta {
  padding-block: var(--section-space);
  text-align: center;
  background-color: var(--color-bg);

  /*
    上端にだけ青海波を寄せ、下へ消す（3-18）。
    グラデーションは背景色 #f7f6f3 と同色。柄を「消す」ためだけに重ねている。
    淡色面は柄が目立ちやすいため、濃色面（192px）より短く 160px で消す。
  */
  background-image:
    linear-gradient(to bottom,
      rgba(247, 246, 243, 0) 0,
      rgba(247, 246, 243, 0.5) 64px,
      rgba(247, 246, 243, 1) 160px),
    url("/assets/images/decor/seigaiha-light.svg");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
}

.sarusuberi-site .c-cta__copy {
  font-family: var(--font-mincho);
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.375rem);
  line-height: 2;
  letter-spacing: 0.1em;
}

.sarusuberi-site .c-cta__shopname {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  letter-spacing: 0.08em;
}

/* コピーがある場合（TOP）のみ、店舗名との間に一段大きな余白を置く */
.sarusuberi-site .c-cta__copy + .c-cta__shopname {
  margin-top: var(--space-xl);
}

.sarusuberi-site .c-cta__hours {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
}

.sarusuberi-site .c-cta__note {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.sarusuberi-site .c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.sarusuberi-site .c-cta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-lg);
  margin-top: var(--space-xl);
}

/* ------------------------------------------------
   3-18. 和の意匠（青海波・筆罫）

   02_design_system.md §120：和柄は多用しない。使う場合も極めて限定的に。
   §72：装飾線は必要な場合のみ。基本は文字＋余白で成立させる。
   したがって、和の装飾は「どこに出るか」を次の2種・5か所に固定する。
   これ以上増やさないこと。増やした時点で §120 に反する。

   ■ 青海波（assets/images/decor/seigaiha-*.svg）
     出る面：.p-fv__body（#ffffff）／.c-cta（#f7f6f3）
             .p-shopinfo（#2a3a49）／.l-footer（#2a3a49）
     出し方：面の端にだけ寄せ、同色のグラデーションを重ねて消す。
             面全体を柄で埋めない。文字が乗る範囲に柄を残さない。
             寄せる向きは面ごとに1つだけ決める。
               ・.p-fv__body … 下端（写真とロゴを避けるため）
               ・その他3面   … 上端
     色    ：SVG側の塗り＝各面の背景色。線＝白 or 藍鼠の 9〜14%。
             白場ほど柄が立つため、FV（白）を最も薄い9%にしている。
             背景色を変える場合は SVG の fill と CSS のグラデーション色も揃えて直す。

   ■ 筆罫（assets/images/decor/brush-rule.svg）
     出る面：セクションタイトル／ページタイトルの英字ラベル手前のみ。
     色    ：currentColor。朱（通常）／白（--light）を自動で継ぐ。
     mask-image 非対応環境では単なる四角に見えてしまうため @supports で囲う。
     非対応時は装飾が出ないだけで、情報は一切欠けない。
------------------------------------------------ */
@supports ((-webkit-mask-image: url("/assets/images/decor/brush-rule.svg")) or (mask-image: url("/assets/images/decor/brush-rule.svg"))) {
  .sarusuberi-site .c-section-title__en::before,
  .sarusuberi-site .c-page-title__en::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 6px;
    margin-right: 0.75em;
    vertical-align: 0.15em;
    background-color: currentColor;
    -webkit-mask: url("/assets/images/decor/brush-rule.svg") no-repeat center / contain;
    mask: url("/assets/images/decor/brush-rule.svg") no-repeat center / contain;
  }
}

/* ------------------------------------------------
   3-19. Page top（ページの先頭へ戻る）

   全ページ共通。下へスクロールしたときだけ右下に出る。

   ■ 役割分担
     ・スクロールそのものは a[href="#top"] のブラウザ標準動作で行う。
       JavaScriptでスクロールさせない（08 §148「スクロールはJSなし」）。
       標準動作なのでフォーカスも文書先頭に戻り、次のTabがスキップリンクへ進む。
       なめらかに動くのは 1-4 の scroll-behavior によるもの。
       ここでJavaScriptによるスクロール処理を書き足さないこと。
     ・JavaScript（page-top.js）が担うのは「一定量スクロールしたら見せる」
       の表示切替だけ。手段は Intersection Observer（PROJECT.md §17 の使用可リスト）。
       scroll イベントは使わない。

   ■ 既定は非表示（visibility: hidden）
     JavaScriptが無効なら最後まで出てこない。その場合もヘッダーのロゴと
     フッターのメニューから移動できるため、情報・導線は一切欠けない。
     visibility を使うのは、非表示のあいだタブ順と読み上げからも外すため。

   ■ 03 §119 / 05 §177「モバイル下部の固定CTAは設置しない」には抵触しない
     本要素はCTA（電話・アクセス等の来店直結情報）ではなく、
     常時表示でもないため。ここにCTAを足さないこと。足した時点で §119 に反する。

   ■ 見た目
     影は使わない（サイト全体で box-shadow を使っていない）。
     白面・濃紺のフッターどちらの上でも読めるよう、白地＋罫＋藍鼠の矢印とする。
     矢印は擬似要素で描き、全ページにSVGを重複出力しない（08 §308）。
------------------------------------------------ */
.sarusuberi-site .c-page-top {
  position: fixed;
  z-index: 20; /* ヘッダー（10）より前、スキップリンク（100）より後ろ */
  inset-inline-end: clamp(16px, 3vw, 32px);
  /* iOSのホームバーに重ならないよう安全領域を足す */
  inset-block-end: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--color-navy);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;

  /* 既定は非表示。page-top.js が .is-visible を付けたときだけ出す */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--easing),
              visibility var(--duration) var(--easing),
              transform var(--duration) var(--easing),
              color var(--duration) var(--easing),
              border-color var(--duration) var(--easing);
}

.sarusuberi-site .c-page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 上向きの矢羽。c-link-arrow と同じ1pxの細さに揃える */
.sarusuberi-site .c-page-top::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(2px) rotate(-45deg);
  transition: transform var(--duration) var(--easing);
}

@media (hover: hover) {
  .sarusuberi-site .c-page-top:hover {
    color: var(--color-red);
    border-color: var(--color-red);
  }

  /* c-link-arrow が右へ動くのに合わせ、こちらは上へ動かす */
  .sarusuberi-site .c-page-top:hover::before {
    transform: translateY(-1px) rotate(-45deg);
  }
}

@media (min-width: 1024px) {
  .sarusuberi-site .c-page-top {
    width: 52px;
    height: 52px;
  }
}


/* ==================================================================
   4. Project（TOPページ固有）
================================================================== */

/* 全セクション共通の上下余白 */
.sarusuberi-site .p-greeting,
.sarusuberi-site .p-about,
.sarusuberi-site .p-recommend,
.sarusuberi-site .p-commitment,
.sarusuberi-site .p-interior,
.sarusuberi-site .p-shopinfo,
.sarusuberi-site .p-sns,
.sarusuberi-site .p-map,
.sarusuberi-site .p-news {
  padding-block: var(--section-space);
}

/* ブランドストーリーを担うセクションは余白を大きく取る（03 §95） */
.sarusuberi-site .p-greeting,
.sarusuberi-site .p-commitment {
  padding-block: var(--section-space-brand);
}

/* 背景の切り替えは最小限にとどめる（03 §96） */
.sarusuberi-site .p-recommend {
  background-color: var(--color-bg);
}

.sarusuberi-site .p-shopinfo {
  color: var(--color-white);
  background-color: var(--color-navy);

  /*
    濃色面の上端にだけ青海波を寄せる（3-18）。
    グラデーションは背景色 #2a3a49 と同色。柄を「消す」ためだけに重ねている。
    停止位置は % ではなく px。セクションの高さ（＝原稿量）が変わっても
    帯の高さが動かないようにするため。dl の途中で柄は完全に消える。
  */
  background-image:
    linear-gradient(to bottom,
      rgba(42, 58, 73, 0) 0,
      rgba(42, 58, 73, 0.45) 80px,
      rgba(42, 58, 73, 1) 192px),
    url("/assets/images/decor/seigaiha-navy.svg");
  background-repeat: no-repeat, repeat;
  background-position: center top, center top;
}

/* ------------------------------------------------
   4-1. 01 ファーストビュー
------------------------------------------------ */
.sarusuberi-site .p-fv {
  position: relative;
  display: grid;
}

/*
  FVビジュアル。3枚の写真を重ねてクロスフェードさせる（09 §183-5）。
  ・JavaScriptは使用しない（PROJECT.md §17）
  ・操作UI（矢印・ドット）を持たないため、カルーセルではない
  ・1枚あたり表示6秒＋フェード2秒、3枚で1周24秒。ゆっくり静かに切り替える
  ・prefers-reduced-motion では切り替えを止め、1枚目のみを表示する（後述）
*/
.sarusuberi-site .p-fv__visual {
  order: -1;
  position: relative;
  isolation: isolate;
}

/* picture は既定でインラインのためブロック化する（重ね合わせの基準を安定させる） */
.sarusuberi-site .p-fv__visual picture {
  display: block;
}

/* 2枚目以降は1枚目の上に重ねる。1枚目が領域の高さを決める */
.sarusuberi-site .p-fv__visual picture + picture {
  position: absolute;
  inset: 0;
}

.sarusuberi-site .p-fv__body {
  display: grid;
  justify-items: center;
  padding: var(--space-2xl) var(--gutter) var(--space-3xl);
  text-align: center;
  background-color: var(--color-white);

  /*
    白場の下端にだけ青海波を敷く（3-18）。他の3面が「上端に寄せる」のに対し、
    ここだけ下端に寄せる。FVは写真が主役であり、柄を上に置くと
    ロゴ・店名・縦組みコピーと競合するため（03 §7 / §9 / 02 §121）。

    帯は下の余白（padding-bottom 80px）の中に収める。
    「お品書きを見る」の下端はSPで80px・PCで94px の位置にあり、
    そこでは柄はほぼ消えている。文字の可読性には影響しない。

    LCPはFV写真（fv-soba）であり、この背景SVGは約1.5KB・低優先度で
    後から読まれる。LCPの妨げにはならない（07 §132 / 08 §114）。
  */
  background-image:
    linear-gradient(to top,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.5) 48px,
      rgba(255, 255, 255, 1) 132px),
    url("/assets/images/decor/seigaiha-white.svg");
  background-repeat: no-repeat, repeat;
  background-position: center bottom, center bottom;
}

.sarusuberi-site .p-fv__logo {
  width: clamp(120px, 26vw, 160px);
  margin-bottom: var(--space-md);
}

.sarusuberi-site .p-fv__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: 1.5;
}

.sarusuberi-site .p-fv__title-main {
  display: block;
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.75rem);
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-fv__title-read {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-gothic);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
}

.sarusuberi-site .p-fv__copy {
  margin-top: var(--space-lg);
  font-family: var(--font-mincho);
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

.sarusuberi-site .p-fv__place {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
}

.sarusuberi-site .p-fv__reopen {
  margin-top: var(--space-2xs);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--color-red);
}

.sarusuberi-site .p-fv__cta {
  margin-top: var(--space-lg);
}

.sarusuberi-site .p-fv__scroll {
  display: none;
}

@media (min-width: 1024px) {
  /* PC：左に写真、右に余白領域という非対称構成（03 §7 / §9） */
  .sarusuberi-site .p-fv {
    grid-template-columns: 62% 38%;
    min-height: min(84svh, 760px);
  }

  .sarusuberi-site .p-fv__visual {
    order: 0;
    height: 100%;
  }

  /* グリッドの高さいっぱいに広げる。比率固定のままだと横幅が溢れるため解除する */
  .sarusuberi-site .c-placeholder--fv,
  .sarusuberi-site .p-fv__image {
    aspect-ratio: auto;
    height: 100%;
  }

  /* picture 要素もグリッドの高さを引き継ぐ */
  .sarusuberi-site .p-fv__visual picture {
    display: block;
    height: 100%;
  }

  .sarusuberi-site .p-fv__body {
    align-content: center;
    justify-items: start;
    padding: var(--space-3xl) clamp(var(--space-lg), 4vw, var(--space-2xl));
    text-align: left;
  }

  /*
    縦組みは短いコピーのみに限定する（02 §25 / 08 §77）。
    PCではFVの主役コピーとして、h2（.c-section-title__ja：最大 1.875rem）と
    同等〜わずかに大きい 最大 2rem まで拡大する。SPの横組みは 1rem のまま変更しない。
    2行構成（読点で改行）のため、max-height は em 指定のままで折り返し位置は変わらない。
  */
  .sarusuberi-site .p-fv__copy {
    writing-mode: vertical-rl;
    max-height: 16em;
    margin-top: var(--space-xl);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.9;
    letter-spacing: 0.12em;
  }

  .sarusuberi-site .p-fv__scroll {
    position: absolute;
    left: calc(62% - 2.5rem);
    bottom: var(--space-lg);
    display: block;
    writing-mode: vertical-rl;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    color: var(--color-text-muted);
  }
}

/* ------------------------------------------------
   4-2. 02 三代目就任のご挨拶
------------------------------------------------ */
.sarusuberi-site .p-greeting__body {
  display: grid;
  gap: var(--space-xl);
}

.sarusuberi-site .p-greeting__lead {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

.sarusuberi-site .p-greeting__paragraph {
  max-width: var(--width-text);
  margin-top: var(--space-md);
}

.sarusuberi-site .p-greeting__name {
  margin-top: var(--space-md);
  font-family: var(--font-mincho);
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-greeting__cta {
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  /* 左右非対称レイアウト（02 §83 / 03 §24） */
  .sarusuberi-site .p-greeting__body {
    grid-template-columns: 42% 1fr;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: start;
  }

  .sarusuberi-site .p-greeting__text {
    padding-top: var(--space-xl);
  }
}

/* ------------------------------------------------
   4-3. 03 百日紅とは
------------------------------------------------ */
.sarusuberi-site .p-about__body {
  display: grid;
  gap: var(--space-xl);
}

.sarusuberi-site .p-about__paragraph {
  max-width: var(--width-text);
}

.sarusuberi-site .p-about__paragraph + .p-about__paragraph {
  margin-top: var(--space-md);
}

.sarusuberi-site .p-about__cta {
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-about__body {
    grid-template-columns: 1fr 48%;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: center;
  }
}

/* ------------------------------------------------
   4-4. 04 おすすめ
------------------------------------------------ */
.sarusuberi-site .p-recommend__list {
  display: grid;
  gap: var(--space-2xl);
}

/* おすすめ写真は縦位置（4:5）。原本が縦位置のためトリミング損失が小さい */
.sarusuberi-site .p-recommend__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* こだわりの写真は 3:2 に統一 */
.sarusuberi-site .p-about-page__figure img,
.sarusuberi-site .p-access__figure img,
.sarusuberi-site .p-commitment__figure img,
.sarusuberi-site .p-interior__figure img,
.sarusuberi-site .p-about__figure img,
.sarusuberi-site .p-shopinfo__figure img,
.sarusuberi-site .p-about-page__gallery img,
.sarusuberi-site .p-media figure img,
.sarusuberi-site .p-owner__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 人物写真は 4:5（02 §41）。顔が切れないよう上寄りで見せる（02 §42） */
.sarusuberi-site .p-greeting__figure img,
.sarusuberi-site .p-owner__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
}

.sarusuberi-site .p-recommend__name {
  margin-top: var(--space-sm);
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.sarusuberi-site .p-recommend__desc {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
}

.sarusuberi-site .p-recommend__price {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

/* おすすめの理由（09 §175-4）。主観的な煽り表現は使わず、静かに一文だけ置く */
.sarusuberi-site .p-recommend__reason {
  max-width: var(--width-text);
  margin-top: var(--space-2xl);
}

.sarusuberi-site .p-recommend__cta {
  margin-top: var(--space-2xl);
}

.sarusuberi-site .p-recommend__reason + .p-recommend__cta {
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-recommend__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-lg), 3vw, var(--space-xl));
  }
}

/* ------------------------------------------------
   4-5. 05 こだわり
   アイコンではなく「写真＋番号＋短いタイトル」で表現する（03 §46）
------------------------------------------------ */
.sarusuberi-site .p-commitment__list {
  display: grid;
  gap: var(--space-2xl);
}

.sarusuberi-site .p-commitment__num {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-red);
}

.sarusuberi-site .p-commitment__name {
  margin-top: var(--space-2xs);
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-commitment__desc {
  margin-top: var(--space-2xs);
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .sarusuberi-site .p-commitment__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-lg), 3vw, var(--space-xl));
  }
}

/* ------------------------------------------------
   4-6. 06 店内紹介
   大きな写真＋小さな写真＋短い文章の非対称構成（03 §49）
------------------------------------------------ */
.sarusuberi-site .p-interior__body {
  display: grid;
  gap: var(--space-md);
}

.sarusuberi-site .p-interior__text {
  max-width: var(--width-text);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-interior__body {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .sarusuberi-site .p-interior__figure--main {
    grid-column: 1 / -1;
  }

  .sarusuberi-site .p-interior__text {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .sarusuberi-site .p-interior__body {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }

  .sarusuberi-site .p-interior__figure--main {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .sarusuberi-site .p-interior__text {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ------------------------------------------------
   4-7. 07 店舗情報
------------------------------------------------ */
.sarusuberi-site .p-shopinfo__body {
  display: grid;
  gap: var(--space-xl);
}

.sarusuberi-site .p-shopinfo__cta {
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .sarusuberi-site .p-shopinfo__body {
    grid-template-columns: 1fr 40%;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: start;
  }
}

/* ------------------------------------------------
   4-8. 08 店舗SNS
------------------------------------------------ */
.sarusuberi-site .p-sns__text {
  max-width: var(--width-text);
}

.sarusuberi-site .p-sns__cta {
  margin-top: var(--space-md);
}

/*
  写真ギャラリー（1:1 の3枠）。
  初期公開時はHTML側から外している（09 §179）。Instagram投稿写真の正式素材が未入稿のため。
  WordPress側で店舗が数枚を掲載する運用になった際に .p-sns__gallery を戻すため、
  スタイルはここに保持する（03 §63）。
*/
.sarusuberi-site .p-sns__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-sns__gallery {
    gap: var(--space-sm);
  }
}

/* ------------------------------------------------
   4-9. 09 店舗地図
   Google Maps iframe は埋め込まず、所在地とCTAのみ（03 §72 / §73）
------------------------------------------------ */
.sarusuberi-site .p-map__body {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sarusuberi-site .p-map__address {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.sarusuberi-site .p-map__actions {
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}

.sarusuberi-site .p-map__tourism {
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-map__body {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-xl);
  }

  .sarusuberi-site .p-map__actions {
    justify-items: end;
  }
}

/* ------------------------------------------------
   4-10. 10 お知らせ
------------------------------------------------ */
.sarusuberi-site .p-news__cta {
  margin-top: var(--space-xl);
}

/*
  11 CTA（最終導線）は TOP 固有ではなく共通コンポーネント `.c-cta`（3-14）で実装する。
  下層ページの最終CTAと同一の役割のため、Project層へは重複定義しない。
*/


/* ------------------------------------------------
   4-11. 404
   通常ページより簡素にする（05 §110）
------------------------------------------------ */
.sarusuberi-site .p-404__links {
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}

/* ------------------------------------------------
   4-12. /owner/ 三代目店主
   人物 → 言葉 → 余白 → 継承 のストーリー型（02 §127）。
   「プロフィールカード」にしない（02 §70）。

   原稿量が未確定のため、以下を設計方針とする。
     ・高さを固定しない（08 §363〜§366）
     ・テキストは max-width で行長だけを制御し、
       1文でも数段落でも読みやすさが変わらないようにする
     ・写真とテキストを並べる箇所は align-items: center とし、
       文章が短いときに列が間延びしないようにする
------------------------------------------------ */

/* --- 02 三代目店主の写真（ページ導入） --- */
/* 直前の .c-page-title が下余白を持つため、ここでは上余白を足さない */
.sarusuberi-site .p-owner__intro {
  padding-bottom: var(--section-space);
}

.sarusuberi-site .p-owner__intro-body {
  display: grid;
  gap: var(--space-xl);
}

.sarusuberi-site .p-owner__words {
  font-family: var(--font-mincho);
  font-size: 1.125rem;
  line-height: 2;
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  /* 左右非対称。人物写真を主役として大きく取る（02 §83 / §84） */
  .sarusuberi-site .p-owner__intro-body {
    grid-template-columns: 46% 1fr;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: center;
  }

  /* 縦組みは短いコピーのみに限定する（02 §25 / 08 §77） */
  .sarusuberi-site .p-owner__words {
    writing-mode: vertical-rl;
    max-height: 18em;
    justify-self: start;
    letter-spacing: 0.14em;
  }
}

/* --- 本文共通（03 / 05 / 06） --- */
.sarusuberi-site .p-owner__paragraph {
  max-width: var(--width-text);
}

.sarusuberi-site .p-owner__paragraph + .p-owner__paragraph {
  margin-top: var(--space-md);
}

.sarusuberi-site .p-owner__name {
  margin-top: var(--space-lg);
  font-family: var(--font-mincho);
  letter-spacing: 0.08em;
}

/* 写真とテキストを並べる本文ブロック（05 受け継いだもの） */
.sarusuberi-site .p-owner__body {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-owner__body {
    grid-template-columns: 52% 1fr;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: center;
  }
}

/* --- 04 百日紅の歴史 --- */
/* 背景の切り替えは最小限にとどめ、ページ中央に一度だけ置く（03 §96） */
.sarusuberi-site .p-owner__history {
  background-color: var(--color-bg);
}

/* 年表。dt / dd を追加するだけで行が増える構造にする（08 §363） */
.sarusuberi-site .p-owner__timeline {
  max-width: var(--width-text);
  border-top: 1px solid var(--color-border);
}

.sarusuberi-site .p-owner__timeline-term {
  padding-top: var(--space-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.sarusuberi-site .p-owner__timeline-desc {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-owner__timeline {
    display: grid;
    grid-template-columns: 12em 1fr;
  }

  .sarusuberi-site .p-owner__timeline-term {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  .sarusuberi-site .p-owner__timeline-desc {
    padding-block: var(--space-sm);
  }
}

/* --- 07 店主からのメッセージ --- */
/* 締めのセクション。短い一文と余白だけで成立させる（02 §72 / §136） */
.sarusuberi-site .p-owner__message {
  text-align: center;
}

.sarusuberi-site .p-owner__message-text {
  max-width: var(--width-text);
  margin-inline: auto;
  font-family: var(--font-mincho);
  font-size: clamp(1.0625rem, 0.9rem + 0.8vw, 1.375rem);
  line-height: 2.2;
  letter-spacing: 0.1em;
}

.sarusuberi-site .p-owner__message-name {
  margin-top: var(--space-xl);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------
   4-13. /access/ アクセス・店舗情報
   最重要コンバージョンページ（05 §47）。
   デザインより「情報の見つけやすさ」を優先し、背景の切り替えや装飾を足さない
   （02 §131 / §136）。ページ末尾の .c-cta だけが背景を変える。
------------------------------------------------ */

/* 店舗情報のdl。ラベル列（8em）を除いた説明列が本文幅を超えないようにする */
.sarusuberi-site .p-access__shop-info {
  max-width: calc(var(--width-text) + 8em);
}

.sarusuberi-site .p-access__text {
  max-width: var(--width-text);
}

.sarusuberi-site .p-access__sub-title {
  margin-bottom: var(--space-md);
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-access__map-cta + .p-access__sub-title,
.sarusuberi-site .p-access__shop-info + .p-access__text {
  margin-top: var(--space-2xl);
}

.sarusuberi-site .p-access__map-cta + .p-access__text,
.sarusuberi-site .p-access__text + .p-access__text {
  margin-top: var(--space-lg);
}

/* ------------------------------------------------
   4-14. 下層ページ共通の本文パーツ
   /about/ /menu/ /tourism/ /news/ で同じ役割の要素に同じ見た目を与える。
   ページごとに似たパーツを作らない（04 §1 / §2）。
------------------------------------------------ */
.sarusuberi-site .p-text {
  max-width: var(--width-text);
}

.sarusuberi-site .p-text + .p-text {
  margin-top: var(--space-md);
}

.sarusuberi-site .c-news-list + .p-text,
.sarusuberi-site .p-tourism__steps + .p-text {
  margin-top: var(--space-xl);
}

/* セクション見出しの下に本文が続く場合の余白（c-section-title の下余白で足りる） */
.sarusuberi-site .p-text + .c-link-arrow,
.sarusuberi-site .p-cta-inline {
  margin-top: var(--space-lg);
}

/* 写真＋テキストの非対称レイアウト（02 §83 / §84）。/owner/ と同じ比率で統一 */
.sarusuberi-site .p-media {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-media {
    grid-template-columns: 52% 1fr;
    gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
    align-items: center;
  }

  /* 交互に左右を入れ替えてリズムを作る（03 §89 / §90） */
  .sarusuberi-site .p-media--reverse > :first-child {
    order: 2;
  }
}

/* ------------------------------------------------
   4-15. /about/ 百日紅について
------------------------------------------------ */
/* 背景の切り替えは最小限。こだわりセクションのみ warm white（03 §96） */
.sarusuberi-site .p-about-page__commitment {
  background-color: var(--color-bg);
}

/* こだわりの小見出し群。番号＋見出し＋本文（03 §46 / TOPのこだわりと同じ表現） */
.sarusuberi-site .p-about-page__list {
  display: grid;
  gap: var(--space-2xl);
}

/*
  PC・タブレットでは2カラム。写真が大きくなりすぎるのを防ぐ。
  項目が3つのため 01・02 が横並び、03 が次の行の左に置かれる。
  /menu/ の写真つきカード一覧（.c-menu-card-list）と同じ指定に揃える。
*/
@media (min-width: 768px) {
  .sarusuberi-site .p-about-page__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3xl) clamp(var(--space-lg), 3vw, var(--space-xl));
  }
}

/*
  こだわり各項目の写真（09 §183-2）。
  写真 → 番号 → 見出し → 本文 の順で、TOPのこだわりと同じ表現に揃える。
*/
.sarusuberi-site .p-about-page__figure {
  margin-bottom: var(--space-sm);
}

/*
  コンセプト末尾の百日紅の花。
  直前の p-media（写真＋本文）に対して主張しすぎないよう、幅を本文幅に揃える。
*/
.sarusuberi-site .p-about-page__figure--wide {
  max-width: var(--width-text);
  margin-top: var(--space-2xl);
  margin-bottom: 0;
}

/* /access/ の看板写真（09 §183-2）。本文幅に揃える */
.sarusuberi-site .p-access__figure {
  max-width: var(--width-text);
  margin-top: var(--space-lg);
}

.sarusuberi-site .p-access__figcaption {
  margin-top: var(--space-2xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.sarusuberi-site .p-access__figure + .p-access__map-cta {
  margin-top: var(--space-lg);
}

.sarusuberi-site .p-about-page__num {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-red);
}

.sarusuberi-site .p-about-page__name {
  margin-top: var(--space-2xs);
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-about-page__desc {
  max-width: var(--width-text);
  margin-top: var(--space-sm);
}

/* 店内紹介の写真。大小を組み合わせた非対称構成（03 §49 / TOPと同じ） */
.sarusuberi-site .p-about-page__gallery {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .sarusuberi-site .p-about-page__gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .sarusuberi-site .p-about-page__gallery > :first-child {
    grid-column: 1 / -1;
  }
}

.sarusuberi-site .p-about-page__gallery + .p-text {
  margin-top: var(--space-xl);
}

.sarusuberi-site .p-about-page__desc + .p-about-page__desc {
  margin-top: var(--space-md);
}

/* ------------------------------------------------
   4-16. /menu/ お品書き
------------------------------------------------ */
/* カテゴリ間は余白で区切る。罫線を増やさない（02 §13） */
.sarusuberi-site .p-menu__category + .p-menu__category {
  margin-top: var(--space-3xl);
}

.sarusuberi-site .p-menu__category-title {
  margin-bottom: var(--space-md);
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* 替えざる・大盛りの見出し（h4相当の小見出し） */
.sarusuberi-site .p-menu__sub-title {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* カテゴリの主写真。一枚を主役として大きく見せる（02 §40） */
.sarusuberi-site .p-menu__lead-figure {
  margin-bottom: var(--space-2xl);
}

.sarusuberi-site .p-menu__lead-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.sarusuberi-site .p-menu__note {
  max-width: var(--width-text);
  margin-top: var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* ------------------------------------------------
   4-17. /tourism/ 日高を楽しむ
------------------------------------------------ */
.sarusuberi-site .p-tourism__spot + .p-tourism__spot {
  margin-top: var(--space-3xl);
}

.sarusuberi-site .p-tourism__name {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sarusuberi-site .p-tourism__desc {
  max-width: var(--width-text);
  margin-top: var(--space-sm);
}

/* 所在地。本文より一段控えめに置く */
.sarusuberi-site .p-tourism__meta {
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* モデルコース。番号＋線程度の装飾にとどめる（04 §101） */
.sarusuberi-site .p-tourism__course {
  background-color: var(--color-bg);
}

.sarusuberi-site .p-tourism__steps {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--width-text);
}

.sarusuberi-site .p-tourism__step {
  display: grid;
  grid-template-columns: 3.5em 1fr;
  align-items: baseline;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.sarusuberi-site .p-tourism__step-num {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--color-red);
}

.sarusuberi-site .p-tourism__step-name {
  font-family: var(--font-mincho);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
}


/* ==================================================================
   5. Utility（最小限：08 §48 / §49）
================================================================== */
.sarusuberi-site .u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==================================================================
   6. Motion / Print
================================================================== */

/* ------------------------------------------------
   6-1. FVクロスフェード（09 §183-5）
   3枚 × 8秒 = 24秒で1周。各画像は「表示6秒 → フェード2秒」。
   JavaScriptは使用しない。CSSアニメーションのみ。
------------------------------------------------ */
@keyframes sarusuberi-fv-fade {
  /* 自分の表示区間（0〜25%）で不透明、その後フェードアウトして待機 */
  0%      { opacity: 1; }
  25%     { opacity: 1; }
  33.333% { opacity: 0; }
  91.666% { opacity: 0; }
  100%    { opacity: 1; }
}

.sarusuberi-site .p-fv__image--2,
.sarusuberi-site .p-fv__image--3 {
  opacity: 0;
}

.sarusuberi-site .p-fv__image--1,
.sarusuberi-site .p-fv__image--2,
.sarusuberi-site .p-fv__image--3 {
  animation: sarusuberi-fv-fade 24s ease-in-out infinite;
}

/* 各画像を8秒ずつずらして順番に表示する */
.sarusuberi-site .p-fv__image--1 { animation-delay: 0s; }
.sarusuberi-site .p-fv__image--2 { animation-delay: 8s; }
.sarusuberi-site .p-fv__image--3 { animation-delay: 16s; }


/* 動きを減らす設定のユーザーにはアニメーションを抑制する（02 §57 / 08 §154） */
@media (prefers-reduced-motion: reduce) {
  .sarusuberi-site *,
  .sarusuberi-site *::before,
  .sarusuberi-site *::after {
    animation-duration: 0.01ms !important;  /* reduced-motion 対応のため限定的に使用 */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /*
    1-4 のスムーススクロールを止める。
    上の指定は .sarusuberi-site 配下しか対象にしないため、
    ビューポートを動かしているルート要素には届かない。ここで別途戻す。
  */
  html:has(.sarusuberi-site) {
    scroll-behavior: auto !important;
  }

  /*
    FVは切り替えを完全に停止し、1枚目のみを表示する。
    animation を止めるだけだと 2・3枚目が opacity:0 のまま残り正しいが、
    意図を明示するため個別に指定する（09 §183-5）。
  */
  .sarusuberi-site .p-fv__image--1 { opacity: 1 !important; }
  .sarusuberi-site .p-fv__image--2,
  .sarusuberi-site .p-fv__image--3 {
    opacity: 0 !important;
    animation: none !important;
  }
}

/* 簡易印刷スタイル（08 §321） */
@media print {
  .sarusuberi-site .l-header__nav,
  .sarusuberi-site .c-nav-toggle,
  .sarusuberi-site .p-fv__scroll {
    display: none;
  }

  .sarusuberi-site .p-shopinfo,
  .sarusuberi-site .l-footer {
    color: var(--color-text);
    background-color: var(--color-white);
  }

  /* 画面用の操作要素は印刷しない */
  .sarusuberi-site .c-page-top {
    display: none;
  }

  /* 和の装飾（3-18）は印刷しない。インク・可読性のため（08 §321） */
  .sarusuberi-site .p-fv__body,
  .sarusuberi-site .c-cta,
  .sarusuberi-site .p-shopinfo,
  .sarusuberi-site .l-footer {
    background-image: none;
  }

  .sarusuberi-site .c-section-title__en::before,
  .sarusuberi-site .c-page-title__en::before {
    display: none;
  }
}