html { --bs-gutter-y: 0; }
p { margin: 2px 0px; font-size: 15px; }

header { background-color: #f8f9fa; }
footer { background-color: #eaedee; }
.main-left { 
    background-color: #e9ecef; 
    position: relative;
    height: 500px;
}
#map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main-right { 
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
}
.indi-base {
    visibility: hidden; display: none;
}
.pager-base1 {
    visibility: hidden; display: none;
}
.pager-base2 {
    visibility: visible; display: block;
}
.title {
    display: block;
    background-color: #f2f2f2;
    padding: 5px 10px;
    font-weight: bold;
}

.custom-tab-content {
    flex-grow: 1;
    height: 0;
    width: 100%;
    overflow-y: auto;
    word-wrap: break-word;
    word-break: break-all;
    /* background-image: url('https://picsum.photos'); */
    background-size: cover;
    background-position: center;
    background-attachment: local;
    /* text-shadow: 1px 1px 2px rgba(200,200,200,200.8); */
}

.custom-tabs {
    border-bottom: 2px solid #ccc;
    background-color: #e9ecef;
    padding: 4px 1px 0 2px;
}

.custom-tabs .nav-item {
    margin-right: 2px;
    min-width: 200px;
}
.custom-tabs .nav-item:last-child {
    margin-right: 0;
}

@media (min-width: 768px) {
    .main-left {
        height: auto;
    }
    .main-right { 
        width: 450px;
        min-width: 450px;
        max-width: 450px;
        height: auto; 
    }
    .custom-tabs .nav-item {
        min-width: 105px;
    }
    .indi-base {
        visibility: visible; display: block;
    }
    .pager-base1 {
        visibility: visible; display: block;
    }
    .pager-base2 {
        visibility: hidden; display: none;
    }
}

.custom-tabs .nav-link {
    color: #333 !important;
    font-weight: bold;
    font-size: 13px;
    border: 1px solid #b5b5b5 !important;
    border-bottom: none !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 60%, #e0e0e0 100%);
    padding: 6px 8px;
    border-bottom: 4px solid transparent !important; 
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.custom-tabs .nav-link:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
    background: #ffffff;
}
.custom-tabs .nav-link:not(.active) {
    border-bottom: 4px solid #00c853 !important;
}
.custom-tabs .nav-link.active {
    background: #ffffff;
    border-bottom: 4px solid #ffb74d !important;
    position: relative;
}


.map-overlay-controls {
    position: absolute;
    top: 15px;
    left: 50px;
    z-index: 1000;
    pointer-events: auto;
}


.list {
	height: 50px;
	width: 100%;
}


.nav-btn {
  font-family: sans-serif;
  font-size: 14px;
  color: #333333;
  padding: 1px 10px;
  border-radius: 20px;
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 40%, #e0e0e0 50%, #d5d5d5 100%);
  border: 1px solid #b5b5b5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
}
.nav-btn:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #eaeaea 40%, #8dc6ef 50%, #cccccc 100%);
  font-weight: bold;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}
.nav-btn.active {
  color: #000000;
  border-color: #2b579a;
  background: linear-gradient(to bottom, #ffffff 0%, #c0d5f5 30%, #6095e6 50%, #a5c5f5 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.15);
}
.nav-btn.active:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #b0cdf2 30%, #5085d6 50%, #95bbf2 100%);
}
.nav-sbtn {
	height: 50px;
	padding: 5px;
	margin: 0;
	border-radius: 0px;
}


.pagepager {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 140%;
}
.pagepager A {
	PADDING-RIGHT: 6px;
	PADDING-LEFT: 6px;
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 1px;
	BORDER-RIGHT: #c0c0c0 1px solid;
	BORDER-LEFT: #c0c0c0 1px solid;
	BORDER-BOTTOM: #c0c0c0 1px solid;
	BORDER-TOP: #c0c0c0 1px solid;
	BACKGROUND: #ffffff;
	COLOR: #0000de;
	HEIGHT: 23px;
	TEXT-DECORATION: underline;
	TEXT-ALIGN: center;
}
.pagepager A:hover {
	BORDER-RIGHT-COLOR: #0000dd;
	BORDER-LEFT-COLOR: #0000dd;
	BORDER-BOTTOM-COLOR: #0000dd;
	BORDER-TOP-COLOR: #0000dd;
	BACKGROUND: #003399;
	COLOR: #ffffff;
}
.pagepager SPAN.nowpage {
	PADDING-RIGHT: 6px;
	PADDING-LEFT: 6px;
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 2px;
	BORDER-RIGHT: #c0c0c0 1px solid;
	BORDER-LEFT: #c0c0c0 1px solid;
	BORDER-BOTTOM: #c0c0c0 1px solid;
	BORDER-TOP: #c0c0c0 1px solid;
	BACKGROUND: #eeeeee;
	COLOR: #000000;
	HEIGHT: 23px;
	font-weight: bold;
	TEXT-ALIGN: center;
}
.pagepager SPAN.txt {
	PADDING-RIGHT: 6px;
	PADDING-LEFT: 6px;
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 3px;
	COLOR: #000000;
	HEIGHT: 23px;
	TEXT-ALIGN: center;
}


