/******************** 変数 ********************/
:root {
    /* small text */
    --fs-xs: 9px;

    /* body */
    --fs-sm: 12px;
    --fs-md: 16px; /* PC:16px / SP:14px */
}

.pc-br {
    display: none;
}
.spring-lp {
    width: 100vw;
    overflow: hidden;
    padding: 140px 0 0;
    margin: 0;
}
.spring {
    width: 86.6%;
    margin: 0 auto;
    background-color: #f7e7e7;
    background-image: url(../images/lp/spring/bg01-pc.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 96% auto;
    padding: 0 0 4rem;
    box-sizing: border-box;
    background-blend-mode: multiply;
}

/* spring header */
.spring h2 {
    width: 87.6%;
    max-width: 570px;
    margin: 0 auto;
}
.event-date {
    width: 79.2%;
    max-width: 515px;
    margin: 2rem auto 0;
}
.spring .title-area {
    padding: 4rem 0 6rem;
}

/* 各ショップエリア */
.shop {
    position: relative;
    margin-bottom: 8rem;
}
.shop:last-child {
    margin-bottom: 0;
}

.shop-image {
    width: 100%;
}
.shop-image-inner {
    width: 92.3%;
}

.shop-info {
    padding: 0 2.5rem;
    margin-top: 2rem;
    box-sizing: border-box;
}

/* 右側 */
.shop-list .shop:nth-child(even) .shop-image {
    position: relative;
    right: -6.7vw;
}
.shop-list .shop:nth-child(even) .shop-info {
    text-align: right;
}
.shop-list .shop:nth-child(even) .shop-image-inner,
.shop-list .shop:nth-child(even) .shop-name,
.shop-list .shop:nth-child(even) .shop-more {
    margin-left: auto;
}

/* 左側 */
.shop-list .shop:nth-child(odd) .shop-image {
    margin-left: -6.7vw;
}
.shop-list .shop:nth-child(odd) .shop-image-inner {
    margin-right: auto;
}

/* ロゴ・画像 */
.shop-name {
    width: 23%;
    max-width: 150px;
    mix-blend-mode: multiply;
    margin-bottom: 1rem;
}
.shop-more {
    width: 40%;
    max-width: 260px;
    margin-top: 2rem;
}

/* コンテンツ内容 */
.shop-meta ,
.tax{
    font-size: var(--fs-xs);
}

.shop-content p,
.product-block h5,
.product-list li{
    font-size: var(--fs-sm);
}

.shop-content h4 {
    font-size: var(--fs-md);
    font-weight: bold;
    margin-bottom: 2rem;
}

.shop-content .lead {
    margin-bottom: 2rem;
}

.product-block {
    margin-top: 2rem;
}

.shop-content p.highlight {
    font-size: var(--fs-md);
    font-weight: bold;
}

.space {
    margin-top: 2rem;
}

.shop-content .no-space {
    margin-bottom: 0;
}

/* valentine */
.valentine {
    width: 86.6%;
    margin: 4rem auto;
    background-color: #efdce7;
    padding: 4rem 0;
}
.valentine h2 {
    width: 80%;
    max-width: 520px;
    padding-left: 2rem;
    margin-bottom: 5rem;
}
.campaign-gift {
    margin-bottom: 2rem;
}
.campaign-gift li {
    font-size: var(--fs-sm);
}
.campaign-gift li span {
    display: block;
}

/* animation */
.fadeInLeft,
.fadeInRight {
    opacity: 0;
}

.fadeInLeft.fadeIn {
    animation: fadeInLeftAnime 1s ease forwards;
}

.fadeInRight.fadeIn {
    animation: fadeInRightAnime 1s ease forwards;
}

@keyframes fadeInLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**************************************** PC responsive **********************************/
@media screen and (min-width: 769px) {
    :root {
        /* small text */
        --fs-xs: 12px;

        /* body */
        --fs-sm: 14px;
        --fs-md: 20px;
        /* PC:16px / SP:14px */
    }

    .pc-br {
        display: block;
    }
    .sp-br {
        display: none;
    }

    main {
        width: 100vw;
        overflow-x: hidden;
    }


    .spring-lp {
        min-width: 1500px;
        width: 100vw;
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 0;
    }

    .spring {
        width: 93.3%;
        min-width: 1400px;
        background-image: url(../images/lp/spring/bg01-pc.png),url(../images/lp/spring/bg02-pc.png);
        background-repeat: no-repeat,no-repeat;
        background-position: top right,bottom 3rem right 2rem;
        background-size: 96% auto,55% auto;
        background-blend-mode: multiply,multiply;
        padding: 0 0 7rem;
    }

    .spring h2 {
        width: 1070px;
        max-width: 1070px;
        margin: 0 auto;
    }

    .event-date {
        width: 515px;
        margin: 4rem auto 0;
    }

    /* 各ショップエリア */
    .shop {
        margin-bottom: 0;
        --overlap: 0px;
        margin-top: calc(-1 * var(--overlap));
    }
    .shop-info {
        margin-top: 0;
    }

    /* スマホ用レイアウトクリア */
    .shop-list .shop:nth-child(even) .shop-image {
        right: 0;
    }
    .shop-list .shop:nth-child(even) .shop-image-inner {
        margin-left: 0;
    }
    .shop-list .shop:nth-child(odd) .shop-image {
        margin: 0;
    }
    .shop-list .shop:nth-child(odd) .shop-image-inner {
        margin-right: 0;
    }

    /* 右側 */
    .shop-list {
        width: 1500px;
        margin: 0 auto;
    }
    .shop{
        margin-left: -3.35vw;
        margin-right: -3.35vw;
    }

    /* ロゴ・画像 */
    .shop-name {
        width: 150px;
    }

    .shop-more {
        width: 180px;
        max-width: 180px;
        margin: 2rem 0 150px;
    }

    /* shop 画像 */
    .shop-image {
        max-width: 600px;
    }
    .shop-image-inner {
        width: 100%;
    }

    /* ショップ PCレイアウト */
    .shop-list .shop {
        display: grid;
        grid-template-columns: minmax(300px, 600px) 1fr;
        grid-template-areas: "image info";
    }
    .shop:nth-child(even) {
        grid-template-columns: 1fr minmax(300px, 600px);
        grid-template-areas: "info image";
        justify-self: end;
    }
    .shop-image {
        grid-area: image;
    }
    .shop-info {
        grid-area: info;
        min-width: 800px;
    }

    /* valentine */
    .valentine {
        width: 93.3%;
        min-width: 1400px;
        padding: 8rem 0;
    }
    .valentine h2 {
        width: 751px;
        max-width: 751px;
        padding-left: 0;
        margin: 0 auto 7rem;
    }
}