@charset "utf-8";

body {
  background-color: #d3381c;
}

h1 {
  text-align: center;
}

.screen {
  width: 1000px;
  height: 495px;
  margin: 10px auto;
  position: relative;
  display: flex;
  overflow: hidden;
}

.topping_area {
  background-color: #cccccc;
  width: 25%;
  height: 495px;
}

.ramen_area {
  background-color: #954e2a;
  width: 55%;
  height: 495px;
}

.guest_area {
  background-color: #6c3920;
  width: 25%;
  height: 495px;
}

/* 画像サイズ */
.topping img {
  width: 100px;
  height: auto;
  transform: scale(1, 1);
}

.topping {
  cursor: pointer;
}

/* 店員 */
#tenin {
  position: absolute;
  z-index: 90;
}

/* 各トッピング */
#nori {
  position: absolute;
  z-index: 100;
  top: 130px;
  left: 15px;
}

#tamago {
  position: absolute;
  z-index: 100;
  top: 130px;
  left: 130px;
}

#cha-shu {
  position: absolute;
  z-index: 100;
  top: 220px;
  left: 15px;
}

#corn {
  position: absolute;
  z-index: 100;
  top: 220px;
  left: 130px;
}

#menma {
  position: absolute;
  z-index: 100;
  top: 320px;
  left: 15px;
}

#naruto {
  position: absolute;
  z-index: 100;
  top: 315px;
  left: 130px;
}

#moyashi {
  position: absolute;
  z-index: 100;
  top: 410px;
  left: 15px;
}

#negi {
  position: absolute;
  z-index: 100;
  top: 410px;
  left: 130px;
}

/* ラーメンエリア */
#ramen {
  position: absolute;
  z-index: 50;
  left: calc(50% - 200px);
  top: calc(50% - 210px);
}

/* ボタン */
.btn_box {
  text-align: center;
}

#btn_comp, #btn_reload {
  width: 200px;
  height: 40px;
  font-size: 20px;
}

/* お客さんエリア */
#guest {
  position: absolute;
  z-index: 25;
  left: calc(100% - 238px);
  top: calc(100% - 260px);
}