@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700;900&family=Noto+Sans+JP:wght@700&display=swap");
@import url("../vendor/swiper/swiper-bundle.min.css");

/*
  todayRaceSection など add2605 案件用スタイル・画像参照は css からの相対（../img/ …）。
  top.css と img は必ず同一の add2605 配下に配置すること。
*/

section.todayRaceSection.d-flex.align-items-center {
	/* style.css の min-height（651px / 588px / 411px）を打ち消す */
	min-height: auto !important;
	background-image:
		linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
		url("../img/bk-todayrace.png") !important;
		padding-bottom: 24px !important;
		background-size: cover;
		background-position: right center;
}

@media only screen and (max-width: 1180px) {
	section.todayRaceSection.d-flex.align-items-center {
		min-height: auto !important;
	}
}

@media only screen and (max-width: 767px) {
	section.todayRaceSection.d-flex.align-items-center {
		padding: 0 0 16px !important;
		min-height: 411px !important;
	}
}

@media only screen and (max-width: 640px) {
	section.todayRaceSection.d-flex.align-items-center {
		background-image:
			linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
			url("../img/bk-todayrace-sp.png") !important;
	}
}

.todayRaceSection__inner {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding: 0 5px 0 !important;
	box-sizing: border-box;
}

.todayRaceSection__heading {
	padding-top: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.5rem;
	margin: 0;
}

.todayRaceSection__heading dt,
.todayRaceSection__heading dd {
	margin: 0;
	padding: 0;
}

