@charset "UTF-8";
/* ============================================================
   layout.css ― 骨格（ヘッダー／固定ヘッダー／全画面メニュー／
                 ページヘッダー／予約CTA帯／フッター／セクションの枠）

   ★レスポンシブはCSSだけで切り替える（CONFLICTS.md 衝突3）。
     PC用・SP用の両方を常にHTMLへ出力し、display で切り替える。
     JSは「is-open の付け外し」と「固定ヘッダーのスクロール連動」だけ。
     唯一の分岐点は 1279px。
   ============================================================ */

/* ============================================================
   1. ヘッダー（共通の器）
   ============================================================ */
.l-header {
  position: relative;
  z-index: 40;
  background: var(--base);
  border-bottom: var(--border);
}

/* ── 1-1. デスクトップ（1280px以上） ───────── */
.l-header__desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* 書き出しは「内容52px＋上下14pxの余白」で合計80px。
     こちらは box-sizing: border-box なので、合計値で書く（screens/90-header-pc.webp）*/
  min-height: 80px;
  padding: 14px clamp(16px, 4vw, 36px) 14px clamp(200px, 25vw, 270px);
}

/* 白いロゴ板。★初期状態を「可視」にし、アニメーションは付加にする。
   （書き出しは clip-path で隠れており、キーフレームを落とすと永久に出ない）*/
.l-plate {
  position: absolute;
  left: clamp(16px, 4vw, 48px);
  top: 0;
  z-index: 45;
  width: clamp(136px, 15vw, 172px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 22px 14px 24px;
  background: var(--white);
  border: 1px solid var(--line-pale);
  border-top: none;
  box-shadow: var(--shadow-plate);
  transform-origin: top center;
  animation: plateReveal 1.5s cubic-bezier(.16, .84, .3, 1) .15s both;
}
.l-plate__mark { width: 100%; height: 74px; object-fit: contain; }
.l-plate__mark,
.l-plate__en,
.l-plate__ja { animation: plateFade 1.3s cubic-bezier(.22, .61, .36, 1) both; }
.l-plate__mark { animation-delay: .75s; }
.l-plate__en   { animation-delay: .95s; }
.l-plate__ja   { animation-delay: 1.15s; }

.l-plate__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.l-plate__en {
  display: block;
  font-family: var(--font-en);
  font-size: 23px;
  font-weight: var(--fw-medium);
  letter-spacing: .22em;
  padding-left: .22em;
  color: var(--ink);
}
.l-plate__ja {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-en);
  padding-left: var(--ls-en);
  color: var(--ink-weak);
}
.l-plate__link:hover .l-plate__en,
.l-plate__link:hover .l-plate__ja { color: var(--gold-deep); }

/* グローバルナビ（英字＋和文の2段） */
.l-gnav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.2vw - 16.4px, 30px);
  margin: 0 auto;
  white-space: nowrap;
}
.l-gnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.l-gnav__en {
  font-family: var(--font-en);
  font-size: var(--fs-14);
  letter-spacing: .18em;
  color: var(--ink);
}
.l-gnav__ja {
  font-size: var(--fs-12);
  letter-spacing: .04em;
  color: var(--ink-weak);
}
.l-gnav__item:hover .l-gnav__en,
.l-gnav__item:hover .l-gnav__ja { color: var(--gold-deep); }
/* 現在ページ */
.l-gnav__item[aria-current] { border-bottom-color: var(--gold-deep); }
.l-gnav__item[aria-current] .l-gnav__en { color: var(--gold-deep); }

/* ヘッダー右（電話＋WEB予約） */
.l-header__right {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}
.l-header__tel { text-align: right; }
.l-header__tel-num {
  font-family: var(--font-en);
  font-size: 19px;
  letter-spacing: var(--ls-body-wide);
  color: var(--ink);
}
.l-header__tel-note {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
  color: var(--ink-weak);
}