.keywordretlist {
	 border-top: 1px solid #bfbfbf;
}



.pnlwaku {
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
}

.mapdtlattention {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 3px 3px 3px 3px;
	empty-cells: show;
}
.mapdtlattention TD.attention {
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	padding: 5px 5px 5px 5px;
	background-color: #eeeeee;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 80%; line-height: 140%;
}
H3 {
	background: url(../image/map2/attention.gif) no-repeat;
	padding: 0px 0px 5px 20px;
	font-size: 120%; color: #ff0000;
	display: inline;
}






.mapdtlitemwaku2 {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 3px 3px 3px 3px;
	empty-cells: show;
}
.mapdtlitemwaku2 TD.waku2 {
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	padding: 5px 5px 5px 5px;
	background-color: #ffffff;
}



.mapdtlitem {
	width: 100%;
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 0px 0px 0px 0px;
	empty-cells: show;
}
.mapdtlitem TD.ttl {
	border-right: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	padding: 0px 0px 0px 0px;
}
.mapddlttl {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 130%;
	line-height: 100%;
	font-weight: bold;
}
.mapddlttlfuri {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 100%;
}


.mapdtlitemkiji {
	width: 100%;
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
	padding: 0px 0px 0px 0px;
}
.mapdtlkijimidashi {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 90%;
	line-height: 100%;
	color: #2a549c;
}
.mapdtlkijittl {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 120%;
	line-height: 100%;
	font-weight: bold;
	color: #2a549c;
}
.mapdtlkijifuri {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 100%;
	color: #2a549c;
}
.mapdtlkijidtl {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 100%;
}




.mapdtlkeyitem {
	width: 100%;
	border-top: 5px solid #e0f0ff;
	border-left: 5px solid #e0f0ff;
	border-right: 5px solid #e0f0ff;
	border-bottom: 5px solid #e0f0ff;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 0px 1px 1px 0px;
	empty-cells: show;
	background-color: #e0f0ff;
}
.mapdtlkeyitem TR.header {
}
.mapdtlkeyitem TD.headerleft {
	border-bottom: 3px solid #e0f0ff;
	background-color: #e0f0ff;
}
.mapdtlkeyitem TD.headercenter {
	border-bottom: 3px solid #e0f0ff;
	background-color: #e0f0ff;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 100%;
	font-weight: bold;
	color: #3366cc;
}
.mapdtlkeyitem TD.headerright {
	border-bottom: 3px solid #e0f0ff;
	background-color: #e0f0ff;
}
.mapdtlkeyitem TR.top {
}
.mapdtlkeyitem TD.topleft {
}
.mapdtlkeyitem TD.topcenter {
}
.mapdtlkeyitem TD.topright {
}
.mapdtlkeyitem TR.middle {
	background-color: #ffffff;
}
.mapdtlkeyitem TD.left {
}
.mapdtlkeyitem TD.center {
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 80%;
	line-height: 140%;
}
.mapdtlkeyitem TD.right {
}
.mapdtlkeyitem TR.bottom {
}
.mapdtlkeyitem TD.bottomleft {
}
.mapdtlkeyitem TD.bottomcenter {
}
.mapdtlkeyitem TD.bottomright {
}
A.keywords {
	padding-left: 17px;
	background: url(../image/map2/key.gif) left no-repeat;
	word-break: keep-all;
}



/* 1. 全体のレイアウト（ボタンとリストを横並びに） */
.slider-container {
  display: flex;
  align-items: center;
  /*gap: 10px;*/
  width: 100vw;
  margin: 0 auto;
}

/* 2. 💡最重要：はみ出た長い部分を隠す窓枠 */
.slider-wrapper {
  overflow: hidden;         /* 枠からはみ出た ul/li を非表示にする */
  scroll-behavior: smooth;  /* スクロールをなめらかに動かす */
  width: 100%;
  background: #fff;
}

/* 3. リストを折り返さずに、右へ長〜く並べる */
.slider-list {
  display: flex;            /* 子要素(li)を横一列に並べる */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;                /* 要素同士の間隔 */
}

/* 4. 💡最重要：1画面に「ぴったり3つ」収まるように幅を計算 */
.slider-list li {
  /* 全体(100%)から、隙間2つ分(12px × 2 = 24px)を引いて、3分割する */
  flex: 0 0 calc((100% - 24px) / 3); 
  box-sizing: border-box;
  height: 50px;
  background: #3498db;
	background: linear-gradient(to bottom, #bfdded 0%, #bfefff 40%, #8dc6ef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 140%;
  max-width: 200px;
	BORDER-RIGHT: #007bc4 1px solid;
	BORDER-LEFT: #007bc4 1px solid;
	cursor: pointer;
	color: #000;
}
.slider-list li:hover {
	BACKGROUND: #007bc4;
	COLOR: #fff;
}

.prev-fast-btn { left: 10px; }
.prev-3-btn    { left: 60px; }
.prev-1-btn    { left: 120px; } /* 🆕 */

.next-1-btn    { right: 120px; } /* 🆕 */
.next-3-btn    { right: 60px; }
.next-fast-btn { right: 10px; }