@charset "UTF-8";

.p-tab{
    background: var(--gray-color-light);
    padding: calc(30 * var(--px)) 0;
}
.p-tab .swiper{
    overflow: visible;
}
.p-tab .swiper-slide{
    height: auto;
}
.p-tab__link{
    width: 100%;
    height: 100%;
    padding: calc(8.75 * var(--px)) calc(11 * var(--px));
    background: #fff;
    border-radius: var(--radius-light);
    box-shadow: var(--shadow-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small-text);
    line-height: var(--lh-tighter);
    font-weight: bold;
}
.p-tab__link--active{
    background: var(--button-color);
    color: #fff;
    box-shadow: none;
}
@media screen and (min-width: 768px){
    .p-tab .swiper-wrapper{
        flex-wrap: wrap;
        align-items: stretch;
    }
    .p-tab .swiper-slide{
        width: 12.5%;
        margin: calc(12.5% / 7) calc(12.5% / 7) 0 0;
    }
    .p-tab .swiper-slide:nth-child(7n){
        margin-right: 0;
    }
    .p-tab .swiper-slide:nth-child(-n+7){
        margin-top: 0;
    }
    .p-tab .swiper-button-prev,
    .p-tab .swiper-button-next{
        display: none;
    }
}
@media screen and (max-width: 767px){
    .p-tab{
        padding: calc(14 * var(--px)) 0;
        overflow: hidden;
        position: relative;
    }
    .p-tab:not(.is-disabled)::before{
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, var(--gray-color-light) calc(48 * var(--px)) , transparent calc(61 * var(--px)), transparent calc(100% - (61 * var(--px))), var(--gray-color-light) calc(100% - (48 * var(--px))));
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        pointer-events: none;
    }
    .p-tab__wrapper{
        padding: 0 calc(35 * var(--px));
        position: relative;
        overflow: hidden;
    }
    .p-tab .swiper{
        position: static;
    }
    .p-tab .swiper-slide{
        padding: calc(6 * var(--px));
    }
    .p-tab .swiper-button-prev,
    .p-tab .swiper-button-next{
        width: calc(32 * var(--px));
        height: calc(32 * var(--px));
        top: auto;
        bottom: calc(50% - calc(16 * var(--px)));
        color: #fff;
        border-radius: calc(16 * var(--px));
        background: var(--button-color);
        box-shadow: var(--shadow-base);
        margin: 0;
        z-index: 11;
    }
    .p-tab .swiper-button-prev::after,
    .p-tab .swiper-button-next::after{
        transform: scale(0.35);
    }

    .p-tab .swiper-button-prev{
        left: calc(20 * var(--px));
    }
    .p-tab .swiper-button-next{
        right: calc(20 * var(--px));
    }
    .p-tab__link{
        padding: calc(10 * var(--px)) calc(8 * var(--px));
        min-height: calc(40 * var(--px));
    }
    .p-tab .swiper-button-prev.swiper-button-disabled,
    .p-tab .swiper-button-next.swiper-button-disabled {
        background: var(--gray-color-darker);
    }
    .p-tab.is-disabled .p-tab__wrapper{
        padding: 0;
    }
    .p-tab.is-disabled .swiper-slide{
        width: calc(50% - calc(12 * var(--px)));
        padding: 0;
    }
    .p-tab.is-disabled .swiper-wrapper{
        justify-content: space-between;
    }
}

.p-list{
    margin: calc(40 * var(--px)) auto var(--section-margin-top);
}
.p-list__list{
    display: flex;
    flex-wrap: wrap;
}
.p-list__item{
    width: calc((575 / 1200) * 100%);
    margin: calc((50 / 1200) * 100%) calc((50 / 1200) * 100%) 0 0;
}
.p-list__link{
    display: flex;
    align-items: flex-start;
    box-shadow: var(--shadow-base);
    border-radius: var(--radius-base);
    overflow: hidden;
    padding: calc(30 * var(--px));
}
.p-list__item:nth-child(2n){
    margin-right: 0;
}
.p-list__item:nth-child(-n+2){
    margin-top: 0;
}
.p-list__figure{
    flex-shrink: 0;
}
.p-list__figure-image{
    width: calc(150 * var(--px));
    height: calc(267 * var(--px));
    position: relative;
    border-radius: var(--radius-base);
    overflow: hidden;
}
.p-list__figure-image::before{
    content: '\f04b';
    width: calc(50 * var(--px));
    height: calc(50 * var(--px));
    border-radius: calc(25 * var(--px));
    background: var(--play-color);
    color: #fff;
    font-size: calc(20 * var(--px));
    font-family: var(--icon-font-family);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% - (25 * var(--px)));
    left: calc(50% - (25 * var(--px)));
    z-index: 1;
}
.p-list__figure-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.p-list__info{
    padding-left: calc(25 * var(--px));
}
.p-list__category{
    font-size: var(--fs-small-text);
    line-height: var(--lh-tight);
    display: flex;
}
.p-list__category::before{
    content: '\f07b';
    font-family: var(--icon-font-family);
    font-weight: 600;
    margin-right: calc(7 * var(--px));
    color: var(--button-color);
    flex-shrink: 0;
}
.p-list__title{
    font-size: var(--fs-large-title);
    line-height: var(--lh-tighter);
    font-weight: bold;
    margin-top: calc(13 * var(--px));
}
.p-list__title:first-child{
    margin-top: calc((var(--fs-small-text) * var(--lh-tight)) + (16 * var(--px)));
}
.p-list__tag-list{
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--button-color);
    margin: calc(2 * var(--px)) calc(-3 * var(--px)) calc(-3 * var(--px));
    display: flex;
    flex-wrap: wrap;
}
.p-list__tag-item{
    margin: 0 calc(3 * var(--px));
}
.p-list__tag-item::before{
    content: "#";
}
.p-list__text{
    font-size: var(--fs-shorts-title);
    line-height: var(--lh-tight);
    margin-top: calc(8 * var(--px));
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p-list__note{
    text-align: center;
    line-height: var(--lh-base);
    font-size: var(--fs-base);
}
@media screen and (max-width: 767px){
    .p-list__list{
        display: block;
    }
    .p-list__item,
    .p-list__item:nth-child(2n),
    .p-list__item:nth-child(-n+2){
        width: 100%;
        margin: 0;
        align-items: flex-start;
    }
    .p-list__item:nth-child(n+2){
        margin-top: calc(30 * var(--px));
    }
    .p-list__link{
        padding: calc(15 * var(--px)) calc(20 * var(--px));
    }
    .p-list__figure{
        width: calc(120 * var(--px));
    }
    .p-list__figure-image{
        width: 100%;
        height: calc(213 * var(--px));
    }
    .p-list__figure-image::before{
        content: '\f04b';
        width: calc(40 * var(--px));
        height: calc(40 * var(--px));
        border-radius: calc(20 * var(--px));
        font-size: calc(15 * var(--px));
        top: calc(50% - (20 * var(--px)));
        left: calc(50% - (20 * var(--px)));
    }
    .p-list__info {
        padding-left: calc(20 * var(--px));
    }
    .p-list__title{
        font-size: var(--fs-small-title);
        line-height: var(--lh-tight);
        margin-top: calc(10 * var(--px));
    }
    .p-list__title:first-child{
        margin-top: 0;
    }
    .p-list__tag-list{
        font-size: var(--fs-small-text);
        line-height: var(--lh-tight);
        margin-top: calc(5 * var(--px));
    }
    .p-list__text{
        margin-top: calc(11 * var(--px));
    }
}
@media screen and (max-width: 413px){
    .p-list__note{
        text-align: left;
    }
}