/*
 * 自社ホスティング移行後に追加したスタイル調整。
 * Webflow が生成した CSS は触らず、このファイルで上書きする。
 */

/*
 * ヘッダー右側(SAKE PAIRING / PRIVATE EVENTS / MENU / RESERVATION)
 * PRIVATE EVENTS を追加して 1 項目増えたため、Webflow の下書きと同じ考え方で
 * 右寄せ・リンクの左右余白なし・項目間 18px にしてロゴとの重なりを防ぐ。
 * スマホ用メニュー(991px 以下)には影響させない。
 */
@media screen and (min-width: 992px) {
  .nav-menu-three-2 > ul.nav-menu-block-2:last-of-type {
    justify-content: flex-end;
    grid-column-gap: 18px;
    column-gap: 18px;
    margin-left: 0;
    margin-right: -79px;
  }

  .nav-menu-three-2 > ul.nav-menu-block-2:last-of-type .nav-link-accent-2 {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

/*
 * 992〜1199px は横幅が足りない。元の Webflow の CSS でも左端の HOME が
 * 画面外にはみ出していたため、はみ出し用のマイナス余白を外し、文字と間隔を詰める。
 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-menu-three-2 > ul.nav-menu-block-2:first-of-type {
    margin-left: 0;
  }

  .nav-menu-three-2 > ul.nav-menu-block-2:first-of-type .nav-link-2 {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
  }

  .nav-menu-three-2 > ul.nav-menu-block-2:last-of-type {
    margin-right: 0;
    grid-column-gap: 10px;
    column-gap: 10px;
  }

  /* 他ページは .nav-link-accent-2、Private Events ページは .link-8/9/10 */
  .nav-menu-three-2 > ul.nav-menu-block-2:last-of-type a:not(.w-button) {
    font-size: 12px;
  }

  .nav-menu-three-2 > ul.nav-menu-block-2:last-of-type .w-button {
    padding-left: 12px;
    padding-right: 12px;
    letter-spacing: 1px;
  }
}

/*
 * Private Events ページ: 見出し横の金色の装飾線(events-line)は
 * Webflow の下書き段階でピクセル指定の余白が入っており、
 * タブレット・スマホでは画面外にはみ出して横スクロールの原因になる。
 * 見出しが折り返す 991px 以下では表示しない(装飾のみで内容には影響なし)。
 */
@media screen and (max-width: 991px) {
  .div-block-73.events-line {
    display: none;
  }
}

/*
 * 言語切替(EN · 中文 · 日本語)
 * 固定ヘッダーの右上隅、ナビ項目より上の余白に小さく置く。
 * HTML は scripts/build_i18n.py が全ページに挿入する。
 */
.lang-switch {
  position: absolute;
  top: 4px;
  right: 14px;
  z-index: 100;
  font-family: Arial, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .5px;
  white-space: nowrap;
}
.lang-switch a {
  color: #b89867;
  text-decoration: none;
  padding: 2px 3px;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-current { color: #fff; pointer-events: none; }
.lang-switch-sep { color: #5a5a5a; padding: 0 1px; }

/* 中国語・日本語の本文は各言語のフォントで表示する */
html[lang="zh-Hans"] body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; }
html[lang="ja"] body { font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Arial, sans-serif; }

/*
 * 日本語・中国語の見出しは、言葉の途中(「物/語」「流/儀」など)で改行しないようにする。
 * 翻訳辞書 i18n/ja.json・zh.json の見出しには、改行してよい位置にゼロ幅スペースを入れてある。
 * 1 行に収まらない長い語だけは、はみ出さないよう文字単位で折り返す。
 */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap: balance;
}

/*
 * 中国語・日本語版の見出しサイズ調整。
 * 1 文字が英字の約 2 倍の幅になるため、英語用の特大サイズのままだとスマホで 1 行 5〜6 文字しか入らない。
 */
/* ページ上部の見出し(メニュー、日本酒ペアリングなど): 英語用の「文字幅の 80%」制限を外す */
html[lang="ja"] .heading-8,
html[lang="zh-Hans"] .heading-8 {
  width: auto;
}
/* トップ・おまかせ・季節メニューなどの特大見出し: スマホでは少し小さく */
@media screen and (max-width: 479px) {
  html[lang="ja"] h1.heading-15,
  html[lang="ja"] h1.heading-18,
  html[lang="zh-Hans"] h1.heading-15,
  html[lang="zh-Hans"] h1.heading-18 {
    font-size: 31px;
    line-height: 1.35;
  }
}

/*
 * 横方向のはみ出し修正(タブレット〜PC で横スクロールが出ていた)
 */
/* 100vw 指定の要素: PC ではスクロールバーの幅(約 15px)だけはみ出すので上限を付ける */
.dish-slider.heroslider.testonly,
.mask.heronly.testonly,
.dish-slider.menu,
.div-block-177,
.div-block-180 { max-width: 100%; }

/* トップ「The Art of Omakase」の枠: 480〜991px で外枠 154% × 内枠 65% になっており、
   見た目は画面幅ちょうどだが右側に空の余白がはみ出していた。外枠・内枠とも 100% にする */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .div-block-27,
  .div-block-27 > .div-block-28 { width: 100%; }
}

/* トップの季節メニュー・メニューページのスライド: 992〜1439px で幅 110% + 左 -27px */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .dish-slider.homedish,
  .dish-slider.menu { width: 100%; margin-left: 0; }
}

