@charset "utf-8";.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%;
 }

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

.login li {
      width: 42%;
      margin: 10% auto 0;
      border: none;
      border-radius: 5em;
      background-color: #898989;
      color: #ffffff;
      text-align: center;
      font-size: 2.0em;
}

.login li a {
      display: block;
      padding: 7% 5%;
      color: #ffffff;
}

.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: 2.0em;
}

.price li a {
      display: block;
      padding: 10% 5%;
      color: #ea553a;
}

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


.itemlink {
      width:38%;
      margin: 2% 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) {

.login {
      width:80%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      list-style: none;
      margin: 3% auto 5%;
 }

.login li {
      width: 44%;
      margin: 7% auto 1%;
      border: none;
      border-radius: 5em;
      color: #3d5585;
      text-align: center;
      font-size: 1.4em;
}

.login li a {
      display: block;
      padding: 10% 5%;
      color: #ffffff;
}

.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;
 }

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

.price li a {
      display: block;
      padding: 10% 5%;
      color: #ea553a;
}

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

.itemlink {
      width:85%;
      margin: 5% 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;
}

}