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

/* ---- 大枠コンテナ ---- */
.mtco {
	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;
}

.mtco img {
	display: block;
}

/* ==================== パンくずリスト ====================
 * <main>の末尾（フッター直前）に配置。フッターの上20px・左80pxの位置に左寄せ。 */
.mtco-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)に任せる（二重にしない）。 */
}

.mtco-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;
}

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

.mtco-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;
}

/* ==================== タイトルバー ====================
 * ベージュのパネルを原点にして、中の要素は px の絶対配置で置いていく。
 * 各要素の x / y は、このパネルの左上からの距離（Figma上のページ座標から
 * パネルの原点(30,150)を引いた値）。
 */
.mtco-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));
}

.mtco-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; /* letter-spacing込みの実幅が指定widthをわずかに超え、末尾の1文字だけ折り返るのを防ぐ */
	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;
}

/* 笑顔シェイプ：表示時に左右へ少し揺れる（平らな床に湾曲した物体を置いて、それが
 * 左右にコトンと1往復揺れるイメージ）。カタログ表紙の「カタカタ」揺れと同じ技法
 * （底辺の左右の端を交互に軸にして揺らす）だが、無限ループではなく1回だけ再生する。
 * 画面に入るまでは animation-play-state:paused で待機し、home.js 相当の company.js が
 * 画面内に入ったタイミングで .is-loaded を付与して開始する。 */
.mtco-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:
		mtcoSmileRock 1.2s ease-in-out,
		mtcoSmilePivot 1.2s linear;
	animation-play-state: paused;
}

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

/* 0%,100%:平ら → 25%:左に傾く → 50%:平ら（軸を右下に切替） → 75%:右に傾く → 100%:平ら */
@keyframes mtcoSmileRock {
	0%, 50%, 100% { rotate: 0deg; }
	25%           { rotate: -6deg; }
	75%           { rotate: 6deg; }
}

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

/* ==================== はじめに ====================
 * Figmaでは各要素が絶対配置だが、中間幅で崩れないよう通常フローの中央寄せパネルとして
 * 実装する。--pcスケールには頼らず、固定pxのフォントサイズ＋max-widthで組む（見出し以下の
 * 文字サイズはデザインの精密再現よりも可読性・崩れないことを優先）。
 * 改行位置はFigma通り<br>で明示しつつ、画面が狭い場合はさらに自然に折り返す。
 * 縦の間隔は、Figmaのtop値からヘッダー高(90px)を差し引いた上でのギャップを反映
 * （見出し→本文1=60px／本文間=20px／本文4→署名=40px）。 */
.mtco-intro {
	box-sizing: border-box;
	max-width: 650px; /* 本文4の実幅610px + 左右padding20pxずつ */
	margin: calc(150 * var(--pc)) auto 0; /* パネル間の間隔は中間幅でも比率を保つよう--pcでスケール */
	padding-inline: 20px;
	text-align: center;
}

.mtco-intro__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.15em;
	color: #0d3061;
}

/* SPは改行位置が異なる（3行）ため専用文言をグループごと用意する。PCでは非表示。 */
.mtco-intro__text-group--sp {
	display: none;
}

.mtco-intro__text {
	margin: 60px 0 0;
	white-space: nowrap; /* <br>で明示した改行位置以外では折り返さない（中途半端な位置での折り返し防止） */
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #333;
}

.mtco-intro__text + .mtco-intro__text {
	margin-top: 20px;
}

.mtco-intro__signature {
	margin: 40px 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #333;
}

/* ボタン（組織編成について）：文字パネルと同じ通常フロー・中央寄せで配置。
 * ラベル左・仕切り線＋矢印右は home.css の各種ボタン（お知らせ一覧など）と同じ構成。 */
.mtco-intro__btn {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 341px;
	height: 70px;
	margin: 60px auto 0;
	padding: 0 30px 0 40px;
	background: #333;
	border-radius: 15px;
	text-decoration: none;
}

/* SPはボタン文言が「組織構成について」に変わる。PCでは非表示。 */
.mtco-intro__btn-label--sp {
	display: none;
}

.mtco-intro__btn-label {
	margin-right: auto;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.06em;
	color: #fff;
}

.mtco-intro__btn-divider {
	flex: none;
	width: 1px;
	height: 30px;
	margin-right: 30px;
	background: #fff;
}

.mtco-intro__btn-arrow {
	position: relative;
	flex: none;
	width: 18px;
	height: 1.5px;
	/* 線は ::before（ホバー時の伸長アニメ用）。要素自体は箱のみ。 */
}

.mtco-intro__btn-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform-origin: left center;
}

