@charset "UTF-8";

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fffdd2;
    margin: 0 auto;
}

#header {
    background: url(images/main_visual.jpg) center center / cover no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 80vh;
}
#header p {
    text-align: center;
    padding: 50px;
}
#header h1 {
    text-align: center;
    background-color: rgba(0,97,141,0.8);
    padding: 10px;
    margin-top: 40px;
    color: #fff;
}
#header span {
    color: #ffff00;
}

#main {
    width: 1200px;
    margin: 0 auto;
}

.top {
    background-color: #fff;
    padding: 30px
}
.top p {
    text-align: center;
    padding: 20px;
    line-height: 30px;
}
.top h2 {
    color: #028fe2;
    text-align: center;
    border-bottom: 1px solid;
}

#nav {
    background-color: #ffff00;
    margin-bottom: 40px;
}
#nav ul {
    display: flex;
    justify-content: center;    
}
#nav li {
    list-style: none;
    padding: 10px;
}
#nav a {
    color: #028fe2;
    text-decoration: none;
}

.h3 {
    background-color: #ffff00;
    width: 570px;
    font-size: 24px;
}

.wrap {
    display: flex;
    padding: 30px;
    border-bottom: #028fe2 3px dotted;
}
section:nth-of-type(even) .wrap{
    flex-direction: row-reverse;
}
  
.sentent {
    display: flex;
    flex-direction: column;
    width: 540px;
    padding: 30px;
    line-height: 2em;
}
.map {
    background-color: #028fe2;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    margin-top: 45px;
}

#food {
    padding: 45px 30px;
}

#active {
    padding: 45px 30px;
    background-color: #fff;
}

#sea {
    padding: 45px 30px;
}

#shopping {
    padding: 45px 30px;
    background-color: #fff;
}

footer {
    background-color: #ffff00;
}
footer p {
    text-align: center;
    padding: 20px;
}

#contact {
    padding: 30px 100px;
}
#contact p {
    width: 450px;
    border-radius: 20px;
    padding: 15px 60px;
    text-align: center;
    font-size: 36px;
    background-color: #028fe2;
    margin: 50px auto;
}
#contact a {
    color: #ffff00;
    text-decoration: none;
}
#contact img {
    padding-right: 5px;
}
#page-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
}



@media screen and (max-width:896px) {
    #main {
        width: 100%;
    }

    #nav ul {
        display: block;
    }   
     #nav li {
        text-align: center;
        border-bottom: #028fe2 1px solid;
     }

    .h3{
        width: 100%;
    }
     .wrap {
        display: block;
     }
     .sentent {
        width: 100%;
     }
}