@charset "utf-8";
/* CSS Document */
/*INDEX*/
/*スライドショー*/
.swiper-container{
	position: relative;
	overflow: hidden;
}
.swiper-wrapper img{
	width: 100%;
}
.swiper-pagination-bullet {
  border-radius: inherit;
  margin: 0 5px!important;
  width: 54px;
  height: 5px;
  background: skyblue;
  opacity: 0.19;
}
.swiper-pagination-bullet-active {
  background: skyblue;
  opacity: 1;
}
@media screen and (max-width:768px) {
	#index-m{
	}
}

/*無料診断*/
#diagnose img{
	width: 100%;
}
.diagnose{
	display: flex;
}
.diagnose div{
	padding: 1.0rem;
}

/*塗装のこだわり*/
#paint img{
	width: 100%;
}
.paint{
	margin-bottom: 2.5rem;
	padding-left: 1.0rem;
}
h3{
	text-align: left;
	padding-top: 1.0rem;
	margin-left: 0.5rem;
	font-size: 20px;
	font-weight: bold;
	border-bottom: solid 3px #cce4ff;
	position: relative;
}
h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #5472cd;
	bottom: -3px;
	width: 20%;
}
h3 span{
	color: #FF0000;
}
.flow-t{
	font-size: 1.5rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
	position: relative;
	padding: 0.25em 0;
}
.flow-t:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
  background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}
#paint p{
	border-bottom: #000000 solid 1px;
	font-size: 1.5rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
}
.flow{
	margin-bottom: 0.5rem;
}
.card{
	height: 100%;
}
.card-body{
	padding-bottom: 0.5rem;
}
#paint p.card-text{
	border: none;
	font-size: 0.8rem;
}
@media screen and (max-width:768px) {
	.paint{
		padding: 0 1.0rem;
	}
	.flow-t{
		margin-left: 1.0rem;
	}
	.flow{
		padding: 15px;
	}
	.card{
		margin: 0;
	}
	.card-body{
		padding: 5px;
	}
}

