.home-main {
    position: relative;
    overflow-x: hidden;
}

.home-main .swiper-pagination span.swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 20px;
}

.home-main .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #002169;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #357AB8;
}

.swiper-container {
    position: relative;
    padding-bottom: 50px;
    /* 為控制元素提供空間 */
}

div.swiper-button-prev {
    left: 25%;
    z-index: 20;
}

div.swiper-button-next {
    right: 25%;
    z-index: 20;
}

div.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 15px;
}

.swiper-button-next,
.swiper-button-prev {
    top: auto !important;
    bottom: 0 !important;
    margin-top: 0 !important;
    height: 50px !important;
    width: 50px !important;
}

.swiper-button-next:after {
    background-image: url('../image/v2/d-p3-right.webp');
    min-width: 50px;
    min-height: 50px;
    color: #ffffff00;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
}

.swiper-button-prev:after {
    background-image: url('../image/v2/d-p3-left.webp');
    min-width: 50px;
    min-height: 50px;
    color: #ffffff00;
    display: inline-block;
    background-size: 90%;
    background-repeat: no-repeat;
}

#dialog-tel .btn-close,
#ingredient .btn-close {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 5px;
    opacity: 1;
    font-size: 20px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23002169'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}



.swiper01 .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 40px 0px;
}




#tab-01 .p2-title {
    max-width: calc(180px * 1.92);
}

#tab-01 .p2-content {
    max-width: calc(547px * 1.92);
}

#tab-01 .p3-title {
    max-width: calc(390px * 1.92);
}

#tab-01 .p3-content {
    max-width: calc(439px * 1.92);
}

#tab-01 .p3-item-03 {
    max-width: calc(465px * 1.92);
}

#tab-01 .p4-title {
    max-width: calc(339px * 1.92);
}

#tab-01 .p4-items {
    max-width: calc(517px * 1.92);
}

#tab-01 .p4-memo {
    max-width: calc(581px * 1.92);
}

#tab-01 .p4-item {
    max-width: calc(246px * 1.92);
}

#tab-01 .p5-title {
    max-width: calc(210px * 1.92);
}

#tab-01 .p5-items {
    max-width: calc(554px * 1.92);
}

#tab-01 .p5-item-01,
#tab-01 .p5-item-03 {
    z-index: 0;
}

#tab-01 .p5-item-02 {
    z-index: 1;
}

#tab-01 .p5-item-01 {
    top: 0;
    left: 0;
}

#tab-01 .p5-item-03 {
    top: 0;
    right: 0;
}

#tab-01 .p5-item {
    max-width: calc(229px * 1.92);
}

#tab-01 .p6-title {
    max-width: calc(343px * 1.92);
}

#tab-01 .p6-content {
    max-width: calc(513px * 1.92);
}



#tab-02 .p2-title {
    max-width: calc(409.2px * 1.92);
}

#tab-02 .p2-content {
    max-width: calc(443.7642px * 1.92);
}

#tab-02 .p3-title {
    max-width: calc(443.52px * 1.92);
}

#tab-02 .p3-content {
    max-width: calc(493.2px * 1.92);
}

#tab-02 .p4-title {
    max-width: calc(422.4px * 1.92);
}

#tab-02 .p4-content {
    max-width: calc(507.12px * 1.92);
}

#tab-02 .p5-title {
    max-width: calc(318.72px * 1.92);
}

#tab-02 .p5-content {
    max-width: calc(502.96px * 1.92);
}

#tab-02 .p6-title {
    max-width: calc(210.72px * 1.92);
}

#tab-02 .p6-content {
    max-width: calc(531.36px * 1.92);
}

#tab-02 .t2-p7-title {
    max-width: calc(343.0367px * 1.92);
}

#tab-02 .t2-p7-content {
    max-width: calc(513.8184px * 1.92);
}


#tab-03 .p2-title {
    max-width: calc(513px * 1.92);
}

#tab-03 .p2-content {
    max-width: calc(435px * 1.92);
}


#tab-03 .p3-title {
    max-width: calc(450px * 1.92);
}

#tab-03 .p3-content {
    max-width: calc(558px * 1.92);
}


#tab-03 .p4-title {
    max-width: calc(341px * 1.92);
}

#tab-03 .p4-content {
    max-width: calc(470px * 1.92);
}


#tab-03 .p5-title {
    max-width: calc(155px * 1.92);
}

