/* .kv_area */

.kv_area .l-page-head__bg {
    height: max(70.7777777778vh, 400px);
    height: 100%;
}


.kv_area .l-page-head {
    padding-block: max(15.583333vh, 99px) max(40.472222vh, 122px);
    margin: 0;
    padding: 0;
    height: max(50.7777777778vh, 400px);
}

@media print,
screen and (min-width: 768px) {
    .kv_area .l-page-head {
        padding-block: max(15.583333vh, 99px) max(40.472222vh, 122px);
        margin: 0;
        padding: 0;
        height: max(70.7777777778vh, 400px);
    }
}

.kv_area .l-page-head__ttl {
    color: #fff;
}

.kv_area .l-page-head__txt {
    position: absolute;
    top: 15.583333vh;
}

.kv_area .l-page-head__txt:before {
    background: none;
}

@media screen and (max-width: 767px) {
    .kv_area .l-page-head__txt {
        top: 3.583333vh;
    }
}


.kv_area .l-page-head__txt:after {
    /* mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjIyMyIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE0NDAgMTU3LjY4OWMtMjcwLjYgODMuMTUyLTU0NS4yMTIgNjUuNTg0LTgxNS44MTctNTIuNzAzQzQxNi4xMjIgMTQuMDM4IDIwOC4wNjEtMTcuMzY4IDAgMTAuNzY5djIxMS45MDZoMTQ0MHYtNjQuOTg2eiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEyNjhfMTIzMTkpIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEyNjhfMTIzMTkiIHgxPSIwIiB5MT0iMTExLjczNiIgeDI9IjE0NDAiIHkyPSIxMTEuNzM2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0U0RTdENSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0YwREFDQyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==) center center / cover no-repeat;
    background: linear-gradient(90deg, rgb(228, 230, 213), rgb(240, 216, 204) 12.5%, rgb(217, 218, 227) 25%, rgb(216, 228, 224) 37.5%, rgb(235, 229, 209) 50%, rgb(234, 210, 218) 62.5%, rgb(238, 221, 205) 75%, rgb(228, 230, 213) 87.5%, rgb(240, 216, 204)) 0% 0% / 900% 900%;
    opacity: 1; */
    background: none;
}


.kv_area .l-page-head:after {
    background: none;
}

.kv_area .l-page-lead {
    background: linear-gradient(90deg, rgb(228, 230, 213), rgb(240, 216, 204) 12.5%, rgb(217, 218, 227) 25%, rgb(216, 228, 224) 37.5%, rgb(235, 229, 209) 50%, rgb(234, 210, 218) 62.5%, rgb(238, 221, 205) 75%, rgb(228, 230, 213) 87.5%, rgb(240, 216, 204)) 0% 0% / 900% 900%;
    animation: 30s linear 0s infinite normal none running gradationAnim;
    position: relative;
    margin: -2px 0 0;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .kv_area .l-page-lead {
        padding-top: 21.3333333333vw;
        padding-bottom: 21.3333333333vw;
    }
}


.kv_area .l-grad-bg:before {
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjIyMyIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE0NDAgMTU3LjY4OWMtMjcwLjYgODMuMTUyLTU0NS4yMTIgNjUuNTg0LTgxNS44MTctNTIuNzAzQzQxNi4xMjIgMTQuMDM4IDIwOC4wNjEtMTcuMzY4IDAgMTAuNzY5djIxMS45MDZoMTQ0MHYtNjQuOTg2eiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEyNjhfMTIzMTkpIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEyNjhfMTIzMTkiIHgxPSIwIiB5MT0iMTExLjczNiIgeDI9IjE0NDAiIHkyPSIxMTEuNzM2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0U0RTdENSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0YwREFDQyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==) center / cover no-repeat;
    position: absolute;
    height: var(--bg-height);
    inset: 0 0 auto;
    translate: 0 -99%;
    content: "";
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjIyMyIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE0NDAgMTU3LjY4OWMtMjcwLjYgODMuMTUyLTU0NS4yMTIgNjUuNTg0LTgxNS44MTctNTIuNzAzQzQxNi4xMjIgMTQuMDM4IDIwOC4wNjEtMTcuMzY4IDAgMTAuNzY5djIxMS45MDZoMTQ0MHYtNjQuOTg2eiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzEyNjhfMTIzMTkpIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzEyNjhfMTIzMTkiIHgxPSIwIiB5MT0iMTExLjczNiIgeDI9IjE0NDAiIHkyPSIxMTEuNzM2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI0U0RTdENSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0YwREFDQyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==) center / cover no-repeat;
    translate: 0;
}


