/* ===== ヘッダー：左上から伸びる白い面（右下だけ丸い）。下へ送ると上へ隠れ、上へ戻すと出る ===== */
.hd {
  position: fixed;
  top: var(--band);
  left: 0;
  right: 0;
  z-index: 99;
  pointer-events: none;
  transition: top 0.2s ease;
}
.hd.is-stuck { top: 0; }
.hd__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  max-width: 95rem;
  height: var(--hd-h);
  padding: 0 2% 0 3%;
  border-radius: 0 0 1.5rem 0;
  background: #fff;
  pointer-events: auto;
}
.hd.is-up .hd__in { animation: hd-up 0.8s forwards; }
.hd.is-down .hd__in { animation: hd-down 0.5s forwards; }
@keyframes hd-up { from { transform: translateY(0); } to { transform: translateY(-110%); } }
@keyframes hd-down { from { transform: translateY(-110%); } to { transform: translateY(0); } }

.hd__logo a { display: flex; align-items: center; gap: 0.75rem; }
.hd__mark { flex: none; width: 2.5rem; height: 2.5rem; }
.hd__name { display: flex; flex-direction: column; color: var(--navy); white-space: nowrap; }
.hd__sub { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.5; }
.hd__main { font-size: 1.3125rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1.3; }

.hd__menu { display: flex; align-items: center; }
.hd__menu li { padding: 0 1.1rem; font-weight: 700; white-space: nowrap; }
.hd__link { position: relative; color: var(--navy); }
.hd__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.625rem;
  width: 100%;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left top;
  transition: transform 0.4s ease;
}
.hd__link:hover::after { transform: scaleX(1); }
.hd__icon { border-left: 1px solid rgba(112, 112, 112, 0.2); }
.hd__icon a { display: flex; align-items: center; color: var(--accent); }
.hd__icon svg { flex: none; width: 1.75rem; height: 1.75rem; margin-right: 0.625rem; color: var(--accent-2); transition: transform 0.4s ease; }
.hd__icon a:hover svg { transform: scale(1.2); }
/* Web予約だけは、押す場所が分かるよう青い面にする */
.hd__web { padding-right: 0 !important; }
.hd__web a {
  display: block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  transition: background-color 0.4s ease;
}
.hd__web a:hover { background: var(--navy); }

@media (max-width: 1365px) {
  .hd__menu li { padding: 0 0.75rem; }
  .hd__icon svg { margin-right: 0.4rem; }
}

/* ===== 1240px 未満：ロゴだけの小さな面＋右上の線2本のボタン＋右から出る紺の面 ===== */
.menu-btn, .drawer { display: none; }
@media (max-width: 77.4375rem) {
  .hd__in { width: max-content; max-width: none; padding: 0 2.25rem 0 1.75rem; }
  .hd__nav { display: none; }
  .menu-btn {
    display: block;
    position: fixed;
    top: calc(var(--band) + 1.25rem);
    right: 1.5rem;
    z-index: 105;
    width: 3rem;
    height: 3rem;
    mix-blend-mode: exclusion;
    transition: top 0.2s ease;
  }
  .menu-btn.is-stuck { top: 1.25rem; }
  .menu-btn::before, .menu-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2rem;
    height: 0.1rem;
    background: #fff;
    transition: transform 180ms;
  }
  .menu-btn::before { transform: translateY(-0.2rem); }
  .menu-btn::after { transform: translateY(0.2rem); }
  .menu-btn[aria-expanded="true"] { mix-blend-mode: normal; }
  .menu-btn[aria-expanded="true"]::before { transform: rotate(20deg); }
  .menu-btn[aria-expanded="true"]::after { transform: rotate(-20deg); }

  .drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    max-width: 28.75rem;
    height: 100%;
    max-height: 56rem;
    padding: 5rem 1.5rem 2rem;
    border-radius: 0.375rem 0 0.375rem 0.375rem;
    background: var(--navy);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  body.menu-open .drawer { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
  .drawer__list li { border-top: 1px solid rgba(255, 255, 255, 0.3); }
  .drawer__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 0;
    color: #fff;
    font-weight: 700;
  }
  .drawer__list a::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
  }
  .drawer__cta { padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, 0.3); }
  .drawer__cta .cbox { width: 100%; max-width: none; margin: 0 0 1.5rem; padding: 2rem 0; }
}
@media (max-width: 40.625rem) {
  .hd__in { padding: 0 1.25rem 0 1rem; }
  .hd__logo a { gap: 0.5rem; }
  .hd__mark { width: 1.875rem; height: 1.875rem; }
  .hd__sub { font-size: 0.5625rem; }
  .hd__main { font-size: 0.9375rem; letter-spacing: 0.04em; }
  .menu-btn { top: calc(var(--band) + 0.5rem); }
  .menu-btn.is-stuck { top: 0.5rem; }
  .drawer { border-radius: 0; }
  .drawer__cta .cbox { padding: 1.4rem 0; }
}