:root{
  --bg:#fbf7f1;
  --section-bg:#fcead0;
  --card:#fff;
  --accent:#b65b1f;
  --muted:#6b5b4b;
  --border:#e9dcc8;
  /* --maxw:1200px; */
  /* --header-h: 72px; */
  --glass: rgba(255,255,255,0.78);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding: 0;
  border: 0;
  background:var(--bg);
  color:#27221c;
}
a{
  color:inherit;
  text-decoration:none;
}
h1, h2, h3, p, li{
  /* font-family: 'Hannari', serif; */
    font-family: 'Sawarabi Mincho', serif;
}
/* ===== Header ===== */
/* 基本：固定ヘッダー */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: transparent;        /* 動画上では透明 */
  color: #222;                    /* 通常は濃い目の文字（黒） */
  transition: background-color .32s ease, color .28s ease, box-shadow .32s ease;
  -webkit-font-smoothing:antialiased;
}
/* header 内のテキスト／リンクは親の color を継承 */
.site-header a,
.site-header h1,
.site-header .main-nav a,
.site-header .menu-toggle {
  color: inherit;
  text-decoration: none;
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding: 12px 22px;
}
/* 動画上にいるとき（白文字） */
.site-header.light {
  color: #fff;                   /* 文字を白に */
  background: rgba(255,255,255,0);/* 透明（必要なら薄いグラデ追加） */
  box-shadow: none;
}

/* 動画外（背景が明るい）では背景を白にして文字を濃くする場合 */
.site-header.scrolled {
  color: #222;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px
}
.brand img{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:6px
}
.brand h1{
  font-size:1.05rem;
  margin:0;
  font-weight:700;
  color: #222;
}

/* nav */
nav.main-nav{
  margin-left:auto
}
nav.main-nav ul{
  display:flex;
  gap:22px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none
}
nav.main-nav a{
  font-weight:600;
  /* color:var(--muted) */
  color: #222;
}
.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:8px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:3px;
  width:22px;
  margin:3px 0;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease, background .25s;
}

/* mobile nav */
@media (max-width:768px){
  nav.main-nav{
    position:absolute;
    top:100%;
    right:12px;
    display:none
  }
  nav.main-nav.active{
    display:flex;
    flex-direction:column;
    width:150px;
    background:var(--glass);
    padding:12px;
    border-radius:5px;
    box-shadow:0 10px 22px rgba(0,0,0,0.12)
  }
  nav.main-nav ul{
    flex-direction:column;
    gap:8px
  }
  .menu-toggle{
    display:flex;
    margin-left:auto
  }
}

.nav.main-nav a,
.brand h1 {
  color: inherit;
}

/* 動画の上では白文字 */
.nav.main-nav a.light,
.brand h1.light {
  color: #fff;
}

/* pad body for fixed header */
body{
  /* padding-top:var(--header-h); */
  display:flex;
  flex-direction:column;
  min-height:100vh
}

/* ===== top_video ===== */
.top_video {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: block;
  /* isolation:isolate; */
}

/* 動画は文書の流れに沿わせて高さを自動にする（親の高さになる） */
.top_video > video {
  position: relative;     /* absolute -> relative/static に戻す */
  display: block;         /* ブロックとして親の高さを作る */
  width: 100vw;           /* 横幅は必ず画面幅に合わせる */
  max-width: 100%;
  height: auto;           /* 縦は自動で縮む */
  max-height: 64vh;      /* 画面高さを超えない */
  object-fit: cover;      /* 必要ならトリミング */
  object-position: center;
  margin: 0 auto;
  border: none;
}

/* キャプションを動画領域の真ん中に常に居させる */
.top_video .caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  width: 92%;
  pointer-events: none;
}

/* キャプションのフォントサイズを画面に合わせる */
.top_video .caption h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 4.2vw, 3rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.top_video .caption p {
  margin: 0;
  font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  color: rgba(255,255,255,0.92);
}


/* 下のセクションとの隙間をなくす（必要に応じて調整） */
.top_video + section,
.top_video + .content,
.top_video + main > * {
  margin-top: 0;  /* 下に無駄な余白があればここで潰す */
  padding-top: 0;
}

