@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* ヘッダーメイン画像 */
#bkgImg {background-image: url("../../images/recruit/mainImg.jpg");}

/* h3 */
h3 {
	color: #004FB8;
	font-family: "Noto Sans JP" , sans-serif;
	font-weight: 500;
}

.tit02 .btn01 a {
	letter-spacing: 0.02em;
}

/* support
---------------------------------------- */
#support {display: flex;}
#support div:first-of-type {
	background-color: #004FB8;
	color: #fff;
	max-width: 584px;
}
#support header {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
}

/* condition
---------------------------------------- */
#conditionBox h3 {text-align: center;}

/* corporate
---------------------------------------- */
#corporate article section {display: flex;}

/* テキスト */
.corporateTxt .point {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	color: #004FB8;
	font-size: 1.142em;
	line-height: 1.75em;
	display: flex;
}
.corporateTxt svg {
	width: 19.87px;
	height: 6.12px;
	fill: #004fb8;
}
#corporate h3 {margin-bottom: 0.5em;}

/* 背景画像 */
#corporate #numberBg01 {background-image: url("../../images/recruit/numberBg01.jpg");}
#corporate #numberBg02 {background: url("../../images/recruit/numberBg02.jpg");}
#corporate #numberBg03 {background: url("../../images/recruit/numberBg03.jpg");}
#corporate #numberBg04 {background: url("../../images/recruit/numberBg04.jpg");}
#corporate #numberBg01,
#corporate #numberBg02, 
#corporate #numberBg03,
#corporate #numberBg04 {background-repeat: no-repeat;}

/* careers
---------------------------------------- */
#careers .tableStyle tr {border: 1px solid #E3E3E3;}
#careers .tableStyle th {background-color: #F9FCFF;}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/*recruit */
	.recruit p {line-height: 1.5em;}
	
	/* タイトル */
	.tit02 {margin: 4em 0;}
	.tit02 .btn01 {
		margin-top: 1.5em;
		text-align: center;
	}
	
	/* h3 */
	h3 {
		font-size: 1.6em;
		line-height: 1.5em;
	}
	
	/* support
	---------------------------------------- */
	#support {
		margin-bottom: 4.5em;
		flex-wrap: wrap;
	}
	#support div:first-of-type {
		padding: 2em;
		max-width: 100%;
	}
	#support div:last-of-type {width: 100%;}
	#support header {
		font-size: 1.5em;
		line-height: 1.5em;
		margin-bottom: 0.5em;
	}
	
	/* condition
	---------------------------------------- */
	#conditionWrap {padding-top: 4em;}
	.conditionBg {background-color: #F1F7FF}
	#conditionBox section {padding-bottom: 4em;}
	#conditionBox header {margin: -0.5em auto 0.16em;}
	#conditionBox img {width: 100%;}
	#conditionBox.numberBox header {
		max-width: 42px;
		font-size: 3em;
		line-height: 1.2em;
	}
	#conditionBox h3 {margin-bottom: 0.3em;}
	
	/* corporate
	---------------------------------------- */
	#corporate {margin: 4em 0;}
	#corporate article section {
		flex-wrap: wrap;
		margin-top: 4em;
	}
	#corporate article section:first-of-type {margin-top: 0;}
	#corporate .point {margin-bottom: 0.3em;}
	#corporate .point .blueArrow {margin-left: 0.3em;}
	#corporate p {margin-bottom: 1em;}
	#corporate .corporateImg {order: 2;}
	#corporate .corporateImg {width: 100%;}
	
	/* 背景画像 */
	#corporate #numberBg01,
	#corporate #numberBg02, 
	#corporate #numberBg03,
	#corporate #numberBg04 {
		background-position: right top;
		background-size: 120px;
	}
	
	/* careers
	---------------------------------------- */
	#careers {margin: 4em 0;}
	#careers .tableStyle th {
		border-bottom: 1px solid #E3E3E3;
		padding: 0.5em;
	}
	#careers .tableStyle td {padding: 0.5em;}
	
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	
	/* recruit */
	.recruit p {
		font-size: 1.14em;
		line-height: 1.75em;
	}
	
	/* タイトル */
	.tit02 {margin: 6.62em 0 7.14em;}
	.tit02 .btn01 {
		text-align: center;
		margin-top: 2em;
	}
	.recruit .tit01 h2 {text-align: center;}
	.recruit .tit01 h2:after {
		left: 50%;
		margin-left: -10.5px;
	}
	
	/* h3 */
	h3 {
		font-size: 2em;
		line-height: 1.57em;
	}
	
	/* support
	---------------------------------------- */
	#support {
		align-items: flex-end;
		padding-bottom: 6%;
	}
	#support div:first-of-type {
		padding: 5.7% 13.57% 6.1% 6.31%;
		width: 68.58%;
	}
	#support div:last-of-type {
		margin: 0 0 -4.2em -3.92em;
		width: 57.14%;
	}
	#support header {
		font-size: 1.86em;
		line-height: 1.69em;
		margin-bottom: 0.76em;
	}
	
	/* condition
	---------------------------------------- */
	#conditionWrap .tit01 {margin-bottom: -5em;}
	.conditionBg {
		background: linear-gradient(#fff 50%, #F1F7FF 50%);
		padding: 10em 0 5em;
	}
	#conditionBox {
		display: flex;
		justify-content: space-between;}
	#conditionBox section {width: 31.25%;}
	#conditionBox header {margin: -0.4em auto 0.16em;}
	#conditionBox h3 {margin-bottom: 0.75em;}
	
	/* corporate
	---------------------------------------- */
	#corporate {padding-top: 9.2em;}
	#corporate article section {
		justify-content: space-between;
		margin-top: 5em;
	}
	#corporate .corporateImg {width: 50%;}
	
	/* テキスト */
	#corporate .corporateTxt {width: 44.793%;}
	#corporate .corporateTxtRight .point,
	#corporate .corporateTxtRight .point,
	#corporate .corporateTxtRight h3 {text-align: right;}
	#corporate .corporateTxtLeft .point,
	#corporate .corporateTxtLeft h3 {text-align: left;}
	
	/* ポイント */
	#corporate .point {margin-bottom: 0.6em;}
	#corporate .corporateTxtRight .point {justify-content:  flex-end;}
	#corporate .corporateTxtRight .point span:first-of-type  {order: 2;}
	#corporate .corporateTxtRight .point .blueArrow {
		margin-right: 0.42em;
		order: 1;
	}
	#corporate .corporateTxtLeft .point .blueArrow {margin-left: 0.42em;}
	.corporateTxtRight svg {transform: rotateY(180deg);}
	
	/* 背景画像の位置 */
	#corporate #numberBg01,
	#corporate #numberBg03 {
		background-position: left top;
		background-size: 250px;
	}
	#corporate #numberBg02,
	#corporate #numberBg04 {
		background-position: right top;
		background-size: 250px;
	}
	
	/* careers
	---------------------------------------- */
	#careers {padding: 9.2em 1em;}
	#careers .tit01 {margin-bottom: 5em;}
	#careers .tableStyle th {
		border-right: 1px solid #E3E3E3;
		padding: 2.9% 3.1% 2.9% 3.1%;
	}
	#careers .tableStyle td {padding: 2.9% 5% 2.9% 5%;}
	
}