@charset "UTF-8";

/* 常設ページ共通。数値は style.css と同じ rem 基準（PC は 1rem=1px、550px 以下は 1rem=0.18vw）。 */

.ksp,
.ksp-intro,
.ksp-guide{
	--ksp-accent: var(--text_color);
	--ksp-rule: color-mix(in srgb, var(--text_color) 18%, transparent);
	--ksp-ease: cubic-bezier(.32, .72, 0, 1);
	word-break: normal;
	overflow-wrap: anywhere;
	line-break: strict;
	font-feature-settings: "palt" 1;
	text-spacing-trim: trim-start;
}
.cocoro_home :is(.ksp, .ksp-intro, .ksp-guide){
	--ksp-accent: var(--color2);
}
.veil_home :is(.ksp, .ksp-intro, .ksp-guide){
	--ksp-accent: var(--color5);
}

/* style.css の h1,h2（欧文セリフ・nowrap・67rem）と p の justify を、和文見出し用に戻す */
.ksp :is(h1, h2),
:is(.ksp-intro, .ksp-guide) :is(h1, h2){
	font-family: "zen-kaku-gothic-new", sans-serif;
	white-space: normal;
	word-break: normal;
	letter-spacing: 0.02em;
	margin: 0;
	text-wrap: balance;
}
.ksp :is(p, li, dd, td, th),
:is(.ksp-intro, .ksp-guide) p{
	text-align: left;
	text-wrap: pretty;
}
.ksp .u,
.ksp-intro .u{
	display: inline-block;
	white-space: nowrap;
}

/* グレー地の CTA をフッターに接させる（.site-footer の margin-top: 150rem を相殺） */
.ksp{
	margin-bottom: -150rem;
}

.ksp .breadcrumb{
	margin: 28rem 0 0;
}

/* ページ見出し */
.ksp-head{
	padding: 64rem 0 72rem;
}
.ksp-head__en{
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 64rem;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 22rem;
}
.ksp-head__title{
	position: relative;
	font-weight: 700;
	font-size: 22rem;
	line-height: 1.5;
	padding: 0 0 0 46rem;
}
.ksp-head__title::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 32rem;
	border-top: 1px solid var(--ksp-accent);
}
.ksp-head__lead{
	max-width: 760rem;
	font-size: 16rem;
	line-height: 2.1;
	letter-spacing: 0.04em;
	margin: 44rem 0 0;
}

.ksp-photo{
	margin: 0 0 20rem;
}
.ksp-photo img{
	display: block;
	width: 100%;
	height: auto;
}

/* セクション */
.ksp-sec{
	padding: 96rem 0;
}
.ksp-sec + .ksp-sec > .center_block{
	border-top: 1px solid var(--ksp-rule);
	padding-top: 96rem;
}
.ksp-sec + .ksp-sec{
	padding-top: 0;
}
.ksp-sec--gray{
	background-color: var(--color1);
	padding-top: 96rem !important;
}
.ksp-sec--gray > .center_block,
.ksp-sec--gray + .ksp-sec > .center_block{
	border-top: 0 !important;
	padding-top: 0 !important;
}
.ksp-sec--gray + .ksp-sec{
	padding-top: 96rem;
}
.ksp-sec > .center_block{
	display: grid;
	grid-template-columns: 250rem minmax(0, 1fr);
	column-gap: 54rem;
}
.ksp-sec__head{
	align-self: start;
}
/* 物件カードなど横幅を使う中身のときは、見出しを上に置いて全幅で組む */
.ksp-sec--stack > .center_block{
	display: block;
}
.ksp-sec--stack .ksp-sec__head{
	margin: 0 0 40rem;
}
.ksp-sec__no{
	display: block;
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 17rem;
	line-height: 1;
	letter-spacing: 0.12em;
	color: var(--ksp-accent);
	margin: 6rem 0 16rem;
}
.ksp-sec__title{
	font-weight: 700;
	font-size: 25rem;
	line-height: 1.55;
}
.ksp-body{
	min-width: 0;
	font-size: 15rem;
	line-height: 2.05;
	letter-spacing: 0.04em;
}
.ksp-body > :first-child{
	margin-top: 0;
}
.ksp-body > :last-child{
	margin-bottom: 0;
}
.ksp-body p{
	margin: 0 0 1.5em;
}
.ksp-body h3{
	font-size: 18rem;
	line-height: 1.6;
	letter-spacing: 0.03em;
	margin: 2.6em 0 0.8em;
}
.ksp-body a{
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: color 0.4s var(--ksp-ease);
}
.ksp-body a:hover{
	color: var(--ksp-accent);
}

.ksp-list{
	list-style: none;
	margin: 0 0 1.8em;
	padding: 0;
}
.ksp-list li{
	position: relative;
	padding: 0 0 0 1.5em;
	margin: 0 0 0.5em;
}
.ksp-list li::before{
	content: "";
	position: absolute;
	left: 0.1em;
	top: 1em;
	width: 0.7em;
	border-top: 1px solid var(--ksp-accent);
}

.ksp-note{
	font-size: 12rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color7);
	margin: 1.2em 0 0;
}
.ksp-note a{
	color: inherit;
}

/* 表 */
.ksp-table-wrap{
	overflow-x: auto;
	margin: 0 0 1.8em;
}
.ksp-table{
	border-collapse: collapse;
	width: 100%;
	font-size: 14rem;
	line-height: 1.8;
	border-top: 1px solid var(--text_color);
}
.ksp-table :is(th, td){
	vertical-align: top;
	border-bottom: 1px solid var(--ksp-rule);
	padding: 16rem 20rem 16rem 0;
	font-weight: 400;
}
.ksp-table thead th{
	font-size: 12rem;
	letter-spacing: 0.08em;
	color: var(--color7);
	padding: 12rem 20rem 12rem 0;
	white-space: nowrap;
}
.ksp-table tbody th{
	font-weight: 700;
	white-space: nowrap;
	padding-right: 32rem;
}
.ksp-table .num{
	font-family: "roboto", sans-serif;
	font-weight: 700;
	white-space: nowrap;
}
.ksp-table tr.is-own :is(th, td){
	color: var(--ksp-accent);
	font-weight: 700;
}

/* 流れ（番号つきの手順） */
.ksp-steps{
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--text_color);
}
.ksp-step{
	display: grid;
	grid-template-columns: 96rem minmax(0, 1fr);
	column-gap: 28rem;
	padding: 36rem 0 40rem;
	border-bottom: 1px solid var(--ksp-rule);
}
.ksp-step__no{
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 58rem;
	line-height: 0.9;
	letter-spacing: 0;
}
.ksp-step__no small{
	display: block;
	font-size: 11rem;
	letter-spacing: 0.2em;
	margin: 0 0 10rem;
	color: var(--ksp-accent);
}
.ksp-step__title{
	font-size: 20rem;
	line-height: 1.5;
	margin: 0 0 6rem;
}
.ksp-step__term{
	font-size: 12rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ksp-accent);
	margin: 0 0 14rem;
}
.ksp-step p{
	margin: 0 0 1em;
}
.ksp-step p:last-child{
	margin-bottom: 0;
}
.ksp-step dl{
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 20rem;
	font-size: 13rem;
	line-height: 1.9;
	margin: 18rem 0 0;
	padding: 14rem 0 0;
	border-top: 1px dashed var(--ksp-rule);
}
.ksp-step dt{
	font-weight: 700;
}
.ksp-step dd{
	margin: 0;
}

.ksp-after-steps{
	margin-top: 2em !important;
}

/* 項目と内容（会社概要など） */
.ksp-dl{
	margin: 0 0 1.8em;
	border-top: 1px solid var(--text_color);
}
.ksp-dl > div{
	display: grid;
	grid-template-columns: 190rem minmax(0, 1fr);
	column-gap: 20rem;
	padding: 16rem 0;
	border-bottom: 1px solid var(--ksp-rule);
}
.ksp-dl dt{
	font-weight: 700;
}
.ksp-dl dd{
	margin: 0;
}

