body {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 100;
    font-style: normal;
}

main {
    width: 90vw;
}
h2,h1 {
    font-size: 1.1em;
}
.w_80 {
    width: 80vw;
    margin: 0 auto;
}

span {
    font-weight: 400;
}

p {
    line-height: 2em;
}

.dialogue_head {
    width: 20%;
}

h1 {
    margin-top: 0;
}

.PC {
    display: none;
}

.pageNation {
    text-align: center;
    width: 70%;
    margin-bottom: 5vh;
}

.pageNation p {
    margin: 0;
}

.pageNum {
    background: #000;
    color: #fff;
    letter-spacing: 0.5em;
}

.pageNext, .pagePrev {
    font-weight: 400;
}

.pageTitle {
    font-size: 10pt;
}
h2 span {
    font-size: 10pt;
}
@media only screen and (min-width: 1200px) {
    .w_80 {
        width: 100%;
    }
    h2 {
        font-size: 40pt;
    }
    
    h1 {
        padding-left: 2em;
    }
    .dialogue_flex {
        display: flex;
        display: flex;
        justify-content:space-around;
        flex-wrap: wrap;
        align-items: center;
    }

    .dialogue_contents {
        width: 40%;
    }

    .conte01 {
        order: 1;
    }
    .conte02 {
        order: 2;
    }
    .conte03 {
        order: 4;
    }
    .conte04 {
        order: 3;
    }
    .SP {
        display: none;
    }
    .PC {
        display: flex;
        align-items: flex-start;
    }

    .line {
        width: 30%;
        border-bottom: 1px solid #000;
        height: 2px;
        margin: 0 auto;
        padding-top: 5vh;
        margin-bottom: 5vh;
    }
    .pageNation {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pageNum {
        width: 15%;
        order: 2;
        align-self: center;
    }
    .nextBlock, .prevBlock {
        width: 40%;
    }
    .nextBlock {
        text-align: left;
        padding-left: 10px;
        order: 3;
    }

    .prevBlock {
        text-align: right;
        padding-right: 10px;
        order: 1;
    }

    .dialogue_head {
        width: 10%;
    }
}