@charset "Shift_JIS";
/* 誓約の姫 */
body { color: var(--color-gmSnH-tx); font-family: var(--text-Serif); background-color: var(--color-gmSnH-pale); }
a { color: var(--color-gmSnH); padding: 3px; }
a:hover { color: #ffffff; background-color: var(--color-gmSnH); border-radius: 10px; }
h1 { /*background-image: url("ST_title.gif"); background-position: center; padding-top: 44.4%; margin: 0px auto;*/
    font-size: 3rem; text-align: center; margin: 80px;
}
h1 span { color: var(--color-gmSnH); font-size: 5rem; }
h2 { font-size: 1.5rem; border-bottom: 1px solid var(--color-gmSnH-tx);
    padding: 3px 5px; }


.main-box { background-color: #ffffff; border: 1px solid var(--color-gmSnH-tx); padding: 2px; }
.main-box2 { border: 1px solid var(--color-gmSnH); }

.top-menu { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 10px; padding: 10px; }
.top-menu a { color: var(--color-gmSnH-tx); text-align: center; border: 1px solid transparent; padding: 5px; }
.top-menu a:hover { color: var(--color-gmSnH); background-color: var(--color-gmSnH-pale); border-radius: 0px; }
.top-menu a.here { border-color: var(--color-gmSnH); }
.top-menu s { text-align: center; padding: 5px; }


.content { border: 1px solid var(--color-gmSnH-tx); padding: 5px; margin: 30px 20px 100px; }
.content:last-child { margin-bottom: 20px; }

.back-link span:after { content: "\A｜\A"; }
.back-link span:last-child:after { content: none; }

.game-tip { margin: 0px; padding: 0px 10px; }
.game-support { border-color: var(--color-gmSnH); }

.game-tip .codoc-support { border-color: var(--color-gmSnH); }
.game-tip .codoc-support .codoc-btn { color: var(--color-gmSnH) !important; border-color: var(--color-gmSnH); }
.game-tip .codoc-support .codoc-btn:hover { color: #ffffff !important; background-color: var(--color-gmSnH); }
/* ---------------------------------------------------------------------------------------------------------------------- */



.top-progress { display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; margin: 0px 10px 10px; }
    .progress-item { display: flex; align-items: center; text-align: center; }
    .progress-graph { display: inline-block; font-size: 2rem; }
    .progress-graph.all { background: linear-gradient(to right, var(--color-gmSnH) 5%, var(--color-gmSnH-tx) 5%); background-clip: text; color: transparent; margin: 10px 0px; }
    .progress-graph.scenario { background: linear-gradient(to right, var(--color-gmSnH) 50%, var(--color-gmSnH-tx) 50%); background-clip: text; color: transparent; }
    .progress-graph.illustration { background: linear-gradient(to right, var(--color-gmSnH) 2%, var(--color-gmSnH-tx) 2%); background-clip: text; color: transparent; }
    .progress-graph.system { background: linear-gradient(to right, var(--color-gmSnH) 0%, var(--color-gmSnH-tx) 0%); background-clip: text; color: transparent; }
.top-process { margin: 30px 30px 10px; }

.top-history { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; margin: 10px; }

.top-outline { display: grid; grid-template-columns: max-content 1fr; column-gap: 15px; row-gap: 10px; margin: 10px; }
.top-outline span { font-size: 0.75rem; margin-left: 1em; }
/* ---------------------------------------------------------------------------------------------------------------------- */
.story-synopsis { margin: 10px; }
.story-synopsis p { line-height: 150%; }
/* ---------------------------------------------------------------------------------------------------------------------- */
.character-content { display: grid; grid-template-columns: 250px 1fr; column-gap: 10px; margin: 10px; }
    .character-img { display: grid; place-items: center; border: 1px solid var(--color-gmSnH-tx); height: 350px; }
    .character-detail { position: relative; }
    .character-detail p { line-height: 120%; }
        .detail-name { font-size: 0.9rem; text-align: right; margin: 5px 0px 20px; }
        .detail-space { padding: 50px; }
        .detail-phrase { position: absolute; right: 20px; bottom: 20px; font-style: italic; font-size: 1.5rem; text-align: right;
            text-shadow: 1px 1px 1px #ffffff, 3px 3px 3px #7a4a0080; }
/* ---------------------------------------------------------------------------------------------------------------------- */
.report p { line-height: 150%; margin: 10px; }
.report a { display: block; color: var(--color-gmSnH-tx); border-bottom: 1px solid var(--color-gmSnH-tx); padding: 5px; margin: 30px; }
.report a:hover { color: var(--color-gmSnH); background-color: var(--color-gmSnH-pale); border-color: var(--color-gmSnH); border-radius: 0px; }
/* ---------------------------------------------------------------------------------------------------------------------- */
.article { font-family: var(--text-SanSerif); text-align: justify; text-justify: distribute-all-lines; padding: 10px; }
.article h2 { font-family: var(--text-Serif); margin-top: 30px; }
.article a:hover { color: var(--color-gmSnH); background-color: var(--color-gmSnH-pale); }
.article p { line-height: 180%; text-indent: 0em; }
.article p a { line-height: 1; }
.article img { margin: 5px; }
.article img:hover { opacity: 1; }
.article .outline { border: 1px solid var(--color-gmSnH-tx); margin: 50px 100px; }
.article .outline h2 { font-size: 1.25rem; margin-top: 0px; }
.article .outline ul { list-style: none; padding: 0px; margin: 10px; }
.article .outline li a { display: block; border-radius: 0px; border: 1px solid var(--color-gmSnH-tx); padding: 5px; margin: 10px 0px; }
.article .outline li a:hover { border-color: var(--color-gmSnH); }

.article .codoc-entry .codoc-btn { color: var(--color-gmSnH) !important; background-color: #ffffff; border: solid 1px var(--color-gmSnH); }
.article .codoc-entry .codoc-btn:hover { color: #ffffff !important; background-color: var(--color-gmSnH) !important; }
.article .codoc-buy-price { color: var(--color-gmSnH); }
.article .codoc-subscription-price { color: var(--color-gmSnH); }
.article .codoc-entry-body-after { margin-top: 50px; }
.article .codoc-support { background-color: #ffffff; border: solid 1px var(--color-gmSnH); }
.article .codoc-support-title { color: var(--color-gmSnH-tx) !important; }
.article .codoc-subscription-articlelist a { color: var(--color-gmSnH-tx); padding: 3px 3px 3px 16px; }
.article .codoc-subscription-articlelist a:before { margin: 3px; }
.article .codoc-subscription-articlelist a:hover { color: var(--color-gmSnH); }
.article .codoc-like-btn:hover { background-color: transparent; }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    h1 { margin: 80px 30px; }
    .top-menu { grid-template-columns: 1fr; row-gap: 10px; border: 1px solid var(--color-gmSnH-tx); margin: 20px 20px 100px; }
    .back-link { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
    .back-link span:last-child { grid-column-start: 1; grid-column-end: 3; }
    .back-link span:after { content: "\A"; }
    
    .top-progress { row-gap: 10px; }
        .progress-graph { font-size: 1rem; }
    
    
    .character-content { grid-template-columns: 1fr; }
        .character-detail h2 { margin-top: 10px; }
            .detail-phrase { right: 10px; bottom: 10px; font-size: 1.1rem; }
    
    
    .article .outline { margin: 50px 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */