main {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 20px;
}
.select-color {
  max-width: 270px;
  margin: 20px auto 20px;
  text-align: center;
}
.color {
  height: 80px;
  width: 160px;
}

.size {
  font-size: 1.5em; /*1.5倍にする*/
  margin-top: 10px;
}

.icolor {
  color: #bdecff; /*青色にする*/
}

.letters {
  display: block;
  font-size: small;
}

.next {
  color: #fff;
  background: #00ae95;
  margin-top: 50px;
  width: 100px;
  height: 40px;
  cursor: pointer;
}

.confirmation {
  max-width: 200px;
  margin: 20px auto 20px;
  text-align: center;
}
.confirmationColor {
  position: relative; /*配置位置の基準となる指定*/
  cursor: pointer;
  width: 200px;
  height: 200px;
  padding-bottom: 0%;
  float: left;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.confirmationText {
  position: absolute; /*自由に配置する指定*/
  bottom: 0; /*下寄せの指定*/
  margin: 0;
}
.name {
  width: 190px; /*親要素いっぱい広げる*/
  padding: 8px 12px; /*ボックスを大きくする*/
  font-size: 16px;
  border-radius: 3px; /*ボックス角の丸み*/
  border: 2px solid rgb(87, 87, 87); /*枠線*/
}

input[type="checkbox"] {
  display: none; /* checkboxを非表示にする */
}
label {
  margin: 5px; /* ラベル外側の余白を指定する */
  display: block; /* ブロックレベル要素化する */
  float: left; /* 要素の左寄せ・回り込を指定する */
  margin: 10px; /* ラベル外側の余白を指定する */
  width: 100px; /* ラベルの横幅を指定する */
  height: 45px; /* ラベルの高さを指定する */
  text-align: center; /* テキストのセンタリングを指定する */
  line-height: 45px; /* 行の高さを指定する */
  padding-left: 5px; /* ラベル内左側の余白を指定する */
  padding-right: 5px; /* ラベル内右側の余白を指定する */
  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
  border-radius: 5px; /* 角丸を指定する */
  color: black;
}
input[type="checkbox"]:checked + label {
  color: #ffffff; /* マウス選択時のフォント色を指定する */
}
#red:checked + label {
  background: #ff0000; /* マウス選択時の背景色を指定する */
}
#yellow:checked + label {
  background: #eeff00; /* マウス選択時の背景色を指定する */
}
#green:checked + label {
  background: #05cf05; /* マウス選択時の背景色を指定する */
}
#blue:checked + label {
  background: #0011ff; /* マウス選択時の背景色を指定する */
}
#blown:checked + label {
  background: #3a2302; /* マウス選択時の背景色を指定する */
}
#mono:checked + label {
  background: #525252; /* マウス選択時の背景色を指定する */
}
label:hover {
  background-color: #e2edf9; /* マウスオーバー時の背景色を指定する */
}
.red-label {
  border: 2px solid #ff0000; /* ラベルの境界線を実線で指定する */
}
.yellow-label {
  border: 2px solid #eeff00; /* ラベルの境界線を実線で指定する */
}
.green-label {
  border: 2px solid #05cf05; /* ラベルの境界線を実線で指定する */
}
.blue-label {
  border: 2px solid #0011ff; /* ラベルの境界線を実線で指定する */
}
.blown-label {
  border: 2px solid #3a2302; /* ラベルの境界線を実線で指定する */
}
.mono-label {
  border: 2px solid #525252; /* ラベルの境界線を実線で指定する */
}