@charset "utf-8";

/*==================================================
icon
================================================== */
:root {
    --icon-ribbon: url("data:image/svg+xml,%3Csvg%20%0A%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%0A%20width%3D%2285px%22%20height%3D%2240px%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20%20fill%3D%22currentColor%22%0A%20d%3D%22M-0.000%2C0.000%20L84.1000%2C0.000%20L80.000%2C19.1000%20L84.1000%2C40.000%20L-0.000%2C40.000%20L-0.000%2C0.000%20Z%22/%3E%0A%3C/svg%3E");

    --icon-sparkle: url("data:image/svg+xml,%3Csvg%20%0A%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%0A%20width%3D%22247px%22%20height%3D%2271px%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20%20fill%3D%22currentColor%22%0A%20d%3D%22M246.272%2C30.773%20C242.553%2C30.773%20241.267%2C31.674%20240.543%2C32.368%20C239.821%2C33.064%20238.887%2C34.304%20238.887%2C37.884%20C238.887%2C38.020%20238.869%2C38.404%20238.428%2C38.404%20C237.984%2C38.404%20237.969%2C38.020%20237.969%2C37.884%20C237.969%2C34.304%20237.035%2C33.064%20236.313%2C32.368%20C235.591%2C31.672%20234.304%2C30.773%20230.585%2C30.773%20C230.443%2C30.773%20230.043%2C30.758%20230.043%2C30.332%20C230.043%2C29.907%20230.443%2C29.889%20230.585%2C29.889%20C234.304%2C29.889%20235.591%2C28.992%20236.313%2C28.296%20C237.035%2C27.598%20237.969%2C26.363%20237.969%2C22.783%20C237.969%2C22.646%20237.984%2C22.261%20238.428%2C22.261%20C238.869%2C22.261%20238.887%2C22.646%20238.887%2C22.783%20C238.887%2C26.363%20239.821%2C27.598%20240.543%2C28.296%20C241.267%2C28.992%20242.553%2C29.889%20246.272%2C29.889%20C246.414%2C29.889%20246.813%2C29.907%20246.813%2C30.332%20C246.813%2C30.757%20246.414%2C30.773%20246.272%2C30.773%20ZM229.820%2C13.607%20C224.263%2C13.607%20222.341%2C14.953%20221.259%2C15.991%20C220.181%2C17.030%20218.784%2C18.882%20218.784%2C24.231%20C218.784%2C24.436%20218.757%2C25.009%20218.099%2C25.009%20C217.436%2C25.009%20217.414%2C24.436%20217.414%2C24.231%20C217.414%2C18.882%20216.017%2C17.030%20214.939%2C15.991%20C213.860%2C14.951%20211.937%2C13.607%20206.378%2C13.607%20C206.166%2C13.607%20205.569%2C13.586%20205.569%2C12.948%20C205.569%2C12.313%20206.166%2C12.288%20206.378%2C12.288%20C211.937%2C12.288%20213.860%2C10.945%20214.939%2C9.907%20C216.017%2C8.866%20217.414%2C7.018%20217.414%2C1.668%20C217.414%2C1.464%20217.436%2C0.889%20218.099%2C0.889%20C218.757%2C0.889%20218.784%2C1.464%20218.784%2C1.668%20C218.784%2C7.018%20220.181%2C8.866%20221.259%2C9.907%20C222.341%2C10.945%20224.263%2C12.288%20229.820%2C12.288%20C230.031%2C12.288%20230.628%2C12.311%20230.628%2C12.949%20C230.628%2C13.583%20230.031%2C13.607%20229.820%2C13.607%20ZM18.378%2C62.308%20C14.337%2C62.308%2012.939%2C63.287%2012.151%2C64.043%20C11.366%2C64.799%2010.350%2C66.146%2010.350%2C70.037%20C10.350%2C70.187%2010.332%2C70.604%209.852%2C70.604%20C9.368%2C70.604%209.354%2C70.187%209.354%2C70.037%20C9.354%2C66.146%208.338%2C64.799%207.554%2C64.043%20C6.767%2C63.285%205.369%2C62.308%201.326%2C62.308%20C1.171%2C62.308%200.736%2C62.295%200.736%2C61.829%20C0.736%2C61.366%201.171%2C61.349%201.326%2C61.349%20C5.369%2C61.349%206.767%2C60.372%207.554%2C59.616%20C8.338%2C58.859%209.354%2C57.514%209.354%2C53.622%20C9.354%2C53.474%209.368%2C53.055%209.852%2C53.055%20C10.332%2C53.055%2010.350%2C53.474%2010.350%2C53.622%20C10.350%2C57.514%2011.366%2C58.859%2012.151%2C59.616%20C12.939%2C60.372%2014.337%2C61.349%2018.378%2C61.349%20C18.532%2C61.349%2018.966%2C61.365%2018.966%2C61.829%20C18.966%2C62.292%2018.532%2C62.308%2018.378%2C62.308%20Z%22/%3E%0A%3C/svg%3E");
}


/*==================================================
Limit box-sizing to specific sections
================================================== */
.brands_contents *,
.brands_contents *::before,
.brands_contents *::after {
    box-sizing: border-box;
}

/*==================================================
sp
================================================== */

@keyframes spinner {
    0% {
        background-position: -60vw 0;
    }

    100% {
        background-position: 60vw 0;
    }
}

/* ========================================================================
[sp]main_visual
========================================================================= */
.brands_contents .main_visual {
    margin: 0 0 20px;
    height: 93.333333333333333vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: auto 93.333333333333333vw;
    animation: spinner 1.5s infinite;
}

.brands_contents .main_visual .swiper-slide {
    width: 100vw;
    margin: 0;
}

.brands_contents .main_visual .swiper-slide figure img {
    width: 100%;
    height: auto;
}

.brands_contents .swiper-mainvisual-prev {
    display: none;
}

.brands_contents .swiper-mainvisual-next {
    display: none;
}

.brands_contents .main_visual .swiper-pagination-bullet {
    width: 12vw;
    height: 0.8vw;
    border-radius: 0.4vw;
    background: #fff;
    opacity: 1;
}

.brands_contents .main_visual .swiper-pagination-bullet-active {
    background: #00abe4;
    opacity: 1;
}




/* ========================================================================
[sp]notice
========================================================================= */
.brands_contents .notice {
    margin: 0 auto 8.6666666666667vw;
    width: 92vw;
    text-align: center;
    border-bottom: 0.1333333333333vw #dddddd solid;
}

.brands_contents .notice dt {
    margin: 0 0 20px;
    width: 18.6666666666667vw;
    height: 7.333333333333333vw;
    font-size: 3.7333333333333vw;
    font-weight: bold;
    font-weight: 600;
    border: 0.2vw #ccc solid;
    border-radius: 1.0666666666667vw;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.brands_contents .notice_table {
    margin: 0 0 10px;
    border-collapse: collapse;
}

.brands_contents .notice_table th {
    padding: 0 2.6666666666667vw calc(3.2vw - 0.5em) 0;
    font-size: 3.4666666666667vw;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

.brands_contents .notice_table td {
    padding: 0 0 calc(3.2vw - 0.5em);
    font-size: 3.4666666666667vw;
    letter-spacing: -0.05em;
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}

/* ========================================================================
[sp]recommended
========================================================================= */
.brands_contents .recommended {
    margin: 0 0 8vw 4vw;
    padding: 0;
    width: 96vw;
}

.brands_contents .recommended h2 {
    margin: 0 4vw 8vw 0;
    font-size: 6.1333333333333vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}

.brands_contents .recommended .swiper {
    margin: 0 0 5.3333333333333vw 0;
    width: 92vw;
    padding: 0 5.3333333333333vw 0 0;
    position: relative;
}

.brands_contents .recommended .swiper::before {
    content: '';
    width: 6.6666666666667vw;
    width: 2vw;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.brands_contents .recommended .swiper::after {
    content: '';
    width: 6.6666666666667vw;
    width: 2vw;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.brands_contents .recommended .swiper-slide .slide_inner {
    padding: 0 5.3333333333333vw 0 5.3333333333333vw;
    padding: 0;
}

.brands_contents .recommended .swiper-slide {
    margin: 0 0 0 0;
    width: 41.3333333333333vw;
    width: 38.666666666666667vw;
    padding: 2.4vw 0 0 5.3333333333333vw;
}

.brands_contents .recommended .swiper-slide a {
    text-decoration: none;
    color: #0072ef;
    width: 41.3333333333333vw;
    height: 50.6666666666667vw;
    width: 100%;
    display: block;
    background: #fff;
    margin: 0 0 4vw;
    padding: 0 0 0;
    border-radius: 1.6vw;
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.15);
    position: relative;
}

.brands_contents .recommended figure {
    margin: 0 auto;
    width: 100%;
    height: 36vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brands_contents .recommended figure img {
    width: 100%;
    height: 100%;
    max-width: 30.6666666666667vw;
    max-height: 30.6666666666667vw;
}

.brands_contents .recommended .label {
    min-height: 2.8em;
    font-size: 3.7333333333333vw;
    line-height: 1.4;
    font-weight: bold;
    font-weight: 600;
    color: #0072ef;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brands_contents .recommended .lead {
    margin-bottom: 2vw;
    font-size: 4vw;
    font-weight: bold;
    font-weight: 600;
    line-height: 1.4;
    color: #222;
    text-align: center;
}

.brands_contents .recommended .note {
    font-size: 3.4666666666667vw;
    line-height: 1.4;
    color: #222;
    text-align: center;
}

.brands_contents .recommended .swiper-recommended-prev {
    width: 4vw;
    height: 9.3333333333333vw;
    border-radius: 0;
    background: none;
    position: absolute;
    top: 28.666666666666667vw;
    left: 0;
    z-index: 100;
}

.brands_contents .recommended .swiper-recommended-prev::before {
    content: '';
    /* 18px * 30px */
    width: 2.9333333333333vw;
    height: 5.0666666666667vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-prev);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.4vw);
    left: 0;
}

.brands_contents .recommended .swiper-recommended-next {
    width: 4vw;
    height: 9.3333333333333vw;
    border-radius: 0;
    background: none;
    position: absolute;
    top: 28.666666666666667vw;
    right: 0;
    z-index: 100;
}

.brands_contents .recommended .swiper-recommended-next::before {
    content: '';
    /* 18px * 30px */
    width: 2.9333333333333vw;
    height: 5.0666666666667vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-next);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.4vw);
    right: 0;
}

/* ========================================================================
[sp]products
========================================================================= */
.brands_contents .products {
    margin: 0 auto 8vw;
    padding: 0;
    width: 96vw;
}

.brands_contents .products h2 {
    margin: 0 4vw 8vw 0;
    font-size: 6.1333333333333vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}

