/*
Author: Grune Technologi Indonesia
Author URI: https://grune.co.jp/
Description: Grune Css Template buttons css
*/

.btn {
  cursor: pointer;
}
.btn.focus, .btn:focus {
  box-shadow: none;
}
.btn-square {
  border-radius: 0;
}
.btn-dark-blue {
  color: #fff;
  background-color: #14375B;
  border-color: #14375B;
}

/* button01 */
#button01 {
  margin-bottom: 30px;
}
#button01 .btn.focus, #button01 .btn:focus {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.button01 {
  font-family: 'Hiragino Kaku Gothic Pro W6';
  font-size: 18px;
  padding: 19px 72px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-width: 2px;
}
.button01:hover {
  background-color: #fff;
  border-color: #14375B;
  color: #14375B;
  border-width: 2px;
}
/* .button01 */

/* button02 */
#button02 {
  margin-bottom: 30px;
}
.button02 {
  color: #707070;
  font-family:"Open Sans", YuGothic, MyYuGothicM, 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS PGothic', sans-serif;
  font-size: 13px;
  border-color: #707070;
  background-color: #fff;
  width: 350px;
  height: 56px;
  margin-bottom: 5px;
}
.button02:hover {
  background-color: #fff;
  border-color: #67A6E6;
  color: #2462A2;
  border-width: 4px;
}
.button02 .fa {
  font-size: 18px;
}
/* .button02 */

/* button03 */
#button03 {
  margin-bottom: 30px;
}
#button03 .btn.focus, #button03 .btn:focus {
  background-color: #fff;
  border-color: #67A6E6;
  color: #2462A2;
  border-width: 4px;
}
.button03 {
  color: #707070;
  font-family: 'Hiragino Kaku Gothic Pro W6';
  font-size: 14px;
  border-color: #707070;
  background-color: #fff;
  width: 255px;
  height: 56px;
  position: relative;
  margin-bottom: 5px;
}
.button03.selected {
  background-color: #fff;
  border-color: #67A6E6;
  color: #2462A2;
  border-width: 4px;
}
.button03 .fa {
  font-size: 14px;
}
.button03 label {
  cursor: pointer;
  padding: 17px 71px;
  margin: -20px;
}
.button03 input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 17.14px;
  height: 17.14px;
  top: 18px;
  left: 18px;
  z-index: 999;
}
.button03 .checkmark {
  position: absolute;
  top: 18px;
  left: 18px;
  height: 17.14px;
  width: 17.14px;
  background-color: #DEDEDE;
  border-radius: 3px;
}
.button03.btn:focus .checkmark,.button03.selected .checkmark,
.button03.btn:focus input[type=checkbox], .button03.selected input[type=checkbox] {
  top: 15px;
  left: 15px;
}
.button03:hover input ~ .checkmark {
  background-color: #ccc;
}
.button03 input:checked ~ .checkmark {
  background-color: #2462A2;
}
.button03 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.button03 input:checked ~ .checkmark:after {
  display: block;
}
.button03 .checkmark:after {
  left: 5px;
  top: 0px;
  width: 7px;
  height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* .button03 */

/* button04 */
.button04{
  background: #1FB536;
  color: #fff;
  padding: 16px 0;
  position: relative;
  border-width: 2px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.3s linear 0s;
  -moz-transition: 0.3s linear 0s;
  -ms-transition: 0.3s linear 0s;
  -o-transition: 0.3s linear 0s;
  transition: 0.3s linear 0s;
}
.button04 .fa{
  font-size: 20px;
  position: absolute;
  right: 20px;
}

.btn:focus {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.button04:hover {
  background-color: #fff;
  color: #1FB536;
  border: 2px solid #1FB536;
}
/* .button04 */

/* buttons05 */
.button05{
  background: #698FFC;
  border: 2px solid #698FFC;
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-radius: 20px;
  display: inline-block;
  padding: 10px;
  -webkit-transition: 0.3s linear 0s;
  -moz-transition: 0.3s linear 0s;
  -ms-transition: 0.3s linear 0s;
  -o-transition: 0.3s linear 0s;
  transition: 0.3s linear 0s;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

@media (min-width:768px){
  .button05:hover{
    background: #fff;
    color: #698FFC;
    font-weight: bold;
    border: 2px solid #698FFC;
  }
}
/* buttons05 */