#date{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 20px 0;
}

#date li{
position: relative;
content: "";
width: 60px;
height: 60px;
border-style: solid;
border-width: 1px;
font-size: 12px;
cursor: hand;
display: table;
border-color: #ccc;
border-radius: 50%;
vertical-align: middle;
margin: 0 10px;
background: #fff;
cursor: pointer;
}

#date li:hover{
opacity: .5;
}

#date span{
display: block;
text-align: center;
}

#date .day_wrap{
display: table-cell;
text-align: center;
vertical-align: middle;
}


#date .wday0{
color: #c00;
}
#date .wday6{
color: #00c;
}
#date .on{
color: #fff;
background-color: var(--anc);
}

.girls .inner {
gap:0;
}

.girl{
width: calc(100% / 4);
}


@media (max-width: 767px){
  #date li{
    width: calc(100% / 3);
    border-radius: 0;
    height: auto;
    margin: 0;
    padding: 5px 0;
    border: 0;
  }
  #date li:hover{
    opacity: 1;
  }
  
  #date .on{
    background: #fff;
  }
  #date .day_wrap{
    padding: 5px;
  }
  
  #date .on .day_wrap{
    background: #EFA532;
    border: 0;
    border-radius: 40px;
  }
  
  #date li:nth-of-type(n+4){
    display: none;
  }
  #date span{
    display: inline;
  }
}