.wrapper {
    position: relative;
}

.top-wrapper {
    padding: 1em 0;
}

.top-wrapper .ratebox .rateblock {
    margin: 0 auto 0;
}

.sliderHead {
    font-size: 2.5em;
    font-weight: 900;
    text-align: center;
    margin: -.3em 0 .6em;
    color: #092e62
}

.slider_wrap {
    text-align: center;
    border: 1px solid #e0e0e0;
    padding: 1.6em 1em 2.5em;
    background: #FFF;
    margin: 0 auto 3em;
}

.card_amount picture {
    display: inline-block;
}

.card_amount img {
    width: 40px;
    margin-right: .4em
}

.card_amount {
    position: relative;
    color: #d31830;
    font-size: 1.1em;
    font-weight: 700;
    border: 2px solid #d31830;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto .1em;
    padding: .6em 1.8em;
}

.card_amount:after,
.card_amount:before {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 13px solid #d31830;
    bottom: -13px;
    content: "";
    display: block;
    height: 0;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    width: 0
}

.card_amount:after {
    border-top-color: #fff;
    bottom: -9px
}

.money_amount {
    color: #d31830;
    margin-bottom: -25px;
    font-size: 3.1em;
    font-weight: 900
}

.money_amount span {
    font-size: .6em;
    margin-left: .2em
}

input[type=range] {
    background-color: grey;
    width: 87%;
    height: .7em;
    border-radius: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    appearance: none
}

input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
    width: 25px;
    background: #d31830;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 11px rgba(211, 24, 48, .1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
    width: 25px;
    background: #d31830;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 11px rgba(211, 24, 48, .1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    background: #d31830;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 11px rgba(211, 24, 48, .1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.min_max_wrap {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    color: grey;
    font-size: 1.1em;
    margin-bottom: 3px
}

@media(max-width:500px) {
    .sliderHead {
        font-size: 1.5em;
    }
}

@media(min-width:768px) {
    input[type=range]:active::-ms-thumb {
        box-shadow: 0 0 0 16px rgba(211, 24, 48, .15)
    }

    input[type=range]:active::-moz-range-thumb {
        box-shadow: 0 0 0 16px rgba(211, 24, 48, .15)
    }

    input[type=range]:active::-webkit-slider-thumb {
        box-shadow: 0 0 0 16px rgba(211, 24, 48, .15)
    }
}


.simu_center {
    margin: 3px auto 0;
    display: block
}

