/*メイン*/

body {
    margin: 0;
    /*overflow: hidden;*/
    background:  #99afb0;
    color: white;
    font-family: sans-serif;
  }

.top-bar {
  position: absolute;
  top: 20px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 20;
  height: 100px;   /* 好きな大きさに調整 */
  width: auto;
}

.logo {
  height: 160px;
  padding-top: 90px;
}

.memo {
  height: 100px;
  padding-top: 35px;
}



  #timerControls button {
    margin: 0 5px;
  }

  /*タイマー設定*/
  #timerBox {
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 14px 20px ;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    font-size: 20px;
    color: white;
     z-index: 9999;
  }
  #timeSettings {
    margin-top: 3px;
    font-size: 16px;
  }
  #timeSettings div {
    margin-bottom: 6px;
  }
  #timeSettings button {
    width: 24px;
    height: 24px;
    margin: 0 4px;
  }


/*タイマービジュアル最新*/

#timeDisplay {
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  color: rgb(255, 255, 255) !important;
  font-size: 60px;   /* ← かなり大きく */
  font-weight: bold;
  letter-spacing: 2px;
}

.timer-modern {
  /*background: #eaf6ef;*/
  border-radius: 20px;
  padding: 18px 22px;
}

.timer-modern #timeDisplay {
  font-size: 65px;
  font-weight: 700;
  color: #246A84;
  letter-spacing: 1px;
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.timer-modern #timerControls button {
  background: none;
  border: none;
  font-size: 37px;
  color: #246A84;
}

/* ホバー */
#playPauseBtn:hover,
#resetBtn:hover {
  opacity: 0.85;
}

/* 押したとき */
#playPauseBtn:active,
#resetBtn:active {
  transform: scale(0.96);
}


/* =========================
   ＋ − ボタン
========================= */

/* =========================
   再生 & リセット（大きく）
========================= */

#playPauseBtn,
#resetBtn {
  background-color: #246A84;
  color: white;
  border: none;

  padding-bottom:  8px;
  font-size: 45px;      /* ← 文字大きく */
  font-weight: bold;

  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}




#minLabel,
#secLabel{
  font-size: 20px;
}

#playPauseBtn:hover,
#resetBtn:hover {
  opacity: 0.85;
}

#playPauseBtn:active,
#resetBtn:active {
  transform: scale(0.96);
}

#minUp,
#minDown,
#secUp,
#secDown {
  background-color: white;
  color: #246A84;
  border: none;
  width: 45px;
  height: 45px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.2s;
}

/* ホバー */
#minUp:hover,
#minDown:hover,
#secUp:hover,
#secDown:hover {
  background-color: #f0f0f0;
}

/* 押したとき */
#minUp:active,
#minDown:active,
#secUp:active,
#secDown:active {
  transform: scale(0.9);
}






  /* ボタン中央配置 */

.sound-wrapper {
  position: absolute;
  top: 40%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  /*z-index: 10;*/
}

.sound-row {
  display: flex;
  justify-content: center;
  gap: 35px;
}

.sound-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: 0.3s;
}




  /* アイコンボタン */

  .sound-btn img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  transition: 0.3s;
}

  .sound-btn:hover img{
    transform: scale(1.1);
  }


 /*ボタン再生後の見た目*/

.sound-btn.sound-active {
  filter: brightness(1.2) opacity(0.6);
  transition: 0.2s;
}






  /* 音量調整部分 */
  #volumePanel {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*background: rgba(0,0,0,0.6);*/
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.volume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 20px;
  font-family: "Kosugi", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.volume-row button {
  background: #ff6666;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: white;
  font-size: 14px;
}


/* ==============================
   スマホ対応（最大幅430px以下）
============================== */
@media screen and (max-width: 430px) {

 html, body {
  overflow-x: hidden;
  }


  /* ------------------------------
     タイマー
  ------------------------------ */
  #timerBox {
    top: 5px;
    right: 5px;
    padding: 5px 9px;
    font-size: 10px;
    border-radius: 12px;
    
  }

  #timerBox {
  position: fixed;
  /*top: 12px;*/
  /*right: 12px;*/
  z-index: 9999;
 }

  #timeDisplay {
    font-size: 15px; /* 少し小さく */
  }

  #timerControls button {
    font-size: 30px;
  }

  #minUp,#minDown,#secUp,#secDown {
    width: 15px;
    height: 15px;
    font-size: 12px;
  }

  #minLabel,#secLabel {
    font-size: 12px;
  }


  /* ------------------------------
     ロゴ・メモ
  ------------------------------ */
  .top-bar {
    flex-direction: column;   /* 縦並びにする */
    align-items: flex-start;  /* 左揃えにする */
    gap: 5px;
    height: auto;
    top: 3px;
    left: 15px;
  }

  .logo {
    height: 80px;
    padding-top: 15px;
    padding-bottom: 5px;
  }

  .memo {
    height: 80px;
    padding-top: 5px;

  }

  /* ------------------------------
     サウンドボタン配置
  ------------------------------ */
  .sound-wrapper {
    top: 35%; /* 少し上げる */
    gap: 20px;
  }

  .sound-row {
    justify-content: center;
    gap: 20px;
  }

  /* 1行4個にするためにflex-wrapを使う */
  .sound-wrapper .sound-row {
    flex-wrap: wrap;
  }

  .sound-btn {
    margin-bottom: 15px; /* 行間スペース */
  }

  .sound-btn img {
    width: 60px;
    height: 60px;
  }



  #volumePanel {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: auto;
  z-index: 9999;
  }



}