@charset "UTF-8";
/* =========================================================
   top.css - TOPページ
   ---------------------------------------------------------
   Figma 1440px 基準（1rem = Figmaのpx ÷ 10）。
   セクション内の座標はすべて Figma のアートボード座標と一致させ、
   1440px相当のステージを基準に絶対配置している。
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.p-topvisual {
	position: relative;

	/* ヒーロー（MV＋キャッチコピー）だけは全体の縮小（70%）の対象外にし、
	   縮小前と同じ 1rem = 10px 基準で組む。MVとコピーの位置関係も元のまま保たれる */
	--hero-rem: var(--r100);

	/* --- MVカード -------------------------------------------------
	   高さは画面の残りぶんから決め、幅は素材本来の 1920:1080 で導く。
	   Figmaの 上端28.9rem / 高さ67.5rem を上限に、画面が低いときは
	   ヘッダー直下（11.2rem）まで上げてMVの表示サイズを確保する。   */
	/* キャッチコピーの上端。ヘッダーの中身（ロゴ下端8.1rem／ナビ下端8.1rem）の
	   すぐ下まで詰める。MVが貼り付いている間はヘッダーに背景を出さないので隠れない */
	--copy-top-min: calc(8.6 * var(--hero-rem));
	--mv-gap-bottom: calc(2.4 * var(--hero-rem));

	/* MVは「画面幅 − デザインの左右余白12rem×2」まで広げる。
	   他セクションは144rem（Figma原寸）で頭打ちにしているが、MVだけは
	   従来どおり頭打ちにしない（widescreenでも画面いっぱいに）*/
	--mv-max-w: calc(var(--ws-vw, 100vw) - calc(24 * var(--hero-rem)));
	/* 1055 / 1920 = 0.549479（下端の空白25pxだけ詰めた比率） */
	--mv-cap-h: calc(var(--mv-max-w) * 0.549479);

	/* カード上端。支給アニメーションは「クラウド輸出」の吹き出しが
	   キャンバス上部（y=70px・雲に付いている）にあるため、
	   それがキャッチコピー1行目より下に来る位置までカードを下げる。
	   吹き出しの画面上のY = カード上端 + 70 * (カード高 / 1055) */
	--mv-h0: min(var(--mv-cap-h), calc(100vh - calc(18.6 * var(--hero-rem)) - var(--mv-gap-bottom)));

	/* キャッチコピーはMVの大きさに合わせて可変（Figmaの9remが上限）。
	   MVが小さい画面でコピーだけ大きく見えるのを防ぐ。
	   0.1365 = 9rem ÷ Figmaのカード高さ65.9rem */
	--copy-fs: clamp(calc(6.4 * var(--hero-rem)), calc(var(--mv-h0) * 0.1365), calc(9 * var(--hero-rem)));
	--copy-h: calc(var(--copy-fs) * 2.4444);

	--mv-top-lo: max(
		calc(var(--copy-top-min) + 1.06 * var(--copy-fs) - 0.06635 * var(--mv-h0)),
		calc(var(--copy-top-min) + calc(4 * var(--hero-rem)))
	);
	--mv-h: max(calc(20 * var(--hero-rem)), min(var(--mv-cap-h), calc(100vh - var(--mv-top-lo) - var(--mv-gap-bottom))));
	--mv-top: clamp(var(--mv-top-lo), calc(100vh - var(--mv-gap-bottom) - var(--mv-h)), calc(28.9 * var(--hero-rem)));

	/* アニメーション自体の幅（1920:1055）と、カードの幅。
	   高さが頭打ちで絵が幅いっぱいまで届かないときは、カードだけ広げて
	   アニメーションを右寄せにし、左に青の余白（最大12rem）をつくる */
	--mv-anim-w: calc(var(--mv-h) * 1.8199);
	--mv-w: min(var(--mv-max-w), calc(var(--mv-anim-w) + calc(12 * var(--hero-rem))));

	/* --- ヒーロー全体 --------------------------------------------- */
	--hero-stage-h: calc(var(--mv-top) + var(--mv-h));
	/* 余裕があれば上下中央、足りないときはMV下端が --mv-gap-bottom になるよう上寄せ */
	--stage-offset: min(
		calc((100vh - var(--hero-stage-h)) / 2),
		calc(100vh - var(--mv-gap-bottom) - var(--hero-stage-h))
	);
	/* 下のセクションが被りはじめるまでの余白（この間MVは画面内で静止したまま） */
	--hero-hold: min(calc(36 * var(--hero-rem)), 32vh);
	--hero-h: calc(100vh + var(--hero-hold));

	/* キャッチコピー。FigmaのMV上端との差 7.4rem を保ちつつ、ヘッダーには掛けない */
	--copy-top-stage: max(calc(var(--copy-top-min) - var(--stage-offset)), calc(var(--mv-top) - var(--copy-fs) * 0.8222));
	--copy-top-view: calc(var(--stage-offset) + var(--copy-top-stage));

	/* スクロール前だけ、ヘッダーとキャッチコピーの間に足す余白。
	   --catch-lift-t を main.js が 1→0 に詰めることで、スクロールに合わせて
	   コピーが定位置（--copy-top-view）まで上がってくる */
	--copy-lift: calc(4 * var(--hero-rem));
	--catch-lift-t: 1;
}

/* MVは画面に貼り付いたまま、下のイントロがせり上がって覆いかぶさる */
.p-hero {
	position: sticky;
	top: 0;
	z-index: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: var(--hero-h);
	padding-top: var(--stage-offset);
	background: #fff;
}

