@charset "UTF-8";

/* --------------------------------------------------------------------------
   デザイントークン
   -------------------------------------------------------------------------- */
:root {
  --color-back: #F6F1E8;
  --color-accent: #37421C;
  --color-accent-hover: #55632F;
  --color-sumi: #2C2C2C;
  --color-gray: #929292;
  --color-border: #DFD2CD;
  --color-white: #FFFFFF;

  --font-en: 'Jost', sans-serif;
  --font-ja: 'Noto Serif JP', serif;      /* 見出し・小見出し */
  --font-ja-sans: 'Noto Sans JP', sans-serif; /* 本文 */

  --frame: 90rem;   /* 1440px */
  --content: 75rem; /* 1200px */

  --ease: cubic-bezier(.62, .02, .2, 1);
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
}

:where(ul, ol) {
  list-style: none;
}

:where(img) {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

:where(a) {
  text-decoration: none;
  color: inherit;
}

:where(main, picture, iframe) {
  display: block;
}

:where(button) {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

:where(em, i, b, strong) {
  font-style: normal;
  font-weight: inherit;
}

:where(html) {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ja-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--color-sumi);
  background: var(--color-back);
  -webkit-font-smoothing: antialiased;
  line-break: strict;
}

@media (width >= 751px) {
  body {
    min-width: var(--frame);
  }

  .gutter {
    padding-inline: calc((100% - var(--content)) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   タイポグラフィ
   -------------------------------------------------------------------------- */

:where(h1, h2, h3) {
  font-family: var(--font-ja);
}

.heading {
  display: flex;
  flex-direction: column;
  gap: .25rem; /* 4px */
}

.heading-en {
  font-family: var(--font-en);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--color-accent);
}

@media (width >= 751px) {
  .heading-en {
    font-size: 3.625rem;
  }
}

@media (width <= 750px) {
  .heading-en {
    font-size: 9.0666666667vw; /* 34px */
  }
}

.heading-ja {
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--color-sumi);
}

@media (width >= 751px) {
  .heading-ja {
    font-size: .875rem;
  }
}

@media (width <= 750px) {
  .heading-ja {
    font-size: 3.4666666667vw; /* 13px */
  }
}

/* --------------------------------------------------------------------------
   共通コンポーネント
   -------------------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-white);
  letter-spacing: .06em;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
  }

  .booking-panel .btn-primary:hover {
    transform: none;
  }
}

@media (width >= 751px) {
  .btn-primary {
    height: 3.5rem;        /* 56px */
    padding-inline: 4rem;  /* 64px */
    font-size: 1rem;
    line-height: 1.8;
  }
}

@media (width <= 750px) {
  .btn-primary {
    height: 12.8vw;        /* 48px */
    padding-inline: 12.8vw; /* 48px */
    font-size: 3.7333333333vw; /* 14px */
    line-height: 1.9;
  }
}

@media (width >= 751px) {
  .sp-only {
    display: none !important;
  }
}

@media (width <= 750px) {
  .pc-only {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  color: var(--color-white);
}

#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 13.75rem;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .4s var(--ease);
}

#header.on-photo::before {
  opacity: 1;
}

#header .logo,
.lang-trigger,
.gnav li,
.nav-toggle span {
  transition: color .25s var(--ease), background-color .25s var(--ease);
}

#header .logo.is-light,
#header .lang-trigger.is-light,
#header .gnav li.is-light {
  color: var(--color-sumi);
}

#header.on-light .nav-toggle span {
  background: var(--color-sumi);
}

#header .logo {
  position: relative;
  flex: 0 0 auto;
}

#header .logo a {
  display: block;
}

#header .logo img {
  display: block;
  width: 15.375rem; /* 246px */
  height: auto;
}

#header .logo .logo-b {
  position: absolute;
  inset: 0;
  opacity: 0;
}

#header .logo .logo-w,
#header .logo .logo-b {
  transition: opacity .25s var(--ease);
}

#header .logo.is-light .logo-w { opacity: 0; }
#header .logo.is-light .logo-b { opacity: 1; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .75rem 1.25rem;
  background: var(--color-sumi);
  color: var(--color-white);
  font-size: .875rem;
}

.skip-link:focus {
  left: 0;
  z-index: 100;
}

