@charset "UTF-8";

/* ==========================================
   ドロワー（SP のメニュー）
   XD: 02_ハンバーガーメニュー_SP（375×600）。ヘッダー（白い帯 50px）の下に #f9f9f9 の全面。PC（768px〜）はハンバーガーがないので出さない。
   y はビューポートの上端からの値。メニューは 1 項目 56px（線 1px 込み）で、y=50 から始まる。
   ========================================== */
.drawer {
  position: fixed;
  z-index: 290; /* ヘッダー（300）の下 */
  inset: var(--admin-bar-h) 0 0; /* ログイン時は管理バーの下から */
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0s 0.3s;
  pointer-events: none;
  visibility: hidden;
}

.drawer.is-open {
  opacity: 1;
  transition:
    opacity 0.3s ease,
    visibility 0s;
  pointer-events: auto;
  visibility: visible;
}

/* 開いている間は背面を固定する。スクロール位置は js/main.js が --scroll-lock-top に渡す。
   top には html の margin-top（管理バーの分）を足して位置を保つ */
body.is-drawer-open {
  position: fixed;
  top: calc(var(--scroll-lock-top, 0px) + var(--admin-bar-offset));
  width: 100%;
  overflow: hidden; /* 旧 style.css の「ドロワー展開時の背面スクロール完全固定」から移した */
  touch-action: none;
}

.drawer__overlay {
  /* XD: 長方形 1139 x=0 y=0 375×600 #f9f9f9（全面。外側を押すと閉じる） */
  position: absolute;
  inset: 0;
  background-color: var(--color-bg);
}

.drawer__panel {
  position: absolute;
  inset: 0 0 auto;
  box-sizing: border-box;
  max-height: 100%;
  padding: 50px 16px 0 14px; /* XD: 先頭の項目 y=50（ヘッダーの下）、文字 x=14、線 x=14〜359 */
  overflow-y: auto;
}

.drawer__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer__nav-item {
  /* XD: 区切り線（線 17〜22）x=14 w=345 1px #93c572。項目の間隔は 56（y=106・162・218・274・330・386） */
  box-sizing: border-box;
  height: 56px;
  border-bottom: 1px solid var(--color-main);
}

.drawer__nav-link {
  /* XD: 日本語 YuGo-Bold 16px・字間 0.8px・#3b4043・ベースライン y=84（項目の上端 50 から 34） */
  display: flex;
  align-items: flex-start;
  padding-top: 20.5px;
  color: var(--color-text-nav);
  transition: color 0.2s ease;
}

@media (any-hover: hover) {
  .drawer__nav-link:hover {
    color: var(--color-main);
  }
}

.drawer__nav-text {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1; /* 16px ÷ 16px */
  letter-spacing: 0.05em;
}

.drawer__nav-en {
  /* XD: 英語 12px・字間 0.6px・#f7b560・ベースライン y=82（日本語より 2 上）、x は日本語の右に約 10 */
  margin: -0.625px 0 0 9.5px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3334; /* 16px ÷ 12px（切り上げて 16px ちょうどにする） */
  letter-spacing: 0.05em;
  color: var(--color-accent);
  text-transform: uppercase;
}

.drawer__nav-arrow {
  /* XD: 矢印（パス 206〜211）w=25.33 h=5.57、右端 x=359.4、上端は項目の上端から 25.2。線 2px #93c572 と、上に折れる矢じり */
  position: relative;
  flex-shrink: 0;
  width: 25.33px;
  height: 5.57px;
  margin: 4.66px 0 0 auto;
  font-size: 0;
  color: var(--color-main);
}

.drawer__nav-arrow::before,
.drawer__nav-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background-color: currentcolor;
}

.drawer__nav-arrow::before {
  width: 100%;
}

.drawer__nav-arrow::after {
  width: 9.5px;
  transform: rotate(36deg);
  transform-origin: right center;
}

.drawer__contact {
  /* XD: 問い合わせ電話（ベースライン y=418）・電話番号 20px（443）・受付時間 14px 2 行（472・493）。すべて YuGo-Bold・#93c572・中央 */
  padding: 0 0 0 3px; /* XD: 文字の中心は x=188（パネルの内側 14〜359 の中心 186.5 より 1.5 右） */
  font-family: var(--font-ja);
  font-weight: 700;
  color: var(--color-main);
  text-align: center;
}

.drawer__contact-label {
  margin: 18.19px 0 0;
  font-size: 14px;
  line-height: 1.2858; /* 18px ÷ 14px（切り上げて 18px ちょうどにする） */
}

.drawer__tel {
  margin: 0;
  font-size: 20px;
  line-height: 1.4; /* 28px ÷ 20px */
}

.drawer__tel a {
  color: inherit;
  text-decoration: none;
}

.drawer__hours {
  margin: 6.56px 0 0;
  font-size: 14px;
  line-height: 1.5; /* 21px ÷ 14px */
}

.drawer__hours-time,
.drawer__hours-note {
  /* 折り返すのは「時間」と「（注記）」の間だけ */
  white-space: nowrap;
}

.drawer__cta {
  /* XD: ボタン x=38 y=520 300×48 #f7b560 角丸 24、文字 YuGo-Bold 16px の白（ベースライン 550） */
  display: block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  height: 48px;
  margin: 21.31px auto 0;
  border-radius: 24px;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 3; /* 48px ÷ 16px */
  text-align: center;
}

@media (width >= 768px) {
  .drawer {
    display: none;
  }
}