/* ==============================


common


=================================*/

body main {
    color: #1D2085;
}

main section picture {
    display: inline-block;
}

.l-globalFooter {
    background-color: #fff;
    padding-top: 10%;
}

.l-globalFooter #shareBox {
    margin: 0 auto 10%;
}

.l-stickyBnr,
#stickyBnrEnd {
    line-height: 0;
}

.inner {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    padding: clamp(0px, 5.7vw, 80px) 0 clamp(0px, 8.6vw, 120px);

}

.u-story__sld {
    margin: 0;
}

.u-kv {
    z-index: 10;
}



@media screen and (max-width: 767px) {
    .inner {
        max-width: 420px;
        padding: clamp(0px, 10.3vw, 40px) 0;
    }

    .l-sldDoc__toggle {
        width: clamp(0px, 11.5vw, 45px);
        height: clamp(0px, 11.5vw, 45px);
    }

    .l-sldDoc__toggle::before,
    .l-sldDoc__toggle::after {
        width: clamp(0px, 1.0vw, 4px);
        height: clamp(0px, 4.1vw, 16px);
    }


}



/* ==============================


parallax


=================================*/
.parallax {
    position: fixed;
    display: block;
    background-image: url(../images/qqqbeatsLP/cmn__bg-tile-b.png);
    background-repeat: repeat;
    background-size: 39px 39px;
    width: 100vw;
    height: 100vh;
    z-index: -100;
}

.parallax>div {
    position: relative;
    height: 100vh;
    width: 100vw;
}

.parallax>div>div {
    position: absolute;
}

.parallax-l {
    top: 0;
    left: 0;
    width: clamp(0px, 42.3vw, 592px);
}

.parallax-r {
    bottom: 0;
    right: 0;
    width: clamp(0px, 58.4vw, 817px);
}

@media screen and (max-width: 767px) {

    .parallax-l {
        width: 95vw;
        max-width: 400px;
    }

    .parallax-r {
        width: 100vw;
        max-width: 400px;
    }

}

/* ==============================


cmn


=================================*/

.sec03,
.sec05,
.sec07 {
    background-image: url(../images/qqqbeatsLP/cmn__bg-tile-w.png);
    background-repeat: repeat;
    background-size: 39px 39px;
    border-radius: 40px 40px 0 0;
    position: relative;
}


.bg-under {
    position: relative;
}

.bg-under::before,
.bg-under::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -40px;
    width: 40px;
    height: 40px;
    z-index: -1;
}

.bg-under::before {
    left: 0;
    background: url(../images/qqqbeatsLP/cmn-bg-wh-b-l.svg) no-repeat center center/contain;
}

.bg-under::after {
    right: 0;
    background: url(../images/qqqbeatsLP/cmn-bg-wh-b-r.svg) no-repeat center center/contain;
}

@media screen and (max-width: 767px) {

    .sec03,
    .sec05,
    .sec07 {
        border-radius: 20px 20px 0 0;
    }


    .bg-under::before,
    .bg-under::after {
        bottom: -20px;
        width: 20px;
        height: 20px;
    }

}

/* --- cmn btn -------------------------------- */
.cmn__btn {
    display: flex;
    justify-content: space-around;
    gap: clamp(0px, 2.9vw, 40px);
}

