@keyframes show-catch{
    0%{
        opacity:0;
        transform: translateY(-100%);
    }

    100%{
        opacity:1;
        transform:none;
    }
}

@keyframes show-moon{
    0%{
        opacity:0;
        text-shadow:0px 0px 20px transparent;
    }

    50%{
        opacity:0;
        text-shadow:0px 0px 10px #FFDB92;
    }

    100%{
        opacity:1;
        text-shadow:2px 2px 3px #F2F2F2;
    }
}

@keyframes show-flower{
    0%{
        opacity:0;
        text-shadow:0px 0px 20px transparent;
    }

    50%{
        opacity:0;
        text-shadow:0px 0px 10px #F460B5;
    }

    100%{
        opacity:1;
        text-shadow:2px 2px 3px #F2F2F2;
    }
}

@keyframes show-border{
    0%{
        transform:scale(0,1);
    }

    100%{
        transform:scale(1,1);
    }
}

*{
    font-family:capirera, sans-serif;
    font-weight:400;
    font-style:normal;
}

h1,h2,h3{
    font-family: vdl-megamaru, sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1{
    font-size:60pt;
    color:#F2F2F2;
}

h2{
    font-size:30pt;
    width:100%;
    text-align:center;
    color:#F2F2F2;
}

h3{
    font-size:24pt;
    margin:15px 0;
    color:#F2F2F2;
}

p{
    font-size:16pt;
    color:#F2F2F2;
}

main{
    background-color:#414F6B;
}

.top-title{
    background-color:#222D47;
    margin-bottom:150px;
    padding:100px;
}

.title{
    position:relative;
    width:100%;
    text-align:center;
    line-height:60pt;
    margin:150px 0;
}

.title::before{
    content:url(../image/Demo04/2-8.png);
    position:absolute;
    left:20px;
    transition:1s;
}

.title::after{
    content:url(../image/Demo04/3-8.png);
    position:absolute;
    right:20px;
    bottom:-50px;
    transition:1s;
}

.title h1 br,h2 br{
	display:none;
}

.catch-copy{
    display:block;
    font-family: vdl-megamaru, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:30pt;
    animation:show-catch 5s both;
}

.title-moon{
    font-family: vdl-megamaru, sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#FFDB92;
    animation:show-moon 5s both;
}

.title-flower{
    font-family: vdl-megamaru, sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#F460B5;
    animation:show-flower 5s both;
    animation-delay:2s;
}

.warning{
    text-align:center;
}

.main-info{
    width:90%;
    margin:0 auto;
    margin-bottom:150px;
}

.main-image{
    text-align:center;
}

.main-info p{
    display:block;
    text-align:center;
}

.lineup-info{
    width:90%;
    margin:0 auto;
}

.lineup{
    display:flex;
}

.lineup-back{
    box-sizing:border-box;
    background-color:#0C0C26;
    margin:10px;
}

.lineup-image{
    width:98%;
    margin:1%;
}

.message{
    width:98%;
    margin:0 auto 50px auto;
}

.border1,.border2{
    margin-bottom:40px;
}

.show{
    width:100%;
    border-bottom:solid 2px #C0D5FF;
    transform-origin:left top;
    animation:show-border 2s both;
}

.copyright{
	width:90%;
	margin:200px auto;
	text-align:center;
}

.copyright p{
	width:100%;
	padding:5%;
}

@media(max-width:1280px){
	.top-title{
		padding:5%;
	}
	
    .title::before,.title::after{
        opacity:0;
    }
	
	.enter{
		display:none;
	}
	
	.title h1 br,h2 br{
		display:block;
	}
	
	.lineup{
		display:block;
	}
	
	.lineup-back{
		padding:2%;
	}
}

@media(max-width:800px){
	.main-info p{
		text-align:left;
	}
}