/* Base */
html,
body,
#explanatoryNote {
  font-family: sans-serif, "メイリオ";
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#map {
  display: inline-block;
  height: 100%;
  width: calc(100% - 460px);
  margin: 0;
  padding: 0;
}

/* 凡例 */
.infoArea {
  position: absolute;
  top: 64px;
  right: 0px;
}

#explanatoryNote {
  position: relative;
  margin: 10px 10px 0px 0px;
  background-color: #ffffff;
  border: solid 2px;
  border-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  color: #333333;
  z-index: 950;
  width: 150px;
  height: 720px;
}

ol {
  font-size: 16px;
  list-style: none;
  padding: 0px 10px;
}

ol li {
  font-size: 14px;
  padding-left: 40px;
  margin: 4px 0px;
  line-height: 36px;
  background: left top no-repeat;
  background-size: 36px;
}

/* アイコン（分野） */
#point_road { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/road.png); }
#point_train { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/train.png); }
#point_airport { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/airport.png); }
#point_harbor { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/harbor.png); }
#point_park { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/park.png); }
#point_waterworks { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/waterworks.png); }
#point_sewer { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/sewer.png); }
#point_river { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/river.png); }
#point_sabo { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/sabo.png); }
#point_coast { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/coast.png); }
#point_other { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/other.png); }

/* アイコン（線：未使用っぽいが元のまま残す） */
#line_road { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/line_road.png); }
#line_train { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/line_train.png); }
#line_coast { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/line_coast.png); }
#line_river { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/line_river.png); }
#line_sabo { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/line_sabo.png); }

/* アイコン（事業の状態） */
#point_road_on { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/road.png); }
#point_road_done { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/road_done.png); }
#point_road_effect { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/road_effect.png); }

#TimeStamp {
  font-size: 12px;
}

/* メニュー */
#menu {
  display: inline-block;
  height: 100%;
  width: 460px;
  padding: 0;
  margin: 0;
  vertical-align: top;
  overflow-y: auto;
}

#menu ul {
  padding: 0px;
  padding-inline-start: 0px;
}

#menu li {
  list-style-type: none;
  line-height: 61px;
  border-top: solid 1px gray;
}

.menuChild li {
  display: flex;
  min-height: 61px;
  padding: 10px 0px;
  align-items: center;
}

.menuChild li label {
  line-height: 1.4;
}

.title {
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  -ms-overflow-style: none;
}

.titleLogo {
  float: left;
  background: url(/sogoseisaku/region/inframiraimap/map/data/icon/pict1.gif);
  background-size: cover;
  width: 40px;
  height: 40px;
  margin-top: 4.5px;
}

.titleCaption {
  font-size: 1.3vw;
  color: rgba(64, 135, 200, 1);
  font-weight: bold;
  margin: 8px 0px 0px 0px;
}

.titleFooter {
  width: 100%;
  height: auto;
  margin: 0px;
}

.btn_mapInfo {
  cursor: pointer;
  border: 5px solid #2544c6;
  border-radius: 15px;
  display: block;
  width: auto;
  padding: 5px;
  box-sizing: border-box;
  background: #d0e5ff;
  color: #333;
  font-size: 1.2vw;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin-bottom: 8px;
}

#popup_mapInfo { display: none; }
.overlay_mapInfo { display: none; }

#popup_mapInfo:checked + .overlay_mapInfo {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
}

.window_mapInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 60vw;
  max-width: auto;
  min-height: auto;
  max-height: 80vh;
  padding: 32px;
  background-color: #fffae8;
  border-radius: 8px;
  align-items: center;
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

.close_mapInfo {
  cursor: pointer;
  position: absolute;
  top: 18px;
  right: 32px;
  font-size: 24px;
}

.menuFirst { margin: 0px; }
.menuFirst li { position: relative; }

.menuSecond { display: none; }
.menuThird { display: none; }

.menuParent1 {
  font-size: 12pt;
  background-color: rgba(68, 67, 89, 1);
}

.menuParent2 {
  font-size: 11pt;
  background-color: rgba(68, 67, 89, 1);
}

.menuChild { background-color: rgba(242, 242, 242, 1); }
.menuChild_plan { background-color: rgba(242, 242, 242, 1); }

.labelParent {
  cursor: pointer;
  padding: 0px 8px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
}

.labelParent_plan {
  cursor: pointer;
  padding: 0px 12px;
  color: white;
  font-weight: normal;
}

.labelChild {
  padding: 0px 8px;
  color: black;
}

.labelChild_plan {
  padding-left: 48px;
  color: rgb(0, 0, 222);
  text-decoration: none;
}

.firstLi input[type="checkbox"] { margin-left: 18px; }
.secondLi input[type="checkbox"] { margin-left: 36px; }
.thirdLi input[type="checkbox"] { margin-left: 54px; }

/* Leaflet */
.leaflet-container { background-color: rgba(169, 196, 223, 1); }

