/* usp-intro */
#usp-intro {
    clear: both;
}
#usp-intro .img {
    width: 100%;
    background-image: url(../IMAGES/intro_sp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 750 / 436;
}
#usp-intro .summary {
    padding: 8vw;
    background-color: #eee;
}
#usp-intro .summary dt {
    font-size: 5.33vw;
    letter-spacing: .1em;
    text-align: center;
}
#usp-intro .summary dd {
    margin-top: 3vw;
    font-size: 3.73vw;
    line-height: 1.8;
    letter-spacing: .1em;
    text-align: justify;
}



/* usp-sound */
#usp-sound {
    position: relative;
    height: 212vw;
    background-color: #000;
}
.usp-sound__wrap {
    position: relative;
    height: 100%;
    background-image: url(../IMAGES/sound/background_sp.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}


.usp-sound__header {
    position: relative;
    padding: 18vw 8vw 0;
}
.usp-sound__header:before {
    content: '';
    position: absolute;
    top: 9.6vw;
    left: 50%;
    width: 8.4vw;
    height: 5.06vw;
    margin-left: -4.2vw;
    background-image: url(../IMAGES/sound/icon_mic.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.usp-sound__header .title {
    font-size: 5vw;
    color: #fff;
    letter-spacing: .04em;
    text-align: center;
}
.usp-sound__header .summary {
    margin-top: 3vw;
    font-size: 3.73vw;
    color: #fff;
    letter-spacing: .12em;
    line-height: 2;
}
.usp-sound__header .caption {
    position: relative;
    margin-top: 2vw;
    padding-left: 3.4vw;
    font-size: 3.73vw;
    color: #858585;
    letter-spacing: .08em;
    line-height: 1.8;
}
.usp-sound__header .caption:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2.4vw;
    display: block;
    width: 0;
    height: 0;
    border-top: .8vw solid transparent;
    border-bottom: .8vw solid transparent;
    border-left: 1.86vw solid #858585;
}


.usp-sound__body {
    position: relative;
    margin: 4vw auto 0;
    width: 84.26vw;
    height: 114vw;
    /* background-color: rgba(255,255,255,.3); */
}
.usp-sound__item {
    position: absolute;
    width: 26.66vw;
    height: 50.66vw;
}
.usp-sound__item:nth-child(1) {
    left: 0;
    top: 0;
}
.usp-sound__item:nth-child(2) {
    left: 28.8vw;
    top: 0;
}
.usp-sound__item:nth-child(3) {
    left: 57.6vw;
    top: 0;
}
.usp-sound__item:nth-child(4) {
    left: 0;
    top: 65.33vw;
}
.usp-sound__item:nth-child(5) {
    left: 28.8vw;
    top: 65.33vw;
}
.usp-sound__item:nth-child(6) {
    left: 57.6vw;
    top: 65.33vw;
}
.usp-sound__item > .wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.usp-sound__item > .wrap:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5.4vw;
    z-index: 1;
    width: 3px;
    height: 3.73vw;
    background-color: #C3002F;
}
.usp-sound__item .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.usp-sound__item:nth-child(1) .bg {
    background-image: url(../IMAGES/sound/thumb_01_PGC10_sp.jpg);
}
.usp-sound__item:nth-child(2) .bg {
    background-image: url(../IMAGES/sound/thumb_02_KPGC110_sp.jpg);
}
.usp-sound__item:nth-child(3) .bg {
    background-image: url(../IMAGES/sound/thumb_03_BNR32_sp.jpg);
}
.usp-sound__item:nth-child(4) .bg {
    background-image: url(../IMAGES/sound/thumb_04_BCNR33_sp.jpg);
}
.usp-sound__item:nth-child(5) .bg {
    background-image: url(../IMAGES/sound/thumb_05_BNR34_sp.jpg);
}
.usp-sound__item:nth-child(6) .bg {
    background-image: url(../IMAGES/sound/thumb_06_DBA-R35_sp.jpg);
}
.usp-sound__item .type {
    position: absolute;
    left: 2vw;
    top: 4.8vw;
    font-size: 3.5vw;
    color: #fff;
    letter-spacing: .1em;
}
.usp-sound__item .year {
    position: absolute;
    left: 2vw;
    top: 9.8vw;
    font-size: 3.2vw;
    color: #858585;
    letter-spacing: .1em;
}
.usp-sound__item .label {
    margin-top: 1.6vw;
    font-size: 3.2vw;
    color: #858585;
    letter-spacing: .1em;
}


.usp-sound__modal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    height: 134vw;
}
.usp-sound__modal > .wrap {
    position: relative;
}
.usp-sound__prev {
    position: absolute;
    left: 8vw;
    bottom: 9.33vw;
    z-index: 1;
    width: 39.46vw;
    height: 10vw;
    border: .99px solid #858585;
    cursor: pointer;
    transition: opacity .3s ease-in;
}
.usp-sound__prev.disabled {
    opacity: .3;
    pointer-events: none;
}
.usp-sound__prev span {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 3.46vw;
    color: #fff;
    line-height: 1.1;
}
.usp-sound__prev span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border-top: 1.73vw solid transparent;
    border-bottom: 1.73vw solid transparent;
    border-right: 2.4vw solid #858585;
    transform: translateY(-50%) translateX(2.5vw);
}
.usp-sound__next {
    position: absolute;
    right: 8vw;
    bottom: 9.33vw;
    z-index: 1;
    width: 39.46vw;
    height: 10vw;
    border: .99px solid #858585;
    cursor: pointer;
    transition: opacity .3s ease-in;
}
.usp-sound__next.disabled {
    opacity: .3;
    pointer-events: none;
}
.usp-sound__next span {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 3.46vw;
    color: #fff;
    line-height: 1.1;
}
.usp-sound__next span:before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border-top: 1.73vw solid transparent;
    border-bottom: 1.73vw solid transparent;
    border-left: 2.4vw solid #858585;
    transform: translateY(-50%) translateX(-2.5vw);
}


