/* ==========================================
   1. スマホでの横スクロール（はみ出し）防止の全体設定　26/9/8
   ========================================== */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important; /* 横スクロールを強制的にカット */
}

/* ページ内の画像やテーブルが画面幅を超えないように自動縮小 */
img, table, iframe, div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================
   2. PC表示（横並びメニュー）
   ========================================== */
#dt_area_menu {
  display: flex;
  justify-content: space-around;
  background-color: #ffeedd; /* 淡いオレンジ背景 */
  padding: 0;
  margin: 0;
  border-top: 2px solid #ffa500;
  border-bottom: 2px solid #ffa500;
  box-sizing: border-box;
  width: 100%;
}

#dt_area_menu div {
  flex: 1;
  text-align: center;
}

#dt_area_menu div a {
  display: block;
  padding: 12px 10px;
  color: #333333; /* 黒文字 */
  text-decoration: none;
  font-weight: bold;
}

#dt_area_menu div a:hover {
  background-color: #ffe0c0;
}

/* ==========================================
   3. スマホ用 3本線ボタン（左寄せ）
   ========================================== */
.mobile-menu-btn {
  display: none;
  background-color: #ffeedd;
  color: #333333;
  border: none;
  border-top: 2px solid #ffa500;
  border-bottom: 2px solid #ffa500;
  padding: 12px 20px;
  font-size: 18px;
  width: 100%;
  text-align: left; /* 左寄せ */
  cursor: pointer;
  font-weight: bold;
  box-sizing: border-box;
}

/* ==========================================
   4. スマホ表示時（画面幅768px以下）の設定 
   ========================================== */
@media screen and (max-width: 768px) {
  .mobile-menu-btn {
    display: block;
  }

  #dt_area_menu {
    display: none;
    flex-direction: column;
    border-top: none;
    width: 100%;
  }

  #dt_area_menu.active {
    display: flex;
  }

  #dt_area_menu div {
    width: 100%;
    text-align: left;
  }

  #dt_area_menu div a {
    border-top: 1px solid #ffd8b3;
    text-align: left;
    padding-left: 20px;
  }
}