p {
	margin-bottom: 0.5em;
}

.step {
	background-color: #ddd;
	color: #fff;
}

.step .current {
	background-color: #000;
}

.step li {
	list-style-type: none;
	padding: 0.5em;
	float: left;
}

#site-wrap .l-mainContent {
	position: static !important;
	width: 100%;
	margin: 0 auto;
}

#compatibility {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	font-size: 18px;
}

h1.c-pageTitle {
	text-align: center;
	font-size: 1.5em;
	margin: 0em 0em 0.7em 0em;
}

h1.c-pageTitle[data-style=b_bottom] .c-pageTitle__inner {
	border-bottom: none;
	float: none;
	margin-bottom: 0px;
	padding: 0em;
}

.c-pageTitle[data-style=b_bottom] {
	border-bottom: none;
}

.l-mainContent__inner>.post_content {
	margin: 0em 0;
	padding: 0 var(--swl-pad_post_content, 0);
}

.site-content #compatibility {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
}

.site-content #compatibility .content-area {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
}

.separate-containers .comments-area,
.separate-containers .inside-article,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	padding: 0;
}

.ol,
ul {
	margin: 0 0 1.5em;
}

.flow {
	width: calc(100% - 0px);
	/* ステップフロー全体の横幅を指定 */
	display: flex;
	/* flexboxで横並びにする */
	justify-content: space-between;
	/* 横並びにしたものを等間隔で並べる */
}

ul.flow {
	padding: 0;
}

.post_content ol,
.post_content ul {
	padding-left: initial;
}

.flow li {
	color: #fff;
	/* 文字色を黒に指定 */
	font-size: 18px;
	/* 文字サイズを指定 */
	width: calc(100% / 4);
	/* 横幅を三等分した1つの大きさに指定 */
	background: #ccc;
	/* 背景色をグレーに指定 */
	line-height: 50px;
	/* 行間(高さの代わり)を指定 */
	text-align: center;
	/* 文字を中央寄せにする */
	position: relative;
	/* 基準位置とする */
	list-style-type: none;
}

.flow li:not(:first-child):not(:last-child) {
	padding: 0 0 0 10px;
	/* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
	content: "";
	/* 疑似要素では必須 */
	width: 0;
	/* 横幅を0に指定 */
	height: 0;
	/* 高さを0に指定 */
	display: block;
	/* ブロック要素にする */
	position: absolute;
	/* 相対位置に指定 */
}

.flow li::before {
	border: solid 32px transparent;
	border-right: solid 13px transparent;
	border-left: solid 37px #FFF;
	top: -7px;
	left: 0;
	z-index: 1;
}

.flow li::after {
	border: solid 25px transparent;
	border-left: solid 30px #ccc;
	border-right: solid 10px transparent;
	top: 0;
	right: -40px;
	z-index: 2;
}

.flow li:first-child::before,
.flow li:last-child::after {
	content: none;
	/* 最初のliの左と最後のliの右は作らない */
}

/* 以下.currentだけ色を変えるCSS */

.flow li.current {
	color: #FFF;
	background: #000;
}

.flow li.current::after {
	border-left: solid 30px #000;
}

ul.japanese-maker h4,
ul.import-maker h4 {
	background-color: #000;
	color: #fff;
	padding: 0.5em 1em;
}

ul.japanese-maker li,
ul.import-maker li {
	width: 46%;
	border: 1px solid #ddd;
	float: left;
	text-align: center;
	list-style-type: none;
	margin: 2%;
	box-shadow: 2px 3px 5px #ddd;
	font-size: 20px;
	font-weight: bold;
}

ul.japanese-maker li a,
ul.import-maker li a {
	text-decoration: none;
	color: #000;
	padding: 5%;
	display: block;
}

ul.japanese-maker li a .xs,
ul.import-maker li a .xs {
	display: block;
	font-size: 70%;
	font-weight: normal;
}

.clearfix {
	clear: both;
}


ul.rubi li,
ul.rubi ul {
	list-style-type: none;
}

ul.rubi .summary:after {
	content: "▲";
	position: relative;
	right: 10px;
	display: block;
	float: right;
}

ul.rubi details[open]>.summary:after {
	content: "▼"
}


summary {
	display: block;
	list-style: none;
	background-color: #eee;
	padding: 1em 5%;
	margin-bottom: 8px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	font-weight: bold;
}

.child li * {
	color: #000;
	text-decoration: none;
	display: block;
	padding: 0.5em 2em;

}

.child li a:hover {
	color: #000;
	background-color: #eee;
}

/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
	display: none;
}

.rubi .child li {
	border-bottom: 1px solid #ccc;
}

th.midashi {
	background-color: #000;
	color: #fff;
	text-align: left;
	padding: 0.5em 1em;
}

th.car-type {
	background-color: #eee;
	text-align: left;
}

