@font-face {
  font-family: "Utah Condensed Bold";
	src:
		url("../fonts/UtahCondensedBold.woff2") format("woff2"),
		url("../fonts/UtahCondensedBold.woff") format("woff");
	font-display: swap;
}

@font-face{
	font-family: "BB Condensed";
	src: url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.eot");
	src: url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.eot?#iefix")format("embedded-opentype"),
			url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.woff")format("woff"),
			url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.woff2")format("woff2"),
			url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.ttf")format("truetype"),
			url("../fonts/857c87f9e1434e30f777d7aaa316e8b8.svg#BB Condensed")format("svg");
	font-weight:normal;
	font-style:normal;
	font-display:swap;
}

/* ======================================== */
/* 変数
/* ======================================== */

:root {
	/* Color */
	--color-black: #212121;
	--color-darkGray: #424242;
	--color-gray: #bdbdbd;
	--color-lightGray: #f5f5f5;
	--color-white: #fff;

	/* Fonts */
	--font-openSans: "Open Sans", serif;
	--font-oswald: "Oswald", sans-serif;
	--font-bb: "Utah Condensed Bold", sans-serif;
	--font-bb: "BB Condensed", sans-serif;

	/* Width */
	--max-siteWidth: 2000px;

	/* CSS Easing */
	--ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);

	/* Box Shadows */
	--box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

/* ======================================== */
/* common
/* ======================================== */



html {
	font-size: 10px;
	/* scroll-behavior: smooth; */
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;
	z-index: 1;
	font-size: 1.4rem;
	line-height: 2;
	letter-spacing: .1em;
	background: var(--color-white);
	overflow-x: hidden;
	overflow-y: auto;
}

body.is-fixed {
	overflow: hidden;
}

* {
	font-weight: 300;
}

img {
	width: auto;
	height: auto;
}

.wrap {
	position: relative;
	overflow: scroll;
	z-index: 2;
	translate: none;
	rotate: none;
	scale: none;
	transform-origin: 0% 0%;
	height: 100%;
	transform: translate(0, 0);
}

.section {
	padding-top: 16rem;
	padding-bottom: 16rem;
	
	@media (max-width: 960px) {
		padding-top: 10rem;
		padding-bottom: 10rem;
	}

	@media (max-width: 428px) {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}
}

.inner {
	max-width: var(--max-siteWidth);
	margin: 0 auto;
	padding: 0 8vw;
}


.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 9999;
}

.loader__top,
.loader__bottom {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50vh;
	background: var(--color-black);
	z-index: -1;
}

.loader__top {
	top: 0;
}

.loader__bottom {
	top: 50%;
}

.loader__line {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-gray);
	transform: scaleX(0);
	transform-origin: left center;
}

.loader__text {
	position: relative;
	font-size: 1rem;
	color: var(--color-white);
	opacity: 0;
	font-family: "Open Sans", sans-serif;
	font-family: var(--font-bb);
	letter-spacing: .2em;
	z-index: 1;
}

.pageLoader {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	z-index: 9999;
	background: var(--color-black);
}


/* ======================================== */
/* c-heading
/* ======================================== */

.c-heading {
	font-size: 8rem;
	font-family: var(--font-bb);
	font-weight: 400;
	letter-spacing: .1em;
	margin-bottom: 1em;
	line-height: 1;
	
	@media (max-width: 960px) {
		font-size: 5.2rem;
	}

	@media (max-width: 428px) {
		font-size: 4rem;
	}
}

.c-heading-small {
	font-size: 5rem;
	font-family: var(--font-bb);
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.6;
	
	@media (max-width: 960px) {
		font-size: 3.2rem;
	}

	@media (max-width: 428px) {
		font-size: 2.4rem;
	}
}


/* ======================================== */
/* c-button
/* ======================================== */
.c-buttonWrap {
	display: flex;
	gap: 2rem;
	justify-content: center;
}

.c-button {
	display: inline-flex;
	justify-content: center;
	position: relative;
	min-width: 32rem;
	font-size: 1.6rem;
	letter-spacing: .4em;
	padding: 2em;
	line-height: 1;
	white-space: nowrap;
	font-family: var(--font-bb);
	color: var(--color-white);
	cursor: pointer;
	
	@media (max-width: 960px) {
	}

	@media (max-width: 428px) {
		width: 100%;
		min-width: 0;
	}

	&::before, &::after {
		position: absolute;
		content: "";
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: .1rem solid var(--color-white);
		transition: transform .2s linear;
		transform: translate(0, 0);
	}

	&:hover {
		&::before {
			transform: translate(-.4em, -.4em);
		}
		&::after {
			transform: translate(.4em, .4em);
		}
	}
}

/* ======================================== */
/* header
/* ======================================== */

