/**
 * コーポレート「組織紹介」ページのスタイル。
 * スケール係数（--pc/--sp）・キャンバス幅（--mt-canvas）は common.css / base.css の :root で定義済み。
 */

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

.mtor img {
	display: block;
}

/* ==================== タイトルバー ====================
 * 他ページ共通のデザイン・数値。笑顔シェイプのみ紺色版（smail.svg）を使う。 */
.mtor-titlebar {
	position: relative;
	width: calc(1380 * var(--pc));
	height: calc(140 * var(--pc));
	margin: calc(60 * var(--pc)) auto 0;
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtor-titlebar__title {
	position: absolute;
	left: calc(70 * var(--pc));
	top: calc(50 * var(--pc));
	width: calc(270 * var(--pc));
	height: calc(40 * var(--pc));
	margin: 0;
	white-space: nowrap;
	font-family: "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;
}

.mtor-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:
		mtorSmileRock 1.2s ease-in-out,
		mtorSmilePivot 1.2s linear;
	animation-play-state: paused;
}

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

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

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

/* ==================== 組織図 ====================
 * 左：紹介文（317px）、右：組織図（682×570の画像＋クリック領域6箇所）。
 * 間隔191px、左余白100px（テキスト左端〜画像右端が合計1190pxになる配置）。
 * 画像はWPで編集せず1枚のPNGとして差し替える運用のため、クリック領域は画像内の
 * 円の位置を画像サイズに対する％で指定し、透明なリンクとして重ねる
 * （％指定なので画像が縮小・拡大してもズレない）。 */
.mtor-chart {
	display: flex;
	align-items: flex-start;
	gap: calc(191 * var(--pc));
	margin-top: calc(100 * var(--pc));
	padding-left: calc(100 * var(--pc));
}

.mtor-chart__lead {
	flex: none;
	box-sizing: border-box;
	width: calc(317 * var(--pc));
	margin: calc(50 * var(--pc)) 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(20 * var(--pc));
	line-height: calc(40 * var(--pc));
	letter-spacing: 0.06em;
	/* 改行位置は<br>で決める。letter-spacing込みの実幅が指定widthを1pxほど超え、
	 * 末尾の1文字だけ折り返るのを防ぐ。 */
	white-space: nowrap;
	color: #333;
}

.mtor-chart__diagram {
	position: relative;
	flex: none;
	width: calc(682 * var(--pc));
	aspect-ratio: 682 / 570;
}

.mtor-chart__diagram picture {
	display: block;
	width: 100%;
	height: 100%;
}

.mtor-chart__image {
	width: 100%;
	height: 100%;
}

.mtor-chart__link {
	position: absolute;
	left: var(--chart-left);
	top: var(--chart-top);
	width: var(--chart-width);
	height: var(--chart-height);
	border-radius: 50%;
}

.mtor-chart__link:focus-visible {
	outline: 2px solid #0d3061;
	outline-offset: 2px;
}

/* ==================== 部署紹介 ====================
 * 淡いグレーの背景セクションに、白いカードを2枚（中心部〜総務部の5部署／事業部単独）。
 * カード内側の余白は上下左右とも80px（コンテンツ幅840px＝1000-80×2）。 */
.mtor-departments {
	box-sizing: border-box;
	width: 100%;
	margin-top: calc(120 * var(--pc));
	padding: calc(120 * var(--pc)) 0 calc(150 * var(--pc));
	background: #f9f9f9;
}

.mtor-dept-card {
	box-sizing: border-box;
	width: calc(1000 * var(--pc));
	margin: 0 auto;
	padding: calc(80 * var(--pc));
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: calc(30 * var(--pc));
}

.mtor-dept-card--secondary {
	margin-top: calc(50 * var(--pc));
}

.mtor-dept {
	/* 組織図の矢印からのアンカーリンクでジャンプした時、sticky化しているヘッダーの
	 * 下に隠れないようジャンプ先の上に余白を確保する（company.cssと同じ技法）。
	 * .mtor-dept はカード（.mtor-dept-card）の内側にあり、着地の基準になるのは
	 * 部署の枠（＝カードの内側）なので、カード上辺はさらに padding(80px) と
	 * 枠線(1px) だけ上にある。その81pxを足さないと、カードの上の角丸と枠線が
	 * ヘッダーの下に潜って隠れてしまう（company.cssの .mtco-locations__office と同じ理由）。 */
	scroll-margin-top: calc(90 * var(--pc) + 20px + 80 * var(--pc) + 1px);
}

.mtor-dept--with-image {
	position: relative;
}

.mtor-dept__divider {
	width: 100%;
	height: 0;
	margin: calc(60 * var(--pc)) 0;
	border: none;
	border-top: 1px solid #e9e9e9;
}

.mtor-dept__heading {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 700;
	font-size: calc(20 * var(--pc));
	line-height: calc(20 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtor-dept__meta {
	display: flex;
	align-items: flex-start;
	gap: calc(10 * var(--pc));
	margin-top: calc(20 * var(--pc));
}

.mtor-dept__tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(5 * var(--pc));
}

.mtor-dept__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: calc(26 * var(--pc));
	padding: 0 calc(10 * var(--pc));
	background: #0d3061;
	border-radius: calc(13 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 700;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	color: #fff;
	white-space: nowrap;
}

/* タグ＋事業所リストの行ぞろえ（営業部）。グリッドの1行＝タグ列＋事業所リスト列
 * にすることで、同じ行同士の縦位置（行の高さ・区切り線）が自然に揃う。 */
.mtor-dept__office-grid {
	display: grid;
	grid-template-columns: calc(109 * var(--pc)) 1fr;
	align-items: center;
	column-gap: calc(10 * var(--pc));
	margin-top: calc(20 * var(--pc));
}

.mtor-dept__tag--grid {
	flex: none;
}

.mtor-dept__office-row {
	box-sizing: border-box;
	margin: 0;
	padding: calc(16 * var(--pc)) 0;
	border-bottom: 1px solid #e5ebf5;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 700;
	font-size: calc(14 * var(--pc));
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
	color: #456899;
}

.mtor-dept__text {
	margin: calc(40 * var(--pc)) 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-weight: 500;
	font-size: calc(16 * var(--pc));
	line-height: calc(28 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtor-dept--with-image .mtor-dept__meta,
.mtor-dept--with-image .mtor-dept__office-grid,
.mtor-dept--with-image .mtor-dept__text {
	width: calc(540 * var(--pc));
}

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

.mtor-dept__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* plan.jpg（企画部）。窓いっぱいの中央クロップだと手元の作業部分ではなく人物の顔付近が
 * 写ってしまうため、拡大しつつ手元（画面下寄り）が見えるようクロップ位置をずらしている。 */
.mtor-dept__image-wrap--planning .mtor-dept__image {
	top: -125.4%;  /* -217.0 / 173 * 100 */
	left: -45.51%; /* さらに右に15px分ずらす: -103.33 - 15 = -118.33 / 260 * 100 */
	width: 227.6%; /* 591.7 / 260 * 100 */
	max-width: none;
	height: auto;
}

/* sale.jpg（営業部）。Figma上は原寸315×252で配置されており、その中の260×173の範囲
 * （left:2.3, top:46.5相当）だけを見せたいとのことだったので、imgを315/260=121.2%に
 * 拡大し、left/topのマイナスオフセットでその範囲を窓に合わせている。 */
.mtor-dept__image-wrap--sales .mtor-dept__image {
	top: -26.89%;  /* -46.51 / 173 * 100 */
	left: -0.88%;  /* -2.30 / 260 * 100 */
	width: 121.2%; /* 315.1 / 260 * 100 */
	max-width: none;
	height: auto;
}

/* ==================== CTA（ご相談ください） ====================
 * 他ページ（TOP・お知らせ一覧・お知らせ詳細・会社案内・よくある質問）と同じ内容・数値を流用。 */
.mtor-cta {
	box-sizing: border-box;
	width: 100%;
	min-height: calc(658 * var(--pc));
	margin-top: calc(150 * var(--pc));
	margin-bottom: calc(154 * var(--pc));
	padding-top: calc(180 * var(--pc));
	background: #1a355c;
	text-align: center;
}

.mtor-cta__title--sp {
	display: none;
}

.mtor-cta__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	letter-spacing: 0.15em;
	color: #fff;
}

.mtor-cta__lead--sp {
	display: none;
}

.mtor-cta__lead {
	width: calc(497 * var(--pc));
	margin: calc(40 * var(--pc)) auto 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	color: #fff;
}

/* PC本文：<br>で改行位置を指定しているので、1行ごとの自動折り返しは止める。
 * 幅はテキストに合わせて自動で広げる。 */
.mtor-cta__lead--pc {
	width: max-content;
	white-space: nowrap;
}

.mtor-cta__actions {
	display: flex;
	justify-content: center;
	gap: calc(14 * var(--pc));
	margin-top: calc(60 * var(--pc));
}

.mtor-cta__btn {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
	color: #333;
	text-decoration: none;
}

.mtor-cta__btn-text {
	margin-left: calc(40 * var(--pc));
	margin-right: auto;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: calc(14 * var(--pc));
	letter-spacing: 0.06em;
}

.mtor-cta__btn-divider {
	flex: none;
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	background: #333;
}

.mtor-cta__btn-arrow {
	flex: none;
	width: calc(24 * var(--pc));
	height: auto;
	margin-left: calc(29 * var(--pc));
	margin-right: calc(30 * var(--pc));
	clip-path: inset(0 0 0 0);
}

.mtor-cta__btn:hover .mtor-cta__btn-arrow {
	animation: mtorArrowReveal 0.3s ease-out;
}

@keyframes mtorArrowReveal {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* ==================== パンくずリスト ====================
 * CTAの margin-bottom がフッターとの間隔を兼ねるため、ここでは margin を持たない。 */
.mtor-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding-left: calc(80 * var(--pc));
}

.mtor-breadcrumb__link {
	font-family: "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;
}

.mtor-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);
}

