@charset "UTF-8";




/*----Background Decorations-----*/

body {
  background-image:radial-gradient(#ffffff 50%, #e5e5e5);
   margin: 0 ;
  padding:0 ;
 }

/*--play buttons decoration--*/

audio {
  display: none
}

}
#play:hover, #stop:hover {
  background: #eee;
   opacity: 0.8;
}

#time {
  display: flex;
 justify-content:space-around;
 padding-left: 34%;
 padding-right:34%;
    }

    #current, #duration {
      padding: 0;
      margin: .2em;
    }
    #seekbar {
          width: 285px;
          height: 10px;
          margin: 1em;
          border-radius: 5px;
          background: linear-gradient(#ccc, #ccc) no-repeat #eee;
        }

.sousabtn{
    display: flex;
    justify-content:center;
  }

@media screen and (max-width: 750px){
#time{ padding-left: 0.01%;
 padding-right:0.01%;}
}


/*---keypage decoration---*/

.btn {
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 80%;
}



/*---Answer btn---*/


.answer_button:hover{
   opacity: 0.8;
   transition: 0.5s;
}

.answer_box input[type='text'] {
	font: 20px/24px sans-serif;
	box-sizing: border-box;
	width: 90%;
  height: 50px;
	transition: 0.3s;
	letter-spacing: 1px;
	color: #black;
	border: none;
	border-bottom: 2px solid #1b2538;
	background: transparent;
}
.ef input[type='text']:focus {
	border-bottom: 2px solid #000000;
	outline: none;
}



/*---Piano page---*/
*{
  box-sizing: border-box;
}

ul{
      display: flex;
      justify-content:center;
      width: 100%;
    }

.piano{
  display: flex;
  justify-content: center;
  padding-right:2%;
}

.white{
  width:80px;
  height: 320px;
  background-color: white;
  border: 1px solid gray;
}

.black{
  width:48px;
  height: 192px;
  background-color: black;
  margin-left: -24px;
  margin-right: -24px;
  z-index: 2;
}

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

  .piano{
    padding-right:10%;
  }

.white{
  width: 56px;
  height: 224px;
}

.black{
  width: 33.6px;
  height:134.4px;
  margin-left: -20px;
  margin-right: -20px;
}

}

/*----back buttons----*/
.back:hover{
   opacity: 0.8;
   transition: 0.5s;
}




/*---Text decoration---*/

h1{
  font-family: 'Noto Sans JP', sans-serif;
  font-size:120%;
  text-align: center;
  padding-top: 10px;
  padding-bottom:10px;
}

.rules{
  text-align:justify;
  width: 240px;
	display: inline-block;
    padding-left:1%;
}

h2{
font-family: 'Noto Sans JP', sans-serif;
font-size:150%;
margin-top:20px;
margin-bottom:20px;
}


h3{
font-family: 'Noto Sans JP', sans-serif;
  font-size: 80%;
  color:red;
}


.staff{
  text-align:justify;
  width: 300px;
	display: inline-block;
    padding-left:3%;
}


.miura{
    margin-right : 40px;
}



/* ?????????????? */
.pu {
  background-color: #efefef;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  overflow-y: scroll;
}
/* ????????????? */
#pu-on{
  display: none;
}
/* ?????????????????????? */
#pu-on:checked + .pu{
  display: block;
}

/* ??????????? */
.icon-close{
  background: #000;
  color: #fff;
  font-size: 30px;
  padding: 0 10px;
  position: absolute;
  right: 0;
}


.btn-open:hover{
  opacity: 0.8;
  transition: 0.5s;
}

/* ????????? */
.pu-content{
  margin: 40px auto 40px auto;
  width: 90%;
}


.wrapper {
   max-width: 500px;
   margin: 0 auto;
   text-align: center;
 }
 .warningtext {
   display: inline-block;
   text-align: left;
 }

.gotomenu{
   display: block;
 margin: auto;
 }