/* ボタン本体 */
.btn_blue {
  -webkit-appearance: none;
  display: inline-block;
  padding: 0.2em 0.2em;
  background-color: #61b0e2; /* 背景色 */
  box-shadow: 0 2px 0 #369ada; /* 影の太さ・色 */
  border-radius: 10px;
  font-size:110%;
  color: #000;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
  transition: all 0.3s;
}

/* クリック時 */
.btn_blue:active {
  box-shadow: none;
  transform: translateY(5px);
}

/* ボタン本体 */
.btn_green {
  -webkit-appearance: none;
  display: inline-block;
  padding: 0.2em 0.2em;
  background-color: #E0EFD8; /* 背景色 */
  box-shadow: 0 2px 0 #00B050; /* 影の太さ・色 */
  border-radius: 10px;
  font-size:110%;
  color: #00A54B;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
  transition: all 0.3s;
}

/* クリック時 */
.btn_green:active {
  box-shadow: none;
  transform: translateY(5px);
}

/* ボタン本体 */
.btn_purple {
  -webkit-appearance: none;
  display: inline-block;
  padding: 0.2em 0.2em;
  background-color: #ededed; /* 背景色 */
  box-shadow: 0 2px 0 #7030a0; /* 影の太さ・色 */
  border-radius: 10px;
  font-size:110%;
  color: #7030a0;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
  transition: all 0.3s;
}

/* クリック時 */
.btn_purple:active {
  box-shadow: none;
  transform: translateY(5px);
}

/* ボタン本体 */
.btn_orange {
  -webkit-appearance: none;
  display: inline-block;
  padding: 0.2em 0.2em;
  background-color: #fbe5d6; /* 背景色 */
  box-shadow: 0 2px 0 #ed7d31; /* 影の太さ・色 */
  border-radius: 10px;
  font-size:110%;
  color: #ed7d31;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
  transition: all 0.3s;
}

/* クリック時 */
.btn_orange:active {
  box-shadow: none;
  transform: translateY(5px);
}