body{
    width: 100%;
    margin: 0%;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}

header{
    width: 100%;
    margin: 0%;
    padding: 5%;
    background-color:#124289;
}

@media (min-width:1100px){
  header{
    padding: 1%;
  }
}

h1{
    margin: 0%;
    color: white;
    font-size: 26px;
    font-family: noto-sans,sans-serif;
    font-weight: 700;
    font-style: normal;
}

h1 a{
  list-style: none;
  color: white;
  text-decoration: none;
}

h2{
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: noto-sans,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

@media (min-width:1100px){
  h2{
    font-size: 50px;
}
}

@media (prefers-color-scheme: dark) {
  h2{
    color: white;
}
}

table {
  border-collapse: collapse;
  border: solid 1px #888;
  font-size: 20px;
  width: 100%;
}
th, td {
  padding: 5px 15px; /* 上下 左右 */
  border: dashed 1px #a8d4f3;
}

.roomname{
    font-size: 50px;
    display: block;
    font-family: noto-sans,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    text-decoration: underline;
}

@media (min-width:1100px){
  .roomname{
    font-size: 80px;
}
}

@media (prefers-color-scheme: dark) {
  .roomname{
    color: white;
}
}

.classname{
    font-size: 24px;
    display: block;
    font-family: noto-sans,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .classname{
    color: white;
}
}




.nextclassname{
    text-align:center;
    font-size: 24px;
    display: block;
    font-family: noto-sans,sans-serif;
    font-weight: 400;
    font-style: normal;
}

@media (prefers-color-scheme: dark) {
  .nextclassname{
    color: white;
}
}

.next{
  margin-left:8%;
  margin-right: 8%;;
  margin-top: 20%;
  margin-bottom: 10%;
  background-color:#d1d1d1;
}

@media (prefers-color-scheme: dark) {
  .next{
    background-color:#505050;
  }
}


.others{
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .others{
    color: white;
  }
}

details{
  text-align: left;
}

.others ul{
  display: inline-block;
  padding: 0;
}


summary{
  font-size: 18px;
  font-family: noto-sans,sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
}

@media (min-width:1100px){
  summary{
    font-size: 22px;
  }
}

@media (prefers-color-scheme: dark) {
  summary{
    color: white;
  }
}

details li{
  font-size: 16px;
  font-family: noto-sans,sans-serif;
  font-weight: 700;
  font-style: normal;
  text-indent: -1.2em;
  padding: 0 0 0 1em;
  text-align: left;
  list-style-position: inside;
}

@media (min-width:1100px){
  details li{
    font-size: 18px;
  }
}

@media (min-width:1100px){
  .next{
    margin-left: 30%;
    margin-right: 30%;;
    margin-top: 5%;
    margin-bottom: 2.5%;
    text-align: center;
}
}

.reload{
  margin-left: 10%;
  margin-right: 10%;;
  margin-top: 10%;
  margin-bottom: 10%;
}

@media (min-width:1100px){
  .reload{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 2.5%;
    margin-bottom: 0%;
    text-align: center;
}
}


.menu{
    padding-left: 6%;
    padding-right: 6%;;
    padding-top: 2.5%;
    padding-bottom: 5%;
    font-size: 0;
}

.form{
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 10%;
}

input{
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  margin-right: 1em;
  font-size: 14px;
}

.privacy{
  margin-left:8%;
  margin-right: 8%;;
  margin-top: 20%;
  margin-bottom: 10%;
  padding: 15px;
  background-color:#d1d1d1;
}

@media (prefers-color-scheme: dark) {
  .privacy{
    background-color:#505050;
  }

  .privacy p{
    color: white;
  }
}

.privacy p{
  font-size: 17px;
  line-height: 1.5;
  font-family: noto-sans,sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (min-width:1100px){
  .privacy{
    margin-left: 15%;
    margin-right: 15%;;
    margin-top: 5%;
    margin-bottom: 2.5%;
}
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.reload
.btn,
a.btn,
button.btn {
  font-size: 18px;
  width: 80%;
  height: 60px;
  font-weight: 700;
  line-height: 60px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: white;
  border-radius: 0.5rem;
  margin-bottom: 10%;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 0%;
  font-family: noto-sans,sans-serif;
  font-weight: 700;
  font-style: normal;
}

.reload
.installbotton
 {
  font-size: 16px;
  width: 80%;
  height: 60px;
  font-weight: 700;
  line-height: 60px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: white;
  border-radius: 0.5rem;
  margin-bottom: 10%;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 0%;
  font-family: noto-sans,sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  background: #131313;
  border: 0;
}

@media (min-width:1100px){
  .reload
  .btn,
  a.btn,
  button.btn {
    font-size: 27px;
    width: 40%;
    height: 60px;
    line-height: 60px;
    margin-right: 30%;
    margin-left: 30%;
    margin-bottom: 5%;
  }

  .reload
  .installbotton
   {
    font-size: 16px;
    width: 40%;
    height: 60px;
    line-height: 60px;
    margin-right: 30%;
    margin-left: 30%;
    margin-bottom: 5%;
  }
}

.btn,
a.btn,
button.btn {
  font-size: 18px;
  width: 40%;
  height: 120px;
  font-weight: 700;
  line-height: 120px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin-bottom: 80px;
  margin-right: 5%;
  margin-left: 5%;
  font-family: noto-sans,sans-serif;
  font-weight: 700;
  font-style: normal;
}

@media (min-width:1100px){
  .btn,
  a.btn,
  button.btn {
    font-size: 20px;
    width: 20%;
    height: 120px;
    margin-right: 2.5%;
    margin-left: 2.5%;
  }
}


.btn--blue,
a.btn--blue {
  color: #fff;
  background-color: #0d66b7;
}

.btn--blue:hover,
a.btn--blue:hover {
  color: #fff;
  background: #0e7bde;
}

.btn--red,
a.btn--red {
  color: #fff;
  background-color: #e20c0c;
  width: 88%;
}

@media (min-width:1100px){
  .btn--red,
  a.btn--red {
    width: 40%;
    margin-right: 30%;
    margin-left: 30%;
  }
}

.btn--red:hover,
a.btn--red:hover {
  color: #fff;
  background: #e23838;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #ff8533;
}

.btn--green,
a.btn--green {
  color: #fff;
  background-color: #11b039;
}

.btn--green:hover,
a.btn--green:hover {
  color: #fff;
  background: #37ec65;
}

.btn--water,
a.btn--water {
  color: #fff;
  background-color: #02b1fd;
}

.btn--water:hover,
a.btn--water:hover {
  color: #fff;
  background: #50cafe;
}