@charset "utf-8";

/*-----------------------------------------------
    index
-----------------------------------------------*/
.secHero{
    width: 100%;
}

.secBnr{
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
}

.secLineContent{
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
    margin-top: 2.5rem;
    position: relative;
    z-index: 3;
}
.secLineContent .inner{
    width: 100%;
}
.secLineContent .imgtxt{
    width: 100%;
    margin: 0 auto;
    max-width: 68.6rem;
}
.secLineContent .linelinkbox{
    position: relative;
    margin: 0 auto;
    width: calc(343 / 345 * 100%);
    margin-top: 0.5rem;
}
.secLineContent .linelinkbox .linkIn{
    width: 100%;
    position: relative;
    padding-top: calc(297 / 686 * 100%);
    z-index: 2;
}
.secLineContent .linelinkbox::after{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(310 / 365 * 100%);
    border-radius:1.5rem;
    bottom: 0;
    left: 0;
    box-shadow: 0 1rem 1.5rem 0.5rem rgba(0,0,0,0.25);
}
.secLineContent.lazyloaded .linelinkbox .linkIn{
    background: url(../img/index/imgBgLink.png) no-repeat center bottom;
    background-size: 100% auto;
}
.secLineContent .linelinkbox .imgLink{
    position: absolute;
    width: calc(310 / 343 * 100%);
    left: calc(50% - (310 / 2 / 343 * 100%));
    bottom: calc(42 / 297 * 100%);
}



/* secNoreru */
.secNoreru{
    position: relative;
    background-color: var(--noreruBgColor);
    padding-bottom: 3.4rem;
}
.secNoreru::after{
    content: "";
    position: absolute;
    width: calc(100% + 0.05rem);
    height: 5rem;
    top: -4.8rem;
    left: 0;
    background-color: var(--noreruBgColor);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.secNoreru .inner{
    width: 100%;
    position: relative;
    z-index: 4;
    padding-top: 3.2rem;
}
.secNoreru .noreruHero{
    width: 100%;
}
.secNoreru .imgNorerucontent{
    width: 100%;
    margin-top: 2.4rem;
}
.secNoreru .worriesbox{
    width: 100%;
    background-color: var(--keyColor);
    padding-top: 3.4rem;
}
.secNoreru .worriesbox .imgWorries{
    width: 100%;
}
.secNoreru .worriesTxt{
    width: 100%;
}

/* secVoice */
.secVoice{
    width: 100%;
    background-color: var(--noreruBgColor);
}
.secVoice .voiceHero{
    width: 100%;
}
.secVoice .inner{
    width: 100%;
    padding-top: 4.8rem;
}
.secVoice .imgTit{
    width: calc(324 / 375 * 100%);
    margin: 0 auto;
}

/* sliderBox */
.secVoice .sliderBox{
    width: 100%;
    overflow: hidden;
    margin-top: 6.7rem;
}
.secVoice .sliderBox .swiper{
    width: calc(280 / 375 * 100%);
    margin: 0 auto;
    overflow: visible;
}
.secVoice .sliderBox .swiper-slide{
    transform: scale(0.84);
    transition: transform 0.3s ease-in-out;
}
.secVoice .sliderBox .swiper-slide-active{
    transform: scale(1);
}
.secVoice .sliderBox .voiceItem{
    background-color: var(--headerBgColor);
    border: 2px solid;
    border-color: var(--borderColor);
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}
.secVoice .sliderBox .itemInner{
    padding: 1.5rem 1.5rem 1.6rem;
}
.secVoice .sliderBox .imgArea{
    width: 100%;
}
.secVoice .sliderBox .imgArea .imgbox{
    width: calc(190 / 247 * 100%);
    max-width: 100%;
    margin: 0 auto;
}
.secVoice .sliderBox .txtArea{
    margin-top: 1.5rem;
}
.secVoice .sliderBox .nametit{
    width: 100%;
    text-align: center;
    font-size: var(--pcFontSize15);
    line-height: calc(20 / 15);
    font-weight: bold;
    color: var(--keyColor);
}
.secVoice .sliderBox .smalltit{
    font-size: var(--pcFontSize13);
}
.secVoice .sliderBox .txtInner{
    width: 100%;
    margin-top: 1.5rem;
}
.secVoice .sliderBox .txtbox{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    max-height: calc(var(--pcFontSize15) * var(--pcLineHeight15_32) * 6);
}
.secVoice .sliderBox .txtbox .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight15_32);
}
.secVoice .sliderBox .moreBtn{
    width: 100%;
    max-width: 20.6rem;
    margin: 0 auto;
    pointer-events: all;
    cursor: pointer;
    margin-top: 0.8rem;
}
.secVoice .sliderBox .moreBtn.open{
    display: none;
}
.secVoice .sliderBox .triggerArea:has(.moreBtn.open) .txtbox{
    -webkit-line-clamp: unset;
    max-height: unset;
}
.secVoice .sliderBox .swiper-pagination{
    position: static;
    width: 100%;
    margin-top: 4.3rem;
}
.secVoice .sliderBox .swiper-pagination .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    margin: 0 0.7rem!important;
    background-color: var(--pagerColor);
    opacity: 1;
}
.secVoice .sliderBox .swiper-pagination .swiper-pagination-bullet-active{
    background-color: var(--keyColor);
}
@media only screen and (max-width:1215px){
    .secVoice .sliderBox .nametit{
        font-size: var(--spFontSize15);
    }
    .secVoice .sliderBox .smalltit{
        font-size: var(--spFontSize13);
    }
    .secVoice .sliderBox .txtbox{
        max-height: calc(var(--spFontSize15) * var(--pcLineHeight15_32) * 6);
    }
    .secVoice .sliderBox .txtbox .txt{
        font-size: var(--spFontSize14);
    }
}

