@charset "UTF-8";
/**
 * 社長メッセージ(Message)ページ固有スタイル。
 * ヒーロー(声明+社長写真+Message) → Q&Aアコーディオン。
 * 共通トークン・ヘッダー・フッター・見出しはcommon.css。
 * Figma:PC 1440 / SP 390。
 *
 * PC(≥769px)はページを固定rem(--u-fix)で置き、フォント・余白は据え置き、幅が狭まったらバーを
 * 幅追従(width:min)で縮小する。ただしヒーローだけは重なりで組んだ合成のため相似縮小(--u-pc)にして、
 * 2カラムの位置関係をSPの分岐まで保つ。SP(≤768px)は純vw(--u-sp)。
 */

.message {
	--u: var(--u-fix);
	--grad-yellow: linear-gradient(180deg, #ffe02f 0%, #ffc21b 100%);
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	/* 最終Q&A下端(1526)からフッター上端(1676)までの余白。 */
	padding-bottom: calc(150 * var(--u));
}

.message .page-heading--message {
	--accent-grad: var(--grad-yellow);
}

/**
 * ヒーロー(声明 + 社長写真 + Message)。
 * 写真=右列、声明=左上、Message=左下。
 * MessageはDOM順(写真→Message)で写真の前面へ描画され、左列からはみ出して写真下端に重なる。
 * SP(≤768px)だけ縦積み(写真→Message→声明)へ切替える。
 *
 * ここだけページの固定rem(--u-fix)から相似縮小(--u-pc)へ切替える。重なりで組んだ合成のため
 * 一部だけ縮めると関係が崩れるが、丸ごと比例させれば設計の位置関係がそのまま保たれる。
 * 1440では--u-pcが1pxなので設計値と一致する。Q&Aはページの固定remのまま。
 */
.msg-hero {
	--u: var(--u-pc);
	display: grid;
	/* minmax(0,…)で左列が最小内容幅(はみ出すMessage)まで広がるのを防ぎ、写真列を設計位置に保つ。 */
	grid-template-columns: minmax(0, 1fr) calc(671 * var(--u));
	grid-template-areas:
		"lead  photo"
		"msg   photo";
	align-items: start;
	/* 声明と写真が接しないための最小の間隔。左列は設計で416あり声明は276しか使わないので、
	   ここを削っても写真の位置・寸法は動かない(1440の見た目は不変)。 */
	column-gap: calc(40 * var(--u));
	padding: 0 calc(172 * var(--u)) 0 calc(181 * var(--u));
}

.msg-hero__photo {
	grid-area: photo;
	width: calc(671 * var(--u));
	/* page-heading下端(区切り線353+1px)から設計の写真上端388まで。 */
	margin-top: calc(34 * var(--u));
	aspect-ratio: 671 / 415;
	overflow: hidden;
}

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

/**
 * 装飾の巨大題字(aria-hidden)。左列からはみ出して写真下端に重なる。
 * 下限remは付けず、狭幅でも伸ばさない。
 */
.msg-hero__title {
	grid-area: msg;
	justify-self: start;
	/* 設計の行box上端711 = 左列2行目の上端(page-heading下端354 + 声明の外形295)からの差分。 */
	margin: calc(62 * var(--u)) 0 calc(-18 * var(--u));
	/* background-clip:textの描画域は行box(=paddingボックス)まで。設計のlh1.2ならgのディセンダーは
	   収まるが余裕は4px弱しかないため、下へ広げて欠けを防ぐ。同値の負margin-bottomでフローは相殺する。 */
	padding-bottom: calc(18 * var(--u));
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: calc(96 * var(--u));
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	background-image: var(--grad-yellow);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.msg-hero__lead {
	grid-area: lead;
	justify-self: start;
	margin: calc(167 * var(--u)) 0 0 calc(9 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: calc(32 / 16);
	letter-spacing: 0.02em;
}

/**
 * ヒーローは自動高さ。Message行box下端(826.2)からQ&A開始(設計881)までの余白をQ&Aへ持たせる。
 */
.msg-qa {
	margin-top: calc(54.8 * var(--u));
}

/**
 * Q&A(社長への5問)。トリガー(質問バー)+パネル(回答)のアコーディオン。
 * バーは1100x113(SP 340x113)・角丸10・黒枠1px(strokeAlign:INSIDE=border-box)・pitch133(gap20)。
 * 段階的強化:非JSは回答を開いたまま表示。html.js時のみ折りたたむ(FOUC回避のため
 * html.jsはhead早期に付与)。閉パネルはvisibility:hidden併用でinert非対応環境でもAT/フォーカスから除外。
 */
.msg-qa__list {
	/* 設計1100px幅・両側170ガター。狭幅は左右60ガターを残して縮小。 */
	width: min(calc(1100 * var(--u)), calc(100% - calc(120 * var(--u))));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--u));
}

.msg-qa__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.msg-qa__trigger {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: calc(113 * var(--u));
	/* 左paddingは枠内側(border 1px)から設計の文字原点220まで。 */
	padding: calc(10 * var(--u)) calc(96 * var(--u)) calc(10 * var(--u)) calc(49 * var(--u));
	border: 1px solid var(--c-black);
	border-radius: calc(10 * var(--u));
	background-color: var(--c-white);
	text-align: left;
	color: var(--c-black);
}

/**
 * open時の黄グラデ背景。gradientは補間できないため疑似要素で重ね、opacityでフェードして
 * アイコン/パネルのアニメーションと揃える。
 */
.msg-qa__trigger::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: var(--grad-yellow);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.msg-qa__item.is-open .msg-qa__trigger::before {
	opacity: 1;
}

.msg-qa__trigger:focus-visible {
	outline: 2px solid var(--c-black);
	outline-offset: 2px;
}

/**
 * __no(Montserrat)と__q(Noto)を同一インラインに置きベースラインを揃える。
 * Figmaの行boxは和文runの寸法で決まるため、strut(=このラベル自身のfont)は和文に保つ。
 */
.msg-qa__label {
	position: relative;
	z-index: 1;
	min-width: 0;
	font-family: var(--ff-jp);
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 2;
}

/**
 * PCは__noも22px=strutと同寸のため、lh:1で行boxを膨らませない(欧文runは下方向に長い)。
 * グリフ位置はベースラインで決まるためlhを削っても字は動かない。
 * margin-rightは設計の区切り=全角スペース(U+3000)=1em。テンプレートはタグを詰めて出力するため
 * ここで間隔を与える(タグ間の改行が半角スペースとして描画されると二重になる)。
 */
.msg-qa__no {
	margin-right: calc(22 * var(--u));
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 1;
}

.msg-qa__q {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(22 * var(--u)));
	line-height: 2;
}

