@charset "UTF-8";

#page-fv.interview.type-page {
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: block;
		width: 84rem;
		height: 64.6rem;
		border-radius: 0 0 18rem 0;
		background: rgba(1, 153, 208, 0.3);
		@media screen and (max-width: 767px) {
			width: 28.8rem;
			height: 24rem;
			border-radius: 0 0 6.4rem 0;
		}
	}
}

@media screen and (max-width: 1080px){
	.fv-img {
		width: 136rem !important;
	}
}

@media screen and (max-width: 767px){
	.fv-img {
		width: 35rem !important;
	}
}



.edit-area.interview {
	padding: 11.2rem 0 19.5rem;

	@media screen and (max-width: 767px) {
		padding: 6.5rem 0 5rem;
	}

	.common-list.interview {
		display: flex;
		flex-wrap: wrap;
		gap: 6rem;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			align-items: center;
			gap: 3.8rem;
		}
		& li {
			width: 64rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			& a {
				width: 100%;
				position: relative;
				.white-card {
					background-color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 60rem;
					height: 12.2rem;
					border-radius: 0 3rem 0 0;
					padding: 2.6rem 8.8rem 2.6rem 2.6rem;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					@media screen and (max-width: 767px) {
						width: 95%;
						padding: 2rem 5.8rem 2rem 2rem;
						height: 9.2rem;
					}
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 2.6rem;
						width: 3.2rem;
						height: 3.2rem;
						background: url("../../img/interview/interview-arrow.svg") no-repeat center/ contain;
						@media screen and (max-width: 767px) {
							width: 2.2rem;
							height: 2.2rem;
							right: 2rem;
						}
					}
					.card-title {
						font-family: "Noto Sans JP", sans-serif;
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 160%;
						letter-spacing: 0.05em;
						color: #000000;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
					}
				}
			}
		}
	}
}