/* 
 recruit
----------------------------------------------------------- */ 

body {
	line-height: 2;
	font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}
.header{
	line-height: 1.8;
}

/* recruit header */
.recruit-header{
	position: fixed;
	left: 0;
	top: 80px;
	border: 2px solid var(--sub-color);
	border-radius: 20px;
	padding: 32px 28px;
	background-color: #fff;
	width: 240px;
	box-shadow: 0 6px 0 var(--sub-color);
	z-index: 100;
	transition: transform var(--trans-base), opacity var(--trans-base), visibility var(--trans-base);
}
.recruit-header.is-hidden{
	transform: translateX(-100%);
	opacity: 0;
	visibility: hidden;
}
.recruit-header__list{
	margin-bottom: 24px;
}
.recruit-header__item{
	padding-bottom: 20px;
	background-image: radial-gradient(circle, var(--sub-color) 1.5px, transparent 1.6px);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-size: 10px 10px;
}
.recruit-header__item:not(:last-child){
	margin-bottom: 20px;
}
.recruit-header__link{
	color: var(--sub-color);
	transition: color var(--trans-base);
	display: inline-block;
	padding-left: 27px;
	position: relative;
	z-index: 0;
}
.recruit-header__link:hover{
	color: var(--orange-color);
}
.recruit-header__link::before{
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 15px;
	height: 17px;
	background: url("../img/recruit/recruit-header-arrow.svg") center center / contain no-repeat;
}
.recruit-header__entry{
	display: block;
	background-color: var(--sub-color);
	color: #fff;
	text-align: center;
	padding: 12px;
	border-radius: 10px;
	box-shadow: 0 3px 0 var(--orange-color);
	transition: transform var(--trans-base), background-color var(--trans-base), box-shadow var(--trans-base);
	line-height: 1.6;
}
.recruit-header__entry:hover{
	background-color: var(--orange-color);
	transform: translateY(3px);
	box-shadow: none;
}
.spnav__wrap {
	-webkit-backdrop-filter: blur(0) brightness(1);
	backdrop-filter: blur(0) brightness(1);
	background-color: #fff;
	width:240px;
	top:70px;
	left: 2.5%;
	border: 2px solid var(--sub-color);
	border-radius: 20px;
	height: auto;
	padding: 30px 28px;
}
.spnav__item:first-child {
	border-top:none;
}
.spnav__item {
	border-bottom:3px dotted var(--sub-color);
	font-size: var(--fontsize-15);
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.spnav__item:nth-last-child(-n+2) {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 10px;
}
.spnav__item:last-child {
	margin-bottom: 0;
}
.spnav__link{
	padding: 0;
	padding-left: 25px;
}
.spnav__item:not(:nth-last-child(-n+2)) .spnav__link::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 17px;
	background: url("../img/recruit/recruit-header-arrow.svg") center center / contain no-repeat;
}
.spnav__item:nth-last-child(-n+2) .spnav__link{
	display: block;
	background-color: var(--sub-color);
	color: #fff;
	text-align: center;
	padding: 12px;
	border-radius: 10px;
	box-shadow: 0 3px 0 var(--orange-color);
	transition: transform var(--trans-base), background-color var(--trans-base), box-shadow var(--trans-base);
}

/* recruit footer */
.recruit-footer{
	background-color: var(--sub-color);
	color: #fff;
	padding-block: clamp(40px, 3.9vw, 75px) clamp(10px, 3.1vw, 60px);
}
.recruit-footer__logo{
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--border-color);
}
.recruit-footer__logo img{
	height: clamp(35px, 2.6vw, 50px);
	width: auto;
}
.recruit-footer__copy{
	font-size: var(--fontsize-15);
	font-weight: 400;
	margin-top: clamp(30px, 3.4vw, 65px);
}

