/* =========================================================
   Map bottom area (3 columns on PC / 1 column on mobile)
   ========================================================= */
.map-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 20px 0 0;
}

.map-bottom-item {
  box-sizing: border-box;
  min-width: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #d6e3f0;
  border-radius: 10px;
  line-height: 1.7;
}

.map-bottom-item h4 {
  margin: 0 0 6px;
  font-size: 1.05em;
  color: #0b6fb5;
}

.map-bottom-item p {
  margin: 0;
}

.map-bottom-item p + p {
  margin-top: 8px;
}

@media (max-width: 768px) {
  .map-bottom {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }
}


/* =========================================================
   List design (bottom1-3)
   リンクなし: 点つきの静かな行 / リンクあり: 矢印つきのボタン風
   ========================================================= */
.map-bottom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 共通: 1行 */
.map-bottom-list li {
  position: relative;
  margin: 0;
  padding: 7px 10px 7px 26px;
  border-radius: 8px;
  background: #f7f9fb;
  color: #555;
  line-height: 1.5;
  overflow: hidden;           /* リンクの背景を角丸に収める */
}

/* リンクなし: 左に小さな点 */
.map-bottom-list li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #b9c6d2;
}

/* リンクあり: 行全体をクリックできるボタン風にする */
.map-bottom-list a {
  position: relative;         /* 左の点より前面に出す */
  display: block;
  margin: -7px -10px -7px -26px;   /* li の余白を打ち消して行全体を覆う */
  padding: 7px 36px 7px 26px;
  background: #eaf3fb;
  border-left: 4px solid #0b6fb5;
  color: #0b6fb5;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* 右端の矢印 */
.map-bottom-list a::after {
  content: "↗";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95em;
  transition: transform 0.15s ease;
}

.map-bottom-list a:hover,
.map-bottom-list a:focus {
  background: #0b6fb5;
  color: #fff;
}

.map-bottom-list a:hover::after,
.map-bottom-list a:focus::after {
  transform: translateY(-50%) translate(2px, -2px);   /* 矢印が少し動く */
}

/* スマホ: タップしやすく */
@media (max-width: 768px) {
  .map-bottom-list a {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}


/* =========================================================
   Photo thumbnails (bottom.php)
   PC: 3 across / Mobile: 1 column
   ========================================================= */
.map-gallery {
  width: 100%;
  margin: 20px 0 0;
}

.map-gallery h4 {
  margin: 0 0 10px;
  font-size: 1.05em;
  color: #0b6fb5;
}

.map-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.map-gallery-item {
  margin: 0;
  min-width: 0;
}

.map-gallery-item a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.map-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;      /* 写真の縦横比をそろえる */
  object-fit: cover;        /* 枠に合わせて中央をトリミング */
  border-radius: 8px;
  border: 1px solid #d6e3f0;
  background: #f3f7fc;
}

.map-gallery-item figcaption {
  margin-top: 4px;
  font-size: 0.85em;
  line-height: 1.4;
  color: #555;
}

@media (max-width: 768px) {
  .map-gallery {
    margin-top: 16px;
  }

  .map-gallery-grid {
    grid-template-columns: 1fr;   /* スマホは縦1列 */
    gap: 12px;
  }
}