@charset "UTF-8";

/* =========================
文字サイズ変更
========================= */

.p-comicSingle .p-comicCard__title {
font-size: 32px;
text-shadow:
0 0 4px rgba(255,255,255,1),
0 0 8px rgba(255,255,255,1),
0 0 16px rgba(255,255,255,.8),
0 0 32px rgba(255,255,255,.8);
}
.p-comicSingle .p-comicCard__author{
font-size: 20px;
}

/* =========================
コミック単体ページ
========================= */

.p-comicSingle {
position: relative;
overflow:hidden;
}

.p-comicSingle__header{
position: relative;

padding: 0 0 25px;

text-align:center;

}

.p-comicSingle__header > *{
position: relative;
z-index: 1;
}

.p-comicSingle__creation{
position: relative;
padding: 75px 0 35px;
background-image: url("../img/title/bg_comics-page.svg");
background-repeat: no-repeat;
background-position: center bottom;
background-size: auto 84%;
}

.p-comicSingle__lead {
padding: 4px 10px;
background:rgba(255,255,255,.50);
border: 1px solid rgba(255,255,255,.66);
border-radius: 999px;
display: inline-block;
font-family: "Zen Maru Gothic", sans-serif;
font-size: 14px;
font-weight: 900;
}

.p-comicViewer {
position: relative;
margin: 0 auto;
width: min(100%, 800px);
overflow: visible;
}
.p-comicViewer .swiper-wrapper {
align-items: flex-start;
}
.p-comicViewer__slide {
text-align: center;
height: auto;
}

.p-comicViewer__title {
margin-bottom: 25px;
font-family: "LINE Seed JP", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: #10335e;
}

.p-comicViewer__image {
width: min(100%, 800px);
margin: 0 auto;

padding: 4px;

background: #fff;

border: 1px solid #6f7c87;
border-radius: 4px;
}

.p-comicViewer__image img {
display: block;
width: 100%;
height: auto;
}

.p-comicViewer__prev,
.p-comicViewer__next {
color: currentColor;
}

/* =========================
コミック単体 コントロール
========================= */

.p-comicControl {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin: 20px 0;
user-select: none;
}

.p-comic__arrow {
display: block;
width: 64px;
height: 64px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0;
border: 0;
cursor: pointer;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.p-comic__arrow:hover {
transform: translateY(-2px);
}
.p-comic__arrow--prev {
background-image: url("../img/common/arrow-l.png");
}
.p-comic__arrow--next {
background-image: url("../img/common/arrow-r.png");
}
.p-comic__arrow--prev:hover {
background-image: url("../img/common/arrow-l_on.png");
}
.p-comic__arrow--next:hover {
background-image: url("../img/common/arrow-r_on.png");
}
.js-comicPrev.is-disabled,
.js-comicNext.is-disabled {
opacity: 0;
pointer-events: none;
}

.p-comicSelect {
position: relative;
display: flex;
align-items: center;
margin-top: 0;
}

.p-comicSelect::after {
content: "";
position: absolute;
top: 50%;
right: 18px;
width: 14px;
height: 14px;
border-right: 4px solid #184077;
border-bottom: 4px solid #184077;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}

.p-comicSelect__select {
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
width: 220px;
min-width: 220px;
padding: 14px 40px 12px 20px;
font-weight:bold;
border: 3px solid #184077;
border-radius: 999px;
color:#184077;
background: #fff;
}
.p-comicSelect__select:focus,
.p-comicSelect__select:focus-visible {
outline: none;
box-shadow: none;
}
.p-comicSelect__label {
display: none;
}

/* =========================
スマホ（共通パーツ）
========================= */

@media (max-width: 768px) {

.p-comicSingle__header{
padding: 0 0 20px;
}

.p-comicSingle .p-comicCard__title {
font-size: 6vw;
}
.p-comicSingle .p-comicCard__author{
font-size: 4.5vw;
}

.p-comicSingle__lead {
padding: 4px 10px 5px;
font-size: 3vw;
}

.p-comicSingle__creation{
padding: 50px 0 25px;
background-position: center 66%;
background-size: auto 60%;
}

.p-comicViewer__title {
margin-bottom: 20px;
font-size: 4vw;
}

.p-comicViewer {
width: 90%;
}

.p-comicControl {
gap: 5px;
margin: 20px 0;
}

.p-comicSelect__select {
width: auto;
min-width: 0;
padding: 14px 40px 14px 20px;
}

}