@charset "utf-8";
/* ==========================================================================
   AZLINX 2026 — Top page
   スクロールはブラウザ標準。動きは transform / opacity / clip-path のみ。
   ========================================================================== */

/* --------------------------------------------------------------------------
   オープニング(セッションの初回のみ)
   -------------------------------------------------------------------------- */
.t-opening { display: none; }
.has-opening .t-opening {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	pointer-events: none;
}
.t-opening__panel {
	position: absolute;
	inset: 0;
	background: var(--grad-deep);
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1);
}
.t-opening__mark {
	position: relative;
	width: 96px;
	height: auto;
	animation: t-op-mark 1s var(--ease) backwards; /* forwards だと終了後の opacity が固定され、消えなくなる */
	transition: opacity .4s ease, transform .8s var(--ease);
}
@keyframes t-op-mark {
	from { opacity: 0; transform: scale(.6) rotate(-20deg); filter: blur(8px); }
	to   { opacity: 1; transform: none; filter: none; }
}
.is-opened .t-opening__panel { clip-path: inset(0 0 100% 0); }
.is-opened .t-opening__mark { opacity: 0; transform: translateY(-40px) scale(.8); }
.is-opening-done .t-opening { display: none; }

/* --------------------------------------------------------------------------
   ファーストビュー:全面写真(3枚が切り替わりながらゆっくりズーム)× 白の大見出し
   切り替えは CSS アニメーションのみ(JS・canvas なし)。1枚 6 秒 × 3 枚 = 18 秒で一巡。
   -------------------------------------------------------------------------- */
.t-hero {
	--cycle: 18s;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-h) + 40px) 0 clamp(36px, 4.4vw, 64px);
	color: #fff;
	background: #0a5fd8;
}
.t-hero__slides { position: absolute; inset: 0; z-index: -2; }
.t-hero__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden; /* 出番(t-slide-vis)の間だけ描く */
	animation: t-slide var(--cycle) linear infinite, t-slide-vis var(--cycle) linear infinite;
	/* t-slide-vis だけ周期の3%(0.54秒)早く始め、フェードインの前に描画の準備を終える */
	animation-delay: calc(var(--n) * var(--cycle) / 3), calc(var(--n) * var(--cycle) / 3 - var(--cycle) * .03);
}
.t-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	transform-origin: var(--origin, 50% 50%);
	animation: t-zoom var(--cycle) linear infinite;
	animation-delay: inherit;
}
/* 1枚目は読み込み直後から表示(暗転させない) */
.t-hero__slide:first-child { opacity: 1; visibility: visible; }
@keyframes t-slide {
	0%    { opacity: 0; }
	6%    { opacity: 1; }
	33.3% { opacity: 1; }
	40%   { opacity: 0; }
	100%  { opacity: 0; }
}
@keyframes t-zoom {
	0%   { transform: scale(1.16); }
	40%  { transform: scale(1.02); }
	100% { transform: scale(1.02); }
}
/* メモリ対策:透明な間は描かない。全面写真は1枚ごとに GPU のメモリを大きく使うので、見えている1〜2枚だけを描く。
   t-slide-vis は t-slide より周期の3%早く始まるので、t-slide で見ると「出番の3%前(まだ透明)〜40.5%(透明になった直後)」だけ描く。
   見た目と動きのタイミングは t-slide・t-zoom のまま(どちらも変えていない) */
@keyframes t-slide-vis {
	0%, 43.5% { visibility: visible; }
	44%, 100% { visibility: hidden; }
}
/* 文字を読みやすくする青のグラデーション(写真の明るさは残す) */
.t-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(2, 28, 110, .78) 0%, rgba(2, 40, 140, .46) 40%, rgba(4, 60, 170, 0) 72%),
		linear-gradient(90deg, rgba(2, 28, 110, .35) 0%, rgba(2, 28, 110, 0) 55%);
}

/* 光の線:線そのものは静的なSVG(描画は1回だけ)。動きはすべて transform / opacity で、
   GPU の合成処理だけで済むようにしている(スクロールや待機中のメインスレッド負荷が増えない)。
   .t-lines__stage は 1600×1000 の座標系で、top.js が画面を覆う倍率を resize 時だけ設定する。 */
