/* =============================================
   parts-compare.php 用 CSS
   ============================================= */

/* ----- PC (デフォルト) ----- */

/* レイアウト：2カラム */
.compare_box .col2s {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
	flex-direction: row;
}
.compare_box .col2s .col {
	width: 48%;
}

/* 角ボーダー装飾 */
.has_corner_border {
	background-image:
		linear-gradient(to bottom, #000, #000),
		linear-gradient(to right, #000, #000),
		linear-gradient(to right, #000, #000),
		linear-gradient(to bottom, #000, #000);
	background-position: left bottom, left bottom, right bottom, right bottom;
	background-repeat: no-repeat;
	background-size: 1px 5px, 5px 1px, 5px 1px, 1px 5px;
}

/* 背景スタイル */
.compare_box.has_bg_border_standard {
	margin-top: 60px;
}
.compare_box.has_bg_border_less {
	margin-top: 40px;
}

/* 比較ボックス本体 */
.compare_box {
	position: relative;
}
.compare_box:before {
	display: none;
}
.compare_box .wrapper {
	padding: 60px 0 80px;
	position: relative;
	z-index: 1;
}
.compare_box .col {
	padding: 50px 70px;
	background-color: #fff;
}
.compare_box .col h2 {
	height: 70px;
	margin-bottom: 20px;
	padding-left: 2px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	color: #fff;
	font-size: 2rem;
	letter-spacing: 2px;
}
.compare_box .col .box {
	padding: 20px 0;
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	justify-content: flex-start;
	border-bottom: 1px solid #EBEBEB;
}
.compare_box .col .box .pic {
	width: 138px;
	min-width: 138px;
	margin-right: 20px;
}
.compare_box .col .box .text strong.bold {
	margin-bottom: 10px !important;
	display: block;
	font-size: 16px !important;
}
.compare_box .col .box .text p.paragraph {
	font-size: 14px;
}
.compare_box .col.can h2 {
	background-color: #C49F45;
}
.compare_box .col.cannot h2 {
	background-color: #000;
}


/* ----- タブレット ----- */
@media screen and (max-width: 1024px) {

	.compare_box .col .box .text p,
	.paragraph {
		line-height: 1.6;
	}
	.compare_box .col .box .text br {
		display: none;
	}
	.compare_box .wrapper {
		padding: 30px 0;
	}
	.compare_box .col {
		padding: 20px;
	}
	.compare_box .col .box .pic {
		width: 100px;
		min-width: 100px;
	}

}


/* ----- モバイル ----- */
@media screen and (max-width: 767px) {

	/* 2カラム → 1カラム */
	.compare_box .col2s {
		display: block;
	}
	.compare_box .col2s .col {
		width: auto;
	}
	.compare_box .col2s .col:nth-child(n+2) {
		margin-top: 30px;
	}

	/* 比較ボックス */
	.compare_box::before {
		display: none;
	}
	.compare_box .col {
		position: relative;
		z-index: 1;
	}
	.compare_box .col.can::before,
	.compare_box .col.cannot::before {
		height: calc(100% + 45px);
		background-size: calc(100% - 40px) calc(100% - 45px), 100% 100%;
	}
	.compare_box .col.cannot::after,
	.compare_box .col::before {
		content: "";
		display: block;
		position: absolute;
		background-repeat: no-repeat;
	}
	.compare_box .col::before {
		width: calc(100% + 40px);
		left: -20px;
		z-index: -1;
		mix-blend-mode: multiply;
	}
	.compare_box .col.can::before {
		top: -30px;
		background-image:
			linear-gradient(to bottom, #fff, #fff),
			linear-gradient(to right, #e5decc, #e5decc);
		background-position: 20px 30px, 0 0;
	}
	.compare_box .col.cannot::before {
		top: -15px;
		background-image:
			linear-gradient(to bottom, #fff, #fff),
			linear-gradient(to right, #dde4d9, #dde4d9);
		background-position: 20px 15px, 0 0;
	}
	.compare_box .col.cannot::after {
		width: 100%;
		height: 10px;
		bottom: -30px;
		left: 0;
		background-image:
			linear-gradient(to bottom, #000, #000),
			linear-gradient(to right, #000, #000),
			linear-gradient(to right, #000, #000),
			linear-gradient(to bottom, #000, #000);
		background-position: left bottom, left bottom, right bottom, right bottom;
		background-size: 1px 5px, 5px 1px, 5px 1px, 1px 5px;
	}
	.compare_box .col .box {
		padding-top: 55px;
		position: relative;
	}
	.compare_box .col .box .text strong {
		position: absolute;
		top: 20px;
		left: 0;
	}
	.compare_box .col .box:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

}