.page-top-img-wrapper::after {
   background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .7) 40%, rgb(175 213 211 / 40%) 70%, rgb(96 223 194 / 40%) 100%);
}
/*------------------------------------------------------------ area list*/

.area h1{
  margin-bottom:29px!important;
}
.area h2, .area h3, .area h4{
  text-align: center;
}

.area-h3-container {
   text-align: center;
   margin: 80px auto 0;
   border-bottom: 1px dashed;
   width: 150px;
}

.page.area h3{
   font-size: 22px;
   padding: 0 0 10px;
   margin: 0;
}
.area h3 a{
   color: #000;
   display: block;
}
.area h4{
   font-size: 18px;
   margin: 50px 0 20px;
}
.area h2:nth-of-type(1){
   font-size:30px;
   margin: 80px 0;
}

.area p{
  text-align:center;
  margin-bottom:20px;
}
.area-list{
  display: flex;
  gap: 15px;
  width: 700px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.area-list.no-child{
   margin-top: 20px;
}
.area-list li{
   font-size: 1rem;
   margin-bottom: 0;
   font-weight: normal;
 }
.area-list a{
  color: #333;
  padding: 5px 0;
  border-bottom: 1px solid #e1e1e1;
  transition: .5s;
}

.area-list li a:hover{
  color: rgb(70, 182, 176);
  transition: .5s;
}

.navigation.pagination{
  width: 750px;
  margin: 20px auto 0;
  display: flex;
  justify-content: flex-end;
}

.page-numbers{
  padding: 0 5px;
}

/*************************************************************
1024px
**************************************************************/
@media screen and (max-width: 1024px) {
  div.area.contents-container{
    width:100%;
  }
  .area-list{
    width: 100%;
  }
}


/*************************************************************
599px
**************************************************************/
@media screen and (max-width: 1024px) {
.area h2:nth-of-type(1){
   font-size: 24px;
   margin: 50px 0 50px;
   line-height: 1.6em;
}
}