/* BYD Campaign Page Styles */

.text-center{
    text-align: center;
}
.contents {
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    word-wrap: break-word;
    --colorRed: #D70C19;
}

.contents img {
    max-width: 100%;
    height: auto
}

.contents .c-kv {
    position: relative
}

@media screen and (min-width: 768px) {
    .contents .c-kv {
        padding-top:81px;
    }
}

@media screen and (max-width: 767px) {
    .contents .c-kv {
        padding-top:12.077294686vw
    }
}

.pcShow { display: block; }
.spShow { display: none; }
.spInlineShow {
    display: none;
}
@media (max-width: 768px) {
	.pcShow { display: none; }
	.spShow { display: block; }
    .spInlineShow{
        display: inline-block;
    }
}


/* CTA Section */
.cta-section {
    background-color: white;
    padding: 80px 16px;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
}
.cta-section .ctp-top{
    margin-bottom: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 50px;
}
.cta-section .ctp-top .highlight{
    color: #D70C19;
    font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
    .cta-section .ctp-top{
        margin-bottom: 16px;
        font-size: 1.0625rem;
        line-height: normal;
    }

}
@media screen and (max-width: 767px) {
    .cta-section {
        padding: 48px 16px 64px;
    }
}

.cta-section dl {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.1rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.cta-section dl dt {
    border: solid 1px var(--colorRed);
    padding: 5px 10px;
    color: var(--colorRed);
}
@media screen and (max-width: 767px) {
    .cta-section dl {
        font-size: 15px;
        margin-top: 24px;
    }
    .cta-section dl dd{
        text-align: left;
    }
}

.cta-section .m-notes {
    margin-top: 16px;
}
@media screen and (max-width: 767px) {
    .cta-section .m-notes {
        font-size: 0.875rem;
    }
}

.cta-section .m-button-normal.-size-md {
    width: 100%;
    max-width: 446px;
    height: 70px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 21px;
}
@media screen and (max-width: 767px) {
    .cta-section .m-button-normal.-size-md {
        width: 311px;
        height: 54px;
        font-size: 15px;
    }
}


.overview-box {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    border: 3px solid black;
    border-radius: 14px;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
}
.overview-box::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 10.5%;
    display: block;
    width: calc(100% - 21%);
    height: 5px;
    background-color: #F5F5F5;
}
.overview-box::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 10.5%;
    display: block;
    width: calc(100% - 21%);
    height: 5px;
    background-color: #F5F5F5;
}
@media screen and (max-width: 767px) {
    .overview-box::before {
        top: 5%;
        left: -5px;
        width: 7px;
        height: 90%;
    }
    .overview-box::after {
        bottom: 5%;
        left: calc(100% - 2px);
        width: 7px;
        height: 90%;
    }
}

.overview-box-inner {
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 767px) {
    .overview-box-inner {
    }
}

.campaign-overview h2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #374151;
    line-height: 1.2;
}
@media screen and (max-width: 767px) {
    .campaign-overview h2 {
        font-size: 1.375rem;
    }
}

.overview-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.25rem;
    line-height: 1;
}
.overview-text.emphasize{
    line-height: 58px;
    margin: 8px 0;
}
.overview-annotations{
    margin: 24px 0 16px;
}
@media screen and (max-width: 767px) {
    .overview-text {
        font-size: 1rem;
        line-height: 36px;
    }
    .overview-annotations{
        margin: 24px 0 0;
    }
}
.overview-text .big {
    font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
    .overview-text .big {
        font-size: 1.375rem;
    }
}

.overview-text .highlight {
    color: #dc2626;
    font-weight: bold;
}

.title-section-label .label{
    margin: auto;
    font-size: 2rem;
    line-height: 1.375;
    margin-bottom: 16px;
    
}
@media screen and (max-width: 767px) {
    .title-section-label .label{
        font-size: 1.25rem;
        margin-bottom: 24px;
        line-height: 1.35;
        
    }

}

.title-section-g {
    margin-bottom: 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
}
.title-section-g .big {
    font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
    .title-section-g {
        margin-bottom: 10px;
        font-size: 1rem;
    }
    .title-section-g .big {
        font-size: 1.25rem;
    }
}

