/* ============================================================
   TORR PENN — Premium Dark Theme CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Grenze:wght@400;700;900&family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --bg:          #09090b;
  --bg-1:        #0f0f12;
  --bg-2:        #15151a;
  --gold:        #c9a84c;
  --gold-light:  #e0c06a;
  --gold-dim:    rgba(201,168,76,.18);
  --white:       #f5f4f0;
  --muted:       #7a7a85;
  --border:      rgba(255,255,255,.07);
  --glass:       rgba(255,255,255,.04);

  --ff-head: 'Grenze', serif;
  --ff-body: 'Inter', sans-serif;
  --ff-ui:   'Outfit', sans-serif;

  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t: .45s;

  --r: 14px;
  --section: 120px 0;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-body);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background 0.8s var(--ease);
}

/* 全pタグ → Grenzeフォント・レスポンシブサイズ */
p {
  font-family: var(--ff-head) !important;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important;
  line-height: 1.2 !important;
}

/* ── Design Preview Backgrounds ─────────────────────────────── */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--ff-head); line-height: 1.15; }

/* ── Utility ─────────────────────────────────────────────── */
.container { max-width: 1240px; margin-inline: auto; padding-inline: 48px; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.highlight {
  background: linear-gradient(110deg, var(--gold) 20%, #fff9e8 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* h1/h2全体にグラデーション（始まりから） */
.page-title h1,
.brewery-hero h1,
.products-page-header h1,
.section-header h1,
.legal-content h1,
.service-info h2,
.section-header h2,
.section-header h3,
.brewery-story-block .block-text h3,
.process-header h3,
.service-info--petit-plus h3,
.auto-slider-title,
.stats-headline {
  background: linear-gradient(110deg, var(--gold) 20%, #fff9e8 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stats-desc { font-family: var(--ff-head); }

/* 内部の.highlight spanは親のグラデーションを引き継ぐ（個別上書きしない）*/
.page-title h1 .highlight,
.brewery-hero h1 .highlight,
.products-page-header h1 .highlight,
.section-header h1 .highlight,
.legal-content h1 .highlight,
.service-info h2 .highlight,
.section-header h2 .highlight,
.section-header h3 .highlight {
  background: none !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  border-radius: 50px;
  font-family: var(--ff-ui);
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  border: none;
  transition: all var(--t) var(--ease-bounce);
}
.btn-primary {
  background: var(--gold);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(201,168,76,.35);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--bg);
  transform: translateY(-3px);
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1.5px solid var(--gold);
  border-radius: 40px;
  color: var(--gold);
  font-family: var(--ff-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  transition: all var(--t) var(--ease);
}
.btn-text::after { content: '→'; transition: transform 0.3s var(--ease); }
.btn-text:hover {
  background: var(--gold);
  color: #09090b;
  box-shadow: 0 0 24px rgba(201,168,76,0.35);
}
.btn-text:hover::after { transform: translateX(5px); }

/* ── お知らせバナー（季節休業など） ───────────────────────────── */
.notice-banner {
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  border-radius: var(--r);
  padding: 18px 24px;
  margin: 0 0 40px;
  text-align: center;
}
.notice-banner p {
  color: var(--white);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
}
.notice-banner strong { color: var(--gold-light); }
@media (max-width: 600px) {
  .notice-banner { padding: 14px 18px; }
  .notice-banner p { font-size: .9rem; }
}

/* ── Section Shared ───────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 70px; }
.section-header h1,
.section-header h2,
.section-header h3 { font-size: clamp(2.2rem,6vw,3.5rem); margin-bottom: 12px; }
@media (max-width: 600px) {
  .section-header h1,
  .section-header h2,
  .section-header h3 { font-size: 1.8rem; }
  /* bieres一覧ページのセクションh2は少し大きめに */
  .products-page .section-header h2 { font-size: 2.3rem; }
}

/* ビール一覧：セクションタイトルをグリッドに重ねる */
.products-page .product-group .section-header {
  position: relative;
  z-index: 2;
  margin-bottom: -120px;
  padding-bottom: 0;
}
.products-page .product-group .product-grid {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  /* モバイルでは負のマージンをリセット（カードへの重なり防止） */
  .products-page .product-group .section-header {
    margin-bottom: 0;
  }
}
.subtitle {
  display: inline-block;
  font-family: var(--ff-ui);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .78rem;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .subtitle { font-size: 0.58rem; margin-bottom: 0; }
}
.tp-intro-section .subtitle::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(201, 168, 76, 0.45);
  margin: 10px auto 0;
}

/* reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.service-info.service-info--lift.visible {
  transform: translateY(-70px);
}
@media (max-width: 1024px) {
  .service-info--lift { order: -1; }
  .service-img.service-img--sm {
    flex: none;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .service-info.service-info--lift.visible {
    transform: none;
  }
}


/* ── Top Bar ──────────────────────────────────────────────── */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  z-index: 1001;
  background: rgba(9,9,11,0.8);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 保険: .top-bar-innerのjustify-content:space-betweenに頼らず確実に右寄せにする */
.top-bar-right {
  margin-left: auto;
}
.top-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: var(--ff-ui);
  font-size: .72rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color 0.2s;
}
.top-bar-link:hover { color: var(--gold); }
.top-bar-link i { font-size: .65rem; }
.top-bar-right a {
  color: var(--muted);
  font-size: .75rem;
  transition: color 0.2s;
  text-decoration: none;
}
.top-bar-right a:hover { color: var(--gold); }
@media (max-width: 600px) {
  .top-bar { display: none; }
}

/* ── Navigation ───────────────────────────────────────────── */
.main-header {
  position: fixed;
  top: 34px; /* トップバー分オフセット */
  left: 0;
  width: 100%;
  height: 90px;
  padding-top: 8px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.4s var(--ease);
}

/* スクロール開始 → 暗めすりガラス */
.main-header.scrolled {
  height: 90px;
  background: rgba(6, 8, 14, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ヒーローなしページ：初期状態ではトップバーの下に配置 */
.standard-header {
  top: 34px;
}

/* スマホではトップバー非表示のためtop:0に戻す（ヒーローページのヘッダーも含めて全状態対象） */
@media (max-width: 600px) {
  .main-header,
  .main-header.scrolled,
  .standard-header {
    top: 0;
  }
}

/* Push content down on non-hero pages only (targeted body classes) */
body.standard-page, body.product-detail-page, body.products-page {
  padding-top: calc(90px + 34px); /* メインヘッダー + トップバー */
}
@media (max-width: 768px) {
  body.standard-page, body.product-detail-page, body.products-page {
    padding-top: 100px; /* トップバー非表示のため header height のみ */
  }
}

body.standard-page,
body.products-page {
  background-color: #0a1a2b !important;
}

@media (min-width: 1400px) {
  body.standard-page,
  body.products-page {
    background-color: var(--bg) !important;
  }
}

/* サービス4ページ専用：常に青背景を維持（standard-pageの黒上書きより後に置く） */
body.service-page {
  background-color: #0c1a2b !important;
}


.header-flex {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-start;
}

.propeller-logo {
  height: 145px !important; /* Reduced base size to avoid overlap */
  width: auto;
  transition: height 0.4s var(--ease);
  display: block;
}
.main-header.scrolled .propeller-logo,
.standard-header .propeller-logo {
  height: 60px;
}
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 10;
}

/* Rotating Propeller Animation */
@keyframes spinPropeller {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}

@media (min-width: 769px) {
  /* PCでは全ページでヘッダーの見た目を統一 */
  .main-header,
  .main-header.scrolled,
  .standard-header {
    height: 165px;
  }

  .propeller-logo,
  .main-header.scrolled .propeller-logo,
  .standard-header .propeller-logo {
    height: 135px !important;
  }

  body.standard-page,
  body.product-detail-page,
  body.products-page {
    padding-top: calc(150px + 34px); /* メインヘッダー + トップバー */
  }

  /* PC: CTAボタンを1行表示 */
  .btn-shop,
  .btn-tireuse {
    flex-direction: row;
    gap: 5px;
  }
  /* UNUSED (verified 2026-08-04): 参照なし。.btn-shop/.btn-tireuseにサブラベル要素が存在しない
  .btn-tireuse .btn-shop-sub {
    display: inline;
  }
  */
}

/* タブレット横向き: 画面が横長で高さが限られるため、PCサイズのヘッダー(165px)だと
   画面高さの1/4近くを占めてしまう。タッチ端末×横向きのみヘッダーを縮小する */
@media (min-width: 769px) and (max-width: 1400px) and (pointer: coarse) and (orientation: landscape) {
  .main-header,
  .main-header.scrolled,
  .standard-header {
    height: 100px;
  }

  .propeller-logo,
  .main-header.scrolled .propeller-logo,
  .standard-header .propeller-logo {
    height: 70px !important;
  }

  body.standard-page,
  body.product-detail-page,
  body.products-page {
    padding-top: calc(100px + 34px);
  }
}

.nav-links-desktop-right {
  display: none;
  align-items: center;
  align-self: center;
}

.nav-links-desktop-right a {
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;
}
.btn-shop {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  line-height: 1;
  color: #ffffff !important;
  font-size: 0.72rem;
  gap: 3px;
  padding: 12px 17px;
}
/* UNUSED (verified 2026-08-04): テンプレート/DB本文/CF7フォーム/JS/PHP文字列結合のいずれにも参照なし
.btn-shop-sub {
  display: block;
  font-size: 0.6rem;
  font-family: var(--ff-ui);
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.65;
  text-transform: none;
}
.btn-tireuse .btn-shop-sub {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: 1;
  text-transform: uppercase;
}
*/
.btn-tireuse {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  line-height: 1;
  color: #ffffff !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: 1;
  gap: 3px;
  padding: 12px 17px;
}

/* CTAアイコン: デフォルト（PC・タブレット横向き）は非表示、テキストのみ表示 */
.btn-cta-icon,
.btn-cta-icon-img {
  display: none;
}

.header-socials {
  display: flex;
  gap: 12px;
  align-items: center;
}
.header-socials a {
  color: var(--white);
  transition: color 0.3s ease;
}
.header-socials a:hover { color: var(--gold); }

/* Full Menu Overlay */
.full-menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s var(--ease);
  isolation: isolate;
  overflow: hidden;
}
.full-menu.active {
  opacity: 1;
  visibility: visible;
}

/* Close button inside full-menu */
#menu-close {
  position: absolute;
  top: 32px;
  right: 40px;
  background: none;
  border: 1.5px solid rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}
#menu-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(90deg);
}
/* Consolidated Burger Styles below */

