@charset "UTF-8";
/* -----------------------------------------------------------
	.p-recruit
----------------------------------------------------------- */
.p-recruit {
	position:relative;
	min-height:1432px;
	overflow:hidden;
	background: linear-gradient(107deg, #54C3F1 0%, #0885CD 100%);
	@media (max-width: 767px) {
		min-height: auto;
	}
	.recruit__img {
		position:absolute;
		border-radius:8px;
		overflow:hidden;
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.recruit__img--main{
		width:min(40vw,541px);
		aspect-ratio:4/3;
		left:10%;
		top:40%;
		@media (min-width: 768px) and (max-width: 1024px) {
			left: 2%;
		}
		@media (max-width: 767px) {
			width: 60vw;
			right: -20px;
			left: auto;
			top: 48px;
		}
		&.is-active {
			animation-delay:.4s;
		}
	}
	.recruit__img--01{
		width:min(28vw,400px);
		aspect-ratio:4/3;
		left:2%;
		top:5%;
		@media (min-width: 768px) and (max-width: 1024px) {
			top: 10%;
		}
		@media (max-width: 767px) {
			top: 23%;
			left: -5%;
		}
		&.is-active {
			animation-delay:.1s;
		}
	}
	.recruit__img--02{
		width:min(18vw,246px);
		aspect-ratio:4/3;
		right:5%;
		top:4%;
		@media (max-width: 767px) {
			display: none;
		}
		&.is-active {
			animation-delay:.2s;
		}
	}
	.recruit__img--03{
		width:min(16vw,322px);
		aspect-ratio:4/3;
		left:-2%;
		bottom:10%;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 25vw;
			bottom: 15%;
		}
		@media (max-width: 767px) {
			width: 35vw;
			left: -10px;
			bottom: -8px;
		}
		&.is-active {
			animation-delay:.3s;
		}
	}
	.recruit__img--blur{
		background-color: #000;
		filter:blur(2px);
		opacity:0.8;
		@media (max-width: 767px) {
			transform: translateZ(0);
		}
	}
	.recruit__img--deepblur{
		background-color: #000;
		filter:blur(10px);
		opacity:0.8;
		@media (max-width: 767px) {
			transform: translateZ(0);
		}
	}
	.recruit__img--04{
		width:145px;
		top:-20px;
		left:55%;
		@media (max-width: 767px) {
			left: 80%;
		}
		&.is-active {
			animation-delay:.4s;
		}
	}
	.recruit__img--05{
		width:145px;
		bottom:20%;
		left:20%;
		@media (min-width: 768px) and (max-width: 1024px) {
			bottom: 25%;
			left: 20%;
		}
		@media (max-width: 767px) {
			width: 80px;
			left: -10px;
		}
		&.is-active {
			animation-delay:.5s;
		}
	}
	.recruit__img--06{
		width:145px;
		right:-40px;
		top:55%;
		&.is-active {
			animation-delay:.6s;
		}
	}
	.recruit__img--07{
		width:246px;
		right:-20px;
		bottom:0;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 25vw;
			bottom: 10%;
		}
		@media (max-width: 767px) {
			display: none;
		}
		&.is-active {
			animation-delay:.7s;
		}
	}
	.recruit__img--08{
		width:246px;
		left:-170px;
		top:55%;
		@media (min-width: 768px) and (max-width: 1024px) {
			top: 30%;
		}
		@media (max-width: 767px) {
			display: none;
		}
		&.is-active {
			animation-delay:.8s;
		}
	}
	.recruit__img--09{
		width:322px;
		left:30.8%;
		bottom: -31px;
		@media (max-width: 767px) {
			width: 60vw;
			left: auto;
			right: -24px;

		}
		&.is-active {
			animation-delay:1s;
		}
	}
	.p-recruit__content {
		position: relative;
		z-index: 10;
		width:min(90%,1280px);
		margin:0 auto;
		padding: clamp(160px,20vw,240px) 0;
		color: #fff;
		.title-jp {
			position: relative;
			padding-left: 48px;
			font-size: calc(24 * var(--rem));
			line-height: 1;
			font-weight: 500;
			letter-spacing: 0.06em;
			margin-bottom: 40px;
			margin-left:45%;
			@media (min-width: 768px) and (max-width: 1024px) {
				margin-left: 35%;
			}
			@media (max-width: 767px) {
				font-size: calc(16 * var(--rem));
				margin-left: 5%;
				margin-bottom: 24px;
			}
			&:before {
				content: "";
				width: 32px;
				height: 2px;
				border-radius: 1px;
				background-color: #fff;
				position: absolute;
				top: 0.25em;
				left: 0;
			}
		}
		.catchcopy_en {
			font-family: var(--font-sans);
			font-size: calc(128 * var(--rem));
			font-style: italic;
			font-weight: 600;
			line-height: 1;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			margin-left: 45%;
			margin-bottom: 104px;
			@media (min-width: 1025px) and (max-width: 1280px) {
				font-size: calc(116 * var(--rem));
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				font-size: calc(90 * var(--rem));
				margin-left: 35%;
				margin-bottom: 80px;
			}
			@media (max-width: 767px) {
				font-size: calc(64 * var(--rem));
				margin-left: 5%;
				margin-bottom: 32px;
			}
			>span {
				display: block;
				&:nth-child(2) {
					span {
						&:nth-child(4) {
							padding-left: 0.25em;
						}
					}
				}
				&:last-child {
					span {
						&:last-child {
							font-size: 76.6%;
						}
					}
				}
			}
		}
		h3 {
			font-size: calc(36 * var(--rem));
			font-weight: 700;
			letter-spacing: 0.24em;
			margin-bottom: 48px;
			margin-left:58%;
			@media (min-width: 1025px) and (max-width: 1280px) {
				letter-spacing: 0.08em;
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				margin-left: 45%;
				font-size: calc(32 * var(--rem));
			}
			@media (max-width: 767px) {
				font-size: calc(18 * var(--rem));
				margin-left: 10%;
				margin-bottom: 16px;
			}
		}
		>.txt {
			font-weight: 500;
			line-height: 2.4;
			margin-left:58%;
			font-size: 125%;
			@media (min-width: 768px) and (max-width: 1024px) {
				margin-left: 45%;
				br {
					display: none;
				}
			}
			@media (max-width: 767px) {
				margin-left: 10%;
				br {
					display: none;
				}
			}
		}
	}
}
@keyframes fadeIn{
	to{
		opacity:1;
		transform: translateY(0) scale(1);
	}
}

