#area{
padding: 40px 0;
}

#area.funabashi,
#area.funabashi article h1 a{
background: #FFB5CC;
}

#area.chiba,
#area.chiba article h1 a{
background: #FFAC97;
}

#area.kinshicho,
#area.kinshicho article h1 a{
background:#FFD664;
}

#area.kashiwa,
#area.kashiwa article h1 a{
background:#64DFFF;
}

#area h1 *{
color: #fff;
text-transform:uppercase;
border-bottom-color: #fff;
}


#area article{
width: 800px;
margin: 0 auto;
padding: 50px;
background: #fff;
margin-bottom: 50px;
}

#area article h1{
margin-bottom: 20px;
}

#area article h1 a{
margin: 0;
display: block;
font-family: "Noto Serif JP", serif;
text-align: center;
padding: 20px 10px;
border-radius: 10px;
color: #fff;
text-decoration: none;
position: relative;
text-transform:capitalize;
}

#area article h1 a:after{
content: ">";
font-size: 150%;
position: absolute;
top:10px;
right: 10px;
opacity: .6;
}

#area article ul{
display: flex;
justify-content: space-between;
}

#area article li{
width: 49%;
}


#area article li a{
font-size: 140%;
border-radius: 5px;
padding: 10px;
display: block;
color: #fff;
position: relative;
text-decoration: none;
}

#area article li a:before{
width: 35px;
height: 35px;
content: "";
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top:10px;
left: 10px;
}

#area article li.line a{
background-color: #90E88D;
box-shadow: 5px 5px 0px 0px #74b963;
}

#area article li.line a:before{
background-image:url(../images/svg/line.svg);
}


#area article li.tel a{
background-color: #c6cbfb;
box-shadow: 5px 5px 0px 0px #959eef;
}

#area article li.tel a:before{
background-image:url(../images/svg/tel.svg);
}

@media screen and ( max-width:699px ){
  #area article{
    width: 90%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  #area article h1 a{
    font-size: .7em;
  }
  
  #area article li a{
    font-size: 120%;
  }
  #area article li a:before{
    width: 30px;
    height: 30px;
  }
}