@charset "utf-8";
/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
/**
* DECO
**/
.subSec__deco-handlegrid {
	top: 0;
	right: min(calc(200 / var(--vw-min) * 200vw),200px);
}
@media screen and (max-width:768px){
	.subSec__deco-handlegrid {
		top: calc(-120 / var(--vw-min) * 100vw);
		right: calc(26 / var(--vw-min) * 100vw);
	}
}
.subSec__deco-coffee {
	top: min(calc(220 / var(--vw-min) * 100vw),220px);
	right: min(calc(90 / var(--vw-min) * 100vw),90px);
}
@media screen and (max-width:768px){
	.subSec__deco-coffee {
		top: calc(185 / var(--vw-min) * 100vw);
		right: calc(33 / var(--vw-min) * 100vw);
	}
}
.subSec__deco-plate {
	width: min(calc(285 / var(--vw-min) * 100vw),285px);
	height: min(calc(285 / var(--vw-min) * 100vw),285px);
	position: absolute;
	top: min(calc(130 / var(--vw-min) * 100vw),130px);
	left: min(calc(24 / var(--vw-min) * 100vw),24px);
	z-index: 1;
	-webkit-filter: drop-shadow(5px 5px 5px #767676);
	filter: drop-shadow(5px 5px 5px #767676);
	background: url(../img/common/deco/deco_plate.png)no-repeat center/contain;
	opacity: 0;
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.subSec__deco-plate {
		width: calc(161 / var(--vw-min) * 100vw);
		height: calc(170 / var(--vw-min) * 100vw);
		top: calc(170 / var(--vw-min) * 100vw);
		left: calc(-10 / var(--vw-min) * 100vw);
	}
}
.subSec__deco-plate::before {
	content: "";
	width: min(calc(174 / var(--vw-min) * 100vw),174px);
	height: min(calc(174 / var(--vw-min) * 100vw),174px);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(../img/common/deco/deco_header.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
	.subSec__deco-plate::before {
		width: calc(106 / var(--vw-min) * 100vw);
		height: calc(106 / var(--vw-min) * 100vw);
	}
}
/**
* CONT
**/
.music {
	padding-bottom: min(calc(100 / var(--vw-min) * 100vw),100px);
}
@media screen and (max-width:768px){
	.music {
		padding: calc(180 / var(--vw-min) * 100vw) 0 calc(100 / var(--vw-min) * 100vw);
	}
}
.musicWrap {
	width: min(calc(960 / var(--vw-min) * 100vw),960px);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.musicWrap {
		width: 100%;
	}
}
.subSec .cont-tit {
	color: var(--color-orange);
	margin-bottom: 0;
}
.music .cont-tit::before {
	content: "";
	width: min(calc(532 / var(--vw-min) * 100vw),532px);
	height: min(calc(462 / var(--vw-min) * 100vw),462px);
	display: block;
	position: absolute;
	z-index: 1;
	top: max(calc(-230 / var(--vw-min) * 100vw),-230px);
	left: min(calc(190 / var(--vw-min) * 100vw),190px);
	-webkit-filter: drop-shadow(13px 15px 14px #6a664f);
	filter: drop-shadow(13px 15px 14px #6a664f);
	background: url(../img/common/deco/deco_blackpan.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
	.music .cont-tit::before {
		widows: calc(532 / var(--vw-min) * 100vw);
		height: calc(462 / var(--vw-min) * 100vw);
		top: calc(-230 / var(--vw-min) * 100vw);
		left: calc(85 / var(--vw-min) * 100vw);
		margin: auto;
	}
}
.music__item-subTit {
	color: var(--color-orange);
	letter-spacing: 0.01em;
	padding-right: min(calc(30 / var(--vw-min) * 100vw),30px);
}
@media screen and (max-width:768px){
	.music__item-subTit {
		padding-right: 0;
	}
}
.music__lists {
	width: min(calc(960 / var(--vw-min) * 100vw),960px);
	position: relative;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: min(calc(24 / var(--vw-min) * 100vw),24px);
	margin: 0 auto;
    padding-top: min(calc(170 / var(--vw-min) * 100vw),170px);
	opacity: 0;
	transform: translateY(100px);
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.music__lists {
		width: 100%;
		grid-template-columns: repeat(1,1fr);
		gap: calc(40 / var(--vw-min) * 100vw);
		padding: calc(160 / var(--vw-min) * 100vw) calc(54 / var(--vw-min) * 100vw) 0;
	}
}
.music__link {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	font-weight: 800;
	line-height: 1;
	color: var(--color-brown);
	width: 100%;
	height: 100%;
	display: block;
	text-decoration: none;
}
@media screen and (max-width:768px){
	.music__link {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}
.music__img {
	width: 100%;
	padding-top: 100%;
	position: relative;
	overflow: hidden;
	border: min(calc(10 / var(--vw-min) * 100vw),10px) solid var(--color-orange);
}
.music__img img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
	pointer-events: none;
	transition: .3s ease;
}
.music__titWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: min(calc(28 / var(--vw-min) * 100vw),28px);
}
@media screen and (max-width:768px){
	.music__titWrap {
		margin-top: calc(28 / var(--vw-min) * 100vw);
	}
}
.music__cate {
	color: var(--color-orange);
}
.music__tit {
	margin: min(calc(20 / var(--vw-min) * 100vw),20px) 0;
}
@media screen and (max-width:768px){
	.music__tit {
		margin: calc(20 / var(--vw-min) * 100vw) 0;
	}
}
@media (hover: hover) and (pointer: fine){
	.music__link:hover .music__img img{
		transform: scale(1.1);
	}
}
/*-----------------------------------------------
 * DETAIL
-------------------------------------------------*/
.music__detailWrap {
	position: relative;
	z-index: 1;
	padding-top: min(calc(170 / var(--vw-min) * 100vw),170px);
	opacity: 0;
	transform: translateY(100px);
	transition: .3s ease;
}
@media screen and (max-width:768px){
	.music__detailWrap {
		padding: calc(160 / var(--vw-min) * 100vw) calc(54 / var(--vw-min) * 100vw) 0;
	}
}
.music__itemTitWrap {
	font-size: min(calc(22 / var(--vw-min) * 100vw),22px);
	font-weight: 800;
	display: flex;
	padding-bottom: min(calc(30 / var(--vw-min) * 100vw),30px);
	border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-brown);
}
@media screen and (max-width:768px){
	.music__itemTitWrap {
		font-size: calc(22 / var(--vw-min) * 100vw);
		flex-direction: column;
		padding-bottom: calc(30 / var(--vw-min) * 100vw);
		border-width: calc(1 / var(--vw-min) * 100vw);
	}
}
.music__detail-tit {
	font-weight: 800;
}
.music__detail-deco {
	width: min(calc(56 / var(--vw-min) * 100vw),56px);
	height: min(calc(53 / var(--vw-min) * 100vw),53px);
	margin: min(calc(35 / var(--vw-min) * 100vw),35px) auto;
	-webkit-mask: url(../img/common/deco/deco_dishes-normal.svg)no-repeat center /contain;
	mask: url(../img/common/deco/deco_dishes-normal.svg)no-repeat center /contain;
	background-color: var(--color-brown);
}
@media screen and (max-width:768px){
	.music__detail-deco {
		width: calc(80 / var(--vw-min) * 100vw);
		height: calc(76 / var(--vw-min) * 100vw);
		margin: calc(40 / var(--vw-min) * 100vw) auto;
	}
}
.music__detail {
    font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
    font-weight: 800;
    line-height: 2;
	display: flex;
    padding-bottom: min(calc(70 / var(--vw-min) * 100vw), 70px);
    border-bottom: min(calc(1 / var(--vw-min) * 100vw), 1px) solid var(--color-brown);
}
@media screen and (max-width:768px){
	.music__detail {
		font-size: calc(20 / var(--vw-min) * 100vw);
		display: block;
        padding-bottom: calc(40 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
	}
}
.music__detail-l {
	width: min(calc(420 / var(--vw-min) * 100vw),420px);
	position: relative;
}
@media screen and (max-width:768px){
	.music__detail-l {
		width: 100%;
	}
}
.music__detail-imgLists {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	margin-top: max(calc(-150 / var(--vw-min) * 100vw),-150px);
	padding-top: min(calc(150 / var(--vw-min) * 100vw),150px);
}
@media screen and (max-width:768px){
	.music__detail-imgLists {
		position: relative;
		margin: 0 0 calc(40 / var(--vw-min) * 100vw);
		padding-top: 0;
	}
}
.music__detail-img:not(:first-child) {
	margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.music__detail-img:not(:first-child) {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}
.music__detail-img img {
	width: 100%;
	pointer-events: none;
}
.music__detail-r {
	width: calc(100% - min(calc(420 / var(--vw-min) * 100vw),420px));
	padding-left: min(calc(35 / var(--vw-min) * 100vw),35px);
}
@media screen and (max-width:768px){
	.music__detail-r {
		width: 100%;
		padding-left: 0;
	}
}
.music__detailName {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	font-weight: 900;
	line-height: 1.5;
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
	.music__detailName {
		font-size: calc(24 / var(--vw-min) * 100vw);
		margin-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}
.music__detailTxtWrap {
	margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
	.music__detailTxtWrap {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}
.music__detailTit {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	color: var(--color-orange);
	font-weight: 800;
	line-height: 1.8;
}
@media screen and (max-width:768px){
	.music__detailTit {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
}
.music__detail-txt {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight: 800;
	line-height: 2;
	margin-top: min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
	.music__detail-txt {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-top: calc(15 / var(--vw-min) * 100vw);
	}
}
/**
* linkBtn
**/
.music__detail-r .linkBtn {
	width: 100%;
}
.music__detail-r .linkA {
	width: 100%;
	border-top: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-brown);
}
.linkA {
	padding: min(calc(16 / var(--vw-min) * 100vw), 16px) min(calc(40 / var(--vw-min) * 100vw),40px);
}
/*-----------------------------------------------
 * アニメーション
-------------------------------------------------*/
body.--is-subload .pageNavWrap {
	opacity: 1;
	transition-delay: 1.8s;
}
body.--is-subload .subSec__deco-plate {
	opacity: 1;
	transition-delay: 1.8s;
}
body.--is-subload .music__lists,
body.--is-subload .music__detailWrap {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 1.5s;
}
.cont-tit.spin2.--animate::before {
	animation: spin2 .5s ease-in-out;
}