/* ----- PSトレーニング ----- */

/* ----- :root ----- */

:root {
  --color--black: #3a2f0f;
  --color--white: #ffffff;
  --color--cloud: #cfcfcf;
  --color--gray: #7d7d7d;
  --color--red: #dc171d;
  --color--orange: #ff8900;
  --color--yellow: #f5ad29;
  --color--butter: #ffd976;
  --color--lime: #73b943;
  --color--green: #137843;
  --color--skyblue: #21b8eb;
  --color--navyblue: #044094;
  --color--table1: #fbf6e6;
  --color--table2: #fef0c8;
  --color--verb-bcg: #f6ffe3;
  --color--basic-bcg: #e8f9ff;
  --color--combi-bcg: #fff2f3;
}

/* ----- tag style ----- */

body {
  padding: 0;
  background-color: var(--color--butter);
  color: var(--color--black);
}

div{
  margin: 0;
}

h1 {
  font-size: 1.75vw;
}
h2 {
  font-size: 1.5vw;
}
h3 {
  font-size: 1.25vw;
}
h4, h5 {
  font-size: 1vw;
}

@media (max-width: 750px) {
  h1 {
    font-size: 4vw;
  }
  h2 {
    font-size: 3.5vw;
  }
  h3 {
    font-size: 3vw;
  }
  h4, h5 {
    font-size: 2vw;
  }
}

input[type=text],
input[type=number],
input[type=password] {
  border: 1px solid var(--color--yellow);
  padding: 5px;
  border-radius: 3px;
  font-size: 0.85vw;
}
input[type=submit],
input[type=button] {
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--color--white);
  font-size: 0.85vw;
  font-weight: bold;
  cursor: pointer;
}
input[type=file]::file-selector-button {
  background-color: var(--color--gray);
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--color--navyblue);
  font-size: 0.85vw;
  font-weight: bold;
  cursor: pointer;
  border: 0;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  width: 15vw;
  background: var(--color--cloud);
  height: 0.5vw;
  border-radius: 0.5vw;
}
/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 1.5vw;
  width: 1.5vw;
  background-color: var(--color--orange);
  border-radius: 50%;
}
/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 1.5vw;
  width: 1.5vw;
  background-color: var(--color--orange);
  border-radius: 50%;
}

@media (max-width: 750px) {
  input[type="range"] {
    width: 30vw;
    height: 1vw;
    border-radius: 1vw;
  }
  /* Thumb: Chrome, Safari, Opera, Edge Chromium */
  input[type="range"]::-webkit-slider-thumb {
    height: 3vw;
    width: 3vw;
  }
  /* Thumb: Firefox */
  input[type="range"]::-moz-range-thumb {
    height: 3vw;
    width: 3vw;
  }
}

select,
textarea {
  border: 1px solid var(--color--yellow);
  padding: 5px;
  border-radius: 3px;
  font-size: 0.85vw;
}

img {
  width: 100%;
  height: auto;
}

/* ----- login ----- */

.login {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 35vw;
  min-width: 300px;
  max-width: 600px;
  padding: 2.5vw 5vw 1vw;
  border-radius: 2.5vw;
  background-color: var(--color--white);
  box-sizing: border-box;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.login label {
  display: block;
  font-weight: bold;
  margin-top: 15px;
  font-size: 1vw;
}
.login input {
  display: block;
  width: 100%;
  border: 1px solid #d3e2fc;
  border-radius: 5px;
  padding: 1vw;
  font-size: 1vw;
}
.login select {
  display: block;
  width: 100%;
  background-color: #e8f0fe;
  border: 1px solid #d3e2fc;
  border-radius: 5px;
  padding: 1vw;
  font-size: 1vw;
  cursor: pointer;
}
.login button {
  display: block;
  width: 15vw;
  min-width: 200px;
  margin: 0 auto 25px;
  padding: 10px 0;
  font-size: 1vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.login button span {
  font-size: 0.85vw;
  opacity: 0.75;
}

@media (max-width: 750px) {
  .login {
    top: 35%;
    padding: 5.5vw 5vw 1vw;
  }
  .login label {
    
    border-radius: 2.5px;
    font-size: 2.5vw;
  }
  .login input {
    padding: 2vw;
    border-radius: 2.5px;
    font-size: 2.5vw;
  }
  .login select {
    padding: 2vw;
    border-radius: 2.5px;
    font-size: 2.5vw;
  }
  .login button {
    padding: 10px 0;
    font-size: 2.5vw;
  }
  .login button span {
    font-size: 2vw;
  }
}

/* ----- character ----- */

.character {
  position: fixed;
  width: 25vw;
  top: 12.5vw;
  right: 5vw;
  margin: 0;
  font-size: 0;
  -webkit-transition: all 0.25s ease 0s;
  -moz-transition: all 0.25s ease 0s;
  transition: all 0.25s ease 0s;
}
.character.hop {
  top: 12vw;
  transform: scale(1.02);
}
.character.demo {
  display: none
}
.character .dialogue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 2.5vw;
  text-align: center;
}
.character .dialogue h3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 11vw;
  margin: 0;
  align-items: center;
}
#time-limit {
  font-size: 1.5vw;
  font-weight: bold;
}
#result-judge {
  font-size: 2vw;
  font-weight: bold;
  color: var(--color--orange);
}
#result-coment {
  font-weight: bold;
}

