/* ============================================================
   ORAMEL Honey Lab — Shared Stylesheet
   honey-lab.css
   ============================================================ */

/* ─── Google Fonts は各HTML側で読み込む ─── */

/* ─── CSS Variables ─── */
:root {
  --gold:       #C8983A;
  --gold-light: #E5B96A;
  --gold-pale:  #F5E8CC;
  --dark:       #1A1208;
  --dark-brown: #2C1F0A;
  --brown-mid:  #5C3D1A;
  --cream:      #FAF6EE;
  --cream-dark: #F0E8D5;
  --white:      #FFFFFF;
  --text-main:  #2C1F0A;
  --text-sub:   #7A6040;
  --border:     rgba(200,152,58,0.25);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Serif JP', serif;
  background: var(--cream);
  color: var(--text-main);
  overflow-x: hidden;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 48px;
  background: rgba(250,246,238,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
}
.nav-logo-main {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.18em; color: var(--dark);
}
.nav-logo-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-style: italic;
  letter-spacing: 0.12em; color: var(--gold);
}
.nav-links {
  display: flex; gap: 36px; list-style: none;
}
.nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--text-sub);
  transition: color 0.25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

.nav-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold);
  padding: 6px 16px; text-decoration: none;
  transition: all 0.25s;
}
.nav-badge:hover { background: var(--gold); color: var(--white); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-wrap {
  padding-top: 80px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.breadcrumb {
  max-width: 1280px; margin: 0 auto; padding: 16px 48px;
  display: flex; gap: 8px; align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.breadcrumb a {
  text-decoration: none; color: var(--text-sub);
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: var(--border); }
.breadcrumb-cur { color: var(--dark); }

/* ============================================================
   SECTION LABELS & HEADINGS
   ============================================================ */
.section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
}
.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 300; color: var(--dark);
  margin-bottom: 8px;
}
.section-heading em { font-style: italic; color: var(--gold); }
.section-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 56px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
  background: var(--dark); padding: 16px 36px;
  transition: background 0.3s;
  border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--gold); }

.btn-outline {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--dark);
  border: 1px solid var(--border); padding: 16px 28px;
  transition: all 0.3s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-ghost {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--text-sub);
  display: flex; align-items: center; gap: 8px;
  transition: color 0.25s;
}
.btn-ghost:hover { color: var(--gold); }
.btn-ghost::after {
  content: '→';
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
}

/* ============================================================
   TAGS
   ============================================================ */
.tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--border); color: var(--text-sub);
}
.tag-gold {
  background: var(--gold-pale);
  border-color: var(--gold-light);
  color: var(--brown-mid);
}

/* ============================================================
   STAR SCORES
   ============================================================ */
.star       { color: var(--gold); font-size: 11px; }
.star-empty { color: var(--cream-dark); font-size: 11px; }

/* ============================================================
   HONEY CARDS  (一覧・注目セクション共通)
   ============================================================ */
.honey-card {
  background: var(--white);
  text-decoration: none; display: block;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.honey-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.12);
}

/* 画像エリア：実写真が入るまでは背景色のみ */
.honey-card-img {
  width: 100%; aspect-ratio: 4/3;
  position: relative; overflow: hidden;
}
.honey-card-img-large { aspect-ratio: 3/2; }

/* 画像左下のテキストラベル */
.card-img-label {
  position: absolute; bottom: 12px; left: 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(92,61,26,0.55);
}

/* カードバッジ */
.card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold); color: var(--white); padding: 4px 10px;
}

.honey-card-body { padding: 20px 18px; }
.honey-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.honey-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300;
  color: var(--dark); line-height: 1.1; margin-bottom: 3px;
}
.honey-name-ja {
  font-size: 11px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 10px;
}
.honey-desc {
  font-size: 11px; font-weight: 300;
  line-height: 1.9; color: var(--text-sub);
}
.honey-meta {
  display: flex; gap: 16px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.honey-meta-item { flex: 1; }
.honey-meta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 4px;
}
.honey-score { display: flex; gap: 2px; }

.card-meta {
  display: flex; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-sub);
}
.card-meta-item { display: flex; align-items: center; gap: 5px; }
.card-stars { display: flex; gap: 1px; }
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--dark-brown);
  padding: 64px 48px 32px;
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(200,152,58,0.15);
  margin-bottom: 32px;
}
.footer-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--white); margin-bottom: 4px;
}
.footer-logo-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-style: italic;
  color: var(--gold); letter-spacing: 0.1em; margin-bottom: 20px;
}
.footer-tagline {
  font-size: 12px; font-weight: 300;
  line-height: 2; color: rgba(255,255,255,0.4);
}
.footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
}
.footer-links {
  list-style: none; display: flex;
  flex-direction: column; gap: 10px;
}
.footer-links a {
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.45); text-decoration: none;
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
}
.footer-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
}
.footer-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.25); text-decoration: none;
}
.footer-brand span { color: var(--gold); }

/* フッター簡易版（一覧・詳細ページ用） */
footer.footer-slim { padding: 48px; }
footer.footer-slim .footer-bottom { max-width: 1280px; margin: 0 auto; }
.footer-logo-f {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--white);
}
.footer-logo-f span {
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 16px 24px; }
  .nav-links { display: none; }
  footer { padding: 48px 24px 24px; }
  footer.footer-slim { padding: 40px 24px; }
  .breadcrumb { padding: 16px 24px; }
}



/* ── TOP PAGE ONLY ── */

.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding-top: 80px;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 50%, rgba(200,152,58,0.08) 0%, transparent 70%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.hero-pattern {
  position: absolute; inset: 0; opacity: 0.035;
  background-image:
    repeating-linear-gradient(0deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 50%);
  background-size: 48px 48px;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.hero-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 24px; display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); }
.hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 6vw, 84px); font-weight: 300; line-height: 1.08; color: var(--dark); margin-bottom: 12px; }
.hero-title em { font-style: italic; color: var(--gold); }
.hero-subtitle { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 28px; }
.hero-desc { font-size: 14px; font-weight: 300; line-height: 2; color: var(--text-sub); margin-bottom: 48px; max-width: 440px; }
.hero-actions { display: flex; gap: 20px; align-items: center; }

.hero-visual { display: flex; flex-direction: column; gap: 16px; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-stat { background: var(--white); border: 1px solid var(--border); padding: 28px 24px; position: relative; overflow: hidden; }
.hero-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s; }
.hero-stat:hover::before { transform: scaleY(1); }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.stat-label { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); }
.stat-ja { font-size: 12px; font-weight: 300; color: var(--text-sub); margin-top: 4px; }
.hero-badge-strip { background: var(--dark); padding: 20px 28px; display: flex; justify-content: space-between; align-items: center; }
.badge-item { text-align: center; }
.badge-item-num { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--gold-light); line-height: 1; }
.badge-item-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }
.badge-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.15); }

.categories { padding: 100px 0; background: var(--white); }
.categories-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--border); }
.cat-item { padding: 40px 28px; border-right: 1px solid var(--border); text-decoration: none; position: relative; overflow: hidden; transition: background 0.3s; display: flex; flex-direction: column; gap: 20px; }
.cat-item:last-child { border-right: none; }
.cat-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform 0.35s; }
.cat-item:hover { background: var(--cream); }
.cat-item:hover::after { transform: scaleX(1); }
.cat-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 300; color: var(--gold-pale); line-height: 1; }
.cat-name-en { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); }
.cat-name-ja { font-size: 12px; font-weight: 300; color: var(--text-sub); margin-top: 4px; }
.cat-desc { font-size: 11px; line-height: 1.8; color: var(--text-sub); font-weight: 300; margin-top: auto; }
.cat-arrow { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--gold); opacity: 0; transition: opacity 0.25s, transform 0.25s; transform: translateX(-6px); }
.cat-item:hover .cat-arrow { opacity: 1; transform: translateX(0); }

.search-section { padding: 80px 0; background: var(--dark); position: relative; overflow: hidden; }
.search-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,152,58,0.08) 0%, transparent 70%); }
.search-inner { max-width: 800px; margin: 0 auto; padding: 0 48px; text-align: center; position: relative; }
.search-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.search-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--white); line-height: 1.2; margin-bottom: 12px; }
.search-title em { font-style: italic; color: var(--gold-light); }
.search-desc { font-size: 13px; font-weight: 300; line-height: 2; color: rgba(255,255,255,0.5); margin-bottom: 40px; }
.search-box { display: flex; max-width: 560px; margin: 0 auto 32px; }
.search-input { flex: 1; padding: 18px 24px; font-family: 'Noto Serif JP', serif; font-size: 14px; outline: none; background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(200,152,58,0.3); border-right: none; }
.search-input::placeholder { color: rgba(255,255,255,0.3); }
.search-btn { padding: 18px 28px; background: var(--gold); border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); transition: background 0.25s; }
.search-btn:hover { background: var(--gold-light); }
.search-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.search-tag { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.15); padding: 6px 14px; text-decoration: none; transition: all 0.25s; }
.search-tag:hover { color: var(--gold-light); border-color: rgba(200,152,58,0.5); }

.featured { padding: 100px 0; background: var(--cream); }
.featured-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.featured-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.honey-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; }

.knowledge-strip { padding: 80px 0; background: var(--cream-dark); }
.knowledge-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 48px; }
.know-item { background: var(--cream); padding: 36px 28px; text-decoration: none; transition: background 0.25s; }
.know-item:hover { background: var(--white); }
.know-num { font-family: 'Cormorant Garamond', serif; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 20px; }
.know-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); }
.know-title-ja { font-size: 13px; font-weight: 300; color: var(--text-sub); margin-bottom: 20px; margin-top: 4px; }
.know-count { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 4px; }
.know-count-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); }
.know-arrow { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold); margin-top: 20px; display: block; opacity: 0; transition: opacity 0.25s; }
.know-item:hover .know-arrow { opacity: 1; }

.about-section { padding: 100px 0; background: var(--white); }
.about-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-visual { padding: 56px 40px; background: var(--cream); border: 1px solid var(--border); text-align: center; }
.about-visual-word { font-family: 'Cormorant Garamond', serif; font-size: 72px; font-weight: 300; font-style: italic; color: var(--gold); opacity: 0.18; line-height: 1; display: block; }
.about-visual-line { width: 48px; height: 1px; background: var(--gold); margin: 28px auto; }
.about-visual-label { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown-mid); }
.about-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 3.5vw, 48px); font-weight: 300; color: var(--dark); line-height: 1.2; margin-bottom: 24px; }
.about-text h2 em { font-style: italic; color: var(--gold); }
.about-text p { font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub); margin-bottom: 20px; }
.about-links { display: flex; flex-direction: column; margin-top: 36px; border-top: 1px solid var(--border); padding-top: 4px; }
.about-link { display: flex; justify-content: space-between; align-items: center; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--border); transition: padding-left 0.25s; }
.about-link:hover { padding-left: 8px; }
.about-link-en { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); }
.about-link-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.about-link-arrow { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold); flex-shrink: 0; }

.hero-text-area > * { animation: fadeUp 0.7s ease both; }
.hero-eyebrow  { animation-delay: 0.10s; }
.hero-title    { animation-delay: 0.25s; }
.hero-subtitle { animation-delay: 0.35s; }
.hero-desc     { animation-delay: 0.45s; }
.hero-actions  { animation-delay: 0.55s; }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .honey-grid { grid-template-columns: 1fr 1fr; }
  .knowledge-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .about-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-content, .categories-inner, .featured-inner,
  .search-inner, .knowledge-inner, .about-inner { padding: 0 24px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .honey-grid { grid-template-columns: 1fr; }
  .featured-header { flex-direction: column; gap: 16px; align-items: flex-start; }
}


/* ── LIST PAGE ONLY ── */

.page-header { background: var(--white); padding: 56px 0 0; border-bottom: 1px solid var(--border); }
.page-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.page-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; color: var(--dark); margin-bottom: 8px; }
.page-title em { font-style: italic; color: var(--gold); }
.page-subtitle { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 40px; }

.filter-bar { display: flex; align-items: stretch; border-top: 1px solid var(--border); margin: 0 -48px; }
.filter-search { flex: 1; display: flex; border-right: 1px solid var(--border); }
.filter-search input { flex: 1; padding: 18px 24px; font-family: 'Noto Serif JP', serif; font-size: 13px; border: none; outline: none; background: transparent; color: var(--text-main); }
.filter-search input::placeholder { color: var(--text-sub); }
.filter-search-btn { padding: 0 24px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--text-sub); transition: color 0.2s; }
.filter-search-btn:hover { color: var(--gold); }
.filter-tabs { display: flex; list-style: none; overflow-x: auto; }
.filter-tab { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 18px 24px; cursor: pointer; color: var(--text-sub); white-space: nowrap; border-right: 1px solid var(--border); transition: all 0.25s; }
.filter-tab:hover { color: var(--gold); background: var(--cream); }
.filter-tab.active { color: var(--gold); background: var(--gold-pale); }

.count-bar { background: var(--cream); padding: 14px 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.count-text { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.12em; color: var(--text-sub); }
.count-text strong { color: var(--gold); font-weight: 600; }
.sort-select { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--border); background: var(--white); color: var(--text-sub); cursor: pointer; outline: none; }

.main-layout { max-width: 1280px; margin: 0 auto; padding: 40px 48px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }

.filter-sidebar { position: sticky; top: 96px; }
.filter-group { margin-bottom: 32px; }
.filter-group-title { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dark); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.filter-checks { display: flex; flex-direction: column; gap: 8px; }
.filter-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 300; color: var(--text-sub); transition: color 0.2s; }
.filter-check:hover { color: var(--dark); }
.filter-check input[type="checkbox"] { accent-color: var(--gold); }
.filter-check-count { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: 9px; color: var(--text-sub); background: var(--cream-dark); padding: 2px 6px; }
.filter-clear { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); background: none; border: none; cursor: pointer; margin-top: 16px; text-decoration: underline; transition: color 0.2s; }
.filter-clear:hover { color: var(--gold); }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 1024px) {
  .main-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-header-inner { padding: 0 24px; }
  .filter-bar { margin: 0 -24px; }
  .count-bar { padding: 14px 24px; }
  .main-layout { padding: 24px; }
  .card-grid { grid-template-columns: 1fr; }
}



/* ── DETAIL PAGE ONLY ── */

.detail-hero { background: var(--white); padding: 56px 0; border-bottom: 1px solid var(--border); }
.detail-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }

.detail-visual { position: sticky; top: 96px; }
.detail-img { width: 100%; aspect-ratio: 1; background: #F5E0B0; border: 1px solid var(--border); margin-bottom: 16px; position: relative; }
.detail-img-label { position: absolute; bottom: 16px; left: 18px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(92,61,26,0.5); }
.detail-color-row { display: flex; gap: 10px; align-items: center; padding: 16px 20px; border: 1px solid var(--border); background: var(--cream); }
.color-chip { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }
.color-chip-label { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

.detail-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.detail-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.detail-title-en { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; color: var(--dark); line-height: 1.05; margin-bottom: 8px; }
.detail-title-ja { font-size: 18px; font-weight: 300; color: var(--text-sub); margin-bottom: 24px; letter-spacing: 0.08em; }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-desc { font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub); border-left: 2px solid var(--gold-pale); padding-left: 20px; margin-bottom: 36px; }

.scores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 32px; }
.score-item { background: var(--cream); padding: 20px 16px; text-align: center; }
.score-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 8px; }
.score-stars { display: flex; justify-content: center; gap: 3px; }

.key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 32px; }
.fact-item { background: var(--white); padding: 18px 20px; }
.fact-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; }
.fact-value { font-size: 13px; font-weight: 400; color: var(--dark); }

.detail-cta { display: flex; gap: 12px; }

.detail-body { max-width: 1280px; margin: 0 auto; padding: 72px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }

.content-section { margin-bottom: 56px; }
.content-heading { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.content-text { font-size: 14px; font-weight: 300; line-height: 2.3; color: var(--text-sub); margin-bottom: 16px; }

.char-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.char-table tr { border-bottom: 1px solid var(--border); }
.char-table th { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); padding: 14px 0; text-align: left; width: 30%; }
.char-table td { font-size: 13px; color: var(--dark); padding: 14px 0; }

.component-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.component-chip { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; background: var(--cream); border: 1px solid var(--border); text-decoration: none; color: var(--text-sub); transition: all 0.25s; }
.component-chip:hover { background: var(--gold-pale); border-color: var(--gold-light); color: var(--brown-mid); }

.sidebar { position: sticky; top: 96px; }
.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head { background: var(--dark); padding: 16px 20px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }
.related-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding-left 0.2s; }
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; }
.related-item-en { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }

.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; border: 1px solid var(--border); }
.gift-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold-light); margin-bottom: 8px; }
.gift-card-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.gift-card-btn { display: block; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); background: var(--gold); padding: 14px 20px; transition: background 0.25s; }
.gift-card-btn:hover { background: var(--gold-light); }

.related-honeys { background: var(--cream-dark); padding: 72px 0; border-top: 1px solid var(--border); }
.related-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.honey-region { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

@media (max-width: 1024px) {
  .detail-hero-inner { grid-template-columns: 1fr; }
  .detail-visual { position: static; }
  .detail-body { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .detail-hero-inner, .detail-body, .related-inner { padding: 0 24px; }
  .related-honeys { padding: 48px 0; }
}


/* ============================================================
   filter-overlay.css
   ① filter-tab 内 <button> デザイン修正
   ② スマホ用フィルタードロワー
   style.css に追記 or <link> で後から読み込む
   ============================================================ */

/* ──────────────────────────────────────────
   ① filter-tab 内の <button> リセット & 統一
   ────────────────────────────────────────── */

/* li 側の padding を外し、クリック領域を button に移す */
.filter-tab {
  padding: 0;
  cursor: default;
}

.filter-tab button {
  display: block;
  width: 100%;
  padding: 23px 24px;

  /* ブラウザ既定をリセット */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;

  /* li と同じ文字スタイルを引き継ぐ */
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  white-space: nowrap;
  line-height: 1;

  border-right: 1px solid var(--border);
  transition: color 0.25s, background 0.25s;
}

/* li の border-right は button に移したので li から除去 */
.filter-tab { border-right: none; }

.filter-tab button:hover {
  color: var(--gold);
  background: var(--cream);
}

.filter-tab.active button {
  color: var(--gold);
  background: var(--gold-pale);
}

/* ──────────────────────────────────────────
   ② スマホ「絞り込み」トグルボタン
   1024px 以下でのみ表示
   ────────────────────────────────────────── */
.filter-toggle-btn {
  display: none;
}

@media (max-width: 1024px) {
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dark);

    background: var(--white);
    border: 1px solid var(--border);
    padding: 14px 20px;
    cursor: pointer;
    margin-bottom: 24px;

    transition: border-color 0.25s, color 0.25s;
  }

  .filter-toggle-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* ハンバーガーアイコン */
  .filter-toggle-btn .btn-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
  }

  .filter-toggle-btn .btn-icon span {
    display: block;
    height: 1px;
    background: currentColor;
  }

  .filter-toggle-btn .btn-icon span:nth-child(1) { width: 14px; }
  .filter-toggle-btn .btn-icon span:nth-child(2) { width: 10px; }
  .filter-toggle-btn .btn-icon span:nth-child(3) { width: 14px; }

  /* チェック数：0のときは非表示 */
  .filter-badge-count {
    margin-left: auto;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: var(--gold);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .filter-badge-count.has-count {
    opacity: 1;
  }
}

/* ──────────────────────────────────────────
   ③ 背景オーバーレイ
   ────────────────────────────────────────── */
.filter-overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 18, 8, 0);
  transition: background 0.35s ease;
}

.filter-overlay-backdrop.is-open {
  display: block;
  background: rgba(26, 18, 8, 0.52);
}

/* ──────────────────────────────────────────
   ④ ドロワー本体
   ────────────────────────────────────────── */
.filter-overlay-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 201;
  width: min(340px, 90vw);

  background: var(--cream);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;

  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.filter-overlay-drawer.is-open {
  transform: translateX(0);
}

/* ヘッダー */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}

.drawer-header-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.drawer-header-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark);
}

.drawer-header-ja {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
}

.drawer-close-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  background: none;
  border: 1px solid var(--border);
  cursor: pointer;

  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--text-sub);
  line-height: 1;

  transition: border-color 0.25s, color 0.25s;
}

.drawer-close-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* スクロールエリア */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px;

  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.drawer-body::-webkit-scrollbar       { width: 4px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 2px; }

/* フッター */
.drawer-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--cream);
}

.drawer-apply-btn {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--dark);
  border: none;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.25s;
}

.drawer-apply-btn:hover { background: var(--gold); }

.drawer-reset-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: none;
  border: 1px solid var(--border);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}

.drawer-reset-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ⑤ body スクロールロック */
body.drawer-open { overflow: hidden; }


/* ============================================================
   FLOWER DETAIL — page-specific CSS
   ============================================================ */

/* ─── Flower Visual ─── */
.flower-visual { position: sticky; top: 96px; }

.flower-img {
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border); margin-bottom: 16px;
  position: relative; overflow: hidden;
}

.flower-img-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 32% 28%, rgba(255,192,203,0.52) 0%, transparent 58%),
    radial-gradient(ellipse 50% 65% at 72% 68%, rgba(255,182,193,0.38) 0%, transparent 55%),
    radial-gradient(ellipse 38% 38% at 55% 18%, rgba(255,245,250,0.85) 0%, transparent 48%),
    radial-gradient(ellipse 55% 45% at 18% 78%, rgba(245,195,208,0.32) 0%, transparent 52%),
    linear-gradient(148deg, #fdf5f7 0%, #f9e6ed 45%, #fdf1f4 100%);
}

.flower-img-petal-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

.flower-img-petal-wrap svg { width: 58%; height: 58%; opacity: 0.2; }

.flower-img-label {
  position: absolute; bottom: 16px; left: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(140,75,95,0.4);
}

.flower-season-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,152,58,0.2);
  padding: 10px 16px; text-align: center;
}

.season-badge-month {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 300; color: var(--gold);
  line-height: 1; display: block;
}

.season-badge-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-top: 4px;
}

/* 花色チップ */
.flower-color-row {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border); background: var(--cream);
}

.flower-color-chip {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(200,152,58,0.2); flex-shrink: 0;
}

.flower-color-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub);
}

/* ─── Hero Section ─── */
.flower-hero {
  background: var(--white);
  padding: 56px 0; border-bottom: 1px solid var(--border);
}

.flower-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 72px; align-items: start;
}

.flower-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.flower-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.flower-title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 4px;
}

.flower-title-ja {
  font-size: 18px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 6px; letter-spacing: 0.08em;
}

.flower-sciname {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 300; font-style: italic;
  color: rgba(200,152,58,0.65); letter-spacing: 0.04em; margin-bottom: 24px;
}

.flower-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px;
}

/* 植物ページ専用タグ（botanicalグリーン） */
.tag-botanical {
  background: rgba(160,190,120,0.12);
  border-color: rgba(120,160,80,0.3);
  color: #3d5a20;
}

.flower-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2;
  color: var(--text-sub);
  border-left: 2px solid var(--gold-pale);
  padding-left: 20px; margin-bottom: 32px;
}

/* ─── 開花カレンダー ─── */
.bloom-calendar {
  margin-bottom: 28px; padding: 18px 20px;
  background: var(--cream); border: 1px solid var(--border);
}

.bloom-calendar-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 14px;
}

.bloom-months {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px;
}

.bloom-month { text-align: center; }

.bloom-bar {
  height: 6px; border-radius: 1px;
  background: var(--cream-dark); margin-bottom: 5px;
}
.bloom-bar.active { background: var(--gold-light); }
.bloom-bar.peak   { background: var(--gold); }

.bloom-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; color: var(--text-sub);
}
.bloom-month.active .bloom-num,
.bloom-month.peak   .bloom-num { color: var(--gold); font-weight: 600; }

/* ─── 指標スコア（植物版） ─── */
.flower-scores-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; border: 1px solid var(--border);
  background: var(--border); margin-bottom: 28px;
}

.flower-score-item {
  background: var(--cream); padding: 18px 14px; text-align: center;
}

.flower-score-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 8px; line-height: 1.4;
}

.flower-score-stars { display: flex; justify-content: center; gap: 3px; }

/* ─── Key Facts ─── */
.flower-key-facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; border: 1px solid var(--border);
  background: var(--border); margin-bottom: 32px;
}

.flower-fact-item { background: var(--white); padding: 16px 18px; }

.flower-fact-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 5px;
}

.flower-fact-value {
  font-size: 13px; font-weight: 400;
  color: var(--dark); line-height: 1.5;
}

.flower-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Body Layout ─── */
.flower-body {
  max-width: 1280px; margin: 0 auto; padding: 72px 48px;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 64px; align-items: start;
}

.content-section { margin-bottom: 56px; }

.content-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400; color: var(--dark);
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.content-heading em { font-style: italic; color: var(--gold); }

.content-text {
  font-size: 14px; font-weight: 300;
  line-height: 2.3; color: var(--text-sub); margin-bottom: 16px;
}

/* 特徴テーブル */
.char-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.char-table tr { border-bottom: 1px solid var(--border); }
.char-table th {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); padding: 14px 0;
  text-align: left; width: 32%; vertical-align: top;
}
.char-table td {
  font-size: 13px; color: var(--dark);
  padding: 14px 0; line-height: 1.8;
}

/* チップ群 */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; background: var(--cream);
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text-sub);
  transition: all 0.25s;
}
.chip:hover {
  background: var(--gold-pale);
  border-color: var(--gold-light); color: var(--brown-mid);
}

/* 関連蜂蜜グリッド（本文内） */
.honey-in-flower-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 20px;
}

/* 産地ストリップ */
.region-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin-top: 20px;
}

.region-strip-item {
  background: var(--white); padding: 20px 18px;
  text-decoration: none; transition: background 0.25s;
}
.region-strip-item:hover { background: var(--cream); }

.region-strip-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dark); margin-bottom: 3px;
}
.region-strip-ja {
  font-size: 12px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 8px;
}
.region-strip-desc {
  font-size: 11px; font-weight: 300;
  line-height: 1.8; color: var(--text-sub);
}

/* ─── Sidebar ─── */
.flower-sidebar { position: sticky; top: 96px; }

.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }

.sidebar-card-head {
  background: var(--dark); padding: 14px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}

.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }

.related-item {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }

.related-item-texts { flex: 1; min-width: 0; }

.related-item-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }

.related-item-arrow {
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; flex-shrink: 0;
}

/* サイドバー内蜂蜜ミニカード */
.sidebar-honey-mini {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.sidebar-honey-mini:last-child { border-bottom: none; }
.sidebar-honey-mini:hover { padding-left: 6px; }

.sidebar-honey-mini-thumb {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border);
}

.sidebar-honey-mini-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark);
}
.sidebar-honey-mini-ja {
  font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px;
}

/* ORAMELギフトカード */
.gift-card {
  background: var(--dark); padding: 28px 20px; text-align: center;
}
.gift-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; font-style: italic;
  color: var(--gold-light); margin-bottom: 8px;
}
.gift-card-desc {
  font-size: 12px; font-weight: 300; line-height: 1.9;
  color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.gift-card-btn {
  display: block; text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); background: var(--gold); padding: 14px 20px;
  transition: background 0.25s;
}
.gift-card-btn:hover { background: var(--gold-light); }

/* ─── Related Flowers ─── */
.related-flowers {
  background: var(--cream-dark); padding: 72px 0;
  border-top: 1px solid var(--border);
}
.related-flowers-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.related-flowers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.flower-card {
  background: var(--white); text-decoration: none; display: block;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.flower-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.1);
}

