@charset "UTF-8";

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    color: #000;            /* 基本の文字色 */
    background-color: #ccc; /* 基本の背景色（左右の余白領域の色） */
}

.view-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 5px 0;
    background-color: #f8f8f8;      /* コンテンツ配置領域の背景色 */
    border-left: solid 1px #888;    /* 左側余白領域との境界線 */
    border-right: solid 1px #888;   /* 右側余白領域との境界線 */
}

.pages {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 10px;
}
.pages.tateyomi {
    line-height: 0;
}

h1, h2, h3 {
    margin: 20px;
}

.pages > div:not([data-ptimg]) {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.pages > div:not([data-ptimg])::after {
    content: '';
    display: block;
    padding-bottom: 141.421%; /* 高さを幅の√2倍に */
}