.title-section-wrap {
    text-align: center;
}

.title-section {
    position: relative;
    margin: auto;
    display: inline-block;
    min-width: 420px;
    padding: 0 52px;
    font-family: "Noto Sans JP", sans-serif;
    color: #342412;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.title-section::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    display: inline-block;
    width: 3px;
    height: 56px;
    background-color: var(--colorRed);
    border-radius: 25px;
    transform: rotate(-30deg);
}
.title-section::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    display: inline-block;
    width: 3px;
    height: 56px;
    background-color: var(--colorRed);
    border-radius: 25px;
    transform: rotate(30deg);
}
@media screen and (max-width: 767px) {
    .title-section {
        font-size: 1.375rem;
        min-width: 280px;
    }
    .title-section::before {
        bottom: -6px;
        height: 34px;
    }
    .title-section::after {
        bottom: -6px;
        height: 34px;
    }
}




/* Calculation Box */
.calculation-box {
    margin-top: 40px;
    border-radius: 14px;
    overflow: hidden;
    font-family: "Noto Sans JP", sans-serif;
}
.calculation-box dt {
    padding: 6px;
    background-color: var(--colorRed);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}
.calculation-box dd {
    padding: 40px 24px;
}
@media screen and (max-width: 767px) {
    .calculation-box {
        margin-top: 24px;
    }
    .calculation-box dt {
        font-size: 0.9rem;
    }
    .calculation-box dd {
        padding: 40px 16px;
    }
}

.calculation-content {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    font-family: "Noto Sans JP", sans-serif;
}
@media screen and (max-width: 767px) {
    .calculation-content {
        display: block;
    }
}





.c-cars {
    padding: 80px 16px;
}
@media screen and (max-width: 767px) {
    .c-cars {
        padding: 0 16px;
    }
}

.contents .c-cars .m-list {
    margin: 40px auto 0;
    max-width: 1100px;
    display: flex;
    list-style: none
}

@media screen and (min-width: 768px) {
    .contents .c-cars .m-list {
        justify-content:space-between;
        margin-bottom: 28px
    }

    .contents .c-cars .m-list_item:nth-of-type(1) {
        padding-top: 1px
    }

    .contents .c-cars .m-list_item:nth-of-type(2) {
        padding-top: 19px
    }

    .contents .c-cars .m-list_item:nth-of-type(4) {
        padding-top: 15px
    }

    .contents .c-cars .m-list_item .image {
        margin-bottom: 29px
    }

    .contents .c-cars .m-list_item .m-button-normal.-size-md {
        margin-top: auto;
        width: 197px;
        height: 47px;
        font-size: 14px
    }
}

@media screen and (max-width: 767px) {
    .contents .c-cars .m-list {
        flex-direction:column;
        gap: 16.9082125604vw;
        margin-bottom: 8.6956521739vw
    }

    .contents .c-cars .m-list_item {
        width: 100%;
        text-align: center
    }

    .contents .c-cars .m-list_item:nth-of-type(1) img {
        width: 79.3599033816vw
    }

    .contents .c-cars .m-list_item:nth-of-type(2) img {
        width: 78.2826086957vw
    }

    .contents .c-cars .m-list_item:nth-of-type(3) img {
        width: 84.8429951691vw
    }

    .contents .c-cars .m-list_item:nth-of-type(4) img {
        width: 84.8429951691vw
    }

    .contents .c-cars .m-list_item .image {
        margin-bottom: 6.038647343vw
    }

    .contents .c-cars .m-list_item .m-button-normal.-size-md {
        height: 14.4927536232vw;
        font-size: 3.8647342995vw
    }
}

@media screen and (min-width: 768px) {
    .contents .c-cars .m-notes {
        margin-bottom:41px
    }
}

@media screen and (max-width: 767px) {
    .contents .c-cars .m-notes {
        margin-bottom:8.9371980676vw
    }
}











.campaign-overview_btn {
    margin-top: 30px;
}
@media screen and (max-width: 767px) {
    .campaign-overview_btn {
        margin-top: 20px;
    }
}

