@charset "UTF-8";
/* CSS Document */

section {
	position: relative;
	padding: 400px 0 300px;
	width: 100%;
/*	background: rgba(255,255,255,.8)*/

}


.test {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background: aliceblue;
	border: 1px solid rgba(222,222,222,1.00);
	box-shadow: 5px 5px 5px 0 rgba(199,199,199,.8)
}

.test p {
	font-size: 24pt;
	line-height: 32px;
	color: rgba(72,72,72,1.00)

}

.test_06,.test_07,.test_08,.test_09,.test_10 {
	background: rgba(48,48,48,1.00)
}

.test_06 p,.test_07 p,.test_08 p,.test_09 p,.test_10 p {
	color: aliceblue;
}

.test_01 {/*S*/
	left: 80px;
}
.test_02 {/*a*/
	left: 145px;/*80px+50px+15px*/
}
.test_03 {/*i*/
	left: 210px;/*145px+65px*/
}
.test_04 {/*t*/
	left: 275px;/*210px+65px*/
}
.test_05 {/*o*/
	left: 340px;/*275px+65px*/
}
.test_06 {/*K*/
	left: 435px;/*340px+65px+30px*/
}
.test_07 {/*u*/
	left: 500px;/*435px+65px*/
}
.test_08 {/*d*/
	left: 565px;/*500px+65px*/
}
.test_09 {/*a*/
	left: 630px;/*565px*65px*/
}
.test_10 {/*i*/
	left: 695px;/*630px+65px*/
}


.backlogo {
	position: fixed;
	z-index: -999;
/*	max-width: 500px;*/
	max-width: 36%;
	min-width: 400px;
	aspect-ratio: 1;
/*	background: rgba(0,0,0,.3);*/

	right: 75px;
	top: 100px;
}

.backlogo img {
	width: 100%;
}

.backlogo p{
	font-size: 100pt;
	letter-spacing: 20px;
	text-align: center;
	line-height: 350px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

span{
	line-height: 550px;
	color: aqua;
	font-size: 50px;
}


/*以下アニメーション*/

.test_02 {/*a*/
	animation: idou_a forwards 5s ease-in-out 2s 1 normal;
}

.test_03 {/*i*/
	animation: idou_i forwards 5s ease-in-out 2s 1 normal;
}

.test_04 {/*t*/
	animation: idou_t forwards 5s ease-in-out 2s 1 normal;
}

.test_05 {/*o*/
	animation: idou_o forwards 5s ease-in-out 2s 1 normal;
}

.test_08 {/*d*/
	animation: idou_d forwards 5s ease-in-out 2s 1 normal;
}

.test_09 {/*a*/
	animation: idou_a2 forwards 5s ease-in-out 2s 1 normal;
}

.test_10 {/*i*/
	animation: idou_i2 forwards 5s ease-in-out 2s 1 normal;
}

.test_06 {/*K*/
	animation: idou_K forwards 5s ease-in-out 2s 1 normal;
}

.test_07 {/*u*/
	animation: idou_u forwards 5s ease-in-out 2s 1 normal;
}

@keyframes idou_a_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(-65px,0px);
	}
	100% {
		transform: translate(-65px,50px);
	}
}

@keyframes idou_i_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,100px);
	}
}

@keyframes idou_t_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,-100px);
	}
}

@keyframes idou_o_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(0px,50px);
	}
	
	100% {
		transform: translate(-50px,50px);
	}
}

@keyframes idou_d_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(65px,0px);
	}
	100% {
		transform: translate(65px,-50px);
	}
}


@keyframes idou_u_under800 {
	0% {
		transform: translate(0px,0px);
	}
	20% {
		transform: translate(-100px,0px);
	}
	40% {
		transform: translate(-100px,200px);
	}
	60% {
		transform: translate(200px,200px);
	}
	
	80% {
		transform: translate(200px,-50px);
	}
	
	100% {
		transform: translate(165px,-50px);
	}
	
}

@keyframes idou_i2_under800 {
	0% {
		transform: translate(0px,0px);
	}
	33% {
		transform: translate(-100px,-0px);
	}
	66% {
		transform: translate(-100px,-150px);
	}
	100% {
		transform: translate(-50px,-150px);
	}
}

@keyframes idou_K_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,100px);
	}
}

/*
@keyframes idou_a2 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(65px,0px);
	}
}
*/


/*
@keyframes idou_a_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(-50px,0px);
	}
	100% {
		transform: translate(-50px,50px);
	}
}

@keyframes idou_i_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,100px);
	}
}

@keyframes idou_t_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,-100px);
	}
}

@keyframes idou_o_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(0px,50px);
	}
	
	100% {
		transform: translate(-50px,50px);
	}
}

@keyframes idou_d_under800 {
	0% {
		transform: translate(0px,0px);
	}
	50% {
		transform: translate(50px,0px);
	}
	100% {
		transform: translate(50px,-50px);
	}
}


@keyframes idou_u_under800 {
	0% {
		transform: translate(0px,0px);
	}
	20% {
		transform: translate(-100px,0px);
	}
	40% {
		transform: translate(-100px,200px);
	}
	60% {
		transform: translate(200px,200px);
	}
	
	80% {
		transform: translate(200px,-50px);
	}
	
	100% {
		transform: translate(150px,-50px);
	}
	
}

@keyframes idou_i2_under800 {
	0% {
		transform: translate(0px,0px);
	}
	33% {
		transform: translate(-100px,-0px);
	}
	66% {
		transform: translate(-100px,-150px);
	}
	100% {
		transform: translate(-50px,-150px);
	}
}

@keyframes idou_K_under800 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(0px,100px);
	}
}

*/
/*
@keyframes idou_a2 {
	0% {
		transform: translate(0px,0px);
	}
	100% {
		transform: translate(65px,0px);
	}
}
*/

