@charset 'UTF-8';

/* ==================================================================
背景動画
================================================================== */
.bg_mov {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
}
.bg_mov::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: url('/static/img/overlay_ptrn.png') repeat 0 0;
}
#bgPlayer {
    position: absolute;
}

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

================================================================== */
/* ファーストビュー
--------------------------*/
.hero_wrap {
    position: relative;
    height: 75vh;
    min-height: 8.00rem;
}
.logo {
    position: absolute;
    top: 3.36rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 4.20rem;
}
.bnr_campaign {
    position: absolute;
    top: 6.14rem;
    right: 0;
    left: 0;
    width: 8.20rem;
    margin: auto;
}
.btn_reg {
    position: fixed;
    z-index: 5;
    bottom: 0.30rem;
    left: 0.30rem;
    width: 2.12rem;
}
/* メインビジュアル追加 */
.main_v {
    position: absolute;
    top: .20rem;
    left: 0;
    right: 0;
    z-index: -1;
}
.new_ttl{
    position: absolute;
    bottom: 2.1rem;
    right: 0.7rem;
    width: 3.05rem;
}
.new_pv {
    width: 3.05rem;
    border-radius: 0.15rem;
    -webkit-box-shadow: 0 0 0.20rem 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0.20rem 0 rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: .3rem;
    right:.7rem;
}

/* ストアボタンとシェアボタン
--------------------------*/
.store_wrap {
    background: url('../static/img/bg_store_btn.png') no-repeat center 0/contain;
    width: 6.10rem;
    height: 2.50rem;
    margin: 0 auto .30rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 1.42rem;
    -webkit-filter: drop-shadow(0 0 .10rem rgba(0, 0, 0, .4));
            filter: drop-shadow(0 0 .10rem rgba(0, 0, 0, .4));
}
.store_wrap .app {
    width: 2.19rem;
    margin-right: .40rem;
}
.store_wrap .gp {
    width: 2.63rem;
}
.share_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 6.50rem;
    margin: 0 auto .70rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* NEWSとTwitter
