@charset "UTF-8";

/* ==== color ========================== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary: #8CBD3D;
  --color-blue: #0081C2;
  --color-bgGray: #F2F2F2;
  --futura: "futura-pt", sans-serif;
}

/*================================================
 *  subVisual
 ================================================*/
#subVisual::before {
  background-image: url(../../images/who/subVisual.png);
}

@media screen and (max-width:767px) {
  #subVisual::before {
    background-position: center right 33%;
  }

}

/*================================================
 *  strengths
 ================================================*/
#strengths>.narrow>h3 {
  margin: 2em auto;
}

#strengths>.narrow>p {
  width: 72.5%;
  margin: 0 auto 16.8%;
}


.card__item {
  margin-top: 10%;
}

.card__img {
  width: 46.4%;
}

.card__txt {
  width: 50%;
}

.card__item h4 {
  font-size: 1.8em;
  color: var(--color-white);
  font-weight: bold;
  position: relative;
  z-index: 1;
  padding-left: 15.7%;
  width: 34.5vw;
  height: 4.38vw;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.card__item h4.sp {
  display: none;
}

.card__item h4::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../../images/who/strengths_ttl01.png);
  width: 100%;
  height: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: -1;
}

.card__item:nth-of-type(2) h4::before {
  background-image: url(../../images/who/strengths_ttl02.png);
}

.card__item:nth-of-type(3) h4::before {
  background-image: url(../../images/who/strengths_ttl03.png);
}



@media screen and (max-width:767px) {
  #strengths>.narrow>h3 {
    margin: 1.8em auto;
  }

  #strengths>.narrow>p {
    width: 100%;
    margin: 0 auto 13.5%;
  }

  .card__item {
    display: block;
    margin-top: 10vw;
  }

  .card__txt {
    width: 100%;
  }

  .card__item h4 {
    font-size: 1.55em;
    width: 77.1vw;
    height: 8.75vw;
    margin-bottom: 1em;
  }

  .card__item h4::before {
    background-image: url(../../images/who/strengths_ttl01_sp.png);
  }

  .card__item:nth-of-type(2) h4::before {
    background-image: url(../../images/who/strengths_ttl02_sp.png);
  }

  .card__item:nth-of-type(3) h4::before {
    background-image: url(../../images/who/strengths_ttl03_sp.png);
  }

  .card__item h4.pc {
    display: none;
  }

  .card__item h4.sp {
    display: flex;
  }

  .card__img {
    width: 100%;
  }

  .card__img img {
    margin: 2em 0 0;
  }

  #strengths .card__img img {
    margin: 2em 0;
  }
}

/*================================================
 *  sdgs
 ================================================*/
#sdgs {
  background: var(--color-bgGray);
}

#sdgs h2 {
  margin-bottom: 5%;
}

@media screen and (max-width:767px) {
  #sdgs h2 {
    margin-bottom: 8%;
  }
}


/*================================================
 *  roudou
 ================================================*/
#roudou {
  padding: 7vw 0 16.66vw;
}

#roudou h2 {
  margin-bottom: 5%;
}

@media screen and (max-width:767px) {
  #roudou {
    padding: 15vw 0 5.5vw;
  }

  #roudou h2 {
    margin-bottom: 8%;
  }
}