@charset "UTF-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .yutakaya-texture        - 和紙テクスチャ全面オーバーレイ（fixed / soft-light / opacity .17）
 * .yutakaya-header         - 背景なしでMV上に重ねる position:absolute ヘッダー
 * .yutakaya-phero          - 下層ヒーローの上部余白（透過ヘッダー分を calc で確保）
 * .yutakaya-header__tick   - ナビ項目上の 1px 縦罫
 * .yutakaya-sec            - セクション上下padding clamp(56px,7vw,104px)
 * .yutakaya-sec--md/--sm/--news - 上記の余白バリエーション
 * .yutakaya-gap            - 主要2カラムの gap clamp(28px,5vw,72px)
 * .yutakaya-gap--wide/--season/--article  - 上記の gap バリエーション
 * .yutakaya-en             - セクション英字ラベル（EB Garamond 13px / ls .3em / #a28d0b）
 * .yutakaya-h1 / -h2 / -h3 - 見出し（すべて font-weight:400）
 * .yutakaya-hero-lead      - 下層ページのリード文
 * .yutakaya-p              - 本文段落（+ --ls4 / --ls5 / --sm / --note バリエーション）
 * .yutakaya-vttl           - 縦組み見出しブロック
 * .yutakaya-rule           - 金の細い縦罫（こだわりページ）
 * .yutakaya-mv*            - メインビュー（下端の楕円カット・縦組みキャッチ）
 * .yutakaya-news*          - TOP お知らせ
 * .yutakaya-concept*       - TOP 素材に寄せる思い（夏／冬の大文字はみ出し）
 * .yutakaya-link-more      - 下線リンク（金の下罫）
 * .yutakaya-mbtn*          - TOP お料理のご案内 上段＝季節の画像ボタン（縦組みラベル／横3列）
 * .yutakaya-mlink*         - TOP お料理のご案内 下段＝お品書き・お持ち帰り（背景画像＋横組みラベル／横2列）
 * .yutakaya-w96            - ヘッダーと同じ96%幅まで広げるコンテナ修飾（最小左右24pxは確保）
 * .yutakaya-anchor-nav*    - お料理ページ内リンク
 * .yutakaya-osusume*       - 本日のおすすめ（手書きお品書き）
 * .yutakaya-tab            - 季節切替タブ
 * .yutakaya-course*        - コース枠 / 御膳枠 / 一品リスト
 * .yutakaya-shina*         - お品書き（SPはカテゴリ単位のアコーディオン）
 * .yutakaya-takeout*       - お持ち帰り
 * .yutakaya-photo-grid*    - 写真グリッド（3列 / auto-fit）
 * .yutakaya-dl*            - 項目名＋内容の定義リスト（ラベル幅 110px 固定）
 * .yutakaya-box            - 金枠ボックス（ご予約・ご応募）
 * .yutakaya-badge          - 朱色バッジ
 * .yutakaya-occasions*     - ご用途 4分割（1px 罫で区切る grid）
 * .yutakaya-footer*        - フッター
 * .yutakaya-lightbox*      - 画像拡大オーバーレイ
 * .yutakaya-cta*           - 画面固定の予約ボタン（電話発信／PCは右下・SPは下部バー）
 * .yutakaya-loader*        - 読み込み中のOP（店名ロゴ＋金の罫。2回目以降は短縮）
 * .yutakaya-history*       - TOP 受け継ぎ、繋いでいく（こだわりページへの導入）
 * .js-anim / .is-inview    - スクロールで下からスライドインさせる仕組み
 * .yutakaya-fz-* / -ls-* / -lh-* / -tx-* / -mb-* / -mt-* - 共通utilityに刻みが無い値の補完（ファイル末尾に配置）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * ■ 値の粒度不足
 *   - font-size: 11 / 15 / 17 / 19 / 26 / 30px が .fz-* に無い
 *   - letter-spacing: .03 / .04 / .06 / .08 / .12 / .14 / .16 / .18 / .24 / .26 / .28 / .3em が .ls-* に無い
 *     （.ls-tight/.02 .ls-normal/.05 .ls-wide/.1 .ls-wider/.15 .ls-widest/.2 の5段階のみ）
 *   - line-height: 1.7 / 1.9 / 2.1 / 2.2 / 2.4 / 2.5 / 2.6 が .lh-* に無い
 *   - margin/padding: 6 / 8 / 12 / 14 / 16 / 18 / 22 / 24 / 26 / 28 / 32 / 36 / 44 / 48px が .mb-* に無い
 *     さらに .mb-40 以上は tablet 以下で自動半減するため、元データの実数値を保てない
 *   - gap: 6 / 8 / 12 / 14 / 16 / 18 / 24 / 26px が .gap-* に無い
 *   - 文字色の透過段階（rgba(233,227,213, .5〜.92)）に対応する utility が無い
 *
 * ■ 指定方向不足
 *   - padding-block だけを指定する utility が無い（.pt-* ・ .pb-* の2本立てで、clamp 値も置けない）
 *   - clamp() ベースの流体余白（元データはセクション余白がすべて clamp）を置く場所が無い
 *
 * ■ 状態不足
 *   - なし（hover は .transition + .hover-* で足りた）
 *
 * ■ 構造不足
 *   - 背景を持たずMVに重なるヘッダー型が無い（.header-bar=fixed+白背景 / .header-sticky=JSで.is-fixed付与）
 *     ヘッダー実高を参照して下層ヒーローの上余白を算出する仕組みも無い（--y-header-h を自前定義）
 *   - 縦組み（writing-mode:vertical-rl）の見出しは .heading-vertical があるが position:absolute 前提で、
 *     フロー内に置く縦組みブロック（英字ラベル＋縦見出し＋縦罫）が組めない
 *   - 下層ページの「背景色帯＋左寄せ英日見出し＋リード文」型ヒーローが無い
 *     （.page-hero--solid は text-align:center・padding 70px 5% 固定）
 *   - 画像の外にはみ出す大文字あしらい（夏／冬）を受けるための、はみ出し許容コンテナが無い
 *
 * ■ 装飾パターン不足
 *   - 全面に敷く和紙テクスチャ（mix-blend-mode:soft-light）の装飾が無い
 *   - メインビュー下端の楕円カット（border-radius:52% 70px）が無い
 *     （.page-hero--wave-bottom / --cloud-bottom は clip-path で形状が異なる）
 *
 */

