/* 全ページ共通の装飾 */

/* ページの全体の装飾 */

body {
  max-width: 100%;
  max-height: 100%;
  -webkit-touch-callout:none;
  -webkit-user-select:none; 
  line-height: 0;
  font-family: "UD Digi Kyokasho NK-B", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-size: 1.4vw;
  font-weight: 400;
  color: white;
  background-color: #008833;
  user-select: none;
  overscroll-behavior: none;
}

/* ヘッダー，メイン，フッターの設定 */

header {
  margin-top: 4vh;
}

#jimi {
  height: 6vh;
}

main {
  width: 98%;
  height: 60%;
  margin: 1vw 0 0 1vw;
}

footer {
  width: 98%;
  max-width: 100%;
  height: 100px;
  margin: 0 0 0 1vw;
}

/* フォントの大きさ */

h1 {
  margin: 2vw 0 2vw 0;
  line-height: 2vw;
  font-size: 3vw;
}

h2 {
  margin: 0;
  padding: 1.5vw 0 0 0;
  font-size: 1.8vw;
}

h3 {
  padding: 0.5vw 0 0 0;
  font-size: 1.6vw;
}

h4{
  font-size: 1.4vw;
}

p {
  margin: auto 1vw 0 1vw;
  font-size: 2vw;
}

/* ホームページへのリンクの装飾 */

a {
  color: yellow;
}

/* 黒板の囲み枠 */

.kokuban {
  width: 95%;
  height: 80%;
  color: #fff;
  background-color: #114400;
  border: 9px solid #a60;
  border-radius: 3px;
  box-shadow: 2px 2px 4px #666, 2px 2px 2px #111 inset;
  line-height: 1.9;
}

/* めあての書式・装飾 */

.meate {
  width: 90%;
  margin: 1vw;
  position: relative;
  border: solid 2px #FFC107;
}

.meate .box-title {
  position: absolute;
  display: inline-block;
  padding: 2px;
  top: 0;
  left: 0;
  line-height: 2vw;
  font-weight: bold;
  color: #ffffff;
  border: solid 2px #FFC107;
  background: #ff2599;
}

.meate p {
  padding-left: 6vw;
}

/* 表の書式，装飾等の設定 */

table {
  border: 0.1vw black solid;
  border-collapse: collapse;
  table-layout: fixed;
}

td, #gomibako {
  height: 5vw;
  max-height: 5vw;
  width: 5vw;
  align-items: center;
  justify-content: flex-start;
}

td {
  background-color: white;
  border: 0.1vw solid gray;
  margin: auto;
}

/* インプット要素の装飾  */

input[type=radio] {
  width: 1.2vw;
  height: 1.2vw;
  font-size: 1.2vw;
  vertical-align: center;
  user-select: none;
  cursor: pointer;
}

/* 各ボタンの装飾 */

button {
  font-weight: 400;
  font-family: "UD Digi Kyokasho NK-B", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  font-size: 1.2vw;
  height: 2.8vw;
  margin: 2vw 1vw 0 1vw;
  padding: auto;
  cursor: pointer;
}

#reset {
  color: white;
  background-color: red;
  font-size: 1.4vw;
  height: 3vw;
  margin: 1vw 1vw 0 0;
  padding: auto;
  cursor: pointer;
}

#btn1 {
  color: white;
  height: 2.8vw;
  font-size: 1.2vw;
  margin: 2vw 1vw 0 1vw;
  padding: auto;
  background-color: orange;
}

#btn2 {
  color: black;
  background-color: yellow;
}

#btn3 {
  color: black;
  background-color: greenyellow;
}

#btn4 {
  color: black;
  background-color: lightgreen;
}

#btn5 {
  color: black;
  background-color: lightblue;
}

#btn6 {
  color: white;
  background-color: blue;
}

#btn7 {
  color: white;
  background-color: purple;
}

#btn8 {
  color: black;
  background-color: pink;
}

#btn9 {
  color: white;
  background-color: brown;
}

#btn10 {
  color: white;
  background-color: gray;
}

@media screen and (max-width:599px) {
  body {
    font-size: 1vw;
    font-weight: 200;
  }
  button {
    font-weight: 200;
    font-size: 1vw;
  }
}