.t-lines { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.t-lines__stage {
	position: absolute;
	left: 0; top: 0;
	width: 1600px;
	height: 1000px;
	transform-origin: 0 0;
	transform: translate(var(--lx, 0px), var(--ly, 0px)) scale(var(--ls, 1));
}
.t-lines__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	animation: t-lines-in 2.2s var(--ease) .4s both, t-lines-drift 14s ease-in-out 2.6s infinite alternate;
}
/* 読み込み時:左から右へ線が伸びるように現れる(一度だけ) */
@keyframes t-lines-in {
	from { opacity: 0; transform: translate3d(-12%, 4%, 0) scaleX(.85); }
	to   { opacity: 1; transform: none; }
}
@keyframes t-lines-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-18px, 10px, 0); }
}
/* 光が線を横切る:帯(外側)が右へ動き、中の明るい線(内側)は逆に動いて位置を保つ。
   幅・速さの違う帯を重ねて、線の上をデータが流れているように見せる(どちらも transform のみ) */
.t-lines__sweep {
	--w: 360px;
	position: absolute;
	left: 0; top: 0;
	width: var(--w);
	height: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
	transform: translate3d(calc(var(--w) * -1), 0, 0);
	visibility: hidden; /* 出番(t-sweep-vis)の間だけ描く */
	/* t-sweep-vis だけ周期の10%早く始め、帯が画面に入る前に描画の準備を終える */
	animation: t-sweep var(--dur, 7s) cubic-bezier(.45, 0, .2, 1) var(--delay, 2.4s) infinite,
		t-sweep-vis var(--dur, 7s) linear calc(var(--delay, 2.4s) - var(--dur, 7s) * .1) infinite;
}
.t-lines__sweep-in {
	width: 1600px;
	height: 100%;
	transform: translate3d(var(--w), 0, 0);
	animation: t-sweep-in var(--dur, 7s) cubic-bezier(.45, 0, .2, 1) var(--delay, 2.4s) infinite;
}
.t-lines__sweep-in img { display: block; width: 1600px; height: 1000px; }
@keyframes t-sweep {
	0%   { transform: translate3d(calc(var(--w) * -1), 0, 0); }
	60%  { transform: translate3d(1600px, 0, 0); }
	100% { transform: translate3d(1600px, 0, 0); }
}
@keyframes t-sweep-in {
	0%   { transform: translate3d(var(--w), 0, 0); }
	60%  { transform: translate3d(-1600px, 0, 0); }
	100% { transform: translate3d(-1600px, 0, 0); }
}
/* メモリ対策:帯が画面外で待っている間は描かない(帯1本ごとに 1600×1000 の明るい線を GPU に持つため)。
   t-sweep-vis は t-sweep より周期の10%早く始まるので、t-sweep で見ると「入る前の10%(左端の外)〜60.5%(右端の外へ出た直後)」だけ描く。
   動き自体は t-sweep・t-sweep-in のまま */
@keyframes t-sweep-vis {
	0%, 70.5% { visibility: visible; }
	71%, 100% { visibility: hidden; }
}
.has-opening:not(.is-ready) .t-lines__img,
.has-opening:not(.is-ready) .t-lines__sweep,
.has-opening:not(.is-ready) .t-lines__sweep-in { animation-play-state: paused; }
/* ファーストビューが画面外のときはアニメーションを止める */
.t-hero.is-off *, .t-hero.is-off *::after { animation-play-state: paused !important; }
/* 画面から1画面分以上離れたら、写真と光の線を描かない(GPU のメモリを手放す)。top.js が .is-far を付け外しし、
   戻ってくる1画面分手前で描画を再開する。アニメーションの進み具合はそのまま(止めているだけで巻き戻さない) */
.t-hero.is-far .t-hero__slide, .t-hero.is-far .t-lines__img, .t-hero.is-far .t-lines__sweep { visibility: hidden !important; }

