/* ============================================================
   Oceanfront Grill St.ELMO – ISHIGAKI –
   スクロール日没版: ページを読み進めると昼→夕→夜へ移ろう
   Brand palette: IVORY #F2EDE4 / OCEAN BLUE #1C7293 / AQUA #6FB3C4
                  WARM GOLD #C89B5A / OFF-WHITE #F5F5F5
   ============================================================ */
/* SPライトモード用: パレット変数を登録し、段階切替時にCSSトランジションで滑らかに補間する
   （連続JS補間は全ページ再計算がiOSで重い。lite-palette時はJSが昼/夕/夜の3値のみ設定） */
@property --bg { syntax: '<color>'; inherits: true; initial-value: rgb(250, 248, 243); }
@property --bg-alt { syntax: '<color>'; inherits: true; initial-value: rgb(242, 237, 228); }
@property --ink { syntax: '<color>'; inherits: true; initial-value: rgb(36, 52, 60); }
@property --ink-soft { syntax: '<color>'; inherits: true; initial-value: rgb(85, 101, 109); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: rgb(28, 114, 147); }
@property --card { syntax: '<color>'; inherits: true; initial-value: rgb(255, 253, 249); }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(36, 52, 60, .14); }
html.lite-palette {
  transition: --bg 1s ease, --bg-alt 1s ease, --ink 1s ease, --ink-soft 1s ease,
              --accent 1s ease, --card 1s ease, --line 1s ease;
}

:root {
  --ivory: #f2ede4;
  --offwhite: #f5f5f5;
  --ocean: #1c7293;
  --aqua: #6fb3c4;
  --gold: #c89b5a;
  --navy: #0f2531;
  --navy-2: #16323f;

  /* JSがスクロールに応じて連続的に上書きするセマンティックカラー（初期値=昼） */
  --bg: #faf8f3;
  --bg-alt: var(--ivory);
  --ink: #24343c;
  --ink-soft: #55656d;
  --accent: var(--ocean);
  --line: rgba(36, 52, 60, .14);
  --card: #fffdf9;

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --latin: "Marcellus", "Shippori Mincho", serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; }
/* 固定ヘッダーに隠れないアンカー位置 */
[id] { scroll-margin-top: 72px; }
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 2;
  font-size: 15px;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}
/* height:auto が無いと、width/height 属性を持つ画像が max-width で縮んだとき縦横比が崩れる */
img { max-width: 100%; height: auto; display: block; }

/* ---------- 日本語の折り返し ----------
   日本語は単語区切りが無く任意の位置で改行されるため、文節単位で折り返し、
   行末に1〜2文字だけ取り残される「孤立行」を避ける。
   Lunch / Dinner の各ページには同等の指定が既にある */
.sec-title, .sec-lead, .hero__catch, .concept__body, .concept__tagline,
.origin__body, .origin__lights-head, .menu__intro, .menu__facts dd,
.chef__bio, .chef__career-now, .chef__career-star,
.view__intro, .view__compare-note, .scene__item figcaption,
.info__lead, .info__note, .info__facts dd, .faq__q, .faq__a,
.cta__copy, .cta__sub, .cta__note, .insta-band__copy {
  word-break: auto-phrase;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
.pc { display: inline; }
.sp { display: none; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* 見出しの一文字ずつリビール（JSで .tchar に分割） */
.tchar {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1);
  transition-delay: var(--d, 0s);
}
.is-visible .tchar { opacity: 1; transform: none; }

/* 写真のマスクリビール（すべての写真で統一の開き方） */
.reveal .menu__img img,
.chef__visual.reveal .chef__portrait img,
.concept__visual.reveal .concept__photo img,
.info__left.reveal .info__photo img,
.scene__item.reveal img,
.view__piece.reveal img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s cubic-bezier(.6, .05, .3, 1) .1s, transform 1.2s ease;
}
.reveal.is-visible .menu__img img,
.chef__visual.reveal.is-visible .chef__portrait img,
.concept__visual.reveal.is-visible .concept__photo img,
.info__left.reveal.is-visible .info__photo img,
.scene__item.reveal.is-visible img,
.view__piece.reveal.is-visible img { clip-path: inset(0 0 0 0); }

/* コンセプトの丸皿アクセントはふわっと浮かぶ */
.concept__visual.reveal .concept__accent { opacity: 0; transform: scale(.6); transition: opacity .7s ease .6s, transform .7s cubic-bezier(.2, .6, .2, 1) .6s; }
.concept__visual.reveal.is-visible .concept__accent { opacity: 1; transform: scale(1); }


