/*
=========================================================
KOLORZ HOME
=========================================================
*/


/* ========================================
   VARIABLES
======================================== */

:root {

	--k-black:
		#09090a;

	--k-dark:
		#111113;

	--k-dark-2:
		#171719;

	--k-white:
		#f5f5f2;

	--k-gray:
		#88888d;

	--k-gray-light:
		#b9b9bd;

	--k-line:
		rgba(255,255,255,.075);

	--k-accent:
		#c8ff2e;

	--k-accent-rgb:
		200,255,46;

	--mx:
		70%;

	--my:
		40%;

}



/* ========================================
   PAGE RESET
======================================== */

html {

	width: 100%;
	height: 100%;

}


body.kolorz-home-page {

	width: 100%;
	min-height: 100%;

	margin: 0 !important;
	padding: 0 !important;

	background:
		var(--k-black);

	color:
		var(--k-white);

	overflow-x: hidden;
	overflow-y: auto;

	font-family:
		"Helvetica Neue",
		Arial,
		sans-serif;

	-webkit-font-smoothing:
		antialiased;

	text-rendering:
		optimizeLegibility;

}


body.kolorz-home-page * {

	box-sizing:
		border-box;

}


body.kolorz-home-page button {

	font: inherit;

}


body.kolorz-home-page a {

	color:
		inherit;

}



/* ========================================
   MAIN APP
======================================== */

#kolorz-app {

	position:
		relative;

	isolation:
		isolate;

	width:
		100%;

	min-height:
		100svh;

	overflow-x:
		hidden;

	overflow-y:
		visible;

	background:

		linear-gradient(
			135deg,
			#080809 0%,
			#101012 55%,
			#09090a 100%
		);

}

/* Grid */

#kolorz-app::before {

	content:
		"";

	position:
		absolute;

	z-index:
		0;

	inset:
		0;

	background-image:

		linear-gradient(
			rgba(255,90,160,0.10) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(255,90,160,0.10) 1px,
			transparent 1px
		);

	background-size:

		clamp(80px, 10vw, 170px)

		clamp(80px, 10vw, 170px);

	pointer-events:
		none;

}


/* Dark vignette */

#kolorz-app::after {

	content:
		"";

	position:
		absolute;

	z-index:
		1;

	inset:
		0;

	background:

		radial-gradient(
			circle at center,
			transparent 20%,
			rgba(0,0,0,.45) 100%
		);

	pointer-events:
		none;

}


/* ========================================
   HERO
======================================== */

.k-hero {

	position:
		relative;

	z-index:
		5;

	width:
		100%;

	height:
		100dvh;

	min-height:
		100svh;

	overflow:
		hidden;

}



/* ========================================
   SIDE COPY
======================================== */

.k-side-copy {

	position:
		absolute;

	z-index:
		4;

	top:
		21%;

	left:
		clamp(25px, 4vw, 70px);

	margin:
		0;

	padding-top:
		18px;

	font-size:
		clamp(8px, .65vw, 11px);

	line-height:
		1.6;

	letter-spacing:
		.25em;

	color:
		var(--k-gray-light);

	text-transform:
		uppercase;

}


.k-side-copy::before {

	content:
		"";

	position:
		absolute;

	top:
		0;

	left:
		0;

	width:
		23px;

	height:
		1px;

	background:
		rgba(255,255,255,.65);

}



/* ========================================
   MAIN COPY
======================================== */

.k-copy {

	position:
		absolute;

	z-index:
		7;

	top:
		32%;

	left:
		clamp(25px, 4vw, 70px);

	width:
		min(55vw, 980px);

}


.k-number {

	position:
		absolute;

	top:
		-45px;

	right:
		4%;

	color:
		var(--k-gray-light);

	font-size:
		clamp(9px, .8vw, 13px);

	letter-spacing:
		.15em;

}


.k-copy h1 {

	margin:
		0;

	padding:
		0;

	font-size:
		clamp(64px, 7vw, 138px);

	line-height:
		.82;

	letter-spacing:
		-.07em;

	text-transform:
		uppercase;

}


.k-title-line {

	display:
		block;

	white-space:
		nowrap;

}


.k-title-line--strong {

	font-weight:
		700;

	color:
		var(--k-white);

}


.k-title-line--light {

	font-weight:
		300;

	color:
		#d8d8d8;

}


.k-title-line--accent {

	font-weight:
		700;

	color: #ff00a2;

}


