@font-face {
    font-family: "NotoSansCJKjp";
    /*急ぎの修正でサブセット作る余裕なかった*/
    src: url("../font/NotoSansCJKjp-Black.otf") format("opentype");
}

/*<editor-fold desc="common">*/

body {
    background-color: #f5f4f6;

    /*スマホで見た時ちょっとフォントがシャープになる*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#root {
}

#main {
}

#header {
    position: relative;
}

#dynamic-footer-shop-content {
    position: absolute;
    z-index: 100;
    bottom: 0vw;
    right: 0;
    margin: 0 auto;
}

#js-dynamic-footer.is-active {
    transition: all 0.65s;
    bottom: 0;
}

.half-Translucent {
    opacity: 0.5;
}

.w-fill {
    width: 100%;
}

.z-index-1 {
    z-index: 1;
}

.full-image {
    width: 100%;
    display: block;
    pointer-events: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

.center-self {
    margin-left: auto;
    margin-right: auto;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-left {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.flex-right {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.content-view {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: relative;
}

.campaign-detail-non-clear {
    display: none;
}

/*popup*/
body.open_popup {
    overflow: hidden;
}

.bg_onetime_popup {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 400vw;
    height: 200vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;

    transition: 0.5s;
}

body.open_popup .bg_onetime_popup {
    opacity: 1;
    visibility: visible;
}

 .onetime_popup {
    position: relative;
    transform: translateX(-50%) translateY(-50%);
    top: 50vh;
    left: 50vw;
    height: 0vh;
    width: 100vw;
}

.onetime_popup_content {
    position: absolute;
    transform: translateY(-50%);
    max-width: 80vw;
    max-height: 90vh;
    width: calc(80vh * 808 / 1208);
    height: calc(90vw * 1208 / 808);
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.onetime_popup_content_image {
    width: 100%;
    height:88.9%;
    top: 10%;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.onetime_popup_content_button {
    width: 100%;
    right: 0;
    left: 0;
    margin: 0 auto;

}

/*</editor-fold>*/

/*<editor-fold desc="pc">*/

@media (min-width: 1025px) {

    #footer {
        margin-bottom: 190px;
    }

    #caption-view {
        /*1920(親widthPx) 1610Xpx*/
        width: 83.8vw;

        /*1920(親widthPx) 32Ypx*/
        margin-bottom: 1.67vw;
    }

    /*campaign*/
    #campaign-view {
        background-image: url("../images/img_campaign_bg_pc.png");
        background-size: 100% 100%;

        width: 100%;

        /*1920(親widthPx) 132Ypx*/
        padding-bottom: 6.87vw;
    }

    #campaign-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1920(親widthPx) 40Xpx*/
        margin-left: 2.08vw;
        /*1920(親widthPx) 12.6Ypx*/
        margin-top: 1.17vw;
    }

    .campaign-balloon-view-content {
        /*1920(親widthPx) 698Xpx*/
        width: 36.35vw;
    }

    #campaign-title-view {
        position: absolute;
        /*1920(親widthPx) 210Xpx*/
        top: 10.94vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .campaign-title-view-content {
        /*1920(親widthPx) 1028Xpx*/
        width: 53.54vw;

        /*1920(親widthPx) 210Ypx*/
        top: 10.93vw;
    }

    #campaign-contents-view {
        /*1920(親widthPx) 35Xpx*/
        top: 1.82vw;
    }

    #campaign-contents-view-list {
        display: grid;
        width: fit-content;
        grid-template-columns: repeat(2, auto);
    }

    .campaign-contents-view-alpha {
        opacity: 0.5;
    }

    .campaign-contents-view-list-item-content {
        position: relative;
    }

    .campaign-contents-view-list-item-content-left {
        /*1920(親widthPx) 841Xpx*/
        width: 43.80vw;
        margin-right: -11px;
    }

    .campaign-contents-view-list-item-content-right {
        /*1920(親widthPx) 841Xpx*/
        width: 43.80vw;
        margin-left: -11px;
    }

    .campaign-contents-view-list-stamp {
        position: absolute;
        /*1920(親widthPx) 259Xpx*/
        width: 13.49vw;
        left: 0;
        right: 0;
        margin: 2.58vw auto 0;
    }

    #campaign-summary-view {
        /*1920(親widthPx) 1183Xpx*/
        width: 61.61vw;

        /*1920(親widthPx) 32Ypx*/
        padding-bottom: 1.66vw;
    }

    #campaign-detail-view {
        flex-direction: column;

        /*1920(親widthPx) 1024Xpx*/
        width: 53.33vw;
    }

    .campaign-detail-content {
    }

    .campaign-detail-clear {
        position: absolute;

        /*!*1920(親widthPx) 262Ypx*!*/
        margin-top: -13.9%;

        /*!*1920(親widthPx) 382Xpx*!*/
        margin-left: 19.89vw;

        /*1920(親widthPx) 262Ypx*/
        height: 13.64vw;
    }

    #movie-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1920(親widthPx) 40Xpx*/
        margin-left: 2.08vw;
        /*1920(親widthPx) 12.6Ypx*/
        margin-top: 1.17vw;
    }

    .movie-balloon-view-content {
        /*1920(親widthPx) 498Xpx*/
        width: 25.94vw;
    }

    #movie-movie-view {
        position: absolute;
        /*1920(親widthPx) 208Ypx*/
        top: 10.84vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .movie-movie-back-view-content {
        /*1920(親widthPx) 1211Xpx*/
        width: 63.07vw;
    }

    .movie-movie-view-content {
        position: absolute;
        /*1920(親widthPx) 1152Xpx*/
        width: 60vw;
        height: 33.75vw;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    #game-system-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1920(親widthPx) 40Xpx*/
        margin-left: 2.08vw;
        /*1920(親widthPx) 12.6Ypx*/
        margin-top: 1.17vw;
    }

    .game-system-balloon-view-content {
        /*1920(親widthPx) 748Xpx*/
        width: 38.96vw;
    }

    .game-system-balloon-view-content {
        /*1920(親widthPx) 748Xpx*/
        width: 38.96vw;
    }

    /*gallery*/
    #campaign {
        position: relative;
    }

    #movie {
        position: relative;
    }

    #game-system {
        position: relative;
    }

    #banner {
        position: relative;
    }

    .back-image-view {
        top: 0;
        left: 0;
        width: 100%;
    }

    #pc-image {
        display: block;
        width: 100%;
        height: auto;
    }

    #sp-image {
        display: none;
    }

    #game-system-ss-list-view {
        display: flex;
        align-items: flex-end;
        position: absolute;
        bottom: 2.92vw;
        left: 0;
        right: 0;
        margin: 0 auto;

        /*1920(親widthPx) 1834Xpx*/
        width: 95.52vw;
    }

    /*app-pay*/
    #app-pay {
        position: relative;
    }

    #app-pay-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1920(親widthPx) 52Xpx*/
        margin-left: 2.70vw;
        /*1920(親widthPx) 25Ypx*/
        margin-top: 1.30vw;
    }

    .app-pay-balloon-view-content {
        /*1920(親widthPx) 560Xpx*/
        width: 29.17vw;
    }

    #app-pay-view {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .app-pay-view-content {
        /*1920(親widthPx) 1740Xpx*/
        width: 90.63vw;
        top: 0vw;
        /*1920(親widthPx) 25Ypx*/
        margin-top: 1.30vw;
    }

    .app-pay-view-content-button {
        position: absolute;
        /*1920(親widthPx) 597Xpx*/
        width: 31.09vw;
        /*1920(親widthPx) 299Xpx*/
        right: 15.57vw;
        /*1920(親widthPx) 57Xpx*/
        bottom: 2.97vw;
    }

    .app-pay-view-content-finger {
        position: absolute;
        /*1920(親widthPx) 189Xpx*/
        width: 9.74vw;
        /*1920(親widthPx) 197Xpx*/
        right: 10.15vw;
        /*1920(親widthPx) 5Xpx*/
        bottom: 0.26vw;
    }

    .ss-content {
        position: relative;
        width: 19.11vw;

        /*1920(親widthPx) 1Xpx*/
        padding-right: 0.1vw;
        /*1920(親widthPx) 1Xpx*/
        padding-left: 0.05vw;
    }

    .ss-view-title {
        max-width: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .ss-view-base {
        /*1920(親widthPx) 367Xpx*/
        width: 19.11vw;
        left: 0;
        bottom: 0;
    }

    .ss-view-front {
        /*1920(親widthPx) 323Xpx*/
        width: 16.82vw;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 1.1vw;
    }

    #banner-list-view {
        position: absolute;
        /*1920(親widthPx) 1054Xpx*/
        width: 54.90vw;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        /*1920(親widthPx) 200Ypx*/
        padding-top: 10.42vw;
    }

    .banner-content-view-base {
        /*1920(親widthPx) 314Xpx*/
        width: 16.35vw;
    }

    .banner-content-view-front {
        /*1920(親widthPx) 300Xpx*/
        width: 15.63vw;
        position: absolute;
        left: 0.30vw;
        /*1920(親widthPx) 5Xpx*/
        top: 0.26vw;
        z-index: 10;
    }

    .banner-list-view-content {
        display: inline-block;
        position: relative;

        /*1920(親widthPx) 314Xpx*/
        width: 16.35vw;
        /*1920(親widthPx) 15Xpx*/
        margin-right: 0.78vw;
        /*1920(親widthPx) 15Xpx*/
        margin-left: 0.78vw;
    }

    /*copyright*/
    #banner-copyright-view {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        /*1920(親widthPx) 200Ypx*/
        padding-top: 10.42vw;
    }

    .banner-copyright-view-content {
        /*1920(親widthPx) 574Xpx*/
        width: 29.90vw;
    }

    /*corporate*/
    #banner-corporate-view {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        /*1920(親widthPx) 240Ypx*/
        padding-top: 12.50vw;
    }

    .banner-corporate-view-content {
        /*1920(親widthPx) 347Xpx*/
        width: 18.07vw;
    }

    /*dynamic footer */
    #js-dynamic-footer {
        z-index: 100;
        bottom: -20%;
        transition: all 0.65s;
        width: 100%;

        /*1920(親widthPx) 195Ypx*/
        height: 10.15vw;
        position: fixed;
    }

    .dynamic-footer-bg-inner {
        z-index: 99;
        position: absolute;
        bottom: 0;
    }

    #dynamic-footer-banners-content {
        flex-direction: column;
        position: absolute;
        z-index: 100;
        bottom: 0vw;
        right: 0;
        left: 16.88vw;
        margin: 0 auto;
    }

    .dynamic-footer-banner-content-inner {
        /*1920(親widthPx) 371Xpx*/
        width: 19.32vw;
    }

    #dynamic-footer-banners-view {
        flex-wrap: wrap;
        /*1920(親widthPx) 620Xpx*/
        width: 60.55vw;
    }

    .dynamic-footer-shop-content-view {
        position: absolute;
        /*1920(親widthPx) 471Xpx*/
        width: 24.53vw;
        right: 0;
        /*1920(親widthPx) 101px*/
        bottom: 5.25vw;
    }
    .dynamic-footer-shop-content-inner {
        /*1920(親widthPx) 459Xpx*/
        width: 23.91vw;
    }
}