.simuwrap {
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.simuwrap .simubox {
    padding: 0;
    text-align: center;
    width: 100%;
    border-radius: none;
    border: none;
    margin: 0;
}

.simuwrap .simubox .simu_title_wrap {
    background: #4d4d4d;
    padding: .6em 2em;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.simuwrap .simubox:first-child .simu_title_wrap {
    border-radius: 15px 0 0;
    border-right: 1px solid #fff
}

.simuwrap .simubox:nth-child(3) .simu_title_wrap {
    border-radius: 0 15px 0 0;
    border-left: 1px solid #fff
}

.simuwrap .simubox .simu_title_img img {
    width: 55px
}

.simuwrap .simubox .simu_title_text {
    color: #fff;
    font-weight: 900;
    font-size: 1.1em;
    flex: 1;
    text-align: center;
    line-height: 1.4;
    letter-spacing: .5px
}

.simuwrap .simubox .simu_title_text span {
    font-size: 1.5em
}

.simuwrap .simubox .simuinfo {
    padding: .5em 1.5em .8em
}

.simuwrap .simubox:first-child .simuinfo {
    border-right: 1px solid #1a1a1a
}

.simuwrap .simubox:nth-child(3) .simuinfo {
    border-left: 1px solid #1a1a1a
}

.simuwrap .simubox .first_rate,
.simuwrap .simubox .second_rate {
    border: 1px solid #a1a1a1;
    border-radius: 5px;
    margin-top: .7em;
    display: inline-flex;
    align-items: center;
    width: 90%
}

.simuwrap .simubox .second_rate {
    margin-top: 1em
}

.simuwrap .simubox .first_result,
.simuwrap .simubox .second_result {
    font-size: 2.5em;
    margin: 3px 0;
    padding-left: .5em;
    position: relative;
    font-weight: 900
}

.simuwrap .simubox .first_rate .repeat,
.simuwrap .simubox .second_rate .repeat {
    background-color: #a1a1a1;
    color: #fff
}

.simuwrap .simubox .first_rate .repeat {
    font-size: 1.1em;
    height: 35px;
    line-height: 35px;
    width: 37%;
    font-weight: 500
}

.simuwrap .simubox .second_rate .repeat {
    font-size: 1em;
    height: 35px;
    line-height: 35px;
    width: 37%;
    font-weight: 500
}

.simuwrap .simubox .first_rate .repeat_rate,
.simuwrap .simubox .second_rate .repeat_rate {
    font-weight: 500;
    font-size: 1em;
    flex: 1
}

.simuwrap .simubox .second_rate .repeat .mini {
    font-size: .7em;
}

#rate1,
#rate2,
#rate3,
#rate4,
#rate5,
#rate6 {
    font-size: 1.1em;
    margin-right: .1em
}

.simuwrap .simubox .first_result {
    color: red;
    border-bottom: 2px dotted rgba(26, 26, 26, .4);
    padding-bottom: 5px
}

.simuwrap .simubox .second_result {
    color: #1142c7
}

.simuwrap .simubox .first_result:before,
.simuwrap .simubox .second_result:before {
    content: "入金額";
    color: #fff;
    font-weight: 400;
    font-size: 10px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    white-space: nowrap;
    letter-spacing: 0;
    padding: .3em
}

.inner_link a:before,
.simuwrap .simubox .simubtn:before {
    top: calc(50% - 2px);
    transform: translateY(calc(-50% - 2px)) rotate(35deg);
    width: .7em
}

.simuwrap .simubox .first_result:before {
    background-color: red
}

.simuwrap .simubox .second_result:before {
    background-color: #1142c7
}

.simuwrap .simubox .simubtn:after,
.simuwrap .simubox .simubtn:before {
    content: '';
    position: absolute;
    right: 1em;
    height: 2px;
    background-color: #fff
}

.simuwrap .simubox .first_result .yen,
.simuwrap .simubox .second_result .yen {
    font-size: .5em;
    font-weight: 700;
    color: #1a1a1a;
    margin-left: .3em
}

.simuwrap .simubox .simubtn {
    background: #ff6d02;
    color: #fff;
    width: 100%;
    margin: .8em auto;
    padding: .5em 1em;
    font-size: 1.1em;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    display: none;
    position: relative
}

.simuwrap .simubox .simubtn.visible {
    display: block;
    animation: 1s appear;
    -webkit-animation: 1s appear
}

@keyframes appear {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.simuwrap .simubox .simubtn:hover,
body.voice button:hover {
    opacity: .7
}

.simuwrap .simubox .simubtn:before {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.simuwrap .simubox .simubtn:after {
    top: 50%;
    transform: translateY(-50%);
    width: 1.4em;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

#FloatReg .main_btn a:hover:after,
#FloatReg .main_btn a:hover:before,
.main_btn a:hover:after,
.main_btn a:hover:before,
.simuwrap .simubox .simubtn:hover:after,
.simuwrap .simubox .simubtn:hover:before {
    right: .7em
}

.tablewrap {
    background: #fff;
    border-radius: 10px;
    padding: 2em 0 4em
}

table.rate {
    margin: auto;
    text-align: center;
    font-size: 1.2em;
    width: 100%;
    margin-bottom: 3em;
    margin-top: 2em;
}

table.rate th {
    background: #4e4e4e;
    color: #fff;
    font-weight: 500;
    padding: .5em 1em
}

table.rate tr:first-child th {
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid #fff
}

body.specialplan table.special tr td:last-of-type,
table.rate td:last-child,
table.rate tr:nth-child(2) th:last-child {
    border-right: none
}

table.rate th.empty {
    background: rgba(0, 0, 0, 0);
    border-bottom: none !important
}

table.rate td {
    padding: .6em 1em;
    border-bottom: 3px solid #fff;
    font-weight: 500
}

body.specialplan table.special tr:last-of-type td,
table.rate tr:last-child td {
    border-bottom: none
}

table.rate tr:last-child td:first-child {
    border-radius: 0 0 0 10px
}

body.specialplan table.special tr:last-of-type td:last-of-type,
table.rate tr:last-child td:last-child {
    border-radius: 0 0 10px
}

table.rate td.cardname {
    background-color: #cacaca;
    border-top: 3px solid #fff;
    font-weight: 700;
    font-size: 1.1em;
    padding: .4em 1em
}

table.rate td.cardname .flex {
    display: inline-flex;
    align-items: center;
    width: 50%
}

table.rate td.cardname .flex img {
    width: 35px
}

table.rate td.cardname .flex span {
    text-align: center;
    flex: 1
}

body.specialplan table.special tr:first-of-type td:nth-child(2),
body.specialplan table.special tr:nth-child(2) th:first-child,
table.rate tr:nth-child(3) td.cardname {
    border-radius: 0
}

table.rate tr.first td {
    background-color: #fdf4f1;
    color: #000
}

table.rate tr.first td:first-child {
    background-color: #fce6e1;
    color: #f74339;
    font-weight: 700
}

table.rate tr.second td {
    background-color: #edf1f4;
    color: #000
}

body.specialplan table.special tr:first-child td,
table.rate tr.second td:first-child {
    background-color: #dbeaf2;
    color: #505dcc;
    font-weight: 700
}

#simulator {
    margin: 4em 0;
}


@media(max-width:767px) {
    #simulator .wrapper {
        width: 95%;
        padding: 0;

    }

    .slider_wrap {
        text-align: center;
        border: 1px solid #e0e0e0;
        padding: 1.5em 1em 2.5em;
        width: 95%;
        margin: 0 auto;
        background: #fff;
        position: relative;
        margin-bottom: 3em;
        margin-top: 3em;
    }

    .card_amount {
        border: 2px solid #d31830;
        width: 95%;
        margin: 0 auto .5em;
        padding: .5em 1.8em;
        font-size: 1.1em;
        display: inline-flex;
        align-items: center;
        justify-content: space-evenly;
        line-height: 1.2
    }

    .money_amount {
        margin-bottom: 0;
        font-size: 2.8em
    }

    .money_amount span {
        font-size: .6em;
        margin-left: .2em
    }

    input[type=range] {
        width: 100%;
        height: .5em;
        z-index: 1
    }

    input[type=range]::-ms-thumb {
        height: 23px;
        width: 23px;
        box-shadow: 0 0 0 8px rgba(211, 24, 48, .1)
    }

    input[type=range]::-moz-range-thumb {
        height: 23px;
        width: 23px;
        box-shadow: 0 0 0 8px rgba(211, 24, 48, .1)
    }

    input[type=range]::-webkit-slider-thumb {
        height: 23px;
        width: 23px;
        box-shadow: 0 0 0 8px rgba(211, 24, 48, .1)
    }

    .min_max_wrap {
        width: 100%;
        font-size: 1em;
        margin-bottom: 10px
    }

    .simu_center {
        width: 100%;
        margin-top: 3px
    }

    .simuwrap .simubox .simu_title_wrap {
        padding: .5em .7em
    }

    .simuwrap .simubox .simu_title_img img {
        width: 25px
    }

    .simuwrap .simubox .simu_title_text {
        font-weight: 500;
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: -.2px
    }

    .simuwrap .simubox .simu_title_text span {
        font-weight: 900;
        font-size: 14px
    }

    .simuwrap .simubox .simuinfo {
        padding: .5em .4em .8em
    }

    .simuwrap .simubox .first_rate,
    .simuwrap .simubox .second_rate {
        width: 95%;
        display: block;
        margin: .5em auto 0
    }

    .simuwrap .simubox .first_rate .repeat,
    .simuwrap .simubox .second_rate .repeat {
        border-radius: 3px 3px 0 0;
        font-size: 11px;
        height: auto;
        line-height: 2;
        width: 100%;
        font-weight: 500
    }

    .simuwrap .simubox .second_rate .repeat .mini {
        font-size: 11px
    }

    .simuwrap .simubox .first_rate .repeat_rate,
    .simuwrap .simubox .second_rate .repeat_rate {
        font-weight: 500;
        font-size: 11px;
        line-height: 2
    }

    #rate1,
    #rate2,
    #rate3,
    #rate4,
    #rate5,
    #rate6 {
        font-size: 1.1em;
        margin-right: .1em
    }

    .simuwrap .simubox .first_result,
    .simuwrap .simubox .second_result {
        font-size: 5.8vw;
        padding-left: 0;
        margin-top: .7em;
        white-space: nowrap
    }

    .simuwrap .simubox .first_result:before,
    .simuwrap .simubox .second_result:before {
        display: block;
        content: "入金額";
        font-size: 8px;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        position: absolute;
        top: 10%;
        letter-spacing: 0;
        padding: 0 0 1em
    }

    .simuwrap .simubox .first_result:before {
        background-color: initial;
        color: red
    }

    .simuwrap .simubox .second_result:before {
        background-color: initial;
        color: #1142c7
    }

    .simuwrap .simubox .first_result .yen,
    .simuwrap .simubox .second_result .yen {
        margin-left: .2em
    }

    .simuwrap .simubox .simubtn {
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        width: 100%;
        margin: 1em auto;
        padding: .8em 1em .8em 0;
        font-size: 11px
    }

    .simuwrap .simubox .simubtn:before {
        top: calc(50% - 1px);
        right: .5em;
        transform: translateY(calc(-50% - .5px)) rotate(35deg);
        width: 1.4vw;
        height: 1px
    }

    .simuwrap .simubox .simubtn:after {
        top: 50%;
        right: .5em;
        transform: translateY(-50%);
        width: 2.8vw;
        height: 1px
    }

    .tablewrap {
        padding: 2em 0
    }

    table.rate {
        margin: auto;
        font-size: 12px;
        width: 90%;
        margin-bottom: 3.4em;
        margin-top: 3.4em;
    }

    table.rate th {
        padding: .5em;
        font-size: 12px
    }

    table.rate tr:first-child th {
        border-radius: 5px 5px 0 0
    }

    table.rate td {
        padding: .5em
    }

    body.specialplan table.special tr:last-of-type th,
    table.rate tr:last-child td:first-child {
        border-radius: 0 0 0 5px
    }

    body.specialplan table.special tr:last-of-type td:last-of-type,
    table.rate tr:last-child td:last-child {
        border-radius: 0 0 5px
    }

    table.rate td.cardname {
        font-size: 1.1em;
        padding: .3em 1em
    }

    table.rate td.cardname .flex {
        width: 50vw
    }

    table.rate td.cardname .flex img {
        width: 25px;
        margin-right: 0
    }

    body.specialplan table.special tr:first-of-type td:nth-child(2),
    body.specialplan table.special tr:nth-child(2) th:first-child,
    table.rate tr:nth-child(3) td.cardname {
        border-radius: 5px 0 0
    }

    table.rate tr.first td,
    table.rate tr.second td {
        font-size: 1.2em;
        padding: .3em .5em
    }

    body.specialplan .center,
    table.rate tr.first td:first-child,
    table.rate tr.second td:first-child {
        font-size: 1em
    }

    img.logo_center {
        margin: 1em auto;
        width: 100px
    }
}

/*---------------------
 Form
-----------------------*/
section#form {
    background: #FFF;
    margin: 3em auto;
}


