@charset "utf-8";

/* main */
#main{
	position: relative;
	margin: 0 auto;
	padding: 0;
}
#main .header{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
#main .header img{width: 100%;}
#main h2{
	position: absolute;
	padding: 0;
	margin: 0;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 400px;
}
#main .ttl p{
	position: relative;
	display: inline-block;
	margin: 0 auto 5px auto;
	background-color: #ffffff;
	line-height: 1em;
	padding: 3px 5px;
}

h3{
	position: relative;
	margin: 0 auto 50px auto;
	width:100%;
	text-align: center;
}
h3 img{margin: 0 auto; width: 40%;max-width: 270px;}

/* lead */
#lead{
	position: relative;
	margin:  0 auto;
	padding:50px 0;
}
#lead p{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 30px);
	font-size: .13rem;
}
#lead p.ttl{
	margin: 0 auto;
	font-size: .18rem;
	line-height: 2.2em;
	width: 100%;
}
#lead .linksWrap{
	position: relative;
	margin: 40px auto 20px auto;
	border: solid 1px #00a0e9;
	padding: 20px 15px 15px 15px; 
	width: calc(100% - 60px);
	max-width: 980px;
}
#lead .linksWrap .ttl{
	position: relative;
	margin: 0 auto;
}
#lead .linksWrap .ttl h3{
	position: relative;
	margin: 0 auto 10px auto;
	font-size: .16rem;
	line-height: 1.8em;
}
#lead .linksWrap .txt{
	position: relative;
	margin: 0 auto;
}
#lead .linksWrap .txt p{margin: 0 auto;width: 100%;}
#lead .linksWrap .btnArea{
	position: relative;
	margin: 20px auto 0 auto;
	width: 100%;
}
#lead .linksWrap .btnArea a{
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
	padding: 15px 0;
	font-size: .18rem;
	text-align: center;
	color: #ffffff;
	background-color:  #00a0e9;
	border: solid 1px #00a0e9;
}
#lead .linksWrap .btnArea a:hover{background-color:  #ffffff;color: #00a0e9;}

/* job */
#job{
	position: relative;
	padding: 60px 0;
}
#job .jobWrap{
	position: relative;
	margin: 0 auto;
	padding: 20px 15px;
	width: calc(100% - 60px);
	max-width: 1000px;
	border: solid 3px #f5f5f5;
}
#job dl{
	position: relative;
	margin: 0 auto;
	max-width: 880px;
	border-top: dotted 2px #595757;
}
#job dl dt{
	position: relative;
	margin: 0;
	padding: 8px 10px;
	width: 5em;
	border-bottom: dotted 2px #595757;
}
#job dl dt p{position: relative;width: 100%;text-align: center;}
#job dl dt::after{
	position: absolute;
	top: 5px;
	right: -2px;
	width: 2px;
	height: calc(100% - 10px);
	content: '';
	display: block;
	border-right: dotted 2px #595757;
}
#job dl dd{
	position: relative;
	margin: 0 ;
	padding: 8px 10px 8px 12px;
	width: calc(100% - 5em - 42px);
	border-bottom: dotted 2px #595757;
}
#job .button{
	position: relative;
	margin: 40px auto 0 auto;
	display: block;
	width: 12em;
	padding: 5px 3em;
	background-color: #6a3906;
	border: solid 1px #6a3906;
	border-radius: 100px;
	color: #ffffff;
	text-align: center;
	line-height: 1.4em;
}
#job .button span{position: relative;display: inline-block;width: auto;}
#job .button span::after{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right: -40px;
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background-image: url("../img/recruit/arrow.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#job a.button:hover{background-color:  #ffffff;color: #6a3906;}

/* interview */
#interview{
	position: relative;
	margin:  0 auto;
	padding:60px 0 0 0;
	box-shadow: 0px 10px 15px -6px rgba(0,0,0,0.4) inset;
}
#interview .interviewWrap{
	position: relative;
	margin: 40px auto 0 auto;
	max-width: 1050px;
}
#interview .interviewWrap .photo{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 140px);
	max-width: 300px;
}
#interview .interviewWrap .photo img{
	position: relative;
	margin: 0 auto;
}
#interview .interviewWrap .txt{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
}
#interview .interviewWrap .txt p{
	position: relative;
	line-height: 2.4em;
	font-size: .13rem;
}
#interview .interviewWrap .txt .name{
	padding: 1em 0;
	font-size: .13rem;
}
#interview .interviewWrap .txt .name span{font-size: .20rem;}
#interview .iv01 .interviewWrap .txt .name{color: #f38c00;}
#interview .iv02 .interviewWrap .txt .name{color: #fabe00;}
#interview .iv03 .interviewWrap .txt .name{color: #8fc31f;}
#interview .iv01{
	position: relative;
	padding: 0 0 50px 0;
}
#interview .iv02, #interview .iv03{
	position: relative;
	padding: 20px 0 50px 0;
	box-shadow: 0px 10px 15px -6px rgba(0,0,0,0.4) inset;
}
#interview .iv03{padding: 20px 0 0 0;}

