ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.targets {
	width: 100%;
	float: left;
}

.target {
	width: 29.3%;
    float: left;
    margin: 2%;
}

/*.target:nth-child(3), .target:nth-child(6) {
	margin-right: 0;	
}*/
[value="All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="Casual"]:checked ~ .targets .target:not([data-category~="Casual"]), 
[value="Standard"]:checked ~ .targets .target:not([data-category~="Standard"]), 
[value="Special"]:checked ~ .targets .target:not([data-category~="Special"]), 
[value="Pasta"]:checked ~ .targets .target:not([data-category~="Pasta"]), 
[value="Antipasto"]:checked ~ .targets .target:not([data-category~="Antipasto"]),
[value="Antipastocardo"]:checked ~ .targets .target:not([data-category~="Antipastocardo"]),
[value="Volume"]:checked ~ .targets .target:not([data-category~="Volume"]),
[value="Dessert"]:checked ~ .targets .target:not([data-category~="Dessert"]),
[value="Kowake"]:checked ~ .targets .target:not([data-category~="Kowake"]),
[value="Simple"]:checked ~ .targets .target:not([data-category~="Simple"]){
  display: none;
}
/*  ラジオボタンを非表示に */
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
/*  以下はラベルのスタイル */
.filters {
  margin-bottom: 2rem;
	text-align: center;
}
.filters * {
  display: inline-block;
}
.filters label {
    text-align: center;
    border-radius: 100vh;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    margin-right: 0.5rem;
    min-width: 70px;
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #333;
}
.filters label:hover {
  background: #333;
  color: #fff;
}
[value="All"]:checked ~ .filters [for="All"], 
[value="Casual"]:checked ~ .filters [for="Casual"], 
[value="Standard"]:checked ~ .filters [for="Standard"], 
[value="Special"]:checked ~ .filters [for="Special"], 
[value="Pasta"]:checked ~ .filters [for="Pasta"], 
[value="Antipasto"]:checked ~ .filters [for="Antipasto"],
[value="Antipastocardo"]:checked ~ .filters [for="Antipastocardo"],
[value="Volume"]:checked ~ .filters [for="Volume"],
[value="Dessert"]:checked ~ .filters [for="Dessert"],
[value="Kowake"]:checked ~ .filters [for="Kowake"],
[value="Simple"]:checked ~ .filters [for="Simple"]{
  background: #333;
  color: #fff;
}

.target {
    animation-name: fadein;
    animation-duration: 3s;
}
@keyframes fadein{
    from{
    opacity: 0;
    transform: translatey(20px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}






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

.target {
	width: 100%;
    margin: 1%;
}
}