@charset "Shift_JIS";
/* 個人出版 詳細　『深き森に咲く赤』 */
body { color: #ffffff; background-color: #000000; }
a { color: var(--color-p2022-01); }
a:hover { border-color: var(--color-p2022-01); }


.top-contents { display: grid; grid-template-columns: 1fr min-content; }
    .top-contents-text { padding: 5% 0px 0px; }
    .text-copy { font-size: 1.5rem; margin-right: 5px; }
    .text-detail { font-size: 0.9rem; line-height: 150%; text-align: right; margin: 15px 0px 0px 1em; }
.top-contents img { width: calc(800 * 0.4px); }

.book-information { border: 1px solid #ffffff; padding: 5px; }
    .information-header { display: grid; grid-template-columns: 1fr 200px; column-gap: 10px; }
            .title-text { font-size: 2rem; border-bottom: 2px solid #ffffff; margin: 5px 0px 0px 10px; }
    .information-header .BuyButton { margin: 5px 5px 0px; }
    
    .information-outline { display: grid; grid-template-columns: 40% 1fr; column-gap: 10px; row-gap: 10px; margin-top: 10px; }
        .outline-title { font-size: 1.25rem; }
        .outline-text { padding: 0px 1em; }
        .outline-text .BuyButton { width: 50%; margin: 30px auto; }
    
    .BookInformationTable { border-color: #ffffff; width: 80%; margin: 30px auto 15px; }
    .BookInformationTable td { border-color: #ffffff; }

.BookSample { border: 3px solid #ffffff; padding: 2px; margin: 50px auto; }
    .booksample-box { background-color: var(--color-p2022-01); border: 2px solid #ffffff; padding: 2px; }
        .novel-box { background-image: linear-gradient(to left, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url("Lpage/novel2022-01_sample.png");
            background-repeat: no-repeat; background-position: bottom left; background-size: 80%; padding: 1em; }
    .BookSampleTitle { border-top: 1px solid var(--color-p2022-01); border-bottom: 1px solid var(--color-p2022-01); padding: 5px; }

.Footer { border-top: 1px solid #ffffff; padding: 5px; }




/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .top-contents { display: inline; }
    .top-contents-text{ position: absolute; top: 0; left: 0; width: 100%; }
    .text-copy , .text-detail { background-color: rgba(0, 0, 0, 0.5); line-height: 200%; text-align: center; margin: 10px 0px; }
    
    .information-header { display: inline; }
    
    .BookInformationTable { width: auto; margin: 30px 10px 10px; }
    
    .novel-box { background-size: 100%; }
    
    .information-outline { grid-template-columns: 1fr; }
    .outline-text { padding: 0px 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */