body {
  margin: 0;
  padding: 0 20vw;
  background-color: #fff;
}

/* 画面幅900px以下の場合に適用 */
@media (max-width: 900px) {
  body {
    padding: 0;
  }

  #memo-post {
    position: sticky;
    top: 0;

    display: block !important;

    padding: 1rem;

    background-color: rgba(144, 185, 255, 0.235);
    border-radius: 15px;
  }

  /* ボタンのレイアウトを変更 */
  #clear,
  #add {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    margin-top: 0.8rem;
    height: 4rem;
  }
  /* ショートカットキーを非表示 */
  #clear p:nth-child(2) {
    display: none;
  }
  #add p:nth-child(2) {
    display: none;
  }
  /* レイアウトの調整 */
  #clear {
    margin-top: 0.5rem;
  }
  textarea {
    width: 100%;
    border-radius: 0.5rem;
    outline: 0px;
  }
}

main {
  background-color: #ffffff;
}
h1 {
  text-align: center;
}

/* メモ投稿エリア */
#memo-post {
  position: sticky;
  top: 0;

  display: flex;
  flex-flow: row nowrap;

  padding: 1rem;

  background-color: rgba(144, 185, 255, 0.235);
  border-radius: 15px;
}

#memo-post input[type="text"] {
  width: 100%;
}

button {
  white-space: nowrap;
  margin: 0.1rem;
}

article {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

/* textareaにfocusした時のborderを非表示に */
textarea {
  outline: 0px;
  width: 100%;
}

/*　メモセクション */
article section {
  margin: 0.5rem;
  padding: 1rem;

  display: flex;
  align-items: center;
  flex-flow: row nowrap;

  border: 1px solid #626dd2;
  border-radius: 0.2rem;

  box-sizing: border-box;
}

.memo {
  width: 100%;
}

/* メモのテキスト */
article section p {
  margin: 0;
  /* 改行コードを反映 */
  white-space: pre-wrap;
}

article section button {
  padding: ;
}