@charset "UTF-8";

/*--------------------------
リセット
---------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*--------------------------
基本：基本タグ
---------------------------- */
/* [ PC - SP switch ] */
@media screen and (min-width: 768px) {
  .pcOFF {
    display: none !important;
  }
}
@media screen and (max-width: 767px) { /* Smartphone */
  .spOFF {
    display: none !important;
  }
}
/* -------*/
* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	/*font-family: 'Roboto', sans-serif;*/
	line-height:1.5;
}

/*==============================

================================ */
.titObi{
	width:100%;
	max-width:1400px;
	margin:0 auto 100px;
	position:relative;
}
.titObi .ja{
	position:relative;
	z-index:10;
}
.titObi .en{
	position:absolute;
	z-index:1;
	right:0;
	top:35px;
	line-height:0;

	font-family: 'Roboto', sans-serif;
	font-weight:bold;
	font-size:100px;
	color:rgba(198, 208, 222, 0.45);
}
.titObi .ja span{
	display:inline-block;
	font-weight:bold;
	color:#fff;
	font-size:34px;
	background:#084B98;
	box-shadow: 6px 6px 0px 0px rgba(198, 208, 222, 0.45);
	padding:10px 30px 14px 105px;
	margin-bottom:10px;
}
.titObi .ja span:last-child{
	margin-bottom:0;
}

/* エクステリア */
.titObi.tit-exterior .ja span{
	background:#E1403F;
	box-shadow: 6px 6px 0px 0px rgba(222, 198, 198, 0.45);
}
.titObi.tit-exterior .en{
	color: rgba(222, 198, 198, 0.45);
}

/* ビフォア・アフター */
.titObi.tit-beforeAfter .ja span{
	background:#E1403F;
	box-shadow: 6px 6px 0px 0px rgba(222, 198, 198, 0.45);
}
.titObi.tit-beforeAfter .en{
	color: rgba(222, 198, 198, 0.45);
}

/* サポート */
.titObi.tit-support .ja span{
	background:#084B98;
	box-shadow: 6px 6px 0px 0px rgba(198, 208, 222, 0.45);
}
.titObi.tit-support .en{
	color:rgba(198, 208, 222, 0.45);
}

/* よくある質問 */
.titObi.tit-faq .ja span{
	background:#E1A03F;
	box-shadow: 6px 6px 0px 0px rgba(255 , 160, 63, 0.45);
}
.titObi.tit-faq .tit-.en{
	color: rgba(255 160, 63, 0.45);
}

/* お問い合わせ */
.titObi.tit-contact .ja span{
	background:#5A5A5A;
	box-shadow: 6px 6px 0px 0px rgba(132 ,132 , 132, 0.45);
}
.titObi.tit-contact .en{
	color:rgba(132 ,132 , 132, 0.45);
}


@media screen and (max-width: 1200px) { /* Smartphone */
	.titObi .en{
		top:35px;
		font-size:80px;
		margin-right:15px;
	}
	.titObi .ja span{
		font-size:28px;
		padding:10px 30px 14px 105px;
	}
}

@media screen and (max-width: 1000px) { /* Smartphone */
	.titObi .en{
		top:35px;
		font-size:50px;
	}
	.titObi .ja span{
		font-size:20px;
		padding:10px 30px 14px 50px;
	}
}
@media screen and (max-width: 680px) { /* Smartphone */

	.titObi{
		margin:0 auto 30px;
	}
	.titObi .en{
		position:relative;
		top:auto;
		font-size:30px;
		z-index:1;
		line-height:1;
		text-align:right;
	}
	.titObi .ja {
		position:relative;
		top:0;
		margin-bottom:15px;
	}
	.titObi .ja span{
		font-size:20px;
		padding:7px 20px 10px 25px;
		z-index:1;
	}
}


/*==============================

================================ */

.tit02{
	font-weight:bold;
	font-size:18px;
	margin-bottom:15px;
	position:relative;
	padding-left:1.5em;
}

.tit02:before{
	content:"■";
	position:absolute;
	display:block;
	left:0;
	top:0;
}



.overlayBox{
	position:relative;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:100px;
}
.overlayBox > .pic{
	position:absolute;
	width:53%;
	z-index:10;
}
.overlayBox > .pic img{
	width:100%;
	height:auto;
}
.overlayBox .cnt{
	background:#F0F0F0;
	padding:30px 30px 30px 270px;
	flex-basis:65%;
	position:relative;
	z-index:1;
	margin-top:40px;
	margin-left:35%;
}



