@charset "utf-8";

/* 
Base style
*/  
body {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    background: #993400;
    height: 100vh;
}
a {
    text-decoration: none;
    color: #333;
}
button {
    cursor: pointer;
    color: #333;
}

/* 
start-scene 
*/
.title-container {
    background-color: #fff;
    border-radius: 2vh;
    border: solid 0.7vh #E17A02;
    height: 30vh;
    width: 34vh;
    margin: 5% auto auto auto;
}
.title-container > img {
    display: block;
    height: 26vh;
    width: auto;
    margin: 1.2vh auto auto auto;
}
.start-summary-container {
    height: 53vh;
    background-color: #fff;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
    margin: 5% auto auto auto;
}
.start-summary-container > img {
    display: block;
    height: 47vh;
    background-color: #fff;
    margin: 1.5vh auto auto auto;
    border-radius: 1vh;
}
.button-container {
    display: block;
    height: 8vh;
    width: 35vh;
    margin: 5% auto auto auto;
    background-color: #fff;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
}
.button-container > img {
    display: block;
    height: 4.5vh;
    border-radius: 2vh;
    margin: 1vh auto;
    cursor: pointer;
}
.clear-summary-container {
    height: 53vh;
    background-color: #fff;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
    margin: 5% auto auto auto;
}
.clear-summary-container > img {
    display: block;
    height: 47vh;
    background-color: #fff;
    margin: 1.5vh auto auto auto;
}
.failure-summary-container {
    height: 53vh;
    background-color: #fff;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
    margin: 5% auto auto auto;
}
.failure-summary-container > img{
    display: block;
    height: 40vh;
    margin: 5vh auto auto auto;
}


/*
main-section
*/
.main-section {
    margin: auto;
    height: 100vh;
    width: auto;
    aspect-ratio: 9 / 19.5;
}
#battle-scene {
    display: none;
    height: 100%;
    width: 100%;
}
.question-container {
    background-color: #fff;
    height: 30%;
    margin: 5% auto auto auto;
    padding: 3%;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
}
.question-container {
    font-size: 3vh;
}
.question-container > h2 {
    margin: 0;
    font-family: "Mochiy Pop One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#quiz-count {
    font-size: 6vh;
}
#js-question {
    font-size: 3.8vh;
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-weight: 600;
}
.battle-container {
    height: 44%;
    margin: 5% auto auto auto;
}
.background-image {
    width: 100%;
    height: auto;
    display: block;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
}
.enemy-container {
    margin-top: -23vh;
    height: 60%;
}
.enemy-image {
    width: 35%;
    height: auto;
    display: block;
    text-align: right;
    margin-left: 55%;
}
.enemy-hp-image {
    width: 40%;
    height: auto;
    display: block;
    margin-left: 55%;
}
.hero-container {
    height: 60%;
    margin-top: -15%;
    display: flex;
}
.hero-images {
    width: 80%;
}
.hero-image {
    width: 70%;
    height: auto;
    display: block;
    margin-left: -2%;
}
.hero-hp-image {
    height: 6vh;
    width: auto;
    display: block;
    margin-top: 0%;
    margin-left: 3%;
}
.hero-container > .move {
    margin-top: 15%;
    width: 40%;
    margin-left: 3%;
}
.move > div {
    font-size: 2vh;
    border: solid 0.2vh #333;
    display: block;
    text-align: center;
    margin-top: 5%;
    width: 70%;
}
#heal {
    height: 20%;
    margin-bottom: 5%;
    width: auto;
    display: block;
    cursor: pointer;
}
#attack {
    height: 20%;
    margin-bottom: 5%;
    width: auto;
    display: block;
    cursor: pointer;
}
#gard {
    height: 20%;
    margin-bottom: 5%;
    width: auto;
    display: block;
    cursor: pointer;
}
.answers-container {
    margin: 5% auto auto auto;
    height: 20%;
}
.answers-contents {
    display: flex;
}
.answers-contents-options {
    background-color: #fff;
    height: auto;
    width: 50%;
    aspect-ratio: 3.2 / 1;
    font-size: 2.4vh;
    text-align: center;
    line-height: 2.8vh;
    border: none;
    border: solid 0.5vh #E17A02;
    border-radius: 1vh;
    font-family: "Mochiy Pop One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.answers-contents > button {
    color: #333;
}
.answers-contents-left-top {
    margin-bottom: 2.5%;
    margin-right: 2.5%;
}
.answers-contents-right-top {
    margin-bottom: 2.5%;
    margin-left: 2.5%;
}
.answers-contents-left-bottom {
    margin-top: 2.5%;
    margin-right: 2.5%;
}
.answers-contents-right-bottom {
    margin-top: 2.5%;
    margin-left: 2.5%;
}
.modal {
    display: none;
    background-color: #fff;
    height: 44%;
    padding: 3%;
    margin: 5% auto auto auto;
    border: solid 0.7vh #E17A02;
    border-radius: 2vh;
}
.correct-image {
    margin: auto;
    width: 37%;
    height: auto;
    display: block;
}
.wrong-image {
    margin: auto;
    width: 40%;
    height: auto;
    display: block;
}
.explanation {
    margin-top: 3%;
    font-size: 1.9vh;
    height: 30%;
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-weight: 600;
}
.next-quiz {
    width: 50%;
    text-align: center;
    display: block;
    margin-top: 10%;
    margin-left: 57%;
    font-size: 3vh;
    cursor: pointer;
    font-family: "M PLUS 1 Code", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-weight: 600;
}
#clear {
    display: none;
}
.clear-summary-container > img{
    display: block;
    height: 48vh;
    background-color: #fff;
    margin: 1.5vh auto auto auto;
    border-radius: 1vh;
}
.select-hero {
    margin: 20% auto 15% auto;
    height: auto;
    width: 60%;
    display: block;
}
.select-item {
    display: flex;
}
.rest {
    display: block;
    height: auto; 
    width: 40%;
    margin: auto;
}
.dance {
    display: block;
    height: auto;
    width: 40%;
    margin: auto;
}
.you-win {
    margin: 20% auto 5% auto;
    height: auto;
    width: 70%;
    display: block;
}   
.style {
    height: 4.3vh;
    width: auto;
    display: block;
    margin: 10% auto 5% auto;
}
.retry {
    display: block;
    width: 45%;
    margin: auto;
}
.unit-select {
    width: 70%;
    margin: auto;
    display: block;
}
.course-select {
    width: 70%;
    margin: auto;
    display: block;
}
.next-unit {
    width: 55%;
    margin: auto;
    display: block;
}
.you-lose {
    margin: 40% auto 15% auto;
    height: auto;
    width: 70%;
    display: block;
}

/* 
ジャンプ
*/
#hero-image-box{
    position: relative;
    margin-top: -3vh;
}
.wrong-action {
    position: absolute;
    display: none;
    width: 80%;
    height: auto;
    margin-top: -100%;
    z-index: 2;
}
#hero-image{
    position: absolute;
    display: block;
    bottom: 0;
    z-index: 1;
}
#enemy-image-box{
    position: relative;
}
.correct-action {
    position: absolute;
    display: none;
    width: 21%;
    height: auto;
    margin-top: -72%;
    margin-left: 64%;
    z-index: 2;
}
#enemy-image{
    position: absolute;
    display: block;
    bottom: 0vh;
    margin-bottom: -1vh;
}