/*
 * ハンバーガーメニュー（F案）。THE THOR のメニューをそのまま使い、足りない部分だけ上書きする（inc/site-menu.php）
 *   THE THOR のまま：開閉の仕組み（チェックボックス）、メニュー本体 .menuBtn__content、押すと閉じるグレー .menuBtn__unshown
 *   上書き：ヘッダーの下から出す（THE THOR はヘッダーごと覆うため、ハンバーガーの「三」が隠れていた）・幅310px・0.2秒・
 *           CLOSE と一番上の予約ボタンを隠す・F案の行とボタン（中身はウィジェットのカスタムHTML）
 * 文字は、本番の THE THOR のメニュー（2026-11-05 に miena.net を幅375pxで実測）に揃える。
 *   本番：項目 14.4px／500／字間 normal、AIの注意書き 11px、Land-Aとは？ 12.24px
 *   F案：行・ボタン 14.4px／500／normal、見出し 12px／700（区切りが分かるよう見出しだけ太字）、小さなリンク 12px、注意書き 11px
 *   経緯：本文の16.8px／700 → サイドバーに合わせた15.6px／700 と大きすぎ、運営者の指示で本番のメニューと同じにした
 * PC も同じ px（THE THOR の rem は PC とスマホで違うため px で書く）。
 */

/* --- THE THOR のメニューの上書き --- */
/* ヘッダーの下から出す。位置（--miena-menu-top）は js/site-menu.js が開くときに入れる。JSが動かないときは画面の上端から */
.menuBtn .menuBtn__unshown {
  top: var(--miena-menu-top, 0px);
  height: auto;
  background: rgba(0, 0, 0, 0.45);
  animation-duration: 0.2s;
  touch-action: none;
}
.menuBtn .menuBtn__content {
  /* ヘッダーの下端に1pxだけ重ねる（端数のずれでヘッダーとの間にすき間ができ、グレーが細い線に見えないように） */
  top: max(0px, calc(var(--miena-menu-top, 0px) - 1px));
  bottom: 0;
  height: auto;
  width: 310px;
  max-width: calc(100% - 70px); /* 狭い画面でも左に70px以上のグレーを残す */
  text-align: left;
  transition: transform 0.2s ease;
}
.menuBtn .menuBtn__checkbox:checked ~ .menuBtn__content {
  box-shadow: -6px 0 16px rgba(0, 0, 0, 0.12);
  /* 影は左側だけ。上の縁を越えてヘッダーの下ににじむと、×の赤い四角の下の余白が「隙間」に見えるため切り取る */
  clip-path: inset(0 0 0 -40px);
}
/* 右へスワイプしている間は指に付いてくる */
html.miena-menu-dragging .menuBtn .menuBtn__content {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .menuBtn .menuBtn__content {
    transition: none;
  }
  .menuBtn .menuBtn__unshown {
    animation: none;
  }
}
.menuBtn .menuBtn__scroll {
  padding: 0;
  overscroll-behavior: contain;
}
/* 英字の CLOSE と、一番上の赤い予約ボタン（カスタマイザー「ヘッダー設定」のボタン。予約はメニューの中の緑のボタンに移した）は出さない */
.menuBtn .menuBtn__close,
.menuBtn .menuBtn__navi {
  display: none;
}
.menuBtn .menuBtn__contentInner {
  font-size: 14.4px;
}
/* F案の中身を入れたウィジェットの外側の余白（THE THOR の .widget{margin:0 auto 40px}）をなくす。
 * メニューの中のウィジェットには THE THOR が .widget-menu を付ける。:has() は古い iPhone（iOS 15.3以前）で効かないので使わない */
.menuBtn .menuBtn__contentInner .widget-menu {
  margin: 0;
  padding: 0;
}

/* --- ヘッダーのハンバーガー（開いている間は同じ位置・同じ赤い四角のまま、中の印を × にする。JS が icon-menu → icon-close に替える） --- */
.l-header .menuBtn .menuBtn__link:focus:not(:focus-visible) {
  outline: none; /* :focus-visible を知らない古い Safari では、この行ごと無視され、ふだんの枠が残る */
}
.l-header .menuBtn .menuBtn__link:focus-visible {
  outline: 3px solid #2c5e33;
  outline-offset: -3px;
}
/* スマホ・タブレット：今は赤い四角がないので、開いている間だけ、押せる範囲（虫眼鏡の隣の四角）を赤くして白い × にする。
 * 検索パネルの虫眼鏡と同じ決まり（赤い四角はどの瞬間も一つだけ） */
