@charset "Shift_JIS";
/* 個人出版 詳細　『捨てられ王女と拾った魔王』 */
a { color: var(--color-p2022-04); }
a:hover { border-color: var(--color-p2022-04);  }
.BuyButton { width: 50%; margin: 100px auto; }

.top-contents { position: relative; }
    .top-contents-text { position: absolute; top: 50%; transform: translateY(-50%); line-height: 200%; font-size: 1.3rem;
        text-align: right; width: 90%; }
        .string-two { margin-right: 1em; }
.top-contents img { width: 70%; height: auto; }

.BookInformation { display: grid; grid-template-columns: 45% 1fr; column-gap: 1em; margin-top: 50px; }
    .BookInformationCover { border-color: var(--main-gray); }
    .header-title { text-align: center; margin-top: 10px; }
        .title-text { background: radial-gradient(var(--color-p2022-04-sub), transparent 75%); font-size: 2rem; margin: 5px auto 5px; }
    .header-title .BuyButton { margin: 30px auto; }
    .outline-title { font-size: 1.3rem; border-bottom: 1px solid var(--color-p2022-04); margin-bottom: 5px; }
    .outline-text { margin: 0px 10px; }

.BookInformationTable { width: 80%; margin: 50px auto; }
.BookInformationTable td { border-color: var(--color-p2022-04-sub); }

.BookSample { border: 1px solid var(--color-p2022-04); }
    .booksample-box { border: 1px solid var(--color-p2022-04-sub); margin: 10px; padding: 20px; }
        .BookSampleTitle { margin-top: 100px; }

.Footer { margin-top: 50px }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) { 
    .top-contents { margin: 20px 0px; }
    .top-contents-text { line-height: 300%; font-size: 1rem; width: 100%; }
    .top-contents-text div { background-image: linear-gradient(to top, transparent 15%, rgba(255, 255, 255, 0.75) 40% 60%, transparent 85%); }
    .top-contents img { width: 100%; }
    
    .BookInformation { display: inline; }
    .header-title { margin-top: 15px; }
    .title-text { font-size: 1.5rem; }
    
    .outline-title { font-size: 1rem; text-align: center; border-top: 1px solid var(--color-p2022-04); padding: 3px; margin-top: 30px; }
    
    .BookInformationTable { width: auto; margin: 30px 0px 50px; }
    
    .BookSampleTitle { margin: 50px 0px 0px; }
    .booksample-box { padding: 10px; }
    .novel-box { padding: 50px 0px; }
}
/* ---------------------------------------------------------------------------------------------------- */