/* ===== 季節のペアリング（一覧ページ） ===== */

.seasonal-pairing {
    background-color: #FAF6EB;
    color: #000B20;
}

/* ===== スクロール表示アニメーション（一覧・各季節の詳細ページ共通） =====
   対象要素に「js-fade-in」クラスを付けると、画面内に入ったタイミングでふわっと表示される。
   複数要素を少しずらして表示したい場合は「js-fade-in--delay1」〜「js-fade-in--delay3」を併用する。
   今後 spring / autumn / winter の詳細ページを追加する際もそのまま使い回せる。 */
.js-fade-in {
    opacity: 0;
    transform: translateY(24rem);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-fade-in.is-inview {
    opacity: 1;
    transform: translateY(0);
}
.js-fade-in--delay1.is-inview {
    transition-delay: 0.15s;
}
.js-fade-in--delay2.is-inview {
    transition-delay: 0.3s;
}
.js-fade-in--delay3.is-inview {
    transition-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
    .js-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 見出し上の英字ラベル（SEASONAL PAIRING / CONCEPT / THREE SEASONS / ABOUT） */
.seasonal-pairing__heading-en {
    color: #8F7B45;
    font-family: "Open Sans";
    font-size: 14rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2.8px;
    margin-bottom: 12rem;
    width: fit-content;
}

/* --- hero --- */
.seasonal-pairing__hero {
    padding-bottom: 40rem;
}
.seasonal-pairing__hero-main {
    position: relative;
    margin-bottom: 40rem;
}
.seasonal-pairing__hero-visual-img {
    display: block;
    width: 100%;
}
.seasonal-pairing__hero-text {
    position: absolute;
    left: 20rem;
    bottom: 0;
    height: fit-content;
}
.seasonal-pairing__hero-text-title {
    font-family: "Hiragino Mincho ProN";
    font-size: 32rem;
    font-weight: 300;
    letter-spacing: 3.2px;
    margin-bottom: 8rem;
}
.seasonal-pairing__hero-text-sub {
    font-family: "Hiragino Mincho ProN";
    font-size: 16rem;
    font-weight: 300;
    letter-spacing: 1.6px;
}
.seasonal-pairing__hero-nav-lead {
    font-family: "Hiragino Sans";
    font-size: 18rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 1.08px;
    margin-bottom: 40rem;
    padding: 0 20rem;
}
.seasonal-pairing__hero-nav-list {
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    gap: 24rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 20rem;
}
.seasonal-pairing__hero-nav-list::-webkit-scrollbar {
    display: none;
}
.seasonal-pairing__hero-nav-item {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8rem;
    flex-shrink: 0;
}
.seasonal-pairing__hero-nav-item::before {
    content: "";
    display: block;
    background-image: url(../img/seasonal-pairing/anchor-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 32rem;
    height: 32rem;
}
.seasonal-pairing__hero-nav-item--inactive::before {
    display: none;
}
.seasonal-pairing__hero-nav-item--inactive {
    pointer-events: none;
}
.seasonal-pairing__hero-nav-link {
    display: block;
    color: #8F7B45;
    font-family: "Hiragino Sans";
    font-size: 15rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    padding: 12rem 0;
    border-bottom: 1px solid #8F7B45;
    transition: opacity 0.3s ease;
}
.seasonal-pairing__hero-nav-link:hover {
    opacity: 0.65;
}
.seasonal-pairing__hero-nav-item--inactive .seasonal-pairing__hero-nav-link {
    color: #746F6E;
    border-bottom: none;
}
.seasonal-pairing__hero-nav-sticky {
    width: 100%;
    background-color: #FAF6EB;
}
.seasonal-pairing__hero-nav-sticky.is-fixed {
    position: fixed;
    top: 54rem;
    left: 0;
    z-index: 500;
    box-shadow: 0 4rem 10rem 0 rgba(43, 45, 57, 0.06);
}

@media screen and (min-width: 768px) {
    .seasonal-pairing__hero {
        padding-bottom: 40rem;
    }
    .seasonal-pairing__hero-main {
        max-width: 1800rem;
        margin: 0 auto 60px;
    }
    .seasonal-pairing__hero-text {
        left: 60rem;
        bottom: 0;
        top: 0;
        margin: auto;
    }
    .seasonal-pairing__hero-text-title {
        font-size: 52px;
        letter-spacing: 5.2px;
    }
    .seasonal-pairing__hero-text-sub {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .seasonal-pairing__hero-nav {
        max-width: 1240rem;
        margin: 0 auto;
    }
    .seasonal-pairing__hero-nav-lead {
        padding: 0;
    }
    .seasonal-pairing__hero-nav-list {
        padding: 0;
        max-width: 1240rem;
        margin: 0 auto;
    }
    .seasonal-pairing__hero-nav-item {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 8rem;
        flex-shrink: 0;
    }
    .seasonal-pairing__hero-nav-item::before {
        content: "";
        display: block;
        background-image: url(../img/seasonal-pairing/anchor-icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 32rem;
        height: 32rem;
    }
    .seasonal-pairing__hero-nav-item--inactive::before {
        display: none;
    }
    .seasonal-pairing__hero-nav-item--inactive {
        pointer-events: none;
    }
    .seasonal-pairing__hero-nav-link {
        display: block;
        color: #8F7B45;
        font-family: "Hiragino Sans";
        font-size: 15rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 1.5px;
        padding: 12rem 0;
        border-bottom: 1px solid #8F7B45;
    }
    .seasonal-pairing__hero-nav-item--inactive .seasonal-pairing__hero-nav-link {
        color: #746F6E;
        border-bottom: none;
    }
}

/* --- concept --- */
.seasonal-pairing__concept {
    padding: 40rem 0;
    background-image: url(../img/seasonal-pairing/concept-bg_sp.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #FFF;
}
.seasonal-pairing__concept-inner {
    width: 100%;
    max-width: 1230rem;
    padding: 0 15rem;
    margin: 0 auto;
}
.seasonal-pairing__concept-heading {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.seasonal-pairing__concept-heading-title {
    text-align: center;
    font-family: "Hiragino Mincho ProN";
    font-size: 24rem;
    font-weight: 300;
    letter-spacing: 2.4px;
}
.seasonal-pairing__concept-text {
    text-align: center;
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.96px;
}
.seasonal-pairing__concept .seasonal-pairing__heading-en {
    text-align: center;
}
@media screen and (min-width: 768px) {
    .seasonal-pairing__concept {
        padding: 52px 0 40px;
        background-image: url(../img/seasonal-pairing/concept-bg_pc.png);
    }
    .seasonal-pairing__concept-heading-title {
        font-size: 28px;
        letter-spacing: 2.8px;
    }
    .seasonal-pairing__concept-text {
        font-size: 16px;
    }
}

/* --- seasons --- */
.seasonal-pairing__seasons {
    padding: 60rem 0;
}
.seasonal-pairing__seasons-inner {
    width: 100%;
    max-width: 1230rem;
    padding: 0 15rem;
    margin: 0 auto;
}
.seasonal-pairing__seasons-heading {
    margin-bottom: 20rem;
}
.seasonal-pairing__seasons-heading-title {
    font-family: "Hiragino Mincho ProN";
    font-size: 24rem;
    font-weight: 300;
    letter-spacing: 2.4px;
}
.seasonal-pairing__seasons-list {
    display: flex;
    flex-direction: column;
    gap: 30rem;
}
.seasonal-pairing__seasons-item {
    border-radius: 10px;
    background: #FFF;
    overflow: hidden;
}
.seasonal-pairing__seasons-item-visual {
    position: relative;
}
.seasonal-pairing__seasons-item--inactive .seasonal-pairing__seasons-item-visual::before {
    content: "";
    display: block;
    background: rgba(255, 255, 255, 0.50);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
.seasonal-pairing__seasons-item--inactive .seasonal-pairing__seasons-item-visual::after {
    content: "COMING SOON";
    display: block;
    color: #FFF;
    font-family: "Open Sans";
    font-size: 20rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}
.seasonal-pairing__seasons-item-visual-img {
    display: block;
    width: 100%;
}
.seasonal-pairing__seasons-item-visual-label {
    color: #F5D376;
    font-family: "Open Sans";
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.2px;
    border-radius: 4px;
    background: #05624E;
    width: fit-content;
    padding: 6rem 12rem;
    position: absolute;
    left: 12rem;
    top: 12rem;
}
.seasonal-pairing__seasons-item--autumn .seasonal-pairing__seasons-item-visual-label {
    background: #5A3407;
}
.seasonal-pairing__seasons-item--winter .seasonal-pairing__seasons-item-visual-label {
    background: #0E5576;
}
.seasonal-pairing__seasons-item-body {
    padding: 20rem 24rem 40rem;
}
.seasonal-pairing__seasons-item-body-season {
    color: #05624E;
    font-family: "Hiragino Mincho ProN";
    font-size: 16rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 1.6px;
    margin-bottom: 12rem;
}
.seasonal-pairing__seasons-item-body-season-en {
    color: #05624E;
    font-family: "Open Sans";
    font-size: 12rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.2px;
}
.seasonal-pairing__seasons-item-body-heading {
    display: flex;
    flex-direction: column;
    gap: 8rem;
    margin-bottom: 20rem;
}
.seasonal-pairing__seasons-item-body-heading-title {
    font-family: "Hiragino Mincho ProN";
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1.2px;
}
.seasonal-pairing__seasons-item--inactive .seasonal-pairing__seasons-item-body-heading-title {
    color: #746F6E;
}
.seasonal-pairing__seasons-item-body-heading-name {
    color: #001130;
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.84px;
    display: flex;
    gap: 8rem;
}
.seasonal-pairing__seasons-item-body-heading-name-role {
    color: #5D677A;
    font-family: "Hiragino Sans";
    font-size: 10rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.6px;
}
.seasonal-pairing__seasons-item-body-text {
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.84px;
    margin-bottom: 20rem;
}
.seasonal-pairing__seasons-item-body-link {
    color: #8F7B45;
    font-family: "Hiragino Sans";
    font-size: 15rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 12rem;
    width: fit-content;
    margin-left: auto;
    transition: opacity 0.3s ease;
}
.seasonal-pairing__seasons-item-body-link:hover {
    opacity: 0.65;
}
.seasonal-pairing__seasons-item-body-link::after {
    content: "";
    display: block;
    background-image: url(../img/seasonal-pairing/anchor-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 32rem;
    height: 32rem;
    transform: rotate(-90deg);
    justify-content: flex-end;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.seasonal-pairing__seasons-item-body-link:hover::after {
    transform: rotate(-90deg) scale(1.15);
}
.seasonal-pairing__seasons-item-body-link p {
    border-bottom: 1px solid #8F7B45;
    width: fit-content;
    padding: 14rem 0;
}
.seasonal-pairing__seasons-item-body-notice {
    text-align: center;
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.84px;
}
@media screen and (min-width: 768px) {
    .seasonal-pairing__seasons {
        padding: 80px 0;
    }
    .seasonal-pairing__seasons-heading {
        margin-bottom: 40rem;
    }
    .seasonal-pairing__seasons-heading-title {
        font-size: 28px;
        letter-spacing: 2.8px;
    }
    .seasonal-pairing__seasons-list {
        flex-wrap: wrap;
        flex-direction: row;
    }
    .seasonal-pairing__seasons-item {
        width: calc( ( 100% - 30px * 2 ) / 3 );
    }
    .seasonal-pairing__seasons-item-body-season {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .seasonal-pairing__seasons-item-body-season-en {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
    .seasonal-pairing__seasons-item-body-heading-title {
        font-size: 24px;
        letter-spacing: 1.44px;
    }
}

/* --- about --- */
.seasonal-pairing__about {
    padding: 60rem 0;
}
.seasonal-pairing__about-inner {
    width: 100%;
    max-width: 1200rem;
    margin: 0 auto;
}
.seasonal-pairing__about-visual {
    width: 90%;
    max-width: 646rem;
}
.seasonal-pairing__about-visual-img {
    display: block;
    width: 100%;
    box-shadow: 20px 16px 0 0 #EBEEED;
}
.seasonal-pairing__about-body {
    background: #FFF;
    padding: 32rem 20rem;
    width: 90%;
    max-width: 490rem;
    margin-left: auto;
    position: relative;
    top: -34rem;
}
.seasonal-pairing__about-body-heading {
    margin-bottom: 20rem;
}
.seasonal-pairing__about-body-heading-title {
    font-size: 18rem;
    letter-spacing: 1.8px;
}
.seasonal-pairing__about-body-text {
    font-family: "Hiragino Sans";
    font-size: 15rem;
    line-height: 1.7;
    letter-spacing: 0.9px;
    margin-bottom: 8rem;
}
@media screen and (min-width: 768px) {
    .seasonal-pairing__about {
        padding: 80px 0;
    }
    .seasonal-pairing__about-inner {
        display: flex;
        align-items: flex-end;
        padding: 0 4%;
    }
    .seasonal-pairing__about-visual {
        width: 60%;
    }
    .seasonal-pairing__about-body {
        padding: 32px 40px;
        top: 0;
        left: -80px;
        margin: 0;
        width: 40%;
    }

    .seasonal-pairing_single-closing__shop-detail-info .common-button__link:hover {
        color: #8F7B45;
        background-color: #FFF;
        border: 1px solid #8F7B45;
    }
    .seasonal-pairing_single-related__reel .common-button__link:hover {
        background-color: #8F7B45;
    }
}