/* ==========================================================================
   YFC コートレンタル — V13 CMS追加CSS（/court-rental/ のみ）
   assets/css/yfc-court-rental.css（V12・Visual QA済み）は一切変更せず、その後に読み込む追加専用ファイル。
   管理画面から生成される、V12には存在しなかった状態だけを扱う。
   すべてのセレクタは .yfc-cr 配下に限定。

   Default parity（管理画面で一度も保存していない状態 = V12と同じ内容）:
   - 1. 以外のルールは、V12のdefault出力に存在しないclass（--wide以外の新class / --red / --icon 等）
     にだけ当たるため、defaultの表示には影響しない。
   - 1. は関連料金カードの配置を「V12の固定grid-area」から「並び順 + 横長(span 2)」に切り替える。
     V12 defaultの並び（登録料[wide] / シューズ / ソックス / 個サル[wide] / 個人開放 / 更衣室）では、
     Desktop 4列・Tablet/Mobile 2列のどちらでもV12のgrid-template-areasと同じセルに配置される。
   - 8. はV14.0.2の可読性修正。default表示でもHero H1の文字色を白に固定する（意図的な変更）。
   構成:
     1. 関連料金・サービス：並び順ベースの配置（normal / wide）
     2. アイコン（特徴カード / 関連料金 / レンタル品）
     3. 2時間パック：補足 / 通常料金非表示時
     4. 決済方法リスト
     5. キャンセル料金：補足 / レッド
     6. 利用上の注意：タイトル
     7. 施設情報：画像 / 説明
     8. Hero：H1文字色（V14.0.2）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 関連料金・サービス
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-fees > .yfc-cr-fee {
	grid-area: auto;
}

.yfc-cr .yfc-cr-fees > .yfc-cr-fee--wide {
	grid-area: auto / span 2;
}

/* --------------------------------------------------------------------------
   2. アイコン
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-features__num--icon {
	display: flex;
	line-height: 0;
	color: var(--yfc-green);
}

.yfc-cr .yfc-cr-fee__icon,
.yfc-cr .yfc-cr-rental__icon {
	display: flex;
	line-height: 0;
	color: var(--yfc-green);
}

.yfc-cr .yfc-cr-fee--reg .yfc-cr-fee__icon {
	color: var(--yfc-yellow);
}

/* --------------------------------------------------------------------------
   3. 2時間パック
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-pack__note {
	margin: -4px 0 14px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--yfc-gray-600);
}

/* 通常料金を非表示にして2時間パックだけを表示した場合、先頭の余白を詰める */
.yfc-cr .yfc-cr-pack:first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. 決済方法リスト
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-payment__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   5. キャンセル料金
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-cancel__note {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	opacity: 0.85;
}

.yfc-cr .yfc-cr-cancel__item--red {
	border-color: #B3261E;
	background: #B3261E;
	color: var(--yfc-white);
}

@media (max-width: 767px) {
	.yfc-cr .yfc-cr-cancel__item--has-note {
		flex-wrap: wrap;
	}
	.yfc-cr .yfc-cr-cancel__item--has-note .yfc-cr-cancel__note {
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   6. 利用上の注意
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-notes__title {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 800;
	color: var(--yfc-green-deep);
}

/* --------------------------------------------------------------------------
   7. 施設情報
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-facilities__icon--image {
	overflow: hidden;
	background: var(--yfc-gray-100);
}

.yfc-cr .yfc-cr-facilities__icon--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yfc-cr .yfc-cr-facilities__desc {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--yfc-gray-600);
}

/* --------------------------------------------------------------------------
   8. Hero
   H1がテーマの見出し色で暗く表示されるため、暗いHero背景上で白に固定する。
   -------------------------------------------------------------------------- */
.yfc-cr .yfc-cr-hero .yfc-hero__title {
	color: var(--yfc-white);
}