html {
    font-size: 62.5%;
    overflow-x: hidden
}

body {
    font-size: 62.5%;
    overflow-x: clip
}

.block {
    position: relative;
    z-index: 0
}

.block::before {
    content: none
}

.mx-auto {
    margin: 0 auto
}

.block-1 {
    position: relative;
    z-index: 10;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: url("img/bg-A.png") no-repeat center top;
    background-size: 100vw auto;
    aspect-ratio: 3000 / 4137;
    min-height: max(100vh, calc(100vw * 4137 / 3000))
}

@media(max-width:767px) {
    .block-1 {
        position: relative;
        z-index: 10;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background: url("img/bg-A_sp.png") no-repeat center top;
        background-size: 100vw auto;
        aspect-ratio: 1080 / 2151;
        min-height: max(100vh, calc(100vw * 2151 / 1080));
        min-height: auto;
    }
}

.block-1 h1 img.main_img {
    display: block;
    width: 83.5vw;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
    padding-top: 4vw
}

.block-1 .inner {
    margin-top: -4vw
}

img.txt_tororiawa {
    width: 50vw;
    margin: 0 auto
}

.item-group {
    --g: 1vw;
    width: 70vw;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--g)
}

.item-group li {
    flex: 0 0 calc((100% - (var(--g) * 3)) / 4);
    display: flex;
    align-items: center;
    justify-content: center
}

.item-group li img.item {
    width: 100%;
    height: auto
}

.text-box.bg-kirameki {
    background: no-repeat center top;
    background-size: contain
}

.text-box.bg-kirameki {
    margin: 2vw auto 0;
    background-image: url("img/bg-kirameki.png")
}

.text-box.bg-kirameki .txt-zenpin {
    width: 52.3vw
}

@media(max-width:767px) {
    .block-1 h1 img.main_img {
        width: 95vw;
        padding-top: 8vw
    }

    img.txt_tororiawa {
        width: 82vw
    }

    .item-group {
        width: 87.96vw
    }

    .text-box.bg-kirameki {
        margin: 8vw auto 0;
        background-image: url("img/bg-kirameki_sp.png")
    }

    .text-box.bg-kirameki .txt-zenpin {
        width: 87.96vw
    }
}

.block-2 {
    position: relative;
    z-index: 2;
    margin-top: -15vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: url("img/bg-B.png?2025") no-repeat center top;
    background-size: 100vw auto;
    aspect-ratio: 3000 / 5500;
    min-height: max(100vh, calc(100vw * 5500 / 3000))
}

.block-2-inner {
    padding-top: 15vw
}

@media(max-width:767px) {
    .block-2 {
        position: relative;
        z-index: 2;
        margin-top: -15vw;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background: url("img/bg-B_sp.png") no-repeat center top;
        background-size: 100vw auto;
        aspect-ratio: 1080 / 4900;
        min-height: max(100vh, calc(100vw * 4900 / 1080));
        background-color: #FFF
    }

    .block-2-inner {
        padding-top: 22.5vw
    }
}

.block-2 h2 img.txt-howtouse {
    width: 14.43vw
}

.block-2 .inner {
    margin-top: 2vw
}

@media(max-width:767px) {
    .block-2 h2 img.txt-howtouse {
        width: 27.68vw
    }

    .block-2 .inner {
        margin-top: 5vw
    }
}

.inner .videobox {
    position: relative;
    width: 100%;
    width: 700px;
    width: 70vw;
    flex-shrink: 0;
    aspect-ratio: 500/281.25;
    border-radius: 11.278px;
    border-radius: clamp(11.278px, 2vw, 19.6875vw);
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 10px
}

@media screen and (max-width:767px) {
    .inner .videobox {
        width: 87.96vw;
        border-radius: clamp(11.278px, 5vw, 22.5vw);
        margin-bottom: 2.6666666667vw;
        border-radius: 2.6666666667vw
    }
}

