html {font-size: 625%;}

/*リセット*/
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;
	vertical-align: baseline;
}

body {
	font-family:'futura-pt','inherit','Yu Gothic',"游ゴシック",'YuGothic',"游ゴシック体",'Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
	font-size: .14rem;
	font-size: 14px;
	color:#4d4d4d;
	background: #fff;
	letter-spacing: .014rem;
	line-height: .2rem;
	box-sizing: border-box;
	justify-content: center;
}

/*共通*/
ol
,ul {
	list-style: none;
}
a{
	text-decoration: none;
	cursor: pointer;
	color: #fff;
}
section{
	margin-bottom: .6rem;
}
img{
	width: 100%;
}
.wrap{
	max-width: 1050px;
	width: 96%;
	margin: 0 auto;
}
.half{
	display: inline-block;
	width: 49%;
}
.center{
	text-align: center;
}
.border{
	display: block;
	border-top: 1px solid #4d4d4d;
}

/*color*/
.white{
	color: #fff;
}
.bg_gray{
	background: #f2f2f2;
}
.bg_blue{
	background: rgba(3, 20, 102, .1);
}

/*header*/
header{
	padding: .2rem .3rem;
  display: flex;
  justify-content: space-between;
}
nav li{
	display: inline-block;
	margin-left: 3%;
}
nav li a{
	color: inherit;
}
nav li a:hover{
	opacity: .7;
}
.logo{
	min-width: 100px;
	vertical-align: middle;
}
nav{
	text-align: right;
	vertical-align: middle;
}
.menu_area{
	width: 60%;
}
.text_logo{
	color: #4d4d4d;
}


/*footer*/
footer{
	margin-bottom: .3rem;
}
footer .logo{
	margin-bottom: .2rem;
	vertical-align: top;
	width: 24%;
	color: #333;
}
footer nav{
	width: 75%;
}

/*button*/
.button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	background: #333;
	color: #fff;
	text-align: center;
	padding: .2rem 0;
	margin-left: auto;
}
.button::after{
	content: "";
	width: 20px;
	border-top: 1px solid #fff;
	margin-left: 10px;
	transition: all .3s ease;
}
.button:hover::after{
	width: 30px;
}
.common .button{
  background: #fff;
	color: #333;
}
.common .button::after{
  border-top: 1px solid #333;
}

/*共通*/
.title{
	margin-bottom: .3rem;
}
.title h1{
	font-size: .3rem;
	line-height: .3rem;
}

