@charset "utf-8";

*{
	max-width: 100% !important;
	height:auto;
}

body {
	font-family: Arial, ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	font-size: 14px;
	color: #222;
	line-height: 2;
	background:#666;
}

html,
body,
main,
main > section {
	width: 100%;
}

a {
	color: #666;
	text-decoration: none;
}

/* ClearFix
-------------------------*/
.cf:before,.cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}

.bg {
	width: 100%;
	height: 170%;
	background: url(../images/top_bg.jpg) top center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: fixed;
	top: 0;
	z-index: -1;
}
.bg_bak {
	width: 170%;
	height: 170%;
	background: url(../images/top_bg.jpg) top center no-repeat;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	position: fixed;
	top: 0;
	z-index: -2;
}


.loader {
	display: none;
	width: 100%;
	height: 100%;
	background-color: #222;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.loader .circleLoader {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 8px solid #f39700;
	border-right-color: transparent;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -15px;
	z-index: 9999999;
	animation: spin 1s linear infinite;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); opacity: 0.2; }
	50% { transform: rotate(180deg); opacity: 1.0; }
	100% { transform: rotate(360deg); opacity: 0.2; }
}
@-webkit-keyframes spin {
	0% { transform: rotate(0deg); opacity: 0.2; }
	50% { transform: rotate(180deg); opacity: 1.0; }
	100% { transform: rotate(360deg); opacity: 0.2; }
}
@-moz-keyframes spin {
	0% { transform: rotate(0deg); opacity: 0.2; }
	50% { transform: rotate(180deg); opacity: 1.0; }
	100% { transform: rotate(360deg); opacity: 0.2; }
}


.left-img {
	float: left;
	margin-right: 20px;
}
.right-img {
	float: right;
	margin-left: 20px;
}


header {
	width: 100%;
	overflow: hidden;
	padding: 0px 0;
	background: rgba(0,0,0,.6);
}
header .wrapper {
	width: auto;

}
header h1 img{
display: block;
margin: 0 auto;
padding:10px 0;
}

main{
	padding:0 2%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

footer {
	color: #fff;
	overflow: hidden;
	padding: 10px 0 0px;
	background:#333;
	margin-top: 30px;
}
footer h1 img{display: block;margin: 20px auto;}
footer .contact {
	float: right;
	margin-bottom: 40px;
}

footer small {
	clear: both;
	display: block;
	font-size: 11px;
	text-align: center;

}
footer small a { color: #fff;}
footer small a:not(:hover) { text-decoration: underline;}


.wrapper {
	padding:0 2%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	/* height: 100%; */
	margin: 0 auto;
}
.par_img {
	position: absolute;
}

main > section {
	overflow: hidden;
}

section h3 span {
	color: #20bee7;
	font-size: 17px;
	display: block;
	letter-spacing: 0.22em;
}

#top {
}
.layer {
	width: 130%;
	height: 800px;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -15%;
}
#top .logo {
	background: url(../images/logo.png) top center no-repeat;
	z-index: 4;
}
.catch {
	background: url(../images/top_catch.png) top center no-repeat;
	z-index: 3;
}


/* greeting -------------------------*/
#greeting {
	background:
		url(../images/bg_img.png) top center no-repeat,
		url(../images/bg_contents.png) top center repeat;
	text-align: center;
	border-bottom: 8px solid #595959;
	padding-bottom: 55px;
}
	#greeting .inner { padding-top: 50px;}
	#greeting h3 { margin-bottom: 20px;}
	#greeting ul {
	}

	#greeting li h4 {
		font-size: 18px;
		color: #222;
	}


/* electrical -------------------------*/
#electrical { text-align: center;}
	#electrical .inner { padding: 90px 0 0;}
	#electrical h3 { margin-bottom: 20px;}
	#electrical li p { text-align: left;}
	#electrical li h4 {
		font-size: 16px;
		margin-bottom: 20px;
		background: url(../images/tenant_subttl_bg.png) no-repeat center center;
	}
	#tenant {
		padding-bottom: 30px;
		border-bottom: 8px solid #595959;
		margin-top: 30px;
	}
	#consumer {
		padding: 30px 0 30px;
		border-bottom: 8px solid #595959;
	}


/* about -------------------------*/
#about {
	background:
		url(../images/bg_img02.png) top center no-repeat,
		url(../images/bg_contents.png) top center repeat;
	height: auto;
	text-align: center;
	border-bottom: 8px solid #595959;
}
	#about .inner {	padding: 30px 0 30px;}
	#about h3 {	margin-bottom: 20px;}
	#about .about_box {
		background: #000;
		padding: 10px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		text-align: center;
		border-radius: 6px;
	}
	#about p {
		font-size: 29px;
		line-height: 43px;
		letter-spacing: 0.02em;
		color: #fff;
	}
	#about p span { color: #ffa229;}


