@charset "utf-8";

html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}



html {
	font-size: 100%;
	color: #333;
}

body {

	padding: 0;
	margin: 0 auto;
	font-size: 0.9rem;
	font-family: YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ" ,Meiryo, sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	line-height: 1;
	vertical-align: bottom;
}

a {
	color: #0086d4;
	text-decoration: none;
}
a:visited {
	color: #0077bb;
}
a:hover {
	color: #edba02;
	text-decoration: underline;
}


h1, h2, h3, h4, h5, h6 {
}

p {
	margin: 1.5em 0;
}

.note {
	font-size: 90%;
	color: #666;
}




.container {
	max-width: 1280px;
	margin: 50px auto;
	padding: 0 0 0 0;
	overflow: hidden;
}


.content {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 0 5% 0;
	color: #333;
	line-height: 1.8;
}

.pages .content {
	width: 65%;
	float: left;
}

.pages .content h2 {
	font-weight: bold;
	color: #750f0f;
	margin: 2em 0 1em 0;
}

.pages .content h2:first-child {
	margin: 0 0 1em 0;
}

.sidebar {
	width: 30%;
	float: right;
	background-color: #f6e6ca;
	border-radius: 10px;
	padding: 25px;
	box-sizing: border-box;
}


.sidebar h3 {
	margin: 0 0 1.5em 0;
	font-weight: bold;

}
.sidebar h3:first-child {
	margin: 0 0 0.5em 0;
}

.sidebar ul {
	list-style: none;
	margin: 0 0 2.5em 0;
	padding: 0;
	background-color: #fbf4df;
	border-radius: 10px;
}
.sidebar ul li {
	padding: 0;
	text-align: center;
	border-top: 1px solid #fff;
}
.sidebar ul li:first-child {
	border: none;
}
.sidebar ul a {
	padding: 15px 0;
	display: block;
}

.sidebar ul a, .sidebar ul li a:visited {
	color: #000;
	text-decoration: none;
}
.sidebar ul a:hover {
	background-color: #fff;
}
.sidebar-contact {
	display: block;
	border-radius: 3px;
}

.sidebar a {
	text-decoration: none;
	color: #000;
}

.sidebar a:hover {
	text-decoration: none;
	color: #ff7000;
}



.content h1:first-child {
	margin: 0 0 1em 0;
	font-size: 200%;
	line-height: 1.4;
}

#header {
	padding: 0;
	margin: 0;
	position: absolute;
	background-image: none;
	background-color: rgb(99, 53, 13);
	background-image: url(../img/header-bg.jpg);
	color: #fff;
	text-align: center;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	box-shadow: 0 0 10px rgba(0,0,0,0.2)
}

.mainNav ul {
	margin: 0;
	padding: 0;
}

.mainNav li {
	display: inline-block;
	margin: 0 1%;
	font-size: 14px;
	line-height: 1;
}

.mainNav li.active {
	font-weight: bold;
}

/*** サブメニュー的なもの ***/

.mainNav li.submenu ul {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	padding: 0;
	background-color: rgba(255,255,255,0.9);
	text-align: left;
}
.mainNav li.submenu:hover ul {
	margin: 0;
	padding: 0;
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}
.mainNav li.submenu li {
	margin: 0;
	padding: 0;
	display: block;
}

.mainNav a, .mainNav a:visited {
	color: #fff;
	text-decoration: none;
	padding: 20px 20px 18px 20px;
	display: block;
}
.mainNav a:hover {
	color: #ffbc51;
}





#footer {
	margin: 5% 0 0 0;
	padding: 3%;
	text-align: center;
	color: #fff;
	font-size: 80%;
	clear: both;
	background-color: rgba(150, 121, 80, 0.95);
	border-top: 15px solid  #e0d3bc;
}
#footer ul {
	margin: 0 auto 2em auto;
	padding: 0;
	list-style: none;
	max-width: 980px;
	
}
#footer li {
	display: inline-block;
	margin: 0 0.5em;
}
#footer a:link, #footer a:visited {
	color: #ffffff;
	text-decoration: none;
	display: inline-block;
	padding: 0.5em 1.2em;
	border-radius: 3px;
}
#footer a:hover {
	color:  rgb(104, 58, 9);
	background-color: #fff;
}



.alignCenter {
	text-align: center;
}

.floatRight {
	float: right;
	margin: 0 0 1em 1em;
}

.floatLeft {
	float: left;
	margin: 0 1em 1em 0;
}


.content footer {
	text-align: right;
	clear: both;
	margin: 5% 0;
}


/* header */


#header .inner {
	position: relative;
}


.title {
	width: 320px;
	margin: 10px 0 -5px 0;
}


 
/* Fixed */
#header.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	transition: top 1.65s ease-in;
	-webkit-transition: top 1.65s ease-in;
	-moz-transition: top 1.65s ease-in;
}
#header.fixed .title {
	display: none;
}

 
/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 30px;
	height: 36px;
	cursor: pointer;
	z-index: 102;
}
#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #fff;
	border-radius: 1px;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 10px;
}
#nav-toggle span:nth-child(3) {
	top: 20px;
}