#observe{display: none;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* main */
	#main{margin: 0 auto;}

	h3{margin: 0 auto 80px auto;}

	/* lead */
	#lead{padding:100px 0;}
	#lead p{
		margin: 80px auto 0 auto;
		font-size: .18rem;
		line-height: 2.2em;
	}
	#lead p.ttl{
		margin: 0 auto;
		font-size: .28rem;
		line-height: 2.4em;
	}
	#lead .linksWrap{
		margin: 80px auto 20px auto;
		padding: 30px; 
		max-width: 980px;
		gap: 0 50px;
	}
	#lead .linksWrap .ttl{
		margin: 0 ;
		width: 14em;
		font-size: .22rem;
		text-align: center;
	}
	#lead .linksWrap .ttl h3{
		margin: 0 auto;
		font-size: .22rem;
		line-height: 1em;
	}
	#lead .linksWrap .txt{margin: 0;}
	#lead .linksWrap .txt p{font-size: .14rem;}
	#lead .linksWrap .btnArea{
		margin: 0;
		width: 30%;
		max-width: 200px
	}

	/* job */
	#job{padding: 100px 0;}
	#job .jobWrap{
		padding: 60px 0;
		border: solid 5px #f5f5f5;
	}
	#job dl{border-top: dotted 3px #595757;}
	#job dl dt{
		padding: 25px 30px;
		width: 5em;
		border-bottom: dotted 3px #595757;
	}
	#job dl dt::after{
		top: 10px;
		right: -3px;
		width: 3px;
		height: calc(100% - 20px);
		border-right: dotted 3px #595757;
	}
	#job dl dd{
		padding: 25px 30px;
		width: calc(100% - 5em - 123px);
		border-bottom: dotted 3px #595757;
	}
	#job .button{
		margin: 60px auto 0 auto;
		width: 12em;
		padding: 15px 3em;
		font-size: .25rem;
		line-height: 1.4em;
	}
	#job .button span::after{
		right: -60px;
		width: 20px;
		height: 20px;
	}

	/* interview */
	#interview{padding:120px 0 0 0;}
	#interview .interviewWrap{
		margin: 100px auto 0 auto;
		gap: 0 80px;
	}
	#interview .interviewWrap.reverse{flex-direction: row-reverse;}
	#interview .interviewWrap .photo{
		margin: 0;
		width: 30% ;
	}
	#interview .interviewWrap .txt{
		margin: 0;
		width: calc(70% - 80px);
	}
	#interview .interviewWrap .txt p{
		line-height: 2.4em;
		font-size: .16rem;
	}
	#interview .interviewWrap .txt .name{
		padding: 25px 0 1em 0;
		font-size: .21rem;
	}
	#interview .interviewWrap .txt .name span{font-size: .30rem;}
	#interview .iv01{padding: 0 0 100px 0;}
	#interview .iv02, #interview .iv03{padding: 1px 0 100px 0;}
	#interview .iv03{padding: 1px 0 0 0;}

}