.mtco-intro__btn-arrow::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* 矢印の伸びホバー演出（home.cssと同じ技法：::beforeをscaleXで伸ばし、::afterの先端をtranslateで動かす）。
 * --arrow-head-x は各ボタン側で「自分の箱の全幅（負値）」を指定する（箱幅が違っても使い回せるように）。 */
@keyframes mtcoArrowLine { from { transform: scaleX(0); } }
@keyframes mtcoArrowHead { from { translate: var(--arrow-head-x) 0; } }

.mtco-intro__btn:hover .mtco-intro__btn-arrow::before {
	animation: mtcoArrowLine 0.3s ease-out;
}

.mtco-intro__btn:hover .mtco-intro__btn-arrow::after {
	--arrow-head-x: -18px;
	animation: mtcoArrowHead 0.3s ease-out;
}

/* ==================== 社長あいさつ ====================
 * 絶対配置ではなく通常フロー。left:30/width:1380（1440キャンバス左右30pxインセット）は
 * 他パネル（タイトルバー等）と同じ考え方でmargin/widthに変換。中身の分だけ伸びるよう
 * heightではなくmin-heightにしておく。
 * 文字と写真はgridの2カラム（650fr:400fr＝Figmaの実幅比）にし、SPになるまで（〜751px）は
 * 折り返さずに比率を保ったまま一緒に縮む＝左右どちらかが極端に潰れたり、途中で縦積みに
 * 変わって崩れて見えたりしない。 */
.mtco-panel {
	display: grid;
	grid-template-columns: 650fr 400fr;
	grid-template-areas:
		"heading photo"
		"message photo";
	align-items: start;
	gap: 0 40px;
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	min-height: calc(833 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding: calc(150 * var(--pc)) calc(70 * var(--pc)) calc(60 * var(--pc));
	background: #f9f9f9;
	border-radius: calc(30 * var(--pc));
}

/* 見出し（社長あいさつ）：写真より17px下から始まる（Figma座標: 写真top150／見出しtop167）。
 * gridを「見出し／本文」「写真」の2列×2行にし、写真は右カラムで2行分（両方の高さ）を占める。 */
.mtco-panel__heading {
	grid-area: heading;
	margin: 0;
	margin-top: 17px;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.15em;
	color: #0d3061;
}

.mtco-message {
	grid-area: message;
	min-width: 0; /* gridトラック内で文字が自然に折り返せるようにする */
	max-width: 650px; /* 広い画面でこれ以上大きくならないよう上限だけ設ける */
}

/* 写真：gridの右カラム幅いっぱいに追従しつつ、Figmaの実サイズ(400×560)を上限にする。
 * aspect-ratioで比率を保つので、カラムが縮んでも歪まない。見出し＋本文の2行分を占める。 */
.mtco-panel__photo-wrap {
	grid-area: photo;
	position: relative;
	width: 100%;
	max-width: 400px;
	height: auto;
	aspect-ratio: 400 / 560;
	overflow: hidden; /* 内側のimgを拡大トリミングする際、はみ出しを隠す */
	border-radius: calc(15 * var(--pc));
	justify-self: end;
}

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

/* ==================== 会社概要 ====================
 * 他パネルと同じ考え方（left:30/width:1380→margin auto+width、パネル内の左右70pxはpadding）。
 * 画面端から左右100の余白にそろえる（画像500＋間隔90＋リスト650＝1240）。
 * 画像と会社概要リストはgridの2カラム（500fr:650fr＝Figmaの実幅比）にし、社長あいさつと
 * 同じ理由でSPになるまで折り返さずに比率を保ったまま縮む。間隔も画面幅に比例させる。 */
.mtco-photo {
	display: grid;
	grid-template-columns: 500fr 650fr;
	align-items: start;
	gap: calc(90 * var(--pc));
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding-left: calc(70 * var(--pc));
	padding-right: calc(70 * var(--pc));
}

.mtco-photo__image-wrap {
	position: relative;
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
	aspect-ratio: 500 / 304;
	overflow: hidden; /* 内側のimgを拡大トリミングする際、はみ出しを隠す */
	border-radius: calc(15 * var(--pc)); /* 社長あいさつの写真と同じ角丸 */
}

/* company-pc-new.jpg（2026-09差し替え）。Figma上は原寸1320×878で配置されており、
 * その中の500×304.35の範囲（left:340, top:359相当）だけを見せたいとのことだったので、
 * imgを1320/500=264%に拡大し、left/topのマイナスオフセットでその範囲を窓に合わせている
 * （%指定はwrapの実寸に対する比率のため、レスポンシブに縮んでも位置関係は崩れない）。 */
.mtco-photo__image {
	position: absolute;
	top: -118%;    /* -359 / 304.35 * 100 */
	left: -68%;    /* -340 / 500   * 100 */
	width: 264%;   /* 1320 / 500   * 100 */
	max-width: none; /* base.css の max-width:100% を解除 */
	height: auto;
}

/* PCのみ：右側の会社概要リストがすべてスクロールされるまで、写真を画面内に固定する
 * （SPは通常スクロールでよいとのことなので767px以下は対象外）。ヘッダー（sticky, 高さ90px）の
 * 下に来るよう top をヘッダー高ぶんオフセットする。 */
@media (min-width: 768px) {
	.mtco-photo__image-wrap {
		position: sticky;
		top: calc(90 * var(--pc) + 20px);
	}
}

.mtco-profile {
	min-width: 0;
	max-width: 650px;
}

.mtco-profile__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.15em;
	color: #0d3061;
}