.kv_area .l-grad-bg,
.kv_area .l-grad-bg:before {
    background: linear-gradient(90deg, #e4e6d5, #f0d8cc 12.5%, #d9dae3 25%, #d8e4e0 37.5%, #ebe5d1 50%, #ead2da 62.5%, #eeddcd 75%, #e4e6d5 87.5%, #f0d8cc);
    background-size: 900% 900%;
    animation: gradationAnim 30slinear infinite;
}



.kv_area .l-grad-bg {
    background: none;
    padding: 0;
    margin: 0;
    position: relative;
    position: absolute;
    width: 100%;
    height: var(--bg-height);
    bottom: 0;
    z-index: 1;
}

.kv_area .l-grad-bg:before {
    inset: auto 0 0;
}







.kv_area .l-page-head .bk_img {
    position: absolute;
    width: 19%;
    top: 0;
    left: 10%;
}

.kv_area .l-page-lead .l-page-lead__ttl {
    text-align: center;
}

.kv_area .l-page-lead .l-page-lead__desc {
    text-align: center;
}


@media screen and (min-width: 768px) {
    .kv_area .l-page-head:before {
        content: "";
        background: url(../img/top-scrol.svg) no-repeat 50% / contain;
        display: block;
        width: 2.6666666667vw;
        height: 15.6666666667vw;
        position: absolute;
        right: 5vh;
        bottom: -10vh;
        z-index: 5;
    }
}


.kv_area .l-page-lead .bk_img {
    position: absolute;
    width: 40%;
    bottom: 0;
    right: 10%;
}

.kv_area .l-page-lead .bk_img img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .kv_area .l-page-lead .bk_img {
        width: 19%;
        bottom: 20%;
        right: 10%;
    }
}


.kv_area .shop-info__gallery {
    height: 100%;
    margin: 0;
    position: static;
}

.kv_area .splide__track {
    height: 100%;
}


.kv_area .shop-info__gallery {
    width: 100%;
    max-width: initial;
}

.kv_area .shop-info__gallery .splide__slide img {
    border-radius: 0;
}

.kv_area .shop-info__gallery .splide__pagination {
    display: none;
    margin: 0;
}

.kv_area .shop-info__gallery .splide__pagination .splide__pagination__page {
    background: rgba(255, 255, 255, .5);
}

.kv_area .shop-info__gallery .splide__pagination .splide__pagination__page.is-active {
    background: #fff;
}


/* feature_area */
@media screen and (max-width: 767px) {
    /*767px以下で非表示*/

    .pc-hide {
        display: none;
        /*非表示*/
    }
}

@media screen and (min-width: 768px) {
    /*768px以上で非表示*/

    .sp-hide {
        display: none;
        /*非表示*/
    }
}

.top_feature .feature_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 5%;
}

.top_feature .feature_box {
    position: relative;
}

.top_feature .feature-txt {
    background: rgba(246, 244, 245, .85);
    border-radius: 20px;
    padding: 4.5333333333vw;
    margin: -10px 0 0;
    position: relative;
}

.top_feature .feature-txt .c-btn-base {
    min-width: initial;
    padding: 0;
    border: none;
}

@media print,
screen and (min-width: 768px) {
    .top_feature .feature_wrap {
        grid-template-columns: repeat(3, 1fr);
    }

    .top_feature .feature_box {
        padding: 0 20% 0 0;
    }

    .top_feature .feature-txt {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80%;
        padding: 2vw;
    }
}


/* ranking */


.top_ranking .item_list_rank {
    counter-reset: number 0;
}

