@charset "utf-8";

html {
	font-size: 62.5%;
}

/* for IE8 */
head~/* */body {font-size: 140%;}
html:not(:target) body {font-size:14px;}
/*///*/

body {
	font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	font-size: 1.4rem;
	color:#333333;
	line-height:1.5;
	margin:0px;
	padding:0px;
	text-align:center;
	background-color:#ffffff;
	min-width: 320px;
}


p.txt {padding:5px 10px;}
td,th {
	padding:3px 5px;
	vertical-align:middle;
}
.mb15 {margin-bottom:15px;}

section h2{
	line-height: 1;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;

}
section p{text-align: left;}


header{
	background: #222222;
	padding: 6px 15px 6px 20px;
	position: fixed;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 999;
}
header::after{content:".";clear: both; content: ""; display: block; height: 0;}

header h1{float: left; padding-top: 9px;}
header h1#pc{display: none;}


header a#navBtn{
	float: right;
	width: 35px;
	height: 35px;
	text-align: center;
	position: relative;
	text-decoration: none;
	box-sizing: border-box;
	z-index: 9999;
	transition: all 0.4s;
}
header a#navBtn span{
	position: absolute;
	width: 60%;
	height: 2px;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	text-indent: -9999px;
	top: 9px;
	left: 7px;
}
header a#navBtn span::before,
header a#navBtn span::after{
	position: absolute;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 4px;
	box-sizing: border-box;
	text-indent: -9999px;
	content: "";
	display: block;
}
header a#navBtn span::before{top: 7px; transition: all 0.4s;}
header a#navBtn span::after{top: 14px; transition: all 0.4s;}

.drawer header a#navBtn span {background: transparent;}
.drawer header a#navBtn span::before{transform: rotate(45deg); top: 7px;}
.drawer header a#navBtn span::after{transform: rotate(-45deg); top: 7px;}


header #gNav_pc{display: none;}

.drawer #gNav_sp{transform: translateX(-70vw);}

#gNav_sp {
	background: #222;
	text-align: right;
	width: 70vw;
	height: 100vh;
	margin-right: -70vw;
	position: fixed;
	top: 47px;
	right: 0;
	transition: all 0.4s;
	z-index: 999;
}
#gNav_sp nav {padding: 10px 10px 0;}

#gNav_sp nav li{border-bottom: 2px solid #fff;}
[id^="gNav"] nav li a{
	color: #fff;
	text-decoration: none;
	display: block;
	font-size: 2.0rem;
}
#gNav_sp nav li a {padding: 14px 5px;}

main{padding-top: 70px; display: block;}

#keyvisual {
	background: url(../img/hd_img.jpg) 0 0 no-repeat;
	background-size: cover;
	height: 177px;
	position: relative;
	margin-bottom: 75px;
}
#keyvisual #hdTxt{
	background: #fff;
	box-shadow: 0 0 5px 3px rgba(0,0,0,0.3);
	padding: 16px;
	text-align: left;
	position: absolute;
	bottom: -50px;
	right: 8px;
	font-size: 1.2rem;
	box-sizing: border-box;
}
#keyvisual #hdTxt span {
	display: block;
	font-size: 3.0rem;
	/*font-family: 'Open Sans', sans-serif;*/
	line-height: 1.1;
	margin-bottom: 13px;
}

#mission h2{
	background: url(../img/sec_img01.jpg);
	background-position: 50% 0;
	background-size: cover;
	min-height: 118px;
	color: #fff;
	font-size: 1.3rem;
	padding: 9.3% 0;
	text-shadow: 0 0 8px rgba(0,0,0,0.5);
	box-sizing: border-box;
}
#mission h2 span {
	display: block;
	font-size: 4rem;
    font-family: 'Lato', sans-serif;
    letter-spacing: -2px;
    padding-bottom:3%;
}

#mission .txt{padding: 3% 2%;}
#mission .txt p{margin-bottom: 15px;}

/*-----NEWS-----*/

#news h2{
	min-width: 265.5px;
	font-size: 1.3rem;
	padding: 0;
	box-sizing: border-box;
	margin: 0 auto;
}
#news h2::after {
	content: "";
	width: 40.13%;
	height: 2px;
	background: #171717;
	bottom: 20%;
	display: block;
	margin: 3.12% auto 0;
}
#news h2 span {
	display: block;
	font-size: 4rem;
    font-family: 'Lato', sans-serif;
    letter-spacing: -2px;
    padding-bottom:3%;
}