.peter_pc {
  display: block;
}
.peter_sp {
  display: none;
}
.stacy_pc {
  display: block;
}
.stacy_sp {
  display: none;
}

@media (max-width: 750px) {
  .character {
    width: 85vw;
    top: 115vw;
    right: 7.5vw;
  }
  .character.hop {
    top: 114vw;
  }
  .character .dialogue {
    padding: 12.5vw 5vw;
    width: 70%;
  }
  .character .dialogue h3 {
    height: 25vw;
  }
  #time-limit {
    font-size: 2.5vw;
  }
  .peter_pc {
    display: none;
  }
  .peter_sp {
    display: block;
  }
  .stacy_pc {
    display: none;
  }
  .stacy_sp {
    display: block;
  }
}

/* ----- title ----- */

.title {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  place-items: center;
  width: calc(100% - 5vw * 2);
  padding: 2vw 2.5vw 0.5vw;
  margin: 0 5vw 1.5vw;
  border-radius: 0 0 20px 20px;
  background-color: var(--color--white);
  box-sizing: border-box;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.title .logo_ps {
  justify-self: start;
  width: 20vw;
}
.title h2 {
  justify-self: center;
  font-size: 2vw;
  text-align: center;
  color: var(--color--black);
}
.title h2 span {
  display: block;
  font-size: 1.5vw;
  text-align: center;
  color: var(--color--orange);
}

.title .logo_se {
  justify-self: end;
  width: 10vw;
}

@media (max-width: 750px) {
  .title {
    grid-template-columns: none;
    background-size: 100% 7.5% !important;
    margin: 0 5.5vw 5vw;
    border-radius: 0 0 10px 10px;
  }
  .title .logo_ps {
    width: 25vw;
    margin-top: 2.5vw;
  }
  .title h2 {
    font-size: 4vw;
    margin: 0;
  }
  .title h2 span {
    font-size: 3vw;
  }
  .title .logo_se {
    width: 15vw;
  }
}

/* ----- Management Dashboard ----- */

.management {
  width: calc(100% - 5vw * 2);
  padding: 1vw 2.5vw 2.5vw 2.5vw;
  margin: 0 5vw 0;
  border-radius: 20px;
  background-color: var(--color--white);
  box-sizing: border-box;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.management button {
  display: block;
  width: 15vw;
  margin: 25px auto;
  padding: 10px 0;
  font-size: 0.85vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.management p {
  font-size: 1vw;
}

@media (max-width: 750px) {
  .management {
    padding: 1vw 2.5vw 5vw 2.5vw;
    margin: 5vw 5.5vw 0;
    border-radius: 10px;
  }
  .management button {
    width: 25vw;
    padding: 10px 0;
    font-size: 2.5vw;
  }
  .management p {
    font-size: 2vw;
    text-align: left;
  }
}

.dashboard-menu {
  display: flex;
  width: 100%;
  margin: 15px 0;
  padding: 0;
  background-color: var(--color--yellow);
  border-radius: 15px;
}
.dashboard-menu li {
  list-style-type: none;
  padding: 10px 15px;
  font-size: 1vw;
  font-weight: bold;
  color: var(--color--white);
}
.dashboard-menu a:hover {
  transition-duration: 0.5s;
  background-color: var(--color--butter);
}

@media (max-width: 750px) {
  .dashboard-menu {
    border-radius: 5px;
    overflow-x: auto;
  }
  .dashboard-menu li {
    padding: 5px 5px;
    font-size: 2vw;
  }
}

.dashboard-search {
  font-size: 1vw;
}

@media (max-width: 750px) {
  .dashboard-search {
    font-size: 2vw;
  }
  input[type=text],
  select {
    padding: 5px;
    font-size: 2vw;
  }
  input[type=submit],
  input[type=button] {
    padding: 5px 10px;
    font-size: 2vw;
  }
}

.dashboard-entrance {
  display: grid;
  gap: 2.5vw;
  grid-auto-flow: column;
  place-items: center;
  margin: 0 10vw;
  text-align: center;
}
.dashboard-entrance a:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.dashboard-entrance img {
  max-width: 20vw;
  border-radius: 20px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.dashboard-entrance span {
  display: block;
  margin-top: 1vw;
  font-size: 0.85vw;
}

@media (max-width: 750px) {
  .dashboard-entrance img {
    max-width: 30vw;
    border-radius: 10px;
  }
  .dashboard-entrance span {
    font-size: 1.5vw;
  }
}

.dashboard-table-container {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}
.dashboard-table-container div {
  margin: 0;
}
.dashboard-table-container div:nth-child(2) {
  overflow: auto;
}

.dashboard-table {
  width: 100%;
  margin: 15px 0;
}
.dashboard-table tr {
  background-color: var(--color--table1);
}
.dashboard-table tr:nth-child(odd) {
  background-color: var(--color--table2);
}
.dashboard-table th {
  height: 50px;
  white-space: nowrap;
  overflow: hidden;
  padding: 5px;
  border-radius: 3px;
  /* font-size: 0.85vw; */
  font-size: 1vw;
  font-weight: bold;
  word-wrap: break-word;
}
.dashboard-table th span {
  padding: 2px 4px;
  background-color: var(--color--yellow);
  border-radius: 1px;
  font-size: 0.5vw;
  text-align: center;
}
.dashboard-table th span:hover {
  transition-duration: 0.5s;
  background-color: var(--color--butter);
}
.dashboard-table td {
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  padding: 2.5px 10px;
  border-radius: 3px;
  /* font-size: 0.75vw; */
  font-size: 1vw;
  word-wrap: break-word;
}
.dashboard-table td.remarks {
  width: 250px;
  overflow: hidden;
}
.dashboard-table .bgc-none {
  background-color: var(--color--white);
}

@media (max-width: 750px) {
  .dashboard-table th {
    height: 30px;
    padding: 0 5px;
    border-radius: 1px;
    font-size: 1.75vw;
  }
  .dashboard-table td {
    height: 30px;
    padding: 0 5px;
    border-radius: 1px;
    font-size: 1.75vw;
    text-wrap: wrap;
  }
  .dashboard-table input[type=button] {
    padding: 5px 10px;
    font-size: 2vw;
  }
  .dashboard-table th span {
    padding: 2px 3px;
    font-size: 1vw;
  }
}

.dashboard-div {
  width: 100%;
  height: 250px;
  padding: 20px;
  background-color: var(--color--table2);
  border-radius: 3px;
  overflow: scroll;
}
.dashboard-div p {
  margin: 0;
  font-size: 0.85vw;
}
.dashboard-div .result-log {
  margin: 0;
  display: grid;
  grid-template-columns: 12.5% 87.5%;
  gap: 1vw;
}
.dashboard-div .result-log .optional-log {
  display: none;
}
.dashboard-div .result-log .optional-log.disp {
  display: inline;
}
#optional-btn {
  vertical-align: middle;
}

@media (max-width: 750px) {
  .dashboard-div {
    height: 150px;
    padding: 10px;
  }
  .dashboard-div p {
    font-size: 1.5vw;
  }
  .dashboard-div .result-log {
    grid-template-columns: 25% 75%;
    gap: 0.5vw;
  }
}

.pagination {
  margin: 0 0 15px;
  padding: 0;
}
.pagination li {
  display: inline-block;
  list-style-type: none;
  padding: 5px 12.5px;
  background-color: var(--color--table1);
  border-radius: 5px;
  font-size: 0.75vw;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}
.pagination li.active {
  background-color: var(--color--table2);
}

@media (max-width: 750px) {
  .pagination li {
    font-size: 2vw;
  }
}

#output_result {
  font-size: 1vw;
  font-weight: bold;
  color: var(--color--orange);
}

/* ----- Training Dashboard ----- */

.training {
  width: calc(100% - 5vw * 2);
  margin: 2vw 5vw 0;
}
.training-course {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5vw;
  width: 70%;
  margin: 0 0 2vw;
  cursor: pointer;
}
.training-course div {
  margin: 0;
  border-radius: 20px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-course div:nth-child(1) {
  background-color: var(--color--verb-bcg);
}
.training-course div:nth-child(2) {
  background-color: var(--color--basic-bcg);
}
.training-course div:nth-child(3) {
  background-color: var(--color--combi-bcg);
}
.training-course img {
  margin: 0;
}

@media (max-width: 750px) {
  .training-course {
    width: 100%;
  }
  .training-course div {
    border-radius: 7.5px;
  }
  .training-course img {
    border-radius: 10px;
  }
}

.training-results {
  position: relative;
  width: 70%;
  padding: 5px 25px 25px;
  margin: 0 0 2vw;
  background-color: var(--color--white);
  border-radius: 20px;
  font-size: 1.25vw;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-results.demo{
  width: 100%;
}
.training-results h2 {
  font-size: 1.5vw;
}
.training-results h2 span {
  font-size: 1.15vw;
}
.training-results th, 
.training-results td {
  padding: 0 2vw 0 0;
  text-align: left;
  font-weight: bold;
}
.training-results th {
  text-align: left;
}
.training-results th.th_verb {
  text-align: left;
  color: var(--color--lime);
}
.training-results th.th_basic {
  text-align: left;
  color: var(--color--skyblue);
}
.training-results th.th_combi {
  text-align: left;
  color: var(--color--red);
}

@media (max-width: 750px) {
  .training-results {
    width: 100%;
    padding: 5px 15px 15px;
    margin: 0;
    border-radius: 7.5px;
    font-size: 2.5vw;
  }
  .training-results h2 {
    font-size: 2.75vw;
  }
  .training-results h2 span {
    font-size: 1.75vw;
  }
}

.training-button {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-items: center;
  width: 70%;
  margin: 1.5vw 0;
}
.training-button.demo {
  width: 100%;
}
.training-button div:first-child {
  display: flex;
  justify-self: start;
  align-items: center;
  text-align: left;
}
.training-button div:last-child {
  display: flex;
  justify-self: end;
  align-items: center;
  text-align: right;
}
.training-button button {
  display: block;
  min-width: 10vw;
  padding: 10px 15px;
  margin: 0;
  font-size: 1vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.training-button button span {
  font-size: 0.85vw;
  margin: 0;
  opacity: 0.75;
}
.training-button span {
  font-size: 0.75vw;
  font-weight: bold;
  margin: 0 1vw;
}
#speaking-button.invalid {
  display: none;
}
#return-button.invalid {
  display: none;
}
#next-button.invalid {
  display: none;
}
#save-button.invalid {
  display: none;
}
#answer-button.invalid {
  display: none;
}

