@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : subpage.css
Description : 下層ページ
===================================================================== */
/* =====================================================================
    goods
======================================================================*/
.goods {
  padding: 10rem 0 15rem;
}
.goods-ttl {
  position: relative;
  margin-bottom: 6.5rem;
  padding-top: calc(120 / 650 * 100%);
}
.goods-ttl h2 {
  position: relative;
  padding: calc(40 / 650 * 100%) 0 calc(41 / 650 * 100%);
  width: 100%;
}
.goods-ttl h2::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 210%;
  height: 100%;
  background: url(../images/goods/bg_ttl_goods.png) no-repeat center left/100% 100%;
  z-index: -1;
}
.goods-ttl h2 img {
  margin-left: auto;
  width: calc(565 / 650 * 100%);
}
.goods-ttl-lead {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(224 / 650 * 100%);
  z-index: 1;
}
.goods-lead {
  margin-bottom: 5.5rem;
  font-size: 112%;
  font-weight: 700;
  line-height: 1.777;
}
.goods-subttl {
  position: relative;
  margin-bottom: 6rem;
  padding: 0.5em 0;
  font-size: 125%;
  font-weight: 700;
  color: #e3ba3b;
}
.goods-subttl::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background-color: #000000;
  z-index: -1;
}
.goods-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .goods-list {
    margin-left: calc(-20 / 650 * 100%);
    width: calc(690 / 650 * 100%);
  }
}
.goods-list li {
  margin: 0 4.347826087% 7rem 0;
  width: 47.8260869565%;
}
@media screen and (max-width: 767px) {
  .goods-list li:nth-child(2n) {
    margin-right: 0;
  }
}
.goods-list li figure img {
  border: 1px solid #b8b8b8;
}
.goods-list li figure figcaption {
  margin-top: 0.3em;
  font-size: 93%;
  font-weight: 700;
  line-height: 1.3;
}
.goods-list li .btn1 {
  margin-top: 3rem;
}
.goods-list li .btn1 a {
  padding: 1em 2em 1em 1em;
  width: 100%;
  font-size: 68%;
}

@media screen and (min-width: 768px) {
  .goods {
    padding: 55px 0 100px;
  }
  .goods-ttl {
    margin-bottom: 50px;
    padding-top: calc(50 / 860 * 100%);
  }
  .goods-ttl h2 {
    margin-left: auto;
    padding: calc(18 / 860 * 100%) 0 calc(23 / 860 * 100%);
    width: calc(705 / 860 * 100%);
  }
  .goods-ttl h2::before {
    width: calc(50vw + 460px);
  }
  .goods-ttl h2 img {
    width: 85.5319148936%;
  }
  .goods-ttl-lead {
    width: calc(224 / 860 * 100%);
  }
  .goods-lead {
    margin-bottom: 30px;
    font-size: 100%;
  }
  .goods-subttl {
    margin-bottom: 50px;
    padding: 0.5em;
    font-size: 125%;
  }
  .goods-subttl::before {
    margin: 0;
    width: 100%;
  }
  .goods-list li {
    margin: 0 calc(32 / 860 * 100%) 60px 0;
    width: calc(264 / 860 * 100%);
  }
  .goods-list li:nth-child(3n) {
    margin-right: 0;
  }
  .goods-list li .btn1 {
    margin-top: 20px;
  }
  .goods-list li .btn1 a {
    font-size: 1.8rem;
  }
}
/* =====================================================================
    about
======================================================================*/
.about {
  padding: 10rem 0 19rem;
  background: url(../images/about/bg_about.jpg) no-repeat bottom left 20%/cover;
}
.about-ttl {
  margin-bottom: 1.5rem;
  width: calc(392 / 650 * 100%);
}
.about-text {
  margin-left: calc(-23 / 650 * 100%);
  width: calc(695 / 650 * 100%);
}
.about-logo {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 0 -13rem 0;
  width: calc(476 / 650 * 100%);
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .about {
    padding: 50px 0 140px;
    background-position: bottom center;
  }
  .about-ttl {
    margin-bottom: 11px;
    width: calc(392 / 860 * 100%);
  }
  .about-text {
    margin: 0;
    width: 100%;
  }
  .about-logo {
    margin: 0 calc(363 / 1200 * 100%) -104px 0;
    width: calc(383 / 1200 * 100%);
  }
}
/* =====================================================================
    area
======================================================================*/
.area {
  padding: 10rem 0 24rem;
}
.area-ttl {
  margin-bottom: 11rem;
  width: calc(526 / 650 * 100%);
}
.area-lead {
  margin-bottom: 4rem;
  font-weight: 700;
  font-size: 112%;
  line-height: 1.4;
}
.area-map {
  margin-left: calc(-20 / 650 * 100%);
  width: calc(690 / 650 * 100%);
}
.area-map-img {
  margin-bottom: 6rem;
  border: 1px solid #b8b8b8;
}
.area-map-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-height: 27em;
  font-weight: 700;
  font-size: 106%;
}
.area-map-list li {
  position: relative;
  padding-left: 1.2em;
  width: 50%;
  margin-bottom: 0.8em;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.area-map-list li::before {
  content: "●";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: #1a126c;
}
.area-map-text {
  margin-top: 6rem;
  font-weight: 700;
  font-size: 93%;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.area-map-text span {
  color: #dc2424;
}

@media screen and (min-width: 768px) {
  .area {
    padding: 50px 0 160px;
  }
  .area-ttl {
    margin-bottom: 50px;
    width: calc(526 / 860 * 100%);
  }
  .area-lead {
    margin-bottom: 20px;
    font-size: 100%;
  }
  .area-map {
    margin: 0;
    width: 100%;
  }
  .area-map-img {
    margin-bottom: 30px;
    background-color: #ffffff;
  }
  .area-map-img img {
    margin: 0 auto;
    width: 70%;
  }
  .area-map-list {
    max-height: 18em;
  }
  .area-map-list li {
    width: 33.3333333333%;
  }
  .area-map-text {
    margin-top: 10px;
    font-size: 81%;
  }
}/*# sourceMappingURL=subpage.css.map */