/*トップ画像スタイル*/
#mainImg {
  position: relative;
  background: rgba(0, 0, 0, 1);
}

#mainImg img {
  opacity: 0.6;
  vertical-align: bottom;
}

#mainImg .main-img-text-root {
  position: absolute;
  top: 50%;
  left: 5%;
  color: #FFF;
  display: block;
}

.main-img-text-root p:first-child {
  font-size: 3rem;
}

.main-img-text-root p:nth-child(2) {
  font-size: 1.5rem;
  margin-top: -1.3rem;
  text-align: right;
}

/*コンテンツ外枠*/
.contentWrap h2 {
  width: 60%;
  margin: 70px auto;
  font-size: 22px;
  font-weight: normal;
  text-align: center;
}

.contentWrap h2 span {
  padding-bottom: 20px;
  border-bottom: 3px solid #000;
}

.contentWrap {
  width: 80%;
  margin: 0 auto;
  clear: both;
}

/*コンテンツの基礎*/
.contentWrap .inner {
  border-bottom: 1px solid #a0a0a0;
}

/*コンテンツ下の線*/
.innerS {
  width: 70%;
  margin: 0 auto;
  padding-bottom: 80px;
  text-align: center;
}

.innerS p:last-child {
  text-align: right;
  margin-right: 10vw;
}

/*メッセージテキスト装飾*/

/*Gallery*/
#gallery {
  overflow: hidden;
}

#gallery li {
  float: left;
  width: calc(100% / 3);
  line-height: 0;
}

#gallery li.full {
  width: 100%;
}

/*pc表示で横いっぱいになっている画像*/
#gallery img {
  display: block;
  width: 100%;
  height: auto;
}


/*BRAND*/
ul.bland .img {
  margin: 0 auto;
}

ul.bland a {
  width: 70%;
  margin: 0 auto;
  border: 1px solid #666;
  text-align: center;
  padding: 0;
}


/*ITEM SHOP*/
.item-banner,
.shop-banner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-banner div {
  width: 49%;
}

.item-banner a {
  width: 100%;
}

.shop-banner div {
  width: 33%;
  margin-bottom: 50px;
}

.shop-banner div img {
  width: 80%;
}

.shop-banner a {
  color: #000;
  font-size: 90%;
}


/*COMPANY*/
.map p {
  margin-bottom: 5px;
  font-size: 16.2px;
}

.map {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.map li {
  width: 50%;
  margin: 20px 0;
}

.map li:nth-child(odd) {
  flex: 0 0 35%;
}

.map li:nth-child(even) {
  flex: 0 0 65%;
}

#map {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  z-index: 0;
}

#map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}


/* RESPONSIVE 設定*/
/*PC設定*/
@media only screen and (min-width: 800px) {

  /* BRAND*/
  ul.bland {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  ul.bland li {
    margin: 5% 1.5%;
    flex: 0 0 30%;
    vertical-align: top;
    text-align: left;
    font-size: 82%;
  }

  ul.bland p.img {
    text-align: center;
  }

  ul.bland2 {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  ul.bland2 li {
    width: 20%;
    margin: 5% 0;
    vertical-align: top;
    text-align: left;
    font-size: 82%;
  }

  ul.bland2 p.img {
    text-align: center;
    width: 80%;
    max-width: 168px;
  }
}

/*スマホ設定*/
@media only screen and (max-width: 640px) {
  #mainImg {
    padding-top: 10%;
  }

  .main-img-text-root p:first-child {
    font-size: 1.3rem;
  }

  .main-img-text-root p:nth-child(2) {
    margin-top: -1rem;
    font-size: 1rem;
  }

  .innerS {
    width: 94%;
    padding-bottom: 30px;
  }

  #gallery li {
    width: 100%;
  }

  #map iframe {
    width: 96% !important;
    left: 2%;
  }

}

@media only screen and (max-width: 799px) {
  div.contentWrap li {
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  /*BRAND*/
  ul.bland > li {
    margin: 7% auto;
  }

  /*ITEM SHOP*/
  .item-banner div {
    width: 100%;
  }

  .item-banner a {
    width: 100%;
    padding: 0;
  }

  .shop-banner {
    display: block;
  }

  .shop-banner div {
    width: 100%;
    margin: 10% auto;
    text-align: center;
  }

  .shop-banner a {
    font-size: 100%;
    width: 100%;
  }

  .shop-banner ul {
    text-align: center;
    margin: 0 auto;
  }

  .shop-banner li {
    margin: 2% auto !important;
  }

  /*各セクションタイトル*/
  div.contentWrap h2 {
    margin: 55px auto;
  }

  /*company*/
  .map {
    display: block;
  }

  .map > li {
    text-align: left !important;
    width: 100%;
  }

  .map br {
    display: none;
  }

  /*代表画像*/
  #mainImg {
    padding-top: 0%;
  }
}