a{
text-decoration: none;
}


.mu{
text-decoration: none;
}

.fadein {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 2.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(20px);
  }
  100% {
     opacity: 1;
     transform: translateY(0);
  }
}

body{
margin: 5% 10%;
}.migi:hover,migi:active{
position:relative;
right:-2px;
}

.book {
  position: fixed;
  height: 100vh;
  overflow: auto;
}

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 1.2em 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 1.2em 0.3em 1.2em;
     background-color: #dcdcdc;
     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;
}

/* box-shadow: inset 0 10px 25px 0 rgba(255, 255, 255, 0.5); 

active要素を使う。
#6296ff
#446689 */ul {
  padding: 0;
}
li {
  list-style: none;
}

form {
  background: #fff;
  padding: 10px 10px;
  border-radius: 5px;
}
form ul {
  display: flex;
  flex-wrap: wrap;
}
input[type="radio"] {
  display: none;
}
.country input[type="radio"]:checked + label {
  background: #ff7bac; /* マウス選択時の背景色を指定する */
  color: #ffffff; /* マウス選択時のフォント色を指定する */
}
.wizard input[type="radio"]:checked + label {
  background: #3fa9f5; /* マウス選択時の背景色を指定する */
  color: #ffffff; /* マウス選択時のフォント色を指定する */
}
.country .label:hover {
  background-color: #f8c2d6; /* マウスオーバー時の背景色を指定する */
}
.wizard .label:hover {
  background-color: #e2edf9; /* マウスオーバー時の背景色を指定する */
}

.label {
  display: block; /* ブロックレベル要素化する */
  margin: 5px; /* ボックス外側の余白を指定する */
  width: 100px; /* ボックスの横幅を指定する */
  height: 45px; /* ボックスの高さを指定する */
  padding-left: 5px; /* ボックス内左側の余白を指定する */
  padding-right: 5px; /* ボックス内御右側の余白を指定する */
  text-align: center; /* テキストのセンタリングを指定する */
  line-height: 45px; /* 行の高さを指定する */
  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
  border-radius: 25px; /* 角丸を指定する */
}

.country .label {
  border: 2px solid #ff7bac; /* ボックスの境界線を実線で指定する */
  color: #008900; /* フォントの色を指定 */
}
.wizard .label {
  border: 2px solid #3fa9f5; /* ボックスの境界線を実線で指定する */
  color: #b20000; /* フォントの色を指定 */
}
.search-box_label {
  font-weight: bold;
}
.is-hide {
  display: none;
}

.list_toggle {
  display: none;
}

.under_line {
  width: 500px;
}
.search-box h2 {
  margin: 0;
}

.reset-button {
  width: 25%;
  margin: 20px auto 0;
  line-height: 30px;
  background: #ccc;
  border-radius: 25px;
  border: none;
  cursor: pointer;
}
.reset-button:hover {
  background: #999;
}
.nothing {
  display: none;
}

.list {
  display: flex;
  flex-wrap: wrap;
}
.list li {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: auto;
  object-fit: cover;
}

.sestumei {
padding: 0.5em 1.4em;

}