@charset "utf-8";

.sightseeing {
    margin-block: 80px 160px;
}

.sightseeing .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sightseeing .flex .text {
    width: 30%;
    padding-left: 5%;
}

.sightseeing .flex .text .sectionTitle {
    font-size: 34px;
    font-weight: 700;
    text-shadow: 1px 1px 3px #fafafa;
    margin-bottom: 5px;
}

.sightseeing .flex .text .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.sightseeing .flex .text .description {
    font-size: 14px;
}

.sightseeing .img {
    width: 60%;
}

.sightseeing .img img {
    width: 100%;
    height: min(40vw, 500px);
    box-shadow: 10px 20px 5px #fff099;
}

.vicinity,
.spot {
    margin-bottom: 80px;
}

.vicinity .sectionTitle,
.spot .sectionTitle {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.flex {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.box {
    width: 45%;
    text-align: center;
}

.box img {
    width: 100%;
    height: min(25vw, 400px);
    margin-bottom: 20px;
    box-shadow: 1px 1px 5px #1f1f1f;
    transition: transform .8s ease-out;
}

.box img:hover {
    transform: scale(1.05);
}

.box .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.box .access {
    margin-bottom: 10px;
}

.box .access .icon img {
    width: 16px;
    height: 16px;
    margin-bottom: 4px;
    box-shadow: none;
}

.box .description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.box .btn {
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .sightseeing {
        margin-block: 40px 160px;
    }
    
    .sightseeing .flex {
        flex-direction: column-reverse;
    }

    .sightseeing .flex .text {
        width: 100%;
    }

    .sightseeing .img {
        width: 100%;
        margin-bottom: 40px;
    }

    .sightseeing .img img {
        width: 100%;
        height: min(60vw, 400px);
        box-shadow: 0 10px 5px #fff099;
    }

    .flex {
        display: block;
    }

    .box {
        width: 90%;
        margin: 0 auto 40px;
    }

    .box img {
        width: 100%;
        height: max(60vw, 250px);
        margin-bottom: 10px;
    }
}