.k-category {

	margin:
		clamp(20px, 2vw, 33px)
		0 0;

	font-size:
		clamp(11px, 1.2vw, 20px);

	font-weight:
		400;

	letter-spacing:
		.25em;

	color:
		#dedede;

	white-space:
		nowrap;

}







/* ========================================
   VIEW WORK
======================================== */

.k-view-work {

	position:
		absolute;

	z-index:
		12;

	left:
		clamp(25px, 4vw, 70px);

	bottom:
		clamp(85px, 12vh, 150px);

	display:
		flex;

	align-items:
		center;

	gap:
		16px;

	border:
		0;

	padding:
		0;

	background:
		transparent;

	color:
		var(--k-white);

	cursor:
		pointer;

}


.k-view-work__circle {

	position:
		relative;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		clamp(60px, 6vw, 100px);

	height:
		clamp(60px, 6vw, 100px);

	border:
		1px solid
		rgba(255,255,255,.55);

	border-radius:
		50%;

	transition:

		border-color .35s ease,

		background .35s ease,

		transform .35s ease;

}


.k-view-work__circle i {

	width:
		4px;

	height:
		4px;

	border-radius:
		50%;

	background:
		var(--k-white);

}


.k-view-work__text {

	font-size:
		clamp(8px, .7vw, 12px);

	line-height:
		1.4;

	letter-spacing:
		.17em;

	text-align:
		left;

}


.k-view-work__arrow {

	font-size:
		27px;

	font-weight:
		200;

	transition:
		transform .35s ease;

}


.k-view-work:hover
.k-view-work__circle {

	border-color:
		var(--k-accent);

	background:
		rgba(
			var(--k-accent-rgb),
			.08
		);

	transform:
		scale(1.08);

}


.k-view-work:hover
.k-view-work__arrow {

	transform:
		translateX(8px);

}



/* ========================================
   FOOTER
======================================== */

.k-footer {

	position:
		relative;

	z-index:
		20;

	left:
		auto;

	bottom:
		auto;

	width:
		100%;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	gap:
		clamp(28px, 5vw, 85px);

	padding:
		20px
		clamp(25px, 4vw, 70px);

	border-top:
		1px solid
		var(--k-line);

	background:
		#09090a;

	font-size:
		clamp(7px, .65vw, 11px);

	letter-spacing:
		.23em;

	color:
		var(--k-gray-light);

}


.k-online {

	display:
		flex;

	align-items:
		center;

	gap:
		9px;

}


.k-online i {

	display:
		block;

	width:
		5px;

	height:
		5px;

	border-radius:
		50%;

	background:
		var(--k-accent);

	box-shadow:
		0 0 10px
		var(--k-accent);

}



/* ========================================
   MENU OVERLAY
======================================== */

.k-overlay {

	position:
		fixed;

	z-index:
		1000;

	inset:
		0;

	display:
		flex;

	flex-direction:
		column;

	width:
		100%;

	height:
		100dvh;

	overflow:
		hidden;

	background:
		#0a0a0b;

	color:
		var(--k-white);

	opacity:
		0;

	visibility:
		hidden;

	pointer-events:
		none;

}


.k-overlay.is-open {

	opacity:
		1;

	visibility:
		visible;

	pointer-events:
		auto;

}


.k-overlay::before {

	content:
		"";

	position:
		absolute;

	z-index:
		0;

	inset:
		0;

	background-image:

		linear-gradient(
			rgba(255,90,160,.10) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(255,90,160,.10) 1px,
			transparent 1px
		);

	background-size:
		120px 120px;

}


.k-overlay__header {

	position:
		relative;

	z-index:
		20;

	display:
		flex;

	align-items:
		flex-start;

	justify-content:
		space-between;

	padding:

		clamp(24px, 3vw, 48px)

		clamp(25px, 4vw, 70px);

}


.k-overlay__brand {

	display:
		flex;

	flex-direction:
		column;

	font-size:
		clamp(24px, 2vw, 36px);

	font-weight:
		700;

	letter-spacing:
		-.05em;

}


.k-overlay__brand > span {

	color:
		var(--k-accent);

}


.k-overlay__brand small {

	margin-top:
		8px;

	font-size:
		8px;

	font-weight:
		400;

	letter-spacing:
		.35em;

	color:
		var(--k-gray-light);

}