.mtco-profile__list {
	margin: 0;
}

/* 行は管理画面のリピーターで増減できるため、先頭かどうかは :first-child で判定する。
 * 区切り線は全行一律なので、margin+border+paddingの合計が常に60px（先頭行だけ90px）に
 * なるよう組む。 */
.mtco-profile__row {
	display: flex;
	margin-top: 30px;
	padding-top: 29px;
	border-top: 1px solid #e9e9e9;
}

.mtco-profile__row:first-child {
	margin-top: 60px; /* 見出しからの間隔だけ広い */
}

.mtco-profile__label {
	flex: 0 0 127px;
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

.mtco-profile__value {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.06em;
	color: #333;
}

.mtco-message__text {
	margin: 80px 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #333;
}

.mtco-message__text + .mtco-message__text {
	margin-top: 20px;
}

.mtco-message__signature {
	margin: 40px 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== 沿革 ====================
 * 他パネルと同じ考え方（left:30/width:1380→margin auto+width）。前セクション（会社概要）の
 * 最後の行の下端からの間隔は150pxで他パネルと同じリズム。中身は今後追加予定なのでheightでは
 * なくmin-heightにしておく。見出しの位置（左70px・上100px）はpaddingで再現。 */
.mtco-panel2 {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	min-height: calc(1574 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding: calc(100 * var(--pc)) calc(70 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(30 * var(--pc));
}

.mtco-panel2__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* 年表：年代セル（ベージュ250px・中央寄せ）＋テキストセル（白・残り幅・左寄せ、5pxの隙間）を
 * 1行にする。行間は2行目の位置から確定（10px）。 */
.mtco-history {
	list-style: none;
	margin: calc(60 * var(--pc)) 0 0;
	padding: 0;
}

.mtco-history__row {
	display: flex;
	align-items: stretch;
	min-height: 66px;
}

.mtco-history__row + .mtco-history__row {
	margin-top: 10px;
}

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

.mtco-history__text {
	/* ここは display:flex にしない。
	 * スマホのブラウザは本文中の住所や電話番号を勝手にリンク化して要素を挿し込むことがある
	 * （「多治見市上山町1丁目57番地に…」の住所部分が実機のChromeで対象になる）。
	 * この箱がフレックスコンテナだと、挿し込まれた要素と残りのテキストが別々のアイテムに
	 * 分かれて横に並んでしまい、文の途中に大きな空白ができる。
	 * ブロックにしておけば、要素が挿し込まれても普通の行として流れる。
	 * 上下中央寄せは下の padding 20px と .mtco-history__row の min-height:66px で
	 * 成立しているので、flexによる中央寄せは元々不要。 */
	display: block;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	margin-left: 5px;
	/* 複数行になる行でもテキスト上下に20pxずつ余白を確保する（1行の場合は26+40=66pxで
	 * 従来通り.mtco-history__rowのmin-height:66pxと一致）。 */
	padding: 20px 0 20px 40px;
	background: #fff;
	border-radius: calc(15 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== 国内・海外拠点 ====================
 * 他パネルと同じ考え方（left:30/width:1380→margin auto+width、左右70pxはpadding）。
 * 会社概要と同じく画面端から左右100の余白にそろえる（地図700＋間隔60＋カード480＝1240）。
 * 前セクション（沿革パネル）の下端からの間隔は150pxで他パネルと同じリズム。 */
.mtco-locations {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding-left: calc(70 * var(--pc));
	padding-right: calc(70 * var(--pc));
}

/* SPは見出し文言が「国内拠点」に変わる。PCでは非表示。 */
.mtco-locations__title--sp {
	display: none;
}

.mtco-locations__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* 地図と拠点カードは横並び。gridの2カラム（700fr:480fr＝Figmaの実幅比）にし、
 * 社長あいさつ・会社概要と同じ理由でSPになるまで折り返さずに比率を保ったまま縮む。 */
.mtco-locations__row {
	display: grid;
	grid-template-columns: 700fr 480fr;
	align-items: start;
	/* 間隔も画面幅に比例させ、どの幅でも列幅が地図700：カード480のままになるようにする。 */
	gap: calc(60 * var(--pc));
	margin-top: calc(60 * var(--pc));
}

/* 地図パネル：geometry.svg（700×650）をベージュ地の角丸30・overflow:hiddenでマスクする
 * （Figmaの「Mask group」相当）。ピン（pin.svg）は地図パネルの左上を原点とした絶対配置で、
 * --pcスケールと完全に同期させる必要があるため、（カードとは違い）幅は100%+max-widthではなく
 * 固定の calc(700 * var(--pc)) のままにする（そうしないとピン座標とマップの実サイズがずれる）。 */
.mtco-locations__map {
	position: relative;
	width: calc(700 * var(--pc));
	height: calc(650 * var(--pc));
	overflow: hidden;
	background: #f7f5eb;
	border-radius: calc(30 * var(--pc));
}

/* PCのみ：右側の拠点カードがすべてスクロールされるまで、地図を画面内に固定する
 * （社長あいさつのCEO写真と同じ技法。SPは通常スクロールでよいとのことなので767px以下は対象外）。
 * position:sticky でも position:relative と同様に子（ピン）の絶対配置の基準になるので、
 * ピンの座標計算には影響しない。 */
@media (min-width: 768px) {
	.mtco-locations__map {
		position: sticky;
		top: calc(90 * var(--pc) + 20px);
	}
}

.mtco-locations__geometry {
	display: block;
	width: 100%;
	height: 100%;
}

/* ピンはリンク（.pin-link）でクリック可能にし、画像自体はその中を埋めるだけにする。 */
.mtco-locations__pin-link {
	position: absolute;
	display: block;
	width: calc(27 * var(--pc));
	height: calc(33 * var(--pc));
}

.mtco-locations__pin {
	display: block;
	width: 100%;
	height: 100%;
	/* 拡大の中心を、地図上の位置を指している白丸の中心（アイコン左上から13.5,13.5。
	 * アイコンは27×33なので縦は約41%）に合わせる。ここを軸にすると、大きくなっても
	 * 指している場所が動かない。 */
	transform-origin: 50% 41%;
	transition: scale 0.2s ease-out, opacity 0.2s ease-out;
}

/* ホバー：少し大きく＋少し透過して、押せることを伝える。
 * タッチ端末ではホバーが residual に残る（指を離しても効いたままになる）ため、
 * hover が使える環境に限定する。 */
@media (hover: hover) {
	.mtco-locations__pin-link:hover .mtco-locations__pin {
		scale: 1.25;
		opacity: 0.7;
	}
}

/* 押下中：ホバーより少し縮めて、押し込んだ感じを出す。タッチでもこれは効く。 */
.mtco-locations__pin-link:active .mtco-locations__pin {
	scale: 1.1;
	opacity: 0.6;
	transition-duration: 0.08s;
}

/* キーボード操作でも同じ見た目にする。 */
.mtco-locations__pin-link:focus-visible .mtco-locations__pin {
	scale: 1.25;
	opacity: 0.7;
}

/* 動きを減らす設定の端末では、拡大せず透過だけにする。 */
@media (prefers-reduced-motion: reduce) {
	.mtco-locations__pin {
		transition: opacity 0.2s ease-out;
	}

	.mtco-locations__pin-link:hover .mtco-locations__pin,
	.mtco-locations__pin-link:active .mtco-locations__pin,
	.mtco-locations__pin-link:focus-visible .mtco-locations__pin {
		scale: 1;
	}
}

/* 各拠点の位置（地図パネル左上を原点とした相対座標）。
 * pin.svg内の白丸中心はアイコン左上から(13.5,13.5)なので、Figmaの円（Ellipse 295、
 * 直径11px＝半径5.5）の左上座標から(8,8)引いた位置に置けば中心が一致する。 */
.mtco-locations__pin-link--1 { left: calc(525 * var(--pc)); top: calc(273 * var(--pc)); }
.mtco-locations__pin-link--2 { left: calc(485 * var(--pc)); top: calc(284 * var(--pc)); }
.mtco-locations__pin-link--3 { left: calc(442 * var(--pc)); top: calc(302 * var(--pc)); }
.mtco-locations__pin-link--4 { left: calc(331 * var(--pc)); top: calc(334 * var(--pc)); }
.mtco-locations__pin-link--5 { left: calc(144 * var(--pc)); top: calc(378 * var(--pc)); }
.mtco-locations__pin-link--6 { left: calc(147 * var(--pc)); top: calc(413 * var(--pc)); }
.mtco-locations__pin-link--7 { left: calc(97 * var(--pc));  top: calc(516 * var(--pc)); }
.mtco-locations__pin-link--8 { left: calc(31 * var(--pc));  top: calc(572 * var(--pc)); }
.mtco-locations__pin-link--9 { left: calc(567 * var(--pc)); top: calc(76 * var(--pc)); }

/* カードは複数並べられる（それぞれ独立した白い箱）。カード間は20px。 */
.mtco-locations__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 480px;
}

/* 拠点カード：白地・角丸30・薄グレー枠。中身（拠点数）に応じて高さは可変。 */
.mtco-locations__card {
	box-sizing: border-box;
	padding: 30px;
	background: #fff;
	border: 1px solid #e9e9e9;
	border-radius: 30px;
}

/* ピンからのアンカーリンクでジャンプした時、sticky化しているヘッダーの下に隠れないよう
 * ジャンプ先の上に余白を確保する。フッターの「会社概要」リンク（#profile）も同様。 */
.mtco-photo {
	scroll-margin-top: calc(90 * var(--pc) + 20px);
}

/* 拠点はカードの内側にあり、着地の基準になるのは拠点の枠（＝カードの内側）なので、
 * カード上辺はさらに padding(30px) と枠線(1px) だけ上にある。その31pxを足さないと、
 * カードの上の角丸と枠線がヘッダーの下に潜って隠れてしまう。 */
.mtco-locations__office {
	scroll-margin-top: calc(90 * var(--pc) + 20px + 31px);
}

.mtco-locations__office + .mtco-locations__office {
	margin-top: 60px;
	padding-top: 29px;
	border-top: 1px solid #e9e9e9;
}

.mtco-locations__office-name {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtco-locations__office-row {
	display: flex;
	margin-top: 20px;
}

.mtco-locations__office-row + .mtco-locations__office-row {
	margin-top: 10px;
}

.mtco-locations__office-label {
	flex: 0 0 79px;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

.mtco-locations__office-value {
	flex: 1;
	min-width: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.06em;
	color: #333;
}

.mtco-locations__office-value--underline {
	text-decoration-line: underline;
}

/* ==================== 物流拠点 ====================
 * 他セクション見出しと同じ考え方（left:30/width:1380→margin auto+width、左70pxはpadding）。
 * 前セクション（国内・海外拠点）は拠点数に応じて高さが可変なので、Figmaのtop差分ではなく
 * 他パネルと同じ150pxの間隔で統一する。 */
.mtco-logistics {
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
	padding: 0 calc(70 * var(--pc));
}

.mtco-logistics__title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* 倉庫カード：2列グリッド（610px×2＋隙間20px＝ちょうどコンテナ幅に収まる）。
 * 倉庫はACFリピーターで増減できるので、行数が増えれば自然に折り返して増える。 */
.mtco-logistics__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: calc(60 * var(--pc));
}

.mtco-logistics__card {
	box-sizing: border-box;
	min-height: 163px;
	padding: 40px;
	background: #f9f9f9;
	border-radius: 30px;
}

.mtco-logistics__card-name {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 0.06em;
	color: #333;
}

.mtco-logistics__card-row {
	display: flex;
	margin-top: 40px;
}

.mtco-logistics__card-label {
	flex: 0 0 49px;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

.mtco-logistics__card-value {
	flex: 1;
	min-width: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== CTA（ご相談ください） ====================
 * HOME（.mtop-cta）と同じデザイン。.mtco（メイン枠）が既にキャンバス幅そのものなので、
 * 他パネルと違い左右のinset（30px）を付けず、幅いっぱいの紺パネルにする。 */
.mtco-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)); /* --pcでスケールし、中間幅でもパネルと同じ比率を保つ */
	padding-top: calc(180 * var(--pc));
	background: #1a355c;
	text-align: center;
}

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

.mtco-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;
}

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

.mtco-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行ごとの自動折り返しは止める。
 * 幅はテキストに合わせて自動で広げる。 */
.mtco-cta__lead--pc {
	width: max-content;
	white-space: nowrap;
}

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

.mtco-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;
}

.mtco-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;
}

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

.mtco-cta__btn-arrow {
	position: relative;
	flex: none;
	width: calc(18 * var(--pc));
	height: calc(1.5 * var(--pc));
	margin-left: calc(29 * var(--pc));
	margin-right: calc(30 * var(--pc));
	/* 線は ::before（ホバー時の伸長アニメ用）。要素自体は箱のみ。 */
}

.mtco-cta__btn-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #333;
	transform-origin: left center;
}

.mtco-cta__btn-arrow::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--pc));
	top: 50%;
	width: calc(7 * var(--pc));
	height: calc(7 * var(--pc));
	border-top: calc(1.5 * var(--pc)) solid #333;
	border-right: calc(1.5 * var(--pc)) solid #333;
	transform: translateY(-50%) rotate(45deg);
}