/* スライドの進み具合(右下) */
.t-hero__pager {
	position: absolute;
	z-index: 2;
	right: var(--gutter);
	top: calc(var(--header-h) + 24px);
	display: flex;
	gap: 8px;
}
.t-hero__pager span {
	position: relative;
	width: 40px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, .35);
}
.t-hero__pager span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform-origin: 0 50%;
	transform: scaleX(0);
	animation: t-pager var(--cycle) linear infinite;
	animation-delay: calc(var(--n) * var(--cycle) / 3);
}
@keyframes t-pager {
	0%     { transform: scaleX(0); }
	33.3%  { transform: scaleX(1); opacity: 1; }
	36%    { transform: scaleX(1); opacity: 0; }
	100%   { transform: scaleX(0); opacity: 0; }
}

/* 見出し */
.t-hero__inner {
	position: relative;
	z-index: 2;
	container-type: inline-size;
}
.t-hero__ttl {
	font-family: var(--f-disp);
	/* コンテナ幅に「インターネットの力で、」が1行で収まる最大サイズ */
	font-size: min(124px, 100cqi / 11.3);
	font-weight: 900;
	line-height: 1.16;
	letter-spacing: .01em;
	color: #fff;
	font-feature-settings: "palt";
	margin-left: -.04em;
	text-shadow: 0 6px 40px rgba(0, 20, 90, .35);
}
.t-hero__line { display: block; white-space: nowrap; }
.t-hero__em,
.t-hero__em .ch {
	background: linear-gradient(100deg, #9becff 0%, #ffffff 45%, #7fe0ff 75%, #9becff 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	text-shadow: none;
}
.js [data-split="hero"] .ch {
	transform: translate3d(0, 80%, 0) rotate(12deg) scale(.9);
	transition-duration: .6s, 1s;
	transition-delay: calc(var(--i) * 26ms + .15s);
}
.t-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: clamp(28px, 3.4vw, 48px);
	padding-top: clamp(20px, 2.4vw, 32px);
	border-top: 1px solid rgba(255, 255, 255, .4);
	animation: t-in 1.2s var(--ease) 1.2s both;
}
.t-hero__lead { font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; letter-spacing: .1em; text-shadow: 0 2px 16px rgba(0, 20, 90, .4); }
.t-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
@keyframes t-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
.has-opening:not(.is-ready) .t-hero__foot,
.has-opening:not(.is-ready) .t-hero__slide,
.has-opening:not(.is-ready) .t-hero__slide img,
.has-opening:not(.is-ready) .t-hero__pager span::after { animation-play-state: paused; }

