/* Shared header and footer, based on index.html / private-booking.html. */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 2rem;
z-index: 100;
display: flex;
justify-content: flex-end;
align-items: center;
mix-blend-mode: difference;
}
.nav-logo-link {
display: none;
}
.nav-logo {
height: 22px;
filter: invert(1);
}
.nav-menu {
display: none;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
}
.nav-menu li a {
font-family: var(--font-en);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease;
}
.nav-menu li a:hover {
color: var(--color-accent);
}
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 101;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: #ffffff;
transition: all 0.3s ease;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
background: rgba(8, 12, 20, 0.98);
z-index: 200;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
padding: calc(5rem + env(safe-area-inset-top)) 1.5rem calc(2rem + env(safe-area-inset-bottom));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.4s ease;
}
.mobile-menu-close {
position: fixed;
top: calc(1rem + env(safe-area-inset-top));
right: calc(1.5rem + env(safe-area-inset-right));
z-index: 1;
font-size: 2.5rem;
color: #ffffff;
background: transparent;
border: none;
cursor: pointer;
line-height: 1;
padding: 0.5rem;
}
.mobile-menu-list {
list-style: none;
padding: 0;
margin: auto 0 0;
width: min(100%, 28rem);
flex: 0 0 auto;
text-align: center;
}
.mobile-menu-list li {
margin: 1.5rem 0;
}
.mobile-menu-list li a {
font-family: var(--font-en);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.15em;
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.mobile-menu-list li a:hover {
color: var(--color-accent);
}
.mobile-menu-sns {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
margin-bottom: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex: 0 0 auto;
}
.mobile-menu-sns a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: #fff;
text-decoration: none;
transition: background 0.3s ease, transform 0.3s ease;
}
.mobile-menu-sns a:hover {
transform: scale(1.1);
}
.mobile-menu-sns a.sns-line:hover { background: #06c755; }
.mobile-menu-sns a.sns-instagram:hover { background: #e1306c; }
.mobile-menu-sns a.sns-x:hover { background: #333; }
.mobile-menu-sns a.sns-tiktok:hover { background: #000; }
.mobile-menu-sns svg {
width: 20px;
height: 20px;
fill: currentColor;
}
@media (min-width: 769px) {
.nav {
padding: 1.2rem 3rem;
justify-content: flex-end;
}
.nav-logo-link {
display: none;
}
.nav-menu {
display: flex;
gap: clamp(0.9rem, 1.8vw, 2rem);
}
.nav-toggle {
display: none;
}
.nav-menu li a {
font-size: 0.85rem;
}
}
footer {
padding: 3rem 2rem;
padding-bottom: calc(3rem + 5rem);
text-align: center;
background: #111827;
border-top: 1px solid var(--border-silver);
scroll-snap-align: end;
position: relative;
z-index: 1;
}
.footer-links {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.footer-links a {
font-size: 0.75rem;
color: #dcdcec;
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #fff;
}
footer p {
font-family: var(--font-en);
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.1em;
}


.nav, .mobile-menu, footer { line-height: 1.8; }
.nav :is(a, button):focus-visible,
.mobile-menu :is(a, button):focus-visible,
.footer-links a:focus-visible { outline: 2px solid #e8c547; outline-offset: 5px; }
.footer-links a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 769px) { .nav { padding: 2rem 3rem; } }
@media (min-width: 769px) and (max-width: 1000px) {
  .nav { padding-inline: 1.5rem; }
  .nav-menu { gap: .85rem; }
  .nav-menu li a { font-size: .75rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .nav *, .mobile-menu, .mobile-menu *, .footer-links a { transition: none !important; }
}