body{
margin: 5% 10%;
padding: 0;
}
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~="area_All"]),
[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;
}
/*  ラジオボタンを非表示に */
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;
}


h1{
font-size: 100%;
font-weight: normal;
 position: relative;
     display: inline-block;
   /*  padding-bottom:0.5em; */
     border-bottom: 1px solid black;
}

h1::before,
h1::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}

h1::before {
     border-top: 10px solid black;
}
 
h1::after {
     margin-top: -1px;
     border-top: 10px solid white;
}



h2 {
font-size: 100%;
font-weight: normal;
     position: relative;
     padding:0.3em 0.3em 0.3em 1.2em;
     border: 1px solid #ccc;
     border-radius: 5px;
box-shadow: inset 0 0 25px 0 #ffffff;
}
 
h2::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:20px;
     background-color: #6296ff;
}



h2:hover {
font-size: 100%;
font-weight: normal;
     position: relative;
     color: black;
border: 1px solid #CCC;
     padding:0.3em 0.3em 0.3em 1.2em;
     background-color: #f7ffff;
     border-radius: 5px;
box-shadow: inset 0 0 15px 0 #ffffff;
}
 
h2:hover::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:20px;
     background-color:#6296ff;
}


h3{
font-size: 100%;
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
}
h3 span {
  margin-bottom: .2em;
  color: #aaa;
  font-size: .8em;
}a{
text-decoration: none;
}

.migi:hover,migi:active{
position:relative;
right:-2px;
}/* 中央の国 */

[value="C_wizard_All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="オズ"]:checked ~ .targets .target:not([data-category~="Oz"]), 
[value="アーサー"]:checked ~ .targets .target:not([data-category~="Arthur"]), 
[value="カイン"]:checked ~ .targets .target:not([data-category~="Cain"]),
[value="リケ"]:checked ~ .targets .target:not([data-category~="Requet"])
{
  display: none;
}

[value="C_wizard_All"]:checked ~ .filters [for="C_wizard_All"]{
background: #333;
color: #fff;
}
[value="オズ"]:checked ~ .filters [for="Oz"]{
background: #ff0000;
color: #fff;
text-shadow: 0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000,0 0 3px #e10000;
}
[value="アーサー"]:checked ~ .filters [for="Arthur"]{
background: #78a5eb;
color: #fff;
text-shadow: 0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd,0 0 3px #5a87cd;
}
[value="カイン"]:checked ~ .filters [for="Cain"]{
background: #ffaa46;
color: #fff;
text-shadow: 0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28,0 0 3px #e18c28;
}
[value="リケ"]:checked ~ .filters [for="Requet"]{
background: #333;
color: #fff;
}








/* 北の国 */

[value="N_wizard_All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="スノウ"]:checked ~ .targets .target:not([data-category~="Snow"]), 
[value="ホワイト"]:checked ~ .targets .target:not([data-category~="White"]), 
[value="ミスラ"]:checked ~ .targets .target:not([data-category~="Mithra"]),
[value="オーエン"]:checked ~ .targets .target:not([data-category~="Owen"]), 
[value="ブラッドリー"]:checked ~ .targets .target:not([data-category~="Bradley"]) {
  display: none;
}

[value="N_wizard_All"]:checked ~ .filters [for="N_wizard_All"]{
background: #333;
color: #fff;
}
[value="スノウ"]:checked ~ .filters [for="Snow"]{
background: #333;
color: #fff;
}
[value="ホワイト"]:checked ~ .filters [for="White"]{
background: #333;
color: #fff;
}
[value="ミスラ"]:checked ~ .filters [for="Mithra"]{
background: #333;
color: #fff;
}
[value="オーエン"]:checked ~ .filters [for="Owen"]{
background: #333;
color: #fff;
}
[value="ブラッドリー"]:checked ~ .filters [for="Bradley"]{
background: #333;
color: #fff;
}





/* 東の国 */

[value="E_wizard_All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="ファウスト"]:checked ~ .targets .target:not([data-category~="Faust"]), 
[value="シノ"]:checked ~ .targets .target:not([data-category~="Shino"]), 
[value="ヒースクリフ"]:checked ~ .targets .target:not([data-category~="Heathcliff"]),
[value="ネロ"]:checked ~ .targets .target:not([data-category~="Nero"])
{
  display: none;
}

[value="E_wizard_All"]:checked ~ .filters [for="E_wizard_All"]{
background: #333;
color: #fff;
}
[value="ファウスト"]:checked ~ .filters [for="Faust"]{
background: #333;
color: #fff;
}
[value="シノ"]:checked ~ .filters [for="Shino"]{
background: #333;
color: #fff;
}
[value="ヒースクリフ"]:checked ~ .filters [for="Heathcliff"]{
background: #333;
color: #fff;
}
[value="ネロ"]:checked ~ .filters [for="Nero"]{
background: #333;
color: #fff;
}









/* 西の国 */

[value="W_wizard_All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="シャイロック"]:checked ~ .targets .target:not([data-category~="Shylock"]), 
[value="ムル"]:checked ~ .targets .target:not([data-category~="Murr"]), 
[value="クロエ"]:checked ~ .targets .target:not([data-category~="Chloe"]),
[value="ラスティカ"]:checked ~ .targets .target:not([data-category~="Rustica"])
{
  display: none;
}

[value="W_wizard_All"]:checked ~ .filters [for="W_wizard_All"]{
background: #333;
color: #fff;
}
[value="シャイロック"]:checked ~ .filters [for="Shylock"]{
background: #333;
color: #fff;
}
[value="ムル"]:checked ~ .filters [for="Murr"]{
background: #333;
color: #fff;
}
[value="クロエ"]:checked ~ .filters [for="Chloe"]{
background: #333;
color: #fff;
}
[value="ラスティカ"]:checked ~ .filters [for="Rustica"]{
background: #333;
color: #fff;
}






/* 南の国 */

[value="S_wizard_All"]:checked ~ .targets [data-category] {
  display: block;
}
[value="フィガロ"]:checked ~ .targets .target:not([data-category~="Figaro"]), 
[value="ルチル"]:checked ~ .targets .target:not([data-category~="Rutile"]), 
[value="レノックス"]:checked ~ .targets .target:not([data-category~="Lennox"]),
[value="ミチル"]:checked ~ .targets .target:not([data-category~="Mitile"])
{
  display: none;
}

[value="S_wizard_All"]:checked ~ .filters [for="S_wizard_All"]{
background: #333;
color: #fff;
}
[value="フィガロ"]:checked ~ .filters [for="Figaro"]{
background: #333;
color: #fff;
}
[value="ルチル"]:checked ~ .filters [for="Rutile"]{
background: #333;
color: #fff;
}
[value="レノックス"]:checked ~ .filters [for="Lennox"]{
background: #333;
color: #fff;
}
[value="ミチル"]:checked ~ .filters [for="Mitile"]{
background: #333;
color: #fff;
}
.contentA{border-right: 2px solid black;
padding :0.3em;
}
.contentB{border-left:2px solid black;
padding: 0.3em;
}

 
.contentA,.contentB{
 width: 50%;
}
 
.main{
 display: flex;
}