/* モバイル微調整（狭い画面での見切れ・高さのバランス） */
@media (max-width: 700px) {
  .top_video > video {
    width: 100vw;
    height: auto;
    max-height: calc(72vh); /* 必要ならスマホで高さを少し抑える */
  }
  .top_video .caption { width: 94%; padding: 0 8px; }
}
/* ===== Main layout container (pages) ===== */
.container{
  /* max-width:var(--maxw); */
  margin:0 auto;
  /* padding:24px; */
  box-sizing:border-box;
  width:100%;
}

/* ===== commitment section ===== */
/* commitment hero — 中央テキスト＋左右イメージのレイアウト */
.commitment-hero {
  padding: 56px 18px;
  /* background: linear-gradient(180deg, rgba(255,251,247,1), rgba(255,250,246,1)); */
  overflow: visible;
}
.commitment-hero__inner {
  display: grid;
  grid-template-columns: 1fr 460px 1fr; /* 左画像 / テキスト幅 / 右画像 */
  gap: 28px;
  align-items: center; /* 垂直中央揃え */
  max-width: var(--maxw);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 12px;
}

/* 画像エリア（左右） */
.ch-images { display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; }
.ch-images--left { align-items: flex-end; }  /* 左側は画像を右寄せ気味に */
.ch-images--right { align-items: flex-start; } /* 右側は左寄せ */

