@charset "UTF-8";

/*--------------------------------------------*/
body,input,textarea {
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","メイリオ", meiryo, Osaka, "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック", sans-serif;
	/*
	font-family: "ヒラギノ明朝 Pro","HiraMinPro","ＭＳ 明朝","ＭＳ Ｐ明朝","HG明朝E","MS PMincho",serif;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
	*/
}
* { box-sizing:border-box; }
body {
	margin:0px;
	padding:0px;
	font-size:100%;
	line-height:1em;
	color:#333;
}
header a, footer a{ color:#333; text-decoration:none; display:inline-block; }

h1 { font-size:150%; }
h2 { font-size:140%; }
h3 { font-size:130%; }
h4 { font-size:120%; }
h5 { font-size:100%; }
h6 { font-size:100%; }
h1,h2,h3,h4,h5,h6,div,dl,dt,dd,p,a,table,tr,td,address,img,
header ul, footer ul{
	margin:0px;
	padding:0px;
	line-height:1.5em;
	text-align:left;
	font-style:normal;
	list-style:none outside;
}
ul { margin:1em 0; padding:0 0 0 2em; } li { line-height:1.3em; margin:0 0 .5em; }
header li, footer li { line-height:1em; margin:0; }
i,em { font-style:normal; } u { text-decoration:none; } sup,sub { font-size:60%; }
/*************/
#clear, .clear { clear:both; }
.c { margin-left:auto; margin-right:auto; }
.l { float:left; }
.r { float:right; }
.t_c { text-align:center; }
/*img.l { margin:0 10px 10px 0; }
img.r { margin:0 0 10px 10px; }*/

/* table */
table { width:100%; border-collapse:collapse; border-spacing:0; }
thead th, thead td { background:#9166a9; color:#FFF; font-weight:normal; white-space:normal; }
th,td { border:1px solid #DDD; padding:10px; }
th { width:25%; text-align:center; white-space:nowrap; background-color:#e0ebf8; color:#0062d8; }
table , tr , td , th { border-color:#0062d8; }
td { text-align:center; }

/* * */
.aster li:before { content:"※"; }
.aster li { padding-left:1em; text-indent:-1em; font-size:90%; }

/*
.ph img,
img.ph {
	border:3px solid #FFF;
	box-shadow:2px 2px 3px 2px #CCCCCC;
	-moz-box-shadow:2px 2px 3px 2px #CCCCCC;
	-webkit-box-shadow:2px 2px 3px 2px #CCCCCC;
}

/* -------------------------------------------- */
a 			{ text-decoration:none; }
a:hover     { opacity:.50; text-decoration:none; }
/* nav a:hover { opacity:1; }
/* --------------------------------------------*/


/* wrapper /
header, footer, main { min-width:1000px; }

/* inner */
#products,
#infomation,
.construction,
header .headBox,
footer,
.pagetop,
.example,
.inner { display:block; clear:both; margin-left:auto; margin-right:auto; width:1000px; padding:0 20px; position:relative; }

/* flexBox */
.flexBox , .mvBox , #products li , #infomation ul , .b2a { display:flex; justify-content:space-between; flex-wrap:wrap; }
#products li:nth-of-type(2n) { display:flex; justify-content:space-between; flex-wrap:wrap; flex-flow:row-reverse; }
.flexBoxbtn { display:flex; justify-content:center; flex-wrap:wrap; }

/* header ********** */
header img, header a  { display:block; }

h1 img { width:300px; height:100%; }

header .headBox       { display:flex; align-items:flex-start; justify-content:space-between; padding:30px 20px; }
header .headBox div   { display:flex; align-items:baseline; padding-top:20px; }
header .headBox div strong { font-size:16px; margin:0 1em 0 0; color:#0068b7; }
header .headBox div a { 
	display:block; padding:1px 1em;
	background-color:#0068b7;
	border-radius:10px;
	text-align:center; font-size:24px; color:#fff;
}

header nav      { width:70%; }
header nav ul   { width:100%; display:flex; justify-content:space-around; padding-right:0; padding-left:10px; }
header nav li   { width:20%; font-size:18px; }
header nav li a { text-align:center; padding:10px 0; }
.act a,
header nav li a:hover,
footer li a:hover { color:#0068b6; }


#mv     { margin-bottom:40px; height:260px; background-color:#dbdada; }
#mv img { width:960px; height:260px; object-fit:cover; object-position:0 0; }
#mv p   { text-align:center; }



/* main ********** */
section { margin-bottom:100px; }

h2 { 
	padding:5px 0px;
	margin-bottom:40px;
	color:#0062d8;
	font-size:28px;
	border:1px solid #0062d8;
	text-align:center;
}
.title { margin-bottom:40px; }
.title h2 { background-color:#33a7e2; color:#FFF; border:none; margin-bottom:40px; }
.title p  { font-size:24px; color:#0091db; text-align:center; font-weight:bold; }
h3 { 
	color:#0062d8;
	margin-bottom:.3em;
	font-size:24px;
}

#products ul { padding:0;}
#products li {
	justify-content:space-between;
	align-items:center;
	margin:0;
}
#products div { width:47%; }
#products h3 { color:#0091db; }

.btn a { 
	display:block;
	width:30%; height:55px;
	font-size:24px;
	border-radius:25px;
	background-color:#0091db;	
	color:#FFF;
	padding:10px 0;
	text-align:center;
}
.tel { margin-right:40px; }
.tel a , .mail a { 
	display:flex;
	width:100%;
	font-size:24px;
	border-radius:25px;
	background-color:#0091db; color:#FFF;
	padding:10px 20px;
	justify-content:center;
	align-items:center;
}
.tel a::before {
	content:url(../img/tel.svg);
	margin-right:10px;
	width:26px; height:30px;
}
.mail a::before {
	content:url(../img/mail.svg);
	margin-right:10px;
	width:26px;
}

.b2a { width:100%; position:relative; margin-top:40px; }
.b2a img { width:480px; height:230px; object-fit:cover; }
.b2a::after {
	content:"";
	position:absolute;
	background-image:url(../imgtop/icon01.svg);
	width:64px; height:64px;
	top:50%; left:50%;
	margin:-32px 0 0 -32px;
}
/* example *****/
.example img { display:block; height:300px; }
.example .flexBox .b2a { margin:0; }
.example h3 { color:#0091db; }
.example .b2a::after { width:50px; height:50px; margin:0; transform:translate(-50%,-50%); }
.example .btn a { margin:40px auto 0 auto; }
/* beforeAfter - 装飾 */
.b2a p, .b2a div { position:relative; }
.b2a p::before {
    content:"AFTER"; position:absolute; top:0; left:0;
    background:#33a7e2; border:1px solid #33a7e2; width:6em; line-height:1.8em; text-align:center;
    font-size:1em; font-weight:bold; color:#FFF;
}
.b2a p:first-child::before  { content:"BEFORE"; background:#FFF; color:#33a7e2; }

/* wallRepair - 外壁改修 */
.wallRepair div { width:67%; }
.wallRepair .b2a p { width:50%; }
.wallRepair > p { width:33%; }
.wallRepair img { display:block; width:100%; height:240px; object-fit:cover; }
.flexBox.wallRepair { margin-top:40px; margin-bottom:10px; }

#products p a ,
.b2a + p a { margin:40px auto 0; }

#footBox { background-color:#dbdbda; padding:60px 0; margin-bottom:60px; }
#footBox h2 { background-color:#FFF; }
#footBox h3 { color:#000; text-align:center; margin-bottom:20px; }

/* pagetop */
.pagetop   { text-align:right; }
.pagetop a {
	display:inline-block; padding:2px .5em 0; margin:0 0 .5em 0;
	background:#0091db; border-radius:25px;
	color:#FFF;
}


/* footer ********** */
footer .logo     { display:flex; }
footer .logo img { width:300px; }

footer nav	  { width:100%; }
footer nav ul { width:100%; display:flex; justify-content:flex-start; }
footer li     { margin-bottom:20px; padding:0 20px; }
footer li a   { padding:5px 1em; }



/* copyright */
.copyright p { color:#000; text-align:center; margin-bottom:40px; }


/* --------------------------------------------*/

/* clearfix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* ¥*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* */
.clearfix:after { content:""; }

/* --------------------------------------------*/



/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
#hmbCheck,#menuBtn { display:none; }
.sp { display:none; }
@media (max-width: 768px){
	.sp { display:inline-block; }
	.pc { display:none; }
	/* inner */
	#products,
	#infomation,
	.example,
	header nav ul,
	header .headBox,
	.inner { width:100%; }
	section#mv { height:auto; }
	#mv p {line-height:0; }
	#mv p img { width:100%; height:auto; }

	footer img,
	h1 img { width:100%; }

	/* flexBox */
	.flexBox { display:block; }
	.flexBox > * { width:100%; }

	/* header ********** */
	h1                    { width:70%; }
	header .headBox       { display:block; padding:10px 20px; }
	header .headBox div   { font-size:125%; }
	header .headBox div a { line-height:1em; color:#4a7f3d; }
	header nav    { width:100%; margin-top:15px; }
	header nav ul { padding:0; }
	header nav li { width:auto; font-size:14px; }

	main section { width:100%; }
	h2 { font-size:24px; }

	#products li { margin-bottom:60px; }
	#products li:nth-of-type(2n) { flex-flow:row wrap; }
	#products div { margin-top:20px; }
	#products h3 { text-align:center; }
	#products li ,
	#products img ,
	#products li div { width:100%; }


	.example .t_c { text-align:left; } 
	.b2a     { display:flex; }
	.b2a img { width:50%; height:100%; }
	.b2a::after {
		width:40px; height:40px;
		top:50%; left:50%;
		margin:-20px 0 0 -20px;
		background-size:contain;
	} 

	.btn a { width:100%; }

	.tel  { width:100%; margin-right:0; margin-bottom:20px; }
	.mail { width:100% }
	#footBox h3 { font-size:21px; }
	#footBox div table { width:100%; margin-bottom:20px; }
	#footBox th , td { font-size:14px; padding:10px 6px; }
	#footBox th { width:22%; padding:10px 0; }
	#footBox td { padding:10px 6px; }

	main .example .b2a p, .b2a img, .wallRepair div, .wallRepair > p { width:100%; }
	.wallRepair > p, .wallRepair img { height:100%; }
	.example .btn { margin-top:40px; }
    .example .b2a::after { transform:translate(-50%,-50%) rotate(90deg); }

	/* pagetop */
	.pagetop { width:100%; }

	/* footer ********** */
	footer { width:100%; }
	footer .logo { display:block; }
	footer .logo img { width:100%; }
	footer .logo > * {
	    width:100%;
	}
	footer nav { margin-top:10px; }
	footer nav ul   { width:100%; justify-content:space-between; }
	footer nav ul:nth-child(2) { justify-content:center; flex-wrap:wrap; }
	footer nav li { width:auto; padding:0; margin-bottom:10px; }
	footer nav ul:nth-child(2) li { font-size:14px; margin:0 1em; }
	footer li a   { padding:5px 0; text-align:center; }

}