/*</editor-fold>*/

/*<editor-fold desc="sp">*/

@media (max-width: 1024px) {
    #content {
    }

    #caption-view {
        /*1024(親widthPx) 940Xpx*/
        width: 91.79vw;

        /*1024(親widthPx) 32Ypx*/
        margin-bottom: 3.12vw;
    }

    #google-play-banner {
        order: 1;
    }

    #apple-store-banner {
        order: 3;
    }

    #official-sns-banner {
        order: 2;
    }

    /*campaign*/
    #campaign {
        position: relative;
    }

    #campaign-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1024(親widthPx) 24Xpx*/
        margin-left: 2.34vw;
        /*1024(親widthPx) 23Ypx*/
        margin-top: 2.25vw;
    }

    .campaign-balloon-view-content {
        /*1024(親widthPx) 54.49Xpx*/
        width: 54.49vw;
    }

    #campaign-title-view {
        position: absolute;
        /*1024(親widthPx) 216Xpx*/
        top: 21.09vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .campaign-title-view-content {
        /*1024(親widthPx) 819Xpx*/
        width: 70.21vw;
    }

    #campaign-contents-view {
        /*1024(親widthPx) 18Ypx*/
        top: 1.76vw;
    }

    #campaign-contents-view-list {
        display: grid;
        width: fit-content;
        grid-template-columns: repeat(2, auto);
    }

    .campaign-contents-view-alpha {
        opacity: 0.5;
    }

    .campaign-contents-view-list-item-content-left {
        /*1024(親widthPx) 479Xpx*/
        width: 46.78vw;
        /*1024(親widthPx) 6Xpx*/
        margin-left: -0.59vw;
    }

    .campaign-contents-view-list-item-content-right {
        /*1024(親widthPx) 479Xpx*/
        width: 46.78vw;
        /*1024(親widthPx) 6Xpx*/
        margin-left: -0.59vw;
    }


    .campaign-contents-view-list-item-content {
        position: relative;
    }

    .campaign-contents-view-list-stamp {
        position: absolute;
        /*1024(親widthPx)259Xpx*/
        width: 15.29vw;
        left: 0;
        right: 0;
        margin: 2.58vw auto 0;
    }


    /*movie*/
    #movie {
        position: relative;
    }

    #movie-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1024(親widthPx) 24Xpx*/
        margin-left: 2.34vw;
        /*1024(親widthPx) 23Ypx*/
        margin-top: 2.25vw;
    }

    .movie-balloon-view-content {
        /*1024(親widthPx) 398Xpx*/
        width: 38.87vw;
    }

    #movie-movie-view {
        position: absolute;
        /*1024(親widthPx) 208Xpx*/
        top: 20.31vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .movie-movie-back-view-content {
        /*1024(親widthPx) 723Xpx*/
        width: 70.61vw;
    }

    .movie-movie-view-content {
        position: absolute;
        /*1024(親widthPx) 6191Xpx*/
        width: 67.48vw;
        /*1024(親widthPx) 389Ypx*/
        height: 37.99vw;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    /*game-system*/
    #game-system {
        position: relative;
    }

    #pc-image {
        display: none;
    }

    #sp-image {
        display: block;
        width: 100%;
        height: auto;
    }

    #game-system-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1024(親widthPx) 24Xpx*/
        margin-left: 2.34vw;
        /*1024(親widthPx) 23Ypx*/
        margin-top: 2.25vw;
    }

    .game-system-balloon-view-content {
        /*1024(親widthPx) 598Xpx*/
        width: 58.40vw;
    }

    #game-system-ss-list-view {
        display: block;
        align-items: flex-start;
        position: absolute;
        top: 18.36vw;
        left: 0;
        right: 0;
        margin: 0 auto;

        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
    }

    #ss-content-1 {
        position: relative;
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1612Ypx*/
        height: 157.42vw;
        /*1024(親widthPx) 30Ypx*/
        margin-bottom: 2.92vw;
    }

    #ss-content-2 {
        position: relative;
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1621Ypx*/
        height: 158.30vw;
        /*1024(親widthPx) 30Ypx*/
        margin-bottom: 2.92vw;
    }

    #ss-content-3 {
        position: relative;
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1693Ypx*/
        height: 163.77vw;
        /*1024(親widthPx) 30Ypx*/
        margin-bottom: 2.92vw;
    }

    #ss-content-4 {
        position: relative;
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1615Ypx*/
        height: 157.71vw;
        /*1024(親widthPx) 30Ypx*/
        margin-bottom: 2.92vw;
    }

    #ss-content-5 {
        position: relative;
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1680Ypx*/
        height: 164.06vw;
    }

    .ss-view-title {
        position: relative;
        /*1024(親widthPx) 830Xpx*/
        width: 81.05vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
    }

    .ss-view-base {
        /*1024(親widthPx) 834Xpx*/
        width: 81.45vw;
        /*1024(親widthPx) 1394Ypx*/
        height: 136.13vw;
        left: 0;
        bottom: 0;
        /*1024(親widthPx) 10Ypx*/
        margin-top: -1.96vw;
    }

    .ss-view-front {
        position: absolute;
        /*1024(親widthPx) 734Xpx*/
        width: 71.68vw;
        /*1024(親widthPx) 1306Ypx*/
        height: 127.53vw;
        left: 0;
        right: 0;
        bottom: 5.10vw;
        margin: 0 auto;
    }

    /*app-pay*/
    #app-pay {
        position: relative;
    }

    #app-pay-balloon-view {
        position: absolute;
        top: 0;
        left: 0;
        /*1024(親widthPx) 10Xpx*/
        margin-left: 0.98vw;
        /*1024(親widthPx) 10Xpx*/
        margin-top: 0.98vw;
    }

    .app-pay-balloon-view-content {
        /*1024(親widthPx) 420Xpx*/
        width: 41.02vw;
    }

    #app-pay-view {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .app-pay-view-content {
        /*1024(親widthPx) 992Xpx*/
        width: 96.88vw;
        /*1024(親widthPx) 110Xpx*/
        margin-top: 10.74vw;
    }

    .app-pay-view-content-button {
        position: absolute;
        /*1024(親widthPx) 330Xpx*/
        width: 32.71vw;
        /*1024(親widthPx) 140Xpx*/
        right: 13.67vw;
        /*1920(親widthPx) 34px*/
        bottom: 3.32vw;
    }

    .app-pay-view-content-finger {
        position: absolute;
        /*1024(親widthPx) 108Xpx*/
        width: 10.54vw;
        /*1024(親widthPx) 75Xpx*/
        right: 7.32vw;
        /*1024(親widthPx) 2Xpx*/
        bottom: 0.20vw;
    }

    /*banner*/
    #banner {
        position: relative;
    }

    #banner-list-view {
        position: absolute;
        width: fit-content;
        grid-template-columns: repeat(3, auto);
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        /*1024(親widthPx) 250Ypx*/
        padding-top: 24.41vw;

    }

    .banner-list-view-content {
        display: inline-block;
        position: relative;

        /*1024(親widthPx) 326Xpx*/
        width: 31.84vw;
        /*1024(親widthPx) 114Ypx*/
        height: 11.13vw;
    }

    .banner-content-view-base {
        /*1024(親widthPx) 314Xpx*/
        width: 30.66vw;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .banner-content-view-front {
        position: absolute;
        /*1024(親widthPx) 300Xpx*/
        width: 29.30vw;
        left: 0.49vw;
        /*1024(親widthPx) 4Xpx*/
        top: 0.39vw;
        z-index: 10;
    }

    /*copyright*/
    #banner-copyright-view {
        position: absolute;
        /*1024(親widthPx) 174Ypx*/
        top: 16.99vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .banner-copyright-view-content {
        /*1024(親widthPx) 574Xpx*/
        width: 56.05vw;
    }

    /*corporate*/
    #banner-corporate-view {
        position: absolute;
        /*1024(親widthPx) 214Ypx*/
        top: 20.90vw;
        right: 0;
        left: 0;
        margin: 0 auto;
    }

    .banner-corporate-view-content {
        /*1024(親widthPx) 347Xpx*/
        width: 33.89vw;
    }

    /*corporate*/
    #corporate-view {
        /*1024(親widthPx) 70Ypx*/
        padding-bottom: 6.83vw;
    }

    .corporate-view-inner {
        /*1024(親widthPx) 277Xpx*/
        width: 27.05vw;
    }

    /*copyright*/
    #copyright-view {
        /*1024(親widthPx) 700Xpx*/
        /*width: 68.35vw;*/

        font-size: 2.25vw;
        /*font-size: 24pt;*/
        font-family: "NotoSansCJKjp";

        /*1024(親widthPx) 70Ypx*/
        padding-bottom: 6.83vw;

        text-align: center;
    }

    /*dynamic footer */
    #js-dynamic-footer {
        z-index: 100;
        bottom: -20%;
        transition: all 0.65s;
        width: 100%;

        /*1024(親widthPx) 36Ypx*/
        height: 3.51vw;
        position: fixed;
    }

    .dynamic-footer-bg-inner {
        z-index: 99;
        position: absolute;
        bottom: 0;
    }

    #dynamic-footer-banners-content {
        flex-direction: column;
        position: absolute;
        z-index: 100;
        bottom: 0vw;
        right: 0;
        /*1024(親widthPx) 31Xpx*/
        left: 3.03vw;
        margin: 0 auto;
    }

    .dynamic-footer-banner-content-inner {
        /*1024(親widthPx) 304Xpx*/
        width: 29.69vw;
    }

    #dynamic-footer-banners-view {
        flex-wrap: wrap;
        /*1024(親widthPx) 620Xpx*/
        width: 60.55vw;
    }

    .dynamic-footer-shop-content-inner {
        /*1024(親widthPx) 459Xpx*/
        width: 37.70vw;
    }
}

/*</editor-fold>*/