@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

body,
#wrap {
	overflow-x:hidden;
}

.thanks{
	width: 630px;
	margin: 0 auto;
}

.thanks dt {
	font-size: 1.4em;
	font-weight: 500;
	text-align:center;
	margin: 0 0 30px;
}

.thanks dd {
	font-size: 1.2em;
	text-align: left;
}


.swing {
			animation: swing 5s .45s infinite;
}

@-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-5deg); }  
    20% { -webkit-transform: rotate(5deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }

    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}


#container h2 ul {
	text-align:center;
}

#container h2 ul li {
	display:inline-block;
	margin-right:5px;
}

#container h2 ul li:last-child {
	margin-right:0;
}

/* first */

#first {
	width: 800px;
	margin: 0 auto 80px;
	position: relative;
}

#first .leftbg {
	position: absolute;
	top: 40px;
	left: -300px;
}

#first .rightbg {
	position: absolute;
	top: 50px;
	right: -300px;
}

#first .lead {
	text-align: center;
	margin: 0 0 40px;
	line-height: 2.0;
}

#first h3 {
	text-align: center;
	line-height: 1.0;
	font-size: 1.3em;
	font-weight: 500;
	margin: 0 0 30px;
}

#first table {
	width: 100%;
	margin: 0 0 40px;
}

#first table tr {
	background: url("../image/recruit/table_line.png") left bottom no-repeat;
}

#first table th,
#first table td {
	padding: 25px 0;
}

#first table th {
	width: 200px;
	font-weight: 500;
	text-align:left !important;
}

#first table th.must {
	background: url("../image/recruit/must.png") 90% center no-repeat;
}

#first table input[type="text"] {
    border: 1px solid #b7b7b7;
    height: 30px;
    padding: 0 3% 5px;
    font-family: inherit;
    line-height: 1.2;
    font-size: 0.9em;
    background: #fff;
    border-radius: 7px;
}

#first table td .long {
    width: 90%;
}

#first table td .middle {
    width: 60%;
}

#first table td .short {
    width: 40%;
}


#first .submit {
  text-align: center;
	margin: 0 0 60px;
}

#first .submit li {
    width: 230px;
    display: inline-block;
}


#first .submit li:nth-child(2) {
	margin-left: 30px;
}


#first .submit li input {
    font-family: 'Noto Sans Japanese', sans-serif;
    display: block;
    border: none;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    line-height: 1.0;
    color: #fff;
    padding: 20px 0;
    font-size: 1.3em;
    font-weight: 400;
    z-index: 10;
    background: #fb9629;
}

#first .submit li input:hover {
    background-color: #fbd1d0;
}

#first .bnr {
	text-align: center;
}


/*-------------------------------------------------------------------
	recruit
-------------------------------------------------------------------*/

#recruit {
	position:relative;
}

#recruit .topread {
	text-align:center;
	margin:0 0 50px;
}

#recruit .topread dt {
	font-size:1.3em;
	font-weight:500;
	margin:0 0 10px;
}

#recruit .topread dd {
	line-height:2.0;
}

#recruit .contbox {
	text-align:center;
	margin:0 0 80px;
}

#recruit .contbox dl {
	display:inline-block;
	text-align:center;
	border:2px solid #33ccff;
	border-radius:7px;
	padding:15px 20px;
	width:460px;
}

#recruit .contbox dl dt {
	font-size:1.3em;
	font-weight:500;
	line-height:1.0;
	padding:0 0 15px;
	border-bottom:2px solid #33ccff;
	margin-bottom:5px;
}

#recruit .contbox dl dd.tel {
	color:#33ccff;
}

#recruit .contbox dl dd.tel span {
	font-size:2.1em;
}

#recruit .imgbox {
	position:relative;
}

#recruit .imgbox li {
	width:260px;
	height:260px;
	position:relative;
	float:left;
	margin:20px 20px 0 0;
}

#recruit .imgbox li.big {
	width:540px;
}

#recruit .imgbox li.last {
	margin-right:0;
}

#recruit .imgbox li .vol01 {
	position:absolute;
	left:-40px;
	bottom:-40px;
	z-index:10;
	
	animation: key1 .5s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-30px);}
}

#recruit .imgbox li .vol02 {
	position:absolute;
	top:40px;
	left:0;
	z-index:10;
	
	animation: swing linear 2s infinite;
}

