/* =========================================================
   KOLORZ COMMON HEADER
========================================================= */

.k-header {

	position:
		absolute;

	z-index:
		20;

	top:
		0;

	left:
		0;

	width:
		100%;

	display:
		flex;

	align-items:
		flex-start;

	justify-content:
		space-between;

	padding:

		clamp(24px, 3vw, 48px)

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

}

/* =========================
   LOGO
========================= */

.k-logo {

	display: flex;
	align-items: center;

	white-space: nowrap;

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

	font-size: clamp(
		18px,
		1.75vw,
		30px
	);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.035em;

	color: #f4f4f1;

	text-decoration: none;
}


.k-logo__crystal-k {

	position: relative;
    display: inline-block;
    margin-right: 0.01em;
    font-weight: 900;
    color: #ffffff;
    font-family: "Times New Roman", "Noto Serif JP", serif;
    letter-spacing: .28em;
    font-size: 20px;

}


.k-logo__word {

	color:#ffffff;

	font-weight:
		700;
	font-family: "Times New Roman", "Noto Serif JP", serif;
    letter-spacing: .28em;
    font-size: 15px;
}




.k-logo__main {

	font-size:
		clamp(25px, 2.2vw, 39px);

	font-weight:
		700;

	letter-spacing:
		-.06em;

}


.k-accent-dot {

	color:
		#fff;

}


/* =========================
   MENU BUTTON
========================= */

.k-menu-button {

	position:
		relative;

	display:
		flex;

	align-items:
		center;

	gap:
		17px;

	padding:
		5px;

	margin:
		0;

	border:
		0;

	background:
		transparent;

	color:
		var(--k-white);

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

	letter-spacing:
		.16em;

	cursor:
		pointer;

}


.k-menu-button i {

	position:
		relative;

	display:
		block;

	width:
		28px;

	height:
		28px;

}


.k-menu-button i::before,
.k-menu-button i::after {

	content:
		"";

	position:
		absolute;

	background:
		var(--k-white);

	transition:
		transform .35s ease;

}


.k-menu-button i::before {

	width:
		100%;

	height:
		1px;

	top:
		50%;

	left:
		0;

}


.k-menu-button i::after {

	height:
		100%;

	width:
		1px;

	top:
		0;

	left:
		50%;

}


.k-menu-button:hover i::before {

	transform:
		rotate(90deg);

}


.k-menu-button:hover {

	color:
		var(--k-accent);

}

/* ========================================
   TABLET
======================================== */
@media
(max-width: 1024px)
and
(min-width: 768px) {


	.k-logo__word{

		font-size: 24px;

	}

	.k-logo__crystal-k{

		font-size: 24px;

	}

}

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

@media
(max-width: 767px) {

	.k-header{
		align-items: center;
	}

	.k-menu-button span{

		display:none;

	}
	.close{

		display:none;

	}

	.k-logo__word{

		font-size: 12px;

	}

	.k-logo__crystal-k{

		font-size: 16px;

	}

}