.mtor-breadcrumb__current {
	font-family: "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;
}

/* ==================== レスポンシブ（SP） ====================
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * 「文字（中心）画像（中心）」の指示通り、縦積みでどちらも中央寄せにする。
 * 具体的な数値は未受領のため、コンテンツ幅いっぱいの暫定値。 */
@media (max-width: 767px) {

	.mtor-chart {
		flex-direction: column;
		align-items: center;
		gap: calc(60 * var(--sp));
		margin-top: calc(80 * var(--sp));
		padding-left: 0;
	}

	.mtor-chart__lead {
		width: calc(600 * var(--sp));
		margin-top: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		text-align: center;
	}

	.mtor-chart__diagram {
		width: calc(590 * var(--sp));
		aspect-ratio: 590 / 630;
	}

	.mtor-chart__link {
		left: var(--chart-sp-left);
		top: var(--chart-sp-top);
		width: var(--chart-sp-width);
		height: var(--chart-sp-height);
	}

	.mtor-titlebar {
		width: calc(690 * var(--sp));
		height: calc(140 * var(--sp));
		margin: calc(60 * var(--sp)) auto 0;
		border-radius: calc(30 * var(--sp));
	}

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

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

	/* 部署紹介のSP実データは未受領のため、画像を上に積む縦積みレイアウトで暫定実装。 */
	.mtor-departments {
		margin-top: calc(80 * var(--sp));
		padding: calc(80 * var(--sp)) 0 calc(100 * var(--sp));
	}

	.mtor-dept-card {
		width: calc(690 * var(--sp));
		padding: calc(60 * var(--sp)) calc(50 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtor-dept-card--secondary {
		margin-top: calc(80 * var(--sp));
	}

	.mtor-dept {
		/* カード上辺ぶんの上乗せもSPの値に合わせる（padding 60 + 枠線1px）。 */
		scroll-margin-top: calc(120 * var(--sp) + 20px + 60 * var(--sp) + 1px);
	}

	.mtor-dept--with-image {
		position: static;
	}

	.mtor-dept__divider {
		margin: calc(60 * var(--sp)) 0;
	}

	.mtor-dept__heading {
		font-size: calc(30 * var(--sp));
		line-height: calc(30 * var(--sp));
	}

	.mtor-dept__meta {
		flex-direction: column;
		gap: calc(20 * var(--sp));
		margin-top: calc(30 * var(--sp));
	}

	.mtor-dept__tags {
		flex-direction: row;
		flex-wrap: wrap;
		gap: calc(10 * var(--sp));
	}

	.mtor-dept__tag {
		height: calc(40 * var(--sp));
		padding: 0 calc(16 * var(--sp));
		border-radius: calc(20 * var(--sp));
		font-size: calc(22 * var(--sp));
		line-height: calc(22 * var(--sp));
	}

	/* SPは幅が狭いため、タグ・事業所リストとも1列（タグを事業所の上に積む）にする。
	 * justify-items:startで、タグを行幅いっぱいに伸ばさず文字幅のまま左寄せにする。 */
	.mtor-dept__office-grid {
		grid-template-columns: 1fr;
		justify-items: start;
		row-gap: calc(10 * var(--sp));
		margin-top: calc(30 * var(--sp));
	}

	.mtor-dept__tag--empty {
		display: none;
	}

	.mtor-dept__office-row {
		justify-self: stretch;
		padding: calc(20 * var(--sp)) 0;
		font-size: calc(22 * var(--sp));
		line-height: calc(22 * var(--sp));
	}

	.mtor-dept__text {
		margin-top: calc(30 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtor-dept--with-image .mtor-dept__meta,
	.mtor-dept--with-image .mtor-dept__office-grid,
	.mtor-dept--with-image .mtor-dept__text {
		width: 100%;
	}

	.mtor-dept__image-wrap {
		position: relative; /* 内側のimgのposition:absoluteの基準を維持するため static ではなく relative にする */
		width: 100%;
		height: auto;
		aspect-ratio: 260 / 173;
		margin-top: calc(30 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtor-cta {
		min-height: calc(966 * var(--sp));
		height: auto;
		margin-top: calc(150 * var(--sp));
		margin-bottom: calc(150 * var(--sp));
		padding-top: calc(120 * var(--sp));
	}

	.mtor-cta__title--pc {
		display: none;
	}

	.mtor-cta__title--sp {
		display: block;
	}

	.mtor-cta__title {
		margin: 0 auto;
		font-size: calc(38 * var(--sp));
		line-height: calc(58 * var(--sp));
	}

	.mtor-cta__lead--pc {
		display: none;
	}

	.mtor-cta__lead--sp {
		display: block;
	}

	.mtor-cta__lead {
		width: calc(650 * var(--sp));
		margin: calc(60 * var(--sp)) auto 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		text-align: left;
	}

	.mtor-cta__actions {
		flex-direction: column;
		align-items: center;
		gap: calc(30 * var(--sp));
		margin-top: calc(80 * var(--sp));
	}

	.mtor-cta__btn {
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtor-cta__btn-text {
		margin-left: calc(40 * var(--sp));
		font-size: calc(24 * var(--sp));
		line-height: calc(24 * var(--sp));
	}

	.mtor-cta__btn-divider {
		width: calc(2 * var(--sp));
		height: calc(30 * var(--sp));
	}

	.mtor-cta__btn-arrow {
		width: calc(32 * var(--sp));
		margin-left: calc(40 * var(--sp));
		margin-right: calc(40 * var(--sp));
	}

	.mtor-cta__btn.is-viewing .mtor-cta__btn-arrow {
		animation: mtorArrowReveal 2s ease-out infinite;
	}

	.mtor-breadcrumb {
		/* フッターとの間隔は.mt-footer自体のpadding-topに任せる（二重にしない）。 */
		padding-left: calc(40 * var(--sp));
	}

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

	.mtor-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ワイド画面（1441px〜）：CTAの紺背景だけ画面幅へ延長する（TOPのCTAと同じ方法。中身は1440の枠のまま）。
 * 本文の枠を画面幅にする指定は common.css 側。 */
@media (min-width: 1441px) {
	.mtor-cta {
		position: relative;
		isolation: isolate;
	}

	.mtor-cta::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100cqw;
		transform: translateX(-50%);
		background: #1a355c;
		pointer-events: none;
	}
}