@media screen and (min-width:481px) { .first_half, .latter_half {width: min(100vw, 360px);} #wrapper { width: 800px;} #form_number_place { font-size: min(6.1vw, 22px);} th,td { line-height: 38%; font-size: min(6.1vw, 22px);} input, button { border-radius: min(2.5vw, 9px);} .leftward,.rightward,.yesterday,.tomorrow { border-top: min(2vw, 7px) solid #f5f5f5; border-right: min(2vw, 7px) solid transparent; border-bottom: min(2vw, 7px) solid transparent; border-left: min(2vw, 7px) solid transparent;} .overlay_for_start .wrap{ width: min(20vw, 64px); height: min(20vw, 64px);} div.circle{ width: min(20vw, 64px); height: min(20vw, 64px); border-radius: min(10vw, 32px); border: min(2vw, 6.4px) solid #f5f5f57f;}} @media screen and (max-width:480px) { .first_half, .latter_half { width: min(100vw, 360px); min-width: 320px;} #form_number_place { width: 100%; font-size: min(6.1vw, 22px); min-width: 320px;} th,td { line-height: 28%; font-size: min(6.1vw, 22px);} input, button {border-radius: max(2.5vw, 8px);} .leftward,.rightward,.yesterday,.tomorrow { border-top: max(2vw, 6.4px) solid #f5f5f5; border-right: max(2vw, 6.4px) solid transparent; border-bottom: max(2vw, 6.4px) solid transparent; border-left: max(2vw, 6.4px) solid transparent;} .block table td { font-size: max(7vw, 22.4px); border-style: none;} .overlay_for_start .wrap{ width: max(20vw, 56px); height: max(20vw, 56px);} div.circle{ width: max(20vw, 56px); height: max(20vw, 56px); border-radius: max(10vw, 28px); border: max(2vw, 5.6px) solid #f5f5f57f;}} @media screen and (min-width:1280px) { #form_number_place { width: 75%;} #right_ad { display: block; position: relative; width: 25%; flex-grow: 1; min-width: 190px; margin-left: 10px; padding: 10px 5px 5px 5px; text-align: center;} .min_1279_wrap { display: flex; flex-wrap: nowrap;}} @media screen and (max-width:1279px) { #form_number_place { width: 100%;} #right_ad { display: block; position: relative; width: 100%; min-width: 190px; padding-top: 10px; text-align: center;} .min_1279_wrap { display: flex; flex-wrap: wrap;}} .first_half, .latter_half { display: inline-block; position: relative;} #form_number_place input{display: none;} #wrapper { display: flex; justify-content: space-around; flex-wrap: wrap; margin: auto; padding: 4px 0px 0px 0px; width: 100%;} body {margin: 0;} #form_number_place { display: block; position: relative; font-family: sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; background-color: #090921; color: #f5f5f5; margin: 0px; padding: 0px; text-align: left; line-height: 50px; z-index: 20;} table { display: table; position: relative; width : 100%; margin: 0; padding: 0; border-spacing: 0;} th,td { display: table-cell; position: relative; border-style: none; font-weight: normal; margin: 0; padding: 0; overflow-wrap: break-word;} input, button { -webkit-appearance: none; cursor: pointer; color: #f5f5f5; padding: 0; background-color: #19197099;} button:enabled { border-color: #7f7f7f;} button span { display: inline-block; width: 100%; text-align: center; transform: scale(0.95);} input:disabled, button:disabled, .window button:disabled { cursor: default; color: #494970; background-color: #19197049;} .wrap, .rect, .rect12, .rect3 { position: relative; width : 100%; margin: 0; padding: 0;} /*}*/ .rect { padding-top: 360px;} .rect12 { padding-top: 39.41px;} .rect3 { padding-top: 10.75px;} .rect3 + table.inner { height: 10.75px; table-layout: fixed;} .square { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 50; width: 100%; height: 360px; border-collapse: collapse;} .square td { position: relative; border-style: solid; border-color: #f5f5f5; border-width: 2.4px; text-align: center; vertical-align: middle; font-weight: normal; padding: 0; line-height: 1.1; cursor:cell;} .square table.block { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 116.8px; border-collapse: collapse; z-index: 50; table-layout: fixed;} .block td { position: relative; border-width: 1px; border-color: white; font-size: min(7vw, 25px); width: min(33.33%, 38px); height: 38px; background: none; z-index: 50;} .block td:nth-of-type(1) { border-left: none;} .block td:nth-of-type(3) { border-right: none;} .block tr:nth-of-type(1) td { border-top: none;} .block tr:nth-of-type(3) td { border-bottom: none;} .memo { display: none; font-size: 10px; color: #696969; margin: 0px; line-height: 1.01;} .emphasize_memo { color: #7f0000; font-weight: bold;} .bg_table1, .bg_table2 { border-collapse: collapse; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 116.8px; table-layout: fixed;} .bg_table1 {z-index: 40;} .bg_table2 {z-index: 45;} .bg_table1 td, .bg_table2 td { border-style: none;} .bg_table1 td { font-size: 60%;} .bg_table2 div { display: none; position: absolute; color: #808080; font-size: 60%; font-weight: normal; line-height: 1.3;} .control_panel { position: relative; color: #f5f5f5; background-color: #121243; border-collapse: separate; border: none; border-top: 2px solid #696969; border-left: 2px solid #696969; text-align: center; border-radius: 2px;} .vertical-bottom td {vertical-align: bottom;} #lv_num, #lv_dif { position: absolute; bottom: 0; left: 0; color: #f5f5f5; font-size: 70%; line-height: 1.1;} #lv_dif { bottom: 50%;} div.check_frame { position: absolute; width: 2.5em; height: 0.5em; bottom: 0.1em; left: 1.8em; transform: scale(1);} #judge { padding: 4px; bottom: 0.2em;} #server_time, #date_serial {display: none;} #selected_date1 { position: absolute; right: 0; bottom: 0; color: #f5f5f5; font-size: 70%; line-height: 1.1;} #saving, div.saving, #fd {display: none;} #saving:checked ~ div.saving, #saving:checked ~ #fd {display: block;} div.saving, div.measuring { position: absolute; top: 0; left: 0; width: 30%; transform: scale(0.9);} div.saving p, div.measuring p { position: relative; color: #f5f5f5; font-size: 60%; text-align: left; vertical-align: top; white-space: nowrap; line-height: 1.1; margin-block-start: 0; margin-block-end: 0; padding: 0;} div.saving p { font-size: 60%; top: 22px;} div.measuring p { font-size: 80%; top: 3px;} div.circle{ position: relative; vertical-align: top; top: -22px;} #fd { position: absolute; vertical-align: top; bottom: 5%; left: 25%; width: 15px; height: 15px; border: 1px solid #f5f5f5; background-color: #000000;} #fd .label { position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 12px; height: 7px; background-color: #f5f5f5;} #fd .cover { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 8px; height: 6px; background-color: silver;} #fd .guide { position: absolute; top: 80%; left: 40%; transform: translate(-50%, -50%); margin: 0; width: 3px; height: 5px; background-color: #000000;} .blinking{ -webkit-animation:blink 0.1s ease-in-out infinite alternate; -moz-animation:blink 0.1s ease-in-out infinite alternate; animation:blink 0.1s ease-in-out infinite alternate;} @-webkit-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;}} @-moz-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;}} @keyframes blink{ 0% {opacity:0;} 100% {opacity:1;}} .produced_by { position: absolute; top: 0; right: 0; width: 30%; transform: scale(0.9);} .produced_by p { position: relative; color: #f5f5f5; font-size: 50%; text-align: left; vertical-align: top; white-space: nowrap; line-height: 1.1; margin-block-start: 0; margin-block-end: 0; padding: 0;} .continuous_input { position: relative; color: #f5f5f5; background-color: #121243; border-collapse: separate; border: none; border-top: 2px solid #696969; border-left: 2px solid #696969; text-align: center; border-radius: 2px;} .continuous_input th, .continuous_input td { position: relative; border-style: none;} .continuous_input th { text-align: right;} .continuous_input tr:nth-of-type(1) td:nth-of-type(3) { text-align: '';} .continuous_input tr:nth-of-type(1) td button { position: absolute; top: 0; right: 0.5%; bottom: 0; margin: auto; width: 12.5%; height: 29.55px; font-size: 90%;} .continuous_input tr:nth-of-type(2) td button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 90%; height: 35.46px; font-size: 110%;} .continuous_input tr:nth-of-type(3) td { position: relative; border-style: none;} .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; color: #f5f5f5; border: none; border-spacing: 0; text-align: center;} .inner th {width: 65%;} #continuous_on {display: none;} #alert, .overlay_for_start, .overlay_for_alert, #pop-up, .overlay {display: none;} .overlay_for_start span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto;} #start:checked + .overlay_for_start, #alert:checked + .overlay_for_alert, #pop-up:checked + .overlay { display: block; z-index: 9999; background-color: #00000099; position: fixed; width: 100%; height: 110vh; top: 0px; left: 0px;} .alert_window { width: min(100vw, 320px); height: 180px; background-color: #19197099; border-top: 2px solid #696969; border-left: 2px solid #696969; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-align: left; line-height: 30px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto;} .alert_window button { color: #f5f5f5; background-color: #19197099; width: 70px; height: 30px; font-size: 12px; position: absolute; border-radius: 8px; padding: 0px; bottom: 10px;} span.alert_caption { color: #f5f5f5; position: absolute; top: 0px; left: 10px; font-size: 15px;} #parameter {display: none;} #message { position: absolute; text-align: left; margin-left: min(2.8vw, 10px); margin-right: min(2.8vw, 10px); font-size: min(6.1vw, 19.5px);} #ok,#ok2 {right: 85px;} #ok2 {display: none;} button.switch_button { width: 45px; height: 30px;} .window button.switch_button { position: absolute; padding: 0px; top: 46px; right: 5px; width: 45px; height: 30px;} button.switch_button .japanese { font-size: 13px; margin: 0px;} button.switch_button .english { font-size: 10px; margin: 0px;} .memo_input {display: none;} .control_panel td, .control_panel th { position: relative; border-style: none;} .control_panel th {text-align: right;} .width25 td {width: 25%;} .control_panel button { position: relative; width: 95%; height: 27.59px; font-size: 70%;} .control_panel select { width: 40%; font-size: 70%; background: #f5f5f5; margin-right: 13%;} #redo_operation {display: none;} #english_display {display: none;} #english_display:checked ~ * #display_language {background-color: #8c8cb799;} .japanese, #english_display:checked ~ * .english {display: block;} #english_display:checked ~ * .japanese, .english {display: none;} #color_radio0:checked ~ * #input_color_index, #color_radio0:checked ~ * .block td {color: #b0c4de;} #color_radio1:checked ~ * #input_color_index, #color_radio1:checked ~ * .block td {color: #f5f5f5;} #color_radio2:checked ~ * #input_color_index, #color_radio2:checked ~ * .block td {color: #f0e68c;} #color_radio3:checked ~ * #input_color_index, #color_radio3:checked ~ * .block td {color: #ffb6c1;} #pointer:checked ~ * .block td {cursor: pointer;} button.lightsteelblue { width: 23%; background: #b0c4de;} button.whitesmoke { width: 23%; background: #f5f5f5;} button.khaki { width: 23%; background: #f0e68c;} button.lightpink { width: 23%; background: #ffb6c1;} .input_assistance tr:nth-of-type(2) span.english {font-size: 90%;} .input_assistance tr:nth-of-type(3) span.english {font-size: 87%;} .input_assistance tr:nth-of-type(4) span.english {font-size: 64%;} #emph_radio0:checked ~ * .leftward, #emph_radio4:checked ~ * .rightward {border-top-color: #696969;} #emph_radio1:checked ~ * #indicator_lv1, #emph_radio2:checked ~ * #indicator_lv1, #emph_radio2:checked ~ * #indicator_lv2, #emph_radio3:checked ~ * #indicator_lv1, #emph_radio3:checked ~ * #indicator_lv2, #emph_radio3:checked ~ * #indicator_lv3, #emph_radio4:checked ~ * #indicator_lv1, #emph_radio4:checked ~ * #indicator_lv2, #emph_radio4:checked ~ * #indicator_lv3, #emph_radio4:checked ~ * #indicator_lv4 { background-color: #00ff00;} #hide_status, #auto_erase_status, #erase_status {display: none;} #hide_status:checked + #hide, #auto_erase_status:checked ~ * #auto_erase2, #auto_erase_status:checked ~ * #auto_erase, #prevent_duplicate_status:checked + #prevent_duplicate, #erase_status:checked + #erase {background-color: #8c8cb799;} .circle{ position: absolute; top: 0px; left: 0px; text-align: center; display: inline-block;} .check_point{ display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; content: ''; width: 24%; height: 48%; border-left: 2px solid #228b22; border-bottom: 2px solid #228b22; transform: translate(125%, -30%) rotate(-45deg); margin: 0px;} #yesterday, #tomorrow { width: 32px; position: absolute; top: 0; bottom: 0; margin: auto;} #yesterday { left: 0; transform: translate(20%, 0%) } #tomorrow { right: 0; transform: translate(-20%, 0%) } .yesterday, .tomorrow { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0px; height: 0px; border-top-color: #f5f5f5;} .yesterday { transform: translate(-36%, 0%) rotate(90deg);} .tomorrow { transform: translate(36%, 0%) rotate(-90deg);} #y_disabled:checked + .yesterday, #t_disabled:checked + .tomorrow { border-top-color: #696969;} #leftward, #rightward { width: 20%; position: absolute; top: 0; bottom: 0; margin: auto;} #leftward { left: 0; transform: translate(20%, 0%) } #rightward { right: 0; transform: translate(-20%, 0%) } .leftward, .rightward { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0;} .leftward { transform: translate(-30%, 0%) rotate(90deg);} .rightward { transform: translate(30%, 0%) rotate(-90deg);} .indicator { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 45%; height: 21.68px; border: none;} .indicator td { margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: auto; background: #000000; border: 1px solid #f5f5f5;} #date_serial2 { display: none;} .yellow {color: #ffff00;} .new_game th {width: 12%;} .new_game_lv2, .new_game_lv3, .new_game_lv4, .new_game_lv5, .new_game_lv6, .new_game_lv7, .new_game_lv8, .new_game_lv9, .new_game_lv10 {display: none;} .difficulty span { text-align: center; position: absolute; right: 0; bottom: 20%; left: 0; margin: auto; white-space: nowrap;} .difficulty span.japanese { font-size: 12px;} .difficulty span.english { font-size: 10px;} #selected_date2 .english { font-size: 18px;} #selected_date2 { width: 64%;} .overlay_for_start .wrap{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} div.circle{ border-top-color: #f5f5f5; background-color: #00000000; box-sizing: border-box; position: relative; animation:circle 1s linear infinite; -webkit-animation:circle 1s linear infinite;} @keyframes circle{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}} @-webkit-keyframes circle{ 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)}}