@charset "utf-8";

/* ============================================================
   このサイトで追加した共通パーツ（全ページ）

   css/style.css と css/sp_style.css は本番( ggggg.jp )と共用のため、
   new.ggggg.jp で足したものはこのファイルに分離している。
   読み込みは include/head.php（style.css / sp_style.css の後）。
   ============================================================ */

/* ---- ヘッダーを追従型に（PC専用。追従するのはメニュー行だけ） ----
   style.css の .oz_head は position: absolute で、スクロールすると流れていく。
   また body に padding-top: 160px が入っており、絶対配置ヘッダーのぶんの場所を空けている。

   sticky に変えると .oz_head が通常フローに戻り、自前で高さを持つようになるので、
   body の余白は不要になる（残すと160pxぶん二重に空く）。

   さらに top をマイナスにして、ロゴ・電話番号の行（.oz_header_wrap）の高さぶんだけ
   上へ逃がしている。こうするとスクロール時にその行は画面外へ流れ、
   メニュー行（.oz_menuInner）だけが上端に貼り付く。
   マイナス幅は js/common_ui.js が .oz_header_wrap を実測して --ozHeadRow に入れる
   （フォントの回り込みで高さが変わってもズレないようにするため。JSが動く前は下の既定値を使う）。

   ※ スマホ側は sp_style.css で既に position: fixed ＋ body padding-top: 55px なので触らない。
   ※ #oz_wrapper の overflow-x: hidden は sp_style.css の max-width:767px の中だけなので、
     PCでは sticky を壊すスクロールコンテナが無い（確認済み）。 */

@media screen and (min-width: 1101px) {
  body {
    padding-top: 0;
  }

  .oz_head {
    position: sticky;
    top: calc(var(--ozHeadRow, 110px) * -1);
    background: #fff;
  }

  /* 貼り付いている間に見えているのはメニュー行だけなので、背景と影はそちらに付ける */
  .oz_head .oz_menuCont {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  }
}

/* ---- グローバルナビ ----
   2026-08-22に「求人」を足して11項目になった。
   PCで横に収まらなくなったときだけ折り返す保険（収まっている間は見た目が変わらない）。 */

.oz_menuBox {
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ---- ヘッダー右上：ネット予約＋会員ログイン（スマホ専用） ----
   .oz_spHead は sp_style.css で right 固定の絶対配置になっている。
   width を指定していないので、中の項目を増やすと左へ伸びる＝
   「ネット予約」の位置は従来のまま、その左に会員ログインが並ぶ。 */

.oz_spHead {
  gap: 12px;
}

.oz_spHead .oz_spHeadLogin {
  white-space: nowrap;
}

/* ---- 右下フローティング（PC専用） ----
   スマホは sp_style.css の .oz_spfoot が画面下部に出るので、そちらに任せて非表示にする。
   1100px は既存のサブメニュー（div.menu_six）の切り替え幅に合わせている。 */

.oz_pcFloat {
  display: none;
}

@media (min-width: 1100px) {
  .oz_pcFloat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;   /* ヘッダー(.oz_head)より下、本文より上 */
  }

  .oz_pcFloat__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #f17066;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .oz_pcFloat__btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
  }

  .oz_pcFloat__btn--member {
    background: #fff;
    color: #f17066;
    border: 1px solid #f17066;
  }

  .oz_pcFloat__btn--member:hover {
    color: #f17066;
  }

  /* 文字色はボタン側の color を継承させたいので、
     アイコンとラベルにも明示しておく（他のCSSの a/span 指定に負けないようにするため） */
  .oz_pcFloat__btn,
  .oz_pcFloat__btn .oz_pcFloat__icon,
  .oz_pcFloat__btn .oz_pcFloat__text {
    color: #fff;
  }

  .oz_pcFloat__btn--member,
  .oz_pcFloat__btn--member .oz_pcFloat__icon,
  .oz_pcFloat__btn--member .oz_pcFloat__text {
    color: #f17066;
  }

  .oz_pcFloat__icon {
    font-size: 20px;
  }

  .oz_pcFloat__text {
    display: block;
  }
}

