@charset "UTF-8";
/* CSS Document */

.brand {
width: 100%;
background: url("../images/common/bg_green.webp") repeat;
}
/*==================================================
main
==================================================*/
.brand .main {
width: 100%;
position: relative;
}
.brand .main figure img {
width: 100%;
height: 356px;
-o-object-fit: cover;
object-fit: cover;
}
.brand .main .photoCap {
font-size: min(2vw, 9px);
line-height: 1.4em;
text-align: right;
position: absolute;
right: 1em;
bottom: -2em;
color: #FFF;
}
@media screen and (min-width: 1200px) {
  .brand .main figure img {
  height: 100%;
  }
  .brand .main .photoCap {
  right: 9%;
  }
}
@media screen and (max-width: 1200px) {
  .brand .main .photoCap {
  right: calc(50% - 490px);
  }
}
@media screen and (max-width: 1020px) {
  .brand .main .photoCap {
  right: 1em;
  }
}
@media screen and (max-width: 750px) {
  .brand .main figure img {
  height: auto;
  }
  .brand .main .photoCap {
  font-size: 2.2vw;
  }
}

/*==================================================
inner
==================================================*/
.brandCont {
max-width: 930px;
margin: 0 auto;
padding: 110px 35px;
}
.brandCont {
color: #FFF;
text-align: center;
}
.brandCont h2 {
max-width: 630px;
margin: 0 auto 6%;
}
.brandCont .read h3 {
font-size: min(3vw, 23px);
line-height: 1.5em;
letter-spacing: 0.1em;
margin-bottom: 1.2em;
}
.brandCont .read p {
font-size: min(2vw, 15px);
line-height: 2.8em;
letter-spacing: 0.05em;
margin-bottom: 5.5em;
}
.brandCont figure {
max-width: 630px;
margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .brandCont {
  width: 92%;
  margin: 0 auto;
  padding: 14% 0;
  display: flex;
  flex-direction: column;
  }
  .brandCont .read h3 {
  font-size: 5vw;
  line-height: 1.5em;
  text-align: center;
  margin-bottom: 1.5em;
  }
  .brandCont .read p {
  font-size: 3.8vw;
  line-height: 2.4em;
  margin-bottom: 3.5em;
  }
}