@charset "UTF-8";
/* ----------------------------------------------
pageTitle
----------------------------------------------*/
#pageTitle h1 {
  background: url(../img/title-back-sp.png) center top 20px no-repeat;
  background-size: 780px auto;
}
@media print, screen and (min-width:768px) {
  #pageTitle h1 {
    background: url(../img/title-back.png) center top 40px no-repeat;
    background-size: 980px auto;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #pageTitle h1 {
      background: url(../img/title-back@2x.png) center top 40px no-repeat;
      background-size: 980px auto;
    }
  }
}
/* ----------------------------------------------
sitemap
----------------------------------------------*/
#sitemap {
  width: 100%;
  padding: 40px 0 70px;
}
#sitemap .inner {
  margin: 20px 5% 0;
  padding: 10px 15px 8px;
  border: 2px solid #ccc;
  border-radius: 15px;
  position: relative;
}
#sitemap .inner.large {
  padding: 0;
}
#sitemap .inner.contact {
  border: 2px solid #EBC300;
  background-color: #EBC300;
  padding: 0;
}
#sitemap h2 {
  font-size: 2.4rem;
  font-weight: 500;
}
#sitemap .large h2, #sitemap .contact h2 {
  text-align: center;
}
#sitemap .inner.large h2 a {
  padding: 24px 15px;
  -webkit-transition: all .5s;
  transition: all .5s;
  border-radius: 13px;
}
#sitemap a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #333;
}
#sitemap ul {
  list-style: none;
}
#sitemap li {
  padding: 5px 0;
}
#sitemap li + li {
  border-top: 1px dashed #ccc;
}
#sitemap li a {
  display: block;
  padding: 10px 15px 10px 2em;
  position: relative;
  color: #666;
  font-size: 2.1rem;
  font-weight: 400;
  -webkit-transition: all .5s;
  transition: all .5s;
}
#sitemap li a::before {
  content: "";
  width: 8px;
  height: 2px;
  background-color: #ebc300;
  position: absolute;
  top: 50%;
  left: 1.3em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#sitemap .contact a {
  display: block;
  width: 100%;
  padding: 24px 15px;
  background-color: #EBC300;
  border-radius: 13px;
  color: #fff;
  -webkit-transition: all .5s;
  transition: all .5s;
}
@media print, screen and (min-width:768px) {
  #sitemap {
    width: 855px;
    margin: 0 auto;
    padding: 80px 0 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #sitemap .inner {
    margin: 50px 0 0;
    padding: 0;
    border: 2px solid #ccc;
    border-radius: 15px;
    position: relative;
  }
  #sitemap .inner.large h2 a {
    display: block;
    width: 100%;
    padding: 30px 15px;
    -webkit-transition: all .5s;
    transition: all .5s;
    border-radius: 13px;
  }
  #box01.inner {
    width: 600px;
    padding: 30px 20px 30px 300px;
  }
  #box02 {
    width: 235px;
    align-self: flex-start;
  }
  #box03.inner {
    width: 495px;
    padding: 30px 20px 0 160px;
  }
  #box03.inner {
    border: none;
  }
  #box04 {
    width: 340px;
    align-self: stretch;
  }
  #box05, #box06 {
    width: 100%;
  }
  #box05.inner {
    padding: 30px;
  }
  #box05 h2 {
    text-align: center;
  }
  #box05 ul {
    display: flex;
    justify-content: space-between;
  }
  #box05 ul li a {
    padding-left: 0.7em;
  }
  #box05 ul li a::before {
    left: 2px;
  }
  #sitemap .inner h2 a:hover,
	#sitemap li a:hover {
    color: #EBC300;
  }
  #sitemap .contact a:hover {
    background-color: #fffde6;
    color: #EBC300;
  }
  #sitemap li + li {
    border-top: none;
  }
  #sitemap ul {
    margin-top: 20px;
  }
  #sitemap li a {
    display: block;
    padding: 0 0 0 2em;
    position: relative;
    color: #666;
    font-size: 2.1rem;
    font-weight: 400;
    -webkit-transition: all .5s;
    transition: all .5s;
  }
}
/* ----------------------------------------------
illust
----------------------------------------------*/
#sitemap .illust {
  position: absolute;
}
#box01 .illust {
  right: 0;
  top: -20px;
}
#box03 .illust {
  right: 0;
  top: 0;
}
#box05 .illust {
  right: 0;
  top: -20px;
}
@media print, screen and (min-width:768px) {
  #box01 .illust {
    left: 0;
    top: 15px;
  }
  #box02 .illust {
    left: 20%;
    top: 75%;
  }
  #box03 .illust {
    left: 15px;
    top: -15px;
  }
  #box04 .illust {
    left: 0;
    top: 30%;
  }
  #box05 .illust {
    right: 30px;
    top: -60%;
  }
}
@media screen and (max-width:360px) {
  #box01 .illust img {
    width: 100px;
    height: auto;
  }
}