﻿@charset "UTF-8";

/*! autoprefixer grid: no-autoplace */
/* ======== _typography ======== */
@media screen and (min-width: 768px) {
    #archive.main-contents .firstview__title--brand {
        font-size: 2.8rem;
    }

    #archive.main-contents .firstview__title--heading {
        font-size: 4.1rem;
        letter-spacing: 0.01em;
    }

    #archive.main-contents .archive__slider .firstview__title {
        font-size: 1.6rem;
        line-height: 1.5;
    }

    #archive.main-contents .firstview__copy {
        font-size: 1.8rem;
        position: relative;
        margin-bottom: 0;
    }

    #archive.main-contents .firstview__copy::before {
        content: "";
        position: absolute;
        background-image: url(../decoration/archive_deco01.svg);
        background-repeat: no-repeat;
        width: 1.3rem;
        height: 1.1rem;
        top: 0;
        left: 11.5rem;
    }

    #archive.main-contents .firstview__copy::after {
        content: "";
        position: absolute;
        background-image: url(../decoration/archive_deco02.svg);
        background-repeat: no-repeat;
        width: 1.3rem;
        height: 1.1rem;
        top: 0;
        right: 11.8rem;
    }


    #archive.main-contents .firstview__by {
        font-size: 1.4rem;
        line-height: 1.9;
    }
}

@media screen and (max-width: 767px) {
    #archive.main-contents .firstview__title--brand {
        font-size: calc(38 * (100vw / 750));
    }

    #archive.main-contents .firstview__title--heading {
        font-size: calc(49 * (100vw / 750));
    }

    #archive.main-contents .archive__slider .firstview__title {
        font-size: calc(24 * (100vw / 750));
        line-height: 1.5;
    }

    #archive.main-contents .firstview__copy {
        font-size: calc(24 * (100vw / 750));
    }

    #archive.main-contents .firstview__by {
        font-size: calc(21 * (100vw / 750));
    }
}

/* ======== _typography ======== */

/* ======== _layout ======== */
#archive.main-contents dd .archive__slider .swiper-button-next,
#archive.main-contents dd .archive__slider .swiper-button-prev {
    --swiper-navigation-size: 2.8rem;
    top: 42.5%;
}

#archive.main-contents dd .archive__slider .swiper-button-prev {
    left: 0;
}

#archive.main-contents dd .archive__slider .swiper-button-next {
    right: 0;
}

#archive.main-contents dd .archive__slider .swiper-button-prev.slide-previous::after,
#archive.main-contents dd .archive__slider .swiper-button-next.slide-next::after {
    content: none;
}

@media screen and (min-width: 768px) {
    #archive.main-contents dl {
        margin-top: 15rem;
        width: 100%;
        max-width: 100rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        border: 1px solid #c4c4c4;
        padding: 6.8rem 5rem 5.3rem;
    }

    #archive.main-contents dt {
        width: 42.5rem;
        margin-top: 2.2rem;
    }

    #archive.main-contents dt .firstview__title--heading {
        margin-top: 2.4rem;
        margin-bottom: 2.4rem;
    }

    #archive.main-contents dt .firstview__copy {
        margin-top: 0;
    }

    #archive.main-contents dt .firstview__by {
        margin-top: 1.4rem;
    }

    #archive.main-contents .archive__slider-wrap {
        overflow: hidden;
    }

    #archive.main-contents dd .archive__slider {
        position: relative;
        width: 53.6rem;
        column-gap: 4.2rem;
    }

    #archive.main-contents dd .archive__slider .archive-wrapper {
        position: relative;
        max-width: 44rem;
        margin: 0 auto;
    }

    #archive.main-contents dd .archive__slider .archive-slide:not(:last-of-type) {
        margin-right: 4rem;
    }

    #archive.main-contents dd .archive__slider figure {
        width: 20rem;
    }

    #archive.main-contents dd .archive__slider figcaption {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 767px) {
    #archive.main-contents dl {
        width: 100%;
        border-top: 1px solid #c4c4c4;
        border-bottom: 1px solid #c4c4c4;
        flex-wrap: wrap;
        padding-block: calc(54 * (100vw / 750)) calc(62 * (100vw / 750));
        justify-content: center;
        margin-bottom: calc(200 * (100vw / 750));
    }

    #archive.main-contents .firstview__title--heading {
        margin-top: calc(5 * (100vw / 750));
    }

    #archive.main-contents .firstview__copy {
        margin-top: calc(26 * (100vw / 750));
        position: relative;
    }

    #archive.main-contents .firstview__copy::before {
        content: "";
        position: absolute;
        background-image: url(../decoration/archive_deco01.svg);
        background-repeat: no-repeat;
        width: calc(20 * (100vw / 750));
        height: calc(17 * (100vw / 750));
        top: 0;
        left: calc(243 * (100vw / 750));
    }

    #archive.main-contents .firstview__copy::after {
        content: "";
        position: absolute;
        background-image: url(../decoration/archive_deco02.svg);
        background-repeat: no-repeat;
        width: calc(20 * (100vw / 750));
        height: calc(17 * (100vw / 750));
        top: 0;
        right: calc(243 * (100vw / 750));
    }


    #archive.main-contents .firstview__by {
        margin-top: calc(12 * (100vw / 750));
        line-height: 1.8;
    }

    #archive.main-contents .archive__slider-wrap {
        width: 100%;
        max-width: calc(620 * (100vw / 750));
        margin-top: calc(56 * (100vw / 750));
        margin-inline: auto;
        position: relative;
    }

    #archive.main-contents dd .archive__slider .archive-slide:not(:last-of-type) {
        margin-right: calc(20 * (100vw / 750));
    }

    #archive.main-contents dd .archive__slider figure {
        width: calc(300 * (100vw / 750));
    }

    #archive.main-contents dd .archive__slider figcaption {
        margin-top: calc(20 * (100vw / 750));
    }
}

/* ======== _layout ======== */

/* ======== _slidercontent ======== */
#archive .slide-arrow.slick-arrow {
    width: 1.6rem;
    height: 5rem;
    position: absolute;
    top: 29%;
    z-index: 1;
}

#archive .slide-arrow.slick-arrow:hover {
    cursor: pointer;
}

#archive .slide-arrow.prev-arrow.slick-arrow {
    left: -4.8rem;
}

#archive .slide-arrow.next-arrow.slick-arrow {
    right: -4.8rem;
}

@media screen and (max-width: 767px) {
    #archive .slide-arrow.slick-arrow {
        margin: 0;
        display: block !important;
        width: calc(30 * (100vw / 750));
        height: calc(80 * (100vw / 750));
        top: calc(110 * (100vw / 750));
        transform: translateY(0);
    }

    #archive .slide-arrow.prev-arrow.slick-arrow {
        left: calc(-48 * (100vw / 750));
    }

    #archive .slide-arrow.next-arrow.slick-arrow {
        right: calc(-48 * (100vw / 750));
    }
}

/* ======== _slidercontent ======== */

/* ======== _title ======== */
#archive.main-contents .firstview__title--heading {
    letter-spacing: 0em;
}

#archive.main-contents .firstview__by {
    letter-spacing: 0.01em;
    line-height: 1.9;
    font-family: yu-mincho-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

@media screen and (max-width: 767px) {
    #archive.main-contents .firstview__title--heading {
        letter-spacing: 0;
    }
}

#archive.main-contents img {
    width: 100%;
    height: auto;
}

#archive.main-contents .en-text {
    font-family: "linotype-didot", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

#archive.main-contents .firstview__copy {
    font-family: yu-mincho-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

/* ======== _title ======== */