.ksp-group{
	margin: 0 0 56rem;
}
.ksp-group:last-child{
	margin-bottom: 0;
}
.ksp-group__name{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6rem 18rem;
	font-size: 19rem !important;
	margin: 0 0 16rem !important;
}
.ksp-group__name small{
	font-size: 12rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--color7);
}

/* 質問と答え */
.ksp-qa{
	margin: 0;
	border-top: 1px solid var(--text_color);
}
.ksp-qa > div{
	padding: 30rem 0 34rem;
	border-bottom: 1px solid var(--ksp-rule);
}
.ksp-qa dt{
	position: relative;
	font-weight: 700;
	font-size: 17rem;
	line-height: 1.7;
	padding: 0 0 0 44rem;
	margin: 0 0 12rem;
}
.ksp-qa dd{
	position: relative;
	margin: 0;
	padding: 0 0 0 44rem;
}
.ksp-qa :is(dt, dd)::before{
	position: absolute;
	left: 0;
	top: -0.12em;
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 26rem;
	line-height: 1.3;
}
.ksp-qa dt::before{
	content: "Q";
	color: var(--ksp-accent);
}
.ksp-qa dd::before{
	content: "A";
	color: var(--color3);
}

/* 一覧がセクションの最後に来るとき、次のセクションの罫線と二重になるのを防ぐ */
.ksp-body > :is(.ksp-qa, .ksp-steps):last-child > :last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

/* リンク一覧 */
.ksp-sec--links > .center_block{
	display: block;
}
.ksp-links__heading{
	font-weight: 700;
	font-size: 14rem;
	letter-spacing: 0.1em;
	margin: 0 0 18rem !important;
}
.ksp-links{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 54rem;
	border-top: 1px solid var(--text_color);
}
.ksp-links a{
	position: relative;
	display: block;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none;
	padding: 22rem 44rem 22rem 0;
	border-bottom: 1px solid var(--ksp-rule);
	transition: color 0.4s var(--ksp-ease);
}
.ksp-links a::after{
	content: "";
	position: absolute;
	right: 8rem;
	top: 50%;
	width: 9rem;
	aspect-ratio: 1;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	transition: transform 0.4s var(--ksp-ease);
}
.ksp-links a:hover{
	color: var(--ksp-accent);
}
.ksp-links a:hover::after{
	transform: translate(5rem, -50%) rotate(45deg);
}
.ksp-links__title{
	display: block;
	font-weight: 700;
	font-size: 16rem;
	line-height: 1.6;
}
.ksp-links__desc{
	display: block;
	font-size: 12rem;
	line-height: 1.8;
	letter-spacing: 0.04em;
	color: var(--color7);
	margin: 4rem 0 0;
}

/* 物件カード（緑地の一覧用スタイルを白地で使うための調整） */
.ksp-properties{
	margin: 0 0 24rem;
}
.ksp-more{
	margin: 0;
}
.ksp-more a{
	font-weight: 700;
}

/* お問い合わせ */
.ksp-cta{
	background-color: var(--color1);
	padding: 96rem 0 90rem;
	text-align: center;
}
.ksp-cta__en{
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 15rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center !important;
	color: var(--ksp-accent);
	margin: 0 0 18rem;
}
.ksp-cta__title{
	font-weight: 700;
	font-size: 27rem;
	line-height: 1.5;
}
.ksp-cta__text{
	max-width: 620rem;
	font-size: 15rem;
	line-height: 2;
	letter-spacing: 0.04em;
	margin: 22rem auto 0;
}
.ksp-cta .line_mail{
	margin: 44rem 0 26rem;
}
.ksp-cta .button3{
	background-color: #fff;
}
.ksp-cta__tel{
	text-align: center !important;
	font-size: 13rem;
	letter-spacing: 0.06em;
	margin: 0;
}
.ksp-cta__tel a{
	font-family: "roboto", sans-serif;
	font-weight: 700;
	font-size: 20rem;
	text-decoration: none;
	margin: 0 0 0 8rem;
}

/* 素材待ちの枠（ログイン中の編集者だけに出る） */
.ksp-blank{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4rem 14rem;
	font-size: 13rem;
	line-height: 1.7;
	border: 1px dashed #b88a00;
	background-color: #fffbea;
	padding: 12rem 16rem;
	margin: 0 0 14rem;
}
.ksp-blank__tag{
	font-size: 11rem;
	letter-spacing: 0.06em;
	color: #8a6700;
}
.ksp-blank__note{
	flex-basis: 100%;
	color: var(--color6);
}

/* ブランドトップに置く H1 と案内 */
.ksp-intro{
	padding: 54rem 0 0;
}
.ksp-intro__title{
	font-weight: 700;
	font-size: 26rem;
	line-height: 1.6;
}
.ksp-intro__title small{
	display: block;
	font-family: "garamond-premier-pro", serif;
	font-weight: 700;
	font-size: 14rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ksp-accent);
	margin: 0 0 12rem;
}
.ksp-intro__lead{
	max-width: 760rem;
	font-size: 15rem;
	line-height: 2.05;
	letter-spacing: 0.04em;
	margin: 20rem 0 0;
}

.ksp-guide{
	padding: 100rem 0;
}
.ksp-guide__head{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30rem;
	margin: 0 0 34rem;
}
.ksp-guide__head h2{
	font-family: "garamond-premier-pro", serif !important;
	font-size: 67rem;
	line-height: 1;
	letter-spacing: 0.05em !important;
	white-space: nowrap !important;
}
.ksp-guide__head h2 small{
	margin: 10rem 0 0 5rem;
}
.ksp-guide__lead{
	max-width: 620rem;
	font-size: 14rem;
	line-height: 2;
	letter-spacing: 0.04em;
	margin: 0;
}
.ksp-guide__cols{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 44rem;
}
.ksp-guide__col h3{
	font-size: 15rem;
	letter-spacing: 0.08em;
	padding: 0 0 12rem;
	margin: 0;
	border-bottom: 1px solid var(--text_color);
}
.ksp-guide__col .ksp-links{
	display: block;
	border-top: 0;
}
.ksp-guide--two .ksp-links{
	display: grid;
	border-top: 1px solid var(--text_color);
}

