@charset "utf-8";

/* ==========================================================================
   社員インタビュー 詳細ページ
   --------------------------------------------------------------------------
   index.html の #voice（採用サイトの l-interview を移植したセクション）から
   遷移してくるページ。配色・見出しの作りはそちらに合わせている。
     背景 #E5E5E5 ／ 見出し・本文の紺 #090909 ／ アクセントの赤 #E21F00
   本文の内容は win-cube-holdings.co.jp/recruit/interview/ の各詳細ページに準拠。
   ボタン・フッター・ナビゲーションは持たせず、インタビュー本文のみで構成する。
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	background-color: #E5E5E5;
	color: #222222;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic,
		"ヒラギノ角ゴ ProN", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 1.6rem;
	line-height: 1.9;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* スマホだけで効かせたい改行。PCでは1行に収まるが、
   画面が狭いと不自然な位置で折り返す見出し・キャッチに使う。 */
br.sp {
	display: none;
}

.iv {
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
	padding: 9rem 0 12rem;
}

/* ---- ページ見出し ----
   LPの #voice と同じ組み方（ほぼ黒＋先頭文字だけ赤）。
   詰め気味の字間と大きめのサイズで、見出しとして立たせる。 */

.iv-head {
	margin-bottom: 8rem;
	padding-bottom: 3.4rem;
	border-bottom: 1px solid #c9c9c9;
}

.iv-head__title {
	margin: 0;
	color: #090909;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(46px, 9vw, 120px);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: .95;
	text-transform: uppercase;
}

.iv-head__title .accent {
	color: #E21F00;
}

.iv-head__sub {
	margin: 1.4rem 0 0;
	color: #090909;
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 700;
	letter-spacing: .14em;
}

/* ---- プロフィール ----
   写真の上に赤地のキャッチを重ね、氏名は赤の短い罫線で受ける。 */

.iv-profile {
	margin-bottom: 11rem;
	background-color: #ffffff;
}

.iv-profile__photo {
	position: relative;
}

.iv-profile__photo img {
	aspect-ratio: 1000/598;
	object-fit: cover;
}

