@charset "UTF-8";
/**
 * インタビュー詳細(Interview)ページ固有スタイル。
 * ヒーロー / CAREER・WORK・CULTURE・メッセージ / More Stories / 一覧に戻る。
 * 共通トークン・ヘッダー・フッター・ページ見出しはcommon.css。
 * Figma:PC 1440 / SP 390。
 *
 * Q&Aは管理画面(ACF想定)で追加・削除される前提。縦の間隔はブロック間gapと
 * 各ブロック内のmargin-topだけで組み、Q&Aの増減でリズムが崩れないようにする。
 */

.interview-detail {
	--u: var(--u-fix);
	/* 本文ブロックの左右インセット。全幅写真の左端がこれで決まる(設計116.5)。
	   ヒーローだけは設計が117で、1px外側にある。 */
	--iv-inset: 116;
	--accent-grad: var(--grad-person);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-bottom: calc(150 * var(--u));
}

.iv-defs {
	position: absolute;
	width: 0;
	height: 0;
}

/**
 * ヒーロー(番号+氏名+キャッチ+プロフィール / 右に動画枠がブリード)。
 */
.iv-hero {
	margin-top: calc(59 * var(--u));
	display: grid;
	/* 1440では画像893.5が右へブリードし、テキスト列は残り(padding117+最小400)を使い切る。
	   中間幅では画像側を縮め、氏名が1行で収まる最小幅(400)までテキストを確保する。 */
	grid-template-columns: minmax(calc(400 * var(--u)), 1fr) minmax(0, calc(893.5 * var(--u)));
	align-items: center;
	column-gap: 0;
	/* 設計のヒーローだけ左端が117(本文ブロックの--iv-insetとは1px違う)。 */
	padding-left: calc(117 * var(--u));
}

.iv-hero__body {
	/* テキスト塊を画像中央より上へ(設計:テキスト中心が画像中心の3.71px上)。
	   align-items:centerのためmargin-bottomの半分だけ持ち上がる=設計差の2倍を指定する。 */
	margin-bottom: calc(7.42 * var(--u));
}