/* タイル画像のcssフィルター */
.leaflet-pane.leaflet-tile-pane { filter: saturate(20%); }

/* ポップアップ */
.popup_title {
  font-size: 16pt;
  font-weight: bold;
}
.popup_article { font-size: 11pt; }
.popup_image { text-align: center; }

#print_btn {
  position: absolute;
  right: 0px;
  padding: 3px 8px;
  background-color: white;
  border-radius: 0.6em;
}

/* 吹き出し */
#bubble {
  position: absolute;
  left: calc(18% + 30px);
  z-index: 9999;
  display: inline-block;
  max-width: 300px;
  color: #555;
  font-size: 16px;
  background: #ffffff;
  padding: 15px;
  border-radius: 15px;
  border: solid 2px #a1c095;
  cursor: pointer;
}

#bubble:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -26px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #fff;
  z-index: 2;
}

#bubble:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -29px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #a1c095;
  z-index: 1;
}

#bubble .close_mapInfo {
  top: 0;
  right: 5px;
}

/* Print */
@media print {
  #menu { visibility: hidden; }

  #map {
    margin: 0;
    padding: 0;
    height: 90vh;
    width: calc(100% - 460px);
    margin-top: 5vh;
  }

  #explanatoryNote { visibility: hidden; }
  .leaflet-control-layers { visibility: hidden; }
}

/* ===== Menu UI overrides (追加分) ===== */

/* 第1階層 */
.firstLi { background-color: #C2DCE2; }
.firstLi > .labelParent {
  font-size: 18px;
  font-weight: 700;
}

/* 第2階層 */
.secondLi { background-color: #E2F0F3; }
.secondLi > .labelParent {
  font-size: 16px;
  font-weight: 400;
}

/* 第3階層 */
.thirdLi { background-color: #f8feff; }
.thirdLi .labelChild { font-size: 15px; }

/* ===== Menu row height fix (61px) ===== */

/* 第1階層（firstLi）は li を固定せず、見出し行（input + label）だけ 61px にする */
.firstLi > input[type="checkbox"],
.firstLi > .labelParent,
.firstLi > .labelParent_plan {
  height: 61px;
  vertical-align: middle;
}

.firstLi > .labelParent,
.firstLi > .labelParent_plan {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: normal;
}

/* 第2階層（menuParent2配下の secondLi）は li を固定せず、見出し行だけ 61px */
.menuParent2 > .secondLi > input[type="checkbox"],
.menuParent2 > .secondLi > .labelParent {
  height: 61px;
  vertical-align: middle;
}

.menuParent2 > .secondLi > .labelParent {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: normal;
}

/* 第2階層の「単発リスト」（分野など：menuChild配下）は行そのものを 61px 固定してOK */
.menuChild > li {
  min-height: 61px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

/* 第3階層（thirdLi：menuChild配下）の行は 61px 固定してOK */
.menuThird > .thirdLi {
  min-height: 55px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

.menuThird > .thirdLi > .labelChild {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: normal;
}

/* 「地方ブロックにおける社会資本整備重点計画」メニューを丸ごと非表示 */
#menu .labelParent_plan { display: none; }
#menu #plans { display: none; }

/* ===== Left menu fixed footer layout ===== */
#menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#menuScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ===== Layout fix: keep menu + map in one row ===== */
body { display: flex; }

#menu {
  width: 460px;
  flex: 0 0 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}

#menuScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 最下部の固定注記 */
#menuFooterNote {
  display: flex;
  flex: 0 0 54px;
  height: 54px;
  background: #fff;
  color: #000;
  border-top: 1px solid #ccc;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px){
  #menuFooterNote{
    font-size: 12px; 
  }
}

/* 分野メニュー：アイコン（40x40） */
#fields .fieldIcon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

/* アイコンセット（凡例と同じ） */
#fields .field-road { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/road.png); }
#fields .field-train { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/train.png); }
#fields .field-airport { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/airport.png); }
#fields .field-harbor { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/harbor.png); }
#fields .field-park { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/park.png); }
#fields .field-waterworks { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/waterworks.png); }
#fields .field-sewer { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/sewer.png); }
#fields .field-river { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/river.png); }
#fields .field-sabo { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/sabo.png); }
#fields .field-coast { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/coast.png); }
#fields .field-other { background-image: url(/sogoseisaku/region/inframiraimap/map/data/icon/other.png); }

/* ===== Category (第2階層) ■マーク：40x40 + 分野と同じ間隔 ===== */
:root { --menu-gap: 12px; }

#menuScroll .firstLi > ul.menuParent2 > li.secondLi.hasCatMark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--menu-gap);
  min-height: 61px;
}

#menuScroll .firstLi > ul.menuParent2 > li.secondLi.hasCatMark > .catMark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0 8px;
}

#menuScroll .mark-plan1 { background: #5EB5C0; }
#menuScroll .mark-plan2 { background: #FFDB7C; }
#menuScroll .mark-effect { background: #FFCEDB; }

