/* ==========================================================================
   Interview Article Page (導入事例インタビュー記事)
   Template: page-interview-article.php
   Base PC: 1366px / Base SP: 375px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Wrapper
   -------------------------------------------------------------------------- */
.interview-article-page {
	background: #f0f4fb;
}

.interview-article {
	padding-bottom: min(calc(80 / 1366 * 100vw), 80px);
}

.interview-article__inner {
	max-width: min(calc(1126 / 1366 * 100vw), 1126px);
	margin: 0 auto;
	padding: min(calc(80 / 1366 * 100vw), 80px) min(calc(120 / 1366 * 100vw), 120px) 0;
}

@media (width <= 750px) {
	.interview-article {
		padding-bottom: calc(60 / 375 * 100vw);
	}

	.interview-article__inner {
		max-width: 100%;
		padding: calc(48 / 375 * 100vw) calc(20 / 375 * 100vw) 0;
	}
}

/* --------------------------------------------------------------------------
   Hero Section（シングルカラム: タイトル＋サービス説明）
   -------------------------------------------------------------------------- */
.interview-article__hero {
	padding-bottom: min(calc(48 / 1366 * 100vw), 48px);
}

@media (width <= 750px) {
	.interview-article__hero {
		padding-bottom: calc(32 / 375 * 100vw);
	}
}

/* --------------------------------------------------------------------------
   Client Name
   -------------------------------------------------------------------------- */
.interview-article__client-name {
	font-size: min(calc(14 / 1366 * 100vw), 14px);
	font-weight: 400;
	color: #6b7a99;
	letter-spacing: 0.04em;
	margin-bottom: min(calc(16 / 1366 * 100vw), 16px);
}

