/* ********************************************************************
        ミュージック
******************************************************************** */

#music {
    padding: calc(108 / 750 * 100%) 0 calc(140 / 750 * 100%);
    background-color: #009f9a;
    overflow: hidden;
}

#music h2 {
    width: calc(248/670 *100%);
    margin-left: calc(20/670 *100%);
    margin-bottom: calc(84/670*100%);
}

.music_box1 {
    width: calc(650/670 *100%);
    margin: 0 auto calc(100/650 *100%);
}

.music_box1::before,
.music_box1::after {
    content: "";
    display: block;
    width: calc(366/650 *100%);
    padding-top: calc(271/650 *100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.music_box1::before {
    background: url(../images/top/img_shape1.png) no-repeat center/contain;
    margin-top: calc(-90/650 *100%);
    margin-left: calc(412/650 *100%);
}

.music_box1::after {
    background: url(../images/top/img_shape2.png) no-repeat center/contain;
    margin-top: calc(181/650 *100%);
    margin-left: calc(-184/650 *100%);
}

.music_photo {
    z-index: 3;
    width: 100%;
    padding-top: 56.25%;
}

.music_photo iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.music_photo::after {
    content: "";
    display: block;
    background: url(../images/top/img_shape3.png) no-repeat center/contain;
    width: calc(144/650 *100%);
    padding-top: calc(160/650 *100%);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(260/650 *100%);
    margin-left: calc(570/650 *100%);
    z-index: 4;
}

.music_photo a span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.music_photo a span::before {
    content: "";
    display: block;
    width: calc(120 / 670 * 100vw);
    padding-top: calc(120 / 670 * 100vw);
    background: url(../images/top/btn_movie1.png) no-repeat center /contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 6;
}

.music_photo a span::after {
    content: "";
    display: block;
    width: calc(34 / 670 * 100vw);
    padding-top: calc(44 / 670 * 100vw);
    background: url(../images/top/btn_movie2.png) no-repeat center /contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 6;
    transform: translate(2px, 0);
}

.music_box2 {
    width: calc(650/670 *100%);
    margin: 0 auto calc(66/670 *100%);
    padding: 0 calc(10/670 *100%);
    color: #f8f8f8;
}

.music_artist dt span {}

.music_name {
    color: #fefefe;
    background: #ed7da3;
    font-size: 4rem;
    font-weight: 700;
    box-shadow: 0.6666vw 0.6666vw 0 #fff100;
    margin-bottom: calc(35/750 *100%);
    display: inline-block;
}

.music_artist_name {
    color: #fff100;
    font-size: 2.6rem;
    font-weight: 700;
    display: block;
}

.music_company {
    font-size: 2.2rem;
    margin-bottom: calc(48/650*100%);
}

.music_artist_txt {
    font-size: 2.6rem;
}

.music_box4 {
    margin: 0 auto calc(80/630 *100%);
}

.music_bnr {
  padding-bottom: calc(40/630 *100%);
}

.music_bnr li {
  width: 100%;
  margin: 0 auto;
}
.music_bnr li:nth-child(n + 1) {
    padding-top: calc(20/630 *100%);
}

@media screen and (min-width: 768px) {
    #music {
        padding: calc(80 / 1200 * 100%) 0 calc(110 / 1200 * 100%);
    }
    #music h2 {
        width: calc(227 / 1000 * 100%);
        margin: 0 0 calc(56/1000 *100%);
    }
    .music_box1 {
        width: calc(880/1000 *100%);
        margin: 0 auto calc(60/1000 *100%);
    }
    .music_box1::before,
    .music_box1::after {
        width: calc(366/880 *100%);
        padding-top: calc(271/880 *100%);
    }
    .music_box1::before {
        margin-top: calc(-58/880 *100%);
        margin-left: calc(683/880 *100%);
    }
    .music_box1::after {
        margin-top: calc(292/880 *100%);
        margin-left: calc(-216/880 *100%);
    }
    .music_photo::after {
        width: calc(144/880 *100%);
        padding-top: calc(160/880 *100%);
        margin-top: calc(366/880 *100%);
        margin-left: calc(791/880 *100%);
    }
    .music_photo a span::before {
        width: calc(120 / 880 * 100%);
        padding-top: calc(120 / 880 * 100%);
        transition: .5s;
        transform: rotateZ(0deg);
    }
    .music_photo a span::after {
        width: calc(34 / 880 * 100%);
        height: calc(44 / 880 * 100vw);
        transform: translate(4px, 0);
    }
    .music_photo a:hover {
        opacity: 1;
    }
    .music_photo a:hover span::before {
        transform: rotateZ(360deg);
    }
    .music_box2 {
        width: calc(880/1000 *100%);
        margin: 0 auto calc(40/1000 *100%);
        padding: 0;
    }
    .music_name {
        font-size: 3.6rem;
        box-shadow: 0.3vw 0.3vw 0 #fff100;
        margin-bottom: calc(24/880 *100%);
        padding: 0 calc(16/880 *100%);
    }
    .music_artist_name {
        font-size: 2.1rem;
    }
    .music_company {
        font-size: 1.4rem;
        margin-bottom: calc(30/880*100%);
    }
    .music_artist_txt {
        font-size: 1.6rem;
    }
    .music_box4 {
        width: calc(810/1000 *100%);
        margin: 0 auto calc(110/1000 *100%);
    }
    .music_bnr {
      text-align: center;
      margin: 0 auto;
    }
    .music_bnr li {
      width: calc(450/1000 *100%);
      margin: 0 auto;
      display:inline-block;
    }
    .music_bnr li:nth-child(n + 1) {
        padding-left: calc(20/1000 *100%);
    }
}

@media screen and (min-width: 1200px) {
    #music {
        padding: 80px 0 170px;
    }
    .music_name {
        box-shadow: 3px 3px 0 #fff100;
    }
}