@charset "UTF-8";
@font-face {
    font-family: "ange-default";
    src: url("../font/FOT-ChiaroStd-B.otf") format("opentype");
}
body {
    font-family: "ange-default", sans-serif;
    font-feature-settings: "palt";
    width: 100%;
    min-width: 1024px;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    width: 100%;
    height: 100%;
}

#container {
    width: 100%;
    min-width: 1024px;
    height: auto;
    background: url("/image/top/pattern_bg.png") top center repeat;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
#container::before {
    width: 159.6rem;
    height: 100%;
    background-color: rgba(15, 19, 35, 0.7);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -79.8rem;
    content: "";
    border: solid 1rem #19213d;
}

#menu {
    width: 100%;
    height: 7.2rem;
    position: relative;
}
#menu .bgImg {
    width: 100%;
    min-width: 1024px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 10;
}
#menu .bgImg::before {
    width: 17.7083333333%;
    height: 88.8888888889%;
    background: url("/image/menu/header_base_pattern.png") top left/contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0.15625%;
    content: "";
}
#menu nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#menu nav ul {
    width: 64.1666666667%;
    max-width: 898.3333333333px;
    height: 90.2777777778%;
    margin: 0 auto;
    display: flex;
    position: relative;
}
#menu nav ul .itemWrap {
    width: 19.5616883117%;
    height: 100%;
    margin-right: 0.3246753247%;
    display: flex;
    position: relative;
    z-index: 100;
}
#menu nav ul .itemWrap:hover {
    background: url("/image/menu/header_active.png") top left/contain no-repeat;
    background-position: top 0.2rem left 0;
}
#menu nav ul .itemWrap.disable {
    pointer-events: none;
}
#menu nav ul .itemWrap.disable .item::after {
    width: 100%;
    height: 100%;
    background: url("/image/menu/header_disabled.png") top left/contain no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0.8298755187%;
    content: "";
}
#menu nav ul .itemWrap::before {
    width: 1.6597510373%;
    height: 59.7222222222%;
    background-color: #464388;
    position: absolute;
    top: 0;
    left: -1.6597510373%;
    margin-top: 4.5643153527%;
    content: "";
    border-radius: 0.1rem;
}
#menu nav ul .itemWrap:last-of-type::after {
    width: 1.6597510373%;
    height: 59.7222222222%;
    background-color: #464388;
    position: absolute;
    margin-top: 4.5643153527%;
    right: -1.6597510373%;
    content: "";
    border-radius: 0.1rem;
}
#menu nav ul .itemWrap .item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#fv {
    width: 100%;
    min-width: 1024px;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    position: relative;
}
#fv .bgImg {
    position: relative;
}

