/** ============================================================ Play　奥付追加 ============================================================ **/ /** ============================ CSSリセット ============================ **/ .p-colophon-volumes-wrapper *, .p-colophon-relations-wrapper * { margin: unset; padding: unset; border: unset; } .p-colophon-volumes-wrapper a, .p-colophon-relations-wrapper a { color: #0a0a0a; text-decoration: none; } .p-colophon-volumes-wrapper button, .p-colophon-relations-wrapper button { cursor: pointer; } .p-colophon-relations-wrapper ul { list-style: none; } /** ============================ 全般 ============================ **/ .p-none { display: none; } .p-background { width: 100%; height: 100%; } .p-colophon-footer-button { display: flex; justify-content: center; height: 50px; border-top: 1px solid #f6f6f6; } .p-colophon-footer-button > div { width: 100%; height: 100%; text-align: center; cursor: pointer; } .p-colophon-footer-button > div:first-child { border-right: 1px solid #f6f6f6; } .p-colophon-footer-button > div > span { line-height: 50px; color: #4e4e4e; font-size: 16px; } /** ============================ 次巻 ============================ **/ .p-colophon-volumes-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; width: 100% !important; max-width: 630px; height: fit-content; min-height: 227px; margin: auto; border-radius: 5px; background-color: #fff !important; } @media (max-width: 767px) { .p-colophon-volumes-wrapper { width: auto; max-width: none; margin: auto 15px; } } .p-colophon-volumes-content { display: flex; align-items: flex-start; padding: 50px 25px; } @media (max-width: 767px) { .p-colophon-volumes-content { flex-direction: column; padding: 15px; align-items: center; } } .p-colophon-volumes-thumbnail { max-width: 162px; margin-right: 28px; } @media (max-width: 767px) { .p-colophon-volumes-thumbnail { margin-right: 0; margin-bottom: 10px; } } .p-colophon-volumes-thumbnail > a { display: block; line-height: 0; } .p-colophon-volumes-thumbnail > a > img { max-width: 100%; } .p-colophon-volumes-details { display: flex; flex-direction: column; width: 100%; } .p-colophon-volumes-details > a { color: #0a0a0a; } .p-colophon-volumes-details > a > span { font-weight: bold; font-size: 16px; } .p-colophon-volumes-details > span { margin-top: 10px; color: #0a0a0a; font-size: 14px; } .p-colophon-volumes-details-see-next-button, .p-colophon-volumes-details-see-next-free-button, .p-colophon-volumes-details-add-cart-a { display: none; width: 100%; max-width: 390px; height: 56px; margin: 30px auto 0; border-radius: 5px; font-size: 14px; text-align: center; } .p-colophon-volumes-details-see-next-button, .p-colophon-volumes-details-see-next-free-button { background-color: #1f9aff; color: #fff; } .p-colophon-volumes-details-add-cart-a { background-color: #ffd54d; color: #000; } .p-colophon-volumes-details-add-cart-a > span { line-height: 56px; } .p-colophon-volumes-details-add-cart-a > svg { display: inline-block; width: 12px; height: 12px; line-height: 56px; fill: #4f4f4f; } .p-colophon-volumes-details-free-work-remarks { display: none; flex-direction: column; } .p-colophon-volumes-details-free-work-remarks > p { margin-top: 30px; color: #4e4e4e; font-size: 12px; text-align: center; } .p-colophon-volumes-details-free-work-remarks > a { width: 234px; height: 39px; margin: 10px auto 0; border: 1px solid #cecece; border-radius: 5px; text-align: center; color: #4e4e4e; } .p-colophon-volumes-details-free-work-remarks > a > span { font-size: 14px; line-height: 39px; } .p-colophon-volumes-details-free-work-remarks > a > svg { display: inline-block; width: 12px; height: 12px; line-height: 39px; fill: #4f4f4f; } /** ============================ 関連作品 ============================ **/ .p-colophon-relations-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; width: 100% !important; max-width: 540px; height: fit-content; margin: auto; border-radius: 5px; background-color: #fff !important; } @media (max-width: 767px) { .p-colophon-relations-wrapper { width: auto; max-width: 351px; } } .p-colophon-relations-content { padding: 15px 15px 30px 15px; } .p-colophon-relations-content > p { color: #0a0a0a; font-weight: bold; font-size: 20px; } .p-colophon-relations-content > ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -6px; font-size: 14px; } .p-colophon-relations-content > ul::after { display: block; width: 158px; content: ''; } @media (max-width: 767px) { .p-colophon-relations-content > ul::after { width: 102px; } } .p-colophon-relations-content > ul > li { width: 158px; margin-top: 16px; } @media (max-width: 767px) { .p-colophon-relations-content > ul > li { width: 102px; } } .p-colophon-relations-related-works-thumbnail { display: block; position: relative; width: 100%; height: 158px; margin-bottom: 4px; overflow: hidden; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #d9d9d9; } @media (max-width: 767px) { .p-colophon-relations-related-works-thumbnail { height: 102px; } } .p-colophon-relations-related-works-thumbnail > span { position: absolute; top: 0; transform: rotate(-45deg) translate(-28px, -16px); width: 99px; height: 18px; background-color: #1f9aff; color: #fff; font-size: 10px; line-height: 18px; text-align: center; } .p-colophon-relations-related-works-name > span { font-size: 14px; } @media (max-width: 767px) { .p-colophon-relations-related-works-name > span { font-size: 10px; } } .p-colophon-relations-details { display: flex; flex-direction: column; margin-top: 30px; } .p-colophon-relations-details > a { width: fit-content; margin: 0 auto; color: #1f9aff; font-weight: bold; font-size: 16px; } .p-colophon-relations-details > a > svg { display: inline-block; width: 12px; height: 12px; line-height: 39px; fill: #1f9aff; } .p-colophon-relations-details-free-work-remarks { display: none; flex-direction: column; } .p-colophon-relations-details-free-work-remarks > p { margin-top: 30px; color: #4e4e4e; font-size: 12px; text-align: center; } .p-colophon-relations-details-free-work-remarks > a { width: 234px; height: 39px; margin: 10px auto 0; border: 1px solid #cecece; border-radius: 5px; text-align: center; color: #4e4e4e; } .p-colophon-relations-details-free-work-remarks > a > span { font-size: 14px; line-height: 39px; } .p-colophon-relations-details-free-work-remarks > a > svg { display: inline-block; width: 12px; height: 12px; line-height: 39px; fill: #4f4f4f; }