/*brand hero START*/
.brand-hero {
  background: url(../images/brand-hero-bg-sm.jpg) no-repeat center center/cover;
  height: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 3vw 2rem;
}
.brand-hero .brand-hero-title {
  width: 330px;
}
.brand-hero .brand-hero-item {
  width: 300px;
}

@media screen and (min-width: 768px) {
  .brand-hero {
    height: 640px;
    background: url(../images/brand-hero-bg-lg.jpg) no-repeat center center/cover;
    padding: 3rem 3vw 3.5rem;
  }
  .brand-hero .brand-hero-title {
    width: auto;
  }
  .brand-hero .brand-hero-item {
    width: auto;
  }
}
@media screen and (min-width: 1080px) {
  .brand-hero {
    margin-bottom: 5rem;
  }
}
/*brand hero END*/
/*brand feature START*/
.brand-feature {
  background: url(../images/brand-feature-bg-sm.jpg) no-repeat bottom center/cover;
  height: max(768px, 85vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem 3vw;
}
.brand-feature .container {
  padding: 0;
}
.brand-feature figure {
  width: 200px;
  margin: 0 auto 1.5rem;
}
.brand-feature h2 {
  font-family: ten-mincho, serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.brand-feature p {
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .brand-feature h2 {
    font-size: 2.25rem;
    text-align: center;
  }
  .brand-feature p {
    text-align: center;
  }
}
@media screen and (min-width: 1080px) {
  .brand-feature {
    background: url(../images/brand-feature-bg-lg.jpg) no-repeat bottom right/cover;
    height: 640px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 1366px;
    margin-left: auto;
    margin-right: auto;
    padding: min(4.5vw, 5rem);
  }
  .brand-feature .container {
    margin: 0 auto 0 0;
    width: 50%;
  }
  .brand-feature figure {
    margin: 0 0 2.5rem;
    width: auto;
  }
  .brand-feature h2 {
    text-align: left;
    margin-bottom: 3rem;
  }
  .brand-feature p {
    text-align: left;
    line-height: 1.75;
  }
}
/*brand feature END*/
/*brand customer START*/
.brand-customer {
  padding: 3.5rem 3vw;
}
.brand-customer h2 {
  padding-bottom: 2rem;
  font-family: ten-mincho, serif;
  font-size: 1.5rem;
  text-align: center;
  position: relative;
  margin-bottom: 2rem;
}
.brand-customer h2::after {
  content: "";
  width: 80px;
  height: 2px;
  background: #131417;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.brand-customer p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}
.brand-customer .brand-customers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem 0.5rem;
}
.brand-customer .brand-customers figure {
  -ms-flex-preferred-size: calc(50% - 0.25rem);
      flex-basis: calc(50% - 0.25rem);
  text-align: center;
}
.brand-customer .brand-customers figure figcaption {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

@media screen and (min-width: 768px) {
  .brand-customer h2 {
    font-size: 2.25rem;
  }
  .brand-customer p {
    margin-bottom: 2.5rem;
    text-align: center;
  }
  .brand-customer .brand-customers {
    gap: 2rem 1rem;
  }
  .brand-customer .brand-customers figure {
    -ms-flex-preferred-size: calc(33.33% - 0.667rem);
        flex-basis: calc(33.33% - 0.667rem);
  }
  .brand-customer .brand-customers figure figcaption {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 1080px) {
  .brand-customer {
    max-width: calc(1366px + 6vw);
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem;
  }
  .brand-customer .brand-customers {
    gap: 2rem;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .brand-customer .brand-customers figure {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}
/*brand customer END*/
/*brand merit START*/
.brand-merit {
  padding: 0 3vw 3.5rem;
}
.brand-merit h2 {
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem 0;
  font-family: ten-mincho, serif;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 2rem;
}
.brand-merit .decoration {
  font-size: 3.75rem;
  line-height: 1;
  margin-bottom: 2rem;
}
.brand-merit .decoration span {
  line-height: 1;
}
.brand-merit .decoration span:nth-child(1) {
  color: #888888;
}
.brand-merit .decoration span:nth-child(2) {
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 0 #888888, -1px 0 #888888, 0 1px #888888, 0 -1px #888888, 1px 1px #888888, -1px -1px #888888, 1px -1px #888888, -1px 1px #888888;
  letter-spacing: 0.05em;
}
.brand-merit ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.brand-merit ul li {
  min-height: 4rem;
  padding: 1.25rem 2rem;
  background: #fafafa;
  border-left: 2px solid #888888;
  font-size: 1.125rem;
}
.brand-merit .container {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
.brand-merit figure {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .brand-merit h2 {
    font-size: 2rem;
    padding: 0.7rem 0;
    margin-bottom: 2rem;
  }
  .brand-merit .decoration {
    font-size: 5rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (min-width: 1080px) {
  .brand-merit {
    padding-bottom: 5rem;
    max-width: calc(1366px + 6vw);
    margin-left: auto;
    margin-right: auto;
  }
  .brand-merit .container {
    max-width: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: min(5vw, 5rem);
  }
  .brand-merit .container > * {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
  .brand-merit h2 {
    text-align: left;
  }
}
/*brand merit END*/
/*brand items START*/
.brand-items {
  margin-bottom: 3.5rem;
}
.brand-items .brand-cover {
  padding: 4rem 3vw;
  min-height: 225px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 3vw;
  background: url(../images/brand-cover-bg-sm.jpg) no-repeat center center/cover;
  margin-bottom: 3.5rem;
}
.brand-items .brand-cover h2 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.75rem 0.5rem;
  background: #fff;
  font-size: 1.5rem;
  font-family: ten-mincho, serif;
}
.brand-items .items {
  margin-bottom: 3.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 3vw;
  gap: 2rem 0;
  position: relative;
}
.brand-items .items .item {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  border-right: 1px solid #ddd;
  padding: 1.5rem 1rem 1rem;
}
.brand-items .items .item:nth-child(odd) {
  border-left: 1px solid #ddd;
}
.brand-items .items .item:nth-child(4) figure figcaption {
  font-size: 1.25rem;
  line-height: 1.7;
}
.brand-items .items .item figure {
  text-align: center;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  margin-bottom: 1rem;
}
.brand-items .items .item figure img {
  width: 40px;
  height: auto;
}
.brand-items .items .item figure figcaption {
  font-family: ten-mincho, serif;
  font-size: 1.5rem;
  margin: 0.875rem 0 1rem;
}
.brand-items .items .item p {
  font-size: 0.8125rem;
  line-height: 1.5;
}
.brand-items .items .circle-text {
  width: 80px;
  height: 80px;
  position: absolute;
  top: -2rem;
  right: 0;
}
.brand-items .brand-support {
  padding: 0 3vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
.brand-items .brand-support h3 {
  font-size: 1.5rem;
  padding: 1rem 0;
  font-family: ten-mincho, serif;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 2rem;
}
.brand-items .brand-support p {
  margin-bottom: 2rem;
}
.brand-items .brand-support figure {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .brand-items .brand-cover {
    min-height: 300px;
  }
  .brand-items .brand-cover h2 {
    font-size: 2rem;
    letter-spacing: normal;
    padding: 1.5rem;
  }
  .brand-items .brand-cover h2 br {
    display: none;
  }
  .brand-items .items .item p {
    font-size: 0.875rem;
  }
  .brand-items .brand-support h3 {
    font-size: 2rem;
    line-height: 1.25;
    padding: 0.7rem 0;
    text-align: center;
  }
}
@media screen and (min-width: 1080px) {
  .brand-items {
    margin-bottom: 5rem;
  }
  .brand-items .brand-cover {
    margin-bottom: 5rem;
  }
  .brand-items .items {
    max-width: calc(1366px + 6vw);
    margin-left: auto;
    margin-right: auto;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    margin-bottom: 5rem;
  }
  .brand-items .items .item {
    padding: 2.5rem 2rem;
  }
  .brand-items .items .item figure img {
    width: auto;
    height: 240px;
  }
  .brand-items .items .item figure figcaption {
    font-size: 2rem;
    margin: 1.5rem 0 1rem;
  }
  .brand-items .items .item:nth-child(odd) {
    border-left: none;
  }
  .brand-items .items .item:nth-child(1) {
    border-left: 1px solid #ddd;
  }
  .brand-items .items .item:nth-child(4) figure figcaption {
    font-size: 2rem;
    line-height: 1.3;
  }
  .brand-items .items .circle-text {
    width: min(8vw, 150px);
    height: min(8vw, 150px);
    top: -2.5rem;
    right: 3vw;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  .brand-items .brand-support {
    max-width: calc(1366px + 6vw);
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: min(5vw, 5rem);
  }
  .brand-items .brand-support > * {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
  .brand-items .brand-support h3 {
    text-align: left;
  }
  .brand-items .brand-support figure {
    text-align: left;
  }
}
/*brand items END*/
/*brand specs START*/
.brand-spec {
  margin-bottom: 3.5rem;
}
.brand-spec .brand-cover {
  padding: 4rem 3vw;
  min-height: 335px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(../images/brand-cover2-bg-sm.jpg) no-repeat center center/cover;
  margin-bottom: 2rem;
  gap: 1.5rem;
}
.brand-spec .brand-cover figure {
  width: 112px;
}
.brand-spec .brand-cover h2 {
  font-size: 1.125rem;
  font-family: ten-mincho, serif;
  color: #fff;
  line-height: 1.5;
}
.brand-spec .specs {
  padding: 0 3vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.brand-spec .specs .spec {
  background: #f7f7f7;
}
.brand-spec .specs .spec h3 {
  padding: 0.875rem;
  background: #444444;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 3rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.125rem;
}
.brand-spec .specs .spec figure {
  text-align: center;
}
.brand-spec .specs .spec > div {
  padding: 1.5rem;
}
.brand-spec .specs .spec > div p {
  font-size: 0.8125rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .brand-spec .brand-cover {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2rem;
    min-height: 300px;
  }
  .brand-spec .brand-cover h2 {
    font-size: 2rem;
    text-align: left;
    margin-top: 0.5em;
    line-height: 1.75;
    letter-spacing: normal;
  }
  .brand-spec .specs {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
  }
  .brand-spec .specs .spec {
    -ms-flex-preferred-size: calc(50% - 1rem);
        flex-basis: calc(50% - 1rem);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .brand-spec .specs .spec h3 {
    font-size: 1.375rem;
  }
  .brand-spec .specs .spec > div {
    padding: 2rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .brand-spec .specs .spec > div p {
    font-size: 0.875rem;
  }
}
@media screen and (min-width: 1080px) {
  .brand-spec {
    margin-bottom: 7.5rem;
  }
  .brand-spec .brand-cover {
    margin-bottom: 5rem;
  }
  .brand-spec .specs {
    max-width: calc(1366px + 6vw);
    margin-left: auto;
    margin-right: auto;
  }
  .brand-spec .specs .spec {
    -ms-flex-preferred-size: calc(33.33% - 1.334rem);
        flex-basis: calc(33.33% - 1.334rem);
  }
}
/*brand specs END*/