@charset 'utf-8';
:root {
    --design-width: 1440;
    --scale: calc(100vw / var(--design-width));
}

.kumamotobank .button{
    background: #F39800;
}
.kumamotobank .nav_item a{
    background: #F39800;
}
.kumamotobank .step1_app_img::before{
    top: -101px;
    right: -70px;
}
.kumamotobank .step1_fukidashi{
    padding: 9px 20px;
    font-size: 15px;
}
@media screen and (max-width: 820px) {
    @media screen and (max-width: 640px) {
        .kumamotobank #logo img{
            height: 18px;
            width: auto;
        }
        .kumamotobank .step1_app_img{
            margin-top: 24px;
        }
        .kumamotobank .step1_app_img::before{
            top: 0;
            right: 50%;
            transform: translateX(calc(100% + 44px)) translateY(calc(-100% + 40px));
            background-position: center bottom;
        }
        .kumamotobank .footer img{
            height: 20px;
            width: auto;
        }
    }
}

body{
    background: #F8F9FA;
}
a{
    text-decoration: none;
    transition: .3s;
}
a:hover{
    opacity: 0.7;
}

/* table */
table{
    font-size: 15px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
    height: 55px;
    border: 1px solid #111;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
}
th{
    font-weight: 400;
    background: #EBEBEF;
    line-height: 1.2;
}
td{
    padding: 0 24px;
}
td .add_date{
    font-size: 12px;
    line-height: 1.7em;
    margin: 0 -24px;
    position: relative;
}
td .add_date:before{
    content: "";
    width: 32px;
    height: 32px;
    background: url(../img/step3_plus.svg)no-repeat center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}
td .add_date strong{
    font-size: 28px;
    font-weight: 700;
    display: inline-block;
    line-height: 1em;
    margin-bottom: 8px;
}
td .add_date strong span{
    font-size: 20px;
}
td.plus_point{
    background: #F2D5E3;
    color: #4E4E4E;
    font-size: 24px;
    font-weight: 700;
}
td.plus_point span{
    position: relative;
}
td.plus_point span:before{
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: -2px;
    left: 0;
    background: url(../img/common_bling_l.svg)no-repeat center;
    background-size: contain;
    transform: translateX(calc(-200%));
}
td.plus_point span:after{
    content: "";
    width: 27px;
    height: 19px;
    position: absolute;
    bottom: -4px;
    right: 0;
    background: url(../img/common_bling_r.svg)no-repeat center;
    background-size: contain;
    transform: translateX(calc(100% + 6px));
}

.center{
    text-align: center;
}
.right{
    text-align: right;
}

.mb8{
    margin-bottom: 8px;
}
.mb12{
    margin-bottom: 12px;
}
.mb16{
    margin-bottom: 16px;
}
.mb20{
    margin-bottom: 20px;
}
.mb24{
    margin-bottom: 24px;
}
.mb32{
    margin-bottom: 32px;
}
.mb50{
    margin-bottom: 50px;
}

/* button */
.button{
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
    padding: 20px 0;
    width: 100%;
    max-width: 416px;
    text-align: center;
}
.button span{
    position: relative;
}
.button span:before{
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(200%, -50%);
    background: url(../img/common_button_arrow.png)no-repeat center;
    background-size: contain;
}
.button.button_appQR{
    font-size: 22px;
    padding: 35px 0 34px;
}
.button.button_appQR span{
    padding-left: 88px;
    padding-right: 42px;
}
.button.button_appQR span::before{
    display: none;
}
.button.button_appQR span::after{
    content: "";
    width: 72px;
    height: 72px;
    padding: 4px;
    box-sizing: border-box;
    background: url(../img/_app_qr.png)no-repeat center #fff;
    background-size: calc(100% - 8px);
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* ico_slash */
.ico_slash span{
    position: relative;
}
.ico_slash span:before,
.ico_slash span:after{
    content: "";
    width: 16px;
    height: 23px;
    background: url(../img/common_slash.svg)no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 1px;
}
.ico_slash span:before{
    left: 0;
    transform: translateX(-162.5%);
}
.ico_slash span:after{
    right: 0;
    transform: translateX(162.5%) scaleX(-1);
}

#wrapper{
    display: flex;
    gap: calc(66 * var(--scale));
    flex: 1;
    justify-content: center;
}