.flower-card-img {
  width: 100%; aspect-ratio: 4/3;
  position: relative; overflow: hidden;
}
.flower-card-img-fill { position: absolute; inset: 0; }

.flower-card-body { padding: 18px 16px; }

.flower-card-season {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 6px;
}

.flower-card-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300;
  color: var(--dark); line-height: 1.1; margin-bottom: 3px;
}
.flower-card-name-ja {
  font-size: 11px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 8px;
}
.flower-card-sciname {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 300; font-style: italic;
  color: rgba(200,152,58,0.55);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .flower-hero-inner { grid-template-columns: 1fr; }
  .flower-visual { position: static; }
  .flower-body { grid-template-columns: 1fr; }
  .flower-sidebar { position: static; }
  .related-flowers-grid { grid-template-columns: repeat(2, 1fr); }
  .region-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .flower-hero { padding: 40px 0; }
  .flower-hero-inner,
  .flower-body,
  .related-flowers-inner { padding: 0 24px; }
  .flower-body { padding: 48px 24px; gap: 40px; }
  .related-flowers { padding: 48px 0; }
  .related-flowers-grid { grid-template-columns: 1fr 1fr; }
  .flower-key-facts { grid-template-columns: 1fr; }
  .region-strip { grid-template-columns: 1fr; }
  .honey-in-flower-grid { grid-template-columns: 1fr; }
  .flower-cta { flex-direction: column; }
  .flower-cta a { text-align: center; display: block; }
}

@media (max-width: 480px) {
  .related-flowers-grid { grid-template-columns: 1fr; }
  .flower-title-en { font-size: 36px; }
}


.flower-hero { background: var(--white); padding: 56px 0; border-bottom: 1px solid var(--border); }
.flower-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }

.flower-visual { position: sticky; top: 96px; }
.flower-img { width: 100%; aspect-ratio: 1; border: 1px solid var(--border); margin-bottom: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, #f9e0e8 0%, #f7d8e2 100%); }
.flower-img-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.44), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
}
.flower-img-petal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .38; }
.flower-img-petal-wrap svg { width: 48%; height: 48%; }
.flower-img-label {
  position: absolute; bottom: 16px; left: 18px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(92,61,26,0.46);
}
.flower-season-badge {
  position: absolute; right: 14px; top: 14px; width: 58px; height: 58px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(200,152,58,0.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.season-badge-month { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--gold); line-height: 1; }
.season-badge-label { font-family: 'Montserrat', sans-serif; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-top: 3px; }

.flower-color-row { display: flex; gap: 8px; align-items: center; padding: 16px 20px; border: 1px solid var(--border); background: var(--cream); }
.flower-color-chip { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; background: #f9cede; }
.flower-color-label { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

.flower-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.flower-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.flower-title-en { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; color: var(--dark); line-height: 1.02; margin-bottom: 8px; }
.flower-title-ja { font-size: 18px; font-weight: 300; color: var(--text-sub); margin-bottom: 8px; letter-spacing: 0.08em; }
.flower-sciname { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: rgba(92,61,26,0.55); margin-bottom: 20px; }
.flower-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.tag-botanical { background: rgba(196, 184, 135, 0.10); color: var(--brown-mid); border-color: rgba(196, 184, 135, 0.22); }
.flower-desc { font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub); border-left: 2px solid var(--gold-pale); padding-left: 20px; margin-bottom: 24px; }

.bloom-calendar { border: 1px solid var(--border); background: var(--cream); padding: 14px 18px 16px; margin-bottom: 18px; }
.bloom-calendar-title { font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 10px; }
.bloom-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; }
.bloom-month { text-align: center; }
.bloom-bar { height: 4px; background: rgba(0,0,0,0.08); border-radius: 999px; margin-bottom: 8px; }
.bloom-month.active .bloom-bar { background: rgba(200,152,58,0.5); }
.bloom-month.peak .bloom-bar { background: var(--gold); }
.bloom-num { font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--text-sub); }

.flower-scores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 22px; }
.flower-score-item { background: var(--white); padding: 18px 14px; text-align: center; }
.flower-score-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 8px; }
.flower-score-stars { display: flex; justify-content: center; gap: 3px; }
.star { color: var(--gold); }
.star-empty { color: rgba(0,0,0,0.18); }

.flower-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 24px; }
.flower-fact-item { background: var(--white); padding: 18px 20px; }
.flower-fact-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; }
.flower-fact-value { font-size: 13px; font-weight: 400; color: var(--dark); line-height: 1.8; }

.flower-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.flower-body { max-width: 1280px; margin: 0 auto; padding: 72px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.flower-sidebar { position: sticky; top: 96px; }

.content-section { margin-bottom: 56px; }
.content-heading { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.content-heading em { color: var(--gold); font-style: italic; }
.content-text { font-size: 14px; font-weight: 300; line-height: 2.3; color: var(--text-sub); margin-bottom: 16px; }

.char-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.char-table tr { border-bottom: 1px solid var(--border); }
.char-table th { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); padding: 14px 0; text-align: left; width: 26%; vertical-align: top; }
.char-table td { font-size: 13px; color: var(--dark); padding: 14px 0; line-height: 2; }

.chip-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 8px 14px; background: var(--cream);
  border: 1px solid var(--border); text-decoration: none; color: var(--text-sub);
}

.honey-in-flower-grid { display: grid; grid-template-columns: minmax(220px, 380px); gap: 16px; }
.region-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.region-strip-item { display: block; text-decoration: none; padding: 18px 18px 20px; border: 1px solid var(--border); background: var(--white); transition: transform .2s ease, border-color .2s ease; }
.region-strip-item:hover { transform: translateY(-2px); border-color: rgba(200,152,58,0.32); }
.region-strip-en { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); margin-bottom: 4px; }
.region-strip-ja { font-size: 13px; color: var(--dark); margin-bottom: 8px; }
.region-strip-desc { font-size: 12px; line-height: 1.9; color: var(--text-sub); }

.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head { background: var(--dark); padding: 16px 20px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }

.sidebar-honey-mini { display: flex; gap: 12px; align-items: center; padding: 14px 0; text-decoration: none; }
.sidebar-honey-mini-thumb { width: 42px; height: 42px; border: 1px solid var(--border); flex-shrink: 0; }
.sidebar-honey-mini-en { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark); }
.sidebar-honey-mini-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }

.related-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding-left 0.2s; }
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; }
.related-item-en { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }

.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; border: 1px solid var(--border); }
.gift-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold-light); margin-bottom: 8px; }
.gift-card-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.gift-card-btn { display: block; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); background: var(--gold); padding: 14px 20px; transition: background 0.25s; }
.gift-card-btn:hover { background: var(--gold-light); }

.related-flowers { background: #f3ecdb; padding: 72px 0; border-top: 1px solid var(--border); }
.related-flowers-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.section-sub { font-family: 'Montserrat', sans-serif; font-size: 11px; color: var(--text-sub); letter-spacing: 0.14em; text-transform: uppercase; }
.related-flowers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.flower-card { display: block; text-decoration: none; border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.55); }
.flower-card-img { aspect-ratio: 1.2; position: relative; overflow: hidden; background: #f8f2f4; }
.flower-card-img-fill { position: absolute; inset: 0; }
.flower-card-body { padding: 16px; background: var(--white); }
.flower-card-season { font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 8px; }
.flower-card-name-en { font-family: 'Cormorant Garamond', serif; font-size: 28px; line-height: 1.08; color: var(--dark); }
.flower-card-name-ja { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.flower-card-sciname { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: rgba(92,61,26,0.58); margin-top: 6px; }

@media (max-width: 1024px) {
  .flower-hero-inner { grid-template-columns: 1fr; }
  .flower-visual, .flower-sidebar { position: static; }
  .flower-body { grid-template-columns: 1fr; }
  .related-flowers-grid { grid-template-columns: repeat(2, 1fr); }
  .region-strip { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .flower-hero-inner, .flower-body, .related-flowers-inner { padding: 0 24px; }
  .flower-scores-grid, .flower-key-facts { grid-template-columns: 1fr 1fr; }
  .bloom-months { gap: 4px; }
}
@media (max-width: 560px) {
  .flower-scores-grid, .flower-key-facts, .related-flowers-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   FLOWERS LIST — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.flowers-hero {
  background: var(--white);
  padding: 72px 0 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.flowers-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at center, rgba(200,152,58,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
}

.flowers-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  position: relative;
  z-index: 1;
}

.flowers-hero-text { padding-bottom: 56px; }

.flowers-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.flowers-hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.flowers-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.05;
  margin-bottom: 10px;
}
.flowers-hero-title em {
  font-style: italic;
  color: var(--gold);
}

.flowers-hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 28px;
}

.flowers-hero-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 2.2;
  color: var(--text-sub);
  max-width: 460px;
  margin-bottom: 40px;
}

.flowers-hero-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  width: fit-content;
}

.flowers-hero-stat {
  padding: 16px 28px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.flowers-hero-stat:last-child { border-right: none; }

.hero-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  display: block;
}

.hero-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: block;
  margin-top: 4px;
}

.flowers-hero-visual {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.hero-flower-tile {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: default;
}

.hero-flower-tile-bg { position: absolute; inset: 0; }

.hero-flower-tile-petal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.18;
}

.hero-flower-tile-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(26,18,8,0.45) 0%, transparent 100%);
}

.hero-tile-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  display: block;
}

.hero-tile-ja {
  font-size: 10px;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  display: block;
  margin-top: 1px;
}

.flowers-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 61px;
  z-index: 50;
}

.flowers-filter-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.flowers-search {
  flex: 1;
  display: flex;
  border-right: 1px solid var(--border);
}

.flowers-search input {
  flex: 1;
  padding: 16px 20px;
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
}
.flowers-search input::placeholder { color: var(--text-sub); }

.flowers-search-btn {
  padding: 0 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-sub);
  transition: color 0.2s;
}
.flowers-search-btn:hover { color: var(--gold); }

.flowers-filter-tabs {
  display: flex;
  list-style: none;
  overflow-x: auto;
}

.flowers-filter-tab {
  padding: 0;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.flowers-filter-tab:last-child { border-right: none; }

.flowers-filter-tab button {
  display: block;
  padding: 16px 20px;
  appearance: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}

.flowers-filter-tab button:hover { color: var(--gold); background: var(--cream); }
.flowers-filter-tab.active button { color: var(--gold); background: var(--gold-pale); }

.flowers-count-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.flowers-count-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-sub);
}
.flowers-count-text strong { color: var(--gold); font-weight: 600; }

.season-legend {
  display: flex;
  gap: 16px;
  align-items: center;
}

.season-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.season-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.flowers-main-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 80px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}

.flowers-sidebar {
  position: sticky;
  top: 130px;
}

.filter-group { margin-bottom: 28px; }

.filter-group-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.filter-checks { display: flex; flex-direction: column; gap: 8px; }

.filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 300;
  color: var(--text-sub);
  transition: color 0.2s;
}
.filter-check:hover { color: var(--dark); }
.filter-check input[type="checkbox"] { accent-color: var(--gold); }

.filter-check-count {
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  color: var(--text-sub);
  background: var(--cream-dark);
  padding: 2px 6px;
}

.season-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-clear {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: underline;
  transition: color 0.2s;
}
.filter-clear:hover { color: var(--gold); }

.flowers-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.flower-list-card {
  background: var(--white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.flower-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.1);
}

.flower-card-visual {
  width: 100%;
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.flower-card-visual-bg { position: absolute; inset: 0; }

.flower-card-visual-petal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
}

.flower-card-visual-petal svg { width: 52%; height: 52%; }

.flower-card-season-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(200,152,58,0.2);
  padding: 6px 10px;
  text-align: center;
}

.season-badge-s {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  display: block;
}

.season-badge-label-s {
  font-family: 'Montserrat', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: block;
  margin-top: 2px;
}

.flower-card-rare-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--white);
  padding: 4px 8px;
}

.flower-card-body {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flower-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tag-botanical {
  background: rgba(140,170,100,0.12);
  border-color: rgba(100,140,70,0.28);
  color: #3d5a20;
}

.flower-card-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--dark);
  line-height: 1.1;
  margin-bottom: 2px;
}

.flower-card-name-ja {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-sub);
  margin-bottom: 4px;
}

.flower-card-sciname {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(200,152,58,0.55);
  margin-bottom: 12px;
}

.flower-card-desc {
  font-size: 11px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text-sub);
  flex: 1;
  margin-bottom: 14px;
}

.flower-card-bloom {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.bloom-pip {
  flex: 1;
  height: 3px;
  background: var(--cream-dark);
  border-radius: 1px;
}
.bloom-pip.on  { background: var(--gold-light); }
.bloom-pip.peak { background: var(--gold); }

.flower-card-meta {
  display: flex;
  gap: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
}

.flower-card-meta-left {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sub);
}

.flower-card-meta-left strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 300;
  color: var(--gold);
  font-style: normal;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
  letter-spacing: 0;
}

.flower-card-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.25s;
}

.flower-list-card:hover .flower-card-cta { color: var(--gold); }

.flower-card-cta::after {
  content: '→';
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
}

.flowers-empty {
  grid-column: 1 / -1;
  padding: 60px 24px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--white);
}

.flowers-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 10px;
}

.flowers-empty-text {
  font-size: 13px;
  line-height: 2;
  color: var(--text-sub);
}

.flowers-about {
  background: var(--dark);
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}

.flowers-about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200,152,58,0.07) 0%, transparent 70%);
}

.flowers-about-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
}

.flowers-about-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 4px;
}
.flowers-about-title em { font-style: italic; color: var(--gold-light); }

.flowers-about-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 28px;
}

.flowers-about-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 2.3;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}

.flowers-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(200,152,58,0.15);
  border: 1px solid rgba(200,152,58,0.15);
}

.flowers-about-item {
  background: rgba(255,255,255,0.03);
  padding: 24px 22px;
  transition: background 0.25s;
}
.flowers-about-item:hover { background: rgba(200,152,58,0.06); }

.flowers-about-item-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}

