@charset "UTF-8";

/* Components */
.c-wrapper {
    --main-color: oklch(68% 0.146 19.55deg);
    --shadow-color: oklch(0% 0 0deg / 26%);
    --radius-oval: 100vmax;

    max-width: 750px;
    container-type: inline-size;

    & img {
        height: auto;
    }
}

.c-button {
    border-radius: var(--radius-oval);
    box-shadow: var(--shadow-length-x, calc(8 / 750 * 100cqw)) var(--shadow-length-y, calc(8 / 750 * 100cqw)) var(--shadow-length-blur, calc(24 / 750 * 100cqw)) var(--shadow-color);
}

@media (any-hover: hover) {
    .c-button {
        transition: opacity 0.2s;

        &:hover {
            opacity: 0.6;
        }
    }
}

/* cart */
.p-cv-cart {
    position: relative;
}

.p-cv-cart__container {
    position: absolute;
    inset-block-end: calc(120 / 750 * 100cqw);
    inset-inline: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(22 / 750 * 100cqw);
    padding-inline: calc(50 / 750 * 100cqw);
}

.p-cv-cart__button {
    --shadow-length-x: calc(4 / 750 * 100cqw);
    --shadow-length-y: calc(4 / 750 * 100cqw);
    --shadow-length-blur: calc(12 / 750 * 100cqw);

    margin-inline: calc(12 / 750 * 100cqw);
}

/* gift */
.p-cv-gift {
    position: relative;
}

.p-cv-gift__button {
    position: absolute;
    inset-inline: calc(50 / 750 * 100cqw);
}

.p-cv-gift__button--shampoo {
    inset-block-end: calc(215 / 750 * 100cqw);
}

.p-cv-gift__button--last {
    inset-block-end: calc(188 / 750 * 100cqw);
}

/* carousel */
.p-carousel {
    position: relative;
    padding-inline: calc(20 / 750 * 100cqw);
    margin-block-start: calc(100 / 750 * 100cqw);
}

.p-carousel__button {
    position: absolute;
    inset-block-end: calc(122 / 750 * 100cqw);
    inset-inline: 0;
    z-index: 2;
    margin-inline: calc(31 / 750 * 100cqw);
}

.p-carousel__arrow {
    position: absolute;
    inset-block-start: calc(560 / 750 * 100cqw);
    z-index: 3;
    width: calc(62 / 750 * 100cqw);
    aspect-ratio: 62 / 67;
    cursor: pointer;
}

.p-carousel__arrow--prev {
    inset-inline-start: calc(6 / 750 * 100cqw);
}

.p-carousel__arrow--next {
    inset-inline-end: calc(6 / 750 * 100cqw);
}

.p-carousel__pagination {
    --swiper-pagination-bullet-width: calc(60 / 750 * 100cqw);
    --swiper-pagination-bullet-border-radius: var(--radius-oval);
    --swiper-pagination-color: var(--main-color);

    position: relative !important;
    margin-block-start: 1em;
}

/* note */
.p-note {
    padding-block-end: calc(60 / 750 * 100cqw);
    padding-inline: calc(50 / 750 * 100cqw);
    font-size: clamp(10px, calc(2vw + 4px), 16px);
    background: url("../images/12_ems_note_bg.png") no-repeat 0 0 / cover;
}

.p-note__anchor {
    display: inline-block;
    margin-block-start: 1em;
    text-decoration: underline;

    &:is(:link, :visited) {
        color: #237ca3;
    }

    &:hover {
        color: #dd7d32;
    }
}

/* list: disc */
.p-disc {
    & > li {
        margin-inline-start: 1.5em;
        list-style-type: disc;
    }
}

/* Utility */
.u-visually-hidden {
    position: fixed !important;
    inset: 0 !important;
    visibility: initial !important;
    inline-size: 4px !important;
    block-size: 4px !important;
    padding: unset !important;
    margin: unset !important;
    contain: strict !important;
    pointer-events: none !important;
    border: none !important;
    opacity: 0 !important;
}