.brands_contents .products_list {
    margin: 0 auto;
    width: 92vw;
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brands_contents .products_list li {
    margin: 0 0 4vw;
    width: 44vw;
    background: #fff;
    border-radius: 1.6vw;
    box-shadow: 0 0 2vw rgba(0, 0, 0, 0.15);
    padding: 0 0 4.6666666666667vw;
}


.brands_contents .products_list li a {
    text-decoration: none;
    color: #0072ef;
    width: 44vw;
    display: flex;
    flex-direction: column;
    position: relative;
}

.brands_contents .products_list li figure {
    margin: 0 auto;
    width: 100%;
    height: 36vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brands_contents .products_list li figure img {
    width: auto;
    height: auto;
    max-width: 32vw;
    max-height: 30.6666666666667vw;
}

.brands_contents .products_list li h3 {
    margin-bottom: 4vw;
    min-height: 2.8em;
    font-size: 3.7333333333333vw;
    line-height: 1.4;
    font-weight: bold;
    font-weight: 600;
    color: #0072ef;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brands_contents .products_list li .text {
    font-size: 3.4666666666667vw;
    line-height: 1.4;
    color: #222;
    text-align: center;
}





/* ========================================================================
[sp]promotion
========================================================================= */
.brands_contents .promotion {
    margin: 0 auto;
    padding: 8vw 0 8vw;
    width: 100vw;
    background: linear-gradient(to bottom, #eefbf4 0px, #ffffff 13.3333333333333vw, #ffffff 100%);
}

.brands_contents .promotion h2 {
    margin: 0 0 8vw;
    font-size: 6.1333333333333vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}

.brands_contents .promotion h3 {
    margin: 0 4vw 4vw;
    font-size: 4vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}

.brands_contents .promotion p.text {
    margin: 0 4vw 8vw;
    font-size: 3.7333333333333vw;
    text-align: center;
}

.brands_contents .promotion .promotion_list {
    margin: 0 auto;
    width: 92vw;
    list-style: none;
}

.brands_contents .promotion .promotion_list li {
    margin: 0 0 8.6666666666667vw;
}

.brands_contents .promotion .promotion_list li a {
    display: flex;
    justify-content: space-between;
    color: var(--color_main);
    text-decoration: none;
}

.brands_contents .promotion .promotion_list figure {
    width: 45.3333333333333vw;
}

.brands_contents .promotion .promotion_list figure img {
    width: 100%;
    height: auto;
}

.brands_contents .promotion .promotion_list .list_text {
    width: 41.3333333333333vw;
}

.brands_contents .promotion .promotion_list .list_text h4 {
    color: var(--color-link);
}

.brands_contents .promotion .promotion_list .list_text .text {
    margin: 0;
    text-align: left;
}

.brands_contents .promotion .btn_see_more {
    margin: 0 auto;
    width: 70.6666666666667vw;
    height: 10.6666666666667vw;
    border-radius: 5.3333333333333vw;
    background: #009ee0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0.2vw #009ee0 solid;
    position: relative;
    cursor: pointer;
}

.brands_contents .promotion .btn_see_more span {
    font-size: calc(3.4666666666667vw * 1.75);
    transform: scale(0.571);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}


.brands_contents .promotion .btn_see_more::after {
    content: '';
    width: 1.3333333333333vw;
    height: 2.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 1.2vw);
    right: 4vw;
}



/* ========================================================================
[sp]lifestyle_info
========================================================================= */
.brands_contents .lifestyle_info {
    padding: 0 0 8vw;
}

.brands_contents .lifestyle_info .title_wrap {
    height: 22.6666666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom,
            #fff4e8 0%,
            #fff8f1 100%);
}

.brands_contents .lifestyle_info h2 {
    margin: 0;
    font-size: 6.1333333333333vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}

.brands_contents .lifestyle_info .contents_wrap {
    background: linear-gradient(to bottom,
            #fff8f1 0%,
            #fff 100%);
}


.brands_contents .lifestyle_info .swiper {
    margin: 0 auto 5.3333333333333vw;
    padding: 0 6.6666666666667vw;
    position: relative;
}

.brands_contents .lifestyle_info .swiper::before {
    content: '';
    width: 6.6666666666667vw;
    height: 100%;
    background: linear-gradient(to bottom,
            #fff8f1 0%,
            #fff 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.brands_contents .lifestyle_info .swiper::after {
    content: '';
    width: 6.6666666666667vw;
    height: 100%;
    background: linear-gradient(to bottom,
            #fff8f1 0%,
            #fff 100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.brands_contents .lifestyle_info .swiper-slide {
    margin: 0;
    width: 41.3333333333333vw;
}

.brands_contents .lifestyle_info .swiper-slide a {
    text-decoration: none;
    color: #222;
    width: 41.3333333333333vw;
    display: flex;
    flex-direction: column;
}

.brands_contents .lifestyle_info figure {
    margin-bottom: 11.666667vw;
    width: 41.3333333333333vw;
}

.brands_contents .lifestyle_info figure img {
    width: 100%;
    height: auto;
}

.brands_contents .lifestyle_info .category {
    margin-bottom: 2.6666666666667vw;
    width: 20vw;
    height: 6vw;
    border-radius: 3vw;
    font-size: 2.8vw;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brands_contents .lifestyle_info .category.category_tips {
    background: #33aa00;
}

.brands_contents .lifestyle_info .category.category_chat {
    background: #ee6600;
}


.brands_contents .lifestyle_info .label {
    display: flex;
    margin-bottom: 2.6666666666667vw;
}

.brands_contents .lifestyle_info .label_wrapper {
    display: flex;
    order: 2;
    align-items: center;
    position: relative;
}

.brands_contents .lifestyle_info .label_wrapper img {
    position: absolute;
    top: -20.5vw;
}

.brands_contents .lifestyle_info .label .date {
    margin-right: 2.6666666666667vw;
    font-size: 2.9333333333333vw;
    white-space: nowrap;
}

.brands_contents .lifestyle_info .label .author {
    font-size: 2.9333333333333vw;
    white-space: nowrap;
}

.brands_contents .lifestyle_info .text {
    font-size: 3.7333333333333vw;
    line-height: 1.2;
    font-weight: bold;
    order: 1;
    height: 8.6vw;
    margin-bottom: 2vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    box-sizing: content-box;
}

.brands_contents .lifestyle_info .swiper-lifestyle-prev {
    width: 9.3333333333333vw;
    height: 9.3333333333333vw;
    border-radius: 4.6666666666667vw;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 1.0666666666667vw rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 13.3333333333333vw;
    left: 2vw;
    z-index: 100;
}

.brands_contents .lifestyle_info .swiper-lifestyle-prev::before {
    content: '';
    /* 18px * 30px */
    width: 2.4vw;
    height: 4vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-prev);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2vw);
    left: calc(50% - 1.2vw);
}

.brands_contents .lifestyle_info .swiper-lifestyle-next {
    width: 9.3333333333333vw;
    height: 9.3333333333333vw;
    border-radius: 4.6666666666667vw;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 1.0666666666667vw rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 13.3333333333333vw;
    right: 2vw;
    z-index: 100;
}

.brands_contents .lifestyle_info .swiper-lifestyle-next::before {
    content: '';
    /* 18px * 30px */
    width: 2.4vw;
    height: 4vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-next);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2vw);
    left: calc(50% - 1.2vw);
}

.brands_contents .lifestyle_info .btn_see_more {
    margin: 0 auto;
    width: 54.6666666666667vw;
    height: 10.6666666666667vw;
    border-radius: 5.3333333333333vw;
    background: #009ee0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0.2vw #009ee0 solid;
    position: relative;
    cursor: pointer;
}

.brands_contents .lifestyle_info .btn_see_more span {
    font-size: calc(3.4666666666667vw * 1.75);
    transform: scale(0.571);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}


.brands_contents .lifestyle_info .btn_see_more::after {
    content: '';
    width: 1.3333333333333vw;
    height: 2.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 1.2vw);
    right: 4vw;
}


/* ========================================================================
[sp]recently_viewed_products
========================================================================= */
.brands_contents .recently_viewed_products {
    margin: 0 auto;
    padding: 8vw 0 8vw;
    width: 100vw;
    background: #eef8fb;
}

.brands_contents .recently_viewed_products h2 {
    margin: 0 0 8vw;
    font-size: 6.1333333333333vw;
    font-weight: bold;
    font-weight: 600;
    text-align: center;
}


.brands_contents .recently_viewed_products .swiper {
    margin: 0 auto 5.3333333333333vw;
    padding: 0 6.6666666666667vw;
    position: relative;
}

.brands_contents .recently_viewed_products .swiper::before {
    content: '';
    width: 6.6666666666667vw;
    height: 100%;
    background: #eef8fb;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.brands_contents .recently_viewed_products .swiper::after {
    content: '';
    width: 6.6666666666667vw;
    height: 100%;
    background: #eef8fb;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}


.brands_contents .recently_viewed_products .swiper-slide {
    margin: 0;
    width: 41.3333333333333vw;
}

.brands_contents .recently_viewed_products .swiper-slide a {
    text-decoration: underline;
    color: #00abe4;
    width: 41.3333333333333vw;
    display: block;
    background: #fff;
    padding: 2vw 0 5.3333333333333vw;
    text-decoration: none;
}

.brands_contents .recently_viewed_products figure {
    margin: 0 auto 2.6666666666667vw;
    width: 26.6666666666667vw;
    height: 26.6666666666667vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recently_viewed_products figure img {
    width: 100%;
    height: 100%;
    max-width: 26.6666666666667vw;
    max-height: 26.6666666666667vw;
}

.brands_contents .recently_viewed_products .label {
    font-size: 3.4666666666667vw;
    font-weight: bold;
    color: #0072ef;
    text-align: center;
    padding: 0 2.5vw;
    height: 13.5vw;
}

.brands_contents .recently_viewed_products .swiper-recently-viewed-prev {
    width: 9.3333333333333vw;
    height: 9.3333333333333vw;
    border-radius: 4.6666666666667vw;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 1.0666666666667vw rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 22.6666666666667vw;
    left: 2vw;
    z-index: 100;
}

.brands_contents .recently_viewed_products .swiper-recently-viewed-prev::before {
    content: '';
    /* 18px * 30px */
    width: 2.4vw;
    height: 4vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-prev);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2vw);
    left: calc(50% - 1.2vw);
}

.brands_contents .recently_viewed_products .swiper-recently-viewed-next {
    width: 9.3333333333333vw;
    height: 9.3333333333333vw;
    border-radius: 4.6666666666667vw;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0px 0px 1.0666666666667vw rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 22.6666666666667vw;
    right: 2vw;
    z-index: 100;
}

.brands_contents .recently_viewed_products .swiper-recently-viewed-next::before {
    content: '';
    /* 18px * 30px */
    width: 2.4vw;
    height: 4vw;
    background-color: #00abe4;
    -webkit-mask: var(--icon-arrow-next);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2vw);
    left: calc(50% - 1.2vw);
}

/* ========================================================================
[sp]latest_news
========================================================================= */
.brands_contents .latest_news {
    padding: 8vw 0 8vw;
}

