/* =============================================================
   メニュー周り 追加カスタムCSS — ROSUDO_MAINTE-116
   ・定食(teishoku)カードの Figma(1:111) 準拠スタイル
   ・メニュースライダーの矢印（これ以上送れない側）の無効表示
   ・店内/持ち帰りカードの価格表示（中立名 .l-menuItem__price* で独立定義）
   ※ SCSS ソースはリポジトリ外のため、style.css のビルド上書きを避けて別ファイルで追加。
     将来 src/scss 側へ取り込んでよい。
   ============================================================= */

/* ── メニューカード: タグ（商品名の上に横並び・アウトライン型バッジ）
   定食(teishoku) と 基本フルセット(katsudon/katsucurry/kids) で共用 ── */
.l-menuItem__tagWrap.-outline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 16px;
  margin-bottom: 2px;
}

.l-menuItem__tagWrap.-outline .l-menuItem__tag {
  margin-top: 0;
}

.l-menuItem__tag {
  padding: 0 6px;
  font-size: 12px;
}

/* タグ見出しと商品名の上マージン微調整 */
.l-menuItem__title {
  margin-top: 8px;
}

/* 名物アイコンのバリエーション「裏名物」。ACF select(specialty_type=ura)のとき
   .icon_specialty に .-ura が付く。サイズ/位置は名物(.icon_specialty)を継承し、
   バッジ画像のみ差し替え。画像: assets/img/menu/icon_specialty_ura.png（74x74表示・retina用148px） */
.l-menuItem__imageWrap .icon_specialty.-ura {
  background-image: url(../img/menu/icon_specialty_ura.png);
}

/* ごはんのお供はサムネイルが通常カードより小さい（かつビューポートで可変）ため、
   バッジを固定px(74)ではなく画像幅の割合(通常の 74/320≒23%)で指定し、
   縮小比率に応じて自動スケールさせる。imageWrap幅=画像幅なので % がそのまま画像基準。
   オーバーハング(top)も高さ比(≒-8%)で相似に。 */
.l-menu__set .l-menuItem__imageWrap .icon_specialty {
  width: 23%;
  height: auto;
  aspect-ratio: 1 / 1;
  top: -8%;
}

/* おすすめ欄の商品名見出し（SVG画像→テキスト化に伴うサイズ調整）。
   グローバルの .c-heading.-xxl(SP42/PC48px) は変えず、おすすめ見出しのみ上書き。 */
.l-menuRecommend__title.c-heading.-xxl {
  font-size: 43px;
}

.l-menuItem__tag.-outline {
  background-color: transparent;
  color: #A31F24;
  border: 2px solid #A31F24;
  font-weight: 600;
}

/* =============================================================
   メニューカード 価格表示（店内 / 持ち帰りの通常カード）
   旧実装は季節メニューの .p-menuSeason__price* を流用していたが、
   名前空間の混在を避けて中立名 .l-menuItem__price{Group,Heading,Note}
   として独立定義（内側の .l-menuItem__price/__priceMain/__priceSub と統一）。
   見た目は従来の価格スタイル準拠（見出しは 14px に統一）。
   ※ 季節メニューページ側は引き続き style.css の .p-menuSeason__price* を使用。
   ============================================================= */
.l-menuItem__priceGroup {
  margin-top: 8px;
  border-top: 1px solid #A31F24; /* グループ上部の区切り罫（赤） */
}

.l-menuItem__priceHeading {
  display: inline-block;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 14px;
  margin-top: 14px;
}

.l-menuItem__priceHeading.-lunch {
  color: #fff;
  background-color: #A31F24;
}

.l-menuItem__priceHeading.-dinner {
  color: #A31F24;
  border: 1px solid #A31F24;
  background-color: transparent;
  font-weight: 400;
  margin-top: 18px;
}

/* 期間限定メニュー: ディナー見出しは背景反転（塗り赤→白地・赤文字・赤枠）で
   ランチ(赤帯)と差を付け、レベル感を下げる。店内メニュー(forhere)のディナーと統一。 */