@media screen and (max-width: 767px) { /* Smartphone */
	.overlayBox{
		display:block;
	}
	.overlayBox > .pic{
		width:100%;
    min-height:400px;
		position:relative;
	}
	.overlayBox > .pic img{
	}
	.overlayBox .cnt{
		width:calc(100% - 30px);
		margin-top:-30px;
		margin-left:auto;
		margin-right:auto;
		padding:20px;
	}
}
/*==============================
header
================================ */
header{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10000;
}
header .inner{
	background:#fff;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	display:flex;
	justify-content:space-between;
}
header .inner .logo{
	width:100%;
	max-width:220px;
	margin-left: 30px;
	padding-left:10px;
	padding-top:10px;
}
header .inner .logo img{
	width:100%;
	height:auto;
}
header .inner .corpname1{
	display: flex;
	align-items: center;
	padding: 0px 10px;
}



header .inner .headerContact{
	display:flex;
	justify-content:flex-end;
}
header .inner .headerContact .tel{
	width:50%;
	background:#E9DBA0;
	display:flex;
	justify-content:center;
	align-items: center;
}
header .inner .headerContact .cnt{
	width:50%;
	background:#E1403F;
	display:flex;
	justify-content:center;
	align-items: center;
}
header .inner .headerContact .tel img,
header .inner .headerContact .cnt img{
	width:100%;
	padding: 0px 20px;
	height:auto;
}
@media screen and (max-width: 767px) { /* Smartphone */
	header{
	}
	header .inner{
		flex-wrap: wrap;
	}
	header .inner .logo{
		max-width:160px;
		padding-left:5px;
		padding-top:5px;
		margin-left: 0px;
		order: 1;
	}
	header .inner .logo img{
		max-width:110px;
	}

	header .inner .corpname1{
		display: none;
	}


	header .inner .headerContact{
	order: 2;
	}
	header .inner .headerContact .tel{
		flex-basis:60px;
	}
	header .inner .headerContact .cnt{
		flex-basis:60px;
	}
	header .inner .headerContact .tel img,
	header .inner .headerContact .cnt img{
		max-width:100%;
	padding: 0px 10px;
	}


}
/*==============================
wrapper
================================ */
#wrapper{
	margin-top:116px;
}
@media screen and (max-width: 767px) { /* Smartphone */
#wrapper{
	margin-top:64px;
}
}

/*==============================
mainVisual
================================ */

.corpname2{
	display: none;
}

.mainVisual{
}
.mainVisual .inner{
	position:relative;
	width:100%;
	max-width:1900px;
	margin-left:auto;
	margin-right:auto;
}
.mainVisual .inner .cnt{
	position:absolute;
	z-index:10;
	top:150px;
	left:3%;
}

.mainVisual .inner .tit{
	font-family: "Sawarabi Mincho", serif;
	font-weight: normal;
}
.mainVisual .inner .pic{
	position:relative;
	z-index:1;
}
.mainVisual .inner .pic img{
	width:100%;
	height:auto;
}
/* */
.mainVisual .tit{
	background:rgba(255, 255, 255 , 0.8);
	padding:25px 15px;
	margin-bottom:20px;

}
.mainVisual .tit br{display: none;}
.mainVisual .tit .f40{
	font-size:40px;
}
.mainVisual .tit .f30{
	font-size:30px;
}
.mainVisual .txt{
}
.mainVisual .txt span{
	display:inline-block;
	background:rgba(255, 255, 255 , 0.8);
	font-weight:bold;
	font-size:20px;
	padding:25px 15px;
}


@media screen and (max-width: 767px) { /* Smartphone */

	.corpname2{
		display: block;
		text-align: center;
		font-size: 82%;
		padding: 5px;
		background: #9bcd93;
	}

	.mainVisual{
		margin-bottom:50px;
	}
	.mainVisual .inner{
	}
	.mainVisual .inner .cnt{
		position:absolute;
		width:calc(100% - 30px);
		z-index:10;
		top:auto;
		left:0;
		right:0;
		bottom:20px;
		margin:auto;
		display:inline-block;
	}

	.mainVisual .inner .tit{
		margin-bottom:10px;
	}
	.mainVisual .inner .pic{
		position:relative;
		z-index:1;
	}
	.mainVisual .inner .pic img{
		width:100%;
		height:auto;
	}

	/* */
	.mainVisual .tit{
		font-weight:bold;
		padding:15px;
		margin-bottom:10px;
		display: inline-block;
	}

	.mainVisual .tit .f40{
		font-size:30px;
	}
	.mainVisual .tit .f30{
		font-size:20px;
	}
	.mainVisual .txt span{
		font-size:16px;
		padding:15px;
	}
}
@media screen and (max-width: 600px) { /* Smartphone */
	.mainVisual .tit{
		padding:5px;
	}
	.mainVisual .tit br{display: inline;}
	.mainVisual .txt span{
		padding:5px;
	}
}