/* ---- 文字サイズ切替（SPメニュー内） ---------------------------
   include/header.php でメニュー内に出している3ボタン。
   .oz_navFirst が付いているので1100px以下でだけ表示される。

   見た目は price.php の料金タブ（css/price.css:18-65）に揃えている。
   このUI自身の文字は css/fontsize.css の生成対象から外してあるので、
   切り替えてもボタンの大きさは動かない（操作中に動くと使いにくいため）。 */

.oz_fontSize {
  width: calc(100% - 80px);
  max-width: 600px;
  /* メニュー最上部に置いているので上の余白は不要
     （#oz_global-nav 側に padding-top:30px がある）。
     下の20px ＋ .oz_menuBox の padding-top:10px でナビ項目と分ける */
  margin: 0 auto 20px;
}

.oz_fontSize__label {
  display: block;
  margin-bottom: 8px;
  color: #8a807e;
  font-size: 12px;
  text-align: left;
}

.oz_fontSize__nav {
  display: flex;
  gap: 8px;
}

.oz_fontSize__btn {
  flex: 1 1 0;
  padding: 12px 8px;
  border: 1px solid #e0d7d5;
  border-radius: 999px;
  background: #f7f4f3;
  color: #8a807e;
  font-family: inherit;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* 押されている状態。aria-pressed をそのまま見た目に使う
   （js/cast_filter.js の絞り込みボタンと同じ流儀） */
.oz_fontSize__btn[aria-pressed="true"] {
  background: #f17066;
  border-color: #f17066;
  color: #fff;
}

/* ボタン自体の文字も小・中・大にして、選ぶ前から差が分かるようにする */
.oz_fontSize__btn[data-font-size="s"] { font-size: 13px; }
.oz_fontSize__btn[data-font-size="m"] { font-size: 15px; }
.oz_fontSize__btn[data-font-size="l"] { font-size: 17px; }

/* ---- 店名の見出しバー（h1） ---------------------------------
   include/header.php でヘッダー最上部に出している帯。
   元は .oz_logo の中にあったが、.oz_spHead（白背景の絶対配置）に
   隠れて読めなかったため独立させた。

   クラス名を oz_headTitle にしているのは意図的で、
   css/fontsize.css の生成スクリプトが oz_head を除外パターンに持つため、
   文字サイズ切替の対象から自動的に外れる（固定ヘッダーの帯が伸縮すると崩れるため）。 */

.oz_headTitle {
  margin: 0;
  padding: 6px 12px;
  background: #f17066;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
}

@media screen and (max-width: 1100px) {
  .oz_headTitle {
    padding: 5px 8px;
    /* 店名が長いので、折り返しにくいよう小さめにする */
    font-size: 10px;
  }

  /* 帯の分だけ縦に伸びるので、sp_style.css の height:55px 固定をやめる。
     下段の高さは .oz_header_wrap 自身が 55px 持っているので崩れない */
  .oz_head {
    height: auto;
  }

  /* 固定ヘッダーの実測値ぶん本文を押し下げる。
     --ozHeadH は js/common_ui.js が入れる（店名が2行になっても正しく空く） */
  body {
    padding-top: var(--ozHeadH, 80px);
  }
}

/* ---- スマホメニュー先頭のロゴ -------------------------------
   F で店名の帯を足した結果、閉じるボタン（#oz_nav-toggle）が
   帯のぶん下がり、文字サイズ切替に重なるようになった。

   パネル（#oz_global-nav）は .oz_head 基準、
   閉じるボタンは .oz_header_wrap 基準と位置の基準が違うのが原因。
   ここにロゴを置き、高さを確保して以降の要素をボタンの下端より下へ押し下げている。 */

.oz_menuLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 閉じるボタンは 上端＝帯の高さ・高さ53px。
     パネルの padding-top が 30px なので、帯24px + 53px - 30px = 47px 以上あれば
     次の要素が重ならない。店名が2行に折り返した場合も見込んで 56px にしている */
  min-height: 56px;
  margin-bottom: 12px;
}

.oz_menuLogo img {
  display: block;
}

/* 上の display:flex が style.css の .oz_navFirst { display:none } を上書きしてしまい、
   PCのグローバルナビにもロゴが出ていたので、PC幅（sp_style.css の 1100px より広い）では隠す */
@media screen and (min-width: 1101px) {
  .oz_menuLogo {
    display: none;
  }
}