@charset "utf-8";

/* 画面全体のスタイル */
body {
  background: #ffc0cb;
  font-size: 36px;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic monospace;
}

/* ボタンのスタイル */
button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid;
  box-sizing: border-box;
  background: #eeeeee;
  font-size: 36px;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic monospace;
  cursor: pointer;
}

/* ボタン押下時のスタイル */
button:active {
  background: #cccccc;
}

/* ボタン非活性時のスタイル */
button:disabled {
  border: 2px solid;
  background: #cccccc;
  color: #000000;
  pointer-events: none;
}

/* インプットタグのスタイル */
input {
  display: flex;
  box-sizing: border-box;
  font-size: 36px;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic monospace;
}

/* 画面端の余白 */
.container {
  margin: 40px 140px 0;
}

/* 画面上部のスタイル */
.top-area {
  display: flex;
  justify-content: space-between;
  height: 68px;
  width: 1680px;
}

/* ユーザー名テキストボックスのスタイル */
#user-name {
  height: 64px;
  width: 480px;
  border: 4px solid;
}

/* 購入履歴ボタンのスタイル */
#history-button {
  width: 200px;
  font-size: 28px;
}

/* 商品エリアのスタイル */
.item-information-area {
  display: block;
  width: 1380px;
  padding: 24px 140px 0;
}

/* 商品行のスタイル */
.item-row {
  display: flex;
  height: 72px;
  margin-bottom: 44px;
}

/* 商品ラベルのスタイル */
.item-name {
  display: flex;
  align-items: center;
  width: 372px;
  height: 72px;
  padding-left: 8px;
  border: 2px solid;
  background: #ffffff;
}

/* 単価ラベルのスタイル */
.item-price {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 140px;
  height: 72px;
  margin: 0 12px;
  padding-right: 8px;
  border: 2px solid;
  background: #ffffff;
}

/* 「×」, 「個」, 「円」, 「合計」ラベルのスタイル */
.multiply, .piece, .yen, .character-total {
  display: flex;
  align-items: center;
  margin: 0 16px;
}

/* 個数テキストボックスのスタイル */
.count-item {
  align-items: center;
  width: 108px;
  height: 72px;
  margin-left: 12px;
  border: 4px solid;
  text-align: center;
}

/* 増減ボタンエリアのスタイル */
.count-button-area {
  display: block;
  position: relative;
  top: -4px;
}

/* 増減ボタンのスタイル */
.count-button {
  width: 48px;
  height: 34px;
  margin: 4px;
  padding: 0;
  font-size: 20px;
}

/* 小計テキストボックスのスタイル */
.subtotal {
  width: 260px;
  height: 72px;
  margin-left: auto;
  border: 2px solid;
  font-size: 40px;
  text-align: end;
}

/* 画面下部のスタイル */
.bottom-area {
  display: flex;
  height: 192px;
  width: 1380px;
  margin: 0 140px;
}

/* 備考テキストボックスのスタイル */
#comment {
  width: 628px;
  border: 4px solid;
  font-size: 28px;
  line-height: 1.2;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic monospace;
  resize: none;
}

/* 合計・ボタンエリアの余白 */
.total-button-area {
  margin-left: auto;
}

/* 合計エリアのスタイル */
.total-area {
  display: flex;
}

/* 「合計」ラベルのスタイル */
.total-label {
  display: flex;
  align-items: center;
  margin: 0 16px 0 auto;
}

/* 合計テキストボックスのスタイル */
#total {
  width: 260px;
  height: 72px;
  margin-left: 20px;
  border: 2px solid;
  font-size: 40px;
  text-align: end;
}

/* ボタンエリアのスタイル */
.button-area {
  display: flex;
  height: 128px;
  padding-top: 48px;
}

/* クリアボタンのスタイル */
#clear-button {
  width: 212px;
  height: 72px;
  margin-right: 40px;
}

/* 計算ボタンのスタイル */
#calc-button {
  width: 212px;
  height: 72px;
  margin-left: auto;
}

/* 購入ボタンのスタイル */
#buy-button {
  width: 292px;
  height: 120px;
  margin: 24px 672px 0;
  font-size: 58px;
}

/* ダイアログのスタイル */
dialog {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 1400px;
  background: #ffffff;
  padding: 20px;
  border-radius: 24px;
}

/* ダイアログのメッセージのスタイル */
#dialog-message {
  display: flex;
  justify-content: center;
  margin: 40px;
  border-bottom: 2px dashed #000000;
}

/* ダイアログのボタンエリアのスタイル */
.dialog-button-area {
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 40px 240px;
}

/* ダイアログのボタンのスタイル */
.dialog-button {
  height: 80px;
  width: 240px;
  border-radius: 40px;
}

/* アラートを表示するときの「やーめた」ボタンのスタイル */
.is-alert {
  display: none;
}