/* GoogleフォントInterを適用するスタイル */
.map-subtitle, .map-text, .tourist-info .spot p {
    font-family: 'Inter', sans-serif;
}

/* ヘッダーのスタイルを統一 */
.header-container {
    background-color: rgba(115, 2, 2, 0.884); /* 初期状態の背景色を不透過に */
}

body {
    background-color: #ffffff;
    background-size: cover;
}
.map-container {
    text-align: center;
    width: 90%;
margin: auto;
}
.map-title {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    letter-spacing: 0.1em;
    color: #730202;
    text-align: center;
    margin:100px 0 20px 0;
    text-transform: uppercase;
}

.map-subtitle {
    font-size: 14px;
    color: #730202;
    text-align: center;
    margin: -20px 0 50px 0; /* 上のマージンを調整してスペースを減らす */
}

.map-text {
    width: 80%;
    margin: auto;
    font-weight: bold;
    color: #6c0007;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 40px;
}

#map {
    height: 800px;
    width: 80%;
    margin: 0 auto;
    border: 2px solid #6c0007;
    z-index: 0;
}

@media (max-width: 768px) {
    #map {
        height: 600px;
        width: 90%;
    }
}

.popup-slide {
    text-align: center;
}

.popup-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 10px;
}

.arrow-left, .arrow-right {
    width: 40px; /* 矢印の大きさを大きくしてタッチしやすく */
    height: 40px;
    background-color: #6c0007;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 40px; /* 矢印の高さに合わせて調整 */
    cursor: pointer;
    display: inline-block;
    border-radius: 50%;
    margin: 5px;
    user-select: none; /* 矢印のテキスト選択を防止 */
    transition: background-color 0.3s; /* タップ時のフィードバック用 */
}

.arrow-left:active, .arrow-right:active {
    background-color: #b15e64; /* タップ時のフィードバック色 */
}

.arrow-left::before {
    content: "<";
}

.arrow-right::before {
    content: ">";
}

#box {
    text-align: center;
    margin-top: 10px;
}

.tourist-info {
    margin: auto;
    width: 80%;
    padding: 50px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #6c0007;
}

.tourist-info .spot {
    width: 80%;
    margin: 15px 5px;
    padding: 20px;
    text-align: left;
}

.tourist-info h3 {
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: #6c0007;
    font-size: 24px;
}

.tourist-info h4 {
    text-align: center;
    font-family: "Noto Sans JP", serif;
    color: #6c0007;
    font-size: 16px;
    margin-bottom: 20px;
}

.tourist-info img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.tourist-info p {
    text-align: center;
    font-size: 14px;
    line-height: 1.8;
    font-weight: bold;
    letter-spacing: .1em;
    margin-bottom: 20px;
}

.view-directions {
    display: inline-block;
    color: #730202;
    text-decoration: none;
    border: 0.5px solid #730202;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 13px;
    margin-top: 20px; /* 適切なスペースに調整 */
    transition: background-color 0.3s, color 0.3s, transform 0.3s; /* トランスフォームのトランジションを追加 */
}

.view-directions:hover {
    background-color: #730202;
    color: #fff;
}

@media (max-width: 768px) {
    .tourist-info .spot {
        width: 90%;
    }
}