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

/*==============================*/
/* フレーム */
/*==============================*/
div.jobDescription-wrap{
	display: flex; display: -webkit-flex;
	justify-content: space-between; -webkit-justify-content: space-between;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.jobDescription-wrap{ flex-direction: column; -webkit-flex-direction: column;}
	}


/*-- 
------------------------- */
div.jobDescription-wrap > ul{ width: 192px;}
div.jobDescription-wrap > ul li a{
	position: relative;
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid #CCCCCC;
	color: #ccc;
	font-size: 18px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
	line-height: 1.3em;
}
div.jobDescription-wrap > ul li:first-child a{ border-top: 1px solid #ccc;}
div.jobDescription-wrap > ul li a::after{
	position: absolute; top: 50%; right: 0;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent transparent transparent #CCCCCC;
	border-width: 7px 0px 7px 10px;
	margin-top: -7px;
}
div.jobDescription-wrap > ul li.active a{ color: #0067B2;}
div.jobDescription-wrap > ul  li.active a::after{ border-color: transparent transparent transparent #0067B2;}

div.jobDescription-wrap > ul li a:hover{
	background: #EFFBFF;
	color: #0067B2;
}
div.jobDescription-wrap > ul li a:hover::after{ border-color: transparent transparent transparent #0067B2;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.jobDescription-wrap > ul{ width: 160px;}
		div.jobDescription-wrap > ul li a{
			font-size: 16px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.jobDescription-wrap > ul{
			display: flex; display: -webkit-flex;
			flex-wrap: wrap; -webkit-flex-wrap: wrap;
			gap: 6px 6px;
			width: 100%;
			margin-bottom: 16px;
		}
		div.jobDescription-wrap > ul li{ width: calc( calc( 100% - calc( 8px * 1 ) ) / 2 );}
		div.jobDescription-wrap > ul li a{
			display: block;
			padding: 12px 0px 13px 0px;
			border: 1px solid #CCCCCC;
			font-size: 15px;
			font-weight: 400;
			border-radius: 5px;
			text-align: center;
		}
		div.jobDescription-wrap > ul li a::after{ display: none;}
		div.jobDescription-wrap > ul li.active a{
			background: #0067B2;
			color: #fff;
		}
		div.jobDescription-wrap > ul  li.active a::after{ display: none;}
	}


/*-- 
------------------------- */
div.jobDescription-wrap > div{ width: calc(100% - 192px - 64px);}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.jobDescription-wrap > div{ width: calc(100% - 160px - 40px);}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.jobDescription-wrap > div{ width: 100%;}
	}


/*==============================*/
/* 募集要項 */
/*==============================*/
div.jobDescription > dl{
	display: flex; display: -webkit-flex;
	align-items: center; -webkit-align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid #ccc;
}
div.jobDescription > dl:first-child{ border-top: 1px solid #ccc;}
div.jobDescription > dl > dt{
	width: 160px;
	font-size: 16px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
	line-height: 1.3em;
}
div.jobDescription > dl > dd{
	flex: 1;
	margin-left: 40px;
	padding-top: 2px;
	line-height: 1.5em;
}
div.jobDescription > dl > dd ul li:not(:last-child){ margin-bottom: 8px;}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.jobDescription > dl > dd p{ line-height: 1.414em;}
		div.jobDescription > dl > dd ul li{ line-height: 1.414em;}
		div.jobDescription > dl > dd ul li:not(:last-child){ margin-bottom: 10px;}
	}


/*-- 勤務地
------------------------- */
div.jobDescription > dl > dd.workPlace{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
}
div.jobDescription > dl > dd.workPlace p.mapBtn{
	position: relative; top: -3px;
	margin-left: 8px;
}
div.jobDescription > dl > dd.workPlace p.mapBtn a{
	position: relative;
	display: block;
	padding: 5px 9px 3px 24px;
	color: #0067B2;
	border: 1px solid #0067B2;
	font-family: 'Roboto', sans-serif;
	letter-spacing: -0.03em;
	line-height: 1.3em;
	border-radius: 4px;
	font-size: 14px;
}
div.jobDescription > dl > dd.workPlace p.mapBtn a::before{
	position: absolute; top: 4px; left: 8px;
	content: "";
	width: 13px;
	height: 19px;
	background: url("/recruit/common/img/job-description/icon-map.svg")no-repeat;
}
div.jobDescription > dl > dd.workPlace p.mapBtn a:hover::before{ background: url("/common/img/job-description/icon-map-ov.svg")no-repeat;}
div.jobDescription > dl > dd.workPlace p.mapBtn a:hover{
	color: #fff;
	background: #0067B2;
}

/*-- 問合わせ先
------------------------- */
div.jobDescription > dl > dd dl.contactInfo dd{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
}
div.jobDescription > dl > dd dl.contactInfo dd dl{ display: flex; display: -webkit-flex;}
div.jobDescription > dl > dd dl.contactInfo dd dl:not(:last-child){ margin-right: 16px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= TB以下 =======*/
	@media (max-width: 1024px) {
		div.jobDescription > dl > dd.workPlace{ flex-direction: column; -webkit-flex-direction: column;}
		div.jobDescription > dl > dd.workPlace p.mapBtn{
			position: relative; top: 0px;
			max-width: 104px;
			margin-top: 4px;
			margin-left: 0px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.jobDescription > dl{
			flex-direction: column; -webkit-flex-direction: column;
			align-items: flex-start; -webkit-align-items: flex-start;
			padding: 20px 0;
		}
		div.jobDescription > dl > dt{
			margin-bottom: 12px;
			width: 100%;
			font-size: 16px;
		}
		div.jobDescription > dl > dd{
			flex: 1;
			margin-left: 0px;
			padding-top: 0px;
		}
	}


/*==============================*/
/* 個人情報の取り扱い */
/*==============================*/
dl.privacyBox{
	padding: 38px 40px 30px 40px;
	background: #F3F3F3;
}
dl.privacyBox dt{
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
	line-height: 1.3em;
}
dl.privacyBox dd p{ font-size: 14px;}
dl.privacyBox dd p:not(:last-child){ margin-bottom: 12px;}


/*-- 
------------------------- */
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		dl.privacyBox{
			padding: 30px 28px 28px 28px;
		}
		dl.privacyBox dt{
			margin-bottom: 14px;
			font-size: 18px;
		}
		dl.privacyBox dd p{ font-size: 13px;}
		dl.privacyBox dd p:not(:last-child){ margin-bottom: 8px;}
	}



/*==============================*/
/* 選考フロー */
/*==============================*/
div.flow{
	display: flex; display: -webkit-flex;
	flex-wrap: wrap; -webkit-flex-wrap: wrap;
	gap: 0 28px;
	counter-reset: flow;
}
div.flow dl{
	position: relative;
	display: flex; display: -webkit-flex;
	flex-direction: column; -webkit-flex-direction: column;
	width: calc( calc( 100% - calc( 28px * 3 ) ) / 4 );
	padding: 0px 20px 20px 20px;
	background: #F8F8F8;
	border-radius: 0 30px 0 0;
}
div.flow dl::before,
div.flow dl::after{
	content: "";
	width: 12px;
	height: 12px;
	border-top: 1px solid #0067B2;
	border-right: 1px solid #0067B2;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-bottom: -12px;
}
div.flow dl::before{ position: absolute; bottom: 50%; right: -18px; }
div.flow dl::after{ position: absolute; bottom: 50%; right: -12px;}

div.flow dl:last-child::before,
div.flow dl:last-child::after{ display: none;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow{
			gap: 28px 28px;
			padding-right: 20px;
		}
		div.flow dl{
			width: calc( calc( 100% - calc( 28px * 1 ) ) / 2 );
			padding: 0px 24px 24px 24px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow{
			flex-direction: column; -webkit-flex-direction: column;
			gap: 28px 0px;
		}
		div.flow dl{ width: 100%;}
		div.flow dl::before,
		div.flow dl::after{
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
			margin-bottom: 0;
			margin-right: -12px;
		}
		div.flow dl::before{ position: absolute; bottom: -18px; right: 50%; }
		div.flow dl::after{ position: absolute; bottom: -14px; right: 50%;}
	}


/*-- タイトル
------------------------- */
div.flow dl dt{
	order: 2;
	position: relative;
	margin-bottom: 12px;
	padding-top: 24px;
	font-size: 20px;
	font-weight: 500;
	font-family: "Noto Sans Japanese";
	letter-spacing: -0.04em;
	line-height: 1.3em;
}
div.flow dl dt::before{
	position: absolute; top: 0; left: 0;
	content:  "0"counter(flow);
	counter-increment: flow;
	color: #0067B2;
 	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	letter-spacing: -0.02em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- 説明文
------------------------- */
div.flow dl dd:nth-child(2){
	order: 3;
	font-size: 14px;
	letter-spacing: -0.02em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}


/*-- サムネ
------------------------- */
div.flow dl dd:nth-child(3){
	order: 1;
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-bottom: 10px;
}
div.flow dl dd:nth-child(3) img{ border-radius: 0 30px 0 0;}

div.flow dl:last-child{ background: #E1F5FF;}
div.flow dl:last-child dt{ color: #0067B2;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.flow dl dd:nth-child(3){
			width: calc(100% + 48px);
			margin-left: -24px;
			margin-bottom: 16px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.flow dl dd:nth-child(3) img{
			object-fit: cover;
			height: 120px;
		}
	}