.flowers-about-item-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.flowers-about-item-ja {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .flowers-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .flowers-hero-inner { grid-template-columns: 1fr; }
  .flowers-hero-visual { display: none; }
  .flowers-main-layout { grid-template-columns: 1fr; }
  .flowers-sidebar { display: none; }
  .flowers-about-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .flowers-hero { padding: 48px 0 0; }
  .flowers-hero-inner,
  .flowers-main-layout,
  .flowers-about-inner { padding: 0 24px; }
  .flowers-hero-text { padding-bottom: 40px; }
  .flowers-filter-inner { padding: 0 24px; }
  .flowers-count-bar-inner { padding: 12px 24px; }
  .flowers-card-grid { grid-template-columns: 1fr; }
  .flowers-about { padding: 48px 0; }
  .flowers-hero-stats { flex-wrap: wrap; }
  .season-legend { display: none; }
  .flowers-about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .flowers-filter-tabs { display: none; }
}



/* ── DETAIL PAGE ONLY ── */

.detail-hero { background: var(--white); padding: 56px 0; border-bottom: 1px solid var(--border); }
.detail-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }

.detail-visual { position: sticky; top: 96px; }
.detail-img { width: 100%; aspect-ratio: 1; background: #F5E0B0; border: 1px solid var(--border); margin-bottom: 16px; position: relative; overflow: hidden; }
.detail-img-label { position: absolute; bottom: 16px; left: 18px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(92,61,26,0.5); z-index: 2; }
.detail-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.60), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.02)),
    var(--honey-color, #F5E0B0);
}
.detail-color-row { display: flex; gap: 10px; align-items: center; padding: 16px 20px; border: 1px solid var(--border); background: var(--cream); }
.color-chip { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }
.color-chip-label { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

.detail-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.detail-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.detail-title-en { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; color: var(--dark); line-height: 1.05; margin-bottom: 8px; }
.detail-title-ja { font-size: 18px; font-weight: 300; color: var(--text-sub); margin-bottom: 24px; letter-spacing: 0.08em; }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }
.detail-desc { font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub); border-left: 2px solid var(--gold-pale); padding-left: 20px; margin-bottom: 36px; }

.scores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 32px; }
.score-item { background: var(--cream); padding: 20px 16px; text-align: center; }
.score-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 8px; }
.score-stars { display: flex; justify-content: center; gap: 3px; }
.star { color: var(--gold); }
.star-empty { color: rgba(0,0,0,0.18); }

.key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--border); background: var(--border); margin-bottom: 32px; }
.fact-item { background: var(--white); padding: 18px 20px; }
.fact-label { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; }
.fact-value { font-size: 13px; font-weight: 400; color: var(--dark); }

.detail-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.detail-body { max-width: 1280px; margin: 0 auto; padding: 72px 48px; display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }

.content-section { margin-bottom: 56px; }
.content-heading { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--dark); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.content-text { font-size: 14px; font-weight: 300; line-height: 2.3; color: var(--text-sub); margin-bottom: 16px; }

.char-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.char-table tr { border-bottom: 1px solid var(--border); }
.char-table th { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-sub); padding: 14px 0; text-align: left; width: 30%; vertical-align: top; }
.char-table td { font-size: 13px; color: var(--dark); padding: 14px 0; line-height: 2; }

.component-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.component-chip { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; background: var(--cream); border: 1px solid var(--border); text-decoration: none; color: var(--text-sub); transition: all 0.25s; }
.component-chip:hover { background: var(--gold-pale); border-color: var(--gold-light); color: var(--brown-mid); }

.sidebar { position: sticky; top: 96px; }
.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head { background: var(--dark); padding: 16px 20px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }
.related-item { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); text-decoration: none; transition: padding-left 0.2s; }
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; }
.related-item-en { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }

.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; border: 1px solid var(--border); }
.gift-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold-light); margin-bottom: 8px; }
.gift-card-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.gift-card-btn { display: block; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); background: var(--gold); padding: 14px 20px; transition: background 0.25s; }
.gift-card-btn:hover { background: var(--gold-light); }

.related-honeys { background: var(--cream-dark); padding: 72px 0; border-top: 1px solid var(--border); }
.related-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.honey-region { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

@media (max-width: 1024px) {
  .detail-hero-inner { grid-template-columns: 1fr; }
  .detail-visual { position: static; }
  .detail-body { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .detail-hero-inner, .detail-body, .related-inner { padding: 0 24px; }
  .related-honeys { padding: 48px 0; }
}



/* ============================================================
   REGION DETAIL — page-specific
   ============================================================ */

/* ── Hero ── */
.region-hero {
  background: var(--white);
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.region-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 72px; align-items: start;
}

/* 左：地域ビジュアル（sticky） */
.region-visual { position: sticky; top: 96px; }

.region-img {
  width: 100%; aspect-ratio: 4/3;
  border: 1px solid var(--border); margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.region-img-bg { position: absolute; inset: 0; }

/* 地図的な格子オーバーレイ */
.region-img-grid {
  position: absolute; inset: 0; opacity: 0.06;
  background-image:
    repeating-linear-gradient(0deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 40px),
    repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 40px);
}

.region-img-label {
  position: absolute; bottom: 16px; left: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(92,61,26,0.45);
}

/* 気候バッジ（右上） */
.region-climate-badge {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,152,58,0.2);
  padding: 10px 14px; text-align: center;
}
.rcb-temp {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--gold);
  line-height: 1; display: block;
}
.rcb-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-top: 3px;
}

/* 国・地域タイプ帯 */
.region-meta-strip {
  display: flex; gap: 0;
  border: 1px solid var(--border); margin-bottom: 16px;
}
.region-meta-strip-item {
  flex: 1; padding: 12px 16px;
  border-right: 1px solid var(--border);
}
.region-meta-strip-item:last-child { border-right: none; }
.rmsi-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-bottom: 4px;
}
.rmsi-value {
  font-size: 12px; font-weight: 400; color: var(--dark);
}

/* ── Hero右：情報 ── */
.region-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.region-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.region-title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 4px;
}
.region-title-ja {
  font-size: 18px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 24px; letter-spacing: 0.08em;
}

.region-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px;
}

.region-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2;
  color: var(--text-sub);
  border-left: 2px solid var(--gold-pale);
  padding-left: 20px; margin-bottom: 32px;
}

/* ── データサマリーグリッド ── */
.region-data-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; border: 1px solid var(--border);
  background: var(--border); margin-bottom: 32px;
}
.region-data-item { background: var(--white); padding: 16px 18px; }
.region-data-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 5px;
}
.region-data-value {
  font-size: 13px; font-weight: 400; color: var(--dark); line-height: 1.5;
}

/* ── 蜂蜜傾向スコア ── */
.region-honey-profile {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; border: 1px solid var(--border);
  background: var(--border); margin-bottom: 32px;
}
.rhp-item {
  background: var(--cream); padding: 16px 14px; text-align: center;
}
.rhp-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 8px; line-height: 1.4;
}
.rhp-stars { display: flex; justify-content: center; gap: 3px; }

.region-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Body ── */
.region-body {
  max-width: 1280px; margin: 0 auto; padding: 72px 48px;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 64px; align-items: start;
}

.content-section { margin-bottom: 56px; }
.content-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 400; color: var(--dark);
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.content-heading em { font-style: italic; color: var(--gold); }
.content-text {
  font-size: 14px; font-weight: 300;
  line-height: 2.3; color: var(--text-sub); margin-bottom: 16px;
}

/* 蜂蜜傾向テーブル */
.char-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.char-table tr { border-bottom: 1px solid var(--border); }
.char-table th {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); padding: 14px 0;
  text-align: left; width: 30%; vertical-align: top;
}
.char-table td {
  font-size: 13px; color: var(--dark); padding: 14px 0; line-height: 1.8;
}

/* チップ群 */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; background: var(--cream);
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text-sub); transition: all 0.25s;
}
.chip:hover { background: var(--gold-pale); border-color: var(--gold-light); color: var(--brown-mid); }

/* 産地内蜂蜜カードグリッド */
.honeys-in-region-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 20px;
}

/* 蜜源植物カード（横型） */
.flower-row-item {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--border);
  text-decoration: none; background: var(--white);
  transition: background 0.25s, padding-left 0.2s;
}
.flower-row-item:hover { background: var(--cream); padding-left: 20px; }
.flower-row-thumb {
  width: 48px; height: 48px; flex-shrink: 0;
  border: 1px solid var(--border); position: relative; overflow: hidden;
}
.flower-row-thumb-bg { position: absolute; inset: 0; }
.flower-row-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark);
}
.flower-row-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 1px; }
.flower-row-sci {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 300; font-style: italic;
  color: rgba(200,152,58,0.55); margin-top: 1px;
}
.flower-row-arrow {
  margin-left: auto; color: var(--gold);
  font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0;
}

/* ── Sidebar ── */
.region-sidebar { position: sticky; top: 96px; }
.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head {
  background: var(--dark); padding: 14px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }
.related-item {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; min-width: 0; }
.related-item-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow {
  color: var(--gold); font-family: 'Cormorant Garamond', serif;
  font-size: 16px; flex-shrink: 0;
}

/* サイドバー蜂蜜ミニカード */
.sidebar-honey-mini {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.sidebar-honey-mini:last-child { border-bottom: none; }
.sidebar-honey-mini:hover { padding-left: 6px; }
.sidebar-honey-mini-thumb {
  width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border);
}
.sidebar-honey-mini-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark);
}
.sidebar-honey-mini-ja {
  font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px;
}

/* ORAMELギフト */
.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; }
.gift-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; font-style: italic;
  color: var(--gold-light); margin-bottom: 8px;
}
.gift-card-desc {
  font-size: 12px; font-weight: 300; line-height: 1.9;
  color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.gift-card-btn {
  display: block; text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); background: var(--gold); padding: 14px 20px;
  transition: background 0.25s;
}
.gift-card-btn:hover { background: var(--gold-light); }

/* ── Related Regions ── */
.related-regions {
  background: var(--cream-dark); padding: 72px 0;
  border-top: 1px solid var(--border);
}
.related-regions-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
}
.related-regions-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}

/* Related Region card（コンパクト） */
.region-compact-card {
  background: var(--white); text-decoration: none;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.region-compact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.1);
}
.region-compact-visual {
  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden;
}
.region-compact-visual-bg { position: absolute; inset: 0; }
.region-compact-body { padding: 16px 16px 14px; }
.region-compact-country {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 4px;
}
.region-compact-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: var(--dark);
  line-height: 1.1; margin-bottom: 2px;
}
.region-compact-ja {
  font-size: 11px; font-weight: 300; color: var(--text-sub);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .region-hero-inner { grid-template-columns: 1fr; }
  .region-visual { position: static; }
  .region-body { grid-template-columns: 1fr; }
  .region-sidebar { position: static; }
  .related-regions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .region-hero { padding: 40px 0; }
  .region-hero-inner, .region-body,
  .related-regions-inner { padding: 0 24px; }
  .region-body { padding: 48px 24px; gap: 40px; }
  .related-regions { padding: 48px 0; }
  .related-regions-grid { grid-template-columns: 1fr 1fr; }
  .region-data-grid { grid-template-columns: 1fr; }
  .honeys-in-region-grid { grid-template-columns: 1fr; }
  .region-cta { flex-direction: column; }
  .region-cta a { text-align: center; display: block; }
}
@media (max-width: 480px) {
  .related-regions-grid { grid-template-columns: 1fr; }
  .region-title-en { font-size: 36px; }
}


/* ============================================================
   REGIONS LIST — page-specific
   ============================================================ */

/* ── Hero ── */
.regions-hero {
  background: var(--white);
  padding: 72px 0 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

/* 地図的なドットグリッド背景 */
.regions-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1px at center, rgba(200,152,58,0.15) 1px, transparent 1px);
  background-size: 32px 32px;
}

.regions-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: end;
  position: relative; z-index: 1;
}

.regions-hero-text { padding-bottom: 56px; }

.regions-hero-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.regions-hero-eyebrow::before {
  content: ''; width: 28px; height: 1px; background: var(--gold);
}

.regions-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300; color: var(--dark);
  line-height: 1.05; margin-bottom: 10px;
}
.regions-hero-title em { font-style: italic; color: var(--gold); }

.regions-hero-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 28px;
}

.regions-hero-desc {
  font-size: 14px; font-weight: 300;
  line-height: 2.2; color: var(--text-sub);
  max-width: 460px; margin-bottom: 40px;
}

.regions-hero-stats {
  display: flex; gap: 0;
  border: 1px solid var(--border); width: fit-content;
}
.regions-hero-stat {
  padding: 16px 28px;
  border-right: 1px solid var(--border); text-align: center;
}
.regions-hero-stat:last-child { border-right: none; }
.rh-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 300; color: var(--gold);
  line-height: 1; display: block;
}
.rh-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-top: 4px;
}

/* Hero右：エリアタイルグリッド */
.regions-hero-visual {
  align-self: end;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.hero-region-tile {
  aspect-ratio: 1;
  position: relative; overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hero-region-tile-bg { position: absolute; inset: 0; }
.hero-region-tile-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(26,18,8,0.5) 0%, transparent 100%);
}
.hrt-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.92); display: block;
}
.hrt-ja {
  font-size: 10px; font-weight: 300;
  color: rgba(255,255,255,0.62); display: block; margin-top: 1px;
}
.hrt-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(200,152,58,0.85); color: var(--white);
  padding: 3px 7px;
}

