/* 恥ずかしいから見ないでネ */

*{margin:0;padding:0;}
@font-face{
    /*
    やさしさゴシック (YasashisaGothic)
    Download: http://www.fontna.com/blog/379/
    License: SIL Open Font License, IPAフォントライセンス v1.0
    Note: この派生フォントをIPAフォントに戻す場合、「https://moji.or.jp/ipafont/ipa00303/」より「ipag00303.zip」をダウンロード・システムにインストールし、ブラウザ上で優先フォントをIPAゴシックに変更してください。
    */
    font-family:YasaC;
    font-style:normal;
    src:url(fonts/yasac.woff2) format("woff2"),
        url(fonts/yasac.woff) format("woff")
}
body{
    font-family: YasaC;
    background-color: bisque;
    color: #444;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
hr{
    width: 85%;
    border:0;
    border-top: dashed 3px #777;
    margin:15px auto;
}
hr:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 501;
    content:"\f0c4";
    position: absolute;
    margin-top: -10px;
    margin-left: -1em;
    color: #777;
}
h1{
    background-color: cornsilk;
}
h2{
    background-color:sandybrown;
}
h3{
    background-color:darksalmon;
}
h1,h2,h3{
    border-radius: 10px;
    padding:0.5em 1em;
}
h1,h2,h3,p{
    margin:0.5em 0.5em;
    text-align: center;
}
h1,h2,h3,p,li{
    transform: rotate(0.03deg);
}
ul{
    padding:0 2em;
}

#back{
    margin:0.5em;
    padding: 0.5em 1em;
    background-color: lightblue;
    border-radius: 15px;
}
#modal{
    background-color:rgba(0,0,0,0.7);
    position: fixed;
    top:-7%;
    left:-7%;
    right:-7%;
    bottom:-7%;
    display:none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}
#modalInsideWrap{
    background-color:white;
    margin:10%;
    padding:3vh;
    border-radius: 10px;
    position: relative;
    cursor:default;
    text-align: center;
    min-width: 0;
    min-height: 0;
}
#modalInside{
    width:100%;
    height:100%; /* 可変 */
}
#modalClose{
    position: absolute;
    font-size:34px;
    width:30px;
    height:30px;
    border-radius:17px;
    background-color: #444;
    color:white;
    top:-0.5em;
    right:-0.5em;
    cursor: pointer;
}
#modalClose i{
    vertical-align: top;
    margin-top:-2px;
    margin-left:-2px;
}

.gallery{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.subtitle{
    padding:15px;
    display:inline-block;
    border:2px #444;
    border-style: solid;
    border-radius:10px;
    margin:1em;
    background-color:white;
    cursor:pointer;
}
.charImg{
    max-width:300px;
    height:auto;
    border-radius:10px;
}