@charset "utf-8";

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

html, body{
	height: 100%;
}

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

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

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

.br_pc{
	display: none;
}


/* mv */

.mv_container{
	position: relative;
	width: 100%;
	background-size: 250% auto;
	background-position: center center;
	overflow: hidden;
}
	.mv_container .bgm_controller{
		position: absolute;
		top: 15%;
		/* right: 30px; */
		font-size: 18px;
		text-align: center ;
		width: 100%;
		z-index: 2;
	}
	.mv_container .bgm_controller span{
		color: #fff;
	}
	
		.mv_container .bgm_controller .bgmbtns{
			color: #264815 !important;
			border: solid 1px #264815;
			padding: 3px 8px; 
			margin: 0 15px;
			transition: all 0.3s;
			cursor: pointer;
			display: inline-block;
		}
			.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;
		z-index: 1;
	}
		.mv_container .mv_illust div{
			position: absolute;
			left: 0;
			top: 0;
		} 
			.mv_container .mv_illust div.illust1{
				width: 50vw;
				margin: -21vw auto auto -30vw;
			}
			.mv_container .mv_illust div.illust2{
				width: 70vw;
				margin: 25vw auto auto 60vw;
			}
				.mv_container .mv_illust div img{
					width: 100%;
					height: 100%;
				}

	.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;
		margin-bottom: 20vw;
		position: relative;
		z-index: 2;
	}
		.mv_container .mv_inner *{
			text-align: center;
		}
		
		.mv_container .mv_inner .mv_copy{
			color: #50888d !important;
			font-size: 4vw;
			line-height: 7vw;
			margin-bottom: 5vw;
			letter-spacing: 0.9vw;
			margin-top: 10%;
		}
		
		.mv_container .mv_inner .mv_logo{
			width: 90%;
			height: auto;
			margin-bottom: 3vw;
		}
		
		.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: 4vw;
				font-size: 3vw;
			}
		
			.mv_container .mv_inner .mv_info li.info_date{
				width: 70%;
				/* height: 38px; */
			}
			
			.mv_container .mv_inner .mv_info li.info_id{
				color: #50888d !important;
			}



/* intro */

