@charset "UTF-8";

:root{
    --header--height--pc: 113px;
    --header--height--sp: 55px;

    --color--white: #ffffff;
    --color--border--line: #eaeaea;
}

.kaitai .inner{
    max-width: 960px;
    margin: 0 auto;
}
.kaitai .inner-wide{
    max-width: 1080px;
    margin: 0 auto;
}
.kaitai section{
    position: relative;
}
.kaitai .remarks-text{
    font-size: 13px;
}



#kaitai-header{
    height: var(--header--height--pc);
    background-color: var(--color--white);
}
#kaitai-header .kaitai-header-inner{
    padding: 0 25px 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header--height--pc);
    max-width: 920px;
    margin: 0 auto;
}
#kaitai-header .kaitai-header-inner h1{
    max-width: 163px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#kaitai-header .kaitai-header-inner ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 185px;
    height: 50px;
    background-color: #33C8E7;
    border-radius: 5px;
    color: var(--color--white);
    font-size: 14px;
    font-weight: 900;
}


#kaitai-footer{
    padding: 150px 0 70px;
    background-color: #3E3E3E;
    border-top: #000000 10px solid;
    text-align: center;
    margin-top: -90px;
    position: relative;
    z-index: 0;
}
#kaitai-footer *{
    color: var(--color--white);
}
#kaitai-footer .kaitai-company{
    font-size: 25px;
    margin-bottom: 23px;
}
#kaitai-footer .kaitai-company span{
    font-size: 19px;
    padding-right: 15px;
}
#kaitai-footer .kaitai-address{
    font-size: 13px;
}
#kaitai-footer .kaitai-licence{
    font-size: 11px;
}

#kaitai-main img{
    width: 100%;
}



/* Question */
#kaitai-question{
    background: url('../images/question_bg.svg') no-repeat 0 50% / cover;
    padding-bottom: 120px;
}
#kaitai-question .inner{
    padding-top: 90px;
}
#kaitai-question h2{
    max-width: 190px;
    width: 100%;
    display: block;
    margin: 0 auto 40px;
}
#kaitai-question .catch{
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 60px;
}
#kaitai-question .catch span{
    font-size: 28px;
    text-align: center;
    display: block;
}
#kaitai-question{
}
.kaitai-question-list{
    display: flex;
    flex-wrap: wrap;
}
.kaitai-question-list dl{
    width: 29%;
    background-color: #F5F1DF;
    border-radius: 50px;
    margin: 0 2%;
    padding: 32px 0;
    position: relative;
    margin-bottom: 40px;
    position: relative;
}
.kaitai-question-list dl::before{
    content: "";
    position: absolute;
    background: url('../images/question_l.svg') no-repeat 0 0 / 106px 148px;
    width: 106px;
    height: 148px;
    top: -8px;
    left: -8px;
}
.kaitai-question-list dl::after{
    content: "";
    position: absolute;
    background: url('../images/question_r.svg') no-repeat 0 0 / 106px 148px;
    width: 106px;
    height: 148px;
    bottom: -12px;
    right: -8px;
}
.kaitai-question-list dl dt{
    background: url('../images/question_fukidashi.svg') no-repeat 50% 50% / 206px 195px;
    height: 195px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kaitai-question-list dl dt span{
    width: 206px;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    padding-bottom: 15px;
}
.kaitai-question-list dl dd{
    text-align: center;
    margin-top: 5px;
}
.kaitai-question-list dl dd img{
    height: 107px;
}
#kaitai-question .arrow{
    padding: 20px 0 40px 0;
    width: 202px;
    margin: 0 auto;
    text-align: center;
}



/* Points */
#kaitai-points{
    background-color: #FDE775;
    padding: 90px 0 70px;
}
#kaitai-points .inner{
    position: relative;
}

