@charset "utf-8";

/*
Site Name: CycRide 2.1
Description: shared page title / standard page content
*/

/* page title：お問い合わせを基準に、4種類のページで同じ位置・文字組みを使う
----------------------------------------- */
.page-heading{
	padding-top: 34px;
	padding-bottom: 0;
}

.page-heading .cycride-breadcrumbs{
	padding: 0;
	font-size: 10px;
	line-height: 1.8;
}

.page-heading .cycride-breadcrumbs a{
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-heading #headline{
	padding: 44px 0 0;
	text-align: left;
}

.page-heading #headline h1{
	margin: 0;
	color: var(--ink);
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif;
	font-size: clamp(35px,4vw,58px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .015em;
	overflow-wrap: anywhere;
}

.page-heading .page-title-rule{
	display: flex;
	width: 110px;
	height: 3px;
	margin-top: 27px;
}

.page-heading .page-title-rule i:nth-child(1){
	width: 55%;
	background-color: var(--brand);
}

.page-heading .page-title-rule i:nth-child(2){
	width: 20%;
	background-color: #88a938;
}

.page-heading .page-title-rule i:nth-child(3){
	width: 13%;
	background-color: #ef872c;
}

.page-heading .page-title-rule i:nth-child(4){
	width: 12%;
	background-color: #e95e5b;
}

/* Aboutはメイン画像まで、ほかは本文までを同じ間隔にする。
----------------------------------------- */
main.cr-about{
	padding-top: 0;
}

.cr-about > .hero{
	margin-top: 64px;
}

/* content heading：本文の幅と内容を保ち、太さ・余白で階層を示す
----------------------------------------- */
.standard-page .page-content,
.course-archive .page-content,
.course-content .page-content{
	padding-top: 64px;
}

.standard-page .page-content h2,
.standard-page .page-content h3,
.standard-page .page-content h4,
.standard-page .page-content h5,
.standard-page .page-content h6{
	color: var(--ink);
	font-family: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif;
	line-height: 1.7;
	letter-spacing: .005em;
	overflow-wrap: anywhere;
	scroll-margin-top: calc(var(--cycride-header-height) + 24px);
}

.standard-page .page-content h2{
	margin: 60px 0 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	font-size: clamp(23px,2.2vw,29px);
	font-weight: 500;
}

.standard-page .page-content h3{
	margin: 42px 0 18px;
	font-size: clamp(19px,1.7vw,23px);
	font-weight: 500;
}

.standard-page .page-content h4{
	margin: 32px 0 14px;
	font-size: 18px;
	font-weight: 600;
}

.standard-page .page-content h5,
.standard-page .page-content h6{
	margin: 28px 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.standard-page .page-content > :first-child{
	margin-top: 0;
}

.course-archive .course-archive-grid{
	padding-top: 0;
}

/* smartphone：文字を詰めず、自然な折り返しを優先
----------------------------------------- */
@media all and (max-width: 760px){
	.cr-about > .hero{
		margin-top: 44px;
	}

	.page-heading{
		padding-top: 25px;
	}

	.page-heading #headline{
		padding-top: 32px;
	}

	.page-heading #headline h1{
		font-size: 32px;
		line-height: 1.5;
	}

	.page-heading .page-title-rule{
		width: 88px;
		margin-top: 23px;
	}

	.standard-page .page-content,
	.course-archive .page-content,
	.course-content .page-content{
		padding-top: 44px;
	}

	.standard-page .page-content h2{
		margin-top: 44px;
		padding-bottom: 14px;
	}

	.standard-page .page-content > :first-child{
		margin-top: 0;
	}
}

@media all and (max-width: 370px){
	.page-heading #headline h1{
		font-size: 28px;
	}
}