@charset "UTF-8";

#price {
  padding: 0 10%;
  margin: 60px 0 60px 0;
  border-radius: 10px;
  color: #090707;
}

#price .priceTitle {
  margin-bottom: 20px;
}

#price .wpTitle {
  margin-top: 40px;
}

#price table {
  width: 100%;
}

#price th {
  width: 20%;
  height: 78px;
  background-color: #30A9DE;
  color: #ffffff;
  font-weight: 600;
}

#price td {
  width: calc(100% / 3);
  height: 78px;
  background-color: #EAF6FC;
}

#price .codingTable td {
  text-align: center;
}

#price .codingTable th,
#price .codingTable td {
  font-weight: 600;
}

/*テスト*/

#price .wpTable th,
#price .wpTable td {
  text-align: left;
  padding-left: 20px;
  font-weight: 600;
}

/*角丸*/
#price .radiusTable1 {
  border-radius: 10px 0 0 0;
}

#price .radiusTable2 {
  border-radius: 0 10px 0 0;
}

#price .radiusTable3 {
  border-radius: 0 0 0 10px;
}

#price .radiusTable4 {
  border-radius: 0 0 10px 0;
}

#price .exampleSupplement {
  font-size: 16px;
  color: #838282;
  margin-top: 20px;
}

@media screen and (max-width: 1100px) {
  #price .tablePrice {
    overflow-x: scroll;
  }

  #price table {
    width: 100%;
    white-space: nowrap
  }

  #price th {
    padding: 10px;
  }

  #price td {
    padding: 20px 80px;
  }
}

@media screen and (max-width: 767px) {
  #price {
    padding: 0 5%;
    margin-bottom: 40px;
  }

  #price th {
    font-size: 16px;
  }

  #price td {
    font-size: 16px;
  }

  #price .exampleSupplement p {
    font-size: 14px;
    font-weight: 600;
  }
}