#kaitai-points .inner::before{
    content: "";
    position: absolute;
    background: url('../images/points_ph00.svg') no-repeat 0 0 / 290px 190px;
    width: 290px;
    height: 190px;
    left: calc(50% - 145px);
    top: -220px;
}
#kaitai-points .catch{
    text-align: center;
}
#kaitai-points .catch01{
    font-size: 26px;
    font-weight: 900;
    background-color: #FCD924;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 50px;
    border: var(--color--white) 1px solid;
    display: inline-block;
}
#kaitai-points .catch02{
    font-size: 38px;
    font-weight: 900;
    position: relative;
    margin-top: 15px;
    color: #FF6F00;
    display: inline-block;
}
#kaitai-points .catch02::before{
    content: "";
    background: url('../images/points_title_l.svg') no-repeat 0 0 / 100%;
    width: 40px;
    height: 50px;
    position: absolute;
    left: -60px;
    bottom: 10px;
}
#kaitai-points .catch02::after{
    content: "";
    background: url('../images/points_title_r.svg') no-repeat 0 0 / 100%;
    width: 40px;
    height: 50px;
    position: absolute;
    right: -60px;
    bottom: 10px;
}
.kaitai-points-box{
    display: flex;
    flex-wrap: wrap;
}
.kaitai-points-box .kaitori-points-inbox{
    width: 48%;
    margin-top: 45px;

}
.kaitai-points-box .kaitori-points-inbox:nth-child(odd){
    margin-right: 4%;
}
.kaitai-points-box .kaitori-points-inbox .title{
    display: flex;
    width: 172px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: #FF6F00;
    justify-content: center;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
}
.kaitai-points-box .kaitori-points-inbox .title span{
    display: block;
    width: 100px;
    line-height: 1;
    padding: 0 10px 5px;
    border-bottom: #EB5E01 1px solid;
}
.kaitai-points-box .kaitori-points-inbox .title span img{
    max-width: 80px;
    width: 80px;
}
.kaitori-points-inbox02{
    background-color: var(--color--white);
    border-radius: 30px;
    padding: 35px;
}
.kaitori-points-inbox02 .midashi{
    font-size: 24px;
    font-weight: 900;
    color: #EB5E01;
    line-height: 1.4;
    margin-bottom: 15px;
}
.kaitori-points-inbox02 dl{
    display: flex;
}
.kaitori-points-inbox02 dl dt{
    width: calc(100% - 165px);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
}
.kaitori-points-inbox02 dl dd{
    width: 150px;
    text-align: center;
    font-weight: 500;
    margin-left: 15px;
}
.kaitori-points-inbox02 dl dd.ph01 img{ width: 124px; }
.kaitori-points-inbox02 dl dd.ph02 img{ width: 124px; }
.kaitori-points-inbox02 dl dd.ph03 img{ width: 150px; }
.kaitori-points-inbox02 dl dd.ph04 img{ width: 138px; }
.kaitori-points-inbox02 dl dd.ph05 img{ width: 124px; }
.kaitori-points-inbox02 dl dd.ph06 img{ width: 124px; }
.kaitori-points-inbox02 dl dt .remarks{
    font-size: 10px;
    vertical-align: top;
}
#kaitai-points .remarks-text{
    margin-top: 25px;
}



/* Flow */
#kaitai-flow{
    background-color: var(--color--white);
    padding: 80px 0 135px;
}
#kaitai-flow .title{
    text-align: center;
    display: block;
    margin: 0 auto 50px;
    position: relative;
}
#kaitai-flow .title img{
    width: 100%;
    max-width: 210px;
}
#kaitai-flow .title span{
    display: block;
    margin-top: 40px;
    font-size: 38px;
    font-weight: 900;
}
.kaitai-flow-box{
    background-color: #F7F7F7;
    border-radius: 20px;
    padding: 50px 0;
}
.kaitai-flow-box .inner{
    display: flex;
    flex-wrap: wrap;
}
.kaitai-flow-box .kaitori-flow-inbox{
    width: 49.8%;
    border-radius: 20px;
    background-color: var(--color--white);
    border: var(--color--border--line) 1px solid;
    padding: 30px;
    display: flex;
    margin-bottom: 1.5%;
}
.kaitai-flow-box .kaitori-flow-inbox dl{
    width: calc(100% - 200px);
}
.kaitai-flow-box .kaitori-flow-inbox dl dt{
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.kaitai-flow-box .kaitori-flow-inbox dl dt span{
    display: inline-block;
    line-height: 1;
    height: 28px;
    margin-right: 25px;
}
.kaitai-flow-box .kaitori-flow-inbox dl dt span img{
    height: 100%;
}
.kaitai-flow-box .kaitori-flow-inbox dl dd{
    font-size: 15px;
    letter-spacing: 0;
}
.kaitai-flow-box .kaitori-flow-inbox p{
    max-width: 177px;
    width: 100%;
    margin-left: 23px;
}
.kaitai-flow-box .kaitori-flow-inbox:nth-child(odd){
    margin-right: 0.4%;
}



/* Faq */
#kaitori-faq{
    background-color: var(--color--white);
    padding-bottom: 90px;
}

