@charset "utf-8";

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

html, body{
	height: 100%;
}
body{
	margin:0;
	padding:0;
    background:#FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

audio{
	opacity: 0;
	position: absolute;
	height: 0;
	width: 0;
}

#contents{
	height: 100%;
	position: relative;
}


.contents_inner{
	background-color: #FFFFFF;
	width: 100%;
	position: relative;
}

.br_sp{
	display: none;
}




/* mv */

.mv_container{
	position: relative;
	width: 100%;
	overflow: hidden;
}
	.mv_container .bgm_controller{
		position: absolute;
		 top: 9px; 
		/* right: 30px; */
		font-size: 19px;
		margin: 0 auto;
		width: 95.7%;
		text-align: center;
	}
	
		.mv_container .bgm_controller .bgmbtns{
			color: #264815 !important;
			transition: all 0.3s;
			cursor: pointer;
			display: inline-block;
			border: solid #264815 1px;
			padding: 1px 9.5px;
			margin: 0 15px;
		}
			.mv_container .bgm_controller .bgmbtns:hover{
				opacity: 0.6;
			}
			.mv_container .bgm_controller .bgmbtns.on{
				border: solid 1px #fff;
				color: #fff!important;
			}
	
	.mv_container .mv_illust{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
		.mv_container .mv_illust div{
			position: absolute;
			left: 50%;
			top: 50%;
		} 
			.mv_container .mv_illust div.illust1{
				margin: -350px auto auto -600px;
			}
			.mv_container .mv_illust div.illust2{
				margin: -240px auto auto 230px;
			}

	.mv_container .mv_inner{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		/*fbox*/
		display: flex;
		justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}
		.mv_container .mv_inner *{
			text-align: center;
		}
		
		.mv_container .mv_inner .mv_copy{
			color: #50888d !important;
			font-size: 18px;
			line-height: 40px;
			margin-bottom: 50px;
			letter-spacing: 3px;
		}
		
		.mv_container .mv_inner .mv_logo{
			width: 610px;
			height: 252px;
			margin-bottom: 40px;
		}
		
		.mv_container .mv_inner .mv_info{
			width: 100%;
		}
			.mv_container .mv_inner .mv_info ul{
				/*fbox*/
				display: flex;
				justify-content: center;
			    align-items: center;
			    flex-direction: column;
			}
		
			.mv_container .mv_inner .mv_info li{
				margin-bottom: 20px;
			}
		
			.mv_container .mv_inner .mv_info li.info_date{
				width: 318px;
				height: 38px;
			}
			
			.mv_container .mv_inner .mv_info li.info_id{
				color: #50888d !important;
			}



/* intro */

.about_container {
	position: relative;
	width: 100%;
	padding: 100px 0;
	background-image: url('../img/bg_intro.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	/*fbox*/
	display: flex;
	justify-content: center;
	flex-direction:  column;
}
	.about_container *{
		color: #FFFFFF !important;
		text-align: center;
		font-size: 15px;
		line-height: 40px;
	}

	.about_container .about_storelinks{
		margin-top: 50px;
		width: 100%;
		position: relative;
		/*fbox*/
		display: flex;
		justify-content: center;
	}
	
		.about_container .about_storelinks ul{
			width: 655px;
			/*fbox*/
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
		}
			.about_container .about_storelinks li{
				width: 100%;
				height: 60px;
				margin-left: 20px;
				margin-bottom: 25px;
				text-align: center;
				/*	background-color: #FFFFFF;	*/
				/*	padding: 20px;	*/
				color: #000000;
				border: solid 3px #d5b345;
				transition: all 0.3s;
				font-weight: 600;
				position: relative;
				overflow: hidden;
			}
			.about_container .about_storelinks li:first-child{
				margin-left: 0px;
			}
				.about_container .about_storelinks li:hover{
					background-color: rgba(0,0,0,0.4);
				}
				
			.about_container .about_storelinks a{
				font-size: 12px !important;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				/*fbox*/
				display: flex;
				justify-content: center;
			    align-items: center;
			    transition: all 0.3s;
			}
				.about_container .about_storelinks a:hover{
					text-decoration: none;
					color: #d5b345 !important;
				}



/* tracklist */

			.tracklist_container .track_lists .btn_sound{
				color: #fff!important;
				font-size: 14px;
				cursor: pointer;
				transition: opacity 0.3;
			}
				.tracklist_container .track_lists .btn_sound.on{
					color: #D71428 !important;
				}
			.tracklist_container .track_lists .btn_comment{
				color: #d5b345!important;
				font-size: 14px;
				cursor: pointer;
				transition: opacity 0.2s;
			}
				.tracklist_container .track_lists .btn_sound:hover, .tracklist_container .track_lists .btn_comment:hover{
					opacity: 0.5;
				}
			.tracklist_container .track_lists p{
				flex-basis: 1;
				white-space: nowrap;
			}
				.tracklist_container .track_lists .spacer{
					margin: auto 10px;
					border-bottom: 1px solid #000000;
					opacity: 0.2;
					width: 90%;
					flex-basis: 1;
					flex-shrink: 100%;
				}




/* popup */
.popup_container{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.3);
	
	overflow: hidden;
	height: 0;
	opacity: 0;
}
	.popup_container.in{
		animation: popupIn 0.5s forwards;
	}
	.popup_container.out{
		animation: popupOut 0.5s forwards;
	}
		
	.popup_container .comment_popup{
		width: 500px;
		left: 50%;
		margin-left: -250px;
		position: absolute;
		background-color: #f7f6f2;
		box-shadow:0px 0px 5px 3px rgba(104, 55, 13, 0.2);
		min-height: 300px;
	}
		.popup_container .comment_popup .popup_title{
			color: #50888d !important;
			font-size: 22px;
			margin: 45px 40px 20px 40px;
		}
		
		.popup_container .comment_popup .popup_comment{
			margin: auto 40px 40px 40px;
			font-size: 15px;
			line-height: 30px;
		}

		.popup_container .comment_popup .popup_btn_close{
			width: 70px;
			height: 30px;
			position: absolute;
			top: 40px;
			right: 0;
				
			cursor: pointer;
			transition: opacity 0.3s;
		}
			.popup_container .comment_popup .popup_btn_close:hover{
				opacity: 0.5;
			}





/* intro */
.intro_container{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: contain;
	overflow: hidden;
	/*fbox*/
	display: flex;
	align-items: center;
	flex-direction:  column;
}

	.intro_container.out{
		animation: introfinish 1s forwards;
	}

	.intro_container .intro_logo{
		margin-top: 15vw;
		width: 300px;
	}
	
	.intro_container .intro_title{
		margin-top: 20px;
	}
	
	.intro_container .intro_btn_bgm{
		margin-top: 30px;
		/*fbox*/
		display: flex;
		align-items: center;
		flex-direction:  column;
	}

		.intro_container .intro_btn_bgm ul{
			width: 360px;
			margin: 0 auto;
			text-align: center ;
		}
			.intro_container .intro_btn_bgm li{
				/*width: 80%;
				padding: 20px;
				margin-bottom: 15px;
				text-align: center;
				transition: opacity 0.3s;*/
				margin: 0 10px;
				width: 150px;
				padding: 10px 16px;
				float: left;
				border-color: rgba(97, 122, 134, 0.0);
				border-style: solid;
				background-color: rgba(0, 0, 0, 0.3);
				background-size: auto auto;
				text-align: center;
				color: #fff!important;
				cursor: pointer;
				font-size: 18px;
				font-weight: 400;
			}
			
			.intro_container .intro_btn_bgm li.btn_intro_on{
				
			}
			.intro_container .intro_btn_bgm li.btn_intro_off{
				
			}
			.intro_container .intro_btn_bgm li.btn_intro_on:hover{
				background-color: rgba(215, 20, 41, 0.8);
			}
			.intro_container .intro_btn_bgm li.btn_intro_off:hover{
				background-color: rgba(0, 0, 0, 0.6);
			}


}



/* ie */
@keyframes popupIn {
	0%{
		opacity: 0;
		height: 0;
	}
	1%{
		opacity: 0;
		height: 100%;
	}
	100%{
		opacity: 1;
		height: 100%;
	}
}


@keyframes introfinish {
	0%{
		opacity: 1;
		height: 100%;
	}
	99%{
		opacity: 0;
		height: 100%;
	}
	100%{
		opacity: 0;
		height: 0;
	}
}


@keyframes popupOut {
	0%{
		opacity: 1;
		height: 100%;
	}
	99%{
		opacity: 0;
		height: 100%;
	}
	100%{
		opacity: 0;
		height: 0;
	}
}