/* stopwatch.css */

/* ベース設定 */
body {
  font-family: "Noto Sans JP", sans-serif, "MS Pゴシック";
  text-align: center;
  margin-top: 50px;
  background-color: #f5f5f5;
}

html, body {
  width: 100%;           /* ビューポート全体幅 */
  max-width: 1200px;     /* 1200px以上は広がらない */
  margin: 0 auto;        /* 横中央寄せ */
}

/* ボタン共通スタイル */
button {
  background-color: #fff;
  border: solid 2px #2f4f4f;
  color: #2f4f4f;
  padding: 10px 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s;
}
button:hover:not(:disabled) {
  background-color: #66ccff;
  color: #2f4f4f;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: default;
}

/* スタート/ストップ実行中 */
#toggle.running {
  background-color: #f66;
  color: #fff;
}
#toggle.running:hover {
  background-color: #c33;
}

/* 表示部 */
#display {
  font-size: 15vw;
  margin-bottom: 20px;
  line-height: 1;
  color: #008000;
  left: 50%;                /* 画面幅の中央 */
}


}
#hms,
#ms {
  display: inline-block;
  vertical-align: top;
}
#hms {
  width: 8ch;
}
#ms {
  width: 4ch;
  font-size: 24px;
}
#display .small {
  font-size: 7.5vw;
}

.time-ms {
  font-size: 0.6em;
  padding-left: 2px;   /* 秒との間隔を少し空ける */
}

/* ボタンエリア */
#buttons {
  margin-bottom: 20px;
}
#buttons button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 3em;
}

/* ラップ一覧 */
#laps-container {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
#laps {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 45vh;
  overflow-y: auto;
}
/* ヘッダー行 */
#laps .lap-header {
  font-weight: bold;
  border-bottom: 2px solid #2f4f4f;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
}
/* 個別ラップ */
#laps li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
  font-size: 1.1em;
}

.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: #b0e0e6;
}