/* ==============================
    Language
============================== */
header ul.language li.lang-jp img {
    width: 100%;
}
header ul.language li.lang-en img {
    width: 79%;
}
header ul.language li.lang-zh-tw img {
    width: 84.3%;
}
header ul.language li.lang-zh-cn img {
    width: 82.3%;
}
header ul.language li.lang-ko img {
    width: 79.4%;
}
@media print, screen and (max-width: 768px) {
    header ul.language li.lang-jp img {
        width: 17.1vw;
    }
    header ul.language li.lang-en img {
        width: 13.6vw;
    }
    header ul.language li.lang-zh-tw img {
        width: 11.1vw;
    }
    header ul.language li.lang-zh-cn img {
        width: 10.9vw;
    }
    header ul.language li.lang-ko img {
        width: 13.5vw;
    }

}

/* ==============================
    FV
============================== */
#fv h2 {
    width: 82.7%;
    max-width: 1059px;
}
#fv .date img {
    width: 88.5%;
    max-width: 1133px;
}
@media print, screen and (max-width: 768px) {
    #fv h2 {
        width: 79.8vw;
    }
    #fv .date img {
        width: 87.8vw;
    }
}

/* ==============================
  Navigation
============================== */
nav ul li,
nav ul li:nth-of-type(4),
nav ul li:nth-of-type(8) {
    width: 23.6%;
    max-width: 213px;
}

nav ul li:first-of-type,
nav ul li:nth-of-type(6) {
    width: 25.8%;
    max-width: 233px;
}

nav ul li:nth-of-type(5),
nav ul li:last-of-type {
    width: 21.4%;
    max-width: 193px;
}

/* ==============================
  About the Anime
============================== */
#introduction h3 img {
    width: 61.7%;
}
@media print, screen and (max-width: 768px) {
    #introduction h3 img {
        width: 60.4vw;
    }
}

/* ==============================
  Event Information
============================== */
#event_info h3 img {
    width: 66.1%;
}

#event_info .kickoff-event h4 {
    width: 28.2%;
}

#event_info dl dt {
    width: 127px;
}
#event_info dl dd {
    width: calc(100% - 147px);
}

#event_info .kickoff-event-content {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
#event_info .border-text {
    width: 100%;
}


#event_info .youtube-live h4 {
    width: 44.1%;
}
#event_info .youtube-live p .date {
    display: inline-block;
    text-align: left;
}
#event_info .youtube-live ul.attention {
    width: 41em;
}


#event_info .greeting-event h4 {
    width: 86%;
}

#event_info .greeting-event dl {
    width: 100%;
}

@media print, screen and (max-width: 768px) {
    #event_info h3 img {
        width: 64.7vw;
    }

    #event_info .kickoff-event h4 {
        width: 36.8vw;
    }

    #event_info dl dt {
        width: 17.4vw;
    }
    #event_info dl dd {
        width: calc(100% - 20.8vw);
    }

    #event_info .border-text {
        text-align: center;
    }


    #event_info .youtube-live h4 {
        width: 44.1%;
    }
    #event_info .youtube-live p {
        width: 80vw;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }
    #event_info .youtube-live p .date {
        display: inline-block;
        text-align: left;
    }
    #event_info .youtube-live ul.attention {
        width: 80vw;
    }


    #event_info .greeting-event h4 {
        width: 79.5vw;
    }
}


/* ==============================
  Mission Briefing
============================== */
#how_to_play h3 img {
    width: 60%;
}
#how_to_play h4 {
    width: 92.8%;
}

#how_to_play .how_to_play-box h5 img {
    width:25.3%;
}
#how_to_play .how_to_play-box h5 + p {
    letter-spacing: -0.05em;
}


/* How to Play */
#how_to_play .how_to_play-box li {
    width: 28.6%;
}

#how_to_play li .how_to_play-img,
#how_to_play li:nth-of-type(1) .how_to_play-img {
    width: 62.4%;
}

