@charset "utf-8";
.main{
	position: relative;
	padding-top: 6px;
}
.main:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	mask: linear-gradient(#FFF, #FFF) right bottom / 0 100% no-repeat;
	mask-size: 100% 100%;
	background: url(../img/common/bg/bg_inphead.jpg) no-repeat center / 100%;
	transition: mask-size .4s ease;
}
body.--is-loaded .main:before{
	mask-position: left bottom;
	mask-size: 100% 100%;
}
@media screen and (max-width:768px){
	.main{
		padding-top: calc(12 / var(--vw-min) * 100vw);
	}
	.main:before{
		height: calc(12 / var(--vw-min) * 100vw);
	}
}


/*-----------------------------------------------
 * MUSIC
------------------------------------------------*/
.music{
	padding-top: min(calc(160 / var(--vw-min) * 100vw), 160px);
	padding-bottom: calc(140 / var(--vw-min) * 100vw);
	z-index: 1;
}
.musicContent{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}
.musicContentIn{
	padding-top: min(calc(44 / var(--vw-min) * 100vw), 44px);
}

.musicTabs{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.musicTabs__btn{
	font-family: var(--font-en);
	font-size: min(calc(26 / var(--vw-min) * 100vw), calc(26px * var(--max-percent)));
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--color-blue);
	text-decoration: none;
}
.musicTabs__btn.is-active{
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}
.musicTabs__btn.is-disabled{
	opacity: 0.35;
}

.musicSong{
	margin-top: min(calc(36 / var(--vw-min) * 100vw), calc(36px * var(--max-percent)));
	text-align: center;
	font-size: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-blue);
}
.musicArtist{
	margin-top: min(calc(12 / var(--vw-min) * 100vw), 12px);
	text-align: center;
	font-family: var(--font-en);
	font-size: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--color-blue);
}

.musicJacket{
	width: 100%;
	max-width: 800px;
	margin: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent))) auto 0;
}
.musicJacket picture,
.musicJacket img{
	display: block;
	width: 100%;
	height: auto;
}

.musicBlock{
	margin-top: min(calc(56 / var(--vw-min) * 100vw), calc(56px * var(--max-percent)));
}
.musicBlock__title{
	text-align: left;
	font-family: var(--font-en);
	font-weight: 500;
	line-height: 1;
	color: var(--color-white);
}
.musicBlock__title span{
	display: inline-block;
	background-color: var(--color-black);
	letter-spacing: 0.08em;
	font-size: min(calc(28 / var(--vw-min) * 100vw), calc(28px * var(--max-percent)));
}
.musicBlock__text{
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 1.8;
	color: var(--color-blue);
}

@media screen and (max-width:768px){
	.music{
		padding-top: calc(128 / var(--vw-min) * 100vw);
		padding-bottom: calc(136 / var(--vw-min) * 100vw);
	}
	.musicContentIn{
		padding-top: calc(56 / var(--vw-min) * 100vw);
		padding-left: calc(48 / var(--vw-min) * 100vw);
		padding-right: calc(48 / var(--vw-min) * 100vw);
	}
	.musicTabs{
		gap: calc(40 / var(--vw-min) * 100vw);
	}
	.musicTabs__btn{
		font-size: calc(32 / var(--vw-min) * 100vw);
	}
	.musicSong{
		margin-top: calc(48 / var(--vw-min) * 100vw);
		font-size: calc(56 / var(--vw-min) * 100vw);
	}
	.musicArtist{
		margin-top: calc(12 / var(--vw-min) * 100vw);
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
	.musicJacket{
		margin-top: calc(32 / var(--vw-min) * 100vw);
	}
	.musicBlock{
		margin-top: calc(56 / var(--vw-min) * 100vw);
	}
	.musicBlock__title{
		font-size: calc(32 / var(--vw-min) * 100vw);
	}
	.musicBlock__text{
		margin-top: calc(20 / var(--vw-min) * 100vw);
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}