@media (max-width: 750px) {
  .training-button {
    width: 100%;
    margin: 5vw 0;
  }
  .training-button button {
    width: 30vw;
    padding: 1vw 0;
    font-size: 2.5vw;
  }
  .training-button button span {
    font-size: 2vw;
  }
}

.training-level {
  position: absolute;
  width: 10vw;
  margin: 15px 15px 0 0;
  top: 0;
  right: 0;
}
.training-level div {
  margin: 0;
}
.training-level h2 {
  margin: 0;
  font-size: 1vw;
  text-align: center;
}

@media (max-width: 750px) {
  .training-level {
    width: 17.5vw;
    margin: 15px 15px 0 0;
  }
  .training-level h2 {
    font-size: 1.5vw;
  }
}

.training-exercise--verb {
  position: relative;
  width: 70%;
  height: 15vw;
  padding: 1vw 0 2vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--verb-bcg);
  border-radius: 20px;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-exercise--verb.demo {
  width: 100%;
}
.training-exercise--verb h2 {
  margin: 5px 0;
  font-size: 2vw;
}
.training-exercise--verb h3 {
  margin: 5px 0;
  font-size: 1.5vw;
  color: var(--color--lime);
}
.training-exercise--verb hr {
  border: 2px solid var(--color--lime);
}
.time-limit--verb {
  color: var(--color--lime);
}
.small-text {
  font-size: 0.85vw;
}
#speak-now {
  width: 11vw;
  height: auto;
  vertical-align: text-top;
}
#speak-now.invalid {
  opacity: 0;
}

