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

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

.mtnw img {
	display: block;
}

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

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

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

.mtnw-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 の絶対配置で置いていく。
 */
.mtnw-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));
}

.mtnw-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: "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;
}

.mtnw-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:
		mtnwSmileRock 1.2s ease-in-out,
		mtnwSmilePivot 1.2s linear;
	animation-play-state: paused;
}

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

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

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

/* ==================== お知らせ一覧 ====================
 * カード幅1000px・キャンバス中央寄せ（左右インセット220px＝(1440-1000)/2）。
 * タイトルバー下端(290)からの間隔は標準の150px、カード間は10px。 */
.mtnw-list-section {
	box-sizing: border-box;
	width: calc(1000 * var(--pc));
	margin: calc(150 * var(--pc)) auto 0;
}

.mtnw-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.mtnw-list__link {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: calc(107 * var(--pc));
	padding-left: calc(41 * var(--pc));
	background: #f9f9f9;
	border-radius: calc(15 * var(--pc));
	color: inherit;
	text-decoration: none;
}

.mtnw-list__date {
	flex: none;
	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: #b3b3b3;
}

.mtnw-list__title {
	flex: none;
	min-width: 0;
	width: calc(722 * var(--pc));
	margin-left: calc(40 * var(--pc));
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: calc(18 * var(--pc));
	line-height: calc(27 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

.mtnw-list__divider {
	flex: none;
	width: 0;
	height: calc(27 * var(--pc));
	margin-left: calc(30 * var(--pc));
	border-left: 1px solid #333;
}

/* 矢印：線は::before（ホバー時の伸長アニメ用）、先端は::after。他ページのCTAボタン矢印と同じ技法。 */
.mtnw-list__arrow {
	position: relative;
	flex: none;
	width: calc(18 * var(--pc));
	height: calc(1.5 * var(--pc));
	margin-left: calc(30 * var(--pc));
}

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

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

.mtnw-list__link:hover .mtnw-list__arrow::before {
	animation: mtnwArrowLine 0.3s ease-out;
}

.mtnw-list__link:hover .mtnw-list__arrow::after {
	--arrow-head-x: calc(-18 * var(--pc));
	animation: mtnwArrowHead 0.3s ease-out;
}

@keyframes mtnwArrowLine {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

@keyframes mtnwArrowHead {
	from { translate: var(--arrow-head-x) 0; }
}

/* ==================== ページネーション ====================
 * 60×60の丸ボタンをgap10pxで横並び（前後矢印ボタンも同じ60×60・同じgap）。
 * 全体は画面中央寄せ。お知らせ一覧の下端(1600=440+10行×117-10)からの間隔は100px。 */
.mtnw-pagination--sp {
	display: none;
}

.mtnw-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--pc));
	margin-top: calc(100 * var(--pc));
}

.mtnw-pagination__list {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--pc));
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtnw-pagination__page,
.mtnw-pagination__ellipsis {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(60 * var(--pc));
	height: calc(60 * 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(18 * var(--pc));
	line-height: calc(18 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
	text-decoration: none;
}

.mtnw-pagination__ellipsis {
	font-weight: 900;
}

.mtnw-pagination__page--current {
	font-weight: 700;
}

/* 選択中ページの数字の下に付くバー（幅20px・中央寄せ、テキスト下端から10px）。 */
.mtnw-pagination__page--current::after {
	content: "";
	position: absolute;
	bottom: calc(11 * var(--pc));
	left: 50%;
	transform: translateX(-50%);
	width: calc(20 * var(--pc));
	height: calc(1.5 * var(--pc));
	background: #333;
}

/* 前後矢印ボタン：ベージュ背景。矢印はお知らせ一覧の矢印と同じ::before/::after技法
 * （ここは静的なので線のみ、ホバーアニメーションは付けない）。前ボタンはscaleXで反転。 */
.mtnw-pagination__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(60 * var(--pc));
	height: calc(60 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
	text-decoration: none;
}

.mtnw-pagination__arrow--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.mtnw-pagination__arrow-icon {
	position: relative;
	width: calc(18 * var(--pc));
	height: calc(1.5 * var(--pc));
	background: #333;
}

.mtnw-pagination__arrow-icon::after {
	content: "";
	position: absolute;
	right: 0;
	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);
}

.mtnw-pagination__arrow--prev .mtnw-pagination__arrow-icon {
	transform: scaleX(-1);
}

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

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

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

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

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

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

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

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

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

.mtnw-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（ホバー時の伸長アニメ用）。要素自体は箱のみ。 */
}

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

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

