@charset "UTF-8";

/* interview lead
----------------------------------------------- */
.interview-lead {
	padding: 80px 40px 60px;
}

.interview-lead-title {
	padding: 0 calc(var(--page-section-size) / 10) calc(var(--page-section-size) / 10);
	font-size: var(--page-section-size);
	font-weight: 400;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
}

.interview-lead-catchcopy {
	font-size: 17px;
	font-weight: 400;
	color: #233344;
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin-bottom: 24px;
}

.interview-lead-text {
	font-size: 15px;
	line-height: 2;
	color: rgba(44, 42, 38, 0.75);
	letter-spacing: 0.05em;
}

/* 実例表（年収アップ実績）
----------------------------------------------- */
.interview-results {
	position: relative;
	padding: 0 40px 140px;
}

.interview-results::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw - 1px), 0 100%);
	-webkit-clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw - 1px), 0 100%);
}

/* 下：面談フロー（.interview-flowと同じrgba(44,42,38,0.6)）へ斜めに繋げる。
   ::beforeを::afterの領域だけくり抜いて重なりをなくしているため、同じ色をそのまま使える */
.interview-results::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: rgba(44, 42, 38, 0.6);
	clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}

.interview-results-inner {
	position: relative;
	z-index: 1;
	padding-top: calc(5vw + 80px);
}

.interview-results-title {
	font-size: var(--page-section-size);
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-bottom: 40px;
	text-align: center;
}

.interview-results-table {
	width: 100%;
	border-collapse: collapse;
}

.interview-results-table th,
.interview-results-table td {
	padding: 20px;
	border-top: 1.5px solid rgba(44, 42, 38, 0.12);
	font-size: 15px;
	text-align: center;
	vertical-align: middle;
}

.interview-results-table thead th {
	border-top: none;
	font-size: 13px;
	color: rgba(44, 42, 38, 0.5);
	letter-spacing: 0.08em;
	font-weight: 400;
}

.interview-results-table tbody tr:last-child th,
.interview-results-table tbody tr:last-child td {
	border-bottom: 1.5px solid rgba(44, 42, 38, 0.12);
}

.interview-results-table th[scope="row"] {
	color: #2c2a26;
	font-weight: 400;
}

.interview-results-table .is-up {
	color: #233344;
	font-weight: 400;
}

.interview-results-table .is-up::before {
	content: '↑ ';
}

/* 記事カード一覧
----------------------------------------------- */
.interview-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 80px;
}

.interview-card {
	display: block;
	transition: opacity 0.25s ease;
}

.interview-card:hover {
	opacity: 0.75;
}

.interview-card-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 20px;
}

.interview-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.interview-card:hover .interview-card-image img {
	transform: scale(1.05);
}

.interview-card-category {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #233344;
	border: 1px solid #233344;
	padding: 3px 10px;
	margin-bottom: 12px;
}

.interview-card-title {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: #2c2a26;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}

.interview-card-date {
	font-size: 12px;
	color: rgba(44, 42, 38, 0.45);
	letter-spacing: 0.04em;
}

/* 面談フロー4ステップ
----------------------------------------------- */
.interview-flow {
	position: relative;
	background: rgba(44, 42, 38, 0.6);
	padding: calc(5vw + 80px) 40px calc(5vw + 80px);
}

/* 下：フッターと同色（#233344）で斜めに繋げる */
.interview-flow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: #233344;
	clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
}

.interview-flow-title {
	font-size: var(--page-section-size);
	font-weight: 400;
	color: #f4f1ea;
	letter-spacing: 0.08em;
	text-align: center;
	margin-bottom: 50px;
}

.interview-flow-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.interview-flow-item {
	text-align: center;
	color: #f4f1ea;
}

.interview-flow-number {
	font-size: 32px;
	font-family: 'EB Garamond', serif;
	font-style: normal;
	color: rgba(244, 241, 234, 0.4);
	line-height: 1;
	margin-bottom: 16px;
}

.interview-flow-item-title {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}

.interview-flow-item-text {
	font-size: 13px;
	line-height: 1.8;
	color: rgba(244, 241, 234, 0.65);
	letter-spacing: 0.04em;
}

/* SP
----------------------------------------------- */
@media screen and (max-width: 767px) {
	.interview-lead { padding: 50px 16px 40px; }

	.interview-results {
		padding: 0 16px 90px;
	}

	.interview-results::before {
		clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw - 1px), 0 100%);
		-webkit-clip-path: polygon(0 8vw, 100% 0, 100% calc(100% - 8vw - 1px), 0 100%);
	}

	.interview-results::after {
		clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
		height: calc(8vw + 1px);
	}

	.interview-results-inner {
		padding-top: calc(8vw + 50px);
	}

	.interview-results-table th,
	.interview-results-table td {
		padding: 12px 6px;
		font-size: 12px;
	}

	.interview-list {
		grid-template-columns: 1fr;
		gap: 30px;
		margin-top: 50px;
	}

	.interview-flow {
		padding: calc(8vw + 50px) 16px calc(8vw + 50px);
	}

	.interview-flow::after {
		clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
		height: calc(8vw + 1px);
	}

	.interview-flow-list {
		grid-template-columns: 1fr 1fr;
		gap: 30px 20px;
	}
}