@charset "utf-8";

//==========================================================================
//_form.scss
//==========================================================================

//-----------------------------------------------------------------
//.c-form-input
//-----------------------------------------------------------------
.c-input-01 {
    position: relative;
    width: 100%;
}
.c-form-input[type=text] {
    width: 100%;
    height: 56px;
    border: 1px solid #999;
    font-size: 18px;
    font-weight: 400;
    color: #222;
    padding: 0 20px;
    @include smMax {
        padding: 0 sm_vw(30);
        font-size: sm_vw(28);
        height: sm_vw(80);
    }
    &.is-error {
        border: 1px solid $colorRed03;
        background-color: #fff5f4;
    }
    &::placeholder {
        color: #222;
    }
}


//-----------------------------------------------------------------
//.c-form-radio
//-----------------------------------------------------------------
.c-form-radio {
}


//-----------------------------------------------------------------
//.c-form-checkbox
//-----------------------------------------------------------------
.c-form-checkbox {
}


//-----------------------------------------------------------------
//.c-form-select
//-----------------------------------------------------------------
.c-select-01 {
    position: relative;
    height: 50px;
    @include smMax {
        height: sm_vw(80);
    }
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #999;
    }
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        transform: rotate(-90deg);
        background: $colorBlue url("../images/ico_arrow01_w.svg") 50% 50% no-repeat;
        background-size: 10px 17px;
        @include smMax {
            width: sm_vw(80);
            background-size: sm_vw(14) sm_vw(24);
        }
    }
    &.is-error {
        &::before {
            border: 1px solid $colorRed03;
            background-color: #fff5f4;
        }
    }
}
.c-select-01::-ms-expand {
    display: none;
}
.c-form-select-01 {
    position: relative;
    z-index: 2;
    padding: 0 60px 0 20px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #222;
    @include smMax {
        padding: 0 sm_vw(80) 0 sm_vw(30);
        font-size: sm_vw(28);
    }
}
.c-form-select-01::-ms-expand {
    display: none;
}


//-----------------------------------------------------------------
//.c-form-textarea
//-----------------------------------------------------------------
.c-form-textarea {
}