/* 個々の画像のサイズバリエーション */
.ch-img { overflow: hidden; border-radius: 12px; box-shadow: 0 8px 26px rgba(0,0,0,0.06); background:#fff; }
.ch-img img { display:block; width:100%; height:100%; object-fit:cover; }

/* 左大 / 左小 / 右縦長 の比率 */
.ch-img--large { width: 240px; height: 300px; }   /* 左大 */
.ch-img--small { width: 160px; height: 120px; }   /* 左小 */
.ch-img--tall  { width: 320px; height: 420px; }   /* 右縦長 */

/* 中央テキスト */
.ch-content { text-align: center; padding: 12px 18px; }
.ch-content h2 { font-size: 1.6rem; color: var(--muted); margin: 0 0 12px; font-weight:700; letter-spacing: .03em; }
.ch-content p { color:#3b2c1a; line-height:1.9; margin: 0 0 18px; font-size:1rem; }

/* 簡易ボタン */
.btn-outline {
  display: inline-block;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 10px 22px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  color: #2e2e2e;
  font-weight:700;
  text-decoration:none;
}

/* hover effect for images */
.ch-img img { transition: transform .6s cubic-bezier(.2,.9,.3,1); }
.ch-img:hover img { transform: scale(1.04); }

/* ===== レスポンシブ ===== */
@media (max-width: 1100px) {
  .commitment-hero__inner { grid-template-columns: 1fr 380px 1fr; gap:20px; }
  .ch-img--large { width: 220px; height: 280px; }
  .ch-img--tall  { width: 280px; height: 360px; }
}
@media (max-width: 900px) {
  /* スマホでは縦積み：画像 → テキスト → 画像 */
  .commitment-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    padding: 0 12px;
  }
  .ch-images { flex-direction: row; gap: 12px; width:100%; justify-content:center; }
  .ch-img--large, .ch-img--tall { width: 46vw; height: 46vw; }
  .ch-img--small { width: 30vw; height: 22vw; }
  .ch-content { order: 2; text-align: center; }
}




/* お知らせ用スタイル */
.news {
  margin-top: 22px;
  padding: 18px 18px;
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}

.news-card {
  background: #fffaf3;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #efe3cf;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform .28s ease, box-shadow .28s ease;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }

.news-meta {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  font-size:0.9rem;
  color:var(--muted);
}
.news-meta time { color:var(--muted) }

/* タグ */
.tag {
  padding:4px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:0.75rem;
  color:#fff;
}
.tag.new { background:#b65b1f }        /* NEW（オレンジ） */
.tag.seasonal { background:#8aa14a }   /* 季節限定（緑） */
.tag[aria-hidden="true"]{display:none}

/* タイトル・抜粋 */
.news-title {
  margin:6px 0 8px;
  font-size:1.05rem;
  color:#3b2d1f;
}
.news-excerpt {
  margin:0 0 10px;
  color:#6b5b4b;
  font-size:0.95rem;
}

/* リンク */
.news-link {
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}
.news-link:hover { text-decoration:underline }

/* 「もっと見る」ボタン */
.btn-more {
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
}

/* レスポンシブ：タブレット以上で2列 */
@media (min-width:700px){
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1100px){
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Menu section shared styles ===== */
.section-title{
  font-size:1.6rem;
  margin:36px 0 28px;
  text-align: center;
  color:var(--muted);
}
.tabs{
  display: flex;
  justify-content: center; /* 🔹中央寄せ */
  align-items: center;
  gap: 2rem; /* 🔹ボタン同士の間隔 */
  flex-wrap: wrap; /* 🔹スマホで折り返し */
  margin: 0 auto 1.5rem;
  text-align: center;
}

.tab-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn[aria-selected="true"] {
  color: var(--accent);
  border-bottom: 3px solid var(--accent);
}

.tab-btn:hover {
  color: var(--accent);
  transform: translateY(-2px);
}
.tab-underline{
  position:absolute;
  left:0;
  bottom:-6px;
  height:6px;
  border-radius:6px;
  background:var(--accent);
  width:80px;
  transition:transform .28s cubic-bezier(.2,.9,.3,1),left .28s
}
.menu-h1{
  text-align:center;
  font-size:2rem;
  margin:18px 0 6px;
  font-weight:800
}
.menu-p{
  text-align:center;
  font-size:0.88rem;
  margin:8px 0 8px;
  font-weight:500;
}
.note {
  font-size: 0.68rem;
}


/* ===== Menu detail grid / cards ===== */
.menu-section{display:none;margin-top:10px}
.menu-section.active{display:block}
.menu-grid{display:grid;gap:22px}
.menu-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.menu-info{padding:12px}
.menu-info h3{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:1.02rem}
.price{font-weight:800;color:var(--accent);margin-top:4px}

/* temp badge near title */
.temp-badge{font-weight:800;font-size:0.8rem;color:#fff;padding:3px 8px;border-radius:999px}
.temp-badge.cold{background:#3ba8f5}
.temp-badge.hot{background:#ff5a3c}
.temp-badge.both{background:linear-gradient(90deg,#3ba8f5,#ff5a3c)}

/* top-left label */
.label-banner{position:absolute;top:0;left:0;padding:6px 10px;font-weight:800;color:#fff;border-bottom-right-radius:8px;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.label-banner.zepin{background:linear-gradient(90deg,#e74c3c,#d32f2f)}
.label-banner.season{background:linear-gradient(90deg,#ffb347,#ff7e5f)}

/* three-column fixed on large screens */
@media(min-width:1000px){
  .menu-section .menu-grid{grid-template-columns:repeat(3,1fr);padding:0 5vw}
}
@media(max-width:999px) and (min-width:601px){
  .menu-section .menu-grid{grid-template-columns:repeat(2,1fr);padding:0 4vw}
}
@media(max-width:600px){
  .menu-section .menu-grid{grid-template-columns:repeat(1,1fr);padding:0 4vw}
  .carousel-caption{max-width:78%}
}

/* ===== メニュークイックリンク（トップページ） ===== */
.menu-quick {
  margin-top:30px;
  margin-bottom:40px;
  padding: 12px 24px;
}
.quick-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */
  grid-template-columns: repeat(3, 1fr); /* PC のときは 3 列固定 */
  gap: 22px;
  align-items: stretch;
  max-width: 100%;
  margin: 12px 24px 0;
} 

.quick-card {
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card));
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  transition: transform .22s ease, box-shadow .22s ease;
  color: #2b2b2b;
  text-decoration: none;
}

.quick-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,0,0,0.08); }

.qc-eyebrow {
  display:inline-block;
  font-weight:800;
  font-size:0.9rem;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:8px;
  color:#fff;
  background: linear-gradient(90deg,#b65b1f,#ff8a4b);
  box-shadow: 0 6px 18px rgba(182,91,31,0.12);
}

.quick-card h3 { margin: 6px 0 6px; font-size:1.05rem; }
.quick-card p { margin:0; color:var(--card); font-size:0.95rem; }

/* レスポンシブ：タブレットでは 2 列、スマホは 1 列 */
@media (max-width: 1000px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10px;
  }
}
@media (max-width:600px){
  .menu-quick { 
    padding: 6px 12px;
  }
  .qc-eyebrow { padding:5px 8px; font-size:0.72rem; }
  .quick-grid {
    grid-template-columns: repeat(1, 1fr);
    padding: 0 8px;
  }
}

/* quick-card：画像付きカード + hoverでふわっと拡大 */

.quick-card {
  display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card));
  border: 1px solid var(--border);
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: inherit;
}

/* 画像エリア */
.qc-thumb {
  width: 100%;
  height: 160px; /* 画像表示高さ（調整可） */
  overflow: hidden;
  background: #eee;
}
.qc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
  display: block;
}

/* 本文部分 */
.qc-body {
  padding: 14px 16px;
}


/* ホバーでカード浮かせ＆画像拡大 */
.quick-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
}
.quick-card:hover .qc-thumb img,
.quick-card:focus .qc-thumb img {
  transform: scale(1.06);
}

/* フォーカス可能にしてキーボード利用を優先 */
.quick-card:focus {
  outline: 3px solid rgba(182,91,31,0.12);
  transform: translateY(-6px);
}

/* 動きを減らしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .qc-thumb img, .quick-card {
    transition: none;
    transform: none;
  }
}

/* レスポンシブ調整 */
@media (max-width: 900px) {
  .qc-thumb {
    height: 200px;
  }
}
@media (max-width: 600px) {
  .quick-card {
    border-radius: 10px;
  }
  .qc-thumb {
    height: 200px;
  }
  .qc-body {
    padding: 10px 12px;
  }
  .qc-eyebrow {
    padding:5px 8px;
    /* font-size:0.72rem; */
    font-size:0.9rem;
  }
}

/* === 画像の上に文字を重ねるカード === */
.overlay-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #fff;
}
.overlay-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.15);
}

/* サムネイル画像 */
.overlay-card .qc-thumb {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.overlay-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(.2,.9,.3,1);
}

/* オーバーレイ（黒グラデーション＋文字） */
.qc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 100%);
  display: flex;
  align-items: flex-end; /* 下寄せ */
  justify-content: flex-start;
  padding: 16px;
  transition: background 0.3s ease;
}

