/* =============================================================
   ゴルフ場検索（golf_club_search.php）2026-11-08 見た目だけ刷新
   構成（検索ボックス・結果の並び・プラン表）はそのまま。#user-section.gs-page に限って上書きする
   ============================================================= */
#user-section.gs-page {
    --gs-green: #376439;
    --gs-green-pale: #eef5ee;
    --gs-ink: #1f2a20;
    --gs-muted: #5f6b60;
    --gs-line: #e3e8e3;
    background: #fff;
    padding-bottom: 60px;
}
/* 上の緑の帯：他のページと同じグラデーション＋ゴルフ柄 */
.gs-page .green-backgrond {
    height: 230px; overflow: hidden;
    background:
        radial-gradient(ellipse at 85% 10%, rgba(255, 255, 255, .12) 0%, transparent 45%),
        linear-gradient(150deg, #24432a 0%, #376439 55%, #4f8a4f 100%);
}
.gs-page .green-backgrond::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22280%22 height=%22280%22 viewBox=%220 0 280 280%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cg transform=%22translate(34 40) rotate(-12)%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2210%22/%3E%3Ccircle cx=%22-3%22 cy=%22-3%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%223%22 cy=%22-2%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%220%22 cy=%223%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%22-4%22 cy=%223%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%224%22 cy=%224%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3C/g%3E %3Cg transform=%22translate(176 54) rotate(6)%22%3E%3Cpath d=%22M0 34V0%22/%3E%3Cpath d=%22M0 2l18 6-18 7%22 fill=%22%23fff%22 fill-opacity=%22.35%22/%3E%3Cellipse cx=%220%22 cy=%2236%22 rx=%229%22 ry=%222.5%22/%3E%3C/g%3E %3Cg transform=%22translate(96 150) rotate(18)%22%3E%3Cpath d=%22M-7 0h14%22/%3E%3Cpath d=%22M-4 0l3 16h2l3-16%22/%3E%3C/g%3E %3Cpath d=%22M30 230c30-46 72-58 112-40%22 stroke-dasharray=%222 7%22/%3E %3Cg transform=%22translate(150 186) rotate(20)%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%226%22/%3E%3C/g%3E %3Cg transform=%22translate(236 168)%22%3E%3Cpath d=%22M0-7v14M-7 0h14%22/%3E%3C/g%3E %3Cg transform=%22translate(212 246) rotate(-8)%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%229%22/%3E%3Ccircle cx=%22-3%22 cy=%22-2%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%223%22 cy=%22-1%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3Ccircle cx=%220%22 cy=%223%22 r=%221%22 fill=%22%23fff%22 stroke=%22none%22/%3E%3C/g%3E %3Cg transform=%22translate(60 112)%22%3E%3Cpath d=%22M0-4v8M-4 0h8%22/%3E%3C/g%3E %3Cg transform=%22translate(250 100) rotate(-20)%22%3E%3Cpath d=%22M-6 0h12%22/%3E%3Cpath d=%22M-3 0l2 12h2l2-12%22/%3E%3C/g%3E %3C/svg%3E");
    background-size: 280px 280px; opacity: .09; pointer-events: none;
}
/* 検索ボックス */
/* 影は付けず背景になじませる（ユーザー指定） */
.gs-page .search-box { border-radius: 18px; box-shadow: none; border: 0; }

/* 結果1件：枠で囲まず、下線だけで区切る（ユーザー指定） */
.gs-page .search-result-box {
    background: transparent; border: 0; border-bottom: 1px solid var(--gs-line); border-radius: 0;
    padding: 44px 0 0; margin-bottom: 0 !important; box-shadow: none;  /* 線の下（次のゴルフ場まで）を広めに */
}
.gs-page .search-box-name { font-size: 19px; font-weight: 800; color: var(--gs-ink); }
.gs-page .golf-club-content > a:first-child:hover .search-box-name { color: var(--gs-green); }
.gs-page .title-eng { letter-spacing: .04em; }
.gs-page .label-golf-club-region {
    padding: 3px 12px; border-radius: 999px; background: var(--gs-green-pale); color: var(--gs-green); font-weight: 800; font-size: 12px;
}
.gs-page .label-golf-club {
    border: 0; border-radius: 999px; padding: 3px 10px; background: #f1f4f1; color: var(--gs-muted); font-size: 12px; font-weight: 700;
}
.gs-page .label-golf-club-area { gap: 6px; flex-wrap: wrap; }
.gs-page .golf-club-picture .p_box { border-radius: 12px !important; transition: transform .3s; }
.gs-page .golf-club-picture a:hover .p_box { transform: scale(1.02); }
.gs-page .result-fav { font-size: 13px; font-weight: 700; color: var(--gs-muted); }

