@media screen and (min-width: 1024px) {
    body {
        width: 105.5rem;
        min-height: 100vh;
        margin: 0 auto;
        padding: 0 0 6.4rem;
        font-size: 1.6rem;
    }

    header, main, footer {
        width: 100%;
    }

    header {
        padding-top: calc(6.4rem + 2em);
        background-image: url(image/bg_body.svg);
        background-repeat: repeat-x;
        background-position: top center;
        background-size: auto 6.4rem;
    }

    main {
        margin-top: 1em;
        padding: 0 1.6rem;
    }

    footer {
        margin-top: 3em;
    }
}

@media screen and (max-width: 1023px) {
    html {
        font-size: calc(62.5% * 2); /* 20px */
    }

    body {
        padding: 1em;
        -webkit-text-size-adjust: 100%;
        font-size: calc(0.5 * 300% + 12 * (100vw - 600px) / 400);
        line-height: 1.6em;
    }

    header {
        margin-bottom: 1.5em;
        font-size: inherit;
        text-align: center;
        border-bottom: solid 2px #ffffff;
    }

    main {
        margin-bottom: 1em;
    }
}

p:not(footer p) {
    margin-bottom: 1em;
}

@media screen and (min-width: 1024px) {
    .name {
        margin-bottom: 1em;
        font-size: 3.2rem;
    }

    .category, .price, .client, .pay {
        margin-left: 1em;
        font-size: 2.4rem;
        font-weight: normal;
    }

    .perf {
        border-bottom: solid 1px #ffffff;
    }

    .resistance .perf {
        width: 6.4em;
    }

    .potion {
        padding-left: 4.8rem;
        background: url(image/icon_potion.svg) no-repeat left top/auto 90%;
    }

    .key {
        padding-left: 4.8rem;
        background: url(image/icon_key.svg) no-repeat left top/auto 90%;
    }

    .powder {
        padding-left: 4.8rem;
        background: url(image/icon_powder.svg) no-repeat left top/auto 90%;
    }

    .stone {
        padding-left: 4.8rem;
        background: url(image/icon_stone.svg) no-repeat left top/auto 90%;
    }

    .sword {
        padding-left: 4.8rem;
        background: url(image/icon_sword.svg) no-repeat left top/auto 90%;
    }

    .great-sword {
        padding-left: 4.8rem;
        background: url(image/icon_great-sword.svg) no-repeat left top/auto 90%;
    }

    .smart-sword {
        padding-left: 4.8rem;
        background: url(image/icon_smart-sword.svg) no-repeat left top/auto 90%;
    }

    .dagger {
        padding-left: 4.8rem;
        background: url(image/icon_dagger.svg) no-repeat left top/auto 90%;
    }

    .dart {
        padding-left: 4.8rem;
        background: url(image/icon_dart.svg) no-repeat left top/auto 90%;
    }

    .rod {
        padding-left: 4.8rem;
        background: url(image/icon_rod.svg) no-repeat left top/auto 90%;
    }

    .flail {
        padding-left: 4.8rem;
        background: url(image/icon_flail.svg) no-repeat left top/auto 90%;
    }

    .shield {
        padding-left: 4.8rem;
        background: url(image/icon_shield.svg) no-repeat left top/auto 90%;
    }

    .glove {
        padding-left: 4.8rem;
        background: url(image/icon_glove.svg) no-repeat left top/auto 90%;
    }

    .cloth {
        padding-left: 4.8rem;
        background: url(image/icon_cloth.svg) no-repeat left top/auto 90%;
    }

    .armor {
        padding-left: 4.8rem;
        background: url(image/icon_armor.svg) no-repeat left top/auto 90%;
    }

    .pendant {
        padding-left: 4.8rem;
        background: url(image/icon_pendant.svg) no-repeat left top/auto 90%;
    }

    .helm {
        padding-left: 4.8rem;
        background: url(image/icon_helm.svg) no-repeat left top/auto 90%;
    }

    .ring {
        padding-left: 4.8rem;
        background: url(image/icon_ring.svg) no-repeat left top/auto 90%;
    }

    .other {
        padding-left: 4.8rem;
        background: url(image/icon_other.svg) no-repeat left top/auto 90%;
    }
}

@media screen and (max-width: 1023px) {
    .name {
        margin-bottom: 1em;
        font-size: 1.5em;
    }

    .category, .price, .client, .pay {
        display: block;
        margin-top: 1em;
        font-size: 0.67em;
        font-weight: normal;
    }

    .category {
        margin-top: 1em;
    }

    .perf {
        border-bottom: solid 2px #ffffff;
    }
}

.category::before {
    content: "分類：";
}

.price::before {
    content: "価格：";
}

.client::before {
    content: "依頼者：";
}

.pay::before {
    content: "報酬：";
}

.perf {
    margin-bottom: 0.3em;
    font-size: inherit;
    font-weight: bold;
    font-style: italic;
}