#menuScroll .firstLi > ul.menuParent2 > li.secondLi.hasCatMark > label.labelParent {
  padding: 0 8px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

#menuScroll .firstLi > ul.menuParent2 > li.secondLi.hasCatMark > ul.menuThird {
  flex: 0 0 100%;
  width: 100%;
}

/* デフォルトのチェックボックスを一回り大きく（形はOS/ブラウザ標準のまま） */
#menuScroll input[type="checkbox"] {
  transform: scale(1.25);
  transform-origin: left center;
}

/* 分野（#fields）：checkbox / アイコン / テキスト を等間隔に */
#fields li.secondLi{
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
}

/* 第3階層も同じ思想で揃えるなら */
.menuThird > .thirdLi{
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
}

/* gapで揃えるので、個別の余白は消す */
#fields .fieldIcon{ margin: 0; }
#fields .labelChild{ padding: 0; }
.menuThird > .thirdLi > .labelChild{ padding: 0; }

/* ===== Expand arrows (▼/▲) ===== */
#menuScroll {
  --arrow-color: #0C4466;
  --arrow-w: 20px;
  --arrow-h: 12px;
  --arrow-right: 16px;
  --row-h: 61px;
}

#menuScroll li.hasArrow { position: relative; }

#menuScroll li.hasArrow > label {
  padding-right: calc(var(--arrow-w) + var(--arrow-right) + 8px);
}

#menuScroll li.hasArrow::after {
  content: "";
  position: absolute;
  right: var(--arrow-right);
  top: calc(var(--row-h) / 2);
  transform: translateY(-50%);
  width: var(--arrow-w);
  height: var(--arrow-h);
  background: var(--arrow-color);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
}

/* ▼（閉） */
#menuScroll li.hasArrow::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2020%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M4%202%20L16%202%20Q18%202%2016.586%203.414%20L11.414%208.586%20Q10%2010%208.586%208.586%20L3.414%203.414%20Q2%202%204%202%20Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2020%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M4%202%20L16%202%20Q18%202%2016.586%203.414%20L11.414%208.586%20Q10%2010%208.586%208.586%20L3.414%203.414%20Q2%202%204%202%20Z'/%3E%3C/svg%3E");
}

/* ▲（開） */
#menuScroll li.hasArrow.is-open::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2020%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M11.414%203.414%20L16.586%208.586%20Q18%2010%2016%2010%20L4%2010%20Q2%2010%203.414%208.586%20L8.586%203.414%20Q10%202%2011.414%203.414%20Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%2020%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M11.414%203.414%20L16.586%208.586%20Q18%2010%2016%2010%20L4%2010%20Q2%2010%203.414%208.586%20L8.586%203.414%20Q10%202%2011.414%203.414%20Z'/%3E%3C/svg%3E");
}

#map { position: relative; }

#bubble{
  position: absolute;
  top: 80px;
  left: 16px;
  z-index: 9999;
}

/* ===== App layout with header (no body/map vertical scroll) ===== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ヘッダー（最終仕様：高さ80・背景色） */
#appHeader {
  height: 60px;
  flex: 0 0 60px;
  background: #0a839d;
  border-bottom: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* 内側コンテナ（中央寄せ・max幅1280・中身は左寄せ） */
#appHeader > .headerInner {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  padding: 10px 10px 10px 10px;
  box-sizing: border-box;
}

/* ロゴ 60x60（左） */
#appHeader .headerLogo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
#appHeader .headerLogo:hover {
  opacity: 0.6;
}

/* タイトル 30px（白抜き） */
#appHeader .headerTitle {
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, YuGothic, Yu Gothic,
    "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo,
    "ＭＳＰゴシック", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* メイン（残り全部。ここもスクロール禁止） */
#appMain {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* 左メニュー：幅固定 + 縦はメインにフィット */
#menu {
  width: 400px;
  flex: 0 0 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* メニューのスクロール領域だけスクロールOK */
#menuScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* 右地図：残り全部、縦はメインにフィット */
#map {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

/* ===== Header Navigation (RESET / BASIC) ===== */

/* 調整用（色/サイズ/位置を変えやすく） */
#appHeader{
  --nav-text: #fff;

  --nav-arrow-color: #fff;  /* ①②の > */
  --nav-arrow-w: 10px;
  --nav-arrow-h: 16px;

  --drop-arrow-color: #fff; /* ③の矢印 */
  --drop-arrow-w: 12px;
  --drop-arrow-h: 12px;

  --dropdown-bg: #fff;
  --dropdown-text: #111;
  --dropdown-border: rgba(0,0,0,0.12);
}

/* スクリーンリーダー用 */
#appHeader .srOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* 右側にナビを寄せる */
#appHeader .headerNavWrap{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* PC：横並び */
#appHeader .headerNav .navList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#appHeader .navLink{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

