@charset "utf-8";
/*-----------------------------------------------
 * COMIC
-------------------------------------------------*/
/**
* DECO
**/
.subSec__deco-handlegrid {
    top: max(calc(-8 / var(--vw-min) * 100vw),-8px);
    right: min(calc(100 / var(--vw-min) * 100vw),100px);
}
@media screen and (max-width:768px){
    .subSec__deco-handlegrid {
        top: calc(-120 / var(--vw-min) * 100vw);
        right: calc(26 / var(--vw-min) * 100vw);
    }
}
.subSec__deco-coffee {
    top: min(calc(200 / var(--vw-min) * 100vw),200px);
    right: min(calc(45 / var(--vw-min) * 100vw),45px);
}
@media screen and (max-width:768px){
    .subSec__deco-coffee {
        top: calc(185 / var(--vw-min) * 100vw);
        right: calc(33 / var(--vw-min) * 100vw);
    }
}
/**
* CONT
**/
.comic {
    padding-bottom: min(calc(230 / var(--vw-min) * 100vw),230px);
    overflow: hidden;
}
@media screen and (max-width:768px){
    .comic {
        padding: calc(84 / var(--vw-min) * 100vw) 0 calc(176 / var(--vw-min) * 100vw);
    }
}
.comicWrap {
    width: min(calc(970 / var(--vw-min) * 100vw),970px);
    margin: 0 auto;
    position: relative;
}
@media screen and (max-width:768px){
    .comicWrap  {
        width: 100%;
    }
}
.comic.subSec .cont-tit {
    margin-bottom: min(calc(10 / var(--vw-min) * 100vw),10px);
}
@media screen and (max-width:768px){
    .comic.subSec .cont-tit {
        margin-bottom: calc(30 / var(--vw-min) * 100vw);
    }
}
.subSec__tit {
    font-size: min(calc(34 / var(--vw-min) * 100vw),34px);
    color: var(--color-orange);
    font-weight: 800;
    line-height: 1;
    position: relative;
    margin: 0 auto min(calc(70 / var(--vw-min) * 100vw),70px);
}
@media screen and (max-width:768px){
    .subSec__tit {
        font-size: calc(30 / var(--vw-min) * 100vw);
        margin: 0 auto calc(70 / var(--vw-min) * 100vw);
        padding-left: calc(70 / var(--vw-min) * 100vw);
    }
    .comic__spin .subSec__tit {
        padding-left: calc(54 / var(--vw-min) * 100vw);
    }
}
.comic__cast .subSec__tit {
    margin-bottom: 0;
}
.subSec__tit span {
    position: relative;
    z-index: 2;
	display: inline-block;
}
.comic__novel .subSec__tit::before {
    content: "";
    width: min(calc(532 / var(--vw-min) * 100vw),532px);
    height: min(calc(462 / var(--vw-min) * 100vw),462px);
    display: block;
    position: absolute;
    z-index: 1;
    top: max(calc(-230 / var(--vw-min) * 100vw),-230px);
    left: max(calc(-230 / var(--vw-min) * 100vw),-230px);
    opacity: 0;
    transform: translate(-100px, -100px);
    transition: .5s ease;
    background: url(../img/common/deco/deco_blackpan.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .comic__novel .subSec__tit::before {
        width: calc(410 / var(--vw-min) * 100vw);
        height: calc(357 / var(--vw-min) * 100vw);
        top: calc(-180 / var(--vw-min) * 100vw);
        left: calc(-97 / var(--vw-min) * 100vw);
    }
}
.comic__comic .subSec__tit::before {
    content: "";
    width: min(calc(248 / var(--vw-min) * 100vw),248px);
    height: min(calc(248 / var(--vw-min) * 100vw),248px);
    display: block;
    position: absolute;
    z-index: 1;
    top: max(calc(-113 / var(--vw-min) * 100vw),-113px);
    left: max(calc(-70 / var(--vw-min) * 100vw),-70px);
    -webkit-filter: drop-shadow(5px 5px 5px #767676);
    filter: drop-shadow(5px 5px 5px #767676);
    background: url(../img/common/deco/deco_plate2.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .comic__comic .subSec__tit::before {
        width: calc(207 / var(--vw-min) * 100vw);
        height: calc(207 / var(--vw-min) * 100vw);
        top: calc(-90 / var(--vw-min) * 100vw);
        left: calc(20 / var(--vw-min) * 100vw);
    }
    .comic__comic .subSec__tit {
        opacity: 0;
        transition: .5s ease;
    }
}
.comic__spin .subSec__tit::before {
    content: "";
    width: min(calc(248 / var(--vw-min) * 100vw),248px);
    height: min(calc(248 / var(--vw-min) * 100vw),248px);
    display: block;
    position: absolute;
    z-index: 1;
    top: max(calc(-113 / var(--vw-min) * 100vw),-113px);
    left: max(calc(-45 / var(--vw-min) * 100vw),-45px);
    -webkit-filter: drop-shadow(5px 5px 5px #767676);
    filter: drop-shadow(5px 5px 5px #767676);
    background: url(../img/common/deco/deco_plate3.png)no-repeat center/contain;
}
@media screen and (max-width:768px){
    .comic__spin .subSec__tit::before {
        width: calc(207 / var(--vw-min) * 100vw);
        height: calc(207 / var(--vw-min) * 100vw);
        top: calc(-90 / var(--vw-min) * 100vw);
        left: calc(20 / var(--vw-min) * 100vw);
    }
    .comic__spin .subSec__tit {
        opacity: 0;
        transition: .5s ease;
    }
}
.comic__comic,
.comic__spin {
    padding-top: min(calc(180 / var(--vw-min) * 100vw),180px);
}
@media screen and (max-width:768px){
    .comic__comic,
    .comic__spin {
        padding-top: calc(145 / var(--vw-min) * 100vw);
    }
}
/**
* SWIPER
**/
.comicSwiperWrap {
    position: relative;
    z-index: 3;
}
@media screen and (max-width:768px){
    .comicSwiperWrap {
        padding: 0 calc(54 / var(--vw-min) * 100vw);
    }
}
.comicSwiper.swiper {
    overflow: unset;
}
.comicSwiperItem {
    width: min(calc(280 / var(--vw-min) * 100vw),280px);
    margin-right: min(calc(40 / var(--vw-min) * 100vw),40px);
}
@media screen and (max-width:768px){
    .comicSwiperItem {
        width: calc(280 / var(--vw-min) * 100vw);
        margin-right: calc(30 / var(--vw-min) * 100vw);
    }
}
.comicSwiperItem a {
    text-decoration: none;
}
.comicSwiperItem-img {
    width: 100%;
}
@media (hover: hover) and (pointer: fine){
    .comicSwiperItem-img:hover {
        animation: poyonAnimation .45s ease-out forwards;
    }
}
.comicSwiperItem-img img {
    width: 100%;
    pointer-events: none;
    transition: .3s ease;
}
.comicSwiperItem-tit {
    font-size: min(calc(22 / var(--vw-min) * 100vw),22px);
    line-height: 1;
    font-weight: 800;
    text-align: center;
    margin-top: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
    .comicSwiperItem-tit {
        font-size: calc(22 / var(--vw-min) * 100vw);
        margin-top: calc(20 / var(--vw-min) * 100vw);
    }
}
.swiper-horizontal>.swiper-scrollbar, 
.swiper-scrollbar.swiper-scrollbar-horizontal {
    width: min(calc(940 / var(--vw-min) * 100vw),940px);
    height: min(calc(10 / var(--vw-min) * 100vw),10px);
    position: relative;
    margin: 0 auto;
    bottom: 0;
    right: 0;
    left: 0;
    margin-top: min(calc(50 / var(--vw-min) * 100vw),50px);
}
@media screen and (max-width:768px){
    .swiper-horizontal>.swiper-scrollbar, 
    .swiper-scrollbar.swiper-scrollbar-horizontal {
        width: calc(640 / var(--vw-min) * 100vw);
        height: calc(10 / var(--vw-min) * 100vw);
        margin-top: calc(50 / var(--vw-min) * 100vw);
    }
}
.swiper-scrollbar {
    background-color: var(--color-brown);
}
.swiper-scrollbar-drag {
    background-color: var(--color-orange);
}
/*-----------------------------------------------
 * アニメーション
-------------------------------------------------*/
body.--is-subload .comic__novel .subSec__tit::before {
    opacity: 1;
    transform: translate(0, 0);
	transition-delay: 1.5s;
}
body .comic__novel .subSec__tit span {
    opacity: 0;
    transition: .4s ease-in-out;
}
body.--is-subload .comic__novel .subSec__tit span {
    opacity: 1;
    transition-delay: 1.5s;
}
.comic__comic .subSec__tit,
.comic__spin .subSec__tit {
    opacity: 0;
    transition: .3s ease;
}
.comic__comic.is-ani .subSec__tit,
.comic__spin.is-ani .subSec__tit {
    opacity: 1;
}
.comic__novel .comicSwiperWrap,
.comic__comic .comicSwiperWrap,
.comic__spin .comicSwiperWrap {
    opacity: 0;
    transform: translateX(50%);
    transition: .5s ease;
}
body.--is-subload .comic__novel .comicSwiperWrap,
.comic__comic.is-ani .comicSwiperWrap,
.comic__spin.is-ani .comicSwiperWrap {
    opacity: 1;
    transform: translateX(0);
}
body.--is-subload .comic__novel .comicSwiperWrap {
    transition-delay: 1.5s;
}
@media screen and (max-width:768px){
    body.--is-subload .comic__comic .subSec__tit,
    body.--is-subload .comic__spin .subSec__tit {
        opacity: 1;
        transition-delay: 1.5s;
    }
    body.--is-subload .comic__comic .comicSwiperWrap,
    body.--is-subload .comic__spin .comicSwiperWrap {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 1.5s;
    }
}