/**
 * institution.html専用のスタイル指定
 *
 * 注意:
 * 「PCファースト」の方針で記述しています。
 * はじめにPC、モバイル共通のスタイルを記述し、モバイル専用は後から上書きする形で記述しています。
 * 原則として、PC専用のメディアクエリは設けないでください。
 */
/*************************************
 * PC、モバイル共通
 *************************************/
/**
 * ヒーロー
 */
.hero2-inner {
  background: #d1f2ff;
  background-image: url(../img/institution/hero2-institution.jpg);
  background-position: right;
  background-repeat: no-repeat;
  color: #7999b8;
}
/**
 * 見出し
 */
.section-title {
  background: #7b99b9;
}
/**
 * 費用内訳
 */
.cost-container {
  margin-left: -3.75%;
}
.cost-container li {
  border: 1px solid #7b99b9;
  float: left;
  height: calc(300px - 2px);
  margin-bottom: 1em;
  margin-left: 3.614457831325301%;
  width: calc(46.3855421686747% - 2px);
}
.cost-container p {
  font-size: 14px;
  padding: 0 28px;
}
.cost-total dt,
.cost-total dd {
  float: left;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0;
}
.cost-total dt {
  background: #7b99b9;
  color: #fff;
  padding-left: 28px;
  width: calc(60% - 28px);
}
.cost-total dd {
  background: #e2e9ef;
  color: #7b99b9;
  padding-right: 28px;
  text-align: right;
  width: calc(40% - 28px);
}
.cost-breakdown {
  margin: 1em 20px;
  width: calc(100% - 40px);
}
.cost-breakdown caption {
  border-bottom: 1px solid #aaa;
  margin-bottom: 12px;
  padding: 8px;
}
.cost-breakdown th,
.cost-breakdown td {
  padding: 6px 8px;
  vertical-align: text-top;
}
.cost-breakdown td {
  text-align: right;
}
/*************************************
 * モバイル専用
 *************************************/
@media screen and (max-width: 767px) {
  .hero2-inner {
    background-image: none;
  }
  .cost-container {
    margin-left: 0;
  }
  .cost-container li {
    float: none;
    height: auto;
    margin-left: 0;
    width: auto;
  }
  .cost-container p {
    padding: 0 12px;
  }
  .cost-total dt,
  .cost-total dd {
    font-size: 100%;
    padding: 12px 0;
  }
  .cost-total dt {
    padding-left: 12px;
    width: calc(60% - 12px);
  }
  .cost-total dd {
    padding-right: 12px;
    width: calc(40% - 12px);
  }
  .cost-breakdown {
    margin: 1em 12px;
    width: calc(100% - 24px);
  }
  .cost-breakdown caption {
    padding: 8px 0;
  }
  .cost-breakdown th,
  .cost-breakdown td {
    padding: 6px 0;
  }
  .cost-breakdown td {
    padding-left: 1.5em;
    text-align: right;
  }
}