/* ヘッダー：ロゴ・ナビゲーション・予約・電話・全画面メニュー（共通必須CSS） */

.site-header {
 --header-height: 65px;
 position: fixed;
 inset: 0 0 auto;
 z-index: 1000;
 height: var(--header-height);
 color: var(--color-text);
 background: transparent;
 transition: background-color .25s ease, box-shadow .25s ease;
 word-break: normal;
}

.site-header.is-scrolled, .site-header.is-open {
 background: var(--color-header-scrolled);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 box-shadow: var(--shadow-small);
}

.site-header__inner {
 position: relative;
 z-index: 251;
 box-sizing: border-box;
 width: 100%;
 max-width: var(--content-width-1920);
 height: 100%;
 margin-inline: auto;
 padding: 0 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}

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

.site-header a:focus-visible, .site-header button:focus-visible {
 outline: 2px solid var(--color-focus);
 outline-offset: 4px;
}

.site-header__logo {
 display: flex;
 align-items: center;
 flex: 0 0 230px;
 margin: 0;
 font-size: var(--font-size-14);
 font-weight: 400;
}

.site-header__brand {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
}

.site-header__logo img {
 display: block;
 flex: 0 0 auto;
 width: 58px;
 height: 58px;
 object-fit: contain;
}

.site-header__brand-text {
 display: flex;
 flex: 1;
 min-width: 0;
 flex-direction: column;
 gap: .3em;
 white-space: nowrap;
 margin-top: 5px;
}

.site-header__brand-caption {
 display: block;
 background: var(--color-brand-gold);
 color: var(--color-white);
 text-align: center;
 font-size: .8em;
 font-weight: var(--font-weight-bold);
 line-height: 1.45;
 letter-spacing: .12em;
 padding: 0.15em 1em;
}

.site-header__brand-name {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: .4em;
 line-height: 1.2;
 font-weight: var(--font-weight-bold);
}

.site-header__brand-name strong {
 font-size: 1.5em;
 font-weight: var(--font-weight-bold);
 letter-spacing: .06em;
}

.site-header__controls, .site-header__nav, .site-header__languages {
 display: flex;
 align-items: center;
}

.site-header__controls {
 gap: clamp(16px, 1.8vw, 34px);
 white-space: nowrap;
}

.site-header__nav {
 font-size: var(--font-size-14);
}

.site-header__nav > ul {
 display: flex;
 align-items: center;
 gap: 30px;
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 1.1em;
 font-weight: var(--font-weight-bold);
}

.site-header__nav a {
 transition: color .25s ease;
}

.site-header__nav a:hover {
 color: var(--color-accent-pink);
 text-decoration: none;
}

.site-header__languages {
 gap: 4px;
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 margin: 0 1em;
}