/* イントロが完全に覆ったら描画を止める */
.p-hero.is-covered { visibility: hidden; }

.p-hero .sp-wrapper { width: 100%; }

.p-hero__stage {
	position: relative;
	width: min(100%, calc(144 * var(--hero-rem)));
	height: var(--hero-stage-h);
	margin-inline: auto;
}

.p-hero__catch {
	position: absolute;
	z-index: 3;
	left: calc(12 * var(--hero-rem));
	top: var(--copy-top-stage);
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: var(--copy-fs);
	line-height: 1.2222;
	color: var(--c-main);
	white-space: nowrap;
}

.p-hero__en {
	position: absolute;
	z-index: 3;
	left: calc(83 * var(--hero-rem));
	top: calc(var(--copy-top-stage) + var(--copy-fs) * 0.2);
	transform: translateY(calc(var(--copy-lift) * var(--catch-lift-t, 0)));
	font-family: var(--font-en);
	font-weight: 200;
	font-size: calc(var(--copy-fs) * 0.3556);
	line-height: 1.2;
	color: var(--c-main);
	white-space: nowrap;
}

/* Figma同様、左右に余白を取った角丸カードの中にアニメーションを収める。
   高さは画面の残りぶんに合わせ、幅は 1920:1080 から導く。
   こうすることでアニメーションは一切トリミングされず、必ず画面内に収まる。
   （Figmaの1200x675に届く画面では、左右余白12remもFigmaどおりになる） */
.p-hero__mv {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: var(--mv-top);
	/* キャッチコピーと同じだけ下げる。スクロール前は下端が画面外に出るが、
	   スクロールに合わせて定位置まで上がり全体が見える */
	transform: translateX(-50%) translateY(calc(var(--copy-lift) * var(--catch-lift-t, 0)));
	height: var(--mv-h);
	width: var(--mv-w);
	border-radius: calc(2 * var(--hero-rem));
	overflow: hidden;
	background: #e7edfd;
}

/* アニメーションはカードの右端に揃える。
   高さは 1920:1055（素材下端の空白25pxだけ詰めた比率／絵柄は一切欠けない） */
.p-hero__mv .mv-wrapper {
	position: absolute;
	right: 0;
	top: 0;
	width: var(--mv-anim-w);
	height: 100%;
}


/* =========================================================
   スクロール追従キャッチコピー（PCのみ）
   ========================================================= */
.p-catch {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	width: calc(var(--copy-fs) * 7);
	/* イントロの見出し位置（イントロ上端から41.4rem）＋コピーの高さ */
	height: calc(var(--hero-h) + 41.4rem + var(--copy-h));
	margin-left: calc(var(--gutter) + 12rem);
	pointer-events: none;
}

/* コピー本来の位置＝イントロ上端から41.4rem まで送り出すための領域 */
.p-catch__spacer { height: calc(var(--hero-h) + 41.4rem); }

.p-catch__sticky {
	/* bottom指定のstickyで「本来の位置より下には行かせない」＝
	   MVと一緒に画面内で静止し、イントロが所定位置まで上がってきたら解放される */
	position: sticky;
	bottom: calc(100vh - var(--copy-top-view) - var(--copy-h));
	width: calc(var(--copy-fs) * 7);
	height: var(--copy-h);
	transform: translateY(calc(var(--copy-lift) * var(--catch-lift-t, 0)));
}

.p-catch__layer {
	position: absolute;
	inset: 0;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: var(--copy-fs);
	line-height: 1.2222;
	white-space: nowrap;
	will-change: clip-path;
}

.p-catch__layer--base { color: var(--c-main); }
.p-catch__layer--fill { color: #fff; clip-path: inset(100% 0 0 0); }

/* 追従コピー（.p-catch）に置き換わるダミー。MVの吹き出しを覆わないよう当たり判定を無効化 */
.p-hero__catch { opacity: 0; pointer-events: none; }
.p-intro__catch { visibility: hidden; }

/* MV内の装飾要素が吹き出しリンクの当たり判定を奪わないようにする */
.mv > span,
.mv > div { pointer-events: none; }
.mv > a.link { pointer-events: auto; }
.p-hero__en { pointer-events: none; }

/* =========================================================
   INTRO
   ========================================================= */
.p-intro {
	position: relative;
	/* 貼り付いたMVの上にせり上がる */
	z-index: 1;
	height: 282.6rem;
	color: #fff;
}

.p-intro__bg {
	position: absolute;
	inset: 0;
	background-color: var(--c-blue);
	background-image: url("../img/top/intro-grain.png");
	background-repeat: repeat;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 34.7rem);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 34.7rem);
}

.p-intro__stage {
	position: relative;
	width: min(100%, 144rem);
	height: 100%;
	margin-inline: auto;
}

.p-intro__catch {
	position: absolute;
	left: 12rem;
	top: 41.4rem;
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 9rem;
	line-height: 1.2222;
	color: #fff;
	white-space: nowrap;
}

.p-intro__en {
	position: absolute;
	left: 12rem;
	top: 69.1rem;
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 3.2rem;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
}

.p-intro__body {
	position: absolute;
	left: 83rem;
	top: 63.1rem;
	width: 49rem;
}

.p-intro__lead {
	font-size: 2rem;
	line-height: 3.4rem;
	color: var(--c-light);
}

.p-intro__lead p + p { margin-top: 3.4rem; }