/* ── 1-2. モバイル（1279px以下） ─────────── */
.l-header__mobile {
  display: none;   /* 既定はデスクトップ。1279px以下で入れ替える */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 同上。内容60px＋上下12px＝84px（screens/93-header-sp.webp）*/
  min-height: 84px;
  padding: 12px 16px;
}
.l-header__logo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l-header__logo-en {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-en);
  color: var(--ink);
}
.l-header__logo-ja {
  font-family: var(--font-head);
  font-size: var(--fs-12);
  letter-spacing: .16em;
  color: var(--ink-weak);
}
.l-header__logo:hover .l-header__logo-en,
.l-header__logo:hover .l-header__logo-ja { color: var(--gold-deep); }

.l-header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   2. 固定ヘッダー（スクロール連動・PC/SP共通）
   ★隠れている間は visibility: hidden にして、タブ順から外す。
   ============================================================ */
.l-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  min-height: var(--h-fixed-header);
  padding: 0 clamp(12px, 3vw, 32px) 0 0;
  background: var(--fixed-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-fixed);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s .55s;
}
.l-fixed.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s 0s;
}
.l-fixed__tile {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-fixed-header);
  flex: 0 0 var(--h-fixed-header);
  background: var(--gold);
  font-family: var(--font-en);
  font-size: 27px;
  letter-spacing: .02em;
  color: var(--white);
}
.l-fixed__tile:hover { background: var(--gold-deep-hover); color: var(--white); }
.l-fixed__brand {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-en);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.l-fixed__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 20px);
  margin: 0 auto;
  min-width: 0;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-body-wide);
  white-space: nowrap;
}
.l-fixed__nav a { color: var(--ink); }
.l-fixed__nav a[aria-current] { color: var(--gold-deep); }
.l-fixed__tools {
  display: none;   /* 1279px以下で出す */
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ============================================================
   3. 全画面メニュー（ドロワー）
   ★中身は最初からHTMLに置き、CSSで隠す。JSは is-open の付け外しだけ。
   ============================================================ */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  padding: 16px 20px 40px;
  background: var(--base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
}
.l-drawer__brand {
  font-family: var(--font-en);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-en);
  color: var(--ink);
}
.l-drawer__nav {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
.l-drawer__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 60px;
  padding: 14px 0;
  border-bottom: var(--border);
}
.l-drawer__en {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: var(--ls-en);
  color: var(--gold-deep);
  min-width: 76px;
}
.l-drawer__ja {
  font-size: var(--fs-14);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.l-drawer__item:hover .l-drawer__ja { color: var(--gold-deep); }
.l-drawer__item[aria-current] .l-drawer__ja { color: var(--gold-deep); }
.l-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

/* ============================================================
   4. ページヘッダー（下層13ページで共有）
   ============================================================ */
.l-pagehero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--base);
  border-bottom: var(--border);
}
.l-pagehero__photo {
  flex: 1.1 1 320px;
  min-width: 0;
  min-height: clamp(220px, 26vw, 320px);
}
.l-pagehero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.l-pagehero__body {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(112px, 12vw, 132px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 56px);
}
.l-pagehero__en {
  font-family: var(--font-en);
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-en);
  color: var(--ink);
  line-height: 1.1;
}
.l-pagehero__rule {
  width: 48px;
  height: var(--rule-h);
  background: var(--gold-light);
}
.l-pagehero__ja {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .22em;
  color: var(--ink-weak);
}
.l-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head);
}
.l-breadcrumb a { color: var(--ink-weak); }
.l-breadcrumb a:hover { color: var(--gold-deep); }
/* ⚠ 区切りと現在地は「地色の上」。--ink-faint-dark は濃色帯専用なので使わない
   （地色の上では 2.03:1 になる）。--ink-weak ＝ 4.67:1 */
.l-breadcrumb__sep,
.l-breadcrumb__current { color: var(--ink-weak); }

/* ============================================================
   5. 予約CTA帯（フッター上・全ページ共通）
   ============================================================ */
.l-reserve {
  background: var(--ink);
  padding: clamp(64px, 9vw, 96px) var(--pad-section-x);
}
.l-reserve__inner {
  max-width: var(--w-cta);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.l-reserve__en {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: var(--ls-en-xx);
  color: var(--gold-light);
}
.l-reserve__title {
  font-family: var(--font-head);
  font-size: clamp(21px, 2.8vw, 26px);
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  color: var(--base);
  line-height: var(--lh-head);
}
.l-reserve__lead {
  font-size: var(--fs-14);
  font-weight: var(--fw-light);
  line-height: 2.2;
  letter-spacing: var(--ls-body-wide);
  color: var(--ink-faint-dark);
}
.l-reserve__actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin-top: 8px;
}