/* price -------------------------*/
#price {
	text-align: center;
	border-bottom: 8px solid #595959;
}
	#price .inner {	padding: 30px 0 50px;}
	#price h3 {	margin-bottom: 20px;}
	#price li {	margin-bottom: 50px;}
	#price li h4,
	#company h4 {
		font-size: 18px;
		color: #fff;
		text-align: left;
		margin-bottom: 10px;
		background: url(../images/price_h3.png) no-repeat;
		height: 45px;
		line-height: 45px;
		padding-left: 30px;
	}

.def {
	width: 100%;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 15px;
	margin-bottom: 10px;
}
.def th,.def td {
	padding: 14px 0;
	border: 1px solid #a6a6a6;
}
.def th { background: #e2e2e2;}
	.def tbody th { padding-left: 20px; text-align: left;}
	.def thead th { text-align: center;}
	.def thead th:not(:first-child) { width: 260px;}


/* results -------------------------*/
#results {
	background:
		url(../images/bg_img03.png) top center no-repeat,
		url(../images/bg_contents.png) top center repeat;
	text-align: center;
	border-bottom: 8px solid #595959;
}
	#results .inner { padding: 90px 0 45px;}
	#results h3 { margin-bottom: 20px;padding-top: 20px;}


/* faq -------------------------*/
#faq { text-align: center;}
	#faq .inner {
		background:
			url(../images/bg_img04.png) top center no-repeat,
			url(../images/bg_contents.png) top center repeat;
		background-size: cover;
		padding: 90px 0 50px;
		border-bottom: 8px solid #595959;
	}
	#faq h3 {
		color: #fff;
		padding: 20px 0;
	}
	#faq h3 b {
		font-size: 24px;
		display: block;
	}
	#faq h3 small {
		display: block;
	}
	#faq li {
		text-align: left;
		background: #000;
		padding: 10px 0 10px;
		margin-bottom: 20px;
		color: #fff;
	}
	#faq li dt {
		font-weight: bold;
		font-size: 18px;
		padding: 10px 10px 0 10px;
		padding-top: 0;
		cursor: pointer;
	}
	#faq li dd {
		background: #fff;
		margin-top: 10px;
		padding: 10px 10px 10px 55px;
		color: #000;
		position: relative;
	}
	i {
		display: inline-block;
		vertical-align: top;
		zoom: 1; /* Fix for IE7 */
		*display: inline; /* Fix for IE7 */
		font-weight: bold;
		font-style: normal;
		height: 35px;
		width: 35px;
		border-radius: 50%;
		text-align: center;
		margin-right: 10px;
	}
	i.q {
		background: #20bee7;
		color: #000;
	}
	i.a {
		background: #ffae00;
		line-height: 2.5;
		color: #000;
		top: 7px;
		left: 10px;
		position: absolute;
	}


/* company -------------------------*/
#company { text-align: center;}
	#company .inner { padding: 90px 0 50px;}
	#company .wrapper { width: 800px; margin: 0 auto;}
	#company h3 {	margin-bottom: 20px;}
	#company h3 b {
		font-size: 24px;
		padding: 20px;
		display: block;
	}
	#company h3 small {
		display: block;
	}

	#company .def tbody th { width: 30%;padding:10px; -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;}
	#company .def tbody td { text-align: left;padding:10px; -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;}

	#map {
		clear: both;
		max-width: 100%;
		min-width: 30%;
		margin: 0 auto;
		background: #000;
	}
	.googlemap {
		position: relative;
		padding-bottom: 450px;
		height: 0;
		overflow: hidden;
	}
	.googlemap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* pages , sections
================================================== */

ul.gallery,
.gallery ul {
	margin: 0;
	padding: 0;
	font-size: 0;
	overflow: hidden;
	letter-spacing: 0;
}
.gallery li {
	margin: 0;
	padding: 0;
	font-size: 12px;
	display: inline-block;
	background: none;
	vertical-align: top;
	color:#fff;
}
.gallery img {
	width: 100%;
	height: auto;
	padding: 2px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	box-sizing: border-box;
}


.gallery.column2 li {width: 49%;}
.gallery.column2 li:nth-child(2n+1) {margin: 0 2% 8px 0;}

.gallery.column3 li {width: 32%;}
.gallery.column3 li:nth-child(3n+2) {margin: 0 2% 8px;}

.gallery.column4 li {width: 24%;margin: 0 1.33% 8px 0;}
.gallery.column4 li:nth-child(4n) {margin: 0;}


.gaf{
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
}

.gaf li{
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	*display: inline; /* Fix for IE7 */
	width:48%;
}

.gaf li:nth-child(even){
margin-left: 2%;
}

.ff{
text-align: center;
font-size: 0;
letter-spacing: 0;
margin-top: 20px;
}

.ff li{
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	*display: inline; /* Fix for IE7 */
	width:50%;
}