.top_ranking .item_list {
    margin: 0 -10px;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.top_ranking .item_list>li {
    position: relative;
    flex-grow: 0;
    width: 100%;
}

.top_ranking .item_list05>li {
    width: 50%;
}

.top_ranking .item_list>li>div {
    margin: 0 10px 20px;
}

.top_ranking .item_list_rank>li>div {
    padding-bottom: 20px;
}

.top_ranking .item_list a {
    position: relative;
    display: block;
    text-decoration: none;
}

.top_ranking .item_list .thumb {
    position: relative;
    display: block;
    font-style: normal;
    text-align: center;
    padding-top: 17vw;
    z-index: 0;
}

.top_ranking .item_list_rank>li .thumb::before {
    position: absolute;
    content: "";
    counter-increment: number 1;
    content: counter(number);
    width: 12vw;
    height: 12vw;
    font-size: 1.25rem;
    color: #555;
    line-height: 40px;
    text-align: center;
    z-index: 9999;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    line-height: 3;
    background: url(https://mmoon.itembox.design/item/eo/top/assets/img/raking_no-4.svg) 50% / contain no-repeat;
}

.top_ranking .item_list_rank>li:nth-child(1) .thumb::before {
    background: #cb9911;
    color: #fff;
    background: url(https://mmoon.itembox.design/item/eo/top/assets/img/raking_no-1.svg) 50% / contain no-repeat;
}

.top_ranking .item_list_rank>li:nth-child(2) .thumb::before {
    background: #868686;
    color: #fff;
    background: url(https://mmoon.itembox.design/item/eo/top/assets/img/raking_no-2.svg) 50% / contain no-repeat;
}

.top_ranking .item_list_rank>li:nth-child(3) .thumb::before {
    background: #89682a;
    color: #fff;
    background: url(https://mmoon.itembox.design/item/eo/top/assets/img/raking_no-3.svg) 50% / contain no-repeat;
}


.top_ranking .item_list_rank .thumb img {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .top_ranking .item_list .thumb {
        padding-top: 100px;
    }

    .top_ranking .item_list05 li {
        width: 20%;
    }

    .top_ranking .item_list_rank>li .thumb::before {
        position: absolute;
        content: "";
        counter-increment: number 1;
        content: counter(number);
        width: 60px;
        height: 60px;
        color: #555;
        line-height: 40px;
        text-align: center;
        z-index: 9999;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        line-height: 4;

    }
}



/* serch_area */

.serch_area {
    max-width: 1246px;
    margin-inline: auto;
}

.serch_area .aeo_list_title {
    text-align: center;
    margin: 0 0 30px;
}

.serch_area .aeo_list_title .title {
    font-size: 28px;
    margin: 0;
}

.serch_area .aeo_list_title .title_p {
    font-size: 16px;
    margin: 0;
}

.serch_area .aeo_wrap {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

.serch_area .aeo_box {
    position: relative;
    font-weight: 500;
    text-align: center;
}

.serch_area .aeo_box label {
    display: block;
    padding: 20px 20px 15px;
    background-color: #666;
    color: #fff;
}

.serch_area .aeo_box label span {
    display: block;
}

/* アコーディオン */
.serch_area .aeo_box .aeo_list_box {
    overflow: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0 15px;
    font-size: 0.875rem;
    text-align: left;
    transition: 2s;
}

.serch_area .aeo_box .vibtn:checked+.aeo_list_box {
    height: auto;
    opacity: 1;
    padding: 0 15px 20px;
}

/* アコーディオン用：チェックを隠す */
.serch_area .aeo_box input {
    position: absolute;
    visibility: hidden;
    top: 0;
    right: 0;
}

.serch_area .aeo_box .vibtn::after {
    position: absolute;
    visibility: visible;
    content: "";
    top: 20px;
    right: 20px;
    width: 24px;
    height: 15px;
    background-image: url(https://mmoon.itembox.design/item/contest/aroma/images/white-arrow.svg);
    background-size: cover;

}

.serch_area .aeo_box .vibtn:checked::after {
    transform: rotate(-180deg);
}


.serch_area .aeo_list_area .eo_list_title {
    font-size: 16px;
    margin: 20px 0;
}


.serch_area .aeo_list_area .eo_list_a ul {
    padding: 0;
    border-left: 1px solid #ccc;
}

.serch_area .aeo_list_area .eo_list_a ul li {
    margin-top: -1px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    list-style: none;
    font-size: 0.875rem;
    text-align: left;
    position: relative;
}


.serch_area .aeo_list_area .eo_list_a ul li::before {
    position: absolute;
    content: "";
    top: calc(50% - 4px);
    right: 20px;
    width: 20px;
    height: 9px;
    background: url(../img/icon_arrow.svg) no-repeat;
    background-size: 100% auto;
    transition: 0.1s ease-in-out;
}


.serch_area .aeo_list_area .eo_list_a ul li:hover:before {
    right: 10px;
}

.serch_area .aeo_list_area .eo_list_a ul li a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #333;
    padding: 15px 50px 15px 10px;
}


@media only screen and (min-width: 768px) {

    .serch_area .aeo_list_area .eo_list_a ul {
        display: flex;
        flex-wrap: wrap;
    }

    .serch_area .aeo_list_area .eo_list_a ul li {
        flex-basis: calc(33.33333333%);
    }
}

@media screen and (max-width: 767px) {
    .l-page-search__form input {
        max-width: 71.333333vw;
    }
}


/* aroma_area */

.aroma_area .container {
    margin-inline: auto;
    position: relative;
}

.aroma_area .swiper {
    width: 90%;
}

.aroma_area .swiper img {
    width: 100%;
}




.aroma_area .aroma_swiper_text {
    width: 100%;
    border-radius: 15px;
    padding: 30px 0;
    display: flex;
    justify-content: center;
}



.aroma_area .aroma_swiper_text .swiper-slide {
    justify-content: center;
}



.aroma_area .aroma_swiper_main .swiper-slide {
    opacity: .3;
    /* 左右のスライドを薄くする */
    transform: scale(.8);
    /* 左右のスライドを小さくする */
    transition: .7s;
    /* ゆっくり小さくさせる */
}

.aroma_area .aroma_swiper_main .swiper-slide img {
    height: auto;
    width: 100%;
}

.aroma_area .aroma_swiper_main .swiper-slide-active {
    opacity: 1;
    /* 中央のスライドは薄くしない */
    transform: scale(1);
    /* 中央のスライドは小さくしない */
    z-index: 1;
    /* 中央のスライドを一番上にする */
}

:root {
    --swiper-navigation-size: 20px;
    --swiper-theme-color: #4A4D4F;
}




/* 文章 */
.aroma_area .text_container .bk_option {
    text-align: center;
    width: 8%;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .aroma_area .text_container .bk_option {
        width: 20%;

    }
}

.aroma_area .swiper_inner_text {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    background: #fff;
}

.aroma_area .bk_img {
    position: absolute;
    width: 30%;
    top: -5%;
    right: 0;
    height: 100%;
}

.aroma_area .bk_img img {
    transform: scale(1);
    opacity: 0.2;
}

@media screen and (max-width: 767px) {
    .aroma_area .bk_img {
        position: absolute;
        width: 100%;
        left: 30%;
        height: 100%;
    }
}

.aroma_area .aroma_swiper_text .item-txt {
    display: grid;
    position: relative;
    padding: 56px;
    gap: 32px;
}

@media screen and (max-width: 767px) {
    .aroma_area .aroma_swiper_text .item-txt {
        padding: 8.5333333333vw;
        gap: 6.4vw;
    }
}

.aroma_area .aroma_area.aroma_swiper_text .item-ttl {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.7916666667;
}

.aroma_area .aroma_swiper_text .item-ttl {
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
    .aroma_area .aroma_swiper_text .item-ttl {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 767px) {
    .aroma_area .aroma_swiper_text .item-desc {
        text-align: justify;
    }
}

.aroma_area .aroma_swiper_text .c-btn-base {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    gap: 16px;
    border-bottom: 1px solid #baabb2;
    font-weight: 700;
    font-size: 1rem;
    transition: border-color .4sease;
}

@media screen and (max-width: 767px) {
    .aroma_area .aroma_swiper_text .c-btn-base {
        width: 100%;
        padding-bottom: 6.4vw;
        gap: 4.2666666667vw;
        font-size: 0.9375rem;
    }
}


.aroma_area .c-btn-base:after {
    width: 16px;
    height: 16px;
    background: url(https://mmoon.itembox.design/item/eo/assets/images/common/icon_arr.svg) 50% / contain no-repeat;
    content: "";
    transition: translate .4sease;
}

@media screen and (max-width: 767px) {
    .aroma_area .c-btn-base:after {
        width: 4.2666666667vw;
        height: 4.2666666667vw;
    }
}






/* LPの箇所 */

.aroma_area {
    background-color: #F6F4F5;
    padding-top: 96px;
    padding-bottom: 120px;
}

@media screen and (max-width: 767px) {
    .aroma_area {
        padding-top: 21.3333vw;
        padding-bottom: 21.3333333333vw;
    }
}

.aroma_area .aroma-intro__lead {
    margin-bottom: 64px;
    font-size: 1.125rem;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .aroma_area .aroma-intro__lead {
        margin-bottom: 12.8vw;
        font-size: 0.9375rem;
        text-align: justify;
    }
}

@media print,
screen and (min-width: 768px) {
    .aroma_area .aroma-intro__lead {
        text-align: center;
    }
}



/* note_area */

body .l-page-sec.note_area {
    min-width: initial;
    margin-top: 0;
}

.note_area .l-grad-bg {
    margin-top: 0;
    padding-top: 30vw;
    padding-bottom: var(--bg-height);
}


.note_area .l-grad-bg::before {
    position: absolute;
    height: var(--bg-height);
    inset: 0 0 auto;
    translate: 0;
    translate: 0 -1%;
    content: "";
    background-image: url(../img/pc-note-top-bk.svg);
    background-size: cover;
    background-position: 50%;
    mask: initial;
}

.note_area .l-grad-bg::after {
    position: absolute;
    height: var(--bg-height);
    inset: auto 0 0;
    translate: 0;
    content: "";
    background-image: url(../img/pc-top_wave.svg);
    background-size: cover;
    background-position: 50%;
}


.note_area .note-list-horz__item {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: max(10.4166666667vw, 100px);
}


.note_area .note-intro__pht {
    width: 75%;
}

.note_area .c-ttl__wave-right:before {
    background: url(../img/top_deco_wave.svg) no-repeat 50% / contain;
}

.note_area .note-intro__pht img {
    border-radius: 0 133.3333333333vw 133.3333333333vw 0;
}

.note_area .note-intro__txt {
    margin-top: -50%;
}

.note_area .c-ttl__wave-right {
    color: #fff;
}

@media print,
screen and (min-width: 768px) {
    .note_area .note-intro {
        display: flex;
        align-items: center;
    }

    .note_area .note-intro__pht {
        width: 60%;
    }

    .note_area .note-intro__txt {
        flex: 1;
        margin-top: 0;
        margin-inline: -10% 0;
        width: 600px;
    }
}


.note_area .item-txt {
    display: grid;
    position: relative;
    padding: 56px;
    gap: 32px;
    border-radius: 40px;
    background: rgba(246, 244, 245, .85);
}



.note_area .item-txt .item-link .c-btn-base {
    font-size: 1.125rem;
}

.note_area .item-txt .item-ttl {
    font-size: 1.5rem;
}

@media screen and (max-width: 767px) {
    .note_area .item-txt {
        padding: 8.5333333333vw;
        gap: 6.4vw;
    }

    .note_area .item-txt .item-ttl {
        font-size: 1.375rem;
    }

}


.note_area .note-intro:nth-child(2n) .note-intro__pht {
    margin: 0 0 0 auto;
}

.note_area .note-intro:nth-child(2n) .note-intro__pht img {
    border-radius: 133.3333333333vw 0 0 133.3333333333vw;
}

.note_area .note-intro:nth-child(2n) .c-ttl__wave-right {
    align-items: start;
    padding-left: 32px;
    padding-right: 0;
}

@media print,
screen and (min-width: 768px) {
    .note_area .note-intro:nth-child(2n) {
        flex-direction: row-reverse;
    }

    .note_area .note-intro:nth-child(2n) .note-intro__txt {
        margin-inline: 0 -10%;
    }
}

/* sale_area */


.sale_area {
    max-width: 1246px;
    margin-inline: auto;
}

/* スライド全体の余白 */
.sale_area .sale_swiper {
    margin-top: 20px;
    /* スライダー上の余白 */
    padding-left: 10vw;
    /* スライダー左の余白 */
    padding-right: 20px;
    /* スライダー右の余白 */
    padding-top: 30px;
}

/* スライド画像のサイズ */
.sale_area .swiper-slide img {
    height: auto;
    width: 100%;
    border-radius: 40px;
}


@media print,
screen and (min-width: 768px) {
    .sale_area .sale_swiper {
        margin-top: 20px;
        /* スライダー上の余白 */
        padding-left: 20px;
        /* スライダー左の余白 */
        padding-right: 20px;
        /* スライダー右の余白 */
    }
}


:root {
    --swiper-navigation-size: 20px;
    --swiper-theme-color: #4A4D4F;
}

@media screen and (max-width: 767px) {
    /*767px以下で非表示*/

    .pc-hide {
        display: none;
        /*非表示*/
    }
}

@media screen and (min-width: 768px) {
    /*768px以上で非表示*/

    .sp-hide {
        display: none;
        /*非表示*/
    }
}


.sale_area .sale_ribbon {
    position: absolute;
    top: -6%;
    padding: 10px;
    background-color: #D26565;
    color: #fff;
}

.sale_area .sale_ribbon .off_ribbon {
    font-weight: 700;
}

.sale_area .sale_ribbon .date_ribbon {
    font-size: 1.1rem;
}



.sale_area .sale_swiper .sale_c-btn-base::before {
    position: absolute;
    width: 34px;
    height: 34px;
    background: url(https://mmoon.itembox.design/item/eo/assets/images/common/icon_arr.svg) 50% / contain no-repeat;
    content: "";
    transition: translate .4s ease;
    bottom: 7%;
    right: 10%;
}

@media screen and (max-width: 767px) {
    .sale_area .sale_swiper .sale_c-btn-base::before {
        width: 6.2666666667vw;
        height: 6.2666666667vw;
    }
}

@media (hover: hover) {
    .sale_area .sale_swiper .swiper-slide:hover .sale_c-btn-base::before {
        translate: 50%;
    }
}


.sale_area .top_sale_bnr img {
    width: 100%;
    border-radius: 40px;
}



/* asso_area */


.asso_area {

    overflow: hidden;
}


/* スライド全体の余白 */
.asso_area .asso_swiper {
    /* スライダー上の余白 */
    padding-left: 5vw;
    /* スライダー左の余白 */
    padding-right: 20px;
    /* スライダー右の余白 */
    margin: 20px 0 50px;
}

/* スライド画像のサイズ */
.asso_area .swiper-slide img {
    height: auto;
    width: 100%;
    border-radius: 40px;
}


@media print,
screen and (min-width: 768px) {
    .asso_area .asso_swiper {
        /* スライダー上の余白 */
        padding-left: 20px;
        /* スライダー左の余白 */
        padding-right: 20px;
        /* スライダー右の余白 */
    }
}





/* .asso_area .swiper_container {
    margin: 0 0 50px;
    max-width: 1246px;
    margin-inline: auto;
} */

.asso_area .swiper_container_title {
    padding-left: 20px;
}

.asso_area .item_box_link {
    position: relative;
    display: grid;
    margin-top: -50px;
    gap: 32px;
    background: rgba(255, 255, 255, .85);
    border-radius: 40px;
    padding: 20px;
}



@media screen and (max-width: 767px) {
    .asso_area .item_box_link {
        padding: 8.5333333333vw;
        gap: 6.4vw;
        margin-top: -16.4vw;
    }

    .asso_area .swiper_container_title {
        padding-left: 10vw;
    }
}



.asso_area .asso-how-wrapper .c-btn-base {
    gap: 0;
    padding: 0;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    min-width: initial;
    width: 100%;
}

.asso_area .item-link_title .c-btn-base {
    font-weight: 700;
    font-size: 0.9375rem;
}

.asso_area .asso-how-wrapper {
    margin: 0 calc(50% - 50vw);
    padding: 96px calc(50vw - 50%) 120px;
    position: relative;
}

@media print,
screen and (min-width: 768px) {
    .asso_area .asso-how-wrapper {
        max-width: 1246px;
        margin-inline: auto;
    }

}

.asso_area .asso-how-wrapper::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 100%;
    border-radius: 40px 0 0 40px;
    background-color: #f6f4f5;
    z-index: -1;
    top: 0;
    right: 0;
}

@media print,
screen and (min-width: 768px) {
    .asso_area .asso-how-wrapper::before {
        content: "";
        position: absolute;
        width: 100vw;
        height: 100%;
        border-radius: 40px 0 0 40px;
        background-color: #f6f4f5;
        z-index: -1;
        top: 0;
        left: -41vw;
        transform: translate(50vw, 0);
    }
}

@media screen and (max-width: 767px) {
    .asso_area .asso-how-wrapper {
        padding: 17.0666666667vw calc(50vw - 50%) 21.3333333333vw;

    }
}


.asso_area .intro-bnr {
    display: grid;
    place-items: center;
    padding-block: 96px;
    border-radius: 40px;
    background: url(../img/asso_bnr_bg.jpg) 50% / cover no-repeat;
}

@media screen and (max-width: 767px) {
    .asso_area .intro-bnr {
        margin: 0 calc(50% - 50vw);
        padding: 27.7333333333vw 6.4vw;
        border-radius: 0;
    }
}

.asso_area .intro-bnr_text {
    font-size: 1.2rem;
    text-align: left;
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .asso_area .intro-bnr_text {
        margin-top: 6.4vw;
    }
}