/* ヒーロー用ボタン */
.c-btn--clear {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.c-btn--clear .c-arrow { background: #fff; color: var(--c-blue); }
@media (hover: hover) { .c-btn--clear:hover { background: rgba(255, 255, 255, .24); } }

/* --------------------------------------------------------------------------
   会社案内
   -------------------------------------------------------------------------- */
.t-intro {
	position: relative;
	padding: clamp(96px, 12vw, 200px) 0 clamp(80px, 9vw, 140px);
	overflow: clip;
}
.t-intro::before {
	/* 背景の大きな光の輪 */
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 8%;
	width: min(1100px, 120vw);
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(10, 127, 240, .12), rgba(0, 189, 230, .06) 55%, rgba(255, 255, 255, 0));
}
.t-intro__top { position: relative; } /* コラージュの配置基準(下の「当社の強み」にはかからない) */
/* PC:上下の写真が重ならない高さを確保し、文章は縦中央に */
@media (min-width: 1100px) {
	.t-intro { padding-top: clamp(56px, 6vw, 104px); } /* 写真とメッセージの距離を詰める */
	.t-intro__top { display: flex; align-items: center; min-height: clamp(640px, 48vw, 760px); }
}
.t-intro__inner { position: relative; z-index: 1; max-width: 900px; text-align: center; }
.t-intro__statement {
	margin-top: clamp(32px, 3.6vw, 48px);
	font-family: var(--f-disp);
	font-size: clamp(26px, 3.6vw, 54px);
	font-weight: 900;
	line-height: 1.65;
	letter-spacing: .05em;
	color: var(--c-ink);
	font-feature-settings: "palt";
}
.t-intro__key { font-size: 1.5em; line-height: 1.35; }
.t-intro__sub {
	margin-top: clamp(16px, 1.8vw, 24px);
	font-family: var(--f-disp);
	font-size: clamp(18px, 1.9vw, 26px);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--c-ink);
	font-feature-settings: "palt";
}
.t-intro__statement .ch { transition-delay: calc(var(--i) * 12ms); transition-duration: .5s, .8s; } /* 読み始める前に出そろう速さ */
.t-intro__key:not(:has(.ch)), .t-hero__em:not(:has(.ch)) { -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-intro__key:not(:has(.ch)) { background: var(--grad); }
.t-intro__key .ch {
	background: var(--grad);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
.t-intro__txt {
	max-width: 35em;
	margin: clamp(32px, 3.6vw, 48px) auto 0;
	font-size: 16px;
	line-height: 2.1;
	text-align: left;
}
.t-intro__btn { margin-top: clamp(32px, 3.6vw, 48px); }

.t-intro__collage { position: absolute; inset: 0; pointer-events: none; }
.t-intro__pic { position: absolute; }
.t-intro__pic figure {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	box-shadow: 0 18px 36px -24px rgba(6, 60, 160, .3);
}
.t-intro__pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* 円の中から写真が広がる(IntersectionObserver が反応するよう、マスクは内側の img に掛ける) */
.js .t-intro__pic figure[data-reveal] { opacity: 0; transform: scale(.6); transition: opacity .8s ease, transform 1.4s var(--ease); }
.js .t-intro__pic figure[data-reveal] img { transform: scale(1.4); transition: transform 1.8s var(--ease); }
.js .t-intro__pic figure[data-reveal].is-in { opacity: 1; transform: none; }
.js .t-intro__pic figure[data-reveal].is-in img { transform: none; }
.t-intro__pic--1 { left: max(16px, calc(50% - 720px)); top: 7%; width: clamp(150px, 16vw, 250px); aspect-ratio: 3 / 4; border-radius: 24px; }
.t-intro__pic--1 img { object-position: 72% 50%; }
.t-intro__pic--2 { right: max(16px, calc(50% - 730px)); top: 10%; width: clamp(150px, 17vw, 270px); aspect-ratio: 4 / 5; border-radius: 24px; }
.t-intro__pic--3 { left: max(40px, calc(50% - 640px)); bottom: 0; width: clamp(130px, 13vw, 210px); aspect-ratio: 4 / 5; border-radius: 24px; }
.t-intro__pic--4 { right: max(24px, calc(50% - 680px)); bottom: 4%; width: clamp(170px, 18vw, 280px); aspect-ratio: 5 / 4; border-radius: 24px; }

/* 当社の強み */
.t-strength { margin-top: clamp(88px, 10vw, 152px); }
.t-strength__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}
.t-strength__ttl {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--f-disp);
	font-size: clamp(26px, 2.8vw, 40px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .06em;
	color: var(--c-ink);
}
.t-strength__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-top: clamp(32px, 3.6vw, 52px);
	counter-reset: none;
}
.t-strength__item {
	position: relative;
	padding-top: clamp(28px, 2.8vw, 40px);
}
/* 上の罫線:青い線が左から伸びる */
.t-strength__item::before,
.t-strength__item::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	border-radius: 2px;
}
.t-strength__item::before { background: var(--c-line); }
.t-strength__item::after {
	background: var(--grad);
	transform-origin: 0 50%;
	transform: scaleX(.18);
	transition: transform 1.4s var(--ease) .2s;
}
.t-strength__item.is-in::after { transform: scaleX(1); }
.t-strength__num {
	/* 事業内容の番号(グラデーション・大・太)と区別するため、単色・細め・小さめに。
	   (線だけの数字はフォントの輪郭の重なりが見えてしまうため不可) */
	display: block;
	font-family: var(--f-en);
	font-size: clamp(48px, 4.4vw, 68px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--c-blue);
}
.t-strength__name {
	margin-top: clamp(20px, 2vw, 28px);
	font-family: var(--f-disp);
	font-size: clamp(20px, 1.8vw, 25px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .04em;
	color: var(--c-ink);
	font-feature-settings: "palt";
}
.t-strength__txt { margin-top: 14px; font-size: 15px; line-height: 2; }

/* --------------------------------------------------------------------------
   事業名の帯(鮮やかな青)
   -------------------------------------------------------------------------- */
.t-band {
	position: relative;
	overflow: hidden;
	padding: clamp(16px, 2vw, 28px) 0;
	background: var(--grad-deep);
	user-select: none;
	pointer-events: none;
	transform: rotate(-2deg) scale(1.04);
	margin: clamp(24px, 3vw, 48px) 0;
	box-shadow: 0 30px 60px -30px rgba(6, 70, 210, .5);
}
.t-band__row { overflow: visible; }
.t-band__track { display: flex; width: max-content; animation: t-band 50s linear infinite; will-change: transform; }
.t-band.is-js .t-band__track { animation: none; }
.t-band p {
	display: flex;
	align-items: center;
	flex: none;
	font-family: var(--f-disp);
	font-size: clamp(40px, 5.2vw, 84px);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: .02em;
	white-space: nowrap;
	color: #fff;
}
.t-band i {
	display: inline-block;
	width: .42em;
	height: .42em;
	margin: 0 .5em;
	background: url("/assets/img/v2/mark-white.svg") center / contain no-repeat;
	opacity: .9;
}
@keyframes t-band { to { transform: translate3d(-50%, 0, 0); } }

/* --------------------------------------------------------------------------
   事業内容(鮮やかな青の面が画面いっぱいに広がる)
   -------------------------------------------------------------------------- */
.t-service {
	position: relative;
	isolation: isolate;
	padding: clamp(96px, 11vw, 168px) 0 clamp(96px, 11vw, 168px);
	color: #fff;
}
.t-service__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 40% at 85% 6%, rgba(0, 200, 255, .38), rgba(0, 200, 255, 0)),
		radial-gradient(50% 40% at 10% 60%, rgba(120, 90, 255, .22), rgba(120, 90, 255, 0)),
		var(--grad-deep);
	border-radius: clamp(24px, 3vw, 48px);
	transform: scaleX(.9); /* top.js がスクロールに合わせて 1 まで広げる(clip-path だと毎回再描画が走るので transform で) */
	will-change: transform;
}
html:not(.js) .t-service__bg { transform: none; }
.t-service__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
	margin-bottom: clamp(48px, 5.6vw, 88px);
}
.t-service__lead { font-size: 16px; line-height: 2; padding-bottom: 8px; color: #fff; }
.t-service__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
.t-svc--a, .t-svc--c { grid-column: 1 / span 6; }
.t-svc--b, .t-svc--d { grid-column: 7 / -1; }
/* 右側のカードだけ少し下げてリズムを出す。translate はレイアウトに影響しないので、
   同じ量だけ下げれば上下のカードは重ならない(下端のはみ出し分はグリッドの余白で確保) */
@media (min-width: 1024px) {
	.t-service__grid { padding-bottom: 72px; }
	.t-svc--b, .t-svc--d { translate: 0 72px; }
}
.t-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: clamp(20px, 2.2vw, 32px);
	background: #fff;
	color: var(--c-text);
	box-shadow: 0 40px 80px -40px rgba(0, 20, 90, .6);
	transform-style: preserve-3d;
}
.js .t-svc[data-reveal] { transform: translate3d(0, 80px, 0) rotate(2deg); transition: opacity 1s ease, transform 1.4s var(--ease); }
.js .t-svc[data-reveal].is-in { transform: none; }
.t-svc__fig {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px) 0 0;
	background: var(--c-sky-1);
}
.t-svc__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--fig-pos, 50% 50%);
	border-radius: inherit;
	opacity: 0;
	transform: scale(1.3);
	transition: opacity 1s ease .2s, transform 2s var(--ease) .2s;
}
.t-svc.is-in .t-svc__fig img, html:not(.js) .t-svc__fig img { opacity: 1; transform: none; }
.t-svc__num {
	position: absolute;
	left: clamp(22px, 2.6vw, 40px);
	top: 0;
	transform: translateY(-54%);
	font-family: var(--f-en);
	font-size: clamp(58px, 5.6vw, 96px); /* 事業名より目立ちすぎないよう控えめに */
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	background: var(--grad);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}
.t-svc__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(48px, 5vw, 72px) clamp(24px, 2.8vw, 44px) clamp(28px, 3vw, 44px);
}
.t-svc__ttl {
	font-family: var(--f-disp);
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: .02em;
	color: var(--c-ink);
	font-feature-settings: "palt";
}
.t-svc__txt { margin-top: 14px; font-size: 15px; line-height: 2; }
.t-svc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.t-svc__tags li { white-space: nowrap;
	padding: 4px 12px;
	border-radius: 999px;
	background: #e3f0ff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--c-blue);
}
.t-svc__tags:last-child { margin-top: auto; padding-top: 24px; }
.t-svc__more { margin-top: auto; padding-top: 28px; }
/* 傾けたときの光の反射 */



