body {
    margin: 0;
}

#top {
    width: 100%;
    height: 80vh;
    margin-top: 41px;

    position: relative;
    background-position: bottom;
    background-size: cover;

}


#top .title {
    color: white;

    position: absolute;
    bottom: 80px;
}

#top .title h1.white {
    position: absolute;
    left: 0px;
    bottom: 70px;
    color: white;
    z-index: 3;
}

#top .title h1.cyan {
    position: absolute;
    left: -2px;
    bottom: 68px;
    color: cyan;
    z-index: 2;
}

#top .title h1.magenta {
    position: absolute;
    left: 2px;
    bottom: 72px;
    color: magenta;
    z-index: 1;
}

#top .title .title_1 {
    font-size: 40px;
}

#top .title .title_2 {
    font-size: 70px;
}

#top .title .title_3 {
    font-size: 60px;
}

#top .title h4 {
    width: 90%;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: white;
    text-shadow: 1px 1px 0px black;

    position: relative;
    left: 3%;
}

#top .scroll-info {
    margin-bottom: 0;
    display: block;
    margin: auto;
    padding: auto;
    justify-content: center;
    text-align: center;

    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#top .scroll-info p {
    padding-bottom: 10px;
    color: white;
    font-size: 8px;
    letter-spacing: 0.1em;
}

#top .scroll-info img {
    margin: auto;
}


#briefingInfo {
    /* background-color: pink; */
    position: relative;
    width: 90%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

#briefingInfo .circle {
    position: absolute;
    width: 550px;
    height: 550px;
    background-color: #FCCFCF;
    border-radius: 50%;

    z-index: -1;
    left: -245px;
    top: -20px;
}

#briefingInfo h2 {
    font-size: 25px;
    letter-spacing: 0.2em;
}

#briefingInfo h3 {
    font-size: 50px;
}

#briefingInfo h4 {
    font-size: 25px;
}

#briefingInfo p {
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 30px;
}

#briefingInfo ul {
    font-size: 13px;
    padding-left: 15px;
}

#briefingInfo button {
    letter-spacing: 0.2em;
    width: 100%;
    height: 60px;
    border: none;
    background-color: white;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.132);
    ;
}

#siteInfo {
    width: 90%;
    margin: auto;
    margin-bottom: 60px;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

#siteInfo h2 {
    font-size: 25px;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
}

#siteInfo h3 {
    font-size: 14px;
    letter-spacing: 0.2em;
}

#siteInfo p {
    font-size: 13px;

    margin-bottom: 30px;
}

#google-map {
    background-color: rgb(232, 227, 219);
}

.moreinfo {
    width: 90%;
    margin: auto;
    margin-bottom: 70px;
    font-size: 14px;
}

.toLinks {
    margin-bottom: 20px;
    position: relative;
}

.link-box {
    position: relative;

    width: 90%;
    height: 340px;

    margin-bottom: 70px;
}

.toLinks>.link-box:nth-child(odd) {
    left: 0;
    right: auto;
    background-color: #D2ED95;
}

.toLinks>.link-box:nth-child(even) {
    right: -10%;
    background-color: #83D4FF;
}

.link-box .text-contents {
    position: absolute;
    top: -30px;
    left: 20px;
}

.link-box h2 {
    font-size: 60px;
    letter-spacing: 0.1em;
    margin: 0;
}

.link-box h3 {
    font-size: 20px;
    letter-spacing: 0.1em;
}

.link-box .link-img {
    width: 95%;
    height: 230px;

    position: absolute;
    right: -11%;
    bottom: 20px;

    background-size: cover;
    background-position: center;
}

.toLinks>.link-box:nth-child(even) .link-img {
    left: -11%;
}



.toLinks>.link-box:nth-child(odd) .link-img .window {
    position: absolute;
    bottom: 7px;
    left: 7px;
}

.toLinks>.link-box:nth-child(even) .link-img .window {
    position: absolute;
    bottom: 7px;
    right: 7px;
}