@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      recruit.css
 Update:         2017.3.08
 Style Info:     採用情報ページCSSファイル
----------------------------------------------------------- */
/********************************************
モバイルファースト
*********************************************/
/***ページタイトル***/
#page_title {
	height:230px;
	position:relative;
	overflow:hidden;
}
.recruit_title {
  	color: #dcdce2;
  	position: absolute;
  	top: 10px;
  	left: 0;
  	right:0;
  	margin:0 auto;
  	width: 90%;
  	height: 210px;
  	text-align: center;
  	line-height: 210px;
  	-webkit-font-smoothing: antialiased;
}
.recruit_title:after,
.recruit_title:before {
  	content: "";
  	border-radius: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	-webkit-transform-origin: center center;
          	transform-origin: center center;
}
.recruit_title:after {
  	box-shadow: inset 0 17.5px 0 rgba(255, 237, 40, 0.8), inset 17.5px 0 0 rgba(198, 246, 6, 0.8), inset 0 -17.5px 0 rgba(74, 174, 55, 0.8), inset -17.5px 0 0 rgba(24, 145, 0, 0.8);
  	-webkit-animation: rotar 5s -0.5s linear infinite;
          	animation: rotar 5s -0.5s linear infinite;
}
.recruit_title:before {
  	box-shadow: inset 0 17.5px 0 rgba(44, 198, 248, 0.8), inset 17.5px 0 0 rgba(44, 154, 248, 0.8), inset 0 -17.5px 0 rgba(82, 119, 188, 0.8), inset -17.5px 0 0 rgba(72, 67, 157, 0.8),-10.5px 0 0 rgba(252, 150, 176, 0.8);
  	-webkit-animation: rotarIz 5s -0.5s linear infinite;
          	animation: rotarIz 5s -0.5s linear infinite;
}
@-webkit-keyframes rotar {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
            transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
            transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotar {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
            transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
            transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes rotarIz {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
            transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
            transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotarIz {
  0% {
    -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
            transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
            transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
            transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}

.mySelector.funnyText .character:first-child span.active {
	color:#F09;
}
.mySelector.funnyText .character:nth-child(2) span.active {
	color:#1d62ac;
}
.mySelector.funnyText .character:nth-child(3) span.active {
	color:#299120;
}
.mySelector.funnyText .character:nth-child(4) span.active {
	color:#ebd134;
}
.mySelector.funnyText .character:nth-child(5) span.active {
	color:#7d368f;
}
.mySelector.funnyText .character:nth-child(6) span.active {
	color:#ff5a00;
}
.mySelector.funnyText .character:last-child span.active {
	color:#e82c33;
}


/***採用情報***/
#recruit {
	margin:20px 10px; 
}
#recruit #switch_btn {
	margin-top:20px;
}
#recruit #switch_btn ul li {
	width:50%;
	float:left;
	padding-right:5px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
#recruit #switch_btn ul li:last-child {
	padding-right:0;
	padding-left:5px;
}
#recruit #switch_btn ul li p {
	font-size:16px;
	color:#4e4e4e;
	background:#a6dc9d;
	border:1px solid #dbdbdb;
	padding:10px 0;
	text-align:center;
	cursor:pointer;
	transition:background 0.5s;
	transition:color 1s;
}
#recruit #switch_btn ul li p:hover {
	color:#FFF;
	background:#61b042;
}
#recruit #switch_btn ul li.selected p {
	color:#ffffff;
	background:#61b042;
	border:1px solid #61b042;
	cursor:default;
}

#recruit #parttime {
	display:none;
}

#recruit .recruit_contents {
	margin:15px 0 50px 0;
	padding-bottom:10px;
	border-bottom:1px dotted #61b042;
}
#recruit .recruit_contents h3 {
	font-size:16px;
	color:#61b042;
	border-left:3px solid #61b042;
	line-height:1.2;
	font-weight:normal;
}
#recruit .recruit_contents h3>span {
	display:block;
	padding-left:5px;
}
#recruit .recruit_contents>p {
	color:#006e36;
	margin:10px 0 0 0;
}
#recruit .recruit_contents img {
	max-width:100%;
}
#recruit .recruit_contents>table {
	display:none;
	width:100%;
	border-collapse:collapse;
	border:1px solid #e0e0e0;
}
#recruit .recruit_contents>table th {
	width:25%;
	border-collapse:collapse;
	background:#c7c7c7;
	text-align:left;
	color:#FFF;
	font-weight:normal;
	padding:10px 5px;
	border-bottom:1px solid #FFF;
}
#recruit .recruit_contents>table td {
	width:75%;
	padding:10px;
	border-bottom:1px solid #e0e0e0;
}
#recruit .recruit_contents>table td ul li p {
	margin-left:15px;
}
#recruit .recruit_contents>table td ul li p:after {
	clear:left;
}

