/* ===== 共通デザインシステム（Claude Design プロジェクトより実装） ===== */
:root{ --navy:#0e5559; --brand:#146c70; --accent:#146c70; --accent-hover:#0e5559; --ochre:#c39a43; --ochre-dark:#8a6419; --coral:#d06b58; --ink:#253236; --ink-sub:#5a686b; --border:#d7dedb; --footer:#0e5559; }
*{box-sizing:border-box}
body{margin:0;background:#f4f2ee;font-family:'Noto Sans JP',sans-serif;color:#253236;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
html{scroll-behavior:smooth}

/* container：デザインは1280px固定 → 実装ではmax-widthにして小画面でも崩れないように */
.dc-page{width:100%;max-width:1280px;margin:0 auto;background:#fff;box-shadow:0 0 40px rgba(0,0,0,.08)}

/* 写真プレースホルダー枠 */
.img-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:repeating-linear-gradient(45deg,#e9e4da,#e9e4da 12px,#e4ded2 12px,#e4ded2 24px);
  color:#9a9080;font-size:12px;text-align:center;padding:10px;line-height:1.6}

/* ===== ホバー（デザインの style-hover を実CSSに変換した汎用クラス） ===== */
.h-bright:hover{filter:brightness(1.08);color:#fff !important}
.h-fill-orange:hover{background:var(--accent);color:#fff !important}
.h-fill-navy:hover{background:var(--navy);color:#fff !important}
/* ボタンは全て角丸（8px）＋やわらかい影 */
.btn-accent,.btn-outline-navy,.btn-outline-accent,.h-bright,.h-fill-orange,.h-fill-navy{border-radius:8px !important}
.btn-accent,.h-bright,.h-fill-navy{box-shadow:0 4px 14px rgba(20,108,112,.2)}
.h-op:hover{opacity:1 !important;color:#fff}
.h-orange:hover{color:var(--accent)}
.h-faqrow:hover{background:#faf8f4}

/* ===== FAQ アコーディオン ===== */
.faq-answer{display:none}
.faq-item.open .faq-answer{display:block}

/* ===== お問い合わせフォーム ===== */
.contact-success{display:none}

/* ===== レスポンシブ（1280固定デザインは維持しつつ小画面で段組み） ===== */
@media (max-width:1000px){
  .r-header{flex-wrap:wrap !important;height:auto !important;padding:12px 20px !important;gap:14px !important}
  .r-header .r-nav{order:3;width:100%;margin-left:0 !important;justify-content:center;flex-wrap:wrap}
  .r-hero{flex-direction:column !important;gap:24px !important}
  .r-split{grid-template-columns:1fr !important}
  .r-rowblock{flex-direction:column !important}
  .r-rowblock > div:first-child{width:100% !important}
  .r-grid5{grid-template-columns:repeat(3,1fr) !important}
  .r-grid4{grid-template-columns:repeat(2,1fr) !important}
  .r-grid3{grid-template-columns:1fr !important}
  .r-formrow{grid-template-columns:1fr !important}
  .r-table{width:100% !important}
  .r-inneritems{grid-template-columns:repeat(2,1fr) !important}
  #about .about-seal{margin:32px auto 0 !important}
  /* The top-page header becomes multi-line at this width. */
  #top{min-height:clamp(420px,calc(100svh - 150px),620px) !important}
  #top > div:first-child img{object-position:58% center}
  html.opening-complete #heroVtext{display:none !important}
}
@media (max-width:640px){
  .r-grid5,.r-grid4{grid-template-columns:repeat(2,1fr) !important}
  .r-inneritems{grid-template-columns:repeat(2,1fr) !important}
  .r-flexwrap{flex-direction:column !important;align-items:stretch !important}
}

/* アクセスの住所（index / company 共通）
   和文は既定でどの文字間でも折り返すため、狭い幅で「…西平山町116 / 番地」のように
   末尾一文字だけが泣き別れる。keep-all で和文中の改行を禁止し、改行位置を
   「〒763-0041」の後ろの半角スペースだけに限定する（431px以上は1行のまま）。
   overflow-wrap は 320px 級の極小幅で行が溢れないための保険。 */
.access-address{word-break:keep-all;overflow-wrap:anywhere}

/* index-style header/footer (shared) — ライトヘッダー */
.nav-link:hover{color:var(--navy);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.btn-accent:hover{filter:brightness(1.1);color:#fff}
.footer-link:hover{opacity:1;color:#fff}
@media (max-width:1000px){
  .site-header{flex-wrap:wrap;height:auto !important;padding:12px 20px !important;gap:14px !important}
  .site-header .nav{order:3;width:100%;margin-left:0 !important;justify-content:center;flex-wrap:wrap}
}

/* section reveal on scroll (index と共通のふわっと表示) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
.blur-fade{opacity:0;filter:blur(8px);transform:translateY(18px);transition:opacity .6s ease,filter .6s ease,transform .6s ease;will-change:opacity,filter,transform}
.blur-fade.is-visible{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.blur-fade{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}}

/* eyebrow + セクション見出し（index 準拠） */
.eyebrow{font-family:'Noto Serif JP',serif;font-size:14px;font-weight:600;letter-spacing:.28em;color:var(--ochre-dark);margin:0 0 12px}

/* focus visibility (a11y) — all:unset で消えた枠を復活 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ===== 下層ページの表現をトップページの世界観に揃える ===== */
/* ヒーロー: 余白だけの見出しではなく、ブランドの奥行きを感じる導入にする */
.dc-page > .site-header{
  box-shadow:0 1px 0 rgba(14,85,89,.08),0 10px 24px rgba(37,50,54,.035);
}
.site-header + div > div:first-child{
  position:relative;
  z-index:2;
  background:#f6f3ec !important;
  border-bottom:1px solid rgba(195,154,67,.22);
}
.site-header + div > section{
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(330px,34vw,440px);
  background:linear-gradient(118deg,#f7f3e9 0%,#fff 47%,#edf5f3 100%) !important;
  border-bottom:0 !important;
}
.site-header + div > section::before,
.site-header + div > section::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
}
.site-header + div > section::before{
  width:min(42vw,560px);height:min(42vw,560px);
  top:50%;right:-13vw;
  transform:translateY(-50%);
  border:1px solid rgba(20,108,112,.15);
  box-shadow:0 0 0 34px rgba(20,108,112,.035),0 0 0 100px rgba(20,108,112,.02);
}
.site-header + div > section::after{
  width:160px;height:160px;
  left:7%;bottom:-112px;
  background:rgba(195,154,67,.12);
}
.site-header + div > section > div{width:100%}
.site-header + div > section h1{font-size:clamp(2.3rem,4.8vw,3.65rem) !important;text-wrap:balance}
.site-header + div > section .eyebrow{color:var(--ochre-dark);font-size:12px;letter-spacing:.34em !important}
.site-header + div > section p:not(.eyebrow){max-width:620px;margin-inline:auto}
.site-header + div > section .hero-founded{width:max-content;max-width:calc(100% - 32px);margin:26px auto 0 !important;text-align:center}

/* 面の階層とカードの密度を整理 */
.dc-page{background:linear-gradient(#fff 0%,#fff 84%,#f7f5f1 100%)}
.r-rowblock,
.faq-item,
.contact-form ~ *,
.r-grid3{
  box-shadow:var(--shadow-sm);
}
.r-rowblock{
  transition:transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard);
}
.r-rowblock:hover{
  transform:translateY(-4px);
  border-color:rgba(20,108,112,.28) !important;
  box-shadow:var(--shadow-md) !important;
}
.r-rowblock > div:first-child{background:linear-gradient(135deg,#eef5f2,#f4efe4)}
.faq-item{transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.faq-item:hover{transform:translateY(-2px);border-color:rgba(20,108,112,.32) !important;box-shadow:0 8px 20px rgba(37,50,54,.07) !important}
.faq-item.open{border-color:rgba(20,108,112,.42) !important;box-shadow:0 10px 28px rgba(20,108,112,.09) !important}
.faq-mark{transition:transform var(--motion-base) var(--ease-standard),background-color var(--motion-base) var(--ease-standard)}
.faq-item.open .faq-mark{transform:rotate(180deg);background:var(--accent) !important}

/* CTA は色・影・動きを統一する */
.h-bright,.btn-accent{
  box-shadow:0 8px 18px rgba(20,108,112,.20) !important;
  transition:transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),filter var(--motion-fast) var(--ease-standard);
}
.h-bright:hover,.btn-accent:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(20,108,112,.28) !important}
.h-fill-orange{transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}
.h-fill-orange:hover{transform:translateY(-1px)}

/* 問い合わせフォームの入力体験を改善 */
.contact-form input,.contact-form textarea{transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),background-color var(--motion-fast) var(--ease-standard)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent) !important;background:#fff !important;box-shadow:0 0 0 4px rgba(20,108,112,.12)}

/* 取扱商品ページに統合したメーカー一覧 */
.maker-chip{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:10px 12px;
  border:1px solid #e5e0d6;
  border-radius:6px;
  background:#fff;
  color:#4a5361;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  box-shadow:var(--shadow-sm);
}

@media (prefers-reduced-motion:no-preference){
  .reveal-item{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-standard),transform .65s var(--ease-standard)}
  .reveal-item.is-visible{opacity:1;transform:none}
  .reveal-item:nth-child(2){transition-delay:70ms}
  .reveal-item:nth-child(3){transition-delay:140ms}
  .reveal-item:nth-child(4){transition-delay:210ms}
}

@media (max-width:640px){
  .site-header + div > section{min-height:290px;padding-inline:24px !important}
  .site-header + div > section::before{width:260px;height:260px;right:-130px}
  .site-header + div > div:first-child{padding-inline:20px !important}
  .r-rowblock:hover{transform:none}
  .maker-chip{min-height:52px;font-size:11px}
}

/* ===== Small-screen layout safeguards ===== */
html,body{max-width:100%;overflow-x:clip}
img,svg{max-width:100%}
.reasons-mobile-break{display:none}

@media (max-width:700px){
  .site-header{
    padding:12px 16px !important;
    gap:10px !important;
  }
  .site-header > a:first-child{min-width:0}
  .site-header > a:first-child > div:last-child > div:first-child{font-size:17px !important}
  .site-header > a[href^="tel:"]{display:none !important}
  .site-header .btn-accent{margin-left:auto;padding:10px 12px !important;font-size:12px !important}
  .site-header .btn-accent svg{width:14px;height:14px}
  .site-header .nav{gap:2px !important;justify-content:center !important}
  .site-header .nav-link{padding:7px 8px !important;font-size:12px !important}

  /* Breadcrumbs and the wide content wrappers used on lower-level pages. */
  .site-header + div > div:first-child{padding:12px 20px !important;flex-wrap:wrap}
  [style*="max-width:1160px"],
  [style*="padding:48px 80px"],
  [style*="padding:40px 80px"],
  [style*="padding:48px 60px"],
  [style*="padding:32px 60px"],
  [style*="padding:44px 40px"],
  [style*="padding:36px 40px"],
  [style*="padding:32px 48px"],
  [style*="padding:48px 48px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .site-header + div > section{padding-left:20px !important;padding-right:20px !important}

  .r-split{gap:24px !important}
  .r-split > div[style*="display:flex"]{flex-wrap:wrap}
  /* 携帯サイズ：画像は中央、テキスト（見出し・本文）は左寄せ */
  .co-greeting{text-align:center}
  .co-greeting > div{justify-items:center}
  .co-greeting > div:last-child{text-align:left}
  .r-table{font-size:12px !important;table-layout:fixed}
  .r-table th{width:34% !important;padding:12px 9px !important;word-break:break-word}
  .r-table td{padding:12px 10px !important;overflow-wrap:anywhere}
  .r-formrow{gap:8px !important}
  .r-formrow > div:first-child{padding-top:0 !important}
  .r-grid3 > div{border-left:0 !important;border-top:1px solid #e8e3d9}
  .r-grid3 > div:first-child{border-top:0}
  .r-flexwrap > *{width:100%;text-align:center;justify-content:center}
  .co-tel-cta{flex-direction:column !important;gap:6px !important}

  .faq-btn{padding:18px 16px !important;gap:12px !important}
  .faq-btn > span:nth-child(2){font-size:15px !important;line-height:1.65}
  .faq-btn .faq-mark{width:28px !important;height:28px !important;font-size:17px !important}
  footer{justify-content:center;text-align:center}
  /* 左右パディングは各下層ページの簡易フッター向け。index の全幅2トーンフッター(.site-footer)は
     除外する（内側パネルが左右に食い込み、地色が白い枠のように見えてしまうため） */
  footer:not(.site-footer){padding:24px 20px !important}
  footer nav{margin-left:0 !important;justify-content:center;gap:12px 18px !important}

  /* Top page: keep the vertical statement readable without creating a wide page. */
  #about,#reasons,#services,#faq,#company,#contact{padding-left:20px !important;padding-right:20px !important}
  #about .about-statement{flex-wrap:wrap;margin-top:42px !important}
  #about .about-statement > div{font-size:14px !important;padding:0 7px !important}
  #about .about-statement > div[style*="width:26px"]{width:12px !important}
  #about h2{font-size:clamp(1.7rem,8.5vw,2.3rem) !important;letter-spacing:.02em !important}
  #about .about-seal{margin:32px auto 0 !important}
  #top{min-height:clamp(360px,calc(100svh - 112px),520px) !important}
  #top > div:first-child img{object-position:62% center}
  .reasons-mobile-break{display:inline}
  .reasons-description{font-size:13px !important;line-height:1.9 !important}
  .contact-title-break{display:none}
}

/* Contact page: the desktop card's nested padding leaves too little usable
   width on phones. Keep the form's controls full-width and reduce only the
   mobile-specific spacing. */
@media (max-width:700px){
  .contact-form-section{padding-top:24px !important;padding-bottom:4px !important}
  .contact-form-card{padding:28px 20px !important}
  .contact-form-card h2{font-size:22px !important;line-height:1.5}
  .contact-form-card > p{font-size:13px !important;line-height:1.8;margin-bottom:24px !important}
  .contact-form input,.contact-form textarea{width:100%;max-width:100%}
  .contact-success{padding:28px 16px !important}

  /* FAQ contact CTAs: retain a single-line phone number and contact label. */
  .faq-contact-panel{padding:28px 20px !important}
  .faq-contact-panel .r-flexwrap > a{padding-left:12px !important;padding-right:12px !important}
  .faq-contact-phone,.faq-contact-link{white-space:nowrap}
  .faq-contact-link{font-size:16px !important;gap:8px !important}
}

@media (max-width:380px){
  .contact-form-card{padding:24px 16px !important}
  .contact-form-card h2{font-size:20px !important}
}

@media (max-width:380px){
  .site-header > a:first-child > div:last-child > div:first-child{font-size:15px !important}
  .site-header > a:first-child > div:last-child > div:last-child{font-size:9px !important;letter-spacing:.06em !important}
  .site-header .btn-accent{padding:9px 10px !important}
  .site-header .btn-accent svg{display:none}
  .site-header .nav-link{padding:7px 6px !important;font-size:11px !important}
}

/* ===== 共通フッター（2トーン：左クリーム＋右チャコール）=====
   全ページ共通。以前は index.html の <style> にのみ存在した。 */
.site-footer{display:grid;grid-template-columns:minmax(280px,360px) 1fr;font-family:'Noto Sans JP',sans-serif}
/* 左：ブランドパネル（明るいクリーム地） */
.footer-brand{background:#f4f2ee;color:var(--ink);padding:36px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;border-right:1px solid #e4ddd0}
.footer-tagline{writing-mode:vertical-rl;font-family:'Noto Serif JP',serif;font-size:18.5px;font-weight:500;letter-spacing:.12em;line-height:1.8;color:var(--ink)}
.footer-brand-id{display:flex;align-items:center;gap:13px}
.footer-seal{width:42px;height:42px;border-radius:50%;border:1.8px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Noto Serif JP',serif;font-weight:700;font-size:20px;color:var(--navy);flex:none}
/* 右：情報パネル（濃いチャコール地） */
.footer-main{background:#26312f;color:#fff;padding:38px 48px 22px}
.footer-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 88px}
.footer-col{min-width:104px}
.footer-col h3{font-family:'Noto Serif JP',serif;font-size:13.5px;font-weight:700;letter-spacing:.12em;margin:0 0 14px;color:#fff}
.footer-col a{display:block;font-size:12.5px;line-height:1;color:rgba(255,255,255,.68);text-decoration:none;margin-bottom:12px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-contact{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.9}
.footer-contact .tel{display:block;font-family:'Noto Serif JP',serif;font-size:21px;font-weight:700;color:#fff;letter-spacing:.02em;margin-bottom:5px;text-decoration:none}
.footer-sns{display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:color .2s}
.footer-sns:hover{color:var(--ochre)}
.footer-sns-note{font-size:12px;color:rgba(255,255,255,.55);margin-top:12px;line-height:1.7}
.footer-divider{border-top:1px solid rgba(255,255,255,.14);margin:26px 0 16px}
.footer-legal{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.04em}
.footer-legal a{color:rgba(255,255,255,.7);text-decoration:none}
.footer-legal a:hover{color:#fff}
@media(max-width:900px){
  .site-footer{grid-template-columns:1fr}
  .footer-brand{flex-direction:column;align-items:center;justify-content:center;gap:20px;border-right:none;border-bottom:1px solid #e4ddd0;padding:34px 32px;text-align:center}
  /* 行末の「、」「。」は字面が字幅の半分ほどしかないため、行末アキと字送り分で約0.37em左寄りに見える。
     左に2倍のパディングを入れて字面の中心を実際の中央へ寄せ、下の「山城折箱商事」と光学的に揃える。 */
  .footer-tagline{writing-mode:horizontal-tb;letter-spacing:.1em;line-height:1.9;font-size:17px;padding-left:.73em}
  /* flex の折り返しだと各列が内容幅（104〜145px）になり、しかも行ごとに独立して中央寄せされるため
     列の左端が行間で揃わない。幅によって 4+1 / 3+2 / 2+2+1 / 2+1+2 と崩れ方も変わる。
     等幅2列のグリッドに固定して、4つのセクションの縦位置を揃える。 */
  .footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;max-width:360px;margin:0 auto;justify-content:center}
  .footer-col{min-width:0}
  /* SNS は5番目で2列に収まらないため、全幅に伸ばして中央に置く（従来の見た目を維持） */
  .footer-col:nth-child(5){grid-column:1/-1}
}
@media(max-width:560px){
  .footer-main{padding:40px 28px 24px}
  .footer-brand{flex-direction:column;align-items:center;gap:20px}
  .footer-legal{justify-content:center}
}

/* ===== モバイルナビゲーション（docs/mobile-navigation-design.md 準拠）=====
   768px 未満はヘッダーのナビを畳み、下部固定ナビ（ホーム/取扱商品/電話/MENU）に導線を移す。
   問い合わせフォームはヘッダーの CTA ボタンが担うため、電話とフォームの双方が1タップで届く。 */
:root{--mobile-nav-height:72px}
.mobile-bottom-nav{display:none}
/* .mobile-menu には display:none を指定しないこと。<dialog> は UA の dialog[open]{display:block}
   で開くが、作者側の display:none のほうが詳細度で勝つため showModal() しても表示されなくなる。
   閉じている間は UA の dialog:not([open]){display:none} が効くので指定は不要。
   デスクトップでは MENU ボタン自体が非表示のため開けない。 */

@media (max-width:767px){
  /* 固定ナビで本文末尾が隠れないようにする */
  body{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}

  /* ヘッダーは 115px(2段) → 64px(1段) に。ロゴ＋CTA だけを残す */
  .site-header{min-height:64px;flex-wrap:nowrap !important;padding:0 16px !important;gap:10px !important}
  .site-header .nav{display:none !important}

  .mobile-bottom-nav{
    position:fixed;
    /* index のオープニング演出(.opening)が z-index:1000 のため、それより下に置く */
    z-index:900;
    right:0;bottom:0;left:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:rgb(255 255 255 / 92%);
    box-shadow:0 -8px 24px rgb(37 50 54 / 8%);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .mobile-bottom-nav__item{
    min-width:0;min-height:52px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    border:0;border-radius:4px;
    background:transparent;color:var(--ink-sub);
    font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:500;line-height:1.2;
    text-decoration:none;cursor:pointer;
    /* 上部ラインで現在地を示すための土台（色だけに頼らない） */
    position:relative;
  }
  .mobile-bottom-nav__item:hover,.mobile-bottom-nav__item:focus-visible{background:#eef7f5;color:var(--navy)}
  .mobile-bottom-nav__item[aria-current="page"]{color:var(--navy);font-weight:700}
  .mobile-bottom-nav__item[aria-current="page"]::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:22px;height:2px;border-radius:1px;background:var(--navy);
  }
  .mobile-bottom-nav__icon{width:22px;height:22px;display:grid;place-items:center}
  .mobile-bottom-nav__icon svg{width:100%;height:100%}

  /* ===== 全画面メニュー（dialog） ===== */
  .mobile-menu{
    position:fixed;z-index:1100;inset:0;
    width:100%;max-width:none;height:100dvh;max-height:none;
    margin:0;padding:0;border:0;background:transparent;
  }
  .mobile-menu::backdrop{background:rgb(14 85 89 / 55%);backdrop-filter:blur(4px)}
  .mobile-menu__panel{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    padding:max(24px,env(safe-area-inset-top)) 20px calc(var(--mobile-nav-height) + 32px + env(safe-area-inset-bottom));
    overflow-y:auto;
    background:#f6f3ec;
    transform:translateY(32px);opacity:0;
    transition:transform 320ms cubic-bezier(.22,1,.36,1),opacity 240ms ease;
  }
  .mobile-menu[open] .mobile-menu__panel{transform:translateY(0);opacity:1}
  /* MENU見出し・リンク・閉じるをパネル直下の並びにし、閉じるを最終リンクの右下へ置く。 */
  .mobile-menu__header{display:contents}
  .mobile-menu__header p{order:1;margin:0 0 36px;color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.16em}
  .mobile-menu__close{
    min-width:48px;min-height:44px;padding:0 14px;
    border:1px solid #b8c2bf;border-radius:4px;
    background:transparent;color:var(--ink);
    font-family:'Noto Sans JP',sans-serif;font-size:13px;cursor:pointer;
    order:3;align-self:flex-end;margin-top:16px;
  }
  .mobile-menu__links{display:grid;order:2}
  .mobile-menu__links a{
    min-height:68px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--border);
    color:var(--ink);
    font-family:'Noto Serif JP',serif;font-size:20px;text-decoration:none;
  }
  .mobile-menu__links a[aria-current="page"]{color:var(--navy);font-weight:700}
  .mobile-menu__links a::after{content:"→";color:var(--navy);font-family:'Noto Sans JP',sans-serif;font-size:18px}

  /* ===== index 固有の共存対応 ===== */
  /* オープニング演出中はナビを出さない（.is-loading は index.html:21 で付与、完了時に解除） */
  html.is-loading .mobile-bottom-nav{display:none}
  /* カードスタックの全画面ステージからナビ分の高さを引く */
  .hscroll.is-cardstack .hscroll-sticky{
    height:calc(100svh - var(--mobile-nav-height) - env(safe-area-inset-bottom)) !important;
    min-height:0 !important;
  }
  /* プログレスバーがナビの裏に隠れるのを防ぐ */
  .hscroll.is-cardstack .hscroll-progress{bottom:14px !important}
}

/* メニュー表示中は背景をスクロールさせない */
html.is-menu-open,html.is-menu-open body{overflow:hidden}

/* 商品カテゴリ：ハブのカード／カテゴリページの情報グリッド（モバイルで段組みを解除） */
@media (max-width:700px){
  .pcard-grid{grid-template-columns:1fr !important}
  .pcat-meta{grid-template-columns:1fr !important}
  .pcat-related{grid-template-columns:1fr !important}
  .pcat-contact-cta{padding-left:16px !important;padding-right:16px !important;gap:8px !important;font-size:15px !important;white-space:nowrap}
  .pcat-contact-cta svg,.pcat-contact-cta span{flex:none}
  .pcat-custom-cta{padding-left:16px !important;padding-right:16px !important;white-space:nowrap}
  .pcat-custom-cta span{flex:none}
}
.pcard{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pcard:hover{transform:translateY(-4px);border-color:rgba(20,108,112,.28);box-shadow:0 10px 24px rgba(37,50,54,.08)}