@media (width >= 751px) {
  /* ヘッダーの中身は合計1335pxある。それより狭い窓では、余白と文字・ロゴを
     751pxで最小・1335pxでデザイン値になるよう直線で縮める（両端で収まれば途中も収まる） */
  #header {
    --hd-pad-x: clamp(1rem, calc(5.71px + 1.3699vw), 1.5rem);        /* 16 → 24 */
    --hd-gap: clamp(.75rem, calc(-24.01px + 4.7945vw), 2.5rem);       /* 12 → 40 */
    --hd-logo: clamp(8.5rem, calc(-5.46px + 18.8356vw), 15.375rem);   /* 136 → 246 */
    --hd-nav-gap: clamp(.625rem, calc(-13.15px + 3.0822vw), 1.75rem); /* 10 → 28 */
    --hd-font: clamp(.75rem, calc(6.86px + .6849vw), 1rem);           /* 12 → 16 */
    --hd-lang-w: clamp(3.5rem, calc(-64.88px + 16.0959vw), 9.375rem); /* 56 → 150 */
    --hd-lang-font: clamp(.75rem, calc(9.43px + .3425vw), .875rem);   /* 12 → 14 */
    --hd-res-px: clamp(.75rem, calc(-3.43px + 2.0548vw), 1.5rem);     /* 12 → 24 */
    --hd-res-py: clamp(.75rem, calc(6.86px + .6849vw), 1rem);         /* 12 → 16 */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-gap);
    padding: 1rem var(--hd-pad-x);
  }

  #header .logo img {
    width: var(--hd-logo);
  }

  .header-side {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--hd-gap);
  }

  .header-reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hd-res-py) var(--hd-res-px);
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: var(--hd-font);
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .35s var(--ease);
  }

  .lang {
    position: relative;
    z-index: 1;
  }

  .lang-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: var(--hd-lang-w);
    color: var(--color-white);
  }

  .lang-globe {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1;
  }

  .lang-arrow {
    width: .625rem;
    height: .625rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
  }

  .lang-code {
    font-family: var(--font-en);
    font-size: var(--hd-lang-font);
    line-height: 1.4;
    letter-spacing: .02em;
  }

  .lang-menu {
    position: absolute;
    top: calc(100% + .625rem);
    right: 0;
    z-index: 2;
    display: none;
    min-width: 8.25rem;
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, .2);
  }

  .lang.is-open .lang-menu {
    display: block;
  }

  .lang-item {
    display: flex;
    gap: .75rem;
    padding: .75rem 1.125rem;
    font-size: .75rem;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .72);
    border-left: 2px solid transparent;
  }

  .lang-item.is-current {
    color: var(--color-white);
    border-left-color: var(--color-white);
  }

  .lang-item.is-disabled {
    opacity: .45;
    cursor: default;
  }

  .gnav ul {
    display: flex;
    align-items: center;
    gap: var(--hd-nav-gap);
  }

  .gnav a {
    font-family: var(--font-en);
    font-size: var(--hd-font);
    line-height: 1.4;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .gnav li {
    position: relative;
  }

  .gnav li::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transition: opacity .3s var(--ease);
  }

  .gnav li:has(a.is-active)::after {
    opacity: 1;
  }

  .gnav li.is-active::after {
    opacity: 1;
  }

  .nav-toggle,
  .sp-nav {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .header-reserve:hover {
    background: var(--color-accent-hover);
  }
}

@media (width <= 750px) {
  #header {
    display: flex;
    align-items: center;
    gap: 4.2666666667vw;
    height: 12vw; /* 45px */
    padding: 2.1333333333vw 2.1333333333vw 0 4.2666666667vw;
  }

  #header .logo img {
    width: 40vw; /* 150px */
  }

  .header-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.1333333333vw;
  }

  .header-reserve,
  .gnav {
    display: none;
  }

  .lang {
    position: relative;
  }

  .lang-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.1333333333vw;
    color: var(--color-white);
  }

  .lang-globe { width: 4.2666666667vw; height: 4.2666666667vw; fill: none; stroke: currentColor; stroke-width: 1.1; }
  .lang-arrow { width: 2.6666666667vw; height: 2.6666666667vw; fill: none; stroke: currentColor; stroke-width: 1.2; }

  .lang-code {
    font-family: var(--font-en);
    font-size: 3.7333333333vw; /* 14px */
    line-height: 1.4;
    letter-spacing: .02em;
  }

  .lang-menu {
    position: absolute;
    top: calc(100% + 2.1333333333vw);
    right: 0;
    display: none;
    min-width: 32vw;
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, .2);
  }

  .lang.is-open .lang-menu { display: block; }

  .lang-item {
    display: flex;
    gap: 3.2vw;
    padding: 3.2vw 4.2666666667vw;
    font-size: 3.2vw;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .72);
    border-left: 2px solid transparent;
  }

  .lang-item.is-current { color: var(--color-white); border-left-color: var(--color-white); }
  .lang-item.is-disabled { opacity: .45; }

  .nav-toggle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.8666666667vw; /* 7px */
    width: 12.8vw;
    height: 12.8vw;
    padding-inline: 2.1333333333vw;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: #F5F5F5;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(2.1333333333vw) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-2.1333333333vw) rotate(-45deg); }

  /* --- SPナビ展開 --- */
  .sp-nav {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(8.5333333333vw, 3.94vh, 2rem); /* 32px */
    gap: min(8.5333333333vw, 3.94svh, 2rem);
    padding-top: min(21.3333333333vw, 9.85vh, 5rem); /* 80px */
    padding-top: min(21.3333333333vw, 9.85svh, 5rem);
    padding-bottom: min(19.2vw, 8.87vh, 4.5rem); /* 72px */
    padding-bottom: min(19.2vw, 8.87svh, 4.5rem);
    background: rgba(44, 44, 44, .97);
  }

  html.is-nav-open #header .logo,
  html.is-nav-open .nav-toggle {
    position: relative;
    z-index: 1;
    color: var(--color-white);
  }

  html.is-nav-open #header .nav-toggle span {
    background: #F5F5F5;
  }

  html.is-nav-open #header .logo .logo-w { opacity: 1; }
  html.is-nav-open #header .logo .logo-b { opacity: 0; }

  html.is-nav-open .lang {
    visibility: hidden;
  }

  .sp-nav[hidden] { display: none; }

  .sp-nav nav { width: 100%; }

  .sp-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(8.5333333333vw, 3.94vh, 2rem);
    gap: min(8.5333333333vw, 3.94svh, 2rem);
  }

  .sp-nav a {
    font-family: var(--font-en);
    font-size: 5.3333333333vw; /* 20px */
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--color-white);
    white-space: nowrap;
  }

  .sp-nav-reserve {
    height: auto;
    padding-block: 4.2666666667vw; /* 16px */
    line-height: 1.4;
  }

  html.is-nav-open,
  html.is-nav-open body { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #303030;
  color: var(--color-white);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 32px */
  white-space: nowrap;
}