.p-intro__closing { margin-top: 7rem; }

.p-intro__closing-main {
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.6rem;
	line-height: 4.4rem;
	color: var(--c-light);
}

.p-intro__closing-sub {
	margin-top: 3rem;
	font-size: 2rem;
	line-height: 3.4rem;
	color: var(--c-light);
}

.p-intro__btn { margin-top: 7rem; }

.p-intro__photo {
	position: absolute;
	overflow: hidden;
	border-radius: 1rem;
}

.p-intro__photo img { width: 100%; height: 100%; object-fit: cover; }

.p-intro__photo--01 { left: 12rem; top: 92.9rem; width: 56.3rem; height: 72.5rem; }
.p-intro__photo--02 { left: 96rem; top: 165.6rem; width: 36rem; height: 19.9rem; }
.p-intro__photo--03 { left: 41rem; top: 186.4rem; width: 19.4rem; height: 22.9rem; }

.p-intro__swoosh {
	position: absolute;
	left: calc(-8.8rem - var(--gutter));
	top: 151.2rem;
	width: 106.8rem;
	height: 52.7rem;
	mix-blend-mode: color-burn;
	pointer-events: none;
}

.p-intro__swoosh img { width: 100%; height: 100%; }

/* ---------- マーキー ---------- */
.p-marquee {
	position: absolute;
	left: 0;
	top: 219.3rem;
	width: 100%;
	height: 10rem;
	overflow: hidden;
	pointer-events: none;
}

.p-marquee__track {
	display: flex;
	width: max-content;
	animation: ws-marquee 40s linear infinite;
}

.p-marquee__group {
	display: flex;
	align-items: flex-end;
	gap: 1.8rem;
	padding-right: 1.8rem;
}

.p-marquee__text {
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 12.8rem;
	line-height: .78;
	letter-spacing: -.0156em;
	color: rgba(255, 255, 255, .21);
	white-space: nowrap;
}

.p-marquee__icon { display: block; flex-shrink: 0; }
.p-marquee__icon img { width: 12.835rem; height: 9.1rem; }

@keyframes ws-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =========================================================
   SERVICE
   ========================================================= */
.p-service {
	position: relative;
	z-index: 2;
	height: 189.4rem;
	margin-top: -54.3rem;
}

/* 前セクションの上に重なる背景パネル */
.p-service::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 150.8rem;
	background: var(--c-main);
	border-radius: 12rem 12rem 0 0;
}

.p-service__stage {
	position: relative;
	width: min(100%, 144rem);
	height: 100%;
	margin-inline: auto;
}

.p-service__map {
	position: absolute;
	/* Figmaではアートボード左端で切れる図。1920px超でも画面左端まで伸ばす */
	left: calc(-28.4rem - var(--gutter));
	top: 64.15rem;
	width: 124.279rem;
	height: 66.13rem;
	pointer-events: none;
}

.p-service__map img { width: 100%; height: 100%; }

.p-service__head {
	position: absolute;
	z-index: 2;
	left: 17rem;
	top: 17rem;
	width: 50rem;
}

.p-service__text { margin-top: 7rem; }

.p-service__lead {
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.6rem;
	line-height: 5rem;
	color: var(--c-light);
}

.p-service__desc {
	margin-top: 3rem;
	width: 49.9rem;
	font-size: 1.6rem;
	line-height: 2;
	color: #fff;
}

.p-service__btn { margin-top: 16rem; }

.p-service__diagram {
	position: absolute;
	/* Figmaではアートボード右端で切れる図。1920px超でも画面右端まで伸ばす */
	right: calc(-1 * var(--gutter));
	/* この図は全体の縮小（70%）の対象外。Figma原寸のまま表示する */
	top: calc(12 * var(--r100));
	width: calc(68.6 * var(--r100));
}

.p-service__diagram img { width: 100%; height: auto; }

/* 円をつなぐ点線。ペアで互い違いに流れる */
.p-service__lines {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.p-service__line {
	fill: none;
	stroke: #a3b0e2;
	stroke-width: 2.8;
	stroke-linecap: butt;
	stroke-linejoin: round;
	/* 元画像の実測値：周期18.7（線9.2／間隔9.5） */
	stroke-dasharray: 9.2 9.5;
	animation: ws-dashflow 1.6s linear infinite;
}

.p-service__line--rev { animation-name: ws-dashflow-rev; }

@keyframes ws-dashflow {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: -18.7; }
}

@keyframes ws-dashflow-rev {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 18.7; }
}

.p-service__catch {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 117.4rem;
	font-size: 2.4rem;
	line-height: 2;
	color: #fff;
	white-space: nowrap;
	text-align: center;
}

.p-service__doors {
	position: absolute;
	z-index: 2;
	left: 12rem;
	top: 126.9rem;
	display: flex;
	gap: 2.6rem;
	width: 120rem;
}

/* ---------- ドアカード ---------- */
.p-door {
	position: relative;
	display: block;
	flex: 1 1 0;
	height: 45rem;
	border-radius: 1rem;
	overflow: hidden;
	background: var(--c-navy-dark);
}

.p-door__media { position: absolute; inset: 0; overflow: hidden; }

/* Figmaのマスク位置・拡大率をそのまま再現 */
.p-door__media img {
	position: absolute;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--ease-soft);
}