#form .caption {
    font-size: 2.7em;
    padding: .5em 0;
    color: #092e62;
    margin-top: 0;
}

#form .form_wrapper {
    width: 100%;
    margin: 3em auto;
    padding: 1em 1.5em
}

#form .form_wrapper .formhead {
    font-size: 1.6em;
    font-weight: 700;
    background: #092e62;
    color: #fff;
    padding: .5em 1em;
    border-radius: 5px
}

.form_wrapper .form_inner {
    margin: 0 auto;
    width: 100%;
}

.form_wrapper .attention {
    color: #8e8e8e;
    font-size: .85em;
    font-weight: 400;
    margin-top: -1em;
    line-height: 2;
    letter-spacing: 1px
}

#form input[type=radio] {
    position: absolute;
    -webkit-opacity: 0;
    opacity: 0;
}

input[type=radio]+div.form_error+label,
input[type=radio]+label {
    padding: 5px 50px 5px 5px;
    line-height: 20px;
    cursor: pointer;
}

#form input[type=radio]+label::before,
input[type=radio]+div.form_error+label::before {
    display: none;
}

#form .form_wrapper .gifttype {
    background: #fff;
    padding: 2em 0;
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#form .form_wrapper .giftlabel {
    background: #fff;
    outline: #8e8e8e solid 1px;
    outline-offset: -1px;
    padding: .5em;
    margin: .5em .4em;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

