@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: codropsicons;
    src: url(../fonts/codropsicons/codropsicons.eot);
    src: url(../fonts/codropsicons/codropsicons.eot?#iefix) format('embedded-opentype'),url(../fonts/codropsicons/codropsicons.woff) format('woff'),url(../fonts/codropsicons/codropsicons.ttf) format('truetype'),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format('svg')
}

*,*:after,*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.clearfix:before,.clearfix:after {
    content: '';
    display: table
}

.clearfix:after {
    clear: both
}

.input-container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    background-color: #f0f8ff
}

.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em;
    max-width: 350px;
    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: #aaa;
    font-weight: 700;
    font-family: helvetica neue,Helvetica,Arial,sans-serif;
    -webkit-appearance: none
}

.input__field:focus {
    outline: none
}

.input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #6a7989;
    font-weight: 700;
    font-size: 70.25%;
    -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__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none
}

.icon {
    color: #ddd;
    font-size: 150%
}

.input--haruki {
    margin: 4em 1em 1em
}

.input__field--haruki {
    padding: .4em .25em;
    width: 100%;
    background: 0 0;
    color: #afb5bb;
    font-size: 1.55em
}

.input__label--haruki {
    position: absolute;
    width: 100%;
    text-align: left;
    pointer-events: none
}

.input__label-content--haruki {
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--haruki::before,.input__label--haruki::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 4px;
    background: #6a7989;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--haruki::before {
    top: 0
}

.input__label--haruki::after {
    bottom: 0
}

.input__field--haruki:focus+.input__label--haruki .input__label-content--haruki,.input--filled .input__label-content--haruki {
    -webkit-transform: translate3d(0,-90%,0);
    transform: translate3d(0,-90%,0)
}

.input__field--haruki:focus+.input__label--haruki::before,.input--filled .input__label--haruki::before {
    -webkit-transform: translate3d(0,-0.5em,0);
    transform: translate3d(0,-0.5em,0)
}

.input__field--haruki:focus+.input__label--haruki::after,.input--filled .input__label--haruki::after {
    -webkit-transform: translate3d(0,0.5em,0);
    transform: translate3d(0,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::before,.input__label--hoshi::after {
    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;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--hoshi-color-1::after {
    border-color: #0af
}

.input__label--hoshi-color-2::after {
    border-color: #0fa
}

.input__label--hoshi-color-3::after {
    border-color: #f50
}

.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 .3s forwards;
    animation: anim-1 .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,-40%,0);
        transform: translate3d(-1em,-40%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,-40%,0);
        transform: translate3d(0,-40%,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,-40%,0);
        transform: translate3d(-1em,-40%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,-40%,0);
        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;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.input__label--kuro {
    position: absolute;
    left: 0;
    width: 100%;
    color: #df6589;
    pointer-events: none
}

.input__label--kuro::before,.input__label--kuro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border: 4px solid #747981;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--kuro::before {
    border-right: none
}

.input__label--kuro::after {
    left: 50%;
    border-left: none
}

.input__field--kuro:focus,.input--filled .input__field--kuro {
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.input__field--kuro:focus+.input__label--kuro::before,.input--filled .input__label--kuro::before {
    -webkit-transform: translate3d(-10%,0,0);
    transform: translate3d(-10%,0,0)
}

.input__field--kuro:focus+.input__label--kuro::after,.input--filled .input__label--kuro::after {
    -webkit-transform: translate3d(10%,0,0);
    transform: translate3d(10%,0,0)
}

.input__field--kuro:focus+.input__label--kuro .input__label-content--kuro,.input--filled .input__label-content--kuro {
    -webkit-animation: anim-2 .3s forwards;
    animation: anim-2 .3s forwards
}

@-webkit-keyframes anim-2 {
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,1);
        transform: scale3d(.3,.3,1)
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0,3.7em,0) scale3d(.3,.3,1);
        transform: translate3d(0,3.7em,0) scale3d(.3,.3,1)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,3.7em,0);
        transform: translate3d(0,3.7em,0)
    }
}