/**
 * ＋アイコン。open時は45度回転して×になる。
 */
.msg-qa__icon {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: calc(55 * var(--u));
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.msg-qa__icon::before,
.msg-qa__icon::after {
	content: "";
	position: absolute;
	background: var(--c-black);
}

.msg-qa__icon::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.msg-qa__icon::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.msg-qa__item.is-open .msg-qa__icon {
	transform: translateY(-50%) rotate(45deg);
}

/**
 * パネル:既定(非JS)は開いた状態。
 */
.msg-qa__answer {
	min-height: 0;
	overflow: hidden;
}

/**
 * 回答本文。左右0=バー幅いっぱい(設計PC1100 / SP340)。上40はバー下端から、
 * 下20 + リストのgap20 = 設計の本文下端→次バーの40。PCは左揃え・SPのみ両端揃え。
 */
.msg-qa__answer-body {
	padding: calc(40 * var(--u)) 0 calc(20 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(16 * var(--u)));
	line-height: 2;
	letter-spacing: 0.02em;
}

.msg-qa__answer-body p {
	margin: 0;
}

.msg-qa__answer-body p + p {
	margin-top: calc(32 * var(--u));
}

/**
 * JS有効(html.js)時のみ折りたたむ。visibility併用で閉パネルを支援技術/フォーカスから除外。
 */
html.js .msg-qa__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.35s ease, visibility 0.35s ease;
}

html.js .msg-qa__item.is-open .msg-qa__panel {
	grid-template-rows: 1fr;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.msg-qa__trigger::before,
	.msg-qa__icon,
	html.js .msg-qa__panel {
		transition: none;
	}
}

/**
 * SP(Figma:390基準・--uは純vw)。
 * ヒーローは縦積み(写真→Message→声明)へ。Q&Aは全幅バー。
 */
@media (max-width: 768px) {
	.message {
		--u: var(--u-sp);
		/* 最終Q&A下端(1406)からフッター上端(1526)までの余白。 */
		padding-bottom: calc(120 * var(--u));
	}

	.msg-hero {
		/* SPは純vw(--u-sp)。2カラム用の--u-pcを打ち消す(.messageの指定は子のここに勝てない)。 */
		--u: var(--u-sp);
		grid-template-columns: 1fr;
		grid-template-areas:
			"photo"
			"msg"
			"lead";
		padding-inline: calc(25 * var(--u));
	}

	.msg-hero__photo {
		width: 100%;
		margin-top: calc(92 * var(--u));
		aspect-ratio: 340 / 210;
	}

	.msg-hero__title {
		/* 設計は本文左端(25)より6px外へ出る(x=19)。行box上端472 = 写真の外形(92+210)からの差分。 */
		margin: calc(-30 * var(--u)) 0 calc(-18 * var(--u)) calc(-6 * var(--u));
		font-size: calc(60 * var(--u));
	}

	.msg-hero__lead {
		margin: calc(29 * var(--u)) 0 0;
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 2;
	}

	.msg-qa {
		margin-top: calc(60 * var(--u));
	}

	.msg-qa__list {
		width: calc(100% - calc(50 * var(--u)));
	}

	.msg-qa__trigger {
		/* 左右paddingは枠内側から設計の文字枠(x=55・幅255)へ合わせる(改行位置は枠幅で決まる)。 */
		padding: calc(20 * var(--u)) calc(54 * var(--u)) calc(20 * var(--u)) calc(29 * var(--u));
	}

	.msg-qa__label {
		font-size: max(1.2rem, calc(16 * var(--u)));
	}

	/**
	 * SPは__no(17px)がstrut(和文16px)より大きく、設計の1行目の行boxも34(=17x2)。
	 * lhを継承(2)させて欧文runに行boxを広げさせる=Figmaの34/32と一致する。
	 * 区切りはPCと違い半角スペース(U+0020)。6.3は設計実測(A字のインク左端 - Q字のインク左端=29.75)から逆算。
	 */
	.msg-qa__no {
		margin-right: calc(6.3 * var(--u));
		font-size: max(1.2rem, calc(17 * var(--u)));
		line-height: 2;
	}

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

	.msg-qa__icon {
		right: calc(29 * var(--u));
		width: calc(15 * var(--u));
		height: calc(15 * var(--u));
	}

	/**
	 * SPのみ両端揃え(PCは設計どおり左揃え)。
	 */
	.msg-qa__answer-body {
		text-align: justify;
	}
}