@charset "utf-8";
/*
ブレイクポイントは標準のLightningテーマおよびBootstrapの理念に基づき
$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;
となっているのでそれに準じてください。
*/

/*メインイメージ*/
.main-image figure {
	margin-bottom: 0!important;
}
.main-ttl {
	margin: 0 auto;
}

/*CTAエリア*/
.cta-area {
	gap: 1em !important;
}
.cta-ttl {
	font-size: 2rem!important;
}
.cta-ttl .vk_inline-font-size {
	font-size: 4rem!important;
}
.cta-tel a, .cta-mail a {
	/*height: auto;*/
}
/*交互配置*/
.leftside-area {
	flex-direction: column;
	margin-top: -6vh;
}
.ttl-img {
	margin: 0 auto;
	padding: 0 2vw;
	position: relative;
	z-index: 20;
}
.img-wrap {
	display: flex;
	justify-content: flex-end;
}
.img-area {
	max-width: 70%;
}
.txt-area {
	position: relative;
}
.leftside-area .ttl-img {
	position: relative;
    top: 0;
	left: 0;
    z-index: 10;
}
.leftside-area .list-box {
	padding: 2em;
	box-shadow: 0px 0px 6px 0px rgb(51 51 51 / 13%);
	width: auto;
	margin-left: 30%;
	padding-left: 6%;
	margin-top: -11%;
	z-index: 20;
}
.rightside-area {
	flex-direction: column!important;
}
.rightside-area .img-area {
	max-width: 70%;
	align-self: flex-end;
}
.rightside-area .txt-area {
	position: relative;
	justify-content: flex-end;
}
.rightside-area .ttl-img {
	position: relative;
    top: 0;
    left: 0;
    z-index: 10;
}
.rightside-area .list-box {
	padding: 3em 0;
	width: 70%;
	margin-left: 0;
	padding-right: 7%;
	padding-left: 7%;
	margin-top: -10%;
	padding-top: 11%;
}
.rightside-area .list-box.point {
    margin-left: 0;
}
/*提供サービス*/
.service-box_inner {
	box-shadow: 10px 10px 0px 0px rgb(51 51 51 / 80%);
	margin: 0 auto;
	max-width: 100%;
	border: 10px solid #fff;
	padding: 1.5em 0 1em;
}
@media (max-width: 781px){
	.cta-area.flow .cta-tel a, 
	.cta-area.flow .cta-mail a {
		max-width: 350px;
	}
/*データで見る*/
	.count-box-wrapper.one {
		clip-path: polygon(1% 3%, 100% 0%, 98% 94%, 3% 95%);
		padding: 30px;
	}
}
@media (max-width: 767px){
	/*黒帯見出し*/
	.bkbg {
	  padding: 5em 1em;
	}
	.bkbg-ttl,
	.bkbg-left-ttl {
		font-size: 2rem;
	}
	.bkbg-ttl::after,
	.sec .bkbg-ttl::after,
	.bkbg-left-ttl::before {
		width: 120px;
		height: 120px;
		transform: translateY(-16%);
	}
	.bkbg-left {
		padding: 5em 1em;
	}
	/*提供サービス*/
	.service-ttl {
		font-size: 2.2rem;
	}
	/*比較表*/
	.hikaku-wrap {
		background-color: unset;
		padding: 0;
	}

}
@media (max-width: 576px){
	.leftside-area {
		position: relative;
		margin-right: calc(50% - 50vw);
	}
	.rightside-area {
		position: relative;
		margin-left: calc(50% - 50vw);
	}
	.ttl-img {
		padding: 0;
	}
	.img-area,
	.rightside-area .img-area {
		max-width: 94%;
	}
	.leftside-area,
	.rightside-area {
		margin-top: -4vh;
	}
	.leftside-area .list-box {
		box-shadow: 0px 0px 6px 0px rgb(51 51 51 / 13%);
		padding: 2em 1.2em;
		width: 85%;
		margin-left: unset;
		margin: auto;
		margin-top: -10vh;
		font-size: 1.1rem;
	}
	.rightside-area .txt-area {
		justify-content: flex-end;
	}
	.rightside-area .list-box {
		box-shadow: 0px 0px 6px 0px rgb(51 51 51 / 13%);
		padding: 2em 1.2em;
		width: 85%;
		margin-left: unset;
		margin: auto;
		margin-top: -10vh;
		font-size: 1.1rem;
		z-index: 20;
	}
	.rightside-area .list-box.point {
		margin: auto;
		margin-top: -10vh;
	}
	/*黒帯見出し*/
	.bkbg,
	.bkbg-left {
	  padding: 4em 1em;
	}
	.bkbg-ttl,
	.bkbg-left-ttl {
		font-size: 1.7rem;
	}
	.bkbg-ttl::after,
	.sec .bkbg-ttl::after,
	.bkbg-left-ttl::before {
		width: 100px;
		height: 100px;
	}	
	/*提供サービス*/
	.service-item {
		height: 60px;
	}
	.service-item::before {
		height: 60px;
		top: 6px;
		right: -6px;
	}
	.service-ttl {
		font-size: 1.5rem;
	}
	.btn-p {
		font-size: 1rem;
	}
	.service-item {
		height: 50px;
	}
	.service-item::before {
		height: 50px;
	}
	.seavice-box {
		box-shadow: 10px 10px 0px 0px rgb(51 51 51 / 80%);
		margin: 0 auto;
		max-width: 100%;
		border: 8px solid #fff;
	}
	/*データで見る*/	
	.count-box-wrapper.one {
		clip-path: polygon(1% 1%, 100% 0%, 97% 96%, 3% 95%);
		padding: 16px;
	}
	.count-box {
		flex-direction: column;
	}
	.count-grid .count-box {
		flex-direction: row;
	}
}