.campaign-overview_txt {
    margin-top: 120px;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .campaign-overview_txt {
        margin-top: 60px;
        font-size: 16px;
    }
}

.campaign-overview_txt .big {
    margin-top: 16px;
    font-size: 40px;
}
@media screen and (max-width: 767px) {
    .campaign-overview_txt .big {
        font-size: 22px;
    }
}
.campaign-information{
    padding: 72px 16px 0;
    background-color: #FFF;
}
.campaign-information h2{
    font-weight: 500;
}
@media screen and (min-width: 768px) {
    .emphasize{
        font-size: 2rem;
        font-weight: 700;
    }
    .emphasize .big{
        font-size: 3rem;
    }
}
@media screen and (max-width: 767px) {
    .campaign-information{
        padding: 64px 20px 0;
    }
    .campaign-information .overview-box-inner{
        padding: 48px 0;
    }
    .campaign-information .overview-box-inner .overview-text{
        line-height: 1.5;
        margin-bottom: 24px;
    }
}
.annotation{
    font-size: 0.875rem;
    font-weight: 400;
}
.m-notes.annotation{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
}
.m-notes.annotation:before{
    content : "※"
}
@media screen and (max-width: 767px) {
    .m-notes.annotation{
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }
}
.campaign-detail{
    margin-top: 80px;
}
.campaign-detail .campaign-detail__head{
    text-align: center;
}
.campaign-detail .campaign-detail__head .title-section-g{
    font-size: 1.25rem;
}
.campaign-detail .campaign-detail__head .annotation{
    margin-top: 8px;
}
@media screen and (max-width: 767px) {
    .campaign-detail{
        margin-top: 48px;
    }
    .campaign-detail .campaign-detail__head .title-section-g{
        font-size: 1rem;
    }
    .campaign-detail .campaign-detail__head .title-section{
        padding: 0 20px;
    }
}