/* ---------- Section labels ---------- */
.sec-label {
  font-family: var(--latin);
  /* 3ページ共通の尺度。ランチは10.5px、ディナーは10pxだった */
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.sec-label::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--accent);
  margin-top: 10px;
  transition: width .9s cubic-bezier(.6, .05, .3, 1) .35s;
}
.reveal:not(.is-visible) .sec-label::after { width: 0; }
.sec-label--light { color: var(--aqua); }
.sec-label--light::after { background: var(--aqua); }
.sec-title {
  font-family: var(--serif);
  /* 3ページ共通の尺度。行間は1.9/1.65/1.5、字間は.1/.1/.05em と
     ページごとに違っていたため、ここに揃える */
  font-size: clamp(24px, 3.1vw, 34px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .09em;
}
.sec-title--light { color: var(--offwhite); }
.sec-title--latin { font-family: var(--latin); font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .12em; line-height: 1.5; }
.concept__tagline { margin-top: 10px; font-family: var(--serif); font-size: 13.5px; letter-spacing: .26em; color: var(--ink-soft); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 18px 44px;
  color: #fff;
  transition: background .5s ease, color .5s ease, padding .5s ease, box-shadow .5s ease;
}
.header.is-solid {
  /* backdrop-filterはスクロール中の全幅再ブラーが重いため不透明度で代替 */
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  color: var(--ink);
  padding: 12px 44px;
  box-shadow: 0 1px 0 var(--line);
}
.header--onlight { color: var(--ink); }

/* ロゴは絶対に潰さない。ヘッダーが詰まったときは flex がここを縮めて
   ワードマークの縦横比を崩すため、縮小の対象から外す（余白とナビで吸収する） */
.header__logo { display: flex; align-items: center; flex: 0 0 auto; }
.header__logo-img { display: block; width: auto; height: 54px; transition: height .5s ease; }
.header.is-solid .header__logo-img { height: 42px; }
/* 背景の明暗に合わせて白/濃色ロゴを出し分け（既定=舷窓が開いた暗い海の上=白） */
.header__logo-img--dark { display: none; }
.header--onlight .header__logo-img--white,
.header.is-solid .header__logo-img--white { display: none; }
.header--onlight .header__logo-img--dark,
.header.is-solid .header__logo-img--dark { display: block; }
/* モバイルメニュー展開中（濃紺背景）は白ロゴを優先 */
.header.menu-open .header__logo-img--white { display: block; }
.header.menu-open .header__logo-img--dark { display: none; }
/* 縮んでいいのはナビだけ。電話番号や予約ボタンが縮むと文字が折り返して
   箱が崩れるので、ロゴと同じく flex の縮小対象から外す */
.header__lang, .header__insta, .header__tel, .header__reserve { flex: 0 0 auto; }
.header__nav { margin-left: auto; min-width: 0; }
.header__nav ul { display: flex; gap: 34px; }
.header__nav a { display: flex; flex-direction: column; align-items: center; line-height: 1.5; }
.header__nav .en { font-family: var(--latin); font-size: 14px; letter-spacing: .22em; }
.header__nav .ja { font-size: 10px; letter-spacing: .2em; opacity: .75; }
.header__nav a:hover .en { color: var(--gold); }
.header__tel { display: flex; flex-direction: column; align-items: center; padding: 7px 20px; border: 1px solid currentColor; line-height: 1.5; transition: background .4s, color .4s, border-color .4s; }
.header__tel:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.header__reserve {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 20px;
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
  line-height: 1.5;
  transition: opacity .4s;
}
.header__reserve:hover { opacity: .85; }
.header__reserve-label { font-family: var(--latin); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .9; }
.header__reserve-ja { font-size: 12.5px; letter-spacing: .2em; }
.header__tel-label { font-family: var(--latin); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.header__tel-num { font-family: var(--latin); font-size: 14px; letter-spacing: .1em; }
.header__burger { display: none; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--navy);
  color: #fff;
  display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: 8px;
  /* ヘッダーの高さぶん空けないと、1項目目がロゴに重なる。
     画面の小さい端末では収まらないためスクロールできるようにする */
  padding: clamp(72px, 9.5vh, 84px) 22px 24px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
/* ナビはサイト共通の「番号＋英名＋和名」の型に揃える（ディナーのコース表と同じ骨格） */
.mobile-menu ul { counter-reset: mm; width: min(300px, 78vw); text-align: left; border-top: 1px solid rgba(255, 255, 255, .13); }
.mobile-menu li { margin: 0; counter-increment: mm; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.mobile-menu ul a {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 14px;
  /* 7項目＋言語切替を1画面に収める。背の低い端末ほど詰まる */
  /* 項目を5つに絞ったので、余白を戻して押しやすくする */
  padding: clamp(13px, 1.9vh, 20px) 2px; font-family: var(--latin); font-size: 18px; letter-spacing: .2em;
  transition: color .3s;
}
.mobile-menu ul a::before {
  content: "0" counter(mm);
  font-size: 10px; letter-spacing: .16em; color: var(--gold); opacity: .8;
}
.mobile-menu ul a small {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; opacity: .5; margin: 0;
}
.mobile-menu ul a:hover, .mobile-menu ul a[aria-current="page"] { color: var(--gold); }
.mobile-menu ul a[aria-current="page"]::before { opacity: 1; }

/* 開いたときに上から順に立ち上げる */
.mobile-menu li, .mobile-menu__reserve, .mobile-menu__tel, .mobile-menu__insta {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mobile-menu.is-open li,
.mobile-menu.is-open .mobile-menu__reserve,
.mobile-menu.is-open .mobile-menu__tel,
.mobile-menu.is-open .mobile-menu__insta { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(1) { transition-delay: .08s; }
.mobile-menu.is-open li:nth-child(2) { transition-delay: .13s; }
.mobile-menu.is-open li:nth-child(3) { transition-delay: .18s; }
.mobile-menu.is-open li:nth-child(4) { transition-delay: .23s; }
.mobile-menu.is-open li:nth-child(5) { transition-delay: .28s; }
.mobile-menu.is-open li:nth-child(6) { transition-delay: .33s; }
.mobile-menu.is-open li:nth-child(7) { transition-delay: .38s; }
.mobile-menu.is-open .mobile-menu__reserve { transition-delay: .44s; }
.mobile-menu.is-open .mobile-menu__tel { transition-delay: .50s; }
.mobile-menu.is-open .mobile-menu__insta { transition-delay: .56s; }

/* 予約は面で、電話は線を外して文字だけに。箱が二つ並ぶと重くなる */
.mobile-menu__reserve {
  width: min(300px, 78vw); margin-top: clamp(22px, 3vh, 34px); padding: 17px 0;
  text-align: center; background: var(--gold); border: 0; color: #12222c;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .26em;
}
.mobile-menu__tel {
  margin-top: clamp(12px, 1.8vh, 16px); padding: 0; border: 0;
  font-family: var(--latin); font-size: 17px; letter-spacing: .14em; opacity: .88;
}

/* ============================================================
   Hero — 舷窓ギミック（スクロールで海が開く）
   ============================================================ */
.hero-pin { position: relative; }
.hero-pin.has-gimmick { height: 240vh; }
.hero-pin.has-gimmick .hero { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; }

.hero {
  position: relative; height: 100svh; min-height: 620px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--bg);
}

/* 丸窓の左右に置く欧文（窓に被らない） */
.hero__deco {
  position: absolute; top: 44%;
  transform: translateY(-50%);
  z-index: 1;
  font-family: var(--latin);
  font-size: clamp(40px, 6.5vw, 104px);
  letter-spacing: .16em;
  white-space: nowrap;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}
.hero__deco--left { right: calc(50% + 23vmin); transform: translateY(-50%) translateX(calc(var(--spread, 0px) * -1)); }
.hero__deco--right { left: calc(50% + 23vmin); transform: translateY(-50%) translateX(var(--spread, 0px)); }
.hero-pin.has-gimmick .hero__deco { opacity: .18; }

/* 丸窓: clip-pathの毎フレーム更新はiOS Safariでマスク再生成（メインスレッド再描画）が走るため、
   border-radiusの円形窓をtransformで拡縮し、中身を逆スケールで静止させる完全GPU合成方式。
   --apD: 窓の直径(px, JSがリサイズ時に設定) / --s: 窓のスケール / --si: 中身の逆スケール */
.hero__ocean {
  position: absolute;
  left: calc(50% - var(--apD, 300vmax) / 2);
  top: calc(44% - var(--apD, 300vmax) / 2);
  width: var(--apD, 300vmax);
  height: var(--apD, 300vmax);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
  transform: scale(var(--s, 1)) translateZ(0);
  will-change: transform;
  /* スクロール量に1:1で追従させる。ここにトランジションを掛けると
     スクロールしている間ずっと目標値を遅れて追いかけ、
     トラックパッドの慣性と重なって「ぐわんぐわん」揺れる */
}
.hero__view {
  position: absolute;
  width: 100vw;
  height: 100vh; height: 100dvh;
  left: calc(var(--apD, 300vmax) / 2 - 50vw);
  top: calc(var(--apD, 300vmax) / 2 - 44vh);
  top: calc(var(--apD, 300vmax) / 2 - 44dvh);
  transform: scale(var(--si, 1));
  transform-origin: 50% 44%;
  will-change: transform;
}
.hero__photo {
  position: absolute; inset: -18px;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8, 26, 36, .8) 0%, rgba(8, 26, 36, .42) 26%, rgba(10, 30, 40, .06) 55%, rgba(10, 30, 40, .18) 100%);
}


.hero__inner { position: relative; z-index: 3; color: #fff; padding: 0 44px 90px; }
.hero-pin.has-gimmick .hero__lead,
.hero-pin.has-gimmick .hero__title { animation: none; opacity: 1; }
.hero-pin.has-gimmick .hero__inner { opacity: 0; transform: translateY(30px); will-change: opacity, transform; }
.hero__lead {
  opacity: 0;
  animation: fadeUp 1.8s ease .6s forwards;
}
.hero__lead-en {
  display: block;
  font-family: var(--latin);
  font-size: clamp(30px, 4.6vw, 56px);
  letter-spacing: .18em;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(6, 22, 32, .75), 0 4px 30px rgba(6, 22, 32, .6);
}
.hero__lead-ja {
  display: block;
  font-family: var(--serif);
  margin-top: 16px;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: .3em;
  opacity: .98;
  text-shadow: 0 1px 3px rgba(6, 22, 32, .8), 0 2px 22px rgba(6, 22, 32, .7);
}
.hero__title { margin-top: 34px; opacity: 0; animation: fadeUp 1.8s ease 1.3s forwards; }
.hero__title-logo { width: clamp(120px, 13vw, 180px); height: auto; filter: drop-shadow(0 1px 3px rgba(6, 22, 32, .55)) drop-shadow(0 4px 22px rgba(6, 22, 32, .45)); }
.hero-pin.has-gimmick .hero__catch { animation: none; opacity: 1; }
.hero__catch {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: .2em;
  text-shadow: 0 1px 4px rgba(6, 22, 32, .85), 0 3px 26px rgba(6, 22, 32, .7);
  opacity: 0;
  animation: fadeUp 1.8s ease 1.9s forwards;
}
.hero__catch-em {
  color: #e8c98f;
  padding: 0 .08em;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Concept / Break / View — 昼ゾーン
   ============================================================ */

.concept { position: relative; padding: 108px 44px 100px; overflow: hidden; }
.concept__inner { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr .98fr; gap: 68px; align-items: center; }
.concept__body { margin-top: 26px; color: var(--ink-soft); font-size: 14px; max-width: 27em; text-align: justify; }
.concept__visual { position: relative; }
.concept__photo { overflow: hidden; height: 430px; }
.concept__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 皿のような丸窓アクセント */
.concept__accent {
  position: absolute; left: -44px; bottom: -38px;
  width: 158px; height: 158px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--bg);
  box-shadow: 0 16px 40px rgba(15, 37, 49, .22);
}
.concept__accent img { width: 100%; height: 100%; object-fit: cover; }


.view { position: relative; padding: 108px 0 112px; overflow: hidden; }
.view__head { max-width: 1180px; margin: 0 auto 48px; padding: 0 44px; text-align: center; }
.view__head .sec-label { display: inline-block; }
.view__head .sec-label::after { margin-left: auto; margin-right: auto; }
.view__intro { margin-top: 26px; color: var(--ink-soft); font-size: 13.5px; }
/* 同じ席の、昼と夕暮れ。ドラッグで見比べるスライダー */
.view__compare {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  --x: 50%;
}
.view__compare img { pointer-events: none; user-select: none; }
.view__compare-base,
.view__compare-top img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.view__compare-top {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--x));
}
.view__compare-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--x);
  width: 1px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 14px rgba(10, 25, 40, .45);
}
.view__compare-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--navy) 84%, transparent);
  color: #f0cf9a;
  font-family: var(--latin);
  font-size: 19px;
  letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 2px;
}
.view__compare-tag {
  position: absolute; bottom: 16px;
  font-family: var(--latin);
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(10, 25, 40, .8);
  pointer-events: none;
}
.view__compare-tag--l { left: 20px; }
.view__compare-tag--r { right: 20px; }
.view__compare-note {
  max-width: 1180px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
}
/* 現れるときは下から静かに */
.view__compare.reveal img { clip-path: none; }

