/* =========================================================
   VERAGOLF THEME (cleaned / single source of truth)
   - グローバルメニュー縦中央
   - hoverでサイズ不変（色だけ変える）
   - 80%相当：font-size/padding/gap で調整（scale禁止）
   - HOMEのみ：ヘッダー透明 + ヒーロー背景フルブリード（オーバーレイ無し）
========================================================= */

/* =========================
   1) Theme variables
========================= */
:root{
  --vg-bg: #F7F4EE;           /* ヘッダー背景（生成り） */
  --vg-surface: #FFFFFF;
  --vg-muted-surface: #F3F3F3;
  --vg-text: #4A4A4A;
  --vg-accent: #6B6B6B;
  --vg-accent-dark: #3F3F3F;
  --vg-accent-light: #9A9A9A;
  --vg-border: #DDDDDD;
}

/* =========================
   2) Base
========================= */
html, body{
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--vg-text);
}

a{ color: var(--vg-text); text-decoration: none; }
a:hover{ color: var(--vg-accent); }

/* Bootstrapのdanger等を無効化（赤残り対策） */
.text-danger, .bg-danger, .border-danger{
  color: var(--vg-text) !important;
  background: transparent !important;
  border-color: var(--vg-border) !important;
}

/* =========================
   3) Header / Global menu (DEFAULT: 下層)
========================= */
.site-header{
  background: var(--vg-bg) !important;
  border-bottom: 1px solid var(--vg-border) !important;
  padding: 10px 0 !important;
}

.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}