.perf .legend {
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-width: 1024px) {
    .data {
        display: flex;
        align-items: flex-start;
        column-gap: 2.4rem;
        margin: 0 0 1em 0;
    }

    .parameters {
        flex: 0 0 8.2em;
        margin-right: 2.3rem;
        padding: 2rem 3rem;
        font-size: 2rem;
        background-image: url(image/bg_parameters.svg);
        background-size: 100%, 100%;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 1023px) {
    .parameters {
        width: 7.5em;
        margin-bottom: calc(1em + 5px);
        padding: 0.5em 1em;
        border: double 5px #eeeeee;
    }
}

.parameters > li {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.parameters > li > span {
    text-align: right;
}

.plus {
    color: #00fa9a;
}

.minus {
    color: #dc143c;
}

@media screen and (min-width: 1024px) {
    .enchant {
        width: 6em;
    }
}

.enchant {
    margin-left: 1em;
}

@media screen and (min-width: 1024px) {
    .resistance {
        flex: 0 0 calc(2em + 1rem + 12rem + 0.9rem + 2em);
        background-image: url(image/bg_resistance.svg);
        background-size: 5em auto;
        background-position: right top;
        background-repeat: no-repeat;
    }

    .resistance li {
        display: flex;
        column-gap: 1rem;
        width: auto;
    }

    .resistance li > .element {
        flex: 0 0 2em;
        text-align: right;
    }

    .resistance li > .bar {
        width: 6rem;
        margin: 0.5rem 0;
        background: #ffffff;
    }
}

@media screen and (max-width: 1023px) {
    .resistance {
        margin-bottom: 1em;
    }

    .resistance ul {
        margin-left: 1em;
    }

    .resistance li {
        display: flex;
        column-gap: 0.5em;
        align-items: center;
        width: auto;
    }

    .resistance li > .element {
        flex: 0 0 2em;
        text-align: right;
    }

    .resistance li > .bar {
        width: 6rem;
        height: 0.9em;
        margin: 0.3em 0;
        background: #ffffff;
    }
}

.flame {
    color: #dc143c;
}

.flame > span.bar {
    background: #dc143c;
}

.snow {
    color: #00bfff;
}

.snow > span.bar {
    background: #00bfff;
}

.thunder {
    color: #ffd700;
}

.thunder > span.bar {
    background: #ffd700;
}

.wind {
    color: #00fa9a;
}

.wind > span.bar {
    background: #00fa9a;
}

.physical {
    color: #a0522d;
}

.physical > span.bar {
    background: #a0522d;
}

.psychic {
    color: #ba55d3;
}

.psychic > span.bar {
    background: #ba55d3;
}

.holy {
    color: #ffffff;
}

.holy > span.bar {
    background: #ffffff;
}

.dark {
    color: #6a5acd;
}

.dark > span.bar {
    background: #6a5acd;
}

@media screen and (min-width: 1024px) {
    .abilities {
        flex: 0 0 57rem;
        line-height: 1.5em;
    }

    .equip {
        table-layout: fixed;
        width: 36em;
        margin-top: 0.6em;
        border-collapse: collapse;
    }

    .equip td {
        padding: 0.3rem;
    }
}

@media screen and (max-width: 1023px) {
    .equip {
        width: 100%;
    }

    .equip td {
        padding: 0.5em 0.3em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0.5em;
    }
}

.equip {
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 0.6em;
}

.equip td {
    text-align: center;
    color: #666666;
    letter-spacing: -0.1em;
    border: solid 1px #ffffff;
}

.abilities > p {
    margin-left: 1em;
}

.equip .allow {
    color: #ffffff;
}

@media screen and (min-width: 1024px) {
    .flavor {
        margin-top: 2.5em;
    }
}

@media screen and (max-width: 1023px) {
    .flavor {
        margin-top: 1.5em;
    }
}

@media screen and (min-width: 1024px) {
    .difficulty > li {
        display: grid;
        grid-template-columns: 4em 1fr;
        column-gap: 1em;
    }

    .request {
        padding-top: calc(6rem + 2em);
        background-image: url(image/hr_mission.svg);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto 6rem;
    }
}

.trigger::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\21  ";
}

.difficulty {
    font-weight: bold;
}

.difficulty span {
    font-weight: normal;
}

.danger {
    color: #dc143c;
}

.warning {
    color: #ffd700;
}

.request {
    margin-top: 2em;
}

.marhalt::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f4ad  ";
}

.marhalt {
    margin: 0;
}

.marhalt_quote {
    display: grid;
    grid-template-columns: 4.5em auto;
    column-gap: 0.5em;
    margin: 0 auto 3em;
}

.tactics {
    margin: 1.6em 1em;
}

.boss::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f714  ";
}

.treasure::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f3a5  ";
}

@media screen and (min-width: 1024px) {
    footer > nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    footer > nav p.next {
        text-align: right;
    }
}

footer > nav p.prev::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f100  ";
}

footer > nav p.next::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: " \f101";
}