@charset "UTF-8";

/* ---------------------------------------------------------------------------------------------------- */
/* KeyVisual */

#kv {
	position: relative;
	height: calc(100svh - 78px);
}
#kv .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#kv h1 {
	position: relative;
	width: 140px;
	height: 160px;
	z-index: 10;
}

#kv .container {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	pointer-events: none;
}
#kv .controller {
	position: absolute;
	width: 100%;
}
#kv .controller button {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	right: 20px;
	top: 20px;
	border-radius: 16px;
	border-width: 0;
	background: rgba(16,0,88,0.5);
	cursor: pointer;
	pointer-events: auto;
}
#kv .controller button .play {
	position: absolute;
	display: block;
	width: 7px;
	height: 8px;
	left: calc(50% - 3px);
	top: calc(50% - 4px);
	background: url(../img/icon_play.svg) 0 0 no-repeat;
	background-size: 100% auto;
	transition: all 300ms ease-out;
}
#kv .controller button .pause {
	position: absolute;
	display: block;
	width: 6px;
	height: 8px;
	left: calc(50% - 3px);
	top: calc(50% - 4px);
	background: url(../img/icon_pause.svg) 0 0 no-repeat;
	background-size: 100% auto;
	transition: all 300ms ease-out;
}

#kv .controller button[data-status="playing"] .play,
#kv .controller button[data-status="paused"] .pause {
	visibility: hidden;
	transform: scale(0);
}


#kv .video-player {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#kv .video-player video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#kv .motion-logo {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(16,0,88,0.6);
}
#kv .motion-logo .motion-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: scale(2);
}
#kv h1 {
	position: absolute;
	visibility: hidden;
}


#kv .controller {
	visibility: hidden;
}
body.ready #kv .controller {
	visibility: visible;
}





#intro,
#spirit,
#design,
#uniform,
#mascot
{
	position: relative;
}
#_intro::before,
#_spirit::before,
#_design::before,
#_uniform::before,
#_mascot::before
{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	left: 0;
	top: 0;
	background: rgba(255,255,255,0.5);
}


#content {
	position: relative;
	width: 100%;
}
#content .bg {
	position: sticky;
	width: 100%;
	height: 100lvh;
	left: 0;
	top: 0;
	margin-bottom: -100lvh;
}
.gradation1,
.gradation2 {
	position: absolute;
	display: block;
	width: 2052px;
	height: 2392px;
	left: calc(50% - 1026px);
	top: 0;
	z-index: -1;
	opacity: 0.8;
}
.gradation1 {
	transform: translateX(-800px);
	background: url(../img/gradation1_sp.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}
.gradation2 {
	transform: translateX(-200px);
	background: url(../img/gradation2_sp.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}


/*
#content.passed .gradation1 {
	opacity: 0.7;
	transform: translateX(-175px);
}
#content.passed .gradation2 {
	opacity: 0.7;
	transform: translateX(175px);
}
*/





#intro {
}
#intro .lead {
	position: relative;
	padding: 40px;
}
#intro .lead p {
	font-size: 1.0rem;
	line-height: 1.888;
	letter-spacing: 0.1em;
	text-align: center;
}
#intro .image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 1;
}
#intro .image img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
#intro .text {
	position: relative;
	padding: 40px 20px;
	text-align: center;
}
#intro .text p {
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	line-height: 2.15;
}
#intro .text p + p {
	margin-top: 2.5rem;
}





/*
#intro .lead p {
	transition: all 500ms ease-out;
	opacity: 0;
	transform: translateY(50px);
}
#intro .lead.passed p {
	opacity: 1;
	transform: translateY(0px);
}


#intro .image {
	opacity: 0;
	transition: all 500ms ease-out;
}
#intro .image.passed {
	opacity: 1;
}



#intro .text p {
	transition: all 500ms ease-out;
	opacity: 0;
	transform: translateY(50px);
}
#intro .text.passed p {
	opacity: 1;
	transform: translateY(0px);
}
#intro .text p:nth-child(2) {
	transition-delay: 200ms;
}
*/









#spirit {
}
#spirit .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 60px 0;
}
#spirit .message {
	margin: 40px 0 0;
	font-size: 1.875rem;
	letter-spacing: 0.1em;
}
#spirit .message span {
	display: inline-block;
}
#spirit .text {
	margin: 40px 0 0;
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	line-height: 2.0;
	text-align: center;
}



