.form-component,
.form-component>.cover {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-component>.autos,
.form-component>.cover>.autos {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2;
    margin-bottom: 20px;
    width: 100%;
}

@media screen and (min-width: 960px) {
    .form-component>.autos,
    .form-component>.cover>.autos {
        font-size: 2rem;
        margin-bottom: 40px;
    }
}

.form-component>.cover,
.form-component>.cover>.cover {
    position: relative;
}

.form-component>.cover>.text,
.form-component>.cover>.cover>.text {
    align-items: center;
    background: #FFFFFFE6;
    border: 4px dotted #CBCED2;
    color: #7C848D;
    display: flex;
    font-size: 2.4rem;
    height: 102%;
    justify-content: center;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(-50%);
    width: 105%;
    z-index: 1;
}

@media screen and (min-width: 960px) {
    .form-component>.cover>.text,
    .form-component>.cover>.cover>.text {
        font-size: 3rem;
        top: 20px;
    }
}

.form-component>.disable,
.form-component>.cover>.disable {
    width: 100%;
}

.form-component>.line,
.form-component>.cover>.line {
    border-top: 1px solid #CBCED2;
    width: 100%;
}

.form-component>.line.-mt,
.form-component>.cover>.line.-mt {
    margin-top: 20px;
}

@media screen and (min-width: 960px) {
    .form-component>.line.-mt,
    .form-component>.cover>.line.-mt {
        margin-top: 40px;
    }
}

.form-component>.line.-mb,
.form-component>.cover>.line.-mb {
    margin-bottom: 20px;
}

@media screen and (min-width: 960px) {
    .form-component>.line.-mb,
    .form-component>.cover>.line.-mb {
        margin-bottom: 40px;
    }
}

.form-component>.link.-button,
.form-component>.cover>.link.-button {
    margin: 40px 0 20px;
}

@media screen and (min-width: 960px) {
    .form-component>.link.-button,
    .form-component>.cover>.link.-button {
        margin: 80px 0 40px;
    }
}

.form-component>.link.-button.-confirm {
    margin: 20px 0 40px;
}

@media screen and (min-width: 960px) {
    .form-component>.link.-button.-confirm {
        margin: 0 0 40px;
    }
}

.form-component>.text,
.form-component>.cover>.text {
    line-height: 2;
    width: 100%;
}

.form-component>.text.-caution,
.form-component>.cover>.text.-caution {
    color: #E01D2C;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    width: 100%;
}

@media screen and (min-width: 960px) {
    .form-row {
        margin: 40px auto 0;
    }
}

.form-row.-address {
    margin-left: 2px;
    width: calc(100% - 4px);
}

.form-row>.label {
    flex: 1 1 100%;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 15px 0 10px;
    position: relative;
}

@media screen and (min-width: 960px) {
    .form-row>.label {
        font-size: 1.9rem;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.label {
        flex: 0 1 310px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblNone>.label {
        flex: 0 1 0px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW120>.label {
        flex: 0 1 120px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW150>.label {
        flex: 0 1 150px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW190>.label {
        flex: 0 1 190px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW200>.label {
        flex: 0 1 200px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW210>.label {
        flex: 0 1 210px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW240>.label {
        flex: 0 1 240px;
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW250>.label {
        flex: 0 1 250px;
    }
}

.form-row>.label.-full {
    font-size: 2rem;
}

@media screen and (min-width: 960px) {
    .form-row>.label.-full {
        flex: 1 1 100%;
        font-size: 2.4rem;
    }
}

.form-row>.label.-serial {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    line-height: 2;
    margin-bottom: 0;
}

.form-row>.label.-sub {
    font-size: 1.4rem;
    font-weight: 500;
}

@media screen and (min-width: 960px) {
    .form-row>.label.-sub {
        flex: 0 1 100px;
        font-size: 1.6rem;
    }
}

.form-row>.label.-warning {
    margin: 0;
}

.form-row>.label>.half {
    font-size: 1.4rem;
    font-weight: 400;
    padding-left: 1em;
}

.form-row>.label>.icon-component {
    bottom: -1px;
    cursor: pointer;
    height: 26px;
    margin-left: 10px;
    position: relative;
    width: 26px;
}

@media screen and (min-width: 960px) {
    .form-row>.label>.small {
        font-size: 1.4rem;
    }
}

.form-row>.inputs {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: auto;
}

@media screen and (min-width: 960px) {
    .form-row>.inputs {
        flex: 1 1 calc(100% - 310px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblNone>.inputs {
        flex: 1 1 calc(100% - 0px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW120>.inputs {
        flex: 1 1 calc(100% - 120px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW150>.inputs {
        flex: 1 1 calc(100% - 150px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW190>.inputs {
        flex: 1 1 calc(100% - 190px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW200>.inputs {
        flex: 1 1 calc(100% - 200px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW210>.inputs {
        flex: 1 1 calc(100% - 210px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW240>.inputs {
        flex: 1 1 calc(100% - 240px);
    }
}

@media screen and (min-width: 960px) {
    .form-row.-lblW250>.inputs {
        flex: 1 1 calc(100% - 250px);
    }
}

.form-row>.inputs>.input-auto,
.form-row>.inputs>.input.-button,
.form-row>.inputs>.input-component,
.form-row>.inputs>.link.-button,
.form-row>.inputs>.price-text,
.form-row>.inputs>.warning-text {
    flex: 0 1 calc(100% - 0px);
}

.form-row>.inputs>.-w2pct {
    flex: 0 1 calc(2% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w2pctSp {
        flex: 0 1 calc(2% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w2pctPc {
        flex: 0 1 calc(2% - 0px) !important;
    }
}

.form-row>.inputs>.-w5pct {
    flex: 0 1 calc(5% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w5pctSp {
        flex: 0 1 calc(5% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w5pctPc {
        flex: 0 1 calc(5% - 0px) !important;
    }
}

.form-row>.inputs>.-w10pct {
    flex: 0 1 calc(10% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w10pctSp {
        flex: 0 1 calc(10% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w10pctPc {
        flex: 0 1 calc(10% - 0px) !important;
    }
}

.form-row>.inputs>.-w20pct {
    flex: 0 1 calc(20% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w20pctSp {
        flex: 0 1 calc(20% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w20pctPc {
        flex: 0 1 calc(20% - 0px) !important;
    }
}

.form-row>.inputs>.-w25pct {
    flex: 0 1 calc(25% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w25pctSp {
        flex: 0 1 calc(25% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w25pctPc {
        flex: 0 1 calc(25% - 0px) !important;
    }
}

.form-row>.inputs>.-w30pct {
    flex: 0 1 calc(30% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w30pctSp {
        flex: 0 1 calc(30% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w30pctPc {
        flex: 0 1 calc(30% - 0px) !important;
    }
}

.form-row>.inputs>.-w40pct {
    flex: 0 1 calc(40% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w40pctSp {
        flex: 0 1 calc(40% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w40pctPc {
        flex: 0 1 calc(40% - 0px) !important;
    }
}

.form-row>.inputs>.-w45pct {
    flex: 0 1 calc(45% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w45pctSp {
        flex: 0 1 calc(45% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w45pctPc {
        flex: 0 1 calc(45% - 0px) !important;
    }
}

.form-row>.inputs>.-w49pct {
    flex: 0 1 calc(49% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w49pctSp {
        flex: 0 1 calc(49% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w49pctPc {
        flex: 0 1 calc(49% - 0px) !important;
    }
}

.form-row>.inputs>.-w50pct {
    flex: 0 1 calc(50% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w50pctSp {
        flex: 0 1 calc(50% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w50pctPc {
        flex: 0 1 calc(50% - 0px) !important;
    }
}

.form-row>.inputs>.-w60pct {
    flex: 0 1 calc(60% - 0px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.-w60pctSp {
        flex: 0 1 calc(60% - 0px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-w60pctPc {
        flex: 0 1 calc(60% - 0px) !important;
    }
}

.form-row>.inputs.-sLblW35>.input-auto,
.form-row>.inputs.-sLblW35>.input.-button,
.form-row>.inputs.-sLblW35>.input-component,
.form-row>.inputs.-sLblW35>.link.-button,
.form-row>.inputs.-sLblW35>.price-text,
.form-row>.inputs.-sLblW35>.warning-text {
    flex: 0 1 calc(100% - 35px);
}

.form-row>.inputs.-sLblW35>.-w2pct {
    flex: 0 1 calc(2% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w2pctSp {
        flex: 0 1 calc(2% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w2pctPc {
        flex: 0 1 calc(2% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w5pct {
    flex: 0 1 calc(5% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w5pctSp {
        flex: 0 1 calc(5% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w5pctPc {
        flex: 0 1 calc(5% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w10pct {
    flex: 0 1 calc(10% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w10pctSp {
        flex: 0 1 calc(10% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w10pctPc {
        flex: 0 1 calc(10% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w20pct {
    flex: 0 1 calc(20% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w20pctSp {
        flex: 0 1 calc(20% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w20pctPc {
        flex: 0 1 calc(20% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w25pct {
    flex: 0 1 calc(25% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w25pctSp {
        flex: 0 1 calc(25% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w25pctPc {
        flex: 0 1 calc(25% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w30pct {
    flex: 0 1 calc(30% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w30pctSp {
        flex: 0 1 calc(30% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w30pctPc {
        flex: 0 1 calc(30% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w40pct {
    flex: 0 1 calc(40% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w40pctSp {
        flex: 0 1 calc(40% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w40pctPc {
        flex: 0 1 calc(40% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w45pct {
    flex: 0 1 calc(45% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w45pctSp {
        flex: 0 1 calc(45% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w45pctPc {
        flex: 0 1 calc(45% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w49pct {
    flex: 0 1 calc(49% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w49pctSp {
        flex: 0 1 calc(49% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w49pctPc {
        flex: 0 1 calc(49% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w50pct {
    flex: 0 1 calc(50% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w50pctSp {
        flex: 0 1 calc(50% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w50pctPc {
        flex: 0 1 calc(50% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW35>.-w60pct {
    flex: 0 1 calc(60% - 35px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW35>.-w60pctSp {
        flex: 0 1 calc(60% - 35px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW35>.-w60pctPc {
        flex: 0 1 calc(60% - 35px) !important;
    }
}

.form-row>.inputs.-sLblW60>.input-auto,
.form-row>.inputs.-sLblW60>.input.-button,
.form-row>.inputs.-sLblW60>.input-component,
.form-row>.inputs.-sLblW60>.link.-button,
.form-row>.inputs.-sLblW60>.price-text,
.form-row>.inputs.-sLblW60>.warning-text {
    flex: 0 1 calc(100% - 60px);
}

.form-row>.inputs.-sLblW60>.-w2pct {
    flex: 0 1 calc(2% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w2pctSp {
        flex: 0 1 calc(2% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w2pctPc {
        flex: 0 1 calc(2% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w5pct {
    flex: 0 1 calc(5% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w5pctSp {
        flex: 0 1 calc(5% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w5pctPc {
        flex: 0 1 calc(5% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w10pct {
    flex: 0 1 calc(10% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w10pctSp {
        flex: 0 1 calc(10% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w10pctPc {
        flex: 0 1 calc(10% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w20pct {
    flex: 0 1 calc(20% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w20pctSp {
        flex: 0 1 calc(20% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w20pctPc {
        flex: 0 1 calc(20% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w25pct {
    flex: 0 1 calc(25% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w25pctSp {
        flex: 0 1 calc(25% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w25pctPc {
        flex: 0 1 calc(25% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w30pct {
    flex: 0 1 calc(30% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w30pctSp {
        flex: 0 1 calc(30% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w30pctPc {
        flex: 0 1 calc(30% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w40pct {
    flex: 0 1 calc(40% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w40pctSp {
        flex: 0 1 calc(40% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w40pctPc {
        flex: 0 1 calc(40% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w45pct {
    flex: 0 1 calc(45% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w45pctSp {
        flex: 0 1 calc(45% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w45pctPc {
        flex: 0 1 calc(45% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w49pct {
    flex: 0 1 calc(49% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w49pctSp {
        flex: 0 1 calc(49% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w49pctPc {
        flex: 0 1 calc(49% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w50pct {
    flex: 0 1 calc(50% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w50pctSp {
        flex: 0 1 calc(50% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w50pctPc {
        flex: 0 1 calc(50% - 60px) !important;
    }
}

.form-row>.inputs.-sLblW60>.-w60pct {
    flex: 0 1 calc(60% - 60px) !important;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs.-sLblW60>.-w60pctSp {
        flex: 0 1 calc(60% - 60px) !important;
    }
}

@media screen and (min-width: 960px) {
    .form-row>.inputs.-sLblW60>.-w60pctPc {
        flex: 0 1 calc(60% - 60px) !important;
    }
}

.form-row>.inputs>.-text {
    flex: 0 1 5%;
    font-size: 1.8rem;
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.-text {
        font-size: 2rem;
    }
}

.form-row>.inputs>.box {
    align-items: center;
    border: 1px solid #2A3440;
    color: #2A3440;
    display: flex;
    flex: 1 1 100%;
    font-size: 1.4rem;
    height: 60px;
    justify-content: center;
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.box {
        font-size: 1.6rem;
    }
}

.form-row>.inputs>.icon-component {
    height: 26px;
    width: 26px;
}

.form-row>.inputs>.price-box {
    flex: 1 1 100%;
    max-width: 100%;
}

.form-row>.inputs>.text.-hyphen {
    background: #240841;
    content: "";
    flex: 0 1 14px;
    height: 1px;
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .form-row>.inputs>.text.-hyphen {
        flex: 0 1 10px;
    }
}

.form-row>.inputs>.text.-name {
    flex: 0 1 50px;
    padding-right: 0.4em;
    text-align: center;
    white-space: nowrap;
}

@media screen and (min-width: 960px) {
    .form-row>.inputs>.text.-name {
        margin-left: auto;
        text-align: right;
    }
}

.form-row>.inputs>.undertext {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    justify-content: flex-end;
    width: 100%;
}

.form-row>.inputs>.undertext>.cards {
    display: inline-block;
    padding-left: 10px;
}

@media screen and (max-width: 959px) {
    .form-row>.inputs>.warning-text {
        margin-bottom: 10px;
    }
}

.input-auto,
.input-component {
    align-items: center;
    display: inline-flex;
    height: 60px;
    width: 100%;
}

.input-auto,
.input-component,
.form-row>.inputs>.text {
    font-size: 1.8rem;
}

@media screen and (min-width: 1400px) {
    .input-auto,
    .input-component,
    .form-row>.inputs>.text {
        font-size: 2rem;
    }
}

.input-auto {
    border-bottom: 1px solid #CBCED2;
    flex-wrap: wrap;
    font-weight: 500;
    padding: 0.2em 1em;
    text-align: left;
}

@media screen and (min-width: 960px) {
    .input-auto {
        padding: 0.2em calc(4px + 16 * (100vw - 960px) / 440);
    }
}

@media screen and (min-width: 1400px) {
    .input-auto {
        padding: 0.2em 20px;
    }
}

.input-auto>.full {
    flex: 1 1 100%;
    margin-top: -0.2em;
}

.input-component {
    background: #FFFFFF;
    border: 3px solid #3FAE29;
    border-radius: 10px;
    box-shadow: 0 3px 8px #00000029;
    font-weight: 500;
    position: relative;
}

.input-component::before {
    font-weight: 400;
    position: absolute;
    white-space: nowrap;
}

.input-component.-radio {
    color: #3FAE29;
    transition: transform 300ms ease;
}

.input-component.-check {
    background: #EEEFF8;
    border: 3px solid #EEEFF8;
    box-shadow: none;
    color: #240841;
}

.input-component.-check.-radio {
    background: #3FAE29;
    border: 3px solid #3FAE29;
    color: #FFFFFF;
    transform: scale(1.06, 1.06);
}

.input-component.-check>.icon-component.-check {
    display: block;
}

.input-component.-check>.icon-component>svg>circle {
    fill: #62B203;
}

.input-component.-check>.icon-component.-radio::after {
    background: #1987F5;
}

.input-component.-readonly {
    background: #E7E8E7;
    border: 3px solid #E7E8E7;
}

.input-component.-readonly>input {
    color: #54606C;
    cursor: no-drop;
}

.input-component.-warning {
    background: #FFEAE5;
    border: 3px solid #E01D2C;
}

.input-component.-warning>.icon-component.-warning {
    display: block !important;
}

.input-component.-warning>.icon-component.-check {
    display: none;
}

.input-component.-bank {
    justify-content: flex-start;
}

.input-component.-serial>.icon-component.-warning {
    display: none;
}

.input-component.-yuchoKigou::before,
.input-component.-yuchoBangou::before {
    bottom: calc(100% + 0.5em);
    left: 0;
}

@media screen and (min-width: 960px) {
    .input-component.-yuchoKigou::before,
    .input-component.-yuchoBangou::before {
        font-size: 1.6rem;
    }
}

.input-component.-yuchoKigou::before {
    content: "通帳記号";
}

.input-component.-yuchoBangou::before {
    content: "通帳番号";
}

.input-component>input,
.input-component>select,
.input-component>.inner {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: inherit;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 0.5em calc(12px + 8 * (100vw - 320px) / 640);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

@media screen and (min-width: 960px) {
    .input-component>input,
    .input-component>select,
    .input-component>.inner {
        padding: 0.5em calc(8px + 12 * (100vw - 960px) / 440);
    }
}

@media screen and (min-width: 1400px) {
    .input-component>input,
    .input-component>select,
    .input-component>.inner {
        padding: 0.5em 20px;
    }
}

.input-component>input::placeholder,
.input-component>select::placeholder,
.input-component>.inner::placeholder {
    color: #05010A33;
}

.input-component>input.-onLeft,
.input-component>select.-onLeft,
.input-component>.inner.-onLeft {
    padding-left: calc(32px + 8 * (100vw - 320px) / 640);
}

@media screen and (min-width: 960px) {
    .input-component>input.-onLeft,
    .input-component>select.-onLeft,
    .input-component>.inner.-onLeft {
        padding-left: calc(26px + 14 * (100vw - 960px) / 440);
    }
}

@media screen and (min-width: 1400px) {
    .input-component>input.-onLeft,
    .input-component>select.-onLeft,
    .input-component>.inner.-onLeft {
        padding-left: 40px;
    }
}

.input-component>input.-onRight,
.input-component>select.-onRight,
.input-component>.inner.-onRight {
    padding-right: calc(26px + 14 * (100vw - 320px) / 640);
}

@media screen and (min-width: 960px) {
    .input-component>input.-onRight,
    .input-component>select.-onRight,
    .input-component>.inner.-onRight {
        padding-right: calc(26px + 14 * (100vw - 960px) / 440);
    }
}

@media screen and (min-width: 1400px) {
    .input-component>input.-onRight,
    .input-component>select.-onRight,
    .input-component>.inner.-onRight {
        padding-right: 40px;
    }
}

@media screen and (min-width: 1024px) {
    .input-component>input.-small::placeholder,
    .input-component>select.-small::placeholder,
    .input-component>.inner.-small::placeholder {
        font-size: calc(10px + 6 * (100vw - 1024px) / 376);
    }
}

@media screen and (min-width: 1400px) {
    .input-component>input.-small::placeholder,
    .input-component>select.-small::placeholder,
    .input-component>.inner.-small::placeholder {
        font-size: 1.6rem;
    }
}

.input-component>select.-placeholder {
    color: #05010A33;
}

.input-component>select.-placeholder option {
    color: #000000;
}

@media screen and (min-width: 960px) {
    .input-component>select.-small:invalid {
        font-size: calc(13px + 6 * (100vw - 1024px) / 376);
    }
}

@media screen and (min-width: 1400px) {
    .input-component>select.-small:invalid {
        font-size: 1.6rem;
    }
}

.input-component>.icon-component {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.input-component>.icon-component.-onLeft {
    left: 10px;
}

.input-component>.icon-component.-onRight {
    right: 10px;
}

.input-component>.icon-component.-question {
    height: 26px;
    left: calc(100% + 10px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
}

.input-component>.inner {
    z-index: 0;
}

.input-component.-password>input {
    flex: 0 1 calc(95% - 10px);
    position: unset;
}

@media screen and (max-width: 959px) {
    .input-component.-password>input {
        flex: 0 1 calc(90% - 10px);
    }
}

.input-component.-password>.icon-component {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 0 1 5%;
    justify-content: center;
}

@media screen and (max-width: 959px) {
    .input-component.-password>.icon-component {
        flex: 0 1 10%;
    }
}

.input-component.-password>.icon-component>div {
    align-items: center;
    display: flex;
    justify-content: center;
}

.input-component.-password>.icon-component:hover>div>svg {
    fill: #DFDFDF;
}

.checkbox-component {
    cursor: pointer;
    font-size: 1.6rem;
    height: auto;
    position: relative;
}

@media screen and (min-width: 960px) {
    .checkbox-component {
        font-size: 1.8rem;
    }
}

.checkbox-component>label {
    cursor: pointer;
}

.checkbox-component>.checkbox {
    border: 2px solid #1987F5;
    border-radius: 2px;
    cursor: pointer;
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 24px;
}

.checkbox-component>.checkbox>.icon-component {
    left: 0;
    position: absolute;
    top: -10%;
}

.checkbox-component>.checkbox>.icon-component.-thin {
    height: 140%;
    width: 140%;
}

.checkbox-component>.checkbox>.icon-component.-thin>svg>path {
    stroke-width: 2px;
}

.checkbox-component>.inner {
    display: block;
}

.checkbox-component>.inner.-onLeft {
    padding-left: 32px;
}

.counter-component {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.counter-component.-absolute {
    bottom: -28px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.counter-component.-item {
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 3px 6px #00000029;
    color: #E01D2C;
    font-size: 2.6rem;
    font-weight: 700;
    height: 56px;
    padding: 12px;
    width: 148px;
}

.counter-component.-sidebar {
    font-size: 1.8rem;
    margin-left: auto;
    width: 80px;
}

.counter-component>input {
    color: inherit;
    font: inherit;
    text-align: center;
}

.counter-component>.minus,
.counter-component>.plus {
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    color: #FFFFFF;
    content: "";
    height: 28px;
    min-height: 28px;
    min-width: 28px;
    position: relative;
    width: 28px;
}

.counter-component>.minus::before,
.counter-component>.minus::after,
.counter-component>.plus::before,
.counter-component>.plus::after {
    background: #FFFFFF;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.counter-component>.minus::before,
.counter-component>.plus::before {
    height: 2px;
    width: 8px;
}

.counter-component>.plus::after {
    height: 8px;
    width: 1.5px;
}

.counter-component>.minus.-item,
.counter-component>.plus.-item {
    border: 2px solid #E01D2C;
    color: #E01D2C;
}

.counter-component>.minus.-item::before,
.counter-component>.minus.-item::after,
.counter-component>.plus.-item::before,
.counter-component>.plus.-item::after {
    background: #E01D2C;
    border-radius: 2px;
}

.counter-component>.minus.-item::before,
.counter-component>.plus.-item::before {
    height: 2px;
    width: 10px;
}

.counter-component>.plus.-item::after {
    height: 10px;
    width: 2px !important;
}