@charset "UTF-8";
/*運転中の不安を「ドラレコ」が解決*/
.drive-recorder {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin-bottom: 20px;
}

.drive-recorder li {
	flex-basis: 32%;
	position: relative;
	padding: 20px 15px;
	border: 1px solid #e5e5e5;
}

.drive-recorder li h5 {
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	margin: 0 auto 5px;
}

.drive-recorder li .img-item {
	width: 90%;
	margin: 0 auto 10px;
}

.drive-recorder li .img-item img {
	width: 100%;
	max-width: 280px;
	margin: auto;
	display: block;
}

.drive-recorder li p {
	text-align: center;
	font-weight: 600;
	height: 67px;
}

.drive-recorder li p span {
	color: #eb5505;
}

/*事故にあった時*/
.accident {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin-bottom: 20px;
}

.accident li {
	flex-basis: 30%;
	position: relative;
	padding: 20px;
}

.accident li .flow span {
	position: relative;
	display: block;
	text-align: center;
	margin: 30px 0;
}

.accident li .flow .flow-img img {
	width: 100%;
	display: block;
	margin: 0 auto;
	max-width: 230px;
}

.accident li .flow .flow-img-sp {
	display: none;
}

.accident li p {
	font-weight: 600;
	text-align: center;
}

.accident li .img-item img {
	width: 100%;
}

/*事故状況の説明にも*/
.accident-situation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

.accident-situation li {
	flex-basis: 30%;
	position: relative;
	padding: 20px;
	border: 1px solid #e5e5e5;
}

.accident-situation li:after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	right: -53px;
	margin: auto;
	width: 0;
	height: 0;
	border: solid 15px transparent;
	border-left: solid 24px #e5e5e5;
}

.accident-situation li:nth-child(3):after {
	display: none;
}

.accident-situation li p {
	font-weight: 600;
	text-align: center;
}

.accident-situation li .img-item img {
	width: 100%;
}

/*お客さま専用ポータルサイト*/
.confirm {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/*align-items: center;*/
	padding: 0;
}

.confirm li {
	flex-basis: 30%;
	border: 1px solid #eb5505;
}

.confirm li h5 {
	text-align: center;
	color: #fff;
	background: #eb5505;
	padding: 10px 0;
	margin: 0;
	font-size: 16px;
}

.confirm li p {
	margin: 15px 0;
	padding: 0 20px;
}

.confirm li .img-item {
	width: 80%;
	margin: 0 auto 20px;
}

.confirm li .img-item img {
	width: 100%;
}

.sp-img {
	display: none;
}

/*保険料*/
.insurance-premium {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.insurance-premium .image-item {
	flex-basis: 9%;
}

.insurance-premium .image-item img {
	width: 100%;
}

.insurance-premium .txt-item {
	flex-basis: 21%;
	text-align: center;
}

.insurance-premium .txt-item h4 {
	font-size: 22px;
	font-weight: 400;
	margin: 0 0 10px;
}

.insurance-premium .txt-item .price {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.insurance-premium .txt-item .orange {
	font-size: 28px;
	color:  #eb5505;
}

.list-item {
	margin-top: 10px;
	text-align: center;
	padding: 0;
}

.list-item li span {
	position: relative;
	display: inline-block;
	font-size: 12px;
}

.list-item li:first-child span {
	color: #ff0800;
}

.list-item li span:before {
	position: absolute;
	content: '※';
	display: inline-block;
	top: 0;
	bottom: 0;
	left: -18px;
	margin: auto;
}

.list-item li:first-child span:before {
	color: #ff0800;
}

.list-item li:last-child span:before {
	color: #333;
}

p.free-exchange {
	margin: 20px 0 10px;
}

p.free-exchange span {
	font-weight: 600;
}

ul.free-exchange-caution {
	text-align: center;
	padding: 0;
}

ul.free-exchange-caution li span {
	position: relative;
	display: inline-block;
	font-size: 12px;
}

ul.free-exchange-caution li span:before {
	position: absolute;
	content: '※';
	display: inline-block;
	top: 0;
	bottom: 0;
	left: -18px;
	margin: auto;
}

/*ドライブレコーダーの取り付け方*/
.fitting-flow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin-bottom: 20px;
}

.fitting-flow li {
	flex-basis: 30%;
	position: relative;
	padding: 20px;
	border: 1px solid #e5e5e5;
}

.fitting-flow li:after {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	right: -53px;
	margin: auto;
	width: 0;
	height: 0;
	border: solid 15px transparent;
	border-left: solid 24px #e5e5e5;
}

.fitting-flow li:nth-child(3):after {
	display: none;
}

.fitting-flow li p {
	font-weight: 600;
	text-align: center;
}

.fitting-flow li .img-item {
	margin-bottom: 5px;
}

.fitting-flow li .img-item img {
	width: 100%;
}

.fitting-flow li span {
	display: block;
	text-align: right;
}

/*取り付けサービス*/
.fitting-service {
	background: #e5e5e5;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.fitting-service .image-item {
	flex-basis: 18%;
}

.fitting-service .image-item img {
	width: 100%;
}

.fitting-service p {
	flex-basis: 80%;
}


@media screen and (max-width: 767px) {
	/*運転中の不安を「ドラレコ」が解決*/
	.drive-recorder li {
		flex-basis: 100%;
		margin-bottom: 15px;
	}
	.drive-recorder li p {
		height: auto;
	}
	/*事故にあった時*/
	.accident li {
		flex-basis: 100%;
	}

	.accident li .flow {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.accident li .flow span {
		margin: 0;
		flex-basis: 45%;
	}

	.accident li .flow span:nth-child(1) {
		order: 3;
	}

	.accident li .flow span:nth-child(2) {
		order: 1;
	}

	.accident li .flow .flow-img {
		display: none;
	}

	.accident li .flow .flow-img-sp {
		display: block;
		order: 2;
	}

	.accident li .flow .flow-img-sp img {
		display: block;
		width: 100%;
		margin: 0 auto;
		max-width: 50px;
	}

	/*事故状況の説明にも*/
	.accident-situation li {
		flex-basis: 100%;
		margin-bottom: 30px;
	}

	.accident-situation li:nth-child(3) {
		margin-bottom: 0;
	}

	.accident-situation li:after {
		left: 0;
		right: 0;
		top: unset;
		bottom: -35px;
		transform: rotate(90deg);
		border: solid 12px transparent;
		border-left: solid 19px #e5e5e5;
	}

	/*お客さま専用ポータルサイト*/
	.confirm li {
		flex-basis: 100%;
		margin-bottom: 15px;
	}

	.confirm li .img-item {
		display: none;
	}

	.sp-img {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	.sp-img img {
		width: 100%;
	}

	/*保険料*/
	.insurance-premium .image-item {
		flex-basis: 27%;
		margin: 0 auto;
	}

	.insurance-premium .txt-item {
		flex-basis: 100%;
	}

	/*ドライブレコーダーの取り付け方*/
	.fitting-flow li {
		flex-basis: 100%;
		margin-bottom: 30px;
	}

	.fitting-flow li:nth-child(3) {
		margin-bottom: 0;
	}

	.fitting-flow li:after {
		left: 0;
		right: 0;
		top: unset;
		bottom: -35px;
		transform: rotate(90deg);
		border: solid 12px transparent;
		border-left: solid 19px #e5e5e5;
	}

	/*取り付けサービス*/
	.fitting-service .image-item {
		flex-basis: 100%;
		max-width: 262px;
		margin: 0 auto 10px;
	}

	.fitting-service p {
		flex-basis: 100%;
	}
}