@charset "UTF-8";
/* CSS Document */
body{
	margin:0;
	padding:0;
	color:#333;
	background:#fff;
	font-size:16px;
	font-weight:400;
	line-height: 1.6;
	overflow-x:hidden;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.roboto{
	font-family: 'Roboto', sans-serif;
}
body.open, body.modaal-noscroll{
	overflow: hidden;
}

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

a {
	color:#333;
	text-decoration:none;
	transition: all 0.3s ease-in-out 0s;
}

a:hover {
	text-decoration:none;
}

.flex_wrap{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
}
.flex_wrap_between{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_wrap_center{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	justify-content: center;
}
.flex_wrap_middle{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	align-items: center;
}

.sp{display:none !important;}
.note{font-size:87%;}

input, textarea{
	border-radius: 0;
	-webkit-appearance: none;
}


/************************
header
************************/
header{
	padding: 20px 5%;
}
/************************
btn
************************/

/************************
mv
************************/
.mv{
	background: url("../img/bg_mv.png") center;
	background-size: cover;
	width: 100%;
	height: 46vw;
	display: flex;
	align-items: center;
}
.inner_mv{
	margin: auto;
	width: 90%;
	max-width: 1200px;
}
.inner_mv h1{
	font-size: 60px;
	color: #fff;
	font-weight: 400;
}
.inner_mv h1 span {
	background: rgb(40 64 88);
    padding: 2px 8px;
}
/********************************
content
********************************/
.wrapper{
	width: 100%;
	overflow: hidden;
}
.inner_1200{
	margin: auto;
	width: 90%;
	max-width: 1200px;
}
.sec_dev h2{
	font-size: 36px;
	margin-bottom: 40px;
	font-weight: 400;
}
.sec_dev h2 span{
	display: block;
}
.sec_dev h2 .ttl_en{
	border-bottom: 3px solid #333;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.sec_dev h2 .ttl_ja{
	font-size: 16px;
}
.sec_comp{
	padding: 200px 0
}
.sec_comp figure{
	width: 53%;
	margin-left: -7.5%;
}
.comp_cnt{
	width: 50%;
}

.tb_comp{
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #f4f4f4;
}
.tb_comp tr{
	border-bottom: 1px solid #f4f4f4;
}
.tb_comp th, .tb_comp td{
	text-align: left;
	vertical-align: top;
	padding: 15px;
}
.tb_comp th{
	background: #e4e8ea;
	font-weight: 400;
}

.sec_contact{
	background: url("../img/bg_contact.jpg") center;
	background-size: cover;
	margin-bottom: 120px;
}
.contact_wrap{
	width: 50%;
	padding: 50px 0;
	height: 500px;
	position: relative;
	z-index: 1;
}
.contact_wrap::before{
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	width: 130%;
	height: 100%;
	background:rgba(255,255,255,0.9);
	top: 0;
	left: -15%;
}

.sec_contact dl{
	margin-bottom: 16px;
}
.sec_contact dl dt{
	font-size: 36px;
	margin-bottom: 4px;
	font-weight: 700;
}

footer{
	padding: 30px 0;
	text-align: center;
}

/********************************
sp
********************************/
@media screen and (max-width: 860px) {
	.inner_mv h1{font-size: 6vw;}
}
@media screen and (max-width: 768px) {
	body{ font-size:14px;}
	.sp{ display:block !important;}
	.pc{display:none !important;}
	.inner_header{padding: 15px 4%;}
	header{padding: 10px 5%;}
	.mv{height: 120vw;}
	.sec_comp{padding: 60px 0;}
	.sec_comp figure{width: 110%;margin-left: -6%; margin-bottom: 30px;}
	.comp_cnt{width: 100%;}
	.sec_dev h2{font-size: 24px; margin-bottom: 20px;}
	.tb_comp th, .tb_comp td{display: block;width: 100%;padding: 10px;}
	.sec_contact{background-size: 100% auto;background-position: top; background-repeat: no-repeat;padding-top: 60px; margin-bottom: 60px;}
	.contact_wrap{width: 100%; padding: 15px 5%;height: auto;}
	.contact_wrap::before{width: 100%;left: 0;}
	.sec_contact dl dt{font-size: 18px;}
}