.mtco-cta__btn:hover .mtco-cta__btn-arrow::before {
	animation: mtcoArrowLine 0.3s ease-out;
}

.mtco-cta__btn:hover .mtco-cta__btn-arrow::after {
	--arrow-head-x: calc(-18 * var(--pc));
	animation: mtcoArrowHead 0.3s ease-out;
}

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

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

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

	.mtco-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を差し引く）。 */
	.mtco-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));
	}

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

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

	/* ==================== はじめに ====================
	 * PCはmax-width650px固定pxで組んだが、SPは--sp基準の他セクションと合わせて
	 * calc(N * var(--sp))でスケールする（767px以下の専用領域なので、PCの中間幅問題は起きない）。
	 * 改行位置がPCと異なる（3行）ため、--pc/--spをグループごと丸ごと出し分ける。 */
	.mtco-intro {
		max-width: calc(692 * var(--sp)); /* 最長行(本文4=652px) + 左右20pxずつ */
		margin-top: calc(120 * var(--sp));
		padding-inline: calc(20 * var(--sp));
	}

	.mtco-intro__title {
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtco-intro__text-group--pc {
		display: none;
	}

	.mtco-intro__text-group--sp {
		display: block;
	}

	.mtco-intro__text {
		margin-top: calc(60 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(56 * var(--sp));
	}

	.mtco-intro__text-group--sp .mtco-intro__text + .mtco-intro__text {
		margin-top: calc(30 * var(--sp));
	}

	.mtco-intro__signature {
		margin-top: calc(60 * var(--sp));
		font-size: calc(28 * var(--sp));
		line-height: calc(56 * var(--sp));
	}

	.mtco-intro__btn {
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		margin-top: calc(60 * var(--sp));
		padding: 0 calc(40 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtco-intro__btn-label--pc {
		display: none;
	}

	.mtco-intro__btn-label--sp {
		display: inline;
	}

	.mtco-intro__btn-label {
		font-size: calc(24 * var(--sp));
		line-height: calc(24 * var(--sp));
	}

	.mtco-intro__btn-divider {
		width: calc(1 * var(--sp));
		height: calc(30 * var(--sp));
		margin-right: calc(40 * var(--sp));
	}

	.mtco-intro__btn-arrow {
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: 0;
		margin-right: 0;
	}

	.mtco-intro__btn-arrow::after {
		width: calc(9 * var(--sp));
		height: calc(9 * var(--sp));
		border-top-width: calc(2 * var(--sp));
		border-right-width: calc(2 * var(--sp));
	}

	/* ==================== 社長あいさつ ====================
	 * PCは「見出し／本文」列と「写真」列の横並びgridだが、SPは見出し→写真→本文の縦積みに
	 * 並び順が変わる。grid-template-areasはDOM順に関係なく配置できるので、
	 * DOM（見出し→本文→写真）はそのままに、SPだけ表示順を並び替える。 */
	.mtco-panel {
		grid-template-columns: 1fr;
		grid-template-areas:
			"heading"
			"photo"
			"message";
		gap: 0;
		width: calc(690 * var(--sp));
		min-height: calc(1959 * var(--sp));
		margin-top: calc(150 * var(--sp));
		padding: calc(100 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtco-panel__heading {
		margin-top: 0;
		text-align: center;
		font-size: calc(36 * var(--sp));
		line-height: calc(36 * var(--sp));
	}

	.mtco-message {
		max-width: none;
	}

	.mtco-panel__photo-wrap {
		justify-self: center;
		width: 100%;
		max-width: calc(550 * var(--sp));
		aspect-ratio: 550 / 770;
		margin-top: calc(60 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtco-message__text {
		margin-top: calc(60 * var(--sp)); /* 写真→本文1 */
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtco-message__text + .mtco-message__text {
		margin-top: calc(30 * var(--sp));
	}

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

	/* ==================== 会社概要 ====================
	 * PCはラベル左・値右の横並びだが、SPはラベル上・値下の縦積みに変わる。
	 * 区切り線もPCは一部の行だけだったが、SPは全行に一律で入る。
	 * 表示順もPC（画像→リスト、横並び）と違い、SPはリスト→画像（画像が一番下）の縦積みになるため、
	 * grid-template-areasでDOM順（画像→プロフィール）とは逆に並び替える。
	 * 画像は左右インセットなし（パネル幅いっぱい690px）。文字側だけ40pxの左右パディングを持たせる。 */
	.mtco-photo {
		grid-template-columns: 1fr;
		grid-template-areas:
			"profile"
			"image";
		gap: 0; /* PC用のgap:90がそのまま残ると画像の上に余分な隙間ができるため打ち消す */
		width: calc(690 * var(--sp));
		margin-top: calc(150 * var(--sp));
		padding-left: 0;
		padding-right: 0;
	}

	.mtco-photo__image-wrap {
		grid-area: image;
		max-width: 100%;
		aspect-ratio: 690 / 420;
		margin-top: calc(60 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtco-profile {
		grid-area: profile;
		max-width: none;
		box-sizing: border-box;
		padding: 0 calc(40 * var(--sp));
	}

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

	.mtco-profile__row {
		flex-direction: column;
		margin-top: calc(40 * var(--sp));
		padding-top: calc(40 * var(--sp));
	}

	.mtco-profile__row:first-child {
		margin-top: calc(60 * var(--sp));
	}

	.mtco-profile__label {
		flex: none;
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtco-profile__value {
		margin-top: calc(10 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	/* ==================== 沿革 ====================
	 * PCは年代セル・テキストセルが横並びだが、SPは年代セルが上・テキストセルが下の縦積みになる。
	 * 年代・テキストとも中身の行数に応じて高さが伸びる（テキストは複数行になる年もある）。
	 * 外側パネル（ベージュ）自体のFigma座標は未受領のため、他パネルと同じ150px間隔・PCと同じ
	 * padding-top:100pxを暫定で使う。 */
	.mtco-panel2 {
		width: calc(690 * var(--sp));
		min-height: 0;
		margin: calc(150 * var(--sp)) auto 0;
		padding: calc(100 * var(--sp)) 0;
		border-radius: calc(30 * var(--sp));
	}

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

	.mtco-history {
		margin-top: calc(60 * var(--sp));
		padding: 0 calc(40 * var(--sp));
	}

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

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

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

	.mtco-history__text {
		flex: none;
		width: 100%;
		box-sizing: border-box;
		margin-left: 0;
		margin-top: calc(10 * var(--sp));
		padding: 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));
	}

	/* ==================== 国内・海外拠点 ====================
	 * PCは地図とカードが横並びだったが、SPは地図が上・カードが下の縦積みになる。
	 * カードは元々「複数拠点を1枚にまとめられる」構造だが、ラベル・値は縦積みではなく
	 * PCと同じ横並びのまま（会社概要のような縦積みにはならない）。
	 * ピンの位置データ（Ellipse座標）はまだ受領していないため、SPでは一旦非表示にしている。 */
	.mtco-locations {
		width: calc(690 * var(--sp));
		margin: calc(150 * var(--sp)) auto 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* ピンのアンカーリンク着地位置：SPヘッダー高(120px)基準に上書きする
	 * （無指定だとPC用のcalc(90 * var(--pc) + 20px)のままになり、SP幅では正しくずれる）。 */
	.mtco-photo {
		scroll-margin-top: calc(120 * var(--sp) + 20px);
	}

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

	.mtco-locations__title--pc {
		display: none;
	}

	.mtco-locations__title--sp {
		display: block;
	}

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

	.mtco-locations__row {
		grid-template-columns: 1fr;
		gap: calc(60 * var(--sp));
		margin-top: calc(60 * var(--sp));
	}

	.mtco-locations__map {
		width: 100%;
		height: auto;
		aspect-ratio: 690 / 640;
	}

	/* ピン番号（1〜9）とリンク先の拠点はPCと同じ（$mt_map_pin_targets）。SPは地図が大きく
	 * 表示される分、ピン自体もPCより大きい（Ellipse 295が直径16.3px＝PCの11pxの約1.48倍）ため、
	 * pin.svgのサイズもその比率で拡大し、中心が一致するオフセットも比率に合わせて再計算している。 */
	.mtco-locations__pin-link {
		width: calc(40 * var(--sp));
		height: calc(49 * var(--sp));
	}

	/* SPで頂いた9座標は緯度順（北→南）だったため、PCのピン番号（東京=1,本社=2,大阪=3,福岡=4,
	 * 上海=5,寧波=6,泉州=7,広東=8,北海道=9）に合わせて並び替えている。 */
	.mtco-locations__pin-link--1 { left: calc(512 * var(--sp)); top: calc(254 * var(--sp)); } /* 東京 */
	.mtco-locations__pin-link--2 { left: calc(476 * var(--sp)); top: calc(267 * var(--sp)); } /* 本社 */
	.mtco-locations__pin-link--3 { left: calc(428 * var(--sp)); top: calc(282 * var(--sp)); } /* 大阪 */
	.mtco-locations__pin-link--4 { left: calc(319 * var(--sp)); top: calc(314 * var(--sp)); } /* 福岡 */
	.mtco-locations__pin-link--5 { left: calc(126 * var(--sp)); top: calc(339 * var(--sp)); } /* 上海 */
	.mtco-locations__pin-link--6 { left: calc(126 * var(--sp)); top: calc(393 * var(--sp)); } /* 寧波 */
	.mtco-locations__pin-link--7 { left: calc(91 * var(--sp));  top: calc(491 * var(--sp)); } /* 泉州 */
	.mtco-locations__pin-link--8 { left: calc(22 * var(--sp));  top: calc(549 * var(--sp)); } /* 広東 */
	.mtco-locations__pin-link--9 { left: calc(554 * var(--sp)); top: calc(60 * var(--sp)); } /* 北海道 */

	.mtco-locations__cards {
		max-width: none;
		gap: calc(30 * var(--sp));
	}

	.mtco-locations__card {
		padding: calc(60 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtco-locations__office-name {
		font-size: calc(30 * var(--sp));
		line-height: calc(30 * var(--sp));
	}

	.mtco-locations__office-row {
		margin-top: calc(40 * var(--sp));
	}

	.mtco-locations__office-row + .mtco-locations__office-row {
		margin-top: calc(20 * var(--sp));
	}

	.mtco-locations__office-label {
		flex: 0 0 calc(139 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtco-locations__office-value {
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	/* ==================== 物流拠点 ====================
	 * PCは2列グリッドだが、SPは倉庫ごとに幅いっぱいの1枚のカードが縦に並ぶ
	 * （国内・海外拠点のカードと同じ考え方）。ラベル・値は住所も含めて横並びのまま
	 * （会社概要のような縦積みにはならない）。2件目以降の行間はまだ実例を受領していないため、
	 * 他セクションと同じ20pxを暫定で使う。 */
	.mtco-logistics {
		width: calc(690 * var(--sp));
		margin: calc(150 * var(--sp)) auto 0;
		padding: 0;
	}

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

	.mtco-logistics__grid {
		grid-template-columns: 1fr;
		gap: calc(20 * var(--sp));
		margin-top: calc(60 * var(--sp));
	}

	.mtco-logistics__card {
		min-height: 0;
		padding: calc(60 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtco-logistics__card-name {
		font-size: calc(30 * var(--sp));
		line-height: calc(30 * var(--sp));
	}

	.mtco-logistics__card-row {
		margin-top: calc(50 * var(--sp));
	}

	.mtco-logistics__card-row + .mtco-logistics__card-row {
		margin-top: calc(20 * var(--sp));
	}

	.mtco-logistics__card-label {
		flex: 0 0 calc(84 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtco-logistics__card-value {
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	/* ==================== CTA（ご相談ください） ====================
	 * TOP（.mtop-cta）のSP実装と同じデザイン。 */
	.mtco-cta {
		min-height: calc(966 * var(--sp));
		height: auto;
		margin-top: calc(150 * var(--sp));
		/* TOPの.mtop-cta（最後尾セクション）と違い、会社案内はCTAの後にパンくずが続くため、
		 * 0ではなく他パネルと同じ150pxのmbを持たせる。 */
		margin-bottom: calc(150 * var(--sp));
		padding-top: calc(120 * var(--sp));
	}

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

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

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

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

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

	.mtco-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;
	}

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

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

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

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

	.mtco-cta__btn-arrow {
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: calc(40 * var(--sp));
		margin-right: calc(40 * var(--sp));
	}

	.mtco-cta__btn-arrow::after {
		right: calc(-1 * var(--sp));
		width: calc(9 * var(--sp));
		height: calc(9 * var(--sp));
		border-top: calc(2 * var(--sp)) solid #333;
		border-right: calc(2 * var(--sp)) solid #333;
	}

	.mtco-cta__btn.is-viewing .mtco-cta__btn-arrow::before {
		animation: mtcoArrowLine 2s ease-out infinite;
	}

	.mtco-cta__btn.is-viewing .mtco-cta__btn-arrow::after {
		--arrow-head-x: calc(-24 * var(--sp));
		animation: mtcoArrowHead 2s ease-out infinite;
	}
}


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

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