#recruit .recruit_contents>table td ul li p span {
	display:block;
	color:#646464;
	font-size:12px;
	line-height:1.2;	
}
#recruit .recruit_contents>table td>p.esp_title {
	font-size:16px;
	color:#61b042;
	border-left:3px solid #61b042;
	line-height:1.2;
	font-weight:normal;
	margin-bottom:10px;
	padding-left:10px;
}

#recruit .recruit_contents>table td>span {
	display:block;
	color:#646464;
	font-size:12px;
	line-height:1.2;
	margin:10px 0;
}

/*リストスタイル-◆*/
#recruit .recruit_contents>table td ul.list_square li {
	margin-bottom:10px;
}
#recruit .recruit_contents>table td ul.list_square li:before {
	content:"◆";
	font-size:10px;
	color:#61b042;
	float:left;
	line-height:2.0;
}

/*リストスタイル-★*/
#recruit .recruit_contents>table td ul.list_star {
	margin-top:10px;
}
#recruit .recruit_contents>table td ul.list_star li {
	margin-bottom:10px;
}
#recruit .recruit_contents>table td ul.list_star li:before {
	content:"★";
	font-size:10px;
	color:#61b042;
	float:left;
	line-height:2.0;
}

/*+-切り替え*/
.toggle_btn {
	position: relative;
	width: 30px;
	height: 30px;
	margin-left:auto;
	text-align:center;
	background:url(../img/recruit/bg_toggle.gif) no-repeat;
	background-size:cover;
	margin-bottom:10px;
	cursor:pointer;
}
.toggle_btn span {
	position: absolute;
	display: inline-block;
    left: 7px;
	margin-top:8px;
    width: 50%;
	height: 2px;
    background-color: #FFFFFF;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	transition: all .4s;
}
.toggle_btn span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.toggle_btn span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.toggle_btn.active span:nth-of-type(1) {
	display:none;
}
.toggle_btn.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:480px){
	/***ページタイトル***/
	.recruit_title {
		width: 60%;
	}

	/***会社概要***/
	#recruit {
		margin:30px 20px;
	}
	

}


/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:640px){
	/***ページタイトル***/
	#page_title {
		height:300px;
	}
	.recruit_title {
		width: 50%;
		height: 280px;
	}
	div.character {
		margin-top:30px;
	}
	
	/***採用情報***/
	#recruit #switch_btn {
		margin-top:30px;
	}

}

/********************************************
ランドスケープ
*********************************************/
@media screen and (min-width:680px){
	
	
	
}


/********************************************
タブレット
*********************************************/
@media screen and (min-width:768px){

	/***ページタイトル***/
	#page_title {
		height:350px;
	}
	
	/***採用情報***/
	#recruit {
		margin:40px 30px; 
	}

	
}

/********************************************
タブレット　ランドスケープ
*********************************************/
@media only screen and (min-width: 1024px) {

	/***ページタイトル***/
	#page_title {
		height:400px;
	}
	.recruit_title {
		width: 35%;
		height: 380px;
	}
	div.character {
		margin-top:80px;
	}
	
	/***採用情報***/
	#recruit {
		margin:60px 40px; 
	}
	#recruit #switch_btn {
		margin-top:40px;
	}
	#recruit #switch_btn ul li {
		padding-right:10px;
	}
	#recruit #switch_btn ul li:last-child {
		padding-left:10px;
	}
	#recruit #switch_btn ul li p {
		font-size:20px;
	}
	.recruit_contents_area {
		margin-top:30px;
	}
	#recruit .recruit_contents h3 {
		font-size:20px;
		border-left:5px solid #61b042;
		line-height:1.0;
	}
	#recruit .recruit_contents h3>span {
		padding-left:8px;
	}
	#recruit .recruit_contents>p {
		margin:15px 0 0 0;
		font-size:16px;
	}
	#recruit .recruit_contents>table {
		font-size:16px;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1051px) {

	/***ページタイトル***/
	#page_title {
		height:420px;
	}
	.recruit_title {
		width: 400px;
		height: 400px;
	}
	div.character {
		margin-top:90px;
	}
	
	/***採用情報***/
	#recruit {
		margin:60px; 
	}

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1100px) {
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1280px) {
	/***採用情報***/
	#recruit {
		width:80%;
		margin:0 auto;
		margin-top:60px;
	}

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1370px) {

	
}


/********************************************
PC
*********************************************/
@media only screen and (min-width: 1600px) {
	/***採用情報***/
	#recruit {
		width:70%;
		margin:0 auto;
		margin-top:60px;
	}
}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1680px) {

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1710px) {

}

/********************************************
PC
*********************************************/
@media only screen and (min-width: 1920px) {

}