@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;
	padding: 20px 0 10px;
	box-sizing: border-box;
	/*iPhone（Safari）の文字自動拡大を止める（横向き時に小さな文字が膨らみ、表がはみ出すため）*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
/*見出し帯*/
div.about_list > h4 {
	display: flex;
	align-items: center;
	height: 110px;
	margin: 0 0 48px;
	padding-left: 180px;
	box-sizing: border-box;
	background: #ff0000;
	font-size: 31px;
	font-weight: bold;
	font-style: italic;
	color: #fff;
	position: relative;
}
/*車の丸写真（帯の上下にはみ出す）*/
div.about_list > h4 img {
	width: 151px;
	height: auto;
	position: absolute;
	top: -20px;
	left: 22px;
}
div.about_list > h4 small {
	font-size: 18px;
	vertical-align: baseline;
}
/*1行（左：金額帯／右：説明欄）*/
div.about_list div.row {
	display: flex;
	width: 924px;
	margin: 0 auto 20px;
}
div.about_list div.row.fees {
	margin-bottom: 2px;
}
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: 420px;
	height: 80px;
	margin: 0 0 0 30px;
	padding-right: 12px;
	box-sizing: border-box;
	background: #ff0000;
	position: relative;
}
div.about_list div.row.fees dl + dl {
	margin-top: 2px;
}
/*項目ラベル（右辺が斜めの白札）*/
div.about_list div.row dt {
	display: flex;
	align-items: center;
	width: 184px;
	height: 52px;
	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: -30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
div.about_list div.row dl.cyan dt,
div.about_list div.row dl.blue dt {
	letter-spacing: 0.1em;
}
/*金額*/
div.about_list div.row dd {
	font-size: 62px;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.02em;
}
div.about_list div.row dd small {
	margin-left: 4px;
	font-size: 28px;
	vertical-align: baseline;
}
/*説明欄*/
div.about_list div.row > p {
	display: flex;
	align-items: center;
	flex: 1;
	padding-left: 8px;
	background: #eaeaea;
	font-size: 22px;
	font-weight: bold;
	font-style: italic;
	line-height: 1.4;
	color: #e40000;
}
/*帯の色（諸費用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;
}
div.about_list div.row.orange dl {
	background: #f09703;
}
div.about_list div.row.orange dt {
	border-color: #f09703;
	color: #f09703;
}
/*諸費用3行の説明（青い括弧でまとめる・行間の白線は背景で引く）*/
div.about_list div.row.fees > div {
	width: 450px;
}
div.about_list div.row.fees > p {
	padding-left: 52px;
	background: linear-gradient(#eaeaea 80px, #fff 80px 82px, #eaeaea 82px 162px, #fff 162px 164px, #eaeaea 164px);
	color: #0063cb;
	position: relative;
}
div.about_list div.row.fees > p::before {
	content: "";
	width: 25px;
	border: 4px solid #0063cb;
	border-left: none;
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
}
/*システム使用料の説明*/
div.about_list div.row.orange > p {
	padding-left: 32px;
	font-size: 18px;
	color: #f09703;
}
/*合計金額の矢印バッジ（三角と本体を1つの図形で切り抜き、継ぎ目の線を出さない）*/
div.about_list div.row.total > p {
	padding-left: 24px;
}
div.about_list div.row.total > p span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 407px;
	height: 48px;
	padding-left: 24px;
	box-sizing: border-box;
	background: #f09703;
	font-size: 27px;
	font-weight: 900;
	font-style: normal;
	color: #fff;
	letter-spacing: 0.02em;
	clip-path: polygon(0 50%, 24px 0, 100% 0, 100% 100%, 24px 100%);
}




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




/* 料金リスト *******************/
/*SPはPCのレイアウトのまま相似縮小する。外枠をコンテナにし、PCの寸法を「1020px＝100cqw」で換算*/
/*（シェルの.wrapperは736pxを境に幅の取り方が変わるため、vwでは比率がずれる）*/
div.about_list {
	padding: 0;
	container-type: inline-size;
}
/*見出し帯*/
div.about_list > h4 {
	height: 10.78cqw;
	margin: 1.96cqw 0 4.71cqw;
	padding-left: 17.65cqw;
	font-size: 3.04cqw;
	white-space: nowrap;
}
div.about_list > h4 small {
	font-size: 1.76cqw;
}
/*車の丸写真*/
div.about_list > h4 img {
	width: 14.8cqw;
	top: -1.96cqw;
	left: 2.16cqw;
}
/*1行*/
div.about_list div.row {
	width: 90.59cqw;
	margin-bottom: 1.96cqw;
}
div.about_list div.row.fees {
	margin-bottom: 0.2cqw;
}
div.about_list div.row:last-of-type {
	margin-bottom: 0.98cqw;
}
/*金額帯*/
div.about_list div.row dl {
	width: 41.18cqw;
	height: 7.84cqw;
	margin-left: 2.94cqw;
	padding-right: 1.18cqw;
}
div.about_list div.row.fees dl + dl {
	margin-top: 0.2cqw;
}
/*項目ラベル*/
div.about_list div.row dt {
	width: 18.04cqw;
	height: 5.1cqw;
	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: -2.94cqw;
}
/*金額*/
div.about_list div.row dd {
	font-size: 6.08cqw;
}
div.about_list div.row dd small {
	margin-left: 0.39cqw;
	font-size: 2.75cqw;
}
/*説明欄*/
div.about_list div.row > p {
	padding-left: 0.78cqw;
	font-size: 2.16cqw;
}
/*諸費用3行の説明と青い括弧*/
div.about_list div.row.fees > div {
	width: 44.12cqw;
}
div.about_list div.row.fees > p {
	padding-left: 5.1cqw;
	background: linear-gradient(#eaeaea 7.84cqw, #fff 7.84cqw 8.04cqw, #eaeaea 8.04cqw 15.88cqw, #fff 15.88cqw 16.08cqw, #eaeaea 16.08cqw);
}
div.about_list div.row.fees > p::before {
	width: 2.45cqw;
	border-width: 0.39cqw;
	border-left: none;
	top: 0.49cqw;
	bottom: 0.49cqw;
}
/*システム使用料の説明*/
div.about_list div.row.orange > p {
	padding-left: 3.14cqw;
	font-size: 1.76cqw;
}
/*合計金額の矢印バッジ*/
div.about_list div.row.total > p {
	padding-left: 2.35cqw;
}
div.about_list div.row.total > p span {
	width: 39.9cqw;
	height: 4.71cqw;
	padding-left: 2.35cqw;
	font-size: 2.65cqw;
	clip-path: polygon(0 50%, 2.35cqw 0, 100% 0, 100% 100%, 2.35cqw 100%);
}








/*cqw非対応ブラウザ（iOS 15以前のSafari等）用の代替：外枠を96vwに固定し、cqwを0.96倍のvwで置き換え*/
@supports not (container-type: inline-size) {
	/*上下の余白はpaddingで持つ（コンテナにならないため、子のmarginが外へ相殺されて赤背景がのぞくのを防ぐ）*/
	div.about_list {
		width: 96vw;
		max-width: 100%;
		padding: 1.88vw 0 0.94vw;
	}
	div.about_list > h4 {
		height: 10.35vw;
		margin: 0 0 4.52vw;
		padding-left: 16.94vw;
		font-size: 2.92vw;
	}
	div.about_list > h4 small {
		font-size: 1.69vw;
	}
	div.about_list > h4 img {
		width: 14.21vw;
		top: -1.88vw;
		left: 2.07vw;
	}
	div.about_list div.row {
		width: 86.97vw;
		margin-bottom: 1.88vw;
	}
	div.about_list div.row.fees {
		margin-bottom: 0.19vw;
	}
	div.about_list div.row:last-of-type {
		margin-bottom: 0;
	}
	div.about_list div.row dl {
		width: 39.53vw;
		height: 7.53vw;
		margin-left: 2.82vw;
		padding-right: 1.13vw;
	}
	div.about_list div.row.fees dl + dl {
		margin-top: 0.19vw;
	}
	div.about_list div.row dt {
		width: 17.32vw;
		height: 4.9vw;
		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.82vw;
	}
	div.about_list div.row dd {
		font-size: 5.84vw;
	}
	div.about_list div.row dd small {
		margin-left: 0.37vw;
		font-size: 2.64vw;
	}
	div.about_list div.row > p {
		padding-left: 0.75vw;
		font-size: 2.07vw;
	}
	div.about_list div.row.fees > div {
		width: 42.36vw;
	}
	div.about_list div.row.fees > p {
		padding-left: 4.9vw;
		background: linear-gradient(#eaeaea 7.53vw, #fff 7.53vw 7.72vw, #eaeaea 7.72vw 15.24vw, #fff 15.24vw 15.44vw, #eaeaea 15.44vw);
	}
	div.about_list div.row.fees > p::before {
		width: 2.35vw;
		border-width: 0.37vw;
		border-left: none;
		top: 0.47vw;
		bottom: 0.47vw;
	}
	div.about_list div.row.orange > p {
		padding-left: 3.01vw;
		font-size: 1.69vw;
	}
	div.about_list div.row.total > p {
		padding-left: 2.26vw;
	}
	div.about_list div.row.total > p span {
		width: 38.3vw;
		height: 4.52vw;
		padding-left: 2.26vw;
		font-size: 2.54vw;
		clip-path: polygon(0 50%, 2.26vw 0, 100% 0, 100% 100%, 2.26vw 100%);
	}
}
}