/**
 * コーポレートHOME（Figma pc_corporate-top）のスタイル（骨組み）。
 * 大枠コンテナと各セクションの背景コンテナのみ。中身はこれから実装します。
 * 固定幅1440px。デザイントークン（--mt-*）は base.css の :root で定義。
 */

/* ---- 大枠コンテナ ---- */
.mtop {
	width: var(--mt-canvas);
	max-width: 100%;
	margin-inline: auto;
	/* 横はみ出しはクリップしつつ、子孫の position:sticky（考え方のピン留め）を活かすため
	 * overflow:hidden ではなく overflow-x:clip を使う（clip はスクロールコンテナを作らない）。 */
	overflow-x: clip;
	color: var(--mt-navy);
	background: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
	line-height: 1.6;
}

.mtop img {
	display: block;
}

/* ==================== ヒーロー（MV） ====================
 * パネルを原点(0,0)にして、中の要素は px の絶対配置で置いていく。
 * 各要素の x / y は、このパネルの左上からの距離。
 */
.mtop-hero__panel {
	position: relative; /* 中の要素を px で絶対配置するときの原点 */
	width: calc(1380 * var(--pc));
	height: calc(720 * var(--pc));
	margin: 0 auto calc(30 * var(--pc)); /* 左右中央（＝ページ左右から30px）／下に30px */
	background: var(--mt-beige);
	border-radius: calc(30 * var(--pc));
}

/* パネル内の要素はすべて px の絶対配置。座標はパネル左上からの left / top。 */
.mtop-hero__stage {
	display: contents;
}

.mtop-hero__smile,
.mtop-hero__item,
.mtop-hero__title,
.mtop-hero__lead,
.mtop-hero__news {
	position: absolute;
	margin: 0;
}

/* 笑顔シェイプ（最背面） */
.mtop-hero__smile {
	left: calc(365 * var(--pc));
	top: calc(418 * var(--pc));
	width: calc(650 * var(--pc));
	height: calc(242 * var(--pc));
}

/* PC=smile.svg / SP=smile-sp.svg（SPはメディアクエリで切替）
 * .mtop img{display:block} に勝つよう親クラスで詳細度を上げる */
.mtop-hero__panel .mtop-hero__smile--sp {
	display: none;
}

/* 商品画像：位置・サイズ・角度を指定。角度は各要素の --rot（中心軸で回転）。
 * rotate を個別プロパティにすることで、アニメの translate/scale と独立して合成できる。 */