/* Demo Header Specifics */

.nav-links a {
  font-family: var(--ff-ui);
  font-size: 0.95rem; /* Much thicker and bolder text */
  font-weight: 700; 
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e5e7eb; /* Brighter initial color */
  position: relative;
  padding-bottom: 6px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width var(--t) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { width: 100%; }

.nav-links li { position: relative; }
.nav-links-desktop { display: none; }

@media (min-width: 1200px) {
  .nav-links-desktop,
  .nav-links-desktop-right {
    display: none;
    gap: 24px;
    align-items: center;
    opacity: 0;
    transition: all 0.5s var(--ease);
  }
  .nav-links-desktop {
    margin-left: 10px;
    transform: translateX(-20px);
  }
  .nav-links-desktop-right {
    margin-right: 20px;
    transform: translateX(20px);
  }
  .nav-links-desktop > a,
  .nav-links-desktop .has-dropdown > a,
  .nav-links-desktop-right > a {
    font-family: var(--ff-ui);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--muted);
    transition: all 0.3s ease;
  }
  .nav-links-desktop a:hover,
  .nav-links-desktop-right a:hover {
    color: var(--white);
  }

  /* Desktop Dropdown Behavior */
  .nav-links-desktop .has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }
  .nav-links-desktop .has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 10;
  }
  .nav-links-desktop .has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.8em;
    margin-left: 4px;
    transition: transform 0.3s ease;
  }
  .nav-links-desktop .has-dropdown:hover > a::after {
    transform: rotate(180deg);
  }
  .nav-links-desktop .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: rgba(9, 9, 11, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    z-index: 2000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .nav-links-desktop .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(18px);
  }
  .nav-links-desktop .dropdown-menu a {
    display: block;
    padding: 10px 24px;
    font-family: var(--ff-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  .nav-links-desktop .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--gold);
  }

  .scrolled .nav-links-desktop,
  .full-menu-active .nav-links-desktop,
  .standard-header .nav-links-desktop,
  .scrolled .nav-links-desktop-right,
  .full-menu-active .nav-links-desktop-right,
  .standard-header .nav-links-desktop-right {
    display: flex;
    opacity: 1;
    transform: translateX(0);
  }
  .scrolled .burger,
  .full-menu-active .burger,
  .standard-header .burger {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    pointer-events: none;
    margin-right: -40px;
  }
}

/* Burger Menu - visible by default on left now */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 24px;
  cursor: pointer;
  z-index: 2000;
  padding: 5px;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}



.burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: var(--t) var(--ease);
  border-radius: 2px;
}
.burger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Quick responsive fixes for new header components */
@media (max-width: 1200px) {
  .header-socials { display: none; }
}
@media (max-width: 1100px) {
  .btn-shop { padding: 8px 16px; font-size: 0.7rem; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.85rem; }
}
@media (max-width: 600px) {
  /* ロゴを縦横ともに正確に中央配置
     - align-items: stretch でheader-flexをヘッダー全高に引き伸ばす
     - top:50% + translate(-50%,-50%) で真の中心に固定 */
  .main-header { align-items: stretch; padding-top: 0; }
  .header-flex { position: relative; align-items: center; }
  .header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
  }
}

/* タブレット縦向き・スマホ: CTAボタンをテキストではなくアイコンのみの丸ボタンに
   （幅が狭くロゴと重なりやすいため、バーガーメニュー同様のアイコンCTAに統一）
   pointer:coarseでタッチ端末に限定し、PCブラウザの縦長ウィンドウでは誤発動しないようにする */
@media (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  /* アイコン化で幅が縮んだ分、間隔も詰めてロゴとの重なりを防ぐ。
     グリッドの中央列（ロゴ）の挙動に左右されないよう、右端に直接固定する */
  .header-right {
    gap: 8px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60; /* ロゴ(最大z-index:50)より確実に手前に出す */
  }
  /* .header-right を前置してセレクタの詳細度を上げ、他の場所にある
     ボタン間の区切り線用ルール（左右padding+左border）を確実に上書きする */
  .header-right .btn-shop,
  .header-right .btn-tireuse {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 50%;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    position: relative;
    z-index: 20; /* 万一ロゴ(z-index:10)と重なっても隠れないようにする保険 */
  }
  .btn-shop .btn-cta-label,
  .btn-tireuse .btn-cta-label {
    display: none;
  }
  .btn-cta-icon {
    display: block;
    font-size: 1.15rem;
    position: relative;
    left: 4px; /* fa-storeのグリフが視覚的に少し左寄りなので中央寄せ調整 */
  }
  .btn-cta-icon-img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
}

@media (min-width: 769px) {
  /* Horizontal Pill Layout - ONLY when NOT in active burger mode */
  .nav-links:not(.active) .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    gap: 20px;
    background: rgba(12,12,15,.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: 100px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease);
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
  }
  .nav-links:not(.active) li:hover .dropdown-menu,
  
  /* Invisible bridge for hover stability */
  .nav-links:not(.active) .has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 12px;
  }
}

/* Vertical Dropdown Layout - for both Mobile AND Desktop Burger mode (.active) */
.nav-links.active .has-dropdown .dropdown-menu {
  position: static;
  display: block;
  height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  transition: all 0.3s ease;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

.nav-links.active .has-dropdown.active .dropdown-menu {
  height: auto;
  padding: 15px 0;
  margin-top: 10px;
}

.nav-links.active .dropdown-menu a {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
  padding: 12px 0;
  text-align: center;
  display: block;
}

.nav-links.active .has-dropdown.active > a::after {
  transform: rotate(180deg);
}

/* Shared Dropdown Styles */
.dropdown-menu li { width: 100%; }
.dropdown-menu a:hover { color: var(--gold); background: rgba(201,168,76,0.07); }

.has-dropdown > a::after {
  content: ' ▾';
  display: inline-block;
  font-size: 0.7em;
  margin-left: 8px;
  transition: transform var(--t) var(--ease);
}
.nav-links:not(.active) .has-dropdown:hover > a::after {
  transform: rotate(180deg);
}

/* Mobile Body State */
body.nav-open { overflow: hidden; }




/* ── Hero (Adopted from Proposal) ───────────────────────────    */
#hero {
  background: var(--proposal-bg);
  background: var(--proposal-bg);
  /* background-image: url('../images/img-torr-penn-bg-11.png');*/
  padding: 0;
  position: relative;
  z-index: 20;
  overflow: visible !important;
}

#hero .hero-left {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  z-index: 10;
  position: relative;
}

#hero h1 {
  font-size: clamp(3rem, 5.5vw, 5.8rem); /* Kept original fluid sizing per user request */
  line-height: 1.06;
  margin-top: 8px;
  margin-bottom: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#hero p {
  font-size: 1.18rem; /* Kept original size */
  max-width: 420px;
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 40px;
}

#hero .hero-right {
  position: absolute;
  top: 90px;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
}

/* Hero Responsive: Tablet (≤1280px) — Image on top, text below */
@media (max-width: 1280px) {
  #hero {
    display: block;
    min-height: 100vh;
    overflow: hidden !important;
  }

  /* Image first — push down to clear the fixed header */
  #hero .hero-right {
    order: 1;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100%;
    height: 55vw;
    min-height: 340px;
    max-height: 560px;
    z-index: 5;
    overflow: visible;
    margin-top: 120px; /* clears the fixed header */
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* Text below */
  #hero .hero-left {
    order: 2;
    width: 100%;
    height: auto;
    padding: 40px 8% 60px;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
  }
  #hero h1 {
    line-height: 1.1;
    margin-bottom: 24px;
    font-size: clamp(2.5rem, 6vw, 4rem);
  }
  #hero p {
    line-height: 1.45;
    margin-bottom: 30px;
  }
}

