@charset "UTF-8";


canvas
{
	z-index: 100;
}


/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV
{
	scroll-margin-top: var(--headerH);
	background: url("../img/index/KV_background.webp") no-repeat center/cover;
}
#KV > .inner
{
	width: 100%;	height: 780px;
	max-width: var(--pageW);

	padding: 230px var(--pageP) 0;
	margin: 0 auto;
	
}
#KV h1
{
	max-width: 650px;
	margin: 0 auto;
}

}
@media screen and (max-width: 767px)
{

/* #KV{	background: url("../img/index/KV_background_sp.webp") no-repeat center/cover;	} */
#KV > .inner
{
	height: 135vw;
	padding: 42vw 0 0;	
}
#KV h1{	max-width: 100%;	}

}


/* ================================================================================
lead
================================================================================ */
@media print, screen
{

#lead{	scroll-margin-top: var(--headerH);	}
#lead > .inner
{
	width: 100%;
	max-width: var(--pageW);

	padding: 110px var(--pageP) 0;
	margin: 0 auto;
}

#lead h2
{
	position: relative;

	margin: 0 0 50px;

	font-size: 60px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}
#lead h2::after
{
	content: "";
	display: block;
	width: 260px;	height: 7px;

	margin: 25px auto 0;
	background: var(--Grainbow);
}

#lead .text_1
{
	margin: 0 0 80px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#lead .buttonA
{
	width: 340px;	height: 100px;
	margin: 0 auto;
}

}
@media screen and (max-width: 767px)
{

#lead > .inner{	padding: 15vw var(--pageP);	}
#lead h2
{
	padding: 3vw 4vw;
	margin: 0 0 8vw;
	font-size: 8vw;
}
#lead h2::after
{
	width: 55vw;	height: 1.5vw;
	margin: 6vw auto 0;
}
#lead .text_1{	font-size: 4.5vw;	}
#lead .buttonA{	width: 70vw;	height:20vw;	}
}


/* ================================================================================
message
================================================================================ */
@media print, screen
{

#message
{
	scroll-margin-top: var(--headerH);
	overflow: hidden;
}
#message > .inner
{
	position: relative;
	width: 100%;
	max-width: var(--pageW);

	padding: 200px var(--pageP) 0;
	margin: 0 auto;
}

#message .titlteArea
{
	z-index: 10;
	position: absolute;
	top: 140px;	left: -160px;
	width: 800px;	height: 340px;
	padding: 105px 105px 0 260px;

	background-color: var(--Cgreen1);
}
#message .titlteArea picture
{
	width: 426px;
	margin: 0 0 5px;
}
#message .titlteArea h2
{
	color: white;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}
#message .textArea
{
	z-index: 1;
	position: relative;
	top: 0;	left: -80px;

	width: 1500px;	height: 800px;
	padding: 340px 0 0 80px;
	background-color: var(--Cblue0);
}

#message .textArea .image
{
	z-index: 2;
	position: absolute;
	top: 60px;	left: 300px;
	width: 1000rem;
}
#message .textArea picture
{
	width: 100%;	height: auto;
	margin: 0 0 10px;
}

#message .textArea .text_1
{
	z-index: 3;
	position: relative;
	margin: 0 0 30px;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.6;
}
#message .textArea .text_2
{
	z-index: 3;
	position: relative;
	margin: 0 0 30px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
#message .textArea .text_3
{
	z-index: 3;
	position: relative;
	margin: 0 0 50px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
#message .textArea .text_4
{
	padding: 0 70px 0 0;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	letter-spacing: 0.05em;
}
	#message .textArea .text_5
{
	z-index: 3;
	position: relative;
	margin: 20px 0 30px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

#message .textArea .buttonA
{
	z-index: 3;
	position: relative;
	width: 347px;	height: 94px;
}

}
@media screen and (max-width: 767px)
{

#message > .inner{	padding: 15vw var(--pageP) 0;	}
#message .titlteArea
{
	top: 10vw;	left: 0;
	width: 84vw;	height: 45vw;
	padding: 8vw 0 15vw 8vw;
}
#message .titlteArea picture
{
	width: 50vw;
	margin: 0 0 7vw;
}
#message .titlteArea h2
{
	font-size: 4.5vw;
	text-align: left;
	padding: 0 0 0 2vw;
}
#message .textArea
{
	top: 5vw;	left: -5vw;

	width: 100vw;	height: auto;
	padding: 115vw 8vw 15vw 8vw;
}
#message .textArea .image
{
	top: 20vw;	left: 8vw;
	width: 84vw;
}
#message .textArea picture
{
	height: 84vw;
}
#message .textArea .text_1
{
	margin: 0 0 4vw;
	font-size: 6.5vw;
}
#message .textArea .text_2
{
	margin: 0 0 5vw;
	font-size: 3.6vw;
}
#message .textArea .text_3
{
	margin: 0 0 10vw;
	font-size: 6.6vw;
}
#message .textArea .text_4
{
	padding: 0;
	font-size: 3.2vw;
}
#message .textArea .text_5
{
	padding: 0;
	font-size: 2.5vw;
}

#message .textArea .buttonA
{
	width: 70vw;	height: 20vw;
	margin: 0 auto;
}

}


/* ================================================================================
history
================================================================================ */
@media print, screen
{

#history
{
	padding: 150px 0 110px;
	scroll-margin-top: var(--headerH);
	background-color: white;
	overflow: hidden;
}

#history .titlteArea{	margin: 0 0 100px;	}
#history .titlteArea h2
{
	width: fit-content;
	padding: 10px 40px;
	margin: 0 auto 40px;

	background-color: var(--Cgray0);
	border-radius: 30px;

	color: white;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}
#history .titlteArea p
{
	color: var(--Cgray0);
	font-size: 60px;
	font-weight: 500;
	text-align: center;
}

#history .historyArea{	position: relative;	}
#history .thumbs picture{	position: absolute;	pointer-events: none;	}
#history .thumbs picture:nth-child(1){	top: 0;	left: calc(50% - 850px);	width: 310px;	opacity: 0.6;	}
#history .thumbs picture:nth-child(2){	top: 100px;	left: calc(50% - 270px);	width: 145px;	opacity: 0.9;	}
#history .thumbs picture:nth-child(3){	top: 30px;	right: calc(50% - 400px);	width: 220px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(4){	top: 85px;	right: calc(50% - 850px);	width: 280px;	opacity: 0.6;	}
#history .thumbs picture:nth-child(5){	top: 400px;	right: calc(50% - 800px);	width: 145px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(6){	top: 540px;	left: calc(50% - 220px);	width: 145px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(7){	top: 625px;	right: calc(50% - 620px);	width: 145px;	opacity: 0.6;	}
#history .thumbs picture:nth-child(8){	top: 710px;	left: calc(50% - 640px);	width: 145px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(9){	top: 900px;	right: calc(50% - 660px);	width: 145px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(10){	top: 910px;	left: calc(50% - 700px);	width: 150px;	opacity: 0.3;	}
#history .thumbs picture:nth-child(11){	top: 1080px;	right: calc(50% - 350px);	width: 145px;	opacity: 0.3;	}

#history .box
{
	transition: var(--T03);
	/* transition-property: background; */
}

#history .box_1, #history .box_3, #history .box_5{	background: linear-gradient(to right, transparent 0% 50%, var(--Cgray2) 50% 100%);	}
#history .box_2, #history .box_4{	background: linear-gradient(to right, var(--Cgray2) 0% 50%, transparent 50% 100%);	}
#history .box .inner
{
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	width: 100%;	height: 168px;
	max-width: var(--pageW);

	padding: 0 var(--pageP);
	margin: 0 auto;
}
#history .box_2 .inner, #history .box_4 .inner{	flex-direction: row-reverse;	}
#history .box_6 .inner{	height: 220px;	}


#history .box .textArea
{
	flex-shrink: 0;
	width: 265px;
}
#history .box .textArea p:first-child
{
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-shadow: var(--shadow1);
}
#history .box .textArea p:last-child
{
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-shadow: var(--shadow1);
}


#history .box .circle
{
	z-index: 5;
	position: relative;
	width: 100%;	max-width: 460px;
}
#history .box .circle::before
{
	content: "";
	display: block;
	width: 30px;	height: 30px;
	margin: 0 auto;

	background-color: var(--Cgray1);
	border: 2px solid white;
	border-radius: 50%;

	transition: var(--T03);
}
#history .box.hov .circle::before
{
	background-color: black;
}

#history .box .buttonA
{
	flex-shrink: 0;
	width: 265px;	height: 64px;
}
#history .box .buttonA a{	padding: 0 20px 0 30px;	}
#history .box .buttonA p
{
	font-size: 47px;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0;
}

#history .box .vl
{
	position: absolute;
	top: 0;	left: calc(50% - 1px);

	width: 2px;	height: 100%;
	background-color: black;
}
#history .box_0 .vl
{
	top: auto;	bottom: 0;
	height: 50%;
}

#history .box .hl
{
	position: absolute;
	top: 50%;
	width: 220rem;	height: 2px;
	background-color: var(--Cgray1);
	box-shadow: var(--shadow1);
}

#history .box_1 .hl, #history .box_3 .hl, #history .box_5 .hl{	right: 50%;	}
#history .box_2 .hl, #history .box_4 .hl{	left: 50%;	}

#history .box_6{	margin: 0 0 40px;	}
#history .text
{
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}


}
@media screen and (min-width:768px)
{

#history .hov .button .cls-5{	fill: black;	}
#history .box_1.hov, #history .box_3.hov, #history .box_5.hov{	background: linear-gradient(to right, transparent 0% 50%, var(--Cblue0) 50% 100%);	}
#history .box_2.hov, #history .box_4.hov{	background: linear-gradient(to right, var(--Cblue0) 0% 50%, transparent 50% 100%);	}
#history .box.hov .circle::before{	background-color: var(--Cgray0);	}

}
@media screen and (max-width: 767px)
{

#history{	padding: 10vw 0 20vw;	}
#history .titlteArea{	margin: 0 0 15vw;	}
#history .titlteArea h2
{
	padding: 2vw 8vw;
	margin: 0 auto 10vw;
	border-radius: 10vw;
	font-size: 4.5vw;
}
#history .titlteArea picture{	width: 80vw;	}

#history .box_1, #history .box_2, #history .box_3, #history .box_4, #history .box_5
{
	background: linear-gradient(to bottom,
		transparent 0% 54%,
		var(--Cgray2) 54% 91%,
		transparent 91% 100%
	);
}

#history .box .inner
{
	flex-wrap: wrap;	height: auto;
	padding: 1vw 0 13vw;
}
#history .box_6 .inner{	height: 8vw;	}

#history .box .textArea
{
	width: 100%;
	padding: 0 0 0 21vw;
	margin: 0 0 12vw;
}
#history .box .textArea p:first-child
{
	margin: 0 0 7vw;
	font-size: 5vw;
}
#history .box .textArea p:last-child
{
	font-size: 7vw;
	line-height: 1.6;
}

#history .box .circle
{
	position: absolute;
	top: 0;	left: 7.5vw;
	width: 7vw;	max-width: 7vw;
}
#history .box .circle::before
{
	width: 7vw;	height: 7vw;
	margin: 0 auto;
}

#history .box .buttonA{	width: 52vw;	height: 13vw;	}
#history .box .buttonA a{	padding: 0 3vw 0 3vw;	}
#history .box .buttonA p{	font-size: 7vw;	}


#history .box .vl{	left: 11vw;	}
#history .box .hl{	display: none;	}

#history .box_6{	margin: 0 0 5vw;	}
#history .text
{
	padding: 0 0 0 8vw;
	font-size: 5vw;
	text-align: left;
}





}


/* ================================================================================
song
================================================================================ */
@media print, screen
{

#song
{
	scroll-margin-top: var(--headerH);
	background: url("../img/index/song_background.webp") no-repeat center/cover;
	overflow: hidden;
}
#song > .inner
{
	position: relative;
	width: 100%;	height: 860px;
	max-width: var(--pageW);

	padding: 90px var(--pageP) 0;
	margin: 0 auto;
}

#song .textArea{	z-index: 5;	position: relative;	}
#song h2
{
	margin: 0 0 40px;

	color: black;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}
#song .text
{
	margin: 0 0 60px;

	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
#song .image_1
{
	width: 600px;
	margin: 0 auto 100px;
}
#song .image_2
{
	position: absolute;
	top: 360px;	right: 270px;
	width: 48px;
	margin: 0 auto;
}
#song .buttonA
{
	width: 340px;	height: 100px;
	margin: -10px auto 0;
}

}
@media screen and (max-width: 767px)
{

#song > .inner
{
	height: auto;
	padding: 15vw var(--pageP) 10vw;
}
#song h2
{
	margin: 0 0 5vw;
	font-size: 8vw;
}
#song .text
{
	margin: 0 0 10vw;
	font-size: 4vw;
}

#song .image_1
{
	width: 80vw;
	margin: 0 auto 35vw;
}
#song .image_2
{
	top: 65vw;	right: 15vw;
	width: 9vw;
}

#song .buttonA
{
	width: 70vw;	height: 20vw;
	margin: 20vw auto 0;
}


}


/* ================================================================================
ad
================================================================================ */
@media print, screen
{

#ad
{
	scroll-margin-top: var(--headerH);
	background-color: white;
	overflow: hidden;
}
#ad > .inner
{
	position: relative;
	width: 100%;
	max-width: var(--pageW);

	padding: 220px var(--pageP) 170px;
	margin: 0 auto;
}
#ad .acc
{
	position: absolute;
	top: 25px;	left: calc(50% - 440px);
	width: 1020px;

	transform: scale(0.5, 0.5);	opacity: 0;
}

#ad hr
{
	width: 100%;	height: 2px;
	background-color: var(--Cgreen0);
}
#ad h2
{
	width: fit-content;
	padding: 0 2em;
	margin: -20px auto 180px;

	background-color: white;

	color: var(--Cgreen0);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
}

#ad ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: 50px;
	margin: 0 auto 80px;
}
#ad li
{
	width: 380rem;
	/* background-color: var(--Cgreen0); */
}

.loaded #ad .acc.IV.inview.Iexplode{	animation: 3s ease-out 0.5s 1 both explode;	}

#ad .buttonA
{
	width: 340px;	height: 100px;
	margin: 0 auto;
}

@keyframes explode
{
	0% { transform: scale(0.1, 0.1);	opacity: 0; }
	10% { transform: scale(0.9, 0.9);	opacity: 0.9; }
	100% { transform: scale(1, 1);	opacity: 1; }
}

}
@media screen and (max-width: 767px)
{

#ad > .inner
{
	padding: 30vw var(--pageP) 15vw;
}
#ad .acc
{
	top: 8vw;	left: calc(50% - 60vw);
	width: 120vw;
}

#ad h2
{
	margin: -4vw auto 20vw;
	font-size: 7vw;
}
#ad ul{	gap: 5vw;	}
#ad li{	width: 100%;	height: 60vw;	}
#ad li:not(:last-child){	margin: 0 0 5vw;	}

}


/* ================================================================================
quiz
================================================================================ */
@media print, screen
{

#quiz
{
	width: 100%;	height: 850px;
	background:
		url('../img/index/quiz_background_1.svg') no-repeat top center/100%,
		url('../img/index/quiz_background_2.svg') no-repeat center center/1700px;
	background-color: var(--Cblue2);
	overflow: hidden;
}
#quiz > .inner
{
	position: relative;
	max-width: var(--pageW);
	padding: 100px 0 0;
	margin: 0 auto;
}

#quiz .titleArea
{
	position: relative;
	margin: 0 0 70px;
}
#quiz .titleArea .cans
{	
	display: flex;	justify-content: center;
	gap: 10px;
}
#quiz .titleArea .cans > li
{
	width: 125px;
	opacity: 0;
}
#quiz .titleArea h1
{
	z-index: 5;
	position: relative;
	max-width: 1024px;
	margin: -250px auto 30px;
}

#quiz.inview .titleArea .cans > li:nth-child(1)
{
	animation:
		1.0s ease-in  0.0s 1 both bounce_1,
		0.7s ease-out 1.0s 1 alternate bounce_2,
		0.5s ease-in  1.7s 1 alternate bounce_3,
		0.3s ease-out 2.2s 1 alternate bounce_4,
		0.2s ease-in  2.5s 1 forwards bounce_5,
		10s linear 10s infinite forwards bounce;
}
#quiz.inview .titleArea .cans > li:nth-child(2)
{
	animation:
		1.0s ease-in  0.3s 1 both bounce_1,
		0.7s ease-out 1.3s 1 alternate bounce_2,
		0.5s ease-in  2.0s 1 alternate bounce_3,
		0.3s ease-out 2.5s 1 alternate bounce_4,
		0.2s ease-in  2.8s 1 forwards bounce_5,
		10s linear 10.3s infinite forwards bounce;
}
#quiz.inview .titleArea .cans > li:nth-child(3)
{
	animation:
		1.0s ease-in  0.6s 1 both bounce_1,
		0.7s ease-out 1.6s 1 alternate bounce_2,
		0.5s ease-in  2.3s 1 alternate bounce_3,
		0.3s ease-out 2.8s 1 alternate bounce_4,
		0.2s ease-in  3.1s 1 forwards bounce_5,
		10s linear 10.6s infinite forwards bounce;
}


@keyframes bounce_1
{
	0% { transform: translate(0, -500px);	opacity: 0; }
	100% { transform: translate(0, 0);	opacity: 1; }
}
@keyframes bounce_2
{
	0% { transform: translate(0, 0); }
	100% { transform: translate(0, -50px); }
}
@keyframes bounce_3
{
	0% { transform: translate(0, -50px); }
	100% { transform: translate(0, 0); }
}
@keyframes bounce_4
{
	0% { transform: translate(0, 0); }
	100% { transform: translate(0, -20px); }
}
@keyframes bounce_5
{
	0% { transform: translate(0, -20px); }
	100% { transform: translate(0, 0); }
}

@keyframes bounce
{
	0% { transform: translate(0, 0); }
	5% { transform: translate(0, -30px); }
	9% { transform: translate(0, 0); }
	12% { transform: translate(0, -10px); }
	14% { transform: translate(0, 0); }
	100% { transform: translate(0, 0); }
}

#quiz .buttonA
{
	width: 347px;	height: 94px;
	margin: 0 auto 70px;
}

#quiz .characters
{
	position: relative;
	width: 0;
	margin: 0 auto;
}
#quiz .characters li{	opacity: 0;	}
#quiz .characters li:nth-child(1)
{
	z-index: 1;
	position: absolute;
	left: -340px;
	width: 240px;
}
#quiz .characters li:nth-child(2)
{
	z-index: 4;
	position: absolute;
	left: -130px;
	width: 137px;
}
#quiz .characters li:nth-child(3)
{
	z-index: 3;
	position: absolute;
	right: -140px;
	width: 140px;
}
#quiz .characters li:nth-child(4)
{
	z-index: 2;
	position: absolute;
	right: -270px;
	width: 151px;
}

#quiz.inview .characters li:nth-child(1){	animation: 0.5s ease-in-out 1.0s 1 both topCharacterUp;	}
#quiz.inview .characters li:nth-child(2){	animation: 0.5s ease-in-out 1.05s 1 both topCharacterUp;	}
#quiz.inview .characters li:nth-child(3){	animation: 0.5s ease-in-out 1.1s 1 both topCharacterUp;	}
#quiz.inview .characters li:nth-child(4){	animation: 0.5s ease-in-out 1.15s 1 both topCharacterUp;	}

@keyframes topCharacterUp
{
	0% { transform: translate(0, 250px);	opacity: 0; }
	90% { transform: translate(0, -5px);	opacity: 1; }
	100% { transform: translate(0, 0);	opacity: 1; }
}

}
@media screen and (max-width: 767px)
{

#quiz
{
	height: 188vw;

	background:
		url('../img/index/quiz_background_1.svg') no-repeat top 5vw center/100%,
		url('../img/index/quiz_background_1.svg') no-repeat bottom 5vw center/100%;
	background-color: var(--Cblue2);
}
#quiz > .inner
{
	width: 100%;
	padding: 28vw 0 0;
}

#quiz .titleArea{	margin: 0 0 10vw;	}
#quiz .titleArea .cans{	gap: 2vw;	}
#quiz .titleArea .cans > li{	width: 18vw;	}
#quiz .titleArea h1
{
	width: 100%;
	margin: -46vw auto 5vw;
}

@keyframes bounce_1
{
	0% { transform: translate(0, -80vw);	opacity: 0; }
	100% { transform: translate(0, 0);	opacity: 1; }
}
@keyframes bounce_2
{
	0% { transform: translate(0, 0); }
	100% { transform: translate(0, -5vw); }
}
@keyframes bounce_3
{
	0% { transform: translate(0, -5vw); }
	100% { transform: translate(0, 0); }
}
@keyframes bounce_4
{
	0% { transform: translate(0, 0); }
	100% { transform: translate(0, -2vw); }
}
@keyframes bounce_5
{
	0% { transform: translate(0, -2vw); }
	100% { transform: translate(0, 0); }
}

@keyframes bounce
{
	0% { transform: translate(0, 0); }
	5% { transform: translate(0, -3vw); }
	9% { transform: translate(0, 0); }
	12% { transform: translate(0, -1vw); }
	14% { transform: translate(0, 0); }
	100% { transform: translate(0, 0); }
}


#quiz .buttonA
{
	width: 65vw;	height: 20vw;
	margin: 0 auto 11vw;
}

#quiz .characters li:nth-child(1)
{
	left: -47vw;
	width: 34.5vw;
}
#quiz .characters li:nth-child(2)
{
	top: 2vw;	left: -18vw;
	width: 20.7vw;
}
#quiz .characters li:nth-child(3)
{
	right: -20vw;
	width: 20.3vw;
}
#quiz .characters li:nth-child(4)
{
	top: 2vw;	right: -37vw;
	width: 21.8vw;
}
@keyframes topCharacterUp
{
	0% { transform: translate(0, 10vw);	opacity: 0; }
	90% { transform: translate(0, -1vw);	opacity: 1; }
	100% { transform: translate(0, 0);	opacity: 1; }
}


}


/* ======================================== end ======================================== */