.elementor-42344 .elementor-element.elementor-element-29522545{--display:flex;--z-index:100;}.elementor-42344 .elementor-element.elementor-element-7fd5c457{z-index:1000;}/* Start custom CSS for html, class: .elementor-element-7fd5c457 *//* タイマーのスタイル */
.timer {
  font-size: 48px;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-bottom: 20px;
  border: 2px solid #aaa;
}

/* ボタンコントロール部分のスタイル */
.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

/* 各ボックスのスタイル */
.box {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ボタンのスタイル */
button {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #99bfad; /* テーマカラー */
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #7ea496; /* ボーダーもテーマカラーに近い色 */
}

button:hover {
  background-color: #7ea496; /* ホバー時の色 */
}

/* ボタンのアクティブスタイル */
button:active {
  background-color: #5d877b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* リセットボタンの色 */
.reset {
  background-color: #e08eba; /* リセットボタンのテーマカラー */
  border: 2px solid #c0779c;
}

.reset:hover {
  background-color: #c0779c;
}

.reset:active {
  background-color: #a06183;
}/* End custom CSS */