/* ロゴ（現状 100px でOKとのことなので固定） */
.site-header a{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header img{
  height: 60px !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}

/* nav 右寄せ + はみ出し対策 */
.site-header .nav-menu{
  flex: 1 1 auto;
  min-width: 0;                 /* 重要：右がはみ出すのを防ぐ */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;                    /* 80%相当 */
  overflow: hidden;             /* はみ出し防止 */
}

/* ===== メニューボタン（高さ固定で縦中央 / hoverでサイズ不変） ===== */
.site-header .nav-link,
.site-header .header-login-btn,
.site-header .header-register-btn{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;          /* 縦中央 */
  justify-content: center;
  height: 40px;                 /* 80%相当 */
  line-height: 1;               /* 上寄り防止 */
  padding: 0 14px;              /* 80%相当 */
  border-radius: 999px;
  border: 1px solid var(--vg-accent);
  background: transparent;
  color: var(--vg-text) !important;
  font-weight: 600;
  font-size: 13px;              /* 80%相当 */
  letter-spacing: 0.2px;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* hover/focus/active：色だけ（サイズ変更しない） */
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active,
.site-header .header-login-btn:hover,
.site-header .header-login-btn:focus{
  background: var(--vg-accent) !important;
  color: #fff !important;
  border-color: var(--vg-accent) !important;
}

/* 無料会員登録（塗り） */
.site-header .header-register-btn{
  background: var(--vg-accent) !important;
  border-color: var(--vg-accent) !important;
  color: #fff !important;
}
.site-header .header-register-btn:hover,
.site-header .header-register-btn:focus{
  background: var(--vg-accent-dark) !important;
  border-color: var(--vg-accent-dark) !important;
}

/* nav-linkの疑似要素を完全無効（過去残骸） */
.site-header .nav-link::after{ content: none !important; }

/* =========================
   4) Buttons / Forms
========================= */
.btn{ border-radius: 999px !important; font-weight: 600; }

.btn-primary, .btn-danger{
  background: var(--vg-accent) !important;
  border-color: var(--vg-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-danger:hover{
  background: var(--vg-accent-dark) !important;
  border-color: var(--vg-accent-dark) !important;
}
.btn-outline-primary, .btn-outline-danger{
  color: var(--vg-accent) !important;
  border-color: var(--vg-accent) !important;
}
.btn-outline-primary:hover, .btn-outline-danger:hover{
  background: var(--vg-accent) !important;
  border-color: var(--vg-accent) !important;
  color: #fff !important;
}
.btn:focus, .btn:focus-visible{ box-shadow: none !important; outline: none !important; }

.form-control:focus, .form-select:focus{
  border-color: var(--vg-accent);
  box-shadow: none;
}

/* =========================
   5) Cards / badges
========================= */
.card{ border: 1px solid var(--vg-border); background: var(--vg-surface); }
.bg-light{ background-color: var(--vg-muted-surface) !important; }

.badge, .badge.bg-primary, .badge.bg-success, .badge.bg-danger{
  background: var(--vg-accent-light) !important;
  color: #fff !important;
  border: none !important;
}

/* =========================
   6) Influencer carousel
========================= */
.influencer-carousel{ display: flex; align-items: center; gap: 0.5rem; }
.influencer-arrow{
  background: transparent;
  border: 1px solid var(--vg-border);
  border-radius: 999px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  color: var(--vg-text);
  transition: background-color .15s ease, color .15s ease;
}
.influencer-arrow:hover{ background: rgba(0,0,0,0.06); color: var(--vg-accent-dark); }

.influencer-track{
  display: flex; gap: 0.6rem;
  overflow-x: auto; scroll-behavior: smooth;
  padding: 0.2rem 0;
}
.influencer-track::-webkit-scrollbar{ height: 6px; }
.influencer-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}

.influencer-card-small{
  min-width: 120px; max-width: 140px;
  border-radius: 10px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--vg-border);
  transition: transform .15s ease;
}
.influencer-card-small:hover{ transform: scale(1.03); }

.influencer-card-small img,
.influencer-card-small .noimage-square{
  width: 100%;
  height: 95px;
  object-fit: cover;
  display: block;
}
.noimage-square{
  background: #f3f3f3;
  color: #888;
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}

.influencer-body-small{ padding: 4px 6px; }
.influencer-body-small .name{
  font-size: 0.78rem; font-weight: 600;
  margin-bottom: 2px; color: #222; line-height: 1.1;
}
.influencer-body-small .meta{
  font-size: 0.65rem; color: #777; line-height: 1.1;
}

/* =========================
   7) Featured course tabs (home)
========================= */
.course-tabs.nav-tabs{
  border-bottom: 1px solid #e9e9e9 !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  padding-bottom: 6px !important;
}
.course-tabs.nav-tabs::-webkit-scrollbar{ height: 6px; }
.course-tabs.nav-tabs::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}

.course-tabs.nav-tabs .nav-link{
  border: 1px solid var(--vg-accent) !important;
  background: transparent !important;
  color: var(--vg-text) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.course-tabs.nav-tabs .nav-link:hover,
.course-tabs.nav-tabs .nav-link:focus{
  background: rgba(0,0,0,0.06) !important;
  color: var(--vg-text) !important;
}
.course-tabs.nav-tabs .nav-link.active{
  background: var(--vg-accent) !important;
  color: #fff !important;
  border-color: var(--vg-accent) !important;
}
.course-tabs.nav-tabs .nav-link::after{ content: none !important; }

.course-thumb{ height: 120px; object-fit: cover; }
.course-title{ font-size: 0.95rem; line-height: 1.2; min-height: 2.4em; }
.course-card-small .card-body{ min-height: 80px; }

/* =========================
   8) Footer
========================= */
footer{
  background: var(--vg-bg);
  color: var(--vg-text);
  border-top: 1px solid var(--vg-border);
}

/* =========================================================
   9) TOP ONLY (HOME)
   - bodyに .is-home を付けること
   - ヘッダー透明
   - ヒーロー背景フルブリード（オーバーレイ無し）
========================================================= */

/* HOME: header overlay */
.is-home .site-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border-bottom: none !important;
}

/* HOME: メニューは透明背景のまま（ボタン色はVG） */
.is-home .site-header .nav-menu{ overflow: visible; } /* 見切れ防止 */

/* HOME HERO: full-bleed / no overlay */
.is-home .home-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 620px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  /* ヘッダーが上に重なるので余白 */
  padding-top: 140px;
  padding-bottom: 80px;
}