/* ── Filter Bar ── */
.regions-filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 61px; z-index: 50;
}
.regions-filter-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: stretch;
}
.regions-search {
  flex: 1; display: flex;
  border-right: 1px solid var(--border);
}
.regions-search input {
  flex: 1; padding: 16px 20px;
  font-family: 'Noto Serif JP', serif; font-size: 13px;
  border: none; outline: none; background: transparent; color: var(--text-main);
}
.regions-search input::placeholder { color: var(--text-sub); }
.regions-search-btn {
  padding: 0 20px; background: none; border: none;
  cursor: pointer; font-size: 13px; color: var(--text-sub); transition: color 0.2s;
}
.regions-search-btn:hover { color: var(--gold); }
.regions-filter-tabs {
  display: flex; list-style: none; overflow-x: auto;
}
.regions-filter-tab {
  border-right: 1px solid var(--border); flex-shrink: 0;
}
.regions-filter-tab:last-child { border-right: none; }
.regions-filter-tab button {
  display: block; padding: 16px 20px;
  appearance: none; background: none; border: none; outline: none;
  cursor: pointer; font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.regions-filter-tab button:hover { color: var(--gold); background: var(--cream); }
.regions-filter-tab.active button { color: var(--gold); background: var(--gold-pale); }

/* Count bar */
.regions-count-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.regions-count-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; color: var(--text-sub);
}
.regions-count-text strong { color: var(--gold); font-weight: 600; }

.region-type-legend {
  display: flex; gap: 16px; align-items: center;
}
.rtl-item {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.rtl-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Main Layout ── */
.regions-main-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 48px 80px;
  display: grid; grid-template-columns: 200px 1fr;
  gap: 48px; align-items: start;
}

/* ── Sidebar ── */
.regions-sidebar { position: sticky; top: 130px; }
.filter-group { margin-bottom: 28px; }
.filter-group-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dark); padding-bottom: 10px;
  margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.filter-checks { display: flex; flex-direction: column; gap: 8px; }
.filter-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 12px; font-weight: 300;
  color: var(--text-sub); transition: color 0.2s;
}
.filter-check:hover { color: var(--dark); }
.filter-check input[type="checkbox"] { accent-color: var(--gold); }
.filter-check-count {
  margin-left: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; color: var(--text-sub);
  background: var(--cream-dark); padding: 2px 6px;
}
.filter-clear {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); background: none; border: none;
  cursor: pointer; margin-top: 12px;
  text-decoration: underline; transition: color 0.2s;
}
.filter-clear:hover { color: var(--gold); }

/* ── Card Grid ── */
.regions-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* ── Region Card ── */
.region-list-card {
  background: var(--white);
  text-decoration: none; display: flex;
  flex-direction: column;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.region-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.1);
}

/* カード上部：地域イメージ（抽象ビジュアル） */
.region-card-visual {
  width: 100%; aspect-ratio: 16/9;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.region-card-visual-bg { position: absolute; inset: 0; }

/* 右上：地域タイプバッジ */
.region-card-type-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(200,152,58,0.25);
  color: var(--brown-mid);
}

/* 左上：注目バッジ */
.region-card-featured {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--gold); color: var(--white); padding: 4px 8px;
}

/* カード：テキスト */
.region-card-body {
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; flex: 1;
}

.region-card-country {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 6px;
}
.region-card-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 2px;
}
.region-card-name-ja {
  font-size: 12px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 12px;
}

/* 特徴タグ群 */
.region-card-tags {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px;
}

.region-card-desc {
  font-size: 11px; font-weight: 300;
  line-height: 1.9; color: var(--text-sub);
  flex: 1; margin-bottom: 14px;
}

/* 小要約ライン（気候・花・蜂蜜） */
.region-card-summary {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px;
  background: var(--cream); border: 1px solid var(--border);
  margin-bottom: 12px;
}
.region-card-summary-row {
  display: flex; gap: 8px; align-items: baseline;
}
.rcs-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); width: 52px; flex-shrink: 0;
}
.rcs-value {
  font-size: 11px; font-weight: 300; color: var(--text-sub);
}

/* カード下部 */
.region-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.region-card-meta-honey {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.region-card-meta-honey strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 300; color: var(--gold);
  font-style: normal; display: block;
  line-height: 1; margin-bottom: 2px; letter-spacing: 0;
}
.region-card-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 5px;
  transition: color 0.25s;
}
.region-list-card:hover .region-card-cta { color: var(--gold); }
.region-card-cta::after {
  content: '→'; font-family: 'Cormorant Garamond', serif; font-size: 16px;
}

/* ── About Section ── */
.regions-about {
  background: var(--dark); padding: 72px 0;
  position: relative; overflow: hidden;
}
.regions-about::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200,152,58,0.07) 0%, transparent 70%);
}
.regions-about-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; position: relative;
}
.regions-about-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px); font-weight: 300;
  color: var(--white); line-height: 1.3; margin-bottom: 4px;
}
.regions-about-title em { font-style: italic; color: var(--gold-light); }
.regions-about-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 28px;
}
.regions-about-text {
  font-size: 13px; font-weight: 300;
  line-height: 2.3; color: rgba(255,255,255,0.5); margin-bottom: 16px;
}
.regions-about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: rgba(200,152,58,0.15);
  border: 1px solid rgba(200,152,58,0.15);
}
.regions-about-item {
  background: rgba(255,255,255,0.03);
  padding: 24px 22px; transition: background 0.25s;
}
.regions-about-item:hover { background: rgba(200,152,58,0.06); }
.regions-about-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 300; color: var(--gold);
  line-height: 1; margin-bottom: 4px;
}
.regions-about-en {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.regions-about-ja {
  font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.3); margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .regions-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .regions-hero-inner { grid-template-columns: 1fr; }
  .regions-hero-visual { display: none; }
  .regions-main-layout { grid-template-columns: 1fr; }
  .regions-sidebar { display: none; }
  .regions-about-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .regions-hero { padding: 48px 0 0; }
  .regions-hero-inner, .regions-main-layout,
  .regions-about-inner { padding: 0 24px; }
  .regions-hero-text { padding-bottom: 40px; }
  .regions-filter-inner { padding: 0 24px; }
  .regions-count-inner { padding: 12px 24px; }
  .regions-card-grid { grid-template-columns: 1fr; }
  .regions-about { padding: 48px 0; }
  .regions-about-grid { grid-template-columns: 1fr; }
  .region-type-legend { display: none; }
}



/* ============================================================
   COMPONENTS LIST — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.comp-hero {
  background: var(--white);
  padding: 72px 0 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
}
/* ラボ感のある細かい方眼グリッド背景 */
.comp-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,152,58,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,152,58,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.comp-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 72% 55%, rgba(250,246,238,0.88) 0%, transparent 65%);
  pointer-events: none;
}

.comp-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: end; position: relative; z-index: 1;
}
.comp-hero-text { padding-bottom: 56px; }

.comp-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.comp-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

.comp-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 10px;
}
.comp-hero-title em { font-style: italic; color: var(--gold); }
.comp-hero-subtitle {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 28px;
}
.comp-hero-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2;
  color: var(--text-sub); max-width: 480px; margin-bottom: 40px;
}

.comp-hero-stats { display: flex; border: 1px solid var(--border); width: fit-content; }
.comp-stat { padding: 16px 28px; border-right: 1px solid var(--border); text-align: center; }
.comp-stat:last-child { border-right: none; }
.comp-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 300; color: var(--gold); line-height: 1; display: block;
}
.comp-stat-label {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-top: 4px;
}

/* Hero右：成分分子構造イメージ（抽象ビジュアル） */
.comp-hero-visual {
  align-self: end; padding-bottom: 0;
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); background: var(--white); overflow: hidden;
}
/* カテゴリ別バンド */
.comp-cat-band {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--border); text-decoration: none;
  transition: background 0.2s;
}
.comp-cat-band:last-child { border-bottom: none; }
.comp-cat-band:hover { background: var(--cream); }
.comp-cat-bar { width: 4px; align-self: stretch; flex-shrink: 0; }
.comp-cat-body {
  flex: 1; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.comp-cat-label-wrap {}
.comp-cat-en {
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark);
}
.comp-cat-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 1px; }
.comp-cat-desc { font-size: 11px; font-weight: 300; color: var(--text-sub); flex: 1; padding: 0 16px; display: none; }
.comp-cat-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--gold); flex-shrink: 0;
}

/* ─── Category Nav ─── */
.comp-cat-nav {
  background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 61px; z-index: 50;
}
.comp-cat-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: stretch;
}
.comp-search { flex: 0 0 280px; display: flex; border-right: 1px solid var(--border); }
.comp-search input {
  flex: 1; padding: 16px 20px;
  font-family: 'Noto Serif JP', serif; font-size: 13px;
  border: none; outline: none; background: transparent; color: var(--text-main);
}
.comp-search input::placeholder { color: var(--text-sub); }
.comp-search-btn {
  padding: 0 18px; background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--text-sub); transition: color 0.2s;
}
.comp-search-btn:hover { color: var(--gold); }

.comp-tabs { display: flex; list-style: none; overflow-x: auto; flex: 1; }
.comp-tab { border-right: 1px solid var(--border); flex-shrink: 0; }
.comp-tab:last-child { border-right: none; }
.comp-tab button {
  display: block; padding: 0 20px; height: 100%;
  appearance: none; background: none; border: none; outline: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.comp-tab button:hover { color: var(--gold); background: var(--cream); }
.comp-tab.active button { color: var(--gold); background: var(--gold-pale); }
/* カラーインジケーター */
.comp-tab-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}

/* Count bar */
.comp-count-bar { background: var(--cream); border-bottom: 1px solid var(--border); }
.comp-count-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.comp-count-text {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 400; letter-spacing: 0.12em; color: var(--text-sub);
}
.comp-count-text strong { color: var(--gold); font-weight: 600; }
.comp-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.comp-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ─── Main Layout ─── */
.comp-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 48px 80px;
}

/* ─── カテゴリセクション ─── */
.comp-cat-section { margin-bottom: 64px; }

.comp-cat-section-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
}
.comp-cat-section-marker {
  width: 3px; height: 32px; flex-shrink: 0; border-radius: 2px;
}
.comp-cat-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; color: var(--dark); line-height: 1;
}
.comp-cat-section-title em { font-style: italic; color: var(--gold); }
.comp-cat-section-en {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); margin-left: 2px;
}
.comp-cat-section-rule { flex: 1; height: 1px; background: var(--border); }

/* ─── Component Card Grid ─── */
.comp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }

/* ─── Component Card ─── */
.comp-card {
  background: var(--white); text-decoration: none;
  display: flex; flex-direction: column;
  padding: 22px 20px 18px;
  transition: background 0.25s;
  position: relative;
}
.comp-card:hover { background: var(--cream); }

/* 左のカラーライン */
.comp-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
}

/* カテゴリラベル */
.cc-cat-label {
  font-family: 'Montserrat', sans-serif; font-size: 8.5px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.cc-cat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* 分子式ビジュアル（小さなラボ記号） */
.cc-formula {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 300; letter-spacing: 0.08em;
  color: var(--text-sub); margin-bottom: 14px;
  padding: 6px 10px; background: var(--cream); border: 1px solid var(--border);
  display: inline-block; width: fit-content;
}

.cc-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: var(--dark); line-height: 1.1; margin-bottom: 3px;
}
.cc-name-ja { font-size: 12px; font-weight: 300; color: var(--text-sub); margin-bottom: 12px; }
.cc-desc { font-size: 11px; font-weight: 300; line-height: 1.9; color: var(--text-sub); flex: 1; margin-bottom: 14px; }

.cc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.cc-tag {
  font-family: 'Montserrat', sans-serif; font-size: 8px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; background: var(--cream); border: 1px solid var(--border); color: var(--text-sub);
}