#sns {
    width: 79.3rem;
    padding-top: 56.8rem;
    display: flex;
    position: absolute;
    top: 0;
    left: 2.8rem;
    margin-top: 35.8rem;
}
#sns .youtubeWrap,
#sns .twitterWrap {
    width: 49%;
    height: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    border: solid 0.4rem #7dbdff;
    border-radius: 5px;
}
#sns .youtubeWrap .title,
#sns .twitterWrap .title {
    width: 73.9473684211%;
    height: 12.5603864734%;
    position: absolute;
    top: 0;
    left: 12.8947368421%;
    margin-top: 3.4210526316%;
}
#sns .youtubeWrap .linkBtn,
#sns .twitterWrap .linkBtn {
    width: 56.3157894737%;
    height: 8.9500860585%;
    margin-top: 3.9473684211%;
    position: absolute;
    bottom: 0;
    margin-bottom: 2.6315789474%;
    left: 22.6315789474%;
    cursor: pointer;
}
#sns .youtubeWrap .linkBtn:hover,
#sns .twitterWrap .linkBtn:hover {
    opacity: 0.7;
}
#sns .youtubeWrap {
    right: 0;
}
#sns .youtubeWrap .title {
    background: url("/image/top/title_movie.png") top left/contain no-repeat;
}
#sns .youtubeWrap .youtubeList {
    position: absolute;
    top: 0;
    left: 4.6052631579%;
    margin-top: 20.5263157895%;
    width: 91.5789473684%;
    height: 74%;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
}
#sns .youtubeWrap .youtubeList .iframeWrap {
    width: 100%;
    height: 47.5%;
    position: relative;
}
#sns .youtubeWrap .youtubeList .iframeWrap:hover {
    opacity: 0.7;
}
#sns .youtubeWrap .youtubeList .iframeWrap iframe {
    width: 100%;
    height: 100%;
    border: solid 0.4rem #7dbdff; /*線*/
}
#sns .youtubeWrap .youtubeList .iframeWrap a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#sns .twitterWrap {
    margin-right: 2%;
}
#sns .twitterWrap .title {
    background: url("/image/top/title_twitter.png") top left/contain no-repeat;
}
#sns .twitterWrap .twitterContent {
    width: 91.5789473684%;
    height: 74%;
    position: absolute;
    top: 0;
    left: 4.6052631579%;
    margin-top: 20.5263157895%;
    border: solid 0.4rem #7dbdff; /*線*/
    overflow: hidden auto;
}
#sns .twitterWrap .twitterContent #twitter-widget-0 {
    width: 90% !important;
}
@media screen and (max-width: 1024px) {
    #sns .youtubeWrap,
    #sns .twitterWrap {
        border: solid 0.4rem #b7c6e4;
    }
    #sns .youtubeWrap .title {
        background: url("/image/top/title_movie.png") top left/contain no-repeat;
        left: 29.3333333333px;
    }
    #sns .youtubeWrap .youtubeList .iframeWrap iframe {
        border: solid 0.4rem #7dbdff; /*線*/
    }
    #sns .twitterWrap {
        margin-right: 2%;
    }
    #sns .twitterWrap .title {
        background: url("/image/top/title_twitter.png") top left/contain no-repeat;
    }
    #sns .twitterWrap .twitterContent {
        border: solid 0.4rem #7dbdff; /*線*/
    }
}

#mainContent {
    width: 100%;
    height: auto;
    position: relative;
}

#campaign {
    width: 100%;
    max-width: 1400px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 4.946192053%;
    position: relative;
}
#campaign .registWrap {
    width: 81.5625%;
    max-width: 1141.875px;
    height: 150rem;
    margin: 3.4375% auto 0 auto;
    background: url("/image/top/registration_base.png") top left/contain no-repeat;
    position: relative;
}
#campaign .registWrap::before {
    width: 42.5287356322%;
    padding-top: 6.8326947637%;
    background: url("/image/top/title_registration_txt.png") top left/contain no-repeat;
    position: absolute;
    margin-top: 0.7662835249%;
    top: 0;
    left: 50%;
    margin-left: -21.2643678161%;
    content: "";
}
#campaign .registWrap > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 13.7931034483%;
}
#campaign .registWrap > div > div {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 3.4rem 5rem;
    padding-top: 3.4rem;
}
#campaign .registWrap > div > div:first-of-type {
    padding-top: 0;
}
#campaign .registWrap > div > div > a {
    display: block;
    width: auto;
    height: 8.3rem;
}
#campaign .registWrap > div > div > a.badgeLine img {
    border-radius: 1.2rem;
}
#campaign .registWrap > div > div > a img {
    display: block;
    width: auto;
    height: 100%;
}
#campaign .registWrap > div > div > a img:hover {
    opacity: 0.7;
}
#campaign .registWrap .campaignText {
    display: block;
    width: 145.8rem;
    height: auto;
    margin: 5rem auto 0 auto;
}
#campaign .registWrap .campaignImage {
    display: block;
    width: 140rem;
    height: auto;
    margin-top: 3rem;
    margin-left: 7.3rem;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 40px rgb(255, 255, 255), 0 0 40px rgb(255, 255, 255);
}
#campaign .registWrap p {
    width: 141.75rem;
    margin: 5.4rem auto 0 auto;
    padding-left: 2.5rem;
    font-size: 2.6rem;
    line-height: 1.2307692308;
    color: #21307a;
    text-indent: -1.1em;
}
#campaign .registWrap p:not(:first-of-type) {
    margin-top: 0.5rem;
}
#campaign .bannerWrap {
    width: 78.6458333333%;
    max-width: 1101.0416666667px;
    margin: 5.7291666667% auto 0 auto;
}
#campaign .bannerWrap > div {
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3.178807947%;
    width: 100%;
}
#campaign .bannerWrap > div a {
    display: block;
    width: 48.4105960265%;
    margin-bottom: 3.178807947%;
}
#campaign .bannerWrap > div a:hover {
    opacity: 0.7;
}
#campaign .bannerWrap > div a img {
    display: block;
    width: 100%;
    height: auto;
}