/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   いま、力を入れていること(AI × システム開発 / LLMO)
   -------------------------------------------------------------------------- */
.t-focus { position: relative; padding: clamp(96px, 11vw, 168px) 0; background: var(--c-sky-0); overflow: hidden; isolation: isolate; }
.t-focus::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(36% 50% at 0% 0%, rgba(0, 166, 214, .14), rgba(0, 166, 214, 0) 72%),
		radial-gradient(40% 56% at 100% 100%, rgba(6, 86, 224, .12), rgba(6, 86, 224, 0) 72%);
}
.t-focus__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.t-focus__lead { max-width: 34em; font-size: 16px; line-height: 2.05; }
.t-focus__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin-top: clamp(40px, 4.4vw, 64px); }
.t-focus__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 1px 2px rgba(14, 42, 71, .05), 0 30px 60px -40px rgba(6, 60, 160, .45);
	transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.t-focus__fig { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-sky-1); }
.t-focus__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.t-focus__body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.8vw, 40px); }
.t-focus__label { font-family: var(--f-en); font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #006bb8; }
.t-focus__ttl { margin-top: 10px; font-family: var(--f-disp); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1.45; letter-spacing: .03em; color: var(--c-ink); font-feature-settings: "palt"; }
.t-focus__txt { margin-top: 14px; font-size: 15px; line-height: 2; }
.t-focus__more { margin-top: auto; padding-top: 24px; }
@media (hover: hover) {
	.t-focus__card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(14, 42, 71, .05), 0 36px 64px -36px rgba(6, 60, 160, .55); }
	.t-focus__card:hover .t-focus__fig img { transform: scale(1.04); }
}
@media (max-width: 767px) {
	.t-focus__grid { grid-template-columns: 1fr; }
	.t-focus .c-ttl__jp { font-size: min(34px, 8.6vw); } /* 「力を入れていること」を1行に */
}