.iv-profile__catch {
	position: absolute;
	z-index: 2;
	left: 2.8rem;
	bottom: 2rem;
	margin: 0;
	color: #ffffff;
	font-size: clamp(23px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.95;
}

.iv-profile__catch span {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: .4rem 1.6rem .9rem;
	background-color: #E21F00;
}

.iv-profile__body {
	padding: 3.4rem 3.8rem 3.8rem;
}

.iv-profile__name {
	position: relative;
	margin: 0;
	padding-bottom: 1.6rem;
	color: #090909;
	font-size: clamp(25px, 2.6vw, 34px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.4;
}

.iv-profile__name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4.4rem;
	height: 3px;
	background-color: #E21F00;
}

.iv-profile__meta {
	margin: 1.6rem 0 0;
	color: #555555;
	font-size: clamp(13px, 1.3vw, 15px);
	font-weight: 700;
	letter-spacing: .12em;
}

/* ---- 質問ブロック ----
   写真とテキストを左右に並べ、ブロックごとに左右を入れ替えてリズムを作る。
   写真はトリミングせず元の横長（3:2）のまま。
   本文の方が背が高いため写真の下に空きが出るが、
   縦長トリミング・float での回り込みはいずれも副作用（見切れ／行長57字）が
   大きいため採らず、2カラムのまま素直に組んでいる。
   通し番号は CSS カウンタで振っているので、HTML側に番号は持たせない。 */

.iv-qa {
	counter-reset: qa;
}

.iv-qa__item {
	display: flex;
	/* 中央揃えではなく上端揃え。テキストの1行目と写真の上辺を合わせる */
	align-items: flex-start;
	gap: 5%;
	margin-bottom: 10rem;
	counter-increment: qa;
}

/* 既定は1枚目が写真右スタート */
.iv-qa__item:nth-child(odd) {
	flex-direction: row-reverse;
}

/* 写真を左から始めたいページ用（ページ側で .iv-qa--left を付ける） */
.iv-qa--left .iv-qa__item:nth-child(odd) {
	flex-direction: row;
}

.iv-qa--left .iv-qa__item:nth-child(even) {
	flex-direction: row-reverse;
}

.iv-qa__item:last-child {
	margin-bottom: 0;
}

.iv-qa__photo {
	flex: 0 0 42%;
}

.iv-qa__photo img {
	aspect-ratio: 1500/1000;
	object-fit: cover;
}

.iv-qa__body {
	flex: 1;
	min-width: 0;
}

/* 質問は見出しへの導入。赤のままだと下の黒の見出しより目立って
   階層が逆転するため、グレー（5.92:1）に落とし、
   赤は行頭の通し番号だけに残す。 */
.iv-qa__q {
	display: flex;
	align-items: baseline;
	gap: 1.4rem;
	margin: 0;
	color: #555555;
	font-size: clamp(14px, 1.4vw, 16px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
}

.iv-qa__q::before {
	content: counter(qa, decimal-leading-zero);
	flex: none;
	color: #E21F00;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

.iv-qa__h {
	margin: 1.4rem 0 2.4rem;
	color: #090909;
	font-size: clamp(23px, 2.4vw, 32px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.45;
	text-wrap: balance;
}

/* 本文。元データは段落の区切りが <br><br> だったので <p> に分けてある。
   連続する段落の間に余白を取り、読みの区切りを作る。 */
.iv-qa__text {
	margin: 0 0 1.8rem;
	font-size: clamp(16px, 1.5vw, 17px);
	line-height: 2.1;
}

.iv-qa__text:last-child {
	margin-bottom: 0;
}

/* ---- 締めのブロック ----
   本人の「これから」を語る結び。Q&Aと同じ地色だと続きに見えるので、
   白地のカードにして上辺に赤の太罫を入れ、面として切り分けている。
   紺ベタも試したが、長い本文を白抜きで読ませると視認性が落ちるため採用しない。 */

.iv-end {
	margin-top: 10rem;
	padding: 0 0 4.4rem;
	border-top: 6px solid #E21F00;
	background-color: #ffffff;
}

.iv-end__photo img {
	aspect-ratio: 1000/598;
	object-fit: cover;
}

.iv-end__title {
	margin: 3.4rem 0 2.6rem;
	color: #090909;
	font-size: clamp(23px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1.45;
	text-wrap: balance;
	text-align: center;
}

.iv-end__body {
	padding: 0 4.4rem;
}

.iv-end__body p {
	margin: 0 0 1.8rem;
	font-size: clamp(16px, 1.5vw, 17px);
	line-height: 2.1;
}

.iv-end__body p:last-child {
	margin-bottom: 0;
}

/* ---- スマホ ---- */

@media screen and (max-width: 768px) {
	.iv {
		width: 92%;
		padding: 8vw 0 14vw;
	}

	br.sp {
		display: inline;
	}

	.iv-head {
		margin-bottom: 10vw;
		padding-bottom: 5vw;
	}

	.iv-profile {
		margin-bottom: 14vw;
	}

	.iv-profile__catch {
		left: 1.4rem;
		bottom: 1.2rem;
		line-height: 1.9;
	}

	.iv-profile__catch span {
		padding: .2rem .9rem .6rem;
	}

	.iv-profile__body {
		padding: 2.4rem 2.2rem 2.6rem;
	}

	/* スマホは横に並べる幅がないので縦積みに戻す */
	.iv-qa__item {
		display: block;
		margin-bottom: 16vw;
	}

	.iv-qa__body {
		padding-top: 2.6rem;
	}

	.iv-qa__h {
		margin: 1.2rem 0 1.8rem;
	}

	.iv-end {
		margin-top: 14vw;
		padding-bottom: 2.6rem;
	}

	.iv-end__title {
		margin: 2.6rem 0 1.8rem;
	}

	.iv-end__body {
		padding: 0 2.2rem;
	}
}