#progress,
#story,
#world,
#spec,
#system {
    width: 100%;
    height: auto;
    position: relative;
}
#progress .titleWrap,
#story .titleWrap,
#world .titleWrap,
#spec .titleWrap,
#system .titleWrap {
    width: 99.2708333333%;
    height: 15.2rem;
    margin: 0 auto;
    border-image-source: url("../image/top/title_base.png");
    border-image-slice: 39 56 53 34 fill;
    border-image-width: 3.9rem 5.6rem 5.3rem 3.4rem;
    position: relative;
}
#progress .titleWrap .title,
#story .titleWrap .title,
#world .titleWrap .title,
#spec .titleWrap .title,
#system .titleWrap .title {
    width: 67rem;
    height: 11.4rem;
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: 1rem;
    margin-left: -33.5rem;
}
#progress .titleWrap .title img,
#story .titleWrap .title img,
#world .titleWrap .title img,
#spec .titleWrap .title img,
#system .titleWrap .title img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}
#progress .titleWrap .decoImg,
#story .titleWrap .decoImg,
#world .titleWrap .decoImg,
#spec .titleWrap .decoImg,
#system .titleWrap .decoImg {
    width: 97.796432319%;
    height: 11.4rem;
    background: url("/image/top/title_base_pattern.png");
    background-repeat: no-repeat;
    background-position: center 48.8%;
    background-size: 110.4rem 106.8rem;
    position: absolute;
    top: 0;
    margin-top: 1rem;
    left: 1.1rem;
}