/* ==============================
    side
================================= */
#nav, #app{
    flex: 1;
    min-height: 100dvh;
}
.nav_inner, .app_inner{
    position: sticky;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 238px;
}
.nav_inner{
    padding-left: calc(100% - 238px);
}
.nav_item a{
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: block;
    padding: 18px 0 16px;
}
.app_inner{
    border: 1px solid #E3EBF7;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    box-sizing: border-box;
}
.app_title{
    color: #6E9CD3;
    font-weight: 700;
    margin-left: -10px;
    margin-right: -10px;
}
.app_copyright{
    font-size: 10px;
    margin: 0 -24px;
}

/* ==============================
    cont
================================= */
#cont{
    width: 640px;
    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.16);
}
.cont_wrapper{
    padding: 32px 24px;
    background: linear-gradient(180deg,#E3D3D5 0%, #DAC5D9 50%, #C4CADC 100%);
}
.cont_box{
    background: #fff;
    padding: 32px 24px;
    border-radius: 8px;
    box-sizing: border-box;
}
.cont_title{
    font-size: 20px;
    font-weight: 700;
    color: #383838;
}

/* logo */
#logo{
    padding: 19px 24px;
    background: #fff;
    border-bottom: 1px solid #EDEEEF;
}
#logo a{
    display: inline-block;
}

/* main */
#main{
    position: relative;
}
#main::before{
    content: "";
    width: 104px;
    height: 104px;
    background: url(../img/main_icon.png)no-repeat center;
    background-size: contain;
    position: absolute;
    top: -20px;
    right: -40px;
}
.main_text{
    line-height: 2em;
}
.main_memo{
    background: #F4F4F4;
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    text-align: left;
}

/* step */
.step_box{
    padding: 0 !important;
}
.step_title{
    border-radius: 8px 8px 0 0;
    background: #CFDCF8;
    position: relative;
    font-weight: 700;
    height: 100px;
    width: 100%;
    display: table;
    box-sizing: border-box;
}
.step_title p{
    font-size: 24px;
    color: #383838;
    display: table-cell;
    vertical-align: middle;
    line-height: 1em;
}
.step_title p span{
    font-size: 13px;
    line-height: 1em;
    display: block;
    margin-top: 10px;
}
.step_title > span{
    display: inline-block;
    background: #fff;
    color: #6E9CD3;
    font-size: 30px;
    line-height: 48px;
    width: 64px;
    border-radius: 50%;
    border: 8px solid #91ABD7;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    font-weight: 800;
}
.step_cont{
    padding: 24px 24px 32px;
    position: relative;
}
.step_cont_subtitle{
    font-size: 20px;
    margin-bottom: 6px;
    color: #383838;
}
.step_cont_title{
    font-size: 26px;
    color: #5869AE;
    font-weight: 700;
}

/* step1 */
.step1_fukidashi{
    background: #E3EBF7;
    color: #5388C7;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    font-weight: 700;
}
.step1_app{
    border: 1px solid #00A7DB;
    border-radius: 6px;
    position: relative;
    padding: 20px 22px;
}
.step1_app_inner{
    display: flex;
    gap: 49px;
    align-items: center;
}
.step1_app_title{
    padding-left: 72px;
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #474645;
}
.step1_app_title:before{
    content: "";
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../img/step1_app_icon.png)no-repeat center;
    background-size: contain;
}
.step1_app_title:after{
    content: "";
    width: 19px;
    height: 56px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(184%);
    background: url(../img/step1_app_arrow.svg)no-repeat center;
    background-size: contain;
}
.step1_app_img{
    position: absolute;
    bottom: 0;
    right: 22px;
}
.step1_app_img::before{
    content: "";
    width: 96px;
    height: 102px;
    position: absolute;
    background: url(../img/step1_app_fukidashi.png)no-repeat center;
    background-size: contain;
}

