@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

/* 共通
 * --u : デザイン(1920px幅・コンテンツ1514px)の1pxに相当する長さ
 *       PC は 1514 分割、SP(~810px) は 700 分割で拡大
*****************************************************************/
.single-wrap{
	--single_main: #e9546b;
	--single_text: #727171;
	--single_pink: #fceef5;
	--single_pink_l: #fadce9;
	--single_pink_card: #fef7fa;
	--single_yellow: #fdd35c;
	--single_red: #e60012;
	--single_grad: linear-gradient(90deg, #f08872, #f7cc66);
	--u: calc(100cqw / 1514);

	font-family: var(--font_biz);
	font-weight: 400;
	color: var(--single_text);
	line-height: 1.8;
	text-align: left;
	overflow: hidden;
	@media (width < 810px) {
		--u: calc(100cqw / 700);
	}

	img{
		width: 100%;
		max-width: none;
		height: auto;
	}
}

/* マーカー */
.single-hl{
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	&.--yellow{
		background: linear-gradient(transparent 58%, var(--single_yellow) 58%, var(--single_yellow) 94%, transparent 94%);
	}
	&.--pink{
		background: linear-gradient(transparent 58%, var(--single_pink_l) 58%, var(--single_pink_l) 94%, transparent 94%);
	}
}

/* セクション */
.single-sec{
	padding-block: calc(80 * var(--u));
	@media (width < 810px) {
		padding-block: 40px;
	}
}
.single-sec--pink{
	background: var(--single_pink);
}
.single-sec__wrap{
	>*{
		&:first-child{
			margin-top: 0;
		}
	}
}

/* グラデーション見出し */
.single-bar{
	text-wrap: balance;
	word-break: keep-all;
	display: grid;
	place-items: center;
	min-height: calc(99 * var(--u));
	padding: 0.2em 0.5em;
	background: var(--single_grad);
	font-size: calc(56.4 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-align: center;
	color: #fff;
	@media (width < 810px) {
		min-height: 0;
		padding: 0.4em 0.5em;
		font-size: calc(46 * var(--u));
		letter-spacing: 0.06em;
	}
}

/* 注釈 */
.single-note{
	margin-top: calc(24 * var(--u));
	font-size: max(10px, calc(14 * var(--u)));
	line-height: 1.6;
	color: var(--font_c);
	@media (width < 810px) {
		margin-top: 16px;
	}
}

/* ボタン */
.single-btn{
	position: relative;
	display: block;
	padding: 0.7em 1em;
	border-radius: calc(8 * var(--u));
	background: var(--single_main);
	font-family: var(--font_min);
	font-size: calc(32.6 * var(--u));
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-align: center;
	color: #fff;
	transition: .5s filter;
	@media (width < 810px) {
		border-radius: 6px;
		font-size: calc(36 * var(--u));
	}
	&::after{
		content: "";
		position: absolute;
		right: 1.2em;
		top: 50%;
		width: 0.6em;
		height: 0.6em;
		background: #fff;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		transform: translateY(-50%);
	}
	&:hover{
		text-decoration: none;
		filter: brightness(1.08);
	}
}


/* メインビジュアル
*****************************************************************/
.single-mainvisual{
	position: relative;
	container-type: inline-size;
	@media (width < 810px) {
		min-height: 380px;
	}
	&::before{
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 1;
		width: calc((824 / 1920) * 100%);
		background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,0));
		@media (width < 810px) {
			width: 100%;
			background: linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,0) 65%);
		}
	}
}
.single-mainvisual__bg{
	@media (width < 810px) {
		position: absolute;
		inset: 0;
	}
	img{
		display: block;
		@media (width < 810px) {
			height: 100%;
			object-fit: cover;
			object-position: 72% center;
		}
	}
}
.single-mainvisual__ttl{
	--s: calc(100cqw / 1920);
	position: absolute;
	top: 33%;
	left: calc((139 / 1920) * 100%);
	z-index: 2;
	font-family: var(--font_biz);
	font-weight: 700;
	line-height: 1.2;
	color: var(--single_text);
	white-space: nowrap;
	@media (width < 810px) {
		--s: calc(100cqw / 1920 * 1.55);
		top: auto;
		bottom: 8%;
		left: 0;
		width: 100%;
		padding-inline: 5%;
		text-align: center;
	}
}
.single-mainvisual__line{
	display: block;
	font-size: calc(54.3 * var(--s));
	/* 黄色下線: 行全体に1本で引き、太さ・位置を大小の文字で統一 */
	text-decoration: underline;
	text-decoration-color: var(--single_yellow);
	text-decoration-thickness: .5em;
	text-underline-offset: -.2em;
	text-decoration-skip-ink: none;
	&.--first{
		margin-left: calc(322 * var(--s));
		@media (width < 810px) {
			margin-left: 0;
		}
	}
	&.--second{
		margin-top: calc(10 * var(--s));
	}
}
.single-mainvisual__em{
	font-size: 1.4em; /* 親(行)の54.3に対し約76 */
	font-style: normal;
	color: var(--single_main);
	&.--lg{
		font-size: 2em; /* 親(行)の54.3に対し約108.5 */
	}
}
.single-mainvisual__cap{
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	font-size: clamp(10px, 5.846px + 0.513vw, 12px);
	color: #000;
}