/* ============================================================
   パララックス欧文（参考サイトの deco-en 相当）
   ============================================================ */
.deco-word {
  position: absolute;
  top: 60px; left: -1vw;
  z-index: 0;
  font-family: var(--latin);
  font-size: clamp(72px, 9.5vw, 150px);
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--accent);
  opacity: .1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.deco-word--right { left: auto; right: -1vw; }
.deco-word--light { color: var(--aqua); opacity: .1; }

/* ============================================================
   Chef — 丸窓ポートレート＋経歴タイムライン
   ============================================================ */
.chef { position: relative; padding: 112px 44px 104px; overflow: hidden; }
.chef__inner {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 84px;
  align-items: center;
}
.chef__visual { text-align: center; }
.chef__portrait {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  padding: 12px;
  border: 1px solid var(--gold);
  outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  outline-offset: 8px;
}
/* 背後に「セントエルモの火」の淡い光 */
.chef__portrait::before {
  content: "";
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 179, 196, .35) 0%, rgba(111, 179, 196, .12) 42%, transparent 70%);
  z-index: -1;
}
.chef__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
}
.chef__name { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 30px; }
.chef__name-role { font-size: 11.5px; letter-spacing: .3em; color: var(--ink-soft); }
.chef__name-ja { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .26em; }
.chef__name-en { font-family: var(--latin); font-size: 11px; letter-spacing: .34em; color: var(--accent); }

.chef__text .sec-title { font-size: clamp(24px, 2.55vw, 29px); }
.chef__bio {
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 2.15;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.chef__quote {
  position: relative;
  margin-top: 34px;
  padding: 8px 0 8px 30px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 15.5px;
  letter-spacing: .1em;
  line-height: 2.3;
}
.chef__quote::before {
  content: "“";
  position: absolute; left: 26px; top: -34px;
  font-family: var(--latin);
  font-size: 84px;
  line-height: 1;
  color: var(--gold);
  opacity: .5;
}
.chef__career { margin-top: 40px; list-style: none; position: relative; }
.chef__career::before {
  content: "";
  position: absolute; left: 76px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  opacity: .6;
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(.6, .05, .3, 1) .3s;
}
.chef__career:not(.is-visible)::before { transform: scaleY(0); }
.chef__career li { position: relative; display: flex; padding: 9px 0; align-items: baseline; }
.chef__career li::before {
  content: "";
  position: absolute; left: 73px; top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--gold);
}
.chef__career-year {
  width: 56px; flex-shrink: 0;
  font-family: var(--latin);
  font-size: 13px; letter-spacing: .12em;
  color: var(--accent);
  text-align: left;
}
.chef__career-text { font-size: 12.5px; color: var(--ink-soft); padding-left: 44px; }
.chef__career-star .chef__career-year { color: var(--gold); }
.chef__career-star .chef__career-text { color: var(--ink); font-weight: 500; }
.chef__career-star::before { background: var(--gold) !important; box-shadow: 0 0 10px rgba(200, 155, 90, .8); }
.chef__career-now .chef__career-text { font-family: var(--serif); color: var(--ink); font-size: 13.5px; }

/* ============================================================
   Menu（Lunch / Dinner 共通）
   ============================================================ */
.menu { position: relative; overflow: hidden; padding: 108px 44px; }
.menu > * { position: relative; z-index: 1; }
.menu > .deco-word { position: absolute; z-index: 0; }
.menu__head { max-width: 1180px; margin: 0 auto 52px; text-align: center; }
.menu__head .sec-label { display: inline-block; }
.menu__head .sec-label::after { margin-left: auto; margin-right: auto; }
.menu__intro { margin-top: 26px; color: var(--ink-soft); font-size: 13.5px; }
.menu__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 34px;
}
.menu__img { overflow: hidden; aspect-ratio: 4 / 3; }
.menu__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.menu__item:hover .menu__img img { transform: scale(1.05); }
.menu__item figcaption { padding-top: 16px; text-align: center; }
.menu__item-en { display: block; font-family: var(--latin); font-size: 12px; letter-spacing: .3em; color: var(--accent); text-transform: uppercase; }
.menu__item-ja { display: block; font-family: var(--serif); margin-top: 6px; font-size: 14.5px; letter-spacing: .12em; }
/* ---------- 各LPへの導線 ----------
   トップには判断材料（時間・予約可否・価格）だけを置き、
   品目や当日の流れは Lunch / Dinner の各LPに集約する */
.menu__lead {
  max-width: 860px; margin: 56px auto 0; text-align: center;
  background: var(--card); border-radius: 20px; padding: 40px 48px 44px;
}
.menu__facts { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; }
.menu__facts > div { padding: 4px 34px; }
.menu__facts > div + div { border-left: 1px solid var(--line); }
.menu__facts dt { font-family: var(--latin); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.menu__facts dd { margin: 9px 0 0; font-family: var(--serif); font-size: 15px; letter-spacing: .08em; }
/* 詳細ページへの導線 */
.menu__more {
  display: inline-flex; flex-direction: column; gap: 5px;
  margin-top: 30px; padding: 15px 34px;
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .4s, color .4s, background .4s;
}
.menu__more-en { font-family: var(--latin); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); transition: color .4s; }
.menu__more-ja { font-size: 13.5px; letter-spacing: .12em; }
.menu__more:hover { border-color: var(--gold); background: var(--gold); color: #fff; }
.menu__more:hover .menu__more-en { color: rgba(255, 255, 255, .8); }
/* LP導線は枠を金色にして、本文中のリンクより一段強く見せる */
.menu__more--lead { margin-top: 36px; min-width: 300px; align-items: center; border-color: var(--gold); }
@media (max-width: 640px) {
  /* 縦画面では3項目を横に並べきれないため、罫線で区切った縦積みに切り替える。
     CTA は min-width を解除しないと画面幅を超える */
  .menu__lead { margin-top: 42px; padding: 28px 24px 32px; border-radius: 16px; }
  .menu__facts { display: block; }
  .menu__facts > div { padding: 14px 0; }
  .menu__facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .menu__facts dd { margin-top: 6px; font-size: 14.5px; }
  .menu__more--lead { min-width: 0; width: 100%; margin-top: 30px; }
}

/* ---------- LUNCH だけカジュアルに ---------- */
.menu__script {
  display: block;
  font-family: "Caveat", cursive;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  color: var(--aqua);
  transform: rotate(-3deg);
  margin-bottom: 6px;
}
.menu--lunch .sec-label { color: #3aa0ad; }
.menu--lunch .sec-label::after { background: #3aa0ad; }
.menu--lunch .menu__img { border-radius: 18px; }
.menu--lunch .menu__item-en {
  font-family: "Caveat", cursive;
  font-size: 21px;
  letter-spacing: .04em;
  text-transform: none;
  color: #3aa0ad;
}
.menu--lunch .menu__item-ja { font-family: var(--sans); letter-spacing: .08em; }

/* ---------- DINNER はフォーマルに ---------- */
.menu--dinner .menu__img { box-shadow: 0 18px 44px rgba(10, 25, 40, .25); }
.menu__courseband {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  max-width: 1180px; margin: 0 auto 44px;
}
.menu__courseband-rule { width: 64px; height: 1px; background: var(--gold); opacity: .65; transition: transform 1s cubic-bezier(.6, .05, .3, 1) .3s; }
.menu__courseband-rule:first-child { transform-origin: right; }
.menu__courseband-rule:last-child { transform-origin: left; }
.reveal:not(.is-visible) .menu__courseband-rule { transform: scaleX(0); }
.menu__courseband-text {
  font-family: var(--latin);
  font-size: 12.5px; letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu__num {
  display: block;
  font-family: var(--latin);
  font-size: 15px; letter-spacing: .3em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 12px;
}
.menu--dinner .menu__img {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  aspect-ratio: auto;
}
.menu--dinner .menu__img img { aspect-ratio: 4 / 3; }
.menu--dinner .menu__item-en { color: var(--gold); }


/* ============================================================
   Sunset — スクロールで陽が沈む転換セクション
   ============================================================ */
.sunset { position: relative; height: 340vh; }
.sunset__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.sunset__photos { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 60%; transition: transform .12s linear; }
.sunset__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
}
.sunset__photo--lunch { opacity: 1; }
.sunset__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(10, 25, 40, .38) 100%);
  pointer-events: none;
}
.sunset__grain {
  position: absolute; inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="180" height="180" filter="url(%23n)"/></svg>');
  /* mix-blend-modeは全画面ブレンドを毎フレーム強制するため使わない */
  opacity: .05;
  pointer-events: none;
}
.sunset__cap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 22vh;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
}
.sunset__stars { position: absolute; inset: 0 0 45% 0; opacity: 0; will-change: opacity; }
/* スクロール毎フレームでtransformを書き換える要素はGPUレイヤーに昇格させる */
[data-drift], [data-parallax] { will-change: transform; }

