@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Poppins');

/* reset */

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, font, 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 {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
	vertical-align: baseline; background: transparent;
}
body {
	line-height: 1; color: #333; min-width: 320px;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","MS P Gothic","Osaka","Hiragino Kaku Gothic Pro", Verdana,Arial, Helvetica, sans-serif; 
	-webkit-text-size-adjust: none;
/* 	overflow-x: hidden; */
}

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

ol, ul { list-style: none; }

:focus { outline: 0; }
img { max-width: 100%; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }


/*----- 共通内容 -----*/

.line0 { line-height: 0; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; line-height: 0; }
.cen { text-align: center; }
.c_img { display: block; margin: 0 20px 20px 0;}
a:hover img { opacity:0.8;	filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: tranparent; }
.opa a:hover img { opacity:0.8;	filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: tranparent; }
.clearfix:after { content: "."; display: block; visibility: hidden; height: 0.1px; line-height: 0; clear: both; }
.none { display: none; }
.tr { text-align: right; }
.border { border: 1px solid #ccc; }

.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }
.mt70 { margin-top: 70px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb70 { margin-bottom: 70px; }
.ml10 { margin-left: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb50 { padding-bottom: 50px; }

.red { color: #e00; }
.f12 { font-size: 12px; }
.f16 { font-size: 16px; }
.f20 { font-size: 20px; }
.bold { font-weight: bold; }

.p01 { line-height: 1.8; padding: 0 0 10px; }
.p02 { line-height: 1.4; padding: 0 0 10px; }
.p03 { font-size: 14px; line-height: 1.8; padding: 0 0 20px; }

#wrapper { width: 100%; min-width: 1080px; overflow: hidden; }
.wrap { width: 1080px; margin: 0 auto; padding: 0; clear: both; }
.lower { width: 1080px; margin: 0 auto; padding: 40px 100px 80px; clear: both; }
.lower2 { width: 1080px; margin: 0 auto; padding: 40px 0 80px; clear: both; }
.lower3 { width: 1080px; margin: 0 auto; padding: 0; clear: both; }
.sp { display: none; }

#header { background: #fff; width:100%; height:70px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1); }
#header h1 { display: block; float: left; padding: 0;}
#header h1 img { height:auto; display: block; margin: 0; }
#header ul.menu { padding: 28px 0 0 10px; }
#header ul.menu li {float: left;font-size: 13px;letter-spacing:1px;line-height: 1.2;text-align: center;border-left:1px solid #333; }
#header ul.menu li:first-child { border-left: none; }
#header ul.menu li a { display: block; color: #333; text-decoration: none; width: 100%; margin: 0 auto; padding: 0 15px;}
#header ul.menu li a:hover { color: #6d972b; text-decoration: underline; }
#header .left { width: 82%;float: left; ;width:85%}
#header .right { float: right; height: 70px;}
#header .right ul.btn { display: block; float: right; padding: 0; font-size: 15px; }
#header .right ul.btn i { color: #fff; padding-right: 5px; }
#header .right ul li.btn1 a { 
	display: block; 
	color: #fff; 
	width: 180px; 
	height: 35px; 
	padding: 10px 0; 
	text-align: center; 
	background: #1d262c;
	letter-spacing: 1px;
	text-decoration: none;
}
#header .right ul li.btn2 a { 
	display: block; 
	color: #fff; 
	width: 180px; 
	height: 35px; 
	padding: 10px 0; 
	text-align: center; 
	background: #6d972b;
	letter-spacing: 1px;
	text-decoration: none;
}
#header .right ul li.btn i { padding-right: 5px; }
#header .right ul li.btn1 a:hover,
#header .right ul li.btn2 a:hover { opacity: 0.8;} 

.img01 { border-radius: 5px; }

#contents .pankuzu { padding-top:20px; padding-bottom:40px; font-size:90%; }
#contents .pankuzu span { margin: 0 10px; }
#contents .pankuzu a { color: #333; }
#contents .pankuzu a:hover { color: #184e68; }

section a:hover { text-decoration: none; color: #6d972b; }
section .frame { max-width: 750px; margin: 0 auto; padding-bottom: 50px; }

.totop { display: none; font-size: 13px; padding: 20px 10px; text-align: right; }
.totop a { color: #555; }

#footer { padding: 15px 0 0; background: #515813; color: #fff; }
#footer .left { width: 35%; float: left;}
#footer .right { width: 65%; float: right;}
#footer h1 { padding: 0 0 0; }
#footer p.text { font-size:11px;line-height: 1.1; padding-left: 70px; }
#footer .menu { clear: both; font-size: 12px; padding: 10px 0 50px; }
#footer ul.f_btn li a {
	float: left;
	display: block; 
	color: #fff; 
	width: 180px; 
	height: 30px;
	margin: 10px 10px 8px 0;
	padding: 5px 0; 
	text-align: center;
	border: 2px solid #fff;
	letter-spacing: 1px;
	text-decoration: none;
}
#footer ul.f_btn li a.tel { font-family: "poppins",sans-serif; }
#footer ul.f_btn li a:hover { opacity: 0.5; }
#footer ul.f_btn li i { padding-right: 5px; }

#footer .menu a { color: #fff; text-decoration: none; }
#footer .menu a:hover { color: #fff; text-decoration: underline; }
#footer .menu li { display: inline-block; padding: 0 10px; border-left: solid 1px #fff; }
#footer .menu li:nth-of-type(1) { padding: 0 15px 0 0; border-left: none; }

#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

#footer address { clear: both; margin-left: 75px; font-size:12px; letter-spacing: 1px; font-style: normal; line-height: 2;}
#footer address i {padding-right: 5px; }
#footer .copyright { clear: both; font-family: "poppins",sans-serif; font-size: 11px; padding: 50px 0 10px; text-align: center; }

/* キーフレーム */
@keyframes fadeIn {
	 0% { opacity: 0; }
	 100% { opacity: 1; }
}


/* fixedTop */
#fixedTop {
	right: 10px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	display: none;
	background: #222;
	position: fixed;
	z-index: 9999;
	border-radius: 50%;
}

#fixedTop:hover {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0.7;
}

