@charset "utf-8";
/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
.cont-tit-en::before {
    width: min(calc(247 / var(--vw-min) * 100vw),247px);
    height: min(calc(39 / var(--vw-min) * 100vw),39px);
    background: url(../img/common/tit/music.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .cont-tit-en::before {
        width: calc(165 / var(--vw-min) * 100vw);
        height: calc(26 / var(--vw-min) * 100vw);
    }
}
.cont-tit-en::after {
    width: min(calc(309 / var(--vw-min) * 100vw),309px);
    height: min(calc(99 / var(--vw-min) * 100vw),99px);
    top: max(calc(-77 / var(--vw-min) * 100vw),-77px);
    left: max(calc(-26 / var(--vw-min) * 100vw),-26px);
    background: url(../img/common/tit/music-blur.svg)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .cont-tit-en::after {
        width: calc(206 / var(--vw-min) * 100vw);
        height: calc(66 / var(--vw-min) * 100vw);
        top: calc(-51 / var(--vw-min) * 100vw);
        left: calc(-17 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * TAB
-------------------------------------------------*/
.music__tabLists {
    display: flex;
    justify-content: center;
    gap: min(calc(20 / var(--vw-min) * 100vw),20px);
    margin-bottom: min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
    .music__tabLists {
        gap: calc(11 / var(--vw-min) * 100vw);
        margin-bottom: calc(20 / var(--vw-min) * 100vw);
    }
}
.music__tabLink {
    width: min(calc(200 / var(--vw-min) * 100vw),200px);
    height: min(calc(50 / var(--vw-min) * 100vw),50px);
    display: block;
    padding: min(calc(4 / var(--vw-min) * 100vw),4px);
    background: rgba(255,255,255,.6);
    border: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
    text-decoration: none;
    transition: filter var(--duration-hover) var(--easing-hover), transform var(--duration-hover) var(--easing-hover-bounce);
}
@media screen and (max-width:768px){
    .music__tabLink {
        width: calc(164 / var(--vw-min) * 100vw);
        height: calc(42 / var(--vw-min) * 100vw);
        padding: calc(4 / var(--vw-min) * 100vw);
        border-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.music__tabLink-in {
    font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
    color: var(--color-blue2D9);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--color-greenB7E);
}
@media screen and (max-width:768px){
    .music__tabLink-in {
        font-size: calc(12 / var(--vw-min) * 100vw);
    }
}
.music__tabLink-in::after {
    content: "";
    width: min(calc(16.2 / var(--vw-min) * 100vw),16.2px);
    height: min(calc(16.2 / var(--vw-min) * 100vw),16.2px);
    display: block;
    position: absolute;
    top: 0;
    right: min(calc(8 / var(--vw-min) * 100vw),8px);
    bottom: 0;
    margin: auto 0;
    -webkit-mask: url(../img/common/deco/arrow4.svg)no-repeat center/contain;
    mask: url(../img/common/deco/arrow4.svg)no-repeat center/contain;
    background-color: var(--color-blue2D9);
    transform: rotate(90deg);
}
@media screen and (max-width:768px){
    .music__tabLink-in::after {
        width: calc(13 / var(--vw-min) * 100vw);
        height: calc(13 / var(--vw-min) * 100vw);
        right: calc(8 / var(--vw-min) * 100vw);
    }
}
.music__tabItem.--is-active .music__tabLink-in {
    color: #fff;
    background-image: var(--green-90gradient);
}
.music__tabItem.--is-active .music__tabLink-in::after {
    background-color: #fff;
}
@media (hover: hover) and (pointer: fine){
    .music__tabLink:hover {
        filter: brightness(1.06);
        transform: scale(1.03);
    }
}
/*-----------------------------------------------
 * BLOCK
-------------------------------------------------*/
.music__block {
    position: relative;
    padding: min(calc(100 / var(--vw-min) * 100vw),100px) min(calc(100 / var(--vw-min) * 100vw),100px) min(calc(140 / var(--vw-min) * 100vw),140px);
    background: rgba(255,255,255,.65);
    box-shadow: 0 0 20px 0 var(--color-green84B);
    scroll-margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
    .music__block {
        padding: calc(50 / var(--vw-min) * 100vw) calc(18 / var(--vw-min) * 100vw) calc(70 / var(--vw-min) * 100vw);
        box-shadow: 0 0 10px 0 var(--color-green84B);
        scroll-margin-top: calc(20 / var(--vw-min) * 100vw);
    }
}
.music__block + .music__block {
    margin-top: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
    .music__block + .music__block {
        margin-top: calc(40 / var(--vw-min) * 100vw);
    }
}
.music__blockTit {
    font-size: min(calc(22 / var(--vw-min) * 100vw),22px);
    font-weight: 600;
    line-height: 1.7273;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .music__blockTit {
        font-size: calc(14 / var(--vw-min) * 100vw);
        line-height: 1;
    }
}
.music__blockTit::after {
    content: "";
    height: min(calc(7 / var(--vw-min) * 100vw),7px);
    display: block;
    margin-top: min(calc(18 / var(--vw-min) * 100vw),18px);
    border-top: min(calc(3 / var(--vw-min) * 100vw),3px) solid var(--color-pinkE1A);
    border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .music__blockTit::after {
        height: calc(5 / var(--vw-min) * 100vw);
        margin-top: calc(9 / var(--vw-min) * 100vw);
        border-top-width: calc(2 / var(--vw-min) * 100vw);
        border-bottom-width: calc(1 / var(--vw-min) * 100vw);
    }
}
.music__song {
    font-size: min(calc(26 / var(--vw-min) * 100vw),26px);
    color: var(--color-blue2D9);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    margin-top: min(calc(35 / var(--vw-min) * 100vw),35px);
}
@media screen and (max-width:768px){
    .music__song {
        font-size: calc(14 / var(--vw-min) * 100vw);
        margin-top: calc(15 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * CREDIT
-------------------------------------------------*/
.music__credits {
    display: flex;
    flex-direction: column;
    gap: min(calc(20 / var(--vw-min) * 100vw),20px);
    margin-top: min(calc(27 / var(--vw-min) * 100vw),27px);
}
@media screen and (max-width:768px){
    .music__credits {
        gap: calc(12 / var(--vw-min) * 100vw);
        margin-top: calc(21 / var(--vw-min) * 100vw);
    }
}
.music__credit {
    display: flex;
    align-items: center;
    gap: min(calc(6 / var(--vw-min) * 100vw),6px);
}
@media screen and (max-width:768px){
    .music__credit {
        gap: 0;
    }
}
.music__credit-dt {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    color: var(--color-blue2D9);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
    width: min(calc(100 / var(--vw-min) * 100vw),100px);
}
@media screen and (max-width:768px){
    .music__credit-dt {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.3333;
        width: calc(80 / var(--vw-min) * 100vw);
    }
}
.music__credit-dd {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}
@media screen and (max-width:768px){
    .music__credit-dd {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.3333;
    }
}
/*-----------------------------------------------
 * BODY
-------------------------------------------------*/
.music__body {
    display: flex;
    align-items: flex-start;
    gap: min(calc(50 / var(--vw-min) * 100vw),50px);
    margin-top: min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
    .music__body {
        flex-direction: column;
        gap: calc(24 / var(--vw-min) * 100vw);
        margin-top: calc(18 / var(--vw-min) * 100vw);
    }
}
.music__photo {
    width: min(calc(350 / var(--vw-min) * 100vw),350px);
    flex-shrink: 0;
}
@media screen and (max-width:768px){
    .music__photo {
        width: 100%;
    }
}
.music__photo img {
    width: 100%;
    height: auto;
    display: block;
}
.music__aside {
    display: flex;
    flex-direction: column;
    gap: min(calc(34 / var(--vw-min) * 100vw),34px);
    width: 100%;
    min-width: 0;
}
@media screen and (max-width:768px){
    .music__aside {
        gap: calc(23 / var(--vw-min) * 100vw);
    }
}
/*-----------------------------------------------
 * BOX
-------------------------------------------------*/
.music__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
    .music__box {
        gap: calc(8 / var(--vw-min) * 100vw);
    }
}
.music__box.--comment {
    margin-top: min(calc(50 / var(--vw-min) * 100vw),50px);
    padding-top: min(calc(50 / var(--vw-min) * 100vw),50px);
    border-top: min(calc(1 / var(--vw-min) * 100vw),1px) solid var(--color-pinkE1A);
}
@media screen and (max-width:768px){
    .music__box.--comment {
        margin-top: calc(23 / var(--vw-min) * 100vw);
        padding-top: 0;
        border-top: none;
    }
}
.music__boxTit {
    font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    height: min(calc(20 / var(--vw-min) * 100vw),20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 min(calc(12 / var(--vw-min) * 100vw),12px);
    background: var(--color-blue2D9);
}
@media screen and (max-width:768px){
    .music__boxTit {
        font-size: calc(14 / var(--vw-min) * 100vw);
        height: calc(18 / var(--vw-min) * 100vw);
        padding: 0 calc(10 / var(--vw-min) * 100vw);
    }
}
.music__boxBody {
    font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
    font-weight: 500;
    line-height: 1.7333;
    letter-spacing: 0;
    width: 100%;
}
@media screen and (max-width:768px){
    .music__boxBody {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.8333;
        letter-spacing: 0.04em;
    }
}
.music__member {
    font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
    line-height: 1.7333;
    letter-spacing: 0;
    display: flex;
    align-items: flex-start;
    gap: min(calc(6 / var(--vw-min) * 100vw),6px);
    width: 100%;
}
@media screen and (max-width:768px){
    .music__member {
        font-size: calc(12 / var(--vw-min) * 100vw);
        line-height: 1.8333;
        letter-spacing: 0.04em;
        gap: 0;
    }
}
.music__member-dt {
    color: var(--color-blue2D9);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.music__member-dd {
    font-weight: 500;
}
/*-----------------------------------------------
 * SNS
-------------------------------------------------*/
.music__snsLists {
    display: flex;
    flex-wrap: wrap;
    gap: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
    .music__snsLists {
        gap: calc(10 / var(--vw-min) * 100vw);
    }
}
.music__snsLink {
    width: min(calc(46 / var(--vw-min) * 100vw),46px);
    height: min(calc(46 / var(--vw-min) * 100vw),46px);
    display: block;
    position: relative;
    border-radius: 50%;
    background-image: var(--green-gradient);
    text-decoration: none;
    transition: filter var(--duration-hover) var(--easing-hover), transform var(--duration-hover) var(--easing-hover-bounce);
}
@media screen and (max-width:768px){
    .music__snsLink {
        width: calc(46 / var(--vw-min) * 100vw);
        height: calc(46 / var(--vw-min) * 100vw);
    }
}
.music__snsLink::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    background-color: #fff;
}
.music__snsItem.--site .music__snsLink::before {
    width: min(calc(18 / var(--vw-min) * 100vw),18px);
    height: min(calc(18 / var(--vw-min) * 100vw),18px);
    -webkit-mask-image: url(../img/common/sns/icon_site.svg);
    mask-image: url(../img/common/sns/icon_site.svg);
}
@media screen and (max-width:768px){
    .music__snsItem.--site .music__snsLink::before {
        width: calc(18 / var(--vw-min) * 100vw);
        height: calc(18 / var(--vw-min) * 100vw);
    }
}
.music__snsItem.--youtube .music__snsLink::before {
    width: min(calc(23 / var(--vw-min) * 100vw),23px);
    height: min(calc(16 / var(--vw-min) * 100vw),16px);
    -webkit-mask-image: url(../img/common/sns/icon_youtube.svg);
    mask-image: url(../img/common/sns/icon_youtube.svg);
}
@media screen and (max-width:768px){
    .music__snsItem.--youtube .music__snsLink::before {
        width: calc(23 / var(--vw-min) * 100vw);
        height: calc(16 / var(--vw-min) * 100vw);
    }
}
.music__snsItem.--x .music__snsLink::before {
    width: min(calc(19.6 / var(--vw-min) * 100vw),19.6px);
    height: min(calc(20 / var(--vw-min) * 100vw),20px);
    -webkit-mask-image: url(../img/common/sns/icon_x.svg);
    mask-image: url(../img/common/sns/icon_x.svg);
}
@media screen and (max-width:768px){
    .music__snsItem.--x .music__snsLink::before {
        width: calc(19.6 / var(--vw-min) * 100vw);
        height: calc(20 / var(--vw-min) * 100vw);
    }
}
.music__snsItem.--instagram .music__snsLink::before {
    width: min(calc(22 / var(--vw-min) * 100vw),22px);
    height: min(calc(22 / var(--vw-min) * 100vw),22px);
    -webkit-mask-image: url(../img/common/sns/icon_Instagram.svg);
    mask-image: url(../img/common/sns/icon_Instagram.svg);
}
@media screen and (max-width:768px){
    .music__snsItem.--instagram .music__snsLink::before {
        width: calc(22 / var(--vw-min) * 100vw);
        height: calc(22 / var(--vw-min) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine){
    .music__snsLink:hover {
        filter: brightness(1.12);
        transform: scale(1.08);
    }
}