#form .form_wrapper .giftlabel img {
    width: 50px
}

#form .form_wrapper .giftlabel .giftbrand {
    font-size: 1.15em;
    padding: 0 .5em
}

#form .form_wrapper .radiobutton:checked+label {
    background-color: #fffae3 !important;
    color: #000 !important;
    outline: rgba(242, 150, 0, 1) solid 2px !important;
    outline-offset: -2px
}

.times .Radio {
    padding: 2em 0 2.5em;
    font-size: 1.2em
}

.times .Radio input {
    height: 60px
}

.form_boxA .form_listA label,
.form_boxC .form_listC .bank label {
    font-size: 1em;
    font-weight: 400;
    margin-right: .5em;
    vertical-align: middle
}

.form_boxB_head {
    font-size: 1.3em;
    font-weight: 700;
    padding: .5em 0
}

.form_boxB table.form_listB {
    font-size: 1.3em;
    margin: 1em auto 3em;
    position: relative;
    width: 100%
}

.form_boxB .form_listB input {
    border: 1px solid #8e8e8e;
    padding: .5em .7em;
    font-size: 1em;
    border-radius: 5px;
    height: 60px;
    width: 300px;
    background-color: #f4f4f4
}

.form_boxB .form_listB input.amount {
    margin-right: .5em;
    max-width: 90%;
}

