@charset "Shift_JIS";
/* 個人出版　イラスト */
#illust-box  { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 30px; }
.download  { grid-column: 1 / 8; text-align: center; margin: 50px; }

.popup { cursor: pointer; border: 1px solid var(--main-purple); box-sizing: border-box; width: 100px; height: 100px; padding: 3px;
    margin: 5px auto; }
.popup:hover { background-color: var(--main-purple-pale); }
.popup div { background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; }
#popup-container { display: none; overflow-y: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ffffff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8); width: 90%; height: 90%; margin: auto; }
#popup-close { cursor: pointer; position: absolute; right: 0; font-size: 30px; padding: 0 10px; }
.popup-grid { display: grid; grid-template-rows: 1fr min-content; row-gap: 10px; height: calc( 100% - ( 40px + 10px ) );
    margin: 40px 40px 10px; }
#popup-img { background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(""); }
#popup-text { font-size: 0.75rem; text-align: right; }
#popup-updown { display: grid; grid-template-columns: 1fr min-content 50px min-content 1fr; }
.popup-updown-arrow { cursor: pointer; font-size: 1.5rem; }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    #illust-box  { grid-template-columns: repeat(2, 1fr); }
    .popup { width: 150px; height: 150px; }
    
    #popup-container { background-color: rgba(0, 0, 0, .8); width: 99%; height: 99%; }
    #popup-close { color: #ffffff; font-size: 50px; }
    .popup-grid { height: calc( 100% - ( 60px + 10px ) ); margin: 60px 10px 10px; }
    #popup-text { color: #ffffff; text-align: center; }
    #popup-updown { color: #ffffff; margin-top: 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */