@charset "utf-8";

/* ==================================================
  RISTORANTE DEA  /  sp.css  対象：999px以下
================================================== */

/* =====================================
  SP ヘッダー（media query外）
===================================== */
#sp-header {
  align-items: flex-end; /* Safe Area分の上パディングがあるため下揃えに変更 */
  background: rgba(13,30,61,0);
  display: flex;
  height: calc(60px + env(safe-area-inset-top)); /* ノッチ分だけ高さを拡張 */
  left: 0;
  padding-top: env(safe-area-inset-top); /* コンテンツをノッチの下に押し下げる */
  position: fixed;
  right: 0;
  top: 0;
  transition: background 0.4s ease;
  z-index: 3000;
}
#sp-header.is-scrolled { background: rgba(13,30,61,0.94); }
.sp-header-inner {
  align-items: center;
  display: flex;
  height: 60px; /* ノッチ下の60px内でロゴ・ハンバーガーを中央揃え */
  justify-content: space-between;
  padding: 0 24px;
  width: 100%;
}
.sp-header-logo { display: block; height: 42px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.sp-header-logo img { display: block; height: 100%; width: auto; }
/* スクロール（MVを抜けたら）でロゴ表示 */
#sp-header.is-scrolled .sp-header-logo { opacity: 1; pointer-events: auto; }

.sp-hamburger {
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 28px;
}
.sp-hamburger span {
  background: #fff;
  border-radius: 2px;
  display: block;
  height: 1.5px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center;
  width: 100%;
}
/* 開いたとき：3本線 → × に変形 */
.sp-hamburger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sp-hamburger.is-active span:nth-child(2) { opacity: 0; }
.sp-hamburger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =====================================
  SP フルスクリーンメニュー
===================================== */
.sp-menu {
  align-items: center;
  background: rgba(13,30,61,0.97);
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.4s ease;
  z-index: 4000;
}
.sp-menu.is-open { opacity: 1; pointer-events: auto; }
.sp-menu-close {
  background: none;
  border: none;
  box-shadow: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 14px;
}
.sp-menu-nav { display: flex; flex-direction: column; gap: 0; text-align: center; }
.sp-menu-nav a {
  color: #fff;
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 3;
  text-decoration: none;
}
.sp-menu-book {
  align-items: center;
  background: #b22222;
  color: #fff;
  display: flex;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  letter-spacing: 3px;
  margin-top: 28px;
  text-decoration: none;
  width: 160px;
}

/* =====================================
  SP 共通・ベース
===================================== */
@media (max-width: 999px) {
  :root {
    --color-navy: #0d1e3d;
    --color-navy-mid: #142850;
    --color-gold: #d2b56c;   /* PCと統一 */
    --color-crimson: #b22222;
    --color-blue: #2a4f98;
    --color-text: #111111;
    --color-bg: #f5f2ec;
  }
  body {
    background: var(--color-navy);
    color: #fff;
    font-family: 'Noto Serif JP','Shippori Mincho',serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .07em;
    line-height: 1.8;
  }
  .pc { display: none; }
  /* SPでは全<section>の左paddingを強制ゼロ。
     個別の左右余白は内側コンテナ(.text-block / .aper-content-inner / .comm-text /
     .inno-text)で持たせること。
     ※<section>に直接padding-leftを書いても!importantで無効化される点に注意 */
  section { padding-left: 0 !important; }

  /* MV */
  #mv { background: var(--color-navy-mid); height: 100svh; min-height: 580px; overflow: hidden; position: relative; width: 100%; }  /* フェードイン前は濃紺（少し明るめ）*/
  #mv .fv-video { animation: mvVideoFadeIn 2.8s ease-out forwards; filter: brightness(1.05) saturate(1.10) contrast(1.00); height: 100%; inset: 0; object-fit: cover; object-position: center 8%; opacity: 0; position: absolute; width: 100%; z-index: 0; }  /* PC色調に統一 ＋ 上へシフト ＋ フェードイン */
  #mv .overlay { background: var(--color-navy-mid); inset: 0; opacity: .2; pointer-events: none; position: absolute; z-index: 1; }  /* PC(0.2)に統一 */
  #mv::after {
    background: linear-gradient(to bottom, rgba(13,30,61,0) 0%, rgba(13,30,61,0) 52%, rgba(13,30,61,0.5) 75%, rgba(13,30,61,1) 100%);
    bottom: 0; content: ''; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 2;
  }
  #mv .mv-center {
    inset: 0; pointer-events: none; position: absolute; z-index: 10;
    /* flex 解除 ── tagline / logo それぞれを absolute で独立配置 */
  }
  #mv .logo-wrap { inset: 0; position: absolute; }
  #mv .tagline {
    color: #fff; font-family: 'Noto Serif JP',serif; font-size: clamp(14px,4.5vw,22px);
    font-weight: 400; left: 50%; letter-spacing: 4px; line-height: 2.2;   /* 行間広く */
    position: absolute; text-align: center; text-shadow: 0 2px 12px rgba(13,30,61,.5);
    top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  }
  #mv .mv-logo-img { display: block; filter: drop-shadow(0 2px 10px rgba(13,30,61,.45)); height: auto; left: 50%; position: absolute; top: 74svh; transform: translateX(-50%); width: clamp(140px,52vw,200px) !important; }
  .side-nav-wrap { display: none !important; }

  /* スクロールサイン */
  .mv-scroll { align-items: center; animation: mvFadeUp 1.8s 2.8s forwards; bottom: 24px; display: flex; flex-direction: column; left: 50%; opacity: 0; position: absolute; transform: translateX(-50%); z-index: 10; }
  .mv-scroll-line { background: rgba(255,255,255,.25); display: block; height: 56px; overflow: hidden; position: relative; width: 1px; }
  .mv-scroll-line::after {
    animation: scrollFlow 2.4s ease-in-out 3.4s infinite;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
    content: ''; height: 50%; left: 0; position: absolute; right: 0; top: 0;
  }

  /* INTRO */
  #intro { background: var(--color-navy); padding: 60px 0 32px; }
  #intro .text-block { display: flex; flex-direction: column; gap: 20px; padding: 0 44px; position: relative; z-index: 3; }
  #intro .text-block h2 { color: var(--color-gold); font-family: 'Cormorant Garamond',serif; font-size: clamp(36px,12vw,52px); font-weight: 600; line-height: 1; }
  #intro .text-block span:first-child { display: block; font-size: .5em; }
  #intro .text-block .body { color: rgba(255,255,255,.88); font-size: 13px; line-height: 2; }
  #intro .text-block .body p { margin: 0; }
  #intro .text-block .body p.spacer { line-height: .8; }
  #intro .text-block .body br { display: none; }  /* SPでは改行無効 */
  .intro-photos { height: 72vw; margin: 36px 44px 0; overflow: visible; position: relative; }
  .intro-photo { border-radius: 3px; overflow: hidden; position: absolute; }
  .intro-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
  .intro-photo--1 { height: 56vw; left: 0; top: 0; width: 85%; z-index: 1; }
  .intro-photo--2 { bottom: 0; height: 30vw; right: 0; width: 42%; z-index: 2; }

  /* PLACE */
  #place { background: var(--color-navy); display: flex; flex-direction: column; padding: 32px 0; }
  .place-photos { height: 72vw; margin: 36px 44px 0; order: 2; overflow: visible; position: relative; }
  .place-photo { border-radius: 3px; overflow: hidden; position: absolute; }
  .place-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
  .place-photo--1 { height: 56vw; right: 0; top: 0; width: 85%; z-index: 1; }  /* INTROと逆：右寄せ */
  .place-photo--2 { bottom: 0; height: 30vw; left: 0; width: 42%; z-index: 2; }  /* INTROと逆：左下 */
  #place .text-block { display: flex; flex-direction: column; gap: 20px; order: 1; padding: 0 44px; }
  #place .text-block h2 { color: var(--color-gold); font-family: 'Cormorant Garamond',serif; font-size: clamp(36px,12vw,52px); font-weight: 600; line-height: 1; }
  #place .text-block span:first-child { display: block; font-size: .5em; }
  #place .text-block .body { color: rgba(255,255,255,.88); font-size: 13px; line-height: 2; }
  #place .text-block .body p { margin: 0; }
  #place .text-block .body p.spacer { line-height: .8; }
  #place .text-block .body br { display: none; }  /* SPでは改行無効 */

  /* APERITIVO */
  #aperitivo { background: var(--color-navy); padding-bottom: 88px; }
  .aper-sticky-img { height: 72vw; overflow: hidden; position: relative; width: 100%; }  /* 60vw → 72vw 天地大きく */
  .aper-sticky-img img { display: block; height: 100%; object-fit: cover; position: static; width: 100%; }
  .aper-sticky-overlay { display: none; }
  .aper-content { background: transparent; padding: 0; position: static; }
  .aper-content-inner { display: flex; flex-direction: column; padding: 24px 44px 0; }  /* 40px→24px で隙間狭く、左右44px */
  .aper-text { flex: none; margin-bottom: 32px; text-align: left; }
  #aperitivo .course-tag { color: var(--color-gold); display: block; font-family: 'Cormorant Garamond',serif; font-size: 14px; letter-spacing: .4em; margin-bottom: 8px; text-transform: lowercase; }
  #aperitivo .en-title { color: #fff; font-family: 'Cormorant Garamond',serif; font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
  #aperitivo .ja-sub { color: rgba(255,255,255,.7); display: block; font-size: 12px; letter-spacing: 6px; margin-bottom: 20px; }
  #aperitivo .body { color: rgba(255,255,255,.85); font-size: 13px; line-height: 2; text-align: left; }
  #aperitivo .body p { margin: 0; }
  #aperitivo .body p.spacer { line-height: .8; }
  .aper-imgs { align-self: auto; display: flex; flex-direction: row; gap: 8px; }
  .aper-sq-img { aspect-ratio: 1 / 1; border-radius: 3px; flex: 1; height: auto; min-width: 0; overflow: hidden; }
  .aper-sq-img img { display: block; height: 100%; object-fit: cover; width: 100%; }

  /* COMMOZIONE */
  #commozione { background: var(--color-navy); display: flex; flex-direction: column; overflow: visible; padding: 0 0 56px; }
  .comm-main-img { flex: none; height: 75vw; order: 1; overflow: hidden; position: relative; width: 100%; }  /* 60vw→75vw：画像を縦に広く＝クロップ量を抑える */
  .comm-main-img img { object-position: center 60%; }  /* 主役が下寄りの料理写真に合わせ焦点を10%下へ（50%→60%）*/
  .comm-text { flex: none; order: 2; padding: 36px 44px 0; text-align: left; }
  .comm-text .course-tag { color: var(--color-gold); display: block; font-family: 'Cormorant Garamond',serif; font-size: 14px; letter-spacing: .4em; margin-bottom: 8px; text-transform: lowercase; }
  .comm-title { color: #fff; font-family: 'Cormorant Garamond',serif; font-size: 26px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
  .comm-ja-sub { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: 6px; margin: 6px 0 16px; }
  .comm-desc { color: rgba(255,255,255,.88); font-size: 13px; line-height: 2; margin-bottom: 20px; }
  .comm-desc br { display: none; }  /* SPでは改行無効 */
  .comm-price { line-height: 1.6; margin-bottom: 4px; }
  .comm-price-num { color: #fff; font-family: 'Noto Serif JP',serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; }
  .comm-price-tax { color: #fff; font-size: 11px; letter-spacing: 1px; margin-left: 4px; }
  .comm-price-note { color: rgba(255,255,255,.6); font-size: 10px; line-height: 1.8; margin-bottom: 20px; white-space: normal; }
  .comm-menu-btn { align-self: flex-start; background: var(--color-gold); border-radius: 4px; color: #fff; display: inline-block; font-family: 'Cormorant Garamond',serif; font-size: 11px; font-weight: 700; letter-spacing: .5em; margin-bottom: 28px; padding: 4px 20px; text-decoration: none; }

  /* INNOVAZIONE */
  #innovazione { background: var(--color-navy); display: flex; flex-direction: column; padding: 0 0 56px; }
  .inno-img { border-radius: 0; height: 75vw; max-width: 100%; order: 1; overflow: hidden; width: 100%; }  /* 60vw→75vw：縦に広く */
  .inno-img img { display: block; height: 100%; object-fit: cover; object-position: center 60%; width: 100%; }  /* 焦点を10%下へ（50%→60%）*/
  .inno-text { align-items: flex-start; display: flex; flex-direction: column; order: 2; padding: 36px 44px 0; text-align: left; }  /* 左右44px、順序2（後に） */
  .inno-text .course-tag { color: var(--color-gold); display: block; font-family: 'Cormorant Garamond',serif; font-size: 14px; letter-spacing: .4em; margin-bottom: 8px; text-transform: lowercase; }
  .inno-title { color: #fff; font-family: 'Cormorant Garamond',serif; font-size: 26px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
  .inno-ja-sub { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: 6px; margin: 6px 0 16px; }
  .inno-desc { color: rgba(255,255,255,.88); font-size: 13px; line-height: 2; margin-bottom: 20px; }
  .inno-desc br { display: none; }  /* SPでは改行無効 */
  .inno-price { line-height: 1.6; margin-bottom: 4px; }
  .inno-price-num { color: #fff; font-family: 'Noto Serif JP',serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; }
  .inno-price-tax { color: #fff; font-size: 11px; letter-spacing: 1px; margin-left: 4px; }
  .inno-price-note { color: rgba(255,255,255,.6); font-size: 10px; line-height: 1.8; margin-bottom: 20px; }
  .inno-menu-btn { align-self: flex-start; background: var(--color-gold); border-radius: 4px; color: #fff; display: inline-block; font-family: 'Cormorant Garamond',serif; font-size: 11px; font-weight: 700; letter-spacing: .5em; margin-bottom: 32px; padding: 4px 20px; text-decoration: none; }

  /* FOOTER */
  #footer { background: #edf3f6; overflow: visible; padding: 52px 44px 80px; }  /* 薄いブルーグレー（旧 var(--color-bg) ベージュ）*/
  /* foot-leftは display: contents で箱を消し、子要素を foot-inner の直下flex itemに昇格させる */
  .foot-inner { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; padding: 0; }
  .foot-left { display: contents; }
  .foot-logo { margin-bottom: 32px; order: 1; width: 180px; }
  .foot-logo img { display: block; height: auto; width: 100%; }
  #footer .foot-nav { display: none; }   /* SPでは非表示 */
  #footer .foot-book { display: none; }  /* SPでは非表示 */
  .foot-right { display: flex; flex: none; flex-direction: column; gap: 12px; max-width: 100%; order: 2; }

  /* SP：パートナーロゴ＋© の下段（.foot-bottom）はセンター縦並び */
  .foot-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding: 0;
  }
  .foot-partner-logos {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
  }
  .foot-partner-logos a { display: block; opacity: .75; }
  .foot-partner-logos img { display: block; height: auto; width: 110px; }
  .foot-name { color: var(--color-text); font-size: 15px; font-weight: 500; letter-spacing: 2px; margin-bottom: 4px; }
  .foot-table { border-collapse: collapse; color: var(--color-text); font-size: 11px; width: 100%; }
  .foot-table tr { vertical-align: top; }
  .foot-table td { letter-spacing: 1px; line-height: 1.8; padding: 3px 12px 3px 0; }
  .foot-label { color: var(--color-text); font-weight: 500; min-width: 72px; white-space: nowrap; }
  .foot-sub { color: rgba(0,0,0,.5); display: block; font-size: 10px; line-height: 1.6; }
  #footer .foot-notes { color: rgba(0,0,0,.5); font-size: 10px; letter-spacing: .5px; line-height: 1.9; }
  #footer .foot-notes p { margin: 0; }
  .foot-tel-wrap { display: flex; flex-direction: column; gap: 4px; }
  .foot-tel { color: var(--color-text); font-size: 13px; font-weight: 500; letter-spacing: 1px; margin: 0; }
  .foot-addr { color: var(--color-text); font-size: 11px; letter-spacing: .5px; margin: 0; }
  #footer .foot-google { color: var(--color-navy); font-size: 11px; letter-spacing: 1px; text-decoration: none; }
  .foot-map { background: #ccc; border-radius: 2px; height: 48vw; overflow: hidden; width: 100%; }
  .foot-map iframe { filter: grayscale(100%) contrast(.85); height: 100%; width: 100%; }
  .foot-copyright { color: rgba(0,0,0,.4); display: block; font-family: 'Cormorant Garamond',serif; font-size: 10px; letter-spacing: 2px; margin-top: 0; text-align: center; }

  /* BOOK NOW 固定ボタン */
  .book-now-fixed { align-items: center; background: var(--color-crimson); bottom: 0; color: #fff; display: flex; font-family: 'Cormorant Garamond',serif; font-size: 15px; font-weight: 700; height: 52px; justify-content: center; letter-spacing: 3px; position: fixed; right: 0; text-decoration: none; width: 160px; z-index: 3001; }

} /* end @media 999px */

/* ============================================================
  LIGHT THEME（薄下地バージョン）— SP版
  light-theme.css の SP 向けブロックから統合
============================================================ */
@media (max-width: 999px) {

  body { background: var(--bg-light) !important; color: var(--text-dark); }

  /* SPヘッダー：スクロール後の背景はネイビー（ロゴ白・ハンバーガー白のため可読性を担保） */
  #sp-header.is-scrolled { background: rgba(13,30,61,0.94); }
  .sp-hamburger span    { background: #fff; }

  /* SPフルスクリーンメニュー：ネイビー＋白文字 */
  .sp-menu { background: rgba(13,30,61,0.97); }
  .sp-menu-close { color: rgba(255,255,255,0.7); }
  .sp-menu-nav a { color: #fff; }

  /* 各セクション：INTRO / PLACE / APERITIVO / INNOVAZIONE は --bg-light、
     COMMOZIONE はアクセントの --bg-light-sub。
     ※ #aperitivo 自体も --bg-light にしないと、
        padding-bottom の 88px 分だけネイビーが見えてしまう */
  #intro,
  #place,
  #aperitivo,
  .aper-content,
  #innovazione {
    background: var(--bg-light) !important;
  }
  #commozione {
    background: var(--bg-light-sub) !important;
  }

  /* テキストカラーを反転 */
  #intro .text-block .body,
  #place .text-block .body,
  #aperitivo .body,
  .comm-desc,
  .inno-desc {
    color: var(--text-dark-soft);
  }
  #aperitivo .en-title,
  #aperitivo .ja-sub,
  .comm-title,
  .comm-ja-sub,
  .inno-title,
  .inno-ja-sub,
  .comm-price-num,
  .comm-price-tax,
  .inno-price-num,
  .inno-price-tax {
    color: var(--text-dark);
  }
  .comm-price-note,
  .inno-price-note {
    color: var(--text-dark-sub);
  }

  /* MV 下端グラデも撤去（video ぱつん終わり） */
  #mv { background: var(--color-navy-mid); }  /* フェードイン前は濃紺（body の bg-light を上書き・少し明るめ）*/
  #mv::after { background: none !important; }

  /* FOOTER — オフホワイト */
  #footer { background: #edf3f6 !important; }  /* 薄いブルーグレー（旧 #f8f8f8）*/

} /* end @media 999px (light theme) */

/* ================================================
SP / PC 共通 — MV動画フェードインキーフレーム
（PC は pc.css 側にも同じものがある。どちらかで定義されていれば動作するが
  sp.css 単体でも完結するよう念のため記述）
================================================ */
@keyframes mvVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}