@charset "utf-8";


/* -------------------------
index.html
------------------------- */

.index-svg{
	text-align: center;
	&.-sp{
		display: none;
	}
	svg{
		width: min(100%, 1200px);
	}
	.box-bg{
		fill: #fff;
	}
	a:hover{
		.box-bg{
			fill: var(--c-blue-hover);
		}
	}
}

@container style(--is-mobile: true) {
	.index-svg{
		&.-sp{
			display: block;
		}
		&.-pc{
			display: none;
		}
	}
}

/* -------------------------
job.html
------------------------- */

#salesdept .h2::before{background-color: var(--c-salesdept);}
#mk .h2::before{background-color: var(--c-mk);}
#tech .h2::before{background-color: var(--c-tech);}
#wellness .h2::before{background-color: var(--c-wellness);}
#health .h2::before{background-color: var(--c-health);}
#dx .h2::before{background-color: var(--c-dx);}
#corporate .h2::before{background-color: var(--c-corporate);}

.department-container{
	position: relative;
}

/* .-has_interview{
	padding-bottom: min(400px, calc(60px + 1.7rem + 28vw));
} */

.department-main{
	background-color: var(--c-bg-gray);
	margin-top: 80px;
	margin-right: 15vw;
	padding: 70px var(--window-padding) 50px var(--window-padding-wide);
	position: relative;
	z-index: 10;
}

@container style(--is-mobile: true) {
	.department-main{
		margin-right: 8vw;
	}
}

[class^="section"]{
	p.job-catch-txt{
		font-size: var(--fs-catch);
	}
}

.department-btn{
	display: flex;
	justify-content: flex-end;
	margin: 30px 0;
}

.interview-box{
	border: 1px solid var(--c-blue);
	padding: 330px 30px 30px;
	position: absolute;
	z-index: 8;
	bottom: 0;
	right: var(--window-padding);
	width: calc(85vw - var(--window-padding));
}

.h_border{
	font-size: clamp(0.7rem, 1.8vw, 1.1rem);
	position: relative;
	padding-left: 12px;
	margin: 0 0 30px;
	line-height: 1;
	&::before{
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 4px;
		height: 1rem;
		background-color: var(--c-blue);
	}
}

.interview-list{
	display: flex;
	justify-content: center;
	gap: min(35px, 3vw);
}

.interview-link{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: min(12px, 1.5vw);
	width: min(215px, 18vw);
	.interview-img{
		width: 100%;
	}
	.interview-name{
		font-size: clamp(0.3rem, 1.3vw, 0.8rem);
		color: var(--c-black);
	}
	&:hover{
		.interview-name{
			color: var(--c-blue);
		}
	}
}

.btn-more{
	border: 0;
	background-color: transparent;
	width: 100%;
	color: var(--c-darkgray);
	font-size: var(--fs-p);
	border-bottom: 1px solid var(--c-darkgray);
	padding-bottom: 5px;
	display: none;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	&::after{
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid var(--c-darkgray);
		border-bottom: 2px solid var(--c-darkgray);
		transform: rotate(45deg);
	}
	&.open::after{
		transform: rotate(225deg);
	}
}

@container style(--is-mobile: true) {
	.btn-more{
		display: flex;
	}
}

.more-container[aria-hidden="true"]{
	display: none;
}

.more-container[aria-hidden="false"]{
	display: block;
}