@charset "UTF-8";

/* =========================
コミックス＋
========================= */

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

/* =========================
コミック選択スワイパー
========================= */

.p-comic__viewer {
overflow: visible;
}

.p-comics .p-comic__slider.swiper {
position: relative;
width: 100%;
margin-inline: auto;
overflow: visible;
padding-inline: 80px;
box-sizing: border-box;
user-select: none;
-webkit-user-select: none;
}

.p-comics .p-comic__slider.swiper,
.p-comics .p-comic__slider .swiper-wrapper,
.p-comics .p-comic__slider .swiper-slide {
overflow: visible;
}
.p-comics .p-comic__slider .swiper-wrapper {
align-items: flex-start;
justify-content: flex-start;
}

/* =========================
コミック
========================= */

.p-comic__slider .p-comicCard {
position: relative;
width: calc((100% - 64px) / 3);
transition:
transform 0.3s ease,
}

/* =========================
コミック選択
========================= */

.p-comicCard__link {
display: block;
color: inherit;
text-decoration: none;
transform: rotate(2deg);
transition:
transform 0.82s cubic-bezier(0.22, 1.2, 0.8, 1);
will-change: transform;
}
.p-comicCard:nth-child(even) .p-comicCard__link {
transform: rotate(-2deg);
}
.p-comicCard:hover .p-comicCard__link {
transform:
translateY(-40px)
rotate(0.4deg);
}
.p-comicCard:nth-child(even):hover .p-comicCard__link {
transform:
translateY(-40px)
rotate(-0.4deg);
}

/* =========================
コミック画像
========================= */

.p-comicCard__image {
position: relative;
aspect-ratio: 2 / 3;
border-radius: 4px;
overflow: hidden;
background: #fff;
box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.15);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
border:1px solid #6f7c87;
}

.p-comicCard__image::before {
content: "";
position: absolute;

top: 0;
left: -60%;

width: 240%;
height: 100%;

z-index: 1;
pointer-events: none;

background:
linear-gradient(
120deg,

/* 左上の反射 */
rgba(255,255,255,.50) 0%,
rgba(255,255,255,.25) 12%,
rgba(255,255,255,0) 18%,

/* メインの反射 */
rgba(255,255,255,0) 48%,
rgba(255,255,255,.50) 54%,
rgba(255,255,255,.60) 68%,

/* 右下の反射 */
rgba(255,255,255,.60) 82%,
rgba(255,255,255,.40) 92%,
rgba(255,255,255,0) 100%
);

opacity: 0;
transform: translateX(-40%);

transition:
opacity .25s ease,
transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}

.p-comicCard:hover .p-comicCard__image::before {
opacity: 1;
transform: translateX(20%);
}

.p-comicCard__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.p-comicCard:hover .p-comicCard__image {
box-shadow: 6px 12px 16px rgba(0, 0, 0, 0.15);
}

/* =========================
バッジ
========================= */

.p-comicCard__badge {
position: absolute;
top: -32px;
left: 0;
z-index: 3;
margin: 0;
padding: 8px 16px 9px 18px;

display: inline-flex;
align-items: center;
justify-content: center;

height: 22px;
padding: 0 14px 1px;

color: #fff;

font-family: "Zen Maru Gothic", sans-serif;
font-size: 14px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.1em;

text-shadow:
/* 外周（銅金） */
-2px  0    2px #b06a12,
2px  0    2px #b06a12,
0   -2px  2px #b06a12,
0    2px  2px #b06a12,

/* 内周（金） */
-1px -1px 1px #c27a00,
0   -1px 1px #c27a00,
1px -1px 1px #c27a00,
-1px  0   1px #c27a00,
1px  0   1px #c27a00,
-1px  1px 1px #c27a00,
0    1px 1px #c27a00,
1px  1px 1px #c27a00;
}

/* ゴールド本体 */
.p-comicCard__badge::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(
135deg,
#e18a00 0%,
#e18a00 5%,
#ffd43b 25%,
#fff7bf 38%,
#ffca28 52%,
#ffb300 70%,
#e18a00 100%
);
clip-path: polygon(
0 0,
100% 0,
calc(100% - 8px) 50%,
100% 100%,
0 100%,
8px 50%
);
}

/* =========================
本文
========================= */

.p-comicCard__body {
padding: 20px 4px 0;
text-align: center;
}

.p-comicCard__meta {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
margin-bottom:6px;
z-index: 10;
}

.p-comicCard__date {
padding: 4px 5px;
font-family: "LINE Seed JP", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.03em;
color: #fff;
background:#184077;
}

.p-comicCard__type {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;

height: 28px;
padding: 0 8px 1px 30px;

border-radius: 999px;

color: #fff;

font-family: "Zen Maru Gothic", sans-serif;
font-size: 13px;
font-weight: 900;
line-height: 1;

background:
linear-gradient(
180deg,
#ffbe76 0%,
#ff8f5a 45%,
#ff6b6b 100%
);

border: 3px solid #ffb38a;

text-shadow:
-1px -1px 0 #a84300,
1px -1px 0 #a84300,
-1px  1px 0 #a84300,
1px  1px 0 #a84300;
}

.p-comicCard__type::before {
content: "";
position: absolute;
left:4px;
top:45%;
width:24px;
height:24px;
background-image: url("../img/common/category/cat_comics.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
pointer-events: none;
transform: translateY(-50%);
}

.p-comicCard__title {
font-family: "Mochiy Pop One", sans-serif;
font-weight: normal;
font-size: 21px;
line-height: 1.3;
overflow-wrap: anywhere;

color: #333333;
margin-bottom:6px;
}
.p-comicCard__author{
font-family: "Zen Maru Gothic", sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 1;
color:#10335e;
}

/* =========================
ナビ
========================= */

.p-comics .swiper-button-prev,
.p-comics .swiper-button-next {
top: 38%;
width: 96px;
height: 96px;
margin-top: 0;
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
color: transparent;
transform: translateY(-50%);
z-index: 100;
transition: transform .2s ease, opacity .2s ease;
}

.p-comics .swiper-button-prev {
left:0;
background-image: url("../img/common/arrow-l.png");
}

.p-comics .swiper-button-next {
right:0;
background-image: url("../img/common/arrow-r.png");
}

.p-comics .swiper-button-prev:hover {
background-image: url("../img/common/arrow-l_on.png");
transform: translateY(calc(-50% - 2px));
}

.p-comics .swiper-button-next:hover {
background-image: url("../img/common/arrow-r_on.png");
transform: translateY(calc(-50% - 2px));
}

.p-comics .swiper-button-prev.swiper-button-disabled,
.p-comics .swiper-button-next.swiper-button-disabled {
pointer-events: auto;
cursor: default;
opacity:0;
}

.p-comics .swiper-button-prev::after,
.p-comics .swiper-button-next::after {
display: none;
}

/* =========================
空
========================= */

.p-comic__empty {
text-align: center;
font-weight: 700;
}

/* =========================
スマホ（コミックス一覧）
========================= */

@media (max-width: 768px) {

.p-comic__slider .p-comicCard {
width: 100%;
max-width: none;
}
.p-comicCard__link {
max-width: 85%;
margin-inline: auto;
}

.p-comicCard__badge {
top: -29px;
font-size: 13px;
}

.p-comicCard__body {
padding: 15px 4px 0;
}

.p-comicCard__date {
font-size: 12px;
}

.p-comicCard__type {
height: 26px;
font-size: 11px;
}

.p-comicCard__title {
font-size: 4vw;
}

.p-comicCard__author{
font-size: 3.5vw;
}

}