.p-menuSeason__priceHeading.-dinner {
  color: #A31F24;
  background-color: transparent;
  border: 1px solid #A31F24;
  font-weight: 400;
}

.l-menuItem__priceGroup .l-menuItem__price {
  margin-top: 10px;
  margin-bottom: 0;
}

.l-menuItem__priceGroup .l-menuItem__priceMain {
  display: flex;
  align-items: baseline;
  color: #000;
}

/* 「特別価格」赤バッジ（お子さま膳等・ACF price_special でON）。価格の左に表示 */
.l-menuItem__priceMain .l-menuItem__priceLabel {
  align-self: center;
  flex-shrink: 0;
  display: inline-block;
  background-color: #D92426;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  margin-right: 10px;
}

@media screen and (min-width: 1280px) {
  .l-menuItem__priceMain .l-menuItem__priceLabel {
    font-size: 13px;
    padding: 6px 12px;
    margin-right: 12px;
  }
}

.l-menuItem__priceGroup .l-menuItem__priceMain .num {
  color: #D92426;
}

.l-menuItem__priceGroup .l-menuItem__priceMain .count {
  margin-right: 12px;
}

.l-menuItem__priceGroup .l-menuItem__priceSub {
  font-weight: 600;
}

.l-menuItem__priceNote {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  margin-top: 14px;
}

.l-menuItem__priceNote .plus {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 1280px) {
  .l-menuItem__priceGroup {
    margin-top: 12px;
  }

  .l-menuItem__priceHeading {
    border-radius: 5px;
    padding: 10px 18px;
    margin-top: 16px;
    /* font-size はベースの 14px を維持（季節版の 16px は踏襲しない） */
  }

  .l-menuItem__priceHeading.-dinner {
    margin-top: 20px;
  }

  .l-menuItem__priceGroup .l-menuItem__price {
    margin-top: 12px;
  }

  .l-menuItem__priceNote {
    font-size: 16px;
    margin-top: 16px;
  }

  .l-menuItem__priceNote .plus {
    font-size: 32px;
  }
}

/* PCカルーセル最終ページの余白埋め用の空スライド（実商品を左詰めにし、
   中央・右の空いたスロットを不可視の空カラムで埋める）。main.js が動的に付与。 */
.l-menu__item.-sliderBlank {
  visibility: hidden;
  pointer-events: none;
  background: none;
  box-shadow: none;
}

/* ── メニュースライダー: これ以上ページがない側の矢印を無効表示（infinite:false 時）
   slick が端で付与する .slick-disabled に淡色＋操作不可を適用 ── */
.l-menu__sliderNav .slick-arrow.slick-disabled,
.l-menu__sliderNav .slick-arrow.slick-disabled:hover {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* =============================================================
   メニュー 追従ローカルナビ（店内/期間限定/持ち帰り 共通）
   グローバルヘッダー(.l-header)が常時 fixed のため、ヘッダー直下に sticky 追従。
   ============================================================= */

/* .l-main の overflow:hidden は position:sticky を壊すため、対象ページのみ
   overflow:clip へ（横はみ出しは従来通り切るが sticky は機能する） */
.p-menuForhere .l-main,
.p-menuTogo .l-main,
.p-season .l-main {
  overflow: clip;
}

.p-menuLocalNav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;             /* KVを過ぎたら最上部に貼り付く */
  z-index: 9999;      /* グローバルヘッダー(10000)の下。接触後はヘッダー側の top を
                         スクロール連動で上げて流す(menu-localnav.js)ためスクロール中は
                         そもそも重ならない。ヘッダーより下にすることで SPメニュー
                         展開時もヘッダーが常に前面になり、開閉時の一瞬の被りを防ぐ。 */
  min-height: 56px;   /* SPヘッダー(56px)を確実に覆う */
  background: #fff;
  box-shadow: 0 1px 6px rgba(35, 24, 21, 0.12);
}

@media screen and (min-width: 1280px) {
  .p-menuLocalNav {
    min-height: 96px; /* PCヘッダー(96px)を確実に覆う */
  }
}