/* ==========================================================================
   0. サイトトークン（claude-design-output の実数値）
   ========================================================================== */
:root {
  --y-cream:        #e9e3d5;
  --y-cream-bright: #f3efe6;
  --y-gold:         #c9ad3a;
  --y-gold-deep:    #a28d0b;
  --y-ink:          #232323;
  --y-ink-2:        #1c1c1c;
  --y-ink-3:        #1a1a1a;
  --y-ph:           #262220;
  --y-red:          #9b2e1f;
  --y-en:           "EB Garamond", serif;
  --y-line-gold:    rgba(162, 141, 11, 0.35);
  --y-line-cream:   rgba(233, 227, 213, 0.14);
  /* ロゴ高さ（SPでは末尾のメディアクエリで上書き。2172×724＝3:1の横長） */
  --y-logo-h:       clamp(56px, 7vw, 129px);
  /* ヘッダー実高 ＝ ロゴ ＋ 上下padding 18px×2。--y-logo-h を変えれば自動で追従する */
  --y-header-h:     calc(var(--y-logo-h) + 36px);
}

/* ==========================================================================
   1. base 上書き
   ========================================================================== */
body {
  background: var(--y-ink);
  color: var(--y-cream);
  font-size: 16px;      /* 元データは全幅で 16px（共通CSSは tablet 14px / SP 12px に落ちる） */
  line-height: 1.9;
  letter-spacing: normal;
  overflow-x: clip;
}
a { color: var(--y-cream); }
a:hover { color: var(--y-gold); opacity: 1; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* 元データのコンテナ：max-width 1400px ＋ 左右 24px（実コンテンツ幅 最大 1352px） */
.container-wide {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
 
/* ==========================================================================
   3. セクション余白 / gap（元データは全て clamp）
   ========================================================================== */
.yutakaya-sec           { padding-block: clamp(56px, 7vw, 104px); }
.yutakaya-sec--md       { padding-block: clamp(48px, 6vw, 88px); }
.yutakaya-sec--sm       { padding-block: clamp(40px, 5vw, 72px); }
.yutakaya-sec--news     { padding-block: clamp(48px, 6vw, 84px); }
.yutakaya-sec--lead     { padding-block: clamp(36px, 5vw, 64px) 0; }
.yutakaya-sec--pt40     { padding-top: 40px; }
.yutakaya-bg-2          { background: var(--y-ink-2); }
.yutakaya-bg-3          { background: var(--y-ink-3); }
/* 下層ページのヒーロー：透過ヘッダーが重なる分だけ上を空ける */
.yutakaya-phero         { padding-top: calc(var(--y-header-h) + clamp(48px, 6vw, 88px)); }
/* ヘッダー（width:96%）と同じ幅まで広げるコンテナ。
   ただし小画面では他セクションと同じ左右24pxを下回らないようにする */
.yutakaya-w96 {
  max-width: none;
  width: min(96%, 100% - 48px);
  padding-left: 0;
  padding-right: 0;
}

.yutakaya-gap           { gap: clamp(28px, 5vw, 72px); }
.yutakaya-gap--wide     { gap: clamp(24px, 4vw, 72px); }
.yutakaya-gap--season   { gap: clamp(24px, 4vw, 56px); }
.yutakaya-gap--article  { gap: clamp(24px, 4vw, 60px); }

/* ==========================================================================
   4. 見出し・本文の共通パーツ
   ========================================================================== */
.yutakaya-en {
  margin: 0;
  font-family: var(--y-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--y-gold-deep);
}
.yutakaya-h1 {
  margin: 10px 0 24px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2em;
}
.yutakaya-h2 {
  margin: 10px 0 28px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
}
.yutakaya-h2--mb24 { margin-bottom: 24px; }
.yutakaya-h2--mb40 { margin-bottom: 40px; }
/* 英字ラベルを持たない単独見出し（お品書き・お持ち帰り・お部屋・お食い初め） */
.yutakaya-h2-solo {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0.18em;
}
.yutakaya-h2-solo--mb28 { margin-bottom: 28px; }
.yutakaya-h2-solo--badge { margin: 16px 0 20px; }
/* 小見出し（英字ラベル付き：本日のおすすめ横／英字なし：アクセス・店舗概要・募集要項） */
.yutakaya-h2-sm {
  margin: 10px 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
}
.yutakaya-h2-sm--plain { margin: 0 0 24px; line-height: normal; }
.yutakaya-h3 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--y-gold);
}
.yutakaya-hero-lead {
  margin: 0;
  max-width: 1000px;
  font-size: 17px;
  letter-spacing: 0.06em;
  line-height: 2.5;
}
.yutakaya-p {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.4;
}
.yutakaya-p--ls5   { letter-spacing: 0.05em; line-height: 2.5; }
.yutakaya-p--ls4   { letter-spacing: 0.04em; line-height: 2.5; }
.yutakaya-p--sm    { font-size: 15px; letter-spacing: 0.06em; line-height: 1.9; }
.yutakaya-p--w1100 { max-width: 1100px; }
.yutakaya-p--note  { font-size: 14px; letter-spacing: 0.08em; line-height: 1.9; color: rgba(233, 227, 213, 0.72); }

/* 下線リンク（こだわりを見る／法要・ご宴会について） */
.yutakaya-link-more {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--y-gold);
  border-bottom: 1px solid rgba(162, 141, 11, 0.7);
  padding-bottom: 6px;
  transition: all 0.3s ease;
}
.yutakaya-link-more:hover {
  color: var(--y-cream-bright);
  border-bottom-color: var(--y-gold);
}

/* 縦組み見出しブロック */
.yutakaya-vttl {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 10px;
  min-width: 120px;
}
.yutakaya-vttl__en {
  writing-mode: vertical-rl;
  margin: 0;
  font-family: var(--y-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--y-gold-deep);
}
.yutakaya-vttl__ja {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24em;
}

