/* 色 */
:root {
    --body-bgcolor: #3e1900;
    --body-text: #e6dcb6;
    --a: #afab93;
    /* --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: #e6dcb6;
    --menutext: #fff;
    --menuacplor: #fff;
    /* フッター */
    --footerbg: #2a5249;
    --footercolor: #e6dcb6;
    --footeracolor: #e6dcb6;
    /* 強調 */
    --strongbg: #2a5249;
    --strongtext: #e6dcb6;
    --strongacolor: #fff;
    /* h */
    --h1color: #e6dcb6;
    --h2text: #e6dcb6;
    --h3text: #e6dcb6;
    --h4text: #e6dcb6;
    /* 引用 */
    --qtext: #fff;
    --qbg:#2a5249;
    /* page */
    --pagebg: #2a5249;
    --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: 1000px;
    margin: 15px auto;
    background-image: var(--mainbg);
}
footer {
    max-width: 1000px;
    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: 1000px;
    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: 30px;
    line-height: calc(30px - 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;}

/* 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);}

q {
    position: relative;
    padding: 8px 15px;
    margin: 2.5em;
    box-sizing: border-box;
    font-style: italic;
    color: var(--qtext);
    background: var(--qbg);
    font-weight: bold;
}

q:before{
    display: inline-block;
    position: absolute;
    top: -35px;
    left: 0px;
    content: "“";
    font-family: sans-serif;
    color: var(--qbg);
    font-size: 35px;
    line-height: 1;
    font-weight: 900;
}

q p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

q cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* 画像 */
.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%;}

/* リスト */
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;}

/* カラム */
section {margin: 0px 10px 25px 10px;}
.mainflex {display: flex;}
.colom1 {max-width: 100%;}
.colom1,.colom2,.colom_enter {
    margin: 10px;
    padding: 20px;
    /* background-color: var(--colombg); */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}
.colom1,.colom2 {box-shadow: 0 0 10px -3px var(--colomshadow);}
.colom_enter {box-shadow: 0 0 10px -3px var(--colom_entershadow);}


/* ページ */
.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){
    .hmbox {flex-direction: column;}

    /* カラム */
    .mainflex {display: block;}
    .colom1,.colom2,.colom_enter {width: 80%;}
    .margin-bottom{margin-bottom: 25px;}
}