/* テキスト部分 */
.qc-text {
  z-index: 2;
  max-width: 90%;
}
.qc-text h3 {
  margin: 4px 0 2px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.qc-text p {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* hover時：画像拡大＋明るく */
.overlay-card:hover img {
  transform: scale(1.08);
}
.overlay-card:hover .qc-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 100%);
}

/* ===== メニューカードの画像設定（比率維持＋ふわっと拡大） ===== */
/* ── メニューカード画像（正方形枠 + 画像を枠いっぱいに） ── */
.menu-card .menu-image {
  position: relative;
  overflow: hidden;
  background: #fff;
  /* 正方形の枠を作る */
  aspect-ratio: 1 / 1;
  display: block;
}

/* 画像は幅・高さともに枠に合わせて、object-fitでトリミング */
.menu-card .menu-image img {
  display: block;
  width: 100%;
  height: 100%;        /* <-- ここがポイント（autoではない） */
  object-fit: cover;   /* 中心を基準に切り取り */
  object-position: center center;
  transition: transform 0.6s cubic-bezier(.2,.9,.3,1);
  transform-origin: center center;
}

/* hover時にふわっと拡大 */
.menu-card:hover .menu-image img {
  transform: scale(1.08);
}

/* ラベルが拡大画像の上に残るように */
.label-banner {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* モバイル（ホバー無効）では拡大しない */
@media (hover: none) {
  .menu-card .menu-image img { transition: none; transform: none; }
}

/* ===== はじめて・お食事券 ===== */
/* .price{font-weight:800;color:var(--accent);margin-top:4px} */


.order-sec {
  display:block;
  max-width: 1200px;
  margin-top:30px;
  margin-bottom:30px;
  margin-left: auto;
  margin-right: auto;
  /* padding: 0 120px; */
  width: 100%;
}
/* .order-sec.active{
  display:block
} */
.order-grid{
  display:grid;
  gap:40px;
  /* grid-template-columns:repeat(2,1fr);padding:0 10vw; */
  grid-template-columns: repeat(auto-fit, calc((100% - 40px) / 2));

}
.order-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
}
.order-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.order-card:hover img,
.order-card:focus img {
  transform: scale(1.06);
}
.order-image{
  padding: 20px;
}
.order-info{
  padding:12px
}
.order-info h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
  font-size:1.02rem
}
.order-card .order-image img {
  display: block;
  width: 100%;
  height: 29vh;
  object-fit: cover;   /* 中心を基準に切り取り */
  object-position: center center;
  transition: transform 0.6s cubic-bezier(.2,.9,.3,1);
  transform-origin: center center;
}

