@charset "UTF-8";
/* ==========================================================================
   Mizu no ne ｜ CAFE SITE  -  cafe_test_20260716.css
   ラフ「SNC_カフェページ_ラフ_20260713.jpg」準拠で再構築（旧 20260626 版から改修）。

   配色（ラフから実測）:
     ティール濃 #4f8681 / ティール #7fa8a4 / ブロブ #83b5b2 / 淡 #c6d6d5
     淡緑バンド #e9eee7 / スウッシュ罫 #d9dddc / ボタン枠 #b5877a
     本文 #6f6259 / 見出し #4a4038
   タイポ: 和文=Shippori Mincho（ラフは全面明朝）／英字ディスプレイ=Cormorant Garamond

   ※料理名・紹介文・写真・営業時間・TEL・MAIL はラフのプレースホルダ。実データ確定後に差し替え。
   ========================================================================== */

:root{
  --ink:        #4a4038;   /* 見出し */
  --body:       #6f6259;   /* 本文 */
  --mute:       #978d83;   /* 補助文字 */
  --rose:       #b5877a;   /* ボタン枠・アクセント */

  --teal-deep:  #4f8681;   /* ヒーロー波（濃） */
  --teal:       #7fa8a4;   /* フッター地・ブロブ */
  --teal-soft:  #a8cac6;
  --teal-pale:  #c6d6d5;
  --blob:       #83b5b2;   /* 装飾ブロブ */

  --band:       #e9eee7;   /* 淡緑セクション地 */
  --swoosh:     #d9dddc;   /* 見出し下の波線 */
  --beige:      #d8d6cf;   /* 画像プレースホルダ */
  --white:      #ffffff;
  --line:       rgba(111,98,89,.24);

  --serif:  'Cormorant Garamond', 'Times New Roman', 'Yu Mincho', serif;
  --mincho: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;

  --header-h: 84px;
  --mbar-h: 58px;          /* スマホ用 固定ボトムバーの高さ（≤768px でのみ使う） */
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ Reset / Base ============ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); overflow-x:hidden; }
body{
  font-family: var(--mincho);
  font-size: 1rem;
  line-height: 2.1;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Cormorant Garamondはオールドスタイル数字（3,4,5,7,9等の高さがバラバラ）がデフォルトのため、
     時刻表記などで数字ごとにサイズ感が違って見える。全数字の高さを揃える */
  font-variant-numeric: lining-nums;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.is-tentative{ display:inline-block; font-size:12px; color: var(--rose); letter-spacing:.04em; margin-left:.4em; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* レスポンシブ改行ユーティリティ：.br-pc=PCのみ改行 / .br-sp=スマホ(≤920px)のみ改行 */
.br-sp{ display:none; }

/* 画像プレースホルダ（実写真確定まではダミー表示） */
.ph{
  position:relative; width:100%; aspect-ratio:4/3;
  background: var(--beige);
  display:grid; place-items:center;
  color: var(--mute);
  font-family: var(--mincho); font-size:.9rem; letter-spacing:.16em;
}
.ph::after{ content: attr(data-label); opacity:.7; padding:0 1em; text-align:center; }
.ph--square{ aspect-ratio:1/1; }
.ph--wide{ aspect-ratio:16/6; }

/* 実画像（ダミー流し込み）— プレースホルダと同じ枠にカバー表示 */
.media{ display:block; width:100%; height:auto; object-fit:cover; }
.hero__media .media{ position:absolute; inset:0; width:100%; height:100%; }
/* ヒーローのクロスフェード（重ねた4枚のうち .is-active だけ不透明にする） */
.hero__slide{ opacity:0; transition: opacity 1.1s var(--ease); }
.hero__slide.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero__slide{ transition:none; }
}

/* TAKE OUT バッジ（料理写真の右上にさりげなく重ねる） */
.dish__media{ position:relative; }
.badge-takeout{
  position:absolute; top: clamp(8px,1.2vw,14px); right: clamp(8px,1.2vw,14px);
  width: clamp(46px,5.2vw,64px); z-index:2; pointer-events:none; line-height:0;
}
.badge-takeout img{
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 2px 7px rgba(74,64,56,.35));
}
.stack__main .media,
.stack__sub .media{ aspect-ratio:4/3; }
.slide__media .media{ position:absolute; inset:0; width:100%; height:100%; }
.dish__media .media{ aspect-ratio:16/10; transition: transform .7s var(--ease); }
.dish:hover .dish__media .media{ transform: scale(1.05); }
.band .media{ aspect-ratio:16/5; }

/* ============ 共通パーツ ============ */
.section{ padding: 120px 24px; position:relative; }
.section__inner{ max-width: var(--maxw); margin:0 auto; position:relative; }
.center{ text-align:center; }

/* ---- 見出し（英字大 / 和文） + 波線スウッシュ ---- */
.ttl{ position:relative; display:inline-block; line-height:1; color: var(--ink); }
.ttl--en{ font-family: var(--serif); font-weight:400; font-size: clamp(2.2rem,4.6vw,3.4rem); letter-spacing:.22em; text-indent:.22em; }
.ttl--ja{ font-family: var(--mincho); font-weight:500; font-size: clamp(1.5rem,2.8vw,2.1rem); letter-spacing:.18em; text-indent:.18em; }
/* 見出し下の波線（画像 images/line_a.png を使用） */
.ttl__wave{ display:block; width: 128%; max-width:340px; height:auto; margin-top:10px; margin-left:-6%; }

/* センター見出し（MENU / FOOD / DRINK）＝ブロブ + 英字 + 短い罫 */
.ttl-center{ text-align:center; position:relative; }
.ttl-center .ttl--en{ position:relative; z-index:1; }
.ttl-center::before{ /* 見出し左上に重なるブロブ（画像 images/mark_bg.png を使用） */
  content:""; position:absolute; z-index:0;
  left:50%; top:50%; width:104px; height:85px;
  transform: translate(calc(-50% - 115px), calc(-50% - 30px));
  background: url("images/mark_bg.png") center / contain no-repeat;
  opacity:.9;
}
.ttl-center__rule{ display:block; width:150px; height:1px; background: var(--line); margin:22px auto 0; }

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 240px; padding: 15px 34px;
  font-family: var(--mincho); font-size:.95rem; letter-spacing:.2em; text-indent:.2em;
  border:1px solid var(--rose); border-radius:40px;
  color: var(--ink); background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background: var(--rose); color:#fff; transform: translateY(-2px); }
.btn--fill{ background: var(--rose); color:#fff; }
.btn--fill:hover{ background: var(--ink); border-color: var(--ink); }

/* ---- 装飾ブロブ ---- */
.blob{ position:absolute; z-index:0; pointer-events:none; }
/* 花びら形（画像 images/mark_bg.png を使用。形・グラデーションは画像側に焼き込み済みのため background 不要） */
/* ふよふよ：ゆっくり拡大縮小するだけの控えめな呼吸アニメーション */
.blob--a,
.blob--b{ transform-origin:center; animation: blobBreathe 6s ease-in-out infinite; }
.blob--a{ width:40%; height:auto; }
.blob--b{ animation-delay: -3s; } /* blob--aと位相をずらして自然に見せる */
.blob--b{ background: url("images/mark_bg.png") center / contain no-repeat; }
@keyframes blobBreathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce){
  .blob--a,
  .blob--b{ animation:none; }
}