/* 昼→夕→夜の時刻（中央でクロスフェード） */
.sunset__words {
  position: absolute; left: 0; right: 0; top: 46%;
  transform: translateY(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
.sunset__word {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 26px rgba(0, 0, 0, .45);
  opacity: 0;
}
.sunset__word-en {
  font-family: var(--latin);
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: .42em;
  text-transform: uppercase;
  padding-left: .42em;   /* letter-spacing 分の視覚中央合わせ */
}
.sunset__word-en::after {
  content: "";
  display: block;
  width: 30px; height: 1px; margin: 12px auto 0;
  background: rgba(255, 255, 255, .6);
}
.sunset__word-time {
  font-family: var(--latin);
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: .12em;
  line-height: 1;
}

.sunset__stars i {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .9);
  animation: twinkle 3.2s ease-in-out infinite;
}
.sunset__stars i:nth-child(1)  { top: 12%; left: 14%; animation-delay: .1s; }
.sunset__stars i:nth-child(2)  { top: 22%; left: 32%; animation-delay: 1.2s; }
.sunset__stars i:nth-child(3)  { top: 9%;  left: 48%; animation-delay: .6s; }
.sunset__stars i:nth-child(4)  { top: 18%; left: 66%; animation-delay: 1.8s; }
.sunset__stars i:nth-child(5)  { top: 8%;  left: 82%; animation-delay: .4s; }
.sunset__stars i:nth-child(6)  { top: 30%; left: 8%;  animation-delay: 2.2s; }
.sunset__stars i:nth-child(7)  { top: 34%; left: 55%; animation-delay: .9s; }
.sunset__stars i:nth-child(8)  { top: 27%; left: 90%; animation-delay: 1.5s; }
.sunset__stars i:nth-child(9)  { top: 42%; left: 22%; animation-delay: 2.6s; }
.sunset__stars i:nth-child(10) { top: 45%; left: 74%; animation-delay: .2s; }
.sunset__stars i:nth-child(11) { top: 15%; left: 95%; animation-delay: 2s; }
.sunset__stars i:nth-child(12) { top: 38%; left: 40%; animation-delay: 1.1s; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sunset__stars i { animation: none; opacity: .8; } }

/* ============================================================
   Scene — 夜ゾーン（固定ネイビー）
   ============================================================ */
.scene { position: relative; overflow: hidden; padding: 108px 44px; color: var(--offwhite); }
.scene__head { max-width: 1180px; margin: 0 auto 48px; }
.scene__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 26px;
}
.scene__item { position: relative; overflow: hidden; }
.scene__item--tall { grid-row: span 2; }
.scene__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.scene__item:hover img { transform: scale(1.06); }
.scene__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 22px 16px;
  background: linear-gradient(to top, rgba(12, 34, 44, .75), transparent);
  font-family: var(--serif);
  font-size: 13px; letter-spacing: .14em;
}

/* ============================================================
   Access
   ============================================================ */
.info { position: relative; overflow: hidden; padding: 108px 44px; }
.info__head { max-width: 1180px; margin: 0 auto 52px; text-align: center; position: relative; z-index: 1; }
.info__head .sec-label { display: inline-block; }
.info__head .sec-label::after { margin-left: auto; margin-right: auto; }
.info__lead {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2.2;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.info__intro { margin-top: 26px; color: var(--ink-soft); font-size: 13.5px; }

.info__grid { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }

/* 海の写真に重なる情報カード */
.info__left { position: relative; padding: 60px 0 0 0; }
.info__photo { width: 72%; overflow: hidden; }
.info__photo img { width: 100%; height: 380px; object-fit: cover; }
.info__card {
  position: relative;
  margin: -170px 0 0 auto;
  width: 66%;
  background: var(--card);
  padding: 40px 38px 34px;
  box-shadow: 0 24px 60px rgba(15, 37, 49, .18);
  border-top: 2px solid var(--gold);
}
/* 店舗名はロゴ画像を使う（Marcellus で組むとブランドの書体と揃わないため）。
   カードは夜パレットで濃紺になるため、ヘッダーと同じ方式で白／濃色を出し分ける */
.info__card-logo { width: 190px; height: auto; display: block; }
.info__card-logo--white { display: none; }
html.is-night .info__card-logo--dark { display: none; }
html.is-night .info__card-logo--white { display: block; }
.info__facts { margin-top: 22px; border-top: 1px solid var(--line); }
.info__facts > div { display: flex; padding: 13px 2px; border-bottom: 1px solid var(--line); gap: 18px; }
.info__facts dt { min-width: 74px; font-family: var(--latin); color: var(--accent); font-size: 11px; letter-spacing: .18em; flex-shrink: 0; padding-top: 3px; }
.info__facts dd { font-size: 12.5px; line-height: 1.9; }
.info__facts-sub { font-size: 11.5px; color: var(--ink-soft); }
.info__reserve {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 26px;
  padding: 15px 10px;
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
  transition: opacity .4s;
}
.info__reserve:hover { opacity: .88; }
.info__reserve-label { font-size: 14px; letter-spacing: .22em; }
.info__reserve-en { font-family: var(--latin); font-size: 10px; letter-spacing: .3em; opacity: .85; }
.info__tel {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 12px;
  padding: 14px 10px;
  border: 1px solid var(--gold);
  transition: background .4s, color .4s;
}
.info__tel:hover { background: var(--gold); color: #fff; }
.info__tel-label { font-size: 10.5px; letter-spacing: .26em; }
.info__tel-num { font-family: var(--latin); font-size: 24px; letter-spacing: .1em; }

/* 丸窓の中の地図 */
.info__right { text-align: center; }
.info__map-round {
  position: relative;
  width: min(380px, 82vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold);
  outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  outline-offset: 8px;
}
.info__map-round iframe {
  position: absolute; top: 50%; left: 50%;
  width: 140%; height: 140%;
  transform: translate(-50%, -50%);
  border: 0;
  filter: grayscale(.35) brightness(.95);
}
.info__map-link {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--latin);
  font-size: 11px; letter-spacing: .26em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color .4s, border-color .4s;
}
.info__map-link:hover { color: var(--gold); border-color: var(--gold); }
.info__note { position: relative; z-index: 1; max-width: 1120px; margin: 40px auto 0; font-size: 12px; color: var(--ink-soft); }

/* ============================================================
   CTA — 舷窓が閉じていく（ヒーローと対の演出）
   ============================================================ */
.cta-pin { position: relative; background: var(--navy); }
.cta-pin.has-gimmick { height: 220vh; }
.cta-pin.has-gimmick .cta {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  padding: 0 44px;
  display: flex; align-items: center; justify-content: center;
}
.cta { position: relative; padding: 120px 44px; overflow: hidden; text-align: center; color: #fff; }
/* CTAの舷窓もヒーローと同じ transform 拡縮方式（iOSのclip-path再描画を回避） */
.cta__bg {
  position: absolute;
  left: calc(50% - var(--apD, 300vmax) / 2);
  top: calc(42% - var(--apD, 300vmax) / 2);
  width: var(--apD, 300vmax);
  height: var(--apD, 300vmax);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  transform: scale(var(--s, 1)) translateZ(0);
  will-change: transform;
}
.cta__view {
  position: absolute;
  width: 100vw;
  height: 100vh; height: 100dvh;
  left: calc(var(--apD, 300vmax) / 2 - 50vw);
  top: calc(var(--apD, 300vmax) / 2 - 42vh);
  top: calc(var(--apD, 300vmax) / 2 - 42dvh);
  transform: scale(var(--si, 1));
  transform-origin: 50% 42%;
  will-change: transform;
}
.cta__view img { width: 100%; height: 100%; object-fit: cover; }
.cta__view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 37, 49, .72), rgba(15, 37, 49, .28)); }
.cta-pin.has-gimmick .cta__view::after { background: linear-gradient(to top, rgba(15, 37, 49, .45), rgba(15, 37, 49, .12)); }
.cta__inner { position: relative; z-index: 2; }
.cta__copy { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); letter-spacing: .18em; line-height: 2; }
.cta__sub { margin-top: 18px; font-size: 13.5px; letter-spacing: .1em; opacity: .9; }
.cta__actions {
  margin-top: 40px;
  display: flex; justify-content: center; align-items: stretch;
  gap: 16px; flex-wrap: wrap;
}
.cta__reserve {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 14px;
  padding: 18px 54px;
  background: var(--gold); border: 1px solid var(--gold); color: #fff;
  font-size: 17px; letter-spacing: .22em;
  transition: opacity .4s;
}
.cta__reserve span { font-family: var(--latin); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.cta__reserve:hover { opacity: .88; }
.cta__tel {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 14px;
  padding: 18px 54px;
  border: 1px solid rgba(255,255,255,.7);
  font-family: var(--latin); font-size: 22px; letter-spacing: .12em;
  transition: background .4s, border-color .4s;
}
.cta__tel span { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.cta__tel:hover { background: var(--gold); border-color: var(--gold); }

/* ============================================================
   帆船の航路（ページ全体の進行インジケーター）
   ============================================================ */
.voyage {
  position: fixed; right: 34px; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
  pointer-events: none;
}
.voyage.is-visible { opacity: 1; visibility: visible; }
.voyage__sun {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe9bd, #d9a55e);
  box-shadow: 0 0 10px rgba(216, 165, 94, .7);
}
.voyage__moon {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: inset 2.5px -1.5px 0 0 currentColor;
  opacity: .8;
  transform: rotate(-18deg);
}
.voyage__line {
  position: relative;
  width: 1px; height: 38vh; min-height: 200px;
  background-image: repeating-linear-gradient(to bottom, rgba(127, 127, 127, .55) 0 3px, transparent 3px 9px);
}
.voyage__ship {
  position: absolute; left: 50%; top: 0;
  width: 34px; height: 27px;
  transform: translate(-50%, -50%);
  will-change: transform;
  background: currentColor;
  -webkit-mask: url(../images/ship-mask.png) center / contain no-repeat;
  mask: url(../images/ship-mask.png) center / contain no-repeat;
  animation: shipBob 3.6s ease-in-out infinite;
}
/* margin-topのアニメーションは毎フレームレイアウトを強制するため、合成のみで済むtranslate/rotateに */
@keyframes shipBob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 2px; rotate: 2.5deg; } }
@media (prefers-reduced-motion: reduce) { .voyage__ship { animation: none; } }