/* 金の縦罫 */
.yutakaya-rule {
  display: block;
  width: 1px;
  height: clamp(80px, 10vw, 140px);
  background: rgba(162, 141, 11, 0.6);
  margin: 26px 0 0 22px;
}

/* 金枠ボックス */
.yutakaya-box {
  padding: 24px;
  border: 1px solid var(--y-line-gold);
}
.yutakaya-box--lg     { padding: 28px; }
.yutakaya-box--recruit{ padding: 26px; }
.yutakaya-box__tel {
  margin: 0;
  font-family: var(--y-en);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--y-cream);
}
.yutakaya-box__tel--lg { font-size: 30px; }
.yutakaya-box__tel--md { font-size: 28px; }

/* 朱色バッジ */
.yutakaya-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--y-cream);
  background: var(--y-red);
  padding: 4px 10px;
}

/* 項目名＋内容（店舗概要・募集要項）：ラベル幅 110px 固定 */
.yutakaya-dl__row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--y-line-cream);
}
.yutakaya-dl__row--recruit { padding: 16px 0; }
.yutakaya-dl__label {
  flex: 0 0 110px;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--y-gold);
}
.yutakaya-dl__value {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.yutakaya-dl__value--recruit { flex: 1 1 220px; line-height: 2.1; }

/* ==========================================================================
   5. 和紙テクスチャ
   ========================================================================== */
.yutakaya-texture {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.17;
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   6. ヘッダー
   ========================================================================== */
/* 背景なし・フロー外に出してMV（および下層ヒーロー）の上に重ねる */
.yutakaya-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
}
.yutakaya-header__inner {
  max-width: none;
  width: 96%;
  margin: 0 auto;
  padding: 18px 0;
  height: auto;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.yutakaya-header__logo { flex: 0 0 auto; }
.yutakaya-header__logo img {
  height: var(--y-logo-h);
  width: auto;
  display: block;
}
.yutakaya-header__nav {
  gap: clamp(10px, 1.6vw, 26px);
  flex-wrap: nowrap;
  margin-left: auto;
  margin-right: 0;
  align-items: flex-start;
}
.yutakaya-header__nav .header__nav-item a {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.yutakaya-header__nav .header__nav-item a::after { display: none; }
.yutakaya-header__tick {
  display: block;
  width: 1px;
  height: 10px;
  background: var(--y-cream);
  transition: background 0.3s ease;
}
.yutakaya-header__nav .header__nav-ja {
  writing-mode: vertical-rl;
  margin-top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--y-cream);
  transition: color 0.3s ease;
}
.yutakaya-header__nav .header__nav-item--current .yutakaya-header__tick,
.yutakaya-header__nav .header__nav-item a:hover .yutakaya-header__tick { background: var(--y-gold); }
.yutakaya-header__nav .header__nav-item--current .header__nav-ja,
.yutakaya-header__nav .header__nav-item a:hover .header__nav-ja { color: var(--y-gold); }

.yutakaya-header__right {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  height: auto;
  line-height: 1.4;
  border-left: 1px solid rgba(162, 141, 11, 0.4);
  padding-left: 20px;
}
.yutakaya-header__tel {
  font-family: var(--y-en);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--y-cream);
}
.yutakaya-header__tel::before { content: none; }
.yutakaya-header__note {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--y-gold-deep);
}

/* ハンバーガー / SPナビ（元データにはSP版が無いため、トンマナを揃えて追加） */
.yutakaya-nav-toggle {
  top: 14px;
  right: 14px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(162, 141, 11, 0.4);
  border-radius: 0;
}
.yutakaya-nav-toggle .nav-toggle__line { background: var(--y-cream); }
.yutakaya-sp-nav {
  background: rgba(26, 26, 26, 0.98);
  padding: 92px 24px 40px;
}
/* ナビ本体：PCヘッダーと同じ「1px縦罫＋縦組みラベル」を横に並べる（英字表記なし） */
.yutakaya-sp-nav .sp-nav__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2px, 1.5vw, 10px);
  width: auto;
  max-width: none;
  text-align: left;
}
.yutakaya-sp-nav .sp-nav__item {
  margin: 0;
  border: 0;
}
.yutakaya-sp-nav .sp-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px clamp(6px, 2.4vw, 14px);
  color: var(--y-cream);
  font-weight: 400;
}
.yutakaya-sp-nav .sp-nav__link::after { content: none; }
.yutakaya-sp-nav .sp-nav__link:hover { background: rgba(201, 173, 58, 0.08); }
.yutakaya-sp-nav__label {
  writing-mode: vertical-rl;
  font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1;
  letter-spacing: 0.18em;
}
.yutakaya-sp-nav .sp-nav__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.yutakaya-sp-nav__tel {
  font-family: var(--y-en);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--y-cream);
}
.yutakaya-sp-nav__tel::before { content: none; }

/* ==========================================================================
   7. メインビュー
   ========================================================================== */
/* 透過ヘッダーの下をくぐらせるため、ヘッダー高さ分だけ上に伸ばす
   （下端の位置は変えない＝元データの見せ場 68vh をそのまま保つ） */