.site-header__reservation {
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 9px 14px;
 border: 2px solid var(--color-accent-pink-border);
 border-radius: 30px;
 background: var(--background-reservation);
 box-shadow: none;
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
 transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.site-header a.site-header__reservation {
 color: var(--color-reservation-ink);
}

.site-header__reservation img {
 width: 22px;
 height: 22px;
 object-fit: contain;
 filter: brightness(0) saturate(100%) invert(35%) sepia(88%) saturate(2968%) hue-rotate(322deg) brightness(96%) contrast(99%);
}

.site-header__reservation:hover {
 transform: none;
 box-shadow: none;
 filter: none;
}

.site-header__reservation:active {
 transform: none;
 box-shadow: none;
}

.site-header__line {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 margin-left: -22px;
 padding: 9px 13px;
 border-radius: 30px;
 background: #06c755;
 box-shadow: 0 3px 7px rgb(6 199 85 / 22%), inset 0 1px 2px rgb(255 255 255 / 38%);
 color: var(--color-white);
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
}

.site-header a.site-header__line {
 color: var(--color-white);
}

.site-header__line-icon {
 flex: 0 0 auto;
 color: var(--color-white);
 font-size: var(--font-size-24);
 line-height: 1;
}

.site-header__phone {
 display: flex;
 align-items: center;
 gap: 7px;
}

.site-header__phone img {
 width: 30px;
 height: 30px;
 object-fit: contain;
}

.site-header__phone span {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.site-header__phone small {
 font-size: var(--font-size-12);
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
}

.site-header__phone strong {
 font-size: var(--font-size-21);
 font-weight: var(--font-weight-bold);
 line-height: 1.25;
 letter-spacing: .02em;
}

.site-header__toggle {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 5px;
 flex: 0 0 38px;
 width: 38px;
 min-height: 44px;
 padding: 0;
 border: 0;
 background: transparent;
 color: var(--color-menu-toggle);
 cursor: pointer;
 transform: translateY(5px);
}

.site-header__lines {
 position: relative;
 display: block;
 width: 32px;
 height: 24px;
}

.site-header__lines span {
 position: absolute;
 left: 0;
 width: 100%;
 height: 3px;
 background: currentColor;
 transition: transform .2s ease, opacity .2s ease;
}

.site-header__lines span:nth-child(1) {
 top: 0;
}

.site-header__lines span:nth-child(2) {
 top: calc(50% - 1.5px);
}

.site-header__lines span:nth-child(3) {
 bottom: 0;
}

.site-header__toggle-label {
 font-family: var(--font-family-base);
 font-size: var(--font-size-12);
 line-height: 1;
 font-weight: var(--font-weight-bold);
 letter-spacing: 2px;
 padding-left: 2px;
}

.is-open .site-header__lines span:nth-child(1) {
 transform: translateY(10.5px) rotate(45deg);
}

.is-open .site-header__lines span:nth-child(2) {
 opacity: 0;
}

.is-open .site-header__lines span:nth-child(3) {
 transform: translateY(-10.5px) rotate(-45deg);
}

.site-header__menu {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 250;
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transition: .3s all ease-in-out;
 width: auto;
 height: 100vh;
 height: 100dvh;
 box-sizing: border-box;
 overflow-y: auto;
 overscroll-behavior: contain;
 padding: calc(var(--header-height) + clamp(30px, 5vh, 64px)) clamp(24px, 5vw, 80px) max(32px, env(safe-area-inset-bottom));
 background: var(--color-white) url('../images/global-menu-bg.webp') center center / cover no-repeat;
 font-family: var(--font-family-base);
 font-size: var(--font-size-16);
}

.site-header.is-open .site-header__menu {
 pointer-events: auto;
 opacity: 1;
 visibility: visible;
}

.site-header.is-open {
 background: transparent;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 box-shadow: none;
}

.site-header__controls > :not(.site-header__toggle) {
 transition: opacity .2s ease, visibility .2s ease;
}

.site-header.is-open .site-header__controls > :not(.site-header__toggle) {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

.site-header__menu-inner {
 box-sizing: border-box;
 width: min(100%, var(--content-width-1200));
 min-height: calc(100dvh - var(--header-height) - clamp(92px, 12vh, 150px));
 margin-inline: auto;
 display: grid;
 grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
 align-items: center;
 gap: clamp(48px, 7vw, 96px);
 opacity: 0;
 transform: translateY(18px);
 transition: opacity .35s ease .08s, transform .35s ease .08s;
}

.site-header.is-open .site-header__menu-inner {
 opacity: 1;
 transform: translateY(0);
}

.site-header__menu-eyebrow {
 margin: 0 0 12px;
 color: var(--color-brand-gold);
 font-family: var(--font-family-base);
 font-size: var(--font-size-14);
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
 letter-spacing: .24em;
 text-transform: uppercase;
}

.site-header__menu-list {
 margin: 0;
 padding: 0;
 list-style: none;
 border-top: 1px solid rgb(172 125 32 / 28%);
}

.site-header__menu-list li {
 border-bottom: 1px solid rgb(172 125 32 / 28%);
}

.site-header__menu-list a {
 display: grid;
 grid-template-columns: 34px minmax(0, 1fr) 24px;
 align-items: center;
 gap: 16px;
 min-height: 62px;
 padding: 8px 6px;
 transition: color .25s ease, padding .25s ease, background-color .25s ease;
}

.site-header__menu-list a:hover,
.site-header__menu-list a:focus-visible {
 padding-inline: 14px;
 color: var(--color-brand-gold);
 background: rgb(255 255 255 / 42%);
}

.site-header__menu-icon {
 display: block;
 width: 32px;
 height: 32px;
 object-fit: contain;
}

.site-header__menu-label {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 16px;
 min-width: 0;
}

.site-header__menu-label strong {
 font-size: var(--font-size-24);
 font-weight: var(--font-weight-bold);
 line-height: 1.45;
 letter-spacing: .04em;
}

.site-header__menu-label small {
 color: rgb(51 51 51 / 62%);
 font-family: var(--font-family-base);
 font-size: var(--font-size-12);
 line-height: 1.3;
 letter-spacing: .08em;
 text-transform: uppercase;
 white-space: nowrap;
}

.site-header__menu-arrow {
 color: var(--color-brand-gold);
 font-size: var(--font-size-18);
 text-align: right;
}

.site-header__menu-contact {
 box-sizing: border-box;
 padding: clamp(24px, 3vw, 38px);
 border: 1px solid rgb(255 255 255 / 78%);
 border-radius: 28px;
 background: rgb(255 255 255 / 68%);
 box-shadow: var(--shadow-card);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}

.site-header__menu-contact h2 {
 margin: 0;
 font-size: var(--font-size-36);
 font-weight: var(--font-weight-bold);
 line-height: 1.4;
 letter-spacing: .06em;
}

.site-header__menu-message {
 margin: 12px 0 22px;
 font-size: var(--font-size-14);
 line-height: 1.8;
}

.site-header__menu-actions {
 display: grid;
 gap: 10px;
}

.site-header__menu-action {
 box-sizing: border-box;
 display: grid;
 grid-template-columns: auto minmax(0, 1fr) auto;
 align-items: center;
 gap: 12px;
 min-height: 66px;
 padding: 10px 16px;
 border: 1px solid transparent;
 border-radius: 14px;
 transition: transform .25s ease, box-shadow .25s ease;
}

.site-header__menu-action:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgb(77 47 30 / 13%);
}

.site-header__menu-action img {
 display: block;
 object-fit: contain;
}

.site-header__menu-action-copy {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.site-header__menu-action strong {
 font-size: var(--font-size-16);
 font-weight: var(--font-weight-bold);
 line-height: 1.35;
}

.site-header__menu-action small {
 font-size: var(--font-size-12);
 line-height: 1.4;
}

.site-header__menu-action--reservation {
 color: var(--color-reservation-ink);
 border: 2px solid var(--color-accent-pink-border);
 background: var(--background-reservation);
 box-shadow: none;
}

.site-header__menu-action--reservation:hover {
 transform: none;
 box-shadow: none;
}

.site-header__menu-action--reservation:active {
 transform: none;
 box-shadow: none;
}

.site-header__menu-action--reservation .site-header__menu-action-copy strong {
 color: var(--color-reservation-ink);
 font-weight: 700;
}

.site-header__menu-action--reservation img {
 filter: brightness(0) saturate(100%) invert(35%) sepia(88%) saturate(2968%) hue-rotate(322deg) brightness(96%) contrast(99%);
}

.site-header__menu-action--phone {
 color: var(--color-brand-gold);
 border-color: rgb(172 125 32 / 50%);
 background: rgb(255 255 255 / 78%);
}

.site-header__menu-action--line {
 color: #237c38;
 border-color: rgb(35 124 56 / 38%);
 background: rgb(255 255 255 / 78%);
}

.site-header__menu-line-icon {
 width: 38px;
 color: #35b94b;
 font-size: var(--font-size-30);
 line-height: 1;
 text-align: center;
}

.site-header__menu-support {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 20px;
 margin: 22px 0 0;
 padding: 18px 0 0;
 border-top: 1px solid rgb(172 125 32 / 22%);
 list-style: none;
}

.site-header__menu-support a {
 display: flex;
 align-items: center;
 gap: 5px;
 font-size: var(--font-size-12);
 text-decoration: underline;
 text-decoration-color: rgb(51 51 51 / 28%);
 text-underline-offset: .3em;
}

html.has-header-menu, html.has-header-menu body {
 overflow: hidden;
}

body.admin-bar .site-header {
 top: 32px;
}

@media (max-width: 1199px) {
 .site-header {
  --header-height: 70px;
 }

 .site-header__inner {
  max-width: none;
  padding-inline: 15px;
  gap: 20px;
 }

 .site-header__nav {
  display: none;
 }

 .site-header__line {
  display: none;
 }

 .site-header__controls {
  gap: clamp(18px, 2.5vw, 30px);
 }

 .site-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 38px;
  width: 38px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-menu-toggle);
  cursor: pointer;
 }

 .site-header__lines {
  position: relative;
  display: block;
  width: 32px;
  height: 24px;
 }

 .site-header__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
 }

 .site-header__lines span:nth-child(1) {
  top: 0;
 }

 .site-header__lines span:nth-child(2) {
  top: calc(50% - 1.5px);
 }

 .site-header__lines span:nth-child(3) {
  bottom: 0;
 }

 .site-header__toggle-label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-12);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  letter-spacing: 2px;
  padding-left: 2px;
 }

 .is-open .site-header__lines span:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
 }

 .is-open .site-header__lines span:nth-child(2) {
  opacity: 0;
 }

 .is-open .site-header__lines span:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
 }
}