.t-news { padding: clamp(96px, 11vw, 168px) 0; }
.t-news__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	row-gap: 40px;
}
.t-news__head { grid-column: 1 / span 4; }
.t-news .c-ttl__jp { white-space: nowrap; font-size: clamp(44px, 5.4vw, 80px); }
.t-news__more { margin-top: 36px; }
.t-news__list { grid-column: 5 / -1; border-top: 1px solid var(--c-line); align-self: start; margin-top: 8px; }
.t-news__list li { border-bottom: 1px solid var(--c-line); }
.t-news__item {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 32px;
	padding: 28px 12px;
	transition: color .4s ease;
}
.t-news__item::before {
	/* ホバーで青い面が左から満ちる */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .6s var(--ease);
}
.t-news__date { font-family: var(--f-en); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--c-sub); font-variant-numeric: tabular-nums; transition: color .4s ease; }
.t-news__ttl { font-size: 16px; font-weight: 700; line-height: 1.7; letter-spacing: .06em; color: var(--c-ink); word-break: auto-phrase; transition: color .4s ease; }
.t-news__item .c-arrow { background: #e3f0ff; color: var(--c-blue); }
@media (hover: hover) {
	.t-news__item:hover::before { transform: scaleX(1); }
	.t-news__item:hover .t-news__ttl, .t-news__item:hover .t-news__date { color: #fff; }
	.t-news__item:hover .c-arrow { background: #fff; color: var(--c-blue); transform: translateX(3px); }
}

/* --------------------------------------------------------------------------
   採用情報:明るい面 × 左に文章、右に画面端まで伸びる写真
   (直後の「お問い合わせ」が全面写真+青なので、こちらは白基調でメリハリを付ける)
   -------------------------------------------------------------------------- */
.t-recruit {
	--side: max(var(--gutter), calc((100% - var(--maxw)) / 2));
	position: relative;
	padding: clamp(88px, 10vw, 152px) 0;
	background: var(--c-sky-0);
	overflow: clip;
}
.t-recruit::before {
	/* 背景にロゴの軌道モチーフをごく淡く */
	content: "";
	position: absolute;
	left: -6%;
	bottom: -18%;
	width: min(620px, 60vw);
	aspect-ratio: 127 / 91;
	background: url("/assets/img/v2/mark-white.svg") center / contain no-repeat;
	filter: brightness(0) invert(52%) sepia(80%) saturate(500%) hue-rotate(185deg);
	opacity: .06;
	pointer-events: none;
}
.t-recruit__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	column-gap: clamp(40px, 5vw, 88px);
	padding-left: var(--side);
}
.t-recruit__catch {
	margin-top: clamp(28px, 3vw, 40px);
	font-family: var(--f-disp);
	font-size: clamp(20px, 1.9vw, 27px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--c-ink);
	font-feature-settings: "palt";
}
.t-recruit__txt { margin-top: 16px; max-width: 30em; font-size: 16px; line-height: 2; }
.t-recruit__jobs {
	margin: clamp(28px, 3vw, 36px) 0 clamp(32px, 3.4vw, 44px);
	padding-top: 20px;
	border-top: 1px solid var(--c-line);
}
.t-recruit__jobs-ttl { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--c-sub); }
.t-recruit__chip { display: inline-block; margin-left: 12px; padding: 2px 11px; border-radius: 999px; background: #5a6c7f; font-size: 12px; letter-spacing: .08em; color: #fff; vertical-align: .05em; }
.t-recruit__status { margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.9; color: var(--c-ink); }
.t-recruit__jobs ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.t-recruit__jobs li {
	padding: 6px 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--c-sky-2);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--c-ink);
}
.t-recruit__fig {
	position: relative;
	height: clamp(440px, 46vw, 680px);
	overflow: hidden;
	border-radius: clamp(24px, 3vw, 48px) 0 0 clamp(24px, 3vw, 48px);
	background: var(--c-sky-1);
	box-shadow: 0 24px 48px -32px rgba(6, 60, 160, .28);
}
.t-recruit__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 50%;
	transform: scale(1.18);
	transition: transform 2.2s var(--ease);
}
.t-recruit.is-in .t-recruit__fig img, html:not(.js) .t-recruit__fig img { transform: none; }