.yutakaya-mv {
  position: relative;
  height: calc(68vh + var(--y-header-h));
  display: flex;
  align-items: stretch;
  margin-bottom: -1px;
}
.yutakaya-mv__bg {
  position: absolute;
  inset: 0;
  background: var(--y-ink-3);
  border-bottom-left-radius: 52% 70px;
  border-bottom-right-radius: 52% 70px;
  overflow: hidden;
}
#slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 静止画・CMSスライダー・動画のいずれに差し替えても同じ見え方になるようにしておく */
#slideshow img,
#slideshow video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yutakaya-mv__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 20, 20, 0.82) 0%, rgba(20, 20, 20, 0.35) 55%, rgba(20, 20, 20, 0.75) 100%);
}
.yutakaya-mv__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 24px 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.yutakaya-mv__copy {
  margin-left: auto;
  margin-bottom: clamp(-70px, -6vw, -40px);
}
.yutakaya-mv__title {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.24em;
  color: var(--y-cream-bright);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* TOP リード文 */
.yutakaya-mv-lead {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0.1em;
  line-height: 2.6;
  color: rgba(233, 227, 213, 0.92);
}

/* ==========================================================================
   8. TOP：お知らせ
   ========================================================================== */
.yutakaya-news {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 72px);
}
.yutakaya-news__body {
  flex: 0 1 60%;
  min-width: 0;
}
.yutakaya-news__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--y-line-cream);
}
.yutakaya-news__date {
  font-family: var(--y-en);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--y-gold-deep);
}
.yutakaya-news__text {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   9. TOP：素材に寄せる思い
   ========================================================================== */
.yutakaya-concept__text { flex: 1 1 380px; min-width: 0; }
.yutakaya-concept__figs {
  flex: 1 1 380px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 34px 0;   /* 「夏／冬」の大文字がはみ出す分の逃げ */
}
.yutakaya-concept__fig { position: relative; }
.yutakaya-concept__fig--lower { margin-top: 36px; }
.yutakaya-concept__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--y-ph);
}
.yutakaya-concept__mark {
  position: absolute;
  font-size: clamp(46px, 6vw, 80px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--y-gold);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.yutakaya-concept__mark--tl { top: -34px; left: -26px; }
.yutakaya-concept__mark--br { bottom: -34px; right: -26px; }

/* ==========================================================================
   10. TOP：お料理のご案内（上段＝季節の画像ボタン／下段＝季節以外への導線）
   ========================================================================== */
/* 上段：季節の3枚。以前は5枚の auto-fit だったが、季節（夏・冬・春）のみに絞って
   横3列で固定する。お品書き／お持ち帰りは下段の .yutakaya-mlink-grid へ分離した */
.yutakaya-mbtn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.yutakaya-mbtn {
  display: block;
  position: relative;
  /* 5枚並びの頃は 3/4 の縦長だったが、3列で1枚が広くなり縦に伸びすぎるため正方形へ */
  aspect-ratio: 1 / 1;
  background: var(--y-ph);
}
.yutakaya-mbtn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yutakaya-mbtn__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.15), rgba(20, 20, 20, 0.8));
}
.yutakaya-mbtn__label {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.yutakaya-mbtn__label span {
  writing-mode: vertical-rl;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--y-cream-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* 下段：お品書き／お持ち帰り・お取り寄せ。背景に写真を敷き、ラベルは横組みで中央。
   上段が正方形なのに対し、こちらは横長のバナー型で並びに変化をつける */
.yutakaya-mlink-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.yutakaya-mlink {
  display: block;
  position: relative;
  aspect-ratio: 16 / 6;
  background: var(--y-ph);
}
.yutakaya-mlink img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yutakaya-mlink__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.35), rgba(20, 20, 20, 0.7));
}
.yutakaya-mlink__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--y-cream-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   11. TOP：大切な日のお席に
   ========================================================================== */
.yutakaya-banquet__img {
  flex: 1 1 400px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--y-ph);
  display: block;
}
.yutakaya-banquet__text { flex: 1 1 360px; min-width: 0; }

/* ==========================================================================
   12. お料理：ページ内リンク／本日のおすすめ
   ========================================================================== */
.yutakaya-anchor-col { flex: 1 1 400px; max-width: 480px; min-width: 0; }
.yutakaya-anchor-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  align-content: start;
  white-space: nowrap;
}
.yutakaya-anchor-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--y-line-gold);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--y-cream);
  transition: all 0.3s ease;
}
.yutakaya-anchor-nav a:hover { border-bottom-color: var(--y-gold); color: var(--y-gold); }
.yutakaya-anchor-nav svg { flex: 0 0 auto; }

.yutakaya-osusume {
  flex: 1 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
}
.yutakaya-osusume__ttl {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}
.yutakaya-osusume__ttl h2 {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24em;
}
.yutakaya-osusume__ttl p {
  writing-mode: vertical-rl;
  margin: 0;
  max-height: 280px;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.14em;
  color: rgba(233, 227, 213, 0.7);
}
.yutakaya-osusume__fig {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--y-cream-bright);
  padding: 12px;
}
.yutakaya-osusume__fig img { display: block; width: 100%; height: auto; cursor: zoom-in; }
/* 文字化した本日のおすすめ。行の見た目はお品書き（.yutakaya-shina__row）を流用 */
.yutakaya-osusume__list {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
/* 価格は途中で折り返さず1行で見せる。品名は幅に応じて自然に折り返す */
.yutakaya-osusume__list .yutakaya-shina__name { text-wrap: pretty; }
.yutakaya-osusume__list .yutakaya-shina__price { white-space: nowrap; }

/* ==========================================================================
   13. お料理：季節のお料理
   ========================================================================== */
.yutakaya-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--y-line-gold);
}
.yutakaya-tab {
  padding: 14px clamp(18px, 3vw, 40px);
  margin-bottom: -1px;
  font-size: 16px;
  letter-spacing: 0.16em;
  white-space: nowrap;
  background: transparent;
  color: rgba(233, 227, 213, 0.6);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.yutakaya-tab:hover { color: var(--y-cream-bright); }
.yutakaya-tab.is-current {
  background: rgba(162, 141, 11, 0.12);
  color: var(--y-cream-bright);
  border-bottom-color: var(--y-gold);
}
/* 季節パネル：表示切替は共通の .tab-panel（display:none/block）に任せ、
   切り替わりの見え方だけをここで足す（静かなフェード＋わずかな上方向の移動） */
.yutakaya-season-panel.is-active {
  animation: yutakaya-panel-in 0.4s ease both;
}
@keyframes yutakaya-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yutakaya-season-panel.is-active { animation: none; }
}

