@charset "utf-8";h1 {
      margin: 10% auto 0;
}

.headline {
      background: linear-gradient(transparent 65%, rgba(61, 85, 133, 0.6) 65%);
      padding: 0 1%;
 }

.headline2 {
      background: linear-gradient(transparent 65%, rgba(234, 85, 58, 0.6) 65%);
      padding: 0 1%;
 }

.category {
      width:40%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0 auto;
 }

.category li {
      width: 28%;
      margin: 5% auto 0;
      border: 1px solid #3d5585;
      border-radius: 0.25em;
      color: #3d5585;
      text-align: center;
      font-size: 1.8em;
}

.category li a {
      display: block;
      padding: 10% 5%;
      color: #3d5585;
}

.price {
      width:40%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0 auto 3%;
 }

.price li {
      width: 28%;
      margin: 5% auto 0;
      border: 1px solid #ea553a;
      border-radius: 0.25em;
      color: #ea553a;
      text-align: center;
      font-size: 1.8em;
}

.price li a {
      display: block;
      padding: 12% 6%;
      color: #ea553a;
}

.ex {
       width:95%;
       background-color: #fafafa;
       margin: 0 auto;
 }


.itemlink {
      width:38%;
      margin: 3% auto 7%;
      background-color: #3d5585;
      border: none;
      border-radius: 0.25em;
      color: #ffffff;
      text-align: center;
      font-size: 1.8em;
}

.itemlink a  {
      display: block;
      padding: 3%;
      color: #ffffff;
}



 @media screen and (max-width: 767px) {

h1 {
      margin: 15% auto 0;
}

.category {
      width:90%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      list-style: none;
      margin: 0 auto;
 }

.category li {
      width: 28%;
      margin: 5% auto 1%;
      border: 1px solid #3d5585;
      border-radius: 0.25em;
      color: #3d5585;
      text-align: center;
      font-size: 1.2em;
}

.category li a {
      display: block;
      padding: 14% 4%;
      color: #3d5585;
}

.price {
      width:90%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0 auto 5%;
 }

.price li {
      width: 28%;
      margin: 5% auto 0;
      border: 1px solid #ea553a;
      border-radius: 0.25em;
      color: #ea553a;
      text-align: center;
      font-size: 1.4em;
}

.price li a {
      display: block;
      padding: 12% 6%;
      color: #ea553a;
}

.ex {
       width:95%;
       background-color: #fafafa;
       margin: 0 auto;
 }

.itemlink {
      width:85%;
      margin: 6% auto 10%;
      border: 1px solid #3d5585;
      border-radius: 0.25em;
      color: #ffffff;
      text-align: center;
      font-size: 1.2em;
}

.itemlink a {
      display: block;
      padding: 5%;
      color: #ffffff;
}

}