/* 小型タブレット（768〜980px）とスマホ */
@media (max-width: 980px) {
 .site-header__phone { display: none; }
}

@media (max-width: 1199px) {

 .site-header__menu {
  padding: calc(var(--header-height) + 28px) clamp(18px, 5vw, 42px) max(32px, env(safe-area-inset-bottom));
 }

 .site-header__menu-inner {
  min-height: 0;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 32px;
 }

 .site-header__menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
 }

 .site-header__menu-list a {
  min-height: 58px;
 }

 .site-header__menu-label {
  display: block;
 }

 .site-header__menu-label strong,
 .site-header__menu-label small {
  display: block;
 }

 .site-header__menu-label strong {
  font-size: var(--font-size-16);
 }

 .site-header__menu-label small {
  margin-top: 2px;
  font-size: var(--font-size-12);
 }

 .site-header__menu-contact {
  width: 100%;
 }
}

/* PCは余白・文字を連続的に拡大し、1500pxでの段差をなくす。 */
@media (min-width: 1200px) {
 .site-header__inner { padding-inline: clamp(20px, calc(-13.333px + 2.77778vw), 40px); gap: clamp(14px, calc(-2.667px + 1.38889vw), 24px); }
 .site-header__controls { gap: clamp(10px, calc(-30px + 3.33333vw), 34px); }
 .site-header__nav > ul { gap: clamp(14px, calc(-12.667px + 2.22222vw), 30px); font-size: var(--font-size-16); }
 .site-header__languages { margin-inline: clamp(4.2px, calc(-12.133px + 1.36111vw), 14px); }
 .site-header__reservation, .site-header__line { gap: clamp(5px, calc(0px + .41667vw), 8px); padding: 8px clamp(10px, calc(3.333px + .55556vw), 14px); font-size: var(--font-size-14); }
 .site-header__line { margin-left: clamp(-22px, calc(26px - 2.5vw), -4px); }
 .site-header__phone small { font-size: var(--font-size-12); }
 .site-header__phone strong { font-size: var(--font-size-21); }
}