.brands_contents .latest_news h2 {
    margin: 0 0 8vw;
    font-size: 6.1333333333333vw;
    line-height: 1;
    font-weight: bold;
    text-align: center;
}

.brands_contents .news_list {
    margin: 0 auto 8vw;
    width: 92vw;
    list-style: none;
}

.brands_contents .news_list li {
    border-bottom: 0.1333333333333vw #dddddd solid;
    padding: 5.3333333333333vw 0;
}

.brands_contents .news_list li:first-child {
    border-top: 0.1333333333333vw #dddddd solid;
}

.brands_contents .news_list li .label {
    display: flex;
    align-items: center;
    margin: 0 0 2.6666666666667vw;
}

.brands_contents .news_list li .label .category {
    width: 26.6666666666667vw;
    height: 6.6666666666667vw;
    border-radius: 3.3333333333333vw;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 2.6666666666667vw 0 0;
    padding: 0;
    position: relative;
}

.brands_contents .news_list li .label .category .text {
    font-size: calc(2.9333333333333vw * 1.75);
    transform: scale(0.571);
    font-weight: bold;
}


.brands_contents .news_list li.bulletin .label .category {
    background: #17a3b0;
    padding: 0 6.4vw 0 0;
}

.brands_contents .news_list li.media .label .category {
    background: #c970df;
}

.brands_contents .news_list li.event .label .category {
    background: #ff4d90;
}

.brands_contents .news_list li.press .label .category {
    background: #159bef;
}

.brands_contents .news_list li.product .label .category {
    background: #ee7100;
}

.brands_contents .news_list li.alert .label .category {
    background: #ff4d4d;
}

.brands_contents .news_list li.membership .label .category {
    background: #13aa5d;
}

.brands_contents .news_list li.other .label .category {
    background: #b38e56;
}

.brands_contents .news_list li .date,
.brands_contents .news_list li .text {
    font-size: 3.4666666666667vw;
}

.brands_contents .news_list li .text a {
    color: #222;
    text-decoration: none;
}

.brands_contents .news_list li.bulletin .label .category::before {
    content: '';
    /* 33px * 36px */
    width: 4.4vw;
    height: 4.8vw;
    background-color: #fff;
    -webkit-mask: var(--icon-bulletin);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.4vw);
    left: 4vw;
}

.brands_contents .news_list li.media .label .category::before {
    content: '';
    /* 35px * 32px */
    width: 4.6666666666667vw;
    height: 4.2666666666667vw;
    background-color: #fff;
    -webkit-mask: var(--icon-media);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.1333333333333vw);
    left: 3.8666666666667vw;
}

.brands_contents .news_list li.event .label .category::before {
    content: '';
    /* 36px * 33px */
    width: 4.8vw;
    height: 4.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-event);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.2vw);
    left: 3.6vw;
}

.brands_contents .news_list li.press .label .category::before {
    content: '';
    /* 40px * 36px */
    width: 5.3333333333333vw;
    height: 4.8vw;
    background-color: #fff;
    -webkit-mask: var(--icon-press);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.4vw);
    left: 3.6vw;
}

.brands_contents .news_list li.product .label .category::before {
    content: '';
    /* 31px * 40px */
    width: 4.1333333333333vw;
    height: 5.3333333333333vw;
    background-color: #fff;
    -webkit-mask: var(--icon-product);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.6666666666667vw);
    left: 4vw;
}

.brands_contents .news_list li.alert .label .category::before {
    content: '';
    /* 31px * 40px */
    width: 4.1333333333333vw;
    height: 5.3333333333333vw;
    background-color: #fff;
    -webkit-mask: var(--icon-alert);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.6666666666667vw);
    left: 4vw;
}

.brands_contents .news_list li.membership .label .category::before {
    content: '';
    /* 31px * 40px */
    width: 4.1333333333333vw;
    height: 5.3333333333333vw;
    background-color: #fff;
    -webkit-mask: var(--icon-membership);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.6666666666667vw);
    left: 4vw;
}

.brands_contents .news_list li.other .label .category::before {
    content: '';
    /* 31px * 40px */
    width: 4.1333333333333vw;
    height: 5.3333333333333vw;
    background-color: #fff;
    -webkit-mask: var(--icon-other);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.6666666666667vw);
    left: 4vw;
}

.brands_contents .latest_news .btn_see_more {
    margin: 0 auto;
    width: 54.6666666666667vw;
    height: 10.6666666666667vw;
    border-radius: 5.3333333333333vw;
    background: #009ee0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0.2vw #009ee0 solid;
    position: relative;
    cursor: pointer;
}

.brands_contents .latest_news .btn_see_more span {
    font-size: calc(3.4666666666667vw * 1.75);
    transform: scale(0.571);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.brands_contents .latest_news .btn_see_more::after {
    content: '';
    width: 1.3333333333333vw;
    height: 2.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 1.2vw);
    right: 4vw;
}

/* ========================================================================
[sp]aside
========================================================================= */
.brands_contents .aside {
    margin: 0;
    padding: 0;
}

/* ========================================================================
[sp]health_subscription
========================================================================= */
.brands_contents .health_subscription {
    margin: 0 auto 8vw;
    padding: 4vw 4vw 5.3333333333333vw;
    width: 92vw;
    background: linear-gradient(to bottom,
            #02a1d0 0%,
            #e7f8ff 27%,
            #e8f8ff 100%);
}

.brands_contents .health_subscription_header {
    margin: 0;
    padding: 4vw 0 7.2vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom,
            #ffffff 0%,
            #ffffff 72%,
            transparent 100%);
}

.brands_contents .health_subscription_header p.label {
    margin: 0 0 3.3333333333333vw;
    font-size: 4.2666666666667vw;
    font-weight: bold;
    color: #00938e;
    text-align: center;
}

.brands_contents .health_subscription_header h2 {
    margin: 0 0 3.7333333333333vw;
    font-size: 6.5333333333333vw;
    font-weight: bold;
    color: #00a0d0;
    text-align: center;
    display: inline;
    padding-left: 0;
    position: relative;
}

.brands_contents .health_subscription_header h2::before {
    content: '';
    width: 11.733333333333333vw;
    height: 10.6666666666667vw;
    background: url(../img/suntory/top/icon_cart_star.svg) no-repeat center;
    background-size: 11.733333333333333vw auto;
    position: absolute;
    top: calc(50% - 5.3333333333333vw);
    left: -20vw;
}

.brands_contents .health_subscription_header h2::after {
    content: '';
    width: 10.6666666666667vw;
    height: 8.6666666666667vw;
    background-color: #00bbff;
    -webkit-mask: var(--icon-truck);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 4.333333333333333vw);
    right: -18.2666666666667vw;
}

.brands_contents .health_subscription_header .msg {
    margin: 0;
    font-size: 4.6666666666667vw;
    font-weight: bold;
    color: #ff6600;
    text-align: center;
}