/* ============================================================
   固定予約チップ
   ============================================================ */
.reserve-chip {
  position: fixed; right: 24px; bottom: 24px;
  z-index: 95;
  padding: 10px 20px 11px;
  border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  /* backdrop-filterはiOSで毎フレーム再ブラーになり全ページのスクロールを重くするため不使用 */
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  border: 1px solid rgba(200, 155, 90, .6);
  color: var(--offwhite);
  box-shadow: 0 6px 18px rgba(10, 25, 40, .24);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s ease, visibility .5s, transform .5s ease, background .4s;
}
.reserve-chip.is-visible { opacity: 1; visibility: visible; transform: none; }
.reserve-chip:hover { background: var(--gold); color: #fff; }
.reserve-chip__sunset { font-family: var(--latin); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #f0cf9a; }
.reserve-chip__sunset b { font-weight: 400; font-size: 11px; letter-spacing: .1em; margin-left: 2px; }
.reserve-chip:hover .reserve-chip__sunset { color: #fff; }
.reserve-chip__ja { font-family: var(--serif); font-size: 13px; letter-spacing: .12em; }

/* ============================================================
   Footer
   ============================================================ */
.footer { padding: 70px 44px 40px; text-align: center; background: var(--navy); color: rgba(245,245,245,.85); }
/* height を指定しないと、img の height 属性がそのまま効いて縦に伸びる */
.footer__logo { width: 150px; height: auto; margin: 0 auto; }
.footer__addr { font-size: 12px; margin-top: 30px; opacity: .75; }
.footer__copy { font-family: var(--latin); font-size: 10px; letter-spacing: .2em; margin-top: 26px; opacity: .5; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .header__nav ul { gap: 20px; }
  .header { gap: 18px; }
}
/* 1021〜1200px はヘッダーの要素が収まりきらないので余白を詰める。
   Menu を足してナビが6項目になったため、字間まで詰めないと
   1050px 前後で Access が言語切替に重なる */
@media (min-width: 1021px) and (max-width: 1200px) {
  .header { gap: 14px; padding: 18px 20px; }
  .header.is-solid { padding: 12px 20px; }
  .header__nav ul { gap: 14px; }
  .header__nav .en { font-size: 13px; letter-spacing: .12em; }
  .header__nav .ja { letter-spacing: .1em; }
  .header__tel { padding: 7px 12px; }
}

@media (max-width: 1020px) {
  .pc { display: none; }
  .sp { display: inline; }
  /* SPはドリフト/パララックス無効（JS側もliteModeで停止）。常駐GPUレイヤーを作らない */
  [data-drift], [data-parallax] { will-change: auto; }
  .header { padding: 14px 22px; }
  .header.is-solid { padding: 10px 22px; }
  .header__logo-img { height: 34px; }
  .header.is-solid .header__logo-img { height: 30px; }
  .header__nav, .header__tel, .header__reserve { display: none; }
  .header__burger {
    display: block; margin-left: auto;
    width: 40px; height: 40px; background: none; border: none; cursor: pointer; position: relative; z-index: 101;
    color: inherit;
  }
  .header__burger span { position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 1px; background: currentColor; box-shadow: 0 0 6px rgba(10, 30, 40, .35); transition: transform .4s, top .4s; }
  .header__burger span:nth-child(1) { top: 15px; }
  .header__burger span:nth-child(2) { top: 24px; }
  .header__burger.is-open span:nth-child(1) { top: 20px; transform: rotate(30deg); }
  .header__burger.is-open span:nth-child(2) { top: 20px; transform: rotate(-30deg); }
  .header.menu-open { color: #fff !important; background: transparent; box-shadow: none; }

  .hero__inner { padding: 0 22px 90px; }
  .hero-pin.has-gimmick { height: 210vh; }
      /* モバイルは丸窓の上下に配置 */
  .hero__deco--left, .hero__deco--right {
    font-size: clamp(30px, 9vw, 44px);
    left: 50%; right: auto;
    transform: translate(-50%, -50%);
  }
  .hero__deco--left { top: calc(44% - 33vmin); }
  .hero__deco--right { top: calc(44% + 33vmin); }
  .concept__body br, .view__intro br, .menu__intro br, .info__intro br { display: none; }

  .concept { padding: 72px 22px 64px; }
  .concept__inner { grid-template-columns: 1fr; gap: 44px; }
  .concept__photo { height: 260px; }
  .concept__accent { width: 110px; height: 110px; left: auto; right: -8px; bottom: -30px; }
  .concept__body { max-width: none; }
  .view { padding: 72px 0 76px; }
  .view__head { padding: 0 22px; }
  .view__compare { margin: 0 22px; aspect-ratio: 4 / 3; }
  .view__compare-knob { width: 44px; height: 44px; font-size: 16px; }
  .view__compare-note { padding: 0 22px; }
  .menu { padding: 72px 22px; }
  .menu__grid { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .chef { padding: 72px 22px 64px; }
  .chef__inner { grid-template-columns: 1fr; gap: 50px; }
  .chef__quote { font-size: 14px; }
  .chef__career-year { width: 46px; }
  .chef__career::before { left: 62px; }
  .chef__career li::before { left: 59px; }
  .chef__career-text { padding-left: 32px; }
  .sunset { height: 300vh; }
  .deco-word { font-size: clamp(56px, 15vw, 90px); top: 30px; }
  .reserve-chip { right: 14px; bottom: 14px; padding: 8px 16px 9px; }
  .reserve-chip__ja { font-size: 12px; }
  .voyage { display: none; }
  .cta-pin.has-gimmick .cta { padding: 0 22px; }
  .scene { padding: 72px 22px; }
  .scene__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; gap: 14px; }
  .info { padding: 72px 22px; }
  .info__head { margin-bottom: 44px; }
  .info__grid { grid-template-columns: 1fr; gap: 60px; }
  .info__left { padding-top: 0; }
  .info__photo { width: 88%; }
  .info__photo img { height: 250px; }
  .info__card { width: 88%; margin-top: -80px; padding: 30px 24px 26px; }
  .cta { padding: 84px 22px; }
  .footer { padding: 56px 22px 32px; }
}
@media (max-width: 560px) {
  .menu__grid { grid-template-columns: 1fr; }
  .scene__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .scene__item--tall { grid-row: span 1; }
}

/* ============================================================
   2026-07-19 追加: インスタ動線 / CTA強化 / SP文字調整
   ============================================================ */
.header__insta { display: flex; align-items: center; padding: 6px; opacity: .92; transition: opacity .3s, color .3s; }
.header__insta:hover { opacity: 1; color: var(--gold); }

.mobile-menu__insta {
  display: flex; align-items: center; gap: 8px;
  margin-top: clamp(16px, 2.4vh, 26px); padding-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid rgba(255, 255, 255, .11);
  width: min(300px, 78vw); justify-content: center;
  font-family: var(--latin); font-size: 12px; letter-spacing: .2em;
  opacity: .62;
}
.mobile-menu__insta svg { width: 17px; height: 17px; }

.footer__insta {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 4px;
  font-family: var(--latin); font-size: 12.5px; letter-spacing: .14em;
  opacity: .85; transition: color .3s, opacity .3s;
}
.footer__insta:hover { color: var(--gold); opacity: 1; }

/* --- CTA強化 --- */
.cta__reserve {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 52px;
  box-shadow: 0 6px 20px rgba(15, 37, 49, .28);
}
.cta__reserve-ja {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: .24em;
  white-space: nowrap;
}
.cta__reserve small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  opacity: .85;
  white-space: nowrap;
}
.cta__tel { white-space: nowrap; }

.cta__note { margin-top: 18px; font-size: 12.5px; letter-spacing: .08em; opacity: .85; }




/* --- SPの改行・読みやすさ調整 --- */
@media (max-width: 640px) {
  .header__logo-img { height: 44px; }
  .header.is-solid .header__logo-img { height: 36px; }
  .hero__lead-ja { font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; }
  .hero__catch { font-size: 17.5px; letter-spacing: .13em; white-space: nowrap; }
  .concept__tagline { font-size: 12.5px; letter-spacing: .1em; }
  .cta__copy { letter-spacing: .12em; }
  .cta__sub { padding: 0 8px; }
  .cta__actions { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 10px; }
  .cta__reserve { width: 100%; padding: 16px 20px; }
  .cta__tel { width: 100%; padding: 14px 20px; font-size: 19px; }
  .cta__note { padding: 0 12px; }
  .footer__addr { font-size: 11.5px; letter-spacing: .04em; }
}

/* ============================================================
   低電力モード対策（JSがrAF実測でhtml.low-fpsを付与）
   30fps入力でもスクロール追従が滑らかに見えるようトランジションを延長し、
   常時アニメーションを停止する
   ============================================================ */
/* 低電力モードではrAFが約30fpsに間引かれる。ここでトランジションを
   伸ばすと目標値を追いかける遅れが増えるだけなので、代わりに
   1フレームあたりの仕事を減らす（常時アニメーションとGPUレイヤーを畳む） */
html.low-fps .sunset__stars i,
html.low-fps [data-drift] img,
html.low-fps .deco-word { animation: none; will-change: auto; }
html.low-fps [data-parallax],
html.low-fps [data-drift] { transform: none !important; }

/* コンセプト: SPはタグラインの下に写真→本文の縦積みレイアウト */
.concept__inner--stacked { display: block; max-width: 780px; }
.concept__inner--stacked .concept__head { text-align: center; }
.concept__inner--stacked .concept__head .sec-label::after { margin-left: auto; margin-right: auto; }
.concept__inner--stacked .concept__visual { margin-top: 44px; }
.concept__inner--stacked .concept__photo { height: 400px; }
.concept__inner--stacked .concept__text { margin-top: 14px; }
.concept__inner--stacked .concept__body { max-width: 40em; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .concept__inner--stacked .concept__visual { margin-top: 32px; }
  .concept__inner--stacked .concept__photo { height: 250px; }
}
/* PC: 写真を右に置いた元の横並びレイアウトへ戻す */
@media (min-width: 641px) {
  .concept__inner--stacked {
    display: grid;
    max-width: 1020px;
    grid-template-columns: 1.02fr .98fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head visual" "text visual";
    column-gap: 68px;
  }
  .concept__inner--stacked .concept__head { grid-area: head; text-align: left; align-self: end; }
  .concept__inner--stacked .concept__head .sec-label::after { margin-left: 0; margin-right: 0; }
  .concept__inner--stacked .concept__visual { grid-area: visual; margin-top: 0; align-self: center; }
  .concept__inner--stacked .concept__photo { height: 430px; }
  .concept__inner--stacked .concept__text { grid-area: text; margin-top: 0; }
  .concept__inner--stacked .concept__body { max-width: 27em; margin-left: 0; margin-right: 0; }
}

/* ============================================================
   FAQ（よくあるご質問）
   ============================================================ */
.faq { padding: 96px 22px 104px; }
.faq__inner { max-width: 780px; margin: 0 auto; }
.faq__head { text-align: center; }
.faq__head .sec-label::after { margin-left: auto; margin-right: auto; }
.faq__list { margin-top: 42px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 21px 42px 21px 36px;
  font-family: var(--serif);
  font-size: 15.5px;
  letter-spacing: .06em;
  line-height: 1.7;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "Q.";
  position: absolute; left: 2px; top: 21px;
  font-family: var(--latin);
  color: var(--accent);
  letter-spacing: .04em;
}
.faq__q::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); }
.faq__a {
  margin: 0;
  padding: 2px 10px 24px 36px;
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--ink-soft);
  text-align: justify;
}
@media (max-width: 640px) {
  .faq { padding: 64px 18px 72px; }
  .faq__q { font-size: 14.5px; padding: 18px 36px 18px 30px; }
  .faq__q::before { top: 18px; }
  .faq__a { padding-left: 30px; }
}

