@charset "UTF-8";
/* BRAND一覧ページ用 */
/* BRANDtop
------------------------------------------------------------
*/
.list_brand {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.list_brand li {
  width: 23.5%;
  margin: 0 2% 7% 0;
}
@media screen and (max-width: 767px) {
  .list_brand li {
    width: 48%;
    margin: 0 4% 7% 0;
  }
}
.list_brand li:nth-child(4n) {
  margin: 0 0 7% 0;
}
@media screen and (max-width: 767px) {
  .list_brand li:nth-child(4n) {
    margin: 0 4% 7% 0;
  }
}
@media screen and (max-width: 767px) {
  .list_brand li:nth-child(2n) {
    margin: 0 0 7% 0;
  }
}
.list_brand li a {
  display: block;
}
.list_brand li a:hover {
  opacity: 0.7;
}
.list_brand li .img_box {
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .list_brand li .img_box {
    margin-bottom: 20px;
  }
}
.list_brand li .img_box::after {
  content: "";
  display: block;
  padding-top: 100%;
}
.list_brand li .img_box img {
  position: absolute;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  font-family: "object-fit: cover; object-position: top;";
}
.list_brand li .txt_box {
  color: #000;
}
.list_brand li .txt_box .name {
  font-size: 1.56rem;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .name {
    display: block;
    font-size: 4.5vw;
  }
}
.list_brand li .txt_box .name .jp {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-size: 0.87rem;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .name .jp {
    display: block;
    text-align: right;
    margin-bottom: 3px;
    font-size: 2vw;
  }
}
.list_brand li .txt_box .country {
  border-top: 1px #000 solid;
  border-bottom: 1px #000 solid;
  padding: 10px 0;
  font-family: "Josefin Sans", sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 700;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country {
    display: block;
    padding: 10px 0 8px;
  }
}
.list_brand li .txt_box .country .img {
  line-height: 1;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country .img {
    margin-bottom: 7px;
  }
}
.list_brand li .txt_box .country .img img {
  height: 20px;
  margin-right: 8px;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country .img img {
    height: 15px;
  }
}
.list_brand li .txt_box .country .img span {
  font-size: 1.12rem;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country .img span {
    font-size: 4vw;
  }
}
.list_brand li .txt_box .country .age {
  line-height: 1;
  letter-spacing: 0.01rem;
  font-size: 1.12rem;
}
.list_brand li .txt_box .country .age.jp {
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country .age.jp {
    font-size: 3.5vw;
  }
}
@media screen and (max-width: 767px) {
  .list_brand li .txt_box .country .age {
    display: block;
    text-align: right;
    font-size: 4vw;
  }
}
.list_brand li .fukidashi {
  font-size: 0.87rem;
  background: #e1e4e5;
  padding: 20px;
  position: relative;
  word-break: break-all;
}
@media screen and (max-width: 767px) {
  .list_brand li .fukidashi {
    font-size: 3vw;
    padding: 10px;
  }
}
.list_brand li .fukidashi::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 17px;
  border-color: transparent transparent #e1e4e5 transparent;
  transform: rotate(10deg);
  top: -10px;
}/*# sourceMappingURL=layout-brand.css.map */