.street-street {
		background-color: #fff;
	padding-top: 20px;
}

/* 大カテゴリを横並びに、左揃え */
.street-container {
  display: flex;
  flex-wrap: wrap; /* 次の行に折り返す */
  justify-content: flex-start; /* 左揃え */
  gap: 16px; /* 大カテゴリ間のスペース */
	
}

/* 大カテゴリを囲むコンテナ */
.large-container {
  flex: 0 1 auto; /* サイズが自動調整される */
  margin: 0 0 100px 25px;
  width: auto; /* 横幅を自動調整 */
  position: relative; /* 子要素の絶対配置の基準 */
}

/* 大カテゴリ */
.street-large {
  padding: 6px 40px 8px 41px;
  background: rgba(232, 175, 213, 0.73);
  text-align: center;
  height: 50px; /* 高さを固定 */
    opacity: 1; /* 初期状態の opacity を 1 に設定 */
    /* その他のスタイル */
}


.street-large div {
  width: 100%;
  text-align: center;
  color: #333;
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 40px;
  word-wrap: break-word;
}

/* 小カテゴリのコンテナ */
.street-small-container {
  position: fixed; /* ビューポート基準で中央寄せ */
  top: 0; /* JSで上位置を設定 */
  left: 50%; /* 中央基準 */
  width: calc(100vw - 40px); /* ページ左右の20pxパディング分を差し引き */
  max-width: calc(100vw - 40px); /* 左右に適度な余白 */
  min-width: 300px; /* 最小幅を確保 */
  z-index: 1000; /* 確実に前面表示 */
  display: none; /* JavaScriptで制御 */
  flex-wrap: wrap; /* PC: 2行レイアウト許可 */
  gap: 10px;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-top: 10px; /* 大カテゴリとの間隔 */
  transform: translateX(-50%); /* 完全中央寄せ */
  
  /* 横スクロール設定（PC対応） */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* PC: 薄いスクロールバー表示 */
  scrollbar-color: rgba(232, 175, 213, 0.7) transparent;
  
  /* スクロール存在の視覚的ヒント */
  position: relative;
}

/* PC用のスクロールバー設定 */
.street-small-container::-webkit-scrollbar {
  height: 8px; /* 横スクロールバーの高さ */
}

.street-small-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.street-small-container::-webkit-scrollbar-thumb {
  background: rgba(232, 175, 213, 0.7);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.street-small-container::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 175, 213, 0.9);
}

/* WebKit browsers: 南北時の緑色スクロールバー */
.street-small-container[data-group="ns"]::-webkit-scrollbar-thumb {
  background: rgba(179, 230, 179, 0.7); /* 薄い抹茶色 */
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.street-small-container[data-group="ns"]::-webkit-scrollbar-thumb:hover {
  background: rgba(179, 230, 179, 0.9); /* ホバー時は濃い抹茶色 */
}

/* スクロール可能の視覚的ヒント - 右端グラデーション */
.street-small-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
  border-radius: 0 8px 8px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.street-small-container:hover::after {
  opacity: 1;
}

/* 左端の影（スクロール済みを示す） */
.street-small-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
  border-radius: 8px 0 0 8px;
  opacity: var(--scroll-left, 0);
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* 動的な右端グラデーション制御 */
.street-small-container::after {
  opacity: var(--scroll-right, 0);
}
/* 小カテゴリのスタイル */
.street-small {
  padding: 8px;
  display: flex;
  background-color: white;
  margin: 5px 0; /* PC: 上下余白を調整 */
  color: #333;
  font-size: 15px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  border: 1px solid rgba(232, 175, 213, 0.73); /* 枠線 */
  border-radius: 10px;
  white-space: nowrap; /* 文字が折り返されないようにする */
  flex: 0 0 auto; /* PC: 縮小しない、内容ベース */
  width: auto; /* PC: 内容に応じた動的幅 */
  min-width: 80px; /* PC: 最小幅確保 */
  transition: background-color 0.3s ease, color 0.3s ease; /* ホバー時の変化を滑らかにする */
}


.street-small:hover {
  background-color: #f0f0f0; /* 例：ホバー時の背景色を少し暗くする */
  color: #000; /* 例：ホバー時の文字色を黒にする */
}

/* 薄い抹茶色のボタン（南北路） */
.street-large.green-button {
  background-color: #b3e6b3; /* 少し彩度を上げた薄い抹茶色 */
  color: #333; /* テキストの色 */
  border: 1px solid #d3e4d3; /* 枠線の色 */
  /* 必要に応じて、padding, margin, font-sizeなどを調整 */
}

.street-small.small-green {
	border: 1px solid #b3e6b3; /* 少し彩度を上げた薄い抹茶色 */
}

/* 例：.street-small-container の下にある要素が .sub-heading の場合 */
.street-line {
  margin-top: 0; /* 初期マージンを0に設定 */
}

/* 動的余白調整のためのトランジション効果 */
.double-streets {
  transition: margin-bottom 0.3s ease;
}

.double-streets.small-category-expanded {
  /* 展開状態の視覚的フィードバック（オプション） */
}


/* PC用設定（769px以上） */
@media screen and (min-width: 769px) {
  .street-small-container {
    flex-wrap: nowrap; /* 1行レイアウトで横スクロール確保 */
    justify-content: flex-start;
    align-items: center; /* 縦中央寄せ */
    height: auto; /* 高さ自動調整 */
    gap: 8px; /* 適度な間隔 */
    padding: 15px 20px; /* PC用の余白 */
    
    /* PCではスクロールバーを表示 - デフォルトは東西用ピンク */
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 175, 213, 0.7) transparent;
  }
  
  /* 南北時は緑色のスクロールバー */
  .street-small-container[data-group="ns"] {
    scrollbar-color: rgba(179, 230, 179, 0.7) transparent; /* 薄い抹茶色 */
  }
  
  .street-small {
    margin: 0; /* PC用の余白リセット */
    padding: 8px 12px; /* PC用のパディング */
    flex: 0 0 auto; /* 縮小しない */
    width: auto; /* 内容に応じた幅 */
    min-width: 80px; /* 最小幅確保 */
    font-size: 14px; /* PC用のフォントサイズ */
  }
}

