@charset "UTF-8";
/*----------------------------------------------------------------- 
リセット
----------------------------------------------------------------- */
*,
*:after,
*:before {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	border: 0;
	outline: 0;
	 -webkit-appearance: none;
}
ol, ul,li{ list-style: none; margin:0; padding:0;}
:focus,
:active { outline:0;}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
th, 
td { padding:8px; line-height:1.4em;}
input{ margin-right:5px;}	
.switch {
	visibility: hidden;
}

body{
	margin:0;
	padding:0;
	font:14px/1.6 "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Verdana, sans-serif;
	letter-spacing: 0.03em;
	color:#333;
	}
h1, h2, h3, h4, h5, h6, p,dt ,dl,dd{ font-size:inherit; margin:0; padding:0; }
hr{ display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
li{ margin:0; padding:0; }
@media screen and (min-width: 360px) { * { -webkit-text-size-adjust: none; } }


/*----------------------------------------------------
 clearfix
----------------------------------------------------*/

.clearfix:after,
.header:after,
.contents:after{ content: ".";display:block;height:0.1px;clear:both;visibility:hidden;font-size:0.1em;line-height:0; }
.clearfix,
.header,
.contents{ display:inline-block;overflow:hidden;_overflow:visible;display:block; }
* html .clearfix,
* html .header,
* html .contents{ height:1%; }


/* ----------- anchor */
a { color:#333; text-decoration:none;}
a:hover{opacity:0.5;filter:alpha(opacity=50);}
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }



/*********************************************************************

PC-Layout

**********************************************************************/
.pcnone{display:none;}
.spnone{display:block;}

.fl { float:left;}
.fr { float:right;}

section{padding:80px 0;}
.inner,
#headerIn,
#footerIn{width: 820px; margin-left: auto;margin-right: auto;}

img{max-width: 100%;}

/*----------------------------------------------------
 	header
----------------------------------------------------*/
#header{position:fixed; top:0; left:0; width: 100%; z-index:99; background:#fff; padding-top: 20px;}
#headerLogo{width: 340px; float:left; padding-top: 20px;}
#headerTel{width: 340px; float:right;}

#gNavi{padding: 20px 0;}
#gNavi ul li{float:left; text-align:center; border-right:3px solid;}
#gNavi ul li#gNav01{width: 144px; text-align:left;}
#gNavi ul li#gNav02{width: 144px;}
#gNavi ul li#gNav03{width: 224px;}
#gNavi ul li#gNav04{width: 184px;}
#gNavi ul li#gNav05{width: 124px; border-right:none; text-align:right;}
#gNavi ul li a{display: block;}
#gNavi ul li span{display: none;}
#gNavi ul li img{display:inline;}
@media only screen and (min-width: 668px){
#gNavi{display: block !important;}
}

.btnSide{position:fixed; top:195px; right:0; z-index:99;}

/*----------------------------------------------------
 	footer
----------------------------------------------------*/
#footer{padding-bottom: 20px;}
#footer .boxCol2{margin-bottom: 40px;}
#footer .boxCol2 .boxCol2Left{width: 390px;}
#footer .boxCol2 .boxCol2Right{width: 340px; text-align:right; padding-top: 10px;}
#footer .boxCol2 .boxCol2Left img,#footer .boxCol2 .boxCol2Right img{width: 100%;}
#footer .boxCol2 .boxCol2Right a:hover{opacity:1; cursor:default;}

#copyright{font-size:11px; text-align:center;}



/*----------------------------------------------------
 	contents
----------------------------------------------------*/
.contents{margin: 155px auto 0; }
.mainimg{margin: 0 auto 0; width: 900px; height:500px;}
.mainimg .flexslider{margin: 0; border:none;}
.flex-control-nav,.flex-direction-nav{display: none;}
.mainimg .flexslider img{width: 100%;}

/*見出し*/
h2{text-align:center; margin-bottom: 30px;}
h2 span{display: block; font-weight:bold; font-size:18px;}

h3.privacy{border-bottom: 1px solid #6fba2c; padding-bottom: 5px; margin-bottom: 10px; color:#6fba2c; font-weight:bold;}

/*ボックス*/
.boxCol2 .boxCol2Left{float:left;}
.boxCol2 .boxCol2Right{float:right;}

/*お客様の声*/
#voice{background:rgba(240,131,0,.1);}
#voice .boxCol2 .boxCol2Left{width: 415px;}
#voice .boxCol2 .boxCol2Right{width: 405px;}
ul.voice li{margin-left: 1em; margin-bottom: 10px;}
ul.voice li span{color:#f08300; display: block;}

/*施工事例*/
#work{background:rgba(0,129,204,0.1);}
#work .boxCol2.case1 .boxCol2Left{width: 350px;}
#work .boxCol2.case1 .boxCol2Right{width: 456px;}
#work .boxCol2.case2 .boxCol2Right{width: 350px;}
#work .boxCol2.case2 .boxCol2Left{width: 456px;}
#work .imgBox{padding-top: 16px;}
#work .txtBox{width: 320px !important;}
.workBtn{ background: #0081cc; text-align: center; color: #FFF; font-weight: bold; font-size: 25px; letter-spacing: 5px; display: block; width: 80%; margin:20px auto; padding:20px 0; }

/*アフターサービス*/
#service{background:rgba(255,241,0,0.1);}
#service .inner{width: 720px;}
#service .boxCol2 .boxCol2Left{width: 450px;}
#service .boxCol2 .boxCol2Right{width: 200px;}

/*お役立ち情報*/
#info{background:rgba(111,186,44,0.1); text-align:center;}
#info p{font-weight:bold; font-size:18px; line-height:1.8;}
#info .infoBox{padding:20px 0;}
#info .bnInfo{width: 712px; margin-left: auto; margin-right: auto;}
#info .bnInfo li{float:left; width: 224px; margin-right: 20px; margin-bottom: 15px;}
#info .bnInfo li:nth-child(3n){margin-right: 0;}
#info .bnInfo li a{display: block;}
#info .bnInfo li img{width: 100%; border:1px solid #ccc;}

/*店舗案内*/
#map-canvas{width: 100%; height: 600px;}

/*お問い合わせ*/
table.form{background:#ccc; border-spacing:1px; border-collapse:separate; width: 100%; margin-bottom: 20px;}
table.form th{background:#F0F8E9; text-align:left; font-weight:normal; padding:20px 10px; width: 240px;}
table.form td{background:#fff; padding:20px 10px;}

.privacyBox{width: 100%; height: 200px; overflow:scroll; border:1px solid #ccc; padding:20px;}

.btnContact{width: 240px; height: 50px; color:#fff; background:#6fba2c; text-align:center; font-size:1.2857em; border:none; margin:20px auto 0;}
.btnContact:hover{opacity:0.5; cursor:pointer;}

/*イベント情報　20170424追加*/
.event { width:900px; margin:80px auto 0; } 
@media only screen and (max-width:640px){
.event { width:96%; margin:80px auto 0; } 
}

/*お知らせ　20170807追加*/
.news { width:900px; margin:80px auto 0; } 
.news p { font-size:115%; text-align:center;} 
@media only screen and (max-width:640px){
.news { width:96%; margin:80px auto 0; } 
.news p { font-size:100%; text-align:left;} 
}



/*********************************************************************

SP-Layout

**********************************************************************/
@media only screen and (max-width: 667px){
.pcnone{display:block;}
.spnone{display:none;}

.fl,.fr{float:none;}
.fl{margin-bottom: 10px;}

section{padding:50px 0;}
.inner,
#headerIn,
#footerIn{width: 94%;}

img{width: 100%;}

/*----------------------------------------------------
 	header
----------------------------------------------------*/
#header{position:fixed; top:0; left:0; width: 100%; z-index:99; background:#fff; padding-top:0 !important; height: 40px;}
#headerLogo{width: 48%; float:left; padding-top: 10px;}
#headerLogo img{max-width: 100%; width: auto; max-height: 20px;}
#headerTel{display: none;}
#scrollFadeOut{display: block !important; opacity:1 !important;}

#gNavi{padding: 10px 0; background:#fff; width: 106%; margin-left: -3%; display: none;}
#gNavi ul li{float:none; text-align:center; border-right:none; border-bottom: 1px solid #ccc; padding:10px 3%;}
#gNavi ul li#gNav01{width: 100%; text-align:center; border-top:1px solid #ccc;}
#gNavi ul li#gNav02{width: 100%;}
#gNavi ul li#gNav03{width: 100%;}
#gNavi ul li#gNav04{width: 100%;}
#gNavi ul li#gNav05{width: 100%; text-align:center;}
#gNavi ul li a{display: block;}
#gNavi ul li span{display:inline;}
#gNavi ul li img{display: none;}

.menu-trigger{position:absolute; top:5px; right:10px; display: block; width: 30px; height: 30px; background:url(../img/btn_spmenu.png) no-repeat 50% 50%; background-size:25px auto;}
.btnHeaderContact{position:absolute; width: 30px; height: 30px; display: block; top:5px; right:45px;}
.btnHeaderContact img{width: 100%;}

.btnSide{display: none;}

/*----------------------------------------------------
 	footer
----------------------------------------------------*/
#footer{padding-bottom: 20px;}
#footer .boxCol2{margin-bottom: 20px;}
#footer .boxCol2 .boxCol2Left{width: 100%; text-align:center; margin-bottom: 10px;}
#footer .boxCol2 .boxCol2Right{width: 100%; text-align:center; padding-top: 0;}


/*----------------------------------------------------
 	contents
----------------------------------------------------*/
.contents{margin-top: 60px;}
.mainimg{margin: 0 auto 0; width: 100%; height:auto;}
.mainimg .flexslider{margin: 0; border:none;}
.flex-control-nav,.flex-direction-nav{display: none;}
.mainimg .flexslider img{width: 100%;}

/*見出し*/
h2{margin-bottom: 20px;}
h2 span{font-size:12px; line-height:1.4;}


/*ボックス*/
.boxCol2 .boxCol2Left{float:none; margin-bottom: 20px; width: 100% !important;}
.boxCol2 .boxCol2Right{float:none; width: 100% !important;}

/*お客様の声*/

/*施工事例*/
#work .imgBox{padding-top: 0;}
#work .txtBox{width: 100% !important;}
#work .boxCol2.case1 .boxCol2Left,
#work .boxCol2.case2 .boxCol2Right{margin-bottom: 10px;}

/*アフターサービス*/
#service .inner{width: 94%;}

/*お役立ち情報*/
#info p{line-height:1.6; font-size:12px; text-align:left;}
#info .infoBox{padding:10px 0;}
#info .bnInfo{width: 100%;}
#info .bnInfo li{float:left; width: 49%; margin-right: 2%; margin-bottom: 10px;}
#info .bnInfo li:nth-child(3n){margin-right: 2%;}
#info .bnInfo li:nth-child(2n){margin-right: 0;}

/*店舗案内*/
#map-canvas{width: 100%; height: 230px;}


/*お問い合わせ*/
table.form{margin-bottom: 10px;}
table.form th{padding:10px 5px; width: 100%; display: block;}
table.form td{padding:10px 5px; width: 100%; display: block;}
.privacyBox{padding:10px; height: 150px;}

/*イベント情報　20170803追加*/
.event { width:96%; margin:80px auto 0; } 

}

/* ---------------------------------------------------------
	汎用ボタン
--------------------------------------------------------- */

.btn a,input.btn{
	 -webkit-appearance: none;
	display:block;
	margin:20px auto;
	background:#64B5F6;
	font-size:160%;
	font-weight: bold;
	width: 50%;
	text-align: center;
	padding:10px;
	border-radius: 5px;
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	color: #fff;
}
.btn a:hover,input.btn:hover{ background:#FF9800;} 


/* ---------------------------------------------------------
	フォーム、フォーム バリデーション
--------------------------------------------------------- */
input, textarea { padding:5px; text-align:left;}
input[type=checkbox],
input[type=radio]{ margin-right:5px; vertical-align:middle;}
input[type=text],
input[type=tel] { width:60%; padding:8px; margin-right:5px; border:1px solid #ccc; border-radius:4px; font-size:1em; display:block;}
textarea {  width:90%; border:1px solid #ccc; font-size:1em;display:block; resize:vertical;}
select { padding:8px; border:1px solid #ccc; border-radius:4px; font-size:14px;}

input.input1 { width: 80%;}
input.input2 { width: 30%;}

label,
input[type=text], 
input[type=checkbox],
input[type=radio] { display:inline;}

input.myError,
textarea.myError{ background:#FFFFE6; }
p.myError{ color:#F00; padding-top:10px; font-weight:bolder; display:block; clear:both; }

input[type="checkbox"]{-webkit-appearance: checkbox; box-sizing: border-box; margin-bottom: 5px;}
input[type="radio"]{-webkit-appearance: radio; box-sizing: border-box; margin-bottom: 5px;}

input:focus,textarea:focus {border:solid 1px #EEA34A;}

@media only screen and (max-width: 667px){
label{ display:block!important;}
}


/* ------------------------------------------------
	　common
    ---------------------------------------------- */

.mb5 { margin-bottom:5px;}
.mb10 { margin-bottom:10px;}
.mb20 { margin-bottom:20px;}
.mb30 { margin-bottom:30px;}
.mb40 { margin-bottom:40px;}
.mb50 { margin-bottom:50px;}
.mb60 { margin-bottom:60px;}
.mb70 { margin-bottom:70px;}
.mb90 { margin-bottom:90px;}

.ml5 { margin-left:5px;}
.ml10 { margin-left:10px;}
.ml12 { margin-left:12px;}
.ml13 { margin-left:13px;}
.ml15 { margin-left:15px;}
.ml20 { margin-left:20px;}
.ml25 { margin-left:25px;}
.ml30 { margin-left:30px;}

.mr5 { margin-right:5px;}
.mr10 { margin-right:10px;}
.mr15 { margin-right:15px;}
.mr20 { margin-right:20px;}
.mr30 { margin-right:30px;}

.mt5 { margin-top:5px;}
.mt10 { margin-top:10px;}
.mt15 { margin-top:15px;}
.mt20 { margin-top:20px;}
.mt30 { margin-top:30px;}
.mt40 { margin-top:40px;}
.mt50 { margin-top:50px;}
.mt60 { margin-top:60px;}

.pt5 { padding-top:5px;}
.pt10 { padding-top:10px;}
.pt20 { padding-top:20px;}
.pt30 { padding-top:30px;}
.pt40 { padding-top:40px;}

.pb5 { padding-bottom:5px;}
.pb10 { padding-bottom:10px;}
.pb20 { padding-bottom:20px;}
.pb100{ padding-bottom: 100px;}

.text10{ font-size:72%; }
.text11{ font-size:79%; }
.text12{ font-size:86%; }
.text13{ font-size:93%; }
.text14{ font-size:100%; }
.text16{ font-size:115%; }
.text18{ font-size:129%; }
.text20{ font-size:143%; }
.text24{ font-size:172%; }
.text28{ font-size:200%; }
.text30{ font-size:214%; }
.textC { text-align:center;}
.textR { text-align:right;}
.textL{ text-align: left;}
.textB { font-weight:bolder;}

.red { color:#f00;}

.box10p { width: 10%;}
.box15p { width: 15%;}
.box20p { width: 20%;}
.box35p { width: 35%;}
.box40p { width: 40%;}
.box45p { width: 45%;}
.box49p { width: 49%;}
.box50p { width: 50%;}
.box55p { width: 55%;}
.box60p { width: 60%;}
.box80p { width: 80%;}

.lrAuto{ margin-left:auto; margin-right:auto;}

a.link{ color:#6fba2c; text-decoration:underline; font-weight:bold;}
a.link:hover{ text-decoration:none;}

.va_b{ vertical-align:bottom;}
.va_m{ display:inline-block;vertical-align:middle;}