.input{position:relative;z-index:1;display:inline-block;margin:1em;max-width:600px;width:calc(100% - 2em);vertical-align:top}.input__field{position:relative;display:block;float:right;padding:.8em;width:60%;border:none;border-radius:0;background:#f0f0f0;color:#4a4a4a;text-align:center;font-family:Roboto,sans-serif;-webkit-appearance:none}.input__field:focus{outline:0;color:#4a4a4a}.input__label{display:inline-block;float:right;width:40%;font-family:Roboto,sans-serif;font-size:1.5em;color:#4a4a4a;font-weight:400;font-style:normal;letter-spacing:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input__label-content{position:relative;display:block;padding:1.1em 0;width:100%}.graphic{position:absolute;top:0;left:0;fill:none}.icon{color:#ddd;font-size:150%}.input--haruki{margin:3em 1em 1em}.input__field--haruki{padding:.3em 0 1.5em 0;width:100%;background:#fff;color:#4a4a4a;font-size:2.55em;line-height:1.5em;overflow:hidden}.input__label--haruki{position:absolute;width:100%;text-align:left;pointer-events:none}.input__label-content--haruki{transition:transform .3s}.input__label--haruki::after,.input__label--haruki::before{content:'';position:absolute;left:0;z-index:9;width:100%;height:3px;background:#ccc;transition:transform .3s}.input__label--haruki::before{top:0}.input__label--haruki::after{bottom:0}.input--filled .input__label-content--haruki,.input__field--haruki:focus+.input__label--haruki .input__label-content--haruki{transform:translate3d(0,-90%,0)}.input--filled .input__label--haruki::before,.input__field--haruki:focus+.input__label--haruki::before{transform:translate3d(0,-.5em,0)}.input--filled .input__label--haruki::after,.input__field--haruki:focus+.input__label--haruki::after{transform:translate3d(0,.5em,0)}.input--hoshi{overflow:hidden}.input__field--hoshi{margin-top:1em;padding:.85em .15em;width:100%;background:0 0;color:#595f6e}.input__label--hoshi{position:absolute;bottom:0;left:0;padding:0 .25em;width:100%;height:calc(100% - 1em);text-align:left;pointer-events:none}.input__label-content--hoshi{position:absolute}.input__label--hoshi::after,.input__label--hoshi::before{content:'';position:absolute;top:0;left:0;width:100%;height:calc(100% - 10px);border-bottom:1px solid #b9c1ca}.input__label--hoshi::after{margin-top:2px;border-bottom:4px solid red;transform:translate3d(-100%,0,0);transition:transform .3s}.input__label--hoshi-color-1::after{border-color:#00a9ff}.input__label--hoshi-color-2::after{border-color:#0fa}.input__label--hoshi-color-3::after{border-color:#f50}.input--filled .input__label--hoshi::after,.input__field--hoshi:focus+.input__label--hoshi::after{transform:translate3d(0,0,0)}.input--filled .input__label-content--hoshi,.input__field--hoshi:focus+.input__label--hoshi .input__label-content--hoshi{animation:anim-1 .3s forwards}@keyframes anim-1{50%{opacity:0;transform:translate3d(1em,0,0)}51%{opacity:0;transform:translate3d(-1em,-40%,0)}100%{opacity:1;transform:translate3d(0,-40%,0)}}.input--kuro{max-width:320px;margin-bottom:3em}.input__field--kuro{width:100%;background:0 0;color:#9196a1;opacity:0;text-align:center;transition:opacity .3s}.input__label--kuro{position:absolute;left:0;width:100%;color:#df6589;pointer-events:none}.input__label--kuro::after,.input__label--kuro::before{content:'';position:absolute;top:0;left:0;width:50%;height:100%;border:4px solid #747981;transition:transform .3s}.input__label--kuro::before{border-right:none}.input__label--kuro::after{left:50%;border-left:none}.input--filled .input__field--kuro,.input__field--kuro:focus{opacity:1;transition-delay:.3s}.input--filled .input__label--kuro::before,.input__field--kuro:focus+.input__label--kuro::before{transform:translate3d(-10%,0,0)}.input--filled .input__label--kuro::after,.input__field--kuro:focus+.input__label--kuro::after{transform:translate3d(10%,0,0)}.input--filled .input__label-content--kuro,.input__field--kuro:focus+.input__label--kuro .input__label-content--kuro{animation:anim-2 .3s forwards}@keyframes anim-2{50%{opacity:0;transform:scale3d(.3,.3,1)}51%{opacity:0;transform:translate3d(0,3.7em,0) scale3d(.3,.3,1)}100%{opacity:1;transform:translate3d(0,3.7em,0)}}.input--jiro{margin-top:2em}.input__field--jiro{padding:.85em .5em;width:100%;background:0 0;color:#dde2e2;opacity:0;transition:opacity .3s}.input__label--jiro{position:absolute;left:0;padding:0 .85em;width:100%;height:100%;text-align:left;pointer-events:none}.input__label-content--jiro{transition:transform .3s .3s}.input__label--jiro::after,.input__label--jiro::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .3s}.input__label--jiro::before{border-top:2px solid #6a7989;transform:translate3d(0,100%,0) translate3d(0,-2px,0);transition-delay:.3s}.input__label--jiro::after{z-index:-1;background:#6a7989;transform:scale3d(1,0,1);transform-origin:50% 0}.input--filled .input__field--jiro,.input__field--jiro:focus{opacity:1;transition-delay:.3s}.input--filled .input__label-content--jiro,.input__field--jiro:focus+.input__label--jiro .input__label-content--jiro{transform:translate3d(0,-80%,0);transition-timing-function:cubic-bezier(.2,1,.3,1)}.input--filled .input__label--jiro::before,.input__field--jiro:focus+.input__label--jiro::before{transition-delay:0s}.input--filled .input__label--jiro::before,.input__field--jiro:focus+.input__label--jiro::before{transform:translate3d(0,0,0)}.input--filled .input__label--jiro::after,.input__field--jiro:focus+.input__label--jiro::after{transform:scale3d(1,1,1);transition-delay:.3s;transition-timing-function:cubic-bezier(.2,1,.3,1)}.input__field--minoru{width:100%;background:#fff;box-shadow:0 0 0 2px transparent;color:#eca29b;transition:box-shadow .3s}.input__label--minoru{padding:0;width:100%;text-align:left}.input__label--minoru::after{content:'';position:absolute;top:0;z-index:-1;width:100%;height:4em;box-shadow:0 0;color:rgba(199,152,157,.6)}.input__field--minoru:focus{box-shadow:0 0 0 2px #eca29b}.input__field--minoru:focus+.input__label--minoru{pointer-events:none}.input__field--minoru:focus+.input__label--minoru::after{animation:anim-shadow .3s forwards}@keyframes anim-shadow{to{box-shadow:0 0 100px 50px;opacity:0}}.input__label-content--minoru{padding:.75em .15em}.input__field--yoko{z-index:10;width:100%;background:0 0;color:#f5f5f5;opacity:0;transition:opacity .3s}.input__label--yoko{position:relative;width:100%;color:#b04b40;text-align:left}.input__label--yoko::before{content:'';position:absolute;bottom:100%;left:0;width:100%;height:4em;background:#c5564a;transform:perspective(1000px) rotate3d(1,0,0,90deg);transform-origin:50% 100%;transition:transform .3s}.input__label--yoko::after{content:'';position:absolute;top:0;left:0;width:100%;height:.25em;background:#ad473c;transform-origin:50% 0;transition:transform .3s}.input__label-content--yoko{padding:.75em 0}.input--filled .input__field--yoko,.input__field--yoko:focus{opacity:1;transition-delay:.3s}.input--filled .input__label--yoko::before,.input__field--yoko:focus+.input__label--yoko::before{transform:perspective(1000px) rotate3d(1,0,0,0deg)}.input--filled .input__label--yoko,.input__field--yoko:focus+.input__label--yoko{pointer-events:none}.input--filled .input__label--yoko::after,.input__field--yoko:focus+.input__label--yoko::after{transform:perspective(1000px) rotate3d(1,0,0,-90deg)}.input--kyo{z-index:auto}.input__field--kyo{padding:.85em 1.5em;width:100%;border-radius:2em;background:#fff;color:#535d92}.input__label--kyo{z-index:0;padding:0 0 0 2em;width:100%;text-align:left}.input__label--kyo::after{content:'';position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:rgba(11,43,205,.6);opacity:0;transition:opacity .3s;pointer-events:none}.input__label-content--kyo{padding:.5em 0}.input__field--kyo:focus,.input__field--kyo:focus+.input__label--kyo .input__label-content--kyo{z-index:10000}.input__field--kyo:focus+.input__label--kyo{color:#fff}.input__field--kyo:focus+.input__label--kyo::after{opacity:1}.input--akira{margin-top:2em}.input__field--akira{position:absolute;top:0;left:0;z-index:10;display:block;padding:0 1em;width:100%;height:100%;background:0 0;text-align:center}.input__label--akira{padding:0;width:100%;background:#696a6e;color:#cc6055;cursor:text}.input__label--akira::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#2f3238;transform:scale3d(.97,.85,1);transition:transform .3s}.input__label-content--akira{transition:transform .3s}.input--filled .input__label--akira::before,.input__field--akira:focus+.input__label--akira::before{transform:scale3d(.99,.95,1)}.input--filled .input__label--akira,.input__field--akira:focus+.input__label--akira{cursor:default;pointer-events:none}.input--filled .input__label-content--akira,.input__field--akira:focus+.input__label--akira .input__label-content--akira{transform:translate3d(0,-3.5em,0)}.input--ichiro{margin-top:2em}.input__field--ichiro{position:absolute;top:4px;left:4px;z-index:100;display:block;padding:0 .55em;width:calc(100% - 8px);height:calc(100% - 8px);background:#f0f0f0;color:#7f8994;opacity:0;transform:scale3d(1,0,1);transform-origin:50% 100%;transition:opacity .3s,transform .3s}.input__label--ichiro{width:100%;text-align:left;cursor:text}.input__label--ichiro::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;transform-origin:50% 100%;transition:transform .3s}.input__label-content--ichiro{transform-origin:0 50%;transition:transform .3s}.input--filled .input__field--ichiro,.input__field--ichiro:focus{opacity:1;transform:scale3d(1,1,1)}.input--filled .input__label--ichiro,.input__field--ichiro:focus+.input__label--ichiro{cursor:default;pointer-events:none}.input--filled .input__label--ichiro::before,.input__field--ichiro:focus+.input__label--ichiro::before{transform:scale3d(1,1.5,1)}.input--filled .input__label-content--ichiro,.input__field--ichiro:focus+.input__label--ichiro .input__label-content--ichiro{transform:translate3d(0,-3.15em,0) scale3d(.8,.8,1) translateZ(1px)}.input--juro{overflow:hidden}.input__field--juro{position:absolute;z-index:100;padding:2.15em .75em 0;width:100%;background:0 0;color:#1784cd;font-size:.85em}.input__label--juro{padding:0;width:100%;height:100%;background:#fff;text-align:left}.input__label-content--juro{padding:2em 1em;transform-origin:0 50%;transition:transform .3s,color .3s;text-rendering:geometricPrecision}.input__label--juro::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:0 solid transparent;transition:border-width .3s,border-color .3s}.input--filled .input__label--juro::before,.input__field--juro:focus+.input__label--juro::before{border-width:8px;border-color:#1784cd;border-top-width:2em}.input--filled .input__label--juro .input__label-content--juro,.input__field--juro:focus+.input__label--juro .input__label-content--juro{color:#fff;transform:translate3d(0,-1.5em,0) scale3d(.75,.75,1) translateZ(1px)}.input--hideo{overflow:hidden;background:#fff}.input__field--hideo{padding:.85em .85em .85em 3em;width:100%;background:0 0;transform:translate3d(1em,0,0);transition:transform .3s}.input__label--hideo{position:absolute;padding:1.25em 0 0;width:4em;height:100%}.input__label--hideo::before{content:'';position:absolute;top:0;left:0;z-index:-1;width:4em;height:100%;background:#899dda;transform-origin:0 50%;transition:transform .3s}.icon--hideo{color:#fff;transform:scale3d(1,1,1);transform-origin:0 50%;transition:transform .3s}.input__label-content--hideo{position:absolute;top:100%}.input__field--hideo:focus{transform:translate3d(0,0,0)}.input__field--hideo:focus+.input__label--hideo::before{transform:scale3d(.8,1,1)}.input__field--hideo:focus+.input__label--hideo .icon--hideo{transform:scale3d(.6,.6,1)}.input--madoka{margin:1.1em}.input__field--madoka{width:100%;background:0 0;color:#7a7593}.input__label--madoka{position:absolute;width:100%;height:100%;color:#7a7593;text-align:left;cursor:text}.input__label-content--madoka{transform-origin:0 50%;transition:transform .3s}.graphic--madoka{transform:scale3d(1,-1,1);transition:stroke-dashoffset .3s;pointer-events:none;stroke:#7a7593;stroke-width:4px;stroke-dasharray:962;stroke-dashoffset:558}.input--filled .input__label--madoka,.input__field--madoka:focus+.input__label--madoka{cursor:default;pointer-events:none}.input--filled .graphic--madoka,.input__field--madoka:focus+.input__label--madoka .graphic--madoka{stroke-dashoffset:0}.input--filled .input__label-content--madoka,.input__field--madoka:focus+.input__label--madoka .input__label-content--madoka{transform:scale3d(.81,.81,1) translate3d(0,4em,0)}.input--kaede{display:block;overflow:hidden;margin:1em auto 2em;background:#efeeee}.input__field--kaede{position:absolute;top:0;right:100%;width:60%;height:100%;background:#fff;color:#9dabba;transition:transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}.input__label--kaede{z-index:10;display:block;width:100%;height:100%;text-align:left;cursor:text;transform-origin:0 50%;transition:transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}.input__label-content--kaede{padding:1.5em 0}.input--filled .input__field--kaede,.input__field--kaede:focus{transform:translate3d(100%,0,0);transition-delay:60ms}.input--filled .input__label--kaede,.input__field--kaede:focus+.input__label--kaede{transform:translate3d(60%,0,0);pointer-events:none}@media screen and (max-width:34em){.input--filled .input__label--kaede,.input__field--kaede:focus+.input__label--kaede{transform:translate3d(65%,0,0) scale3d(.65,.65,1);pointer-events:none}}.input__field--isao{z-index:10;padding:.75em .1em .25em;width:100%;background:0 0;color:#afb3b8}.input__label--isao{position:relative;overflow:hidden;padding:0;width:100%;color:#dadada;text-align:left}.input__label--isao::before{content:'';position:absolute;top:0;width:100%;height:7px;background:#dadada;transform:scale3d(1,.4,1);transform-origin:50% 100%;transition:transform .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1)}.input__label--isao::after{content:attr(data-content);position:absolute;top:0;left:0;padding:.75em .15em;color:#da7071;opacity:0;transform:translate3d(0,50%,0);transition:opacity .3s,transform .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);pointer-events:none}.input__field--isao:focus+.input__label--isao::before{background-color:#da7071;transform:scale3d(1,1,1)}.input__field--isao:focus+.input__label--isao{pointer-events:none}.input__field--isao:focus+.input__label--isao::after{opacity:1;transform:translate3d(0,0,0)}.input__label-content--isao{padding:.75em .15em;transition:opacity .3s,transform .3s;transition-timing-function:cubic-bezier(.2,1,.3,1)}.input__field--isao:focus+.input__label--isao .input__label-content--isao{opacity:0;transform:translate3d(0,-50%,0)}