/* CSS Document */
@charset "utf-8";

.wrapper{
	width:96%;
	margin:0 auto;
	position:relative;
}


/* main_image */

.main_image_area{
	padding:30px 0;
	position:relative;
	background-image:url(../images/main_image.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	text-align:center;
}
.main_image_area:after{
	content:"";
	width:100%;
	height:100%;
	background:url(../images/cover.png) repeat;
	background-position:center;
	background-size:auto auto;
	position:absolute; top:0; left:0;
	z-index:10;
}
.main_image_area h1.logo{
	width:55%;
	margin:0 auto;
	position:relative;
	z-index:20;
	transition:.3s;
	transform:scale(0, 0);
	-webkit-transform:scale(0, 0);
}
.main_image_area .logo.on{
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
}
.main_image_area .title{
	padding-top:20px;
	position:relative;
	z-index:20;
	font-size:17px;
	transition:.3s;
	transform:scale(0, 0);
	-webkit-transform:scale(0, 0);
}
.main_image_area .title.on{
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
}
.main_image_area nav{
	padding-top:10px;
	position:relative;
	z-index:20;
	font-size:0;
}
.main_image_area nav .item{
	width:33%;
	margin-top:20px;
	padding:0 4%;
	display:inline-block;
	vertical-align:top;
	transition:.3s;
	transform:scale(0, 0);
	-webkit-transform:scale(0, 0);
}
.main_image_area nav .item:nth-child(1){
	transition-delay:0;
}
.main_image_area nav .item:nth-child(2){
	transition-delay:.25s;
}
.main_image_area nav .item:nth-child(3){
	transition-delay:.5s;
}
.main_image_area nav .item:nth-child(4){
	transition-delay:.75s;
}
.main_image_area nav .item:nth-child(5){
	transition-delay:1s;
}
.main_image_area nav .item.on{
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
}
.main_image_area nav .item a{
	display:block;
}
.main_image_area nav .item a .icon{
	display:block;
}
.main_image_area nav .item a .text{
	padding-top:10px;
	display:block;
	font-family:"Raleway", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
}


/* menu */

.menu_btn{
}
.menu_btn a{
	width:50px;
	height:50px;
	background:#FFF;
	display:block;
	position:fixed; top:5px; right:10px;
	pointer-events:auto;
	z-index:100;
	text-align:center;
}
.menu_btn a span.acc{
	width:30px;
	height:3px;
	margin:0 0 0 -15px;
	background:#6F6F75;
	border-radius:0;
	display:block;
	position:absolute; top:33%; left:50%;
	transition:0.2s;
}
.menu_btn a span.acc:before,
.menu_btn a span.acc:after{
	content:"";
	width:30px;
	height:3px;
	background:#6F6F75;
	border-radius:0;
	display:block;
	position:absolute; top:33%; left:0;
	transition:0.3s;
}
.menu_btn a span.acc:before{
	margin-top:-10px;
}
.menu_btn a span.acc:after{
	margin-top:8px;
}
.menu_btn a.on span.acc{
	background:transparent;
}
.menu_btn a.on span.acc:before,
.menu_btn a.on span.acc:after{
	margin-top:0;
}
.menu_btn a.on span.acc:before{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.menu_btn a.on span.acc:after{
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
}
.menu_btn a span.title{
	width:100%;
	position:absolute; bottom:3px; left:0;
	font-size:10px;
	line-height:1.2;
	color:#6F6F75;
	text-align:center;
}

header .menu{
}
header .menu .box{
	width:300px;
	height:100%;
	background:rgba(111,111,117,0.95);
	position:fixed; top:0; right:-300px;
	z-index:90;
	text-align:right;
	pointer-events:auto;
	overflow:scroll;
}
header .menu nav{
	padding:70px 15px 0 0;
}
header .menu div{
	padding:0;
	border-bottom:1px solid #FFF;
	text-align:right;
}
header .menu div a{
	padding:10px;
	display:block;
	font-family:"Raleway", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	color:#FFF;
	font-weight:500;
	text-decoration:none;
}


/* header */

header{
}
.head{
	padding:10px 2%;
	font-size:0;
	text-align:center;
}
.head h1.logo{
	width:55%;
	display:inline-block;
	vertical-align:middle;
}


/* main_contents*/

.main_contents{
	border-bottom:1px solid #DDD;
}

.h2_area{
}
.h2_area > div{
	height:30vw;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	position:relative;
}
body.service_page .h2_area > div{
	background-image:url(../images/service/bg.jpg);
}
body.detail_page .h2_area > div{
	background-image:url(../images/service_detail/bg.jpg);
}
body.company_page .h2_area > div{
	background-image:url(../images/company/bg.jpg);
}
body.recruit_page .h2_area > div{
	background-image:url(../images/recruit/bg.jpg);
}
body.contact_page .h2_area > div{
	background-image:url(../images/contact/bg.jpg);
}
.h2_area:after{
	content:"";
	width:100%;
	height:10vw;
	background:url(../images/stripe.jpg) repeat;
	display:block;
}
.h2_area .inner{
	width:35vw;
	height:35vw;
	padding:3vw;
	background:#FFF;
	border-radius:100%;
	position:absolute; top:2vw; left:0;
	text-align:center;
}
.h2_area .icon{
	width:18vw;
	display:inline-block;
	vertical-align:top;
}
.h2_area h2{
	font-family:"Raleway", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:4vw;
	font-weight:500;
}
.h2_area .text{
	font-size:3vw;
}

.container{
}

.service{
	padding-bottom:30px;
	font-size:0;
	text-align:center;
}
.service .item{
	width:49%;
	margin-top:20px;
	display:inline-block;
	vertical-align:top;
	position:relative;
}
.service .item:nth-child(2n){
	margin-left:2%;
}
.service .item:after{
	content:"";
	border-top:8px solid transparent;
	border-right:8px solid #F7D610;
	border-bottom:8px solid #F7D610;
	border-left:8px solid transparent;
	position:absolute; bottom:-1px; right:-1px;
	z-index:10;
}
.service .item a{
	padding:15px 5px;
	border:1px solid #DDD;
	display:block;
	position:relative;
}
.service .icon{
	width:35%;
	display:inline-block;
	vertical-align:top;
}
.service .text{
	padding-top:15px;
	font-size:13px;
	display:block;
}

.service_detail{
}
.service_detail .item{
	padding-top:30px;
}
.service_detail h3{
	padding:0 10px 5px 10px;
	border-bottom:2px solid #FEEE39;
	font-size:15px;
	font-weight:bold;
}
.service_detail .inner{
}
.service_detail .detail{
	padding-top:20px;
}
.service_detail .thum{
	width:70%;
	/*margin:0 auto;
	text-align:center;*/
}
.service_detail .text{
	padding-top:10px;
}

.site{
	margin-top:30px;
	padding-bottom:30px;
	border-top:1px dashed #CCC;
}
.site .item{
	padding:15px 0;
	border-bottom:1px dashed #CCC;
}
.site .thum{
	width:50%;
	/*margin:0 auto;
	text-align:center;*/
}
.site .inner{
	padding-top:10px;
}
.site .title{
	font-size:16px;
	font-weight:bold;
}
.site .link{
	padding-top:5px;
}
.site .link a{
	color:#0064C6;
}
.site .text{
	padding-top:10px;
}
.site .caution{
	padding-top:15px;
	text-align:right;
}

.company{
}
.company .table_box{
	padding-top:15px;
}
.company .map{
	height:0;
	margin-top:5px;
	padding-top:45%;
	position:relative;
	overflow:hidden;
}
.company .map iframe{
	width:100%;
	height:100%;
	position:absolute; top:0; left:0;
}

.company .movie video{
	width: 100%;
	height: 52vw;
}

.greeting{
	margin:30px 0;
	padding:15px;
	border:1px solid #DDD;
	border-radius:10px;
}
.greeting .title{
	padding:0 5px;
	font-size:16px;
	font-weight:bold;
	letter-spacing:5px;
}
.greeting .text{
	padding-top:10px;
}
.greeting .name{
	padding-top:10px;
	text-align:right;
}
.greeting .name img{
	width:45%;
}

.recruit{
	padding-top:15px;
}
.recruit .table_box{
}
.recruit .type{
	margin-top:-3px;
	font-size:0;
}
.recruit .type .item{
	margin:3px 3px 0 0;
	padding:5px 10px;
	background:#FEDC71;
	border-radius:4px;
	display:inline-block;
	vertical-align:top;
	font-size:13px;
}
.recruit .category{
	margin-top:-3px;
	font-size:0;
}
.recruit .category .item{
	margin:3px 3px 0 0;
	padding:4px 9px;
	border:1px solid #DDD;
	border-radius:4px;
	display:inline-block;
	vertical-align:top;
	font-size:13px;
}

.recruit .pdf{
	padding-top: 10px;
}
	
.recruit .pdf a{
	color:red;
	font-weight: bold;
	padding-top: 10px;
}
	

.recruit_banner{
	padding-top:10px;
	padding-bottom: 30px;
	font-size:0;
}
.recruit_banner .item{
	width:49%;
	margin:10px 2% 0 0;
	display:inline-block;
	vertical-align:top;
}
.recruit_banner .item:nth-child(2n){
	margin-right:0;
}

.contact.recruit_form{
	padding-top:30px;
}
.recruit_form h3{
	padding:0 10px 5px 10px;
	border-bottom:1px solid #DDD;
	font-size:16px;
	line-height:20px;
	font-weight:bold;
}
.recruit_form h3:before{
	content:"\f2b6";
	margin-right:5px;
	font-family:"Font Awesome 5 Pro";
	font-size:20px;
	line-height:20px;
	color:#AAA;
	font-weight:300;
}
.recruit_form .table_box{
	padding-top:15px;
}
.contact.recruit_form .form_btn button{
	background:#3B82C4;
}
.contact.recruit_form .form_btn button.prev{
	background:#AAA;
}

.contact{
	padding:15px 0 30px 0;
}
.contact .table_box{
}
.contact .table_box th.required:after{
	content:"※";
	color:#E64C3B;
}
.form_btn{
	margin-top:20px;
	font-size:0;
	text-align:center;
}
.form_btn button{
	width:70%;
	padding:15px;
	display:inline-block;
	background:#2EAB8A;
	border:none;
	border-radius:10px;
	outline:none;
	vertical-align:baseline;
	font-size:20px;
	color:#FFF;
	font-weight:normal;
	cursor:pointer;
}
.form_btn button.prev{
	margin-top:20px;
	background:#AAA;
}


/* thanks */

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


/* footer */

footer{
}
footer .copyright{
	padding:15px 0;
	font-size:11px;
	text-align:center;
}