/* Hero Responsive: Mobile (≤640px) — Image on top, text below */
@media (max-width: 640px) {
  #hero .hero-right {
    height: auto;
    min-height: 280px;
    max-height: 420px;
    margin-top: 90px; /* clears the scrolled/smaller fixed header on mobile */
  }
  #hero .hero-left {
    padding: 32px 5% 60px;
  }
  #hero h1 {
    font-size: 2.4rem;
    line-height: 1.05;
  }
}

/* ── Beer Gallery (Homepage) ──────────────────────────────── */

.tag {
  display: inline-block;
  font-family: var(--ff-ui);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.6);
  padding: 5px 20px;
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
}

/* ── Team Section ─────────────────────────────────────────── */
.team-grid {
  width: 100%;
}
.member-photo {
  width: 100%;
  margin: 0;
}
.member-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  border-radius: 12px;
  object-fit: cover;
}
.position { font-family: var(--ff-ui); color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── Map Embed (Above Footer) ────────────────────────────── */
.map-section {
  width: 100%;
  line-height: 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.map-section iframe {
  width: 100%;
  height: 450px;
  border: 0;
  display: block;
  filter: grayscale(100%) invert(90%) contrast(1.1);
  transition: filter 0.5s var(--ease);
}
.map-section iframe:hover {
  filter: grayscale(100%) invert(90%) contrast(1.3); /* Slight brighten on hover */
}

/* ── Footer ──────────────────────────────────────────────── */
.main-footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding-top: 0;
}
.main-footer .container p { margin-bottom: 0; }
.footer-map {
  position: relative;
  width: 100%;
  height: 260px;
}
.footer-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: grayscale(100%) invert(90%) contrast(1.1);
}
.place-details-compact-container {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--ff-body);
  z-index: 10;
  pointer-events: auto;
}
.place-name {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.place-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.place-stars { color: var(--gold); letter-spacing: 1px; }
.place-score { font-weight: 600; }
.place-count { color: var(--muted); }
.place-address {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.place-directions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
.place-directions:hover { color: var(--gold-light); }
.footer-grid { padding-top: 60px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  grid-template-areas: "brand contact links";
  gap: 48px;
  padding-bottom: 60px;
}
.footer-brand   { grid-area: brand; }
.footer-links   { grid-area: links; }
.footer-contact { grid-area: contact; }
.footer-brand img { height: 72px; margin-bottom: 20px; }
.footer-brand p { color: var(--muted); font-size: .9rem; line-height: 1.7; max-width: 300px; }
.footer-legal-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.footer-legal-links a { font-size: .8rem; color: var(--muted); }
.footer-legal-links a:hover { color: var(--gold); }
.footer-links h4, .footer-contact h4 {
  font-family: var(--ff-ui);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-links ul {
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.footer-links ul li + li { margin-top: 0; }
.footer-links ul a { color: var(--muted); font-size: .9rem; }
.footer-links ul a:hover { color: var(--white); }
/* フッター内pタグはグローバルルールをリセット */
.main-footer p {
  font-family: var(--ff-body) !important;
  font-size: inherit !important;
  line-height: 1.6 !important;
}
.footer-contact p { color: var(--muted); font-size: .9rem !important; margin-bottom: 8px; }
.footer-brand p { font-size: .9rem !important; }
.footer-brand-name { margin-top: 0 !important; margin-bottom: 12px !important; color: var(--white) !important; font-size: 1rem !important; }
.footer-alcohol-notice {
  border-top: 1px solid var(--border);
  padding: 16px 0;
  text-align: center;
}
.footer-alcohol-notice p {
  color: rgba(122,122,133,.6);
  font-size: .8rem !important;
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.footer-bottom .container { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.footer-bottom .footer-legal-links { margin-top: 0; justify-content: center; }
.footer-bottom p { color: var(--muted); font-size: .82rem !important; }
.footer-warning { font-size: .73rem !important; color: rgba(122,122,133,.5) !important; }

/* ══════════════════════════════════════════════════════════
   PRODUCT CATALOG PAGE
══════════════════════════════════════════════════════════ */
/* .products-page ヘッダー背景はスクロールで .scrolled が付与されてから表示 */

@media (min-width: 1200px) {
  .main-header.header-nav-burger .nav-links-desktop,
  .main-header.header-nav-burger .nav-links-desktop-right {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  .main-header.header-nav-burger .burger {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 34px !important;
    pointer-events: auto !important;
    margin-right: 0 !important;
  }
}

.products-hero {
  padding: 60px 0 40px;
  text-align: center;
  background: linear-gradient(to bottom, var(--bg-2) 0%, var(--bg) 100%);
}
.products-hero h1 { font-size: clamp(2.8rem,5vw,5rem); }

.product-nav {
  position: sticky;
  top: 150px;
  z-index: 980;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
  transition: all 0.4s ease;
}
.product-nav.glass {
  background: rgba(13, 25, 44, 0.65);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

@media (max-width: 1024px) {
  .product-nav {
    padding: 10px 0;
    margin-bottom: 40px;
  }
  .product-nav .container {
    gap: 16px 28px;
  }
}
@media (max-width: 768px) {
  .product-nav {
    top: 90px;
    padding: 8px 0;
    margin-bottom: 30px;
  }
  .product-nav .container {
    gap: 10px 20px;
  }
}

/* スマホ（≤640px）：カテゴリーをトグルに切り替え */
.product-nav-toggle {
  display: none;
}
@media (max-width: 640px) {
  /* 背景: PC版glassに近い濃紺。透過は商品透け防止のため高めに設定 */
  .product-nav,
  .product-nav.glass,
  nav#product-nav {
    background: rgba(10, 18, 34, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  /* トグルボタン表示 */
  .product-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ff-ui);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 20px;
    cursor: pointer;
    width: 100%;
    transition: background 0.25s ease;
  }
  .product-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  /* リンク一覧：表示制御はJSで行う。スタイルのみ定義 */
  #product-nav-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 20px !important;
    padding: 10px 20px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

.product-nav .container { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }

.product-nav a {
  position: relative;
  font-family: var(--ff-ui);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 0;
  transition: all 0.3s ease;
}

.product-nav a::after { 
  content:''; 
  position:absolute; 
  bottom:0; 
  left:0; 
  width:0; 
  height:2.5px; 
  background: var(--gold); 
  transition: width 0.35s var(--ease); 
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
}

.product-nav a:hover { 
  color: var(--gold); 
  transform: translateY(-1px);
}
.product-nav a:hover::after { width:100%; }

/* ── サービスページ サブナビ（product-nav glass と同スタイル） ─────── */
.services-nav {
  position: sticky;
  top: 90px; /* standard-header の高さに合わせてすぐ下に固定 */
  z-index: 980;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
  transition: all 0.4s ease;
}
.services-nav.glass {
  background: rgba(13, 25, 44, 0.65);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.services-nav-toggle { display: none; }

.services-nav .container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.services-nav a {
  position: relative;
  font-family: var(--ff-ui);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 0;
  transition: all 0.3s ease;
}
.services-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2.5px;
  background: var(--gold);
  transition: width 0.35s var(--ease);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
}
.services-nav a:hover,
.services-nav a[aria-current="page"] {
  color: var(--gold);
}
.services-nav a[aria-current="page"]::after,
.services-nav a:hover::after { width: 100%; }

@media (max-width: 1024px) {
  .services-nav { padding: 10px 0; }
  .services-nav .container { gap: 16px 28px; }
}
@media (max-width: 768px) {
  .services-nav { padding: 8px 0; }
  .services-nav .container { gap: 10px 20px; }
}

/* モバイル：プルダウン切り替え */
@media (max-width: 640px) {
  .services-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-family: var(--ff-ui);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 10px 0;
    cursor: pointer;
  }
  .services-nav-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .services-nav.open .services-nav-arrow { transform: rotate(180deg); }
  .services-nav { padding: 6px 0; }
  .services-nav .container {
    display: none !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
    padding: 10px 16px 14px;
    text-align: center;
  }
  .services-nav.open .container {
    display: grid !important;
    gap: 4px;
    font-size: 0.85rem;
  }
}

.product-group {
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
  scroll-margin-top: 140px; /* sticky header(80px) + product-nav(~60px) */
}
.product-group .section-header { margin-top: 50px; margin-bottom: 24px; }

/* ビール一覧ページはコンテナをフル幅で使う */
.products-page .product-group > .container {
  max-width: 100%;
  padding-inline: 24px;
}

/* セクション背景 */
.product-group-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) contrast(1.1);
}
.product-group--classiques .product-group-bg {
  background-image: linear-gradient(135deg, rgba(0,50,30,0.6), rgba(0,0,0,0.7));
}
.product-group--ephemeres .product-group-bg {
  background-image: linear-gradient(160deg, rgba(0,20,60,0.5), rgba(0,0,0,0.7));
}
.product-group--collab .product-group-bg {
  background-image: linear-gradient(135deg, rgba(30,15,0,0.5), rgba(0,0,0,0.7));
}
.product-group--barrikens .product-group-bg {
  background-image: linear-gradient(135deg, rgba(40,20,0,0.6), rgba(0,0,0,0.8));
}

/* カードh3内の «...» サブタイトル */
.product-card h3 .card-subtitle {
  font-size: 0.62em;
  opacity: 0.8;
  letter-spacing: 0.04em;
  font-weight: 400;
  display: inline;
}

/* ビール種別ラベル（カード上部） */
.card-beer-type {
  display: block;
  font-family: var(--ff-ui);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 2px 0;
}

/* ── スタイルフィルター「Style ▾」ボタン ─────────────────────────────── */
/* ナビ・フィルター系ボタン：Astraの青いfocus/activeを上書き */
.product-nav-toggle,
.style-filter-toggle,
.style-filter,
.hero-preview,
.gallery-arrow {
  -webkit-tap-highlight-color: transparent;
}
.product-nav-toggle:focus,
.product-nav-toggle:active,
.style-filter-toggle:focus,
.style-filter-toggle:active,
.style-filter:focus,
.hero-preview:focus,
.hero-preview:active,
.gallery-arrow:focus,
.gallery-arrow:active {
  outline: none !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
}

.style-filter-toggle {
  background: none;
  border: 1px solid rgba(201, 168, 76, 0.5);
  border-radius: 20px;
  color: var(--gold);
  font-family: var(--ff-ui);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
}
.style-filter-toggle:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--gold);
}
.style-filter-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.75em;
}

/* ── スタイルフィルターパネル ────────────────────────────────────────── */
.style-filter-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
}
.style-filter-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.style-filter {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.style-filter:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.style-filter.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0c;
  font-weight: 700;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  row-gap: 4px;
  margin: 0 auto;
}
@media (min-width: 1800px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 4px; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); column-gap: 4px; row-gap: 4px; }
}
@keyframes filterReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-card {
  padding: 6px 4px;
  margin-inline: -10px; /* 隣カードと重ね合わせて詰める */
  text-align: center;
  border-radius: var(--r);
  transition: transform var(--t) var(--ease);
  position: relative;
  overflow: visible;
  z-index: 1;
}
.product-card.filter-in {
  animation: filterReveal 0.5s ease-out both;
}
.product-card:hover {
  z-index: 3;
}


