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

@media (max-width: 1000px) and (orientation: landscape){
	#topslide{
		transform: translate(-50%, -10%);
	}
	#subcatch{
		width: 100%;
		font-size: 15px;
	}
	#recruit_nav p{
		font-size: 14px;
	}
	
}
@media (min-width: 1024px) and (orientation: landscape){
	#topslide{
		transform: translate(-50%, -20%);
	}
}
@media (min-width: 1336px) and (orientation: landscape){
	#topslide{
		transform: translate(-50%, -50%);
	}
}
@media (max-width: 1336px) and (orientation: landscape){
	/*.pc{
		display: none;
	}*/
}


@media (max-width: 480px) {
	#navigation{
		width: 0;
	}
	
	#navi{
		transform: translateX(-110%);
		transition: all .2s;
	}
	.openNav #navi{
		transform: translateX(0);
	}
	#navigation{
		width: 100%;
		height: 66px;
		text-align: center;
		
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		
		background-color: rgba(0,0,0,0.2);
		
	}
	#navigation.openNav{
		height: 100%;
	}
	#navigation ul{
		display: inline-block;
		padding-right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.8);
		padding-top: 66px;
	}
	#navigation li{
		display: block;
		float: none;
	}
	#navigation li a{
		position: relative;
		display: block;
		
		text-decoration: none;
		line-height: 70px;
		opacity: 1;
		padding: 0;
		margin-right: 0; 
		
		background: #FFF;
		color: #000;
		font-size: 18px;
		font-weight: 500;
		
		border-bottom: solid 1px #CCC;
	}
	#navigation li a:hover{
		opacity: 1;
	}
	#navigation li a::after {
		display: none;
	}
	#navigation li a:hover::after {
		transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
	}
	#navigation li:last-child a span,
	#navigation li:nth-child(6) a span{
		display: block;
	}
	#navigation li:last-child a img,
	#navigation li:nth-child(6) a img{
		display: none;
	}
	#navigation li:last-child a,
	#navigation li:nth-child(6) a{
		margin-top: 0;
		margin-right: 0;
		font-size: 20px;
	}

	
	#navToggle{
		display: block;
		width: 36px;
		height: 32px;
		
		position: absolute;
		top: 16px;
		right: 16px;
		
	}
	#navToggle span{
		position: absolute;
		display: block;
		width: 100%;
		height: 4px;
		background: #FFF;
		border-radius: 2px;
		transition: all .4s;
	}
	
	#navToggle span:nth-child(1){
		top: 0;
	}
	#navToggle span:nth-child(2){
		top: 14px;
	}
	#navToggle span:nth-child(3){
		bottom: 0;
	}
	.openNav #navToggle span:nth-child(1){
		transform: translateY(14px) rotate(45deg);
	}
	.openNav #navToggle span:nth-child(2){
		opacity: 0;
	}
	.openNav #navToggle span:nth-child(3){
		
		transform: translateY(calc(-14px)) rotate(-45deg);
	}
	#logo{
		width: 50px;
		height: 50px;
		margin-left: 16px;
		margin-top: 9px;
		z-index: 200;
		opacity: 0.8;
		/*position: fixed;*/
		background: url("../images/logoWH.svg") no-repeat left center;
	}
	#logo span{
		display: none;
	}
	
	#go2top{
		bottom: 10px;
		right: 10px;
		width: 50px;
		height: 50px;
		background-size: 50px;
	}

	
	/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/
	
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	
	#headnav{
		margin-bottom: 240px;
	}
	
	#catchcopy img{
		width: 80vw;
		margin-left: 5vw;
	}
	#topslide{
		width: 100vw;
		height: auto;
		border: none;
	}
	#topslide:after{
		margin-top: -2px;
	}
	#subcatch{
		font-size: 16px;
	}
	
	
	#MESSAGE h1{
		width: 100%!important;
	}
	
	section{
		/*padding-left: 5%!important;
		padding-right: 5%!important;*/
		overflow: hidden;
	}
	section .section_inner {
		/*width: 112%!important;
		margin-left: -6%!important;*/
	}
	
	section h1{
		/*width: calc(100% + 10%);
		margin-left: -5%;*/
	}
	
	
	
	#INTRODUCTION #lead{
		text-align: left;
		font-size: 21px;
	}
	
	#INTRODUCTION li {
		background-position: left 7px;
	}
	#INTRODUCTION h1 span{
		padding-bottom: 0;
	}
	
	
	
	
	#CONTENTSBTN{
		margin: 0 auto 100px;
		display: none;
	}
	#CONTENTSBTN a{
		width: 50%!important;
		float: left;
	}
	#CONTENTSBTN a:after{
		top: 155px;
		
	}

	#MESSAGE{
		background-color: #F5F5F5;
		padding: 80px 0;
		margin-bottom: 0;
		
	}
	#MESSAGE p{
		font-size: 16px;
		line-height: 2;
	}
	
	#catchcopy{
		line-height: 1.6;
	}
	
	#recruit_nav p{
		font-size: 14px;
		line-height: 1.6;
		width: 250px;
		padding: 10px 14px 10px;
	}
	
	#recruit_nav a{
		top: 90px;
	}
	
	th{
		width: 35%;
	}
	
	section.common h1{
		font-size: 36px;
		padding-top: 6em;
	}
	
	section.common h2{
		font-size: 28px;
		white-space: nowrap;
	}
	
	#SNS{
		padding-top: 5%;
		padding-bottom: 5%;
		height: calc(500px + 10%);
	}
	
	#footer{
		height: 80px;
	}
	#footernavi{
		display: none;
	}
	#copyright{
		width: 80vw;
		top: 18px;
		bottom: auto;
	}
}