html { background: #eee }
body {
    font-size: 1.2em;
    font-family: "ヒラギノ明朝 Pro W3", "細明朝体", "ＭＳ Ｐ明朝", serif;
}
article, footer {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    width: 80%;
}
article {
    margin-top: 2.5em;
    padding: 2.0em;
    background: #fff;
}
footer {
    text-align: center;
    color: #666;
    font-size: .8em;
}
h1 {
    font-size: 1.2em;
    display: inline;
    font-weight: normal;
    border-bottom: 1px solid #000;
}
@media only screen
    and (max-device-width:320px)
    and (orientation:portrait){
    body {
        font-size: 1.0em;
    }
    article, footer {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    article {
        padding: .5em;
    }
}

html { background: #eee }
body {
    font-size: 1.2em;
    font-family: apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;;
}
article, footer {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    width: 80%;
}
article {
    margin-top: 2.5em;
    padding: 2.0em;
    background: #fff;
}
footer {
    text-align: center;
    color: #666;
    font-size: .8em;
}
h1 {
    font-size: 1.2em;
    display: inline;
    font-weight: normal;
    border-bottom: 1px solid #000;
}
@media only screen
    and (max-device-width:320px)
    and (orientation:portrait){
    body {
        font-size: 1.0em;
    }
    article, footer {
        width: auto;
        min-width: 0;
        max-width: none;
    }
    article {
        padding: .5em;
    }
}

Update font-family to use apple-system
Update font-family to use apple-system
