.greenarea-minimamu,
.bluearea-minimamu,
.yamabukiarea-minimamu,
.orangearea-minimamu,
.yellowarea-minimamu{
  background:#fff;
  padding:10px;
  font-weight:bold;
  border-radius:10px;
  margin:0 10px;
  display:inline-block;
}

.greenarea-minimamu{ color:#96C054; }
.bluearea-minimamu{ color:#69B7B7; }
.yamabukiarea-minimamu{ color:#D89A53; }
.orangearea-minimamu{ color:#D6763D; }
.yellowarea-minimamu{ color:#E6C45D; }

.area-box{
  margin-bottom:30px;
}

.area-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}

.area-list{
  margin:10px !important;
}

.area-name{
  font-size:20px;
  padding:0 10px;
  font-weight:bold;
  color:#fff;
  width:100%;
}

.CBE197{ background-color:#96C054 !important; }
.EBB5D7{ background-color:#69B7B7 !important; }
.EBB5D8{ background-color:#D89A53 !important; }
.FEFF97{ background-color:#D6763D !important; }
.EABDA0{ background-color:#E6C45D !important; }

.area-color-top{
  width:20%;
  display:inline-block;
}

@media screen and (max-width:768px){
  .area-header{
    flex-direction:column;
  }

  .area-color-top{
    width:auto;
    min-width:130px;
  }

  .area-name{
    font-size:16px;
    padding:0 5px;
  }

  .area-list{
    font-size:12px;
  }

  .area-notice{
    font-size:14px;
  }

  .delivery-section{
    width:100%;
  }

  .greenarea-minimamu,
  .bluearea-minimamu,
  .yamabukiarea-minimamu,
  .orangearea-minimamu,
  .yellowarea-minimamu{
    padding:5px;
  }
}

@media screen and (max-width:520px){
  .area-name{
    font-size:14px;
  }

  .area-color-top{
    min-width:120px;
  }

  .greenarea-minimamu,
  .bluearea-minimamu,
  .yamabukiarea-minimamu,
  .orangearea-minimamu,
  .yellowarea-minimamu{
    font-size:12px;
    margin:0 5px;
  }
}