@charset "Shift_JIS";
/* 個人出版 詳細　『身代わり聖女奇譚』 */
a { color: var(--color-p2022-03); }
a:hover { border-color: var(--color-p2022-03);  }
.BuyButton { width: 50%; margin: 10px auto; }

.top-contents { position: relative; text-align: right; }
    .top-contents-text { position: absolute; top: 50%; transform: translateY(-50%); line-height: 200%; font-size: 1.5rem; text-align: left; }
    .top-contents-text span { font-size: 150%; }
.top-contents img { width: 60%; height: auto; }

.BookInformation { margin-top: 50px; }
    .header-title { text-align: center; }
        .title-text { background: radial-gradient(rgba(var(--color-p2022-03-16), 0.5), transparent 50%); padding: 10px 0px }
            .title-text-primarily { font-size: 1.5rem; }
    .header-title .BuyButton { margin: 20px auto; }
    
    .information-outline { display: grid; grid-template-columns: 40% 1fr; column-gap: 10px; }
        .outline-title { color: var(--color-p2022-03); font-size: 1.25rem; font-weight: bold; }
        .outline-text { padding-left: 1em; }
    .information-outline .BuyButton { margin: 50px auto; }
    
    .BookInformationTable { width: 80%; margin: 50px auto; }

.BookSample { border: 1px solid var(--color-p2022-03); padding: 5px; margin: 100px 0px 50px; }
    .BookSampleTitle { margin: 20px auto; }
    .novel-box { border: 1px dotted var(--color-p2022-03); padding: 30px; }
    .BookSampleContinue { margin-bottom: 10px; }

.Footer { margin-top: 50px }



/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .top-contents { padding-top: 2em; margin-top: 20px; }
    .top-contents-text { top: 0; transform: translateY(0); font-size: 1rem; }
    .top-contents img { width: 80%; }
    
    .BookInformation { margin-top: 20px; }
    .information-outline { display: inline; }
    .outline-title { margin-top: 20px; }
    .outline-text { padding: 0px 10px; }
    .BookInformationTable { width: auto; margin: 50px 10px 10px; }
    
    .novel-box { padding: 30px 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */