/* =========================================================
   つきじ治作 — mizutaki ページ固有スタイル（抽出元: mizutaki/index.html の <style>）
   body名前空間: page-mizutaki / url(): css/pages/基準 ../../images/
   ========================================================= */
.sp-hero{position:relative;height:320px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:48px;overflow:hidden;background:#1a2638;}
.sp-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,38,56,.2) 0%,rgba(26,38,56,.88) 100%);}
.sp-hero__title{position:relative;z-index:2;text-align:center;}
.sp-hero__title h1{font-family:var(--serif-display);font-size:clamp(24px,3vw,36px);font-weight:500;letter-spacing:.2em;color:var(--mute);margin:0 0 8px;}
.sp-hero__title .en{font-family:var(--en-serif);font-size:clamp(11px,1.2vw,14px);letter-spacing:.35em;text-transform:uppercase;color:var(--gold);font-style:italic;}
.sp-breadcrumb{padding:16px clamp(24px,8vw,120px);font-family:var(--serif);font-size:11px;letter-spacing:.15em;color:rgba(232,226,212,.4);}
.sp-breadcrumb a{color:rgba(232,226,212,.4);text-decoration:none;transition:color .3s;}
.sp-breadcrumb a:hover{color:var(--gold);}
.sp-breadcrumb span{margin:0 8px;}
.sp-content{max-width:1440px;margin:0 auto;padding:60px clamp(24px,8vw,120px) 100px;}
.sp-content h2{font-family:var(--serif-display);font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:.15em;color:var(--mute);margin:56px 0 24px;padding-bottom:12px;border-bottom:.5px solid rgba(216,184,122,.25);}
.sp-content h2:first-child{margin-top:0;}
.sp-content p{font-family:var(--serif);font-size:14px;line-height:2.2;letter-spacing:.06em;color:rgba(232,226,212,.7);margin:0 0 20px;}

/* Section images */
.sp-content img{max-width:100%;display:block;}
.section-img{width:100%;aspect-ratio:16/7;object-fit:cover;margin:0 0 32px;opacity:.9;}
.section-img--narrow{aspect-ratio:16/5;}
.product-card__img{width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 20px;opacity:.9;}
.intro-visual{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0 48px;}
.intro-visual img{width:100%;aspect-ratio:3/2;object-fit:cover;}
@media(max-width:640px){.intro-visual{grid-template-columns:1fr;}}

/* Product cards */
/* 2026-09-23 商品は2点。auto-fit だと枠幅しだいで並びが揺れるので**2カラム固定**にする。 */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin:40px 0;}
@media(max-width:640px){.product-grid{grid-template-columns:1fr;}}
.product-card{border:.5px solid rgba(216,184,122,.15);padding:32px;transition:border-color .4s var(--ease);}
.product-card:hover{border-color:rgba(216,184,122,.35);}
.product-card__name{font-family:var(--serif-display);font-size:16px;font-weight:500;letter-spacing:.12em;color:var(--mute);margin:0 0 12px;}
.product-card__desc{font-family:var(--serif);font-size:13px;line-height:2;letter-spacing:.06em;color:rgba(232,226,212,.6);margin:0 0 16px;}
.product-card__price{font-family:var(--en-body);font-size:20px;letter-spacing:.05em;color:var(--gold);font-style:italic;}
.product-card__tax{font-family:var(--serif);font-size:11px;color:rgba(232,226,212,.4);margin-left:4px;}

/* Feature highlights */
.features{display:flex;gap:24px;justify-content:center;margin:32px 0 48px;flex-wrap:wrap;}
.feature{text-align:center;padding:16px 24px;}
.feature__label{font-family:var(--serif);font-size:12px;letter-spacing:.15em;color:var(--gold);display:block;}

/* Vegetable recommendations */
.veg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:24px 0;}
.veg-item{padding:20px;border-left:2px solid rgba(216,184,122,.15);}
.veg-item__name{font-family:var(--serif-display);font-size:15px;font-weight:500;letter-spacing:.1em;color:var(--mute);margin:0 0 8px;}
.veg-item__text{font-family:var(--serif);font-size:13px;line-height:2;letter-spacing:.06em;color:rgba(232,226,212,.6);margin:0;}