@media (max-width: 750px) {
  .training-exercise--verb {
    width: 100%;
    height: 27.5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
    font-size: 2vw;
  }
  .training-exercise--verb h2 {
    font-size: 3.5vw;
  }
  .training-exercise--verb h3 {
    font-size: 2.5vw;
  }
  .training-exercise--verb hr {
    border: 1.5px solid var(--color--lime);
  }
  .small-text {
    font-size: 1.5vw;
  }
}

.training-exercise--basic {
  position: relative;
  width: 70%;
  height: 15vw;
  padding: 1vw 0 2vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--basic-bcg);
  border-radius: 20px;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-exercise--basic.demo {
  width: 100%;
}
.training-exercise--basic h2 {
  margin: 5px 0;
  font-size: 2vw;
}
.training-exercise--basic h3 {
  margin: 5px 0;
  font-size: 1.5vw;
  color: var(--color--skyblue);
}
.training-exercise--basic hr {
  border: 2px solid var(--color--skyblue);
}
.time-limit--basic {
  color: var(--color--skyblue);
}

@media (max-width: 750px) {
  .training-exercise--basic {
    width: 100%;
    height: 27.5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
    font-size: 2vw;
  }
  .training-exercise--basic h2 {
    font-size: 3.5vw;
  }
  .training-exercise--basic h3 {
    font-size: 2.5vw;
  }
  .training-exercise--basic hr {
    border: 1.5px solid var(--color--skyblue);
  }
}

