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

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

.pc{
    display: block;
}
.sp{
    display: none;
}

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;
    line-height: 26px;
}
th,td{
    height: 55px;
    border: 1px solid #000;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 16px;
}
th{
    background: #88ABDA;
    color: #fff;
    font-weight: 400;
}
td strong{
    font-weight: 700;
    font-size: 20px;
    padding-top: 3px;
    display: block;
}
td.td_bgcolor{
    background: #EAEEF8;
}
td span{
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 24px;
}

.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;
}

.flexbox{
    display: flex;
}

/* 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%);
}

#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: 24px;
    background: #FDF3F7;
}

/* bnr */
#bnr{
    position: relative;
}
.ico_bnr{
    position: absolute;
    top: -8px;
    right: -52px;
}

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

/* attention */
.attention{
    border-radius: 8px;
    background: #F4F4F4;
    padding: 12px;
}
.attention li{
    font-size: 13px;
    line-height: 1.7;
}

/* main */
.main{
    border-radius: 8px;
    border: 2px solid #757DBB;
    border-top: none;
    overflow: hidden;
}
.main_title{
    background: #757DBB;
    padding: 12px 0;
}
.main_title p{
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}
.main_cont{
    padding: 32px 22px 22px;
    background: #fff;
}
.main_point{
    gap: 16px;
}
.main_point li{
    border-radius: 8px;
    border: 1px solid #FFE397;
    border-top: none;
    overflow: hidden;
    flex: 1;
    background: #FFF5D7;
}
.main_point_title{
    background: #FFE397;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    padding: 7px 0 4px;
}
.main_point_cont{
    padding: 15px 21px 10px;
}
.main_point_cont p{
    line-height: 2;
}
.main_amount{
    border: 1px solid #88ABDA;
    border-radius: 8px;
    overflow: hidden;
}
.main_amount_title{
    width: 120px;
    color: #fff;
    background: #88ABDA;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main_amount_title p{
    font-size: 18px;
    line-height: 1.8;
    padding: 14px 0 13px;
}
.main_amount_cont{
    flex: 1;
    background: #F7F7F7;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* more */
.more{
    border-radius: 8px;
    border: 2px solid #88ABDA;
    overflow: hidden;
}
.more_title{
    background: #EAEEF8;
    padding: 11px 6px 18px 0;
    border-bottom: 2px solid #88ABDA;
}
.more_cont{
    padding: 22px;
    background: #fff;
}

/* box */
.box{
    border-radius: 8px;
    overflow: hidden;
}
.box_title{
    background: #CFDCF8;
    padding: 24px 0;
    color: #383838;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.6;
}
.box_cont{
    padding: 24px;
    background: #fff;
}

/* about */
.about{
    border-radius: 8px;
    background: #fff;
    padding: 32px 24px 24px;
}
.about_title{
    font-size: 20px;
    font-weight: 700;
    color: #383838;
}
.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: #F8F8F9;
    padding: 26px 16px 30px;
    color: #333333;
    font-size: 12px;
}
.footer_copyright{
    color: #89878A;
}

@media screen and (min-width: 821px) {
	html, body{
        min-width: 1280px;
    }
}

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

    #wrapper{
        display: block;
    }

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

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

    /* bnr */
    #bnr img{
        width: 100%;
    }
    .ico_bnr{
        top: -16px;
        right: 8px;
        width: 104px;
    }
    

    @media screen and (max-width: 640px) {
        .pc{
            display: none;
        }
        .sp{
            display: block;
        }

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

        /* table */
        table{
            font-size: 12px;
            line-height: 18px;
        }
        th,td{
            height: 48px;
        }
        th{
            padding: 8px 0;
        }
        td{
            padding: 8px;
        }
        td strong{
            font-size: 16px;
            padding-top: 3px;
        }
        td.td_bgcolor{
            padding: 8px 0;
        }
        td span{
            margin-top: 5px;
            font-size: 11px;
        }

        .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%);
        }

        /* ==============================
            cont
        ================================= */
        .cont_wrapper{
            padding: 24px 16px;
        }

        /* bnr */
        .ico_bnr{
            width: 64px;
        }

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

        /* attention */
        .attention li{
            font-size: 12px;
        }
    
        /* main */
        .main_title p{
            font-size: 18px;
        }
        .main_title img{
            max-width: 438px;
        }
        .main_cont{
            padding: 22px 15px 15px;
        }
        .main_point{
            gap: 8px;
        }
        .main_point_title{
            font-size: 16px;
        }
        .main_point_cont{
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(100% - 60px);
        }
        .main_point_cont p{
            line-height: 1.8;
        }
        .main_point_cont img{
            max-width: 140px;
        }
        .main_amount_title{
            width: 100px;
        }
        .main_amount_title p{
            font-size: 16px;
        }
        .main_amount_cont{
            padding: 12px;
        }
        .main_amount_cont img{
            max-width: 153px;
        }
    
        /* more */
        .more_title{
            padding: 11px 6px 16px 0;
        }
        .more_title img{
            max-width: 280px;
        }
        .more_cont{
            padding: 20px 15px 15px;
        }
    
        /* box */
        .box_title{
            padding: 16px 0;
            font-size: 18px;
        }
        .box_cont{
            padding: 20px 16px;
        }

        /* about */
        .about{
            padding: 20px 16px;
        }
        .about_title{
            font-size: 16px;
        }

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