#story .imgList,
#system .imgList,
#world .imgList,
#progress .imgList {
    margin: 0 auto;
    position: relative;
}
#story .imgList .naviImg,
#system .imgList .naviImg,
#world .imgList .naviImg,
#progress .imgList .naviImg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
}
#story .imgList .naviImg.showing,
#system .imgList .naviImg.showing,
#world .imgList .naviImg.showing,
#progress .imgList .naviImg.showing {
    pointer-events: auto;
    opacity: 1;
    animation-fill-mode: forwards;
}
#story .imgList .naviImg.show_R,
#system .imgList .naviImg.show_R,
#world .imgList .naviImg.show_R,
#progress .imgList .naviImg.show_R {
    animation: navi_slidein_r 0.5s ease 0s 1 alternate;
    pointer-events: auto;
    animation-fill-mode: forwards;
}
#story .imgList .naviImg.hide_R,
#system .imgList .naviImg.hide_R,
#world .imgList .naviImg.hide_R,
#progress .imgList .naviImg.hide_R {
    animation: navi_slideout_r 0.5s ease 0s 1 alternate;
    pointer-events: auto;
    animation-fill-mode: forwards;
}
#story .imgList .naviImg.show_L,
#system .imgList .naviImg.show_L,
#world .imgList .naviImg.show_L,
#progress .imgList .naviImg.show_L {
    animation: navi_slidein_l 0.5s ease 0s 1 alternate;
    pointer-events: auto;
    animation-fill-mode: forwards;
}
#story .imgList .naviImg.hide_L,
#system .imgList .naviImg.hide_L,
#world .imgList .naviImg.hide_L,
#progress .imgList .naviImg.hide_L {
    animation: navi_slideout_l 0.5s ease 0s 1 alternate;
    pointer-events: auto;
    animation-fill-mode: forwards;
}
#story .imgList img,
#system .imgList img,
#world .imgList img,
#progress .imgList img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
#story .arrowBtn,
#system .arrowBtn,
#world .arrowBtn,
#progress .arrowBtn {
    width: 7.4rem;
    height: 10.6rem;
    position: absolute;
    cursor: pointer;
}
#story .arrowBtn:hover,
#system .arrowBtn:hover,
#world .arrowBtn:hover,
#progress .arrowBtn:hover {
    opacity: 0.7;
}
#story .arrowBtn[data-side="L"],
#system .arrowBtn[data-side="L"],
#world .arrowBtn[data-side="L"],
#progress .arrowBtn[data-side="L"] {
    background: url("/image/top/arrow_l.png") top left/contain no-repeat;
    left: 50%;
    margin-left: -90.4rem;
}
#story .arrowBtn[data-side="R"],
#system .arrowBtn[data-side="R"],
#world .arrowBtn[data-side="R"],
#progress .arrowBtn[data-side="R"] {
    background: url("/image/top/arrow_r.png") top left/contain no-repeat;
    left: 50%;
    margin-left: 83rem;
}
#story .indicatorWrap,
#system .indicatorWrap,
#world .indicatorWrap,
#progress .indicatorWrap {
    display: flex;
    justify-content: center;
}
#story .indicatorWrap .indicator,
#system .indicatorWrap .indicator,
#world .indicatorWrap .indicator,
#progress .indicatorWrap .indicator {
    width: 3.8rem;
    height: 3.8rem;
    margin-top: 4rem;
    margin-bottom: 7.5rem;
    background-color: #464388;
    position: relative;
    cursor: pointer;
    border: solid 0.4rem #f2f7fe;
    border-radius: 50%;
}
#story .indicatorWrap .indicator:hover,
#system .indicatorWrap .indicator:hover,
#world .indicatorWrap .indicator:hover,
#progress .indicatorWrap .indicator:hover {
    opacity: 0.7;
}
#story .indicatorWrap .indicator:not(:last-of-type),
#system .indicatorWrap .indicator:not(:last-of-type),
#world .indicatorWrap .indicator:not(:last-of-type),
#progress .indicatorWrap .indicator:not(:last-of-type) {
    margin-right: 4.1rem;
}
#story .indicatorWrap .indicator.on::before,
#system .indicatorWrap .indicator.on::before,
#world .indicatorWrap .indicator.on::before,
#progress .indicatorWrap .indicator.on::before {
    width: 2.2rem;
    height: 2.2rem;
    background-color: #b9beff;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
}

