@charset "UTF-8";

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

#kv {
	position: relative;
	height: calc(100vh - 100px);
	min-height: 400px;
}
#kv .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#kv h1 {
	position: relative;
	width: 282px;
	height: 322px;
	z-index: 10;
}

#kv .container {
	position: absolute;
	width: 1200px;
	left: calc(50% - 600px);
	top: 0;
	z-index: 100;
	pointer-events: none;
}
#kv .controller {
	position: absolute;
	width: 100%;
}
#kv .controller button {
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	right: 0;
	top: 40px;
	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;
}
#kv .motion-logo .motion-inner {
	position: absolute;
	width: 100%;
	height: 100%;
}
#kv h1 {
	position: absolute;
	visibility: hidden;
}


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

#kv .overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(16,0,88,0.6);
	mix-blend-mode: multiply;
}




#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%;
	min-height: 100vh;
}
#content .bg {
	position: sticky;
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: -1;
	margin-bottom: -100vh;
	pointer-events: none;
}
.gradation1,
.gradation2 {
	position: absolute;
	display: block;
	width: 2070px;
	height: 2392px;
	left: calc(50% - 1035px);
	top: 0;
	z-index: -1;
	opacity: 0.8;
}
.gradation1 {
	transform: translateX(-1200px);
	background: url(../img/gradation1.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}
.gradation2 {
	transform: translateX(100px);
	background: url(../img/gradation2.svg?2) 0 0 no-repeat;
	background-size: 100% auto;
}

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





#intro {
}
#intro .lead {
	position: relative;
	padding: 140px 0;
}
#intro .lead p {
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}
#intro .image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1440 / 550;
}
#intro .image img {
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
#intro .text {
	position: relative;
	padding: 60px 0;
	text-align: center;
}
#intro .text p {
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 2;
}
#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 {
	margin-top: 50px;
}
#spirit .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 772px;
	padding: 100px 0;
}
#spirit .message {
	margin: 180px 0 0;
	font-size: 4.375rem;
	letter-spacing: 0.1em;
}
#spirit .message span {
	display: inline-block;
}
#spirit .text {
	margin: 36px 0 0;
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	line-height: 2.5;
	text-align: center;
}





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

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

#spirit .message span {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#spirit.passed .message span {
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 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;
	min-height: 772px;
	padding: 100px 0;
}
#design .motion {
	position: relative;
	width: 1200px;
	height: 320px;
	margin: 45px auto 0;
}

@media screen and (min-height:720px) {
	#design .motion {
		margin-top: 75px;
	}
}


#design .motion-concept {
	position: absolute;
	width: 982px;
	height: 552px;
	left: calc((1200px - 982px) / 2);
	top: calc((320px - 552px) / 2);
}

#design .text {
	box-sizing: border-box;
	position: absolute;
	width: 600px;
	height: 320px;
	left: 50%;
	top: 0;
	padding-left: 60px;
}
#design .star {
	position: absolute;
	top: 141px;
}
#design .stick {
	position: absolute;
	top: 101px;
}

#design .text .extra {
	display: inline-block;
}
#design dl {
	color: #100058;
}
#design dt {
	font-size: 2.5rem;
	letter-spacing: 0.1em;
}
#design dd {
	margin: 10px 0 0;
	font-size: 1.25rem
}








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

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



#design .text .extra {
	transition: clip-path 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
#design .text .star .extra {
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#design .text .stick .extra {
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}


#design[data-status="scene1"] .text .star .extra {
	transition-delay: 600ms;
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 100%);
}


#design[data-status="scene2"] .text .star .extra {
	transition-duration: 300ms;
	transition-delay: 0ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#design[data-status="scene2"] .text .stick .extra {
	transition-delay: 300ms;
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 100%);
}


#design[data-status="scene3"] .text .star .extra {
	transition-duration: 300ms;
	transition-delay: 0ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}












#uniform {
}
#uniform .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 772px;
	padding: 100px 0;
}
#uniform .motion {
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 350px;
	margin: 50px 0 0;
	padding: 20px 0 0;
	background: rgba(255,255,255,0.5);
}


#uniform .box {
	position: relative;
}
#uniform .box + .box {
	margin-left: 50px;
}
#uniform .box ul {
	position: relative;
}
#uniform .box img {
	width: auto;
	height: 330px;
}
#uniform .box ul {
	display: flex;
}
#uniform .box li {
	position: relative;
	padding: 0 20px;
}

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




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

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



#uniform .motion {
	transition: clip-path 1000ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-200px) 0%, calc(0px) 0%, calc(-200px) 100%, calc(-400px) 100%);
}
#uniform.passed .motion {
	transition-delay: 600ms;
	clip-path: polygon(calc(-200px) 0%, calc(100% + 200px) 0%, calc(100%) 100%, calc(-400px) 100%);
}



