.container{
  max-width:1000px;
  margin:0 auto;
}
#header{
  height:130px;
  padding-top:70px;
  background-image:url(img/kimetsu-header2.jpg);
  background-size:cover;
  background-position: bottom;
  position:relative;
}
h1{
  background-color:rgba(255,255,255,0.7);
  width:300px;
  text-align: center;
  margin:0 auto;
  border-radius: 5px;
  font-size:40px;
}
h1 a{
  color:black;
  text-decoration: none;
}

#sub-title{
  font-size:18px;
  font-family: serif;
  font-weight: bold;
  margin-top:5px;
  position:absolute;
  top:0;
  left:10px;
}


/* 右上のメニューアイコン */
#open{
  background:#ffdde2;
  border-radius:5px;
  text-align: center;
  position:absolute;
  top:20px;
  right:20px;
  padding:5px 10px;
  cursor:pointer;
}

.fa-bars{
  font-size:30px;
}

#open span{
  display:block;
  font-size:10px;
  font-weight: bold;
}

#open.hide{
  display:none;
}


/* オーバーレイ ナビゲーション */
.overlay{
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background:rgba(255,255,255,0.9);
  text-align: center;
  padding-top:120px;
  opacity: 0;
  pointer-events: none;
  transition:opacity 0.6s;
  z-index: 1;
}

.overlay.show{
  opacity:1;
  pointer-events: auto;
}

.overlay #close{
  position:absolute;
  top:35px;
  right:10%;
  font-size:32px;
  cursor:pointer;
}

.overlay ul{
  list-style-type:none;
  padding-left:0;
}

.overlay li{
  max-width:1000px;
  margin:0 auto;
  background:#ffdde2;
  border:1px solid #333;
  border-top:none;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.3s,transform 0.3s;
}

.overlay li:first-child{
  border-top:1px solid #333;;
}

.overlay li a{
  display:block;
  padding:10px 0;
  text-decoration: none;
  color:#333;
}

.overlay li a:hover{
  background:#f7b9c2;
}

.overlay.show li{
  opacity:1;
  transform:none;
}

.overlay.show li:nth-child(1){
  transition-delay: 0.1s;
}
.overlay.show li:nth-child(2){
  transition-delay: 0.2s;
}
.overlay.show li:nth-child(3){
  transition-delay: 0.3s;
}


/* クイズ本文 */
#q-title{
  margin-top:20px;
  background:#3cb371;
  font-weight:bold;
  display:inline-block;
  padding:5px;
  margin-bottom:0;
}
#js-question{
  font-size:17px;
  border:2px #3cb371 solid;
  padding:10px;
  margin-top:0;
}
.flex{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  margin:0 auto;
}

.box{
  box-sizing: border-box;
  width:120px;
  height:120px;
  background:#3cb371;
  cursor:pointer;
  margin:20px;
  text-align: center;
  font-size:15px;
  padding:48px 5px 0 5px;
}

.circle{
  background:pink;
  border-radius:50%;
  transition: 0.8s;
  transform:rotate(360deg);
}

.lose{
  transform:scale(0.9);
  color:red;
  background: silver;
  transition: 0.8s;
}

.hint{
  text-align: center;
}

#hint-txt{
  display:inline-block;
}

#correct-txt{
  text-align: center;
}

.hidden{
  display:none;
}

.otoiawase-wrap{
  margin:0 auto;
}