.home {
	background-color: #f8f4e7;
}

.home h1 {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
}

.top-about img {
	width: 100%;
	margin: 0 0 1.5% 0
}

.top-about dl {
	line-height: 1.5;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0;
}
.top-about dt {
	width: 7.5em;
	box-sizing: border-box;
	margin: 0;
	padding: 0.3em 0;
	float: left;
	display: inline-block;
	clear: both;
	font-weight: bold;
}
.top-about dd {
	width: calc(100% - 8em);
	margin: 0;
	padding: 0.3em 0;
	float: left;
	display: inline-block;
}

.top-about iframe {
	width: 100%;
	height: 500px;
	border: none;
}


ul.top-reform {
	list-style: none;
	padding: 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-pack:distribute;
	-ms-flex-pack: distribute;
	justify-content: space-between;
}

ul.top-reform li {
	width: 32%;
	margin: 0 0 2% 0;
	border-radius: 5px;
	background-color: #fff;
}

ul.top-reform li h3 {
	font-size: 15px;
	margin: 0;
	padding: 0.5em 1em;
	font-weight: bold;
	color: #441f03;
}

ul.top-reform li img {
	width: 100%;
}

ul.top-reform a, ul.top-reform a:visited {
	text-decoration: none;
	color: #333;
}
ul.top-reform a:hover {
	text-decoration: none;
	opacity: 0.8;
}

.home .container {
	max-width: 1280px;
	padding: 0 0 0 0;

}

.home .content {
	max-width: 1280px;
	padding: 0 0 0 0;
}

.home-carousel {
	width: 100%;
	list-style: none;
	padding: 0 0 0 0;
	margin: 140px 0 0 0;
	text-align: center;
}
.home-carousel div {
	box-sizing: border-box;
	width: 100%;
	background-position: center top;
	background-size: cover;
	display: block;
	text-decoration: none;
	color: #fff;
	position: relative;
	vertical-align: bottom;
}

.home-carousel img {
	width: 100%;
}


.home-carousel .slick-prev {
	left: 20px;
	z-index: 999;
}

.home-carousel .slick-next {
	right: 20px;
	z-index: 999;
}





.pageheader {
	position: relative;
	margin: 111px 0 0 0;
	padding: 75px 0 0 0;
	height: 180px;
	background-size: cover;
	background-position: center center;
}

.pageheader h1 {
	font-size: 2.2rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.8), 0px 0px 20px rgba(0,0,0,0.5);
}





.flow .pageheader {
	background-image: url(../img/header-plan.jpg);
}

ol.flow-step {
	list-style: none;
	margin: 0 0 20px 0;
}