#tab-03 .p5-content {
    max-width: calc(581px * 1.92);
}


#tab-03 .p6-title {
    max-width: calc(210px * 1.92);
}

#tab-03 .p6-content {
    max-width: calc(531px * 1.92);
}


#tab-03 .p7-title {
    max-width: calc(343px * 1.92);
}

#tab-03 .p7-content {
    max-width: calc(513px * 1.92);
}



#tab-01-bg-01,
#tab-02-bg-01 {
    background-image: url('../image/v2/d-p1-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab-03-bg-01 {
    background-image: url('../image/v2/d-t3-p1-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-01-bottom {
    background-image: url('../image/v2/p1-bg-bottom.webp');
    background-repeat: repeat;
    background-size: 40px;
    background-color: #ffe7f0;
    bottom: 0;
    left: 0;
    height: 50px;
}

#tab-01-bg-02 {
    background-image: url('../image/v2/d-p2-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab-02-bg-02 {
    background-image: url('../image/v2/d-t2-p2-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab-03-bg-02 {
    background-image: url('../image/v2/d-t3-p2-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab-01-bg-03,
#tab-02-bg-03 {
    background-image: url('../image/v2/d-p3-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab-03-bg-03 {
    background-image: url('../image/v2/d-t3-p3-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.p7-title {
    max-width: calc(214px * 1.92);
}

.p7-tel {
    max-width: calc(388px * 1.92);
}

.p7-content {
    max-width: calc(323px * 1.92);
}

.p7-memo {
    max-width: calc(412px * 1.92);
}

.p7-items {
    max-width: calc(538px * 1.92);
}

.p7-item {
    max-width: calc(180px * 1.92);
}

#bg-05 {
    background-image: url('../image/v2/d-p4-bg.webp');
    background-size: cover;
    background-position-x: center;
    background-position-y: 5%;
    background-repeat: no-repeat;
    padding-top: 15%;
}

#bg-05.t3 {
    background-image: url('../image/v2/d-t3-p4-bg.webp');
}

.fixed-box {
    position: fixed;
    z-index: 99;
    top: calc(30% - 221px / 2);
    right: 0;
    display: flex;
}

.fixed-box button {
    max-width: 180px;
    border: 0;
    margin: 0;
    padding: 0;
}

.fixed-box button a {
    display: inline-block;
}

.fixed-box .d-lg-none {
    /*max-width: 334px;*/
}

.fixed-box .d-none.d-lg-block {
    max-width: 41px;
}

.go-top {
    position: fixed;
    bottom: 80px;
    right: 0px;
    cursor: pointer;
    z-index: 999;
}

.go-top img {
    max-width: 58px;
    max-height: 58px;
}


/* Tab 切換功能樣式 - 重構版本 */
.tab-header {
    position: absolute;
    bottom: 0;
    z-index: 10;
    background: transparent;
}

.tab-header-bg {
    position: relative;
    width: 100%;
}

.tab-bg-base {
    position: relative;
    width: 100%;
    top: 29px;
}

.tab-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

.tab-bg-overlay.active {
    z-index: 2;
}

.tab-bg-01 {
    top: 6px;
}

.tab-click-areas {
    position: absolute;
    top: 0;
    left: 22%;
    right: 0;
    width: calc(56%);
    height: 100%;
    display: flex;
}

.tab-area {
    flex: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tab-area:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tab-area:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}



@media (max-width: 992px) {
    .fixed-box {
        width: 100%;
        bottom: 0;
        top: unset;
    }

    .go-top {
        bottom: 95px;
        right: 0;
    }
}


@media (max-width: 992px) {

    .tab-header-bg {
        height: 93px;
    }

    .tab-bg-01 {
        top: 0;
    }

    .tab-click-areas {
        width: 100%;
        left: 0;
        top: 40px;
    }

    #tab-01 .p2-title {
        max-width: 162px;
    }

    #tab-01 .p2-content {
        max-width: calc(256px * 1.92);
    }

    #tab-01 .p3-title {
        max-width: calc(204px * 1.92);
    }

    #tab-01 .p3-content {
        max-width: calc(334px * 1.92);
    }

    #tab-01 .p4-title {
        max-width: 306px;
    }

    #tab-01 .p4-item {
        max-width: 295px;
    }

    #tab-01 .p4-items {
        max-width: 295px;
    }

    #tab-01 .p4-memo {
        max-width: 320px;
    }

    #tab-01 .p5-title {
        max-width: 190px;
    }

    #tab-01 .p5-items {
        max-width: calc(554px * 1.92);
    }

    #tab-01 .p5-item-02 {
        padding: 16rem 0;
    }

    #tab-01 .p5-item-03 {
        bottom: -4rem;
        top: unset;
        right: 0;
        z-index: 2;
    }

    #tab-01 .p6-title {
        max-width: calc(265px * 1.92);
    }

    #tab-01 .p6-content {
        max-width: calc(263px * 1.92);
    }



    #tab-02 .p2-title {
        max-width: calc(200.16px * 1.3);
    }

    #tab-02 .p2-content {
        max-width: calc(292.5927px * 1.3);
    }

    #tab-02 .p3-title {
        max-width: calc(313.68px * 1.3);
    }

    #tab-02 .p3-content {
        max-width: calc(319.44px * 1.3);
    }

    #tab-02 .p4-title {
        max-width: calc(232.56px * 1.3);
    }

    #tab-02 .p4-content {
        max-width: calc(229.68px * 1.3);
    }

    #tab-02 .p5-title {
        max-width: calc(181.68px * 1.3);
    }

    #tab-02 .p5-content {
        max-width: calc(157.68px * 1.3);
    }

    #tab-02 .p6-title {
        max-width: calc(189.84px * 1.3);
    }

    #tab-02 .p6-content {
        max-width: calc(349.44px * 1.3);
    }

    #tab-02 .t2-p7-title {
        max-width: calc(265.0286px * 1.3);
    }

    #tab-02 .t2-p7-content {
        max-width: calc(265.6953px * 1.3);
    }


    #tab-03 .p2-title {
        max-width: calc(266px * 1.3);
    }

    #tab-03 .p2-content {
        max-width: calc(336px * 1.3);
    }


    #tab-03 .p3-title {
        max-width: calc(211px * 1.3);
    }

    #tab-03 .p3-content {
        max-width: calc(336px * 1.3);
    }


    #tab-03 .p4-title {
        max-width: calc(183px * 1.3);
    }

    #tab-03 .p4-content {
        max-width: calc(327px * 1.3);
    }


    #tab-03 .p5-title {
        max-width: calc(153px * 1.3);
    }

    #tab-03 .p5-content {
        max-width: calc(340px * 1.3);
    }


    #tab-03 .p6-title {
        max-width: calc(189px * 1.3);
    }

    #tab-03 .p6-content {
        max-width: calc(350px * 1.3);
    }


    #tab-03 .p7-title {
        max-width: calc(265px * 1.3);
    }

    #tab-03 .p7-content {
        max-width: calc(264px * 1.3);
    }


    .p7-title {
        max-width: calc(179px * 1.3);
    }

    .p7-tel {
        max-width: calc(325px * 1.3);
    }

    .p7-content {
        max-width: calc(271px * 1.3);
    }

    .p7-memo {
        max-width: calc(298px * 1.3);
    }

    .p7-items {
        max-width: calc(180px * 1.3);
    }

    .home-main .swiper-pagination span.swiper-pagination-bullet {
        margin: 0 5px;
        width: 14px;
        /* 縮小點的寬度 */
        height: 14px;
        /* 縮小點的高度 */
    }

    #tab-01-bg-01 {
        background-image: url('../image/v2/m-p1-bg.webp');
    }

    #tab-01-bg-02 {
        background-image: url('../image/v2/m-p2-bg.webp');
    }

    #tab-01-bg-03 {
        background-image: url('../image/v2/m-p3-bg.webp');
    }

    #tab-03-bg-01 {
        background-image: url('../image/v2/m-t3-p1-bg.webp');
    }

    #tab-03-bg-02 {
        background-image: url('../image/v2/m-t3-p2-bg.webp');
    }

    #tab-03-bg-03 {
        background-image: url('../image/v2/m-t3-p3-bg.webp');
    }

    #bg-05 {
        background-image: url('../image/v2/m-p4-bg.webp');
        padding-top: 33%;
        padding-bottom: 8%;
    }

    #bg-05.t3 {
        background-image: url('../image/v2/m-t3-p4-bg.webp');
    }

    .bg-01-bottom {
        bottom: 4px;
    }

    .p2 .tab-bg-base {
        height: 100px;
    }

    .tab-area {
        transition: 0s;
    }
}
