@charset "UTF-8";



/* ==========================================================================
   top
========================================================================== */
/*------------------------------------------------------------
    main
------------------------------------------------------------*/
.main_section {
    background: url(../img/top/main_bg.jpg) center -40px repeat;
}
.main_inner {
    position: relative;
    width: 960px;
    height: 1260px;
    margin: 0 auto;
}
.main_img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    height: 766px;
    margin-left: -720px;
    background-position: center top;
    background-repeat: no-repeat;
}
.main_logo {
    position: absolute;
    top: 530px;
    left: 7px;
    width: 660px;
    height: 205px;
    overflow: hidden;
    background-position: 0 0;
    background-repeat: no-repeat;
    text-indent: -9999px;
}
.main_movie {
    position: absolute;
    top: 559px;
    left: 709px;
    background: url(../img/top/main_movie_bg.png) 0 0 no-repeat;
    background-size: 100% auto;
}
.main_movie.new_icon::before {
  content: url(../img/top/movie_new.png);
  position: absolute;
  top: 13px;
  left: 10px;
  z-index: 2;
}
.main_gnav {
    position: absolute;
    top: 758px;
    left: -11px;
    width: 984px;
    height: 135px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.main_gnav_list li {
    position: absolute;
    top: 26px;
    width: 176px;
    height: 79px;
}
.main_gnav_story {
    left: 33px;
}
.main_gnav_character {
    left: 219px;
}
.main_gnav_oasis {
    left: 406px;
}
.main_gnav_sabaku {
    left: 592px;
}
.main_gnav_movie {
    left: 778px;
}
.main_gnav_list li:before,
.main_gnav_list li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.main_gnav_list li:before {
    opacity: 0;
}
.main_gnav_list li:after {
    opacity: 1;
}
.main_gnav_list li span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-indent: -9999px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.stamp_section{
    position: absolute;
    top: 890px;
    left: 67px;
}
.stamp_text{
    position: absolute;
    top: 0;
    left: 0;
}
.stamp_btn{
    position: absolute;
    top: 32px;
    left: 635px;
}
.info_section {
    position: absolute;
    top: 1050px;
    left: 0;
}
.info_btn_demo {
    position: absolute;
    top: -33px;
    left: 12px;
    z-index: 1;
}
.info_text {
    position: absolute;
    top: 0;
    left: 0;
}
.info_cero {
    position: absolute;
    top: 87px;
    left: 164px;
}
.info_btn {
    position: absolute;
    top: 115px;
    left: 217px;
}
.guidebook_btn{
    position: absolute;
    top: 175px;
    left: 5px;
    display: block;
    z-index: 1000;
}

.topics_section {
    position: absolute;
    top: 1020px;
    left: 488px;
    width: 268px;
}
.topics_title {
    position: absolute;
    top: 0;
    left: 0;
}
.topics_inner {
    position: relative;
}
.topics_img {
    width: 168px;
    position: absolute;
    top: 63px;
    left: 50px;
}
.topics_img img {
    max-width: 100%;
    height: auto;
}
.topics_text {
  position: absolute;
  top: 161px;
  left: 10px;
}
.topics_btn {
    position: absolute;
    top: 206px;
    left: 10px;
}
.comic_section {
    position: absolute;
    top: 1020px;
    left: 744px;
    width: 211px;
}
.comic_title {
    position: absolute;
    top: 0;
    left: 0px;
}
.comic_title.new_icon::before {
  content: url(../img/top/comic_new.png);
  position: absolute;
  top: 3px;
  left: 30px;
}
.comic_inner {
    position: relative;
    padding: 49px 0 0 40px;
}
.comic_img {
    width: 168px;
    position: absolute;
    top: 59px;
    left: 39px;
}
.comic_img img {
    max-width: 100%;
    height: auto;
}
.comic_text {
    position: absolute;
    top: 162px;
    left: 10px;
}

@media screen and (min-width: 1025px) {
    .main_img {
        background-image: url(../img/top/main_img.png);
    }
    .main_logo {
        background-image: url(../img/top/main_logo.png);
    }
    .main_gnav {
        background-image: url(../img/top/main_gnav_bg.png);
    }
    .main_gnav_list li:before {
        background-image: url(../img/top/main_gnav_frame_ov.png);
    }
    .main_gnav_list li:after {
        background-image: url(../img/top/main_gnav_frame.png);
    }
    .main_gnav_story span {
        background-image: url(../img/top/main_gnav_story.png);
    }
    .main_gnav_character span {
        background-image: url(../img/top/main_gnav_character.png);
    }
    .main_gnav_oasis span {
        background-image: url(../img/top/main_gnav_oasis.png);
    }
    .main_gnav_sabaku span {
        background-image: url(../img/top/main_gnav_sabaku.png);
    }
    .main_gnav_movie span {
        background-image: url(../img/top/main_gnav_movie.png);
    }
}
@media screen and (max-width: 1024px) {
    .main_inner {
        height: 1040px;
    }
    .main_img {
        width: 1100px;
        height: 617px;
        margin-left: -550px;
        background-image: url(../img/top/main_img_s.png);
    }
    .main_logo {
        position: absolute;
        top: 223px;
        left: 28px;
        width: 552px;
        height: 173px;
        background-image: url(../img/top/main_logo_s.png);
    }
    .main_movie {
        top: 492px;
        left: 723px;
        width: 245px;
    }
    .main_movie img {
        max-width: 100%;
        height: auto;
    }
    .main_gnav {
        top: 558px;
        width: 745px;
        height: 114px;
        background-image: url(../img/top/main_gnav_bg_s.png);
    }
    .main_gnav li {
        top: 25px;
        width: 133px;
        height: 61px;
    }
    .main_gnav_story {
        left: 28px;
    }
    .main_gnav_character {
        left: 168px;
    }
    .main_gnav_oasis {
        left: 308px;
    }
    .main_gnav_sabaku {
        left: 448px;
    }
    .main_gnav_movie {
        left: 587px;
    }
    .main_gnav_list li:before {
        background-image: url(../img/top/main_gnav_frame_ov_s.png);
    }
    .main_gnav_list li:after {
        background-image: url(../img/top/main_gnav_frame_s.png);
    }
    .main_gnav_story span {
        background-image: url(../img/top/main_gnav_story_s.png);
    }
    .main_gnav_character span {
        background-image: url(../img/top/main_gnav_character_s.png);
    }
    .main_gnav_oasis span {
        background-image: url(../img/top/main_gnav_oasis_s.png);
    }
    .main_gnav_sabaku span {
        background-image: url(../img/top/main_gnav_sabaku_s.png);
    }
    .main_gnav_movie span {
        background-image: url(../img/top/main_gnav_movie_s.png);
    }
    .stamp_section {
        top: 670px;
    }
    .info_section {
        top: 828px;
    }
    .topics_section {
        top: 796px;
    }
    .comic_section {
        top: 796px;
    }
}



/*------------------------------------------------------------
    intro
------------------------------------------------------------*/
.intro_section {
    position: relative;
}
.intro_section:before {
    content: "";
    position: absolute;
    top: -9px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 111px;
    background: url(../img/top/introduction_line.png) center top no-repeat;
}
.intro_icon {
    position: absolute;
    top: 170px;
    left: 50%;
    width: 113px;
    height: 95px;
    margin-left: -56px;
    background: url(../img/top/introduction_icon.png) 0 0 no-repeat;
    -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
            transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.intro_icon.rotate1 {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.intro_icon.rotate2 {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
.introduction_line_vertical {
    position: absolute;
    top: 82px;
    left: 50%;
    width: 34px;
    height: 1462px;
    margin-left: -18px;
    background: url(../img/top/introduction_line_vertical.png) 0 0 repeat-y;
}
.oasis_bg,
.sabaku_bg {
    position: absolute;
    top: 0;
    width: 50%;
    height: 1550px;
    background-repeat: no-repeat;
    background-size: cover;
}
.oasis_bg {
    left: 0;
    background-image: url(../img/top/oasis_bg.jpg);
    background-position: right center;
}
.sabaku_bg {
    right: 0;
    background-image: url(../img/top/sabaku_bg.jpg);
    background-position: left center;
}
.intro_text_section {
    position: relative;
    width: 960px;
    height: 787px;
    margin: 0 auto;
}
.introduction_text {
    position: absolute;
    top: 107px;
    left: -10px;
}
.introduction_chara_01 {
    position: absolute;
    top: -23px;
    left: 720px;
    z-index: 1;
}
.introduction_chara_02 {
    position: absolute;
    top: 438px;
    left: -58px;
    z-index: 1;
}
.intro_contents_section {
    position: relative;
    width: 960px;
    height: 759px;
    margin: 0 auto;
}
.oasis_section,
.sabaku_section {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
}
.oasis_title {
    position: absolute;
    top: 5px;
    left: 21px;
}
.oasis_img_wrap,
.sabaku_img_wrap {
    position: absolute;
    top: 100px;
    width: 394px;
    height: 250px;
    background: url(../img/top/introduction_photoframe.png) 0 0 no-repeat;
}
.oasis_img_wrap {
    left: 23px;
}
.oasis_img,
.sabaku_img {
    display: none;
    position: absolute;
    top: 20px;
    left: 19px;
}
.oasis_img.current,
.sabaku_img.current {
    display: block;
}
.oasis_text {
    position: absolute;
    top: 375px;
    left: 37px;
}
.oasis_btn,
.sabaku_btn {
    position: absolute;
    top: 495px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.oasis_btn {
    left: 42px;
    background-image: url(../img/top/oasis_btn_ov.png);
}
.sabaku_title {
    position: absolute;
    top: 0;
    left: 84px;
}
.sabaku_img_wrap {
    left: 61px;
}
.sabaku_text {
    position: absolute;
    top: 374px;
    left: 61px;
}
.sabaku_btn {
    left: 86px;
    background-image: url(../img/top/sabaku_btn_ov.png);
}



/*------------------------------------------------------------
    modal topics
------------------------------------------------------------*/
.modal_topics_open .modal_inner {
    width: 880px;
    margin-top: -382px;
    margin-left: -440px;
}
.modal_window_small.modal_topics_open .modal_inner {
    margin-top: 50px;
}
.modal_topics_open #topics {
    display: block;
}
.modal_topics_title {
    margin-bottom: 60px;
    text-align: center;
}
.modal_topics_item {
    float: left;
    width: 275px;
    margin-top: 77px;
    margin-right: 27px;
}
.modal_topics_item:nth-child(-n+3) {
    margin-top: 0;
}
.modal_topics_item:nth-child(2n) {
    margin-right: 28px;
}
.modal_topics_item:nth-child(3n) {
    margin-right: 0;
}
.modal_topics_item a {
    text-decoration: none;
    color: #ffffff;
}
.modal_topics_img {
    margin-bottom: 20px;
}
.modal_topics_img img {
    max-width: 100%;
    height: auto;
}
.modal_topics_textbox {
    font-size: 20px;
}
.modal_topics_date {
    margin-bottom: 12px;
    line-height: 1;
}
.modal_topics_text {
    line-height: 1.56;
}



/*------------------------------------------------------------
    modal movie
------------------------------------------------------------*/
.modal_movie_open .modal_inner {
    margin-top: -382px;
}
.modal_window_small.modal_movie_open .modal_inner {
    margin-top: 50px;
}
.modal_movie_open #movie {
    display: block;
}
.modal_movie_title {
    margin-bottom: 60px;
    text-align: center;
}
.modal_movie_contents {
    position: relative;
    width: 928px;
    height: 543px;
    margin: 0 auto;
    background: url(../img/top/modal_movie_frame.png) 0 0 no-repeat;
}
.modal_movie_player {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 880px;
    height: 495px;
    background-color: #451d22;
    cursor: pointer;
}
.modal_movie_player iframe {
    width: 100%;
    height: 100%;
}
.modal_movie_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.playing .modal_movie_img,
.ua-wiiu .modal_movie_img {
    display: none;
}
.modal_movie_img img {
    max-width: 100%;
    height: auto;
}
.modal_movie_icon {
    display: block;
    position: absolute;
    top: 186px;
    left: 378px;
    width: 125px;
    height: 124px;
    background: url(../img/top/modal_movie_icon_play.png) 0 0 no-repeat;
}
.playing .modal_movie_icon,
.ua-wiiu .modal_movie_icon {
    display: none;
}

/*------------------------------------------------------------
    modal comic
------------------------------------------------------------*/
.modal_comic_open .modal_inner {
    margin-top: -382px;
}
.modal_window_small.modal_comic_open .modal_inner {
    margin-top: 50px;
}
.modal_comic_open #comic {
    display: block;
}
.modal_comic_title{
    margin-bottom: 60px;
    text-align: center;
}
.modal_comic_img{
    text-align: center;
}



/*------------------------------------------------------------
    gnav_section overwrite
------------------------------------------------------------*/
.gnav_section {
    margin-bottom: -150px;
    transition: margin-bottom 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.show .gnav_section {
    margin-bottom: 0;
}
.footer_section .pagetop_btn {
    margin-bottom: -60px;
}
.footer_section.show .pagetop_btn {
    margin-bottom: 0;
}



/*------------------------------------------------------------
    fnav overwrite
------------------------------------------------------------*/
.fnav_copyright {
    position: absolute;
    top: 12px;
    left: 0;
}
.fnav_nintendo {
    left: 555px;
}
.fnav_3ds {
    left: 691px;
}
.fnav_twitter {
    position: absolute;
    top: 7px;
    left: 900px;
}
.fnav_facebook {
    position: absolute;
    top: 7px;
    left: 933px;
}



/*------------------------------------------------------------
  hover
------------------------------------------------------------*/
.no-touchevents .main_movie img,
.no-touchevents .main_gnav_list li:before,
.no-touchevents .main_gnav_list li:after,
.no-touchevents .info_cero,
.no-touchevents .topics_inner a .topics_img,
.no-touchevents .topics_inner a .topics_text,
.no-touchevents .modal_topics_item a .modal_topics_img,
.no-touchevents .modal_topics_item a .modal_topics_textbox,
.no-touchevents .topics_btn a,
.no-touchevents .comic_inner a .comic_img,
.no-touchevents .comic_inner a .comic_text,
.no-touchevents .oasis_btn a img,
.no-touchevents .sabaku_btn a img,
.no-touchevents .fnav_twitter,
.no-touchevents .fnav_facebook,
.no-touchevents .modal_movie_icon,
.no-touchevents .stamp_section .stamp_btn a,
.no-touchevents .info_btn a {
    transition: opacity 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.no-touchevents .main_gnav_list li:hover:before {
    opacity: 1;
}
.no-touchevents .main_gnav_list li:hover:after,
.no-touchevents .oasis_btn a:hover img,
.no-touchevents .sabaku_btn a:hover img {
    opacity: 0;
}
.no-touchevents .main_movie a:hover img,
.no-touchevents .info_cero:hover,
.no-touchevents .topics_inner a:hover .topics_img,
.no-touchevents .topics_inner a:hover .topics_text,
.no-touchevents .modal_topics_item a:hover .modal_topics_img,
.no-touchevents .modal_topics_item a:hover .modal_topics_textbox,
.no-touchevents .topics_btn a:hover,
.no-touchevents .comic_inner a:hover .comic_img,
.no-touchevents .comic_inner a:hover .comic_text,
.no-touchevents .fnav_twitter:hover,
.no-touchevents .fnav_facebook:hover,
.no-touchevents .modal_movie_player:hover .modal_movie_icon,
.no-touchevents .stamp_section .stamp_btn a:hover,
.no-touchevents .info_btn a:hover {
    opacity: 0.8;
}