body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
font-family: "Noto Sans JP, sans-serif,MS Pゴシック" ;
}

.slider-inputs {
  display: inline-flex;       /* インライン幅をコンテンツに合わせる */
  justify-content: center;    /* 子要素を中央揃え */
  gap: 20px;                  /* グループ間の隙間 */
  margin: 0 auto 20px;        /* 上:0、左右:自動、下:20px で中央配置 */
}

.slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-group label {
  font-size: 1.5em;
  margin-bottom: 8px;
}

.slider-group input[type="range"] {
  width: 200px;
}

.buttons {
  margin-bottom: 20px;
}

#startButton,
#stopButton,
#resetButton {
  font-size: 3em;
  padding: 10px 20px;
  margin: 0 10px;
}

#countdown {
  font-size: 15em;
  margin-top: 20px;
  color: #008000;
  pointer-events: none;
}

/* モーダルの共通スタイル */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #f6bfbc;
  padding: 20px 30px;
  border-radius: 64px;
  text-align: center;
  font-size: 400%;
}

#closeModal {
  margin-top: 15px;
  padding: 8px 16px;
  font-size: 250%;
  border-radius: 32px;
}

/* モーダル内の追記テキストを小さく・改行 */
.small-text {
  display: block;
  font-size: 0.8em;
  margin-top: 8px;
  color: #555;
}

.Clockbutton{
  background-color: #fff;
  border: solid 2px #2f4f4f;
  color: #2f4f4f;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.Clockbutton:hover {
  color: #2f4f4f;
  background-color: #66ccff;
}

/* 汎用：非表示用クラス */
.hidden {
  display: none;
}

/* 開閉ボタンのスタイル調整 */
#toggleSettings {
  position: absolute; /* 絶対位置指定 */
  left: 50%;                /* 画面幅の中央 */
  transform: translateX(-50%);
  top: 15px;                /* 上端から20px 下に配置だお */
  margin-bottom: 20px;
  font-size: 1.2em;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#toggleSettings.moved-up {
  transform: translateY(-40px); /* お好みで上下量を調整してください */
}

#countdown {
  transition: font-size 0.2s ease;
  transition: font-size 0.3s ease, transform 0.3s ease;
}
#countdown.enlarged {
  font-size: 20em; /* お好みで調整 */
  transform: translateY(-130px);
}

/* ファイル選択を幅100%、左寄せに */
.file-input-container {
  width: 100%;

}

.file-input-container label {
  font-size: 1.2em;

}

.file-input-container input[type="file"] {
  margin-top: 8px;
}