@charset "UTF-8";

/* ========================================
	watchmaison brand.css
======================================== */
.main {
  padding-bottom: 100px;
}
.each .main > .inner {
  padding-top: 100px;
}

@media (max-width: 1300px) {
  .main {
    padding-bottom: 7.692vw;
  }
  .each .main > .inner {
    padding-top: 7.692vw;
  }
}

@media (max-width: 750px) {
  .main {
    padding-bottom: 13.333vw;
  }
  .each .main > .inner {
    padding-top: 13.333vw;
  }
  .main h2 {
    margin-bottom: 13.333vw;
    padding-top: 13.333vw;
  }
}

/* anchor */
.main .brandHeader .anchor {
  display: flex;
  justify-content: center;
  margin: 65px auto 0;
}
.main .brandHeader .anchor li,
.main .brandHeader .anchor li img {
  max-width: 130px;
  width: 10vw;
}

@media (max-width: 1300px) {
  .main .brandHeader .anchor {
    margin: 5vw auto 0;
  }
}

@media (max-width: 750px) {
  .main .brandHeader .anchor {
    flex-wrap: wrap;
    justify-content: start;
    margin-bottom: 12vw;
    width: 100%;
  }
  .main .brandHeader .anchor li {
    max-width: 250px;
    width: 33%;
  }
  .main .brandHeader .anchor li img {
    max-width: 250px;
    width: 100%;
  }
}

/* synthesizingArea */
.synthesizingArea {
  padding-bottom: 100px;
}
.synthesizingArea h3 {
  padding: 100px 0 10px;
  color: #b88763;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.3em;
  border-bottom: 1px solid #b88763;
}
.synthesizingArea .items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
}
.synthesizingArea .items li:not(.title) {
  display: flex;
  align-items: center;
  padding: 30px 15px;
  max-width: 467px;
  width: 35.923vw;
  border-bottom: 1px solid #c1c1c1;
}
.synthesizingArea .items li.title {
  max-width: none;
  width: 100%;
  padding-top: 10rem;
  margin-top: -10rem;
  position: relative;
  z-index: -1;
}
.synthesizingArea .items li.title.empty {
  display: none;
}
.synthesizingArea .items li .parts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 2em;
  width: 376px;
}
.synthesizingArea .items li .parts p:first-of-type {
  margin-right: 0;
  white-space: nowrap;
}
.synthesizingArea .items li .parts p:first-of-type > span {
  display: block;
  font-size: 13px;
  color: #b88763;
}
.items .pic img,
.items .icon .iconLink,
.items .icon .iconPage {
  display: none;
}
.items .pic.logo img,
.items .icon.link .iconLink,
.items .icon.page .iconPage {
  display: block;
}
.items .icon > a {
  display: block;
  text-align: center;
}
.items .pic {
  max-width: 100px;
  width: 7.692vw;
}
.items .pic img {
  margin: auto;
  max-width: 100px;
  width: auto;
  max-height: 2em;
  height: auto;
}
.items li[logo_id="24"] .pic img,
.items li[logo_id="108"] .pic img {
  max-height: 3em;
}
.items .icon.link a img {
  max-width: 66px;
  width: 5.077vw;
}
.items .icon.page a img {
  margin-right: 2rem;
  width: 1.3rem;
}
.items li[logo_id="124"],
.items li[logo_id="80"] {
  position: relative;
}
.items li[logo_id="124"]::before,
.items li[logo_id="80"]::before {
  content: "＊12月31日(火)までの取り扱い";
  position: absolute;
  color: #f00;
  white-space: nowrap;
  bottom: 8px;
}

@media (max-width: 1300px) {
  .synthesizingArea {
    padding-bottom: 7.692vw;
  }
  .synthesizingArea h3 {
    padding: 7.692vw 0 0.769vw;
    font-size: 2.308vw;
  }
  .synthesizingArea .items li:not(.title) {
    padding: 2.308vw 1.538vw;
  }
  .synthesizingArea .items li .parts {
    width: 28.923vw;
  }
  .synthesizingArea .items li .parts p:first-of-type > span {
    font-size: 1vw;
  }
  .items .pic img {
    width: auto;
    max-width: 100%;
  }
  .items li[logo_id="124"]::before,
  .items li[logo_id="80"]::before {
    font-size: 1vw;
  }
}

@media (max-width: 750px) {
  .synthesizingArea h3 {
    padding: 10.667vw 0 1.333vw;
    font-size: 6.4vw;
  }
  .synthesizingArea .items {
    display: block;
  }
  .synthesizingArea .items li:not(.title) {
    padding: 5.333vw 3vw;
    max-width: inherit;
    width: 100%;
  }
  .items .pic {
    max-width: 160px;
    width: 21.333vw;
  }
  .synthesizingArea .items li .parts {
    width: 67.667vw;
  }
  .synthesizingArea .items li .parts p:first-of-type > span {
    font-size: 2.667vw;
  }
  .items .icon.link a img {
    max-width: 101px;
    width: 13.467vw;
  }
  .items .icon.page a img {
    margin-right: 3rem;
    width: 3rem;
  }
  .items li[logo_id="124"]::before,
  .items li[logo_id="80"]::before {
    bottom: 6%;
    left: 3vw;
    font-size: 2.6vw;
  }
}