.p-door--business .p-door__media img { width: 213%; height: 120.65%; left: -50.36%; top: -19.26%; }
.p-door--personal .p-door__media img { width: 253.14%; height: 120.65%; left: -90.91%; top: -19.26%; }
.p-door--learners .p-door__media img { width: 253.14%; height: 120.65%; left: -105.17%; top: -19.26%; }

.p-door__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 35, 66, .8);
	mix-blend-mode: multiply;
}

.p-door__glow {
	position: absolute;
	left: 10rem;
	top: -12rem;
	width: 40rem;
	height: 30rem;
	pointer-events: none;
	transition: transform 1s var(--ease-soft);
}

.p-door__glow img { width: 100%; height: 100%; }

.p-door__inner {
	position: absolute;
	left: 2.8rem;
	top: 28.5rem;
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.p-door__en {
	font-family: var(--font-en);
	font-weight: 200;
	font-size: 1.1rem;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--c-gold);
}

.p-door__title {
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .04em;
	color: #fff;
}

.p-door__text {
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .8);
}

.p-door .c-arrow { position: absolute; left: 30rem; top: 34.1rem; }

.p-door:hover .p-door__media img { transform: scale(1.08); }
.p-door:hover .p-door__glow { transform: translateY(2rem); }
.p-door:hover .c-arrow { background: var(--c-main); transform: translateX(.4rem); }

/* =========================================================
   OFFICIAL SPONSOR
   ========================================================= */
.p-hawks {
	position: relative;
	height: 80rem;
	overflow: hidden;
	background: var(--c-dark);
	isolation: isolate;
}

.p-hawks__bg { position: absolute; inset: 0; overflow: hidden; }

.p-hawks__bg img {
	position: absolute;
	max-width: none;
	width: 139.93%;
	height: 161.13%;
	left: -5.14%;
	top: -8.5%;
	object-fit: cover;
}
/* Figmaは乗算（mix-blend-mode: multiply）指定 */
.p-hawks__overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 22, 30, .88);
	mix-blend-mode: multiply;
}

.p-hawks__strip {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 27.6rem;
	height: 100%;
	overflow: hidden;
}

.p-hawks__strip--left { left: 0; }
.p-hawks__strip--right { right: 0; }

.p-hawks__strip-track {
	position: absolute;
	left: 0;
	top: -20rem;
	display: flex;
	flex-direction: column;
	gap: 3.3rem;
	width: 100%;
}

/* 初期表示位置はFigmaの見え方に合わせている
   （左は上から3枚目、右は1枚目を183px上へずらした状態） */
.p-hawks__strip--right .p-hawks__strip-track {
	top: -18.3rem;
	animation: ws-strip-up 45s linear infinite;
}

.p-hawks__strip--left .p-hawks__strip-track {
	top: -85rem;
	animation: ws-strip-down 45s linear infinite;
}

.p-hawks__strip-item {
	display: block;
	height: 39.2rem;
	border-radius: 1rem;
	overflow: hidden;
}

.p-hawks__strip-item img { width: 100%; height: 100%; object-fit: cover; }

@keyframes ws-strip-up {
	from { transform: translateY(0); }
	to { transform: translateY(-170rem); }
}

@keyframes ws-strip-down {
	from { transform: translateY(-170rem); }
	to { transform: translateY(0); }
}

.p-hawks__inner {
	position: absolute;
	left: 50%;
	top: 19rem;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7rem;
	width: 64rem;
	text-align: center;
}

.p-hawks__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 50rem;
}

.p-hawks__title {
	font-family: var(--font-en);
	font-weight: 100;
	font-size: 8.8rem;
	line-height: 1.023;
	color: var(--c-gold);
}

.p-hawks__lead {
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 3.2rem;
	line-height: 4rem;
	color: var(--c-light);
}

.p-hawks__desc {
	margin-top: 3rem;
	font-size: 1.6rem;
	line-height: 2;
	color: #fff;
}

/* =========================================================
   TOPICS
   ========================================================= */
.p-topics { padding: 17.5rem 0 15rem; }

.p-topics__head { width: min(100% - 4.8rem, 110rem); margin: 0 auto; }

.p-topics__slider {
	margin-top: 5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.p-topics__slider::-webkit-scrollbar { display: none; }

.p-topics__track {
	display: flex;
	gap: 2.8rem;
	width: max-content;
	padding-left: calc(var(--gutter) + 17rem);
	padding-right: calc(var(--gutter) + 17rem);
}

.p-topics__empty { margin-top: 5rem; text-align: center; }

.p-topics__btn {
	display: flex;
	justify-content: flex-end;
	width: min(100%, 144rem);
	margin: 8.6rem auto 0;
	padding-right: 17.7rem;
}

/* =========================================================
   COMPANY
   ========================================================= */
.p-company {
	position: relative;
	height: 103.4rem;
	background: var(--c-gray);
}

.p-company__stage {
	position: relative;
	width: min(100%, 144rem);
	height: 100%;
	margin-inline: auto;
}

.p-company__photo { position: absolute; overflow: hidden; }
.p-company__photo picture { display: block; width: 100%; height: 100%; }
.p-company__photo img { width: 100%; height: 100%; object-fit: cover; }

.p-company__photo--02 {
	/* 右の写真と同じステージ基準にする。画面端に貼り付けると、
	   余白が出る画面幅でその余白ぶんだけ2枚が離れてしまうため */
	left: 0;
	top: 11rem;
	/* Figmaで幅を広げた版（285x553）に合わせる。高さは従来と同じ */
	width: 28.5rem;
	height: 55.3rem;
	/* 画面端から離して単体のカードとして見せるため、四隅とも角丸にする
	   （Figmaはアートボード左端で裁ち落とすデザインのため左側が直角だった） */
	border-radius: 1rem;
}

.p-company__photo--01 {
	/* 左写真が28.5remに広がったため、2枚の間隔3.5remを保って右へずらす */
	left: 32rem;
	top: 20.5rem;
	width: 32rem;
	height: 71.9rem;
	border-radius: 1rem;
}

.p-company__body {
	position: absolute;
	left: 68.5rem;
	top: 20.6rem;
	width: 58.5rem;
}

.p-company__list { margin-top: 8rem; }
.p-company__list li { border-bottom: 1px solid var(--c-line); }
.p-company__list li:first-child { border-top: 1px solid var(--c-line); }

.p-company__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 3rem 0;
}