.form_boxB .form_listB tr:first-child {
    background: #eaf5ff;
    color: #8e8e8e
}

.form_boxB .form_listB tr:nth-child(2n) {
    background: #f8fcff;
    color: #8e8e8e
}

.form_boxB .form_listB th {
    font-weight: 400 !important;
    padding: .5em;
    border: 3px solid #fff
}

.form_boxB .form_listB td,
.form_btn {
    padding: 1em 0
}

.form_boxB .form_listB span {
    font-size: .9em;
    color: #8e8e8e
}

.form_wrapper .plusbtn {
    text-align: right;
    margin: -2em auto 2.5em
}

.form_wrapper .plusbtn span {
    font-size: 1em;
    color: #fff;
    background: #8e8e8e;
    border-radius: 5px;
    padding: .3em .5em;
    letter-spacing: 2px
}

.form_wrapper .plusbtn span:before {
    content: '\f055';
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-weight: 700;
    margin-right: .2em
}

.form_wrapper .result {
    background: #fffae3;
    font-size: 1.5em;
    text-align: center;
    font-weight: 700;
    padding: .3em 0;
    margin-bottom: 3em
}

.form_wrapper .result span {
    color: red;
    padding: 0 .5em 0 1em
}

.form_boxC .form_listC .file {
    font-weight: 400;
    font-size: .8em;
    vertical-align: top
}

.form_boxC .form_listC td.file {
    line-height: 3.5
}