/*
#spirit h2 span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-20px) 0%, calc(0px) 0%, calc(-20px) 100%, calc(-40px) 100%);

}
#spirit.passed h2 span {
	clip-path: polygon(calc(-20px) 0%, calc(100% + 20px) 0%, calc(100%) 100%, calc(-40px) 100%);
}

#spirit .message span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
	clip-path: polygon(calc(-30px) 0%, calc(0px) 0%, calc(-30px) 100%, calc(-60px) 100%);

}
#spirit.passed .message span {
	clip-path: polygon(calc(-30px) 0%, calc(100% + 30px) 0%, calc(100%) 100%, calc(-60px) 100%);
}

#spirit .text {
	opacity: 0;
	transform: translateY(20px);
	transition: all 500ms ease-out 1000ms;
}
#spirit.passed .text {
	opacity: 1;
	transform: translateY(0px);
}
*/




#design {
}
#design .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 60px 0 150px;
}
#design .motion {
	height: 76vw;
	margin: 40px auto 0;
	overflow: hidden;
}

#design .motion-concept {
	position: absolute;
	width: 136vw;
	height: 76vw;
	left: calc(50% - 68vw);
	top: 40px;
}

#design .text {
	box-sizing: border-box;
	position: absolute;
	width: 50vw;
	height: 76vw;
	left: 50%;
	top: 40px;
	padding-left: 20px;
}
#design .star {
	position: absolute;
	top: 32vw;
}
#design .stick {
	position: absolute;
	top: 24.5vw;
}

#design .text .extra {
	display: inline-block;
	visibility: hidden;
}
#design dl {
	color: #100058;
}
#design dt {
	font-size: 1.75rem;
	letter-spacing: 0.1em;
}
#design dd {
	margin: 10px 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
}







/*
#design h2 span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-20px) 0%, calc(0px) 0%, calc(-20px) 100%, calc(-40px) 100%);

}
#design.passed h2 span {
	clip-path: polygon(calc(-20px) 0%, calc(100% + 20px) 0%, calc(100%) 100%, calc(-40px) 100%);
}

#design .motion {
	opacity: 0;
	transition: all 10ms ease-out 500ms;
}
#design.passed .motion {
	opacity: 1;
}


#design .text .extra {
	transition: clip-path 500ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-40px) 0%, calc(0px) 0%, calc(-40px) 100%, calc(-80px) 100%);
}
#design[data-status="start"] .text .star .extra {
	clip-path: polygon(calc(-40px) 0%, calc(100% + 40px) 0%, calc(100%) 100%, calc(-80px) 100%);
}
#design[data-status="next"] .text .star .extra {
	transition-duration: 300ms;
	clip-path: polygon(calc(-40px) 0%, calc(0px) 0%, calc(-40px) 100%, calc(-80px) 100%);
}

#design[data-status="next"] .text .stick .extra {
	transition-delay: 300ms;
	clip-path: polygon(calc(-40px) 0%, calc(100% + 40px) 0%, calc(100%) 100%, calc(-80px) 100%);
}
#design[data-status="complete"] .text .star .extra {
	transition-duration: 300ms;
	clip-path: polygon(calc(-40px) 0%, calc(0px) 0%, calc(-40px) 100%, calc(-80px) 100%);
}
*/








#uniform {
}
#uniform .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 60px 0 120px;
}
#uniform .motion {
	position: relative;
	width: 100%;
	margin: 32px 0 0;
}


#uniform .box {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 220px;
	padding: 20px 0 0;
	background: rgba(255,255,255,0.5);
}
#uniform .box + .box {
	margin: 20px 0 0;
}
#uniform .box-inner {
	display: inline-flex;
}
#uniform .box ul {
	display: flex;
	justify-content: center;
	padding-left: 10px;
}
#uniform .box li {
	position: relative;
	z-index: 10;
	margin-left: 25px;
}
#uniform .box li + li {
	margin-left: 35px;
}
#uniform .box img {
	width: auto;
	height: 200px;
}

#uniform .box h3 {
	position: absolute;
	z-index: 10;
	margin: 10px 0 0 12px;
	font-size: 1rem;
	color: #100058;
	transform: rotate(270deg) translate(-100%, -100%);
	transform-origin: left top;
}
#uniform .box .label {
	position: absolute;
	width: 190px;
	margin: 0 0 0 -5px;
	font-size: 2.0rem;
	color: #100058;
	text-align: right;
	white-space: nowrap;
	transform: rotate(270deg) translate(0, -50%);
	transform-origin: left top;
}
#uniform .box .photo {
	position: relative;
	display: block;
	z-index: 10;
}



