@charset "utf-8";

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

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

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

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

/* ========================================================================
[sp]main_visual
========================================================================= */
.suntory_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;
}

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

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

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

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

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

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




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

.suntory_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;
}

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

.suntory_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;
}

.suntory_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
========================================================================= */
.suntory_contents .recommended {
    margin: 0 0 8vw 4vw;
    padding: 0;
    width: 96vw;
}

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

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

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

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

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

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

.suntory_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;
}

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

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

.suntory_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;
}

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

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

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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]promotion
========================================================================= */
.suntory_contents .promotion {
    margin: 0 auto;
    padding: 8vw 0 8vw;
    width: 100vw;
    background: linear-gradient(to bottom, #eefbf4 0px, #ffffff 13.3333333333333vw, #ffffff 100%);
}

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

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

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

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

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

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

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

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

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

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

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

.suntory_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;
}

.suntory_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;
}


.suntory_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
========================================================================= */
.suntory_contents .lifestyle_info {
    padding: 0 0 8vw;
}

.suntory_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%);
}

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

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


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

.suntory_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;
}

.suntory_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;
}

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

.suntory_contents .lifestyle_info .swiper-slide a {
    text-decoration: none;
    color: #222;
    width: 41.3333333333333vw;
    display: block;
}

.suntory_contents .lifestyle_info figure {
    margin-bottom: 2.6666666666667vw;
    width: 41.3333333333333vw;
}

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

.suntory_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;
}

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

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


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

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

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

.suntory_contents .lifestyle_info .text {
    font-size: 3.7333333333333vw;
    line-height: 1.357142857142857;
    font-weight: bold;
}

.suntory_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;
}

.suntory_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);
}

.suntory_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;
}

.suntory_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);
}

.suntory_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;
}

.suntory_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;
}


.suntory_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
========================================================================= */
.suntory_contents .recently_viewed_products {
    margin: 0 auto;
    padding: 8vw 0 8vw;
    width: 100vw;
    background: #eef8fb;
}

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


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

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

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


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

.suntory_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;
}

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

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

.suntory_contents .recently_viewed_products .label {
    font-size: 3.4666666666667vw;
    font-weight: bold;
    color: #00abe4;
    text-align: center;

}

.suntory_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;
}

.suntory_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);
}

.suntory_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;
}

.suntory_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
========================================================================= */
.suntory_contents .latest_news {
    padding: 8vw 0 8vw;
}

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

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

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

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

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

.suntory_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;
}

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


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

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

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

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

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

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

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

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

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

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

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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;
}

.suntory_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
========================================================================= */
.suntory_contents .aside {
    margin: 0;
    padding: 0;
}

/* ========================================================================
[sp]health_subscription
========================================================================= */
.suntory_contents .health_subscription {
    margin: 0 auto 8vw;
    padding: 0 0 5.3333333333333vw;
    width: 92vw;
    background: #eef8fb url(../img/suntory/top/bg_aside_head.webp) no-repeat 0 0;
    background-size: 92vw auto;
}

.suntory_contents .health_subscription_header {
    margin: 0 0 6.6666666666667vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 23.3333333333333vw;
}

.suntory_contents .health_subscription_header p {
    font-size: 4.8vw;
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.suntory_contents .health_subscription_header h2 {
    margin: 1.3333333333333vw 0 0;
    font-size: 7.4666666666667vw;
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    text-align: center;
    display: inline;
    padding-left: 12.4vw;
    position: relative;
}

.suntory_contents .health_subscription_header h2::before {
    content: '';
    width: 10.1333333333333vw;
    height: 8.4vw;
    background-color: #fff;
    -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.2vw);
    left: 0;
}

.suntory_contents .health_subscription .msg {
    margin: 0 0 3.2vw;
    font-size: 5.3333333333333vw;
    font-weight: bold;
    font-weight: 600;
    color: #009ee0;
    text-align: center;
}

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