.footer-brand > p:first-child {
  order: 2;
  color: var(--color-gray);
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.footer-logo {
  order: 1;
}

.footer-logo img {
  display: block;
  width: 15.375rem; /* 246px */
  height: auto;
}

.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  justify-items: start;
  gap: 1rem 1.5rem; /* 16 / 24 */
}

.footer-nav li,
.footer-sns li {
  display: flex;
  line-height: 1.4;
}

.footer-nav a {
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}

.footer-sns {
  display: flex;
  gap: 2rem;
}

.footer-sns img {
  width: 1.5rem;
  height: 1.5rem;
}

.footer-sister a {
  display: inline-flex;
  align-items: center;
  gap: .375rem; /* 6px */
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .3s var(--ease);
}

.footer-sister img {
  width: 1rem;
  height: 1rem;
}

.footer-rule {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .12);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--color-gray);
  white-space: nowrap;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.footer-copyright {
  font-family: var(--font-en);
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: .02em;
}

.footer-nav a,
.footer-legal a {
  transition: opacity .3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover,
  .footer-legal a:hover,
  .footer-sister a:hover {
    opacity: .7;
  }
}

@media (width >= 751px) {
  #footer {
    gap: 3rem;          /* 48px */
    padding-top: 6rem;  /* 96px */
    padding-bottom: 3rem;
  }

  .footer-top,
  .footer-bottom {
    padding-inline: 3.5rem; /* 56px */
    gap: 3.5rem; /* 56px */
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem; /* 24px */
    width: auto;
    flex: 0 0 auto;
  }

  /* --------------------------------------------------------------------------
     狭い窓での追従
     -------------------------------------------------------------------------- */
  .footer-brand {
    min-width: 0;
    white-space: normal;
  }

  .footer-legal {
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
  }

  .footer-copyright {
    flex: 0 0 auto;
  }
}

/* --- SPフッター --- */
@media (width <= 750px) {
  #footer {
    gap: 8.5333333333vw;   /* 32px */
    padding-top: 14.9333333333vw;  /* 56px */
    padding-bottom: 12.8vw; /* 48px */
    background: var(--color-sumi);
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 8.5333333333vw;
    padding-inline: 6.4vw; /* 24px */
  }

  .footer-brand {
    align-items: center;
    gap: 2.9333333333vw; /* 11px */
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .footer-brand > p:first-child {
    order: 2;
    font-size: 3.4666666667vw; /* 13px */
  }

  .footer-brand > p:first-child br { display: none; }

  .footer-logo img {
    width: 40vw; /* 150px */
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8.5333333333vw; /* 32px */
    width: 100%;
  }

  .footer-sister a {
    font-size: 3.7333333333vw; /* 14px */
  }

  .footer-nav ul {
    justify-content: center;
    justify-items: center;
    gap: 4.2666666667vw 6.4vw; /* 16 / 24 */
  }

  .footer-nav a {
    font-size: 4.2666666667vw; /* 16px */
  }

  .footer-sns {
    justify-content: center;
    gap: 10.6666666667vw; /* 40px */
  }

  .footer-sns img { width: 6.4vw; height: 6.4vw; }

  .footer-bottom {
    flex-direction: column;
    gap: 6.4vw; /* 24px */
    white-space: normal;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8666666667vw 6.4vw; /* 7 / 24 */
    padding-inline: 6.4vw;
    font-size: 3.4666666667vw;
  }

  .footer-copyright {
    font-size: 3.4666666667vw; /* 13px */
  }
}