button,
input,
select,
textarea {
    -webkit-appearance: none;
    box-shadow: none;
    font-size: 100%
}

button,
label {
    cursor: pointer
}

img,
sup {
    vertical-align: top
}

article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
    display: block
}




fieldset,
img {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%
}

img {
    height: auto;
    max-width: none
}

address,
caption,
code,
em,
th {
    font-style: normal;
    font-weight: 400
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}




sub {
    vertical-align: sub
}

strong {
    font-weight: 700
}

* {
    box-sizing: border-box
}



html.is-locked {
    left: 0;
    overflow-y: scroll;
    position: fixed;
    width: 100%
}



a,
a:active,
a:focus,
a:hover,
a:visited {
    text-decoration: none
}




.swiper {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-pointer-events {
    touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    height: var(--swiper-centered-offset-after);
    width: 100%
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transform: translateZ(0);
    transition: opacity .3s;
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    font-size: 0;
    overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    position: relative;
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    border-radius: 50%;
    display: inline-block;
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scale(0);
    transform-origin: left top;
    width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    height: 4px;
    left: 0;
    top: 0;
    width: 100%
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    height: 100%;
    left: 0;
    top: 0;
    width: 4px
}

.swiper-pagination-lock {
    display: none
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    align-items: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    cursor: pointer;
    display: flex;
    height: var(--swiper-navigation-size);
    justify-content: center;
    margin-top: calc(0px - var(--swiper-navigation-size)/2);
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/44*27);
    z-index: 10
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    cursor: auto;
    opacity: .35;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    cursor: auto;
    opacity: 0;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    font-variant: normal;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none !important
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    left: auto;
    right: 10px
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-button-lock {
    display: none
}

.box-article-category {
    margin-top: 40px
}

@media (max-width:767px) {
    .box-article-category {
        margin: 20px -16px 0;
        overflow: auto;
        padding: 0 16px
    }
}

.box-article-category .box-category-in {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center
}

@media (max-width:900px) {
    .box-article-category .box-category-in {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 10px;
        white-space: nowrap
    }
}

.box-article-category .btn-link {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 60px;
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    min-width: 136px;
    padding: 13px 20px 15px;
    text-align: center;
    transition: color .2s ease-out, background-color .2s ease-out
}

@media (max-width:900px) {
    .box-article-category .btn-link {
        font-size: 1.7rem;
        padding: 10px 15px 11px
    }

    .box-article-category .btn-link:last-child {
        margin-right: 16px
    }
}

.box-article-category .btn-link.is-all {
    min-width: 126px
}

.box-article-category .btn-link.is-current-detail {
    border-color: #fdb913;
    color: #fdb913
}

.box-article-category .btn-link.is-active {
    background-color: #fdb913;
    color: #fff;
    cursor: default;
    pointer-events: none
}

@media (min-width:768px)and (pointer:fine) {
    .box-article-category .btn-link:hover {
        background-color: #fdb913;
        color: #fff
    }
}

.box-shop-group-carousel .card-shop-logo-container {
    display: grid;
    gap: 40px 50px;
    grid-template-columns: repeat(3, 1fr)
}

@media (max-width:1300px) {
    .box-shop-group-carousel .card-shop-logo-container {
        gap: 3.0769230769vw
    }
}

@media (max-width:600px) {
    .box-shop-group-carousel .card-shop-logo-container {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr)
    }
}

.box-shop-group-carousel .card-shop-logo {
    display: block;
    padding-top: 52.9411764706%;
    position: relative
}

.box-shop-group-carousel .card-shop-logo img {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%
}

@media (min-width:768px) {
    .box-shop-group-carousel a.card-shop-logo {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .box-shop-group-carousel a.card-shop-logo:hover {
        opacity: .8;
        text-decoration: none
    }
}

.brand-slider-top {
    padding: 0 20px;
    position: relative;
    z-index: 2
}

@media (max-width:767px) {
    .brand-slider-top {
        padding: 16px 16px 0
    }
}

.brand-slider-top .box-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .05);
    margin: 0 auto;
    max-width: 1260px;
    padding: 17px 7px;
    position: relative;
    transform: translateY(-45%)
}

@media (max-width:767px) {
    .brand-slider-top .box-container {
        padding: 13px 15px 22px;
        transform: none
    }
}

.brand-slider-top .text-browse {
    bottom: calc(100% + 20px);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    left: 0;
    line-height: 1.6666666667;
    padding-right: 21px;
    position: absolute;
    z-index: 1
}

@media (max-width:767px) {
    .brand-slider-top .text-browse {
        display: none
    }
}