/* -----------------------------------------------------------
	.p-threeview
----------------------------------------------------------- */
.p-threeview {
	margin: 160px auto 80px;
	@media (max-width: 767px) {
		margin: 160px auto 40px;
	}
	.deco-catchcopy__en {
		text-align: center;
		font-family: var(--font-sans);
		font-style: italic;
		font-weight: 500;
		line-height: 1;
		text-transform: uppercase;
		overflow: hidden;
		font-size: 9vw;
		margin-bottom: 64px;
		@media (max-width: 767px) {
			text-align: left;
			font-size: 14.5vw;
			margin-bottom: 32px;
		}
		>span {
			@media (max-width: 767px) {
				display: block;
			}
			&:nth-child(1) {
				span {
					&:nth-child(1) {color: #52C1F0;}
					&:nth-child(2) {color: #4DBEEE;}
					&:nth-child(3) {color: #48BAEC;}
					&:nth-child(4) {color: #44B6E9;}
					&:nth-child(5) {color: #40B3E8;}
					&:nth-child(6) {color: #3AAEE5; padding-left: 0.25em;}
					&:nth-child(7) {color: #37ABE3;}
					&:nth-child(8) {color: #33A8E1;}
					&:nth-child(9) {color: #2EA4DF;}
					&:nth-child(10) {color: #289FDC;}
				}
			}
			&:nth-child(2) {
				span {
					&:nth-child(1) {color: #219AD9;}
					&:nth-child(2) {color: #1C96D6;}
					&:nth-child(3) {color: #1791D5; padding-left: 0.25em;}
					&:nth-child(4) {color: #128DD2;}
					&:nth-child(5) {color: #108BD1;}
					&:nth-child(6) {color: #0A86CE;}
				}
			}
			&.is-active {
				&:nth-child(2) {
					span {
						&:nth-child(1) {animation-delay: 0.6s;}
						&:nth-child(2) {animation-delay: 0.65s;}
						&:nth-child(3) {animation-delay: 0.7s;}
						&:nth-child(4) {animation-delay: 0.75s;}
						&:nth-child(5) {animation-delay: 0.8s;}
						&:nth-child(6) {animation-delay: 0.85s;}
					}
				}
			}
		}
	}
	h2 {
		width: calc(100% - 240px);
		margin-inline: auto;
		font-size: calc(40 * var(--rem));
		font-weight: 500;
		letter-spacing: 0.06em;
		margin-bottom: 80px;
		@media (max-width: 1439px) {
			width: 96%;
		}
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 92%;
		}
		@media (max-width: 767px) {
			width: 89.6%;
			font-size: calc(24 * var(--rem));
			margin-bottom: 56px;
		}
	}
	.p-threeview__list {
		display: flex;
		flex-direction: column;
		gap:128px;
		@media (max-width: 767px) {
			gap:64px;
		}
		.p-threeview__block {
			display: flex;
			@media (max-width: 767px) {
				flex-direction: column;
			}
			.p-threeview__type {
				position: sticky;
				top: 135px;
				width: 27.8%;
				padding-left: 5.6vw;
				&::before {
					content: "";
					background: url(../images/recruit/deco-ribbon-leftdown.svg)
					0 bottom no-repeat;
					background-size: contain;
					position: absolute;
					top: 3em;
					left: 0;
					width: calc(100% + 48px);
					aspect-ratio: 1/0.38;
				}
				@media (max-width: 767px) {
					position: relative;
					top: auto;
					display: flex;
					align-items: center;
					gap:24px;
					width: 100%;
					margin-bottom: 24px;
					&::before {
						width: 25%;
						top: 0;
						left: -15px;
					}
				}
				.num {
					font-family: var(--font-sans);
					color: var(--color-blue);
					font-style: italic;
					font-weight: 500;
					line-height: 1;
					font-size: calc(36 * var(--rem));
					margin-bottom: 8px;
					@media (max-width: 767px) {
						font-size: calc(24 * var(--rem));
					}
				}
				h3 {
					font-family: var(--font-sans);
					color: var(--color-blue);
					font-style: italic;
					font-weight: 500;
					line-height: 1;
					font-size: calc(72 * var(--rem));
					text-transform: uppercase;
					@media (max-width: 767px) {
						font-size: calc(40 * var(--rem));
					}
				}
			}
			.p-threeview__inner {
				width: 72.2%;
				@media (max-width: 767px) {
					width: 100%;
				}
				.img {
					margin-bottom: 64px;
					@media (min-width: 768px) and (max-width: 1024px) {
						margin-bottom: 40px;
					}
					@media (max-width: 767px) {
						margin-bottom: 32px;
					}
					img {
						border-radius: 8px 0 0 8px;
					}
				}
				.p-threeview__txt {
					padding: 0 5.6vw;
					@media (min-width: 1025px) {
						display: flex;
						gap:40px;
						padding: 0 5.6vw 0 4.4vw;
					}
					h4 {
						width: calc(37.5% - 40px);
						font-size: calc(36 * var(--rem));
						line-height: 1.2;
						font-weight: 500;
						letter-spacing: 0.08em;
						em {
							font-size: 133%;
						}
						@media (max-width: 1024px) {
							width: 100%;
							margin-bottom: 24px;
							em {
								font-size: 110%;
							}
							br {
								display: none;
							}
						}
						@media (max-width: 767px) {
							font-size: calc(24 * var(--rem));
						}
					}
					.txt {
						width: 62.5%;
						@media (max-width: 1024px) {
							width: 100%;
						}
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-goodstuff
----------------------------------------------------------- */
.p-goodstuff {
	background: url(../images/common/bg-sky.avif) center center no-repeat;
	background-size: 100% 100%;
	padding: 160px 0 240px;
	position: relative;
	@media (max-width: 767px) {
		padding: 80px 0 160px;
	}
	&::before {
		content: "";
		width: 100%;
		height: 50%;
		background: linear-gradient(180deg,rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 0) 100%);
		position: absolute;
		top: 0;
		left: 0;

	}
	@media (max-width: 767px) {
		padding: 80px 0 160px;
	}
	.deco-catchcopy__en {
		text-align: center;
		font-family: var(--font-sans);
		font-style: italic;
		font-weight: 500;
		line-height: 1;
		text-transform: uppercase;
		overflow: hidden;
		font-size: 8vw;
		margin-bottom: 64px;
		position: relative;
		z-index: 1;
		@media (max-width: 767px) {
			text-align: left;
			font-size: 14.5vw;
			margin-bottom: 32px;
		}
		>span {
			@media (max-width: 767px) {
				display: block;
			}
			&:nth-child(1) {
				span {
					&:nth-child(1) {color: #52C1F0;}
					&:nth-child(2) {color: #4EBEEE;}
					&:nth-child(3) {color: #4ABBEC;}
					&:nth-child(4) {color: #45B7EA; padding-left: 0.25em;}
					&:nth-child(5) {color: #3FB2E7;}
					&:nth-child(6) {color: #3BAEE5;}
					&:nth-child(7) {color: #36ABE3;}
				}
			}
			&:nth-child(2) {
				span {
					&:nth-child(1) {color: #30A6E0;}
					&:nth-child(2) {color: #2DA3DE;}
					&:nth-child(3) {color: #2AA1DD;}
					&:nth-child(4) {color: #269DDB;}
					&:nth-child(5) {color: #229BDA;}
					&:nth-child(6) {color: #1D96D7; padding-left: 0.25em;}
					&:nth-child(7) {color: #1993D5;}
					&:nth-child(8) {color: #1690D3; padding-left: 0.25em;}
					&:nth-child(9) {color: #118CD1;}
					&:nth-child(10) {color: #0D89CF;}
					&:nth-child(11) {color: #0A86CE;}
				}
			}
			&.is-active {
				&:nth-child(2) {
					span {
						&:nth-child(1) {animation-delay: 0.45s;}
						&:nth-child(2) {animation-delay: 0.5s;}
						&:nth-child(3) {animation-delay: 0.55s;}
						&:nth-child(4) {animation-delay: 0.6s;}
						&:nth-child(5) {animation-delay: 0.65s;}
						&:nth-child(6) {animation-delay: 0.7s;}
						&:nth-child(7) {animation-delay: 0.75s;}
						&:nth-child(8) {animation-delay: 0.8s;}
						&:nth-child(9) {animation-delay: 0.85s;}
						&:nth-child(10) {animation-delay: 0.9s;}
						&:nth-child(11) {animation-delay: 0.95s;}
					}
				}
			}
		}
	}
	h2 {
		margin-inline: auto;
		font-size: calc(40 * var(--rem));
		font-weight: 500;
		letter-spacing: 0.06em;
		margin-bottom: 64px;
		position: relative;
		z-index: 1;
		@media (max-width: 767px) {
			font-size: calc(24 * var(--rem));
			margin-bottom: 40px;
		}
	}
	.p-goodstuff_list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 8px;
		grid-row-gap: 8px;
		position: relative;
		z-index: 1;
		@media (max-width: 767px) {
			grid-template-columns: repeat(2, 1fr);
		}
		.p-goodstuff__item {
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.4);
			backdrop-filter: blur(20px);
			padding: 40px 24px 16px 32px;
			height: 100%;
			min-height: 250px;
			display: flex;
			flex-direction: column;
			@media (min-width: 768px) and (max-width: 1024px) {
				padding: 32px 16px;
			}
			@media (max-width: 767px) {
				padding: 24px;
				min-height: 150px;
			}
			.num {
				font-family: var(--font-sans);
				font-style: italic;
				color: var(--color-blue);
				font-weight: 500;
				line-height: 1;
				font-size: calc(20 * var(--rem));
				margin-bottom: 16px;
				@media (max-width: 767px) {
					font-size: calc(16 * var(--rem));
					margin-bottom: 8px;
					padding-top: 8px;
				}
			}
			h3 {
				font-size: calc(20 * var(--rem));
				font-weight: 500;
				line-height: 1.4;
				@media (max-width: 767px) {
					font-size: calc(16 * var(--rem));
				}
			}
			.icon {
				max-width: 100px;
				margin-left: auto;
				margin-top: auto;
				padding-top: 40px;
				@media (min-width: 768px) and (max-width: 1024px) {
					max-width: 64px;
				}
				@media (max-width: 767px) {
					max-width: 64px;
					padding-top: 24px;
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-interview
----------------------------------------------------------- */
.p-interview {
	background: url(../images/common/bg-ribbon.avif) center 10% no-repeat;
	background-size: contain;
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.deco-catchcopy__en {
		font-family: var(--font-sans);
		font-style: italic;
		font-weight: 500;
		line-height: 1;
		text-transform: uppercase;
		overflow: hidden;
		font-size: 8vw;
		padding-left: 4.2vw;
		position: relative;
		z-index: 1;
		@media (max-width: 767px) {
			text-align: left;
			font-size: 14.5vw;
			margin-bottom: 32px;
		}
		>span {
			@media (max-width: 767px) {
				display: block;
			}
			&:nth-child(1) {
				span {
					&:nth-child(1) {color: #50BFEF;}
					&:nth-child(2) {color: #4CBDEE;}
					&:nth-child(3) {color: #47B9EB;}
					&:nth-child(4) {color: #3EB1E7;}
					&:nth-child(5) {color: #3DB0E6;}
				}
			}
			&:nth-child(2) {
				padding-left: 0.1em;
				span {
					&:nth-child(1) {color: #36AAE3;}
					&:nth-child(2) {color: #32A7E1;}
					&:nth-child(3) {color: #2BA2DE;}
					&:nth-child(4) {color: #289FDC;}
					&:nth-child(5) {color: #229AD9;}
					&:nth-child(6) {color: #1C95D6;}
					&:nth-child(7) {color: #1791D4;}
					&:nth-child(8) {color: #138ED2;}
					&:nth-child(9) {color: #0C88CF;}
				}
			}
			&.is-active {
				&:nth-child(2) {
					span {
						&:nth-child(1) {animation-delay: 0.35s;}
						&:nth-child(2) {animation-delay: 0.4s;}
						&:nth-child(3) {animation-delay: 0.45s;}
						&:nth-child(4) {animation-delay: 0.5s;}
						&:nth-child(5) {animation-delay: 0.55s;}
						&:nth-child(6) {animation-delay: 0.6s;}
						&:nth-child(7) {animation-delay: 0.65s;}
						&:nth-child(8) {animation-delay: 0.7s;}
						&:nth-child(9) {animation-delay: 0.75s;}
					}
				}
			}
		}
	}
	.p-interview__body {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 40px;
		grid-row-gap: 136px;
		margin-top: -64px;
		position: relative;
		z-index: 1;
		@media (min-width: 768px) and (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
			grid-row-gap: 80px;
			margin-top: 24px;
		}
		@media (max-width: 767px) {
			grid-template-columns: 1fr;
			grid-column-gap: 0;
			grid-row-gap: 24px;
			margin-top: 24px;
		}
		.p-interview__element {
			@media (min-width: 1025px) {
				&:nth-child(3n+1) {
					margin-top: 198px;
				}
				&:nth-child(3n+2) {
					margin-top: 120px;
				}
				&:first-child {
					margin-top: 160px;
				}
			}
			@media (min-width: 768px) and (max-width: 1024px) {
				&:nth-child(odd) {
					margin-top: 80px;
				}
			}
		}
		.p-interview__outline {
			h2 {
				font-size: calc(40 * var(--rem));
				font-weight: 500;
				line-height: 1.2;
				@media (max-width: 767px) {
					font-size: calc(24 * var(--rem));
				}
			}
			.txt-lead {
				margin-top: 40px;
				max-width: 324px;
				@media (max-width: 767px) {
					margin-top: 16px;
				}
			}
		}
		.p-interview__item {
			a {
				display: block;
				position: relative;
				.img {
					position: relative;
					border-radius: 8px;
					width: 100%;
					aspect-ratio: 400/533;
					overflow: hidden;
					&::before {
						content: "";
						width: 100%;
						height: 50%;
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 1;
						background: linear-gradient(180deg, rgba(0, 124, 200, 0.00) 50.09%, #007CC8 100%);
						border-radius: 0 0 8px 8px;
						transition: 0.3s;
					}
					img {
						width: 100%;
						width: 100%;
						object-fit: cover;
						transition: 0.3s;
					}
				}
				.num {
					font-size: calc(40 * var(--rem));
					font-family: var(--font-sans);
					color: #FFF;
					font-style: italic;
					font-weight: 400;
					line-height: 100%;
					text-transform: uppercase;
					position: absolute;
					top: 24px;
					right: 16px;
					writing-mode: vertical-rl;
					text-align: start;
					display: inline-block;
					white-space: pre;
					@media (max-width: 767px) {
						font-size: calc(32 * var(--rem));
						top: 16px;
					}
				}
				.p-interview__txt {
					position: absolute;
					bottom: 24px;
					left: 0;
					right: 0;
					width: 84%;
					margin-inline: auto;
					z-index: 2;
					@media (max-width: 767px) {
						width: 92%;
					}
					.catchcopy {
						color: #fff;
						font-weight: 700;
						font-size: calc(24 * var(--rem));
						box-decoration-break: clone;  
						display: inline;
						padding: 0.05em 0.3em;
						background-color: var(--color-base);
						border-radius: 4px;
						@media (max-width: 767px) {
							font-size: calc(20 * var(--rem));
						}
					}
					ul {
						display: flex;
						align-items: center;
						gap: 1em;
						margin-top: 16px;
						li {
							color: #fff;
							line-height: 1;
						}
					}
					.icon {
						position: absolute;
						bottom: -8px;
						right: -4%;
						display: inline-block;
						width: 40px;
						aspect-ratio: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						@media (max-width: 767px) {
							right: 8px;
							width: 32px;
						}
						&::before {
							content: "";
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background-color: #fff;
							position: absolute;
							inset: 0;
							margin: auto;
							transition: 0.3s;
						}
						span {
							position: relative;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							&::before,
							&::after {
								content: "";
								background-color: var(--color-blue);
							}
							&::before {
								width: 16px;
								height: 2px;
							}
							&::after {
								width: 2px;
								height: 16px;
								position: absolute;
								inset: 0;
								margin: auto;
							}
							@media (max-width: 767px) {
								&::before {
									width: 10px;
								}
								&::after {
									height: 10px;
								}
							}
						}
					}
				}
				@media (hover: hover) {
					&:hover {
						.img {
							img {
								scale: 1.1;
							}
						}
						.p-interview__txt {
							.icon {
								&::before {
									scale: 1.2;
								}
							}
						}
					}
				}
			}
		}
	}
}
.modal{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	&.is-active{
		display:block;
	}
	.modal__overlay{
		position:absolute;
		inset:0;
		background:rgba(0,0,0,.7);
	}
	.modal__content{
		position:relative;
		z-index:2;
		max-width:1440px;
		margin-inline: auto;
		padding:80px;
		background:#fff;
		max-height:100dvh;
		overflow:auto;
		@media (max-width: 767px) {
			padding: 40px 24px;
		}
		.p-staff__outline {
			position: relative;
			margin-bottom: 80px;
			@media (max-width: 767px) {
				margin-bottom: 40px;
			}
			.img {
				@media (max-width: 767px) {
					width: 100%;
					aspect-ratio: 4/3;
					overflow: hidden;
				}
				img {
					width: 100%;
					border-radius: 40px;
					@media (max-width: 767px) {
						border-radius: 16px;
						height: 100%;
						object-fit: cover;
					}
				}
			}
			.p-staff__txt {
				position: absolute;
				bottom: 64px;
				left: 64px;
				color: #fff;
				@media (max-width: 767px) {
					bottom: 24px;
					left: 24px;
				}
				.department {
					margin-bottom: 11px;
					line-height: 1;
					font-weight: 700;
				}
				.p-staff__inner {
					display: flex;
					align-items: center;
					line-height: 1;
					gap:24px;
					.name {
						font-family: var(--font-sans);
						font-style: italic;
						font-size: calc(64 * var(--rem));
						text-transform: uppercase;
						@media (max-width: 767px) {
							font-size: calc(48 * var(--rem));
						}
					}
					.join {
						font-weight: 700;
					}
				}
			}
		}
		.p-staff__body {
			max-width: 1120px;
			display: flex;
			flex-direction: column;
			gap:80px;
			@media (max-width: 767px) {
				gap:40px;
			}
			dl {
				dt {
					border-left: 3px solid var(--color-blue);
					padding-left: 16px;
					font-size: calc(24 * var(--rem));
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 24px;
					@media (max-width: 767px) {
						font-size: calc(18 * var(--rem));
					}
				}
			}
		}
		.modal__btn{
			display:block;
			padding: 0;
			background: none;
			border-radius: 9999px;
			outline: none;
			-webkit-appearance: none;
			appearance: none;
			margin:80px auto 0;
			padding:24px 66px;
			line-height: 1;
			border: 1px solid var(--color-border);
			font-weight: 500;
			font-family: var(--font-base);
			font-size: 16px;
			cursor:pointer;
			@media (max-width: 767px) {
				margin-top: 40px;
				padding: 16px 66px;
			}
		}
	}
	.modal__close{
		position:fixed;
		top:40px;
		right:max(40px, calc((100vw - 1440px) / 2 + 40px));
		z-index:10000;
		background: none;
		width:42px;
		aspect-ratio: 1;
		border:none;
		cursor:pointer;
		line-height:1;
		@media (max-width: 767px) {
			top: 24px;
			right: 24px;
			width: 40px;
		}
		svg {
			width: 100%;
		}
	}
}

/* -----------------------------------------------------------
	.p-recruitment
----------------------------------------------------------- */
.p-recruitment {
	.c-title-basic {
		margin-bottom: 64px;
		padding-left: 5.6vw;
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
	}
	.p-recruitment__list {
		border-top: 1px solid var(--color-base);
		.p-recruitment__item {
			border-bottom: 1px solid var(--color-base);
			.p-recruitment__outline {
				cursor: pointer;
				padding: 64px calc(5.6vw + 40px) 64px 5.6vw;
				position: relative;
				@media (max-width: 767px) {
					padding: 40px calc(5.6vw + 24px) 40px 5.6vw;
				}
				&::before {
					content: "";
					background-color: var(--color-base);
					width: 0;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
					transition: 0.3s;
				}
				.p-recruitment__type {
					display: flex;
					align-items: center;
					gap:24px;
					margin-bottom: 32px;
					@media (min-width: 768px) and (max-width: 1024px) {
						margin-bottom: 16px;
					}
					@media (max-width: 767px) {
						margin-bottom: 8px;
					}
					.num {
						font-family: var(--font-sans);
						color: var(--color-blue);
						font-size: calc(20 * var(--rem));
						font-style: italic;
						font-weight: 500;
						line-height: 1;
						@media (max-width: 767px) {
							font-size: 18px;
						}
					}
					.type {
						span {
							border-radius: 8px;
							padding: 8px 16px;
							text-align: center;
							display: inline-block;
							line-height: 1;
							font-weight: 700;
							font-size: 93.8%;
							color: #fff;
						}
						&.career {
							span {
								background-color: var(--color-base);
							}
						}
						&.newgrad {
							span {
								background-color: var(--color-blue);
							}
						}
					}
				}
				h3 {
					font-size: calc(40 * var(--rem));
					font-weight: 500;
					line-height: 1.2;
					@media (min-width: 768px) and (max-width: 1024px) {
						font-size: calc(36 * var(--rem));
					}
					@media (max-width: 767px) {
						font-size: calc(24 * var(--rem));
					}
				}
				.icon {
					display: inline-block;
					position: absolute;
					right: 80px;
					bottom: 74px;
					width: 20px;
					aspect-ratio: 1;
					&::before,
					&::after {
						content: "";
						background-color: var(--color-base);
						width: 100%;
						height: 2px;
						border-radius: 1px;
						position: absolute;
						inset: 0;
						margin: auto;
						transition: 0.3s;
					}
					&:after {
						rotate: 90deg;
					}
					@media (max-width: 767px) {
						right: 24px;
						bottom: 40px;
						width: 16px;
					}
				}
				@media (hover: hover) {
					&:hover {
						&::before {
							width: 100%;
						}
						h3 {
							color: #fff;
						}
						.icon {
							&::before,
							&::after {
								background-color: #fff;
							}
						}
					}
				}
			}
			.p-recruitment__body {
				display: none;
				overflow: hidden;
				padding: 0 5.6vw 64px;
				@media (max-width: 767px) {
					padding: 0 5.6vw 40px;
				}
				.c-table-basic {
					width: 100%;
				}
			}
			&.is-open {
				.p-recruitment__outline {
					.icon {
						&::after {rotate: 0deg;}	
					}
				}
			}
		}
	}
	.c-button-basic {
		max-width: 640px;
		margin-top: 80px;
		margin-inline: auto;
		@media (min-width: 768px) and (max-width: 1024px) {
			width: 92%;
		}
		@media (max-width: 767px) {
			width: 89.6%;
			margin-top: 40px;
		}
		a {
			padding: 48px 40px;
			@media (max-width: 767px) {
				padding: 32px 16px 32px 24px;
			}
			.txt {
				font-size: calc(24 * var(--rem));
				@media (max-width: 767px) {
					font-size: calc(16 * var(--rem));
				}
			}
		}
	}
	>.txt {
		text-align: center;
		font-size: 125%;
		font-weight: 500;
	}
}