#progress {
    width: 100%;
}
#progress .characterArea {
    position: relative;
    width: 100%;
    height: 92.2rem;
    margin-top: 6.8rem;
    background-image: url(../image/top/progress_base.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-size: contain;
}
#progress .characterArea .bgImg {
    width: 100%;
    height: auto;
    position: relative;
}
#progress .characterArea .magicList {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 97.3rem;
    height: 9.9rem;
    top: 2.4rem;
    left: 50%;
    margin-left: -48.65rem;
}
#progress .characterArea .magicList .magicBtn {
    width: 19.3rem;
    height: 7.2rem;
    position: relative;
    cursor: pointer;
}
#progress .characterArea .magicList .magicBtn:hover {
    opacity: 0.7;
}
#progress .characterArea .magicList .magicBtn[data-attr="BLUE"] {
    background: url("/image/magic/tab_blue_off.png") top left/100% 100% no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr="BLACK"] {
    background: url("/image/magic/tab_black_off.png") top left/100% 100% no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr="RED"] {
    background: url("/image/magic/tab_red_off.png") top left/100% 100% no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr="WHITE"] {
    background: url("/image/magic/tab_white_off.png") top left/100% 100% no-repeat;
}
#progress .characterArea .magicList .magicBtn[data-attr="GREEN"] {
    background: url("/image/magic/tab_green_off.png") top left/100% 100% no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr="BLUE"] {
    background: url("/image/magic/tab_blue_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr="BLACK"] {
    background: url("/image/magic/tab_black_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr="RED"] {
    background: url("/image/magic/tab_red_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr="WHITE"] {
    background: url("/image/magic/tab_white_on.png") top left/contain no-repeat;
}
#progress .characterArea .magicList .magicBtn.on[data-attr="GREEN"] {
    background: url("/image/magic/tab_green_on.png") top left/contain no-repeat;
}
#progress .characterArea .charaImgWrap {
    width: 100%;
    height: 80.2rem;
    position: absolute;
    top: 11.8rem;
    left: 0;
}
#progress .characterArea .charaImgWrap .imgList {
    width: 151.7rem;
    height: 80.2rem;
    margin: 0 auto;
    position: relative;
}
#progress .characterArea .charaImgWrap .imgList .naviImg {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg h3 {
    position: absolute;
    top: 2.3rem;
    left: 90.4rem;
    width: 47.7rem;
    margin: 0;
    text-align: center;
    font-size: 4.8rem;
    white-space: nowrap;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .description {
    position: absolute;
    top: 61.7rem;
    left: 80.8rem;
    width: 66rem;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .description p {
    margin: 0;
    font-size: 3rem;
    line-height: 1.3;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile {
    position: absolute;
    top: 13.6rem;
    left: 80.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 66rem;
    margin: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dt {
    width: 24rem;
    height: 8rem;
    font-size: 2.8rem;
    color: #ffffff;
    text-align: center;
    line-height: 1;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .profile dd {
    width: 39.4rem;
    height: 8.01rem;
    margin: 0;
    padding-top: 1.7rem;
    font-size: 2.9rem;
    line-height: 1;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast {
    position: absolute;
    top: 65.8rem;
    left: 40.9rem;
    width: 32rem;
    margin: 0;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl dt {
    width: 12rem;
    height: 4.6rem;
    font-size: 2.8rem;
    line-height: 1;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg .cast dl dd {
    width: 20rem;
    height: 4.6rem;
    margin: 0;
    font-size: 2.8rem;
    line-height: 1;
    text-align: right;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#progress .characterArea .charaImgWrap .imgList .naviImg.blue h3,
#progress .characterArea .charaImgWrap .imgList .naviImg.blue .profile dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.blue .cast dt,
#progress .characterArea .charaImgWrap .imgList .naviImg.blue .cast dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.blue .description {
    color: #1c46ce;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.black h3,
#progress .characterArea .charaImgWrap .imgList .naviImg.black .profile dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.black .cast dt,
#progress .characterArea .charaImgWrap .imgList .naviImg.black .cast dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.black .description {
    color: #663c91;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.red h3,
#progress .characterArea .charaImgWrap .imgList .naviImg.red .profile dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.red .cast dt,
#progress .characterArea .charaImgWrap .imgList .naviImg.red .cast dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.red .description {
    color: #b50000;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.white h3,
#progress .characterArea .charaImgWrap .imgList .naviImg.white .profile dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.white .cast dt,
#progress .characterArea .charaImgWrap .imgList .naviImg.white .cast dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.white .description {
    color: #a16a00;
}
#progress .characterArea .charaImgWrap .imgList .naviImg.green h3,
#progress .characterArea .charaImgWrap .imgList .naviImg.green .profile dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.green .cast dt,
#progress .characterArea .charaImgWrap .imgList .naviImg.green .cast dd,
#progress .characterArea .charaImgWrap .imgList .naviImg.green .description {
    color: #248112;
}
#progress .characterArea .charaImgWrap .arrowBtn {
    position: absolute;
    top: 30.6rem;
}
#progress .indicatorWrap {
    width: 100%;
    height: 18.4rem;
    margin-bottom: 0.4rem;
    position: relative;
}

/**
* ストーリー
*/
#story .contentBody {
    position: relative;
    width: 100%;
    height: 114rem;
}
#story .contentBody .indicatorWrap {
    position: absolute;
    bottom: 4rem;
    width: 100%;
}
#story .contentBody .storyImgWrap {
    position: relative;
    height: 100%;
    padding: 0 0 10rem;
}
#story .contentBody .storyImgWrap .imgList {
    position: relative;
    height: 100%;
    width: 158.6rem;
    margin: 0 auto;
    /* padding: 4rem; */
    /* background-image: url(../image/top/story_chara_bg.jpg); */
    background-image: url(../image/top/story_chara_bg.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: contain;
    overflow: visible;
}
#story .contentBody .storyImgWrap .imgList .naviImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#story .contentBody p {
    margin-top: 4rem;
    margin-bottom: 0;
    font-size: 3.6rem;
    line-height: 1.6;
    color: #ffffff;
    text-align: center;
}
#story .contentBody p:first-of-type {
    margin-top: 0;
}
#story .arrowBtn[data-side="L"],
#story .arrowBtn[data-side="R"] {
    top: 45%;
}