.form_boxC .form_listC .file label {
    color: #000;
    background-color: #fff;
    padding: .3em 1.5em;
    border: 1px solid #8e8e8e;
    border-radius: 5px;
    margin: .5em 1em 2em 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

#container section.content_ask .btn,
.form_btn {
    text-align: center;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

.form_boxC .form_listC .file label:hover {
    background-color: #f4f4f4
}

.form_boxC .form_listC td.file input {
    border: none;
    padding: 0;
    margin: 0;
    font-size: .8em;
    border-radius: 0;
    height: auto;
    width: auto;
    background-color: #fff
}

.form_boxC .form_listC {
    font-size: 1.3em;
    font-weight: 700;
    margin: 1em auto 3em;
    position: relative
}

.form_boxC .form_listC tr.top,
.form_box_other .form_list_other tr.top {
    vertical-align: top
}

.form_boxC .form_listC th {
    padding: 1em 0 0;
    text-align: left;
    width: 30%
}

.form_boxS .form_listS textarea,
.form_other .request_form textarea,
.form_wrapper .request_form textarea {
    padding: .5em;
    resize: none;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Lucida Grande", "segoe UI", Meiryo, Verdana, Arial, sans-serif
}

.form_boxC .form_listC .bank input[type=radio]:checked+label::before,
input[type=checkbox]:checked+div.form_error+label::before,
input[type=checkbox]:checked+label::before,
input[type=radio]:checked+div.form_error+label::before,
input[type=radio]:checked+label::before {
    background-color: #73bdff;
    box-shadow: inset 0 0 0 2px #f4f4f4
}

.form_wrapper .request_form textarea {
    margin: 2.5em 0 1em;
    width: 100%;
    height: 150px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #8e8e8e
}

.form_btn {
    margin: 2em auto;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    border-radius: 2em;
    -webkit-box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
    box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
    position: relative;
    letter-spacing: 2px;
    transition: .2s ease-in-out
}

.headingForBanks {
    font-weight: bold;
    width: 100%;
    margin: 0;
    font-size: 1em !important;
}

.classForChoisingBanks {
    margin: 0 auto 0 auto;
    width: 100%;
}

.classForScrollingBanks {
    height: 300px;
    overflow: scroll;
    overflow-x: hidden;
}

.pictureBanks {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: flex;
    list-style: none;
}

.imgBanks {
    width: 100%;
    border: none;
    vertical-align: bottom;
    max-width: 100%;
}


.picturePerBanks {
    margin: 3px 6px 3px 0 !important;
    text-align: center !important;
    border: #000000 1px solid;
    flex: 1;
    background: #fff;
}

.bankContainer {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.divforpicturebanks {
    width: 100%;
    margin: 10px 0 0 2px;
}

table#bankSelect {
    width: 100%;
    text-align: center;
    border: 1px solid #9f9f9f;
    margin: 0;
}

table#bankSelect td {
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 4px;
    margin: 0;
    font-size: 18px;
    display: table-cell;
    width: 10%;
}

tr:nth-child(n)>td:nth-child(n)>a,
tr:nth-child(n)>a {
    color: #000 !important;
}

.bank_table {
    width: 100%;
    margin: 0 !important;
}

.attention_div {
    line-height: 0;
}

@media screen and (max-width: 960px) {
   

    .headingForBanks {
        font-weight: bold;
        width: 100%;
        margin: 0;
        font-size: 1em !important;
    }

    .pictureBanks {
        text-align: center;
        flex: 1;
    }

    .imgBanks {
        width: 100%;
        border: none;
        /*margin: -5px -5px -5px -5px;
         padding: .4em 0 0 0;*/
        max-width: 100%;
    }

    .divforpicturebanks {
        width: 100%;
        margin: 5px 0 0 1px;
    }

    .picturePerBanks {
        margin: 1px !important;
        text-align: center !important;
        border: #000000 1px solid;
        background: #fff;
    }

    table#bankSelect {
        width: 100%;
        text-align: center;
        border: 1px solid #9f9f9f;
        margin: 5px auto 5px auto;
    }

    table#bankSelect td {
        text-align: center;
        vertical-align: middle;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 4px;
        margin: 0;
        font-size: 18px;
        display: table-cell;
        width: 10%;
    }


}