@media (max-width:1000px){
  .order-grid {
    padding: 0 16px;
  }
}
@media (max-width:600px){
  .order-grid {
    grid-template-columns: repeat(1, 1fr);
    padding: 0 12px;
  }
}


/* ===== Access ===== */
.access{
  margin-top:22px;
  padding: 18px 18px;
}



/* 鍋焼きうどんのおすすめセクション */
.nabe-udon {
  background: linear-gradient(180deg, #fffdf9, #fdfaf3);
  padding: 90px 20px;
}

.nabe-udon__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* 左側コンテンツ：中央寄せ */
.nabe-udon__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nabe-udon__content h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 16px;
}
.nabe-udon__content p {
  color: #3b2c1a;
  line-height: 1.9;
  margin-bottom: 20px;
}
.nabe-udon__tip {
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}
.nabe-udon__tip .emoji { font-size: 1.3rem; }

/* --- 右側画像（重なり配置） --- */
.nabe-udon__images {
  position: relative;
  width: 100%;
  height: 400px; /* 固定高さ */
}
.nabe-udon__images .img {
  position: absolute;
  width: 320px;
  height: 240px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.1);
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
}
.nabe-udon__images .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.9,.3,1);
}
.nabe-udon__images .img:hover img {
  transform: scale(1.05);
}

/* 画像位置指定（段違い・右下と左上が重なる） */
.nabe-udon__images .img-1 {
  top: 20px;
  left: 0px;
  z-index: 1;
}
.nabe-udon__images .img-2 {
  bottom: 10px;
  right: 0;
  z-index: 2;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px) {
  .nabe-udon__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .nabe-udon__images {
    height: 340px;
    display: flex;
    justify-content: center;
  }
  .nabe-udon__images .img {
    position: absolute;
    width: 70%;
    height: auto;
  }
  .nabe-udon__images .img-1 {
    top: 0;
    right: auto;
    z-index: 2;
  }
  .nabe-udon__images .img-2 {
    bottom: 0;
    right: auto;
    z-index: 1;
  }
}