/* step2 */
.step2_img{
    position: absolute;
    top: 0;
    right: 28px;
    transform: translateY(-50%) rotate(11deg);
}
.step2_title{
    font-weight: 700;
    font-size: 28px;
    color: #383838;
}
.step2_label{
    display: flex;
    gap: 8px;
    justify-content: center;
}
.step2_label li{
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    background: #F19EC2;
    line-height: 2em;
    padding: 0 8px;
}
.step2_subtitle{
    font-weight: 700;
    font-size: 20px;
    color: #383838;
}

/* step3 */
.step3_increase_title{
    display: inline-block;
    background: #6E9CD3;
    color: #fff;
    border-radius: 50px;
    line-height: 47px;
    padding: 1px 26px 0;
    font-size: 18px;
    font-weight: 700;
}
.step3_increase ul{
    display: flex;
    gap: 12px;
}
.step3_increase ul li{
    flex: 1;
    background: #FAF1D4;
    border-radius: 4px;
    padding: 15px 0 14px;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    color: #383838;
}
.step3_increase ul li:before{
    content: "";
    width: 12px;
    height: 12px;
    background: url(../img/step3_fukidashi_arrow.svg)no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 32px;
    transform: translateY(-100%);
}
.step3_increase ul li:nth-of-type(2):before{
    right: unset;
    left: 32px;
    transform: translateY(-100%) scaleX(-1);
}

/* step4 */
.step4_img1{
    width: 100%;
    max-width: 416px;
    border: 1px solid #787EB8;
    background: #E5E5F3;
    display: inline-block;
    padding: 24px 27px;
    box-sizing: border-box;
}
.step4_example{
    position: relative;
}
.step4_example:before{
    content: "";
    width: 29px;
    height: 18px;
    background: url(../img/step4_arrow.svg)no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(calc(100% + 16px)) translateX(-50%);
}
.step4_example_title{
    padding: 12px 16px 12px 20px;
    background: #E3EBF7;
    border-radius: 8px 8px 0 0;
    position: relative;
}
.step4_example_title::before{
    content: "";
    width: 65px;
    height: 60px;
    background: url(../img/step4_fukidashi.png)no-repeat center;
    background-size: contain;
    position: absolute;
    top: -18px;
    left: 12px;
}
.step4_img2{
    padding: 24px 30px 25px;
    background: #F5F5F5;
    border-radius: 0 0 8px 8px;
}

/* detail */
.detail_list dt{
    color: #fff;
    padding: 10px 16px;
    background: #6E9CD3;
    border-radius: 2px;
    font-weight: 700;
}
.detail_list dd p{
    line-height: 1.75em;
}

/* faq */
.faq_list dt,
.faq_list dd{
    padding: 20px 59px 16px 51px;
    background: #E3EBF7;
    line-height: 1.75;
    position: relative;
}
.faq_list dt{
    background: #E3EBF7;
    cursor: pointer;
}
.faq_list * + dt{
    margin-top: 8px;
}
.faq_list dd{
    background: #F4F8FF;
    display: none;
}
.faq_list dt::before,
.faq_list dd::before{
    font-size: 20px;
    font-weight: 700;
    color: #6E9CD3;
    position: absolute;
    top: 16px;
    left: 16px;
    width: 19px;
    text-align: center;
}
.faq_list dt::before{
    content: "Q";
}
.faq_list dd::before{
    content: "A";
}
.faq_list dt:after{
    content: "";
    width: 21px;
    height: 21px;
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    background: url(../img/faq_plus.svg)no-repeat center;
    background-size: contain;
}
.faq_list dt.active:after{
    background-image: url(../img/faq_minus.svg);
}

/* about */
.about_cont{
    background: #F4F8FF;
    border-radius: 8px;
    padding: 24px 16px;
}
.about_cont_title{
    color: #6E9CD3;
    font-weight: 700;
}
.about_cont li{
    line-height: 1.75em;
}