.k-close {

	display:
		flex;

	align-items:
		center;

	gap:
		17px;

	padding:
		0;

	border:
		0;

	background:
		transparent;

	color:
		var(--k-white);

	font-size:
		12px;

	letter-spacing:
		.15em;

	cursor:
		pointer;

}


.k-close span {

	font-size:
		27px;

	font-weight:
		200;

}


.k-close:hover {

	color:
		var(--k-accent);

}



/* MENU BODY */

.k-overlay__body {

	position:
		relative;

	z-index:
		10;

	flex:
		1;

	display:
		flex;

	align-items:
		center;

	padding:

		0

		clamp(25px, 4vw, 70px);

}



/* ========================================
   MENU ITEMS
======================================== */

.k-nav {

	position:
		relative;

	z-index:
		10;

	width:
		68%;

}


.k-nav a {

	position:
		relative;

	display:
		grid;

	grid-template-columns:
		50px 1fr auto;

	align-items:
		center;

	gap:
		clamp(12px, 2vw, 35px);

	width:
		100%;

	padding:
		clamp(9px, 1.1vh, 16px)
		0;

	border-bottom:
		1px solid
		rgba(255,255,255,.08);

	text-decoration:
		none;

	color:
		#f0f0ef;

	transition:

		color .25s ease,

		padding-left .4s
		cubic-bezier(
			.16,
			1,
			.3,
			1
		);

}


.k-nav a:first-child {

	border-top:
		1px solid
		rgba(255,255,255,.08);

}


.k-nav a small {

	font-size:
		clamp(8px, .65vw, 11px);

	letter-spacing:
		.18em;

	color:
		var(--k-gray);

}


.k-nav a > span {

	font-size:
		clamp(30px, 4.2vw, 78px);

	font-weight:
		400;

	line-height:
		.95;

	letter-spacing:
		-.055em;

}


.k-nav a > i {

	font-style:
		normal;

	font-size:
		clamp(17px, 1.5vw, 27px);

	opacity:
		.45;

}


.k-nav a:hover,
.k-nav a:focus-visible {

	padding-left:
		20px;

	color:
		var(--k-accent);

	outline:
		none;

}


.k-nav a:hover small {

	color:
		var(--k-accent);

}



/* ========================================
   MENU IMAGE PREVIEW
======================================== */

.k-menu-preview {

	position:
		absolute;

	z-index:
		2;

	right:
		3%;

	top:
		50%;

	transform:
		translateY(-50%)
		scale(.96);

	width:
		42vw;

	max-width:
		740px;

	height:
		72vh;

	max-height:
		800px;

	background-position:
		center;

	background-repeat:
		no-repeat;

	background-size:
		cover;

	opacity:
		0;

	filter:
		grayscale(100%);

	transition:

		opacity .4s ease,

		filter .55s ease,

		transform .55s
		cubic-bezier(
			.16,
			1,
			.3,
			1
		);

	pointer-events:
		none;

}


.k-menu-preview.is-visible {

	opacity:
		.37;

	filter:
		grayscale(0%);

	transform:
		translateY(-50%)
		scale(1);

}


.k-menu-preview__shade {

	position:
		absolute;

	inset:
		0;

	background:

		linear-gradient(
			90deg,
			#0a0a0b 0%,
			rgba(10,10,11,.45) 45%,
			rgba(10,10,11,.12)
			100%
		),

		linear-gradient(
			0deg,
			rgba(0,0,0,.65),
			transparent
		);

}



/* ========================================
   MENU FOOTER
======================================== */

.k-overlay__footer {

	position:
		relative;

	z-index:
		20;

	display:
		flex;

	justify-content:
		space-between;

	padding:

		20px

		clamp(25px, 4vw, 70px);

	border-top:
		1px solid
		var(--k-line);

	color:
		var(--k-gray);

	font-size:
		clamp(7px, .55vw, 10px);

	letter-spacing:
		.2em;

}



/* ========================================
   PAGE TRANSITION
======================================== */

.k-transition {

	position:
		fixed;

	z-index:
		9999;

	inset:
		0;

	background:
		var(--k-accent);

	transform:
		scaleX(0);

	transform-origin:
		left center;

	pointer-events:
		none;

}

/* =========================================================
   IMPACT
   PCのみ黄色＋180px
========================================================= */

@media (min-width: 1181px) {

	.k-title-line--accent {
		color: #ff00a2;
		font-size: 12VW;
	}

}

