@charset "UTF-8";
/* CSS Document */

/*カプセル型のボタン*/
.btn-container {
  text-align: center; /* 中にあるボタン（インラインブロック要素）を中央に寄せます */
  margin-top: 10px; /* 必要に応じて、上の要素との間に隙間を作ります */
  margin-bottom: 50px; /* 必要に応じて、下の要素との間に隙間を作ります */
}

.btn-capsule-outline {
  display: inline-block;
  padding: 14px 32px; /* ボタンの内側の余白（上下、左右） */
  background-color: #ffffff; /* ボタンの下地（白色） */
  color: #000000; /* 中に入る文字の色（黒色） */
  text-decoration: none; /* リンクの下線を消す */
  font-weight: bold; /* 文字を太字にする */
  font-size: 18px;

  /* 周囲の黒いアウトライン（線の太さ 2px、直線、黒色） */
  border: 2px solid #000000;

  /* プセル型にするための設定（大きな数値を指定） */
  border-radius: 50px;

  /* マウスを乗せたとき（ホバー時）の変化を滑らかにする設定 */
  transition:
    background-color 0.3s,
    color 0.3s;
}

.btn-capsule-outline:visited,
.btn-capsule-outline:link {
  color: #000000; /* 文字色を黒のままにします */
  background-color: #ffffff; /* 背景色を白のままにします */
}

/* マウスを乗せたとき（ホバー時）の見た目 */
.btn-capsule-outline:hover {
  background-color: #000000; /* 背景を黒色に変えます */
  color: #ffffff; /* 文字を白色に変えます（反転デザイン） */
  cursor: pointer; /* マウスカーソルを指マークにします */
}