/*--focus クリックすると黄色になります--*/
input:focus {background-color: #febe3e;}

/*--inputタイプの共通指定　▼▼▼--*/
.focus01 input {
	width:50%;
	position:relative;
	font-size:18px;
	margin:0;
	background:none;
	outline:none;
	border: solid 1px #febe3e;
	color:#fff;
	padding:10px 20px;
	box-sizing: border-box;
	-webkit-transition:all .5s;
	transition:all .5s;
}

/*--inputタイプのwebkitの共通指定--*/
.focus01 input::-webkit-input-placeholder {
	color:#fff;
}
.focus01 input:-moz-input-placeholder {
	color:#fff;
}

/*--ここまで全てにおいて共通 クラス名の番号だけ変更してください　▲▲▲--*/

/*--focus01に対するCSS--*/
.focus01 input:focus, .focus01 input:active  {
	box-shadow:0 0 0 3px #febe3e;
}

/*--inputタイプの共通指定 以下省略--*/
/*--focus02に対するCSS--*/
.focus02 input:focus, .focus02 input:active  {
	background:rgba(255,255,255,.40);
}

/*--inputタイプの共通指定 以下省略--*/
/*--focus03に対するCSS--*/
.focus03 input  {
	width:50%;
}
.focus03 input:focus, input:active  {
	width:80%;
}