body, html, p, div {margin:0; padding:0}
body {font-family:'游明朝', 'Yu Mincho', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pr6N', 'ヒラギノ角ゴ Pr6N', 'Hiragino Kaku Gothic Pr6N', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ StdN', 'Hiragino Kaku Gothic StdN', 'メイリオ', 'Meiryo', sans-serif}
#ifu {position:absolute; background-color: #00000050; width: 100%; display: flex; justify-content: space-between;}
#ifu button {border:0; width:24px; height:24px; /*z-index:3*/}
#bmenu {background: transparent;}
#bclose {background: url('../img/close24.svg');}
.iclose {background: url('../img/close24i.svg'); margin-top:0.5em; margin-bottom:2em; border:0; width:24px; height:24px;}

#left {cursor:url('../img/arrow-left.svg'), w-resize}
#right {cursor:url('../img/arrow-right.svg'), w-resize}
#text {writing-mode:vertical-rl;z-index: 2;}
#text .holizontal {writing-mode: horizontal-tb}
.vw {display:flex; justify-content:right; height:100%; width:100%; overflow:hidden}
.h {display: none}
.inv {filter: grayscale(100%);opacity: 0.3}

.page {height: 100%;}
.page > p > span {display:block; height:100%}
bdi.yoco {text-combine-upright:all; display: inline-block; line-height: 1em; text-indent: 0;}

.vw .L {text-align:justify; text-align-last:justify}
.vw .E {text-align:start}

.em-sesame {
  -webkit-text-emphasis-style: filled sesame;
  -epub-text-emphasis-style:   filled sesame;
  text-emphasis-style:         filled sesame;
  font-weight: normal;
  font-style:normal;
}

.i0 {text-indent:0}
.i1 {text-indent:0.5em}
.i2 {text-indent:1em}
.i3 {text-indent:1.5em}
.i4 {text-indent:2em}
.i5 {text-indent:2.5em}
.i6 {text-indent:3em}
.i7 {text-indent:3.5em}
.i8 {text-indent:4em}
.i9 {text-indent:4.5em}

#vw2 {flex-direction: row; justify-content: flex-start; }
div.cheer {display: flex; flex-direction: column; justify-content: space-around;}
.cheer > img {display:block; max-width: 320px; width:calc(35% - 8px); cursor:pointer; margin:2em 0;}
.nmenu {font-size: 20pt; display: flex; flex-direction: column; justify-content: space-around; width:288px; margin: 0 auto;}
.nmenu div {margin: 1em; height:30vh}
.nmenu button {color:#000; font-size: 20pt; background-color: #dde; padding:0.5em; height: 30vh; margin:0; border: 0; text-align: left; }
.nmenu button:hover {background-color: #ddf}

#vw3,
#vw4 {position:absolute; border:1px solid #666; height:calc(100vh - 2em); width:calc(100vw - 2em); right:0; top:0; border: 0; background-color: #fafafa; padding:1em; flex-direction: column;}

#vw3 button {display: block;}
#implList { background-color: #fff; width:calc(100% - 4em); overflow-x: scroll;}
#implList div {display: flex; font-size: 80%;}
#implList li {margin:1em; border-right:1px solid #bbb; padding:0.5em; list-style-type: none;}
#implList li > p { white-space: pre-line;}
#implList button {display: none;}
.hd {display: flex; align-items: center;}
#ipost { border:0; font-size:12pt; padding:1em 4px; margin-top:2em;}

div.p {justify-content: space-between; align-items: center;}
div.c {width:20px}
div.p img{width:20px}
div.c img{width:20px}
button.impl-g, button.impl-b {font-size:18px; height:6em; margin-bottom:2em; display: inline-block;}

#vw4 > div {height:100%; display: flex; align-items: flex-start;}
#implText {width:100%; height:50%;}
/* PC */
@media screen and (min-width:421px) {
    body {font-size:20px; height:100vh}
    #body > aside {background-color:#e0e0e8; height:100vh; width:calc(20% - 71.2px); min-width: 0px}
    rt {font-size:11.67px}
    #tch {height:100vh}
    #body {display:flex}
    #text {min-width:356px; max-width:1280px; width:calc(60% + 142.4px); height:calc(100% - 64px); padding:32px}
    .page > p > span {width:40px; line-height:40px}
    .s0 {margin-top:0; margin-right:0em}
    .s1 {margin-top:0; margin-right:40px}
    .s2 {margin-top:0; margin-right:80px}
    .s3 {margin-top:0; margin-right:120px}
    .s4 {margin-top:0; margin-right:160px}
    .s5 {margin-top:0; margin-right:200px}
    .s6 {margin-top:0; margin-right:240px}
    .s7 {margin-top:0; margin-right:280px}
    .s8 {margin-top:0; margin-right:320px}
    #implForm {width:calc(100% - 2em);}
    div.hd {margin:0 0 0 1em; width:3em;}
    div.hd h3{margin:0; padding:0;}
    div.it {width:calc(100% - 160px);}
    #implText {width:calc(100% - 6px); height:50vh}
    #implSend {width:4em; margin:1em 0; display: flex; align-items: center;}
}

/* すまほ */
@media screen and (max-width:420px) {
    body {font-size:16px}
    #tch {height:calc(100vh - 80px)}
    #body > aside {display:none}
    #text {
        padding:32px 32px 24px 32px; 
        width:calc(100vw - 64px); 
        height:calc(100vh - 144px); 
        background-color:white; 
    }
    .page > p > span {width:32px; line-height:32px}
    .s0 {margin-top:0; margin-right:0em}
    .s1 {margin-top:0; margin-right:32px}
    .s2 {margin-top:0; margin-right:64px}
    .s3 {margin-top:0; margin-right:96px}
    .s4 {margin-top:0; margin-right:128px}
    .s5 {margin-top:0; margin-right:160px}
    .s6 {margin-top:0; margin-right:192px}
    .s7 {margin-top:0; margin-right:224px}
    .s8 {margin-top:0; margin-right:256px}
    #implForm {width:calc(100% - 2em);}
    div.hd {margin:0 0 0 1em; width:3em;}
    div.hd h3{margin:0; padding:0;}
    div.it {width:calc(100% - 64px);}
    #implText {width:calc(100% - 6px); height:50vh}
    #implSend {width:4em; margin:1em 0; display: flex; align-items: center;}
}