@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import "normalize.css";
@import "initialize.css";
@import "base.css";
@import "icon.css";
@import "elements.css";

/* is-locked */
html.is-locked,
body.is-locked {
	overflow: hidden !important;
	height: 100vh !important;
	position: fixed !important;
	width: 100% !important;
	touch-action: none !important;
}

/* floatingCuboids */
#floatingCuboids {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100lvh;
}

/* page-header */
.page-header {
	display: flex;
	flex-direction: column;
}
.page-header__wrapper {
	position: relative;
	width: 100%;
	min-height: 100lvh;
}
.page-header__wrapper--sec {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 4em;
	padding: 15em 15%;
}
@media screen and (max-width:768px) and (orientation:portrait) {
	.page-header__wrapper--sec {
		padding: 15em 5%;
	}
}
.page-header__caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: absolute;
	inset: calc(40% - 2.4em) auto auto 76.5%;
	width: 12em;
	white-space: nowrap;
	font-family: "Roboto", sans-serif;
	font-size: .875em;
	line-height: 1.6;
}
@media screen and (max-width:768px) and (orientation:portrait) {
	.page-header__caption {
		inset: calc(20% - 2.4em) auto auto 64%
	}
}
.page-header__title {
	display: flex;
	flex-direction: column;
	position: absolute;
	gap: 1.5em;
	inset: auto auto 7.5% 5%;
}
.page-header__title__pri {
	margin: 0;
	font-size: 4em;
}
.page-header__title__sec {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	letter-spacing: .2em;
}
.page-header__title__pri,
.page-header__title__sec {
	clip-path: inset(0 100% 0 0);
	transform: translateX(-5vw) skewX(-10deg);
	transition: all 1s ease-out;
}
.is-loaded .page-header__title__pri,
.is-loaded .page-header__title__sec {
	clip-path: inset(0 0 0 0);
	transform: translateX(0) skewX(-10deg);
}
.page-header__read {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0;
	font-size: 1.75em;
	letter-spacing: .1em;
	line-height: 2.4;
}
@media screen and (max-width:768px) and (orientation:portrait) {
	.page-header__read {
		font-size: 1.5em;
		letter-spacing: 0em;
	}
}

/* page-section */
.page-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5em;
	position: relative;
	height: 200lvh;
	padding: 0 5%;
	text-align: center;
}
.page-section#introduction,
.page-section#appeal,
.page-section#mission {
	background-color: rgba(255,255,255,.9);
	backdrop-filter: blur(.2em);
}
.page-section#service {
	margin-bottom: 100lvh;
	background-color: transparent;
	color: #fff;
}
.page-section#interview,
.page-section#history {
	background-color: #fff;
}
.page-section#message {
	background-color: rgba(61,59,59,.9);
	backdrop-filter: blur(.2em);
	color: #fff;
}