/**
 * コーポレート「お知らせ詳細」ページのスタイル。
 * ACFのFlexible Contentで組み立てるブロック（見出し・本文・画像・画像2カラム・
 * 画像カルーセル・区切り線・情報カード・情報テーブル・ボタン・SNSアイコン列）に対応する。
 * スケール係数（--pc/--sp）・キャンバス幅（--mt-canvas）は common.css / base.css の :root で定義済み。
 */

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

.mtns img {
	display: block;
}

/* ==================== 記事ヘッダー（お知らせマーク＋日付＋タイトル） ====================
 * 全ページ共通のベージュのタイトルバーは使わず、このページ専用のヘッダーにする。
 * 位置・余白は旧タイトルバーと同じ枠（幅1380・上端から60・左右余白70）を流用し、
 * 中に「マーク＋日付（上寄せ）」と「タイトル（複数行可）」を横並びに配置する。 */
.mtns-head {
	display: flex;
	align-items: flex-start;
	gap: calc(100 * var(--pc));
	box-sizing: border-box;
	width: calc(1380 * var(--pc));
	margin: calc(60 * var(--pc)) auto 0;
	padding: 0 calc(70 * var(--pc));
}

.mtns-head__meta {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
}

.mtns-head__mark {
	width: calc(91 * var(--pc));
	height: calc(34 * var(--pc));
}