/* secPlan */
.secPlan{
    background-color: var(--noreruBgColor);
}
.secPlan .inner{
    width: 100%;
    padding-top: 6rem;
}
.secPlan .imgtit{
    width: calc(285 / 375 * 100%);
    max-width: 57rem;
    margin: 0 auto;
}
.secPlan .imgSubtit{
    width: calc(353 / 375 * 100%);
    max-width: 70.6rem;
    margin: 0 auto;
    margin-top: 7.4rem;
    position: relative;
    z-index: 3;
}
.secPlan .imgplanbnr{
    width: 100%;
    margin-top: -1rem;
}
/* secPlanTab */
.secPlanTab{
    background-color: var(--noreruBgColor);
}
.secPlanTab .inner{
    width: calc(345 / 375 * 100%);
    margin: 0 auto;
    padding-top: 4rem;
}
.secPlanTab .imgplantit{
    width: calc(262 / 345 * 100%);
    max-width: 52.4rem;
    margin: 0 auto;
}

/* tabArea */
.secPlanTab .tabArea{
    width: 100%;
    margin-top: 4.2rem;
}
.secPlanTab .tablist{
    display: flex;
    align-items: flex-end;
}
.secPlanTab .tabItem{
    width: calc((100% - 2px) / 2);
    margin-right: 2px;
    cursor: pointer;
}
.secPlanTab .tabItem:last-child{
    margin-right: 0;
}
.secPlanTab .tabIn{
    display: flex;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: var(--tabnormalColor);
    color:var(--txtnormalColor);
    border-radius: 1rem 1rem 0 0;
}
.secPlanTab .tabIn .tabtxt{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: var(--pcFontSize17);
    line-height: var(--pcLineHeight17_20);
    font-weight: bold;
}
.secPlanTab .tabIn .tabtxt .num{
    font-size: var(--pcFontSize22);
}
.secPlanTab .tabItem.active .tabIn{
    background-color: var(--keyColor);
    color: var(--headerBgColor);
    height: 5rem;
}
.secPlanTab .tabItem.active .tabtxt{
    font-size: var(--pcFontSize19);
}
.secPlanTab .tabItem.active .colortxt{
    color: var(--txtactiveColor);
    font-size: var(--pcFontSize19);
}
.secPlanTab .tabItem.active .numtxt{
    font-size: var(--pcFontSize22);
}
.secPlanTab .tabItem.active .engtxt{
    font-size: var(--pcFontSize22);
}
@media only screen and (max-width:1215px){
    .secPlanTab .tabIn .tabtxt{
        font-size: var(--spFontSize17);
    }
    .secPlanTab .tabIn .tabtxt .num{
        font-size: var(--spFontSize22);
    }
    .secPlanTab .tabItem.active .tabtxt{
        font-size: var(--spFontSize19);
    }
    .secPlanTab .tabItem.active .colortxt{
        font-size: var(--spFontSize19);
    }
    .secPlanTab .tabItem.active .numtxt{
        font-size: var(--spFontSize22);
    }
    .secPlanTab .tabItem.active .engtxt{
        font-size: var(--spFontSize22);
    }
}

/* contentArea */
.secPlanTab .contentArea{
    width: 100%;
    border: 2px solid;
    border-color: var(--keyColor);
    background-color: var(--headerBgColor);
}
.secPlanTab .contentlist{
    width: 100%;
}
.secPlanTab .contentItem{
    display: none;
}
.secPlanTab .contentItem.on{
    display: block;
}
.secPlanTab .contentItem .contentImg{
    width: 100%;
}

/* secPay */
.secPay{
    background-color: var(--noreruBgColor);
    width: 100%;
}
.secPay .inner{
    width: 100%;
    padding-top: 8.9rem;
}
.secPay .imgtit{
    width: calc(334 / 375 * 100%);
    max-width: 55.2rem;
    margin: 0 auto;
}
.secPay .payItem{
    width: calc(347 / 375 * 100%);
    max-width: 69.4rem;
    margin: 0 auto;
    margin-top: 6.3rem;
}