.inner .videobox video {
    width: 100%
}

.inner .videobox iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%
}

.box.concept {
    margin: 4vw auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.block-2-concept-inner {
    margin-top: 20vw
}

.block-2 h2 img.txt-concept {
    width: 14.43vw
}

.block-2 img.txt-concept-1 {
    width: 33.33vw;
    padding-top: 3vw
}

.block-2 img.txt-concept-2 {
    width: 41.47vw;
    padding-top: 5vw
}

@media(max-width:767px) {
    .box.concept {
        margin: 0 auto
    }

    .block-2-concept-inner {
        margin-top: 28vw
    }

    .block-2 h2 img.txt-concept {
        width: 27.68vw
    }

    .block-2 img.txt-concept-1 {
        width: 71.85vw;
        padding-top: 8vw
    }

    .block-2 img.txt-concept-2 {
        width: 84.72vw;
        padding-top: 10vw
    }
}

.block-3 {
    position: relative;
    z-index: 5;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #fff
}

.block-3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(calc(100% - 1px));
    width: 100vw;
    height: calc(100vw * 177 / 3000);
    background: url("img/line-gold.png") no-repeat center top;
    background-size: 100% auto;
    z-index: 4
}

@media(max-width:767px) {
    .block-3::after {
        height: calc(100vw * 365 / 1080);
        background: url("img/line-gold_sp.png") no-repeat center top;
        background-size: 100% auto
    }
}

.block-3 h2 img.txt-feature {
    width: 14.43vw;
    padding-top: 0
}

.block-3 .inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 5vw
}

.block-3 .inner img {
    width: 70vw
}

.block-3 .inner img.point {
    padding-top: 5vw
}

@media(max-width:767px) {
    .block-3 h2 img.txt-feature {
        width: 27.68vw;
        padding-top: 0
    }

    .block-3 .inner img {
        width: 100vw
    }

    .block-3 .inner img.point {
        padding-top: 10vw
    }
}

.block-4 {
    position: relative;
    z-index: 2;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: url("img/bg-C1.png") no-repeat center top;
    background-size: 100vw auto;
    aspect-ratio: 3000 / 10868;
    min-height: max(100vh, calc(100vw * 10868 / 3000))
}

.block-4-inner {
    padding-top: 12vw
}

@media(max-width:767px) {
    .block-4 {
        position: relative;
        z-index: 2;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background-image: url("img/bg-C1_sp.png");
        background-repeat: no-repeat, no-repeat;
        background-position: top, center top;
        background-size: 100% 100%, cover;
        min-height: clamp(120vw, 160vw, 200vw);
        aspect-ratio: auto
    }

    .block-4-inner {
        padding-top: 35vw
    }
}

.block-4 h2 img.txt-products {
    width: 14.43vw
}

@media(max-width:767px) {
    .block-4 h2 img.txt-products {
        width: 27.68vw
    }
}

.box.item {
    margin-top: 2vw
}

.bg-item {
    position: relative;
    z-index: 5;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 70vw auto;
    margin-bottom: 5vw
}

.bg-item.item_sa_box {
    min-height: calc(70vw * 2160 / 2100);
    background-image: url("img/item/bg-SA.png")
}

.bg-item.item_pw_box {
    min-height: calc(70vw * 2160 / 2172);
    background-image: url("img/item/bg-PW.png");
    padding-bottom: 6vw
}

.bg-item.item_lf_box {
    min-height: calc(70vw * 2162 / 2100);
    background-image: url("img/item/bg-LF.png")
}

.bg-item.item_cb_box {
    min-height: calc(70vw * 2160 / 2173);
    background-image: url("img/item/bg-CB.png");
    padding-bottom: 6vw
}