.iv-hero__label {
	display: flex;
	/* 設計は2つの行boxの下端を揃える(01とInterviewはlhが1と1.2で違い、baselineは1.4ズレている)。
	   baseline揃えにすると設計どおりのグリフ位置にならないためflex-endで下端を合わせる。 */
	align-items: flex-end;
	gap: calc(10 * var(--u));
	margin: 0;
	font-family: var(--ff-mont);
	font-weight: 600;
	/* 字間は設計が各文字サイズの2%。emはその要素のfont-sizeで解決されるため、
	   親(font-size継承16px)に置くと0.32pxに固まって子へ長さで継承される。子で指定する。 */
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.iv-hero__label-en {
	font-size: max(1.2rem, calc(35 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.iv-hero__label-no {
	font-size: max(1.2rem, calc(50 * var(--u)));
	line-height: 1;
	letter-spacing: 0.02em;
}

/* 職種。設計は34だが依頼で1段落とす(SPの26に対する縮小率も揃える)。 */
.iv-hero__name {
	margin: calc(40 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(30 * var(--u)));
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.iv-hero__catch {
	margin: calc(40 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: calc(33 / 22);
}

.iv-hero__meta {
	margin: calc(40 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.6;
}

.iv-hero__media {
	aspect-ratio: 893.5 / 746;
	/* 設計の傾いた葉型フレーム(PC/SP共通の正規化clip-path、右へブリード)。 */
	clip-path: url(#iv-hero-clip);
	background: #eee;
}

.iv-hero__media img,
.iv-hero__media video,
.iv-block__media img,
.iv-block__media video,
.iv-story__media img,
.iv-story__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * 本文ブロック(CAREER / WORK / CULTURE / メッセージ)。
 * X Talkのトピックと同じ単列組み。本文列720を中央に置き、写真はその下へ積む。
 * 写真の幅は本文幅(720)と全幅(1200)の2種で、全幅はACFのside=fullが選ぶ。
 */
.iv-block {
	/* ブロック間は設計の枠間150 − 和題の行boxが枠上端より1.5px上に出る分 = 148.5(独立3箇所で収束)。 */
	margin-top: calc(148.5 * var(--u));
	padding-inline: calc(var(--iv-inset) * var(--u));
}

.iv-block__text {
	width: min(calc(720 * var(--u)), 100%);
	margin-inline: auto;
}

/* 本文の写真はX Talkのトピック写真と同じ枠(720×480)で切り抜く。 */
.iv-block__media {
	width: min(calc(720 * var(--u)), 100%);
	margin: calc(60 * var(--u)) auto 0;
	aspect-ratio: 720 / 480;
	overflow: hidden;
	background: #eee;
}

/* 全幅の写真。枠比はX Talkの区切り写真と同じで、幅は左右インセットを除いたコンテンツ全幅。 */
.iv-block--full .iv-block__media {
	width: auto;
	margin-top: calc(150 * var(--u));
	aspect-ratio: 1200 / 564.4;
}

.iv-head {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding-bottom: calc(20 * var(--u));
	border-bottom: 1px solid var(--c-black);
}

.iv-head__en {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(32 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.iv-head__div {
	align-self: center;
	width: 1px;
	height: calc(28 * var(--u));
	margin: 0 calc(23 * var(--u));
	background: var(--c-black);
}

.iv-head__ja {
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(28 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* CULTUREは和題が細字+英字(ADDIX)混在。 */
.iv-block--lg .iv-head__ja {
	font-weight: 500;
}

.iv-block--lg .iv-head__ja [lang="en"] {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: calc(29 / 28 * 1em);
	/* 和題より大きいこのspanが親のline-heightを継承すると行boxが2.5px膨らみ、
	   以降の余白が全てズレる(設計はCAREERもCULTUREも見出し→リードが119.2で同一)。
	   インラインのグリフ位置はbaselineで決まりline-heightは行box高にしか効かないため、
	   1へ落としても字は動かず行boxだけが和題どおりに戻る。 */
	line-height: 1;
}

.iv-sub {
	position: relative;
	margin: calc(60 * var(--u)) 0 0;
	padding-left: calc(38 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 2;
}

.iv-sub::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(22 * var(--u));
	height: calc(22 * var(--u));
	border-radius: 50%;
	background: var(--accent-grad);
	transform: translateY(-50%);
}

/* Q&A一覧:ブロック間はgapのみで持ち、動画無しブロックでも増減に強くする。 */
.iv-qa-list {
	margin: calc(60 * var(--u)) 0 0;
	display: flex;
	flex-direction: column;
	gap: calc(60 * var(--u));
}

.iv-qa__q {
	position: relative;
	margin: 0;
	padding-left: calc(75 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(20 * var(--u)));
	line-height: 1.6;
}

.iv-qa__q::before {
	content: "";
	position: absolute;
	left: 0;
	/* 横線は1行目の中央に置く。中央=行高の半分なので line-height:1.6→0.8em。
	   lg(line-height:2)とSP(同2)は1emで上書き。em基準のため字送り変更に自動追従。 */
	top: 0.8em;
	width: calc(59 * var(--u));
	height: 1px;
	background: var(--c-black);
}

.iv-qa__a {
	margin: calc(30 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.iv-qa__a p {
	margin: 0;
}

/**
 * 本文中のリンク。設計に指定が無いため色は本文のまま、下線だけで示す。
 * 共通CSSのaはtext-decoration:noneなのでここで戻す。
 * 和文は下端まで字面があるため、下線はoffsetで少し離す。
 */
.iv-qa__a a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* hoverでは下線を外す。線を太らせると文字が動いて見えるため、反転で反応を示す
   (共通CSSのopacity0.6と合わせて変化が分かる)。 */
.iv-qa__a a:hover {
	text-decoration: none;
}

.iv-qa__a a:focus-visible {
	outline: 2px solid var(--c-black);
	outline-offset: calc(4 * var(--u));
}

.iv-qa__a p + p {
	margin-top: calc(30 * var(--u));
}

.iv-block--lg .iv-qa__q {
	font-weight: 500;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 2;
}

.iv-block--lg .iv-qa__q::before {
	top: 1em;
}

/* メッセージだけ見出しが無く、上端が22px/行間2の質問。グリフは箱上端から6.0px下(半行送り)に始まり、
   見出しを持つ他ブロックの0.5pxより深い。前ブロックからの視覚間隔を他と同じ149.0に揃えるため差の5.5を詰める。 */
.iv-block--message {
	margin-top: calc(143 * var(--u));
}

.iv-block--message .iv-qa-list {
	margin-top: 0;
}

/**
 * More Stories(関連する人物カード:Swiperカルーセル)。
 * カプセル写真+氏名+タグ。スライドは固定幅でauto配置し、左右端の矢印で送る。
 */
.iv-more {
	position: relative;
	margin-top: calc(150 * var(--u));
}

.iv-more__title {
	margin: 0;
	text-align: center;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(30 * var(--u)));
	line-height: 1.5;
}

/* スライダーは4枚ぶんの幅に絞って中央寄せ(設計:先頭カードx234=margin179+padding55)。
   5枚目以降はSwiperのoverflowで隠れ、矢印(左右の余白)で送る。
   paddingでクリップ境界を外へ55広げ、カプセルより長い1行職種名の左右はみ出しが端で
   切れないようにする(カード間ギャップ77未満なので隣カードは覗かない。合計234は
   margin時と同じ=カード位置・Swiper計算幅は不変)。 */
.iv-more__slider {
	margin-top: calc(60 * var(--u));
	margin-inline: calc(179 * var(--u));
	padding-inline: calc(55 * var(--u));
}

.iv-more__slider .swiper-slide {
	width: calc(185 * var(--u));
	height: auto;
}

/* スライドは最も高いカードへ伸びる。リンクをその高さいっぱいにして、タグを下端へ送る。 */
.iv-story__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	text-align: center;
}

.iv-story__media {
	width: 100%;
	aspect-ratio: 185 / 290;
	border-radius: 999px;
	overflow: hidden;
	background: #eee;
}

.iv-story__name {
	/* 職種名は自動折り返しせず、テンプレートが入れる<br>位置でのみ改行。max-content+親のalign-items:centerで各行をカプセル中央に揃える。 */
	width: max-content;
	/* 下のautoが余りを吸い、職種名が1行のカード(AI推進)でもタグは下端で揃う。 */
	margin: calc(30 * var(--u)) 0 auto;
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
}

.iv-story .card-tag {
	margin-top: calc(18 * var(--u));
}

/* 基本は左向き(←)。右向き(→)は--nextでscaleX(-1)反転して共用する。 */
.iv-more__arrow {
	position: absolute;
	/* タイトル行box45 + スライダーmargin60 + カード写真の半分145 = 写真の縦中央。 */
	top: calc((45 + 60 + 145) * var(--u));
	transform: translateY(-50%);
	width: calc(23 * var(--u));
	height: calc(12 * var(--u));
	background: no-repeat center / contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 12'%3E%3Cpath d='M7 1L1 6L7 11M1 6L23 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transition: opacity 0.2s ease;
}

/* 見た目は23×12のままクリック領域を40×40に拡張(WCAG 2.5.8のターゲットサイズ確保)。 */
.iv-more__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	transform: translate(-50%, -50%);
}

.iv-more__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

.iv-more__arrow--prev {
	left: calc(131 * var(--u));
}

.iv-more__arrow--next {
	right: calc(132 * var(--u));
	transform: translateY(-50%) scaleX(-1);
}

/* 中間幅(769〜1439):設計の4枚中央寄せ(余白234)は1440専用。それ未満では
   スライダーをcontent幅まで広げてカード枚数を増やし、矢印を画面端へ寄せる
   (余白234固定だとスライダーが細くなり右矢印が空白に浮くため)。 */
@media (min-width: 769px) and (max-width: 1439px) {
	.iv-more__slider {
		margin-inline: calc((var(--iv-inset) - 55) * var(--u));
		padding-inline: calc(55 * var(--u));
	}

	/* 矢印は外側の余白(=クリップ端までの約61px)に収め、右で覗くカードと重ならないようにする。 */
	.iv-more__arrow--prev {
		left: calc(19 * var(--u));
	}

	.iv-more__arrow--next {
		right: calc(19 * var(--u));
	}
}

/**
 * 一覧に戻る。
 */
.iv-back {
	display: flex;
	justify-content: center;
	margin-top: calc(90 * var(--u));
}

.iv-back__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(275 * var(--u));
	height: calc(45 * var(--u));
	border-radius: calc(22.5 * var(--u));
	background: var(--c-black);
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(18 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--c-white);
}

.iv-story__link:focus-visible,
.iv-back__link:focus-visible,
.iv-more__arrow:focus-visible {
	outline: 2px solid var(--c-black);
	outline-offset: calc(4 * var(--u));
}

/* ハイコントラスト時、グラデーション文字が透明のまま消えないよう素色でフォールバック。 */
@media (forced-colors: active) {
	.iv-hero__label {
		background: none;
		color: CanvasText;
	}
}

/**
 * 中間幅(769〜1024px):ヒーローを共通section-headingと同じ閾値で縦積みへ。
 * 本文ブロックは1440でも単列なので追随は要らない。
 */
@media (min-width: 769px) and (max-width: 1024px) {
	.iv-hero {
		grid-template-columns: 1fr;
		row-gap: calc(60 * var(--u));
		/* 縦積み時は画像をSPと同様に全幅ブリード(右端まで到達)させ、本文のみインセットする。 */
		padding-inline: 0;
	}

	/* 縦積みでは中央寄せ調整(margin-bottom)は不要なので打ち消す。 */
	.iv-hero__body {
		margin-bottom: 0;
		padding-inline: calc(var(--iv-inset) * var(--u));
	}
}

/**
 * SP(Figma:390基準・純vw)。
 * 写真は本文の下。全幅の写真だけガター分外へ出して画面幅へ届かせる。
 */
@media (max-width: 768px) {
	.interview-detail {
		--u: var(--u-sp);
		--iv-inset: 25;
		padding-bottom: calc(100 * var(--u));
	}

	.iv-hero {
		margin-top: calc(84 * var(--u));
		grid-template-columns: 1fr;
		/* 設計:葉型の右上が「R.H／2020年入社」と同じ高さ=テキストと画像の間はほぼ0。 */
		row-gap: 0;
		padding-inline: 0;
	}

	.iv-hero__body {
		margin-bottom: 0;
		padding-inline: calc(var(--iv-inset) * var(--u));
	}

	/* 設計の葉型は本文と違い左25インセット+右ブリード(365幅)で、斜めなので本文に10.73重なる。
	   全幅(390)にすると高さが31伸びて以降のセクションが全部下へずれる。 */
	.iv-hero__media {
		margin-top: calc(-10.73 * var(--u));
		margin-left: calc(var(--iv-inset) * var(--u));
	}

	/* 設計はSPで字間を落とす(PCは0.02em)。サイズは設計26からPCと同率で落とす。 */
	.iv-hero__name {
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(23 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0;
	}

	.iv-hero__label-en {
		font-size: max(1.2rem, calc(25 * var(--u)));
	}

	.iv-hero__label-no {
		font-size: max(1.2rem, calc(40 * var(--u)));
		line-height: 0.95;
	}

	/* 設計はSPでキャッチを細字に落とす(PCは600)。 */
	.iv-hero__catch {
		margin-top: calc(20 * var(--u));
		font-weight: 500;
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 1.6;
	}

	.iv-hero__meta {
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(14 * var(--u)));
		line-height: 1.5;
	}

	.iv-block {
		margin-top: calc(80 * var(--u));
	}

	.iv-block__media {
		margin-top: calc(40 * var(--u));
	}

	/* 全幅の写真はインセット分だけ外へ出し、画面幅(390)まで届かせる。枠比もX Talkの区切り写真に揃える。 */
	.iv-block--full .iv-block__media {
		margin-top: calc(40 * var(--u));
		margin-inline: calc(-1 * var(--iv-inset) * var(--u));
		aspect-ratio: 390 / 183;
	}

	.iv-head__en {
		font-size: max(1.2rem, calc(24 * var(--u)));
	}

	/* 設計はSPで和題の字間を落とす(PCは0.02em)。 */
	.iv-head__ja {
		font-size: max(1.2rem, calc(22 * var(--u)));
		line-height: 1.5;
		letter-spacing: 0;
	}

	.iv-head__div {
		height: calc(20 * var(--u));
		margin: 0 calc(16 * var(--u));
	}

	/* 設計はSPでリードを太字+字間0.02emへ振る(PCは500/字間0)。見出し→リードの60はPCと同値。 */
	.iv-sub {
		padding-left: calc(30 * var(--u));
		font-weight: 600;
		font-size: max(1.2rem, calc(18 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0.02em;
	}

	.iv-sub::before {
		width: calc(18 * var(--u));
		height: calc(18 * var(--u));
	}

	.iv-qa__q {
		padding-left: calc(55 * var(--u));
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 2;
		letter-spacing: 0.02em;
	}

	.iv-qa__q::before {
		top: 1em;
		width: calc(40 * var(--u));
	}

	/* 設計のQ5・Q6の別扱い(500/22/lh2)はPCのみ。SPは全Qが同一書式なのでlgを戻す。 */
	.iv-block--lg .iv-qa__q {
		font-weight: 600;
		font-size: max(1.2rem, calc(16 * var(--u)));
	}

	/* 設計はSPで本文の字間を落とす(PCは0.02em)。Q→本文はSPだけ19(PCは30)。 */
	.iv-qa__a {
		margin-top: calc(19 * var(--u));
		font-size: max(1.2rem, calc(15 * var(--u)));
		line-height: 2;
		letter-spacing: 0;
	}

	.iv-qa__a p + p {
		margin-top: calc(24 * var(--u));
	}

	.iv-more {
		margin-top: calc(80 * var(--u));
	}

	.iv-more__slider {
		/* カルーセルは左19pxから始め(margin4+padding15=左端の職種名はみ出しを切らない)、右は画面端まで伸ばして3枚目を覗かせる。 */
		margin-inline: calc(4 * var(--u)) 0;
		padding-inline: calc(15 * var(--u)) 0;
	}

	.iv-more__slider .swiper-slide {
		width: calc(150 * var(--u));
	}

	/* 設計はSPで職種名に字間0.02emを与える(PCは0)。 */
	.iv-story__name {
		margin-top: calc(20 * var(--u));
		font-size: max(1.2rem, calc(18 * var(--u)));
		line-height: 1.4;
		letter-spacing: 0.02em;
	}

	/* SPは矢印を出さずスワイプで送る(設計準拠)。 */
	.iv-more__arrow {
		display: none;
	}

	.iv-back {
		margin-top: calc(65 * var(--u));
	}
}