.brand-slider-top .text-browse:after {
    background: url(../image/icon_browse.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 15px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px
}

.brand-slider-top .box-inner {
    overflow: hidden
}

.brand-slider-top .list-brand {
    margin: 0 -2px
}

.brand-slider-top .list-brand .brand-item {
    height: auto;
    position: relative;
    width: auto
}

.brand-slider-top .list-brand .brand-item:before {
    background: url(../image/bg_border_dashed.svg) 50% no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px
}

.brand-slider-top .list-brand .box-brand {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0 8px;
    transition: transform .3s ease-out
}

.brand-slider-top .list-brand .box-brand img {
    display: block;
    height: auto;
    max-height: 76px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto
}

@media (max-width:767px) {
    .brand-slider-top .list-brand .box-brand img {
        max-height: 56px
    }
}

@media (min-width:768px)and (pointer:fine) {
    .brand-slider-top .list-brand a.box-brand:hover {
        transform: translateY(-6px) translateZ(0)
    }
}

.brand-slider-top .brand-slider-pagination {
    bottom: 7px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

@media (max-width:767px) {
    .brand-slider-top .brand-slider-pagination {
        bottom: 8px
    }
}

.brand-slider-top .brand-slider-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.brand-slider-top .brand-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

.btn-see-all {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    position: relative
}

@media (min-width:768px) {
    .btn-see-all {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .btn-see-all:hover {
        opacity: .8;
        text-decoration: none
    }
}

.btn-see-all:after {
    border-bottom: 2px solid #fdb913;
    bottom: 3px;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%
}

.btn-sticky-distribution {
    left: 0;
    position: absolute;
    top: -90px;
    z-index: 3
}

@media (max-width:1380px) {
    .btn-sticky-distribution {
        display: none
    }
}

.btn-sticky-distribution .button {
    border-radius: 0 12px 12px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    display: block;
    width: 50px
}

@media (min-width:768px) {
    .btn-sticky-distribution .button {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .btn-sticky-distribution .button:hover {
        opacity: .8;
        text-decoration: none
    }
}

.btn-sticky-distribution .button img {
    display: block;
    width: 100%
}

.btn-sticky-line {
    align-items: center;
    background: #fdb913;
    border-radius: 50px;
    bottom: 40px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .15);
    display: flex;
    padding: 6px;
    position: fixed;
    right: 40px;
    z-index: 10
}

@media (max-width:1280px) {
    .btn-sticky-line {
        display: none
    }
}

.btn-sticky-line:hover .text {
    max-width: 150px
}

.btn-sticky-line .text {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    max-width: 0;
    overflow: hidden;
    transition: max-width .3s ease-out;
    white-space: nowrap
}

.btn-sticky-line .text>span {
    padding: 0 12px 0 18px
}

.btn-sticky-line .icon {
    display: block;
    flex-shrink: 0;
    width: 38px
}

.card-article {
    background-color: #fff;
    border-radius: 12px;
    display: block;
    height: 100%;
    overflow: hidden;
    transition: box-shadow .2s ease-out, transform .2s ease-out
}

@media (min-width:768px)and (pointer:fine) {
    .card-article:hover {
        box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
        transform: translateY(-10px)
    }
}

.card-article .card-image {
    padding-top: 66.6666666667%;
    position: relative
}

.card-article .card-image img {
    border-radius: 12px 12px 0 0;
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.card-article .card-image.is-category:after {
    background: linear-gradient(180deg, transparent, #000);
    bottom: 0;
    content: "";
    height: 130px;
    left: 0;
    opacity: .3;
    position: absolute;
    width: 100%;
    z-index: 1
}

.card-article .card-category {
    border: 1px solid #fff;
    border-radius: 50px;
    bottom: 30px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    left: 30px;
    line-height: 1.6666666667;
    padding: 3px 13px 5px;
    position: absolute;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    z-index: 2
}

@media (max-width:767px) {
    .card-article .card-category {
        bottom: 20px;
        left: 20px
    }
}

@media (min-width:768px)and (pointer:fine) {
    .card-article .card-category:hover {
        background-color: #fdb913;
        border-color: #fdb913;
        color: #fff
    }
}

.card-article .card-info {
    padding: 30px 40px
}

@media (max-width:767px) {
    .card-article .card-info {
        padding: 20px 20px 30px
    }
}

.card-article .card-info .text-date {
    color: #5d5856;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6666666667
}

.card-article .card-info .text-title {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    margin-top: 10px
}

.card-flavor-detail {
    background-color: #fff;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 45.9016393443% auto;
    padding: 20px
}

@media (max-width:1024px) {
    .card-flavor-detail {
        gap: 25px;
        grid-template-columns: 100%;
        padding: 16px
    }

    .card-flavor-detail .box-slider-col .box-slider-col-inner {
        margin: 0 auto;
        max-width: 400px
    }
}

@media (min-width:768px)and (pointer:fine) {

    .card-flavor-detail .box-slider-col:hover .swiper-button-next,
    .card-flavor-detail .box-slider-col:hover .swiper-button-prev {
        opacity: 1
    }

    .card-flavor-detail .box-slider-col:hover .swiper-button-next.swiper-button-disabled,
    .card-flavor-detail .box-slider-col:hover .swiper-button-prev.swiper-button-disabled {
        cursor: default;
        opacity: .5
    }

    .card-flavor-detail .box-slider-col:hover .swiper-button-next.swiper-button-lock,
    .card-flavor-detail .box-slider-col:hover .swiper-button-prev.swiper-button-lock {
        display: none
    }
}

.card-flavor-detail .card-flavor-detail-image {
    aspect-ratio: 1/1;
    border-radius: 8px;
    position: relative
}

.card-flavor-detail .card-flavor-detail-image img {
    border-radius: 8px;
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.card-flavor-detail .swiper-button-next,
.card-flavor-detail .swiper-button-prev {
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .05);
    cursor: pointer;
    display: block;
    height: 50px;
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-out, opacity .2s ease-out;
    width: 50px;
    z-index: 3
}

@media (max-width:1024px) {

    .card-flavor-detail .swiper-button-next,
    .card-flavor-detail .swiper-button-prev {
        display: none
    }
}

.card-flavor-detail .swiper-button-next:after,
.card-flavor-detail .swiper-button-prev:after {
    background: url(../image/icon_mv_arrow_yellow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px
}

@media (min-width:768px)and (pointer:fine) {

    .card-flavor-detail .swiper-button-next:not(.swiper-button-disabled):hover,
    .card-flavor-detail .swiper-button-prev:not(.swiper-button-disabled):hover {
        background-color: #fdb913
    }

    .card-flavor-detail .swiper-button-next:not(.swiper-button-disabled):hover:after,
    .card-flavor-detail .swiper-button-prev:not(.swiper-button-disabled):hover:after {
        background-image: url(../image/icon_mv_arrow_white.svg)
    }
}

.card-flavor-detail .swiper-button-prev {
    left: 20px;
    right: auto
}

.card-flavor-detail .swiper-button-prev:after {
    transform: translate(-50%, -50%) rotate(180deg)
}

.card-flavor-detail .swiper-pagination {
    bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    left: 0;
    margin-top: 60px;
    position: static;
    position: absolute;
    width: 100%
}

@media (max-width:767px) {
    .card-flavor-detail .swiper-pagination {
        margin-top: 30px
    }
}

.card-flavor-detail .swiper-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.card-flavor-detail .swiper-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.card-flavor-detail .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

@media (max-width:1024px) {
    .card-flavor-detail .swiper-pagination {
        bottom: 10px
    }
}

.card-flavor-detail .box-info-col {
    padding: 30px 30px 30px 80px
}

@media (max-width:1300px) {
    .card-flavor-detail .box-info-col {
        padding-left: 6.1538461538vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col {
        padding: 0
    }
}

.card-flavor-detail .box-info-col .title-flavor {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

.card-flavor-detail .box-info-col .box-content {
    margin-top: 30px
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .box-content {
        margin-top: 16px
    }
}

.card-flavor-detail .box-info-col .box-button {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    margin-top: 50px
}

@media (max-width:1220px) {
    .card-flavor-detail .box-info-col .box-button {
        gap: 1.2295081967vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .box-button {
        align-items: center;
        flex-direction: column;
        gap: 16px;
        margin-top: 30px
    }
}

.card-flavor-detail .box-info-col .btn-contact {
    align-items: center;
    background-color: #fdb913;
    border-radius: 50px;
    display: flex;
    gap: 15px;
    height: 60px;
    padding: 11px;
    width: 270px
}

@media (max-width:1220px) {
    .card-flavor-detail .box-info-col .btn-contact {
        gap: 1.2295081967vw;
        height: 4.9180327869vw;
        width: 22.131147541vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .btn-contact {
        gap: 28px;
        height: 60px;
        max-width: 296px;
        width: 100%
    }
}

.card-flavor-detail .box-info-col .btn-contact .icon {
    display: block;
    width: 38px
}

@media (max-width:1220px) {
    .card-flavor-detail .box-info-col .btn-contact .icon {
        width: 3.1147540984vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .btn-contact .icon {
        width: 38px
    }
}

.card-flavor-detail .box-info-col .btn-contact .text {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.2
}

@media (max-width:1220px) {
    .card-flavor-detail .box-info-col .btn-contact .text {
        font-size: 1.393442623vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .btn-contact .text {
        font-size: 1.7rem
    }
}

@media (min-width:768px) {
    .card-flavor-detail .box-info-col .btn-contact {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .card-flavor-detail .box-info-col .btn-contact:hover {
        opacity: .8;
        text-decoration: none
    }
}

.card-flavor-detail .box-info-col .btn-distribution {
    align-items: center;
    border: 1px solid #4c4745;
    border-radius: 50px;
    display: flex;
    font-size: 1.7rem;
    font-weight: 600;
    height: 60px;
    justify-content: center;
    line-height: 1.2;
    padding: 11px;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    width: 230px
}

@media (max-width:1220px) {
    .card-flavor-detail .box-info-col .btn-distribution {
        font-size: 1.393442623vw;
        height: 4.9180327869vw;
        width: 18.8524590164vw
    }
}

@media (max-width:1024px) {
    .card-flavor-detail .box-info-col .btn-distribution {
        font-size: 1.7rem;
        height: 60px;
        max-width: 296px;
        width: 100%
    }
}

@media (min-width:768px)and (pointer:fine) {
    .card-flavor-detail .box-info-col .btn-distribution:hover {
        background-color: #fdb913;
        border-color: #fdb913;
        color: #fff
    }
}

.card-flavor-sm {
    background-color: #fff;
    border-radius: 12px;
    display: block;
    height: 100%;
    padding: 10px 10px 30px;
    transition: box-shadow .2s ease-out, transform .2s ease-out
}

@media (min-width:768px)and (pointer:fine) {
    .card-flavor-sm:hover {
        box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
        transform: translateY(-10px)
    }
}

.card-flavor-sm .card-image {
    padding-top: 100%;
    position: relative
}

.card-flavor-sm .card-image img {
    border-radius: 12px;
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.card-flavor-sm .card-title {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    margin-top: 20px;
    text-align: center
}

.card-history {
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    min-height: 500px
}

@media (max-width:1300px) {
    .card-history {
        min-height: 38.4615384615vw
    }
}

@media (max-width:767px) {
    .card-history {
        display: block;
        min-height: 0
    }
}

.card-history+.card-history {
    margin-top: 60px
}

@media (max-width:767px) {
    .card-history+.card-history {
        margin-top: 16px
    }
}

.card-history .card-history-image {
    position: relative;
    width: 50%
}

@media (max-width:767px) {
    .card-history .card-history-image {
        padding-top: 76.2195121951%;
        width: 100%
    }
}

.card-history .card-history-image img {
    border-radius: 12px;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.card-history .card-history-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 60px 50px 60px 80px;
    width: 50%
}

@media (max-width:1300px) {
    .card-history .card-history-info {
        padding: 4.6153846154vw 3.8461538462vw 4.6153846154vw 4.6153846154vw
    }
}

@media (max-width:767px) {
    .card-history .card-history-info {
        padding: 25px;
        width: 100%
    }
}

.card-history .card-history-info .title {
    color: #fdb913;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:1000px) {
    .card-history .card-history-info .title {
        font-size: 3.6vw
    }
}

@media (max-width:767px) {
    .card-history .card-history-info .title {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.card-history.is-reversed {
    flex-direction: row-reverse
}

.card-history.is-reversed .card-history-info {
    padding: 60px 80px 60px 50px
}

@media (max-width:1300px) {
    .card-history.is-reversed .card-history-info {
        padding: 4.6153846154vw 4.6153846154vw 4.6153846154vw 3.8461538462vw
    }
}

@media (max-width:767px) {
    .card-history.is-reversed .card-history-info {
        padding: 25px
    }
}

.mod-cms {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75
}

.mod-cms b,
.mod-cms strong {
    font-weight: 500
}

.mod-cms em,
.mod-cms i {
    font-style: italic
}

.mod-cms hr {
    border-top: 1px solid #f7f3f1;
    height: 0;
    margin: 20px 0
}

.mod-cms ul {
    list-style-type: disc;
    margin-left: 0;
    padding-left: 23px
}

.mod-cms ul>li::marker {
    color: #fdb913;
    font-size: .85em
}

.mod-cms ul>li>ol,
.mod-cms ul>li>ul {
    padding-left: 0
}

.mod-cms ol {
    list-style-type: decimal;
    margin-left: 0;
    padding-left: 23px
}

.mod-cms ol>li>ol,
.mod-cms ol>li>ul {
    padding-left: 0
}

.mod-cms h1 {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381
}

@media (max-width:767px) {
    .mod-cms h1 {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

.mod-cms h2 {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:767px) {
    .mod-cms h2 {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.mod-cms h3 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

.mod-cms h4 {
    font-size: 1.6rem
}

.mod-cms h4,
.mod-cms h5 {
    font-weight: 500;
    line-height: 1.6
}

.mod-cms h5 {
    font-size: 1.5rem
}

.mod-cms h6 {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6
}

.mod-cms a {
    color: #fdb913;
    text-decoration: underline
}

.mod-cms a:hover {
    text-decoration: none
}

.mod-cms .cms-title {
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 1.7058823529
}

.mod-cms .cms-body-bold {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.75
}

.mod-cms .cms-body {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75
}

.mod-cms .cms-caption-bold {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.6666666667
}

.mod-cms .cms-caption,
.mod-cms .wp-caption-text {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6666666667
}

.mod-cms .mod-cms-content:not(:first-child) {
    margin-top: 40px
}

@media (max-width:767px) {
    .mod-cms .mod-cms-content:not(:first-child) {
        margin-top: 20px
    }
}

.mod-cms .mod-single-image:not(:first-child) {
    margin-top: 40px
}

@media (max-width:767px) {
    .mod-cms .mod-single-image:not(:first-child) {
        margin-top: 20px
    }
}

.mod-cms .mod-single-image .link-image {
    color: inherit;
    display: block;
    text-decoration: none
}

@media (min-width:768px) {
    .mod-cms .mod-single-image .link-image {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .mod-cms .mod-single-image .link-image:hover {
        opacity: .8;
        text-decoration: none
    }
}

.mod-cms .mod-single-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto
}

.mod-cms .mod-youtube-video:not(:first-child) {
    margin-top: 40px
}

@media (max-width:767px) {
    .mod-cms .mod-youtube-video:not(:first-child) {
        margin-top: 20px
    }
}

.mod-cms .mod-youtube-video .video-inner {
    aspect-ratio: 16/9;
    position: relative
}

.mod-cms .mod-youtube-video .video-inner iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.mod-cms .wp-caption {
    max-width: 100%
}

.mod-cms .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.mod-cms .alignleft {
    float: left;
    margin: .5em 1em .5em 0
}

.mod-cms .alignright {
    float: right;
    margin: .5em 0 .5em 1em
}

.mod-cms img[class*=wp-image-] {
    max-width: 100%
}

.footer-distribution {
    background-color: #4c4745;
    border-radius: 20px 20px 0 0;
    margin-top: -20px;
    padding: 80px 20px 100px
}

@media (max-width:1000px) {
    .footer-distribution {
        padding-bottom: 10vw;
        padding-top: 8vw
    }
}

@media (max-width:767px) {
    .footer-distribution {
        padding: 60px 20px 80px
    }
}

.footer-distribution .footer-distribution-inner {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1014px
}

@media (max-width:767px) {
    .footer-distribution .footer-distribution-inner {
        align-items: center;
        flex-direction: column;
        gap: 80px;
        justify-content: flex-start
    }
}

.footer-distribution .box-item {
    flex: 1;
    max-width: 360px;
    text-align: center
}

@media (max-width:767px) {
    .footer-distribution .box-item {
        max-width: none
    }
}

.footer-distribution .icon {
    display: block;
    margin: 0 auto;
    width: 94px
}

@media (max-width:1000px) {
    .footer-distribution .icon {
        width: 9.4vw
    }
}

@media (max-width:767px) {
    .footer-distribution .icon {
        width: 94px
    }
}

.footer-distribution .title {
    color: #fff;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    margin-top: 30px
}

@media (max-width:1000px) {
    .footer-distribution .title {
        font-size: 3.6vw
    }
}

@media (max-width:767px) {
    .footer-distribution .title {
        font-size: 2.1rem;
        line-height: 1.5238095238;
        margin-top: 20px
    }
}

.footer-distribution .text {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    margin-top: 14px
}

@media (max-width:800px) {
    .footer-distribution .text {
        font-size: 2vw
    }
}

@media (max-width:767px) {
    .footer-distribution .text {
        font-size: 1.6rem;
        margin-top: 12px
    }
}

.footer-distribution .button {
    align-items: center;
    border: 1px solid #fdb913;
    border-radius: 50px;
    color: #fdb913;
    display: flex;
    font-size: 1.6rem;
    font-weight: 500;
    height: 50px;
    justify-content: center;
    line-height: 1.75;
    margin: 30px auto 0;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    width: 130px
}

@media (min-width:768px)and (pointer:fine) {
    .footer-distribution .button:hover {
        background-color: #fdb913;
        border-color: #fdb913;
        color: #fff
    }
}

.footer {
    background: url(../image/bg_footer_pc.webp) top no-repeat;
    background-size: cover;
    border-radius: 20px 20px 0 0;
    margin-top: -20px;
    position: relative
}

@media (max-width:767px) {
    .footer {
        background-image: url(../image/bg_footer_sp.webp)
    }
}

.footer .footer-upper {
    margin: 0 auto;
    max-width: 1300px;
    overflow: hidden;
    padding: 0 20px;
    position: relative
}

@media (max-width:767px) {
    .footer .footer-upper {
        max-width: none;
        padding: 0 16px
    }
}

.footer .footer-upper:before {
    background: url(../image/img_footer_01.webp) no-repeat;
    background-size: contain;
    bottom: -78px;
    content: "";
    height: 322px;
    left: 90px;
    position: absolute;
    width: 216px;
    z-index: 0
}

@media (max-width:1300px) {
    .footer .footer-upper:before {
        bottom: -6vw;
        height: 24.7692307692vw;
        left: 6.9230769231vw;
        width: 16.6153846154vw
    }
}

@media (max-width:767px) {
    .footer .footer-upper:before {
        bottom: -76px;
        height: 197px;
        left: 54px;
        width: 114px
    }
}

.footer .footer-upper:after {
    background: url(../image/img_footer_02.webp) no-repeat;
    background-size: contain;
    bottom: -78px;
    content: "";
    height: 272px;
    position: absolute;
    right: 80px;
    width: 213px;
    z-index: 0
}

@media (max-width:1300px) {
    .footer .footer-upper:after {
        bottom: -6vw;
        height: 20.9230769231vw;
        right: 6.1538461538vw;
        width: 16.3846153846vw
    }
}

@media (max-width:767px) {
    .footer .footer-upper:after {
        bottom: -102px;
        height: 197px;
        right: 64px;
        width: 112px
    }
}

.footer .footer-lang {
    padding: 30px 0
}

@media (max-width:767px) {
    .footer .footer-lang {
        padding: 20px 0
    }
}

.footer .footer-lang-inner {
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    gap: 15px;
    justify-content: center;
    line-height: 1.667
}

.footer .footer-lang .title {
    flex-shrink: 0
}

.footer .footer-lang .box-lang {
    display: flex;
    flex-shrink: 0;
    gap: 24px;
    position: relative
}

.footer .footer-lang .box-lang:after {
    background-color: #4c4745;
    content: "";
    height: 16px;
    left: 50%;
    opacity: .5;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px
}

.footer .footer-lang .link-lang {
    color: #4c4745;
    opacity: .5
}

.footer .footer-lang .link-lang.is-active {
    opacity: 1
}

.footer .footer-container {
    align-items: center;
    border-top: 1px solid #fdb913;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 60px 0;
    position: relative;
    text-align: center
}

@media (max-width:767px) {
    .footer .footer-container {
        border-width: 1px;
        gap: 40px;
        padding: 40px 0 120px
    }
}

.footer .footer-logo img {
    display: block;
    margin: 0 auto;
    width: 186px
}

.footer .footer-logo .address {
    color: #4c4745;
    font-size: 12px;
    line-height: 1.667;
    margin-top: 10px
}

@media (max-width:767px) {
    .footer .footer-logo .address {
        margin-top: 12px
    }
}

.footer .footer-contact {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.footer .footer-contact .link-mail,
.footer .footer-contact .link-tel {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.667;
    padding-left: 33px;
    position: relative;
    transition: color .2s ease-out
}

@media (min-width:768px)and (pointer:fine) {

    .footer .footer-contact .link-mail:hover,
    .footer .footer-contact .link-tel:hover {
        color: #fdb913
    }
}

.footer .footer-contact .link-mail:after,
.footer .footer-contact .link-tel:after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px
}

.footer .footer-contact .link-mail.link-tel:after,
.footer .footer-contact .link-tel.link-tel:after {
    background-image: url(../image/icon_tel.svg)
}

.footer .footer-contact .link-mail.link-mail:after,
.footer .footer-contact .link-tel.link-mail:after {
    background-image: url(../image/icon_mail.svg)
}

.footer .footer-sns {
    display: flex;
    gap: 20px;
    justify-content: center
}

.footer .footer-sns a {
    display: block;
    height: 42px;
    position: relative;
    width: 42px
}

.footer .footer-sns a img {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease-out;
    width: 100%
}

.footer .footer-sns a img.hover {
    opacity: 0
}

@media (max-width:767px) {

    .footer .footer-sns a img.default,
    .footer .footer-sns a img.hover {
        display: none
    }
}

@media (min-width:768px) {
    .footer .footer-sns a img.sp {
        display: none
    }
}

@media (min-width:768px)and (pointer:fine) {
    .footer .footer-sns a:hover>.default {
        opacity: 0
    }

    .footer .footer-sns a:hover>.hover {
        opacity: 1
    }
}

.footer .footer-copyright {
    background-color: #4c4745;
    border-radius: 20px 20px 0 0;
    padding: 30px 20px
}

@media (max-width:767px) {
    .footer .footer-copyright {
        height: 90px;
        padding: 20px
    }
}

.footer .footer-copyright-inner {
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    gap: 10px;
    justify-content: center;
    line-height: 1.67;
    text-align: center
}

@media (max-width:767px) {
    .footer .footer-copyright-inner {
        flex-direction: column
    }
}

.footer .footer-copyright .text {
    font-weight: 700
}

.footer .footer-copyright .text>span {
    color: #fdb913
}

.footer .footer-copyright .design {
    opacity: .65
}

.footer .footer-copyright .design>a {
    color: #fff
}

.footer .footer-copyright .design>a:hover {
    text-decoration: underline
}

.header {
    height: 136px;
    position: relative;
    z-index: 10
}

@media (max-width:1024px) {
    .header {
        height: 62px
    }
}

.header .header-upper {
    align-items: center;
    background: linear-gradient(90deg, #6d6865, #4c4745 84%);
    display: flex;
    height: 40px;
    justify-content: space-between;
    padding: 0 40px
}

@media (max-width:1439px) {
    .header .header-upper {
        padding: 0 20px
    }
}

@media (max-width:1024px) {
    .header .header-upper {
        display: none
    }
}

.header .header-lang {
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    font-weight: 600;
    gap: 15px;
    line-height: 1.6666666667
}

.header .header-lang-link {
    display: flex;
    gap: 24px;
    position: relative
}

.header .header-lang-link .link-lang {
    color: #fff;
    display: block;
    opacity: .5;
    position: relative;
    transition: opacity .2s ease-out
}

.header .header-lang-link .link-lang.is-active,
.header .header-lang-link .link-lang:hover {
    opacity: 1
}

.header .header-lang-link .link-lang:last-child:before {
    background-color: hsla(0, 0%, 100%, .5);
    content: "";
    height: 16px;
    left: -12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.header .header-util {
    align-items: center;
    display: flex;
    font-size: 1.6rem;
    font-weight: 500;
    gap: 40px;
    line-height: 1.75;
    position: relative
}

@media (min-width:768px) {
    .header .header-util a {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .header .header-util a:hover {
        opacity: .8;
        text-decoration: none
    }
}

.header .header-util .link-text {
    color: #fff;
    display: block
}

.header .header-util .link-tel {
    color: #fff;
    display: block;
    position: relative
}

.header .header-util .link-tel:before {
    background-color: hsla(0, 0%, 100%, .5);
    content: "";
    height: 20px;
    left: -20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px
}

.header .header-util .link-tel span {
    display: block;
    padding-left: 22px;
    position: relative
}

.header .header-util .link-tel span:after {
    background: url(../image/ico_tel_yellow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 16px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px
}

.header .header-inner {
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(62, 62, 62, .1);
    height: 96px;
    position: relative;
    transition: height .2s ease-in;
    width: 100%;
    z-index: 10
}

@media (max-width:1024px) {
    .header .header-inner {
        height: 62px;
        left: 0;
        position: fixed;
        top: 0
    }

    .header .header-inner:before {
        background: linear-gradient(90deg, #6d6865 21%, #4c4745 84%);
        content: "";
        height: 4px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }
}

.header .header-logo {
    left: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 224px
}

@media (max-width:1439px) {
    .header .header-logo {
        left: 20px;
        width: 15.5555555556vw
    }
}

@media (max-width:1024px) {
    .header .header-logo {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 161px
    }
}

.header .header-logo img {
    display: block;
    width: 100%
}

.header .header-contact {
    align-items: center;
    background: #fdb913;
    border-radius: 50px;
    color: #fff;
    display: flex;
    font-size: 1.7rem;
    font-weight: 600;
    height: 50px;
    justify-content: center;
    line-height: 1.6;
    overflow: hidden;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 145px
}

@media (max-width:1439px) {
    .header .header-contact {
        right: 20px
    }
}

@media (max-width:1024px) {
    .header .header-contact {
        display: none
    }
}

.header .header-contact:after {
    background: linear-gradient(180deg, #fecc09, #fdbd11);
    border-radius: 50px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease-out;
    width: 100%;
    z-index: 0
}

@media (min-width:768px)and (pointer:fine) {
    .header .header-contact:hover:after {
        opacity: 1
    }
}

.header .header-contact span {
    position: relative;
    z-index: 1
}

.header .header-menu {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 12px;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    z-index: 1
}

@media (min-width:1025px) {
    .header .header-menu {
        display: none
    }
}

.header .header-menu-inner {
    height: 12px;
    position: relative;
    width: 100%
}

.header .header-menu-inner span {
    background-color: #fdb913;
    border-radius: 29px;
    height: 3px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.header .header-menu-inner span:nth-child(2) {
    bottom: 0;
    top: auto
}

@media (min-width:1025px) {
    .header.is-sticky .header-inner {
        left: 0;
        position: fixed;
        top: 0;
        width: 100%
    }

    .header.is-small .header-inner {
        height: 80px
    }
}

.heading-bar {
    background-color: #4c4745;
    border-radius: 12px;
    color: #fdb913;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    padding: 19px 20px 21px;
    text-align: center
}

@media (max-width:1024px) {
    .heading-bar {
        font-size: 3.515625vw;
        padding-bottom: 2.05078125vw;
        padding-top: 1.85546875vw
    }
}

@media (max-width:767px) {
    .heading-bar {
        background: none;
        font-size: 2.1rem;
        line-height: 1.5238095238;
        padding: 0;
        text-align: left
    }
}

.heading-category-icon {
    align-items: center;
    display: flex;
    gap: 13px
}

.heading-category-icon+.list-product-flavor {
    margin-top: 40px
}

@media (max-width:1024px) {
    .heading-category-icon+.list-product-flavor {
        margin-top: 25px
    }
}

.heading-category-icon .icon {
    display: block;
    flex-shrink: 0
}

.heading-category-icon .icon img {
    display: block;
    height: 32px;
    width: auto
}

.heading-category-icon .title {
    display: block;
    flex: 1;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

.heading-group {
    background-color: #4c4745;
    border-radius: 12px;
    padding: 19px 20px 21px;
    text-align: center
}

@media (max-width:1024px) {
    .heading-group {
        padding-bottom: 2.05078125vw;
        padding-top: 1.85546875vw
    }
}

@media (max-width:767px) {
    .heading-group {
        padding: 8px 10px 10px
    }
}

.heading-group>span {
    color: #fdb913;
    display: inline-block;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    position: relative
}

@media (max-width:1024px) {
    .heading-group>span {
        font-size: 3.515625vw
    }
}

@media (max-width:767px) {
    .heading-group>span {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.heading-group>span:after {
    background: url(../image/ico_tab_arrow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 9px;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 14px
}

@media (max-width:767px) {
    .heading-group>span:after {
        height: 5px;
        width: 10px
    }
}

.heading-group+.heading-category-icon,
.heading-group+.list-product-flavor {
    margin-top: 40px
}

@media (max-width:1024px) {

    .heading-group+.heading-category-icon,
    .heading-group+.list-product-flavor {
        margin-top: 25px
    }
}

.heading-page {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381;
    text-align: center
}

@media (max-width:767px) {
    .heading-page {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

.heading-page.is-news-event>span {
    background-color: #fff;
    border: 1px solid #fdb913;
    border-radius: 60px;
    color: #fdb913;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin: 0 auto;
    min-width: 165px;
    padding: 13px 15px 15px
}

@media (max-width:767px) {
    .heading-page.is-news-event>span {
        font-size: 1.7rem;
        line-height: 1.7058823529;
        min-width: 142px;
        padding: 9px 10px 10px
    }
}

.heading-page.is-news-event+.section-article-detail {
    margin-top: 40px
}

@media (max-width:767px) {
    .heading-page.is-news-event+.section-article-detail {
        margin-top: 20px
    }
}

.hero-normal {
    margin: 0 auto;
    max-width: 1440px;
    position: relative
}

.hero-normal .hero-image {
    border-radius: 0 0 60px 60px;
    display: block;
    width: 100%
}

@media (max-width:1300px) {
    .hero-normal .hero-image {
        border-radius: 0 0 4.6153846154vw 4.6153846154vw
    }
}

@media (max-width:767px) {
    .hero-normal .hero-image {
        border-radius: 0 0 12px 12px
    }
}

.hero-normal .icon-loading {
    background: url(../image/ico_loading.webp) no-repeat;
    background-size: contain;
    height: 150px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    z-index: 1
}

@media (max-width:767px) {
    .hero-normal .icon-loading {
        height: 90px;
        width: 90px
    }
}

.hero-normal .icon-loading .icon-loading-inner {
    color: #fff;
    display: flex;
    font-size: 1.8rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1.6666666667;
    margin-top: 28px;
    text-align: center
}

@media (max-width:767px) {
    .hero-normal .icon-loading .icon-loading-inner {
        font-size: 1.2rem;
        margin-top: 18px
    }
}

.hero-normal .icon-loading .loader {
    animation: loading1 1s steps(4) infinite;
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side, #fff 90%, transparent) 0/33.3333333333% 100% space;
    clip-path: inset(0 100% 0 0);
    margin-left: 4px;
    margin-top: 10px;
    width: 12px
}

@media (max-width:767px) {
    .hero-normal .icon-loading .loader {
        margin-left: 3px;
        margin-top: 8px;
        width: 8px
    }
}

.hero-normal .icon-scroll {
    background: url(../image/icon_scroll.svg) no-repeat;
    background-size: contain;
    bottom: 42px;
    height: 49px;
    position: absolute;
    right: 40px;
    width: 16px;
    z-index: 1
}

@media (max-width:820px) {
    .hero-normal .icon-scroll {
        display: none
    }
}

.hero-normal .icon-scroll>span {
    display: block;
    height: 15px;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
    width: 16px
}

.hero-normal .icon-scroll>span:after {
    animation: scroll 2s linear infinite;
    background-color: #fff;
    border-radius: 29;
    content: "";
    height: 7px;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    top: 0;
    width: 2px
}

.hero-slider {
    margin: 0 auto;
    max-width: 1440px;
    position: relative
}

.hero-slider .icon-loading {
    background: url(../image/ico_loading.webp) no-repeat;
    background-size: contain;
    height: 150px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    z-index: 1
}

@media (max-width:767px) {
    .hero-slider .icon-loading {
        height: 90px;
        width: 90px
    }
}

.hero-slider .icon-loading .icon-loading-inner {
    color: #fff;
    display: flex;
    font-size: 1.8rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1.6666666667;
    margin-top: 28px;
    text-align: center
}

@media (max-width:767px) {
    .hero-slider .icon-loading .icon-loading-inner {
        font-size: 1.2rem;
        margin-top: 18px
    }
}

.hero-slider .icon-loading .loader {
    animation: loading1 1s steps(4) infinite;
    aspect-ratio: 4;
    background: radial-gradient(circle closest-side, #fff 90%, transparent) 0/33.3333333333% 100% space;
    clip-path: inset(0 100% 0 0);
    margin-left: 4px;
    margin-top: 10px;
    width: 12px
}

@media (max-width:767px) {
    .hero-slider .icon-loading .loader {
        margin-left: 3px;
        margin-top: 8px;
        width: 8px
    }
}

.hero-slider .icon-scroll {
    background: url(../image/icon_scroll.svg) no-repeat;
    background-size: contain;
    bottom: 42px;
    height: 49px;
    position: absolute;
    right: 40px;
    width: 16px;
    z-index: 3
}

@media (max-width:1400px) {
    .hero-slider .icon-scroll {
        bottom: 80px
    }
}

@media (max-width:820px) {
    .hero-slider .icon-scroll {
        display: none
    }
}

.hero-slider .icon-scroll>span {
    display: block;
    height: 15px;
    margin-top: 5px;
    overflow: hidden;
    position: relative;
    width: 16px
}

.hero-slider .icon-scroll>span:after {
    animation: scroll 2s linear infinite;
    background-color: #fff;
    border-radius: 29;
    content: "";
    height: 7px;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    top: 0;
    width: 2px
}

.hero-slider .box-slider {
    position: relative
}

@media (max-width:820px) {
    .hero-slider .box-slider {
        border-radius: 0 0 12px 12px;
        overflow: hidden
    }
}

.hero-slider .box-slider:after,
.hero-slider .box-slider:before {
    background: linear-gradient(0deg, hsla(0, 0%, 7%, 0), #131313);
    content: "";
    height: 150px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s;
    width: 100%;
    z-index: 2
}

@media (max-width:820px) {

    .hero-slider .box-slider:after,
    .hero-slider .box-slider:before {
        display: none
    }
}

.hero-slider .box-slider:after {
    background: linear-gradient(180deg, hsla(0, 0%, 7%, 0), #131313);
    bottom: 0;
    top: auto
}

@media (max-width:820px) {
    .hero-slider .box-slider:after {
        border-radius: 0 0 12px 12px;
        display: block;
        height: 30px
    }
}

.hero-slider.is-loaded .box-slider:before {
    opacity: .15
}

.hero-slider.is-loaded .box-slider:after {
    opacity: .2
}

@media (max-width:820px) {
    .hero-slider.is-loaded .box-slider:after {
        opacity: .1
    }
}

.hero-slider .hero-image {
    position: relative
}

.hero-slider .hero-image img {
    display: block;
    width: 100%
}

.hero-slider .hero-video {
    overflow: hidden;
    padding-top: 48.6111111111%;
    position: relative
}

.hero-slider .hero-video .video-container {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.hero-slider .hero-video .video-container iframe {
    aspect-ratio: 16/9;
    border: 0;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 0
}

.hero-slider .hero-video .video-container:after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.hero-slider .hero-nav-next,
.hero-slider .hero-nav-prev {
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .05);
    cursor: pointer;
    display: block;
    height: 50px;
    opacity: 0;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-out, opacity .2s ease-out;
    width: 50px;
    z-index: 3
}

@media (max-width:820px) {

    .hero-slider .hero-nav-next,
    .hero-slider .hero-nav-prev {
        display: none
    }
}

.hero-slider .hero-nav-next:after,
.hero-slider .hero-nav-prev:after {
    background: url(../image/icon_mv_arrow_yellow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px
}

@media (min-width:768px)and (pointer:fine) {

    .hero-slider .hero-nav-next:not(.swiper-button-disabled):hover,
    .hero-slider .hero-nav-prev:not(.swiper-button-disabled):hover {
        background-color: #fdb913
    }

    .hero-slider .hero-nav-next:not(.swiper-button-disabled):hover:after,
    .hero-slider .hero-nav-prev:not(.swiper-button-disabled):hover:after {
        background-image: url(../image/icon_mv_arrow_white.svg)
    }
}

.hero-slider .hero-nav-prev {
    left: 40px;
    right: auto
}

.hero-slider .hero-nav-prev:after {
    transform: translate(-50%, -50%) rotate(180deg)
}

@media (min-width:768px)and (pointer:fine) {

    .hero-slider:hover .hero-nav-next,
    .hero-slider:hover .hero-nav-prev {
        opacity: 1
    }

    .hero-slider:hover .hero-nav-next.swiper-button-disabled,
    .hero-slider:hover .hero-nav-prev.swiper-button-disabled {
        cursor: default;
        opacity: .5
    }

    .hero-slider:hover .hero-nav-next.swiper-button-lock,
    .hero-slider:hover .hero-nav-prev.swiper-button-lock {
        display: none
    }
}

.hero-slider .hero-pagination {
    bottom: 75px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    left: 0;
    position: absolute;
    z-index: 3
}

@media (max-width:820px) {
    .hero-slider .hero-pagination {
        bottom: 11px
    }
}

.hero-slider .hero-pagination .swiper-pagination-bullet {
    background-color: #fff;
    height: 6px;
    margin: 1px;
    opacity: .5;
    width: 6px
}

.hero-slider .hero-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    height: 8px;
    margin: 0;
    opacity: 1;
    width: 8px
}

.hero-slider .link {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}

@keyframes scroll {
    0% {
        transform: translateY(-150%)
    }

    50% {
        opacity: 1
    }

    90% {
        opacity: 0
    }

    to {
        opacity: 0;
        transform: translateY(150%)
    }
}

@keyframes loading1 {
    to {
        clip-path: inset(0 -34% 0 0)
    }
}

.input-search-text {
    position: relative
}

.input-search-text input {
    background-color: #fef9ed;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, .04);
    color: #4c4745;
    font: FC Iconic, sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    height: 50px;
    line-height: 1.75;
    outline: none;
    padding: 10px 40px 10px 20px;
    width: 100%
}

.input-search-text input::-moz-placeholder {
    color: #5d5856;
    opacity: 1
}

.input-search-text input::placeholder {
    color: #5d5856;
    opacity: 1
}

.input-search-text .btn-clear {
    background: url(../image/icon_input_clear.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    display: none;
    height: 23px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px
}

.input-select-box {
    position: relative;
    z-index: 3
}

.input-select-box .input-select-text {
    background-color: #fef9ed;
    border-radius: 8px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, .04);
    color: #5d5856;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 300;
    height: 50px;
    line-height: 1.75;
    padding: 11px 40px 11px 20px;
    position: relative
}

.input-select-box .input-select-text>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.input-select-box .input-select-text:after {
    background: url(../image/icon_select_arrow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 23px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px
}

.input-select-box .input-select-text.is-selected {
    color: #4c4745
}

.input-select-box .input-select-text.is-open:after {
    transform: translateY(-50%) rotate(180deg)
}

.input-select-box .input-select-option {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .04);
    display: none;
    overflow: hidden;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    width: 100%
}

.input-select-box .input-select-option>li {
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    padding: 10px 20px
}

.input-select-box .input-select-option>li:hover {
    background-color: #f9f9f9
}

.list-award {
    display: grid;
    gap: 60px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 60px
}

@media (max-width:1300px) {
    .list-award {
        gap: 4.6153846154vw
    }
}

@media (max-width:1080px) {
    .list-award {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:767px) {
    .list-award {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30px;
        padding: 0 29px
    }
}

@media (max-width:650px) {
    .list-award {
        gap: 50px;
        grid-template-columns: 100%
    }
}

.list-award .card-award {
    cursor: pointer
}

.list-award .card-award .title-award {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.75;
    text-align: center
}

.list-award .card-award .box-image {
    aspect-ratio: 270/355;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    margin-top: 20px;
    overflow: hidden;
    padding: 25px 46px;
    position: relative
}

@media (max-width:1300px) {
    .list-award .card-award .box-image {
        padding: 1.9230769231vw 3.5384615385vw
    }
}

@media (max-width:767px) {
    .list-award .card-award .box-image {
        padding: 25px 46px
    }
}

.list-award .card-award .box-image .box-image-in {
    flex: 1;
    position: relative
}

.list-award .card-award .box-image img {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.list-award .card-award .box-image:after,
.list-award .card-award .box-image:before {
    content: "";
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease-out
}

.list-award .card-award .box-image:before {
    background: rgba(76, 71, 69, .5);
    border-radius: 12px;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1
}

.list-award .card-award .box-image:after {
    background: url(../image/icon_zoom_01.svg) no-repeat;
    background-size: contain;
    height: 72px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    z-index: 2
}

@media (min-width:768px)and (pointer:fine) {

    .list-award .card-award:hover .box-image:after,
    .list-award .card-award:hover .box-image:before {
        opacity: 1
    }
}

.list-cmn-article {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 1fr;
    margin-top: 80px
}

@media (max-width:1300px) {
    .list-cmn-article {
        gap: 4.6153846154vw
    }
}

@media (max-width:767px) {
    .list-cmn-article {
        gap: 16px;
        grid-template-columns: 100%;
        margin-top: 30px
    }
}

#app-articles .list-cmn-article {
    margin-top: 60px
}

@media (max-width:767px) {
    #app-articles .list-cmn-article {
        margin-top: 16px
    }
}

.mod-modal {
    background-color: rgba(76, 71, 69, .5);
    display: none;
    height: 100%;
    height: 100dvh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 15
}

.modal-award {
    display: flex;
    height: 100%;
    padding: 50px;
    width: 100%
}

@media (max-width:767px) {
    .modal-award {
        padding: 10px
    }
}

.modal-award .modal-award-inner {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
    height: 100%;
    margin: auto;
    max-height: 800px;
    max-width: 1040px;
    padding: 60px;
    position: relative;
    width: 100%
}

@media (max-width:767px) {
    .modal-award .modal-award-inner {
        padding: 30px
    }
}

.modal-award .btn-close {
    background: url(../image/icon_close.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    display: block;
    height: 27px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 27px;
    z-index: 1
}

@media (min-width:768px) {
    .modal-award .btn-close {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .modal-award .btn-close:hover {
        opacity: .8;
        text-decoration: none
    }
}

.modal-award .box-image {
    height: 100%;
    position: relative;
    width: 100%
}

.modal-award .box-image>img {
    display: block;
    height: 100%;
    margin: 0 auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.modal-sns {
    display: flex;
    height: 100%;
    padding: 50px;
    width: 100%
}

@media (max-width:767px) {
    .modal-sns {
        align-items: flex-end;
        padding: 0
    }
}

.modal-sns .modal-sns-in {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
    margin: auto;
    max-width: 760px;
    padding: 85px 40px 88px;
    position: relative;
    width: 100%
}

@media (max-width:767px) {
    .modal-sns .modal-sns-in {
        border-radius: 25px 25px 0 0;
        margin: 0;
        max-width: none;
        padding: 56px 20px 78px
    }
}

.modal-sns .text-copy {
    background-color: hsla(13, 11%, 83%, .9);
    border-radius: 5px;
    bottom: 20px;
    display: none;
    font-size: 1.2rem;
    font-weight: 300;
    left: 50%;
    line-height: 1.6666666667;
    padding: 3px 20px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 1
}

.modal-sns .btn-close {
    background: url(../image/icon_close.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    display: block;
    height: 27px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 27px;
    z-index: 1
}

@media (min-width:768px) {
    .modal-sns .btn-close {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .modal-sns .btn-close:hover {
        opacity: .8;
        text-decoration: none
    }
}

.modal-sns .title-share {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    text-align: center
}

@media (max-width:767px) {
    .modal-sns .title-share {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.modal-sns .text-share {
    color: #5d5856;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin-top: 15px;
    text-align: center
}

@media (max-width:767px) {
    .modal-sns .text-share {
        font-size: 1.6rem;
        line-height: 1.75;
        margin-top: 10px
    }
}

.modal-sns .box-sns-list {
    display: flex;
    gap: 35px;
    justify-content: center;
    margin-top: 50px;
    padding-top: 50px;
    position: relative
}

@media (max-width:767px) {
    .modal-sns .box-sns-list {
        gap: 20px;
        margin-top: 40px;
        padding-top: 40px
    }
}

.modal-sns .box-sns-list:before {
    background-color: #fdb913;
    content: "";
    height: 1px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 300px
}

@media (max-width:767px) {
    .modal-sns .box-sns-list:before {
        width: 200px
    }
}

.modal-sns .btn-sns {
    cursor: pointer;
    display: block
}

@media (min-width:768px)and (pointer:fine) {
    .modal-sns .btn-sns:hover .btn-sns-image .hover {
        opacity: 1
    }
}

.modal-sns .btn-sns-image {
    position: relative
}

.modal-sns .btn-sns-image img {
    display: block;
    width: 62px
}

@media (max-width:767px) {
    .modal-sns .btn-sns-image img {
        width: 42px
    }
}

.modal-sns .btn-sns-image img.hover {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease-out;
    z-index: 1
}

.modal-sns .btn-sns-name {
    color: #4c4745;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin-top: 10px;
    text-align: center
}

.modal-thanks {
    display: flex;
    height: 100%;
    padding: 50px;
    width: 100%
}

@media (max-width:767px) {
    .modal-thanks {
        align-items: flex-end;
        padding: 0
    }
}

.modal-thanks .btn-close {
    background: url(../image/icon_close.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    display: block;
    height: 27px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 27px;
    z-index: 1
}

@media (min-width:768px) {
    .modal-thanks .btn-close {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .modal-thanks .btn-close:hover {
        opacity: .8;
        text-decoration: none
    }
}

.modal-thanks .modal-thanks-in {
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
    display: flex;
    height: 300px;
    justify-content: center;
    margin: auto;
    max-width: 460px;
    padding: 20px;
    position: relative;
    width: 100%
}

@media (max-width:767px) {
    .modal-thanks .modal-thanks-in {
        border-radius: 25px 25px 0 0;
        margin: 0;
        max-width: none;
        padding: 56px 20px 78px
    }
}

.modal-thanks .modal-thanks-content {
    text-align: center
}

.modal-thanks .modal-thanks-content .icon {
    display: block;
    margin: 0 auto;
    width: 58px
}

.modal-thanks .modal-thanks-content .modal-title {
    color: #fdb913;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    margin-top: 20px
}

@media (max-width:767px) {
    .modal-thanks .modal-thanks-content .modal-title {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.modal-thanks .modal-thanks-content .modal-text {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    margin-top: 10px
}

@media (max-width:1024px) {
    .nav-global {
        background-color: #fef9ed;
        border-radius: 25px 0 0 25px;
        box-shadow: 0 1px 15px rgba(0, 0, 0, .1);
        height: 100%;
        overflow: hidden;
        padding: 77px 20px 40px 40px;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100%);
        transition: transform .3s ease-out;
        width: 316px;
        z-index: 12
    }

    .nav-global.is-open {
        transform: translateX(0)
    }

    .nav-global .nav-global-inner {
        height: 100%;
        overflow: auto
    }

    .nav-global .nav-global-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100%
    }
}

.nav-global .list-nav {
    align-items: center;
    display: flex;
    gap: 46px;
    justify-content: center
}

@media (max-width:1300px) {
    .nav-global .list-nav {
        gap: 3.0769230769vw
    }
}

@media (max-width:1024px) {
    .nav-global .list-nav {
        flex-direction: column;
        gap: 15px
    }
}

.nav-global .list-nav li {
    position: relative
}

@media (max-width:1024px) {
    .nav-global .list-nav li {
        width: 100%
    }
}

@media(min-width:1081px)and (pointer:fine) {
    .nav-global .list-nav li:hover .nav-main:after {
        opacity: 1
    }

    .nav-global .list-nav li:hover .has-sub>span:after {
        transform: translateY(-50%) rotate(180deg)
    }
}

.nav-global .list-nav li.pc-hide {
    display: none
}

@media (max-width:1024px) {
    .nav-global .list-nav li.pc-hide {
        display: block
    }
}

.nav-global .nav-main {
    align-items: center;
    color: #4c4745;
    cursor: pointer;
    display: flex;
    font-size: 1.7rem;
    font-weight: 600;
    height: 96px;
    justify-content: center;
    line-height: 1.7058823529;
    transition: height .2s ease-out
}

@media (max-width:1024px) {
    .nav-global .nav-main {
        display: block;
        font-size: 1.8rem;
        font-weight: 600;
        height: auto;
        line-height: 1.67
    }
}

.nav-global .nav-main:after {
    background: linear-gradient(90deg, #fdb913, #ffd703);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .2s ease-out;
    width: 100%
}

@media (max-width:1024px) {
    .nav-global .nav-main:after {
        display: none
    }
}

.nav-global .nav-main.is-current:after {
    opacity: 1
}

.nav-global .nav-main.has-sub>span {
    display: block;
    padding-right: 20px;
    position: relative
}

@media (max-width:1024px) {
    .nav-global .nav-main.has-sub>span {
        display: inline-block;
        padding-right: 15px
    }
}

.nav-global .nav-main.has-sub>span:after {
    background: url(../image/icon_nav_arrow_down.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .2s ease-out;
    width: 12px
}

@media (max-width:1024px) {
    .nav-global .nav-main.has-sub>span:after {
        background: url(../image/icon_nav_arrow_right.svg) no-repeat;
        background-size: contain;
        height: 12px;
        width: 7px
    }
}

.nav-global .btn-close {
    background: url(../image/icon_nav_close.svg) no-repeat;
    background-size: contain;
    cursor: pointer;
    display: block;
    height: 18px;
    position: absolute;
    right: 20px;
    top: 24px;
    width: 18px;
    z-index: 2
}

@media (min-width:1025px) {
    .nav-global .btn-close {
        display: none
    }
}

.nav-global .nav-lang {
    display: none
}

@media (max-width:1024px) {
    .nav-global .nav-lang {
        display: flex;
        gap: 15px;
        margin-top: 40px
    }
}

.nav-global .nav-lang .link-lang {
    align-items: center;
    background-color: #fff;
    border-radius: 100%;
    color: #fdb913;
    display: flex;
    font-size: 1.2rem;
    font-weight: 600;
    height: 42px;
    justify-content: center;
    line-height: 1.6666666667;
    width: 42px
}

.nav-global .nav-lang .link-lang.is-active {
    background-color: #fdb913;
    color: #fff
}

.nav-global .nav-sub {
    background-color: #fef9ed;
    border: 2px solid #fdb913;
    border-radius: 8px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .05);
    display: none;
    left: 0;
    min-width: 175px;
    padding: 15px 10px;
    position: absolute;
    top: calc(100% - 8px);
    z-index: 1
}

.nav-global .list-nav-sub {
    display: flex;
    flex-direction: column
}

.nav-global .list-nav-sub a,
.nav-global .list-nav-sub p {
    border-radius: 8px;
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    padding: 5px 29px;
    transition: background-color .2s ease-out, color .2s ease-out;
    white-space: nowrap
}

@media (min-width:768px)and (pointer:fine) {
    .nav-global .list-nav-sub a:hover {
        background-color: #fdb913;
        color: #fff
    }
}

.nav-global .nav-sub-sp {
    animation: fadeMoveOut .3s forwards;
    background-color: #fef9ed;
    border-radius: 25px 0 0 25px;
    height: 100%;
    left: 0;
    opacity: 0;
    padding: 77px 20px 40px 40px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.nav-global .nav-sub-sp.is-open {
    animation: fadeMoveIn .3s forwards;
    pointer-events: auto
}

.nav-global .nav-sub-sp .box-inner {
    height: 100%;
    overflow: auto;
    width: 100%
}

.nav-global .nav-sub-sp .box-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%
}

.nav-global .nav-sub-sp .list-link {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.nav-global .nav-sub-sp .link {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

.nav-global .nav-sub-sp .btn-back {
    background-color: #fff;
    border-radius: 100%;
    display: block;
    height: 42px;
    margin-top: 40px;
    position: relative;
    width: 42px
}

.nav-global .nav-sub-sp .btn-back:after {
    background: url(../image/icon_nav_back.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px
}

.nav-global-overlay {
    background-color: rgba(76, 71, 69, .5);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11
}

@media (min-width:1025px) {
    .is-small .nav-main {
        height: 80px
    }
}

@keyframes fadeMoveIn {
    0% {
        opacity: 0;
        transform: translateX(15px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes fadeMoveOut {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(15px)
    }
}

.section-brand-info {
    padding: 0 20px;
    position: relative;
    z-index: 2
}

@media (max-width:1024px) {
    .section-brand-info {
        padding: 16px 16px 0
    }
}

.section-brand-info .section-inner {
    background-color: #fff;
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto 62.6086956522%;
    margin: 0 auto;
    max-width: 1260px;
    padding: 80px 50px 80px 60px;
    transform: translateY(-50px)
}

@media (max-width:1300px) {
    .section-brand-info .section-inner {
        padding: 6.1538461538vw 3.8461538462vw 6.1538461538vw 4.6153846154vw
    }
}

@media (max-width:1024px) {
    .section-brand-info .section-inner {
        display: block;
        max-width: none;
        padding: 20px 20px 30px;
        transform: none
    }
}

.section-brand-info .title-brand {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381
}

@media (max-width:767px) {
    .section-brand-info .title-brand {
        font-size: 2.4rem;
        line-height: 1.5
    }

    .section-brand-info .box-info {
        margin-top: 20px
    }
}

.tab-category {
    margin-top: 10px
}

@media (max-width:1024px) {
    .tab-category {
        margin-top: 16px
    }
}

.tab-category .tab-head {
    border-radius: 12px;
    display: flex;
    overflow: hidden
}

.tab-category .tab-head .tab-button {
    background: #fff;
    cursor: pointer;
    flex: 1;
    padding: 20px;
    text-align: center
}

@media (max-width:1260px) {
    .tab-category .tab-head .tab-button {
        padding: 1.5873015873vw
    }
}

@media (max-width:767px) {
    .tab-category .tab-head .tab-button {
        padding: 9px
    }
}

@media (min-width:768px)and (pointer:fine)and (min-width:768px) {
    .tab-category .tab-head .tab-button {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .tab-category .tab-head .tab-button:hover {
        opacity: .8;
        text-decoration: none
    }
}

.tab-category .tab-head .tab-button>span {
    color: #fdb913;
    display: inline-block;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    position: relative
}

@media (max-width:1260px) {
    .tab-category .tab-head .tab-button>span {
        font-size: 2.8571428571vw
    }
}

@media (max-width:767px) {
    .tab-category .tab-head .tab-button>span {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.tab-category .tab-head .tab-button.is-active {
    background-color: #4c4745;
    cursor: default;
    opacity: 1
}

.tab-category .tab-head .tab-button.is-active>span:after {
    background: url(../image/ico_tab_arrow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 9px;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    width: 14px
}

@media (max-width:767px) {
    .tab-category .tab-head .tab-button.is-active>span:after {
        height: 5px;
        width: 10px
    }
}

.tab-category .tab-content {
    padding-top: 40px
}

.wrapper-main {
    background: url(../image/bg_pattern_pc.svg) #f7f3f1 top repeat;
    background-size: 1564px 1566px;
    overflow: hidden;
    padding-bottom: 20px
}

@media (max-width:767px) {
    .wrapper-main {
        background-image: url(../image/bg_pattern_sp.svg);
        background-size: 495px 1015px
    }
}

.section-about-history {
    margin-top: 80px;
    padding: 0 20px
}

@media (max-width:767px) {
    .section-about-history {
        margin-top: 16px;
        padding: 0 16px
    }
}

.section-about-history .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-about-quality {
    margin-top: 160px;
    padding: 80px 20px;
    position: relative
}

@media (max-width:767px) {
    .section-about-quality {
        margin-top: 16px;
        padding: 50px 16px
    }
}

.section-about-quality:before {
    background-color: #fff;
    border-radius: 150px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

@media (max-width:1300px) {
    .section-about-quality:before {
        border-radius: 9.2307692308vw
    }
}

@media (max-width:767px) {
    .section-about-quality:before {
        border-radius: 30px
    }
}

.section-about-quality .section-inner {
    margin: 0 auto;
    max-width: 1260px;
    position: relative;
    z-index: 1
}

.section-about-quality .logo {
    display: block;
    margin: 0 auto;
    width: 386px
}

@media (max-width:767px) {
    .section-about-quality .logo {
        width: 226px
    }
}

.section-about-quality .box-mv {
    margin-top: 74px
}

@media (max-width:767px) {
    .section-about-quality .box-mv {
        margin-top: 30px
    }
}

.section-about-quality .box-mv img {
    display: block;
    margin: 0 auto;
    max-width: 1114px;
    width: 100%
}

@media (max-width:767px) {
    .section-about-quality .box-mv img {
        max-width: none
    }
}

.section-about-quality .box-content {
    margin-top: 93px
}

@media (max-width:767px) {
    .section-about-quality .box-content {
        margin-top: 30px
    }
}

.section-about-quality .box-content-in {
    margin: 60px auto 0;
    max-width: 1160px
}

@media (max-width:767px) {
    .section-about-quality .box-content-in {
        margin-top: 20px
    }
}

.section-about-award {
    margin-top: 80px;
    padding: 0 20px 80px
}

@media (max-width:767px) {
    .section-about-award {
        margin-top: 30px;
        padding: 0 16px 50px
    }
}

.section-about-award .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-article-main {
    padding: 60px 20px 80px
}

@media (max-width:767px) {
    .section-article-main {
        padding: 30px 16px 16px
    }
}

.section-article-main .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-article-detail {
    margin-top: 80px
}

@media (max-width:767px) {
    .section-article-detail {
        margin-top: 30px
    }
}

.section-article-detail .title-article {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381;
    text-align: center
}

@media (max-width:767px) {
    .section-article-detail .title-article {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

.section-article-detail .text-date {
    color: #5d5856;
    font-size: 1.6rem;
    line-height: 1.75;
    margin-top: 30px;
    text-align: center
}

.section-article-detail .btn-share {
    background: #fff;
    border-radius: 100%;
    display: block;
    height: 42px;
    margin: 30px auto 0;
    position: relative;
    transition: background-color .2s ease-out;
    width: 42px
}

.section-article-detail .btn-share:after {
    background: url(../image/ico_share_yellow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 20px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px
}

@media (min-width:768px)and (pointer:fine) {
    .section-article-detail .btn-share:hover {
        background-color: #fdb913
    }

    .section-article-detail .btn-share:hover:after {
        background-image: url(../image/ico_share_white.svg)
    }
}

.section-article-detail .box-content {
    background-color: #fff;
    border-radius: 12px;
    margin: 60px auto 0;
    max-width: 860px;
    padding: 20px
}

@media (max-width:767px) {
    .section-article-detail .box-content {
        border-radius: 8px;
        margin-top: 30px;
        padding: 8px
    }
}

.section-article-detail .box-content .image-main img {
    border-radius: 8px;
    display: block;
    width: 100%
}

.section-article-detail .box-content-in {
    margin-top: 40px;
    padding: 0 54px 60px
}

@media (max-width:1300px) {
    .section-article-detail .box-content-in {
        padding: 0 4.1538461538vw 4.6153846154vw
    }
}

@media (max-width:767px) {
    .section-article-detail .box-content-in {
        margin-top: 20px;
        padding: 0 11px 20px
    }
}

.section-article-detail .box-dot-line {
    background: url(../image/ico_dot_line.svg) no-repeat;
    background-size: contain;
    height: 4px;
    margin: 80px auto 0;
    width: 32px
}

.section-article-related {
    padding: 0 20px 80px
}

@media (max-width:767px) {
    .section-article-related {
        padding: 0 16px 50px
    }
}

.section-article-related .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-article-related .title-section {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    text-align: center
}

@media (max-width:767px) {
    .section-article-related .title-section {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-article-related .text-more {
    font-size: 1.6rem;
    line-height: 1.75;
    margin-top: 60px;
    text-align: center
}

@media (max-width:767px) {
    .section-article-related .text-more {
        margin-top: 40px
    }
}

.section-article-related .btn-more {
    background-color: #fff;
    border-radius: 60px;
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    margin: 30px auto 0;
    min-width: 130px;
    padding: 14px 26px 17px;
    transition: color .2s ease-out, background-color .2s ease-out
}

@media (max-width:767px) {
    .section-article-related .btn-more {
        margin-top: 20px
    }
}

@media (min-width:768px)and (pointer:fine) {
    .section-article-related .btn-more:hover {
        background-color: #fdb913;
        color: #fff
    }
}

.section-brand-category {
    padding: 0 20px 60px
}

@media (max-width:767px) {
    .section-brand-category {
        padding: 0 16px 16px
    }
}

.section-brand-category .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-brand-category .box-brand-products:not(:first-child) {
    margin-top: 60px
}

@media (max-width:767px) {
    .section-brand-category .box-brand-products:not(:first-child) {
        margin-top: 25px
    }
}

.section-brand-category .box-brand-products-carousel {
    margin-top: 20px
}

@media (min-width:768px) {
    .section-brand-category .box-brand-products-carousel:hover .swiper-navigation {
        opacity: 1
    }
}

.section-brand-category .box-brand-products-carousel .box-carousel-in {
    position: relative
}

.section-brand-category .box-brand-products-carousel .swiper {
    margin: 0 -20px;
    padding: 20px 20px 0
}

@media (max-width:767px) {
    .section-brand-category .box-brand-products-carousel .swiper {
        margin: 0;
        padding: 0
    }

    .section-brand-category .box-brand-products-carousel .swiper-wrapper {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        transform: none;
        width: auto
    }
}

.section-brand-category .box-brand-products-carousel .swiper-slide {
    height: auto;
    transform: none;
    width: auto
}

.section-brand-category .box-brand-products-carousel .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    margin-top: 40px;
    min-height: 8px;
    position: static;
    width: 100%
}

@media (max-width:767px) {
    .section-brand-category .box-brand-products-carousel .swiper-pagination {
        margin-top: 30px
    }
}

.section-brand-category .box-brand-products-carousel .swiper-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.section-brand-category .box-brand-products-carousel .swiper-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.section-brand-category .box-brand-products-carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

.section-brand-category .box-brand-products-carousel .swiper-navigation {
    opacity: 0;
    transition: opacity .2s ease-out
}

@media (max-width:767px) {
    .section-brand-category .box-brand-products-carousel .swiper-navigation {
        display: none
    }
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next,
.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev {
    border: 1px solid #4c4745;
    border-radius: 100%;
    height: 50px;
    left: calc(100% + 20px);
    margin-top: 10px;
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-out, opacity .2s ease-out;
    width: 50px;
    z-index: 2
}

@media (max-width:1439px) {

    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next,
    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev {
        left: auto;
        right: -20px
    }
}

@media (min-width:768px)and (pointer:fine) {

    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover,
    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover {
        background-color: #fdb913;
        border-color: #fdb913
    }

    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover:before,
    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover:before {
        background-image: url(../image/icon_arrow_right_white_01.svg)
    }
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next:before,
.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev:before {
    background: url(../image/icon_arrow_right_black_01.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next:after,
.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev:after {
    display: none
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next.swiper-button-disabled,
.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev.swiper-button-disabled {
    opacity: .5;
    pointer-events: auto
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-next.swiper-button-disabled.swiper-button-lock,
.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev.swiper-button-disabled.swiper-button-lock {
    display: none
}

.section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev {
    left: auto;
    right: calc(100% + 20px);
    transform: rotate(180deg) translateY(50%)
}

@media (max-width:1439px) {
    .section-brand-category .box-brand-products-carousel .swiper-navigation .swiper-button-prev {
        left: -20px;
        right: auto
    }
}

.section-contact-main {
    padding: 60px 20px 0;
    position: relative;
    z-index: 0
}

@media (max-width:767px) {
    .section-contact-main {
        padding: 52px 16px 0
    }
}

.section-contact-main .section-inner {
    margin: 0 auto;
    max-width: 1260px;
    position: relative;
    z-index: 1
}

.section-contact-main .title-page {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381;
    position: relative;
    text-align: center
}

@media (max-width:767px) {
    .section-contact-main .title-page {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

.section-contact-main .title-page:after {
    background: linear-gradient(90deg, #fdb913, #fdd813);
    bottom: -20px;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 76px
}

@media (min-width:768px) {
    .section-contact-main .title-page:after {
        display: none
    }
}

.section-contact-main .company-logo {
    display: block;
    margin: 43px auto 0;
    width: 389px
}

@media (max-width:767px) {
    .section-contact-main .company-logo {
        margin-top: 60px;
        width: 267px
    }
}

.section-contact-main .title-company {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    margin-top: 49px;
    text-align: center
}

@media (max-width:767px) {
    .section-contact-main .title-company {
        font-size: 2.1rem;
        line-height: 1.5238095238;
        margin-top: 30px
    }
}

.section-contact-main .text-address {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    margin-top: 30px;
    text-align: center
}

@media (max-width:767px) {
    .section-contact-main .text-address {
        margin-top: 20px
    }
}

.section-contact-main .btn-map {
    background-color: #4c4745;
    border-radius: 60px;
    color: #fff;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin-top: 40px;
    padding: 14px 24px 16px;
    text-align: center;
    transition: background-color .2s ease-out
}

@media (min-width:768px)and (pointer:fine) {
    .section-contact-main .btn-map:hover {
        background-color: #fdb913
    }
}

.section-contact-main .box-contact-info {
    -moz-column-gap: 90px;
    column-gap: 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 142px auto 0;
    max-width: 900px
}

@media (max-width:1300px) {
    .section-contact-main .box-contact-info {
        -moz-column-gap: 6.9230769231vw;
        column-gap: 6.9230769231vw
    }
}

@media (max-width:1000px) {
    .section-contact-main .box-contact-info {
        -moz-column-gap: 5vw;
        column-gap: 5vw
    }
}

@media (max-width:767px) {
    .section-contact-main .box-contact-info {
        gap: 92px;
        grid-template-columns: 100%;
        margin-top: 132px
    }
}

.section-contact-main .box-contact-info .box-item {
    position: relative
}

@media (max-width:767px) {
    .section-contact-main .box-contact-info .box-item {
        margin: 0 auto;
        width: 240px
    }
}

.section-contact-main .box-contact-info .box-item .icon {
    display: block;
    height: 78px;
    left: 50%;
    position: absolute;
    top: -56px;
    transform: translateX(-50%);
    width: 78px;
    z-index: 1
}

.section-contact-main .box-contact-info .box-item .text {
    background: #fff;
    border-radius: 60px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    padding: 14px 10px 16px;
    text-align: center;
    transition: color .2s ease-out
}

@media (max-width:1000px) {
    .section-contact-main .box-contact-info .box-item .text {
        font-size: 1.6rem
    }
}

@media (max-width:767px) {
    .section-contact-main .box-contact-info .box-item .text {
        font-size: 1.8rem
    }
}

@media (min-width:768px)and (pointer:fine) {
    .section-contact-main .box-contact-info a.box-item:hover .text {
        color: #fdb913
    }
}

.section-contact-main .box-contact-mv {
    margin: 110px auto 0;
    max-width: 834px
}

@media (max-width:1300px) {
    .section-contact-main .box-contact-mv {
        margin-top: 8.4615384615vw
    }
}

@media (max-width:767px) {
    .section-contact-main .box-contact-mv {
        margin-top: 54px
    }
}

.section-contact-main .box-contact-mv img {
    display: block;
    width: 100%
}

.section-contact-main .bg-image-01 {
    background: url(../image/bg_contact_01.webp) no-repeat;
    background-size: contain;
    display: block;
    height: 517px;
    left: 0;
    position: absolute;
    top: -136px;
    width: 330px;
    z-index: 0
}

@media (max-width:1300px) {
    .section-contact-main .bg-image-01 {
        height: 39.7692307692vw;
        top: -10.4615384615vw;
        width: 25.3846153846vw
    }
}

@media (max-width:767px) {
    .section-contact-main .bg-image-01 {
        height: 189px;
        top: -62px;
        width: 121px
    }
}

.section-contact-main .bg-image-02 {
    background: url(../image/bg_contact_02.webp) no-repeat;
    background-size: contain;
    display: block;
    height: 955px;
    position: absolute;
    right: 0;
    top: -136px;
    width: 461px;
    z-index: 0
}

@media (max-width:1300px) {
    .section-contact-main .bg-image-02 {
        height: 73.4615384615vw;
        top: -10.4615384615vw;
        width: 35.4615384615vw
    }
}

@media (max-width:767px) {
    .section-contact-main .bg-image-02 {
        height: 364px;
        top: -62px;
        width: 164px
    }
}

.section-contact-main .bg-image-03 {
    background: url(../image/bg_contact_03.webp) no-repeat;
    background-size: contain;
    display: block;
    height: 929px;
    left: 0;
    position: absolute;
    top: 580px;
    width: 346px;
    z-index: 0
}

@media (max-width:1300px) {
    .section-contact-main .bg-image-03 {
        height: 71.4615384615vw;
        top: 44.6153846154vw;
        width: 26.6153846154vw
    }
}

@media (max-width:767px) {
    .section-contact-main .bg-image-03 {
        height: 509px;
        top: 445px;
        width: 156px
    }
}

.section-contact-form {
    margin-top: 140px;
    padding: 0 20px 170px;
    position: relative
}

@media (max-width:1300px) {
    .section-contact-form {
        margin-top: 10.7692307692vw
    }
}

@media (max-width:767px) {
    .section-contact-form {
        margin-top: 110px;
        padding: 0 16px 16px
    }
}

.section-contact-form .section-inner {
    margin: 0 auto;
    max-width: 1260px;
    position: relative;
    z-index: 1
}

.section-contact-form .box-contact-form {
    background-color: #fff;
    border-radius: 12px;
    margin: 0 auto;
    max-width: 860px;
    padding: 40px
}

@media (max-width:767px) {
    .section-contact-form .box-contact-form {
        max-width: none;
        padding: 20px 16px
    }
}

.section-contact-form .box-contact-form .box-contact-form-in {
    margin: 40px auto 0;
    max-width: 600px
}

@media (max-width:767px) {
    .section-contact-form .box-contact-form .box-contact-form-in {
        margin-top: 20px;
        max-width: none
    }
}

.section-contact-form .box-contact-form .title-form {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center
}

@media (max-width:767px) {
    .section-contact-form .box-contact-form .title-form {
        gap: 12px
    }
}

.section-contact-form .box-contact-form .title-form .icon {
    display: block;
    width: 31px
}

@media (max-width:767px) {
    .section-contact-form .box-contact-form .title-form .icon {
        width: 20px
    }
}

.section-contact-form .box-contact-form .title-form .text {
    color: #fdb913;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:767px) {
    .section-contact-form .box-contact-form .title-form .text {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-contact-form form .form-row+.form-row {
    margin-top: 20px
}

.section-contact-form form .form-row input[type=email],
.section-contact-form form .form-row input[type=tel],
.section-contact-form form .form-row input[type=text],
.section-contact-form form .form-row textarea {
    background: #fef9ed;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, .04);
    color: inherit;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 300;
    height: 50px;
    line-height: 1.75;
    outline: none;
    padding: 8px 20px;
    width: 100%
}

.section-contact-form form .form-row input[type=email]::-moz-placeholder,
.section-contact-form form .form-row input[type=tel]::-moz-placeholder,
.section-contact-form form .form-row input[type=text]::-moz-placeholder,
.section-contact-form form .form-row textarea::-moz-placeholder {
    color: #5d5856;
    opacity: 1
}

.section-contact-form form .form-row input[type=email]::placeholder,
.section-contact-form form .form-row input[type=tel]::placeholder,
.section-contact-form form .form-row input[type=text]::placeholder,
.section-contact-form form .form-row textarea::placeholder {
    color: #5d5856;
    opacity: 1
}

.section-contact-form form .form-row textarea {
    height: 128px;
    padding: 11px 20px
}

.section-contact-form form .form-button {
    margin-top: 40px;
    position: relative
}

@media (max-width:767px) {
    .section-contact-form form .form-button {
        margin-top: 20px
    }
}

.section-contact-form form .form-button input[type=submit] {
    background-color: #4c4745;
    border: 0;
    border-radius: 60px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    height: 60px;
    line-height: 1.6666666667;
    margin: 0 auto;
    padding: 14px 5px 16px;
    transition: background-color .2s ease-out;
    width: 150px
}

@media (min-width:768px)and (pointer:fine) {
    .section-contact-form form .form-button input[type=submit]:hover {
        background-color: #fdb913
    }
}

.section-contact-form form .form-button .wpcf7-spinner {
    display: block;
    left: calc(50% + 38px);
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.section-contact-form form.submitting .form-button input[type=submit] {
    cursor: default;
    pointer-events: none
}

.section-contact-form form .wpcf7-not-valid-tip {
    color: red;
    display: block;
    font-size: 1.2rem;
    margin-top: 5px
}

.section-contact-form form .wpcf7-response-output {
    display: none !important
}

.section-contact-form .bg-image-04 {
    background: url(../image/bg_contact_04_pc.webp) no-repeat;
    background-size: contain;
    bottom: -118px;
    display: block;
    height: 964px;
    position: absolute;
    right: 0;
    width: 423px;
    z-index: 0
}

@media (max-width:1300px) {
    .section-contact-form .bg-image-04 {
        bottom: -9.0769230769vw;
        height: 74.1538461538vw;
        width: 32.5384615385vw
    }
}

@media (max-width:767px) {
    .section-contact-form .bg-image-04 {
        background-image: url(../image/bg_contact_04_sp.webp);
        bottom: auto;
        height: 501px;
        top: -212px;
        width: 202px
    }
}

.section-distribution-main {
    padding: 60px 20px 0
}

@media (max-width:767px) {
    .section-distribution-main {
        padding: 30px 16px 0
    }
}

.section-distribution-main .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-distribution-main .title-page {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381;
    text-align: center
}

@media (max-width:767px) {
    .section-distribution-main .title-page {
        font-size: 2.4rem;
        line-height: 1.5
    }
}

.section-distribution-main .box-content-main {
    margin-top: 20px
}

@media (max-width:767px) {
    .section-distribution-main .box-content-main {
        margin-top: 10px
    }
}

.section-distribution-main .box-image {
    margin-top: 60px
}

@media (max-width:767px) {
    .section-distribution-main .box-image {
        margin-top: 30px
    }
}

.section-distribution-main .box-image img {
    border-radius: 30px;
    display: block;
    width: 100%
}

@media (max-width:767px) {
    .section-distribution-main .box-image img {
        border-radius: 12px
    }
}

.section-distribution-list {
    margin-top: 60px;
    padding: 0 20px
}

@media (max-width:767px) {
    .section-distribution-list {
        margin-top: 20px;
        padding: 0 16px
    }
}

.section-distribution-list .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-distribution-list .title-section {
    color: #fdb913;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:767px) {
    .section-distribution-list .title-section {
        font-size: 2.1rem;
        line-height: 1.5238095238;
        text-align: center
    }
}

.box-distribution-list {
    background-color: #fff;
    border-radius: 12px;
    margin-top: 40px;
    padding: 50px
}

@media (max-width:1300px) {
    .box-distribution-list {
        padding-left: 3.8461538462vw;
        padding-right: 3.8461538462vw
    }
}

@media (max-width:767px) {
    .box-distribution-list {
        padding: 25px 16px
    }
}

.box-distribution-list .heading-store {
    color: #e2782e;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

@media (max-width:767px) {
    .box-distribution-list .heading-store {
        text-align: center
    }
}

.box-distribution-list .heading-shop-name {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529
}

.box-distribution-list .text-shop-info {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    margin-top: 20px
}

.box-distribution-search-form {
    display: flex;
    gap: 32px;
    margin-top: 43px
}

@media (max-width:1080px) {
    .box-distribution-search-form {
        flex-direction: column
    }
}

@media (max-width:767px) {
    .box-distribution-search-form {
        gap: 20px;
        margin-top: 24px
    }
}

.box-distribution-search-form .col-input {
    display: flex;
    flex: 1;
    gap: 32px
}

@media (max-width:767px) {
    .box-distribution-search-form .col-input {
        flex-direction: column;
        gap: 20px;
        width: 100%
    }
}

.box-distribution-search-form .col-input-in {
    flex: 1
}

.box-distribution-search-form .col-button {
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    width: 316px
}

@media (max-width:1080px) {
    .box-distribution-search-form .col-button {
        align-self: center
    }
}

.box-distribution-search-form .btn-search {
    align-items: center;
    background: #4c4745;
    border-radius: 60px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: 1;
    font-family: FC Iconic, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    height: 50px;
    justify-content: center;
    line-height: 1.6666666667;
    max-width: 150px;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out
}

.box-distribution-search-form .btn-search>span {
    padding-left: 24px;
    position: relative
}

.box-distribution-search-form .btn-search>span:before {
    background: url(../image/icon_search_yellow.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px
}

@media (min-width:768px)and (pointer:fine) {
    .box-distribution-search-form .btn-search:hover {
        background-color: #fdb913;
        color: #fff
    }

    .box-distribution-search-form .btn-search:hover>span:before {
        background: url(../image/icon_search_white.svg)
    }
}

.box-distribution-search-form .btn-all {
    align-items: center;
    background: none;
    border: 1px solid #4c4745;
    border-radius: 60px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    font-family: FC Iconic, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    height: 50px;
    justify-content: center;
    line-height: 1.6666666667;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    width: 150px
}

@media (min-width:768px)and (pointer:fine) {
    .box-distribution-search-form .btn-all:hover {
        background-color: #fdb913;
        border-color: #fff;
        color: #fff
    }
}

.box-distribution-search-form .btn-all.js-hide-all {
    display: none
}

.list-distribution-shop {
    margin-top: 65px
}

@media (max-width:767px) {
    .list-distribution-shop {
        margin-top: 20px
    }
}

.list-distribution-shop#js-list-distribution-result {
    display: none
}

.list-distribution-shop .list-distribution-inner>.row {
    border-bottom: 1px solid #f7f3f1;
    padding: 20px 0
}

.list-distribution-shop .list-distribution-inner>.row:last-child {
    border-bottom: none
}

.list-distribution-shop .list-distribution-inner>.row>.row-inner {
    display: grid;
    gap: 40px;
    grid-template-columns: 39.6551724138% auto
}

@media (max-width:767px) {
    .list-distribution-shop .list-distribution-inner>.row>.row-inner {
        display: block
    }
}

.list-distribution-shop .list-distribution-inner>.row.is-inter {
    padding: 30px 0
}

@media (max-width:767px) {
    .list-distribution-shop .list-distribution-inner>.row.is-inter {
        padding: 25px 0
    }
}

.list-distribution-shop .list-distribution-inner>.row.is-inter>.row-inner {
    grid-template-columns: 30.1724137931% auto
}

.list-distribution-shop .item-branch+.item-branch {
    margin-top: 20px
}

@media (max-width:767px) {
    .list-distribution-shop .box-shop-info {
        margin-top: 15px;
        padding-left: 10px
    }
}

.list-distribution-shop .text-shop-name {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529
}

.list-distribution-shop .text-icon {
    align-items: flex-start;
    display: flex;
    font-size: 1.6rem;
    font-weight: 300;
    gap: 13px;
    line-height: 1.75
}

.list-distribution-shop .text-icon img {
    display: block;
    margin-top: 5px;
    width: 18px
}

.list-distribution-shop .text-icon+.text-icon {
    margin-top: 10px
}

.list-distribution-shop .text-icon a {
    transition: color .2s ease-out
}

@media (min-width:768px)and (pointer:fine) {
    .list-distribution-shop .text-icon a:hover {
        color: #fdb913
    }
}

.list-distribution-shop .btn-hide-all {
    align-items: center;
    background: none;
    border: 1px solid #4c4745;
    border-radius: 60px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    font-family: FC Iconic, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    height: 50px;
    justify-content: center;
    line-height: 1.6666666667;
    margin: 60px auto 0;
    transition-duration: .2s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-out;
    width: 150px
}

@media (min-width:768px)and (pointer:fine) {
    .list-distribution-shop .btn-hide-all:hover {
        background-color: #fdb913;
        border-color: #fff;
        color: #fff
    }
}

.box-distribution-shop-column {
    display: flex;
    gap: 30px;
    justify-content: space-between
}

@media (max-width:1024px) {
    .box-distribution-shop-column {
        display: block
    }
}

.box-distribution-shop-column .box-info-col {
    flex: 1;
    max-width: 440px
}

@media (max-width:1024px) {
    .box-distribution-shop-column .box-info-col {
        max-width: none
    }
}

.box-distribution-shop-column .box-slider-col {
    width: 610px
}

@media (max-width:1300px) {
    .box-distribution-shop-column .box-slider-col {
        width: 52.5862068966%
    }
}

@media (max-width:1024px) {
    .box-distribution-shop-column .box-slider-col {
        margin: 30px auto 0;
        max-width: 80%;
        width: 100%
    }
}

@media (max-width:600px) {
    .box-distribution-shop-column .box-slider-col {
        max-width: 100%
    }

    .box-distribution-shop-column .box-carousel-pc {
        display: none
    }
}

@media (min-width:601px) {
    .box-distribution-shop-column .box-carousel-sp {
        display: none
    }
}

.box-distribution-shop-column .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    margin-top: 60px;
    position: static;
    width: 100%
}

.box-distribution-shop-column .swiper-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.box-distribution-shop-column .swiper-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.box-distribution-shop-column .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

@media (max-width:1300px) {
    .box-distribution-shop-column .swiper-pagination {
        margin-top: 4.6153846154vw
    }
}

@media (max-width:767px) {
    .box-distribution-shop-column .swiper-pagination {
        margin-top: 30px
    }
}

.section-not-found {
    padding: 120px 40px
}

@media (max-width:767px) {
    .section-not-found {
        padding: 50px 16px
    }
}

.section-not-found .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-not-found .box-not-found {
    text-align: center
}

.section-not-found .box-not-found .heading {
    font-size: 8rem;
    font-weight: 700
}

.section-not-found .box-not-found .text {
    font-size: 3rem
}

.section-not-found .box-not-found .link {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.86;
    margin-top: 40px;
    position: relative
}

.section-not-found .box-not-found .link:after {
    background-color: #fdb913;
    bottom: 4px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transition: width .4s cubic-bezier(.215, .61, .355, 1);
    width: 0;
    z-index: 0
}

@media (min-width:768px)and (pointer:fine) {
    .section-not-found .box-not-found .link:hover:after {
        width: 100%
    }
}

.section-oem {
    padding: 60px 20px 80px;
    font-size:62.5%;
}

@media (max-width:767px) {
    .section-oem {
        padding: 30px 16px 16px
    }
}

.section-oem>.section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-oem>.section-inner>.title-page {
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 1.380952381;
    text-align: center
}

@media (max-width:767px) {
    .section-oem>.section-inner>.title-page {
        font-size: 2.0rem;
        line-height: 1.5
    }
}

.section-oem>.section-inner>.box-content-main {
    margin-top: 20px
}

@media (max-width:767px) {
    .section-oem>.section-inner>.box-content-main {
        margin-top: 10px
    }
}

.section-oem>.section-inner>.box-mv {
    margin-top: 60px
}

@media (max-width:767px) {
    .section-oem>.section-inner>.box-mv {
        margin-top: 30px
    }
}

.section-oem>.section-inner>.box-mv img {
    border-radius: 30px;
    display: block;
    width: 100%
}

@media (max-width:767px) {
    .section-oem>.section-inner>.box-mv img {
        border-radius: 12px
    }
}

.list-oem-award {
    display: grid;
    gap: 47px;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 60px
}

@media (max-width:1300px) {
    .list-oem-award {
        gap: 3.4615384615vw;
        margin-top: 4.6153846154vw
    }
}

@media (max-width:767px) {
    .list-oem-award {
        gap: 40px 32px;
        grid-template-columns: repeat(3, 1fr);
        margin: 40px auto 0;
        width: 59.2vw
    }
}

@media (max-width:600px) {
    .list-oem-award {
        grid-template-columns: repeat(2, 1fr)
    }
}

.list-oem-award img {
    display: block;
    width: 100%
}

.section-oem-integrated {
    margin-top: 60px
}

@media (max-width:767px) {
    .section-oem-integrated {
        margin-top: 40px
    }
}

.section-oem-integrated .heading {
    color: #e2782e;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1607142857;
    margin-bottom: 70px;
    text-align: center
}

@media (max-width:1300px) {
    .section-oem-integrated .heading {
        font-size: 2.6rem;
    }
}

@media (max-width:767px) {
    .section-oem-integrated .heading {
        font-size: 2.2rem;
        margin-bottom: 40px
    }
}

.section-oem-integrated .list-card {
    display: flex;
    flex-direction: column;
    gap: 40px
}

@media (max-width:767px) {
    .section-oem-integrated .list-card {
        gap: 16px
    }
}

/* 为卡片添加样式 */
.section-oem-integrated .list-card .cardd {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* 第二个和第四个卡片特殊处理 */
.section-oem-integrated .list-card .cardd:nth-child(2),
.section-oem-integrated .list-card .cardd:nth-child(4) {
    flex-direction: row;
}

/* 第一个和第三个卡片保持原样或镜像布局 */
.section-oem-integrated .list-card .cardd:nth-child(1),
.section-oem-integrated .list-card .cardd:nth-child(3) {
    flex-direction: row-reverse;
}

/* 响应式设计 */
@media (max-width:767px) {
    .section-oem-integrated .list-card .cardd,
    .section-oem-integrated .list-card .cardd:nth-child(2),
    .section-oem-integrated .list-card .cardd:nth-child(4),
    .section-oem-integrated .list-card .cardd:nth-child(1),
    .section-oem-integrated .list-card .cardd:nth-child(3) {
        flex-direction: column;
    }
}

.section-oem-integrated .cardd {
    align-items: flex-start;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    gap: 30px;
    padding: 30px
}

@media (max-width:1300px) {
    .section-oem-integrated .cardd {
        gap: 2.3076923077vw
    }
}

@media (max-width:767px) {
    .section-oem-integrated .cardd {
        flex-direction: column;
        gap: 16px;
        padding: 16px
    }
}

/* 修改奇数卡片的布局，保持第一个和第三个卡片的原始布局 */
.section-oem-integrated .cardd:nth-child(1),
.section-oem-integrated .cardd:nth-child(3) {
    flex-direction: row-reverse;
}

/* 确保第二个和第四个卡片的图片居左显示 */
.section-oem-integrated .cardd:nth-child(2),
.section-oem-integrated .cardd:nth-child(4) {
    flex-direction: row;
}

@media (max-width:767px) {
    .section-oem-integrated .cardd:nth-child(1),
    .section-oem-integrated .cardd:nth-child(2),
    .section-oem-integrated .cardd:nth-child(3),
    .section-oem-integrated .cardd:nth-child(4) {
        flex-direction: column
    }
}

.section-oem-integrated .cardd>.box-image {
    flex-shrink: 0;
    width: 48.3333333333%
}

@media (max-width:767px) {
    .section-oem-integrated .cardd>.box-image {
        margin: 0 auto;
        max-width: 450px;
        width: 100%
    }
}

.section-oem-integrated .cardd>.box-image img {
    display: block;
    width: 100%
}

.section-oem-integrated .cardd>.box-detail {
    flex: 1;
    padding: 20px
}

@media (max-width:1300px) {
    .section-oem-integrated .cardd>.box-detail {
        padding: 1.5384615385vw
    }
}

@media (max-width:767px) {
    .section-oem-integrated .cardd>.box-detail {
        padding: 0
    }
}

.section-oem-integrated .cardd>.box-detail>.title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3888888889
}

@media (max-width:1300px) {
    .section-oem-integrated .cardd>.box-detail>.title {
        font-size: 1.5rem;
    }
}

@media (max-width:767px) {
    .section-oem-integrated .cardd>.box-detail>.title {
        font-size: 1.2rem
    }
}

.section-oem-integrated .cardd>.box-detail>.text {
    border-top: 3px solid #e2782e;
    color: #131313;
    font-size: 1.0rem;
    line-height: 1.75;
    margin-top: 40px;
    padding-top: 30px
}

@media (max-width:1300px) {
    .section-oem-integrated .cardd>.box-detail>.text {
        margin-top: 3.0769230769vw;
        padding-top: 2.3076923077vw
    }
}

@media (max-width:767px) {
    .section-oem-integrated .cardd>.box-detail>.text {
        margin-top: 16px;
        padding-top: 16px
    }
}

.section-oem-sub,
.section-oem-sub.section-brand-category {
    margin-top: 120px;
    padding: 0
}

@media (max-width:1300px) {

    .section-oem-sub,
    .section-oem-sub.section-brand-category {
        margin-top: 9.2307692308vw
    }
}

@media (max-width:767px) {

    .section-oem-sub,
    .section-oem-sub.section-brand-category {
        margin-top: 40px
    }
}

.section-oem-sub.section-brand-category>.section-heading,
.section-oem-sub>.section-heading {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.3888888889;
    margin-bottom: 60px;
    padding-bottom: 22px;
    position: relative;
    text-align: center
}

@media (max-width:1300px) {

    .section-oem-sub.section-brand-category>.section-heading,
    .section-oem-sub>.section-heading {
        margin-bottom: 4.6153846154vw
    }
}

@media (max-width:767px) {

    .section-oem-sub.section-brand-category>.section-heading,
    .section-oem-sub>.section-heading {
        font-size: 2.4rem;
        margin-bottom: 30px;
        padding-bottom: 20px
    }
}

.section-oem-sub.section-brand-category>.section-heading:after,
.section-oem-sub>.section-heading:after {
    background-color: #fdb913;
    bottom: 0;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 67px
}

.section-oem-sub .box-shape-group+.box-shape-group,
.section-oem-sub.section-brand-category .box-shape-group+.box-shape-group {
    margin-top: 60px
}

.section-oem-sub .box-shape-group .box-brand-products-carousel,
.section-oem-sub.section-brand-category .box-shape-group .box-brand-products-carousel {
    margin-top: 10px
}

.list-oem-material {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, 1fr)
}

@media (max-width:1300px) {
    .list-oem-material {
        gap: 2.3076923077vw
    }
}

@media (max-width:900px) {
    .list-oem-material {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:767px) {
    .list-oem-material {
        gap: 24px;
        grid-template-columns: 100%
    }
}

.list-oem-material .card-material {
    background-color: #fff;
    border-radius: 12px;
    display: block;
    height: 100%;
    padding: 16px 17px 21px;
    text-align: center
}

.list-oem-material .card-material>.box-heading {
    background-color: #e2782e;
    border-radius: 30px
}

.list-oem-material .card-material>.box-heading .box-image {
    border-radius: 12px
}

.list-oem-material .card-material>.box-heading .box-image img {
    border-radius: 30px;
    display: block;
    height: auto;
    width: 100%
}

.list-oem-material .card-material>.box-heading .title {
    color: #fff;
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 1.6666666667;
    padding: 16px 10px
}

.list-oem-material .card-material>.box-text {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.7058823529;
    margin-top: 16px
}

.list-oem-tech {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 60px
}

@media (max-width:767px) {
    .list-oem-tech {
        gap: 30px;
        margin-top: 30px
    }
}

.list-oem-tech>.card-tech {
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    gap: 30px;
    padding: 30px
}

@media (max-width:1300px) {
    .list-oem-tech>.card-tech {
        gap: 2.3076923077vw;
        padding: 2.3076923077vw
    }
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech {
        flex-direction: column;
        gap: 20px;
        padding: 20px 16px
    }
}

.list-oem-tech>.card-tech:nth-child(2n) {
    flex-direction: row-reverse
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech:nth-child(2n) {
        flex-direction: column
    }
}

.list-oem-tech>.card-tech .box-image {
    flex-shrink: 0;
    width: 46.6666666667%
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .box-image {
        margin: auto;
        max-width: 450px;
        width: 100%
    }
}

.list-oem-tech>.card-tech .box-image img {
    border-radius: 30px;
    display: block;
    width: 100%
}

.list-oem-tech>.card-tech .box-content {
    flex: 1;
    padding: 20px 30px
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .box-content {
        padding: 0
    }
}

.list-oem-tech>.card-tech .box-heading {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    text-align: center
}

@media (max-width:1300px) {
    .list-oem-tech>.card-tech .box-heading {
        font-size: 2.7692307692vw
    }
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .box-heading {
        font-size: 2.1rem
    }
}

.list-oem-tech>.card-tech .box-heading>.img-probiotics {
    display: block;
    max-width: 410px;
    width: 100%
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .box-heading>.img-probiotics {
        max-width: 274px
    }
}

.list-oem-tech>.card-tech .box-detail {
    border-top: 3px solid #e2782e;
    margin-top: 40px;
    padding-top: 30px
}

@media (max-width:1300px) {
    .list-oem-tech>.card-tech .box-detail {
        margin-top: 3.0769230769vw;
        padding-top: 2.3076923077vw
    }
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .box-detail {
        margin-top: 16px;
        padding-top: 16px
    }
}

.list-oem-tech>.card-tech .list-text {
    color: #131313;
    font-size: 1.6rem;
    line-height: 1.75;
    list-style: disc
}

.list-oem-tech>.card-tech .list-text>li {
    margin-left: 22px
}

.list-oem-tech>.card-tech .list-text>li::marker {
    font-size: 1.2rem
}

.list-oem-tech>.card-tech .img-award {
    display: block;
    margin-top: 30px;
    max-width: 382px;
    width: 100%
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .img-award {
        margin: 16px auto 0
    }
}

.list-oem-tech>.card-tech .img-cert {
    display: block;
    margin: 0 auto;
    max-width: 549px;
    width: 100%
}

@media (max-width:767px) {
    .list-oem-tech>.card-tech .img-cert {
        max-width: 366px
    }
}

.title-oem-bar {
    background-color: #4c4745;
    border-radius: 12px;
    color: #fdb913;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    padding: 15px;
    text-align: center
}

@media (max-width:767px) {
    .title-oem-bar {
        padding: 10px
    }
}

.box-oem-bag {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px
}

@media (max-width:767px) {
    .box-oem-bag {
        padding: 16px
    }
}

.box-oem-bag>.list-bag {
    display: flex;
    gap: 49px;
    justify-content: center;
    margin-top: 30px
}

@media (max-width:1300px) {
    .box-oem-bag>.list-bag {
        gap: 3.4615384615vw
    }
}

@media (max-width:767px) {
    .box-oem-bag>.list-bag {
        align-items: center;
        flex-direction: column;
        gap: 30px
    }
}

.box-oem-bag>.list-bag>li {
    flex: 1;
    max-width: 320px
}

.box-oem-bag>.list-bag img {
    display: block;
    height: auto;
    width: 100%
}

.box-oem-packaging,
.box-oem-packaging+.box-oem-packaging {
    margin-top: 60px
}

.box-oem-packaging>.box-inner {
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-top: 24px;
    padding: 30px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner {
        display: block;
        padding: 19px
    }
}

.box-oem-packaging>.box-inner>.box-image {
    width: 34.1666666667%
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner>.box-image {
        margin: 20px auto 0;
        max-width: 410px;
        width: 100%
    }
}

.box-oem-packaging>.box-inner>.box-image img {
    display: block;
    height: auto;
    width: 100%
}

.box-oem-packaging>.box-inner>.box-content {
    flex: 1;
    max-width: 720px;
    padding-left: 20px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner>.box-content {
        max-width: none;
        padding-left: 0
    }
}

.box-oem-packaging>.box-inner-half {
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    margin-top: 24px;
    padding: 30px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner-half {
        flex-direction: column;
        gap: 20px
    }
}

.box-oem-packaging>.box-inner-half>.box-content {
    flex: 1;
    max-width: 550px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner-half>.box-content {
        max-width: none;
        width: 100%
    }
}

.box-oem-packaging>.box-inner-half>.box-content:first-child {
    max-width: 570px;
    padding-left: 20px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner-half>.box-content:first-child {
        max-width: none;
        padding-left: 0;
        width: 100%
    }
}

.box-oem-packaging>.box-inner-half .box-image {
    margin-top: 20px
}

@media (max-width:900px) {
    .box-oem-packaging>.box-inner-half .box-image {
        margin: 20px auto 0;
        max-width: 410px
    }
}

.box-oem-packaging>.box-inner-half .box-image img {
    display: block;
    height: auto;
    width: 100%
}

.box-oem-table+.box-oem-table {
    margin-top: 20px
}

.box-oem-table>.heading {
    border-bottom: 2px solid #fdb913;
    display: flex;
    font-size: 1.7rem;
    font-weight: 600;
    justify-content: space-between;
    line-height: 1.7058823529;
    margin-bottom: 15px;
    padding-bottom: 15px
}

@media (max-width:767px) {
    .box-oem-table>.heading {
        font-size: 1.6rem;
        line-height: 1.75
    }
}

.box-oem-table>.heading .unit {
    flex-shrink: 0;
    width: 157px
}

@media (max-width:767px) {
    .box-oem-table>.heading .unit {
        width: auto
    }
}

.box-oem-table>.title-sub {
    color: #fdb913;
    font-weight: 500;
    margin-bottom: 12px
}

.box-oem-table>.list-data,
.box-oem-table>.title-sub {
    font-size: 1.6rem;
    line-height: 1.75
}

.box-oem-table>.list-data .row {
    display: flex;
    gap: 20px;
    justify-content: space-between
}

.box-oem-table>.list-data .row+.row {
    margin-top: 12px
}

.box-oem-table>.list-data dt {
    flex: 1;
    padding-left: 24px;
    position: relative
}

.box-oem-table>.list-data dt:before {
    background-color: #4c4745;
    border-radius: 100%;
    content: "";
    height: 4px;
    left: 10px;
    position: absolute;
    top: 13px;
    width: 4px
}

.box-oem-table>.list-data dd {
    flex-shrink: 0;
    width: 157px
}

@media (max-width:767px) {
    .box-oem-table>.list-data dd {
        min-width: 60px;
        width: auto
    }
}

.box-oem-table.is-half>.heading .unit {
    width: 150px
}

@media (max-width:767px) {
    .box-oem-table.is-half>.heading .unit {
        width: auto
    }
}

.box-oem-table.is-half>.list-data dd {
    width: 150px
}

@media (max-width:767px) {
    .box-oem-table.is-half>.list-data dd {
        min-width: 60px;
        width: auto
    }
}

.section-product-list {
    margin-top: 10px;
    padding: 0 20px 100px
}

@media (max-width:1024px) {
    .section-product-list {
        margin-top: 16px;
        padding-bottom: 50px
    }
}

@media (max-width:767px) {
    .section-product-list {
        margin-top: 16px;
        padding: 0 16px 16px
    }
}

.section-product-list .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-product-list .section-inner+.section-inner {
    margin-top: 60px
}

.section-product-list .list-product-flavor {
    display: grid;
    gap: 40px;
    grid-template-columns: 100%
}

@media (max-width:1024px) {
    .section-product-list .list-product-flavor {
        gap: 16px
    }
}

.section-top-why-us {
    margin-top: 50px
}

@media (max-width:767px) {
    .section-top-why-us {
        margin-top: 30px
    }
}

.section-top-why-us .section-content {
    padding: 0 20px;
    position: relative
}

@media (max-width:767px) {
    .section-top-why-us .section-content {
        padding: 0 16px
    }
}

.section-top-why-us .section-content:before {
    background: url(../image/img_decoration_01_pc.webp) no-repeat;
    background-size: contain;
    content: "";
    height: 202px;
    left: 0;
    position: absolute;
    top: 168px;
    width: 253px;
    z-index: 0
}

@media (max-width:1439px) {
    .section-top-why-us .section-content:before {
        height: 14.0277777778vw;
        width: 23.1944444444vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .section-content:before {
        background-image: url(../image/img_decoration_01_sp.webp);
        height: 123px;
        top: 621px;
        width: 119px
    }
}

.section-top-why-us .section-content:after {
    background: url(../image/img_decoration_02_pc.webp) no-repeat;
    background-size: contain;
    content: "";
    height: 387px;
    position: absolute;
    right: 0;
    top: 22px;
    width: 254px;
    z-index: 0
}

@media (max-width:1439px) {
    .section-top-why-us .section-content:after {
        height: 26.875vw;
        width: 17.6388888889vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .section-content:after {
        background-image: url(../image/img_decoration_02_sp.webp);
        height: 236px;
        top: 12px;
        width: 110px
    }
}

.section-top-why-us .section-content-inner {
    margin: 0 auto;
    max-width: 1260px;
    position: relative;
    z-index: 1
}

.section-top-why-us .section-content-inner .title-sub {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    text-align: center
}

.section-top-why-us .section-content-inner .title-main {
    display: block;
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 1.380952381;
    margin-top: 5px;
    padding-bottom: 30px;
    position: relative;
    text-align: center
}

@media (max-width:767px) {
    .section-top-why-us .section-content-inner .title-main {
        font-size: 2.4rem;
        line-height: 1.5;
        margin-top: 0;
        padding-bottom: 22px
    }
}

.section-top-why-us .section-content-inner .title-main:after {
    background: linear-gradient(90deg, #fdb913, #fdd813);
    bottom: 0;
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 76px
}

.section-top-why-us .card-top-why-us {
    display: grid;
    gap: 4.7619047619%;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 80px
}

@media (max-width:1200px) {
    .section-top-why-us .card-top-why-us {
        gap: 3.3333333333vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .card-top-why-us {
        gap: 16px;
        grid-template-columns: 100%;
        margin-top: 40px;
        padding: 0 14px
    }
}

.section-top-why-us .card-top-why-us .card-item {
    position: relative;
    transition: transform .3s ease-out
}

.section-top-why-us .card-top-why-us .card-item:before {
    background-color: #fdb913;
    border-radius: 12px;
    content: "";
    height: 0;
    left: -1px;
    position: absolute;
    top: -1px;
    transition: width .3s ease-out, height .3s ease-out;
    width: 0
}

@media (min-width:768px)and (pointer:fine) {
    .section-top-why-us .card-top-why-us .card-item:hover {
        transform: translateY(-15px)
    }

    .section-top-why-us .card-top-why-us .card-item:hover:before {
        height: calc(100% + 2px);
        width: calc(100% + 2px)
    }
}

.section-top-why-us .card-top-why-us .card-item-inner {
    background-color: #fff;
    border-radius: 12px;
    height: 100%;
    padding: 53px 15px;
    position: relative;
    transition: transform .3s ease-out;
    z-index: 1
}

@media (max-width:1200px) {
    .section-top-why-us .card-top-why-us .card-item-inner {
        padding-bottom: 40px;
        padding-top: 40px
    }
}

.section-top-why-us .card-top-why-us .card-image {
    height: 96px
}

.section-top-why-us .card-top-why-us .card-image img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 96px;
    max-width: 100%;
    width: auto
}

.section-top-why-us .card-top-why-us .card-text {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    margin-top: 24px;
    min-height: 58px;
    text-align: center;
    white-space: pre-line
}

@media (max-width:1200px) {
    .section-top-why-us .card-top-why-us .card-text {
        font-size: 1.7rem
    }
}

.section-top-why-us .content-top-why-us {
    font-size: 1.6rem;
    line-height: 1.75;
    margin: 80px auto 0;
    max-width: 820px
}

@media (max-width:767px) {
    .section-top-why-us .content-top-why-us {
        margin-top: 40px
    }
}

.section-top-why-us .section-image {
    margin-top: 203px;
    padding: 0 20px;
    position: relative
}

@media (max-width:1300px) {
    .section-top-why-us .section-image {
        margin-top: 15.6153846154vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .section-image {
        margin-top: 60px;
        padding: 0 16px
    }
}

.section-top-why-us .section-image:before {
    background: url(../image/img_decoration_03_pc.webp) no-repeat;
    background-size: contain;
    content: "";
    height: 779px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-48.42%);
    width: 297px;
    z-index: 0
}

@media (max-width:1439px) {
    .section-top-why-us .section-image:before {
        height: 54.0972222222vw;
        width: 20.625vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .section-image:before {
        background-image: url(../image/img_decoration_03_sp.webp);
        height: 243px;
        transform: translateY(-43.85%);
        width: 78px
    }
}

.section-top-why-us .section-image:after {
    background: url(../image/img_decoration_04_pc.webp) no-repeat;
    background-size: contain;
    content: "";
    height: 730px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-45.47%);
    width: 170px;
    z-index: 0
}

@media (max-width:1439px) {
    .section-top-why-us .section-image:after {
        height: 50.6944444444vw;
        width: 11.8055555556vw
    }
}

@media (max-width:767px) {
    .section-top-why-us .section-image:after {
        background-image: url(../image/img_decoration_04_sp.webp);
        height: 268px;
        transform: translateY(-44.03%);
        width: 35px
    }
}

.section-top-why-us .section-image .box-figure {
    margin: 0 auto;
    max-width: 947px;
    position: relative;
    z-index: 1
}

.section-top-why-us .section-image .box-figure img {
    display: block;
    width: 100%
}

.section-top-brand {
    margin-top: 148px
}

@media (max-width:767px) {
    .section-top-brand {
        margin-top: 78px
    }
}

.section-top-brand .title-section {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    text-align: center
}

@media (max-width:767px) {
    .section-top-brand .title-section {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-top-brand .list-top-brand {
    margin: 60px auto 0;
    max-width: 1440px
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand {
        margin-top: 20px
    }
}

.section-top-brand .list-top-brand .item-brand {
    display: flex
}

.section-top-brand .list-top-brand .item-brand:nth-child(2n) {
    flex-direction: row-reverse
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .item-brand {
        display: block
    }
}

.section-top-brand .list-top-brand .item-brand.brand-1 .box-image:before {
    background: linear-gradient(0deg, #17a29c, rgba(153, 79, 31, 0) 95.43%)
}

.section-top-brand .list-top-brand .item-brand.brand-2 .box-image:before {
    background: linear-gradient(0deg, #994f1f, rgba(153, 79, 31, 0) 95.43%)
}

.section-top-brand .list-top-brand .item-brand.brand-3 .box-image:before {
    background: linear-gradient(0deg, #e29b00, rgba(153, 79, 31, 0) 95.43%)
}

.section-top-brand .list-top-brand .item-brand.brand-4 .box-image:before {
    background: linear-gradient(0deg, #472f22, rgba(153, 79, 31, 0) 95.43%)
}

.section-top-brand .list-top-brand .item-brand.brand-5 .box-image:before {
    background: linear-gradient(0deg, #a18429, rgba(153, 79, 31, 0) 95.43%)
}

.section-top-brand .list-top-brand .box-image {
    padding-top: 50%;
    position: relative;
    width: 50%
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image {
        padding-top: 100%;
        width: 100%
    }
}

.section-top-brand .list-top-brand .box-image:before {
    background: linear-gradient(0deg, #a18429, rgba(23, 162, 156, 0) 95.43%);
    bottom: 0;
    content: "";
    height: 276px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease-out;
    width: 100%;
    z-index: 1
}

@media (max-width:1440px) {
    .section-top-brand .list-top-brand .box-image:before {
        height: 19.1666666667vw
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image:before {
        height: 38.3333333333vw
    }
}

.section-top-brand .list-top-brand .box-image:after {
    background: url(../image/icon_brand.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 74px;
    position: absolute;
    right: 40px;
    top: 40px;
    width: 74px;
    z-index: 1
}

@media (max-width:1000px) {
    .section-top-brand .list-top-brand .box-image:after {
        height: 50px;
        right: 20px;
        top: 20px;
        width: 50px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image:after {
        height: 46px;
        right: 16px;
        top: 16px;
        width: 46px
    }
}

.section-top-brand .list-top-brand .box-image .image {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.section-top-brand .list-top-brand .box-image .text-number {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.2rem;
    font-weight: 600;
    left: 40px;
    line-height: 1.6666666667;
    opacity: .65;
    position: absolute;
    top: 40px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right;
    z-index: 2
}

@media (max-width:1000px) {
    .section-top-brand .list-top-brand .box-image .text-number {
        left: 20px;
        top: 20px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-number {
        left: 16px;
        top: 16px
    }
}

.section-top-brand .list-top-brand .box-image .text-number .number {
    font-size: 1.7rem;
    line-height: 1.7058823529;
    margin-left: 10px;
    padding-left: 116px;
    position: relative
}

@media (max-width:1000px) {
    .section-top-brand .list-top-brand .box-image .text-number .number {
        font-size: 1.5rem;
        padding-left: 80px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-number .number {
        font-size: 1.7rem;
        padding-left: 116px
    }
}

.section-top-brand .list-top-brand .box-image .text-number .number:before {
    background-color: #fff;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 106px
}

@media (max-width:1000px) {
    .section-top-brand .list-top-brand .box-image .text-number .number:before {
        width: 70px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-number .number:before {
        width: 106px
    }
}

.section-top-brand .list-top-brand .box-image .text-title {
    --margin-left: 170;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    margin-bottom: 40px;
    position: absolute;
    text-align: left;
    transition: transform .3s ease-out;
    width: 100%;
    z-index: 1
}

@media (max-width:1440px) {
    .section-top-brand .list-top-brand .box-image .text-title {
        margin-bottom: 2.7777777778vw
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-title {
        margin-bottom: 6.6666666667vw
    }
}

.section-top-brand .list-top-brand .box-image .text-title span {
    color: #fff;
    display: block;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:1440px) {
    .section-top-brand .list-top-brand .box-image .text-title span {
        font-size: 2.5vw
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-title span {
        font-size: 5.8666666667vw
    }
}

.section-top-brand .list-top-brand .box-image .text-title span:last-child {
    margin-left: calc(var(--margin-left)*1px);
    margin-top: 5px
}

@media (max-width:1440px) {
    .section-top-brand .list-top-brand .box-image .text-title span:last-child {
        margin-left: calc(var(--margin-left)/1440*100vw)
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-image .text-title span:last-child {
        margin-left: calc(var(--margin-left)/2/375*100vw)
    }
}

@media (min-width:768px)and (pointer:fine) {
    .section-top-brand .list-top-brand .box-image:hover:before {
        opacity: 1
    }

    .section-top-brand .list-top-brand .box-image:hover .text-title {
        transform: translateY(-20px)
    }
}

.section-top-brand .list-top-brand a.box-image {
    cursor: pointer
}

.section-top-brand .list-top-brand .box-product {
    align-items: center;
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 20px;
    width: 50%
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product {
        padding: 40px 16px;
        width: 100%
    }
}

.section-top-brand .list-top-brand .box-product .box-product-in {
    min-width: 0
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-in {
        width: 100%
    }
}

.section-top-brand .list-top-brand .box-product .box-product-logo {
    margin: 0 auto;
    width: 198px
}

@media (max-width:1260px) {
    .section-top-brand .list-top-brand .box-product .box-product-logo {
        width: 170px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-logo {
        width: 198px
    }
}

.section-top-brand .list-top-brand .box-product .box-product-logo img {
    display: block;
    height: auto;
    width: 100%
}

.section-top-brand .list-top-brand .box-product .box-product-slider {
    margin-top: 30px
}

@media (max-width:1260px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider {
        margin-top: 20px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider {
        margin-top: 30px
    }
}

.section-top-brand .list-top-brand .box-product .box-product-slider .box-product-slider-in {
    margin: 0 auto;
    max-width: 250px
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .box-product-slider-in {
        max-width: none
    }

    .section-top-brand .list-top-brand .box-product .box-product-slider .cardd {
        background-color: #fff;
        border: 1px solid #f7f3f1;
        border-radius: 12px;
        padding: 8px 8px 18px
    }
}

.section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image {
    margin: 0 auto
}

@media (max-width:1160px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image {
        max-width: 180px
    }
}

@media (max-width:960px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image {
        max-width: 140px
    }
}

@media (max-width:800px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image {
        max-width: 120px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image {
        max-width: none
    }
}

.section-top-brand .list-top-brand .box-product .box-product-slider .flavor-image img {
    border-radius: 8px;
    display: block;
    width: 100%
}

.section-top-brand .list-top-brand .box-product .box-product-slider .flavor-name {
    display: -webkit-box;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin-top: 44px;
    text-align: center;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media (max-width:1260px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-name {
        margin-top: 20px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .flavor-name {
        margin-top: 18px
    }
}

.section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    margin-top: 34px;
    position: static;
    width: 100%
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination {
        margin-top: 30px
    }
}

.section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

@media (max-width:1260px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination {
        margin-top: 30px
    }
}

@media (max-width:960px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination {
        margin-top: 20px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .box-product-slider .box-product-pagination {
        margin-top: 40px
    }
}

.section-top-brand .list-top-brand .box-product .btn-product-more {
    align-items: center;
    background-color: #fff;
    border: 1.5px solid #4c4745;
    border-radius: 50px;
    color: #4c4745;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 34px auto 0;
    transition-duration: .2s;
    transition-property: border-color, background-color, color;
    transition-timing-function: ease-out;
    width: 240px
}

@media (max-width:1260px) {
    .section-top-brand .list-top-brand .box-product .btn-product-more {
        height: 50px;
        margin-top: 30px
    }
}

@media (max-width:960px) {
    .section-top-brand .list-top-brand .box-product .btn-product-more {
        margin-top: 20px
    }
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .btn-product-more {
        margin-top: 40px
    }
}

.section-top-brand .list-top-brand .box-product .btn-product-more>span {
    display: block;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.7058823529;
    padding-right: 30px;
    position: relative
}

.section-top-brand .list-top-brand .box-product .btn-product-more>span:after {
    background: url(../image/icon_arrow_right_black_01.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px
}

@media (min-width:768px)and (pointer:fine) {
    .section-top-brand .list-top-brand .box-product .btn-product-more:hover {
        background-color: #fdb913;
        border-color: #fdb913;
        color: #fff
    }

    .section-top-brand .list-top-brand .box-product .btn-product-more:hover>span:after {
        background-image: url(../image/icon_arrow_right_white_01.svg)
    }
}

.section-top-brand .list-top-brand .box-product .text-coming-soon {
    color: #825432;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667;
    margin-top: 40px;
    text-align: center
}

@media (max-width:767px) {
    .section-top-brand .list-top-brand .box-product .text-coming-soon {
        padding-bottom: 30px
    }
}

.section-top-recommend {
    margin-top: 80px;
    padding: 0 20px
}

@media (max-width:767px) {
    .section-top-recommend {
        margin-top: 40px;
        padding: 0 16px
    }
}

.section-top-recommend .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-top-recommend .section-title {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:767px) {
    .section-top-recommend .section-title {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-top-recommend .list-top-recommend {
    margin-top: 40px;
    position: relative
}

@media (min-width:768px) {
    .section-top-recommend .list-top-recommend:hover .swiper-navigation {
        opacity: 1
    }
}

.section-top-recommend .list-top-recommend .list-inner {
    position: relative
}

.section-top-recommend .list-top-recommend .swiper {
    margin: 0 -20px;
    padding: 20px 20px 0
}

@media (max-width:767px) {
    .section-top-recommend .list-top-recommend .swiper {
        margin: 0;
        padding: 0
    }
}

.section-top-recommend .list-top-recommend .swiper-slide {
    height: auto
}

.section-top-recommend .list-top-recommend .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    margin-top: 60px;
    position: static;
    width: 100%
}

@media (max-width:767px) {
    .section-top-recommend .list-top-recommend .swiper-pagination {
        margin-top: 30px
    }
}

.section-top-recommend .list-top-recommend .swiper-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.section-top-recommend .list-top-recommend .swiper-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.section-top-recommend .list-top-recommend .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

.section-top-recommend .list-top-recommend .swiper-navigation {
    opacity: 0;
    transition: opacity .2s ease-out
}

@media (max-width:767px) {
    .section-top-recommend .list-top-recommend .swiper-navigation {
        display: none
    }
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next,
.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev {
    border: 1px solid #4c4745;
    border-radius: 100%;
    height: 50px;
    left: calc(100% + 20px);
    margin-top: 10px;
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-out, opacity .2s ease-out;
    width: 50px;
    z-index: 2
}

@media (max-width:1439px) {

    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next,
    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev {
        left: auto;
        right: -20px
    }
}

@media (min-width:768px)and (pointer:fine) {

    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover,
    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover {
        background-color: #fdb913;
        border-color: #fdb913
    }

    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover:before,
    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover:before {
        background-image: url(../image/icon_arrow_right_white_01.svg)
    }
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next:before,
.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev:before {
    background: url(../image/icon_arrow_right_black_01.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next:after,
.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev:after {
    display: none
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next.swiper-button-disabled,
.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev.swiper-button-disabled {
    opacity: .5;
    pointer-events: auto
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-next.swiper-button-disabled.swiper-button-lock,
.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev.swiper-button-disabled.swiper-button-lock {
    display: none
}

.section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev {
    left: auto;
    right: calc(100% + 20px);
    transform: rotate(180deg) translateY(50%)
}

@media (max-width:1439px) {
    .section-top-recommend .list-top-recommend .swiper-navigation .swiper-button-prev {
        left: -20px;
        right: auto
    }
}

.section-top-article {
    margin-top: 80px;
    padding: 0 20px
}

@media (max-width:767px) {
    .section-top-article {
        margin-top: 40px;
        padding: 0 16px
    }
}

.section-top-article .section-inner {
    margin: 0 auto;
    max-width: 1260px
}

.section-top-article .section-title {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.section-top-article .section-title .title {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889
}

@media (max-width:767px) {
    .section-top-article .section-title .title {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-top-article .list-top-articles {
    margin-top: 40px;
    position: relative
}

@media (min-width:768px) {
    .section-top-article .list-top-articles:hover .swiper-navigation {
        opacity: 1
    }
}

.section-top-article .list-top-articles .list-inner {
    position: relative
}

.section-top-article .list-top-articles .swiper {
    margin: 0 -20px;
    padding: 20px 20px 0
}

@media (max-width:767px) {
    .section-top-article .list-top-articles .swiper {
        margin: 0 -16px;
        padding: 0 16px
    }
}

.section-top-article .list-top-articles .swiper-slide {
    height: auto
}

.section-top-article .list-top-articles .swiper-pagination {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    gap: 14px;
    justify-content: center;
    margin-top: 60px;
    position: static;
    width: 100%
}

@media (max-width:767px) {
    .section-top-article .list-top-articles .swiper-pagination {
        margin-top: 30px
    }
}

.section-top-article .list-top-articles .swiper-pagination:not(.swiper-pagination-bullets) {
    display: none
}

.section-top-article .list-top-articles .swiper-pagination .swiper-pagination-bullet {
    background-color: #d9d2d0;
    height: 6px;
    margin: 1px;
    opacity: 1;
    width: 6px
}

.section-top-article .list-top-articles .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #4c4745;
    height: 8px;
    margin: 0;
    width: 8px
}

.section-top-article .list-top-articles .swiper-navigation {
    opacity: 0;
    transition: opacity .2s ease-out
}

@media (max-width:767px) {
    .section-top-article .list-top-articles .swiper-navigation {
        display: none
    }
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-next,
.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev {
    border: 1px solid #4c4745;
    border-radius: 100%;
    height: 50px;
    left: calc(100% + 20px);
    margin-top: 10px;
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color .2s ease-out, opacity .2s ease-out;
    width: 50px;
    z-index: 2
}

@media (max-width:1439px) {

    .section-top-article .list-top-articles .swiper-navigation .swiper-button-next,
    .section-top-article .list-top-articles .swiper-navigation .swiper-button-prev {
        left: auto;
        right: -20px
    }
}

@media (min-width:768px)and (pointer:fine) {

    .section-top-article .list-top-articles .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover,
    .section-top-article .list-top-articles .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover {
        background-color: #fdb913;
        border-color: #fdb913
    }

    .section-top-article .list-top-articles .swiper-navigation .swiper-button-next:not(.swiper-button-disabled):hover:before,
    .section-top-article .list-top-articles .swiper-navigation .swiper-button-prev:not(.swiper-button-disabled):hover:before {
        background-image: url(../image/icon_arrow_right_white_01.svg)
    }
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-next:before,
.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev:before {
    background: url(../image/icon_arrow_right_black_01.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 17px
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-next:after,
.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev:after {
    display: none
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-next.swiper-button-disabled,
.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev.swiper-button-disabled {
    opacity: .5;
    pointer-events: auto
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-next.swiper-button-disabled.swiper-button-lock,
.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev.swiper-button-disabled.swiper-button-lock {
    display: none
}

.section-top-article .list-top-articles .swiper-navigation .swiper-button-prev {
    left: auto;
    right: calc(100% + 20px);
    transform: rotate(180deg) translateY(50%)
}

@media (max-width:1439px) {
    .section-top-article .list-top-articles .swiper-navigation .swiper-button-prev {
        left: -20px;
        right: auto
    }
}

.section-top-app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 80px
}

@media (max-width:767px) {
    .section-top-app {
        grid-template-columns: 100%;
        margin-top: 40px
    }
}

.section-top-app .box-image {
    position: relative
}

@media (max-width:767px) {
    .section-top-app .box-image {
        padding-top: 66.6666666667%
    }
}

.section-top-app .box-image:before {
    background: url(../image/icon_magazine.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 175px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    z-index: 1
}

@media (max-width:767px) {
    .section-top-app .box-image:before {
        height: 120px;
        width: 120px
    }
}

.section-top-app .box-image img {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

.section-top-app .box-detail {
    align-items: center;
    background: #fff;
    display: flex;
    justify-content: center;
    padding: 100px 20px;
    position: relative
}

@media (max-width:1260px) {
    .section-top-app .box-detail {
        padding: 7.9365079365vw 1.5873015873vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail {
        padding: 40px 16px
    }
}

.section-top-app .box-detail-inner {
    text-align: center
}

.section-top-app .box-detail .logo {
    display: block;
    margin: 0 auto;
    width: 122px
}

@media (max-width:950px) {
    .section-top-app .box-detail .logo {
        width: 12.8421052632vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .logo {
        width: 122px
    }
}

.section-top-app .box-detail .title-main {
    color: #825432;
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    margin-top: 40px
}

@media (max-width:950px) {
    .section-top-app .box-detail .title-main {
        font-size: 3.7894736842vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .title-main {
        font-size: 2.1rem;
        line-height: 1.5238095238;
        margin-top: 30px
    }
}

.section-top-app .box-detail .title-sub {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6666666667
}

@media (max-width:950px) {
    .section-top-app .box-detail .title-sub {
        font-size: 1.8947368421vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .title-sub {
        font-size: 1.8rem
    }
}

.section-top-app .box-detail .text {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.75;
    margin-top: 20px
}

@media (max-width:950px) {
    .section-top-app .box-detail .text {
        font-size: 1.6842105263vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .text {
        font-size: 1.6rem
    }
}

.section-top-app .box-detail .list-app {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 60px
}

@media (max-width:1260px) {
    .section-top-app .box-detail .list-app {
        gap: 3.1746031746vw;
        margin-top: 3.1746031746vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .list-app {
        gap: 14px;
        margin-top: 30px
    }
}

.section-top-app .box-detail .list-app img {
    display: block;
    width: 200px
}

@media (max-width:1260px) {
    .section-top-app .box-detail .list-app img {
        width: 15.873015873vw
    }
}

@media (max-width:767px) {
    .section-top-app .box-detail .list-app img {
        width: 33.3333333333vw
    }
}

@media (min-width:768px) {
    .section-top-app .box-detail .list-app a {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .section-top-app .box-detail .list-app a:hover {
        opacity: .8;
        text-decoration: none
    }
}

.section-top-ig {
    margin-top: 60px
}

@media (max-width:767px) {
    .section-top-ig {
        margin-top: 30px
    }
}

.section-top-ig .section-title {
    font-size: 3.6rem;
    font-weight: 500;
    line-height: 1.3888888889;
    text-align: center
}

@media (max-width:767px) {
    .section-top-ig .section-title {
        font-size: 2.1rem;
        line-height: 1.5238095238
    }
}

.section-top-ig .section-title>span {
    display: inline-block;
    padding-left: 67px;
    position: relative
}

@media (max-width:767px) {
    .section-top-ig .section-title>span {
        padding-left: 40px
    }
}

.section-top-ig .section-title>span:before {
    background: url(../image/ico_ig.svg) no-repeat;
    background-size: contain;
    content: "";
    height: 52px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px
}

@media (max-width:767px) {
    .section-top-ig .section-title>span:before {
        height: 32px;
        width: 32px
    }
}

.section-top-ig .box-ig {
    margin-top: 58px;
    padding-bottom: 60px
}

@media (max-width:767px) {
    .section-top-ig .box-ig {
        margin-top: 30px;
        padding-bottom: 30px
    }
}

.section-top-ig .box-ig .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

@media (max-width:767px) {
    .section-top-ig .box-ig .row {
        grid-template-columns: repeat(2, 1fr)
    }
}

.section-top-ig .box-ig .insta-main-div {
    display: block;
    padding-top: 100%;
    position: relative
}

@media (min-width:768px) {
    .section-top-ig .box-ig .insta-main-div {
        opacity: 1;
        transition: opacity .2s ease-out
    }

    .section-top-ig .box-ig .insta-main-div:hover {
        opacity: .8;
        text-decoration: none
    }
}

.section-top-ig .box-ig .insta-main-div img {
    display: block;
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%
}

._mt-0 {
    margin-top: 0 !important
}

._mt-2 {
    margin-top: 8px !important
}

._mt-\[20px\] {
    margin-top: 20px !important
}

._hidden {
    display: none !important
}

._h-\[50px\] {
    height: 50px !important
}

._w-\[50px\] {
    width: 50px !important
}

._text-center {
    text-align: center !important
}

.first\:_pt-0:first-child {
    padding-top: 0 !important
}

@media (max-width:767px) {
    .sm\:_mt-\[40px\] {
        margin-top: 40px !important
    }

    .sm\:_block {
        display: block !important
    }

    .sm\:_hidden {
        display: none !important
    }

    .sm\:_pb-\[16px\] {
        padding-bottom: 16px !important
    }

    .sm\:_pb-\[40px\] {
        padding-bottom: 40px !important
    }
}

@media (min-width:768px) {
    .md\:_mt-\[60px\] {
        margin-top: 60px !important
    }

    .md\:_hidden {
        display: none !important
    }

    .md\:_pb-\[100px\] {
        padding-bottom: 100px !important
    }
}