#kaitori-faq .title{
    text-align: center;
    display: block;
    max-width: 290px;
    width: 100%;
    margin: 0 auto 40px;
    position: relative;
    z-index: 11;
}
#kaitori-faq .title span{
    border-top: #000000 1px solid;
    display: block;
    position: absolute;
    width: 110px;
    bottom: -10px;
    padding: 10px 0 0 0;
    left: calc(50% - 55px);
    font-weight: 900;
    font-size: 15px;
}
.kaitori-faq-box{
    background-color: #F9F7EC;
    border-radius: 12px;
    padding: 60px 0;
    position: relative;
}
#kaitori-faq .title::before{
    content: "";
    background: url('../images/faq_title_l.svg') no-repeat 0 0 / 100%;
    width: 153px;
    height: 177px;
    position: absolute;
    left: -160px;
    top: -5px;
}
#kaitori-faq .title::after{
    content: "";
    background: url('../images/faq_title_r.svg') no-repeat 0 0 / 100%;
    width: 160px;
    height: 177px;
    position: absolute;
    right: -160px;
    top: -5px;
}
.kaitori-faq-box .inner{
    display: flex;
    flex-wrap: wrap;
}
.kaitori-faq-inbox{
    background-color: #ffffff;
    padding: 35px 20px;
    width: calc(32%);
    margin-right: 2%;
    margin-bottom: 2%;
    border-right: #eaeaea 1px solid;
    border-bottom: #eaeaea 1px solid;
    border-bottom-right-radius: 6px;
}
.kaitori-faq-inbox:nth-child(3n){
    margin-right: 0;
}
.kaitori-faq-inbox dl dt{
    color: #33C8E7;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    min-height: 80px;
}
.kaitori-faq-inbox dl dt::after{
    content: "";
    width: 105px;
    height: 1px;
    background-color: #C4C4C4;
    position: absolute;
    bottom: 0;
    left: calc(50% - 52.5px);
}
.kaitori-faq-inbox dl dd{
    font-size: 15px;
    letter-spacing: .5px;
}
.kaitori-faq-inbox dl dd .remarks{
    font-size: 10px;
    vertical-align: top;
}



/* Contact */
#kaitori-contact{
    background: url('../images/contact_bg.svg') no-repeat 50% 0 / cover;
    padding-top: 60px;
}
#kaitori-contact .inner{
    max-width: 700px;
}
#kaitori-contact .kaitori-contact-inbox{
    background-color: var(--color--white);
    padding: 45px 45px;
    position: relative;
    z-index: 1;
    min-height: 200px;
    border: #3E3E3E 1px solid;
}
#kaitori-contact .kaitori-contact-inbox dl{
    display: flex;
    align-items: center;
}
#kaitori-contact .kaitori-contact-inbox dl dt{
    font-size: 22px;
    font-weight: 900;
    width: 180px;
}
#kaitori-contact .kaitori-contact-inbox dl dd{
    font-size: 15px;
    font-weight: 900;
    padding-left: 30px;
    letter-spacing: 0;
    line-height: 1.8;
    border-left: #0075C2 1px solid;
}
#kaitori-contact .title{
    text-align: center;
    display: block;
    max-width: 202px;
    width: 100%;
    margin: 0 auto 30px;
}
#kaitori-contact .button{
    display: block;
    max-width: 420px;
    width: 100%;
    margin: 30px auto 0;
}
#kaitori-contact .button a{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 96px;
    background-color: #0075C2;
    border-radius: 100px;
    color: var(--color--white);
    font-weight: 900;
    font-size: 20px;background: -webkit-gradient(90deg, #33C8E7, #3A2AB5);
    background: linear-gradient(90deg, #33C8E7, #3A2AB5);
}
#kaitori-contact .button a span{
    display: flex;
    width: calc(100% - 80px);
    text-align: center;
    justify-content: center;
    background: url('../images/contact_arrow.svg') no-repeat 100% 50% / 28px auto;
}




@media screen and (max-width: 1400px){        
        .kaitai-points-box,
        .kaitai-flow-box,
        .kaitori-faq-box{
            padding-left: 20px;
            padding-right: 20px;
        }
        #kaitai-points .remarks-text{
            padding: 0 20px !important;
        }
}


@media screen and (min-width: 1151px){
        .tb{ display: none !important; }
}

