@charset "UTF-8";


body{
	font-family:'Noto Sans JP','Barlow', sans-serif;
}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.live_contents_wrap .delighter {
    transform:translatey(50%); opacity:0; transition: all 0.5s ease-out;

}

.live_contents_wrap .delighter.started {
    transform:none; opacity:1;
}

.release_wrap .delighter {
    transform:translatey(20%); opacity:0; transition: all 0.5s ease-out;

}
.release_wrap .delighter.started {
    transform:none; opacity:1;
}


.mv_box.delighter {
   transition: all .3s ease-out;
   transform:translatey(30%);
   opacity: 0;

}
.mv_box.delighter.started {
    transform:none; opacity:1;
}

.band.delighter {
   transition: all .3s ease-out;
   transform:translatey(30%);
   opacity: 0;

}
.band.delighter.started {
    transform:none; opacity:1;
}







/* 1280px〜：大型PC
------------------------------ */
@media screen and (min-width:1280px){
	
	/*live_info------------------------------------*/
	
	.under_title {
		width: 100%;
		height: 300px;
		margin: 0 0 30px 0;
		box-sizing: border-box;
		background-color: #F8E54C;
	}

	.under_title h1{
		text-align: center;
		line-height: 380px;
		font-size: 35px;
		font-weight: bold;
		letter-spacing: 3px;
	}
	
	.live_contents{
		margin: 100px auto 0 auto;
		width: 600px;
		height: 500px;
	}
	
	.flyer{
		width:350px;
		height: 400px;
		float: left;
	}
	
	.live_info{
		
		float: right;
	}
	
	.live_info dt{
		font-size: 15px;
		clear: left;
		margin: 0 0px 8px 0;
		letter-spacing: 1px;
		font-weight: bold;
		color: #5C5C5C;
	}
	
	.live_info dd{
		letter-spacing: 1px;
		float: left;
		margin: 0 0 25px 0;;
		font-size: 14px;
	}
	
	
	.live_btn{
		width: 170px;
		height: 40px;
		background: #000;
		border-radius: 20px;
		color: #fff;
		text-align: center;
		line-height: 40px;
	}
	
	.live_btn a{
		text-decoration: none;
		color: #FFF;
		display: block;
	}
	
	.live_btn a:hover{
	    width: 170px;
		height: 40px;
		background: #fff;
		border-radius: 20px;
		color: #000;
		text-align: center;
		line-height: 40px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	
	
	/*live_info------------------------------------end*/
	
	
	/*comingsoon------------------------------------*/
	
	
	.comingsoon{
		width: 100%;
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.comingsoon p{
		font-size: 26px;
		font-weight: bold;
		
	}
	
	
}


/* 960px〜1279px：小型PC
------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px)  {
	
		.under_title {
		width: 100%;
		height: 300px;
		margin: 0 0 30px 0;
		box-sizing: border-box;
		background-color: #F8E54C;
	}

	.under_title h1{
		text-align: center;
		line-height: 380px;
		font-size: 35px;
		font-weight: bold;
		letter-spacing: 3px;
	}
	
	.live_contents{
		margin: 100px auto 0 auto;
		width: 600px;
		height: 500px;
	}
	
	.flyer{
		width:300px;
		height: 400px;
		
		float: left;
	}
	
	.live_info{
		
		float: right;
	}
	
	.live_info dt{
		font-size: 15px;
		clear: left;
		margin: 0 0px 8px 0;
		letter-spacing: 1px;
		font-weight: bold;
		color: #5C5C5C;
	}
	
	.live_info dd{
		letter-spacing: 1px;
		float: left;
		margin: 0 0 25px 0;;
		font-size: 14px;
	}
	
	
	.live_btn{
		width: 170px;
		height: 50px;
		background: #000;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	
	.live_btn a{
		text-decoration: none;
		color: #FFF;
		display: block;
	}
	
	.live_btn a:hover{
	    width: 170px;
		height: 50px;
		background: #fff;
		border-radius: 30px;
		color: #000;
		text-align: center;
		line-height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	



	/*comingsoon------------------------------------*/
	
	
	.comingsoon{
		width: 100%;
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.comingsoon p{
		font-size: 26px;
		font-weight: bold;
		
	}
	
}

/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
	
		.under_title {
		width: 100%;
		height: 300px;
		margin: 0 0 30px 0;
		box-sizing: border-box;
		background-color: #F8E54C;
	}

	.under_title h1{
		text-align: center;
		line-height: 380px;
		font-size: 35px;
		font-weight: bold;
		letter-spacing: 3px;
	}
	
	.live_contents{
		margin: 100px auto 0 auto;
		width: 600px;
		height: 500px;
	}
	
	.flyer{
		width:250px;
		height: 350px;
		float: left;
	}
	
	.live_info{
		float: right;
	}
	
	.live_info dt{
		font-size: 15px;
		clear: left;
		margin: 0 0px 8px 0;
		letter-spacing: 1px;
		font-weight: bold;
		color: #5C5C5C;
	}
	
	.live_info dd{
		letter-spacing: 1px;
		float: left;
		margin: 0 0 25px 0;;
		font-size: 14px;
	}
	
	
	.live_btn{
		width: 170px;
		height: 50px;
		background: #000;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	
	.live_btn a{
		text-decoration: none;
		color: #FFF;
		display: block;
	}
	
	.live_btn a:hover{
	    width: 170px;
		height: 50px;
		background: #fff;
		border-radius: 30px;
		color: #000;
		text-align: center;
		line-height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	
		/*comingsoon------------------------------------*/
	
	
	.comingsoon{
		width: 100%;
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.comingsoon p{
		font-size: 26px;
		font-weight: bold;
		
	}
	
	
}




/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) {
	
		.under_title {
		width: 100%;
		height: 300px;
		margin: 0 0 30px 0;
		box-sizing: border-box;
		background-color: #F8E54C;
	}

	.under_title h1{
		text-align: center;
		line-height: 380px;
		font-size: 35px;
		font-weight: bold;
		letter-spacing: 3px;
	}
	
	.live_contents{
		margin: 100px auto 0 auto;
		width: 600px;
		height: 500px;
	}
	
	.flyer{
		width:300px;
		height: 400px;
		float: left;
	}
	
	.live_info{
		float: right;
	}
	
	.live_info dt{
		font-size: 15px;
		clear: left;
		margin: 0 0px 8px 0;
		letter-spacing: 1px;
		font-weight: bold;
		color: #5C5C5C;
	}
	
	.live_info dd{
		letter-spacing: 1px;
		float: left;
		margin: 0 0 25px 0;;
		font-size: 14px;
	}
	
	
	.live_btn{
		width: 170px;
		height: 50px;
		background: #000;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	
	.live_btn a{
		text-decoration: none;
		color: #FFF;
		display: block;
	}
	
	.live_btn a:hover{
	    width: 170px;
		height: 50px;
		background: #fff;
		border-radius: 30px;
		color: #000;
		text-align: center;
		line-height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	
	
			/*comingsoon------------------------------------*/
	
	
	.comingsoon{
		width: 100%;
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.comingsoon p{
		font-size: 26px;
		font-weight: bold;
		
	}
	
}
	
	
/* 〜479px：スマートフォン縦
------------------------------ */
@media screen and (max-width:479px) {

	
	.under_title {
		width: 100%;
		height: 200px;
		margin: 0 0 30px 0;
		box-sizing: border-box;
		background-color: #F8E54C;
	}

	.under_title h1{
		text-align: center;
		line-height: 250px;
		font-size: 25px;
		font-weight: bold;
		letter-spacing: 3px;
	}
	
	.live_contents{
		margin: 100px auto 300px auto;
		width: 250px;
		height: 580px;
		
	}
	
	.flyer{
		width:300px;
		height: auto;
	}
	
	.flyer img{
		width: 250px;
		height: auto;
		
	}
	
	.live_info dl{
		width: 250px;
	}
	
	.live_info dt{
		width: 250px;
		font-size: 14px;
		display: inline-block;
		font-weight: bold;
		margin: 0 0 5px 0;
		
	}
	
	.live_info dd{
		font-size: 14px;
		margin: 0 0 10px 0;
	}
	
	
	.live_btn{
		width: 250px;
		height: 50px;
		background: #000;
		border-radius: 30px;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	
	.live_btn a{
		text-decoration: none;
		color: #FFF;
		display: block;
	}
	
	.live_btn a:hover{
	    width: 250px;
		height: 50px;
		background: #fff;
		border-radius: 30px;
		color: #000;
		text-align: center;
		line-height: 50px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
	
			/*comingsoon------------------------------------*/
	
	
	.comingsoon{
		width: 100%;
		height: 70vh;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.comingsoon p{
		font-size: 26px;
		font-weight: bold;
		
	}
	
}