@media (max-width: 991px) {
  html.miena-menu-open .l-header .menuBtn .menuBtn__link {
    isolation: isolate;
    color: #ffffff;
  }
  html.miena-menu-open .l-header .menuBtn .menuBtn__link::after {
    z-index: -1;
    background: #a83f3f;
  }
}
/* PC：開いている間は、マウスを乗せても THE THOR の黒（.menuBtn__link:hover{background:#191919}）にせず、赤い四角のまま。
 * iPad など指で押す端末では :hover が残り、開いている間ずっと黒くなっていた */
@media (min-width: 992px) {
  html.miena-menu-open .l-header .menuBtn .menuBtn__link,
  html.miena-menu-open .l-header .menuBtn .menuBtn__link:hover {
    background: #a83f3f;
    color: #ffffff;
  }
}

/* --- F案の中身（ウィジェットのカスタムHTML。ハンバーガーメニュー_F案_ウィジェット.html） --- */
.miena-menu {
  --miena-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --miena-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  display: block;
  margin: 0;
  padding: 20px 20px 32px; /* 上の20pxは最初の見出しの上の余白（margin だと外の要素を突き抜けるので padding にする） */
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  color: #191919;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
.miena-menu *,
.miena-menu *::before,
.miena-menu *::after {
  box-sizing: border-box;
}
.miena-menu a:focus:not(:focus-visible) {
  outline: none;
}
.miena-menu a:focus-visible {
  outline: 3px solid #2c5e33;
  outline-offset: -3px;
}

/* 見出し（押しても何も起きない区切り） */
.miena-menu .miena-menu__heading {
  margin: 34px 0 0;
  padding: 0 4px 4px;
  border: 0;
  background: none;
  color: #a83f3f; /* ハンバーガーの赤（2026-11-05 運営者の選択） */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.miena-menu .miena-menu__heading:first-child {
  margin-top: 0;
}

/* 行（高さ52px以上。長い項目名は2行に折り返してよい）。
 * 縦に並べて上下の真ん中に置く（<span class="miena-menu__nowrap"> で囲んだまとまりは1行ずつになる） */
.miena-menu .miena-menu__row {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 52px;
  margin: 0;
  padding: 10px 30px 10px 4px;
  border: 0;
  border-bottom: 1px dashed #d4d4d4;
  background: none;
  color: #191919;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
}
/* マウスを乗せたときだけ色を変える（iPhone では押したあとに :hover が残り、行が青いままになるため、マウスのある端末に限る） */
@media (hover: hover) {
  .miena-menu .miena-menu__row:hover {
    color: #006bb3;
  }
}
/* <span class="miena-menu__nowrap"> で囲んだまとまりは途中で切らない */
.miena-menu .miena-menu__nowrap {
  display: inline-block;
}

/* 右端の印：サイト内は ＞、新しいタブで開くもの（target="_blank"）は ↗ */
.miena-menu .miena-menu__row::after,
.miena-menu .miena-menu__btn::after,
.miena-menu .miena-menu__small[target="_blank"]::after {
  content: "";
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  background-color: #b5b5b5;
  -webkit-mask: var(--miena-chevron) center / contain no-repeat;
  mask: var(--miena-chevron) center / contain no-repeat;
}
.miena-menu .miena-menu__row::after {
  position: absolute;
  top: 50%;
  right: 4px;
  margin-top: -7px;
}
.miena-menu .miena-menu__row[target="_blank"]::after,
.miena-menu .miena-menu__btn::after,
.miena-menu .miena-menu__small[target="_blank"]::after {
  -webkit-mask-image: var(--miena-external);
  mask-image: var(--miena-external);
}
.miena-menu .miena-menu__row[target="_blank"]::after {
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background-color: #9a9a9a;
}

/* 2つのボタン（形は同じ、色だけ違う） */
.miena-menu .miena-menu__btnWrap {
  margin: 0;
  padding: 14px 0 4px;
}
.miena-menu .miena-menu__btnWrap-note {
  padding-bottom: 12px;
  border-bottom: 1px dashed #d4d4d4;
}
/* 一番上に置いたボタン（予約。2026-11-05 運営者の指示で「記事を読む」の上へ）：
 * ボタンのまわりを緑の帯にして、メニューの項目と分ける（運営者が選んだ案I）。
 * 色は本番の THE THOR のメニューにあった予約の帯（#9dd1a8）を、白い文字が読めるよう濃くした #6bb67c（明暗比 約2.4。運営者の選択）。
 * ボタンは透明の地に白い枠と白い文字。
 * 帯はメニューの幅いっぱい。上はメニューの上端の白い余白20pxを残し、帯の中の上下は20px、帯から「記事を読む」まで30px */
.miena-menu > .miena-menu__btnWrap:first-child {
  margin: 0 -20px;
  padding: 20px;
  background: #6bb67c;
  /* トップページの予約の帯（THE THOR の .pickupHead）と同じ、上の縁の内側の影（2026-11-05 運営者の指示） */
  box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, 0.5);
}
.miena-menu > .miena-menu__btnWrap:first-child + .miena-menu__heading {
  margin-top: 30px;
}
.miena-menu > .miena-menu__btnWrap:first-child .miena-menu__btn-reserve {
  border-width: 1px;
  border-color: #ffffff;
  background: transparent;
  color: #ffffff;
  /* 文字だけ少し太く（2026-11-05 運営者の指示）。日本語は端末の字体で、600 にすると 700 の太字に飛ぶ端末が多いので、
   * 太さは 500 のまま、文字に細い白い縁を足す */
  -webkit-text-stroke: 0.3px #ffffff;
}
.miena-menu > .miena-menu__btnWrap:first-child .miena-menu__btn-reserve::after {
  background-color: #ffffff;
}
.miena-menu .miena-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin: 0;
  padding: 8px 12px;
  border: 2px solid #bdbdbd;
  border-radius: 24px;
  background: #ffffff;
  color: #191919;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}