@media screen and (max-width: 1150px){    
        /* Common */
        .tbs{ display: none !important; }
        /* Question */
        #kaitai-question .inner{
            padding-top: 60px;
        }
        #kaitai-question .catch span{
            font-size: 22px;
        }
        #kaitai-question .catch{
            font-size: 30px;
        }
        .kaitai-question-list dl::before{
            content: "";
            position: absolute;
            background: url('../images/question_l.svg') no-repeat 0 0 / 60px auto;
            width: 60px;
            height: 85px;
            top: -8px;
            left: -8px;
        }
        .kaitai-question-list dl::after {
            content: "";
            position: absolute;
            background: url(../images/question_r.svg) no-repeat 0 0 / 59px auto;
            width: 60px;
            height: 85px;
            bottom: -12px;
            right: -8px;
        }
        .kaitai-question-list dl{
            width: 46%;
            border-radius: 27px;
            margin-bottom: 30px;
        }
        #kaitai-question h2{
            max-width: 156px;
            margin-bottom: 20px;
        }
        #kaitai-question .catch{
            font-size: 27px;
            margin-bottom: 45px;
        }
        #kaitai-question .catch span{
            font-size: 16px;
        }
        #kaitai-question .arrow{
            width: 145px;
            padding: 20px 0 0 0;
        }
        .kaitai-question-list dl dd img{
            height: 60px;
        }
        /* Points */
        #kaitai-points .catch02{
            font-size: 28px;
        }
        #kaitai-points .catch02::before{
            width: 30px;
            height: 40px;
            bottom: 0;
            left: -50px;
        }
        #kaitai-points .catch02::after{
            width: 30px;
            height: 40px;
            bottom: 0;
            right: -50px;
        }
        .kaitori-points-inbox02 dl{
            display: block;
        }
        .kaitori-points-inbox02 dl dt{
            width: 100%;
        }
        .kaitori-points-inbox02 dl dd{
            width: 100%;
            margin: 10px auto 0;
        }
        .kaitori-points-inbox02 .midashi{
            font-size: 18px;
        }
        .kaitai-points-box{
            display: block;
        }
        .kaitai-points-box .kaitori-points-inbox{
            width: 100%;
            margin-right: 0 !important;
        }
        #kaitai-points .catch01{
            font-size: 15px;
            display: flex;
            width: max-content;
            margin: 0 auto;
        }
        #kaitai-points .catch02{
            font-size: 26px;
            display: flex;
            justify-content: center;
            max-width: fit-content;
            margin: 15px auto 0;
            line-height: 1.4;
        }
        #kaitai-points .catch02::before{
            width: 30px;
            height: 40px;
            bottom: 0;
        }
        #kaitai-points .catch02::after{
            width: 30px;
            height: 40px;
            bottom: 0;
        }
        #kaitai-points .catch{
            display: flex;
            flex-direction: column;
        }
        /* Flow */
        .kaitai-flow-box .kaitori-flow-inbox{
            width: 100%;
            margin-right: 0;
            display: block;
            padding: 30px 25px;
        }
        .kaitai-flow-box .kaitori-flow-inbox dl{
            width: 100%;
        }
        .kaitai-flow-box .kaitori-flow-inbox dl dt{
            font-size: 22px;
        }
        .kaitai-flow-box .kaitori-flow-inbox dl dt span{
            height: 24px;
            margin-right: 20px;
        }
        .kaitai-flow-box .kaitori-flow-inbox p{
            width: 100%;
            max-width: none;
            margin: 33px 0 0;
        }
        .kaitai-flow-box .kaitori-flow-inbox p img{
            width: 100%;
        }
        /* Faq */        
        .kaitori-faq-box{
            padding: 50px 0 15px;
        }
        .kaitori-faq-box .inner{
            display: block;
            margin: 0 15px;
        }
        .kaitori-faq-inbox{
            width: 100%;
            padding: 30px 25px;
        }
        .kaitori-faq-inbox dl dt{
            min-height: auto;
        }
        .kaitori-faq-inbox dl dd{
            font-size: 15px;
        }
        #kaitori-faq .title{
            max-width: 262px;
            margin-bottom: 120px;
        }
        #kaitori-faq .title span{
            font-size: 14px;
        }
        #kaitori-faq .title::before{
            content: "";
            background: url('../images/faq_title_l.svg') no-repeat 0 0 / 100%;
            width: 127px;
            height: 148px;
            position: absolute;
            left: 0;
            top: 80px;
        }
        #kaitori-faq .title::after{
            content: "";
            background: url('../images/faq_title_r.svg') no-repeat 0 0 / 100%;
            width: 133px;
            height: 148px;
            position: absolute;
            right: 0;
            top: 80px;
        }
        /* Contact */
        #kaitori-contact{
            padding-left: 20px;
            padding-right: 20px;
        }
        #kaitori-contact .kaitori-contact-inbox dl{
            display: block;
        }
        #kaitori-contact .kaitori-contact-inbox dl dt{
            text-align: center;
            font-size: 17px;
            width: 100%;
            padding-bottom: 13px;
            margin-bottom: 13px;
            position: relative;
        }
        #kaitori-contact .kaitori-contact-inbox dl dt::after{
            content: "";
            position: absolute;
            width: 75px;
            height: 1px;
            background-color: #0075C2;
            left: calc(50% - 37.5px);
            bottom: 0;
        }
        #kaitori-contact .kaitori-contact-inbox dl dd{
            padding-left: 0;
            border-left: none;
            text-align: center;
        }
}