/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* 採用情報:900px 未満は写真(右端まで)を上、文章を下に */
@media (max-width: 899px) {
	.t-recruit__grid { grid-template-columns: 1fr; row-gap: clamp(40px, 7vw, 56px); padding-left: var(--gutter); }
	.t-recruit__fig { order: -1; height: auto; aspect-ratio: 5 / 3.4; }
	.t-recruit__body { padding-right: var(--gutter); }
}
@media (max-width: 1099px) {
	.t-intro__collage {
		position: static;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		width: min(100% - var(--gutter) * 2, 900px);
		margin: 0 auto clamp(48px, 7vw, 72px);
	}
	.t-intro__pic { position: static; width: auto !important; aspect-ratio: 1 !important; border-radius: 24px !important; transform: none !important; }
	.t-intro { padding-top: clamp(72px, 9vw, 120px); }
}
@media (max-width: 1023px) {
	.t-svc--a, .t-svc--b, .t-svc--c, .t-svc--d { grid-column: auto; }
	.t-service__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.t-news__head, .t-news__list { grid-column: 1 / -1; }
	.t-news__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } /* 狭い画面では「お知らせ一覧」を見出しの下へ */
	.t-news__more { margin-top: 0; }
}
/* 当社の強み:1024px 未満は1列(番号を左、見出しと本文を右に) */
@media (max-width: 1023px) {
	.t-strength__list { grid-template-columns: 1fr; gap: 36px; }
	.t-strength__item { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 4vw, 40px); }
	.t-strength__num { grid-row: span 2; font-size: clamp(48px, 9vw, 72px); }
	.t-strength__name { margin-top: 0; }
}
@media (max-width: 767px) {
	.t-hero { padding-bottom: 28px; }
	/* スマートフォンでも「インターネットの力で、/企業の価値を高める。」の2行(句の途中で改行しない)。1行目が幅に収まる最大サイズ */
	.t-hero__ttl { font-size: min(64px, 100cqi / 11.3); line-height: 1.24; }
	.t-hero::before { background: linear-gradient(0deg, rgba(2, 28, 110, .85) 0%, rgba(2, 40, 140, .58) 55%, rgba(4, 60, 170, .18) 100%); }
	.t-hero__pager { top: auto; bottom: calc(100% - var(--header-h) - 40px); }
	.t-hero__slide img { object-position: var(--pos-sp, var(--pos, 50% 50%)); }
	.t-hero__foot { flex-direction: column; align-items: stretch; }
	.t-hero__btns { flex-direction: column; }
	.t-hero__btns .c-btn { width: 100%; }
	.t-intro__collage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
	.t-intro__pic { aspect-ratio: 3 / 4 !important; border-radius: 14px !important; }
	.t-intro__statement br { display: none; }
	.t-intro__key { display: block; }
	.t-intro__btn .c-btn { width: 100%; }
	.t-band { transform: rotate(-3deg) scale(1.08); }
	.t-service__grid { grid-template-columns: 1fr; }

	.t-news__item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "date arrow" "ttl arrow";
		gap: 8px 12px;
		padding: 20px 4px;
	}
	.t-news__date { grid-area: date; }
	.t-news__ttl { grid-area: ttl; font-size: 15px; }
	.t-news__item .c-arrow { grid-area: arrow; }
	.t-recruit .c-btn { width: 100%; }
	.t-recruit__jobs li { font-size: 13px; padding: 5px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.t-service__bg { transform: none !important; }
	.t-band__track, .t-hero__slide img, .t-hero__pager span::after, .t-lines__img { animation: none !important; }
	.t-lines__sweep { display: none; }
	.t-hero__slide { animation: none !important; }
	.t-hero__slide:not(:first-child), .t-hero__pager { display: none; }
	.t-svc__fig img, .t-intro__pic img, .t-recruit__fig img { opacity: 1 !important; transform: none !important; }
	.js .t-intro__pic figure[data-reveal], .js .t-intro__pic figure[data-reveal] img { opacity: 1; transform: none; }
}