.mtop-hero__item {
	rotate: var(--rot, 0deg);
	/* 切り抜き画像の影（Figma: box-shadow 15px 10px 20px #00000026）。
	 * 透明PNGは box-shadow だと四角い影になるため、形状に沿う drop-shadow で同値を再現。
	 * spread は 0 なので drop-shadow と等価。オフセット/ぼかしは --pc でスケール。 */
	filter: drop-shadow(calc(15 * var(--pc)) calc(10 * var(--pc)) calc(20 * var(--pc)) #00000026);
}

/* first-hero-items（2026-09差し替え）。Figmaの座標はヘッダー左端基準だったため、
 * パネルの左オフセット30pxを引き（left = Figma値 − 30）、
 * さらにヘッダーの高さ90px分も引いてパネル相対値にしている（top = Figma値 − 90）。 */
.mtop-hero__item--towel          { left: calc(741    * var(--pc)); top: calc(221    * var(--pc)); width: calc(120 * var(--pc)); height: calc(140.59 * var(--pc)); --rot: 13.1deg; }
.mtop-hero__item--yellow-bottle  { left: calc(666.16 * var(--pc)); top: calc(389    * var(--pc)); width: calc(81.14 * var(--pc)); height: calc(176.8 * var(--pc)); --rot: 9.72deg; }
.mtop-hero__item--pouch          { left: calc(514    * var(--pc)); top: calc(288.77 * var(--pc)); width: calc(140 * var(--pc)); height: calc(114 * var(--pc)); --rot: -15deg; }
.mtop-hero__item--blue-pen       { left: calc(637    * var(--pc)); top: calc(127    * var(--pc)); width: calc(17  * var(--pc)); height: calc(180 * var(--pc)); --rot: -15deg; }
.mtop-hero__item--pink-pen       { left: calc(696    * var(--pc)); top: calc(69     * var(--pc)); width: calc(18  * var(--pc)); height: calc(180 * var(--pc)); --rot: 15deg; }
.mtop-hero__item--note-circle    { left: calc(872.6  * var(--pc)); top: calc(77.2   * var(--pc)); width: calc(124 * var(--pc)); height: calc(124 * var(--pc)); --rot: 11.24deg; }
.mtop-hero__item--bottle-circle  { left: calc(561.34 * var(--pc)); top: calc(-50.66 * var(--pc)); width: calc(124 * var(--pc)); height: calc(124 * var(--pc)); --rot: -30deg; }

/* 写真は円形に切り抜き */
.mtop-hero__item--note-circle,
.mtop-hero__item--bottle-circle,
.mtop-hero__item--note-circle-b,
.mtop-hero__item--bottle-circle-b {
	border-radius: 50%;
	object-fit: cover;
	filter: none; /* 丸い写真には影を付けない（Figma準拠） */
}

/* second-hero-items（セット2）。座標変換はセット1と同じ（left−30 / top−90）。
 * ペア: towel↔pot, yellow-bottle↔lamp, pouch↔bag, blue-pen↔sponge1, pink-pen↔sponge2,
 *      note-circle↔note-circle-b, bottle-circle↔bottle-circle-b（丸写真は同一画像・位置違い）。 */
.mtop-hero__item--pot             { left: calc(711.02 * var(--pc)); top: calc(345   * var(--pc)); width: calc(80  * var(--pc)); height: calc(123.61 * var(--pc)); --rot: -10.72deg; }
.mtop-hero__item--lamp            { left: calc(584    * var(--pc)); top: calc(342.27 * var(--pc)); width: calc(70  * var(--pc)); height: calc(230.04 * var(--pc)); --rot: -11.62deg; }
.mtop-hero__item--bag             { left: calc(812    * var(--pc)); top: calc(189.23 * var(--pc)); width: calc(140 * var(--pc)); height: calc(114 * var(--pc)); --rot: -11.86deg; }
.mtop-hero__item--sponge1         { left: calc(641    * var(--pc)); top: calc(193.62 * var(--pc)); width: calc(100 * var(--pc)); height: calc(69.01 * var(--pc)); --rot: -30deg; }
.mtop-hero__item--sponge2         { left: calc(617    * var(--pc)); top: calc(99    * var(--pc)); width: calc(115 * var(--pc)); height: calc(65.16 * var(--pc)); --rot: 30deg; }
.mtop-hero__item--note-circle-b   { left: calc(734.87 * var(--pc)); top: calc(-20   * var(--pc)); width: calc(124 * var(--pc)); height: calc(124 * var(--pc)); --rot: 11.24deg; }
.mtop-hero__item--bottle-circle-b { left: calc(426    * var(--pc)); top: calc(218.1 * var(--pc)); width: calc(124 * var(--pc)); height: calc(124 * var(--pc)); --rot: -30deg; }

/* 指定商品（ペン／赤猫スポンジと2本のボトルの丸写真）の組は、
 * 先行組の開始から0.5秒後、浮上の途中で続けて開始する。
 * 先行・後続の各組内も0.09秒差で1枚ずつ下から浮き上がらせる。
 * 0.6秒で定位置の少し下まで登場し、残り0.4秒は上昇を減速して定位置で止まる。5.16秒時点から0.09秒差で1枚ずつ下へ落ちながら消える。2セットは7秒おきに交代。 */
.mtop-hero__item-set--1,
.mtop-hero__item-set--2 {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--hero-set-delay: 0s;
	--hero-rise: calc(80 * var(--pc));
	--hero-settle: calc(6 * var(--pc));
	--hero-drop: calc(50 * var(--pc));
	--hero-float: calc(-5 * var(--pc));
}
.mtop-hero__item-set--2 { --hero-set-delay: 7s; }
.mtop-hero__item { opacity: 0; }
.mtop-hero.is-loaded .mtop-hero__item {
	animation: var(--hero-item-animation) 14s linear infinite both;
	/* ラインの描画（0.9秒待機＋1秒）完了後、0.1秒置いて商品を表示。 */
	animation-delay: calc(2s + var(--hero-set-delay));
}
/* 上昇74単位/0.6秒と減速6単位/0.4秒の接続速度を27.75単位/秒で揃える。
 * 減速の終端速度は0にし、途中で停止・再加速せず浮遊につなぐ。
 * 表示中は当初の5単位だけ上へ緩やかに浮遊し、退場前に定位置へ戻る。
 * 登場は組の開始差500ms・組内90ms、退場は各セットの画像順に90msずらす。
 * 最後の画像は6.1秒で消え終わり、次セットまで0.9秒の間を空ける。 */
.mtop-hero__item--towel { --hero-item-animation: mtopHeroItem1; }
.mtop-hero__item--yellow-bottle { --hero-item-animation: mtopHeroItem2; }
.mtop-hero__item--pouch { --hero-item-animation: mtopHeroItem3; }
.mtop-hero__item--blue-pen { --hero-item-animation: mtopHeroItem4; }
.mtop-hero__item--pink-pen { --hero-item-animation: mtopHeroItem5; }
.mtop-hero__item--bottle-circle { --hero-item-animation: mtopHeroItem6; }
.mtop-hero__item--note-circle { --hero-item-animation: mtopHeroItem7; }
.mtop-hero__item--pot { --hero-item-animation: mtopHeroItem8; }
.mtop-hero__item--lamp { --hero-item-animation: mtopHeroItem9; }
.mtop-hero__item--bag { --hero-item-animation: mtopHeroItem10; }
.mtop-hero__item--sponge1 { --hero-item-animation: mtopHeroItem11; }
.mtop-hero__item--sponge2 { --hero-item-animation: mtopHeroItem12; }
.mtop-hero__item--bottle-circle-b { --hero-item-animation: mtopHeroItem13; }
.mtop-hero__item--note-circle-b { --hero-item-animation: mtopHeroItem14; }
@keyframes mtopHeroItem1 {
	0% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	4.28571429% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	7.14285714% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	36.85714286% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	39.71428571%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem2 {
	0%, 0.64285714% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	4.92857143% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	7.78571429% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	37.5% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	40.35714286%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem3 {
	0%, 1.28571429% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	5.57142857% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	8.42857143% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	38.14285714% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	41%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem4 {
	0%, 3.57142857% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	7.85714286% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	10.71428571% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	38.78571429% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	41.64285714%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem5 {
	0%, 4.21428571% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	8.5% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	11.35714286% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	39.42857143% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	42.28571429%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem6 {
	0%, 4.85714286% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	9.14285714% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	12% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	40.07142857% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	42.92857143%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem7 {
	0%, 1.92857143% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	6.21428571% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	9.07142857% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	40.71428571% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	43.57142857%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem8 {
	0% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	4.28571429% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	7.14285714% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	36.85714286% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	39.71428571%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem9 {
	0%, 0.64285714% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	4.92857143% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	7.78571429% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	37.5% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	40.35714286%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem10 {
	0%, 1.28571429% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	5.57142857% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	8.42857143% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	38.14285714% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	41%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem11 {
	0%, 1.92857143% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	6.21428571% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	9.07142857% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	38.78571429% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	41.64285714%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem12 {
	0%, 3.57142857% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	7.85714286% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	10.71428571% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	39.42857143% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	42.28571429%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem13 {
	0%, 4.21428571% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	8.5% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	11.35714286% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	40.07142857% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	42.92857143%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}
@keyframes mtopHeroItem14 {
	0%, 2.57142857% { opacity: 0; transform: translateY(var(--hero-rise)); animation-timing-function: cubic-bezier(0.2, 0.65, 0.4, 0.865); }
	6.85714286% { opacity: 1; transform: translateY(var(--hero-settle)); animation-timing-function: cubic-bezier(0.25, 0.4625, 0.58, 1); }
	9.71428571% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in-out; }
	25% { opacity: 1; transform: translateY(var(--hero-float)); animation-timing-function: ease-in-out; }
	40.71428571% { opacity: 1; transform: translateY(0); animation-timing-function: ease-in; }
	43.57142857%, 100% { opacity: 0; transform: translateY(var(--hero-drop)); }
}

/* 見出し */
.mtop-hero__title {
	left: calc(70 * var(--pc));
	top: calc(140 * var(--pc));
	width: calc(503 * var(--pc));
	color: var(--mt-navy);
	font-size: calc(73 * var(--pc));
	font-weight: 700;
	line-height: calc(96 * var(--pc));
	letter-spacing: 0.2em;
	white-space: nowrap; /* 自動折り返しを止め、<br> の位置だけで改行する */
}

/* リード文
 * Figmaの通り一文ごとに<br>で改行する。枠幅より長い行があっても、
 * <br>以外の位置で折り返さないよう自動折り返しは止める。 */
.mtop-hero__lead {
	left: calc(1082 * var(--pc));
	top: calc(426 * var(--pc));
	width: calc(238 * var(--pc));
	white-space: nowrap;
	color: var(--mt-navy);
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
}

/* お知らせカード（枠は絶対配置。中身は flex で組む） */
.mtop-hero__news {
	left: calc(30 * var(--pc));
	top: calc(590 * var(--pc));
	width: calc(360 * var(--pc));
	height: calc(100 * var(--pc));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(20 * var(--pc));
	padding: 0 calc(20 * var(--pc));
	background: #fff;
	border: calc(1 * var(--pc)) solid var(--mt-line);
	border-radius: calc(15 * var(--pc));
}

/* 1件ぶんの行 */
.mtop-hero__news-item {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--pc));
	height: calc(20 * var(--pc));
	text-decoration: none;
}

.mtop-hero__news-date {
	flex: none;
	color: #c0c5cd;
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(12 * var(--pc));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
}

.mtop-hero__news-divider {
	flex: none;
	width: calc(1 * var(--pc));
	height: calc(12 * var(--pc));
	background: #c0c5cd;
}

.mtop-hero__news-title {
	flex: 1;
	overflow: hidden;
	color: #333;
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 矢印：Ellipse.svg（紺の円）＋ 白い矢印は CSS で重ねる。
 * ホバー時は矢印が円の中を右へ流れるため、円で切り抜いて外にはみ出さないようにする。
 * --arrow-flow-x は「自分の円の直径」＝矢印が流れる距離。円の大きさが違うSP版でも
 * キーフレームを使い回せるよう変数にしている（「もっと見る」矢印の --arrow-head-x と同じ考え方）。 */
.mtop-hero__news-arrow {
	--arrow-flow-x: calc(20 * var(--pc));
	position: relative;
	flex: none;
	width: calc(20 * var(--pc));
	height: calc(20 * var(--pc));
	overflow: hidden;
	border-radius: 50%;
	background: url(../images/home/hero/Ellipse.svg) center / contain no-repeat;
}

/* ::after が通常表示される矢印、::before はホバー時に左から入ってくる2本目。 */
.mtop-hero__news-arrow::before,
.mtop-hero__news-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(5 * var(--pc));
	height: calc(5 * var(--pc));
	border-top: calc(1.5 * var(--pc)) solid #fff;
	border-right: calc(1.5 * var(--pc)) solid #fff;
	transform: translate(-65%, -50%) rotate(45deg);
}

/* 待機中は円の左外に隠しておく。 */
.mtop-hero__news-arrow::before {
	translate: calc(-1 * var(--arrow-flow-x)) 0;
}

/* ホバー演出：テキストを少し透過し、矢印を右へ流す。
 * 動きの長さ・イージングは「もっと見る」ボタン（.mtop-news__more-arrow ほか）と揃えて
 * 0.3s ease-out の1回再生。出ていく矢印と入ってくる矢印が同時に動くので、
 * 再生が終わって基準位置に戻る瞬間も見た目は変わらない（＝ちらつかない）。 */
@keyframes mtopHeroNewsArrowOut { to { translate: var(--arrow-flow-x) 0; } }
@keyframes mtopHeroNewsArrowIn { to { translate: 0 0; } }

.mtop-hero__news-item:hover .mtop-hero__news-arrow::after {
	animation: mtopHeroNewsArrowOut 0.3s ease-out;
}

.mtop-hero__news-item:hover .mtop-hero__news-arrow::before {
	animation: mtopHeroNewsArrowIn 0.3s ease-out;
}

.mtop-hero__news-date,
.mtop-hero__news-divider,
.mtop-hero__news-title {
	transition: opacity 0.3s ease-out;
}

.mtop-hero__news-item:hover .mtop-hero__news-date,
.mtop-hero__news-item:hover .mtop-hero__news-divider,
.mtop-hero__news-item:hover .mtop-hero__news-title {
	opacity: 0.6;
}

/* SP専用：ヒーロー直後に続くカーテン状パネル（PCでは非表示、ピンも無効化） */
.mtop-hero__reveal {
	display: none;
}

/* ==================== MVカーテン：考え方セクションが下から覆う（PC） ====================
 * MVを画面に貼り付け（sticky）、後続の「丸辰の考え方」を1つ手前のレイヤーに置く。
 * 考え方セクションは白背景が不透明なので、そのままMVを隠しながらせり上がる。
 * スクロール量に1:1で追従するのでフェードインとは見え方が違い、指を止めれば止まり、
 * 戻せばそのまま戻る。JSは暗さの制御だけに使い、動き自体はCSSに任せている。
 *
 * SPは @media (max-width: 767px) 側で既に同じ挙動になっているためPC限定。
 *
 * .mtop-cover で囲っているのは、貼り付きを考え方セクションの終わりで解除するため。
 * 囲わないと sticky の基準が main になり、MVはページ最後まで貼り付いたままになる。
 * 背景色を持たない後続セクション（.mtop-novelty）から透けて見えてしまう。 */
@media (min-width: 768px) {

	/* 中身の配置は1440px枠、背景は各セクションで画面幅へ広げる。 */
	.mtop {
		width: 100%;
	}

	.mtop > :not(.mtop-cover),
	.mtop-cover > .mtop-philosophy {
		max-width: 1440px;
		margin-inline: auto;
	}

	.mtop-hero__pin {
		/* ヘッダーを除いた画面高に、KV720＋下余白30を収める。
		 * 親の横幅基準単位で算出し、KV内だけに縮尺を渡す。 */
		--hero-pc: min(1px, var(--pc), calc((100svh - 90 * var(--pc)) / 750));
		--hero-panel-gutter: calc(60 * var(--pc));
		position: sticky;
		top: calc(90 * var(--pc));
		z-index: 0;                /* 覆う側より背面。後続セクションはDOM順で手前に出る */
	}

	.mtop-hero {
		--pc: var(--hero-pc);
	}

	/* 背景は他セクションの幅に揃え、中身だけ1440px基準で中央に置く。 */
	.mtop-hero__panel {
		width: calc(100% - var(--hero-panel-gutter));
	}

	.mtop-hero__stage {
		display: block;
		position: relative;
		width: calc(1380 * var(--pc));
		height: 100%;
		margin-inline: auto;
	}

	/* 覆う側 */
	.mtop-philosophy {
		position: relative;
		z-index: 1;
	}

	/* 覆われていく間、MVを少しずつ暗くする。
	 * --mtop-hero-dim（0→1）は home.js がスクロール量から毎フレーム決める。
	 * 暗さの上限を変えたいときは下の 0.4 を増減する（0＝暗くしない）。
	 * パネルからはみ出す商品画像（photo-bottles は top:-20）も一緒に暗くしたいので、
	 * 重ねる要素ではなく filter を使う。 */
	.mtop-hero__panel {
		filter: brightness(calc(1 - 0.4 * var(--mtop-hero-dim, 0)));
	}

}

/* ==================== ヒーロー：登場アニメーション（PCのみ） ====================
 * JS(home.js)が #mtop-hero に .is-loaded を付与して開始。参照: smile-hero-animation-v1。
 * 商品は rotate(--rot) を基準に translate/scale の個別プロパティで浮遊させる。
 * SP は今回対象外（このブロックは min-width:768px 限定）。 */
@media (min-width: 768px) {

	/* テキスト・お知らせカード：開始前は隠し、.is-loaded でフェード＋スライドイン */
	.mtop-hero__title,
	.mtop-hero__lead,
	.mtop-hero__news {
		opacity: 0;
		translate: 0 calc(18 * var(--pc));
		animation: mtopHeroTextIn 0.7s ease-out forwards;
		animation-play-state: paused;
	}
	.mtop-hero__lead { animation-delay: 0.3s; }
	.mtop-hero__news { animation-delay: 0.5s; }

	/* 笑顔シェイプ：clip-path で左→右に伸びて1回だけ表示 */
	.mtop-hero__smile--pc {
		clip-path: inset(0 100% 0 0);
		animation: mtopHeroSmileGrow 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
		animation-delay: 0.9s;
		animation-play-state: paused;
	}

	/* .is-loaded（JS付与）で全アニメを走らせる */
	.mtop-hero.is-loaded .mtop-hero__title,
	.mtop-hero.is-loaded .mtop-hero__lead,
	.mtop-hero.is-loaded .mtop-hero__news,
	.mtop-hero.is-loaded .mtop-hero__smile--pc,
	.mtop-hero.is-loaded .mtop-hero__item {
		animation-play-state: running;
	}

	@keyframes mtopHeroTextIn {
		to { opacity: 1; translate: 0 0; }
	}

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


}

/* ==================== 丸辰の考え方 ====================
 * 白パネル → 紺パネルの2枚を縦に積む。中の要素は各パネル基準で px 配置する。
 */
.mtop-philosophy__panel {
	position: relative; /* 中の要素を px で絶対配置するときの原点 */
	width: calc(1440 * var(--pc));
}

/* 1枚目：背景白 */
.mtop-philosophy__panel--white {
	height: calc(1010 * var(--pc));
	background: #fff;
}

/* 2枚目：背景 #1A355C */
.mtop-philosophy__panel--navy {
	height: calc(1220 * var(--pc));
	background: var(--mt-navy-deep);
	color: #fff; /* 中のテキストは白（子に継承） */
}

/* 中間パネルは SP 専用（PCでは非表示） */
.mtop-philosophy__panel--mid {
	display: none;
}

/* パネル1本文は SP 専用（PCでは非表示） */
.mtop-philosophy__intro {
	display: none;
}

/* パネル3の中身も SP 専用（PCではラッパーごと非表示） */
.mtop-philosophy__p3 {
	display: none;
}

/* 白パネル内の動画（その考え方を、かたちに。300×300・角丸） */
.mtop-philosophy__main-video {
	position: absolute;
	left: calc(867 * var(--pc));
	top: calc(850 * var(--pc));
	z-index: 1; /* 背景・他要素より前面に */
	width: calc(300 * var(--pc));
	height: calc(300 * var(--pc));
	border-radius: calc(30 * var(--pc));
	object-fit: cover;
	background: #d9d9d9;
}

/* 紺パネル中央の動画（400×400・角丸） */
.mtop-philosophy__video {
	position: absolute;
	left: calc(520 * var(--pc));
	top: calc(520 * var(--pc));
	z-index: 1; /* 背景・他要素より前面に */
	width: calc(400 * var(--pc));
	height: calc(400 * var(--pc));
	border-radius: calc(30 * var(--pc));
	object-fit: cover;
	background: #d9d9d9;
}

/* --- 紺パネル内の要素（px 絶対配置。座標は紺パネル左上から） --- */
.mtop-philosophy__katachi,
.mtop-philosophy__axis,
.mtop-philosophy__dash,
.mtop-philosophy__axis-title,
.mtop-philosophy__axis-text,
.mtop-philosophy__proof {
	position: absolute;
	margin: 0;
}

/* 縦書き「かたちに」 */
.mtop-philosophy__katachi {
	left: calc(1250 * var(--pc));
	top: calc(60 * var(--pc));
	width: calc(40 * var(--pc));
	writing-mode: vertical-rl;
	/* フォントの字送りが変わっても2列に折り返さないようにする。 */
	white-space: nowrap;
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	letter-spacing: 0; /* 先方指示で 0.13em → 0（字間が広く見えるため） */
}

/* 4軸ラベル（英字＝Helvetica） */
.mtop-philosophy__axis {
	top: calc(380 * var(--pc));
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(20 * var(--pc));
	font-weight: 700;
	line-height: 1;
}

.mtop-philosophy__axis--speed { left: calc(100 * var(--pc)); }
.mtop-philosophy__axis--volume { left: calc(478 * var(--pc)); opacity: 0.3; }
.mtop-philosophy__axis--quality { left: calc(874 * var(--pc)); opacity: 0.3; }
.mtop-philosophy__axis--value { left: calc(1273 * var(--pc)); opacity: 0.3; }

/* 破線（2px dash / 2px gap。色は currentColor 経由）。
 * 太さ(height)と点のサイズはヘアラインなので固定px（--pcで縮めると1px未満で潰れて消えるため）。
 * 線の長さ(width)と位置(left/top)だけ--pcでスケールする。 */
.mtop-philosophy__dash {
	top: calc(390 * var(--pc));
	width: calc(230 * var(--pc));
	height: 1px;
	--fill: 0%; /* 進捗（JSが軸内スクロール量で更新）。白い点線オーバーレイの幅。 */
	/* 下地：薄い白の点線 */
	background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 2px, transparent 2px, transparent 4px);
}

/* 進捗オーバーレイ：白い点線を --fill 幅だけ重ねる（下地と同じ2px/4px・左端そろえで点が一致） */
.mtop-philosophy__dash::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--fill);
	background-image: repeating-linear-gradient(to right, #fff 0, #fff 2px, transparent 2px, transparent 4px);
}

.mtop-philosophy__dash--1 { left: calc(208 * var(--pc)); }
.mtop-philosophy__dash--2 { left: calc(604 * var(--pc)); }
.mtop-philosophy__dash--3 { left: calc(1002 * var(--pc)); }

/* SPEED の見出し */
.mtop-philosophy__axis-title {
	left: calc(100 * var(--pc));
	top: calc(624 * var(--pc));
	width: calc(320 * var(--pc));
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(60 * var(--pc));
	letter-spacing: 0.15em;
}

/* SPEED の説明 */
.mtop-philosophy__axis-text {
	left: calc(100 * var(--pc));
	top: calc(764 * var(--pc));
	width: calc(320 * var(--pc));
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
}

/* 右側の詳細 */
.mtop-philosophy__proof {
	left: calc(1020 * var(--pc));
	/* 中央の動画（top520＋高さ400）の中心へ、本文の高さに応じて揃える。 */
	top: calc(720 * var(--pc));
	transform: translateY(-50%);
	width: calc(320 * var(--pc));
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
}

/* お問い合わせバッジ：ガラス円 */
.mtop-philosophy__contact-circle {
	position: absolute;
	left: calc(595 * var(--pc));
	top: calc(1020 * var(--pc));
	width: calc(250 * var(--pc));
	height: calc(250 * var(--pc));
	box-sizing: border-box;
	border-radius: 50%;
	border: calc(1 * var(--pc)) solid rgba(255, 255, 255, 0.3);
	background: rgba(44, 80, 130, 0.01);
	backdrop-filter: blur(calc(50 * var(--pc)));
	-webkit-backdrop-filter: blur(calc(50 * var(--pc)));
}

/* お問い合わせバッジ：円周に沿う周回テキスト（後でSVGごと回転させてアニメ化） */
.mtop-philosophy__contact-text {
	position: absolute;
	left: calc(595 * var(--pc));
	top: calc(1020 * var(--pc));
	width: calc(250 * var(--pc));
	height: calc(250 * var(--pc));
	pointer-events: none; /* クリックは下の円リンクへ通す */
}

.mtop-philosophy__contact-text text {
	fill: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
	/* SVGのviewBox(250)がSVG幅calc(250*--pc)で既に--pc倍される。更に--pcを掛けると
	 * 二重スケール(18*--pc²)で1439〜751pxで過小になるため、ユーザー単位のまま(18)にする。 */
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-anchor: middle; /* 円弧の中央（上部）に文字をそろえる */
}

/* ホバー：お問い合わせの周回文字を時計回りに回す。ホバー中だけアニメを適用し、
 * 離すと基準（rotate 0＝始めの位置）へ戻る。
 * 円（contact-circle）が唯一クリック可能（text/arrow は pointer-events:none）なのでそこで hover 判定。 */
.mtop-philosophy__contact-circle:hover ~ .mtop-philosophy__contact-text {
	animation: mtopContactSpin 8s linear infinite;
}
@keyframes mtopContactSpin {
	to { rotate: 360deg; }
}
/* お問い合わせバッジ：中央の矢印（軸線＝Figma、先端の山は CSS） */
.mtop-philosophy__contact-arrow {
	position: absolute;
	left: calc(704 * var(--pc));
	top: calc(1144 * var(--pc));
	width: calc(32 * var(--pc));
	height: calc(2 * var(--pc));
	background: #fff;
	pointer-events: none;
}

/* 矢印の伸び【バッジ用】：絶対配置なので width で伸ばしてOK（先端が左→右へ進む）。
 * from のみ指定 → 100% は各要素の基準幅（バッジ矢印=32px）。 */
@keyframes mtopArrowLoop {
	from { width: 0; }
}
.mtop-philosophy__contact-circle:hover ~ .mtop-philosophy__contact-arrow {
	animation: mtopArrowLoop 0.3s ease-out;
}

/* 矢印の伸び【ボタン用】：矢印は flex の子要素。箱幅(18px)は固定のままにし（＝仕切り線が動かない）、
 * 線を ::before（scaleX で左から伸長）、先端 ::after を横移動させる。両者は同期して右端が進むので、
 * 短い段階から「→」の形（棒→矢印にならない）。線は各矢印の色（白/濃紺）で ::before に描く。 */
.mtop-numbers__btn-arrow::before,
.mtop-news__more-arrow::before,
.mtop-faq__more-arrow::before,
.mtop-cta__btn-arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-origin: left center;
}
.mtop-numbers__btn-arrow::before,
.mtop-news__more-arrow::before,
.mtop-faq__more-arrow::before { background: #fff; }
.mtop-cta__btn-arrow::before { background: #333; }

@keyframes mtopArrowLine { from { transform: scaleX(0); } }        /* 100% は基準(=scaleX1) */
/* --arrow-head-x は各要素側で「自分の箱の全幅（負値）」を指定する（箱幅が違うSP版でも使い回せるように）。 */
@keyframes mtopArrowHead { from { translate: var(--arrow-head-x) 0; } } /* 100% は基準(=0) */

.mtop-numbers__btn:hover .mtop-numbers__btn-arrow::before,
.mtop-news__more:hover .mtop-news__more-arrow::before,
.mtop-faq__more:hover .mtop-faq__more-arrow::before,
.mtop-cta__btn:hover .mtop-cta__btn-arrow::before {
	animation: mtopArrowLine 0.3s ease-out;
}
.mtop-numbers__btn:hover .mtop-numbers__btn-arrow::after,
.mtop-news__more:hover .mtop-news__more-arrow::after,
.mtop-faq__more:hover .mtop-faq__more-arrow::after,
.mtop-cta__btn:hover .mtop-cta__btn-arrow::after {
	--arrow-head-x: calc(-18 * var(--pc)); /* PC箱幅（numbers/news/faq/cta共通） */
	animation: mtopArrowHead 0.3s ease-out;
}

.mtop-philosophy__contact-arrow::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--pc));
	top: 50%;
	width: calc(8 * var(--pc));
	height: calc(8 * var(--pc));
	border-top: calc(2 * var(--pc)) solid #fff;
	border-right: calc(2 * var(--pc)) solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* お問い合わせバッジ：ホバー時に出す中央テキスト（今は非表示） */
.mtop-philosophy__contact-hover {
	position: absolute;
	left: calc(661 * var(--pc));
	top: calc(1122 * var(--pc));
	width: calc(118 * var(--pc));
	height: calc(46 * var(--pc));
	visibility: hidden;
	color: #fff;
	font-size: calc(16 * var(--pc));
	font-weight: 700;
	line-height: calc(23 * var(--pc));
	letter-spacing: 0.06em;
	text-align: center;
}

/* ==================== 丸辰の考え方：スクロールピン（PC） ====================
 * 紺パネルをピン留めし、スクロール進捗で4軸(SPEED/VOLUME/QUALITY/VALUE)を切替。
 * data-axis(0..3) は home.js が付与。SP は __p3 で別実装のため PC 限定。 */
@media (min-width: 768px) {

	/* ピン用ラッパー：パネル高 + 3ステップ分の余白（軸間の遷移距離）。 */
	.mtop-philosophy__pin {
		position: relative;
		height: calc(1220 * var(--pc) + 300vh);
	}

	/* 紺パネルを画面上端にピン留め。SPEED等の文字（パネル内top:380）が画面上端から
	 * top:160の位置で止まるよう、topを-220（=160-380）にしてピン開始位置をずらす。 */
	.mtop-philosophy__panel--navy {
		position: sticky;
		top: calc(-220 * var(--pc));
	}

	/* 軸の見出し・本文・proof・動画：4セットを同位置に重ね、data-axis に応じてクロスフェード */
	.mtop-philosophy__axis-title,
	.mtop-philosophy__axis-text,
	.mtop-philosophy__proof,
	.mtop-philosophy__video {
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	.mtop-philosophy__panel--navy[data-axis="0"] [data-set="0"],
	.mtop-philosophy__panel--navy[data-axis="1"] [data-set="1"],
	.mtop-philosophy__panel--navy[data-axis="2"] [data-set="2"],
	.mtop-philosophy__panel--navy[data-axis="3"] [data-set="3"] {
		opacity: 1;
	}

	/* 軸ラベル：非アクティブは薄く、アクティブ軸のみ点灯 */
	.mtop-philosophy__axis {
		opacity: 0.3;
		transition: opacity 0.4s ease;
	}
	.mtop-philosophy__panel--navy[data-axis="0"] .mtop-philosophy__axis--speed,
	.mtop-philosophy__panel--navy[data-axis="1"] .mtop-philosophy__axis--volume,
	.mtop-philosophy__panel--navy[data-axis="2"] .mtop-philosophy__axis--quality,
	.mtop-philosophy__panel--navy[data-axis="3"] .mtop-philosophy__axis--value {
		opacity: 1;
	}

}

/* --- 白パネル内の要素（px 絶対配置。座標は白パネル左上から） --- */
.mtop-philosophy__title,
.mtop-philosophy__read,
.mtop-philosophy__catch {
	position: absolute;
	margin: 0;
	color: var(--mt-navy);
	font-weight: 700;
}

/* 縦書き見出し「丸辰の考え方」 */
.mtop-philosophy__title {
	left: calc(150 * var(--pc));
	top: calc(150 * var(--pc));
	width: calc(40 * var(--pc));
	writing-mode: vertical-rl;
	/* フォントの字送りが変わっても2列に折り返さないようにする。 */
	white-space: nowrap;
	font-size: calc(40 * var(--pc));
	line-height: calc(50 * var(--pc));
	letter-spacing: 0;
}

/* 説明文（やじろべえ）
 * 改行位置は<br>で明示している。フォントの字幅が変わって枠に収まらなくなると、
 * <br>以外の位置でも折り返してデザインと違う行組みになるため、自動折り返しは止める。 */
.mtop-philosophy__read {
	left: calc(867 * var(--pc));
	top: calc(300 * var(--pc));
	/* Figmaは423だが、最長行（20文字）がわずかに超えるため実測に合わせて広げる。
	 * パネル右端（1380）までは余裕があり、他の要素とは重ならない。 */
	width: calc(440 * var(--pc));
	white-space: nowrap;
	font-size: calc(20 * var(--pc));
	line-height: calc(50 * var(--pc));
	letter-spacing: 0.06em;
}

/* キャッチ「その考え方を、」 */
.mtop-philosophy__catch {
	left: calc(495 * var(--pc));
	top: calc(850 * var(--pc));
	width: calc(309 * var(--pc));
	font-size: calc(40 * var(--pc));
	line-height: calc(53 * var(--pc));
	letter-spacing: 0.12em;
	white-space: nowrap; /* 自動折り返しを止める */
}

/* やじろべえロゴ（method/ のSVG。幅のみ指定＝高さは比率で自動。後で個別アニメ予定） */
.mtop-philosophy__yaji {
	position: absolute;
}

.mtop-philosophy__yaji--shadow { left: calc(404 * var(--pc)); top: calc(560 * var(--pc)); width: calc(196 * var(--pc)); } /* shadow.svg（背面。blur込み） */
.mtop-philosophy__yaji--1 { left: calc(277 * var(--pc)); top: calc(385 * var(--pc)); width: calc(450 * var(--pc)); } /* yajirobe1.svg（大） */
.mtop-philosophy__yaji--2 { left: calc(458 * var(--pc)); top: calc(353 * var(--pc)); width: calc(88 * var(--pc)); }  /* yajirobe2.svg（小） */

/* やじろべえ：Figmaコメント「ロゴは左右に少し揺れる（やじろべえ）／影で存在感」。
 * 下端中央の支点(パネル 502,547)を軸に、本体(1+2)を同位相でゆっくり左右にロック。
 * 影は同位相で微小に横移動して存在感を添える。SPでは PC やじろべえが非表示のため PC 限定で効く。 */
.mtop-philosophy__yaji--1,
.mtop-philosophy__yaji--2 {
	animation: mtopYajiSway 3.6s ease-in-out infinite;
}
.mtop-philosophy__yaji--1 { transform-origin: 50% 100%; }                  /* ビーム下端中央 = 支点 */
.mtop-philosophy__yaji--2 { transform-origin: 50% calc(194 * var(--pc)); } /* 同じ支点（要素上端から下194px） */

.mtop-philosophy__yaji--shadow {
	animation: mtopYajiShadow 3.6s ease-in-out infinite;
}

@keyframes mtopYajiSway {
	0%, 100% { rotate: -4.2deg; }
	50%      { rotate: 4.2deg; }
}

@keyframes mtopYajiShadow {
	0%, 100% { translate: calc(-12 * var(--pc)) 0; }
	50%      { translate: calc(12 * var(--pc)) 0; }
}

/* ==================== 数字（実績） ====================
 * 前セクションとパネルの間に calc(330 * var(--pc)) の白い余白（padding-top）。
 * ベージュパネルは中の要素を px 配置する原点。
 */
.mtop-numbers {
	padding-top: calc(330 * var(--pc)); /* 前セクション〜パネル間の白背景 */
	background: #fff;
}

.mtop-numbers__panel {
	position: relative; /* 中の要素を px で置くときの原点 */
	/* ブロック整形コンテキストを作り、子(.mtop-numbers__product)の margin-top が
	 * パネルの外へ突き抜ける「マージン相殺」を防ぐ（overflow:hidden だと sticky 自体が壊れるため flow-root を使う）。 */
	display: flow-root;
	width: calc(1380 * var(--pc));
	height: calc(2024 * var(--pc));
	margin: 0 auto; /* 左右中央（＝ページ左右からcalc(30 * var(--pc))） */
	background: var(--mt-beige);
	border-radius: calc(30 * var(--pc));
}

/* SP専用の数字コンテンツ（PCではラッパーごと非表示） */
.mtop-numbers__sp {
	display: none;
}

/* --- パネル内の文字（px 絶対配置。座標はパネル左上から） --- */
.mtop-numbers__head,
.mtop-numbers__year,
.mtop-numbers__sub,
.mtop-numbers__foot {
	position: absolute;
	margin: 0;
	color: var(--mt-ink); /* #333 */
}

/* 見出し（縦書き3列）
 * Figma: 各列 left 760/700/640・top 3320（パネル原点(30,3400)を引いて 730/670/610・-80）、
 * 1文字あたり行の高さ50px（積み重ねは=5文字250px／数字にも・表れます=4文字200px）。
 *
 * writing-mode で縦書きにすると、字送りがフォントの縦メトリクス任せになり
 * デザインの50pxと合わない（読み込むフォントによって列の長さが変わってしまう）。
 * そこで「1行に1文字だけ入る幅」にして横書きのまま積み上げ、行の高さで字送りを決める。
 * これならフォントが変わっても1文字50pxが保たれる。 */
.mtop-numbers__head {
	width: calc(40 * var(--pc));
	top: calc(-80 * var(--pc));
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	letter-spacing: 0; /* 字送りは line-height で決めるため、文字自体の余白は付けない */
}

/* 読点「、」。デザインでも独立した要素になっている。
 * Figma（ページ座標）: left 785 / top 3543 / 40×50
 * → パネル原点(30, 3400)を引いて left 755 / top 143。
 * 1マス分の枠として置き、縦書きにすることで読点がマスの右上寄りに描かれる。 */
.mtop-numbers__head-comma {
	position: absolute;
	left: calc(755 * var(--pc));
	top: calc(143 * var(--pc));
	width: calc(40 * var(--pc));
	writing-mode: vertical-rl;
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	color: var(--mt-ink);
}

.mtop-numbers__head--1 { left: calc(730 * var(--pc)); } /* 「積み重ねは」5文字＝250px */
.mtop-numbers__head--2 { left: calc(670 * var(--pc)); }
.mtop-numbers__head--3 { left: calc(610 * var(--pc)); }

/* 実績年 */
.mtop-numbers__year {
	left: calc(638 * var(--pc));
	top: calc(295 * var(--pc));
	width: calc(103 * var(--pc));
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: calc(21 * var(--pc));
	letter-spacing: 0.06em;
	white-space: nowrap; /* 折り返し防止 */
}

/* サブ文（中央） */
.mtop-numbers__sub {
	left: calc(520 * var(--pc));
	top: calc(233 * var(--pc));
	width: calc(339 * var(--pc));
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	text-align: center;
	white-space: nowrap; /* 各行を折り返さない（改行は <br> のみ） */
}

/* フッター文（中央） */
.mtop-numbers__foot {
	left: calc(470 * var(--pc));
	top: calc(1666 * var(--pc));
	width: calc(440 * var(--pc));
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
	text-align: center;
	/* 改行位置は<br>で決める。最終行が枠を1pxほど超えて折り返すため、
	 * <br>以外の位置では折り返さないようにする（中央揃えは保たれる）。 */
	white-space: nowrap;
}

/* 中央の商品画像：貼り付き自体はネイティブ position:sticky に任せる（スクロールと完全同期、JSのフレーム遅延によるズレが出ない）。
 * top の値（ヘッダー高を差し引いた見える範囲の中央）は home.js が読み込み時/リサイズ時にのみ計算して設定し、
 * スクロール中は一切再計算しない（sticky が自動で追従するため不要）。
 * margin で上下対称のクランプ（各366px相当）を作り、開始/終了位置を揃える。
 * sticky・追従はラッパー（-wrap）が担い、img自体は揺れ（sway）のみを担当する。
 * 影（.mtop-numbers__shadow）もラッパーの子にすることで、画像の揺れと独立してsticky位置に追従する。
 * 3点（bottle/gift/mug）を同位置に重ねて data-item に応じてクロスフェードするため、
 * -wrap には旧画像（numbers-product.png 1489×2067）と同じ比率で高さを固定する。 */
.mtop-numbers__product-wrap {
	position: sticky;
	margin: calc(366 * var(--pc)) 0 calc(366 * var(--pc)) calc(572 * var(--pc));
	width: calc(236 * var(--pc));
	aspect-ratio: 1489 / 2067;
}

.mtop-numbers__product {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.5s ease;
	--sway-y: calc(-10 * var(--pc)); /* 揺れ幅（SPでは --sp を使って個別に上書き） */
	animation: mtopNumbersSway 4.2s ease-in-out infinite;
}

.mtop-numbers__product-wrap[data-item="0"] .mtop-numbers__product[data-set="0"],
.mtop-numbers__product-wrap[data-item="1"] .mtop-numbers__product[data-set="1"],
.mtop-numbers__product-wrap[data-item="2"] .mtop-numbers__product[data-set="2"] {
	opacity: 1;
}

/* 影（#E7E7E7 楕円・blur）。商品画像の下端のすぐ下に置き、画像とわずかに位相同期して横に揺れる
 * （画像の傾き揺れとは別の動きにすることで、地面に落ちる影らしい奥行きを出す）。 */
.mtop-numbers__shadow {
	position: absolute;
	left: calc(23 * var(--pc));
	top: calc(100% + 10 * var(--pc));
	width: calc(190 * var(--pc));
	height: calc(26 * var(--pc));
	background: #e7e7e7;
	border-radius: 50%;
	filter: blur(calc(4 * var(--pc)));
	--shadow-sway-x: calc(6 * var(--pc));
	animation-name: mtopNumbersShadowSway;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 4.2s;
	transition: opacity 0.3s ease;
}

/* スクロール終盤、stickyが下端でクランプされてフッター文（.mtop-numbers__foot）と重なる位置まで来たら、
 * home.js が付与するこのクラスで影だけを消す（画像自体はそのまま見せる）。 */
.mtop-numbers__shadow.is-hidden {
	opacity: 0;
}

/* 数字セクションの商品画像：ゆらゆらと連続的に揺れる（カタログ表紙の「カタカタ」とは違い、
 * 軸を切り替えず滑らかに回転＋上下する水中的な揺れ）。--sway-y は各要素側で --pc/--sp を使って定義するので、
 * このキーフレーム自体はグローバル（メディアクエリ外）に1つ置くだけでPC/SP両方から参照できる
 * （@keyframesはメディアクエリにスコープされるため、breakpointごとに再定義が必要になるのを避ける）。 */
@keyframes mtopNumbersSway {
	0%, 100% { rotate: -3deg; translate: 0 0; }
	50%      { rotate: 3deg; translate: 0 var(--sway-y); }
}

/* 影の横揺れ：--shadow-sway-x は各要素側で --pc/--sp を使って定義する（グローバルキーフレームをPC/SP共用にするため）。 */
@keyframes mtopNumbersShadowSway {
	0%, 100% { translate: calc(-1 * var(--shadow-sway-x)) 0; }
	50%      { translate: var(--shadow-sway-x) 0; }
}

/* --- 実績カード（白い角丸）と吹き出しの尾（三角） ---
 * 見出し＝カード（尾を含む）として、スクロールで画面に入ったら home.js が .is-revealed を付与する。
 * パネル左半分のカードは左から右へ、右半分のカードは右から左へスライドインする。
 * ラベル文字（.mtop-stat__label）も同じ左右判定・同じタイミングで個別にスライドインするため、
 * カードと文字がほぼ同時に現れて「見出しごと動く」ように見える。 */
.mtop-numbers__card,
.mtop-numbers__tail {
	position: absolute;
	background: #fff;
	opacity: 0;
	transition: opacity 1s ease-out, translate 1s ease-out;
}

.mtop-numbers__card.is-revealed,
.mtop-numbers__tail.is-revealed {
	opacity: 1;
	translate: 0 0;
}

/* 左側のカード・尾（1,5,6,7,8,9）：左からスライドイン */
.mtop-numbers__card--1, .mtop-numbers__tail--1,
.mtop-numbers__card--5, .mtop-numbers__tail--5,
.mtop-numbers__card--6, .mtop-numbers__tail--6,
.mtop-numbers__card--7, .mtop-numbers__tail--7,
.mtop-numbers__card--8, .mtop-numbers__tail--8,
.mtop-numbers__card--9, .mtop-numbers__tail--9 {
	translate: calc(-40 * var(--pc)) 0;
}

/* 右側のカード・尾（2,3,4,10,11）：右からスライドイン */
.mtop-numbers__card--2, .mtop-numbers__tail--2,
.mtop-numbers__card--3, .mtop-numbers__tail--3,
.mtop-numbers__card--4, .mtop-numbers__tail--4,
.mtop-numbers__card--10, .mtop-numbers__tail--10,
.mtop-numbers__card--11, .mtop-numbers__tail--11 {
	translate: calc(40 * var(--pc)) 0;
}

.mtop-numbers__card {
	border-radius: calc(30 * var(--pc));
}

/* 尾：45×75.81 の丸みを付けた三角（tail.svg をマスクに）。transform は各要素で。 */
.mtop-numbers__tail {
	width: calc(45 * var(--pc));
	height: calc(75.81 * var(--pc));
	-webkit-mask: url(../images/home/numbers/numbers-tail.svg) center / contain no-repeat;
	mask: url(../images/home/numbers/numbers-tail.svg) center / contain no-repeat;
}

/* カード（left / top / 幅 / 高さ） */
.mtop-numbers__card--1  { left: calc(60 * var(--pc));  top: calc(300 * var(--pc));  width: calc(412 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--2  { left: calc(869 * var(--pc)); top: calc(350 * var(--pc));  width: calc(451 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--3  { left: calc(962 * var(--pc)); top: calc(559 * var(--pc));  width: calc(325 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--4  { left: calc(869 * var(--pc)); top: calc(768 * var(--pc));  width: calc(276 * var(--pc)); height: calc(223 * var(--pc)); }
.mtop-numbers__card--5  { left: calc(80 * var(--pc));  top: calc(529 * var(--pc));  width: calc(236 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--6  { left: calc(212 * var(--pc)); top: calc(738 * var(--pc));  width: calc(236 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--7  { left: calc(80 * var(--pc));  top: calc(947 * var(--pc));  width: calc(295 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--8  { left: calc(233 * var(--pc)); top: calc(1156 * var(--pc)); width: calc(239 * var(--pc)); height: calc(164 * var(--pc)); }
.mtop-numbers__card--9  { left: calc(60 * var(--pc));  top: calc(1365 * var(--pc)); width: calc(352 * var(--pc)); height: calc(205 * var(--pc)); }
.mtop-numbers__card--10 { left: calc(874 * var(--pc)); top: calc(1360 * var(--pc)); width: calc(426 * var(--pc)); height: calc(197 * var(--pc)); }
.mtop-numbers__card--11 { left: calc(968 * var(--pc)); top: calc(1027 * var(--pc)); width: calc(282 * var(--pc)); height: calc(289 * var(--pc)); }

/* 尾（left / top / 回転）。rotate と反転(matrix)は Figma のまま */
.mtop-numbers__tail--1  { left: calc(385.12 * var(--pc)); top: calc(411 * var(--pc));     transform: rotate(150deg); }
.mtop-numbers__tail--2  { left: calc(879 * var(--pc));    top: calc(461 * var(--pc));     transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0); }
.mtop-numbers__tail--3  { left: calc(972 * var(--pc));    top: calc(670 * var(--pc));     transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0); }
.mtop-numbers__tail--4  { left: calc(879 * var(--pc));    top: calc(938 * var(--pc));     transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0); }
.mtop-numbers__tail--5  { left: calc(229.12 * var(--pc)); top: calc(640 * var(--pc));     transform: rotate(150deg); }
.mtop-numbers__tail--6  { left: calc(361.12 * var(--pc)); top: calc(849 * var(--pc));     transform: rotate(150deg); }
.mtop-numbers__tail--7  { left: calc(288.12 * var(--pc)); top: calc(1058 * var(--pc));    transform: rotate(150deg); }
.mtop-numbers__tail--8  { left: calc(385.12 * var(--pc)); top: calc(1267 * var(--pc));    transform: rotate(150deg); }
.mtop-numbers__tail--9  { left: calc(325.12 * var(--pc)); top: calc(1517.35 * var(--pc)); transform: rotate(150deg); }
.mtop-numbers__tail--10 { left: calc(884 * var(--pc));    top: calc(1504.35 * var(--pc)); transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0); }
.mtop-numbers__tail--11 { left: calc(978 * var(--pc));    top: calc(1263.35 * var(--pc)); transform: matrix(0.87, 0.5, 0.5, -0.87, 0, 0); }

/* --- 実績カードの中身（ラベル・数値・単位）。位置は各要素のインライン style で指定 --- */
.mtop-stat__label,
.mtop-stat__num,
.mtop-stat__unit,
.mtop-stat__note {
	position: absolute;
	margin: 0;
}

/* ラベル（常時在庫数 等）：スクロールで画面に入ったら home.js が .is-revealed を付与する。
 * パネル左半分にあるものは左から右へ、右半分にあるものは右から左へスッとスライドインする
 * （--left/--right はパネル内のleft位置から home.php 側で振り分け済み）。 */
.mtop-stat__label {
	color: var(--mt-ink);
	font-size: calc(14 * var(--pc));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 1s ease-out, translate 1s ease-out;
}

/* SPのカード見出し（.mtop-numbers__sp-cdot）と同じ「先頭の黒丸」をPCにも付ける。
 * PCの各ラベルの left/top はFigma座標そのまま（丸なしのテキスト開始位置）なので、
 * テキスト側は動かさず、丸だけをその左外側に追加する。
 * サイズはFigma指定の8×8。左には「丸の幅8 + 余白10」ぶん戻し、テキストの外に出す。
 * 上下は label自体が position:absolute な行（line-height:1）なので、中央に来るよう
 * 半分の高さぶん引き上げてから translate で微調整する。 */
.mtop-stat__label::before {
	content: "";
	position: absolute;
	left: calc(-18 * var(--pc));
	top: 50%;
	translate: 0 -50%;
	width: calc(8 * var(--pc));
	height: calc(8 * var(--pc));
	background: #333;
	border-radius: 50%;
}

.mtop-stat__label--left {
	translate: calc(-40 * var(--pc)) 0;
}

.mtop-stat__label--right {
	translate: calc(40 * var(--pc)) 0;
}

.mtop-stat__label.is-revealed {
	opacity: 1;
	translate: 0 0;
}

/* 数値・単位・注記・区切り線：ラベルと同じタイミング・同じ左右判定でスライドインする
 * （--left/--right はラベルと同じ振り分けを home.php 側で付与済み）。 */
.mtop-stat__num,
.mtop-stat__unit,
.mtop-stat__note,
.mtop-stat__divider {
	opacity: 0;
	transition: opacity 1s ease-out, translate 1s ease-out;
}

.mtop-stat__num--left,
.mtop-stat__unit--left,
.mtop-stat__note--left,
.mtop-stat__divider--left {
	translate: calc(-40 * var(--pc)) 0;
}

.mtop-stat__num--right,
.mtop-stat__unit--right,
.mtop-stat__note--right,
.mtop-stat__divider--right {
	translate: calc(40 * var(--pc)) 0;
}

.mtop-stat__num.is-revealed,
.mtop-stat__unit.is-revealed,
.mtop-stat__note.is-revealed,
.mtop-stat__divider.is-revealed {
	opacity: 1;
	translate: 0 0;
}

/* 数値（Helvetica・水色）
 * フォールバックに Helvetica/Arial を明示（localhostでAdobe Fontsが412で落ちる時、
 * 総称sans-serifだと太い書体になり枠をはみ出すため。本番は先頭のhelvetica-lt-proが有効）。 */
.mtop-stat__num {
	color: var(--mt-blue);
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(70 * var(--pc));
	font-weight: 700;
	line-height: 1;
}

.mtop-stat__num--sm { font-size: calc(55 * var(--pc)); } /* 年間カタログ発行数（360,000 / 340,000） */

/* 単位（個+ / 回 / 年 等） */
.mtop-stat__unit {
	color: var(--mt-ink);
	font-size: calc(18 * var(--pc));
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.mtop-stat__unit--lg { font-size: calc(28 * var(--pc)); }

/* 「14時まで即日出荷」の「まで」だけを小さく見せる（PCのみ。SPは元のまま等倍）。
 * 親のフォントサイズに対する比率で指定（28→18px 相当）。 */
.mtop-stat__unit-sub {
	font-size: 0.64em;
} /* 時まで即日出荷 */

/* 都市などの小さい補足 */
.mtop-stat__note {
	color: var(--mt-ink);
	font-size: calc(12 * var(--pc));
	font-weight: 700;
	line-height: calc(18 * var(--pc));
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* 拠点数の縦線（国内／中国の区切り） */
.mtop-stat__divider {
	position: absolute;
	width: calc(1 * var(--pc));
	height: calc(111 * var(--pc));
	background: #333;
}

/* --- CTAボタン（お問い合わせ / 会社案内）。位置はインライン、中は flex --- */
.mtop-numbers__btn {
	position: absolute;
	display: flex;
	align-items: center;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	padding: 0 calc(30 * var(--pc)) 0 calc(40 * var(--pc));
	background: var(--mt-ink);
	border-radius: calc(15 * var(--pc));
	color: #fff;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mtop-numbers__btn:hover {
	opacity: 0.85;
}

.mtop-numbers__btn-label {
	margin-right: auto; /* ラベルを左、区切り線＋矢印を右へ */
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
}

.mtop-numbers__btn-divider {
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	margin-right: calc(30 * var(--pc));
	background: #fff;
}

/* 矢印（横線＋先端の山で →） */
.mtop-numbers__btn-arrow {
	position: relative;
	width: calc(18 * var(--pc));
	height: calc(1.5 * var(--pc));
	/* 線は ::before（伸長アニメ用）。要素自体は箱のみ。 */
}

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

/* ==================== Hello Novelty!（カタログ） ==================== */
.mtop-catalog {
	padding-top: calc(100 * var(--pc)); /* 数字セクション下の白余白 */
	background: #fff;
}

/* ① 企業ロゴ列：右→左へ流れるマーキー。
 * .mtop-logos は表示用のビューポート（はみ出しをクリップ）。
 * .mtop-logos__track が実際に動く帯で、同じ4ロゴを2セット並べ、track全体を-50%平行移動する。
 * gapは全ての隣接ペア（セット内・セット間の継ぎ目）に均等にかかるため、-50%移動でシームレスにループする。 */
.mtop-logos {
	overflow: hidden;
	width: 100%;
	height: calc(60 * var(--pc));
}

.mtop-logos__track {
	display: flex;
	align-items: center;
	gap: calc(120 * var(--pc));
	width: max-content;
	animation: mtopLogosMarquee 28s linear infinite;
}

.mtop-logos img {
	flex: none;
	width: auto;
	height: calc(60 * var(--pc));
}

@keyframes mtopLogosMarquee {
	to {
		transform: translateX(-50%);
	}
}

/* ② カタログパネル（枠付きボックス。中の要素を px 配置する原点） */
.mtop-catalog__box {
	position: relative;
	box-sizing: border-box;
	width: calc(1140 * var(--pc));
	height: calc(427 * var(--pc));
	margin: calc(180 * var(--pc)) auto 0; /* ロゴ列の180px下・中央 */
	background: #fff;
	border: calc(1 * var(--pc)) solid #e1e1e1;
	border-radius: calc(30 * var(--pc));
}

/* カタログパネル内の文字（px 絶対配置。座標はボックス左上から） */
.mtop-catalog__title,
.mtop-catalog__lead {
	position: absolute;
	margin: 0;
	color: var(--mt-ink);
}

/* 見出し（自社で企画し… / 自社で発信する） */
.mtop-catalog__title {
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(60 * var(--pc));
	letter-spacing: 0.15em;
	white-space: nowrap;
}

/* 本文 */
.mtop-catalog__lead {
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(26 * var(--pc));
	letter-spacing: 0.06em;
}

/* 下部の2ボタン（カタログ詳細 / 商品一覧）。ボックス下辺いっぱいに2分割 */
.mtop-catalog__btn {
	position: absolute;
	bottom: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(570 * var(--pc));
	height: calc(70 * var(--pc));
	background: var(--mt-ink);
	color: #fff;
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mtop-catalog__btn:hover {
	opacity: 0.85;
}

.mtop-catalog__btn--left {
	left: 0;
	border-radius: 0 0 0 calc(30 * var(--pc));
}

.mtop-catalog__btn--right {
	right: 0;
	border-left: calc(1 * var(--pc)) solid #fff; /* 2ボタンの継ぎ目の白線 */
	border-radius: 0 0 calc(30 * var(--pc)) 0;
}

/* 矢印（右端） */
.mtop-catalog__btn-arrow {
	position: absolute;
	top: 50%;
	right: calc(40 * var(--pc));
	width: calc(14 * var(--pc));
	height: calc(14 * var(--pc));
	transform: translateY(-50%);
}

/* カタログ表紙画像（枠に合わせて cover でトリミング。位置はインライン）。
 * Figmaコメント：最新号発刊のたびに差し替える想定＋シンプルだが少し目立つ動きが欲しい。
 * →底辺の左右の端を交互に軸にして「カタカタ」と揺れる（がたつき）ループ。
 * rotate と transform-origin を別々のアニメーションとして重ね、軸の切り替えは
 * 回転角0度のタイミング（見た目に段差が出ない瞬間）で行う。 */
.mtop-catalog__cover {
	position: absolute;
	width: calc(240 * var(--pc));
	height: calc(341 * var(--pc));
	object-fit: cover;
	/* 画面に入ったときに1回だけ「カタカタ」と揺れる（ループしない）。
	 * home.js が .is-playing を付けた時点で再生する。 */
	animation:
		mtopCatalogCoverRock 2.4s ease-in-out 1,
		mtopCatalogCoverPivot 2.4s linear 1;
	animation-play-state: paused;
}

/* PC版(.mtop-catalog__cover)とSP版(.mtop-catalog__sp-cover)の両方が対象。 */
.mtop-catalog__cover.is-playing,
.mtop-catalog__sp-cover.is-playing {
	animation-play-state: running;
}

/* 0%:平ら(軸=左下) → 25%:左下を軸に傾く → 50%:平ら(ここで軸を右下に切替) → 75%:右下を軸に傾く → 100%:平ら */
@keyframes mtopCatalogCoverRock {
	0%, 50%, 100% { rotate: 0deg; }
	25%           { rotate: -3deg; }
	75%           { rotate: 3deg; }
}

/* 軸の位置：前半は左下、後半は右下。切り替わりは回転0度の瞬間に重なるので見た目に段差が出ない。 */
@keyframes mtopCatalogCoverPivot {
	0%, 49.9%  { transform-origin: bottom left; }
	50%, 100%  { transform-origin: bottom right; }
}

/* カタログ箱の中身は SP 専用（PCではラッパーごと非表示） */
.mtop-catalog__sp {
	display: none;
}

/* ③ Hello Novelty! パネル（1440×679・カタログボックスの180px下） */
.mtop-novelty {
	position: relative; /* 中の要素を px 配置する原点 */
	width: calc(1440 * var(--pc));
	height: calc(679 * var(--pc));
	margin-top: calc(180 * var(--pc));
}

/* 下部のグレー帯（背景）。中の商品は帯からはみ出す分を隠す（跳ねると全体が見える） */
.mtop-novelty__band {
	position: absolute;
	left: 0;
	top: calc(153 * var(--pc));
	width: calc(1440 * var(--pc));
	height: calc(526 * var(--pc));
	background: #ececec;
	overflow: hidden;
}

/* SP専用の novelty 要素は PC では非表示 */
.mtop-novelty__sp {
	display: none;
}

.mtop-novelty__band .mtop-novelty__sp-product {
	display: none;
}

/* 緑のハイライト（novelty.svg。タイトル背後） */
.mtop-novelty__highlight {
	position: absolute;
	left: 50%;
	top: calc(40 * var(--pc));
	transform: translateX(-50%);
	width: calc(620 * var(--pc));
	height: auto;
}

/* 商品列（幅はインライン・高さ auto＝比率維持）。
 * 静止時は下部が帯(overflow:hidden)にクリップされて隠れている。ジャンプ量を
 * 抑えているため、跳ねても上部までは見えきらない（意図的な調整。詳細は下記）。
 * 各アイテムごとに周期・ディレイを変えたCSS無限ループで、同期しない自然な「ひょこっと」を作る
 * （厳密な乱数はJSが必要だが、見た目には遜色なくCSSのみでJS不要・軽量）。
 * ジャンプ量は --hop-y カスタムプロパティ経由（PC/SPそれぞれ --pc/--sp で個別に指定）にすることで、
 * このキーフレーム自体はグローバル1つのままPC/SP両方から使い回せる（数字セクションの揺れと同じ手法）。 */
.mtop-novelty__product {
	position: absolute;
	height: auto;
	animation-name: mtopNoveltyHop;
	animation-iteration-count: infinite;
}

/* 周期の90%は静止。残りの短い時間だけ、小さく跳ねて戻る。 */
@keyframes mtopNoveltyHop {
	0%, 90% { translate: 0 0; animation-timing-function: ease-out; }
	94%     { translate: 0 var(--hop-y); animation-timing-function: ease-in; }
	98%     { translate: 0 0; animation-timing-function: ease-out; }
	100% { translate: 0 0; }
}

/* 跳躍量18px、周期10〜16秒。各商品がたまに小さく動く。 */
.mtop-novelty__product--1 { --hop-y: calc(-18 * var(--pc)); animation-duration: 10.6s; animation-delay: 0s; }
.mtop-novelty__product--2 { --hop-y: calc(-18 * var(--pc)); animation-duration: 12.8s; animation-delay: 0.9s; }
.mtop-novelty__product--3 { --hop-y: calc(-18 * var(--pc)); animation-duration: 14.2s; animation-delay: 1.7s; }
.mtop-novelty__product--4 { --hop-y: calc(-18 * var(--pc)); animation-duration: 11.1s; animation-delay: 0.4s; }
.mtop-novelty__product--5 { --hop-y: calc(-18 * var(--pc)); animation-duration: 13.5s; animation-delay: 2.3s; }
.mtop-novelty__product--6 { --hop-y: calc(-18 * var(--pc)); animation-duration: 15.9s; animation-delay: 1.1s; }

/* タイトル Hello Novelty! */
.mtop-novelty__title {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: calc(402 * var(--pc));
	margin: 0;
	color: var(--mt-ink);
	font-family: "montserrat", sans-serif;
	font-size: calc(100 * var(--pc));
	font-weight: 700;
	line-height: calc(90 * var(--pc));
	letter-spacing: -0.04em;
	text-align: center;
}

/* 左の見出し・本文 */
.mtop-novelty__heading,
.mtop-novelty__text {
	position: absolute;
	margin: 0;
	color: var(--mt-ink);
}

.mtop-novelty__heading {
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	letter-spacing: 0.15em;
}

.mtop-novelty__text {
	width: calc(593 * var(--pc));
	/* 改行位置は<br>で決める。1行目（35文字）が枠を0.6pxほど超えて折り返すため、
	 * <br>以外の位置では折り返さないようにする。 */
	white-space: nowrap;
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(32 * var(--pc));
	letter-spacing: 0.06em;
}

/* ボタン（Hello, Novelty!） */
.mtop-novelty__btn {
	position: absolute;
	display: flex;
	align-items: center;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	padding: 0 calc(30 * var(--pc)) 0 calc(40 * var(--pc));
	background: var(--mt-ink);
	border-radius: calc(15 * var(--pc));
	color: #fff;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mtop-novelty__btn:hover {
	opacity: 0.85;
}

.mtop-novelty__btn-label {
	margin-right: auto;
	font-size: calc(14 * var(--pc));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
}

.mtop-novelty__btn-divider {
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	margin-right: calc(30 * var(--pc));
	background: #fff;
}

.mtop-novelty__btn-arrow {
	width: calc(14 * var(--pc));
	height: calc(14 * var(--pc));
}

/* ==================== 会社案内 / 採用カード ==================== */
/* セクション上（novelty との間）に calc(150 * var(--pc)) の余白 */
.mtop-lead-cards {
	padding-top: calc(150 * var(--pc));
}

.mtop-lead-card {
	position: relative; /* 中の要素を px 配置する原点 */
	width: calc(1380 * var(--pc));
	height: calc(578 * var(--pc));
	margin: 0 auto;
	border-radius: calc(30 * var(--pc));
	overflow: hidden;
	color: #fff;
}

/* SP専用の見出し・本文は PC では非表示 */
.mtop-lead-card__sp-heading,
.mtop-lead-card__sp-text {
	display: none;
}

/* カード同士は calc(30 * var(--pc)) */
.mtop-lead-card + .mtop-lead-card {
	margin-top: calc(30 * var(--pc));
}

.mtop-lead-card--company {
	background: linear-gradient(180deg, #e4a887 0%, #eb8d59 100%);
}

/* 高さは会社案内カードと同じ578（先方指示）。正方形の動画は表示枠いっぱいに収め、上下を切り取る（object-fit: cover）。 */
.mtop-lead-card--recruit {
	background: linear-gradient(180deg, #8ec7e3 0%, #4c9ec7 100%);
}

/* 右半分の写真パネル（緑背面＋写真を左オフセットで配置） */
.mtop-lead-card__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(690 * var(--pc));
	height: calc(578 * var(--pc));
	overflow: hidden;
	background: #8ed681;
}

/* company.jpg（2026-09差し替え）。会社概要ページの同じ写真と同じ考え方で、建物まわりの
 * 余白を除いた範囲だけを見せるように拡大トリミングしている（窓の比率690:578が
 * 会社概要側の500:304.35と違うため、数値は窓の比率に合わせて計算し直している）。 */
.mtop-lead-card__photo img {
	position: absolute;
	top: -72%;      /* -416.3 / 578 * 100 */
	left: -67.9%;   /* -468.6 / 690 * 100 */
	width: 263.9%;  /* 1821.1 / 690 * 100 */
	max-width: none; /* base.css の max-width:100% を解除（窓幅で潰れるのを防ぐ） */
	height: auto;
}

/* PC/SPとも縦横比を保ちながら表示枠いっぱいに動画を配置する。 */
.mtop-lead-card__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 見出し・本文 */
.mtop-lead-card__heading,
.mtop-lead-card__text {
	position: absolute;
	margin: 0;
}

.mtop-lead-card__heading {
	font-size: calc(40 * var(--pc));
	font-weight: 700;
	line-height: calc(50 * var(--pc));
	letter-spacing: 0.15em;
}

/* 本文は左70・幅375、下端をカードの下から70にそろえる（Figma）。文言の行数が変わっても下の余白が保たれるよう、
 * 上からではなく下からの位置で置く。 */
.mtop-lead-card__text {
	left: calc(70 * var(--pc));
	bottom: calc(70 * var(--pc));
	width: calc(375 * var(--pc));
	font-size: calc(16 * var(--pc));
	font-weight: 500;
	line-height: calc(28 * var(--pc));
	letter-spacing: 0.06em;
}

/* 円形バッジ（ガラス円＋周回テキスト＋中央矢印） */
.mtop-lead-card__badge {
	position: absolute;
	box-sizing: border-box;
	width: calc(250 * var(--pc));
	height: calc(250 * var(--pc));
	border-radius: 50%;
	border: calc(1 * var(--pc)) solid rgba(255, 255, 255, 0.3);
	background: rgba(44, 80, 130, 0.01);
	backdrop-filter: blur(calc(50 * var(--pc)));
	-webkit-backdrop-filter: blur(calc(50 * var(--pc)));
}

.mtop-lead-card__badge-text {
	position: absolute;
	width: calc(250 * var(--pc));
	height: calc(250 * var(--pc));
	pointer-events: none;
}

.mtop-lead-card__badge-text text {
	fill: #fff;
	font-family: "zen-kaku-gothic-new", sans-serif;
	/* SVGのviewBox(250)がSVG幅(PC:250*--pc / SP:300*--sp)で既にスケールされる。
	 * 更に--pcを掛けると二重スケールで中間幅・SPで過小になるため、ユーザー単位のまま(18)。
	 * viewBoxが共通(250)なのでPC/SPとも円に対する文字比率が一致する。 */
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-anchor: middle;
}

.mtop-lead-card__badge-arrow {
	position: absolute;
	width: calc(32 * var(--pc));
	height: calc(2 * var(--pc));
	background: #fff;
	pointer-events: none;
}

.mtop-lead-card__badge-arrow::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--pc));
	top: 50%;
	width: calc(8 * var(--pc));
	height: calc(8 * var(--pc));
	border-top: calc(2 * var(--pc)) solid #fff;
	border-right: calc(2 * var(--pc)) solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* 採用バッジ中央のアイコン（menu-arrow.svg） */
.mtop-lead-card__badge-icon {
	position: absolute;
	width: calc(28 * var(--pc));
	height: calc(28 * var(--pc));
	pointer-events: none;
}

/* ホバー演出（考え方のお問い合わせバッジと共通のキーフレームを流用）。
 * 文字回転＝会社案内・採用情報の両方／矢印の伸びループ＝会社案内のみ（採用は画像アイコンのため対象外）。
 * badge(円リンク) が唯一クリック可能で、text/arrow は pointer-events:none。DOM順は badge→text→arrow なので ~ で届く。
 * SPにはホバーが無いため、.is-viewing（home.jsがIntersectionObserverでカードが画面内にある間だけ付与）でも
 * 同じ演出が起きるようにする。 */
.mtop-lead-card__badge:hover ~ .mtop-lead-card__badge-text,
.mtop-lead-card__badge.is-viewing ~ .mtop-lead-card__badge-text {
	animation: mtopContactSpin 8s linear infinite;
}
.mtop-lead-card--company .mtop-lead-card__badge:hover ~ .mtop-lead-card__badge-arrow {
	animation: mtopArrowLoop 0.3s ease-out;
}
/* SPはホバーで気づけないため、画面内にある間はPCと同じ伸びの動きを繰り返す（動作は同一、速度のみ遅く）。 */
.mtop-lead-card--company .mtop-lead-card__badge.is-viewing ~ .mtop-lead-card__badge-arrow {
	animation: mtopArrowLoop 2s ease-out infinite;
}
/* ==================== お知らせ ==================== */
.mtop-news {
	width: calc(1440 * var(--pc));
	height: calc(738 * var(--pc));
	margin-top: calc(150 * var(--pc)); /* 採用カード下端(8386) → お知らせ上端(8536) の余白 */
	background: #333333;
}

/* 中身は左右150pxマージン（calc(1140 * var(--pc))）で中央寄せ、上calc(200 * var(--pc)) */
.mtop-news__inner {
	width: calc(1140 * var(--pc));
	margin: 0 auto;
	padding-top: calc(200 * var(--pc));
}

/* SP専用お知らせ：PCでは非表示 */
.mtop-news__sp {
	display: none;
}

/* 見出し行（お知らせ ／ 一覧ボタン） */
.mtop-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtop-news__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;
}

/* お知らせ一覧ボタン */
.mtop-news__more {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	border: calc(0.5 * var(--pc)) solid #fff;
	border-radius: calc(15 * var(--pc));
	color: #fff;
	text-decoration: none;
}

.mtop-news__more-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;
}

.mtop-news__more-divider {
	flex: none;
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	background: #fff;
}

.mtop-news__more-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（伸長アニメ用） */
}

.mtop-news__more-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 #fff;
	border-right: calc(1.5 * var(--pc)) solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* 記事カード（4件） */
.mtop-news__list {
	display: flex;
	gap: calc(20 * var(--pc));
	margin-top: calc(60 * var(--pc)); /* 見出し行下端(270) → カード上端(330) */
}

.mtop-news__card {
	flex: none;
	width: calc(270 * var(--pc));
	height: calc(208 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtop-news__card-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* タイトル上・日付下 */
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: calc(30 * var(--pc));
	color: inherit;
	text-decoration: none;
}

.mtop-news__card-title {
	margin: 0;
	font-family: "zen-kaku-gothic-new", sans-serif;
	font-size: calc(14 * var(--pc));
	font-weight: 700;
	line-height: calc(25 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
	/* 最大3行で切り詰め（動的化後の長文対策） */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mtop-news__card-date {
	font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(13 * var(--pc));
	font-weight: 700;
	line-height: calc(13 * var(--pc));
	letter-spacing: 0.06em;
	color: #333;
}

/* ==================== よくある質問 ==================== */
.mtop-faq {
	min-height: calc(1000 * var(--pc)); /* お知らせ下端から広がる白い空間 */
	background: #fff;
}

/* 中身は左右150pxマージン（calc(1140 * var(--pc))）で中央寄せ、上calc(150 * var(--pc)) */
.mtop-faq__inner {
	width: calc(1140 * var(--pc));
	margin: 0 auto;
	padding-top: calc(150 * var(--pc));
	/* 下の余白を明示する。指定が無いと、セクションの min-height の「余り」が
	 * そのまま下の余白として見えるだけになり、アコーディオンを開いて中身が
	 * min-height を超えた瞬間に余白が0になってCTAと接してしまう。
	 * SP側（padding-bottom: 120）と同じ考え方に揃える。 */
	padding-bottom: calc(150 * var(--pc));
}

/* 見出し行（よくある質問 ／ 質問一覧ボタン） */
.mtop-faq__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtop-faq__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: #333;
}

/* 質問一覧ボタン（塗り #333・白抜き） */
.mtop-faq__more {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: calc(341 * var(--pc));
	height: calc(70 * var(--pc));
	background: #333333;
	border-radius: calc(15 * var(--pc));
	color: #fff;
	text-decoration: none;
}

.mtop-faq__more-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;
}

.mtop-faq__more-divider {
	flex: none;
	width: calc(1 * var(--pc));
	height: calc(30 * var(--pc));
	background: #fff;
}

.mtop-faq__more-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（伸長アニメ用） */
}

.mtop-faq__more-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 #fff;
	border-right: calc(1.5 * var(--pc)) solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* ===== アコーディオン（details/summary） ===== */
.mtop-faq__list {
	margin-top: calc(30 * var(--pc)); /* 見出し行下端(220) → Q1上端(250) */
}

.mtop-faq__item {
	margin-bottom: calc(20 * var(--pc)); /* 質問ボックス同士の間隔（質問↔回答の5pxとは別） */
}

/* 質問行：質問ボックス(1049) + calc(5 * var(--pc)) + トグル(86) = 1140 */
.mtop-faq__q {
	display: flex;
	gap: calc(5 * var(--pc));
	list-style: none;
	cursor: pointer;
}

.mtop-faq__q::-webkit-details-marker {
	display: none;
}

.mtop-faq__q-box {
	display: flex;
	align-items: center;
	flex: none;
	box-sizing: border-box;
	width: calc(1049 * var(--pc));
	height: calc(86 * var(--pc));
	padding-left: calc(30 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtop-faq__q-text {
	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: #333;
}

/* トグルボタン（＋／−） */
.mtop-faq__toggle {
	position: relative; /* 中央の2本の棒の原点 */
	flex: none;
	width: calc(86 * var(--pc));
	height: calc(86 * var(--pc));
	background: #f7f5eb;
	border-radius: calc(15 * var(--pc));
}

.mtop-faq__toggle-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(18 * var(--pc));
	height: calc(1.5 * var(--pc));
	background: #333;
}

.mtop-faq__toggle-bar--h {
	transform: translate(-50%, -50%);
}

.mtop-faq__toggle-bar--v {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら縦棒を消して「−」に */
.mtop-faq__item[open] .mtop-faq__toggle-bar--v {
	display: none;
}

/* 回答ボックス（開いた時に表示） */
.mtop-faq__a {
	box-sizing: border-box;
	width: calc(1140 * var(--pc));
	margin-top: calc(5 * var(--pc));
	padding: calc(30 * var(--pc));
	background: #eeead8;
	border-radius: calc(15 * var(--pc));
}

.mtop-faq__a-text {
	margin: 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: #333;
}

/* 回答は管理画面のリッチテキスト（段落は<p>で入る）。既定の段落余白を消し、
 * 段落が続くときだけ1行ぶんあける。 */
.mtop-faq__a-text > p {
	margin: 0;
}

.mtop-faq__a-text > p + p {
	margin-top: calc(26 * var(--pc));
}

/* ==================== CTA（ご相談ください） ==================== */
.mtop-cta {
	width: calc(1440 * var(--pc));
	height: calc(658 * var(--pc));
	margin-bottom: calc(150 * var(--pc)); /* CTA下端(10933) → フッターまでの余白 */
	background: #1a355c; /* --mt-navy-deep */
}

.mtop-cta__inner {
	padding-top: calc(180 * var(--pc));
	text-align: center;
}

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

.mtop-cta__lead {
	width: calc(497 * var(--pc));
	margin: calc(40 * var(--pc)) auto 0; /* 見出し下端(230) → 本文上端(270) */
	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行ごとの自動折り返しは止める
 * （幅497pxだと1行目が収まりきらず、意図しない位置で折り返っていた）。
 * 幅はテキストに合わせて自動で広げる。 */
.mtop-cta__lead--pc {
	width: max-content;
	white-space: nowrap;
}

/* SP専用の見出し・本文はPCでは非表示 */
.mtop-cta__title--sp,
.mtop-cta__lead--sp {
	display: none;
}

/* ボタン2つ（カタログ請求 ／ お問い合わせ） */
.mtop-cta__actions {
	display: flex;
	justify-content: center;
	gap: calc(14 * var(--pc));
	margin-top: calc(60 * var(--pc)); /* 本文下端(348) → ボタン上端(408) */
}

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

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

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

.mtop-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（伸長アニメ用） */
}

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

/* ============================================================
 * SP（〜767px）— 各セクション本体
 * スケール係数 --sp は common.css の :root（@media 内）で定義済み。
 * 値は calc(Figmaのpx * var(--sp))。Figma SP は 750px 幅・パネル原点(30,120)。
 * 位置/サイズはパネル左上基準（Figmaの座標 − (30,120)）。
 * ============================================================ */
@media (max-width: 767px) {

	/* MVを固定し、スクロール後にリード文を同じ位置でフェード表示する。 */
	.mtop-hero__pin {
		position: sticky;
		top: calc(120 * var(--sp)); /* SPヘッダー（.mt-header__inner）の高さぶん下げる */
		z-index: 0;                 /* 覆う側（.mtop-philosophy）より背面 */
	}

	.mtop-hero {
		/* stickyはpin側が担うため、ここでは重ねてstickyにしない。 */
		position: static;
	}

	.mtop-hero__panel {
		width: calc(690 * var(--sp));
		height: calc(1110 * var(--sp));
		margin: 0 auto;
		border-radius: calc(30 * var(--sp));
		overflow: hidden;   /* smile を角丸パネル内にクリップ */
	}

	/* MVと同じ位置に重ねる。透明度はhome.js、後続パネルの重なりはstickyで制御。 */
	.mtop-hero__reveal {
		position: sticky;
		top: calc(120 * var(--sp)); /* ヒーロー(pin)と同じ、SPヘッダーの高さぶん */
		z-index: 1; /* pin(z-index:0)より前面。philosophy(z-index:3)より背面。 */
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(690 * var(--sp));
		/* MVと同じ高さを持ち、下マージンで読むためのスクロール区間を確保する。 */
		height: calc(1110 * var(--sp));
		opacity: 0;
		pointer-events: none;
		/* フェード表示後も読み続けられるよう、次のパネルまでの区間を長く取る。 */
		/* svh非対応のSafariでも負のマージンと読むための余白を維持する。 */
		margin: calc(-1110 * var(--sp)) auto 150vh;
		margin: calc(-1110 * var(--sp)) auto 150svh;
		transition: opacity 0.7s ease-out;
		padding: calc(60 * var(--sp));
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(calc(50 * var(--sp)));
		-webkit-backdrop-filter: blur(calc(50 * var(--sp)));
		border-radius: calc(30 * var(--sp));
	}

	.mtop-hero__reveal-text {
		margin: 0;
		/* Figmaは473だが、最長行（14文字）が実測でわずかに超えるため実測に合わせて広げる
		 * （PCの.mtop-philosophy__readと同じ理由）。改行は<br>で決めているので、
		 * それ以外の位置で折り返さないよう自動折り返しは止める。 */
		width: calc(480 * var(--sp));
		white-space: nowrap;
		font-size: calc(32 * var(--sp));
		line-height: calc(64 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		text-align: center;
		color: var(--mt-navy);
	}

	/* smile 切替（.mtop img に勝つよう親クラス付き） */
	.mtop-hero__panel .mtop-hero__smile--pc { display: none; }
	.mtop-hero__panel .mtop-hero__smile--sp {
		display: block;
		left: 0;                        /* 左端をベージュパネルの左端に合わせる */
		top: calc(590 * var(--sp));     /* Figma section 710 − パネル120 */
		width: calc(600 * var(--sp));   /* SVG本来の大きさ（750pxで600×260・比率維持） */
		height: calc(260 * var(--sp));
	}

	/* リード文はSPでは非表示 */
	.mtop-hero__lead { display: none; }

	/* 縦書きタイトル（笑顔をつなぐ／販促品） */
	.mtop-hero__title {
		left: auto;
		right: calc(50 * var(--sp));
		top: calc(70 * var(--sp));
		width: auto;
		writing-mode: vertical-rl;
		font-size: calc(57 * var(--sp));
		line-height: calc(77 * var(--sp));  /* 縦書き＝列間 */
		letter-spacing: 0.2em;
	}

	/* 商品画像（SP）。first-hero-items（セット1）。
	 * Figmaの座標はヘッダー左端基準だったため、パネルの左オフセット30pxを引き
	 * （left = Figma値 − 30）、SPヘッダーの高さ120px分も引いてパネル相対値にしている
	 * （top = Figma値 − 120）。 */
	.mtop-hero__item--bottle-circle { left: calc(16     * var(--sp)); top: calc(0     * var(--sp)); width: calc(170    * var(--sp)); height: calc(170    * var(--sp)); --rot: -30deg; }
	.mtop-hero__item--note-circle   { left: calc(254.86 * var(--sp)); top: calc(150   * var(--sp)); width: calc(170    * var(--sp)); height: calc(170    * var(--sp)); --rot: 11.24deg; }
	.mtop-hero__item--pink-pen      { left: calc(175    * var(--sp)); top: calc(222   * var(--sp)); width: calc(18     * var(--sp)); height: calc(180    * var(--sp)); --rot: 15deg; }
	.mtop-hero__item--blue-pen      { left: calc(116    * var(--sp)); top: calc(280   * var(--sp)); width: calc(17     * var(--sp)); height: calc(180    * var(--sp)); --rot: -15deg; }
	.mtop-hero__item--towel         { left: calc(282    * var(--sp)); top: calc(405   * var(--sp)); width: calc(120    * var(--sp)); height: calc(140.59 * var(--sp)); --rot: 13.1deg; }
	.mtop-hero__item--pouch         { left: calc(52     * var(--sp)); top: calc(471.2 * var(--sp)); width: calc(159.6  * var(--sp)); height: calc(129.96 * var(--sp)); --rot: -11.86deg; }
	.mtop-hero__item--yellow-bottle { left: calc(216    * var(--sp)); top: calc(586   * var(--sp)); width: calc(81.14  * var(--sp)); height: calc(176.8  * var(--sp)); --rot: 9.72deg; }

	/* second-hero-items（セット2・SP）。
	 * Figmaの座標はヘッダー左端基準だったため、パネルの左オフセット30pxを引き
	 * （left = Figma値 − 30）、SPヘッダーの高さ120px分も引いてパネル相対値にしている
	 * （top = Figma値 − 120）。 */
	.mtop-hero__item--note-circle-b   { left: calc(58  * var(--sp)); top: calc(-25   * var(--sp)); width: calc(170    * var(--sp)); height: calc(170    * var(--sp)); --rot: 11.24deg; }
	.mtop-hero__item--sponge2         { left: calc(299 * var(--sp)); top: calc(127   * var(--sp)); width: calc(144.24 * var(--sp)); height: calc(81.72  * var(--sp)); --rot: 30deg; }
	.mtop-hero__item--pot             { left: calc(77  * var(--sp)); top: calc(209   * var(--sp)); width: calc(99.05  * var(--sp)); height: calc(153.05 * var(--sp)); --rot: -15deg; }
	.mtop-hero__item--sponge1         { left: calc(225 * var(--sp)); top: calc(219.33 * var(--sp)); width: calc(125.42 * var(--sp)); height: calc(86.55  * var(--sp)); --rot: -30deg; }
	.mtop-hero__item--bottle-circle-b { left: calc(331 * var(--sp)); top: calc(316   * var(--sp)); width: calc(170    * var(--sp)); height: calc(170    * var(--sp)); --rot: 30deg; }
	.mtop-hero__item--bag             { left: calc(50.4 * var(--sp)); top: calc(416  * var(--sp)); width: calc(159.6  * var(--sp)); height: calc(129.82 * var(--sp)); --rot: 15deg; }
	.mtop-hero__item--lamp            { left: calc(242 * var(--sp)); top: calc(498   * var(--sp)); width: calc(79.8   * var(--sp)); height: calc(262.25 * var(--sp)); --rot: -9deg; }

	/* お知らせカード（白・2件） */
	.mtop-hero__news {
		left: calc(45 * var(--sp));
		top: calc(910 * var(--sp));
		width: calc(600 * var(--sp));
		height: calc(160 * var(--sp));
		border-radius: calc(15 * var(--sp));
		gap: calc(20 * var(--sp));
		padding: 0 calc(30 * var(--sp));
	}

	.mtop-hero__news-item {
		height: calc(40 * var(--sp));
		gap: calc(18 * var(--sp));
	}

	.mtop-hero__news-date {
		font-size: calc(20 * var(--sp));
	}

	.mtop-hero__news-divider {
		width: calc(2 * var(--sp));
		height: calc(20 * var(--sp));
	}

	.mtop-hero__news-title {
		font-size: calc(22 * var(--sp));
		color: var(--mt-navy);   /* SPは紺 */
	}

	/* SPにホバーは無いが、待機中の2本目の矢印（::before）を円の外へ確実に逃がすため、
	 * 流れる距離もSPの円の直径に合わせて上書きする。 */
	.mtop-hero__news-arrow {
		--arrow-flow-x: calc(40 * var(--sp));
		width: calc(40 * var(--sp));
		height: calc(40 * var(--sp));
	}

	.mtop-hero__news-arrow::before,
	.mtop-hero__news-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));
	}

	/* ===== ヒーロー：登場アニメーション（SP）。PC版のキーフレームをそのまま流用し --pc→--sp に置き換え。
	 * JS(home.js)は共通（#mtop-hero に .is-loaded を付与）でPC/SP問わず動作済み。
	 * SPパネルは笑顔シェイプを角丸に収めるため overflow:hidden（PCはvisible）。
	 * そのためitemの登場/退場（パネル下へのオーバーシュート部分）は角丸の外側が見えないが、
	 * 弾む本体の動きはパネル内で問題なく見える。 */
	.mtop-hero__title,
	.mtop-hero__news {
		opacity: 0;
		translate: 0 calc(18 * var(--sp));
		animation: mtopHeroTextIn 0.7s ease-out forwards;
		animation-play-state: paused;
	}
	.mtop-hero__news { animation-delay: 0.5s; }

	.mtop-hero__panel .mtop-hero__smile--sp {
		clip-path: inset(0 100% 0 0);
		animation: mtopHeroSmileGrow 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
		animation-delay: 0.9s;
		animation-play-state: paused;
	}

	.mtop-hero.is-loaded .mtop-hero__title,
	.mtop-hero.is-loaded .mtop-hero__news,
	.mtop-hero.is-loaded .mtop-hero__panel .mtop-hero__smile--sp,
	.mtop-hero.is-loaded .mtop-hero__item {
		animation-play-state: running;
	}

	/* @keyframes はメディアクエリにスコープされる（PC版の @media(min-width:768px) 内で定義した
	 * ものはSPからは参照できない）ため、同名でSP用に複製し --pc → --sp に置き換える。 */
	@keyframes mtopHeroTextIn {
		to { opacity: 1; translate: 0 0; }
	}

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

	/* ===== 丸辰の考え方（3パネル） ===== */
	/* ピン留めされたヒーロー（sticky＝配置済み要素）より前面に出す。指定が無いと
	 * 通常フローのこのセクションがヒーローの下に潜り込み、迫り上がる途中でMVが透ける。 */
	.mtop-philosophy {
		position: relative;
		z-index: 3;
	}

	/* 基本：フローで縦積み。各パネルは中の要素を絶対配置する原点（position:relative は継承） */
	.mtop-philosophy__panel {
		width: auto;
	}

	/* パネル1：半透明白の角丸カード（690×1190・左右30px inset・下30px） */
	/* パネル1(white)の本文はヒーロー内のオーバーレイに移したため、SPではこのパネル自体が不要 */
	.mtop-philosophy__panel--white {
		display: none;
	}

	/* パネル2：白。※幅は未指定のため一旦フル幅で仮置き（要確認）
	 * 高さ＝キャッチ1279＋高さ48＋下余白212 = 1539
	 * （説明文をやじろべえの下に表示する形に変えたため、その分パネルも伸びる）。 */
	.mtop-philosophy__panel--mid {
		display: block;
		width: 100%;
		height: calc(1539 * var(--sp));
		background: #fff;
	}

	/* パネル3：紺のフルブリード（750×5646・角丸なし） */
	.mtop-philosophy__panel--navy {
		width: 100%;
		/* 高さは中身（追従メニュー→4軸→お問い合わせバッジ）の流れで決まる。
		 * Figmaの5646は、バッジの上端がパネル下端の200上に来る位置（バッジのmargin-bottomで再現）。 */
		height: auto;
		border-radius: 0;
		/* sticky化した __p3-menu がパネル内で唯一のフロー要素になるため、
		 * margin-top がパネル外へ突き抜けないようにBFCを作る（numbersセクションと同じ理由）。 */
		display: flow-root;
	}

	/* SPでは PC配置の考え方コンテンツを一旦隠す（SP用に順次配置していく） */
	.mtop-philosophy__title,
	.mtop-philosophy__read,
	.mtop-philosophy__catch,
	.mtop-philosophy__main-video,
	.mtop-philosophy__video,
	.mtop-philosophy__katachi,
	.mtop-philosophy__axis,
	.mtop-philosophy__dash,
	.mtop-philosophy__axis-title,
	.mtop-philosophy__axis-text,
	.mtop-philosophy__proof,
	.mtop-philosophy__contact-circle,
	.mtop-philosophy__contact-text,
	.mtop-philosophy__contact-hover,
	.mtop-philosophy__contact-arrow,
	.mtop-philosophy__panel .mtop-philosophy__yaji {
		display: none;
	}

	/* パネル1の本文（473×448 @ パネル相対108,371・32px/行64・中央） */
	.mtop-philosophy__intro {
		display: block;
		position: absolute;
		left: calc(108 * var(--sp));
		top: calc(371 * var(--sp));
		width: calc(473 * var(--sp));
		margin: 0;
		font-size: calc(32 * var(--sp));
		line-height: calc(64 * var(--sp));
		letter-spacing: 0.06em;
		text-align: center;
		color: var(--mt-navy);
	}

	/* ===== パネル2の中身（--mid 基準・page原点 0,2480） ===== */
	/* 縦書き見出し「丸辰の／考え方」 */
	.mtop-philosophy__p2-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: calc(200 * var(--sp));
		margin: 0;
		writing-mode: vertical-rl;
		/* 改行は<br>で明示。字送りが変わっても余計な位置で折り返さない。 */
		white-space: nowrap;
		font-size: calc(48 * var(--sp));
		line-height: calc(64 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.18em;
		text-align: center;
		color: var(--mt-navy);
	}

	/* SP説明文：デザイン基準28px / 64px、Medium、字間6%。 */
	.mtop-philosophy__p2-read {
		position: absolute;
		left: calc(30 * var(--sp));
		top: calc(743 * var(--sp));
		width: calc(690 * var(--sp));
		/* 明示した改行を保ち、本文を中央に配置する。 */
		padding: calc(50 * var(--sp)) 0;
		white-space: nowrap;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.4);
		backdrop-filter: blur(calc(50 * var(--sp)));
		-webkit-backdrop-filter: blur(calc(50 * var(--sp)));
		border-radius: calc(30 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(64 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		text-align: center;
		color: var(--mt-navy);
		/* ヒーローのリード文と同じすりガラスの重なり方に揃える。
		 * 不透明度は home.js がスクロール量に比例して毎フレーム決めるため、
		 * ここでは初期値だけを与える（transitionを入れるとスクロールへの追従が鈍る）。
		 * JSが動かない環境では素の状態＝表示されたままになる。 */
		opacity: 0;
	}

	/* キャッチ「その考え方を、」
	 * 説明文をやじろべえの下に表示する形に変えたため、その下端に合わせて再計算。
	 * 説明文の下端1227 ＋ 間隔52 = 1279。 */
	.mtop-philosophy__p2-catch {
		position: absolute;
		left: calc(201 * var(--sp));
		top: calc(1279 * var(--sp));
		margin: 0;
		white-space: nowrap; /* 1行で見せる文言なので折り返さない */
		font-size: calc(48 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.12em;
		color: var(--mt-navy);
	}

	/* やじろべえの影（#EDEDED 楕円・blur） 200×25 @ 275,688 */
	.mtop-philosophy__p2-shadow {
		position: absolute;
		left: calc(275 * var(--sp));
		top: calc(688 * var(--sp));
		width: calc(200 * var(--sp));
		height: calc(25 * var(--sp));
		background: #ededed;
		border-radius: 50%;
		filter: blur(calc(4 * var(--sp)));
	}

	/* やじろべえ本体（yajirobe1=ビーム / yajirobe2=支点）
	 * ※Figmaが％指定で正確な変換不可のため位置は推定。要調整。 */
	/* 影(275,688・中心x375)を基準に、PC相対配置で本体を配置 */
	.mtop-philosophy__p2-yaji1 {
		position: absolute;
		left: calc(150 * var(--sp));   /* 中央 (375 − 225) */
		top: calc(513 * var(--sp));    /* 影top688 − 175 */
		width: calc(450 * var(--sp));
		height: calc(162 * var(--sp));
	}

	.mtop-philosophy__p2-yaji2 {
		position: absolute;
		left: calc(331 * var(--sp));   /* 中央 (375 − 44) */
		top: calc(481 * var(--sp));    /* yaji1 top513 − 32 */
		width: calc(88 * var(--sp));
		height: calc(33 * var(--sp));
	}

	/* やじろべえ：PC版と同じ「左右にカタカタ揺れる」演出。SP用の要素・スケール(--sp)で再実装。
	 * @keyframes はメディアクエリにスコープされるため、同名でここに複製する（ヒーローと同じ理由）。
	 * 支点はビーム(yaji1)の下端中央。yaji2はビームの上に乗る支点パーツなので、
	 * 同じ支点座標を yaji2 自身のローカル座標に変換した値を transform-origin に使う
	 * （yaji1下端675 − yaji2上端481 = 194、PC版と同じ相対値）。 */
	.mtop-philosophy__p2-yaji1,
	.mtop-philosophy__p2-yaji2 {
		animation: mtopYajiSway 3.6s ease-in-out infinite;
	}
	.mtop-philosophy__p2-yaji1 { transform-origin: 50% 100%; }
	.mtop-philosophy__p2-yaji2 { transform-origin: 50% calc(194 * var(--sp)); }

	.mtop-philosophy__p2-shadow {
		animation: mtopYajiShadow 3.6s ease-in-out infinite;
	}

	@keyframes mtopYajiSway {
		0%, 100% { rotate: -4.2deg; }
		50%      { rotate: 4.2deg; }
	}

	@keyframes mtopYajiShadow {
		0%, 100% { translate: calc(-12 * var(--sp)) 0; }
		50%      { translate: calc(12 * var(--sp)) 0; }
	}

	/* ===== パネル3の中身（--navy 基準・page原点 0,3989） ===== */
	/* ラッパーは箱を作らず、子を --navy 基準で絶対配置 */
	.mtop-philosophy__p3 {
		display: contents;
	}

	/* 上部 main 動画（境界にまたがる。panel3-rel 225,-142） */
	.mtop-philosophy__p3-main {
		position: absolute;
		left: calc(225 * var(--sp));
		top: calc(-142 * var(--sp));
		width: calc(300 * var(--sp));
		height: calc(300 * var(--sp));
		border-radius: calc(30 * var(--sp));
		object-fit: cover;
		background: #d9d9d9;
		z-index: 1;
	}

	/* かたちに（269,228） */
	.mtop-philosophy__p3-katachi {
		position: absolute;
		left: calc(269 * var(--sp));
		top: calc(228 * var(--sp));
		margin: 0;
		font-size: calc(48 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.13em;
		color: #fff;
	}

	/* 強み追従メニュー（pill）：ヘッダー下にsticky固定し、このセクション（navyパネル）が
	 * 終わるまで表示され続ける。自然な開始位置は元のデザイン通り426（margin-topで表現）。
	 * navyパネル内で唯一のフロー要素になるため、パネルには display:flow-root が必要（上で対応済み）。 */
	.mtop-philosophy__p3-menu {
		position: sticky;
		/* SPヘッダーの高さ(120)ぴったりだとヘッダーと隙間なく接してしまうため、20あけて止める。 */
		top: calc(140 * var(--sp));
		z-index: 2; /* 下を通り過ぎる軸コンテンツより前面に */
		margin: calc(426 * var(--sp)) 0 0 calc(20 * var(--sp));
		width: calc(710 * var(--sp));
		height: calc(68 * var(--sp));
	}

	.mtop-philosophy__p3-menu-pill {
		position: absolute;
		inset: 0;
		border-radius: calc(34 * var(--sp));
		background: rgba(25, 49, 85, 0.01);
		backdrop-filter: blur(calc(50 * var(--sp)));
		-webkit-backdrop-filter: blur(calc(50 * var(--sp)));
	}

	.mtop-philosophy__p3-axislabel {
		position: absolute;
		top: calc(20 * var(--sp));   /* menu内 446−426 */
		margin: 0;
		font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: calc(28 * var(--sp));
		line-height: 1;
		font-weight: 700;
		color: rgba(255, 255, 255, 0.3);
	}

	.mtop-philosophy__p3-axislabel--on {
		color: #fff;
	}

	/* ダッシュ（軸間の進捗バー）：PCの .mtop-philosophy__dash と同じ2層構成。
	 * 下地＝薄い点線、::before＝白い点線オーバーレイを --fill 幅だけ重ねる（JSがスクロール進捗で更新）。
	 * 点線パターン(2px/4px)はヘアラインなので --sp で縮めず固定px。 */
	.mtop-philosophy__p3-menu-dash {
		position: absolute;
		top: calc(35 * var(--sp));   /* menu内 461−426 */
		width: calc(33 * var(--sp));
		height: 1px;
		--fill: 0%;
		background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 2px, transparent 2px, transparent 4px);
	}

	.mtop-philosophy__p3-menu-dash::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: var(--fill);
		background-image: repeating-linear-gradient(to right, #fff 0, #fff 2px, transparent 2px, transparent 4px);
	}

	/* 4軸ブロック（width650・パネル750の中央＝左右50）。Figmaの間隔どおり上から順に並べる：
	 * 追従メニュー下端(494)→1軸目の見出し(574)が80、本文の下端→次の軸の見出しが140。
	 * 本文の行数が変わっても余白が一定になるよう、位置は固定値ではなくmarginで決める。
	 * 現在どの軸かの判定（home.js）は各軸の実際のoffsetTopを使うため、JS側の変更は不要。 */
	.mtop-philosophy__p3-axis {
		position: relative;
		width: calc(650 * var(--sp));
		margin: calc(140 * var(--sp)) auto 0;
	}

	.mtop-philosophy__p3-menu + .mtop-philosophy__p3-axis {
		margin-top: calc(80 * var(--sp));
	}

	/* 軸の中身：見出し(60)→50→説明(90)→50→動画(500)→50→本文。 */
	.mtop-philosophy__p3-axis-title {
		width: calc(650 * var(--sp));
		margin: 0;
		font-size: calc(40 * var(--sp));
		line-height: calc(60 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.15em;
		text-align: center;
		color: #fff;
	}

	.mtop-philosophy__p3-axis-desc {
		width: calc(650 * var(--sp));
		margin: calc(50 * var(--sp)) 0 0;
		font-size: calc(30 * var(--sp));
		line-height: calc(45 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		text-align: center;
		color: #fff;
	}

	.mtop-philosophy__p3-axis-video {
		display: block;
		width: calc(500 * var(--sp));
		margin: calc(50 * var(--sp)) auto 0; /* 軸（650）の中央 */
		height: calc(500 * var(--sp));
		border-radius: calc(30 * var(--sp));
		object-fit: cover;
		background: #d9d9d9;
	}

	.mtop-philosophy__p3-axis-proof {
		width: calc(650 * var(--sp));
		margin: calc(50 * var(--sp)) 0 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #fff;
	}

	/* お問い合わせバッジ（350dia）。3部品をまとめた枠を、最後の本文の下100に中央寄せで並べる。
	 * バッジはパネル下端から150はみ出す（Figma）ため、margin-bottomを-150にしてパネルの高さを
	 * 「バッジ上端＋200」で終わらせる。 */
	.mtop-philosophy__p3-contact-wrap {
		position: relative;
		width: calc(350 * var(--sp));
		height: calc(350 * var(--sp));
		margin: calc(100 * var(--sp)) auto calc(-150 * var(--sp));
	}

	.mtop-philosophy__p3-contact {
		position: absolute;
		left: 0;
		top: 0;
		width: calc(350 * var(--sp));
		height: calc(350 * var(--sp));
		box-sizing: border-box;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.3);
		background: rgba(44, 80, 130, 0.01);
		backdrop-filter: blur(calc(50 * var(--sp)));
		-webkit-backdrop-filter: blur(calc(50 * var(--sp)));
	}

	.mtop-philosophy__p3-contact-text {
		position: absolute;
		left: 0;
		top: 0;
		width: calc(350 * var(--sp));
		height: calc(350 * var(--sp));
		pointer-events: none;
	}

	.mtop-philosophy__p3-contact-text text {
		fill: #fff;
		font-family: "zen-kaku-gothic-new", sans-serif;
		/* SVGのviewBox(350)がSVG幅calc(350*--sp)で既に--sp倍される。
		 * ここで更に--spを掛けると二重スケール(24*--sp²)で狭幅ほど過小になるため、
		 * ユーザー単位のまま(24)にしてviewBoxのスケールだけに任せる（750pxで24px相当）。 */
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-anchor: middle;
	}

	.mtop-philosophy__p3-contact-arrow {
		position: absolute;
		left: calc(145 * var(--sp)); /* バッジ内（元の配置345−200） */
		top: calc(175 * var(--sp));  /* バッジの縦中央（元の配置5621−5446） */
		width: calc(60 * var(--sp));
		height: calc(4 * var(--sp));
		background: #fff;
		pointer-events: none;
	}

	.mtop-philosophy__p3-contact-arrow::after {
		content: "";
		position: absolute;
		right: calc(-1 * var(--sp));
		top: 50%;
		width: calc(16 * var(--sp));
		height: calc(16 * var(--sp));
		border-top: calc(4 * var(--sp)) solid #fff;
		border-right: calc(4 * var(--sp)) solid #fff;
		transform: translateY(-50%) rotate(45deg);
	}

	/* SPにはホバーが無いため、画面内にある間は会社案内バッジと同じ演出（文字回転・矢印の伸びループ）を発火させる。 */
	.mtop-philosophy__p3-contact.is-viewing ~ .mtop-philosophy__p3-contact-text {
		animation: mtopContactSpin 8s linear infinite;
	}

	.mtop-philosophy__p3-contact.is-viewing ~ .mtop-philosophy__p3-contact-arrow {
		animation: mtopArrowLoop 2s ease-out infinite;
	}

	/* ===== 数字（実績） ===== */
	/* 前セクション（考え方）末端 → パネル上端まで 400px */
	.mtop-numbers {
		padding-top: calc(400 * var(--sp));
	}

	/* ベージュ角丸パネル 710×3303（左右20px inset・中央）。
	 * フッター文を先方指示で100上に詰めたため、以降のボタンとパネル高さも100ずつ詰めている（元3403）。 */
	.mtop-numbers__panel {
		width: calc(710 * var(--sp));
		height: calc(3303 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	/* PC配置の数字コンテンツは SP では一旦非表示（SP用に順次配置） */
	.mtop-numbers__head,
	.mtop-numbers__head-comma,
	.mtop-numbers__year,
	.mtop-numbers__sub,
	.mtop-numbers__foot,
	.mtop-numbers__tail,
	.mtop-numbers__card,
	.mtop-numbers__btn,
	.mtop-numbers__panel .mtop-numbers__product-wrap,
	[class*="mtop-stat"] {
		display: none;
	}

	/* ===== 数字パネルの中身（SP。panel原点＝page 20,10035） ===== */
	.mtop-numbers__sp {
		display: contents;
	}

	/* 縦書き見出し3列（left/top はインライン） */
	.mtop-numbers__sp-head {
		position: absolute;
		margin: 0;
		writing-mode: vertical-rl;
		font-size: calc(48 * var(--sp));
		line-height: calc(64 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.16em;
		color: #333;
	}

	/* サブ文（40,280・355幅・左寄せ）。自動折り返しを止め <br> の位置だけで改行 */
	.mtop-numbers__sp-sub {
		position: absolute;
		left: calc(40 * var(--sp));
		top: calc(280 * var(--sp));
		width: calc(355 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		white-space: nowrap;
		color: #333;
	}

	/* （2026年実績）（40,444） */
	.mtop-numbers__sp-year {
		position: absolute;
		left: calc(40 * var(--sp));
		top: calc(444 * var(--sp));
		margin: 0;
		font-size: calc(22 * var(--sp));
		line-height: 1;
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #333;
	}

	/* フッター文（88,2633・533幅・中央・5行）。最後の商品の影（下端2573）との間を60にする（先方指示、元2733）。 */
	.mtop-numbers__sp-foot {
		position: absolute;
		left: calc(88 * var(--sp));
		top: calc(2633 * var(--sp));
		width: calc(533 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		text-align: center;
		white-space: nowrap; /* 最終行が枠を1pxほど超えるため折り返さない */
		color: #333;
	}

	/* 商品画像3点：それぞれ周期・ディレイをずらしてゆらゆら揺れる（keyframeはPC側で定義済みのグローバル
	 * mtopNumbersSway を流用。--sway-y だけ --sp で個別に指定する）。 */
	.mtop-numbers__sp-prod1,
	.mtop-numbers__sp-prod2,
	.mtop-numbers__sp-prod3 {
		position: absolute;
		animation-name: mtopNumbersSway;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	/* bottle / gift / mug（2026-09差し替え）。Figmaのページ絶対座標から、
	 * パネル原点(page 20,10035)を引いてパネル相対値にしている。 */
	.mtop-numbers__sp-prod1 {
		left: calc(504 * var(--sp));
		top: calc(378 * var(--sp));
		width: calc(101 * var(--sp));
		height: calc(283 * var(--sp));
		--sway-y: calc(-14 * var(--sp));
		animation-duration: 4.4s;
		animation-delay: 0s;
	}

	.mtop-numbers__sp-prod2 {
		left: calc(63 * var(--sp));
		top: calc(1253 * var(--sp));
		width: calc(203 * var(--sp));
		height: calc(219 * var(--sp));
		--sway-y: calc(-10 * var(--sp));
		animation-duration: 5.1s;
		animation-delay: 0.6s;
	}

	.mtop-numbers__sp-prod3 {
		left: calc(446 * var(--sp));
		top: calc(2345 * var(--sp));
		width: calc(188 * var(--sp));
		height: calc(190 * var(--sp));
		--sway-y: calc(-8 * var(--sp));
		animation-duration: 4.8s;
		animation-delay: 1.2s;
	}

	/* 影（#E7E7E7 楕円・blur）200×28（left/top はインライン）。対応する商品画像と同位相でわずかに横移動する。
	 * キーフレーム（mtopNumbersShadowSway）はPC側でグローバル定義済みのものを共用する。 */
	.mtop-numbers__sp-shadow {
		position: absolute;
		width: calc(200 * var(--sp));
		height: calc(28 * var(--sp));
		background: #e7e7e7;
		border-radius: 50%;
		filter: blur(calc(4 * var(--sp)));
		--shadow-sway-x: calc(6 * var(--sp));
		animation-name: mtopNumbersShadowSway;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}

	.mtop-numbers__sp-shadow--1 { animation-duration: 4.4s; animation-delay: 0s; }
	.mtop-numbers__sp-shadow--2 { animation-duration: 5.1s; animation-delay: 0.6s; }
	.mtop-numbers__sp-shadow--3 { animation-duration: 4.8s; animation-delay: 1.2s; }

	/* 実績カード枠（白角丸30・left/top/width/height はインライン）。
	 * 見出し＝カード全体（背景・尾・ドット・テキストすべて含む）として、スクロールで画面に入ったら
	 * home.js が .is-revealed を付与する。カードがフェード＋スライドインすれば、中の子要素は
	 * 個別にアニメーションを持たせなくても親と一緒に動く。
	 * 左半分のカードは左から右へ、右半分のカードは右から左へスライドインする
	 * （--left/--right はカードのleft位置から home.php 側で振り分け済み）。 */
	.mtop-numbers__sp-card {
		position: absolute;
		background: #fff;
		border-radius: calc(30 * var(--sp));
		opacity: 0;
		transition: opacity 1s ease-out, translate 1s ease-out;
	}

	.mtop-numbers__sp-card--left {
		translate: calc(-30 * var(--sp)) 0;
	}

	.mtop-numbers__sp-card--right {
		translate: calc(30 * var(--sp)) 0;
	}

	.mtop-numbers__sp-card.is-revealed {
		opacity: 1;
		translate: 0 0;
	}

	/* --- カード中身（共有クラス。ドット・見出しは固定位置、他は left/top インライン） --- */
	.mtop-numbers__sp-cdot {
		position: absolute;
		left: calc(30 * var(--sp));
		top: calc(38 * var(--sp));
		width: calc(12 * var(--sp));
		height: calc(12 * var(--sp));
		border-radius: 50%;
		background: #333;
	}

	.mtop-numbers__sp-ctitle {
		position: absolute;
		left: calc(52 * var(--sp));
		top: calc(30 * var(--sp));
		margin: 0;
		font-size: calc(22 * var(--sp));
		line-height: calc(28 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.06em;
		color: #333;
		white-space: nowrap;
	}

	.mtop-numbers__sp-cnum,
	.mtop-numbers__sp-cnum-lg {
		position: absolute;
		margin: 0;
		font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		line-height: 1;
		font-weight: 700;
		color: #4c9ec7;
		white-space: nowrap;
	}

	.mtop-numbers__sp-cnum {
		font-size: calc(50 * var(--sp));
	}

	.mtop-numbers__sp-cnum-lg {
		font-size: calc(70 * var(--sp));
	}

	.mtop-numbers__sp-cunit {
		position: absolute;
		margin: 0;
		font-size: calc(22 * var(--sp));
		line-height: calc(28 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.06em;
		color: #333;
		white-space: nowrap;
	}

	.mtop-numbers__sp-cnote {
		position: absolute;
		margin: 0;
		font-size: calc(20 * var(--sp));
		line-height: calc(26 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.06em;
		color: #333;
		white-space: nowrap;
	}

	.mtop-numbers__sp-cline {
		position: absolute;
		height: 0;
		border-top: 1px solid #333;
	}

	/* ===== カタログ：企業ロゴ列（右→左に流れる想定。今は静的・左寄せ・間隔80） ===== */
	.mtop-catalog {
		padding-top: calc(100 * var(--sp)); /* 数字セクション下 100px */
	}

	.mtop-logos {
		height: calc(60 * var(--sp));
	}

	.mtop-logos__track {
		gap: calc(80 * var(--sp));
	}

	.mtop-logos img {
		height: calc(60 * var(--sp));
	}

	/* ===== カタログ箱（650×918・ロゴ180px下・中央） ===== */
	.mtop-catalog__box {
		width: calc(650 * var(--sp));
		height: calc(918 * var(--sp));
		margin: calc(180 * var(--sp)) auto 0;
		border-radius: calc(30 * var(--sp));
	}

	/* PC配置の箱コンテンツは SP では非表示（SP用に配置） */
	.mtop-catalog__title,
	.mtop-catalog__lead,
	.mtop-catalog__btn,
	.mtop-catalog__box .mtop-catalog__cover {
		display: none;
	}

	/* SP用の箱コンテンツ（箱原点＝box左上） */
	.mtop-catalog__sp {
		display: contents;
	}

	/* カバー画像（箱上端の上へ80pxはみ出し）。PC版と同じ「カタカタ」揺れ。
	 * keyframe（mtopCatalogCoverRock/Pivot）は角度・軸位置のみでスケール変数を使わないグローバル定義なので、
	 * SP側は animation-name の参照だけで再利用できる（--pc/--sp を意識する必要がない）。 */
	.mtop-catalog__sp-cover {
		position: absolute;
		left: calc(175 * var(--sp));
		top: calc(-80 * var(--sp));
		width: calc(300 * var(--sp));
		height: calc(426.43 * var(--sp));
		object-fit: cover;
		animation:
			mtopCatalogCoverRock 2.4s ease-in-out 1,
			mtopCatalogCoverPivot 2.4s linear 1;
		animation-play-state: paused;
	}

	/* 見出し（38px中央2行・字間0.15）。自動折り返し無し（<br>のみで改行） */
	.mtop-catalog__sp-title {
		position: absolute;
		left: calc(43 * var(--sp));
		top: calc(390 * var(--sp));
		width: calc(563 * var(--sp));
		margin: 0;
		font-size: calc(38 * var(--sp));
		line-height: calc(58 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.15em;
		text-align: center;
		white-space: nowrap;
		color: #333;
	}

	/* リード（28px/行48・4行） */
	.mtop-catalog__sp-lead {
		position: absolute;
		left: calc(40 * var(--sp));
		top: calc(546 * var(--sp));
		width: calc(570 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #333;
	}

	/* 下部ボタン2つ（箱の底・左右並び・325×120・#333） */
	.mtop-catalog__sp-btn {
		position: absolute;
		top: calc(798 * var(--sp));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: calc(325 * var(--sp));
		height: calc(120 * var(--sp));
		padding: 0 calc(40 * var(--sp));
		background: #333;
		color: #fff;
		text-decoration: none;
	}

	.mtop-catalog__sp-btn--left {
		left: 0;
		border-radius: 0 0 0 calc(30 * var(--sp));
	}

	.mtop-catalog__sp-btn--right {
		left: calc(325 * var(--sp));
		border-left: 1px solid #fff; /* 2ボタンの継ぎ目の白線 */
		border-radius: 0 0 calc(30 * var(--sp)) 0;
	}

	.mtop-catalog__sp-btn-label {
		margin-right: auto;
		font-size: calc(24 * var(--sp));
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.06em;
	}

	.mtop-catalog__sp-btn-arrow {
		width: calc(20 * var(--sp));
		height: calc(20 * var(--sp));
	}

	/* 吹き出しの尾（白い角丸三角。PCと同じ numbers-tail.svg をマスクに使い、先端の丸みを揃える。
	 * SVGは上向き基準。各カードの向き（rotate150/matrix）はインライン transform で付与） */
	.mtop-numbers__sp-tail {
		position: absolute;
		width: calc(45 * var(--sp));
		height: calc(75.81 * var(--sp));
		background: #fff;
		-webkit-mask: url(../images/home/numbers/numbers-tail.svg) center / contain no-repeat;
		mask: url(../images/home/numbers/numbers-tail.svg) center / contain no-repeat;
	}

	/* 下部ボタン（#333・490×100。ラベル左／区切り線＋矢印右。left固定・top はインライン） */
	.mtop-numbers__sp-btn {
		position: absolute;
		left: calc(110 * var(--sp));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		padding: 0 calc(40 * var(--sp));
		background: #333;
		border-radius: calc(15 * var(--sp));
		color: #fff;
		text-decoration: none;
	}

	.mtop-numbers__sp-btn-label {
		margin-right: auto; /* ラベルを左、区切り線＋矢印を右へ */
		font-size: calc(24 * var(--sp));
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.06em;
	}

	.mtop-numbers__sp-btn-divider {
		width: 1px;
		height: calc(30 * var(--sp));
		margin-right: calc(30 * var(--sp));
		background: #fff;
	}

	.mtop-numbers__sp-btn-arrow {
		width: calc(20 * var(--sp));
		height: calc(20 * var(--sp));
	}

	/* ===== Hello Novelty（セクション原点 page 0,14846／帯 page 0,14999） ===== */
	.mtop-novelty {
		width: 100%;
		height: calc(1094 * var(--sp));
		margin-top: calc(150 * var(--sp));
	}

	.mtop-novelty__band {
		top: calc(153 * var(--sp));
		width: 100%;
		height: calc(941 * var(--sp));
	}

	/* PC配置の novelty コンテンツは非表示 */
	.mtop-novelty .mtop-novelty__product,
	.mtop-novelty .mtop-novelty__highlight,
	.mtop-novelty__title,
	.mtop-novelty__heading,
	.mtop-novelty__text,
	.mtop-novelty__btn {
		display: none;
	}

	/* SP商品（帯基準・width インライン・height auto。帯の overflow:hidden でかぶる分だけ表示）。
	 * keyframe(mtopNoveltyHop)はグローバル定義（--hop-y参照）を再利用し、ジャンプ量だけ
	 * --sp で個別に指定する。18pxの小さな跳躍に抑える。
	 * 帯の最大クリップ量（約65px）を下回るため、跳ねてもアイテム上部が見えきらないまま
	 * 着地する。見た目の抑え具合を優先し、これは許容している。 */
	.mtop-novelty__band .mtop-novelty__sp-product {
		display: block;
		position: absolute;
		animation-name: mtopNoveltyHop;
		animation-iteration-count: infinite;
	}

	.mtop-novelty__sp-product--1 { --hop-y: calc(-18 * var(--sp)); animation-duration: 10.6s; animation-delay: 0s; }
	.mtop-novelty__sp-product--2 { --hop-y: calc(-18 * var(--sp)); animation-duration: 12.8s; animation-delay: 0.9s; }
	.mtop-novelty__sp-product--3 { --hop-y: calc(-18 * var(--sp)); animation-duration: 14.2s; animation-delay: 1.7s; }
	.mtop-novelty__sp-product--4 { --hop-y: calc(-18 * var(--sp)); animation-duration: 11.1s; animation-delay: 0.4s; }
	.mtop-novelty__sp-product--5 { --hop-y: calc(-18 * var(--sp)); animation-duration: 13.5s; animation-delay: 2.3s; }
	.mtop-novelty__sp-product--6 { --hop-y: calc(-18 * var(--sp)); animation-duration: 15.9s; animation-delay: 1.1s; }

	/* SPヘッダー（セクション基準） */
	.mtop-novelty__sp {
		display: contents;
	}

	/* 緑ハイライト（novelty.svg）。本来の比率のまま、中心を Figma箱の中心 (374,143) に合わせる */
	.mtop-novelty__sp-highlight {
		position: absolute;
		left: calc(374 * var(--sp));
		top: calc(143 * var(--sp));
		transform: translate(-50%, -50%);
		width: calc(550 * var(--sp));
		height: auto;
		z-index: 0;
	}

	/* タイトル Hello Novelty!（Montserrat 100px・402×180枠の中央） */
	.mtop-novelty__sp-title {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(402 * var(--sp));
		height: calc(180 * var(--sp));
		margin: 0;
		font-family: "montserrat", sans-serif;
		font-size: calc(100 * var(--sp));
		line-height: calc(90 * var(--sp));
		font-weight: 700;
		letter-spacing: -0.04em;
		text-align: center;
		color: #333;
		z-index: 1;
	}

	/* 見出し（38px中央2行）。自動折り返し無し（<br>のみで改行） */
	.mtop-novelty__sp-heading {
		position: absolute;
		left: calc(203 * var(--sp));
		top: calc(326 * var(--sp));
		width: calc(344 * var(--sp));
		margin: 0;
		font-size: calc(38 * var(--sp));
		line-height: calc(58 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.15em;
		text-align: center;
		white-space: nowrap;
		color: #333;
	}

	/* 本文（28px/行48） */
	.mtop-novelty__sp-text {
		position: absolute;
		left: calc(50 * var(--sp));
		top: calc(482 * var(--sp));
		width: calc(650 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #333;
	}

	/* ボタン Hello, Novelty!（490×100・#333） */
	.mtop-novelty__sp-btn {
		position: absolute;
		left: calc(130 * var(--sp));
		top: calc(782 * var(--sp));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		padding: 0 calc(40 * var(--sp));
		background: #333;
		border-radius: calc(15 * var(--sp));
		color: #fff;
		text-decoration: none;
	}

	.mtop-novelty__sp-btn-label {
		margin-right: auto;
		font-size: calc(24 * var(--sp));
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.06em;
	}

	.mtop-novelty__sp-btn-divider {
		width: 1px;
		height: calc(30 * var(--sp));
		margin-right: calc(30 * var(--sp));
		background: #fff;
	}

	.mtop-novelty__sp-btn-arrow {
		width: calc(20 * var(--sp));
		height: calc(20 * var(--sp));
	}

	/* ===== 会社/採用リードカード（会社 page20,16090／採用 page20,17158） ===== */
	.mtop-lead-cards {
		padding-top: calc(150 * var(--sp));
	}

	.mtop-lead-card {
		width: calc(710 * var(--sp));
		border-radius: calc(30 * var(--sp));
	}

	.mtop-lead-card + .mtop-lead-card {
		margin-top: calc(40 * var(--sp));
	}

	.mtop-lead-card--company {
		height: calc(1028 * var(--sp));
		background: linear-gradient(90deg, #e4a887 0%, #eb8d59 100%);
	}

	/* 本文（top824・7行×48＝終端1160）の下を会社案内カードと同じ80空ける。 */
	.mtop-lead-card--recruit {
		height: calc(1240 * var(--sp));
		background: linear-gradient(90deg, #8ec7e3 0%, #4c9ec7 100%);
	}

	/* 写真/動画の窓（フル幅・高さ400・top はカードごと） */
	.mtop-lead-card__photo {
		left: 0;
		right: auto;
		width: 100%;
		height: calc(400 * var(--sp));
	}

	.mtop-lead-card--company .mtop-lead-card__photo {
		top: calc(276 * var(--sp));
	}

	.mtop-lead-card--recruit .mtop-lead-card__photo {
		top: calc(344 * var(--sp));
		height: calc(399.375 * var(--sp)); /* 幅710の16:9 */
	}

	/* company.jpg（2026-09差し替え）。PCと同じ写真を、SPの窓比率(750:400)に合わせて
	 * 拡大トリミングし直している。 */
	.mtop-lead-card--company .mtop-lead-card__photo img {
		left: calc(-509.4 * var(--sp));
		top: calc(-566.7 * var(--sp));
		width: calc(1979.8 * var(--sp));
		height: auto;
		max-width: none;
	}

	.mtop-lead-card__video {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	/* PC用の見出し・本文はSPでは非表示（改行が異なるためSP専用要素を使う） */
	.mtop-lead-card__heading,
	.mtop-lead-card__text {
		display: none;
	}

	/* SP専用：見出し（48px・nowrap・白。位置はインライン） */
	.mtop-lead-card__sp-heading {
		display: block;
		position: absolute;
		margin: 0;
		font-size: calc(48 * var(--sp));
		line-height: calc(68 * var(--sp));
		font-weight: 700;
		letter-spacing: 0.15em;
		color: #fff;
		white-space: nowrap;
	}

	/* SP専用：本文（590幅・28px/48・自然折り返し。位置はインライン） */
	.mtop-lead-card__sp-text {
		display: block;
		position: absolute;
		width: calc(590 * var(--sp));
		margin: 0;
		font-size: calc(28 * var(--sp));
		line-height: calc(48 * var(--sp));
		font-weight: 500;
		letter-spacing: 0.06em;
		color: #fff;
	}

	/* バッジ（ガラス円 300） */
	.mtop-lead-card__badge,
	.mtop-lead-card__badge-text {
		width: calc(300 * var(--sp));
		height: calc(300 * var(--sp));
	}

	.mtop-lead-card--company .mtop-lead-card__badge,
	.mtop-lead-card--company .mtop-lead-card__badge-text {
		left: calc(390 * var(--sp)) !important;
		top: calc(126 * var(--sp)) !important;
	}

	.mtop-lead-card--recruit .mtop-lead-card__badge,
	.mtop-lead-card--recruit .mtop-lead-card__badge-text {
		left: calc(390 * var(--sp)) !important;
		top: calc(194 * var(--sp)) !important;
	}

	/* 会社カードの矢印（線＋シェブロン）。
	 * 長さ(width)だけでなく太さ(height)・先端の大きさもPC用の --pc のままだと、
	 * SP幅では --pc が極小になり矢印が細く/小さくなりすぎるため、--sp で明示的に上書きする。 */
	.mtop-lead-card--company .mtop-lead-card__badge-arrow {
		left: calc(515 * var(--sp)) !important;
		top: calc(276 * var(--sp)) !important;
		width: calc(50 * var(--sp));
		height: calc(3 * var(--sp));
	}

	.mtop-lead-card--company .mtop-lead-card__badge-arrow::after {
		width: calc(13 * var(--sp));
		height: calc(13 * var(--sp));
		border-top-width: calc(3 * var(--sp));
		border-right-width: calc(3 * var(--sp));
	}

	/* 採用カードの矢印（menu-arrow.svg） */
	.mtop-lead-card--recruit .mtop-lead-card__badge-icon {
		left: calc(517 * var(--sp)) !important;
		top: calc(321 * var(--sp)) !important;
		width: calc(45 * var(--sp));
		height: calc(45 * var(--sp));
	}

	/* ==================== お知らせ（SP） ==================== */
	/* パネル：カード下端から150px下、750×974、#333。PC .mtop-news__inner は隠す */
	.mtop-news {
		position: relative;
		width: 100%;
		height: calc(974 * var(--sp));
		margin-top: calc(150 * var(--sp));
	}

	.mtop-news__inner {
		display: none;
	}

	.mtop-news__sp {
		display: block;
	}

	/* 見出し「お知らせ」：パネル中央上・top120 */
	.mtop-news__sp-title {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(120 * var(--sp));
		margin: 0;
		font-family: "zen-kaku-gothic-new", sans-serif;
		font-size: calc(40 * var(--sp));
		font-weight: 700;
		line-height: calc(50 * var(--sp));
		letter-spacing: 0.15em;
		text-align: center;
		color: #fff;
	}

	/* 記事カード：横スクロール（最大4件）・top250・左右50pxパディング */
	.mtop-news__sp-scroll {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(250 * var(--sp));
		display: flex;
		gap: calc(20 * var(--sp));
		padding-inline: calc(50 * var(--sp));
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.mtop-news__sp-scroll::-webkit-scrollbar {
		display: none;
	}

	.mtop-news__sp-card {
		flex: none;
		width: calc(470 * var(--sp));
		height: calc(354 * var(--sp));
		background: #f7f5eb;
		border-radius: calc(15 * var(--sp));
	}

	.mtop-news__sp-card-link {
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* タイトル上・日付下 */
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: calc(50 * var(--sp));
		color: inherit;
		text-decoration: none;
	}

	.mtop-news__sp-card-title {
		margin: 0;
		font-family: "zen-kaku-gothic-new", sans-serif;
		font-size: calc(28 * var(--sp));
		font-weight: 700;
		line-height: calc(46 * var(--sp));
		letter-spacing: 0.06em;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.mtop-news__sp-card-date {
		font-family: "helvetica-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: calc(26 * var(--sp));
		font-weight: 700;
		line-height: calc(26 * var(--sp));
		letter-spacing: 0.06em;
		color: #333;
	}

	/* 進捗バー：4本・top674・中央寄せ（1本目 白、残り 白0.2） */
	.mtop-news__sp-bars {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(674 * var(--sp));
		display: flex;
		justify-content: center;
		gap: calc(15 * var(--sp));
	}

	.mtop-news__sp-bar {
		width: calc(60 * var(--sp));
		height: calc(6 * var(--sp));
		border-radius: calc(3 * var(--sp));
		background: rgba(255, 255, 255, 0.2);
	}

	.mtop-news__sp-bar--on {
		background: #fff;
	}

	/* 一覧ボタン：490×100・left130・top754・白枠1px・radius15 */
	.mtop-news__sp-more {
		position: absolute;
		left: calc(130 * var(--sp));
		top: calc(754 * var(--sp));
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		/* 0.5px は端末によって辺ごとに0pxへ丸められ、枠が部分的に消える。
		 * 位置・サイズが --sp 由来で小数になるため、角丸の辺で特に起きやすい。
		 * 1px にすると必ず描画される（同ページの他のSPボタンも1px）。 */
		border: 1px solid #fff;
		border-radius: calc(15 * var(--sp));
		color: #fff;
		text-decoration: none;
	}

	.mtop-news__sp-more-text {
		margin-left: calc(60 * var(--sp));
		margin-right: auto;
		font-family: "zen-kaku-gothic-new", sans-serif;
		font-size: calc(26 * var(--sp));
		font-weight: 500;
		line-height: calc(26 * var(--sp));
		letter-spacing: 0.06em;
	}

	.mtop-news__sp-more-divider {
		flex: none;
		width: calc(2 * var(--sp));
		height: calc(44 * var(--sp));
		background: #fff;
	}

	/* 矢印は他のボタン（CTA等）と同じ大きさ（線24×2・矢先9）。縮めた12はmargin-leftに足して仕切り線の位置を保つ。 */
	.mtop-news__sp-more-arrow {
		position: relative;
		flex: none;
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: calc(54 * var(--sp));
		margin-right: calc(44 * var(--sp));
		/* 線は ::before（伸長アニメ用）。箱自体の width は固定のまま動かさない（隣の仕切り線がずれるため）。 */
	}

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

	.mtop-news__sp-more-arrow::after {
		content: "";
		position: absolute;
		right: calc(-1 * var(--sp));
		top: 50%;
		width: calc(9 * var(--sp));
		height: calc(9 * var(--sp));
		border-top: calc(2 * var(--sp)) solid #fff;
		border-right: calc(2 * var(--sp)) solid #fff;
		transform: translateY(-50%) rotate(45deg);
	}

	/* SPにはホバーが無いため、ボタンが画面内にある間だけ矢印の伸びをループさせる（PC版の::before/::afterと同じ仕組み、速度のみ変更）。 */
	.mtop-news__sp-more.is-viewing .mtop-news__sp-more-arrow::before {
		animation: mtopArrowLine 2s ease-out infinite;
	}

	.mtop-news__sp-more.is-viewing .mtop-news__sp-more-arrow::after {
		--arrow-head-x: calc(-24 * var(--sp)); /* SP箱幅（.mtop-news__sp-more-arrow） */
		animation: mtopArrowHead 2s ease-out infinite;
	}

	/* ==================== よくある質問（SP） ==================== */
	/* PCと同じアコーディオン(details/summary)を流用。見出し中央・一覧ボタンは最下部へ */
	.mtop-faq {
		min-height: 0;
	}

	.mtop-faq__inner {
		width: 100%;
		box-sizing: border-box;
		padding-top: calc(150 * var(--sp)); /* お知らせパネル下端 → 見出し 150px */
		padding-bottom: calc(120 * var(--sp));
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* head を透過させ、見出し／一覧ボタンを inner の flex 子として order で並べ替え */
	.mtop-faq__head {
		display: contents;
	}

	.mtop-faq__title {
		order: 1;
		font-size: calc(40 * var(--sp));
		line-height: calc(50 * var(--sp));
	}

	.mtop-faq__list {
		order: 2;
		width: calc(650 * var(--sp)); /* 質問ボックス554 + gap5 + トグル91 */
		margin-top: calc(60 * var(--sp)); /* 見出し下端(50) → Q1上端(110) */
	}

	.mtop-faq__item {
		margin-bottom: calc(20 * var(--sp));
	}

	.mtop-faq__q {
		gap: calc(5 * var(--sp));
	}

	.mtop-faq__q-box {
		width: calc(554 * var(--sp));
		height: auto; /* 高さ可変：1行=124 / 2行=168（padding40×2 + 行数×44） */
		padding: calc(40 * var(--sp)); /* 上下左右40px（554 − 40×2 = 474 が文字幅） */
		border-radius: calc(15 * var(--sp));
	}

	.mtop-faq__q-text {
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtop-faq__toggle {
		width: calc(91 * var(--sp));
		height: auto; /* 質問ボックスの高さに追従（flex stretch） */
		border-radius: calc(15 * var(--sp));
	}

	.mtop-faq__toggle-bar {
		width: calc(20 * var(--sp));
		height: calc(4 * var(--sp));
	}

	.mtop-faq__a {
		width: calc(650 * var(--sp));
		margin-top: calc(5 * var(--sp)); /* 質問行下端 → 回答パネル 5px */
		padding: calc(40 * var(--sp)); /* 回答文 left90/top20043 - パネル left50/top20003 */
		border-radius: calc(15 * var(--sp));
	}

	.mtop-faq__a-text {
		font-size: calc(26 * var(--sp));
		line-height: calc(44 * var(--sp));
	}

	.mtop-faq__a-text > p + p {
		margin-top: calc(44 * var(--sp));
	}

	/* 質問一覧ボタン（最下部・塗り#333・490×100） */
	.mtop-faq__more {
		order: 3;
		width: calc(490 * var(--sp));
		height: calc(100 * var(--sp));
		margin-top: calc(60 * var(--sp));
		border-radius: calc(15 * var(--sp));
	}

	.mtop-faq__more-text {
		margin-left: calc(60 * var(--sp));
		font-size: calc(26 * var(--sp));
		line-height: calc(26 * var(--sp));
	}

	.mtop-faq__more-divider {
		width: calc(2 * var(--sp));
		height: calc(44 * var(--sp));
	}

	/* 矢印は他のボタン（CTA等）と同じ大きさ（線24×2・矢先9）。縮めた12はmargin-leftに足して仕切り線の位置を保つ。 */
	.mtop-faq__more-arrow {
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: calc(54 * var(--sp));
		margin-right: calc(44 * var(--sp));
	}

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

	/* SPにはホバーが無いため、ボタンが画面内にある間だけ矢印の伸びをループさせる（会社案内バッジと同じ動き）。 */
	.mtop-faq__more.is-viewing .mtop-faq__more-arrow::before {
		animation: mtopArrowLine 2s ease-out infinite;
	}

	.mtop-faq__more.is-viewing .mtop-faq__more-arrow::after {
		--arrow-head-x: calc(-24 * var(--sp)); /* SP箱幅（.mtop-faq__more-arrow） */
		animation: mtopArrowHead 2s ease-out infinite;
	}

	/* ==================== CTA（ご相談ください）（SP） ==================== */
	/* PCと同じ markup を流用。パネル750×966・#1A355C、ボタンは縦積み */
	.mtop-cta {
		width: 100%;
		min-height: calc(966 * var(--sp));
		height: auto;
		/* フッターのベージュのパネルまでの見た目の間隔を100にする（先方指示）。フッター自身の上余白30と合わせて100。 */
		margin-bottom: calc(70 * var(--sp));
	}

	.mtop-cta__inner {
		padding-top: calc(120 * var(--sp)); /* パネル上端 → 見出し 120px */
	}

	/* 見出し：SP専用（「販促品のこと、」で改行）に切替。38px/58px・中央 */
	.mtop-cta__title--pc {
		display: none;
	}

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

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

	/* 本文：SP専用（改行が異なる）に切替。650幅・中央・28px/48px（見出し下端236 → 本文296 = 60px） */
	.mtop-cta__lead--pc {
		display: none;
	}

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

	.mtop-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; /* 見出しは中央、本文は左寄せ */
	}

	/* ボタン：縦積み・中央・gap30（本文下端536 → ボタン上端616 = 80px） */
	.mtop-cta__actions {
		flex-direction: column;
		align-items: center;
		gap: calc(30 * var(--sp));
		margin-top: calc(80 * var(--sp));
	}

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

	.mtop-cta__btn-text {
		margin-left: calc(40 * var(--sp)); /* 文字 left170 - ボタン left130 */
		font-size: calc(24 * var(--sp));
		line-height: calc(24 * var(--sp));
	}

	.mtop-cta__btn-divider {
		width: calc(2 * var(--sp));
		height: calc(30 * var(--sp)); /* Line188 長さ30 rotate90 */
	}

	.mtop-cta__btn-arrow {
		width: calc(24 * var(--sp));
		height: calc(2 * var(--sp));
		margin-left: calc(40 * var(--sp)); /* 仕切り516 → 矢印556 */
		margin-right: calc(40 * var(--sp)); /* 矢印右端580 → ボタン右端620 */
	}

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

	/* SPにはホバーが無いため、ボタンが画面内にある間だけ矢印の伸びをループさせる（会社案内バッジと同じ動き）。 */
	.mtop-cta__btn.is-viewing .mtop-cta__btn-arrow::before {
		animation: mtopArrowLine 2s ease-out infinite;
	}

	.mtop-cta__btn.is-viewing .mtop-cta__btn-arrow::after {
		--arrow-head-x: calc(-24 * var(--sp)); /* SP箱幅（.mtop-cta__btn-arrow） */
		animation: mtopArrowHead 2s ease-out infinite;
	}

}

/* SPも同じセット周期を使い、移動量だけデザイン幅に合わせる。 */
@media (max-width: 767px) {
	.mtop-hero__item-set--1,
	.mtop-hero__item-set--2 {
		--hero-rise: calc(80 * var(--sp));
		--hero-settle: calc(6 * var(--sp));
		--hero-drop: calc(50 * var(--sp));
		--hero-float: calc(-5 * var(--sp));
	}
}

/* PCワイド画面：配置・文字・動画の縮尺を変えず、背景だけ左右へ延長する。 */
@media (min-width: 1441px) {
	.mtop-philosophy__panel--white,
	.mtop-philosophy__panel--navy,
	.mtop-numbers__panel,
	.mtop-novelty,
	.mtop-news,
	.mtop-cta {
		isolation: isolate;
	}

	.mtop-news,
	.mtop-cta {
		position: relative;
	}

	.mtop-philosophy__panel--white::before,
	.mtop-philosophy__panel--navy::before,
	.mtop-numbers__panel::before,
	.mtop-novelty::before,
	.mtop-news::before,
	.mtop-cta::before {
		content: "";
		position: absolute;
		z-index: -1;
		pointer-events: none;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 100cqw;
		transform: translateX(-50%);
	}

	.mtop-philosophy__panel--white::before {
		background: #fff;
	}

	/* 白パネルから下へはみ出す動画を、後続の紺パネルより手前に保つ。 */
	.mtop-philosophy__panel--white {
		z-index: 1;
	}

	.mtop-philosophy__panel--navy::before,
	.mtop-cta::before {
		background: var(--mt-navy-deep);
	}

	.mtop-numbers__panel::before {
		width: calc(100cqw - 60px);
		border-radius: 30px;
		background: var(--mt-beige);
	}

	.mtop-novelty::before {
		top: calc(153 * var(--pc));
		background: #ececec;
	}

	.mtop-news::before {
		background: #333333;
	}
}