body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-align:center;
  background:#ffffff;
  color:#222;
 
}

h1{
  font-weight:500;
  letter-spacing:2px;
  margin-bottom:30px;
  color:#111;
}

#time{
  font-size:72px;
  font-weight:300;
  margin:30px 0;
  letter-spacing:3px;
  color:#000;
margin-top:-27.5px;
margin-bottom:10px
}

input{
  font-size:20px;
  width:120px;
  text-align:center;
  padding:10px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  color:#111;
  outline:none;
  transition:0.3s;
 border-radius:8px;
}

input:focus{
 border-color:#8fc79b;/* ライトグリーン */

}

button{
  font-size:16px;
  padding:10px 22px;
  margin:8px;
  border:1px solid #ccc;
  border-radius:8px;
  background:#f8f8f8;
  color:#333;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  background:#eee;
}

button:nth-of-type(1){
  border-color:#5aa76b;
  color:#2f6f3c;
}
button:nth-of-type(1):hover{
  background:#e3f3e7;
  color:#2f6f3c;
}

.timer-note{
  font-size:13px;
  color:#666;
  margin-top:30px;
  line-height:1.6;

text-align:left; 

}
.ceteryo{text-align:left!important;}

/* 停止（通常時：落ち着いた上品赤） */
button:nth-of-type(2){
  border-color:#b33a3a;
  color:#b33a3a;
  background:#f8f8f8;
}

/* 停止（ホバー時：やわらかな赤背景） */
button:nth-of-type(2):hover{
  background:#f3e1e1;
  color:#b33a3a;
  border-color:#b33a3a;
}
/* リセット（通常） */
button:nth-of-type(3){
  border-color:#ccc;
  color:#555;
  background:#f8f8f8;
}

/* リセット（ホバー） */
button:nth-of-type(3):hover{
  background:#eeeeee;
  border-color:#999;
  color:#333;
}
input::placeholder{
  color:#999;
}