/* ============================================================
   6. フッター
   ============================================================ */
.l-footer {
  background: var(--base);
  padding: clamp(44px, 7vw, 64px) var(--pad-section-x) 40px;
}
.l-footer__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.l-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l-footer__name {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.l-footer__name-en {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: var(--fw-medium);
  letter-spacing: .22em;
  color: var(--ink);
}
.l-footer__name-ja {
  font-family: var(--font-head);
  font-size: var(--fs-12);
  letter-spacing: .18em;
  color: var(--ink-weak);
}
.l-footer__tagline {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body-wide);
  color: var(--ink-weak);
}
.l-footer__address {
  font-size: var(--fs-12);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
  line-height: 2;
  color: var(--ink-weak);
  margin-top: 8px;
}
.l-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, auto));
  gap: 14px 40px;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-head-wide);
}
.l-footer__nav a[aria-current] { color: var(--gold-deep); }
.l-footer__bottom {
  border-top: var(--border);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
}
/* ⚠ コピーライトは地色の上。--ink-faint-dark（#B7AC9E）だと 2.03:1 で読めない。
   --ink-weak ＝ 4.67:1 にする */
.l-footer__copy {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: .16em;
  color: var(--ink-weak);
}
.l-footer__pagetop {
  font-family: var(--font-en);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-en-x);
  color: var(--ink-weak);
}
.l-footer__pagetop:hover { color: var(--gold-deep); }

/* ============================================================
   7. セクションの枠（全ページ共通）
   ============================================================ */
.l-section {
  padding: var(--pad-section);
  border-top: var(--border);
}
.l-section--base  { background: var(--base); }
.l-section--white { background: var(--white); }
.l-section--first { border-top: none; }
.l-section--article { padding: clamp(56px, 9vw, 96px) var(--pad-section-x); }
.l-section__inner  { max-width: var(--w-content); margin: 0 auto; }
.l-section__inner--narrow { max-width: var(--w-narrow); margin: 0 auto; }
.l-section__inner--cta    { max-width: var(--w-cta);    margin: 0 auto; }

/* ============================================================
   8. ★唯一のブレークポイント（1279px）
      ここでヘッダーのPC/SPを入れ替える。他に @media は足さない。
   ============================================================ */
@media (max-width: 1279px) {
  .l-header__desktop { display: none; }
  .l-header__mobile  { display: flex; }
  .l-fixed__nav      { display: none; }
  /* ⚠ .c-btn の display:inline-flex に負けないよう、詳細度を上げておく */
  .l-fixed .l-fixed__cta { display: none; }
  .l-fixed__tools    { display: flex; }

  /* 全画面メニューはモバイル専用。1280px以上では is-open が付いていても出さない
     （JSで画面幅を見なくて済むように、可視の判断をCSSに寄せている）*/
  .l-drawer.is-open  { display: flex; }
  body.is-drawer-open { overflow: hidden; }

  /* ── 指で触る幅では、テキストリンクのタップ領域を44pxにする ──
     ★文字サイズは変えない。上下に余白を足して当たり判定だけ広げる。
     PC（1280px以上）の見た目は変えない（screens/ と同じまま）。
     ⚠ 本文中のインラインリンク（p / li の中）は対象外。
       行の中に埋まっているものを44pxにすると行送りが壊れる
       （WCAG 2.5.8 もインラインの例外を認めている）。
     決定：2026-08-21（HANDOFF_ISSUES.md 指摘#10 C案） */
  .l-footer__nav a,
  .l-footer__pagetop,
  .l-breadcrumb a,
  .c-more,
  .c-link-plain,
  .c-newsband__label,
  .c-newsband__item,
  .c-article__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* 44pxの箱が並ぶので、行間の空きは詰める */
  .l-footer__nav   { gap: 0 40px; }
  .c-newsband__list { gap: 0; }
  /* ⚠ flex になると文字と矢印の間の半角スペースが消えるので、gap で戻す */
  .l-footer__pagetop { gap: .35em; }
  .c-article__nav a  { gap: .4em; }
}