.input {

	position: relative;

	z-index: 1;

	display: inline-block;

	margin: 20px 0px;

	width: 100%;

	vertical-align: top;

}



.input__field {

	position: relative;

	display: block;

	float: right;

	padding: 13px 10px;

	width: 60%;

	border: none;

	border-radius: 0;

	background: #f0f0f0;

	color: #000;

	font-weight: 400;

	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

	-webkit-appearance: none; /* for box shadows to show on iOS */

}



.input__field:focus {

	outline: none;

	border-color:#000;

}



.input__label {

	display: inline-block;

	float: right;

	padding: 0 1em;

	width: 40%;

	color: #696969;

	font-weight: bold;

	-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%;

	font-size: 16px;

}



.graphic {

	position: absolute;

	top: 0;

	left: 0;

	fill: none;

}



.icon {

	color: #ddd;

	font-size: 150%;

}







/* Yoshiko */

.input__field--yoshiko {

	width: 100%;

	border: 2px solid transparent;

	-webkit-transition: background-color 0.25s, border-color 0.25s;

	transition: background-color 0.25s, border-color 0.25s;

}



.input__label--yoshiko {

	width: 100%;

	text-align: left;

	position: absolute;

	bottom: 100%;

	pointer-events: none;

	overflow: hidden;

	-webkit-transform: translate3d(0, 3em, 0);

	transform: translate3d(0, 3em, 0);

	-webkit-transition: -webkit-transform 0.25s;

	transition: transform 0.25s ;

	-webkit-transition-timing-function: ease-in-out;

	transition-timing-function: ease-in-out;

}



.input__label-content--yoshiko {



	padding: 0.25em 0;

	-webkit-transition: -webkit-transform 0.25s;

	transition: transform 0.25s;

	-webkit-transition-timing-function: ease-in-out;

	transition-timing-function: ease-in-out;

}



.input__label-content--yoshiko::after {

	content: attr(data-content);

	position: absolute;

	font-weight: 800;

	bottom: 100%;

	left: 0;

	height: 100%;

	width: 100%;

	color: #000;

	padding: 0.25em 0;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-size: 0.85em;

}



.input__field--yoshiko:focus + .input__label--yoshiko,

.input--filled .input__label--yoshiko {

	-webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

}



.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,

.input--filled .input__label-content--yoshiko {

	-webkit-transform: translate3d(0, 100%, 0);

	transform: translate3d(0, 100%, 0);

}



.input__field--yoshiko:focus + .input__field--yoshiko,

.input--filled .input__field--yoshiko {

	background-color: transparent;

	border-color: #000;

}



/* Chisato */