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

/* title */
#title{
	background: url("../img/title_bg.jpg");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size:cover;
	min-height: 400px;
	margin: 0 auto;
	padding: 70px;
	margin-top: -80px;
}
#title .title_wrapper{
	max-width: 1480px;
}
#title h2{
	color:#0C5EA4;
	font-size: 60px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	margin-top: 80px;
}
#title p{
	color:#0C5EA4;
	font-size: 20px;
}

@media screen and (max-width: 767px) {
	#title{
		padding:60px 20px;
		margin-top: -40px;
	}
	#title h2{
		font-size: 40px;
	}
}


/* outline */
#outline{
	padding: 130px 70px;
	margin: 0 auto;
}
#outline .outline_wrapper{
	max-width: 1480px;
	margin: 0 auto;
}
#outline .outline_wrapper h3{
	font-size: 40px;
	font-weight: 300;
	font-family: 'Roboto Condensed', sans-serif;
	color:#0C5EA4;
}
#outline .outline_wrapper p{
	color:#0C5EA4;
	font-size: 20px;
}
#outline .outline_title_box{
	width: 30%;
}
#outline .outline_contents_box{
	width: 70%;
}

@media screen and (max-width: 767px) {
	#outline{
		padding: 60px 20px;
	}
	#outline .outline_wrapper{
		flex-direction: column;
	}
	#outline .outline_title_box{
		margin-bottom: 40px;
	}
	#outline .outline_title_box,
	#outline .outline_contents_box{
		width: 100%;
	}
}

/* interview*/
#interview{
	background: rgb(245,246,248);
	background: linear-gradient(90deg, rgba(245,246,248,1) 70%, rgba(255,255,255,1) 70%);
	padding: 130px 70px;
}
#interview .interview_img_box1{
	background-image: url("../img/interview01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	margin-left: -70px;
	padding: 0 70px;
	height:500px;
	min-height: 500px;
	max-width: 1480px;
	margin-bottom: 100px;
	display: flex;
	align-items: center;
}
#interview .interview_img_box2{
	background-image: url("../img/interview02.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	margin-left: -70px;
	padding: 0 70px;
	height:500px;
	max-width: 1480px;
	min-height: 500px;
	margin-bottom: 100px;
	display: flex;
	align-items: center;
}
#interview .interview_img_box1 div,
#interview .interview_img_box2 div{
	margin-left: 60%;
	padding: 100px 0;
}
#interview .interview_img_box1 h3,
#interview .interview_img_box2 h3{
	font-size: 40px;
	font-weight: 300;
	font-family: 'Roboto Condensed', sans-serif;
	color:#0C5EA4;
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 1px solid #0C5EA4;
}
#interview .interview_img_box1 p,
#interview .interview_img_box2 p{
	color:#0C5EA4;
	font-size: 20px;
	padding-top: 10px;
}
#interview .interview_text_box1{
	max-width: 800px;
	margin: 0 auto;
}
#interview .interview_text_box1 h4{
	color:#064286;
	font-size: 24px;
	font-weight: 500;
	position: relative;
	margin-left: 60px;
	margin-bottom: 40px;
}
#interview .interview_text_box1 h4:before{
	position: absolute;
	content: "";
	top: 50%;
	left:-60px;
	width: 50px;
	height: 1px;
	background-color:#064286;
}
#interview .interview_text_box1 div{
	margin-bottom: 50px;
}
	.inter-view_mobile{
		display: none;
}
@media screen and (max-width: 767px) {
	#interview{
		padding: 60px 20px;
	}
	#interview .interview_img_box1{
	background-image: url("../img/top_recruit_box01.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-left: 0;
	padding: 0;
	height:250px;
	min-height:250px;
}
	#interview .interview_img_box2{
	background-image: url("../img/top_recruit_box02.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-left: 0;
	padding: 0;
	height:250px;
	min-height:250px;
}
	#interview .interview_img_box1,
	#interview .interview_img_box2{
		min-height: 300px;
		margin-bottom: 40px;
	}
	#interview .interview_img_box1 div,
	#interview .interview_img_box2 div{
		display: none;
	}
	.inter-view_mobile{
		margin-bottom: 40px;
		display: block;
	}
		#interview .inter-view_mobile h3{
			font-size: 30px;
			font-weight: 300;
			font-family: 'Roboto Condensed', sans-serif;
			color:#0C5EA4;
			display: inline-block;
			padding-bottom: 10px;
			border-bottom: 1px solid #0C5EA4;
	}
	#interview .inter-view_mobile p{
	color:#0C5EA4;
	font-size: 18px;
	padding-top: 10px;
	}
	#interview .interview_text_box1 h4{
		font-size: 18px;
	}
}









/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #F5F6F8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 700px;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 70px;
  border-bottom: 2px solid #00367D;
	border-left: 1px solid #fff;
  background-color: #7E99BD;
  line-height: 70px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  display: block;
  float: left;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  background: #F5F6F8;
	padding: 50px 20px;
  clear: both;
  overflow: hidden;
}
.tab_content th{
	width: 150px;
}
.outline_contents_box table{
	width: 100%;
}


/*選択されているタブのコンテンツのみを表示*/
#osaka:checked ~ #osaka_content,
#nagoya:checked ~ #nagoya_content,
#tokyo:checked ~ #tokyo_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #00367D;
  color: #fff;
}

#outline .outline_wrapper p.note{
	text-align: center;
	font-size: 12px;
	margin-top: 20px;
}

@media screen and (max-width: 767px) {
	.tab_item {
		font-size:3.5vw;
	}
}