/*########################ここまで、800以下の処理######################*/

@keyframes idou_a {
	0% {
		transform: translate(0px,0px);
	}

	33% {
		transform: translate(0px,100px);
	}
	
	66% {
		transform: translate(355px,100px);
	}
	
	100% {
		transform: translate(355px,0px);
	}
}

@keyframes idou_i {
	0% {
		transform: translate(0px,0px);
	}
	
	100% {
		transform: translate(130px,0px);
	}
}

@keyframes idou_t {
	0% {
		transform: translate(0px,0px);
	}
	
	33% {
		transform: translate(0px,-100px);
	}
	
	66% {
		transform: translate(-130px,-100px);
	}
	
	100% {
		transform: translate(-130px,0px);
	}
}

@keyframes idou_o {
	0% {
		transform: translate(0px,0px);
	}
	
	100% {
		transform: translate(65px,0px);
	}
}

@keyframes idou_d {
	0% {
		transform: translate(0px,0px);
	}
	
	33% {
		transform: translate(0px,-100px);
	}
	
	66% {
		transform: translate(-290px,-100px);
	}
	
	100% {
		transform: translate(-290px,0px);
	}
}

@keyframes idou_a2 {
	0% {
		transform: translate(0px,0px);
	}
	
	
	100% {
		transform: translate(65px,0px);
	}
}
@keyframes idou_i2 {
	0% {
		transform: translate(0px,0px);
	}
	
	33% {
		transform: translate(0px,-100px);
	}
	
	66% {
		transform: translate(-130px,-100px);
	}
	
	100% {
		transform: translate(-130px,0px);
	}
}

@keyframes idou_K {
	0% {
		transform: translate(0px,0px);
	}
	
	33% {
		transform: translate(0px,100px);
	}
	
	66% {
		transform: translate(195px,100px);
	}
	
	100% {
		transform: translate(195px,0px);
	}
}


@keyframes idou_u {
	0% {
		transform: translate(0px,0px);
	}
	
	33% {
		transform: translate(0px,-100px);
	}
	
	66% {
		transform: translate(-290px,-100px);
	}
	
	100% {
		transform: translate(-290px,0px);
	}
}


@media(max-width:800px) {
	
	section {
		position: relative;
		padding: 200px 0 300px;
		width: 100%;
	/*	background: rgba(255,255,255,.8)*/

	}
	.backlogo {
		min-width: 400px;
		right: 50px;
	}
	
	.test_01 {/*S*/
		left: 315px;
		top: 150px;
	}
	.test_02 {/*a*/
		left: 265px;
		top: 200px;
	}
	.test_03 {/*i*/
		left: 315px;
		top: 250px;
	}
	.test_04 {/*t*/
		left: 265px;
		top: 300px;
	}
	.test_05 {/*o*/
		left: 315px;
		top: 350px;
	}
	.test_06 {/*K*/
		left: 200px;
		top: 250px;
	}
	.test_07 {/*u*/
		left: 150px;
		top: 300px;
	}
	.test_08 {/*d*/
		left: 200px;
		top: 350px;
	}
	.test_09 {/*a*/
		left: 150px;
		top: 400px;
	}
	.test_10 {/*i*/
		left: 200px;
		top: 450px;
	}

	/*以下アニメーション*/

	.test_02 {/*a*/
		animation: idou_a_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_03 {/*i*/
		animation: idou_i_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_04 {/*t*/
		animation: idou_t_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_05 {/*o*/
		animation: idou_o_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_08 {/*d*/
		animation: idou_d_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_09 {/*a*/
		animation: idou_a2_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_10 {/*i*/
		animation: idou_i2_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_06 {/*K*/
		animation: idou_K_under800 forwards 5s ease-in-out 2s 1 normal;
	}

	.test_07 {/*u*/
		animation: idou_u_under800 forwards 5s ease-in-out 2s 1 normal;
	}
}

@media(max-width:499px) {
		.test_01 {/*S*/
		left: 215px;
		top: 150px;
	}
	.test_02 {/*a*/
		left: 165px;
		top: 200px;
	}
	.test_03 {/*i*/
		left: 215px;
		top: 250px;
	}
	.test_04 {/*t*/
		left: 165px;
		top: 300px;
	}
	.test_05 {/*o*/
		left: 215px;
		top: 350px;
	}
	.test_06 {/*K*/
		left: 115px;
		top: 250px;
	}
	.test_07 {/*u*/
		left: 65px;
		top: 300px;
	}
	.test_08 {/*d*/
		left: 115px;
		top: 350px;
	}
	.test_09 {/*a*/
		left: 65px;
		top: 400px;
	}
	.test_10 {/*i*/
		left: 115px;
		top: 450px;
	}

}