ol.flow-step li {
	margin: 0 0 20px 0;
	padding: 0 0 30px 0;
	background-image: url(../img/arrow.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	overflow: hidden;
}

ol.flow-step li:last-child {
	background-image: none;
}

ol.flow-step h2 {
	margin: 0 0 0 0;
}
ol.flow-step p {
	margin: 0;
}




.reform .pageheader {
	background-image: url(../img/header-reform.jpg);
}
.reform .pageheader h1 {
	color: #fff;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.8), 0px 0px 20px rgba(0,0,0,0.5);
}





.water .pageheader {
	background-image: url(../img/header-water.jpg);
}

.problems {
	margin: 1em 0 1em 0;
	padding: 1.5em 2em;
	border: 3px solid #bcd8ec;
	border-radius: 10px;
	overflow: hidden;
	clear: both;
}




.interior .pageheader {
	background-image: url(../img/header-interior.jpg);
}


.problems h3 {
	margin: 0;
	font-weight: bold;

}
.problems ul {
	margin: 0;
}

.slove {
	margin: 1em 0 3em 0;
	padding: 1.5em 2em;
	border: 3px solid #f39300;
	background-color: #fffdf0;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
}

.slove h3 {
	margin: 0;
	font-size: 1.2rem;
	font-weight: bold;
	color: #bd6600
}
.slove p {
	margin: 0.5em 0 ;
}
.slove img {
	width: 49%;
	display: inline-block;
	float: left;
}
.slove img:last-child {
	width: 49%;
	display: inline-block;
	float: right;
}


.exterior .pageheader {
	background-image: url(../img/header-exterior.jpg);
}

.paint-merit {
	margin: 1em 0 3em 0;
	padding: 1.5em 2em;
	border: 3px solid #f39300;
	background-color: #fffdf0;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
	clear: both;
}

ol.paint-point {
	list-style: decimal;
	
}

ol.paint-point > li {
	margin: 1em 0;
	padding: 1.5em 2em;
	border: 3px solid #54abbe;
	background-color: #e2f0f4;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;

}
ol.paint-point ul {
	margin: 0;
	padding: 0 0 0 1em;
	list-style: disc;
}


.faq .pageheader {
	background-image: url(../img/header-faq.jpg);
}

.faq .content h3 {
	padding: 0;
	margin: 3em 3em 2em 1em;
	position: relative;
	padding: 0.5em 1em 0.5em 3em;
	border: 3px solid #f4c57c;
	border-radius: 5px;
	background-color: #fff4db;
}

.faq .content p {
	padding: 0;
	margin: 2em 0 4em 4em;
	padding: 0.5em 1em 0.5em 3em;
	position: relative;
	border: 3px solid #c7e1f5;
	border-radius: 5px;
	background-color: #e6f3fd;
}


.faq .content h3 span, .faq p .content span {
	font-size: 3rem;
	color: #fa9519;
	display: block;
	margin: 0;
	font-weight: bold;
	width: 2rem;
	left: 0;
	top: -0.5em;
	position: absolute;
	line-height: 1;
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff;
}

.faq .content p span {
	color: #59a6d2;
}




.about .pageheader {
	background-image: url(../img/header-about.jpg);
}

.about dl {
	overflow: hidden;
	border-bottom: 1px solid #f0f0f0;
}

.about dt {
	float: left;
	clear: left;
	width: 6em;
	margin: 0.5em 0 0.2em 0;
	padding: 0.5em 0 0 0;
	border-top: 1px solid #f0f0f0;
}

.about dd {
	margin: 0.5em 0 0.2em 0;
	padding: 0.5em 0 0 0;
	float: left;
	width: calc(100% - 6em);
	border-top: 1px solid #f0f0f0;
}



.guide .pageheader {
	background-image: url(../img/header-guide.jpg);
}

.guide ol.point {
	list-style: none;
}
.guide ol.point span {
	font-size: 0.8rem;;
	display: inline-block;
	border-radius: 5px;
	background-color: #ff9a00;
	color: #fff;
	line-height: 1;
	padding: 0.5em 0.8em;
	margin: 0 0.8em 0 -2em;
}

.guide ol.point p {
	margin: 0.5em 0;
}
.guide ol.point li {
	margin: 0 0 2.5em 0;
}





/* ==========================================================================
   Media Queries 1280
   ========================================================================== */

@media screen and (max-width: 1280px) {



.container {
	width: 90%;
}

}

/* ==========================================================================
   Media Queries 960
   ========================================================================== */

@media screen and (max-width: 960px) {


.pages .content {
	width: 100%;
	float: none;
}

.sidebar {
	width: 100%;
	float: none;
}


.home-carousel {
	margin: 52px 0 0 0;
}


ul.top-reform li {
	width: 49%;
	margin: 0 0 2% 0;
}

#header, .inner {
	width: 100%;
	padding: 0;
}
#header {
	top: 0;
	margin-top: 0;
}

.pageheader {
	position: relative;
	margin: 52px 0 0 0;
	padding: 65px 0 0 0;
	height: 150px;
}


.title {
	margin:0 ;
	position: absolute;
	top: 5px;
	left: 15px;
	width: 260px;
}

#header.fixed .title {
	display: block;
}


/* Fixed reset */
#header.fixed {
	padding-top: 0;
	}
#mobile-head {
	width: 100%;
	height: 52px;
	z-index: 999;
	position: relative;
}



.mainNav {
	position: absolute;
	top: -505px;
	width: 100%;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	background-color: rgba(99, 53, 13, 0.95);
}

#header.fixed .mainNav {

}
.mainNav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 14px;
	color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	margin: 0;
	padding: 0;
}
.mainNav ul li {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.mainNav ul li.active {
	font-weight: bold;
	padding: 1em 0;
	background-color: #7b4414
}


#header .mainNav ul li a,
#header.fixed .mainNav ul li a {
	width: 100%;
	display: block;
	margin: 0;
	padding: 1em 0;
	color: #fff;
}

#header .mainNav ul li a:hover,
#header.fixed .mainNav ul li a:hover {
	background-color: rgba(178, 110, 51, 0.95);

}




#nav-toggle {
	display: block;
	}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 10px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);

	}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
	}
.open #nav-toggle span:nth-child(3) {
	top: 10px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
	}
	/* .mainNav スライドアニメーション */
.open .mainNav {
	/* .mainNav top + #mobile-head height */
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}




}


/* ==========================================================================
   Media Queries 640
   ========================================================================== */

@media screen and (max-width: 640px) {


.container {
	width: 90%;
}

.content {
	width: 100%;
	padding: 0 0 5% 0;
	float: none;
}


ul.top-reform li {
	width: 100%;
	margin: 0 0 4% 0;
}

.about .content img {
	width: 100%;
	float: none;
	display: block;
	margin: 0;
}


}

/* ==========================================================================
   Media Queries 480
   ========================================================================== */

@media screen and (max-width: 480px) {


.floatRight {
	float: none;
	width: 100%;
	margin: 0 0 1em 0;
}

.floatLeft {
	float: none;
	width: 100%;
	margin: 0 0 1em 0;
}

}