/* footer */
.footer{background:#fffaf5;border-top:1px solid var(--border);padding:22px 18px;margin-top:auto}
.footer .social-links{display:flex;justify-content:center;gap:12px;margin-top:6px}
.footer a{color:var(--muted);font-size:1.2rem}
.footer p{margin:0;text-align:center;color:var(--muted)}

/* small helpers */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.fade-in.show{opacity:1;transform:none}


/* howto　page */
    :root{
      /* --bg:#fffdf9; */
      --container:1200px;
    }
    body{
      margin:0;
      background:var(--bg);
      color:#222
    }
    .wrap{
      max-width:var(--container);
      margin:0 auto;
      /* padding:28px; */
    }

    /* Hero */
    .hero{
      /* border-radius:12px; */
      overflow:hidden;
      position:relative;
      margin-bottom:28px;
      background:#000;
      color:#fff;
    }
    .hero .media{
      width:100%;
      height:42vh;
      min-height:220px;
      object-fit:cover;
      display:block;
    }
    .hero .caption{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      text-align:center;
      padding:12px;
    }
    .hero h1{
      margin:0;
      font-size:clamp(1.4rem,4vw,2.4rem);
      font-weight:800;
      letter-spacing:-0.02em
    }
    .hero p{
      margin:6px 0 0;
      color:rgba(255,255,255,0.9)
    }

    /* Steps grid */
    .steps{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap:18px;
      align-items:start;
      margin-bottom:30px;
    }
    .step{
      background:#fff;
      border-radius:12px;
      padding:16px;
      box-shadow:0 6px 18px rgba(0,0,0,.05);
      display:flex;flex-direction:column;
    }
    .step .thumb{
      width:100%;
      height:160px;
      border-radius:8px;
      overflow:hidden;
      margin-bottom:12px
    }
    .step .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .step .num{
      display:inline-block;
      background:var(--accent);
      color:#fff;
      padding:6px 12px;
      border-radius:999px;
      font-weight:700;
      margin-bottom:8px;
    }
    .step h3{margin:6px 0;font-size:1.05rem}
    .step p{margin:0;color:var(--muted);line-height:1.7;font-size:0.95rem}

    /* Tips / 注意 */
    .notes{background:#fff;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.04);color:var(--muted)}
    .notes h4{margin:0 0 8px}
    .notes ul{margin:0;padding-left:1.1rem}

    /* Footer CTA */
    .cta{display:flex;gap:12px;justify-content:center;margin:28px 0}
    .btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700}

    /* Responsive */
    @media (max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:640px){
      /* .wrap{padding:18px} */
      .hero .media{height:38vh}
      .steps{
        grid-template-columns:1fr;
        margin: 0px 20px;
      }
      .step .thumb{
        height:220px;
      }
    }

    /* kupon page */
    /* Coupon detail */
    .coupon {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
      justify-content: center;
      margin-bottom: 50px;
    }
    .coupon img {
      width: 300px;
      border-radius: 8px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }
    .coupon-text {
      max-width: 480px;
    }
    .coupon-text h2 {
      color: var(--accent);
      margin: 0 0 12px;
    }
    .coupon-text p {
      line-height: 1.8;
      margin: 0 0 12px;
    }
    .highlight {
      background: #fff0e0;
      border-left: 5px solid var(--accent);
      padding: 12px 18px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 1.1rem;
      margin-top: 16px;
    }

    /* Notes */
    .notes {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      padding: 24px;
      color: var(--muted);
    }
    .notes h3 {
      margin-top: 0;
      color: var(--accent);
    }
    .notes ul {
      padding-left: 1.2rem;
      line-height: 1.8;
    }

    @media (max-width: 700px) {
      .coupon { flex-direction: column; text-align: center; }
      .coupon-text { max-width: 100%; }
    }

/* Spare udon (食品ロス対策) セクション */
.spare-udon {
  padding: 56px 20px;
  /* background: linear-gradient(180deg, rgba(253,250,243,0.6), rgba(255,255,255,0.95)); */
}
.spare-inner {
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px; /* テキスト / 画像 */
  gap: 32px;
  align-items: center;
}

/* テキスト側 */
.spare-text .spare-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(182,91,31,0.08);
  color: var(--accent, #b65b1f);
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 12px;
}
.spare-badge svg { color: var(--accent, #b65b1f); }

/* 見出し */
.spare-text h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: #2c2c2c;
  line-height: 1.15;
}

/* リード文 */
.spare-text .lead {
  margin: 0 0 12px;
  color: var(--muted, #6b5b4b);
  line-height: 1.8;
}

/* 強調ボックス */
.spare-highlight {
  margin: 12px 0;
  padding: 12px 14px;
  background: #fff7f1;
  border-left: 4px solid var(--accent, #b65b1f);
  border-radius: 8px;
  color: #422d20;
  font-weight: 700;
}

/* 利用例リスト */
.spare-uses {
  margin: 14px 0 0;
  padding-left: 1.1rem;
  color: var(--muted, #6b5b4b);
  line-height: 1.8;
}

/* 注記 */
.spare-note {
  margin-top: 12px;
  font-size: 0.92rem;
  color: #61534a;
}

/* 画像側 */
.spare-figure {
  margin: 0;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.spare-figure img {
  display: block;
  width: 100%;
  height: 42vh;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* レスポンシブ：スマホは縦積み */
@media (max-width: 880px) {
  .spare-inner {
    grid-template-columns: 1fr;
  }
  .spare-figure { order: -1; margin-bottom: 14px; }
  .spare-text { text-align: left; }
}