@charset "UTF-8";
/* ============================================================
   SP追従メニュー 改修テスト（index_test2.php 専用）
   ・ヘッダーの高さ分スクロールしたら、ロゴ・予約ボタンを消して
     ハンバーガーだけを角丸背景付きで右上に追従させる
   ・同時に画面下部へ「予約プラン」「予約確認・キャンセル」の
     2カラム固定バーを表示する
   ・メニュー展開中は通常のヘッダーに戻し、下部バーは隠す
   ・PC表示（1001px以上）には影響しない
   本番反映時は header.scss（＋footer.scss）へ移植する想定
   ============================================================ */

/* 下部固定バー：PCでは非表示 */
.sp_fixbar {
  display: none;
}

@media (max-width: 1000px) {
  /* ---------- ヘッダー ---------- */

  /* PC用の .hd.scroll { height: 100px; } がSPにも効いてしまうため、SPは高さ固定 */
  .hd.scroll {
    height: 22vw;
  }

  .hd .hd_logo,
  .hd .hd_menu {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* 予約ボタン列の天地をハンバーガーに揃える
     ・「予約する」の上端 ＝ ハンバーガー1本目の線の上端
     ・「予約確認・キャンセル」の下線 ＝「メニュー」の文字の下端
     ハンバーガーの線〜文字の下端は約11.15vw。
     予約列＝ボタン高さ＋間隔1.2vw＋リンク（3vw×行間1.2＋下線1px）で同じ高さにし、
     「メニュー」文字の下の行間ぶん（約1.2vw）を margin-bottom で補って上端を合わせる */
  .hd .hd_inner .hd_menu {
    gap: 1.2vw;
    margin-bottom: 1.2vw;
  }

  .hd .hd_inner .hd_menu .hd_rsv_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(6.15vw - 1px);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
  }

  .hd .hd_inner .hd_menu .hd_rsv_link {
    line-height: 1.2;
  }

  .hd .hamburger {
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease;
  }

  /* ハンバーガーの背景（スクロール後に表示）
     18vw角の正方形をハンバーガーの中心に重ね、スクロール後はハンバーガーごと
     画面右上の角へ移動させる → 背景が上端・右端にぴったり付く（左下だけ角丸） */
  .hd .hamburger::before {
    content: "";
    position: absolute;
    top: calc(50% - 9vw - 0.6vw);
    left: calc(50% - 9vw);
    width: 18vw;
    height: 18vw;
    z-index: -1;
    border-radius: 0 0 0 4vw;
    background-color: #f5f3ee;
    box-shadow: 0 0.6vw 2.4vw rgba(69, 81, 75, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  /* スクロール後（メニュー展開中は除く） */
  body.is_sp_compact:not(.is_spnav_open) .hd {
    background-color: transparent;
    pointer-events: none;
  }

  body.is_sp_compact:not(.is_spnav_open) .hd .hd_logo,
  body.is_sp_compact:not(.is_spnav_open) .hd .hd_menu {
    opacity: 0;
    visibility: hidden;
  }

  /* ハンバーガーの中心を、右上角の18vw角の中心へ移動
     横：右余白4vw＋自身の幅の半分 − 9vw ／ 縦：9vw − ヘッダー高さの半分（11vw）
     ※「メニュー」文字の下に行間があるため、見た目の上下バランスで縦は0.6vw下げている */
  body.is_sp_compact:not(.is_spnav_open) .hd .hamburger {
    pointer-events: auto;
    transform: translate(calc(50% - 5vw), -1.4vw);
  }

  body.is_sp_compact:not(.is_spnav_open) .hd .hamburger::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- 下部固定バー ---------- */

  .sp_fixbar {
    display: flex;
    gap: 2.4vw;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    padding: 2.4vw 3vw;
    background-color: #f5f3ee;
    box-shadow: 0 -0.4vw 2.4vw rgba(69, 81, 75, 0.12);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0.35s ease;
  }

  body.is_sp_compact:not(.is_spnav_open) .sp_fixbar {
    transform: translateY(0);
    visibility: visible;
  }

  .sp_fixbar .sp_fixbar_btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
    height: 12vw;
    border: 1px solid;
    border-radius: 64px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 3.4vw;
    line-height: 1.2;
    white-space: nowrap;
  }

  .sp_fixbar .sp_fixbar_btn_plan {
    color: #fff;
    background-color: #da6211;
    border-color: #da6211;
  }

  .sp_fixbar .sp_fixbar_btn_check {
    color: #45514b;
    background-color: #fff;
    border-color: #45514b;
  }

  .sp_fixbar .sp_fixbar_icon {
    font-size: 3.6vw;
  }

  /* フッター最下部が下部バーに隠れないよう、バーの高さ分（2.4vw×2＋12vw）を追加 */
  .ft {
    padding-bottom: calc(6vw + 16.8vw);
  }
}

/* ============================================================
   トップページ READ MORE（スタッフブログ・各種プラン）の中央寄せ修正
   PC用の right: 8%（absolute配置用）がSPの position: relative にも効き、
   左へ約8%ずれていたのを打ち消す。本番反映時は index.scss へ
   ============================================================ */
@media (max-width: 1000px) {
  #staffblog .cbtn,
  #plan .plan_inner .cbtn {
    right: auto;
  }
}