:root {
	--text: #111;
	--muted: #eeeeee;
	--maxw: 1200px;
	/* PC最大106px、狭い幅で自動縮小（最小58px） */
	--size: clamp(58px, 9.1vw, 106px);
	/* ギャップも相対スケール（最小12px〜最大36px） */
	--gap: clamp(12px, 2.8vw, 36px);
}

/* html,
body {
	height: 100%
} */

/* Hero */
.hero {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 30px;
}

.hero-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: .1fr 1fr;
	align-items: center;
}

#hero .lead {
	position: relative;
	left: 10%;
	z-index: 1;
}


/* ----- hero -----*/
#hero .lead {
	order: 1;
}

#hero .field {
	order: 2;
}

.field {
	display: grid;
	grid-template-columns: repeat(4, var(--size));
	grid-template-rows: repeat(3, var(--size));
	gap: var(--gap);
	perspective: 900px;
	opacity: .95;
	transform: translateY(-6px);
	position: relative;
	right: 10%;
}

.tile {
	width: var(--size);
	height: var(--size);
	position: relative;
}

.clover3d {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	will-change: transform;
}

.face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	backface-visibility: hidden;
}

.front svg *,
.back svg * {
	fill: var(--muted);
}

.back {
	transform: rotateY(180deg);
}

.back svg * {
	fill: #232323;
}

@keyframes flipY {
	0% {
		transform: rotateY(0) scale(1)
	}

	45% {
		transform: rotateY(180deg) scale(1.02)
	}

	100% {
		transform: rotateY(0) scale(1)
	}
}

.is-flipping .clover3d {
	animation: flipY 900ms cubic-bezier(.45, .05, .25, .95) 1 both;
}


@media (max-width:860px) {
	:root {
		--size: clamp(75px, 12vw, 106px);
	}

	.hero-inner {
		display: block;
	}

	#hero .lead {
		left: auto;
		margin-top: 40px;
	}

	.field {
		transform: none;
		margin-left: 0;
		grid-template-columns: repeat(4, 1fr) !important;
		right: auto;
	}

	.tile {
		margin: 0 auto;
	}
}


@media (max-width:480px) {
	:root {
		--size: clamp(58px, 9.1vw, 106px);
		--gap: clamp(20px, 2.8vw, 36px);
	}

	#hero {
		align-items: normal;
	}

	.field {
		max-width: 240px;
		margin: 0 auto;
		grid-template-columns: repeat(3, 1fr) !important;
		grid-template-rows: repeat(4, var(--size)) !important;
	}
}