/* 追従ローカルナビとの重なり回避は menu-localnav.js が担当。
   ヘッダー底辺がローカルナビ上辺に接したら、ヘッダーの top を
   スクロールに連動させて（追従をやめ）その位置に貼り付けたまま上へ流す。
   ※アニメではなくスクロール連動なので transition は JS 側で一時的に none にする。 */

/* PCグローバルナビでも「デリバリー」を表示（クリックでデリバリー選択モーダルを開く）。
   style.css 側の PC 非表示指定(.-delivery{display:none})を上書き。
   c-btn__textAnime はテキストが position:absolute（幅0）のため、他項目(-comminment/
   -menu/-info/-news 等)と同様にリンクへ明示幅を与えないと PC で潰れて不可視になる。
   「デリバリー」実測 約89px + 左右padding 32px ≒ 121px → 124px。 */
@media screen and (min-width: 1280px) {
  .l-header .l-navigation__item.-delivery {
    display: block;
  }
  .l-header .l-navigation__item.-delivery .l-navigation__link {
    width: 124px;
  }
}

.p-menuLocalNav__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 上段: ページ切替タブ */
.p-menuLocalNav__pages {
  display: flex;
  gap: 0 30px;
  border-bottom: 1px solid #E5DED5;
  padding-bottom: 8px;
}

.p-menuLocalNav__pageLink {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  color: #231815;
  padding: 2px 0;
  position: relative;
  transition: color 0.2s;
}

/* 現在地以外の項目: ホバーで色のみ変化（下線なし） */
.p-menuLocalNav__pageLink:not(.-active):hover {
  color: #A31F24;
  text-decoration: none;
}

@media screen and (min-width: 1024px) {
  .p-menuLocalNav__pageLink {
    font-size: 15px;
  }
}

.p-menuLocalNav__pageLink.-active {
  color: #A31F24;
  font-weight: 700;
}

.p-menuLocalNav__pageLink.-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: #A31F24;
}