.p-company__list a > span:first-child {
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .03em;
	color: var(--c-main);
	transition: opacity .3s ease;
}

.p-company__list a:hover > span:first-child { opacity: .65; }
.p-company__list a:hover .c-arrow--outline { background: var(--c-main); transform: translateX(.4rem); }
.p-company__list a:hover .c-arrow--outline img { filter: brightness(0) invert(1); }

/* =========================================================
   CONTACT / RECRUIT / バナー
   ========================================================= */
.p-cta { padding: 17.5rem 0 15rem; }

.p-cta__inner { width: min(100% - 4.8rem, 120.1rem); margin: 0 auto; }

.p-cta__cards { display: flex; gap: 3.5rem; }

.p-ctacard {
	position: relative;
	display: block;
	height: 70rem;
	padding: 8rem 5rem;
	border-radius: 1rem;
	overflow: hidden;
}

.p-ctacard--contact { width: 67.5rem; background: var(--c-main); }
.p-ctacard--recruit { width: 49rem; background: #4a4a4a; }

.p-ctacard__media { position: absolute; inset: 0; overflow: hidden; }

.p-ctacard__media img {
	position: absolute;
	max-width: none;
	width: 217.14%;
	height: 101.57%;
	left: -30.41%;
	top: -1.14%;
	object-fit: cover;
	transition: transform .9s var(--ease-soft);
}

.p-ctacard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #232323;
	mix-blend-mode: hard-light;
}

/* Figmaの「ホバー後」フレームをそのまま書き出したロゴモチーフの弧 */
.p-ctacard__deco {
	position: absolute;
	inset: 0;
	background-image: url("../img/top/cta-deco.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	transform: translateY(2rem) scale(1.02);
	transition: opacity .5s ease, transform .7s var(--ease-pop);
	pointer-events: none;
}

.p-ctacard__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 7rem;
}

.p-ctacard__head { display: flex; flex-direction: column; gap: 1rem; }

.p-ctacard__title {
	font-family: var(--font-en);
	font-weight: 100;
	font-size: 8.8rem;
	line-height: 1.136;
	color: #fff;
}

.p-ctacard__foot { display: flex; flex-direction: column; gap: 3rem; align-items: flex-start; }

/* Figmaでは採用情報ボタンのラベル幅が160px固定 */
.p-ctacard--recruit .c-btn__label { min-width: 16rem; justify-content: flex-start; }

.p-ctacard__text {
	font-size: 1.6rem;
	line-height: 2;
	color: #fff;
}

.p-ctacard--contact:hover .p-ctacard__deco { opacity: 1; transform: none; }
.p-ctacard--recruit:hover .p-ctacard__media img { transform: scale(1.1617); }
.p-ctacard:hover .c-arrow--blue { background: var(--c-main); transform: translateX(.4rem); }

/* ---------- バナー ---------- */
.p-bnrs { display: flex; gap: 2.6rem; margin-top: 3.5rem; }

.p-bnr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	width: 38.3rem;
	padding: 2.2rem;
	border: 1px solid var(--c-line);
	border-radius: 1rem;
	background: var(--c-gray);
	transition: box-shadow .5s ease, transform .5s var(--ease-soft);
}

.p-bnr:hover { transform: translateY(-.6rem); box-shadow: 0 1.2rem 3rem rgba(0, 48, 112, .12); }

.p-bnr__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 339 / 172;
	border-radius: 1rem;
	overflow: hidden;
	background: #fff;
}

