.btn{
  width: 500px;
  padding: 28px 0 28px 0;
  font-size: 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #444;
  line-height: 1;
  border-radius: 50px;
  transition: all .2s;
}

.btn{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #444;
}
.btn:hover{
  background-color: #fff;
  border-color: #444;
  color: #444;
}


.btn_200{
  width: 200px;
  padding: 18px 0 16px 0;
  font-size: 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #444;
  line-height: 1;
  border-radius: 50px;
  transition: all .2s;
}

.btn_200{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #444;
}
.btn_200:hover{
  background-color: #fff;
  border-color: #444;
  color: #444;
}


.btn_500{
  width: 460px;
  padding: 48px 0 46px 0;
  font-size: 30px;
  position: relative;
  text-decoration:none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #FF8000;
  line-height: 1;
  border-radius: 12px;
  transition: all .2s;
}  
.btn_500{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #FF8000;
}
.btn_500:hover{
  font-size: 34px;
  background-color: #fff;
  border-color: #FF8000;
  color: #FF8000;
}




.btn_501{
  width: 460px;
  padding: 48px 0 46px 0;
  font-size: 30px;
  position: relative;
  text-decoration:none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #009999;
  line-height: 1;
  border-radius: 12px;
  transition: all .2s;
}  
.btn_501{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #009999;
}
.btn_501:hover{
  font-size: 34px;
  background-color: #fff;
  border-color: #009999;
  color: #009999;
}



.btn_300{
  width: 300px;
  padding: 28px 0 26px 0;
  font-size: 24px;
  position: relative;
  text-decoration:none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #009999;
  line-height: 1;
  border-radius: 12px;
  transition: all .2s;
}  
.btn_300{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #009999;
}
.btn_300:hover{
  font-size: 28px;
  background-color: #fff;
  border-color: #009999;
  color: #009999;
}



.btn_olng{
  width: 400px;
  padding: 28px 0 26px 0;
  font-size: 28px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #FF8000;
  line-height: 1;
  border-radius: 12px;
  transition: all .2s;
}  
.btn_olng{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #FF8000;
}
.btn_olng:hover{
  background-color: #fff;
  border-color: #FF8000;
  color: #FF8000;
}


.btn_green{
  width: 400px;
  padding: 28px 0 26px 0;
  font-size: 28px;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  color: #fff;
  background: #009999;
  line-height: 1;
  border-radius: 12px;
  transition: all .2s;
}  
.btn_green{
  /*背景色と同じ枠色を追加*/
  border: 2px solid #009999;
}
.btn_green:hover{
  background-color: #fff;
  border-color: #009999;
  color: #009999;
}





/*Don't forget to add Font Awesome CSS : "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"*/
input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
  font-size:140%;
}

input[type="text"]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus + i {
  color: dodgerBlue;
}

.inputWithIcon.inputIconBg i {
  background-color: #aaa;
  color: #fff;
  padding: 9px 4px;
  border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
  color: #fff;
  background-color: dodgerBlue;
}



.custom-select {
  border-radius: 5px;
  border: solid 2px #999999;
  box-sizing: border-box;
}
select {
  border-radius: 5px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  background: #fff
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E")
    right 10px center no-repeat;
  padding: 12px 35px 12px 11px;
  color: #000;

  /* Firefox hide arrow */
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
}
/* IE10 hide arrow */
select::-ms-expand {
  display: none;
}

body {
  width: 500px;
  margin: 60px auto;
}