@charset "UTF-8";
    /* ===========================
    article__header
    ============================== */
    .article__header__img__PC {
        display: none;
    }

    .collection__contents {
        max-width: 375px;
        margin: 0 auto;
    }

    /* article__header PC */
    @media screen and (min-width: 769px) {
        body {
            position: relative;
        }

        .article__header__img__SP {
            display: none;
        }

        .article__header__img__PC {
            position: relative;
            display: block;
            z-index: -1;
        }

        .article__header {
            position: sticky;
            top: 0;
            padding:0 5.5% 0 0;
            height: 100%;
            flex-grow: 1;
            max-width: calc(100% -  57%);
        }

        .separate {
            display: flex;
        }

        .collection__contents {
            padding-right: 5.5%;
            flex-grow: 1;
            max-width: 860px;
        }

    }

    /* ===========================
    breadcrumbs
    ============================== */
    .breadcrumbs {
        display: flex;
        padding: 30px 5.3% 0 5.3%;
    }

    .breadcrumbs__contents {
        display: flex;
    }

    .section--Top {
        font-family: "Noto Serif";
        font-size: 1.2rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        display: flex;
        align-items: center;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .section--Top:hover {
        opacity: 0.6;
    }

    .section--Collection {
        font-family: "Noto Serif JP";
        font-size: 1.2rem;
        font-weight: 300;
        line-height: 1.5;
        margin-left: 15px;
        position: relative;
        letter-spacing: 0.1em;
        display: flex;
        align-items: center;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .section--Collection:hover {
        opacity: 0.6;
    }

    .section--Collection::before {
        content: '';
        position: absolute;
        display: inline-block;
        width: 5px;
        height: 10px;
        background-image: url(..//images/greaterthan-sign.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .section--Collection::after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(..//images/plus.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        transition:transform 0.3s;
    }

    .breadcrumbs.active .breadcrumbs__contents .section--Collection::after {
        content: '';
        position: absolute;
        display: inline-block;
        width: 10px;
        height: 10px;
        background-image: url(..//images/minus.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        transition:transform 0.3s;
    }


    /* breadcrumbs PC */
    @media screen and (min-width: 769px) {
        .breadcrumbs {
            padding:40px 0 0 0;
        }

        .section--Top {
            font-size: 1.6rem;
        }

        .section--Collection {
            font-size: 1.6rem;
        }
    }

    /* ===========================
    accordion
    ============================== */
    .accordion {
        max-width: 375px;
    }

    .accordion .story {
        display: none;
        padding: 40px 5.3% 50px 5.3%;
        font-size: 1.2rem;
    }

    .text {
        margin-top: 2.4rem;
    }

    .text:first-of-type {
        margin-top: 0;
    }

    .text:nth-of-type(3),
    .text:nth-of-type(4),
    .text:nth-of-type(5) {
        text-indent: 1em;
    }

    /* accordion PC */
     @media screen and (min-width: 769px) {
        .accordion {
            max-width: 860px;
        }

        .accordion .story {
            display: none;
            padding: 60px 0 20px 0;
            font-size: 1.4rem;
        }

        .text {
            margin-top: 2.8rem;
        }
    
     }

    /* ===========================
    collection
    ============================== */
    .collection__img__contents:first-of-type {
        padding: 70px 39.4% 0 0;
    }

    .collection__img__contents:nth-of-type(2) {
        padding: 50px 0 0 40.2%;
    }

    .collection__img__contents:nth-of-type(3) {
        padding: 100px 36.5% 0 5.3%;
    }

    .collection__img__contents:nth-of-type(4) {
        padding: 70px 5.3% 0 41.3%;
    }

    .collection__img__contents:nth-of-type(5) {
        padding: 70px 41.3% 0 5.3%;
    }

    .collection__img__contents:nth-of-type(6) {
        padding: 100px 16.2% 0 16.2%;
    }

    .collection__img__contents:nth-of-type(7) {
        padding-top: 100px;
    }

    .collection__img__PC {
        display: none;
    }

    .credit {
        display: flex;
        flex-wrap: wrap;
        width: 170px;
        font-size: 0.9rem;
        margin-left: auto;
        margin-top: 20px;
        padding-right: 5.3%;
        font-family: "Noto Serif";
    }

    .credit__model, .credit__photo {
        width: 25%;
        font-weight: 500;
    }

    .credit__name {
        width: 75%;
    }

    .credit__name span {
        margin-right: 5px;
        font-weight: 500;
    }

    .credit__photo, .credit__name:last-of-type {
        margin-top: 10px;
    }

    /* accordion PC */
    @media screen and (min-width: 769px) {
        .collection__img__SP {
            display: none;
        }

        .collection__img__PC {
            display: block;
        }

        .collection__img__contents:first-of-type {
            padding: 100px 38.7% 0 0;
        }

        .collection__img__contents:nth-of-type(2) {
            padding: 100px 0 0 40.7%;
        }

        .collection__img__contents:nth-of-type(3) {
            padding: 200px 36.8% 0 0;
        }

        .collection__img__contents:nth-of-type(4) {
            padding: 140px 0 0 44.1%;
        }

        .collection__img__contents:nth-of-type(5) {
            padding: 140px 44.1% 0 0;
        }

        .collection__img__contents:nth-of-type(6) {
            padding: 200px 28.3% 0 28.3%;
        }

        .collection__img__contents:nth-of-type(7) {
            padding: 200px 14.5% 0 15.4%;
        }

        .credit {
            padding-right: 0;
        }
    }

    /* ===========================
    article footer
    ============================== */
    .article__footer {
        max-width: 375px;
        margin: 0 auto;
        padding: 220px 5.3% 100px 5.3%;
        position: relative;
    }

    .article__footer::before {
        content: '';
        display: block;
        width: 60px;
        height: 0.5px;
        background-color: #919191;
        position: absolute;
        left: calc(50% - 30px);
        top: 120px;
    }

    .collection__btn {
        display: block;
        width: 261px;
        height: 39px;
        font-size: 1.2rem;
        line-height: 1.5;
        font-family: "Noto Serif JP";
        color: var(--primary-black);
        transition: .3s;
    }

    .collection__btn:hover {
        transform: translateY(2px);
    }

    .collection__btn:first-of-type {
        margin-left: 27px;
    }

    .collection__btn:last-of-type {
        text-align: right;
        width: 215px;
        height: 39px;
        margin: 40px 9px 0 auto;
    }

    .collection__btn .Theme {
        margin-left: 1.2rem;
    }

    .collection__btn:last-of-type .Theme {
        margin-right: 21px;
    }

    .arrow-left {
        display: inline-block;
        vertical-align: middle;
        color: #919191;
        line-height: 1;
        position: relative;
        width: 252px;
        height: 0.5px;
        background: currentColor;
        margin-top: -25px;
        left: -19px;
      }

    .arrow-left::before {
        content: '';
        width: 0.35em;
        height: 0.35em;
        border: 0.5px solid currentColor;
        border-right: 0;
        border-top: 0;
        color: #919191;
        transform: rotate(45deg);
        transform-origin: top right;
        position: absolute;
        left: 1px;
        top: 122%;
        box-sizing: border-box;
    }

    .arrow-left::after {
        content: '';
        display: inline-block;
        width: 19px;
        height: 19px;
        color: #919191;
        border-radius: 50%;
        border: 0.5px solid;
        position: absolute;
        left: -2.5%;
        top: -9px;
    }

    .arrow-right {
        width: 198px;
    }

    .arrow-right::after {
        left: 95%;
    }

    /* article footer PC */
    @media screen and (min-width: 769px) {
        .article__footer {
            max-width: 860px;
            padding: 220px 0 100px 0;
            margin: 0 5.5% 0 43%;
        }

        .article__footer::before {
            width: 120px;
            position: absolute;
            left: calc(50% - 60px);
            top: 120px;
        }

        .collection__btn__contents {
            max-width: 500px;
            margin: 0 auto;
        }

        .collection__btn {
            font-size: 1.5rem;
            width: 335px;
            height: 32px;
        }

        .arrow-left {
            width: 303px;
        }

        .collection__btn:last-of-type {
            width: 251px;
            height: 32px;
        }

        .arrow-right {
            width: 235px;
        }
    }

   /* ===========================
    scroll btn
    ============================== */
    .scroll_btn {
        display: none;
    }

    /* scroll btn PC */
    @media screen and (min-width: 769px) {
        .scroll_btn {
            display: block;
            width: 17px;
            height: 45px;
            position: fixed;
            bottom: 60px;
            right: 2%;
            z-index: 10;
        }

        .scroll_btn::after {
            content: '';
            display: inline-block;
            width: 0.8px;
            height: 60px;
            color: #919191;
            border-radius: 50%;
            border: 0.5px solid;
            position: absolute;
            left: 40%;
            bottom: -65px;
        }

        .scroll_btn a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            font-family: "Noto Serif";
            font-size: 1.4rem;
            writing-mode: vertical-rl;
        }
    }