.suntory_contents .feature_container .feature01 dt,
.suntory_contents .feature_container .feature02 dt,
.suntory_contents .feature_container .feature03 dt,
.suntory_contents .feature_container .feature04 dt {
    width: 10.6666666666667vw;
    height: 5.3333333333333vw;
    border-radius: 2.6666666666667vw;
    background: linear-gradient(to right, #03baf1, #7fc091);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5333333333333vw;
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: -1.3333333333333vw;
    left: -0.6666666666667vw;
}


.suntory_contents .feature_container .feature01 {
    margin: 0 0 2.6666666666667vw;
    width: 86.6666666666667vw;
    height: 17.3333333333333vw;
    background: #fff url(../img/suntory/top/bg_off.webp) no-repeat right 3.4666666666667vw center;
    background-size: 13.8666666666667vw auto;
    position: relative;
    box-shadow: 0px 0 1.3333333333333vw rgba(0, 158, 224, 0.15);

}

.suntory_contents .feature_container .feature01 dd p {
    display: flex;
    align-items: center;
    height: 17.3333333333333vw;
    padding: 0 0 0 6.6666666666667vw;
}

.suntory_contents .feature_container .feature01 .text01 {
    margin: 0 4vw 0 0;
    font-size: 4.2666666666667vw;
    color: #009ee0;
    font-weight: bold;
    font-weight: 600;
}

.suntory_contents .feature_container .feature01 .text02 {
    margin: 0 2vw 0 0;
    font-size: 5.6vw;
    color: #00a799;
    font-weight: bold;
    font-weight: 600;
}

.suntory_contents .feature_container .feature01 .number {
    margin: 0 2.4vw 0 0;
    font-size: 9.866666666666667vw;
    font-family: Avenir, "Helvetica Neue", Arial, sans-serif;
    color: #00a799;
    font-weight: bold;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.suntory_contents .feature_container .feature01 .text03 {
    font-size: 5.6vw;
    color: #00a799;
    font-weight: bold;
    font-weight: 600;
}

.suntory_contents .feature_container .feature02 {
    margin: 0 0 2.6666666666667vw;
    width: 42vw;
    height: 17.3333333333333vw;
    background: #fff;
    position: relative;
    box-shadow: 0px 0 1.3333333333333vw rgba(0, 158, 224, 0.15);
}


.suntory_contents .feature_container .feature02::after {
    content: '';
    width: 44.266666666666667vw;
    height: 6.8vw;
    background-color: #00dd55;
    -webkit-mask: var(--icon-star);
    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.5333333333333vw;
    left: -1.2vw;
}


.suntory_contents .feature_container .feature02 dd,
.suntory_contents .feature_container .feature03 dd {
    height: 17.3333333333333vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.suntory_contents .feature_container .feature02 .text01,
.suntory_contents .feature_container .feature03 .text01 {
    font-size: 4vw;
    color: #009ee0;
    font-weight: bold;
    font-weight: 600;
}

.suntory_contents .feature_container .feature02 .text02,
.suntory_contents .feature_container .feature03 .text02 {
    font-size: 4.2666666666667vw;
    color: #00a799;
    font-weight: bold;
    font-weight: 600;
}

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

.suntory_contents .feature_container .feature03::after {
    content: '';
    width: 7.333333333333333vw;
    height: 9.866666666666667vw;
    background: url(../img/suntory/top/img_feature03.webp) no-repeat 0 0;
    background-size: 7.333333333333333vw auto;
    position: absolute;
    top: 4vw;
    left: 36vw;
}

.suntory_contents .feature_container .feature04 {
    width: 86.6666666666667vw;
    height: 17.3333333333333vw;
    background: #fff;
    position: relative;
    box-shadow: 0px 0 1.3333333333333vw rgba(0, 158, 224, 0.15);
}

.suntory_contents .feature_container .feature04::before {
    content: '';
    width: 7.4666666666667vw;
    height: 7.6vw;
    background-color: #009ee0;
    -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: 5.2vw;
    left: 47.733333333333333vw;
}

.suntory_contents .feature_container .feature04::after {
    content: '';
    width: 6.6666666666667vw;
    height: 7.7333333333333vw;
    background-color: #009ee0;
    -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: 4.5333333333333vw;
    left: 57.333333333333333vw;
}

.suntory_contents .feature_container .feature04 dd::before {
    content: '';
    width: 7.6vw;
    height: 7.7333333333333vw;
    background-color: #009ee0;
    -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: 3.7333333333333vw;
    left: 65.7333333333333vw;
}

.suntory_contents .feature_container .feature04 dd::after {
    content: '';
    width: 6.6666666666667vw;
    height: 7.7333333333333vw;
    background-color: #009ee0;
    -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: 4.6666666666667vw;
    left: 74.9333333333333vw;
}

.suntory_contents .feature_container .feature04 dd {
    height: 17.3333333333333vw;
    display: flex;
    align-items: center;
    padding: 0 0 0 5.7333333333333vw;
    position: relative;
}

.suntory_contents .feature_container .feature04 p {
    font-size: 4.2666666666667vw;
    color: #00a799;
    font-weight: bold;
    font-weight: 600;
}



.suntory_contents .health_subscription_footer {
    position: relative;
}

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

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

.suntory_contents .health_subscription_footer .msg01 {
    margin: 0 0 2vw;
    font-size: 4.5333333333333vw;
    line-height: 1;
    font-weight: bold;
    font-weight: 600;
    color: #009ee0;
    text-align: center;
}

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

.suntory_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: linear-gradient(to right, #009166, #a4af4a);
    font-size: 4vw;
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 5.3333333333333vw;
    position: relative;
}

.suntory_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
========================================================================= */
.suntory_contents .banners {
    margin: 0 auto 8vw;
    width: 92vw;
    border-bottom: 0.2666666666667vw #dddddd solid;
}

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

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

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

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

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

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

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



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

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

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

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

.suntory_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;
}

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

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

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


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

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

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

    /* ========================================================================
    [pc]main_visual
    ========================================================================= */
    .suntory_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;
    }

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

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

    .suntory_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;
    }

    .suntory_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;
    }

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

    .suntory_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);
    }

    .suntory_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);
    }

    .suntory_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);
    }

    .suntory_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);
    }


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

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

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

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

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

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

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

    .suntory_contents .notice dl {
        display: flex;
    }

    .suntory_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;
    }

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

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

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

    .suntory_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
    ========================================================================= */
    .suntory_contents .recommended {
        margin: 0 0 60px 0;
        padding: 0;
        width: 890px;
    }

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

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

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

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

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

    .suntory_contents .recommended .swiper-slide {
        margin: 0 0 0 0;
        width: 210px;
        padding: 0;

    }

    .suntory_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);
    }

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

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

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

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_contents .recommended .note {
        margin: 0;
        width: 180px;
        font-size: 15px;
        line-height: 1.4;
        color: #222;
        text-align: center;
    }

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

    .suntory_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;
    }

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

    .suntory_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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .suntory_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);
    }

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

    .suntory_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;
    }

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

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


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

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

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

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

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

    .suntory_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;
    }

    .suntory_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;
    }

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

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

    .suntory_contents .lifestyle_info figure {
        margin-bottom: 20px;
        width: 260px;
        order: 0;
    }

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

    .suntory_contents .lifestyle_info .label_wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        order: 2;
    }

    .suntory_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;
    }

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

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

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

    .suntory_contents .lifestyle_info .label .date {
        margin: 0 15px 0 0;
        font-size: 15px;
    }

    .suntory_contents .lifestyle_info .label .author {
        font-size: 15px;
    }

    .suntory_contents .lifestyle_info .text {
        margin: 0 0 15px;
        font-size: 16.25px;
        line-height: 1.357142857142857;
        font-weight: bold;
        order: 1;
    }

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

    .suntory_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;
    }

    .suntory_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);
    }

    .suntory_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;
    }

    .suntory_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);
    }

    .suntory_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);
    }

    .suntory_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;
    }

    .suntory_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;
    }

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

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

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

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

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

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

    .suntory_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;
    }

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

    .suntory_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;
    }

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

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

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

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


    .suntory_contents .recently_viewed_products .label {
        font-size: 16px;
        font-weight: bold;
        color: #0072ef;
        text-align: center;
        text-decoration: none;
    }


    .suntory_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;
    }

    .suntory_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);
    }

    .suntory_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;
    }

    .suntory_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
    ========================================================================= */
    .suntory_contents .latest_news {
        padding: 60px 0;
        width: 890px;
    }

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

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

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

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

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

    .suntory_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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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;
    }

    .suntory_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);
    }

    .suntory_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;
    }

    .suntory_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;
    }

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

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


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

    /* ========================================================================
    [pc]health_subscription
    ========================================================================= */
    .suntory_contents .health_subscription {
        margin: 0 auto 60px;
        padding: 0 0 40px;
        width: 220px;
        background: #eef8fb url(../img/suntory/top/bg_aside_head_pc.webp) no-repeat 0 0;
        background-size: 220px auto;
    }

    .suntory_contents .health_subscription_header {
        margin: 0 0 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 82px;
    }

    .suntory_contents .health_subscription_header p {
        font-size: 15px;
        font-weight: bold;
        font-weight: 600;
        color: #fff;
        text-align: center;
    }

    .suntory_contents .health_subscription_header h2 {
        margin: 14px 0 0;
        font-size: 23px;
        font-weight: bold;
        font-weight: 600;
        color: #fff;
        text-align: center;
        display: inline;
        padding-left: 43px;
        position: relative;
    }

    .suntory_contents .health_subscription_header h2::before {
        content: '';
        width: 29px;
        height: 24px;
        background-color: #fff;
        -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;
    }

    .suntory_contents .health_subscription .msg {
        margin: 0 0 15px;
        font-size: 15px;
        font-weight: bold;
        font-weight: 600;
        color: #009ee0;
        text-align: center;
    }

    .suntory_contents .feature_container {
        margin: 0 auto 20px;
        width: 180px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .suntory_contents .feature_container .feature01 dt,
    .suntory_contents .feature_container .feature02 dt,
    .suntory_contents .feature_container .feature03 dt,
    .suntory_contents .feature_container .feature04 dt {
        width: 45px;
        height: 20px;
        border-radius: 10px;
        background: linear-gradient(to right, #03baf1, #7fc091);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: bold;
        font-weight: 600;
        color: #fff;
        position: absolute;
        top: 0;
        left: -5px;
    }

    .suntory_contents .feature_container .feature01 {
        margin: 0 0 20px;
        width: 180px;
        height: 70px;
        background: #fff url(../img/suntory/top/bg_off_pc.webp) no-repeat center bottom;
        background-size: 104px auto;
        position: relative;
        box-shadow: 0px 0 10px rgba(0, 158, 224, 0.15);
    }

    .suntory_contents .feature_container .feature01 dd {
        height: 70px;
        display: flex;
        align-items: center;
    }


    .suntory_contents .feature_container .feature01 dd p {
        height: auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        line-height: 1;
    }

    .suntory_contents .feature_container .feature01 .text01 {
        margin: 0 0 5px;
        width: 100%;
        font-size: 15px;
        line-height: 1;
        color: #009ee0;
        font-weight: bold;
        font-weight: 600;
        text-align: center;
    }

    .suntory_contents .feature_container .feature01 .text02 {
        margin: 0 8px 0 0;
        font-size: 16px;
        line-height: 1;
        color: #00a799;
        font-weight: bold;
        font-weight: 600;
    }

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

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

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

    .suntory_contents .feature_container .feature02::after {
        content: '';
        width: 189px;
        height: 24px;
        background-color: #00dd55;
        -webkit-mask: var(--icon-star);
        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: 10px;
        left: -5px;
    }

    .suntory_contents .feature_container .feature02 dd,
    .suntory_contents .feature_container .feature03 dd {
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .suntory_contents .feature_container .feature02 .text01,
    .suntory_contents .feature_container .feature03 .text01 {
        font-size: 15px;
        color: #009ee0;
        font-weight: bold;
        font-weight: 600;
    }

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

    .suntory_contents .feature_container .feature03 {
        margin: 0 0 20px;
        width: 180px;
        height: 70px;
        background: #fff;
        position: relative;
        box-shadow: 0px 0 10px rgba(0, 158, 224, 0.15);
    }

    .suntory_contents .feature_container .feature03::after {
        content: '';
        width: 30px;
        height: 44px;
        background: url(../img/suntory/top/img_feature03.webp) no-repeat 0 0;
        background-size: 30px auto;
        position: absolute;
        top: 15px;
        left: 142px;
    }

    .suntory_contents .feature_container .feature04 {
        width: 180px;
        height: 70px;
        background: #fff;
        position: relative;
        box-shadow: 0px 0 10px rgba(0, 158, 224, 0.15);
    }

    .suntory_contents .feature_container .feature04::before {
        content: '';
        width: 22px;
        height: 22px;
        background-color: #009ee0;
        -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: 11px;
        left: 46px;
    }

    .suntory_contents .feature_container .feature04::after {
        content: '';
        width: 19px;
        height: 22px;
        background-color: #009ee0;
        -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: 9px;
        left: 73px;
    }

    .suntory_contents .feature_container .feature04 dd::before {
        content: '';
        width: 22px;
        height: 23px;
        background-color: #009ee0;
        -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: 10px;
        left: 96px;
    }

    .suntory_contents .feature_container .feature04 dd::after {
        content: '';
        width: 20px;
        height: 19px;
        background-color: #009ee0;
        -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: 13px;
        left: 123px;
    }

    .suntory_contents .feature_container .feature04 dd {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 35px 0 0;
        position: relative;
    }

    .suntory_contents .feature_container .feature04 p {
        font-size: 16px;
        color: #00a799;
        font-weight: bold;
        font-weight: 600;
    }

    .suntory_contents .health_subscription_footer {
        position: relative;
    }

    .suntory_contents .health_subscription_footer::before {
        content: '';
        width: 1px;
        height: 40px;
        background: #009ee0;
        position: absolute;
        top: 0;
        left: 20px;
        transform-origin: top;
        transform: rotate(-25deg);
    }

    .suntory_contents .health_subscription_footer::after {
        content: '';
        width: 1px;
        height: 40px;
        background: #009ee0;
        position: absolute;
        top: 0;
        right: 20px;
        transform-origin: top;
        transform: rotate(25deg);
    }

    .suntory_contents .health_subscription_footer .msg01 {
        margin: 0 0 8px;
        font-size: 12px;
        line-height: 1;
        font-weight: bold;
        font-weight: 600;
        color: #009ee0;
        text-align: center;
    }

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

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

    .suntory_contents .health_subscription_footer .btn_more a:hover {
        background: linear-gradient(to right, #00a0a2, #8d992d);
    }

    .suntory_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
    ========================================================================= */
    .suntory_contents .banners {
        margin: 0 auto;
        width: 220px;
        border: none;
    }

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

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

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

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

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

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

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

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

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


    /* ========================================================================
    [pc]extra
    ========================================================================= */
    .suntory_contents .extra {
        width: 890px;
        grid-column: 1;
        grid-row: 2;
    }

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

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

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

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

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

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

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

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

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

    .suntory_contents .extra_list li a:hover h3 {
        text-decoration: underline;
        text-decoration-color: #0072ef;
        ;
    }


}