@charset "UTF-8";
/* ---------------------------------------------
*   l-wrapper
--------------------------------------------- */
.l-wrapper {
    overflow: clip;
}

/* ---------------------------------------------
*   l-header
--------------------------------------------- */
.l-header {
    height: calc(var(--fixed-header-height) * 1px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
@media screen and (max-width: 1024px) {
    .l-header {
        filter: drop-shadow(0px 2px 6px rgba(var(--color-black-1-rgb), 0.12));
    }
}

/*  l-header-logo
--------------------------------------------- */
.l-header-logo__link {
    display: block;
    width: 208px;
    margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-logo__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-logo__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-logo__link {
        width: 121px;
    }
}
.l-header-logo__link img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/*  l-header-menu
--------------------------------------------- */
@media screen and (min-width: 1025px) {
    .l-header-menu {
        display: block !important;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu {
        position: fixed;
        top: calc(var(--fixed-header-height) * 1px);
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100dvh - var(--fixed-header-height) * 1px);
        overscroll-behavior-y: none;
        overflow-y: auto;
        scrollbar-width: none;
        background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 83%, rgba(var(--color-blue-4-rgb), 1) 100%);
        clip-path: circle(0% at calc(100% - 50px) -100px);
    }
    .l-header-menu::-webkit-scrollbar {
        display: none;
    }
    .l-header-menu.is-animating {
        transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .is-menu-opened .l-header-menu {
        clip-path: circle(150% at 100% 0px);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu__container {
        padding: 25px 0 49px;
        width: 100%;
        overflow-y: auto;
        height: calc(100% + 1px);
        box-sizing: border-box;
    }
}

/*  l-header-nav
--------------------------------------------- */
@media screen and (max-width: 1024px) {
    .l-header-nav {
        margin-top: 24px;
    }
}
.is-cat-open .l-header-nav {
    display: none;
}

.l-header-nav__magamenu-bg {
    position: fixed;
    top: calc(var(--fixed-header-height) * 1px);
    left: 0;
    width: 100%;
    height: 0;
    transition: height 0.4s;
}
@media screen and (max-width: 1024px) {
    .l-header-nav__magamenu-bg {
        background-color: var(--color-base-1);
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__list {
        display: flex;
        gap: 70px;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__item:has(.l-header-nav__lv2) {
        position: relative;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-nav__item {
        border-bottom: 1px solid var(--color-white-1);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-nav__item:first-of-type {
        border-top: 1px solid var(--color-white-1);
    }
}
.l-header-nav__link {
    padding-block: 20px 16px;
    display: block;
    height: 100%;
    text-align: center;
    color: var(--color-base-1);
    font-size: 16px;
    letter-spacing: 0.075em;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-nav__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-nav__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__link {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-nav__link {
        padding-block: 14px 16px;
        padding-inline: calc(var(--contents-side-padding) * 1px);
        width: 100%;
    }
}
@media screen and (min-width: 1025px) {
    .is-headerSubnav-show .l-header-nav__link {
        padding-block: 20px 11px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .l-header-nav__link:not(:has(+ .l-header-nav__lv2)):hover .l-header-nav__link-small {
        text-decoration: underline;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__link:has(+ .l-header-nav__lv2) {
        gap: 3px;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-small {
        position: relative;
        top: 1px;
    }
}
.l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
@media screen and (min-width: 1025px) {
    .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large {
        top: 1px;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large {
        gap: 0.3rem;
    }
}
.l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large::after {
    content: "";
    display: block;
    width: 13px;
    aspect-ratio: 284/150;
    -webkit-mask: url(../img/common/ico_arrow-3.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-3.svg) center center no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    background-color: var(--color-base-1);
    transition: transform var(--hover-duration);
}
@media screen and (min-width: 1025px) {
    .is-mega-menu-open .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large::after {
        transform: rotate(-180deg);
    }
}
@media screen and (max-width: 1024px) {
    .is-acc-open .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large::after {
        transform: rotate(-180deg);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-nav__link:has(+ .l-header-nav__lv2) .l-header-nav__link-large::after {
        width: 12px;
    }
}
.l-header-nav__link-large {
    display: block;
}
.l-header-nav__link-small {
    display: block;
    font-size: 10px;
    margin-top: 6px;
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    transition: opacity 0.5s, visibility 0.5s, max-height 0.5s;
}
@media screen and (min-width: 1025px) {
    .is-headerSubnav-show .l-header-nav__link-small {
        visibility: hidden;
        opacity: 0;
        max-height: 0px;
    }
}

@media screen and (max-width: 1024px) {
    .l-header-nav__link-small {
        font-size: 12px;
        letter-spacing: 0.05em;
        margin-top: -1px;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__lv2 {
        position: fixed;
        top: calc(var(--fixed-header-height) * 1px);
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        transition: visibility var(--hover-duration), opacity var(--hover-duration);
        background: linear-gradient(0deg, rgb(252, 250, 243) 0%, rgb(221, 232, 240) 100%);
        scrollbar-width: none;
        overscroll-behavior-y: none;
        overflow-y: auto;
        max-height: calc(100dvh - var(--fixed-header-height) * 1px);
    }
    .is-mega-menu-open .l-header-nav__lv2 {
        visibility: visible;
        opacity: 1;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-nav__lv2-container {
        padding-block: 8px 23px;
        padding-inline: 45px !important;
        overflow-y: auto;
        height: calc(100% + 1px);
        box-sizing: border-box;
    }
}

/* ---------------------------------------------
*   l-header-search
--------------------------------------------- */
@media screen and (min-width: 1025px) {
    .l-header-search {
        position: fixed;
        z-index: 100;
        top: 110px;
        left: 0;
        right: 0;
        visibility: hidden;
        opacity: 0;
        transition: visibility var(--hover-duration), opacity var(--hover-duration);
        background: linear-gradient(0deg, rgb(252, 250, 243) 0%, rgb(221, 232, 240) 100%);
        scrollbar-width: none;
        overscroll-behavior-y: none;
        overflow-y: auto;
        max-height: calc(100dvh - var(--fixed-header-height) * 1px);
    }
    .is-search-menu-open .l-header-search {
        visibility: visible;
        opacity: 1;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-search {
        display: none;
    }
}
.l-header-search__container {
    padding-block: 18px 24px;
    padding-inline: 35px !important;
    overflow-y: auto;
    height: calc(100% + 1px);
    box-sizing: border-box;
}
.l-header-search__close {
    display: block;
    width: 25px;
    margin-left: auto;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-search__close {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-search__close:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

/*  l-search-box
--------------------------------------------- */
.l-search-box {
    position: relative;
    max-width: 638px;
    width: 100%;
    margin-inline: auto;
    height: 80px;
    margin-top: 6px;
}
@media screen and (max-width: 1024px) {
    .l-search-box {
        max-width: 300px;
        height: 40px;
        margin-top: 50px;
    }
}
.l-search-box__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-inline: 1.3em 103px;
    border: 2px solid var(--color-blue-5);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.01em;
    border-radius: 6px;
    background-color: var(--color-white-1);
}
@media screen and (max-width: 1024px) {
    .l-search-box__input {
        position: absolute;
        padding-inline: 1em 4em;
        border-width: 1px;
        font-size: 14px;
    }
}
.l-search-box__input::-moz-placeholder {
    opacity: 0.7;
}
.l-search-box__input::placeholder {
    opacity: 0.7;
}
.l-search-box__submit-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 111px;
    height: 100%;
    transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
    .l-search-box__submit-btn {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-search-box__submit-btn:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 1024px) {
    .l-search-box__submit-btn {
        width: 42px;
    }
    .l-search-box__submit-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 1px;
        height: 60%;
        background-color: var(--color-blue-5);
        transform: translateY(-50%);
    }
}
.l-search-box__submit-btn img {
    width: 40px;
    height: auto;
}
@media screen and (max-width: 1024px) {
    .l-search-box__submit-btn img {
        position: relative;
        top: 1px;
        left: -2px;
        width: 20px;
    }
}

/*  l-search-dl
--------------------------------------------- */
.l-search-dl {
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.1rem;
    margin-top: 38px;
}
.l-search-dl__term {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1;
}
.l-search-dl__term::before {
    content: "";
    display: block;
    width: 26px;
    aspect-ratio: 1/1;
    background: url(../img/common/ico_tag.svg) 0 0 no-repeat;
    background-size: 100% auto;
}
.l-search-dl__desc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem 0.7rem;
    flex-wrap: wrap;
}
.l-search-dl__link {
    padding: 4px 12px 5px;
    display: block;
    color: var(--color-white-1);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    border-radius: 6px;
    background-color: var(--color-blue-1);
}
@media (hover: hover) and (pointer: fine) {
    .l-search-dl__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-search-dl__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.firefox .l-search-dl__link {
    padding: 4px 12px 6px;
}

.windows.firefox .l-search-dl__link {
    padding: 4px 12px 7px;
}

/*  l-header-menu-button
--------------------------------------------- */
.l-header-menu-button {
    display: none;
    position: absolute;
    top: 21px;
    right: 9px;
    z-index: 1000;
    border: 0;
    border-radius: 0;
    background: none;
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none;
    touch-action: manipulation;
    cursor: pointer;
    width: 40px;
    aspect-ratio: 1/1;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-menu-button {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-menu-button:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.l-header-menu-button img {
    width: 21px;
    aspect-ratio: 11/16;
}
.is-menu-opened .l-header-menu-button__open {
    display: none;
}

.l-header-menu-button__close {
    display: none;
}
.is-menu-opened .l-header-menu-button__close {
    display: block;
}

/*  l-header-menu-close
--------------------------------------------- */
.l-header-menu-close {
    display: none;
}
@media screen and (max-width: 1024px) {
    .l-header-menu-close {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu-close {
        font-size: 12px;
    }
}
@media (hover: hover) and (pointer: fine) {
    .l-header-menu-close {
        background-color: var(--color-white-1);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu-close__btn {
        display: block;
        padding: 44px 14.5px 8px;
        background: url(/kijbyuj/wp-content/themes/huntersvillage2025/assets/images/common/icon/ico_close.svg) no-repeat top 19.5px center/13px 13px;
        background-color: var(--color-red-1);
        color: var(--color-white-1);
        font-size: calc(12 / var(--root-fz) * 1rem);
        letter-spacing: 0.03em;
        font-weight: 900;
        text-transform: uppercase;
    }
}
@media screen and (max-width: 1024px) and (hover: hover) and (pointer: fine) {
    .l-header-menu-close__btn {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-menu-close__btn:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 1024px) {
    .l-header-menu-close__btn {
        font-size: 12px;
    }
}

/* ---------------------------------------------
*   l-header-top
--------------------------------------------- */
.l-header-top {
    position: relative;
    padding-block: 36px 30px;
    background-color: var(--color-white-3);
}
@media screen and (max-width: 1024px) {
    .l-header-top {
        padding-block: 29px 26px;
    }
}
@media screen and (min-width: 1025px) {
    .l-header-top .l-container {
        position: relative;
    }
}

/* ---------------------------------------------
*   l-header-icons
--------------------------------------------- */
.l-header-icons {
    position: absolute;
    top: 82%;
    right: 34px;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 17px;
}
@media screen and (max-width: 1024px) {
    .l-header-icons {
        position: static;
        transform: none;
        justify-content: center;
        gap: 30px;
        margin-top: 19px;
    }
}
.l-header-icons__link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: var(--color-gray-1);
    font-size: 11px;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-icons__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-icons__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-header-icons__link::before {
    content: "";
    display: block;
    aspect-ratio: 1/1;
    margin: 0 auto 5px;
}
@media screen and (max-width: 1024px) {
    .l-header-icons__link {
        font-size: 14px;
        min-width: 60px;
    }
}
.l-header-icons__link--faq {
    padding-top: 3px;
}
.l-header-icons__link--faq::before {
    width: 21px;
    -webkit-mask: url(../img/common/ico_faq.svg) center center no-repeat;
            mask: url(../img/common/ico_faq.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-gray-1);
}
@media screen and (max-width: 1024px) {
    .l-header-icons__link--faq::before {
        width: 37px;
    }
}
.l-header-icons__link--store {
    padding-top: 2px;
}
.l-header-icons__link--store::before {
    width: 20px;
    aspect-ratio: 137/150;
    -webkit-mask: url(../img/common/ico_store.svg) center center no-repeat;
            mask: url(../img/common/ico_store.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-gray-1);
}
@media screen and (max-width: 1024px) {
    .l-header-icons__link--store::before {
        width: 35px;
    }
}
.l-header-icons__link--contact {
    padding-top: 2px;
}
.l-header-icons__link--contact::before {
    width: 28px;
    aspect-ratio: 182/150;
    -webkit-mask: url(../img/common/ico_contact.svg) center center no-repeat;
            mask: url(../img/common/ico_contact.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-gray-1);
}
@media screen and (max-width: 1024px) {
    .l-header-icons__link--contact::before {
        width: 46px;
    }
}
.l-header-icons__link--search {
    transition: opacity 0.3s, visibility 0.3s;
}
.l-header-icons__link--search::before {
    width: 24px;
    -webkit-mask: url(../img/common/ico_search.svg) center center no-repeat;
            mask: url(../img/common/ico_search.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-gray-1);
}
.is-search-menu-open .l-header-icons__link--search {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---------------------------------------------
*   l-header-bottom
--------------------------------------------- */
.l-header-bottom {
    background-color: var(--color-blue-4);
}
.l-header-bottom__container {
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: calc(var(--contents-width) * 1px + var(--contents-side-padding) * 2px);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
@media screen and (max-width: 1024px) {
    .l-header-bottom__container {
        max-width: none;
    }
}

/* ---------------------------------------------
*   l-header-lineup-nav
--------------------------------------------- */
.l-header-lineup-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}
@media screen and (max-width: 1024px) {
    .l-header-lineup-nav {
        padding-block: 13px 32px;
    }
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav {
        grid-template-columns: repeat(1, 1fr);
        gap: 13px;
        max-width: 345px;
        margin-inline: auto;
    }
}
.l-header-lineup-nav__link {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-lineup-nav__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-lineup-nav__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__link {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 21px;
    }
}
.l-header-lineup-nav__img {
    padding: 5px;
    display: block;
    border-radius: 6px;
    background-color: var(--color-white-1);
    aspect-ratio: 1/1;
    overflow: hidden;
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__img {
        padding: 3px;
        width: 85px;
    }
}
.l-header-lineup-nav__img img {
    border-radius: 6px;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.l-header-lineup-nav__txts {
    display: block;
    text-align: center;
    margin-top: 7px;
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__txts {
        padding-top: 5px;
        margin-top: 0;
        text-align: left;
    }
}
.l-header-lineup-nav__term {
    display: block;
    font-size: 16px;
    letter-spacing: 0.005em;
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__term {
        letter-spacing: 0.075em;
    }
}
.l-header-lineup-nav__term-tb {
    display: none;
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__term-tb {
        display: block;
        font-family: var(--ff-root);
        font-size: 12px;
        letter-spacing: 0;
        line-height: 1.05;
    }
}
.l-header-lineup-nav__desc {
    display: block;
    font-size: 8px;
    letter-spacing: 0.075em;
    line-height: 1.375;
}
@media screen and (max-width: 900px) {
    .l-header-lineup-nav__desc {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.6;
        margin-top: 16px;
    }
}

/* ---------------------------------------------
*   l-header-series-nav
--------------------------------------------- */
.l-header-series-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    max-width: 971px;
    margin-inline: auto;
}
@media screen and (max-width: 1024px) {
    .l-header-series-nav {
        padding-block: 13px 25px;
    }
}
@media screen and (max-width: 767px) {
    .l-header-series-nav {
        grid-template-columns: repeat(1, 1fr);
        gap: 26px;
        max-width: 210px;
        margin-inline: auto;
    }
}
.l-header-series-nav__link {
    padding: 9px;
    display: block;
    background-color: var(--color-white-1);
    border-radius: 6px;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-series-nav__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-series-nav__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .l-header-series-nav__link {
        padding: 7px;
    }
}
.l-header-series-nav__link img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 6px;
    overflow: hidden;
}
.l-header-series-nav__term {
    display: block;
    font-size: 17px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 5px;
}
@media screen and (max-width: 767px) {
    .l-header-series-nav__term {
        font-size: 16px;
    }
}

/* ---------------------------------------------
*   l-header-btns
--------------------------------------------- */
.l-header-btns {
    max-width: 345px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}
.l-header-btns__item {
    width: calc((100% - 14px) / 2);
}
.l-header-btns__link {
    position: relative;
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--color-blue-1);
    background-color: var(--color-white-1);
}
@media (hover: hover) and (pointer: fine) {
    .l-header-btns__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-btns__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-header-btns__link::before, .l-header-btns__link::after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    background-color: var(--color-gray-1);
}
@media screen and (max-width: 1024px) {
    .l-header-btns__link::before, .l-header-btns__link::after {
        background-color: var(--color-base-1);
    }
}
@media screen and (max-width: 1024px) {
    .l-header-btns__link::before {
        background-color: var(--color-blue-5);
    }
}
.l-header-btns__link::after {
    right: 5px;
    width: 13px;
    aspect-ratio: 284/150;
    -webkit-mask: url(../img/common/ico_arrow-3.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-3.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    transform: translateY(-50%) rotate(-90deg);
    background-color: var(--color-blue-5);
}
@media screen and (max-width: 1024px) {
    .l-header-btns__link::after {
        background-color: var(--color-base-1);
    }
}
.l-header-btns__link--product {
    padding: 22px 0px 22px 55px;
    letter-spacing: 0.1em;
}
.l-header-btns__link--product::before {
    left: 18px;
    width: 24px;
    aspect-ratio: 1/1;
    -webkit-mask: url(../img/common/ico_search.svg) center center no-repeat;
            mask: url(../img/common/ico_search.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    transform: translateY(-50%);
}
.l-header-btns__link--diagnosis {
    padding: 22px 0px 22px 39px;
    letter-spacing: 0.025em;
}
.l-header-btns__link--diagnosis::before {
    left: 8px;
    width: 22px;
    aspect-ratio: 121/150;
    -webkit-mask: url(../img/common/ico_note.svg) center center no-repeat;
            mask: url(../img/common/ico_note.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    transform: translateY(-50%);
    background-color: var(--color-blue-5);
}

/* ---------------------------------------------
*   l-header-sns
--------------------------------------------- */
@media screen and (max-width: 1024px) {
    .l-header-sns {
        margin-top: 26px;
    }
}
.l-header-sns__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
}
.l-header-sns__link {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (hover: hover) and (pointer: fine) {
    .l-header-sns__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-header-sns__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-header-sns__link img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.l-header-sns__link--insta {
    width: 20px;
}
.l-header-sns__link--x {
    width: 18px;
}
.l-header-sns__link--tictok {
    width: 14px;
}
.l-header-sns__link--youtube {
    width: 22px;
}

/* ---------------------------------------------
*   l-global-nav
--------------------------------------------- */
/* ---------------------------------------------
*   l-contents
--------------------------------------------- */
.l-contents {
    padding-block: calc(var(--fixed-header-height) * 1px) 243px;
}
@media screen and (max-width: 767px) {
    .l-contents {
        padding-block: calc(var(--fixed-header-height) * 1px) calc(153 / var(--design-width) * 100vw);
    }
    .l-contents:has(.c-btn-sort), .l-contents:has(.c-btn-2--store) {
        padding-bottom: 0;
    }
}
@media screen and (max-width: 767px) {
    .l-contents--sp-clip {
        overflow: clip;
    }
}
.l-contents--clip {
    overflow: clip;
}

/* ---------------------------------------------
*   l-container
--------------------------------------------- */
.l-container {
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: calc(var(--contents-width) * 1px + var(--contents-side-padding) * 2px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .l-container {
        max-width: none;
    }
}
@media screen and (max-width: 767px) {
    .l-container--sp-clip {
        overflow: clip;
    }
}
@media screen and (max-width: 767px) {
    .l-container--sp-none {
        padding-inline: 0;
    }
}

.l-container-small {
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: calc(var(--contents-width-small) * 1px + var(--contents-side-padding) * 2px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .l-container-small {
        max-width: none;
    }
}
@media screen and (max-width: 767px) {
    .l-container-small--sp-none {
        padding-inline: 0;
    }
}

/* ---------------------------------------------
*   l-columns
--------------------------------------------- */
.l-columns {
    padding-block: 26px;
    display: grid;
    grid-template-columns: 261px 1fr;
    gap: 30px;
}
@media screen and (max-width: 1024px) {
    .l-columns {
        gap: 10px;
    }
}
@media screen and (max-width: 767px) {
    .l-columns {
        padding-block: calc(9 / var(--design-width) * 100vw) 0;
        display: flex;
        flex-direction: column-reverse;
    }
}
.l-columns .l-breadcrumb {
    padding-block: 0;
    margin-top: -4px;
    margin-left: -5px;
}
@media screen and (max-width: 1024px) {
    .l-columns .l-breadcrumb {
        margin-top: 0;
        margin-left: 0;
    }
}
@media screen and (max-width: 767px) {
    .l-columns__aside {
        position: sticky;
        bottom: 0;
        z-index: 100;
    }
}
@media screen and (max-width: 767px) {
    .l-columns__main {
        padding-block: 0 calc(153 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   l-sidebar
--------------------------------------------- */
@media screen and (min-width: 768px) {
    .l-sidebar::-webkit-scrollbar {
        display: none;
    }
}

.l-sidebar {
    padding: 14px 30px 22px 12px;
    border-radius: 14px;
    border: 1px solid var(--color-blue-7);
    background: url(../img/product/bg_side.png) 0 0 repeat-y;
    background-size: 100% 1px;
}
@media screen and (min-width: 768px) {
    .l-sidebar {
        height: 100%;
        max-height: calc(100vh - var(--fixed-header-height) * 1px);
        overflow-y: auto;
        /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
        -ms-overflow-style: none;
        /*Firefoxへの対応*/
        scrollbar-width: none;
    }
}
@media screen and (max-width: 767px) {
    .l-sidebar {
        padding: calc(13 / var(--design-width) * 100vw) calc(var(--contents-side-padding) * 1px) calc(30 / var(--design-width) * 100vw);
        border-radius: 0;
        border: none;
        background: transparent;
    }
}
.l-sidebar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0 15px;
    border-bottom: 1px solid var(--color-gray-2);
}
@media screen and (max-width: 767px) {
    .l-sidebar__head {
        padding-block: 0 calc(19 / var(--design-width) * 100vw);
        width: calc(293 / var(--design-width) * 100vw);
        margin-inline: auto;
    }
}
.l-sidebar__term {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ff-root) !important;
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 1.125;
}
@media screen and (max-width: 767px) {
    .l-sidebar__term {
        padding-left: calc(22 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.l-sidebar__term::before {
    content: "";
    display: block;
    width: 18px;
    aspect-ratio: 191/150;
    background: url(../img/common/ico_sort.svg) 0 0 no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 767px) {
    .l-sidebar__term::before {
        position: absolute;
        top: 55%;
        left: calc(-21 / var(--design-width) * 100vw);
        width: calc(23 / var(--design-width) * 100vw);
        transform: translateY(-50%);
    }
}
.l-sidebar__clear {
    padding: 4px 5px;
    display: block;
    color: var(--color-base-1);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    background-color: var(--color-white-2);
    margin-top: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .l-sidebar__clear {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-sidebar__clear:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.windows.firefox .l-sidebar__clear {
    padding-block: 5px 7px;
}

@media screen and (max-width: 767px) {
    .l-sidebar__body {
        width: calc(293 / var(--design-width) * 100vw);
        margin-inline: auto;
    }
}

/* ---------------------------------------------
*   l-sidebar-acc
--------------------------------------------- */
.l-sidebar-acc__body-inner {
    margin-top: 1px;
    padding-left: 27px;
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__body-inner {
        padding-block: 0 calc(11 / var(--design-width) * 100vw);
        padding-left: calc(24 / var(--design-width) * 100vw);
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__item {
    padding-block: 0 13px;
    border-bottom: 1px solid var(--color-gray-2);
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__item {
        padding-block: 0 calc(13 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__item--jp {
    padding-block: 0 8px;
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__item--jp {
        padding-block: 0 calc(3 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__item--jp .l-sidebar-acc__trigger {
    padding-top: 15px;
    font-family: var(--ff-root);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__item--jp .l-sidebar-acc__trigger {
        padding-top: calc(13 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        margin-block: 0 calc(12 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__item--jp .l-sidebar-acc__body-inner {
    padding-block: 0 8px;
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__item--jp .l-sidebar-acc__body-inner {
        padding-block: 0 calc(20 / var(--design-width) * 100vw);
        margin-top: calc(8 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__trigger {
    position: relative;
    padding-top: 13px;
    padding-left: 26px;
    display: block;
    width: 100%;
    color: var(--color-base-1);
    font-family: var(--ff-en);
    font-size: 20px;
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: left;
}
@media screen and (max-width: 767px) {
    .l-sidebar-acc__trigger {
        padding-top: calc(13 / var(--design-width) * 100vw);
        padding-inline: calc(10 / var(--design-width) * 100vw) calc(33 / var(--design-width) * 100vw);
        font-size: calc(20 / var(--design-width) * 100vw);
    }
}
.l-sidebar-acc__trigger::before {
    content: "";
    position: absolute;
    top: 17px;
    right: 17px;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: rotate(-90deg);
    transition: transform 0.3s;
    -webkit-mask: url(../img/common/ico_arrow-1.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-1.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-blue-2);
}
.is-open .l-sidebar-acc__trigger::before {
    transform: rotate(90deg);
}

@media screen and (max-width: 767px) {
    .l-sidebar-acc__trigger::before {
        top: calc(17 / var(--design-width) * 100vw);
        right: calc(16 / var(--design-width) * 100vw);
        width: calc(7 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   l-breadcrumb
--------------------------------------------- */
.l-breadcrumb {
    padding-block: 21px;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb {
        padding-block: calc(11 / var(--design-width) * 100vw);
    }
}
.l-breadcrumb__list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb__list {
        gap: 0.2rem;
    }
}
.l-breadcrumb li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb li {
        gap: calc(8 / var(--design-width) * 100vw);
    }
}
.l-breadcrumb li:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 6px;
    aspect-ratio: 82/150;
    -webkit-mask: url(../img/common/ico_arrow-2.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-2.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-base-1);
    margin-left: 5px;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb li:not(:last-of-type)::after {
        width: calc(6 / var(--design-width) * 100vw);
        margin-left: 0;
    }
}
.l-breadcrumb li:first-of-type a::before {
    content: "";
    display: inline-block;
    width: 13px;
    aspect-ratio: 164/150;
    background: url(../img/common/ico_home.svg) center center no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb li:first-of-type a::before {
        width: calc(13 / var(--design-width) * 100vw);
    }
}
.l-breadcrumb li a, .l-breadcrumb li span {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.025em;
    gap: 5px;
}
@media screen and (max-width: 767px) {
    .l-breadcrumb li a, .l-breadcrumb li span {
        font-size: calc(12 / var(--design-width) * 100vw);
        gap: calc(8 / var(--design-width) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .l-breadcrumb li a {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-breadcrumb li a:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

/* ---------------------------------------------
*   l-footer-pagetop
--------------------------------------------- */
.l-footer-pagetop {
    position: sticky;
    bottom: 0;
    z-index: 100;
}
.l-footer-pagetop__btn {
    position: absolute;
    bottom: 26px;
    right: 50px;
    z-index: 9;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    display: grid;
    place-items: center;
    width: 60px;
    aspect-ratio: 1/1;
}
@media screen and (max-width: 767px) {
    .l-footer-pagetop__btn {
        right: 20px;
        bottom: calc(60 / var(--design-width) * 100vw);
        width: calc(52 / var(--design-width) * 100vw);
    }
}
.l-footer-pagetop__btn.is-show {
    visibility: visible;
    opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-pagetop__btn.is-show:hover {
        opacity: 0.8;
    }
}

/* ---------------------------------------------
*   l-footer
--------------------------------------------- */
.l-footer__bg {
    background: url(../img/common/bg_footer.png) center center no-repeat;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    .l-footer__bg {
        background: url(../img/common/sp/bg_footer.png) center center no-repeat;
        background-size: cover;
    }
}
.l-footer__container {
    position: relative;
    padding-block: 105px 58px;
    padding-inline: 43px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: calc(105 / 1068 * 100%);
}
@media screen and (max-width: 1024px) {
    .l-footer__container {
        padding-inline: calc(var(--contents-side-padding) * 1px);
        gap: 30px;
    }
}
@media screen and (max-width: 767px) {
    .l-footer__container {
        padding-block: calc(100 / var(--design-width) * 100vw) calc(60 / var(--design-width) * 100vw);
        display: block;
    }
}
.l-footer__logos {
    padding-top: 5px;
    width: calc(374 / 1068 * 100%);
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .l-footer__logos {
        padding-top: 0;
        width: 100%;
    }
}
.l-footer__navs {
    width: 100%;
}

/* ---------------------------------------------
*   l-footer-pop
--------------------------------------------- */
.l-footer-pop {
    position: absolute;
    top: -19px;
    right: 75px;
    display: block;
    width: 238px;
}
@media screen and (max-width: 1024px) {
    .l-footer-pop {
        right: calc(var(--contents-side-padding) * 1px);
    }
}
@media screen and (max-width: 767px) {
    .l-footer-pop {
        top: calc(4 / var(--design-width) * 100vw);
        right: calc(16 / var(--design-width) * 100vw);
        width: calc(173 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .l-footer-pop:hover {
        top: calc(-53 / 1074 * 100%);
    }
    .l-footer-pop:hover .l-footer-pop__img--normal {
        display: none;
    }
    .l-footer-pop:hover .l-footer-pop__img--hover {
        display: block;
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .l-footer-pop {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-pop:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-footer-pop__img--hover {
    display: none;
}
.l-footer-pop img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   l-footer-logo
--------------------------------------------- */
.l-footer-logo {
    display: block;
    width: calc(362 / 374 * 100%);
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-logo {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-logo:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .l-footer-logo {
        width: calc(294 / var(--design-width) * 100vw);
        margin-inline: auto;
    }
}
.l-footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   l-footer-banner
--------------------------------------------- */
.l-footer-banner {
    display: block;
    margin-top: 73px;
    margin-left: calc(6 / 374 * 100%);
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-banner {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-banner:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

/* ---------------------------------------------
*   l-footer-nav
--------------------------------------------- */
.l-footer-nav__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(30 / 594 * 100%);
}
.l-footer-nav__item {
    display: contents;
}
.l-footer-nav__dl {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 22px;
}
.l-footer-nav__term {
    font-size: 14px;
    font-weight: bold;
}
.l-footer-nav__desc a {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.1em;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-nav__desc a {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-nav__desc a:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-footer-nav__desc a + a {
    margin-top: 0.93rem;
}

/* ---------------------------------------------
*   l-footer-sns
--------------------------------------------- */
.l-footer-sns {
    padding-right: 38px;
    margin-top: 74px;
}
@media screen and (max-width: 1024px) {
    .l-footer-sns {
        padding-right: 0;
        margin-top: calc(109 / var(--design-width) * 100vw);
    }
}
.l-footer-sns__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
}
@media screen and (max-width: 767px) {
    .l-footer-sns__list {
        justify-content: center;
        gap: calc(33 / var(--design-width) * 100vw);
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}
.l-footer-sns__link {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-sns__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-sns__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-footer-sns__link img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.l-footer-sns__link--insta {
    width: 24px;
}
@media screen and (max-width: 767px) {
    .l-footer-sns__link--insta {
        width: calc(24 / var(--design-width) * 100vw);
    }
}
.l-footer-sns__link--x {
    width: 20px;
}
@media screen and (max-width: 767px) {
    .l-footer-sns__link--x {
        width: calc(20 / var(--design-width) * 100vw);
    }
}
.l-footer-sns__link--tictok {
    width: 17px;
}
@media screen and (max-width: 767px) {
    .l-footer-sns__link--tictok {
        width: calc(17 / var(--design-width) * 100vw);
    }
}
.l-footer-sns__link--youtube {
    width: 27px;
}
@media screen and (max-width: 767px) {
    .l-footer-sns__link--youtube {
        width: calc(27 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   l-footer-bottom
--------------------------------------------- */
.l-footer-bottom {
    padding-block: 13px;
}
@media screen and (max-width: 767px) {
    .l-footer-bottom {
        padding-block: calc(10 / var(--design-width) * 100vw);
    }
}
.l-footer-bottom__container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}
@media screen and (max-width: 767px) {
    .l-footer-bottom__container {
        justify-content: center;
    }
}
.l-footer-bottom__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}
.l-footer-bottom__item {
    flex-shrink: 0;
}
.l-footer-bottom__link {
    display: block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
}
@media (hover: hover) and (pointer: fine) {
    .l-footer-bottom__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .l-footer-bottom__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.l-footer-bottom__copyright {
    padding-right: 4px;
    display: block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .l-footer-bottom__copyright {
        padding-right: 0;
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-acc-1
--------------------------------------------- */
.c-acc-1 {
    padding: 2px;
    border-radius: 8px;
    background-color: lightgray;
    margin-top: 30px;
}
.c-acc-1__trigger {
    position: relative;
    padding-right: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    text-align: left;
}
.c-acc-1__trigger::before {
    content: "・";
    display: block;
}
.c-acc-1__trigger::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    transform: translateY(-50%);
    transition: transform 0.3s;
}
.is-open .c-acc-1__trigger::after {
    transform: translateY(-50%) rotate(-90deg);
}

.c-acc-1 + .c-acc-1 {
    margin-top: 10px;
}
.c-acc-1--voice .c-acc-1__trigger::before {
    content: "⭐️";
}

/* ---------------------------------------------
*   c-block-news
--------------------------------------------- */
.c-block-news {
    padding-block: 44px 0px;
}
@media screen and (max-width: 767px) {
    .c-block-news {
        padding-block: calc(7 / var(--design-width) * 100vw) 0;
    }
}
@media screen and (min-width: 768px) {
    .c-block-news__head, .c-block-news__body {
        max-width: 726px;
        margin-inline: auto;
    }
}
.c-block-news__body {
    margin-top: 43px;
}
@media screen and (max-width: 767px) {
    .c-block-news__body {
        margin-top: calc(23 / var(--design-width) * 100vw);
    }
}
.c-block-news__note {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-top: 26px;
}
@media screen and (max-width: 767px) {
    .c-block-news__note {
        gap: 0.35rem;
        margin-top: calc(12 / var(--design-width) * 100vw);
    }
}
.c-block-news__date {
    font-size: 18px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .c-block-news__date {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0.075em;
    }
}
.c-block-news__content {
    margin-top: 16px;
}
@media screen and (max-width: 767px) {
    .c-block-news__content {
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
.c-block-news__btn {
    width: 268px;
    margin-top: 70px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .c-block-news__btn {
        width: calc(264 / var(--design-width) * 100vw);
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}
.c-block-news__foot {
    margin-top: 72px;
}
@media screen and (max-width: 767px) {
    .c-block-news__foot {
        margin-top: calc(75 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-block-404
--------------------------------------------- */
.c-block-404 {
    padding-block: 32px 0;
}
@media screen and (max-width: 767px) {
    .c-block-404 {
        padding-block: calc(46 / var(--design-width) * 100vw) 0;
    }
}
.c-block-404__ttl {
    color: var(--color-blue-1);
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: center;
}
.c-block-404__ttl-l {
    font-size: 142px;
    letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
    .c-block-404__ttl-l {
        font-size: calc(100 / var(--design-width) * 100vw);
    }
}
.c-block-404__ttl-s {
    display: block;
    font-size: 20px;
    margin-top: -4px;
}
@media screen and (max-width: 767px) {
    .c-block-404__ttl-s {
        font-size: calc(10 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
        white-space: nowrap;
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.c-block-404__txt {
    display: block;
    font-size: 20px;
    line-height: 3;
    text-align: center;
    margin-top: 94px;
}
@media screen and (max-width: 767px) {
    .c-block-404__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 2.6428571429;
        margin-top: calc(49 / var(--design-width) * 100vw);
    }
}
.c-block-404__search {
    margin-top: 48px;
}
@media screen and (max-width: 767px) {
    .c-block-404__search {
        margin-top: calc(48 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-block-products
--------------------------------------------- */
.c-block-products .c-ttl-3 {
    padding-left: 10px;
}
@media screen and (max-width: 767px) {
    .c-block-products .c-ttl-3 {
        padding-left: 0;
    }
}
.c-block-products__details {
    padding-block: 0 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 140px;
    letter-spacing: 0.025em;
    border-bottom: 1.4px solid var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .c-block-products__details {
        padding-block: 0;
        margin-top: calc(16 / var(--design-width) * 100vw);
        border: none;
    }
}
.c-block-products__vol {
    padding-left: 10px;
    font-size: 22px;
}
@media screen and (max-width: 767px) {
    .c-block-products__vol {
        position: relative;
        top: calc(3 / var(--design-width) * 100vw);
        padding-left: 0;
        font-size: calc(18 / var(--design-width) * 100vw);
    }
}
.c-block-products__price {
    padding-right: 12px;
    font-size: 26px;
}
@media screen and (max-width: 767px) {
    .c-block-products__price {
        padding-right: calc(2 / var(--design-width) * 100vw);
        font-size: calc(26 / var(--design-width) * 100vw);
    }
}
.c-block-products__price-tax {
    font-size: 18px;
    margin-left: 14px;
}
@media screen and (max-width: 767px) {
    .c-block-products__price-tax {
        font-size: calc(18 / var(--design-width) * 100vw);
        margin-left: calc(5 / var(--design-width) * 100vw);
    }
}
.c-block-products__body {
    margin-top: 35px;
}
@media screen and (max-width: 767px) {
    .c-block-products__body {
        margin-top: calc(25 / var(--design-width) * 100vw);
    }
}
.c-block-products__note {
    padding-left: 18px;
    font-size: 20px;
    line-height: 2.5;
}
@media screen and (max-width: 767px) {
    .c-block-products__note {
        display: none;
    }
}
.c-block-products__store {
    max-width: 377px;
    margin-top: 70px;
    margin-left: 24px;
}
.c-block-products__voice {
    margin-top: 28px;
    margin-left: 24px;
}
@media screen and (max-width: 767px) {
    .c-block-products__voice {
        margin-top: 0;
        margin-left: 0;
    }
}
.c-block-products .c-tag-5 {
    margin-top: 28px;
    margin-left: 24px;
}
@media screen and (max-width: 767px) {
    .c-block-products .c-tag-5 {
        margin-top: calc(30 / var(--design-width) * 100vw);
        margin-left: 0;
    }
}

/* ---------------------------------------------
*   c-block-incense
--------------------------------------------- */
.c-block-incense {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
@media screen and (max-width: 1024px) {
    .c-block-incense {
        display: block;
    }
}
.c-block-incense__dl {
    padding-top: 16px;
    position: relative;
    width: 25rem;
    flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
    .c-block-incense__dl {
        width: 500px;
        margin-inline: auto;
    }
}
@media screen and (max-width: 767px) {
    .c-block-incense__dl {
        padding-top: 0;
        padding-inline: calc(9 / var(--design-width) * 100vw);
        width: 100%;
    }
}
.c-block-incense__dl::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 9px;
    display: block;
    width: 95%;
    aspect-ratio: 759/625;
    background: url(../img/product/bg_incense.png) center center no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 1024px) {
    .c-block-incense__dl::before {
        top: -59px;
    }
}
@media screen and (max-width: 767px) {
    .c-block-incense__dl::before {
        top: calc(-8 / var(--design-width) * 100vw);
        left: calc(18 / var(--design-width) * 100vw);
        width: 90%;
    }
}
.c-block-incense__dl-item {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .c-block-incense__dl-item--first {
        align-items: flex-start;
    }
}
.c-block-incense__dl-item:nth-of-type(2) {
    margin-top: 26px;
}
@media screen and (max-width: 767px) {
    .c-block-incense__dl-item:nth-of-type(2) {
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
    .c-block-incense__dl-item:nth-of-type(2) .c-block-incense__desc {
        top: calc(-1 / var(--design-width) * 100vw);
    }
}
.c-block-incense__dl-item:nth-of-type(3) {
    margin-top: 48px;
}
@media screen and (max-width: 767px) {
    .c-block-incense__dl-item:nth-of-type(3) {
        margin-top: calc(33 / var(--design-width) * 100vw);
    }
}
.c-block-incense__term {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6rem;
    font-size: 28px;
    letter-spacing: 0.075em;
    line-height: 1;
    width: 10rem;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .c-block-incense__term {
        font-size: calc(20 / var(--design-width) * 100vw);
        gap: 0.26rem;
        width: 4.07rem;
    }
}
.c-block-incense__term::before {
    content: "";
    display: block;
    width: 20px;
    aspect-ratio: 1/1;
    background-color: var(--color-blue-1);
    border-radius: 50%;
    margin-top: -3px;
}
@media screen and (max-width: 767px) {
    .c-block-incense__term::before {
        width: calc(16 / var(--design-width) * 100vw);
    }
}
.c-block-incense__desc {
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.2222222222;
    height: 4rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (max-width: 767px) {
    .c-block-incense__desc {
        position: relative;
        top: calc(-4 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        height: 4em;
    }
}
.c-block-incense__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 495px;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-align: center;
}
@media screen and (max-width: 1024px) {
    .c-block-incense__list {
        width: 500px;
        margin-inline: auto;
        margin-top: 40px;
    }
}
@media screen and (max-width: 767px) {
    .c-block-incense__list {
        display: block;
        width: 100%;
        font-size: calc(22 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-block-incense__list-detail {
        padding-top: calc(17 / var(--design-width) * 100vw);
        width: calc(119 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .c-block-incense__list-item {
        max-width: 130px;
    }
    .c-block-incense__list-item:first-of-type {
        margin-left: 0;
    }
    .c-block-incense__list-item:nth-of-type(2) {
        margin-inline: auto;
    }
    .c-block-incense__list-item:last-of-type {
        margin-left: auto;
        margin-right: 0;
    }
}
@media screen and (max-width: 767px) {
    .c-block-incense__list-item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: calc(42 / var(--design-width) * 100vw);
    }
    .c-block-incense__list-item + .c-block-incense__list-item {
        margin-top: calc(24 / var(--design-width) * 100vw);
    }
}
.c-block-incense__pic {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .c-block-incense__pic {
        width: calc(140 / var(--design-width) * 100vw);
        flex-shrink: 0;
    }
}
.c-block-incense__pic img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-block-incense__list-term {
    line-height: 1;
    display: block;
    border-bottom: 2px solid var(--color-blue-1);
    margin-block: 19px;
}
@media screen and (max-width: 767px) {
    .c-block-incense__list-term {
        padding-block: 0 calc(4 / var(--design-width) * 100vw);
        border-width: calc(2 / var(--design-width) * 100vw);
        margin-block: 0 calc(7 / var(--design-width) * 100vw);
    }
}
.c-block-incense__list-desc {
    line-height: 1.4090909091;
    word-break: break-all;
}
@media screen and (max-width: 767px) {
    .c-block-incense__list-desc {
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1.3333333333;
    }
}

/* ---------------------------------------------
*   c-block-1
--------------------------------------------- */
.c-block-1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(50 / 1300 * 100%);
    margin-top: 20px;
}
.c-block-1:nth-of-type(2n) {
    flex-direction: row-reverse;
}
.c-block-1__figure {
    width: calc(400 / 1300 * 100%);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1/1;
}
.c-block-1__figure img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   c-block-series
--------------------------------------------- */
.c-block-series {
    padding-block: 50px;
}
.c-block-series__ttl {
    display: block;
    margin-inline: auto;
}

/* ---------------------------------------------
*   c-block-insta
--------------------------------------------- */
.c-block-insta {
    padding-block: 50px;
    background-color: lightgray;
}

/* ---------------------------------------------
*   c-box-select
--------------------------------------------- */
.c-box-select {
    padding-right: 3px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1;
    margin-top: 14px;
}
@media screen and (max-width: 767px) {
    .c-box-select {
        padding-left: 0;
        justify-content: flex-start;
        gap: calc(8 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(14 / var(--design-width) * 100vw);
    }
}
.c-box-select__sort {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.7rem;
}
@media screen and (max-width: 767px) {
    .c-box-select__sort {
        gap: calc(8 / var(--design-width) * 100vw);
    }
}
.c-box-select__sort::before {
    content: "";
    display: block;
    width: 18px;
    aspect-ratio: 191/150;
    background: url(../img/common/ico_sort.svg) 0 0 no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 767px) {
    .c-box-select__sort::before {
        width: calc(18 / var(--design-width) * 100vw);
    }
}
.c-box-select__product span {
    margin-inline: 2px 4px;
}
@media screen and (max-width: 767px) {
    .c-box-select__product span {
        margin-inline: calc(2 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-btn-1
--------------------------------------------- */
.c-btn-1 {
    padding: 11px 10px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    max-width: 400px;
    color: var(--color-base-1);
    background-color: var(--color-blue-3);
    filter: drop-shadow(0px 2px 7px rgba(var(--color-black-1-rgb), 0.12));
}
@media (hover: hover) and (pointer: fine) {
    .c-btn-1 {
        transition: background-color 0.3s, color 0.3s;
    }
    .c-btn-1 .c-btn-1__ico {
        transition: background-color 0.3s;
    }
    .c-btn-1:hover {
        background-color: var(--color-blue-1);
        color: var(--color-white-1);
    }
    .c-btn-1:hover .c-btn-1__ico {
        background-color: var(--color-white-1);
    }
}
@media screen and (max-width: 767px) {
    .c-btn-1 {
        padding: calc(11 / var(--design-width) * 100vw) calc(10 / var(--design-width) * 100vw);
        gap: 0.5rem;
        max-width: none;
        border-radius: calc(6 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(2 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
    }
}
.c-btn-1__txt {
    font-size: 20px;
    letter-spacing: 0.25em;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .c-btn-1__txt {
        font-size: calc(20 / var(--design-width) * 100vw);
    }
}
.c-btn-1__ico {
    position: relative;
    display: block;
    width: 24px;
    aspect-ratio: 1/1;
    -webkit-mask: url(../img/common/ico_search.svg) center center no-repeat;
            mask: url(../img/common/ico_search.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .c-btn-1__ico {
        width: calc(24 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-btn-2
--------------------------------------------- */
.c-btn-2 {
    padding: 11px 10px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-base-1);
    background-color: var(--color-blue-3);
    filter: drop-shadow(0px 2px 6px rgba(var(--color-black-1-rgb), 0.12));
    min-width: 267px;
    transform: translateZ(0);
    will-change: background-color, color;
    backface-visibility: hidden;
}
@media screen and (max-width: 767px) {
    .c-btn-2 {
        padding: calc(11 / var(--design-width) * 100vw) calc(10 / var(--design-width) * 100vw) calc(12 / var(--design-width) * 100vw);
        gap: 0.35rem;
        border-radius: calc(12 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(2 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
        min-width: calc(267 / var(--design-width) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-btn-2 {
        transition: background-color 0.3s, color 0.3s ease;
    }
    .c-btn-2 .c-btn-2__arr {
        transition: border-color 0.3s ease;
    }
    .c-btn-2 .c-btn-2__arr::after {
        transition: background-color 0.3s;
    }
    .c-btn-2:hover {
        background-color: var(--color-blue-1);
        color: var(--color-white-1);
    }
    .c-btn-2:hover .c-btn-2__arr {
        border-color: var(--color-white-1);
    }
    .c-btn-2:hover .c-btn-2__arr::after {
        background-color: var(--color-white-1);
    }
}
.c-btn-2__txt {
    font-size: 18px;
    letter-spacing: 0.25em;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .c-btn-2__txt {
        font-size: calc(18 / var(--design-width) * 100vw);
    }
}
.c-btn-2__arr {
    position: relative;
    display: block;
    width: 17px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-base-1);
    flex-shrink: 0;
    margin-top: 2px;
}
@media screen and (max-width: 767px) {
    .c-btn-2__arr {
        width: calc(17 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        margin-top: 0.07rem;
    }
}
.c-btn-2--ltr .c-btn-2__arr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .c-btn-2--ltr .c-btn-2__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .windows.firefox .c-btn-2--ltr {
        padding: 11px 10px 12px;
    }
    .windows.firefox .c-btn-2--ltr .c-btn-2__arr {
        margin-top: 1px;
    }
}

.c-btn-2--large {
    padding: 14px 10px;
    gap: 1.25rem;
}
@media screen and (max-width: 767px) {
    .c-btn-2--large {
        padding: calc(14 / var(--design-width) * 100vw) calc(22 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw) calc(32 / var(--design-width) * 100vw);
        justify-content: space-between;
        gap: 0.55rem;
    }
}
.c-btn-2--large .c-btn-2__txt {
    font-size: 20px;
}
@media screen and (max-width: 767px) {
    .c-btn-2--large .c-btn-2__txt {
        font-size: calc(20 / var(--design-width) * 100vw);
    }
}
.c-btn-2--large .c-btn-2__arr {
    width: 19px;
}
@media screen and (max-width: 767px) {
    .c-btn-2--large .c-btn-2__arr {
        width: calc(19 / var(--design-width) * 100vw);
    }
}
.c-btn-2--ttb .c-btn-2__arr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%) rotate(90deg);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .c-btn-2--ttb .c-btn-2__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.c-btn-2--sb {
    justify-content: space-between;
}
.c-btn-2--store {
    padding: 11px 20px 11px 17px;
    justify-content: space-between;
}
@media screen and (max-width: 767px) {
    .c-btn-2--store {
        padding: calc(11 / var(--design-width) * 100vw) calc(30 / var(--design-width) * 100vw) calc(11 / var(--design-width) * 100vw) calc(48 / var(--design-width) * 100vw);
        border-radius: 0;
        position: sticky;
        bottom: 0;
        z-index: 10;
        opacity: 0.9;
        width: 100vw;
        margin-left: calc(var(--contents-side-padding) * -1px);
    }
}
.c-btn-2--store .c-btn-2__txt {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}
@media screen and (max-width: 767px) {
    .c-btn-2--store .c-btn-2__txt {
        gap: calc(12 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
        flex-shrink: 0;
    }
}
.c-btn-2--store .c-btn-2__txt::before {
    content: "";
    display: block;
    width: 21px;
    aspect-ratio: 137/150;
    -webkit-mask: url(../img/common/ico_store.svg) center center no-repeat;
            mask: url(../img/common/ico_store.svg) center center no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .c-btn-2--store .c-btn-2__txt::before {
        width: calc(21 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .windows.chrome .c-btn-2--store .c-btn-2__arr::after {
        left: 55%;
    }
}

@media screen and (min-width: 768px) {
    .edge .c-btn-2--store .c-btn-2__arr::after {
        left: 53%;
    }
}

@media screen and (min-width: 768px) {
    .windows.firefox .c-btn-2--store .c-btn-2__arr::after {
        top: 40%;
    }
}

@media (hover: hover) and (pointer: fine) {
    .c-btn-2--store .c-btn-2__txt::before {
        transition: background-color 0.3s;
    }
    .c-btn-2--store:hover .c-btn-2__txt::before {
        background-color: var(--color-white-1);
    }
}
.c-btn-2--store[tabindex="-1"] {
    padding: 14px 14px 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-size: 18px;
    letter-spacing: 0.25em;
    line-height: 1;
    background-color: var(--color-blue-6);
    filter: drop-shadow(0px 2px 7px rgba(var(--color-black-1-rgb), 0.12));
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .c-btn-2--store[tabindex="-1"] {
        padding: calc(14 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw) calc(17 / var(--design-width) * 100vw);
        color: var(--color-white-1);
        font-size: calc(18 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
        filter: drop-shadow(0px calc(2 / var(--design-width) * 100vw) calc(7 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
        border-radius: 0;
    }
}
.c-btn-2--store[tabindex="-1"] .c-btn-2__txt::before {
    display: none;
}
.c-btn-2--store[tabindex="-1"] .c-btn-2__arr {
    display: none;
}
.c-btn-2--w239 {
    min-width: auto;
    width: 239px;
    margin-inline: auto;
}
@media screen and (min-width: 768px) {
    .c-btn-2--w239 {
        padding: 11px 20px 11px 26px;
    }
}
@media screen and (max-width: 767px) {
    .c-btn-2--w239 {
        position: relative;
        width: 100%;
        justify-content: center;
    }
}
.c-btn-2--w239 .ff-en {
    font-size: 20px;
    letter-spacing: 0.15em;
    margin-right: -0.4rem;
}
@media screen and (max-width: 767px) {
    .c-btn-2--w239 .ff-en {
        font-size: calc(20 / var(--design-width) * 100vw);
        letter-spacing: 0.075em;
        margin-right: -0.1rem;
    }
}
.c-btn-2--w239 .c-btn-2__arr {
    margin-top: 0;
}
@media screen and (max-width: 767px) {
    .c-btn-2--w239 .c-btn-2__arr {
        position: absolute;
        top: 50%;
        right: calc(24 / var(--design-width) * 100vw);
        transform: translateY(-50%);
    }
}
.c-btn-2--center {
    margin-inline: auto;
}
.c-btn-2--tac {
    padding-inline: 23px;
}
@media screen and (max-width: 767px) {
    .c-btn-2--tac {
        padding: calc(18 / 811 * 100vw);
        min-width: auto;
        justify-content: center;
        border-radius: calc(12 / 811 * 100vw);
    }
}
.c-btn-2--tac .c-btn-2__txt {
    font-size: 23px;
}
@media screen and (max-width: 767px) {
    .c-btn-2--tac .c-btn-2__txt {
        font-size: calc(23 / 811 * 100vw);
        letter-spacing: 0.25em;
    }
}
.c-btn-2--tac .c-btn-2__arr {
    position: absolute;
    top: 50%;
    right: 23px;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .c-btn-2--tac .c-btn-2__arr {
        right: calc(28 / 811 * 100vw);
        width: calc(22 / 811 * 100vw);
        margin-top: 0;
    }
}
@media screen and (max-width: 767px) {
    .c-btn-2--tac .c-btn-2__arr::after {
        left: 54%;
        width: calc(4 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-btn-voice
--------------------------------------------- */
.c-btn-voice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.65rem;
    width: -moz-fit-content;
    width: fit-content;
}
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .c-btn-voice {
        transition: background-color 0.3s, color 0.3s ease;
    }
    .c-btn-voice .c-btn-voice__arr {
        transition: background-color 0.3s ease;
    }
    .c-btn-voice .c-btn-voice__arr::after {
        transition: background-color 0.3s;
    }
    .c-btn-voice .c-btn-voice__bd {
        transition: border-color 0.3s ease;
    }
    .c-btn-voice .c-btn-voice__star::before, .c-btn-voice .c-btn-voice__star::after {
        transition: opacity 0.3s;
    }
    .c-btn-voice:hover .c-btn-voice__arr {
        background-color: var(--color-blue-1);
    }
    .c-btn-voice:hover .c-btn-voice__arr::after {
        background-color: var(--color-white-1);
    }
    .c-btn-voice:hover .c-btn-voice__bd {
        border-color: var(--color-blue-1);
    }
    .c-btn-voice:hover .c-btn-voice__star::before {
        opacity: 0;
    }
    .c-btn-voice:hover .c-btn-voice__star::after {
        opacity: 1;
    }
}
@media screen and (max-width: 767px) {
    .c-btn-voice {
        gap: 0.08rem;
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .c-btn-voice {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-btn-voice:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.c-btn-voice__arr {
    position: relative;
    display: block;
    width: 30px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-blue-1);
    flex-shrink: 0;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__arr {
        width: calc(30 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
        background-color: var(--color-blue-1);
    }
}
.c-btn-voice__arr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .c-btn-voice__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
        background-color: var(--color-white-1);
    }
}
.c-btn-voice__bd {
    padding-block: 0 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    border-bottom: 1px solid transparent;
    margin-top: -2px;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__bd {
        padding-block: 0;
        gap: 0.4rem;
    }
}
.c-btn-voice__txt {
    font-size: 16px;
    letter-spacing: 0.2em;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__txt {
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0;
    }
}
.c-btn-voice__star {
    position: relative;
    color: var(--color-blue-1);
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1;
    display: block;
    width: 7em;
    height: 1em;
    flex-shrink: 0;
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__star {
        font-size: calc(18 / var(--design-width) * 100vw);
        letter-spacing: -0.03em;
        width: 5em;
        height: auto;
    }
}
.c-btn-voice__star::before, .c-btn-voice__star::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
.c-btn-voice__star::before {
    content: "☆ ☆ ☆ ☆ ☆";
    opacity: 1;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__star::before {
        opacity: 0;
    }
}
.c-btn-voice__star::after {
    content: "★ ★ ★ ★ ★";
    opacity: 0;
}
@media screen and (max-width: 767px) {
    .c-btn-voice__star::after {
        opacity: 1;
    }
}

/* ---------------------------------------------
*   c-btn-sort
--------------------------------------------- */
.c-btn-sort {
    padding: calc(18 / var(--design-width) * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(20 / var(--design-width) * 100vw);
    width: 100%;
    color: var(--color-base-1);
    font-size: calc(16 / var(--design-width) * 100vw);
    font-weight: 500;
    letter-spacing: 0.075em;
    line-height: 1;
    border-radius: calc(6 / var(--design-width) * 100vw);
    background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 100%);
}
@media (hover: hover) and (pointer: fine) {
    .c-btn-sort {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-btn-sort:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.c-btn-sort::before {
    content: "";
    display: block;
    width: calc(22 / var(--design-width) * 100vw);
    aspect-ratio: 191/150;
    background: url(../img/common/ico_sort.svg) 0 0 no-repeat;
    background-size: 100% 100%;
    flex-shrink: 0;
}

/* ---------------------------------------------
*   c-btn-product
--------------------------------------------- */
.c-btn-product {
    position: fixed;
    bottom: calc(40 / var(--design-width) * 100vw);
    left: calc(var(--contents-side-padding) * 1px);
    display: flex;
    align-items: stretch;
    gap: calc(3 / var(--design-width) * 100vw);
    width: calc(100% - var(--contents-side-padding) * 2px);
}
@media screen and (max-width: 767px) {
    .c-btn-product__clear {
        padding: calc(12 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw);
        display: block;
        color: var(--color-base-1);
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1;
        border-radius: calc(6 / var(--design-width) * 100vw);
        border: 1px solid var(--color-blue-2);
        white-space: nowrap;
        cursor: pointer;
        background-color: var(--color-white-2);
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .c-btn-product__clear {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-btn-product__clear:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-btn-product__search {
        padding: calc(12 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw);
        display: block;
        width: 100%;
        color: var(--color-base-1);
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1;
        border-radius: calc(6 / var(--design-width) * 100vw);
        cursor: pointer;
        background-color: var(--color-blue-1);
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .c-btn-product__search {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-btn-product__search:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

/* ---------------------------------------------
*   c-card-4
--------------------------------------------- */
.c-card-4__link {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .c-card-4__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-card-4__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-card-4__link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .c-card-4__link:hover img {
        transform: scale(1.05);
    }
}
.c-card-4__fig-wrap {
    position: relative;
}
.c-card-4__fig {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1/1;
}
@media screen and (max-width: 767px) {
    .c-card-4__fig {
        border-radius: calc(8 / var(--design-width) * 100vw);
    }
}
.c-card-4__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition-position: center center;
}
.c-card-4__fig--news {
    aspect-ratio: 900/480;
}
.c-card-4__cat {
    position: absolute;
    bottom: -33px;
    left: 10px;
    border-radius: 50%;
    width: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    font-size: 22px;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--color-white-1);
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .c-card-4__cat {
        bottom: calc(-38 / var(--design-width) * 100vw);
        left: calc(1 / var(--design-width) * 100vw);
        width: calc(65 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}
.c-card-4__cat[data-cat=campaign] {
    background-color: var(--color-pink-1);
}
.c-card-4__date {
    padding-right: 4px;
    display: block;
    font-size: 14px;
    letter-spacing: 0.075em;
    text-align: right;
    margin-top: 10px;
}
@media screen and (max-width: 767px) {
    .c-card-4__date {
        padding-right: 0;
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(-2 / var(--design-width) * 100vw);
    }
}
.c-card-4__ttl {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 16px;
    letter-spacing: 0.025em;
    margin-top: 20px;
    padding-inline: 11px;
}
@media screen and (max-width: 767px) {
    .c-card-4__ttl {
        padding-inline: calc(5 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.3333333333;
        -webkit-line-clamp: 4;
        margin-top: calc(27 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-card-4--small .c-card-4__fig {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.c-card-4--small .c-card-4__cat {
    bottom: -22px;
    left: 7px;
    width: 66px;
    font-size: 14px;
}
@media screen and (max-width: 767px) {
    .c-card-4--small .c-card-4__cat {
        bottom: calc(-38 / var(--design-width) * 100vw);
        left: calc(2 / var(--design-width) * 100vw);
        width: calc(65 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}
.c-card-4--small .c-card-4__date {
    padding-left: 1px;
    font-size: 12px;
    margin-top: 3px;
}
@media screen and (max-width: 767px) {
    .c-card-4--small .c-card-4__date {
        padding-left: calc(1 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(-1 / var(--design-width) * 100vw);
    }
}
.c-card-4--small .c-card-4__ttl {
    padding-inline: 6px;
    font-size: 12px;
    line-height: 1.3333333333;
    margin-top: 13px;
}
@media screen and (max-width: 767px) {
    .c-card-4--small .c-card-4__ttl {
        padding-inline: calc(5 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(27 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-card-4--result .c-card-4__ttl {
        margin-top: calc(18 / var(--design-width) * 100vw);
    }
}
.c-card-4--brand {
    display: contents;
}
.c-card-4--brand .c-card-4__link {
    padding-bottom: 43px;
    border-bottom: 1px solid var(--color-blue-1);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
}
@media screen and (max-width: 767px) {
    .c-card-4--brand .c-card-4__link {
        padding-bottom: calc(28 / var(--design-width) * 100vw);
    }
}
.c-card-4--brand .c-card-4__fig {
    width: calc(257 / 357 * 100%);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .c-card-4--brand .c-card-4__fig {
        width: calc(148 / 161 * 100%);
    }
}
.c-card-4--brand .c-card-4__ttl {
    padding-inline: 18px;
    font-size: 14px;
    letter-spacing: 0.025em;
    line-height: 1.0714285714;
}
@media screen and (max-width: 767px) {
    .c-card-4--brand .c-card-4__ttl {
        padding-inline: 0;
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.1666666667;
    }
}

.term-mama-aqua-savon .c-card-4--brand .c-card-4__link {
    border-color: var(--color-pink-2);
}

.term-aqua-savon-forme .c-card-4--brand .c-card-4__link {
    border-color: var(--color-brown-1);
}

/* ---------------------------------------------
*   c-card-1
--------------------------------------------- */
.c-card-1 {
    position: relative;
    padding-block: 0 8px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 5px;
    border-bottom: 1px solid var(--color-blue-1);
}
@media (hover: hover) and (pointer: fine) {
    .c-card-1 {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-card-1:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-card-1 img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .c-card-1:hover img {
        transform: scale(1.05);
    }
}
@media screen and (max-width: 767px) {
    .c-card-1 {
        padding-block: 0;
        gap: 0;
        min-width: 0;
    }
}
.c-card-1__new {
    position: absolute;
    z-index: 1;
    top: min(-3%, -7px);
    right: 0;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white-1);
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1;
    background-color: var(--color-pink-1);
}
@media screen and (max-width: 767px) {
    .c-card-1__new {
        top: 0;
        right: auto;
        top: 0;
        width: calc(36 / var(--design-width) * 100vw);
        font-size: calc(10 / var(--design-width) * 100vw);
    }
}
.c-card-1__thumb-wrap {
    position: relative;
    width: calc(236 / 260 * 100%);
    display: block;
    margin-inline: auto;
}
@media screen and (max-width: 1024px) {
    .c-card-1__thumb-wrap {
        width: 100%;
    }
}
.c-card-1__thumb {
    aspect-ratio: 1/1;
    overflow: hidden;
    background-color: var(--color-white-1);
}
.c-card-1__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.c-card-1__lead {
    padding-inline: 3px;
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1.25;
    margin-top: 3px;
}
@media screen and (max-width: 1024px) {
    .c-card-1__lead {
        padding-inline: 0;
    }
}
@media screen and (max-width: 767px) {
    .c-card-1__lead {
        padding-inline: calc(5 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.1666666667;
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.c-card-1__detail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    letter-spacing: 0.025em;
    margin-top: 15px;
    padding-inline: 5px 3px;
}
@media screen and (max-width: 1024px) {
    .c-card-1__detail {
        padding-inline: 0;
    }
}
@media screen and (max-width: 767px) {
    .c-card-1__detail {
        padding-inline: calc(6 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw);
        gap: calc(3 / var(--design-width) * 100vw);
        margin-top: calc(15 / var(--design-width) * 100vw);
    }
}
.c-card-1__volume {
    font-size: 12px;
}
@media screen and (max-width: 767px) {
    .c-card-1__volume {
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}
.c-card-1__price {
    font-size: 14px;
}
@media screen and (max-width: 767px) {
    .c-card-1__price {
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}
.c-card-1__price-tax {
    font-size: 9px;
}
@media screen and (max-width: 767px) {
    .c-card-1__price-tax {
        font-size: calc(8 / var(--design-width) * 100vw);
        margin-left: calc(-1 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-card-2
--------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .c-card-2 {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-card-2:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
/*  c-card-2-wrap
--------------------------------------------- */
.c-card-2-wrap {
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

/* ---------------------------------------------
*   c-card-3
--------------------------------------------- */
.c-card-3 {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 5px;
}
@media (hover: hover) and (pointer: fine) {
    .c-card-3 {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-card-3:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.c-card-3__ttl {
    position: relative;
    margin-inline: auto;
}
.c-card-3__ttl::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    transform: translateY(-50%);
}
.c-card-3 img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   c-cassette-diagnosis
--------------------------------------------- */
.c-cassette-diagnosis__head {
    padding-block: 0 30px;
    border-bottom: 1px solid var(--color-black-1);
}
.c-cassette-diagnosis__terms {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.c-cassette-diagnosis__mode {
    padding-right: 5px;
    border-right: 1px solid var(--color-black-1);
}
.c-cassette-diagnosis__term-jp {
    display: block;
}
.c-cassette-diagnosis__detail {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 50px;
}
.c-cassette-diagnosis__fig {
    aspect-ratio: 16/9;
}
.c-cassette-diagnosis__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-cassette-diagnosis__item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    margin-top: 10px;
}
.c-cassette-diagnosis__term {
    width: 8em;
    flex-shrink: 0;
}
.c-cassette-diagnosis__desc {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}
.c-cassette-diagnosis__body {
    margin-top: 30px;
}

/* ---------------------------------------------
*   c-figure-1
--------------------------------------------- */
.c-figure-1 {
    display: block;
    aspect-ratio: 726/450;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .c-figure-1 {
        border-radius: calc(6 / var(--design-width) * 100vw);
        aspect-ratio: 344/213;
    }
}
.c-figure-1 img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.c-figure-2 {
    display: block;
    width: 100%;
}
.c-figure-2 img {
    width: 100%;
    border-radius: 6px;
}
@media screen and (max-width: 767px) {
    .c-figure-2 img {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}

/*  c-form-search
--------------------------------------------- */
.c-form-search {
    position: relative;
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
    height: 78px;
}
@media screen and (max-width: 767px) {
    .c-form-search {
        max-width: none;
        height: calc(42 / var(--design-width) * 100vw);
    }
}
.c-form-search__input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-inline: 1em calc(1em + 86px);
    border: 2px solid var(--color-blue-5);
    color: var(--color-base-1);
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.1em;
    border-radius: 6px;
}
@media screen and (max-width: 767px) {
    .c-form-search__input {
        position: absolute;
        padding-inline: 1em calc(1em + 13.0666666667vw);
        border-width: calc(2 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.c-form-search__submit-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 100%;
    transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
    .c-form-search__submit-btn {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-form-search__submit-btn:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-form-search__submit-btn {
        width: calc(49 / var(--design-width) * 100vw);
    }
}
.c-form-search__submit-btn img {
    width: 45px;
    height: auto;
}
@media screen and (max-width: 767px) {
    .c-form-search__submit-btn img {
        width: calc(25 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-checkbox
--------------------------------------------- */
.c-checkbox {
    position: relative;
    display: block;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .c-checkbox {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-checkbox:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-checkbox {
        display: flex;
    }
}
@media screen and (max-width: 767px) {
    .c-checkbox + .c-checkbox {
        margin-top: calc(11 / var(--design-width) * 100vw);
    }
}
.c-checkbox__input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.c-checkbox__txt {
    position: relative;
    display: inline-block;
    padding-left: 24px;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    font-family: var(--ff-root) !important;
    font-size: 14px;
    letter-spacing: 0.075em;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .c-checkbox__txt {
        padding-left: calc(33 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.2;
    }
}
.c-checkbox__txt::before, .c-checkbox__txt::after {
    content: "";
    top: 50%;
    position: absolute;
    box-sizing: border-box;
    display: inline-block;
    transform: translateY(-50%);
}
.c-checkbox__txt::before {
    left: 0;
    width: 18px;
    height: 18px;
    background-color: var(--color-white-1);
    border-radius: 50%;
}
@media screen and (max-width: 767px) {
    .c-checkbox__txt::before {
        width: calc(20 / var(--design-width) * 100vw);
        height: calc(20 / var(--design-width) * 100vw);
    }
}
.c-checkbox__txt::after {
    left: 3px;
    width: 12px;
    aspect-ratio: 18/15;
    background: url(../img/common/ico_check.svg) 0 0 no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
    .c-checkbox__txt::after {
        left: calc(4 / var(--design-width) * 100vw);
        width: calc(12 / var(--design-width) * 100vw);
    }
}
.c-checkbox__input:checked + .c-checkbox__txt::after {
    opacity: 1;
}

/* ---------------------------------------------
*   c-select
--------------------------------------------- */
.c-select {
    width: 136px;
    height: 23px;
    box-sizing: border-box;
    padding-right: 1.8em;
    padding-left: 1em;
    color: var(--color-base-1);
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1;
    border: 1px solid var(--color-blue-2);
    border-radius: 6px;
    background: url(../img/common/ico_arrow-1-ttb.svg) center right 7px no-repeat;
    background-size: 11px 5px;
    padding-bottom: 1px;
}
/* ---------------------------------------------
*   c-heading-1
--------------------------------------------- */
.c-heading-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 230px;
    color: var(--color-white-1);
    letter-spacing: 0.075em;
    text-align: center;
    background: url(../img/common/kv_img.jpg) center center no-repeat;
    background-size: cover;
    margin-top: -1px;
}
@media screen and (max-width: 767px) {
    .c-heading-1 {
        min-height: calc(100 / var(--design-width) * 100vw);
    }
}
.c-heading-1__ttl {
    margin-top: -15px;
}
@media screen and (max-width: 767px) {
    .c-heading-1__ttl {
        margin-top: calc(-13 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-heading-1__ttl--sp24 {
        margin-top: calc(-4 / var(--design-width) * 100vw);
    }
    .c-heading-1__ttl--sp24 .c-heading-1__ttl-main {
        font-size: calc(24 / var(--design-width) * 100vw);
    }
    .c-heading-1__ttl--sp24 .c-heading-1__ttl-sub {
        margin-top: calc(2 / var(--design-width) * 100vw);
    }
}
.c-heading-1__ttl-main {
    display: block;
    font-size: 48px;
}
@media screen and (max-width: 767px) {
    .c-heading-1__ttl-main {
        font-size: calc(36 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-heading-1__ttl-main--sp-30 {
        font-size: calc(30 / var(--design-width) * 100vw);
    }
}
.c-heading-1__ttl-sub {
    display: block;
    font-size: 18px;
    margin-top: 24px;
}
@media screen and (max-width: 767px) {
    .c-heading-1__ttl-sub {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(-7 / var(--design-width) * 100vw);
    }
}
.c-heading-1--jp .c-heading-1__ttl {
    margin-top: 17px;
}
@media screen and (max-width: 767px) {
    .c-heading-1--jp .c-heading-1__ttl {
        margin-top: calc(6 / var(--design-width) * 100vw);
    }
}
.c-heading-1--jp .c-heading-1__ttl-main {
    font-size: 36px;
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .c-heading-1--jp .c-heading-1__ttl-main {
        font-size: calc(24 / var(--design-width) * 100vw);
    }
}
.c-heading-1--jp .c-heading-1__ttl-sub {
    font-weight: 300;
    margin-top: 32px;
}
@media screen and (max-width: 767px) {
    .c-heading-1--jp .c-heading-1__ttl-sub {
        line-height: 1.1428571429;
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-img
--------------------------------------------- */
/* ---------------------------------------------
*   c-kv
--------------------------------------------- */
/* ---------------------------------------------
*   c-link-2
--------------------------------------------- */
.c-link-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.7rem;
}
@media (hover: hover) and (pointer: fine) {
    .c-link-2 {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-link-2:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-link-2 .c-link-2__arr {
        transition: background-color 0.3s ease;
    }
    .c-link-2 .c-link-2__arr::after {
        transition: background-color 0.3s;
    }
    .c-link-2:hover .c-link-2__arr {
        background-color: var(--color-blue-1);
    }
    .c-link-2:hover .c-link-2__arr::after {
        background-color: var(--color-white-1);
    }
}
@media screen and (max-width: 767px) {
    .c-link-2 {
        gap: 0.24rem;
        white-space: nowrap;
    }
}
.c-link-2__arr {
    position: relative;
    display: block;
    width: 30px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-blue-1);
    flex-shrink: 0;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .c-link-2__arr {
        width: calc(26 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
    }
}
.c-link-2__arr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .c-link-2__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.c-link-2__txt {
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 1.3;
}
@media screen and (max-width: 767px) {
    .c-link-2__txt {
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.17em;
    }
}
.c-link-2--large {
    gap: min(16 / var(--design-width) * 100vw, 16px);
    width: -moz-fit-content;
    width: fit-content;
}
@media screen and (max-width: 767px) {
    .c-link-2--large {
        gap: calc(7 / var(--design-width) * 100vw);
    }
}
.c-link-2--large .c-link-2__arr {
    width: min(42 / var(--design-width) * 100vw, 42px);
}
@media screen and (max-width: 767px) {
    .c-link-2--large .c-link-2__arr {
        width: calc(26 / var(--design-width) * 100vw);
    }
}
.c-link-2--large .c-link-2__arr::after {
    width: min(9 / var(--design-width) * 100vw, 9px);
}
@media screen and (max-width: 767px) {
    .c-link-2--large .c-link-2__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.c-link-2--large .c-link-2__txt {
    font-size: min(22 / var(--design-width) * 100vw, 22px);
    margin-top: min(-3 / var(--design-width) * 100vw, -3px);
}
@media screen and (max-width: 767px) {
    .c-link-2--large .c-link-2__txt {
        font-size: calc(16 / var(--design-width) * 100vw);
        margin-top: 0;
    }
}
.c-link-2--arr-small {
    gap: 0.32rem;
}
@media screen and (max-width: 767px) {
    .c-link-2--arr-small {
        justify-content: center;
        gap: 0.16rem;
    }
}
.c-link-2--arr-small .c-link-2__arr {
    width: 23px;
}
@media screen and (max-width: 767px) {
    .c-link-2--arr-small .c-link-2__arr {
        width: calc(20 / var(--design-width) * 100vw);
        background-color: var(--color-blue-1);
    }
}
.c-link-2--arr-small .c-link-2__arr::after {
    left: 54%;
    width: 8px;
}
@media screen and (max-width: 767px) {
    .c-link-2--arr-small .c-link-2__arr::after {
        width: calc(6 / var(--design-width) * 100vw);
        background-color: var(--color-white-1);
    }
}
@media screen and (max-width: 767px) {
    .c-link-2--arr-small .c-link-2__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0.075em;
    }
}

/* ---------------------------------------------
*   c-list
--------------------------------------------- */
/* ---------------------------------------------
*   c-modal
--------------------------------------------- */
@media screen and (min-width: 768px) {
    .c-modal {
        position: sticky;
        top: 176px;
    }
}
@media screen and (max-width: 767px) {
    .c-modal {
        display: none;
    }
}
.c-modal.is-modal-open {
    display: block;
}
@media screen and (max-width: 767px) {
    .c-modal__overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}
@media screen and (max-width: 767px) {
    .c-modal__inner {
        position: relative;
        padding-bottom: calc(105 / var(--design-width) * 100vw);
        width: 100%;
        max-height: 85dvh;
        background: linear-gradient(45deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 100%);
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-modal__container {
        overflow-y: auto;
        max-height: calc(85dvh - 28vw);
        /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
        -ms-overflow-style: none;
        /*Firefoxへの対応*/
        scrollbar-width: none;
    }
}
.c-modal__close {
    display: none;
}
@media screen and (max-width: 767px) {
    .c-modal__close {
        position: absolute;
        z-index: 10;
        top: calc(16 / var(--design-width) * 100vw);
        right: calc(38 / var(--design-width) * 100vw);
        display: block;
        width: calc(21 / var(--design-width) * 100vw);
        aspect-ratio: 1/1;
        cursor: pointer;
        background: url(../img/common/ico_close-2.svg) 0 0 no-repeat;
        background-size: cover;
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .c-modal__close {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-modal__close:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

@media screen and (min-width: 768px) {
    .c-modal__container::-webkit-scrollbar {
        display: none;
    }
}

/* Modal Animation Style　(アニメーション不要の場合は削除)
--------------------------------------------- */
.c-modal[aria-hidden=false] .c-modal__overlay {
    animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal[aria-hidden=true] .c-modal__overlay {
    animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal__overlay, .c-modal__container {
    will-change: transform;
}

@keyframes mmfadeIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes mmfadeOut {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}
/* ---------------------------------------------
*   c-pager
--------------------------------------------- */
.c-pager {
    padding-block: 55px 0;
}
@media screen and (max-width: 767px) {
    .c-pager {
        padding-block: calc(51 / var(--design-width) * 100vw) 0;
    }
}
.c-pager .wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1rem;
    font-family: var(--ff-en);
}
@media screen and (max-width: 767px) {
    .c-pager .wp-pagenavi {
        gap: 0.2rem;
    }
}
.c-pager .pages, .c-pager .first, .c-pager .last {
    display: none;
}
.c-pager .current, .c-pager .page, .c-pager .extend {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    aspect-ratio: 1/1;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    border-radius: 50%;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .c-pager .current, .c-pager .page, .c-pager .extend {
        font-size: calc(18 / var(--design-width) * 100vw);
        width: calc(25 / var(--design-width) * 100vw);
    }
}
.c-pager .current {
    pointer-events: none;
    background-color: var(--color-blue-2);
    filter: drop-shadow(0px 3px 2px rgba(var(--color-black-1-rgb), 0.2));
    color: var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .c-pager .current {
        filter: drop-shadow(0px calc(3 / var(--design-width) * 100vw) calc(2 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.2));
    }
}
.term-mama-aqua-savon .c-pager .current {
    background-color: var(--color-pink-2);
}

.term-aqua-savon-forme .c-pager .current {
    background-color: var(--color-brown-1);
}

@media (hover: hover) and (pointer: fine) {
    .c-pager .page {
        will-change: background-color, color, filter;
        transition: 0.3s;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        filter: drop-shadow(0px 3px 2px rgba(var(--color-black-1-rgb), 0));
    }
    .c-pager .page:hover {
        color: var(--color-white-1);
        background-color: var(--color-blue-2);
        filter: drop-shadow(0px 3px 2px rgba(var(--color-black-1-rgb), 0.2));
    }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
    .c-pager .page:hover {
        filter: drop-shadow(0px calc(3 / var(--design-width) * 100vw) calc(2 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.2));
    }
}
@media (hover: hover) and (pointer: fine) {
    .term-mama-aqua-savon .c-pager .page:hover {
        background-color: var(--color-pink-2);
    }
    .term-aqua-savon-forme .c-pager .page:hover {
        background-color: var(--color-brown-1);
    }
}
.c-pager .previouspostslink, .c-pager .nextpostslink {
    position: relative;
    color: var(--color-blue-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.075em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
@media (hover: hover) and (pointer: fine) {
    .c-pager .previouspostslink, .c-pager .nextpostslink {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-pager .previouspostslink:hover, .c-pager .nextpostslink:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-pager .previouspostslink, .c-pager .nextpostslink {
        gap: 0.2rem;
        font-size: calc(12 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
    }
}
.term-mama-aqua-savon .c-pager .previouspostslink, .term-mama-aqua-savon .c-pager .nextpostslink {
    color: var(--color-pink-2);
}

.term-aqua-savon-forme .c-pager .previouspostslink, .term-aqua-savon-forme .c-pager .nextpostslink {
    color: var(--color-brown-1);
}

.c-pager .previouspostslink {
    margin-right: 1.5rem;
}
@media screen and (max-width: 767px) {
    .c-pager .previouspostslink {
        margin-right: 0.65rem;
    }
}
.c-pager .previouspostslink::before {
    content: "";
    width: 7px;
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-1.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-1.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    margin-top: -1px;
    flex-shrink: 0;
    background-color: var(--color-blue-2);
}
@media screen and (max-width: 767px) {
    .c-pager .previouspostslink::before {
        margin-top: calc(-1 / var(--design-width) * 100vw);
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.term-mama-aqua-savon .c-pager .previouspostslink::before {
    background-color: var(--color-pink-2);
}

.term-aqua-savon-forme .c-pager .previouspostslink::before {
    background-color: var(--color-brown-1);
}

.c-pager .nextpostslink {
    margin-left: 1.5rem;
}
@media screen and (max-width: 767px) {
    .c-pager .nextpostslink {
        margin-left: 0.65rem;
    }
}
.c-pager .nextpostslink::after {
    content: "";
    width: 7px;
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-1.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-1.svg) center center no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    transform: rotate(180deg);
    margin-top: -1px;
    flex-shrink: 0;
    background-color: var(--color-blue-2);
}
@media screen and (max-width: 767px) {
    .c-pager .nextpostslink::after {
        width: calc(6 / var(--design-width) * 100vw);
        margin-top: calc(-1 / var(--design-width) * 100vw);
    }
}
.term-mama-aqua-savon .c-pager .nextpostslink::after {
    background-color: var(--color-pink-2);
}

.term-aqua-savon-forme .c-pager .nextpostslink::after {
    background-color: var(--color-brown-1);
}

/* ---------------------------------------------
*   c-section-1
--------------------------------------------- */
.c-section-1__body {
    margin-top: 83px;
}
@media screen and (max-width: 767px) {
    .c-section-1__body {
        margin-top: calc(54 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-slider-sync
--------------------------------------------- */
.c-slider-sync {
    --main-ratio: 1 / 1;
    --thumbnails-ratio-width: 525;
    --thumbnails-ratio-height: 95;
    --thumbnails-space: var(--thumbnails-ratio-height) / var(--thumbnails-ratio-width) * 100%;
    --thumbnail-ratio-width: 1;
    --thumbnail-ratio-height: 1;
    --thumbnail-ratio: var(--thumbnail-ratio-width) / var(--thumbnail-ratio-height);
    --main-thumbnails-gap: 6.3%;
    max-width: 1000px;
    margin-inline: auto;
    padding-bottom: 1px;
}
@media screen and (max-width: 767px) {
    .c-slider-sync {
        --thumbnails-ratio-width: 500;
        --thumbnails-ratio-height: 80;
    }
}
.c-slider-sync__inner {
    position: relative;
    margin-bottom: calc(var(--thumbnails-space) + var(--main-thumbnails-gap));
}
.c-slider-sync .splide {
    position: static;
}
.c-slider-sync.is-single .splide__arrow {
    display: none;
}
.c-slider-sync__thumbnail-slider .c-slider-sync__wrapper {
    position: absolute;
    bottom: calc(-1 * var(--main-ratio) * var(--thumbnails-space) - var(--main-thumbnails-gap));
    aspect-ratio: var(--thumbnails-ratio-width)/var(--thumbnails-ratio-height);
    width: 100%;
}
.c-slider-sync__thumbnail-slider .splide__slide {
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    transition: opacity 0.3s;
}
.c-slider-sync__thumbnail-slider .splide__slide:not(.is-active) {
    opacity: 0.5;
    pointer-events: all;
    overflow: hidden;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .c-slider-sync__thumbnail-slider .splide__slide:not(.is-active) {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-slider-sync__thumbnail-slider .splide__slide:not(.is-active):hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-slider-sync__thumbnail-slider .splide__slide:not(.is-active) img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .c-slider-sync__thumbnail-slider .splide__slide:not(.is-active):hover img {
        transform: scale(1.05);
    }
}
.c-slider-sync__thumbnail-slider .splide__slide:focus-visible {
    outline: 3px solid #b4e900;
    outline-offset: -3px;
}
.c-slider-sync .splide__arrow {
    --arrow-pos-x: 7px;
    position: absolute;
    top: 50%;
    z-index: 1;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 30px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--color-blue-5);
    box-sizing: border-box;
    touch-action: manipulation;
    cursor: pointer;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .c-slider-sync .splide__arrow {
        width: calc(20 / var(--design-width) * 100vw);
        --arrow-pos-x: pxtovw(20);
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-slider-sync .splide__arrow {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-slider-sync .splide__arrow:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.c-slider-sync .splide__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-1.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-1.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-white-1);
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
    .c-slider-sync .splide__arrow::before {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.c-slider-sync .splide__arrow--prev {
    left: var(--arrow-pos-x);
}
@media screen and (max-width: 767px) {
    .c-slider-sync .splide__arrow--prev {
        left: calc(3 / var(--design-width) * 100vw);
    }
}
.c-slider-sync .splide__arrow--next {
    right: var(--arrow-pos-x);
}
@media screen and (max-width: 767px) {
    .c-slider-sync .splide__arrow--next {
        right: calc(3 / var(--design-width) * 100vw);
    }
}
.c-slider-sync .splide__arrow--next::before {
    transform: translate(-50%, -50%) rotate(180deg);
}
.c-slider-sync__main-slider .c-slider-sync__img {
    aspect-ratio: var(--main-ratio);
}
.c-slider-sync__thumbnail-slider .c-slider-sync__img {
    aspect-ratio: var(--thumbnail-ratio);
}
.c-slider-sync__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    vertical-align: bottom;
}

/* ---------------------------------------------
*   c-slider-varieble
--------------------------------------------- */
.c-slider-varieble {
    position: relative;
    aspect-ratio: 1920/740;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .c-slider-varieble {
        aspect-ratio: 375/500;
    }
}
.c-slider-varieble .swiper-wrapper {
    transition-timing-function: linear !important;
}
.c-slider-varieble .swiper-slide {
    width: calc(var(--slide-width-pc) / var(--design-width) * 100%);
}
@media screen and (max-width: 767px) {
    .c-slider-varieble .swiper-slide {
        width: calc(var(--slide-width-sp) / var(--design-width) * 100%);
    }
}
.c-slider-varieble .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-slider-varieble .swiper-button-prev, .c-slider-varieble .swiper-button-next {
    display: none;
}
.c-slider-varieble .swiper-pagination {
    display: none;
}
.c-slider-varieble__logo {
    position: absolute;
    z-index: 1;
    top: 43.4%;
    left: 50%;
    display: block;
    width: min(604 / var(--design-width) * 100vw, 604px);
    transform: translate(-50%, 0);
}
@media screen and (max-width: 767px) {
    .c-slider-varieble__logo {
        top: 50%;
        width: calc(340 / var(--design-width) * 100vw);
        transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 767px) {
    .c-slider-varieble--mama {
        aspect-ratio: 375/640;
    }
}
.c-slider-varieble--mama .c-slider-varieble__logo {
    top: 7.3%;
    width: min(609 / var(--design-width) * 100vw, 609px);
}
@media screen and (max-width: 767px) {
    .c-slider-varieble--mama .c-slider-varieble__logo {
        top: 4.7%;
        width: calc(186 / var(--design-width) * 100vw);
        transform: translate(-50%, 0);
    }
}

/* ---------------------------------------------
*   c-slider-fixed
--------------------------------------------- */
.c-slider-fixed {
    position: relative;
}
.c-slider-fixed .swiper-slide {
    width: 400px;
}
.c-slider-fixed .swiper-slide img {
    width: 100%;
}
.c-slider-fixed .swiper-button-prev, .c-slider-fixed .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: 50%;
    display: block;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-black-1);
    transform: translateY(-50%);
    background-color: var(--color-white-1);
}
.c-slider-fixed .swiper-button-prev {
    left: 0;
    transform: translateY(-50%) rotate(180deg);
}
.c-slider-fixed .swiper-button-next {
    right: 0;
}
.c-slider-fixed__link {
    display: block;
    border: 5px solid var(--color-black-1);
}
@media (hover: hover) and (pointer: fine) {
    .c-slider-fixed__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-slider-fixed__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.c-slider-fixed__inner {
    background-color: lightgray;
}

/* ---------------------------------------------
*   c-loop-slider
--------------------------------------------- */
.c-loop-slider {
    display: flex;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1920/740;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .c-loop-slider {
        aspect-ratio: 375/500;
    }
}
.c-loop-slider__list {
    display: flex;
    flex-shrink: 0;
    animation: infiniteLoop 60s linear 0.5s infinite both;
}
.c-loop-slider__item {
    width: calc(var(--slide-width-pc) / var(--design-width) * 100vw);
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .c-loop-slider__item {
        width: calc(var(--slide-width-sp) / var(--design-width) * 100vw);
    }
}
.c-loop-slider__item img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: cover;
       object-fit: cover;
}
.c-loop-slider__img {
    display: block;
    width: 100%;
    height: 100%;
}
.c-loop-slider__logo {
    position: absolute;
    z-index: 1;
    top: 43.4%;
    left: 50%;
    display: block;
    width: min(604 / var(--design-width) * 100vw, 604px);
    transform: translate(-50%, 0);
}
@media screen and (max-width: 767px) {
    .c-loop-slider__logo {
        top: 50%;
        width: calc(340 / var(--design-width) * 100vw);
        transform: translate(-50%, -50%);
    }
}
.c-loop-slider--mama .c-loop-slider__logo {
    top: 7.3%;
    width: min(609 / var(--design-width) * 100vw, 609px);
}
@media screen and (max-width: 767px) {
    .c-loop-slider--mama .c-loop-slider__logo {
        top: 4.7%;
        width: calc(186 / var(--design-width) * 100vw);
        transform: translate(-50%, 0);
    }
}

@keyframes infiniteLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes infiniteLoop2 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
/* ---------------------------------------------
*   c-table
--------------------------------------------- */
/* ---------------------------------------------
*   c-tabs-2
--------------------------------------------- */
.c-tabs-2 {
    max-width: 1000px;
    margin-inline: auto;
}
.c-tabs-2__tab-list {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.c-tabs-2__tab-list--1 {
    grid-template-columns: repeat(1, 1fr);
}
.c-tabs-2__tab-list--2 {
    grid-template-columns: repeat(2, 1fr);
}
.c-tabs-2__tab-list--3 {
    grid-template-columns: repeat(3, 1fr);
}
.c-tabs-2__tab {
    position: relative;
    padding: 5px 5px 11px;
    cursor: pointer;
    text-align: center;
    color: var(--color-base-1);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.2em;
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .c-tabs-2__tab {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-tabs-2__tab:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-tabs-2__tab {
        padding: calc(7 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
        font-size: calc(20 / var(--design-width) * 100vw);
        font-weight: 400;
        letter-spacing: 0.05em;
    }
}
.c-tabs-2__tab::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    display: block;
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background-color: var(--color-blue-1);
    opacity: 0;
    transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
    .c-tabs-2__tab::after {
        bottom: calc(-6 / var(--design-width) * 100vw);
        height: calc(9 / var(--design-width) * 100vw);
    }
}
.c-tabs-2__tab.is-current {
    pointer-events: none;
}
.c-tabs-2__tab.is-current::after {
    opacity: 1;
}
.c-tabs-2__body {
    border-top: 2px solid var(--color-blue-1);
    background-color: var(--color-white-2);
}
@media screen and (max-width: 767px) {
    .c-tabs-2__body {
        border-width: calc(2 / var(--design-width) * 100vw);
    }
}
.c-tabs-2__tab-panel {
    padding: 60px 25px;
}
@media screen and (max-width: 767px) {
    .c-tabs-2__tab-panel {
        padding: calc(25 / var(--design-width) * 100vw) calc(18 / var(--design-width) * 100vw);
    }
}
.c-tabs-2__tab-panel[data-target-id=incense-tone] {
    padding: 84px 18px;
}
@media screen and (max-width: 767px) {
    .c-tabs-2__tab-panel[data-target-id=incense-tone] {
        padding: calc(39 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw) calc(33 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-tabs-3
--------------------------------------------- */
@media screen and (max-width: 767px) {
    .c-tabs-3 {
        margin-top: calc(23 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__tab-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-radius: 999px;
    background-color: var(--color-white-2);
}
@media screen and (max-width: 767px) {
    .c-tabs-3__tab-list {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(12 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
        margin-inline: 0;
        border-radius: initial;
        background-color: initial;
    }
}
.c-tabs-3__trigger {
    padding: 1px 5px 6px;
    cursor: pointer;
    text-align: center;
    color: var(--color-base-1);
    background-color: var(--color-white-2);
    transition: background-color 0.3s, color 0.3s;
    will-change: background-color, color;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    border-radius: 999px;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__trigger {
        padding: calc(1 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__trigger.is-current {
    background-color: var(--color-blue-1);
    color: var(--color-white-1);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .c-tabs-3__trigger:hover {
        background-color: var(--color-blue-1);
        color: var(--color-white-1);
    }
}
.c-tabs-3__trigger.js-tab-trigger {
    padding-block: 5px 6px;
    display: block;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__trigger.js-tab-trigger {
        padding-block: calc(5 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__trigger.js-tab-trigger .c-tabs-3__trigger-jp {
    margin-top: -4px;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__trigger.js-tab-trigger .c-tabs-3__trigger-jp {
        margin-top: calc(-4 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__trigger-en {
    display: block;
    font-size: 20px;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__trigger-en {
        font-size: calc(18 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__trigger-jp {
    display: block;
    font-size: 10px;
    margin-top: -6px;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__trigger-jp {
        font-size: calc(10 / var(--design-width) * 100vw);
        margin-top: calc(-7 / var(--design-width) * 100vw);
    }
}
.c-tabs-3__body {
    margin-top: 48px;
}
@media screen and (max-width: 767px) {
    .c-tabs-3__body {
        margin-top: calc(25 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-tag-1
--------------------------------------------- */
.c-tag-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px;
    width: 204px;
    font-size: 17px;
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: center;
    border-radius: 999px;
    margin-left: 10px;
}
@media screen and (max-width: 767px) {
    .c-tag-1 {
        padding: calc(6 / var(--design-width) * 100vw) calc(10 / var(--design-width) * 100vw);
        width: calc(174 / var(--design-width) * 100vw);
        font-size: calc(15 / var(--design-width) * 100vw);
        margin-left: 0;
    }
}
.c-tag-1[data-cat=aqua-savon] {
    background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 30%, rgba(var(--color-blue-4-rgb), 1) 100%);
}
.c-tag-1[data-cat=mama-aqua-savon] {
    background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-pink-2-rgb), 1) 30%, rgba(var(--color-pink-2-rgb), 1) 100%);
}
.c-tag-1[data-cat=aqua-savon-forme] {
    background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-brown-1-rgb), 1) 30%, rgba(var(--color-brown-1-rgb), 1) 100%);
}
.c-tag-1--small {
    padding: 4px;
    font-size: 10px;
    width: 119px;
    margin-left: 4px;
}
@media screen and (max-width: 767px) {
    .c-tag-1--small {
        padding: calc(5 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw);
        font-size: calc(8 / var(--design-width) * 100vw);
        width: calc(93 / var(--design-width) * 100vw);
        height: calc(12 / var(--design-width) * 100vw);
        margin-left: calc(6 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.c-tag-1--middle {
    padding: 7px 4px;
    font-size: 14px;
    width: 167px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .c-tag-1--middle {
        padding: calc(3 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        width: calc(167 / var(--design-width) * 100vw);
        height: calc(28 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-tag-4
--------------------------------------------- */
.c-tag-4 {
    padding: 8px 25px 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    letter-spacing: 0.075em;
    line-height: 1;
    background-color: var(--color-blue-1);
    color: var(--color-white-1);
}
@media screen and (min-width: 768px) {
    .windows.firefox .c-tag-4 {
        padding-bottom: 10px;
    }
}

@media screen and (min-width: 768px) {
    .ipad .c-tag-4 {
        padding-top: 7px;
    }
}

@media screen and (max-width: 767px) {
    .c-tag-4 {
        padding: calc(5 / var(--design-width) * 100vw) calc(16 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}
.c-tag-4[data-cat=campaign] {
    background-color: var(--color-pink-1);
}

/* ---------------------------------------------
*   c-tag-5
--------------------------------------------- */
.c-tag-5 {
    padding: 14px 14px 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 377px;
    border-radius: 12px;
    font-size: 18px;
    letter-spacing: 0.25em;
    line-height: 1;
    background-color: var(--color-blue-6);
    filter: drop-shadow(0px 2px 7px rgba(var(--color-black-1-rgb), 0.12));
}
@media screen and (max-width: 767px) {
    .c-tag-5 {
        padding: calc(14 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw) calc(17 / var(--design-width) * 100vw);
        max-width: none;
        color: var(--color-white-1);
        font-size: calc(18 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
        filter: drop-shadow(0px calc(2 / var(--design-width) * 100vw) calc(7 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
        border-radius: 0;
    }
}

/* ---------------------------------------------
*   c-tag-2
--------------------------------------------- */
.c-tag-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    border: 1px solid var(--color-black-1);
    font-weight: bold;
    text-align: center;
}

/* ---------------------------------------------
*   c-tag-3
--------------------------------------------- */
.c-tag-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px 5px;
    border-radius: 999px;
    background-color: lightgray;
    font-weight: bold;
    text-align: center;
}

/* ---------------------------------------------
*   c-tile-1
--------------------------------------------- */
.c-tile-1 {
    display: grid;
}
.c-tile-1--2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--2col {
        grid-template-columns: repeat(1, 1fr);
    }
}
.c-tile-1--product-detail {
    padding-top: 45px;
    grid-template: auto auto/calc(525 / 1120 * 100%) calc(550 / 1120 * 100%);
    gap: calc(35 / 1120 * 100%);
}
@media screen and (max-width: 767px) {
    .c-tile-1--product-detail {
        padding-top: calc(40 / var(--design-width) * 100vw);
        grid-template-columns: repeat(1, 1fr);
        gap: calc(25 / var(--design-width) * 100vw);
    }
}
.c-tile-1--3col {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--3col {
        grid-template-columns: repeat(1, 1fr);
    }
}
.c-tile-1--3col-wide {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 25px;
}
@media screen and (max-width: 1024px) {
    .c-tile-1--3col-wide {
        gap: 10px;
    }
}
@media screen and (max-width: 767px) {
    .c-tile-1--3col-wide {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(9 / var(--design-width) * 100vw) calc(15 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .c-tile-1--3col-wide .c-tile-1__item:nth-of-type(n + 4) .c-card-1 {
        margin-top: 48px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .c-tile-1--3col-wide .c-tile-1__item:nth-of-type(n + 4) .c-card-1 {
        margin-top: 30px;
    }
}
.c-tile-1--3col-wider {
    grid-template-columns: repeat(3, 1fr);
    gap: 46px 22px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--3col-wider {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(11 / var(--design-width) * 100vw) calc(15 / var(--design-width) * 100vw);
    }
}
.c-tile-1--3col-brand {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 25px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--3col-brand {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(36 / var(--design-width) * 100vw) calc(15 / var(--design-width) * 100vw);
    }
}
.c-tile-1--4col {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--4col {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(21 / var(--design-width) * 100vw);
    }
}
.c-tile-1--4col-narrow {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media screen and (max-width: 767px) {
    .c-tile-1--4col-narrow {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(12 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 1024px) {
    .c-tile-1--sp2col {
        gap: 50px 15px;
    }
}
@media screen and (max-width: 767px) {
    .c-tile-1--sp2col {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(24 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
}
.c-tile-1__item--subgrid {
    display: contents;
}

/* ---------------------------------------------
*   c-ttl-1 H01：40px（KV用）
--------------------------------------------- */
.c-ttl-1 {
    font-size: 40px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .c-ttl-1 {
        font-size: calc(28 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-ttl-2 H02：32px（セクションタイトル）
--------------------------------------------- */
.c-ttl-2 {
    font-size: 32px;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .c-ttl-2 {
        font-size: calc(24 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-ttl-3 H03：24px（小セクション、見出し）
--------------------------------------------- */
.c-ttl-3 {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.3333333333;
}
@media screen and (max-width: 767px) {
    .c-ttl-3 {
        font-size: calc(20 / var(--design-width) * 100vw);
        line-height: 1.2;
    }
}
@media screen and (min-width: 768px) {
    .c-ttl-3--s {
        font-size: 20px;
    }
}

/* ---------------------------------------------
*   c-ttl-4 H04：18px（小見出し）
--------------------------------------------- */
.c-ttl-4 {
    font-size: 18px;
    font-weight: 300;
}
@media screen and (max-width: 767px) {
    .c-ttl-4 {
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-ttl-5
--------------------------------------------- */
.c-ttl-5 {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.075em;
    line-height: 1;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .c-ttl-5 {
        font-size: calc(18 / var(--design-width) * 100vw);
    }
}
.c-ttl-5::before, .c-ttl-5::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
}
.c-ttl-5::before {
    z-index: -3;
    width: 100%;
    height: 3px;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .c-ttl-5::before {
        height: calc(2 / var(--design-width) * 100vw);
    }
}
.c-ttl-5::after {
    z-index: -2;
    width: 300px;
    height: 100%;
    background-color: var(--color-white-3);
}
@media screen and (max-width: 767px) {
    .c-ttl-5::after {
        width: calc(200 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-ttl-6
--------------------------------------------- */
.c-ttl-6__en {
    position: relative;
    padding-block: 0 21px;
    font-size: 32px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .c-ttl-6__en {
        font-size: calc(24 / var(--design-width) * 100vw);
        padding-block: 0 calc(12 / var(--design-width) * 100vw);
    }
}
.c-ttl-6__en::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 48px;
    height: 1px;
    background-color: var(--color-base-1);
    transform: translateX(-50%);
}
.fc-white .c-ttl-6__en::after {
    background-color: var(--color-white-1);
}

@media screen and (max-width: 767px) {
    .c-ttl-6__en::after {
        width: calc(30 / var(--design-width) * 100vw);
    }
}
.c-ttl-6__jp {
    display: block;
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-top: 39px;
}
@media screen and (max-width: 767px) {
    .c-ttl-6__jp {
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(23 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .c-ttl-6--vw .c-ttl-6__en {
        padding-block: 0 min(21 / var(--contents-width) * 100vw, 21px);
        font-size: min(32 / var(--contents-width) * 100vw, 32px);
    }
    .c-ttl-6--vw .c-ttl-6__en::after {
        width: min(48 / var(--contents-width) * 100vw, 48px);
    }
    .c-ttl-6--vw .c-ttl-6__jp {
        font-size: min(16 / var(--contents-width) * 100vw, 16px);
    }
}

/* ---------------------------------------------
*   c-ttl-7
--------------------------------------------- */
.c-ttl-7 {
    font-size: 36px;
    letter-spacing: 0.15em;
}
@media screen and (max-width: 767px) {
    .c-ttl-7 {
        font-size: calc(24 / var(--design-width) * 100vw);
        letter-spacing: 0.08em;
        line-height: 1.75;
    }
}

/* ---------------------------------------------
*   c-txt-1 Body：16px（本文、UI標準）
--------------------------------------------- */
.c-txt-1 {
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 2.75;
}
@media screen and (max-width: 767px) {
    .c-txt-1 {
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}
.c-txt-1--vw {
    font-size: min(16 / var(--contents-width) * 100vw, 16px);
}
@media screen and (min-width: 768px) {
    .c-txt-1--border {
        position: relative;
    }
    .c-txt-1--border::before {
        content: "";
        position: absolute;
        top: -0.95rem;
        left: 0;
        display: block;
        width: 48px;
        height: 1px;
        background-color: var(--color-base-1);
    }
}
.c-txt-1--lh2 {
    line-height: 2;
}
.c-txt-1--lh15 {
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    .c-txt-1--sp-small {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}
@media screen and (max-width: 767px) {
    .c-txt-1--sp-middle {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: -0.12em;
        line-height: 3.2142857143;
    }
}
@media screen and (max-width: 767px) {
    .c-txt-1--sp-narrow {
        letter-spacing: 0.025em;
    }
}

/* ---------------------------------------------
*   c-txt-2 Small：14px（補足、タグ）
--------------------------------------------- */
.c-txt-2 {
    font-size: 14px;
    line-height: 2.6428571429;
}
@media screen and (max-width: 767px) {
    .c-txt-2 {
        font-size: calc(13 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .c-txt-2--sp-middle {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0.075em;
        line-height: 2.6428571429;
    }
}

/* ---------------------------------------------
*   c-txt-3 Caption：12px（注意書き）
--------------------------------------------- */
.c-txt-3 {
    font-size: 12px;
}
@media screen and (max-width: 767px) {
    .c-txt-3 {
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   c-txt-4
--------------------------------------------- */
.c-txt-4 {
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .c-txt-4 {
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}
@media screen and (max-width: 767px) {
    .c-txt-4--small {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}

/* ---------------------------------------------
*   c-txt-5
--------------------------------------------- */
.c-txt-5 {
    display: block;
    font-size: 24px;
    letter-spacing: 0.075em;
    line-height: 3;
}
@media screen and (max-width: 767px) {
    .c-txt-5 {
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1.7777777778;
    }
}
@media screen and (max-width: 767px) {
    .c-txt-5--small {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0;
        line-height: 1.7857142857;
    }
}

/* ---------------------------------------------
*   c-wysiwyg
--------------------------------------------- */
.c-wysiwyg::after {
    content: "";
    display: block;
    clear: both;
}

/* c-wysiwyg default
--------------------------------------------- */
.c-wysiwyg {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.6666666667;
    }
}
.c-wysiwyg > :first-child {
    margin-top: 0 !important;
}
.c-wysiwyg > :last-child {
    margin-bottom: 0 !important;
}
.c-wysiwyg > * {
    margin-block: 1rem;
}
.c-wysiwyg sup {
    vertical-align: super;
    font-size: smaller;
}
.c-wysiwyg sub {
    vertical-align: sub;
    font-size: smaller;
}
.c-wysiwyg h1, .c-wysiwyg h2, .c-wysiwyg h3 {
    margin-top: 3rem;
}
.c-wysiwyg h4, .c-wysiwyg h5, .c-wysiwyg h6 {
    margin-top: 2rem;
}
.c-wysiwyg h1, .c-wysiwyg h2, .c-wysiwyg h3, .c-wysiwyg h4, .c-wysiwyg h5, .c-wysiwyg h6 {
    font-weight: 700;
}
.c-wysiwyg h2 {
    position: relative;
    padding-block: 0 20px;
    display: block;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.7333333333;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg h2 {
        padding-block: 0 calc(10 / var(--design-width) * 100vw);
        font-size: calc(20 / var(--design-width) * 100vw);
        letter-spacing: 0.1em;
        line-height: 1.75;
    }
}
.c-wysiwyg h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 48px;
    height: 1px;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .c-wysiwyg h2::before {
        width: calc(48 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg h3 {
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: center;
    margin-top: 1.3rem;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg h3 {
        font-size: calc(12 / var(--design-width) * 100vw);
        font-weight: 300;
        line-height: 1.6666666667;
        margin-top: 1rem;
    }
}
.c-wysiwyg i,
.c-wysiwyg strong {
    font-weight: bold;
}
.c-wysiwyg p {
    margin-top: 1.9rem;
    margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg p {
        margin-block: 0.6rem;
    }
}
.c-wysiwyg em {
    font-style: italic;
}
.c-wysiwyg a {
    text-decoration: underline;
    text-underline-offset: 7px;
}
@media (hover: hover) and (pointer: fine) {
    .c-wysiwyg a:hover {
        text-decoration: none;
        text-underline-offset: 0;
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-wysiwyg a {
        transition: opacity var(--hover-duration) ease !important;
    }
    .c-wysiwyg a:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .c-wysiwyg a {
        text-underline-offset: calc(4 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg ul {
    list-style-type: none !important;
}
.c-wysiwyg ul li {
    padding-left: 1.3rem;
    position: relative;
    display: list-item;
    text-align: -webkit-match-parent;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg ul li {
        padding-left: 0.6rem;
    }
}
.c-wysiwyg ul li::before {
    content: "";
    position: absolute;
    top: 0.7em;
    left: 0;
    display: block;
    width: 9px;
    aspect-ratio: 1/1;
    background-color: var(--color-blue-1);
    border-radius: 50%;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg ul li::before {
        top: 0.45em;
        width: calc(9 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg ol {
    list-style-type: none !important;
    counter-reset: num;
}
.c-wysiwyg ol li {
    position: relative;
    counter-increment: num;
    padding-left: 1.4rem;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg ol li {
        padding-left: 0.6rem;
    }
}
.c-wysiwyg ol li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: counter(num) ".";
    font-family: var(--ff-en);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg ol li::before {
        top: -0.1em;
        font-size: calc(15 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg blockquote {
    position: relative;
    padding: 2.6em 4.4em 0.7em;
    max-width: 640px;
    line-height: 1.7142857143 !important;
    margin-inline: auto;
    filter: drop-shadow(0px 6px 16px rgba(var(--color-black-1-rgb), 0.12));
    border-radius: 12px;
    background-color: var(--color-white-1);
    transform: translateZ(0);
}
.c-wysiwyg blockquote > :first-child {
    margin-top: 0 !important;
}
.c-wysiwyg blockquote > :last-child {
    margin-bottom: 0 !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg blockquote {
        padding: 4.6em 2.5em 1em;
        font-size: calc(12 / var(--design-width) * 100vw) !important;
        line-height: 2 !important;
        border-radius: calc(12 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(5 / var(--design-width) * 100vw) calc(16 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
    }
}
.c-wysiwyg blockquote .has-text-align-right {
    position: relative;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    color: var(--color-gray-5);
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-right: -2.3rem;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg blockquote .has-text-align-right {
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-right: -0.5rem;
        margin-top: 0.8rem;
    }
}
.c-wysiwyg blockquote .has-text-align-right::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: -53px;
    display: block;
    width: 43px;
    height: 1px;
    background-color: var(--color-gray-5);
    display: block;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg blockquote .has-text-align-right::before {
        top: 0.4rem;
        left: calc(-53 / var(--design-width) * 100vw);
        width: calc(43 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg blockquote::before {
    content: "“";
    position: absolute;
    top: -32px;
    left: 10px;
    display: block;
    color: var(--color-blue-1);
    font-family: var(--ff-en);
    font-size: 138px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg blockquote::before {
        top: calc(-32 / var(--design-width) * 100vw);
        left: calc(10 / var(--design-width) * 100vw);
        font-size: calc(138 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg pre {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.c-wysiwyg del {
    text-decoration: line-through;
}
.c-wysiwyg hr {
    display: block;
    border: none;
    border-top: #9a9a9a 1px solid;
    border-bottom: #eee 1px solid;
}
.c-wysiwyg code {
    background-color: #eee;
    padding: 0.1em 0.4em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    word-break: break-all;
}
.c-wysiwyg .aligncenter {
    display: block;
    max-width: 100%;
    margin: 1rem auto;
}
.c-wysiwyg .alignright {
    float: right;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-left: 1rem;
}
.c-wysiwyg .alignleft {
    float: left;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-right: 1rem;
}
.c-wysiwyg img[class*=wp-image-],
.c-wysiwyg img[class*=attachment-] {
    height: auto;
    max-width: 100%;
}
.c-wysiwyg .wp-caption {
    max-width: 100%;
    text-align: left;
}
.c-wysiwyg .wp-caption img {
    width: 100%;
}
.c-wysiwyg .wp-caption-text {
    display: block;
    padding: 0.5em 1rem 0;
    text-align: left;
    color: #8a8a8a;
    font-size: 0.875em;
    margin: 0;
}
.c-wysiwyg table {
    margin-top: 1em;
    margin-bottom: 1em;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
.c-wysiwyg table th,
.c-wysiwyg table td {
    padding: 0.5em;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    word-break: break-all;
}
.c-wysiwyg table th {
    background-color: #eee;
}
.c-wysiwyg .wp-block-image {
    border-radius: 10px;
    border: 10px solid var(--color-white-1);
    background-color: var(--color-white-1);
    width: -moz-fit-content;
    width: fit-content;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-image {
        border-width: calc(8 / var(--design-width) * 100vw);
        border-radius: calc(8 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-image img {
    border-radius: 10px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-image img {
        border-radius: calc(8 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-image > * {
    margin-block: 0 !important;
}
.c-wysiwyg .wp-block-image:has(.aligncenter) {
    margin-inline: auto;
}
.c-wysiwyg .wp-block-image:has(.alignright) {
    margin-left: auto;
    margin-right: 0;
}
.c-wysiwyg .wp-block-gallery {
    gap: 26px 38px !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery {
        gap: calc(14 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw) !important;
    }
}
.c-wysiwyg .wp-block-gallery .wp-block-image {
    position: relative;
    display: block !important;
    flex-grow: inherit !important;
    width: calc((100% - 76px) / 3) !important;
    border-radius: 0;
    border: none;
    max-width: none;
    aspect-ratio: auto;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery .wp-block-image {
        width: calc((100% - 5.3333333333vw) / 2) !important;
    }
}
.c-wysiwyg .wp-block-gallery .wp-block-image:before {
    display: none !important;
}
.c-wysiwyg .wp-block-gallery .wp-block-image:has(figcaption)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50% !important;
    display: block !important;
    width: calc(100% - 12px) !important;
    height: 2px !important;
    background-color: var(--color-blue-3);
    transform: translateX(-50%);
    -webkit-mask-image: none !important;
            mask-image: none !important;
    max-height: none !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery .wp-block-image:has(figcaption)::before {
        width: calc(100% - 4.2666666667vw) !important;
        height: calc(1 / var(--design-width) * 100vw) !important;
    }
}
.c-wysiwyg .wp-block-gallery .wp-block-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: var(--color-white-1);
    border-radius: 4px;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery .wp-block-image::after {
        border-radius: calc(4 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-gallery .wp-block-image img {
    position: relative;
    z-index: 1;
    aspect-ratio: 1/1;
    border-radius: 4px;
    width: calc(100% - 12px) !important;
    height: auto !important;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    margin: 6px auto !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery .wp-block-image img {
        width: calc(100% - 2.1333333333vw) !important;
        margin: calc(4 / var(--design-width) * 100vw) auto !important;
        border-radius: calc(4 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-gallery .wp-block-image figcaption {
    position: static !important;
    padding: 0.9em 0em 0.6em !important;
    display: block;
    color: var(--color-base-1) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.7142857143 !important;
    text-align: center;
    text-shadow: none !important;
    background: none !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-gallery .wp-block-image figcaption {
        padding: 0.5em 0em 0.9em !important;
        font-size: calc(10 / var(--design-width) * 100vw) !important;
        line-height: 1.4 !important;
    }
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-button {
        margin-inline: auto !important;
    }
}
.c-wysiwyg .wp-block-button a {
    position: relative;
    padding: 9px 45px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-base-1);
    background-color: var(--color-blue-3);
    filter: drop-shadow(0px 2px 6px rgba(var(--color-black-1-rgb), 0.12));
    min-width: 267px;
    font-size: 18px;
    letter-spacing: 0.25em;
    flex-shrink: 0;
    text-decoration: none;
    transform: translateZ(0);
    will-change: background-color, color;
    backface-visibility: hidden;
    cursor: pointer !important;
    z-index: 1;
    pointer-events: all !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-button a {
        padding: calc(11 / var(--design-width) * 100vw) calc(45 / var(--design-width) * 100vw) calc(12 / var(--design-width) * 100vw);
        gap: 0.35rem;
        border-radius: calc(12 / var(--design-width) * 100vw);
        font-size: calc(18 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(2 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.12));
        min-width: calc(267 / var(--design-width) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-wysiwyg .wp-block-button a {
        transition: background-color 0.3s, color 0.3s ease !important;
    }
    .c-wysiwyg .wp-block-button a::before {
        transition: border-color 0.3s ease;
    }
    .c-wysiwyg .wp-block-button a::after {
        transition: background-color 0.3s;
    }
    .c-wysiwyg .wp-block-button a:hover {
        background-color: var(--color-blue-1);
        color: var(--color-white-1);
        text-decoration: none;
    }
    .c-wysiwyg .wp-block-button a:hover::before {
        border-color: var(--color-white-1);
    }
    .c-wysiwyg .wp-block-button a:hover::after {
        background-color: var(--color-white-1);
    }
}
.c-wysiwyg .wp-block-button a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 19px;
    display: block;
    width: 17px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-base-1);
    flex-shrink: 0;
    transform: translateY(-50%);
    will-change: border-color;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-button a::before {
        width: calc(17 / var(--design-width) * 100vw);
        border-width: calc(1 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-button a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 21px;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-base-1);
    will-change: background-color;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-button a::after {
        width: calc(6 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-button.is-style-outline a {
    background-color: transparent;
    color: var(--color-base-1);
    border: 1px solid var(--color-blue-3);
}
.c-wysiwyg .wp-block-button.is-style-outline a::before {
    display: none;
}
.c-wysiwyg .wp-block-button.is-style-outline a::after {
    top: 51%;
    width: 9px;
    background-color: var(--color-blue-3);
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-button.is-style-outline a::after {
        width: calc(9 / var(--design-width) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-wysiwyg .wp-block-button.is-style-outline a:hover {
        color: var(--color-white-1);
        background-color: var(--color-blue-1);
    }
    .c-wysiwyg .wp-block-button.is-style-outline a:hover::after {
        background-color: var(--color-white-1);
    }
}
.c-wysiwyg .wp-block-accordion-item {
    max-width: 800px;
    margin-inline: auto;
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle {
    padding: 14px 16px;
    flex-direction: row-reverse;
    gap: 12px;
    color: var(--color-base-1) !important;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.075em;
    line-height: 1.3333333333;
    text-decoration: none;
    border-radius: 8px;
    background-color: var(--color-blue-3) !important;
    text-align: left;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle {
        padding: calc(6 / var(--design-width) * 100vw) calc(14 / var(--design-width) * 100vw);
        gap: calc(18 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.4285714286;
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle {
        transition: opacity 0.3s;
    }
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover {
        background-color: var(--color-blue-3) !important;
        opacity: 0.8;
    }
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
        text-decoration: none !important;
    }
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle-icon {
    position: relative;
    color: var(--color-blue-3);
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle-icon {
        width: 1.2em;
    }
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 11px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-heading__toggle-icon::after {
        width: calc(12 / var(--design-width) * 100vw);
        transform: translate(0, -50%);
    }
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-panel {
    padding: 17px 48px 24px;
    border-radius: 0 0 8px 8px;
    background-color: var(--color-white-1);
    border: 2px solid var(--color-blue-3);
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-accordion-item .wp-block-accordion-panel {
        padding: calc(10 / var(--design-width) * 100vw) calc(21 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
        border-radius: 0 0 calc(6 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw) !important;
        letter-spacing: 0.075em;
        line-height: 1.6666666667;
        border-width: calc(2 / var(--design-width) * 100vw);
    }
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-panel > :first-child {
    margin-top: 0 !important;
}
.c-wysiwyg .wp-block-accordion-item .wp-block-accordion-panel > :last-child {
    margin-bottom: 0 !important;
}
.c-wysiwyg .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
    border-radius: 8px 8px 0 0;
}
@media screen and (max-width: 767px) {
    .c-wysiwyg .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
        border-radius: calc(6 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw) 0 0;
    }
}
.c-wysiwyg .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(90deg) !important;
}
.c-wysiwyg .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none !important;
}

[data-target-id=product-description] .c-wysiwyg p, [data-target-id=all-ingredients] .c-wysiwyg p {
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.8888888889;
}
@media screen and (max-width: 767px) {
    [data-target-id=product-description] .c-wysiwyg p, [data-target-id=all-ingredients] .c-wysiwyg p {
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}

/* ---------------------------------------------
/* c-wysiwyg-news
--------------------------------------------- */
/* ---------------------------------------------
*   p-concept-block-intro
--------------------------------------------- */
.p-concept-block-intro {
    padding-block: 0 50px;
    background: linear-gradient(45deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 100%);
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro {
        padding-block: calc(33 / var(--design-width) * 100vw);
        letter-spacing: 0.075em;
    }
}
.p-concept-block-intro__container {
    display: grid;
    grid-template-columns: calc(566 / 1120 * 100%) 1fr;
    gap: 0;
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__container {
        display: block;
    }
}
.p-concept-block-intro__ttl {
    padding-top: 46px;
    grid-area: 2/2/3/3;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__ttl {
        padding-top: 0;
    }
}
.p-concept-block-intro__ttl-en {
    font-size: 48px;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__ttl-en {
        font-size: calc(36 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__ttl-jp {
    display: block;
    font-size: 18px;
    margin-top: 23px;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__ttl-jp {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__breadcrumb {
    grid-area: 1/1/2/3;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__breadcrumb {
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__pic {
    display: block;
    grid-area: 2/1/5/2;
    aspect-ratio: 566/700;
    border-radius: 6px;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__pic {
        aspect-ratio: 343/424;
        border-radius: calc(6 / var(--design-width) * 100vw);
        margin-top: calc(-2 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__pic img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-concept-block-intro__lead {
    grid-area: 3/2/4/3;
    text-align: center;
    margin-top: -22px;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__lead {
        margin-top: 0;
    }
}
.p-concept-block-intro__lead-en {
    font-size: 31px;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__lead-en {
        font-size: calc(25 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__lead-jp {
    padding-left: 1.5rem;
    display: block;
    font-size: 28px;
    margin-top: 27px;
}
@media screen and (min-width: 768px) {
    .p-concept-block-intro__lead-jp {
        white-space: nowrap;
    }
}
@media screen and (max-width: 1024px) {
    .p-concept-block-intro__lead-jp {
        padding-left: 1rem;
    }
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__lead-jp {
        padding-left: 0.4rem;
        font-size: calc(23 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-concept-block-intro__note {
    max-width: 340px;
    width: 100%;
    font-size: 14px;
    line-height: 2;
    grid-area: 4/2/5/3;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-concept-block-intro__note {
        max-width: none;
        font-size: calc(12 / var(--design-width) * 100vw);
        letter-spacing: 0.055em;
        line-height: 1.75;
        margin-top: calc(23 / var(--design-width) * 100vw);
        white-space: nowrap;
    }
}

/* ---------------------------------------------
*   p-concept-section-fixed
--------------------------------------------- */
.p-concept-section-fixed {
    width: 100%;
    background: url(../img/common/bg_fixed.jpg) center center no-repeat;
    background-size: cover;
    height: 800px;
}
@media screen and (min-width: 768px) {
    .p-concept-section-fixed {
        background-attachment: fixed;
    }
}
.ipad .p-concept-section-fixed {
    background-attachment: inherit;
}

@media screen and (max-width: 767px) {
    .p-concept-section-fixed {
        background: url(../img/common/sp/bg_fixed.jpg) top center no-repeat;
        background-size: 100% 100%;
        height: calc(800 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed__container {
    padding-block: 54px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed__container {
        padding-block: calc(28 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed__body {
    margin-top: 100px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed__body {
        margin-top: calc(38 / var(--design-width) * 100vw);
        white-space: nowrap;
    }
}
.p-concept-section-fixed__foot {
    width: 260px;
    margin-top: 66px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed__foot {
        width: calc(263 / var(--design-width) * 100vw);
        margin-top: calc(73 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--559 {
    height: 559px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--559 {
        height: calc(368 / var(--design-width) * 100vw);
        background-size: 100% auto;
    }
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--559 .p-concept-section-fixed__container {
        padding-block: calc(11 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--559 .p-concept-section-fixed__body {
    margin-top: 84px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--559 .p-concept-section-fixed__body {
        margin-top: calc(49 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--600 {
    height: 600px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--600 {
        height: calc(458 / var(--design-width) * 100vw);
        background: url(../img/top/sp/bg_fixed.jpg) top center no-repeat;
        background-size: 100% 100%;
    }
}
.p-concept-section-fixed--600 .p-concept-section-fixed__container {
    padding-block: 154px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--600 .p-concept-section-fixed__container {
        padding: calc(77 / var(--design-width) * 100vw) calc(40 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--600 .p-concept-section-fixed__body {
    margin-top: 42px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--600 .p-concept-section-fixed__body {
        padding-inline: calc(4 / var(--design-width) * 100vw);
        margin-top: calc(13 / var(--design-width) * 100vw);
        white-space: normal;
    }
}
.p-concept-section-fixed--751 {
    height: 751px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--751 {
        height: calc(682 / var(--design-width) * 100vw);
        background: url(../img/series/aqua-savon/sp/bg_fixed.jpg) top center no-repeat;
        background-size: 100% 100%;
    }
}
.p-concept-section-fixed--751 .p-concept-section-fixed__container {
    padding-block: 67px 50px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-fixed--751 .p-concept-section-fixed__container {
        padding-inline: 0;
        padding-block: calc(51 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--brand {
    height: min(800px + 57.3355817875vw, 1480px);
    background: url(../img/concept/bg_fixed_l.jpg) center center no-repeat;
    background-size: cover;
}
@media screen and (min-width: 768px) {
    .p-concept-section-fixed--brand {
        background-attachment: fixed;
    }
}
.ipad .p-concept-section-fixed--brand {
    background-attachment: inherit;
}

@media screen and (max-width: 767px) {
    .p-concept-section-fixed--brand {
        height: calc(1330 / var(--design-width) * 100vw);
    }
}
.p-concept-section-fixed--brand .p-concept-section-fixed__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* ---------------------------------------------
*   p-concept-list-circle
--------------------------------------------- */
.p-concept-list-circle {
    margin-top: min(50 / var(--contents-width) * 100vw, 50px);
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle {
        padding-block: 0 calc(34 / var(--design-width) * 100vw);
        margin-top: calc(50 / var(--design-width) * 100vw);
        overflow: hidden;
    }
}
.p-concept-list-circle__item {
    padding-top: min(74 / var(--contents-width) * 100vw, 74px);
    width: calc(569 / 1120 * 100%);
    border-radius: 50%;
    aspect-ratio: 1/1;
    border: 3px solid var(--color-blue-1);
    background-color: rgba(var(--color-white-2-rgb), 0.7);
}
@media screen and (max-width: 1024px) {
    .p-concept-list-circle__item {
        width: calc(585 / 1120 * 100%);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__item {
        padding-top: calc(40 / var(--design-width) * 100vw);
        width: 99%;
        border-width: calc(1.5 / var(--design-width) * 100vw);
        white-space: nowrap;
        margin-inline: auto;
    }
}
.p-concept-list-circle__item:nth-of-type(2) {
    margin-top: max(-280 / var(--contents-width) * 100vw, -280px);
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__item:nth-of-type(2) {
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__item:nth-of-type(2) .p-concept-list-circle__lead {
    padding-inline: min(70 / var(--contents-width) * 100vw, 70px);
}
@media screen and (max-width: 1150px) {
    .p-concept-list-circle__item:nth-of-type(2) .p-concept-list-circle__lead {
        padding-inline: min(50 / var(--contents-width) * 100vw, 50px);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__item .p-concept-list-circle__ttl-jp {
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__ttl-en {
    position: relative;
    padding-block: 0 min(13 / var(--contents-width) * 100vw, 13px);
    display: block;
    font-size: min(30 / var(--contents-width) * 100vw, 30px);
    letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__ttl-en {
        padding-block: 0 calc(10 / var(--design-width) * 100vw);
        font-size: calc(18 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__ttl-en::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: min(31 / var(--contents-width) * 100vw, 31px);
    height: 1px;
    background-color: var(--color-base-1);
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__ttl-en::after {
        width: calc(18 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__ttl-jp {
    display: block;
    font-size: min(12 / var(--contents-width) * 100vw, 12px);
    letter-spacing: 0.075em;
    margin-top: min(23 / var(--contents-width) * 100vw, 23px);
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__ttl-jp {
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__lead {
    display: block;
    font-size: min(20 / var(--contents-width) * 100vw, 20px);
    letter-spacing: 0.075em;
    margin-top: min(56 / var(--contents-width) * 100vw, 56px);
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__lead {
        font-size: calc(18 / var(--design-width) * 100vw);
        margin-top: calc(22 / var(--design-width) * 100vw);
    }
}
.p-concept-list-circle__txt {
    padding-inline: min(35 / var(--contents-width) * 100vw, 35px);
    display: block;
    font-size: min(14 / var(--contents-width) * 100vw, 14px);
    letter-spacing: 0.075em;
    line-height: 2.1428571429;
    margin-top: min(40 / var(--contents-width) * 100vw, 40px);
}
@media screen and (max-width: 1150px) {
    .p-concept-list-circle__txt {
        padding-inline: min(50 / var(--contents-width) * 100vw, 50px);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-circle__txt {
        padding-inline: calc(21 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        letter-spacing: 0.05em;
        line-height: 1.9166666667;
        margin-top: calc(21 / var(--design-width) * 100vw);
        white-space: nowrap;
    }
    .p-concept-list-circle__txt .pl-1 {
        padding-left: 0.1rem;
    }
    .p-concept-list-circle__txt .pl-2 {
        padding-left: 0.24rem;
    }
    .p-concept-list-circle__txt .pl-3 {
        padding-left: 0.55rem;
    }
    .p-concept-list-circle__txt .pl-4 {
        padding-left: 1.01rem;
    }
}

/* ---------------------------------------------
*   p-concept-section-value
--------------------------------------------- */
.p-concept-section-value {
    padding-block: 54px 114px;
    background-color: var(--color-white-2);
}
@media screen and (max-width: 767px) {
    .p-concept-section-value {
        padding-block: calc(41 / var(--design-width) * 100vw) calc(64 / var(--design-width) * 100vw);
    }
}
.p-concept-section-value__body {
    margin-top: 50px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-value__body {
        margin-top: calc(24 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-concept-list-value
--------------------------------------------- */
.p-concept-list-value {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(10 / var(--contents-width) * 100vw, 10px);
}
@media screen and (max-width: 767px) {
    .p-concept-list-value {
        flex-wrap: wrap;
        gap: calc(23 / var(--design-width) * 100vw) calc(6 / 342 * 100%);
    }
}
.p-concept-list-value__item {
    display: block;
    padding-top: min(36 / var(--contents-width) * 100vw, 36px);
    width: min(256 / var(--contents-width) * 100vw, 256px);
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-base-1);
    aspect-ratio: 1/1;
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__item {
        padding-top: calc(24 / var(--design-width) * 100vw);
        width: calc(167 / 342 * 100%);
    }
}
.p-concept-list-value__num {
    display: block;
    font-size: min(53 / var(--contents-width) * 100vw, 53px);
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__num {
        font-size: calc(35 / var(--design-width) * 100vw);
    }
}
.p-concept-list-value__term {
    display: block;
    font-family: var(--ff-shippori);
    font-size: min(21 / var(--contents-width) * 100vw, 21px);
    letter-spacing: 0.2em;
    margin-top: min(13 / var(--contents-width) * 100vw, 13px);
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__term {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(7 / var(--design-width) * 100vw);
    }
}
.p-concept-list-value__term-en {
    font-size: min(36 / var(--contents-width) * 100vw, 36px);
    letter-spacing: 0.1em;
    line-height: 1.1944444444;
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__term-en {
        font-size: calc(24 / var(--design-width) * 100vw);
    }
}
.p-concept-list-value__term-en--narrow {
    letter-spacing: 0.01em;
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__term-en--narrow {
        letter-spacing: 0.005em;
    }
}
.p-concept-list-value__desc {
    display: block;
    font-family: var(--ff-shippori);
    font-size: min(16 / var(--contents-width) * 100vw, 16px);
    line-height: 2;
    margin-top: min(15 / var(--contents-width) * 100vw, 15px);
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__desc {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.6666666667;
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value__desc--narrow {
        line-height: 1.5;
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua {
        margin-inline: calc(var(--contents-side-padding) * 1px);
        gap: calc(29 / var(--design-width) * 100vw);
        width: calc(1113 / var(--design-width) * 100vw);
    }
}
.p-concept-list-value--aqua .p-concept-list-value__item {
    filter: drop-shadow(0px 0px 5px rgba(var(--color-black-1-rgb), 0.2));
    background-color: var(--color-white-3);
    border: 1px solid var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua .p-concept-list-value__item {
        position: relative;
        padding-top: calc(36 / var(--design-width) * 100vw);
        width: calc(256 / var(--design-width) * 100vw);
        margin-block: calc(55 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
    }
    .p-concept-list-value--aqua .p-concept-list-value__item:not(:last-of-type)::after {
        content: "";
        position: absolute;
        bottom: calc(30 / var(--design-width) * 100vw);
        right: calc(-50 / var(--design-width) * 100vw);
        display: block;
        width: calc(71 / var(--design-width) * 100vw);
        aspect-ratio: 300/40;
        background: url(../img/series/aqua-savon/sp/ico_arrw.svg) center center no-repeat;
        background-size: contain;
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua .p-concept-list-value__num {
        font-size: calc(53 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua .p-concept-list-value__term {
        font-size: calc(21 / var(--design-width) * 100vw);
        letter-spacing: 0;
        margin-top: calc(13 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua .p-concept-list-value__term-en {
        font-size: calc(36 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-list-value--aqua .p-concept-list-value__desc {
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.9375;
        margin-top: calc(16 / var(--design-width) * 100vw);
    }
}

/*  p-concept-list-value-wrap
--------------------------------------------- */
@media screen and (max-width: 767px) {
    .p-concept-list-value-wrap {
        overflow-x: scroll;
        /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
        -ms-overflow-style: none;
        /*Firefoxへの対応*/
        scrollbar-width: none;
    }
}

@media screen and (max-width: 767px) {
    .p-concept-list-value-wrap::-webkit-scrollbar {
        display: none;
    }
}

/* ---------------------------------------------
*   p-concept-section-philosophy
--------------------------------------------- */
.p-concept-section-philosophy {
    padding-block: min(10 / var(--design-width) * 100vw, 10px);
    background: url(../img/concept/bg_philosophy.jpg) center center no-repeat;
    background-size: cover;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy {
        padding-block: calc(12 / var(--design-width) * 100vw) calc(60 / var(--design-width) * 100vw);
        padding-inline: calc(var(--contents-side-padding) * 1px);
        background: url(../img/concept/sp/bg_philosophy.jpg) center center no-repeat;
        background-size: cover;
    }
}
.p-concept-section-philosophy__container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(891 / var(--design-width) * 100%);
    align-items: center;
    max-width: calc(var(--design-width) * 1px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__container {
        display: block;
        max-width: none;
    }
}
.p-concept-section-philosophy__detail {
    padding-top: min(96 / var(--design-width) * 100vw, 96px);
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: 631px;
    width: 100%;
    margin-left: auto;
    height: 100%;
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__detail {
        padding-top: 0;
        max-width: none;
    }
}
.p-concept-section-philosophy__movie {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 891/820;
    overflow: hidden;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__movie {
        aspect-ratio: 413/410;
        border-radius: calc(6 / var(--design-width) * 100vw);
        margin-top: calc(28 / var(--design-width) * 100vw);
    }
}
.p-concept-section-philosophy__movie video {
    border-radius: min(6 / var(--design-width) * 100vw, 6px);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__movie video {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-concept-section-philosophy__movie::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-color: rgba(var(--color-white-1-rgb), 0.2);
}
.p-concept-section-philosophy__txts {
    padding-left: min(58 / var(--design-width) * 100vw, 58px);
    margin-top: min(111 / var(--design-width) * 100vw, 111px);
}
@media screen and (max-width: 1024px) {
    .p-concept-section-philosophy__txts {
        padding-left: 0;
        margin-top: min(20 / var(--design-width) * 100vw, 20px);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__txts {
        margin-top: calc(26 / var(--design-width) * 100vw);
    }
}
.p-concept-section-philosophy__txt + .p-concept-section-philosophy__txt {
    margin-top: min(60 / var(--design-width) * 100vw, 60px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-philosophy__txt + .p-concept-section-philosophy__txt {
        margin-top: 0.67rem;
    }
}

/* ---------------------------------------------
*   p-concept-section-signature
--------------------------------------------- */
.p-concept-section-signature {
    padding-block: 58px 98px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature {
        padding-block: calc(11 / var(--design-width) * 100vw) calc(66 / var(--design-width) * 100vw);
        overflow: hidden;
    }
}
.p-concept-section-signature__body {
    margin-top: 47px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__body {
        margin-top: calc(27 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__fig {
    display: block;
    width: 100%;
}
.p-concept-section-signature__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-concept-section-signature__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: min(51 / var(--contents-width) * 100vw, 51px);
    margin-top: min(50 / var(--contents-width) * 100vw, 50px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__list {
        display: block;
        margin-top: calc(27 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__list--2 {
    padding-inline: min(41 / var(--contents-width) * 100vw, 41px) min(25 / var(--contents-width) * 100vw, 25px);
    justify-content: space-between;
    margin-top: max(-43 / var(--contents-width) * 100vw, -43px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__list--2 {
        padding-inline: 0;
        margin-top: calc(-68 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__item {
    width: min(180 / var(--contents-width) * 100vw, 180px);
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item {
        width: calc(180 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__item--1, .p-concept-section-signature__item--3 {
    margin-top: min(126 / var(--contents-width) * 100vw, 126px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--1 {
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__item--2 {
    width: min(251 / var(--contents-width) * 100vw, 251px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--2 {
        width: calc(209 / var(--design-width) * 100vw);
        margin-inline: auto;
    }
}
.p-concept-section-signature__item--2 .p-concept-section-signature__fig img {
    width: calc(242 / 251 * 100%);
    margin-inline: auto;
}
.p-concept-section-signature__item--2 .p-concept-section-signature__figcaption {
    font-size: min(18 / var(--contents-width) * 100vw, 18px);
    margin-top: min(4 / var(--contents-width) * 100vw, 4px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--2 .p-concept-section-signature__figcaption {
        font-size: calc(15 / var(--design-width) * 100vw);
        margin-top: calc(2 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--3 {
        margin-top: calc(-140 / var(--design-width) * 100vw);
        margin-left: auto;
    }
}
.p-concept-section-signature__item--5 {
    position: relative;
    left: max(-7 / var(--contents-width) * 100vw, -7px);
    margin-top: min(84 / var(--contents-width) * 100vw, 84px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--5 {
        left: 0;
        margin-top: calc(-90 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__item--6 {
        margin-top: calc(-124 / var(--design-width) * 100vw);
        margin-left: auto;
    }
}
.p-concept-section-signature__link {
    display: block;
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .p-concept-section-signature__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-concept-section-signature__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-concept-section-signature__link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .p-concept-section-signature__link:hover img {
        transform: scale(1.05);
    }
}
.p-concept-section-signature__term {
    display: block;
    width: 100%;
    margin-block: 0 max(-43 / var(--contents-width) * 100vw, -43px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__term {
        margin-block: 0 calc(-35 / var(--design-width) * 100vw);
    }
}
.p-concept-section-signature__figcaption {
    display: block;
    font-family: var(--ff-shippori);
    font-size: min(13 / var(--contents-width) * 100vw, 13px);
    letter-spacing: 0.2em;
    line-height: 1.3076923077;
    text-align: center;
    margin-top: min(11 / var(--contents-width) * 100vw, 11px);
}
@media screen and (max-width: 767px) {
    .p-concept-section-signature__figcaption {
        font-size: calc(13 / var(--design-width) * 100vw);
        margin-top: calc(-2 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-concept-section-product
--------------------------------------------- */
.p-concept-section-product {
    padding-block: 64px;
    background: linear-gradient(180deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 0.2) 20%, rgba(var(--color-blue-4-rgb), 1) 100%);
}
@media screen and (max-width: 767px) {
    .p-concept-section-product {
        padding-block: calc(10 / var(--design-width) * 100vw) calc(64 / var(--design-width) * 100vw);
        background: linear-gradient(180deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 0.1) 20%, rgba(var(--color-blue-4-rgb), 1) 100%);
    }
}
.p-concept-section-product__body {
    margin-top: 56px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-product__body {
        margin-top: calc(25 / var(--design-width) * 100vw);
    }
}
.p-concept-section-product__lead {
    font-size: 22px;
    letter-spacing: 0.075em;
    margin-block: 0 27px;
}
@media screen and (max-width: 767px) {
    .p-concept-section-product__lead {
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1.3333333333;
        margin-block: 0 calc(25 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-concept-link
--------------------------------------------- */
.p-concept-link {
    display: block;
    width: 100%;
    text-align: center;
}
@media (hover: hover) and (pointer: fine) {
    .p-concept-link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-concept-link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-concept-link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .p-concept-link:hover img {
        transform: scale(1.05);
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-concept-link .p-concept-link__cat::before, .p-concept-link .p-concept-link__cat::after {
        transition: background-color 0.3s;
    }
    .p-concept-link:hover .p-concept-link__cat::before {
        background-color: var(--color-blue-2);
    }
    .p-concept-link:hover .p-concept-link__cat::after {
        background-color: var(--color-white-1);
    }
}
.p-concept-link__fig {
    position: relative;
    border-radius: min(6 / var(--contents-width) * 100vw, 6px);
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-concept-link__fig {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-concept-link__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-concept-link__figcaption {
    position: absolute;
    bottom: min(21 / var(--contents-width) * 100vw, 21px);
    left: 0;
    padding-block: min(7 / var(--contents-width) * 100vw, 7px);
    display: block;
    width: 100%;
    font-size: min(12 / var(--contents-width) * 100vw, 12px);
    letter-spacing: 0.075em;
    line-height: 1.5833333333;
    background-color: rgba(var(--color-white-2-rgb), 0.75);
}
@media screen and (max-width: 767px) {
    .p-concept-link__figcaption {
        bottom: calc(13 / var(--design-width) * 100vw);
        padding-block: calc(7 / var(--design-width) * 100vw);
        font-size: calc(11 / var(--design-width) * 100vw);
        line-height: 1.4545454545;
        white-space: nowrap;
    }
}
.p-concept-link__cat {
    position: relative;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding-right: min(27 / var(--contents-width) * 100vw, 27px);
    font-size: min(18 / var(--contents-width) * 100vw, 18px);
    letter-spacing: 0.075em;
    line-height: 1;
    margin-top: min(8 / var(--contents-width) * 100vw, 8px);
}
@media screen and (max-width: 767px) {
    .p-concept-link__cat {
        color: var(--color-blue-2);
        padding-right: calc(1 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-concept-link__cat::before, .p-concept-link__cat::after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .p-concept-link__cat::before, .p-concept-link__cat::after {
        top: 45%;
    }
    .safari .p-concept-link__cat::before, .safari .p-concept-link__cat::after {
        top: 50%;
    }
    .firefox .p-concept-link__cat::before, .firefox .p-concept-link__cat::after {
        top: 49%;
    }
    .edge .p-concept-link__cat::before, .edge .p-concept-link__cat::after {
        top: 45%;
    }
}
.p-concept-link__cat::before {
    right: min(5 / var(--contents-width) * 100vw, 5px);
    width: min(15 / var(--contents-width) * 100vw, 15px);
    aspect-ratio: 1/1;
    border: min(1 / var(--contents-width) * 100vw, 1px) solid var(--color-blue-2);
    border-radius: 50%;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .p-concept-link__cat::before {
        right: calc(-11 / var(--design-width) * 100vw);
        width: calc(9 / var(--design-width) * 100vw);
        border-width: 1px;
        border-color: var(--color-blue-2);
    }
}
.p-concept-link__cat::after {
    right: min(9.5 / var(--contents-width) * 100vw, 9.5px);
    width: min(5 / var(--contents-width) * 100vw, 5px);
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-blue-2);
}
@media screen and (max-width: 767px) {
    .p-concept-link__cat::after {
        right: calc(-8 / var(--design-width) * 100vw);
        width: calc(3 / var(--design-width) * 100vw);
        background-color: var(--color-blue-2);
    }
}
.p-concept-link__term {
    display: block;
    font-size: min(10 / var(--contents-width) * 100vw, 10px);
    letter-spacing: 0.075em;
    margin-top: min(3 / var(--contents-width) * 100vw, 3px);
}
@media screen and (max-width: 767px) {
    .p-concept-link__term {
        font-size: calc(10 / var(--design-width) * 100vw);
        line-height: 1.4;
        text-align: left;
        margin-top: calc(8 / var(--design-width) * 100vw);
    }
}
.p-concept-link--small .p-concept-link__cat {
    color: var(--color-blue-2);
    padding-right: min(33 / var(--contents-width) * 100vw, 33px);
    font-size: min(24 / var(--contents-width) * 100vw, 24px);
}
@media screen and (max-width: 767px) {
    .p-concept-link--small .p-concept-link__cat {
        padding-right: 0;
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(7 / var(--design-width) * 100vw);
    }
}
.p-concept-link--small .p-concept-link__cat::before {
    width: min(18 / var(--contents-width) * 100vw, 18px);
}
@media screen and (max-width: 767px) {
    .p-concept-link--small .p-concept-link__cat::before {
        width: calc(9 / var(--design-width) * 100vw);
    }
}
.p-concept-link--small .p-concept-link__cat::after {
    right: min(11 / var(--contents-width) * 100vw, 11px);
}
@media screen and (max-width: 767px) {
    .p-concept-link--small .p-concept-link__cat::after {
        right: calc(-8 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-concept-link--small .p-concept-link__cat::before, .p-concept-link--small .p-concept-link__cat::after {
        top: 47%;
    }
}
.p-concept-link--small .p-concept-link__term {
    font-size: min(12 / var(--contents-width) * 100vw, 12px);
    margin-top: min(7 / var(--contents-width) * 100vw, 7px);
}
@media screen and (max-width: 767px) {
    .p-concept-link--small .p-concept-link__term {
        font-size: calc(10 / var(--design-width) * 100vw);
        margin-top: calc(7 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-concept-block
--------------------------------------------- */
.p-concept-block {
    padding: 41px calc(24 / 930 * 100%) 44px calc(57 / 930 * 100%);
    max-width: 930px;
    margin-inline: auto;
    background-color: rgba(var(--color-white-1-rgb), 0.5);
    border-radius: 12px;
    margin-top: 62px;
}
@media screen and (max-width: 767px) {
    .p-concept-block {
        padding: calc(28 / var(--design-width) * 100vw) calc(22 / var(--design-width) * 100vw);
        max-width: none;
        border-radius: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}
.p-concept-block__ttl {
    padding-left: 9px;
    font-size: 18px;
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .p-concept-block__ttl {
        padding-left: 0;
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0.05em;
    }
}
.p-concept-block__ttl .ff-en {
    font-size: 24px;
}
@media screen and (max-width: 767px) {
    .p-concept-block__ttl .ff-en {
        display: block;
        font-size: calc(22 / var(--design-width) * 100vw);
        letter-spacing: 0.08em;
        line-height: 1.3;
    }
}
.p-concept-block__content {
    display: grid;
    grid-template-columns: calc(364 / 832 * 100%) 1fr;
    align-items: start;
    gap: calc(37 / 832 * 100%);
    margin-top: 40px;
}
@media screen and (max-width: 767px) {
    .p-concept-block__content {
        display: block;
        margin-top: calc(23 / var(--design-width) * 100vw);
    }
}
.p-concept-block__fig {
    border-radius: 6px;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-concept-block__fig {
        width: calc(301 / var(--design-width) * 100vw);
        margin-inline: auto;
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-concept-block__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-concept-block__txts {
    margin-top: -9px;
}
@media screen and (max-width: 767px) {
    .p-concept-block__txts {
        margin-top: calc(20 / var(--design-width) * 100vw);
        white-space: nowrap;
    }
}
.p-concept-block__txts .c-txt-1 + .c-txt-1 {
    margin-top: 1.9rem;
}
@media screen and (max-width: 767px) {
    .p-concept-block__txts .c-txt-1 + .c-txt-1 {
        margin-top: 0.65rem;
    }
}

/*  p-diagnosis-slider
--------------------------------------------- */
.p-diagnosis-slider {
    position: relative;
    max-width: calc(var(--diagnosis-width) * 1px);
    margin-inline: auto;
}
.p-diagnosis-slider .swiper {
    overflow: visible;
}
.p-diagnosis-slider .swiper-slide {
    z-index: -1;
    min-height: min(668 / var(--diagnosis-content-width) * 100vw, 668px);
    overflow: hidden;
    background: linear-gradient(135deg, rgb(239, 212, 223) 0%, rgb(221, 232, 240) 100%);
    border-radius: min(14 / var(--diagnosis-width) * 100vw, 14px);
    filter: drop-shadow(0px 0px 10px rgba(var(--color-black-1-rgb), 0.2));
    transition: opacity 1s;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider .swiper-slide {
        min-height: calc(681 / var(--design-width) * 100vw);
        border-radius: calc(14 / var(--design-width) * 100vw);
        background: linear-gradient(135deg, rgb(239, 212, 223) 0%, rgba(221, 232, 240, 0.8) 60%, rgb(221, 232, 240) 100%);
        filter: drop-shadow(0px 0px calc(6 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.2));
    }
}
.p-diagnosis-slider .swiper-slide.swiper-slide-active {
    z-index: 1;
}
.p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
    position: absolute;
    z-index: 10;
    bottom: 11.8%;
    left: 6.8%;
    display: block;
    padding-block: 0 min(20 / var(--diagnosis-width) * 100vw, 20px);
    cursor: pointer;
    width: min(56 / var(--diagnosis-width) * 100vw, 56px);
    aspect-ratio: 56/18;
    background: url(../img/diagnosis/img_back.svg) 0 0 no-repeat;
    background-size: 100% 100%;
    border-bottom: min(1 / var(--diagnosis-width) * 100vw, 1px) solid transparent;
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
        transition: border-color 0.3s;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev:hover {
        border-color: var(--color-base-1);
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
        left: 1.2%;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev {
        bottom: 14.8%;
        left: 2%;
        padding-block: 0;
        width: calc(56 / var(--design-width) * 100vw);
        border-bottom: none;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev::after {
        content: "";
        position: absolute;
        bottom: calc(-4 / var(--design-width) * 100vw);
        left: 0;
        display: block;
        width: 106%;
        height: calc(1 / var(--design-width) * 100vw);
        background-color: var(--color-base-1);
    }
}
.p-diagnosis-slider__navs:not(.is-start) .swiper-button-prev.is-hide {
    display: none;
}
.p-diagnosis-slider__navs:not(.is-start) .swiper-button-next {
    position: absolute;
    z-index: 10;
    top: 61.7%;
    right: 4%;
    display: block;
    width: min(66 / var(--diagnosis-width) * 100vw, 66px);
    aspect-ratio: 1/1;
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
    filter: drop-shadow(0px 0px min(4 / var(--diagnosis-width) * 100vw, 4px) rgba(var(--color-black-1-rgb), 0.2));
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next {
        right: 1.4%;
        width: min(55 / var(--diagnosis-width) * 100vw, 55px);
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next {
        top: auto;
        bottom: 12%;
        left: 50%;
        width: calc(66 / var(--design-width) * 100vw);
        background: url(../img/diagnosis/img_next-hover.svg) 0 0 no-repeat;
        background-size: 100% 100%;
        transform: translateX(-50%) translateZ(0);
        filter: drop-shadow(0px 0px calc(4 / var(--design-width) * 100vw) rgba(var(--color-black-1-rgb), 0.2));
        will-change: background;
    }
}
@media screen and (min-width: 768px) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next::before, .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
        transform: translate(-50%, -50%);
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next::before {
        opacity: 1;
        background: url(../img/diagnosis/img_next.svg) 0 0 no-repeat;
        background-size: 100% 100%;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next::after {
        opacity: 0;
        background: url(../img/diagnosis/img_next-hover.svg) 0 0 no-repeat;
        background-size: 100% 100%;
    }
}
@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next:hover::before {
        opacity: 0;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next:hover::after {
        opacity: 1;
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-slider__navs:not(.is-start) .swiper-button-next:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.p-diagnosis-slider__navs:not(.is-start) .swiper-button-next[disabled] {
    pointer-events: none;
    opacity: 0.5;
}
.p-diagnosis-slider__navs.is-1q .swiper-button-prev {
    display: none !important;
}
.p-diagnosis-slider__navs.is-start {
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: min(125 / var(--diagnosis-width) * 100vw, 125px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider__navs.is-start {
        bottom: calc(185 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider__navs.is-start .swiper-button-prev {
    display: none;
}
.p-diagnosis-slider__navs.is-start .swiper-button-next {
    position: relative;
    display: block;
    width: min(100 / var(--diagnosis-width) * 100vw, 100px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    cursor: pointer;
    margin-inline: auto;
    animation: pulse 2s infinite ease-out; /* 2秒間隔で無限に繰り返す */
    background-color: var(--color-pink-1);
    transition: background-color 0.2s;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider__navs.is-start .swiper-button-next {
        width: calc(100 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider__navs.is-start .swiper-button-next::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(67 / 100 * 100%);
    aspect-ratio: 188/150;
    background: url(../img/diagnosis/ico_start.svg) 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
}
@keyframes pulse {
    /* 影のベースカラー: rgba(228, 192, 203, 0.7) */
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(228, 192, 203, 0.7);
    }
    70% {
        transform: scale(1.05); /* やや拡大 (1.05倍) */
        box-shadow: 0 0 0 20px rgba(228, 192, 203, 0); /* 影が大きく広がり、透明に */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(228, 192, 203, 0.7);
    }
}
.p-diagnosis-slider__navs.is-start .swiper-button-next:hover, .p-diagnosis-slider__navs.is-start .swiper-button-next:active {
    background-color: var(--color-pink-4);
}
.p-diagnosis-slider__navs.is-goal {
    display: none;
}
.p-diagnosis-slider__navs .swiper-navigation-icon {
    display: none;
}

/*  p-diagnosis-slider-progress
--------------------------------------------- */
.p-diagnosis-slider-progress {
    position: absolute;
    z-index: 10;
    bottom: min(29 / var(--diagnosis-width) * 100vw, 29px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(8 / var(--diagnosis-width) * 100vw, 8px);
    width: 100%;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-progress {
        bottom: calc(43 / var(--design-width) * 100vw);
        gap: calc(3 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-progress.is-goal {
    display: none;
}
.p-diagnosis-slider-progress__txt {
    font-size: min(19 / var(--diagnosis-width) * 100vw, 19px);
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-progress__txt {
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-diagnosis-slider-progress__txt--first {
        margin-right: min(2 / var(--diagnosis-width) * 100vw, 2px);
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-progress__txt--first {
        margin-right: calc(-1 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-diagnosis-slider-progress__txt--en {
        margin-left: min(2 / var(--diagnosis-width) * 100vw, 2px);
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-progress__txt--en {
        margin-left: calc(-1 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-progress__bar {
    border-radius: 999px;
    border: 1px solid var(--color-pink-1);
    background-color: var(--color-white-2);
    display: block;
    width: min(125 / var(--diagnosis-width) * 100vw, 125px);
    height: min(11 / var(--diagnosis-width) * 100vw, 11px);
    transition: background-color 0.3s, border-color 0.3s;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-progress__bar {
        width: calc(48 / var(--design-width) * 100vw);
        height: calc(12 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-progress__bar.is-fin {
    background-color: var(--color-pink-1);
    border-color: var(--color-white-2);
}

/*  p-diagnosis-content-first
--------------------------------------------- */
.p-diagnosis-content-first {
    padding: min(125 / var(--diagnosis-width) * 100vw, 125px) 0;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-content-first {
        padding-block: calc(25 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-content-first__logo {
    display: block;
    width: calc(380 / var(--diagnosis-width) * 100%);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-content-first__logo {
        width: calc(263 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-content-first__txts {
    display: block;
    margin-top: min(45 / var(--diagnosis-width) * 100vw, 45px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-content-first__txts {
        margin-top: calc(14 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-content-first__small {
    display: block;
    font-size: min(24 / var(--diagnosis-width) * 100vw, 24px);
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-content-first__small {
        font-size: calc(22 / var(--design-width) * 100vw);
        line-height: 1.6363636364;
    }
}
.p-diagnosis-content-first__large {
    display: block;
    font-size: min(40 / var(--diagnosis-width) * 100vw, 40px);
    letter-spacing: 0.1em;
    margin-top: min(20 / var(--diagnosis-width) * 100vw, 20px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-content-first__large {
        font-size: calc(31 / var(--design-width) * 100vw);
        margin-top: calc(69 / var(--design-width) * 100vw);
    }
}

/*  p-diagnosis-slider-content
--------------------------------------------- */
.p-diagnosis-slider-content {
    padding: min(50 / var(--diagnosis-width) * 100vw, 50px) 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: calc(664 / var(--diagnosis-width) * 100%);
    margin-inline: auto;
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-slider-content {
        width: calc(770 / var(--diagnosis-width) * 100%);
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content {
        padding-block: calc(20 / var(--design-width) * 100vw);
        width: calc(314 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__num {
    display: block;
    color: var(--color-white-1);
    font-size: min(96 / var(--diagnosis-width) * 100vw, 96px);
    letter-spacing: 0.075em;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__num {
        font-size: calc(52 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__q {
    display: block;
    font-size: min(30 / var(--diagnosis-width) * 100vw, 30px);
    letter-spacing: 0.075em;
    line-height: 1.1666666667;
    margin-top: min(45 / var(--diagnosis-width) * 100vw, 45px);
}
@media screen and (min-width: 768px) {
    .p-diagnosis-slider-content__q {
        white-space: nowrap;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__q {
        padding-inline: calc(12 / var(--design-width) * 100vw);
        font-size: calc(24 / var(--design-width) * 100vw);
        line-height: 1.25;
        margin-top: calc(36 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__list {
    width: 100%;
    margin-inline: auto;
    margin-top: min(47 / var(--diagnosis-width) * 100vw, 47px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__list {
        margin-top: calc(38 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: min(23 / var(--diagnosis-width) * 100vw, 23px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__item {
        gap: calc(7 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__item + .p-diagnosis-slider-content__item {
    margin-top: min(13 / var(--diagnosis-width) * 100vw, 13px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__item + .p-diagnosis-slider-content__item {
        margin-top: calc(23 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(62 / var(--diagnosis-width) * 100vw, 62px);
    aspect-ratio: 1/1;
    color: var(--color-white-1);
    font-size: min(42 / var(--diagnosis-width) * 100vw, 42px);
    line-height: 1;
    border-radius: 50%;
    background-color: var(--color-pink-1);
    border: 1px solid var(--color-white-1);
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-content__label {
        width: calc(46 / var(--design-width) * 100vw);
        font-size: calc(32 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-slider-content__label--c span {
    position: relative;
    left: -3.5%;
}
.p-diagnosis-slider-content__label--d span {
    position: relative;
    right: -1.7%;
    bottom: -2%;
}

/*  p-diagnosis-radio
--------------------------------------------- */
.p-diagnosis-radio {
    position: relative;
    cursor: pointer;
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-radio {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-radio:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.p-diagnosis-radio__input {
    position: absolute;
    inset: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.p-diagnosis-radio__input:checked + .p-diagnosis-radio__txt {
    background-color: var(--color-pink-1);
    color: var(--color-white-2);
}
.p-diagnosis-radio__txt {
    position: relative;
    z-index: 1;
    padding: min(12 / var(--diagnosis-width) * 100vw, 12px) min(10 / var(--diagnosis-width) * 100vw, 10px);
    display: block;
    color: var(--color-base-1);
    font-size: min(24 / var(--diagnosis-width) * 100vw, 24px);
    letter-spacing: 0.075em;
    border-radius: 12px;
    border: 1px solid var(--color-pink-1);
    background-color: var(--color-white-2);
    box-sizing: border-box;
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
    will-change: background-color, color;
    transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-radio__txt {
        padding: calc(7 / var(--design-width) * 100vw) calc(7 / var(--design-width) * 100vw) calc(9 / var(--design-width) * 100vw);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(56 / var(--design-width) * 100vw);
        height: 100%;
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.25;
        border-radius: calc(12 / var(--design-width) * 100vw);
    }
}

/*  p-diagnosis-loading
--------------------------------------------- */
.p-diagnosis-loading {
    --circle-radius: 139.5px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--color-white-2);
    font-size: min(40 / var(--diagnosis-width) * 100vw, 40px);
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1;
}
.swiper-slide-active .p-diagnosis-loading {
    z-index: 1;
    animation: loading 1s ease-out forwards;
    animation-delay: 3s;
}

@media screen and (max-width: 767px) {
    .p-diagnosis-loading {
        font-size: calc(34 / var(--design-width) * 100vw);
        --circle-radius: calc(120 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-loading__circle {
    position: absolute;
    z-index: 2;
    width: min(279 / var(--diagnosis-width) * 100vw, 279px);
    aspect-ratio: 1/1;
    animation: spin 10s linear infinite;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-loading__circle {
        width: calc(240 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-loading__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(11 / var(--diagnosis-width) * 100vw, 11px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--color-white-2);
    transform-origin: center;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-loading__dot {
        width: calc(10 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .edge .p-diagnosis-loading__txt {
        transform: translateX(1%);
    }
}

@keyframes loading {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }
}
.p-diagnosis-loading__dot:nth-child(1) {
    transform: rotate(0deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.0555555556;
}

.p-diagnosis-loading__dot:nth-child(2) {
    transform: rotate(20deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.1111111111;
}

.p-diagnosis-loading__dot:nth-child(3) {
    transform: rotate(40deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.1666666667;
}

.p-diagnosis-loading__dot:nth-child(4) {
    transform: rotate(60deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.2222222222;
}

.p-diagnosis-loading__dot:nth-child(5) {
    transform: rotate(80deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.2777777778;
}

.p-diagnosis-loading__dot:nth-child(6) {
    transform: rotate(100deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.3333333333;
}

.p-diagnosis-loading__dot:nth-child(7) {
    transform: rotate(120deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.3888888889;
}

.p-diagnosis-loading__dot:nth-child(8) {
    transform: rotate(140deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.4444444444;
}

.p-diagnosis-loading__dot:nth-child(9) {
    transform: rotate(160deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.5;
}

.p-diagnosis-loading__dot:nth-child(10) {
    transform: rotate(180deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.5555555556;
}

.p-diagnosis-loading__dot:nth-child(11) {
    transform: rotate(200deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.6111111111;
}

.p-diagnosis-loading__dot:nth-child(12) {
    transform: rotate(220deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.6666666667;
}

.p-diagnosis-loading__dot:nth-child(13) {
    transform: rotate(240deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.7222222222;
}

.p-diagnosis-loading__dot:nth-child(14) {
    transform: rotate(260deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.7777777778;
}

.p-diagnosis-loading__dot:nth-child(15) {
    transform: rotate(280deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.8333333333;
}

.p-diagnosis-loading__dot:nth-child(16) {
    transform: rotate(300deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.8888888889;
}

.p-diagnosis-loading__dot:nth-child(17) {
    transform: rotate(320deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 0.9444444444;
}

.p-diagnosis-loading__dot:nth-child(18) {
    transform: rotate(340deg) translateY(calc(var(--circle-radius) * -1));
    opacity: 1;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/*  p-diagnosis-result
--------------------------------------------- */
.p-diagnosis-result {
    padding: min(20 / var(--diagnosis-width) * 100vw, 20px);
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: blur(8px); /* 強いぼかしからスタート */
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result {
        padding: calc(11 / var(--design-width) * 100vw) calc(11 / var(--design-width) * 100vw) calc(24 / var(--design-width) * 100vw);
    }
}
.swiper-slide-active .p-diagnosis-result {
    animation: smokyPuffIn 1s ease-out forwards;
    animation-delay: 3s;
}

.p-diagnosis-result__content {
    display: none;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result__content {
        height: 0;
        animation: scale 3s ease-out forwards;
    }
}
.p-diagnosis-result__content.is-show {
    display: block;
}

@keyframes smokyPuffIn {
    0% {
        opacity: 0;
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}
@keyframes smokyPuffInSlide {
    0% {
        filter: blur(2px);
    }
    100% {
        filter: blur(0px);
    }
}
@keyframes scale {
    0% {
        height: 0;
    }
    99.9% {
        height: 0;
    }
    100% {
        height: auto;
    }
}
/*  p-diagnosis-result-top
--------------------------------------------- */
.p-diagnosis-result-top {
    position: relative;
    border-radius: 12px;
    background-color: var(--color-white-2);
    min-height: min(393 / var(--diagnosis-content-width) * 100vw, 393px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top {
        padding: 0 calc(9 / var(--design-width) * 100vw) calc(24 / var(--design-width) * 100vw);
        border-radius: calc(12 / var(--design-width) * 100vw);
        min-height: auto;
    }
}
.p-diagnosis-result-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top::before {
        top: -1px;
        width: 101%;
    }
}
.pure-clear .p-diagnosis-result-top::before {
    background: url(../img/diagnosis/bg_mode_01.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 767px) {
    .pure-clear .p-diagnosis-result-top::before {
        background: url(../img/diagnosis/sp/bg_mode_01.png) top left no-repeat;
        background-size: 100% auto;
    }
}

.soft-calm .p-diagnosis-result-top::before {
    background: url(../img/diagnosis/bg_mode_02.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 767px) {
    .soft-calm .p-diagnosis-result-top::before {
        background: url(../img/diagnosis/sp/bg_mode_02.png) top left no-repeat;
        background-size: 100% auto;
    }
}

.bright-flow .p-diagnosis-result-top::before {
    background: url(../img/diagnosis/bg_mode_03.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 767px) {
    .bright-flow .p-diagnosis-result-top::before {
        background: url(../img/diagnosis/sp/bg_mode_03.png) top left no-repeat;
        background-size: 100% auto;
    }
}

.mood-signature .p-diagnosis-result-top::before {
    background: url(../img/diagnosis/bg_mode_04.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 767px) {
    .mood-signature .p-diagnosis-result-top::before {
        background: url(../img/diagnosis/sp/bg_mode_04.png) top left no-repeat;
        background-size: 100% auto;
    }
}

.p-diagnosis-result-top__head {
    position: relative;
    z-index: 1;
    padding-left: min(41 / var(--diagnosis-content-width) * 100vw, 41px);
    padding-top: min(21 / var(--diagnosis-content-width) * 100vw, 21px);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__head {
        padding-left: calc(1 / var(--design-width) * 100vw);
        padding-top: 0;
        gap: calc(8 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__ttl-mode {
    position: relative;
    padding-top: min(13 / var(--diagnosis-content-width) * 100vw, 13px);
    padding-right: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: min(27 / var(--diagnosis-content-width) * 100vw, 27px);
    letter-spacing: 0.075em;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__ttl-mode {
        padding-top: calc(21 / var(--design-width) * 100vw);
        padding-right: calc(9 / var(--design-width) * 100vw);
        font-size: calc(19 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__ttl-mode:after {
    content: "";
    position: absolute;
    top: 58%;
    right: 0;
    display: block;
    width: 1px;
    height: 116%;
    background-color: var(--color-base-1);
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__ttl-mode:after {
        top: 66%;
        height: 78%;
    }
    .mood-signature .p-diagnosis-result-top__ttl-mode:after {
        background-color: var(--color-white-1);
    }
}
.p-diagnosis-result-top__ttls {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center;
}
.p-diagnosis-result-top__ttl-en {
    font-size: min(40 / var(--diagnosis-content-width) * 100vw, 40px);
    letter-spacing: 0.1em;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__ttl-en {
        font-size: calc(28 / var(--design-width) * 100vw);
    }
    .mood-signature .p-diagnosis-result-top__ttl-en {
        letter-spacing: -0.025em;
        color: var(--color-white-1);
    }
}
.p-diagnosis-result-top__ttl-jp {
    display: block;
    font-size: min(16 / var(--diagnosis-content-width) * 100vw, 16px);
    letter-spacing: 0.2em;
    line-height: 1;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__ttl-jp {
        font-size: calc(11 / var(--design-width) * 100vw);
        margin-top: calc(-5 / var(--design-width) * 100vw);
    }
    .mood-signature .p-diagnosis-result-top__ttl-jp {
        color: var(--color-white-1);
    }
}
.p-diagnosis-result-top__body {
    position: relative;
    z-index: 1;
    padding-inline: calc(var(--contents-side-padding) * 1px);
    width: min(539 / var(--diagnosis-width) * 100vw, 539px);
    margin-left: auto;
    margin-top: min(10 / var(--diagnosis-content-width) * 100vw, 10px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__body {
        padding-inline: 0;
        width: 100%;
        margin-top: calc(222 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__term {
    display: block;
    font-size: min(18 / var(--diagnosis-content-width) * 100vw, 18px);
    letter-spacing: 0.2em;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__term {
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__txt {
    font-size: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
    letter-spacing: 0.2em;
    line-height: 1.7142857143;
    margin-top: min(17 / var(--diagnosis-content-width) * 100vw, 17px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: 0;
        line-height: 1.75;
        text-align: justify;
        margin-top: calc(28 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__keyword {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    margin-top: min(24 / var(--diagnosis-content-width) * 100vw, 24px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__keyword {
        gap: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(32 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__dt {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: min(2 / var(--diagnosis-content-width) * 100vw, 2px);
    color: var(--color-blue-1);
    font-size: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
    letter-spacing: 0.2em;
    margin-left: min(-4 / var(--diagnosis-content-width) * 100vw, -4px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__dt {
        gap: calc(2 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-left: calc(-3 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__dt::before {
    content: "";
    display: block;
    width: min(21 / var(--diagnosis-content-width) * 100vw, 21px);
    aspect-ratio: 1/1;
    -webkit-mask: url(../img/common/ico_tag.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_tag.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-blue-1);
    margin-top: min(-4 / var(--diagnosis-content-width) * 100vw, -4px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__dt::before {
        width: calc(22 / var(--design-width) * 100vw);
        margin-top: calc(-2 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__desc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: min(9 / var(--diagnosis-content-width) * 100vw, 9px) min(8 / var(--diagnosis-content-width) * 100vw, 8px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__desc {
        gap: calc(7 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-top__tag {
    padding: min(2 / var(--diagnosis-content-width) * 100vw, 2px) min(11 / var(--diagnosis-content-width) * 100vw, 11px) min(4 / var(--diagnosis-content-width) * 100vw, 4px);
    color: var(--color-white-1);
    font-size: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
    letter-spacing: 0.2em;
    line-height: 1;
    border-radius: 6px;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-top__tag {
        padding: calc(3 / var(--design-width) * 100vw) calc(12 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
    }
}

/*  p-diagnosis-result-bottom
--------------------------------------------- */
.p-diagnosis-result-bottom {
    margin-top: min(15 / var(--diagnosis-content-width) * 100vw, 15px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom {
        margin-top: calc(15 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__term {
    padding-left: min(11 / var(--diagnosis-content-width) * 100vw, 11px);
    font-size: min(18 / var(--diagnosis-content-width) * 100vw, 18px);
    letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__term {
        padding-left: 0;
        display: block;
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.025em;
    }
    .mood-signature .p-diagnosis-result-bottom__term {
        letter-spacing: 0;
    }
}
.p-diagnosis-result-bottom__list {
    padding-inline: min(5 / var(--diagnosis-content-width) * 100vw, 5px);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: min(20 / var(--diagnosis-content-width) * 100vw, 20px);
    margin-top: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__list {
        padding-inline: calc(20 / var(--design-width) * 100vw);
        display: block;
        margin-top: calc(16 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__item {
    width: calc((100% - min(20 / var(--diagnosis-content-width) * 100vw, 20px)) / 3);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__item {
        width: 100%;
    }
    .p-diagnosis-result-bottom__item + .p-diagnosis-result-bottom__item {
        margin-top: calc(12 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__link {
    padding: min(37 / var(--diagnosis-content-width) * 100vw, 37px) min(15 / var(--diagnosis-content-width) * 100vw, 15px) min(24 / var(--diagnosis-content-width) * 100vw, 24px);
    display: grid;
    grid-template-columns: 1fr calc(171 / 280 * 100%);
    grid-auto-rows: auto;
    gap: min(5 / var(--diagnosis-content-width) * 100vw, 5px);
    width: 100%;
    min-height: min(174 / var(--diagnosis-content-width) * 100vw, 174px);
    border-radius: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    background-color: var(--color-white-2);
    will-change: opacity;
    transform: translate3d(0, 0, 0);
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-result-bottom__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-result-bottom__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-result-bottom__link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .p-diagnosis-result-bottom__link:hover img {
        transform: scale(1.05);
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__link {
        padding: calc(37 / var(--design-width) * 100vw) calc(16 / var(--design-width) * 100vw) calc(25 / var(--design-width) * 100vw);
        gap: calc(5 / var(--design-width) * 100vw);
        min-height: calc(175 / var(--design-width) * 100vw);
        border-radius: calc(12 / var(--design-width) * 100vw);
    }
}
.js-tab-target .p-diagnosis-result-bottom__link {
    background-color: transparent;
}

.p-diagnosis-result-bottom__fig {
    background-color: var(--color-white-1);
}
.p-diagnosis-result-bottom__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.p-diagnosis-result-bottom__detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.p-diagnosis-result-bottom__ttls {
    padding-left: min(3 / var(--diagnosis-content-width) * 100vw, 3px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__ttls {
        padding-left: 0;
    }
}
.p-diagnosis-result-bottom__en {
    display: block;
    font-family: var(--ff-shippori);
    font-size: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    letter-spacing: 0.2em;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__en {
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__jp {
    display: block;
    font-size: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
    letter-spacing: 0.1em;
    line-height: 1.2142857143;
    margin-top: min(10 / var(--diagnosis-content-width) * 100vw, 10px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__jp {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(11 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__watch {
    position: relative;
    padding: min(4 / var(--diagnosis-content-width) * 100vw, 4px) min(21 / var(--diagnosis-content-width) * 100vw, 21px) min(5 / var(--diagnosis-content-width) * 100vw, 5px) min(0 / var(--diagnosis-content-width) * 100vw, 0px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    letter-spacing: -0.025em;
    line-height: 1;
    border-radius: 999px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__watch {
        padding: calc(3 / var(--design-width) * 100vw) calc(21 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw) calc(0 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__watch::before, .p-diagnosis-result-bottom__watch::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
    .windows.firefox .p-diagnosis-result-bottom__watch::before, .windows.firefox .p-diagnosis-result-bottom__watch::after {
        top: 46%;
    }
}
.p-diagnosis-result-bottom__watch::before {
    right: 0;
    width: min(23 / var(--diagnosis-content-width) * 100vw, 23px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid;
    background-color: var(--color-white-2);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__watch::before {
        width: calc(21 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__watch::after {
    right: min(7 / var(--diagnosis-content-width) * 100vw, 7px);
    width: min(7 / var(--diagnosis-content-width) * 100vw, 7px);
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-result-bottom__watch::after {
        right: calc(6 / var(--design-width) * 100vw);
        width: calc(7 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-result-bottom__watch--watery {
    background-color: var(--color-blue-1);
}
.p-diagnosis-result-bottom__watch--watery::before {
    border-color: var(--color-blue-1);
}
.p-diagnosis-result-bottom__watch--watery::after {
    background-color: var(--color-blue-1);
}
.p-diagnosis-result-bottom__watch--favorite {
    background-color: var(--color-pink-1);
}
.p-diagnosis-result-bottom__watch--favorite::before {
    border-color: var(--color-pink-1);
}
.p-diagnosis-result-bottom__watch--favorite::after {
    background-color: var(--color-pink-1);
}
.p-diagnosis-result-bottom__watch--sakura {
    color: var(--color-white-2);
    background-color: var(--color-pink-5);
}
.p-diagnosis-result-bottom__watch--sakura::before {
    border-color: var(--color-pink-5);
}
.p-diagnosis-result-bottom__watch--sakura::after {
    background-color: var(--color-pink-5);
}
.p-diagnosis-result-bottom__watch--shampoo {
    color: var(--color-white-2);
    background-color: var(--color-blue-9);
}
.p-diagnosis-result-bottom__watch--shampoo::before {
    border-color: var(--color-blue-9);
}
.p-diagnosis-result-bottom__watch--shampoo::after {
    background-color: var(--color-blue-9);
}
.p-diagnosis-result-bottom__watch--emerald {
    color: var(--color-white-2);
    background-color: var(--color-green-1);
}
.p-diagnosis-result-bottom__watch--emerald::before {
    border-color: var(--color-green-1);
}
.p-diagnosis-result-bottom__watch--emerald::after {
    background-color: var(--color-green-1);
}
.p-diagnosis-result-bottom__watch--white {
    background-color: var(--color-green-2);
}
.p-diagnosis-result-bottom__watch--white::before {
    border-color: var(--color-green-2);
}
.p-diagnosis-result-bottom__watch--white::after {
    background-color: var(--color-green-2);
}
.p-diagnosis-result-bottom__watch--yuzu {
    color: var(--color-white-2);
    background-color: var(--color-yellow-2);
}
.p-diagnosis-result-bottom__watch--yuzu::before {
    border-color: var(--color-yellow-2);
}
.p-diagnosis-result-bottom__watch--yuzu::after {
    background-color: var(--color-yellow-2);
}
.p-diagnosis-result-bottom__watch--apple {
    color: var(--color-white-2);
    background-color: var(--color-red-1);
}
.p-diagnosis-result-bottom__watch--apple::before {
    border-color: var(--color-red-1);
}
.p-diagnosis-result-bottom__watch--apple::after {
    background-color: var(--color-red-1);
}
.p-diagnosis-result-bottom__watch--powdery {
    color: var(--color-white-2);
    background-color: var(--color-purple-1);
}
.p-diagnosis-result-bottom__watch--powdery::before {
    border-color: var(--color-purple-1);
}
.p-diagnosis-result-bottom__watch--powdery::after {
    background-color: var(--color-purple-1);
}
.p-diagnosis-result-bottom__watch--chardonnay {
    background-color: var(--color-green-3);
}
.p-diagnosis-result-bottom__watch--chardonnay::before {
    border-color: var(--color-green-3);
}
.p-diagnosis-result-bottom__watch--chardonnay::after {
    background-color: var(--color-green-3);
}

/* ---------------------------------------------
*   p-diagnosis-section-personality
--------------------------------------------- */
.p-diagnosis-section-personality {
    padding-block: 98px 80px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-personality {
        padding-block: calc(31 / var(--design-width) * 100vw) calc(33 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-personality__lead {
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.7777777778;
    margin-top: 29px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-personality__lead {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.7857142857;
        margin-top: calc(17 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-personality__note {
    display: block;
    font-size: 14px;
    letter-spacing: 0.075em;
    line-height: 1.7857142857;
    margin-top: 53px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-personality__note {
        font-size: calc(14 / var(--design-width) * 100vw);
        text-align: justify;
        margin-top: calc(21 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-personality__small {
    display: none;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-personality__small {
        display: block;
        font-size: calc(12 / var(--design-width) * 100vw);
        font-weight: 300;
        letter-spacing: 0.075em;
        margin-top: calc(26 / var(--design-width) * 100vw);
        text-align: left;
    }
}
.p-diagnosis-section-personality__body {
    margin-top: 68px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-personality__body {
        margin-top: calc(34 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-diagnosis-ttl
--------------------------------------------- */
.p-diagnosis-ttl {
    position: relative;
    padding-inline: 70px;
    display: block;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.2em;
    line-height: 1.75;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-ttl {
        padding-inline: calc(22 / var(--design-width) * 100vw);
        font-size: calc(24 / var(--design-width) * 100vw);
        letter-spacing: 0.05em;
        line-height: 1.75;
        white-space: nowrap;
    }
}
.p-diagnosis-ttl::before, .p-diagnosis-ttl::after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: 46px;
    aspect-ratio: 46/50;
    -webkit-mask: url(../img/diagnosis/ico_ttl.svg) 0 0 no-repeat;
            mask: url(../img/diagnosis/ico_ttl.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% auto;
            mask-size: 100% auto;
    background-color: var(--color-blue-1);
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-ttl::before, .p-diagnosis-ttl::after {
        width: calc(23 / var(--design-width) * 100vw);
        aspect-ratio: 138/150;
        -webkit-mask: url(../img/diagnosis/sp/ico_ttl.svg) 0 0 no-repeat;
                mask: url(../img/diagnosis/sp/ico_ttl.svg) 0 0 no-repeat;
        -webkit-mask-size: 100% auto;
                mask-size: 100% auto;
    }
}
.p-diagnosis-ttl::before {
    left: 0;
}
.p-diagnosis-ttl::after {
    right: 0;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-ttl--gray {
        padding-right: 0;
        margin-left: 0;
    }
}
.p-diagnosis-ttl--gray::before, .p-diagnosis-ttl--gray::after {
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-ttl--gray::after {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-ttl--sp {
        line-height: 1.3333333333;
    }
    .p-diagnosis-ttl--sp::before {
        top: -25%;
        left: 1.5%;
        transform: none;
    }
    .p-diagnosis-ttl--sp::after {
        display: none;
    }
}

/* ---------------------------------------------
*   p-diagnosis-tabs
--------------------------------------------- */
.p-diagnosis-tabs {
    max-width: calc(var(--diagnosis-width) * 1px);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-tabs {
        max-width: none;
    }
}
.p-diagnosis-tabs__tab-list {
    padding-inline: min(14 / var(--diagnosis-content-width) * 100vw, 14px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(3 / var(--diagnosis-content-width) * 100vw, 3px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-tabs__tab-list {
        display: none;
    }
}
.p-diagnosis-tabs__tab {
    padding: min(15 / var(--diagnosis-content-width) * 100vw, 15px) min(5 / var(--diagnosis-content-width) * 100vw, 5px) min(11 / var(--diagnosis-content-width) * 100vw, 11px);
    border-radius: min(12 / var(--diagnosis-content-width) * 100vw, 12px) min(12 / var(--diagnosis-content-width) * 100vw, 12px) 0 0;
    background-color: var(--color-blue-1);
    color: var(--color-white-1);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.3s;
    opacity: 0.5;
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-tabs__tab:hover {
        opacity: 1 !important;
    }
}
.p-diagnosis-tabs__tab.is-current {
    opacity: 1;
    pointer-events: none;
}
.p-diagnosis-tabs__tab-en {
    display: block;
    font-size: min(28 / var(--diagnosis-content-width) * 100vw, 28px);
    letter-spacing: 0.1em;
    line-height: 1;
}
.p-diagnosis-tabs__tab-en--narrow {
    letter-spacing: -0.05em;
}
.p-diagnosis-tabs__tab-jp {
    display: block;
    font-size: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    letter-spacing: 0.2em;
    line-height: 1.15;
}
.p-diagnosis-tabs__body {
    padding: min(20 / var(--diagnosis-width) * 100vw, 20px);
    border-radius: min(12 / var(--diagnosis-content-width) * 100vw, 12px);
    background-color: var(--color-white-2);
    min-height: min(668 / var(--diagnosis-content-width) * 100vw, 668px);
    filter: drop-shadow(0px 0px 10px rgba(var(--color-black-1-rgb), 0.2));
}
@media screen and (max-width: 767px) {
    .p-diagnosis-tabs__body {
        padding: calc(11 / var(--design-width) * 100vw) calc(11 / var(--design-width) * 100vw) calc(24 / var(--design-width) * 100vw);
        border-radius: calc(12 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-diagnosis-section-cart
--------------------------------------------- */
.p-diagnosis-section-cart {
    position: relative;
    z-index: -1;
    padding-block: 43px 45px;
    background: linear-gradient(90deg, rgb(252, 250, 243) 0%, rgba(221, 232, 240, 0.1) 5%, rgb(221, 232, 240) 100%);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart {
        padding-block: calc(26 / var(--design-width) * 100vw) calc(31 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-cart__note {
    display: block;
    font-size: 14px;
    letter-spacing: 0.075em;
    line-height: 1.7857142857;
    margin-top: 97px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__note {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.5714285714;
        margin-top: calc(13 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-cart__body {
    position: relative;
    max-width: 949px;
    margin-top: 64px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__body {
        max-width: none;
        margin-top: calc(33 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-cart__body img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-diagnosis-section-cart__illust {
    position: relative;
    z-index: 1;
}
.p-diagnosis-section-cart__circle {
    position: absolute;
    z-index: -1;
    display: block;
    aspect-ratio: 1/1;
    border-radius: 50%;
    filter: blur(16px);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__circle {
        filter: blur(calc(10 / var(--design-width) * 100vw));
    }
}
.p-diagnosis-section-cart__circle--1 {
    top: 30%;
    left: 16%;
    width: calc(247 / 949 * 100%);
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__circle--1 {
        top: 45.4%;
        left: 7.6%;
        width: calc(168 / 345 * 100%);
    }
}
.p-diagnosis-section-cart__circle--2 {
    top: 27.6%;
    left: 51.5%;
    width: calc(223 / 949 * 100%);
    background-color: var(--color-blue-9);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__circle--2 {
        top: 35.1%;
        left: 52%;
        width: calc(154 / 345 * 100%);
    }
}
.p-diagnosis-section-cart__circle--3 {
    top: 5%;
    left: 33.1%;
    width: calc(207 / 949 * 100%);
    background-color: var(--color-green-2);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__circle--3 {
        top: 20.3%;
        left: 19.4%;
        width: calc(126 / 345 * 100%);
    }
}
.p-diagnosis-section-cart__circle--4 {
    top: 0.1%;
    left: 74.8%;
    width: calc(226 / 949 * 100%);
    background-color: var(--color-purple-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__circle--4 {
        top: 7.4%;
        left: 54.2%;
        width: calc(143 / 345 * 100%);
    }
}
.p-diagnosis-section-cart__small {
    display: block;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.2em;
    line-height: 1.75;
    margin-top: 40px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-cart__small {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.3333333333;
        margin-top: calc(21 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-diagnosis-section-use
--------------------------------------------- */
.p-diagnosis-section-use {
    padding-block: 54px 99px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-use {
        padding-block: calc(48 / var(--design-width) * 100vw) 0;
    }
}
.p-diagnosis-section-use__note {
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.7777777778;
    margin-top: 32px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-use__note {
        padding-inline: calc(var(--contents-side-padding) * 1px);
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.5;
        margin-top: calc(37 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-section-use__body {
    margin-top: 24px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-section-use__body {
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-diagnosis-cassette-use
--------------------------------------------- */
.p-diagnosis-cassette-use {
    padding-block: 57px 89px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use {
        padding-block: 0 calc(26 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__container {
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: calc(var(--contents-side-padding) * 1px);
}
.p-diagnosis-cassette-use__inner {
    max-width: 676px;
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__inner {
        max-width: none;
    }
}
.p-diagnosis-cassette-use__ttl-en {
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__ttl-en {
        display: block;
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__ttl-jp {
    display: block;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.075em;
    line-height: 1.75;
    margin-top: 8px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__ttl-jp {
        font-size: calc(18 / var(--design-width) * 100vw);
        letter-spacing: 0.02em;
        line-height: 1.7777777778;
        margin-top: calc(-1 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__body {
    max-width: 456px;
    margin-top: 32px;
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__body {
        max-width: none;
        margin-top: calc(319 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__lead {
    display: block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.075em;
    line-height: 1.7777777778;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__lead {
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}
.p-diagnosis-cassette-use__txt {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    font-size: 14px;
    letter-spacing: 0.075em;
    margin-top: 39px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.7142857143;
        margin-top: calc(24 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__txt::before {
    content: "";
    position: relative;
    top: 11px;
    display: block;
    width: 4px;
    height: 1px;
    background-color: var(--color-base-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__txt::before {
        width: calc(5 / var(--design-width) * 100vw);
        height: calc(1 / var(--design-width) * 100vw);
        top: calc(12 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-cassette-use__txt + .p-diagnosis-cassette-use__txt {
    margin-top: 0.9rem;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use__txt + .p-diagnosis-cassette-use__txt {
        margin-top: 0;
    }
}
.p-diagnosis-cassette-use--1 {
    background: url(../img/diagnosis/bg_use_01.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-cassette-use--1 {
        background: url(../img/diagnosis/bg_use_01.png) top right no-repeat;
        background-size: auto 100%;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use--1 {
        background: url(../img/diagnosis/sp/bg_use_01.png) top calc(64 / var(--design-width) * 100vw) center no-repeat;
        background-size: 100% auto;
    }
}
.p-diagnosis-cassette-use--2 {
    background: url(../img/diagnosis/bg_use_02.png) top right no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-cassette-use--2 {
        background: url(../img/diagnosis/bg_use_02.png) top left no-repeat;
        background-size: auto 100%;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use--2 {
        background: url(../img/diagnosis/sp/bg_use_02.png) top calc(64 / var(--design-width) * 100vw) center no-repeat;
        background-size: 100% auto;
        margin-top: calc(54 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-diagnosis-cassette-use--2 .p-diagnosis-cassette-use__inner {
        margin-left: 42px;
        margin-right: auto;
    }
}
.p-diagnosis-cassette-use--2 .p-diagnosis-cassette-use__body {
    margin-left: 0;
}
.p-diagnosis-cassette-use--3 {
    background: url(../img/diagnosis/bg_use_03.png) top left no-repeat;
    background-size: auto 100%;
}
@media screen and (max-width: 1024px) {
    .p-diagnosis-cassette-use--3 {
        background: url(../img/diagnosis/bg_use_03.png) top right no-repeat;
        background-size: auto 100%;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-cassette-use--3 {
        background: url(../img/diagnosis/sp/bg_use_03.png) top calc(64 / var(--design-width) * 100vw) center no-repeat;
        background-size: 100% auto;
        margin-top: calc(54 / var(--design-width) * 100vw);
    }
    .p-diagnosis-cassette-use--3 .p-diagnosis-cassette-use__ttl-jp {
        letter-spacing: -0.07em;
        white-space: nowrap;
    }
    .p-diagnosis-cassette-use--3 .p-diagnosis-cassette-use__lead {
        letter-spacing: 0;
        white-space: nowrap;
    }
}

/* ---------------------------------------------
*   p-diagnosis-links
--------------------------------------------- */
.p-diagnosis-links {
    padding-block: 84px;
    background-color: var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .p-diagnosis-links {
        padding-block: calc(90 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-links__list {
    padding-inline: 11px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-links__list {
        padding-inline: 0;
        grid-template-columns: repeat(1, 1fr);
        gap: calc(32 / var(--design-width) * 100vw);
    }
}
.p-diagnosis-links__link {
    display: block;
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .p-diagnosis-links__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-links__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
.p-diagnosis-links__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/*  .p-diagnosis-slider-sp
--------------------------------------------- */
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-sp__wrapper {
        position: relative;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-sp .js-tab-target {
        display: block !important;
    }
}
.p-diagnosis-slider-sp .splide__arrow {
    display: none;
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-sp .splide__arrow {
        --arrow-pos-x: -22;
        position: absolute;
        top: calc(292 / var(--design-width) * 100vw);
        z-index: 1;
        display: grid;
        place-items: center;
        width: calc(38 / var(--design-width) * 100vw);
        aspect-ratio: 1/1;
        background-color: var(--color-blue-1);
        box-sizing: border-box;
        touch-action: manipulation;
        cursor: pointer;
        overflow: hidden;
        border-radius: 50%;
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .p-diagnosis-slider-sp .splide__arrow {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-diagnosis-slider-sp .splide__arrow:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .p-diagnosis-slider-sp .splide__arrow--prev {
        left: calc(var(--arrow-pos-x) / var(--design-width) * 100vw);
        rotate: 180deg;
    }
    .p-diagnosis-slider-sp .splide__arrow--next {
        right: calc(var(--arrow-pos-x) / var(--design-width) * 100vw);
    }
    .p-diagnosis-slider-sp .splide__arrow::before {
        content: "";
        position: absolute;
        width: calc(8 / var(--design-width) * 100vw);
        aspect-ratio: 88/150;
        -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
                mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
        background-color: var(--color-white-1);
    }
}
.p-diagnosis-slider-sp .splide__pagination {
    display: none;
}

/*  js-more-trigger
--------------------------------------------- */
.js-more-trigger {
    display: none;
}
@media screen and (max-width: 767px) {
    .js-more-trigger {
        position: relative;
        padding-top: calc(26 / var(--design-width) * 100vw);
        display: block;
        color: var(--color-blue-1);
        font-size: calc(12 / var(--design-width) * 100vw);
        letter-spacing: 0.2em;
        line-height: 1.5;
        text-align: center;
        margin-inline: auto;
        margin-top: calc(15 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) and (hover: hover) and (pointer: fine) {
    .js-more-trigger {
        transition: opacity var(--hover-duration) ease !important;
    }
    .js-more-trigger:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .js-more-trigger::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: calc(51 / var(--design-width) * 100vw);
        aspect-ratio: 150/88;
        -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
                mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
        background-color: var(--color-blue-1);
        transform: translateX(-50%) rotate(90deg);
        transition: transform 0.3s;
    }
    .is-open .js-more-trigger::before {
        transform: translateX(-50%) rotate(270deg);
    }
}
.is-open .js-more-trigger .open {
    display: none;
}

.js-more-trigger .close {
    display: none;
}
.is-open .js-more-trigger .close {
    display: block;
}

@media screen and (max-width: 767px) {
    .js-more.is-close .p-diagnosis-result-bottom__list {
        display: none;
    }
    .js-more.is-open .p-diagnosis-result-bottom__list {
        display: block;
    }
}

/* ---------------------------------------------
*   p-aqua-section-intro
--------------------------------------------- */
.p-aqua-section-intro {
    position: relative;
    padding-block: 8px 93px;
    background-color: var(--color-blue-4);
    margin-top: 127px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro {
        padding-block: calc(48 / var(--design-width) * 100vw) calc(66 / var(--design-width) * 100vw);
        margin-top: calc(50 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro::before {
    content: "";
    position: absolute;
    top: -256px;
    left: 0;
    display: block;
    width: 100%;
    height: 257px;
    background-color: var(--color-blue-4);
    clip-path: ellipse(50% 50% at 50% 100%);
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro::before {
        top: calc(-103 / var(--design-width) * 100vw);
        height: calc(104 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__ttl {
    display: block;
    width: 523px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__ttl {
        width: calc(279 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__body {
    max-width: 994px;
    margin-top: 35px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__body {
        max-width: none;
        margin-top: calc(44 / var(--design-width) * 100vw);
        white-space: nowrap;
    }
}
.p-aqua-section-intro__body .p-aqua-box {
    margin-block: 82px 50px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__body .p-aqua-box {
        margin-block: calc(44 / var(--design-width) * 100vw) calc(31 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__body .p-aqua-box--forme-intro {
    margin-block: 92px 59px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__body .p-aqua-box--forme-intro {
        margin-block: calc(60 / var(--design-width) * 100vw) calc(44 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__ttl-mama {
    width: 192px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__ttl-mama {
        width: calc(172 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__ttl-note {
    display: block;
    color: var(--color-white-1);
    font-size: 30px;
    margin-top: 57px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__ttl-note {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(49 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__mama-txt {
    color: var(--color-white-1);
    font-size: 24px;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__mama-txt {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 2.0833333333;
    }
}
.p-aqua-section-intro__ttl-forme {
    width: 359px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__ttl-forme {
        width: calc(210 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__forme-note {
    display: block;
    font-family: var(--ff-zen);
    color: var(--color-beige-2);
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin-top: 56px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__forme-note {
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.07em;
        line-height: 1.75;
        white-space: nowrap;
        margin-top: calc(41 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro__forme-txt {
    font-family: var(--ff-zen);
    color: var(--color-beige-2);
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2.25;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__forme-txt {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 2.0833333333;
    }
}
.p-aqua-section-intro__forme-txt strong {
    font-size: 22px;
    letter-spacing: 1.9;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro__forme-txt strong {
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro--mama {
    position: relative;
    z-index: 1;
    padding-block: 8px 319px;
    font-family: var(--ff-fot);
    background-color: var(--color-pink-2);
    filter: drop-shadow(0px 20px 10px rgba(var(--color-brown-2-rgb), 0.2));
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro--mama {
        padding-block: calc(16 / var(--design-width) * 100vw) calc(155 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(5 / var(--design-width) * 100vw) calc(2 / var(--design-width) * 100vw) rgba(var(--color-brown-2-rgb), 0.2));
    }
}
.p-aqua-section-intro--mama::before {
    background-color: var(--color-pink-2);
}
.p-aqua-section-intro--mama .p-aqua-section-intro__body {
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: none;
    margin-top: 85px;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro--mama .p-aqua-section-intro__body {
        padding-inline: 0;
        margin-top: calc(39 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro--forme {
    background-color: var(--color-beige-1);
}
@media screen and (max-width: 767px) {
    .p-aqua-section-intro--forme {
        padding-block: calc(32 / var(--design-width) * 100vw) calc(74 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-intro--forme::before {
    background-color: var(--color-beige-1);
}

/* ---------------------------------------------
*   p-aqua-box
--------------------------------------------- */
.p-aqua-box {
    position: relative;
    padding: 15px;
    background-color: var(--color-white-1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(102 / 994 * 100%);
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box {
        padding: calc(6 / var(--design-width) * 100vw);
        gap: calc(63 / var(--design-width) * 100vw);
        height: calc(55 / var(--design-width) * 100vw);
    }
}
.p-aqua-box__en {
    font-size: 28px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box__en {
        position: relative;
        z-index: 1;
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.p-aqua-box__jp {
    position: relative;
    top: -2px;
    left: 5px;
    font-size: 24px;
    letter-spacing: 0.03em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box__jp {
        position: relative;
        z-index: 1;
        top: 0;
        left: calc(-14 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        line-height: 1.375;
    }
}
.p-aqua-box::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 46.8%;
    display: block;
    width: 1px;
    height: 180px;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
    background-color: var(--color-blue-2);
}
@media screen and (max-width: 767px) {
    .p-aqua-box::before {
        left: 51.1%;
        height: calc(117 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: calc(100% + var(--contents-side-padding) * 2px);
        height: 100%;
        transform: translateX(-50%);
        background-color: var(--color-white-1);
    }
}
.p-aqua-box--value {
    max-width: 994px;
    margin-inline: auto;
    gap: calc(132 / 994 * 100%);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--value {
        gap: calc(36 / var(--design-width) * 100vw);
    }
    .p-aqua-box--value::before {
        left: 33.5%;
    }
}
.p-aqua-box--value .p-aqua-box__jp {
    left: calc(94 / 994 * 100%);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--value .p-aqua-box__jp {
        left: calc(12 / var(--design-width) * 100vw);
    }
}
.p-aqua-box--scents {
    max-width: 994px;
    margin-inline: auto;
    gap: calc(299 / 994 * 100%);
}
@media screen and (max-width: 1024px) {
    .p-aqua-box--scents {
        gap: calc(230 / 994 * 100%);
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--scents {
        gap: calc(76 / var(--design-width) * 100vw);
    }
    .p-aqua-box--scents::before {
        left: 43.6%;
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--scents .p-aqua-box__en {
        position: relative;
        top: calc(2 / var(--design-width) * 100vw);
        line-height: 1.6;
    }
}
.p-aqua-box--scents .p-aqua-box__jp {
    left: calc(-115 / 994 * 100%);
}
@media screen and (max-width: 1024px) {
    .p-aqua-box--scents .p-aqua-box__jp {
        left: calc(-70 / 994 * 100%);
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--scents .p-aqua-box__jp {
        top: calc(1 / var(--design-width) * 100vw);
        left: calc(-13 / var(--design-width) * 100vw);
    }
}
.p-aqua-box--forme-intro {
    gap: calc(80 / 994 * 100%);
    color: var(--color-beige-2);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-intro {
        gap: calc(7 / var(--design-width) * 100vw);
    }
}
.p-aqua-box--forme-intro::before {
    background-color: var(--color-beige-2);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-intro::before {
        left: 36.5%;
    }
}
.p-aqua-box--forme-intro .p-aqua-box__en {
    letter-spacing: 0.16em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-intro .p-aqua-box__en {
        line-height: 1.125;
        letter-spacing: 0.18em;
    }
}
.p-aqua-box--forme-intro .p-aqua-box__jp {
    top: 0;
    left: calc(9 / 994 * 100%);
    font-family: var(--ff-zen);
    font-size: 24px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-intro .p-aqua-box__jp {
        top: calc(4 / var(--design-width) * 100vw);
        left: calc(15 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.01em;
        line-height: 1.375;
    }
}
.p-aqua-box--forme-value {
    gap: calc(117 / 994 * 100%);
    max-width: 994px;
    margin-inline: auto;
    color: var(--color-beige-2);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-value {
        gap: calc(40 / var(--design-width) * 100vw);
    }
}
.p-aqua-box--forme-value::before {
    background-color: var(--color-beige-2);
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-value::before {
        left: 30.7%;
    }
}
.p-aqua-box--forme-value .p-aqua-box__en {
    letter-spacing: 0.16em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-value .p-aqua-box__en {
        line-height: 1.125;
    }
}
.p-aqua-box--forme-value .p-aqua-box__jp {
    top: 0;
    left: calc(89 / 994 * 100%);
    font-family: var(--ff-zen);
    font-size: 24px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-value .p-aqua-box__jp {
        left: calc(5 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.15em;
        line-height: 1.375;
    }
}
.p-aqua-box--forme-scent {
    gap: calc(256 / 994 * 100%);
    max-width: 994px;
    margin-inline: auto;
    color: var(--color-beige-2);
}
@media screen and (max-width: 1024px) {
    .p-aqua-box--forme-scent {
        gap: calc(216 / 994 * 100%);
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-scent {
        gap: calc(43 / var(--design-width) * 100vw);
    }
}
.p-aqua-box--forme-scent::before {
    background-color: var(--color-beige-2);
}
@media screen and (max-width: 1024px) {
    .p-aqua-box--forme-scent::before {
        left: 50.8%;
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-scent::before {
        left: 44.3%;
    }
}
.p-aqua-box--forme-scent .p-aqua-box__en {
    letter-spacing: 0.155em;
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-scent .p-aqua-box__en {
        line-height: 1.125;
        letter-spacing: 0.14em;
    }
}
.p-aqua-box--forme-scent .p-aqua-box__jp {
    top: 0;
    left: calc(-104 / 994 * 100%);
    font-family: var(--ff-zen);
    font-size: 24px;
    letter-spacing: 0.16em;
}
@media screen and (max-width: 1024px) {
    .p-aqua-box--forme-scent .p-aqua-box__jp {
        left: 0;
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-box--forme-scent .p-aqua-box__jp {
        left: calc(10 / var(--design-width) * 100vw);
        font-size: calc(16 / var(--design-width) * 100vw);
        letter-spacing: 0.15em;
        line-height: 1.375;
    }
}

/* ---------------------------------------------
*   p-aqua-section-scents
--------------------------------------------- */
.p-aqua-section-scents {
    padding-block: 63px 63px;
    background-color: var(--color-blue-4);
    filter: drop-shadow(0px 20px 10px rgba(var(--color-gray-4-rgb), 0.2));
}
@media screen and (max-width: 767px) {
    .p-aqua-section-scents {
        padding-block: calc(48 / var(--design-width) * 100vw) calc(41 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(6 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) rgba(132, 105, 105, 0.2));
    }
}
@media screen and (min-width: 768px) {
    .p-aqua-section-scents__head {
        padding-inline: calc(var(--contents-side-padding) * 1px);
    }
}
.p-aqua-section-scents__body {
    max-width: calc(var(--design-width) * 1px);
    margin-top: 48px;
    margin-inline: auto;
    overflow-x: scroll;
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-scents__body {
        max-width: none;
        margin-top: calc(14 / var(--design-width) * 100vw);
    }
}

.p-aqua-section-scents__body::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------
*   p-aqua-list-scents
--------------------------------------------- */
.p-aqua-list-scents {
    padding-block: 40px;
    width: calc(var(--design-width) * 1px);
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 14px;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents {
        padding-block: calc(40 / var(--design-width) * 100vw);
        width: calc(1924 / var(--design-width) * 100vw);
        gap: calc(14 / var(--design-width) * 100vw);
        margin-inline: calc(var(--contents-side-padding) * 1px);
    }
    .safari .p-aqua-list-scents {
        width: calc(513.0666666667vw + var(--contents-side-padding) * 2px);
        padding-inline: calc(var(--contents-side-padding) * 1px);
    }
    .iphone .p-aqua-list-scents {
        width: calc(1924 / var(--design-width) * 100vw);
        padding-inline: 0;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-aqua-list-scents:hover .p-aqua-list-scents__link {
        filter: blur(4px) grayscale(50%); /* ぼかしと彩度低下を適用（スモーキーパフ） */
        opacity: 0.6; /* 透明度を下げて注目度を落とす */
        transform: scale(0.98); /* わずかに縮小させ、メイン要素の拡大を強調 */
    }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
    .p-aqua-list-scents:hover .p-aqua-list-scents__link {
        filter: blur(calc(4 / var(--design-width) * 100vw)) grayscale(50%); /* ぼかしと彩度低下を適用（スモーキーパフ） */
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-aqua-list-scents:hover .p-aqua-list-scents__link:hover {
        filter: none; /* ぼかしと彩度低下を解除し、鮮明に戻す */
        opacity: 1; /* 透明度を元に戻す */
        transform: scale(1.05); /* わずかに拡大して強調（ズームイン） */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* シャドウを強調 */
        z-index: 10; /* 最前面に移動 (重要: 拡大した際、隣の要素に重なるように) */
    }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
    .p-aqua-list-scents:hover .p-aqua-list-scents__link:hover {
        box-shadow: 0 calc(5 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw) rgba(0, 0, 0, 0.2); /* シャドウを強調 */
    }
}
.p-aqua-list-scents__item {
    width: 309px;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__item {
        position: relative;
        width: calc(309 / var(--design-width) * 100vw);
    }
    .p-aqua-list-scents__item:not(:last-of-type)::after {
        content: "";
        z-index: 1;
        position: absolute;
        bottom: calc(21 / var(--design-width) * 100vw);
        right: calc(-26 / var(--design-width) * 100vw);
        display: block;
        width: calc(71 / var(--design-width) * 100vw);
        aspect-ratio: 300/40;
        -webkit-mask: url(../img/series/aqua-savon/sp/ico_arrw.svg) center center no-repeat;
                mask: url(../img/series/aqua-savon/sp/ico_arrw.svg) center center no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        background-color: var(--color-blue-2);
    }
}
.p-aqua-list-scents__item--blue .p-aqua-list-scents__txt {
    border-color: var(--color-blue-9);
}
.p-aqua-list-scents__item--pink .p-aqua-list-scents__txt {
    border-color: var(--color-pink-3);
}
.p-aqua-list-scents__item--shampoo .p-aqua-list-scents__link {
    padding-block: 11px 31px;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__item--shampoo .p-aqua-list-scents__link {
        padding-block: calc(11 / var(--design-width) * 100vw) calc(31 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__item--shampoo .p-aqua-list-scents__caption-en {
    margin-top: -2px;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__item--shampoo .p-aqua-list-scents__caption-en {
        margin-top: calc(-2 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__link {
    position: relative;
    padding: 37px 19px 19px;
    display: block;
    width: 100%;
    height: 100%;
    font-family: var(--ff-shippori);
    text-align: center;
    background: linear-gradient(180deg, rgb(238, 244, 251) 0%, rgba(252, 250, 243, 0.01) 50%, rgb(252, 250, 243) 100%);
    filter: drop-shadow(0px 0px 5px rgba(var(--color-black-1-rgb), 0.2));
    border-radius: 12px;
    opacity: 1;
    transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
    .p-aqua-list-scents__link {
        transition: all 0.4s ease-in-out;
    }
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__link {
        padding: calc(37 / var(--design-width) * 100vw) calc(19 / var(--design-width) * 100vw) calc(19 / var(--design-width) * 100vw);
        border-radius: calc(12 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__term {
    position: absolute;
    top: 10px;
    left: 50%;
    display: block;
    width: 218px;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__term {
        top: calc(10 / var(--design-width) * 100vw);
        width: calc(218 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__fig {
    display: block;
    width: 210px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__fig {
        width: calc(210 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-aqua-list-scents__caption-en {
    display: block;
    font-size: 15px;
    letter-spacing: 0.2em;
    line-height: 1.3333333333;
    margin-top: 1px;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__caption-en {
        font-size: calc(15 / var(--design-width) * 100vw);
        margin-top: calc(1 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__caption-jp {
    display: block;
    font-size: 14px;
    letter-spacing: 0.014em;
    line-height: 1.7142857143;
    margin-top: 5px;
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__caption-jp {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-aqua-list-scents__txt {
    padding-top: 9px;
    display: block;
    font-size: 12px;
    letter-spacing: 0.014em;
    line-height: 2;
    margin-top: 12px;
    border-top: 1px solid var(--color-blue-1);
}
@media screen and (max-width: 767px) {
    .p-aqua-list-scents__txt {
        padding-top: calc(9 / var(--design-width) * 100vw);
        font-size: calc(12 / var(--design-width) * 100vw);
        margin-top: calc(12 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-aqua-section-concept
--------------------------------------------- */
.p-aqua-section-concept {
    padding-block: min(123 / var(--design-width) * 100vw, 123px) min(110 / var(--design-width) * 100vw, 110px);
    display: grid;
    grid-template-columns: calc(912 / var(--design-width) * 100%) 1fr;
    align-items: center;
    gap: min(40 / var(--design-width) * 100vw, 40px);
    max-width: calc(var(--design-width) * 1px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-concept {
        padding-block: calc(52 / var(--design-width) * 100vw) calc(60 / var(--design-width) * 100vw);
        display: block;
        max-width: none;
    }
}
.p-aqua-section-concept__img {
    display: block;
    width: 100%;
    aspect-ratio: 1825/1560;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-concept__img {
        padding-right: calc(var(--contents-side-padding) * 1px);
        aspect-ratio: 361/310;
    }
}
.p-aqua-section-concept__detail {
    padding-top: min(92 / var(--design-width) * 100vw, 92px);
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: 631px;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-concept__detail {
        padding-top: 0;
        padding-inline: calc(var(--contents-side-padding) * 1px);
        max-width: none;
        margin-top: calc(47 / var(--design-width) * 100vw);
    }
}
.p-aqua-section-concept__txt {
    font-size: min(16 / var(--design-width) * 100vw, 16px);
    letter-spacing: 0.2em;
    line-height: 2.125;
}
@media screen and (max-width: 767px) {
    .p-aqua-section-concept__txt {
        font-size: calc(16 / var(--design-width) * 100vw);
        font-weight: 300;
        line-height: 1.625;
    }
}
.p-aqua-section-concept .c-link-2 {
    margin-top: min(97 / var(--design-width) * 100vw, 97px);
}

/* ---------------------------------------------
*   p-mama-block-intro
--------------------------------------------- */
.p-mama-block-intro {
    position: relative;
    padding: 55px 6.3888888889% 60px;
    max-width: 1080px;
    font-family: var(--ff-fot);
    color: var(--color-brown-3);
    margin-inline: auto;
    margin-top: 90px;
    background-color: var(--color-white-4);
    border-radius: 41px;
    filter: drop-shadow(7px 7px 5px rgba(var(--color-brown-2-rgb), 0.75));
    transform: translateZ(0);
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro {
        padding: calc(117 / var(--design-width) * 100vw) calc(19 / var(--design-width) * 100vw) calc(68 / var(--design-width) * 100vw);
        margin-top: calc(87 / var(--design-width) * 100vw);
        filter: drop-shadow(calc(5 / var(--design-width) * 100vw) calc(5 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) rgba(var(--color-brown-2-rgb), 0.75));
        border-radius: calc(41 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro::before, .p-mama-block-intro::after {
    content: "";
    position: absolute;
    display: block;
}
.p-mama-block-intro::before {
    top: max(-97 / var(--contents-width) * 100vw, -97px);
    right: max(-176 / var(--contents-width) * 100vw, -176px);
    width: min(361 / var(--contents-width) * 100vw, 361px);
    aspect-ratio: 241/226;
    background: url(../img/series/mama-aqua-savon/img_intro_02.png) 0 0 no-repeat;
    background-size: cover;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro::before {
        top: calc(-37 / var(--design-width) * 100vw);
        right: calc(-20 / var(--design-width) * 100vw);
        width: calc(181 / var(--design-width) * 100vw);
        aspect-ratio: 362/329;
        background: url(../img/series/mama-aqua-savon/sp/img_intro_02.png) 0 0 no-repeat;
        background-size: cover;
        transform: none;
    }
}
.p-mama-block-intro::after {
    bottom: max(-144 / var(--contents-width) * 100vw, -144px);
    left: min(16 / var(--contents-width) * 100vw, 16px);
    width: min(224 / var(--contents-width) * 100vw, 224px);
    aspect-ratio: 224/205;
    background: url(../img/series/mama-aqua-savon/img_intro_03.png) 0 0 no-repeat;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro::after {
        bottom: calc(-106 / var(--design-width) * 100vw);
        left: 0;
        width: calc(151 / var(--design-width) * 100vw);
        aspect-ratio: 302/334;
        background: url(../img/series/mama-aqua-savon/sp/img_intro_03.png) 0 0 no-repeat;
        background-size: cover;
        transform: none;
    }
}
.p-mama-block-intro__ico {
    position: absolute;
    display: block;
    top: -31px;
    left: 50.7%;
    width: 65px;
    aspect-ratio: 130/132;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__ico {
        top: calc(-34 / var(--design-width) * 100vw);
        width: calc(38 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro__ttl {
    font-size: 36px;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__ttl {
        font-size: calc(28 / var(--design-width) * 100vw);
        line-height: 1.75;
    }
}
@media screen and (min-width: 1101px) {
    .p-mama-block-intro__ttl .hide {
        display: none;
    }
}
.p-mama-block-intro__body {
    padding-left: 81px;
    margin-top: 70px;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__body {
        padding-left: 0;
        margin-top: calc(59 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro__item {
    position: relative;
}
.p-mama-block-intro__item::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -66px;
    display: block;
    width: 45px;
    aspect-ratio: 89/91;
    background: url(../img/series/mama-aqua-savon/img_intro_04.png) 0 0 no-repeat;
    background-size: cover;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__item::before {
        top: calc(-5 / var(--design-width) * 100vw);
        left: calc(-3 / var(--design-width) * 100vw);
        width: calc(36 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro__item + .p-mama-block-intro__item {
    margin-top: 74px;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__item + .p-mama-block-intro__item {
        margin-top: calc(63 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro__term {
    font-size: 24px;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__term {
        padding-left: calc(43 / var(--design-width) * 100vw);
        font-size: calc(22 / var(--design-width) * 100vw);
    }
}
.p-mama-block-intro__dd {
    font-size: 18px;
    line-height: 1.7777777778;
    margin-top: 11px;
}
@media screen and (max-width: 767px) {
    .p-mama-block-intro__dd {
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 1.5555555556;
        white-space: normal;
        margin-top: calc(19 / var(--design-width) * 100vw);
        font-feature-settings: "palt";
        text-align: justify;
    }
}

/* ---------------------------------------------
*   p-mama-section-scent
--------------------------------------------- */
.p-mama-section-scent {
    padding-block: min(101 / var(--contents-width) * 100vw, 101px) min(225 / var(--contents-width) * 100vw, 225px);
    font-family: var(--ff-fot);
    color: var(--color-brown-3);
    background-color: var(--color-yellow-1);
    margin-block: 0 83px;
    filter: drop-shadow(0px 20px 10px rgba(var(--color-brown-2-rgb), 0.2));
    transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent {
        padding-block: calc(82 / var(--design-width) * 100vw) calc(76 / var(--design-width) * 100vw);
        margin-block: 0 calc(69 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(6 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) rgba(132, 105, 105, 0.2));
    }
}
.p-mama-section-scent__container {
    position: relative;
    display: grid;
    grid-template-columns: calc(720 / var(--design-width) * 100%) 1fr;
    align-items: center;
    gap: min(40 / var(--contents-width) * 100vw, 40px);
    max-width: calc(var(--design-width) * 1px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container {
        display: block;
        max-width: none;
    }
}
.p-mama-section-scent__container--1 .p-mama-section-scent__illust {
    width: calc(302 / 707 * 100%);
    margin-top: min(72 / var(--contents-width) * 100vw, 72px);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--1 .p-mama-section-scent__illust {
        position: relative;
        left: -0.8%;
        width: calc(285 / var(--design-width) * 100vw);
        margin-top: calc(-3 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__container--2 {
    grid-template-columns: 1fr calc(720 / var(--design-width) * 100%);
    gap: min(150 / var(--contents-width) * 100vw, 150px);
}
@media screen and (max-width: 1250px) {
    .p-mama-section-scent__container--2 {
        margin-top: min(70 / var(--contents-width) * 100vw, 70px);
    }
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
        margin-top: calc(70 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__img {
        position: absolute;
        top: max(-321 / var(--contents-width) * 100vw, -321px);
        right: 0;
        display: block;
        width: calc(720 / var(--design-width) * 100%);
        aspect-ratio: 720/1080;
    }
}
@media screen and (max-width: 1770px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__img {
        top: max(-150 / var(--contents-width) * 100vw, -150px);
    }
}
@media screen and (max-width: 1500px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__img {
        top: 0;
    }
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__img {
        margin-left: auto;
    }
}
.p-mama-section-scent__container--2 .p-mama-section-scent__illust {
    position: relative;
    left: 3.7%;
    width: calc(358 / 695 * 100%);
    margin-top: min(30 / var(--contents-width) * 100vw, 30px);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__illust {
        left: 0.6%;
        width: calc(270 / var(--design-width) * 100vw);
        margin-top: calc(-11 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__container--2 .p-mama-section-scent__detail {
    padding-top: min(87 / var(--contents-width) * 100vw, 87px);
    max-width: 695px;
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__detail {
        padding-top: 0;
        max-width: none;
        margin-top: calc(77 / var(--design-width) * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__ttl {
        font-size: calc(28 / var(--design-width) * 100vw);
        line-height: 1.35;
    }
}
.p-mama-section-scent__container--2 .p-mama-section-scent__txt {
    padding-left: min(21 / var(--contents-width) * 100vw, 21px);
    margin-top: min(60 / var(--contents-width) * 100vw, 60px);
}
@media screen and (max-width: 1024px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__txt {
        padding-left: 0;
    }
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__container--2 .p-mama-section-scent__txt {
        padding-inline: calc(7 / var(--design-width) * 100vw);
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__img {
    display: block;
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__img {
        width: calc(336 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-mama-section-scent__illust {
    display: block;
    margin-inline: auto;
}
.p-mama-section-scent__illust img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-mama-section-scent__detail {
    padding-top: min(92 / var(--contents-width) * 100vw, 92px);
    padding-inline: calc(var(--contents-side-padding) * 1px);
    max-width: 707px;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__detail {
        padding-top: 0;
        padding-inline: calc(var(--contents-side-padding) * 1px);
        max-width: none;
        margin-top: calc(81 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__ttl {
    display: block;
    font-size: min(32 / var(--contents-width) * 100vw, 32px);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__ttl {
        font-size: calc(24 / var(--design-width) * 100vw);
    }
}
.p-mama-section-scent__ttl-large {
    display: block;
    font-size: min(36 / var(--contents-width) * 100vw, 36px);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__ttl-large {
        font-size: calc(28 / var(--design-width) * 100vw);
        line-height: 1.7;
    }
}
.p-mama-section-scent__txt {
    font-size: min(18 / var(--contents-width) * 100vw, 18px);
    line-height: 2;
    margin-top: min(49 / var(--contents-width) * 100vw, 49px);
}
@media screen and (max-width: 767px) {
    .p-mama-section-scent__txt {
        padding-inline: calc(10 / var(--design-width) * 100vw);
        font-size: calc(18 / var(--design-width) * 100vw);
        line-height: 2;
        margin-top: calc(-28 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-forme-section-value
--------------------------------------------- */
.p-forme-section-value {
    width: 100%;
    background: url(../img/series/aqua-savon-forme/bg_value.png) top center repeat-x;
    background-size: 1943px 2658px;
    height: 669px;
}
@media screen and (min-width: 768px) {
    .p-forme-section-value {
        background-attachment: fixed;
    }
}
.ipad .p-forme-section-value {
    background-attachment: inherit;
}

@media screen and (max-width: 767px) {
    .p-forme-section-value {
        background: url(../img/series/aqua-savon-forme/sp/bg_value.png) top left no-repeat;
        background-size: calc(384 / var(--design-width) * 100vw) 100%;
        height: calc(1016 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__container {
    padding-block: 136px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__container {
        padding-block: calc(65 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__body {
    margin-top: 102px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__body {
        margin-top: calc(49 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 26px;
}
@media screen and (max-width: 1024px) {
    .p-forme-section-value__list {
        gap: 15px;
    }
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__list {
        display: block;
    }
}
.p-forme-section-value__item {
    padding: 0 calc(32 / 356 * 100%) 24px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    border-radius: 36px;
    background-color: var(--color-white-1);
    font-family: var(--ff-zen);
}
@media screen and (max-width: 1024px) {
    .p-forme-section-value__item {
        padding-inline: 10px;
    }
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__item {
        padding: 0 calc(36 / var(--design-width) * 100vw) calc(20 / var(--design-width) * 100vw);
        border-radius: calc(36 / var(--design-width) * 100vw);
    }
    .p-forme-section-value__item + .p-forme-section-value__item {
        margin-top: calc(21 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__num {
    display: block;
    width: 49px;
    margin-left: 5%;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__num {
        width: calc(46 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__num img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-forme-section-value__ttls {
    text-align: center;
    margin-top: 5px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__ttls {
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__ttl-en {
    display: block;
    color: var(--color-beige-3);
    font-size: 16px;
    letter-spacing: 0.3em;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__ttl-en {
        font-size: calc(16 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__ttl-jp {
    display: block;
    color: var(--color-beige-2);
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.25;
    margin-top: 14px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__ttl-jp {
        font-size: calc(18 / var(--design-width) * 100vw);
        margin-top: calc(14 / var(--design-width) * 100vw);
    }
}
.p-forme-section-value__txt {
    color: var(--color-beige-2);
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-top: 30px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-value__txt {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.9166666667;
        margin-top: calc(29 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-forme-section-scent
--------------------------------------------- */
.p-forme-section-scent {
    padding-block: 194px 122px;
    background-color: var(--color-beige-1);
    margin-block: 0 192px;
    filter: drop-shadow(0px 21px 10px rgba(var(--color-gray-4-rgb), 0.2));
    transform: translate3d(0, 0, 0);
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent {
        padding-block: calc(62 / var(--design-width) * 100vw) calc(80 / var(--design-width) * 100vw);
        margin-block: 0 calc(58 / var(--design-width) * 100vw);
        filter: drop-shadow(0px calc(5 / var(--design-width) * 100vw) calc(2 / var(--design-width) * 100vw) rgba(var(--color-gray-4-rgb), 0.2));
    }
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__container {
        padding-inline: 0;
    }
}
.p-forme-section-scent__note {
    display: block;
    color: var(--color-beige-2);
    font-family: var(--ff-zen);
    font-size: 22px;
    letter-spacing: 0.1em;
    line-height: 1.6363636364;
    margin-top: 58px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__note {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.7142857143;
        margin-top: calc(42 / var(--design-width) * 100vw);
    }
}
.p-forme-section-scent__body {
    margin-top: 77px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__body {
        margin-top: 0;
        overflow-x: scroll;
        /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
        -ms-overflow-style: none;
        /*Firefoxへの対応*/
        scrollbar-width: none;
    }
}
.p-forme-section-scent__list {
    padding-inline: min(34 / var(--contents-width) * 100vw, 34px);
    display: grid;
    grid-template-columns: min((100% - 2rem) / 3, 274px) min((100% - 2rem) / 3, 274px) min((100% - 2rem) / 3, 274px);
    grid-auto-rows: auto;
    gap: 1rem;
    justify-content: space-between;
}
@media screen and (max-width: 1024px) {
    .p-forme-section-scent__list {
        padding-inline: 0;
    }
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__list {
        padding-block: calc(20 / var(--design-width) * 100vw);
        grid-template-columns: repeat(3, 1fr);
        gap: calc(40 / var(--design-width) * 100vw);
        width: calc(902 / var(--design-width) * 100vw);
        margin-inline: calc(var(--contents-side-padding) * 1px);
    }
    .safari .p-forme-section-scent__list {
        width: calc(240.5333333333vw + var(--contents-side-padding) * 2px);
        padding-inline: calc(var(--contents-side-padding) * 1px);
    }
    .iphone .p-forme-section-scent__list {
        width: calc(902 / var(--design-width) * 100vw);
        padding-inline: 0;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-forme-section-scent__list:hover .p-forme-section-scent__link {
        filter: blur(4px) grayscale(50%); /* ぼかしと彩度低下を適用（スモーキーパフ） */
        opacity: 0.6; /* 透明度を下げて注目度を落とす */
        transform: scale(0.98); /* わずかに縮小させ、メイン要素の拡大を強調 */
    }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
    .p-forme-section-scent__list:hover .p-forme-section-scent__link {
        filter: blur(calc(4 / var(--design-width) * 100vw)) grayscale(50%); /* ぼかしと彩度低下を適用（スモーキーパフ） */
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-forme-section-scent__list:hover .p-forme-section-scent__link:hover {
        filter: none; /* ぼかしと彩度低下を解除し、鮮明に戻す */
        opacity: 1; /* 透明度を元に戻す */
        transform: scale(1); /* わずかに拡大して強調（ズームイン） */
    }
    .p-forme-section-scent__list:hover .p-forme-section-scent__link:hover img {
        transform: scale(1.05); /* わずかに拡大して強調（ズームイン） */
        z-index: 10; /* 最前面に移動 (重要: 拡大した際、隣の要素に重なるように) */
    }
}
.p-forme-section-scent__item {
    display: contents;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__item:not(:last-of-type) .p-forme-section-scent__link::after {
        content: "";
        z-index: 1;
        position: absolute;
        top: 56.5%;
        right: calc(-56 / var(--design-width) * 100vw);
        display: block;
        width: calc(71 / var(--design-width) * 100vw);
        aspect-ratio: 300/40;
        -webkit-mask: url(../img/series/aqua-savon/sp/ico_arrw.svg) center center no-repeat;
                mask: url(../img/series/aqua-savon/sp/ico_arrw.svg) center center no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        background-color: var(--color-beige-3);
    }
}
.p-forme-section-scent__link {
    width: 100%;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;
    font-family: var(--ff-zen);
}
@media (hover: hover) and (pointer: fine) {
    .p-forme-section-scent__link {
        opacity: 1;
        transform: scale(1);
        transition: all 0.4s ease-in-out;
    }
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__link {
        position: relative;
        max-width: none;
    }
}
.p-forme-section-scent__illust {
    display: block;
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .p-forme-section-scent__illust img {
        transition: all 0.4s ease-in-out;
    }
}
.p-forme-section-scent__label {
    padding: 4px 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(260 / 274 * 100%);
    color: var(--color-white-1);
    font-size: 16px;
    letter-spacing: 0.3em;
    line-height: 1;
    margin-top: 63px;
    margin-inline: auto;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__label {
        padding: calc(4 / var(--design-width) * 100vw) calc(3 / var(--design-width) * 100vw) calc(6 / var(--design-width) * 100vw);
        width: calc(261 / 274 * 100%);
        font-size: calc(16 / var(--design-width) * 100vw);
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}
.p-forme-section-scent__label--1 {
    background-color: #bbc7c9;
}
.p-forme-section-scent__label--2 {
    background-color: #9dab96;
}
.p-forme-section-scent__label--3 {
    background-color: #d1afad;
}
.p-forme-section-scent__term {
    display: block;
    color: var(--color-brown-3);
    font-size: 20px;
    letter-spacing: -0.075em;
    margin-top: 14px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__term {
        font-size: calc(20 / var(--design-width) * 100vw);
        margin-top: calc(14 / var(--design-width) * 100vw);
    }
}
.p-forme-section-scent__txt {
    padding-inline: calc(12 / 274 * 100%);
    color: var(--color-brown-3);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.15em;
    line-height: 1.7142857143;
    text-align: justify;
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    .p-forme-section-scent__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.8;
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}

.p-forme-section-scent__body::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------
*   p-top-slider
--------------------------------------------- */
.p-top-slider__wrapper {
    position: relative;
}
.p-top-slider .splide__slide {
    display: block;
    width: 100%;
    aspect-ratio: 1920/800;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-top-slider .splide__slide {
        aspect-ratio: 375/500;
    }
}
.p-top-slider .splide__slide.is-active img {
    animation: 16s forwards zoom;
    transition-position: center;
}
@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}
.p-top-slider .splide__arrow {
    --arrow-pos-x: 38px;
    position: absolute;
    top: 50%;
    z-index: 1;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 47px;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    touch-action: manipulation;
    cursor: pointer;
    overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider .splide__arrow {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-slider .splide__arrow:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .p-top-slider .splide__arrow {
        display: none;
    }
}
.p-top-slider .splide__arrow--prev {
    left: var(--arrow-pos-x);
    transform: translateY(-50%) rotate(180deg);
}
.p-top-slider .splide__arrow--next {
    right: var(--arrow-pos-x);
    transform: translateY(-50%);
}
.p-top-slider .splide__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    aspect-ratio: 81/150;
    background: url(../img/common/ico_arrow-5.svg) center center no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, -50%);
}
.p-top-slider .splide__pagination {
    position: absolute;
    left: 50%;
    bottom: 50px;
    gap: 26px;
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-top-slider .splide__pagination {
        position: static;
        margin-top: calc(7 / var(--design-width) * 100vw);
        gap: calc(16 / var(--design-width) * 100vw);
        transform: none;
    }
}
.p-top-slider .splide__pagination li {
    font-size: 0;
}
.p-top-slider .splide__pagination__page {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid var(--color-blue-8);
    transition: background-color 0.3s;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .p-top-slider .splide__pagination__page {
        width: calc(10 / var(--design-width) * 100vw);
        height: calc(10 / var(--design-width) * 100vw);
    }
}
.p-top-slider .splide__pagination__page.is-active {
    background-color: var(--color-blue-8);
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider .splide__pagination__page:hover {
        background-color: var(--color-blue-8);
    }
}
.p-top-slider__img {
    display: block;
    width: 100%;
    height: 100%;
}
.p-top-slider__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   p-top-block-info
--------------------------------------------- */
.p-top-block-info {
    padding: 15px 47px 11px 52px;
    border-radius: 6px;
    border: 1px solid var(--color-blue-1);
}
@media screen and (max-width: 1024px) {
    .p-top-block-info {
        padding-inline: calc(var(--contents-side-padding) * 1px);
    }
}
@media screen and (max-width: 767px) {
    .p-top-block-info {
        padding: calc(9 / var(--design-width) * 100vw) calc(10 / var(--design-width) * 100vw) calc(15 / var(--design-width) * 100vw);
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-top-block-info__link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-block-info__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-block-info__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-top-block-info__link .p-top-block-info__btn-ico {
        transition: background-color 0.3s;
    }
    .p-top-block-info__link .p-top-block-info__btn-ico::after {
        transition: background-color 0.3s;
    }
    .p-top-block-info__link:hover .p-top-block-info__btn-ico {
        background-color: var(--color-blue-2);
    }
    .p-top-block-info__link:hover .p-top-block-info__btn-ico::after {
        background-color: var(--color-white-1);
    }
}
@media screen and (max-width: 767px) {
    .p-top-block-info__link {
        display: block;
    }
}
.p-top-block-info__link + .p-top-block-info__link {
    margin-top: 1rem;
}
.p-top-block-info__top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__top {
        gap: 0.6rem;
    }
}
.p-top-block-info__tag {
    padding: 6px 8px 4px;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1;
    background-color: var(--color-blue-1);
    margin-top: 4px;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__tag {
        padding: calc(6 / var(--design-width) * 100vw) calc(8 / var(--design-width) * 100vw) calc(4 / var(--design-width) * 100vw);
        font-size: calc(18 / var(--design-width) * 100vw);
        letter-spacing: -0.01em;
        margin-top: 0;
    }
}
.p-top-block-info__date {
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 10px;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__date {
        font-size: calc(14 / var(--design-width) * 100vw);
        margin-top: calc(7 / var(--design-width) * 100vw);
    }
}
.p-top-block-info__txts {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__txts {
        gap: 0.7rem;
        margin-top: calc(8 / var(--design-width) * 100vw);
    }
}
.p-top-block-info__txt {
    display: block;
    color: var(--color-black-2);
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: 1.5;
    max-width: 640px;
    width: 100%;
    margin-top: 4px;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__txt {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.5833333333;
        max-width: none;
        margin-top: 0;
    }
}
.p-top-block-info__btn {
    flex-shrink: 0;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__btn {
        position: relative;
        top: calc(-5 / var(--design-width) * 100vw);
    }
}
.p-top-block-info__btn-ico {
    position: relative;
    border-radius: 50%;
    border: 1px solid var(--color-blue-2);
    width: 30px;
    aspect-ratio: 1/1;
    display: block;
    margin-inline: auto;
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__btn-ico {
        width: calc(30 / var(--design-width) * 100vw);
        border-color: var(--color-blue-1);
    }
}
.p-top-block-info__btn-ico::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-blue-2);
}
@media screen and (max-width: 767px) {
    .p-top-block-info__btn-ico::after {
        width: calc(6 / var(--design-width) * 100vw);
        background-color: var(--color-blue-1);
    }
}
.p-top-block-info__btn-txt {
    display: block;
    color: var(--color-blue-2);
    font-size: 11px;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    margin-top: 2px;
}
@media screen and (max-width: 767px) {
    .p-top-block-info__btn-txt {
        color: var(--color-blue-1);
        font-size: calc(11 / var(--design-width) * 100vw);
        margin-top: calc(1 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-top-block-scents
--------------------------------------------- */
.p-top-block-scents {
    padding-block: 42px;
    padding-inline: calc(73 / var(--contents-width) * 100%) calc(50 / var(--contents-width) * 100%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 32px;
}
@media screen and (max-width: 1024px) {
    .p-top-block-scents {
        padding-inline: 0;
    }
}
@media screen and (max-width: 767px) {
    .p-top-block-scents {
        padding-block: calc(24 / var(--design-width) * 100vw);
        display: block;
        overflow: hidden;
    }
}
.p-top-block-scents__ttl {
    display: block;
    grid-area: 1/1/2/2;
    color: var(--color-blue-1);
    font-size: 33px;
    letter-spacing: 0.05em;
    margin-top: -4px;
}
@media screen and (max-width: 767px) {
    .p-top-block-scents__ttl {
        font-size: calc(21 / var(--design-width) * 100vw);
        margin-top: 0;
    }
}
.p-top-block-scents__txt {
    display: block;
    grid-area: 1/2/2/3;
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .p-top-block-scents__txt {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.5714285714;
        margin-top: calc(5 / var(--design-width) * 100vw);
    }
}
.p-top-block-scents .c-link-1 {
    grid-area: 2/1/3/2;
}
@media screen and (min-width: 768px) {
    .p-top-block-scents .c-link-1 {
        margin-top: 12px;
    }
}
.p-top-block-scents .c-btn-1 {
    grid-area: 2/2/3/3;
}

/* ---------------------------------------------
*   p-top-section-1
--------------------------------------------- */
.p-top-section-1 {
    padding-block: 27px 58px;
}
@media screen and (max-width: 767px) {
    .p-top-section-1 {
        padding-block: calc(7 / var(--design-width) * 100vw) calc(75 / var(--design-width) * 100vw);
    }
}
.p-top-section-1__body {
    margin-top: 60px;
}
@media screen and (max-width: 767px) {
    .p-top-section-1__body {
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-top-section-brand
--------------------------------------------- */
.p-top-section-brand {
    padding-block: 53px 37px;
    background: linear-gradient(0deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 1) 75%, rgba(var(--color-blue-4-rgb), 1) 100%);
}
@media screen and (max-width: 767px) {
    .p-top-section-brand {
        padding-block: calc(10 / var(--design-width) * 100vw) calc(40 / var(--design-width) * 100vw);
    }
}
.p-top-section-brand__body {
    margin-top: 61px;
}
@media screen and (max-width: 767px) {
    .p-top-section-brand__body {
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-top-slider-brand
--------------------------------------------- */
.p-top-slider-brand__wrapper {
    position: relative;
}
.p-top-slider-brand .l-container {
    position: relative;
}
.p-top-slider-brand .splide__arrow {
    --arrow-pos-x: 20px;
    position: absolute;
    top: 130px;
    z-index: 1;
    place-items: center;
    width: 30px;
    aspect-ratio: 1/1;
    box-sizing: border-box;
    border-radius: 50%;
    touch-action: manipulation;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--color-blue-1);
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider-brand .splide__arrow {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-slider-brand .splide__arrow:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand .splide__arrow {
        display: grid;
        top: calc(95 / var(--design-width) * 100vw);
        width: calc(24 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand .splide__arrow--prev {
    left: var(--arrow-pos-x);
    transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand .splide__arrow--prev {
        left: calc(18 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand .splide__arrow--next {
    right: var(--arrow-pos-x);
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand .splide__arrow--next {
        right: calc(18 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand .splide__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand .splide__arrow::after {
        width: calc(6 / var(--design-width) * 100vw);
        background-color: var(--color-white-1);
    }
}
.p-top-slider-brand .splide__pagination {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider-brand__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-slider-brand__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider-brand__link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .p-top-slider-brand__link:hover img {
        transform: scale(1.05);
    }
}
.p-top-slider-brand__img {
    border: 14px solid var(--color-white-1);
    border-radius: 10px;
    aspect-ratio: 425/295;
    background-color: var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand__img {
        border-width: calc(10 / var(--design-width) * 100vw);
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand__img-radius {
    border-radius: 10px;
    overflow: hidden;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: cover;
       object-fit: cover;
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand__img-radius {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand__img-radius img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-top-slider-brand__cat {
    display: block;
    font-size: 22px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-top: 5px;
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand__cat {
        font-size: calc(20 / var(--design-width) * 100vw);
        margin-top: calc(26 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand__term {
    display: block;
    font-size: 16px;
    letter-spacing: 0.075em;
    line-height: 1.75;
    margin-top: 10px;
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand__term {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.7857142857;
        margin-top: calc(1 / var(--design-width) * 100vw);
    }
}
.p-top-slider-brand__desc {
    display: block;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.4285714286;
    margin-top: 3px;
}
@media screen and (max-width: 767px) {
    .p-top-slider-brand__desc {
        font-size: calc(12 / var(--design-width) * 100vw);
        line-height: 1.6666666667;
        margin-top: calc(2 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-top-section-news
--------------------------------------------- */
.p-top-section-news {
    padding-block: 52px 66px;
}
@media screen and (max-width: 767px) {
    .p-top-section-news {
        padding-block: calc(11 / var(--design-width) * 100vw) calc(110 / var(--design-width) * 100vw);
    }
}
.p-top-section-news__body {
    margin-top: 63px;
}
@media screen and (max-width: 767px) {
    .p-top-section-news__body {
        margin-top: calc(40 / var(--design-width) * 100vw);
    }
}
.p-top-section-news__body .c-btn-2 {
    width: 267px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-top-section-news__body .c-btn-2 {
        width: calc(264 / var(--design-width) * 100vw);
    }
}
.p-top-section-news__foot {
    margin-top: 30px;
    margin-inline: auto;
    width: calc(265 / var(--design-width) * 100vw);
}
@media screen and (max-width: 767px) {
    .p-top-section-news__foot {
        margin-top: calc(30 / var(--design-width) * 100vw);
    }
}

/* ---------------------------------------------
*   p-top-bg
--------------------------------------------- */
.p-top-bg {
    position: relative;
}
.p-top-bg::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(var(--bg-height) * 1px + 194px);
    background: linear-gradient(180deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 0.4) 20%, rgba(var(--color-blue-4-rgb), 1) 100%);
}
@media screen and (max-width: 767px) {
    .p-top-bg::before {
        height: calc(var(--bg-height) * 1px + 205 / var(--design-width) * 100vw);
        background: linear-gradient(180deg, rgba(var(--color-white-2-rgb), 1) 0%, rgba(var(--color-blue-4-rgb), 0.1) 8%, rgba(var(--color-blue-4-rgb), 1) 100%);
    }
}

/* ---------------------------------------------
*   p-top-section-store
--------------------------------------------- */
.p-top-section-store {
    padding-block: 52px 25px;
}
@media screen and (max-width: 767px) {
    .p-top-section-store {
        padding-block: calc(12 / var(--design-width) * 100vw) calc(106 / var(--design-width) * 100vw);
    }
}
.p-top-section-store__container {
    padding-inline: min(110 / var(--contents-width) * 100%, 110px) min(51 / var(--contents-width) * 100%, 51px);
    max-width: calc(var(--contents-width) * 1px + var(--contents-side-padding) * 2px);
    width: 100%;
    margin-inline: auto;
}
@media screen and (max-width: 1024px) {
    .p-top-section-store__container {
        padding-inline: calc(var(--contents-side-padding) * 1px);
    }
}
@media screen and (max-width: 767px) {
    .p-top-section-store__container {
        max-width: none;
    }
}
.p-top-section-store__body {
    display: grid;
    gap: 2.77em 1em;
    grid-template: auto 1fr/1fr calc(427 / 1000 * 100%);
    grid-template-areas: "a b" "c b";
    align-items: start;
    margin-top: 40px;
}
@media screen and (max-width: 767px) {
    .p-top-section-store__body {
        display: block;
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}
.p-top-section-store .c-txt-1 {
    grid-area: a;
    letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
    .p-top-section-store .c-txt-1 {
        letter-spacing: 0.075em;
    }
}
.p-top-section-store__fig {
    padding: 15px;
    grid-area: b;
    aspect-ratio: 425/295;
    background-color: var(--color-white-1);
    border-radius: 10px;
    margin-top: 2px;
}
@media screen and (max-width: 767px) {
    .p-top-section-store__fig {
        padding: calc(9 / var(--design-width) * 100vw);
        width: calc(302 / var(--design-width) * 100vw);
        margin-inline: auto;
        border-radius: calc(6 / var(--design-width) * 100vw);
        margin-top: calc(29 / var(--design-width) * 100vw);
    }
}
.p-top-section-store__fig img {
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
@media screen and (max-width: 767px) {
    .p-top-section-store__fig img {
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
.p-top-section-store .c-link-2 {
    grid-area: c;
}

/* ---------------------------------------------
*   p-top-block-store
--------------------------------------------- */
.p-top-block-store {
    position: relative;
    margin-top: max(-72 / var(--contents-width) * 100%, -72px);
}
@media screen and (max-width: 767px) {
    .p-top-block-store {
        padding-inline: calc(var(--contents-side-padding) * 1px);
        margin-top: 0;
        border-radius: calc(6 / var(--design-width) * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-top-block-store::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 54%;
        background-color: rgba(var(--color-white-2-rgb), 0.5);
        transform: translateY(-50%);
    }
}
.p-top-block-store__container {
    position: relative;
    z-index: 1;
    padding-inline: min(68 / var(--contents-width) * 100%, 68px) min(48 / var(--contents-width) * 100%, 48px);
    max-width: calc(var(--contents-width) * 1px + var(--contents-side-padding) * 2px);
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-width: 767px) {
    .p-top-block-store__container {
        padding: calc(137 / var(--design-width) * 100vw) calc(30 / var(--design-width) * 100vw) calc(15 / var(--design-width) * 100vw);
        display: block;
        max-width: none;
        border-radius: calc(6 / var(--design-width) * 100vw);
        background-color: rgba(var(--color-white-2-rgb), 0.5);
    }
}
.p-top-block-store__logo_01 {
    display: block;
    flex-shrink: 0;
    width: calc(309 / 1043 * 100%);
    margin-right: calc(33 / 1043 * 100%);
}
@media screen and (max-width: 767px) {
    .p-top-block-store__logo_01 {
        position: absolute;
        top: calc(-81 / var(--design-width) * 100vw);
        left: 50%;
        width: calc(180 / var(--design-width) * 100vw);
        margin-inline: auto;
        transform: translateX(-50%);
    }
}
.p-top-block-store__logo_01 img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-top-block-store__logo_02 {
    display: block;
    flex-shrink: 0;
    width: calc(253 / 1043 * 100%);
    margin-right: calc(68 / 1043 * 100%);
}
@media screen and (max-width: 767px) {
    .p-top-block-store__logo_02 {
        position: relative;
        z-index: 1;
        width: calc(211 / var(--design-width) * 100vw);
        margin-inline: auto;
    }
}
.p-top-block-store__logo_02 img {
    width: 100%;
    height: 100%;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: contain;
       object-fit: contain;
}
.p-top-block-store__logo_03 {
    display: block;
    flex-shrink: 0;
    width: calc(141 / 1043 * 100%);
    margin-right: calc(61 / 1043 * 100%);
}
@media screen and (max-width: 767px) {
    .p-top-block-store__logo_03 {
        position: absolute;
        bottom: calc(69 / var(--design-width) * 100vw);
        left: calc(21 / var(--design-width) * 100vw);
        width: calc(146 / var(--design-width) * 100vw);
        margin-right: 0;
    }
}
.p-top-block-store__logo_03 img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-top-block-store__logo_04 {
    display: block;
    flex-shrink: 0;
    width: calc(176 / 1043 * 100%);
    margin-top: min(2.6%, 26px);
}
@media screen and (max-width: 767px) {
    .p-top-block-store__logo_04 {
        width: calc(111 / var(--design-width) * 100vw);
        margin-top: calc(43 / var(--design-width) * 100vw);
        margin-left: auto;
    }
}
.p-top-block-store__logo_04 img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-block-store a {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-block-store a:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}

/* ---------------------------------------------
*   p-top-section-seller
--------------------------------------------- */
.p-top-section-seller {
    padding-block: 53px 0;
}
@media screen and (max-width: 767px) {
    .p-top-section-seller {
        padding-block: calc(10 / var(--design-width) * 100vw);
    }
}
.p-top-section-seller__body {
    margin-top: 40px;
}
@media screen and (max-width: 767px) {
    .p-top-section-seller__body {
        margin-top: calc(29 / var(--design-width) * 100vw);
    }
}

/*  .p-top-slider-seller
--------------------------------------------- */
.p-top-slider-seller__wrapper {
    position: relative;
}
.p-top-slider-seller .splide__track {
    padding-block: 64px 80px;
}
@media screen and (max-width: 767px) {
    .p-top-slider-seller .splide__track {
        padding-block: calc(33 / var(--design-width) * 100vw) calc(64 / var(--design-width) * 100vw);
    }
}
.p-top-slider-seller .splide__list {
    align-items: center;
}
.p-top-slider-seller .splide__slide {
    transform: scale(1);
    transition: transform 0.5s;
    will-change: transform;
}
.p-top-slider-seller .splide__slide.is-active {
    transform: scale(calc(330 / 240 * 100%));
    transform-origin: 50% 36%;
    margin-inline: 45px 95px !important;
}
@media screen and (max-width: 767px) {
    .p-top-slider-seller .splide__slide.is-active {
        transform: scale(calc(225 / 164 * 100%));
        transform-origin: 50% 33%;
        margin-inline: calc(30 / var(--design-width) * 100vw) calc(68 / var(--design-width) * 100vw) !important;
    }
}
.p-top-slider-seller__link {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider-seller__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-top-slider-seller__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-top-slider-seller__link img {
        -o-object-position: center;
           object-position: center;
        transition: transform 0.6s ease;
    }
    .p-top-slider-seller__link:hover img {
        transform: scale(1.05);
    }
}
.p-top-slider-seller__img {
    display: block;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 20px solid var(--color-white-2);
    overflow: hidden;
    background-color: var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .p-top-slider-seller__img {
        border-width: calc(14 / var(--design-width) * 100vw);
    }
}
.p-top-slider-seller__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.p-top-slider-seller__term {
    font-size: 14px;
    letter-spacing: 0.025em;
    line-height: 1.2857142857;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .p-top-slider-seller__term {
        font-size: calc(14 / var(--design-width) * 100vw);
        line-height: 1.2857142857;
        margin-top: calc(8 / var(--design-width) * 100vw);
    }
}
.p-top-slider-seller .splide__arrow {
    display: none;
}
.p-top-slider-seller .splide__pagination {
    display: none;
}

/* ---------------------------------------------
*   c-preloader
--------------------------------------------- */
.c-preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-content: center;
    place-items: center;
    text-align: center;
    row-gap: 50px;
    padding: 20px;
    background: var(--color-blue-1);
    clip-path: inset(0 0 0 0);
    transition: opacity 0.5s ease, clip-path 1s cubic-bezier(0.86, 0, 0.07, 1);
}
@media screen and (max-width: 767px) {
    .c-preloader {
        gap: calc(25 / var(--design-width) * 100vw);
    }
}
.c-preloader__logo {
    position: relative;
    display: flex;
    justify-content: 0;
    align-items: center;
}
.c-preloader__logo img {
    opacity: 0;
}
.wf-active .c-preloader__logo img {
    animation: smokyPuffIn 1.5s ease-out forwards;
}

.c-preloader__logo-catch {
    width: 387px;
}
@media screen and (max-width: 767px) {
    .c-preloader__logo-catch {
        width: calc(242 / var(--design-width) * 100vw);
    }
}
.c-preloader__logo-catch img:first-of-type {
    width: calc(162 / 387 * 100%);
}
.c-preloader__logo-catch img:last-of-type {
    width: calc(218 / 387 * 100%);
}
.wf-active .c-preloader__logo-catch img:last-of-type {
    animation-delay: 0.3s;
}

.c-preloader__logo-image {
    width: 380px;
}
@media screen and (max-width: 767px) {
    .c-preloader__logo-image {
        width: calc(240 / var(--design-width) * 100vw);
    }
}
.c-preloader__logo-image img:first-of-type {
    width: calc(180 / 380 * 100%);
}
.wf-active .c-preloader__logo-image img:first-of-type {
    animation-delay: 1.2s;
}

.c-preloader__logo-image img:last-of-type {
    width: calc(200 / 380 * 100%);
}
.wf-active .c-preloader__logo-image img:last-of-type {
    animation-delay: 1.5s;
}

.wf-active .c-preloader {
    pointer-events: none;
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transition-delay: 3s;
}

@keyframes smokyPuffIn {
    0% {
        opacity: 0;
        filter: blur(8px); /* 強いぼかしからスタート */
        transform: scale(1); /* 移動はなし */
    }
    100% {
        opacity: 1;
        filter: blur(0); /* ぼかしを解除 */
        transform: scale(1);
    }
}
/* ---------------------------------------------
*   c-loading
--------------------------------------------- */
.c-loading {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: calc(infinity);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.wf-active .c-loading {
    display: none;
}

.c-loading__palse {
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--color-blue-1);
    border-radius: 50%;
    animation: pulse-animation 1.5s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
    .c-loading__palse {
        width: calc(40 / var(--design-width) * 100vw);
        height: calc(40 / var(--design-width) * 100vw);
    }
}
.c-loading__txt {
    display: block;
    font-family: serif !important;
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    .c-loading__txt {
        font-size: calc(20 / var(--root-fz) * 1rem);
        margin-top: calc(20 / var(--design-width) * 100vw);
    }
}
@keyframes pulse-animation {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ---------------------------------------------
*   p-ululis-heading
--------------------------------------------- */
.p-ululis-heading {
    padding-top: 75px;
}
@media screen and (max-width: 767px) {
    .p-ululis-heading {
        padding-top: 7.2vw;
    }
}
.p-ululis-heading__mv {
    display: block;
    margin-top: 53px;
}
@media screen and (max-width: 767px) {
    .p-ululis-heading__mv {
        margin-top: 9.3vw;
    }
}
.p-ululis-heading__mv img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------------------------------------------
*   p-ululis-ttl
--------------------------------------------- */
.p-ululis-ttl__large {
    position: relative;
    padding-block: 0 22px;
    display: block;
    font-size: 30px;
    letter-spacing: 0.15em;
    line-height: 1.2666666667;
}
@media screen and (max-width: 767px) {
    .p-ululis-ttl__large {
        padding-block: 0 5vw;
        font-size: calc(42 / 811 * 100vw);
        letter-spacing: 0.1em;
        line-height: 1.7142857143;
    }
}
.p-ululis-ttl__large::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 48px;
    height: 1px;
    background-color: var(--color-base-1);
    transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
    .p-ululis-ttl__large::after {
        width: calc(102 / 811 * 100vw);
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-ttl__large--sp25 {
        letter-spacing: -0.01em;
    }
}
.p-ululis-ttl__small {
    display: block;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin-top: 27px;
}
@media screen and (max-width: 767px) {
    .p-ululis-ttl__small {
        font-size: calc(26 / 811 * 100vw);
        margin-top: 4vw;
    }
}

/* ---------------------------------------------
*   p-ululis-intro
--------------------------------------------- */
.p-ululis-intro {
    padding-top: 66px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro {
        padding-top: 8.6vw;
    }
}
.p-ululis-intro__lead {
    padding-inline: 50px;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7894736842;
    margin-top: 78px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__lead {
        padding-inline: 0;
        font-size: calc(20 / 811 * 100vw);
        line-height: 2;
        margin-top: 9.8vw;
    }
}
.p-ululis-intro__body {
    display: grid;
    grid-template-columns: calc(556 / 1120 * 100%) 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
    gap: 14px;
    margin-top: 80px;
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__body {
        display: block;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__body {
        margin-top: 8.3vw;
    }
}
.p-ululis-intro__img {
    display: block;
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__img {
        width: calc(556 / 811 * 100vw);
        margin-inline: auto;
    }
}
.p-ululis-intro__img img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-ululis-intro__detail {
    padding-right: calc(12 / 556 * 100%);
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__detail {
        padding-right: 0;
        margin-top: 34px;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__detail {
        margin-top: calc(34 / 811 * 100vw);
    }
}
.p-ululis-intro__tag {
    padding: 3px 23px 5px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--color-white-1);
    font-size: 26px;
    letter-spacing: 0.075em;
    line-height: 1;
    margin-left: 6px;
    border-radius: 14px;
    background-color: var(--color-blue-10);
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__tag {
        margin-inline: auto;
    }
}
@media screen and (min-width: 768px) {
    .windows.firefox .p-ululis-intro__tag {
        padding-bottom: 8px;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__tag {
        padding: calc(8 / 811 * 100vw) calc(32 / 811 * 100vw);
        font-size: calc(30 / 811 * 100vw);
        border-radius: calc(14 / 811 * 100vw);
    }
    .safari .p-ululis-intro__tag {
        padding-bottom: calc(10 / 811 * 100vw);
    }
    .edge .p-ululis-intro__tag {
        padding-bottom: calc(10 / 811 * 100vw);
    }
    .iphone .p-ululis-intro__tag {
        padding-bottom: calc(11 / 811 * 100vw);
    }
    .android .p-ululis-intro__tag {
        padding-bottom: calc(9 / 811 * 100vw);
    }
}
.p-ululis-intro__strong {
    display: block;
    color: var(--color-blue-10);
    font-size: 36px;
    letter-spacing: 0.15em;
    margin-left: 10px;
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__strong {
        margin-left: 0;
        margin-top: 8px;
        text-align: center;
    }
}
@media screen and (min-width: 1025px) {
    .p-ululis-intro__strong {
        line-height: 1;
        margin-block: 10px 16px;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__strong {
        font-size: calc(36 / 811 * 100vw);
        margin-top: calc(8 / 811 * 100vw);
    }
}
.p-ululis-intro__strong .ff-en {
    font-size: 47px;
    letter-spacing: 0.075em;
}
@media screen and (min-width: 1025px) {
    .p-ululis-intro__strong .ff-en {
        line-height: 1.3;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__strong .ff-en {
        font-size: calc(47 / 811 * 100vw);
    }
}
.p-ululis-intro__strong-sub {
    display: block;
    color: var(--color-blue-10);
    font-size: 26px;
    margin-left: 14px;
    margin-top: -4px;
}
@media screen and (max-width: 1024px) {
    .p-ululis-intro__strong-sub {
        margin-left: 0;
        margin-top: -14px;
        text-align: center;
    }
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__strong-sub {
        font-size: calc(26 / 811 * 100vw);
        margin-top: calc(-6 / 811 * 100vw);
    }
}
.p-ululis-intro__scents {
    display: block;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7368421053;
    margin-top: 28px;
    margin-left: 16px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__scents {
        font-size: calc(22 / 811 * 100vw);
        margin-left: 0;
        margin-top: calc(38 / 811 * 100vw);
    }
}
.p-ululis-intro__scents sup {
    display: inline-block;
    transform: translate(-6px, -8px);
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__scents sup {
        transform: translate(calc(-10 / 811 * 100vw), calc(-10 / 811 * 100vw));
    }
}
.p-ululis-intro__scents-l {
    display: block;
    font-size: 24px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__scents-l {
        font-size: calc(28 / 811 * 100vw);
    }
}
.p-ululis-intro__txt {
    font-size: 19px;
    letter-spacing: 0.075em;
    line-height: 1.7894736842;
    margin-top: 21px;
    margin-left: 8px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__txt {
        font-size: calc(20 / 811 * 100vw);
        letter-spacing: 0.1em;
        line-height: 2;
        margin-top: calc(10 / 811 * 100vw);
        margin-left: 0;
    }
}
.p-ululis-intro__box {
    padding: 6px 16px;
    border: 2px solid var(--color-blue-10);
    border-radius: 15px;
    margin-top: 18px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__box {
        padding: calc(12 / 811 * 100vw) calc(38 / 811 * 100vw) calc(8 / 811 * 100vw);
        border-radius: calc(15 / 811 * 100vw);
        border-width: calc(3 / 811 * 100vw);
        margin-top: calc(10 / var(--design-width) * 100vw);
    }
}
.p-ululis-intro__term {
    display: block;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7894736842;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__term {
        font-size: calc(29 / 811 * 100vw);
    }
}
.p-ululis-intro__period {
    display: block;
    font-size: 21px;
    letter-spacing: 0.1em;
    line-height: 1.7142857143;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__period {
        font-size: calc(31 / 811 * 100vw);
    }
}
.p-ululis-intro__note {
    display: block;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.7142857143;
    margin-top: 9px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__note {
        font-size: calc(18 / 811 * 100vw);
        margin-top: calc(20 / 811 * 100vw);
    }
}
.p-ululis-intro__ast {
    display: block;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.7857142857;
    margin-top: 8px;
}
@media screen and (max-width: 767px) {
    .p-ululis-intro__ast {
        font-size: calc(14 / 811 * 100vw);
        margin-top: calc(12 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-product
--------------------------------------------- */
.p-ululis-product {
    padding-top: 77px;
}
@media screen and (max-width: 767px) {
    .p-ululis-product {
        padding-top: calc(120 / 811 * 100vw);
    }
}
.p-ululis-product__lead {
    display: block;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7894736842;
    margin-top: 75px;
}
@media screen and (max-width: 767px) {
    .p-ululis-product__lead {
        font-size: calc(22 / 811 * 100vw);
        line-height: 1.7272727273;
        margin-top: calc(68 / 811 * 100vw);
    }
}
.p-ululis-product__lead .fw-bold {
    color: var(--color-blue-10);
}
@media screen and (min-width: 768px) {
    .p-ululis-product__lead small {
        font-size: 16px;
    }
}
.p-ululis-product__body {
    margin-top: 171px;
    max-width: 1062px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-ululis-product__body {
        margin-top: calc(118 / 811 * 100vw);
    }
}
.p-ululis-product__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 70px calc(42 / 1062 * 100%);
}
@media screen and (max-width: 767px) {
    .p-ululis-product__list {
        padding-inline: calc(20 / 811 * 100vw);
        grid-template-columns: repeat(2, 1fr);
        gap: calc(56 / 811 * 100vw) calc(48 / 811 * 100vw);
    }
}
.p-ululis-product__item {
    padding-block: 0 18px;
    border-bottom: 2px solid var(--color-blue-10);
}
@media screen and (max-width: 767px) {
    .p-ululis-product__item {
        padding-block: 0 calc(20 / 811 * 100vw);
        border-width: calc(2 / 811 * 100vw);
    }
}
@media screen and (min-width: 768px) {
    .p-ululis-product__item:nth-of-type(n + 4) figcaption {
        margin-top: 29px;
    }
}
.p-ululis-product__img img {
    display: block;
    width: 86%;
    margin-inline: auto;
}
.p-ululis-product__img figcaption {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.7857142857;
    text-align: center;
    margin-top: 17px;
}
@media screen and (max-width: 767px) {
    .p-ululis-product__img figcaption {
        font-size: calc(14 / 811 * 100vw);
        margin-top: calc(14 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-step
--------------------------------------------- */
.p-ululis-step {
    padding-top: 135px;
}
@media screen and (max-width: 767px) {
    .p-ululis-step {
        padding-top: calc(100 / 811 * 100vw);
    }
}
.p-ululis-step__lead {
    padding-inline: 75px;
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7894736842;
    margin-top: 74px;
}
@media screen and (max-width: 767px) {
    .p-ululis-step__lead {
        padding-inline: 0;
        font-size: calc(22 / 811 * 100vw);
        line-height: 2;
        margin-top: calc(74 / 811 * 100vw);
    }
}
.p-ululis-step__body {
    margin-top: 74px;
}
@media screen and (max-width: 767px) {
    .p-ululis-step__body {
        margin-top: calc(70 / 811 * 100vw);
    }
}
.p-ululis-step__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: calc(3 / var(--contents-width) * 100%);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__list {
        gap: calc(4 / 811 * 100vw);
    }
}
.p-ululis-step__txt-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: calc(4 / 811 * 100vw);
    margin-top: calc(36 / 811 * 100vw);
}
.p-ululis-step__item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: var(--color-blue-11);
    color: var(--color-white-1);
    text-align: center;
}
.p-ululis-step__item--fin {
    background-color: var(--color-blue-10);
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .p-ululis-step__item:nth-of-type(2) .p-ululis-step__term {
        margin-top: min(35 / var(--contents-width) * 100vw, 35px);
    }
    .p-ululis-step__item:nth-of-type(2) .p-ululis-step__txt {
        margin-top: min(40 / var(--contents-width) * 100vw, 40px);
    }
}
.p-ululis-step__item:not(:last-of-type) {
    position: relative;
}
.p-ululis-step__item:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: min(56 / var(--contents-width) * 100vw, 56px);
    right: max(-39 / var(--contents-width) * 100vw, -39px);
    display: block;
    width: min(72 / var(--contents-width) * 100vw, 72px);
    aspect-ratio: 300/40;
    background: url(../img/campaign/2026ululis/ico_arrow.svg) 0 0 no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 767px) {
    .p-ululis-step__item:not(:last-of-type)::after {
        bottom: calc(18 / 811 * 100vw);
        right: calc(-24 / 811 * 100vw);
        width: calc(52 / 811 * 100vw);
    }
}
.p-ululis-step__num {
    padding-block: min(34 / var(--contents-width) * 100vw, 34px) min(15 / var(--contents-width) * 100vw, 15px);
    display: block;
    font-size: min(47 / var(--contents-width) * 100vw, 47px);
    letter-spacing: 0.1em;
    line-height: 1;
    width: calc(261 / 371 * 100%);
    margin-inline: auto;
    border-bottom: 1px solid var(--color-white-1);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__num {
        padding-block: calc(60 / 811 * 100vw) calc(10 / 811 * 100vw);
        font-size: calc(31 / 811 * 100vw);
        width: calc(171 / 246 * 100%);
    }
}
.p-ululis-step__term {
    display: block;
    font-size: min(28 / var(--contents-width) * 100vw, 28px);
    letter-spacing: 0.075em;
    line-height: 1.3571428571;
    margin-top: min(12 / var(--contents-width) * 100vw, 12px);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__term {
        font-size: calc(24 / 811 * 100vw);
        line-height: 1.2916666667;
        margin-top: calc(24 / 811 * 100vw);
    }
}
.p-ululis-step__txt {
    display: block;
    font-size: min(16 / var(--contents-width) * 100vw, 16px);
    letter-spacing: 0.075em;
    line-height: 1.625;
    margin-top: min(25 / var(--contents-width) * 100vw, 25px);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__txt {
        padding-right: calc(26 / 811 * 100vw);
        font-size: calc(20 / 811 * 100vw);
        letter-spacing: 0;
        line-height: 1.85;
        margin-top: 0;
        text-align: justify;
    }
}
.p-ululis-step__fin {
    position: relative;
    padding-inline: min(50 / var(--contents-width) * 100vw, 50px);
    display: block;
    font-size: min(40 / var(--contents-width) * 100vw, 40px);
    letter-spacing: 0.075em;
    line-height: 1;
    margin-top: max(-21 / var(--contents-width) * 100vw, -21px);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__fin {
        padding-inline: calc(32 / 811 * 100vw);
        font-size: calc(27 / 811 * 100vw);
        margin-top: calc(-12 / 811 * 100vw);
    }
}
.p-ululis-step__fin::before, .p-ululis-step__fin::after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: min(37 / var(--contents-width) * 100vw, 37px);
    aspect-ratio: 103/150;
    background: url(../img/campaign/2026ululis/ico_fin.svg) 0 0 no-repeat;
    background-size: 100% auto;
    transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__fin::before, .p-ululis-step__fin::after {
        width: calc(24 / 811 * 100vw);
    }
}
.p-ululis-step__fin::before {
    left: 0;
}
.p-ululis-step__fin::after {
    right: min(10 / var(--contents-width) * 100vw, 10px);
    transform: translateY(-50%) rotateY(180deg);
}
@media screen and (max-width: 767px) {
    .p-ululis-step__fin::after {
        right: calc(6 / 811 * 100vw);
    }
}
.p-ululis-step__foot {
    width: 340px;
    margin-top: 80px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-ululis-step__foot {
        width: calc(350 / 811 * 100vw);
        margin-top: calc(104 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-block-step
--------------------------------------------- */
.p-ululis-block-step {
    padding-top: 130px;
    padding-left: min(74 / 1120 * 100%, 74px);
    display: grid;
    grid-template-columns: calc(479 / 1120 * 100%) 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
    gap: calc(64 / 1120 * 100%);
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step {
        padding-top: calc(48 / 811 * 100vw);
        padding-left: 0;
        display: block;
    }
}
.p-ululis-block-step__fig {
    display: block;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__fig {
        width: calc(479 / 811 * 100vw);
        margin-inline: auto;
    }
}
.p-ululis-block-step__fig img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.p-ululis-block-step__detail {
    padding-top: 20px;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__detail {
        padding-top: 0;
        margin-top: calc(54 / 811 * 100vw);
    }
}
.p-ululis-block-step__caution {
    font-size: 20px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__caution {
        display: block;
        font-size: calc(20 / 811 * 100vw);
        letter-spacing: 0.075em;
    }
}
.p-ululis-block-step__caution-txt {
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin-block: 3px 38px;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__caution-txt {
        font-size: calc(20 / 811 * 100vw);
        letter-spacing: 0.075em;
        line-height: 1.75;
        margin-block: calc(4 / 811 * 100vw) calc(50 / 811 * 100vw);
    }
}
.p-ululis-block-step__desc {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__desc {
        gap: 0;
        font-size: calc(22 / 811 * 100vw);
        line-height: 1.7272727273;
    }
}
.p-ululis-block-step__desc::before {
    content: "・";
}
@media screen and (min-width: 768px) {
    .p-ululis-block-step__desc small {
        font-size: 13px;
        margin-top: 3px;
    }
}
.p-ululis-block-step__circle {
    position: relative;
    padding-left: 2.4rem;
    display: block;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2.25;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__circle {
        padding-left: 0.6rem;
        font-size: calc(20 / 811 * 100vw);
        line-height: 1.85;
    }
}
.p-ululis-block-step__circle--m {
    margin-top: 25px;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__circle--m {
        margin-top: calc(42 / 811 * 100vw);
    }
}
.p-ululis-block-step__circle::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    display: block;
    width: 25px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 3px solid var(--color-blue-10);
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__circle::before {
        top: calc(6 / 811 * 100vw);
        left: calc(6 / 811 * 100vw);
        width: calc(25 / 811 * 100vw);
        border-width: calc(4 / 811 * 100vw);
    }
}
.p-ululis-block-step__other {
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin-top: 18px;
}
@media screen and (max-width: 767px) {
    .p-ululis-block-step__other {
        font-size: calc(20 / 811 * 100vw);
        letter-spacing: 0.075em;
        line-height: 1.75;
        margin-top: calc(32 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-new
--------------------------------------------- */
.p-ululis-new {
    padding-top: 167px;
}
@media screen and (max-width: 767px) {
    .p-ululis-new {
        padding-top: calc(86 / 811 * 100vw);
    }
}
.p-ululis-new__lead {
    font-size: 19px;
    letter-spacing: 0.1em;
    line-height: 1.7894736842;
    margin-top: 96px;
}
@media screen and (max-width: 767px) {
    .p-ululis-new__lead {
        padding-inline: 0;
        font-size: calc(22 / 811 * 100vw);
        line-height: 1.7272727273;
        margin-top: calc(68 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-mist
--------------------------------------------- */
.p-ululis-mist {
    padding-top: 167px;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist {
        padding-top: calc(74 / 811 * 100vw);
    }
}
.p-ululis-mist__body {
    margin-top: 127px;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__body {
        margin-top: 0;
    }
}
.p-ululis-mist__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: calc(10 / 1100 * 100%);
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__list {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(84 / 811 * 100vw) calc(8 / 811 * 100vw);
    }
}
.p-ululis-mist__link {
    display: block;
}
@media (hover: hover) and (pointer: fine) {
    .p-ululis-mist__link {
        transition: opacity var(--hover-duration) ease !important;
    }
    .p-ululis-mist__link:hover {
        opacity: var(--hover-opacity-ratio) !important;
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-ululis-mist__link .p-ululis-mist__detail-ico {
        transition: background-color 0.3s;
    }
    .p-ululis-mist__link .p-ululis-mist__detail-ico::after {
        transition: background-color 0.3s;
    }
    .p-ululis-mist__link:hover .p-ululis-mist__detail-ico {
        background-color: var(--color-blue-12);
    }
    .p-ululis-mist__link:hover .p-ululis-mist__detail-ico::after {
        background-color: var(--color-white-1);
    }
}
.p-ululis-mist__img {
    overflow: hidden;
    display: block;
    width: 94.4%;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__img {
        width: 69.4%;
    }
}
.p-ululis-mist__term {
    display: block;
    font-size: 18px;
    letter-spacing: 0.075em;
    line-height: 1.277778;
    margin-top: 81px;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__term {
        font-size: calc(18 / 811 * 100vw);
        margin-top: calc(81 / 811 * 100vw);
    }
}
.p-ululis-mist__details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__details {
        gap: calc(14 / 811 * 100vw);
        margin-top: calc(18 / 811 * 100vw);
    }
}
.p-ululis-mist__detail-txt {
    color: var(--color-blue-12);
    font-size: 18px;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__detail-txt {
        font-size: calc(18 / 811 * 100vw);
    }
}
.p-ululis-mist__detail-ico {
    position: relative;
    flex-shrink: 0;
    width: 19px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--color-blue-12);
    background-color: transparent;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__detail-ico {
        width: calc(19 / 811 * 100vw);
        margin-top: calc(-2 / 811 * 100vw);
    }
}
.p-ululis-mist__detail-ico::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    display: block;
    width: 6px;
    aspect-ratio: 88/150;
    transform: translate(-50%, -50%);
    -webkit-mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) 0 0 no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-blue-12);
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__detail-ico::after {
        left: 53%;
        width: calc(6 / 811 * 100vw);
    }
}
.p-ululis-mist__foot {
    width: 420px;
    margin-top: 104px;
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .p-ululis-mist__foot {
        width: calc(418 / 811 * 100vw);
        margin-top: calc(152 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   p-ululis-dl
--------------------------------------------- */
.p-ululis-dl {
    padding: 116px 34px 0px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl {
        padding: calc(130 / 811 * 100vw) 0 0;
    }
}
.p-ululis-dl__item + .p-ululis-dl__item {
    margin-top: 50px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__item + .p-ululis-dl__item {
        margin-top: calc(6 / 811 * 100vw);
    }
}
.p-ululis-dl__term {
    font-size: 20px;
    letter-spacing: 0.1em;
    margin-left: -8px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__term {
        font-size: calc(20 / 811 * 100vw);
        margin-left: calc(-14 / 811 * 100vw);
    }
}
.p-ululis-dl__desc {
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__desc {
        margin-top: calc(18 / 811 * 100vw);
    }
}
.p-ululis-dl__txt {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 16px;
    letter-spacing: 0.025em;
    line-height: 1.75;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__txt {
        font-size: calc(18 / 811 * 100vw);
        letter-spacing: 0;
        line-height: 1.7777777778;
        gap: 0.09rem;
    }
}
.p-ululis-dl__txt--indent {
    margin-left: -6px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__txt--indent {
        margin-left: calc(-6 / 811 * 100vw);
    }
}
.p-ululis-dl__txt--indent::before {
    content: "・";
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__txt.mgt-pc--30 {
        margin-top: calc(30 / 811 * 100vw) !important;
    }
}
.p-ululis-dl__link {
    position: relative;
    padding-inline: 4px 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    gap: 17px;
    font-size: 16px;
    border-bottom: 1px solid var(--color-base-1);
    margin-top: 29px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__link {
        padding: 0 calc(12 / 811 * 100vw) calc(4 / 811 * 100vw) 0;
        font-size: calc(20 / 811 * 100vw);
        gap: calc(26 / 811 * 100vw);
        margin-top: calc(36 / 811 * 100vw);
    }
}
@media (hover: hover) and (pointer: fine) {
    .p-ululis-dl__link:hover {
        border-color: transparent;
    }
}
.p-ululis-dl__link::after {
    content: "";
    display: block;
    width: 8px;
    aspect-ratio: 88/150;
    -webkit-mask: url(../img/common/ico_arrow-4.svg) center center no-repeat;
            mask: url(../img/common/ico_arrow-4.svg) center center no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    background-color: var(--color-base-1);
    margin-top: 1px;
}
@media screen and (max-width: 767px) {
    .p-ululis-dl__link::after {
        width: calc(7 / 811 * 100vw);
        margin-top: calc(2 / 811 * 100vw);
    }
}

/* ---------------------------------------------
*   background-color
--------------------------------------------- */
.bg-white {
    background-color: var(--color-white-1) !important;
}

/* ---------------------------------------------
*   font-color
--------------------------------------------- */
.fc-base {
    color: var(--color-base-1) !important;
}

.fc-white {
    color: var(--color-white-1) !important;
}

.fc-blue-1 {
    color: var(--color-blue-1) !important;
}

.fc-gray-3 {
    color: var(--color-gray-3) !important;
}

/* ---------------------------------------------
*   font-wight
--------------------------------------------- */
.fw-thin {
    font-weight: 200 !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-regular {
    font-weight: 400 !important;
}

@media screen and (max-width: 767px) {
    .fw-regular-sp {
        font-weight: 400 !important;
    }
}

.fw-normal {
    font-weight: 500 !important;
}

.fw-medium {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-black {
    font-weight: 800 !important;
}

/* ---------------------------------------------
*   letter-spacing
--------------------------------------------- */
@media screen and (max-width: 767px) {
    .letter-spacing-0-sp {
        letter-spacing: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .letter-spacing-75m-sp {
        letter-spacing: -0.075em !important;
    }
}

/* ---------------------------------------------
*   text-align
--------------------------------------------- */
.txt-al-center {
    text-align: center !important;
}

.txt-al-right {
    text-align: right !important;
}

.txt-al-left {
    text-align: left !important;
}

.txt-al-justify {
    text-align: justify !important;
}

@media screen and (max-width: 767px) {
    .txt-al-center-sp {
        text-align: center !important;
    }
    .txt-al-right-sp {
        text-align: right !important;
    }
    .txt-al-left-sp {
        text-align: left !important;
    }
    .txt-al-justify-sp {
        text-align: justify !important;
    }
}
/* ---------------------------------------------
*   font-family
--------------------------------------------- */
.ff-en {
    font-family: var(--ff-en);
}

.ff-shippori {
    font-family: var(--ff-shippori);
}

.ff-ltc {
    font-family: var(--ff-ltc);
}

/* ---------------------------------------------
*   アコーディオン（複数開閉）
--------------------------------------------- */
.js-acc-target {
    --acc-body-height: 0px;
    height: 0;
    overflow: hidden;
}
.js-acc-scope.is-close .js-acc-target {
    animation: closeAccAnim 0.5s forwards;
}

.js-acc-scope.is-open .js-acc-target {
    animation: openAccAnim 0.5s forwards;
}

@keyframes openAccAnim {
    0% {
        height: 0px;
        visibility: hidden;
    }
    99% {
        height: var(--acc-body-height);
        visibility: visible;
    }
    100% {
        height: auto;
    }
}
@keyframes closeAccAnim {
    0% {
        height: var(--acc-body-height);
    }
    99% {
        visibility: visible;
    }
    100% {
        height: 0px;
        visibility: hidden;
    }
}

.js-accProduct-target {
    --accProduct-body-height: 0px;
    height: 0;
    overflow: hidden;
}
.js-accProduct-scope.is-close .js-accProduct-target {
    animation: closeAccAnim 0.5s forwards;
}

.js-accProduct-scope.is-open .js-accProduct-target {
    animation: openAccAnim 0.5s forwards;
}

@keyframes openAccAnim {
    0% {
        height: 0px;
        visibility: hidden;
    }
    99% {
        height: var(--accProduct-body-height);
        visibility: visible;
    }
    100% {
        height: auto;
    }
}
@keyframes closeAccAnim {
    0% {
        height: var(--accProduct-body-height);
    }
    99% {
        visibility: visible;
    }
    100% {
        height: 0px;
        visibility: hidden;
    }
}

/*  .js-tab-target
--------------------------------------------- */
.js-tab-target {
    display: none;
}
.js-tab-target.is-current {
    display: block;
}

/*  js-more-scope
--------------------------------------------- */
.js-more-scope .is-hide,
.js-more-scope .init-hidden {
    display: none;
}
.js-more-scope.is-show-all .init-visible {
    display: none;
}
.js-more-scope.is-show-all .init-hidden {
    display: block;
}

.js-moreProduct-scope .is-hide,
.js-moreProduct-scope .init-hidden {
    display: none;
}
.js-moreProduct-scope.is-show-all .init-visible {
    display: none;
}
.js-moreProduct-scope.is-show-all .init-hidden {
    display: block;
}

/*  .js-pagetop-threshold
--------------------------------------------- */
.js-pagetop-threshold {
    position: absolute;
    top: 0;
    height: 500px;
}

/*  .js-store-threshold
--------------------------------------------- */
@media screen and (max-width: 767px) {
    .js-store-threshold {
        position: absolute;
        top: 0;
        height: 500px;
    }
}

.js-store-btn {
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}
.js-store-btn.is-show {
    visibility: visible;
    opacity: 1;
}

/*  .js-headerSubnav-threshold
--------------------------------------------- */
.js-headerSubnav-threshold {
    position: absolute;
    top: 0;
    height: 0px;
}

@media screen and (max-width: 1024px) {
    .js-menu-target {
        --acc-body-height: 0px;
        height: 0;
        overflow: hidden;
    }
    .js-menu-scope.is-acc-close .js-menu-target {
        animation: closeAccAnim 0.5s forwards;
    }
    .js-menu-scope.is-acc-open .js-menu-target {
        animation: openAccAnim 0.5s forwards;
    }
    @keyframes openAccAnim {
        0% {
            height: 0px;
            visibility: hidden;
        }
        99% {
            height: var(--acc-body-height);
            visibility: visible;
        }
        100% {
            height: auto;
        }
    }
    @keyframes closeAccAnim {
        0% {
            height: var(--acc-body-height);
        }
        99% {
            visibility: visible;
        }
        100% {
            height: 0px;
            visibility: hidden;
        }
    }
}

/*  js-top-acc-scope
--------------------------------------------- */
.js-top-acc-target {
    display: none;
}
.js-top-acc-target.is-open {
    display: block;
    height: 100%;
}
.safari .js-top-acc-target.is-open {
    height: auto;
}

.iphone .js-top-acc-target.is-open {
    height: auto;
}

.js-top-acc-target.is-close {
    display: none;
}

/*  js-menu-fade
--------------------------------------------- */
@media screen and (max-width: 1024px) {
    .js-menu-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: 0.5s ease;
    }
    .is-menu-opened .js-menu-fade {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(0.4s + var(--transition-delay) * 0.1s);
    }
}

/* フェードイン */
.js-fadein {
    opacity: 0;
}
.js-fadein.is-active {
    opacity: 1;
    transition: opacity 0.8s;
}

/* フェードイン(aタグ用) */
.js-fadein-a a {
    opacity: 0;
    visibility: hidden;
}
.js-fadein-a.is-active a {
    opacity: 1;
    transition: opacity 1s, visibility 1s;
    visibility: visible;
}

/* フェードインアップ */
.js-fadein-up {
    opacity: 0;
    transform: translateY(20px);
}
.js-fadein-up.is-active {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.8s, opacity 0.8s;
}

/* 左にスライド */
.js-slidein-to-left {
    opacity: 0;
    transform: translateX(20px);
}
.js-slidein-to-left.is-active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.8s, opacity 0.8s;
}

/* 右にスライド */
.js-slidein-to-right {
    opacity: 0;
    transform: translateX(-20px);
}
.js-slidein-to-right.is-active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.8s, opacity 0.8s;
}

/* js-concept-scents */
.js-concept-scents .js-concept-scents-item {
    filter: blur(1.5rem);
    transform: rotate(-15deg);
    opacity: 0;
    transition: filter 1.6s, transform 1.6s, opacity 0.8s;
}
.js-concept-scents.is-active .js-concept-scents-item {
    filter: blur(0);
    transform: none;
    opacity: 1;
    transition-delay: calc(0.4s + var(--transition-delay) * 0.3s);
}

/* js-diagnosis-cart */
.js-diagnosis-cart .p-diagnosis-section-cart__circle {
    transform: scale(0) translate3d(0, 0, 0);
    transform-origin: center;
    transition: transform 2s;
    will-change: transform;
}
.js-diagnosis-cart.is-active .p-diagnosis-section-cart__circle {
    transform: scale(1) translate3d(0, 0, 0);
}
.js-diagnosis-cart.is-active .p-diagnosis-section-cart__circle--2 {
    transition-delay: 0.3s;
}
.js-diagnosis-cart.is-active .p-diagnosis-section-cart__circle--3 {
    transition-delay: 0.6s;
}
.js-diagnosis-cart.is-active .p-diagnosis-section-cart__circle--4 {
    transition-delay: 0.9s;
}

@media print and (min-width: 768px), screen and (min-width: 768px) {
    .pc-hide {
        display: none !important;
    }
}
@media print and (max-width: 767px), screen and (max-width: 767px) {
    .sp-hide {
        display: none !important;
    }
}
@media print and (max-width: 1024px), screen and (max-width: 1024px) {
    .tb-hide {
        display: none !important;
    }
}
@media print and (min-width: 1025px), screen and (min-width: 1025px) {
    .tb-over {
        display: none !important;
    }
}
/* ---------------------------------------------
*   margin-top
--------------------------------------------- */
.mgt-pc--0 {
    margin-top: 0 !important;
}

.mgt-pc--5 {
    margin-top: 5px !important;
}

.mgt-pc--10 {
    margin-top: 10px !important;
}

.mgt-pc--15 {
    margin-top: 15px !important;
}

.mgt-pc--20 {
    margin-top: 20px !important;
}

.mgt-pc--25 {
    margin-top: 25px !important;
}

.mgt-pc--30 {
    margin-top: 30px !important;
}

.mgt-pc--35 {
    margin-top: 35px !important;
}

.mgt-pc--40 {
    margin-top: 40px !important;
}

.mgt-pc--45 {
    margin-top: 45px !important;
}

.mgt-pc--50 {
    margin-top: 50px !important;
}

.mgt-pc--55 {
    margin-top: 55px !important;
}

.mgt-pc--60 {
    margin-top: 60px !important;
}

.mgt-pc--65 {
    margin-top: 65px !important;
}

.mgt-pc--70 {
    margin-top: 70px !important;
}

.mgt-pc--75 {
    margin-top: 75px !important;
}

.mgt-pc--80 {
    margin-top: 80px !important;
}

.mgt-pc--85 {
    margin-top: 85px !important;
}

.mgt-pc--90 {
    margin-top: 90px !important;
}

.mgt-pc--95 {
    margin-top: 95px !important;
}

.mgt-pc--100 {
    margin-top: 100px !important;
}

.mgt-pc--105 {
    margin-top: 105px !important;
}

.mgt-pc--110 {
    margin-top: 110px !important;
}

.mgt-pc--115 {
    margin-top: 115px !important;
}

.mgt-pc--120 {
    margin-top: 120px !important;
}

.mgt-pc--125 {
    margin-top: 125px !important;
}

.mgt-pc--130 {
    margin-top: 130px !important;
}

.mgt-pc--135 {
    margin-top: 135px !important;
}

.mgt-pc--140 {
    margin-top: 140px !important;
}

.mgt-pc--145 {
    margin-top: 145px !important;
}

.mgt-pc--150 {
    margin-top: 150px !important;
}

.mgt-pc--155 {
    margin-top: 155px !important;
}

.mgt-pc--160 {
    margin-top: 160px !important;
}

.mgt-pc--165 {
    margin-top: 165px !important;
}

.mgt-pc--170 {
    margin-top: 170px !important;
}

.mgt-pc--175 {
    margin-top: 175px !important;
}

.mgt-pc--180 {
    margin-top: 180px !important;
}

.mgt-pc--185 {
    margin-top: 185px !important;
}

.mgt-pc--190 {
    margin-top: 190px !important;
}

.mgt-pc--195 {
    margin-top: 195px !important;
}

.mgt-pc--200 {
    margin-top: 200px !important;
}

.mgt-pc--205 {
    margin-top: 205px !important;
}

.mgt-pc--210 {
    margin-top: 210px !important;
}

.mgt-pc--215 {
    margin-top: 215px !important;
}

.mgt-pc--220 {
    margin-top: 220px !important;
}

.mgt-pc--225 {
    margin-top: 225px !important;
}

.mgt-pc--230 {
    margin-top: 230px !important;
}

.mgt-pc--235 {
    margin-top: 235px !important;
}

.mgt-pc--240 {
    margin-top: 240px !important;
}

.mgt-pc--245 {
    margin-top: 245px !important;
}

.mgt-pc--250 {
    margin-top: 250px !important;
}

@media screen and (max-width: 767px) {
    .mgt-sp--0 {
        margin-top: 0 !important;
    }
    .mgt-sp--5 {
        margin-top: calc(5 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--10 {
        margin-top: calc(10 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--15 {
        margin-top: calc(15 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--20 {
        margin-top: calc(20 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--25 {
        margin-top: calc(25 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--30 {
        margin-top: calc(30 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--35 {
        margin-top: calc(35 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--40 {
        margin-top: calc(40 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--45 {
        margin-top: calc(45 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--50 {
        margin-top: calc(50 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--55 {
        margin-top: calc(55 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--60 {
        margin-top: calc(60 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--65 {
        margin-top: calc(65 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--70 {
        margin-top: calc(70 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--75 {
        margin-top: calc(75 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--80 {
        margin-top: calc(80 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--85 {
        margin-top: calc(85 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--90 {
        margin-top: calc(90 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--95 {
        margin-top: calc(95 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--100 {
        margin-top: calc(100 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--105 {
        margin-top: calc(105 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--110 {
        margin-top: calc(110 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--115 {
        margin-top: calc(115 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--120 {
        margin-top: calc(120 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--125 {
        margin-top: calc(125 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--130 {
        margin-top: calc(130 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--135 {
        margin-top: calc(135 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--140 {
        margin-top: calc(140 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--145 {
        margin-top: calc(145 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--150 {
        margin-top: calc(150 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--155 {
        margin-top: calc(155 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--160 {
        margin-top: calc(160 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--165 {
        margin-top: calc(165 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--170 {
        margin-top: calc(170 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--175 {
        margin-top: calc(175 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--180 {
        margin-top: calc(180 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--185 {
        margin-top: calc(185 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--190 {
        margin-top: calc(190 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--195 {
        margin-top: calc(195 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--200 {
        margin-top: calc(200 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--205 {
        margin-top: calc(205 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--210 {
        margin-top: calc(210 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--215 {
        margin-top: calc(215 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--220 {
        margin-top: calc(220 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--225 {
        margin-top: calc(225 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--230 {
        margin-top: calc(230 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--235 {
        margin-top: calc(235 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--240 {
        margin-top: calc(240 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--245 {
        margin-top: calc(245 / var(--design-width) * 100vw) !important;
    }
    .mgt-sp--250 {
        margin-top: calc(250 / var(--design-width) * 100vw) !important;
    }
}
/* ---------------------------------------------
*   margin-bottom
--------------------------------------------- */
.mgb-pc--0 {
    margin-bottom: 0 !important;
}

.mgb-pc--5 {
    margin-bottom: 5px !important;
}

.mgb-pc--10 {
    margin-bottom: 10px !important;
}

.mgb-pc--15 {
    margin-bottom: 15px !important;
}

.mgb-pc--20 {
    margin-bottom: 20px !important;
}

.mgb-pc--25 {
    margin-bottom: 25px !important;
}

.mgb-pc--30 {
    margin-bottom: 30px !important;
}

.mgb-pc--35 {
    margin-bottom: 35px !important;
}

.mgb-pc--40 {
    margin-bottom: 40px !important;
}

.mgb-pc--45 {
    margin-bottom: 45px !important;
}

.mgb-pc--50 {
    margin-bottom: 50px !important;
}

.mgb-pc--55 {
    margin-bottom: 55px !important;
}

.mgb-pc--60 {
    margin-bottom: 60px !important;
}

.mgb-pc--65 {
    margin-bottom: 65px !important;
}

.mgb-pc--70 {
    margin-bottom: 70px !important;
}

.mgb-pc--75 {
    margin-bottom: 75px !important;
}

.mgb-pc--80 {
    margin-bottom: 80px !important;
}

.mgb-pc--85 {
    margin-bottom: 85px !important;
}

.mgb-pc--90 {
    margin-bottom: 90px !important;
}

.mgb-pc--95 {
    margin-bottom: 95px !important;
}

.mgb-pc--100 {
    margin-bottom: 100px !important;
}

.mgb-pc--105 {
    margin-bottom: 105px !important;
}

.mgb-pc--110 {
    margin-bottom: 110px !important;
}

.mgb-pc--115 {
    margin-bottom: 115px !important;
}

.mgb-pc--120 {
    margin-bottom: 120px !important;
}

.mgb-pc--125 {
    margin-bottom: 125px !important;
}

.mgb-pc--130 {
    margin-bottom: 130px !important;
}

.mgb-pc--135 {
    margin-bottom: 135px !important;
}

.mgb-pc--140 {
    margin-bottom: 140px !important;
}

.mgb-pc--145 {
    margin-bottom: 145px !important;
}

.mgb-pc--150 {
    margin-bottom: 150px !important;
}

.mgb-pc--155 {
    margin-bottom: 155px !important;
}

.mgb-pc--160 {
    margin-bottom: 160px !important;
}

.mgb-pc--165 {
    margin-bottom: 165px !important;
}

.mgb-pc--170 {
    margin-bottom: 170px !important;
}

.mgb-pc--175 {
    margin-bottom: 175px !important;
}

.mgb-pc--180 {
    margin-bottom: 180px !important;
}

.mgb-pc--185 {
    margin-bottom: 185px !important;
}

.mgb-pc--190 {
    margin-bottom: 190px !important;
}

.mgb-pc--195 {
    margin-bottom: 195px !important;
}

.mgb-pc--200 {
    margin-bottom: 200px !important;
}

.mgb-pc--205 {
    margin-bottom: 205px !important;
}

.mgb-pc--210 {
    margin-bottom: 210px !important;
}

.mgb-pc--215 {
    margin-bottom: 215px !important;
}

.mgb-pc--220 {
    margin-bottom: 220px !important;
}

.mgb-pc--225 {
    margin-bottom: 225px !important;
}

.mgb-pc--230 {
    margin-bottom: 230px !important;
}

.mgb-pc--235 {
    margin-bottom: 235px !important;
}

.mgb-pc--240 {
    margin-bottom: 240px !important;
}

.mgb-pc--245 {
    margin-bottom: 245px !important;
}

.mgb-pc--250 {
    margin-bottom: 250px !important;
}

@media screen and (max-width: 767px) {
    .mgb-sp--0 {
        margin-bottom: 0 !important;
    }
    .mgb-sp--5 {
        margin-bottom: calc(5 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--10 {
        margin-bottom: calc(10 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--15 {
        margin-bottom: calc(15 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--20 {
        margin-bottom: calc(20 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--25 {
        margin-bottom: calc(25 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--30 {
        margin-bottom: calc(30 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--35 {
        margin-bottom: calc(35 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--40 {
        margin-bottom: calc(40 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--45 {
        margin-bottom: calc(45 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--50 {
        margin-bottom: calc(50 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--55 {
        margin-bottom: calc(55 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--60 {
        margin-bottom: calc(60 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--65 {
        margin-bottom: calc(65 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--70 {
        margin-bottom: calc(70 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--75 {
        margin-bottom: calc(75 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--80 {
        margin-bottom: calc(80 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--85 {
        margin-bottom: calc(85 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--90 {
        margin-bottom: calc(90 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--95 {
        margin-bottom: calc(95 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--100 {
        margin-bottom: calc(100 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--105 {
        margin-bottom: calc(105 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--110 {
        margin-bottom: calc(110 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--115 {
        margin-bottom: calc(115 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--120 {
        margin-bottom: calc(120 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--125 {
        margin-bottom: calc(125 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--130 {
        margin-bottom: calc(130 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--135 {
        margin-bottom: calc(135 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--140 {
        margin-bottom: calc(140 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--145 {
        margin-bottom: calc(145 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--150 {
        margin-bottom: calc(150 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--155 {
        margin-bottom: calc(155 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--160 {
        margin-bottom: calc(160 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--165 {
        margin-bottom: calc(165 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--170 {
        margin-bottom: calc(170 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--175 {
        margin-bottom: calc(175 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--180 {
        margin-bottom: calc(180 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--185 {
        margin-bottom: calc(185 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--190 {
        margin-bottom: calc(190 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--195 {
        margin-bottom: calc(195 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--200 {
        margin-bottom: calc(200 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--205 {
        margin-bottom: calc(205 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--210 {
        margin-bottom: calc(210 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--215 {
        margin-bottom: calc(215 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--220 {
        margin-bottom: calc(220 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--225 {
        margin-bottom: calc(225 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--230 {
        margin-bottom: calc(230 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--235 {
        margin-bottom: calc(235 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--240 {
        margin-bottom: calc(240 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--245 {
        margin-bottom: calc(245 / var(--design-width) * 100vw) !important;
    }
    .mgb-sp--250 {
        margin-bottom: calc(250 / var(--design-width) * 100vw) !important;
    }
}