/* Header overrides */
.header{padding:0 clamp(24px,8vw,120px);height:110px;}
.header__tools{gap:20px;}
/* .btn-reserve-v2 は lp-base.css を正とする（サイズ差異の原因になるため個別指定しない） */
.header-tel{display:inline-flex;align-items:center;gap:6px;font-family:var(--en-body);font-weight:500;font-size:15px;letter-spacing:.05em;color:var(--mute);white-space:nowrap;text-decoration:none;transition:color .3s;}
.header-tel:hover{color:var(--gold-hi);}
.header-tel svg{flex-shrink:0;}
.header-nav-link{font-family:var(--serif);font-size:13px;letter-spacing:.18em;color:var(--mute);white-space:nowrap;text-decoration:none;transition:color .3s;}
.header-nav-link:hover{color:var(--gold-hi);}
.header-sns{display:inline-flex;align-items:center;gap:10px;}
.header-sns a{display:inline-flex;align-items:center;color:var(--mute);transition:color .3s;}
.header-sns a:hover{color:var(--gold-hi);}
.lang-select-v2{position:relative;}
.lang-select-v2__toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:12px;letter-spacing:.15em;color:var(--mute);padding:6px 14px;border:1px solid rgba(232,226,212,.4);border-radius:20px;background:none;cursor:pointer;transition:color .3s,border-color .3s;white-space:nowrap;}
.lang-select-v2__toggle:hover{color:var(--gold-hi);border-color:var(--gold-hi);}
.lang-select-v2__toggle svg{flex-shrink:0;}
.lang-select-v2__caret{display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .3s var(--ease);}
.lang-select-v2:hover .lang-select-v2__caret{transform:translateY(0) rotate(225deg);}
.lang-select-v2__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:140px;list-style:none;padding:8px 0;margin:0;background:rgba(14,17,22,.96);backdrop-filter:blur(14px);border:.5px solid rgba(184,147,90,.35);opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .3s var(--ease);}
.lang-select-v2:hover .lang-select-v2__menu{opacity:1;visibility:visible;transform:translateY(0);}
.lang-select-v2__menu li{list-style:none;}
.lang-select-v2__menu a{display:block;padding:6px 18px;font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:var(--mute);text-decoration:none;transition:color .2s;}
.lang-select-v2__menu a:hover{color:var(--gold-hi);}

@media(max-width:1080px){.header-tel{display:none;}.header-nav-link{display:none;}.header-sns{display:none;}.lang-en{display:none;}.btn-reserve-v2{display:none;}}


/* ════════════════════════════════════════════════════════════
   新デザイン — body.page-mizutaki.mz-hero-new のときだけ効く
   2026-09-05 追加。切り替えは サイト共通設定 › デザイン
   （このクラスが付かないときは上の従来デザイン＝ネイビーがそのまま出る）

   HERO はお料理一覧（dish）の意匠をそのまま採用し、見出しだけ
   縦書きではなく横書き 2行（和文＋欧文）にしている。
   ページ全体も dish と同じ和紙クリーム。
   ※ このとき unified-navy.css は読み込まれない（inc/page-manifest.php）。
     html/body に !important でネイビーを掛けるため、外さないと上書きできない。
   ════════════════════════════════════════════════════════════ */