/* Bottle Smooth Crossfade Animation */
.bottle-flip {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  margin: 0 auto 10px;
}
.main-image-wrapper img.epuise-stamp-detail {
  position: absolute !important;
  top: 30px !important;
  left: 20px !important;
  width: auto !important;
  height: 90px !important;
  max-width: 260px !important;
  transform: rotate(-8deg) !important;
  z-index: 10;
  pointer-events: none;
  display: block !important;
  filter: none !important;
  object-fit: unset !important;
}
.bottle-flip .epuise-stamp {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: 53% !important;
  right: 70px !important;
  width: 55% !important;
  max-width: 130px !important;
  height: auto !important;
  object-fit: contain !important;
  z-index: 20;
  pointer-events: none;
  transform: rotate(12deg);
}
.bottle-flip img {
  position: absolute;
  top: -20px; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: opacity 0.45s ease-in-out;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}
.bottle-front {
  opacity: 1;
}
.bottle-back {
  opacity: 0;
  pointer-events: none;
}
.product-card:hover .bottle-flip:has(.bottle-back) .bottle-front {
  opacity: 0;
}
.product-card:hover .bottle-flip:has(.bottle-back) .bottle-back {
  opacity: 1;
  pointer-events: auto;
}

.product-card h3 {
  font-family: var(--ff-head);
  font-size: 1.48rem;
  line-height: 1.2;
  margin-top: 4px;
  margin-bottom: 0;
  color: var(--white);
  transition: font-size 0.3s ease;
}
@media (min-width: 1400px) {
  .product-card h3 {
    font-size: 2.1rem;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .product-card h3 {
    font-size: 2.8rem;
  }
}
/* ABV (Alcohol Content) */
.product-card h3 span, .product-card .abv {
  display: block;
  font-family: var(--ff-ui);
  font-size: 1.15rem; /* User requested larger size */
  color: var(--gold);
  margin-top: 8px;
  letter-spacing: 0.1em;
}
/* 製品固有名（highlight）はGrenzeフォントでh3サイズを維持 */
.product-card h3 .highlight {
  font-family: 'Grenze', serif;
  font-size: inherit;
  margin-top: 0;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--white);
  color: var(--white);
}
/* BIO認証ロゴ */
.abv-bio-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.abv-bio-wrap .abv {
  margin-top: 0;
}
.bio-logos {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bio-logo {
  height: 22px;
  width: auto;
  display: block;
}
.bio-logo-eu {
  height: 16px;
}
/* UNUSED (verified 2026-08-04): テンプレート/DB本文/CF7フォーム/JS/PHP文字列結合のいずれにも参照なし。品切れ表示は現在.epuise-stamp/.epuise-stamp-detailに統一
.tag-epuise {
  color: #e05c5c;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
*/
@media (max-width: 640px) {
  .abv-bio-wrap {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
}
/* ビールスタイル名（h4）はゴールドグラデーション */
.product-card h4 {
  font-family: var(--ff-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 2px 0 10px;
  background: linear-gradient(110deg, var(--gold) 20%, #fff9e8 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════════════════════════ */
/* Custom Background for Product Detail Pages（service-pageと同じ扱い） */
body.product-detail-page {
  background-color: #050c17 !important;
}

body.product-detail-page::before {
  display: none;
}

body.product-detail-page::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 22, 0.55);
  z-index: -1;
  pointer-events: none;
}

.breadcrumb {
  padding: 8px 0;
  font-family: var(--ff-ui);
  font-size: .82rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { color: var(--gold-light); }
@media (max-width: 768px) {
  .breadcrumb { padding: 16px 0; }
}
@media (max-width: 640px) {
  .breadcrumb { padding: 8px 0; }
}

.product-detail { padding-top: 48px; padding-bottom: 100px; }

.product-layout { display: flex; gap: 80px; margin-bottom: 100px; align-items: flex-start; }

.product-gallery { flex: 1.4; max-width: 700px; }
.main-image-wrapper {
  margin-bottom: 16px;
  cursor: zoom-in;
  position: relative;
  text-align: center;
}
.main-image-wrapper img {
  width: 100%;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.thumbnail-list { display: flex; gap: 12px; }
.thumb {
  width: 78px; height: 78px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .55;
  transition: all var(--t) var(--ease);
}
.thumb.active, .thumb:hover { opacity: 1; border-color: var(--gold); }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  z-index: 5;
  padding: 0;
}
.gallery-arrow:hover { background: rgba(201,168,76,0.7); border-color: var(--gold); }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }

.product-info { flex: 1.2; position: sticky; top: 110px; }
.product-info .block-tag {
  display: block;
  background: linear-gradient(110deg, var(--gold) 0%, var(--gold-light) 25%, #fff 60%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.product-info h1 {
  font-size: clamp(2.2rem,4vw,3.8rem);
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(245, 244, 240, 0.2);
  background: linear-gradient(110deg, var(--gold) 0%, var(--gold-light) 25%, #fff 60%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
/* «...» サブタイトル：メインタイトルより一回り小さく */
.product-info h1 .h1-subtitle {
  font-size: 0.65em;
  letter-spacing: 0.02em;
  opacity: 0.85;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-info .alc {
  font-family: var(--ff-head);
  color: rgba(201, 168, 76, 0.55);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .9rem;
  margin-top: 10px;
  margin-bottom: 28px;
}
/* 全画面幅共通：VOLとフォーマットを上下に分割 */
.alc-vol, .alc-format { display: block; }
.alc-sep { display: none; }
.product-info .description { padding-bottom: 12px !important; }
.product-info .tp-description,
.product-info .description p {
  color: var(--white);
  font-size: 1.08rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
.product-info .description p:first-of-type {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--ff-head);
}
/* 最初の文字だけ大きく・ゴールドでインライン強調（floatなし） */
.product-info .description p:first-of-type::first-letter {
  font-family: var(--ff-head);
  font-size: 1.8em;
  color: rgba(201, 168, 76, 0.9);
}
.product-info .description p strong {
  font-weight: 600;
  color: var(--gold-light);
}
.chart-bio-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.product-info .info-chart { height: auto; max-width: 260px; display: block; }
.product-info .bio-logos { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.product-info .bio-logos img { height: 52px; width: auto; }

/* Related Products */
.related-products { padding-top: 80px; border-top: 1px solid var(--border); }
.related-products h3 { font-size: 2rem; margin-bottom: 40px; text-align: center; }
.related-grid {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  /* スクロールバーを細く */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.related-grid::-webkit-scrollbar { height: 4px; }
.related-grid::-webkit-scrollbar-track { background: transparent; }
.related-grid::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.related-item {
  position: relative;
  text-align: center;
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: all var(--t) var(--ease);
  cursor: pointer;
  /* 3列横並び：flex固定幅 */
  flex: 0 0 calc(33.333% - 14px);
  min-width: 200px;
  scroll-snap-align: start;
}
.related-item:hover { background: var(--glass); border-color: var(--border); transform: translateY(-6px); }
.related-item img { border-radius: 10px; margin: 0 auto 14px; width: 65%; height: auto; object-fit: cover; }
.related-item h4 { font-size: 1rem; color: var(--white); }
.related-item a:not(.btn-text) {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
}
.related-item a.btn-text { margin-top: 8px; position: relative; z-index: 6; }
/* モバイル：2枚同時に見えるカード幅 */
@media (max-width: 768px) {
  .related-item {
    flex: 0 0 46vw;
    min-width: 140px;
  }
}


/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all .35s var(--ease);
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
#lightbox-img { max-width: 90%; max-height: 90vh; object-fit: contain; border-radius: 10px; }
.lightbox-close {
  position: absolute; top: 32px; right: 40px;
  color: #fff; font-size: 44px; cursor: pointer; line-height: 1;
  transition: color var(--t) var(--ease);
}
.lightbox-close:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   BREWERY PAGE
   ══════════════════════════════════════════════════════════ */
body.brewery-page {
  background-color: #0a1a2b !important;
}
.brewery-hero {
  height: 70vh; min-height: 500px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%), 
              url('../images/brasserie-labo-3.webp') center/cover no-repeat;
}
.parallax-bg-text {
  position: absolute;
  font-size: 18vw; font-weight: 900;
  color: rgba(255,255,255,.025);
  white-space: nowrap; pointer-events: none;
  font-family: var(--ff-head);
  z-index: 1;
  user-select: none;
}
.hero-title-group { position: relative; z-index: 2; text-align: center; }
.brewery-hero h1 {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-top: 15px;
}
/* UNUSED (verified 2026-08-05): 現在のHTML(<h1>Torr <span class="highlight">Penn</span></h1>)には
   最初の非highlightなspanが存在せず本来マッチしないはずのセレクタだが、
   実機でタイトルが極端に小さく表示される不具合の原因になっていたため無効化
.brewery-hero h1 span:first-child:not(.highlight) {
  display: block;
  font-size: 0.35em;
  letter-spacing: 0.3em;
  color: var(--white);
  margin-bottom: 8px;
}
*/

/* Collage */
.collage-section { padding: 60px 0 80px; }

/* スマホ: "mais pas que !" を改行して中央揃え */
@media (max-width: 600px) {
  .collage-section .section-header h2 { text-align: center; }
  .mobile-break { display: block; }
}
.engagements-band { background: var(--bg-2); padding: 60px 0 40px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 -18px 40px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.55); position: relative; z-index: 1; }
/* engagements-band直後のprocess-preview-sectionにのみpadding-topを付与 */
.engagements-band + .process-preview-section { padding-top: 80px; }
.brewery-story { max-width: 740px; margin: 0 auto 80px; text-align: center; }
.brewery-story h2 { font-size: clamp(2rem,3.5vw,3rem); margin-bottom: 20px; }
.brewery-story p { color: var(--muted) !important; font-size: 1.05rem; line-height: 1.2; }

/* Brewery Story Blocks */
.brewery-story-block {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}
.brewery-story-block:nth-child(even) {
  flex-direction: row-reverse;
}
.brewery-story-block .block-text {
  flex: 1.2;
}
.brewery-story-block .block-text h3 {
  font-size: 2.2rem;
  margin-bottom: 24px;
  color: var(--gold) !important;
}
.brewery-story-block .block-text h3::first-letter {
  font-family: var(--ff-head);
  font-size: 1.6em;
  color: var(--gold) !important;
}
.brewery-story-block .block-text p {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--muted) !important;
  margin-bottom: 16px;
}
.brewery-story-block .block-image {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.brewery-story-block .block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.brewery-story-block:hover .block-image img {
  transform: scale(1.05);
}

/* 画像を上のセクションにはみ出させるバリアント */
.brewery-story-block--lift {
  align-items: flex-start;
}
.brewery-story-block--lift .block-image-col {
  flex: 1;
  position: relative;
  z-index: 5;
  margin-top: -120px;
}
.brewery-story-block--lift .block-image-col .block-image {
  flex: unset;
}
.block-image-caption {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--muted) !important;
  margin-top: 20px;
  padding: 0 4px;
}

@media (max-width: 992px) {
  .brewery-story-block--lift .block-image-col {
    margin-top: 0;
  }
  .brewery-story-block {
    flex-direction: column !important;
    gap: 40px;
    margin-bottom: 80px;
  }
}

/* セクション区切り線（ゴールドグラデーション） */
.section-divider {
  position: relative;
  width: 220px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.7), transparent);
  margin: 16px auto;
}
/* 中央に小さなダイヤモンドを重ねてリズムを強調 */
.section-divider::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.45rem;
  color: rgba(201, 168, 76, 0.7);
  background: var(--bg-2);
  padding: 0 8px;
  line-height: 1;
}

/* Process Preview */
.process-preview-section { padding-bottom: 120px;
 }
.process-header { text-align: center; max-width: 960px; margin: 0 auto 60px; }
.process-header h3 {
  font-size: 2rem;
  line-height: 1.4;
  color: var(--gold) !important;
  font-weight: 600;
  font-family: var(--ff-head);
}
.process-header h3::first-letter {
  font-family: var(--ff-head);
  font-size: 1.6em;
  color: var(--gold) !important;
}
.process-header p {
  color: var(--muted) !important;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 16px;
}

.mini-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 395px;
  gap: 20px;
}
.mini-item img,
.mini-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
/* 横長になるほど顔が見えるよう下げる */
.img-pos--face { object-position: center 70%; }
@media (min-width: 900px)  { .img-pos--face { object-position: center 80%; } }
@media (min-width: 1200px) { .img-pos--face { object-position: center 15%; } }
@media (min-width: 1200px) { .mini-collage { grid-auto-rows: 480px; } }
.mini-item:nth-child(1) { grid-column: span 1; grid-row: span 2; }
.mini-item:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.mini-item:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.mini-item:nth-child(4) { grid-column: span 3; grid-row: span 1; }

/* 通常レイアウトの水平ミラー版 */
.mini-collage--reverse .mini-item:nth-child(1) { grid-column: 4;       grid-row: 1 / span 2; }
.mini-collage--reverse .mini-item:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.mini-collage--reverse .mini-item:nth-child(3) { grid-column: 1;       grid-row: 1; }
.mini-collage--reverse .mini-item:nth-child(4) { grid-column: 1 / span 3; grid-row: 2; }

/* associations用：縦積みレイアウト用余白 */
.mini-collage--asso {
  margin-top: 48px;
}
.service-info--petit-plus {
  margin-top: 48px;
}
.service-info--petit-plus h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }

/* associations用：3枚バラバラサイズ（常に横長） */
.mini-collage--asso {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 230px auto;
}
.mini-collage--asso .mini-item:nth-child(3) img {
  height: auto;
  object-fit: contain;
}
.mini-collage--asso .mini-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 1;
}
.mini-collage--asso .mini-item:nth-child(2) {
  grid-column: span 1;
  grid-row: span 1;
}
.mini-collage--asso .mini-item:nth-child(3) {
  grid-column: span 3;
  grid-row: span 1;
}

