h1{
  font-size: 2rem;
  font-family: donguri-kana,sans-serif;
  margin: 50px auto -10px;
}
h1 img{
  max-width: 80vw;
  height: 60px;
  display: block;
  margin: 10px auto ;
}
@media screen and (min-width: 900px){
  h1{
    margin: 50px auto -100px;
  }
  h1 img{
    max-width: 100%;
    height: 55px;
  }
}


#bl-contact{
  background: url(../img/bg-contact.png) left top no-repeat, url(../img/bg-grassr_sp.png) left top repeat;
  background-size: contain;
  padding: 50px 0 0;
  text-align: center;
}

#bl-contact form{
  margin: 0 auto;
  width: 600px;
}

#inquiry{
  min-height: 750px;
  text-align: center;
  padding: 230px 0 300px;
  position: relative;
}
#inquiry.p-form{
  padding-top:270px;
}

@media screen and (min-width: 900px){
  #bl-contact{
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #ede4c5 50%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ede4c5 50%);
    background: linear-gradient(to bottom,  #ffffff 0%,#ede4c5 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ede4c5',GradientType=0 );
  }
  #inquiry{
    background-image: url(../img/bg-grass.png), url(../img/bg-home.png), url(../img/bg-tree.png),url(../img/bg-grass_r.png);
    background-repeat: repeat-x, no-repeat, no-repeat, repeat-x;
    background-position: left 325px, right top -10px, top left, left 780px;
    background-size: 600px auto, auto, auto, 600px auto;
  }
  #inquiry.p-form{
    background-image: url(../img/bg-grass.png), url(../img/bg-home.png), url(../img/bg-tree.png),url(../img/bg-grass_r.png),url(../img/bg-grass_r.png);
    background-repeat: repeat-x, no-repeat, no-repeat, repeat-x, repeat-x;
    background-position: left 255px, left calc(50% + 120px) top, top left 15vw, left 786px, left 1317px;
    background-size: auto, auto 330px,auto 330px, auto, auto;
    padding-top: 400px;
  }
  #inquiry a:hover,
  #inquiry a:hover h3{
    opacity: 1;
  }
  #inquiry a:hover img{
    opacity: 1;
    -webkit-animation: hopping2 1s linear 0s infinite alternate;
    animation: hopping2 1s linear 0s infinite alternate;
  }
}
#inquiry .mailbox{
  color: #042;
  text-shadow: 0 0 5px #d8f664, 0 0 10px #d8f664, 0 0 15px #d8f564;
  display: flex;
  margin: 0 auto 40px;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
#inquiry .mailbox3,
#inquiry .mailbox3 img{
  pointer-events: none;
}
#inquiry .mailbox3 h3{
  background: url(../img/ico-close.png) center 10px no-repeat;
  opacity: .8;
}
#inquiry .mailbox3 small{
  opacity: .8;
}
@media screen and (min-width: 900px){
  #inquiry .mailbox{
    display: inline-block;
    vertical-align: bottom;
  }
  #inquiry .mailbox1,
  #inquiry .mailbox2,
  #inquiry .mailbox3{
    margin-left: 40px;
  }
}
#inquiry .mailbox img{
  margin-right: 20px;
}
@media screen and (min-width: 900px){
#inquiry .mailbox img{
  margin-right: 0;
}
}
#inquiry .mailbox0 img{
  width: 120px;
  height: auto;
}
#inquiry .mailbox1 img{
  width: 80px;
}
#inquiry .mailbox2 img{
  width: 120px;
  height: auto;
}
#inquiry .mailbox3 img{
  width: 100px;
}
#inquiry .mailbox h3{
  font-size: 2.5rem;
  line-height: 2.7rem;
  padding: 7px 0 15px;
  letter-spacing: -2px;
  display: block;
  font-weight: bold;
  opacity: .8;
}
#inquiry .mailbox h3 small{
  display: block;
}
#inquiry .mailbox h3 br{
  display: none;
}
@media screen and (min-width: 900px){
  #inquiry .mailbox h3 br{
    display: block;
  }
  #inquiry .mailbox p{
    height: 90px;
  }
}

footer{
  background: none;
  height: 120px;
  min-height: auto;
  margin-top: -120px;
  padding: 0;
}
footer .tocontact{display: none;}