@charset "utf-8";
/*=============================================

レスポンシブ用

=============================================*/

@media(max-width: 1200px) {
	#Top-recruit .recruit-box{
		width: 32%;
	}
	#Top-recruit .flex:after{
		content: '';
		width: 32%;
	}
	#footer .wrap1600{
		max-width: 700px;
	}
	#footer .site-footer__menu,
	#footer .menu2{
		width: 50%;
	}
	#footer .external-link-menu{
		width: 100%;
		margin-top: 40px;
	}
}
@media(min-width: 1001px) {
	#nav-drawer{
		display: none;
	}
}
@media(max-width: 1000px) {
	header#header{
		padding-left: 20px;
	}
	header#header #gnav{
		display: none;
	}
	/* グローバルメニュー表示／非表示 */
    .gnavi-open {
        display: block;
    }

	header #header_nav .flex,
	header #header_nav .glovalnavi{
		display: none;
	}
	 /* 

    グローバルメニュー

    */
	#header_nav{
		padding: 23px;
		background: #003D90;
	}
	#nav-drawer {
  		position: relative;
	}
	#nav-content .application{
		width: 100%;
		padding: 20px 0;
        background-color: #fff;
		display: block;
		text-align: center;
		color: #1F2128;
		font-weight: 600;
		position: relative;
  	  	overflow: hidden;
		z-index: 0;
	}
	#nav-content .application .hover{
		display: none;
	}
	#nav-content .application::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #1F2128;
		transform-origin: 50% 0%;
		transform: scaleY(0);
		transition: transform ease .3s;
	}
	#nav-content .application:hover {
		color: #fff;
		text-decoration: none;
	}
	#nav-content .application:hover .a{
		display: none;
	}
	#nav-content .application:hover .hover{
		display: inline-block;
	}
	#nav-content .application:hover::before {
		transform-origin: 50% 100%;
		transform: scaleY(1);
	}
	#nav-content .application img{
		margin-right: 10px;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
	  display:none;
	}

	/*アイコンのスペース*/
	#nav-open {
	  display: inline-block;
	  width: 25px;
	  height: 19px;
	  vertical-align: middle;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
	  position: absolute;
	  height: 3px;/*線の太さ*/
	  width: 25px;/*長さ*/
	  border-radius: 3px;
	  background: #fff;
	  display: block;
	  content: '';
	  cursor: pointer;
	}
	#nav-open span:before {
	  bottom: -8px;
	}
	#nav-open span:after {
	  bottom: -16px;
	}

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

	/*中身*/
	#nav-content {
	padding: 40px 0;
	overflow: auto;
	position: fixed;
	top: 80px;
	right: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 330px;/*最大幅（調整してください）*/
	height: 100%;
	background: #003D90;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(105%);
	 transform: translateX(105%);/*右に隠しておく*/
	}
	#nav-content ul{
	padding-top: 15px;
	list-style: none;
    padding-left: 0;
	}
	#nav-content ul li{
	  text-align: center;
	}
	#nav-content ul li a{
	  padding: 20px 0;
	  color: #fff;
	  display: block;
	  text-decoration: none;
	  font-weight: 700;
	  position: relative;
	  overflow: hidden;
	}
	#nav-content ul li a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #1F2128;
		transform-origin: 50% 0%;
		transform: scaleY(0);
		transition: transform ease .3s;
	}
	#nav-content ul li a:hover {
		color: #fff;
		text-decoration: none;
	}
	#nav-content ul li a:hover::before {
		transform-origin: 50% 100%;
		transform: scaleY(1);
	}
	/*チェックが入ったらもろもろ表示*/
	#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);
	}
    /* リストスタイルリセット（スキン用） */
    .glovalnavi:before,
    .glovalnavi:after,
    .glovalnavi *,
    .glovalnavi-inner,
    .glovalnavi ul,
    .glovalnavi li,
    .glovalnavi li a {
        margin: 0;
        padding: 0;
        width: auto;
        border: none;
        background: none;
        box-shadow: none;
        text-shadow: none;
    }
    .glovalnavi *:before, .glovalnavi *:after,
    .glovalnavi a:before, .glovalnavi a:after,
    .glovalnavi li a:before, .glovalnavi li a:after {
        content: none;
    }
	
	.tab_content_description li a{
		width: 100%;
		margin-top: 10px;
		display: inline-block;
	}
	#Top-services .services-box{
		width: 49%;
	}
	.footer-white{
		flex-flow: column;
	}
	#Company .philosophy .philosophy-box{
		width: 100%;
		margin-top: 20px;
	}
	
	.table-wrap{
		width: 100%;
		margin-bottom: 0;
		overflow-x: inherit;
        white-space: inherit;
	}
}
@media(max-width: 767px) {
	.pc_only{
		display: none;
	}
	#Top-recruit .recruit-box{
		width: 49%;
	}
	#Top-news .tab_content_description,
	#Top-recruit,
	#Top-sns{
		padding: 40px 10px;
	}
	#Top-sns .sns-box,
	#Top-services .services-box{
		width: 100%;
		max-width: 360px;
		margin: 20px auto 0;
	}
	#Top-services .services-box{
		margin: 0 auto 20px;
	}
	#Footer-banner a{
		height: 160px;
	}
	#footer .site-footer__menu,
	#footer .menu2,
	#footer .external-link-menu ul{
		width: 100%;
	}
	#Company .about table{
		width: 100%;
	}
	table th,
	table td,
	#Contact table th,
	#Contact table td{
		display: block;
		width: 100%;
	}
}

@media(max-width: 500px) {
	#TOP #FV img{
		aspect-ratio: 5/4;
		object-fit: cover;
	}
	#Top-recruit .recruit-box{
		width: 100%;
	}
	.footer-white .right{
		display: flex;
		flex-flow: column;
	}
	.footer-white .right a{
		margin-right: 0;
		margin-top: 15px;
	}
	.footer-white .right a:first-child{
		margin-top: 0;
	}
}