.cc-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.cc-honeys {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.cc-honeys strong {
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  font-weight: 300; color: var(--gold); display: block;
  line-height: 1; margin-bottom: 1px; letter-spacing: 0;
}
.cc-cta {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 5px; transition: color 0.25s;
}
.comp-card:hover .cc-cta { color: var(--gold); }
.cc-cta::after { content: '→'; font-family: 'Cormorant Garamond', serif; font-size: 16px; }

/* ─── カラー設定（カテゴリ別） ─── */
/* 糖類 */
.cat-sugar .comp-card::before { background: #C8983A; }
.cat-sugar .cc-cat-label { color: #8a6020; }
.cat-sugar .cc-cat-dot { background: #C8983A; }
/* 酵素 */
.cat-enzyme .comp-card::before { background: #5a9e78; }
.cat-enzyme .cc-cat-label { color: #2a6e48; }
.cat-enzyme .cc-cat-dot { background: #5a9e78; }
/* ミネラル */
.cat-mineral .comp-card::before { background: #6a8aac; }
.cat-mineral .cc-cat-label { color: #3a5a7c; }
.cat-mineral .cc-cat-dot { background: #6a8aac; }
/* ビタミン */
.cat-vitamin .comp-card::before { background: #c0884a; }
.cat-vitamin .cc-cat-label { color: #8a5820; }
.cat-vitamin .cc-cat-dot { background: #c0884a; }
/* ポリフェノール */
.cat-polyphenol .comp-card::before { background: #9a6aac; }
.cat-polyphenol .cc-cat-label { color: #6a3a7c; }
.cat-polyphenol .cc-cat-dot { background: #9a6aac; }
/* その他 */
.cat-other .comp-card::before { background: #9a9a80; }
.cat-other .cc-cat-label { color: #6a6a50; }
.cat-other .cc-cat-dot { background: #9a9a80; }

/* ─── 読み物ブロック ─── */
.comp-about {
  background: var(--dark); padding: 72px 0;
  border-top: 1px solid var(--border); position: relative; overflow: hidden;
}
.comp-about::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,152,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,152,58,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.comp-about::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(200,152,58,0.06) 0%, transparent 70%);
}
.comp-about-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
  position: relative; z-index: 1;
}

.comp-about-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 44px); font-weight: 300;
  color: var(--white); line-height: 1.25; margin-bottom: 4px;
}
.comp-about-title em { font-style: italic; color: var(--gold-light); }
.comp-about-sub {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 28px;
}
.comp-about-text { font-size: 13px; font-weight: 300; line-height: 2.3; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

/* 右：成分比較グリッド */
.comp-ratio-grid {
  display: flex; flex-direction: column; gap: 14px;
}
.comp-ratio-row { display: flex; align-items: center; gap: 14px; }
.comp-ratio-label {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); flex: 0 0 100px; text-align: right;
}
.comp-ratio-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.08); }
.comp-ratio-bar { height: 100%; transition: width 0.6s; }
.comp-ratio-pct {
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  font-weight: 300; color: var(--gold); flex: 0 0 48px;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) { .comp-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1024px) {
  .comp-hero-inner { grid-template-columns: 1fr; }
  .comp-hero-visual { display: none; }
  .comp-about-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .comp-hero { padding: 48px 0 0; }
  .comp-hero-inner, .comp-layout, .comp-about-inner { padding: 0 24px; }
  .comp-hero-text { padding-bottom: 40px; }
  .comp-cat-nav-inner, .comp-count-bar-inner { padding: 0 24px; }
  .comp-count-bar-inner { padding: 12px 24px; }
  .comp-grid { grid-template-columns: repeat(2,1fr); }
  .comp-about { padding: 48px 0; }
  .comp-layout { padding: 40px 24px 60px; }
  .comp-legend { display: none; }
}
@media (max-width: 480px) { .comp-grid { grid-template-columns: 1fr; } }



/* ============================================================
   COMPONENT DETAIL — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.cd-hero {
  background: var(--white);
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.cd-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 72px; align-items: start;
}

/* 左：成分ビジュアル（sticky） */
.cd-visual { position: sticky; top: 96px; }

/* 成分ビジュアルメイン：分子構造をイメージした抽象グラフィック */
.cd-visual-main {
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border); position: relative;
  overflow: hidden; margin-bottom: 16px;
  background: var(--white);
}

/* 方眼グリッド背景（ラボノート感） */
.cd-visual-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,152,58,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,152,58,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* カテゴリカラーの放射グラデーション */
.cd-visual-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle 55% at 50% 50%, rgba(200,152,58,0.14) 0%, transparent 68%);
}

/* 中心：成分式エリア */
.cd-visual-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.cd-visual-formula-big {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 3vw, 28px); font-weight: 300;
  letter-spacing: 0.08em; color: var(--dark); text-align: center;
  padding: 12px 24px; border: 1px solid var(--border); background: rgba(255,255,255,0.85);
}
.cd-visual-cat-label {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 14px; color: var(--white);
}
.cd-visual-name-big {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 300; font-style: italic;
  color: var(--dark); text-align: center; line-height: 1;
}

/* 分子連結のデコ線 */
.cd-visual-bonds {
  position: absolute; inset: 0; opacity: 0.08;
}
.cd-visual-bonds circle { fill: var(--gold); }
.cd-visual-bonds line { stroke: var(--gold); stroke-width: 1.5; }

/* 成分カテゴリチップ帯 */
.cd-visual-footer {
  border: 1px solid var(--border); background: var(--cream);
  padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.cd-visual-footer-cat {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.cd-visual-footer-dot { width: 8px; height: 8px; border-radius: 50%; }
.cd-visual-footer-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-weight: 300; color: var(--text-sub);
}
.cd-visual-footer-count strong { color: var(--gold); font-size: 22px; }

/* ─── 右：情報 ─── */
.cd-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.cd-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.cd-title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 4px;
}
.cd-title-ja { font-size: 18px; font-weight: 300; color: var(--text-sub); margin-bottom: 6px; letter-spacing: 0.08em; }
.cd-formula-inline {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 400;
  letter-spacing: 0.1em; color: rgba(200,152,58,0.75);
  margin-bottom: 24px; display: flex; align-items: center; gap: 10px;
}
.cd-formula-inline::before { content: ''; width: 14px; height: 1px; background: rgba(200,152,58,0.4); }

.cd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }

.cd-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub);
  border-left: 2px solid var(--gold-pale); padding-left: 20px; margin-bottom: 32px;
}

/* 特徴ポイントグリッド */
.cd-points {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid var(--border); background: var(--border); margin-bottom: 28px;
}
.cd-point { background: var(--cream); padding: 18px 16px; }
.cd-point-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px; font-weight: 300; font-style: italic;
  color: var(--gold); margin-bottom: 6px; display: block;
}
.cd-point-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); margin-bottom: 6px;
}
.cd-point-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: var(--text-sub); }

/* データサマリー */
.cd-data {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid var(--border); background: var(--border); margin-bottom: 32px;
}
.cd-data-item { background: var(--white); padding: 14px 18px; }
.cd-data-label {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 5px;
}
.cd-data-value { font-size: 13px; font-weight: 400; color: var(--dark); line-height: 1.5; }

/* ─── Body ─── */
.cd-body {
  max-width: 1280px; margin: 0 auto; padding: 72px 48px;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 64px; align-items: start;
}

.content-section { margin-bottom: 56px; }
.content-heading {
  font-family: 'Cormorant Garamond', serif; font-size: 26px;
  font-weight: 400; color: var(--dark); margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.content-heading em { font-style: italic; color: var(--gold); }
.content-text { font-size: 14px; font-weight: 300; line-height: 2.3; color: var(--text-sub); margin-bottom: 16px; }

/* 特徴テーブル */
.func-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.func-table tr { border-bottom: 1px solid var(--border); }
.func-table th {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); padding: 14px 0; text-align: left; width: 30%; vertical-align: top;
}
.func-table td { font-size: 13px; color: var(--dark); padding: 14px 0; line-height: 1.8; }

/* 注意事項ブロック */
.caution-box {
  border: 1px solid rgba(200,152,58,0.3); background: rgba(200,152,58,0.04);
  padding: 20px 24px; margin-top: 20px;
  display: flex; gap: 16px; align-items: flex-start;
}
.caution-icon {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); flex-shrink: 0; padding-top: 2px;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.caution-icon::before {
  content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1px solid var(--gold);
  font-size: 10px; color: var(--gold); border-radius: 50%; flex-shrink: 0;
}
.caution-text { font-size: 13px; font-weight: 300; line-height: 2; color: var(--text-sub); }

/* チップ群 */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; background: var(--cream); border: 1px solid var(--border);
  text-decoration: none; color: var(--text-sub); transition: all 0.25s;
}
.chip:hover { background: var(--gold-pale); border-color: var(--gold-light); color: var(--brown-mid); }

/* 関連蜂蜜グリッド */
.honeys-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 20px; }

/* ─── サイドバー ─── */
.cd-sidebar { position: sticky; top: 96px; }
.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head {
  background: var(--dark); padding: 14px 20px;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }

.related-item {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; min-width: 0; }
.related-item-en {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }

.sb-honey {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.sb-honey:last-child { border-bottom: none; }
.sb-honey:hover { padding-left: 6px; }
.sb-honey-thumb { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border); }
.sb-honey-en { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }
.sb-honey-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }

/* サイドバー：成分比較バー */
.cd-compare { padding: 16px 20px 12px; background: var(--white); }
.cd-compare-row { margin-bottom: 10px; }
.cd-compare-row:last-child { margin-bottom: 0; }
.cd-compare-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 5px;
}
.cd-compare-pct { color: var(--gold); font-weight: 600; }
.cd-compare-bar-wrap { height: 3px; background: var(--cream-dark); }
.cd-compare-bar { height: 100%; background: var(--gold); }

.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; }
.gift-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold-light); margin-bottom: 8px; }
.gift-card-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.gift-card-btn {
  display: block; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); background: var(--gold); padding: 14px 20px; transition: background 0.25s;
}
.gift-card-btn:hover { background: var(--gold-light); }

/* ─── Related Components ─── */
.related-comps { background: var(--cream-dark); padding: 72px 0; border-top: 1px solid var(--border); }
.related-comps-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

.rc-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  margin-top: 32px;
}
.rc-card {
  background: var(--white); text-decoration: none; padding: 20px 18px;
  transition: background 0.2s; position: relative;
}
.rc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.rc-card:hover { background: var(--cream); }
.rc-cat {
  font-family: 'Montserrat', sans-serif; font-size: 8.5px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 10px; display: flex; align-items: center; gap: 5px;
}
.rc-cat-dot { width: 5px; height: 5px; border-radius: 50%; }
.rc-formula-mini {
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 300;
  color: var(--text-sub); margin-bottom: 12px;
  padding: 4px 8px; background: var(--cream); border: 1px solid var(--border);
  display: inline-block;
}
.rc-name-en { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300; color: var(--dark); margin-bottom: 2px; }
.rc-name-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-bottom: 10px; }
.rc-desc-mini { font-size: 11px; font-weight: 300; line-height: 1.8; color: var(--text-sub); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .cd-hero-inner { grid-template-columns: 1fr; }
  .cd-visual { position: static; }
  .cd-body { grid-template-columns: 1fr; }
  .cd-sidebar { position: static; }
  .rc-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .cd-hero { padding: 40px 0; }
  .cd-hero-inner, .cd-body, .related-comps-inner { padding: 0 24px; }
  .cd-body { padding: 48px 24px; gap: 40px; }
  .related-comps { padding: 48px 0; }
  .cd-data { grid-template-columns: 1fr; }
  .cd-points { grid-template-columns: 1fr; }
  .honeys-grid { grid-template-columns: 1fr; }
  .rc-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   EFFECT DETAIL — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.ed-hero {
  background: var(--white);
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}
.ed-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 72px; align-items: start;
}

/* ─── 左：シーンビジュアル（sticky） ─── */
.ed-visual { position: sticky; top: 96px; }

.ed-visual-main {
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border); position: relative;
  overflow: hidden; margin-bottom: 16px;
}
.ed-vbg { position: absolute; inset: 0; }

/* 有機的な波形レイヤー */
.ed-visual-waves {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
}
.ed-visual-waves svg { width: 100%; height: 100%; }

/* 中央テキストゾーン */
.ed-visual-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 32px;
}
.ed-visual-cat-badge {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 16px; color: var(--white);
}
.ed-visual-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px); font-weight: 300; font-style: italic;
  color: var(--dark); text-align: center; line-height: 1.1;
}
.ed-visual-en {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); text-align: center;
}

/* カテゴリフッター */
.ed-visual-footer {
  border: 1px solid var(--border); background: var(--cream);
  padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.ed-visual-footer-cat {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 8px;
}
.ed-visual-footer-dot { width: 8px; height: 8px; border-radius: 50%; }
.ed-visual-footer-honeys {
  font-family: 'Cormorant Garamond', serif; font-size: 15px;
  font-weight: 300; color: var(--text-sub);
}
.ed-visual-footer-honeys strong { color: var(--gold); font-size: 22px; }

/* ─── 右：情報 ─── */
.ed-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.ed-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.ed-title-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 64px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 4px;
}
.ed-title-ja { font-size: 18px; font-weight: 300; color: var(--text-sub); margin-bottom: 6px; letter-spacing: 0.08em; }
.ed-cat-inline {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(150,80,120,0.7); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.ed-cat-inline::before { content: ''; width: 14px; height: 1px; background: rgba(150,80,120,0.4); }

.ed-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; }

.ed-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2; color: var(--text-sub);
  border-left: 2px solid var(--gold-pale); padding-left: 20px; margin-bottom: 32px;
}

/* 選ぶポイントグリッド */
.ed-points {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid var(--border); background: var(--border); margin-bottom: 28px;
}
.ed-point { background: var(--cream); padding: 18px 16px; }
.ed-point-icon {
  font-family: 'Cormorant Garamond', serif; font-size: 11px;
  font-weight: 300; font-style: italic; color: var(--gold);
  margin-bottom: 6px; display: block;
}
.ed-point-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); margin-bottom: 6px;
}
.ed-point-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: var(--text-sub); }

/* データサマリー */
.ed-data {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid var(--border); background: var(--border); margin-bottom: 32px;
}
.ed-data-item { background: var(--white); padding: 14px 18px; }
.ed-data-label {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 5px;
}
.ed-data-value { font-size: 13px; font-weight: 400; color: var(--dark); line-height: 1.5; }

/* ─── Body ─── */
.ed-body {
  max-width: 1280px; margin: 0 auto; padding: 72px 48px;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 64px; align-items: start;
}

.content-section { margin-bottom: 56px; }
.content-heading {
  font-family: 'Cormorant Garamond', serif; font-size: 26px;
  font-weight: 400; color: var(--dark); margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.content-heading em { font-style: italic; color: var(--gold); }
.content-text { font-size: 14px; font-weight: 300; line-height: 2.3; color: var(--text-sub); margin-bottom: 16px; }

/* 取り入れ方リスト（usage_note的） */
.usage-list { display: flex; flex-direction: column; gap: 0; margin-top: 20px; border: 1px solid var(--border); }
.usage-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.usage-item:last-child { border-bottom: none; }
.usage-num {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  font-weight: 300; font-style: italic; color: var(--gold);
  flex-shrink: 0; width: 24px; line-height: 1.4;
}
.usage-text { flex: 1; }
.usage-title {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); margin-bottom: 5px;
}
.usage-desc { font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--text-sub); }

/* 注意事項 */
.caution-box {
  border: 1px solid rgba(200,152,58,0.3); background: rgba(200,152,58,0.04);
  padding: 20px 24px; margin-top: 20px;
  display: flex; gap: 16px; align-items: flex-start;
}
.caution-icon {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); flex-shrink: 0; padding-top: 2px;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.caution-icon::before {
  content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 1px solid var(--gold);
  font-size: 10px; color: var(--gold); border-radius: 50%; flex-shrink: 0;
}
.caution-text { font-size: 13px; font-weight: 300; line-height: 2; color: var(--text-sub); }

/* 関連蜂蜜グリッド */
.honeys-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 20px; }

/* 関連成分チップ */
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; background: var(--cream); border: 1px solid var(--border);
  text-decoration: none; color: var(--text-sub); transition: all 0.25s;
}
.chip:hover { background: var(--gold-pale); border-color: var(--gold-light); color: var(--brown-mid); }