.yutakaya-season__ttl {
  flex: 0 0 auto;
  position: sticky;
  top: 150px;
  align-self: flex-start;
  display: flex;
  flex-direction: row-reverse;
  gap: 16px;
}
.yutakaya-season__ttl h3 {
  writing-mode: vertical-rl;
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.26em;
}
.yutakaya-season__period {
  writing-mode: vertical-rl;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--y-gold);
}
.yutakaya-season__body { flex: 1 1 520px; min-width: 0; }
.yutakaya-season__photo { flex: 1 1 420px; min-width: 0; }
.yutakaya-season__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--y-ph);
}
.yutakaya-season__caption {
  margin: 12px 0 24px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(233, 227, 213, 0.5);
}
.yutakaya-season__prices { flex: 1 1 360px; min-width: 0; }

.yutakaya-course {
  margin: 0 0 18px;
  padding: 20px 24px;
  border: 1px solid rgba(162, 141, 11, 0.4);
}
.yutakaya-course__item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(162, 141, 11, 0.22);
}
.yutakaya-course__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.yutakaya-course__name {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.16em;
}
.yutakaya-course__price {
  font-family: var(--y-en);
  font-size: 16px;
  color: var(--y-gold);
}
.yutakaya-course__row { display: flex; gap: 14px; padding: 2px 0; }
.yutakaya-course__row dt {
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--y-gold);
}
.yutakaya-course__row dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: rgba(233, 227, 213, 0.86);
}

.yutakaya-sets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
.yutakaya-set {
  padding: 16px 20px;
  border: 1px solid rgba(162, 141, 11, 0.4);
}
.yutakaya-set__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.yutakaya-set__body {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: rgba(233, 227, 213, 0.86);
}
.yutakaya-season__note {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--y-line-gold);
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2;
  color: rgba(233, 227, 213, 0.82);
}
.yutakaya-items {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--y-line-gold);
  padding-top: 20px;
}
.yutakaya-items__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(233, 227, 213, 0.12);
}
.yutakaya-items__name { font-size: 14px; letter-spacing: 0.04em; line-height: 1.6; }
.yutakaya-items__price {
  flex: 0 0 auto;
  font-family: var(--y-en);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--y-gold);
}

/* ==========================================================================
   14. お料理：お品書き
   ========================================================================== */
.yutakaya-shina-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.yutakaya-shina__ttl {
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--y-gold);
  border-bottom: 1px solid rgba(162, 141, 11, 0.45);
}
/* カテゴリ見出しのボタン。PCでは見た目・挙動とも通常のテキスト見出しのまま。
   SPでのみアコーディオンの開閉トリガーになる（下のメディアクエリ参照） */
.yutakaya-shina__toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
}
.yutakaya-shina__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(233, 227, 213, 0.1);
}
.yutakaya-shina__name { flex: 1 1 auto; font-size: 15px; letter-spacing: 0.04em; line-height: 1.7; }
.yutakaya-shina__price {
  flex: 0 0 auto;
  font-family: var(--y-en);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--y-gold);
}
/* 価格表記の［税込…］部分（menu.php の price_h() で付与） */
.yutakaya-taxin { font-size: 85%; }
.yutakaya-shina__note {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: rgba(233, 227, 213, 0.7);
}

/* ==========================================================================
   15. お料理：お持ち帰り・お取り寄せ
   ========================================================================== */
.yutakaya-takeout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.yutakaya-takeout img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--y-ph);
}
.yutakaya-takeout__name {
  margin: 18px 0 8px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.14em;
}
.yutakaya-takeout__price {
  margin: 0 0 10px;
  font-family: var(--y-en);
  font-size: 18px;
  color: var(--y-gold);
}
.yutakaya-takeout__body {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2.1;
  color: rgba(233, 227, 213, 0.82);
}
.yutakaya-takeout__foot {
  margin: 36px 0 0;
  padding-left: 16px;
  border-left: 1px solid rgba(162, 141, 11, 0.55);
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2.1;
}

/* ==========================================================================
   16. こだわり
   ========================================================================== */
.yutakaya-kodawari__head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.yutakaya-kodawari__head .yutakaya-en { margin: 0 0 18px; }
.yutakaya-kodawari__vttl {
  writing-mode: vertical-rl;
  margin: 0 0 0 6px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.28em;
}
.yutakaya-kodawari__col   { flex: 1 1 360px; min-width: 0; padding-top: clamp(40px, 6vw, 90px); }
.yutakaya-kodawari__col--deep { padding-top: clamp(90px, 13vw, 190px); }
.yutakaya-kodawari__grid {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(40px, 6vw, 90px);
}
.yutakaya-kodawari__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--y-ph);
}
.yutakaya-figure { margin: 0; }
.yutakaya-figure img { display: block; width: 100%; height: auto; }
.yutakaya-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(233, 227, 213, 0.6);
}

/* ==========================================================================
   17. 店舗のご案内 / 法要・ご宴会 / 採用情報
   ========================================================================== */
.yutakaya-col-main { flex: 1 1 420px; min-width: 0; }
.yutakaya-col-side { flex: 1 1 380px; min-width: 0; }
.yutakaya-col-wide { flex: 1 1 460px; min-width: 0; }
.yutakaya-col-narrow { flex: 1 1 320px; min-width: 0; }

.yutakaya-map { display: block; width: 100%; border-radius: 0; overflow: hidden; }
.yutakaya-map iframe {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  display: block;
}
.yutakaya-map--16-9 iframe { aspect-ratio: 16 / 9; }

.yutakaya-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 6vw, 88px);
}
.yutakaya-photo-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 0;
}
.yutakaya-photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--y-ph);
  cursor: zoom-in;
  transition: opacity 0.3s ease;
}
.yutakaya-photo-grid img:hover { opacity: 0.85; }

.yutakaya-occasions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--y-line-gold);
  border: 1px solid var(--y-line-gold);
}
.yutakaya-occasions__item {
  background: var(--y-ink);
  padding: clamp(24px, 3vw, 36px);
}
.yutakaya-occasions__en {
  margin: 0 0 6px;
  font-family: var(--y-en);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.24em;
  color: var(--y-gold-deep);
}
.yutakaya-occasions__ttl {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
}
.yutakaya-occasions__body {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 2.1;
  color: rgba(233, 227, 213, 0.85);
}

.yutakaya-okuizome__img {
  flex: 1 1 380px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--y-ph);
  display: block;
}
.yutakaya-recruit__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--y-ph);
}

