@charset "UTF-8";
/*----------------------------
manga
----------------------------*/
#lv{
	& section{
		padding:0;
	}
}
.visual-bg{
	background:url(../images/manga/visual-bg.png) no-repeat;
    background-size:cover;
    background-position: center;
}
.visual-bg:before{
		display:none;
}
@media screen and (max-width: 767.98px){
	.article-list{
		& .ratio-29x35{
			aspect-ratio: 4 / 3;
		}
	}
	
}
/*スライダーエリア*/
.manga-area{
    background:var(--my-darkgray);
    & .wrapper{
        max-width:1400px;
        overflow: visible;
    }
    & img{
        max-width:700px;
    }
}
@media screen and (max-width: 767.98px){
    .manga-area{
    & .wrapper{
        padding-right:0;
        padding-left:0;
        }
    & img{
        max-width:none;
        }
    }
}
/*スライダー記事エリア*/
.manga-article{
	position: relative;
    cursor: pointer;
    & .slick-list{
        position: relative;
        display: block;
        overflow: hidden;
     }
    & .slick-track{
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    & .slick-arrow{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        height: 40px;
        width: 30px;
        cursor: pointer;
        position: absolute;
        top: calc(50% - 20px);
        left: -50px;
        z-index: 1;
        border: none;
    }
    & .slick-next{
        left: auto;
        right: -50px;
    }
    & .slick-arrow:before{
        content: "";
        display: block;
        width:10px;
        height: 10px;
        position: absolute;
        top: calc(50% - 5px);
        border-top: 2px solid var(--bs-white);
        border-left: 2px solid var(--bs-white);
        opacity: .8;
    }
    & .slick-prev:before{
        transform: rotate(-45deg);
        left: calc(50% - 0px);
    }
    & .slick-next:before{
        transform: rotate(135deg);
        left: calc(50% - 20px);
    }
    & .pointer{
        display: table;
        margin: 20px auto 0;
    }
    & .pointer li{
        display: table-cell;
        padding: 0 3px;
    }
    & .pointer li button{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        background-color: var(--my-gray);
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: none;
        cursor: pointer;
     }
    & .pointer .slick-active button{
        background-color: var(--my-orange);
    }
}