@charset "utf-8";

main figure img {
  display: block;
  margin: 0 auto;
}
@media not all and (min-width: 768px){
  img.sp--w90p {
    width: 90%;
  }
}

/* === .fBox (flexBox) === */
@media screen and (min-width: 768px){
  .fBox {
    display: -webkit-box;
    display: flex;
  } 
}

/* === #posture === */
@media screen and (min-width: 768px){
  #posture .fBox {
    -webkit-box-pack: center;
    justify-content: center;
    max-width: 1080px;
    margin: 24px auto 0;
  }
  #posture .fBox div {
    width: 40%;
  }
  #posture .fBox div + div {
    width: 60%;
  }
  #posture .fBox div + div p {
    margin: 0 28px;
  }
}
@media not all and (min-width: 768px){
  #posture .fBox > div {
    margin-top: 12px;
  }
}

/* === #controlAndPromotion === */
#controlAndPromotion ul.boxBgLb > li {
  background-color: #c8e7f1;
}
#controlAndPromotion .fBox > li dt {
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 768px){
  #controlAndPromotion .fBox {
    -webkit-box-align: stretch;
    align-items: stretch;
    max-width: 1080px;
    margin: 24px auto 0;
  }
  #controlAndPromotion .fBox > li {
    width: calc((100% - 60px) / 3);
    margin-left: 30px;
    padding: 16px 48px;
  }
  #controlAndPromotion .fBox > li:first-child {
    margin-left: 0;
  }
  #controlAndPromotion .fBox > li dt {
    font-size: calc(18 / 16 * 1rem);
  }
}
@media not all and (min-width: 768px){
  #controlAndPromotion .fBox > li {
    font-size: calc(14 / 16 * 1rem);
    max-width: 90%;
    width: 90%;
    margin: 12px auto 0;
    padding: 8px 10%;
  }
  #controlAndPromotion .fBox > li dt {
    font-size: calc(15 / 16 * 1rem);
  }
}