.mtns-head__date {
	margin: calc(30 * var(--pc)) 0 0;
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(16 * var(--pc));
	line-height: calc(16 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

.mtns-head__date--sp {
	display: none;
}

.mtns-head__title {
	flex: 1;
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(34 * var(--pc));
	line-height: calc(51 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* ==================== 記事本文 ====================
 * カード幅1000px・キャンバス中央寄せ（左右インセット220px、お知らせ一覧のカードと同じ）。
 * カード内余白は上下100px・左右80px（コンテンツ幅840px）。記事ヘッダーからの間隔は標準の150px。 */
.mtns-article-section {
	box-sizing: border-box;
	width: calc(1000 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
}

.mtns-article {
	box-sizing: border-box;
	width: 100%;
	padding: calc(100 * var(--pc)) calc(80 * var(--pc));
	background: #f9f9f9;
	border-radius: calc(30 * var(--pc));
}

/* パーツ間はPC/SPともデザイン基準80、区切り線の上下はPC80・SP100。画面幅に比例して拡縮する。 */
.mtns-block {
	margin-top: calc(80 * var(--pc));
}

.mtns-article > .mtns-block:first-child {
	margin-top: 0;
}

/* ---- 見出し ---- */
.mtns-block--heading {
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(22 * var(--pc));
	line-height: calc(33 * var(--pc));
	letter-spacing: 0.06em;
	color: #0d3061;
}

/* ---- 本文 ---- */
.mtns-block--text {
	font-family: "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;
}

/* ---- 画像（単体） ---- */
.mtns-block--image {
	width: 100%;
}

.mtns-block__img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* 単体・2カラムの画像は、アップロードした画像の実寸より大きく引き伸ばさない
 * （小さい画像を枠いっぱいに拡大すると粗くなるため）。枠より大きい画像だけ枠幅に縮める。
 * 枠より小さい画像は枠の中央に置く。
 * カルーセルはスライド幅をそろえる必要があるため、上の width:100% のままにする。 */
.mtns-block--image .mtns-block__img,
.mtns-image-2col__item .mtns-block__img {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mtns-block__caption {
	margin: calc(10 * var(--pc)) 0 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(12 * var(--pc));
	line-height: calc(24 * var(--pc));
	letter-spacing: 0.06em;
	color: #b3b3b3;
}

/* ---- 画像2カラム ---- */
.mtns-block--image-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 calc(40 * var(--pc));
}

/* ---- 画像カルーセル ---- */
.mtns-carousel {
	position: relative;
	width: calc(600 * var(--pc));
	margin-left: auto;
	margin-right: auto;
}

.mtns-carousel__viewport {
	overflow: hidden;
}

.mtns-carousel__track {
	display: flex;
	transition: transform 0.3s ease;
}

.mtns-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
}

.mtns-carousel__caption {
	text-align: center;
}

.mtns-carousel__arrow {
	position: absolute;
	top: calc(50% - 12px);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(40 * var(--pc));
	height: calc(40 * var(--pc));
	background: #e9e9e9;
	border: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

.mtns-carousel__arrow--prev {
	left: calc(-60 * var(--pc));
}

.mtns-carousel__arrow--next {
	right: calc(-60 * var(--pc));
}

.mtns-carousel__arrow-icon {
	position: relative;
	width: calc(10 * var(--pc));
	height: calc(10 * var(--pc));
	border-top: 2px solid #333;
	border-right: 2px solid #333;
}

.mtns-carousel__arrow--prev .mtns-carousel__arrow-icon {
	transform: rotate(-135deg);
	margin-right: calc(-2 * var(--pc));
}

.mtns-carousel__arrow--next .mtns-carousel__arrow-icon {
	transform: rotate(45deg);
	margin-left: calc(-2 * var(--pc));
}

.mtns-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(20 * var(--pc));
	margin-top: calc(30 * var(--pc));
}

.mtns-carousel__dot {
	width: calc(10 * var(--pc));
	height: calc(10 * var(--pc));
	padding: 0;
	background: #e9e9e9;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.mtns-carousel__dot.is-active {
	background: #333;
}

/* ---- 区切り線 ---- */
.mtns-block--divider {
	margin-top: calc(80 * var(--pc));
	margin-bottom: calc(80 * var(--pc)); /* 通常フローのマージン相殺後も80px確保。 */
	border: none;
	border-top: 1px solid #e9e9e9;
}

/* ---- 情報カード ---- */
.mtns-block--info-card {
	box-sizing: border-box;
	width: 100%;
	padding: calc(60 * var(--pc));
	background: #fff;
	border-radius: calc(15 * var(--pc));
}

.mtns-info-card__lines {
	margin: 0;
	font-family: "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;
}

/* ---- タイトルリスト ----
 * 情報カードと同じ白背景の角丸ボックス（.mtns-block--info-cardを流用）の中に、
 * 「タイトル：本文」の行を積む。リンクの有無を行ごとに選べる（URLがあれば<a>）。 */
.mtns-title-list__row {
	display: block;
	margin: 0;
	font-family: "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;
	text-decoration: none;
}

.mtns-title-list__row--link {
	text-decoration-line: underline;
}

.mtns-title-list__row + .mtns-title-list__row {
	margin-top: calc(10 * var(--pc));
}

/* ---- 情報テーブル ----
 * 会社案内の拠点情報（.mtco-office__detail等）と同じ考え方：ラベルセル（グレー）＋
 * 値セル（白）を横並びにした行を積む。行間は縦積み（gap無し、角丸のセルが接するデザイン）。 */
.mtns-info-table {
	display: flex;
	flex-direction: column;
}

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

.mtns-info-table__row + .mtns-info-table__row {
	margin-top: calc(10 * var(--pc));
}

.mtns-info-table__label {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(200 * var(--pc));
	box-sizing: border-box;
	min-height: calc(66 * var(--pc));
	background: #e9e9e9;
	border-radius: calc(15 * var(--pc));
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: calc(16 * var(--pc));
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtns-info-table__value {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	margin-left: calc(5 * var(--pc));
	padding: calc(20 * var(--pc)) calc(40 * var(--pc));
	background: #fff;
	border-radius: calc(15 * var(--pc));
	font-family: "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;
}

/* ---- ボタン ---- */
.mtns-block--button {
	display: flex;
	justify-content: center;
}

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

.mtns-button__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;
}

.mtns-button__divider {
	flex: none;
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	background: #fff;
	margin-right: calc(30 * var(--pc));
}

.mtns-button__arrow {
	flex: none;
	width: calc(24 * var(--pc));
	height: auto;
	margin-right: calc(30 * var(--pc));
	clip-path: inset(0 0 0 0);
}

.mtns-button:hover .mtns-button__arrow {
	animation: mtnsArrowReveal 0.3s ease-out;
}

/* ホームページのCTAボタンと同じ「矢印が左から伸びるように出現する」動き。線と矢先を
 * 別要素にできない（1枚の画像アイコンのため）ので、clip-pathで左から徐々に見せることで
 * 同じ視覚効果を再現する。戻るボタンはscaleX(-1)で反転済みのため、同じキーフレームでも
 * 見た目上は自動的に右→左に伸びる（矢印の向きに合わせて反転される）。
 * SPはホバーが無いため、戻るボタン・CTAボタンは画面内に入っている間だけ再生する（news-single.js の
 * .is-viewing 切り替えと連動、ホームと同じ2s ease-out infinite）。記事本文内のボタンはSPでは動かさない。 */
@keyframes mtnsArrowReveal {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* ---- SNSアイコン列 ---- */
.mtns-sns-icons {
	display: flex;
	justify-content: center;
	gap: calc(20 * var(--pc));
}

.mtns-sns-icons__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(70 * var(--pc));
	height: calc(70 * var(--pc));
	background: #fff;
	border-radius: 50%;
}

.mtns-sns-icons__item svg,
.mtns-sns-icons__item img {
	width: calc(30 * var(--pc));
	height: calc(30 * var(--pc));
}

/* ==================== 記事一覧に戻るボタン ====================
 * 下のCTAボタン（.mtns-cta__btn）と同じ箱・矢印の技法だが、矢印は左向き（scaleX(-1)で反転）、
 * アイコン→テキストの順（左右反転）で配置する。ボタン自体は記事本文カードの下、中央寄せ。 */
.mtns-back {
	margin-top: calc(80 * var(--pc));
	text-align: center;
}

.mtns-back__btn {
	display: inline-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;
}

.mtns-back__btn-arrow {
	flex: none;
	width: calc(24 * var(--pc));
	height: auto;
	margin-left: calc(30 * var(--pc));
	margin-right: calc(30 * var(--pc));
	transform: scaleX(-1);
	clip-path: inset(0 0 0 0);
}

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

.mtns-back__btn-text {
	margin-left: auto;
	margin-right: calc(40 * var(--pc));
	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;
}

.mtns-back__btn:hover .mtns-back__btn-arrow {
	animation: mtnsArrowReveal 0.3s ease-out;
}

/* ==================== CTA（ご相談ください） ====================
 * お知らせ一覧・会社案内（.mtnw-cta / .mtco-cta）と同じデザイン。.mtns（メイン枠）が既に
 * キャンバス幅そのものなので、他パネルと違い左右のinset（30px）を付けず、幅いっぱいの紺パネルにする。 */
.mtns-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;
}

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

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

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

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

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

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

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

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

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

.mtns-cta__btn:hover .mtns-cta__btn-arrow {
	animation: mtnsArrowReveal 0.3s ease-out;
}

/* ==================== パンくずリスト ====================
 * 他ページ共通のデザイン・数値。3階層（TOP＞お知らせ＞記事タイトル）。 */
.mtns-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	box-sizing: border-box;
	padding-right: calc(80 * var(--pc));
	width: 100%;
	margin: 0;
	padding-left: calc(80 * var(--pc));
}

.mtns-breadcrumb__link {
	flex-shrink: 0;
	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;
}

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

.mtns-breadcrumb__current {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	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（〜767px）
 * Figma SP は 750px 幅。各値は calc(Figmaのpx * var(--sp))。
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * ============================================================ */
@media (max-width: 767px) {

	.mtns-head {
		align-items: flex-start;
		gap: calc(50 * var(--sp));
		width: calc(690 * var(--sp));
		margin: calc(60 * var(--sp)) auto 0;
		padding: 0 calc(20 * var(--sp));
	}

	.mtns-head__mark {
		width: calc(95 * var(--sp));
		height: calc(35 * var(--sp));
	}

	.mtns-head__date {
		margin-top: calc(20 * var(--sp));
	}

	.mtns-head__date--pc {
		display: none;
	}

	.mtns-head__date--sp {
		display: block;
		width: calc(95 * var(--sp));
		font-size: calc(22 * var(--sp));
		line-height: calc(33 * var(--sp));
		text-align: center;
	}

	.mtns-head__title {
		font-size: calc(38 * var(--sp));
		line-height: calc(68 * var(--sp));
	}

	.mtns-article-section {
		width: calc(690 * var(--sp));
		margin-top: calc(150 * var(--sp));
	}

	.mtns-article {
		padding: calc(80 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtns-block {
		margin-top: calc(80 * var(--sp));
	}

	.mtns-block--heading {
		font-size: calc(32 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtns-block--text {
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtns-block__caption {
		margin-top: calc(20 * var(--sp));
		font-size: calc(22 * var(--sp));
		line-height: calc(33 * var(--sp));
	}

	/* SPでも2カラムを維持する（1カラムに積まない）。 */
	.mtns-block--image-2col {
		grid-template-columns: 1fr 1fr;
		gap: 0 calc(20 * var(--sp));
	}

	/* カルーセルはSPでも全幅にせず、左右をインセットして中央寄せする。 */
	.mtns-carousel {
		width: calc(510 * var(--sp));
	}

	.mtns-carousel__arrow {
		width: calc(50 * var(--sp));
		height: calc(50 * var(--sp));
	}

	.mtns-carousel__arrow--prev {
		left: calc(-70 * var(--sp));
	}

	.mtns-carousel__arrow--next {
		right: calc(-70 * var(--sp));
	}

	.mtns-carousel__arrow-icon {
		width: calc(14 * var(--sp));
		height: calc(14 * var(--sp));
		border-top-width: 3px;
		border-right-width: 3px;
	}

	.mtns-carousel__dots {
		gap: calc(30 * var(--sp));
		margin-top: calc(40 * var(--sp));
	}

	.mtns-carousel__dot {
		width: calc(15 * var(--sp));
		height: calc(15 * var(--sp));
	}

	/* 区切り線はSP独自の余白・線幅（前後ともデザイン基準100、線の太さ2px）。 */
	.mtns-block--divider {
		margin-top: calc(100 * var(--sp));
		margin-bottom: calc(100 * var(--sp));
		border-top-width: 2px;
	}

	.mtns-block--info-card {
		padding: calc(60 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtns-info-card__lines {
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	/* タイトルリストは情報カードと余白が異なる（40px、情報カードは60px）。 */
	.mtns-title-list {
		padding: calc(40 * var(--sp));
	}

	.mtns-title-list__row {
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
	}

	.mtns-title-list__row + .mtns-title-list__row {
		margin-top: calc(20 * var(--sp));
	}

	.mtns-info-table {
		flex-direction: column;
	}

	.mtns-info-table__row {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.mtns-info-table__row + .mtns-info-table__row {
		margin-top: calc(10 * var(--sp));
	}

	.mtns-info-table__label {
		flex: none;
		width: 100%;
		min-height: calc(84 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtns-info-table__value {
		width: 100%;
		margin-left: 0;
		margin-top: calc(10 * var(--sp));
		padding: calc(20 * var(--sp)) calc(40 * var(--sp));
		border-radius: calc(15 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

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

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

	.mtns-button__divider {
		width: calc(2 * var(--sp));
		height: calc(30 * var(--sp));
		margin-right: calc(40 * var(--sp));
	}

	.mtns-button__arrow {
		width: calc(32 * var(--sp));
		margin-right: calc(40 * var(--sp));
	}

	/* 記事本文内のボタンは、SPでは矢印を動かさない（先方指示）。PCのホバー時の動きは残す。 */

	.mtns-sns-icons {
		gap: calc(20 * var(--sp));
	}

	.mtns-sns-icons__item {
		width: calc(100 * var(--sp));
		height: calc(100 * var(--sp));
	}

	.mtns-sns-icons__item svg,
	.mtns-sns-icons__item img {
		width: calc(42 * var(--sp));
		height: calc(42 * var(--sp));
	}

	.mtns-back {
		margin-top: calc(80 * var(--sp));
	}

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

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

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

	.mtns-back__btn-text {
		margin-right: calc(40 * var(--sp));
		font-size: calc(24 * var(--sp));
		line-height: calc(24 * var(--sp));
	}

	.mtns-back__btn.is-viewing .mtns-back__btn-arrow {
		animation: mtnsArrowReveal 2s ease-out infinite;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.mtns-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) {
	.mtns-cta {
		position: relative;
		isolation: isolate;
	}

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