body {
    position: relative;
    box-sizing: border-box;
    font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-feature-settings: "fwid" 1;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
}

textarea, input {
    padding: 0;
    border: 1px solid;
}

img {
    width: 100%;
    box-sizing: border-box;
}

div {
    background-repeat: no-repeat;
    background-size: contain;
}

.hide {
    display: none;
}

.preloadImages {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    z-index: 100;
}

.header.fullScreen {
    height: 1.75vw;
}

.header.type1 {
    background-color: #46b2e7;
}

.header.type2 {
    background-color: #63b186;
}

.header.type3 {
    background-color: #e7a548;
}

.header.type4 {
    background-color: #55afba;
}

.header.contents {
    background-color: #597c8f;
}

.header.explanation {
    background-color: #808080;
}

.popupContainer {
    position: fixed;
    z-index: 1000;
    top: 0;
    /*width: 1366px;*/
    width: 100%;
    min-width: 1366px;
    min-height: 768px;
    height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

.explanationContainer {
    background-color: #fff;
}

.explanationContainer,
.container {
    position: relative;
    width: 1366px;
    /*min-height: 768px;*/
    /*height: 100vh;*/
    margin: 0 auto;
    min-height: 100vh; /* Fallback */
    min-height: calc(var(--vh, 1vh) * 100);
}

.explanationContainer.fullScreen,
.popupContainer.fullScreen,
.container.fullScreen {
    width: 100vw;
    min-width: auto;
}

#main {
    position: absolute;
    width: 100%;
    height: 100%;
}

.icon {
    position: absolute;
    top: 59px;
}

.fullScreen .icon {
    top: 4.31vw;
}

.type1 .icon {
    left: 60px;
    width: 54.5px;
    height: 60px;
    background-image: url("../img/icon_type1.png");
}

.fullScreen .type1 .icon {
    left: 4.39vw;
    width: 3.98vw;
    height: 4.39vw;
}

.type1.onRuby .icon {
    background-image: url("../img/icon_type1_ruby.png");
}

.type2 .icon {
    left: 57px;
    width: 63px;
    height: 62px;
    background-image: url("../img/icon_type2.png");
}

.fullScreen .type2 .icon {
    left: 4.17vw;
    width: 4.61vw;
    height: 4.53vw;
}

.type2.onRuby .icon {
    background-image: url("../img/icon_type2_ruby.png");
}

.type3 .icon {
    top: 58px;
    left: 53px;
    width: 64px;
    height: 61px;
    background-image: url("../img/icon_type3.png");
}

.fullScreen .type3 .icon {
    top: 4.24vw;
    left: 3.87vw;
    width: 4.68vw;
    height: 4.46vw;
}

.type3.onRuby .icon {
    background-image: url("../img/icon_type3_ruby.png");
}

.type4 .icon {
    top: 52px;
    left: 54px;
    width: 66px;
    height: 76px;
    background-image: url("../img/icon_type4.png");
}

.fullScreen .type4 .icon {
    top: 3.8vw;
    left: 3.95vw;
    width: 4.83vw;
    height: 5.56vw;
}

.type4.onRuby .icon {
    background-image: url("../img/icon_type4_ruby.png");
}

.title {
    position: absolute;
    top: 43px;
    left: 138px;
    width: 477.5px;
    height: 91.5px;
    background-image: url("../img/title.png");
}

.fullScreen .title {
    top: 3.14vw;
    left: 10.10vw;
    width: 34.95vw;
    height: 6.69vw;
}

.onRuby .title {
    background-image: url("../img/title_ruby.png");
}

