@charset "UTF-8";
/*============================================================================*\
    Page - Form
\*============================================================================*/

/*------------------------------------*\
    Controls
\*------------------------------------*/
::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.38);
}
::-moz-placeholder {
  opacity: 1;
  color: rgba(0, 0, 0, 0.38);
}
:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.38);
}
:placeholder-shown {
  color: rgba(0, 0, 0, 0.38);
}
.form-input,
.form-textarea,
.form-select,
.form-select option {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0 0.8rem;
  border: 0.2rem solid #bcc4cf;
  border-radius: 0.4rem;
  background-color: #fff;
  color: inherit;
  line-height: inherit;
  vertical-align: middle;
  transition: all 0.2s;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.form-input,
.form-select:not([multiple]) {
  height: 3em;
}
.form-input::-ms-clear,
.form-input::-ms-reveal {
  /* IE10以上用 */
  height: 2rem;
  margin-right: -0.6rem;
  color: rgba(0, 0, 0, 0.5);
}
.form-input::-webkit-search-cancel-button {
  margin-right: -0.6rem;
}
.form-textarea {
  min-height: 10rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.form-select[multiple] {
  padding-right: 0;
  padding-left: 0;
}
.form-select[multiple] optgroup,
.form-select[multiple] option {
  padding: 0.2rem 0.8rem;
}
.form-select:not([multiple]) {
  padding-right: 2.5rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgOSAxNCI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNLjUgNWw0LTQgNCA0TTguNSA5LjAxbC00IDQtNC00IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTpyZ2JhKDAsMCwwLC42KTtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6LjkzcHgiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-size: 0.9rem 1.4rem;
  background-position: right 0.8rem center;
}
.form-select::-ms-expand {
  display: none;
} /* IE10以上用 */

/* Size */
.form-input.form-size-s,
.form-select:not([multiple]).form-size-s {
  height: 1.5em;
}
.form-input.form-size-l,
.form-select:not([multiple]).form-size-l {
  height: 4em;
}

/* Checkbox Radio */
.form-checkbox,
.form-radio {
  display: block;
  position: relative;
  z-index: 0;
}
.form-checkbox input,
.form-radio input {
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  opacity: 0;
}
.form-checkbox .form__icon,
.form-radio .form__icon {
  display: inline-block;
  position: relative;
  width: 1.125em;
  height: 1.125em;
  margin-right: 0.4em;
  border: 0.2rem solid #bcc4cf;
  background-color: #fff;
  color: transparent;
  vertical-align: -0.22em;
  transition: all 0.2s;
}
.form-checkbox input:not([disabled]) + .form__icon,
.form-radio input:not([disabled]) + .form__icon {
  cursor: pointer;
}
.form-checkbox .form__icon {
  border-radius: 0.4rem;
}
.form-radio .form__icon {
  border-radius: 50%;
}
.form-checkbox .form__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0.25em;
  transform: rotate(48deg);
  width: 0.4em;
  height: 0.75em;
  border-style: solid;
  border-width: 0 0.2rem 0.2rem 0;
  border-color: currentColor;
}
.form-radio .form__icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  background-color: currentColor;
}
.form-checkbox input:checked + .form__icon,
.form-radio input:checked + .form__icon {
  border-color: transparent;
  background-color: #5185c5;
  color: #fff;
}
.form-checkbox input:checked:focus + .form__icon,
.form-radio input:checked:focus + .form__icon,
.form-checkbox input.is-focus:checked + .form__icon,
.form-radio input.is-focus:checked + .form__icon {
  border-color: transparent;
  background-color: #3d6494;
  box-shadow: 0 0 0 0.4rem rgba(61, 100, 148, 0.3);
}

/* Math */
.form-control-math {
  width: 3em;
  height: 1.75em;
  margin: 0.4rem;
  border-color: #5185c5;
  font-family:
    "UDDigiKyokasho R",
    "UD Digi Kyokasho NP-R",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    Roboto,
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif !important; /* MathJax用 */
  vertical-align: baseline;
  -moz-appearance: textfield;
}
.form-control-math::-webkit-outer-spin-button,
.form-control-math::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.form-control-math--answer {
  display: inline-flex;
  align-items: center;
  width: auto;
  border-color: #bcc4cf;
}
.form-control-math--correct {
  border-color: transparent;
  background-color: transparent;
  color: #e4007f;
}