@media (width <= 750px) {
	.interview-article__client-name {
		font-size: calc(13 / 375 * 100vw);
		margin-bottom: calc(12 / 375 * 100vw);
	}
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.interview-article__title {
	font-size: min(calc(36 / 1366 * 100vw), 36px);
	font-weight: 700;
	color: #152a6d;
	line-height: 1.45;
	letter-spacing: 0;
	margin-bottom: min(calc(32 / 1366 * 100vw), 32px);
}

@media (width <= 750px) {
	.interview-article__title {
		font-size: calc(22 / 375 * 100vw);
		line-height: 1.5;
		margin-bottom: calc(20 / 375 * 100vw);
	}
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.interview-article__divider {
	border: none;
	border-top: 1px solid #c5cde8;
	margin: 0 0 min(calc(40 / 1366 * 100vw), 40px);
}

@media (width <= 750px) {
	.interview-article__divider {
		margin-bottom: calc(24 / 375 * 100vw);
	}
}

/* --------------------------------------------------------------------------
   Service Info Boxes
   -------------------------------------------------------------------------- */
.interview-article__service-boxes {
	display: flex;
	flex-direction: column;
	gap: min(calc(24 / 1366 * 100vw), 24px);
}

@media (width <= 750px) {
	.interview-article__service-boxes {
		gap: calc(20 / 375 * 100vw);
	}
}

.interview-article__service-box {
	display: flex;
	flex-direction: column;
	gap: min(calc(12 / 1366 * 100vw), 12px);
}

@media (width <= 750px) {
	.interview-article__service-box {
		gap: calc(10 / 375 * 100vw);
	}
}

/* Label — Box 1: セールスHR事業とは？ */
.interview-article__service-label--hr {
	display: inline-block;
	width: fit-content;
	background: linear-gradient(90deg, #152a6d 49.519%, #00f2fe 100%);
	color: #fff;
	font-size: min(calc(13 / 1366 * 100vw), 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: min(calc(7 / 1366 * 100vw), 7px) min(calc(14 / 1366 * 100vw), 14px);
	border-radius: 4px;
	white-space: nowrap;
}

@media (width <= 750px) {
	.interview-article__service-label--hr {
		font-size: calc(12 / 375 * 100vw);
		padding: calc(6 / 375 * 100vw) calc(12 / 375 * 100vw);
	}
}

/* Label — Box 2: セールスPitとは？ */
.interview-article__service-label--pit {
	display: inline-block;
	width: fit-content;
	background: linear-gradient(90deg, #152a6d 49.519%, #00f2fe 100%);
	color: #fff;
	font-size: min(calc(13 / 1366 * 100vw), 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: min(calc(10 / 1366 * 100vw), 10px) min(calc(16 / 1366 * 100vw), 16px);
	border-radius: 4px;
	line-height: 1.6;
}

.interview-article__service-label-sub {
	font-size: min(calc(12 / 1366 * 100vw), 12px);
	font-weight: 400;
}

@media (width <= 750px) {
	.interview-article__service-label--pit {
		font-size: calc(13 / 375 * 100vw);
		padding: calc(10 / 375 * 100vw) calc(14 / 375 * 100vw) calc(10 / 375 * 100vw) calc(16 / 375 * 100vw);
	}

	.interview-article__service-label-sub {
		display: block;
		font-size: calc(11 / 375 * 100vw);
	}
}

/* Description text */
.interview-article__service-desc {
	font-size: min(calc(15 / 1366 * 100vw), 15px);
	color: #333;
	line-height: 1.75;
	letter-spacing: 0.02em;
}

@media (width <= 750px) {
	.interview-article__service-desc {
		font-size: calc(14 / 375 * 100vw);
		line-height: 1.8;
	}
}

/* --------------------------------------------------------------------------
   Interview Content Area (WordPress editor content)
   -------------------------------------------------------------------------- */
.interview-article__content {
	background: #fff;
	border-radius: min(calc(16 / 1366 * 100vw), 16px);
	padding: min(calc(48 / 1366 * 100vw), 48px) min(calc(56 / 1366 * 100vw), 56px);
	margin-top: min(calc(40 / 1366 * 100vw), 40px);
}

@media (width <= 750px) {
	.interview-article__content {
		border-radius: calc(12 / 375 * 100vw);
		padding: calc(28 / 375 * 100vw) calc(16 / 375 * 100vw);
		margin-top: calc(24 / 375 * 100vw);
	}
}

/* Images within content */
.interview-article__content img {
	max-width: 100%;
	width: auto;
	height: auto;
	border-radius: min(calc(8 / 1366 * 100vw), 8px);
	box-shadow: min(calc(8 / 1366 * 100vw), 8px) min(calc(8 / 1366 * 100vw), 8px) 0 0 #152a6d;
	display: block;
	margin: min(calc(32 / 1366 * 100vw), 32px) auto;
}

@media (width <= 750px) {
	.interview-article__content img {
		border-radius: calc(6 / 375 * 100vw);
		box-shadow: calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) 0 0 #152a6d;
		margin: calc(20 / 375 * 100vw) 0;
	}
}

/* Headings — セクション見出し（ブロックエディタ: 見出しブロック H2/H3） */
.interview-article__content h2,
.interview-article__content h3,
.interview-article__content .wp-block-heading {
	font-size: min(calc(18 / 1366 * 100vw), 18px);
	font-weight: 700;
	color: #152a6d;
	line-height: 1.6;
	letter-spacing: 0;
	border-left: min(calc(4 / 1366 * 100vw), 4px) solid #152a6d;
	padding-left: min(calc(14 / 1366 * 100vw), 14px);
	margin: min(calc(48 / 1366 * 100vw), 48px) 0 min(calc(24 / 1366 * 100vw), 24px);
}

.interview-article__content h2:first-child,
.interview-article__content h3:first-child,
.interview-article__content .wp-block-heading:first-child {
	margin-top: 0;
}

@media (width <= 750px) {
	.interview-article__content h2,
	.interview-article__content h3,
	.interview-article__content .wp-block-heading {
		font-size: calc(16 / 375 * 100vw);
		border-left-width: calc(3 / 375 * 100vw);
		padding-left: calc(12 / 375 * 100vw);
		margin: calc(32 / 375 * 100vw) 0 calc(16 / 375 * 100vw);
	}
}

/* 質問行（ブロックスタイル「質問」ボタン、または追加CSSクラス: interview-q） */
.interview-article__content .is-style-interview-q,
.interview-article__content .interview-q {
	color: #152a6d;
	font-size: min(calc(15 / 1366 * 100vw), 15px);
	font-weight: 600;
	line-height: 1.75;
	letter-spacing: 0.02em;
	margin-top: min(calc(32 / 1366 * 100vw), 32px);
	margin-bottom: min(calc(4 / 1366 * 100vw), 4px);
}

@media (width <= 750px) {
	.interview-article__content .is-style-interview-q,
	.interview-article__content .interview-q {
		font-size: calc(14 / 375 * 100vw);
		margin-top: calc(24 / 375 * 100vw);
		margin-bottom: calc(4 / 375 * 100vw);
	}
}

/* Paragraphs (for interview answers) */
.interview-article__content p {
	font-size: min(calc(15 / 1366 * 100vw), 15px);
	color: #333;
	line-height: 1.85;
	letter-spacing: 0.02em;
	margin-bottom: min(calc(20 / 1366 * 100vw), 20px);
}

.interview-article__content p:last-child {
	margin-bottom: 0;
}

@media (width <= 750px) {
	.interview-article__content p {
		font-size: calc(14 / 375 * 100vw);
		line-height: 1.9;
		margin-bottom: calc(16 / 375 * 100vw);
	}
}

/* Strong / Bold within content */
.interview-article__content strong {
	font-weight: 700;
	color: #152a6d;
}

/* Figure (WordPress image block) */
.interview-article__content figure {
	margin: min(calc(32 / 1366 * 100vw), 32px) auto;
}

.interview-article__content figure img {
	margin: 0 auto;
}

.interview-article__content figcaption {
	font-size: min(calc(12 / 1366 * 100vw), 12px);
	color: #6b7a99;
	text-align: center;
	margin-top: min(calc(8 / 1366 * 100vw), 8px);
}

@media (width <= 750px) {
	.interview-article__content figure {
		margin: calc(20 / 375 * 100vw) 0;
	}

	.interview-article__content figcaption {
		font-size: calc(11 / 375 * 100vw);
		margin-top: calc(6 / 375 * 100vw);
	}
}