.brands_contents .feature_container {
    margin: 0 auto 4vw;
    width: 84vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.brands_contents .feature_container .feature01 dt,
.brands_contents .feature_container .feature02 dt,
.brands_contents .feature_container .feature03 dt,
.brands_contents .feature_container .feature04 dt {
    width: 11.3333333333333vw;
    height: 5.3333333333333vw;
    background-color: #00aa99;
    -webkit-mask: var(--icon-ribbon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6666666666667vw;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.brands_contents .feature_container .feature01 {
    margin: 0 0 1.3333333333333vw;
    padding: 2.6666666666667vw 0 0;
    width: 41.3333333333333vw;
    height: 16vw;
    background: #fff;
    position: relative;
}

.brands_contents .feature_container .feature01::before {
    content: '';
    width: 32.933333333333333vw;
    height: 9.3333333333333vw;
    background-color: #00dd55;
    -webkit-mask: var(--icon-sparkle);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: 2.1333333333333vw;
    left: 3.3333333333333vw;
}

.brands_contents .feature_container .feature01 .text01 {
    margin: 0 0 1.3333333333333vw;
    font-size: 3.7333333333333vw;
    line-height: 1;
    color: #00aa99;
    font-weight: bold;
    text-align: center;
}

.brands_contents .feature_container .feature01 .text02 {
    margin: 0;
    font-size: 3.7333333333333vw;
    color: #00a0d0;
    font-weight: bold;
    text-align: center;
}

.brands_contents .feature_container .feature01 .number {
    margin: 0 2.4vw 0 1.3333333333333vw;
    font-size: 7.066666666666667vw;
    font-family: Avenir, "Helvetica Neue", Arial, sans-serif;
    color: #00a0d0;
    font-weight: bold;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
}

.brands_contents .feature_container .feature01 .text03 {
    font-size: 3.7333333333333vw;
    color: #00a0d0;
    font-weight: bold;
}

.brands_contents .feature_container .feature02 {
    margin: 0 0 1.3333333333333vw;
    width: 41.3333333333333vw;
    height: 16vw;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.brands_contents .feature_container .feature02::after {
    content: '';
    width: 9.3333333333333vw;
    height: 9.466666666666667vw;
    background: url(../img/suntory/top/icon_point_sparkle.webp) no-repeat 0 0;
    background-size: 9.3333333333333vw auto;
    position: absolute;
    top: -1.3333333333333vw;
    left: 31.6vw;
}

.brands_contents .feature_container .feature03 {
    margin: 0;
    width: 41.3333333333333vw;
    height: 16vw;
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.brands_contents .feature_container .feature02 .text01,
.brands_contents .feature_container .feature03 .text01 {
    margin-bottom: 2.6666666666667vw;
    font-size: 3.0666666666667vw;
    color: #00aa99;
    font-weight: bold;
    text-align: center;
}

.brands_contents .feature_container .feature02 .text02,
.brands_contents .feature_container .feature03 .text02 {
    font-size: 3.7333333333333vw;
    color: #00a0d0;
    font-weight: bold;
}

.brands_contents .feature_container .feature03 {
    margin: 0 0 2.6666666666667vw;
    width: 41.3333333333333vw;
    height: 16vw;
    background: #fff;
    position: relative;
    box-shadow: 0px 0 1.3333333333333vw rgba(0, 158, 224, 0.15);
}

.brands_contents .feature_container .feature03::after {
    content: '';
    width: 6.4vw;
    height: 8.6666666666667vw;
    background: url(../img/suntory/top/img_feature03.webp) no-repeat 0 0;
    background-size: 6.4vw auto;
    position: absolute;
    top: 3.6vw;
    left: 32.533333333333333vw;
}

.brands_contents .feature_container .feature04 {
    margin: 0;
    width: 41.3333333333333vw;
    height: 16vw;
    background: #fff;
    position: relative;
}

.brands_contents .feature_container .feature04 dd {
    width: 41.3333333333333vw;
    height: 16vw;
    position: absolute;
    top: 0;
    left: 0;
}

.brands_contents .feature_container .feature04 p {
    padding-bottom: 2.6666666666667vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 3.7333333333333vw;
    color: #00a0d0;
    font-weight: bold;
    width: 41.3333333333333vw;
    height: 16vw;
    position: absolute;
    top: 0;
    left: 0;
}

.brands_contents .feature_container .feature04::before {
    content: '';
    width: 4vw;
    height: 4.2666666666667vw;
    background-color: #00938e;
    -webkit-mask: var(--icon-present);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: 3.2vw;
    left: 13.733333333333333vw;
}

.brands_contents .feature_container .feature04::after {
    content: '';
    width: 4.4vw;
    height: 5.0666666666667vw;
    background-color: #00938e;
    -webkit-mask: var(--icon-cake);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: 2.1333333333333vw;
    left: 19.3333333333333vw;
}

.brands_contents .feature_container .feature04 dd::before {
    content: '';
    width: 5.0666666666667vw;
    height: 5.2vw;
    background-color: #00938e;
    -webkit-mask: var(--icon-box);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: 2.4vw;
    left: 24.666666666666667vw;
}

.brands_contents .feature_container .feature04 dd::after {
    content: '';
    width: 4.4vw;
    height: 4.2666666666667vw;
    background-color: #00938e;
    -webkit-mask: var(--icon-crown);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: 3.0666666666667vw;
    left: 30.8vw;
}

.brands_contents .health_subscription_footer {
    position: relative;
}

.brands_contents .health_subscription_footer::before {
    content: '';
    width: 0.4vw;
    height: 13.066666666666667vw;
    background: #00938e;
    position: absolute;
    top: 0;
    left: 13.3333333333333vw;
    transform-origin: top;
    transform: rotate(-25deg);
}

.brands_contents .health_subscription_footer::after {
    content: '';
    width: 0.4vw;
    height: 13.066666666666667vw;
    background: #00938e;
    position: absolute;
    top: 0;
    right: 13.3333333333333vw;
    transform-origin: top;
    transform: rotate(25deg);
}

.brands_contents .health_subscription_footer .msg01 {
    margin: 0 0 2vw;
    font-size: 4.5333333333333vw;
    line-height: 1;
    font-weight: bold;
    color: #00938e;
    text-align: center;
}

.brands_contents .health_subscription_footer .msg02 {
    margin: 0 0 2.6666666666667vw;
    font-size: 4.8vw;
    line-height: 1;
    font-weight: bold;
    color: #ff6600;
    text-align: center;
}

.brands_contents .health_subscription_footer .btn_more a {
    margin: 0 auto;
    width: 54.6666666666667vw;
    height: 10.6666666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #009ee0;
    font-size: 4vw;
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 5.3333333333333vw;
    position: relative;
}

.brands_contents .health_subscription_footer .btn_more a::before {
    content: '';
    width: 1.3333333333333vw;
    height: 2.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 1.2vw);
    right: 4vw;
}

/* ========================================================================
[sp]banners
========================================================================= */
.brands_contents .banners {
    margin: 0 auto 8vw;
    width: 92vw;
    border-bottom: 0.2666666666667vw #dddddd solid;
}

.brands_contents .banner_list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.brands_contents .banner_list li {
    margin-bottom: 8vw;
    width: 44vw;
}

.brands_contents .banner_list li a {
    text-decoration: none;
    color: var(--color_main);
}

.brands_contents .banner_list figure {
    margin: 0 0 4vw;
    width: 44vw;
}

.brands_contents .banner_list figure img {
    width: 100%;
    height: auto;
}

.brands_contents .banner_list h3 {
    margin: 0 0 4vw;
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
    font-weight: 600;
    color: var(--color-link);
}

.brands_contents .banner_list a p {
    font-size: 3.4666666666667vw;
    line-height: 1.5;
    color: var(--color_main);
    text-align: center;
}



/* ========================================================================
[sp]extra
========================================================================= */
.brands_contents .extra {
    margin: 0 auto;
    width: 92vw;
}

.brands_contents .extra_list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.brands_contents .extra_list li {
    margin-bottom: 6.6666666666667vw;
    width: 44vw;
}

.brands_contents .extra_list li a {
    text-decoration: none;
}

.brands_contents .extra_list li figure {
    margin: 0 0 4vw;
    width: 44vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: auto 93.333333333333333vw;
    animation: spinner 1.5s infinite;
}

.brands_contents .extra_list li figure img {
    width: 100%;
    height: auto;
}

.brands_contents .extra_list li a h3 {
    margin: 0 0 2.6666666666667vw;
    font-size: 3.7333333333333vw;
    font-weight: bold;
    font-weight: 600;
    color: #0072ef;
}

.brands_contents .extra_list li a p {
    font-size: 3.7333333333333vw;
    line-height: 1.428571428571429;
    color: #222222;
}

/* ========================================================================
    [pc]health_div
    ========================================================================= */
.health_div {
    margin-bottom: 0;
}

.health_div .health_div_title {
    padding: 5vw 5vw 3vw 5vw;
    background: linear-gradient(to right, rgba(0, 184, 234, 1) 0%, rgba(0, 158, 224, 1) 100%);
    text-align: center;
    color: #fff
}

.health_div .health_div_title .label {
    display: flex;
    justify-content: space-between;
    width: fit-content;
    margin: auto;
    gap: 4vw;
}

.health_div .health_div_title .label p {
    font-size: 4.3vw;
    font-weight: 600;
}

.health_div .health_div_title h2 {
    position: relative;
    font-size: 6vw;
    text-align: center;
    margin-top: 1vw;
}

.health_div .health_div_title h2 b {
    position: absolute;
    font-size: 2.4vw;
    color: #089dde;
    right: 1vw;
    top: -2.2vw;
    font-weight: bold;
}

.health_div .health_div_title h2:after {
    position: absolute;
    content: "";
    background: url(/top/img/icon_cart_star.svg)no-repeat;
    background-size: 100% auto;
    width: 13vw;
    height: 14vw;
    left: 0;
    top: -7vw;
}

.health_div .health_div_title h2:before {
    position: absolute;
    content: "";
    background: url(/top/img/icon_track_sp.svg)no-repeat;
    background-size: 100% auto;
    width: 13vw;
    height: 11vw;
    right: 0;
    top: -5vw;
}

.health_div_content {
    background: #eaf8ff;
    padding: 14px 20px 24px 20px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6vw
}

.health_div_content .msg {
    color: #ff5500;
    text-align: center;
    font-weight: 700;
    font-size: 5.5vw;
    width: 100%;
}

.health_div_content .msg2 {
    color: #00ad9c;
    text-align: center;
    font-weight: 600;
    font-size: 5vw;
    width: 100%;
}

.health_div_content .box {
    background: #fff;
    margin-top: 4vw;
    padding: 2vw 3vw 3vw 3vw;
    position: relative;
    text-align: center;
    width: 100%;
}

.health_div_content .box:nth-child(3),
.health_div_content .box:nth-child(4) {
    width: 48%;
}

.giftbox:before {
    position: absolute;
    content: "";
    width: 8vw;
    height: 11vw;
    background: url(/top/assets/img/suntory/top/img_feature03.webp)no-repeat;
    background-size: auto 100%;
    right: 1vw;
}

.health_div_content .box:nth-child(3) {
    margin-right: 4%;
}

.health_div_content .box dt {
    position: absolute;
    background: #00ac9b;
    color: #fff;
    font-weight: bold;
    padding: 1.2vw 2vw;
    border-radius: 21px;
    font-size: 3vw;
    left: -2vw;
    top: -2vw;
}

.health_div_content .box dd p.text01 {
    color: #00ac9b;
    font-weight: bold;
    font-size: 5vw;
    padding-bottom: 1vw;
}

.health_div_content .box dd .text02 {
    color: #089dde;
    font-weight: bold;
    font-size: 5vw;
    padding-top: 1.8vw;
}

.health_div_content .box dd .text03 {
    color: #089dde;
    font-weight: bold;
    font-size: 5vw;
    display: inline;
}

.health_div_content .box dd .text03 br {
    display: none
}

.health_div_content .box dd .number {
    color: #089dde;
    font-weight: bold;
    font-size: 8vw;
    font-family: "arial";
    padding: 0;
}

.health_div_content .box dd .giftbox {
    position: relative;
    padding-bottom: 4px;
}

.health_div_content .box dd .giftbox:before {
    position: absolute;
    content: "";
    width: 43px;
    height: 46px;
    background: url(/img/goods/common/img_benefit02.png)no-repeat;
    background-size: auto 100%;
    bottom: 3px;
    right: -11px;
}

.health_div_content .box .box4 {
    display: flex;
    gap: 1.2vw;
    margin-top: 3vw;
}

.health_div_content .box .box4 div {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2vw;
}

.health_div_content .box .box4>div:nth-child(odd) {
    background: #eaf8ff;
    padding: 3vw 0;
}

.health_div_content .box .box4>div:nth-child(even) {
    background: #fff9eb;
    padding: 3vw 0;
}

.health_div_content .box .box4 div:nth-child(1) {
    flex: 1;
}

.health_div_content .box .box4 div:nth-child(2) {
    flex: 0.9
}

.health_div_content .box .box4 div:nth-child(3) {
    flex: 1.2
}

.health_div_content .box .box4 div:nth-child(4) {
    flex: 0.9
}

.health_div_content .box .box4 div:nth-child(4) .img img {
    height: 14vw;
    margin-top: -4vw;
    margin-right: -2vw;
}

.health_div_content .box .box4 div .img {
    display: flex;
    justify-content: center;
    margin-bottom: 1vw;
}

.health_div_content .box .box4 div .img img {
    height: 10vw;
    margin-top: 0;
    margin-right: 0;
}

.health_div_content .box .box4 div p {
    font-size: 3vw;
    white-space: nowrap;
    line-height: 1.2;
    color: #089dde;
    font-weight: bold;
    height: 4.3vw;
    display: flex;
    align-items: center;
}

.health_div_content .box .orange_box {
    display: flex;
    background: #fff9eb;
    margin-top: 10px;
    margin-bottom: 34px;
    padding: 3vw 5vw 5vw 16%;
    position: relative;
    justify-content: space-between;
}

.health_div_content .box .orange_box:before {
    position: absolute;
    content: "\2715";
    font-size: 5vw;
    font-weight: bold;
    left: 50%;
    top: 2.5vw;
    color: #089dde;
    transform: translateX(-50%);
}

.health_div_content .box .orange_box p {
    color: #089dde;
    font-size: 4.5vw;
    font-weight: bold;
}

.health_div_content .box .orange_box p br {
    display: none
}

.health_div_content .box .orange_box div {
    position: absolute;
    bottom: -8vw;
    padding: 2.5vw 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    background: linear-gradient(to right, rgba(255, 34, 0, 1) 0%, rgba(255, 85, 0, 1) 28%, rgba(255, 85, 0, 1) 71%, rgba(255, 34, 0, 1) 100%);
    color: #fff;
    box-shadow: #ff25007a 0px 2px 4px 1px;
    font-size: 4vw;
    font-weight: bold;
}

.health_div_content .box .orange_box div:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 100%;
    top: 0;
    right: -5px;
    clip-path: polygon(100% 0%, 0 50%, 100% 100%, 0% 100%, 0% 0%);
    background: #ff2500;
}

.health_div_content .box .orange_box div:before {
    position: absolute;
    content: "";
    width: 6px;
    height: 100%;
    top: 0;
    left: -5px;
    clip-path: polygon(0% 0, 100% 50%, 0% 100%, 100% 100%, 100% 50%, 100% 0);
    background: #ff2500;
}

.health_div_content .health_div_footer {
    text-align: center;
    margin: 5vw auto 4vw auto;
    position: relative;
    width: 66%;
}

.health_div_content .health_div_footer:before {
    position: absolute;
    content: "";
    width: 2px;
    height: 15vw;
    background: #00ac9b;
    transform: rotate(340deg);
    left: 0;
    top: 0
}

.health_div_content .health_div_footer:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 15vw;
    background: #00ac9b;
    transform: rotate(13deg);
    right: 0;
    top: 0
}

.health_div_content .health_div_footer .msg01 {
    color: #00ac9b;
    font-size: 4.5vw;
    font-weight: bold;
}

.health_div_content .health_div_footer .msg02 {
    color: #FF5722;
    font-size: 6.5vw;
    font-weight: bold;
}

.health_div_content .health_div_footer .btn_more {
    margin-top: 20px
}

.health_div_content .health_div_footer .btn_more a {
    margin: 0 auto;
    width: 54.6666666666667vw;
    height: 10.6666666666667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #009ee0;
    font-size: 4vw;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 5.3333333333333vw;
    position: relative;
}

.health_div_content .health_div_footer .btn_more a:hover {
    background: #0088cc;
}

.health_div_content .health_div_footer .btn_more a:before {
    content: '';
    width: 1.3333333333333vw;
    height: 2.4vw;
    background-color: #fff;
    -webkit-mask: var(--icon-arrow-link);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 1.2vw);
    right: 4vw;
}


/*==================================================
pc
================================================== */
@media print,
screen and (min-width:768px) {

    @keyframes spinner {
        0% {
            background-position: -400px 0;
        }

        100% {
            background-position: 400px 0;
        }
    }

    /* ========================================================================
    [pc]main_visual
    ========================================================================= */
    .brands_contents .main_visual {
        margin: 0 auto 30px;
        overflow: hidden;
        width: 100%;
        height: 360px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: auto 360px;
        animation: spinner 1.5s infinite;
        position: relative;
    }

    .brands_contents .main_visual .main_visual_inner {
        width: 2850px;
        height: 360px;
        position: absolute;
        top: 0;
        left: calc(50% - 1425px);
    }

    .brands_contents .main_visual .swiper {
        position: relative;
    }

    .brands_contents .main_visual .overlay-left {
        width: 950px;
        height: 360px;
        background: rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        pointer-events: none;
    }

    .brands_contents .main_visual .overlay-right {
        width: 950px;
        height: 360px;
        background: rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        pointer-events: none;
    }

    .brands_contents .main_visual .swiper-slide {
        width: 950px;
        height: 360px;
        overflow: hidden;
        margin: 0;
    }

    .brands_contents .swiper-mainvisual-prev {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        z-index: 100;
        top: calc(50% - 30px);
        left: calc(50% - 505px);
    }

    .brands_contents .swiper-mainvisual-prev::before {
        content: '';
        /* 18px * 30px */
        width: 14px;
        height: 24px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-prev);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        left: calc(50% - 7px);
    }

    .brands_contents .swiper-mainvisual-next {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        z-index: 100;
        top: calc(50% - 30px);
        right: calc(50% - 505px);
    }

    .brands_contents .swiper-mainvisual-next::before {
        content: '';
        /* 18px * 30px */
        width: 14px;
        height: 24px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-next);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        left: calc(50% - 7px);
    }

    .brands_contents .main_visual .swiper-pagination {
        position: absolute;
        z-index: 10;
        top: auto;
        bottom: 10px;
        text-align: center;
    }

    .brands_contents .main_visual .swiper-pagination-bullet {
        position: relative;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: #d8d8d8;
        opacity: 1;
    }

    .brands_contents .main_visual .swiper-pagination-bullet-active {
        background: #00abe4;
        opacity: 1;
    }

    /* ========================================================================
    [pc]container
    ========================================================================= */
    .brands_contents .container {
        display: grid;
        grid-template-columns: 890px 50px 220px;
        grid-template-rows: auto;
        width: 1160px;
        margin: 0 auto;
        overflow: hidden;
    }

    /* ========================================================================
    [pc]contents_group01
    ========================================================================= */
    .brands_contents .contents_group01 {
        width: 890px;
        grid-column: 1;
        grid-row: 1;
    }

    /* ========================================================================
    [pc]contents_group02
    ========================================================================= */
    .brands_contents .contents_group02 {
        width: 890px;
        grid-column: 1;
        grid-row: 3;
    }

    /* ========================================================================
    [pc]notice
    ========================================================================= */
    .brands_contents .notice {
        margin: 0 auto 60px;
        width: 890px;
        text-align: center;
        border-bottom: 1px #dddddd solid;
    }

    .brands_contents .notice dl {
        display: flex;
    }

    .brands_contents .notice dt {
        margin: 0 35px 0 15px;
        width: 90px;
        height: 40px;
        font-size: 15px;
        font-weight: bold;
        font-weight: 600;
        border: 1px #ccc solid;
        border-radius: 5px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .brands_contents .notice dd {
        width: 750px;
    }

    .brands_contents .notice_table {
        margin: 0 0 10px;
        border-collapse: collapse;
    }

    .brands_contents .notice_table th {
        padding: 0 30px calc(15px - 0.5em) 0;
        font-size: 15px;
        font-weight: normal;
        text-align: left;
        vertical-align: top;
    }

    .brands_contents .notice_table td {
        padding: 0 0 calc(15px - 0.5em);
        font-size: 15px;
        letter-spacing: -0.05em;
        font-weight: normal;
        text-align: left;
        vertical-align: top;
    }

    /* ========================================================================
    [pc]recommended
    ========================================================================= */
    .brands_contents .recommended {
        margin: 0 0 60px 0;
        padding: 0;
        width: 890px;
    }

    .brands_contents .recommended h2 {
        margin: 0 0 60px;
        font-size: 34px;
        font-weight: bold;
        font-weight: 600;
        text-align: center;
    }

    .brands_contents .recommended .swiper {
        margin: 0 auto;
        width: 870px;
        padding: 10px 0 0 30px;
        position: relative;
    }

    .brands_contents .recommended .swiper::before {
        content: '';
        width: 15px;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .brands_contents .recommended .swiper::after {
        content: '';
        width: 15px;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .brands_contents .recommended .swiper-slide .slide_inner {
        padding: 0;
    }

    .brands_contents .recommended .swiper-slide {
        margin: 0 0 0 0;
        width: 210px;
        padding: 0;
        box-sizing: border-box;
    }

    .brands_contents .recommended .swiper-slide a {
        text-decoration: none;
        color: #0072ef;
        width: 180px;
        height: 230px;
        display: block;
        background: #fff;
        margin: 0 0 20px;
        padding: 0;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .recommended .swiper-slide a:hover {
        transform: scale(1.0581);
    }

    .brands_contents .recommended figure {
        margin: 0 auto;
        width: 180px;
        height: 165px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .brands_contents .recommended figure img {
        width: 100%;
        height: 100%;
        max-width: 120px;
        max-height: 120px;
    }

    .brands_contents .recommended .label {
        margin: 0 0 10px;
        width: 180px;
        min-height: 2.8em;
        font-size: 17px;
        line-height: 1.4;
        font-weight: bold;
        font-weight: 600;
        color: #0072ef;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brands_contents .recommended .lead {
        margin: 0 0 10px;
        width: 180px;
        font-size: 16px;
        font-weight: bold;
        font-weight: 600;
        line-height: 1.4;
        color: #222;
        text-align: center;
    }

    .brands_contents .recommended .note {
        margin: 0;
        width: 180px;
        font-size: 14px;
        line-height: 1.4;
        color: #222;
        text-align: center;
		white-space: nowrap
    }

    .brands_contents .recommended .swiper-recommended-prev {
        width: 14px;
        height: 30px;
        border-radius: 0;
        background: none;
        position: absolute;
        top: 132px;
        left: 0;
        z-index: 100;
    }

    .brands_contents .recommended .swiper-recommended-prev::before {
        content: '';
        /* 18px * 30px */
        width: 14px;
        height: 24px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-prev);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
    }

    .brands_contents .recommended .swiper-recommended-next {
        width: 14px;
        height: 30px;
        border-radius: 0;
        background: none;
        position: absolute;
        top: 132px;
        right: 0;
        z-index: 100;
    }

    .brands_contents .recommended .swiper-recommended-next::before {
        content: '';
        /* 18px * 30px */
        width: 14px;
        height: 24px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-next);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        right: 0;
    }

    .brands_contents .recommended .swiper-slide a .badge {
        position: absolute;
        top: -10px;
        right: -20px;
    }

    .brands_contents .recommended .swiper-slide a .badge img {
        max-width: 75px;
        max-height: 75px;
    }


    /* ========================================================================
    [pc]products
    ========================================================================= */
    .brands_contents .products {
        margin: 0 0 60px 0;
        padding: 0;
        width: 890px;
    }

    .brands_contents .products h2 {
        margin: 0 0 60px;
        font-size: 34px;
        font-weight: bold;
        font-weight: 600;
        text-align: center;
    }

    .brands_contents .products_list {
        margin: 0 auto;
        padding: 0 10px;
        width: 910px;
        list-style: none;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .brands_contents .products_list li {
        margin: 0 30px 30px 0;
        width: 200px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        padding: 0 0 30px;
    }

    .brands_contents .products_list li:nth-child(4n) {
        margin: 0 0 30px 0;
    }

    .brands_contents .products_list li a {
        text-decoration: none;
        color: #0072ef;
        width: 200px;
        display: flex;
        flex-direction: column;

        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .products_list li a:hover {
        transform: scale(1.0581);
    }

    .brands_contents .products_list li figure {
        margin: 0 auto;
        width: 200px;
        height: 165px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .brands_contents .products_list li figure img {
        width: auto;
        height: auto;
        max-width: 140px;
        max-height: 120px;
    }

    .brands_contents .products_list li h3 {
        margin-bottom: 40px;
        min-height: 2.8em;
        font-size: 17px;
        line-height: 1.4;
        font-weight: bold;
        font-weight: 600;
        color: #0072ef;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brands_contents .products_list li .text {
        font-size: 15px;
        line-height: 1.4;
        color: #222;
        text-align: center;
    }

    /* ========================================================================
    [pc]promotion
    ========================================================================= */
    .brands_contents .promotion {
        margin: 0 0 60px;
        padding: 60px 0 0;
        width: 890px;
        background: linear-gradient(to bottom, #eefbf4 0px, #ffffff 90px, #ffffff 100%);

    }

    .brands_contents .promotion h2 {
        margin: 0 0 40px;
        font-size: 34px;
        font-weight: bold;
        font-weight: 600;
        text-align: center;
    }

    .brands_contents .promotion h3 {
        margin: 0 30px 15px;
        font-size: 20px;
        font-weight: bold;
        font-weight: 600;
        text-align: center;
    }

    .brands_contents .promotion p.text {
        margin: 0 30px 40px;
        font-size: 16px;
        text-align: center;
    }

    .brands_contents .promotion .promotion_list {
        margin: 0 0 50px;
        width: 890px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    .brands_contents .promotion .promotion_list li {
        margin: 0 25px 0 0;
        width: 280px;
    }

    .brands_contents .promotion .promotion_list li:nth-child(3n) {
        margin: 0 0 0 0;
    }

    .brands_contents .promotion .promotion_list li a {
        display: block;
        color: var(--color_main);
        text-decoration: none;
    }

    .brands_contents .promotion .promotion_list li a:hover {
        text-decoration: underline;
    }

    .brands_contents .promotion .promotion_list figure {
        margin: 0 0 20px;
        width: 280px;
    }

    .brands_contents .promotion .promotion_list figure img {
        width: 100%;
        height: auto;
    }

    .brands_contents .promotion .promotion_list .list_text {
        width: 280px;
    }

    .brands_contents .promotion .promotion_list .list_text h4 {
        margin: 0 0 20px;
        color: var(--color-link);
    }

    .brands_contents .promotion .promotion_list li a:hover .list_text h4 {
        text-decoration: underline;
        text-decoration-color: var(--color-link);
    }

    .brands_contents .promotion .promotion_list .list_text .text {
        margin: 0;
        text-align: left;
    }

    .brands_contents .promotion .btn_see_more {
        margin: 0 auto;
        width: 320px;
        height: 50px;
        border-radius: 25px;
        background: #009ee0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: 1px #009ee0 solid;
        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .promotion .btn_see_more span {
        font-size: calc(18px * 1.75);
        transform: scale(0.571);
        font-weight: bold;
        line-height: 1;
    }

    .brands_contents .promotion .btn_see_more::after {
        content: '';
        width: 7px;
        height: 12px;
        background-color: #fff;
        -webkit-mask: var(--icon-arrow-link);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 6px);
        right: 20px;
    }

    .brands_contents .promotion .btn_see_more:hover {
        background: #0088cc;
        color: #fff;
        border: 1px #0088cc solid;
    }

    .brands_contents .promotion .btn_see_more:hover::after {
        background-color: #fff;
    }


    /* ========================================================================
    [pc]lifestyle_info
    ========================================================================= */
    .brands_contents .lifestyle_info {
        padding: 0 0 60px;
        position: relative;
    }

    .brands_contents .lifestyle_info .title_wrap {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom,
                #fff4e8 0%,
                #fff8f1 100%);
    }

    .brands_contents .lifestyle_info h2 {
        font-size: 40px;
        line-height: 1;
        font-weight: bold;
        text-align: center;
    }

    .brands_contents .lifestyle_info .contents_wrap {
        background: linear-gradient(to bottom,
                #fff8f1 0%,
                #fff 100%);
    }

    .brands_contents .lifestyle_info .swiper {
        margin: 0 0 50px 0;
        width: 890px;
        padding: 0 0 0 30px;
        position: relative;
    }

    .brands_contents .lifestyle_info .swiper::before {
        content: '';
        width: 30px;
        height: 100%;
        background: linear-gradient(to bottom,
                #fff8f1 0%,
                #fff 100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .brands_contents .lifestyle_info .swiper::after {
        content: '';
        width: 30px;
        height: 100%;
        background: linear-gradient(to bottom,
                #fff8f1 0%,
                #fff 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .brands_contents .lifestyle_info .swiper-slide {
        margin: 0;
        width: 260px;
    }

    .brands_contents .lifestyle_info .swiper-slide a {
        text-decoration: none;
        color: #222;
        width: 260px;
        display: flex;
        flex-direction: column;
    }

    .brands_contents .lifestyle_info figure {
        margin-bottom: 12px;
        width: 260px;
        order: 0;
    }

    .brands_contents .lifestyle_info figure img {
        width: 100%;
        height: auto;
    }

    .brands_contents .lifestyle_info .label_wrapper {
        display: flex;
        order: 2;
        align-items: center;
        gap: 2px;
    }

    .brands_contents .lifestyle_info .label_wrapper img {
        position: relative;
        top: 0;
        width: fit-content;
    }

    .brands_contents .lifestyle_info .category {
        margin: 0 0 15px 0;
        width: 100px;
        height: 30px;
        border-radius: 15px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brands_contents .lifestyle_info .category.category_tips {
        background: #33aa00;
    }

    .brands_contents .lifestyle_info .category.category_chat {
        background: #ee6600;
    }

    .brands_contents .lifestyle_info .label {
        display: flex;
        margin-bottom: 0;
    }

    .brands_contents .lifestyle_info .label .date {
        margin: 0 3px 0 0;
        font-size: 14px;
    }

    .brands_contents .lifestyle_info .label .author {
        font-size: 14px;
    }

    .brands_contents .lifestyle_info .text {
        margin: 0 0 6px;
        font-size: 16.25px;
        line-height: 1.357142857142857;
        font-weight: bold;
        order: 1;
        height: 46px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
        -webkit-line-clamp: 2;
        word-break: break-all;
    }

    .brands_contents .lifestyle_info a:hover .text {
        text-decoration: underline;
    }

    .brands_contents .lifestyle_info .swiper-lifestyle-prev {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 65px;
        left: 5px;
        z-index: 100;
    }

    .brands_contents .lifestyle_info .swiper-lifestyle-prev::before {
        content: '';
        width: 14px;
        height: 23px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-prev);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: calc(50% - 7px);
    }

    .brands_contents .lifestyle_info .swiper-lifestyle-next {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 65px;
        right: 5px;
        z-index: 100;
    }

    .brands_contents .lifestyle_info .swiper-lifestyle-next::before {
        content: '';
        width: 14px;
        height: 23px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-next);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: calc(50% - 7px);
    }

    .brands_contents .lifestyle_info .btn_see_more {
        margin: 0 auto;
        width: 320px;
        height: 50px;
        border-radius: 25px;
        background: #009ee0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: 1px #009ee0 solid;
        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .lifestyle_info .btn_see_more span {
        font-size: calc(18px * 1.75);
        transform: scale(0.571);
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
    }

    .brands_contents .lifestyle_info .btn_see_more::after {
        content: '';
        width: 7px;
        height: 12px;
        background-color: #fff;
        -webkit-mask: var(--icon-arrow-link);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 6px);
        right: 20px;
    }

    .brands_contents .lifestyle_info .btn_see_more:hover {
        background: #0088cc;
        color: #fff;
        border: 1px #0088cc solid;
    }

    .brands_contents .lifestyle_info .btn_see_more:hover::after {
        background-color: #fff;
    }

    /* ========================================================================
    [pc]recently_viewed_products
    ========================================================================= */
    .brands_contents .recently_viewed_products {
        width: 890px;
        padding: 60px 0 45px;
        background: #eef8fb;
    }

    .brands_contents .recently_viewed_products h2 {
        margin: 0 0 60px;
        font-size: 40px;
        line-height: 1;
        font-weight: bold;
        text-align: center;
    }

    .brands_contents .recently_viewed_products .swiper {
        margin: 0 auto;
        padding: 15px 35px 15px;
        width: 890px;
        position: relative;
    }

    .brands_contents .recently_viewed_products .swiper::before {
        content: '';
        width: 20px;
        height: 100%;
        background: #eef8fb;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .brands_contents .recently_viewed_products .swiper::after {
        content: '';
        width: 44px;
        height: 100%;
        background: linear-gradient(to left, #eef8fb 95%, transparent 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .brands_contents .recently_viewed_products .swiper-slide {
        margin: 0;
        width: 190px;
    }

    .brands_contents .recently_viewed_products .swiper-slide a {
        text-decoration: underline;
        color: #0072ef;
        width: 190px;
        display: block;
        background: #fff;
        padding: 0 0 35px;
        box-shadow: 0px 0px 10px rgba(91, 194, 220, 0.25);
        transition: var(--transition-normal);
        text-decoration: none;
    }

    .brands_contents .recently_viewed_products .swiper-slide-prev a {
        box-shadow: none;
    }

    .brands_contents .recently_viewed_products .swiper-slide a:hover {
        transform: scale(1.0581);
    }

    .brands_contents .recently_viewed_products figure {
        margin: 0 auto;
        width: 190px;
        height: 190px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .brands_contents .recently_viewed_products figure img {
        width: 100%;
        height: 100%;
        max-width: 148px;
        max-height: 148px;
    }


    .brands_contents .recently_viewed_products .label {
        font-size: 15px;
        font-weight: bold;
        color: #0072ef;
        text-align: center;
        text-decoration: none;
        padding: 0 10px;
        height: 45px;
    }


    .brands_contents .recently_viewed_products .swiper-recently-viewed-prev {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 144px;
        left: 10px;
        z-index: 100;
    }

    .brands_contents .recently_viewed_products .swiper-recently-viewed-prev::before {
        content: '';
        width: 14px;
        height: 23px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-prev);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: calc(50% - 7px);
    }

    .brands_contents .recently_viewed_products .swiper-recently-viewed-next {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .9);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 144px;
        right: 10px;
        z-index: 100;
    }

    .brands_contents .recently_viewed_products .swiper-recently-viewed-next::before {
        content: '';
        width: 14px;
        height: 23px;
        background-color: #00abe4;
        -webkit-mask: var(--icon-arrow-next);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: calc(50% - 7px);
    }

    /* ========================================================================
    [pc]latest_news
    ========================================================================= */
    .brands_contents .latest_news {
        padding: 60px 0;
        width: 890px;
    }

    .brands_contents .latest_news h2 {
        margin: 0 0 38px;
        font-size: 40px;
        line-height: 1;
        font-weight: bold;
        text-align: center;
    }

    .brands_contents .news_list {
        margin: 0 auto 60px;
        width: 890px;
        list-style: none;
    }

    .brands_contents .news_list li {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px #dddddd solid;
    }

    .brands_contents .news_list li:first-child {
        border-top: 1px #dddddd solid;
    }

    .brands_contents .news_list li .label {
        display: flex;
        align-items: center;
        margin: 0 40px 0 0;
    }

    .brands_contents .news_list li .label .category {
        width: 140px;
        height: 34px;
        border-radius: 17px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        position: relative;
        order: 1;
    }

    .brands_contents .news_list li .label .category .text {
        font-size: calc(15px * 1.75);
        transform: scale(0.571);
        font-weight: bold;
    }

    .brands_contents .news_list li.bulletin .label .category {
        background: #17a3b0;
        padding: 0 38px 0 0;
    }

    .brands_contents .news_list li.media .label .category {
        background: #c970df;
    }

    .brands_contents .news_list li.event .label .category {
        background: #ff4d90;
    }

    .brands_contents .news_list li.press .label .category {
        background: #159bef;
    }

    .brands_contents .news_list li.product .label .category {
        background: #ee7100;
    }

    .brands_contents .news_list li.alert .label .category {
        background: #ff4d4d;
    }

    .brands_contents .news_list li.membership .label .category {
        background: #13aa5d;
    }

    .brands_contents .news_list li.other .label .category {
        background: #b38e56;
    }

    .brands_contents .news_list li .date,
    .brands_contents .news_list li .text {
        font-size: 16px;
    }

    .brands_contents .news_list li .date {
        margin-right: 40px;
        order: 0;
    }

    .brands_contents .news_list li .text a {
        color: #222;
        text-decoration: none;
    }

    .brands_contents .news_list li .text a:hover {
        text-decoration: underline;
    }

    .brands_contents .news_list li.bulletin .label .category::before {
        content: '';
        width: 21px;
        height: 23px;
        background-color: #fff;
        -webkit-mask: var(--icon-bulletin);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: 20px;
    }

    .brands_contents .news_list li.media .label .category::before {
        content: '';
        width: 26px;
        height: 24px;
        background-color: #fff;
        -webkit-mask: var(--icon-media);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        left: 18px;
    }

    .brands_contents .news_list li.event .label .category::before {
        content: '';
        width: 23px;
        height: 21px;
        background-color: #fff;
        -webkit-mask: var(--icon-event);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 10.5px);
        left: 18px;
    }

    .brands_contents .news_list li.press .label .category::before {
        content: '';
        width: 26px;
        height: 23px;
        background-color: #fff;
        -webkit-mask: var(--icon-press);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 11.5px);
        left: 18px;
    }

    .brands_contents .news_list li.product .label .category::before {
        content: '';
        width: 20px;
        height: 26px;
        background-color: #fff;
        -webkit-mask: var(--icon-product);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 13px);
        left: 20px;
    }

    .brands_contents .news_list li.alert .label .category::before {
        content: '';
        width: 20px;
        height: 26px;
        background-color: #fff;
        -webkit-mask: var(--icon-alert);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 13px);
        left: 20px;
    }

    .brands_contents .news_list li.membership .label .category::before {
        content: '';
        width: 20px;
        height: 26px;
        background-color: #fff;
        -webkit-mask: var(--icon-membership);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 13px);
        left: 20px;
    }

    .brands_contents .news_list li.other .label .category::before {
        content: '';
        width: 20px;
        height: 26px;
        background-color: #fff;
        -webkit-mask: var(--icon-other);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 13px);
        left: 20px;
    }

    .brands_contents .latest_news .btn_see_more {
        margin: 0 auto;
        width: 320px;
        height: 50px;
        border-radius: 25px;
        background: #009ee0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: 1px #009ee0 solid;
        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .latest_news .btn_see_more span {
        font-size: calc(18px * 1.75);
        transform: scale(0.571);
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
    }

    .brands_contents .latest_news .btn_see_more::after {
        content: '';
        width: 7px;
        height: 12px;
        background-color: #fff;
        -webkit-mask: var(--icon-arrow-link);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 6px);
        right: 20px;
    }

    .brands_contents .latest_news .btn_see_more:hover {
        background: #0088cc;
        color: #fff;
        border: 1px #0088cc solid;
    }

    .brands_contents .latest_news .btn_see_more:hover::after {
        background-color: #fff;
    }


    /* ========================================================================
    [pc]aside
    ========================================================================= */
    .brands_contents .aside {
        margin: 0;
        padding: 10px 0 0;
        width: 220px;
        grid-column: 3;
        grid-row: 1 / 4;
        border: none;
    }

    /* ========================================================================
    [pc]health_subscription
    ========================================================================= */
    .brands_contents .health_subscription {
        margin: 0 auto 60px;
        padding: 15px 15px 20px;
        width: 220px;
        background: linear-gradient(to bottom,
                #02a1d0 0%,
                #e7f8ff 27%,
                #e8f8ff 100%);
    }

    .brands_contents .health_subscription_header {
        margin: 0;
        padding: 15px 0 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to bottom,
                #ffffff 0%,
                #ffffff 74%,
                transparent 100%);
    }

    .brands_contents .health_subscription_header p.label {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: bold;
        color: #00938e;
        text-align: center;
    }

    .brands_contents .health_subscription_header h2 {
        margin: 0 0 10px;
        font-size: 20px;
        font-weight: bold;
        color: #00a0d0;
        text-align: center;
        display: inline;
        padding-left: 40px;
        position: relative;
    }

    .brands_contents .health_subscription_header h2::before {
        display: none;
    }

    .brands_contents .health_subscription_header h2::after {
        content: '';
        width: 29px;
        height: 24px;
        background-color: #00a0d0;
        -webkit-mask: var(--icon-truck);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
    }

    .brands_contents .health_subscription_header .msg {
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        color: #ff6600;
        text-align: center;
    }

    .brands_contents .feature_container {
        margin: 0 auto 15px;
        width: 190px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .brands_contents .feature_container .feature01 dt,
    .brands_contents .feature_container .feature02 dt,
    .brands_contents .feature_container .feature03 dt,
    .brands_contents .feature_container .feature04 dt {
        width: 48px;
        height: 20px;
        background-color: #00aa99;
        -webkit-mask: var(--icon-ribbon);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }

    .brands_contents .feature_container .feature01 {
        margin: 0 0 10px;
        padding: 9px 0 0;
        width: 190px;
        height: 65px;
        background: #fff;
        position: relative;
    }

    .brands_contents .feature_container .feature01::before {
        content: '';
        width: 169px;
        height: 34px;
        background-color: #00dd55;
        -webkit-mask: var(--icon-sparkle);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: 5px;
        left: 10px;
    }

    .brands_contents .feature_container .feature01 .text01 {
        margin: 0 0 7px;
        font-size: 15px;
        line-height: 1;
        color: #00aa99;
        font-weight: bold;
        text-align: center;
    }

    .brands_contents .feature_container .feature01 .text02 {
        margin: 0;
        font-size: 16px;
        line-height: 1;
        color: #00a0d0;
        font-weight: bold;
    }

    .brands_contents .feature_container .feature01 .number {
        margin: 0 9px 0 9px;
        font-size: 34px;
        line-height: 1;
        font-family: Avenir, "Helvetica Neue", Arial, sans-serif;
        color: #00a0d0;
        font-weight: bold;
        font-weight: 700;
        letter-spacing: -0.05em;
    }

    .brands_contents .feature_container .feature01 .text03 {
        font-size: 16px;
        line-height: 1;
        color: #00a0d0;
        font-weight: bold;
    }

    .brands_contents .feature_container .feature02 {
        margin: 0 0 10px;
        width: 190px;
        height: 65px;
        background: #fff;
        position: relative;
        box-shadow: 0px 0 10px rgba(0, 158, 224, 0.15);
    }

    .brands_contents .feature_container .feature02::after {
        content: '';
        width: 48px;
        height: 48px;
        background: url(../img/suntory/top/icon_point_sparkle.webp) no-repeat 0 0;
        background-size: 48px auto;
        position: absolute;
        top: -14px;
        left: 147px;
    }

    .brands_contents .feature_container .feature03 {
        margin: 0 0 10px;
        width: 190px;
        height: 65px;
        background: #fff;
        position: relative;
    }

    .brands_contents .feature_container .feature03::after {
        content: '';
        width: 32px;
        height: 47px;
        background: url(../img/suntory/top/img_feature03.webp) no-repeat 0 0;
        background-size: 32px auto;
        position: absolute;
        top: 10px;
        left: 147px;
    }

    .brands_contents .feature_container .feature02 .text01,
    .brands_contents .feature_container .feature03 .text01 {
        margin-bottom: 5px;
        font-size: 15px;
        color: #00aa99;
        font-weight: bold;
        text-align: center;
    }

    .brands_contents .feature_container .feature02 .text02,
    .brands_contents .feature_container .feature03 .text02 {
        font-size: 16px;
        color: #00a0d0;
        font-weight: bold;
    }


    .brands_contents .feature_container .feature04 {
        width: 190px;
        height: 65px;
        background: #fff;
        position: relative;
    }

    .suntory_contents .feature_container .feature04 dd {
        width: 190px;
        height: 65px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .brands_contents .feature_container .feature04 p {
        padding-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        font-size: 16px;
        color: #00a0d0;
        font-weight: bold;
        width: 190px;
        height: 65px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .brands_contents .feature_container .feature04::before {
        content: '';
        width: 17px;
        height: 18px;
        background-color: #00938e;
        -webkit-mask: var(--icon-present);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: 9px;
        left: 59px;
    }

    .brands_contents .feature_container .feature04::after {
        content: '';
        width: 19px;
        height: 22px;
        background-color: #00938e;
        -webkit-mask: var(--icon-cake);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: 4px;
        left: 83px;
    }

    .brands_contents .feature_container .feature04 dd::before {
        content: '';
        width: 22px;
        height: 23px;
        background-color: #00938e;
        -webkit-mask: var(--icon-box);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: 5px;
        left: 106px;
    }

    .brands_contents .feature_container .feature04 dd::after {
        content: '';
        width: 19px;
        height: 19px;
        background-color: #00938e;
        -webkit-mask: var(--icon-crown);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: 8px;
        left: 133px;
    }


    .brands_contents .health_subscription_footer {
        position: relative;
    }

    .brands_contents .health_subscription_footer::before {
        content: '';
        width: 1px;
        height: 40px;
        background: #2da7a4;
        position: absolute;
        top: 0;
        left: 10px;
        transform-origin: top;
        transform: rotate(-25deg);
    }

    .brands_contents .health_subscription_footer::after {
        content: '';
        width: 1px;
        height: 40px;
        background: #2da7a4;
        position: absolute;
        top: 0;
        right: 10px;
        transform-origin: top;
        transform: rotate(25deg);
    }

    .brands_contents .health_subscription_footer .msg01 {
        margin: 0 auto 8px;
        font-size: 13px;
        line-height: 1;
        font-weight: bold;
        font-weight: 600;
        color: #00938e;
        text-align: center;
    }

    .brands_contents .health_subscription_footer .msg02 {
        margin: 0 0 15px;
        font-size: 16px;
        line-height: 1;
        font-weight: bold;
        font-weight: 600;
        color: #ff6600;
        text-align: center;
    }

    .brands_contents .health_subscription_footer .btn_more a {
        margin: 0 auto;
        width: 160px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #009ee0;
        font-size: 16px;
        font-weight: bold;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        border-radius: 20px;
        position: relative;
        transition: var(--transition-normal);
    }

    .brands_contents .health_subscription_footer .btn_more a:hover {
        background: #0088cc;
    }

    .brands_contents .health_subscription_footer .btn_more a::before {
        content: '';
        width: 7px;
        height: 12px;
        background-color: #fff;
        -webkit-mask: var(--icon-arrow-link);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 6px);
        right: 15px;
    }

    /* ========================================================================
    [pc]banners
    ========================================================================= */
    .brands_contents .banners {
        margin: 0 auto;
        width: 220px;
        border: none;
    }

    .brands_contents .banner_list {
        list-style: none;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .brands_contents .banner_list li {
        margin-bottom: 60px;
        width: 220px;
    }

    .brands_contents .banner_list li a {
        text-decoration: none;
        color: var(--color_main);
    }

    .brands_contents .banner_list li a:hover {
        text-decoration: underline;
    }

    .brands_contents .banner_list figure {
        margin: 0 0 15px;
        width: 220px;
    }

    .brands_contents .banner_list figure img {
        width: 100%;
        height: auto;
    }

    .brands_contents .banner_list h3 {
        margin: 0 0 15px;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        font-weight: 600;
        color: var(--color-link);
    }

    .brands_contents .banner_list li a:hover h3 {
        text-decoration: underline;
        text-decoration-color: var(--color-link);
    }

    .brands_contents .banner_list a p {
        font-size: 15px;
        line-height: 1.5;
        color: var(--color_main);
        text-align: center;
    }


    /* ========================================================================
    [pc]extra
    ========================================================================= */
    .brands_contents .extra {
        width: 890px;
        padding: 60px 0 0;
        grid-column: 1;
        grid-row: 2;
        border-top: 1px #dddddd solid;
    }

    .brands_contents .extra_list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .brands_contents .extra_list li {
        margin: 0 25px 40px 0;
        width: 280px;
    }

    .brands_contents .extra_list li:nth-child(3n) {
        margin: 0 0 40px 0;
    }

    .brands_contents .extra_list li a {
        text-decoration: none;
    }

    .brands_contents .extra_list li a:hover {
        text-decoration: underline;
    }

    .brands_contents .extra_list li figure {
        margin: 0 0 20px;
        width: 280px;
    }

    .brands_contents .extra_list li figure img {
        width: 100%;
        height: auto;
    }

    .brands_contents .extra_list li a h3 {
        margin: 0 0 10px;
        font-size: 17px;
        font-weight: bold;
        font-weight: 600;
        color: #0072ef;
    }

    .brands_contents .extra_list li a p {
        font-size: 15px;
        line-height: 1.428571428571429;
        color: #222222;
    }

    .brands_contents .extra_list li a:hover h3 {
        text-decoration: underline;
        text-decoration-color: #0072ef;
        ;
    }
	
	/* ========================================================================
    [pc]health_div
    ========================================================================= */
    .health_div {
        margin-bottom: 30px
    }

    .health_div .health_div_title {
        padding: 16px 25px;
        background: linear-gradient(to right, rgba(0, 184, 234, 1) 0%, rgba(0, 158, 224, 1) 100%);
        text-align: center;
        color: #fff
    }

    .health_div .health_div_title .label {
        display: flex;
        justify-content: space-between;
        gap: 0;
        width: 100%;
    }

    .health_div .health_div_title .label p {
        font-size: 16px;
        font-weight: 600;
    }

    .health_div .health_div_title h2 {
        position: relative;
        font-size: 23px;
        text-align: left;
        margin-top: 7px;
    }

    .health_div .health_div_title h2 b {
        position: absolute;
        font-size: 9px;
        color: #089dde;
        right: 3px;
        top: 5px;
    }

    .health_div .health_div_title h2:before {
        position: absolute;
        content: "";
        background: url(/img/goods/common/icon_track.svg)no-repeat;
        background-size: 100% auto;
        width: 43px;
        height: 37px;
        right: 0;
        top: 0;
    }

    .health_div .health_div_title h2:after {
        background: none
    }

    .health_div_content {
        background: #eaf8ff;
        padding: 14px 20px 24px 20px;
        margin-bottom: 0;
    }

    .health_div_content .msg {
        color: #ff5500;
        text-align: center;
        font-weight: 700;
        font-size: 18px;
    }

    .health_div_content .msg2 {
        color: #00ad9c;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
    }

    .health_div_content .box {
        background: #fff;
        margin-top: 14px;
        padding: 8px 8px;
        position: relative;
        text-align: center;
    }

    .giftbox:before {
        position: absolute;
        content: "";
        width: 39px;
        height: 48px;
        background: url(/top/assets/img/suntory/top/img_feature03.webp)no-repeat;
        background-size: auto 100%;
        right: 0;
    }

    .health_div_content .box:nth-child(3),
    .health_div_content .box:nth-child(4) {
        width: 100%
    }

    .health_div_content .box:nth-child(3) {
        margin-right: 0
    }

    .health_div_content .box dt {
        position: absolute;
        background: #00ac9b;
        color: #fff;
        font-weight: bold;
        padding: 3px 10px;
        border-radius: 21px;
        font-size: 13px;
        left: -12px;
        top: 6px;
    }

    .health_div_content .box dd p.text01 {
        color: #00ac9b;
        font-weight: bold;
        font-size: 17px;
        padding-bottom: 3px;
    }

    .health_div_content .box dd .text02 {
        color: #089dde;
        font-weight: bold;
        font-size: 19px;
        padding: 0;
    }

    .health_div_content .box dd .text03 {
        color: #089dde;
        font-weight: bold;
        font-size: 15px;
        display: block;
    }

    .health_div_content .box dd .text03 br {
        display: block
    }

    .health_div_content .box dd .number {
        color: #089dde;
        font-weight: bold;
        font-size: 28px;
        font-family: "arial";
        padding: 0 4px;
    }

    .health_div_content .box dd .giftbox {
        position: relative;
        padding-bottom: 4px;
    }

    .health_div_content .box dd .giftbox:before {
        position: absolute;
        content: "";
        width: 43px;
        height: 46px;
        background: url(/img/goods/common/img_benefit02.png)no-repeat;
        background-size: auto 100%;
        bottom: 3px;
        right: -11px;
    }

    .health_div_content .box .box4 {
        display: flex;
        gap: 2px;
        margin-top: 7px;
    }

    .health_div_content .box .box4 div {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 0;
    }

    .health_div_content .box .box4 div:nth-child(1) {
        flex: 1
    }

    .health_div_content .box .box4 div:nth-child(2) {
        flex: 0.9
    }

    .health_div_content .box .box4 div:nth-child(3) {
        flex: 1.2
    }

    .health_div_content .box .box4 div:nth-child(4) {
        flex: 0.9
    }

    .health_div_content .box .box4 div:nth-child(4) .img {
        margin-right: -14px;
        margin-top: -6px;
    }

    .health_div_content .box .box4 div:nth-child(4) .img img {
        height: 36px;
        margin: 0;
    }

    .health_div_content .box .box4>div:nth-child(odd) {
        background: none;
        padding: 0;
    }

    .health_div_content .box .box4>div:nth-child(even) {
        background: none;
        padding: 0;
    }

    .health_div_content .box .box4 div .img {
        display: flex;
        justify-content: center;
        margin-bottom: 3px;
    }

    .health_div_content .box .box4 div .img img {
        height: 28px;
    }

    .health_div_content .box .box4 div p {
        font-size: 9px;
        white-space: nowrap;
        line-height: 1.2;
        color: #089dde;
        font-weight: bold;
        height: 23px;
        display: flex;
        align-items: center;
        letter-spacing: -0.5px
    }

    .health_div_content .box .orange_box {
        display: flex;
        background: #fff9eb;
        margin-top: 10px;
        margin-bottom: 34px;
        padding: 10px 10px 15px 10px;
        border-radius: 20px;
        justify-content: space-between;
        position: relative;
    }

    .health_div_content .box .orange_box:before {
        position: absolute;
        content: "\2715";
        font-size: 19px;
        font-weight: bold;
        left: 45%;
        top: 15px;
        color: #089dde;
    }

    .health_div_content .box .orange_box p {
        color: #089dde;
        font-size: 15px;
        font-weight: bold;
    }

    .health_div_content .box .orange_box p br {
        display: block
    }

    .health_div_content .box .orange_box div {
        position: absolute;
        bottom: -28px;
        padding: 8px 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        background: linear-gradient(to right, rgba(255, 34, 0, 1) 0%, rgba(255, 85, 0, 1) 28%, rgba(255, 85, 0, 1) 71%, rgba(255, 34, 0, 1) 100%);
        color: #fff;
        box-shadow: #ff25007a 0px 2px 4px 1px;
        font-size: 15px;
        font-weight: bold;
    }

    .health_div_content .box .orange_box div:after {
        position: absolute;
        content: "";
        width: 6px;
        height: 100%;
        top: 0;
        right: -5px;
        clip-path: polygon(100% 0%, 0 50%, 100% 100%, 0% 100%, 0% 0%);
        background: #ff2500;
    }

    .health_div_content .box .orange_box div:before {
        position: absolute;
        content: "";
        width: 6px;
        height: 100%;
        top: 0;
        left: -5px;
        clip-path: polygon(0% 0, 100% 50%, 0% 100%, 100% 100%, 100% 50%, 100% 0);
        background: #ff2500;
    }

    .health_div_content .health_div_footer {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 0;
        position: relative;
        width: 100%;
    }

    .health_div_content .health_div_footer:before {
        position: absolute;
        content: "";
        width: 2px;
        height: 47px;
        background: #00ac9b;
        transform: rotate(340deg);
        left: 0;
        top: 0
    }

    .health_div_content .health_div_footer:after {
        position: absolute;
        content: "";
        width: 2px;
        height: 47px;
        background: #00ac9b;
        transform: rotate(13deg);
        right: 0;
        top: 0
    }

    .health_div_content .health_div_footer .msg01 {
        color: #00ac9b;
        font-size: 14px;
        font-weight: bold;
    }

    .health_div_content .health_div_footer .msg02 {
        color: #FF5722;
        font-size: 21px;
        font-weight: bold;
        letter-spacing: -0.5px
    }

    .health_div_content .health_div_footer .btn_more {
        margin-top: 20px
    }

    .health_div_content .health_div_footer .btn_more a {
        margin: 0 auto;
        width: 160px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #009ee0;
        font-size: 16px;
        font-weight: bold;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        border-radius: 20px;
        position: relative;
        transition: var(--transition-normal);
    }

    .health_div_content .health_div_footer .btn_more a:hover {
        background: #0088cc;
    }

    .health_div_content .health_div_footer .btn_more a:before {
        content: '';
        width: 7px;
        height: 12px;
        background-color: #fff;
        -webkit-mask: var(--icon-arrow-link);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 6px);
        right: 15px;
    }

}