/* ============================================================
   French Restaurant 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: 14.5px;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
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,
.menu__feature.reveal .menu__feature-img 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,
.menu__feature.reveal.is-visible .menu__feature-img 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);
  font-size: 13px;
  letter-spacing: .34em;
  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);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .1em;
}
.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); }

.header__logo { display: flex; align-items: center; }
.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; }
.header__nav { margin-left: auto; }
.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: center; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu ul { text-align: center; }
.mobile-menu li { margin: 18px 0; }
.mobile-menu a { font-family: var(--latin); font-size: 21px; letter-spacing: .24em; display: flex; flex-direction: column; }
.mobile-menu a small { font-family: var(--sans); font-size: 11px; letter-spacing: .3em; opacity: .7; margin-top: 4px; }
.mobile-menu__reserve { margin-top: 28px; padding: 13px 52px; background: var(--gold); border: 1px solid var(--gold); color: #fff; letter-spacing: .24em; }
.mobile-menu__tel { margin-top: 14px; padding: 12px 36px; border: 1px solid rgba(255,255,255,.5); font-family: var(--latin); letter-spacing: .14em; }

/* ============================================================
   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;
  /* iOSはJS直書きのscale変更で毎フレーム再ラスタライズが走るため、
     短いトランジションで「加速トランジション」としてGPUに補間させる */
  transition: transform .09s linear;
}
.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;
  transition: transform .09s linear;
}
.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(21px, 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; }
.menu__feature {
  max-width: 1180px; margin: 64px auto 0;
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center;
  background: var(--card);
}
.menu__feature-img { height: 100%; }
.menu__feature-img img { width: 100%; height: 100%; object-fit: cover; }
.menu__feature-text { padding: 56px 52px; }
.menu__feature-text h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .16em; margin-bottom: 22px; }
.menu__feature-text p { color: var(--ink-soft); font-size: 13.5px; }
.menu__feature-text dl { margin-top: 26px; border-top: 1px solid var(--line); }
.menu__feature-text dl > div { display: flex; gap: 26px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.menu__feature-text dt { font-family: var(--latin); letter-spacing: .2em; color: var(--accent); min-width: 76px; }
.menu__feature-text dd { font-size: 13.5px; }
/* ディナー詳細ページへの導線 */
.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); }
.menu__note { max-width: 1180px; margin: 42px auto 0; text-align: center; font-size: 12px; color: var(--ink-soft); }

/* ---------- 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; }
.menu--lunch .menu__feature { border-radius: 20px; overflow: hidden; }

/* ---------- ランチ アラカルト（カジュアルなメニュー） ---------- */
.menu__carte {
  max-width: 860px; margin: 48px auto 0;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px;
  background: var(--card); border-radius: 20px; padding: 42px 48px;
}
.menu__carte-label {
  font-family: "Caveat", cursive; font-size: 25px; letter-spacing: .02em;
  color: #3aa0ad; margin-bottom: 16px;
}
.menu__carte-list { columns: 2; column-gap: 28px; }
.menu__carte-list li {
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
  line-height: 1.7; padding: 6px 0; break-inside: avoid;
  border-bottom: 1px solid var(--line);
}
.menu__carte-note { margin-top: 16px; font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.menu__carte-group--course {
  border-left: 1px solid var(--line); padding-left: 40px;
  display: flex; flex-direction: column;
}
.menu__carte-course { font-family: var(--serif); font-size: 16px; letter-spacing: .08em; }
.menu__carte-price { font-family: var(--latin); font-size: 32px; letter-spacing: .04em; margin-top: 2px; }
.menu__carte-desc { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 720px) {
  .menu__carte { grid-template-columns: 1fr; gap: 26px; padding: 32px 26px; }
  .menu__carte-list { columns: 1; }
  .menu__carte-group--course { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; }
}

/* ---------- 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);
}
/* コース全8皿の流れ（メニューカード風） */
.menu__flow { max-width: 600px; margin: 0 auto 60px; padding: 0 22px; }
.menu__flow-title {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 20px; text-align: center;
}
.menu__flow-title-en {
  font-family: var(--latin);
  font-size: 12px; letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu__flow-title-ja { font-size: 12.5px; letter-spacing: .2em; color: var(--ink-soft); }
.menu__flow-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu__flow-list li {
  display: grid;
  grid-template-columns: 48px 108px 1fr;
  align-items: baseline;
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
}
.menu__flow-num {
  font-family: var(--latin);
  font-size: 13px; letter-spacing: .14em;
  color: var(--gold);
}
.menu__flow-en {
  font-family: var(--latin);
  font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.menu__flow-ja {
  font-family: var(--serif);
  font-size: 15px; letter-spacing: .14em;
  color: var(--ink);
  text-align: right;
}
@media (max-width: 640px) {
  .menu__flow { margin-bottom: 48px; padding: 0 16px; }
  .menu__flow-list li { grid-template-columns: 34px 82px 1fr; padding: 11px 4px; }
  .menu__flow-en { letter-spacing: .18em; }
  .menu__flow-ja { font-size: 14px; letter-spacing: .05em; }
}

.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); }
.menu--dinner .menu__feature {
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-top: 2px solid 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);
}
.info__card-label { font-family: var(--latin); font-size: 10px; letter-spacing: .34em; color: var(--ink-soft); }
.info__card-name { font-family: var(--latin); font-size: 27px; letter-spacing: .14em; margin-top: 2px; }
.info__card-name span { font-size: 11px; letter-spacing: .32em; color: var(--ink-soft); }
.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;
  transition: transform .09s linear;
}
.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;
  transition: transform .09s linear;
}
.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); }
.footer__logo { width: 150px; 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; }
}
@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; }
  .menu__feature { grid-template-columns: 1fr; margin-top: 60px; }
  .menu__feature-text { padding: 36px 26px; }
  .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: 14px;
  font-family: var(--latin); font-size: 13px; letter-spacing: .18em;
  opacity: .9;
}

.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入力でもスクロール追従が滑らかに見えるようトランジションを延長し、
   常時アニメーションを停止する
   ============================================================ */
html.low-fps .hero__ocean,
html.low-fps .hero__view,
html.low-fps .cta__bg,
html.low-fps .cta__view { transition-duration: .24s; }
html.low-fps .sunset__photos { transition-duration: .28s; }
html.low-fps .sunset__photo,
html.low-fps .sunset__stars { transition: opacity .26s linear; }
html.low-fps .hero__inner { transition: opacity .24s linear, transform .24s linear; }
html.low-fps [data-drift] img,
html.low-fps .deco-word { will-change: auto; }

/* コンセプト: 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; line-height: 1.5; }
.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; }
}