/* ════════════════════════════════════════════════════════════════
   og-style.css  —  category-og.php 専用スタイル（独立ファイル）
   ganjabonsai の og テーマ直下に置き、header-og.php から読み込む
   ※ 既存 style.css には一切追記不要
════════════════════════════════════════════════════════════════ */

:root {
  --og-green-dark: #1a2e1a;
  --og-gold:       #c8a84b;
  --og-gold-light: #e8c96a;
  --og-cream:      #f4f0e8;
  --og-black:      #0d1a0d;
  --og-line-green: #00b900;
  --og-fade-dur:   600ms;
}

/* ══════════ TOP SPLIT BAR ══════════ */
.og-topbar2 { display: flex; width: 100%; position: relative; z-index: 120; }
.og-topbar2__btn { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; text-align: center; line-height: 1.3; transition: opacity 0.18s; }
.og-topbar2__btn:hover { opacity: 0.85; }
.og-topbar2__btn--back { background: var(--og-green-dark); color: var(--og-cream); }
.og-topbar2__btn--en { background: linear-gradient(90deg, #1f7a3d 0%, #2d8f47 50%, #1f7a3d 100%); color: #fff; }
@media (max-width: 640px) {
  .og-topbar2__btn { height: 40px; font-size: 10.5px; letter-spacing: 0.04em; padding: 0 8px; }
}

/* ══════════ HERO ══════════ */
.site-header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
  color: var(--og-cream);
}
.site-header a { text-decoration: none; }

.slider { position: absolute; inset: 0; z-index: 0; }
.slider .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity var(--og-fade-dur) ease;
  filter: brightness(0.95) saturate(1.0);
}
.slider .slide.active { opacity: 1; }
.slider::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,46,26,0.28) 0%, rgba(13,26,13,0.05) 50%, rgba(26,46,26,0.22) 100%);
  pointer-events: none;
}
.hero-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(to top, rgba(13,26,13,0.55) 0%, transparent 100%);
  z-index: 1; pointer-events: none;
}
.slide-dots {
  position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 10px; align-items: center;
}
.slide-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--og-gold); background: transparent; padding: 0;
  transition: background 0.25s, transform 0.25s; cursor: pointer;
}
.slide-dots .dot.active { background: var(--og-gold); transform: scale(1.25); }
.slide-dots .dot:hover { background: rgba(200,168,75,0.5); }

.hero-body { position: relative; z-index: 10; flex: 1; display: flex; align-items: center; padding: 0 40px; }
.hero-content { animation: ogFadeUp 0.85s ease both; }
@keyframes ogFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-eyebrow {
  font-size: 10px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--og-gold); margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--og-gold); flex-shrink: 0; }
.hero-title {
  font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
  font-size: clamp(34px, 5vw, 58px); font-weight: 600; line-height: 1;
  color: var(--og-cream); margin-bottom: 18px;
}
.hero-title em { font-style: italic; color: var(--og-gold-light); }
.hero-desc {
  font-size: clamp(13px, 1.6vw, 15px); font-weight: 300; line-height: 1.3;
  color: rgba(244,240,232,0.76); max-width: 460px;
}

/* ══════════ TOPBAR ══════════ */
.topbar {
  position: fixed; top: 44px; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s, transform 0.35s ease, top 0.35s ease;
}
.topbar.scrolled {
  top: 0;
  background: rgba(13,26,13,0.90);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 40px;
}
.topbar.hidden { transform: translateY(-100%); }
.logo-wrap { display: flex; align-items: center; gap: 12px; color: var(--og-gold-light); }
.logo-img { width: 73px; height: auto; }
.logo-img img { width: 100%; height: auto; }
.burger {
  width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 4px; background: rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════ LINE FAB ══════════ */
.line-fab {
  position: fixed; right: 24px; bottom: 85px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--og-line-green); border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0,185,0,0.38); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.line-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,185,0,0.55); }
.line-fab svg { width: 30px; height: 30px; fill: #fff; display: block; }
.line-fab::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(0,185,0,0.38); animation: ogPulse 2.6s ease-out infinite; }
@keyframes ogPulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.28); opacity: 0; } 100% { opacity: 0; } }

/* ══════════ BTN-MORE ══════════ */
.btn-more {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 26px;
  background: transparent; color: var(--og-cream);
  font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1.5px solid rgba(200,168,75,0.55); border-radius: 2px;
  transition: background 0.22s, border-color 0.22s, color 0.22s; text-decoration: none;
}
.btn-more:hover { background: var(--og-gold); border-color: var(--og-gold); color: var(--og-black); }
.btn-more .arrow { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; transition: transform 0.22s; }
.btn-more:hover .arrow { transform: translateX(3px); }

/* ══════════ LINE LIGHTBOX ══════════ */
.lightbox { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.72); align-items: center; justify-content: center; padding: 20px; }
.lightbox.open { display: flex; }
.lb-card { background: #1e3320; border: 1px solid rgba(200,168,75,0.35); border-radius: 10px; width: 100%; max-width: 400px; overflow: hidden; position: relative; animation: ogLbIn 0.26s cubic-bezier(0.34,1.4,0.64,1) both; color: var(--og-cream); }
@keyframes ogLbIn { from { opacity: 0; transform: scale(0.90) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.lb-bar { background: var(--og-line-green); padding: 20px 24px; display: flex; align-items: center; gap: 14px; }
.lb-bar svg { width: 32px; height: 32px; fill: #fff; flex-shrink: 0; }
.lb-bar-title { font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 0.06em; }
.lb-body { padding: 28px; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; background: rgba(255,255,255,0.18); border: none; border-radius: 50%; color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background 0.18s; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,0.32); }
.lb-text { font-size: 14px; font-weight: 300; line-height: 1.9; color: rgba(244,240,232,0.82); margin-bottom: 24px; }
.lb-text strong { color: var(--og-gold-light); font-weight: 500; }
.lb-body .btn-more { width: 100%; justify-content: center; border-color: var(--og-line-green); color: #5dd85d; padding: 13px 20px; font-size: 13px; }
.lb-body .btn-more:hover { background: var(--og-line-green); border-color: var(--og-line-green); color: #fff; }

/* ══════════ DRAWER ══════════ */
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 90; }
.drawer-overlay.open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; background: #152615; border-left: 1px solid rgba(255,255,255,0.1); z-index: 100; transform: translateX(100%); transition: transform 0.30s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow: hidden; color: var(--og-cream); }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.drawer-logo { font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 20px; font-weight: 600; color: #ffffff; letter-spacing: 0.1em; }
.drawer-x { width: 32px; height: 32px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.18s; flex-shrink: 0; cursor: pointer; }
.drawer-x:hover { background: rgba(255,255,255,0.15); }

/* ── DRAWER NAV：項目が多くてもスクロールして全部見えるように ──
   .drawer は flex-direction:column。head(上)とfoot(下/LINEボタン)を固定し、
   間の .drawer-nav だけを内部スクロールさせる。
   flex:1 1 auto で余白を占有、overflow-y:auto でスクロール、
   min-height:0 で flex 子のスクロールを有効化（これが無いと縮まずに見切れる）。*/
.drawer-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}
.drawer-nav > a { display: flex; align-items: center; padding: 0 28px; height: 52px; color: rgba(244,240,232,0.85); font-size: 14px; font-weight: 300; letter-spacing: 0.12em; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s, color 0.15s, padding-left 0.15s; white-space: nowrap; text-decoration: none; }
.drawer-nav > a:hover { background: rgba(255,255,255,0.06); color: #fff; padding-left: 36px; }
.drawer-foot { padding: 16px 28px 24px; flex-shrink: 0; }
.drawer-foot .btn-more { width: 90%; justify-content: center; border-color: rgba(0,185,0,0.55); color: #6ee86e; padding: 13px 16px; font-size: 12px; gap: 10px; }
.drawer-foot .btn-more:hover { background: var(--og-line-green); border-color: var(--og-line-green); color: #fff; }
.drawer-foot .btn-more .line-ico { fill: currentColor; width: 16px; height: 16px; flex-shrink: 0; }

/* Drawer accordion */
.drawer-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 28px; height: 52px; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(244,240,232,0.85); font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: 0.12em; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.drawer-nav-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.drawer-nav-toggle-icon { flex-shrink: 0; width: 14px; height: 14px; position: relative; margin-left: 8px; }
.drawer-nav-toggle-icon::before, .drawer-nav-toggle-icon::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
.drawer-nav-toggle-icon::before { width: 12px; height: 1.5px; top: 6px; left: 1px; }
.drawer-nav-toggle-icon::after { width: 1.5px; height: 12px; top: 1px; left: 6px; }
.drawer-nav-toggle[aria-expanded="true"] .drawer-nav-toggle-icon::after { transform: rotate(90deg); opacity: 0; }
.drawer-nav-sub { max-height: 0; overflow: hidden; background: rgba(0,0,0,0.18); transition: max-height 0.28s ease; }
.drawer-nav-sub.is-open { max-height: 230px; }
.drawer-nav-sub a { display: flex; align-items: center; padding: 0 28px 0 40px; height: 44px; font-size: 12px; font-weight: 300; letter-spacing: 0.10em; color: rgba(244,240,232,0.55); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s, color 0.15s, padding-left 0.15s; white-space: nowrap; text-decoration: none; }
.drawer-nav-sub a:last-child { border-bottom: none; }
.drawer-nav-sub a:hover { background: rgba(255,255,255,0.05); color: rgba(200,168,75,0.9); padding-left: 48px; }

/* ══════════ HOME-MAIN 見出し ══════════ */
.home-main { width: 96%; margin: 50px auto; color: #000; }
.home-main h2 { position: relative; padding-left: 25px; font-size: 24px; margin-top: 30px; }
.home-main h2::before { position: absolute; content: ''; bottom: -3px; left: 0; width: 0; height: 0; border: none; border-left: solid 15px transparent; border-bottom: solid 15px rgb(200, 221, 176); }
.home-main h2::after { position: absolute; content: ''; bottom: -3px; left: 10px; width: 53%; border-bottom: solid 3px rgb(200, 221, 176); }
.home-main p { font-size: 21px; line-height: 1.3em; margin: 20px 0; }

/* ══════════ FEATURE SECTION（2枚） ══════════ */
.feature-section { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; }
.feature-card { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.fc-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.feature-card:hover .fc-img { transform: scale(1.04); }
.fc-body { position: absolute; bottom: 32px; left: 32px; width: min(55%, 320px); background: #fff; border-radius: 8px; padding: 24px 24px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.18); }
.fc-title { font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; color: #111; line-height: 1.3; margin-bottom: 10px; }
.fc-text { font-size: clamp(11px, 0.85vw, 13px); font-weight: 300; color: #444; line-height: 1.75; margin-bottom: 16px; }
.fc-more { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: #111; text-decoration: none; border-bottom: 1px solid #111; padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; }
.fc-more:hover { color: #4a7a30; border-color: #4a7a30; }
.fc-more svg { width: 14px; height: 9px; flex-shrink: 0; transition: transform 0.2s; }
.fc-more:hover svg { transform: translateX(3px); }

/* ══════════ STRAIN (WORKS) SECTION ══════════ */
.strain-section { background: #fff; padding: 0 0 64px; font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; }
.strain-tabs { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 2px solid #c8ddb0; }
.strain-tab { padding: 18px 12px; background: #eaf4de; border: none; border-right: 1px solid #c8ddb0; font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 20px; font-weight: 400; color: #4a7a30; letter-spacing: 0.04em; cursor: pointer; position: relative; transition: background 0.2s, color 0.2s; }
.strain-tab:last-child { border-right: none; }
.strain-tab.active { background: #c8ddb0; font-weight: 700; color: #2d5a1a; }
.strain-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: #4a7a30; }
.strain-tab:hover:not(.active) { background: #daefc8; }
.strain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 96%; margin: 40px auto 36px; padding: 0; }
.strain-card { background: #fff; border-radius: 6px; }
.card-img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: #ebebeb; border-radius: 6px; margin-bottom: 16px; }
.card-img--empty { aspect-ratio: 4 / 3; }
.card-body { text-align: center; }
.card-name { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 15px; }
.card-btn { display: block; width: 100%; padding: 13px 0; background: #4a7a30; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-align: center; border-radius: 6px; text-decoration: none; transition: background 0.2s; }
.card-btn:hover { background: #3a6020; }
.strain-footer { display: flex; justify-content: flex-end; gap: 16px; width: 96%; margin: 0 auto; padding: 0; }
.strain-all { display: inline-flex; align-items: center; padding: 13px 28px; border: 1.5px solid #4a7a30; border-radius: 4px; background: #fff; color: #4a7a30; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.strain-all:hover { background: #4a7a30; color: #fff; }

/* ══════════ REVIEW SECTION ══════════ */
.section-heading { font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; font-size: 22px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.04em; padding: 0 4%; margin-bottom: 20px; }
.review-section { padding: 80px 0; overflow: hidden; background: #f0f0f0; }
.review-track { display: flex; gap: 20px; overflow-x: auto; padding: 8px 20px 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.review-track::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 300px; scroll-snap-align: start; background: #fff; border-radius: 12px; border: 1px solid #e0e0e0; padding: 20px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; transition: all 0.25s ease; }
.rv-header { display: flex; align-items: center; gap: 12px; }
.rv-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; }
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-meta { flex: 1; }
.rv-name { font-size: 15px; font-weight: 600; color: #1a1a1a; line-height: 1.2; }
.rv-stars { display: flex; gap: 4px; }
.rv-star { width: 18px; height: 18px; flex-shrink: 0; }
.rv-text { font-size: 13px; color: #333; line-height: 1.9; max-height: 100px; overflow: hidden; transition: max-height 0.25s ease; }
.review-card.open .rv-text { max-height: 1000px; }
.rv-seemore { background: none; border: none; padding: 0; font-size: 13px; font-weight: 700; color: #1a1a1a; cursor: pointer; text-align: left; font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; }
.rv-seemore:hover { color: #4a7a30; }
.rv-url-btn { display: inline-block; margin-top: 10px; padding: 6px 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: #4a7a30; border: 1.5px solid #4a7a30; border-radius: 3px; text-decoration: none; transition: background 0.18s, color 0.18s; text-align: center; }
.rv-url-btn:hover { background: #4a7a30; color: #fff; }

/* ══════════ FOOTER ══════════ */
.site-footer { background: #111e11; color: rgba(244,240,232,0.75); font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif; }
.footer-inner { display: flex; gap: 60px; align-items: flex-start; max-width: 1160px; margin: 0 auto; padding: 64px 4% 56px; }
.footer-brand { flex-shrink: 0; width: 160px; }
.footer-logo { width: 100px; height: auto; }
.footer-logo img { width: 100%; height: auto; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 18px 4%; text-align: center; }
.footer-copy { font-size: 11px; font-weight: 300; color: rgba(244,240,232,0.35); letter-spacing: 0.06em; }

/* フッターナビ（自前・footer-nav 不使用） */
.footer-nav { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; }
.footer-col { min-width: 0; }
.footer-col-title { font-size: 13px; font-weight: 700; color: var(--og-gold-light); letter-spacing: 0.08em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(200,168,75,0.3); }
.footer-col-title + .footer-col-title { margin-top: 28px; }
.footer-col ul { list-style: none; margin: 0 0 8px; padding: 0; }
.footer-col li { margin: 0 0 10px; }
.footer-col a { font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(244,240,232,0.72); text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: var(--og-gold-light); }

/* ══════════ WordPress 幅リセット ══════════ */
.feature-section, .strain-section, .review-section, .site-footer {
  max-width: none !important; width: 100% !important; box-sizing: border-box;
}

/* ══════════ MOBILE (≤640px) ══════════ */
@media (max-width: 640px) {
  .topbar { padding: 16px 18px; top: 40px; }
  .topbar.scrolled { padding: 10px 18px; top: 0; }
  .logo-img { width: 60px; }
  .hero-body { padding: 0 20px; }
  .hero-title { font-size: clamp(28px, 9vw, 38px); }
  .slide-dots { bottom: 108px; }
  .line-fab { right: 20px; bottom: 85px; width: 50px; height: 50px; }
  .line-fab svg { width: 26px; height: 26px; }

  .feature-section { grid-template-columns: 1fr; }
  .feature-card { aspect-ratio: auto; display: flex; flex-direction: column; }
  .fc-img { position: relative; height: 220px; flex-shrink: 0; }
  .fc-body { position: relative; bottom: auto; left: auto; width: 100%; border-radius: 0; box-shadow: none; border-top: 1px solid #eee; padding: 20px 20px 24px; }
  .fc-title { font-size: 17px; }
  .fc-text { font-size: 13px; }

  .strain-tab { font-size: 15px; padding: 14px 6px; }
  .strain-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 0 20px 12px; margin: 24px 0 28px; scrollbar-width: none; }
  .strain-grid::-webkit-scrollbar { display: none; }
  .strain-card { flex: 0 0 72vw; scroll-snap-align: start; }
  .card-name { font-size: 18px; }
  .strain-footer { flex-direction: column; align-items: stretch; padding: 0 20px; gap: 10px; }
  .strain-all { justify-content: center; padding: 13px 16px; }

  .review-section { padding: 56px 0; }
  .review-track { gap: 14px; padding: 8px 16px 16px; }
  .review-card { flex: 0 0 80vw; padding: 18px; }
  .section-heading { font-size: 18px; }

  .footer-inner { flex-direction: column; gap: 36px; padding: 48px 6% 40px; }
  .footer-brand { width: 100%; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}


/* ════════════════════════════════════════════════════════════════
   ▼▼▼ tag-ganjabonsai.php 用 追記ブロック（About レイアウト流用）▼▼▼
   差し替え時はこのコメント間をまるごと置換すればOK
════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO ── */
.page-hero {
  position: relative; min-height: 46vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(13,26,13,.72), rgba(13,26,13,.12)); }
.page-hero-inner { position:relative; z-index:1; max-width:1160px; width:100%; margin:0 auto; padding:0 4% 48px; color: var(--og-cream); }
.breadcrumb { font-size:12px; letter-spacing:.06em; margin:0 0 12px; color: rgba(244,240,232,.9); }
.breadcrumb a { color: var(--og-cream); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.page-title { font-size: clamp(30px,5vw,48px); font-weight:700; letter-spacing:.04em; margin:0; color: var(--og-cream); }

/* ── PAGE WRAP / ABOUT MAIN ── */
.page-wrap { background:#fff; }
.about-main {
  max-width:1160px; margin:0 auto; padding:80px 4% 100px; color:#2b2b28;
  font-family: Lato, "Montserrat", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}
.about-block { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:96px; }
.about-block:last-child { margin-bottom:0; }
.about-block.img-right .about-slider { order:2; }
.about-block.img-right .about-text { order:1; }

.about-eyebrow { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color: var(--og-gold); font-weight:600; margin:0 0 12px; }
.about-section-title { font-size: clamp(22px,3vw,30px); font-weight:700; color: var(--og-green-dark); letter-spacing:.02em; line-height:1.4; margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid #e3ddd1; }
.about-section-body p { margin:0; font-size:15px; line-height:1.95; color:#3a3a36; }
.about-section-body strong { color: var(--og-green-dark); font-weight:700; }

.sample-btn { display:inline-flex; align-items:center; gap:8px; margin-top:24px; padding:12px 28px; border:1px solid #4a7a30; border-radius:999px; background:transparent; color:#4a7a30; font-size:13px; letter-spacing:.04em; font-weight:600; text-decoration:none; transition:background .2s,color .2s; }
.sample-btn:hover { background:#4a7a30; color:#fff; }

/* ── SLIDER ── */
.about-slider { position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#e7e2d6; box-shadow:0 10px 30px rgba(26,46,26,.12); }
.about-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity var(--og-fade-dur) ease; }
.about-slide.active { opacity:1; }
.slider-btn { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:rgba(255,255,255,.85); cursor:pointer; padding:0; transition:background .2s; }
.slider-btn:hover { background:#fff; }
.slider-btn.prev { left:12px; }
.slider-btn.next { right:12px; }
.slider-btn svg { width:14px; height:14px; fill:none; stroke: var(--og-green-dark); stroke-width:2; }
.slider-dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:7px; }
.slider-dots span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:background .2s; }
.slider-dots span.active { background:#fff; }

@media (max-width:820px){
  .about-block { grid-template-columns:1fr; gap:28px; margin-bottom:60px; }
  .about-block.img-right .about-slider, .about-block.img-right .about-text { order:initial; }
  .about-main { padding:56px 5% 72px; }
}
/* ════════════════════════════════════════════════════════════════
   ▼▼▼ tag-ganjabonsai 追記ブロック（mod1: more開閉 / mod2: 記事一覧）▼▼▼
   ※ 以前の追記（mod1単体 / .gb-pagination 版）が入っていれば消して、これに置換
   ※ ページネーションは .gb-articles 配下に限定（他ページの the_pagination には不干渉）
════════════════════════════════════════════════════════════════ */

/* ── mod1: more 開閉 ── */
.gb-collapse { position:relative; overflow:hidden; }
.gb-collapse.is-open { max-height:none !important; }
.gb-fade { position:absolute; left:0; right:0; bottom:0; height:200px; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 88%); pointer-events:none; }
.gb-collapse.is-open .gb-fade { display:none; }
.gb-more { text-align:center; margin:4px 0 8px; }
.gb-more-btn { display:inline-flex; align-items:center; gap:10px; padding:13px 48px; border:1px solid var(--og-green-dark); border-radius:999px; background:#fff; color:var(--og-green-dark); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; cursor:pointer; transition:background .2s,color .2s; }
.gb-more-btn:hover { background:var(--og-green-dark); color:#fff; }

/* ── mod2: 記事一覧 見出し ── */
.gb-articles { width:96%; margin:48px auto 0; }
.gb-list-head { text-align:center; }
.gb-list-head .gb-list-eyebrow { display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--og-gold); font-weight:600; margin-bottom:6px; }
.gb-list-head h2 { font-size:clamp(22px,3vw,30px); font-weight:700; color:var(--og-green-dark); margin:0; }
.gb-noposts { text-align:center; color:#888; padding:24px 0 40px; }

/* ── mod2: ページネーション（このタグページ限定スコープ）── */
.gb-articles .pagination { width:100%; margin:8px auto 44px; }
.gb-articles .pagination ul.page-numbers { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.gb-articles .pagination ul.page-numbers li { list-style:none; margin:0; padding:0; }
.gb-articles .pagination a.page-numbers,
.gb-articles .pagination span.page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border:1px solid #d8e0cf; border-radius:8px; background:#fff; color:var(--og-green-dark); font-size:15px; font-weight:600; line-height:1; text-decoration:none; transition:background .2s,color .2s,border-color .2s; }
.gb-articles .pagination a.page-numbers:hover { background:#eaf4de; border-color:#4a7a30; }
.gb-articles .pagination span.page-numbers.current { background:#4a7a30; border-color:#4a7a30; color:#fff; }
.gb-articles .pagination span.page-numbers.dots { border:none; background:transparent; min-width:auto; padding:0 6px; }

/* ── mod3: 記事グリッド（盆栽 / Aroi Mak）1行3記事・縦積み6記事 ──
   横スクロール（スマホの .strain-grid flex/overflow-x:auto）を打ち消す。
   .gb-articles 配下のみにスコープ＝トップの .strain-grid には不干渉。
   このブロックは og-style.css の中で元の @media(max-width:640px) .strain-grid
   より後ろにあるため、後勝ちで確実に効く。*/
.gb-articles .strain-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  width: 96% !important;
  margin: 24px auto 36px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  scroll-snap-type: none !important;
}
.gb-articles .strain-grid::-webkit-scrollbar { display: none; }
.gb-articles .strain-card {
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
  scroll-snap-align: none !important;
}
@media (max-width: 900px) {
  .gb-articles .strain-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .gb-articles .strain-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 92% !important;
    margin: 24px auto 32px !important;
    padding: 0 !important;
    overflow-x: visible !important;
    flex-wrap: wrap !important;
  }
  .gb-articles .strain-card {
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ▲▲▲ tag-ganjabonsai 追記ブロック ここまで ▲▲▲ */

/* ════════════════════════════════════════════════════════════════════════
   PARTNER LOGO SLIDER
════════════════════════════════════════════════════════════════════════ */
.partner-section {
  padding: 56px 0;
  background: var(--green-dark, #1a2e1a);
  overflow: hidden;
}

.partner-label {
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200,168,75,0.6);
  margin-bottom: 32px;
}

/* トラックラッパー：両端フェード */
.partner-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.partner-track-wrap::before,
.partner-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.partner-track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--green-dark, #1a2e1a), transparent);
}
.partner-track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--green-dark, #1a2e1a), transparent);
}

/* スライドするトラック — アニメーションはJSで制御 */
.partner-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
}

/* ロゴ1件 */
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 35px;
  border-right: 1px solid rgba(200,168,75,0.15);
  flex-shrink: 0;
}

.partner-logo img {
  height: 90px;
  width: auto;
  object-fit: contain;
	border-radius: 30px;
}
.partner-logo:hover img { opacity: 1; }

@media (max-width: 768px) {
  .partner-track-wrap::before,
  .partner-track-wrap::after { width: 60px; }
  .partner-logo { padding: 0 28px; }
  .partner-logo img { height: 85px; }
  .partner-section { padding: 40px 0; }
}

/* SAMPLE ボタン */
.sample-btn {
  display: block;
  width: 90%;
  margin-top: 20px;
  padding: 16px 24px;
  border: 1.5px solid #4a7a30;
  border-radius: 4px;
  background: #fff;
  color: #4a7a30;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.sample-btn:hover {
  background: #4a7a30;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   OG販売店舗カード（横3列・折り返し / アイコンはCSS3描画）
   ※ og-style.css の末尾に追記
   ※ .og-shops 配下にスコープ。他テンプレートに不干渉
   ※ 画像不使用。Instagram / WEB アイコンは疑似要素で描画
════════════════════════════════════════════════════════════════ */

.og-shops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 96%;
  max-width: 1160px;
  margin: 28px auto 64px;
}

/* ── カード本体（添付デザイン: 白地・薄グレー枠・角丸・影なし）── */
.og-shop-card {
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── ヘッダー（店名 + SNSアイコン）── */
.og-shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.og-shop-name {
  font-size: 21px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 0;
  border: none;
}
/* 既存テーマ h3 の装飾（点線ボーダー等）を打ち消し */
.og-shop-name::before,
.og-shop-name::after { content: none !important; }

.og-shop-sns {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── SNSアイコン共通（CSS3描画 / 外部画像なし）── */
.og-ico {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  text-decoration: none;
  transition: opacity 0.18s;
}
.og-ico:hover { opacity: 0.55; }

/* Instagram：角丸四角 + 中央の円 + 右上のドット */
.og-ico--insta {
  border: 2.4px solid #111;
  border-radius: 9px;
}
.og-ico--insta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  border: 2.4px solid #111;
  border-radius: 50%;
}
.og-ico--insta::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 3.2px; height: 3.2px;
  background: #111;
  border-radius: 50%;
}

/* WEB：ブラウザウィンドウ風（上バー + 下に本文ライン）*/
.og-ico--web {
  border: 2.4px solid #111;
  border-radius: 6px;
  overflow: hidden;
}
.og-ico--web::before {
  /* 上部バー */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: #111;
}
.og-ico--web::after {
  /* 本文ライン（白地に黒線3本をグラデで表現）*/
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  top: 13px;
  height: 9px;
  background:
    linear-gradient(#111 1.6px, transparent 0) 0 0 / 100% 4px repeat-y;
}

/* ── タグ（アウトラインのピル）── */
.og-shop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.og-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid #d2d2d2;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── エリア（太字見出し）── */
.og-shop-area {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 2px 0 0;
}

/* ── 住所 + MAPリンク ── */
.og-shop-addr {
  font-size: 15px !important;
  font-weight: 400;
  color: #333;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.og-shop-map {
  color: #2563a8;
  text-decoration: underline;
  white-space: nowrap;
}
.og-shop-map:hover { color: #1a4a82; }

/* ── 営業時間 ── */
.og-shop-hours {
  font-size: 15px !important;
  font-weight: 400;
  color: #333;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ════════════ レスポンシブ ════════════ */
@media (max-width: 980px) {
  .og-shops { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .og-shops {
    grid-template-columns: 1fr;
    width: 92%;
    gap: 18px;
    margin: 24px auto 48px;
  }
  .og-shop-card { padding: 22px 20px 20px; }
  .og-shop-name { font-size: 19px; }
}

/* ── 店舗紹介記事リンク（OG Times）── */
.og-shop-article {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 18px;
  border: 1px solid #16a34a;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.18s, color 0.18s;
}
.og-shop-article::after {
  content: "→";
  margin-left: 8px;
  font-weight: 700;
}
.og-shop-article:hover {
  background: #16a34a;
  color: #fff;
}

/* SNSアイコン行が無いカードでも見出しが揃うよう、空でない時のみ余白確保 */
.og-shop-head:has(.og-shop-sns) { gap: 16px; }