.kv{
    padding-top: calc(100dvw*109/1920);
}

.kv img{
    pointer-events: none;
    user-select: none;
}

.kv-bg{
    position: absolute;
    display: block;
    width: calc(100dvw*815/1920);
    left: 50%;
    transform: translate(-50%, calc(-100dvw*109/1920));
}

.kv-deco{
    position: absolute;
    display: block;
    width: calc(100dvw*747/1920);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.kv-top{
    position: relative;
    display: block;
    width: calc(100dvw*516/1920);
    margin: 0 auto;
}

.kv-main{
    position: relative;
    display: block;
    width: calc(100dvw*653/1920);
    margin: 0 auto;
}

.kv-slogan{
    position: relative;
    display: block;
    width: calc(100dvw*738/1920);
    margin: 0 auto;
}

.kv-family{
    position: relative;
    display: block;
    width: calc(100dvw*719/1920);
    margin: 0 auto;
}

.kv-btns{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100dvw*13/1920);
    margin: calc(100dvw * -200 / 1920) 0 calc(100dvw * 35 / 1920);
}

.kv-link{
    position: relative;
    display: flex;
    width: calc(100dvw*560/1920);
    aspect-ratio: 560/109;
    background-image: url(../img/btn.png);
    background-size: cover;
    text-decoration: none;
    color: #623431;
    font-family: 'GenSenRounded2TW-M';
    font-size: calc(100dvw*50/1920);
    font-weight: bold;
    align-items: center;
    justify-content: center;
    gap: calc(100dvw*15/1920);
}
.kv-link:hover{
    filter: brightness(1.1);
}

.kv-link::after{
    content: "";
    background-image: url(../img/btn_arrow.png);
    background-size: 100%;
    width: calc(100dvw*48/1920);
    aspect-ratio: 1;
    transition: all ease .3s;
}

.kv-link:hover::after{
    transform: translateX(5px);
}

.kv-txt{
    position: relative;
    display: block;
    /* width: calc(100dvw*637/1920); */
    width: calc(100dvw*737/1920);
    margin: 0 auto;
}

.content-block{
    display: flex;
    flex-direction: column;
    gap: calc(100dvw*15/1920);
    align-items: center;
}

.content-block img{
    display: block;
}

.split-choco{width: calc(100dvw*198/1920);}


.b1-title{width: calc(100dvw*719/1920);}
.b1-txt{width: calc(100dvw*710/1920);}
.b1-txt-2{width: calc(100dvw*691/1920);}

.b2-title{width: calc(100dvw*708/1920);}
.b2-txt{width: calc(100dvw*692/1920);}

.b3-title{width: calc(100dvw*719/1920);}
.b3-txt{width: calc(100dvw*654/1920);}

.b4-title{width: calc(100dvw*666/1920);}
.b4-txt{width: calc(100dvw*707/1920);}

.b5-title{width: calc(100dvw*634/1920);}

