/**
 * コーポレート「公司信息」ページ（会社案内の中国語版・Figma company-zh）のスタイル（骨組み）。
 * スケール係数（--pc/--sp）・キャンバス幅（--mt-canvas）は common.css / base.css の :root で定義済み。
 */

/* ---- 大枠コンテナ ---- */
.mtcz {
	width: var(--mt-canvas);
	max-width: 100%;
	margin-inline: auto;
	overflow-x: clip;
	color: var(--mt-navy);
	background: #fff;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	line-height: 1.6;
}

.mtcz img {
	display: block;
}

/* ==================== パンくずリスト ====================
 * 会社案内（.mtco-breadcrumb）と共通のデザイン・数値。<main>末尾・フッター直前に配置し、
 * フッターの上20px・左80pxの位置に左寄せ。 */
.mtcz-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
	padding-left: calc(80 * var(--pc));
	/* フッターとの間隔は.mt-footer自体のpadding-top(30px)に任せる（二重にしない）。 */
}

.mtcz-breadcrumb__link {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	color: rgba(51, 51, 51, 0.4);
	text-decoration: none;
}

.mtcz-breadcrumb__divider {
	display: block;
	flex: none;
	/* 親の align-items:center に任せ、文字の縦中央に線の回転軸を置く。
	 * Figmaの座標は「回転後の見た目のバウンディングボックス」の位置を示しており、
	 * CSSの「回転前の位置を基準に回転する」挙動とは基準点が異なるため、
	 * Figmaの数値をそのまま上端からのオフセットとして使うと合わない。 */
	width: calc(12 * var(--pc));
	height: 0;
	margin: 0 calc(9 * var(--pc)) 0 calc(15 * var(--pc));
	border-top: 1px solid #333;
	transform: rotate(120deg);
}

.mtcz-breadcrumb__current {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	text-decoration-line: underline;
	color: #333;
}

/* ==================== タイトルバー ====================
 * 会社案内（.mtco-titlebar）と共通のデザイン・数値。ベージュのパネルを原点にして、
 * 中の要素は px の絶対配置で置いていく。
 */
