@charset "Shift_JIS";
/* 個人出版 詳細　『月の女神の御心のまま』 */
body { color: #ffffff; background-color: #000000; }
a { color: var(--color-p2022-02); }
a:hover { border-color: var(--color-p2022-02);  }

.top-contents-img { position: relative; }
.top-contents-img img { width: 100%; height: auto; }
    .top-img-text { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.3);
        font-size: 2rem; text-align: center; width: 100%; padding: 10px 0px; }

.top-contents-text { background: url("Lpage/novel2022-02_top2.png") no-repeat top right; background-size: 50%; }
    .top-text-string { margin: 0px 50px; }
        .string-even { text-align: center; margin: 2em 0px; }
        .string-one { font-size: 1.5rem; }
        .string-three { font-size: 1.5rem; text-align: right; }
        .string-five { font-size: 2rem; margin: 2em 0px; }

.BookInformation { background-color: rgba(var(--color-p2022-02-16), 0.15); padding: 10px; }
    .information-header { text-align: center; }
        .title-text { font-size: 2rem; border-top: 1px solid var(--color-p2022-02); border-bottom: 1px solid var(--color-p2022-02); padding: 10px; 
            margin: 10px 0px; }
    
    .information-outline { display: grid; grid-template-columns: 1fr 40%; column-gap: 10px; }
    .information-outline .BuyButton { width: 50%; margin: 20px auto; }
        .outline-title { font-size: 1.25rem; text-align: center; border-top: 1px solid var(--color-p2022-02);
            border-bottom: 1px solid var(--color-p2022-02); padding: 3px; margin: 30px 0px 10px; }
        .outline-text { margin: 0px 10px; }
    
    .information-item .BuyButton { width: 30%; margin: 30px auto; }
        .BookInformationTable { border-color: #f7f8f0; width: 80%; margin: 15px auto; }
        .BookInformationTable td { border-color: #f7f8f0; }

.BookSample { display: grid; grid-template-columns: 30px 1fr 30px; grid-template-rows: 30px 1fr 30px; margin: 50px 0px; }
    .BStl { background-image: radial-gradient(circle at bottom right, #ffffff, var(--color-p2022-02) 35%, #000000 70%); }
    .BSt { background-image: linear-gradient(to top, #ffffff, var(--color-p2022-02) 50%, #000000); }
    .BStr { background-image: radial-gradient(circle at bottom left, #ffffff, var(--color-p2022-02) 35%, #000000 70%); }
    .BSl { background-image: linear-gradient(to left, #ffffff, var(--color-p2022-02) 50%, #000000); }
    .BookSampleTitle { background-image: linear-gradient(to left, transparent, rgba(var(--color-p2022-02-16), 0.3) 10%, rgba(var(--color-p2022-02-16), 0.3) 90%, transparent);
        padding: 8px; }
    .BSr { background-image: linear-gradient(to right, #ffffff, var(--color-p2022-02) 50%, #000000); }
    .BSbl { background-image: radial-gradient(circle at top right, #ffffff, var(--color-p2022-02) 35%, #000000 70%); }
    .BSb { background-image: linear-gradient(to bottom, #ffffff, var(--color-p2022-02) 50%, #000000); }
    .BSbr { background-image: radial-gradient(circle at top left, #ffffff, var(--color-p2022-02) 35%, #000000 70%); }
    
.Footer { padding: 5px; }



/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .top-img-text { font-size: 1.5rem; }
    .top-contents-img img { box-sizing: border-box; object-fit: cover; aspect-ratio: 1 / 1; }
    .top-contents-text { background-size: 80%; }
    .top-text-string { margin: 0px; }
    .string-even { margin: 2em; }
    .string-one { font-size: 1.25rem; margin-right: 1em; }
    .string-three { font-size: 1.25rem; margin-left: 1em; }
    .string-five { font-size: 1.5rem; margin-right: 1em; }
    
    .title-text { font-size: 1.5rem; }
    .information-outline { display: flex; flex-direction: column-reverse; }
    .BookInformationTable { width: auto; margin: 15px 10px 10px; }
    
    .BookSample { grid-template-columns: 15px 1fr 15px; grid-template-rows: 15px 1fr 15px; }
}
/* ---------------------------------------------------------------------------------------------------- */