@media (prefers-reduced-motion: reduce){
	.ksp *,
	.ksp *::after{
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 550px){
	/* ブランドページはロゴがヘッダーの下へ 75rem はみ出して表示される（style.css の .cocoro_veil … .site-branding img） */
	.cocoro_veil .ksp{
		padding-top: 110rem;
	}
	.ksp .breadcrumb{
		margin: 30rem 0 0;
	}
	.ksp .breadcrumb__list{
		font-size: 16rem;
	}
	.ksp-head{
		padding: 60rem 0 64rem;
	}
	.ksp-head__en{
		font-size: 66rem;
		margin: 0 0 24rem;
	}
	.ksp-head__title{
		font-size: 27rem;
		padding: 0 0 0 44rem;
	}
	.ksp-head__title::before{
		width: 30rem;
	}
	.ksp-head__lead{
		font-size: 21rem;
		line-height: 2;
		margin: 40rem 0 0;
	}
	.ksp-sec{
		padding: 80rem 0;
	}
	.ksp-sec + .ksp-sec > .center_block{
		padding-top: 80rem;
	}
	.ksp-sec--gray,
	.ksp-sec--gray + .ksp-sec{
		padding-top: 80rem !important;
	}
	.ksp-sec > .center_block{
		display: block;
	}
	.ksp-sec__head{
		margin: 0 0 34rem;
	}
	.ksp-sec__no{
		font-size: 20rem;
		margin: 0 0 14rem;
	}
	.ksp-sec__title{
		font-size: 31rem;
		line-height: 1.5;
	}
	.ksp-body{
		font-size: 21rem;
		line-height: 2;
		letter-spacing: 0.03em;
	}
	.ksp-body h3{
		font-size: 24rem;
	}
	.ksp-note{
		font-size: 16rem;
	}

	.ksp-table{
		font-size: 19rem;
		line-height: 1.7;
	}
	.ksp-table :is(th, td){
		padding: 18rem 20rem 18rem 0;
	}
	.ksp-table thead th{
		font-size: 16rem;
	}
	.ksp-table tbody th{
		white-space: normal;
		min-width: 6em;
		padding-right: 20rem;
	}
	.ksp-table--wide{
		min-width: 720rem;
	}

	.ksp-step{
		grid-template-columns: 80rem minmax(0, 1fr);
		column-gap: 20rem;
		padding: 40rem 0 44rem;
	}
	.ksp-step__no{
		font-size: 58rem;
	}
	.ksp-step__no small{
		font-size: 14rem;
	}
	.ksp-step__title{
		font-size: 26rem;
		margin: 0 0 8rem;
	}
	.ksp-step__term{
		font-size: 17rem;
	}
	.ksp-step dl{
		display: block;
		font-size: 18rem;
	}

	.ksp-dl > div{
		display: block;
		padding: 20rem 0;
	}
	.ksp-group__name{
		font-size: 25rem !important;
	}
	.ksp-group__name small{
		font-size: 16rem;
	}

	.ksp-qa > div{
		padding: 34rem 0 38rem;
	}
	.ksp-qa dt{
		font-size: 23rem;
		padding: 0 0 0 46rem;
	}
	.ksp-qa dd{
		padding: 0 0 0 46rem;
	}
	.ksp-qa :is(dt, dd)::before{
		font-size: 34rem;
	}

	.ksp-links__heading{
		font-size: 19rem;
	}
	.ksp-links{
		display: block;
	}
	.ksp-links a{
		padding: 26rem 50rem 26rem 0;
	}
	.ksp-links a::after{
		width: 12rem;
	}
	.ksp-links__title{
		font-size: 22rem;
	}
	.ksp-links__desc{
		font-size: 17rem;
	}

	.ksp-cta{
		padding: 84rem 0 80rem;
		text-align: left;
	}
	.ksp-cta__en{
		font-size: 19rem;
		text-align: left !important;
	}
	.ksp-cta__title{
		font-size: 31rem;
	}
	.ksp-cta__text{
		font-size: 21rem;
		margin: 24rem 0 0;
	}
	.ksp-cta .line_mail{
		flex-direction: column;
		align-items: stretch;
		gap: 20rem;
		margin: 44rem 0 34rem;
	}
	.ksp-cta .line_mail .button3{
		min-width: 0;
		padding: 0.9em 2em;
	}
	.ksp-cta__tel{
		text-align: left !important;
		font-size: 18rem;
	}
	.ksp-cta__tel a{
		font-size: 28rem;
	}

	.ksp-blank{
		font-size: 18rem;
	}
	.ksp-blank__tag{
		font-size: 15rem;
	}

	.ksp-intro{
		padding: 50rem 0 0;
	}
	.ksp-intro__title{
		font-size: 30rem;
	}
	.ksp-intro__title small{
		font-size: 17rem;
	}
	.ksp-intro__lead{
		font-size: 21rem;
		line-height: 2;
	}

	.ksp-guide{
		padding: 90rem 0;
	}
	.ksp-guide__head{
		display: block;
	}
	.ksp-guide__lead{
		font-size: 21rem;
		margin: 30rem 0 0;
	}
	.ksp-guide__cols{
		display: block;
	}
	.ksp-guide__col{
		margin: 0 0 50rem;
	}
	.ksp-guide__col:last-child{
		margin-bottom: 0;
	}
	.ksp-guide__col h3{
		font-size: 21rem;
	}
}