@charset "utf-8";

/* メインエリア
------------------------------------------------------------*/
#main_area{
	position: relative;
	padding-top: 40px;
}
#main_area img{
	display: block;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* 3つの特徴
------------------------------------------------------------*/
.features_box{padding-top: 40px;}
.features_box > li{
	padding: 0 30px 60px;
	border-radius: 30px;
}
.features_box > li::before{
	content: '';
	width: 317px;
	height: 86px;
	display: block;
	margin: -40px auto 20px;
}
.features_box > li:first-child::before{background: url("../images/top/features_num01.webp") no-repeat center / contain;}
.features_box > li:nth-child(2)::before{background: url("../images/top/features_num02.webp") no-repeat center / contain;}
.features_box > li:nth-child(3)::before{background: url("../images/top/features_num03.webp") no-repeat center / contain;}
.features_box > li h3{
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}

/* メーカー
------------------------------------------------------------*/
.manufacturer_box{
	padding: 60px 0;
	background-image: url("../images/top/sparkling_bg_l.webp"),url("../images/top/sparkling_bg_r.webp");
	background-repeat: no-repeat;
	background-size: 300px;
	background-position: left top,right bottom;
}
.manufacturer_box > div,.manufacturer_box ul{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.manufacturer_box > div h2{
	width: 630px;
	letter-spacing: 0.15em;
}
.manufacturer_box ul{
	width: calc(100% - 630px);
	background-color: #fff;
	padding: 50px 20px;
	border-radius: 30px;
}
.manufacturer_box ul li{margin: 10px 20px;}

/* 取扱い商品
------------------------------------------------------------*/
.swiper_box > div{position: relative;}
.swiper{
	max-width: 1665px;
	width: 92.4%;
	margin: 0 0 0 auto;
}
.swiper-wrapper li a{
	display: block;
	background-color: #fff;
	border: 4px #ef5a26 solid;
	border-radius: 30px;
	padding: 30px 30px 40px;
}
.swiper-wrapper .hover_img{
	width: 100%;
	height: 320px;
	margin: 0 auto 25px;
}

.swiper-btn{
	display: flex;
	align-items: center;
	position: absolute;
	top: -15px;
	right: 0;
	z-index: 2;
}
.swiper-button-prev{margin-right: 13px;}
.swiper-button-prev,.swiper-button-next,.swiper-button-prev:after,.swiper-button-next:after{
	width: 90px!important;
	height: 90px!important;
}
.swiper-button-prev,.swiper-button-next{
	top: 180px!important;
	bottom: auto!important;
	z-index: 2!important;
}
.swiper-button-prev,.swiper-button-next{left: auto!important;}
.swiper-button-prev{right: 90px!important;}
.swiper-button-next{right: 0!important;}
.swiper-button-prev:after,.swiper-button-next:after{
	content: ''!important;
	background:url("../images/top/btn_icon.webp") no-repeat center / contain;
	transition: all 0.4s, transform 0.4s;
}
.swiper-button-prev:after{transform: rotate(180deg);}
@media (any-hover: hover) {
	.swiper-button-next:hover::after{transform: scale(1.17);}
	.swiper-button-prev:hover::after{transform: rotate(180deg) scale(1.17);}
}

/* テレビCM放送中
------------------------------------------------------------*/
video{
	max-width: 840px;
	width: 100%;
	display: block;
	margin: 0 auto;
}

/* Google口コミ
------------------------------------------------------------*/
.review{
	position: relative;
	z-index: 1;
}
.review::before{
	content: '';
	width: 200px;
	height: 200px;
	background: url("../images/top/no_1.jpeg") no-repeat center / contain;
	display: block;
	margin: 0 auto;
}
.review_box{
	padding: 100px;
	border-radius: 50px;
}

/* 有資格者による施工で安心してお任せいただけます！
------------------------------------------------------------*/
.certification{
	padding: 30px;
	border-radius: 30px;
}
.certification > li{
	width: 48.5%;
	background-color: #F9F5EA;
	padding: 45px 40px;
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.certification > li h4{
	width: 90px;
	text-align: center;
	padding: 5px 0 8px;
	background-color: #ef5a26;
	border-radius: 80px;
}
.certification > li p{
	width: calc(100% - 90px);
	padding-left: 35px;
}
.support_illust > li{width: 49%;}
.support_illust img{
	display: block;
	width: 100%;
}

/* 対応エリア
------------------------------------------------------------*/
.area{background: url("../images/top/area_bg.webp") no-repeat left top / 860px 973px;}
.area_li{
	display: flex;
	flex-wrap: wrap;
}
.area_li > li{
	width: 24%;
	margin: 0.5%;
	text-align: center;
	background-color: #ffde80;
	border-radius: 10px;
	padding: 10px 0 15px;
}

/* ご相談・見積もり無料
------------------------------------------------------------*/
.contact_box > div{padding: 60px 0;}
.contact_box .inner_box01{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.contact_box h2{width: 720px;}
.contact_box ul{width: calc(100% - 720px);}
.contact_box ul li:not(:last-child){margin-bottom: 15px;}
.contact_box ul li a{
	display: block;
	padding: 30px;
	border-radius: 15px;
}
.contact_box ul li:first-child a{
	background-color: #00b900;
	border: 4px #00b900 solid;
}
.contact_box ul li:nth-child(2) a,.contact_box ul li:nth-child(3) a{border: 4px #ef5a26 solid;}
.contact_box ul li:nth-child(2) a{background-color: #ef5a26;}
.contact_box ul li:nth-child(3) a{background-color: #fff;}
@media (any-hover: hover){.contact_box ul li a:hover{opacity: 0.8;}}

/* ご利用の流れ
------------------------------------------------------------*/
.flow_li > li{
	background-color: #fff8e6;
	padding: 50px;
	border-radius: 30px;
	position: relative;
}
.flow_li > li:not(:last-child){margin-bottom: 60px;}
.flow_li > li::before{
	content: '';
	width: 110px;
	height: 150px;
	position: absolute;
	top: 0;
	left: 30px;
}
.flow_li > li:first-child::before{background: url("../images/top/step01.webp") no-repeat center / contain;}
.flow_li > li:nth-child(2)::before{background: url("../images/top/step02.webp") no-repeat center / contain;}
.flow_li > li:nth-child(3)::before{background: url("../images/top/step03.webp") no-repeat center / contain;}
.flow_li > li:nth-child(4)::before{background: url("../images/top/step04.webp") no-repeat center / contain;}
.flow_li > li:nth-child(5)::before{background: url("../images/top/step05.webp") no-repeat center / contain;}

/* コラム
------------------------------------------------------------*/
.column_li{justify-content: flex-start;}
.column_li > li{
	width: 30%;
	margin: 2.5% 1.6%;
	border-bottom: 2px #1a1a1a dashed;
	padding-bottom: 40px;
}
.column_li .hover_img{
	height: 280px;
	margin: 0 auto 25px;
}
.column_li .bgo{
	width: 125px;
	color: #fff;
	text-align: center;
	border-radius: 80px;
	padding: 5px 0;
}
.cat_day{
	display: flex;
	align-items: center;
}
.cat_day .fco{
	width: calc(100% - 125px);
	padding-left: 15px;
}

/* 会社概要
------------------------------------------------------------*/
.outline_box > *,.map_box > *{width: 48%;}
.outline_box dl > div{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px #1a1a1a dotted;
	padding-bottom: 35px;
}
.outline_box dl > div:not(:last-child){margin-bottom: 35px;}
.outline_box dt{width: 150px;}
.outline_box dd{width: calc(100% - 150px);}
.map iframe{
	width: 100%!important;
	height: 100%!important;
}
.map{height: 480px;}


/* お問い合わせ
------------------------------------------------------------*/
.speech_bgo::after{
	content: '';
	width: 50px;
	height: 37px;
	background: url("../images/speech_o.webp") no-repeat center / contain;
	display: block;
	margin: 0 auto;
}
.speech_bgo > div.bgo{padding: 50px 0 65px;}
.bnr_li > li{width: 48.5%;}
.bnr_li > li img{
	display: block;
	width: 100%;
}
@media (any-hover: hover){.bnr_li > li a:hover{opacity: 0.8;}}

/* フォーム */
.form_box{
	background-color: #fff;
	padding: 100px;
	border-radius: 50px;
}
.form > dl:not(:last-child){
	border-bottom: 1px #ccc solid;
	padding-bottom: 50px;
	margin-bottom: 50px;
}
.form > dl,.form > dl dt{
	display: flex;
	align-items: center;
}
.form > dl{flex-wrap: wrap;}
.form > dl dt{width: 450px;}
.form > dl dd{width: calc(100% - 450px);}
.form > dl dt p{font-size: clamp(18px, 2vw, 25px);}
.must{
	display: block;
	width: fit-content;
	font-size: clamp(16px, 1.1vw, 18px);
	background-color: #ffc82e;
	border-radius: 8px;
	padding: 3px 15px;
	margin-left: 10px;
}
.form input,.form select,.form textarea{
	border: none;
	background-color: #F2F2F2;
	outline: none;
	padding: 10px 25px;
	width: 100%;
	border-radius: 10px;
}
.form input,.form select{height: 80px;}
.form textarea{
	width: 100%!important;
	height: 250px!important;
	padding: 30px 25px;
}
.form input,.form select,.form textarea,.form button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-family: 'NotoSansJP'!important;
	color: #1A1A1A;
}
.privacy{
	width: 100%;
	height: 300px;
	background-color: #F2F2F2;
	padding: 50px;
	margin: 0 auto 20px;
	border-radius: 20px;
	overflow-y: scroll;
	counter-reset: number 0;
}
.privacy h3{
	border-bottom: 3px #ef5a26 dotted;
	padding-bottom: 20px;
	margin-bottom: 30px;
}
.privacy dt{margin-bottom: 10px;}
.privacy > dl > div:not(:last-child){margin-bottom: 40px;}
.check{
	width: fit-content;
	height: fit-content;
	margin: 0 auto 40px;
}
input[type="radio"] ~ label{
	position: relative;
	display: block;
	height: 28px;
	cursor: pointer;
	font-size: clamp(14px, 1.1vw, 18px);
	letter-spacing: 0.1rem;
	padding-left: 40px;
}
input[type="radio"] ~ label::before,
input[type="radio"] ~ label::after{
	content: '';
	display: block; 
	position: absolute;
}
input[type="radio"] ~ label::before{
	width: 28px;
	height: 28px;
	background-color: #F2F2F2;
	border-radius: 5px;
	top: 0;
	left: 0;
}
input[type="radio"] ~ label::after{
	width: 8px;
	height: 13px;
	border-right: 3px #EF5A26 solid;
	border-bottom: 3px #EF5A26 solid;
	transform: rotate(45deg);
	left: 11px;
	bottom: 9px!important;
	opacity: 0;
}
input[type="radio"]:checked ~ label:after {opacity: 1;}
.form_btn,.form_btn button{
	display: block;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
	transition: .3s;
	cursor: pointer;
}
.form_btn{
	border-radius: 10px;
	box-shadow: 0px 7px 0px #d33409;
	background: #ef5a26 url("../images/arrow_w.webp") no-repeat 95% center / 18px;
	padding: 20px 0 25px;
}
.form_btn button{
	font-size: clamp(23px, 2.3vw, 28px);
	text-align: center;
	font-family: 'NotoSansJP-Bold';
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.1em;
	background-color: transparent!important;
	border: none!important;
}
@media (any-hover: hover){
	.form_btn:hover{
		box-shadow: unset;
		transform: translateY(4px);
	}
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* メインエリア
	--------------------------------------*/
	#main_area{padding-top: 0;}

	/* 3つの特徴
	--------------------------------------*/
	.features_box{padding-top: 20px;}
	.features_box > li{
		padding: 0 20px 40px;
		border-radius: 20px;
	}
	.features_box > li::before{
		width: 200px;
		height: 54px;
		margin: -20px auto 5px;
	}
	.features_box > li h3{margin-bottom: 15px;}
	
	/* メーカー
	--------------------------------------*/
	.manufacturer_box{
		padding: 40px 0;
		background-size: 150px;
	}
	.manufacturer_box > div h2{width: 420px;}
	.manufacturer_box ul{
		width: calc(100% - 420px);
		padding: 20px 10px;
		border-radius: 15px;
	}
	.manufacturer_box ul li{margin: 8px 13px;}
	.manufacturer_box ul li img{
		width: auto!important;
		height: 35px;
	}
	
	/* 取扱い商品
	--------------------------------------*/
	.swiper{width: 94.4%;}
	.swiper-wrapper li a{
		border-radius: 20px;
		padding: 20px 20px 25px;
	}
	.swiper-wrapper .hover_img{
		height: 290px;
		margin-bottom: 15px;
	}
	.swiper-btn{top: -58px;}
	.swiper-button-prev,.swiper-button-next,.swiper-button-prev:after,.swiper-button-next:after{
		width: 50px!important;
		height: 50px!important;
	}
	.swiper-button-prev{right: 45px!important;}
	
	/* テレビCM放送中
	--------------------------------------*/
	.interview_img img{width: 580px;}
	.tv-cm_illust img{width: 340px;}
	video{max-width: 580px;}

	/* Google口コミ
	--------------------------------------*/
	.review::before{
		width: 120px;
		height: 120px;
	}
	.review_box{
		padding: 50px;
		border-radius: 20px;
	}
	
	/* 有資格者による施工で安心してお任せいただけます！
	--------------------------------------*/
	.certification{padding: 15px;}
	.certification > li{
		width: 49%;
		padding: 30px 20px;
		border-radius: 15px;
	}
	.certification > li h4{
		width: 70px;
		padding: 3px 0 5px;
	}
	.certification > li p{
		width: calc(100% - 70px);
		padding-left: 25px;
	}
	
	/* 対応エリア
	--------------------------------------*/
	.area{background-size: 500px 566px;}
	.area_li > li{border-radius: 7px;}
	
	/* ご相談・見積もり無料
	--------------------------------------*/
	.contact_box > div{padding: 40px 0;}
	.contact_box .inner_box01{max-width: 800px;}
	.contact_box h2{width: 400px;}
	.contact_box h2 img{width: 350px;}
	.contact_box ul{width: calc(100% - 400px);}
	.contact_box ul li a{
		padding: 15px;
		border-radius: 10px;
		border-width: 2px!important;
	}
	.contact_box ul li a img{
		display: block;
		margin: 0 auto;
		width: auto!important;
		height: 40px;
	}
	
	/* ご利用の流れ
	--------------------------------------*/
	.flow_li > li{
		padding: 30px;
		border-radius: 15px;
	}
	.flow_li > li:not(:last-child){margin-bottom: 30px;}
	.flow_li > li::before{
		width: 70px;
		height: 95px;
		left: 20px;
	}
	.flow_li .img_box > img{width: 230px;}
	
	/* コラム
	--------------------------------------*/
	.column_li > li{padding-bottom: 30px;}
	.column_li .hover_img{
		height: 200px;
		margin-bottom: 20px;
	}
	.column_li .bgo{
		width: 100px;
		font-size: 13px;
		padding: 3px 0;
	}
	.cat_day .fco{
		width: calc(100% - 100px);
		padding-left: 10px;
	}
	
	/* 会社概要
	--------------------------------------*/
	.outline_box.mb75{margin-bottom: 55px!important;}
	.outline_box dl > div{padding-bottom: 25px;}
	.outline_box dl > div:not(:last-child){margin-bottom: 25px;}
	.outline_box dt{width: 100px;}
	.outline_box dd{width: calc(100% - 100px);}
	.map{height: 330px;}

	/* お問い合わせ
	--------------------------------------*/
	.speech_bgo::after{
		width: 30px;
		height: 22px;
	}
	.speech_bgo > div.bgo{padding: 30px 0 40px;}
	
	/* フォーム */
	.form_box{
		padding: 50px;
		border-radius: 30px;
	}
	.form > dl:not(:last-child){
		padding-bottom: 30px;
		margin-bottom: 30px;
	}
	.form > dl dt{width: 280px;}
	.form > dl dd{width: calc(100% - 280px);}
	.form > dl dt p{font-size: 16px;}
	.must{
		font-size: 13px;
		border-radius: 5px;
		padding: 2px 10px;
	}
	.form input,.form select,.form textarea{padding: 8px 18px;}
	.form input,.form select{height: 60px;}
	.form textarea{
		height: 180px!important;
		padding: 18px 18px;
	}
	.privacy{
		height: 240px;
		padding: 30px 30px 40px;
		margin: 0 auto 3px;
		border-radius: 10px;
	}
	.privacy h3{
		border-width: 2px;
		padding-bottom: 15px;
		margin-bottom: 20px;
	}
	.privacy dt{margin-bottom: 7px;}
	.privacy > dl > div:not(:last-child),.check{margin-bottom: 25px;}
	input[type="radio"] ~ label{
		height: 24px;
		font-size: 14px;
		padding-left: 35px;
	}
	input[type="radio"] ~ label::before{
		width: 24px;
		height: 24px;
	}
	input[type="radio"] ~ label::after{
		width: 7px;
		height: 10px;
		left: 9px;
	}
	.form_btn,.form_btn button{max-width: 340px;}
	.form_btn{
		background-size: 15px;
		padding: 13px 0 17px;
	}
	.form_btn button{font-size: 16px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* メインエリア
	--------------------------------------*/
	#main_area{padding-top: 15px;}
	
	/* 3つの特徴
	--------------------------------------*/
	.features_box.c3 > *:not(:last-child){margin-bottom: 50px;}
	
	/* メーカー
	--------------------------------------*/
	.manufacturer_box > div h2,.manufacturer_box ul{width: 100%;}
	.manufacturer_box > div h2{
		text-align: center;
		margin-bottom: 30px;
	}
	.manufacturer_box ul{justify-content: center;}
	.manufacturer_box ul li img{height: 28px;}
	
	/* 取扱い商品
	--------------------------------------*/
	.swiper-wrapper .hover_img{height: 200px;}
	
	/* 有資格者による施工で安心してお任せいただけます！
	--------------------------------------*/
	.certification{padding: 10px;}
	.certification > li,.support_illust > li{width: 100%;}
	.certification > li:first-child{margin-bottom: 10px;}
	.support_illust > li:first-child{margin-bottom: 15px;}
	
	/* 対応エリア
	--------------------------------------*/
	.area_li{justify-content: space-between;}
	.area_li > li{
		width: 32%;
		margin: 0;
	}
	.area_li > li:not(:nth-last-child(-n+3)){margin-bottom: 12px;}
	
	/* ご相談・見積もり無料
	--------------------------------------*/
	.contact_box h2,.contact_box ul{width: 100%;}
	.contact_box h2{
		text-align: center;
		margin-bottom: 20px;
	}
	.contact_box h2 img{width: 300px;}
	.contact_box ul li:not(:last-child){margin-bottom: 10px;}
	.contact_box ul li a img{height: 35px;}
	
	/* ご利用の流れ
	--------------------------------------*/
	.flow_li > li{padding: 20px 20px 30px;}
	
	/* コラム
	--------------------------------------*/
	.column_li{
		justify-content: space-between;
		padding: 15px 0;
	}
	.column_li > li{
		width: 48%;
		margin: 0;
	}
	.column_li > li:not(:last-child){margin-bottom: 40px;}
	
	/* 会社概要
	--------------------------------------*/
	.outline_box > *,.map_box > *{width: 100%;}
	.outline_box > *:not(:last-child){margin-bottom: 25px;}
	.map_box > *:not(:last-child){margin-bottom: 35px;}
	
	/* お問い合わせ
	--------------------------------------*/
	/* フォーム */
	.form_box{
		width: 100%;
		padding: 50px 0;
	}
	.form_box > form{
		width: 90%;
		margin: 0 auto;
	}
	.form > dl dt,.form > dl dd{width: 100%;}
	.form > dl dt{margin-bottom: 13px;}
	.privacy{padding: 25px 20px 30px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* メーカー
	--------------------------------------*/
	.manufacturer_box{background-size: 100px;}
	
	/* 取扱い商品
	--------------------------------------*/
	.swiper{
		idth: 90%;
		margin: 0 auto;
	}
	.swiper-wrapper .hover_img{height: 250px;}

	
	/* Google口コミ
	--------------------------------------*/
	.review_box{padding: 45px 20px;}
	.review_box .mb75{margin-bottom: 35px!important;}
	
	/* 有資格者による施工で安心してお任せいただけます！
	--------------------------------------*/
	.certification > li{padding: 20px 15px 25px;}
	.certification > li h4{margin-bottom: 10px;}
	.certification > li p{
		width: 100%;
		padding-left: 5px;
	}
	
	/* 対応エリア
	--------------------------------------*/
	.area{background-size: 300px 339px;}
	.area_li > li{
		width: 49%;
		padding: 8px 0 12px;
	}
	.area_li > li:not(:nth-last-child(-n+2)){margin-bottom: 7px;}
	.area_li.fs28 > li{font-size: 16px!important;}
	
	/* コラム
	--------------------------------------*/
	.column_li > li{width: 100%;}
	
	/* 会社概要
	--------------------------------------*/
	.outline_box dt,.outline_box dd{width: 100%;}
	.outline_box dt{margin-bottom: 5px;}
	
	/* お問い合わせ
	--------------------------------------*/
	.bnr_li > li{width: 100%;}
	.bnr_li > li:not(:last-child){margin-bottom: 20px;}

}