@charset "UTF-8";
.hima-wrap {
  width: 90%;
  max-width: 600px;
  height: 200px;
  margin: 20px auto 40px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hima-button-red1 {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #c62828; /* メインの赤 */
  border: 1px solid #c62828;
  color: #fff;
  transition: all 0.2s;
}
.hima-button-red1:hover, .hima-button-red1:focus {
  background-color: #e53935; /* 少し明るい赤 */
  border-color: #e53935;
  color: #fff;
}
.hima-button-red1:active {
  background-color: #8e0000; /* 濃い赤 */
  border-color: #8e0000;
  color: #fff;
}
.hima-button-red1:disabled {
  opacity: 0.65;
  pointer-events: none;
}

.hima-button-red2 {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;
  background-color: #ff8a80; /* メインのパステル赤 */
  border: 1px solid #ff8a80;
  color: #333; /* 黒系の文字色で視認性アップ */
}
.hima-button-red2:hover, .hima-button-red2:focus {
  background-color: #ff5252; /* 濃い赤 */
  border-color: #ff5252;
  color: #fff; /* 背景が濃くなったら白文字に切り替え */
}
.hima-button-red2:active {
  background-color: #ff1744;
  border-color: #ff1744;
  color: #fff;
}
.hima-button-red2:disabled {
  opacity: 0.65;
  pointer-events: none;
}

.hima-button-red3 {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;
  background-color: #ff4d4d; /* メインのコーラルレッド */
  border: 1px solid #ff4d4d;
  color: #fff;
}
.hima-button-red3:hover, .hima-button-red3:focus {
  background-color: #ff3333; /* 濃い赤 */
  border-color: #ff3333;
  color: #fff;
}
.hima-button-red3:active {
  background-color: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
.hima-button-red3:disabled {
  opacity: 0.65;
  pointer-events: none;
}

.hima-button-red4 {
  display: block;
  width: 80%;
  margin: 30px auto;
  padding: 12px 24px;
  font-size: 20px;
  border-radius: 5px;
  transition: all 0.2s;
  background-color: #8b0000; /* メインの深紅 */
  border: 1px solid #8b0000;
  color: #ffd700; /* ゴールド文字 */
}
.hima-button-red4:hover, .hima-button-red4:focus {
  background-color: #a40000; /* 少し明るい深紅 */
  border-color: #a40000;
  color: #ffd700; /* ゴールド文字 */
}
.hima-button-red4:active {
  background-color: #5a0000; /* 濃い深紅 */
  border-color: #5a0000;
  color: #ffd700; /* ゴールド文字 */
}
.hima-button-red4:disabled {
  opacity: 0.65;
  pointer-events: none;
}