/* 季節メニューのスライド写真: 縦横比 2:3 を先に決め、480px 以上は幅 500px 固定。
   写真は遅延読み込みなので、大きさを決めておかないと読み込み前のスライドが 5px になり、
   Webflow のスライダーが「全部 1 ページに収まる」と判断して矢印が効かなくなる(PC)/
   枠の高さが縮んで写真が下のボタンに重なる(スマホ) */
.w-slider-mask .dish-slide img { height: auto; aspect-ratio: 2 / 3; }
@media screen and (min-width: 480px) {
  .w-slider-mask .dish-slide img { width: 500px; max-width: none; }
}

/* 季節スライダー(スマホ): メニューページは元々高さ 100vh + 下マージン -160px で RESERVE ボタンを
   引き上げる作りで、画面の縦が短い(Safari のツールバー分など)と写真がボタンやページ送りの点に重なる。
   高さを中身なりにし、点の分だけ下に余白を取ってから RESERVE を 30px 下に置く */
@media screen and (max-width: 479px) {
  .dish-slider.menu { height: auto; padding-bottom: 56px; margin-bottom: -110px; }
  .dish-slider.menu > .w-slider-nav { top: auto; bottom: 14px; height: auto; padding-top: 0; }
  /* トップの季節スライダーも同じ(枠の高さ 100vh のため、縦の短い画面で写真の下が切れ、点が下のボタンに重なる) */
  .mask.home { height: auto; }
  .dish-slider.homedish { padding-bottom: 50px; }
  .dish-slider.homedish > .w-slider-nav { top: auto; bottom: 14px; height: auto; padding-top: 0; }
}

/* スマホの季節の背景: 元の位置(top:-108px)だとほぼ全部スライダーの裏に隠れて見えない。
   見出し(Autumn Omakase)の裏まで持ち上げ、少し明るくする */
@media screen and (max-width: 767px) {
  .div-block-143.sakura-v2 .image-90.sakura-v2-m { top: -460px; opacity: .32; }
}

/* 地図付近の装飾背景画像(幅 120%〜200% で左右に張り出す)を枠内で切り取る */
.div-block-136 { position: relative; overflow-x: clip; }

/* ギャラリーの写真枠: 1440px 以上で幅 150%(最大 1600px)になり右に張り出していた */
@media screen and (min-width: 1440px) {
  .container-11 { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* 貸切・プライベートイベントへの案内枠(トップ・メニュー)。scripts/private_events_promo.py が差し込む */
.pe-promo { background: #000; padding: 80px 24px; }
.pe-promo-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 56px; }
.pe-promo-photo { flex: 1 1 52%; min-width: 0; }
.pe-promo-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pe-promo-text { flex: 1 1 48%; min-width: 0; color: #fff; }
.pe-promo-eyebrow { color: #b89867; font-family: "EB Garamond", serif; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.pe-promo-heading { color: #fff; font-family: "EB Garamond", serif; font-weight: 400; font-size: 44px; line-height: 1.15; margin: 0 0 20px; }
.pe-promo-body { color: #d9d9d9; font-size: 16px; line-height: 1.7; margin: 0 0 28px; }
.pe-promo-btn { display: inline-block; color: #b89867; border: 1px solid #b89867; padding: 12px 28px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background-color .2s, color .2s; }
.pe-promo-btn:hover { background: #b89867; color: #000; }
/* メニューページ(スマホ): 直前のコース一覧の RESERVE が Webflow の指定(top:100px)で 100px 下にずれて描かれるので、その分あける */
@media screen and (max-width: 479px) {
  #dinner-omakase + .pe-promo { margin-top: 100px; }
}
@media screen and (max-width: 767px) {
  .pe-promo { padding: 56px 16px; }
  .pe-promo-inner { flex-direction: column; gap: 28px; text-align: center; }
  .pe-promo-heading { font-size: 32px; }
}

/* 念のための安全策: 将来どこかがはみ出しても横スクロールを出さない */
html { overflow-x: clip; }