--------------------------*/
.news-tw_wrap {
    position: relative;
    padding: 0.80rem 0 0.6rem;
    background-color: rgba(255, 255, 255, 0.8);
    background: url('/static/img/bg_news_tw.png') no-repeat center top/100% 100%;
}
/* .news-tw_wrap::before,
.news-tw_wrap::after {
    position: absolute;
    top: -0.20rem;
    width: 37%;
    height: 0.20rem;
    content: '';
    background-color: rgba(255, 255, 255, 0.8);
} */
.news-tw_wrap::before {
    left: -0.20rem;
    -webkit-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
        transform: skewX(20deg);
}
.news-tw_wrap::after {
    right: -0.20rem;
    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
        transform: skewX(-20deg);
}
.news-tw_wrap .flx {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.news_wrap,
.tw_wrap {
    width: 4.50rem;
}
.news-tw_wrap .ttl {
    line-height: 0;
    width: 100%;
    margin-bottom: 0.14rem;
}
.news_timeline {
    /* overflow: scroll; */
    width: 100%;
    height: 4.10rem;
    padding: 0.26rem;
    border: 1px solid #000;
    background-image: url('/static/img/o.png'), url('/static/img/o.png'), url('/static/img/o.png'), url('/static/img/o.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0.07rem 0.07rem, left 0.07rem bottom 0.07rem, right 0.07rem top 0.07rem, right 0.07rem bottom 0.07rem;
    background-size: 0.09rem;
}
.news_list {
    overflow-y: scroll;
    /* overflow: hidden scroll; */
    height: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.news_list_item {
    font-size: 0.16rem;
    margin-bottom: 0.30rem;
    padding-bottom: 0.30rem;
    text-align: left;
    border-bottom: 1px solid #000;
}
.news_list_item .date {
    font-size: 0.14rem;
    color: #287098;
}
.tw_timeline {
    line-height: 0;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #000;
}
.news-tw_wrap .btn {
    line-height: 0;
    width: 3.30rem;
    margin: 0.38rem auto 0;
}
#wp_news .error {
    font-size: .16rem;
    text-align: left;
}
.tmb_ttl{
    margin:0 auto .1rem;
}
.more_btn {
    line-height: 0;
    width: 3.30rem;
    margin: 0.32rem auto 0;
}

/* イントロ
--------------------------*/
.intro_wrap {
    padding: 0.40rem 0 1.00rem;
    background: url('/static/img/bg_intro.jpg') no-repeat center 0/cover;
}
.intro_wrap .ttl {
    width: 3.03rem;
    margin: 0 auto 0.30rem;
}
.intro_charaarea {
    margin:.6rem 0;
    position: relative;
        height: 7.06rem;
}
.intro_wrap .txt {
    font-size: 0.18rem;
    margin-bottom: 0.30rem;
    color: #fff;
    text-shadow: 0 0 0.05rem rgba(4, 68, 163, 0.3),
        0 0 0.05rem rgba(4, 68, 163, 0.3),
        0 0 0.05rem rgba(4, 68, 163, 0.3),
        0 0 0.05rem rgba(4, 68, 163, 0.3),
        0 0 0.05rem rgba(4, 68, 163, 0.3);
}
.tmb_mov {
    width: 6.10rem;
    margin: 0 auto;
    border-radius: 0.15rem;
    -webkit-box-shadow: 0 0 0.20rem 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0.20rem 0 rgba(0, 0, 0, 0.4);
}

/* キャラクター
--------------------------*/
.chara_wrap {
    position: relative;
    height: 8.22rem;
    padding: 0.94rem 0 0;
    background: url('/static/img/bg_chara_ptrn.png') repeat-x 0 0/auto 100%;
}
.chara_wrap::after {
    position: absolute;
    z-index: 0;
    top: -0.64rem;
    left: calc(50vw + 0.4rem);
    width: 5.52rem;
    height: 4.07rem;
    content: '';
    background: url('/static/img/emblem.png') no-repeat 0 0/contain;
}
.chara_wrap .ttl {
    position: relative;
    z-index: 1;
    width: 2.24rem;
    margin: 0 auto 0.90rem;
}
.swiper-container {
    width: 100%;
}
.chara_list_item {
    width: 5.00rem;
}
.swiper-arrw-r,
.swiper-arrw-l {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 0.34rem;
    height: 1.01rem;
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    cursor: pointer;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}
.swiper-arrw-r {
    right: 10px;
    left: auto;
    background-image: url('/static/common/img/arrw_r.png');
}
.swiper-arrw-l {
    right: auto;
    left: 10px;
    background-image: url('/static/common/img/arrw_l.png');
}
.swiper-arrw-r:focus,
.swiper-arrw-l:focus {
    outline: none;
}

/* システム
--------------------------*/
.system_wrap {
    padding: 0.90rem 0 0.28rem;
    background: url('/static/img/bg_sys.jpg') no-repeat center 0/cover;
}
.system_wrap .ttl {
    width: 1.42rem;
    margin: 0 auto 0.86rem;
}
.system_item {
    position: relative;
    margin-bottom: 0.68rem;
}
.system_ph {
    position: relative;
    width: 6.10rem;
    border: 1px solid #fff;
}
.system_ph::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('/static/img/pin.png'), url('/static/img/pin.png'), url('/static/img/pin.png'), url('/static/img/pin.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0.07rem 0.07rem, left 0.07rem bottom 0.07rem, right 0.07rem top 0.07rem, right 0.07rem bottom 0.07rem;
    background-size: 0.12rem;
}
.system_txt_wrap {
    position: absolute;
    z-index: 1;
    top: 0.82rem;
    left: 50%;
    width: 4.80rem;
    padding: 0.24rem 0.40rem;
    background-color: rgba(0, 0, 0, 0.8);
}
.system_ttl {
    font-size: .22rem;
    font-weight: bold;
    text-align: left;
    color: #fff;
    margin-bottom: .10rem;
}
.system_txt {
    font-size: 0.16rem;
    text-align: left;
    color: #fff;
}
.system_item.re .system_ph {
    margin-left: 3.50rem;
}
.system_item.re .system_txt_wrap {
    right: 50%;
    left: auto;
    padding: 0.24rem 0.40rem;
}
.more_systembtn{
    width: 3.30rem;
    margin: 0 auto .93rem;
}

/* ==========================================================================================
 ____  ____   ===============================================================================
/ ___||  _ \  ===============================================================================
\___ \| |_) | ===============================================================================
 ___) |  __/  ===============================================================================
|____/|_|     ===============================================================================
========================================================================================== */
@media screen and (max-width: 768px) {
    .hero_wrap {
        height: 80vh;
    }
    .main_v {
        top: 3vh;
    }
    .logo {
        width: 5.61rem;
        /*top: 25vh;*/
        top: calc(100% - 7.5rem);
    }
    .new_ttl{
        width: 1.4rem;
        bottom: 4.1rem;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    .new_ttl img{
        width: 1.4rem;
    }
    .new_pv {
        width: 6.1rem;
        bottom: .46rem;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    .new_pv img{
        width: 6.1rem;
    }
    .tmb_ttl{
        width: 6.07rem;
        margin:0 auto .1rem;
    }
    .more_btn {
        width: 5.94rem;
        margin: 0.32rem auto 0;
    }
    .bnr_campaign {
        width: 5.80rem;
        top: 68vh;
    }
    .share_link {
        width: 4.74rem;
        height: 2.30rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .news-tw_wrap {
        background-image: url('/static/img/bg_news_tw_sp.png');
    }
    .news-tw_wrap .flx {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .news_wrap {
        width: 6.10rem;
        margin-bottom: 0.70rem;
    }

    .tw_wrap {
        width: 6.10rem;
    }

    .news_timeline,
    .tw_timeline {
        height: 5.54rem;
    }

    /* .tw_timeline iframe {
        width: 100% !important;
        height: 100% !important;
    } */

    .news_list_item {
        font-size: 0.24rem;
    }
    .news_list_item .date {
        font-size: 0.20rem;
    }
    .news-tw_wrap .btn {
        width: 5.94rem;
    }
    .intro_wrap {
        background-size: cover;
    }
    .intro_wrap .txt {
        font-size: 0.30rem;
    }
    .system_item {}
    .system_ph,
    .system_item.re .system_ph {
        margin: 0 auto 0.20rem;
    }
    .system_txt_wrap {
        position: static;
        width: 6.10rem;
        margin: 0 auto 0.50rem;
    }
    .system_txt {
        font-size: 0.24rem;
    }
    .btn_reg {
        bottom: 3.4rem;
    }
    .more_systembtn{
        width: 5.94rem;
        margin: 0 auto .93rem;
    }
}
@media screen and (max-width: 600px) {
    .logo {
        top: calc(100% - 9rem);
    }
}