/* 背景画像 */
.parallax::before {
	background-image: url(/images/recruit/new/interview/bg/bg_pc.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}
@media only screen and (max-width: 920px) {
	.parallax::before {
		background-image: url("/images/recruit/new/interview/bg/bg_sp.png");
	}
}
/* =========================
   PC / webp
========================= */
@supports (background-image: image-set(url("bg.webp") type("image/webp"))) {
	.parallax::before {
		background-image: url("/images/recruit/new/interview/bg/bg_pc.webp");
	}
}

/* =========================
   SP / webp
========================= */
@supports (background-image: image-set(url("bg.webp") type("image/webp"))) {
	@media only screen and (max-width: 920px) {
		.parallax::before {
			background-image: url("/images/recruit/new/interview/bg/bg_sp.webp");
		}
	}
}

.interview__experiences-logo {
	width: 100%;
	display: none;
}
.interview__experiences-container {
	padding: 10% 0 20%;

	@media only screen and (max-width: 920px) {
		padding: 10% 0 30%;
	}
}
.interview__experiences-profile-image {
	width: 25%;
	margin: 0 auto 7%;

	@media only screen and (max-width: 920px) {
		width: 70%;
		margin: 0 auto 7%;
	}

	img {
		width: 100%;
		vertical-align: bottom;
	}
}
.interview__experiences-profile {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-items: center;
	gap: 3vw;
	width: 77%;
	margin: 0 auto 25%;

	@media only screen and (max-width: 920px) {
		width: 88%;
		grid-template-columns: repeat(1, 1fr);
		gap: 30vw;
		margin: 0 auto 45%;
	}
}

.interview__experiences-profile-card {
	background: #fff;
	padding: 7%;
	box-shadow: 0 0 8px #c4f995;
	border-radius: 65px;

	@media only screen and (max-width: 920px) {
		padding: 7%;
		border-radius: 65px;
	}

	.name {
		color: #0062ff;
		text-align: center;
		font-weight: 600;
		font-size: calc(37 * 100vw / 1920);
		letter-spacing: 0.2vw;

		@media (max-width: 920px) {
			font-size: calc(50 * 100vw / 920);
		}
	}

	.text {
		font-size: calc(22.5 * 100vw / 1920);
		line-height: 2;
		letter-spacing: 0.2vw;

		@media (max-width: 920px) {
			font-size: calc(35 * 100vw / 920);
			letter-spacing: 0.3vw;
			line-height: 1.5;
		}
	}

	img {
		width: 100%;
		margin-bottom: 4%;
	}
}

.interview__experiences-question {
	background: linear-gradient(to bottom, #05b9e0, #30d4e4);
	border-left: 1.4vw solid yellow;
	color: #fff;
	padding: 10% 0 15%;
	display: flex;
	flex-flow: column;
	gap: calc(140 * 100vw / 1920);
	position: relative;

	@media (max-width: 920px) {
		border-left: 3vw solid yellow;
		padding: 15% 5% 25% 3%;
		gap: calc(100 * 100vw / 920);
	}

	.question-image {
		width: 25%;
		position: absolute;
		top: -0.5%;
		left: 50%;
		transform: translate(-50%, -50%);

		@media only screen and (max-width: 920px) {
			top: -0.3%;
			width: 70%;
		}

		img {
			width: 100%;
			vertical-align: bottom;
		}
	}

	.question-cell {
		width: 78%;
		margin: auto;
		padding-right: 0.4%;
		box-sizing: border-box;

		@media (max-width: 920px) {
			width: 100%;
		}

		.question-title {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			color: yellow;
			font-size: calc(31 * 100vw / 1920);
			letter-spacing: 0.3vw;
			font-weight: 600;

			@media (max-width: 920px) {
				align-items: flex-start;
				font-size: calc(40 * 100vw / 920);

			}

			.image {
				width: 6%;

				@media (max-width: 920px) {
					width: 13%;
				}
			}

			img {
				width: 100%;
				vertical-align: bottom;
			}

			p {
				width: 92%;
				margin: 0;

				@media (max-width: 920px) {
					width: 83%;
				}
			}
		}
	}

	.question-box-wrap {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		margin-top: 6%;

		@media (max-width: 920px) {
			margin-top: 4%;
		}

		.question-box {
			width: 100%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			@media (max-width: 920px) {
				flex-flow: column;
				row-gap: 1vw;
			}
		}

		.icon {
			width: 8%;

			@media (max-width: 920px) {
				width: 18%;
			}

			img {
				width: 100%;
			}

		}
		.comment {
			width: 89.5%;
			background: #fff;
			color: #565656;
			padding: 3%;
			border-radius: 55px;
			border: 1px solid #c4f995;
			box-sizing: border-box;
			font-size: calc(22.5 * 100vw / 1920);
			line-height: 2;
			letter-spacing: 0.2vw;

			@media (max-width: 920px) {
				width: 100%;
				font-size: calc(35 * 100vw / 920);
				letter-spacing: 0.3vw;
				padding: 7% 7%;
				border-radius: 55px;
				line-height: 1.5;

			}
		}
	}

	.question-image-bottom {
		width: 45%;
		position: absolute;
		bottom: 0.67%;
		right: 2%;
		transform: translateY(50%);

		@media only screen and (max-width: 920px) {
			width: 95%;
			bottom: 0.26%;
			left: 50%;
			transform: translate(-50%, 50%);
		}

		img {
			width: 100%;
			vertical-align: bottom;
		}
	}

}

.fadeUp {
	transform: translate3d(0, 50px, 0);
	transition: 1s;
	opacity: 0;
}
.fadeUp.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

.fadeUpThanks {
	opacity: 0;
}
.fadeUpThanks.animated {
	animation: fadeUpThanks 800ms ease-in-out forwards;

}

@keyframes fadeUpThanks {
	0% {
		transform: translateY(calc(50% + 50px)) scale(0);
		opacity: 0;
	}
	100% {
		transform: translateY(50%) scale(1);
		opacity: 1;
	}
}
@media only screen and (max-width: 920px) {
	@keyframes fadeUpThanks {
		0% {
			transform: translate(-50%, calc(50% + 50px)) scale(0);
			opacity: 0;
		}
		100% {
			transform: translate(-50%, 50%) scale(1);
			opacity: 1;
		}
	}
}

.interview__experiences-entry {
	a {
		display: block;
	}
	img {
		width: 100%;
		vertical-align: bottom;
	}
}