@charset "utf-8";
/* ------------------------------
 MUSIC - SECTION
------------------------------ */
.subSection__hgroup__title {
	background: url(../img/ttl/ttl_music.png) no-repeat left center / contain;
}
@media screen and (max-width:768px){
	.subSection__hgroup__title {
		background: url(../img/ttl/ttl_music_sp.png) no-repeat left center / contain;
	}
	.subSection{
		margin-bottom: 0;
	}
}
/* ------------------------------
 MUSIC
------------------------------ */
/* music__nav */
.music__nav {
	width: min(calc(1100 / var(--vw-min) * 100vw), 1100px);
	margin: min(calc(70 / var(--vw-min) * 100vw), 70px) auto min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.music__nav__lists {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.music__nav__item {
	min-width: min(calc(200 / var(--vw-min) * 100vw), 200px);
	height: min(calc(50 / var(--vw-min) * 100vw), 50px);
}
.music__nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--color-blue);
	border-radius: min(calc(50 / var(--vw-min) * 100vw), 50px);
	text-decoration: none;
	position: relative;
}
.music__nav__link:before {
	content: '';
	width: calc(100% - min(calc(10 / var(--vw-min) * 100vw), 10px));
	height: calc(100% - min(calc(2 / var(--vw-min) * 100vw), 2px));
	background-color: rgba(255, 255, 255, 0.80);
	border-radius: min(calc(50 / var(--vw-min) * 100vw), 50px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.music__nav__link:after {
	content: "";
    width: min(calc(12 / var(--vw-min) * 100vw), 12px);
    height: min(calc(12 / var(--vw-min) * 100vw), 12px);
    display: block;
    background: url(../img/common/icon/icon_arrow_bottom.svg) no-repeat center center / contain;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
.music__nav__link > span {
	color: #000;
	font-family: var(--font-en);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
	padding: 0 min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
	z-index: 1;
}
.music__nav__link.--is-active:before {
	background-color: var(--color-blue);
}
.music__nav__link.--is-active > span {
	color: #fff;
}
.music__nav__link.--is-active:after {
	filter: brightness(0) invert(1);
}

/* music__cont */
.music__cont[hidden] {
	display: none;
}
.music__cont {
	background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(40px);
    width: min(calc(1100 / var(--vw-min) * 100vw), 1100px);
    margin: min(calc(70 / var(--vw-min) * 100vw), 70px) auto 0;
    padding: min(calc(90 / var(--vw-min) * 100vw), 90px) min(calc(100 / var(--vw-min) * 100vw), 100px);
    position: relative;
    z-index: 1;
}
.music__cont:before {
	content: "";
	background-color: var(--color-blue);
	width: min(calc(40 / var(--vw-min) * 100vw), 40px);
	height: min(calc(4 / var(--vw-min) * 100vw), 4px);
	position: absolute;
	top: 0;
	left: 0;
}
.music__cont__title {
	color: #fff;
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	letter-spacing: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    display: flex;
    flex-direction: column-reverse;
    gap: min(calc(12 / var(--vw-min) * 100vw), 12px);
    margin-bottom: min(calc(34 / var(--vw-min) * 100vw), 34px);
    padding-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
.music__cont__box {
	display: flex;
	gap: min(calc(50 / var(--vw-min) * 100vw), 50px);
}
.music__cont__box__img {
	width: min(calc(400 / var(--vw-min) * 100vw), 400px);
}
.music__cont__box__img img {
	width: 100%;
}
.music__cont__box__right {
	width: calc(100% - min(calc(400 / var(--vw-min) * 100vw), 400px));
}
.music__cont__box__title {
	color: var(--color-blue);
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	letter-spacing: 0;
}
.music__cont__box__artist {
	color: #fff;
	font-size: min(calc(30 / var(--vw-min) * 100vw), 30px);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-left: -14px;
}
.music__cont__info {
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
.music__cont__info__item {
	display: flex;
	align-items: center;
	gap: min(calc(14 / var(--vw-min) * 100vw), 14px);
}
.music__cont__info__item > dt {
	color: var(--color-blue);
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	letter-spacing: 0;
}
.music__cont__info__item > dd {
	color: #fff;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	letter-spacing: 0;
}

/* music__cont__prf */
.music__cont__prf {
	border: 1px solid rgba(255, 255, 255, 0.20);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
	margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	padding: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.music__cont__prf__item {
	width: 100%;
}
.music__cont__prf__item:not(:first-child) {
	border-top: 1px solid rgba(255, 255, 255, 0.20);
	padding-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.music__cont__prf__item.--comment {
	display: flex;
	gap: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.music__cont__prf__item__img {
	flex: none;
	width: min(calc(320 / var(--vw-min) * 100vw), 320px);
}
.music__cont__prf__item__img img {
	width: 100%;
}
.music__cont__prf__item__txt {
	color: #fff;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 400;
	letter-spacing: 0;
}
.music__cont__prf__item__txt.--prf {
	font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
.music__cont__prf__item__label {
	color: var(--color-blue);
	font-family: var(--font-en);
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: min(calc(12 / var(--vw-min) * 100vw), 12px);
}

/* ------------------------------
 MUSIC - SP
------------------------------ */
@media screen and (max-width: 768px) {
	.music__nav {
		width: auto;
		margin: calc(44 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) 0;
	}
	.music__nav__lists {
		justify-content: space-between;
		gap: calc(11 / var(--vw-min) * 100vw);
	}
	.music__nav__item {
		flex: 1;
		min-width: 0;
		height: calc(42 / var(--vw-min) * 100vw);
	}
	.music__nav__link:before {
		width: calc(100% - calc(6 / var(--vw-min) * 100vw));
		height: calc(100% - calc(2 / var(--vw-min) * 100vw));
	}
	.music__nav__link:after {
		width: calc(10 / var(--vw-min) * 100vw);
		height: calc(10 / var(--vw-min) * 100vw);
		right: calc(14 / var(--vw-min) * 100vw);
	}
	.music__nav__link > span {
		font-size: calc(13 / var(--vw-min) * 100vw);
		font-weight: 400;
		padding: 0 calc(24 / var(--vw-min) * 100vw);
	}
	.music__cont {
		width: 100%;
		margin-top: calc(40 / var(--vw-min) * 100vw);
		padding: calc(35 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw) calc(110 / var(--vw-min) * 100vw);
		background: rgba(0, 0, 0, 0.40);
	}
	.music__cont:before {
		width: calc(30 / var(--vw-min) * 100vw);
		height: calc(3 / var(--vw-min) * 100vw);
		left: calc(20 / var(--vw-min) * 100vw);
	}
	.music__cont__title {
		font-size: calc(16 / var(--vw-min) * 100vw);
		line-height: calc(26 / var(--vw-min) * 100vw);
		gap: 0;
		margin-bottom: calc(32 / var(--vw-min) * 100vw);
		padding-bottom: calc(32 / var(--vw-min) * 100vw);
	}
	.music__cont__box {
		flex-direction: column;
		align-items: center;
		gap: calc(30 / var(--vw-min) * 100vw);
	}
	.music__cont__box__img {
		width: calc(280 / var(--vw-min) * 100vw);
		aspect-ratio: 1;
	}
	.music__cont__box__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.music__cont__box__right {
		width: 100%;
	}
	.music__cont__box__title {
		font-size: calc(14 / var(--vw-min) * 100vw);
		line-height: 1.2;
	}
	.music__cont__box__artist {
		font-size: calc(18 / var(--vw-min) * 100vw);
		line-height: 1.2;
		margin-top: calc(6 / var(--vw-min) * 100vw);
		margin-left: calc(-11 / var(--vw-min) * 100vw);
	}
	.music__cont__info {
		display: flex;
		flex-direction: column;
		gap: calc(18 / var(--vw-min) * 100vw);
		margin-top: calc(20 / var(--vw-min) * 100vw);
	}
	.music__cont__info__item {
		gap: calc(6 / var(--vw-min) * 100vw);
	}
	.music__cont__info__item > dt {
		flex: none;
		width: calc(100 / var(--vw-min) * 100vw);
		font-size: calc(14 / var(--vw-min) * 100vw);
		line-height: calc(16 / var(--vw-min) * 100vw);
	}
	.music__cont__info__item > dd {
		font-size: calc(14 / var(--vw-min) * 100vw);
		line-height: calc(16 / var(--vw-min) * 100vw);
	}
	.music__cont__prf {
		gap: calc(32 / var(--vw-min) * 100vw);
		margin-top: calc(32 / var(--vw-min) * 100vw);
		padding: calc(24 / var(--vw-min) * 100vw) calc(12 / var(--vw-min) * 100vw);
	}
	.music__cont__prf__item.--comment {
		flex-direction: column;
		gap: calc(30 / var(--vw-min) * 100vw);
	}
	.music__cont__prf__item:not(:first-child) {
		padding-top: calc(32 / var(--vw-min) * 100vw);
	}
	.music__cont__prf__item__img {
		display: block;
		width: 100%;
		max-width: calc(280 / var(--vw-min) * 100vw);
		margin: 0 auto;
	}
	.music__cont__prf__item__label {
		font-size: calc(14 / var(--vw-min) * 100vw);
		letter-spacing: calc(0.56 / var(--vw-min) * 100vw);
		line-height: 1;
		margin-bottom: calc(26 / var(-	-vw-min) * 100vw);
	}
	.music__cont__prf__item__txt,
	.music__cont__prf__item__txt.--prf {
		font-size: calc(14 / var(--vw-min) * 100vw);
		font-weight: 600;
		line-height: calc(26 / var(--vw-min) * 100vw);
	}
}