@charset "utf-8";

#main figure img {
  display: block;
  margin: 0 auto;
}
#main figure figcaption {
  text-align: center;
}
@media not all and (min-width: 768px) {
  #main dl dt,
  #main dl dd,
  #forCustomer ul li {
    font-size: calc(15 / 16 * 1rem);
  }
}

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

/* === .borderBox === */
.borderBox {
  border: 2px solid #c8e7f1;
}
@media screen and (min-width: 768px){
  .borderBox {
    padding: 20px;
  }
}
@media not all and (min-width: 768px){
  .borderBox {
    padding: 12px;
  }
}

/* === .bgGry === */
.bgGry {
  background-color: #e6e6e7;
}
@media screen and (min-width: 768px){
  .bgGry {
    padding: 20px;
  }
}
@media not all and (min-width: 768px){
  .bgGry {
    padding: 12px;
  }
}

/* === #communication === */

@media screen and (min-width: 768px){
  #communication .fBox > div {
    width: calc((100% - 12px) * 0.7);
  }
  #communication .fBox figure {
    width: calc((100% - 12px) * 0.3);
    margin-left: 12px;
  }
}
@media not all and (min-width: 768px){
  #communication .fBox figure {
    margin-top: 12px;
  }
}