.catagories-section {
    margin-top: -4px
}

.catagories-section .slick-list {
    padding-top: 3px;
    padding-bottom: 3px
}

.catagories-section .catagories {
    padding: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320)));
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #fff
}

.catagories-section .catagories .leaf-shape {
    position: absolute;
    left: 2px;
    width: 27%;
    bottom: 2px;
    mix-blend-mode: color-dodge;
    opacity: 0;
    left: -100px;
    -webkit-transition: all 0.6s;
    transition: all 0.6s
}

.catagories-section .catagories a {
    display: block;
    text-align: center
}

.catagories-section .catagories a .img-wrap {
    text-align: center;
    position: relative;
    margin: calc(25px + (34 - 25) * ((100vw - 320px) / (1920 - 320))) auto;
    width: calc(36px + (50 - 36) * ((100vw - 320px) / (1920 - 320)))
}

.catagories-section .catagories a .img-wrap img {
    width: 100%;
    position: relative;
    z-index: 2;
    max-height: 49.5px
}

[class="dark"] .catagories-section .catagories a .img-wrap img {
    -webkit-filter: invert(1);
    filter: invert(1)
}

.catagories-section .catagories a .img-wrap::after {
    position: absolute;
    content: "";
    top: 0;
    right: -10px;
    width: calc(36px + (57 - 36) * ((100vw - 320px) / (1920 - 320)));
    height: calc(36px + (57 - 36) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 100%;
    opacity: 0.1;
    z-index: 1;
    background-color: var(--theme-color-1);
    -webkit-transition: all 0.6s;
    transition: all 0.6s
}

[class="dark"] .catagories-section .catagories a .img-wrap::after {
    -webkit-filter: invert(0);
    filter: invert(0)
}

.catagories-section .catagories a .btn-box {
    position: relative
}

.catagories-section .catagories a .btn-box .catagories-name {
    display: inline-block;
    padding: 6px calc(5px + (34 - 5) * ((100vw - 320px) / (1920 - 320)));
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #1f1f1f;
    -webkit-transition: all 0.6s;
    transition: all 0.6s
}

@media only screen and (max-width: 576px) {
    .catagories-section .catagories a .btn-box .catagories-name {
        padding: 6px 18px;
        line-height: 18px
    }
}

@media only screen and (max-width: 425px) {
    .catagories-section .catagories a .btn-box .catagories-name {
        padding: 7px 7px;
        line-height: 13px
    }
}

@media only screen and (max-width: 375px) {
    .catagories-section .catagories a .btn-box .catagories-name {
        padding: 4px 4px;
        line-height: 15px
    }
}

@media only screen and (max-width: 360px) {
    .catagories-section .catagories a .btn-box .catagories-name {
        padding: 7px 20px;
        line-height: 15px
    }
}

.catagories-section .catagories a .btn-box .btn-special {
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    position: absolute;
    bottom: -135px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    justify-content: center;
}

.catagories-section .catagories:hover,
.catagories-section .catagories>a:active {
    background-color: var(--theme-color-1)
}

.catagories-section .catagories:hover .img-wrap img,
.catagories-section .catagories>a:active .img-wrap img {
    -webkit-filter: invert(1) brightness(2);
    filter: invert(1) brightness(2)
}

.catagories-section .catagories:hover .img-wrap::after,
.catagories-section .catagories>a:active .img-wrap::after {
    -webkit-filter: brightness(40);
    filter: brightness(40)
}

[class="dark"] .catagories-section .catagories:hover .img-wrap::after,
[class="dark"] .catagories-section .catagories>a:active .img-wrap::after {
    -webkit-filter: brightness(40);
    filter: brightness(40)
}

.catagories-section .catagories:hover .leaf-shape,
.catagories-section .catagories>a:active .leaf-shape {
    opacity: 1;
    left: 2px;
    -webkit-filter: brightness(2);
    filter: brightness(2)
}

.catagories-section .catagories:hover .btn-box .catagories-name,
.catagories-section .catagories>a:active .btn-box .catagories-name {
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
}

.catagories-section .catagories:hover .btn-box .btn-special,
.catagories-section .catagories>a:active .btn-box .btn-special {
    padding: calc(3px + (6 - 3) * ((100vw - 320px) / (1920 - 320))) calc(20px + (32 - 32) * ((100vw - 320px) / (1920 - 320)));
    bottom: 6px;
    line-height: calc(20px + (29 - 20) * ((100vw - 320px) / (1920 - 320)))
}

.home-slider-common .bg-size::before {
    padding-top: calc(180px + (790 - 180) * ((100vw - 320px) / (1920 - 320)))
}

[class="dark"] .home-slider-common .swiper-pagination .swiper-pagination-bullet {
    border-color: #262834
}

[class="dark"] .home-slider-common .swiper-pagination .swiper-pagination-bullet-active {
    border-color: var(--theme-color-1)
}

.home-slider-common .home-slider .banner {
    position: relative
}

.home-slider-common .home-slider .banner .banner-left-img {
    width: 41%;
    position: absolute;
    left: 0%;
    bottom: 0
}

@media only screen and (max-width: 768px) {
    .home-slider-common .home-slider .banner .banner-left-img {
        width: 35%
    }
}

.home-slider-common .home-slider .banner .banner-right-img {
    width: 35%;
    position: absolute;
    right: 1%;
    bottom: 0
}

@media only screen and (max-width: 768px) {
    .home-slider-common .home-slider .banner .banner-right-img {
        width: 30%
    }
}

.home-slider-common .home-slider .banner .content-box {
    width: calc(25px + (773 - 16) * ((100vw - 320px) / (1920 - 320)));
    text-align: center;
    position: absolute;
    left: 50%;
    top: calc(0px + (148 - 70) * ((100vw - 320px) / (1920 - 320)));
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width: 1400px) {
    .home-slider-common .home-slider .banner .content-box {
        width: calc(293px + (773 - 290) * ((100vw - 320px) / (1920 - 320)));
        top: calc(8px + (148 - 8) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 1200px) {
    .home-slider-common .home-slider .banner .content-box {
        width: calc(175px + (745 - 175) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 992px) {
    .home-slider-common .home-slider .banner .content-box {
        width: calc(175px + (700 - 175) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 768px) {
    .home-slider-common .home-slider .banner .content-box {
        width: calc(243px + (613 - 243) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 576px) {
    .home-slider-common .home-slider .banner .content-box {
        width: calc(284px + (613 - 284) * ((100vw - 320px) / (1920 - 320)));
        top: calc(18px + (148 - 18) * ((100vw - 320px) / (1920 - 320)))
    }
}

.home-slider-common .home-slider .banner .content-box .heading {
    text-transform: uppercase;
    font-weight: 300;
    font-size: calc(0px + (50 - 0) * ((100vw - 320px) / (1920 - 320)));
    line-height: calc(10px + (82 - 10) * ((100vw - 320px) / (1920 - 320)));
    color: #262834
}

@media only screen and (max-width: 1400px) {
    .home-slider-common .home-slider .banner .content-box .heading {
        font-size: calc(18px + (50 - 18) * ((100vw - 320px) / (1920 - 320)));
        line-height: calc(32px + (82 - 32) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 1200px) {
    .home-slider-common .home-slider .banner .content-box .heading {
        font-size: calc(18px + (38 - 18) * ((100vw - 320px) / (1920 - 320)));
        line-height: calc(32px + (70 - 32) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 992px) {
    .home-slider-common .home-slider .banner .content-box .heading {
        font-size: calc(17px + (25 - 17) * ((100vw - 320px) / (1920 - 320)));
        line-height: calc(29px + (50 - 29) * ((100vw - 320px) / (1920 - 320)))
    }
}

.home-slider-common .home-slider .banner .content-box .heading strong {
    font-weight: bold
}

.home-slider-common .home-slider .banner .content-box .heading span {
    font-weight: bold;
    color: var(--theme-color-1);
    position: relative;
    z-index: 1;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.home-slider-common .home-slider .banner .content-box .heading span .shape {
    height: 125%;
    width: 125%;
    position: absolute;
    left: calc(0px + (-34 + 0) * ((100vw - 320px) / (1920 - 320)));
    bottom: 2px;
    z-index: -1;
    -webkit-transition: all 1.1s 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 1.1s 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: scale(0);
    transform: scale(0)
}

@media only screen and (max-width: 1400px) {
    .home-slider-common .home-slider .banner .content-box .heading span .shape {
        left: calc(-10px + (-34 + 10) * ((100vw - 320px) / (1920 - 320)))
    }
}

@media only screen and (max-width: 576px) {
    .home-slider-common .home-slider .banner .content-box .heading span .shape {
        left: -13px
    }
}

.home-slider-common .home-slider .banner .content-box p {
    max-width: 584px;
    color: #767676;
    margin: 0 auto;
    font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
    font-weight: normal;
    line-height: calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
    margin-top: calc(0px + (18 - 0) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)))
}

@media only screen and (max-width: 768px) {
    .home-slider-common .home-slider .banner .content-box p {
        display: none
    }
}

.home-slider-common .home-slider .banner .content-box .btn-solid,
.home-slider-common .home-slider .banner .content-box .btn-outline,
.home-slider-common .home-slider .banner .content-box .btn-special {
    font-size: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    padding: calc(4px + (12 - 4) * ((100vw - 320px) / (1920 - 320))) calc(20px + (50 - 20) * ((100vw - 320px) / (1920 - 320)))
}

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

    .home-slider-common .home-slider .banner .content-box .btn-solid,
    .home-slider-common .home-slider .banner .content-box .btn-outline,
    .home-slider-common .home-slider .banner .content-box .btn-special {
        margin-top: calc(10px + (40 - 10) * ((100vw - 320px) / (1920 - 320)))
    }
}

.home-slider-common .home-slider .banner .content-box .btn-solid .arrow,
.home-slider-common .home-slider .banner .content-box .btn-outline .arrow,
.home-slider-common .home-slider .banner .content-box .btn-special .arrow {
    width: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)))
}

.home-slider-common .home-slider .banner .card-box {
    position: absolute;
    bottom: calc(28px + (155 - 28) * ((100vw - 320px) / (1920 - 320)));
    right: calc(30px + (417 - 32) * ((100vw - 320px) / (1920 - 320)));
    width: 17.5%
}

@media only screen and (max-width: 1400px) {
    .home-slider-common .home-slider .banner .card-box {
        display: none
    }
}

.home-slider-common .home-slider .banner .card-box .card-wrap {
    position: relative
}

[dir="rtl"] .home-slider-common .home-slider .banner .card-box .card-wrap {
    direction: ltr
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card {
    width: calc(10px + (197 - 10) * ((100vw - 320px) / (1920 - 320)));
    padding: 10px;
    background-color: #fff;
    -webkit-box-shadow: 0px 4px 20px rgba(15, 143, 172, 0.1);
    box-shadow: 0px 4px 20px rgba(15, 143, 172, 0.1);
    border-radius: 100%;
    -webkit-transition: all 1.1s 1.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 1.1s 1.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: scale(0);
    transform: scale(0)
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card .img-wrap {
    background-color: #f6f9fc
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card .content a {
    padding-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (max-width: 1500px) {
    .home-slider-common .home-slider .banner .card-box .card-wrap .card .content a {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h5 {
    color: #262834;
    font-weight: 600;
    font-size: calc(0px + (16 - 0) * ((100vw - 320px) / (1920 - 320)));
    line-height: 23px;
    margin-top: -2px
}

@media only screen and (max-width: 1500px) {
    .home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h5 {
        font-size: 14px
    }
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h5 span {
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    display: block;
    color: #767676;
    margin-bottom: -3px
}

@media only screen and (max-width: 1500px) {
    .home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h5 span {
        display: none
    }
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h6 {
    font-weight: bold;
    font-size: calc(0px + (16 - 0) * ((100vw - 320px) / (1920 - 320)));
    line-height: 23px;
    color: #ffa422
}

@media only screen and (max-width: 1500px) {
    .home-slider-common .home-slider .banner .card-box .card-wrap .card .content a h6 {
        font-size: 14px
    }
}

.home-slider-common .home-slider .banner .card-box .card-wrap .card.card2 {
    right: calc(50px + (10 - 50) * ((100vw - 320px) / (1920 - 320)));
    position: absolute;
    bottom: calc(-19px + (-120 + 19) * ((100vw - 320px) / (1920 - 320)))
}

.home-slider-common .home-slider .swiper-slide-active .banner .banner-right-img {
    bottom: 0
}

.home-slider-common .home-slider .swiper-slide-active .banner .content-box .heading span .shape {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.home-slider-common .home-slider .swiper-slide-active .banner .banner-left-img {
    bottom: 0
}

.home-slider-common .home-slider .swiper-slide-active .banner .card-box .card-wrap .card {
    -webkit-transform: scale(1);
    transform: scale(1);
    border-radius: 0
}

.swiper-pagination {
    margin-bottom: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: calc(2px + (10 - 2) * ((100vw - 320px) / (1920 - 320)))
}

@media only screen and (max-width: 425px) {
    .swiper-pagination {
        margin-bottom: 5%
    }
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border: 2px solid #262834;
    border-radius: 100%;
    background-color: transparent;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    transition: all 0.3s;
    opacity: 1
}

@media only screen and (max-width: 1399px) {
    .swiper-pagination-bullet {
        width: 10px;
        height: 10px
    }
}

@media only screen and (max-width: 767px) {
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px
    }
}

.swiper-pagination-bullet::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 22px;
    border-radius: inherit;
    border: 2px solid transparent;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s;
    transition: all 0.3s
}

@media only screen and (max-width: 1399px) {
    .swiper-pagination-bullet::before {
        width: 18px;
        height: 18px
    }
}

@media only screen and (max-width: 767px) {
    .swiper-pagination-bullet::before {
        width: 16px;
        height: 16px
    }
}

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

.swiper-pagination-bullet-active::before {
    border-color: var(--theme-color-1)
}

.swiper-pagination.small {
    gap: 6px
}

.swiper-pagination.small .swiper-pagination-bullet {
    width: 8px;
    height: 8px
}

.swiper-pagination.small .swiper-pagination-bullet::before {
    width: 18px;
    height: 18px
}

.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active {
    background-color: var(--theme-color-1)!important;
}

.swiper-pagination-bullet:nth-of-type(3).swiper-pagination-bullet-active::before {
    border-color: var(--theme-color-1)!important;
}

.product-card-side.product-side2 {
    background-color: #fff;
    padding: calc(12px + (28 - 12) * ((100vw - 320px) / (1920 - 320)));
    gap: 14px;
    position: relative
}

.product-card-side.product-side2::after {
    position: absolute;
    right: 0;
    bottom: 0px;
    content: "";
    height: 1px;
    background-color: rgba(221, 221, 221, 0.5);
    width: calc(100% - calc(97px + (140 - 97) * ((100vw - 320px) / (1920 - 320))))
}

.product-card-side.product-side2 .img-wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(78px + (100 - 78) * ((100vw - 320px) / (1920 - 320)));
    flex: 0 0 calc(78px + (100 - 78) * ((100vw - 320px) / (1920 - 320)))
}

.product-card-side.product-side2 .content-box {
    height: 100%;
    padding: 0
}

.product-card-side.product-side2.product-content2 .content-box {
    position: relative;
    z-index: 2
}

.product-card-side.product-side2.product-content2 .content-box p {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 5px;
    color: #262834
}

.product-card-side.product-side2.product-content2 .content-box p span {
    font-size: inherit
}

.product-card-side.product-side2.product-content2 .content-box h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: #262834;
    margin-top: 5px;
    margin-bottom: -2px
}

.product-card-side.product-side2.product-content2 .content-box h5 del {
    color: #767676
}

.product-card-side.product-side2.product-content2 .content-box .rating {
    margin-top: 0;
    margin-bottom: 0
}

.title-box { max-width:900px!important; margin-bottom:40px!important }

.sale-card .sale-card-wrap .sale-title span {
    font-size: calc(20px + (18 - 14) * ((100vw - 320px) / (1920 - 320)))!important;
}

.sale-card .sale-card-wrap .code p {
    font-size: calc(14px + (22 - 16) * ((100vw - 320px) / (1920 - 320)))!important;
}

.offer-section .offer p { text-overflow:inherit!important; white-space:inherit !important; }

.card-box { height:auto!important; }

.faq-section .tab-content {
    width: 80%;
    margin: calc(30px + (50 - 30) * ((100vw - 320px) / (1920 - 320))) auto 0 auto;
}

.faq-section .title-box4 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    width: 50%;
    margin: 0 auto calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320))) auto;
    text-align: center;
}

.faq-section .title-box4 .heading {
    width: -webkit-max-content;
    width: max-content;
    margin-bottom: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
    font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
    line-height: calc(22px + (30 - 22) * ((100vw - 320px) / (1920 - 320)));
    margin-top: -2px;
}

.faq-section .title-box4 p {
    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
    color: #767676;
    line-height: calc(22px + (25 - 22) * ((100vw - 320px) / (1920 - 320)));
    margin-bottom: 0;
}

.special-product .product-box .catagories-small-label a>span {
    white-space: inherit!important;
    text-overflow: inherit!important;
}

.catagories-section .catagories:hover .btn-box .btn-special { 
    justify-content: center;
    width: 100%;
 }

 .product-card4 .img-box img{border-top-left-radius:11em;border-top-right-radius:11em;}

 .tyumoku-point {  padding:7px; background:var(--theme-color-1)!important; color:#fff }

 .ratio_47 .bg-size:before { padding-top:38%!important; }

@media only screen and (max-width: 575px) {
    .catagories-section .catagories { padding:calc(10px + (24 - 10) * ((100vw - 320px) / (1920 - 320))) }
    .catagories-section .catagories a .img-wrap {
        margin: calc(15px + (34 - 15) * ((100vw - 320px) / (1920 - 320))) auto;
    }
}

@media only screen and (max-width: 375px) {
    .detail-card-section .row>div .detail-card .content-box h3 {white-space: inherit!important;}
}