@charset "utf-8";

header .container {
    background: url(../img/top/visual_bg_202304.jpg) no-repeat center bottom;
    background-size: cover;
    padding-top: 0.6rem;
    width: 100%;
}
header canvas {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

header .header-contents {
    height: 6.1rem;
    position: relative;
    z-index: 3;
}
header .header-copy {
    display: none;
}
header .container h1 {
    background: url(../img/top/logo.png) no-repeat center center;
    background-size: cover;
    text-indent: -9999px;
    width: 3.77rem;
    height: 1.66rem;
    position: absolute;
    bottom: 0.54rem;
    left: calc(50% - (3.77rem / 2));
}
header .container:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: url(../img/top/visual_202304.png) no-repeat center
        bottom;
    background-size: 10.8rem 5.9rem; */
    background: url(../img/top/visual_202304_2.png) no-repeat center
        bottom;
    background-size: 19.2rem 5.9rem;
}

.start-contents {
    position: relative;
    margin: -0.55rem auto 0;
    font-size: 0;
    z-index: 11;
}
.start-contents > div {
    display: inline-block;
    vertical-align: middle;
    width: 2.86rem;
    box-shadow: 0px 0.05rem rgba(0, 0, 0, 0.35);
    border-radius: 0.12rem;
}
.start-contents > div:nth-child(2) {
    width: 4.68rem;
    margin-left: 0.1rem;
}
.start-contents > div:before,
.start-contents > div:after {
    content: ' ';
    display: block;
    height: 0.24rem;
}
.start-contents > div:before {
    background: url(../img/top/frame_enza_top.png) bottom center / 100% 100%
        no-repeat;
}
.start-contents > div:nth-child(2):before {
    background: url(../img/top/frame_appli2_top.png) bottom center / 100% 100%
        no-repeat;
}
.start-contents > div:after {
    background: url(../img/top/frame_enza_bottom.png) center center / 100% 100%
        no-repeat;
}
.start-contents > div:nth-child(2):after {
    background: url(../img/top/frame_appli2_bottom.png) center center / 100%
        100% no-repeat;
}
.start-contents > div .inner-box {
    padding: 0.07rem 0.3rem 0;
    height: 1.12rem;
    background: url(../img/top/frame_enza_middle.png) top center / 100% 100%
        repeat-y;
}
.start-contents > div:nth-child(2) .inner-box {
    background: url(../img/top/frame_appli2_middle.png) top center / 100% 100%
        repeat-y;
}
.start-contents > div .inner-box > div:first-child a img {
    width: 2.24rem;
    height: 0.98rem;
}
.start-contents > div:nth-child(2) .inner-box > p {
    margin: 0 auto;
    width: 4.04rem;
    height: 0.27rem;
    background: url(../img/top/txt_store2.png) top center / cover no-repeat;
    text-indent: -9999px;
}
.start-contents > div:nth-child(2) .inner-box > ul.store-link {
    margin-top: 0.07rem;
    font-size: 0;
}
.start-contents > div:nth-child(2) .inner-box > ul.store-link li {
    display: inline-block;
}
.start-contents > div:nth-child(2) .inner-box > ul.store-link li a img {
    display: block;
    width: 1.98rem;
    height: 0.63rem;
}
.start-contents
    > div:nth-child(2)
    .inner-box
    > ul.store-link
    li:not(:first-child) {
    margin-left: 0.1rem;
}

header .btnList {
    width: 2.4rem;
    position: absolute;
    top: 0.4rem;
    right: 0.28rem;
}
header ul li img.look {
    animation: look-effects 2s ease-in-out 1s infinite normal;
}
@keyframes look-effects {
    0% {
        transform: scale(1);
    }
    85% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.03);
    }
    95% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

.rolling-banner {
    clear: both;
    margin-top: 0.26rem;
}
.rolling-banner li {
    width: 5.8rem;
    margin: 0 0.15rem;
}
.rolling-banner li img {
    width: 5.8rem;
}