/* ─── サイドバー ─── */
.ed-sidebar { position: sticky; top: 96px; }
.sidebar-card { border: 1px solid var(--border); margin-bottom: 20px; overflow: hidden; }
.sidebar-card-head {
  background: var(--dark); padding: 14px 20px;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.sidebar-card-body { padding: 4px 20px 8px; background: var(--white); }

.related-item {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.related-item:last-child { border-bottom: none; }
.related-item:hover { padding-left: 6px; }
.related-item-texts { flex: 1; min-width: 0; }
.related-item-en {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.related-item-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }
.related-item-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; flex-shrink: 0; }

.sb-honey {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: padding-left 0.2s;
}
.sb-honey:last-child { border-bottom: none; }
.sb-honey:hover { padding-left: 6px; }
.sb-honey-thumb { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border); }
.sb-honey-en { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); }
.sb-honey-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 2px; }

/* ORAMEL へのリンク */
.gift-card { background: var(--dark); padding: 28px 20px; text-align: center; }
.gift-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 300; font-style: italic; color: var(--gold-light); margin-bottom: 8px; }
.gift-card-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.gift-card-btn {
  display: block; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dark); background: var(--gold); padding: 14px 20px; transition: background 0.25s;
}
.gift-card-btn:hover { background: var(--gold-light); }

/* ─── Related Effects ─── */
.related-effects { background: var(--cream-dark); padding: 72px 0; border-top: 1px solid var(--border); }
.related-effects-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

.re-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 32px; }
.re-card {
  background: var(--white); text-decoration: none;
  border: 1px solid var(--border); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.re-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(200,152,58,0.1); }
.re-visual { width: 100%; aspect-ratio: 3/1.4; position: relative; overflow: hidden; }
.re-vbg { position: absolute; inset: 0; }
.re-wave { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 65%; }
.re-cat {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: 'Montserrat', sans-serif; font-size: 7.5px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; color: var(--white);
}
.re-body { padding: 14px 14px 12px; }
.re-en { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300; color: var(--dark); margin-bottom: 2px; }
.re-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-bottom: 6px; }
.re-cat-label { font-family: 'Montserrat', sans-serif; font-size: 8px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-sub); }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .ed-hero-inner { grid-template-columns: 1fr; }
  .ed-visual { position: static; }
  .ed-body { grid-template-columns: 1fr; }
  .ed-sidebar { position: static; }
  .re-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .ed-hero { padding: 40px 0; }
  .ed-hero-inner, .ed-body, .related-effects-inner { padding: 0 24px; }
  .ed-body { padding: 48px 24px; gap: 40px; }
  .related-effects { padding: 48px 0; }
  .ed-data { grid-template-columns: 1fr; }
  .ed-points { grid-template-columns: 1fr; }
  .honeys-grid { grid-template-columns: 1fr; }
  .re-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   EFFECTS LIST — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.eff-hero {
  background: var(--white);
  padding: 72px 0 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
}
/* 柔らかな波・有機的な背景パターン */
.eff-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 78% 60%, rgba(200,152,58,0.08) 0%, transparent 62%),
    radial-gradient(ellipse 40% 38% at 20% 30%, rgba(200,152,58,0.05) 0%, transparent 55%);
  pointer-events: none;
}

.eff-hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: end; position: relative; z-index: 1;
}
.eff-hero-text { padding-bottom: 56px; }

.eff-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
}
.eff-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

.eff-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.5vw, 72px); font-weight: 300;
  color: var(--dark); line-height: 1.05; margin-bottom: 10px;
}
.eff-hero-title em { font-style: italic; color: var(--gold); }
.eff-hero-subtitle {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 300;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 28px;
}
.eff-hero-desc {
  font-size: 14px; font-weight: 300; line-height: 2.2;
  color: var(--text-sub); max-width: 480px; margin-bottom: 16px;
}
.eff-hero-note {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 400;
  letter-spacing: 0.1em; color: rgba(122,96,64,0.6);
  border-left: 2px solid var(--border); padding-left: 14px; margin-bottom: 36px;
  line-height: 1.8;
}

.eff-hero-stats { display: flex; border: 1px solid var(--border); width: fit-content; }
.eff-stat { padding: 16px 28px; border-right: 1px solid var(--border); text-align: center; }
.eff-stat:last-child { border-right: none; }
.eff-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 300; color: var(--gold); line-height: 1; display: block;
}
.eff-stat-label {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); display: block; margin-top: 4px;
}

/* 右：シーンビジュアルグリッド */
.eff-hero-visual {
  align-self: end; display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
}
.eff-scene-band {
  display: flex; align-items: center; text-decoration: none;
  border-bottom: 1px solid var(--border); transition: background 0.2s;
}
.eff-scene-band:last-child { border-bottom: none; }
.eff-scene-band:hover { background: var(--cream); }
.eff-scene-bar { width: 4px; align-self: stretch; flex-shrink: 0; }
.eff-scene-body {
  flex: 1; padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.eff-scene-en {
  font-family: 'Montserrat', sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark);
}
.eff-scene-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-top: 1px; }
.eff-scene-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--gold); flex-shrink: 0;
}

/* ─── Filter Bar ─── */
.eff-filter-bar {
  background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 61px; z-index: 50;
}
.eff-filter-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: stretch;
}
.eff-search { flex: 0 0 280px; display: flex; border-right: 1px solid var(--border); }
.eff-search input {
  flex: 1; padding: 16px 20px;
  font-family: 'Noto Serif JP', serif; font-size: 13px;
  border: none; outline: none; background: transparent; color: var(--text-main);
}
.eff-search input::placeholder { color: var(--text-sub); }
.eff-search-btn {
  padding: 0 18px; background: none; border: none; cursor: pointer;
  font-size: 13px; color: var(--text-sub); transition: color 0.2s;
}
.eff-search-btn:hover { color: var(--gold); }

.eff-tabs { display: flex; list-style: none; overflow-x: auto; flex: 1; }
.eff-tab { border-right: 1px solid var(--border); flex-shrink: 0; }
.eff-tab:last-child { border-right: none; }
.eff-tab button {
  display: block; padding: 0 18px; height: 100%;
  appearance: none; background: none; border: none; outline: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.eff-tab button:hover { color: var(--gold); background: var(--cream); }
.eff-tab.active button { color: var(--gold); background: var(--gold-pale); }

/* count bar */
.eff-count-bar { background: var(--cream); border-bottom: 1px solid var(--border); }
.eff-count-bar-inner {
  max-width: 1280px; margin: 0 auto; padding: 12px 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.eff-count-text {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 400; letter-spacing: 0.12em; color: var(--text-sub);
}
.eff-count-text strong { color: var(--gold); font-weight: 600; }

/* ─── Main Layout ─── */
.eff-layout {
  max-width: 1280px; margin: 0 auto; padding: 0 48px 80px;
  display: grid; grid-template-columns: 200px 1fr;
  gap: 48px; align-items: start;
}

/* ─── Sidebar ─── */
.eff-sidebar { position: sticky; top: 130px; padding-top: 48px; }
.filter-group { margin-bottom: 28px; }
.filter-group-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dark); padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.filter-checks { display: flex; flex-direction: column; gap: 8px; }
.filter-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; font-weight: 300; color: var(--text-sub); transition: color 0.2s;
}
.filter-check:hover { color: var(--dark); }
.filter-check input[type="checkbox"] { accent-color: var(--gold); }
.fcc {
  margin-left: auto;
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  color: var(--text-sub); background: var(--cream-dark); padding: 2px 6px;
}
.filter-reset {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); background: none; border: none; cursor: pointer;
  margin-top: 12px; text-decoration: underline; transition: color 0.2s;
}
.filter-reset:hover { color: var(--gold); }

/* ─── グリッドエリア ─── */
.eff-grid-area { padding-top: 48px; }

/* カテゴリ見出し */
.eff-cat-heading {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px; margin-top: 40px;
}
.eff-cat-heading:first-of-type { margin-top: 0; }
.eff-cat-heading-label {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
}
.eff-cat-heading-label::before { content: '—'; font-weight: 300; }
.eff-cat-heading-rule { flex: 1; height: 1px; background: var(--border); }

/* ─── Effect Card Grid ─── */
.eff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 40px; }

/* ─── Effect Card ─── */
.eff-card {
  background: var(--white); text-decoration: none;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.eff-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(200,152,58,0.1);
}

/* カード上部：シーンビジュアル帯 */
.eff-card-visual {
  width: 100%; aspect-ratio: 3/1.4;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.eff-card-vbg { position: absolute; inset: 0; }

/* テクスチャ的な波形SVG */
.eff-card-wave {
  position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 70%;
}

/* カテゴリバッジ */
.eff-card-cat {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: 'Montserrat', sans-serif; font-size: 8px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; color: var(--white);
}
/* 用途名（ビジュアル内） */
.eff-card-visual-title {
  position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,0.0); /* デフォルトは透明 — 濃い背景のみ表示 */
  line-height: 1;
}

.eff-card-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; }
.eff-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }

/* カテゴリ別タグカラー */
.tag-morning { background: rgba(255,210,120,0.15); border-color: rgba(200,160,60,0.3); color: #7a5010; }
.tag-drink { background: rgba(120,170,200,0.15); border-color: rgba(80,130,170,0.3); color: #1a4060; }
.tag-cooking { background: rgba(160,195,140,0.15); border-color: rgba(100,150,90,0.3); color: #1a4a20; }
.tag-gift { background: rgba(200,155,190,0.15); border-color: rgba(160,100,150,0.3); color: #5a1a4a; }
.tag-beauty { background: rgba(240,200,180,0.15); border-color: rgba(200,140,110,0.3); color: #6a2a10; }
.tag-season { background: rgba(140,180,160,0.15); border-color: rgba(90,140,110,0.3); color: #1a4a30; }

.eff-card-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--dark); line-height: 1.1; margin-bottom: 2px;
}
.eff-card-name-ja { font-size: 12px; font-weight: 300; color: var(--text-sub); margin-bottom: 12px; }
.eff-card-desc { font-size: 11px; font-weight: 300; line-height: 1.9; color: var(--text-sub); flex: 1; margin-bottom: 14px; }

.eff-card-traits { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.trait-chip {
  font-family: 'Montserrat', sans-serif; font-size: 8.5px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; background: var(--cream); border: 1px solid var(--border); color: var(--text-sub);
}

.eff-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.eff-card-meta-left {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.eff-card-meta-left strong {
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  font-weight: 300; color: var(--gold); display: block;
  line-height: 1; margin-bottom: 1px; letter-spacing: 0;
}
.eff-card-cta {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 5px; transition: color 0.25s;
}
.eff-card:hover .eff-card-cta { color: var(--gold); }
.eff-card-cta::after { content: '→'; font-family: 'Cormorant Garamond', serif; font-size: 16px; }

/* ─── 読み物ブロック ─── */
.eff-about {
  background: var(--dark); padding: 72px 0;
  border-top: 1px solid var(--border); position: relative; overflow: hidden;
}
.eff-about::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(200,152,58,0.07) 0%, transparent 70%);
}
.eff-about-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
  position: relative; z-index: 1;
}

.eff-about-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 44px); font-weight: 300;
  color: var(--white); line-height: 1.25; margin-bottom: 4px;
}
.eff-about-title em { font-style: italic; color: var(--gold-light); }
.eff-about-sub {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 28px;
}
.eff-about-text { font-size: 13px; font-weight: 300; line-height: 2.3; color: rgba(255,255,255,0.5); margin-bottom: 16px; }

/* 右：選び方ガイド */
.eff-guide-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(200,152,58,0.15); }
.eff-guide-item {
  padding: 20px 24px; border-bottom: 1px solid rgba(200,152,58,0.12);
  display: flex; gap: 18px; align-items: flex-start;
  transition: background 0.2s;
}
.eff-guide-item:last-child { border-bottom: none; }
.eff-guide-item:hover { background: rgba(200,152,58,0.04); }
.eff-guide-num {
  font-family: 'Cormorant Garamond', serif; font-size: 28px;
  font-weight: 300; font-style: italic; color: rgba(200,152,58,0.4);
  line-height: 1; flex-shrink: 0; width: 28px; text-align: center;
}
.eff-guide-content {}
.eff-guide-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 6px;
}
.eff-guide-desc { font-size: 12px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.35); }

/* ─── Responsive ─── */
@media (max-width: 1100px) { .eff-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 1024px) {
  .eff-hero-inner { grid-template-columns: 1fr; }
  .eff-hero-visual { display: none; }
  .eff-layout { grid-template-columns: 1fr; }
  .eff-sidebar { display: none; }
  .eff-about-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .eff-hero { padding: 48px 0 0; }
  .eff-hero-inner, .eff-about-inner { padding: 0 24px; }
  .eff-hero-text { padding-bottom: 40px; }
  .eff-filter-inner, .eff-count-bar-inner { padding: 0 24px; }
  .eff-count-bar-inner { padding: 12px 24px; }
  .eff-layout { padding: 0 24px 60px; }
  .eff-grid { grid-template-columns: 1fr; }
  .eff-about { padding: 48px 0; }
}


/* ============================================================
   SEARCH PAGE — page-specific CSS
   ============================================================ */

/* ─── Hero ─── */
.search-hero {
  background: var(--white);
  padding: 72px 0 0;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
/* 斜線 + 放射グラデーション背景 */
.search-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0px, transparent 36px,
      rgba(200,152,58,0.045) 36px, rgba(200,152,58,0.045) 37px
    );
  pointer-events: none;
}
.search-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(250,246,238,0.92) 0%, transparent 72%);
  pointer-events: none;
}

.search-hero-inner {
  max-width: 900px; margin: 0 auto; padding: 0 48px 56px;
  position: relative; z-index: 1; text-align: center;
}

.search-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.search-eyebrow::before,
.search-eyebrow::after { content: ''; width: 20px; height: 1px; background: var(--gold); }

.search-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4.5vw, 56px); font-weight: 300;
  color: var(--dark); line-height: 1.1; margin-bottom: 8px;
}
/* 検索語ハイライト */
.search-keyword-highlight {
  font-style: italic; color: var(--gold);
  border-bottom: 1px solid rgba(200,152,58,0.4);
  padding-bottom: 2px;
}

