@charset "utf-8";

/*------------------------------------------
pagehead
------------------------------------------*/
.pagehead.recruit{
	background-image:linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)),url("../images/recruit/bg_pagehead.jpg");
}
/*------------------------------------------
interview_unit
------------------------------------------*/
#sec_recruit{
	padding:60px 0;
}
.jobtype{
	display:flex;
	gap:50px;
	align-items:center;
	border:6px solid var(--lightgray);
	padding:15px;
}
.jobtype img{
	width:180px;
}
.jobtype h3{
  font-size:3rem;
}
.jobtype h3 span{
	font-size:1.4rem;
	color:#ccc;
	display:block;
	margin-top:10px;
}
/*
.jobtype h3{
  position: relative;
  line-height: 1.4;
  font-size:3rem;
  color:var(--blue);
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}
.jobtype h3:before, .jobtype h3:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.jobtype h3:before {
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  left: 0;
}
.jobtype h3:after {
  content: '';
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  right: 0;
}
*/

.recruit_unit{
	margin-top:50px;
}
.recruit_unit h4{
	font-size:1.8rem;
	font-weight:700;
	color:var(--blue);
	margin:40px 0 15px;
}

.recruit_unit>div {
	background:var(--lightgray);
	padding:20px;
	border-radius:10px;
}


.interview_unit .content .txt .int_unit h4{
	font-size:1.8rem;
	font-weight:700;
	color:var(--blue);
	margin:40px 0 15px;
}
.flow_wrap{
	display:flex;
	gap:30px
}
.flow_wrap .flow{
	flex:1;
	border:1px solid var(--lightgray);
	padding:10px;
}
.flow_wrap .flow h5{
	margin:0 0 8px;
}
.flow_wrap .flow h6{
	margin:0 0 8px;
}
.flow_wrap .flow h6.hbd{
	border-top:1px dotted #ccc;
	margin-top:10px;
	padding-top:10px;
}
.flow_wrap .flow dt{
	background:var(--lightgray);
	padding:8px;
	display:flex;
	gap:30px;
	border-radius:8px;
}
.flow_wrap .flow dd{
	padding:10px;
	font-size:1.5rem;
}

.btnarea{
	margin-top:50px;
	text-align:center;
}
.rec_frow{
	display:flex;
}
.rec_frow li{
	border:4px solid var(--blue);
	background:#fff;
	padding:10px 20px;
	border-radius:30px;
	color:var(--blue);
	position:relative;
	margin-left:40px;
}
.rec_frow li:first-child{
	margin-left:0px;
}
.rec_frow li:not(:first-child)::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--blue);
	border-right: 2px solid var(--blue);
	transform: rotate(45deg);
	margin-top: -5px;
}

@media (max-width: 768px) {
	.jobtype{
		gap:20px;
		border:6px solid var(--lightgray);
		padding:10px;
	}
	.jobtype img{
		width:100px;
	}
	.jobtype h3{
	  font-size:2rem;
	}
	.jobtype h3 span{
		font-size:1.2rem;
		margin-top:6px;
	}
	.rec_frow{
		justify-content:center;
	}
	.rec_frow li{
		border:2px solid var(--blue);
		padding:10px 6px;
		border-radius:30px;
		margin-left:20px;
		-webkit-writing-mode: vertical-rl; /* Safari/Chrome用 */
		writing-mode: vertical-rl;         /* 標準 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.rec_frow li:not(:first-child)::before{
		left: -15px;
		width: 6px;
		height: 6px;
		border-top: 2px solid var(--blue);
		border-right: 2px solid var(--blue);
		transform: rotate(45deg);
		margin-top: -3px;
	}
	.recruit_unit>div *{
		font-size:1.4rem;
	}
}