/* ========================================
   MOBILE
======================================== */

@media
(max-width: 767px) {


	.k-logo {

		font-size:
			clamp(
				13px,
				4vw,
				18px
			);

		white-space:
			nowrap;

	}

	.k-header {

		padding:

			22px

			20px;

	}


	.k-logo__main {

		font-size:
			28px;

	}


	.k-logo small {

		font-size:
			7px;

	}


	.k-menu-button {

		font-size:
			11px;

		gap:
			10px;

	}


	.k-menu-button i {

		width:
			25px;

		height:
			25px;

	}



	.k-side-copy {

		top:
			17%;

		left:
			20px;

		font-size:
			7px;

	}



	.k-copy {

		top:
			25%;

		left:
			20px;

		width:
			calc(100% - 40px);

	}


	.k-number {

		top:
			-35px;

		right:
			0;

	}


	.k-copy h1 {

		font-size:
			clamp(
				48px,
				14vw,
				72px
			);

		line-height:
			.84;

	}


	.k-category {

		margin-top:
			16px;

		font-size:
			clamp(
				8px,
				2.7vw,
				12px
			);

		letter-spacing:
			.15em;

	}



	.k-view-work {

		left:
			20px;

		bottom:
			76px;

	}


	.k-view-work__circle {

		width:
			57px;

		height:
			57px;

	}


	.k-view-work__text {

		font-size:
			7px;

	}



	.k-footer {

		justify-content:
			space-between;

		gap:
			10px;

		padding:
			16px 20px;

		font-size:
			6px;

		letter-spacing:
			.14em;

	}


	.k-footer__domain {

		display:
			none;

	}



	/* MENU */

	.k-overlay__header {

		padding:
			22px 20px;

	}


	.k-overlay__body {

		padding:
			0 20px;

	}


	.k-nav {

		width:
			100%;

	}


	.k-nav a {

		grid-template-columns:
			32px 1fr 18px;

		gap:
			7px;

		padding:
			13px 0;

	}


	.k-nav a > span {

		font-size:
			clamp(
				27px,
				9vw,
				44px
			);

	}


	.k-nav a:hover {

		padding-left:
			8px;

	}


	.k-menu-preview {

		z-index:
			0;

		right:
			0;

		top:
			0;

		transform:
			none;

		width:
			100%;

		height:
			100%;

		max-width:
			none;

		max-height:
			none;

		opacity:
			0;

	}


	.k-menu-preview.is-visible {

		opacity:
			.15;

		transform:
			none;

	}


	.k-menu-preview__shade {

		background:
			rgba(0,0,0,.65);

	}


	.k-overlay__footer {

		padding:
			16px 20px;

		font-size:
			6px;

	}


}



/* ========================================
   SHORT SCREENS
======================================== */

@media
(max-height: 700px)
and
(min-width: 768px) {


	.k-copy {

		top:
			29%;

	}


	.k-copy h1 {

		font-size:
			clamp(
				56px,
				6.1vw,
				105px
			);

	}


	.k-view-work {

		bottom:
			70px;

	}


}


/* =========================================================
   KOLORZ 3D PINK CRYSTAL SPADE
========================================================= */


/* ========================================
   SPADE WRAPPER
======================================== */

.k-spade {

	position:
		absolute;

	z-index:
		6;

	right:
		1%;

	top:
		5%;

	width:
		min(50vw, 800px);

	aspect-ratio:
		1 / 1;

	pointer-events:
		none;

}




/* ========================================
   THREE.JS CANVAS
======================================== */

.k-spade__canvas {

	position:
		absolute;

	z-index:
		4;

	inset:
		0;

	width:
		100%;

	height:
		100%;

	opacity:
		0;

	transform:
		scale(.97);

	transition:
		opacity .4s ease,
		transform .7s cubic-bezier(.16, 1, .3, 1);

	pointer-events:
		none;

}


.k-spade__canvas canvas {

	display:
		block;

	width:
		100% !important;

	height:
		100% !important;

	background:
		transparent;

}


.k-spade.is-3d-ready
.k-spade__canvas {

	opacity:
		1;

	transform:
		scale(1);

}



/* ========================================
   FALLBACK SPADE
======================================== */