/* ==========================================================================
   18. フッター
   ========================================================================== */
.yutakaya-footer { background: var(--y-ink-3); position: relative; }
.yutakaya-footer__body { padding: 0; background: transparent; }
.yutakaya-footer__inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 80px) 24px;
  display: flex;
  flex-direction: row;   /* 共通CSSが tablet 以下で column にするのを打ち消す */
  justify-content: flex-start;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: flex-start;
}
.yutakaya-footer__left  { flex: 1 1 320px; min-width: 0; width: auto; }
.yutakaya-footer__right { flex: 1 1 380px; min-width: 0; width: auto; }
.yutakaya-footer__logo {
  height: clamp(84px, 9vw, 129px);
  width: auto;
  display: block;
  margin-bottom: 26px;
}
.yutakaya-footer__address {
  margin: 0 0 18px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(233, 227, 213, 0.85);
}
.yutakaya-footer__tel { margin: 0 0 6px; }
.yutakaya-footer__tel a {
  font-family: var(--y-en);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--y-cream);
}
.yutakaya-footer__hours {
  margin: 0 0 18px;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 2;
}
.yutakaya-footer__note {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--y-gold);
}
.yutakaya-footer__map iframe {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}
.yutakaya-footer__nav {
  display: flex;
  flex-direction: row;   /* 共通CSSが tablet 以下で column にするのを打ち消す */
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.yutakaya-footer__link {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(233, 227, 213, 0.8);
  transition: color 0.3s ease;
}
.yutakaya-footer__link:hover { color: var(--y-gold); }
.yutakaya-footer__bottom {
  padding: 0;
  background: transparent;
  text-align: left;   /* 共通CSSの .footer-bottom は text-align:center */
  border-top: 1px solid rgba(233, 227, 213, 0.12);
}
.yutakaya-footer__copyright {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 24px;
  font-family: var(--y-en);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(233, 227, 213, 0.55);
}

/* ==========================================================================
   19. 画像拡大（lightbox）／ページトップ
   ========================================================================== */
.yutakaya-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 12, 12, 0.94);
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 64px);
  cursor: zoom-out;
}
.yutakaya-lightbox.is-open { display: flex; }
.yutakaya-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.yutakaya-lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 26px;
  line-height: 1;
  color: var(--y-cream);
}
.page-top__link {
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(162, 141, 11, 0.5);
  color: var(--y-gold);
  border-radius: 0;
  box-shadow: none;
}
.page-top__link:hover { background: var(--y-gold); color: var(--y-ink); }

/* ==========================================================================
   20. 画面固定CTA（予約する＝電話発信）
   ご予約はお電話のみの店舗なので、どのページのどこからでも発信できるようにする。
   PCは右下（ページトップボタンの上）、SPは画面下の全幅バーになる。
   ========================================================================== */
.yutakaya-cta {
  position: fixed;
  right: 30px;
  bottom: 90px;  /* ページトップボタン（bottom:30px・48px角）に重ならない位置 */
  z-index: 110;  /* .page-top の 100 より上 */
}
.yutakaya-cta__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(162, 141, 11, 0.5);
  color: var(--y-gold);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.yutakaya-cta__link:hover {
  background: var(--y-gold);
  color: var(--y-ink);
  opacity: 1;  /* 共通CSSの a:hover{opacity:.8} を打ち消す */
}
.yutakaya-cta__icon  { font-size: 14px; }
.yutakaya-cta__label { font-size: 15px; letter-spacing: 0.16em; line-height: 1; }
.yutakaya-cta__tel   { font-family: var(--y-en); font-size: 16px; letter-spacing: 0.04em; line-height: 1; }

/* ==========================================================================
   21. OPローダー（読み込み中の店名ロゴ）
   墨地に白ロゴをじんわり浮かせ、下の金の細い罫が伸びきったら明ける。
   消えるところまでCSSアニメーションで完結するので、JSが無くても必ず開く。
   初回判定（is-op-done）は head のインラインスクリプトが描画前に済ませている。
   ========================================================================== */
.yutakaya-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;  /* 共通CSSの最大 z-index 999 より上 */
  display: grid;
  place-items: center;
  background: var(--y-ink);
  animation: yutakayaLoaderOut 1s ease 2.2s forwards;
}
/* 2回目以降＝同じセッション内のページ移動。毎回待たせないよう短く明ける */
.is-op-done .yutakaya-loader { animation: yutakayaLoaderOut 0.8s ease 0.2s forwards; }
.is-op-done .yutakaya-loader__inner { animation: none; opacity: 1; transform: none; }
.is-op-done .yutakaya-loader__bar { display: none; }  /* 進行の罫は初回だけ */
/* ローダーが出ている間はスクロールさせない（common.js が付け外し） */
.is-op-locked { overflow: hidden; }