/* ごく狭い画面(〜374px) */
@media (max-width: 374px) {
	.t-strength__item { display: block; }
	.t-recruit__txt { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   スマートフォンの読みやすさ(レビュー2回目の反映)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* 強み:番号と見出しを上段、本文は全幅 */
	.t-strength__item { grid-template-columns: auto 1fr; grid-template-areas: "num name" "txt txt"; align-items: center; row-gap: 14px; }
	.t-strength__num { grid-area: num; grid-row: auto; font-size: 44px; }
	.t-strength__name { grid-area: name; }
	.t-strength__txt { grid-area: txt; margin-top: 0; }
	/* アプリ:名前と説明を先に、画面はその下(少し小さめに) */
	/* 主力2件も、アイコン+名前・OSを横に並べて上部を詰める(画面の大きさは維持) */
	/* アプリ:画面幅いっぱいの明るい面にして、事業カードの区間と切り替える(外枠の二重囲いをなくす) */
	.t-service { padding-bottom: 0; }
	/* 事業カード:本文の行間を少し詰め、本文まわりの余白を整理 */
	.t-svc__txt { line-height: 1.85; }
	.t-svc__tags { margin-top: 16px; }
	.t-svc__more { padding-top: 20px; }
	/* 本文:字間を少し詰めて1行の文字数を増やす */
	.t-svc__txt, .t-intro__txt, .t-strength__txt, .t-recruit__txt, .t-app__txt { letter-spacing: .03em; }
	.t-svc__body { padding-inline: 22px; }
	/* FVの光の線を控えめに */
	.t-lines { opacity: .7; }
}