@media screen and (min-height:720px) {
	#uniform .motion {
		height: 378px;
	}
	#uniform .box img {
		height: 358px;
	}
	#uniform .box .label {
		width: 346px;
		margin-left: 2px;
		font-size: 3.5rem;
	}
	#uniform .box h3 {
		margin-top: 12px;
		font-size: 1.485rem;
	}
	
	#uniform .box:nth-child(1) h3 {
		margin-left: -8px;
	}
	#uniform .box:nth-child(2) h3 {
		margin-left: -12px;
	}
	#uniform .box:nth-child(2) li:nth-child(1) .label {
		margin-left: -2px;
	}
	
}





#mascot {
}
#mascot .inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 772px;
	padding: 100px 0 150px;
}
#mascot .motion {
	width: 100%;
	height: 330px;
	margin: 50px 0 0;
}

@media screen and (min-height:720px) {
	#mascot .motion {
		margin-top: 80px;
	}
}

#mascot .box {
	position: absolute;
	display: flex;
	width: 1200px;
	left: calc(50% - 600px);
}
#mascot .box .image {
	position: relative;
	width: 600px;
}
#mascot .box .text {
	position: relative;
	width: 600px;
}
#mascot .box .image span {
	position: absolute;
	display: block;
	width: 340px;
	height: 330px;
	right: 20px;
	top: 0;
	opacity: 0;
}
#mascot .box .text > div {
	box-sizing: border-box;
	position: absolute;
	display: flex;
	align-items: center;
	width: 100%;
	height: 330px;
	left: 0;
	top: 0;
	padding: 0 40px;
}

#mascot .box .extra {
	display: inline-block;
}
#mascot dl {
	color: #100058;
}
#mascot dt {
	font-size: 2.5rem;
	letter-spacing: 0.1em;
}
#mascot dd {
	margin: 10px 0 0;
	font-size: 1.25rem
}
#mascot .character dt {
	font-size: 2.5rem;
	letter-spacing: 0.05em;
}
#mascot .character dd {
	margin-left: 2px;
	margin-top: 15px;
}




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

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



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


#mascot .text .face .extra,
#mascot .text .ear  .extra {
	transition: clip-path 750ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#mascot .text .character .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.passed .image .face {
	transition-delay: 600ms;
	opacity: 1;
}
#mascot.passed .image .ear {
	transition-delay: 600ms;
	opacity: 0.25;
}
#mascot.passed .text .face .extra {
	transition-delay: 600ms;
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 100%);
}



#mascot[data-status*="scene2"] .image .face {
	transition-delay: 0ms;
	opacity: 0.25;
}
#mascot[data-status*="scene2"] .image .ear {
	transition-delay: 0ms;
	opacity: 1;
}
#mascot[data-status*="scene2"] .text .face .extra {
	transition-delay: 0ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#mascot[data-status*="scene2"] .text .ear .extra  {
	transition-delay: 300ms;
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 100%);
}



#mascot[data-status*="scene3"] .image .face {
	transition-delay: 0ms;
	opacity: 0;
}
#mascot[data-status*="scene3"] .image .ear {
	transition-delay: 0ms;
	opacity: 0;
}
#mascot[data-status*="scene3"] .text .face .extra {
	transition-delay: 0ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}
#mascot[data-status*="scene3"] .text .ear .extra {
	transition-delay: 0ms;
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}

#mascot[data-status="scene3"] .image .character {
	transition-delay: 300ms;
	opacity: 1;
}
#mascot[data-status="scene3"] .text .character .extra {
	transition-delay: 300ms;
	clip-path: polygon(calc(-50px) 0%, calc(100% + 50px) 0%, calc(100%) 100%, calc(-100px) 100%);
}





/*
#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,
#mascot .text .ear  .extra {
	transition: clip-path 750ms cubic-bezier(0.77, 0, 0.175, 1);
	clip-path: polygon(calc(-60px) 0%, calc(0px) 0%, calc(-60px) 100%, calc(-120px) 100%);
}

#mascot.passed .text .face .extra {
	clip-path: polygon(calc(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 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(-60px) 0%, calc(100% + 60px) 0%, calc(100%) 100%, calc(-120px) 100%);
}

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




#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(-50px) 0%, calc(0px) 0%, calc(-50px) 100%, calc(-100px) 100%);
}
#mascot[data-status="character"] .text .character .extra {
	clip-path: polygon(calc(-50px) 0%, calc(100% + 50px) 0%, calc(100%) 100%, calc(-100px) 100%);
}
*/






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





/*
#design {
	height: 200vh;
}
#design .inner {
	position: sticky;
	top: 50px;
}

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

#mascot {
	height: 200vh;
}
#mascot .inner {
	position: sticky;
	top: 50px;
}
*/





#kv .scroll-down {
	position: absolute;
	width: 40px;
	right: 30px;
	bottom: 0;
}
#kv .scroll-down span {
	box-sizing: border-box;
	display: block;
	width: 120px;
	height: 25px;
	overflow: hidden;
	padding: 0;
	font-size: 1.125rem;
	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,
#design,
#uniform,
#mascot
{
	min-height: calc(100vh - 50px);
}


.scrollbar {
	position: absolute;
	width: 4px;
	height: 200px;
	right: 40px;
	top: calc(50% - 100px - 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);
}





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





#spirit {
	height: 200vh;
}
#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;
}