@charset "UTF-8";

/* =========================
   HEADER
========================= */

header {
	position: relative;
	background: #234b81;
	min-height: 96px;
	overflow: hidden;
}

header h1 {
	position: fixed !important; /* absolute から fixed に変更 */
	top: 22px;
	left: 24px;
	z-index: 99999;
	margin: 0;
	width: 30vw;
	/*height: 3vw;*/
	background: url("../img/common/logow.svg") no-repeat left top / contain;
	overflow: hidden;
}

header h1 a {
	display: block;
	width: 100%;
	height: 100%;
}

header h1 span {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

@media only screen and (max-width: 769px) {
	header h1 {
		top: 0;
		left: 0;
		/*border: 1px solid #F00;*/
		/*margin-top: 2vw !important;*/
		width: 40vw !important; /*40vw*/
		height: 8vw !important; /*8vw*/
		/*margin-top: -8%;*/
		/*margin-left: 2vw;*/
		margin-top: 0 !important;
		margin-left: 0 !important;
	}
}

/* 既存の .recruit-btn は共通CSSを使用 */

.page-title {
	margin: 0;
}

.page-title--interview {
	position: relative;
	z-index: 2;
	padding: 46px 0 22px 0;
	text-align: center;
	background: url("../img/interview/h2_interview_page.svg") no-repeat center 28px / 420px auto;
	height: 90px;
}

.page-title--interview span {
	display: block;
	height: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

/* =========================
   PAGE
========================= */

.interview-page {
	margin-top: -70px !important;
	background: #f2f2f2;
}

/* =========================
   BLOCK
========================= */

.interview-block {
	width: 100%;
	background: #fff;
}

.interview-block + .interview-block {
	margin-top: 0;
}

/* =========================
   HERO
========================= */

.interview-hero {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 62% 38%;
	background: #234b81;
	color: #fff;
	align-items: stretch;
}

.interview-hero--reverse {
	grid-template-columns: 38% 62%;
}

/* INTERVIEW 2 は右画像・左情報なので、タイトル位置を戻す */
.interview-hero--reverse .interview-hero__title {
	left: 20vw;
}

.interview-hero--reverse .interview-hero__photo {
	order: 2;
}

.interview-hero--reverse .interview-hero__info {
	order: 1;
}

.interview-hero__photo {
	width: 100%;
	height: 100%;
}

.interview-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 右の青情報ブロック */
.interview-hero__info {
	position: relative;
	padding: 150px 56px 42px; /* タイトルが上にまたぐ分、上余白を増やす */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	min-height: 100%;
}

/* タイトルを画像にまたがせる */
.interview-hero__title {
	position: absolute;
	top: 54px;
	left: -100px; /* 右カラムから左へはみ出す */
	z-index: 3;
	margin: 0;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

.interview-hero__title span {
	display: block;
	height: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
}

.interview-hero__title--01 {
	width: 420px;
	height: 96px;
	background-image: url("../img/interview/h3_interview01.svg");
}

.interview-hero__title--02 {
	width: 420px;
	height: 96px;
	background-image: url("../img/interview/h3_interview02.svg");
}

@media only screen and (max-width: 769px) {
	.interview-hero__title--01 {
		background-image: url("../img/interview/h3_interview01_sp.svg");
		width: 80vw !important;
		background-position: center center;
	}

	.interview-hero__title--02 {
		background-image: url("../img/interview/h3_interview02_sp.svg");
		width: 80vw !important;
		background-position: center center;
	}
}


/* プロフィールは中央寄せ */
.interview-profile {
	width: 100%;
	max-width: 220px;
	margin: 0 auto;              /* ←中央寄せ */
	display: flex;
	flex-direction: column;
	align-items: center;         /* ←中央寄せ */
	text-align: left;
}

.interview-profile__thumb {
	margin: 30px 0 20px 0;
	width: 14vw !important;               /* ←画面に応じて拡大 */
	max-width: 300px;         /* ←PCで暴走防止 */
	min-width: 200px;          /* ←小さくなりすぎ防止 */
}

.interview-profile__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 769px) {
	.interview-profile__thumb {
		width: 50vw !important; 
		max-width: 300px;         /* ←PCで暴走防止 */
		min-width: 200px;          /* ←小さくなりすぎ防止 */
	}
}


.interview-profile__meta {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: #fff;
}

.interview-profile__meta strong {
	display: block;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	margin-top: 10px;
}

.interview-profile__meta small {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 6px;
	color: rgba(255,255,255,0.85);
}

/* =========================
   QA WRAP
========================= */

.interview-qa-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 44px 40px 52px;
	box-sizing: border-box;
	background: #fff;
}

.interview-qa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
	row-gap: 42px;
}

