@charset "utf-8";

/**
 * mainPageTopArea
 */
.mainPageTopArea {position: relative; }
.mainPageTopArea__visual {text-align: center; background: #000; overflow: hidden;}
.mainPageTopArea__visualPC {position: relative; max-width: 1100px; height: 0px; padding-top: 86.909090%; margin: auto; }/*96.909090%*/
.mainPageTopArea__visualPCImg {position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; }
.mainPageTopArea__visualSPImg {width: 100%;}

.mainPageTopArea__bannerArea {position: absolute; bottom: 0; width: 100%;}
.mainPageTopArea__bannerAreaInner {max-width: 1100px; padding: 0 20px; margin: auto; display: flex; justify-content: space-between; }

/**
 * mainPageTopArea spBannerV2
 */
 /*
.mainPageTopArea__spBannerV2 {position: absolute; left: 0; top: 0;  width: 100%; }
.mainPageTopArea__spBannerV2Inner {position: relative; max-width: 1100px; margin: auto; }
.mainPageTopArea__spBannerV2 a {position: absolute; top: 43vw; right: 20px; width: 22.181818vw; max-width: 244px; }
@media (max-width: 767px) {
    .mainPageTopArea__spBannerV2 a {top: 30vw; right: 0 ; width: 32.533333vw; }
}
@media (min-width: 1100px) {
    .mainPageTopArea__spBannerV2 a {top: 483px; }
}
*/


/*.mainPageTopArea__slideBanner {width: 71.363636%; }*/
.mainPageTopArea__slideBanner {position: relative; width: 74.056603%; }
.mainPageTopArea__slideBanner .swiper-slide img {max-width: 100%; }
.mainPageTopArea__slideBannerButtonNext {right: -10px;}
.mainPageTopArea__slideBannerButtonPrev {left: -10px;}
.mainPageTopArea__slideBannerPagenation {width: auto; background: rgba(0,0,0,.8); padding: 0.5em 1em; right: 6px; bottom: 6px; left: auto; top: auto; color: #666; }
.mainPageTopArea__slideBannerPagenation .swiper-pagination-current {color: #fff; }

    /*.mainPageTopArea__bannerAreaRight {width: 24.090909%; }*/
.mainPageTopArea__bannerAreaRight {width: 25%; display: flex; flex-direction: column; justify-content: space-between; }


.mainPageTopArea__specialBanner {}
.mainPageTopArea__specialBanner img {max-width: 100%; }
.mainPageTopArea__specialBannerList {padding-left: 0; margin-bottom: 0; }
.mainPageTopArea__specialBannerList li {margin-bottom: 3.773584%; }
@media (max-width: 767px) {
    .mainPageTopArea__specialBannerList li {margin-bottom: 10px; }
}

/* store link */
.mainPageTopArea__storeLink {background: rgba(0,0,0,.5); /* margin-bottom: 10px; */ flex-grow: 1; }
.mainPageTopArea__storeLinkList {width: 100%; height: 100%; display: flex; flex-direction: column; margin: 0; padding: 0 4%; }
.mainPageTopArea__storeLinkList li {display: flex; justify-content: center; align-items: center; list-style: none; flex-grow: 1; }
.mainPageTopArea__storeLinkList li {border-bottom: 1px solid rgba(255,255,255,.08)}
.mainPageTopArea__storeLinkList li:last-child {border-bottom: none; }
.mainPageTopArea__storeLinkList li > a,
.mainPageTopArea__storeLinkList li > span {display: block; padding: 0 22% 0 18%;}
.mainPageTopArea__storeLinkList .logo--purple {transform: translateX(-3%);}
.mainPageTopArea__storeLinkList .logo--appStore {transform: translateX(1%);}
.--narrow .mainPageTopArea__storeLinkList li > a,
.--narrow .mainPageTopArea__storeLinkList li > span {padding: 0 28% 0 24%;}

@media (max-width: 767px) {
    .mainPageTopArea__storeLinkList .logo--purple {transform: none ;}
    .mainPageTopArea__storeLinkList .logo--appStore {transform: none;}
}

/* store link v2(横並び) ※削除予定 */
.mainPageTopArea__storeLinkV2 {position: relative; background: rgba(0,0,0,.5); margin-bottom: 10px; flex-grow: 1; }
.mainPageTopArea__storeLinkV2 .mainPageTopArea__storeLinkList {flex-direction: row; padding: 0;}
.mainPageTopArea__storeLinkV2 .mainPageTopArea__storeLinkList li {width: 50%; }
.mainPageTopArea__storeLinkV2 .mainPageTopArea__storeLinkList li:first-child {border-bottom: none; }
.mainPageTopArea__storeLinkV2 .mainPageTopArea__storeLinkList li:first-child a {border-right: 1px solid rgba(255,255,255,.2); }
/*.mainPageTopArea__storeLinkList li {display: flex; justify-content: center; align-items: center; list-style: none; flex-grow: 1; flex: 1; }*/
/*.mainPageTopArea__storeLinkList li:first-child > a {border-right: 1px solid rgba(255,255,255,.2)}*/
/*.mainPageTopArea__storeLinkList li > a,*/
/*.mainPageTopArea__storeLinkList li > span {display: block; padding: 0 14%;}*/

    /* ie11 */
    @media all and (-ms-high-contrast: none) {
        .mainPageTopArea__specialBanner {overflow: hidden; }
        .mainPageTopArea__specialBanner img {width: 100%; }
        .mainPageTopArea__storeLinkList a {width: 100%; }
    }




/**
 * mainPageNews
 */
.mainPageNews {position: relative; margin-bottom: 70px; z-index: 1;}
.mainPageNews__table {width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; }
.mainPageNews__table td {padding: 1em; background: rgba(255,255,255,.6); }
/*.mainPageNews td a {color: #000; }*/
@media (max-width: 767px) {
    .mainPageNews {margin-bottom: 50px;}
}


/**
 * mainPageTopic
 */
.mainPageTopic {position: relative; background: #DCDAE9; padding: 80px 0 280px; margin-bottom: 70px; }
.mainPageTopicBg {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url(https://ncjapan2.nefficient.jp/ncjapan/ncsoft/lm/official/main/topicBg.jpg) center; }
.mainPageTopic__swiper {padding: 5px 0; }
.mainPageTopic--slide {width: 264px; }
.mainPageTopic__buttonNext {right: 10px; }
.mainPageTopic__buttonPrev {left: 10px; }
.mainPageTopic__card {border: none; border-radius: 0; color: inherit; min-height: 250px; text-decoration: none !important; }
.mainPageTopic__card .card-img-top {border-radius: 0; flex-shrink: 0; }
.mainPageTopic__card--wiki::after {content: ""; position: absolute; top: -5px; left: 0; background: url(https://ncjapan2.nefficient.jp/ncjapan/ncsoft/lm/official/common/tag_wiki.png) no-repeat; background-size: contain;  width: 88px; height: 23px;}
.mainPageTopic__h2 {margin-bottom: 75px;}
/*chara*/
.mainPageTopic__charaArea {position: absolute; bottom: 0; left: 50%; transform: translateX(-870px); overflow: hidden; width: 880px; height: 850px; pointer-events: none; }
.mainPageTopic__charaAreaImg {position: absolute; bottom: 0; right: 0;}
@media (max-width: 767px) {
    .mainPageTopic {padding: 40px 0 80px; margin-bottom: 40px;  }
    .mainPageTopic__h2 {margin-bottom: 32px; transform: scale(0.8); }
    .mainPageTopic__charaArea {display: none; }
    .mainPageTopic--slide {width: 164px;  }
    .mainPageTopic__card {min-height: 160px; }
    .mainPageTopic__card--wiki::after {width: 60px; height: 16px; }
}
/**
 * mainPageGuide
 */
.mainPageGuide {margin-bottom: 100px; }
.mainPageGuide__h2 {margin-bottom: 3rem;}
.mainPageGuide__h3 {padding-bottom: 1.2rem; border-bottom: 4px solid #3F1F12; }
.mainPageGuide__slide {width: 212px; }
.mainPageGuide__swiperWrap {position: relative; }
.mainPageGuide__card {padding-top: 20px; padding-bottom: 20px; border: none; border-radius: 0; background: transparent; color: inherit; text-decoration: none !important; }
.mainPageGuide__card::before {content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, rgba(221,221,221,0) 0%, rgba(221,221,221,1) 30%, rgba(221,221,221,1) 70%, rgba(221,221,221,0) 100%);}
.mainPageGuide__slide:last-child::after {content: ""; position: absolute; right: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, rgba(221,221,221,0) 0%, rgba(221,221,221,1) 30%, rgba(221,221,221,1) 70%, rgba(221,221,221,0) 100%);}
.mainPageGuide__card:hover {background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); }
.mainPageGuide__cardBottom {margin-top: auto; text-align: center}
@media (max-width: 767px) {
    .mainPageGuide {margin-bottom: 50px; }
    .mainPageGuide__h2 {transform: scale(0.8); margin-bottom: 2rem; }
    .mainPageGuide__h3 img {transform: scale(0.8); }
    .mainPageGuide__slide {width: 164px; }
}



/**
 * Twitter
 */
.mainPageTwitter {position: relative; padding: 80px 0 100px; background: url(https://ncjapan2.nefficient.jp/ncjapan/ncsoft/lm/official/main/twitterBg.jpg) center top #92D7F8;}
.mainPageTwitter__container {display: flex; justify-content: space-between; }
.mainPageTwitter__item {display: block; width: 49.5%; }
.mainPageTwitter__tweetHolder {height: 600px; background: #fff; overflow: hidden;  }
.mainPageTwitter__charaArea {position: absolute; bottom: -20px; left: 50%; width: 1250px; height: 1070px; transform: translateX(-370px); }
.mainPageTwitter__normalContent {position: relative; }
.mainPageTwitter__h2 {margin-bottom: 120px; }
.mainPageTwitter__shead {margin: 0; padding-bottom: 20px;  border-bottom: 3px solid #3F1F12; }
@media (max-width: 767px) {
    .mainPageTwitter {padding: 40px 0; }
    .mainPageTwitter__charaArea {display: none; }
    .mainPageTwitter__h2 {margin-bottom: 20px; transform: scale(0.8);}

    .mainPageTwitter__tweetHolder iframe { width: 740px !important; } /* iOS横幅バグ対応 */

}


@media (max-width: 575px) {
    /**
         * swipeTab
         */
    .swipeTab__slide {width: 160px; }
}

@media (max-width: 767px) {
    .mainPageTopArea__bannerArea {position: static; }
    .mainPageTopArea__bannerAreaInner {display: block; padding: 10px; }
    .mainPageTopArea__slideBanner {width: 100%; margin-bottom: 10px;  }
    .mainPageTopArea__bannerAreaRight {width: 100%; }
    .mainPageTopArea__storeLink {position: absolute; top: 77vw; left: 10px; right: 10px; height: auto; padding: 0; background: none; }
    .mainPageTopArea__storeLinkList {position: static; flex-direction: row; padding: 0; }
    .mainPageTopArea__storeLinkList li {margin: 0 3px; background: rgba(0,0,0,.5); }
    .mainPageTopArea__storeLinkList li {border: none; }
    .mainPageTopArea__storeLinkList li > a,
    .mainPageTopArea__storeLinkList li > span {padding: 3% 8%; }
    .mainPageTopArea__storeLinkV2 {position: absolute; top: 78.5vw; left: 10px; right: 10px; height: auto; padding: 0; background: none; }

    /*  ie11 */
    .mainPageTopArea__specialBanner {position: static; }
    .mainPageTopArea__specialBanner img {position: static; top: auto; left: auto; }
    .mainPageTopArea__specialBannerList li:last-child {margin-bottom: 0}


    /**
     * Twitter
     */
    .mainPageTwitter__container {display: static; }
    .mainPageTwitter__item {display: none; width: 100%;}
    .mainPageTwitter__item.current {display: block; }

    /*.mainPageTopic--slide {width: 328px; }*/

    /*.mainPageGuide__slide {width: 320px; }*/

}

@media (max-width: 991px) {

}

@media (min-width: 1100px) {
    .mainPageTopArea__visualPC {padding-top: 956px; }

}