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

@media screen and (min-width: 769px) {
	.pc{
		display: block;
	}
	.sp{
		display: none;
	}
	
}
@media screen and (max-width: 768px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.flex{
		flex-direction: column;
	}
	h2{
	margin-bottom: 60px;
	font-size: 30px;
	font-size: 3.0rem;
	color: #013a5e;
	text-align: center;
	line-height: 1.2;
}
	header #pc_header{
		display: none;
	}
	header #sp_header{
		height: 106px;
		display: flex;	
		justify-content: space-between;
		align-items: center;
	}
	/***ドロワーメニュー***/
	#nav-drawer {
	 	position: relative;
	}

	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 108px;
		height: 106px;
	  	vertical-align: middle;	  
		background: #013A5E;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 1px;/*線の太さ*/
	  width: 34px;/*長さ*/
	  background: #fff;
	  display: block;
	  content: '';
	}
	#nav-open span:before {
	  bottom: 15px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

	/*閉じる用の薄黒カバー*/
	#nav-close {
	  display: none;/*はじめは隠しておく*/
	  position: fixed;
	  z-index: 99;
	  top: 0;/*全体に広がるように*/
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: black;
	  opacity: 0;
	  transition: .3s ease-in-out;
	}

	/*中身*/
	#nav-content .img-wrap{
		display: none;
	}
	#nav-content {
		padding: 60px 20px;
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;/*最前面に*/
	  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	  max-width: 310px;/*最大幅（調整してください）*/
	  height: 100%;
	  background: #013A5E;/*背景色*/
	  transition: .3s ease-in-out;/*滑らかに表示*/
	  -webkit-transform: translateX(-105%);
	  transform: translateX(-105%);/*左に隠しておく*/
	}
	#nav-content ul li{
		border-bottom: #999999 1px solid;
	}
	#nav-content ul li:first-child{
		border-top: #999999 1px solid;
	}
	#nav-content a{		
		text-align: center;
		width: 100%;
		height: 60px;
		line-height: 60px;
		color: #fff;
	}
	#nav-content .info{	
		margin-top: 30px;
		flex-direction: row;
		align-items: center;
	}
	#nav-content .info img{		
		margin-right: 15px;
	}
	#nav-content ul li a{
		display: block;
	}

	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
	  display: block;/*カバーを表示*/
	  opacity: .5;
	}

	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	/***ドロワーメニューここまで***/
	/***footer***/
	footer #footer_nav{
		max-width: 500px;
		flex-direction: column;		
		padding: 0 20px;
	}
	footer #footer_nav li{
		width: 100%;
	}
	footer #footer_nav .fnav{
		margin-bottom: 20px;
	}
	footer #footer_nav li ul{
		margin-top: 0;
	}
	/***TOPページ***/
	#menu .flex,
	#home #banner{
		flex-direction: column;
	}
	#home #menu h2,
	#home #menu a,
	#home #banner a{
    width: 100%;
	margin-bottom: 20px;
}
	#home #banner a{
		padding-top: calc(263 / 768 * 50% - 16px); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		padding-bottom: calc(263 / 768 * 50% - 16px); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	}

	#home #banner a:last-child,
	#home #menu a:last-child{
	margin-bottom: 0px;
	}
	/***下層ページ共通***/
	.under dl{
		flex-direction: column;
	}
	.under dt,
	.under dd{
		width: 100%;
	}
	.under dt{
		margin-bottom: 10px;
	}
	/***businessページ***/
	#business .img_container p{
		text-align: center;
	}
	#services .flex .section_box,
	#services .flex .img-wrap{
	width: 100%;
	max-width: 768px;	
	margin-top: 15px;
}
	/***companyページ***/
	.menu-bar-wrap{
		padding: 0 20px;
	}
	#company .menu-bar-wrap .menu-bar {
		flex-wrap: wrap;
	}
	#company .menu-bar-wrap .menu-bar li a {
    padding: 0 20px;
	}
	/***interviewページ***/
	#interview .interview-box {
    width: 100%;
	max-width: 424px;
	margin: 20px auto;
    border: #E6E6E6 1px solid;
	}
	.interview_under .Introduction .img-wrap,
	.interview_under .one_day_photo,
	.interview_under .faq_photo{
		margin: 15px auto 0;
	}
	.interview_under .faq_photo{
        float:none;
        width: 100%;
	}
	.interview_under .faq p {
        display: block;
	}
	.interview_under .dl_wrap, .interview_under .faq{
		width: 100%;
	}
}
@media screen and (max-width: 450px){
	header #sp_header{
		height: 60px;
	}
	header h1{
		padding: 10px;
	}
	header .logo{
		padding: 10px 10px 10px 0;
	}
	#nav-open {
		width: 60px;
		height: 60px;
	}
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  height: 1px;/*線の太さ*/
	  width: 25px;/*長さ*/
	}
	#nav-open span:before {
	  bottom: 8px;
	}
	#nav-open span:after {
	  bottom: -8px;
	}
	#home #whats{
	background-size: 230px 117px;
	}
	.interview_under .Introduction,
	.interview_under .one_day,
	#business .img_container{
		padding: 30px 15px;
	}
}
@media screen and (max-width: 878px) {
	#gnavi li a{font-size: 11px!important;padding-top: 75px!important;}
		}