@media (max-width: 782px) {
 body.admin-bar .site-header {
  top: 46px;
 }
}

@media (max-width: 767px) {
 .site-header {
  --header-height: clamp(50px, calc(35.683px + 4.4743vw), 70px);
 }

 .site-header__inner {
  padding-inline: 10px 15px;
  gap: 10px;
 }

 .site-header__logo {
  flex-basis: clamp(166px, 51vw, 360px);
  min-width: 0;
  font-size: var(--font-size-16);
 }

 .site-header__brand {
  gap: clamp(5px, 1.15vw, 9px);
  width: auto;
 }

 .site-header__logo img {
  width: calc(var(--header-height) - 8px);
  height: calc(var(--header-height) - 8px);
 }

 .site-header__controls {
  gap: clamp(14px, 5.5vw, 42px);
 }

 .site-header__languages {
  font-size: var(--font-size-18);
  gap: 3px;
 }

 .site-header__toggle {
  width: clamp(30px, 5vw, 38px);
  flex-basis: clamp(30px, 5vw, 38px);
 }

 .site-header__lines {
  width: clamp(27px, 4.6vw, 35px);
 }

 .site-header__toggle-label {
  font-size: var(--font-size-12);
 }

 .site-header__menu {
  padding-top: calc(var(--header-height) + 24px);
 }
}

