/* 色 */
:root {
    --body-bgcolor: #ccc;
    --body-text: #333;
    --a: #140088;
    /* --mainbg: linear-gradient(rgba(15, 104, 19, 0.527), rgba(255, 102, 0, 0.5)),url(https://ocuid.witchserver.jp/img/illust/019.jpg); */
    /* メニュー色 */
    --menubg: #000;
    --menutext: #fff;
    --menuacplor: #fff;
    /* フッター */
    --footerbg: #000;
    --footercolor: #fff;
    --footeracolor: #fff;
    /* kinshi */
    --kinshibg: #888;
    /* 強調 */
    --strongbg: #888;
    --strongtext: #ccc;
    --strongacolor: #fff;
    --embgc: #fff;
    /* h */
    --h1color: #333;
    --h2text: #777;
    --h3text: #777;
    --h4text: #777;
    /* book */
    --hmbookbg: #fff;
    --shoplink: #999;
    --shoplinka: #fff;
    /* page */
    --pagebg: #333;
    --pagetext: #fff;
    --pagelink: #fff;
}



/* 基本 */
body {
    margin: 0;
    font-size: 0.8em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--body-bgcolor);
    color: var(--body-text);
    line-height: 1.5rem;
    font-family:'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}
a {color: var(--a);text-decoration: none;}
main {
    max-width: 800px;
    margin: 15px auto;
    background-image: var(--mainbg);
}
footer {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--footerbg);
    color: var(--footercolor);
}
footer a {color: var(--footeracolor);}
.copyright {font-size: 0.5em;}
.space {padding: 20px;}

/* メニュー */
header {
    bottom: 0;
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 9999;
}
.menu {
    max-width: 800px;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    background-color: var(--menubg);
    color: var(--menutext);
    font-weight: bold;
}
.menu li {
    height: 35px;
    line-height: calc(45px - 10px);
    flex: 1;
    margin: 0;
    padding: 10px;
}
.menu a {color: var(--menuacplor);}

section {margin: 0px 10px 25px 10px;}
.flex {display: flex;}
.space {padding: 20px;}
.box {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;}
.flex {display: flex;}
.mainmenu {padding: 0.5em;}
.banner {padding: 0.2em;}
strong {
    background-color: var(--strongbg);
    color: var(--strongtext);
    padding: 1px 5px 1px 5px;}
strong a {color: var(--strongacolor);}
small {padding-left: 1em;font-size: 0.6em;}
em {
    background-color: var(--embgc);
    font-size: 1.1em;
    font-weight: bold;
}

/* h */
h1 {
    font-size: 36px;
    position: relative;
    padding: 0.5em 1em;
    border: solid 2px var(--h1color);
    border-radius: 3px 0 3px 0;
}
h1:before, h1:after {
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px var(--h1color);
    border-radius: 50%;
}
h1:after {top:-12px;left:-12px;}
h1:before {bottom:-12px;right:-12px;}
h1 span {font-size: 0.4em;display: flex;padding: 0.8em 2em;}
h2 {
    font-size: 20px;
    color: var(--h2text);
    border-bottom: double var(--h2text);
    margin-bottom: 0.4em;
    padding-bottom: 0.2em;
}
h2 span {
    font-size: 15px;
    margin: 10px;
    padding-left: 1em;
}
h3 {color: var(--h3text);}
h4 {color: var(--h4text);}

/* 画像 */
.kinshi {background-color: var(--kinshibg);}
.worksimg {max-width: 100%;}
.gallery {display: flex;flex-wrap: wrap;justify-content: start;gap: 2%}
.gallery img {width: 80px;height: 80px;object-fit: cover;border-radius: 30%;}
.filter{filter: blur(1.5px);}
.worksimg {max-width: 100%;}

/* book comic */
.hmbox {display: flex;justify-content: space-between;}
.hmbookboxflex {display: flex;flex-wrap: wrap;}
.hmbook {background-color: var(--hmbookbg);width: 24%;margin: 10px;padding: 10px 20px;text-align: center;}
.hmbook p {text-align: left;padding: 0.2em;}
.hmbook p small {font-size: 11px;}
.hmbook a {display: block;padding: 0.2em;color: var(--shoplinka);}
.hmbookshop {background-color: var(--shoplink);margin: 0.2em 0;}
.bookimg {width: 100%;}

/* リスト */
li {list-style: none;padding-left: 10px 0 10px 0;}

/* sitemap */
.sitemap .sitemap_list {display: flex;justify-content: flex-start;}
.sitemap .sitemap_list dt {width: 80px;padding: 3px;text-align: left;font-weight: bold;}
.sitemap .sitemap_list dd {padding: 3px;text-align: left;}

/* rireki */
.rireki .rireki_list {display: flex;justify-content: flex-start;}
.rireki .rireki_list dt {width: 95px;padding: 3px;text-align: left;font-weight: bold;}
.rireki .rireki_list dd {padding: 3px;text-align: left;}

/* アコーディオンメニュー */
.summary {font-size: 16px;font-weight: bold;border-bottom: dashed;margin: 25px 0;}
.summary span {margin-left: 15px;font-size: 10px;}
.netabare {font-size: 12px;font-weight: bold;border-bottom: 1px dotted;margin: 10px 0;}
.summaryh3 {font-size: 13px;font-weight: bold;padding: 1em;}
.summaryh3 span {margin-left: 10px;font-size: 10px;}

/* ページ */
.novelpage {
    display:inline-block;
    margin: 1.5em 1.5em 1.5em 1.5em;
    background-color: var(--pagebg);
    color: var(--pagetext);
    display:inline-block;
    font-family: 'Avenir','Arial Black','Arial',sans-serif;
    font-weight:bold;
    font-size: 15px;
    left: 0;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
}
.novelpage a {color: var(--pagelink);}


/* スマホ */
@media screen and (max-width: 756px){
    .menu {font-size: 12px;}
    .hmbox {flex-direction: column;}

    /* 同人誌 */
    .hmbook {border: 1px dashed;width: 85%;margin: 20px;padding: 5px 5px;}
    .hmbookboxflex {display: grid;}
    .hmbookflex {display: flex;}
    .hmbook p {text-align: left;padding: 0.2em;}
    .hmbook a {display: block;padding: 0.5em;}
    .bookimg {width: 120px;padding: 5px 5px;}
}