/*施工事例*/
#construction img{
	width: 100%;
}
.construction{
	margin: 0.5rem;
	padding: 0.5rem;
	background: #ffffff;
}
.construction div.row{
	margin-top: 1.0rem;
}
h4{
	font-size: 1.5rem;
	font-weight: bold;
}
h4.area{
	margin-top: 1.0rem;
}
.const-data{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.const-data div{
	font-size: 0.8rem;
	font-weight: bold;
}
.const-data div span{
	margin-right: 0.5rem;
	padding: 0.2rem 0.5rem 0.1rem;
	background: #C7C7C7;
	border-radius:0.2rem;
}
.const-site{
	width: 5rem;
	margin-bottom: 0.2rem;
	padding: 0.2rem 0.5rem 0.1rem;
	background: #C7C7C7;
	border-radius:0.2rem;
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
}
.const-part{
	width: 100%;
	margin-bottom: 0.2rem;
	padding: 0.2rem;
	background: #7C0002;
	color: #ffffff;
	text-align: center;
	font-size: 0.7rem;
}

/*求人情報*/
#recruit img{
	max-width: 100%;
	margin-bottom: 1.0rem;
}
.recruit{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
}
.recruit h5{
	margin-left: 0.5rem;
	margin-bottom: 1.0rem;
	padding-left: 1.0rem;
	border-left: #5472cd solid 0.5rem;
	font-size: 1.7rem;
	font-weight: bolder;
}
.recruit p{
	margin-top: 0.5rem;
	margin-left: 1.5rem;
	margin-bottom: 1.0rem;
	padding-right: 0.5rem;
	font-size: 1.1rem;
}
.rec-mail{
	margin: 0.5rem 0 1.0rem;
	padding: 0.5rem 0.5rem 0.3rem;
	text-align: center;
	font-size: 1.5rem;
	background: -webkit-linear-gradient(#fae6b3, #edb22f);
	background: -o-linear-gradient(#fae6b3, #edb22f);
	background: linear-gradient(#fae6b3, #edb22f);
}
.rec-mail a{
	display: inline-block;
	width: 100%;
	color: #000000;
}
.rec-mail img{
	width: 1.5rem;
	margin-right: 0.5rem;
}
.rec-tel{
	text-align: center;
	font-size: 3.0rem;
	font-weight: bold;
}
.rec-tel img{
	width: 3.0rem;
}
.rec-tel a{
	color: #000000;
	pointer-events: none;
}
@media screen and (max-width:768px) {
	h5{
		padding-left: 0.5rem;
		font-size: 1.5rem;
	}
	.recruit p{
		padding: 0.5rem;
	}
	.rec-mail{
		width: 90%;
		margin: auto;
	}
	.rec-tel{
		font-size: 2.0rem;
	}
.rec-tel img{
	width: 2.0rem;
}
	.rec-tel a{
		pointer-events: auto;
	}
}

/*お問い合わせ*/
#inquiry img{
	width: 100%;
}
.inquiry{
	padding: 0.5rem;
	display: flex;
}
.phone{
	width: 70%;
	font-size: 6vw;
	font-weight: bold;
	text-align: center;
}
#inquiry div.phone img{
	width: 10%;
}
#inquiry div.phone a{
	color: #000000;
}
.open{
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.1;
}
.greeting{
	margin: 1.0rem 0.5rem 2.0rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
}
.mailform{
	width: 100%;
	padding: 1.0rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.mailform form table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.mailform form table tr{
	position: relative;
}
.mailform form table tr:first-child td:before{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 1px;
	border-bottom: solid 1px rgba(28, 46, 83, 0.5);
}
.mailform form table tr th{
	width: 30%;
	padding: 1rem 0.5rem;
	background: #BDAD92;
	color: #000000;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
}
.mailform form table tr th span.required{
	background: #cd6f55;
	padding: 0 0.3rem;
	font-size: 0.8rem;
	font-weight: normal;
	color: #ffffff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float: right;
}
.mailform form table tr th:after{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 1px;
	border-bottom: solid 1px #fff;
}
.mailform form table tr td{
	background: #DCD4C5;
	position: relative;
	padding: 1rem 0.5rem;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.mailform form table tr td:after{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 1px;
	border-bottom: solid 1px rgba(28, 46, 83, 0.5);
}
.mailform form table tr td label{
	margin-right: 1.0rem;
}
.mailform form table tr select, .mailform form table tr textarea, .mailform form table tr .wide {
	width: 100%;
	height: 3rem;
	padding: 0.5rem;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.mailform form table tr textarea{
	height: 10rem;
}
.formbtn {
	text-align: center;
	margin: 0.5rem auto 2.0rem;
}
.formbtn input {
	display: inline-block;
	background: #929292;
	padding: .5em 4em;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	border: none;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.formbtn input:hover {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
}

@media screen and (min-width:1600px) {
	.open{
		font-size: 2vw;
	}
}
@media screen and (min-width:1700px) {
	.phone{
		font-size: 5vw;
	}
}
@media screen and (max-width:768px) {
	.mailform{
		width: 100%;
	}
	.mailform form{
		max-width: 100%;
	}
	.mailform form table{
		max-width: 100%;
		table-layout: fixed;
		word-break: break-all;
		word-wrap: break-all;
	}
	.mailform form table tr:first-child td:before{
		display: none;
	}
	.mailform form table tr th{
		width: 100%;
		display: block;
		padding: 0.8rem 0.2rem;
		text-align: center;
	}
	.mailform form table tr td{
		padding: 1.5rem 0.5rem;
		display: block;
		width: 100%;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}

/*会社概要*/
#company{
}
.company1{
	margin-bottom: 1.0rem;
	padding: 1.0rem 0.5rem;
	font-size: 1.6rem;
	font-weight: bold;
}
.company2{
	padding: 0.5rem;
	font-size: 1.2rem;
	font-family: 'Yuji Syuku', serif;
	font-weight: bold;
}
.company2 div{
	text-align: right;
	padding: 1.0rem 0.5rem 2.0rem 0;
	font-family: 'Yuji Syuku', serif;
}
.company2 h3{
	font-family: 'Yuji Syuku', serif;
	font-size: 2.0rem;
}
.company3{
	text-align: center;
}
.company3 img{
	width: 50%;
}
.company4{
	width: 95%;
	margin: 1.0rem auto 2.0rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: bold;
	font-size: 1.2rem;
}
.company4 table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.company4 table tr{
	position: relative;
}
.company4 table tr:first-child td:before{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 1px;
	border-bottom: solid 1px rgba(28, 46, 83, 0.5);
}
.company4 table tr th{
	width: 30%;
	padding: 1rem 0.5rem;
	background: #14469C;
	color: #ffffff;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: left;
}
.company4 table tr th:after{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 1px;
	border-bottom: solid 1px #fff;
}
.company4 table tr td{
	position: relative;
	padding: 1rem 0.5rem;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.company4 table tr td:after{
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	height: 1px;
	border-bottom: solid 1px rgba(28, 46, 83, 0.5);
}
@media screen and (max-width:768px) {
	.company2{
		font-size: 1.0rem;
	}
	.company3 img{
		width: 75%;
	}
}
/*アクセスマップ*/

/*リフォームローン*/
#loan img{
	width: 100%;
	max-width: 200px;
}
.loan{
	display: flex;
}
.loan div{
	width: 33%;
	padding: 1.0rem;
	text-align: center;
}
.loan div a{
	display: inline-block;
	border-bottom: #0921D9 solid 1px;
	padding-left: 0.5rem;
	margin: 1.0rem 0;
	color: #000000;
	font-weight: bold;
}

@media screen and (max-width:768px) {
	.loan{
		display: block;
	}
	.loan div{
		width: 100%;
		border-bottom: #000000 double 3px;
	}
}