.b2-carousel-frame{
    box-sizing: border-box;
    /* width: calc(100dvw*692/1920); */
    width: calc(100dvw*654/1920);
    aspect-ratio: 692/502;
    background-image: url(../img/2_frame.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
.b2-carousel{
    width: 100%;
}
.b2-item{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc(100dvw*40/1920) auto;
}
.b2-item img {display: block;}
.b2-item-1{width: calc(100%*334/692); aspect-ratio: 334/359;}
.b2-item-2{width: calc(100%*334/692); aspect-ratio: 334/358;}
.b2-item-3{width: calc(100%*334/692); aspect-ratio: 334/362;}
.b2-item-4{width: calc(100%*437/692); aspect-ratio: 437/358;}
.b2-item-5{width: calc(100%*437/692); aspect-ratio: 437/358;}

.owl-nav{
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 calc(100dvw*55/1920);
    box-sizing: border-box;
    pointer-events: none;
}
.owl-nav span{font-size: 0;}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{
    width: calc(100dvw*48/1920);
    aspect-ratio: 1;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events:visible
}
.owl-carousel .owl-nav button.owl-prev{
    background-image: url(../img/btn_left.png);
}
.owl-carousel .owl-nav button.owl-next{
    background-image: url(../img/btn_right.png);
}

.owl-dots{
    display: flex;
    justify-content: center;
    gap: calc(100dvw*20/1920);
}

.owl-carousel button.owl-dot{
    width: calc(100dvw*12/1920);
    aspect-ratio: 1;
    background-color: #8c6f65;
    border-radius: 100%;
}
.owl-carousel button.owl-dot.active{
    background-color: #d4bfaa;
}

.footer{
    display: block;
    width: calc(100dvw*360/1920);
    margin: calc(100dvw*50/1920) auto;
}

.b5-scroll-frame{
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100dvw * 710 / 1920);
    
    margin: 10px auto;
    padding: calc(100dvw * 30 / 1920);
    padding-right: calc(100dvw * 10 / 1920);

    color: #674945;
    border: solid #d4bfaa calc(100dvw * 6 / 1920);
    border-radius: 25px;
    background-color: white;
}

.b5-scroll-main{
    max-height: calc(100dvw*780/1920);
}
.mCSB_inside>.mCSB_container{
    margin-right: calc(100dvw * 30 / 1920);
}

.mCSB_scrollTools .mCSB_draggerContainer{
    background-color: rgba(212, 191, 171, .3);
    border-radius: 10px;
}
.mCSB_scrollTools .mCSB_draggerRail{display: none;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
    margin: 10px auto;
    background-color: #623431 !important;}

.b5-block{
    padding: calc(100dvw * 30 / 1920) 0;
    border-bottom: #674945 solid 1px;
    font-size: calc(100dvw * 18 / 1920);
    line-height: calc(100dvw * 26 / 1920);
}
.b5-block:last-child{border-bottom: none;}

.b5-block p{
    padding-bottom: calc(100dvw * 30 / 1920);
}

.b5-block h3{
    font-weight: bold;
    padding-bottom: calc(100dvw * 30 / 1920);
}
.b5-block h4{
    font-weight: 600; 
    padding-bottom: calc(100dvw * 10 / 1920); 
}

.b5-top{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(100dvw * 10 / 1920);
}

.b5-block h4 span{
    font-weight: normal;
    width: 70%;
}

.b5-block ul{
    padding-left: calc(100dvw * 40 / 1920);
    font-size: calc(100dvw * 16 / 1920);
}
.b5-list-square{list-style: square;}
.b5-list-square>li{ padding-bottom: calc(100dvw * 10 / 1920); }
.b5-list-decimal{list-style: decimal;}
.b5-list-disc{list-style: disc;}
.b5-list-disc b{font-weight: bold;}

/* mobile */
@media screen and (max-width: 767px) {
    .mobile .kv{
        padding-top: calc(100dvw*150/640);
    }

    .kv-bg{
        width: 100%;
        transform: translate(-50%, calc(-100dvw*150/640));
    }

    .kv-deco{
        width: 100%;
        left: initial;
        transform: initial;
        top: calc(100dvw*175/640);
    }

    .kv-top{
        width: calc(100dvw*445/640);
    }

    .kv-main{
        width: calc(100dvw*625/640);
    }

    .kv-slogan{
         width: calc(100dvw*636/640);
    }

    .kv-family{
        width: 100%;
    }

    .kv-btns{
        gap: calc(100dvw*13/640);
        margin: calc(100dvw * -170 / 640) 0 calc(100dvw * 20 / 640);
    }

    .kv-link{
        width: calc(100dvw*524/640);
        aspect-ratio: 524/100;
        background-image: url(../img/m/btn.png);
        font-size: calc(100dvw*50/640);
        gap: calc(100dvw*15/640);
    }

    .kv-link::after{
        background-image: url(../img/m/btn_arrow.png);
        width: calc(100dvw*44/640);
    }

    .kv-txt{
        width: calc(100dvw*588/640);
    }

    .content-block{
        display: flex;
        gap: calc(100dvw*15/640);
    }

    .split-choco{width: calc(100dvw*198/640);}


    .b1-title{width: calc(100dvw*638/640);}
    .b1-txt{width: calc(100dvw*633/640);}
    .b1-txt-2{width: calc(100dvw*614/640);}

    .b2-title{width: calc(100dvw*640/640);}
    .b2-txt{width: calc(100dvw*614/640);}

    .b3-title{width: calc(100dvw*638/640);}
    .b3-txt{width: calc(100dvw*614/640);}

    .b4-title{width: calc(100dvw*621/640);}
    .b4-txt{width: calc(100dvw*619/640);}

    .b5-title{width: calc(100dvw*603/640);}

    .b2-carousel-frame{
        width: calc(100dvw*614/640);
        aspect-ratio: 614/564;
        background-image: url(../img/m/2_frame.png);
    }

    .b2-item{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: calc(100dvw*50/640) auto;
    }
    .b2-item img {display: block;}
    .b2-item-1{width: calc(100%*390/614); aspect-ratio: 390/418;}
    .b2-item-2{width: calc(100%*390/614); aspect-ratio: 390/418;}
    .b2-item-3{width: calc(100%*390/614); aspect-ratio: 390/421;}
    .b2-item-4{width: calc(100%*509/614); aspect-ratio: 509/418;}
    .b2-item-5{width: calc(100%*510/614); aspect-ratio: 510/418;}

    .owl-nav{
        padding: 0 calc(100dvw*30/640);
    }
    .owl-nav span{font-size: 0;}
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next{
        width: calc(100dvw*55/640);
    }
    .owl-carousel .owl-nav button.owl-prev{
        background-image: url(../img/m/btn_left.png);
    }
    .owl-carousel .owl-nav button.owl-next{
        background-image: url(../img/m/btn_right.png);
    }

    .owl-dots{
        display: flex;
        justify-content: center;
        gap: calc(100dvw*20/640);
    }

    .owl-carousel button.owl-dot{
        width: calc(100dvw*12/640);
    }
    .footer{
        width: calc(100dvw*360/640);
        margin: calc(100dvw*50/640) auto;
    }

    .b5-scroll-frame{
        width: calc(100dvw * 620 / 640);
        padding: calc(100dvw * 20 / 640);
        padding-right: calc(100dvw * 10 / 640);
        border: solid #d4bfaa calc(100dvw * 6 / 640);
        border-radius: 25px;
    }

    .b5-scroll-main{
        max-height: calc(100dvw*500/640);
    }
    .mCSB_inside>.mCSB_container{
        margin-right: calc(100dvw * 20 / 640);
    }
    .mCSB_scrollTools{width: 8px;}

    .b5-block{
        padding: calc(100dvw * 30 / 640) 0;
        font-size: 18px;
        line-height: 26px;
    }

    .b5-block p{
        padding-bottom: calc(100dvw * 30 / 640);
    }

    .b5-block h3{
        font-weight: bold;
        padding-bottom: calc(100dvw * 30 / 640);
    }
    .b5-block h4{
        font-weight: 600; 
        padding-bottom: calc(100dvw * 10 / 640); 
    }

    .b5-block ul{
        padding-left: calc(100dvw * 30 / 640);
        font-size: 16px;
    }
    .b5-list-square{list-style: square;}
    .b5-list-square>li{ padding-bottom: calc(100dvw * 10 / 640); }
    .b5-list-decimal{list-style: decimal;}
    .b5-list-disc{list-style: disc;}
}