@charset "Shift_JIS";
/* 育ててタピオカ草 */
body { color: #36240e; font-family: var(--text-Serif); background-color: #f3ffff; }
a { color: var(--color-gmST); padding: 1px; }
a:hover { color: #ffffff; background-color: var(--color-gmST); }
h1 { background-image: url("ST_title.gif"); background-size: contain; background-repeat: no-repeat; background-position: center;
    padding-top: 330px; width: 500px; margin: 0px auto; }
h2 { border-bottom: 2px dotted var(--color-gmST); padding-bottom: 3px; margin: 3px 0px 3px; }
h3 { color: var(--color-gmST); font-weight: bold; margin: 30px 0px 0px 10px; }
h3:first-of-type { margin-top: 10px; }

.main-box { background-color: #ffffff; border: 3px dotted var(--color-gmST); }
.main-box2 { border: 2px dotted var(--color-gmST); margin: 2px; }

.top-menu { display: flex; justify-content: space-around; align-items: center;
    border-top: 2px dotted var(--color-gmST); border-bottom: 2px dotted var(--color-gmST); padding: 5px; margin-bottom: 30px; }
.top-menu div { padding: 3px; }
    .TM-play { cursor: pointer; color: var(--color-gmST); font-weight: bold; border: 2px solid var(--color-gmST); padding: 4px; }
    .TM-play:hover { color: #ffffff; background-color: var(--color-gmST); }

.back-link { margin: 100px 10px 0px 0px; }
.back-link span:after { font-size: 0.5rem; content: "\A○\A"; }
.back-link span:last-child:after { content: none; }
.CR { border-top: 2px dotted var(--color-gmST); padding: 3px; margin-top: 3px; }


.game-support { border-color: var(--color-gmST); }

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


/* ---------------------------------------------------------------------------------------------------- */
.content { background-repeat: no-repeat; background-position: right 3px bottom 3px;
    text-shadow: 1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
    border: 2px dotted var(--color-gmST); min-height: 180px; 
    padding: 3px; margin: 5px; }
.content a:hover { text-shadow: 0px 0px; }
    .game-info { background-image: url("ST_t-w.png"); }
    .game-info table { margin: 10px 10px 10px 1em; }
    .game-info td:first-of-type { white-space: nowrap; }
        .game-info-text { margin: 10px 10px 10px 1em; }
    .story { background-image: url("ST_t-p.png"); }
    .story p { line-height: 200%; width: 80%; margin: 10px 10px 10px 1em; }
    .system { background-image: url("ST_t-b.png"); }
    .system div { margin: 10px; }
    .system img { width: 192px; height: 144px; }
    .system p { margin-left: 1em; }
    .information { background-image: url("ST_t-g.png"); }
        .information-content { display: grid; grid-template-columns: min-content 1fr; column-gap: 15px; row-gap: 5px; margin: 10px; }
        .information-day { white-space: nowrap; }
        .information-text div { font-size: 0.75rem; text-indent: -1em; padding-left: 1em; margin-left: 1em; }
    .credit { background-image: url("ST_t-o.png"); }
        .credit-title { margin: 5px 0px 0px 1.5em; }
        .credit-content { font-size: 0.75rem; margin: 3px 0px 3px 4em; }
        .credit-url { margin-left: 1em; }
/* ---------------------------------------------------------------------------------------------------- */



/* ヒント・攻略 */
.main-content { margin: 30px; }


/* ---------------------------------------------------------------------------------------------------- */
/* ヒントページ */
.hint { line-height: 150%; margin: 0px 5px; }
.HinQ { border-bottom: 1px solid var(--color-gmST); padding-bottom: 2px; }
.HinQ:before { content: "Ｑ．"; }
.HinA { display: grid; grid-template-columns: min-content 1fr; margin: 5px 0px 50px 1em; }
.HinA-left:before { content: "Ａ．"; }
.HinA-right { margin-bottom: 5px; }


/* 攻略ページ */
.capture-link { font-size: 0.75rem; line-height: 150%; border-top: 2px dotted var(--color-gmST); border-bottom: 2px dotted var(--color-gmST);
    padding: 10px 30px; margin: 50px 0px 10px; }
.capture-link div { margin-left: 1em; }

.capture { margin: 10px; }
.capture p { line-height: 150%; }
.capture h3 { margin: 50px 0px 10px 0px; }
.capture table { border-collapse: collapse; border: 1px solid var(--color-gmST); margin: 10px 10px 10px 2em; }
.capture td { border: 1px solid var(--color-gmST); padding: 5px; }
.capture td:first-of-type { white-space: nowrap; }

.capture-text { margin-left: 1em; }

.color-img , .command-img { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; row-gap: 10px; }

.table-illust { text-align: center; display: grid; column-gap: 5px; row-gap: 5px; margin: 10px 10px 10px 2em; }
.table-illust.pat { grid-template-columns: min-content min-content; }
.table-illust.bride { grid-template-columns: min-content min-content min-content; }
.table-illust table { margin: 0px; }

.end-table td:first-of-type { text-align: center; }
.end-love { line-height: 120%; border: 1px solid var(--color-gmST); width: 80%; padding: 5px; margin: 5px 0px 10px 3em; }
.end-love-text { display: grid; grid-template-columns: max-content 1fr; column-gap: 1em; font-size: 0.75rem; margin-left: 1em; }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    h1 { padding-top: 66%; width: 100%; }
    .top-menu { flex-wrap: wrap; }
    
    .story p { line-height: 150%; }
    
    .main-content { margin: 10px; }
    
    .capture table { font-size: 4vmin; }
    
    .color-img , .command-img { grid-template-columns: 1fr 1fr; }
    .color-img img , .command-img img { box-sizing: border-box; max-width: 100%; height: auto; }
    
    .table-illust.pat , .table-illust.bride { grid-template-columns: min-content; }
    .table-illust img { box-sizing: border-box; max-width: 100%; height: auto; }
}
/* ---------------------------------------------------------------------------------------------------- */







/*
.CapLink { font-size: 0.75rem; line-height: 150%; border-top: 2px dotted #006800; border-bottom: 2px dotted #006800;
            padding: 10px 30px; margin: 50px 0px 10px; }
.CapLink div { margin-left: 1em; }
.Capture img { margin: 10px; }
.Capture p { line-height: 150%; }
.Capture h3 { margin-top: 50px; }
.Capture table { border-collapse: collapse; border: 1px solid #006800; margin: 10px 10px 10px 2em; }
.Capture td { white-space: nowrap; border: 1px solid #006800; padding: 5px; }
.CapTx { margin-left: 1em; }
.Com img { border: 1px solid #36240e; }
.EnTa td:first-of-type { text-align: center; }
.EnRe { line-height: 120%; border: 1px solid #006800; width: 80%; padding: 5px; margin: 5px 0px 10px 3em; }
.EnRe-tx { display: flex; font-size: 0.75rem; margin-left: 1em; }
.GalLink { font-size: 0.75rem; border-top: 2px dotted #006800; border-bottom: 2px dotted #006800; padding: 10px 30px; margin: 200px 0px; }
*/
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ギャラリー */
/*
.G-h2 { border-top: 2px dotted #006800; padding: 3px; margin: 100px 0px 3px; }
.G-h2:first-of-type { margin-top: 30px; }
.G-h2 span { font-size: 0.75rem; margin-left: 2em; }
.G-still { display: flex; flex-wrap: wrap; justify-content: space-between; width: 700px; margin: 0px auto; }
    .Gs-Img { display: inline-block; border: 1px solid #36240e;  width: 64px; height: 48px; margin: 5px; }
    .Gs-Img.GsI-whi:hover { border: 1px solid #BBDCDC; }
    .Gs-Img.GsI-bla:hover { border: 1px solid #676767; }
    .Gs-Img.GsI-blu:hover { border: 1px solid #81E1FF; }
    .Gs-Img.GsI-pin:hover { border: 1px solid #FF95FF; }
    .Gs-Img.GsI-gre:hover { border: 1px solid #A1FF81; }
    .Gs-Img.GsI-ora:hover { border: 1px solid #FFBD00; }
    .Gs-Img.GsI-pur:hover { border: 1px solid #69009C; }
    .Gs-Img img { display: block; width: 100%; height: 100%; }
.Gs-ImgL { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; border: 1px solid #36240e;
            width: 660px; height: 550px; padding: 10px; margin: 5px auto; }
    #Limg { border: 1px solid transparent; width: 640px; height: 480px; }
    #Gs-ImgT { width: 100%; }
.G-bgm { margin: 10px; }
.G-bgm td { padding: 5px; }
.Gb-list { display: flex; flex-wrap: wrap; }
    .Gb-listTit { white-space: nowrap; }
    .Gb-listLink { width: 80%; }
.G-Text { display: flex; font-size: 0.75rem; line-height: 200%; margin-left: 2em; }
    .Gt-select { border: 1px solid #006800; padding: 5px; margin: 5px; }
    .Gt-select input { position: relative; top: 2px; }
    .Gt-button { text-align: right; margin: 5px 10px; }
    .Gt-button input { border: 1px solid #006800; }
    .Gt-up { border: 1px solid #006800; margin: 10px 50px 0px; }
    */
/* ---------------------------------------------------------------------------------------------------- */