/* オーバーレイ完全禁止 */
.is-home .home-hero::before,
.is-home .home-hero::after{
  content: none !important;
}

/* ヒーロー内はサイト幅で配置 */
.is-home .home-hero__inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 右カードは白のまま */
.is-home .home-hero__card{
  background: #fff;
  border: 1px solid var(--vg-border);
  border-radius: 12px;
}

/* スマホ調整 */
@media (max-width: 575px){
  .site-header img{ height: 72px !important; }
  .site-header .nav-menu{ gap: 8px; }
  .site-header .nav-link,
  .site-header .header-login-btn,
  .site-header .header-register-btn{
    height: 38px;
    font-size: 12px;
    padding: 0 12px;
  }
  .is-home .home-hero{
    min-height: 540px;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}

/* ===== HOME HERO typography adjust ===== */
.home-hero__title{
  /* 大きすぎる → 70%相当まで落とす（レスポンシブ） */
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;

  /* 1行固定（はみ出す場合は…で省略） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「このページは現在開発中です。」＝70%相当 */
.home-hero__lead{
  font-size: 0.7em;      /* 指示通り70% */
  margin-bottom: 14px;
}

/* 下の説明文は現状サイズ維持 */
.home-hero__desc{
  font-size: 1em;
  line-height: 1.8;
}

/* 画面が狭いときは1行固定を解除（スマホで詰まるため） */
@media (max-width: 575px){
  .home-hero__title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}


/* =========================================
   HOME HERO title 強制サイズ調整（50%）
========================================= */

/* メインタイトル：完全に半分 */
.home-hero__title{
  font-size: 22px !important;     /* ← 半分サイズ */
  font-weight: 600;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;

  /* 1行固定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「このページは現在開発中です。」＝さらに控えめ */
.home-hero__lead{
  font-size: 0.6em !important;
  margin-bottom: 10px !important;
}

/* 下の説明文は現状維持 */
.home-hero__desc{
  font-size: 1em !important;
  line-height: 1.8;
}

/* スマホだけは2行まで許可 */
@media (max-width: 575px){
  .home-hero__title{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* =========================
   HOME HERO 左テキスト位置調整
========================= */

/* 左テキスト全体のラッパー */
.home-hero__inner .col-lg-8 {
  padding-left: 48px !important;   /* ← 右へ寄せる */
}

/* 説明文の横幅を制限 */
.home-hero__inner .col-lg-8 p {
  padding-right: : 20px !important;   /* ← 右へ寄せる */

  max-width: 520px;                /* ← 横幅ストップ */
}
/* HOME HERO 説明文サイズ調整 */
.home-hero__desc,
.home-hero__inner .col-lg-8 p {
  font-size: 1.0rem !important;   /* ← 約90% */
  line-height: 1.8;
}

/* =========================
   HOME HERO 右カード 縮小
========================= */

.home-hero__card {
  padding: 20px !important;       /* ← 元より少し小さく */
}

.home-hero__card h2 {
  font-size: 0.9rem !important;
}

.home-hero__card ul {
  font-size: 0.85rem !important;
}

.home-hero__card .btn {
  font-size: 0.85rem !important;
  padding: 10px 16px !important;
}

/* =========================
   HOME HERO 左テキスト 微調整（+20px）
========================= */

/* 左テキスト全体をさらに右へ */
.is-home .home-hero__inner .col-lg-8 {
  padding-left: 68px !important; /* 48px → 68px（+20px） */
}

/* 青選択風の説明文ブロックも統一 */
.is-home .home-hero__desc,
.is-home .home-hero__inner .col-lg-8 p {
  max-width: 520px;
}


/* =========================
   Mobile hamburger (VERAGOLF)
========================= */
.site-nav-toggle{
  height: 40px;
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-nav-toggle__icon{
  width: 18px;
  height: 2px;
  background: var(--vg-text);
  position: relative;
  display: block;
  border-radius: 2px;
}
.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--vg-text);
  border-radius: 2px;
}
.site-nav-toggle__icon::before{ top: -6px; }
.site-nav-toggle__icon::after{ top: 6px; }

/* =========================
   Offcanvas theme
========================= */
.offcanvas{
  background: var(--vg-bg);
  color: var(--vg-text);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--vg-border);
}
.offcanvas .btn-close{
  filter: grayscale(1);
}

/* offcanvas内ボタンの統一感 */
.offcanvas .btn{
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   GLOBAL MENU 80% SIZE ADJUST (FINAL)
   - scale不使用
   - hover時サイズ不変
========================================================= */

/* メニュー全体の間隔を詰める */
.site-header .nav-menu {
  gap: 8px; /* 以前より少し狭く */
}

/* メニューボタン共通（80%相当） */
.site-header .nav-link,
.site-header .header-login-btn,
.site-header .header-register-btn {
  height: 36px;          /* 44px → 36px（約80%） */
  padding: 0 12px;       /* 横余白を縮小 */
  font-size: 12px;       /* 13–14px → 12px */
  border-radius: 999px;  /* 形は維持 */
  line-height: 1;        /* 縦ズレ防止 */
}

/* 無料会員登録だけ少しだけ強調（でも同サイズ） */
.site-header .header-register-btn {
  padding: 0 14px;
}

/* hover / active 時もサイズ固定 */
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active,
.site-header .header-login-btn:hover,
.site-header .header-register-btn:hover {
  height: 36px;
  padding: 0 12px;
  font-size: 12px;
}


/* =========================================================
   注目ゴルフ場：エリアタブ & 評価/コスパ切替（VERAGOLF統一）
========================================================= */

/* エリアタブ（東京・千葉・茨城…） */
.course-tabs .nav-link {
  background: #fff !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-accent) !important;
  font-weight: 600;
}

/* エリアタブ：active */
.course-tabs .nav-link.active {
  background: var(--vg-accent) !important;
  color: #fff !important;
  border-color: var(--vg-accent) !important;
}

/* 評価 / コスパ トグル */
.course-mode-btn {
  background: #fff !important;
  color: var(--vg-text) !important;
  border: 1px solid var(--vg-accent) !important;
  font-weight: 600;
}

/* 評価 / コスパ active（← 青を完全排除） */
.course-mode-btn.active {
  background: var(--vg-accent) !important;
  color: #fff !important;
  border-color: var(--vg-accent) !important;
}

/* hover（サイズ不変） */
.course-mode-btn:hover {
  background: rgba(107,107,107,0.12) !important;
  color: var(--vg-text) !important;
}

/* =========================================================
   Mobile: ハンバーガー + オフキャンバス（VERAGOLF）
========================================================= */

.hamburger-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--vg-accent);
  background: rgba(255,255,255,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hamburger-icon{
  width: 18px;
  height: 12px;
  position: relative;
  display: block;
}
.hamburger-icon::before,
.hamburger-icon::after,
.hamburger-icon{
  background: none;
}
.hamburger-icon::before,
.hamburger-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vg-text);
  border-radius: 2px;
}
.hamburger-icon::before{ top: 0; }
.hamburger-icon::after{ bottom: 0; }
.hamburger-icon{
  border-top: 2px solid var(--vg-text);
  padding-top: 0;
}

/* offcanvas */
.mobile-nav{
  background: #fff;
}
.mobile-nav .offcanvas-header{
  border-bottom: 1px solid var(--vg-border);
}
.mobile-nav__title{
  font-weight: 700;
  color: var(--vg-text);
}
.mobile-nav__list{
  display: grid;
  gap: 10px;
}
.mobile-nav__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--vg-border);
  color: var(--vg-text);
  background: #fff;
}
.mobile-nav__item:hover{
  background: rgba(0,0,0,0.04);
}
.mobile-nav__item--primary{
  border-color: var(--vg-accent);
  background: var(--vg-accent);
  color: #fff;
}
.mobile-nav__item--primary:hover{
  background: var(--vg-accent-dark);
  color: #fff;
}
.mobile-nav__divider{
  height: 1px;
  background: var(--vg-border);
  margin: 6px 0;
}