.training-exercise--combi {
  position: relative;
  width: 70%;
  height: 15vw;
  padding: 1vw 0 2vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--combi-bcg);
  border-radius: 20px;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-exercise--combi.demo {
  width: 100%;
}
.training-exercise--combi h2 {
  margin: 5px 0;
  font-size: 2vw;
}
.training-exercise--combi h3 {
  margin: 5px 0;
  font-size: 1.5vw;
  color: var(--color--red);
}
.training-exercise--combi hr {
  border: 2px solid var(--color--red);
}
.time-limit--combi {
  color: var(--color--red);
}

@media (max-width: 750px) {
  .training-exercise--combi {
    width: 100%;
    height: 27.5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
    font-size: 2vw;
  }
  .training-exercise--combi h2 {
    font-size: 3.5vw;
  }
  .training-exercise--combi h3 {
    font-size: 2.5vw;
  }
  .training-exercise--combi hr {
    border: 1.5px solid var(--color--red);
  }
}

.training-example {
  position: relative;
  width: 70%;
  height: 12.5vw;
  padding: 1vw 0 2vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--white);
  border-radius: 20px;
  font-size: 1.25vw;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.training-example.demo {
  width: 100%;
}
.training-example h2 {
  height: 5vw;
  margin: 5px 0;
  font-size: 2vw;
}
.training-example h3 {
  margin: 5px 0;
  font-size: 1.5vw;
  color: var(--color--orange);
}

@media (max-width: 750px) {
  .training-example {
    width: 100%;
    height: 27.5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
  }
  .training-example h2 {
    font-size: 3.5vw;
  }
  .training-example h3 {
    font-size: 2.5vw;
  }
}

