@charset "utf-8";
/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
.cont-tit {
	height: min(calc(192 / var(--vw-min) * 100vw),192px);
	background: url(../img/common/tit/tit_music.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
	.cont-tit {
		width: calc(270 / var(--vw-min) * 100vw);
		height: calc(140 / var(--vw-min) * 100vw);
		background-image: url(../img/common/tit/tit_music-s.svg);
	}
}
.musicCont {
	position: relative;
	padding-top: min(calc(60 / var(--vw-min) * 100vw),60px);
}
@media screen and (max-width:768px){
	.musicCont {
		padding-top: calc(80 / var(--vw-min) * 100vw);
	}
}
.musicCont::before,
.musicCont::after {
	content: "";
	width: 100%;
	height: min(calc(1 / var(--vw-min) * 100vw),1px);
	position: absolute;
	top: 0;
  	background-image: linear-gradient(90deg, #000000 8%, transparent 95% 100%);
}
.musicCont::after {
	top: min(calc(3 / var(--vw-min) * 100vw),3px);
}
@media screen and (max-width:768px){
	.musicCont::before,
	.musicCont::after {
		height: calc(2 / var(--vw-min) * 100vw);
	}
	.musicCont::after {
		top: calc(8 / var(--vw-min) * 100vw);
	}
}
.musicContIn {
	width: 90.9090%;/*800*/
	max-width: calc(min(calc(1200 / var(--vw-min) * 100vw),1200px) - min(calc(240 / var(--vw-min) * 100vw),240px));
	display: flex;
	flex-wrap: wrap;
	margin-left: auto;
}
@media screen and (max-width:768px){
	.musicContIn {
		width: 100%;
		max-width: 100%;
		display: block;
		padding-left: calc(48 / var(--vw-min) * 100vw);
	}
}
/**
* musicDetail
**/
.musicDetail {
	display: flex;
}
.musicDetail.oneCol {
	display: grid;
	margin: 0 auto;
}
@media screen and (max-width:768px){
	.musicDetail {
		display: block;
	}
}
.music__l {
	width: min(calc(400 / var(--vw-min) * 100vw),400px);
}
.music__l.oneCol{
	width: min(calc(800 / var(--vw-min) * 100vw),800px);
	order: 2;
}
@media screen and (max-width:768px){
	.music__l {
		width: 100%;
		margin-bottom: calc(30 / var(--vw-min) * 100vw);
		order: 2;
	}
	.music__l.oneCol{
		width: 100%;
		margin-bottom: 0;
		order: 2;
	}
}
.musicYt {
	width: min(calc(600 / var(--vw-min) * 100vw),600px);
	margin: min(calc(40 / var(--vw-min) * 100vw),40px) auto 0;
	position: relative;
}
@media screen and (max-width:768px){
	.musicYt {
		width: 100%;
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
}
.musicYt img {
	opacity: 1;
}
.music__l-img img {
	width: 100%;
	pointer-events: none;
}
@media screen and (min-width:769px){
	.movie__yt-play {
		width: min(calc(99 / var(--vw-min) * 100vw),99px);
		height: min(calc(99 / var(--vw-min) * 100vw),99px);
	}
	.movie__yt-play::before {
		width: min(calc(99 / var(--vw-min) * 100vw),99px);
		height: min(calc(99 / var(--vw-min) * 100vw),99px);
	}
	.movie__yt-play::after {
		width: min(calc(64 / var(--vw-min) * 100vw),64px);
		height: min(calc(64 / var(--vw-min) * 100vw),64px);
	}
}
.music__r {
	width: calc(100% - min(calc(400 / var(--vw-min) * 100vw),400px));
	padding-left: min(calc(40 / var(--vw-min) * 100vw),40px);
}
.music__r.oneCol{
	width: 100%;
	text-align: center;
	padding: 0 0 32px 0;
	order: 1;
}
@media screen and (max-width:768px){
	.music__r  {
		width: 100%;
		padding-left: 0;
		order: 1;
	}
	.music__r.oneCol{
		width: 100%;
		padding: 0 0 16px 0;
		order: 1;
	}
}
.music__r-titName {
	font-size: min(calc(28 / var(--vw-min) * 100vw),28px);
	color: var(--color-redD44);
	line-height: 1.5;
	font-weight: 600;
	margin-bottom: min(calc(10 / var(--vw-min) * 100vw),10px);
	text-shadow: var(--text-shadow);
}
@media screen and (max-width:768px){
	.music__r-titName {
		font-size: calc(32 / var(--vw-min) * 100vw);
		margin-bottom: calc(5 / var(--vw-min) * 100vw);
	}
}
.music__r-tit {
	font-size: min(calc(32 / var(--vw-min) * 100vw),32px);
	line-height: 1.5;
	font-weight: 600;
	margin-bottom: min(calc(5 / var(--vw-min) * 100vw),5px);
	text-shadow: var(--text-shadow);
}
@media screen and (max-width:768px){
	.music__r-tit {
		font-size: calc(40 / var(--vw-min) * 100vw);
		margin-bottom: calc(15 / var(--vw-min) * 100vw);
	}
}
.music__r-cau {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 1;
	margin-bottom: min(calc(10 / var(--vw-min) * 100vw),10px);
	text-shadow: var(--text-shadow);
}
@media screen and (max-width:768px){
	.music__r-cau {
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-bottom: calc(15 / var(--vw-min) * 100vw);
	}
}
.music__r-release {
	font-size:min(calc(30 / var(--vw-min) * 100vw),30px);
	line-height: 1.5;
	font-weight: 600;
	text-shadow: var(--text-shadow);
}
@media screen and (max-width:768px){
	.music__r-release {
		font-size: calc(42 / var(--vw-min) * 100vw);
	}
}
.music__r-cont {
	margin-top: min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
	.music__r-cont {
		margin-top: calc(25 / var(--vw-min) * 100vw);
	}
}
.music__r-contTit,
.music__commentTit,
.music__profileTit {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	color: #fff;
	line-height: 1;
	display: inline-block;
	padding: min(calc(2 / var(--vw-min) * 100vw),2px);
	background-color: #000;
}
@media screen and (max-width:768px){
	.music__r-contTit,
	.music__commentTit,
	.music__profileTit{
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: calc(4 / var(--vw-min) * 100vw);
	}
}
.music__txtLists {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	margin-top: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
	.music__txtLists {
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: calc(10 / var(--vw-min) * 100vw);
	}
}
.music__txtItem {
	display: flex;
	text-shadow: var(--text-shadow);
}
.music__dt {
	color: var(--color-redD44);
	padding-right: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
	.music__dt {
		padding-right: calc(26 / var(--vw-min) * 100vw);
	}
}
.music__txtItem:not(:first-child) {
	margin-top: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
	.music__txtItem:not(:first-child) {
		margin-top: calc(20 / var(--vw-min) * 100vw); 
	}
}
/**
* comment / profile
**/
.music__comment,
.music__profile {
	margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.music__comment,
	.music__profile {
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
}
.music__comment {
	width: 100%;
	position: relative;
	border: min(calc(2 / var(--vw-min) * 100vw),2px) solid #000;
	padding: min(calc(24 / var(--vw-min) * 100vw),24px);
	background-color: rgba(255, 255, 255, .8);
}
@media screen and (max-width:768px){
	.music__comment {
		border-width: calc(4 / var(--vw-min) * 100vw);
		padding: calc(32 / var(--vw-min) * 100vw);
	}
}
.music__comment::before {
	content: "";
	width: calc(100% - min(calc(8 / var(--vw-min) * 100vw),8px));
	height: calc(100% - min(calc(8 / var(--vw-min) * 100vw),8px));
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	border: min(calc(1 / var(--vw-min) * 100vw),1px) solid #000;
}
@media screen and (max-width:768px){
	.music__comment::before {
		width: calc(100% - calc(10 / var(--vw-min) * 100vw));
		height: calc(100% - calc(10 / var(--vw-min) * 100vw));
		border-width: calc(2 / var(--vw-min) * 100vw);
	}
}
.music__commentTxt,
.music__profileTxt {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 2;
	margin-top: min(calc(10 / var(--vw-min) * 100vw),10px);
	text-shadow: var(--text-shadow);
}
.music__profileImg{
	width: 100%;
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
.music__imgList{
	width: calc((100% - (min(calc(10 / var(--vw-min) * 100vw), 10px) * 4)) / 5);
}
.music__imgList--thumb{
	border: #000 solid 1px;
	cursor: pointer;
	overflow: hidden;
}
.music__imgList--thumb img{
	display: block;
	width: 100%;
}
.music__imgList--ttl{
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	text-shadow: var(--text-shadow);
	line-height: 1.5;
	margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
}

@media screen and (max-width:768px){
	.music__commentTxt,
	.music__profileTxt {
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: calc(5 / var(--vw-min) * 100vw);
	}
	.music__profileImg{
		gap: calc(20 / var(--vw-min) * 100vw);
	}
	.music__imgList{
		width: calc((100% - ((20 / var(--vw-min) * 100vw) * 1)) / 2);
	}
	.music__imgList--ttl{
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-top: min(calc(10 / var(--vw-min) * 100vw), 10px);
	}
}
@media screen and (hover:hover) and (pointer: fine){
	.music__imgList--thumb img{
		transition: .3s ease;
	}
	.music__imgList--thumb:hover img{
		opacity: 85%;
		transform: scale(102%);
	}
}


/**
* tab
**/
.music__tabLists {
	width: 90.9090%;/*800*/
	max-width: calc(min(calc(1200 / var(--vw-min) * 100vw),1200px) - min(calc(240 / var(--vw-min) * 100vw),240px));
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border-radius: min(calc(24 / var(--vw-min) * 100vw),24px);
	border: min(calc(2 / var(--vw-min) * 100vw),2px) solid #000;
	margin: 0 0 min(calc(80 / var(--vw-min) * 100vw),80px) auto;
	background-color: rgba(255, 255, 255, .6);
}
.music__tabLists::before {
	content: "";
	width: calc(100% - min(calc(4 / var(--vw-min) * 100vw),4px));
	height: calc(100% - min(calc(4 / var(--vw-min) * 100vw),4px));
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	border-radius: min(calc(24 / var(--vw-min) * 100vw),24px);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-image: linear-gradient(#000, #000);
	transition: background-size .3s var(--cubic-bezier01), background-position .3s var(--cubic-bezier01);
}
@media screen and (max-width:768px){
	.music__tabLists {
		width: calc(655 / var(--vw-min) * 100vw);
		max-width: 100%;
		border-radius: calc(36 / var(--vw-min) * 100vw);
		border-width: calc(4 / var(--vw-min) * 100vw);
		margin-bottom: calc(96 / var(--vw-min) * 100vw);
	}
	.music__tabLists::before {
		width: calc(100% - calc(8 / var(--vw-min) * 100vw));
		height: calc(100% - calc(8 / var(--vw-min) * 100vw));
		border-radius: calc(36 / var(--vw-min) * 100vw);
	}
}
.opening .music__tabLists::before {
	background-position: left center;
}
.ending .music__tabLists::before {
	background-position: right center;
}
.music__tabItem {
	width: calc(100% / 2);
	position: relative;
}
.music__tabItem::before {
	content: "";
	width: calc(100% - min(calc(4 / var(--vw-min) * 100vw),4px));
	height: calc(100% - min(calc(4 / var(--vw-min) * 100vw),4px));
	display: block;
	position: absolute;
	inset: 0;
	margin: auto;
	border-radius: min(calc(20 / var(--vw-min) * 100vw),20px);
	background-color: var(--color-redD44);
	opacity: 0;
}
@media screen and (max-width:768px){
	.music__tabItem::before {
		width: calc(100% - calc(8 / var(--vw-min) * 100vw));
		height: calc(100% - calc(8 / var(--vw-min) * 100vw));
		border-radius: calc(36 / var(--vw-min) * 100vw);
	}
}
.music__tabLink {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 1;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-decoration: none;
	padding: min(calc(12 / var(--vw-min) * 100vw),12px) 0;
	transition: .3s var(--cubic-bezier01);
}
@media screen and (max-width:768px){
	.music__tabLink  {
		font-size: calc(24 / var(--vw-min) * 100vw);
		padding: calc(20 / var(--vw-min) * 100vw) 0;
	}
}
.music__tabLink::before {
	content: "";
	width: min(calc(32 / var(--vw-min) * 100vw),32px);
	height: min(calc(32 / var(--vw-min) * 100vw),32px);
	display: block;
	border-radius: 50%;
	background-color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: min(calc(4 / var(--vw-min) * 100vw),4px);
	margin: auto;
	opacity: 0;
}
.music__tabLink::after {
	content: "";
	width: min(calc(31 / var(--vw-min) * 100vw),31px);
	height: min(calc(23 / var(--vw-min) * 100vw),23px);
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: min(calc(4 / var(--vw-min) * 100vw),4px);
	margin: auto;
	-webkit-mask: url(../img/common/deco/deco_fan.svg)no-repeat center/contain;
	mask: url(../img/common/deco/deco_fan.svg)no-repeat center/contain;
	background-color: #000;
	opacity: 0;
}
@media screen and (max-width:768px){
	.music__tabLink::before {
		width: calc(48 / var(--vw-min) * 100vw);
		height: calc(48 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
	}
	.music__tabLink::after {
		width: calc(46 / var(--vw-min) * 100vw);
		height: calc(36 / var(--vw-min) * 100vw);
		right: calc(8 / var(--vw-min) * 100vw);
	}
}
.music__tab-txt {
	position: relative;
	color: #000;
	transition: .3s var(--cubic-bezier01);
}
/** active **/
.music__tabItem.is-active::before {
	opacity: 1;
}
.music__tabItem.is-active .music__tabLink::before,
.music__tabItem.is-active .music__tabLink::after {
	opacity: 1;
}
.music__tabItem.is-active .music__tab-txt {
	color: #fff;
}
.music__tabLists.--opening-active::before {
  background-size: 100% 100%;
  background-position: right center;
}
.music__tabLists.--ending-active::before {
  background-size: 100% 100%;
  background-position: left center;
}
.music__tabLists.--opening-active .music__tab-txt,
.music__tabLists.--ending-active .music__tab-txt {
  	color: #fff;
}
.musicYt::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    -webkit-mask: url(../img/common/deco/deco_movieframe.svg) no-repeat center / contain;
    mask: url(../img/common/deco/deco_movieframe.svg) no-repeat center / contain;
    background-color: #000;
    pointer-events: none;
}