/* ============================================================
   Instagramバンド（CTA下・フッター前）
   ============================================================ */
.insta-band { padding: 84px 22px; text-align: center; }
.insta-band__label {
  font-family: var(--latin);
  font-size: 12px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--accent);
}
.insta-band__label::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  margin: 12px auto 0;
  background: var(--accent);
}
.insta-band__copy {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 22px);
  letter-spacing: .16em;
}
.insta-band__btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  padding: 13px 30px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: inherit;
  font-family: var(--latin);
  font-size: 13px; letter-spacing: .12em;
  transition: background .35s, color .35s;
}
.insta-band__btn:hover { background: var(--gold); color: #fff; }
@media (max-width: 640px) {
  .insta-band { padding: 60px 22px; }
  .insta-band__btn { font-size: 12px; padding: 12px 22px; }
}

/* ===== Origin（セントエルモとは・セント・エルモの火）※パレット追従・左右分割 ===== */
.origin { position: relative; padding: 114px 44px 112px; overflow: hidden; }
.origin__inner {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(44px, 6vw, 92px);
  align-items: center;
}

/* --- 左：由来のストーリー（帆船ロゴ） --- */
.origin__ship {
  display: block; width: clamp(128px, 16vw, 172px); margin-bottom: 22px;
  transform-origin: 52% 88%;
  animation: originShipSway 7s ease-in-out infinite;
}
.origin__ship img { display: block; width: 100%; height: auto; }
@keyframes originShipSway {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-4px); }
}
.origin__eyebrow { margin-top: 8px; font-family: var(--serif); font-size: 12.5px; letter-spacing: .32em; color: var(--accent); }
.origin__story .sec-title { margin-top: 14px; }
.origin__latin { margin-top: 12px; font-family: var(--latin); font-size: 15px; letter-spacing: .22em; color: var(--gold); }
.origin__body { margin-top: 24px; max-width: 30em; font-family: var(--serif); font-size: 14.5px; line-height: 2.1; color: var(--ink-soft); text-align: justify; }
.origin__body em { font-style: normal; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.origin__est { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-family: var(--latin); font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.origin__est-spark { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 2px rgba(200,155,90,.55); }

/* --- 右：私たちが灯すもの（縦に連なる灯り） --- */
.origin__lights-head { margin-bottom: 22px; }
.origin__lights-head .ja { display: block; font-family: var(--serif); font-size: clamp(19px, 2.3vw, 23px); letter-spacing: .16em; color: var(--ink); }
.origin__lights-head .en { display: block; margin-top: 8px; font-family: var(--latin); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); }
.origin__defs { position: absolute; width: 0; height: 0; }
.origin__list { list-style: none; margin: 0; padding: 0; position: relative; }
/* 灯りをつなぐ縦の索具 */
.origin__list::before {
  content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 1px; z-index: 0;
  background: linear-gradient(180deg, transparent, var(--line) 7%, var(--line) 93%, transparent);
}
.origin__light {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 0 20px;
  padding: 15px 16px 15px 0;
  border-radius: 13px;
  transition: background .45s ease, transform .35s ease;
}
/* ランタン（炎＋ゆらめくグロー）。スクロールで順に点灯 */
.origin__lantern {
  position: relative; width: 27px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: calc(var(--i, 0) * .16s + .1s);
}
.origin__lights.is-visible .origin__lantern { opacity: 1; transform: translateY(0); }
.origin__lantern::before {
  content: ""; position: absolute; top: 46%; left: 50%;
  width: 48px; height: 48px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,97,31,.42) 0%, rgba(228,97,31,.13) 44%, transparent 68%);
  animation: originGlow 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .5s);
  transition: opacity .4s ease, transform .4s ease;
}
@keyframes originGlow {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.14); }
}
/* 仕上げ：炎から立ちのぼる小さな火の粉 */
.origin__lantern::after {
  content: ""; position: absolute; top: 7px; left: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #ffca82;
  box-shadow: 0 0 5px 1px rgba(240,130,50,.9);
  opacity: 0;
  animation: originEmber 4.6s ease-out infinite;
  animation-delay: calc(var(--i, 0) * .8s + .6s);
}
@keyframes originEmber {
  0%   { opacity: 0;  transform: translate(-50%, 0)      scale(1); }
  12%  { opacity: .95; }
  55%  { transform: translate(-140%, -16px) scale(.7); }
  100% { opacity: 0;  transform: translate(-10%, -32px)  scale(.3); }
}
.origin__flame {
  position: relative; width: 18px; height: 23px;
  filter: drop-shadow(0 0 5px rgba(228,97,31,.7));
  transform-origin: 50% 92%;
  animation: originFlicker 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .37s);
  transition: filter .35s ease, transform .35s ease;
}
/* 炎のゆらぎ */
@keyframes originFlicker {
  0%, 100% { transform: scale(1)                 rotate(-1.2deg); }
  30%      { transform: scaleY(1.09) scaleX(.95) rotate(1deg); }
  55%      { transform: scaleY(.95)  scaleX(1.03) rotate(-.6deg); }
  80%      { transform: scaleY(1.05) scaleX(.99) rotate(.8deg); }
}
.origin__light-body { display: flex; flex-direction: column; gap: 5px; }
.origin__light-name { font-family: var(--serif); font-size: 17px; letter-spacing: .14em; color: var(--ink); display: flex; align-items: baseline; gap: 12px; }
.origin__light-no { font-family: var(--latin); font-size: 10.5px; letter-spacing: .16em; color: var(--accent); opacity: .8; }
.origin__light-desc { font-family: var(--sans); font-size: 12.5px; line-height: 1.75; font-weight: 300; color: var(--ink-soft); }
/* 遊び心：ホバーで炎が燃え上がり、行が灯る */
.origin__light:hover {
  background: radial-gradient(130% 130% at 18px 50%, rgba(228,97,31,.16), rgba(228,97,31,0) 62%);
  transform: translateX(3px);
}
.origin__light:hover .origin__flame { filter: drop-shadow(0 0 11px rgba(240,120,45,1)); transform: scaleY(1.22) scaleX(1.04); }
.origin__light:hover .origin__lantern::before { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }

@media (max-width: 900px) {
  .origin { padding: 88px 30px 90px; }
  .origin__inner { grid-template-columns: 1fr; gap: 52px; }
  .origin__ship { margin-left: auto; margin-right: auto; }
  .origin__story { text-align: center; }
  .origin__body { max-width: none; text-align: left; }
  .origin__lights { border-top: 1px solid var(--line); padding-top: 42px; }
}
@media (max-width: 560px) {
  .origin { padding: 72px 22px 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .origin__ship, .origin__flame, .origin__lantern::before { animation: none; }
  .origin__lantern::after { animation: none; opacity: 0; }
  .origin__lantern { opacity: 1; transform: none; transition: none; }
}

/* ---------- 言語切替（モバイルメニュー内） ----------
   生成時に現在の言語のリンクが is-current になる */
.lang-switch {
  width: min(300px, 78vw); margin: 2px 0 4px; padding: 9px 0 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mobile-menu.is-open .lang-switch { opacity: 1; transform: none; transition-delay: .42s; }
.lang-switch__icon { display: flex; color: var(--gold); opacity: .85; margin-right: 1px; }
.lang-switch a { font-size: 11.5px; letter-spacing: .04em; opacity: .55; transition: opacity .3s, color .3s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-current { opacity: 1; color: var(--gold); }

/* ---------- 言語切替（デスクトップのヘッダー） ----------
   ヘッダーは要素が多いので、平常時は現在の言語コードだけを出し、
   ホバーとフォーカスで一覧を開く。SPではハンバーガー内に置くため隠す。 */
.header__lang { position: relative; }
.header__lang-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--latin); font-size: 11px; letter-spacing: .18em;
  color: inherit; background: none; cursor: pointer;
  /* 電話番号ボタンと同じ枠を与えて「押せるもの」に見せる。
     地球儀のアイコンがないと、言語切替だと気づかれない */
  border: 1px solid currentColor; padding: 8px 11px; line-height: 1;
  opacity: .78; transition: opacity .3s, background .4s, color .4s;
}
.header__lang-btn > span { padding-top: 1px; }
.header__lang-btn svg { transition: transform .3s; }
.header__lang:hover .header__lang-btn,
.header__lang:focus-within .header__lang-btn { opacity: 1; }
.header__lang:hover .header__lang-btn svg,
.header__lang:focus-within .header__lang-btn svg { transform: rotate(180deg); }
.header__lang-list {
  position: absolute; top: 100%; right: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 118px; padding: 8px 0;
  background: var(--navy); color: #fff;
  box-shadow: 0 14px 34px rgba(10, 22, 40, .22);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.header__lang:hover .header__lang-list,
.header__lang:focus-within .header__lang-list { opacity: 1; visibility: visible; transform: none; }
.header__lang-list a {
  padding: 7px 16px; font-size: 12.5px; letter-spacing: .06em;
  opacity: .72; transition: opacity .25s, color .25s;
}
.header__lang-list a:hover { opacity: 1; }
.header__lang-list a.is-current { opacity: 1; color: var(--gold); }
/* ハンバーガーに切り替わる幅（1020px）から下は、メニュー内の切替にまかせる */
@media (max-width: 1020px) { .header__lang { display: none; } }

/* ============================================================
   ご利用シーンの選択（トップの入口 → ランチ／ディナーLP）
   同じテラスの「昼」と「夕」を左右に並べ、この店の二つの顔を
   一画面で見せる。触れた側が広がり、もう一方は静かに引く。
   ============================================================ */
.pick { padding: 0 0 4px; }
.pick__head { text-align: center; padding: 76px 22px 34px; }
.pick__eyebrow {
  font-family: var(--latin); font-size: 11px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--gold);
}
.pick__eyebrow::after {
  content: ""; display: block; width: 26px; height: 1px;
  background: var(--gold); opacity: .5; margin: 13px auto 0;
}
.pick__lead {
  margin-top: 18px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 1.9vw, 24px); letter-spacing: .14em; color: var(--ink);
}
.pick__split {
  display: flex; min-height: clamp(400px, 60vh, 620px);
}
.pick__side {
  /* basis を 0 にしないと余白が生まれず flex-grow が効かない */
  position: relative; flex: 1 1 0; overflow: hidden;
  display: flex; align-items: flex-end; color: #fff;
  /* 触れた側が広がる。flex-basis を動かすとレイアウトが毎フレーム
     走るため、flex-grow だけを動かす */
  transition: flex-grow .85s cubic-bezier(.2, .7, .2, 1);
}
.pick__photo { position: absolute; inset: 0; }
.pick__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
/* 写真の上に文字を置くので、文字の帯だけしっかり暗くする。
   実測で白文字が4.5:1以上になる濃さにしている（昼の写真は輝度が
   高く、弱いスクリムだと2.4:1程度までしか上がらない） */
