@charset "UTF-8";
/* ==========================================================================
   SPR-PC 栗東会議 PCページのリニューアル（2026-10-27）
   - スマホ（2026-10-13 の css/sp/spr.css）と同じ色・部品の PC 版
   - 今の base.css（pc/member・pc/no_member）は触らず、この1枚を後から読む
   - クラス名はすべて spr- で始める。base.css の要素だけの指定（span の vertical-align、a:link の色、
     label の丸、radio を隠す 等）は使う所で上書きしている
   - 2列（幅 1000px・本文 #Left 740px・右の列 #Right 240px）はそのまま
   - 上のメニュー（置換文字 header_menu）と右の列（置換文字 right_menu）は DB のまま。
     画像のボタンは「リンク先」で見分けて文字のボタンの見た目にする（知らないリンク先の画像はそのまま出る）
   ========================================================================== */

:root {
	--spr-red: #b80000; --spr-gold: #d4a73c; --spr-ink: #1b1b1b; --spr-sub: #6b6b6b;
	--spr-line: #e4e0da; --spr-bg: #f2efea;
	--spr-sat: #1e6fd9; --spr-sun: #d61f1f; --spr-mon: #1f9a3a;
	--spr-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}
.spr-head *, .spr-main *, .spr-ft *, .spr-side * { box-sizing: border-box; }
.spr-head, .spr-main, .spr-ft { font-family: var(--spr-font); line-height: 1.6; text-wrap: pretty; }
/* base.css の「span { vertical-align:middle }」を打ち消す */
.spr-head span, .spr-main span, .spr-ft span { vertical-align: baseline; }

/* 新しいヘッダーがあるページだけ、地の色を変える（:has が無い古いブラウザは今の灰色のまま） */
html:has(.spr-head), body:has(.spr-head) { background-color: var(--spr-bg); }
.spr-head ~ #Wrapper { background: var(--spr-bg); padding: 24px 0 8px; }

/* ==========================================================================
   ヘッダー（会員・非会員 共通）＝赤い帯
   ========================================================================== */
