#area_archive .intro{
    border: 5px solid #c6e1ec;
    padding:40px 70px;
    gap: 2vw;
    margin-bottom: 60px;
}
#area_archive .intro img{
  width: 25%;
}
#area_archive .intro h3{
    font-size: clamp(22px, 1.7vw, 32px);
    margin-bottom: 25px;
}
.area-list{
    background: #c1dfff;
    padding: 20px 40px 30px;
}
.area-list h4{
    text-align: center;
    font-size: clamp(22px, 1.7vw, 32px);
    margin-bottom: 20px;
}
.area-list ul{
    background:#fff;
    padding: 20px 40px;
    border-radius: 10px;
    gap: 13px 0;
}
.area-list ul li{
    width: 14%;
    font-size: 16px;
}

.area-list ul li a{
    position: relative;
    padding-left: 22px;
    display: block;
}

.area-list ul li a::before {
    content: '';
    background: url(../img/common/right-arrow.svg) no-repeat;
    background-size: contain;
    width: 19px;
    height: 19px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) {
    #area_archive .intro{
        padding: 30px;
    }
    .area-list{
	  padding: 20px 30px ;
	}
    .area-list ul{
	  padding: 30px 20px;
	}
    .area-list ul li{
	  width: 20%;
      font-size: 14px;
	}
  }
  @media only screen and (max-width: 568px) {
    #area_archive .intro{
        border-radius: 0;
        margin:0 -5.7vw 30px ;
        flex-direction: column;
        border-left: none;
        border-right: none;
        padding: 20px;
    }
    #area_archive .intro img{
        width: 50%;
        display: block;
        margin: 0 auto 10px;
    }
    #area_archive .intro h3{
        margin-bottom: 10px;
    }
    .area-list h4{
	  font-size: 20px;
      margin-bottom: 10px;
	}
    .area-list{
	  padding: 10px 20px 20px;
	}
    .area-list ul{
        padding: 20px 10px;
        gap: 8px 5px;
      }
    .area-list ul li {
	  width: 49%;
	}
    .area-list ul li a{
	  position: relative;
	  padding-left: 1em;
	  display: block;
      padding-left: 15px;
	}
    .area-list ul li a::before{
	width: 10px;
	height: 10px;
	}
  }