@charset "utf-8";

/* ======================================================
 * JS
====================================================== */

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width:768px) {
  /* ------------------------------------------------------
   * Override
  ------------------------------------------------------ */

  /* ------------------------------------------------------
   * Parts
  ------------------------------------------------------ */
  /* ---- brandMessageList ---- */
  .brandMessageList.corp > dt {
    background-color: #0e0d6a;
    color: #ffffff;
  }
  .brandMessageList.corp {
    margin-top: 40px;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .flexBox {
    display: flex;
    justify-content: space-between;
  }
  .flexBox .brandMessageList {
    width: calc(50% - 2px);
  }
  .brandMessageList.business > dt {
    background-color: #dfdff9;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .brandMessageList > dd {
    margin: 20px 0;
    text-align: center;
  }
  .brandMessageList.service > dt {
    background-color: #f4f4f4;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .brandMessageList > dd .brandMessageImageWrap {
    display: inline-block;
    border: 1px solid #d5d5d5;
  }
  .brandMessageList.service > dd > ul {
    display: flex;
    justify-content: space-between;
  }
  .brandMessageList.service > dd > ul li {
    width: calc((100% - 144px) / 3);
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
@media screen and (min-width: 768px) and (max-width: 980px) {
}
@media screen and (min-width: 768px) and (max-width: 812px) {}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width:767.98px) {
  /* ------------------------------------------------------
   * Override
  ------------------------------------------------------ */
  /* ------------------------------------------------------
   * Parts
  ------------------------------------------------------ */
  /* ---- brandMessageList ---- */
  .brandMessageList.corp > dt {
    background-color: #0e0d6a;
    color: #ffffff;
  }
  .brandMessageList.corp {
    margin-top: 35px;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .brandMessageList.business > dt {
    background-color: #dfdff9;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .brandMessageList > dd {
    margin: 20px 0;
    text-align: center;
  }
  .brandMessageList.service > dt {
    background-color: #f4f4f4;
  }
  .brandMessageList > dt {
    padding: 10px !important;
    font-weight: bold !important;
    text-align: center;
  }
  .brandMessageList > dd .brandMessageImageWrap {
    display: inline-block;
    border: 1px solid #d5d5d5;
  }
  .brandMessageList.service > dd > ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .brandMessageList.service > dd > ul li {
    max-width: 180px;
    width: calc((100% - 5%) / 2);
    height: 100%;
  }
  .brandMessageList.service > dd > ul li:not(:last-of-type) {
    margin-bottom: 5%;
  }

/* ----- img-vision ----- */
  .img-vision .view-sp div + div {
      margin-top: 20px !important;
  }
  .img-vision .view-sp ul li + li {
      margin-top: 10px !important;
  }

}
/* ======================================================
 * SP Media Queries
====================================================== */
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 667px) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 580px) {}
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 414px) {}
@media only screen and (max-width: 390px) {}
@media only screen and (max-width: 375px) {}
@media only screen and (max-width: 360px) {}
@media only screen and (max-width: 320px) {}