/* ============================================================
   page-testride.css — Test Ride 専用追加スタイル

   静的プロトタイプ /testride.html の inline <style> のうち、stock.css と
   重複しない Test Ride 固有のセクションだけを切り出して移植:

     - .brand-section   : 各メーカー (MV / RE) のセクションラッパ
     - .brand-head      : 「試乗対象車 → 詳しく見る」見出しブロック
     - .tr-contact      : 予約フォーム動線 (Reservation box)

   共有スタイル:
     - .stock-hero / .ride-notice / .stock-grid / .card 等は stock.css 側に
       既に存在。inc/enqueue.php で testride ページにも stock.css を enqueue。

   依存: tokens.css → base.css → header.css → footer.css → stock.css →
         page-testride.css

   読み込み条件 (inc/enqueue.php):
     is_page( 'testride' )
   ============================================================ */

/* =========================================================
   Brand Section (MV / RE のメーカー別 試乗対象車)
   ========================================================= */
.brand-section{
	padding: 2.25rem 1.375rem 0;
}
.brand-section + .brand-section{
	padding-top: 3.5rem;
}

.brand-head{
	display: block;
	margin: 0 auto;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid var(--line-on-light);
	color: var(--ink);
	text-decoration: none;
	transition: opacity .25s ease;
}
.brand-head:hover{ opacity: 0.7; }

.brand-head .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 0.6875rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 0.5rem;
}
.brand-head h2{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 1.375rem;
	letter-spacing: 0.10em;
	color: var(--ink);
}
.brand-head h2 .more{
	display: inline-block;
	margin-left: 0.875rem;
	font-family: var(--en);
	font-weight: 400;
	font-size: 0.6875rem;
	letter-spacing: 0.20em;
	color: var(--dim-on-light);
	vertical-align: middle;
}

/* =========================================================
   Test Ride Contact (Reservation box)
   ========================================================= */
.tr-contact{
	padding: 4.375rem 1.625rem 5.625rem;
	margin: 0 auto;
	text-align: center;
}
.tr-contact .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 0.6875rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 0.875rem;
}
.tr-contact h2{
	margin: 0 0 0.875rem;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 1.25rem;
	letter-spacing: 0.10em;
	color: var(--ink);
}
.tr-contact .desc{
	margin: 0 auto 2rem;
	max-width: 28em;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 0.84375rem;
	letter-spacing: 0.08em;
	line-height: 1.95;
	color: rgba(10,10,10,0.7);
}
.tr-contact .primary{
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.625rem;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--jp);
	font-weight: 300;
	font-size: 0.875rem;
	letter-spacing: 0.20em;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}
.tr-contact .primary:hover{
	background: var(--ink);
	color: var(--paper);
}
.tr-contact .primary .arrow{
	font-family: var(--en);
	font-weight: 300;
}
.tr-contact .or{
	margin: 1.75rem 0 1rem;
	font-family: var(--en);
	font-size: 0.65625rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--dim-on-light);
}
.tr-contact .alt{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: 20rem;
	margin: 0 auto;
}
.tr-contact .alt .row{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.tr-contact .alt .k{
	font-family: var(--mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dim-on-light);
}
.tr-contact .alt .v{
	font-family: var(--en);
	font-weight: 400;
	font-size: 0.90625rem;
	letter-spacing: 0.06em;
	color: var(--ink);
	text-decoration: none;
}
.tr-contact .alt a.v{
	border-bottom: 1px solid rgba(10,10,10,0.18);
	padding-bottom: 0.125rem;
	transition: border-color .25s ease;
}
.tr-contact .alt a.v:hover{ border-bottom-color: var(--ink); }

/* ============================================================
   PC (>= 48rem / 768px)
   ============================================================ */
@media (min-width: 48rem){
	.brand-section{ padding: 3.5rem clamp(2.5rem, 5vw, 4.5rem) 0; }
	.brand-section + .brand-section{ padding-top: 5.5rem; }
	.brand-head{ max-width: 75rem; padding-bottom: 1.375rem; }
	.brand-head .en{ font-size: 0.75rem; letter-spacing: 0.36em; margin-bottom: 0.625rem; }
	.brand-head h2{ font-size: 1.625rem; letter-spacing: 0.12em; }
	.brand-head h2 .more{ margin-left: 1.125rem; font-size: 0.75rem; letter-spacing: 0.22em; }

	.tr-contact{
		max-width: 75rem;
		padding: 6.25rem clamp(2.5rem, 5vw, 4.5rem) 6.875rem;
	}
	.tr-contact .en{ font-size: 0.75rem; letter-spacing: 0.36em; margin-bottom: 1.125rem; }
	.tr-contact h2{ font-size: 1.5rem; letter-spacing: 0.12em; margin-bottom: 1.125rem; }
	.tr-contact .desc{
		font-size: 0.90625rem;
		letter-spacing: 0.08em;
		line-height: 2.05;
		max-width: 34em;
		margin-bottom: 2.375rem;
	}
	.tr-contact .primary{
		font-size: 0.90625rem;
		letter-spacing: 0.24em;
		padding: 1.125rem 2.25rem;
	}
	.tr-contact .or{
		margin: 2.375rem 0 1.375rem;
		font-size: 0.6875rem;
		letter-spacing: 0.34em;
	}
	.tr-contact .alt{
		grid-template-columns: 1fr 1fr;
		max-width: 32.5rem;
		gap: 0 2rem;
	}
	.tr-contact .alt .v{ font-size: 1rem; }
}