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



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/





/* pagetitle
--------------------- */
#pagetitle {
	background: url("../img/job/pagetitle.jpg") no-repeat center / cover;
}





/* flow
--------------------- */
#flow {
	width: 100%;
	padding: 120px 0;
}
	#flow .whitebox {
		position: relative;
		border: solid 1px #ddd;
	}
		#flow .whitebox .btn01 {
			width: 100%;
			padding: 0 50px;
			position: absolute;
			top: 50px;
			left: 0;
		}
			#flow .whitebox a {
				display: block;
			}


		#flow .whitebox ul {
			width: 100%;
			padding: 0 50px;
			position: absolute;
			top: 61.5%;
			left: 0;
		}
			#flow .whitebox ul li {
				width: 50%;
			}





/* job
--------------------- */
.job {
	width: 100%;
	padding: 0 0 120px 0;
}
	.job ul.head {
		position: relative;
		margin-bottom: 30px;
	}
	.job ul.head:before {
		content: "";
		width: 100%;
		height: 1px;
		background: #ddd;
		position: absolute;
		top: 50%;
		left: 0;
		z-index: -1;
	}
		.job ul.head li {
			width: 76px;
			height: 45px;
			margin-right: 10px;
			font-size: 1.8rem;
			font-weight: 500;
			color: #fff;
			text-align: center;
			line-height: 0.8em;
		}
			.job ul.head li span {
				font-size: 1.2rem;
				letter-spacing: 0;
			}

		.job ul.head li.yellow {
			background: #c69a49;
			padding-top: 16px;
		}
		.job ul.head li.green {
			background: #065c40;
			padding-top: 16px;
		}
		.job ul.head li.blue {
			background: #065c9a;
			padding-top: 16px;
		}
		.job ul.head li.purple {
			background: #6b3a97;
			padding-top: 8px;
		}
		.job ul.head li.red {
			background: #c12b40;
			padding-top: 16px;
		}


	.job .text {
		width: 55%;
		padding-right: 5%;
	}
		.job .text h3 {
			font-size: 2.8rem;
			font-weight: 500;
			line-height: 1.4em;
			margin-bottom: 20px;
		}

		.job .text .txt {
			font-size: 1.8rem;
			line-height: 40px;
			margin-bottom: 30px;
		}

		.job .text .box {
			width: 23.5%;
			margin-right: 2%;
		}
		.job .text .box:nth-child(4n) {
			margin-right: 0;
		}
			.job .text .box a {
				display: block;
			}
				.job .text .box a .pht-img {
					border-radius: 0;
				}

				.job .text .box a h4 {
					padding-top: 15px;
					font-size: 1.6rem;
					font-weight: 500;
					line-height: 1;
					text-align: center;
				}
					.job .text .box a h4 span {
						display: block;
						font-size: 1.0rem;
						line-height: 1;
						letter-spacing: 0.06em;
						padding-top: 7px;
					}

				.job .text .box a .txt {
					padding-top: 12px;
					font-size: 1.2rem;
					line-height: 1;
					letter-spacing: 0.1em;
					text-align: center;
					margin-bottom: 15px;
				}

				.job .text .box a .more {
					padding-top: 0;
					margin: auto;
					float: none;
				}


	.job .pht {
		width: 45%;
	}









/* 1260px */
@media screen and (max-width: 1260px) {








}







/* 1060px */
@media screen and (max-width: 1060px) {





/* job
--------------------- */
.job .flex-start {
	display: block;
}
	.job .text {
		width: 100%;
		padding-right: 0;
		padding-bottom: 50px;
	}


	.job .pht {
		width: 100%;
	}










}







/* max 767px */
@media screen and (max-width: 767px) {





/* flow
--------------------- */
#flow {
	padding: 60px 0;
}
	#flow .whitebox .btn01 {
		width: 100%;
		padding: 0 25px;
		position: absolute;
		top: 25px;
		left: 0;
	}
		#flow .whitebox a {
			display: block;
		}


	#flow .whitebox ul {
		width: 100%;
		padding: 0 25px;
		position: absolute;
		top: 61.5%;
		left: 0;
	}
		#flow .whitebox ul li {
			width: 50%;
		}





/* job
--------------------- */
.job {
	padding: 0 0 60px 0;
}
	.job .tit {
		margin-bottom: 20px;
	}
	
	
	.job ul.head {
		margin-bottom: 20px;
	}
		.job ul.head li {
			width: 66px;
			height: 35px;
			font-size: 1.4rem;
			margin-right: 5px;
		}

		.job ul.head li.yellow {
			padding-top: 13px;
		}
		.job ul.head li.green {
			padding-top: 13px;
		}
		.job ul.head li.blue {
			padding-top: 13px;
		}
		.job ul.head li.purple {
			padding-top: 6px;
		}
		.job ul.head li.red {
			padding-top: 13px;
		}


	.job .text {
		padding-bottom: 30px;
	}
		.job .text h3 {
			font-size: 2.0rem;
			margin-bottom: 10px;
		}

		.job .text .txt {
			font-size: 1.4rem;
			line-height: 2em;
		}

		.job .text .box {
			width: 48%;
			margin-right: 4%;
			margin-bottom: 15px;
		}
		.job .text .box:nth-child(2n) {
			margin-right: 0;
		}
			.job .text .box a {
				display: block;
			}
				.job .text .box a .pht-img {
					border-radius: 0;
				}

				.job .text .box a h4 {
					padding-top: 10px;
					font-size: 1.4rem;
				}

				.job .text .box a .txt {
					font-size: 1.0rem;
				}

				.job .text .box a .more {
					display: none;
				}




	
	

}