@keyframes anim-2 {
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,1);
        transform: scale3d(.3,.3,1)
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0,3.7em,0) scale3d(.3,.3,1);
        transform: translate3d(0,3.7em,0) scale3d(.3,.3,1)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,3.7em,0);
        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;
    -webkit-transition: opacity .3s;
    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 {
    -webkit-transition: -webkit-transform .3s .3s;
    transition: transform .3s .3s
}

.input__label--jiro::before,.input__label--jiro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--jiro::before {
    border-top: 2px solid #6a7989;
    -webkit-transform: translate3d(0,100%,0) translate3d(0,-2px,0);
    transform: translate3d(0,100%,0) translate3d(0,-2px,0);
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.input__label--jiro::after {
    z-index: -1;
    background: #6a7989;
    -webkit-transform: scale3d(1,0,1);
    transform: scale3d(1,0,1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%
}

.input__field--jiro:focus,.input--filled .input__field--jiro {
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.input__field--jiro:focus+.input__label--jiro .input__label-content--jiro,.input--filled .input__label-content--jiro {
    -webkit-transform: translate3d(0,-80%,0);
    transform: translate3d(0,-80%,0);
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    transition-timing-function: cubic-bezier(.2,1,.3,1)
}

.input__field--jiro:focus+.input__label--jiro::before,.input--filled .input__label--jiro::before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.input__field--jiro:focus+.input__label--jiro::before,.input--filled .input__label--jiro::before {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.input__field--jiro:focus+.input__label--jiro::after,.input--filled .input__label--jiro::after {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    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;
    -webkit-transition: box-shadow .3s;
    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 {
    -webkit-animation: anim-shadow .3s forwards;
    animation: anim-shadow .3s forwards
}

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0 0 100px 50px;
        opacity: 0
    }
}

@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;
    -webkit-transition: opacity .3s;
    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;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
    transform: perspective(1000px) rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label--yoko::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .25em;
    background: #ad473c;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label-content--yoko {
    padding: .75em 0
}

.input__field--yoko:focus,.input--filled .input__field--yoko {
    opacity: 1;
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.input__field--yoko:focus+.input__label--yoko::before,.input--filled .input__label--yoko::before {
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,0deg);
    transform: perspective(1000px) rotate3d(1,0,0,0deg)
}

.input__field--yoko:focus+.input__label--yoko,.input--filled .input__label--yoko {
    pointer-events: none
}

.input__field--yoko:focus+.input__label--yoko::after,.input--filled .input__label--yoko::after {
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,-90deg);
    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;
    -webkit-transition: opacity .3s;
    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;
    -webkit-transform: scale3d(.97,.85,1);
    transform: scale3d(.97,.85,1);
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label-content--akira {
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__field--akira:focus+.input__label--akira::before,.input--filled .input__label--akira::before {
    -webkit-transform: scale3d(.99,.95,1);
    transform: scale3d(.99,.95,1)
}

.input__field--akira:focus+.input__label--akira,.input--filled .input__label--akira {
    cursor: default;
    pointer-events: none
}

.input__field--akira:focus+.input__label--akira .input__label-content--akira,.input--filled .input__label-content--akira {
    -webkit-transform: translate3d(0,-3.5em,0);
    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;
    -webkit-transform: scale3d(1,0,1);
    transform: scale3d(1,0,1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: opacity .3s,-webkit-transform .3s;
    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;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label-content--ichiro {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__field--ichiro:focus,.input--filled .input__field--ichiro {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1)
}

.input__field--ichiro:focus+.input__label--ichiro,.input--filled .input__label--ichiro {
    cursor: default;
    pointer-events: none
}

.input__field--ichiro:focus+.input__label--ichiro::before,.input--filled .input__label--ichiro::before {
    -webkit-transform: scale3d(1,1.5,1);
    transform: scale3d(1,1.5,1)
}

.input__field--ichiro:focus+.input__label--ichiro .input__label-content--ichiro,.input--filled .input__label-content--ichiro {
    -webkit-transform: translate3d(0,-3.15em,0) scale3d(.8,.8,1);
    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;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .3s,color .3s;
    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;
    -webkit-transition: border-width .3s,border-color .3s;
    transition: border-width .3s,border-color .3s
}

.input__field--juro:focus+.input__label--juro::before,.input--filled .input__label--juro::before {
    border-width: 8px;
    border-color: #1784cd;
    border-top-width: 2em
}

.input__field--juro:focus+.input__label--juro .input__label-content--juro,.input--filled .input__label--juro .input__label-content--juro {
    color: #fff;
    -webkit-transform: translate3d(0,-1.5em,0) scale3d(.75,.75,1);
    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;
    -webkit-transform: translate3d(1em,0,0);
    transform: translate3d(1em,0,0);
    -webkit-transition: -webkit-transform .3s;
    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;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.icon--hideo {
    color: #fff;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.input__label-content--hideo {
    position: absolute;
    top: 100%
}

.input__field--hideo:focus {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.input__field--hideo:focus+.input__label--hideo::before {
    -webkit-transform: scale3d(.8,1,1);
    transform: scale3d(.8,1,1)
}

.input__field--hideo:focus+.input__label--hideo .icon--hideo {
    -webkit-transform: scale3d(.6,.6,1);
    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 {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.graphic--madoka {
    -webkit-transform: scale3d(1,-1,1);
    transform: scale3d(1,-1,1);
    -webkit-transition: stroke-dashoffset .3s;
    transition: stroke-dashoffset .3s;
    pointer-events: none;
    stroke: #7a7593;
    stroke-width: 4px;
    stroke-dasharray: 962;
    stroke-dashoffset: 558
}

.input__field--madoka:focus+.input__label--madoka,.input--filled .input__label--madoka {
    cursor: default;
    pointer-events: none
}

.input__field--madoka:focus+.input__label--madoka .graphic--madoka,.input--filled .graphic--madoka {
    stroke-dashoffset: 0
}

.input__field--madoka:focus+.input__label--madoka .input__label-content--madoka,.input--filled .input__label-content--madoka {
    -webkit-transform: scale3d(.81,.81,1) translate3d(0,4em,0);
    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;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    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;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    transition-timing-function: cubic-bezier(.2,1,.3,1)
}

.input__label-content--kaede {
    padding: 1.5em 0
}

.input__field--kaede:focus,.input--filled .input__field--kaede {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    -webkit-transition-delay: .06s;
    transition-delay: .06s
}

.input__field--kaede:focus+.input__label--kaede,.input--filled .input__label--kaede {
    -webkit-transform: translate3d(60%,0,0);
    transform: translate3d(60%,0,0);
    pointer-events: none
}

@media screen and (max-width: 34em) {
    .input__field--kaede:focus+.input__label--kaede,.input--filled .input__label--kaede {
        -webkit-transform:translate3d(65%,0,0) scale3d(.65,.65,1);
        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;
    -webkit-transform: scale3d(1,.4,1);
    transform: scale3d(1,.4,1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform .3s,background-color .3s;
    transition: transform .3s,background-color .3s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    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;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
    -webkit-transition: opacity .3s,-webkit-transform .3s;
    transition: opacity .3s,transform .3s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    transition-timing-function: cubic-bezier(.2,1,.3,1);
    pointer-events: none
}

.input__field--isao:focus+.input__label--isao::before {
    background-color: #da7071;
    -webkit-transform: scale3d(1,1,1);
    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;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.input__label-content--isao {
    padding: .75em .15em;
    -webkit-transition: opacity .3s,-webkit-transform .3s;
    transition: opacity .3s,transform .3s;
    -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1);
    transition-timing-function: cubic-bezier(.2,1,.3,1)
}

.input__field--isao:focus+.input__label--isao .input__label-content--isao {
    opacity: 0;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0)
}