.voice-control {
  display: none;
}
.voice-control.active {
  display: flex;
  justify-self: start;
  align-items: center;
}
.voice-control label {
  font-size: 1vw;
  font-weight: bold;
  margin-right: 0.5vw;
}
#playbtn {
  width: 2vw;
  height: auto;
  cursor: pointer;
  margin-right: 1vw;
}

@media (max-width: 750px) {
  .voice-control.active {
    margin-top: 7.5vw;
  }
  .voice-control label {
    font-size: 2vw;
  }
  #playbtn {
    width: 4vw;
    margin-right: 2vw;
  }
}

.training-juncture {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5vw;
  width: 70%;
}

.training-entrance {
  position: relative;
  width: 100%;
  padding: 1vw 0 5vw;
  margin: 0 0 2.5vw;
  border-radius: 20px;
  font-size: 1.25vw;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.training-entrance img {
  width: 25vw;
  margin: 25px 0 0;
}
.training-entrance select {
  width: 80%;
  font-size: 1.5vw;
}
.training-entrance button {
  display: block;
  min-width: 10vw;
  padding: 10px 15px;
  margin: 25px auto 0;
  font-size: 1vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.training-entrance button span {
  font-size: 0.85vw;
  opacity: 0.75;
}

.training-entrance--verb {
  background-color: var(--color--verb-bcg);
}
.training-entrance--verb select {
  border: 1px solid var(--color--lime);
}
.training-entrance--basic {
  background-color: var(--color--basic-bcg);
}
.training-entrance--basic select {
  border: 1px solid var(--color--skyblue);
}
.training-entrance--combi {
  background-color: var(--color--combi-bcg);
}
.training-entrance--combi select {
  border: 1px solid var(--color--red);
}

.training-range {
  display: block;
  width: 100%;
  margin: 1.5vw 0;
}

@media (max-width: 750px) {
  .training-juncture {
    width: 100%;
  }
  .training-entrance {
    width: 100%;
    margin: 0;
    border-radius: 10px;
  }
  .training-entrance img {
    width: 100%;
    margin: 15px 0 0;
  }
  .training-entrance h2 {
    font-size: 3.5vw;
  }
  .training-entrance h3 {
    font-size: 2.5vw;
  }
  .training-entrance select {
    font-size: 2.5vw;
  }

  .training-entrance button {
    width: 20vw;
    margin: 10px auto;
    padding: 1vw 0;
    font-size: 2.5vw;
  }
  .training-entrance button span {
    font-size: 2vw;
  }
}

/* ----- Setting ----- */

.setting {
  position: relative;
  width: 100%;
  height: 55vh;
  padding: 1.5vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--white);
  border-radius: 20px;
  font-size: 1.25vw;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.setting div {
  margin: 0.5vw 0;
  font-size: 1vw;
}
.setting h2 {
  margin: 0.5vw 0 1.5vw;
  font-size: 2vw;
}
.setting h3 {
  margin: 0.5vw 0 1.5vw;
  font-size: 1.5vw;
}
.setting select {
  font-size: 1vw;
}
.setting button {
  display: block;
  min-width: 5vw;
  padding: 10px 15px;
  margin: 2vw 0 0;
  font-size: 1vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.setting button span {
  font-size: 0.85vw;
  opacity: 0.75;
}

@media (max-width: 750px) {
  .setting {
    width: 100%;
    height: 55vh;
    padding: 2.5vw 5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
  }
  .setting div {
    margin: 1vw 0;
    font-size: 2vw;
  }
  .setting h2 {
    margin: 2.5vw 0;
    font-size: 3.5vw;
  }
  .setting h3 {
    margin: 2.5vw 0;
    font-size: 2.5vw;
  }
  .setting select {
    font-size: 2vw;
  }
  .setting button {
    min-width: 10vw;
    padding: 1vw 0;
    font-size: 2.5vw;
  }
  .setting button span {
    font-size: 2vw;
  }
}

.setting-button {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-items: center;
  width: 100%;
  margin: 1.5vw 0;
}
.setting-button div:first-child {
  display: flex;
  justify-self: start;
  align-items: center;
  text-align: left;
}
.setting-button div:last-child {
  display: flex;
  justify-self: end;
  align-items: center;
  text-align: right;
}
.setting-button button {
  display: block;
  min-width: 10vw;
  padding: 10px 15px;
  margin: 0;
  font-size: 1vw;
  color: var(--color--white);
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
.setting-button button span{
  font-size: 0.85vw;
  opacity: 0.75;
}

@media (max-width: 750px) {
  .setting-button {
    width: 100%;
    margin: 5vw 0;
  }
  .setting-button button {
    width: 20vw;
    padding: 1vw 0;
    font-size: 2.5vw;
  }
  .setting-button button span {
    font-size: 2vw;
  }
}

/* ----- result ----- */

.result {
  position: relative;
  width: 100%;
  height: 55vh;
  padding: 1.5vw 2.5vw;
  margin: 0 0 2.5vw;
  background-color: var(--color--white);
  border-radius: 20px;
  font-size: 1.25vw;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
.result h2 {
  margin: 0.5vw 0 1.5vw;
  font-size: 2vw;
}
.result h3 {
  margin: 0.5vw 0 1.5vw;
  font-size: 1.5vw;
}
.result div {
  height: 40vh;
  margin: 0.5vw 0;
  background-color: var(--color--table2);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 1vw;
  overflow-y: scroll;
}
.result-log {
  margin: 0;
  display: grid;
  grid-template-columns: 15% 85%;
  gap: 1vw;
}

@media (max-width: 750px) {
  .result {
    width: 100%;
    height: 55vh;
    padding: 2.5vw 5vw;
    margin: 0 0 5vw;
    border-radius: 10px;
  }
  .result h2 {
    margin: 2.5vw 0;
    font-size: 3.5vw;
  }
  .result h3 {
    margin: 2.5vw 0;
    font-size: 2.5vw;
  }
  .result div {
    margin: 1vw 0;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.5vw;
  }
  .result-log {
    grid-template-columns: 30% 70%;
    gap: 0.5vw;
  }
}

/* ----- footer ----- */

.footer {
  width: calc(100% - 5vw * 2);
  margin: 1vw 5vw;
  font-size: 0.85vw;
}

@media (max-width: 750px) {
  .footer {
    position: fixed;
    width: 100%;
    margin: 0;
    left: 0;
    bottom: 2.5vw;
    font-size: 1.85vw;
    text-align: center;
  }
}

.footer--management {
  width: calc(100% - 5vw * 2);
  margin: 1vw 5vw;
  font-size: 0.85vw;
}

@media (max-width: 750px) {
  .footer--management {
    width: 100%;
    margin: 15px 0;
    left: 0;
    bottom: 2.5vw;
    font-size: 1.85vw;
    text-align: center;
  }
}

/* ----- copyright ----- */

.copyright {
  position: absolute;
  left: 1vw;
  bottom: 1vw;
  font-size: 0.85vw;
}

@media (max-width: 750px) {
  .copyright {
    width: 100%;
    left: 0;
    bottom: 2.5vw;
    font-size: 1.85vw;
    text-align: center;
  }
}

/* ----- button ----- */

.button--red {
  background-color: var(--color--red);
}
.button--red:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--orange {
  background-color: var(--color--orange);
}
.button--orange:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--yellow {
  background-color: var(--color--yellow);
}
.button--yellow:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--lime {
  background-color: var(--color--lime);
}
.button--lime:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--green {
  background-color: var(--color--green);
}
.button--green:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--skyblue {
  background-color: var(--color--skyblue);
}
.button--skyblue:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}
.button--navyblue {
  background-color: var(--color--navyblue);
}
.button--navyblue:hover {
  transition-duration: 0.5s;
  filter: contrast(125%);
}

/* ----- errors (401〜503) ----- */

.errors {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  width: calc(100% - 5vw * 2);
  height: 60vh;
  padding: 2.5vw;
  margin: 0 5vw 2.5vw;
  background-color: var(--color--white);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--color--black);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.errors h2 {
  font-size: 2.5rem;
  margin: 0;
  color: var(--color--orange);
}
.errors hr {
  width: 75vw;
  border: 1px solid var(--color--orange);
  margin-bottom: 25px;
}

/* ----- error ----- */

.error {
  color: var(--color--red);
  font-size: 0.85vw;
  font-weight: bold;
}

@media (max-width: 750px) {
  .error {
    font-size: 2vw;
  }
}