.header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	color: var(--color-black);

	.header__inner {
		display: flex;
		height: 10rem;
		padding: 0 4rem;
		align-items: center;
		justify-content: space-between;
		align-items: center;
	
		@media (max-width: 960px) {
			padding: 0 3.2rem;
		}
	
		@media (max-width: 428px) {
			height: 8rem;
			padding: 0 2.4rem;
		}
	}

	.header__logo {
		display: block;
		font-family: var(--font-bb);
		font-size: 2rem;
		font-weight: 600;
		letter-spacing: .1em;
	}
}

body.is-fixed .header {
	color: var(--color-white);
}






/*========================================
gnav triggar
========================================*/

.gnavBtn {
	position: fixed;
	right: 4rem;
	top: auto;
	bottom: auto;
	width: 4.8rem;
	height: 1.7rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;

	@media (max-width: 428px) {
		width: 3.2rem;
		right: 2.4rem;
	}

	& span {
		display: block;
		position: relative;
		width: 100%;
		height: .2rem;
		background-color: transparent;
		transition: background-color .5s, transform .5s;
	

		&::before, &::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--color-black);
			will-change: transform;
			mix-blend-mode: exclusion;
		}

		&::before {
			transform-origin: right center;
		}

		&::after {
			transform: scaleX(0);
			transform-origin: left center;
		}

		&:nth-of-type(2) {
			margin: 1rem 0 0;
		}
	}

	&:hover {
		& span {
			&::before { transform: scaleX(0); }

			&:nth-of-type(1)::before { transition: transform .3s 0s; }
			&:nth-of-type(2)::before { transition: transform .3s .1s; }
			&:nth-of-type(3)::before { transition: transform .3s .2s; }

			&::after { transform: scaleX(1); }
			&:nth-of-type(1)::after { transition: transform .3s .3s; }
			&:nth-of-type(2)::after { transition: transform .3s .4s; }
			&:nth-of-type(3)::after { transition: transform .3s .5s; }
		}
	}

	&.is-active {
			& span {
				&::before,
				&::after {
					background-color: var(--color-white) !important;
				}

				&:nth-of-type(1) {
					margin-top: 0;
					transform: rotate(160deg);
				}
			
				&:nth-of-type(2) {
					margin-top: -.15rem;
					transform: rotate(-160deg);
				}
			}
	}
}


/*========================================
gnav
========================================*/

.gnav {
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
	background: var(--color-black);
	opacity: 0;
	visibility: hidden;

	.gnav__list {
		display: inline-flex;
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		justify-content: center;
		gap: 2rem;
		transition: all .3s .6s;

		& li {
			.text-wrap {
				position: relative;
				display: flex;
				align-items: center;
			}

			.after,
			.before {
				& span {
					line-height: 1.1;
					transition: color .3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
				}
			}

			.after{
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;

				& span {
					transform: translateY(100%);
				}
			}

			.before{
				display: flex;
				align-items: center;
			}
			
			& a {
				position: relative;
				font-size: 8rem;
				color: var(--color-white);
				font-family: var(--font-bb);
				font-weight: 400;
				overflow: hidden;
				display: flex;

				@media (max-width: 428px) {
					font-size: 4rem;
				}
			}
		}
	}
}


/* ======================================== */
/* contact
/* ======================================== */

.c-contact {
	padding: 10rem 0;

	.c-contact__inner {
		text-align: center;
	}

	.c-contact__button {
		display: inline-flex;
		flex-flow: column;
		align-items: center;

		&:hover {
			.c-contact__circle {
				transform: scale(1.2);
			}
		}
	}

	.c-contact__circle {
		position: relative;
		width: 16rem;
		height: 16rem;
		font-size: 1rem;
		transition: all .3s var(--ease-in-sine);
	
		@media (max-width: 960px) {
			width: 12rem;
			height: 12rem;
		}
	
		@media (max-width: 428px) {
			width: 8rem;
			height: 8rem;
		}
	}

	.c-contact__circle-text {
		overflow: visible;
		animation: 30s infinite text-rotate linear;
	
		& path {
			fill: none;
		}

		& text {
			fill: var(--color-black);
			font-family: var(--font-bb);
			font-weight: 100;
			letter-spacing: .48em;
		}
	}

	.c-contact__circle-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 4rem;
		color: var(--color-black);
		font-weight: 100;
	
		@media (max-width: 960px) {
			font-size: 3rem;
		}
	
		@media (max-width: 428px) {
			font-size: 2rem;
		}
	}
	
	.c-contact__heading {
		color: var(--color-black);
		font-size: min(28.8rem, 15vw);
		margin-top: -.3em;
		margin-bottom: 0;
		letter-spacing: 0;
	}
}

@keyframes text-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/* ======================================== */
/* footer
/* ======================================== */

.footer {
	text-align: center;
	padding: 10rem 0;

	.copyright {
		font-family: var(--font-openSans);
		font-size: 1rem;
	}
}