@charset "UTF-8";
.html {
  overflow: hidden; }

.body {
  overflow: hidden; }

.title {
  border-bottom: #242424 solid 1px;
  padding-bottom: 0px; }

.main {
  justify-content: center;
  display: flex;
  margin-top: 10vh; }

#makeImg {
  position: absolute;
  margin-left: 15px;
  margin-top: 5px;
  width: 10px;
  height: 18px;
  background: #ec0808; }

#face-area {
  display: flex; }

#parent_face {
  position: relative;
  height: 200px;
  width: 200px;
  margin-left: 540px; }

#parent_face div {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-size: cover; }

#emotion-face {
  border-radius: 100%; }

#gif-image {
  position: absolute;
  margin-left: 850px;
  width: 200px;
  height: 200px;
  background-size: cover; }

#giftext {
  position: absolute;
  margin-left: 850px; }

.drag-corrdinate {
  margin-top: 50px;
  display: flex; }

.child {
  position: relative; }

.child canvas {
  position: absolute;
  top: 0;
  left: 0; }

#icontext {
  font-size: 18px;
  margin-left: 30px;
  margin-top: 0px; }

#slider {
  cursor: pointer;
  margin-top: 170px;
  height: 10px;
  /* バーの高さ */
  width: 400px;
  /* バーの幅 */ }

.child2 {
  margin-left: 400px;
  width: 415px; }

.button {
  margin-top: 25px;
  position: absolute; }

.movie {
  margin-top: 15px;
  display: flex; }

#icon1 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon2 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon3 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon4 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon5 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon6 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon7 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon8 {
  cursor: pointer;
  margin-top: 10px;
  margin-left: calc(11px + (8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon9 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (9 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon10 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (10 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon11 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (11 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon12 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (12 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon13 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (13 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon14 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (14 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon15 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (15 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon16 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 1px);
  margin-left: calc(11px + (16 - 8 * 1 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon17 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (17 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon18 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (18 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon19 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (19 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon20 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (20 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon21 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (21 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon22 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (22 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon23 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (23 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon24 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 2px);
  margin-left: calc(11px + (24 - 8 * 2 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon25 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (25 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon26 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (26 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon27 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (27 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon28 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (28 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon29 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (29 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon30 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (30 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon31 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (31 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon32 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 3px);
  margin-left: calc(11px + (32 - 8 * 3 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon33 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (33 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon34 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (34 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon35 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (35 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon36 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (36 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon37 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (37 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon38 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (38 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon39 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (39 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon40 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 4px);
  margin-left: calc(11px + (40 - 8 * 4 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon41 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (41 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon42 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (42 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon43 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (43 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon44 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (44 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon45 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (45 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon46 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (46 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon47 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (47 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon48 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 5px);
  margin-left: calc(11px + (48 - 8 * 5 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon49 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (49 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon50 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (50 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon51 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (51 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon52 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (52 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon53 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (53 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon54 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (54 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon55 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (55 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon56 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 6px);
  margin-left: calc(11px + (56 - 8 * 6 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon57 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (57 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon58 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (58 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon59 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (59 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon60 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (60 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon61 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (61 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon62 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (62 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon63 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (63 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon64 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 7px);
  margin-left: calc(11px + (64 - 8 * 7 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon65 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (65 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon66 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (66 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon67 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (67 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon68 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (68 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon69 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (69 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon70 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (70 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon71 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (71 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon72 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 8px);
  margin-left: calc(11px + (72 - 8 * 8 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon73 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (73 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon74 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (74 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon75 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (75 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon76 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (76 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon77 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (77 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon78 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (78 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon79 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (79 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon80 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 9px);
  margin-left: calc(11px + (80 - 8 * 9 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon81 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (81 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon82 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (82 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon83 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (83 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon84 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (84 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon85 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (85 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon86 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (86 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon87 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (87 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon88 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 10px);
  margin-left: calc(11px + (88 - 8 * 10 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#icon89 {
  cursor: pointer;
  margin-top: calc(10px + 50 * 11px);
  margin-left: calc(11px + (89 - 8 * 11 - 1) * 48px);
  font-size: 30px;
  background-color: #ffffff;
  border: none;
  transition: all 0.2s; }

#left {
  cursor: pointer;
  margin-top: 0px;
  margin-left: 80px;
  transition: all 0.2s;
  background-size: cover;
  border: none;
  width: 75px;
  height: 63px; }

#startstop {
  cursor: pointer;
  margin-top: 0px;
  margin-left: 80px;
  transition: all 0.2s;
  background-size: cover;
  border: none;
  width: 75px;
  height: 63px; }

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); }

#okBtn {
  font-size: 14px;
  height: 60px;
  width: 90px;
  margin-top: 140px;
  background-color: white; }

#okBtn:hover {
  background-color: rgba(231, 231, 231, 0.788); }

#okBtn:active {
  background-color: #d1d1d1;
  /* 濃い緑色 */ }

#iconlist {
  margin-left: 15px;
  margin-top: 30px; }