@charset "utf-8";

/*----------------------------------------------------------------------
* index
--------------------------------------------------------------------- */
/* mv */
.mv {
    position: relative;
}
.mv-title {
    width: 52.2rem;
    margin: 0 auto;
    padding: 3.5rem 0;
}

/* bubble */
.bubble {
    position: absolute;
    width: var(--size, 10rem);
    aspect-ratio: 1 / 1;
    z-index: var(--z, 1);
}

.bubble-float {
    width: 100%;
    height: 100%;
    animation-name: bubbleFloat;
    animation-duration: var(--float-duration, 8s);
    animation-delay: var(--float-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.bubble-scale {
    width: 100%;
    height: 100%;
    animation-name: bubbleScale;
    animation-duration: var(--scale-duration, 8s);
    animation-delay: var(--scale-delay, 0s);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: center;
}

.bubble-switcher {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
}

.bubble-switcher img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    will-change: opacity;
}

.bubble-switcher img:nth-child(1) {
    animation: imageFade01 24s ease-in-out infinite;
    animation-delay: var(--image-delay, 0s);
}

.bubble-switcher img:nth-child(2) {
    animation: imageFade02 24s ease-in-out infinite;
    animation-delay: var(--image-delay, 0s);
}

.bubble-switcher img:nth-child(3) {
    animation: imageFade03 24s ease-in-out infinite;
    animation-delay: var(--image-delay, 0s);
}

/*
2枚切り替え用。
.bubble-switcher--2 を付けた要素だけ、下記アニメーションを使います。
*/
.bubble-switcher--2 img:nth-child(1) {
    animation: imageFade2-01 16s ease-in-out infinite;
    animation-delay: var(--image-delay, 0s);
}

.bubble-switcher--2 img:nth-child(2) {
    animation: imageFade2-02 16s ease-in-out infinite;
    animation-delay: var(--image-delay, 0s);
}

@keyframes bubbleFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(var(--float-y, -20px));
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bubbleScale {
    0% {
        transform: scale(var(--scale-min, .95));
    }
    50% {
        transform: scale(var(--scale-max, 1.08));
    }
    100% {
        transform: scale(var(--scale-min, .95));
    }
}

/*
    3枚切り替え用。
    12秒周期なので、約1秒かけてフェードします。
    */
@keyframes imageFade01 {
    0%,
    25% {
        opacity: 1;
    }
    33.333%,
    91.666% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imageFade02 {
    0%,
    25% {
        opacity: 0;
    }
    33.333%,
    58.333% {
        opacity: 1;
    }
    66.666%,
    100% {
        opacity: 0;
    }
}

@keyframes imageFade03 {
    0%,
    58.333% {
        opacity: 0;
    }
    66.666%,
    91.666% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*
2枚切り替え用。
8秒周期（1枚あたり約4秒）、約1秒かけてフェードします。
*/
@keyframes imageFade2-01 {
    0%,
    37.5% {
        opacity: 1;
    }
    50%,
    87.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imageFade2-02 {
    0%,
    37.5% {
        opacity: 0;
    }
    50%,
    87.5% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*
    6カ所をランダム風に見せるための個別設定。
    完全な乱数ではなく、duration、delay、移動量、拡大率をずらしています。
    */
.bubble.bubble-01 {
    top: 10rem;
    left: 1rem;
    --size: 10rem;
    --float-y: -2rem;
    /* --float-duration: 10s; */
    --float-delay: -1.1s;
    /* --scale-duration: 8.8s; */
    --scale-delay: -.6s;
    --scale-min: .78;
    --scale-max: 1.02;
    --image-delay: 0s;
    --z: 2;
}
.bubble.bubble-01 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(137, 198, 229);
}

.bubble.bubble-02 {
    top: 30rem;
    left: 1rem;
    --size: 11rem;
    --float-y: -2.8rem;
    /* --float-duration: 12.8s; */
    --float-delay: -2.4s;
    /* --scale-duration: 10s; */
    --scale-delay: -1.3s;
    --scale-min: .80;
    --scale-max: 1.25;
    --image-delay: -2s;
    --z: 3;
}
.bubble.bubble-02 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(252, 170, 200);
}

.bubble.bubble-03 {
    top: 59rem;
    left: 1rem;
    --size: 10rem;
    --float-y: -1.4rem;
    /* --float-duration: 9.8s; */
    --float-delay: -.3s;
    /* --scale-duration: 7.6s; */
    --scale-delay: -2.1s;
    --scale-min: .78;
    --scale-max: 1.14;
    --image-delay: -4s;
    --z: 1;
}
.bubble.bubble-03 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(137, 198, 229);
}

.bubble.bubble-04 {
    top: 10rem;
    right: 1rem;
    --size: 11rem;
    --float-y: -2.2rem;
    /* --float-duration: 14.2s; */
    --float-delay: -3.5s;
    /* --scale-duration: 9.4s; */
    --scale-delay: -.9s;
    --scale-min: .78;
    --scale-max: 1.25;
    --image-delay: -6s;
    --z: 4;
}
.bubble.bubble-04 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(180, 225, 150);
}

.bubble.bubble-05 {
    top: 31rem;
    right: 1rem;
    --size: 10rem;
    --float-y: -3.2rem;
    /* --float-duration: 11.8s; */
    --float-delay: -1.7s;
    /* --scale-duration: 11.2s; */
    --scale-delay: -2.8s;
    --scale-min: .80;
    --scale-max: 1.20;
    --image-delay: -8s;
    --z: 2;
}
.bubble.bubble-05 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(252, 170, 200);
}

