@charset "utf-8";
/* ブラウザについているデフォルトの余白をなくす */
body {
  margin: 0;
}

.user-section {
  /* 幅を指定するために要素をblockにする */
  display: block;
  /* 上下に余白を8pxずつつけて中央揃えにする */
  margin: 8px auto;
  /* テキストボックスを配置するための幅を全体の60%にする */
  width: 60%;
  /* 中央揃えにする */
  text-align: center;
}

#user {
  /* テキストボックスの幅をuser-sectionの幅の60%にする */
  width: 60%;
  /* 文字を左揃えにする */
  text-align: left;
}

.history-btn-section {
  /* 画面全体の80%の幅にする */
  width: 80%;
  /* 要素の右端に寄せる */
  text-align: right;
}

.product-section {
  /* 子要素を横並びにする */
  display: flex;
  /* 子要素をコンテナ内で中央に寄せる */
  align-items: center;
  /* 子要素を中央揃えにする */
  justify-content: center;
  /* 要素の内側に余白を20pxつける */
  padding: 20px;
}

.product {
  /* 左に余白を100pxつける */
  margin-left: 100px;
}

.price {
  /* 要素の最小幅を50pxにする */
  min-width: 50px;
  /* 要素を右揃えにする */
  text-align: right;
  /* 要素の左に余白を100pxつける */
  margin-left: 100px;
}

.multiplier {
  /* 要素の左に余白を100pxつける */
  margin-left: 100px;
}


.counter {
  /* 子要素を自由に配置できるようにする */
  display: flex;
  /* 子要素を縦に配置する */
  flex-direction: column;
  /* 左に余白を100pxつける */
  margin-left: 100px;
  width: 4em;
}

.plus,
.minus {
  /* ボタンの幅を4文字分にする */
  width: 4em;
  /* paddingとborderを考慮に入れる */
  box-sizing: border-box;
}

.item {
  width: 4em;
  box-sizing: border-box;
  text-align: right;
}

.item::-webkit-outer-spin-button, 
.item::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

.subtotal {
  margin-left: 200px;
}

.footer-section {
  display: flex;
  align-items: flex-end;
}

#request {
  width: 30%;
  line-height: 1.5;
  height: 8em;
  margin-left: 100px;
}

.btn-section {
  display: flex;
  gap: 50px;
  justify-content: center;
  align-items: flex-end;
  margin-left: 200px;
  white-space: nowrap;
}

.calc-section {
  text-align: right;
  margin-left: 200px;
  margin-bottom: 10px;
}

.total-section {
  display: flex;
  width: 70%;
  justify-content: flex-end;
  align-items: center;
}

.subtotal,
#total {
  text-align: right;
}

#historyBtn,
#buyBtn,
#clearBtn,
#calcBtn {
  padding: 5px 10px;
}