label {
    display:block;
    max-width:300px;
    margin:20px auto;
    padding: 1.5em 3em;
    background-color: #df3e3e;
    border-radius: 2em;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    color:#fff;
    text-align:center;
    border-radius:40px;
    cursor :pointer;
}

label:hover{
    cursor:pointer;
    border:2px solid #df3e3e;
    background:#fff;
    color:#df3e3e;
}

input {
    display: none;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    height: 0;/*高さを0に*/
    padding: 0;/*余白を0に*/
    overflow: hidden;/*非表示に*/
    opacity: 0;/*中身を透明に*/
    transition: 0.5s;/*クリック時の動きを滑らかに*/
}

#type1:checked ~ #links1 li,
#type2:checked ~ #links2 li,
#type3:checked ~ #links3 li {
    height: auto;
    opacity: 1;
}

.menu li .wrap_ba {
  width: 800px;
  display: flex;
  margin: 2em auto;
}
@media screen and (max-width: 1280px) {
  .menu li .wrap_ba {
    width: 638px;
  }
}
@media screen and (max-width: 896px) {
  .menu li .wrap_ba {
    width: 90%;
  }
}
.menu li .wrap_ba img {
  width: 50%;
  align-self: flex-start;
}