body{
  margin:0;
  font-family:sans-serif;
  background:#111;
  color:white;
}

.container{
  display:flex;
  height:100vh;
}

/* サイドバー */
.sidebar{
  width:220px;
  background:#000;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sidebar button{
  padding:12px;
  font-size:16px;
  background:#333;
  border:none;
  color:white;
  cursor:pointer;
}

/* 金額ボタンエリア */
#chargeButtons{
  display:none;  /* 初期非表示 */
  margin-top:20px;
  flex-direction:column;
  gap:10px;
}

/* 金額ボタン */
#chargeButtons button{
  width:100%;
  padding:14px;
  font-size:18px;
  background:#ff4b4b;
  color:white;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:0.2s;
}

/* ホバー */
#chargeButtons button:hover{
  transform:scale(1.05);
}

/* メイン */
.main{
  flex:1;
  padding:20px;
  text-align:center;
}

/* トップページ */
#topArea{
  display:block;
  text-align:center;
  margin-top:40px;
}

/* メニュー */
#drinkArea{
  display:none;
  overflow:hidden;
}

#foodArea {
  display:none; /* 初期非表示 */
  overflow:hidden;
  margin-top:20px;
}

#foodSlider {
  display:flex;
  transition:0.3s;
}

.foodPage {
  min-width:100%;
  display:flex;
  justify-content:center;
}

.foodPage img {
  width:90%;
  max-width:600px;
}

#foodPageBar {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.foodDot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#666;
}

.foodDot.active {
  background:white;
}

#menuSlider{
  display:flex;
  transition:0.3s;
}

.menuPage{
  min-width:100%;
  display:flex;
  justify-content:center;
}

.menuPage img{
  width:90%;
  max-width:600px;
}

/* ページバー */
#pageBar{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.pageDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#666;
}

.pageDot.active{
  background:white;
}

/* QR */
.qr{
  width:300px;
  margin-top:20px;
}

#ruleArea,
#qrArea{
  display:none;
}

#ruleArea {
  display:none;
  text-align:center;
  margin-top:20px;
}

#ruleArea img {
  width:90%;
  max-width:600px;
  border-radius:8px;
}