.miena-menu .miena-menu__btn::after {
  width: 15px;
  height: 15px;
  background-color: #191919;
}
@media (hover: hover) {
  .miena-menu .miena-menu__btn:hover {
    background: #f6f6f6;
    color: #191919;
  }
  /* 予約ボタンは、マウスを乗せても色を変えない（2026-11-05 運営者の指示） */
  .miena-menu .miena-menu__btn-reserve:hover {
    background: #f2f8f3;
    color: #2f7a3e;
  }
  .miena-menu > .miena-menu__btnWrap:first-child .miena-menu__btn-reserve:hover {
    background: transparent;
    color: #ffffff;
  }
}
/* 予約ボタンの地は、いつも淡い緑（2026-11-05 運営者の指示） */
.miena-menu .miena-menu__btn-reserve {
  background: #f2f8f3;
  border-color: #5fae70;
  color: #2f7a3e;
}
.miena-menu .miena-menu__btn-reserve::after {
  background-color: #2f7a3e;
}

/* AIの注意書き */
.miena-menu .miena-menu__note {
  margin: 8px 4px 0;
  padding: 0;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* 一番下の小さなリンク（押せる範囲は縦44px以上、間は広く。折り返してもよい） */
.miena-menu .miena-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 24px -12px 0;
}
.miena-menu .miena-menu__small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .miena-menu .miena-menu__small:hover {
    color: #191919;
  }
}
.miena-menu .miena-menu__small[target="_blank"]::after {
  width: 12px;
  height: 12px;
  background-color: #9a9a9a;
}

/* 幅360px未満（iPhone SE 第1世代など。メニューは250px）：1〜2文字だけ次の行に落ちる（「までに／に」「ご案／内」）ので、
 * 左右の余白と字間だけ詰める。文字は小さくしない */
@media (max-width: 359px) {
  .miena-menu {
    padding-right: 16px;
    padding-left: 16px;
  }
  .miena-menu > .miena-menu__btnWrap:first-child {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 16px;
    padding-left: 16px;
  }
  .miena-menu .miena-menu__row {
    padding-right: 24px;
    letter-spacing: 0;
  }
  .miena-menu .miena-menu__btn {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
    letter-spacing: 0;
  }
}

/* 開いている間、後ろの記事を動かさない（JS が body の top に今の位置を入れ、閉じたら元の位置に戻す） */
html.miena-menu-open body {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}