@charset "utf-8";

/* common */
html{
    font-size: 100%;
}

body{
    font-family: "Bookman Old Style","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",
    "HG明朝E","MS P明朝","MS 明朝", serif;
    color: #555;
    line-height: 2.0;
}

img{
    width:70%;
}

.wrapper{
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 10px;
}



 /* header */
 header{
     border-top: 8px solid #8c6239;
 }
 
 .header_content{
     display: flex;
     align-items: center;
     justify-content: flex-end;
     margin: 10px auto;
 }

 header nav ul {
     display: flex;
     list-style-type: none;
 }

 header nav ul li {
     margin-left: 30px;
 }

 header nav ul li a {
     text-decoration: none;
     color: #555;
 }

 header nav ul li a:hover,
 header nav ul li a:active,
 header nav ul li.current a {
     color: #8c6239;
 }

 #main_image {
     width: 50%;
     height: 70vh;
     background-image: url(../images/aboutpageimage.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }
 
 /* contents */

.section-access {
    padding: 30px 0 50px;
}

.access-img {
    text-align: center;
}
.address {
    margin-bottom: 20px;
    margin-top: 20px
}

.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
}

.map iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; 
}
 /* footer */

 footer {
     margin-top: 100px;
     padding: 30px;
     text-align: center;
     color: #fff;
     background-color: #8c6239;
 }

 footer ul {
     margin-bottom: 20px;
     font-size: 0.9rem;
 }

 footer ul li {
     display: inline-block;
     margin: 5px;
 }

 footer ul li a {
     color: #fff;
 }

 footer ul li a:link {
     text-decoration: none;
 }

 footer ul li a:hover,
 footer ul li a:active {
     opacity: .7;
 }

 small {
     font-size: 0.7rem;
 }

 /* responsive */

 @media print,screen and (max-width:640px)  {
    html {
        font-size: 0.8rem;
     }

     .header_content {
         font-size: 10px;
     }

     .contents {
         flex-direction: column;
         margin-top: 10px;
     }

     #main_content,
     #sidebar {
         width: 100%;
     }
 }