/* モバイル用設定（768px以下） */
@media screen and (max-width: 768px) {
	/* 大カテゴリを横並びに、左揃え */
.street-container {
  display: flex;
  flex-wrap: wrap; /* 次の行に折り返す */
  justify-content: flex-start; /* 左揃え */
  gap: 10px; /* 大カテゴリ間のスペース */
}
/* 大カテゴリを囲むコンテナ */
.large-container {
  flex: 0 1 auto; /* サイズが自動調整される */
  margin: 0 0 80px 15px;
  width: auto; /* 横幅を自動調整 */
}
  .street-large {
    width: 75px;
    height: 30px;
    padding: 0; /* パディングを削除 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .street-large div {
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    padding: 0;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .street-small {
    padding: 6px 8px; /* パディングを調整 */
    line-height: 14px;
    min-width: 50px; /* 最小幅保証 */
    width: auto; /* 内容に応じた動的幅 */
    max-width: none; /* 制限撤廃 */
    border-radius: 5px;
    margin: 0;
    font-size: 12px; /* フォントサイズ維持 */
    box-sizing: border-box;
    flex: 0 0 auto; /* 縮小しない、内容ベース */
    white-space: nowrap; /* 一行表示を維持 */
    overflow: visible; /* 内容を完全表示 */
  }

  .street-small-container {
    position: fixed;  /* viewport基準で統一 */
    top: 0;          /* JavaScriptで動的設定 */
    left: 50%;       /* 中央基準 */
    transform: translateX(-50%); /* 完全中央寄せ */
    width: calc(100vw - 40px);   /* 左右20pxずつ余白 */
    max-width: calc(100vw - 40px);
    min-width: 300px; /* 最小幅を確保 */
    z-index: 1000;   /* 前面表示確保 */
    margin: 0;
    padding: 12px 15px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    /* Flexbox設定 */
    display: flex;
    flex-wrap: nowrap; /* 折り返し禁止で横スクロール */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px; /* 間隔を少し詰める */
    overflow-x: auto; /* 横スクロール許可 */
    overflow-y: hidden; /* 縦スクロール禁止 */
    -webkit-overflow-scrolling: touch; /* スムーズスクロール */
    scrollbar-width: none; /* Firefox: スクロールバー非表示 */
    -ms-overflow-style: none; /* IE/Edge: スクロールバー非表示 */
  }
  
  /* WebKit browsers: スクロールバー非表示 */
  .street-small-container::-webkit-scrollbar {
    display: none;
  }
}