/*
#uniform h2 span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-20px) 0%, calc(0px) 0%, calc(-20px) 100%, calc(-40px) 100%);

}
#uniform.passed h2 span {
	clip-path: polygon(calc(-20px) 0%, calc(100% + 20px) 0%, calc(100%) 100%, calc(-40px) 100%);
}


#uniform .motion .box {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-120px) 0%, calc(0px) 0%, calc(-120px) 100%, calc(-240px) 100%);
}
#uniform .motion .box:nth-child(2) {
	transition-delay: 500ms;
}
#uniform[data-status="start"] .motion .box {
	clip-path: polygon(calc(-120px) 0%, calc(100% + 120px) 0%, calc(100%) 100%, calc(-240px) 100%);
}
*/





#mascot {
}
#mascot .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 60px 0 150px;
}
#mascot .motion {
	width: 100%;
	margin: 32px 0 0;
}
#mascot .box {
}
#mascot .box .image {
	position: relative;
	width: 60vw;
	height: 60vw;
	margin: 0 auto;
}
#mascot .box .text {
	position: relative;
	text-align: center;
	margin: 25px 0 0;
}
#mascot .box .image span {
	box-sizing: border-box;
	position: absolute;
	display: block;
	width: 60vw;
	left: 0;
	top: 0;
	opacity: 0;
}
#mascot .box .text > div {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	text-align: center;
}

#mascot .box .extra {
	display: inline-block;
	visibility: hidden;
}
#mascot dl {
	color: #100058;
}
#mascot dt {
	font-size: 1.75rem;
	letter-spacing: 0.1em;
}
#mascot dd {
	margin: 10px 0 0;
	font-size: 0.875rem
}
#mascot .character dt {
	font-size: 1.5rem;
	letter-spacing: 0.05em;
}
#mascot .character dd {
	margin-left: 4px;
}




/*
#mascot h2 span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-20px) 0%, calc(0px) 0%, calc(-20px) 100%, calc(-40px) 100%);

}
#mascot.passed h2 span {
	clip-path: polygon(calc(-20px) 0%, calc(100% + 20px) 0%, calc(100%) 100%, calc(-40px) 100%);
}


#mascot .image .face,
#mascot .image .ear {
	opacity: 0;
	transition: all 300ms ease-out 300ms;
}

#mascot[data-status*="face"] .image .face {
	opacity: 1;
}
#mascot[data-status*="face"] .image .ear {
	opacity: 0.25;
}

#mascot[data-status*="ear"] .image .face {
	opacity: 0.25;
	transition-delay: 600ms;
}
#mascot[data-status*="ear"] .image .ear {
	opacity: 1;
	transition-delay: 600ms;
}

#mascot[data-status*="character"] .image .face,
#mascot[data-status*="character"] .image .ear {
	transition-delay: 300ms;
}


#mascot .text .face .extra {
	transition: clip-path 750ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-40px) 0%, calc(0px) 0%, calc(-40px) 100%, calc(-80px) 100%);
}

#mascot .text .ear  .extra {
	transition: clip-path 750ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-50px) 0%, calc(0px) 0%, calc(-50px) 100%, calc(-100px) 100%);
}

#mascot[data-status="face"] .text .face .extra {
	clip-path: polygon(calc(-40px) 0%, calc(100% + 40px) 0%, calc(100%) 100%, calc(-80px) 100%);
}

#mascot[data-status*="ear"] .text .face .extra {
	transition-duration: 500ms;
}
#mascot[data-status*="ear"] .text .ear .extra  {
	transition-delay: 300ms;
	clip-path: polygon(calc(-50px) 0%, calc(100% + 50px) 0%, calc(100%) 100%, calc(-100px) 100%);
}

#mascot[data-status="character"] .text .ear .extra {
	transition-duration: 500ms;
	transition-delay: 0ms;
}



#mascot .image .character {
	opacity: 0;
	transition: all 500ms ease-out 500ms;
}
#mascot[data-status="character"] .image .character {
	opacity: 1;
}

#mascot .text .character .extra {
	transition: clip-path 750ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
	clip-path: polygon(calc(-40px) 0%, calc(0px) 0%, calc(-40px) 100%, calc(-80px) 100%);
}
#mascot[data-status="character"] .text .character .extra {
	clip-path: polygon(calc(-40px) 0%, calc(100% + 50px) 0%, calc(100%) 100%, calc(-80px) 100%);
}
*/