/* イントロ
*****************************************************************/
.single-intro{
	padding-block: calc(70 * var(--u)) calc(90 * var(--u));
	text-align: center;
	@media (width < 810px) {
		padding-block: 32px 40px;
	}
}
.single-intro__ttl{
	word-break: keep-all;
	max-width: calc(954 * var(--u));
	margin-inline: auto;
	padding-block: calc(20 * var(--u));
	border-block: 2px solid #f4b8c8;
	font-size: calc(49.9 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	color: var(--single_main);
	@media (width < 810px) {
		max-width: none;
		font-size: calc(44 * var(--u));
		padding-block: 12px;
	}
}
.single-intro__txt{
	margin-top: calc(26 * var(--u));
	font-size: calc(32.6 * var(--u));
	line-height: 2.15;
	word-break: keep-all;
	@media (width < 810px) {
		margin-top: 16px;
		font-size: calc(30 * var(--u));
		line-height: 2;
	}
}


/* MERIT
*****************************************************************/
.single-merit{
	display: grid;
	grid-template-columns: 1fr calc(504 * var(--u));
	grid-template-areas:
		"head fig"
		"txt fig"
		"txt btn";
	grid-template-rows: auto auto 1fr;
	column-gap: calc(30 * var(--u));
	margin-top: calc(55 * var(--u));
	padding: calc(30 * var(--u)) calc(57 * var(--u)) calc(30 * var(--u)) calc(42 * var(--u));
	border: 1px solid #c4a0ae;
	border-radius: calc(30 * var(--u));
	background: #fff;
	@media (width < 810px) {
		grid-template-columns: 100%;
		grid-template-areas:
			"head"
			"fig"
			"txt"
			"btn";
		grid-template-rows: auto;
		margin-top: 24px;
		padding: 20px 16px;
		border-radius: 16px;
	}
}
.single-merit__head{
	grid-area: head;
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	@media (width < 810px) {
		gap: 12px;
	}
	@media (width < 500px) {
		flex-direction: column;
		align-items: flex-start;
	}
}
.single-merit__num{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: calc(14 * var(--u));
	font-family: var(--font_din);
	font-weight: 700;
	line-height: 1;
	color: var(--single_main);
}
.single-merit__num-en{
	display: grid;
	place-items: center;
	width: calc(124 * var(--u));
	height: calc(66 * var(--u));
	border-radius: 100vmax;
	background: var(--single_main);
	font-size: calc(31.2 * var(--u));
	color: #fff;
	@media (width < 810px) {
		width: calc(124 * var(--u) * 1.1);
		height: calc(66 * var(--u) * 1.1);
	}
}
.single-merit__num-fig{
	font-size: calc(58.6 * var(--u));
}
.single-merit__ttl{
	word-break: keep-all;
	font-size: calc(49.9 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	color: var(--single_main);
	@media (width < 810px) {
		font-size: calc(40 * var(--u));
	}
}
.single-merit__txt{
	grid-area: txt;
	margin-top: calc(24 * var(--u));
	font-size: calc(29.5 * var(--u));
	line-height: 1.65;
	@media (width < 810px) {
		margin-top: 12px;
		font-size: calc(30 * var(--u));
		line-height: 1.7;
	}
}
.single-merit__note{
	display: inline-block;
	margin-left: 0.5em;
	font-size: max(10px, calc(14 * var(--u)));
	line-height: 1.4;
	color: var(--font_c);
	@media (width < 500px) {
		display: block;
		margin: 0.8em 0 0;
	}
}
.single-merit__img{
	grid-area: fig;
	position: relative;
	overflow: hidden;
	border-radius: calc(30 * var(--u));
	@media (width < 810px) {
		margin-top: 12px;
		border-radius: 12px;
	}
	img{
		display: block;
	}
	figcaption{
		position: absolute;
		right: 0.8em;
		bottom: 0.4em;
		font-size: max(10px, calc(15.2 * var(--u)));
		line-height: 1.4;
		color: var(--font_c);
		&.--white{
			color: #fff;
		}
	}
}
.single-merit__btn{
	grid-area: btn;
	align-self: start;
	margin-top: calc(16 * var(--u));
	@media (width < 810px) {
		margin-top: 16px;
	}
}


/* 暮らしを豊かにする住まい
*****************************************************************/
/* 間取り */
.single-plan{
	margin-top: calc(60 * var(--u));
}
.single-plan__head{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: calc(60 * var(--u));
	@media (width < 810px) {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
}
.single-plan__type{
	color: var(--single_main);
}
.single-plan__type-name{
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: calc(10 * var(--u));
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--single_main);
	font-family: var(--font_geo);
	font-weight: 500;
	line-height: 1;
}
.single-plan__type-f{
	font-size: calc(157 * var(--u));
}
.single-plan__type-txt{
	font-size: calc(60.5 * var(--u));
	letter-spacing: 0.2em;
}
.single-plan__type-room{
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	margin-top: calc(10 * var(--u));
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--single_main);
	font-family: var(--font_geo);
	font-size: calc(70 * var(--u));
	font-weight: 400;
	line-height: 1;
}
.single-plan__type-sub{
	position: relative;
	padding-left: 1em;
	font-family: var(--font_biz);
	font-size: calc(34.5 * var(--u));
	line-height: 1.3;
}
/* 「＋」のみ左にはみ出させ、2行目と「ウォークスルー」の頭を揃える */
.single-plan__type-plus{
	position: absolute;
	left: 0;
}
.single-plan__area{
	padding-top: calc(10 * var(--u));
	font-size: calc(27.3 * var(--u));
	line-height: 1.7;
	li{
		&.--total{
			margin-top: calc(10 * var(--u));
			padding-top: calc(10 * var(--u));
			border-top: 1px solid #c4c4c4;
		}
	}
}
.single-plan__area-num{
	font-family: var(--font_geo);
	font-size: calc(42 * var(--u));
	font-weight: 300;
}
.single-plan__area-fig{
	font-family: var(--font_geo);
}
.single-plan__area-tsubo{
	font-size: calc(28.5 * var(--u));
}
.single-plan__img{
	width: calc((1180 / 1514) * 100%);
	margin: calc(30 * var(--u)) auto 0;
	@media (width < 810px) {
		width: 100%;
	}
}

/* 設備カード */
.single-feature{
	position: relative;
	width: 100%;
	max-width: 1184px;
	margin: calc(100 * var(--u)) auto 0;
	padding: calc(70 * var(--u)) calc(70 * var(--u)) max(calc(80 * var(--u)), 52px) calc(73 * var(--u));
	border: 1px solid #f0b6c9;
	border-radius: calc(30 * var(--u));
	background: var(--single_pink_card);
	@media (width < 810px) {
		max-width: none;
		margin-top: 64px;
		padding: 56px 16px 24px;
		border-radius: 16px;
	}
	figure{
		position: relative;
	}
	img{
		display: block;
	}
	/* キャプションは画像の下に出し、画像の下端が列ごとに揃うようにする */
	figcaption{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		word-break: keep-all;
		margin-top: calc(6 * var(--u));
		font-size: max(12px, calc(17.5 * var(--u)));
		line-height: 1.3;
		text-align: center;
		color: #000;
		@media (width < 810px) {
			position: static;
			font-size: max(10px, calc(24 * var(--u)));
			margin-top: 5px;
		}
		&.--in{
			position: absolute;
			top: auto;
			left: auto;
			right: 0.8em;
			bottom: 0.4em;
			margin: 0;
			font-size: max(10px, calc(13.1 * var(--u)));
			color: #fff;
		}
	}
}
.single-feature__ttl{
	position: absolute;
	top: calc(-31 * var(--u));
	left: 50%;
	width: calc((960 / 1184) * 100%);
	padding: 0.35em 1.5em;
	background: var(--single_main);
	clip-path: polygon(0 0, 100% 0, calc(100% - 1.1em) 50%, 100% 100%, 0 100%, 1.1em 50%);
	font-size: calc(34 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
	color: #fff;
	transform: translateX(-50%);
	z-index: 1;
	/* SPは見出しの行数が増えても写真・バッジと重ならないよう、通常フローに置く */
	@media (width < 810px) {
		position: relative;
		top: auto;
		left: auto;
		width: 94%;
		margin: -78px auto 16px;
		padding: 0.5em 1.4em;
		font-size: calc(32 * var(--u));
		transform: none;
	}
}
.single-feature__body{
	display: flex;
	align-items: flex-start;
	gap: calc(36 * var(--u));
	@media (width < 810px) {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
}
/* キッチン */
.single-feature__main{
	flex: 567 1 0;
}
.single-feature__sub{
	flex: 439 1 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(39 * var(--u)) calc(33 * var(--u));
	@media (width < 810px) {
		gap: 12px;
	}
}
/* 洗面 */
.single-feature__body.--wash{
	gap: calc(42 * var(--u));
	@media (width < 810px) {
		gap: 16px;
	}
}
.single-feature__wash-a{
	flex: 377 1 0;
	.single-feature__badge{
		position: absolute;
		top: calc(16 * var(--u));
		right: calc(12 * var(--u));
		display: grid;
		place-items: center;
		width: calc(93 * var(--u));
		aspect-ratio: 1;
		border-radius: 50%;
		background: #cf000e;
		font-size: calc(28.5 * var(--u));
		line-height: 1.25;
		text-align: center;
		color: #fff;
		@media (width < 810px) {
			width: calc(115 * var(--u));
			font-size: calc(32 * var(--u));
		}
	}
}
.single-feature__wash-b{
	flex: 234 1 0;
	display: grid;
	gap: calc(41 * var(--u));
	@media (width < 810px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}
.single-feature__wash-c{
	flex: 345 1 0;
}
/* 収納 */
.single-feature__st-a,
.single-feature__st-b{
	flex: 328 1 0;
}
.single-feature__st-txt{
	flex: 250 1 0;
}
.single-feature__st-lead{
	font-size: max(13px, calc(20 * var(--u)));
	line-height: 1.6;
	color: #000;
	@media (width < 810px) {
		font-size: calc(28 * var(--u));
	}
}
.single-feature__st-point{
	display: grid;
	gap: calc(14 * var(--u));
	margin-top: calc(14 * var(--u));
	@media (width < 810px) {
		margin-top: 12px;
	}
	li{
		word-break: keep-all;
		padding: 0.5em 0.3em;
		border: 2px solid var(--single_main);
		border-radius: calc(20 * var(--u));
		background: #fff;
		font-size: calc(26 * var(--u));
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		color: var(--single_main);
		@media (width < 810px) {
			border-radius: 12px;
			font-size: calc(30 * var(--u));
		}
	}
}


/* 毎月の家賃はムダ!?
*****************************************************************/
.single-rent{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: calc(40 * var(--u));
	margin-top: calc(40 * var(--u));
	@media (width < 810px) {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-top: 24px;
	}
}
.single-rent__main{
	flex: 880 1 0;
	min-width: 0;
}
.single-rent__ttl{
	word-break: keep-all;
	font-size: calc(49.9 * var(--u));
	font-weight: 700;
	line-height: 1.7;
	color: var(--single_main);
	@media (width < 810px) {
		font-size: calc(40 * var(--u));
	}
}
.single-rent__txt{
	margin-top: calc(24 * var(--u));
	font-size: max(12px, calc(19.7 * var(--u)));
	line-height: 1.7;
	color: #000;
	@media (width < 810px) {
		font-size: calc(28 * var(--u));
	}
}
.single-rent__cap{
	margin-top: calc(40 * var(--u));
	font-size: max(12px, calc(17.5 * var(--u)));
	color: var(--font_c);
	@media (width < 810px) {
		font-size: calc(24 * var(--u));
	}
}
.single-rent__table{
	width: 100%;
	margin-top: calc(8 * var(--u));
	border-collapse: collapse;
	font-size: max(12px, calc(23 * var(--u)));
	line-height: 1.5;
	color: var(--font_c);
	@media (width < 810px) {
		font-size: calc(23 * var(--u));
	}
	th,
	td{
		padding: 0.25em 0.2em;
		border: 1px solid #000;
		text-align: center;
		white-space: nowrap;
	}
	thead th,
	tbody th{
		background: #f9c270;
		font-weight: 400;
	}
	td{
		background: #feecd2;
		&.--total{
			font-size: 1.14em;
			color: var(--single_red);
		}
	}
}
.single-rent__chart{
	flex: 516 1 0;
	img{
		display: block;
		width: 100%;
		max-width: 580px;
		margin-inline: auto;
	}
}
.single-rent__chart-note{
	margin-top: calc(16 * var(--u));
	margin-inline: auto;
	inline-size: fit-content;
	font-size: max(10px, calc(14 * var(--u)));
	line-height: 1.5;
	color: var(--font_c);
}

/* 今の家賃と比べてください */
.single-compare__ttl{
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	margin-top: calc(56 * var(--u));
	font-size: calc(56.4 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	white-space: nowrap;
	color: var(--single_main);
	@media (width < 810px) {
		gap: 12px;
		margin-top: 32px;
		font-size: calc(40 * var(--u));
		letter-spacing: 0.04em;
	}
	&::before,
	&::after{
		content: "";
		flex: 1;
		height: calc(8 * var(--u));
		background: var(--single_main);
		@media (width < 810px) {
			height: 4px;
		}
	}
}
.single-compare{
	display: flex;
	margin-top: calc(16 * var(--u));
	background: var(--single_main);
	@media (width < 810px) {
		flex-direction: column;
		margin-top: 12px;
	}
}
.single-compare__bk{
	flex: 0 0 calc((343 / 1514) * 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-block: calc(24 * var(--u));
	border: 1px solid var(--single_main);
	background: #fff;
	line-height: 1.2;
	text-align: center;
	color: var(--single_main);
	font-weight: 700;
	@media (width < 810px) {
		flex-basis: auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 0.4em;
		padding: 12px;
	}
}
.single-compare__bk-no{
	width: 100%;
	font-family: var(--font_geo);
	font-size: calc(36 * var(--u));
	font-weight: 500;
	@media (width < 810px) {
		width: auto;
	}
}
.single-compare__bk-price{
	font-size: calc(39.1 * var(--u));
}
.single-compare__num{
	font-family: var(--font_geo);
	font-size: calc(58 * var(--u));
	font-weight: 500;
}
.single-compare__bk-txt{
	width: 100%;
	margin-top: calc(10 * var(--u));
	font-size: calc(34.2 * var(--u));
	@media (width < 810px) {
		width: auto;
		margin-top: 0;
	}
}
.single-compare__list{
	flex: 1;
	display: flex;
	align-items: center;
	gap: calc(30 * var(--u));
	padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
	@media (width < 810px) {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 16px;
	}
}
.single-compare__item{
	display: flex;
	flex-direction: column;
	gap: calc(14 * var(--u));
	color: #fff;
	@media (width < 810px) {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	&.--main{
		flex: 1 1 auto;
		padding-right: calc(30 * var(--u));
		border-right: 1px solid rgba(255,255,255,.5);
		@media (width < 810px) {
			padding-right: 0;
			border-right: 0;
		}
	}
	dt{
		padding: 0.1em 0.8em;
		background: #fff;
		font-size: calc(40.3 * var(--u));
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
		color: var(--single_main);
		white-space: nowrap;
		@media (width < 810px) {
			flex: 0 0 7em;
			font-size: calc(30 * var(--u));
		}
		small{
			font-size: 0.5em;
		}
	}
	&.--bonus dt{
		font-size: calc(30.2 * var(--u));
		@media (width < 810px) {
			font-size: calc(28 * var(--u));
		}
	}
	dd{
		display: flex;
		justify-content: center;
		align-items: baseline;
		line-height: 1.1;
		white-space: nowrap;
	}
}
.single-compare__big{
	font-family: var(--font_geo);
	font-size: calc(70 * var(--u));
	font-weight: 500;
	@media (width < 810px) {
		font-size: calc(60 * var(--u));
	}
}
.single-compare__unit{
	font-size: calc(43.7 * var(--u));
	@media (width < 810px) {
		font-size: calc(32 * var(--u));
	}
}


/* 理想の暮らし
*****************************************************************/
.single-ideal{
	position: relative;
	margin-top: calc(100 * var(--u));
	container-type: inline-size;
	@media (width < 810px) {
		min-height: 340px;
		margin-top: 0;
	}
	&::after{
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		width: calc((527 / 1920) * 100%);
		background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 70%);
		@media (width < 810px) {
			width: 38%;
		}
	}
}
.single-ideal__bg{
	@media (width < 810px) {
		position: absolute;
		inset: 0;
	}
	img{
		display: block;
		@media (width < 810px) {
			height: 100%;
			object-fit: cover;
			object-position: 25% center;
		}
	}
}
.single-ideal__catch{
	position: absolute;
	top: calc((96 / 797) * 100%);
	right: calc((105 / 1920) * 100%);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(28 * 100cqw / 1920);
	font-size: calc(40.8 * 100cqw / 1920);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--single_main);
	writing-mode: vertical-rl;
	@media (width < 810px) {
		top: 24px;
		right: 10%;
		gap: 8px;
		font-size: min(5cqw, 20px);
	}
	span{
		&:nth-child(2){
			margin-top: calc(157 * 100cqw / 1920);
			@media (width < 810px) {
				margin-top: 2.857em;
			}
		}
	}
}


/* その他のメリット
*****************************************************************/
.single-sec--other .single-bar{
	font-size: calc(49.9 * var(--u));
	letter-spacing: 0.05em;
	@media (width < 810px) {
		font-size: calc(40 * var(--u));
	}
}
.single-other{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(32 * var(--u));
	margin-top: calc(40 * var(--u));
	@media (width < 810px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
		margin-top: 24px;
	}
}
.single-other__item{
	a{
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
		color: var(--font_c);
		transition: .5s opacity;
		&:hover{
			text-decoration: none;
			opacity: .7;
		}
		&::after{
			content: "";
			position: absolute;
			right: 10px;
			bottom: 8px;
			width: 16px;
			height: 16px;
			background: url("../../images/single/icon_blank.svg") no-repeat center / contain;
			@media (width < 810px) {
				width: 14px;
				height: 14px;
			}
		}
	}
	img{
		display: block;
	}
}
.single-other__txt{
	flex: 1;
	padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(44 * var(--u)) calc(14 * var(--u));
	font-size: max(12px, calc(18 * var(--u)));
	line-height: 1.6;
	@media (width < 810px) {
		padding: 8px 8px 28px;
		font-size: max(10px, calc(24 * var(--u)));
	}
}