/* =========================================================
   styles.css — 海のごちそうWATANABE
   - スマホHERO 100vh対策（svh/dvh）
   - サイドナビ5項目
   - 予約ボタン：PCのみ白文字 / SPは黒文字（擬似クラス含む）
========================================================= */

/* =========================
   Base / Vars / Typography
========================= */
html, body { height: 100%; margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

:root{
  --side: 88px;
  --ff-sans: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --ff-mincho: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --c-text: #222;
  --c-muted: #555;
  --c-border: #eee;
  --c-bg: #fff;
  --c-dark: #0f1115;
}

.site-root{
  color: var(--c-text);
  background: var(--c-bg);
  font: 16px/1.6 var(--ff-sans);
  overflow-x: hidden;
}

.site-root img { max-width: 100%; height: auto; display: block; }
.site-root a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; left: -9999px; }

/* Utilities */
.sec { padding: 72px 7vw; background: #fff; }
.container { max-width: 1200px; margin: 0 auto; position: relative; }

/* =========================
   Side Nav（PC固定 / SPドロワー）
========================= */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.side-nav{
  position: fixed; top: 0; bottom: 0; left: 0; right: auto;
  width: var(--side);
  background: #fff;
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  padding: 14px 10px; gap: 18px;
  z-index: 100;
}

/* ロゴ（画像対応推奨） */
.side-nav__logo{ display: block; padding: 6px 0; }
.side-nav__logo img{ display: block; width: 58px; height: auto; }

/* 縦ナビ（5項目固定） */
.side-nav__nav{ width: 100%; display: flex; justify-content: center; }
.side-nav__list{
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.side-nav__list a{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--ff-mincho);
  font-weight: 600;
  letter-spacing: .12em;
  padding: 6px 2px;
  border-radius: 0;
}
.side-nav__list a:hover{ background: #f5f5f5; }

/* 予約ボタン（モバイルファースト）
   - 既定（SP想定）：白背景×黒文字
   - PC(>=769px)：黒背景×白文字
*/
.side-nav__extras{ margin-top: 14px; }
.side-nav__cta{
  display: inline-block;
  writing-mode: vertical-rl; text-orientation: mixed;
  background: #fff; color: #000;
  border: 1px solid #000; border-radius: 0;
  padding: 14px 8px;
  font-weight: 700; letter-spacing: .15em;
}
/* SPでは黒文字を厳密に保持（擬似クラス含む） */
.side-nav__cta:link,
.side-nav__cta:visited,
.side-nav__cta:hover,
.side-nav__cta:active,
.side-nav__cta:focus{
  color: #000; -webkit-text-fill-color: #000;
  background: #fff; border-color: #000;
}
/* PCのみ白文字（擬似クラス含めて上書き） */
@media (min-width: 769px){
  .side-nav__cta,
  .side-nav__cta:link,
  .side-nav__cta:visited,
  .side-nav__cta:hover,
  .side-nav__cta:active,
  .side-nav__cta:focus{
    color: #fff; -webkit-text-fill-color: #fff;
    background: #000; border-color: #000;
  }
}

/* Instagram（予約ボタンの下） */
.side-nav__sns{
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center;
}
.side-nav__sns .insta-link{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border: 1px solid #ddd; background: #fff;
}
.side-nav__sns .icon-instagram{
  width: 22px; height: 22px; fill: #000; filter: none;
  transition: opacity .2s ease, transform .2s ease;
}
.side-nav__sns .insta-link:hover .icon-instagram{
  opacity: .85; transform: translateY(-1px);
}

/* =========================
   Shell / Header
========================= */
.site-shell{
  margin-left: var(--side);
  min-height: 100%;
  position: relative;
  width: calc(100% - var(--side));
}
.site-header{
  position: absolute; top: 0; left: 0; right: 0;
  height: 64px; display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; padding: 8px 18px; z-index: 110;
}

/* SPメニューボタン（チェックボックスで開閉） */
.menu-btn{
  display: none; /* PC非表示 */
  width: 42px; height: 36px; border: 1px solid #ddd; background: #fff; border-radius: 8px;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.menu-btn__bar{ width: 18px; height: 2px; background: #222; display: block; }

/* オーバーレイ（SP時に表示） */
.nav-overlay{ /* SPで可視化（下のメディアクエリで） */ }

/* =========================
   HERO（3枚フェード）— SP全画面対応
========================= */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;        /* SPのURLバー考慮 */
  overflow: hidden; background: #000;
}
@supports (min-height: 100dvh){
  .hero{ min-height: 100dvh; } /* 新世代ブラウザでの正確な全画面 */
}
.hero__slide{ position: absolute; inset: 0; opacity: 0; }
.hero__slide img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(.8);
}
@keyframes heroFade{
  0%{opacity:0;} 6%{opacity:1;} 30%{opacity:1;} 36%{opacity:0;} 100%{opacity:0;}
}
.hero__slide.is-1{ animation: heroFade 18s infinite ease-in-out; animation-delay: 0s; }
.hero__slide.is-2{ animation: heroFade 18s infinite ease-in-out; animation-delay: 6s; }
.hero__slide.is-3{ animation: heroFade 18s infinite ease-in-out; animation-delay: 12s; }

.hero__content{ position: relative; z-index: 1; padding: clamp(72px,10vh,120px) 7vw 64px; color:#fff; }
.hero__kicker{ font-size: clamp(22px,3.8vw,36px); font-family: var(--ff-mincho); opacity: .95; }
.hero__title { font-size: clamp(26px,5vw,64px); line-height:1.05; font-weight:700; margin:.1em 0 .2em; font-family: var(--ff-mincho); }
.hero__sub   { font-size:14px; letter-spacing:.12em; opacity:.9; font-family: var(--ff-mincho); }

.hero__scroll{
  position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-size: 12px; color:#fff; opacity:.9; z-index:1;
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:36px; margin:6px auto 0;
  background:#fff; opacity:.75; animation: drop 1.4s infinite;
}
@keyframes drop{ 0%{transform:translateY(0);} 50%{transform:translateY(10px);} 100%{transform:translateY(0);} }

@media (prefers-reduced-motion: reduce){
  .hero__slide{ animation: none !important; }
  .hero__slide.is-1{ opacity: 1; }
}
/* ========== Hero：白帯の段組みタイトル（画像レイアウト風） ========== */
.hero-banner{
  display:grid;
  grid-template-columns:auto 1fr;  /* 左：帯タイトル、右：英字タグ */
  align-items:end;
  gap:clamp(12px,2vw,24px);
}

.hero-stacked{
  margin:0;
  display:grid;
  gap:8px;
}
.hero-stacked span{
  display:inline-block;
  padding:.22em .6em;
  background:rgba(255,255,255,.92);
  color:#111;
  line-height:1.08;
  font-family: var(--ff-mincho);
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(28px,5.8vw,64px); /* 行ごとに大きく */
  box-shadow:0 2px 18px rgba(0,0,0,.03);
}

.hero-tag{
  align-self:end;
  margin-bottom:.25em;
  color:#fff;
  letter-spacing:.18em;
  font-size:clamp(12px,1.3vw,14px);
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  white-space:nowrap;
}

.hero-lead{
  margin-top:14px;
  display:inline-block;
  padding:10px 14px;
  background:rgba(255,255,255,.9);
  color:#111;
  font-family: var(--ff-mincho);
  font-size:clamp(14px,2vw,16px);
  line-height:1.9;
}

@media (max-width:768px){
  .hero-banner{
    grid-template-columns:1fr;  /* SPは縦積み */
    gap:10px;
  }
  .hero-stacked span{
    font-size:clamp(24px,8vw,40px);
  }
  .hero-tag{
    margin:0;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
  }
}

/* =========================
   Section 1：ご挨拶（白背景／中央寄せ）
========================= */
.sec-greeting-center{
  background:#fff; padding:100px 7vw; text-align:center;
}
.greetc-wrap{ max-width:820px; margin:0 auto; }
.greetc-title{
  margin:0 0 18px; font-family: var(--ff-mincho);
  font-weight:700; letter-spacing:.08em; font-size:clamp(26px,3.6vw,40px); line-height:1.3;
}
.greetc-body{ color:#444; font-family: var(--ff-mincho); }
.greetc-body p{ margin:0 0 1.2em; font-size:clamp(15px,1.6vw,17px); line-height:2; }

/* =========================
   Section 2：固定背景＋右下キャプション
========================= */
.sec-cuisine-static{
  position: relative; z-index: 0; min-height: 100vh; overflow: hidden; padding: 0;
  background-image: url("../images/top/img_ss02_bg.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed;
}
.cuisine-static__caption{
  position: absolute; z-index: 1; right: 7vw; bottom: 8vh;
  width: min(70ch, 48vw);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  padding: clamp(18px, 2.2vw, 28px);
  color: #111;
}
.cuisine-static__title{
  margin:0 0 10px; font-family: var(--ff-mincho);
  font-weight:700; letter-spacing:.06em; font-size:clamp(24px,3.8vw,40px); line-height:1.25;
}
.cuisine-static__text{
  margin:0; font-family: var(--ff-mincho);
  font-size:clamp(15px,1.6vw,17px); line-height:1.95; color:#333;
}

/* =========================
   Section 3：Gallery（マルチ画像）
========================= */
/* ===== Gallery：均一タイル（3×4） ===== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* PC: 3列 */
  gap: 14px;
}

.gg-item{
  position: relative;
  overflow: hidden;
  background:#f7f7f7;
  border:1px solid #eee;
  aspect-ratio: 4 / 3;            /* すべて同じ比率で統一 */
}

.gg-item img{
  width:100%; height:100%;
  object-fit: cover;               /* 中央トリミングで均一表示 */
  object-position: center;
  display:block;
  transition: transform .35s ease, filter .35s ease;
}
.gg-item:hover img{ transform: scale(1.03); filter: brightness(1.02) contrast(1.02); }

/* タブレット：2列 */
@media (max-width: 1024px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* スマホ：1列（比率は少し横長に） */
@media (max-width: 600px){
  .gallery-grid{ grid-template-columns: 1fr; gap: 10px; }
  .gg-item{ aspect-ratio: 16 / 10; }
}

/* 旧マソンリが残っている場合の無効化（削除できない時用） */
.gallery-masonry{ display:none !important; }

/* Gallery CTA */
.gallery-cta-wrap{
  text-align: center;
  margin-block: clamp(48px, 10vh, 120px); /* 上下ゆったり */
}

.btn{
  display: inline-block;
  padding: 12px 26px;
  letter-spacing: .08em;
  text-decoration: none;
  line-height: 1;
  border-radius: 0;               /* 角丸なし（全体方針） */
  transition: transform .15s ease, opacity .15s ease;
}
.btn-black{
  background: #000; color: #fff; -webkit-text-fill-color:#fff;
  border: 1px solid #000;
}
.btn-black:hover,
.btn-black:focus{ opacity:.9; transform: translateY(-1px); }
.btn-black:focus-visible{ outline: 2px solid #111; outline-offset: 2px; }

/* スマホでの押しやすさ少しUP */
@media (max-width: 600px){
  .btn{ padding: 14px 28px; }
}


/* =========================
   Footer
========================= */
.site-footer{
  background: var(--c-dark); color:#e9edf2;
  padding: 60px 7vw; border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr .9fr;
  gap: 28px; align-items:start;
}
.footer-col{ min-width: 0; }
.footer-name{
  margin:0 0 10px; font-family: var(--ff-mincho);
  font-weight:700; letter-spacing:.08em; font-size: clamp(18px,2.4vw,22px);
}
.footer-address{
  margin:0; font-style:normal; color:#c9d2dc; line-height:1.9;
}
.footer-address a{ color:inherit; text-decoration: underline; text-underline-offset:2px; }
.footer-links{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
}
.footer-links a{
  display:inline-block; color:#e9edf2; font-size:14px; letter-spacing:.03em; padding:4px 0;
  border-bottom:1px dashed transparent; transition: opacity .2s ease, border-color .2s ease;
}
.footer-links a:hover{ opacity:.9; border-color: rgba(233,237,242,.25); }
.footer-notes{ color:#b5c0cb; font-size:12px; line-height:1.8; }
.footer-note{ margin:0 0 10px; }
.footer-copy{ margin:0; opacity:.85; }

/* =========================
   Responsive
========================= */
@media (max-width: 1200px){
  .gallery-masonry{ column-count: 3; }
}
@media (max-width: 900px){
  .gallery-masonry{ column-count: 2; column-gap: 12px; }
  .g-item{ margin-bottom: 12px; }
}
@media (max-width: 768px){
  :root{ --side: 0px; }

  .site-shell{ margin-left: 0; width: 100%; }
  .menu-btn{ display: inline-flex; } /* SPで表示 */

  /* ドロワー（チェックボックスで開閉） */
  .side-nav{
    width: 82vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .28s ease;
    align-items: flex-start;
  }
  .nav-toggle:checked ~ .side-nav{ transform: translateX(0); }

  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
    z-index: 90;
  }
  .nav-toggle:checked ~ .nav-overlay{ opacity: 1; visibility: visible; }

  /* 縦書き→横書き（フォントは明朝のまま） */
  .side-nav__list a,
  .side-nav__cta{
    writing-mode: initial; text-orientation: initial;
  }

  /* HERO：テキスト余白少しタイトに */
  .hero__content{ padding: 72px 6vw 56px; }

  /* iOS対策：固定背景をscrollにフォールバック */
  .sec-cuisine-static{ background-attachment: scroll; }

  /* Section base */
  .sec { padding: 56px 6vw; }

  /* Instagramアイコン少し大きく */
  .side-nav__sns .icon-instagram{ width: 24px; height: 24px; }

  /* Footer */
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-notes{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .sec-gallery{ padding-top: 72px; padding-bottom: 72px; }
  .gallery-masonry{ column-count: 1; column-gap: 10px; }
  .g-item{ margin-bottom: 10px; border-width: 0; }
  .g-wide img{ aspect-ratio: 16 / 10; }
  .g-tall img{ aspect-ratio: 3 / 4; }

  .site-footer{ padding: 48px 6vw; }
  .footer-grid{ grid-template-columns: 1fr; gap: 18px; }
}
/* 右側は透過PNGのみ */
.origin-mapbox{
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50vw;
  pointer-events: none;
}
.origin-diagonal{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #eceff1 60%, transparent 60%);
  z-index: 0;
}
.origin-map{
  position: absolute;
  right: 6vw; top: 6vw;
  height: calc(100% - 12vw);
  width: auto;
  z-index: 1; /* 斜めトーンの上 */
  pointer-events: none;
}

/* SP：地図を下に縦積み、中央に大きく */
@media (max-width: 980px){
  .origin-mapbox{
    position: relative;
    width: 100%;
    height: auto;
    right: auto; top: auto; bottom: auto;
    margin-top: 24px;
  }
  .origin-diagonal{ display: none; }
  .origin-map{
    position: relative;
    right: auto; top: auto;
    width: 90%; height: auto; max-width: 680px;
    margin: 0 auto;
  }
}
/* =========================
   Section：献立の出発点（土台を復元）
========================= */
.sec-origin{
  position: relative;
  background: #f6f6f6;
  overflow: hidden;
  padding: 84px 0;
}
.origin-inner{ position: relative; z-index: 2; }   /* 本文を最前に */
.origin-content{ max-width: 720px; }
.mincho{ font-family: var(--ff-mincho); }

.origin-heading{
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.5;
  letter-spacing: .06em;
}
.origin-body p{
  margin: 0 0 1.2em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 2;
  color: #333;
}
.origin-note{ font-size: 14px; color:#555; }
.origin-photo{ margin: 28px 0 0; max-width: 520px; }
.origin-photo img{ width: 100%; height: auto; display: block; }

/* 右側：透過PNGのみ（ z-index 調整 ） */
.origin-mapbox{
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50vw;
  pointer-events: none;
  z-index: 1;                        /* 斜めトーン/地図は本文の背面に */
}
.origin-diagonal{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #eceff1 60%, transparent 60%);
  z-index: 0;
}
.origin-map{
  position: absolute;
  right: 6vw; top: 6vw;
  height: calc(100% - 12vw);
  width: auto;
  z-index: 1;
  pointer-events: none;
}

/* SP：縦積み */
@media (max-width: 980px){
  .sec-origin{ padding: 64px 0; }
  .origin-content{ max-width: none; padding: 0 6vw; }

  .origin-mapbox{
    position: relative;
    width: 100%;
    height: auto;
    right: auto; top: auto; bottom: auto;
    margin-top: 24px;
  }
  .origin-diagonal{ display: none; }
  .origin-map{
    position: relative;
    right: auto; top: auto;
    width: 90%; height: auto; max-width: 680px;
    margin: 0 auto;
  }
}
/* ========== Mosaic Cards（1+1+2 カラム：img + overlay） ========== */
.sec-mosaic{
  background:#fff;
  padding: 0; /* 端まで広げる */
}
.mosaic{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "a a"   /* 1段目：フル幅 */
    "b b"   /* 2段目：フル幅 */
    "c d";  /* 3段目：2カラム */
  gap: 2px;              /* 細い仕切り */
  background:#fff;
}

/* カード本体（壊れない実装） */
.card{
  position: relative;
  min-height: 48vh;
  background:#111;       /* 読込前の下地 */
  overflow: hidden;
}
.card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* 1段目・2段目を高く（PC） */
.mosaic > .card:nth-child(1),
.mosaic > .card:nth-child(2){
  min-height: 90vh;  /* 好みで 60〜70vh に */
}

/* SP時も少し高めに（必要なら） */
@media (max-width: 900px){
  .mosaic > .card:nth-child(1),
  .mosaic > .card:nth-child(2){
    min-height: 72vw; /* 画面幅基準。60〜90vwで調整 */
  }
}

/* 画像・テキスト・オーバーレイの重ね順を固定 */
.card{
  position: relative;
  min-height: 48vh;
  background:#111;
  overflow: hidden;
}
.card__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  z-index: 0;                     /* ← 画像は最背面 */
}

/* ★ オーバーレイは ::after に変更して最前面（テキストの一つ下）へ */
.card::after{
  content: "";
  position: absolute; inset: 0;
  background: #000;
  opacity: var(--overlay, .65);   /* ← 濃さをここで調整（.80〜.85 推奨） */
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;                     /* ← 画像の上、テキストの下 */
}
.card:hover::after{
  opacity: calc(var(--overlay, .65) + .10); /* ホバーでさらに濃く */
}

/* テキストは最前面 */
.card__cap{ position: absolute; z-index: 2; }

/* セクションごとの既定濃さ（必要に応じて変更） */
.sec-mosaic{ --overlay: .65; }


.card__cap{
  position:absolute;
  max-width: 560px;
  color:#fff;
  line-height:1.9;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  font-size:14px;
}

/* デフォルト＝左下配置 */
.card__cap{ left:6%; bottom:8%; text-align:left; }

/* 位置バリエーション（画像に合わせて調整） */
.card--tr .card__cap{ top:12%; right:6%; left:auto; bottom:auto; text-align:right; }
.card--br .card__cap{ right:6%; bottom:8%; left:auto; text-align:right; }
.card--bl .card__cap{ left:6%; bottom:8%; }

.card__ttl{
  margin:0 0 .4em;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight:700;
  letter-spacing:.06em;
}
.card__txt{ margin:0 0 .8em; color:#f2f4f6; }
.card__link{
  display:inline-block; color:#fff; opacity:.92;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(255,255,255,.7);
  padding-bottom:2px;
}
.card__link:hover{ opacity:1; }

/* グリッド割当 */
.mosaic > .card:nth-child(1){ grid-area:a; }
.mosaic > .card:nth-child(2){ grid-area:b; }
.mosaic > .card:nth-child(3){ grid-area:c; min-height:46vh; }
.mosaic > .card:nth-child(4){ grid-area:d; min-height:46vh; }

/* SP：1カラム化 */
@media (max-width: 900px){
  .mosaic{
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }
  .card{ min-height: 56vw; }
  .card__cap{ left:6%; right:6%; max-width:none; }
  .card--tr .card__cap,
  .card--br .card__cap{ text-align:left; }
}

/* ========== おすすめプラン（フック） ========== */
.sec-plans{
  background:#fff;
  padding-top: 96px;            /* 余白やや広め */
  padding-bottom: 96px;
}
.plans-head{ text-align:center; margin-bottom: 28px; }
.plans-kicker{
  margin:0 0 6px; font-size:12px; letter-spacing:.18em; color:#666;
}
.plans-title{
  margin:0 0 8px; font-weight:700; letter-spacing:.08em;
  font-size: clamp(24px, 3.6vw, 36px);
}
.plans-desc{
  margin:0 auto; color:#555; line-height:1.9;
  max-width: 60ch; font-size:14px;
}

/* Grid */
.plan-grid{
  display:grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
}

/* Card (壊れない実装) */
.plan-card{
  position: relative; display:block; overflow:hidden;
  min-height: 42vh;                /* ベース高さ。1,2段目だけ上げたい場合は style="--h:60vh" で上書き可 */
  min-height: var(--h, 42vh);
  background:#111; border: 1px solid #eee;
  text-decoration: none; color: inherit;
}
.plan-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0; display:block;
}
/* 濃いめオーバーレイ */
.plan-card::after{
  content:""; position:absolute; inset:0;
  background:#000; opacity: .40;          /* ← 暗さはここを調整（.72〜.88） */
  transition: opacity .25s ease;
  z-index:1; pointer-events:none;
}
.plan-card:hover::after{ opacity:.86; }

/* Badge（角は丸くしない） */
.plan-badge{
  position:absolute; z-index:2; left:10px; top:10px;
  display:inline-block; padding:6px 10px;
  background:#fff; color:#111; border:1px solid #111; border-radius:0;
  font-size:12px; letter-spacing:.08em;
}

/* Caption（最前面） */
.plan-cap{
  position:absolute; z-index:2; left: 18px; right: 18px; bottom: 16px;
  color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.plan-ttl{
  margin:0 0 6px; font-weight:700; letter-spacing:.06em;
  font-size: clamp(18px, 2.2vw, 20px);
}
.plan-txt{
  margin:0 0 10px; color:#f2f4f6; font-size:14px; line-height:1.85;
}
.plan-meta{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.plan-price{
  font-family: var(--ff-mincho);
  font-size:16px; letter-spacing:.02em;
  background: rgba(0,0,0,.25);
  padding: 4px 8px; border: 1px solid rgba(255,255,255,.22);
}
.plan-cta{
  display:inline-block; padding:8px 12px;
  background:#000; color:#fff; border:1px solid #000; border-radius:0; /* 角を丸くしない */
  letter-spacing:.08em; font-size:13px;
}

/* Responsive */
@media (max-width: 1100px){
  .plan-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .plan-grid{ grid-template-columns: 1fr; }
  .plan-card{ min-height: 56vw; } /* 画面幅基準の高さに */
  .plan-cap{ left: 14px; right: 14px; bottom: 14px; }
}
/* ===== Sec2 調整：もっと右寄せ＋挿絵サイズ ===== */
.cuisine-inner{
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;     /* 右へ寄せる */
  align-items: center;
  padding: 8vh 3vw;              /* ← 右の余白を 7vw → 3vw に圧縮 */
}

.cuisine-card{
  width: min(640px, 44vw);       /* 右に寄せても窮屈にならない幅 */
  margin-left: auto;             /* 念のため右寄せを強制 */
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  padding: 26px 30px;
  backdrop-filter: saturate(140%) blur(2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.cuisine-head{
  display: flex; align-items: center;
  gap: 18px;                     /* タイトルと挿絵の間隔 */
  margin: 0 0 10px;
}
.cuisine-ttl{
  margin: 0; display: flex; align-items: center; gap: 14px;
  font-weight: 700; letter-spacing: .18em;
  font-size: 28px; line-height: 1;
}
.cuisine-line{ display:inline-block; width:64px; height:2px; background:#222; }

/* 挿絵（タイトル横） */
.cuisine-illus{
  width: 88px; height: auto; object-fit: contain;
  opacity: .95; flex: 0 0 auto;
}

@media (min-width: 1400px){
  .cuisine-inner{ padding-right: 0.1vw; } /* 超ワイド時はさらに右へ */
  .cuisine-illus{ width: 96px; }
}

@media (max-width: 900px){
  .cuisine-inner{ justify-content: center; padding: 64px 6vw; }
  .cuisine-card{ width: 88vw; padding: 22px; }
  .cuisine-ttl{ font-size: 22px; }
  .cuisine-illus{ width: 64px; }
}
/* ===== Sec2：カードの上下パディングを増量 ===== */
.cuisine-card{
  /* 上下（block）を大きめ、左右（inline）は現状相当 */
  padding: clamp(48px, 12vh, 120px) clamp(20px, 3vw, 36px);
}

/* SPはややタイトにしつつ、上下はしっかり確保 */
@media (max-width: 900px){
  .cuisine-card{
    padding: clamp(32px, 10vh, 72px) 18px;
  }
}
/* 献立の出発点セクション（#access）の余白＆背景を上書き */
section#access.sec-origin {
  background-color: #f5f5f5;
  padding-top: 80px;
  padding-bottom: 180px; /* 下方向にかなり余白 */
}
/* 献立の出発点：写真まわりの飾りフレーム */
.sec-origin .origin-photo {
  position: relative;
  display: inline-block;
  margin-top: 40px;      /* 余白はお好みで */
}

.sec-origin .origin-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 角にL字の飾り線を入れる */
.sec-origin .origin-photo::before,
.sec-origin .origin-photo::after {
  content: "";
  position: absolute;
  width: 48px;   /* 飾りの長さ：調整可 */
  height: 48px;
  border-color: #ccc;
  pointer-events: none;
}

/* 左上のL字 */
.sec-origin .origin-photo::before {
  top: 0;
  left: 0;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
}

/* 右下のL字 */
.sec-origin .origin-photo::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
}

/* おすすめプラン：PCでは4枚を1列に並べる */
@media (min-width: 1024px) {
  .sec-plans .plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
  }

  .sec-plans .plan-card {
    width: 100%;
  }
}
/* 小さなCTA：1カラム＋薄いグレー背景 */
.sec-mini-cta {
  background-color: #f5f5f5; /* 薄いグレーで画面100% */
}

.sec-mini-cta .mini-cta-grid {
  display: flex;
  justify-content: center;  /* 1カラムを中央寄せ */
}

.sec-mini-cta .mini-cta {
  text-align: center;
}