@charset "UTF-8";
/* ============================================
   about｜料金リスト（旧 _tmp/list.png のコーディング化）
   作法: coding-rules/style_guide.md 準拠
   ・色は直値／クラスは最小限（要素セレクタで辿る）
   ・フォントはページの基本フォントを継承（指定しない）
   ・SPはファイル末尾に max-width:1079px で一括
============================================ */

/* 料金リスト *******************/
/*外枠（旧画像と同じ1020px幅）*/
div.about_list {
	width: 100%;
	max-width: 1020px;
	margin: 0 auto 20px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
/*1行（左：金額帯／右：説明欄）*/
div.about_list div.row {
	display: flex;
	width: 925px;
	margin: 0 auto 30px;
}
div.about_list div.row:last-of-type {
	margin-bottom: 0;
}
/*金額帯*/
div.about_list div.row dl {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 419px;
	height: 96px;
	margin: 0 0 0 31px;
	padding-right: 11px;
	box-sizing: border-box;
	background: #ff0000;
	position: relative;
}
div.about_list div.row.red:first-of-type dl {
	height: 95px;
}
div.about_list div.row.fees dl + dl {
	margin-top: 1px;
}
/*項目ラベル（右辺が斜めの白札）*/
div.about_list div.row dt {
	display: flex;
	align-items: center;
	width: 184px;
	height: 46px;
	padding-left: 20px;
	box-sizing: border-box;
	background: #fff;
	border: 2px solid #ff0000;
	font-size: 17px;
	font-weight: 600;
	color: #ff0000;
	letter-spacing: 0.2em;
	white-space: nowrap;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 100%, 0 100%);
	position: absolute;
	top: 50%;
	left: -31px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
div.about_list div.row dl.cyan dt {
	letter-spacing: 0.1em;
}
/*金額*/
div.about_list div.row dd {
	font-size: 64px;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.02em;
}
/*円（(税込)を円の真上に重ねる）*/
div.about_list div.row dd span {
	display: inline-block;
	margin-left: 3px;
	font-size: 26px;
	letter-spacing: 0;
	vertical-align: baseline;
	position: relative;
}
div.about_list div.row dd span small {
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
	vertical-align: baseline;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, -3px);
	-webkit-transform: translate(-50%, -3px);
	-ms-transform: translate(-50%, -3px);
}
/*説明欄（灰色）*/
div.about_list div.row > p,
div.about_list div.row div.txt {
	flex: 1;
	background: #eaeaea;
}
div.about_list div.row p {
	display: flex;
	align-items: center;
	padding-left: 31px;
	font-size: 30px;
	font-weight: bold;
	font-style: italic;
	line-height: 1.35;
	color: #ff0000;
}
/*帯の色（諸費用3行）*/
div.about_list div.row dl.cyan {
	background: #008efb;
}
div.about_list div.row dl.cyan dt {
	border-color: #008efb;
	color: #008efb;
}
div.about_list div.row dl.blue {
	background: #0063cb;
}
div.about_list div.row dl.blue dt {
	border-color: #0063cb;
	color: #0063cb;
}
div.about_list div.row dl.green {
	background: #84cc00;
}
div.about_list div.row dl.green dt {
	border-color: #84cc00;
	color: #84cc00;
}
/*諸費用3行の説明（灰欄は1枚・文言は各行の高さに合わせて置く）*/
div.about_list div.row.fees > div:first-child {
	width: 450px;
}
div.about_list div.row div.txt p {
	height: 96px;
}
div.about_list div.row div.txt p + p {
	margin-top: 1px;
}
div.about_list div.row div.txt p:nth-of-type(1) {
	color: #008efb;
}
div.about_list div.row div.txt p:nth-of-type(2) {
	font-size: 19px;
	color: #0063cb;
}
div.about_list div.row div.txt p:nth-of-type(3) {
	font-size: 19px;
	color: #84cc00;
}




