@media screen and (min-width:600px) {
#header .htel{
max-width: 550px;
}

#header .htel .tel a{
font-size: 26px;
width: 100%;
display: block;
}

#header .htel .res a{
width: 100%;
display: block;
font-size: 18px;
}
}

@media screen and (max-width:599px) {
#header .h1box ul.htel{
top: auto;
bottom: 0px;
max-width: none;
display: flex;
}

#header .h1box ul.htel .tel{
width: 50%;
background: #46c3be;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}

#header .h1box ul.htel .tel a{
width: 100%;
font-size: 20px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

}

#header .h1box ul.htel .tel a::before{
color: #fff;
}

#header .htel li.res {
width: 48%;
width: 50%;
background: #eb7777;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}

#header .htel .res a {
position: relative;
background: #eb7777;
color: rgb(255, 255, 255);
font-size: 16px;
padding: 5px;
font-family: "EB Garamond", serif;
letter-spacing: 2px;
}

#footer{
  margin-bottom: 50px;
}
}