/* =========================================================
   Header / Hamburger
========================================================= */
/* 変数（PC時の基準値） */
.ol-hamburger{
  --hb-size: 68px;        /* 白丸の直径 */
  --hb-gap: 10px;         /* 三本線とMENUの間 */
  --hb-bar-w: 30px;       /* 線の長さ */
  --hb-bar-h: 3px;        /* 線の太さ */
}

/* 白丸 */
.ol-hamburger__icon{
  width: var(--hb-size);
  height: var(--hb-size);
  gap: var(--hb-gap);
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* 三本線ブロック */
.ol-hamburger__bars{ display:flex; flex-direction:column; align-items:center; gap:7px; }

/* 三本線 */
.ol-hamburger__bar{ width: var(--hb-bar-w); height: var(--hb-bar-h); background:#222; border-radius:999px; }

/* 縦積み＆中央寄せ */
.ol-hamburger__icon{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }

/* MENU ラベル */
.ol-hamburger__label{
  position: static !important;
  transform: none !important;
  margin: 0;
  line-height: 1;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #222;
  text-align: center;
}

/* SP（～768px）で3ボタン揃える */
@media (max-width: 768px){
  .ol-header__contact{ display:flex; align-items:center; gap:10px; }
  .ol-header__contact > *, .ol-header__contact a, .ol-hamburger{ margin:0 !important; }

  /* 3ボタンを44x44に統一 */
  .ol-header__contact .ol-contact__mail-button a{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; box-sizing:border-box; letter-spacing:0 !important;
  }
  .ol-hamburger__icon{ width:44px; height:44px; gap:0; box-shadow:0 3px 10px rgba(0,0,0,.08); }
  .ol-hamburger__bars{ gap:3px; }
  .ol-hamburger__bar{ width:16px; height:2px; }

  /* SPではラベル非表示 */
  .ol-hamburger__label{ display:none; }

  .ol-header__contact-wrapper{ display:flex; align-items:center; gap:0; }
}

/* ちょっとしたフィードバック */
.ol-hamburger:hover   .ol-hamburger__icon{ box-shadow:0 6px 18px rgba(0,0,0,.12); }
.ol-hamburger:active  .ol-hamburger__icon{ transform:translateY(1px); }
.ol-header__contact-wrapper{ display:flex; align-items:center; }
@media (max-width:768px){ .ol-hamburger{ margin-left:8px; } }

/* =========================================================
   Overlay Menu
========================================================= */
.ol-menu-overlay{ position:fixed; inset:0; z-index:9999; }
.ol-menu-overlay[hidden]{ display:none !important; }

.ol-menu-overlay__backdrop{
  position:absolute; inset:0;
  background:rgba(18,18,18,.48);
  opacity:0; transition:opacity .25s;
}
body.is-menu-open .ol-menu-overlay__backdrop{ opacity:1; }

.ol-menu-panel{
  position:absolute; top:0; right:0; height:100dvh; width:min(88vw,420px);
  background:#4A4A4A; color:#fff;
  box-shadow:-12px 0 28px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s;
  display:flex; flex-direction:column; padding:24px 22px 28px;
}
body.is-menu-open .ol-menu-panel{ transform:translateX(0); }

/* Close */
.ol-menu-close{
  position:absolute; top:14px; right:14px; width:40px; height:40px;
  border-radius:10px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
}
.ol-menu-close span{ position:absolute; top:50%; left:50%; width:18px; height:2px; background:#fff; border-radius:2px; }
.ol-menu-close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.ol-menu-close span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }

/* List */
.ol-menu-nav{ margin-top:56px; overflow:auto; -webkit-overflow-scrolling:touch; }
.ol-menu{ list-style:none; margin:0; padding:0; }
.ol-menu > li{ border-bottom:1px solid rgba(255,255,255,.12); }

/* === 行の見た目（指定通り 16px / 5px） === */
.ol-menu a,
.ol-menu a:hover,
.ol-menu a:visited{
  display:block;
  padding:5px 4px;
  font-size:16px;
  color:#fff !important;
  letter-spacing:.02em;
  text-decoration:none !important;
  opacity:1; transform:none; transition:none;
}
/* アクセシビリティ */
.ol-menu a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* 子メニュー */
.ol-menu li.menu-item-has-children > a{ position:relative; padding-right:28px; }
.ol-menu li.menu-item-has-children > a::after{
  content:""; position:absolute; right:6px; top:50%; width:8px; height:8px;
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform:translateY(-50%) rotate(-45deg);
}
.ol-menu .sub-menu{ list-style:none; padding:0 0 8px 12px; }
.ol-menu .sub-menu a{ font-size:16px; padding:6px 4px; color:#fff !important; }

/* ===== リンク下線を完全OFF（テーマ対策） ===== */
.ol-menu a::before, .ol-menu a::after{ content:none !important; }

/* =========================================================
   CTA（ご予約ボタン）
========================================================= */
.is-menu-open .ol-menu-panel .ol-menu-footer{
  display:block !important;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.is-menu-open .ol-menu-panel .ol-menu-cta{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:100%;
  padding:12px 18px;
  font-size:16px; font-weight:600;
  border-radius:8px;
  color:#fff; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
  transition:transform .2s, opacity .2s;
  gap:8px;
}
.is-menu-open .ol-menu-panel .ol-menu-cta + .ol-menu-cta{  /* ボタン同士の間隔 */
  margin-top:10px;
}
.is-menu-open .ol-menu-panel .ol-menu-cta:hover{
  opacity:.92; transform:translateY(1px);
}

/* 予約ボタン（既存） */
.is-menu-open .ol-menu-panel .ol-menu-cta{
  background:#D65F73;  /* お好みで */
}

/* 2ボタンの間に余白 */
#olOverlayMenu .ol-menu-cta + .ol-menu-cta{
  margin-top: 12px !important;
}

/* Instagramボタン（白背景） */
#olOverlayMenu .ol-menu-cta--ig{
  background:#fff !important;
  color:#d65f73 !important;
  border:1px solid #d65f73 !important;
}

/* hover */
#olOverlayMenu .ol-menu-cta--ig:hover{
  background:#ffeef2 !important;
  opacity:1 !important;
  transform:translateY(1px);
}