.spr-hd { background: var(--spr-red); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.spr-hd-in { display: flex; align-items: center; gap: 16px; width: 1000px; height: 72px; margin: 0 auto; }
.spr-hd .spr-logo { flex: 0 0 auto; display: block; margin: 0 auto 0 0; padding: 0; line-height: 0; }
.spr-hd .spr-logo a { display: block; line-height: 0; }
.spr-hd .spr-logo img { display: block; width: auto; height: 46px; }
.spr-hd .spr-hd-id { margin: 0; color: rgba(255,255,255,.88); font-size: 13px; letter-spacing: .02em; }
.spr-hd a.spr-pt, .spr-hd a.spr-pt:link, .spr-hd a.spr-pt:visited { display: flex; align-items: center; height: 38px; padding: 0 5px 0 16px; border-radius: 19px; background: #fff; color: var(--spr-ink); font-size: 13px; white-space: nowrap; text-decoration: none; }
.spr-hd a.spr-pt b { margin: 0 2px 0 6px; font-size: 19px; letter-spacing: .02em; }
.spr-hd a.spr-pt i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 10px; border-radius: 50%; background: var(--spr-gold); color: #fff; font-style: normal; font-weight: bold; font-size: 18px; line-height: 1; }
.spr-hd a.spr-pt:hover { text-decoration: none; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* 非会員のヘッダー：ログインの入力欄（送る中身・送り先は今と同じ） */
.spr-hd-non .spr-hd-in { height: auto; min-height: 72px; padding: 10px 0; }
.spr-login { display: flex; align-items: center; gap: 8px; margin: 0; }
.spr-login label { display: block; margin: 0; padding: 0; color: rgba(255,255,255,.9); font-size: 12px; cursor: default; }
.spr-login label::before, .spr-login label::after { content: none; display: none; }
.spr-login input.spr-in { width: 150px; height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; background: #fff; color: var(--spr-ink); font-family: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; }
.spr-login button { height: 34px; margin: 0; padding: 0 18px; border: 2px solid #fff; border-radius: 17px; background: transparent; color: #fff; font-family: inherit; font-size: 14px; font-weight: bold; cursor: pointer; -webkit-appearance: none; appearance: none; }
.spr-login button:hover { background: rgba(255,255,255,.15); }
.spr-hd-sub { width: 1000px; margin: 0 auto; padding: 0 0 10px; text-align: right; font-size: 12px; line-height: 1.6; }
.spr-hd-sub a, .spr-hd-sub a:link, .spr-hd-sub a:visited { color: #fff; text-decoration: underline; }
.spr-hd-sub a + a { margin-left: 18px; }
.spr-hd-sub .spr-hd-note { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.92); color: #333; font-size: 11px; }
.spr-hd-sub .spr-hd-note strong { color: #c00; }
.spr-hd-sub .spr-hd-note a, .spr-hd-sub .spr-hd-note a:link, .spr-hd-sub .spr-hd-note a:visited { color: #c00; }

/* ==========================================================================
   上のメニュー（置換文字 header_menu・中身は画像のボタン4つ）＝白い帯に文字
   ========================================================================== */
.spr-head ~ #cd-header { height: auto; background: #fff; border-bottom: 1px solid var(--spr-line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.spr-head ~ #cd-header .navigation { width: 1000px; margin: 0 auto; }
.spr-head ~ #cd-header .topNav { display: block; max-width: none; margin: 0; text-align: left; }
.spr-head ~ #cd-header .topNavUl { display: flex; margin: 0; padding: 0; }
.spr-head ~ #cd-header .topNav li { float: none; border: 0; font-family: var(--spr-font); }
.spr-head ~ #cd-header .topNav li:last-child { border: 0; }
.spr-head ~ #cd-header .topNav a, .spr-head ~ #cd-header .topNav a:link, .spr-head ~ #cd-header .topNav a:visited { display: block; height: auto; padding: 14px 22px 12px; border-bottom: 3px solid transparent; background: none; color: var(--spr-ink); font-family: var(--spr-font); font-size: 15px; font-weight: bold; line-height: 1.4; text-decoration: none; }
.spr-head ~ #cd-header .topNav li:first-child a { padding-left: 0; }
.spr-head ~ #cd-header .topNav a:hover { opacity: 1; background: none; color: var(--spr-red); border-bottom-color: var(--spr-red); }
.spr-head ~ #cd-header .topNav a:hover img { opacity: 1; }
.spr-head ~ #cd-header .topNav a[href="/"] img, .spr-head ~ #cd-header .topNav a[href="/?p=about"] img,
.spr-head ~ #cd-header .topNav a[href="/?p=point"] img, .spr-head ~ #cd-header .topNav a[href="/?p=faq"] img { display: none; }
.spr-head ~ #cd-header .topNav a[href="/"]::before { content: "情報一覧"; }
.spr-head ~ #cd-header .topNav a[href="/?p=about"]::before { content: "栗東会議とは？"; }
.spr-head ~ #cd-header .topNav a[href="/?p=point"]::before { content: "ポイント購入"; }
.spr-head ~ #cd-header .topNav a[href="/?p=faq"]::before { content: "質問事例集"; }

/* ==========================================================================
   右の列（置換文字 right_menu）＝白いカード
   ========================================================================== */
.spr-head ~ #Wrapper #Right { font-family: var(--spr-font); }
.spr-head ~ #Wrapper #Right .bannerR { margin: 0 0 12px; line-height: 1.4; }
.spr-head ~ #Wrapper #Right .bannerR a[href="/?p=inquiry"], .spr-head ~ #Wrapper #Right .bannerR a[href="/?p=recode"] { position: relative; display: block; padding: 15px 34px 15px 16px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); color: var(--spr-ink); font-size: 15px; font-weight: bold; line-height: 1.4; text-decoration: none; }
.spr-head ~ #Wrapper #Right .bannerR a[href="/?p=inquiry"] img, .spr-head ~ #Wrapper #Right .bannerR a[href="/?p=recode"] img { display: none; }
.spr-head ~ #Wrapper #Right .bannerR a[href="/?p=inquiry"]::before { content: "お問い合わせ"; }
.spr-head ~ #Wrapper #Right .bannerR a[href="/?p=recode"]::before { content: "的中実績"; }
.spr-head ~ #Wrapper #Right .bannerR a[href="/?p=inquiry"]::after, .spr-head ~ #Wrapper #Right .bannerR a[href="/?p=recode"]::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #b5b0a8; font-size: 22px; font-weight: normal; }
.spr-head ~ #Wrapper #Right .bannerR a:hover { color: var(--spr-red); text-decoration: none; }

.spr-head ~ #Wrapper #Right .point { margin: 0 0 12px; padding: 14px 14px 4px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-head ~ #Wrapper #Right .point h3 { margin: 0; padding: 0 0 0 9px; border-left: 4px solid var(--spr-red); color: var(--spr-ink); font-size: 15px; font-weight: bold; line-height: 1.3; }
.spr-head ~ #Wrapper #Right .point h3 img[src*="/pointTtl."] { display: none; }
.spr-head ~ #Wrapper #Right .point h3:has(img[src*="/pointTtl."])::before { content: "ポイント購入"; }
.spr-head ~ #Wrapper #Right .point ul { margin: 12px 0 0; padding: 0; }
.spr-head ~ #Wrapper #Right .point ul li { margin: 0 0 10px; list-style: none; line-height: 1.4; }
.spr-head ~ #Wrapper #Right .point a[href="/?p=point_bank"], .spr-head ~ #Wrapper #Right .point a[href="/?p=point_credit"] { position: relative; display: block; padding: 11px 30px 11px 14px; border: 1px solid var(--spr-line); border-radius: 8px; background: #fff; color: var(--spr-ink); font-size: 14px; font-weight: bold; text-decoration: none; }
.spr-head ~ #Wrapper #Right .point a[href="/?p=point_bank"] img, .spr-head ~ #Wrapper #Right .point a[href="/?p=point_credit"] img { display: none; }
.spr-head ~ #Wrapper #Right .point a[href="/?p=point_bank"]::before { content: "銀行振込"; }
.spr-head ~ #Wrapper #Right .point a[href="/?p=point_credit"]::before { content: "クレジットカード"; }
.spr-head ~ #Wrapper #Right .point a::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #b5b0a8; font-size: 20px; font-weight: normal; }
.spr-head ~ #Wrapper #Right .point a:hover { border-color: var(--spr-red); color: var(--spr-red); text-decoration: none; }

/* W-1 の「通知でお知らせ」と LINE 連携の箱（中身はそのまま・枠だけ） */
.spr-head ~ #Wrapper #Right .meetingBox { margin: 0 0 12px; padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-head ~ #Wrapper #Right .meetingBox h3 { margin: 0; padding: 0 0 0 9px; border-left: 4px solid var(--spr-red); color: var(--spr-ink); font-family: var(--spr-font); font-size: 15px; font-weight: bold; line-height: 1.3; text-shadow: none; }
.spr-head ~ #Wrapper #Right .meetingBox p { margin: 10px 0 0; color: var(--spr-sub); font-size: 12px; line-height: 1.6; text-shadow: none; }
.spr-head ~ #Wrapper #Right .meetingBox p a { border-radius: 8px !important; }
.spr-head ~ #Wrapper #Right div[style*="background:#fff"] { margin: 0 0 12px !important; padding: 14px !important; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-head ~ #Wrapper #Right div[style*="background:#fff"] p { color: var(--spr-sub); }
.spr-head ~ #Wrapper #Right div[style*="background:#fff"] a { border-radius: 8px !important; }

/* ==========================================================================
   本文の枠（ファイルを触らないページも、見出しと白い箱をそろえる）
   ========================================================================== */
.spr-head ~ #Wrapper #Left.pageLeft, .spr-head ~ #Wrapper #main .whitebg { border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-head ~ #Wrapper #Left.pageLeft { overflow: hidden; }
.spr-head ~ #Wrapper #Left .ttl, .spr-head ~ #Wrapper #main .ttl { display: block; height: auto; padding: 22px 30px 0; background: #fff; box-shadow: none; }
.spr-head ~ #Wrapper #Left .ttl h2, .spr-head ~ #Wrapper #main .ttl h2, .spr-head ~ #Wrapper #Left .ttl h1, .spr-head ~ #Wrapper #main .ttl h1 { display: block; height: auto; padding: 0 0 0 12px; border-left: 5px solid var(--spr-red); background: none; color: var(--spr-ink); font-family: var(--spr-font); font-size: 22px; font-weight: bold; line-height: 1.35; text-shadow: none; }
.spr-head ~ #Wrapper #Left .ttl span.icon, .spr-head ~ #Wrapper #main .ttl span.icon { display: none; }

/* ==========================================================================
   フッター（会員・非会員 共通）
   ========================================================================== */
.spr-ft { clear: both; padding: 30px 0 22px; background: #1d1d1d; color: #bdbdbd; font-size: 12px; line-height: 1.8; }
.spr-ft-in { width: 1000px; margin: 0 auto; }
.spr-ft-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid #333; }
.spr-ft-links a, .spr-ft-links a:link, .spr-ft-links a:visited { color: #fff; font-size: 13px; text-decoration: none; }
.spr-ft-links a:hover { text-decoration: underline; }
.spr-ft-notes { margin: 0; padding: 0 0 0 1.2em; }
.spr-ft-notes li { list-style: disc; color: #bdbdbd; font-size: 12px; line-height: 1.8; }
.spr-copy { margin: 16px 0 0; color: #888; font-size: 12px; text-align: center; }

/* ==========================================================================
   中身の共通部品（新しく作ったページ）
   ========================================================================== */
.spr-main { color: var(--spr-ink); font-size: 14px; }
.spr-main a { text-decoration: none; }
.spr-main a:hover { text-decoration: none; }
.spr-main p { margin: 0; }
.spr-crumb { margin: 0 0 12px; font-size: 13px; }
.spr-crumb a, .spr-crumb a:link, .spr-crumb a:visited { color: var(--spr-red); font-weight: bold; }
.spr-box { padding: 26px 30px 30px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* base.css の「#Left h2」（赤い帯の見出し用＝白い明朝・影・背景画像）は ID の指定で強いので、#Left の中の見出しは #Left を付けて打ち消す */
#Left.spr-main h2 { display: block; height: auto; padding: 0; background: none; color: var(--spr-ink); font-family: var(--spr-font); font-size: inherit; font-weight: bold; text-shadow: none; vertical-align: baseline; }
.spr-main .spr-title, #Left.spr-main h2.spr-title { margin: 0 0 16px; padding: 0 0 0 12px; border-left: 5px solid var(--spr-red); font-size: 22px; font-weight: bold; line-height: 1.35; }
.spr-main .spr-h, #Left.spr-main h2.spr-h { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; padding: 0 0 0 10px; border-left: 4px solid var(--spr-red); background: none; color: var(--spr-ink); font-family: var(--spr-font); font-size: 19px; font-weight: bold; line-height: 1.3; height: auto; text-shadow: none; }
.spr-main .spr-h small { color: var(--spr-sub); font-size: 13px; font-weight: normal; }
.spr-main .spr-h small b { font-weight: normal; }
.spr-main .spr-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.8; }
.spr-main .spr-small { color: var(--spr-sub); font-size: 13px; }
.spr-main .spr-lead a, .spr-main .spr-lead a:link, .spr-main .spr-lead a:visited { color: var(--spr-red); font-weight: bold; text-decoration: underline; }
.spr-main i.spr-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #b5b0a8; font-style: normal; font-size: 24px; line-height: 1; }

/* 状態のしるし */
.spr-main b.spr-st { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 12px; font-weight: bold; line-height: 1.5; white-space: nowrap; }
.spr-main b.spr-st-open { background: var(--spr-red); color: #fff; }
.spr-main b.spr-st-pre_open { background: #fff; color: var(--spr-sub); border: 1px solid #bbb; }
.spr-main b.spr-st-closed { background: #3a3a3a; color: #fff; }
.spr-main b.spr-st-entry { background: var(--spr-gold); color: #fff; }

/* 大きいボタン */
.spr-join { width: 480px; margin: 28px auto 8px; text-align: center; }
.spr-main .spr-btn, .spr-main a.spr-btn:link, .spr-main a.spr-btn:visited { display: block; width: 100%; margin: 0; padding: 17px 0; border: 0; border-radius: 10px; background: linear-gradient(#d00000, #a80000); box-shadow: 0 3px 0 #6e0000, 0 4px 10px rgba(0,0,0,.2); color: #fff; font-family: inherit; font-size: 20px; font-weight: bold; letter-spacing: .1em; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.spr-main a.spr-btn:hover, .spr-main button.spr-btn:hover { filter: brightness(1.08); }
.spr-main .spr-btn-off, .spr-main a.spr-btn-off:link, .spr-main a.spr-btn-off:visited { background: #9a9a9a; box-shadow: 0 3px 0 #6d6d6d; cursor: default; }
.spr-main .spr-btn-closed, .spr-main a.spr-btn-closed:link, .spr-main a.spr-btn-closed:visited { background: #3a3a3a; box-shadow: 0 3px 0 #111; }
.spr-main .spr-join-sub { margin: 12px 0 0; color: var(--spr-sub); font-size: 12px; text-wrap: balance; }
.spr-main .spr-join-sub a, .spr-main .spr-join-sub a:link, .spr-main .spr-join-sub a:visited { color: var(--spr-red); font-size: 15px; font-weight: bold; text-decoration: underline; }

/* 通知の案内（無料予想） */
.spr-setup { border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-it { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.spr-main .spr-tx { flex: 1; color: var(--spr-sub); font-size: 13px; line-height: 1.6; }
.spr-main .spr-tx b { display: block; color: var(--spr-ink); font-size: 15px; }
.spr-main a.spr-bt, .spr-main a.spr-bt:link, .spr-main a.spr-bt:visited { flex: 0 0 auto; padding: 10px 18px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: bold; text-decoration: none; }
.spr-main a.spr-bt-push { background: var(--spr-red); }

/* ==========================================================================
   会員トップ（カード＋日付タブ）
   ========================================================================== */
.spr-tabs { position: sticky; top: 0; z-index: 50; display: flex; margin: 0 0 14px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-tabs button { flex: 1; margin: 0; padding: 11px 0 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--spr-sub); font-family: inherit; font-size: 15px; font-weight: bold; line-height: 1.3; cursor: pointer; }
.spr-tabs button em { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: normal; }
.spr-tabs button.on { color: var(--spr-ink); border-bottom-color: var(--spr-red); }
.spr-tabs button:hover { color: var(--spr-ink); }
.spr-tabs .spr-w-土 { color: var(--spr-sat); }
.spr-tabs .spr-w-日 { color: var(--spr-sun); }
.spr-tabs .spr-w-月 { color: var(--spr-mon); }

.spr-freetop { margin: 0 0 6px; }
.spr-main .spr-freetop-h { margin: 0 0 6px; color: var(--spr-sub); font-size: 13px; font-weight: bold; }
.spr-free { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spr-free a { display: block; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.12); line-height: 0; }
.spr-free img { display: block; width: 100%; height: auto; }
.spr-free a:hover img { opacity: .85; }

.spr-card { margin: 0 0 14px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-bnr { line-height: 0; font-size: 0; }
.spr-bnr br { display: none; }
.spr-bnr img { display: block; width: 100%; height: auto; }
.spr-bnr span[style*="display:block"] { margin-top: 0 !important; }
.spr-card.is-closed .spr-bnr img { filter: grayscale(.2) brightness(.9); }
.spr-main a.spr-meta, .spr-main a.spr-meta:link, .spr-main a.spr-meta:visited { position: relative; display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; padding: 11px 44px 11px 16px; color: var(--spr-ink); text-decoration: none; }
.spr-main a.spr-meta:hover { background: #faf8f5; }
.spr-main .spr-r1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; font-weight: bold; }
.spr-main .spr-r1 em { font-style: normal; }
.spr-main .spr-r2 { margin-left: auto; color: var(--spr-sub); font-size: 13px; }
.spr-main .spr-day font[color="#1E90FF"], .spr-main .spr-day font[color="#1e90ff"] { color: var(--spr-sat) !important; }
.spr-main .spr-day font[color="#FF0000"], .spr-main .spr-day font[color="#ff0000"] { color: var(--spr-sun) !important; }
.spr-main .spr-day font[color="#3ADF00"], .spr-main .spr-day font[color="#3adf00"] { color: var(--spr-mon) !important; }
.spr-main .spr-r2 font[color="#FFFF00"], .spr-main .spr-r2 font[color="#ffff00"] { color: var(--spr-gold) !important; }
.spr-main .spr-empty { padding: 22px; border-radius: 10px; background: #fff; color: var(--spr-sub); font-size: 14px; text-align: center; }
.spr-top .spr-h[id], #fplan.spr-freetop { scroll-margin-top: 70px; }
.spr-top .spr-sec:first-of-type .spr-h { margin-top: 18px; }

/* ==========================================================================
   商品ページ：中身（DB の画像と文章）は今のまま。表・ボタン・注意事項だけ新しく
   ========================================================================== */
.spr-plan .spr-plan-body { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding-bottom: 6px; }
.spr-plan-body img { max-width: 100%; }
/* 提供情報の表（race_offer_table・race_offer_table1〜5）：黒地は文字色を活かすため残す。飾り画像は外して角丸の表に */
.spr-plan [class^="race_offer_table"] { width: auto; margin: 22px 30px; padding: 0; overflow: hidden; border-radius: 10px; background: #161616; color: #fff; font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.spr-plan [class^="race_offer_table"] > img { display: none; }
.spr-plan [class^="race_offer_table"] ul { display: flex; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #333; }
.spr-plan [class^="race_offer_table"] ul:last-of-type { border-bottom: 0; }
.spr-plan [class^="race_offer_table"] li { display: block; width: auto; height: auto; margin: 0; padding: 13px 18px; background: none; font-size: 16px; line-height: 1.6; list-style: none; }
.spr-plan [class^="race_offer_table"] li:first-child { flex: 0 0 150px; width: 150px; padding: 13px 18px; background: #252525; color: var(--spr-gold); font-size: 14px; font-weight: bold; text-align: left; }
.spr-plan [class^="race_offer_table"] li:first-child p { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--spr-gold); font-weight: bold; }
.spr-plan [class^="race_offer_table"] li:last-child { flex: 1; width: auto; padding-left: 18px; color: #fff; font-weight: bold; }

/* 注意事項（たためる・初期は開いたまま） */
.spr-caution { margin: 22px 0 0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-caution summary { padding: 14px 18px; font-size: 15px; font-weight: bold; cursor: pointer; }
.spr-main .spr-caution p { padding: 0 18px 18px; color: #444; font-size: 13px; line-height: 1.8; }

/* 商品の中身（DB）に埋め込まれた参加ボタンの画像（2日セットの相方の日＝P 土日連動）を、テンプレートのボタン（.spr-btn）と同じ見た目にする。
   対象は今の3つの画像（joinBtn＝参加する・readyBtn＝準備中・endcBtn＝完売。sp・pc どちらの画像も）だけ。画像は隠して文字で出す。:has() が使えない古いブラウザは今の画像のまま（スマホ 10/13 と同じ） */
.spr-plan-body p.processBtn:has(img[src*="/joinBtn."]), .spr-plan-body p.processBtn:has(img[src*="/readyBtn."]), .spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) { width: 480px; margin: 24px auto 10px; text-align: center; }
.spr-plan-body p.processBtn:has(img[src*="/joinBtn."]) img, .spr-plan-body p.processBtn:has(img[src*="/readyBtn."]) img, .spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) img, .spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) br { display: none; }
.spr-plan-body p.processBtn:has(img[src*="/joinBtn."]) a, .spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) a { display: block; text-decoration: none; }
.spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) a { color: var(--spr-red); font-size: 15px; font-weight: bold; }
.spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) u { text-decoration: underline; }
.spr-plan-body p.processBtn:has(img[src*="/joinBtn."]) a::before, .spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) a::before, .spr-plan-body p.processBtn:has(img[src*="/readyBtn."])::before { display: block; width: 100%; padding: 17px 0; border-radius: 10px; background: linear-gradient(#d00000, #a80000); box-shadow: 0 3px 0 #6e0000, 0 4px 10px rgba(0,0,0,.2); color: #fff; font-size: 20px; font-weight: bold; letter-spacing: .1em; line-height: 1.4; text-align: center; text-decoration: none; }
.spr-plan-body p.processBtn:has(img[src*="/joinBtn."]) a::before { content: "参加する"; }
.spr-plan-body p.processBtn:has(img[src*="/endcBtn."]) a::before { content: "完売"; margin-bottom: 10px; background: #3a3a3a; box-shadow: 0 3px 0 #111; }
.spr-plan-body p.processBtn:has(img[src*="/readyBtn."])::before { content: "準備中"; background: #9a9a9a; box-shadow: 0 3px 0 #6d6d6d; }

/* ==========================================================================
   ポイント購入・不足・クレジット
   ========================================================================== */
.spr-ptnow { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; padding: 16px 20px; border-radius: 10px; background: #1b1b1b; color: #ddd; font-size: 14px; }
.spr-ptnow b { color: #fff; font-size: 30px; letter-spacing: .02em; }
.spr-ptnow small { margin-left: 2px; color: var(--spr-gold); font-size: 15px; }
.spr-alert { margin: 0 0 16px; padding: 16px 20px; border-radius: 10px; background: #fff4f4; border: 1px solid #f0c4c4; font-size: 15px; line-height: 1.8; }
.spr-main .spr-alert-h { margin-bottom: 6px; color: #c40000; font-size: 16px; font-weight: bold; }
.spr-alert strong { color: #c40000; white-space: nowrap; }
.spr-pays { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spr-main a.spr-pay, .spr-main a.spr-pay:link, .spr-main a.spr-pay:visited { position: relative; display: block; padding: 18px 40px 18px 20px; border: 1px solid var(--spr-line); border-radius: 10px; background: #fff; color: var(--spr-ink); text-decoration: none; }
.spr-main a.spr-pay:hover { border-color: var(--spr-red); box-shadow: 0 0 0 1px var(--spr-red) inset; }
.spr-main a.spr-pay b { display: block; margin-bottom: 8px; font-size: 19px; }
.spr-main a.spr-pay em { display: block; color: var(--spr-sub); font-style: normal; font-size: 13px; line-height: 1.75; }
.spr-main .spr-back { margin: 18px 0 0; font-size: 15px; }
.spr-main .spr-back a, .spr-main .spr-back a:link, .spr-main .spr-back a:visited { color: var(--spr-red); font-weight: bold; }

.spr-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* base.css の label の丸（::before）と余白を打ち消す。radio は base.css で display:none のまま（ラベルを押せば選べる） */
.spr-main label.spr-pkg { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.spr-main label.spr-pkg::before, .spr-main label.spr-pkg::after { content: none; display: none; }
.spr-main label.spr-pkg input { position: absolute; opacity: 0; }
.spr-main label.spr-pkg em { display: block; padding: 14px 0 12px; border: 2px solid var(--spr-line); border-radius: 10px; background: #fff; color: var(--spr-sub); font-style: normal; font-size: 13px; line-height: 1.35; text-align: center; }
.spr-main label.spr-pkg em b { display: block; color: var(--spr-ink); font-size: 22px; }
.spr-main label.spr-pkg em b small { margin-left: 1px; font-size: 12px; }
.spr-main label.spr-pkg:hover em { border-color: #d9a3a3; }
.spr-main label.spr-pkg input:checked + em { border-color: var(--spr-red); background: #fff4f4; box-shadow: 0 0 0 1px var(--spr-red) inset; }
.spr-main label.spr-pkg input:checked + em b { color: var(--spr-red); }

/* ==========================================================================
   無料予想レース
   ========================================================================== */
.spr-main .spr-hero, #Left.spr-main h2.spr-hero { margin: 0 0 16px; padding: 0; overflow: hidden; border-radius: 10px; line-height: 0; background: none; height: auto; }
.spr-main .spr-hero img { display: block; width: 100%; height: auto; }
.spr-ys { margin: 0 0 16px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-main .spr-ys-h { padding: 11px 18px; background: #1b1b1b; color: #fff; font-weight: bold; }
.spr-ys-b { padding: 16px 22px; font-size: 16px; line-height: 1.8; }
.spr-ys-old .spr-ys-h { background: #8a8a8a; }
.spr-ys-old .spr-ys-b { font-size: 15px; }

/* ==========================================================================
   非会員トップ
   ========================================================================== */
.spr-non { background: var(--spr-bg); padding: 0 0 36px; }
.spr-head ~ #Wrapper.spr-non { padding: 0 0 44px; }
.spr-non .spr-hero-img { display: block; width: 1200px; max-width: 100%; height: auto; margin: 0 auto; }
.spr-non-in { width: 1000px; margin: 0 auto; }
.spr-regrow { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; margin: -36px 0 0; position: relative; z-index: 2; }
.spr-regcard { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.spr-main .spr-band { margin: 0; padding: 14px 20px; background: var(--spr-red); color: #fff; font-size: 21px; font-weight: bold; line-height: 1.45; text-align: center; text-wrap: balance; }
.spr-reg { padding: 20px 26px 22px; }
.spr-regform { display: flex; gap: 10px; }
.spr-regform input.spr-mail { flex: 1; height: 52px; margin: 0; padding: 0 14px; border: 2px solid var(--spr-line); border-radius: 8px; background: #fff; color: var(--spr-ink); font-family: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; }
.spr-regform input.spr-mail:focus { outline: 0; border-color: var(--spr-red); }
.spr-main .spr-regform button.spr-btn { flex: 0 0 230px; width: 230px; padding: 0; height: 52px; font-size: 17px; letter-spacing: .04em; }
.spr-main .spr-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--spr-sub); font-size: 13px; }
.spr-main .spr-or::before, .spr-main .spr-or::after { content: ""; flex: 1; height: 1px; background: var(--spr-line); }
.spr-main .spr-reg-lead { margin: 0 0 6px; font-size: 15px; font-weight: bold; line-height: 1.6; }
.spr-main .spr-reg-note { margin: 0; color: var(--spr-sub); font-size: 12px; line-height: 1.7; }
.spr-main .spr-linebtn { max-width: 380px; margin: 16px auto 12px; }
.spr-reg2 .spr-regrow { margin: 48px 0 0; }
.spr-main .spr-reg-note a, .spr-main .spr-reg-note a:link, .spr-main .spr-reg-note a:visited { color: var(--spr-red); text-decoration: underline; }
.spr-main a.spr-btn-line, .spr-main a.spr-btn-line:link, .spr-main a.spr-btn-line:visited { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 0; border-radius: 10px; background: #06c755; box-shadow: 0 3px 0 #04913e; color: #fff; font-size: 19px; font-weight: bold; text-decoration: none; }
.spr-main a.spr-btn-line:hover { filter: brightness(1.06); }
.spr-main a.spr-btn-line b { padding: 2px 7px; border-radius: 6px; background: #fff; color: #06c755; font-size: 12px; font-weight: 900; }
.spr-reg-cau { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--spr-line); list-style: none; }
.spr-reg-cau li { color: var(--spr-sub); font-size: 12px; line-height: 1.7; list-style: none; }
.spr-main .spr-red, .spr-main li.spr-red { color: #c40000; }
.spr-camp { padding: 26px 18px; border: 1px solid #5a4418; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #3a2a12, #111 70%); color: #fff; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.spr-camp p { margin: 0; text-wrap: balance; }
.spr-camp .c1 { display: inline-block; margin-bottom: 12px; padding: 3px 12px; border-radius: 3px; background: var(--spr-red); font-size: 14px; font-weight: bold; }
.spr-camp .c2 { font-size: 16px; font-weight: bold; }
.spr-camp .c3 { white-space: nowrap; margin: 4px 0; color: var(--spr-gold); font-size: 24px; font-weight: bold; line-height: 1.1; }
.spr-camp .c3 b { font-size: 60px; letter-spacing: .02em; background: linear-gradient(#fff3c4, #d4a73c 55%, #9c7420); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spr-camp .c4 { font-size: 17px; font-weight: bold; }
.spr-camp .c5 { margin-top: 14px; padding-top: 12px; border-top: 1px solid #4a3a1c; color: #e6d6ae; font-size: 13px; line-height: 1.6; }
.spr-non .spr-h { display: block; margin: 40px 0 16px; font-size: 22px; line-height: 1.45; }
.spr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.spr-steps li { position: relative; padding: 18px 20px 16px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); list-style: none; }
.spr-steps li > i { display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 3px; background: #1b1b1b; color: var(--spr-gold); font-style: normal; font-size: 12px; font-weight: bold; }
.spr-steps li > b { font-size: 16px; }
.spr-main .spr-steps p { margin: 8px 0 0; font-size: 14px; line-height: 1.75; }
.spr-non .spr-msg { display: block; width: 1000px; max-width: 100%; height: auto; margin: 36px auto 0; border-radius: 10px; }
.spr-rcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spr-rc { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.spr-rc-h { padding: 11px 16px; background: var(--spr-red); color: #fff; line-height: 1.4; }
.spr-rc-h time { display: block; font-size: 12px; opacity: .9; }
.spr-main .spr-rc-h h3 { margin: 0; font-size: 15px; font-weight: bold; }
.spr-rc dl { display: grid; grid-template-columns: 76px 1fr; row-gap: 7px; margin: 0; padding: 12px 16px 14px; font-size: 14px; }
.spr-rc dt { padding-top: 2px; color: var(--spr-sub); font-size: 12px; }
.spr-rc dd { margin: 0; font-weight: bold; }
.spr-rc dd.spr-pay-yen { color: var(--spr-red); font-size: 24px; line-height: 1.1; }
.spr-rc dd.spr-pay-yen small { margin-left: 2px; font-size: 13px; }