/**
 * コーポレートサイト共通のヘッダー / フッター（Figma pc_corporate-top）。
 * デザイントークン（--mt-*）は shared/assets/css/base.css の :root で定義。
 */

/* ===== ヘッダー ===== */
.mt-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
}

.mt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--mt-canvas);
	max-width: 100%;
	height: calc(90 * var(--pc));
	margin-inline: auto;
	padding-inline: calc(40 * var(--pc));
}

.mt-header__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mt-header__logo {
	display: block;
	width: calc(160 * var(--pc));
	height: auto;
}

.mt-header__actions {
	display: flex;
	align-items: center;
	gap: calc(5 * var(--pc));
}

.mt-header__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(140 * var(--pc));
	height: calc(40 * var(--pc));
	border: calc(1 * var(--pc)) solid var(--mt-line);
	border-radius: calc(25 * var(--pc));
	color: var(--mt-navy);
	font-size: calc(14 * var(--pc));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.mt-header__pill:hover {
	background: var(--mt-beige);
}

.mt-header__menu {
	display: inline-flex;
	margin-left: calc(15 * var(--pc));
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mt-header__menu img {
	display: block;
	width: calc(50 * var(--pc));
	height: calc(50 * var(--pc));
}

/* 通常時はハンバーガー、展開時は×アイコンに切り替える */
.mt-header__menu .mt-header__menu-close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .mt-header__menu-open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .mt-header__menu-close {
	display: block;
}

/* 展開メニュー：紺のガラス調ドロップダウンパネル（Figma 400×580）
 * これはオーバーレイのポップアップのため、位置指定（absolute）が必要な例外。
 * 親（sticky の .mt-header）を基準に配置する。内部はflowで組む。 */
.mt-header__nav {
	position: absolute;
	top: calc(110 * var(--pc));
	right: calc(60 * var(--pc));
	display: flex;
	flex-direction: column;
	width: calc(400 * var(--pc));
	height: calc(580 * var(--pc));
	padding: calc(80 * var(--pc)) calc(40 * var(--pc)) calc(60 * var(--pc)) calc(50 * var(--pc));
	border-radius: calc(30 * var(--pc));
	background: rgba(13, 48, 97, 0.9);
	backdrop-filter: blur(calc(50 * var(--pc)));
	-webkit-backdrop-filter: blur(calc(50 * var(--pc)));
	overflow: hidden;
	/* 開閉のフェードイン/アウト。display:none は遷移できないため opacity + visibility で制御。 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mt-header__nav.is-open {
	opacity: 1;
	visibility: visible;
}

.mt-header__nav-list {
	display: flex;
	flex-direction: column;
	/* 縦並びのフレックスは既定で項目が横いっぱいに伸びる（align-items:stretch）。
	 * そのままだと各項目の枠が文字より広く、リンクの当たり判定もパネル幅いっぱいになる。
	 * 文字の幅に合わせて詰める。 */
	align-items: flex-start;
	gap: calc(50 * var(--pc));
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-header__nav-list a {
	display: inline-flex;
	align-items: center;
	gap: calc(12 * var(--pc));
	color: #fff;
	font-size: calc(24 * var(--pc));
	/* 行の高さを指定しないとブラウザ既定（約1.4〜1.5倍）になり、項目が縦に間延びする。
	 * Figmaの文字グループは 152×270、項目4つ・gap50 なので
	 * 項目1つの高さは (270 − 50×3) ÷ 4 = 30。 */
	line-height: calc(30 * var(--pc));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mt-header__nav-mark {
	width: calc(15 * var(--pc));
	height: calc(15 * var(--pc));
}

.mt-header__nav-list a:hover {
	opacity: 0.7;
}

/* 商品画像を包む箱。影を画像の真下に置くための位置の基準にするためだけに使う
 * （数字セクションの .mtop-numbers__product-wrap と同じ役割）。
 * 箱の大きさ＝画像の大きさなので、影は 100% や 50% で画像に追従できる。 */
.mt-header__nav-deco-wrap {
	position: relative;
	align-self: flex-end;
	margin-top: auto;
	width: calc(110 * var(--pc));
}

.mt-header__nav-deco {
	display: block;
	width: 100%;
	height: auto;
	/* 揺れ幅。SPは --sp を使って個別に上書きする。 */
	--sway-y: calc(-8 * var(--pc));
	animation: mtHeaderDecoSway 4.6s ease-in-out infinite;
}

/* 商品画像の真下に落ちる影（楕円・ぼかし）。数字セクションの商品画像と同じ考え方で、
 * 画像とは別に動かすことで「地面に落ちている」ように見せる（画像は傾きながら浮き、
 * 影は同じ場所で横にわずかに流れる）。
 *
 * 大きさと色はFigma（Ellipse 267: 84x11 / #192E4B / blur4）。
 * 位置はパネルの余白から逆算せず、画像そのものを基準にする。
 * Figmaの座標では 影の中心＝画像の中心、影の上端＝画像の下端より1px上 なので、
 *   左右: left:50% から影幅の半分（42）だけ戻す
 *   上下: top:100%（＝画像の下端）から1px上げる
 * とすれば、余白やスケールが変わっても常に画像の真下に来る。
 * ずらしに margin を使うのは、translate を揺れのアニメーションが使っているため。 */
.mt-header__nav-deco-wrap::after {
	content: "";
	position: absolute;
	left: 50%;
	margin-left: calc(-42 * var(--pc));
	top: 100%;
	margin-top: calc(-1 * var(--pc));
	width: calc(84 * var(--pc));
	height: calc(11 * var(--pc));
	background: #192e4b;
	border-radius: 50%;
	filter: blur(calc(4 * var(--pc)));
	--shadow-sway-x: calc(5 * var(--pc));
	animation: mtHeaderDecoShadowSway 4.6s ease-in-out infinite;
}

/* メニュー内の商品画像：数字セクションの商品画像と同じ「ゆらゆら」。
 * 軸を切り替えず、傾きと上下移動を滑らかに往復させる水中的な揺れ。
 *
 * 数字セクションの mtopNumbersSway と同じ形だが、あちらは home.css にあり
 * トップページでしか読み込まれない。ヘッダーは全ページに出るため、ここに別途定義する。 */
@keyframes mtHeaderDecoSway {
	0%, 100% { rotate: -3deg; translate: 0 0; }
	50%      { rotate: 3deg; translate: 0 var(--sway-y); }
}

@keyframes mtHeaderDecoShadowSway {
	0%, 100% { translate: calc(-1 * var(--shadow-sway-x)) 0; }
	50%      { translate: var(--shadow-sway-x) 0; }
}

/* 動きを減らす設定の端末では揺らさない（影は出したままにする）。 */
@media (prefers-reduced-motion: reduce) {
	.mt-header__nav-deco,
	.mt-header__nav-deco-wrap::after {
		animation: none;
	}
}

/* ===== フッター（ベージュ角丸パネル） =====
 * レイアウトは通常フロー（flex）。コンテナに absolute/relative は使いません。
 */
.mt-footer {
	width: 100%;
	padding: calc(20 * var(--pc)) 0 calc(30 * var(--pc));
	background: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
}

.mt-footer__panel {
	display: flex;
	flex-direction: column;
	width: calc(1380 * var(--pc));
	max-width: 100%;
	margin-inline: auto;
	background: var(--mt-beige);
	border-radius: calc(30 * var(--pc));
	overflow: hidden;
}

.mt-footer__main {
	position: relative; /* 装飾画像（.mt-footer__deco）の配置基準 */
	z-index: 0; /* 独立した重なり文脈を作り、装飾画像を __main 内に閉じ込める（__bottom を手前にするため） */
	display: flex;
	padding-top: calc(50 * var(--pc));
	padding-inline: calc(50 * var(--pc));
}

/* footer-vector を装飾配置。画像の中心を footer__main の (右200px, 下367px) に合わせる。 */
.mt-footer__deco {
	position: absolute;
	top: calc(334 * var(--pc));
	left: calc(368 * var(--pc));
	transform: translate(-50%, -50%);
	width: calc(736 * var(--pc)); /* 元サイズ736×333。中間幅でも1440と同比率で縮小（高さはautoで比率維持） */
	height: auto;
	pointer-events: none;
}

/* PC版のみ：ヒーローの笑顔シェイプと同じ演出（clip-pathで左→右に伸びて1回だけ登場）。
 * フッターは初期状態で画面外のことが多いため、navigation.js の IntersectionObserver が
 * 画面に入った時点で .is-loaded を付与して開始する。 */
.mt-footer__deco--pc {
	clip-path: inset(0 100% 0 0);
	animation: mtFooterDecoGrow 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
	animation-play-state: paused;
}

.mt-footer__deco--pc.is-loaded {
	animation-play-state: running;
}

@keyframes mtFooterDecoGrow {
	to {
		clip-path: inset(0 0% 0 0);
	}
}

/* SP版は逆向き（右→左）に描く。切り抜きの起点を左辺に置き、そこから右へ開くのではなく
 * 右辺から左へ広げるため、inset の左側を100%から0%へ縮める。 */
@keyframes mtFooterDecoGrowRtl {
	from {
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0%);
	}
}

.mt-footer__brand {
	flex: 0 0 calc(800 * var(--pc));
}

.mt-footer__logo {
	width: calc(160 * var(--pc));
	height: auto;
}

/* PCでは PC用ロゴ／deco、SPでは SP用に切替（下部メディアクエリ） */
.mt-footer__logo--sp,
.mt-footer__deco--sp {
	display: none;
}

.mt-footer__tagline {
	margin: calc(30 * var(--pc)) 0 0;
	color: var(--mt-navy);
	font-size: calc(12 * var(--pc));
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

.mt-footer__col {
	display: flex;
	flex-direction: column;
	margin-top: calc(50 * var(--pc));
}

.mt-footer__col--company {
	flex: 0 0 calc(316 * var(--pc));
	line-height: 1; /* 見出し「会社案内」の行の余白（leading）を除去、--primary と揃える */
}

.mt-footer__col--primary {
	flex: 1;
	gap: calc(25 * var(--pc));
	line-height: 1;
}

.mt-footer__heading {
	color: var(--mt-navy);
	font-size: calc(18 * var(--pc));
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* 「採用情報」の遷移マーク（Figma PC：12×12・文字の右10・線1.5px #0D3061）。
 * 形はヘッダーメニューの menu-arrow.svg と同じで、12px表示で線が1.5pxになるよう線を太くした
 * footer-link-mark.svg を mask で使い、色は文字色（紺）で塗る。 */
/* 文字とマークの縦の中心をそろえる */
.mt-footer__heading--mark {
	display: inline-flex;
	align-items: center;
}

.mt-footer__heading-mark {
	flex: none;
	width: calc(12 * var(--pc));
	height: calc(12 * var(--pc));
	margin-left: calc(10 * var(--pc));
	background-color: currentColor;
	-webkit-mask: url(../images/home/common/footer-link-mark.svg) center / contain no-repeat;
	mask: url(../images/home/common/footer-link-mark.svg) center / contain no-repeat;
}

.mt-footer__col--company .mt-footer__heading {
	margin-bottom: calc(30 * var(--pc));
}

.mt-footer__col--company ul {
	display: flex;
	flex-direction: column;
	gap: calc(20 * var(--pc));
	margin: 0;
	padding: 0;
	line-height: 1;
	list-style: none;
}

.mt-footer__col--company ul a {
	color: var(--mt-navy);
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mt-footer__col a:hover {
	opacity: 0.7;
}

.mt-footer__mark {
	width: calc(30 * var(--pc));
	height: calc(30 * var(--pc));
	margin-top: calc(5 * var(--pc));
}

/* 下部の紺帯（白文字のプライバシー・著作権を載せる）。パネルの overflow:hidden で角丸に収まる。 */
.mt-footer__bottom {
	z-index: 1; /* flexアイテムなので position 不要で手前に出せる */
	line-height: 1;
	padding: calc(52 * var(--pc)) calc(50 * var(--pc)); /* 上下52px / 左右50px */
}

.mt-footer__privacy {
	display: inline-block;
	margin-bottom: calc(15 * var(--pc));
	color: #fff;
	font-size: calc(12 * var(--pc));
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.mt-footer__copyright {
	margin: 0;
	color: #fff;
}

.mt-footer__copyright small {
	font-size: calc(12 * var(--pc));
	letter-spacing: 0.04em;
}

/* ============================================================
 * スケール係数（fluid の土台）
 * PC/SP とも「Figmaキャンバス幅で割った係数」を使い、各値は
 * calc(Figmaのpx * var(--pc|--sp)) で書く（コード上はFigma整数のまま）。
 * html をコンテナ化し、子孫は cqw（＝スクロールバーを除く実幅）で測る。
 *   --pc = min(100cqw,1440px)/1440 … PCキャンバス1440基準、1440pxを上限とする。
 *   --sp = min(100cqw, 750px)/ 750 … SPキャンバス 750基準（@media 内で上書き）。
 * ============================================================ */
html {
	container-type: inline-size;
}

body {
	/* Figma(PC 1440) 1px あたりの幅。cqw はスクロールバーを含まない実幅。
	 * 1440px以上では等倍に保つ。画面幅へ広げる指定はKV側に限定する。 */
	--pc: calc(min(100cqw, 1440px) / 1440);
}

/* ============================================================
 * SP（〜767px）
 * Figma SP は 750px 幅。各値は calc(Figmaのpx * var(--sp))。
 * レイアウトは flex（space-between）で自然配置。ナビのみオーバーレイで絶対配置。
 * ============================================================ */
@media (max-width: 767px) {

	body {
		/* Figma 1px あたりの幅。min(…, 750px) で 750px以上は等倍で頭打ち。 */
		--sp: calc(min(100cqw, 750px) / 750);
	}

	/* ----- ヘッダー ----- */
	.mt-header__inner {
		height: calc(120 * var(--sp));
		padding-inline: calc(30 * var(--sp));
	}

	.mt-header__logo {
		width: calc(176 * var(--sp));
	}

	.mt-header__actions {
		gap: calc(5 * var(--sp));
	}

	.mt-header__pill {
		width: calc(166 * var(--sp));
		height: calc(60 * var(--sp));
		border-radius: calc(35 * var(--sp));
		font-size: calc(20 * var(--sp));
	}

	.mt-header__menu {
		margin-left: calc(20 * var(--sp));
	}

	.mt-header__menu img {
		width: calc(70 * var(--sp));   /* 紺丸アイコン */
		height: calc(70 * var(--sp));
	}

	/* 展開メニュー：紺ガラスのドロップダウン（SP） */
	.mt-header__nav {
		top: calc(160 * var(--sp));
		right: calc(60 * var(--sp));   /* 画面右から */
		width: calc(469 * var(--sp));
		height: auto;
		min-height: calc(700 * var(--sp));
		padding: calc(70 * var(--sp)) calc(60 * var(--sp)) calc(60 * var(--sp));
		border: 1px solid #fff;        /* SPのみ白い枠線（Figma Rectangle 1578） */
		border-radius: calc(30 * var(--sp));
		/* ぼかしもSPスケールにする（--pc のままだと半分程度の強さになる） */
		backdrop-filter: blur(calc(50 * var(--sp)));
		-webkit-backdrop-filter: blur(calc(50 * var(--sp)));
	}

	.mt-header__nav-list {
		gap: calc(50 * var(--sp));      /* 項目ピッチ82 − 文字32 */
		/* SPは指で押すため、当たり判定を文字幅まで狭めず横いっぱいのままにする。 */
		align-items: stretch;
	}

	.mt-header__nav-list a {
		/* 文字と外部リンク矢印の間隔（Figma: 文字の右端から12px）。
		 * ベースは --pc 基準なので、指定しないとSPで半分ほどの狭さになる。 */
		gap: calc(12 * var(--sp));
		font-size: calc(32 * var(--sp));
		/* 上の gap のコメント「項目ピッチ82 − 文字32」に合わせ、項目の高さを32にする。 */
		line-height: calc(32 * var(--sp));
	}

	.mt-header__nav-mark {
		width: calc(20 * var(--sp));
		height: calc(20 * var(--sp));
	}

	.mt-header__nav-deco-wrap {
		width: calc(120 * var(--sp));
		/* Figmaでは画像の下端がパネル下から81px。パネルの下padding が60なので差の21を足す。 */
		margin-top: calc(35 * var(--sp));
		margin-bottom: calc(21 * var(--sp));
		flex-shrink: 0;
	}

	.mt-header__nav-deco {
		/* 揺れ幅もSPのスケールに合わせる（PCの値のままだと小さく見える） */
		--sway-y: calc(-10 * var(--sp));
	}

	/* SPの影はFigmaの指定が無いため、PCの寸法を画像幅の比（120/110）で拡大した。
	 * 画像基準の置き方（真下・下端から1px上）はPCと同じ。 */
	.mt-header__nav-deco-wrap::after {
		margin-left: calc(-45.5 * var(--sp));
		margin-top: calc(-1 * var(--sp));
		width: calc(91 * var(--sp));
		height: calc(12 * var(--sp));
		filter: blur(calc(4 * var(--sp)));
		--shadow-sway-x: calc(6 * var(--sp));
	}

	/* ----- フッター ----- */
	/* PCは上20/下30に変更したが、SPは元どおり上下とも30のまま。 */
	.mt-footer {
		padding: calc(30 * var(--sp)) 0;
	}

	.mt-footer__panel {
		width: auto;
		margin-inline: calc(20 * var(--sp)); /* 画面750pxで左右20px・パネル710px */
		min-height: calc(983 * var(--sp));   /* 下部スウォッシュ分の高さを確保 */
		border-radius: calc(30 * var(--sp));
	}

	/* ロゴ切替（SP専用ロゴ） */
	.mt-footer__logo--pc {
		display: none;
	}

	.mt-footer__logo--sp {
		display: block;
	}

	/* 上段：ロゴ＋タグライン中央 → 下段：会社案内カラム／主要リンクカラム */
	.mt-footer__main {
		flex-wrap: wrap;
		padding: calc(60 * var(--sp)) calc(50 * var(--sp)) calc(40 * var(--sp));
	}

	/* 下部の紺スウォッシュ画像（SP専用）。Figma 1136×422 @ (70,22829) を配置。
	 * ※実SVGは 660×335 でFigma記載と異なるため、位置・サイズは要微調整（PC同様）。 */
	.mt-footer__deco--pc {
		display: none;
	}

	.mt-footer__deco--sp {
		display: block;
		top: calc(648 * var(--sp));    /* (22829-22181) パネル上端基準 */
		left: calc(50 * var(--sp));    /* 70-20 */
		width: calc(1136 * var(--sp));
		height: auto;
		transform: none;
		/* SPは右から左へ描く（PCは左→右）。待機状態も右端だけが残る形にする。 */
		clip-path: inset(0 0 0 100%);
		animation: mtFooterDecoGrowRtl 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
		animation-play-state: paused;
	}

	.mt-footer__deco--sp.is-loaded {
		animation-play-state: running;
	}

	.mt-footer__brand {
		flex: 0 0 100%;
		margin-bottom: calc(40 * var(--sp));
		text-align: center;
	}

	.mt-footer__logo {
		width: calc(256 * var(--sp));
		margin-inline: auto;
	}

	.mt-footer__tagline {
		margin-top: calc(12 * var(--sp));
		font-size: calc(18 * var(--sp));
		text-align: center;
	}

	.mt-footer__col {
		margin-top: 0;
	}

	.mt-footer__col--company {
		flex: 0 0 auto;
		margin-right: auto;        /* 左寄せ・primaryを右へ */
	}

	.mt-footer__col--company .mt-footer__heading {
		margin-bottom: calc(40 * var(--sp)); /* 見出し→初リンク 68−28 */
	}

	.mt-footer__col--company ul {
		gap: calc(30 * var(--sp));     /* 54−24 */
	}

	.mt-footer__col--company ul a {
		font-size: calc(24 * var(--sp));
	}

	.mt-footer__col--primary {
		flex: 0 0 auto;
		gap: calc(40 * var(--sp));     /* 項目ピッチ68 − 文字28 */
	}

	.mt-footer__heading {
		font-size: calc(28 * var(--sp));
	}

	/* SPはFigmaの値が無いため、PCの比率（見出し18に対しマーク12・間隔10）を見出し28に当てはめる。 */
	.mt-footer__heading-mark {
		width: calc(18.67 * var(--sp));
		height: calc(18.67 * var(--sp));
		margin-left: calc(15.56 * var(--sp));
	}

	.mt-footer__mark {
		width: calc(50 * var(--sp));
		height: calc(50 * var(--sp));
	}

	/* 下部：スウォッシュ画像の上に白文字（プライバシー・著作権）。右揃えで右端50px、
	 * margin-top:auto でパネル最下部へ。padding-bottom で下端からの距離を合わせる。 */
	.mt-footer__bottom {
		margin-top: auto;
		padding: 0 calc(50 * var(--sp)) calc(45 * var(--sp)); /* 右50・下45 */
		text-align: right;
	}

	.mt-footer__privacy {
		margin-bottom: calc(18 * var(--sp)); /* privacy下端→copyright上端 */
		font-size: calc(22 * var(--sp));
	}

	.mt-footer__copyright small {
		font-size: calc(18 * var(--sp));
	}
}

/* ==================================================================
 * SP：ボタンの矢印は動かさない
 * PCのホバー演出をSPでも見せるため、各ページで .is-viewing（画面内にある間だけ
 * JSが付与）に矢印のアニメーションを割り当てているが、SPでは動き続けると
 * うるさいため一律で止める。矢印を囲む文字の回転などはそのまま残す。
 * いずれのキーフレームも「隠れた状態→基準状態」への動きなので、止めても
 * 矢印は基準状態＝表示されたままになる。
 * 各ページのCSSはこの共通CSSより後に読み込まれるため !important で上書きする。
 * ================================================================== */
@media (max-width: 767px) {
	.is-viewing ~ [class*="-arrow"],
	.is-viewing ~ [class*="-arrow"]::before,
	.is-viewing ~ [class*="-arrow"]::after,
	.is-viewing [class*="-arrow"],
	.is-viewing [class*="-arrow"]::before,
	.is-viewing [class*="-arrow"]::after,
	.mtct-submit-wrap.is-viewing::after,
	.mtcl-submit-wrap.is-viewing::after {
		animation: none !important;
	}
}

/* FAQの高さの開閉は、TOP・FAQページともにaccordion.jsだけで制御する。
 * ::details-contentのCSS遷移を併用すると、閉じた後に再度縮むため追加しない。 */

/* ＋／− の切り替えも同じ速さで動かす（開いた瞬間に消えると唐突なため）。 */
.mtop-faq__toggle-bar,
.mtfq-faq__toggle-bar {
	transition: rotate 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
 * PCワイド画面（1441px〜）
 * 中身の縮尺と配置は1440基準のまま（--pcは1440で頭打ち）、ヘッダー・フッター・
 * 下層ページの枠だけを画面幅へ広げる。TOPの各セクションの背景延長（home.css末尾）と同じ考え方。
 * ============================================================ */
@media (min-width: 1441px) {

	/* ヘッダー：ロゴは画面左端、カタログ請求・お問い合わせ・メニューは右端へ（左右の余白40は1440時と同じ）。 */
	.mt-header__inner {
		width: 100%;
	}

	/* フッター：パネルを画面幅いっぱいに（左右30・角丸はそのまま）。
	 * smileロゴとプライバシーポリシー・コピーライトは、パネル左端を基準にした位置関係を保つ。
	 * ロゴ欄を伸ばしてナビ列を右端へ寄せ、ナビ列の幅は1440時と同じにする。 */
	.mt-footer__panel {
		width: calc(100cqw - 60px);
	}

	.mt-footer__brand {
		flex: 1 1 auto;
	}

	.mt-footer__col--primary {
		/* 1440時の残り幅：パネル1380 − 左右余白100 − ロゴ欄800 − 会社案内列316 */
		flex: 0 0 calc(164 * var(--pc));
	}

	/* 下層ページ：本文の枠（main）を画面幅にし、直下の各セクションは最大1440で中央に置く（TOPと同じ作り）。
	 * 子への指定は :where() で詳細度を0にし、各セクションが自前で持つ幅・余白（例：会社案内の導入文の
	 * max-width 650）を優先させる。CTAの紺背景は各ページのCSSで画面幅へ延長する。 */
	#content:not(.mtop) {
		width: 100%;
	}

	:where(#content:not(.mtop)) > * {
		max-width: 1440px;
		margin-inline: auto;
	}

	/* パンくずは1440の枠に入れず、フッターパネルの内側（画面左から30＋50）にそろえる。 */
	:where(#content:not(.mtop)) > nav[aria-label="パンくずリスト"] {
		max-width: none;
	}
}