@charset "Shift_JIS";
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

/* 水下の華 トップページ */
body { background-image: url("haikei.png"); background-repeat: no-repeat; background-position: top right; }
h1 { background-image: url("title.png"); padding-top: 33.1%; width: 60%; margin: 0px auto; }
h2 { color: var(--color-SH); }
a { color: #000000; border-bottom: 1px dashed #000000; }
a:hover { border-bottom: 1px solid var(--color-SH); }

.main-box { background-color: rgba(255, 255, 255, 0.75); border: 1px solid #000000; }

.novel-top-line { border-top: 1px solid #000000; }
.CR { border-top: 1px solid #000000; }

.update-title { color: var(--color-SH); font-family: var(--text-Serif); font-weight: bold; }

.story-curtain { font-size: 1.5rem; border-bottom: 2px solid #000000; padding-left: 0.5em; margin: 50px 0px 0px; }
.story-curtain:first-letter { color: var(--color-SH); font-size: 2rem; }
.story-chapter { font-size: 1.25rem; border-bottom: 1px solid #000000; padding-left: 0.5em; margin: 30px 1em 0px; }
.story-paragraph { margin: 5px 0px 0px 2em; }


.novel-etc { border: 1px dashed #000000; }
.etc-support { border-color: #000000; }

.novel-etc .codoc-support { border-color: #000000; }
.novel-etc .codoc-support .codoc-btn { border: 1px dashed #000000; }
.novel-etc .codoc-support .codoc-btn:hover { color: var(--color-SH) !important; border: 1px solid var(--color-SH); }


/* ---------------------------------------------------------------------------------------------------- */
/* 独自 */
.novel-top-SH-link { font-size: 0.75rem; text-align: right; margin: 20px 30px 0px; }

/* 旧話 */
body.old h1 { background-image: none; color: var(--color-SH); font-family: "麗流隷書" , "Klee One", var(--text-Serif);
    font-size: 2rem; text-align: center; height: auto; margin: 50px auto; }
body.old h3 { font-family: var(--text-SanSerif); font-size: 1.25rem; border-bottom: 1px solid #000000; padding: 0px 0px 1px 0.5em; }
body.old .novel-box { font-family: var(--text-SanSerif); margin: 50px 30px;}
.halfway { margin-top: 100px; }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    body { background-size: 90%; }
    h1 { padding-top: 55.1%; width: 100%; }
    
    .story-chapter { margin: 30px 5px 0px; }
    .story-paragraph { margin: 5px 5px 0px; }
    
    body.old .novel-box { margin: 50px 10px;}
}
/* ---------------------------------------------------------------------------------------------------- */