.about_container {
	position: relative;
	width: 100%;
	padding: 15vw 0;
	background-size: 250% auto;
	background-position: center center;
	overflow: hidden;
}
	.about_container *{
		color: #FFFFFF !important;
		text-align: center;
		font-size: 4vw;
		line-height: 9vw;
		letter-spacing: 0.5vw;
	}
	
	.about_container .about_text{
		margin: 0 5%;
		width: 90%;
	}

	.about_container .about_storelinks{
		margin-top: 50px;
		width: 100%;
		position: relative;
		/*fbox*/
		display: flex;
		justify-content: center;
	}
	
		.about_container .about_storelinks ul{
			width: 90%;
		}
			.about_container .about_storelinks li{
				width: 100%;
				height: 60px;
				margin-bottom: 5vw;
				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 a{
				font-size: 4vw;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				/*fbox*/
				display: flex;
				justify-content: center;
			    align-items: center;
			    transition: all 0.3s;
			}



/* tracklist */

.tracklist_container {
	position: relative;
	width: 100%;
	padding: 15vw 0 30vw 0;
	background-size: 250% auto;
	background-position: center center;
	overflow: hidden;
	/*fbox*/
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction:  column;
}
	.tracklist_container .tracklist_title{
		width:100%;
		margin:0;
	}
	
	.tracklist_container .track_lists{
		width:100%;
		padding:0;
	}
		.tracklist_container .track_lists li{
			width: 100%;
			position: relative;
			/*fbox*/
			display: flex;
			align-items: left;
			justify-content: space-between;
			margin-top: 5vw;
			flex-direction: column;
		}
		.tracklist_container .track_lists li:first-child{
			margin-top: 0;
		}
			.tracklist_container .track_lists .t_l{
				color: #50888d!important;
				font-size: 4.3vw;
				font-weight: bold;
			}
			.tracklist_container .track_lists .t_s{
				color: #50888d!important;
				font-size: 3vw;
			}
			
				.tracklist_container .track_lists .spacer{
					margin: 5vw auto;
					border-bottom: 2px solid #000000;
					opacity: 0.2;
					width: 100%;
					flex-basis: 1;
					flex-shrink: 100%;
					order: 3;
				}




/* 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;
	z-index: 3;
}
	.popup_container.in{
		animation: popupIn 0.5s forwards;
	}
	.popup_container.out{
		animation: popupOut 0.5s forwards;
	}
		
	.popup_container .comment_popup{
		width: 90%;
		left: 5%;
		/* 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: 5vw;
			margin: 8vw 8vw 5vw 8vw;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		.popup_container .comment_popup .popup_comment{
			margin: auto 8vw 8vw 8vw;
			font-size: 4vw;
			line-height: 6vw;
		}

		.popup_container .comment_popup .popup_btn_close{
			height: 10vw;
			position: absolute;
			bottom: -12vw;
			right: 0;
			cursor: pointer;
			transition: opacity 0.3s;
		}





/* intro */
.intro_container{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: 250% auto;
	background-color: #FFFFFF;
	overflow: hidden;
	/*
	overflow: hidden;
	height: 0;
	opacity: 0;
	*/
	/*fbox*/
	display: flex;
	align-items: center;
	flex-direction:  column;
	z-index: 3;
}

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

	.intro_container .intro_logo{
		margin-top: 25vw;
		width: 60%;
	}
		.intro_container .intro_logo img{
			width: 100%;
			height: auto;
		}
	.intro_container .intro_title{
		margin-top: 20px;
	}
	
	.intro_container .intro_btn_bgm{
		margin-top: 0px;
		width: 250px;
		/*fbox*/
		display: flex;
		align-items: center;
		flex-direction:  column;
	}

		.intro_container .intro_btn_bgm ul{
			width: 100%;
		}
			.intro_container .intro_btn_bgm li{
				width: 150px;
				font-size: 18px;
				font-family: "Helvetica"!important;
				color: #fff!important;
				padding: 10px 16px;
				margin: 0 auto 5px;
				text-align: center;
				border-color: rgba(97, 122, 134, 0.0);
				background-color: rgba(0, 0, 0, 0.3);
				background-size: auto auto;
				cursor: pointer;
				transition: opacity 0.3s;
			}
			
			.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);
			}
			.intro_container .bloc-fill-screen > .container{
				top: 12%!important;
				width: 95%;
			}
			#bloc-2 h4{
				font-size: 16px;
			}
			.bg-LoV4-Back-2B{
				background-image: url("../img/LoV4_Back01sp.jpg");
				background-position: -530px -255px;
				-webkit-background-size: 320%;
				-moz-background-size: 320%;
				-o-background-size: 320%;
				background-size: 320%;
			}
}
@media screen and (max-width: 420px) {
	.bg-LoV4-Back-2B{
				background-image: url("../img/LoV4_Back01sp.jpg")!important;
				background-position: -430px -225px;
				-webkit-background-size: 320%;
				-moz-background-size: 320%;
				-o-background-size: 320%;
				background-size: 320%;
				background: 48% 50% no-repeat;
			}
}
@media screen and (max-width: 375px) {
	.mv_container .bg-LoV4-Back-2B{
				-webkit-background-size: 500%!important;
				-moz-background-size: 500%!important;
				-o-background-size: 500%!important;
				background-size: 500%!important;
				background: 48% 0% no-repeat;
	}
	div#bloc-4.bg-LoV4-Back02{
		-webkit-background-size: auto 100%!important;
		-moz-background-size: auto 100%!important;
		-o-background-size: auto 100%!important;
		background-size: auto 100%!important;
	}
}