.area-box {
  padding :0 0 50px;
}
.teigaku-ttl{
  font-size: max(1.8vw, 1em);
  font-weight: 600;
  line-height: 1.8;
}
.area-wrap{
  margin: 4.5em 0 2em;
}
.area-wrap h3{
  font-size: 1.6em;
  display: inline-block;
  position: relative;
  margin-bottom: .8em;
}
.area-wrap h3:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  display: inline-block;
  width: 50px;
  height: 1px;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
}
.area-wrap p{
  text-align: left;
  font-size: .9em;
  line-height: 1.5;
  margin: .6em 0 1em;
}
#area1 h3:before {
  background-color: #aac4ef;
}
#area2 h3:before {
  background-color: #ca6d76;
}
#area3 h3:before {
  background-color: #60b4c3;
}
#area4 h3:before {
  background-color: #f1ad6b;
}
#area5 h3:before {
  background-color: #eab548;
}
#area6 h3:before {
  background-color: #cfddc0;
}
#area2 p,#area4 p,#area5 p,#area6 p{
  text-align: center;
}
.area-wrap .item{
  font-weight: 600;
}
.area-list{
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.area-list th{
  border: 1px solid #c0cad5;
  background: #fff;
  text-align: center;
  padding: 10px;
  width: 33%;
}
.area-list td {
  border: 1px solid #c0cad5;
  background: #fff;
  text-align: center;
  padding: 10px;
}
#area1 th,#area1 .item{
  background: #eff2f6;
}
#area2 th,#area2 .item{
  background: #fff9fa;
}
#area3 th,#area3 .item{
  background: #f6fbfc;
}
#area4 th,#area4 .item{
  background: #f8eee6;
}
#area5 th,#area5 .item{
  background: #f9f7eb;
}
#area6 th,#area6 .item{
  background: #f1f7e8;
}

@media only screen and (min-width: 768px){
}

@media only screen and (max-width: 768px){
.area-box {
  padding:
0 0 20px;
}
.area-wrap{
  margin-top: 2.5em;
}
.area-wrap p{
  font-size: 13px;
}
.area-wrap h3{
  font-size: 1.3em;
}
.area-list th,.area-list td{
  font-size: 12px;
  padding: 6px;
}

}