.interview-qa h4 {
	margin: 0 0 18px 0;
	font-size: 25px;
	line-height: 1.5;
	font-weight: 700;
	color: #1e4b96;
}

.interview-qa p {
	margin: 0 0 16px 0;
}

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

/* =========================
   RESPONSIVE
========================= */

@media only screen and (max-width: 769px) {
	header {
		min-height: 72px;
	}

	header h1 {
		top: 14px;
		left: 14px;
		width: 96px;
		height: 18px;
	}

	.page-title--interview {
		padding: 34px 0 14px 0;
		background-size: 220px auto;
		background-position: center 22px;
		height: 58px;
	}

	.interview-hero,
	.interview-hero--reverse {
		display: flex;
		flex-direction: column;
	}

	/* スマホは両方とも 青ブロック → 画像 */
	.interview-hero__info {
		order: 1;
		padding: 22px 22px 24px;
	}

	.interview-hero__photo {
		order: 2;
		width: 100%;
	}

	.interview-hero__photo img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.interview-hero__title {
		position: static;
		margin: 0 auto 18px;
		left: auto;
		top: auto;
	}

	.interview-hero__title--01,
	.interview-hero__title--02 {
		width: 210px;
		height: 56px;
	}

	.interview-profile {
		max-width: none;
		width: 100%;
		margin: 0 auto;
		align-items: center;
		text-align: left;
	}

	.interview-profile__thumb {
		width: 92px;
		margin-bottom: 12px;
	}

	.interview-profile__meta {
		font-size: 12px;
		text-align: center;
	}

	.interview-profile__meta strong {
		font-size: 22px;
	}

	.interview-qa-wrap {
		padding: 28px 22px 34px;
	}

	.interview-qa-grid {
		grid-template-columns: 1fr;
		row-gap: 50px;
	}

	.interview-qa h4 {
		font-size: 19px;
		margin-bottom: 12px;
	}
}

@media only screen and (max-width: 769px) {

	/* 青ブロックをヒーローサイズに */
	.interview-hero__info {
		order: 1;
		padding: 48px 22px 42px;
		min-height: 60vh;              /* ←ここが重要 */
		display: flex;
		flex-direction: column;
		justify-content: center;       /* 縦中央寄せ */
	}

	/* タイトルを少し大きく */
	.interview-hero__title--01,
	.interview-hero__title--02 {
		width: 260px;
		height: 72px;
		margin-bottom: 24px;
	}

	/* プロフィール全体を少し大きく */
	.interview-profile {
		max-width: none;
		width: 100%;
		margin: 0 auto;
		align-items: center;
		text-align: left;
	}

	.interview-profile__thumb {
		width: 120px;       /* ←大きく */
		margin-bottom: 18px;
	}

	.interview-profile__meta {
		font-size: 14px;
		line-height: 1.9;
	}

	.interview-profile__meta strong {
		font-size: 28px;
		margin-top: 10px;
	}

	.interview-profile__meta small {
		font-size: 13px;
		margin-top: 6px;
	}

	/* 下の画像も高さバランスを少し揃える */
	.interview-hero__photo img {
		width: 100%;
		/*height: 52vh;*/        /* ←ここも重要 */
		object-fit: cover;
	}
}



/* 英語テキストの先頭に区切り線を追加 */
.eng::before {
    content: "―――";
    display: block;      /* 線を独立した行にする */
    margin-bottom: 0.5em; /* 下の英文との間に少し隙間を作る */
    /*color: #999;*/         /* 線の色を少し薄くして馴染ませる（任意） */
    letter-spacing: 0.2em; /* 線の間隔を少し広げて綺麗に見せる（任意） */
}