@charset "utf-8";

/* ユーザーテキストボックスのレイアウト */
.user {
  margin-top: 32px;
  margin-left: 250px;
  width: 450px;
}
/* 商品を均一に横に並べるためのフレックスボックス */
.fruitsContainer {
  margin-bottom: 15px;
  display: flex;
  justify-content:center
}
/* 商品のスタイル */
.fruit {
  text-align: center;
  margin: 20px;
  width: 200px;
}
/* 単価を均一に横に並べるためのフレックスボックス */
.priceContainer {
  display: flex;
  justify-content:center
}
/* 単価のスタイル */
.price {
  text-align: center;
  margin: 20px;
  width: 200px;
}
/* ×を均一に横に並べるためのフレックスボックス */
.timesContainer {
  margin-bottom: 30px;
  display: flex;
  justify-content:center
}
/* ×のスタイル */
.times {
  text-align: center;
  margin: 20px;
  width: 200px;
}
/* 減ボタン、個数テキストボックス、増ボタンを均一に横に並べるためのフレックスボックス */
.upDown {
  width: 1520px;
  margin-bottom: 30px;
  display: flex;
  justify-content:center
}
/* 減ボタンのスタイル */
.minus {
  margin-left: 73px;
  border-radius: 100%;
}
/* 増ボタンのスタイル */
.plus {
  margin-right: 73px;
  border-radius: 100%;
}
/* インプットタグについている元の増減ボタンを消す */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* 個数テキストボックスのスタイル */
.unit{
  width: 45px;
  height: 18px;
}
/* 小計を均一に横に並べるためのフレックスボックス */
.subtotalContainer {
  margin-bottom: 30px;
  margin-left: 85px;
  margin-right: 280px;
  width: 1260px;
  display: flex;
  justify-content:center
}
/* 小計のスタイル */
.subtotal {
  width: 100px;
  max-width: 100%;
  margin-left: 110px;
  margin-right: 5px;
}
/* 計算ボタン、合計テキストボックスを並べる */
.calcTotal {
  display: flex;
  justify-content: flex-end;
  margin-right: 210px;
}
/* 合計のスタイル */
.total {
  margin-bottom: 30px;
  margin-left: 243px;
  display: flex;
  justify-content:flex-end;
}
/* 計算、クリア、購入、購入履歴ボタンの位置の調整 */
.calcBtn,.clearBtn,.buyBtn,.buyHistoryBtn {
  margin-bottom: 30px;
  display: flex;
  justify-content:center
}
/* 計算、クリア、購入、購入履歴ボタンのスタイル */
.calc,.clear,.buy,.buyHistory {
  width: 180px;
}
/* 要望欄の位置を調整した */
.request {
  margin-bottom: 30px;
  display: flex;
  justify-content:center;
}
/* 要望欄のサイズをきめた */
.comment {
  width: 1100px;
}