.mtnw-cta__btn:hover .mtnw-cta__btn-arrow::before {
	animation: mtnwArrowLine 0.3s ease-out;
}

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

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

	/* ==================== パンくずリスト ====================
	 * 他ページのSP実装と同じく<main>末尾・フッター直前に配置。左20pxの位置に左寄せ。 */
	.mtnw-breadcrumb {
		padding-left: calc(40 * var(--sp));
	}

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

	.mtnw-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実装と同じ数値（スマイルアイコン等は共通要素）。 */
	.mtnw-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));
	}

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

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

	/* ==================== お知らせ一覧（SP） ====================
	 * PCは横一列（日付→タイトル→区切り線→矢印）だが、SPは日付・タイトルを縦積みにし、
	 * 右端に区切り線＋矢印を縦中央寄せで配置する2カラム構成（grid使用）。
	 * カード幅650px・高さ166px、カード間の間隔20px。左右パディング40px。 */
	.mtnw-list-section {
		width: calc(650 * var(--sp));
		margin-top: calc(150 * var(--sp));
	}

	.mtnw-list__item + .mtnw-list__item {
		margin-top: calc(20 * var(--sp));
	}

	.mtnw-list__link {
		display: grid;
		grid-template-columns: 1fr auto auto;
		grid-template-rows: auto auto;
		align-items: center;
		/* align-contentを指定しないと、auto行が166pxいっぱいに引き伸ばされ、
		 * 日付とタイトルの間が margin-top より大きく開いてしまう。行をコンテンツの
		 * 高さに保ったまま、2行ぶんのブロックごと縦中央寄せする。 */
		align-content: center;
		height: calc(166 * var(--sp));
		padding: 0 calc(40 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtnw-list__date {
		grid-column: 1;
		grid-row: 1;
		font-size: calc(20 * var(--sp));
		line-height: calc(20 * var(--sp));
	}

	.mtnw-list__title {
		grid-column: 1;
		grid-row: 2;
		grid-row-start: 2;
		width: auto;
		margin-left: 0;
		margin-top: calc(20 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(26 * var(--sp));
	}

	.mtnw-list__divider {
		grid-column: 2;
		grid-row: 1 / 3;
		height: calc(86 * var(--sp));
		margin-left: calc(40 * var(--sp));
	}

	.mtnw-list__arrow {
		grid-column: 3;
		grid-row: 1 / 3;
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: calc(40 * var(--sp));
	}

	.mtnw-list__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;
	}

	/* ==================== ページネーション（SP） ====================
	 * 80×100の縦長ボタンをgap10pxで横並び。中央連番はPCの5件ではなく3件
	 * （marutatsu_render_pagination()の$show=3で別出力した.mtnw-pagination--spを表示）。
	 * PC用（--pc）は非表示にする。 */
	.mtnw-pagination--pc {
		display: none;
	}

	.mtnw-pagination--sp {
		display: flex;
	}

	.mtnw-pagination {
		gap: calc(10 * var(--sp));
		margin-top: calc(100 * var(--sp));
	}

	.mtnw-pagination__list {
		gap: calc(10 * var(--sp));
	}

	.mtnw-pagination__page,
	.mtnw-pagination__ellipsis,
	.mtnw-pagination__arrow {
		width: calc(80 * var(--sp));
		height: calc(100 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtnw-pagination__page,
	.mtnw-pagination__ellipsis {
		font-size: calc(28 * var(--sp));
		line-height: calc(28 * var(--sp));
	}

	/* 選択中ページの下線バー：ボックス下端から16px（PCは11px、SPは実測値が異なる）。 */
	.mtnw-pagination__page--current::after {
		bottom: calc(16 * var(--sp));
		width: calc(20 * var(--sp));
		height: calc(2 * var(--sp));
	}

	.mtnw-pagination__arrow-icon {
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
	}

	.mtnw-pagination__arrow-icon::after {
		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;
	}

	/* ==================== CTA（ご相談ください） ====================
	 * 会社案内・公司信息のSP実装と同じデザイン。CTAの後にパンくずが続くため、
	 * TOP（.mtop-cta、最後尾セクション）と違いmargin-bottomは0にせず150pxを持たせる。 */
	.mtnw-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));
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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