/* HOME: ヘッダーが透明なのでハンバーガーも透明上で見えるように */
.is-home .hamburger-btn{
  background: rgba(247,244,238,0.35);
}

/* =========================================================
   Mobile: 注目ゴルフ場タブ横スクロールを強化
========================================================= */
@media (max-width: 991.98px){
  .course-tabs.nav-tabs{
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .course-tabs.nav-tabs .nav-item{
    scroll-snap-align: start;
  }
}
/* =========================================
   ゴルフ情報カード（一覧ページ）
========================================= */

/* カード全体 */
.info-card,
.golf-info-card {
  border: 1px solid var(--vg-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 見出しエリア（薄いグレー背景） */
.info-card .card-body:first-child,
.golf-info-card .card-body:first-child {
  background-color: #f4f4f4;          /* 薄いグレー */
  border-bottom: 1px solid var(--vg-border);
}

/* 見出しタイトル */
.info-card h3,
.golf-info-card h3 {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--vg-text);
}

/* 説明文 */
.info-card p,
.golf-info-card p {
  color: #666;
  line-height: 1.6;
}

/* フッター（ボタンエリア） */
.info-card .card-footer,
.golf-info-card .card-footer {
  background: #fff;                   /* ボタン背景は白 */
  padding-top: 16px;                  /* 上下 +10px */
  padding-bottom: 16px;
}

/* 一覧を見るボタン */
.info-card .btn,
.golf-info-card .btn {
  background: #ffffff;
  border: 1px solid #bdbdbd;           /* ちょうど良い薄グレー */
  color: #555;
  font-weight: 600;
  padding-top: 10px;                   /* 上下余白拡張 */
  padding-bottom: 10px;
  border-radius: 999px;
}

/* hover */
.info-card .btn:hover,
.golf-info-card .btn:hover {
  background: #f0f0f0;
  border-color: #a5a5a5;
  color: #333;
}


/* =========================================
   /info（ゴルフ情報一覧）専用 上書き最優先
========================================= */

.info-index .card{
  border: 1px solid var(--vg-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* 見出しエリア（薄いグレー） */
.info-index .card .card-body{
  background: #f4f4f4 !important;
  border-bottom: 1px solid var(--vg-border) !important;
}

/* ボタンエリア（白）＋上下余白10px拡張 */
.info-index .card .card-footer{
  background: #ffffff !important;
  padding-top: 16px !important;   /* 既定より広め */
  padding-bottom: 16px !important;
}

/* 「一覧を見る」ボタン：白背景＋薄グレー枠 */
.info-index .card .card-footer .btn{
  background: #ffffff !important;
  border: 1px solid #bdbdbd !important;
  color: #555 !important;
  font-weight: 600 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-radius: 999px !important;
}

/* hover */
.info-index .card .card-footer .btn:hover{
  background: #f0f0f0 !important;
  border-color: #a5a5a5 !important;
  color: #333 !important;
}

/* =========================================
   TOP（ホーム）ゴルフ情報カード 微調整
========================================= */

/* トップではカード間の余白を少し広く */
.info-index--home .card{
  margin-bottom: 6px;
}

/* 見出し背景：info一覧と同じ薄グレー */
.info-index--home .card .card-body{
  background: #f4f4f4 !important;
}

/* トップのボタンはやや軽め（視線を奪いすぎない） */
.info-index--home .card .card-footer .btn{
  border-color: #c8c8c8 !important;
  color: #666 !important;
}

/* hoverも控えめ */
.info-index--home .card .card-footer .btn:hover{
  background: #f3f3f3 !important;
  border-color: #b0b0b0 !important;
  color: #333 !important;
}

/* =========================================
   HEADER FIX: ロゴにメニューが食い込む問題の強制解消
   ※ style.css の末尾に追記（最優先で勝たせる）
========================================= */

/* ヘッダー内の「ロゴ枠」と「メニュー枠」を明確に分離 */
.site-header .container{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 20px !important; /* ロゴとメニューの間を確保 */
}

/* ロゴ側（最初のa）に幅を確保して、絶対に潰れないようにする */
.site-header .container > a{
  flex: 0 0 auto !important;
  min-width: 320px !important;   /* ロゴが乗る最低幅（必要なら 280〜360で調整） */
  max-width: 420px !important;
  display: flex !important;
  align-items: center !important;
}

/* ロゴ画像がはみ出さないように */
.site-header .container > a img{
  max-width: 100% !important;
  height: 80px !important;       /* いまの運用に合わせて */
  width: auto !important;
  display: block !important;
}

/* メニュー側は右寄せ固定＋左にはみ出させない */
.site-header .nav-menu{
  margin-left: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;       /* ここが無いと食い込みやすい */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;   /* 右側で切る（ロゴ側へ侵入させない） */
}

/* HOME（ヘッダー透明）でも同じく分離を維持 */
.is-home .site-header .nav-menu{
  overflow: hidden !important;
}

/* =========================================================
   HEADER MENU FINAL SHRINK (80% of current)
   - 消えない
   - はみ出さない
   - hoverでサイズ変化なし
========================================================= */

/* ヘッダー全体の間隔を少し詰める */
.site-header{
  padding: 8px 0 !important;
}

/* ロゴ側：最低幅を縮小（重要） */
.site-header .container > a{
  min-width: 260px !important;   /* ← 320 → 260 */
  max-width: 360px !important;
}

/* nav-menu：さらに詰める */
.site-header .nav-menu{
  gap: 8px !important;           /* ← 10 → 8 */
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ===== メニューボタン：80%化 ===== */
.site-header .nav-link,
.site-header .header-login-btn,
.site-header .header-register-btn{
  height: 34px !important;       /* ← 40 → 34 */
  padding: 0 11px !important;    /* ← 14 → 11 */
  font-size: 11px !important;    /* ← 13 → 11 */
  letter-spacing: 0.1px !important;
  border-width: 1px !important;
}

/* hover / active でもサイズは絶対に変えない */
.site-header .nav-link:hover,
.site-header .nav-link:focus,
.site-header .nav-link.active,
.site-header .header-login-btn:hover,
.site-header .header-login-btn:focus,
.site-header .header-register-btn:hover,
.site-header .header-register-btn:focus{
  height: 34px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}

/* 無料会員登録ボタンも完全一致させる */
.site-header .header-register-btn{
  height: 34px !important;
  padding: 0 13px !important;    /* 少しだけ存在感 */
  font-size: 11px !important;
}

/* HOME（透明ヘッダー）でも同じ挙動に */
.is-home .site-header .nav-link,
.is-home .site-header .header-login-btn,
.is-home .site-header .header-register-btn{
  height: 34px !important;
  font-size: 11px !important;
  padding: 0 11px !important;
}


/* =========================
   Mobile hamburger + offcanvas (VERAGOLF)
   ※ style.css の末尾に追記
========================= */
.vg-hamburger{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--vg-accent);
  background: rgba(255,255,255,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vg-hamburger__icon{
  width: 18px;
  height: 2px;
  background: var(--vg-text);
  position: relative;
  display: block;
}
.vg-hamburger__icon::before,
.vg-hamburger__icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: var(--vg-text);
}
.vg-hamburger__icon::before{ top:-6px; }
.vg-hamburger__icon::after{ top:6px; }

.vg-offcanvas{
  background: var(--vg-bg);
}

.vg-offcanvas__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--vg-accent);
  color: var(--vg-text);
  background: transparent;
  font-weight: 600;
}

.vg-offcanvas__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--vg-accent);
  color: #fff;
  background: var(--vg-accent);
  font-weight: 600;
}

.vg-offcanvas__link:hover,
.vg-offcanvas__link:focus{
  background: rgba(0,0,0,0.06);
  color: var(--vg-text);
}

.vg-offcanvas__cta:hover,
.vg-offcanvas__cta:focus{
  background: var(--vg-accent-dark);
  border-color: var(--vg-accent-dark);
  color: #fff;
}

/* =========================
   HOME（トップ）: 赤線（左右基準）に揃える
   - ヘッダーのcontainerをフル幅化して左へ寄せる
   - ヒーロー内コンテンツも同じ左右パディングに揃える
========================= */
.is-home .site-header .container{
  max-width: none !important;   /* Bootstrapのcontainer幅制限を解除 */
  width: 100% !important;
  padding-left: 24px !important;  /* ← 赤線の内側余白（好みで20-32に調整） */
  padding-right: 24px !important;
}

/* ロゴを“さらに左”へ（余白が残る場合の最後の一押し） */
.is-home .site-logo{
  margin-left: -10px; /* 0〜-16で微調整 */
}

/* メニューを右端の赤線に揃える（開始位置もここで安定） */
.is-home .site-header .nav-menu{
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* ヒーロー内の左右もヘッダーと同じ赤線に合わせる */
.is-home .home-hero__inner{
  max-width: none !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* =========================================================
   ゴルフ情報：下層ページ（カテゴリ配下）カード統一
   - 見出し背景：薄いグレー
   - 本文：白
   - ボタン：白背景＋薄グレー枠
   - ボタン上下余白：+10px
========================================================= */

/* カード全体 */
.info-card,
.info-card.card {
  border: 1px solid var(--vg-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 見出し部分（カード上段） */
.info-card .card-body:first-child,
.info-card .card-header {
  background-color: #F3F3F3;   /* 薄いグレー */
  padding: 18px 20px;
  border-bottom: 1px solid var(--vg-border);
}

/* 見出しタイトル */
.info-card h3,
.info-card h4 {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--vg-text);
}

/* 説明文 */
.info-card p {
  margin-bottom: 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* フッター（ボタンエリア） */
.info-card .card-footer {
  background: #fff;
  padding: 20px;              /* ← 上下を広げる */
}

/* 「一覧を見る / 読む」ボタン */
.info-card .btn,
.info-card .btn-outline-primary {
  background-color: #fff !important;
  color: var(--vg-text) !important;
  border: 1px solid #BDBDBD !important;
  border-radius: 999px;
  font-weight: 600;
  padding: 14px 0 !important; /* ← 上下 +10px 相当 */
}

/* hover */
.info-card .btn:hover {
  background-color: #F0F0F0 !important;
  border-color: #9E9E9E !important;
  color: var(--vg-text) !important;
}

/* =========================================================
   HEADER FIX (FINAL OVERRIDE)
   - ロゴとメニューの被り解消
   - ハンバーガー表示時はPCメニューを必ず消す
========================================================= */

/* ヘッダーの中は必ず1行で、押し合いしない */
.site-header .container{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}

/* ロゴは縮まない */
.site-logo{
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
.site-logo__img,
.site-header .site-logo img{
  height: 80px !important;   /* 必要なら 72px まで落としてOK */
  width: auto !important;
  display: block !important;
}

/* navは右寄せ＆縮められるようにする（重要: min-width:0） */
.nav-menu{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 8px !important;
  overflow: hidden !important; /* 被り防止 */
}

/* メニューの文字・高さを少し圧縮（被り対策） */
.site-header .nav-link,
.site-header .header-login-btn,
.site-header .header-register-btn{
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ===== ブレイクポイント：ここで「ハンバーガーON → PCメニューOFF」 ===== */
.nav-toggle{ display: none !important; }

@media (max-width: 1200px){
  .nav-menu{ display: none !important; }     /* ← 必ず消す */
  .nav-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
}

/* TOPだけは透明ヘッダー（下層は通常背景） */
.is-home .site-header.site-header--overlay{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border-bottom: none !important;
}