@keyframes swing {
    0% { transform: rotate(0deg) }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


#recruit .imgbox li .vol03 {
	position:absolute;
	top:-150px;
	left:-10px;
	z-index:10;
}

#recruit .imgbox li .vol04 {
	position:absolute;
	bottom:-60px;
	left:10px;
	z-index:10;
}

#recruit .imgbox li .special {
	display:none;
}


/*-------------------------------------------------------------------
	recruit human
-------------------------------------------------------------------*/

#recruit .human01 {
	position:absolute;
	top:-250px;
	left:0;
}

#recruit .human02 {
	position:absolute;
	top:-150px;
	right:0;
}

#recruit .human03 {
	position:absolute;
	top:550px;
	left:10px;
}

#recruit .human04 {
	position:absolute;
	top:580px;
	right:10px;
}

#recruit .human05 {
	position:absolute;
	top:1400px;
	left:0;
}

@media screen and (max-width: 1080px) {
	#recruit .human03 {
		left:-50px;
	}
}


/*===============================================
  画面の横幅が1080px以下に適用
===============================================*/
@media screen and (max-width: 1080px){
	


}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px){
}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	/* first */

	#first {
		width: 94%;
		margin: 0 auto 50px;
		position: relative;
	}	

	#first .leftbg,
	#first .rightbg {
		display: none;
	}

	#first h3 {
		line-height: 1.4;
		margin: 0 0 30px;
	}


	#first table tr {
		background: none;
	}

	#first table th,
	#first table td {
		padding: 20px 0;
		display: block;
	}

	#first table th {
		width: auto;
		font-weight: 500;
		border-bottom: 2px dotted #f3475a;
	}

	#first table th.must {
		background: url("../image/recruit/must.png") 90% center no-repeat;
	}
	
	#first table td {
		background: url("../image/recruit/table_line.png") left bottom no-repeat;
	}
	

	#first table td .long,
	#first table td .middle,
	#first table td .short {
    width: 90%;
	}


#first .submit {
  text-align: center;
	margin: 0 0 60px;
}

#first .submit li {
    width: 230px;
    display: inline-block;
}

#first .submit li input {
    font-family: 'Noto Sans Japanese', sans-serif;
    display: block;
    border: none;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    line-height: 1.0;
    color: #fff;
    padding: 20px 0;
    font-size: 1.3em;
    font-weight: 400;
    z-index: 10;
    background: #fb9629;
}

#first .submit li input:hover {
    background-color: #fbd1d0;
}

#first .bnr {
	text-align: center;
}

	
	.thanks{
	width: 100%;
	margin: 0 auto;
}

	
	/*
	#mainimg .maximg {
		overflow:hidden;
		width:100%;
		position:relative;
		height:250px;
	}
	
	#mainimg .maximg img {
		width:auto;
		max-width:1200px;
		max-height:100%;
		position:absolute;
		left:-60%;
	}
	*/
	#container h2 ul li img {
		max-width:40px;
	}
	

	
	#recruit .contbox dl {
		padding:15px 5%;
		width:80%;
	}

	#recruit .imgbox li {
		width:48%;
		height:auto;
		position:relative;
		margin:0 0 15px;
	}
	
	#recruit .imgbox li.clear {
		clear:both;
	}

	#recruit .imgbox li.ev {
		float:right;
	}

	#recruit .imgbox li.big {
		width:100%;
		clear:both;
	}

	#recruit .imgbox li.last {
		margin:0 0 15px;
		float:right;
	}

	#recruit .imgbox li .vol01 {
		left:-20px;
		bottom:-20px;
	}



	#recruit .imgbox li .vol02 {
		top:-50px;
		left:0;
	}

	#recruit .imgbox li .vol03 {
		top:-50px;
		left:-10px;
	}

	#recruit .imgbox li .special {
		display:block;
		position:absolute;
		top:-50px;
		left:0x;
		z-index:15;
	}
	
	#recruit .imgbox li .vol01 img {
		max-width:180px;
	}
	
	#recruit .imgbox li .vol02 img {
		max-width:initial;
		max-height:300px;
	}
	
	#recruit .imgbox li .vol03 img {
		max-width:initial;
		max-height:300px;
	}
	
	#recruit .imgbox li .special img {
		max-width:initial;
		max-height:300px;
	}
	
	#recruit .human01,
	#recruit .human02,
	#recruit .human03,
	#recruit .human04,
	#recruit .human05 {
		display:none;
	}
	
	#recruit .contbox dl dd a {
		color:#33ccff;
	}


}