@media screen and (max-width: 1079px) {
*{}
/*■■■■■■■■■■■■■■ sp ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/




/* 料金リスト *******************/
/*SPはPCのレイアウトのまま相似縮小する。外枠をコンテナにし、PCの寸法を「1020px＝100cqw」で換算*/
div.about_list {
	container-type: inline-size;
}
/*1行（左：金額帯／右：説明欄）*/
div.about_list div.row {
	width: 90.69cqw;
	margin: 0 auto 2.94cqw;
}
/*金額帯*/
div.about_list div.row dl {
	width: 41.08cqw;
	height: 9.41cqw;
	margin: 0 0 0 3.04cqw;
	padding-right: 1.08cqw;
}
div.about_list div.row.red:first-of-type dl {
	height: 9.31cqw;
}
div.about_list div.row.fees dl + dl {
	margin-top: 0.1cqw;
}
/*項目ラベル（右辺が斜めの白札）*/
div.about_list div.row dt {
	width: 18.04cqw;
	height: 4.51cqw;
	padding-left: 1.96cqw;
	border-width: max(0.2cqw, 1px);
	font-size: 1.67cqw;
	clip-path: polygon(0 0, calc(100% - 2.55cqw) 0, 100% 100%, 0 100%);
	left: -3.04cqw;
}
/*金額*/
div.about_list div.row dd {
	font-size: 6.27cqw;
}
/*円（(税込)を円の真上に重ねる）*/
div.about_list div.row dd span {
	margin-left: 0.29cqw;
	font-size: 2.55cqw;
}
div.about_list div.row dd span small {
	font-size: 0.98cqw;
	transform: translate(-50%, -0.29cqw);
	-webkit-transform: translate(-50%, -0.29cqw);
	-ms-transform: translate(-50%, -0.29cqw);
}
div.about_list div.row p {
	padding-left: 3.04cqw;
	font-size: 2.94cqw;
}
/*諸費用3行の説明（灰欄は1枚・文言は各行の高さに合わせて置く）*/
div.about_list div.row.fees > div:first-child {
	width: 44.12cqw;
}
div.about_list div.row div.txt p {
	height: 9.41cqw;
}
div.about_list div.row div.txt p + p {
	margin-top: 0.1cqw;
}
div.about_list div.row div.txt p:nth-of-type(2) {
	font-size: 1.86cqw;
}
div.about_list div.row div.txt p:nth-of-type(3) {
	font-size: 1.86cqw;
}




/*cqw非対応ブラウザ（iOS 15以前のSafari等）用の代替：外枠を96vwに固定し、cqwを0.96倍のvwで置き換え*/
@supports not (container-type: inline-size) {
	/*外枠を96vwに固定（≦736pxでシェルの.wrapperが96%になるのと一致）*/
	div.about_list {
		width: 96vw;
		max-width: 100%;
	}
	/*1行（左：金額帯／右：説明欄）*/
	div.about_list div.row {
		width: 87.06vw;
		margin: 0 auto 2.82vw;
	}
	/*金額帯*/
	div.about_list div.row dl {
		width: 39.44vw;
		height: 9.04vw;
		margin: 0 0 0 2.92vw;
		padding-right: 1.04vw;
	}
	div.about_list div.row.red:first-of-type dl {
		height: 8.94vw;
	}
	div.about_list div.row.fees dl + dl {
		margin-top: 0.09vw;
	}
	/*項目ラベル（右辺が斜めの白札）*/
	div.about_list div.row dt {
		width: 17.32vw;
		height: 4.33vw;
		padding-left: 1.88vw;
		border-width: max(0.19vw, 1px);
		font-size: 1.6vw;
		clip-path: polygon(0 0, calc(100% - 2.45vw) 0, 100% 100%, 0 100%);
		left: -2.92vw;
	}
	/*金額*/
	div.about_list div.row dd {
		font-size: 6.02vw;
	}
	/*円（(税込)を円の真上に重ねる）*/
	div.about_list div.row dd span {
		margin-left: 0.28vw;
		font-size: 2.45vw;
	}
	div.about_list div.row dd span small {
		font-size: 0.94vw;
		transform: translate(-50%, -0.28vw);
		-webkit-transform: translate(-50%, -0.28vw);
		-ms-transform: translate(-50%, -0.28vw);
	}
	div.about_list div.row p {
		padding-left: 2.92vw;
		font-size: 2.82vw;
	}
	/*諸費用3行の説明（灰欄は1枚・文言は各行の高さに合わせて置く）*/
	div.about_list div.row.fees > div:first-child {
		width: 42.35vw;
	}
	div.about_list div.row div.txt p {
		height: 9.04vw;
	}
	div.about_list div.row div.txt p + p {
		margin-top: 0.09vw;
	}
	div.about_list div.row div.txt p:nth-of-type(2) {
		font-size: 1.79vw;
	}
	div.about_list div.row div.txt p:nth-of-type(3) {
		font-size: 1.79vw;
	}
}




}