/*index*/
.top_main{
	background: url("../images/top_main.webp") center center /cover no-repeat;
	height: 80vh;
	position: relative;
}
.catch{
	position: absolute;
	top: 30vh;
	height: fit-content;
	width: 50%;
}
.catch h1{
	font-size: 50px;
	line-height: .7rem;
	margin-bottom: .1rem;
}
.message .content h1{
	margin-bottom: .3rem;
}
.message .content span{
	width: 10%;
	margin: 0 auto .3rem;;
}
.content p{
	width: 60%;
	margin: 0 auto .6rem;
	line-height: .34rem;
}
.content_area{
	margin-bottom: 0;
}
.content_area .bg_gray{
	background: linear-gradient(180deg, #fff 20%, #fff 20%, #f2f2f2 20%, #f2f2f2 100%);
}
.half_img{
	width: 50%;
	display: inline-block;
	margin-bottom: .6rem;
}
.half_img:hover{
	opacity: .7;
}
.half_img img{
	margin-bottom: .14rem;
}
.half_img .title{
	margin-bottom: 0;
	color: #4d4d4d;
	text-align: left;
}

/*common*/
.common{
	background: #031466;
	color: #fff;
	padding: .6rem 0;
}
.common .half{
	vertical-align: middle;
}
.common p{
	line-height: .24rem;
}

/*company*/
.sub_main{
	background: #031466;
	color: #fff;
	padding: .6rem 0;
}
.sub_main h1{
	font-size: .4rem;
	line-height: .4rem;
	margin-bottom: .1rem;
}
.sub_main p{
	align-items: center;
	display: flex;
}
.sub_main p::before{
	content: "";
	width: 30px;
	border-top: 1px solid #fff;
	margin-right: 10px;
}
.company_frame{
	width: 70%;
	margin-left: auto;
}
dl{
	border-bottom: 1px solid #808080;
	padding: .2rem 0 .05rem .1rem;
}
dt{
	margin-bottom: .05rem;
	font-weight: bold;
}

/*works*/
.works_content{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.wrap .works_content:nth-child(2){
	margin-bottom: 1rem;
}
.wrap .works_content p{
	line-height: .3rem;
}

.works_content img{
	width: 40%;
	margin-right: 5%;
}
.bg_blue dt{
	font-size: .18rem;
	margin-bottom: .14rem;
}
.bg_blue dl{
	margin-bottom: .3rem;
}
.bg_blue{
	padding: .4rem;
}

/*flow*/
.flow img{
	width: 70%;
	margin: 0 auto .5rem;
	display: block;
}
.flow dt{
	color: #031466;
	font-size: .18rem;
}
.case_frame{
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
  align-items: center;
}
.case i{
  font-size: .6rem;
}
.case .box{
  width: 50%;
  text-align: center;
}
.case img{
  width: 90%;
  margin: inherit;
  margin-bottom: .2rem;
}
.case_frame .box:nth-child(3) img{
  margin-left: auto;
}
.case .case_frame:last-child{
  margin-bottom: 0;
}

/*contact*/
.contact .center p{
	padding: .2rem;
}
.contact .center a{
	background: #031466;
	font-size: .3rem;
	padding: .1rem .5rem;
}
.contact .center i{
	margin-right: 10px;
	transform: rotate(-35deg);
}
form label{
	width: 30%;
	display: inline-block;
}
form input
,form textarea{
	width: calc(68% - .4rem);
	display: inline-block;
	padding: .2rem;
	vertical-align: top;
}
form div{
	margin-bottom: .3rem;
}
input
,textarea{
	border: none;
	background: #f2f2f2;
}
::placeholder{
	color: #ccc;
}
form .button{
	margin: 0 auto;
	padding-top: .2rem;
	border: none;
  background: #333;
  color: #fff;
}
form .button::after{
  border-color: #fff;
}
textarea{
	height: 200px;
}
header #menu_btn {
	display:none;
}
.red{
  color: red;
  font-size: .14rem;
}

/*button*/
@media screen and (max-width: 767px) {
	header{
		padding: .2rem;
	}
	header #menu_btn {
		display: block;
		height:20px;
		width:24px;
		margin-left: auto;
		position: relative;
	}
	header nav {
		display:none;
	}
	.logo{
		width: 70%;
		vertical-align: middle;
	}
	.menu_area{
		vertical-align: middle;
	}
	.menu_area span{
		width: 100%;
		border-bottom: 2px solid #4d4d4d;
		display: block;
		position: absolute;
	}
	#menu_btn span:first-child{
	top: 1px;
	}
	#menu_btn span:nth-child(2){
		top: 9px;
	}
	#menu_btn span:nth-child(3){
		bottom: 1px;
	}
	#header.active span:nth-of-type(1){
	-webkit-transform: translateY(7px) rotate(-315deg) scale(.8);
	transform: translateY(7px) rotate(-315deg) scale(.8);
	}
	#header.active span:nth-of-type(2){
	display: none;
	}
	#header.active span:nth-of-type(3){
	-webkit-transform: translateY(-17px) rotate(315deg) scale(.8);
	transform: translateY(-9px) rotate(315deg) scale(.8);
	}
	#header.active{
		position: relative;
	}
	#header.active .menu_area{
		display: block;
		width: 100%;
		height: 100vh;
		background-color: rgba(255,255,255,0.7);
	}
	#header.active #menu_btn{
		position: absolute;
		right: 5%;
		top: 5%;
	}
	#header.active nav{
		display: block;
		width: 100%;
		position: absolute;
		top: 15vh;
		left: 5%;
	}
	#header.active .logo{
		display: none;
	}
	#header.active li{
		display: block;
		padding: .2rem;
		text-align: left;
		font-size: .16rem;
	}
  footer nav{
    display: none;
  }
  footer .logo{
    text-align: center;
    display: block;
    margin-bottom: .2rem;
    width: 100%;
  }
	.title h1{
		font-size: .24rem;
	}
	.catch{
		width: 90%;
    top: 30vh;
	}
  .message .content h1{
    letter-spacing: 0;
  }
  .catch h1{
    font-size: .3rem;
    line-height: .4rem;
  }
	.content p{
		width: 90%;
	}
	.common .half{
		width: 100%;
	}
	.common .half:nth-child(2){
		margin-bottom: .5rem;
	}
	.company_frame{
		width: 100%;
	}
	.works_frame .box:nth-child(3)
	,.works_frame .box:nth-child(6){
		margin: 0 0 .3rem 0;
	}
	.works .box{
		width: 100%;
		margin: 0 0 .3rem 0;
	}

	.img_area
	,.message_frame p{
		width: 100%;
	}
	.message_frame p{
		margin-left: 0;
	}
	.middle_wrap{
		margin: 0 auto;
		width: 100%;
	}
	.middle_wrap iframe{
		width: 100%;
	}
	.contact .center h1{
		width: 80%;
		margin: 0 auto;
		font-size: .16rem;
		line-height: .2rem;
	}
	.contact .center h1 span{
		display: block;
		font-size: .12rem;
	}
	form label{
		display: block;
	}
	form input
	,form textarea{
		width: calc(100% - .4rem);
	}
  .works_content{
    flex-flow: column;
  }
  .works_content img{
    width: 80%;
    margin: 0 auto .3rem;
  }
  .bg_blue{
    padding: .2rem;
  }
  .wrap .works_content p{
    padding: 0 .2rem;
  }
  .flow img{
    width: 100%;
  }
  .case i{
    font-size: .4rem;
    padding: 0 .1rem;
  }
}