.mtcz-titlebar {
	position: relative; /* 中の要素を px で絶対配置するときの原点 */
	width: calc(1380 * var(--pc));
	height: calc(140 * var(--pc));
	/* Figmaのtop:150はヘッダー込みのページ絶対座標。ヘッダー（高さ90px）は <main> の外で
	 * 既に描画されているため、実際に空けるべき上マージンは 150-90=60px。 */
	margin: calc(60 * var(--pc)) auto 0; /* 左右中央（＝ページ左右から30px）／ヘッダー下から60px */
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtcz-titlebar__title {
	position: absolute;
	left: calc(70 * var(--pc));
	top: calc(50 * var(--pc));
	width: calc(178 * var(--pc));
	height: calc(40 * var(--pc));
	margin: 0;
	white-space: nowrap;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(40 * var(--pc));
	line-height: calc(40 * var(--pc));
	letter-spacing: 0.15em;
	color: #0d3061;
}

.mtcz-titlebar__smile {
	position: absolute;
	left: calc(1219 * var(--pc));
	top: calc(53 * var(--pc));
	width: calc(91 * var(--pc));
	height: calc(34 * var(--pc));
	animation:
		mtczSmileRock 1.2s ease-in-out,
		mtczSmilePivot 1.2s linear;
	animation-play-state: paused;
}

.mtcz-titlebar__smile.is-loaded {
	animation-play-state: running;
}

@keyframes mtczSmileRock {
	0%, 50%, 100% { rotate: 0deg; }
	25%           { rotate: -6deg; }
	75%           { rotate: 6deg; }
}

@keyframes mtczSmilePivot {
	0%, 49.9%  { transform-origin: bottom left; }
	50%, 100%  { transform-origin: bottom right; }
}

/* ==================== 社長あいさつ（中国語） ====================
 * position:relative の原点(30,440)を引いた値で各要素をpx絶対配置する（タイトルバーと同じ技法）。
 * 写真top=440はタイトルバー下端(150+140=290)から標準の150pxギャップを空けた位置と一致するため、
 * 原点はそのまま「写真の左上」になる。 */
.mtcz-message {
	position: relative;
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	min-height: calc(747 * var(--pc)); /* 上海丸辰段落の下端(1123-440+64=747)まで確保 */
	margin: calc(150 * var(--pc)) auto 0;
}

.mtcz-message__photo-wrap {
	position: absolute;
	left: calc(70 * var(--pc));
	top: 0;
	width: calc(400 * var(--pc));
	height: calc(560 * var(--pc));
	border-radius: calc(15 * var(--pc));
	overflow: hidden; /* 内側のimgを拡大トリミングする際、はみ出しを隠す */
}

/* CEO-new.jpg（2026-09差し替え）。Figma上は原寸400×600で配置されており、
 * その中の400×560の範囲（top:40相当、leftは0）だけを見せたいとのことだったので、
 * imgは等倍(width:100%)のまま、topのマイナスオフセットでその範囲を窓に合わせている
 * （%指定はwrapの実寸に対する比率のため、レスポンシブに縮んでも位置関係は崩れない）。 */
.mtcz-message__photo {
	position: absolute;
	top: -7.14%;  /* -40 / 560 * 100 */
	left: 0;
	width: 100%;
	max-width: none; /* base.css の max-width:100% を解除 */
	height: auto;
}

.mtcz-message__ceo-label {
	position: absolute;
	left: calc(660 * var(--pc));
	top: calc(100 * var(--pc));
	width: calc(43 * var(--pc));
	height: calc(20 * var(--pc));
	margin: 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(20 * var(--pc));
	line-height: calc(20 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtcz-message__name {
	position: absolute;
	left: calc(660 * var(--pc));
	top: calc(135 * var(--pc));
	width: calc(157 * var(--pc));
	height: calc(32 * var(--pc));
	margin: 0;
	white-space: nowrap;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(32 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.15em;
	color: #0d3061;
}

.mtcz-message__greeting {
	position: absolute;
	left: calc(660 * var(--pc));
	top: calc(227 * var(--pc));
	width: calc(135 * var(--pc));
	height: calc(32 * var(--pc));
	margin: 0;
	white-space: nowrap;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcz-message__text {
	position: absolute;
	left: calc(660 * var(--pc));
	top: calc(274 * var(--pc));
	width: calc(650 * var(--pc));
	margin: 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* SP専用の区切り線。PCでは非表示。 */
.mtcz-message__divider {
	display: none;
}

.mtcz-message__text2 {
	position: absolute;
	left: calc(70 * var(--pc));
	top: calc(683 * var(--pc));
	width: calc(1240 * var(--pc));
	margin: 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== History（沿革） ====================
 * 会社案内の.mtco-panel2/.mtco-historyと同じ値（パネル余白100/70、年セル250幅、
 * テキストセルmargin-left5、行間10）。前セクション(.mtcz-message)の下端からの間隔は
 * 60px（Figma座標: 前セクション下端1187／パネルtop1247）。 */
.mtcz-history-panel {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(60 * var(--pc)) auto 0;
	padding: calc(100 * var(--pc)) calc(70 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(30 * var(--pc));
}

.mtcz-history-panel__title {
	margin: 0;
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(32 * var(--pc));
	line-height: calc(32 * var(--pc));
	color: #0d3061;
}

.mtcz-history {
	list-style: none;
	margin: calc(60 * var(--pc)) 0 0;
	padding: 0;
}

.mtcz-history__row {
	display: flex;
	align-items: stretch;
	min-height: calc(66 * var(--pc));
}

.mtcz-history__row + .mtcz-history__row {
	margin-top: calc(10 * var(--pc));
}

.mtcz-history__year {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(250 * var(--pc));
	box-sizing: border-box;
	background: #efede0;
	border-radius: calc(15 * var(--pc));
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcz-history__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	margin-left: calc(5 * var(--pc));
	padding: calc(20 * var(--pc)) 0 calc(20 * var(--pc)) calc(40 * var(--pc));
	background: #fff;
	border-radius: calc(15 * var(--pc));
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* 「・」で始まる箇条書き行が折り返した時、2行目以降が箇条書き文字の位置まで
 * 戻らないよう、ぶら下げインデントにする（text-indentで先頭行だけ左に戻す）。 */
.mtcz-history__text-line {
	padding-left: 1em;
	text-indent: -1em;
}

/* ==================== Overseas Office ====================
 * 背景パネルなし。Historyパネルと同じ左右70pxインセット（コンテンツ幅1240px）。
 * 前セクション（Historyパネル）下端との間隔は標準の150px。 */
.mtcz-overseas {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding: 0 calc(70 * var(--pc));
}

.mtcz-overseas__title {
	margin: 0;
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(32 * var(--pc));
	line-height: calc(32 * var(--pc));
	color: #0d3061;
}

.mtcz-overseas__text--sp {
	display: none;
}

.mtcz-overseas__text {
	margin: calc(40 * var(--pc)) 0 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== 拠点一覧（Overseas Office配下） ====================
 * 各拠点はグリッド2列（テキスト可変幅／画像540px固定=260px×2+gap20px）。
 * 画像は.mtcz-office__image--1(左列)/--2(右列)で列を固定するため、1枚のみ（--2だけ）の
 * 拠点でも自動的に右寄せになる（左列は空のまま）。
 * 拠点間は上に区切り線＋60pxの余白（前拠点の内容から60、区切り線から見出しまで60）。 */
.mtcz-offices {
	margin-top: calc(60 * var(--pc));
}

.mtcz-office {
	display: grid;
	grid-template-columns: 1fr calc(540 * var(--pc));
	gap: 0 calc(40 * var(--pc));
	align-items: start;
	padding-top: calc(60 * var(--pc));
	border-top: 1px solid #e9e9e9;
}

.mtcz-office + .mtcz-office {
	margin-top: calc(60 * var(--pc));
}

.mtcz-office__content {
	min-width: 0;
	max-width: calc(660 * var(--pc));
}

.mtcz-office__name {
	margin: 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(28 * var(--pc));
	line-height: calc(28 * var(--pc));
	color: #333;
}

.mtcz-office__note {
	margin: calc(20 * var(--pc)) 0 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcz-office__address {
	margin: calc(40 * var(--pc)) 0 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* 補足説明が無い拠点は、見出しの直後に住所が来る（見出し→住所の間隔は補足有りと同じ40px）。 */
.mtcz-office__name + .mtcz-office__address {
	margin-top: calc(40 * var(--pc));
}

.mtcz-office__details {
	display: flex;
	flex-wrap: wrap;
	column-gap: calc(40 * var(--pc));
	row-gap: calc(10 * var(--pc));
	margin-top: calc(10 * var(--pc));
}

.mtcz-office__detail {
	display: flex;
	align-items: baseline;
	gap: calc(20 * var(--pc));
}

.mtcz-office__detail-label {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

.mtcz-office__detail-value {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcz-office__images {
	display: grid;
	grid-template-columns: calc(260 * var(--pc)) calc(260 * var(--pc));
	gap: 0 calc(20 * var(--pc));
}

/* グリッドアイテムは<picture>そのもの。display:contentsで透過させると、中の<source>まで
 * グリッドアイテムになって升目を1つ余分に消費し、画像2が1行下にずれてしまう。 */
.mtcz-office__picture {
	display: block;
	min-width: 0;
}

.mtcz-office__image {
	width: 100%;
	height: calc(173 * var(--pc));
	object-fit: cover;
	background: #8ed681;
	border-radius: calc(15 * var(--pc));
}

.mtcz-office__picture--1 {
	grid-column: 1;
}

.mtcz-office__picture--2 {
	grid-column: 2;
}

/* ==================== Mail Contact ====================
 * 薄グレーパネル（#f9f9f9）。ACFでテキスト長が可変になるため、絶対配置ではなく
 * flex/gridの通常フローで組む。前セクション（拠点一覧）との間隔は標準の150px。 */
.mtcz-contact-panel {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	min-height: calc(519 * var(--pc));
	margin: calc(150 * var(--pc)) auto calc(150 * var(--pc));
	padding: calc(100 * var(--pc)) calc(70 * var(--pc));
	background: #f9f9f9;
	border-radius: calc(30 * var(--pc));
}

.mtcz-contact-panel__title {
	margin: 0;
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(32 * var(--pc));
	line-height: calc(32 * var(--pc));
	color: #0d3061;
}

.mtcz-contact-panel__lead {
	margin: calc(60 * var(--pc)) 0 0;
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtcz-contact-panel__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(56 * var(--pc));
	row-gap: calc(20 * var(--pc));
	margin-top: calc(30 * var(--pc));
}

.mtcz-contact__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(20 * var(--pc));
}

/* PCではlabelの隣にphone/emailが並ぶだけなので透過させ、.rowの直接の子として
 * 扱う（SPだけlabel列を固定幅にしてvalue群を縦積みするために必要な構造）。 */
.mtcz-contact__values {
	display: contents;
}

.mtcz-contact__row + .mtcz-contact__row {
	margin-top: calc(5 * var(--pc));
}

.mtcz-contact__label {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

.mtcz-contact__value {
	font-family: "Noto Sans SC", "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
	text-decoration: none;
}

.mtcz-contact__value--email {
	text-decoration-line: underline;
}

/* ============================================================
 * SP（〜767px）
 * Figma SP は 750px 幅。各値は calc(Figmaのpx * var(--sp))。
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * ============================================================ */
@media (max-width: 767px) {

	/* ==================== パンくずリスト ====================
	 * 会社案内のSP実装と同じく<main>末尾・フッター直前に配置。左20pxの位置に左寄せ。
	 * フッターとの間隔は.mt-footer自体のpadding-top(30px)に任せる（二重にしない）。 */
	.mtcz-breadcrumb {
		padding-left: calc(40 * var(--sp));
	}

	.mtcz-breadcrumb__link,
	.mtcz-breadcrumb__current {
		font-size: calc(22 * var(--sp));
		line-height: calc(22 * var(--sp));
	}

	.mtcz-breadcrumb__divider {
		width: calc(20 * var(--sp));
		/* PCは1pxだが、SPはFigma指定で2px（線の太さは--spでスケールしない）。 */
		border-top-width: 2px;
		margin: 0 calc(20 * var(--sp)) 0 calc(20 * var(--sp));
	}

	/* ==================== タイトルバー ====================
	 * PCと同じ考え方（left:30/width:690→margin auto+width、ヘッダー高120pxを差し引く）。
	 * 会社案内のSP実装と同じ数値。 */
	.mtcz-titlebar {
		width: calc(690 * var(--sp));
		height: calc(140 * var(--sp));
		margin: calc(60 * var(--sp)) auto 0; /* Figma top:180 - SPヘッダー高120 */
		border-radius: calc(30 * var(--sp));
	}

	.mtcz-titlebar__title {
		left: calc(50 * var(--sp));
		top: calc(50 * var(--sp));
		width: calc(178 * var(--sp));
		height: calc(40 * var(--sp));
		font-size: calc(40 * var(--sp));
		line-height: calc(40 * var(--sp));
	}

	.mtcz-titlebar__smile {
		left: calc(559 * var(--sp));
		top: calc(55 * var(--sp));
		width: calc(81 * var(--sp));
		height: calc(30 * var(--sp));
	}

	/* ==================== 社長あいさつ（中国語・SP） ====================
	 * PCと違い写真が上・テキストが下に積まれるレイアウト。タイトルバーと違い690px幅の
	 * インセットコンテナは使わず、キャンバス幅いっぱい（左右0）にした上で、各要素は
	 * キャンバス左端からの絶対値（写真75px、テキスト50px）でそのまま配置する。
	 * 原点はタイトルバー下端(320)＋標準ギャップ100pxで一致する写真top(420)を基準に、
	 * 他要素はそこからの相対値。 */
	.mtcz-message {
		width: 100%;
		min-height: calc(1954 * var(--sp)); /* text2下端(2038-420+336=1954)まで確保 */
		margin: calc(100 * var(--sp)) 0 0;
	}

	.mtcz-message__photo-wrap {
		left: calc(75 * var(--sp));
		top: 0;
		width: calc(600 * var(--sp));
		height: calc(840 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtcz-message__ceo-label {
		left: calc(343 * var(--sp));
		top: calc(860 * var(--sp));
		width: calc(64 * var(--sp));
		height: calc(30 * var(--sp));
		font-size: calc(30 * var(--sp));
		line-height: calc(30 * var(--sp));
	}

	.mtcz-message__name {
		left: calc(287 * var(--sp));
		top: calc(910 * var(--sp));
		width: calc(176 * var(--sp));
		height: calc(36 * var(--sp));
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtcz-message__greeting {
		left: calc(50 * var(--sp));
		top: calc(1006 * var(--sp));
		width: calc(236 * var(--sp));
		height: calc(48 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-message__text {
		left: calc(50 * var(--sp));
		top: calc(1074 * var(--sp));
		width: calc(650 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	/* PCには無い区切り線。二つの本文の間、上下80pxで挟む。 */
	.mtcz-message__divider {
		display: block;
		position: absolute;
		left: calc(50 * var(--sp));
		top: calc(1538 * var(--sp));
		width: calc(650 * var(--sp));
		height: 0;
		margin: 0;
		border: none;
		border-top: 1px solid #e9e9e9;
	}

	.mtcz-message__text2 {
		left: calc(50 * var(--sp));
		top: calc(1618 * var(--sp));
		width: calc(650 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	/* ==================== History（沿革・SP） ====================
	 * PCは年・テキストが横並びだが、SPは年（ベージュ・全幅）→テキスト（白・全幅）の
	 * 縦積みに変更（会社案内の.mtco-historyと同じ技法）。
	 * 前セクション（社長あいさつ）下端(420+1954=2374)からの間隔は80px。
	 * パネル内余白は上100px・左右40px（コンテンツ幅610=690-40-40）。 */
	.mtcz-history-panel {
		width: calc(690 * var(--sp));
		margin: calc(80 * var(--sp)) auto 0;
		padding: calc(100 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtcz-history-panel__title {
		text-align: center;
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtcz-history {
		margin-top: calc(60 * var(--sp));
	}

	.mtcz-history__row {
		flex-direction: column;
		min-height: 0;
	}

	.mtcz-history__row + .mtcz-history__row {
		margin-top: calc(10 * var(--sp));
	}

	.mtcz-history__year {
		flex: none;
		width: 100%;
		box-sizing: border-box;
		padding: calc(20 * var(--sp)) 0;
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtcz-history__text {
		flex: none;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-top: calc(10 * var(--sp));
		padding: calc(20 * var(--sp)) 0 calc(20 * var(--sp)) calc(40 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	/* ==================== Overseas Office（SP） ====================
	 * 背景パネルなし。左右50pxインセット（PCの70pxとは異なる）を左右対称に持たせることで、
	 * 見出しをtext-align:centerするだけでキャンバス中央（375px）と一致する。
	 * 前セクション（Historyパネル、行数に応じて可変高さ）との間隔は標準の150px。 */
	.mtcz-overseas {
		width: 100%;
		margin-top: calc(150 * var(--sp));
		padding: 0 calc(50 * var(--sp));
	}

	.mtcz-overseas__title {
		text-align: center;
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtcz-overseas__text--pc {
		display: none;
	}

	.mtcz-overseas__text--sp {
		display: block;
	}

	.mtcz-overseas__text {
		margin-top: calc(60 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	/* ==================== 拠点一覧（SP） ====================
	 * PCは「テキスト左・画像右」のgridだが、SPは「見出し→画像→補足→住所→項目」の縦積みに
	 * 変更するため、.mtcz-office__contentをdisplay:contentsで透過させ、直下の子要素
	 * （name/note/address/details）をそのまま親gridのアイテムとしてgrid-template-areasで
	 * 並べ替える（会社案内の会社概要・社長あいさつと同じ「grid-template-areasで並べ替え」技法）。
	 * 画像は2枚のときも横並びではなく縦積み（gap20px）。1枚のみのときは.mtcz-office__image--2
	 * だけが残るので、左右の区別なくそのまま1枚だけ表示される。 */
	.mtcz-office {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"name"
			"images"
			"note"
			"address"
			"details";
		gap: 0;
		padding-top: calc(80 * var(--sp));
	}

	.mtcz-office__content {
		display: contents;
	}

	.mtcz-office__name {
		grid-area: name;
		text-align: center;
		font-size: calc(32 * var(--sp));
		line-height: calc(32 * var(--sp));
	}

	.mtcz-office__note {
		grid-area: note;
		margin-top: calc(60 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-office__address {
		grid-area: address;
		margin-top: calc(40 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-office__name + .mtcz-office__address {
		margin-top: calc(40 * var(--sp));
	}

	.mtcz-office__details {
		grid-area: details;
		column-gap: calc(40 * var(--sp));
		row-gap: calc(10 * var(--sp));
		margin-top: calc(20 * var(--sp));
	}

	.mtcz-office__detail {
		gap: calc(20 * var(--sp));
	}

	.mtcz-office__detail-label,
	.mtcz-office__detail-value {
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-office__images {
		grid-area: images;
		grid-template-columns: 1fr;
		row-gap: calc(20 * var(--sp));
		margin-top: calc(60 * var(--sp));
	}

	.mtcz-office__image {
		height: calc(399.23 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtcz-office__picture--1,
	.mtcz-office__picture--2 {
		grid-column: 1;
	}

	/* ==================== Mail Contact（SP） ====================
	 * PCは2列（左右並び）だが、SPは1列で2件を縦積みする。
	 * パネル余白は上下60px・左右40px（コンテンツ幅610=690-40-40）。
	 * label列は固定幅158px（label文字の実幅に関わらずvalueの開始位置=228pxを揃える）にし、
	 * .mtcz-contact__valuesを縦積み（電話→メールの間5px）にする。
	 * 前セクション（拠点一覧）との間隔は標準の150px。 */
	.mtcz-contact-panel {
		width: calc(690 * var(--sp));
		min-height: 0;
		margin: calc(150 * var(--sp)) auto calc(100 * var(--sp));
		padding: calc(60 * var(--sp)) calc(40 * var(--sp));
	}

	.mtcz-contact-panel__title {
		text-align: center;
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtcz-contact-panel__lead {
		margin-top: calc(50 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-contact-panel__cols {
		display: flex;
		flex-direction: column;
		gap: calc(50 * var(--sp));
		margin-top: calc(50 * var(--sp));
	}

	.mtcz-contact__row {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 0;
	}

	.mtcz-contact__row + .mtcz-contact__row {
		margin-top: calc(10 * var(--sp));
	}

	.mtcz-contact__label {
		flex: 0 0 calc(158 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtcz-contact__values {
		display: flex;
		flex-direction: column;
		gap: calc(5 * var(--sp));
	}

	.mtcz-contact__value {
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}
}