@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : music.css
Description :
===================================================================== */


/* =====================================================================
*    music
* =================================================================== */
.music .sec_ttl {
    margin: 0 0 calc(140 / 750 * 100%);
}

.music .sec_contents {
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
}

.music_box {
}

.music_artist {
}

.music_artist_img {
    width: calc(404 / 690 * 100%);
    margin: 0 auto calc(70 / 690 * 100%);
}

.music_artist_img::before,
.music_artist_img::after,
.music_artist_img_bg::before,
.music_artist_img_bg::after {
    content: "";
    display: block;
    width: calc(40 / 404 * 100%);
    padding-top: calc(40 / 404 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    border-top: 2px solid #ff2cb2;
    border-left: 2px solid #ff2cb2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: calc(-18 / 404 * 100%) 0 0 calc(-18 / 404 * 100%);
}

.music_artist_img::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: auto;
    right: 0;
    margin: calc(-18 / 404 * 100%) calc(-18 / 404 * 100%) 0 0;
}

.music_artist_img_bg::before {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: auto;
    bottom: 0;
    margin: 0 0 calc(-18 / 404 * 100%) calc(-18 / 404 * 100%);
}

.music_artist_img_bg::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    margin: 0 calc(-18 / 404 * 100%) calc(-18 / 404 * 100%) 0;
}

.music_artist_img img {
    border: 1px solid #6e6e6c;
}

.music_artist_txt {
    margin: 0 0 calc(70 / 690 * 100%);
}

.music_artist_txt dt {
    margin: 0 0 calc(30 / 690 * 100%);
    color: #fff;
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.05em;
    text-align: center;
}

.music_artist_txt dt::after {
    content: "";
    display: block;
    width: calc(90 / 690 * 100%);
    margin: calc(30 / 690 * 100%) auto 0;
    padding-top: calc(22 / 690 * 100%);
    background: url(../images/common/line_yellow2.png) repeat-x left top;
    background-size: auto 100%;
}

.music_artist_txt1 {
    color: #ff2cb2;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.music_artist_txt2 {
    margin: calc(25 / 690 * 100%) 0 0;
    color: #fff;
    font-size: 2.8rem;
    line-height: 1.5;
    text-align: center;
}

.music_comment,
.music_cdinfo {
    padding: 0 0 calc(70 / 690 * 100%);
    border: 1px solid #6e6e6c;
    background-color: rgba(59, 66, 76, 0.35);
}
.music_cdinfo {
    margin-top: calc(80/690 * 100%);
}

.music_comment_txt dt,
.music_cdinfo_txt dt {
    width: calc(412 / 688 * 100%);
    margin: 0 0 calc(45 / 688 * 100%);
}

.music_comment_txt dd,
.music_cdinfo_txt dd {
    margin: 0 0 calc(60 / 688 * 100%);
    padding: 0 calc(30 / 688 * 100%);
    color: #fff;
    font-size: 2.8rem;
    line-height: 1.714;
    /* letter-spacing: -0.05em; */
}
.music_cdinfo_txt dd.music_cdttl span{
    color:#ff2cb2;
    font-weight: bold;
}
.music_cdinfo_txt a {
    color:#ff2cb2;
    text-decoration: underline;
    display: inline-block;
}
.music_site a {
    width: calc(380 / 688 * 100%);
    margin: 0 auto;
    padding: 1.21em 0;
    border: calc(2 / 750 * 100vw) solid #fff100;
    background-color: #14161a;
    color: #fff100;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: center;
}

.music_site a::before {
    content: "";
    display: block;
    width: calc(20 / 376 * 100%);
    height: 100%;
    background: url(../images/music/btn_arrow.svg) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 calc(25 / 376 * 100%) 0 0;
}

.music_site a::after {
    content: "";
    display: block;
    width: calc(360 / 376 * 100%);
    padding-top: calc(80 / 376 * 100%);
    border: calc(2 / 750 * 100vw) solid #fff100;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(6 / 376 * 100%) 0 0 calc(6 / 376 * 100%);
}

@media screen and (min-width: 768px) {
    .music .sec_ttl {
        margin: 0 0 calc(90 / 1000 * 100%);
    }
    
    .music .sec_contents {
        width: 100%;
    }
    
    .music_artist_img {
        width: calc(560 / 1000 * 100%);
        margin: 0 auto calc(70 / 1000 * 100%);
    }
    
    .music_artist_img::before,
    .music_artist_img::after,
    .music_artist_img_bg::before,
    .music_artist_img_bg::after {
        width: calc(20 / 560 * 100%);
        padding-top: calc(20 / 560 * 100%);
        margin: calc(-7 / 560 * 100%) 0 0 calc(-7 / 560 * 100%);
    }
    
    .music_artist_img::after {
        margin: calc(-7 / 560 * 100%) calc(-7 / 560 * 100%) 0 0;
    }
    
    .music_artist_img_bg::before {
        margin: 0 0 calc(-7 / 560 * 100%) calc(-7 / 560 * 100%);
    }
    
    .music_artist_img_bg::after {
        margin: 0 calc(-7 / 560 * 100%) calc(-7 / 560 * 100%) 0;
    }
    
    .music_artist_txt {
        margin: 0 0 calc(75 / 1000 * 100%);
    }
    
    .music_artist_txt dt {
        margin: 0 0 calc(15 / 1000 * 100%);
        font-size: 4.6rem;
    }
    
    .music_artist_txt dt::after {
        width: calc(45 / 1000 * 100%);
        margin: calc(15 / 1000 * 100%) auto 0;
        padding-top: calc(11 / 1000 * 100%);
    }
    
    .music_artist_txt1 {
        font-size: 3.2rem;
    }
    
    .music_artist_txt2 {
        margin: calc(30 / 1000 * 100%) 0 0;
        font-size: 2rem;
    }
    
    .music_comment,
    .music_cdinfo  {
        padding: 0 0 calc(50 / 1000 * 100%);
    }
    .music_cdinfo {
        margin-top: calc(80/1000 * 100%);
    }
    
    .music_comment_txt dt,
    .music_cdinfo_txt dt {
        width: calc(206 / 998 * 100%);
        margin: 0 0 calc(35 / 998 * 100%);
    }
    
    .music_comment_txt dd,
    .music_cdinfo_txt dd {
        margin: 0 0 calc(45 / 998 * 100%);
        padding: 0 calc(30 / 998 * 100%);
        font-size: 2.1rem;
        line-height: 1.762
    }
    .music_cdinfo_txt dd {
        font-size: 1.6rem;
    }
    
    .music_site a {
        width: calc(322 / 998 * 100%);
        padding: 0.85em 0;
        border-width: 1px;
        font-size: 2.3rem;
    }
    
    .music_site a::before {
        width: calc(12 / 320 * 100%);
        margin: 0 calc(20 / 320 * 100%) 0 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .music_site a::after {
        width: calc(100% - 12px);
        height: calc(100% - 12px);
        padding-top: 0;
        margin: 5px 0 0 5px;
        border-width: 1px;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .music_site a:hover {
        border-color: #ff2cb2;
        color: #ff2cb2;
    }
    
    .music_site a:hover::before {
        background: url(../images/music/btn_arrow_hover.svg) no-repeat center center;
        background-size: 100% auto;
    }
    
    .music_site a:hover::after {
        border-color: #ff2cb2;
    }
}

@media screen and (min-width: 1200px) {
    
}