@charset "UTF-8";
* { margin: 0px; padding: 0px; }

body { position: relative; }

label { cursor: pointer; }

h1 { border-top: 3px solid midnightblue; text-align: left; padding-left: 0.5em; color: white; background-color: #3c8dbc; }

#flex { display: flex; text-align: center; height: 100vh; width: 100%; }

hr { clear: both; border: none; }

div#command { margin-top: 1em; padding-bottom: 3em; text-align: center; }

input[type="submit"], button { padding: 2px 5px; cursor: pointer; }

input[type=text] { outline: none; padding: 2px 3px; border-radius: 4px; }
input[type=text]:focus { background-color: Ivory; }

#flex div#index-view { width: 500px; display: table-cell; margin: auto; }
#flex div#index-view h2 { margin-top: -3em; }
#flex div#index-view p { margin: 0.5em; }
#flex .question_end { font-size: 120%; }

div#question { width: 780px; display: table-cell; margin: 0px auto; }
div#question #message { border: 1px solid black; text-align: left; margin: 1em 4em; padding: 0.5em; }
div#question .container { border: 1px solid black; float: left; width: 260px; height: 180px; box-sizing: border-box; margin-left: -1px; margin-top: -1px; padding: 3px; }
div#question .container table { width: 100%; border-collapse: collapse; }
div#question .container thead td { font-size: 14px; text-align: left; font-weight: bold; }
div#question .container thead th { width: 50px; height: 2em; padding-bottom: 2px; }
div#question .container thead th span { position: relative; color: white; background-color: #3c8dbc; padding: 2px 6px; }
div#question .container thead th span:after { content: ""; position: absolute; width: 0; height: 0; bottom: -5px; left: 3px; border-style: solid; border-color: #3c8dbc transparent transparent transparent; border-width: 10px 1.2em 0 1.2em; z-index: 1; }
div#question .container tbody tr:hover { background-color: lightcyan; }
div#question .container tbody th { text-align: left; padding-left: 0.5em; height: 35px; }
div#question .container tbody th rt { font-weight: normal; }
div#question .container tbody td input[type="radio"] { transform: scale(1.3); cursor: pointer; }
div#question .error-check { border-color: red; background-color: lavenderblush; }

#answer { width: 100%; display: table-cell; margin: 0px auto; padding-bottom: 10%; }
#answer h1 span { font-size: 70%; }
#answer h3 { width: 100%; color: white; background-color: #3c8dbc; font-size: 90%; }
#answer p#logout { position: absolute; right: 2em; top: 1em; }
#answer p#logout a { color: white; font-weight: bold; text-decoration: none; }
#answer p#logout i { margin-right: 0.25em; }
#answer div#first_div { float: left; }
#answer div#first_div div#agg_area { width: 300px; border: 2px solid midnightblue; border-radius: 5px; margin: 10px; padding: 10px; }
#answer div#first_div div#agg_area table { width: 100%; border-collapse: collapse; margin-top: 5px; }
#answer div#first_div div#agg_area table thead th { color: white; background-color: #3c8dbc; font-size: 10px; border: 1px solid #3c8dbc; width: 80px; }
#answer div#first_div div#agg_area table tbody td { position: relative; height: 2em; font-size: 200%; }
#answer div#first_div div#agg_area table tbody td span.disc { position: absolute; top: 0; left: 0; color: white; background-color: #3c8dbc; font-size: 12px; width: 18px; height: 18px; }
#answer div#first_div div#agg_area table tbody td span.mark { position: absolute; top: 0; left: 0; color: #3c8dbc; font-size: 150%; width: 80px; display: block; text-align: center; opacity: 0.2; }
#answer div#first_div div#agg_area table tbody td.column { border: 1px solid #3c8dbc; font-weight: bold; }
#answer div#first_div div#agg_area table tbody td.no_agg { background-color: lightblue; font-size: 80%; }
#answer div#first_div div#agg_area table tfoot th { color: white; background-color: #3c8dbc; border: 1px solid #3c8dbc; }
#answer div.graph_area { position: relative; border: 2px solid midnightblue; border-radius: 5px; margin: 10px; padding: 10px; width: 300px; float: left; }
#answer div.graph_area p.showbutton { text-align: left; margin-top: -1.3em; margin-left: 0.5em; color: white; }
#answer div.graph_area p.showbutton i:hover { cursor: pointer; }
#answer div.graph_area table.graph { margin-top: 0.5em; width: 100%; border-collapse: collapse; }
#answer div.graph_area table.graph thead th { height: 42px; }
#answer div.graph_area table.graph thead th span { position: relative; font-size: 150%; width: 1.5em; height: 30px; margin: -10px 0.5em 0 0; display: block; text-align: center; color: white; background-color: #3c8dbc; }
#answer div.graph_area table.graph thead th span:after { content: ""; position: absolute; width: 0; height: 0; bottom: -10px; left: 0; border-style: solid; border-color: #3c8dbc transparent transparent transparent; border-width: 10px 0.75em 0 0.75em; z-index: 1; }
#answer div.graph_area table.graph thead th.th-small { font-size: 9px; vertical-align: bottom; }
#answer div.graph_area table.graph tbody tr:nth-child(4n) th { border-bottom: 1px dashed white; }
#answer div.graph_area table.graph tbody tr:nth-child(4n) td { border-bottom: 1px dashed gray; }
#answer div.graph_area table.graph tbody tr:last-child td, #answer div.graph_area table.graph tbody tr:last-child th { border-bottom: none; }
#answer div.graph_area table.graph tbody th { color: white; background-color: #3c8dbc; }
#answer div.graph_area table.graph tbody th.segment { border-bottom: 1px dashed white; }
#answer div.graph_area table.graph tbody td { text-align: right; padding-right: 1em; font-size: 80%; }
#answer div.graph_area table.graph tbody td.strong_set { font-weight: bold; background-color: lightblue; }
#answer div.graph_area table.segment { margin-top: 0.5em; width: 100%; border-collapse: collapse; border-left: 25px solid #3c8dbc; border-top: 2px solid #3c8dbc; border-bottom: 2px solid #3c8dbc; }
#answer div.graph_area table.segment th { color: white; background-color: #3c8dbc; font-size: 12px; width: 3em; }
#answer div.graph_area table.segment td { border-left: 10px solid #3c8dbc; width: 50px; font-weight: bold; font-size: 120%; }
#answer div.graph_area p.pattern { margin-top: 5px; border-left: 20px solid #3c8dbc; border-right: 20px solid #3c8dbc; border-top: 2px solid #3c8dbc; border-bottom: 2px solid #3c8dbc; font-weight: bold; font-size: 120%; }
#answer div.graph_area canvas { position: absolute; top: 30px; left: 0; z-index: 1; }
#answer div.graph_header { clear: both; }
#answer div.stage1 { border: 2px solid midnightblue; border-radius: 5px; margin: 10px; padding: 10px; width: 400px; height: 840px; float: left; }
#answer div.stage1 div.stage1_sub { clear: both; }
#answer div.stage1 div.stage1_sub h3 { position: relative; }
#answer div.stage1 div.stage1_sub h3 span { display: block; position: absolute; left: 3em; top: 0.1em; font-size: 100%; }
#answer div.stage1 div.stage1_sub h3 div { position: relative; width: 1.5em; margin: -3px 0.5em 0 0.5em; display: block; text-align: center; color: white; background-color: #3c8dbc; border: 2px solid white; }
#answer div.stage1 div.stage1_sub h3 div:after { content: ""; position: absolute; width: 0; height: 0; bottom: -8px; left: 0; border-style: solid; border-color: #3c8dbc transparent transparent transparent; border-width: 8px 0.75em 0 0.75em; z-index: 1; }
#answer div.stage1 div.stage1_sub h4 { text-align: left; font-size: 120%; }
#answer div.stage1 div.stage1_sub h5 { text-align: left; font-size: 100%; color: #3c8dbc; }
#answer div.stage1 div.stage1_sub p { font-weight: bold; padding: 1em 4.5em 0.5em 4.5em; border-bottom: 1px solid black; }
#answer div.stage1 div.stage1_sub ul { margin-left: 1em; margin-bottom: 1em; }
#answer div.stage1 div.stage1_sub ul li { text-align: left; font-size: 90%; }
#answer div.stage1 div.stage1_sub div.stage1_text { width: 180px; margin: 5px; float: left; }
#answer div#stage2 { border: 2px solid midnightblue; border-radius: 5px; margin: 10px; padding: 10px; width: 700px; float: left; position: relative; }
#answer div#stage2 table { margin-top: 0.5em; width: 100%; border-collapse: collapse; border-left: 1px solid #3c8dbc; border-right: 1px solid #3c8dbc; }
#answer div#stage2 table thead th { color: white; background-color: #3c8dbc; height: 30px; }
#answer div#stage2 table thead th div { position: relative; font-size: 150%; width: 1.5em; height: 30px; margin: -3px 0.5em 0 0.5em; display: block; text-align: center; color: white; background-color: #3c8dbc; border: 2px solid white; }
#answer div#stage2 table thead th div:after { content: ""; position: absolute; width: 0; height: 0; bottom: -10px; left: 0; border-style: solid; border-color: #3c8dbc transparent transparent transparent; border-width: 10px 0.75em 0 0.75em; z-index: 1; }
#answer div#stage2 table tbody td { padding: 2px 2px 1px 2px; border-right: 1px solid #3c8dbc; border-bottom: 1px solid #3c8dbc; font-size: 90%; }
#answer div#stage2 table tbody td.current_strong { color: white; background-color: #3c8dbc; width: 11em; }
#answer div#stage2 table tbody td.near_strong { background-color: lightblue; }
#answer div#stage3 { border: 2px solid midnightblue; border-radius: 5px; margin: 10px; padding: 10px; width: 700px; float: left; position: relative; }
#answer div#stage3 dl { width: 300px; float: left; padding-top: 0.5em; padding-left: 0.5em; box-sizing: border-box; }
#answer div#stage3 dl dt { font-weight: bold; text-align: left; }
#answer div#stage3 dl dd { margin-left: 1em; margin-bottom: 0.5em; text-align: left; font-size: 90%; }
#answer div#stage3 div { box-sizing: border-box; width: 400px; float: left; text-align: left; padding-top: 0.5em; padding-left: 0.5em; line-height: 1.6; }
#answer p.scale-icon { color: white; position: absolute; right: 15px; top: 10px; font-size: small; cursor: pointer; }
#answer p.scale-icon i { padding: 0px 2px; }
#answer input[type="range"] { width: 100px; -webkit-appearance: none; appearance: none; cursor: pointer; background: #8acdff; height: 6px; border-radius: 4px; border: solid 1px white; outline: 0; /* アウトラインを消して代わりにfocusのスタイルをあてる */ }
#answer input[type="range"]:focus { box-shadow: 0 0 3px #00a1ff; }
#answer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background: white; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); }
#answer input[type="range"]::-moz-range-thumb { background: white; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); border: none; }
#answer input[type="range"]::-moz-focus-outer { border: 0; }
#answer input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3); }

div#answer_data { height: 400px; overflow-y: scroll; }
div#answer_data ul li { list-style-type: none; border-bottom: 1px dotted gray; margin-top: 0.5em; }
div#answer_data ul li button { margin: 1em 0.5em; vertical-align: top; }
div#answer_data ul li p { display: inline-block; width: 17em; }
div#answer_data ul li span.name { font-size: 120%; }
div#answer_data ul li span.date { font-size: 60%; }
div#answer_data ul li .id-edit { font-size: small; cursor: pointer; opacity: 0; padding-left: 0.25em; }
div#answer_data ul li .id-edit:hover { opacity: 1; }
div#answer_data li:hover .id-edit { opacity: 0.5; }

div#modal_close { text-align: center; margin-top: 1em; }

.help-text { position: relative; }
.help-text .help-balloon { position: absolute; display: none; padding: 6px; color: white; background-color: teal; border-radius: 6px; width: max-content; max-width: 15em; text-align: center; font-size: 0.8rem; z-index: 9999; top: 34px; left: -10px; text-align: left; }
.help-text .help-balloon::before { content: ""; position: absolute; border: 6px solid transparent; }
.help-text .help-balloon::before { top: -12px; left: 10px; border-bottom: 6px solid teal; }
.help-text:hover .help-balloon { display: inline-block; }

/* jquery alert用 */
#popup_container { min-width: 300px; /* Dialog will be no smaller than this */ max-width: 600px; /* Dialog will wrap after this width */ border: solid 3px #225b6f; background: #fff; color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4); }

#popup_title { margin: 0; padding: 0; border-bottom: solid 1px #225b6f; background: #225b6f; color: #fff; font-size: 16px; text-align: center; line-height: 1.75em; cursor: default; border: none; }
#popup_title i { margin: 0.25em; }

#popup_content { margin: 0; padding: 1em 1.75em; }

#popup_content.alert #popup_message:before { font-family: "Font Awesome 5 Free"; content: "\f071"; font-weight: 900; margin-right: 0.3em; font-size: 100%; color: darkgoldenrod; margin-left: -1em; }

#popup_content.confirm #popup_message:before { font-family: "Font Awesome 5 Free"; content: "\f059"; font-weight: 900; margin-right: 0.3em; font-size: 100%; color: #225b6f; margin-left: -1em; }

#popup_content.error #popup_message:before { font-family: "Font Awesome 5 Free"; content: "\f06a"; font-weight: 900; margin-right: 0.3em; font-size: 100%; color: red; margin-left: -1em; }

#popup_content.message #popup_message:before { font-family: "Font Awesome 5 Free"; content: "\f058"; font-weight: 900; margin-right: 0.3em; font-size: 100%; color: #225b6f; margin-left: -1em; }

#popup_message input[type=text] { padding: 2px 3px; outline: none; font-size: 120%; }

#popup_panel { text-align: center; margin: 1em 0 0 0; }
#popup_panel input[type=button] { padding: 2px 4px; margin-right: 3px; cursor: pointer; }

#popup_prompt { margin: .5em 0; }

/*# sourceMappingURL=design.css.map */