#how_to_play li .how_to_play-text picture,
#how_to_play li:nth-of-type(1) .how_to_play-text picture {
    width: 17.5%;
    margin-right: 4.1%;
}
#how_to_play li .how_to_play-text p,
#how_to_play li:nth-of-type(1) .how_to_play-text p {
    width: calc(100% - 17.5% - 4.1%);
}

#how_to_play .web_app p {
    text-align: left;
}

#how_to_play .point_get-box h5 img {
    width: 40.2%;
}
@media print, screen and (max-width: 768px) {
    #how_to_play h3 img {
        width: 58.3vw;
    }
    #how_to_play h4 {
        width: 65.1vw;
    }

    #how_to_play .how_to_play-box h5 img {
        width:33vw;
    }
    #how_to_play .how_to_play-box h5 + p {
        letter-spacing: 0;
    }


    /* How to Play */
    #how_to_play .how_to_play-box li {
        position: relative;
        width: 100%;
    }

    #how_to_play li .how_to_play-img,
    #how_to_play li:nth-of-type(1) .how_to_play-img {
        width: 27.3vw;
    }

    #how_to_play li .how_to_play-text {
        position: unset;
    }

    #how_to_play li .how_to_play-text picture,
    #how_to_play li:nth-of-type(1) .how_to_play-text picture {
        width: 13vw;
        margin-right:3.7vw;
    }
    #how_to_play li .how_to_play-text p,
    #how_to_play li:nth-of-type(1) .how_to_play-text p {
        width: calc(100% - 13vw - 3.7vw);
    }

    #how_to_play li .how_to_play-text::after {
        bottom: -15.6vw;
    }

    #how_to_play .web_app p {
        text-align: left;
    }

    #how_to_play .web_app {
        width: 100%;
    }

    #how_to_play .web_app p {
        width: 17em;
    }


    #how_to_play .point_get-box h5 img {
        width: 52.4vw;
    }

    #how_to_play .point_get-box li .point_get-text {
        align-items: flex-start;
    }

    #how_to_play .point_get-box li ul.attention {
        width: 74.2vw;
    }
}

/* ==============================
  List of Assignment Locations
============================== */
#spot h3 img {
    width: 96.4%;
}

#spot .spot-box .spot-text {
    font-size: min(3rem, 2.34vw);
    line-height: 1.16;
}
@media print, screen and (max-width: 768px) {
    #spot h3 img {
        width: 67.3vw;
    }

    #spot .spot-box .spot-text {
        font-size: 3.9vw;
    }

}

/* ==============================
  The Demon of the First Quarter Moon, Approaching
============================== */
#sunset .section .inner h3 {
    margin-bottom: 5%;
}
#sunset h3 img {
    width: 99.4%;
}

#sunset dl {
    width: 100%;
    max-width: 1000px;
}
#sunset dl dt {
    width: 215px;
}
#sunset dl dd {
    width: calc(100% - 233px);
}

#sunset .spot-box {
    width: 90.2%;
}
#sunset .spot-box h5 {
    width: 90.9%;
}
#sunset .spot-box h5 img {
    width: 28.2%;
}
#sunset .spot-box .spot-list-wrapper {
    width: 90.9%;
}
#sunset .spot-box .spot-list-wrapper ul:first-of-type {
    flex: 30.3%;
}
#sunset .spot-box .spot-list-wrapper ul:last-of-type {
    flex: 54.2%;
}
#sunset .spot-box p.attention {
    width: 90%;
    margin: 0 auto;
}
@media print, screen and (max-width: 768px) {
    #sunset .section .inner h3 {
        margin-bottom: 6.5vw;
    }
    #sunset h3 img {
        width: 86.5vw;
    }

    #sunset dl {
        width: 87.2vw;
    }
    #sunset dl dt {
        width: 27.9vw;
    }
    #sunset dl dd {
        width: calc(100% - 28.9vw);
    }

    #sunset .spot-box h5 {
        width: 73.9vw;
    }
    #sunset .spot-box h5 img {
        width: 33.8vw;
    }
    #sunset .spot-box .spot-list-wrapper {
        width: 73.9vw;
    }
    #sunset .spot-box .spot-list-wrapper ul:first-of-type {
        flex: 100%;
    }
    #sunset .spot-box .spot-list-wrapper ul:last-of-type {
        flex: 100%;
    }
    #sunset .spot-box p.attention {
        width: 73.6vw;
    }
}

