@charset "Shift_JIS";
/* シルヴィーの精霊使い トップページ */
body { background-image: url("haikei.png"); background-repeat: repeat-x; background-position: bottom center; }
h1 { background-image: url("title.png"); padding-top: 21.4%; width: 55%; margin: 0px 0px 0px auto; }
.h1-border { position: relative; padding: 5px 20px 5px 0px; margin: 10px 10px 30px 10px; }
.h1-border:before , .h1-border:after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; border-image-slice: 1; }
.h1-border:before { border-top: 1px solid var(--color-SS);
    border-image-source: linear-gradient(to left, transparent 20%, var(--color-SS) 20%); }
.h1-border:after { border-bottom: 1px solid var(--color-SS-sub);
    border-image-source: linear-gradient(to left, var(--color-SS-sub) 60%, transparent 60%); }
h2 { color: var(--color-SS); font-family: var(--text-Serif); }
a { color: var(--color-SS); }
a:hover { color: var(--color-SS-sub); }

.main-box { background-color: rgba(255, 255, 255, 0.3); border: 1px solid var(--color-SS); }
.main-box2 { border: 1px solid var(--color-SS); margin: 3px; }

.novel-link { border: 1px solid var(--color-SS-sub); margin: 3px; }
.novel-top-line { border-top: 1px solid var(--color-SS); border-bottom: 1px solid var(--color-SS); }
.novel-top-line div { border-bottom: 1px solid var(--color-SS-sub); margin: 1px 0px; }
.CR { border-top: 1px solid var(--color-SS-sub); }

.novel-outline h2:first-letter { color: var(--color-SS-sub); font-size: 1.5rem; font-weight: bold; }
.update-title { color: var(--color-SS); border-top: 1px solid var(--color-SS-sub); border-bottom: 1px solid var(--color-SS-sub); }

.story-chapter { font-family: var(--text-Serif); border-bottom: 1px solid var(--color-SS); margin: 30px 1em 0px; }
.story-chapter:first-letter , .story-chapter a:first-letter { color: var(--color-SS-sub); font-size: 1.25rem; }
.story-paragraph { margin: 0px 1em; }


.novel-etc { border: 1px solid var(--color-SS-sub); }
.etc-support { border-color: var(--color-SS); }

.novel-etc .codoc-support { border-color: var(--color-SS); }
.novel-etc .codoc-support .codoc-btn { color: var(--color-SS) !important; border: 1px solid var(--color-SS); }
.novel-etc .codoc-support .codoc-btn:hover { color: var(--color-SS-sub) !important; background-color: #ffffff;
    border: 1px solid var(--color-SS-sub); }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    body { background-size: 70%; }
    h1 { padding-top: 33.5%; width: 90%; margin: 50px auto; }
    .h1-border { padding: 0px; margin: 0px; }
    .h1-border:before , .h1-border:after { border: 0px; }
    
    .update-title { border: 0px; }
    .update-title:first-letter { color: var(--color-SS-sub); }
    
    .story-chapter { margin: 30px 0px 0px; }
    .story-paragraph { margin: 0px; }
}
/* ---------------------------------------------------------------------------------------------------- */