@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;
}

.bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background-color: #000;
}
.bg__sky,
.bg__buildings,
.bg__gradient,
.bg__stage,
.bg__noise {
	display: block;
	position: absolute;
	top: -50lvh;
	left: 0;
	width: 100%;
	aspect-ratio: 1/2;
	transition: top 6s ease-out 3s;
	will-change: top;
}
@media screen and (orientation:portrait) {
	.bg__sky,
	.bg__buildings,
	.bg__gradient,
	.bg__stage,
	.bg__noise {
		top: -25lvh;
	}
}
.bg__sky {
	top: 0;
	aspect-ratio: 1;
	background: linear-gradient(180deg,rgba(168, 218, 220, 1) 0%, rgba(241, 250, 236, 1) 100%);
}
.bg__buildings {
	will-change: top, transform;
}
.bg__noise {
	top: 0;
}
@media screen and (orientation:portrait) {
	.bg__noise  {
		top: 0;
	}
}
.bg__stage {
	top: 0;
	transition: top 6s ease-out 3s;
	will-change: top, transform;
}
.bg__stage__wrapper {
	display: block;
	position: absolute;
	top: calc(60lvh - 4.5em);
	left: calc(50% - 3em);
	width: 6em;
	transform: scale(2);
	transition: top 6s ease-out 3s, transform 6s ease-out 3s;
	will-change: top, transform;
}
.bg__stage__person {
	clip-path: inset(100% 0 0 0);
	transition: clip-path .8s ease-out, top 6s ease-out 3s;
	will-change: clip-path, top;
}
.bg__stage__andpad {
	position: absolute;
	inset: -25% auto auto 75%;
	width: 3em;
	transform: scale(0) rotate(-180deg);
	transition: transform .4s ease-out 1.5s, top 6s ease-out 3s;
	will-change: clip-path, top;
}
.bg__noise {
	background-image: url("./images/bgi_noise_01.gif");
	background-size: 160px 160px;
	mix-blend-mode: multiply;
}
.is-loaded .bg__buildings--pri {
	top: 6lvh;
}
@media screen and (orientation:portrait) {
	.is-loaded .bg__buildings--pri {
		top: 16lvh;
	}
}
.is-loaded .bg__buildings--sec {
	top: 18lvh;
}
@media screen and (orientation:portrait) {
	.is-loaded .bg__buildings--sec {
		top: 28lvh;
	}
}
.is-loaded .bg__buildings--ter {
	top: 30lvh;
}
@media screen and (orientation:portrait) {
	.is-loaded .bg__buildings--ter {
		top: 40lvh;
	}
}
.is-loaded .bg__gradient {
	top: 42lvh;
	background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
@media screen and (orientation:portrait) {
	.is-loaded .bg__gradient {
		top: 52lvh;
	}
}
.is-loaded .bg__stage__wrapper {
	top: calc(80lvh - 4.5em);
	transform: scale(1);
}
@media screen and (orientation:portrait) {
	.is-loaded .bg__stage__wrapper {
		top: calc(75lvh - 4.5em);
	}
}
.is-loaded .bg__stage__person {
	clip-path: inset(0 0 0 0);
}
.is-loaded .bg__stage__andpad {
	transform: scale(1) rotate(0);
}

/* 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;
	gap: 4em;
	padding: 15em 10%;
}
@media screen 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(60% - 2.4em) auto auto 76.5%;
	width: 12em;
	white-space: nowrap;
	font-family: "Roboto", sans-serif;
	font-size: .875em;
	line-height: 1.6;
	color: #fff;
}
@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%;
	color: #fff;
}
.page-header__title__pri {
	margin: 0;
	font-family: "モトヤstアポロ Std W4", serif;
	font-family: "FOT-モード明朝Bラージ Pro R", serif;
	font-size: 2.5em;
	letter-spacing: .1em;
}
@media screen and (max-width:768px) and (orientation:portrait) {
	.page-header__title__pri {
		letter-spacing: .05em;
	}
}
.page-header__title__sec {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: .875em;
	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 2s ease-out 6s;
}
.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 {
	margin-bottom: 0;
	font-size: 1.5em;
	letter-spacing: .1em;
	line-height: 2.4;
	color: #fff;
}
@media screen and (max-width:768px) and (orientation:portrait) {
	.page-header__read {
		letter-spacing: 0em;
	}
}

/* page-section */
.page-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5em;
	position: relative;
	height: 100lvh;
	padding: 0 5%;
	text-align: center;
}
.page-section#introduction,
.page-section#mission {
	background-color: #fff;
}
.page-section#appeal,
.page-section#message {
	background-color: #f1faee;
}
.page-section#service {
	background-color: #a8dadc;
}
.page-section#interview{
	background-color: #1d3557;
	color: #fff;
}
.page-section#history {
	background-color: #457b9d;
	color: #fff;
}

/* unique common parts */
.design-b .footer-navi a {
	color: #fff;
}
.design-b .counter-text {
	color: #fff;
}
.design-b .copyright {
	color: #fff;
}
.design-b .site-footer {
	background-color: #e63946;
}
.design-b .scroll-assist__title {
	color: #808080;
}
.design-b .scroll-assist__line::before {
	background-color: #808080;
}