/* 写真は右（4:3）＋2・3枚目を小さく。左に名前・説明、プラン表はその下に全幅（HTML はそのまま、グリッドで配置） */
.gs-page .search-result-box { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
.gs-page .search-result-box > .flex.mb-2 { grid-column: 1; grid-row: 1; }
.gs-page .search-result-box > .flex.mb-3 { display: contents; }
.gs-page .search-result-box .golf-club-picture { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0 0 14px; }
.gs-page .search-result-box .golf-club-content { grid-column: 1; grid-row: 2; width: auto; margin-bottom: 14px; }
.gs-page .search-result-box > :nth-child(n+3) { grid-column: 1 / -1; }
/* 大きい写真は高さを固定（写真が1枚だけで横幅いっぱいになっても、他と同じ高さにそろえる） */
.gs-page .golf-club-picture .p_box { height: 200px !important; background-color: #dfe9df; }
/* 小さい写真は大きい写真の右に縦に並べる。最安値ボタンはその下に全幅 */
.gs-page .search-result-box .golf-club-picture { display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: stretch; gap: 8px 6px !important; }
.gs-page .golf-club-picture > a:first-child { grid-column: 1; grid-row: 1; }
.gs-page .golf-club-picture > a:last-child { grid-column: 1 / -1; grid-row: 2; }
.gs-page .golf-club-picture:not(:has(.gs-thumbs)) > a:first-child { grid-column: 1 / -1; }
.gs-page .gs-thumbs { grid-column: 2; grid-row: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 0; }
.gs-page .gs-thumb {
    width: 100%; height: 100%; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: 8px; cursor: pointer;
    background-color: #dfe9df; background-size: cover; background-position: center; opacity: .75; transition: opacity .15s, border-color .15s;
}
.gs-page .gs-thumb:hover { opacity: 1; }
.gs-page .gs-thumb.is-active { border-color: var(--gs-green); opacity: 1; }

/* リアルタイム予約のラベル（詳細ページ・まるっと予約と同じオレンジ） */
.gs-page .gs-rt { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: 999px; background: #fff7e6; color: #b45309; font-size: 12px; font-weight: 800; }
.gs-page .gs-rt .material-icons { font-size: 14px; color: inherit; }

/* まるっと予約ボタン（お気に入りの左） */
.gs-page .result-fav { gap: 10px !important; }
.gs-page .gs-mt-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; margin-right: 4px;
    border: 1px solid var(--gs-green); border-radius: 999px; background: #fff; color: var(--gs-green);
    font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.gs-page .gs-mt-btn .material-icons { font-size: 16px; }
.gs-page .gs-mt-btn:hover { background: var(--gs-green); color: #fff; }
.gs-page .gs-mt-btn.is-added { background: var(--gs-green); color: #fff; }
.gs-page .gs-mt-btn .mt-add-count:empty { display: none; }
.gs-page .gs-mt-btn .mt-add-count { margin-left: 2px; font-size: 11px; }
.mt-list-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 10000; transform: translate(-50%, 20px);
    display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 12px 14px 12px 18px; border-radius: 14px;
    background: #1f2a20; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none; transition: all .25s;
}
.mt-list-toast.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mt-list-toast span { flex: 1 1 auto; min-width: 0; }
.mt-list-toast a { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: #8bd38e; color: #1f2a20; font-size: 13px; text-decoration: none; }

/* パートナー価格の案内（ゴルフ場詳細と同じ見た目） */
.gs-page .gs-partner { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #e9f3fb; color: #0b5a8f; font-size: 13px; }

/* プラン表 */
/* プラン表の見出しは従来どおりグレー（ユーザー指定） */
.gs-page .plan-table th { font-size: 13px; }
.gs-page .plan-table td { border-bottom-color: var(--gs-line); }
.gs-page .plan-table tr { border-bottom-color: var(--gs-line); }
/* プラン行の文字の上下を同じ余白に（線の直前に余分な余白を足さない） */
@media screen and (min-width: 781px) { .gs-page .plan-table td { padding-top: 18px; padding-bottom: 18px; } }
.gs-page .plan-table tr:last-child { border-bottom: 0; }
.gs-page .plan-table .reserve-button { border-radius: 12px; font-weight: 800; }

/* 件数・並び替え・料金区分 */
.gs-page .search-golf-date-label { border-radius: 999px; padding: 3px 12px; }
.gs-page select[name="sort"], .gs-page #sortSelect { border-radius: 10px; border-color: var(--gs-line); }

@media screen and (max-width: 780px) {
    .gs-page .green-backgrond { height: 230px; }
    /* スマホは 写真（全幅）→ タグ → 名前・説明 → プラン の縦並び */
    .gs-page .search-result-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .gs-page .search-result-box .golf-club-picture { grid-column: 1; grid-row: 1; width: 100%; margin: 0 0 12px; grid-template-columns: minmax(0, 1fr) 64px; }
    .gs-page .search-result-box > .flex.mb-2 { grid-column: 1; grid-row: 2; }
    .gs-page .search-result-box .golf-club-content { grid-column: 1; grid-row: 3; }
    .gs-page .golf-club-picture .p_box { height: 170px !important; }
    .gs-page .gs-partner { margin: 0 0 14px; }
    .mt-list-toast { width: calc(100% - 32px); bottom: 20px; font-size: 13px; }
    .gs-page .search-result-box { padding: 32px 0 8px; }
    .gs-page .search-box-name { font-size: 17px; }
}

/* 料金の色を他ページ（ゴルフ場詳細・プラン詳細）にそろえる：金額は黒、円換算はグレー（2026-11-08） */
.gs-page .plan-table td.nowrap > div { color: #5f6b60; }
.gs-page .plan-table .price-style { color: #1f2a20; font-weight: 800; }
.gs-page .plan-table td.nowrap > div.bold { color: #1f2a20; }