@media screen and (max-width: 400px) { /* Smartphone */
	.mainVisual .tit{
	}


	.mainVisual .tit .f40,
	.mainVisual .tit .f30{
		font-size:20px;
	}
	.mainVisual .txt span{
		font-size:14px;
	}
}

/*==============================
footer
================================ */
.footer{
	background:#fff;
	padding:100px 0 80px;
}
.footer .inner{
	width:100%;
	max-width:1240px;
	margin:0 auto;
}
.footer .logo{
	text-align:center;
	margin-bottom:50px;
}
.footer .logo img{
	width:100%;
	max-width:198px;
	height:auto;
}
@media screen and (max-width: 1200px) { /* Smartphone */
	.footer .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.footer{
		padding:50px 0 50px;
	}
}
/*==============================
footerInfo
================================ */
.footerInfo{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
/* ---- */
.footerInfo .infoLeft{
	flex-basis:49%;
	padding:0 0 0 2%;
	border-left:solid 4px #84B480;
}
.footerInfo .infoRight{
	flex-basis:49%;
	padding:0 0 0 2%;
	border-left:solid 4px #84B480;
}
/* ---- */
.footerInfo .infoLeft table{
	width:100%;
	font-size:16px;
}
.footerInfo .infoLeft table th{
	text-align:center;
	width:100px;
	padding:5px 0;
	vertical-align:top;
}
.footerInfo .infoLeft table th span{
	display:block;
	border-right:solid 1px #000;
}
.footerInfo .infoLeft table td{
	width:calc(100% - 100px);
	padding:5px 0 0 1em;
}
/* ---- */
.footerInfo .infoRight{
	line-height:2;
}
@media screen and (max-width: 1200px) { /* Smartphone */
}
@media screen and (max-width: 767px) { /* Smartphone */
	.footerInfo .infoLeft{
		flex-basis:100%;
		padding:0 0 0 0%;
		border-left:none;
		margin-bottom:30px;
	}
	.footerInfo .infoRight{
		flex-basis:100%;
		padding:0 20px 0%;
		border-left:none;
	}
	.footerInfo .infoLeft table th{
		font-weight:bold;
	}
}
/*==============================
address
================================ */
.address{
	background:#262626;
	padding:17px 0;
}
.address span{
	display:block;
	width:100%;
	max-width:1240px;
	margin:0 auto;
	color:#fff;
	text-align:center;
	font-size:16px;
}
@media screen and (max-width: 1200px) { /* Smartphone */
	.address span{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.address span{
		font-size:14px;
	}
}
/*==============================
pageTop
================================ */
.pageTop{
}
@media screen and (max-width: 767px) { /* Smartphone */
	.pageTop img{
		width:30px;
	}
}
/*==============================
 * お問い合わせ
contactArea
================================ */
.contactArea{
	padding:0px 0 200px;
	background:#D4D4D4;
	position:relative;
}
.contactArea:before{
	position:absolute;
	top:-59px; 
	left:0;
	right:0;
	content:"";
	width:100%;
	height:60px;
	background: #D4D4D4;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.contactArea .inner{
	display:block;
	width:100%;
	max-width:800px;
	margin-left:auto;
	margin-right:auto;
}

/* ==================== */
.formLead{
	text-align:center;
	font-size:16px;
}
.formContact{
	font-weight:bold;
	font-size:18px;
	margin-bottom:40px;
	text-align:center;
}
.formContact a{
	display:inline-block;
	font-size:34px;
	color:#000;
	text-decoration:none;
	background:url(../img/icon_tel.png) no-repeat left center;
	background-size:auto 36px;
	padding-left:40px;
	margin:0 15px;
}
.formContact span{
	font-size:14px;
}



/* ==================== */
.tblContact{
	width:100%;
}
.tblContact th{
	display:block;
	width:100%;
	padding:5px;
}
.tblContact th .inpName{
	display:inline-block;
	font-size:18px;
	font-weight:bold;
	margin-right:1em;
}
.tblContact th .lbl-hissu{
	display:inline-block;
	font-size:12px;
	font-weight:bold;
	background:#FF7F00;
	color:#fff;
	padding:4px 10px;
	border-radius:4px;
}
.tblContact td{
	display:block;
	width:100%;
	padding:5px;
	margin-bottom:20px;
	position:relative;
}
/* ==================== */
.tblContact input[type="text"],
.tblContact textarea{
	display:block;
	width:100%;
	padding:10px;
	border:none;
	font-size:16px;
	border-radius:4px;
	font-family: 'Noto Sans JP', sans-serif;
}
.tblContact .radioRow label{
	display:block;
}

.formBtn input[type="submit"]{
	display:block;
	border:none;
	font-size:30px;
	font-weight:bold;
	background:#D99E14;
	text-align:center;
	padding:15px 0;
	width:100%;
	color:#fff;
}
.formBtn input[type="submit"]:hover{
	cursor:pointer;
}

.kiyakulnk{
	text-align:center;
	margin-bottom:50px;
}
.kiyakulnk a{
	display:inline-block;
	background:url(../img/outerLnk.png) no-repeat right center;
	padding-right:10px;
	margin-right:5px;
	color:#1571DA;
	text-decoration:none;
}


/* ===== */
.confirm{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items: center;
}
.confirm .confirm__back{
	flex-basis:49%;
}
.confirm .confirm__send{
	flex-basis:49%;
}
.confirm .confirm__back input[type="submit"],
.confirm .confirm__send input[type="submit"] {
	display:block;
	border:none;
	font-size:20px;
	font-weight:bold;
	background:#D99E14;
	text-align:center;
	padding:10px 0;
	width:100%;
	color:#fff;
}
.confirm .confirm__back input[type="submit"]:hover ,
.confirm .confirm__send input[type="submit"]:hover  {
	cursor:pointer;
}
.confirm .confirm__back input[type="submit"]{
	background:#aaa;
}


@media screen and (max-width: 800px) { /* Smartphone */
	.contactArea .inner{
		max-width:calc(100% - 30px);
	}
	.confirm .confirm__back{
		flex-basis:100%;
		margin-bottom:10px;
	}
	.confirm .confirm__send{
		flex-basis:100%;
	}

	.formContact{
	}
	.formContact a{
	}
	.formContact span{
		display:block;
	}
	.formBtn input[type="submit"]{
		font-size:16px;
	}
	.confirm .confirm__back input[type="submit"],
	.confirm .confirm__send input[type="submit"] {
		font-size:16px;
	}
}
/*==============================
 * よくあるご質問
faqArea
================================ */
.faqArea{
	padding:50px 0 200px;
	background:#F2F3D5;
	position:relative;
}
.faqArea:before{
	position:absolute;
	top:-59px; 
	left:0;
	right:0;
	content:"";
	width:100%;
	height:60px;
	background: #F2F3D5;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.faqArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}

/* faqLst */
.faqLst{
}
.faqLst .item{
	margin-bottom:40px;
	counter-increment: cnt;
	position:relative;
}
.faqLst .item:before{
	content: "Q"counter(cnt)".";
	font-weight:bold;
	font-size:22px;
	position:absolute;
	top:0;
	left:0px;
}
.faqLst .item .qaQ{
	font-weight:bold;
	margin-bottom:15px;
	font-size:22px;
	padding-left:50px;
}
.faqLst .item .qaA{
	font-size:18px;
}

@media screen and (max-width: 1200px) { /* Smartphone */
	.faqArea .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.faqArea{
		padding:0px 0 100px;
	}
	.faqLst .item:before{
		font-size:16px;
	}
	.faqLst .item .qaQ{
		margin-bottom:15px;
		font-size:16px;
		padding-left:30px;
	}
	.faqLst .item .qaA{
		font-size:14px;
	}
}

/*==============================
 * 施工後も末永く徹底サポート
supportArea
================================ */
.supportArea{
	padding:50px 0 200px;
	background:#D6EFF9;
	position:relative;
}
.supportArea:before{
	position:absolute;
	top:-59px; 
	left:0;
	right:0;
	content:"";
	width:100%;
	height:60px;
	background: #D6EFF9;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.supportArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}
/* supportLst */
.supportLst{
	margin-bottom:80px;
}
.supportLst .item{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	align-items: center;
	margin-bottom:30px;
}
.supportLst .item .pic{
	flex-basis:45%;
}
.supportLst .item .pic img{
	width:100%;
	height:auto;
}
.supportLst .item .cnt{
	flex-basis:45%;
}
.supportLst .item .tit{
	font-size:32px;
	font-weight:bold;
	margin-bottom:30px;
}
.supportLst .item .txt{
	font-size:22px;
}
/* ---- */
.supportLst .item:nth-child(even) .pic{
	order:2;
}	
.supportLst .item:nth-child(even) .cnt{
	order:1;
}	

@media screen and (max-width: 1240px) { /* Smartphone */
	.supportArea .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.supportArea{
		padding:0px 0 100px;
	}
	.supportLst .item .pic{
		flex-basis:100%;
		order:1 !important;
		margin-bottom:15px;
	}
	.supportLst .item .pic img{
		width:100%;
	}
	.supportLst .item .cnt{
		order:2 !important;
		flex-basis:100%;
		margin-bottom:20px;
	}
	.supportLst .item .tit{
		font-size:20px;
		margin-bottom:10px;
	}
	.supportLst .item .txt{
		font-size:16px;
	}
}
/*==============================
soudanArea
================================ */
.soudanArea{
	margin-bottom:100px;
}
.soudanTit{
	text-align:center;
	margin-bottom:100px;
}
.soudanTit span{
	position:relative;
	display:inline-block;
	font-size:52px;
	font-weight:bold;
	padding:0 110px;
}
.soudanTit span:before{
	content:"";
	display:block;
	width:90px;
	height:145px;
	background:url(../img/soudanTit_left.png) no-repeat center center;
	position:absolute;
	left:0;
	top:0;
}
.soudanTit span:after{
	content:"";
	display:block;
	width:90px;
	height:145px;
	background:url(../img/soudanTit_right.png) no-repeat center center;
	position:absolute;
	right:0;
	top:0;
}
.soudanLst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:20px;
}
.soudanLst .item{
	flex-basis:29%;
}
.soudanLst .item .pic{
	margin-bottom:15px;
}
.soudanLst .item .pic img{
	width:100%;
	height:auto;
}
.soudanLst .item .tit{
	padding:0 10px;
	font-size:22px;
	font-weight:bold;
}
.soudanAtent{
	font-size:22px;
	font-weight:bold;
	text-align:right;
	color:#980C0C;
}
/* soudanBanner */
.soudanBanner{
	background:#333333;
}
.soudanBanner .tit{
	padding:5px;
}
.soudanBanner .tit img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}
.soudanBanner .txt{
	color:#fff;
	padding:10px 10px 15px;
	text-align:center;
	font-size:25px;
	font-weight:bold;
}
@media screen and (max-width: 840px) {/* Smartphone */
	.soudanArea{
		margin-bottom:50px;
	}
	.soudanTit{
		text-align:center;
		margin-bottom:50px;
	}
	.soudanTit span{
		font-size:30px;
		padding:0 60px;
	}
	.soudanTit span:before{
		width:40px;
		background-size:40px auto;
		background-position: left 10px;
	}
	.soudanTit span:after{
		width:40px;
		background-size:40px auto;
		background-position: right 10px;
	}

}	
@media screen and (max-width: 767px) { /* Smartphone */
	.soudanArea{
		margin-bottom:30px;
	}
	.soudanLst .item{
		flex-basis:100%;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		border-bottom:solid 1px #ccc;
		padding:10px 0;
	}
	.soudanLst .item:first-child{
		border-top:solid 1px #ccc;
	}
	.soudanLst .item .pic{
		flex-basis:30%;
		margin-bottom:0;
	}
	.soudanLst .item .tit{
		flex-basis:68%;
		font-size:16px;
	}
	.soudanAtent{
		font-size:16px;
		text-align:left;
		margin-bottom:20px;
	}
	/* soudanBanner */
	.soudanBanner{
	}
	.soudanBanner .tit{
		padding:5px;
	}
	.soudanBanner .tit img{
	}
	.soudanBanner .txt{
		padding:10px 10px 15px;
		font-size:15px;
		text-align:left;
	}
}
@media screen and (max-width: 500px) {/* Smartphone */
	.soudanTit span{
		font-size:25px;
		padding:0 30px;
	}
	.soudanTit span:before{
		width:25px;
		background-size:25px auto;
		background-position: left 10px;
	}
	.soudanTit span:after{
		width:25px;
		background-size:25px auto;
		background-position: right 10px;
	}

}	

/*==============================
 * ビフォア・アフター
bfArea
================================ */
.bfArea{
	padding:100px 0 200px;
	background:#FFEFEF;
	position:relative;
}
.bfArea:before{
	position:absolute;
	top:-59px; 
	left:0;
	right:0;
	content:"";
	width:100%;
	height:60px;
	background: #FFEFEF;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.bfArea .inner{
	display:block;
	width:100%;
	max-width:1310px;
	margin-left:auto;
	margin-right:auto;
}
/* ------ */
.bfLst{
}
.bfLst .item{
	border-left:solid #E1403F 8px;
	margin-bottom:50px;

	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.bfLst .item .pic{
	order:2;
	flex-basis:55%;
}
.bfLst .item .pic img{
	width:100%;
	height:auto;
}
.bfLst .item .cnt{
	order:1;
	flex-basis:44%;
	padding-left:30px;
	padding-top:30px;
}
.bfLst .item .cnt .tit{
	font-size:32px;
	font-weight:bold;
	margin-bottom:30px;
}
.bfLst .item .cnt .txt{
	font-size:24px;
}
/* ------ */
.bfLst02{
	border-left:solid #E1403F 8px;
	padding-left:30px;
	padding-top:30px;
}
.bfLst02 .tit{
	font-size:32px;
	font-weight:bold;
	margin-bottom:30px;
}
.bfLst02 .tit + .txt{
	font-size:24px;
	margin-bottom:20px;
}

.bfLst02_lst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.bfLst02_lst .item{
	flex-basis:32%;
}
.bfLst02_lst .item .pic{
	margin-bottom:10px;
}
.bfLst02_lst .item .pic img{
	width:100%;
	height:auto;
}
.bfLst02_lst .item .txt{
	font-size:24px;
	margin-bottom: 10px;
}

@media screen and (max-width: 1310px) { /* Smartphone */
	.bfArea .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.bfArea{
		padding:0px 0 100px;
	}
	.bfLst .item .pic{
		order:1;
		flex-basis:100%;
		padding-left:15px;
	}
	.bfLst .item .pic img{
	}
	.bfLst .item .cnt{
		order:2;
		flex-basis:100%;
		padding-left:15px;
		padding-top:30px;
	}

	.bfLst .item .cnt .tit,
	.bfLst02 .tit{
		font-size:20px;
		margin-bottom:10px;
	}
	.bfLst .item .cnt .txt,
	.bfLst02 .tit + .txt{
		font-size:16px;
		margin-bottom:0px;
	}
	.bfLst02{
		padding-left:15px;
		padding-top:15px;
	}

	.bfLst02 .tit + .txt{
		margin-bottom:20px;
	}
	.bfLst02_lst .item{
		flex-basis:100%;
		margin-bottom:30px;
	}
	.bfLst02_lst .item .pic{
		margin-bottom:5px;
	}
	.bfLst02_lst .item .txt{
		font-size:16px;
	}
}

/*==============================
 * 代表者メッセージ
messageArea
================================ */
.messageArea{
	padding:100px 0 200px;
	background:#fff;
}
.messageArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}


/* ----- */
.msginfoBox{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:100px;
}
.msginfoBox .pic{
	flex-basis:46%;
	order:2;
}
.msginfoBox .pic img{
	width:100%;
	height:auto;
}
.msginfoBox .cnt{
	flex-basis:46%;
	order:1;
}

.msginfoBox .cnt .tit{
	margin-bottom:50px;
}
.msginfoBox .cnt .tit span{
	display:inline-block;
	background:#E9DBA0;
	font-size:40px;
	font-weight:bold;
	padding:5px 10px;
	margin-bottom:10px;
}
.msginfoBox .cnt .name{
	text-align:right;
	font-size:30px;
	margin-bottom:10px;
	font-weight:bold;
}
.msginfoBox .cnt .txt{
	text-align:right;
	font-size:20px;
}
/* ----- */
.profileBox{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.profileBox .pic{
	flex-basis:34%;
}
.profileBox .pic img{
	width:100%;
	height:auto;
}
.profileBox .cnt{
	flex-basis:60%;
}
.profileBox .cnt .tit02{
}
.profileBox .cnt .txt{
	margin-bottom:20px;
}
@media screen and (max-width: 1240px) { /* Smartphone */
	.messageArea .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.messageArea{
		padding:50px 0 100px;
	}
	.msginfoBox .pic{
		flex-basis:100%;
		order:1;
	}
	.msginfoBox .pic img{
	}
	.msginfoBox .cnt{
		flex-basis:100%;
		order:2;
	}
	.msginfoBox .cnt .tit{
		margin-top:-30px;
		margin-bottom:15px;
	}
	.msginfoBox .cnt .tit span{
		font-size:20px;
	}

	.msginfoBox .cnt .name{
		font-size:18px;
		margin-bottom:10px;
	}
	.msginfoBox .cnt .txt{
		text-align:left;
		font-size:16px;
	}

	/* ----- */
	.profileBox .pic{
		flex-basis:100%;
		margin-bottom:20px;
	}
	.profileBox .pic img{
	}
	.profileBox .cnt{
		flex-basis:100%;
	}

}

/*==============================
 * スタッフブログ
blogArea
================================ */
.blogArea{
	padding:100px 0 200px;
	background:#fff;
}
.blogArea .titObi .ja span{
	background:#000;
}
.blogArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}
.blogLst{
	display:flex;
	flex-wrap:wrap;
	gap:30px 30px;
}
.blogLst .blogItem{
	width:calc( (100% - 60px) / 3 );
}
.blogLst .blogItem a{
	text-decoration:none;
	color:#333;
}
/* --- */
.blogLst .blogItem .pic{
	position:relative;
}
.blogLst .blogItem .pic img{
	width:100%;
	height:100%;
     aspect-ratio: 3 / 2;
    object-fit: cover;
	position:relative;
	z-index:1;
}
.blogLst .blogItem .pic .dateCat{
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	width:100%;

	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;

}
.blogLst .blogItem .pic .dateCat .date{
}
.blogLst .blogItem .pic .dateCat .cat{
}
.blogLst .blogItem .pic .dateCat .date span{
	font-size:clamp( 12px , 1.8vw , 14px);
	display:inline-block;
	background:#333;
	color:#fff;
	padding:10px;
}
.blogLst .blogItem .pic .dateCat .cat span{
	font-size:clamp( 12px , 1.8vw , 14px);
	display:inline-block;
	background:#3d8124;
	color:#fff;
	padding:10px;
}
/* ---- */
.blogLst .blogItem .cnt{
}
.blogLst .blogItem .cnt .tit{
	font-size:clamp( 16px , 2.4vw , 19px);
	color:#3d8124;
	font-weight:bold;
	margin-bottom:5px;
}
.blogLst .blogItem .cnt .txt{
	font-size:clamp( 12px , 1.8vw , 14px);
	margin-bottom:5px;
}
.blogLst .blogItem .cnt .btn{
	color:#3160b0;
	text-decoration:underline;
}

@media screen and (max-width: 1240px) { /* Smartphone */
	.blogArea .inner{
		max-width:calc(100% - 30px);
	}
}
@media screen and (max-width: 1000px) { /* Smartphone */
	.blogLst{
		gap:30px 10px;
	}
	.blogLst .blogItem{
		width:calc( (100% - 20px) / 3 );
	}
}

@media screen and (max-width: 767px) { /* Smartphone */
	.blogArea{
		padding:50px 0 100px;
	}
	/* --- */
	.blogLst .blogItem .pic{
	}
	.blogLst .blogItem .pic img{
	}
	.blogLst .blogItem .pic .dateCat{
		position:static;
		z-index:10;
		top:0;
		left:0;
		width:100%;

		display:flex;
	}
	.blogLst .blogItem .pic .dateCat .date{
		width:100%;
	}
	.blogLst .blogItem .pic .dateCat .cat{
		width:100%;
	}

	.blogLst .blogItem .pic .dateCat .date span{
		background:#69c148;
		color:#fff;
		padding:2px;
		margin-bottom:5px;
	}
	.blogLst .blogItem .pic .dateCat .cat span{
		background:none;
		color:#333;
		padding:2px;
		font-weight:bold;
	}

}

@media screen and (max-width: 500px) { /* Smartphone */
	.blogLst .blogItem{
		width:calc( (100% - 10px) / 2 );
	}
}


/*==============================
 * お問い合わせ　帯
contactinfoArea
================================ */
.contactinfoArea{
	padding:60px 0 60px;
	background:#D4CDA6;
}
.contactinfoArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}
/* ---- */
.contactinfoArea .tit{
	margin-bottom:20px;
	color:#000;
}
.contactinfoArea .tit .mainTit{
	font-size:24px;
	font-weight:bold;
	display:block;
	text-align:center;
}
.contactinfoArea .tit .subTit{
	font-size:42px;
	font-weight:bold;
	display:block;
	text-align:center;
}
/* ----- */
.contactBtns{
	width:100%;
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.contactBtns .item{
	flex-basis:48%;
}


.contactBtns .item .btnCnt{
	display:block;
	background:#C60100;
	border:solid 4px #C60100;
	width:100%;
	text-align:center;
	text-decoration:none;
	color:#fff;
	border-radius:10px;
	font-size:30px;
	font-weight:bold;
}
.contactBtns .item .btnTel{
	display:block;
	background:#D4CDA6;
	border:solid 4px #fff;
	width:100%;
	text-align:center;
	text-decoration:none;
	color:#000;
	border-radius:10px;
}
.contactBtns .item .btnCnt:hover{
	background:#7b2020;
	border-color:#7b2020;
}
.contactBtns .item .btnTel:hover{
	background:#beb481;
}

/* ----- */
.contactBtns .item .btnCnt .btnInner{
	display:inline-block;
	background:url(../img/icon_mail.png) no-repeat left center;
	padding:12px 0 12px 40px;
}
.contactBtns .item .btnTel .btnInner{
	display:inline-block;
	background:url(../img/icon_tel.png) no-repeat left center;
	padding-left:40px;
	font-size:34px;
	font-weight:bold;
}
.contactBtns .item .btnTel .time{
	display:block;
	font-size:14px;
	font-weight:bold;
}
/* ----- */
.btnFaq{
	width:100%;
	max-width:48%;
	text-align:right;
}
.btnFaq a{
	text-decoration:none;
	color:#000;
}
.btnFaq a span{
	display:inline-block;
	background:url(../img/icon-faq.png) no-repeat left center;
	padding-left:30px;
	font-weight:bold;
	padding-left:
}
@media screen and (max-width: 785px) { /* Smartphone */
	.contactBtns{
		max-width:calc(100% - 30px);

	}
}

@media screen and (max-width: 767px) { /* Smartphone */
	.contactinfoArea{
		padding:30px 0 30px;
	}

	.contactinfoArea .tit{
		margin-bottom:20px;
	}
	.contactinfoArea .tit .mainTit{
		font-size:14px;
	}
	.contactinfoArea .tit .subTit{
		font-size:24px;
	}

	.contactBtns .item{
		flex-basis:100%;
		margin-bottom:10px;
	}

	.contactBtns .item .btnCnt{
		font-size:20px;
	}
	.contactBtns .item .btnTel{
	}
	.contactBtns .item .btnTel .btnInner{
		padding-left:40px;
		font-size:20px;
	}
	.contactBtns .item .btnTel .time{
		font-size:14px;
	}
	.btnFaq{
		max-width:calc(100% - 30px);
	}
}
/*==============================
 * エクステリア施工例
 exteriorArea
================================ */
.exteriorArea{
	padding:100px 0 50px;
	background:#E6E6E6;
	position:relative;
}
.exteriorArea:before{
	position:absolute;
	top:-58px; 
	left:0;
	right:0;
	content:"";
	width:100%;
	height:60px;
	background:#E6E6E6;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.exteriorArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}

/* ----- */
.resultLst{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.resultLst .item{
	flex-basis:32.5%;
	margin-bottom:50px;
}
.resultLst .item .pic{
	margin-bottom:0;
}
.resultLst .item .pic img{
	width:100%;
	height:auto;
}
.resultLst .item .price{
	margin-top:-40px;
	margin-bottom:10px;
	margin-right:-10px;
	text-align:right;
}
.resultLst .item .price .priceInner{
	background:#fff;
	padding:15px 15px 5px;
	border:solid 1px #707070;
	border-left:solid 5px #E1403F;
	font-weight:bold;
}
.resultLst .item .price .mark{
	font-size:20px;
}
.resultLst .item .price .num{
	font-size:34px;
}
.resultLst .item .price .tani{
	font-size:15px;
}
.resultLst .item .txt{
	font-weight:bold;
	font-size:18px;
}
@media screen and (max-width: 1240px) { /* Smartphone */
	.exteriorArea .inner{
		max-width:calc(100% - 20px);
	}
}
@media screen and (max-width: 767px) { /* Smartphone */
	.exteriorArea{
		padding:0px 0 50px;
	}
	.resultLst{
	}
	.resultLst .item{
		flex-basis:48%;
		margin-bottom:50px;
	}
	.resultLst .item .pic{
		margin-bottom:0;
	}
	.resultLst .item .pic img{
	}
	.resultLst .item .price{
		margin-top:-20px;
		margin-bottom:10px;
		margin-right:0px;
	}
	.resultLst .item .price .priceInner{
		background:#fff;
		padding:5px 5px 5px;
		border-left:solid 5px #E1403F;
	}
	.resultLst .item .price .mark{
		font-size:15px;
	}
	.resultLst .item .price .num{
		font-size:20px;
	}
	.resultLst .item .price .tani{
		font-size:14px;
	}
	.resultLst .item .txt{
		font-size:14px;
	}


}
/*==============================
 * leadArea
================================ */
.leadArea{
	background:#fff;
	padding:100px 0;
}
.leadArea .inner{
	display:block;
	width:100%;
	max-width:1240px;
	margin-left:auto;
	margin-right:auto;
}
.leadArea .overlayBox{
	position:relative;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-bottom:100px;
}
.leadArea .overlayBox > .pic{
	position:absolute;
	width:53%;
}
.leadArea .overlayBox > .pic img{
	width:100%;
	height:auto;
}
.leadArea .overlayBox .cnt{
	background:#E9DBA0;
}
.leadArea .overlayBox .cnt .tit{
	font-size:35px;
	font-family: "Sawarabi Mincho", serif;
}
.leadArea .overlayBox .cnt .txt{
	font-size:18px;
}
@media screen and (max-width: 767px) { /* Smartphone */

	.leadArea{
		width:calc(100% - 30px);
		padding:0px 0 50px;
		margin-left:auto;
		margin-right:auto;
	}
	.leadArea .overlayBox{
		margin-bottom:40px;
	}
	.leadArea .overlayBox > .pic{
		position:relative;
		width:100%;
		min-height:auto;
		z-index:1;
	}
	.leadArea .overlayBox > .pic img{
	}
	.leadArea .overlayBox .cnt{
		z-index:2;
		width:90%;
		margin-top:-30px;
		flex-basis:auto;
		position:relative;
		padding:15px;
		margin-left:auto;
		margin-right:auto;
		
	}

	.leadArea .overlayBox .cnt .tit{
		font-size:18px;
		font-weight:bold;
	}
	.leadArea .overlayBox .cnt .txt{
		font-size:15px;
	}
}