@media (max-width: 768px) {
  /* breweryページ：セクション間の間延び解消 */
  .collage-section           { padding: 40px 0 48px; }
  .brewery-story-block       { margin-bottom: 48px; }
  .process-preview-section   { padding-bottom: 56px; }
  .experience-section        { padding: 56px 0 !important; }
  .section-divider           { width: 160px; }

  .mini-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .mini-item:nth-child(1) { grid-column: span 2; }
  .mini-item:nth-child(2) { grid-column: span 1; }
  .mini-item:nth-child(3) { grid-column: span 1; }
  .mini-item:nth-child(4) { grid-column: span 2; }
  .mini-collage--asso { grid-template-columns: repeat(2, 1fr); grid-template-rows: 160px 160px; }
  .mini-collage--asso .mini-item:nth-child(1) { grid-column: span 1; }
  .mini-collage--asso .mini-item:nth-child(2) { grid-column: span 1; }
  .mini-collage--asso .mini-item:nth-child(3) { grid-column: span 2; overflow: hidden; }
  /* height:auto のままだと画像がグリッドセルからはみ出し service-info--petit-plus と重なるのを防ぐ */
  .mini-collage--asso .mini-item:nth-child(3) img { height: 100%; }
  /* モバイルでのリバース: item1が右側に縦長、item3左上、item2左下、item4全幅 */
  .mini-collage--reverse .mini-item:nth-child(1) { grid-column: 2;          grid-row: 1 / span 2; }
  .mini-collage--reverse .mini-item:nth-child(2) { grid-column: 1;          grid-row: 2; }
  .mini-collage--reverse .mini-item:nth-child(3) { grid-column: 1;          grid-row: 1; }
  .mini-collage--reverse .mini-item:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; }
}

