html{
    background:url("img/bar.jpg"  );
}
div#main{
    margin:0 5em;
    padding:1em;
  display: block;
  position: relative;
  box-shadow:2px 0 3px #666
  ,-2px 0 3px #666;
}
#main::after {
  content: "";
  background: url(img/paper.jpg);
  opacity: 0.95;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

div.logo-left{
    margin-left: 330px;
}

div#title{
     font-family: "Sawarabi Mincho"; 
}

.logo{
    width:300px;
    float:left;
    margin-right:2em;
    box-shadow:1px 1px 3px #000;
}

h1{
    margin:0;
     font-size:40px;
     text-shadow:1px 1px 2px rgba(0,0,0,0.5);
     box-shadow:1px 1px 3px #000;
}
h2 {
    background: url(img/h2.svg) no-repeat;
    background-size: contain;
    padding-left: 2em;
    border-bottom:1px dashed #000;
    font-family:"Sawarabi Mincho";
}
h3{
    margin:0;
}
p{
    margin:0;
}

dt{
    font-weight:bold;
}
ol{
    padding-left:1.5em;
}

.googlemap{
    text-decoration: none;
    color: black;
    border: 1px solid #666;
    border-radius: 5px;
    padding: 4px 5px 3px 0;
    background: rgba(255,255,200,0.5);
    transition: background-color 0.1s ease;
    white-space:nowrap;
}
.googlemap img{
    vertical-align: bottom;
}
.googlemap:hover{
    background: rgba(255,255,128,0.5);
}

@media (max-width: 767px)
{
    div#main{
        margin: 0 0.5em;       
    }
    div.logo-left{
        clear:both;
        margin:0;
    }
    .logo{
        float:none;
        max-width:300px;
        width:100%;
        margin:0;
    }
    div.logo-wrapper{
        text-align: center;
    }
}