@use 'pages' as var;
body #contents #main #lead.bg-location {
  color: #fff;
  background: #231f21;
  position: relative;
  text-align: left;
}
body #contents #main .bg-location:after {
  content: '';
  display: block;
  background: url(../img/access/bg1.png) no-repeat;
  background-size: 100%;
  width: 360px;
  height: 760px;
  position: absolute;
  right: 0;
  top: 0;
}
body #contents #main .contents-item #position .content-detail {
  padding: 100px 0 50px; }
  body #contents #main .contents-item #position .content-detail h3 {
    background-image: url(../img/location/position_h3-logo.png);
    padding: 15px 0;
    margin: 0 0 40px; }
body #contents #main .contents-item #shopping .content-detail {
  padding: 50px 0 50px; }
  body #contents #main .contents-item #shopping .shopping-intro .content-detail {
    padding-bottom: 0;
  }
  body #contents #main .contents-item #shopping .content-detail h3 {
    background-image: url(../img/location/shopping_h3-logo.png);
    padding: 15px 0;
    margin: 0 0 40px; }
  body #contents #main .contents-item #shopping .content-detail h4 {
    display: block;
    width: 100%;
    padding: 10px 0 5px;
    color: #fff; }
    body #contents #main .contents-item #shopping .content-detail h4 span {
      text-align: center;
      width: 100%;
      display: block; }
      body #contents #main .contents-item #shopping .content-detail h4 span.ttl {
        font-size: 22px;
        line-height: 24px;
        letter-spacing: 0; }
      body #contents #main .contents-item #shopping .content-detail h4 span.info {
        font-size: 12px;
        line-height: 24px;
        letter-spacing: 0; }
    body #contents #main .contents-item #shopping .content-detail h4.shopping-pink {
      background-color: #ca4772; }
    body #contents #main .contents-item #shopping .content-detail h4.shopping-orange {
      background-color: #cd5d00; }
  body #contents #main .contents-item #shopping .content-detail p.text {
    text-align: left; }
  body #contents #main .contents-item #shopping .content-detail .grid2, body #contents #main .contents-item #shopping .content-detail .grid2to2 {
    grid-gap: 20px 30px; }
    body #contents #main .contents-item #shopping .content-detail .grid2 dd.grid2, body #contents #main .contents-item #shopping .content-detail .grid2to2 dd.grid2 {
      grid-gap: 20px 15px; }
  body #contents #main .contents-item #shopping .content-detail .grid3 {
    margin-top: 40px;
    grid-gap: 20px 15px; }
body #contents #main .contents-item #park .content-detail {
  padding: 50px 0 50px; }
  body #contents #main .contents-item #park .content-detail h3 {
    background-image: url(../img/location/park_h3-logo.png);
    padding: 15px 0;
    margin: 0 0 40px; }
  body #contents #main .contents-item #park .content-detail .grid2, body #contents #main .contents-item #park .content-detail .grid2to2 {
    grid-gap: 20px 30px; }
    body #contents #main .contents-item #park .content-detail .grid2 dd.grid2, body #contents #main .contents-item #park .content-detail .grid2to2 dd.grid2 {
      grid-gap: 20px 15px; }
  body #contents #main .contents-item #park .content-detail .grid3 {
    margin-top: 40px;
    grid-gap: 20px 15px; }
  body #contents #main .contents-item #park .content-detail .flex3 {
    margin-top: 40px; }
body #contents #main .contents-item #education .content-detail {
  padding: 50px 0 50px; }
  body #contents #main .contents-item #education .content-detail h3 {
    background-image: url(../img/location/education_h3-logo.png);
    padding: 15px 0;
    margin: 0 0 40px; }
  body #contents #main .contents-item #education .content-detail .grid2, body #contents #main .contents-item #education .content-detail .grid2to2 {
    margin-top: 40px;
    grid-gap: 20px 30px; }
    body #contents #main .contents-item #education .content-detail .grid2 dd.grid2, body #contents #main .contents-item #education .content-detail .grid2to2 dd.grid2 {
      grid-gap: 20px 15px; }
  body #contents #main .contents-item #education .content-detail .grid3 {
    grid-gap: 20px 15px; }
body #contents #main .contents-item #public .content-detail {
  padding: 100px 0 50px; }
  body #contents #main .contents-item #public .content-detail h3 {
    background-image: url(../img/location/public_h3-logo.png);
    padding: 15px 0;
    margin: 0 0 40px; }
  body #contents #main .contents-item #public .content-detail .grid3 {
    grid-gap: 20px 15px; }
  body #contents #main .contents-item #public .content-detail .flex3 {
    margin-top: 40px; }