/* Experience / Team */
.experience-section {
  padding: var(--section);
}

/* ══════════════════════════════════════════════════════════
   SERVICE PAGES (Vente, Asso, Événements, Pro)
══════════════════════════════════════════════════════════ */
.page-title {
  height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.page-title h1 { font-size: clamp(2.5rem,5vw,5rem); }

.service-detail { padding: 80px 0 80px; }
.service-img.service-img--sm {
  flex: 0 0 420px;
}
/* UNUSED (verified 2026-08-04): テンプレート/DB本文/CF7フォーム/JS/PHP文字列結合のいずれにも参照なし。サイト内唯一の<video>(brewery)にクラス指定なし
.service-video {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: block;
}
@media (max-width: 1024px) {
  .service-video { height: 645px; object-position: center 43%; }
}
@media (max-width: 768px) {
  .service-video { height: 500px; object-position: center 43%; }
}
*/
.service-detail > .container + .container { margin-top: 100px; }
.service-detail > .container:nth-child(even) .service-flex { flex-direction: row-reverse; }
.service-flex { display: flex; align-items: center; gap: 70px; margin-bottom: 65px; }
.service-flex--reverse { flex-direction: row-reverse; }
.service-img { flex: 1; }
.service-info { flex: 1; }
.service-info .btn-primary { margin-bottom: 36px; }
.service-info h2 { font-size: clamp(1.8rem,3vw,2.8rem); color: var(--white) !important; margin-bottom: 20px; }
.service-info h2::first-letter {
  font-family: var(--ff-head);
  font-size: 1.6em;
  color: var(--gold);
}
.service-info p { color: var(--muted); font-size: 1.2rem; line-height: 1.2; margin-bottom: 16px; }
.check-list { list-style: none; padding-left: 0; margin-left: 0; margin-top: 20px; }
.check-list li {
  padding: 10px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.check-list li::before { content: '✦'; color: var(--gold); font-size: .7em; flex-shrink: 0; }

/*Vente Directe*/
.page-title--vente-directe {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%), url('../images/brasserie-labo-5.webp');
  background-size: cover;
  background-position: center;
}

.service-boutique-band {
  background: var(--bg-2) !important;
  padding: 60px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -18px 40px rgba(0,0,0,0.55), 0 18px 40px rgba(0,0,0,0.55);
  position: relative;
  z-index: 1;
}

/*Asso & Festivals*/
.page-title--associations-festivals {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%), url('../images/associations-4.webp');
  background-size: cover;
  background-position: center;
  }

/*Evenements privés*/
.page-title--evenements-prives {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%), url('../images/brasserie-labo-12.webp');
  background-size: cover;
  background-position: center;
}

/* Tireuse : infos pratiques + ressources */
/* 1枚目のcontainerを次セクションに重ねる */
.container--img-hang {
  position: relative;
  z-index: 2;
  margin-bottom: -100px;
}
@media (max-width: 767.98px) {
  .container--img-hang {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
  }
}
.tireuse-infos {
  padding: 85px 0 80px;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.tireuse-infos .container{
  justify-items: end;
}
.tireuse-infos + .container { margin-top: 80px; }
  
/*.tireuse-infos-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}*/
.tireuse-notices {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}
.tireuse-notices p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 10px;
}
.tuto-list { list-style: none; }
.tuto-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.tuto-list a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color .2s;
}
.tuto-list a:hover { color: var(--gold); }
.tuto-list a i { font-size: 1rem; color: var(--gold); flex-shrink: 0; }

/* ══ Formulaire de réservation tireuse ══ */
.reservation-section {
  padding: 80px 0 120px;
  border-top: 1px solid var(--border);
  /* iOS Safari: transform付き子要素(.reveal)でoverflow:hiddenが効かないバグ対策 */
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .reservation-section { padding: 80px 0 65px; }
}
.reservation-section .section-header { margin-bottom: 50px; }

.reservation-form {
  max-width: 720px;
  margin: 0 auto;
}

/* ── FAQ tireuse ────────────────────────────────────────────── */
.faq-tireuse-section {
  padding: 80px 0 100px;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
}
.faq-tireuse-subtitle {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 8px;
}
.faq-tireuse-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
}
.faq-tireuse-list {
  max-width: 720px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-tireuse-item {
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
  transition: border-color 0.2s;
}
.faq-tireuse-item[open] {
  border-color: rgba(201,168,76,0.5);
}
.faq-tireuse-item summary {
  padding: 18px 24px;
  cursor: pointer;
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-tireuse-item summary::-webkit-details-marker { display: none; }
.faq-tireuse-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-tireuse-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-tireuse-item p {
  padding: 0 24px 20px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}
.faq-tireuse-contact {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.faq-tireuse-contact a {
  color: var(--gold);
  text-decoration: none;
}
.faq-tireuse-contact a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .faq-tireuse-section { padding: 60px 0 80px; }
  .faq-tireuse-item summary { padding: 16px 18px; font-size: 0.88rem; }
  .faq-tireuse-item p { padding: 0 18px 16px; }
}

.rf-field {
  margin-bottom: 28px;
  min-width: 0; /* グリッドアイテムが min-content 幅より縮めるよう設定 */
}
.rf-row {
  display: grid;
  /* minmax(0, 1fr): トラック最小値を0にすることでアイテムのmin-content制約を無視する */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

.rf-field > label {
  display: block;
  font-family: var(--ff-ui);
  font-size: .9rem;
  color: var(--white);
  margin-bottom: 10px;
}
.rf-req { color: var(--muted); font-weight: 400; }
.rf-opt { color: var(--muted); font-weight: 400; }

.reservation-form input[type="text"],
.reservation-form input[type="tel"],
.reservation-form input[type="email"],
.reservation-form input[type="date"],
.reservation-form textarea {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: 16px; /* iOS自動ズーム防止: 16px未満だとフォーカス時にズームが発生する */
  transition: border-color var(--t) var(--ease);
  /* date inputのカレンダーアイコンをテーマに合わせる */
  color-scheme: dark;
}
/* CF7ラッパーとdateフィールド: inline-block + 固有最小幅による横はみ出しを総合対策 */
/* CF7フォーム横オーバーフロー対策: wpcf7 / form 要素にも overflow を設定 */
.reservation-form,
.reservation-form .wpcf7,
.reservation-form form.wpcf7-form {
  overflow-x: hidden;
  max-width: 100%;
}
.reservation-form span.wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* date inputのiOS固有サイズ問題: minmax(0,1fr)グリッドと組み合わせて幅を制約 */
.reservation-form input[type="date"],
.reservation-form .wpcf7-date {
  display: block !important;
  width: 100% !important;
  max-width: calc(100vw - 28px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.reservation-form input:focus,
.reservation-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.reservation-form textarea { min-height: 140px; resize: vertical; }

/* ラジオ・チェックボックス共通 */
.rf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 4px;
}
.rf-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 4px;
}

.rf-radio,
.rf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: .95rem;
  transition: color .2s;
}
.rf-radio:hover,
.rf-check:hover { color: var(--white); }

/* ラジオボタン カスタムスタイル */
.rf-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .2s;
  position: relative;
}
.rf-radio input[type="radio"]:checked {
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 45%, transparent 50%);
}
.rf-radio input[type="radio"]:hover { border-color: var(--gold-light); }

/* チェックボックス カスタムスタイル */
.rf-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.rf-check input[type="checkbox"]:checked {
  border-color: var(--gold);
  background: var(--gold);
}
.rf-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.rf-check input[type="checkbox"]:hover { border-color: var(--gold-light); }

.rf-submit { margin-top: 10px; }
.rf-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  padding: 14px 34px !important;
  border-radius: 50px !important;
  font-family: var(--ff-ui) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  cursor: pointer;
  border: none !important;
  background: var(--gold) !important;
  color: var(--bg) !important;
  transition: all var(--t) var(--ease-bounce);
}
.rf-submit input[type="submit"]:hover {
  background: var(--gold-light) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(201,168,76,.35);
}

.rf-date-error {
  display: block;
  margin-top: 6px;
  font-size: .85rem;
  color: #e05c5c;
}
.rf-date-error[hidden] { display: none; }

/*professionnels CHR*/
.page-title--professionnels-chr {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 100%), url('../images/brasserie-labo-13.webp');
  background-size: cover;
  background-position: center;
}

