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

@media screen and (min-width:641px) and ( max-width:768px){

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


/* main_image */

.main_image_area{
	padding:50px 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:35%;
	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:30px;
	position:relative;
	z-index:20;
	font-size:18px;
	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:20px;
	position:relative;
	z-index:20;
	font-size:0;
}
.main_image_area nav .item{
	width:20%;
	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:48px;
	height:48p35
	background:#FFF;
	display:block;
	position:fixed; top:10px; 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:34%; 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:34%; 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 20px 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:30%;
	display:inline-block;
	vertical-align:bottom;
}


/* main_contents*/

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

.h2_area{
}
.h2_area > div{
	height:180px;
	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:50px;
	background:url(../images/stripe.jpg) repeat;
	display:block;
}
.h2_area .inner{
	width:190px;
	height:190px;
	padding:10px;
	background:#FFF;
	border-radius:100%;
	position:absolute; top:20px; left:0;
	text-align:center;
}
.h2_area .icon{
	width:120px;
	display:inline-block;
	vertical-align:top;
}
.h2_area h2{
	font-family:"Raleway", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:18px;
	font-weight:500;
}
.h2_area .text{
	font-size:14px;
}

.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:10px solid transparent;
	border-right:10px solid #F7D610;
	border-bottom:10px solid #F7D610;
	border-left:10px 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:25%;
	display:inline-block;
	vertical-align:top;
}
.service .text{
	padding-top:15px;
	font-size:14px;
	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:16px;
	font-weight:bold;
}
.service_detail .inner{
	font-size:0;
}
.service_detail .detail{
	padding-top:20px;
}
.service_detail .inner.double .detail{
	width:49%;
	display:inline-block;
	vertical-align:top;
}
.service_detail .inner.double .detail:last-child{
	margin-left:2%;
}
.service_detail .thum{
	width:50%;
	margin:0 auto;
	text-align:center;
}
.service_detail .inner.double .detail .thum{
	width:auto;
	margin:0;
}
.service_detail .text{
	padding-top:10px;
	font-size:14px;
	text-align:center;
}
.service_detail .inner.double .detail .text{
	text-align:left;
}

.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:30%;
	margin:0;
	float:left;
	text-align:center;
}
.site .inner{
	width:68%;
	padding-top:10px;
	float:right;
}
.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:30px;
}
.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: 320px;
}

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

.recruit{
	padding-top:30px;
}
.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_banner{
	padding-top:30px;
	font-size:0;
}
.recruit_banner .item{
	width:18.4%;
	margin:0 2% 2% 0;
	display:inline-block;
	vertical-align:top;
}
.recruit_banner .item:nth-child(2n){
	margin-right:2%;
}
.recruit_banner .item:last-child{
	margin-right:0;
}

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

.contact{
	padding:30px 0 50px 0;
}
.contact .table_box{
}
.contact .table_box th.required:after{
	content:"※";
	color:#E64C3B;
}
.form_btn{
	margin-top:30px;
	font-size:0;
	text-align:center;
}
.form_btn button{
	width:45%;
	margin:0 2%;
	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:0;
	background:#AAA;
}


/* thanks */

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


/* footer */

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

}