.col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 { 
	 padding: 0 15px; 
	 display: block; 
	 float: left; 
 }

.col-01 { width: 8.33333%; }
.col-02 { width: 16.66667%; }
.col-03 { width: 25%; }
.col-04 { width: 33.33333%; }
.col-05 { width: 41.66667%; }
.col-06 { width: 50%; }
.col-07 { width: 58.33333%; }
.col-08 { width: 66.66667%; }
.col-09 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

/*
.col2 { width: 50%; float: left; margin-left: 0; box-sizing: border-box; }
.col3 { width: 33%; float: left; margin-left: 0; box-sizing: border-box; }
.col3:nth-of-type(3n+1) { clear: both; margin-left: 0; }
.col4 { width: 25%; float: left; margin-left: 18px; box-sizing: border-box; }
.col4:nth-of-type(4n+1) { clear: both; margin-left: 0; }
*/

.table01 { width: 100%; border-top: solid 10px #fff; }
.table01 th { border-bottom: solid 10px #fff; border-right: solid 10px #fff; padding: 10px; font-weight: normal; text-align: left; }
.table01 td { border-bottom: solid 10px #fff; border-right: solid 10px #fff; padding: 10px; }
.table01 .b_none { border-bottom: none !important; }

.table02 { width: 100%; border-top: solid 1px #ccc; }
.table02 th { border-bottom: solid 1px #ccc; padding: 12px; font-weight: normal; text-align: left; }
.table02 td { border-bottom: solid 1px #ccc; padding: 12px; }

.table03 { width: 100%; }
.table03 th { border-bottom: solid 1px #ccc; padding: 12px; font-weight: normal; text-align: left; }
.table03 td { border-bottom: solid 1px #ccc; padding: 12px; }

.ul li { list-style: outside disc; margin-left: 1.5em; line-height: 1.8; }
.ul1 li { list-style: outside disc; margin-left: 1.5em;line-height: 1.5; }
.ol li { list-style: outside decimal; margin-left: 1.5em; line-height: 1.8; }
.ul,.ul1 { margin: 0 0 50px; font-size: 15px; }
.ol { margin: 0 0 30px; font-size: 14px; }

/*slidemenu*/
.sb-slide {
	position:fixed;
	right:10px;
	top:5px;
	z-index:10000;
	font-size:30px;
	line-height:1.2;
	display: none;
}
.sb-slide .sb-close ,
.sb-active .sb-slide .sb-toggle-right {
	display:none;
}
.sb-active .sb-slide .sb-close {
	display:block;
}
.sb-slide p {
	display: inline-block;
	padding:2px 7px;
	color:#333;
	border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url("/css/PIE.htc");
}
.sb-slidebar section {
	padding:1% 5% 0 2%;
}
.sb-slidebar section ul {
	margin:0;
	padding-bottom: 20px;
	font-size: 12px;
	color:#333;
}
.sb-slidebar section:last-child ul {
	margin:0;
	padding:0 0 10%;
}
.sb-slidebar section ul li ul {
	margin:0 0 0 7%;
}
.sb-slidebar section ul li a {
	display:table;
	width:100%;
	border-bottom: dotted 1px #000;
	text-decoration:none;
	color: #333;
}
.sb-slidebar section ul li a span ,
.sb-slidebar section ul li a em {
	display:table-cell;
	vertical-align:middle;
	padding:6% 0% 6% 2%;
	color: #333;
}
.sb-slidebar section ul li a em {
	text-align:right;
	color: #6d972b;
}
.sb-slidebar section ul li strong {
	display:block;
	padding:5% 2% 0;
}
.sb-slidebar section p {
	margin:0 0 3%;
}
.sb-slidebar section p a {
	display: block;
	background: #6d972b;
	text-align: center;
	border-radius: 10px;
	color: #fff;padding: 10px 0;
	font-weight:bold;
	text-decoration: none;
}

.sb-slidebar section p a:hover {
	opacity: 0.8;
	text-decoration: none;
}
.sb-slidebar section p a i {
	display:inline-block;
	margin:0 10px 0 0;
	font-size:20px;
	vertical-align: middle;
}
.sb-slidebar section iframe {
	margin:0 0 10%;
}

.side_add {
	margin:0;
	width: 100%;
	color: #333;
}
.side_add p {
	line-height: 1.8;
	text-align: center;
	color: #333;	
}

.side_add p a {
	width: 80%;
	margin: 0 auto;
	font-size: 15px;
	color: #fff;

}


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

	#header ul.menu { padding: 28px 0 0 0; }
	#header ul.menu li { font-size: 12px;letter-spacing: 0.05em; }
	#header ul.menu li a { padding: 0 5px;}	
	#header .right { width: 120px; }	
	#header .right ul li.btn1 a { 
		width: 110px; 
		font-size:11px;
	}
	#header .right ul li.btn2 a { 
		width: 110px; 
		font-size:11px;
	}

}

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

	.fixed { display: none; }
	#wrapper { width: 100%; min-width: 100%; }
	.wrap { width: 100%; }
	.lower,
	.lower2{ width: 100%; padding: 30px 0 0;}
	.lower3 { width:100%; }
	.pc { display: none; }
	.sp { display: block; }
	
	#contents .pankuzu { padding: 0 10px; font-size: 80%; }
	section .frame { width: 100%; }
	
	#header { width: 100%; height: auto; padding: 0; box-shadow: 0px 0px 0px 0px; }
	#header .left {width: 100%; float: none; }
	#header h1 { width:80%; float: left; margin: 0; padding: 0; }
	#header .left ul.menu {display:none;}
	#header .right { display:none;}

	.totop { display: block; }
	
	#footer { padding: 0 10px; }
	#footer .left { width:100%; float: none;}
	#footer .right { width:100%; float: none;}
	#footer .menu { width: 100%; text-align: left; }
	#footer h1 {  padding: 10px 0; float: none; width: 100%; }
	#footer p.text { padding-left: 3px; }
	#footer ul.f_btn {margin: 0 10px 20px;}
	#footer .menu { padding: 6px 10px; }
	#footer .menu li { margin: 10px 0; font-size: 12px; }
	#footer .menu li:nth-of-type(1) { padding-left: 10px; border-left: 1px solid #fff; }
	#footer .copyright { padding: 10px 10px 20px; letter-spacing: 0; text-align: left; }
		
	.col-01, .col-02, .col-03, .col-04, .col-05, .col-06, .col-07, .col-08, .col-09, .col-10, .col-11, .col-12 { padding: 0 10px; }

	.col-01 { width: 50%; }
	.col-02 { width: 50%; }
	.col-03 { width: 50%; }
	.col-04 { width: 33.3%; }
	.col-05 { width: 100%; }
	.col-06 { width: 50%; }
	.col-07 { width: 100%; }
	.col-08 { width: 100%; }
	.col-09 { width: 100%; }
	.col-10 { width: 100%; }
	.col-11 { width: 100%; }
	.col-12 { width: 100%; }
	
	.table01 th { padding: 5px; border-bottom: solid 2px #fff; border-right: solid 2px #fff; }
	.table01 td { padding: 5px; border-bottom: solid 2px #fff; border-right: solid 2px #fff;}
	.table02 th { padding: 5px; }
	.table02 td { padding: 5px; }	
	.table03 th { padding: 5px; }
	.table03 td { padding: 5px; }	
	
	.sb-slide {
		display: block;
	}
	
	.side_add {
		margin:0 0 5%;
	}
	.side_add p {
		font-size: 13px;
	}
	
}


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

	/*
	.col3 { width: 100%; float: none; margin-left: 0; }	
	#footer .col3 { width: 100%; float: none; margin-left: 0; }	
	.col4 { width: 48%; margin-left: 0; }
	.col4:nth-of-type(2n) { margin-left: 4%; }
	.col4:nth-of-type(2n+1) { clear: both; }
	*/
	
	.col-04,.col-06 { width: 100%; }	
	.ul li,.ul1 li,.ol li { font-size: 13px; }


}

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

	
}


/* --------------------------------------- 2018-03-06 追加 --------- */
.beforeafter *	{
	box-sizing: border-box;
}

.beforeafter	{
	width: 100%;
}

.beforeafter li	{
	display:block;
	float:left;
	width:50%;
	padding:0;
	margin:10px 0 10px 0;
	position:relative;
}

.beforeafter li img	{
	width:100%;
	vertical-align: bottom;
	padding:0;
	margin:0;
}

.beforeafter li:nth-child(odd):after	{
	content: 'BEFORE';
	display:inline-block;
	background:black;
	color:white;
	line-height: 1;
	padding:8px;
	position:absolute;
	top:-10px;
	right:5px;
	font-family: "poppins",sans-serif;
	font-size:12px;
	font-weight:200;
	letter-spacing: 0.1em;
}

.beforeafter li:nth-child(even):after	{
	content: 'AFTER';
	display:inline-block;
	background:white;
	color:black;
	line-height: 1;
	padding:8px;
	position:absolute;
	top:-10px;
	right:5px;
	font-family: "poppins",sans-serif;
	font-size:12px;
	font-weight:400;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 667px){
.workArea .beforeafter li img	{
	max-width: 100%;
}

.topWork .beforeafter li	{
	float:none;
	width:100%;
	margin:20px 0 10px 0;
	border:1px solid white;
}
	
}