.card p {
  margin: 4px 0;
  line-height: 1.2;
}

h3 {
  margin: 5px 0;
}

/* 全体の箱の計算を正しくする（おまじない） */
* {
  box-sizing: border-box;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding: 10px; /* 端末の端に密着しないよう余白を追加 */
}

.modalContent {
  background: white;
  padding: 20px;
  border-radius: 15px;
  width: 90%;      /* 幅を少し広めに確保 */
  max-width: 400px; /* 最大幅を調整 */
  text-align: center;
  /* 縦が短いスマホでスクロールできるようにする */
  max-height: 80vh; 
  overflow-y: auto;
}

#helpBtn {
  /* 「ついてくる」のをやめるには static か absolute にします */
  /* ページの最後に配置したい場合は position 指定を消すか、親要素を relative にして absolute を使います */
  display: block;
  margin: 20px auto; /* ページ下部で中央寄せにする例 */
  
  /* ボタン自体のレスポンシブ対応 */
  max-width: 100%;
  padding: 10px 20px;
  cursor: pointer;
}

#metronome {
  display: block;
  margin: 20px auto; /* ページ下部で中央寄せにする例 */
  
  /* ボタン自体のレスポンシブ対応 */
  max-width: 100%;
  padding: 10px 20px;
  cursor: pointer;

}