.bubble.bubble-06 {
    top: 60rem;
    right: 1rem;
    --size: 10rem;
    --float-y: -2.0rem;
    /* --float-duration: 12.6s; */
    --float-delay: -4.2s;
    /* --scale-duration: 8.2s; */
    --scale-delay: -1.6s;
    --scale-min: .78;
    --scale-max: 1.14;
    --image-delay: -10s;
    --z: 3;
}
.bubble.bubble-06 .bubble-switcher {
    box-shadow: 0 0 1.2rem rgb(180, 225, 150);
}


/* lead */
.lead {
    padding: 0 0 5rem;
    text-align: center;
}
.lead p {
    font-size: 2.8rem;
    line-height: 1.9;
    letter-spacing: 0.06em;
}
.lead p + p {
    margin-top: 3rem;
}

/* btn-campaign */
.btn-campaign {
    max-width: 60rem;
    margin: 0 auto 5rem;
}


/* shop-area
========================================= */
/* category-nav */
.category-nav {
    display: flex;
    gap: 1.8rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #6b6b6b;
}
.category-nav li {
    flex: 1;
}
.category-nav li a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 9.5rem;
    font-size: 2.7rem;
    line-height: 1.2;
    background-color: #fff;
    border-radius: 1rem;
}
.category-nav li:nth-child(1) a {
    border: 1px solid #ffbbe2;
    box-shadow: 0 0 1rem rgba(255, 211, 238, 1);
}
.category-nav li:nth-child(2) a {
    border: 1px solid #bbe0ff;
    box-shadow: 0 0 1rem rgba(187, 224, 255, 1);
}
.category-nav li:nth-child(3) a {
    border: 1px solid #c8f197;
    box-shadow: 0 0 1rem rgba(180, 225, 150, 1);
}

/* shop-section */
.shop-section {
    padding: 5rem 0 3rem;
}
.shop-section-ttl {
    text-align: center;
    font-size: 3.6rem;
    font-weight: 400;
    margin-bottom: 4rem;
}

/* shop-list */
.shop-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.shop-list > li {
    width: calc(50% - 1rem);
}
.shop-list > li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ccc;
}
.shop-list-item .txt {
    padding: 1rem;
    font-size: 2.2rem;
    line-height: 1.3;
}

.beauty .shop-list > li a {
    background-color: #ffeef2;
}
.haircare .shop-list > li a {
    background-color: #d3eeff;
}
.bodycare .shop-list > li a {
    background-color: #e1ffd5;
}