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

/*メインコピーの位置調整とアニメーション------------------*/
.main-visual{
position: relative;
}


/*X軸----------------------------*/
.main-X_txt{
overflow: hidden;
}

.main-X_txt p{
font-size: 6.5vh;
font-weight: 800;
position: absolute;

transform: translateX(25em);
animation: main-X_textanimation 1s forwards;
}

/*大*/
.main-X_txt p:nth-child(1){
font-size: 8.5vh;
color: #4377e9;
animation-delay: 0.2s;
top: 0;
right: 5%;
}

/*人*/
.main-X_txt p:nth-child(2){
font-size: 8.5vh;
color: #4377e9;
animation-delay: 0.4s;
top: 8.5vh;
right: 5%;
}

/*に*/
.main-X_txt p:nth-child(3){
animation-delay: 0.6s;
top: 18vh;
right: 5%;
}

/*な*/
.main-X_txt p:nth-child(4){
animation-delay: 0.8s;
top: 25vh;
right: 7%;
}

/*っ*/
.main-X_txt p:nth-child(5){
animation-delay: 1s;
top: 30vh;
right: 3%;
font-size: 1.9em;
}

/*た*/
.main-X_txt p:nth-child(6){
animation-delay: 1.2s;
top: 36.5vh;
right: 6%;
}

/*今*/
.main-X_txt p:nth-child(7){
font-size: 10vh;
color: #e63248;
animation-delay: 1.4s;
top: 27.5vh;
right: 17%;
}

/*こ*/
.main-X_txt p:nth-child(8){
animation-delay: 1.6s;
top: 38vh;
right: 21.5%;
}

/*そ*/
.main-X_txt p:nth-child(9){
animation-delay: 1.8s;
top: 44.5vh;
right: 19%;
}


@keyframes main-X_textanimation{
0%{
transform: translateX(25em);
}
50%{
transform: translateX(-1em);
}
100%{
transform: translateX(0)
}
}


/*Y軸----------------------------*/
.main-Y_txt{
overflow: hidden;
}

.main-Y_txt p{
font-size: 6.5vh;
font-weight: 800;
position: absolute;

transform: translateX(-25em);
animation: main-Y_textanimation 1s forwards;
}

/*音*/
.main-Y_txt p:nth-child(1){
font-size: 8.5vh;
color: #23cd82;
animation-delay: 3s;
top: 44vh;
left: 5.5%;
}

/*楽*/
.main-Y_txt p:nth-child(2){
font-size: 8.5vh;
color: #ffbd2a;
animation-delay: 3.2s;
top: 42vh;
left: 19.6%;
}

/*を*/
.main-Y_txt p:nth-child(3){
animation-delay: 3.4s;
top: 48vh;
left: 33%;
}

/*楽*/
.main-Y_txt p:nth-child(4){
font-size: 10vh;
color: #dd5893;
animation-delay: 3.6s;
top: 53vh;
left: 15%;
}

/*し*/
.main-Y_txt p:nth-child(5){
animation-delay: 3.8s;
top: 55.5vh;
left: 30.2%;
}

/*も*/
.main-Y_txt p:nth-child(6){
animation-delay: 4s;
top: 58vh;
left: 40.5%;
}

/*う*/
.main-Y_txt p:nth-child(7){
animation-delay: 4.2s;
top: 56vh;
left: 49%;
}

@keyframes main-Y_textanimation{
0%{
transform: translateX(-25em);
}
50%{
transform: translateX(1em);
}
100%{
transform: translateX(0)
}
}


/*サブコピーのアニメーション----------------------------*/
.main-sub_txt{
overflow: hidden;
height: 23vh;
}

.main-sub_txt p{
font-size: 4vh;
font-weight: 900;
text-align: center;

transform: translateX(25em);
animation: X_textanimation 4s forwards;
}

/*1段目*/
.main-sub_txt p:nth-child(1){
animation-delay: 5s;
}

/*2段目*/
.main-sub_txt p:nth-child(2){
animation-delay: 6s;
}

/*3段目*/
.main-sub_txt p:nth-child(3){
animation-delay: 7s;
}

@keyframes X_textanimation{
0%{
transform: translateX(25em);
}
50%{
transform: translateX(-1em);
}
100%{
transform: translateX(0)
}
}