body #contents #main .contents-item #topic .content-detail {
  position: relative;
  padding: 50px 0 80px; }
  body #contents #main .contents-item #topic.bg-charcoal .content-detail .content-caption>li{
    color: #fff;
   }
  body #contents #main .contents-item #topic .content-detail h3 {
    color: #d7d3cb;
    font-size: 22px;
    margin: 0;
  letter-spacing: 2px;}
  body #contents #main .contents-item #topic .content-detail .main-lead {
    padding: 0 0 30px;
  color: #fff;}
  body #contents #main .contents-item #topic .content-detail .flex3 {
    padding: 0 0 20px; }
    body #contents #main .contents-item #topic .content-detail .flex3 figure {
      padding: 0 0 20px;
      width: 80%;
      margin: 0 auto; }
    body #contents #main .contents-item #topic .content-detail .flex3 p {
      text-align: left;
    color: #fff;}
      body #contents #main .contents-item #topic .content-detail .flex3 p.topics-ttl {
        padding: 10px 0;
        border-top: 1px solid #fff;
      color: #fff;}
body #contents #main .contents-item #lifeinfo .content-detail {
  position: relative;
  padding: 50px 0 80px; }
  body #contents #main .contents-item #lifeinfo .content-detail h3 {
    margin: 0 0 50px;
  color: #fff;
font-size: 26px;
letter-spacing: 2px;}
  body #contents #main .contents-item #lifeinfo .content-detail .grid2 {
    margin-top: 50px; }
    body #contents #main .contents-item #lifeinfo .content-detail .grid2 dl {
      padding-bottom: 30px; }
      body #contents #main .contents-item #lifeinfo .content-detail .grid2 dl figure {
        padding-bottom: 30px; }
body #contents #main .contents-item h4 {
  padding: 0 0 32px; }

#contents #main article.location-bg {
  background: url(../img/access/bg2.jpg) repeat-y;
  background-size: 100%;
  padding: 80px 0 0;
}
.location-content-img {
  position: relative;
}
.location-content-img:after {
  content: '';
  display: block;
  background: url(../img/access/bg3.png) no-repeat;
  background-size: 100%;
  width: 360px;
  height: 760px;
  position: absolute;
  left: 0;
  top: 0;
}
#park .location-content-img:after,
#public .location-content-img:after {
  background: url(../img/location/bg3.png) no-repeat;
  background-size: 100%;
  left: unset;
  right: 0;
}
.location-content-img img {
  width: 100%;
}
.shopping-intro {
  background: url(../img/location/img02.png) no-repeat;
  background-size: 670px;
  background-position: right top;
}
.education-intro {
  background: url(../img/location/img20.png) no-repeat;
  background-size: 670px;
  background-position: right top;
}
body #contents #main article .shopping-intro p.main-lead,
body #contents #main article .shopping-intro p.main-text,
body #contents #main article .education-intro p.main-lead,
body #contents #main article .education-intro p.main-text {
  text-align: left;
  color: #231815;
}
body #contents #main article .content-detail .flex2.align-bottom {
  align-items: flex-end;
}
body #contents #main article #park p.main-lead,
body #contents #main article #park p.main-text,
body #contents #main article #public p.main-lead,
body #contents #main article #public p.main-text {
  color: #231815;
}
body #contents #main article #park p.main-lead,
body #contents #main article #public p.main-lead, {
  padding-bottom: 30px;
}
body #contents #main article #park p.main-text,
body #contents #main article #public p.main-text {
  margin-bottom: 50px;
}

#lifeinfo {
  background: #000;
}

#topic {
  background: #595757;
}

/*SP ONLY*/
@media screen and (max-width: 750px) {
  body #contents #main .contents-item #shopping .content-detail h4 span.ttl {
    font-size: 2rem;
    line-height: 1.5em;
    letter-spacing: 0; }
  body #contents #main .contents-item #shopping .content-detail h4 span.info {
    font-size: 1.2rem;
    line-height: 1.5em;
    letter-spacing: 0; }
  body #contents #main article #shopping .content-detail .flex3 > figure,
  body #contents #main article #shopping .content-detail .flex3 > figure:nth-child(even) {
    padding: 0 10px;
    width: calc(50% - 20px);
  }
  .shopping-intro,
  .education-intro {
    padding-top: 480px;
  }
}

/*# sourceMappingURL=location.css.map */