#appHeader .navLink:hover{
  background: rgba(255,255,255,0.12);
}

/* ①②：ページ遷移の “＞” */
#appHeader .navLink--go .navGoIcon{
  width: var(--nav-arrow-w);
  height: var(--nav-arrow-h);
  flex: 0 0 auto;
  background: var(--nav-arrow-color);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath fill='black' d='M2 1l6 7-6 7-1.5-1.3L5.3 8 0.5 2.3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath fill='black' d='M2 1l6 7-6 7-1.5-1.3L5.3 8 0.5 2.3z'/%3E%3C/svg%3E");
}

/* ③：ドロップダウン矢印 */
#appHeader .navLink--drop .navDropIcon{
  width: var(--drop-arrow-w);
  height: var(--drop-arrow-h);
  flex: 0 0 auto;
  background: var(--drop-arrow-color);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='black' d='M2 2l8 8 8-8 2 2-10 10L0 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='black' d='M2 2l8 8 8-8 2 2-10 10L0 4z'/%3E%3C/svg%3E");
}

#appHeader .navItem--dropdown.is-open > .navLink--drop .navDropIcon{
  transform: rotate(180deg);
}

/* ドロップダウン（ベース） */
#appHeader .navItem--dropdown{ position: relative; }
#appHeader .navDropdown{
  display: none;
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  min-width: 360px;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1000;
}

/* JSで開いた状態 */
#appHeader .navItem--dropdown.is-open > .navDropdown{ display: block; }

/* ===== FIX: 分野アイコンを label 内に入れる版（inputとlabelの関係を壊さない） ===== */
#fields .labelChild{
  display: inline-flex;
  align-items: center;
  gap: var(--menu-gap, 12px);
  padding: 0;
  line-height: 1.2;
  white-space: normal;
}

#fields .labelChild .fieldIcon{
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

/* ===== Field icons FINAL FIX (must be at VERY END of new-map.css) ===== */
#menuScroll ul#fields > li.secondLi {
  display: flex !important;
  align-items: center !important;
  min-height: 61px !important;
  padding: 0 !important;
  gap: 12px !important;
}

#menuScroll ul#fields > li.secondLi > label.labelChild {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 8px;
  height: 61px !important;
  font-size: 17px;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* ===== PC: keep a minimum gap between title and right nav ===== */
@media (min-width: 769px){
  #appHeader .headerTitle{
    margin-right: 32px;
    margin-top: 1px;
  }
}

/* =========================================================
   ★ ここから「ヘッダー/ハンバーガー」の重複を整理した最終版
   - 768px以下でハンバーガー
   - 768px超で通常ナビ
   - 768px境界の“カクッ”を防ぐため、定義を1本化
========================================================= */

/* ヘッダーを常に最前面へ（ドロップダウンが#mapに潜らない） */
#appHeader{
  position: relative;
  z-index: 9999;
}

/* ドロップダウン自体も強めに */
#appHeader .navDropdown{
  z-index: 10000;
}

/* ===== PC（デフォルト）：ナビ表示、ハンバーガー非表示 ===== */
#appHeader .navToggle{ 
  display: none;
  background: transparent;
  border: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
#appHeader .navToggle:active{
  background: rgba(255,255,255,0.12);
}

/* ハンバーガーの「三」（白） */
#appHeader .hamburger{
  position: relative;
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}
#appHeader .hamburger::before,
#appHeader .hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:28px;
  height:3px;
  background:#fff;
  border-radius:2px;
}
#appHeader .hamburger::before{ top:-8px; }
#appHeader .hamburger::after{  top: 8px; }

/* PC：navは通常表示 */
#appHeader .headerNav{ display: block; }

/* ===== PCドロップダウン（親下辺＆左端揃え／285×56／白背景／罫線右端まで） ===== */
@media (min-width: 769px){
  /* 親を基準にする */
  #appHeader .navItem--dropdown{
    position: relative;
  }

  /* 親リンクの真下・左端揃え */
  #appHeader .navDropdown{
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0;
    width: 285px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* hoverで開く */
  /* #appHeader .navItem--dropdown:hover > .navDropdown{
    display: block;
  } */
  .navDropdownText {
    font-size: 16px;
  } 

  /* 各行リンク */
  #appHeader .navDropdownLink{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: 56px;
    padding: 0 32px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: #fff;
    color: #111;
    text-decoration: none;

    border-bottom: 1px solid rgba(0,0,0,0.12);
    border-radius: 0;

    font-size: 17px;
  }

  #appHeader .navDropdown li:last-child .navDropdownLink{
    border-bottom: none;
  }

  #appHeader .navDropdownLink:hover{
    opacity: 0.7;
  }

  /* PDFアイコン */
  #appHeader .pdfIcon{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../_src/icon-pdf.png);
  }
}

