@charset "utf-8";

.swiper {
    width: 100%;
}

.p-detailSlider {}

.p-detailSlider__inner {
    box-sizing: border-box;
    inline-size: min(100%, 1440px);
    padding-inline: 16px;
    margin-inline: auto;
}

@media (1000px < width <=1440px) {
    .p-detailSlider__inner {
        padding-inline: 0;
        inline-size: 100%;
    }
}

@media (1440px < width) {
    .p-detailSlider__inner {
        padding-inline: 40px;
    }
}

.p-detailSlider__contents {
    display: grid;
    align-items: start;
    grid-template-areas:
        "title"
        "main"
        "details"
        "description"
        "links"
        "thumb";
}

@media (width > 1000px) {
    .p-detailSlider__contents {
        column-gap: 40px;
        grid-template-columns: 884fr 357fr;
        grid-template-areas:
            "main title"
            "main details"
            "main description"
            "main links"
            "thumb thumb";
    }
}

@media (1000px < width <=1440px) {
    .p-detailSlider__contents {
        grid-template-columns: 884fr 516fr;
    }
}

.p-detailSlider__title {
    grid-area: title;
    font-family: Hiragino Mincho Pro;
    font-weight: 300;
    font-size: 24px;
    line-height: 160%;
    letter-spacing: 0%;
    vertical-align: middle;
    margin: 0;
}

@media (width > 1000px) {
    .p-detailSlider__title {
        font-family: Hiragino Mincho Pro;
        font-weight: 300;
        font-size: 32px;
        line-height: 160%;
        letter-spacing: 0%;
        vertical-align: middle;
    }
}

@media (1000px < width <=1440px) {

    .p-detailSlider__title,
    .p-detailSlider__details,
    .p-detailSlider__description,
    .p-detailSlider__links {
        margin-inline-end: calc(159 / 1440 * 100vw);
    }
}

.p-detailSlider__mainThumbnail {
    grid-area: main;
    inline-size: 100vw !important;
    margin-inline-start: calc(50% - 50vw);
    aspect-ratio: 375/317;
}

@media (width > 1000px) {
    .p-detailSlider__mainThumbnail {
        inline-size: 100% !important;
        max-inline-size: 884px;
        margin-inline-start: 0;
        aspect-ratio: 884/573;
    }
}

.p-detailSlider__mainThumbnail__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.p-detailSlider__details {
    grid-area: details;
    font-family: Noto Sans JP;
    font-weight: 500;
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.p-detailSlider__description {
    grid-area: description;
    font-family: Noto Sans JP;
    font-weight: 300;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.links {
    grid-area: links;
}

.p-detailSlider__subThumbnail {
    grid-area: thumb;
    position: relative;
    inline-size: min(100%, 1060px);
    margin-block-start: 48px;

    /* padding-block-end: 50px; */

    @media (width > 1000px) {
        padding-inline: 100px;
    }
}


.p-detailSlider__subThumbnail .swiper-wrapper {

    /* padding-inline: 30px; */
    @media (width > 1000px) {
        overflow-x: hidden;
    }
}

.p-detailSlider__mainThumbnail .swiper-slide {
    transition: opacity 0.3s ease-in-out !important;
}

/* サムネ */
.p-detailSlider__subThumbnail .swiper-slide {
    /* opacity: 0.5; */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    aspect-ratio: 343/231;
}

.p-detailSlider__subThumbnail .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #000;
}

.p-detailSlider__subThumbnail .thumb-pagination {
    position: static !important;
}

/* Prev/Nextをサムネ両端に配置 */
.thumb-prev,
.thumb-next {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #EEE;
    color: #fff;
    border: none;
    /* padding: 6px 12px; */
    cursor: pointer;
}

.thumb-prev {
    mask-repeat: no-repeat;
    left: 8px;
    mask-position: left;
    mask-image: url("data: image/svg+xml, %3Csvg width='15' height='25' viewBox='0 0 15 25' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M13.7383 24.3674L0.738281 12.3674L13.7383 0.367431' stroke='%237B7B7B' /%3E%3C/svg%3E%0A");
}

.thumb-next {
    mask-repeat: no-repeat;
    right: 8px;
    mask-position: right;
    mask-image: url("data: image/svg+xml, %3Csvg width='15' height='25' viewBox='0 0 15 25' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0.339844 24.3674L13.3398 12.3674L0.339844 0.367431' stroke='%237B7B7B' /%3E%3C/svg%3E");
}

/* ドットナビ */
.thumb-pagination {
    text-align: center;
    margin-top: 8px;
}

.thumb-pagination .swiper-pagination-bullet {
    background: #000;
    opacity: 0.5;
}

.thumb-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (width <=1000px) {
    .p-detailSlider__title {
        margin-block-end: 16px;
    }

    .p-detailSlider__details {
        margin-block-start: 16px;
    }

    .p-detailSlider__description {
        margin-block-start: 10px;
    }

    .p-detailSlider__links {
        margin-block-start: 10px;
    }
}

@media (1000px < width < 1440px) {
    .p-detailSlider__title {
        margin-block-end: 16px;
    }

    .p-detailSlider__details {
        margin-block-start: 16px;
    }

    .p-detailSlider__description {
        margin-block-start: 10px;
    }

    .p-detailSlider__links {
        margin-block-start: 10px;
    }
}