/* ============ Header / Global Nav ============ */
.gnav{
  position:fixed; inset:0 0 auto 0; height: var(--header-h); z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(20px,3.4vw,56px);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.gnav.is-stuck{ background: rgba(255,255,255,.94); box-shadow:0 2px 18px rgba(74,64,56,.08); backdrop-filter: blur(6px); }
/* ファーストビューでは写真の上に白文字が乗るので、上部に薄いスクリムを敷いて可読性を確保（スクロールで消す） */
.gnav::before{
  content:""; position:absolute; z-index:-1; inset:0 0 auto 0;
  height: calc(var(--header-h) + 34px);
  background: linear-gradient(to bottom, rgba(0,0,0,.26), rgba(0,0,0,0));
  opacity:1; transition: opacity .35s var(--ease); pointer-events:none;
}
.gnav.is-stuck::before{ opacity:0; }

/* ブランドロゴ（画像）。ファーストビュー=白ロゴ／スクロール後=濃色ロゴ */
.gnav__brand{ display:block; line-height:0; }
.gnav__logo{ display:block; width: clamp(150px,15vw,200px); height:auto; }
.gnav__logo--dark{ display:none; }
.gnav.is-stuck .gnav__logo--light{ display:none; }
.gnav.is-stuck .gnav__logo--dark{ display:block; }

.gnav__right{ display:flex; align-items:center; gap: clamp(16px,2vw,32px); }
.gnav__menu{ display:flex; align-items:center; gap: clamp(18px,2.4vw,40px); }
.gnav__menu a{
  position:relative; padding:6px 0;
  font-family: var(--serif); font-size:1.02rem; letter-spacing:.18em; color:#fff;
  transition: color .35s var(--ease);
}
.gnav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: currentColor; transform:scaleX(0); transform-origin:left;
  transition: transform .3s var(--ease);
}
.gnav__menu a:hover::after,
.gnav__menu a.is-current::after{ transform:scaleX(1); }
/* スクロール後は濃色文字に */
.gnav.is-stuck .gnav__menu a{ color: var(--ink); }
/* 現在地ドット（ラフの TOP 下の点） */
.gnav__menu a.is-current::before{
  content:""; position:absolute; left:50%; bottom:-9px; width:5px; height:5px; margin-left:-2.5px;
  background: var(--teal); border-radius:50%;
}
/* SNSアイコン（Instagram / LINE）はまとめて狭い間隔で並べる */
.gnav__sns-group{ display:flex; align-items:center; gap:14px; }
.gnav__sns{ position:relative; display:grid; place-items:center; width:26px; height:26px; color:#fff; transition: color .35s var(--ease); }
.gnav__sns svg{ width:22px; height:22px; }
.gnav__sns:hover{ color: var(--teal-soft); }
.gnav.is-stuck .gnav__sns{ color: var(--ink); }
.gnav.is-stuck .gnav__sns:hover{ color: var(--teal-deep); }

/* SNS「準備中」吹き出し（アイコンタップで表示） */
.sns-tip{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background: var(--ink); color:#fff;
  font-family: var(--mincho); font-size:12px; letter-spacing:.08em; line-height:1;
  padding:7px 12px; border-radius:6px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(74,64,56,.22);
  opacity:0; visibility:hidden; pointer-events:none; z-index:130;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.sns-tip::before{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-bottom-color: var(--ink);
}
.sns-tip.is-show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* フッターのアイコンは下端に近いので吹き出しを上側に出す */
.footer__sns .sns-tip{ top:auto; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(-4px); }
.footer__sns .sns-tip::before{ bottom:auto; top:100%; border-bottom-color:transparent; border-top-color: var(--ink); }
.footer__sns .sns-tip.is-show{ transform:translateX(-50%) translateY(0); }

/* ナビ項目が7つあるため、ハンバーガーに切り替わる 768px までの中間幅ではロゴ・SNSと
   ぶつからないよう文字とすき間を段階的に詰める */
@media (max-width: 1120px){
  .gnav__menu{ gap: 20px; }
  .gnav__menu a{ font-size:.94rem; letter-spacing:.12em; }
}
@media (max-width: 900px){
  .gnav__right{ gap: 14px; }
  .gnav__menu{ gap: 14px; }
  .gnav__menu a{ font-size:.86rem; letter-spacing:.06em; }
}

/* PCではナビが直接並ぶのでハンバーガーは非表示。モバイル(≤768px)でのみ表示 */
.gnav__toggle{ display:none; width:40px; height:40px; background:none; border:0; cursor:pointer; position:relative; }
.gnav__toggle span{ position:absolute; left:7px; right:7px; height:1.5px; background:#fff; transition:.3s var(--ease); }
.gnav.is-stuck .gnav__toggle span{ background: var(--ink); }
.gnav__toggle span:nth-child(1){ top:14px; }
.gnav__toggle span:nth-child(2){ top:20px; }
.gnav__toggle span:nth-child(3){ top:26px; }
.gnav.is-open .gnav__toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.gnav.is-open .gnav__toggle span:nth-child(2){ opacity:0; }
.gnav.is-open .gnav__toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ============ Hero ============ */
.hero{
  position:relative; min-height: 100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; background: var(--teal-pale);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media .ph{ width:100%; height:100%; aspect-ratio:auto; background: linear-gradient(135deg,#cfe6e3,#e6f1ef); }

/* 中央のすりガラスパネル */
.hero__inner{
  position:relative; z-index:2; padding: clamp(34px,4vw,54px) clamp(30px,5vw,72px);
  background: linear-gradient(150deg, rgba(255,255,255,.82) 0%, rgba(234,245,247,.66) 100%);
  backdrop-filter: blur(2px);
  color: var(--ink);
}
.hero__cafe{ font-family: var(--serif); font-size: clamp(1.2rem,2.2vw,1.7rem); letter-spacing:.42em; text-indent:.42em; }
.hero__title{ margin:.24em 0 .16em; line-height:1; }
/* ロゴ画像（logo-b.png）— ワードマーク＋サブコピーを内包 */
.hero__logo{ width: clamp(240px,42vw,460px); height:auto; margin:0 auto; }
.hero__sub{ font-family: var(--serif); font-size: clamp(1rem,1.7vw,1.35rem); letter-spacing:.06em; color: var(--body); }
.hero__vj{ font-family: var(--serif); font-size: clamp(.95rem,1.6vw,1.25rem); letter-spacing:.32em; text-indent:.32em; margin-top: clamp(18px,2.4vw,30px); }
.hero__vj span{ margin:0 .5em; font-size:.85em; vertical-align:.08em; }

/* 予約ブロブ（ヒーロー右下）
   スクロールしても画面右下に留まって追従する固定表示。
   ヒーロー先頭では下記オフセットがラフと同じ位置になるので初期の見た目は不変。 */
.hero__card{
  position:fixed; z-index:95; right: clamp(16px,4vw,90px); bottom: clamp(90px,11vw,150px);
  width: clamp(238px,21vw,290px); padding: 40px 20px 44px;
  background: var(--blob); color:#fff; text-align:center;
  border-radius: 56% 44% 50% 50% / 46% 52% 48% 54%;
  display:grid; place-items:center; align-content:center; gap:14px;
  box-shadow: 0 14px 34px rgba(74,64,56,.24);
  transition: width .4s var(--ease), padding .4s var(--ease), bottom .4s var(--ease),
              right .4s var(--ease), gap .4s var(--ease), border-radius .4s var(--ease);
  /* 背景の枠がゆっくりと「うにょうにょ」変形する（水面のたゆたいをイメージ） */
  animation: blobWobble 9s ease-in-out infinite;
}
/* 有機的にモーフィングするブロブ形状 */
@keyframes blobWobble{
  0%,100%{ border-radius: 56% 44% 50% 50% / 46% 52% 48% 54%; }
  25%{ border-radius: 46% 54% 58% 42% / 54% 46% 58% 42%; }
  50%{ border-radius: 52% 48% 42% 58% / 44% 58% 42% 56%; }
  75%{ border-radius: 42% 58% 52% 48% / 56% 42% 54% 46%; }
}
/* ヒーローを過ぎたらコンパクトな追従予約ボタンに（大きなブロブで本文を覆わないように） */
.hero__card.is-compact{
  right: clamp(14px,3vw,28px); bottom: clamp(80px,11vw,120px);
  width: 178px; padding: 28px 12px; gap: 8px;
  border-radius: 50%;
  animation: none;
}
.hero__card.is-compact dl{ display:none; }
.hero__card.is-compact .hero__card-cta{ font-size:.8rem; }
.hero__card.is-compact .hero__card-tel{ font-size:1.32rem; margin-top:3px; }
.hero__card.is-compact .is-tentative{ display:none; }

/* ============ スマホ用 固定ボトムバー（Instagram / 電話 / アクセス） ============
   PCではヘッダーにナビとSNSが常時出ているので不要。≤768px でのみ表示する。 */
.mbar{ display:none; }

/* ページトップへ戻るボタン（予約ブロブの下に控えめに表示） */
.pagetop{
  position:fixed; z-index:90;
  right: clamp(20px,4vw,34px); bottom: clamp(8px,2vw,18px);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.92); color: var(--ink);
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(74,64,56,.16);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pagetop.is-visible{ opacity:1; visibility:visible; transform:none; }
.pagetop svg{ width:18px; height:18px; }
.pagetop:hover{ background: var(--teal-deep); color:#fff; border-color: var(--teal-deep); }
.hero__card dl{ display:grid; grid-template-columns:auto auto; gap:2px 18px; font-family: var(--serif); font-size:1.15rem; letter-spacing:.12em; }
.hero__card dt{ text-align:left; }
.hero__card dd{ text-align:right; }
.hero__card-cta{ font-size:.85rem; letter-spacing:.14em; }
/* 受話器アイコンを足したぶん幅が足りず番号が2行に折り返していたため、
   nowrap で1行に固定＋アイコンを詰め、番号自体は一回り大きくする */
.hero__card-tel{
  display:block; white-space:nowrap;
  font-family: var(--serif); font-size:1.62rem; letter-spacing:.01em; margin-top:4px;
}
.hero__card-tel.tel-ico::before{ width:.76em; height:.76em; margin-right:.22em; vertical-align:-.04em; }
.hero__card .is-tentative{ color: rgba(255,255,255,.75); }

/* ヒーロー下端の波（水面：前後2層のうねり＋波紋ライン／ゆっくり蛇行） */
.hero__wave{ position:absolute; z-index:2; left:0; right:0; bottom:-1px; width:100%; height: clamp(150px,17vw,270px); overflow:hidden; pointer-events:none; }
.hero__wave .wave-layer{ position:absolute; top:0; left:0; width:200%; height:100%; will-change:transform; }
.hero__wave .wave-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero__wave .wave-fill{ fill: var(--teal-deep); }
.hero__wave .wave-fill--back{ fill: var(--teal-deep); opacity:.4; }
.hero__wave .wave-line{ fill:none; stroke: rgba(255,255,255,.9); stroke-width:1.6; vector-effect:non-scaling-stroke; }
/* 下側の境界（teal→白セクション）も波打たせる。白は下の募集セクションと同色 */
.hero__wave .wave-fill--white{ fill: var(--white); }
.hero__wave .wave-line--bottom{ fill:none; stroke: rgba(255,255,255,.5); stroke-width:1; vector-effect:non-scaling-stroke; }
/* 横に流れる（蛇行）＝1周期ぶん平行移動でシームレスにループ。前後で速度を変えてうねりを出す */
.hero__wave .wave-layer--back{ animation: waveDrift 30s linear infinite; }
.hero__wave .wave-layer--front{ animation: waveDrift 19s linear infinite; }
.hero__wave .wave-layer--bottom{ animation: waveDrift 24s linear infinite; }
/* 上下のたゆたい（各層で位相をずらす） */
.hero__wave .wave-layer--back .wave-svg{ animation: waveBob 8s ease-in-out infinite; }
.hero__wave .wave-layer--front .wave-svg{ animation: waveBob 6s ease-in-out -2s infinite; }
.hero__wave .wave-layer--bottom .wave-svg{ animation: waveBob 7s ease-in-out -3s infinite; }
@keyframes waveDrift{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes waveBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce){
  .hero__wave .wave-layer, .hero__wave .wave-svg{ animation: none; }
}

/* SCROLL ヒント（波の中＝ティール地に載せるので白抜き） */
/* SCROLL ヒント（波の中＝ティール地に収まる位置に置く） */
.scrolltip{ display:none; position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:4; font-family: var(--serif); font-size:11px; letter-spacing:.3em; color:#fff; }
.scrolltip::after{ content:""; display:block; width:1px; height:24px; margin:5px auto 0; background:#fff; animation: tip 2.2s ease-in-out infinite; }
@keyframes tip{
  0%{ transform:scaleY(0); transform-origin:top }
  50%{ transform:scaleY(1); transform-origin:top }
  51%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* ============ 募集バナー ============ */
.recruit{ background: var(--white); padding: 84px 24px 40px; }
/* Instagram とスタッフ募集を PC では左右に並べる（スマホは縦積み）。
   2枚並ぶぶん1枚あたりは幅が狭くなるので、余白と行間を1枚構成より詰める */
.recruit__grid{
  max-width: 1000px; margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.2vw,30px);
  align-items:stretch;
}
.recruit__box{
  margin:0; text-align:center;
  border:1px solid var(--rose); border-radius:14px; padding: 32px 24px 34px;
  display:flex; flex-direction:column; justify-content:center;
}
.recruit__ttl{ font-family: var(--mincho); font-size: clamp(1.2rem,2vw,1.5rem); letter-spacing:.16em; color: var(--ink); margin-bottom:12px; }
.recruit__txt{ font-size:.92rem; line-height:1.95; margin-bottom:22px; }
.recruit__box .btn{ min-width:0; width:100%; max-width:280px; margin-inline:auto; padding: 13px 22px; }
@media (max-width: 768px){
  .recruit__grid{ grid-template-columns:1fr; }
}

/* 電話番号の頭に付ける受話器アイコン。mask なので色は文字色（currentColor）に追従する */
.tel-ico::before{
  content:""; display:inline-block;
  width:.9em; height:.9em; margin-right:.4em; vertical-align:-.07em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 団体セクション下の予約電話 */
.split__tel{ margin-top: 30px; }
.split__tel-lbl{ display:block; font-size:.88rem; letter-spacing:.12em; color: var(--body); margin-bottom:4px; }
.split__tel a{
  font-family: var(--serif); font-size: clamp(1.5rem,2.6vw,1.95rem);
  letter-spacing:.04em; color: var(--ink);
}
.split__tel a:hover{ color: var(--rose); }
.split__tel-note{ display:block; font-size:.82rem; letter-spacing:.06em; margin-top:4px; }

/* ============ 2カラム（About / ベトナム×日本 / 団体） ============ */
.split__grid{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: clamp(32px,5vw,84px); }
.split--rev .split__grid{ grid-template-areas:"media body"; }
.split--rev .split__body{ grid-area: body; }
.split--rev .split__media{ grid-area: media; }
.split__lead{ line-height:2.5; margin-top: 34px; }
.split__lead p{ margin:0; }
.split__hr{ border:0; border-top:1px solid var(--line); margin: 34px 0 30px; }
.split__info{ font-size:.95rem; line-height:2.1; }
.split__info dl{ display:grid; grid-template-columns:auto 1fr; gap:0 20px; }
.split__info dt{ font-family: var(--serif); letter-spacing:.1em; color: var(--ink); }
.split__info dd{ letter-spacing:.04em; }
/* ACCESS 行の続き（ランドマークからの所要時間）。ラベル幅ぶん字下げして従属行に見せる */
.split__info-sub{ margin-left: 5.2em; }
.split__info a{ border-bottom:1px solid var(--line); }
.split__info a:hover{ color: var(--teal-deep); border-color: var(--teal-deep); }
.split__btn{ margin-top: 36px; text-align:center; }

/* 重ね画像（ラフの2枚オーバーラップ）
   メイン画像は外側（ビューポート端）へフルブリードさせる＝ラフの構図。
   --bleed = .section__inner の端からビューポート端までの距離。 */
.stack{ position:relative; --bleed: calc(24px + max(0px, (100vw - 1248px) / 2)); }
.stack__main{
  position:relative; z-index:1;
  margin-left: 12%; margin-right: calc(var(--bleed) * -1);
  box-shadow:0 16px 40px rgba(74,64,56,.12);
}
.stack__sub{ position:relative; z-index:2; width: 86%; margin-top:-10%; box-shadow:0 16px 40px rgba(74,64,56,.14); }
.stack__main .ph{ aspect-ratio:4/3; }
.stack__sub .ph{ aspect-ratio:4/3; }
.stack .blob{ width: 40%; padding-bottom: 34%; left:-4%; top:-10%; z-index:0; }
/* blob--a は画像(mark_bg.png)を使うため、padding-bottomの高さ確保トリックは不要（intrinsic比率でheight:auto） */
.stack .blob--a{ padding-bottom:0; height:auto; }
/* 逆順（画像が左カラム）のときは左端へブリード */
.stack--left .stack__main{ margin-left: calc(var(--bleed) * -1); margin-right: 12%; }
.stack--left .stack__sub{ margin-left:auto; margin-right:0; }
.stack--left .blob{ left:auto; right:-4%; }

/* About セクション固有（募集バナーとの間の上部余白を確保） */
.about{ padding-top: 100px; }
/* About は本文を上下2ブロックに分割し、間に写真を挟む構成（スマホでは 見出し→写真→営業時間等 の順に） */
.about .split__grid{ grid-template-areas: "top media" "bottom media"; align-items:start; }
.about .split__body--top{ grid-area: top; }
.about .split__body--bottom{ grid-area: bottom; }
.about .split__media{ grid-area: media; align-self:center; }

/* ベトナム×日本 */
.vj{ position:relative; }
/* 2枚の写真のうち右下にある写真（.stack__sub）の右下に配置（.stack基準・写真の裏から覗く形）
   ※ .stack .blob（About用の汎用ルール）が left/top/padding-bottom を設定するため、
      ここで明示的に打ち消してから right/bottom を効かせる */
.vj .stack .blob--deco,
.dogrun .stack .blob--deco{
  left:auto; top:auto; padding-bottom:0;
  width: clamp(150px,16vw,240px); height: clamp(120px,13vw,190px);
  right:-20%; bottom:-10%; opacity:.6;
}

/* DOG RUN（「ベトナム × 日本」と同じ構成。ACCESS の淡色帯のすぐ下に来るので白地で切り分ける） */
.dogrun{ position:relative; background: var(--white); }
/* 入口案内板に準拠した注意書き。本文より一段小さく、淡色地で「ルール」と分かるように */
.dogrun__note{
  margin-top: 30px; padding: 16px 20px;
  background: var(--band);
  font-size:.85rem; line-height:1.95; letter-spacing:.03em; color: var(--body);
}

/* GOODS（白地の DOG RUN のすぐ下に来るので淡色帯で切り分ける） */
.goods{ background: var(--band); }

/* 団体のお客様（淡緑バンド） */
.group{ background: var(--band); }
.group .stack__main{ margin-left: calc(var(--bleed) * -1); margin-right:0; }
.group .split__lead{ margin-top:28px; }

/* ============ MENU（導入 + スライダー） ============ */
.menu{ background: var(--band); }
.menu__lead{ margin: 40px auto 0; max-width: 900px; text-align:center; line-height:2.3; }

.slider{ max-width: 900px; margin: 64px auto 0; position:relative; }
/* スライドボックスの背景に少しずらしてグラデーションのカードを重ねる */
.slider::before{
  content:""; position:absolute; z-index:0; inset:0;
  transform: translate(18px, 18px);
  background: linear-gradient(to right, var(--teal-soft), var(--teal-pale));
}
.slider__viewport{ position:relative; z-index:1; overflow:hidden; }
.slider__track{ display:flex; transition: transform .7s var(--ease); }
/* 写真をスライド全面にフルブリードさせ、右側にグラデーションマスクのパネルを重ねる構成 */
.slide{ position:relative; flex: 0 0 100%; min-height: 460px; overflow:hidden; box-shadow:0 18px 44px rgba(74,64,56,.1); }
.slide__media{ position:absolute; inset:0; z-index:0; }
.slide__media .ph{ height:100%; aspect-ratio:auto; min-height: 460px; }
.slide__panel{
  position:relative; z-index:1;
  margin-left:auto; width: clamp(260px,42%,420px); height:100%;
  padding: clamp(28px,4vw,56px) clamp(20px,3vw,34px);
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  background: rgba(255,255,255,.88);
}
/* TAKE OUT は横並びのときだけパネルを左に置き、写真を右側に見せる
   （縦積みになる 920px 以下では .slide__panel の margin-left:0 が効くので指定不要） */
@media (min-width: 921px){
  #takeout .slide__panel{ margin-left:0; margin-right:auto; }
}
.slide__name{ font-family: var(--mincho); font-weight:500; font-size: clamp(1.3rem,2.2vw,1.8rem); letter-spacing:.1em; color: var(--ink); line-height:1.6; }
.slide__desc{ margin-top:22px; font-size:.92rem; line-height:2.1; }

.slider__btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background: rgba(255,255,255,.9);
  color: var(--body); cursor:pointer;
  display:grid; place-items:center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.slider__btn:hover{ background: var(--teal-deep); border-color: var(--teal-deep); color:#fff; }
.slider__btn svg{ width:14px; height:14px; }
/* グラデーション背景（右へ18pxはみ出し）の外側にボタンを配置する
   ボタン自体の幅(52px)が内側へ食い込む分を差し引いて、確実に外側へ出す */
.slider__btn--prev{ left: -78px; z-index:4; }
.slider__btn--next{ right: -78px; z-index:4; }

.slider__dots{ display:none; }
.slider__dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background: var(--teal-pale); transition: background .3s var(--ease), transform .3s var(--ease); }
.slider__dot.is-active{ background: var(--teal-deep); transform: scale(1.25); }

/* ============ FOOD / DRINK ============ */
.dishsec{ background: var(--white); }
.dish-grid{
  margin-top: 64px; display:grid; grid-template-columns: repeat(2,1fr);
  --gap-x: clamp(36px,5vw,90px);
  gap: clamp(36px,4vw,72px) var(--gap-x);
}
/* 奇数個のとき、最後の1枚が左に寄って間延びするので中央に置く（LUNCH=5品） */
.dish-grid--odd > .dish:last-child{
  grid-column: 1 / -1;
  width: calc((100% - var(--gap-x)) / 2);
  margin-inline: auto;
}
@media (max-width: 768px){
  .dish-grid--odd > .dish:last-child{ width:auto; }
}
.dish__media{ overflow:hidden; }
.dish__media .ph{ aspect-ratio:16/10; transition: transform .7s var(--ease); }
.dish:hover .dish__media .ph{ transform: scale(1.05); }
.dish__name{
  font-family: var(--mincho); font-weight:500;
  font-size: clamp(1.15rem,1.9vw,1.5rem); letter-spacing:.14em;
  color: var(--ink); text-align:center; margin-top: 26px;
}
.dish__desc{ font-size:.88rem; line-height:1.95; margin-top:12px; }
/* 「メニュー一覧」ボタンは当面非表示（メニュー一覧ページ準備後に display を戻す） */
.dishsec__btn{ display:none; text-align:center; margin-top: 72px; }

/* ============ 画像バンド ============ */
.band{ position:relative; }
.band .ph{ aspect-ratio:16/5; }

/* ============ ACCESS ============ */
.access{ background: var(--band); }
.access__grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px,5vw,80px); align-items:stretch; }
.access__map{ background: var(--white); min-height: 420px; display:grid; place-items:center; overflow:hidden; }
.access__map .ph{ height:100%; aspect-ratio:auto; background: var(--white); }
.access__map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
.access__body{ display:flex; flex-direction:column; justify-content:center; }
.access__info{ margin-top: 40px; font-size:.98rem; line-height:2.1; }
.access__info > div{ margin-bottom: 22px; }
.access__info .lbl{ font-family: var(--serif); letter-spacing:.1em; color: var(--ink); }
/* 最寄りランドマークからの所要時間（ラベル「お車で:」の下に字下げして列挙） */
.access__near{ margin-left: 1.6em; line-height:1.9; }
.access__hours{ margin: 6px 0 0 1.6em; font-family: var(--serif); letter-spacing:.06em; line-height:1.9; }
.access__hours span{ display:inline-block; min-width: 7.4em; }
.access__info a{ border-bottom:1px solid var(--line); }
/* Google MAP へ飛ばすボタン（住所ブロックの直下） */
.access__btn{ margin-top: 30px; }
.access__btn .btn{ min-width: 260px; }
.access__info a:hover{ color: var(--teal-deep); border-color: var(--teal-deep); }

/* ============ Footer ============ */
/* 地色はラフ実測に合わせる：左下 #3f7c77 が最も濃く、右上 #b6cbc9 へ抜ける。
   ※明るくしすぎると白のナビ文字が読めなくなるので上限を #b6cbc9 で止める。 */
.footer{
  position:relative; overflow:hidden; color:#fff;
  padding: 96px 24px 34px;
  background-image: url("images/footer-bg.webp");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
.footer .is-tentative{ color: rgba(255,255,255,.72); }

.footer__inner{
  position:relative; z-index:1;
  max-width: var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: auto 1fr auto; gap: clamp(28px,4vw,60px); align-items:start;
}
.footer__brand{ text-align:center; }
.footer__logo{ width: clamp(190px,15vw,230px); margin:0 auto; }
.footer__addr{ margin-top: 22px; font-size:.92rem; line-height:2; letter-spacing:.04em; }
.footer__addr .tel{ font-family: var(--serif); font-size:1.15rem; letter-spacing:.06em; }

.footer__hours{ padding-left: clamp(24px,3vw,52px); border-left:1px solid rgba(255,255,255,.5); }
.footer__hours-ttl{ font-size:1rem; letter-spacing:.12em; margin-bottom:6px; }
.footer__hours-main{ font-family: var(--serif); font-size:1.1rem; letter-spacing:.06em; margin-bottom:18px; }
.footer__hours-main em{ font-style:normal; margin-left:1.6em; }
.footer__hours-list{ font-family: var(--serif); font-size:1rem; letter-spacing:.06em; line-height:1.95; }
.footer__hours-list span{ display:inline-block; min-width: 7.4em; }
.footer__sns{ position:relative; display:inline-grid; place-items:center; width:30px; height:30px; margin-top:16px; color:#fff; }
.footer__sns + .footer__sns{ margin-left:14px; }
.footer__sns svg{ width:24px; height:24px; }
.footer__sns:hover{ opacity:.7; }

.footer__nav{ display:grid; grid-template-columns: auto auto; gap: 18px clamp(20px,2.4vw,40px); font-size:.95rem; }
.footer__nav a{ letter-spacing:.08em; white-space:nowrap; }
.footer__nav a::before{
  content:"";
  display:inline-block; width:8px; height:8px; margin-right:7px; vertical-align:1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 L16 12 L8 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.footer__nav a:hover{ opacity:.72; }
.footer__nav .footer__nav-wide{ grid-column: 1 / -1; display:grid; grid-template-columns:auto auto; gap:18px clamp(20px,2.4vw,40px); margin-top: 34px; font-size:.88rem; }

.footer__copy{
  position:relative; z-index:1;
  max-width: var(--maxw); margin: 70px auto 0;
  text-align:center; font-family: var(--serif); font-size:13px; letter-spacing:.14em; color: rgba(255,255,255,.9);
}

/* ============ scroll-in ============ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============ Responsive ============ */
@media (max-width: 1080px){
  .footer__inner{ grid-template-columns: auto 1fr; }
  .footer__nav{ grid-column: 1 / -1; justify-content:start; margin-top: 10px; }
}
@media (max-width: 920px){
  .section{ padding: 90px 22px; }
  /* 縦画面は「写真が上・テキストパネルが下」の縦積みに（テキストは左揃え） */
  .slide{ display:flex; flex-direction:column; min-height:0; }
  .slide__media{ position:relative; inset:auto; height:260px; flex:none; }
  .slide__media .ph{ height:100%; min-height:0; }
  .slide__panel{
    position:relative; z-index:1;
    width:100%; height:auto; margin-left:0;
    padding: 30px 26px 38px;
    text-align:left; align-items:flex-start;
    background: rgba(255,255,255,.92);
  }
  .slide__name,
  .slide__desc{ text-align:left; }
  .slider__btn--prev{ left: 8px; }
  .slider__btn--next{ right: 8px; }
  .access__grid{ grid-template-columns:1fr; }
  .split__grid{ grid-template-columns:1fr; }
  .split--rev .split__grid{ grid-template-areas: "media" "body"; }
  .about .split__grid{ grid-template-areas: "top" "media" "bottom"; }
  .about .split__body--top{ margin-bottom: 36px; }
  .vj,
  .dogrun{ padding-top: 30px; }
  /* ACCESS 行の従属行は1カラムでは字下げを解除（横幅を使い切る） */
  .split__info-sub{ margin-left: 0; }
  /* 1カラムではフルブリードを解除して中央寄せ */
  .stack{ max-width: 560px; margin:0 auto; }
  .stack__main,
  .stack--left .stack__main,
  .group .stack__main{ margin-left:0; margin-right:0; }
  /* About: ブロブを左上に覗かせ、外観を右寄せで重ね、室内を左下に互い違いに配置 */
  .about .stack{ padding-top: 14px; }
  .about .stack__main{ width:78%; margin-left:auto; margin-right:0; }
  .about .stack__sub{ width:60%; margin-top:-8%; margin-left:0; margin-right:auto; }
  .about .stack .blob--a{ width:46%; left:-2%; top:-6%; }
  /* 画像とテキストの間に余白を確保 */
  .vj .split__media,
  .dogrun .split__media{ margin-bottom: 30px; }
  /* ベトナム×日本 / DOG RUN: 1枚目を左上、2枚目を右下に互い違い、マークは右下写真の左下に配置 */
  .vj .stack__main,
  .dogrun .stack__main{ width:78%; margin-left:0; margin-right:auto; }
  .vj .stack__sub,
  .dogrun .stack__sub{ width:60%; margin-top:-8%; margin-left:auto; margin-right:0; }
  .vj .stack .blob--deco,
  .dogrun .stack .blob--deco{ left:2%; right:auto; bottom:-18%; }
  /* スマホでは PC用のフレーズ改行を消し、文（。）単位でだけ改行する */
  .br-pc{ display:none; }
  .br-sp{ display:inline; }
  /* MENU導入文はスマホでは左揃え（改行は既存の。区切りのまま） */
  .menu__lead{ text-align:left; }
}
@media (max-width: 768px){
  :root{ --header-h: 66px; }
  .gnav__brand-name{ font-size:1.5rem; }
  .gnav__toggle{ display:block; }
  .gnav__right{ gap: 12px; }
  .gnav__menu{
    position:fixed; inset: var(--header-h) 0 auto 0; flex-direction:column; gap:0;
    background: rgba(255,255,255,.97); padding: 6px 0 18px;
    transform: translateY(-120%); opacity:0; pointer-events:none;
    transition: transform .4s var(--ease), opacity .3s ease;
    box-shadow:0 12px 24px rgba(74,64,56,.1);
  }
  .gnav.is-open .gnav__menu{ transform:none; opacity:1; pointer-events:auto; }
  /* モバイルのメニューは白背景パネル内に開くので、常に濃色文字にする */
  .gnav__menu a,
  .gnav.is-stuck .gnav__menu a{ width:100%; text-align:center; padding:14px 0; border-top:1px solid var(--line); color: var(--ink); }
  /* 中間幅で詰めた文字サイズを、パネル内ではタップしやすい大きさに戻す */
  .gnav__menu a{ font-size:1rem; letter-spacing:.16em; }
  .gnav__menu a::after,
  .gnav__menu a.is-current::before{ display:none; }

  /* ============ スマホ用 固定ボトムバー ============ */
  .mbar{
    position:fixed; z-index:97; left:0; right:0; bottom:0;
    display:grid; grid-template-columns: 62px 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--teal-deep); color:#fff;
    box-shadow: 0 -6px 18px rgba(74,64,56,.18);
  }
  .mbar__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    height: var(--mbar-h); color:#fff;
    font-family: var(--mincho); font-size:.7rem; letter-spacing:.1em; line-height:1;
    border-left:1px solid rgba(255,255,255,.3);
  }
  .mbar__item:first-child{ border-left:0; }
  .mbar__item svg{ width:21px; height:21px; }
  .mbar__item--ico svg{ width:23px; height:23px; }
  .mbar__item:active{ background: rgba(0,0,0,.14); }

  /* ヒーローの予約ブロブ：初期表示は OPEN/CLOSE のみ（電話はボトムバーへ集約したため非表示）。
     スクロールしたら追従せずそのまま消える（バーと役割が重複するため） */
  .hero__card{
    right: 12px; bottom: calc(var(--mbar-h) + 18px); width: 196px; padding: 30px 14px;
    transition: opacity .35s var(--ease), visibility .35s;
  }
  .hero__card dl{ font-size:1rem; gap:2px 14px; }
  .hero__card-cta{ display:none; }
  .hero__card.is-compact{ opacity:0; visibility:hidden; pointer-events:none; }
  /* ボトムバーの上に重ならない位置へ */
  .pagetop{ right: 14px; bottom: calc(var(--mbar-h) + 10px); width:42px; height:42px; }
  .pagetop svg{ width:16px; height:16px; }
  .hero__wave{ height: 115px; }
  .scrolltip{ display:none; }

  .dish-grid{ grid-template-columns:1fr; }
  /* 旧: 追従予約カードが駐車場情報に被るのを避けるため ACCESS 下に 190px の余白を取っていたが、
     カードはスクロールで消える仕様になったため通常の余白に戻す */
  /* フッター最下部の文字がボトムバーに隠れないよう、バーの高さぶん下余白を足す */
  .footer{ padding: 72px 22px calc(30px + var(--mbar-h) + env(safe-area-inset-bottom, 0px)); }
  .footer__inner{ grid-template-columns:1fr; gap: 34px; }
  .footer__hours{ padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.5); padding-top: 28px; }
  .footer__nav{ margin-top:0; }
}
@media (max-width: 480px){
  .ttl-center::before{ width:84px; height:70px; transform: translate(-128%, -74%); }
  .footer__nav{ grid-template-columns:1fr; }
  .footer__nav .footer__nav-wide{ grid-template-columns:1fr; }
  .access__hours span,
  .footer__hours-list span{ min-width: 6.4em; }
}