/* ===== 1480px以下：ハンバーガー表示＆ナビはパネルで下に出す ===== */
@media (max-width: 1480px){
  /* 右側エリアを基準にドロップ（下に出すため） */
  #appHeader .headerNavWrap{
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  /* ハンバーガー表示 */
  #appHeader .navToggle{
    display: inline-flex;
  }

  /* 横並びナビは隠す（開いたらパネル表示） */
  #appHeader .headerNav{
    display: none;

    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;

    width: min(92vw, 420px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 2000;
  }

  /* JSで開いたら表示 */
  #appHeader.is-nav-open .headerNav{
    display: block;
  }

  /* パネル内は縦並び */
  #appHeader .headerNav .navList{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* パネル内の文字色 */
  #appHeader .headerNav .navLink{
    color: #111;
  }

  /* （必要なら）ドロップダウンがパネル内で崩れないよう最低限 */
  #appHeader .navDropdown{
    position: static;
    width: 100%;
    margin: 6px 0 0;
    border-radius: 10px;
  }
  #appHeader .navDropdownLink{
    width: 100%;
    box-sizing: border-box;
  }
}
/* =========================================================
   Hamburger menu (<=1480px)
   - panel is full width
   - panel sticks to header bottom
   - bg: #0A839D
   - text: 20px
   - icons/arrows at right edge
   - hamburger "三" -> "✕" when open
   - dropdown submenu (white) same as PC concept
========================================================= */
@media (max-width: 1480px){

  /* ヘッダーを基準に、メニューを「ヘッダー下辺にぴったり」出す */
  #appHeader{
    position: relative;
  }

  /* 右側エリア（ボタン配置） */
  #appHeader .headerNavWrap{
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  /* ===== ハンバーガーボタン ===== */
  #appHeader .navToggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  #appHeader .navToggle:active{ background: rgba(255,255,255,0.12); }

  /* 三（閉じている状態） */
  #appHeader .hamburger{
    position: relative;
    display: block;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
  }
  #appHeader .hamburger::before,
  #appHeader .hamburger::after{
    content:"";
    position:absolute;
    left:0;
    width:28px;
    height:3px;
    background:#fff;
    border-radius:2px;
  }
  #appHeader .hamburger::before{ top:-8px; }
  #appHeader .hamburger::after{  top: 8px; }

  /* ✕（開いている状態）：三→✕に変形 */
  #appHeader.is-nav-open .hamburger{
    background: transparent; /* 中央線を消す */
  }
  #appHeader.is-nav-open .hamburger::before{
    top: 0;
    transform: rotate(45deg);
  }
  #appHeader.is-nav-open .hamburger::after{
    top: 0;
    transform: rotate(-45deg);
  }

  /* ===== 展開パネル（全幅・ヘッダー直下） ===== */
  #appHeader .headerNav{
    display: none;

    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;            /* ★下辺ぴったり */

    width: 100%;
    background: #0A839D;      /* ★背景色 */
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    z-index: 2000;
  }

  #appHeader.is-nav-open .headerNav{
    display: block;
  }

  /* 縦並び */
  #appHeader .headerNav .navList{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* 1行（親メニュー） */
  #appHeader .headerNav .navLink{
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 56px;             /* お好みで */
    padding: 0 24px;          /* ★左右パディング */
    font-size: 20px;          /* ★テキスト 20px */
    font-weight: 600;

    color: #fff;
    text-decoration: none;
    background: transparent;
    border-radius: 0;

    /* 区切り線（右端まで） */
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  #appHeader .headerNav .navLink:hover{ opacity: 0.7; }

  /* アイコン/矢印は右端へ（必ず押し出す） */
  #appHeader .headerNav .navGoIcon,
  #appHeader .headerNav .navDropIcon{
    margin-left: auto;
    flex: 0 0 auto;
    background: #fff; /* mask SVGなら色はここ */
  }

  /* 最終行の線を消したい場合（必要ならON） */
  /* #appHeader .headerNav .navItem:last-child > .navLink{ border-bottom: none; } */

  /* ===== ③ ドロップダウン：ハンバーガー内では「中で展開」 ===== */
  /* PCのhover展開が効いてしまうのを抑止（小さい幅でもマウスあるため） */
  /* #appHeader .navItem--dropdown:hover > .navDropdown{
    display: none;
  } */

  /* 展開メニュー（白背景。PC版と同様のコンセプト） */
  #appHeader .navDropdown{
    display: none;
    position: static;         /* パネル内で自然に積む */
    width: 100%;
    margin: 0;
    padding: 0;

    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* JSの is-open で展開 */
  #appHeader .navItem--dropdown.is-open > .navDropdown{
    display: block;
  }

  /* 展開行（白背景・区切り線・右端まで） */
  #appHeader .navDropdownLink{
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 56px;             /* PC版と揃えるなら 56 */
    padding: 0 32px;          /* ★左右パディング */
    font-size: 17px;          /* 展開側はPCと同等にする想定（必要なら20に） */

    color: #111;
    background: #fff;
    text-decoration: none;

    border-bottom: 1px solid rgba(0,0,0,0.12);
  }
  #appHeader .navDropdownLink:hover{ opacity: 0.7; }

  #appHeader .navDropdown li:last-child .navDropdownLink{
    border-bottom: none;
  }

  /* PDFアイコン（画像は後で差し替え） */
  #appHeader .pdfIcon{
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../_src/icon-pdf.png);
  }
}
@media (max-width: 1480px){

  /* ヘッダーの高さ（必要なら 80px をあなたの実値に） */
  :root{ --app-header-h: 60px; }

  /* ▼ パネルをビューポート基準で全幅オーバーレイ */
  #appHeader .headerNav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--app-header-h) !important;  /* ヘッダー下辺にピッタリ */
    width: 100vw !important;

    /* 画面の残り全部を覆う */
    height: calc(100vh - var(--app-header-h)) !important;
    overflow-y: auto;

    margin-top: 0 !important;
    border-radius: 0 !important;
    z-index: 20000 !important; /* かなり強めに */
  }

  /* 開いたときだけ表示（既存ルールがあっても上書き） */
  #appHeader.is-nav-open .headerNav{
    display: block !important;
  }

  /* もし「右寄せ感」が残るなら、親の基準付けを無効化（保険） */
  #appHeader .headerNavWrap{
    position: static !important;
  }
}
/* ===== Keep header (and hamburger) above bubble ===== */
#appHeader{
  position: relative;   /* すでにあってもOK */
  z-index: 30000;       /* #bubble(9999)より確実に上へ */
}