.usp-sound__detail {
    padding: 0 8vw;
}
.usp-sound__detail > .wrap {
    position: relative;
    height: 110vw;
    border: .99px solid #858585;
    background-color: #1d1d1d;
}
.usp-sound__detail .close {
    position: absolute;
    right: 2.66vw;
    top: 2.66vw;
    width: 6.66vw;
    height: 6.66vw;
    z-index: 1;
    background-image: url(../IMAGES/sound/icon_close_sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.usp-sound__detail .img {
    position: absolute;
    left: 5.33vw;
    top: 22px;
    width: 35.06vw;
    height: 33.73vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}
.usp-sound__detail.usp-sound__detail-1 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_01_PGC10.jpg);
}
.usp-sound__detail.usp-sound__detail-2 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_02_KPGC110.jpg);
}
.usp-sound__detail.usp-sound__detail-3 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_03_BNR32.jpg);
}
.usp-sound__detail.usp-sound__detail-4 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_04_BCNR33.jpg);
}
.usp-sound__detail.usp-sound__detail-5 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_05_BNR34.jpg);
}
.usp-sound__detail.usp-sound__detail-6 .img {
    background-image: url(../IMAGES/sound/modal/modal_thumb_06_DBA-R35.jpg);
}
.usp-sound__detail .info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    height: 35vw;
    margin-left: 5.33vw;
    margin-top: 5.33vw;
    padding-left: 37.5vw;
    border-bottom: .99px solid #C3002F;
}
.usp-sound__detail .name {
    display: flex;
    width: 100%;
    padding-bottom: 4px;
    font-size: 3.73vw;
    font-weight: normal;
    color: #fff;
    align-items: flex-end;
    letter-spacing: .1em;
    line-height: 1.3;
}
.usp-sound__detail .type {
    width: calc(100% + 2.5vw);
    margin-left: -2.5vw;
    margin-top: .4vw;
    font-size: 4.8vw;
    color: #fff;
    letter-spacing: .08em;
    line-height: 1.1;
}
.usp-sound__detail .year {
    width: 100%;
    font-size: 3.73vw;
    color: #858585;
    letter-spacing: .1em;
}
.usp-sound__detail .summary {
    position: relative;
    padding: 2.4vw 5.33vw 0;
    font-size: 3.2vw;
    color: #fff;
    line-height: 2;
    letter-spacing: .08em;
}
.usp-sound__detail .movie {
    position: absolute;
    left: 50%;
    bottom: 7vw;
    width: 37.33vw;
    height: 37.33vw;
    margin-left: -18.665vw;
    background-color: #999;
}
.usp-sound__detail .play {
    position: absolute;
    left: 50%;
    bottom: 7vw;
    z-index: 99;
    width: 37.33vw;
    height: 37.33vw;
    margin-left: -18.665vw;
}



/* usp-chapter */
.usp-chapter {
    position: relative;
    margin-top: 1.6vw;
    aspect-ratio: 750 / 620;
    background-color: #000;
}
.usp-chapter#usp-exterior {
    margin-top: 13.33vw;
}
.usp-chapter__wrap {
    display: block;
    color: #000;
}
.usp-chapter#usp-interior .usp-chapter__wrap,
.usp-chapter#usp-performance .usp-chapter__wrap {
    color: #fff;
}
.usp-chapter .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#usp-exterior .bg {
    background-image: url(../IMAGES/usp01_sp.jpg);
}
#usp-interior .bg {
    background-image: url(../IMAGES/usp02_sp.jpg);
}
#usp-performance .bg {
    background-image: url(../IMAGES/usp03_sp.jpg);
}
.usp-chapter .label {
    position: absolute;
    left: 4vw;
    bottom: 4vw;
}
.usp-chapter .label span {
    position: relative;
    font-size: 4.26vw;
    letter-spacing: .1em;
    white-space: nowrap;
}
.usp-chapter .label span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: -6vw;
    width: 2.26vw;
    height: 3.46vw;
    margin-top: -1.73vw;
    background-image: url(../IMAGES/arrow_red.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