#news .txt{padding: 3% 2%;margin: 1% 7% 12%;}
#news .txt p:not(:last-of-type){margin-bottom: 10px;}

/*-----SERVICE-----*/
.secTitle {
	background: url(../img/sec_img02.jpg) no-repeat;
	background-size: cover;
	padding: 6.56%;
	box-sizing: border-box;
}
#news .secTitle{
	background: none;
	padding: 6% 6.56% 0;
	margin-bottom: 0;
}
#company .secTitle {
	background: url(../img/sec_img03.jpg) no-repeat;
	background-size: cover;
}

.secTitle {margin-bottom: 5.31%;}
.secTitle h2 {
	background: rgba(255,255,255,0.7);
	min-width: 265.5px;
	margin: 0 auto;
	padding: 12px 50px 24px;
	padding: 3.75% 6.25% 7.5%;
	font-size: 1.3rem;
	color: #171717;
	display: inline-block;
	box-sizing: border-box;
}
.secTitle h2::after {
	content: "";
	width: 40.13%;
	height: 2px;
	background: #171717;
	bottom: 20%;
	display: block;
	margin: 3.12% auto 0;
}
.secTitle h2  span {
	display: block;
	color: #3683bc;
	font-family: 'Lato', sans-serif;
	font-size: 4.5rem;
	letter-spacing: -2px;
	padding-bottom: 12px;
}
#news .secTitle h2 {color: #333333;}
#news .secTitle h2 span {color: #333333;}
#service .secTitle + p{text-align: center;}

#service .srvList li {
	width: 80%;
	max-width: 480px;
	margin: 0 auto 7%;
	padding-top: 12px;
}
#service .srvList li::before {
	content: "";
	background: url(../img/sv_icon01.png) no-repeat;
	background-size: 78px;
	width: 78px;
	height: 78px;
	display: block;
	margin: 0 auto 15px;
}
#service .srvList li#list02::before{
	background:  url(../img/sv_icon02.png) no-repeat;
	background-size: 78px;
}
#service .srvList li#list03::before{
	background:  url(../img/sv_icon03.png) no-repeat;
	background-size: 78px;
}
#service .srvList li#list04::before{
	background:  url(../img/sv_icon04.png) no-repeat;
	background-size: 78px;
}
#service .srvList li#list05::before{
	background:  url(../img/sv_icon05.png) no-repeat;
	background-size: 78px;
}
#service .srvList li h3{font-size: 1.8rem; margin-bottom: 20px;}


/*-----COMPANY-----*/
#company .secTitle {
	background: url(../img/sec_img03.jpg) no-repeat;
	background-size: cover;
}
#company #compBox {padding: 5px;}
#company #compBox table{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	border-spacing: 5px;
}
#company #compBox tr{margin-bottom: 10px;}
#company #compBox th{
	border: 1px solid #a5a5a5;
	width: 30%;
	padding: 15px;
	text-align: center;
}
#company #compBox td{padding: 15px 0px 15px 10px;}
#company #compBox a{color: #333;}
#gmap{width: 100%; height: 300px;}

/*-----CONTACT-----*/
#contact{
	background: #171717;
	color: #fff;
	padding: 5px;
}
#contact .secTitle {
	background-image: none;
	margin: 0;
	padding: 0;
}
#contact .secTitle h2 {background: none; color: #fff; padding-bottom: 5%;}
#contact .secTitle h2 span{color: #fff;}
#contact .secTitle h2::after {
	background: #fff;
}
#contact p{text-align: center;}
#contact p a{color: #fff;}
#formBox {max-width: 690px; margin: 0 auto 15px; padding: 0 3%;}
#formBox ul{margin: 0 auto;}
#formBox li{margin-bottom: 8px;}

#formBox input[type="text"],
#formBox textarea{
	width: 100%;
	resize: vertical;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
	background: #fff;
	border: 2px solid #ccc;
	padding: 7px;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	font-size: 2.0rem;
}
#certify{margin-bottom: 20px;}
#certify dt{margin-bottom: 3px;}
#certify dd{font-size: 1.3rem;}
#certify dd span{
	display: inline-block;
	background: #3683bc;
	color: #fff;
	padding: 8px 12px;
	font-size: 2.0rem;
}
#formBox .ank{
	text-align:left;
	margin-top: 30px;
	margin-bottom:20px;
}
#formBox #certify dd input{
	width: 5em;
	box-sizing: border-box;
	text-align: center;}

