@charset "UTF-8";

.history-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 40px;
}

.spot-title {
    font-family: serif;
    font-size: 28px;
    color: #8b2500;
    padding: 0 40px;
    margin-top: 40px;
    margin-bottom: 16px;
}

.spot-card {
    border-left: 4px solid #c8860a;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: #ffffff;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.spot-card h3 {
    font-family: serif;
    font-size: 22px;
    color: #8b2500;        /* 他の見出しと色を統一 */
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0; /* 下線で名前を際立たせる */
}

.spot-card p {
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 32px;
}

.spot-card a {
  display: block;
  color: #c8860a;           /* 通常時の色 */
  text-decoration: none;    /* 下線を消す */
  transition: color 0.2s;   /* 色の変化をなめらかに */
  margin-bottom: 6px;
}

.spot-card a:hover {
  color: #8b2500;           /* マウスをのせた時の色 */
  text-decoration: underline; /* ホバー時に下線を出す */
}

.spot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}



@media (max-width: 768px) {
    .history-section {
        padding: 0 16px 32px;
    }
    .spot-title {
        padding: 0 16px;
    }
    .spot-card {
        padding: 16px;
    }
    .spot-grid {
    grid-template-columns: 1fr;
    }

}