@charset "UTF-8";

.form-item.search input { width: 3.5rem; padding:0px; cursor: pointer;}

.form-item.search input {
    border: 1px solid #ccc;
    background: #f1e767;
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
    background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
    background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
    -webkit-box-shadow: inset 1px 1px 1px #fff;
    box-shadow: inset 1px 1px 1px #fff;
}
.form-item.search input:hover {
    background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
    background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
    background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

.form-item.search .note { width: 300px; top: 28px; position: unset;}

#cc-number { width: auto; height: .7rem; padding: .15rem .2rem .12rem .35rem; border: .04rem solid #efefef; border-radius: .05rem; }
#cc-expiry { width: 2rem; height: .7rem; padding: .15rem .2rem .12rem .35rem; border: .04rem solid #efefef; border-radius: .05rem; }
#cc-code { width: 2rem; height: .7rem; padding: .15rem .2rem .12rem .35rem; border: .04rem solid #efefef; border-radius: .05rem; }
#card-error { font-size: .3rem; color: red; padding-top: 20px; }

/* pc */
@media (min-width: 768px) { 
    .form-item.search dd { width: 80px; top: 28px;}
    .form-item.search .note { width: 300px; top: 15px; position: absolute; margin-left: 20px;}

    .form-item .note { top: 10px; font-size: 16px; }

    #cc-number { width: 400px; height: 50px; padding: 13px 20px; border: 2px solid #efefef; border-radius: 5px; }
    #cc-expiry { width: 125px; height: 50px; padding: 13px 20px; border: 2px solid #efefef; border-radius: 5px; }
    #cc-code { width: 125px; height: 50px; padding: 13px 20px; border: 2px solid #efefef; border-radius: 5px; }
    #card-error { font-size: 0.9rem; }
}