.btnReset {
    position: absolute;
    top: 55px;
    right: 56px;
    width: 212px;
    height: 41px;
    background-image: url("../img/btn_reset.svg");
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.fullScreen .btnReset {
    top: 4.02vw;
    right: 4.09vw;
    width: 15.51vw;
    height: 3vw;
    border-radius: 0.58vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.btnReset.active {
    box-shadow: none;
}

.onRuby .btnReset {
    background-image: url("../img/btn_reset_ruby.svg");
}

.btnShowScoring,
.btnShowScorecard {
    position: absolute;
    bottom: 7px;
    right: 56px;
    width: 212px;
    height: 41px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.btnShowScoring {
    background-image: url("../img/btn_show_answer.svg");
}

.onRuby .btnShowScoring {
    background-image: url("../img/btn_show_answer_ruby.svg");
}

.btnShowScorecard {
    background-image: url("../img/btn_show_point.svg");
}

.onRuby .btnShowScorecard {
    background-image: url("../img/btn_show_point_ruby.svg");
}

.fullScreen .btnShowScoring,
.fullScreen .btnShowScorecard {
    bottom: 0.51vw;
    right: 4.09vw;
    width: 15.51vw;
    height: 3vw;
    border-radius: 0.58vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.btnShowScoring.active,
.btnShowScorecard.active {
    box-shadow: none;
}

.btnFullScreen {
    position: absolute;
    top: 98px;
    right: 175px;
    width: 93px;
    height: 34px;
    background-image: url("../img/btn_full_screen.png");
    z-index: 100;
}

.fullScreen .btnFullScreen {
    top: 7.17vw;
    right: 12.81vw;
    width: 6.8vw;
    height: 2.48vw;
}

.btnFullScreen.on {
    background-image: url("../img/btn_full_screen_on.png");
}

.onRuby .btnFullScreen {
    background-image: url("../img/btn_full_screen_ruby.png");
}

.onRuby .btnFullScreen.on {
    background-image: url("../img/btn_full_screen_ruby_on.png");
}

.btnRuby {
    position: absolute;
    top: 100px;
    right: 57px;
    width: 106.5px;
    height: 32px;
    background-image: url("../img/btn_ruby.png");
    z-index: 100;
}

.fullScreen .btnRuby {
    top: 7.32vw;
    right: 4.17vw;
    width: 7.79vw;
    height: 2.34vw;
}

.btnRuby.on {
    background-image: url("../img/btn_ruby_on.png");
}

.switchPageWrap {
    position: absolute;
    top: 74px;
    left: 782px;
}

.fullScreen .switchPageWrap {
    top: 5.41vw;
    left: 57.24vw;
}

.arrowLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-image: url("../img/arrow_left.svg");
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    border: solid 1px #587c8f;
    box-sizing: border-box;
}

.fullScreen .arrowLeft {
    width: 2.92vw;
    height: 2.92vw;
    border-radius: 1.46vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
    border: solid 0.073vw #587c8f;
}

.arrowLeft.active {
    box-shadow: none;
}

.arrowLeft.disable {
    pointer-events: none;
    box-shadow: none;
    opacity: 0.5;
}

.arrowRight {
    position: absolute;
    top: 0;
    left: 246px;
    width: 40px;
    height: 40px;
    background-image: url("../img/arrow_right.svg");
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    border: solid 1px #587c8f;
    box-sizing: border-box;
}

.fullScreen .arrowRight {
    left: 18vw;
    width: 2.92vw;
    height: 2.92vw;
    border-radius: 1.46vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
    border: solid 0.073vw #587c8f;
}

.arrowRight.active {
    box-shadow: none;
}

.indicatorArea {
    position: absolute;
    top: 13px;
    left: 52px;
    width: 184px;
}

.fullScreen .indicatorArea {
    top: 0.95vw;
    left: 3.8vw;
    width: 13.46vw;
}

.indicatorWrap {
    float: left;
    margin-right: 9px;
}

.fullScreen .indicatorWrap {
    margin-right: 0.65vw;
}

.indicatorWrap:last-child {
    margin-right: 0;
}

.indicator {
    position: relative;
    margin-right: 9px;
    width: 12px;
    height: 12px;
    background-image: url("../img/indicator.svg");
    float: left;
}

.fullScreen .indicator {
    margin-right: 0.65vw;
    width: 0.87vw;
    height: 0.87vw;
}

.indicator.selected {
    background-image: url("../img/indicator_selected.svg");
}

.indicator:last-child {
    margin-right: 0;
}

.indicatorColor {
    position: absolute;
    top: -12px;
    left: -6px;
    width: 24px;
    height: 6px;
    border-radius: 10px;
}

.fullScreen .indicatorColor {
    top: -0.87vw;
    left: -0.43vw;
    width: 1.75vw;
    height: 0.43vw;
    border-radius: 0.73vw;
}

.indicatorColor.type1 {
    background-color: #46b2e7;
}

.indicatorColor.type2 {
    background-color: #3ab483;
}

.indicatorColor.type3 {
    background-color: #f5a32d;
}

.indicatorColor.type4 {
    background-color: #00b2bc;
}

.indicator:first-child .indicatorColor.type1,
.indicator:first-child .indicatorColor.type2,
.indicator:first-child .indicatorColor.type3,
.indicator:first-child .indicatorColor.type4 {
    left: 0;
    width: 20px;
}

.fullScreen .indicator:first-child .indicatorColor.type1,
.fullScreen .indicator:first-child .indicatorColor.type2,
.fullScreen .indicator:first-child .indicatorColor.type3,
.fullScreen .indicator:first-child .indicatorColor.type4 {
    width: 1.46vw;
}

.indicator:last-child .indicatorColor.type1,
.indicator:last-child .indicatorColor.type2,
.indicator:last-child .indicatorColor.type3,
.indicator:last-child .indicatorColor.type4 {
    left: auto;
    right: 0;
    width: 20px;
}

.fullScreen .indicator:last-child .indicatorColor.type1,
.fullScreen .indicator:last-child .indicatorColor.type2,
.fullScreen .indicator:last-child .indicatorColor.type3,
.fullScreen .indicator:last-child .indicatorColor.type4 {
    width: 1.46vw;
}

.indicator .check {
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 12px;
    height: 12px;
    background-image: url("../img/check.svg");
}

.fullScreen .indicator .check {
    bottom: -1.17vw;
    width: 0.87vw;
    height: 0.87vw;
}

.textArea {
    position: absolute;
    top: 151px;
    left: 57px;
    width: 1253px;
    min-height: 560px;
    height: calc(100% - 208px);
}

.fullScreen .textArea {
    top: 11.05vw;
    left: 4.17vw;
    width: 91.72vw;
    min-height: 40.99vw;
    height: calc(100% - 15.22vw);
}

.textWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 662px;
    height: 100%;
    border-radius: 7px;
    z-index: 1;
}

.fullScreen .textWrap {
    width: 48.46vw;
    border-radius: 0.51vw;
}

.type1 .textWrap {
    background-color: #a2d9f3;
}

.type2 .textWrap {
    background-color: #abd7c2;
}

.type3 .textWrap {
    background-color: #f2d29e;
}

.type4 .textWrap {
    background-color: #98d7dc;
}

.textScrollArea {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 626px;
    min-height: 524px;
    height: calc(100% - 36px);
    background-color: #fff;
    border-radius: 7px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.fullScreen .textScrollArea {
    top: 1.31vw;
    left: 1.31vw;
    width: 45.82vw;
    min-height: 38.36vw;
    height: calc(100% - 2.63vw);
    border-radius: 0.51vw;
}

.textScrollArea::-webkit-scrollbar {
    background: #e5e5e5;
    width: 18px;
}

.fullScreen .textScrollArea::-webkit-scrollbar {
    width: 1.31vw;
}

.textScrollArea::-webkit-scrollbar-thumb {
    background: #b2b2b2;
}

.questionWrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 596px;
    height: 100%;
}

.fullScreen .questionWrap {
    width: 43.63vw;
}

.type1 .questionWrap {
    background-color: #ecf7fd;
}

.type2 .questionWrap {
    background-color: #edf7f3;
}

.type3 .questionWrap {
    background-color: #fcf6eb;
}

.type4 .questionWrap {
    background-color: #e9f6f8;
}

.questionScrollArea {
    position: absolute;
    top: 0;
    left: 5px;
    width: 592px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.fullScreen .questionScrollArea {
    left: 0.36vw;
    width: 43.33vw;
}

.questionScrollArea::-webkit-scrollbar {
    background: #e5e5e5;
    width: 18px;
}

.fullScreen .questionScrollArea::-webkit-scrollbar {
    width: 1.31vw;
}

.questionScrollArea::-webkit-scrollbar-thumb {
    background: #b2b2b2;
}

.answerTextArea {
    position: relative;
    margin-left: 80px;
    width: 458px;
    resize: none;
    font-size: 22px;
    box-sizing: border-box;
    border-radius: 0;
}

.fullScreen .answerTextArea {
    margin-left: 5.85vw;
    width: 33.52vw;
    font-size: 1.61vw;
}

/*.showScoring .answerTextArea {*/
/*    pointer-events: none;*/
/*}*/

.qTextAnswer {
    position: relative;
}

.scoringCheckboxInputLabel {
    padding: 2px 0;
    margin-left: 80px;
    margin-right: 53px;
    height: 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fullScreen .scoringCheckboxInputLabel {
    padding: 0.14vw 0;
    margin-left: 5.85vw;
    margin-right: 3.87vw;
    height: 0.95vw;
}

.scoringCheckboxInputLabel {
    margin-bottom: 10px;
}

.fullScreen .scoringCheckboxInputLabel {
    margin-bottom: 0.73vw;
}

.scoringCheckboxInputLabel:last-child {
    margin-bottom: 0;
}

.scoringCheckboxInput {
    margin: 0;
    width: 0;
    opacity: 0;
}

.scoringCheckboxInput:checked + .scoringCheckboxInputSelectInput::before {
    content: "";
    display: block;
    position: absolute;
    top: -30%;
    left: 5%;
    width: 140%;
    height: 140%;
    background: url("../img/check.svg") no-repeat center;
    background-size: contain;
}

.scoringCheckboxInputSelectInput, .scoringCheckbox {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 10px;
    height: 10px;
    border: solid 1.5px #848484;
    background: #ffff;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.27) inset;
}

.scoringCheckbox {
    position: absolute;
}

.fullScreen .scoringCheckboxInputSelectInput,
.fullScreen .scoringCheckbox {
    width: 0.73vw;
    height: 0.73vw;
    border: solid 0.1vw #848484;
    box-shadow: 0.07vw 0.07vw 0.14vw rgba(0, 0, 0, 0.27) inset;
}

.scoringCheckbox {
    top: -25px;
    left: 283px;
}

.fullScreen .scoringCheckbox {
    top: -1.83vw;
    left: 20.71vw;
}

.answerCheckboxInputLabel {
    padding: 2px 0;
    margin-left: 80px;
    margin-right: 53px;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fullScreen .answerCheckboxInputLabel {
    padding: 0.14vw 0;
    margin-left: 5.85vw;
    margin-right: 3.87vw;
    height: 1.17vw;
}

.answerCheckboxInputLabel {
    margin-bottom: 11px;
}

.fullScreen .answerCheckboxInputLabel {
    margin-bottom: 0.8vw;
}

.answerCheckboxInputLabel:last-child {
    margin-bottom: 0;
}

.answerCheckboxInput {
    margin: 0;
    width: 0;
    opacity: 0;
}

.answerCheckboxInput:checked + .answerCheckboxInputSelectInput::before {
    content: "";
    display: block;
    position: absolute;
    top: -30%;
    left: 5%;
    width: 140%;
    height: 140%;
    background: url("../img/check.svg") no-repeat center;
    background-size: contain;
}

.type1 .answerCheckboxInput:checked + .answerCheckboxInputSelectInput::before {
    background: url("../img/check_type1.svg") no-repeat center;
}

.type2 .answerCheckboxInput:checked + .answerCheckboxInputSelectInput::before {
    background: url("../img/check_type2.svg") no-repeat center;
}

.type4 .answerCheckboxInput:checked + .answerCheckboxInputSelectInput::before {
    background: url("../img/check_type4.svg") no-repeat center;
}

.answerCheckboxInputSelectInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 15px;
    height: 15px;
    /*border: solid 1px #3bb582;*/
    background: none;
}

.fullScreen .answerCheckboxInputSelectInput {
    width: 1.09vw;
    height: 1.09vw;
}

.scoringCheckboxList, .answerCheckboxList {
    position: absolute;
    width: 100%;
}

.showScoring .answerCheckboxList {
    pointer-events: none;
}

.scoreBg {
    position: absolute;
    bottom: 15px;
    right: 49px;
    width: 149px;
    height: 64px;
    background-image: url("../img/score_bg.svg");
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    background-color: #fff;
}

.fullScreen .scoreBg {
    bottom: 1.09vw;
    right: 3.58vw;
    width: 10.9vw;
    height: 4.68vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.35);
    border-radius: 0.36vw;
}

.onRuby .scoreBg {
    background-image: url("../img/score_bg_ruby.svg");
}

.scoreNumWrap {
    position: absolute;
    top: 11px;
    right: 72px;
}

.fullScreen .scoreNumWrap {
    top: 0.8vw;
    right: 5.27vw;
}

.scoreNum {
    position: relative;
    margin-right: 2px;
    width: 18px;
    height: 29px;
    float: left;
}

.fullScreen .scoreNum {
    margin-right: 0.14vw;
    width: 1.31vw;
    height: 2.12vw;
}

.scoreNum:last-child {
    margin-right: 0;
}

.scoreNum0 {
    background-image: url("../img/score_num_0.svg");
}

.scoreNum1 {
    background-image: url("../img/score_num_1.svg");
}

.scoreNum2 {
    background-image: url("../img/score_num_2.svg");
}

.scoreNum3 {
    background-image: url("../img/score_num_3.svg");
}

.scoreNum4 {
    background-image: url("../img/score_num_4.svg");
}

.scoreNum5 {
    background-image: url("../img/score_num_5.svg");
}

.scoreNum6 {
    background-image: url("../img/score_num_6.svg");
}

.scoreNum7 {
    background-image: url("../img/score_num_7.svg");
}

.scoreNum8 {
    background-image: url("../img/score_num_8.svg");
}

.scoreNum9 {
    background-image: url("../img/score_num_9.svg");
}

.scoring {
    display: none;
}

.scorecardWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.25);
    overflow-y: scroll;
}

.scorecardBg {
    position: relative;
    margin: 0 auto;
    margin-top: 76px;
    width: 1100px;
    height: 600px;
    min-height: calc(768px - 96px);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #313131;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.fullScreen .scorecardBg {
    margin-top: 5.56vw;
    width: 80.52vw;
    height: 43.92vw;
    min-height: calc(56.22vw - 7.02vw);
    border-radius: 1.09vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.scorecardBg th,
.scorecardBg td {
    border: 5px solid #fff;
    box-sizing: border-box;
    background-color: #eaedf3;
    vertical-align: middle;
    height: 80px;
    text-align: center;
}

.fullScreen .scorecardBg th,
.fullScreen .scorecardBg td {
    border: 0.36vw solid #fff;
    height: 5.85vw;
}

.scorecardBg tr:first-child th {
    background-color: #5c80b8;
    color: #fff;
}

.scorecardBg tr:nth-child(2n) td {
    background-color: #d2d8e6;
}

.blankField {
    background-color: #f1c5c5 !important;
}

.scorecardBg table {
    position: relative;
    margin: 0 auto;
    margin-top: 70px;
    width: 768px;
    height: 405px;
    table-layout: fixed;
}

.fullScreen .scorecardBg table {
    margin-top: 5.12vw;
    width: 56.22vw;
    height: 29.64vw;
}

.btnCloseScorecard {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    background-image: url("../img/btn_close.svg");
}

.fullScreen .btnCloseScorecard {
    top: 1.09vw;
    right: 1.09vw;
    width: 3.51vw;
    height: 3.51vw;
}

.warningWrap {
    position: absolute;
    bottom: 85px;
    left: 170px;
}

.fullScreen .warningWrap {
    bottom: 6.22vw;
    left: 12.44vw;
}

.iconWarning {
    position: absolute;
    top: 48px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url("../img/icon_warning.svg");
    float: left;
}

.fullScreen .iconWarning {
    top: 3.51vw;
    width: 2.19vw;
    height: 2.19vw;
}

.scorecardWarning {
    position: relative;
    width: 373.5px;
    height: 84.5px;
    background-image: url("../img/scorecard_warning.png");
    float: left;
}

.onRuby .scorecardWarning {
    background-image: url("../img/scorecard_warning_ruby.png");
}

.fullScreen .scorecardWarning {
    width: 27.34vw;
    height: 6.18vw;
}

.scorecardType1,
.scorecardType2,
.scorecardType3,
.scorecardType4 {
    position: relative;
    margin-bottom: 5px;
    height: 48.5px;
    display: inline-block;
}

.fullScreen .scorecardType1,
.fullScreen .scorecardType2,
.fullScreen .scorecardType3,
.fullScreen .scorecardType4 {
    margin-bottom: 0.36vw;
    height: 3.55vw;
}

.scorecardType1 {
    width: 48px;
    background-image: url("../img/scorecard_type1.png");
}

.onRuby .scorecardType1 {
    background-image: url("../img/scorecard_type1_ruby.png");
}

.fullScreen .scorecardType1 {
    width: 3.51vw;
}

.scorecardType2 {
    width: 112px;
    background-image: url("../img/scorecard_type2.png");
}

.onRuby .scorecardType2 {
    background-image: url("../img/scorecard_type2_ruby.png");
}

.fullScreen .scorecardType2 {
    width: 8.19vw;
}

.scorecardType3 {
    width: 48px;
    background-image: url("../img/scorecard_type3.png");
}

.onRuby .scorecardType3 {
    background-image: url("../img/scorecard_type3_ruby.png");
}

.fullScreen .scorecardType3 {
    width: 3.51vw;
}

.scorecardType4 {
    width: 112px;
    background-image: url("../img/scorecard_type4.png");
}

.onRuby .scorecardType4 {
    width: 112px;
    background-image: url("../img/scorecard_type4_ruby.png");
}

.fullScreen .scorecardType4 {
    width: 8.19vw;
}

.iconScorecard1,
.iconScorecard2,
.iconScorecard3 {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-block;
}

.fullScreen .iconScorecard1,
.fullScreen .iconScorecard2,
.fullScreen .iconScorecard3 {
    width: 2.04vw;
    height: 2.04vw;
}

.iconScorecard1 {
    background-image: url("../img/icon_scorecard1.svg");
}

.iconScorecard2 {
    background-image: url("../img/icon_scorecard2.svg");
}

.iconScorecard3 {
    background-image: url("../img/icon_scorecard3.svg");
}

.scorecardHyphen {
    position: relative;
    width: 20px;
    height: 2px;
    background-image: url("../img/scorecard_hyphen.svg");
    display: inline-block;
    vertical-align: middle;
}

.fullScreen .scorecardHyphen {
    width: 1.46vw;
    height: 0.14vw;
}

.scorecardSubtotal {
    position: relative;
    width: 48px;
    height: 48.5px;
    background-image: url("../img/scorecard_subtotal.png");
    display: inline-block;
}

.onRuby .scorecardSubtotal {
    background-image: url("../img/scorecard_subtotal_ruby.png");
}

.fullScreen .scorecardSubtotal {
    width: 3.51vw;
    height: 3.55vw;
}

.scorecardPointWrap {
    position: absolute;
    bottom: 75px;
    left: 590px;
}

.fullScreen .scorecardPointWrap {
    bottom: 5.49vw;
    left: 43.19vw;
}

.scorecardTotal {
    position: relative;
    margin-top: 36px;
    margin-right: 13px;
    width: 51px;
    height: 51.5px;
    background-image: url("../img/scorecard_total.png");
    float: left;
}

.onRuby .scorecardTotal {
    background-image: url("../img/scorecard_total_ruby.png");
}

.fullScreen .scorecardTotal {
    margin-top: 2.63vw;
    margin-right: 0.95vw;
    width: 3.73vw;
    height: 3.77vw;
}

.scorecardScoreBg {
    position: relative;
    width: 240px;
    height: 96px;
    background-image: url("../img/scorecard_score_bg.svg");
    float: left;
}

.fullScreen .scorecardScoreBg {
    width: 17.56vw;
    height: 7.02vw;
}

.scorecardPoint {
    position: relative;
    margin-top: 36px;
    margin-left: 9px;
    width: 26px;
    height: 51.5px;
    background-image: url("../img/scorecard_point.png");
    float: left;
}

.onRuby .scorecardPoint {
    background-image: url("../img/scorecard_point_ruby.png");
}

.fullScreen .scorecardPoint {
    margin-top: 2.63vw;
    margin-left: 0.65vw;
    width: 1.9vw;
    height: 3.77vw;
}

.scorecardTotalNumWrap {
    position: absolute;
    top: 17px;
    right: 114px;
}

.fullScreen .scorecardTotalNumWrap {
    top: 1.24vw;
    right: 8.34vw;
}

.scorecardTotalNum {
    position: relative;
    margin-right: 4px;
    width: 31px;
    height: 50px;
    float: left;
}

.fullScreen .scorecardTotalNum {
    margin-right: 0.29vw;
    width: 2.26vw;
    height: 3.66vw;
}

.scorecardTotalNum:last-child {
    margin-right: 0;
}

.scorecardNumWrap {
    position: relative;
    display: inline-block;
}

.scorecardNum {
    position: relative;
    width: 24px;
    height: 38px;
    margin-right: 3px;
    float: left;
}

.fullScreen .scorecardNum {
    width: 1.75vw;
    height: 2.78vw;
    margin-right: 0.21vw;
}

.scorecardNumS {
    position: relative;
    bottom: -25px;
    width: 16px;
    height: 26px;
    margin-right: 2px;
    float: left;
}

.fullScreen .scorecardNumS {
    bottom: -1.83vw;
    width: 1.17vw;
    height: 1.9vw;
    margin-right: 0.14vw;
}

.scorecardNum:last-child,
.scorecardNumS:last-child {
    margin-right: 0;
}

.scorecardNum0 {
    background-image: url("../img/scorecard_num_0.svg");
}

.scorecardNum1 {
    background-image: url("../img/scorecard_num_1.svg");
}

.scorecardNum2 {
    background-image: url("../img/scorecard_num_2.svg");
}

.scorecardNum3 {
    background-image: url("../img/scorecard_num_3.svg");
}

.scorecardNum4 {
    background-image: url("../img/scorecard_num_4.svg");
}

.scorecardNum5 {
    background-image: url("../img/scorecard_num_5.svg");
}

.scorecardNum6 {
    background-image: url("../img/scorecard_num_6.svg");
}

.scorecardNum7 {
    background-image: url("../img/scorecard_num_7.svg");
}

.scorecardNum8 {
    background-image: url("../img/scorecard_num_8.svg");
}

.scorecardNum9 {
    background-image: url("../img/scorecard_num_9.svg");
}

.scorecardSlash {
    position: relative;
    bottom: -10px;
    margin-left: -12px;
    margin-right: -9px;
    width: 44px;
    height: 44px;
    background-image: url("../img/scorecard_slash.svg");
    float: left;
}

.fullScreen .scorecardSlash {
    bottom: -0.73vw;
    margin-left: -0.87vw;
    margin-right: -0.65vw;
    width: 3.22vw;
    height: 3.22vw;
}

.numberInputsWrap {
    position: absolute;
    right: 40px;
}

.fullScreen .numberInputsWrap {
    right: 2.92vw;
}

.wordCount {
    position: relative;
    width: 14px;
    height: 29.5px;
    background-image: url("../img/word_count.png");
    float: left;
}

.fullScreen .wordCount {
    width: 1.02vw;
    height: 2.15vw;
}

.onRuby .wordCount {
    background-image: url("../img/word_count_ruby.png");
}

.over .wordCount {
    background-image: url("../img/word_count_red.png");
}

.onRuby .over .wordCount {
    background-image: url("../img/word_count_red_ruby.png");
}

.wordCountNum {
    position: relative;
    margin-top: 4px;
    width: 8px;
    height: 25.5px;
    float: left;
    margin-right: 2px;
    background-position: center;
}

.fullScreen .wordCountNum {
    margin-top: 0.29vw;
    width: 0.58vw;
    height: 1.86vw;
    margin-right: 0.14vw;
}

.wordCountNum0 {
    background-image: url("../img/word_num_0.png");
}

.wordCountNum1 {
    background-image: url("../img/word_num_1.png");
}

.wordCountNum2 {
    background-image: url("../img/word_num_2.png");
}

.wordCountNum3 {
    background-image: url("../img/word_num_3.png");
}

.wordCountNum4 {
    background-image: url("../img/word_num_4.png");
}

.wordCountNum5 {
    background-image: url("../img/word_num_5.png");
}

.wordCountNum6 {
    background-image: url("../img/word_num_6.png");
}

.wordCountNum7 {
    background-image: url("../img/word_num_7.png");
}

.wordCountNum8 {
    background-image: url("../img/word_num_8.png");
}

.wordCountNum9 {
    background-image: url("../img/word_num_9.png");
}

.over .wordCountNum0 {
    background-image: url("../img/word_num_red_0.png");
}

.over .wordCountNum1 {
    background-image: url("../img/word_num_red_1.png");
}

.over .wordCountNum2 {
    background-image: url("../img/word_num_red_2.png");
}

.over .wordCountNum3 {
    background-image: url("../img/word_num_red_3.png");
}

.over .wordCountNum4 {
    background-image: url("../img/word_num_red_4.png");
}

.over .wordCountNum5 {
    background-image: url("../img/word_num_red_5.png");
}

.over .wordCountNum6 {
    background-image: url("../img/word_num_red_6.png");
}

.over .wordCountNum7 {
    background-image: url("../img/word_num_red_7.png");
}

.over .wordCountNum8 {
    background-image: url("../img/word_num_red_8.png");
}

.over .wordCountNum9 {
    background-image: url("../img/word_num_red_9.png");
}

.wordCountWarning1 {
    position: relative;
    margin-right: 15px;
    width: 163px;
    height: 29.5px;
    background-image: url("../img/word_count_warning.png");
    float: left;
}

.onRuby .wordCountWarning1 {
    background-image: url("../img/word_count_warning_ruby.png");
}

.fullScreen .wordCountWarning1 {
    margin-right: 1.09vw;
    width: 11.93vw;
    height: 2.15vw;
}

.wordCountWarning2 {
    position: relative;
    margin-right: 15px;
    width: 219.5px;
    height: 29.5px;
    background-image: url("../img/word_count_warning2.png");
    float: left;
}

.onRuby .wordCountWarning2 {
    background-image: url("../img/word_count_warning2_ruby.png");
}

.fullScreen .wordCountWarning2 {
    margin-right: 1.09vw;
    width: 16.06vw;
    height: 2.15vw;
}

.scoringCompleted {
    position: relative;
    margin-top: 10px;
    margin-left: 68px;
    width: 476px;
    height: 40px;
    background-image: url("../img/scoring_completed.svg");
}

.onRuby .scoringCompleted {
    background-image: url("../img/scoring_completed_ruby.svg");
}

.fullScreen .scoringCompleted {
    margin-top: 0.73vw;
    margin-left: 4.97vw;
    width: 34.84vw;
    height: 2.92vw;
}

.scoringCompletedInputLabel {
    padding-left: 11px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.fullScreen .scoringCompletedInputLabel {
    padding-left: 0.8vw;
}

.scoringCompletedInputLabel {
    margin-bottom: 10px;
}

.fullScreen .scoringCompletedInputLabel {
    margin-bottom: 0.73vw;
}

.scoringCompletedInputLabel:last-child {
    margin-bottom: 0;
}

.scoringCompletedInput {
    margin: 0;
    width: 0;
    opacity: 0;
}

.scoringCompletedInput:checked + .scoringCompletedInputSelectInput::before {
    content: "";
    display: block;
    position: absolute;
    top: -30%;
    left: 5%;
    width: 140%;
    height: 140%;
    background: url("../img/check.svg") no-repeat center;
    background-size: contain;
}

.scoringCompletedInputSelectInput {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 12px;
    height: 12px;
    border: solid 2px #848484;
    background: #ffff;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.27) inset;
}

.fullScreen .scoringCompletedInputSelectInput {
    width: 0.87vw;
    height: 0.87vw;
    border: solid 0.14vw #848484;
    box-shadow: 0.07vw 0.07vw 0.14vw rgba(0, 0, 0, 0.27) inset;
}

.videoWrap {
    position: relative;
}

.qVideo {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 2px;
    width: 571px;
    height: 321px;
}

.fullScreen .qVideo {
    margin-top: 0.14vw;
    width: 41.8vw;
    height: 23.49vw;
}

.btnShowScenario {
    position: absolute;
    top: 331px;
    right: 20px;
    width: 212px;
    height: 41px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    background-image: url("../img/btn_show_scenario.svg");
}

.fullScreen .btnShowScenario {
    top: 24.23vw;
    right: 1.46vw;
    width: 15.51vw;
    height: 3vw;
    border-radius: 0.58vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.onRuby .btnShowScenario {
    background-image: url("../img/btn_show_scenario_ruby.svg");
}

.btnShowScenario.active {
    box-shadow: none;
}

.alertResetWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

.alertResetWrap.hide {
    display: none !important;
}

.alertReset {
    position: relative;
    width: 718px;
    height: 345px;
    background-image: url("../img/alert_reset.png");
}

.fullScreen .alertReset {
    width: 52.56vw;
    height: 25.25vw;
}

.onRuby .alertReset {
    background-image: url("../img/alert_reset_ruby.png");
}

.btnAlertOk {
    position: absolute;
    top: 256px;
    left: 152px;
    width: 159px;
    height: 52px;
    background-image: url("../img/btn_alert_ok.png");
}

.fullScreen .btnAlertOk {
    top: 18.74vw;
    left: 11.12vw;
    width: 11.63vw;
    height: 3.8vw;
}

.btnAlertOk.active {
    background-image: url("../img/btn_alert_ok_active.png");
}

.btnAlertCancel {
    position: absolute;
    top: 256px;
    right: 152px;
    width: 159px;
    height: 52px;
    background-image: url("../img/btn_alert_cancel.png");
}

.fullScreen .btnAlertCancel {
    top: 18.74vw;
    right: 11.12vw;
    width: 11.63vw;
    height: 3.8vw;
}

.btnAlertCancel.active {
    background-image: url("../img/btn_alert_cancel_active.png");
}

.bgCbt1 {
    position: absolute;
    width: 1366px;
    height: 768px;
    background-image: url("../img/bg_cbt1.png");
}

.onRuby .bgCbt1 {
    background-image: url("../img/bg_cbt1_ruby.png");
}

.bgCbt2 {
    position: absolute;
    width: 1366px;
    height: 768px;
    background-image: url("../img/bg_cbt2.png");
}

.onRuby .bgCbt2 {
    background-image: url("../img/bg_cbt2_ruby.png");
}

.bgCbt3 {
    position: absolute;
    width: 1366px;
    height: 768px;
    background-image: url("../img/bg_cbt3.png");
}

.onRuby .bgCbt3 {
    background-image: url("../img/bg_cbt3_ruby.png");
}

.fullScreen .bgCbt1,
.fullScreen .bgCbt2,
.fullScreen .bgCbt3 {
    width: 100vw;
    height: 56.22vw;
}

.btnQuestionA {
    position: absolute;
    top: 577px;
    left: 146px;
    width: 500px;
    height: 107px;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    background-image: url("../img/btn_question_a.svg");
}

.fullScreen .btnQuestionA {
    top: 42.24vw;
    left: 10.68vw;
    width: 36.6vw;
    height: 7.83vw;
    border-radius: 0.58vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.onRuby .btnQuestionA {
    background-image: url("../img/btn_question_a_ruby.svg");
}

.btnQuestionB {
    position: absolute;
    top: 577px;
    left: 702px;
    width: 500px;
    height: 107px;
    border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    background-image: url("../img/btn_question_b.svg");
}

.fullScreen .btnQuestionB {
    top: 42.24vw;
    left: 51.39vw;
    width: 36.6vw;
    height: 7.83vw;
    border-radius: 0.58vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
}

.onRuby .btnQuestionB {
    background-image: url("../img/btn_question_b_ruby.svg");
}

.btnQuestionA.active,
.btnQuestionB.active {
    box-shadow: none;
}

.explanationWrap {
    position: absolute;
    width: 1366px;
    height: 768px;
    background-color: #fff;
    z-index: 10;
}

.fullScreen .explanationWrap {
    width: 100vw;
    height: 56.22vw;
}

.btnExplanationBack {
    position: absolute;
    top: 572px;
    left: 140px;
    width: 512.5px;
    height: 119.5px;
    box-sizing: border-box;
    background-image: url("../img/btn_explanation_back.png");
}

.fullScreen .btnExplanationBack {
    top: 41.87vw;
    left: 10.24vw;
    width: 37.51vw;
    height: 8.74vw;
}

.btnExplanationBack.active {
    background-image: url("../img/btn_explanation_back_active.png");
}

.onRuby .btnExplanationBack {
    background-image: url("../img/btn_explanation_back_ruby.png");
}

.onRuby .btnExplanationBack.active {
    background-image: url("../img/btn_explanation_back_ruby_active.png");
}

.btnExplanationAnswer {
    position: absolute;
    top: 572px;
    left: 697px;
    width: 512.5px;
    height: 119.5px;
    box-sizing: border-box;
    background-image: url("../img/btn_explanation_answer.png");
}

.fullScreen .btnExplanationAnswer {
    top: 41.87vw;
    left: 51.02vw;
    width: 37.51vw;
    height: 8.74vw;
}

.btnExplanationAnswer.active {
    background-image: url("../img/btn_explanation_answer_active.png");
}

.onRuby .btnExplanationAnswer {
    background-image: url("../img/btn_explanation_answer_ruby.png");
}

.onRuby .btnExplanationAnswer.active {
    background-image: url("../img/btn_explanation_answer_ruby_active.png");
}

.scorecardNumWarning {
    position: relative;
    width: 40px;
    height: 40px;
    background-image: url("../img/icon_warning_edge.svg");
    float: left;
}

.fullScreen .scorecardNumWarning {
    width: 2.92vw;
    height: 2.92vw;
}