.cmn__btn-ctr {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cmn__btn-ctr>picture img {
    height: clamp(0px, 2.3vw, 32px);
    width: auto;
}

.cmn__btn-ctr>a {
    display: inline-block;
}

.cmn__btn-ctr>a>picture {
    max-width: 580px;
}

@media screen and (max-width: 767px) {
    .cmn__btn {
        flex-direction: column;
        gap: 10px;
    }

    .cmn__btn-ctr>picture img {
        height: clamp(0px, 5.4vw, 21px);
    }

    .cmn__btn-ctr>a>picture {
        max-width: 360px;
    }

}

/* ==============================


sec01


=================================*/

.sec01 {
    background: url(../images/qqqbeatsLP/sec01__bg.png) no-repeat center center/cover;
}

.sec01 .inner {
    padding: clamp(0px, 2.1vw, 20px) 0 clamp(0px, 7.1vw, 100px);
}

.sec01__ctr {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.sec01__ctr_main-vis {
    position: relative;
}

.sec01__ctr_main-vis::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: clamp(-100px, -7.1vw, 0px);
    right: clamp(-180px, -12.9vw, 0px);
    width: clamp(0px, 61.1vw, 855px);
    height: clamp(0px, 66.1vw, 925px);
    background: url(../images/qqqbeatsLP/sec01__main-chara.png) no-repeat center center/contain;
    z-index: -1;
}

.sec01__ctr_ttl {
    width: clamp(0px, 45.7vw, 640px);
    margin-bottom: 15px;
}

.sec01__ctr_sub-ttl {
    width: clamp(0px, 49.4vw, 692px);
    margin-bottom: 30px;
}

.sec01__ctr_txt {
    width: clamp(0px, 37.4vw, 524px);
}

.sec01 .cmn__btn {
    z-index: 10;
    position: relative;
}


@media screen and (max-width: 767px) {

    .sec01 {
        background: url(../images/qqqbeatsLP/sec01__bg_sp.png) no-repeat center center/cover;
    }

    .sec01 .inner {
        padding: clamp(0px, 2.6vw, 10px) 0 clamp(0px, 10.3vw, 40px);
    }

    .sec01__ctr {
        max-width: 370px;
        margin: 0 auto clamp(0px, 5.1vw, 20px);
    }

    .sec01__ctr_main-vis::before {
        top: clamp(0px, 32.1vw, 125px);
        right: clamp(-95px, -24.4vw, 0px);
        width: clamp(0px, 73.3vw, 286px);
        height: clamp(0px, 79.2vw, 309px);
    }

    .sec01__ctr_ttl {
        width: clamp(0px, 84.6vw, 330px);
        margin-bottom: clamp(0px, 3.8vw, 15px);
    }

    .sec01__ctr_sub-ttl {
        width: clamp(0px, 80.5vw, 314px);
        margin-bottom: clamp(0px, 5.1vw, 20px);
    }

    .sec01__ctr_txt {
        width: clamp(0px, 57.4vw, 224px);
    }


}

/* ==============================


sec02


=================================*/


.sec02 .inner {
    padding: clamp(0px, 7.9vw, 110px) 0 clamp(0px, 8.6vw, 120px);
}


.sec02-h2 {
    text-align: center;
    margin-bottom: 50px;
}

.sec02-h2>picture:nth-of-type(1) {
    width: clamp(0px, 50vw, 700px);
    margin-bottom: clamp(0px, 3.6vw, 50px);
}

.sec02-h2>picture:nth-of-type(2) {
    width: clamp(0px, 64.9vw, 909px);
}

.sec02-anchor {
    display: flex;
    justify-content: space-between;
    gap: clamp(0px, 1.4vw, 20px);
}

@media screen and (max-width: 767px) {
    .sec02 .inner {
        padding: clamp(0px, 10.3vw, 40px) 0;
    }

    .sec02-h2 {
        margin-bottom: clamp(0px, 5.1vw, 20px);
    }

    .sec02-h2>picture:nth-of-type(1) {
        width: clamp(0px, 89.7vw, 350px);
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec02-h2>picture:nth-of-type(2) {
        width: clamp(0px, 80.3vw, 313px);
    }

    .sec02-anchor {
        flex-direction: column;
        align-items: center;
        gap: clamp(0px, 5.1vw, 20px);
    }
}

/* ==============================


sec03


=================================*/
.ttl-ctr {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(0px, 4.3vw, 60px);
    position: relative;
    z-index: 0;
}

.ttl-ctr::before,
.ttl-ctr::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: -1;
}

.ttl-ctr::before {
    left: calc(((100vw - 1200px) / -2) - 50px);
    width: clamp(0px, 31.4vw, 439px);
    height: clamp(0px, 35.7vw, 500px);
    background: url(../images/qqqbeatsLP/cmn__ttl-bg-l.png) no-repeat center center/contain;
}

.ttl-ctr::after {
    right: calc(((100vw - 1200px) / -2) - 50px);
    width: clamp(0px, 38.5vw, 539px);
    height: clamp(0px, 31.7vw, 444px);
    background: url(../images/qqqbeatsLP/cmn__ttl-bg-r.png) no-repeat center center/contain;
}

.sec04 .ttl-ctr::before,
.sec04 .ttl-ctr::after {
    display: none;
}

.ttl-ctr-icon {
    width: clamp(0px, 7.1vw, 100px);
}

.ttl-ctr-ttl {
    margin-bottom: clamp(0px, 4.3vw, 60px);
}

.sec03 .ttl-ctr-ttl {
    width: clamp(0px, 45.2vw, 633px);
}

.sec04 .ttl-ctr-ttl {
    width: clamp(0px, 49.6vw, 693px);
}

.sec05 .ttl-ctr-ttl {
    width: clamp(0px, 52.5vw, 735px);
}

.sec03 .ttl-ctr-txt {
    width: clamp(0px, 55.3vw, 774px);
}

.sec04 .ttl-ctr-txt {
    width: clamp(0px, 72.6vw, 1016px);
}

.sec05 .ttl-ctr-txt {
    width: clamp(0px, 47.3vw, 662px);
}

.obi-ctr {
    width: 100%;
    max-width: clamp(0px, 80vw, 1120px);
    margin: 0 auto;
}

.obi-ctr-obi {
    margin-bottom: clamp(0px, 1.4vw, 20px);
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    .ttl-ctr::before {
        left: -10%;
    }

    .ttl-ctr::after {
        right: -10%;
    }

}

@media screen and (max-width: 767px) {
    .ttl-ctr {
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .ttl-ctr::before,
    .sec05 .ttl-ctr::after {
        top: 35%;
    }

    .ttl-ctr::before {
        left: clamp(-30px, -7.7vw, 0px);
        width: clamp(0px, 33.6vw, 131px);
        height: clamp(0px, 55.4vw, 216px);
        background: url(../images/qqqbeatsLP/cmn__ttl-bg-l_sp.png) no-repeat center center/contain;
    }

    .ttl-ctr::after {
        top: 30%;
        right: clamp(-50px, -12.8vw, 0px);
        width: clamp(0px, 41.3vw, 161px);
        height: clamp(0px, 51.8vw, 202px);
        background: url(../images/qqqbeatsLP/cmn__ttl-bg-r_sp.png) no-repeat center center/contain;
    }

    .sec05 .ttl-ctr::before {
        left: clamp(-70px, -17.9vw, 0px);
        width: clamp(0px, 43.1vw, 168px);
        height: clamp(0px, 74.1vw, 289px);
        background: url(../images/qqqbeatsLP/cmn__ttl-bg-02-l_sp.png) no-repeat center center/contain;
    }

    .sec05 .ttl-ctr::after {
        right: clamp(-75px, -19.2vw, 0px);
        width: clamp(0px, 52.3vw, 204px);
        height: clamp(0px, 72.3vw, 282px);
        background: url(../images/qqqbeatsLP/cmn__ttl-bg-02-r_sp.png) no-repeat center center/contain;
    }

    .ttl-ctr-icon {
        width: clamp(0px, 15.4vw, 60px);
    }

    .ttl-ctr-ttl {
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec03 .ttl-ctr-ttl {
        width: clamp(0px, 89.7vw, 350px);
    }

    .sec04 .ttl-ctr-ttl {
        width: clamp(0px, 87.2vw, 340px);
    }

    .sec05 .ttl-ctr-ttl {
        width: clamp(0px, 87.9vw, 343px);
    }

    .sec03 .ttl-ctr-txt {
        width: clamp(0px, 72.8vw, 284px);
    }

    .sec04 .ttl-ctr-txt {
        width: clamp(0px, 82.1vw, 320px);
    }


    .sec05 .ttl-ctr-txt {
        width: clamp(0px, 81.5vw, 318px);
    }

    .obi-ctr {
        max-width: 100%;
    }

    .obi-ctr-obi {
        margin-bottom: clamp(0px, 3.8vw, 15px);
    }

}

/* ==============================


sec04


=================================*/

.sec04-name {
    background-color: #fff;
    padding: clamp(0px, 4.3vw, 60px) 5%;
    font-size: clamp(11px, 1.3vw, 18px);
    font-weight: bold;
    border-radius: 15px;
}

.sec04-name>div {
    display: flex;
    justify-content: space-between;
    gap: clamp(0px, 1.4vw, 15px);
    margin-bottom: clamp(0px, 1.4vw, 20px);
}

.sec04-name>div>ul {
    width: 33%;
}

.sec04-name>div>ul>li {
    padding-left: 1em;
    text-indent: -1em;
    line-height: 2.2em;
}

.sec04-name>div>ul:nth-of-type(1) {
    width: 38%;
}

.sec04-name>p {
    text-align: center;
    font-size: 24px;
}

@media screen and (max-width: 767px) {
    .sec04-name {
        padding: clamp(0px, 10.3vw, 40px) 5%;
        font-size: clamp(10px, 3.6vw, 14px);
        border-radius: clamp(0px, 5.1vw, 20px);
    }

    .sec04-name>div {
        flex-direction: column;
        gap: 0;
        margin-bottom: clamp(0px, 5.1vw, 20px);
    }

    .sec04-name>div>ul,
    .sec04-name>div>ul:nth-of-type(1) {
        width: 100%;
    }

    .sec04-name>div>ul>li {
        line-height: 1.8em;
        margin-bottom: 10px;
    }


    .sec04-name>div>ul:nth-last-of-type(1)>li:nth-last-of-type(1) {
        margin-bottom: 0;
    }

    .sec04-name>p {
        font-size: 18px;
    }

}

/* ==============================


sec05


=================================*/

.sec05 .obi-ctr {
    margin-bottom: clamp(0px, 5.7vw, 80px);
}

@media screen and (max-width: 767px) {
    .sec05 .obi-ctr {
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }
}

/* ==============================


sec06


=================================*/

.sec06-ttl {
    text-align: center;
    margin-bottom: clamp(0px, 4.3vw, 60px);
}

.sec06-ttl>h3 {
    width: clamp(0px, 67vw, 938px);
    margin: 0 auto clamp(0px, 4.3vw, 60px);
}

.sec06-ttl>picture {
    width: clamp(0px, 31.1vw, 435px);
}


.sec06 .u-sld__item {
    width: 540px;
}



@media screen and (max-width: 767px) {

    .sec06-ttl {
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec06-ttl>h3 {
        width: clamp(0px, 100vw, 400px) !important;
        margin-left: clamp(-19px, -5vw, 0px);
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec06-ttl>picture {
        width: clamp(0px, 55.6vw, 217px);
    }

    .sec06 .u-sld__item {
        width: clamp(0px, 90vw, 400px);
    }

}

@media screen and (min-width: 425px) and (max-width: 1100px) {

    .sec06-ttl>h3,
    .sec07-ttl picture {
        margin-left: auto;
    }
}

/* ==============================


sec07


=================================*/

.sec07 .inner {
    padding-top: clamp(0px, 10.7vw, 150px);
}

.sec07-ttl {
    margin: 0 auto clamp(0px, 5.7vw, 80px);
    text-align: center;
}

.sec07-ttl picture {
    width: clamp(0px, 68.3vw, 956px);
}

.sec07-ctr {
    text-align: center;
    margin-bottom: clamp(0px, 5.7vw, 80px);
}

.sec07-ctr>picture:nth-of-type(1) {
    width: clamp(0px, 65.3vw, 914px);
    margin-bottom: clamp(0px, 3.6vw, 50px);
}

.sec07-ctr>picture:nth-of-type(2) {
    margin-bottom: clamp(0px, 4.3vw, 60px);
}

.sec07-ctr.c01>picture:nth-of-type(2) {
    width: clamp(0px, 47.1vw, 660px);
}

.sec07-ctr.c02>picture:nth-of-type(2) {
    width: clamp(0px, 57.7vw, 808px);
}

.sec07-ctr.c03>picture:nth-of-type(2) {
    width: clamp(0px, 44.6vw, 624px);
}

@media screen and (max-width: 767px) {
    .sec07 .inner {
        padding-top: clamp(0px, 12.8vw, 50px);
    }

    .sec07-ttl {
        margin-bottom: clamp(0px, 10.3vw, 40px);
    }

    .sec07-ttl picture {
        width: clamp(0px, 100vw, 400px) !important;
        margin-left: clamp(-19px, -5vw, 0px);
    }

    .sec07-ctr {
        margin-bottom: clamp(0px, 10.3vw, 40px);
    }

    .sec07-ctr>picture:nth-of-type(1) {
        width: clamp(0px, 89.7vw, 350px);
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec07-ctr>picture:nth-of-type(2) {
        margin-bottom: clamp(0px, 7.7vw, 30px);
    }

    .sec07-ctr.c01>picture:nth-of-type(2) {
        width: clamp(0px, 73.3vw, 286px);
    }

    .sec07-ctr.c02>picture:nth-of-type(2) {
        width: clamp(0px, 65.6vw, 256px);
    }

    .sec07-ctr.c03>picture:nth-of-type(2) {
        width: clamp(0px, 80.0vw, 312px);
    }


}

/* ==============================


footer 調整


=================================*/

.u-copy {
    background-color: #1D2085;
    background-image: repeating-linear-gradient(to bottom,
            rgba(93, 93, 255, 0.1),
            rgba(93, 93, 255, 0.1) 1px,
            transparent 1px,
            transparent 10px);
}


.u-copy__creater {
    grid-template-columns: 29% 29% 32%;
    gap: 5%;
}

.u-copy__row {
    gap: 80rem;
}

.u-copy__copy {
    grid-template-columns: none;
    gap: 20px;
}



/* en ---------------------------------------------------------------------------------------------- */

/* ==============================


cmn


=================================*/

/* --- cmn btn -------------------------------- */


@media screen and (max-width: 767px) {


    .en_ .cmn__btn-ctr>picture img {
        height: clamp(0px, 5.4vw, 21px);
        margin-bottom: 5px;
    }


}

/* ==============================


sec01


=================================*/



.en_ .sec01__ctr_main-vis::before {
    top: clamp(-120px, -8.6vw, 0px);
    right: clamp(-310px, -22.1vw, 0px);
    width: clamp(0px, 59.9vw, 839px);
    height: clamp(0px, 64.8vw, 907px);
}

.en_ .sec01__ctr_sub-ttl {
    width: clamp(0px, 64.6vw, 905px);
}

.en_ .sec01__ctr_txt {
    width: clamp(0px, 57.2vw, 802px);
}

@media screen and (max-width: 767px) {
    .sec01__ctr {
        max-width: 350px;
        margin: 0 auto 30px;
    }

    .sec01__ctr_ttl {
        width: clamp(0px, 84.6vw, 330px);
        margin-left: clamp(10px, 2.6vw, 10px);
    }

    .en_ .sec01__ctr_main-vis::before {
        top: clamp(0px, 46.2vw, 180px);
        right: clamp(-80px, -20.5vw, 0px);
        width: clamp(0px, 73.3vw, 286px);
        height: clamp(0px, 79.2vw, 309px);
    }

    .en_ .sec01__ctr_sub-ttl {
        width: clamp(0px, 89.7vw, 350px);
    }

    .en_ .sec01__ctr_txt {
        width: clamp(0px, 58.2vw, 227px);
    }

}

/* ==============================


sec02


=================================*/



.en_ .sec02-h2>picture:nth-of-type(2) {
    width: clamp(0px, 62.2vw, 871px);
}

@media screen and (max-width: 767px) {
    .en_ .sec02-h2>picture:nth-of-type(2) {
        width: clamp(0px, 89vw, 347px);
    }
}

/* ==============================


sec03


=================================*/

.en_ .sec03 .ttl-ctr-ttl {
    width: clamp(0px, 44.3vw, 621px);
}

.en_ .sec04 .ttl-ctr-ttl {
    width: clamp(0px, 77.3vw, 1083px);
}

.en_ .sec05 .ttl-ctr-ttl {
    width: clamp(0px, 49.6vw, 695px);
}

.en_ .sec03 .ttl-ctr-txt {
    width: clamp(0px, 55.5vw, 778px);
}

.en_ .sec04 .ttl-ctr-txt {
    width: clamp(0px, 61.6vw, 862px);
}

.en_ .sec05 .ttl-ctr-txt {
    width: clamp(0px, 57.7vw, 809px);
}

@media screen and (max-width: 767px) {
    .en_ .sec03 .ttl-ctr-ttl {
        width: clamp(0px, 79.7vw, 311px);
    }

    .en_ .sec04 .ttl-ctr-ttl {
        width: clamp(0px, 90vw, 351px);
    }

    .en_ .sec05 .ttl-ctr-ttl {
        width: clamp(0px, 89vw, 347px);
    }

    .en_ .sec03 .ttl-ctr-txt {
        width: clamp(0px, 77.2vw, 301px);
    }

    .en_ .sec04 .ttl-ctr-txt {
        width: clamp(0px, 82.3vw, 321px);
    }

    .en_ .sec05 .ttl-ctr-txt {
        width: clamp(0px, 89.7vw, 350px);
    }

    .en_ .sec04-name>p {
        font-size: clamp(11px, 4.6vw, 17px);
    }


}

/* ===========================


sec06


=================================*/


.en_ .sec06-ttl>h3 {
    width: clamp(0px, 65vw, 910px);
}

.en_ .sec06-ttl>picture {
    width: clamp(0px, 54.4vw, 762px);
}

@media screen and (max-width: 767px) {
    .en_ .sec06-ttl>picture {
        width: clamp(0px, 87.9vw, 343px);
    }


}

/* ==============================


sec07


=================================*/



.en_ .sec07-ttl picture {
    width: clamp(0px, 68.3vw, 956px);
}

.en_ .sec07-ctr>picture:nth-of-type(1) {
    width: clamp(0px, 65.3vw, 914px);
}

.en_ .sec07-ctr.c01>picture:nth-of-type(2) {
    width: clamp(0px, 54.6vw, 764px);
}

.en_ .sec07-ctr.c02>picture:nth-of-type(2) {
    width: clamp(0px, 74.7vw, 1046px);
}

.en_ .sec07-ctr.c03>picture:nth-of-type(2) {
    width: clamp(0px, 57.7vw, 808px);
}

@media screen and (max-width: 767px) {



    .en_ .sec07-ctr>picture:nth-of-type(1) {
        width: clamp(0px, 89.7vw, 350px);
    }

    .en_ .sec07-ctr.c01>picture:nth-of-type(2) {
        width: clamp(0px, 79.5vw, 310px);
    }

    .en_ .sec07-ctr.c02>picture:nth-of-type(2) {
        width: clamp(0px, 75.9vw, 296px);
    }

    .en_ .sec07-ctr.c03>picture:nth-of-type(2) {
        width: clamp(0px, 71.8vw, 280px);
    }

}

/* ==============================


footer 調整


=================================*/

.u-copy__creater {
    grid-template-columns: 22% 22% 48%;
    gap: 3.2%;
}



/* ==============================


display none


=================================*/
/*::::::::::::pc用::::::::::::*/

@media screen and (min-width: 1101px) {
    .pad_non {
        display: none !important;
    }

    .sp_non {
        display: none !important;
    }

    .pad-sp_non {
        display: none !important;
    }
}

/*::::::::::::pad用::::::::::::*/
@media screen and (min-width: 768px) and (max-width: 1100px) {
    .pc_non {
        display: none !important;
    }

    .sp_non {
        display: none !important;
    }

    .pc-sp_non {
        display: none !important;
    }
}

/*::::::::::::sp用:::::::::::*/
@media screen and (max-width: 767px) {
    .pc_non {
        display: none !important;
    }

    .pad_non {
        display: none !important;
    }

    .pc-pad_non {
        display: none !important;
    }
}