.pick__side::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 22, 32, .92) 0%, rgba(8, 22, 32, .82) 26%, rgba(8, 22, 32, .5) 52%, rgba(8, 22, 32, .12) 72%, transparent 88%);
  transition: opacity .7s ease;
}
.pick__side--day::after {
  background: linear-gradient(0deg, rgba(8, 30, 46, .95) 0%, rgba(8, 30, 46, .9) 26%, rgba(8, 30, 46, .66) 52%, rgba(8, 30, 46, .22) 72%, transparent 88%);
}
.pick__body {
  position: relative; z-index: 1; display: block;
  padding: 0 clamp(24px, 3.4vw, 54px) clamp(34px, 4.4vh, 56px);
}
.pick__en {
  display: block; font-family: var(--latin); font-size: clamp(19px, 2.1vw, 27px);
  letter-spacing: .18em; text-transform: uppercase;
}
.pick__ja {
  display: block; margin-top: 14px; font-family: var(--serif);
  font-size: clamp(15px, 1.35vw, 18px); letter-spacing: .08em;
}
.pick__time {
  display: block; margin-top: 10px; font-family: var(--latin);
  font-size: 12px; letter-spacing: .16em; opacity: .82;
}
.pick__go {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  font-size: 12.5px; letter-spacing: .16em;
  padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, .45);
  transition: border-color .4s;
}
.pick__go svg { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }


/* 境目の一本線。左右が地続きに見えないよう、細く入れる */
.pick__side + .pick__side { box-shadow: -1px 0 0 rgba(255, 255, 255, .22); }

@media (hover: hover) {
  .pick__split:hover .pick__side { flex-grow: .84; }
  .pick__split:hover .pick__side::after { opacity: .78; }
  .pick__side:hover { flex-grow: 1.32; }
  .pick__side:hover::after { opacity: 1; }
  .pick__side:hover .pick__photo img { transform: scale(1.06); }
  .pick__side:hover .pick__go { border-bottom-color: #fff; }
  .pick__side:hover .pick__go svg { transform: translateX(6px); }
}
.pick__side:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }

@media (max-width: 900px) {
  /* 縦画面は左右に割れないので上下に積む。高さは写真が主役に見える程度に */
  .pick__lead { padding: 56px 22px 22px; font-size: 11.5px; letter-spacing: .22em; }
  .pick__split { display: block; min-height: 0; }
  .pick__side { min-height: clamp(260px, 38vh, 340px); }
  .pick__body { padding: 0 22px 28px; }
  .pick__side + .pick__side { box-shadow: 0 -1px 0 rgba(255, 255, 255, .22); }
  .pick__head { padding: 58px 22px 26px; }
  .pick__lead { font-size: 18px; letter-spacing: .1em; }
}

/* フッターの補助リンク（貸切・撮影のご相談など、ナビに入りきらない導線） */
.footer__links { margin-top: 22px; font-size: 12px; letter-spacing: .12em; }
.footer__links a { opacity: .72; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.footer__links a:hover { opacity: 1; }

/* フッターの用途別導線（ナビから外した記念日・接待・貸切撮影の受け皿） */
.footer__scenes { margin-top: 30px; }
.footer__scenes-ttl { font-family: var(--latin); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .5; }
.footer__scenes-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 14px; font-size: 12.5px; letter-spacing: .08em; }
.footer__scenes-links a { opacity: .82; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: opacity .3s; }
.footer__scenes-links a:hover { opacity: 1; }
.footer__scenes-links [aria-current="page"] { opacity: .42; }

/* 関連ページ（各LPの末尾。どのページからも次に読む先がある状態にする） */
.rel-links-sec { padding: 0 clamp(22px, 3.4vw, 44px) clamp(56px, 7vh, 96px); }
.rel-links { max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: clamp(34px, 4vh, 48px); }
.rel-links__ttl-lead { font-family: var(--latin); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
.rel-links__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
.rel-links__item { display: block; border: 1px solid var(--line); padding: 22px 24px; transition: border-color .35s, background .35s; }
.rel-links__item:hover { border-color: var(--accent); background: var(--bg-tint, transparent); }
.rel-links__ttl { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: .06em; }
.rel-links__txt { display: block; margin-top: 9px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.85; }

/* ===== 期間限定のお知らせポップアップ =====
   季節もの。index.html 側のスクリプトが日付で出し分ける。 */
.xpop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; }
.xpop[hidden] { display: none; }
.xpop__scrim { position: absolute; inset: 0; background: rgba(6, 14, 20, .74); opacity: 0; transition: opacity .35s ease; }
.xpop.is-open .xpop__scrim { opacity: 1; }
.xpop__box {
  position: relative; width: min(100%, 440px); max-height: calc(100dvh - 44px); overflow: auto;
  background: #0d1a23; border: 1px solid rgba(216, 184, 122, .34); color: #e9e2d6;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.xpop.is-open .xpop__box { opacity: 1; transform: none; }
.xpop__close {
  position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 14, 20, .5); border: 0; color: #e9e2d6; cursor: pointer; transition: color .3s;
}
.xpop__close:hover { color: #fff; }
.xpop__media { display: block; }
.xpop__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 58%; display: block; }
.xpop__body { padding: 26px 28px 28px; text-align: center; }
.xpop__tag {
  display: inline-block; padding: 6px 13px 5px; border: 1px solid rgba(216, 184, 122, .6);
  font-family: var(--latin); font-size: 10px; letter-spacing: .22em; color: #e8cf9f; white-space: nowrap;
}
.xpop__ttl { margin-top: 18px; font-family: var(--serif); font-size: 21px; letter-spacing: .1em; line-height: 1.6; color: #fff; }
.xpop__txt { margin-top: 13px; font-size: 13px; line-height: 1.95; letter-spacing: .04em; color: rgba(233, 226, 214, .76); }
.xpop__btn { display: block; margin-top: 22px; padding: 16px 20px; background: var(--gold); color: #0d1a23; font-size: 13.5px; letter-spacing: .14em; transition: background .3s; }
.xpop__btn:hover { background: #d8ae6f; }
.xpop__later { display: block; width: 100%; margin-top: 13px; padding: 6px; background: none; border: 0; color: rgba(233, 226, 214, .58); font-family: inherit; font-size: 12px; letter-spacing: .08em; cursor: pointer; transition: color .3s; }
.xpop__later:hover { color: #e9e2d6; }
@media (max-width: 640px) {
  .xpop { padding: 18px; }
  .xpop__body { padding: 22px 20px 24px; }
  .xpop__ttl { font-size: 19px; }
}

/* 期間限定のカード（ご利用シーン選択に並べる3枚目）。
   季節もの。index.html 側の a タグごと消せば2枚に戻る。 */
.pick__ribbon {
  position: absolute; z-index: 2; top: 24px; left: 24px;
  padding: 7px 15px 6px;
  background: rgba(8, 22, 32, .6);
  border: 1px solid rgba(216, 184, 122, .7);
  font-family: var(--latin); font-size: 10.5px; letter-spacing: .22em;
  color: #e8cf9f; white-space: nowrap;
}
@media (max-width: 860px) {
  .pick__ribbon { top: 16px; left: 16px; font-size: 9.5px; letter-spacing: .14em; padding: 6px 11px 5px; }
}