@media(max-width:767px) {
    .box.item {
        margin-top: 5vw
    }

    .bg-item {
        background-size: 87.96vw auto;
        margin-bottom: 15vw
    }

    .bg-item.item_sa_box {
        min-height: calc(87.96vw * 3052 / 950);
        background-image: url("img/item/bg-SA_sp.png")
    }

    .bg-item.item_pw_box {
        min-height: calc(87.96vw * 3057 / 950);
        background-image: url("img/item/bg-PW_sp.png")
    }

    .bg-item.item_lf_box {
        min-height: calc(87.96vw * 3001 / 950);
        background-image: url("img/item/bg-LF_sp.png")
    }

    .bg-item.item_cb_box {
        min-height: calc(87.96vw * 3009 / 950);
        background-image: url("img/item/bg-CB_sp.png")
    }
}

img.traditional_model {
    width: 70vw;
    height: auto;
    margin: 0 auto
}

@media(max-width:767px) {
    .traditional_model-box {
        padding-bottom: 15vw
    }

    img.traditional_model {
        width: 87.96vw
    }
}

.item-sa,
.item-pw,
.item-lf,
.item-cb {
    width: 53vw;
    position: relative
}

.item-sa__lead,
.item-pw__lead,
.item-lf__lead,
.item-cb__lead {
    padding-top: 15vw;
    z-index: 5;
    position: relative
}

.item-sa__lead img,
.item-pw__lead img,
.item-lf__lead img,
.item-cb__lead img {
    width: 30.53vw;
    margin: 0 auto
}

.item-sa__grid,
.item-pw__grid,
.item-lf__grid,
.item-cb__grid {
    display: grid;
    grid-template-columns: 28vw auto;
    column-gap: 0;
    align-items: start;
    justify-content: center;
    overflow: visible
}

.item-sa__grid img,
.item-pw__grid img,
.item-lf__grid img,
.item-cb__grid img {
    width: auto;
    height: auto;
    display: block
}

.item-sa__left,
.item-pw__left,
.item-lf__left,
.item-cb__left {
    display: flex;
    flex-direction: column;
    row-gap: 1.2vw
}

.item-sa__pack,
.item-pw__pack,
.item-lf__pack,
.item-cb__pack {
    position: relative
}

img.product-sa__item,
img.product-pw__item,
img.product-lf__item,
img.product-cb__item {
    width: 21.4vw;
    padding-top: 2vw
}

img.item-sa__detail,
img.item-pw__detail,
img.item-lf__detail,
img.item-cb__detail {
    width: 19.27vw;
    padding-top: .5vw
}

.item-sa__decoration,
.item-pw__decoration,
.item-lf__decoration,
.item-cb__decoration {
    position: absolute;
    left: -7.5vw;
    bottom: 13.5vw;
    z-index: -1
}

.item-sa__decoration img,
.item-pw__decoration img,
.item-lf__decoration img,
.item-cb__decoration img {
    width: 11.73vw
}

.item-sa__right,
.item-pw__right,
.item-lf__right,
.item-cb__right {
    display: flex;
    flex-direction: column
}

.item-sa__triangle,
.item-pw__triangle,
.item-lf__triangle,
.item-cb__triangle {
    position: relative;
    overflow: visible;
    z-index: 3
}

.item-sa__triangle img,
.item-pw__triangle img,
.item-lf__triangle img,
.item-cb__triangle img {
    width: 28.66vw;
    position: relative;
    left: -2.5vw;
    top: 0;
    max-width: none
}

.item-sa__ingredients,
.item-pw__ingredients,
.item-lf__ingredients,
.item-cb__ingredients {
    position: relative;
    top: -1vw;
    right: -2vw
}

.item-sa__ingredients img,
.item-pw__ingredients img,
.item-lf__ingredients img,
.item-cb__ingredients img {
    width: 25.7vw
}

.item-sa__bathcolor img,
.item-pw__bathcolor img,
.item-lf__bathcolor img,
.item-cb__bathcolor img {
    width: 26.5vw;
    position: relative;
    top: -1.1vw;
    right: -1.5vw
}