/**
*  世界観
*/
#world {
    height: 118.4rem;
}
#world .worldImgWrap {
    width: 100%;
    height: 72.2rem;
    margin-top: 5.5rem;
    position: relative;
}
#world .worldImgWrap .imgList {
    width: 149.1rem;
    height: 72.2rem;
    margin: 0 auto;
    position: relative;
}
#world .worldImgWrap .imgList .naviImg {
    height: 100%;
}
#world .worldImgWrap .imgList .naviImg img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
#world .worldImgWrap .imgList .naviImg h3 {
    /* position: absolute;
  top: 1rem;
  left: 49.8rem;
  width: 48.6rem;
  margin: 0;
  text-align: center;
  color: #1c46ce;
  font-size: 4.8rem;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1); */
    display: none;
}
#world .worldImgWrap .imgList .naviImg .textBody {
    position: absolute;
    left: 50%;
    top: 5rem;
    width: 47%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3em;
}
#world .worldImgWrap .imgList .naviImg .textBody p {
    font-size: 3rem;
    line-height: 1.6;
    margin: 0;
    color: #21307a;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#world .worldImgWrap .imgList .naviImg.blue .textBody p {
    color: #1c46ce;
}
#world .worldImgWrap .imgList .naviImg.black .textBody p {
    color: #663c91;
}
#world .worldImgWrap .imgList .naviImg.red .textBody p {
    color: #b50000;
}
#world .worldImgWrap .imgList .naviImg.white .textBody p {
    color: #a16a00;
}
#world .worldImgWrap .imgList .naviImg.green .textBody p {
    color: #248112;
}
#world .worldImgWrap .arrowBtn {
    top: 37.3rem;
}

/**
*	システム
*/
#system {
    height: 142.7rem;
}
#system .systemImgWrap {
    width: 100%;
    height: 98.4rem;
    margin-top: 6.8rem;
    position: relative;
}
#system .systemImgWrap .imgList {
    width: 148.6rem;
    height: 98.6rem;
    margin: 0 auto;
    position: relative;
}
#system .systemImgWrap .imgList img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
}
#system .systemImgWrap .imgList .naviImg {
    height: 100%;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#system .systemImgWrap .imgList .naviImg .contentBody {
    width: 111.3rem;
    position: absolute;
    top: 13.5rem;
    left: 18.1rem;
}
#system .systemImgWrap .imgList .naviImg .screenshot {
    width: 111.3rem;
    height: auto;
    padding: 0.6rem 0;
    position: static;
    border: 1px solid #bfc7e4;
}
#system .systemImgWrap .imgList .naviImg .screenshot img {
    display: block;
    width: calc(100% - 1.2rem);
    position: static;
    margin-left: 0.6rem;
    pointer-events: none;
    opacity: 1;
}
#system .systemImgWrap .imgList .naviImg h3 {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    color: #464388;
    font-size: 4.8rem;
}
#system .systemImgWrap .imgList .naviImg .textBody {
    position: static;
    width: 111rem;
    margin-top: 2rem;
}
#system .systemImgWrap .imgList .naviImg .textBody p {
    margin: 0;
    font-size: 3rem;
    line-height: 1.6;
    text-align: center;
    color: #21307a;
    text-shadow: 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255),
        0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);
}
#system .systemImgWrap .arrowBtn {
    top: 50.3rem;
}

