/*メイン*/

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

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

.logo {
  height: 70px;
  padding-top: 10px;
}

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



  #timerControls button {
    margin: 0 5px;
  }

 



  /* ボタン中央配置 */

.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;
}

/*==================
 ハンバーガーメニュー
==================*/

.menu-btn{

    position:fixed;

    top:30px;

    right:40px;

    z-index:999;

    font-size:34px;

    background:none;

    border:none;

    color:white;

    cursor:pointer;

}

.side-menu {
  position: fixed;
  top: 0;
  right: -370px;  
  width: 300px;
  height: 100vh;
  background: rgb(37, 50, 58);
  z-index: 9999;
  transition: right 0.4s ease;

  padding: 40px 30px;   /* ←これ！ */
}

.side-menu.open{

  right:0;

}

.side-menu a{

    display:block;

    color:white;

    text-decoration:none;

    margin:25px 0;

    font-size:20px;

    font-family:"Kosugi";

}

.side-menu span{

    display:block;

    font-size:13px;

    opacity:.5;

}

.close-btn{
    background:none;
    border:none;
    color:white;
    font-size:30px;
    font-family:"Play", sans-serif;
    cursor:pointer;

    margin-bottom:40px;
}


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

 html, body {
  overflow-x: hidden;
  }


  

  /* ------------------------------
     ロゴ・メモ
  ------------------------------ */
  .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;
  }



}