@charset "UTF-8";
@import url(color.css);

/* Remix Batteryの特長ページ */
.feature-banner {
	position: relative;
	background-image: url("../images/feature/banner.jpeg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 0;
	padding-bottom: calc(320 / 1920 * 100%);
	background-position: top 37% center;
}
.feature-banner .banner-content {
	display: flex;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	justify-content: flex-start;
	align-items: center;
}
.feature .box-bg {counter-reset: css-counter;}
.feature .box-bg .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3rem;
	background-color: var(--milk);
	margin-bottom: 3rem;
}
.feature .box-bg .item .text-block {width: 100%;}
.feature .box-bg .item .heading-4 {
	position: relative;
	padding-left: 4rem;
	counter-increment: css-counter 1;
}
.feature .box-bg .item .heading-4::before {
	position: absolute;
	left: 0;
	content: "0" counter(css-counter);
	color: var(--primary-color);
}
.feature-box {
	display: flex;
	padding: 4rem;
	border: 0.5rem solid var(--lightgray2);
	margin-top: 18rem;
	border-radius: 0.8rem;
	align-items: flex-end;
}
.feature-box .box-img {
	width: 40%;
	position: relative;
}
.feature-box .box-img img {
	position: absolute;
	right: 0;
	bottom: -4rem;
	width: 100%;
	max-width: 30.9rem;
	margin-right: 2.3rem;
}
.feature-box .box-details {
	width: 60%;
	max-width: 50rem;
}
.feature-box .title {
	font-size: 3.1rem;
	font-weight: bold;
	text-align: center;
	line-height: normal;
}
.feature-box .btn-b {margin: 0;}
@media screen and (max-width: 767px) {
	.feature-banner {
		background-image: url("../images/feature/banner.jpeg");
		padding-bottom: calc(200 / 375 * 100%);
	}
	.feature-banner {background-position: center center;}
	.feature .d-block {display: block;}
	.feature .box-bg .item {
		padding: 2rem 1.5rem;
		margin-bottom: 2rem;
	}
	.feature .box-bg .item .heading-4 {
		font-size: 1.8rem;
		padding-left: 3rem;
	}
	.feature .box-bg .item img {
		max-width: 23.3rem;
		margin: 0 auto 1.8rem;
	}
	.feature .box-bg .item .txt-comment {
		font-size: 1.1rem;
		line-height: 1.8rem;
	}
	.feature-border {
		border-bottom: 0.1rem solid var(--lightgray1) !important;
		padding-bottom: 2rem !important;
		margin-bottom: 2rem;
	}
	.feature-box {
		padding: 2rem 1.5rem;
		border: 0.3rem solid var(--lightgray2);
		margin-top: 0;
	}
	.feature-box .box-img img {
		position: static;
		max-width: 12rem;
		margin-right: 0;
	}
	.feature-box .title {
		font-size: 1.8rem;
		line-height: normal;
		text-align: left;
	}
	.feature-box .sub {text-align: left;}
	.feature-box .btn-b {font-size: 1.2rem;}
}