.car-type_list th.midashi {
	padding: 0.5em 1em;
}

.car-type_list th a,
.car-type_list td a {
	padding: 0.5em 1em;
	display: block;
	color: #000;
}

tr.car-list:hover {
	background-color: #eee;
}

th.car-type * {
	text-decoration: none;
	color: #000;
	display: block;
}

th.car-type *:hover {
	text-decoration: none;
	color: #1176d4;
}

#compatibility h1.entry-title {
	background-color: #000;
	color: #fff;
	font-size: 24px;
	padding: 1em;
}

.maker_img {
	text-align: center;
	padding: 1em;
}

table {
	width: 100%;
	margin: 1em 0;
}

table td.num {
	background-color: #eee;
	text-align: center;
	padding: 0.5em;
	width: 2em;
}

.attention {
	border: 1px solid #000;
	border-radius: 5px;
	padding: 0em 1em 1em;
	margin: 1.5em 0;
}

#compatibility .attention h5 {
	display: block;
	background-color: #fff;
	margin-top: -0.6em !important;
	padding: 0em 0.5em;
	width: 13em;
}

.attention h5 img.lamp {
	width: 1.8em;
	padding: 0px 0.2em 0px;
	display: block;
	float: left;
	margin: 1px 1px 6px 0px;
}

#compatibility table th,
#compatibility table td {
	border: 1px solid #ccc;
}

table.spec {
	margin: 1em 0;
}

table.spec th {
	text-align: left;
	padding: 0.5em 1em;
	width: 10em;
}

table.spec td {
	text-align: left;
	padding: 0.5em 1em;
}

table.item_list {
	margin: 1em 0;
}

table.item_list th {
	text-align: left;
	padding: 0.5em 1em;
	width: 10em;
	background-color: #eee;
}

table.item_list td {
	text-align: left;
	padding: 0.5em 1em;
}

.gototop {
	padding: 2em;
	text-align: center;
	display: block;
}

#sidebar {
	display: none;
}

.-sidebar-on .l-content {
	display: block;
}

#breadcrumb {
	display: none;
}

h1.tekigou_title {
	text-align: center;
	font-size: 1.2em;
	margin: 0em 0em 1em 0em;
}

h2.car_name {
	text-align: left;
	font-size: 1.5em;
	padding: 0.6em 1em;
	margin: 0em 0em 0.3em 0em;
	background-color: #000;
	color: #fff;
}

.pc_only {
	display: block;
}

.sp_only {
	display: none;
}


@media (max-width: 768px) {
	.post_content * {
		font-size: 3vw;
	}

	#compatibility {
		font-size: 3vw;
	}

	.flow li {
		font-size: 3vw;
		width: calc(100% / 4);
		line-height: 1.5em;
		text-align: center;
		position: relative;
		list-style-type: none;
		padding: 1.5vw 0;
	}

	.flow li.current {
		color: #FFF;
		background: #000;
	}

	.flow li.current::after {
		border-left: solid 3.9vw #000;
	}

	.flow li::after {
		border: solid 6.1vw transparent;
		border-left: solid 4vw #ccc;
		border-right: solid 1vw transparent;
		top: 0;
		right: -4.4vw;
		z-index: 2;
	}

	.flow li::before {
		border: solid 6.1vw transparent;
		border-right: solid 4vw transparent;
		border-left: solid 4vw #FFF;
		top: 0px;
		left: 0;
		z-index: 1;
	}

	.flow li:not(:first-child):not(:last-child) {
		padding: 1.5vw 0;
	}

	.car-type_list,
	.item_list,
	.spec {
		font-size: 3.3vw;
	}

	.car-type_list .midashi:nth-of-type(1) {
		width: 30%;
	}

	.car-type_list .midashi:nth-of-type(2) {
		width: 20%;
	}

	.car-type_list .midashi:nth-of-type(3) {
		width: 20%;
	}

	.car-type_list .midashi:nth-of-type(4) {
		width: 30%;
	}

	.attention h5 {
		font-size: 4vw;
	}

	.attention h5 {
		width: 13em;
		text-align: center;
	}

	.pc_only {
		display: none;
	}

	.sp_only {
		display: block;
	}

}

/* 不適合車種文言挿入 */
#compatibility .car-qseries-alert-li {
	list-style: none;
	margin: 12px 0 16px;
	padding: 10px 12px;
	border: 1px solid #f5c2c7;
	background: #fff5f5;
	font-weight: 700;
	line-height: 1.6;
	max-width: 840px;
	width: 100%;
	font-size: clamp(10px, 3.6vw, 20px);
}

#compatibility .unfit-notice {
	margin: 12px 0;
	padding: 10px 12px;
	border: 1px solid #f5b5b5;
	background: #fff5f5;
	font-weight: 700
}

#compatibility .unfit-note {
	margin: 6px 0 12px;
	font-size: .95em;
	opacity: .9
}