.todayRaceSection__heading dt,
.todayRaceSection__heading dd {
	color: #fff;
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceSection__heading dd {
	letter-spacing: 1px;
}

/* ----- 本日開催のみ Swiper（add2605。既存 .slideContentInner Slick と独立） ----- */
.swiper.add2605-today-swiper {
	position: relative;
	margin-top: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0 45px;
	/* 隣スライドのチラ見え・トランジション時の溢出をクリップ（矢印は左右 padding 内で配置済み前提） */
	overflow: hidden;
}

.add2605-today-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* 見出しは縮ませず、カード列コンテナが残り高さで伸びる → min-height 内でカード行を縦中央（align-items: center）に */
.add2605-today-swiper .swiper-slide > .todayRaceSection__heading {
	margin-bottom: 10px;
	flex-shrink: 0;
}

.add2605-today-swiper .swiper-slide > .todayRaceCarousel__cards {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	align-self: stretch;
}

/* 矢印位置：entry-tail.js。見える矢印のみ opacity でフェード。640px以下は〜 */
.add2605-today-swiper .swiper-button-prev,
.add2605-today-swiper .swiper-button-next {
	width: 26px;
	height: 26px;
	margin-top: 0;
	color: transparent;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: none;
	outline: none;
	opacity: 1;
	transition:
		opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
		visibility 0s linear 0s;
	will-change: opacity;
}

.add2605-today-swiper .swiper-button-prev::after,
.add2605-today-swiper .swiper-button-next::after {
	display: none !important;
}

.add2605-today-swiper .swiper-button-prev {
	background-image: url("../img/arrow-l.png");
}

.add2605-today-swiper .swiper-button-next {
	background-image: url("../img/arrow-r.png");
}

.add2605-today-swiper .swiper-button-prev.add2605-nav--hidden,
.add2605-today-swiper .swiper-button-next.add2605-nav--hidden {
	visibility: hidden;
	pointer-events: none;
	opacity: 0 !important;
	/* visibility はフェード終了後に隠す */
	transition:
		opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.28s;
}

/* ドラッグ／タッチ開始直後〜滑り中〜トランジション中は先にフェードアウト */
.add2605-today-swiper.add2605-nav--sliding .swiper-button-prev:not(.add2605-nav--hidden),
.add2605-today-swiper.add2605-nav--sliding .swiper-button-next:not(.add2605-nav--hidden) {
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 0.13s cubic-bezier(0.4, 0, 0.6, 1);
}

.todayRaceCarousel__cards {
	display: flex;
	flex-wrap: nowrap;
	/* 横並び時：コンテナが min-height で伸びてもカードを縦方向にストレッチしない＝行として上下中央に寄せる */
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
}

/* 1枚のみ（例: 2/10 前日）。カード幅は 3枚並びの1枚分のまま、行だけ中央寄せ（親の justify-content でも可）。 */
.todayRaceCarousel__cards--single {
	justify-content: center;
}

@media only screen and (max-width: 640px) {

	.todayRaceSection__inner {
		padding: 0 !important;
	}

	/* absolute 矢印が autoHeight でクリップされないよう下に余白（JS: TODAY_MOBILE_NAV_BELOW_GAP + ボタン高さ） */
	.swiper.add2605-today-swiper {
		padding: 0 24px;
		padding-bottom: 48px;
	}

	.todayRaceCarousel__cards {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: center;
		gap: 8px;
		width: 100%;
		box-sizing: border-box;
	}

	.todayRaceCarousel__cards--single {
		justify-content: center;
	}

	/* .todayRaceCard のベース指定より後に単体セレクタがあるため、親付きで詳細度を上げる */
	.todayRaceCarousel__cards .todayRaceCard {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__catch,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__voteDeadline {
		display: none;
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__scale {
		padding: calc(8em / var(--today-card-em-base)) calc(14em / var(--today-card-em-base));
		/* カード高さの下限（縦積み時）。開催なし105px・中止123px・結果120px が
		   10R有 168px と並ぶと段差が目立つため、下限を設けて中身の少ない側を揃える。
		   全カードを揃える 13em（169px）だとセクションが111px伸びてスマホの
		   スクロール量が増えるので、11em（143px）で段差を 63px → 25px に縮める。
		   スライド間の高さは swiper が最も高いスライドに合わせるため元から揃っている。 */
		min-height: 11em;
	}

	/* 見出し（スライダー内のみ）— 640px 以下も横並び */
	.add2605-today-swiper .swiper-slide > .todayRaceSection__heading {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 1.25rem;
		row-gap: 0.5rem;
		text-align: left;
		margin-bottom: 16px;
	}

	.add2605-today-swiper .todayRaceSection__heading .todayRaceSection__headingLabel {
		width: auto;
		text-align: center;
		font-family: "Noto Sans", "Noto Sans JP", sans-serif;
		font-size: 20px;
		font-weight: 700;
		font-style: normal;
		line-height: 167%;
		color: #fff;
	}

	.add2605-today-swiper .todayRaceSection__heading .todayRaceSection__headingDate {
		width: auto;
		text-align: left;
		font-family: "Noto Sans", "Noto Sans JP", sans-serif;
		font-size: 16px;
		font-weight: 700;
		font-style: normal;
		line-height: 167%;
		color: #fff;
		letter-spacing: normal;
	}

	/* カード頭：バッジ・会場・日付（スケール相対＋SPでアイコンだけやや小さく） */
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__head {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: calc(4em / var(--today-card-em-base)) calc(5em / var(--today-card-em-base));
		overflow: hidden;
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__headBadgeRow {
		gap: calc(4em / var(--today-card-em-base));
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand--headingShort .todayRaceCard__series {
		font-size: calc(18em / var(--today-card-em-base));
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__racetypeIcon {
		width: calc(14em / var(--today-card-em-base));
		height: calc(14em / var(--today-card-em-base));
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand {
		margin: calc(7em / var(--today-card-em-base)) 0 0;
	}


	/* 下側の余白を軽く詰める（数値は好みで調整可） */
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__raceBar {
		gap: calc(9em / var(--today-card-em-base));
		margin-bottom: -6px;
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__voteBtn,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__voteBtn:visited {
		padding: calc(4em / var(--today-card-em-base)) calc(16em / var(--today-card-em-base));
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__actions {
		gap: calc(8em / var(--today-card-em-base));
		margin: calc(8em / var(--today-card-em-base)) 0 0;
	}

	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__actionBtn,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__actionBtn:visited {
		padding: calc(6em / var(--today-card-em-base)) calc(5em / var(--today-card-em-base));
	}
}

/* ── バナーセクション ── */
.add2605-bannerSection {
	position: relative;
	background: #302E2C;
	width: 100%;
}

.add2605-bannerSection__body {
	overflow: hidden;
	max-height: 600px;
	transition: max-height 0.35s ease;
}

.add2605-bannerSection--collapsed .add2605-bannerSection__body {
	max-height: 0;
}

html.add2605-banner-no-flash .add2605-bannerSection__body {
	transition: none;
	max-height: 0;
}

.add2605-bannerSection__closeBtn {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 48px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 0 0 6px 6px;
	border: 1px solid #CCC;
	background: #F4F4F4;
	cursor: pointer;
	outline: none;
}

.add2605-bannerSection__closeBtn:focus,
.add2605-bannerSection__closeBtn:focus-visible {
	outline: none;
	border-color: #CCC;
}

.add2605-bannerSection__btnIcon--open {
	display: none;
}

.add2605-bannerSection--collapsed .add2605-bannerSection__btnIcon--close {
	display: none;
}

.add2605-bannerSection--collapsed .add2605-bannerSection__btnIcon--open {
	display: block;
}

.add2605-bannerSection__link {
	display: block;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.add2605-bannerSection__link:hover {
		opacity: 0.7;
	}
}

.add2605-bannerSection__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4%;
	padding: 24px 40px;
	box-sizing: border-box;
	width: 100%;
}

.add2605-bannerSection__left {
	flex: 0 0 39%;
	width: 39%;
	border-radius: 8px;
	overflow: hidden;
}

.add2605-bannerSection__left img {
	display: block;
	width: 100%;
	height: auto;
}

.add2605-bannerSection__right {
	flex: 1 1 auto;
	min-width: 0;
}

.add2605-bannerSection__text {
	margin: 0;
	color: #FFF;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.add2605-bannerSection--col .add2605-bannerSection__inner {
	flex-direction: column;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	gap: 16px;
}

.add2605-bannerSection--col .add2605-bannerSection__left {
	flex: none;
	width: 100%;
}

.add2605-bannerSection--col .add2605-bannerSection__text {
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.add2605-bannerSection__inner {
		flex-direction: column;
		gap: 8px;
		padding: 40px 25px;
	}

	.add2605-bannerSection__closeBtn {
		right: 25px;
	}

	.add2605-bannerSection__left {
		flex: none;
		width: 100%;
	}

	.add2605-bannerSection__text {
		font-size: 14px;
	}
}

/* index02.html 専用: PCで14px・br非表示 */
.add2605-bannerSection__text--v02 {
	font-size: 14px;
}
.add2605-bannerSection__text--v02 br {
	display: none;
}
@media only screen and (max-width: 767px) {
	.add2605-bannerSection__text--v02 br {
		display: inline;
	}
}

/*
 * CQ 単位（cqw）は「その要素」をコンテナにはできず、親のコンテナで解決する。
 * カード本体で container を張り、その子 todayRaceCard__scale で font-size に 100cqw を使うと
 * 「カード幅」を基準に相対になる。
 * タイポの基準・fluid の係数は .todayRaceCard のカスタムプロパティのみ調整すること。
 */
.todayRaceCard {
	/* ── todayRaceCard 配下の相対調整は原則この4つのみ（すべて子孫へ継承） ── */
	/* 旧レイアウト換算で「◆ px = 相当 1em」としたときの ◆（無単位）。calc(Nem / ◆) 全体を一括調整したいとき */
	--today-card-em-base: 12;
	/* カード幅ベース fluid の下限・上限(px) と、中項 100cqw の除数（大きいほど小さめの文字） */
	--today-card-fs-min: 8px;
	--today-card-fs-max: 13px;
	--today-card-fs-cqw-div: 25;

	container-name: todayRaceCard;
	container-type: inline-size;
	box-sizing: border-box;
	flex: 0 0 calc((100% - 16px) / 3);
	width: calc((100% - 16px) / 3);
	max-width: calc((100% - 16px) / 3);
	border-radius: 0 20px 0 0;
	background: rgba(255, 255, 255, 0.95);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
}

.todayRaceCard__scale {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
	font-size: clamp(var(--today-card-fs-min), calc(100cqw / var(--today-card-fs-cqw-div)), var(--today-card-fs-max));
	padding: calc(11em / var(--today-card-em-base)) calc(16em / var(--today-card-em-base));
}


.todayRaceCard__head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: calc(4em / var(--today-card-em-base)) calc(6em / var(--today-card-em-base));
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	align-self: stretch;
	overflow: hidden;
}

.todayRaceCard__headBadgeRow {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: calc(6em / var(--today-card-em-base));
	min-width: 0;
	box-sizing: border-box;
}

.todayRaceCard__headBadge {
	flex: 0 0 auto;
	display: flex;
	padding: calc(1.5em / var(--today-card-em-base));
	justify-content: center;
	align-items: center;
	gap: calc(6em / var(--today-card-em-base));
	border-radius: calc(4em / var(--today-card-em-base));
	background: #c41b1b;
	color: #fff;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: calc(11em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	box-sizing: border-box;
}

.todayRaceCard__headBadgeText {
	display: block;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: clip;
}

.todayRaceCard__racetypeIcon {
	flex-shrink: 0;
	display: block;
	width: calc(15em / var(--today-card-em-base));
	height: calc(15em / var(--today-card-em-base));
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.todayRaceCard__racetypeIcon--01 {
	background-image: url("../img/icon-day.png");
}

.todayRaceCard__racetypeIcon--02 {
	background-image: url("../img/icon-night.png");
}

.todayRaceCard__racetypeIcon--03 {
	background-image: url("../img/icon-midnight.png");
}

.todayRaceCard__racetypeIcon--04 {
	background-image: url("../img/icon-morning.png");
}

.todayRaceCard__headPlace {
	margin: 0;
	padding: 0;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	color: #c41b1b;
	font-family: "Noto Sans", sans-serif;
	font-size: calc(12em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.todayRaceCard__headPeriod {
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	color: #000;
	font-family: "Noto Sans", sans-serif;
	font-size: calc(12em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
/* 枠線・余白はラッパー（内側 p ははみ出しクリップ） */
.todayRaceCard__seriesBand {
	margin: calc(9em / var(--today-card-em-base)) 0 0;
	box-sizing: border-box;
	align-self: stretch;
	max-width: 100%;
	min-width: 0;
	border-top: calc(1em / var(--today-card-em-base)) solid #c41b1b;
	border-bottom: calc(1em / var(--today-card-em-base)) solid #c41b1b;
}


.todayRaceCard__series {
	margin: 0;
	padding: 0;
	color: #c41b1b;
	text-align: center;
	font-style: normal;
	font-weight: 900;
	/* 折り返し可・2行目は縦クリップ（…なし）。字面欠け防止で lh と max-height を同じゆとり値に */
	--today-series-line-box: 1.38;
	line-height: var(--today-series-line-box);
	max-height: calc(1em * var(--today-series-line-box));
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
	/* デフォルト：見出しが長い（6文字以上）。短いときは JS が seriesBand に --headingShort を付与 */
	font-size: calc(10.25em / var(--today-card-em-base));
}


.todayRaceCard__seriesBand--headingShort .todayRaceCard__series {
	font-size: calc(20em / var(--today-card-em-base));
}

.todayRaceCard__seriesBand--headingMiddle .todayRaceCard__series {
	font-size: calc(16em / var(--today-card-em-base));
}

.todayRaceCard__catch {
	margin: calc(10em / var(--today-card-em-base)) 0 0;
	padding: 0;
	box-sizing: border-box;
	align-self: stretch;
	max-width: 100%;
	color: #000;
	text-align: center;
	font-style: normal;
	font-weight: 700;
	line-height:  133.333% ;
	font-size: calc(12em / var(--today-card-em-base));
}

.todayRaceCard__raceBar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: calc(11em / var(--today-card-em-base));
	margin: 0 auto 0;
	padding: 0;
	box-sizing: border-box;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.todayRaceCard__raceBarMain {
	flex: 0 1 auto;
	min-width: 0;
}

.todayRaceCard__raceLine {
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 167%;
}

.todayRaceCard__raceLine .todayRaceCard__raceRound,
.todayRaceCard__raceLine .todayRaceCard__raceStartTime,
.todayRaceCard__raceLine .todayRaceCard__raceStartLbl {
	vertical-align: baseline;
}

.todayRaceCard__raceBarAside {
	flex: 0 0 31%;
	width: 31%;
	max-width: 31%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.todayRaceCard__raceRound {
	margin: 0;
	padding: 0;
	color: #c41b1b;
	text-align: left;
	font-size: calc(25em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceCard__raceStartTime {
	color: #c41b1b;
	font-size: calc(30em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceCard__raceStartLbl {
	color: #c41b1b;
	font-size: calc(15em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceCard__voteBtn,
.todayRaceCard__voteBtn:visited {
	display: block;
	margin: 0;
	border: none;
	border-radius: calc(19em / var(--today-card-em-base));
	background: #c41b1b;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: calc(13em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	padding: calc(5em / var(--today-card-em-base)) calc(18em / var(--today-card-em-base));
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	opacity: 1;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {

	.todayRaceCard .todayRaceCard__voteBtn:hover,
	.todayRaceCard .todayRaceCard__voteBtn:focus-visible {
		color: #fff;
		text-decoration: none;
		opacity: 0.75;
	}

}

.todayRaceCard__voteDeadline {
	margin: 0;
	padding: 0 calc(10em / var(--today-card-em-base));
	box-sizing: border-box;
	align-self: stretch;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.todayRaceCard__voteDeadlineLbl {
	color: #000;
	text-align: center;
	font-size: calc(11em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceCard__voteDeadlineTime {
	color: #c41b1b;
	font-size: calc(15em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

.todayRaceCard__liveTime {
	color: #000;
	font-size: calc(11em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 167%;
}

/* ul に todayRaceCard__actions + todayRaceCard__actions--cols1|cols2|cols3 */
.todayRaceCard__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: calc(10em / var(--today-card-em-base));
	margin: calc(10em / var(--today-card-em-base)) 0 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	align-self: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.todayRaceCard__actionsItem {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-width: 0;
	box-sizing: border-box;
}

.todayRaceCard__actions--cols1 > .todayRaceCard__actionsItem {
	flex: 1 1 100%;
	max-width: 100%;
}

.todayRaceCard__actions--cols2 > .todayRaceCard__actionsItem {
	flex: 1 1 calc((100% - (10em / var(--today-card-em-base))) / 2);
	max-width: calc((100% - (10em / var(--today-card-em-base))) / 2);
}

.todayRaceCard__actions--cols3 > .todayRaceCard__actionsItem {
	flex: 1 1 calc((100% - (20em / var(--today-card-em-base))) / 3);
	max-width: calc((100% - (20em / var(--today-card-em-base))) / 3);
}

.todayRaceCard__actionBtn,
.todayRaceCard__actionBtn:visited {
	display: block;
	width: 100%;
	margin: 0;
	padding: calc(7em / var(--today-card-em-base)) calc(6em / var(--today-card-em-base));
	border: calc(0.5em / var(--today-card-em-base)) solid #000;
	border-radius: calc(19em / var(--today-card-em-base));
	background-color: #fff;
	color: #000;
	text-align: center;
	text-decoration: none;
	font-size: calc(13em / var(--today-card-em-base));
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	cursor: pointer;
	box-sizing: border-box;
	opacity: 1;
	transition: background-color 0.3s ease;
	-webkit-font-smoothing: antialiased;
	transform: translateZ(0);
}

@media (hover: hover) {

	.todayRaceCard .todayRaceCard__actionBtn:hover,
	.todayRaceCard .todayRaceCard__actionBtn:focus-visible {
		color: #000;
		text-decoration: none;
		background-color: #dae0e5;
		border-color: #000;
		opacity: .9;
	}

}

/* 細い端末で em 換算ボーダーが欠けるのを抑止 */
@media only screen and (max-width: 640px) {

	.todayRaceCard__actionBtn,
	.todayRaceCard__actionBtn:visited {
		border-width: 1px !important;
	}

}

@media (prefers-reduced-motion: reduce) {

	.todayRaceCard__voteBtn,
	.todayRaceCard__voteBtn:visited {
		transition: opacity 0.3s ease;
	}

	.todayRaceCard__actionBtn,
	.todayRaceCard__actionBtn:visited {
		transition: none;
	}

	@media (hover: hover) {

		.todayRaceCard .todayRaceCard__actionBtn:hover,
		.todayRaceCard .todayRaceCard__actionBtn:focus-visible {
			transition: none;
		}

	}

}

.todayRaceCard__catch {
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
}

/*
 * カード高さの下限について
 * ---------------------------------------------------------
 * 前日・翌日のスライドとカードの高さを揃えるための指定。「全カードで同じ値」で
 * あれば揃うので、幅ごとに値が変わっても目的は達成できる。
 *
 * 固定px（260/274）だとカードが細い幅で中身との差が余白として残るため
 * （681pxで83px、1008pxで71px）、基準フォント連動の 24.5em に置き換える。
 * 中身の自然高は基準フォントに比例する（実測で 自然高÷基準フォント＝22.1〜24.2）
 * ので、24.5em で全幅を追従できる。係数は実測最大24.2に余裕0.3を足した値。
 *
 * ・カード自身の em は基準フォントを指さないため、min-height は
 *   .todayRaceCard__scale 側に置く（scale の font-size が基準フォント）
 * ・全カードは同じ幅＝同じ基準フォント＝同じ min-height になるので揃う
 * ・min() の第2引数は従来の固定値。これを上限として残すことで、991px と
 *   1440px 付近（従来ほぼ余裕ゼロだった幅）は現行のまま変わらない。
 *   実データで文字数が増えたときの保険も兼ねる
 */
@media screen and (min-width: 641px) {
    .todayRaceCard__scale {
        min-height: min(24.5em, 260px);
    }

    .todayRaceCard__actions {
        margin: auto 0 0;
        padding: 16px 0 0;
    }
}
@media screen and (min-width: 992px) {
    .todayRaceCard__scale {
        min-height: min(24.5em, 274px);
    }

    /* 10R〜放送・締切のグループを、キャッチとボタン群の間で上下中央に置く。
       .todayRaceCard__actions が既に margin-top:auto を持つため、余った高さが
       上下に折半される。992〜1300px付近（サイドバーが出てカードが細くなる帯）で
       下に集中していた空きが解消する。1440px以上は中身が min-height を満たして
       いるため変化なし。
       この帯は締切ブロックが横並び・line-height:167% のままで、10R 側の 167% と
       レディングが釣り合うため、641〜991px のような補正は不要。 */
    .todayRaceCard__raceBar {
        margin-top: auto;
    }
}

/* =========================================================
   641〜991px（タブレット縦・小型ウィンドウ）
   ---------------------------------------------------------
   カード高さ（min-height: 260px）は変えず、中身側を調整して余白を埋める。
   ・放送／ネット投票締切：横並び（space-between）を解除して縦・中央ぞろえ
   ・文字サイズは「10R 15:19」と同じ考え方で、ラベル 14em ／ 時刻 18em に拡大
   ========================================================= */
@media screen and (min-width: 641px) and (max-width: 991px) {
    /* 帯の上端（991px付近）は中身がちょうど260pxで余裕ゼロだったため、
       fluid の係数を 25→26 にして約4%小さくし、10px の余裕を作る。
       768px以下は下限8pxに張り付いているのでほぼ影響しない。 */
    .todayRaceCard {
        --today-card-fs-cqw-div: 26;
    }

    /* column-reverse で「ネット投票締切 → 放送」の順に表示する（要望）。
       HTMLの並びは 放送 → 締切 のままなので、DOM順は変わらない。 */
    .todayRaceCard__voteDeadline {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    /* 「放送＋時間」「ネット投票締切＋時刻」の各行（クラス無しの div） */
    .todayRaceCard__voteDeadline > div {
        text-align: center;
    }

    /* ラベル（放送／ネット投票締切） */
    .todayRaceCard__voteDeadlineLbl {
        font-size: calc(14em / var(--today-card-em-base));
    }

    /* 時刻（10:05〜17:10／14:14） */
    .todayRaceCard__liveTime,
    .todayRaceCard__voteDeadlineTime {
        font-size: calc(18em / var(--today-card-em-base));
    }

    /* 行間を詰める（元は 167%。2行ぶんで約16px縮む） */
    .todayRaceCard__voteDeadline > div,
    .todayRaceCard__voteDeadlineLbl,
    .todayRaceCard__liveTime,
    .todayRaceCard__voteDeadlineTime {
        line-height: 1.2;
    }

    /* min-width:641px の padding-top:16px は固定pxのため、カードが小さい
       この帯では隙間が相対的に大きい。詰めて min-height:260px に収める。 */
    .todayRaceCard__actions {
        padding-top: 4px;
    }

    /* 10R〜放送・締切のグループを、キャッチとボタン群の間で上下中央に置く。
       .todayRaceCard__actions が既に margin-top:auto を持つため、
       raceBar 側にも auto を足すと余った高さが上下に折半される。 */
    .todayRaceCard__raceBar {
        margin-top: auto;
    }

    /* 枠は上下均等でも、見た目は上の余白が大きく見える（調整前 上56px／下42px）。
       原因は上側にだけ乗る2つの空き：
         ・キャッチの min-height:2.5em による文字下の空き
         ・10R 行の line-height:167% によるレディング
       後者を 1.2 に詰めて発生源を減らし（バー高さ 34→25px）、残差を下マージンで
       相殺する。マージンだけで補うとカード高さが膨らんで 991px で 260px を
       超えるため、行間側を先に詰めるのが要点。 */
    .todayRaceCard__raceLine,
    .todayRaceCard__raceLine .todayRaceCard__raceRound,
    .todayRaceCard__raceLine .todayRaceCard__raceStartTime,
    .todayRaceCard__raceLine .todayRaceCard__raceStartLbl {
        line-height: 1.2;
    }

    .todayRaceCard__voteDeadline {
        margin-bottom: calc(10em / var(--today-card-em-base));
    }
}

/* =========================================================
   992〜1250px（PC表示だがサイドバーが出てカードが細い帯）
   ---------------------------------------------------------
   992pxで col-lg-9 のサイドバーが出るためカード幅が逆に狭くなり（1350px:295px
   → 993px:210px）、放送・締切の文字がコンテナクエリで小さくなって可読性が落ちる
   （ラベル 993pxで 7.69px）。641〜991px と同じ扱いにして縦積み＋文字拡大する。

   ・縦積み・中央ぞろえ＋ラベル14em／時刻18em＋行間1.2（帯と同一）
   ・帯で必要だった光学補正（10R行の行間短縮・締切の下マージン）は入れない。
     この帯は 10R 行が line-height:167% のままで上下が釣り合うため、
     入れると逆に崩れる（実測 993pxで 上46px／下60px と悪化）
   ・上限1250pxの根拠：1350px付近は中身の自然高が261pxで min-height:274px まで
     余裕13pxしかなく、縦積みにすると超過する。1250pxなら自然高257px・余裕17px
   ========================================================= */
@media screen and (min-width: 992px) and (max-width: 1250px) {

    /* column-reverse で「ネット投票締切 → 放送」の順に表示する（要望）。
       HTMLの並びは 放送 → 締切 のままなので、DOM順は変わらない。 */
    .todayRaceCard__voteDeadline {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    /* 「放送＋時間」「ネット投票締切＋時刻」の各行（クラス無しの div） */
    .todayRaceCard__voteDeadline > div {
        text-align: center;
    }

    /* ラベル（放送／ネット投票締切） */
    .todayRaceCard__voteDeadlineLbl {
        font-size: calc(14em / var(--today-card-em-base));
    }

    /* 時刻（10:05〜17:10／14:14） */
    .todayRaceCard__liveTime,
    .todayRaceCard__voteDeadlineTime {
        font-size: calc(18em / var(--today-card-em-base));
    }

    .todayRaceCard__voteDeadline > div,
    .todayRaceCard__voteDeadlineLbl,
    .todayRaceCard__liveTime,
    .todayRaceCard__voteDeadlineTime {
        line-height: 1.2;
    }
}

/* =========================================================
   641〜767px：「10R 15:19 発走」の改行を防ぐ
   ---------------------------------------------------------
   raceBarMain の幅は投票ボタン（raceBarAside の 31% 固定）に押されて
   99〜107px しかないのに、基準フォントが下限8px付近に張り付くため文字幅は
   約106px のまま縮まらない。結果 15:19 と 発走 の間の空白で折り返す
   （実測 641pxで必要106px／枠99px）。

   ・時刻を 30em → 26em に下げて必要幅を 106px → 99px にする
     （27em はまだ折り返す。26em が 641px で収まる最大値）
   ・nowrap は保険。データが想定より長い場合も折り返さず、はみ出し分は
     右の gap（約7px）に収まる
   ・768px以上は枠幅108px以上で 30em でも余裕があるため据え置き。境界値は
     既存サイトのSP/PC境界（767px）に合わせた
   ========================================================= */
@media screen and (min-width: 641px) and (max-width: 767px) {

    .todayRaceCard__raceLine {
        white-space: nowrap;
    }

    .todayRaceCard__raceStartTime {
        font-size: calc(26em / var(--today-card-em-base));
    }

    /* シリーズ帯見出しの縦切れ対策。
       文字サイズの段階は entry-tail.js の syncSeriesBandHeadingSizes() が
       文字数（12以下／13〜15／16以上）で決めているが、判定は文字数のみで
       カード幅を見ていない。この帯はカードが細く（641pxで内寸154px）、
       12文字×13.33px＝160px で1行に収まらず2行になる。
       .todayRaceCard__series は max-height 1行ぶん＋overflow:hidden のため
       2行目が省略記号なしで消えていた（641pxで8枚中4枚）。
       各段階を1行に収まる値まで下げる（641pxで切れ0枚を実測）。
       19em では26文字が切れるため 18em が上限。 */
    .todayRaceCard__seriesBand--headingShort .todayRaceCard__series {
        font-size: calc(18em / var(--today-card-em-base));
    }

    .todayRaceCard__seriesBand--headingMiddle .todayRaceCard__series {
        font-size: calc(15em / var(--today-card-em-base));
    }

    .todayRaceCard__series {
        font-size: calc(9em / var(--today-card-em-base));
    }

    /* 「本日の開催」の上とカード下の余白が広い問題。
       26行目の max-width:767px 側で min-height:411px !important が効いており、
       中身が313pxしかないためセクションの align-items:center で差の98pxが
       上下に配られていた（実測 700pxで 見出し上41px／カード下57px）。
       min-height を解除して 768px以上と同じ体裁に揃える
       （セクション337px／見出し上0px／カード下24px）。
       ※ 640px以下（カード縦積み）は中身が411pxを超えるため対象外 */
    section.todayRaceSection.d-flex.align-items-center {
        min-height: auto !important;
        padding: 0 0 24px !important;
    }
}

/* =========================================================
   1251px以上：放送の時間を締切の時刻と同じ大きさに揃える
   ---------------------------------------------------------
   横並びのままの帯だが、放送の時間（10:05〜17:10）だけラベルと同じ 11em で、
   締切の時刻（14:14）は 15em だったため、2つの時刻の大きさが揃っていなかった。
   放送も 15em にして「ラベル 11em ＋ 時刻 15em」の関係を両行で同一にする。

   ・行内のラベルと時刻は inline のベースライン揃え（締切行と同じ挙動）
   ・align-items: flex-end は行同士の下ぞろえ。従来は center で、放送行だけ
     文字が小さく行高が低いため締切行より上にずれていた（実測で約2px）
   ========================================================= */
@media screen and (min-width: 1251px) {

    .todayRaceCard__liveTime {
        font-size: calc(15em / var(--today-card-em-base));
    }

    .todayRaceCard__voteDeadline {
        align-items: flex-end;
    }
}

.todayRaceCard__cancelNotice {
    flex: 1 1 auto;
    margin: 10px 0;
    padding: 0;
    box-sizing: border-box;
    align-self: stretch;
    max-width: 100%;
    text-align: center;
    font-family: "Noto Sans", sans-serif;
    font-size: calc(20em / var(--today-card-em-base));
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#c41b1b;
}
.todayRaceCard__seriesBand--nonRacingDay {
    border-top-color: #302e2c;
    border-bottom-color: #302e2c;
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.todayRaceCard__seriesBand--nonRacingDay .todayRaceCard__series {
    color: #302e2c;
    font-size: calc(20em / var(--today-card-em-base));
}
/* =========================================================
   add2605 追記：シリーズ帯の罫線位置を文字サイズに関係なく揃える
   ---------------------------------------------------------
   paddingを揃えるだけだと、文字サイズの違いで帯の高さが変わるため、
   帯そのものに固定の高さを持たせ、文字は上下左右中央に配置する。
   ========================================================= */
.todayRaceCard__seriesBand,
.todayRaceCard__seriesBand--headingShort,
.todayRaceCard__seriesBand--headingMiddle,
.todayRaceCard__seriesBand--nonRacingDay {
	box-sizing: border-box;
	min-height: calc(58em / var(--today-card-em-base));
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.todayRaceCard__seriesBand .todayRaceCard__series {
	width: 100%;
}

@media only screen and (max-width: 640px) {
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand--headingShort,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand--headingMiddle,
	.todayRaceCarousel__cards .todayRaceCard .todayRaceCard__seriesBand--nonRacingDay {
		min-height: calc(38em / var(--today-card-em-base));
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* =========================================================
   矢印：初期表示制御
   - add2605-nav--ready    : Swiper レイアウト確定後（500ms）
   - add2605-nav--data-ready: 実データ到着 or 5秒タイムアウト後
   両方揃って初めて表示する
   ========================================================= */
.add2605-today-swiper:not(.add2605-nav--ready) .swiper-button-prev,
.add2605-today-swiper:not(.add2605-nav--ready) .swiper-button-next,
.add2605-today-swiper:not(.add2605-nav--data-ready) .swiper-button-prev,
.add2605-today-swiper:not(.add2605-nav--data-ready) .swiper-button-next {
	opacity: 0 !important;
	transition: none !important;
}

/* =========================================================
   スケルトンローディング
   ========================================================= */
@keyframes todayRaceSkeletonSlide {
	0%   { transform: translateX(-200%); }
	100% { transform: translateX( 200%); }
}

/* スケルトン消去アニメーション */
@keyframes todayRaceSkeletonFadeOut {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}


.todayRaceSkeleton {
	background: #dcdcdc !important;
	color: transparent !important;
	border-color: transparent !important;
	pointer-events: none;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
}

.todayRaceSkeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 60%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
	animation: todayRaceSkeletonSlide 2.4s linear infinite;
}

/* スケルトン：デフォルトは不可視（Swiper高さ確保のためDOMには残す） */
.todayRaceCard--skeleton {
	visibility: hidden;
}

/* スケルトン：5秒後に実データ未着なら表示 */
.todayRaceCard--skeleton.is-visible {
	visibility: visible;
}

/* スケルトン：フェードアウト中 */
.todayRaceCard--skeleton.is-hiding {
	animation: todayRaceSkeletonFadeOut 0.3s ease forwards;
	pointer-events: none;
}

/* 実カード：フェードイン（iOS Safari対策：挿入時はopacity:1のままSwiperに高さ計算させ、その後JSクラスでトランジション） */
.todayRaceCard--entering {
	opacity: 0;
}
.todayRaceCard--visible {
	transition: opacity 0.4s ease;
	opacity: 1;
}