/* ── ヘッダー・フッター（dish と同じ方針） ── */
body.page-mizutaki.mz-hero-new{background:#f4efe3;}
body.page-mizutaki.mz-hero-new .loader{background:#f4efe3 !important;}
body.page-mizutaki.mz-hero-new .loader .loader__logo-img{filter:brightness(0);}
body.page-mizutaki.mz-hero-new .loader .loader__line{background:#1f1b16 !important;}

body.page-mizutaki.mz-hero-new .header:not(.is-scrolled){
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
body.page-mizutaki.mz-hero-new .header:not(.is-scrolled)::before,
body.page-mizutaki.mz-hero-new .header:not(.is-scrolled)::after{display:none !important;}
body.page-mizutaki.mz-hero-new .header.is-scrolled{
  background:rgba(244,239,227,.82) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}
body.page-mizutaki.mz-hero-new .header .header-tel,
body.page-mizutaki.mz-hero-new .header .header-nav-link,
body.page-mizutaki.mz-hero-new .header .lang-en,
body.page-mizutaki.mz-hero-new .header .lang-select-v2__toggle,
body.page-mizutaki.mz-hero-new .header .header-sns a{color:#1f1b16 !important;}
body.page-mizutaki.mz-hero-new .header svg{stroke:#1f1b16;}
body.page-mizutaki.mz-hero-new .header svg[fill="currentColor"]{fill:#1f1b16;}
body.page-mizutaki.mz-hero-new .header .menu-toggle span{background:#1f1b16 !important;}
body.page-mizutaki.mz-hero-new .header .header__logo-img{filter:brightness(0) saturate(100%);}
body.page-mizutaki.mz-hero-new .header .lang-select-v2__caret{border-top-color:#1f1b16;}
body.page-mizutaki.mz-hero-new .lang-select-v2__toggle{border-color:rgba(120,100,70,.36);}

body.page-mizutaki.mz-hero-new .footer{
  background:#ebe3cf;
  color:#1f1b16;
  border-top:.5px solid rgba(120,100,70,.26);
  margin-top:0;
}
body.page-mizutaki.mz-hero-new .footer__brand .since{color:#6e665b;}
body.page-mizutaki.mz-hero-new .footer__brand .vert{color:#1f1b16;}
body.page-mizutaki.mz-hero-new .footer__logo-img{filter:brightness(0) saturate(100%);}
body.page-mizutaki.mz-hero-new .footer h5{color:#1f1b16;border-bottom-color:rgba(120,100,70,.26);}
body.page-mizutaki.mz-hero-new .footer li{color:#2a251f;}
body.page-mizutaki.mz-hero-new .footer li a{color:inherit;}
body.page-mizutaki.mz-hero-new .footer li a:hover{color:#b89665;}
body.page-mizutaki.mz-hero-new .footer__bottom{color:#6e665b;border-top-color:rgba(120,100,70,.18);}
body.page-mizutaki.mz-hero-new .footer__address{color:#2a251f;}
body.page-mizutaki.mz-hero-new .footer__cta{border-color:rgba(120,100,70,.32);}
body.page-mizutaki.mz-hero-new .footer__cell{color:#1f1b16;border-bottom-color:rgba(120,100,70,.22);}
body.page-mizutaki.mz-hero-new .footer__cell:hover{background:rgba(184,150,101,.10);color:#b89665;}
body.page-mizutaki.mz-hero-new .footer__cell-icon{color:#b89665;}
body.page-mizutaki.mz-hero-new .footer__cell:hover .footer__cell-icon{color:#8e6e3f;}
body.page-mizutaki.mz-hero-new .footer__cell-sub{color:#6e665b;}
body.page-mizutaki.mz-hero-new .footer__sns > a[aria-label]{color:#2a251f;border-color:rgba(120,100,70,.36);}
body.page-mizutaki.mz-hero-new .footer__sns > a[aria-label]:hover{color:#b89665;border-color:#b89665;background:rgba(184,150,101,.08);}
/* フォロー用の下部バーは暗背景のまま（dish と同じ扱い） */
body.page-mizutaki.mz-hero-new .follow-nav__sns a,
body.page-mizutaki.mz-hero-new .follow-nav__bar{background:#1a2638;}
/* Menu modal — 地色はページと同じクリーム。配色は style.css の --mm-* が持つ */

/* ── ページ本体 — 配色トークンと和紙地（dish と同値） ── */
body.page-mizutaki.mz-hero-new{
  --mz-ink:#1f1b16;
  --mz-sub:#6e665b;
  --mz-line:rgba(120,100,70,.26);
  --mz-line-soft:rgba(120,100,70,.14);
  --mz-gold:#b89665;
  --mz-serif-display:var(--serif-display);
  --mz-serif:var(--serif);
  --mz-en:var(--en-serif);
  --mz-wrap:1440px;
  --mz-gutter:clamp(24px,8vw,120px);
  background-color:#f4efe3;
  /* 和紙テクスチャ — 微細なノイズを CSS で生成（dish と同じ） */
  background-image:
    radial-gradient(circle at 23% 17%,rgba(120,95,55,.04) 0,transparent 1px),
    radial-gradient(circle at 67% 43%,rgba(120,95,55,.035) 0,transparent 1.2px),
    radial-gradient(circle at 38% 78%,rgba(120,95,55,.04) 0,transparent 1px),
    radial-gradient(circle at 81% 88%,rgba(120,95,55,.03) 0,transparent 1.4px),
    radial-gradient(circle at 12% 62%,rgba(120,95,55,.035) 0,transparent 1.1px);
  background-size:7px 7px,11px 11px,9px 9px,13px 13px,8px 8px;
  color:var(--mz-ink);
  font-family:var(--mz-serif);
  line-height:1.9;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}

/* ── HERO — dish の意匠。見出しだけ横書き 2行 ── */
body.page-mizutaki.mz-hero-new .mz-hero{
  min-height:780px;
  height:100vh;
  position:relative;
  padding-top:clamp(90px,10vw,130px);
  overflow:hidden;
  background-image:url('../../images/hero_mizutaki.png');
  background-size:auto 100%;
  background-position:right center;
  background-repeat:no-repeat;
}
/* 鍋の底直下に伸びる影 */
body.page-mizutaki.mz-hero-new .mz-hero::before{
  content:"";position:absolute;pointer-events:none;z-index:1;
  right:0;bottom:7%;width:72%;height:3%;
  background:
    radial-gradient(ellipse 90% 100% at 78% 50%,
      rgba(15,10,5,.42) 0%,rgba(20,14,8,.28) 22%,
      rgba(25,18,12,.16) 45%,rgba(30,22,16,.06) 72%,transparent 100%);
  filter:blur(8px);
}
/* 画像の左側を和紙色にフェード。dish は縦書きで左端に収まるが、
   こちらは横書き見出しが右へ伸びるので 48% までヴェールを効かせる。 */
body.page-mizutaki.mz-hero-new .mz-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,
      rgba(244,239,227,.92) 0%,
      rgba(244,239,227,.6) 14%,
      rgba(244,239,227,.28) 32%,
      rgba(244,239,227,0) 48%),
    radial-gradient(ellipse 28% 45% at 88% 30%,rgba(255,248,232,.18) 0%,rgba(255,248,232,0) 70%);
}
body.page-mizutaki.mz-hero-new .mz-hero__inner{
  max-width:none;width:100%;margin:0;
  padding:0 0 0 clamp(60px,8vw,110px);
  display:grid;grid-template-columns:1fr;align-items:center;
  height:100%;position:relative;z-index:2;
}
body.page-mizutaki.mz-hero-new .mz-hero__copy{position:relative;}
body.page-mizutaki.mz-hero-new .mz-hero__crumb{font-family:var(--mz-en);font-style:italic;font-size:11px;letter-spacing:.32em;color:var(--mz-sub);margin-bottom:36px;text-transform:uppercase;}
body.page-mizutaki.mz-hero-new .mz-hero__crumb a{color:var(--mz-sub);}
body.page-mizutaki.mz-hero-new .mz-hero__crumb .sep{margin:0 10px;color:var(--mz-sub);}
body.page-mizutaki.mz-hero-new .mz-hero__title{
  margin:0 0 14px;
  font-family:var(--mz-serif-display);
  font-weight:500;
  font-size:clamp(24px,2.8vw,36px);
  letter-spacing:.16em;
  line-height:1.5;
  color:var(--mz-ink);
}
body.page-mizutaki.mz-hero-new .mz-hero__title-en{
  display:block;margin:0 0 40px;
  font-family:var(--mz-en);font-style:italic;
  font-size:clamp(11px,1.25vw,15px);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--mz-gold);
}
body.page-mizutaki.mz-hero-new .mz-hero__lead{font-family:var(--mz-serif);font-weight:300;font-size:13px;line-height:2.2;letter-spacing:.12em;color:var(--mz-sub);margin:0 0 32px;max-width:360px;}
body.page-mizutaki.mz-hero-new .mz-hero__cta{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 28px;background:transparent;
  border:.5px solid var(--mz-gold);
  font-family:var(--mz-serif);font-size:13px;letter-spacing:.22em;color:var(--mz-ink);
  transition:background .35s ease,color .35s ease,gap .35s ease;
  text-decoration:none;
}
body.page-mizutaki.mz-hero-new .mz-hero__cta:hover{background:var(--mz-gold);color:#fff;gap:20px;}
body.page-mizutaki.mz-hero-new .mz-hero__mobile-photo{display:none;}

@media(max-width:900px){
  body.page-mizutaki.mz-hero-new .mz-hero{height:auto;min-height:0;padding-top:100px;padding-bottom:80px;}
  body.page-mizutaki.mz-hero-new .mz-hero__inner{grid-template-columns:1fr;gap:48px;padding-left:var(--mz-gutter);padding-right:var(--mz-gutter);}
  body.page-mizutaki.mz-hero-new .mz-hero__title{font-size:clamp(22px,6vw,30px);letter-spacing:.14em;}
}
@media (min-width:768px) and (max-width:1024px){
  body.page-mizutaki.mz-hero-new .mz-hero{
    min-height:680px;
    background-size:auto 50%;
    background-position:100% clamp(96px,14vw,128px);
  }
  body.page-mizutaki.mz-hero-new .mz-hero__inner{grid-template-columns:1fr 1.2fr;padding-left:clamp(40px,6vw,80px);}
  body.page-mizutaki.mz-hero-new .mz-hero__lead{font-size:12px;}
  body.page-mizutaki.mz-hero-new .mz-hero::before{right:6%;top:calc(clamp(96px,14vw,128px) + 50% - 22px);bottom:auto;width:42%;height:2.2%;}
}
@media(max-width:767px){
  body.page-mizutaki.mz-hero-new .mz-hero{
    height:auto;min-height:0;
    padding-top:clamp(96px,22vw,120px);padding-bottom:0;
    background-image:none;
    display:flex;flex-direction:column;
  }
  body.page-mizutaki.mz-hero-new .mz-hero::before,
  body.page-mizutaki.mz-hero-new .mz-hero::after{display:none;}
  body.page-mizutaki.mz-hero-new .mz-hero__inner{
    grid-template-columns:1fr;gap:32px;padding:0;width:100%;max-width:none;order:2;
  }
  body.page-mizutaki.mz-hero-new .mz-hero__copy{padding:0 var(--mz-gutter);width:100%;box-sizing:border-box;}
  body.page-mizutaki.mz-hero-new .mz-hero__mobile-photo{
    display:block;width:100%;aspect-ratio:4/3;
    background-image:url('../../images/hero_mizutaki.png');
    background-size:contain;background-position:center bottom;background-repeat:no-repeat;
    margin-bottom:clamp(24px,5vw,40px);order:1;
  }
}

/* ── 本文 — クリーム地に合わせた配色（従来の明色指定を上書き） ── */
body.page-mizutaki.mz-hero-new .sp-content{max-width:var(--mz-wrap);margin:0 auto;padding:clamp(64px,8vw,110px) var(--mz-gutter) clamp(90px,11vw,140px);}
body.page-mizutaki.mz-hero-new .sp-content h2{color:var(--mz-ink);border-bottom-color:var(--mz-line);}
body.page-mizutaki.mz-hero-new .sp-content p{color:var(--mz-sub);}
body.page-mizutaki.mz-hero-new .section-img,
body.page-mizutaki.mz-hero-new .product-card__img{opacity:1;}
body.page-mizutaki.mz-hero-new .product-card{border-color:var(--mz-line-soft);}
body.page-mizutaki.mz-hero-new .product-card:hover{border-color:var(--mz-line);}
body.page-mizutaki.mz-hero-new .product-card__name{color:var(--mz-ink);}
body.page-mizutaki.mz-hero-new .product-card__desc{color:var(--mz-sub);}
body.page-mizutaki.mz-hero-new .product-card__price{color:var(--mz-gold);}
body.page-mizutaki.mz-hero-new .product-card__tax{color:var(--mz-sub);}
body.page-mizutaki.mz-hero-new .feature__label{color:var(--mz-gold);}
body.page-mizutaki.mz-hero-new .veg-item{border-left-color:var(--mz-line-soft);}
body.page-mizutaki.mz-hero-new .veg-item__name{color:var(--mz-ink);}
body.page-mizutaki.mz-hero-new .veg-item__text{color:var(--mz-sub);}