/*====================
三角スタック（tri-stack）
====================*/
.tri-stack {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;

	/* カラーパレット（RGB） */
	--tri-stack-35566b: 53, 86, 107;
	--tri-stack-92c8ea: 146, 200, 234;
	--tri-stack-d1edff: 209, 237, 255;
	--tri-stack-16346d: 22, 52, 109;
	--tri-stack-b7d7eb: 183, 215, 235;
	--tri-stack-9ad7ff: 154, 215, 255;
	--tri-stack-aspect: 560 / 380;
}

/* 土木部など：右向き三角 */
.tri-stack--default {
	--tri-stack-clip: polygon(0 0, 100% 60%, 0 80%);
}

/* 砂利部・不動産など：左向き三角（画像マスク準拠） */
.tri-stack--left {
	--tri-stack-clip: polygon(100% 0, 0 60%, 100% 80%);
}

/* 建築部：三角形PNG + 装飾三角のみ（四角 clip-path レイヤーなし） */
.tri-stack--construction {
	--tri-stack-aspect: 560 / 380;
}

/* 企業情報：com_1.png 形状（左下頂点・右上頂点・右下頂点） */
.tri-stack--company {
	--tri-stack-clip: polygon(0 88%, 74% 0, 100% 94%);
	--tri-stack-aspect: 720 / 480;
	max-width: 640px;
}

.tri-stack__inner {
	position: relative;
	width: 100%;
	aspect-ratio: var(--tri-stack-aspect);
}

.tri-stack__tri,
.tri-stack__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 55%;
	will-change: transform, opacity;
}

.tri-stack__tri {
	z-index: 0;
	pointer-events: none;
}

.tri-stack__tri--small {
	z-index: 1;
}

.tri-stack__tri--large {
	z-index: 2;
}

.tri-stack__tri-shape {
	display: block;
	width: 100%;
	height: 100%;
	clip-path: var(--tri-stack-clip);
}

.tri-stack__tri--small .tri-stack__tri-shape {
	background: rgba(var(--tri-stack-b7d7eb), 0.52);
}

.tri-stack__tri--large .tri-stack__tri-shape {
	background: rgba(var(--tri-stack-16346d), 0.88);
}

.tri-stack__photo {
	z-index: 3;
}

.tri-stack:not(.is-tri-stack-ready) .tri-stack__tri,
.tri-stack:not(.is-tri-stack-ready) .tri-stack__photo,
.tri-stack:not(.is-tri-stack-ready) .tri-stack__shard {
	opacity: 0;
}

.tri-stack.is-tri-stack-ready .tri-stack__tri,
.tri-stack.is-tri-stack-ready .tri-stack__photo {
	opacity: 1;
}

.tri-stack__picture,
.tri-stack__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.tri-stack__shard {
	position: absolute;
	z-index: 4;
	display: block;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.tri-stack__shard--1 {
	top: 6%;
	right: 4%;
	width: 72px;
	height: 72px;
	background: rgba(var(--tri-stack-35566b), 0.42);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.tri-stack__shard--2 {
	top: 38%;
	right: 14%;
	width: 48px;
	height: 48px;
	background: rgba(var(--tri-stack-9ad7ff), 0.58);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tri-stack__shard--3 {
	bottom: 18%;
	left: 8%;
	width: 56px;
	height: 56px;
	background: rgba(var(--tri-stack-92c8ea), 0.5);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tri-stack__shard--4 {
	top: 12%;
	left: 42%;
	width: 40px;
	height: 40px;
	background: rgba(var(--tri-stack-d1edff), 0.36);
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

@media screen and (max-width: 600px) {
	.tri-stack {
		max-width: 100%;
	}

	.tri-stack__inner {
		--tri-stack-aspect: 560 / 320;
	}

	.tri-stack__shard--1 {
		top: 4%;
		right: 8%;
		width: 56px;
		height: 56px;
	}

	.tri-stack__shard--2 {
		top: 32%;
		right: 2%;
		width: 40px;
		height: 40px;
	}

	.tri-stack__shard--3 {
		bottom: 12%;
		left: 4%;
		width: 44px;
		height: 44px;
	}

	.tri-stack__shard--4 {
		top: 8%;
		left: 18%;
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tri-stack:not(.is-tri-stack-ready) .tri-stack__tri,
	.tri-stack:not(.is-tri-stack-ready) .tri-stack__photo,
	.tri-stack:not(.is-tri-stack-ready) .tri-stack__shard {
		opacity: 1;
	}
}