.k-spade__fallback {

	position:
		absolute;

	z-index:
		3;

	inset:
		0;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			300px,
			40vw,
			680px
		);

	font-weight:
		700;

	line-height:
		1;

	color:
		rgba(
			255,
			28,
			143,
			.11
		);

	opacity:
		1;

	transform:
		scale(.86);

	transition:
		opacity .3s ease,
		transform .6s cubic-bezier(.16, 1, .3, 1);

	pointer-events:
		none;

	user-select:
		none;

}


.k-spade.is-3d-ready
.k-spade__fallback {

	opacity:
		0;

	transform:
		scale(.94);

}



/* ========================================
   DECORATIVE RING
======================================== */

.k-spade__ring {

	position:
		absolute;

	z-index:
		1;

	top:
		50%;

	left:
		50%;

	width:
		76%;

	height:
		76%;

	border:
		1px solid
		rgba(
			255,
			90,
			160,
			.20
		);

	border-radius:
		50%;

	transform:
		translate(
			-50%,
			-50%
		);

	pointer-events:
		none;

}


.k-spade__ring::before {

	content:
		"";

	position:
		absolute;

	left:
		-11%;

	top:
		50%;

	width:
		122%;

	height:
		1px;

	background:
		rgba(
			255,
			90,
			160,
			.014
		);

	transform:
		translateY(-50%);

}


.k-spade__ring::after {

	content:
		"";

	position:
		absolute;

	left:
		50%;

	top:
		-11%;

	width:
		1px;

	height:
		122%;

	background:
		rgba(
			255,
			90,
			160,
			.014
		);

	transform:
		translateX(-50%);

}



/* ========================================
   PINK GLOW
======================================== */

.k-spade__glow {

	position:
		absolute;

	z-index:
		0;

	left:
		50%;

	top:
		50%;

	width:
		58%;

	height:
		58%;

	border-radius:
		50%;

	background:

		radial-gradient(
			circle,

			rgba(
				255,
				20,
				147,
				.22
			)
			0%,

			rgba(
				255,
				0,
				115,
				.08
			)
			40%,

			transparent
			72%
		);

	filter:
		blur(34px);

	opacity:
		.82;

	transform:
		translate(
			-50%,
			-50%
		);

	pointer-events:
		none;

}


/* ========================================
   SPADE - TABLET
======================================== */

@media
(max-width: 1024px)
and
(min-width: 768px) {

	.k-spade {

		right:
			-2%;

		top:
			15%;

		width:
			56vw;

	}

}



/* ========================================
   SPADE - TABLET PORTRAIT
======================================== */

@media
(min-width: 768px)
and
(max-width: 1180px)
and
(orientation: portrait) {

	.k-spade {

		top:
			auto;

		bottom:
			clamp(
				20px,
				3vh,
				45px
			);

		left:
			0;

		right:
			0;

		margin-left:
			auto;

		margin-right:
			auto;

		width:
			min(
				75vw,
				720px
			);

	}

}



/* ========================================
   SPADE - MOBILE
======================================== */

@media
(max-width: 767px) {

	.k-spade {

		top:
			50%;

		left:
			0;

		right:
			0;

		margin-left:
			auto;

		margin-right:
			auto;

		width:
			84vw;

	}


	.k-spade__ring {

		width:
			74%;

		height:
			74%;

	}


	.k-spade__glow {

		width:
			58%;

		height:
			58%;

	}

}



/* ========================================
   SPADE - SMALL MOBILE
======================================== */

@media
(max-width: 430px) {

	.k-spade {

		top:
			49%;

		width:
			90vw;

	}

}



/* ========================================
   SPADE - LARGE DESKTOP
======================================== */

@media
(min-width: 1800px) {

	.k-spade {

		right:
			2%;

		width:
			min(
				52vw,
				980px
			);

	}

}

/* =========================================================
   HOME CONTENT
========================================================= */

.k-home-content {

	position:
		relative;

	z-index:
		5;

	width:
		100%;

	background:
		#09090a;

}


.k-home-section {

	position:
		relative;

	width:
		100%;

	min-height:
		100svh;

	padding:
		clamp(
			100px,
			10vw,
			190px
		)
		clamp(
			25px,
			4vw,
			70px
		);

	border-top:
		1px solid
		var(--k-line);

}


.k-home-section__inner {

	position:
		relative;

	max-width:
		1800px;

	margin:
		0 auto;

}


.k-home-section__number {

	margin:
		0 0 35px;

	color:
		var(--k-gray-light);

	font-size:
		clamp(
			9px,
			.8vw,
			13px
		);

	letter-spacing:
		.15em;

}