.item-sa__medal,
.item-pw__medal,
.item-lf__medal,
.item-cb__medal {
    position: absolute;
    right: 22.5vw;
    bottom: 21.5vw
}

.item-sa__medal img,
.item-pw__medal img,
.item-lf__medal img,
.item-cb__medal img {
    width: 7vw
}

.item-sa__buttons,
.item-pw__buttons,
.item-lf__buttons,
.item-cb__buttons {
    display: flex;
    justify-content: center;
    gap: 1.2vw;
    margin: 2vw auto 0
}

.item-sa__btn,
.item-pw__btn,
.item-lf__btn,
.item-cb__btn {
    display: block
}

.item-sa__btn img,
.item-pw__btn img,
.item-lf__btn img,
.item-cb__btn img {
    width: 7.6vw
}

@media(max-width:767px) {

    .item-sa,
    .item-pw,
    .item-lf,
    .item-cb {
        width: 72.87vw;
        position: relative
    }

    .item-sa__lead,
    .item-pw__lead,
    .item-lf__lead,
    .item-cb__lead {
        padding-top: 32vw;
        margin-bottom: 4.5vw
    }

    .item-sa__lead img,
    .item-pw__lead img,
    .item-lf__lead img,
    .item-cb__lead img {
        width: 70.4vw;
        margin: 0 auto
    }

    .item-sa__grid,
    .item-pw__grid,
    .item-lf__grid,
    .item-cb__grid {
        display: block
    }

    .item-sa__left,
    .item-sa__right,
    .item-pw__left,
    .item-pw__right,
    .item-lf__left,
    .item-lf__right,
    .item-cb__left,
    .item-cb__right {
        display: block
    }

    img.product-sa__item,
    img.product-pw__item,
    img.product-lf__item,
    img.product-cb__item {
        width: 52.77vw;
        padding-top: 0;
        margin: 0 auto
    }

    img.item-sa__detail,
    img.item-pw__detail,
    img.item-lf__detail,
    img.item-cb__detail {
        width: 52.77vw;
        margin: 2.4vw auto 0;
        padding-top: 0
    }

    .item-sa__decoration.pc,
    .item-pw__decoration.pc,
    .item-lf__decoration.pc,
    .item-cb__decoration.pc {
        display: none
    }

    .item-sa__triangle img,
    .item-pw__triangle img,
    .item-lf__triangle img,
    .item-cb__triangle img {
        width: 75vw;
        margin: 0 auto 0;
        left: -3vw
    }

    .item-sa__ingredients img,
    .item-pw__ingredients img,
    .item-lf__ingredients img,
    .item-cb__ingredients img {
        width: 67vw;
        margin: 3.5vw auto 0
    }

    .item-sa__bathcolor img,
    .item-pw__bathcolor img,
    .item-lf__bathcolor img,
    .item-cb__bathcolor img {
        width: 67vw;
        margin: 4vw auto 0
    }

    .item-sa__medal,
    .item-pw__medal,
    .item-lf__medal,
    .item-cb__medal {
        position: absolute;
        left: -4.5vw;
        bottom: 53vw;
        right: 0
    }

    .item-sa__medal img,
    .item-pw__medal img,
    .item-lf__medal img,
    .item-cb__medal img {
        width: 15vw
    }

    .item-sa__buttons,
    .item-pw__buttons,
    .item-lf__buttons,
    .item-cb__buttons {
        display: flex;
        justify-content: center;
        gap: 3vw;
        margin: 5vw auto 0
    }

    .item-sa__btn img,
    .item-pw__btn img,
    .item-lf__btn img,
    .item-cb__btn img {
        width: 19.5vw
    }

    .item-sa__ingredients,
    .item-pw__ingredients,
    .item-lf__ingredients,
    .item-cb__ingredients {
        right: 0
    }

    .item-sa__bathcolor img,
    .item-pw__bathcolor img,
    .item-lf__bathcolor img,
    .item-cb__bathcolor img {
        right: 0
    }
}