/* 予約導線は下部の固定CTAにもあるため、幅の狭い端末ではロゴの可読性を優先する。 */
@media (max-width: 560px) {
 .site-header__logo {
  flex: 1 1 auto;
 }

 .site-header__controls {
  flex: 0 0 auto;
  margin-left: auto;
 }

 .site-header__controls > .site-header__reservation {
  display: none;
 }
}

@media (min-width: 481px) and (max-width: 767px) {
 .site-header__logo {
  flex-basis: 42vw;
 }

 .site-header__controls {
  gap: clamp(10px, calc(3.273px + 1.3986vw), 14px);
 }

 .site-header__languages {
  margin-inline: 0;
  font-size: var(--font-size-14);
 }

 .site-header__controls > .site-header__reservation {
  font-size: var(--font-size-12);
  padding-inline: clamp(8px, calc(4.636px + .6993vw), 10px);
  gap: clamp(5px, calc(-.045px + 1.04895vw), 8px);
 }
}



@media (max-width: 480px) {
 .site-header__lines {
  height: clamp(20px, calc(18px + 0.625vw), 21px);
 }

 .is-open .site-header__lines span:nth-child(1) {
  transform: translateY(clamp(8.5px, calc(7.5px + 0.3125vw), 9px)) rotate(45deg);
 }

 .is-open .site-header__lines span:nth-child(3) {
  transform: translateY(clamp(-9px, calc(-7.5px - 0.3125vw), -8.5px)) rotate(-45deg);
 }

 .site-header__languages {
  font-size: var(--font-size-14);
 }

 .site-header__logo {
  font-size: var(--font-size-12);
 }

 .site-header__menu {
  padding-inline: 16px;
 }

 .site-header__menu-inner {
  gap: 26px;
 }

 .site-header__menu-eyebrow {
  margin-bottom: 8px;
 }

 .site-header__menu-list {
  grid-template-columns: 1fr;
  gap: 0;
 }

 .site-header__menu-list a {
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  min-height: 54px;
  gap: 10px;
 }

 .site-header__menu-icon {
  width: 26px;
  height: 26px;
 }

 .site-header__menu-label {
  display: flex;
 }

 .site-header__menu-label strong {
  font-size: var(--font-size-16);
 }

 .site-header__menu-label small {
  margin-top: 0;
  font-size: var(--font-size-12);
 }

 .site-header__menu-contact {
  padding: 20px;
  border-radius: 20px;
 }

 .site-header__menu-contact h2 {
  font-size: var(--font-size-24);
 }

 .site-header__menu-message {
  margin: 8px 0 16px;
  font-size: var(--font-size-12);
 }

 .site-header__menu-action {
  min-height: 60px;
  padding: 8px 12px;
 }

 .site-header__menu-action strong {
  font-size: var(--font-size-16);
 }
}

/* English mobile header: keep the longer wordmark clear of JP / EN and MENU. */
@media (min-width: 320px) and (max-width: 399px) {
 .site-header--en .site-header__inner {
  padding-inline: 8px 10px;
  gap: 6px;
 }

 .site-header--en .site-header__logo {
  font-size: clamp(9px, 2.65vw, 10.5px);
 }

 .site-header--en .site-header__brand {
  gap: 4px;
 }

 .site-header--en .site-header__brand-caption {
  padding-inline: .35em;
  letter-spacing: .04em;
 }

 .site-header--en .site-header__brand-name {
  justify-content: flex-start;
  gap: .25em;
 }

 .site-header--en .site-header__brand-name strong {
  letter-spacing: .01em;
 }

 .site-header--en .site-header__controls {
  gap: clamp(6px, 2vw, 8px);
 }

 .site-header--en .site-header__languages {
  gap: 2px;
  font-size: var(--font-size-12);
 }

 .site-header--en .site-header__toggle {
  width: 28px;
  flex-basis: 28px;
 }

 .site-header--en .site-header__lines {
  width: 26px;
 }

 .site-header--en .site-header__toggle-label {
  padding-left: 1px;
  font-size: 10px;
  letter-spacing: 1px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .site-header, .site-header__lines span, .site-header__menu {
  transition: none;
 }
}