@charset "UTF-8";
/* CSS Document 
*  Responsive CSS
*/

/*ipad*/
@media screen and (max-width:800px){
	h1{
		width: 25%;
	}
	
	#main_nav li{
		width: 25%;
	}
	
	.top_about_text{
		width: 100%;
	}
	
	.top_about_text p{
		padding: 0 5px;
	}
	
	.top_about img{
		width: 50%;
		margin: 0 auto;
		padding: 15px 0;
	}
	
	.process_list ul,.process .gray_bg,.top_btn ul,.bn,.content{
		width: 90%;
		margin: 0 auto;
	}
	
	.process_list li.arrow:after {
    top: 30%;
	right: -35px;
	}
	
	.top_recruit{
		padding: 20px;
	}
	
	.top_recruit h2{
		width: 15%;
	}
	
	.bn{
		margin: 20px auto;
	}
}


/*iphone*/
@media screen and (max-width:420px){
	body{
		font-size: 0.8em;
	}
	
	.pc,#main_nav,#foot_nav ul{
		display: none;
	}
	
	.sp{
		display: block !important;
	}
	
	h1{
		display: block;
		width: 50%;
		overflow: hidden;
		position: fixed;
		top: -4px;
		padding: 0;
		text-align: left;
		height: 9.5vw;
		z-index: 1001;
	}
	
	h2{
		margin: 10px 0;
		padding: 0;
		font-size: 1.3em;
	}
	
	h3{
		font-size: 1.12em;
		padding: 0;
	}
	
	h4{
		font-size: 0.9em;
	}
	
	h4 span.right{
		font-size: 0.8em;
	}
	
	.content{
		padding: 20px 0 0 0;
	}
	
	.head_img{
		height: 130px;
		margin: 12vw 0 20px 0;
	}
	
	.head_img h2{
		width: 75%;
		margin: 0 auto;
		padding: 26px 27px 0 0;
	}
	
	.mean-container .mean-nav{
		background: #FFF;
		background-size: 100%;
		text-align: center;
	}
	
	.mean-container .mean-nav ul li a{
		text-align: center;
		padding: 0.5em 5%;	
		background: #57666b;
	}
	
	.mean-container .mean-nav ul li a:hover{
		background: #57666b;
		opacity: 0.7;
	}

	.mean-container .mean-bar{
		position: fixed;
		z-index: 1000;
		background: #57666b;
		height: 12vw;
	}
	
	.mean-container a.meanmenu-reveal{
		background: none;
		width: 7.5vw;
		height: 8vw;
		margin: 2vw;
		padding: 2.7vw 2vw 0 2vw;
		border-radius: 3px;
		font-weight: normal;
	}
	
	.mean-container a.meanmenu-reveal span{
		margin: 0.6vw 0.5vw 0.8vw;
	}
	
	.mean-container .mean-nav,.main_img{
		margin: 12.5vw 0 0 0;
	}
	
	.top_about{
		margin: 20px auto;
	}
	
	.top_about_text{
		width: 100%;
		margin: 0 0 8px 0;
		padding: 0 15px;
	}
	
	.top_about_text h2{
		width: 80%;
		margin: 0 auto 20px auto;
	}
	
	.top_about img{
		width: 90%;
		margin: 0 auto;
	}
	
	img.img_small{
		width: 50%;
	}
	
	.process{
		padding: 15px;
	}
	
	.process_list{
		margin: 0 auto;
	}
	
	.process_list ul{
		width: 90%;
	}

	.process_list li{
		position: relative;
		width: 100%;
		margin: 0 0 20px 0;
		padding: 0 15px;
		font-size: 0.9em;
	}

	.process_list li img{
		margin: 0 0 5px 0;
	}

	.process_list li.arrow:after{
		content: none;
	}
	
	.process .gray_bg{
		width: 90%;
		margin: 5px auto;
	}
	
	.top_recruit{
		width: 100%;
		padding: 0 15px;
		background: url(../../images/recruit_bg@2x.png) no-repeat right 80px / 90%;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		align-items: center;
		-webkit-align-items: center;
	}
	
	.top_recruit h2{
		width: 25%;
		margin: 10px auto 0 auto;
		padding: 15px;
	}
	
	.top_recruit p{
		padding: 0 15px;
	}
	
	.top_btn ul{
		width: 60%;
		margin: 20px auto;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	
	.top_btn ul li{
		width: 100%;
		margin: 0 0 4px 0;
		border: none;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	
	.bn{
		width: 90%;
		margin: 0 auto;
	}
	
	.content{
		width: 100%;
		padding: 0 15px;
	}
	
	.company_table{
		padding: 3px;
	}
	
	.company_table th,.company_table td,.recruit_table th,.recruit_table td,.contact_check th,.contact_check td{
		display: block;
	}
	
	.company_table th{
		width: 100%;
		border: none;
		padding: 10px 0 0 5px;
		font-weight: bold;
	}
	
	.company_table iframe{ /*google map*/
		width: 100%;
		height: 280px;
		padding: 8px 15px;
	}
	
	.recruit_table iframe{ /*youtube*/
		width: 100%;
		height: 190px;
		margin: 8px 0;
		padding: 0;
	}
	
	.faq_content{
		margin: 20px 0 0 0;
	}
	
	.faq_list dt{
		background: url(../../faq/images/q_img@2x.png) no-repeat 4px 10px / 9%;
	}
	
	.faq_list dt:first-child{
		background: url(../../faq/images/q_img@2x.png) no-repeat 4px 1px / 9%;
	}
	
	.faq_list dd{
		background: url(../../faq/images/a_img@2x.png) no-repeat 4px 6px / 9%;
	}
	
	.contact_form{
		width: 100%;
		margin: 20px auto;
	}
	
	.contact_check{
		width: 100%;
	}
	
	.contact_check th{
		width: 100%;
		border: none;
		padding: 10px 5px 0 5px;
		font-weight: bold;
	}
	
	.form-group p{
		font-size: 0.9em;
	}
	
	.video{
	width: 100%;
	}
	
	.btn{
		padding: 10px 30px;
	}
	
	.btn-default{
		margin: 0 8px 0 0;
	}
	
	.pagetop_btn{
		margin: 20px 0 0 0;
	}
	
	.pagetop_btn img{
		width: 12%;
	}
	
	footer{
		padding: 10px;
	}
	
	footer img{
		width: 50%;
	}
	
	footer p.tel{
		font-size: 1.3em;
	}
}