@charset "utf-8";

#map-container {
  display: flex;
  flex-direction:row-reverse;
  width: 100%;
  height: 100vh;
}
#spot-list {
  width: 320px;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  padding: 10px;
  background: #fafafa;
  transition: all 0.3s ease;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  margin-bottom:50px;
}
#spot-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#spot-list li {
  margin: 10px 0;
  padding: 0px 10px 10px 0px;
  background-color: #f5ff4a;
  border: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
}
#spot-list li p{
  margin-top:-17px;
  margin-left:-3px;
}
#spot-list li:hover {
  background-color: #f0f8ff;
}
#connect-map {
  flex: 1;
  height: 100%;
}
.spot-detail p span{
  font-family:var(--font-sub);
  font-size:3.2rem;
}
.spot-detail div{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size: 1.2rem;
}
.spot-detail div img{
  margin-left:2.3rem;
}
.spot-detail div .detail-link{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.gallery-name{
  font-weight: bold;
}
.term-disp{
  font-size: 1.0rem;
  color: #666;
}
.single-section.center-section{
  padding-top:50px;
}
.single-section.center-section h2{
  margin-bottom:50px;
}
.detail-link-up{
    color:#900!important;
}
.go-to-googlemap-btn{
  font-size:10px;
}
button.go-to-btn{
    color:cornflowerblue;
    margin-right:-0.5rem;
}
/* スマホ対応 */
@media (max-width: 768px) {
  #map-container {
    flex-direction: column;
  }
  #spot-list {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-top: 1px solid #ddd;
    order: 2;
  }
  #connect-map {
    order: 1;
    height: 60vh;
    z-index:0;
    left:1px;
  }
}

/* 検索・フィルタUI */
#filter-bar {
  margin-bottom: 10px;
}
#filter-bar input,
#filter-bar select {
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
}
.leaflet-tile {
filter: grayscale(20%) brightness(0.99) contrast(1);
}

@media (max-width: 549px) {
  .main-section{
    padding-bottom:0px!important;
  }
  .single-section{
    padding:1px;
  }
  .single-section.center-section {
    padding-top: 40px;
}
  .single-section.center-section h2 {
    margin-bottom: 40px;
}
  #connect-map{
    flex:0 0 60%;
    min-height:480px!important;
}
  #map-container{
    flex-direction:column;
      height:auto!important;
    }
  #filter-bar{
    display:none;
  }
  /* 横スクロールのスポットリスト */
  #spot-list{
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  #spot-items{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
  }
  #spot-items li{
    flex: 0 0 80%;
    margin: 0;
  }
}