/* サービスページ4種・breweryページ：タブレット以下でヒーロー高さを抑制 */
@media (max-width: 1024px) {
  .page-title,
  .brewery-hero {
    height: 55vh;
    min-height: 455px;
  }
}
/* モバイルでは背景透かし文字を非表示（写真の上に透けて見えるのを防ぐ） */
@media (max-width: 768px) {
  .parallax-bg-text { display: none; }
}
/* Vente directe「Visiter notre brasserie」：モバイルでテキスト→画像の順に変更 */
/* service-boutique-band(z-index:1)の下方box-shadowがSafariで重なって
   padding-topが潰れて見える問題を解消するため z-index:2 で浮かせる */
.section-visiter { position: relative; z-index: 2; }
@media (max-width: 1024px) {
  .service-info--visiter { order: 1; }
  .service-img--visiter { order: 2; margin-top: 24px; margin-bottom: 24px; }
  .section-visiter { padding-top: 60px !important; }
  .service-info--visiter h2 { margin-top: 0; }
}

/* Contact page */
.contact-section { padding: 150px 0 100px; }
.contact-page { padding-bottom: 100px; }
.contact-page .section-header { padding-top: 0 !important; }
.contact-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 50px; align-items: start; }

/* フォームコンテナのpadding（glassカード内余白） */
.contact-form.glass { padding: 32px; }
/* フォームグループ（CF7対応） */
.contact-form .form-group { margin-bottom: 20px; }
.contact-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ff-ui);
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--white);
  font-family: var(--ff-body);
  font-size: .95rem;
  transition: border-color 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus { outline: none; border-color: var(--gold); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form select option { background: var(--bg-2); color: var(--white); }
@media (max-width: 768px) {
  .contact-form select,
  .contact-form select option { font-size: 1rem; }
}

/* CF7 固有要素のリセット */
.contact-form .wpcf7-form p { margin: 0; }
.wpcf7-form.init label { padding: 1px; }
/* Astraのlabel/legendデフォルト（#111827・12px）を上書き */
label, legend {
  color: var(--white) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.wpcf7-list-item label { color: var(--white) !important; }
.contact-form .optional { font-size: .8rem; color: var(--muted); font-weight: 400; }
.contact-form .required-mark { color: var(--gold); font-size: .85rem; }
.contact-form .wpcf7-spinner { display: none; }
.contact-form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid var(--gold);
  color: var(--white);
}

/* コンタクト情報カード */
.contact-info h2 { font-size: 2.5rem; margin-bottom: 20px; }
.contact-info p { color: var(--muted); margin-bottom: 12px; }
.contact-info a { color: var(--gold); }
.info-card { padding: 30px; }
.info-card h3 { margin-bottom: 15px; color: var(--gold) !important; }
.info-card p { color: var(--muted); margin-bottom: 5px; }

/* Legal / Sitemap */
.legal-content h1 { font-size: clamp(2.5rem,4vw,4rem); margin-bottom: 50px; }
.legal-content h2 { font-family: var(--ff-ui); color: var(--gold) !important; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; margin: 48px 0 20px; }
.legal-content p { color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
.legal-content strong { color: var(--white); }
.legal-content a { color: var(--gold); text-decoration: underline; }
.legal-content ul { list-style: disc; margin-left: 24px; color: var(--muted); }
.legal-content ul li { margin-bottom: 10px; }
.breadcrumb { padding: 15px 0 16px; font-family: var(--ff-ui); font-size: .8rem; color: var(--muted); }

/* h1/h2直下の説明pタグ → Grenzeフォント */
.section-header > p,
.service-info > p,
h1 + p { font-family: var(--ff-head); }

.sitemap-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 80px; margin-top: 36px; }
.sitemap-column h2 { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 28px; font-size: 1.8rem; }
.sitemap-column h3 { color: var(--white); font-size: 1.2rem; margin: 36px 0 16px; font-family: var(--ff-ui); }
.sitemap-column ul li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sitemap-column ul li a:hover { color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* モバイル・タブレット：縦積み時にCTAを中央揃え */
@media (max-width: 1024px) {
  .service-info .btn,
  .product-info .btn,
  .btn-text,
  .stats-cta-link {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
  .rf-submit input[type="submit"],
  .wpcf7 .wpcf7-submit,
  .wpcf7 .wpcf7-submit:disabled {
    display: block;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .service-detail { padding: 40px 0 0; }
  .service-flex { flex-direction: column; gap: 10px; margin-bottom: 20px; }
}
@media (max-width: 480px) {
  .service-flex { gap: 0px; }
}

@media (max-width: 1024px) {
  .service-flex { flex-direction: column; gap: 40px; }
  .tireuse-infos-inner { grid-template-columns: 1fr; gap: 40px; }
  .container--img-hang { margin-bottom: 0; }
  /* iOS Safari での grid intrinsic sizing 問題を回避: グリッドを無効化してブロックレイアウトに切り替え */
  .rf-row { display: block !important; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand contact"
      "links links";
  }
  
}

@media (max-width: 768px) {
  :root { --section: 80px 0; }

  .burger { display: flex; }

  /* Hide desktop CONTACT link on mobile/tablet */
  .nav-links-desktop-right { display: none !important; }

  /* ── モバイルヘッダー：全状態・全ページ100pxに統一 ── */
  .main-header { height: 100px; }

  /* ロゴサイズ */
  .propeller-logo { height: 72px !important; }

  /* standard-header / scrolled状態も同じ高さ */
  .main-header.scrolled,
  .standard-header { height: 100px !important; }
  .main-header.scrolled .propeller-logo,
  .standard-header .propeller-logo { height: 72px !important; }

  /* ロゴを常に中央に保つ（左右1fr対称グリッドを維持） */
  .header-flex {
    grid-template-columns: 1fr auto 1fr;
  }

  /* Legacy nav links a removed */

  /* Legacy mobile dropdowns fully removed */
  /* Cleanup complete */
  
  .sitemap-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── フッター モバイル ── */
  .footer-map {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .footer-map iframe { height: 180px; flex-shrink: 0; }
  .place-details-compact-container {
    position: static;
    border-radius: 0;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .footer-grid { padding-top: 40px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "contact contact"
      "links links";
    gap: 32px 24px;
    padding-bottom: 40px;
  }
  .footer-brand  { display: none; }
  .footer-links  { grid-area: links; }
  .footer-links ul { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-area: contact; }
  .footer-brand img { height: 72px; }
  .footer-brand img { margin-inline: 0; }
  .footer-brand p { margin-inline: 0; }
  .footer-bottom .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .footer-warning { text-align: center; max-width: 100%; }

  /* サービスページの画像：スマホで50%幅に縮小して中央揃え */
  .service-img img { width: 50%; display: block; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID & DETAIL RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════ */

/* bottle-flip は常にカード幅いっぱいに表示 */
.product-grid .bottle-flip { max-width: 100% !important; }

@media (max-width: 1024px) {
  .product-card { padding: 10px 0; }
  /* 個別ページ：タブレットで横並び維持 */
  .product-layout {
    flex-direction: row !important;
    gap: 40px !important;
  }
}
@media (max-width: 768px) {
  /* コンテナ左右paddingをモバイル向けに縮小 */
  .container { padding-inline: 20px; }
  /* ÉPUISÉ スタンプをモバイルで小さく */
  .main-image-wrapper img.epuise-stamp-detail {
    height: 55px !important;
    max-width: 160px !important;
    top: 12px !important;
    left: 8px !important;
  }
  /* 個別ページ：モバイルで縦積み */
  .product-layout {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
  }
  .product-gallery {
    margin: 0 auto !important;
    max-width: 420px !important;
    width: 100%;
  }
  .product-info { width: 100%; }
}
@media (max-width: 480px) {
  .container { padding-inline: 14px; }
}

/* =========================================
   Full Menu Overlay v2（アイコングリッド式）
   ========================================= */

/* ベースの背景色を透明にして背景画像レイヤーを使う */
.full-menu--v2 {
  background: transparent;
  align-items: flex-start;
  justify-content: center;
}

/* 背景画像レイヤー */
.full-menu--v2 .fmig-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/bg-5.webp');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* 画像の上に暗めのオーバーレイ */
.full-menu--v2 .fmig-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, 0.72);
}

/* 閉じるボタン（v2用） */
.full-menu--v2 #menu-close {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 0 20px;
  min-height: 44px;
  border-radius: 999px;
  font-size: 1.1rem;
  top: 18px;
  right: 18px;
  border-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}
.full-menu--v2 #menu-close:hover {
  border-color: #fff;
  color: #fff;
  transform: none;
}
.fmig-close-label {
  font-family: var(--ff-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--white);
}

/* コンテンツラッパー */
.fmig-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 35px 20px 40px;
}

/* 各セル（共通） */
.fmig-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  padding: 13px 12px;
  min-height: 95px;
  color: #fff;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.fmig-cell:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.fmig-cell i {
  font-size: 2rem;
  color: #fff;
}
.fmig-cell svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
  flex-shrink: 0;
}
/* UNUSED (verified 2026-08-04): テンプレート/DB本文/CF7フォーム/JS/PHP文字列結合のいずれにも参照なし。現行.fmig-cellは<i>アイコン+<span>のみでimg/サブラベル要素なし
.fmig-cell .fmig-cell-img {
  display: block;
  width: 2.4rem !important;
  height: 2.4rem !important;
  max-width: none !important;
  object-fit: contain;
  flex-shrink: 0;
}
.fmig-cell-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 2px;
  letter-spacing: 0.03em;
}
*/
.fmig-cell span {
  font-family: var(--ff-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

/* SNSセル */
.fmig-sns-label {
  font-family: var(--ff-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.fmig-sns-icons {
  display: flex;
  gap: 20px;
  align-items: center;
}
.fmig-sns-icons a {
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.25s ease;
}
.fmig-sns-icons a:hover {
  color: var(--gold);
}

@media (min-width: 900px) {
  .full-menu.full-menu--v2 {
    width: 45vw;
  }
  /* メニュー右側（55vw）のすりガラスオーバーレイ */
  .fmig-page-blur {
    display: none;
    position: fixed;
    top: 0;
    left: 45vw;
    width: 55vw;
    height: 100vh;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(9, 9, 11, 0.45);
    z-index: 1499;
    pointer-events: none;
  }
  .nav-open .fmig-page-blur {
    display: block;
    pointer-events: auto;
    cursor: pointer;
  }
}

/* --- v2 新レイアウト用 --- */

/* ロゴ中央配置 */
.fmig-logo-center {
  display: flex;
  justify-content: center;
  padding: 10px 0 0px;
}
.fmig-logo-center a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.fmig-logo-center .fmig-logo-text {
  width: 160px;
  height: auto;
  filter: brightness(0) invert(1);
}
/* base＋elise重ねコンテナ */
.fmig-logo-stack {
  position: relative;
  width: 90px;
  height: 90px;
  overflow: visible;
}
.fmig-logo-base {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: invert(1);
  mix-blend-mode: lighten;
  position: relative;
  z-index: 0;
}
/* elise位置決めラッパー（中心をbaseの中心に固定） */
.fmig-elise-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: 125%;
  z-index: 1;
}
/* elise本体（回転のみ） */
.fmig-logo-elise {
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
}

/* 回転アニメーション */
@keyframes fmig-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fmig-spin {
  animation: fmig-rotate 50s linear infinite;
}

/* 本体2列レイアウト */
.fmig-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

/* 左：アイコンボックス縦並び */
.fmig-icons-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* 右：テキストリスト */
.fmig-text-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.fmig-text-list a {
  font-family: var(--ff-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 13px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.fmig-text-list a:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.fmig-text-list a:hover {
  color: var(--gold);
  padding-left: 18px;
}
/* ゴールド強調リンク（VENTE DIRECTE・CONTACT） */
.fmig-link-gold {
  color: var(--gold) !important;
}
.fmig-link-gold::after {
  content: ' →';
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fmig-link-gold:hover {
  color: var(--gold-light) !important;
}
.fmig-link-gold:hover::after {
  opacity: 1;
  transform: translateX(4px);
}

/* SNSバー（横並び） */
.fmig-sns-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 4px;
}

/* ── 大画面 (1400px〜): fmig メニュー拡大 ─────────────────── */
@media (min-width: 1400px) {
  .fmig-wrap {
    max-width: 640px;
    padding: 40px 28px 48px;
    gap: 18px;
  }
  .fmig-logo-stack {
    width: 106px;
    height: 106px;
  }
  .fmig-logo-center .fmig-logo-text {
    width: 188px;
  }
  .fmig-cell {
    min-height: 112px;
    padding: 16px 14px;
  }
  .fmig-cell i {
    font-size: 2.4rem;
  }
  .fmig-cell span {
    font-size: 0.88rem;
  }
  .fmig-text-list a {
    font-size: 1.05rem;
    padding: 15px 10px;
  }
  .fmig-sns-icons a {
    font-size: 1.7rem;
  }
}

@media (min-width: 1101px) {
  .btn-shop { padding: 12px 20px; }
}

@media (min-width: 1400px) {
  p { font-size: 1.15rem; }
}
@media (min-width: 1800px) {
  p { font-size: 1.25rem; }
}

/* ── 超ワイドスクリーン (1800px〜): コンテナ拡幅 + fmig さらに拡大 ── */
@media (min-width: 1800px) {
  .container {
    max-width: clamp(1700px, 80vw, 2200px);
  }
  .fmig-wrap {
    max-width: 760px;
    padding: 48px 36px 56px;
    gap: 22px;
  }
  .fmig-logo-stack {
    width: 120px;
    height: 120px;
  }
  .fmig-logo-center .fmig-logo-text {
    width: 210px;
  }
  .fmig-cell {
    min-height: 130px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .fmig-cell i {
    font-size: 2.8rem;
  }
  .fmig-cell span {
    font-size: 1rem;
  }
  .fmig-text-list a {
    font-size: 1.2rem;
    padding: 18px 10px;
  }
  .fmig-sns-label {
    font-size: 0.75rem;
  }
  .fmig-sns-icons a {
    font-size: 2rem;
  }
  .nav-links-desktop > a,
  .nav-links-desktop .has-dropdown > a,
  .nav-links-desktop-right > a {
    font-size: 1.05rem;
  }
  .mini-collage { grid-auto-rows: 560px; }
  .img-beer-label { object-fit: contain; background: var(--bg-1); }
  .img-labo-11 { object-position: center 60%; }

  /* 超ワイドスクリーン: product-detail スケールアップ */
  .product-layout {
    gap: 100px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
  .product-gallery {
    max-width: 820px;
  }
  .product-info h1 {
    font-size: clamp(3.2rem, 3.5vw, 5rem);
  }
  .product-info .alc {
    font-size: clamp(1.35rem, 2.2vw, 1.4rem) !important;
  }
  .product-info .tp-description,
  .product-info .description p {
    font-size: 1.35rem;
  }
  .product-info .info-chart {
    max-width: 320px;
  }
}


/* フローティングカートボタン（全ページ共通） */
.floating-cart-anchor {
  position: fixed;
  bottom: 74px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.4);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
}
.floating-cart-anchor.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  animation: cartPulse 2s infinite;
}
.floating-cart-anchor:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 15px 40px rgba(201, 168, 76, 0.6);
  color: #000;
}
@media (max-width: 600px) {
  .floating-cart-anchor {
    bottom: 72px;
    right: 30px;
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

/* ── タブレット以下：p要素の可読性向上 ──────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --muted: #9090a0; }
  p {
    font-size: 1.0625rem;
    line-height: 1.78;
  }
}

/* ── ビール一覧ページ SEO H1ヘッダー ──────────────────────────────────── */
.products-page-header {
  padding: 52px 0 28px;
  text-align: center;
}
.products-page-header .subtitle {
  display: block;
  margin-bottom: 10px;
}
.products-page-header h1 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  margin: 0 0 0;
  line-height: 1.15;
}
@media (max-width: 768px) {
  .products-page-header { padding: 5px 0 16px; }
}

/* ── Flatpickr カスタムテーマ（ダーク＋ゴールドアクセント） ──────────────── */
/* altInput（表示用テキスト入力）をフォームの他フィールドに統一 */
.reservation-form .flatpickr-input[readonly] {
  display: none !important; /* 元のdate inputを非表示（Flatpickrが隠すが念のため） */
}
.reservation-form .flatpickr-input ~ input.flatpickr-input {
  display: block !important;
  width: 100% !important;
}
/* altInputの見た目をフォーム入力欄に統一 */
.reservation-form .flatpickr-alt-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--white) !important;
  font-family: var(--ff-body) !important;
  font-size: 16px !important; /* iOS自動ズーム防止: 16px未満だとタップ時にズームが発生する */
  padding: 14px 18px !important;
  cursor: pointer;
  touch-action: manipulation; /* ダブルタップズーム無効化 */
}
.reservation-form .flatpickr-alt-input:focus {
  outline: none !important;
  border-color: var(--gold) !important;
}
/* カレンダーポップアップ */
.flatpickr-calendar {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6) !important;
  border-radius: 12px !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
  background: var(--bg-1) !important;
  color: var(--muted) !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--white) !important;
  fill: var(--white) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--gold) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--white) !important;
}
/* カレンダー内の全input/selectに16px強制（iOS zoom対策: font-size < 16pxでズームが発生する） */
.flatpickr-calendar input,
.flatpickr-calendar select {
  font-size: 16px !important;
}
.flatpickr-day {
  color: var(--white) !important;
  border-radius: 6px !important;
}
.flatpickr-day:hover {
  background: var(--bg-2) !important;
  border-color: var(--gold) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--bg) !important;
}
.flatpickr-day.today {
  border-color: var(--gold-light) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--muted) !important;
  opacity: 0.4;
}