/**
*	スペック
*/
#spec .info {
    width: 100%;
    min-height: 40.4rem;
    margin-top: 7.8rem;
    margin-bottom: 8.6rem;
    background-color: #1a213d;
    display: flex;
    position: relative;
    border-top: solid 0.2rem #f2f7fe;
    border-bottom: solid 0.2rem #f2f7fe;
    justify-content: center;
    align-items: center;
}
#spec .info .titleLogo {
    width: 78rem;
    height: 35.3rem;
    background: url("/image/top/main_logo.png") top left/contain no-repeat;
    position: relative;
}
#spec .info .text {
    width: 90rem;
}
#spec .info .text dl {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 3.8rem;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 0 6px rgb(0, 0, 0);
}
#spec .info .text dl dt {
    width: 25.5rem;
    margin: 0;
}
#spec .info .text dl dd {
    width: 62.4rem;
    margin: 0;
}

footer {
    width: 100%;
    height: 29rem;
    padding-top: 13rem;
    background: url("/image/top/footer_base.png") top center/contain repeat;
    position: relative;
}
footer .topBtn {
    width: 11.8rem;
    height: 11.8rem;
    background: url("/image/top/footer_top.png") top left/contain no-repeat;
    position: absolute;
    top: -5rem;
    left: 50%;
    margin-left: -5.9rem;
}
footer .topBtn:hover {
    opacity: 0.7;
}
footer .logoCompany {
    color: #464388;
    font-size: 3.188rem;
    text-align: center;
    line-height: 1;
}

