.cat-img {
     flex-basis: 40%;
     flex-shrink: 0;
}
.cat-img img{
     max-width: 100%;
}

body{
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background-color: #F2EFDC;
     font-family: "Noto Sans JP", sans-serif;
}
.header {
     font-family: "Libre Baskerville", serif;
     font-size: 1.1vw;
     text-align: center;
     color: #F2EFDC;
     background-color: #a4afe8;
     padding: 3vw;
     align-items: center;
}
.cat-info {
     margin: 5vw 20vw;
}

.cat-text{
     margin-left: 5%;
}
.cat {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
}
a {
     padding: 0.5em;
     border-radius: 38px;
     background-color: #a4afe8;
     display: inline-block;
     color: #F2EFDC;
     text-decoration: none;
     font-size: 1.2em;
     margin-bottom: -30;
}
a:hover{
     background-color:#8191dc;
     color: #ffffff;
}
#cat-list {
     font-family: "Noto Sans JP", sans-serif;
     background-color: #F2EFDC;
     border-radius: 30px;
     text-align: center;
}
#submit {
     font-family: "Noto Sans JP", sans-serif;
     background-color: #F2EFDC;
     border-radius: 30px;
}
label {
     font-size: 1.3em;
}
#cat-list:hover{
     background-color:#f9f8f2;
     color: #000000;
}
#submit:hover{
     background-color:#f9f8f2;
     color: #000000;
}

@media screen and (max-width: 1160px){
     .cat{
          display: flex;
          flex-direction: column;
          text-align: center;
     }
     .header {
          font-size: 1.4em;
     }
 }