/* 下段: カテゴリアンカー（ピル・横スクロール可） */
.p-menuLocalNav__cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.p-menuLocalNav__cats::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 1024px) {
  .p-menuLocalNav__cats {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.p-menuLocalNav__catLink {
  display: inline-block;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  color: #231815;
  background: #fff;
  border: 1px solid #C5B6AD;
  border-radius: 999px;
  padding: 8px 14px;
  transition: 0.2s;
}

@media screen and (min-width: 1024px) {
  .p-menuLocalNav__catLink {
    min-width: 76px;
    font-size: 14px;
    padding: 9px 18px;
  }
}

.p-menuLocalNav__catLink:hover,
.p-menuLocalNav__catLink.-active {
  background: #A31F24;
  border-color: #A31F24;
  color: #fff;
}

/* お惣菜・単品ピル: SP=2ピル(お惣菜/単品) / PC=統合1ピル(お惣菜・単品) の出し分け */
.p-menuLocalNav__catItem.-pcOnly {
  display: none;
}

@media screen and (min-width: 1024px) {
  .p-menuLocalNav__catItem.-spOnly {
    display: none;
  }
  .p-menuLocalNav__catItem.-pcOnly {
    display: block;
  }
}

/* 「今すぐ簡単注文！」セクションの上下パディングを揃える（u-pt-4 と同値の下パディング） */
.u-pb-4 {
  padding-bottom: 4rem;
}

/* アンカークリック時、セクション先頭が追従ナビの下に潜らないようオフセット */
.l-menu__section,
.l-menu__with,
.p-menuSeason__section {
  scroll-margin-top: 95px;
}

@media screen and (min-width: 1280px) {
  .l-menu__section,
  .l-menu__with,
  .p-menuSeason__section {
    scroll-margin-top: 110px;
  }
}

/* ── WP管理バー（ログインバー）表示時の追従位置補正 ──
   メニューページのヘッダーは admin-bar 用の top 補正が無いため、対象3ページの
   ヘッダーと、追従ローカルナビをバー高さ分だけ下げる。
   バー高: PC 32px / タブレット(601〜782px) 46px / SP(〜600px) は absolute のため 0 */
.admin-bar .p-menuLocalNav,
.admin-bar.p-menuForhere .l-header,
.admin-bar.p-menuTogo .l-header,
.admin-bar.p-season .l-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .p-menuLocalNav,
  .admin-bar.p-menuForhere .l-header,
  .admin-bar.p-menuTogo .l-header,
  .admin-bar.p-season .l-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .p-menuLocalNav,
  .admin-bar.p-menuForhere .l-header,
  .admin-bar.p-menuTogo .l-header,
  .admin-bar.p-season .l-header {
    top: 0;
  }
}

/* =============================================================
   フッターナビ アコーディオン（メニュー / デリバリー）— ROSUDO_MAINTE-116
   ヘッダーと同じ js-accordion(.js-accordion-trigger / .js-accordion-content)で開閉。
   .l-header 外なので全幅でクリック開閉。SP=縦リストへインライン展開、
   PC=横一列を崩さないようトリガー上に絶対配置のドロップダウンで表示。
   ============================================================= */
.l-footerNav__subList {
  display: none; /* 初期非表示。slideToggle がインライン display で開閉 */
  list-style: none;
}

.l-footerNav__subLink {
  display: block;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity 0.2s;
}

.l-footerNav__subLink:hover {
  opacity: 0.7;
}

/* 開閉トリガーのアイコン回転（アイコンが見えるSPで効く） */
.l-footerNav__link.js-accordion-trigger.is-open .l-footerNav__icon {
  transform: rotate(90deg);
}

/* SP/タブレット（縦リスト）: トリガー直下にそのまま展開 */
@media screen and (max-width: 1279px) {
  .l-footerNav__subList {
    padding: 2px 12px 16px;
  }

  .l-footerNav__subItem + .l-footerNav__subItem {
    margin-top: 16px;
  }

  .l-footerNav__subLink {
    position: relative;
    padding: 4px 0 4px 18px;
  }

  .l-footerNav__subLink::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: currentColor;
  }
}

/* PC（横一列）: 行を崩さないようトリガー上に絶対配置のドロップダウン */
@media screen and (min-width: 1280px) {
  .l-footer .l-footerNav__item {
    position: relative;
  }

  .l-footerNav__subList {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%);
    min-width: 168px;
    padding: 16px 18px;
    background: rgba(35, 24, 21, 0.95);
    border: 1px solid #7A665E;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    z-index: 5;
  }

  .l-footerNav__subList::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: rgba(35, 24, 21, 0.95);
  }

  .l-footerNav__subItem + .l-footerNav__subItem {
    margin-top: 14px;
  }

  .l-footerNav__subLink {
    white-space: nowrap;
    text-align: center;
  }
}

/* =============================================================
   グロナビ/フッターナビ 「メニュー」「デリバリー」項目の表示幅
   c-btn__textAnime は defaultText が position:absolute; width:100% のため、
   リンクに明示幅が無いと PC で潰れて不可視になる（各項目は文字幅ぶんの width を持つ）。
   ・-menu : 旧 -eatin（店内メニュー）から改名。「メニュー」幅に合わせて調整。
   ・-delivery（フッター）: 元々幅指定が無く PC で不可視だったため追加。
   ============================================================= */
@media screen and (min-width: 1280px) {
  .l-header .l-navigation__link.-menu {
    width: 96px;
  }
}

@media screen and (min-width: 1024px) {
  .l-footerNav__link.-menu {
    width: 68px;
  }

  .l-footerNav__link.-delivery {
    width: 84px;
  }
}

/* ── お持ち帰り「お惣菜」2カラムリストの価格（.l-menuWith__itemPrice*）
   価格カラムが狭い（tablet域で12%等）ため、税込表記が語中で改行される
   （段落ち）ことがある。改行させず折り返さないようにする ── */
.l-menuWith__itemPriceMain,
.l-menuWith__itemPriceSub {
  white-space: nowrap;
}