body{
margin: 5% 10%;
padding: 0;
line-height: 2;

}
ol {
  list-style: none;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
/* .targets {
  display: grid;
  grid-gap: 20px; 
 grid-template-columns: repeat(auto-fit, 60px); 
  margin-top: 20px;
} */
.Central {
  width: 60px;
  height: 60px;
  background-color: #EEE;
  border: 1px solid #CCC;
}
.Northern {
  border-radius: 50%;
}
.Eastern {
  background-color: #B8DBF6;
  border: 1px solid #5ABEED;
}
.Western {
  background-color: #C8F8D1;
  border: 1px solid #64D994;
}
.Southern {
  background-color: #FAD6D7
}
[value="すべて"]:checked ~ .targets [data-category] {
  display: block;
}
[value="中央の国"]:checked ~ .targets .target:not([data-category~="Central"]), 
[value="北の国"]:checked ~ .targets .target:not([data-category~="Northern"]), 
[value="東の国"]:checked ~ .targets .target:not([data-category~="Eastern"]),
[value="西の国"]:checked ~ .targets .target:not([data-category~="Western"]), 
[value="南の国"]:checked ~ .targets .target:not([data-category~="Southern"]) {
  display: none;
}/* [value="around"]:checked ~ .targets [data-category] {
  display: contents;
}
[value="Central"]:checked ~ .targets .target:not([data-category~="Central"]), 
[value="Northern"]:checked ~ .targets .target:not([data-category~="Northern"]), 
[value="Eastern"]:checked ~ .targets .target:not([data-category~="Eastern"]),
[value="Western"]:checked ~ .targets .target:not([data-category~="Western"]), 
[value="Southern"]:checked ~ .targets .target:not([data-category~="Southern"]) {
  display: none;
} *//*  ラジオボタンを非表示に */
input[type="radio"] {
  position: absolute;
  left: -9999px;
}
/*  以下はラベルのスタイル */
.filters {
  margin-bottom: 2rem;
}
.filters * {
  display: inline-block;
}
.filters label {
  text-align: center;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.2s;
}
.filters label:hover {
  background: #333;
  color: #fff;
}
[value="すべて"]:checked ~ .filters [for="area_All"]{
background: #333;
color: #fff;
}
[value="中央の国"]:checked ~ .filters [for="Central"]{
background: #ebdc67;
color: #fff;
text-shadow: 0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49,0 0 3px #cdbe49;
}
[value="北の国"]:checked ~ .filters [for="Northern"]{
background: #aa78c8;
color: #fff;
text-shadow:0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa,0 0 3px #8c5aaa;
} 
[value="東の国"]:checked ~ .filters [for="Eastern"]{
background: #96a0e6;
color: #fff;
text-shadow:0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8,0 0 3px #7882c8;
}
[value="西の国"]:checked ~ .filters [for="Western"]{
background: #e6a0b4;
color: #fff;
text-shadow:0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296,0 0 3px #c88296;
}
[value="南の国"]:checked ~ .filters [for="Southern"] {
  background: #b9dc8c;
  color: #fff;
text-shadow:0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82,0 0 3px #9bbe82;
} 
.contentA{
 float: left;
width: 30%;
}
 
.contentB{
 float: right;
width: 70%;
}