@media(max-width:500px) {

    .attention_div {
    line-height: 3.5;
    }

    #form {
        padding: 1em 0
    }

    .form_boxS .form_listS td,
    .form_other .form_inner,
    .form_wrapper .form_inner,
    .stepbox .frame {
        width: 100%
    }


    #form .caption {
        font-size: 5vw;
        padding: 1.5em 0 .5em
    }

    #form .form_wrapper {
        margin: 1.5em auto;
        padding: .5em 1em;
        border-radius: 5px
    }

    #form .form_wrapper .formhead {
        font-size: 1.3em
    }

    .form_wrapper .attention {
        font-size: 1em;
        margin-top: -2.5em;
        letter-spacing: 0;
        margin-left: 1em
    }

    #form .form_wrapper .gifttype {
        padding: 1.5em 0;
        margin-bottom: 1em;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px
    }

    #form .form_wrapper .giftlabel img {
        width: 40px
    }

    #form .form_wrapper .giftlabel .giftbrand {
        font-size: .9em;
        padding: 0 .5em;
        word-break: break-all
    }

    .form_boxA .form_listA input {
        margin-left: 1em;
        height: 40px;
        width: 80%;
        font-size: .9em !important
    }

    .form_boxA .form_listA input.px16,
    .form_boxB .form_listB input.px16,
    .form_boxC .form_listC input.px16,
    .form_boxS .form_listS input.px16,
    .form_box_other .form_list_other input.px16,
    .form_other .request_form textarea.px16 {
        font-size: 16px !important
    }

    .form_boxA .form_listA,
    .form_boxS .form_listS {
        margin: 0 auto 1em
    }

    .form_boxA .form_listA th {
        display: block;
        padding: 1em 0 0
    }

    .form_boxA .form_listA select {
        height: 40px;
        width: 80%;
        font-size: .9em !important;
        margin-left: 1em
    }

    .form_boxA .form_listA td.typeselect:after {
        right: 13%;
        top: calc(50% - .5em);
        width: 15px;
        height: 15px
    }

    .form_boxA .form_listA label,
    .form_boxB .form_listB th,
    .form_boxS .form_listS label {
        font-size: .9em
    }

    .form_boxB .form_listB input {
        height: 40px;
        width: 70%;
        font-size: .85em !important
    }

    .form_boxB .form_listB input.amount {
        margin-right: .2em
    }

    .form_boxB .form_listB th:first-child {
        width: 55%
    }

    .form_boxB .form_listB td:nth-child(odd) input {
        width: 90% !important
    }

    .form_boxC .form_listC input {
        height: 40px;
        width: 85%;
        font-size: .9em !important;
        margin: 0 auto;
        display: block
    }

    .form_boxC .form_listC td.file {
        margin-left: 1em
    }

    .form_boxC .form_listC {
        margin: 0 auto 3em
    }

    .form_boxC .form_listC th {
        width: 100%;
        display: block
    }

    .form_boxC .form_listC td.bank {
        margin-left: 1.5em
    }

    .form_wrapper .request_form textarea {
        margin: 1.5em 0 1em;
        font-size: 1.2em !important;
        height: 120px
    }

    .form_btn {
        width: 80%;
        padding: .5em;
        margin: .5em auto 2em;
        font-size: 1.3em
    }

    .form_btn.check {
        margin: 1.5em auto 2em
    }



    .form_boxS .form_listS input,
    .form_boxS .form_listS select {
        height: 40px;
        font-size: .9em !important
    }

    .form_boxS .form_listS th {
        display: block;
        padding: 1em 0 0;
        width: 100%;
        font-size: .9em
    }

    .form_boxS .form_listS td.typeselect:after {
        top: calc(50% - .5em);
        width: 15px;
        height: 15px
    }

    .form_boxS .form_listS textarea {
        font-size: 16px !important;
        height: 120px
    }

    .form_boxS .form_listS .attention {
        font-size: .75em;
        margin-top: -2.5em;
        letter-spacing: 0;
        margin-left: 0
    }

    img.application {
        margin: 4em auto 0 !important;
        height: 15px
    }
}

/* ////////////////////////////////////////////////////////////

カスタマイズscroll-hint

/////////////////////////////////////////////////////////////*/

@keyframes scroll-hint-appear {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50%,
    100% {
        transform: translateX(40px);
        opacity: 0;
    }
}

.scroll-hint.is-right-scrollable {
    background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-right-scrollable.is-left-scrollable {
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint.is-left-scrollable {
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}

.scroll-hint-icon {
    position: absolute;
    top: calc(50% - -15px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: 85px;
    border-radius: 10px;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    /*opacity: 0;*/
    opacity: .5;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    padding: 20px 10px 10px 10px;
}

/*////////// レスポンシブ480-1000 //////////*/

@media screen and (min-width: 480px) and (max-width: 1000px) {
    .scroll-hint-icon {
        top: calc(50% - 0px);
    }
}

.scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
}

.scroll-hint-text {
    font-size: 10px;
    color: #FFF;
    margin-top: 5px;
}

.scroll-hint.is-active .scroll-hint-icon {
    opacity: 0;
}

/*.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .8;
  }*/

.scroll-hint-icon:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #FFF;
    vertical-align: middle;
    text-align: center;
    content: "";
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}

.scroll-hint-icon:after {
    content: "";
    width: 34px;
    height: 14px;
    display: block;
    position: absolute;
    /*top: 10px;*/
    top: 8px;
    left: 50%;
    margin-left: -20px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
    opacity: 1;
    transition-delay: 2.4s;
}

/*.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
    opacity: 1;
  }*/

/*.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation: scroll-hint-appear 1.2s linear;
    animation-iteration-count: 2;
  }*/

.scroll-hint-icon-wrap .scroll-hint-icon:before {
    animation: scroll-hint-appear 1.2s linear;
    animation-iteration-count: 2;
}