/* ハンバーガー自体も前面に（保険） */
#appHeader .navToggle{
  position: relative;
  z-index: 30001;
}

/* 開いたメニュー（オーバーレイ）も当然最前面 */
#appHeader .headerNav{
  z-index: 30002;
}
/* ===== <=768px: header height 40px ===== */
@media (max-width: 768px){
  #appHeader{
    height: 40px;
    flex: 0 0 40px;   /* 80px固定を上書き */
  }
  #appHeader > .headerInner{
        height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
  }
    #appHeader .headerLogo{
    width: 30px;
    height: 30px;
    }
    #appHeader .headerTitle{
    font-size: 15px;
    line-height: 1; /* 40px内で詰める */  }

  /* （任意）ハンバーガーも40pxに合わせるなら */
  #appHeader .navToggle{
    width: 40px;
    height: 40px;
  }
}
/* ===== FIX: <=768 header(40px) + hamburger panel gap removal ===== */
@media (max-width: 768px){
  /* ヘッダーの高さ（必要なら 80px をあなたの実値に） */
  :root{--app-header-h: 40px;}
  #appHeader .headerNav .navLink{
    font-size:15px;
  }
  #appHeader .navDropdownLink {
    font-size: 14px;
  }
}
/* ===== Mobile: dropdown (PDF list) allow wrap ===== */
@media (max-width: 768px){

  /* ハンバーガー内：ナビリンク全般を折り返し可能に（必要なら） */
  #appHeader .headerNav .navLink{
    white-space: normal !important;
    text-align: left;
  }

  /* 展開メニュー（白背景のPDFリスト）の各行：高さ固定をやめて折り返し */
  #appHeader .navDropdownLink{
    height: auto !important;     /* ←56px固定を解除 */
    min-height: 56px;           /* ←見た目の基準は維持 */
    white-space: normal !important;
    line-height: 1.25;
    padding-top: 10px;          /* 上下に余白を足して読みやすく */
    padding-bottom: 10px;
  }

  /* 右端アイコンを押し出されにくくする（アイコン側が縮まないように） */
  #appHeader .navDropdownLink .pdfIcon,
  #appHeader .navDropdownLink .navGoIcon,
  #appHeader .navDropdownLink .navDropIcon{
    flex: 0 0 auto;
  }
}
@media (max-width: 768px){

  /* 折り返し時：テキストは左寄せ */
  #appHeader .navDropdownLink{
    text-align: left !important;
    justify-content: flex-start !important; /* space-between をやめる */
  }

  /* テキスト部分が左から伸びて折り返す（右端アイコンは右に寄せる） */
  #appHeader .navDropdownLink > :first-child{
    flex: 1 1 auto;
    min-width: 0;                 /* 長文の折返しを安定させる */
    text-align: left;
  }

  /* 右端のPDFアイコンは右端に固定 */
  #appHeader .navDropdownLink .pdfIcon{
    margin-left: auto;            /* 右に押しやる */
    flex: 0 0 auto;
  }
}

/* ボタンの下のメニューだけ閉じる */
/* #appHeader .navItem--dropdown > .navDropdown {
  display: none;
} */
 #appHeader .navDropdown {
  display: none;
}
/* クリックで is-open が付いたら開く */
/* #appHeader .navItem--dropdown.is-open > .navDropdown{
  display: block;
} */
 #appHeader .navItem--dropdown.is-open .navDropdown {
  display: block;
}