.search-hero-sub {
  font-size: 13px; font-weight: 300; line-height: 2;
  color: var(--text-sub); margin-bottom: 40px;
  max-width: 520px; margin-left: auto; margin-right: auto;
}

/* ─── 検索フォーム ─── */
.search-form-wrap {
  display: flex; gap: 0; border: 1px solid var(--border);
  background: var(--white); max-width: 600px; margin: 0 auto 28px;
  box-shadow: 0 4px 24px rgba(200,152,58,0.08);
}
.search-form-input {
  flex: 1; padding: 16px 22px;
  font-family: 'Noto Serif JP', serif; font-size: 15px; font-weight: 300;
  border: none; outline: none; background: transparent; color: var(--text-main);
}
.search-form-input::placeholder { color: var(--text-sub); }
.search-form-btn {
  padding: 0 28px; background: var(--gold); border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--white); transition: background 0.25s; flex-shrink: 0;
}
.search-form-btn:hover { background: var(--gold-light); }

/* 関連キーワードタグ */
.search-keyword-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 0;
}
.search-keyword-tag {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 14px; border: 1px solid var(--border);
  background: var(--cream); color: var(--text-sub);
  text-decoration: none; transition: all 0.25s;
}
.search-keyword-tag:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-pale); }
.search-keyword-tag.active { border-color: var(--gold); color: var(--brown-mid); background: var(--gold-pale); }

/* ─── サマリーエリア ─── */
.search-summary {
  background: var(--cream); border-bottom: 1px solid var(--border);
}
.search-summary-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: stretch; gap: 0;
}

/* 総件数 */
.summary-total {
  padding: 20px 36px 20px 0; border-right: 1px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
}
.summary-total-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px; font-weight: 300; color: var(--gold); line-height: 1;
}
.summary-total-label { font-size: 11px; font-weight: 300; color: var(--text-sub); line-height: 1.6; }
.summary-total-label strong { display: block; font-weight: 500; color: var(--dark); font-size: 13px; }

/* カテゴリ別件数 */
.summary-cats {
  flex: 1; display: flex; overflow-x: auto;
}
.summary-cat {
  padding: 20px 28px; border-right: 1px solid var(--border);
  flex-shrink: 0; text-decoration: none;
  display: flex; flex-direction: column; justify-content: center;
  transition: background 0.2s; cursor: pointer;
}
.summary-cat:last-child { border-right: none; }
.summary-cat:hover { background: var(--white); }
.summary-cat.has-results:hover .summary-cat-num { color: var(--gold); }

.summary-cat-en {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 3px;
  display: flex; align-items: center; gap: 6px;
}
.summary-cat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.summary-cat-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-bottom: 4px; }
.summary-cat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 300; color: var(--dark); line-height: 1;
  transition: color 0.2s;
}
.summary-cat.no-results .summary-cat-num { color: var(--cream-dark); }
.summary-cat.no-results .summary-cat-en,
.summary-cat.no-results .summary-cat-ja { opacity: 0.45; }

/* ─── メインコンテンツ ─── */
.search-main {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 48px 80px;
}

/* ─── カテゴリセクション共通 ─── */
.search-section { margin-bottom: 72px; }

.search-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.search-section-head-left { display: flex; align-items: center; gap: 14px; }
.search-section-marker { width: 3px; height: 28px; border-radius: 2px; flex-shrink: 0; }
.search-section-label {}
.search-section-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; color: var(--dark); line-height: 1;
}
.search-section-en em { font-style: italic; color: var(--gold); }
.search-section-ja {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); margin-top: 3px;
}
.search-section-count {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 6px;
}
.search-section-count strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--gold); letter-spacing: 0;
}
.search-section-more {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); text-decoration: none;
  display: flex; align-items: center; gap: 6px; transition: color 0.25s;
}
.search-section-more:hover { color: var(--gold); }
.search-section-more::after { content: '→'; font-family: 'Cormorant Garamond', serif; font-size: 16px; }

/* ─── Honeys グリッド ─── */
.search-honeys-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}

/* ─── Honeys カード（大・メイン） ─── */
.sh-card {
  background: var(--white); text-decoration: none;
  border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.sh-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(200,152,58,0.12);
}

.sh-visual {
  width: 100%; aspect-ratio: 3/2;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.sh-visual-bg { position: absolute; inset: 0; }

/* 蜂蜜カラーバンド（下部） */
.sh-visual-band {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
}
.sh-visual-label {
  position: absolute; bottom: 14px; left: 16px;
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(92,61,26,0.5);
}
.sh-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'Montserrat', sans-serif; font-size: 8px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--gold); color: var(--white); padding: 4px 10px;
}

.sh-body { padding: 20px 18px; flex: 1; display: flex; flex-direction: column; }
.sh-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; color: var(--dark); line-height: 1.1; margin-bottom: 3px;
}
.sh-name-ja { font-size: 12px; font-weight: 300; color: var(--text-sub); margin-bottom: 10px; }
.sh-desc { font-size: 12px; font-weight: 300; line-height: 2; color: var(--text-sub); flex: 1; margin-bottom: 16px; }

.sh-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.sh-meta-facts { display: flex; gap: 14px; }
.sh-meta-fact {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.sh-meta-fact span {
  display: block; font-size: 11px; font-weight: 400; color: var(--dark);
  margin-top: 2px; letter-spacing: 0; font-family: 'Noto Serif JP', serif;
}
.sh-cta {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-sub); display: flex; align-items: center; gap: 5px;
  transition: color 0.25s; flex-shrink: 0;
}
.sh-card:hover .sh-cta { color: var(--gold); }
.sh-cta::after { content: '→'; font-family: 'Cormorant Garamond', serif; font-size: 16px; }

/* ─── Flowers / Regions 横リスト ─── */
.search-list-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}

.sl-item {
  background: var(--white); text-decoration: none;
  padding: 20px 20px 16px;
  display: flex; flex-direction: column;
  transition: background 0.2s; position: relative;
}
.sl-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.sl-item:hover { background: var(--cream); }

.sl-visual {
  width: 100%; aspect-ratio: 16/7;
  position: relative; overflow: hidden; margin-bottom: 14px; flex-shrink: 0;
}
.sl-visual-bg { position: absolute; inset: 0; }
.sl-visual-svg { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 55%; opacity: 0.13; }

.sl-cat {
  font-family: 'Montserrat', sans-serif; font-size: 8.5px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.sl-cat-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sl-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: var(--dark); line-height: 1.1; margin-bottom: 2px;
}
.sl-name-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-bottom: 10px; }
.sl-desc { font-size: 11px; font-weight: 300; line-height: 1.9; color: var(--text-sub); flex: 1; margin-bottom: 12px; }
.sl-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.sl-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--border);
}
.sl-meta-text {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-sub);
}
.sl-meta-text strong {
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  font-weight: 300; color: var(--gold); display: block; line-height: 1; margin-bottom: 1px; letter-spacing: 0;
}
.sl-arrow { color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 16px; opacity: 0; transition: opacity 0.2s; }
.sl-item:hover .sl-arrow { opacity: 1; }

/* ─── Components / Effects — コンパクトリスト ─── */
.search-compact-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}

.sc-item {
  background: var(--white); text-decoration: none;
  padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 16px;
  transition: background 0.2s;
}
.sc-item:hover { background: var(--cream); }

.sc-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.sc-icon-inner {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 300; color: var(--gold); font-style: italic;
  text-align: center; line-height: 1;
}

.sc-texts { flex: 1; min-width: 0; }
.sc-cat {
  font-family: 'Montserrat', sans-serif; font-size: 8px;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 4px;
  display: flex; align-items: center; gap: 5px;
}
.sc-cat-dot { width: 5px; height: 5px; border-radius: 50%; }
.sc-name-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 300; color: var(--dark); line-height: 1.1; margin-bottom: 2px;
}
.sc-name-ja { font-size: 11px; font-weight: 300; color: var(--text-sub); margin-bottom: 6px; }
.sc-desc { font-size: 11px; font-weight: 300; line-height: 1.8; color: var(--text-sub); }
.sc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.sc-tag {
  font-family: 'Montserrat', sans-serif; font-size: 8px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; background: var(--cream); border: 1px solid var(--border); color: var(--text-sub);
}

.sc-arrow {
  flex-shrink: 0; color: var(--gold);
  font-family: 'Cormorant Garamond', serif; font-size: 16px;
  opacity: 0; transition: opacity 0.2s; padding-top: 2px;
}
.sc-item:hover .sc-arrow { opacity: 1; }

/* ─── 0件UI ─── */
.search-zero {
  max-width: 1280px; margin: 0 auto; padding: 56px 48px 80px;
  display: none; /* PHPで件数0の時に表示切り替え */
}
.search-zero-inner {
  max-width: 600px; margin: 0 auto; text-align: center;
  padding: 64px 48px; border: 1px solid var(--border); background: var(--white);
}
.search-zero-icon {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px; font-weight: 300; font-style: italic;
  color: var(--cream-dark); margin-bottom: 24px; display: block;
}
.search-zero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300; color: var(--dark);
  margin-bottom: 12px;
}
.search-zero-desc { font-size: 13px; font-weight: 300; line-height: 2.1; color: var(--text-sub); margin-bottom: 32px; }

/* 0件時フォーム */
.zero-form-wrap {
  display: flex; gap: 0; border: 1px solid var(--border); background: var(--white);
  max-width: 400px; margin: 0 auto 28px;
}
.zero-form-input {
  flex: 1; padding: 14px 18px;
  font-family: 'Noto Serif JP', serif; font-size: 14px;
  border: none; outline: none; background: transparent; color: var(--text-main);
}
.zero-form-input::placeholder { color: var(--text-sub); }
.zero-form-btn {
  padding: 0 20px; background: var(--gold); border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); transition: background 0.25s;
}
.zero-form-btn:hover { background: var(--gold-light); }

.zero-suggest-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); margin-bottom: 12px;
}
.zero-suggest-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.zero-suggest-tag {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 14px; border: 1px solid var(--border);
  background: var(--cream); color: var(--text-sub);
  text-decoration: none; transition: all 0.25s;
}
.zero-suggest-tag:hover { border-color: var(--gold); color: var(--gold); }

.zero-cat-links { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.zero-cat-link {
  text-decoration: none; padding: 12px 8px; border: 1px solid var(--border);
  background: var(--cream); text-align: center; transition: all 0.25s;
}
.zero-cat-link:hover { border-color: var(--gold); background: var(--gold-pale); }
.zero-cat-link-en {
  font-family: 'Montserrat', sans-serif; font-size: 9px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dark); display: block; margin-bottom: 3px;
}
.zero-cat-link-ja { font-size: 10px; font-weight: 300; color: var(--text-sub); }

/* ─── 下部回遊導線 ─── */
.search-explore {
  background: var(--dark); padding: 64px 0;
  border-top: 1px solid var(--border); position: relative; overflow: hidden;
}
.search-explore::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(200,152,58,0.06) 0%, transparent 70%);
}
.search-explore-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 48px;
  position: relative;
}
.search-explore-header { text-align: center; margin-bottom: 40px; }
.search-explore-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 38px); font-weight: 300;
  color: var(--white); margin-bottom: 6px;
}
.search-explore-title em { font-style: italic; color: var(--gold-light); }
.search-explore-sub {
  font-family: 'Montserrat', sans-serif; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.search-explore-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 1px;
  background: rgba(200,152,58,0.12); border: 1px solid rgba(200,152,58,0.12);
  margin-bottom: 32px;
}
.explore-item {
  background: rgba(255,255,255,0.03); padding: 28px 20px;
  text-decoration: none; text-align: center;
  transition: background 0.25s;
}
.explore-item:hover { background: rgba(200,152,58,0.08); }
.explore-num {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; color: rgba(200,152,58,0.4);
  display: block; margin-bottom: 8px;
}
.explore-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; font-style: italic;
  color: var(--white); display: block; line-height: 1; margin-bottom: 4px;
}
.explore-ja {
  font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.4);
  display: block; margin-bottom: 12px;
}
.explore-arrow {
  font-family: 'Cormorant Garamond', serif; font-size: 20px;
  color: var(--gold); display: block; opacity: 0;
  transition: opacity 0.25s; line-height: 1;
}
.explore-item:hover .explore-arrow { opacity: 1; }

.explore-oramel {
  max-width: 480px; margin: 0 auto; text-align: center;
  padding: 28px; border: 1px solid rgba(200,152,58,0.2);
  background: rgba(200,152,58,0.04);
}
.explore-oramel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 300; font-style: italic;
  color: var(--gold-light); margin-bottom: 8px;
}
.explore-oramel-desc {
  font-size: 12px; font-weight: 300; line-height: 1.9;
  color: rgba(255,255,255,0.4); margin-bottom: 20px;
}
.explore-oramel-btn {
  display: inline-block; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gold); color: var(--dark);
  padding: 14px 32px; transition: background 0.25s;
}
.explore-oramel-btn:hover { background: var(--gold-light); }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .search-honeys-grid { grid-template-columns: repeat(2,1fr); }
  .search-explore-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1024px) {
  .search-list-grid { grid-template-columns: repeat(2,1fr); }
  .search-compact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .search-hero { padding: 48px 0 0; }
  .search-hero-inner { padding: 0 24px 40px; }
  .search-summary-inner { padding: 0; overflow-x: auto; }
  .summary-total { padding: 16px 20px; }
  .summary-cat { padding: 16px 18px; }
  .search-main, .search-zero { padding: 40px 24px 56px; }
  .search-honeys-grid { grid-template-columns: 1fr; }
  .search-list-grid { grid-template-columns: 1fr; }
  .search-compact-grid { grid-template-columns: 1fr; }
  .search-explore { padding: 48px 0; }
  .search-explore-inner { padding: 0 24px; }
  .search-explore-grid { grid-template-columns: repeat(2,1fr); }
  .zero-cat-links { grid-template-columns: repeat(3,1fr); }
  .search-section-head { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 480px) {
  .search-keyword-tags { justify-content: flex-start; }
  .zero-cat-links { grid-template-columns: repeat(2,1fr); }
}