@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; list-style-position:inside; } 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_r { text-align: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 20px; }
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 */
#infomation,
.construction,
header .headBox,
#mv,
.pagetop,
.example,
.inner { display:block; clear:both; margin-left:auto; margin-right:auto; width:1000px; padding:0 20px; position:relative; }

/* flexBox */
.flexBox , .mvBox , .b2a { display:flex; justify-content:space-between; flex-wrap:wrap; }
.flexBoxbtn { display:flex; justify-content:center; flex-wrap:wrap; }

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

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

body { border-top:6px solid #2871bc; position:relative; }
header {
	width:100%;
	height:420px;
	position:relative;
}
header .headBox       {
	display:flex; align-items:flex-end;
	justify-content:space-between;
	background-color:#FFF;
	border-radius:0 0 20px 20px;
	padding:20px;
	z-index:1;
}

h1 { width:40%; font-size:36px; }
h1 span { font-size:18px; }
h1 a { color:#2871bc; }
header article { width:60%; }
header .headBox div   { display:flex; justify-content:flex-end; align-items:center; }
header .headBox .tel {  margin:0 .8em 0 0; color:#2871bc; }
header .headBox .tel p { font-size:26px; }

header .headBox .tel p::before {
	content:url(../img/tel01.png);
	width:20px; height:25px;
	margin-right:5px;
}
header .headBox  .btn { padding:0 2em; }
header nav ul   { width:100%; display:flex; justify-content:flex-end; }
header nav li   { width:20%; font-size:18px; }
header nav li a::before {
	content:"/";
	display:inline-block;
	color:#cecece;
	padding-right:15%;
}

header nav li:first-of-type { width:13%; }
header nav li:first-of-type a::before { content:none; }
header nav li a { text-align:center; color:#2871bc; }

#mv {
	width:100%;
	height:420px;
	padding:0;
	background:url(../../common/img/mv.jpg)no-repeat center / cover;
	position:absolute;
	top:0; left:0;
}
#mv div {
	width:1000px;
	height:100%;
	display:flex;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	color:#FFF;
	padding:100px 20px 0;
	margin:auto;
}
#mv div h2 { margin:0; }
#mv p   { text-align:center; margin-top:-40px; }


.btn { 
	display:block; padding:5px 2em;
	background-color:#0068b7;
	border-radius:20px;
	text-align:center; font-size:16px; color:#fff;
}


#guide {
	color:#FFF; background-color:#1259a1;
	padding:30px 0;
}
#guide .info {
	border-bottom:1px solid #FFF;
	margin-bottom:10px;
	padding-bottom:10px
}
#guide h3 { font-size:30px; margin-right:2em; }
#guide .flexBox {
	justify-content:flex-start;
	align-items:center;
}
p { font-size:18px; }
#guide a p { font-size:30px; color:#FFF; }

#guide a:first-of-type p::before {
	content:url(../img/tel02.png);
	width:20px; height:25px;
	margin-right:5px;
}
#guide a:first-of-type p::after {
	content:"";
	border-right:1px solid #FFF;
	margin:0 30px;
}
#guide .btn { background-color:#FFF; }
#guide .info p a { color:#FFF; }
#guide .info p a::before {
	content: "▶︎";
    font-size: 14px;
    margin-right: 10px;
}
#guide p a { color:#1259a1; font-size:16px; font-weight:bold; }

/* main ********** */
h2 { font-size:36px; text-align:center; margin-bottom:70px; }
main section { padding:100px 0; }
main section:nth-of-type(2n) { background-color:#1259a1;}
main p { font-size:24px; }
main p a { font-size:18px; color:#1259a1; text-align:right; margin-top:40px; }
main p a::before {
	content:"▶︎";
	font-size:14px;
	color:#1259a1;
	margin-right:10px;
}

main #products p a { color:#FFF; }
main #products p a::before {
	font-size:14px;
	color:#FFF;
}
#products h2 { color:#FFF; }
#products li {
	width:30%;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	background-color:#FFF;
	padding:40px 0;
	list-style-type:none;
	margin-bottom:5%;
}
#products li:last-of-type { background-color:#1259a1; }

.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;
}
/*
#job ul { background-color:#f7f7f7; padding:30px; }
#job li {
	list-style-type:none;
	margin-bottom:20px; padding-bottom:20px;
	border-bottom:1px solid #aaaaaa;
}
#job li:last-of-type { margin-bottom:0; }
#job h3 {
	color:#1259a1
}
#job h3 span {
	margin-left:1em;
	border-bottom:1px solid #1259a1;
}
#job h3::before {
	content:"●";
	display:inline-block;
	margin-right:.5em;
	color:#1259a1
}
#job ul p { font-size:18px; }
*/
#job li {
	width:30%;
	font-size:18px;
	font-weight:bold;
	list-style-type:none;
}
#job li a {
	display:block;
	width:100%; height:100%;
	background-color:#1259a1;
	padding:40px;
	text-align:center;
	color:#FFF;
	position:relative;
}
#job li a::after {
	content:"";
	border-top:30px solid transparent;
	border-right:30px solid #FFF;
	position:absolute;
	bottom:10px; right:10px;
}
/* pagetop */
.pagetop   { text-align:center; padding-bottom:60px; }



/* footer ********** */
footer {
	background:linear-gradient(to left, #1893cc, #1259a1);
	padding:60px 0 50px;
	color:#FFF;
}
footer h3 { color:#FFF; font-size:24px; margin-bottom:20px; }
footer .logo article { display:flex; justify-content:space-between; align-items:flex-start; font-size:18px; }
footer .logo img { width:100%; }
footer .logo p a { color:#FFF; }

footer nav	  {
	width:100%;
	background-clip:padding-box;
	border-top:1px solid rgba(225,225,225,.4);
	border-bottom:1px solid rgba(225,225,225,.4);
	padding:30px 0; margin:30px 0;
}
footer nav ul { width:100%; display:flex; justify-content:flex-start; }
footer li     { font-size:18px; margin-right:2em;  }
footer li a   { color:#FFF }

.voqus { width:30%; }
.voqus p { text-align:right; }
.voqus a { width:80%; }

/* copyright */
.copyright p { color:#FFF; text-align:left; }


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

/* 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:""; }

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

/* 警備業許可証 */
footer .voqus  li {
	margin:0;
	text-align:right;
}
#popup {
	display:none; /* label でコントロールするので input は非表示に */
}
label img { width:100%; }
.popup-open {
	cursor:pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
.voqus .popup-open img { width:70%; }
.popup-open:hover { opacity:.4; }
.popup-overlay {
	display:none; /* input にチェックが入るまでは非表示に */
}
#popup:checked ~ .popup-overlay {
	 display:block;
	z-index:99999;
	background-color:#00000070;
	 position:fixed;
	width:100%; height:100vh;
	top:0; left:0;
}
.popup-window {
  width:90vw;
  max-width:65vw;
  padding:20px;
  background-color:#fff;
  border-radius:6px;
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
}
.popup-img { margin:0; }
.popup-img img { width:100%; }
.popup-img:not(:last-of-type) {
	 margin-bottom:1em;
}

.popup-close {
	width:110vw; height:105vw;
	cursor:pointer;
	 position:absolute;
	 top:-50%; left:-25%;
}

/*------------------------------------------------------------
	レスポンシブ
------------------------------------------------------------*/
<?php /* 
#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; }

}
*/ ?>