/* secPack */
.secPack{
    background-color: var(--noreruBgColor);
    width: 100%;
    padding-bottom: calc(2.7rem + 2.7rem);
}
.secPack.lazyloaded{
    background: url(../img/index/imgbgPack.jpg) center bottom no-repeat;
    background-size: 100% auto;
    background-color: var(--noreruBgColor);
}
.secPack .inner{
    width: 100%;
    padding-top: 7.8rem;
}
.secPack .imgtit{
    width: calc(365 / 375 * 100%);
    max-width: 73rem;
    margin: 0 auto;
}
.secPack .packimg{
    width: 100%;
    margin-top: 6.4rem;
}
.secPack .secLineContent.type02{margin-top: 3.7rem;}
.secPack .secLineContent.type02 .linelinkbox{
    margin-top: 0;
}
.secPack .secLineContent.type02.lazyloaded .linkIn{
    background-image: url(../img/index/imgBgLink_02.png);
}

/* secFlow */
.secFlow{
    background-color: var(--flowBgColor);
    width: 100%;
    padding-bottom: 7.5rem;
}
.secFlow.lazyloaded{
    background: url(../img/index/imgbgFlow.jpg) center bottom no-repeat;
    background-size: 100% auto;
    background-color: var(--flowBgColor);
}
.secFlow .inner{
    width: 100%;
    padding-top: 5.2rem;
}
.secFlow .imgtit{
    width: calc(265 / 375 * 100%);
    max-width: 53rem;
    margin: 0 auto;
}
.secFlow .imgStep{
    width: 100%;
    margin-top: 4.8rem;
}

/* secFaq */
.secFaq{
    width: 100%;
    background-color: var(--faqBgColor);
    padding-top: 6.7rem;
    padding-bottom: 6.7rem;
}
.secFaq .inner{
    width: calc(345 / 375 * 100%);
    margin: 0 auto;
}
.secFaq .imgtit{
    width: calc(187 / 345 * 100%);
    max-width: 37.4rem;
    margin: 0 auto;
}

/* list */
.secFaq .list{
    width: 100%;
    margin-top: 5.4rem;
}
.secFaq .item{
    width: 100%;
    background-color: var(--headerBgColor);
    border-radius: 10px;
    overflow: hidden;
    padding: 2.2rem 1.5rem 1.2rem;
}
.secFaq .item + .item{
    margin-top: 2.9rem;
}
.secFaq .item .itemInner{
    width: 100%;
}
.secFaq .item .box{
    width: 100%;
    padding-right: calc(2.4rem + 1rem);
}
.secFaq .item .box.a_box{
    display: none;
    padding-right: 0;
}
.secFaq .item .box + .box{
    border-top: 1px solid;
    border-color: var(--faqBorderColor);
    margin-top: 0.8rem;
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}
.secFaq .faq_trigger{
    position: relative;
    cursor: pointer;
}
.secFaq .faq_trigger::after,
.secFaq .faq_trigger::before{
    content: "";
    position: absolute;
    width: 2.5rem;
    height: 2px;
    background-color:var(--keyColor);
    top: calc(50% - 1px);
    right: 0;
    transition: 0.5s;
}
.secFaq .faq_trigger::before{
    transform: rotate(90deg);
}
.secFaq .faq_trigger.on::before{
    transform: rotate(0deg);
}
.secFaq .boxIn{
    display: flex;
}
.secFaq .iconbox{
    width: 4rem;
    padding-top: 0.4rem;
}
.secFaq .iconimg{
    width: 100%;
    height: 0;
    padding-top: calc(112 / 116 * 100%);
}
.secFaq.lazyloaded .iconimg{
    background: url(../img/common/tp.gif) center top no-repeat;
    background-size: 100% auto;
}
.secFaq.lazyloaded .q_box .iconimg{
    background-image: url(../img/index/imgFaqQ.png);
}
.secFaq.lazyloaded .a_box .iconimg{
    background-image: url(../img/index/imgFaqA.png);
}
.secFaq .txtArea{
    flex: 1;
    width: calc(100% - 4rem);
    padding-left: 2rem;
}
.secFaq .txtIn{
    width: 100%;
    min-height: 6.6rem;
}
.secFaq .txtIn .txt{
    width: 100%;
    text-align: left;
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_27);
}
@media only screen and (max-width:1215px){
    .secFaq .txtIn .txt{
        font-size: var(--spFontSize16);
    }
}


/* secMessage */
.secMessage{
    width: 100%;
    color: var(--headerBgColor);
}
.secMessage.lazyloaded{
    background: url(../img/index/bgmessage.jpg) center bottom no-repeat;
    background-size: cover;
}
.secMessage .inner{
    padding: 6.9rem 3rem 6.5rem;
}
.secMessage .tit{
    font-size: var(--pcFontSize30);
    line-height: var(--pcLineHeight30_34);
    text-align: center;
    font-weight: bold;
}
.secMessage .txtbox{
    text-align: left;
    width: 100%;
    margin-top: 48px;
}
.secMessage .txtbox .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    letter-spacing: var(--pcLetterSpacing16_25);
}
@media only screen and (max-width:1215px){
    .secMessage .tit{
        font-size: var(--spFontSize30);
    }
    .secMessage .txtbox .txt{
        font-size: var(--spFontSize16);
    }
}

.secArea{
    width: 85.75%;
    margin: 4rem auto 0;
    position: relative;
    z-index: 3;
}
@media only screen and (max-width:1215px){
    .secArea{
        margin: 2rem auto 0;
    }
}