/* ==============================
  Mission Rewards
============================== */
#goods h3 img {
    width: 61.5%;
}
#goods h4 {
    width: 76.7%;
}
#goods h4 + p {
    letter-spacing: -0.05em;
}

#goods .goods-box .goods-rank img {
    width: 87%;
}
#goods .goods-box:nth-of-type(2) .goods-rank img {
    width: 90%;
}
#goods .goods-box:nth-of-type(3) .goods-rank img {
    width: 92.7%;
}

#goods .goods-box .points-text {
    width: 43.3%;
}
#goods .goods-box:nth-of-type(2) .points-text,
#goods .goods-box:nth-of-type(3) .points-text {
    width: 36.9%;
}

#goods .pick-up_location-wrapper h5 img {
    width: 53.9%;
    max-width: 539px;
}
#goods .pick-up_location-box {
    margin-left: 0;
}

#goods .pick-up_location dl {
    font-size: min(2rem, 1.56vw);
}
#goods .pick-up_location dt:nth-of-type(1) {
    letter-spacing: 13px;
}
#goods .pick-up_location dt:nth-of-type(2) {
    letter-spacing: -1px;
}
#goods .pick-up_location dt:nth-of-type(3) {
    letter-spacing: 2px;
}
#goods .pick-up_location dt:nth-of-type(4) {
    letter-spacing: 4px;
}

#goods ul.attention {
    padding-left: 0;
}
@media print, screen and (max-width: 768px) {
    #goods h3 img {
        width: 60.1vw;
    }
    #goods h4 {
        width: 55.3vw;
    }
    #goods h4 + p {
        letter-spacing: 0;
    }

    #goods .goods-box .goods-rank img {
        width: 51.4vw;
    }
    #goods .goods-box:nth-of-type(2) .goods-rank img {
        width: 58.9vw;
    }
    #goods .goods-box:nth-of-type(3) .goods-rank img {
        width: 54.6vw;
    }

    #goods .goods-box .points-text {
        width: 25.7vw;
    }
    #goods .goods-box:nth-of-type(2) .points-text,
    #goods .goods-box:nth-of-type(3) .points-text {
        width: 22.1vw;
    }

    #goods .pick-up_location-wrapper h5 img {
        width: 70.3vw;
    }

    #goods .pick-up_location dl {
        font-size: 2.6vw;
    }
    #goods .pick-up_location dt:nth-of-type(1) {
        letter-spacing: 0.6em;
    }
    #goods .pick-up_location dt:nth-of-type(2) {
        letter-spacing: -0.1em;
    }
    #goods .pick-up_location dt:nth-of-type(3) {
        letter-spacing: 0.05em;
    }
    #goods .pick-up_location dt:nth-of-type(4) {
        letter-spacing: 0.15em;
    }
}

/* ==============================
  Terms of Use
============================== */
#guidelines h3 img {
    width: 48.7%;
}

#guidelines .appli-attention-wrapper h5 img {
    width: 77.7%;
}
@media print, screen and (max-width: 768px) {
    #guidelines h3 img {
        width: 47.6vw;
    }

    #guidelines .appli-attention-wrapper h5 img {
        width: 55.2vw;
    }
}

/* ==============================
  Inquiries
============================== */
#contact_us h3 img {
    width: 31.4%;
}
@media print, screen and (max-width: 768px) {
    #contact_us h3 img {
        width: 30.7vw;
    }
}

/* ==============================
  Footer
============================== */
@media print, screen and (max-width: 768px) {
    footer .inner {
        width: 90vw;
    }
    footer p {
        width: 100%;
    }
    footer p span {
        margin-right: 0;
    }
}