form{background: #ddd;width:100%;}
    form div{padding: 10px 20px;}

 label{
font-weight:bold;
}

.text, textarea, .dropdown{
    border:1px solid #777;
    padding: 10px;
    color: #333;
    background: #fff;
    border-radius: 5px;
    width:100%;
    margin:10px;
    }

 .text2{
    border:1px solid #777;
    padding: 10px;
    color: #333;
    background: #fff;
    border-radius: 5px;
    width:35%;
    margin:10px;
    }
    
 .text3{
    border:1px solid #777;
    padding: 10px;
    color: #333;
    background: #fff;
    border-radius: 5px;
    width:20%;
    margin:10px;
    }

.submit{
    font-size:18px;
    border:1px solid #777;
    padding: 14px 20px;
    color: #fff;
    cursor: pointer;
    background: #428ec9;
    border-radius: 5px;
    }

select {
  margin:10px;
  font-size: 120%;
  color:#333;
  border-radius: 5px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    border-radius: 8px;
    border: 2px solid #4c4c4c;
    -webkit-box-sizing: border-box;
    width: 28px;
    height: 28px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fdfdfd),
        to(#d1d1d1)
    );
}

/* チェック時は背景色を変更 */
input[type="checkbox"]:checked {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#353535),
        to(#8f8f8f)
    );
}

/* チェックの印を:before疑似要素と:after疑似要素を使って作成 */
input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 17px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
    content: "";
    width: 10px;
    height: 4px;
    background: #FFFFFF;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
}

input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 17px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 1);
    width: 19px;
    height: 4px;
    background: #FFFFFF;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
}

input[type="radio"] {
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    border-radius: 14px;
    border: 2px solid #4c4c4c;
    -webkit-box-sizing: border-box;
    width: 28px;
    height: 28px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fdfdfd),
        to(#d1d1d1)
    );
    vertical-align: middle;
}

/* チェック時は背景色を変更 */
input[type="radio"]:checked {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#228b22),
        to(#7cfc00)
    );
}

/* チェックの印を:before疑似要素を使って作成 */
input[type="radio"]:checked:before {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    margin: -5px 0 0 -5px;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 1);
    content: "";
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fdfdfd),
        to(#d1d1d1)
    );
}

.error INPUT, .error TEXTAREA, .error SELECT {
	border-width:2px;
	border-style:solid;
	border-color:#ED1C24;
	background:#F5F6CE;
	}
.iferror {
	margin:0;
	display:none;
	}
.error .iferror {
	display:block;
	color:#ED1C24;
	}

.hint { color:#888; }

/*入力時の背景色*/
input:focus, select:focus, textarea:focus {
background: #F5F6CE;
}