#formBox ul.cntBtn li input{
	text-align: center;
	padding: 17px 0;
	width: 100%;
	border: 2px solid #ccc;
	background: #4c4c4c;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	font-size: 2.0rem;
	font-weight: bold;
	transition: 0.3s;
}
#formBox ul.cntBtn li input:hover{background: #ccc; color: #4c4c4c;}

button.formbtn:disabled,
button.formbtn:disabled:hover{
	color: #000;
	background: #333;
	border-color: #333;
	opacity: .2;
	filter: alpha(opacity=0.2);
	cursor: default;
}
button.formbtn:disabled label{cursor: default;}

button.formbtn{
	text-align: center;
	padding: 17px 0;
	width: 100%;
	border: 2px solid #ccc;
	background: #4c4c4c;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	font-size: 2.0rem;
	font-weight: bold;
	transition: 0.3s;
}
button.formbtn:hover{background: #ccc; color: #4c4c4c;}

.contactBtn {
	text-align: center;
	padding: 17px 0;
	width: 100%;
	border: 2px solid #ccc;
	background: #4c4c4c;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	font-size: 2.0rem;
	font-weight: bold;
	transition: 0.3s;
	margin-top:20px;
}
.contactBtn:hover{background: #ccc; color: #4c4c4c;}
#complete{
	border:solid 1px #4c4c4c;
	padding: 70px 10px;
}

#formBox input::-webkit-input-placeholder,
#formBox textarea::-webkit-input-placeholder{color: #808080;}
#formBox input::-moz-placeholder,
#formBox textarea::-moz-placeholder{color: #808080;}

#formBox #formError{text-align: left; margin-bottom: 10px;}
#formBox #formError span{color: #f00;}
#formBox #complete {margin: 20px 0;}

.remodal{padding: 20px !important;}
#attention{
	padding: 5px;
	text-align: left;
	font-size: 14px;
	border-bottom: 3px dotted #000;
}
.notice{color: #f00;}
#buttons dl{padding: 25px 0;}
#buttons dl dt{
	margin-bottom: 5px;
	display: inline-block;
}

footer{background: #171717; color:#fff;}

#failure{
	width: 100%;
	height: calc(100vh - 21px);
	display: flex;
	justify-content: center;
	align-items: center;
}
#failure span{
	color: #000;
	font-size: 1.2em;
}

/* 
###############################################################
------------------↓↓460px以上のレイアウト↓↓----------------
###############################################################
*/
@media screen and (min-width: 480px){
	#keyvisual #hdTxt{font-size: 1.64rem;}
	#keyvisual #hdTxt span {font-size: 4.1rem;}
	#mission h2,#news h2{
		font-size: 1.9rem;
	}
	#mission h2 span,#news h2 span {
		font-size: 5.5rem;
	}
	.secTitle h2 {font-size: 1.78rem;}
	.secTitle h2 span {
		font-size: 6.16rem
	}
	.remodal{padding: 35px !important;}
	#attention{
		padding: 20px;
		font-size: 1.8rem;
	}
}


/* 
###############################################################
------------------↓↓900px以上のレイアウト↓↓----------------
###############################################################
*/