.k-home-section__title {

	margin:
		0;

	font-size:
		clamp(
			62px,
			9vw,
			170px
		);

	font-weight:
		700;

	line-height:
		.85;

	letter-spacing:
		-.065em;

	color:
		var(--k-white);

}


.k-home-section__lead {

	max-width:
		720px;

	margin:
		45px 0 0;

	font-size:
		clamp(
			12px,
			1vw,
			18px
		);

	line-height:
		1.8;

	letter-spacing:
		.12em;

	color:
		var(--k-gray-light);

}

/* ========================================
   DESKTOP HOVER
======================================== */

@media
(hover: hover)
and
(pointer: fine) {


	.k-object:hover
	.k-object__glow {

		opacity: 1;

		transform:

			translate(
				-50%,
				-50%
			)

			scale(1.35);

	}


	.k-object:hover
	.k-object__ring {

		border-color:
			rgba(
				200,
				255,
				46,
				.33
			);

	}


	.k-object:hover
	.k-object__fallback-image {

		filter:

			drop-shadow(
				0 0 25px
				rgba(
					200,
					255,
					46,
					.27
				)
			)

			drop-shadow(
				0 0 90px
				rgba(
					200,
					255,
					46,
					.14
				)
			);

	}

}



/* ========================================
   TABLET
======================================== */

@media
(max-width: 1024px)
and
(min-width: 768px) {


	.k-object {

		right: -2%;

		top: 15%;

		width: 54vw;

	}


	.k-logo__word{

		font-size: 24px;

	}

	.k-logo__crystal-k{

		font-size: 24px;

	}

}

/* =========================================================
   TABLET PORTRAIT
   タブレット縦：3D Kを下中央へ
========================================================= */

@media
	(min-width: 768px)
	and (max-width: 1180px)
	and (orientation: portrait) {

	.k-object {

		/* PC側の位置指定を解除 */
		top: auto;

		/* 下寄せ */
		bottom: clamp(
			20px,
			4vh,
			56px
		);

		/* 左右中央 */
		left: 0;
		right: 0;

		margin-left: auto;
		margin-right: auto;

		/* タブレット縦では大きめに */
		width: min(
			76vw,
			720px
		);

	}

	.k-side-copy{

		top: 10%;

	}

	.k-copy{

		top: 20%;

	}

}



/* ========================================
   MOBILE
======================================== */

@media
(max-width: 767px) {

	.k-menu-button span{

		display:none;

	}
	.close{

		display:none;

	}

	.k-object {

		top: 50%;

		right: 0;

		left: 0;

		/* 左右中央 */
		margin-left: auto;
		margin-right: auto;

		width: 82vw;

	}


	.k-object__ring {

		width: 74%;

		height: 74%;

	}


	.k-object__glow {

		width: 52%;

		height: 52%;

	}


	.k-object__fallback-image {

		inset: 8%;

		width: 84%;

		height: 84%;

	}



}



/* ========================================
   VERY SMALL MOBILE
======================================== */

@media (max-width: 430px) {

	.k-object {

		top: 49%;

		left: 0;
		right: 0;

		margin-left: auto;
		margin-right: auto;

		width: 88vw;

	}

}



/* ========================================
   SHORT DESKTOP SCREEN
======================================== */

@media
(max-height: 700px)
and
(min-width: 768px) {


	.k-object {

		top: 5%;

		width: min(49vw, 760px);

	}


}



/* ========================================
   LARGE DESKTOP
======================================== */

@media
(min-width: 1800px) {


	.k-object {

		right: 3%;

		width: min(52vw, 980px);

	}


}



/* ========================================
   REDUCED MOTION
======================================== */

/*
 * 動きを減らす設定のユーザーには
 * Three.jsを表示せずWebPを使用。
 *
 * JS側でも3D生成を停止する。
 */

@media
(prefers-reduced-motion: reduce) {

	.k-spade__canvas {

		display:
			none !important;

	}


	.k-spade__fallback {

		opacity:
			1 !important;

		transform:
			none !important;

	}


	.k-spade__glow,
	.k-spade__ring {

		transition:
			none !important;

	}

}



/* ========================================
   REDUCED MOTION
======================================== */

@media
(prefers-reduced-motion: reduce) {


	#kolorz-app *,
	#kolorz-app *::before,
	#kolorz-app *::after {

		animation-duration:
			.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			.01ms !important;

	}


}