/* まずは共通：クリックで付く is-open のときだけ反転（全幅共通） */
#appHeader .navItem--dropdown.is-open > .navLink--drop .navDropIcon{
  transform: rotate(180deg);
}

/* PC（ハンバーガーじゃない幅）だけ hover でも反転 */
/* @media (min-width: 1631px){
  #appHeader .navItem--dropdown:hover > .navLink--drop .navDropIcon{
    transform: rotate(180deg);
  }
} */
/* スクリーンリーダー用（未定義なら追加） */
.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ===== Drawer UI (mobile only) - CLEAN VERSION ===== */

/* PCでは一切出さない */
.drawerOverlay,
.drawerToggle{
  display: none;
}

/* 768px以下：地図全面 + 左メニューをドロワー + overlay + トグルボタン */
@media (max-width: 768px){
  :root{
    --header-h: 40px;          /* 768以下のヘッダー高さ */
    --toggle-h: 40px;          /* トグルボタン高さ */
    --drawer-gap: 30px;        /* 右に残す余白 */
    --overlay-alpha: 0.45;     /* overlayの濃さ */
  }

  /* オーバーレイ：地図の上 / ドロワーの下 */
  .drawerOverlay{
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--header-h));
    background: rgba(0,0,0,var(--overlay-alpha));
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 20000;
  }

  /* トグルボタン：ヘッダー下辺・左ぴったり（白背景枠 + 右矢印） */
  .drawerToggle{
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0;

    height: var(--toggle-h);
    width: calc(100vw - var(--drawer-gap));

    background: #fff;
    border: 1px solid gray;
    box-sizing: border-box;

    align-items: center;
    justify-content: space-between;

    padding: 0 16px;
    cursor: pointer;

    z-index: 35000;                /* bubbleより前面にしたいので強め */
  }

  .drawerToggleText{
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
  }

  /* ＞（閉）→＜（開） */
  .drawerToggleArrow{
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: #333333;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath fill='black' d='M2 1l6 7-6 7-1.5-1.3L5.3 8 0.5 2.3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath fill='black' d='M2 1l6 7-6 7-1.5-1.3L5.3 8 0.5 2.3z'/%3E%3C/svg%3E");

    transition: transform 180ms ease;
  }

  body.is-drawer-open .drawerToggleArrow{
    transform: rotate(180deg);
  }

  /* 左メニュー(#menu)をドロワー化：ヘッダー＋ボタンの下から出す */
  #menu{
    position: fixed;
    top: calc(var(--header-h) + var(--toggle-h));
    left: 0;

    width: calc(100vw - var(--drawer-gap));
    height: calc(100vh - (var(--header-h) + var(--toggle-h)));

    transform: translateX(-100%);
    transition: transform 220ms ease;

    z-index: 30000;               /* overlayより上 */
    overflow: hidden;             /* 中の#menuScrollにスクロールさせる */
  }

  /* メニュー中だけスクロール */
  #menuScroll{
    height: 100%;
    overflow-y: auto;
  }

  /* open状態（bodyにクラスが付く） */
  body.is-drawer-open .drawerOverlay{
    opacity: 1;
    pointer-events: auto;
  }
  body.is-drawer-open #menu{
    transform: translateX(0);
  }

  /* 開いてる間は背面スクロールを止める */
  body.is-drawer-open{
    overflow: hidden;
    touch-action: none;
  }

  /* 既存の横並び指定が残ってても崩れない保険 */
  #menu, #map{
    float: none;
  }
}

@media (max-width: 768px){
  .leaflet-top{
     margin-top: 40px!important;
  }
}
/* 最上位：ハンバーガーメニュー（ヘッダーのナビパネル） */
#appHeader{
  position: relative;
  z-index: 40000;
}
#appHeader .headerNav{
  z-index: 45000; /* パネル自体を最上位に */
}

/* 次：ドロワー表示ボタン / ドロワーメニュー */
.drawerToggle{
  z-index: 35000; /* headerNav より下に */
}
#menu{
  z-index: 34000; /* drawerToggle と同階層でOK。ボタンを上にするなら少し下げる */
}

