/* スマートフォン用のレイアウト */
@media only screen and (max-width: 768px) {
  body {
    background-color: #ff9c9c; /* バックグラウンドカラーを変更 */
  }
  #container {
    flex-direction: column; /* コンテナ内の要素を縦に配置 */
  }
  #timerContainer,
  #left {
    width: auto; /* 画面の幅いっぱいに設定 */
  }
  #timerContainer {
    padding: 20px; /* パディングを調整 */
  }
  .timer {
    margin: 20px 0; /* タイマーとボタンの間隔を調整 */
    font-size: 60%; /* フォントサイズを60%に縮小 */
  }
  button {
    width: 100px; /* ボタンの幅を調整 */
    padding: 10px;
    margin: 10px auto 10px;
}
  #left {
    order: 2; /* タイマーコンテナを下に移動 */
  }
  #memoContainer {
    height: auto; /* 高さを自動に設定 */
    padding: 10px; /* パディングを調整 */
  }
  #memoLog {
    max-height: none; /* 最大高さを解除 */
    overflow-y: auto; /* 縦方向のスクロールを設定 */
  }
  #form-bottom {
    position: static; /* フォーム位置を解除 */
    margin: 0; /* マージンを解除 */
  }
  #memoInput {
    font-size: 60%; /* フォントサイズを60%に縮小 */
  }
  .emojibutton button {
    font-size: 60%; /* フォントサイズを60%に縮小 */
    margin: 5px;
    padding: 5px;
  }
  .day {
    height: auto; /* 高さを自動に設定 */
    margin-top: 10px;
  }
  #watchContainer {
    font-size: 30px;
  }
  #timer {
    font-size: 40px;
  }
}