/* State */
.form-input:disabled,
.form-textarea:disabled,
.form-checkbox input:disabled + .form__icon,
.form-radio input:disabled + .form__icon {
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.form-checkbox input:focus + .form__icon,
.form-radio input:focus + .form__icon,
.form-input.is-focus,
.form-textarea.is-focus,
.form-select.is-focus,
.form-checkbox input.is-focus + .form__icon,
.form-radio input.is-focus + .form__icon {
  border-color: #f2ab4c;
  box-shadow: 0 0 0 0.4rem rgba(242, 171, 76, 0.3);
}

/* Validation */
form:not([novalidate]) .form-input:invalid,
form:not([novalidate]) .form-textarea:invalid,
form:not([novalidate]) .form-select:invalid,
form:not([novalidate]) .form-checkbox input:invalid + .form__icon,
form:not([novalidate]) .form-radio input:invalid + .form__icon {
  border-color: #5185c5;
}
form:not([novalidate]) .form-input:invalid:focus,
form:not([novalidate]) .form-textarea:invalid:focus,
form:not([novalidate]) .form-select:invalid:focus,
form:not([novalidate]) .form-checkbox input:invalid:focus + .form__icon,
form:not([novalidate]) .form-radio input:invalid:focus + .form__icon,
form:not([novalidate]) .form-input.is-focus:invalid,
form:not([novalidate]) .form-textarea.is-focus:invalid,
form:not([novalidate]) .form-select.is-focus:invalid,
form:not([novalidate]) .form-checkbox input.is-focus:invalid + .form__icon,
form:not([novalidate]) .form-radio input.is-focus:invalid + .form__icon {
  box-shadow: 0 0 0 0.4rem rgba(81, 133, 197, 0.3);
}

@media (min-width: 48em) {
  /* Math */
  .form-control-math {
    height: 1.5em;
  }
}

/*------------------------------------*\
    Keyboard
\*------------------------------------*/
.form-kbd {
  max-width: 605px;
}
.form-kbd__num {
  max-width: 27.2rem;
}
.form-kbd__other {
  max-width: 10.4rem;
}
.form-kbd__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  padding-right: 0.6rem;
  padding-left: 0.6rem;
  font-family:
    "UDDigiKyokasho R",
    "UD Digi Kyokasho NP-R",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    Roboto,
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 2rem;
}

@media (min-width: 48em) {
  .form-kbd {
    max-width: 45.5rem;
  }
  .form-kbd__num {
    max-width: 32.1rem;
  }
  .form-kbd__other {
    max-width: 12rem;
  }
  .form-kbd__btn {
    width: 5.3rem;
    min-height: 4.9rem;
    font-size: 2.4rem;
  }
}

/*------------------------------------*\
    Note
\*------------------------------------*/
.form-note-heading {
  display: inline-block;
  position: relative;
  width: auto;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-width: 0.2rem 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.15);
}
.form-note-tool-btn {
  z-index: 1;
  width: 4.8rem;
  padding-right: 0.6rem;
  padding-left: 0.6rem;
}
.form-note-tool-btn__img {
  width: 2.8rem;
}
.form-note-canvas {
  position: relative;
  /* padding-top: 100%; */
  background-color: #d9d9d9;
  background-image: linear-gradient(90deg, #fff 1.8rem, transparent 1%), linear-gradient(#fff 1.8rem, transparent 1%);
  background-position: center center;
  background-size: 2rem 2rem;
}
.form-note-canvas__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 30em) {
  .form-note-canvas {
    background-position: top center;
  }
}

@media (min-width: 48em) {
  .form-note-tool-btn {
    width: 5.2rem;
  }
  .form-note-tool-btn__img {
    width: 3.2rem;
  }
}

/*------------------------------------*\
    MathJax
\*------------------------------------*/
math,
.MathJax {
  display: block;
}
math::-webkit-scrollbar,
.MathJax::-webkit-scrollbar {
  height: 0.8rem;
}
math::-webkit-scrollbar-track,
math::-webkit-scrollbar-thumb,
.MathJax::-webkit-scrollbar-track,
.MathJax::-webkit-scrollbar-thumb {
  border-radius: 0.4rem;
}
math::-webkit-scrollbar-track,
.MathJax::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: #fff;
}
math::-webkit-scrollbar-thumb,
.MathJax::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 0.4rem;
}
math {
  white-space: nowrap;
}
mjx-math {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /*
	改行
	word-wrap: break-word!important;
	white-space: normal!important;
	*/
}
mjx-semantics {
  font-size: 100% !important;
} /* 分数用 */

/*------------------------------------*\
    Answer
\*------------------------------------*/
.answer {
  position: relative;
  padding-left: 1.25em;
}
.answer--correct::before,
.answer--incorrect::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-color: #e4007f;
}
.answer--correct::before {
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border-radius: 50%;
  border-width: 0.4rem;
}
.answer--incorrect::before {
  transform: rotate(48deg);
  width: 0.4em;
  height: 0.75em;
  margin-top: -0.375em;
  margin-right: 0.3em;
  margin-left: 0.3em;
  border-width: 0 0.4rem 0.4rem 0;
}