/* さらに下：overlay */
.drawerOverlay{
  z-index: 20000;
}
@media (max-width: 768px){

  /* 第1階層 */
  #menuScroll .menuParent1 > li.firstLi > label.labelParent{
    font-size: 15px !important;
  }

  /* 第2階層 */
  #menuScroll .menuParent2 > li.secondLi > label.labelParent{
    font-size: 14px !important;
  }
  #menuScroll ul#fields > li.secondLi > label.labelChild {
    font-size: 14px !important;

  }
  /* 第3階層 */
  #menuScroll ul.menuThird > li.thirdLi > label.labelChild{
    font-size: 13px !important;
  }
}
#menuScroll .menuParent2 > li.secondLi.hasCatMark > label.labelParent{
  margin-left: 0 !important;      /* 念のため（marginで付いてる場合） */
  padding-left: 0 !important;     /* 実態がpadding 0 8px の場合も潰す */
  /* 右側の余白は必要なら残す（不要なら消してOK） */
  padding-right: 8px !important;
}
#menuScroll .firstLi > ul.menuParent2 > li.secondLi.hasCatMark > .catMark{
  margin-right: 0;
}
@media (max-width: 768px){

  /* 768以下：上向き吹き出し（白） */
  #bubble:before{
    top: -27px;            /* バブル上辺の外側へ */
    left: 32px;            /* 先端の左右位置（好みで調整） */
    margin-top: 0;

    border: 14px solid transparent;
    border-right: 14px solid transparent; /* 左向き用を無効化 */
    border-bottom: 14px solid #fff;       /* ★上向き（下辺が白） */

    z-index: 2;
  }

  /* 768以下：枠線付きなら外側（三角の縁）も上向きに */
  #bubble:after{
    top: -30px;
    left: 32px;
    margin-top: 0;

    border: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #a1c095;    /* ★枠線色 */

    z-index: 1;
  }
  #bubble {
    top: 60px;
  }
}
@media (max-width: 768px){
  #appHeader .headerNav .navLink:hover{
  opacity: 1;
  }
}
@media (max-width: 768px){
  #appHeader .headerNav .navDropdownLink:hover{
  opacity: 1;
  }
}

/* =========================================================
  最終調整：ドロワー幅と重なり順の修正
========================================================= */

/* 1. 重なり順の確定（前回と同じですが念のため再定義） */
#appHeader {
  position: relative;
  z-index: 60000 !important; /* ヘッダーはドロワーより上 */
}
#appHeader .headerNav {
  z-index: 60001 !important; /* ハンバーガー展開は最上位 */
}
.drawerToggle {
  z-index: 50000 !important; /* ボタンはドロワーより上 */
}
.drawerOverlay {
  z-index: 20000 !important; /* 黒背景はドロワーより下 */
}

/* 2. スマホ用ドロワーメニューの幅と配置修正 */
@media (max-width: 768px) {
  #menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    
    /* ★修正：画面一杯(100%)ではなく、右に30pxの隙間を作る */
    width: calc(100% - 30px) !important;
    height: 100% !important;
    
    z-index: 30000 !important;
    background-color: #f2f2f2 !important;
    
    /* ボタンの高さ分(40px) + ヘッダー(40px) = 80px 空ける */
    padding-top: 80px !important;
    box-sizing: border-box !important;
    
    /* 影をつけて右側の地図との境界をわかりやすくする（任意） */
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }

  #menuScroll {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3. iOSヘッダー固定（必須） */
html, body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* =========================================================
  追記修正：Android注記エリア表示対策
========================================================= */

@media (max-width: 768px) {
  /* 1. Android Chromeのアドレスバー分を考慮した高さ(dvh)を強制適用 */
  #menu {
    /* dvhに対応しているブラウザは、バーを除いた高さを適用 */
    height: 100dvh !important;
    
    /* 古いブラウザ向けフォールバック */
    min-height: -webkit-fill-available;
  }

  /* 2. 注記エリア（フッター）の設定強化 */
  #menuFooterNote {
    /* フレックスボックスで絶対に縮ませない */
    flex: 0 0 54px !important;
    height: 54px !important;
    
    /* 最下部に安全マージン（iPhone X等のバーやAndroidナビバー対策）を追加 */
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    
    /* 必要に応じて高さを自動拡張（padding分増やすため） */
    box-sizing: content-box !important; 
    
    z-index: 30005 !important;
    background: #fff;
    position: relative;
  }
}
/* =========================================================
  スクロール調整
========================================================= */

/* 1. ハンバーガーメニューのスクロール設定 */
@media (max-width: 768px) {
  #appHeader .headerNav {
    position: fixed !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 40px) !important;
    overflow-y: scroll !important; /*
    
    /* iPhoneで「スーッ」と動く慣性スクロールを有効化 */
    -webkit-overflow-scrolling: touch !important;
    
    /* バウンス（端の跳ね返り）を許可することで、指に吸い付くような操作感にする */
    /* ※ none にするとガチガチになるため、contain または auto に緩和 */
    overscroll-behavior: contain !important;

    /* 余白と背景（前回と同じ） */
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
    background: #0A839D !important;
    z-index: 60001 !important;
  }
}

/* 2. ドロワーメニュー（左から出るやつ）のスクロール設定 */
@media (max-width: 768px) {
  #menu {
    /* 外枠はスクロールさせない */
    overflow: hidden !important;
  }
  
  #menuScroll {
    /* 中身だけ滑らかにスクロール */
    height: 100% !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important; /* ★滑らか化 */
    overscroll-behavior: contain !important;
  }
}