@charset "Shift_JIS";
/* メイン */
h2 span { font-size: 0.75rem; margin-left: 2em; }

.top-link { font-size: 0.75rem; text-align: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 3px 0px;
    margin: 30px 0px; }
.top-link a { color: #000000; padding: 5px; margin: 0px 10px; }
.top-link a:hover { color: var(--main-blue); background-color: var(--main-blue-pale); }



/* ---------------------------------------------------------------------------------------------------- */
/* 長・中・短編小説 */
.content-info h3 { border-bottom: 1px solid #000000; }
.content-info a { color: #000000; padding: 3px; margin-bottom: 1px; }
.content-info a:hover { color: var(--main-blue); background-color: var(--main-blue-pale); }
.content-plot span { margin-left: 2em; }
.content-plot span span { color: #ff0000; margin-left: 0px; }

.content { display: grid; grid-template-columns: 205px 1fr; column-gap: 5px; row-gap: 20px; margin: 10px 0px 0px 1em; }
    .content-img img { width: 200px; height: 40px; }
        .content-outline { font-size: 0.75rem; }
            .content-serial { color: var(--main-gray); margin: 3px 0px 3px 2em; }
            .content-plot { margin-left: 1em; }

.ss-h3 { background: url("../icon.png") no-repeat center left; padding-left: 15px; margin: 15px 0px 10px 1em; }
.ss-h3 a { color: #000000; padding: 5px; }
.ss-h3 a:hover { color: var(--main-blue); background-color: var(--main-blue-pale); }


/* ゲーム */
.content.gameC { grid-template-columns: 405px 1fr; }
.gameC .content-img img { width: 400px; height: 80px; }



/* 色変更 */
.content-info.SH h3 { border-color: var(--color-SH); }
.content-info.Va h3 { border-color: var(--color-Va); }
.content-info.RN h3 { border-color: var(--color-RN); }
.content-info.KM h3 { border-color: var(--color-KM); }
.content-info.M10 h3 { border-color: var(--color-M10); }
.content-info.RA h3 { border-color: var(--color-RA); }
.content-info.MG h3 { border-color: var(--color-MG); }
.content-info.WB h3 { border-color: var(--color-WB); }
.content-info.KT h3 { border-color: var(--color-KT); }
.content-info.SS h3 { border-color: var(--color-SS); }
.content-info.SO h3 { border-color: var(--color-SO); }
.content-info.FK h3 { border-color: var(--color-FK); }
.content-info.SRkm h3 { border-color: var(--color-SRkm); }
.content-info.SRty h3 { border-color: var(--color-SRty); }
.content-info.DZ h3 { border-color: var(--color-DZ); }
.content-info.TD h3 { border-color: var(--color-TD); }
.content-info.KS h3 { border-color: var(--color-KS); }
.content-info.YM h3 { border-color: var(--color-YM); }
.content-info.SZ h3 { border-color: var(--color-SZ); }
.content-info.GS h3 { border-color: var(--color-GS); }
.content-info.gmST h3 { border-color: var(--color-gmST); }
.content-info.gmSnH h3 { border-color: var(--color-gmSnH); }
.content-info.gmeST h3 { border-color: var(--color-gmeST); }
.content-info.gmeHM h3 { border-color: var(--color-gmeHM); }
.content-info.SH a:hover { color: var(--color-SH); background-color: var(--color-SHt); }
.content-info.Va a:hover { color: var(--color-Va); background-color: var(--color-Vat); }
.content-info.RN a:hover { color: var(--color-RN); background-color: var(--color-RNt); }
.content-info.KM a:hover { color: var(--color-KM); background-color: var(--color-KMt); }
.content-info.M10 a:hover { color: var(--color-M10); background-color: var(--color-M10t); }
.content-info.RA a:hover { color: var(--color-RA); background-color: var(--color-RAt); }
.content-info.MG a:hover { color: var(--color-MG); background-color: var(--color-MGt); }
.content-info.WB a:hover { color: var(--color-WB); background-color: var(--color-WBt); }
.content-info.KT a:hover { color: var(--color-KT); background-color: var(--color-KTt); }
.content-info.SS a:hover { color: var(--color-SS); background-color: var(--color-SSt); }
.content-info.SO a:hover { color: var(--color-SO); background-color: var(--color-SOt); }
.content-info.FK a:hover { color: var(--color-FK); background-color: var(--color-FKt); }
.content-info.SRkm a:hover { color: var(--color-SRkm); background-color: var(--color-SRkmt); }
.content-info.SRty a:hover { color: var(--color-SRty); background-color: var(--color-SRtyt); }
.content-info.DZ a:hover { color: var(--color-DZ); background-color: var(--color-DZt); }
.content-info.TD a:hover { color: var(--color-TD); background-color: var(--color-TDt); }
.content-info.KS a:hover { color: var(--color-KS); background-color: var(--color-KSt); }
.content-info.YM a:hover { color: var(--color-YM); background-color: var(--color-YMt); }
.content-info.SZ a:hover { color: var(--color-SZ); background-color: var(--color-SZt); }
.content-info.GS a:hover { color: var(--color-GS); background-color: var(--color-GSt); }
.content-info.gmST a:hover { color: var(--color-gmST); background-color: var(--color-gmSTt); }
.content-info.gmSnH a:hover { color: var(--color-gmSnH); background-color: var(--color-gmSnHt); }
.content-info.gmeST a:hover { color: var(--color-gmeST); background-color: var(--color-gmeSTt); }
.content-info.gmeHM a:hover { color: var(--color-gmeHM); background-color: var(--color-gmeHMt); }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .content { grid-template-columns: 1fr; row-gap: 5px; margin: 10px 10px 0px; }
    .content-plot { margin-bottom: 20px; }
    
    .content.gameC { grid-template-columns: 1fr; }
    .gameC .content-img img { width: 100%; height: auto; }
}
/* ---------------------------------------------------------------------------------------------------- */