.yutakaya-loader__inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  opacity: 0;
  transform: translateY(14px);
  animation: yutakayaLoaderIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.yutakaya-loader__logo {
  display: block;
  width: clamp(180px, 34vw, 320px);
  height: auto;
}
.yutakaya-loader__bar {
  width: clamp(180px, 34vw, 320px);
  height: 1px;
  background: var(--y-gold);
  transform: scaleX(0);
  transform-origin: left center;
  animation: yutakayaLoaderBar 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes yutakayaLoaderIn  { to { opacity: 1; transform: none; } }
@keyframes yutakayaLoaderBar { to { transform: scaleX(1); } }
@keyframes yutakayaLoaderOut { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   22. スライドイン（スクロールで下から）
   隠す指定は html.js-anim が付いているときだけ効かせる。js-anim は head で
   描画前に付け、common.js が動かなかった場合は保険のタイマーが外す。
   つまりJSが死んでも内容が読めなくなることはない。
   対象は main 直下のセクション。TOPのメインビューと下層ページのヒーローは
   最初から見えていてほしいので、.yutakaya-mv と main > div（.yutakaya-phero）は外す。
   ========================================================================== */
.js-anim main > section:not(.yutakaya-mv),
.js-anim main > .yutakaya-sec--lead {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-anim main > section:not(.yutakaya-mv).is-inview,
.js-anim main > .yutakaya-sec--lead.is-inview {
  opacity: 1;
  transform: none;
}

/* TOP 受け継ぎ、繋いでいく（詳細は kodawari.php） */
.yutakaya-history__text { flex: 1 1 360px; min-width: 0; }
.yutakaya-history__fig  { flex: 1 1 400px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .yutakaya-loader,
  .is-op-done .yutakaya-loader { animation: yutakayaLoaderOut 0.3s ease 0.2s forwards; }
  .yutakaya-loader__inner { animation: none; opacity: 1; transform: none; }
  .yutakaya-loader__bar { display: none; }
  .js-anim main > section:not(.yutakaya-mv),
  .js-anim main > .yutakaya-sec--lead { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
   23. レスポンシブ（元データにはSP指定が無いため、破綻箇所のみ最小限で補正）
   ========================================================================== */
@media (max-width: 896px) {
  .yutakaya-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yutakaya-season__ttl { position: static; }
  .yutakaya-news__body { flex: 1 1 100%; }
}
@media (max-width: 639px) {
  /* お料理のご案内：SPは上段の季節3枚・下段の導線2枚とも1列に落とす
     （下段は1列だと横に伸びて間延びするため 16:7 に寄せる） */
  .yutakaya-mbtn-grid { grid-template-columns: 1fr; }
  .yutakaya-mlink-grid { grid-template-columns: 1fr; }
  .yutakaya-mlink { aspect-ratio: 16 / 7; }
  .yutakaya-mlink__label { font-size: 17px; }
  /* SPのロゴを拡大（56px固定 → 64〜80px）。--y-header-h も自動で追従するため、
     MVの高さと下層ヒーローの上余白はそのまま整合する。
     ロゴは3:1の横長なので、80px時の幅240pxがハンバーガー（右上44px）に当たらない範囲に収めている */
  :root { --y-logo-h: clamp(64px, 20vw, 80px); }

  .yutakaya-mv { height: 62vh; }
  /* MV下のリード文：SPは 19px → 17px。改行も .sp-d-none で2本落として行数を抑える
     上の余白は MV キャッチのはみ出し分を避けるため 50px 追加（親の padding-top 36px と合わせて計86px） */
  .yutakaya-mv-lead { font-size: 17px; margin-top: 50px; }
  .yutakaya-items { grid-template-columns: 1fr; }
  .yutakaya-anchor-nav { grid-template-columns: 1fr; }
  .yutakaya-anchor-col { max-width: none; }
  .yutakaya-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 本日のおすすめ：SPは縦組みをやめ、見出し＋説明を横組みで写真の上に置く */
  .yutakaya-osusume { flex-wrap: wrap; flex-direction: row; }
  .yutakaya-osusume__ttl {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .yutakaya-osusume__ttl h2,
  .yutakaya-osusume__ttl p { writing-mode: horizontal-tb; }
  .yutakaya-osusume__ttl p { max-height: none; }
  .yutakaya-osusume__list { flex: 1 1 100%; grid-template-columns: 1fr; }
  /* SPは品名を1行目いっぱいに使い、価格を2行目の右に置いて、品名が細く折り返さないようにする */
  .yutakaya-osusume__list .yutakaya-shina__row { flex-wrap: wrap; gap: 2px 16px; }
  .yutakaya-osusume__list .yutakaya-shina__name { flex: 1 1 100%; }
  .yutakaya-osusume__list .yutakaya-shina__price { margin-left: auto; }

  /* 予約ボタン：SPは画面下の全幅バーにする。
     ページトップボタンとフッター下端は、バーに隠れない分だけ持ち上げる */
  .yutakaya-cta { right: 0; bottom: 0; left: 0; }
  .yutakaya-cta__link {
    justify-content: center;
    gap: 12px;
    padding: 15px 16px;
    padding-bottom: max(15px, env(safe-area-inset-bottom));
    background: rgba(26, 26, 26, 0.96);
    border: 0;
    border-top: 1px solid rgba(162, 141, 11, 0.5);
  }
  .page-top { bottom: 78px; }
  .yutakaya-footer__bottom { padding-bottom: 64px; }
  .yutakaya-news__item { padding: 16px 0; }

  /* フッターナビはSPでは非表示（ナビゲーションはハンバーガーに集約） */
  .yutakaya-footer__nav { display: none; }

  /* お知らせの見出し：SPは縦組みをやめ、他セクションと同じ「英字の下に日本語」の横組みに */
  .yutakaya-news { flex-direction: row; justify-content: flex-start; }
  .yutakaya-news .yutakaya-vttl {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }
  .yutakaya-news .yutakaya-vttl__en,
  .yutakaya-news .yutakaya-vttl__ja { writing-mode: horizontal-tb; }
  .yutakaya-course { padding: 18px 16px; }

  /* お品書き：SPはカテゴリごとにアコーディオン化（既定は全て閉じる）。
     20カテゴリ・128行が縦に続いてスクロールが長くなりすぎるため */
  .yutakaya-shina-grid { gap: 0; }
  .yutakaya-shina-cat  { border-bottom: 1px solid rgba(162, 141, 11, 0.45); }
  .yutakaya-shina__ttl {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .yutakaya-shina__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    cursor: pointer;
  }
  .yutakaya-shina__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--y-gold);
    border-bottom: 1px solid var(--y-gold);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.3s ease;
  }
  .yutakaya-shina-cat.is-open .yutakaya-shina__toggle::after {
    transform: translateY(1px) rotate(-135deg);
  }
  .yutakaya-shina__body { display: none; padding-bottom: 14px; }
  .yutakaya-shina-cat.is-open .yutakaya-shina__body {
    display: block;
    animation: yutakaya-panel-in 0.35s ease both;
  }

  /* 季節タブ：SPは3つを1行に収める。3等分して文字を中央に置き、
     文字サイズと左右paddingを詰めて最小320px幅でも折り返さないようにする */
  .yutakaya-tabs { flex-wrap: nowrap; }
  .yutakaya-tab {
    flex: 1 1 0;
    padding: 14px 6px;
    font-size: clamp(12px, 3.4vw, 15px);
    letter-spacing: 0.06em;
    text-align: center;
  }

  /* SPの本文行間を 2.2 に統一。
     PCは 1.8〜2.6 まで文脈ごとに散っているが、SPは1行が短く折り返しが増えるため、
     読み物として並ぶテキスト（段落・リード文・注記・説明文）を 2.2 に揃える。
     英字ラベルと日本語見出しの距離を詰めるために行間を殺している箇所
     （.yutakaya-en / .yutakaya-vttl__* / 各見出し / 縦組みキャッチ / 品名・ボタンラベル）は
     詰まりが意匠そのものなので対象外。 */
  body,
  .yutakaya-p,
  .yutakaya-p--ls4,
  .yutakaya-p--ls5,
  .yutakaya-p--sm,
  .yutakaya-p--note,
  .yutakaya-mv-lead,
  .yutakaya-hero-lead,
  .yutakaya-takeout__body,
  .yutakaya-takeout__foot,
  .yutakaya-occasions__body,
  .yutakaya-season__note,
  .yutakaya-shina__note,
  .yutakaya-set__body,
  .yutakaya-course__row dd,
  .yutakaya-dl__value--recruit,
  .yutakaya-osusume__ttl p,
  .yutakaya-footer__hours { line-height: 2.2; }
}

/* ==========================================================================
   24. 値の粒度補完 utility（共通CSSに刻みが無いもの）
   ※ 共通CSSと同じ設計で最後に読み込み、上のコンポーネント指定を上書きできるようにする
   （.yutakaya-p 等が margin ショートハンドを持つため、順序を逆にすると余白が打ち消される）
   ========================================================================== */
.yutakaya-fz-11 { font-size: 11px; }
.yutakaya-fz-15 { font-size: 15px; }
.yutakaya-fz-17 { font-size: 17px; }
.yutakaya-fz-19 { font-size: 19px; }
.yutakaya-fz-26 { font-size: 26px; }
.yutakaya-fz-30 { font-size: 30px; }

.yutakaya-ls-3  { letter-spacing: 0.03em; }
.yutakaya-ls-4  { letter-spacing: 0.04em; }
.yutakaya-ls-6  { letter-spacing: 0.06em; }
.yutakaya-ls-8  { letter-spacing: 0.08em; }
.yutakaya-ls-12 { letter-spacing: 0.12em; }
.yutakaya-ls-14 { letter-spacing: 0.14em; }
.yutakaya-ls-16 { letter-spacing: 0.16em; }
.yutakaya-ls-18 { letter-spacing: 0.18em; }
.yutakaya-ls-24 { letter-spacing: 0.24em; }
.yutakaya-ls-26 { letter-spacing: 0.26em; }
.yutakaya-ls-28 { letter-spacing: 0.28em; }
.yutakaya-ls-30 { letter-spacing: 0.3em; }

/* 下余白：共通の .mb-* に刻みが無い値／.mb-40 以上の tablet 自動半減を避けるため */
.yutakaya-mb-6  { margin-bottom: 6px; }
.yutakaya-mb-8  { margin-bottom: 8px; }
.yutakaya-mb-12 { margin-bottom: 12px; }
.yutakaya-mb-14 { margin-bottom: 14px; }
.yutakaya-mb-16 { margin-bottom: 16px; }
.yutakaya-mb-18 { margin-bottom: 18px; }
.yutakaya-mb-10 { margin-bottom: 10px; }
.yutakaya-mb-20 { margin-bottom: 20px; }
.yutakaya-mb-22 { margin-bottom: 22px; }
.yutakaya-mb-24 { margin-bottom: 24px; }
.yutakaya-mb-26 { margin-bottom: 26px; }
.yutakaya-mb-28 { margin-bottom: 28px; }
.yutakaya-mb-30 { margin-bottom: 30px; }
.yutakaya-mb-32 { margin-bottom: 32px; }
.yutakaya-mb-36 { margin-bottom: 36px; }
.yutakaya-mb-40 { margin-bottom: 40px; }
.yutakaya-mb-44 { margin-bottom: 44px; }
.yutakaya-mb-48 { margin-bottom: 48px; }
.yutakaya-mt-10 { margin-top: 10px; }
.yutakaya-mt-24 { margin-top: 24px; }
.yutakaya-mt-32 { margin-top: 32px; }
.yutakaya-mt-44 { margin-top: 44px; }

.yutakaya-lh-17 { line-height: 1.7; }
.yutakaya-lh-19 { line-height: 1.9; }
.yutakaya-lh-21 { line-height: 2.1; }
.yutakaya-lh-22 { line-height: 2.2; }
.yutakaya-lh-24 { line-height: 2.4; }
.yutakaya-lh-25 { line-height: 2.5; }
.yutakaya-lh-26 { line-height: 2.6; }

.yutakaya-tx-50 { color: rgba(233, 227, 213, 0.5); }
.yutakaya-tx-55 { color: rgba(233, 227, 213, 0.55); }
.yutakaya-tx-60 { color: rgba(233, 227, 213, 0.6); }
.yutakaya-tx-70 { color: rgba(233, 227, 213, 0.7); }
.yutakaya-tx-72 { color: rgba(233, 227, 213, 0.72); }
.yutakaya-tx-78 { color: rgba(233, 227, 213, 0.78); }
.yutakaya-tx-80 { color: rgba(233, 227, 213, 0.8); }
.yutakaya-tx-82 { color: rgba(233, 227, 213, 0.82); }
.yutakaya-tx-85 { color: rgba(233, 227, 213, 0.85); }
.yutakaya-tx-86 { color: rgba(233, 227, 213, 0.86); }
.yutakaya-tx-92 { color: rgba(233, 227, 213, 0.92); }
.yutakaya-tx-gold      { color: var(--y-gold); }
.yutakaya-tx-gold-deep { color: var(--y-gold-deep); }
.yutakaya-tx-bright    { color: var(--y-cream-bright); }
.yutakaya-en-font { font-family: var(--y-en); }