h2 {
	font-size: 1.25rem;
	letter-spacing: 0.1em;
}
h2 span {
	display: inline-block;
}





/*
#design {
	height: 150lvh;
}
#design .inner {
	position: sticky;
	top: 100px;
}

#uniform {
	height: 150lvh;
}
#uniform .inner {
	position: sticky;
	top: 100px;
}

#mascot {
	height: 150lvh;
}
#mascot .inner {
	position: sticky;
	top: 100px;
}
*/




#kv .scroll-down {
	position: absolute;
	width: 16px;
	right: 15px;
	bottom: 0;
}
#kv .scroll-down span {
	box-sizing: border-box;
	display: block;
	width: 100px;
	height: 16px;
	overflow: hidden;
	padding: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-align: left;
	color: #fff;
	border: none;
	background: transparent;
	transform: rotate(90deg) translate(calc(-100% + 25px), -100%);
	transform-origin: left top;
}
#kv .scroll-down span::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 1px;
	background: #fff;
	
	transform: scaleX(0);
	transform-origin: left top;
	animation: scroll_line 1600ms infinite ease;
}

@keyframes scroll_line {
	0% {
		transform: scaleX(0);
	}
	25% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(1);
	}
	75% {
		transform: scale(1) translateX(100%);
	}
	100% {
		transform: scale(1) translateX(100%);
	}
}


body.paused #kv .scroll-down span::after {
	animation: none;
	transform: scaleX(1);
}




#scroll-top {
	visibility: hidden;
	opacity: 0;
	transition: all 300ms ease-out;
}
body.scrolled #scroll-top {
	visibility: visible;
	opacity: 1;
}









#spirit {
	min-height: calc(100dvh - 100px);
}
#spirit .inner {
	height: 100%;
	padding: 60px 0 0;
	justify-content: center;
}


#design {
	min-height: calc(100dvh - 100px);
}
#design .inner {
	height: 100%;
	padding: 60px 0 0;
	justify-content: center;
}
#design .inner .motion {
	position: relative;
	overflow: visible;
	width: 100%;
}
#design .text,
#design .motion-concept {
	top: -10vw;
}


#uniform {
	min-height: calc(100dvh - 100px);
}
#uniform .inner {
	height: 100%;
	padding: 60px 0 0;
	justify-content: center;
}
#uniform .motion {
	margin: 20px 0 0;
}


#mascot {
	min-height: calc(100dvh - 100px);
}
#mascot .inner {
	height: 100%;
	padding: 60px 0 0;
	justify-content: center;
}
#mascot .text {
	min-height: 80px;
}


.scrollbar {
	position: absolute;
	width: 3px;
	height: 80px;
	right: 8px;
	top: calc(50% - 40px + 40px);
	background: rgba(255,255,255,0.4);
}
.scrollbar span {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,0.5);
	transform-origin: left top;
	transform: scaleY(0);
}





h2 span,
#spirit .message span,
#spirit .text,
#uniform .motion
{
	visibility: hidden;
}





/*
#spirit .inner {
	min-height: calc(100svh - 50px);
	padding-bottom: 0px;
	justify-content: center;
}
#design .inner {
	min-height: calc(100svh - 50px);
	padding-bottom: 0px;
	justify-content: center;
}
#uniform .inner {
	min-height: calc(100svh - 50px);
	padding-bottom: 0px;
	justify-content: center;
}
#mascot .inner {
	min-height: calc(100svh - 50px);
	padding-bottom: 0px;
	justify-content: center;
}





#spirit {
	height: 100vh;
}
#spirit .inner {
	position: sticky;
	top: 50px;
}

#design {
	height: 500vh;
}
#design .inner {
	position: sticky;
	top: 50px;
}

#uniform {
	height: 200vh;
}
#uniform .inner {
	position: sticky;
	top: 50px;
}

#mascot {
	height: 300vh;
}
#mascot .inner {
	position: sticky;
	top: 50px;
}


.scrollbar span {
	transform: scaleY(0);
}

#spirit.compact,
#design.compact,
#uniform.compact,
#mascot.compact {
	height: 100vh;
}

#spirit.compact .scrollbar,
#design.compact .scrollbar,
#uniform.compact .scrollbar,
#mascot.compact .scrollbar {
	opacity: 0;
	visibility: hidden;
	transition: all 800ms ease-out;
}
*/