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: .16rem;
	font-size: 16px;
	color:#4d4d4d;
	background: #fff;
	letter-spacing: .016rem;
	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;
}
.middle{
	max-width: 960px;
	width: calc(96% - 1rem);
	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;
}

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


/*footer*/
footer{
	margin-bottom: .3rem;
}
footer .logo{
	margin-bottom: .2rem;
	vertical-align: top;
}
.contact footer{
	border-top: 1px solid #ccc;
	padding-top: .5rem;
}

/*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;
	cursor:pointer;
}
.button::after{
	content: "";
	width: 20px;
	border-top: 1px solid #fff;
	margin-left: 10px;
	transition: all .3s ease;
}
.button:hover::after{
	width: 30px;
}

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

/*index*/
.top_main{
	background: url("../images/top_main.jpg") center 10% /cover no-repeat;
	height: 90vh;
	position: relative;
}
.catch{
	position: absolute;
	top: 20vh;
	height: fit-content;
	width: 50%;
	filter: drop-shadow(1px 1px 3px #111);
}
.catch h1{
	font-size: 50px;
	font-size:clamp(30px,5vw,50px);
	line-height: .5rem;
	margin-bottom: .1rem;
}
.catch p{
	font-size: .16rem;
}
.message .content h1{
	line-height: initial;
	text-align: left;
	width: fit-content;
	margin: 0 auto .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%);
}
.content_area i{
	margin-left: 20px;
}
.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: #6699cc;
	color: #fff;
	padding: .6rem 0;
}
.common .half{
	vertical-align: middle;
}
.common p{
	line-height: .24rem;
}

/*company*/
.sub_main{
	background: #6699cc;
	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;
}

/*access*/
.middle_wrap{
	max-width: 960px;
	width: 90%;
}
.middle_wrap iframe{
	margin-bottom: .2rem;
}

/*works*/
.works_frame > p{
	margin-bottom: .3rem;
}
.works .box{
	width: 30%;
	display: inline-block;
	margin-bottom: .4rem;
}
.works_frame .box:nth-child(3)
,.works_frame .box:nth-child(6){
	margin: 0 4%;
}
.contact .center p{
	padding: .2rem;
}
.contact .center a{
	background: #6699cc;
	font-size: .3rem;
	font-size:clamp(14px,3vw,26px);
	padding: .1rem .5rem;
}
.contact .center i{
	margin-right: 10px;
	transform: rotate(-35deg);
}
.lp .lp_img img
,.lp .lp_img .button_area{
	margin-bottom: .5rem;
}
.lp .lp_img .button{
	margin: 0 auto;
}

/*contact*/
form label{
	width: 30%;
	display: inline-block;
}
form{
	margin-bottom: 1rem;
}
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;
}
textarea{
	height: 200px;
}
header #menu_btn {
	display:none;
}
.red{
	color: red;
	font-size: .12rem;
}
.block{
	width: 80%;
	display: block;
}
select{
	padding: .1rem .14rem;
	vertical-align: top;
}
.contact .bg_gray{
	padding: .5rem;
}
.contact .bg_gray li{
	margin-bottom: .2rem;
}
/*lp*/
.lp_img{
	max-width: 1000px;
	width: 96%;
	margin: 0 auto;
}


/*button*/
@media screen and (max-width: 767px) {
	header{
		padding: .1rem;
	}
	header #menu_btn {
		display: block;
		height:20px;
		width:24px;
		margin-left: auto;
		position: relative;
	}
	header nav {
		display:none;
	}
	.logo{
		width: 34%;
		vertical-align: middle;
	}
	.menu_area{
		display:inline-block;
		width: 64%;
		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;
	}
	.title h1{
		font-size: .24rem;
	}
	.catch{
		width: 90%;
	}
	.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;
		width: 100%;
	}
	form input
	,form textarea{
		width: calc(100% - .4rem);
	}
	form .block{
		width: 100%;
	}
	.contact .bg_gray{
		padding: .2rem;
	}
	.middle{
		width: calc(96% - .4rem);
	}
	/*footer*/
	footer .logo{
		width: 50%;
		margin-bottom: 0;
	}
	footer nav{
		display: none;
	}
	footer span{
		font-size: .12rem;
		text-align: right;
		display: block;
	}
	.common{
		margin-bottom: 0.3rem;
	}