.input{position:relative;z-index:1;display:inline-block;width:100%;vertical-align:top}.input__field{position:relative;display:block;float:right;padding:.8em;width:60%;border:none;border-radius:0;background:#f0f0f0;color:#aaa;-webkit-appearance:none}.input__field:focus{outline:none}.input__label{display:inline-block;padding:0 1em;width:40%;color:#6d6d6d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input--filled .input__label{font-size:70.25%}.input__label-content{position:relative;display:block;width:100%}.graphic{position:absolute;top:0;left:0;fill:none}.icon{color:#ddd;font-size:150%}.input--hoshi{overflow:hidden}.input__field--hoshi{padding:1.75em 1em .25em 1em!important;border:none!important;width:100%;background:transparent}.input__label--hoshi{position:absolute;bottom:0;left:0;padding:0 1em 0 .25em;width:100%;height:calc(100% - 1em);pointer-events:none;border-bottom:2px solid #b0b0b0}.input__label-content--hoshi{position:absolute;bottom:9px;left:0;font-size:1em;font-weight:300}.input--filled .input__label-content--hoshi{bottom:30px;right:8px;color:#55849b}.input__label--hoshi::before{position:absolute;top:11px;left:0;content:"";width:20px;height:20px}.input__label--hoshi::after{content:'';position:absolute;top:1px;left:0;width:100%;height:100%}.input__label--hoshi::after{margin-top:2px;border-bottom:4px solid red;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s}.input__label--hoshi-color-1::after{border-color:#55849b}.input__label--hoshi-color-2::after{border-color:hsl(160,100%,50%)}.input__label--hoshi-color-3::after{border-color:hsl(20,100%,50%)}.input__field--hoshi:focus+.input__label--hoshi::after,.input--filled .input__label--hoshi::after{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.input__field--hoshi:focus+.input__label--hoshi .input__label-content--hoshi,.input--filled .input__label-content--hoshi{-webkit-animation:anim-1 0.3s forwards;animation:anim-1 0.3s forwards}@-webkit-keyframes anim-1{50%{opacity:0;-webkit-transform:translate3d(1em,0,0);transform:translate3d(1em,0,0)}51%{opacity:0;-webkit-transform:translate3d(-1em,-30%,0);transform:translate3d(-1em,-30%,0)}100%{opacity:1;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}}@keyframes anim-1{50%{opacity:0;-webkit-transform:translate3d(1em,0,0);transform:translate3d(1em,0,0)}51%{opacity:0;-webkit-transform:translate3d(-1em,-30%,0);transform:translate3d(-1em,-30%,0)}100%{opacity:1;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}}