.p-bnr--exportlab .p-bnr__media { border: 2px solid #c7eaff; }

.p-bnr__media img {
	position: absolute;
	left: 0;
	top: 0;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-bnr--shindan .p-bnr__media img { height: 113.69%; top: -5.28%; }
.p-bnr--exportlab .p-bnr__media img { height: 110.89%; top: -.97%; }
/* Figmaでは縦横比を変えて配置されているため fill で再現 */
.p-bnr--tradewatch .p-bnr__media img { width: 159.62%; height: 177%; left: -29.53%; top: -42.77%; object-fit: fill; }

.p-bnr__title {
	font-family: var(--font-gothic);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.8;
	text-align: center;
	color: var(--c-main);
}

/* =========================================================
   SP（FigmaのSPデザイン TOP_SP 390px 基準／1rem = 10px）
   ========================================================= */
@media screen and (max-width: 1023px) {

	/* 追従キャッチ（スクロールで白へ変わるコピー）はSPでも使う */
	.p-catch {
		margin-left: 2.4rem;
		height: calc(var(--hero-h) + 31.3rem + var(--copy-h));
	}

	.p-catch__spacer { height: calc(var(--hero-h) + 31.3rem); }

	.p-catch__sticky {
		bottom: calc(100vh - var(--copy-top-view) - var(--copy-h));
		height: var(--copy-h);
	}

	.p-catch__layer { font-size: var(--copy-fs); line-height: 1.3; }

	/* ---------- HERO ----------
	   PCと同じ「MVが画面内で止まり、下の背景がせり上がって覆う」挙動。
	   そのためにはヒーローの中身が画面内に収まっている必要があるので、
	   MVの高さを「画面の残り」から算出する（収まるうちは全幅、
	   足りなければ比率を保ったまま幅を縮める）。 */
	.p-topvisual {
		--hero-hold: min(16rem, 18vh);
		--hero-h: calc(100vh + var(--hero-hold));
		--sp-head-h: 18.7rem;
		/* 画面が低い端末でMVが細くなりすぎないよう、8%までは画面より高くてよいことにする */
		--sp-mv-h: min(
			calc(var(--ws-vw, 100vw) * 1.6204),
			calc((100vh - var(--header-h) - var(--sp-head-h) - 1.8rem) * 1.08)
		);
		/* 追従キャッチ：MV上のキャッチと同じ位置・同じ級数 */
		--copy-fs: 4rem;
		--copy-h: calc(var(--copy-fs) * 2.6);
		--copy-top-view: calc(var(--header-h) + 2.8rem);
		/* SPはヘッダー直下からMVまでの余白が元々少ないので、スクロール前の追い込みはしない */
		--copy-lift: 0rem;
	}

	.p-hero {
		position: sticky;
		top: 0;
		bottom: auto;
		display: block;
		height: var(--hero-h);
		margin-bottom: 0;
		padding-top: var(--header-h);
		background: #fff;
	}

	/* === 案C：SP縦構図 ===
	   ヒーローは「キャッチ＋縦長のMV」。シーンの組み替えは mv.css の
	   「SP縦構図」ブロックに入れている。 */
	.p-hero .sp-wrapper {
		position: static;
		display: block;
		width: 100%;
		aspect-ratio: auto;
		background: none;
	}

	.p-hero__stage {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 0;
	}

	.p-hero__head {
		position: relative;
		z-index: 3;
		width: auto;
		padding: 2.8rem 2.4rem 0;
	}

	.p-hero__catch {
		position: static;
		font-size: 4rem;
		line-height: 1.3;
		color: var(--c-main);
	}

	.p-hero__en {
		position: static;
		margin-top: 1.8rem;
		font-size: 1.6rem;
		line-height: 1.19;
	}

	.p-hero__mv {
		position: relative;
		left: auto;
		top: auto;
		width: calc(var(--sp-mv-h) / 1.6204);
		max-width: 100%;
		height: var(--sp-mv-h);
		aspect-ratio: auto;
		margin: 1.8rem auto 0;
		transform: none;
		border-radius: 0;
		background: #e7edfd;
		overflow: hidden;
	}

	.p-hero__mv .mv-wrapper {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* ---------- INTRO ---------- */
	/* Figmaではイントロの背景がサービスセクションの下（2896）まで続いている。
	   ここが足りないとサービスの角丸の左右に白が見えてしまう。 */
	.p-intro {
		height: auto;
		padding: 31.3rem 0 15.2rem;
	}

	/* PCと同じく、上端を透明から徐々に不透明にしてMVに重ねる */
	.p-intro__bg {
		-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 40rem);
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 40rem);
	}

	/* Figmaの並び順（キャッチ→英字→写真1→本文→写真3→写真2）に組み替える */
	.p-intro__stage {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		height: auto;
		padding: 0 2.4rem;
	}

	.p-intro__catch {
		order: 1;
		position: static;
		font-size: 4rem;
		line-height: 1.3;
	}

	.p-intro__en {
		order: 2;
		position: static;
		margin-top: 2.4rem;
		font-size: 1.6rem;
		line-height: 1.19;
	}

	.p-intro__photo { position: static; width: 100%; }
	.p-intro__photo img { height: 100%; }

	.p-intro__photo--01 { order: 3; margin-top: 4rem; height: 33rem; }
	.p-intro__body { order: 4; position: static; width: 100%; margin-top: 4rem; }
	.p-intro__photo--03 { order: 5; margin: 8.9rem 0 0 auto; width: 11rem; height: 13.1rem; }
	.p-intro__photo--02 { order: 6; margin-top: 4.8rem; height: 19rem; }
	.p-intro__swoosh { order: 7; }

	/* Figmaの342px幅に23文字が収まるよう、わずかに詰める */
	.p-intro__lead { font-size: 1.5rem; line-height: 2; letter-spacing: -.012em; }
	.p-intro__lead p + p { margin-top: 3rem; }

	.p-intro__closing { margin-top: 7rem; }
	.p-intro__closing-main { font-size: 2.4rem; line-height: 1.583; }
	.p-intro__closing-sub { margin-top: 2rem; font-size: 1.5rem; line-height: 1.8; }

	.p-intro__btn { display: flex; justify-content: center; margin-top: 5rem; }

	/* Figma: ページ座標 y=2247（＝stage基準で141.8rem）に置く曲線 */
	.p-intro__swoosh {
		position: absolute;
		left: -11.9rem;
		top: 141.8rem;
		width: 48.55rem;
		height: 41.8rem;
	}

	.p-marquee { position: static; margin-top: 8.7rem; height: 8.4rem; }
	.p-marquee__text { font-size: 10.75rem; }
	.p-marquee__icon img { width: 10.763rem; height: 7.631rem; }

	/* ---------- SERVICE ---------- */
	.p-service { height: auto; margin-top: -16.6rem; padding: 9rem 0 10rem; }
	.p-service::before { height: 100%; border-radius: 4rem 4rem 0 0; }

	/* Figmaの並び（見出し→リード→図→本文→ボタン→キャッチ→ドア）に組み替える */
	.p-service__stage {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: none;
		height: auto;
		padding: 0 2.4rem;
		text-align: center;
	}

	.p-service__head,
	.p-service__text { display: contents; }

	.p-service__map { left: -20%; top: 30rem; width: 140%; height: auto; opacity: .55; }
	.p-service__map img { height: auto; }

	.p-service .c-sectitle { order: 1; align-items: center; }
	.p-service .c-sectitle__row { justify-content: center; }

	.p-service__lead { order: 2; margin-top: 3rem; font-size: 2.4rem; line-height: 1.65; }

	.p-service__diagram {
		order: 3;
		position: static;
		right: auto;
		/* 図に焼き込まれた文字が小さいため、左右のガターぶんまで広げて可読性を上げる */
		width: calc(100% + 4.8rem);
		margin: 3rem -2.4rem 0;
	}

	/* 点線はviewBox基準のため、SPでは約1/4に縮んで消えてしまう。線幅だけ上げて見えるようにする */
	.p-service__line { stroke-width: 4.6; }

	.p-service__desc {
		order: 4;
		width: 100%;
		margin-top: 3rem;
		font-size: 1.5rem;
		line-height: 2;
		text-align: left;
	}

	.p-service__btn { order: 5; display: flex; justify-content: center; margin-top: 5rem; }

	.p-service__catch {
		order: 6;
		position: static;
		margin-top: 6.4rem;
		font-size: 1.6rem;
		line-height: 1.9;
		text-align: center;
		white-space: normal;
	}

	.p-service__doors {
		order: 7;
		position: static;
		flex-direction: column;
		gap: 1.6rem;
		width: 100%;
		margin-top: 4.8rem;
	}

	.p-door { flex: none; width: 100%; height: 40.3rem; border-radius: .895rem; text-align: left; }
	.p-door__inner { left: 2.5rem; top: auto; bottom: 5rem; gap: 1.2rem; }
	.p-door__en { font-size: 2rem; }
	.p-door__title { font-size: 2rem; line-height: 1.3; letter-spacing: .04em; }
	.p-door__text { font-size: 1.6rem; line-height: 1.45; letter-spacing: .03em; }
	.p-door .c-arrow { left: 26.9rem; right: auto; top: auto; bottom: 5rem; width: 4.8rem; height: 4.8rem; border-radius: .358rem; }
	.p-door__glow { left: 9rem; top: -10.7rem; width: 35.8rem; height: 26.9rem; }

	/* ---------- OFFICIAL SPONSOR ---------- */
	.p-hawks { height: 87.1rem; padding: 0; background: #000; isolation: auto; }

	.p-hawks__bg img {
		left: -27.6rem;
		top: 6rem;
		width: 113.3rem;
		height: 72.4rem;
	}

	.p-hawks__overlay { top: .1rem; height: 87rem; background: rgba(0, 0, 0, .55); mix-blend-mode: normal; }

	/* SPは上下に横スクロールする帯 */
	.p-hawks__strip {
		left: 0;
		right: auto;
		width: 100%;
		height: 14.5rem;
		opacity: 1;
	}

	.p-hawks__strip--left { top: 0; }
	.p-hawks__strip--right { top: 72.6rem; }

	.p-hawks__strip-track {
		flex-direction: row;
		gap: 1.2rem;
		top: 0;
		width: max-content;
	}

	.p-hawks__strip--left .p-hawks__strip-track {
		left: 0;
		top: 0;
		animation: ws-strip-left 40s linear infinite;
	}

	.p-hawks__strip--right .p-hawks__strip-track {
		left: -11.6rem;
		top: 0;
		animation: ws-strip-right 40s linear infinite;
	}

	.p-hawks__strip-item { width: 15.4rem; height: 14.5rem; }

	@keyframes ws-strip-left {
		from { transform: translateX(0); }
		to { transform: translateX(-66.4rem); }
	}

	@keyframes ws-strip-right {
		from { transform: translateX(-66.4rem); }
		to { transform: translateX(0); }
	}

	.p-hawks__inner {
		left: 50%;
		top: 19.5rem;
		transform: translateX(-50%);
		width: 34.2rem;
		max-width: none;
		margin: 0;
		padding: 0;
		gap: 21.3rem;
	}

	.p-hawks__inner::before { content: none; }

	.p-hawks__head { width: 100%; gap: 1.7rem; }
	.p-hawks__title { width: 19.4rem; font-size: 3.4rem; line-height: 1.0227; }
	.p-hawks .c-label { font-size: 1.2rem; gap: .8rem; }
	.p-hawks .c-label img { width: 1.3rem; height: 1.3rem; }
	.p-hawks__lead { font-size: 2.4rem; line-height: 1.3; }
	.p-hawks__desc { margin-top: 3rem; font-size: 1.5rem; line-height: 1.5; }

	/* ---------- TOPICS ---------- */
	.p-topics { padding: 9rem 0 4rem; }
	.p-topics__head { width: 100%; max-width: none; padding: 0 2.4rem; }
	.p-topics .c-sectitle__nav { display: none; }

	.p-topics__slider { margin-top: 5rem; overflow: visible; }

	.p-topics__track {
		flex-direction: column;
		gap: 2rem;
		width: auto;
		padding-left: 2.4rem;
		padding-right: 2.4rem;
		transform: none !important;
	}

	/* SPデザインは3件表示 */
	.p-topics__track .c-newscard:nth-child(n + 4) { display: none; }

	.p-topics__btn { display: flex; justify-content: center; width: 100%; margin-top: 5rem; padding: 0 2.4rem; }

	/* ---------- COMPANY ---------- */
	.p-company { height: auto; padding: 9rem 0 9rem; background: #f7f7f7; }
	.p-company__stage { position: relative; width: 100%; height: auto; padding-top: 46.5rem; }

	.p-company__photo--02 {
		position: absolute;
		left: 0;
		top: 0;
		width: 11.328rem;
		height: 31.522rem;
		border-radius: 0 1rem 1rem 0;
	}

	.p-company__photo--01 {
		position: absolute;
		left: 13.807rem;
		top: 5.415rem;
		width: 25.193rem;
		height: 41.085rem;
		margin: 0;
		border-radius: 1rem 0 0 1rem;
	}

	.p-company__body {
		position: static;
		width: 100%;
		max-width: none;
		margin: 6rem auto 0;
		padding: 0 2.4rem;
	}

	.p-company__list { margin-top: 4rem; }

	.p-company__list li:first-child { border-top: .0585rem solid #d9d9d9; }
	.p-company__list li { border-bottom: .0585rem solid #d9d9d9; }

	.p-company__list a { padding: 1.754rem 2rem; }
	.p-company__list a > span:first-child { font-size: 1.6rem; letter-spacing: .0256em; }
	.p-company__list .c-arrow--outline { width: 3.3rem; height: 3.3rem; border-radius: .234rem; border-width: .0585rem; }
	.p-company__list .c-arrow img { width: 1.1rem; height: 1.1rem; }

	/* ---------- CTA ---------- */
	.p-cta { padding: 8rem 0 6rem; }
	.p-cta__inner { width: 100%; max-width: none; padding: 0 2.4rem; }
	.p-cta__cards { flex-direction: column; gap: 3rem; }

	.p-ctacard,
	.p-ctacard--contact,
	.p-ctacard--recruit {
		width: 100%;
		height: auto;
		padding: 5rem 2.8rem;
		border-radius: 0;
	}

	.p-ctacard--recruit { background: #232323; }
	.p-ctacard__deco,
	.p-ctacard__media { display: none; }

	.p-ctacard__body { gap: 3rem; }
	.p-ctacard__head { gap: .3rem; }
	.p-ctacard__title { font-size: 4rem; line-height: 1.1364; }
	.p-ctacard__foot { gap: 3rem; }
	.p-ctacard__text { font-size: 1.5rem; line-height: 1.9; }

	/* ---------- 外部サイトバナー ---------- */
	.p-bnrs { flex-direction: column; gap: 2.2rem; margin-top: 6rem; }

	.p-bnr {
		width: 100%;
		gap: 2rem;
		padding: 2rem;
		border: .0893rem solid #d9d9d9;
		border-radius: .893rem;
		background: #f7f7f7;
	}

	.p-bnr--shindan { order: 1; }
	.p-bnr--tradewatch { order: 2; }
	.p-bnr--exportlab { order: 3; }

	.p-bnr__media { width: 30.1rem; height: 15.3rem; margin-inline: auto; border-radius: .893rem; }
	.p-bnr__title { font-size: 1.5rem; line-height: 1.5; }
}

/* =========================================================
   600〜1023px：MVはPCと同じ横長のアニメーションを見せる
   （縦構図は599px以下のみ）
   ========================================================= */
@media screen and (min-width: 600px) and (max-width: 1023px) {
	/* アニメーション（1920x1080）をそのままの比率で全幅に。
	   ずらしや別背景を入れると継ぎ目が出るので、ぴったり敷き詰める。 */
	.p-hero__mv {
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 1920 / 1080;
		margin: 1.8rem 0 0;
		background: none;
	}

	.p-hero__mv .mv-wrapper {
		inset: 0;
		left: 0;
		right: auto;
		top: 0;
		bottom: auto;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	/* animation側のSP指定（左へ8%ずらす）を打ち消して中央に揃える */
	.p-hero__mv .mv { left: 0; }

	/* 吹き出し・雲もPCと同じ寸法・位置に */
	.p-hero__mv .link { width: auto; padding: 24px 26px; }

	.p-hero__mv .link::after {
		border-right-width: 12px;
		border-left-width: 12px;
		border-top-width: 25px;
		left: calc(50% - 12px);
		bottom: -24px;
	}

	.p-hero__mv .link svg,
	.p-hero__mv .link05 svg { width: auto; height: auto; }

	.p-hero__mv .link01 { top: 530px; left: 248px; }
	.p-hero__mv .link02 { top: 437px; left: 565px; }
	.p-hero__mv .link03 { top: 70px; left: 762px; }
	.p-hero__mv .link04 { top: 218px; left: 1338px; }
	.p-hero__mv .link05 { top: 461px; left: 1669px; }
	.p-hero__mv .cloud01 { left: 578px; top: 160px; }
	.p-hero__mv .cloud02 { left: 747px; top: 223px; }
}