@media screen and (min-width: 900px){
	header {padding: 12px 0 13px;}
	header #hdSet {width: 100%; max-width: 980px; margin: 0 auto;}
	header h1#pc{display: block; padding-top: 9px;}
	header h1#sp{display: none;}

	header a#navBtn{display: none;}
	#gNav_sp{display: none;}
	header #gNav_pc{display: block;}
	header #gNav_pc ul {
		display: table;
		width: 70%;
		float: right;
	}
	header #gNav_pc ul li{display: table-cell; width: 20%; position: relative;}
	header #gNav_pc ul li a{
		font-size: 1.6rem;
		transition: 0.4s;
		padding: 11px 0;
		position: relative;
		display: inline-block;
		}
	header #gNav_pc ul li a::after{
		content: "";
		position: absolute;
		bottom: 3px;
		left: 0;
		width: 100%;
		height: 2px;
		-webkit-transform: scaleX(0);
		-ms-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		background: #fff;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;

	}
	header #gNav_pc ul li a:hover{color: #ccc;}
	header #gNav_pc ul li a:hover::after,
	header #gNav_pc ul li a:focus::after{
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}
	main {padding-top: 110px;}

	#keyvisual {
		background-size: contain;
		height: 413px;
		max-width: 1300px;
		margin: 0 auto 46px;
	}
	#keyvisual #hdTxt {
		font-size: 2.6rem;
		bottom: 28px;
		right: 100px;
		padding: 26px 35px;
	}
	#keyvisual #hdTxt span{font-size: 6.8rem;}

	#mission h2 {
		height: 432px;
		font-size: 3.76rem;
		padding: 154px 0 0 0;
		font-weight: normal;
	}
	#mission h2 span{
		font-size: 11.1rem;
		padding-bottom: 20px;
		font-weight: bold;
	}
	#mission .txt{width: 900px; margin: 0 auto; box-sizing: border-box;}
	#mission .txt p{
		text-align: center;
		font-size: 1.8rem;
		line-height: 1.8;
		margin-bottom: 20px;
	}

	#news h2 {
		margin: 0 auto;
		height: 109px;
		font-size: 1.78rem;
		padding: 77px 0 0 0;
		font-weight: normal;
	}
	#news h2 span{
		padding-bottom: 20px;
	}
	#news .txt{
		width: 900px;
		padding: 1% 2% 4%;
		margin: 0 auto;
		margin-bottom: 70px;
		box-sizing: border-box;
	}
	#news .txt p{
		text-align: center;
		font-size: 1.8rem;
		line-height: 1.8;
		margin-bottom: 10px;
	}

	#service {
		background: url(../img/sec_img02.jpg) no-repeat;
		background-size: cover;
		padding: 0 50px;
	}
	#company {
		background: url(../img/sec_img03.jpg) no-repeat;
		background-size: cover;
		padding: 0 50px;
	}
	.secInner {
		background: rgba(255,255,255,0.85);
		max-width: 980px;
		margin: 0 auto;
		padding-bottom: 50px;
	}
	#news .secInner {padding-bottom: 0;}
	#news .secTitle,
	#service .secTitle,
	#company .secTitle {
		background: none;
		padding-bottom: 0;
		margin-bottom: 24px;
	}
	#news .secTitle h2{
		min-width: 0;
	}
	#news .secTitle h2,
	#service .secTitle h2,
	#company .secTitle h2 {background: none; padding: 0;}
	#news .secTitle h2::after,
	#service .secTitle h2::after,
	#company .secTitle h2::after,
	#contact .secTitle h2::after{width: 80%; margin-top: 15px;}
	#news .secTitle h2 span,
	#service .secTitle h2 span,
	#company .secTitle h2 span,
	#contact .secTitle h2 span{font-weight: normal; font-size: 7.16rem;}
	
	#service .secTitle + p{font-size: 2.0rem;}
	#service .secTitle + p br{display: none;}

	#service .srvList {
		width: 88.5%;
		padding: 30px 0 5px;
		margin: 18px auto 0;
		background: url(../img/service_hr.png) repeat-x;
	}
	#service .srvList:first-of-type{margin-bottom: 30px;}
	#service .srvList::after {content:".";clear: both; content: ""; display: block; height: 0;}
	#service .srvList li {
		margin-bottom: 0;
		padding-top: 0;
		width: 30%;
		max-width: 280px;
		float: left;
	}
	#service .srvList li:not(:last-child){margin-right: 5%;}
	#company #compBox::after{content:".";clear: both; content: ""; display: block; height: 0;}
	#company #compBox{
		width: 88.5%;
		margin: 20px auto 20px;
		background: url(../img/service_hr.png) repeat-x;
		padding-top: 30px;
	}
	#company #compBox table{width: 50%;}
	#company #compBox table#boxLeft{float: left;}
	#company #compBox table#boxRight{float: right;}
	#company #gmap {width: 88.5%; margin: 0 auto; border: 1px solid #babbbc;}

	#contact #contactTgt p{font-size: 1.6rem;}
	#certify dt{font-size:1.6rem;}
	#formBox .ank{margin-top: 40px;}
	#complete{padding: 230px 10px;}
}




/* 
################################
################################ 
--------------------------------------------------------- */