/* ===== エリアゴルフナビ デザインシステム（動的CSS・全ページ反映） =====
Webフォントは描画ブロックを避けるため mu-plugin(golf-design.php) の +preconnect で読込。
ここでは @import を使わない（旧方式の取込は描画を遅らせるため不使用）。 */
html { scroll-behavior: smooth; }
/* ===== SWELLテーマ色を緑×ゴールド（カントリークラブ調）に統一 =====
既定の紺#04384c・青#1176d4 がヒーローの深緑と不一致だったので、テーマ変数を上書き。
これでヘッダー最上部のバー（feed/検索アイコン帯）・リンク・各アクセントが深緑に揃う。 */
:root {
–color_main: #0b3a2b; /* ヘッダーバー背景/アクセント＝ヒーロー最深部の緑（旧:紺#04384c） */
–color_main_dark: #082a1f; /* さらに濃い緑 */
–color_main_thin: rgba(11,58,43,.06); /* うっすら緑の面 */
–color_link: #15803d; /* リンク＝サイト共通の緑（旧:青#1176d4） */
–color_htag: #14532d; /* 見出し背景の緑（.gnavi外ページの保険） */
}
/* 全体をほんのりクリーム地にして白カードを上品に浮かせる（高級感） */
body { background-color: #f6f3ea !important; }
/* 全幅ヒーロー(width:100vw)で横スクロールが出ないように画面外をはみ出させない */
html, body { overflow-x: hidden; max-width: 100%; }
/* 全幅ヒーローが先頭のページ（トップ）は、ヘッダー直下の余白を消してヒーローを密着させる。
SWELLの .l-content { padding-top:4em } がヘッダーとヒーローの間にクリームの帯を作っていたので、
「先頭が全幅ヒーローのとき」だけ上余白を0にする（記事・ハブの通常余白は維持）。 */
.l-content:has(.gnavi > .gnavi-hero:first-child) { padding-top: 0 !important; }
.gnavi {
font-family: “Noto Sans JP”, -apple-system, “Hiragino Sans”, sans-serif;
color: #2a352e;
line-height: 1.95;
letter-spacing: .012em;
}
/* 本文の白いコンテンツカード化（クリーム地に対して浮かせる・端末問わず上質に） */
.gnavi-card, .gnavi table, .gnavi figure img { background: #fff; }
.gnavi p { margin: 1.05em 0; }
.gnavi strong, .gnavi b { color: #14532d; font-weight: 700; }
/* ============================================================
見出し・ボタン リッチ化（競合調査＝ゴルフ予約/高級CC/モダンCTA を統合）
方針: 金は「面」でなく縁・線・点に限定し、艶と多層影で立体を出す＝上品なリッチ。
============================================================ */
/* 見出し＝ディスプレイ用フォント */
.gnavi h2, .gnavi h3, .gnavi-hero { font-family: “Zen Kaku Gothic New”, “Noto Sans JP”, sans-serif; }
/* h2＝「クリームの紙パネル＋左の金タブ＋斜光の艶」。
インラインの display:flex / align-items / gap はPythonが付与（チップ横並び維持）。
背景/角丸/箱影/::before/::after はインラインに無い→確実に効く。 */
.gnavi h2 {
position: relative;
font-weight: 900;
font-size: clamp(1.25rem, 3.8vw, 1.55rem);
letter-spacing: .02em;
color: #16241c;
margin: 2.5em 0 .9em;
/* クリームより一段明るい紙の質感（上→下のごく薄いグラデ）＝“面”を作る */
background: linear-gradient(180deg,#fffdf7 0%,#f5efe0 100%);
border: 1px solid #e7d6a8; /* 極薄ゴールドの細枠＝銘板の縁 */
border-radius: 14px;
padding: .5em .95em .55em 1.05em; /* 左に余白＝金タブと文字を被らせない */
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 0 0 1px rgba(255,255,255,.35),
0 6px 18px -10px rgba(20,83,45,.32);
overflow: hidden; /* 斜光の艶がパネル外へはみ出さない */
}
/* 左端：濃緑→金の縦タブ */
.gnavi h2::before {
content: “”; display: block !important;
position: absolute; left: 0; top: 12%; bottom: 12%; width: 5px;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg,#15803d 0%,#d9b35a 100%);
box-shadow: 1px 0 0 rgba(255,255,255,.5);
}
/* 右上から差す“通り過ぎる斜光”＝紙にあたる光。ごく薄く上品に */
.gnavi h2::after {
content: “”; display: block !important;
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg,
transparent 56%, rgba(255,255,255,.42) 63%, transparent 70%);
}
/* h2アイコンチップ（h2の最初のspan）の“金リング＋艶”（インラインに勝つため !important） */
.gnavi h2 > span:first-child {
border: 1px solid rgba(217,179,90,.9) !important;
box-shadow:
0 3px 8px rgba(20,83,45,.30),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -6px 8px rgba(0,0,0,.14) !important;
}
/* h3＝「金グラデの縦タブ＋淡いクリーム下地」（Pythonはプレーン
出力＝!important不要） */
.gnavi h3 {
position: relative;
font-weight: 700;
font-size: 1.12rem;
color: #16241c;
margin: 1.9em 0 .6em;
padding: .3em .2em .3em .85em;
border-left: 0;
background: linear-gradient(90deg,rgba(217,179,90,.12),rgba(246,243,234,0) 72%);
border-radius: 5px;
}
.gnavi h3::before {
content: “”; position: absolute; left: 0; top: .28em; bottom: .28em; width: 4px;
border-radius: 3px;
background: linear-gradient(180deg,#e9c46a,#d9b35a);
}
/* アイブロウ（任意・小見出しラベル）＝見出し上に置く金のピル */
.gnavi .gnavi-eyebrow {
display: inline-flex; align-items: center; gap: .4em;
margin: 0 0 .5em; padding: .32em .8em;
font-size: .72rem; font-weight: 800; letter-spacing: .14em;
color: #15803d;
background: linear-gradient(180deg,#fffdf6,#f3ead2);
border: 1px solid rgba(217,179,90,.6);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.gnavi .gnavi-eyebrow::before {
content: “”; width: .5em; height: .5em; border-radius: 50%;
background: linear-gradient(135deg,#e9c46a,#d9b35a);
}
/* リンク */
.gnavi a { color: #15803d; text-decoration: none; }
.gnavi a:hover { text-decoration: underline; }
/* カード＝ホバーで浮き上がり、ふちにゴールドが灯る */
.gnavi-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gnavi-card:hover { transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(20,70,40,.2) !important; border-color: #d9b35a !important; }
/* 主ボタン .gnavi-btn（緑）＝艶・厚み・金の極細縁・通り過ぎる光・押し込み。
background/box-shadow/padding はPythonインラインが勝つので !important で上書き。 */
.gnavi-btn {
position: relative; overflow: hidden;
display: block; text-align: center;
min-height: 44px;
padding: 13px 22px !important;
color: #fff !important; font-weight: 800; letter-spacing: .02em;
background: linear-gradient(180deg,#22b455 0%,#16a34a 48%,#15803d 100%) !important;
border: 1px solid rgba(217,179,90,.7);
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 4px rgba(8,42,31,.40),
0 2px 4px rgba(8,42,31,.22),
0 8px 18px rgba(20,70,40,.26) !important;
text-shadow: 0 1px 1px rgba(8,42,31,.35);
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gnavi-btn::before {
content: “”; position: absolute; left: 6%; right: 6%; top: 3px; height: 44%;
border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
background: linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,0));
pointer-events: none;
}
.gnavi-btn::after {
content: “”; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
background: linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
transform: skewX(-18deg); pointer-events: none;
transition: left .55s ease;
}
.gnavi-btn:hover {
filter: brightness(1.05); transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 4px rgba(8,42,31,.40),
0 4px 8px rgba(8,42,31,.24),
0 14px 28px rgba(20,70,40,.34) !important;
}
.gnavi-btn:hover::after { left: 130%; }
.gnavi-btn:active {
transform: translateY(1px);
box-shadow:
inset 0 2px 5px rgba(8,42,31,.50),
inset 0 1px 0 rgba(255,255,255,.2),
0 1px 2px rgba(8,42,31,.25) !important;
}
/* 予約CTA .gnavi-cta（記事内・最重要導線）＝主ボタンと同手法・サイズで別格に */
.gnavi-cta {
position: relative; overflow: hidden;
display: inline-block; max-width: 100%; box-sizing: border-box; white-space: nowrap;
min-height: 48px;
padding: 15px 26px !important;
color: #fff !important; font-weight: 800; letter-spacing: .03em; line-height: 1.2;
background: linear-gradient(180deg,#22b455 0%,#16a34a 48%,#15803d 100%) !important;
border: 1px solid rgba(217,179,90,.75);
border-radius: 999px; text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,.30);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 4px rgba(8,42,31,.40),
0 3px 6px rgba(8,42,31,.24),
0 10px 22px rgba(20,70,40,.30) !important;
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gnavi-cta::before {
content: “”; position: absolute; left: 6%; right: 6%; top: 3px; height: 46%;
border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
background: linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
pointer-events: none;
}
.gnavi-cta::after {
content: “”; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
background: linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
transform: skewX(-18deg); pointer-events: none; transition: left .55s ease;
}
.gnavi-cta:hover {
filter: brightness(1.05); transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -2px 4px rgba(8,42,31,.40),
0 5px 10px rgba(8,42,31,.26),
0 16px 30px rgba(20,70,40,.36) !important;
}
.gnavi-cta:hover::after { left: 130%; }
.gnavi-cta:active {
transform: translateY(1px);
box-shadow:
inset 0 2px 5px rgba(8,42,31,.50),
0 1px 2px rgba(8,42,31,.25) !important;
}
/* ヒーロー金CTA .gnavi-hero-cta（メタリックゴールド・トップ最重要／Pythonでクラス付与） */
.gnavi-hero-cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: .45em;
min-height: 52px; padding: 15px 32px;
color: #14532d; font-weight: 900; letter-spacing: .03em; text-decoration: none;
background: linear-gradient(160deg,#b8923a 0%,#e3c266 22%,#f7e3a1 48%,#e9c46a 70%,#bd9433 100%);
border: 1px solid #15803d;
border-radius: 999px;
text-shadow: 0 1px 0 rgba(255,247,214,.6);
box-shadow:
inset 0 1px 0 rgba(255,253,240,.85),
inset 0 -2px 3px rgba(120,85,20,.45),
0 7px 18px rgba(120,85,20,.42),
0 3px 6px rgba(120,85,20,.26);
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gnavi-hero-cta::before {
content: “”; position: absolute; left: 8%; right: 8%; top: 4px; height: 42%;
border-radius: 999px 999px 40px 40px / 999px 999px 22px 22px;
background: linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
pointer-events: none;
}
.gnavi-hero-cta::after {
content: “”; position: absolute; top: 0; left: -130%; width: 50%; height: 100%;
background: linear-gradient(115deg,transparent,rgba(255,255,255,.6),transparent);
transform: skewX(-18deg); pointer-events: none; transition: left .6s ease;
}
.gnavi-hero-cta:hover {
filter: brightness(1.04); transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,253,240,.9),
inset 0 -2px 3px rgba(120,85,20,.45),
0 12px 26px rgba(120,85,20,.5);
}
.gnavi-hero-cta:hover::after { left: 130%; }
.gnavi-hero-cta:active {
transform: translateY(1px);
box-shadow: inset 0 2px 5px rgba(120,85,20,.55), 0 2px 5px rgba(120,85,20,.4);
}
/* 「見てみる ▶」ゴーストボタン .gnavi-ghost（トップnav_cards／Pythonでクラス付与） */
.gnavi-ghost {
display: inline-flex; align-items: center; gap: .4em;
min-height: 44px; padding: 11px 20px;
color: #15803d; font-weight: 800; text-decoration: none;
background: linear-gradient(180deg,#fffdf6,#f6f0df);
border: 1.5px solid #d9b35a; border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(120,80,20,.12);
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gnavi-card:hover .gnavi-ghost {
transform: translateY(-1px); color: #14532d; border-color: #c9a24a;
background: linear-gradient(180deg,#ffffff,#f1e8cf);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 16px rgba(120,80,20,.18);
}
/* フォーカス可視（キーボード操作・WCAG 2.4.7）＝全ボタン共通の二重リング */
.gnavi-btn:focus-visible,
.gnavi-cta:focus-visible,
.gnavi-hero-cta:focus-visible,
.gnavi-ghost:focus-visible {
outline: 3px solid #0b3a2b; outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(255,255,255,.95) !important;
}
/* 動きを減らす設定の人には艶アニメ等を止める（酔い対策） */
@media (prefers-reduced-motion: reduce) {
.gnavi-btn, .gnavi-cta, .gnavi-hero-cta, .gnavi-ghost,
.gnavi-btn::after, .gnavi-cta::after, .gnavi-hero-cta::after { transition: none !important; }
}
/* 表＝角の余白・行ホバー */
.gnavi table { border-collapse: separate; border-spacing: 0; }
.gnavi tbody tr:hover td { background: #f6faf7; }
/* エリアジャンプ等のピル＝ホバー */
.gnavi-jump:hover { background: #15803d !important; color: #fff !important; }
/* 追従予約ボタン（スマホのみ・スクロールしても下に常駐） */
.gnavi-sticky { display: none; }
.gnavi-sticky a { transition: filter .15s ease; }
/* ===== スマホ最適化 ===== */
@media (max-width: 600px) {
.gnavi { font-size: 16px; line-height: 2; }
.gnavi p { margin: 1.1em 0; }
.gnavi-hero { padding: 22px 16px !important; }
.gnavi h2 { font-size: 1.32rem; margin: 1.9em 0 .7em; padding: .55em .85em .6em 1em; }
.gnavi h3 { font-size: 1.06rem; }
/* 2列の「ラベル｜値」表は縦積みにして読みやすく（基本情報・設備など） */
.gnavi-kv, .gnavi-kv tbody, .gnavi-kv tr, .gnavi-kv th, .gnavi-kv td { display: block; width: auto !important; }
.gnavi-kv th { background: transparent !important; color: #5b6b62; font-size: .82em; font-weight: 700;
padding: 11px 14px 0 !important; border-top: 1px solid #eef1ef !important; }
.gnavi-kv tr:first-child th { border-top: 0 !important; }
.gnavi-kv td { padding: 2px 14px 11px !important; border-top: 0 !important; font-weight: 500; }
/* 3列以上のデータ表は詰まりを緩和（評価比較・近隣比較など） */
.gnavi table:not(.gnavi-kv) th, .gnavi table:not(.gnavi-kv) td { padding: 8px 8px !important; font-size: .9em; }
/* タップしやすく */
.gnavi a { word-break: break-word; }
/* タップしやすいボタンサイズ（艶を足してもタップ領域は縮めない） */
.gnavi-btn { padding: 13px 14px !important; min-height: 46px; }
.gnavi-cta { min-height: 50px; }
/* 追従予約ボタンがあるページ(記事)だけ下部余白を確保。ハブには付けず無駄な空白を防ぐ */
.gnavi:has(.gnavi-sticky) { padding-bottom: 74px; }
.gnavi-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
background: rgba(255,255,255,.95); box-shadow: 0 -3px 14px rgba(0,0,0,.13);
padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.gnavi-sticky a { display: block; text-align: center; background: linear-gradient(180deg,#16a34a,#15803d);
color: #fff; font-weight: 800; padding: 14px; border-radius: 999px; text-decoration: none;
box-shadow: 0 4px 14px rgba(21,128,61,.4); }
}