/* footer */
.footer{
    background: #fff;
    padding: 26px 16px 30px;
    color: #333333;
    font-size: 12px;
}
.footer_copyright{
    color: #89878A;
}

@media screen and (min-width: 821px) {
	html, body{
        min-width: 1280px;
    }
    .pc{
        display: block;
    }
    .sp{
        display: none;
    }
}

@media screen and (max-width: 820px) {
    html, body{
        overflow-x: hidden;
    }
    img{
        max-width: 100%;
        height: auto;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }

    #wrapper{
        display: block;
    }

    /* ==============================
        side
    ================================= */
    #nav, #app{
        display: none;
    }

    /* button */
    .button.button_appQR{
        padding: 20px 0;
    }
    .button.button_appQR span{
        padding-left: 0;
        padding-right: 0;
    }
    .button.button_appQR span::before{
        display: block;
    }
    .button.button_appQR span::after{
        display: none;
    }

    /* ==============================
        cont
    ================================= */
    #cont{
        width: 100%;
    }

    /* bnr */
    #bnr img{
        width: 100%;
    }

    /* step1 */
    .step1_app_inner{
        display: block;
    }
    .step1_app_button{
        text-align: left;
        max-width: calc(100% - 136px - 22px);
    }
    .step1_app_button .button span{
        padding-right: 36px;
    }
    .step1_app_button .button span:before{
        transform: translate(0, -50%);
    }
    .button.button_appDL span{
        padding-left: 44px;
    }
    .button.button_appDL span::after{
        content: "";
        width: 32px;
        height: 32px;
        background: url(../img/step1_app_icon.png)no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    

    @media screen and (max-width: 640px) {
        :root {
            --design-width-sp: 640;
            --scale-sp: calc(100vw / var(--design-width-sp));
        }
        html, body{
            font-size: 13px;
        }

        /* table */
        table{
            font-size: 12px;
        }
        th,td{
            height: 48px;
            padding: 0 8px;
        }
        th:first-of-type{
            width: 40%;
        }
        td .add_date{
            font-size: 10px;
            line-height: 1.7em;
            margin: 0 -8px;
        }
        td .add_date:before{
            width: 24px;
            height: 24px;
        }
        td .add_date strong{
            font-size: 22px;
        }
        td .add_date strong span{
            font-size: 16px;
        }
        td.plus_point{
            font-size: 18px;
        }
        td.plus_point span:before{
            width: 8px;
            height: 8px;
            top: -6px;
            transform: translateX(calc(-95%));
        }
        td.plus_point span:after{
            width: 14px;
            height: 10px;
            bottom: -6px;
            transform: translateX(65%);
        }
        td img{
            max-width: 90%;
        }

        .mb12{
            margin-bottom: 8px;
        }
        .mb16{
            margin-bottom: 12px;
        }
        .mb20{
            margin-bottom: 16px;
        }
        .mb24{
            margin-bottom: 20px;
        }
        .mb32{
            margin-bottom: 24px;
        }

        /* button */
        .button{
            font-size: 16px;
            padding: 16px 0;
            width: 100%;
            max-width: 326px;
        }
        .button span:before{
            transform: translate(150%, -50%);
        }
        .button.button_appQR{
            font-size: 18px;
        }

        /* ico_slash */
        .ico_slash span:before,
        .ico_slash span:after{
            width: 14px;
            height: 20px;
        }
        .ico_slash span:before{
            left: 0;
            transform: translateX(-120%);
        }
        .ico_slash span:after{
            right: 0;
            transform: translateX(120%) scaleX(-1);
        }

        /* ==============================
            cont
        ================================= */
        .cont_wrapper{
            padding: 24px 16px;
        }
        .cont_box{
            padding: 20px 16px;
        }
        .cont_title{
            font-size: 16px;
        }

        /* logo */
        #logo{
            padding: 12px 16px;
        }

        /* main */
        #main{
            padding-top: 32px;
        }
        #main::before {
            width: 94px;
            height: 94px;
            top: 72px;
            right: -28px;
        }
        .main_title{
            padding: 0 20px;
        }
        .main_img{
            padding: 0 12%;
        }
        .main_memo{
            border-radius: 4px;
            font-size: 11px;
        }

        /* step */
        .step_title{
            padding: 0 74px 0 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            height: 80px;
        }
        .step_title p{
            font-size: 18px;
            flex: 1;
        }
        .step_title p span{
            font-size: 10px;
            line-height: 1.2;
            margin-top: 6px;
        }
        .step_title > span{
            position: static;
            transform: unset;
            font-size: 27px;
            line-height: 40px;
            width: 48px;
            border-width: 4px;
        }
        .step_cont{
            padding: 20px 16px;
        }
        .step_cont_subtitle{
            font-size: 15px;
        }
        .step_cont_title{
            font-size: 20px;
            margin-left: -5px;
            margin-right: -5px;
        }

        /* step1 */
        #step1 .step_title{
            padding-right: 16px;
        }
        .step1_fukidashi{
            padding: 8px !important;
            border-radius: 4px;
            font-size: 12px !important;
            display: block;
            margin-bottom: 20px;
            text-align: center;
        }
        .step1_app{
            display: flex;
            flex-wrap: wrap;
            padding: 16px 12px;
        }
        .step1_app > *{
            width: 100%;
        }
        .step1_app_inner{
            order: 2;
        }
        .step1_app_title{
            padding-left: 56px;
            font-size: 14px;
        }
        .step1_app_title:before{
            width: 48px;
            height: 48px;
        }
        .step1_app_title:after{
            height: 48px;
        }
        .step1_app_qr img{
            width: 48px;
        }
        .step1_app_img{
            position: static;
            text-align: center;
        }
        .step1_app_img::before{
            width: 64px;
            height: 68px;
        }
        .step1_app_button{
            text-align: center;
            max-width: 100%;
        }
        .step1_app_button .button span{
            padding-right: 24px;
        }
        .step1_app_button .button span:before{
            transform: translate(0, -50%);
        }
        .button.button_appDL span{
            padding-left: 40px;
        }
        .button.button_appDL span::after{
            width: 28px;
            height: 28px;
        }

        /* step2 */
        .step2_img{
            width: 64px;
            right: 0;
        }
        .step2_title{
            font-size: 22px;
        }
        .step2_label li{
            font-size: 13px;
        }
        .step2_subtitle{
            font-size: 15px;
        }

        /* step3 */
        .step3_increase_title{
            line-height: 42px;
            padding: 1px 24px 0;
            font-size: 16px;
        }
        .step3_increase ul{
            gap: 4px;
            margin: 0 -8px;
        }
        .step3_increase ul li{
            padding: 15px 0 14px;
            font-size: 11px;
            white-space: nowrap;
            letter-spacing: -0.04em;
        }

        /* step4 */
        .step4_img1{
            width: 100%;
            max-width: 326px;
            padding: 16px 20px 20px;
        }
        .step4_example_title{
            padding: 12px 12px 12px 38px;
            font-size: 11px;
        }
        .step4_example_title::before{
            top: -12px;
            left: -30px;
        }
        .step4_img2{
            padding: 12px;
        }
        .step4_img3{
            padding: 0 10%;
        }

        /* detail */
        .detail_list dt{
            padding: 10px 12px;
        }
        .detail_list dd p{
            line-height: 1.5em;
        }

        /* faq */
        .faq_list dt,
        .faq_list dd{
            padding: 16px 48px 16px 44px;
            line-height: 1.5;
        }
        .faq_list dt::before,
        .faq_list dd::before{
            top: 13px;
            left: 12px;
        }
        .faq_list dt:after{
            width: 16px;
            height: 16px;
            right: 16px;
        }

        /* footer */
        .footer{
            padding: 26px 16px 30px;
            font-size: 10px;
        }
    }
}