@media screen and (max-width: 1024px) {
    #menu {
        width: 1024px;
        height: 38.4px;
    }
    #menu .bgImg {
        width: 1024px;
        height: 38.4px;
    }
    #menu .bgImg::before {
        width: 181.3333333333px;
        height: 34.1333333333px;
        top: 1.6px;
    }
    #menu ul {
        width: 657.0666666667px;
        height: 34.6666666667px;
        margin-left: 186.1333333333px;
    }
    #menu ul .itemWrap {
        width: 128.5333333333px;
        height: 34.6666666667px;
        margin-right: 2.1333333333px;
    }
    #menu ul .itemWrap:hover {
        background-position: top 1.0666666667px left 0;
    }
    #menu ul .itemWrap.disable .item::after {
        width: 128.5333333333px;
        height: 34.6666666667px;
        background-size: 128.5333333333px 34.6666666667px;
        top: 1.0666666667px;
    }
    #menu ul .itemWrap::before {
        width: 2.1333333333px;
        height: 22.9333333333px;
        top: 5.8666666667px;
        left: -getpxSize(4);
        border-radius: 0.5333333333px;
    }
    #menu ul .itemWrap:last-of-type::after {
        width: 2.1333333333px;
        height: 22.9333333333px;
        top: 5.8666666667px;
        right: -getpxSize(4);
        border-radius: 0.5333333333px;
    }
    #menu ul .itemWrap .item {
        width: 128.5333333333px;
        height: 34.6666666667px;
    }
    #fv {
        width: 1024px;
    }
    #fv .bgImg {
        width: 1024px;
    }
    #sns .youtubeWrap,
    #sns .twitterWrap {
        border: solid 2.1333333333px #7dbdff;
        border-radius: 2.6666666667px;
    }
    #sns .twitterWrap .twitterContent {
        border: solid 2.1333333333px #7dbdff;
    }
    #sns .twitterWrap .twitterContent {
        border: solid 2.1333333333px #7dbdff;
    }
    #mainContent {
        width: 1024px;
    }
    #progress,
    #story,
    #world,
    #spec,
    #system {
        width: 100%;
    }
    #system .indicatorWrap,
    #world .indicatorWrap,
    #progress .indicatorWrap {
        width: 1024px;
    }
    #system .indicatorWrap .indicator,
    #world .indicatorWrap .indicator,
    #progress .indicatorWrap .indicator {
        width: 20.2666666667px;
        height: 20.2666666667px;
        margin-top: 21.3333333333px;
        margin-bottom: 40.5333333333px;
        border: solid 2.1333333333px #f2f7fe;
    }
    #system .indicatorWrap .indicator:not(:last-of-type),
    #world .indicatorWrap .indicator:not(:last-of-type),
    #progress .indicatorWrap .indicator:not(:last-of-type) {
        margin-right: 21.8666666667px;
    }
    #system .indicatorWrap .indicator.on::before,
    #world .indicatorWrap .indicator.on::before,
    #progress .indicatorWrap .indicator.on::before {
        width: 11.7333333333px;
        height: 11.7333333333px;
        transform: translateX(-50%) translateY(-50%);
    }
    #progress .characterArea {
        margin-top: 36.2666666667px;
    }
    #progress .characterArea .magicList {
        width: 97.3rem;
        height: 9.9rem;
        top: 2.4rem;
        left: 50%;
        margin-left: -48.65rem;
    }
    #progress .characterArea .magicList .magicBtn {
        width: 19.3rem;
        height: 7.2rem;
    }
    #progress .characterArea .charaImgWrap {
        width: 1024px;
        height: 427.7333333333px;
        top: 62.9333333333px;
    }
    #progress .characterArea .charaImgWrap .imgList {
        width: 809.0666666667px;
        height: 427.7333333333px;
    }
    #progress .characterArea .charaImgWrap .arrowBtn {
        top: 163.2px;
    }
    #progress .indicatorWrap {
        width: 1024px;
        height: 98.1333333333px;
        margin-bottom: 2.1333333333px;
    }
    #story .bgImg {
        width: 853.3333333333px;
    }
    #world .worldImgWrap {
        width: 1024px;
        height: 385.0666666667px;
        margin-top: 29.3333333333px;
    }
    #system .systemImgWrap {
        width: 1024px;
        height: 525.8666666667px;
        margin-top: 35.2px;
    }
    #system .systemImgWrap .imgList {
        width: 792.5333333333px;
        height: 525.8666666667px;
    }
    #system .systemImgWrap .arrowBtn {
        top: 268.2666666667px;
    }
    #spec .info {
        width: 1024px;
        height: 215.4666666667px;
        margin-top: 41.6px;
        margin-bottom: 45.8666666667px;
        border-top: solid 1.0666666667px #f2f7fe;
        border-bottom: solid 1.0666666667px #f2f7fe;
    }
    #spec .info .titleLogo {
        width: 377.6px;
        height: 188.2666666667px;
    }
    #spec .info .textImg {
        width: 441.6px;
        height: 84.8px;
    }
    footer {
        width: 1024px;
        height: 154.6666666667px;
        padding-top: 69.3333333333px;
    }
}
@keyframes navi_animation {
    0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    10%,
    90% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 1;
    }
}
@keyframes navi_slidein_r {
    0% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes navi_slidein_l {
    0% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes navi_slideout_r {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
}
@keyframes navi_slideout_l {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}
@media screen and (max-width: 1024px) {
    html {
        font-size: 5.36px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1400px) {
    html {
        font-size: 0.52vw;
    }
    #container {
        background-size: 100% auto;
    }
}
@media screen and (min-width: 1400px) {
    html {
        font-size: 7.2916666667px;
    }
    #container {
        background-size: 1400px auto;
    }
} /*# sourceMappingURL=top.css.map */