.flex{
    display: flex;
}
.flex-column{
    flex-direction: column;
}
@media screen and (max-width: 767px) {
    .flex-sp-column{
        flex-direction: column;
    }
}
.campaign-overview_txt{
    text-align: center;
    margin: 18px 0 14px;
}
@media screen and (max-width: 767px) {
    .campaign-overview_txt{
        text-align: left;
        margin: 24px 0;
    }
}
.c-voices{
    padding: 90px 0 80px;
}
@media screen and (max-width: 767px) {
    .c-voices{
        padding: 48px 0 64px;
    }
}
.content-title{
    font-size : 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
    .content-title{
        font-size: 1.375rem;
    }
}
.voices{
    display: flex;
    flex-direction: column;
    gap: 24px 0;
}
.voices .voice{
    gap: 0 30px;
}
.voices .voice .voice-icon{
    width: 160px;
}
.voices .voice .voice-message{
    flex:1;
    padding: 24px;
    background-color: #F5F5F5;
    border-radius: 14px;
    font-size: 1.75rem;
    font-weight: 600;
    position: relative;
}
.voices .voice .voice-message::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 70px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #F5F5F5;
}
.voices .voice .voice-message .profile{
    font-size: 1rem;
    color: #757575;
    line-height: calc(28/16);
}
@media screen and (max-width: 767px) {
    .voices .voice{
        gap: 0 16px;
    }
    .voices .voice .voice-icon{
        width: 80px;
    }
    .voices .voice .voice-message{
        padding: 8px 16px 20px;
        font-size: 1rem;
    }
    .voices .voice .voice-message .profile{
        text-align: right;
        font-size: 0.875rem;
        line-height: 2;
    }
    .voices .voice .voice-message::before {
        top: 33px;
        left: -9px;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 14px solid #F5F5F5;
    }
}
.bg-gray{
    background-color: #F5F5F5;
}
.bg-white{
    background-color: #ffffff;
}
.section-inner{
    max-width: 1100px;
    margin: auto;
    padding: 0 16px;


}
.contents-inner{
    max-width: 996px;
    margin: auto;
    padding: 0 16px;

}
@media screen and (max-width: 767px) {
    .section-inner{

    }
    .contents-inner{
        padding: 0;
    }
}
.c-join{
    margin-top: 80px;
}
.c-join .join-flex{
    gap: 0 24px;
}
.c-join .join-flex .join-flex-box{
    width: 33.3333%;
}
@media screen and (max-width: 767px) {
    .c-join{
        margin-top: 0;
    }
    .c-join .join-flex{
        gap: 32px 0;
    }
    .c-join .join-flex .join-flex-box{
        width: 100%;
    }
}
.c-fair-information{
    padding-top: 112px;
}
.overview-box.border-white:before, .overview-box.border-white:after{
    background-color: #ffffff;
}
@media screen and (max-width: 768px) {
    .c-fair-information {
        padding-top: 64px;
    }
    .c-fair-information .overview-box{
        margin-top: 48px;
    }
    .c-fair-information .overview-box-inner{
        padding: 48px 0;
        font-weight: 600;
        line-height: calc(36/16);
    }
    .c-fair-information .overview-box-inner p:nth-of-type(2){
        margin-top: 36px;
    }
    .c-fair-information .overview-box-inner .huge{
        font-size: 1.375rem;
    }
    .c-fair-information .overview-box-inner .little{
        font-size: 0.875rem;
    }
    .c-fair-information .overview-box-inner .highlight{
        color: #D70C19;
    }
}
.c-campaign-goods{
    padding: 80px 0;
}
@media screen and (max-width: 768px) {
    .c-campaign-goods{
        padding: 48px 0;
    }
}
.label{
    background-color: #D70C19;
    color: #ffffff;
    width: fit-content;
    height: fit-content;
    padding: 0 6px;
}
.c-warranty{
    margin-top: 112px;
}
.c-warranty .warrenty-box{
    border-radius: 14px;
    padding: 40px 68px;
    margin-top: 40px;
}
.c-warranty .warrenty-box .flex{
    gap: 0 12px;
    align-items: center;
}
.c-warranty .warrenty-box .flex .warrenty-point{
    width: calc((110/1100) * 100%);
    min-width: 80px;
    max-width: 111px;
}
.c-warranty .warrenty-box .flex .warrenty-head{
    flex: 1;
    text-align: left;
    display: flex;
    gap: 0 10px;
    font-size: clamp(24px, calc((32/1918) * 100vw), 32px);
    font-weight: 600;
    align-items: center;
}
.c-warranty .warrenty-box .flex .warrenty-head .text-highlight{
    color: #D70C19;
}
.c-warranty .warrenty-box .flex .warrenty-qr{
    width: calc((112/1100) * 100%);
    min-width: 70px;
    max-width: 112px;
}
.c-warranty .warrenty-box .flex .warrenty-qr p{
    font-size: clamp(10px, calc((15/1918) * 100vw), 15px);
    margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
    .c-warranty{
        margin-top: 48px;
    }
    .c-warranty .warrenty-box{
        padding: 40px 14px;
        margin-top: 24px;
    }
    .c-warranty .warrenty-box .flex .warrenty-point{
        width: 72px;
    }
    .c-warranty .warrenty-box .flex .warrenty-head{
        flex-direction: column;
        gap: 4px 0;
        align-items: flex-start;
    }
    .c-warranty .warrenty-box .flex .warrenty-head .label{
        font-size: 1.5rem;
    }
    .c-warranty .warrenty-box .flex .warrenty-head .text-highlight{
        font-size: 1.25rem;
    }
    .c-warranty .warrenty-box .flex .warrenty-head .link{
        font-size: 0.9375rem;
        font-weight: bold;
    }
    .c-warranty .warrenty-box .flex .warrenty-head .link a{
        color: #000;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}
.goods-box{
    border-radius: 14px;
    margin-top: 40px;
    padding: 32px 68px 54px;
}
.goods-box .goods{
    gap: 0 16px;
}
.goods-box .goods picture{
    flex: 1;
}
.goods-box .goods-information{
    margin-top: 40px;
    font-weight: 600;
}
.goods-box .goods-information .information-main{
    margin: 40px 0;
    font-size: 1.25rem;
}
.goods-box .goods-information .annotation{
    font-size: 1.0625rem;
    font-weight: 600;
    align-items: flex-start;
    text-align: left;
}
@media screen and (max-width: 767px) {
    .goods-box{
        margin-top: 24px;
        padding: 8px 0;
    }
    .goods-box .goods{
        flex-direction: column;
        gap: 8px 0;
        padding-right: 14px;
    }
    .goods-box .goods-information{
        padding: 0 14px;
        text-align: left;
    }
}
.flex-box{
    border-radius: 14px;
    padding: 40px 0;
    margin-top: 24px;
}
.flex-box .col-left{
    width: 224px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #000000;
}
.flex-box .col-right{
    padding-left: 40px;
}
.flex-box .col-right .heading{
    font-size: 1.75rem;
    font-weight: 600;
}
.flex-box .col-right .heading .highlight{
    color: #D70C19;
}
.flex-box .col-right .heading .emphasize{
    font-size: 2.5rem;
}
.flex-box .col-right .information{
    margin-top: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 2;
}
@media screen and (max-width: 767px) {
    .flex-box{
        padding: 0 15px 40px;
    }
    .flex-box .col-left{
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #000000;
        height: 91px;
        font-size: 1.125rem;
    }
    .flex-box .col-right{
        padding-left: 0;
        padding-top: 24px;
    }
    .flex-box .col-right .heading{
        text-align: center;
        font-size: 1.375rem;
        line-height: calc(36/22);
    }
    .flex-box .col-right .heading .emphasize{
        font-size: 1.375rem;
    }
    .flex-box .col-right .annotation{
        text-align: center;
    }
    .flex-box .col-right .information{
        font-size: 1rem;
        line-height: 1.6;
    }
}
.scroll-over-table{
    width: calc(100% + 23px);
    max-width: calc(100% + 23px);
    margin-right: -23px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    cursor: grab;
    user-select: none;
}
.scroll-over-table::-webkit-scrollbar { /* WebKit browsers */
    display: none;
}
.scroll-over-table.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.scroll-over-table img{
    height: 504px;
    min-width: 1794px;
    width: 1794px;
    max-width: none;
    display: block;
    pointer-events: none; /* 画像自体のドラッグ防止 */
}
@media screen and (max-width: 767px) {
    .scroll-over-table{
        margin-right: -16px;
    }
}
.annotation-no-reset{
    counter-reset: annotation-counter;
    margin-top: 10px;
}
.annotation-no-reset .annotation-no{
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 400;
}
.annotation-no-reset .annotation-no::before {
    content: "*" counter(annotation-counter);
    counter-increment: annotation-counter;
    min-width: 16px;
    display: inline-block;
}
.annotation-no-reset .annotation{
    justify-content: flex-start;
}
@media screen and (max-width: 767px) {
    .annotation-no-reset{
        margin-top: 16px;
    }
    .annotation-no-reset p:not(:first-of-type){
        margin-top: 8px;
    }
}
.note{
    margin-top: 24px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Generic counter reset class with ※ symbol */
.counter-reset{
    counter-reset: generic-counter;
    margin-top: 24px;
}
.counter-reset .counter-item{
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 400;
}
.counter-reset .counter-item::before {
    content: "※" counter(generic-counter);
    counter-increment: generic-counter;
    min-width: 22px;
    display: inline-block;
}
@media screen and (max-width: 767px) {
    .counter-reset{
        margin-top: 16px;
    }
}
.models{
    padding: 0 16px;
}
.models .model:not(:first-of-type){
    margin-top: 32px;
}
@media screen and (max-width: 767px) {
    .models{
        padding: 0;
        margin: 0 -12px;
    }
    .models .model:not(:first-of-type){
        margin-top: 48px;
    }
}
.model-table-heading{
    margin: 20px 0 10px;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
}
.model-table-heading .model-table-heading__scroll{
    width: 258px;
}
@media screen and (max-width: 767px) {
    .model-table-heading{
        margin: 40px 0 10px;
        font-size: 1.125rem;
    }
    .model-table-heading .model-table-heading__scroll{
        width: 165px;
    }
}