/* entry */
.entry .recruit-title{
	margin-bottom: clamp(30px, 4.1vw, 80px);
}
.entry__list{
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}
.entry__link{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px clamp(20px, 2vw, 40px);
	background-color: var(--orage-color);
	color: #fff;
	border-radius: 10px;
	padding-right: clamp(50px, 4.1vw, 80px);
	position: relative;
	z-index: 0;
	transition: background-color var(--trans-base);
}
.entry__link{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px clamp(20px, 2vw, 40px);
	background-color: var(--orange-color);
	color: #fff;
	border-radius: 10px;
	padding-right: clamp(60px, 4.1vw, 80px);
	position: relative;
	z-index: 0;
	transition: background-color var(--trans-base);
}
.entry__link:hover{
	background-color: var(--sub-color);
}
.entry__link::after{
	content: "";
	position: absolute;
	right: clamp(20px, 1.6vw, 30px);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(30px, 2.3vw, 45px);
	height: clamp(30px, 2.3vw, 45px);
	background: url("../img/recruit/entry-arrow.svg") center center / contain no-repeat;
}
.entry__link--contact{
	background-color: var(--sub-color);
}
.entry__link--contact:hover{
	background-color: var(--orange-color);
}
.entry__link--contact::after{
	background-image: url("../img/recruit/entry-arrow-orange.svg");
}
.entry__title{
	font-size: var(--fontsize-20);
}
.entry__title,
.entry__link p{
	padding-right: clamp(40px, 2.9vw, 55px);
	line-height: 1.6;
}

/* sub */
.recruit-sub::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-10;
	width:100%;
	height:100vh;
	background: url("../img/recruit/recruit-sub.jpg") center center / cover no-repeat;
}
.recruit-sub-fv{
	padding-block: clamp(120px, 8.8vw, 170px) clamp(40px, 4.1vw, 80px);
}
.c-breadcrumb{
	margin-top: 30px;
}
.c-breadcrumb__item a{
	color: rgba(34,34,34,0.5);
}
.recruit-sub-fv__title{
	font-size: clamp(28px, 3.1vw, 60px);
}
.recruit-sub-fv__en{
	display: block;
	color: var(--orange-color);
	font-size: var(--fontsize-16);
	font-family: var(--font-en);
	margin-bottom: 10px;
}

/* parts */
.recruit-title{
	font-size: clamp(24px, 2vw, 40px);
	font-weight: 700;
	color: var(--sub-color);
}
.recruit-title > span{
	display: block;
	font-size: var(--fontsize-16);
	margin-bottom: 10px;
	color: var(--orange-color);
	font-family: var(--font-en);
}
.recruit-title--center{
	text-align: center;
}
.recruit-title--white{
	color: #fff;
}
.recruit-title--black{
	color: var(--font-color);
}
.recruit-inner{
	padding-inline: clamp(300px, 23.4vw, 450px) min(5%,128px);
}
.recruit-more{
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid var(--sub-color);
	box-shadow: 0 3px 0 var(--sub-color);
	transition: transform var(--trans-base), background-color var(--trans-base), box-shadow var(--trans-base), color var(--trans-base);
	padding: 12px 28px;
	width: min(100%,270px);
	color: var(--sub-color);
	display: block;
	line-height: 1.6;
	position: relative;
	z-index: 0;
}
.recruit-more:hover{
	background-color: var(--sub-color);
	transform: translateY(3px);
	box-shadow: none;
	color: #fff;
}
.recruit-more::before{
	content: "";
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	height: 15px;
	background: url("../img/recruit/recruit-header-arrow.svg") center center / contain no-repeat;
}

@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1280px) {
	
	/* recruit header */
	.recruit-header{
		top: 70px;
		padding: 25px;
	}
	
}
@media screen and (max-width: 1024px){
	
	/* recruit header */
	.recruit-header{
		display: none;
	}
	.spnav__toggle-lines{
		height: 25px;
	}
	.spnav__toggle-lines span {
		background-color: var(--orange-color);
		height: 4px;
		border-radius: 2px;
	}
	.spnav__toggle-lines span:nth-of-type(2){
		top: 11px;
	}
	.spnav__toggle.is-open .spnav__toggle-lines span:nth-of-type(1) {
		transform: translateY(10px) rotate(-45deg);
	}
	.spnav__toggle.is-open .spnav__toggle-lines :nth-of-type(3) {
		transform: translateY(-11px) rotate(45deg);
	}
	
	/* parts */
	.recruit-inner{
		padding-inline: 5%;
	}
	
}
@media screen and (max-width: 767px){
	
	/* recruit header */
	.spnav__wrap{
		padding: 25px;
	}
	.recruit-footer__logo{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.recruit-footer__copy{
		font-size: 13px;
	}
	
	/* entry */
	.entry__list{
		grid-template-columns: repeat(1, 1fr);
	}
	.entry__link{
		padding: 20px;
	}
	
	/* parts */
	.recruit-title > span{
		margin-bottom: 5px;
	}
}
@media screen and (max-width: 480px){
}