@charset "utf-8";

/*
Site Name: CycRide 2.1
Description: course detail / typography / section layout
*/

/* course distance：タイトルを共通化し、距離は地図の直前へ独立させる
----------------------------------------- */
.course-distance{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 0 28px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--line);
}

.course-distance dt{
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--muted);
}

.course-distance dd{
	margin: 0;
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
}

/* content：地図の幅を保ち、本文は余白・細い罫線・文字の強弱で整理する
----------------------------------------- */
.course-body{
	display: grid;
	grid-template-columns: 300px minmax(0,1fr);
	gap: clamp(35px,5vw,72px);
	padding: 80px 0;
	border-bottom: 1px solid var(--line);
}

.course-body > h2,
.courseDate-section > h2,
.point-section > h2{
	margin: 0 0 32px;
	color: var(--ink);
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif;
	font-size: clamp(23px,2.2vw,29px);
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .005em;
	overflow-wrap: anywhere;
}

.course-body > h2{
	margin-bottom: 0;
}

.course-content .prose{
	max-width: 760px;
	min-width: 0;
	font-size: 15px;
	line-height: 2.05;
	overflow-wrap: anywhere;
}

.course-content .prose > :first-child{
	margin-top: 0;
}

.course-content .prose > :last-child{
	margin-bottom: 0;
}

.course-content .prose p{
	margin-bottom: 1.5em;
}

/* facts：既存のACF項目だけを、2列・3列の整った表にする
----------------------------------------- */
.courseDate-section{
	padding: 64px 0;
	border-bottom: 1px solid var(--line);
}

.courseDate-detail.facts{
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 0 32px;
}

.courseDate-detail.facts + .facts{
	grid-template-columns: repeat(3,minmax(0,1fr));
}

.facts dl{
	min-width: 0;
	margin: 0;
	padding: 24px 0;
	border-top: 1px solid var(--line);
}

.facts dt{
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 11px;
	letter-spacing: .025em;
}

.facts dd{
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	overflow-wrap: anywhere;
}

/* points：2.0の600x400サイズに合わせ、表示枠を横長の3:2へ統一する
----------------------------------------- */
.point-section{
	padding: 64px 0 32px;
}

.point-grid{
	gap: 44px 32px;
}

/* サムネイル未生成・縦長の元画像でも、表示の高さを元画像に引きずらせない。 */
.course-content .point-img{
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 3/2;
	overflow: hidden;
	background-color: var(--soft);
}

.course-content .point-img img{
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	/* 切り抜きは行うが、縦横を別々に伸ばして写真を歪めない。 */
	object-fit: cover;
	object-position: center;
}

.point-card h3{
	margin: 20px 0 12px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
}

.point-card p{
	font-size: 14px;
	line-height: 2;
}

/* smartphone：本文を1列にし、写真の幅を確保する
----------------------------------------- */
@media all and (max-width: 1000px){
	.course-body{
		display: block;
	}

	.course-body > h2{
		margin-bottom: 24px;
	}
}

@media all and (max-width: 760px){
	.course-distance{
		gap: 10px 18px;
		margin-bottom: 24px;
		padding-bottom: 20px;
	}

	.course-distance dd{
		font-size: 32px;
	}

	.course-body{
		display: block;
		padding: 48px 0;
	}

	.course-body > h2{
		margin-bottom: 24px;
	}

	.courseDate-section{
		padding: 44px 0;
	}

	.courseDate-detail.facts,
	.courseDate-detail.facts + .facts{
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 0 24px;
	}

	.point-section{
		padding: 44px 0 24px;
	}

	.point-grid{
		grid-template-columns: minmax(0,1fr);
		gap: 36px;
	}
}

@media all and (max-width: 370px){
	.courseDate-detail.facts,
	.courseDate-detail.facts + .facts{
		grid-template-columns: minmax(0,1fr);
	}
}