@media screen and (min-width: 769px){
        .sp{ display: none !important; }
}





/*------------------------- sp -------------------------*/
@media screen and (max-width: 768px){
        /* Common */
        .pc{ display: none !important; }
        .remarks-text{
            font-size: 11px;
        }
        .kaitai .inner,
        .kaitai .inner-wide{
            margin: 0 13px;
        }
        .kaitai .inner-wide{
            margin: 0 20px;
        }
        /* Header */
        #kaitai-header,
        #kaitai-header .kaitai-header-inner{
            height: var(--header--height--sp);            
        }
        #kaitai-header .kaitai-header-inner{
            padding: 0 0 0 15px;
        }
        #kaitai-header .kaitai-header-inner ul li a{
            height: var(--header--height--sp);
            border-radius: 0;
            font-size: 15px;
            padding: 0 12px;
            width: auto;
        }
        #kaitai-header .kaitai-header-inner h1{
            width: 93px;
        }
        /* Question */
        .kaitai-question-list dl dt{
            background: url('../images/question_fukidashi.svg') no-repeat 50% 50% / 132px auto;
            height: 125px;
        }
        .kaitai-question-list dl::before{
            content: "";
            position: absolute;
            background: url('../images/question_l.svg') no-repeat 0 0 / 60px auto;
            width: 60px;
            height: 85px;
            top: -8px;
            left: -8px;
        }
        .kaitai-question-list dl::after {
            content: "";
            position: absolute;
            background: url(../images/question_r.svg) no-repeat 0 0 / 59px auto;
            width: 60px;
            height: 85px;
            bottom: -12px;
            right: -8px;
        }
        /* Points */
        #kaitai-points{
            padding: 75px 0 28px;
        }
        #kaitai-points .inner::before{
            content: "";
            position: absolute;
            background: url('../images/points_ph00.svg') no-repeat 0 0 / 209px auto;
            width: 209px;
            height: 137px;
            left: calc(50% - 104.5px);
            top: -170px;
        }
        .kaitori-points-inbox02{
            padding: 35px 20px 25px;
            border-radius: 15px;
        }
        .kaitori-points-inbox02 .midashi{
            font-size: 22px;
        }
        .kaitai-points-box .kaitori-points-inbox{
            margin-top: 25px;
        }
        .kaitai-question-list dl dt span{
            font-size: 14px;
            padding-bottom: 0;
        }
        /* Flow */
        #kaitai-flow{
            padding: 35px 0 80px;
        }
        .kaitai-flow-box{
            padding: 27px 0;
        }

        #kaitai-flow .title{
            margin-bottom: 35;
        }
        #kaitai-flow .title span{
            font-size: 26px;
            margin-top: 30px;
        }
        #kaitai-flow .title img{
            max-width: 173px;
        }
        /* Faq */
        #kaitori-faq{
            padding-bottom: 60px;
        }
        #kaitori-faq .remarks-text{
            margin-top: 15px;
            font-size: 11px;
        }
        /* Contact */
        #kaitori-contact{
            padding: 50px 38px 0;
            background: url('../images/contact_bg_sp.svg') no-repeat 50% 0 / cover;
        }
        #kaitori-contact .inner{
            margin: 0;
        }
        #kaitori-contact .title img{
            width: 154px;
        }
        #kaitori-contact .kaitori-contact-inbox{
            padding: 45px 25px;
        }
        #kaitori-contact .button a{
            height: 70px;
        }
        #kaitori-contact .button a span{
            font-size: 15px;
            background: url('../images/contact_arrow.svg') no-repeat 100% 50% / 20px auto;
            width: calc(100% - 25px);
        }
        /* Footer */
        #kaitai-footer{
            padding: 150px 0 45px;
        }
        #kaitai-footer .kaitai-company span{
            display: block;
            padding-right: 0;
            font-size: 16px;
        }
        #kaitai-footer .kaitai-address{
            font-size: 12px;
        }
        #kaitai-footer .kaitai-licence{
            font-size: 10px;
            margin-top: 7px;
        }

}