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;
    background-color: #e7a548;
}

.header.fullScreen {
    height: 1.75vw;
}

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

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

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

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

.btnShowAnswer {
    position: absolute;
    top: 50px;
    right: 49px;
    width: 224px;
    height: 53.5px;
    background-image: url("../img/btn_show_answer.png");
    box-sizing: border-box;
}

.fullScreen .btnShowAnswer {
    top: 3.66vw;
    right: 3.58vw;
    width: 16.39vw;
    height: 3.91vw;
}

.btnShowAnswer.active,
.btnShowAnswer.selected {
    background-image: url("../img/btn_show_answer_active.png");
}

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

.onRuby .btnShowAnswer.active,
.onRuby .btnShowAnswer.selected {
    background-image: url("../img/btn_show_answer_ruby_active.png");
}

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

.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");
}

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

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

.arrowLeft {
    position: absolute;
    top: 398px;
    left: 65px;
    width: 37px;
    height: 37px;
    background-image: url("../img/arrow_left.svg");
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    border: solid 1px #e7a548;
    z-index: 10;
    box-sizing: border-box;
}

.fullScreen .arrowLeft {
    top: 29.13vw;
    left: 4.75vw;
    width: 2.7vw;
    height: 2.7vw;
    border-radius: 1.46vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
    background-color: #fff;
    border: solid 0.073vw #e7a548;
}

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

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

.arrowRight {
    position: absolute;
    top: 398px;
    right: 65px;
    width: 37px;
    height: 37px;
    background-image: url("../img/arrow_right.svg");
    border-radius: 20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    border: solid 1px #e7a548;
    background-color: #fff;
    z-index: 10;
    box-sizing: border-box;
}

.fullScreen .arrowRight {
    top: 29.13vw;
    right: 4.75vw;
    width: 2.7vw;
    height: 2.7vw;
    border-radius: 1.46vw;
    box-shadow: 0.07vw 0.07vw 0.36vw rgba(0, 0, 0, 0.25);
    border: solid 0.073vw #e7a548;
}

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

.tabBg {
    position: absolute;
    top: 143px;
    left: 56px;
    width: 1253.5px;
    height: 590.5px;
}

.fullScreen .tabBg {
    top: 10.46vw;
    left: 4.09vw;
    width: 91.76vw;
    height: 43.22vw;
}

.tabBg.tabBg1 {
    background-image: url("../img/tab1.png");
}

.onRuby .tabBg.tabBg1 {
    background-image: url("../img/tab1_ruby.png");
}

.tabBg.tabBg2 {
    background-image: url("../img/tab2.png");
}

.onRuby .tabBg.tabBg2 {
    background-image: url("../img/tab2_ruby.png");
}

.tabBg.only {
    background-image: url("../img/tab1_only.png");
}

.onRuby .tabBg.only {
    background-image: url("../img/tab1_only_ruby.png");
}

.tabBg.tabBgExample {
    background-image: url("../img/tab_example.png");
}

.onRuby .tabBg.tabBgExample {
    background-image: url("../img/tab_example_ruby.png");
}

.tab {
    position: absolute;
    bottom: 0;
    width: 246px;
    height: 44px;
}

.fullScreen .tab {
    width: 18vw;
    height: 3.22vw;
}

.tab1 {
    left: 0;
}

.tab2 {
    left: 246px;
}

.fullScreen .tab2 {
    left: 18vw;
}

.textArea {
    position: absolute;
    resize: none;
    background-color: transparent;
    border: none;
    overflow: hidden;
    border-radius: 0;
    font-size: 19px;
    box-sizing: border-box;
}

.fullScreen .textArea {
    font-size: 1.39vw;
}

/*.showAnswer .textArea,*/
/*.showAnswer .qCheckboxInputLabel {*/
/*    pointer-events: none;*/
/*}*/

.qCheckboxList {
    position: absolute;
    width: 320px;
}

.fullScreen .qCheckboxList {
    width: 23.42vw;
}

.qCheckboxInputLabel {
    margin-left: 40px;
    margin-right: 53px;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

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

.qCheckboxInputLabel {
    margin-bottom: 15px;
}

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

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

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

.qCheckboxInput:checked + .qCheckboxInputSelectInput::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;
}

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

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

.qTextAnswer {
    position: absolute;
    pointer-events: none;
}

/*.atari {*/
/*    position: absolute;*/
/*    width: 1366px;*/
/*    height: 768px;*/
/*    background-size: 1366px 768px;*/
/*    background-image: url("../img/lesson2/atari10.png");*/
/*    z-index: 10000000;*/
/*    opacity: 0.5;*/
/*    pointer-events: none;*/
/*}*/