.news .inner,
.twitter .inner {
    position: relative;
    width: 4.64rem;
    height: 3.34rem;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 0 0.02rem #d5cbd9, 0 0 0 0.04rem #fff, 0 0 0 0.06rem #7d6d83;
    border-radius: 0.09rem;
    overflow: hidden;
}
.news {
    float: left;
    margin-left: 0.26rem;
}
.twitter {
    float: right;
    margin-right: 0.26rem;
}
.news h2 {
    background: url(../img/top/sttl_news.png) no-repeat left center;
    background-size: 0.86rem 0.3rem;
    text-indent: -9999px;
    width: 0.86rem;
    height: 0.48rem;
    margin-left: 0.08rem;
}
.news .btn-more {
    position: absolute;
    right: 0.1rem;
    top: 0.09rem;
}
.news .btn-more a {
    background: url(../img/top/btn_news_more.png) no-repeat;
    width: 1.18rem;
    height: 0.3rem;
    background-size: cover;
}
.news ul {
    border-top: 0.01rem solid #e2e9ec;
    padding: 0.05rem 0.2rem;
    font-size: 0.15rem;
}
.news ul li:not(:last-child) {
    border-bottom: 0.01rem solid #e2e9ec;
}
.news ul li {
    padding: 0.05rem 0 0.09rem;
    overflow: hidden;
}
.news ul li > div {
    float: left;
}
.news ul li > p {
    float: right;
}
.news ul li > div > span.category {
    display: block;
    margin: 0.01rem 0 0;
    width: 0.92rem;
    height: 0.16rem;
    border-radius: 0.08rem;
    text-indent: -9999px;
}
.news ul li > div > span.category.game {
    background: url(../img/news/txt_category_game_w.png) no-repeat center center
        #3ec5fd;
    background-size: 0.44rem 0.12rem;
}
.news ul li > div > span.category.event {
    background: url(../img/news/txt_category_event_w.png) no-repeat center
        center #ff97ee;
    background-size: 0.47rem 0.12rem;
}
.news ul li > div > span.category.goods {
    background: url(../img/news/txt_category_goods_w.png) no-repeat center
        center #c493fc;
    background-size: 0.56rem 0.12rem;
}
.news ul li > div > span.category.info {
    background: url(../img/news/txt_category_info_w.png) no-repeat center center
        #ffc750;
    background-size: 0.36rem 0.12rem;
}
.news ul li > p {
    width: 3.24rem;
    line-height: 0.4rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news ul li > p > a {
    color: #615466;
}

.twitter h2 {
    background: url(../img/top/sttl_twitter.png) no-repeat left center;
    background-size: 1.13rem 0.3rem;
    text-indent: -9999px;
    width: 1.13rem;
    height: 0.48rem;
    margin-left: 0.08rem;
}
.twitter .btn-follow {
    position: absolute;
    right: 0.1rem;
    top: 0.09rem;
}
.twitter .btn-follow a {
    background: url(../img/top/btn_twitter_follow.png) no-repeat;
    width: 2.1rem;
    height: 0.3rem;
    background-size: cover;
}
.twitter .twitter-tl {
    border-top: 0.01rem solid #e2e9ec;
    padding-top: 0.1rem;
}
.twitter .twitter-tl iframe {
    width: 4.4rem !important;
    vertical-align: top !important;
    max-height: 2.6rem !important;
}

.gameinfo-banner ul {
    margin-top: 0.14rem;
    font-size: 0;
}

.gameinfo-banner ul li {
    margin-left: 0.11rem;
    margin-top: 0.28rem;
    display: inline-block;
}
.gameinfo-banner ul li a img {
    width: 4.3rem;
    height: 0.8rem;
}

.spec {
    background: url(../img/top/spec.png) no-repeat center top;
    background-size: cover;
    width: 459px;
    height: 130px;
    box-sizing: border-box;
    padding-top: 20px;
    margin: 40px auto;
    overflow: hidden;
}
.spec dl {
    opacity: 0;
}

.sns {
    margin: 40px auto;
    letter-spacing: -0.4em;
}
.sns li {
    width: 50px;
    display: inline-block;
    margin: 0 7px;
}
.sns li:hover {
    opacity: 0.9;
}