@charset "UTF-8";
*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}
::before,
::after {
  --tw-content: "";
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* all */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 0 !important;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}
a {
  color: #444;
  font-weight: 700;
}
a:hover {
  color: #444;
}
b,
strong {
  font-weight: 700;
}
body > div#app {
  min-width: 920px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
main.py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
footer {
  width: 100%;
  font-size: 11px;
  padding: 20px 30px 10px;
  margin-top: auto;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  position: relative;
  z-index: 2;
}
footer p.text-end {
  font-size: 11px;
  margin-bottom: 0;
  width: 100%;
  text-align: right;
}
footer br {
  display: none;
}
.footer-content {
  max-width: 1140px;
  margin: auto;
}
ul.footer-contentList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: 1px #999 solid;
  margin-bottom: 5px;
  padding-bottom: 5px;
}
.footer-content ul.footer-contentList:last-of-type {
  border-bottom: none;
}
.footer-content li {
  margin-right: 2em;
}
.footer-content a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: block;
  padding: 0.3em 0 0.3em 16px;
  background: url(../img/link_right_white.svg) no-repeat top 0.6em left;
  background-size: 12px auto;
}
.footer-content li.copyright a {
  padding: 0.3em 0;
  background: none;
}
.bg-warning,
.bg-success,
.bg-info,
.bgSchool,
.bgSystem {
  background-color: #f5f5f5 !important;
}
.bg-light,
.bgTeacherstudent {
  background-color: #67c4f3 !important;
}
.bgContest {
  background-color: #b6f2ab !important;
}
p {
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 1em;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="month"],
input[type="date"],
input[type="time"],
textarea {
  -webkit-appearance: none;
  margin: 6px 0;
  padding: 8px;
  background: #f5f5f5;
  width: 100%;
  max-width: 500px;
  font-size: 16px;
  border-radius: 8px;
  border: 4px #ddd solid;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="month"],
input[type="date"],
input[type="time"] {
  height: 45px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="month"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
input[type="text"]:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="month"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
textarea:hover {
  outline: none;
  border: 4px #ddd solid;
  -webkit-box-shadow: none;
  box-shadow: none;
}
input::-webkit-input-placeholder {
  color: #ccc !important;
  font-weight: 500;
}
input::-moz-placeholder {
  color: #ccc !important;
  font-weight: 500;
}
input:-ms-input-placeholder {
  color: #ccc !important;
  font-weight: 500;
}
input::-ms-input-placeholder {
  color: #ccc !important;
  font-weight: 500;
}
input::placeholder {
  color: #ccc !important;
  font-weight: 500;
}
input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
input:focus::-moz-placeholder {
  color: transparent !important;
}
input:focus:-ms-input-placeholder {
  color: transparent !important;
}
input:focus::-ms-input-placeholder {
  color: transparent !important;
}
input:focus::placeholder {
  color: transparent !important;
}
input[type="file"] {
  color: #333;
  margin: 6px 6px 6px 0;
  padding: 8px 4px;
  max-width: 500px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px #ddd solid;
  height: 45px;
}
.form-control::file-selector-button {
  padding: 4px 8px;
  margin: -3px 6px -3px 0;
  color: #333;
  background-color: #e9ecef;
}
.blues {
  color: #0062d8;
  font-weight: 500;
}
.oranges {
  color: #ff8c0e;
  font-weight: 500;
}
.infoBlockCellTitle .blues,
.infoBlockCellTitle .oranges {
  font-weight: 700;
}
select {
  display: block;
  width: 100%;
  max-width: 150px;
  margin: 6px 0;
  padding: 11px 32px 11px 11px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select.form-select.smallSelect {
  padding: 6px 32px 6px 11px;
  height: 45px;
}
select:disabled {
  opacity: 0.4;
}
select#school_new_selection {
  max-width: 400px;
}
select#school_new_selection:disabled {
  font-weight: 700;
  border: 1px #f5f5f5 solid;
  background-color: #f5f5f5;
}
select:focus,
select:hover {
  outline: none;
}
table input[type="checkbox"] {
  margin: 0 6px;
  vertical-align: middle;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
  background-color: transparent;
  opacity: 1;
  border-color: transparent;
}
.form-select:disabled,
.form-select[readonly] {
  padding: 11px;
  background-image: none;
}
.form-control:disabled:hover,
.form-control[readonly]:hover,
.form-control:disabled:focus,
.form-control[readonly]:focus {
  background-color: transparent;
  border-color: transparent;
}
[type="checkbox"]:disabled {
  opacity: 0.3;
}
.btn,
.infoInputCell button {
  color: #fff;
  border-radius: 8px;
  margin: 6px 0;
  padding: 0.5em 1em;
  font-weight: 700;
  font-size: 18px;
  border: none;
  letter-spacing: 0;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  height: 45px;
}
a.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.closeOuter {
  text-align: center;
}
header .btn::before,
.backBtn .btn::before,
.twoBlockCell .btn::before {
  position: relative;
  top: 0;
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  background: url(../img/link_right_white.svg) no-repeat left top;
  background-size: 100% auto;
  margin-right: 0.3em;
}
.backBtn .btn {
  border: 2px #fff solid;
}
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-default {
  background-color: #888;
}
.inputSpaces {
  font-size: 0;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-default:hover {
  opacity: 0.8;
  color: #fff;
  background-color: #ccc !important;
  border-color: #ccc !important;
}
.infoInputCell button:hover {
  opacity: 0.8;
}
.btn-outline-primary:hover {
  opacity: 0.8;
  color: #008be6;
  background-color: #fff;
  border-color: #ddd;
}
.searchIcon:hover {
  opacity: 0.8;
  background-color: #008be6;
  border-color: #ddd;
}
.btn-outline-primary {
  background-color: #fff;
  color: #008be6;
  border: 1px #ddd solid;
}
.bg-success .btn-outline-primary,
.bgSchool .btn-outline-primary {
  color: #6fb82c;
}
.bg-light .btn-outline-primary,
.bgTeacherstudent .btn-outline-primary,
.bgSystem .btn-outline-primary {
  color: #6c757d;
}
.btn-orange {
  background-color: #ff9700;
  border-color: #ff9700;
  color: #fff !important;
}
.bg-warning .btn-primary,
.theacher-login .btn-primary,
.bg-light .btn-primary,
.bg-warning .btn-secondary,
.theacher-login .btn-secondary,
.bg-light .btn-secondary,
.bgTeacherstudent .btn-primary,
.bgTeacherstudent .btn-secondary,
.bgSystem .btn-primary,
.bgSystem .btn-secondary,
.infoInputCell button {
  background-color: #ff9700;
}
.bg-success .btn-primary,
.school-login .btn-primary,
.bg-success .btn-secondary,
.school-login .btn-secondary,
.bgSchool .btn-primary,
.bgSchool .btn-secondary {
  background-color: #6fb82c;
}
.btn-primary:hover,
.bgTeacherstudent .btn-primary:hover,
.bgTeacherstudent .btn-secondary:hover,
.bgSystem .btn-primary:hover .bgSystem .btn-secondary:hover {
  background-color: #ff9700 !important;
}
.bg-success .btn-primary:hover,
.school-login .btn-primary:hover,
.bg-success .btn-secondary:hover,
.school-login .btn-secondary:hover,
.bgSchool .btn-primary:hover,
.bgSchool .btn-secondary:hover {
  background-color: #6fb82c !important;
}
.bgSystem #headerInner .btn-primary,
.bgSystem #headerInner .btn-secondary {
  background-color: #6c757d;
}
.bgSystem #headerInner .btn-primary:hover,
.bgSystem #headerInner .btn-secondary:hover {
  background-color: #6c757d !important;
}
.btn-orange:hover {
  background-color: #ff9700;
  border-color: #ff9700;
}
.btn-danger {
  background-color: #ed0000;
  border-color: #ed0000;
}
.btn-danger:hover {
  color: #fff;
  background-color: #ed0000 !important;
  border-color: #ed0000 !important;
}
.btn.disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn.disabled:hover,
.btn:disabled:hover {
  opacity: 0.4 !important;
}
.btn.btn-danger.disabled,
.btn.btn-danger:disabled {
  opacity: 1;
  background-color: #eee;
  border-color: #eee;
  color: #ccc;
  cursor: default;
}
.btn.btn-danger.disabled:hover,
.btn.btn-danger:disabled:hover {
  opacity: 1 !important;
  background-color: #eee !important;
  border-color: #eee !important;
  color: #ccc !important;
}
.backBtn {
  position: absolute;
  top: -8px;
}
section.l-main .backBtn {
  left: 1.25rem;
}
.breadcrumb + .btnRankTable {
  display: none !important;
}
table {
  border-top: 1px #ddd solid;
  border-right: 1px #ddd solid;
  width: 100%;
  text-align: left;
  vertical-align: middle;
}
table th,
table td {
  font-size: 1rem;
  padding: 0.6em;
  border: none;
  border-left: 1px #ddd solid;
}
table th {
  background-color: #f5f5f5;
}
table thead,
table tbody,
table tr {
  border: none !important;
}
table tr:nth-child(even) {
  background: #f5f5f5;
}
[hidden] {
  display: none !important;
}
.hidden {
  display: none !important;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1055;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.modal.show .modal-dialog {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}
.modal-body {
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 700;
  color: #6c757d;
  background-color: #f5f5f5;
}
.modal-dialog-scrollable {
  height: calc(100% - 1rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}
.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  outline: 0;
  padding: 1rem;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: 0.5;
}
.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 0.8rem !important;
  padding-bottom: 0 !important;
  border-bottom: none;
}
.modal-header h5 {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4em;
  text-align: center;
  color: #6c757d;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.modal-header .btn-close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
}
.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}
.modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}
.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}
.modal-footer > * {
  margin: 0.25rem;
}
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
}
.modalCell p {
  text-align: left !important;
}
.modal-content .modalCell strong {
  text-align: left;
  font-size: 1rem;
  line-height: 1.6em;
  color: #6c757d;
  display: block !important;
  background-color: #f5f5f5;
  margin: 0.25rem 0;
  padding: 0.5rem;
}
.modal-content .modalCell.passwordmc strong {
  text-align: center;
}
.modalCell ul {
  list-style-type: none;
  display: inline-block;
  text-align: center;
}
.modalCell ul li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 0.5em;
  text-align: left;
}
.modalCell ul li:last-child {
  margin-bottom: 0;
}
.modalCell ul li::before {
  content: "・";
  display: inline-block;
  width: 1em;
  text-align: center;
  text-indent: 0;
  padding-left: 0;
}
ul.modalCellList {
  font-size: 16px;
  line-height: 1.5em;
}
ul.modalCellList li::before {
  content: none;
}
ul.modalCellList.plusUnderBorder {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px #ddd solid;
}
ul.modalCellList.plusUnderBorder li {
  padding: 0;
  margin: 0;
  text-indent: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
ul.modalCellList.plusUnderBorder li:nth-child(odd) {
  background-color: #f5f5f5;
}
span.nameTitle {
  display: inline-block;
  min-width: 6em;
  text-align: center;
  padding: 8px 0;
  font-weight: 700;
  font-size: 90%;
  border-right: 1px #ddd solid;
}
span.nameInput {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 8px 1em;
}
table.modalCourse {
  border-bottom: 1px #ddd solid;
}
table.modalCourse td.tabCourseIndexBackground,
table.modalCourse td.tabCourseIndexBackground + td {
  background-color: #008be6;
  color: #fff;
}
table.modalCourse tr td:first-child {
  text-align: center;
}
.fade {
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  -webkit-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.modal-content div {
  text-align: center;
  margin-bottom: 0.5rem;
}
.modal-content div:last-child {
  margin-bottom: 0;
}
.modal-content p {
  margin: 0.5rem 0;
  text-align: center;
  color: #6c757d;
}
.modal-content strong {
  font-size: 1.2rem;
  font-weight: 700;
  display: inline-block;
  vertical-align: baseline;
}
.container {
  max-width: 1180px;
  margin: auto;
  padding: 0 1.25rem 1.25rem;
  position: relative;
}
/* ログイン */
.container.login-page {
  vertical-align: middle;
  height: calc(100vh - 60px);
  display: table;
  margin: auto;
  padding: 1.25rem;
}
.loginBoxOuter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  max-width: 450px;
}
.loginBox {
  padding-top: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/logo_eng.svg) no-repeat top center;
  background-size: 280px auto;
}
.loginBoxInner {
  background-color: #fff;
  border-radius: 10px;
  padding: 1.25rem 1.75rem;
}
.loginBoxInner p,
.loginAt {
  text-align: left;
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 0.4em;
}
.loginBoxInner p a,
.loginAt a {
  text-decoration: underline;
}
.login-page .card-header {
  font-size: 26px;
  font-weight: 900;
  color: #008be6;
  display: block;
  border: none;
  text-align: center;
  position: relative;
  margin-bottom: 0.3em;
}
.login-page .card-header::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 30px;
  height: 30px;
  background: url(../img/cat_blue.svg) no-repeat left top;
  background-size: 100% auto;
  margin-right: 4px;
}
.bg-success .login-page .card-header,
.bgSchool .login-page .card-header,
.school-login .login-page .card-header {
  color: #6fb82c;
}
.bg-success .login-page .card-header::before,
.bgSchool .login-page .card-header::before,
.school-login .login-page .card-header::before {
  background-image: url(../img/cat_green.svg);
}
.bgSystem .login-page .card-header {
  color: #6c757d;
}
.bgSystem .login-page .card-header::before {
  color: #6c757d;
  background-image: url(../img/cat_black.svg);
}
.loginPass {
  position: relative;
  border-radius: 8px;
  border: 5px #ddd solid;
  background: #f5f5f5;
  margin: 6px 0;
  text-align: left;
}
.loginPass input[type="password"],
.loginPass input[type="text"] {
  margin: 0 !important;
  width: calc(100% - 50px);
  border: none;
  border-radius: 0;
  height: 40px;
}
::-ms-reveal {
  display: none;
}
#btn_passview {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0;
  width: 50px;
  height: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/passview_open.svg);
  background-size: 30px auto;
  background-repeat: no-repeat;
  background-position: center center;
}
#btn_passview.passviewbtn {
  background-image: url(../img/passview_close.svg);
}
.login-page .form-check {
  text-align: center;
  position: relative;
  margin: 10px 0;
}
.login-page input[type="checkbox"] {
  width: 100%;
  height: 25px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.login-page .form-check-label {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 2px 10px 2px 35px;
  position: relative;
  width: auto;
  font-size: 15px;
}
.login-page .form-check-label::before {
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 4px;
  content: "";
  display: block;
  height: 20px;
  left: 5px;
  position: absolute;
  top: 3px;
  width: 20px;
}
.login-page .form-check-label::after {
  border-right: 3px solid #008be6;
  border-bottom: 3px solid #008be6;
  content: "";
  display: block;
  height: 9px;
  left: 12px;
  margin-top: -5px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 7px;
}
.login-page input[type="checkbox"]:checked + .form-check-label::after {
  opacity: 1;
}
.submitOuter {
  margin-bottom: 6px;
}
.login-page .btn {
  width: 100%;
  background-image: none;
  font-size: 22px;
  padding: 0.2em 1em;
}
.login-page .btn::before {
  width: 16px;
  height: 16px;
}
.loginAt {
  margin-top: 8px;
}
.loginAt p {
  font-size: 13px;
  margin-bottom: 0.3em;
  text-align: left;
}
/* ヘッダー */
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: #fff;
  margin-bottom: 25px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
#headerInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  max-width: 1180px;
  min-width: 920px;
  position: relative;
  margin: auto;
  padding: 12px 1.25rem;
}
#headerInner.plusNameLarge {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
header > * {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
h1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 215px;
  margin-right: auto;
}
.freePage h1 {
  margin-right: 0;
}
.navbar-brand {
  margin: 0 15px 0 0;
  font-size: 0;
  background: url(../img/logo.svg) no-repeat left center;
  background-size: 100% auto;
  display: block;
  width: 200px;
  height: 58px;
}
.navbar-brand-free {
  margin: 0 15px 0 0;
  font-size: 0;
  background: url(../img/logo_eng2.svg) no-repeat left center;
  background-size: 100% auto;
  display: block;
  width: 200px;
  height: 58px;
}
.navbar-brand1 {
  margin: 0 15px 0 0;
  font-size: 0;
  background: url(../img/logo/logo1.png) no-repeat left center;
  background-size: 100% auto;
  display: block;
  width: 200px;
  height: 58px;
}
.navbar-brand2 {
  margin: 0 15px 0 0;
  font-size: 0;
  background: url(../img/logo/logo2.png) no-repeat left center;
  background-size: 100% auto;
  display: block;
  width: 200px;
  height: 58px;
}
.navbar-brand3 {
  margin: 0 15px 0 0;
  font-size: 0;
  background: url(../img/logo/logo3.png) no-repeat left center;
  background-size: 100% auto;
  display: block;
  width: 200px;
  height: 58px;
}
.headerInfo {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 34px 0 -3px 0.8em;
  padding: 0;
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: 0;
  font-weight: 700;
  max-width: calc(50% - 125px);
  width: auto;
}
.headerSchool {
  padding-left: 22px;
  background: url(../img/school.svg) no-repeat left top 1px;
  background-size: 19px auto;
}
.headerName {
  padding-left: 22px;
  background: url(../img/teacher.svg) no-repeat left top 1px;
  background-size: 19px auto;
}
.nameLarge {
  font-size: 19px;
  line-height: 1.4em;
  font-weight: 700;
  border: 2px #ff8c0e solid;
  border-radius: 6px;
  padding: 0 0.4em 0 0;
  color: #ff8c0e;
  margin-left: auto;
  margin-right: auto;
}
.nameLarge::before {
  content: "ログイン中";
  background-color: #ff8c0e;
  color: #fff;
  font-size: 12px;
  padding: 0 0.4em;
  margin-right: 0.4em;
}
@media (max-width: 992px) {
  .headerInfo {
    min-width: auto;
  }
}
.headerBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: absolute;
  top: 11px;
  right: 1.25rem;
  width: calc(100% - 280px);
}
.headerBtn .btn-primary,
.headerBtn .btn-secondary {
  border-radius: 6px;
  padding: 0.3em 0.8em;
  letter-spacing: 0.03em;
  font-size: 15px;
  font-weight: 700;
  min-width: 9em;
  height: auto;
  margin: 0 0 0 6px;
}
.headerBtn .btn-primary::before,
.headerBtn .btn-secondary::before {
  top: 1px;
}
/* パンくず */
ol.breadcrumb {
  padding: 0 1.25rem;
  margin: -0.5rem 0 0.3rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: transparent;
}
.breadcrumb-item {
  font-size: 17px;
  line-height: 1.4em;
  display: block;
  padding: 0;
  position: relative;
  border-bottom: none;
  color: #6c757d;
}
.breadcrumb-item a {
  font-weight: 700;
  color: #6c757d;
  display: inline-block;
  margin-right: 0.5em;
  text-decoration: underline;
}
section.l-main .breadcrumb-item:first-child {
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.bgTeacherstudent .breadcrumb-item,
.bgTeacherstudent .breadcrumb-item a,
.freePageBlock .breadcrumb-item,
.freePageBlock .breadcrumb-item a {
  color: #fff;
}
section.l-main .breadcrumb-item:first-child a,
.typingbc .breadcrumb-item:first-child a,
.typingbc .breadcrumb-item:first-child button {
  text-decoration: none;
  font-weight: 700;
  border: 2px #fff solid;
  padding: 0.2em 0.6em 0.2em 1.6em;
  border-radius: 6px;
  font-size: 15px;
  background: url(../img/link_right_white.svg) no-repeat top 0.6em left 0.6em #008be6;
  background-size: 12px auto;
}
section.l-main .breadcrumb-item a:hover {
  opacity: 0.8;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #fff;
  content: var(--bs-breadcrumb-divider, "/");
}
section.l-main .breadcrumb-item + .breadcrumb-item {
  padding-left: 1rem;
}
section.l-main .breadcrumb-item + .breadcrumb-item::before {
  content: none;
}
.bg-light .breadcrumb-item,
.breadcrumb-item a,
.bg-light .breadcrumb-item + .breadcrumb-item::before .bgTeacherstudent .breadcrumb-item,
.bgTeacherstudent .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}
.breadcrumb-item.active {
  font-size: 26px;
  line-height: 1.3em;
  font-weight: 900;
  display: block;
  padding: 0;
  position: relative;
  border-bottom: none;
}
.bg-warning .teacher-top .breadcrumb-item.active,
.bg-light .teacher-top .breadcrumb-item.active,
.bgTeacherstudent .teacher-top .breadcrumb-item.active {
  color: #fff;
  background: url(../img/cat_white.svg) no-repeat left top 5px;
  background-size: 30px auto;
  padding: 0 0 0 38px;
}
.breadcrumbPlus {
  position: relative;
  padding: 0 150px;
}
.breadcrumbPlus .btn-primary {
  position: absolute;
  right: 1.25rem;
  top: -0.5em;
  -webkit-box-shadow: 0 0 0 2px #fff;
  box-shadow: 0 0 0 2px #fff;
}
.l-main .classBtn {
  position: absolute;
  right: 1.25rem;
  top: -0.5em;
  -webkit-box-shadow: 0 0 0 2px #fff;
  box-shadow: 0 0 0 2px #fff;
}
h2.ktTitle {
  text-align: center;
  font-size: 30px;
  line-height: 1.4em;
  font-weight: 900;
  color: #6c757d;
  margin-bottom: 1rem;
}
h2.ktTitle::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  background: url(../img/cat_black.svg) no-repeat left top;
  background-size: 100% auto;
  width: 30px;
  height: 26px;
  margin-right: 10px;
  margin-top: 10px;
}
.bgTeacherstudent .trialBlock h2.ktTitle {
  color: #008be6;
}
.bgTeacherstudent .trialBlock h2.ktTitle::before {
  background-image: url(../img/cat_blue.svg);
}
.bg-light h2.ktTitle,
.bgTeacherstudent h2.ktTitle {
  color: #fff;
}
.bg-light h2.ktTitle::before,
.bgTeacherstudent h2.ktTitle::before {
  background-image: url(../img/cat_white.svg);
}
/* タイピング */
.l-main {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.l-main__container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  max-height: 600px;
}
.l-main__container .order-0 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.freel-main .order-0 {
  max-width: 760px;
}
.l-main__container .order-1 {
  margin-right: 1.5rem;
  width: auto;
  width: calc(30% - 1.5rem);
  min-width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  min-height: 530px;
}
.l-main__container.test__container .order-1 {
  width: calc(35% - 1.5rem);
  min-width: 400px;
}
.l-main__container.test__container .order-1 .c-table:first-child {
  width: 65%;
}
.l-main__container.test__container .order-1 .c-table:last-child {
  width: 35%;
}
.typingOrder {
  padding: 10px 60px 0;
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  max-height: 72vh;
  min-height: 480px;
  border: 8px #43b6f0 solid;
  -webkit-box-shadow: 0 0 0 4px #fff;
  box-shadow: 0 0 0 4px #fff;
}
.typingOrder .underBtn {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  width: 100%;
  margin: auto;
  background-color: transparent;
  border-radius: 0;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  padding: 0 !important;
}
.typingOrder .underBtn .prevCourse,
.typingOrder .underBtn .nextCourse {
  margin: 0;
  width: 40px;
  height: 120px;
  font-size: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75% auto;
  background-color: #008be6;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px;
  border: 2px #fff solid;
}
.typingOrder .underBtn .prevCourse {
  background-image: url(../img/prev_course.svg);
  margin-left: 10px;
}
.typingOrder .underBtn .nextCourse {
  background-image: url(../img/next_course.svg);
  margin-right: 10px;
}
.typingOrder .underBtn .prevCourse:disabled,
.typingOrder .underBtn .nextCourse:disabled {
  background-color: #000;
  opacity: 0.2;
}
.typingOrder .underBtn a.prevCourse,
.typingOrder .underBtn a.nextCourse {
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.typingOrder .underBtn a.prevCourse:hover,
.typingOrder .underBtn a.nextCourse:hover {
  opacity: 0.8;
}
@media screen and (max-width: 1024px) {
  .l-main__container .order-1 {
    margin-right: 1rem;
    width: calc(28% - 1rem);
    min-width: 280px;
  }
}
.p-typingscreen {
  border-radius: 10px;
  background-color: transparent;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 6px transparent solid;
}
#p-typingscreen {
  background-color: #444;
  border: 6px #fff solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.p-typingscreen__start,
.p-typingtestscreen__start {
  background: url(../img/start.svg) no-repeat left 25px top 21px #ff9700 !important;
  background-size: 16px auto !important;
  color: #fff;
  font-weight: 900;
  font-size: 1.8rem !important;
  border: 4px #fff solid;
  outline: none;
  border-radius: 12px !important;
  padding: 15px 25px 15px 50px !important;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  cursor: pointer;
  margin-right: auto;
  margin-left: auto;
}
.p-typingtestscreen__start {
  background: url(../img/start.svg) no-repeat left 25px top 18px #ff9700 !important;
  background-size: 18px auto !important;
  padding: 18px 25px 18px 50px !important;
  font-size: 1.6rem !important;
}
/*
20240505追加
*/
.p-typingtestscreen__start span {
  display: inline-block;
  line-height: 1.4em;
  margin-bottom: 0.4em;
  background-color: #fff;
  color: #ff9700;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}
.p-typingtestscreen__start:has(span) {
  padding: 10px 25px 12px 50px !important;
  background-position: left 25px top 43px !important;
}
.p-typingscreen__start:hover,
.p-typingtestscreen__start:hover {
  opacity: 1 !important;
  background-color: #ff3f00 !important;
}
.p-typingtestscreen__start:has(span):hover span {
  color: #ff3f00;
}
.p-keyboard {
  margin-top: 0.5rem;
  border-radius: 10px;
  background-color: #fff;
  padding: 1rem;
  max-width: 100%;
}
.p-typingscreen__kana {
  color: #aaa;
  word-break: break-all;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.p-typingscreen__mana {
  word-break: break-all;
  color: #aaa;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.p-typingscreen__romaji {
  font-size: 1.8rem;
  letter-spacing: 0.2em;
  min-height: 1.4em;
}
.p-typingscreen__romaji__show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.p-typingscreen__romaji__show span {
  min-width: 0.5em;
}
.p-typingscreen__romaji__show span:empty {
  min-width: inherit;
}
.p-typingscreen__romaji__show .typed {
  color: #ff9700;
}
.p-typingscreen__romaji__show .untyped {
  color: #fff;
}
.p-typingscreen__romaji__typed {
  color: #ff9700;
  word-break: break-all;
  display: inline-block;
}
.p-typingscreen__romaji__untyped {
  color: #fff;
  word-break: break-all;
  display: inline-block;
}
.p-typingscreen__romaji__untyped__miss::first-letter {
  color: #ff3f00;
}
.p-typingscreen__successtype {
  top: 0.5rem;
  left: 0.5rem;
  background-color: #008be6;
  padding: 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.p-typingscreen__misstype {
  top: 0.5rem;
  right: 0.5rem;
  background-color: #ff3f00;
  padding: 0.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.p-keyboard__active,
.p-finger__active {
  background-color: #ff9700 !important;
  color: #fff !important;
}
.p-keyboard__active_space {
  background-color: #ff9700 !important;
  color: #fff !important;
  -webkit-animation: flash 1s linear infinite;
  animation: flash 1s linear infinite;
}
@-webkit-keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.p-fingers .p-finger__active::before {
  display: none;
}
.p-typingscreen__count,
.p-typingtestscreen__count {
  font-size: 2rem;
  line-height: 5.5rem;
  text-align: center;
  font-weight: 700;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: url(../img/countdown.svg) no-repeat center center;
  background-size: 100% auto;
  width: 6rem;
  height: 6rem;
}
.p-keyboard__key--normal,
#p-keyboard__key--lshift,
#p-keyboard__key--rshift {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 1px #ccc;
  box-shadow: 0 0 0 1px #ccc;
  position: relative;
  padding-top: 100%;
}
#p-keyboard__key--lshift,
#p-keyboard__key--rshift {
  padding-top: 40%;
}
#p-keyboard__key--zh,
#p-keyboard__key--del,
#p-keyboard__key--lbracket,
#p-keyboard__key--rbracket,
#p-keyboard__key--enter,
#p-keyboard__key--control,
#p-keyboard__key--loption,
#p-keyboard__key--lcommnad,
#p-keyboard__key--space,
#p-keyboard__key--rcommnad,
#p-keyboard__key--roption,
#p-keyboard__key--tab,
.p-keyboard__margin--lg {
  background-color: #e5e5e5;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0.25rem;
}
.p-keyboard__key--enter::after {
  background-color: #e5e5e5;
}
.p-keyboard__key--normal::before,
#p-keyboard__key--lshift::before,
#p-keyboard__key--rshift::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
#p-keyboard__key--one::before {
  background-image: url(../img/kb_one.svg);
}
#p-keyboard__key--two::before {
  background-image: url(../img/kb_two.svg);
}
#p-keyboard__key--three::before {
  background-image: url(../img/kb_three.svg);
}
#p-keyboard__key--four::before {
  background-image: url(../img/kb_four.svg);
}
#p-keyboard__key--five::before {
  background-image: url(../img/kb_five.svg);
}
#p-keyboard__key--six::before {
  background-image: url(../img/kb_six.svg);
}
#p-keyboard__key--seven::before {
  background-image: url(../img/kb_seven.svg);
}
#p-keyboard__key--eight::before {
  background-image: url(../img/kb_eight.svg);
}
#p-keyboard__key--nine::before {
  background-image: url(../img/kb_nine.svg);
}
#p-keyboard__key--zero::before {
  background-image: url(../img/kb_zero.svg);
}
#p-keyboard__key--hypen::before {
  background-image: url(../img/kb_hypen.svg);
}
#p-keyboard__key--tilde::before {
  background-image: url(../img/kb_tilde.svg);
}
#p-keyboard__key--en::before {
  background-image: url(../img/kb_en.svg);
}
#p-keyboard__key--q::before {
  background-image: url(../img/kb_q.svg);
}
#p-keyboard__key--w::before {
  background-image: url(../img/kb_w.svg);
}
#p-keyboard__key--e::before {
  background-image: url(../img/kb_e.svg);
}
#p-keyboard__key--r::before {
  background-image: url(../img/kb_r.svg);
}
#p-keyboard__key--t::before {
  background-image: url(../img/kb_t.svg);
}
#p-keyboard__key--y::before {
  background-image: url(../img/kb_y.svg);
}
#p-keyboard__key--u::before {
  background-image: url(../img/kb_u.svg);
}
#p-keyboard__key--i::before {
  background-image: url(../img/kb_i.svg);
}
#p-keyboard__key--o::before {
  background-image: url(../img/kb_o.svg);
}
#p-keyboard__key--p::before {
  background-image: url(../img/kb_p.svg);
}
#p-keyboard__key--atmark::before {
  background-image: url(../img/kb_atmark.svg);
}
#p-keyboard__key--a::before {
  background-image: url(../img/kb_a.svg);
}
#p-keyboard__key--s::before {
  background-image: url(../img/kb_s.svg);
}
#p-keyboard__key--d::before {
  background-image: url(../img/kb_d.svg);
}
#p-keyboard__key--f::before {
  background-image: url(../img/kb_f.svg);
}
#p-keyboard__key--g::before {
  background-image: url(../img/kb_g.svg);
}
#p-keyboard__key--h::before {
  background-image: url(../img/kb_h.svg);
}
#p-keyboard__key--j::before {
  background-image: url(../img/kb_j.svg);
}
#p-keyboard__key--k::before {
  background-image: url(../img/kb_k.svg);
}
#p-keyboard__key--l::before {
  background-image: url(../img/kb_l.svg);
}
#p-keyboard__key--semicolon::before {
  content: ";";
}
#p-keyboard__key--semicolon::before {
  background-image: url(../img/kb_semicolon.svg);
}
#p-keyboard__key--colon::before {
  background-image: url(../img/kb_colon.svg);
}
#p-keyboard__key--z::before {
  background-image: url(../img/kb_z.svg);
}
#p-keyboard__key--x::before {
  background-image: url(../img/kb_x.svg);
}
#p-keyboard__key--c::before {
  background-image: url(../img/kb_c.svg);
}
#p-keyboard__key--v::before {
  background-image: url(../img/kb_v.svg);
}
#p-keyboard__key--b::before {
  background-image: url(../img/kb_b.svg);
}
#p-keyboard__key--n::before {
  background-image: url(../img/kb_n.svg);
}
#p-keyboard__key--m::before {
  background-image: url(../img/kb_m.svg);
}
#p-keyboard__key--b::before {
  background-image: url(../img/kb_b.svg);
}
#p-keyboard__key--comma::before {
  background-image: url(../img/kb_comma.svg);
}
#p-keyboard__key--period::before {
  background-image: url(../img/kb_period.svg);
}
#p-keyboard__key--slash::before {
  background-image: url(../img/kb_slash.svg);
}
#p-keyboard__key--underscore::before {
  background-image: url(../img/kb_underscore.svg);
}
#p-keyboard__key--lshift::before {
  background-image: url(../img/kb_shift.svg);
}
#p-keyboard__key--rshift::before {
  background-image: url(../img/kb_shift.svg);
}
.c-table {
  border-radius: 10px;
  padding: 0;
  word-break: break-all;
}
.c-table table {
  border: none;
  border-radius: 0;
}
.c-table th,
.c-table td {
  text-align: center;
  vertical-align: baseline;
  white-space: normal;
  color: #444;
  font-size: 15px;
  line-height: 1.2em;
  letter-spacing: 0;
  padding-left: 0;
  padding-right: 0;
}
.c-table table thead th {
  color: #fff;
  font-weight: 700;
  background-color: #008be6;
}
.c-table table tr,
.c-table table td,
.c-table table tbody {
  border: none;
}
.c-table table td:first-child {
  font-weight: 700;
  min-width: 2em;
  padding-right: 5px;
}
.c-table table td:nth-child(2),
.c-table:last-child table td {
  font-weight: 700;
  font-size: 15px;
  text-align: right;
}
.c-table table td:nth-child(2) {
  padding-right: 5px;
  min-width: 3em;
}
.c-table table td:last-child {
  font-size: 12px;
}
.c-table table tr:first-child td:nth-child(2),
.c-table:last-child table tr:first-child td {
  color: #ff9700;
  font-size: 18px;
}
.freel-main .c-table td {
  padding: 5px 0;
}
.freel-main .c-table td:nth-child(2) {
  text-align: left;
  padding-left: 1em;
}
.freel-main .c-table:last-child table tr:first-child td {
  color: #444;
  font-size: 16px;
}
.freel-main .c-table table tr:first-child td:nth-child(2) {
  color: #fff;
  font-size: 12px;
}
.freel-main .c-table table tr td a {
  margin: -5px 0;
  padding: 5px 0;
  display: block;
}
.freel-main .c-table table tr:first-child td:nth-child(2),
.freel-main .c-table:last-child table tr:first-child td {
  color: #444;
}
.freel-main .c-table table tr:first-child td:nth-child(2).tabCourseIndexBackground,
.freel-main .c-table:last-child table tr:first-child td.tabCourseIndexBackground {
  color: #fff;
}
td.tabCourseIndexBackground,
td.tabCourseIndexBackground + td {
  background-color: #67c4f3;
  color: #fff;
}
td.tabCourseIndexBackground + td a {
  color: #fff;
  display: block;
}
.c-table {
  margin-bottom: 1rem;
  max-height: 72vh;
  min-height: 72vh;
  padding: 0;
}
.c-table__container {
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin: 0;
  padding: 0;
}
.c-table__container__space {
  padding: 0.75rem;
}
.w-3\/4 {
  width: 70%;
}
.w-2\/4 {
  width: 70%;
}
.w-1\/4 {
  width: 30%;
}
.w-05\/4 {
  width: 25%;
}
.p-hands {
  overflow: hidden;
  gap: 2rem;
  margin: 0.5rem auto 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.p-fingers {
  bottom: -6px;
  position: relative;
  gap: 0.15rem;
}
@media (min-width: 640px) {
  .p-fingers {
    gap: 0.15rem;
  }
}
.p-fingers div {
  background-color: #f6d2a9;
  border: 4px #999 solid;
  border-bottom: none;
  position: relative;
}
.p-fingers div:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/nail.svg) no-repeat center top;
  background-size: 70% auto;
  position: absolute;
  top: 0.3rem;
  left: 0;
  opacity: 0.5;
}
.p-fingers__finger--sm {
  /* 親指 */
  height: 3.2rem;
  width: 2.8rem;
}
@media (min-width: 640px) {
  .p-fingers__finger--sm {
    height: 3.2rem;
    width: 2.8rem;
  }
}
#p-fingers__finger--lthumb {
  -webkit-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}
#p-fingers__finger--rthumb {
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.p-fingers__finger--md {
  /* 小指 */
  height: 4rem;
  width: 2.4rem;
}
@media (min-width: 640px) {
  .p-fingers__finger--md {
    height: 4rem;
    width: 2.4rem;
  }
}
.p-fingers__finger--lg {
  /* 人差し指, 薬指 */
  height: 6rem;
  width: 2.6rem;
}
@media (min-width: 640px) {
  .p-fingers__finger--lg {
    height: 6rem;
    width: 2.6rem;
  }
}
.p-fingers__finger--xl {
  /* 中指 */
  height: 6.6rem;
  width: 2.6rem;
}
@media (min-width: 640px) {
  .p-fingers__finger--xl {
    height: 6.6rem;
    width: 2.6rem;
  }
}
.p-typingresult__card {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-radius: 10px;
  text-align: center;
}
@media (min-width: 640px) {
  .p-typingresult__card {
    width: 91.666667%;
  }
}
@media (min-width: 768px) {
  .p-typingresult__card {
    width: 55%;
  }
}
.p-typingresult__card {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 0;
}
.p-typingresult__card h3 {
  font-size: 1.4rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5rem;
  text-indent: 0.5rem;
  margin: -3rem 0 0.5rem;
  padding: 10px 0 20px;
  background-color: #ccc;
  background: url(../img/result.svg) no-repeat center center;
  background-size: auto 100%;
}
.p-typingresult__card ul {
  margin-bottom: 0;
}
.p-typingresult__card li {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.3rem;
  border-bottom-width: 0;
  border-radius: 10px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  margin-bottom: 12px;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  background-color: #008be6;
}
.p-typingresult__card li span {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #fff;
}
.p-typingresult__card table {
  font-size: 1.2rem;
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: 100%;
  background-color: #008be6;
  border-radius: 8px;
  border: 4px #008be6 solid;
  overflow: hidden;
}
.p-typingresult__card table thead,
.p-typingresult__card table tbody {
  display: block;
}
.p-typingresult__card table tbody {
  background-color: #fff;
}
.p-typingresult__card table thead tr,
.p-typingresult__card table tbody tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.p-typingresult__card table th {
  color: #fff;
  border: none;
  width: 33.3333%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.p-typingresult__card table td {
  border: none;
  font-weight: 700;
  color: #008be6;
  font-size: 1.4rem;
  border: none;
  width: 33.3333%;
  display: block;
}
.p-typingresult__card table tbody {
  border: none !important;
}
#typing_store_close,
#typing_graph_close {
  margin-bottom: 1rem;
}
a#typing_store_close {
  margin-top: 0.5rem;
  display: inline-block;
}
.p-typingresult__card h4.my-4,
.p-typingresult__card h4.mb-4 {
  margin: 1rem !important;
  font-size: 1rem;
  font-weight: 700;
}
.c-button--sm {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.5rem 1.75rem 0.5rem 3.25rem;
  letter-spacing: 0.05em;
  border-radius: 6px;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
  background: url(../img/close.svg) no-repeat left 1.75rem top 0.7rem #ff9700;
  background-size: 18px auto;
}
.c-button--sm:hover {
  background-color: #ff9700;
  color: #fff;
  opacity: 0.8;
}
.p-typingscreen__start__important {
  background-color: transparent !important;
  background-image: none !important;
  padding: 15px 25px !important;
  cursor: default !important;
  font-size: 22px !important;
}
.p-typingscreen__start__important:hover {
  background-color: transparent !important;
}
.p-typingscreen__start__important2 {
  background-color: transparent !important;
  background-image: none !important;
  padding: 15px 25px !important;
  cursor: default !important;
  font-size: 22px !important;
  color: #008be6;
  border-color: #008be6;
  background-color: rgba(255, 255, 255, 0.5) !important;
}
.p-typingscreen__start__important2:hover {
  background-color: transparent !important;
  color: #008be6;
  background-color: rgba(255, 255, 255, 0.5) !important;
}
.p-typingscreen:has(.hidden + .hidden) {
  cursor: none;
}
.p-typingscreen__start__important:disabled {
  cursor: none !important;
}
#app:has(.challengecourse) .p-typingscreen__start__important:disabled {
  background-color: rgba(0, 0, 0, 0.25) !important;
}
button.p-typingscreen__start:hover {
  opacity: 1 !important;
}
.p-typingtestscreenOut {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.p-typingtestscreen {
  background-color: transparent;
  padding: 0.8rem;
}
.p-typingtestscreen__flex {
  margin: 0 0 0.7rem;
}
.p-typingtestscreen__typenumber,
.p-typingtestscreen__time {
  background-color: #fff;
  color: #6c757d;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0;
}
.p-typingtestscreen__typesbg {
  border-radius: 0;
  background-color: #222;
}
.p-typingtestscreen__typesfield,
.p-typingtestresultscreen__typesfield {
  height: 10rem;
}
.p-typingtestscreen__typesfield {
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
.p-typingtestresultscreen__typesfield {
  overflow-x: hidden;
  overflow-y: auto;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
.p-typingtestscreen__typesfield span,
.p-typingtestresultscreen__typesfield span {
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 2rem;
  height: 2rem;
  width: 3.3333%;
}
@media screen and (max-width: 1200px) {
  .p-typingtestscreen__typesfield span,
  .p-typingtestresultscreen__typesfield span {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1100px) {
  .p-typingtestscreen__typesfield span,
  .p-typingtestresultscreen__typesfield span {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 1000px) {
  .p-typingtestscreen__typesfield span,
  .p-typingtestresultscreen__typesfield span {
    font-size: 1rem;
  }
}
@media screen and (max-width: 900px) {
  .p-typingtestscreen__typesfield span,
  .p-typingtestresultscreen__typesfield span {
    font-size: 0.9rem;
  }
}
.p-typingtestscreen__typed {
  color: #777;
}
.p-typingtestresultscreen__typed {
  background-color: #ffff2e;
  color: #111;
}
.p-typingtestscreen__untyped {
  background-color: #ffff2e;
  color: #111;
}
.p-typingtestscreen__misstyped {
  background-color: #dd0000;
  color: #fff;
}
.p-typingresult span {
  color: #ffff2e;
}
.p-typingresult .p-typingtestresultscreen__typed {
  background-color: transparent;
  color: #fff;
}
.p-typingresult .p-typingtestscreen__misstyped {
  background-color: #dd0000;
}
.p-typingresult #typing_store_close {
  margin-top: 10px;
}
.underBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.5rem 0.8rem;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}
.underBtn .btn-primary,
.breadcrumbPlus .btn-primary {
  margin: 0 0.5rem 0 0;
  height: 36px;
  font-size: 15px;
}
.underBtn .btn-primary:hover {
  opacity: 1 !important;
  background-color: #ff3f00 !important;
}
.breadcrumbPlus .btn-primary {
  margin: 0;
}
.underBtn .btn-primary:disabled {
  opacity: 0.4;
  background-color: #008be6;
}
.underBtn .endTyping {
  margin: 0 0 0 auto;
  background-color: #6c757d;
}
.classList {
  padding: 0 0.8rem 0.8rem;
  margin: 0 0 1rem -4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.py-2.w-12.text-center.text-xs {
  margin: 0 0 4px 4px;
  padding: 0.1rem !important;
  width: calc(9.0909% - 4px);
  color: #eee;
  background-color: #ccc;
  font-weight: 500;
}
.py-2.w-12.text-center.text-xs:nth-last-child(2) {
  width: calc(18.1818% - 4px);
}
.py-2.w-12.text-center.text-xs:last-child {
  width: calc(27.2727% - 4px);
}
.typingtestGraph {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: block;
  width: 100%;
  height: 100%;
}
.typingtestGraphBg {
  position: absolute;
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
.typingtestGraphOuter {
  width: 40%;
  min-width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 75%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  background-color: #fff;
  padding: 1.25rem;
  border-radius: 10px;
  text-align: center;
}
.typingtestGraphOuter.keytouch2000 {
  width: 60%;
}
.typingtestGraphOuter h3 {
  font-size: 24px;
  line-height: 1.6em;
  font-weight: 700;
  margin-bottom: 0.8em;
  padding: 0.3em;
  background-color: #008be6;
  color: #fff;
  border-radius: 6px;
  position: relative;
}
.typingtestGraphOuter h3::after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top-color: #008be6;
  border-bottom-width: 0;
  bottom: -10px;
  content: "";
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  width: 0;
}
.typingtestGraphInner {
  overflow: auto;
  height: calc(100% - 45px);
  border: 3px #ddd solid;
}
.typingtestGraphOuter.keytouch2000 .typingtestGraphInner {
  padding: 15px;
}
ul.smallLists {
  text-align: left;
  font-size: 15px;
  line-height: 1.5em;
  margin-bottom: 1em;
}
ul.smallLists li {
  margin-bottom: 0.6em;
  padding-left: 1em;
  text-indent: -1em;
}
ul.smallLists li:last-child {
  margin-bottom: 0;
}
ul.smallLists li::before {
  content: "・";
  display: inline-block;
  text-align: center;
  padding-left: 0;
  text-indent: 0;
  width: 1em;
}
.typingtestGraphOuter table {
  text-align: center;
}
.typingtestGraphOuter table th {
  width: 33.3333%;
}
.typingtestGraphBtn {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
}
/* ページ */
.freenav {
  position: static;
  height: auto;
  margin-left: 10px;
}
.freenav a {
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.freenav a:hover {
  opacity: 0.8;
}
.pageLinkBlock {
  padding-top: 70px;
  margin-top: -70px;
}
#typingSp {
  display: none;
}
.mainBlock {
  background-color: #fff;
  margin-bottom: 1rem;
  padding: 2rem;
  border-radius: 20px;
}
body:has(.eikenInfos) .mainBlock {
  -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.4);
    margin-bottom: 2rem;
}
.mainBlock .mainBlock.freeTop {
  padding: 0;
}
.mainBlock:has(.freeTop) {
  padding-left: 1em;
  padding-right: 1em;
}
.halfSize {
  width: 60%;
  min-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
/* メニュー */
.menuSpaces {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 12px;
}
.menuSpaces.uppers {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.menuSpacesCell > form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.msCenter {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.underFix {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.infotext {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 10px 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.rightBox {
  margin-left: auto;
  font-size: 14px;
}
.centers {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.centerBox {
  font-size: 14px;
}
.contestBtnOuter {
  width: 100%;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 10px 0 -5px;
}
.contestBtnOuter .menuSpacesCell {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.contestBtnOuter .pdfBtn {
  font-size: 15px;
  background-color: #fff;
  background-position: left 0.6em top 0.4em;
  height: auto;
  padding-left: 2.4em;
  margin: 5px 2.5px !important;
}
.rightBox + .links-sm {
  margin-left: 5px;
}
.topBox {
  margin: 20px 0 0 auto !important;
}
.bottomMin .topBox {
  margin: 10px 0 0 auto !important;
}
.bottomBox {
  margin: 0 !important;
}
.topMinusBox {
  margin-top: -35px !important;
}
.topMinusBox02 {
  margin-top: -35px !important;
  margin-bottom: 0 !important;
}
.smallBox {
  margin-bottom: 0;
}
.smallBox .btn {
  font-size: 14px;
  padding: 0.3em 0.6em;
  height: 35px;
  border-radius: 6px;
}
.menuSpaces .infotext {
  margin-left: 10px;
}
.infotext p {
  margin-bottom: 0;
  margin-right: 1em;
  font-weight: 500;
  font-size: 16px;
}
.infotext p:first-child {
  margin-right: 1em;
}
.infotext p.largeTexts {
  font-size: 16px;
  line-height: 1.4em;
  font-weight: 500;
  margin-right: 0.5em;
  border: 1px #ddd solid;
  padding: 0.3em 0.8em;
  border-radius: 6px;
}
.infotext p.largeTexts span {
  display: inline-block;
  font-size: 90%;
  line-height: 1.2em;
  margin-right: 0.6em;
}
.infotext p.largeTexts strong {
  font-size: 26px;
  line-height: 1.4em;
  font-weight: 700;
}
.infotext .manualSpace {
  margin-bottom: 0;
}
.textat p {
  margin: 0;
}
.textat p strong {
  margin: 6px 0 0;
  display: inline-block;
  padding: 0.6em 1em;
  background-color: #ffffc8;
  border: 1px #ddd solid;
  color: #6c757d;
  border-radius: 6px;
}
p.conspicuous {
  font-size: 16px;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-weight: 500;
  background-color: #ffffc8;
}
p.redconspicuous {
  color: #ed0000;
  font-size: 16px;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-weight: 500;
  border: 2px #ed0000 solid;
}
.menuSpaces input[type="text"] {
  margin-right: 5px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.menuSpaces select {
  margin-right: 5px;
}
.menuSpaces .btn,
.btnArea .btn {
  margin-right: 5px;
}
.menuSpacesCell {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0;
  min-width: 370px;
}
.menuSpacesCell:first-child {
  margin-right: 15px;
  min-width: 500px;
}
.menuSpacesCell:last-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.courseSelect .menuSpacesCell:first-child,
.menuSpaces form .menuSpaces .menuSpacesCell {
  min-width: auto;
}
.wraps {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wraps input[type="text"] {
  min-width: 8em;
}
.contestList > div {
  margin-right: 10px;
  padding-bottom: 0;
  margin-bottom: 5px;
}
.contestList .school_grade_select,
.contestList .school_kumi_select,
.contestList .school_attendance_no_select,
.contestList .school_student_name_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.contestList .school_grade_select label,
.contestList .school_kumi_select label,
.contestList .school_attendance_no_select label,
.contestList .school_student_name_text label {
  font-size: 14px;
  line-height: 1.4em;
  text-align: right;
  margin-right: 5px;
}
.contestList .school_grade_select select,
.contestList .school_kumi_select select,
.contestList .school_attendance_no_select select {
  min-width: 9em;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.contestList .school_student_name_text input[type="text"] {
  max-width: 16em;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.spaceAll {
  min-width: 100%;
}
.spaceOnes {
  min-width: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.spaceOnes form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.spaceNone {
  min-width: 200px;
}
.inputFull input {
  max-width: 100%;
}
.trixeditorOuter input {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.infoInputCell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
}
.infoInputCell textarea {
  height: 8em;
  max-width: inherit;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.infoInputCell input.form-control {
  max-width: inherit;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 0 15px;
}
.bgPlus {
  padding: 5px 10px;
  margin-top: 20px;
  border: 1px #ddd solid;
  border-radius: 6px;
}
.bgNone {
  padding: 5px 10px;
  margin-top: 20px;
}
label.fileInputBox {
  position: relative;
  background-color: #6c757d;
  box-sizing: border-box;
  color: #fff;
  font-size: 16px;
  line-height: 45px;
  font-weight: 700;
  margin: 6px 5px 6px 0;
  padding: 0 16px;
  height: 45px;
  border-radius: 6px;
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 11.5em;
  display: inline-block;
}
.bg-light label.fileInputBox,
.bgTeacherstudent label.fileInputBox,
.bgSystem label.fileInputBox {
  background-color: #ff8c0e;
}
.tablecoursewords label.fileInputBox,
.tablecoursewordssys label.fileInputBox {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  width: 11.5em;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.fileInputText::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  opacity: 0;
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
.fileInputText:hover::after {
  opacity: 1;
}
span.fileInputText {
  font-size: 16px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  cursor: pointer;
}
input[type="file"]:disabled + .fileInputText {
  cursor: default;
}
input[type="file"]:disabled + .fileInputText::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}
input[type="file"]:disabled + .fileInputText:hover::after {
  opacity: 0;
}
.tablecoursewords span.fileInputText,
.tablecoursewordssys span.fileInputText {
  font-size: 14px !important;
  line-height: 30px !important;
}
span.fileInputText.changed {
  display: none;
}
span.filename {
  font-size: 16px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
table td span.filename {
  line-height: 30px !important;
}
label.fileInputBox input[type="file"] {
  display: none;
}
span.soundplay {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/icon_play.svg) no-repeat center center;
  background-size: 100% auto;
  font-size: 0;
  cursor: pointer;
  margin: 1px;
}
span.soundstop {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../img/icon_stop.svg) no-repeat center center;
  background-size: 100% auto;
  font-size: 0;
  cursor: pointer;
  margin: 1px;
}
span.soundplay:hover,
span.soundstop:hover {
  opacity: 0.8;
}
.menuSpacesCell .btn::before {
  display: none;
}
.menuSpacesCell span {
  font-size: 14px;
  line-height: 1.4em;
  font-weight: 500;
  width: 100%;
}
.plusText:first-child {
  margin-right: 10px;
}
.plusText input {
  max-width: calc(50% - 5px);
  margin-right: 5px;
}
.menuSpacesCell.mscLong input[type="date"] {
  max-width: calc(60% - 5px);
}
.menuSpacesCell.mscLong input[type="time"] {
  max-width: calc(40% - 5px);
}
.ptfull input {
  max-width: 100%;
  max-width: 100%;
}
.ptfull:first-child {
  margin-right: 0;
}
.width30 {
  width: 33%;
}
.plusText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  min-width: 20%;
}
.searchIcon {
  background-color: #008be6;
  font-size: 16px;
  width: 70px;
  border: none;
  color: #fff !important;
}
.bg-success .searchIcon,
.bgSchool .searchIcon {
  background-color: #ed0000;
}
.bg-light .searchIcon,
.bgTeacherstudent .searchIcon,
.bgSystem .searchIcon {
  background-color: #ed0000;
}
.searchIcon.siOrange {
  background-color: #ff9700;
}
.menuSpacesOneCheck {
  margin: 6px 5px 6px 0;
  position: relative;
  border: 1px #ddd solid;
  height: 45px;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 10px;
}
.menuSpacesOneCheck input[type="checkbox"] {
  width: 100%;
  height: 25px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.menuSpacesOneCheck .form-check-label {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 37px;
  position: relative;
  width: auto;
  font-size: 16px;
  line-height: 30px;
}
.menuSpacesOneCheck .form-check-label::before {
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 4px;
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
  position: absolute;
}
.menuSpacesOneCheck .form-check-label::after {
  border-right: 4px solid #6fb82c;
  border-bottom: 4px solid #6fb82c;
  content: "";
  display: block;
  height: 16px;
  left: 9px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 12px;
}
.menuSpacesOneCheck input[type="checkbox"]:checked + .form-check-label::after {
  opacity: 1;
}
.bgTeacherstudent .menuSpacesOneCheck .form-check-label::after,
.bgSystem .menuSpacesOneCheck .form-check-label::after {
  border-right: 4px solid #ff9700;
  border-bottom: 4px solid #ff9700;
}
.menuSpacesOne {
  margin-right: 10px;
}
.menuSpacesOne .radioOut input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.menuSpacesOne label {
  cursor: pointer;
  display: inline-block;
  margin: 6px 0;
  text-align: center;
  background-color: #fff;
  color: #008be6;
  font-weight: 500;
  border-radius: 0;
  line-height: 45px;
  padding: 0 10px;
  font-size: 16px;
  border: 1px #ddd solid;
  height: 45px;
}
.menuSpacesOne .radioOut:first-child label {
  border-radius: 8px 0 0 8px;
  margin-right: -1px;
}
.menuSpacesOne .radioOut:last-child label {
  border-radius: 0 8px 8px 0;
}
.menuSpacesOne .radioOut {
  position: relative;
  display: inline-block;
}
.menuSpacesOne input[type="radio"]:checked + label {
  background: #008be6;
  color: #fff;
  border: 1px #008be6 solid;
}
.bgSystem .menuSpacesOne label {
  color: #ff9700;
}
.bgSystem .menuSpacesOne input[type="radio"]:checked + label {
  background: #ff9700;
  border-color: #ff9700;
}
.roSm label {
  font-size: 14px;
  line-height: 30px;
  height: 30px;
}
.menuSpacesOne.roSm .radioOut:first-child label {
  border-radius: 4px 0 0 4px;
}
.menuSpacesOne.roSm .radioOut:last-child label {
  border-radius: 0 4px 4px 0;
}
.noSpaces {
  font-size: 0;
}
trix-editor {
  height: 20em;
}
.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #008be6;
  text-decoration: none;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.nav-link:focus,
.nav-link:hover {
  color: #008be6;
}
.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}
.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #008be6;
}
.nav-fill .nav-item,
.nav-fill > .nav-link {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}
.nav-fill .nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.nav-fill > .nav-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0.5rem;
}
span.english-trial {
  font-size: 13px;
  margin-bottom: 0.1em;
  letter-spacing: 0;
}
.nav-justified .nav-item,
.nav-justified > .nav-link {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.nav-pills {
  margin-bottom: 15px;
  position: relative;
}
.nav-pills::before {
  content: "";
  border-bottom: 5px #008be6 solid;
  width: 100%;
  height: 5px;
  bottom: -4px;
  left: 0;
  position: absolute;
}
.nav-pills .nav-link {
  background: 0;
  border: 0;
  border-radius: 10px 10px 0 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  background-color: #f5f5f5;
  color: #008be6;
}
li.nav-item {
  margin-left: 4px;
}
li.nav-item:first-child {
  margin-left: 0;
}
li.nav-item .nav-link span font {
  margin-right: 5px;
  padding: 1px 4px 3px;
  font-size: 10px;
  line-height: 1.1em;
  letter-spacing: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #dd0000;
  color: #fff !important;
  border-radius: 16px;
  display: block;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #008be6;
}
.tab-content table {
  empty-cells: show;
  border-collapse: collapse;
  font-size: 16px;
  border: 4px #008be6 solid;
}
.tab-content table a {
  text-decoration: underline;
}
.nav {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.tab-content table th,
.tab-content table td {
  border-left: 1px #ddd solid;
  vertical-align: middle;
}
.tab-content table th:first-child,
.tab-content table td:first-child {
  border-left: none;
}
.tab-content table th {
  text-align: center;
  background-color: #008be6;
  color: #fff;
}
.tab-content .tab-pane table {
  margin-bottom: 0;
}
.tab-content table td:first-child {
  text-align: center;
  width: 10%;
}
.tab-content table td:nth-child(2) {
  width: 50%;
}
.tab-content table td:nth-child(3) {
  width: 15%;
  text-align: center;
  font-weight: 700;
  padding-right: 40px;
  padding-left: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.tab-content table td:nth-child(3)::before {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.tab-content table td:nth-child(3).medaru-diamond::before {
  background-image: url(../img/challengecourse/icon_diamond02.svg);
}
.tab-content table td:nth-child(3).medaru-kin::before {
  background-image: url(../img/challengecourse/icon_gold.svg);
}
.tab-content table td:nth-child(3).medaru-gin::before {
  background-image: url(../img/challengecourse/icon_silver.svg);
}
.tab-content table td:nth-child(3).medaru-dou::before {
  background-image: url(../img/challengecourse/icon_bronze.svg);
}
.tab-content table td:nth-child(4) {
  width: 25%;
  text-align: center;
}
.bgSystem .nav-link,
.bgSystem .nav-link:focus,
.bgSystem .nav-link:hover {
  color: #6c757d;
}
.bgSystem .nav-pills::before {
  border-color: #6c757d;
}
.bgSystem .nav-pills .nav-link {
  background-color: #eee;
  color: #6c757d;
}
.bgSystem .nav-pills .nav-link.active,
.bgSystem .nav-pills .show > .nav-link {
  background-color: #6c757d;
  color: #fff;
}
/* 自分の情報 */
.userProfileList {
  border: 1px #ddd solid;
  border-bottom: none;
}
.userProfileListCell {
  display: table;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  text-align: left;
  margin: 0;
  font-size: 1rem;
  width: 100%;
}
.userProfileListCellth {
  width: 30%;
  border-right: 1px #ddd solid;
  padding: 0.6em;
  background-color: #eee;
  border-bottom: 1px #ddd solid;
  display: table-cell;
  vertical-align: middle;
}
.userProfileListCelltd {
  width: 70%;
  padding: 0.6em;
  border-bottom: 1px #ddd solid;
  display: table-cell;
  vertical-align: middle;
}
header.freePage {
  display: block;
}
.freePage #headerInner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.freePage p {
  margin-right: auto;
  margin-left: 3px;
  margin-bottom: 0;
  font-size: 12px;
  text-align: center;
  line-height: 1.4em;
  border-radius: 7px;
  padding: 0.6em;
  font-weight: 700;
  position: relative;
  background-color: #2b369c;
  min-width: 11.5em;
  color: #fff;
}
.freePage p::before {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-right-color: #2b369c;
  border-left-width: 0;
  left: -8px;
  content: "";
  display: block;
  top: calc(50% - 5px);
  margin: auto;
  position: absolute;
  width: 0;
  z-index: 1;
}
ul.freePageHeadBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size: 14px;
  line-height: 1.4em;
}
ul.freePageHeadBtn li {
  margin-left: -1px;
  border-left: 1px #fff solid;
  border-right: 1px #fff solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
ul.freePageHeadBtn li a {
  font-weight: 700;
  letter-spacing: 0.05em;
  background-color: #ff8c0e;
  display: block;
  padding: 0.1em 0.75em 0.1em 1.8em;
  background: url(../img/link_right_white.svg) no-repeat top 0.3em left 0.6em;
  background-size: 14px auto;
  text-align: center;
  color: #fff;
}
.outerBtn {
  font-size: 13px;
  line-height: 1.4em;
  margin-bottom: 0.7em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.outerBtn a {
  margin-left: 0.5em;
  padding: 0.4em 0.5em 0.4em 1.6em;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  border-radius: 5px;
  background: url(../img/link_right_white.svg) no-repeat center left 0.5em #ff8c0e;
  background-size: 12px auto;
}
.naviOut {
  padding-left: 20px;
}
.infoTitle {
  border-bottom: 3px #ddd solid;
  margin-bottom: 0.8em;
  font-size: 30px;
  line-height: 1.4em;
}
.infoTitle span {
  line-height: 1.4em;
  font-weight: 800;
  padding-bottom: 0.2em;
  margin-bottom: -3px;
  border-bottom: 3px #008be6 solid;
  display: inline-block;
  color: #008be6;
}
.bg-success .infoTitle span,
.bgSchool .infoTitle span {
  border-bottom-color: #6fb82c;
  color: #6fb82c;
}
.bg-light .infoTitle span,
.bgTeacherstudent .infoTitle span,
.bgSystem .infoTitle span {
  border-bottom-color: #2b369c;
  color: #2b369c;
}
.bg-light .infoTitle,
.bgTeacherstudent .infoTitle,
.bgSystem .infoTitle {
border-color: #afb3ec;
}
.infoBlock,
.infoBox,
.qnaBlock {
  margin: 0 auto;
}
.infoBlock {
  text-align: center;
}
.infoBlockCell {
  font-size: 15px;
  line-height: 1.8em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 1px #999 dashed;
  padding: 10px 0;
  text-align: left;
}
.infoBlockCell .btnOuter {
  width: 100%;
}
.infoTime {
  font-size: 15px;
  line-height: 1.2em;
  margin-bottom: 0.3em;
  margin-right: 3px;
  font-weight: 800;
  display: inline-block;
  vertical-align: middle;
}
span.infoNew {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0.3em;
  display: inline-block;
  background-color: #ff8c0e;
  line-height: 1em;
  vertical-align: middle;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
.infoBlockCellTitle {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 22px;
  line-height: 1.4em;
  font-weight: 700;
  margin-bottom: 0.6em;
}
.infoBlockCellImage {
  min-width: 140px;
  max-width: 140px;
  height: 140px;
  margin-right: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/noimage.svg) no-repeat top center;
  background-size: cover;
  position: relative;
}
.infoBlockCellImage img {
  background-color: #fff;
  width: 100%;
  height: 100%;
  line-height: 0;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  -o-object-fit: contain;
  object-fit: contain;
}
.infoBlockCellText {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.infoBlockCell.noImages:first-child {
  border-top: 1px #999 dashed;
}
.infoBlockCell.noImages .infoBlockCellText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.infoBlockCell.noImages .infoBlockCellText time.infoTime {
  min-width: 12em;
  margin: 0.3em 3px 0 0;
}
.infoBlockCell.noImages .infoBlockCellText .infoBlockCellTitle {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 0;
}
.infoBlockCell.noImages .infoBlockCellText span.infoNew {
  margin: 0.3em 0.5em 0 0;
}
.infoBlockCellText p,
.infoBox p {
  margin-bottom: 1em;
  font-size: 15px;
  line-height: 1.8em;
}
.infoBlockCellText p:last-child,
.infoBox p:last-child {
  margin-bottom: 0;
}
.infoBlockCellText a {
  text-decoration: underline;
}
.infoBlockCellText p a,
.infoBox p a {
  text-decoration: underline;
}
.infoBlockCellnoImage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px #999 dashed;
  padding: 10px 0;
}
.infoBlockCellnoImage .infoTime {
  min-width: 10em;
  margin-top: 2px;
}
.infoBlockCellnoImage .infoBlockCellTitle {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.5em;
}
.infoBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.reverces {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.infoBox + .infoBox {
  margin-top: 40px;
}
.infoBoxText {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.infoBoxText p {
  font-size: 16px;
}
.ifbSmaller {
  max-width: 780px;
  margin: 0 auto;
}
.infoBoxText p.starsLists {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.infoBoxText p strong.stars {
  margin-right: 0.8em;
  padding: 0.2em 0.6em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #008be6;
  color: #fff;
  min-width: 10em;
  text-align: center;
  border-radius: 4px;
  font-size: 85%;
  line-height: 1.5em;
}
.infoBoxText p.eiken-strong {
  font-size: 120%;
  font-weight: 700;
  line-height: 1.7em;
}
.infoBoxText ul + p.eiken-strong {
  margin-top: 1em;
}
.infoBoxText p span {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.infoBoxText ul li {
  font-size: 18px;
  line-height: 1.6em;
  margin-bottom: 0.3em;
  font-weight: 700;
  padding-left: 1em;
  text-indent: -1em;
}
.infoBoxText ul li:last-child {
  margin-bottom: 0;
}
.infoBoxText ul li::before {
  content: "・";
  width: 1em;
  min-width: 1em;
  text-align: center;
  display: inline-block;
  padding-left: 0;
  text-indent: 0;
}
.infoBoxImage {
  width: 35%;
  margin-left: 20px;
}
.ibiSmall {
  width: 40%;
}
.reverces .infoBoxImage {
  margin-left: 0;
  margin-right: 20px;
}
.infoBoxImage.plusBorder {
  border: 5px #eee solid;
  border-radius: 16px;
  overflow: hidden;
}
.infoBoxImage p {
  margin-top: 8px;
  text-align: center;
  font-size: 15px;
}
.infoBoxImage:has(span) {
  width: 58%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 10px;
}
.infoBoxImage span {
    width: calc(50% - 10px);
  margin-left: 10px;
}
.infoBoxImage02 {
  width: 50%;
  margin-right: 40px;
}
.reverces .infoBoxImage02 {
  margin-right: 0;
  margin-left: 40px;
}
.infoBoxImage02 p {
  font-size: 13px;
  line-height: 1.6em;
  margin-top: 12px;
  color: #444;
}
.infoBoxImage02 p strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6em;
}
p.topSpace {
  margin-top: 3em;
  font-weight: 500;
}
.qnaCell {
  border-bottom: 1px #ddd solid;
}
.qnaCell a {
  font-weight: 700;
  text-decoration: underline !important;
}
.question,
.answerInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
}
.question {
  cursor: pointer;
    background: url(../img/acc_open.svg) no-repeat right 10px center;
  background-size: 20px auto;
}
.question.open {
  background-image: url(../img/acc_close.svg);
}
.qnaIcon {
  width: 45px;
  min-width: 45px;
  height: 45px;
  background-color: #2b369c;
  color: #fff;
  font-size: 24px;
  line-height: 43px;
  font-weight: 900;
  text-align: center;
  border-radius: 6px;
  margin-right: 12px;
}
.answer {
  background-color: #f5f5f5;
  margin-bottom: 20px;
  display: none;
}
.answer .qnaIcon {
  background-color: #fff;
  color: #2b369c;
}
.qnaText {
  margin-top: 10px;
  margin-right: 15px;
}
.question .qnaText p {
  font-size: 20px;
  line-height: 1.4em;
  font-weight: 700;
}
.answer .qnaText p {
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 0.6em;
}
ul.qnaList li {
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 0.6em;
  padding-left: 1em;
  text-indent: -1em;
}
.answer .qnaText p:last-child,
ul.qnaList li:last-child {
  margin-bottom: 0;
}
.btnOuter {
  text-align: center;
}
.inform form {
  display: inline-block;
  margin: 0 5px 10px;
}
.bottomSpace {
  margin-bottom: 30px;
}
.bottomSpaceSmall {
  margin-bottom: 10px;
}
.leftSpace {
  margin-left: 30px;
}
.someBtn {
  margin-top: 15px;
}
.someBtn > * {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.btn-link {
  margin-top: 1rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  width: auto;
  padding: 0.8em 1.5em 0.8em 2.6em;
  font-size: 1.3em;
  border-radius: 6px;
  background: url(../img/link_right_white.svg) no-repeat left 1.5em top 19px #ff8c0e;
  background-size: 14px auto;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.bg-success .btn-link,
.bgSchool .btn-link {
  background-color: #6fb82c;
}
.btn-link:hover {
  color: #fff;
  opacity: 0.8;
}
.typingText {
  margin: 0 0 1.5em;
  text-align: center;
}
.noUpper {
  margin: 1.5em 0 -1.5em;
}
.text-danger {
  color: #ff8c0e;
  font-weight: 500;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 0.5em 1em;
}
span.invalid-feedback {
  color: #ff8c0e;
  display: block;
}
.typingText p {
  display: block;
  padding: 0.5em 1em;
  color: #008be6;
  font-weight: 700;
  font-size: 18px;
  border-radius: 6px;
  border: 1px #008be6 dashed;
}
.eikenat {
  margin: 2.5em 0 0;
}
.eikenat p {
  text-align: center;
}
.eikenat p:last-child {
  margin-bottom: 0;
}
.eikenat p small {
  font-size: 12px;
  line-height: 1.5em;
  display: inline-block;
  text-align: left;
  color: #2b369c;
}
.pagetop {
  text-align: right;
  width: 60px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 10;
}
.pagetop a {
  display: block;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.pagetop:hover a {
  opacity: 0.7;
}
.paginationOuter {
  margin: 8px 0;
}
.paginationOuter.pnFront {
  margin-top: 0;
}
ul.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.page-link {
  position: relative;
  display: block;
  color: #6c757d;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}
.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.page-item.disabled .page-link {
  color: #ccc;
  pointer-events: none;
  background-color: #fff;
  border-color: #ccc;
}
.page-link {
  padding: 0.375rem 0.75rem;
}
.page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
li.page-item {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}
li.page-item.disabled,
li.page-item.disabled a {
  color: #ccc !important;
}
li.page-item.active a {
  background-color: #6c757d !important;
}
.page-link {
  color: #6c757d;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.page-item .page-link,
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  border-radius: 6px;
}
#mainTable,
#mainTableTwo {
  border-bottom: 1px #ddd solid;
  margin-bottom: 0;
}
#mainTable th,
#mainTable td,
#mainTableTwo th,
#mainTableTwo td {
  vertical-align: middle;
  text-align: center;
}
table.studentlist th,
table.studentlist td,
table.tablestudentlist th,
table.tablestudentlist td,
table.tablecourse th,
table.tablecourse td,
table.tablecoursesis th,
table.tablecoursesis td,
table.tablecoursewords th,
table.tablecoursewords td,
table.tablecoursewordssys th,
table.tablecoursewordssys td,
table.loginhistory th,
table.loginhistory td,
table.tableclasslistinfo th,
table.tableclasslistinfo td,
table.tableuser th,
table.tableuser td,
table.tableuser02 th,
table.tableuser02 td,
table.tableuser03 th,
table.tableuser03 td,
table.typinghistory th,
table.typinghistory td,
table.typinghistory02 th,
table.typinghistory02 td,
table.loginhistory th,
table.loginhistory td,
table.note th,
table.note td,
table.tableteacher02 th,
table.tableteacher02 td,
table.tablestudentlist th,
table.tablestudentlist td,
table.studentlisttrial th,
table.studentlisttrial td,
table.tablecoursesys th,
table.tablecoursesys td {
  vertical-align: middle;
  padding: 0.2em 0.4em;
}
table#mainTable th,
table#mainTableTwo th,
table.tablestudentlist th {
  background-color: #6c757d;
  color: #fff;
  text-align: center;
}
table#tablethfead th {
  border-bottom: 1px #ddd solid;
}
table.classinfosearch td form {
  display: inline-block;
}
table.studentlist input,
table.studentlist select,
table.studentlist .btn-sm,
table.studentlist td,
table.tablestudentlist input,
table.tablestudentlist select,
table.tablestudentlist .btn-sm,
table.tablestudentlist td,
table.bestscore th,
table.bestscore td,
table.bestscore02 th,
table.bestscore02 td,
table.tablecourse th,
table.tablecourse td,
table.tablecoursesis th,
table.tablecoursesis td,
table.tablecourse input,
table.tablecourse .btn-sm,
table.tablecoursewords th,
table.tablecoursewords td,
table.tablecoursewords input,
table.tablecoursewords .btn-sm,
table.tablecoursewordssys th,
table.tablecoursewordssys td,
table.tablecoursewordssys input,
table.tablecoursewordssys .btn-sm,
table.schoolinfo th,
table.schoolinfo td,
table.schoolinfo .btn-sm,
table.loginhistory th,
table.loginhistory td,
table.tableclasslistinfo input,
table.tableclasslistinfo .btn-secondary,
table.tableclasslistinfo th,
table.tableclasslistinfo td,
table.tableuser .btn-sm,
table.tableuser02 .btn-sm,
table.tableuser03 .btn-sm,
table.tablecoursesis .btn-sm,
table.tablecoursesis input,
table.tablecoursesis select,
table.tableuser th,
table.tableuser td,
table.tableuser02 th,
table.tableuser02 td,
table.tableuser03 th,
table.tableuser03 td,
table.typinghistory th,
table.typinghistory td,
table.typinghistory02 th,
table.typinghistory02 td,
table.loginhistory th,
table.loginhistory td,
table.classinfosearch th,
table.classinfosearch td,
table.classinfosearch th .btn-sm,
table.classinfosearch td .btn-sm,
table.addcourseword02 th,
table.addcourseword02 td,
table.course-wordlist th,
table.course-wordlist td,
table.tableteacher th,
table.tableteacher td,
table.tableteacher th .btn-sm,
table.tableteacher td .btn-sm,
table.tableteacher02 th,
table.tableteacher02 td,
table.tableteacher02 th .btn-sm,
table.tableteacher02 td .btn-sm,
table.tablestudentlist th,
table.tablestudentlist td,
table.studentlist th,
table.studentlist td,
table.studentlist th .btn-sm,
table.studentlist td .btn-sm,
table.studentlisttrial th,
table.studentlisttrial td,
table.studentlisttrial th .btn-sm,
table.studentlisttrial td .btn-sm,
table.schoolbyclass02 th .btn,
table.schoolbyclass02 td .btn,
table.transcript th,
table.transcript td,
table.tablecoursesys th,
table.tablecoursesys td,
table.tablecoursesys th .btn-sm,
table.tablecoursesys td .btn-sm,
table.tablecoursesys td input {
  font-size: 14px;
}
table#mainTable th input[type="submit"].btn-sm,
table#mainTable td input[type="submit"].btn-sm,
table#mainTableTwo th input[type="submit"].btn-sm,
table#mainTableTwo td input[type="submit"].btn-sm {
  width: auto;
  display: inline-block;
  text-decoration: none;
}
table.tablestudentlist th .btn-sm,
table.tablestudentlist td .btn-sm,
table.studentlist th .btn-sm,
table.studentlist td .btn-sm {
  font-size: 12px;
}
table.studentlist .btn-sm,
table.tablestudentlist .btn-sm,
table.tablecourse .btn-sm,
table.tablecourse .btn-block,
table.tablecoursesis .btn-sm,
table.tablecoursesis .btn-block,
table.tablecoursewords .btn-sm,
table.tablecoursewordssys .btn-sm,
table.tableclasslistinfo .btn-secondary,
table.tableuser .btn-sm,
table.tableuser02 .btn-sm,
table.tableuser03 .btn-sm,
table.schoolinfo .btn-sm,
table.classinfosearch th .btn-sm,
table.classinfosearch td .btn-sm,
table.tableteacher th .btn-sm,
table.tableteacher td .btn-sm,
table.tableteacher02 th .btn-sm,
table.tableteacher02 td .btn-sm,
table.tablestudentlist th .btn-sm,
table.tablestudentlist td .btn-sm,
table.studentlisttrial th .btn-sm,
table.studentlisttrial td .btn-sm,
table.schoolbyclass02 th .btn,
table.schoolbyclass02 td .btn,
table.tablecoursesys th .btn-sm,
table.tablecoursesys td .btn-sm,
table.studentlist th .btn-sm,
table.studentlist td .btn-sm {
  padding: 0.3em 0.6em;
  height: 35px;
  border-radius: 6px;
}
table.tablestudentlist th small {
  line-height: 1.4em;
  display: block;
}
table.studentlisttrial {
  word-break: break-all;
}
table.note tr:nth-of-type(even),
table.maintenanceinfo tr:nth-of-type(even),
table.maintenanceinfo02 tr:nth-of-type(even),
table.studentlist tr:nth-of-type(odd),
table.studentlisttrial tr:nth-of-type(odd),
table.tablecoursesis tr:nth-of-type(odd),
table.course-wordlist tr:nth-of-type(odd) {
  background: #fff;
}
table.tablecoursesys tr:nth-of-type(even),
table.tablekumi tr:nth-of-type(even) {
  background: #fff;
}
table.tablecoursesys tr:nth-of-type(odd),
table.tablekumi tr:nth-of-type(odd) {
  background: #f5f5f5;
}
table.tablecoursesis select {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  margin: 2px 0;
}
table.tablecoursesis input[type="text"] {
  margin: 2px 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
table.tablecoursesis td br {
  display: none;
}
table.tablethfead tr th:first-of-type {
  width: 20%;
}
table.tablethfead tr th:nth-of-type(2) {
  width: 45%;
}
table.tablethfead tr th:nth-of-type(3) {
  width: 35%;
}
table.transcript tr th:first-of-type {
  width: 8%;
}
table.transcript tr th:nth-of-type(2) {
  width: 16%;
}
table.transcript tr th:nth-of-type(3) {
  width: 25%;
}
table.transcript tr th:nth-of-type(4) {
  width: 6%;
}
table.transcript tr th:nth-of-type(5) {
  width: 6%;
}
table.transcript tr th:nth-of-type(6) {
  width: 6%;
}
table.transcript tr th:nth-of-type(7) {
  width: 17%;
}
table.transcript tr th:nth-of-type(8) {
  width: 8%;
}
table.transcript tr th:nth-of-type(9) {
  width: 8%;
}
table.transcript tr td:nth-of-type(3) {
  text-align: left !important;
}
table.studentlist tr th:first-of-type {
  width: 8%;
}
table.studentlist tr th:nth-of-type(2) {
  width: 15%;
}
table.studentlist tr th:nth-of-type(3) {
  width: 8%;
}
table.studentlist tr th:nth-of-type(4) {
  width: 26%;
}
table.studentlist tr th:nth-of-type(5) {
  width: 16%;
}
table.studentlist tr th:nth-of-type(6) {
  width: 8%;
}
table.studentlist tr th:nth-of-type(7) {
  width: 19%;
}
table.studentlist tr td:first-of-type,
table.studentlist tr td:nth-of-type(3) .form-control,
table.studentlist tr td:nth-of-type(5),
table.studentlist tr td:nth-of-type(6),
table.studentlist tr td:nth-of-type(7),
table.tablestudentlist tr td:first-of-type,
table.tablestudentlist tr td:nth-of-type(4) .form-control,
table.tablestudentlist tr td:nth-of-type(6),
table.tablestudentlist tr td:nth-of-type(7),
table.tablestudentlist tr td:nth-of-type(8) {
  text-align: center;
}
table.tablestudentlist tr th:first-of-type {
  width: 8%;
}
table.tablestudentlist tr th:nth-of-type(2) {
  width: 8%;
}
table.tablestudentlist tr th:nth-of-type(3) {
  width: 12.5%;
}
table.tablestudentlist tr th:nth-of-type(4) {
  width: 8.5%;
}
table.tablestudentlist tr th:nth-of-type(5) {
  width: 16.5%;
}
table.tablestudentlist tr th:nth-of-type(6) {
  width: 15.5%;
}
table.tablestudentlist tr th:nth-of-type(7) {
  width: 10.5%;
}
table.tablestudentlist tr th:nth-of-type(8) {
  width: 8.5%;
}
table.tablestudentlist tr th:nth-of-type(9) {
  width: 12%;
  min-width: 120px;
}
table.tableclasslist tr th:first-of-type {
  width: 10%;
}
table.tableclasslist tr th:nth-of-type(2) {
  width: 22%;
}
table.tableclasslist tr th:nth-of-type(3) {
  width: 22%;
}
table.tableclasslist tr th:nth-of-type(4) {
  width: 26%;
}
table.tableclasslist tr th:nth-of-type(5) {
  width: 20%;
}
table.tableclasslist tr td:nth-of-type(5) form {
  min-width: 100%;
}
table.tableclasslistinfo tr th {
  width: 25%;
}
table.tableclasslistinfo tr td:nth-of-type(4) form {
  min-width: 100%;
}
table.tableteacher input[type="text"] {
  font-size: 14px;
}
table.tableteacher tr th:first-of-type {
  width: 15%;
}
table.tableteacher tr th:nth-of-type(2) {
  width: 30%;
}
table.tableteacher tr th:nth-of-type(3) {
  width: 25%;
}
table.tableteacher tr th:nth-of-type(4) {
  width: 15%;
}
table.tableteacher tr th:nth-of-type(5) {
  width: 15%;
}
table.tableteacher02 tr th:first-of-type {
  width: 15%;
}
table.tableteacher02 tr th:nth-of-type(2) {
  width: 30%;
}
table.tableteacher02 tr th:nth-of-type(3) {
  width: 25%;
}
table.tableteacher02 tr th:nth-of-type(4) {
  width: 15%;
}
table.tableteacher02 tr th:nth-of-type(5) {
  width: 15%;
}
table.byclassOne#mainTable {
  margin-bottom: 20px;
}
table.byclassOne form {
  text-align: center;
}
table.byclassOne .btn {
  min-width: 10em;
  margin-top: 15px;
}
table.byclassOne tr th:first-of-type {
  width: 17%;
}
table.byclassOne tr th:nth-of-type(2) {
  width: 17%;
}
table.byclassOne tr th:nth-of-type(3) {
  width: 17%;
}
table.byclassOne tr th:nth-of-type(4) {
  width: 49%;
}
table.byclassTwo tr th:first-of-type {
  width: 50%;
}
table.byclassTwo tr th:nth-of-type(2) {
  width: 50%;
}
table.bestscore tr th:first-of-type {
  width: 10%;
}
table.bestscore tr th:nth-of-type(2) {
  width: 8%;
}
table.bestscore tr th:nth-of-type(3) {
  width: 8%;
}
table.bestscore tr th:nth-of-type(4) {
  width: 8%;
}
table.bestscore tr th:nth-of-type(5) {
  width: 15%;
}
table.bestscore tr th:nth-of-type(6) {
  width: 20%;
}
table.bestscore tr th:nth-of-type(7) {
  width: 10%;
}
table.bestscore tr th:nth-of-type(8) {
  width: 8%;
}
table.bestscore tr th:nth-of-type(9) {
  width: 13%;
}
table.bestscore02 tr th:first-of-type {
  width: 6%;
}
table.bestscore02 tr th:nth-of-type(2) {
  width: 10%;
}
table.bestscore02 tr th:nth-of-type(3) {
  width: 8%;
}
table.bestscore02 tr th:nth-of-type(4) {
  width: 10%;
}
table.bestscore02 tr th:nth-of-type(5) {
  width: 29%;
}
table.bestscore02 tr th:nth-of-type(6) {
  width: 8%;
}
table.bestscore02 tr th:nth-of-type(7) {
  width: 8%;
}
table.bestscore02 tr th:nth-of-type(8) {
  width: 8%;
}
table.bestscore tr td:nth-of-type(6),
table.bestscore02 tr td:nth-of-type(5) {
  text-align: left !important;
}
table.tablecourse tr th:first-of-type {
  width: 8%;
}
table.tablecourse tr th:nth-of-type(2) {
  width: 5%;
}
table.tablecourse tr th:nth-of-type(3) {
  width: 8%;
}
table.tablecourse tr th:nth-of-type(4) {
  width: 27%;
}
table.tablecourse tr th:nth-of-type(5) {
  width: 8%;
}
table.tablecourse tr th:nth-of-type(6) {
  width: 10%;
}
table.tablecourse tr th:nth-of-type(7) {
  width: 10%;
}
table.tablecourse tr th:nth-of-type(8) {
  width: 12%;
}
table.addcourseword tr th:first-of-type {
  width: 22%;
}
table.addcourseword tr th:nth-of-type(2) {
  width: 50%;
}
table.addcourseword tr th:nth-of-type(3) {
  width: 28%;
}
table.addcourseword02 tr th:first-of-type {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(2) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(3) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(4) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(5) {
  width: 19%;
}
table.addcourseword02 tr th:nth-of-type(6) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(7) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(8) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(9) {
  width: 9%;
}
table.addcourseword02 tr th:nth-of-type(10) {
  width: 9%;
}
table.tabladdcoursewordecourse tr th:nth-of-type(3) {
  width: 20%;
}
table.addcourseword tr td:nth-of-type(2) {
  text-align: left !important;
}
table.tablecoursewords tr th:first-of-type {
  width: 8%;
}
table.tablecoursewords tr th:nth-of-type(2) {
  width: 9%;
}
table.tablecoursewords tr th:nth-of-type(3) {
  width: 32%;
}
table.tablecoursewords tr th:nth-of-type(4) {
  width: 32%;
}
table.tablecoursewords tr th:nth-of-type(5) {
  width: 19%;
}
table.tablecoursewords tr td:nth-of-type(5) form {
  display: inline-block;
}
table.tablecoursewordssys tr th:first-of-type {
  width: 5%;
}
table.tablecoursewordssys tr th:nth-of-type(2) {
  width: 10%;
}
table.tablecoursewordssys tr th:nth-of-type(3) {
  width: 10%;
}
table.tablecoursewordssys tr th:nth-of-type(4) {
  width: 10%;
}
table.tablecoursewordssys tr th:nth-of-type(5) {
  width: 25%;
}
table.tablecoursewordssys tr th:nth-of-type(6) {
  width: 25%;
}
table.tablecoursewordssys tr th:nth-of-type(7) {
  width: 25%;
}
table.tablecoursesys tr th:first-of-type {
  width: 6%;
}
table.tablecoursesys tr th:nth-of-type(2) {
  width: 44%;
}
table.tablecoursesys tr th:nth-of-type(3) {
  width: 15%;
}
table.tablecoursesys tr th:nth-of-type(4) {
  width: 15%;
}
table.tablecoursesys tr th:nth-of-type(5) {
  width: 20%;
}
table.loginhistory tr th:first-of-type {
  width: 15%;
}
table.loginhistory tr th:nth-of-type(2) {
  width: 15%;
}
table.loginhistory tr th:nth-of-type(3) {
  width: 15%;
}
table.loginhistory tr th:nth-of-type(4) {
  width: 15%;
}
table.loginhistory tr th:nth-of-type(5) {
  width: 15%;
}
table.loginhistory tr th:nth-of-type(6) {
  width: 10%;
}
table.loginhistory tr th:nth-of-type(7) {
  width: 15%;
}
table.schoolinfo td form {
  display: inline-block;
}
table.schoolinfo th a {
  color: #fff;
  text-decoration: underline;
}
table.schoolinfo tr th:first-of-type {
  width: 8%;
}
table.schoolinfo tr th:nth-of-type(2) {
  width: 15%;
}
table.schoolinfo tr th:nth-of-type(3) {
  width: 20%;
}
table.schoolinfo tr th:nth-of-type(4) {
  width: 10%;
}
table.schoolinfo tr th:nth-of-type(5) {
  width: 7%;
}
table.schoolinfo tr th:nth-of-type(6) {
  width: 17%;
}
table.schoolinfo tr th:nth-of-type(7) {
  width: 11%;
}
table.schoolinfo tr th:nth-of-type(8) {
  width: 12%;
}
table.schoolinfonew,
table.trialinfo-edituser {
  margin-bottom: 10px !important;
}
table.schoolinfonew textarea {
  min-width: 100%;
}
table.schoolinfonew02 {
  width: 100%;
  margin-bottom: 30px !important;
  border-right: 1px #ddd solid;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.phpInfos table {
  width: 100%;
}
table.schoolinfonew th,
table.schoolinfonew td {
  font-size: 15px;
}
table.schoolinfonew02 th,
table.schoolinfonew02 td {
  font-size: 14px;
  height: 2.4em;
}
table.schoolinfonew tr td,
table.schoolinfonew02 tr td {
  text-align: left !important;
}
table.schoolinfonew td,
table.schoolinfonew th table.schoolinfonew02 td,
table.schoolinfonew02 th {
  border: 1px #ddd solid;
  position: relative;
  background-clip: padding-box;
}
table.schoolinfonew thead tr th:first-of-type,
table.schoolinfonew02 thead tr th:first-of-type {
  width: 20%;
}
table.schoolinfonew thead tr th:nth-of-type(2),
table.schoolinfonew02 thead tr th:nth-of-type(2) {
  width: 30%;
}
table.schoolinfonew thead tr th:nth-of-type(3),
table.schoolinfonew02 thead tr th:nth-of-type(3) {
  width: 50%;
}
table.classinfosearch thead tr th:first-of-type {
  width: 10%;
}
table.classinfosearch thead tr th:nth-of-type(2) {
  width: 20%;
}
table.classinfosearch thead tr th:nth-of-type(3) {
  width: 15%;
}
table.classinfosearch thead tr th:nth-of-type(4) {
  width: 15%;
}
table.classinfosearch thead tr th:nth-of-type(5) {
  width: 15%;
}
table.classinfosearch thead tr th:nth-of-type(6) {
  width: 25%;
}
table.tableuser tr th:first-of-type {
  width: 5%;
}
table.tableuser tr th:nth-of-type(2) {
  width: 25%;
}
table.tableuser tr th:nth-of-type(3) {
  width: 15%;
}
table.tableuser tr th:nth-of-type(4) {
  width: 10%;
}
table.tableuser tr th:nth-of-type(5) {
  width: 10%;
}
table.tableuser tr th:nth-of-type(6) {
  width: 20%;
}
table.tableuser tr th:nth-of-type(7) {
  width: 10%;
}
table.tableuser tr th:nth-of-type(8) {
  width: 10%;
}
table.tableuser02 tr th:first-of-type {
  width: 5%;
}
table.tableuser02 tr th:nth-of-type(2) {
  width: 15%;
}
table.tableuser02 tr th:nth-of-type(3) {
  width: 10%;
}
table.tableuser02 tr th:nth-of-type(4) {
  width: 10%;
}
table.tableuser02 tr th:nth-of-type(5) {
  width: 20%;
}
table.tableuser02 tr th:nth-of-type(6) {
  width: 10%;
}
table.tableuser02 tr th:nth-of-type(7) {
  width: 15%;
}
table.tableuser03 tr th:first-of-type {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(2) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(3) {
  width: 12%;
}
table.tableuser03 tr th:nth-of-type(4) {
  width: 18%;
}
table.tableuser03 tr th:nth-of-type(5) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(6) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(7) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(8) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(9) {
  width: 8%;
}
table.tableuser03 tr th:nth-of-type(10) {
  width: 14%;
}
table.tablekumi tr th:first-of-type {
  width: 10%;
}
table.tablekumi tr th:nth-of-type(2) {
  width: 30%;
}
table.tablekumi tr td:nth-of-type(2) {
  text-align: left !important;
}
table.tablekumi tr th:nth-of-type(3) {
  width: 30%;
}
table.tablekumi tr th:nth-of-type(4) {
  width: 30%;
}
table.headtable {
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 1px #ddd solid;
}
table.headtable tr td:first-of-type {
  width: 25%;
}
table.headtable tr td:nth-of-type(2) {
  width: 25%;
}
table.headtable tr td:nth-of-type(3) {
  width: 25%;
}
table.headtable tr td:nth-of-type(4) {
  width: 25%;
}
table.headtable thead {
  background-color: #eee;
  font-weight: 700;
}
table.classinfoupdstudent tr th:first-of-type {
  width: 50%;
}
table.classinfoupdstudent tr th:nth-of-type(2) {
  width: 50%;
}
table.tablecoursesis tr th:first-of-type {
  width: 5%;
}
table.tablecoursesis tr th:nth-of-type(2) {
  width: 5%;
}
table.tablecoursesis tr th:nth-of-type(3) {
  width: 5%;
}
table.tablecoursesis tr th:nth-of-type(4) {
  width: 8%;
}
table.tablecoursesis tr th:nth-of-type(5) {
  width: 24%;
}
table.tablecoursesis tr th:nth-of-type(6) {
  width: 10%;
}
table.tablecoursesis tr th:nth-of-type(7) {
  width: 8%;
}
table.tablecoursesis tr th:nth-of-type(8) {
  width: 8%;
}
table.tablecoursesis tr th:nth-of-type(9) {
  width: 12%;
}
table.tablecoursesis tr th:nth-of-type(10) {
  width: 8%;
}
table.tablecoursesis tr th:nth-of-type(11) {
  width: 7%;
}
table.typinghistory tr th:first-of-type {
  width: 5%;
}
table.typinghistory tr th:nth-of-type(2) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(3) {
  width: 15%;
}
table.typinghistory tr th:nth-of-type(4) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(5) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(6) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(7) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(8) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(9) {
  width: 10%;
}
table.typinghistory tr th:nth-of-type(10) {
  width: 10%;
}
table.typinghistory02 tr th:first-of-type {
  width: 5%;
}
table.typinghistory02 tr th:nth-of-type(2) {
  width: 5%;
}
table.typinghistory02 tr th:nth-of-type(3) {
  width: 28%;
}
table.typinghistory02 tr th:nth-of-type(4) {
  width: 28%;
}
table.typinghistory02 tr th:nth-of-type(5) {
  width: 10%;
}
table.typinghistory02 tr th:nth-of-type(6) {
  width: 10%;
}
table.typinghistory02 tr th:nth-of-type(7) {
  width: 5%;
}
table.typinghistory02 tr th:nth-of-type(8) {
  width: 8%;
}
table.typinghistory02 tr td:nth-of-type(3) {
  text-align: left !important;
}
table.typinghistory02 tr td:nth-of-type(4) {
  text-align: left !important;
}
table.maintenanceinfo tr th:first-of-type {
  width: 10%;
}
table.maintenanceinfo tr th:nth-of-type(2) {
  width: 5%;
}
table.maintenanceinfo tr th:nth-of-type(3) {
  width: 20%;
}
table.maintenanceinfo tr th:nth-of-type(4) {
  width: 45%;
}
table.maintenanceinfo tr th:nth-of-type(5) {
  width: 10%;
}
table.maintenanceinfo tr th:nth-of-type(6) {
  width: 10%;
}
table.maintenanceinfo tr td:nth-of-type(4) {
  text-align: left !important;
}
table.maintenanceinfo02 tr th:first-of-type {
  width: 15%;
}
table.maintenanceinfo02 tr th:nth-of-type(2) {
  width: 85%;
}
table.loginhistory tr th:first-of-type {
  width: 11%;
}
table.loginhistory tr th:nth-of-type(2) {
  width: 11%;
}
table.loginhistory tr th:nth-of-type(3) {
  width: 11%;
}
table.loginhistory tr th:nth-of-type(4) {
  width: 11%;
}
table.loginhistory tr th:nth-of-type(5) {
  width: 14%;
}
table.loginhistory tr th:nth-of-type(6) {
  width: 14%;
}
table.loginhistory tr th:nth-of-type(7) {
  width: 8%;
}
table.loginhistory tr th:nth-of-type(8) {
  width: 8%;
}
table.loginhistory tr th:nth-of-type(9) {
  width: 11%;
}
table.courseaddword {
  margin-bottom: 20px !important;
}
table.courseaddword tr th:first-of-type {
  width: 10%;
}
table.courseaddword tr th:nth-of-type(2) {
  width: 50%;
}
table.courseaddword tr th:nth-of-type(3) {
  width: 10%;
}
table.courseaddword tr th:nth-of-type(4) {
  width: 10%;
}
table.courseaddword tr th:nth-of-type(5) {
  width: 10%;
}
table.courseaddword tr th:nth-of-type(6) {
  width: 10%;
}
table.courseaddwordnormal,
table.addcourseword02 {
  margin-bottom: 20px !important;
}
table.courseaddwordnormal tr th:first-of-type {
  width: 10%;
}
table.courseaddwordnormal tr th:nth-of-type(2) {
  width: 40%;
}
table.courseaddwordnormal tr th:nth-of-type(3) {
  width: 10%;
}
table.courseaddwordnormal tr th:nth-of-type(4) {
  width: 10%;
}
table.courseaddwordnormal tr th:nth-of-type(5) {
  width: 10%;
}
table.courseaddwordnormal tr th:nth-of-type(6) {
  width: 10%;
}
table.courseaddwordnormal tr th:nth-of-type(7) {
  width: 10%;
}
table.tablecoursewords tr th small {
  display: block;
  line-height: 1.4em;
  font-weight: 400;
}
table.trialinfo-edituser tr th:first-of-type {
  width: 15%;
}
table.trialinfo-edituser tr th:nth-of-type(2) {
  width: 20%;
}
table.trialinfo-edituser tr th:nth-of-type(3) {
  width: 25%;
}
table.trialinfo-edituser tr th:nth-of-type(4) {
  width: 40%;
}
table.trialinfo-edituser tr td:nth-of-type(4) {
  text-align: left !important;
  font-size: 14px;
}
table.note tr th:first-of-type {
  width: 20%;
}
table.note tr th:nth-of-type(2) {
  width: 20%;
}
table.note tr th:nth-of-type(3) {
  width: 60%;
}
table.note tr td:nth-of-type(3) {
  text-align: left !important;
  font-size: 14px;
}
table.course-wordlist tr th:first-of-type {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(2) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(3) {
  width: 16%;
}
table.course-wordlist tr th:nth-of-type(4) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(5) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(6) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(7) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(8) {
  width: 10%;
}
table.course-wordlist tr th:nth-of-type(9) {
  width: 14%;
}
table.schoolbyclass {
  margin-bottom: 20px !important;
}
table.schoolbyclass tr th:first-of-type {
  width: 50%;
}
table.schoolbyclass tr th:nth-of-type(2) {
  width: 50%;
}
table.schoolbyclass02 tr th:first-of-type {
  width: 25%;
}
table.schoolbyclass02 tr th:nth-of-type(2) {
  width: 25%;
}
table.schoolbyclass02 tr th:nth-of-type(3) {
  width: 25%;
}
table.schoolbyclass02 tr th:nth-of-type(4) {
  width: 25%;
}
table.studentlisttrial tr th:first-of-type {
  width: 25%;
}
table.studentlisttrial tr th:nth-of-type(2) {
  width: 25%;
}
table.studentlisttrial tr th:nth-of-type(3) {
  width: 25%;
}
table.studentlisttrial tr th:nth-of-type(4) {
  width: 25%;
}
pre {
  white-space: pre-wrap;
}
.tableText {
  margin: 0.75rem 0 1.5rem;
}
.tableText p {
  line-height: 1.8em;
}
table.sizefix {
  max-width: 800px;
  margin: 0 auto;
}
table.addcourseword {
  margin-bottom: 0.75rem !important;
}
table.addcourseword p.text-danger {
  margin-bottom: 0;
}
table#twolineLeftth02 {
  margin-bottom: 30px;
}
table#twolineLeftth th,
table#twolineLeftth td,
table#twolineLeftth02 th,
table#twolineLeftth02 td,
table#twolineLeftth03 th,
table#twolineLeftth03 td {
  padding: 0.5em 1em;
}
table#twolineLeftth th,
table#twolineLeftth02 th,
table#twolineLeftth th,
table#twolineLeftth03 th {
  border-bottom: 1px #ddd solid;
  background-color: #6c757d;
  color: #fff;
  width: 40%;
}
table#twolineLeftth03 th {
  width: 24%;
  font-size: 14px;
}
table#twolineLeftth td,
table#twolineLeftth02 td {
  width: 60%;
}
table#twolineLeftth03 td {
  width: 76%;
}
table#twolineLeftth03 .form-check-label {
  font-size: 14px;
  line-height: 1.5em;
  margin-right: 1em;
}
table#twolineLeftth03 .links-sm {
  border: 1px #ddd solid;
  display: inline-block;
  vertical-align: top;
}
table#twolineLeftth tr:last-child td,
table#twolineLeftth02 tr:last-child td,
table#twolineLeftth03 tr:last-child td {
  border-bottom: 1px #ddd solid;
}
table#mainTable th a,
table#mainTableTwo th a {
  color: #fff;
  display: inline-block;
  padding: 0 26px 0 0;
  background: url(../img/icon_question.svg) no-repeat top right;
  background-size: 20px auto;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
table#mainTable th a:hover,
table#mainTableTwo th a:hover {
  opacity: 0.8;
}
table.mymenu {
  line-height: 1.8em;
}
table.mymenu input[type="text"].form-control {
  min-width: 100%;
}
a.links {
 background: url(../img/link_right_orange.svg) no-repeat top 5px left;
    background-size: 14px auto;
    display: inline-block;
    padding-left: 18px;
    margin-bottom: .2em;
}
a.links:last-child {
  margin-bottom: 0;
}
.manualSpace {
  background-color: #f5f5f5;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 6px;
  color: #6c757d;
}
.links + .links {
  margin-left: 6px;
}
.links a {
  display: inline-block;
  margin-right: 2em;
  outline: none;
}
.links a:last-of-type {
  margin-right: 0;
}
.links a::before {
  content: "?";
  display: inline-block;
  background-color: #666;
  color: #fff;
  width: 1.5em;
  text-align: center;
  margin-right: 0.3em;
}
.linkSmall {
  font-size: 14px;
}
.linkSmall .links {
  padding: 0.6em;
  border-radius: 6px;
}
.linksOut {
  margin-bottom: 0.5rem;
  font-size: 14px;
}
.linksOut .links {
  display: inline-block;
  margin-bottom: 0.5em;
  margin-right: 0.3em;
  background-color: #f5f5f5;
  padding: 0.6em;
  border-radius: 6px;
}
.linksOut .links a {
  color: #6c757d;
  text-decoration: underline;
}
.links-sm {
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 0.8em;
  font-size: 14px;
}
.spaces {
  margin: 1em 0 0;
}
.manualSpace p {
  font-size: 14px;
}
.manualSpace a {
  text-decoration: underline;
}
.manualSpace p:last-of-type {
  margin-bottom: 0;
}
.qnaBox {
  position: relative;
}
div.questionBtn {
  display: inline-block;
  padding: 0 26px 0 0;
  background: url(../img/icon_question.svg) no-repeat top right;
  background-size: 20px auto;
  cursor: pointer;
  -webkit-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
div.questionBtn:hover {
  opacity: 0.8;
}
div.answerBox {
  position: absolute;
  right: -20px;
  z-index: 2;
  width: 180%;
  display: none;
}
table.studentlisttrial div.answerBox {
  width: 100%;
}
div.answerBox.is-open {
  display: block;
}
.dispa {
  display: block;
}
div.answerBox p {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: 1px #ddd solid;
  padding: 0.7em;
  border-radius: 6px;
  margin: 20px 0 0;
  text-align: left;
  font-size: 14px;
  position: relative;
}
div.answerBox p::after {
  border: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.8);
  border-top-width: 0;
  top: -10px;
  content: "";
  display: block;
  right: 30%;
  position: absolute;
  width: 0;
}
.twoBlockCellTitle {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4em;
  margin: 0.4em 0 0;
  color: #6c757d;
}
.twoBlockCell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px #ddd solid;
  padding: 2px 0;
}
.contestMenu .twoBlockCell {
  padding: 10px 0;
}
.twoBlockCell:first-child {
  padding-top: 0;
}
.twoBlockLeft {
  min-width: 32em;
  margin-right: 1.5em;
}
.twoBlockLeft .btn {
  min-width: 100%;
}
.twoBlockLeft .btn small {
  background-color: #fff;
  color: #ff9700;
  vertical-align: baseline;
  line-height: 1.4em;
  padding: 0.1em 0.4em;
  margin-left: 0.5em;
  border-radius: 4px;
}
.bg-success .twoBlockLeft .btn small,
.bgSchool .twoBlockLeft .btn small {
  background-color: #fff;
  color: #6fb82c;
  vertical-align: baseline;
  line-height: 1.4em;
  padding: 0.1em 0.4em;
  margin-left: 0.5em;
  border-radius: 4px;
}
.twoBlockRight {
  font-size: 14px;
  line-height: 1.5em;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #eee;
  padding: 0.5em 1em;
  border-radius: 6px;
  position: relative;
}
.twoBlockRight::after {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-right-color: #eee;
  border-left-width: 0;
  left: -10px;
  content: "";
  display: block;
  top: calc(50% - 5px);
  position: absolute;
  width: 0;
}
span.text-danger {
  font-size: 15px;
  line-height: 1.5em;
  color: #ed0000;
}
.pageLinkBlock span.text-danger {
  display: block;
}
.noSpaceDanger span.text-danger {
  padding: 0;
}
.courseaddwordBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.courseaddwordBlock textarea {
  line-height: 1.4em;
  color: #6c757d;
  font-size: 18px;
}
.courseaddwordCell:first-child {
  width: 35%;
}
.courseaddwordCell:last-child {
  width: 61%;
}
.courseaddwordCell textarea {
  min-width: 100%;
}
.courseaddwordCell h3 {
  font-size: 24px;
  line-height: 1.3em;
  font-weight: 700;
  margin-bottom: 0.4em;
  color: #6c757d;
}
h3.names {
  font-size: 24px;
  line-height: 1.3em;
  font-weight: 700;
  margin-bottom: 0.8em;
  color: #6c757d;
}
h3.titles,
#SearchOrEditMode {
  font-size: 22px;
  line-height: 1.3em;
  font-weight: 700;
  margin-bottom: 0.6em;
  color: #6c757d;
}
h3.titlesBorders {
  font-size: 22px;
  line-height: 1.3em;
  font-weight: 700;
  margin-bottom: 0.6em;
  color: #6c757d;
  display: inline-block;
  border: 1px #6c757d solid;
  padding: 0.2em 0.6em;
  border-radius: 6px;
}
p#word-count {
  padding: 0.5em;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  border: 3px #6c757d solid;
  text-align: center;
  color: #6c757d;
}
.courseaddwordCell ul {
  font-size: 14px;
  line-height: 1.5em;
}
.courseaddwordCell ul li {
  margin-bottom: 0.5em;
  padding-left: 1em;
  text-indent: -1em;
}
.courseaddwordCell ul li::before {
  content: "・";
  display: inline-block;
  width: 1em;
  text-align: center;
  padding-left: 0;
  text-indent: 0;
}
.trialBlock {
  max-width: 800px;
  margin: auto;
}
.trialBlock p {
  font-size: 16px;
  line-height: 1.6em;
}
ul.trialList {
  margin-bottom: 1.5em;
  font-size: 14px;
  line-height: 1.6em;
  border: 5px #008be6 solid;
  padding: 15px;
  border-radius: 10px;
  color: #008be6;
}
ul.trialList li {
  margin-bottom: 0.6em;
  padding-bottom: 0.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  border-bottom: 1px #999 dashed;
}
ul.trialList li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
span.trialListTitle {
  min-width: 8.5em;
  background-color: #008be6;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  margin-right: 0.5em;
  border-radius: 4px;
}
span.trialListText {
  font-weight: 500;
}
table#trialTable {
  border: none;
  border-top: 1px #ddd solid;
  margin-bottom: 20px;
}
table#trialTable tr:nth-child(even) {
  background: #fff;
}
table#trialTable th,
table#trialTable td {
  border-left: none;
  border-bottom: 1px #ddd solid;
  background-color: #fff;
  padding: 0.6em 0;
}
table#trialTable th {
  width: 12em;
  padding-right: 1em;
  color: #008be6;
}
table#trialTable td input {
  min-width: 100%;
}
table#trialTable th small {
  display: block;
  font-weight: 400;
  color: #495057;
}
span.red {
  color: #ff9700;
}
.industryCell {
  display: none;
}
.btnOuter .form-check-labelOuter {
  margin: 0 0.5em 0.5em;
  position: relative;
  display: block;
}
.trialInfo {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  background-color: #f5f5f5;
}
.trialInfo p {
  margin-bottom: 0;
}
.trialInfoRed {
  padding: 15px 15px 15px 70px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: 2px #ed0000 solid;
  background: url(../img/exclamation.svg) no-repeat left 15px center;
  background-size: 45px auto;
}
.trialInfoRed p {
  margin-bottom: 0;
  color: #ed0000;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7em;
}
.trialBlock .form-check-label a {
  text-decoration: underline;
  position: relative;
  z-index: 2;
}
.btnOuter .form-check-labelOuter input[type="checkbox"] {
  width: 100%;
  height: 25px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.btnOuter .form-check-labelOuter .form-check-label {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 2px 10px 2px 40px;
  position: relative;
  width: auto;
  font-size: 15px;
  line-height: 1.6em;
}
.btnOuter .form-check-labelOuter .form-check-label::before {
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 4px;
  content: "";
  display: block;
  height: 30px;
  left: 5px;
  position: absolute;
  top: 0;
  width: 30px;
  display: block;
}
.btnOuter .form-check-labelOuter .form-check-label::after {
  border-right: 3px solid #008be6;
  border-bottom: 3px solid #008be6;
  content: "";
  display: block;
  height: 16px;
  left: 14px;
  opacity: 0;
  position: absolute;
  top: 5px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 12px;
}
.btnOuter .form-check-labelOuter input[type="checkbox"]:checked + .form-check-label::after {
  opacity: 1;
}
table#trialPublication {
  margin-bottom: 30px;
}
table#trialPublication th {
  border-bottom: 1px #ddd solid;
  background-color: #6c757d;
  color: #fff;
  width: 14em;
}
table#trialPublication td {
  border-bottom: 1px #ddd solid;
}
table#trialPublication td a {
  text-decoration: underline;
}
table#trialTableList {
  border-bottom: 1px #ddd solid;
}
table#trialTableList th {
  background-color: #6c757d;
  color: #fff;
  width: 33.3333%;
}
table#trialTableList th {
  width: 25%;
}
table#trialPublication th,
table#trialPublication td,
table#trialTableList th,
table#trialTableList td {
  font-size: 14px;
}
#update_id,
#cancel_id {
  margin-right: 5px;
}
.flash_message {
  margin-top: -1.3rem;
  margin-bottom: 0.3rem;
  position: absolute;
  width: calc(100% - 4em);
  left: 2em;
  z-index: 1000000000;
}
.flash_message p {
  padding: 0.4em 0.8em 0.4em 2.2em;
  margin-bottom: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  background: url(../img/exclamationsmall.svg) no-repeat left 0.8em top 0.6em #0061d8d4;
  background-size: 18px auto;
}
.pdfBtn {
  color: #ff9700 !important;
  border: 2px #ff9700 solid;
  background: url(../img/pdficon.svg) no-repeat left 0.6em top 0.5em;
  background-size: 20px auto;
  padding-left: 2.2em;
  font-size: 16px;
}
.pdfBtn:hover {
  border-color: #ff9700;
}
#alertbtn {
  display: none;
}
.font-sm input,
.font-sm .fileInputText,
.font-sm button {
  font-size: 15px !important;
}
.font-sm label.fileInputBox {
  width: 10.5em;
}
tr.table-secondary input[type="text"] {
  opacity: 0.5;
}
.errors {
  text-align: center;
  min-width: 300px;
  max-width: 400px;
}
.errors h2 {
  font-size: 32px;
  line-height: 1.4em;
  margin: 0 auto 0.8em;
  padding-bottom: 0.2em;
  border-bottom: 1px #6c757d solid;
}
.errors p {
  text-align: left;
}
.notfoundImage {
  margin: 30px auto 40px;
  max-width: 300px;
}
.notfoundImage img {
  width: 100%;
  height: auto;
}
p.backToTop {
  text-align: center;
}
p.backToTop a {
  padding: 0.6em 1em 0.6em 2.4em;
  background: url(../img/link_right_white.svg) no-repeat top 0.95em left 1em #008be6;
  background-size: 16px auto;
  font-size: 16px;
  color: #fff;
  border-radius: 6px;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
p.backToTop a:hover {
  opacity: 0.8;
}
.rightSpaces {
  margin-right: -10px;
}
.rightSpaces .manualSpace {
  margin-right: 10px !important;
}
tr#bestpoint_tr td span,
tr#todaypoint_tr td span {
  margin-left: 0.5em;
}
span.today {
  background: url(../img/today.svg) no-repeat top center;
  background-size: auto 22px;
  height: 22px;
  width: 24px;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
  left: 5px;
}
span.ktclass,
span.bestscore_rank {
  display: inline-block;
  font-size: 80%;
}
span.ktclass::before,
span.bestscore_rank::before {
  content: "(";
}
span.ktclass::after,
span.bestscore_rank::after {
  content: ")";
}
span.ktclass:empty,
span.bestscore_rank:empty {
  display: none;
}
.btnOther {
  text-align: center;
}
.btnOther a {
  display: inline-block;
  background-color: #6fb82c;
  color: #fff;
  font-size: 14px;
  line-height: 1.4em;
  padding: 0.6em 1.2em;
  border-radius: 6px;
}
.btnOther a:hover {
  opacity: 0.8;
}
.inputSizeRem input.form-control {
  max-width: 22em;
}
.bottomMin {
  margin: 0 0 6px;
}
.bottomMin .menuSpacesCell {
  margin: 6px 0 0;
}
.bottomMin .menuSpacesCell:first-child {
  margin: -1rem 0 0;
}
tr.invalidity {
  background-color: #ccc !important;
}
tr.invalidity td {
  border-bottom: 1px solid #ddd !important;
}
#SearchOrEditMode {
  background-color: #008be6;
  color: #fff;
  font-size: 18px;
}
.form-check-input:disabled + #file_delete_label {
  opacity: 0.2;
}
.formRight {
  width: 100%;
}
.bannerAreaOuter {
  padding: 2rem;
}
.bannerArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-bottom: -15px;
}
.bannerCell {
  width: calc(33.3333% - 15px);
  margin-left: 15px;
  margin-bottom: 15px;
}
.bannerCell a {
  display: block;
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}
.bannerCell a:hover {
  opacity: 0.8;
}
.bannerCell img {
  width: 100%;
  height: auto;
}
.trialBlock .btnOuter p {
  text-align: left;
}
.randam-course-btn-outer {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.randam-course-btn-outer h2 {
  font-size: 20px;
  line-height: 1.5em;
  padding: 0;
  font-weight: 700;
  text-align: center;
  color: #ff8c0e;
  max-width: 600px;
}
.randam-course-btn-outer h2 span {
  display: inline-block;
  position: relative;
  padding: 0 12px;
}
.randam-course-btn-outer h2 span::before {
  content: "";
  width: 2px;
  height: 1.5em;
  background-color: #ff8c0e;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(-35deg);
  -ms-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
.randam-course-btn-outer h2 span::after {
  content: "";
  width: 2px;
  height: 1.5em;
  background-color: #ff8c0e;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}
.randam-course-btn-outer h2 img {
  width: 35%;
  margin: 0 auto;
}
.randam-course-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 0 0 30px;
  padding: 15px 0;
}
.randam-course-btn button {
  width: 100%;
  max-width: 60px;
  min-width: 60px;
  height: 60px;
  font-size: 0;
  border: none;
  margin: 0 0 0 10px !important;
  background-image: url(../img/luckybtn_entry.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain auto;
  background-color: transparent;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 3px #fff;
  box-shadow: 0 0 0 3px #fff;
}
.randam-course-btn button#luckybtn_middle {
  background-image: url(../img/luckybtn_middle.svg);
}
.randam-course-btn button#luckybtn_advance {
  background-image: url(../img/luckybtn_advance.svg);
}
.randam-course-btn button#luckybtn_english {
  background-image: url(../img/luckybtn_english.svg);
}
.randam-course-btn button:first-child {
  margin: 0 !important;
}
.randam-course-btn button#luckybtn_4_5 {
  background-image: url(../img/luckybtn_4_5.svg);
}
.randam-course-btn button#luckybtn_5 {
  background-image: url(../img/luckybtn_5.svg);
}
.randam-course-btn button#luckybtn_4 {
  background-image: url(../img/luckybtn_4.svg);
}
.randam-course-btn button#luckybtn_3 {
  background-image: url(../img/luckybtn_3.svg);
}
.randam-course-btn button#luckybtn_pre2 {
  background-image: url(../img/luckybtn_pre2.svg);
}
.randam-course-btn button#luckybtn_pre2plus {
  background-image: url(../img/luckybtn_pre2plus.svg);
}
.randam-course-btn button#luckybtn_2 {
  background-image: url(../img/luckybtn_2.svg);
}
.randam-course-btn button:first-child {
  margin: 0 !important;
}
@-webkit-keyframes forkanime {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
@keyframes forkanime {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
}
.courseSelect form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.underBtn.plusUnder button,
.underBtn.plusUnder a.btn {
  margin: 4px 5px !important;
}
.underBtn.plusUnder button:disabled {
  background-color: #000 !important;
  opacity: 0.2;
}
.underBtn.plusUnder button:disabled:hover {
  background-color: #000 !important;
  opacity: 0.2 !important;
}
.underBtn.plusUnder .prevCourse {
  background: url(../img/prev_small.svg) no-repeat top 11px left 10px #008be6 !important;
  background-size: 15px auto !important;
  padding-left: 30px;
}
.underBtn.plusUnder .nextCourse {
  background: url(../img/next_small.svg) no-repeat top 11px right 10px #008be6 !important;
  background-size: 15px auto !important;
  padding-right: 30px;
}
.underBtn.plusUnder .prevCourse:hover {
  background-color: #008be6 !important;
  opacity: 0.8 !important;
}
.underBtn.plusUnder .nextCourse:hover {
  background-color: #008be6 !important;
  opacity: 0.8 !important;
}
.underBtn.plusUnder .prevCourse,
.underBtn.plusUnder .nextCourse,
.underBtn.plusUnder .prevCourse:hover,
.underBtn.plusUnder .nextCourse:hover {
  background-color: #5563e1 !important;
}
.typingOrder .underBtn .prevCourse,
.typingOrder .underBtn .nextCourse {
  background-color: #5563e1;
}
.underBtn.plusUnder {
  -webkit-animation: underanime 1.5s ease-in forwards;
  animation: underanime 1.5s ease-in forwards;
  opacity: 0;
  position: relative;
  top: -30px;
  margin: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@-webkit-keyframes underanime {
  0 {
    opacity: 0;
    top: -30px;
  }
  85% {
    opacity: 0;
    top: -30px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes underanime {
  0 {
    opacity: 0;
    top: -30px;
  }
  85% {
    opacity: 0;
    top: -30px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
.typingOrder .underBtn {
  opacity: 0;
  -webkit-animation: prevnextanime 1.2s ease-in forwards;
  animation: prevnextanime 1.2s ease-in forwards;
  top: 30%;
}
@-webkit-keyframes prevnextanime {
  0 {
    opacity: 0;
    top: 30%;
  }
  90% {
    opacity: 0;
    top: 30%;
  }
  100% {
    opacity: 1;
    top: 40%;
  }
}
@keyframes prevnextanime {
  0 {
    opacity: 0;
    top: 30%;
  }
  90% {
    opacity: 0;
    top: 30%;
  }
  100% {
    opacity: 1;
    top: 40%;
  }
}
.typingOrder .underBtn.leftRightBtn.fadesBtn {
  top: 40% !important;
}
.typingOrder .underBtn.plusUnder.fadesBtn {
  opacity: 1 !important;
}
.contestTitle {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin-top: -20px;
  margin-bottom: 0;
}
.contestTitle .infotext {
  margin-left: 0;
  margin-right: 1em;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.contestTitle .infotext p.largeTexts {
  border: none;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  color: #008be6;
}
.contestTitle .infotext p.largeTexts span {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2em;
  margin-top: 0.7em;
  margin-right: 0.5em;
  background-color: #008be6;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.35em;
  min-width: 4em;
  text-align: center;
  -webkit-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.contestTitle .infotext p.largeTexts strong {
  font-size: 30px;
  line-height: 1.4em;
  font-weight: 700;
}
.startBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.startBtn img {
  width: 60px;
  margin-left: 10px;
}
.startBtn .btn {
  font-size: 20px;
  border: 3px #fff solid;
  -webkit-box-shadow: 0 0 0 5px #ff3f00;
  box-shadow: 0 0 0 5px #ff3f00;
  padding: 0.6em 1em 0.6em 1.8em;
  height: auto;
  border-radius: 28px;
  background: url(../img/link_right_white.svg) no-repeat top 15px left 0.8em #ff3f00;
  background-size: 16px auto;
}
.scoreMessage {
  width: 100%;
}
.scoreMessage .btn {
  margin-right: 15px;
}
.contest-demo-news,
.contest-news {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 4px #ddd solid;
  border-radius: 10px;
  padding: 0.68em;
  font-weight: 500;
}
.contest-news {
  margin-top: 10px;
}
table.table input[type="submit"] {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
table.table input[type="submit"].btn.btn-secondary,
table.table input[type="submit"].btn.btn-primary {
  text-align: center;
  text-decoration: none;
}
header.contestPage {
  background-color: #008be6;
}
header.contestPage ul.freePageHeadBtn li {
  border-left: 1px #fff solid;
  border-right: 1px #fff solid;
}
header.contestPage ul.freePageHeadBtn li a {
  color: #fff;
  background: url(../img/link_right_white.svg) no-repeat top 0.4em left 0.3em;
  background-size: 14px auto;
}
.contestBtnOuter {
  background-color: #f5f5f5;
}
.contestInput {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px #ccc dashed;
  padding: 0 0 5px;
}
.contestInput:first-child {
  border-top: 1px #ccc dashed;
  padding-top: 5px;
}
.contestInput label {
  font-size: 16px;
  line-height: 1.4em;
  min-width: 7em;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.contestInput select {
  font-size: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: calc(100% - 7em);
  margin: 6px 0;
  padding: 8px;
  background-color: #f5f5f5;
  width: 100%;
  max-width: 500px;
  font-size: 16px;
  border-radius: 8px;
  border: 4px #ddd solid;
}
.contestInput small {
  display: inline-block;
}
.startTexts p {
  text-align: center !important;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  border: 4px #ddd solid;
  padding: 5px 15px;
  border-radius: 8px;
  position: relative;
}
.startTexts p:before {
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom-width: 0;
  bottom: -5px;
  content: "";
  display: block;
  right: 30%;
  position: absolute;
  width: 0;
  z-index: 1;
}
.startTexts p:after {
  border: 10px solid transparent;
  border-top-color: #ddd;
  border-bottom-width: 0;
  bottom: -10px;
  content: "";
  display: block;
  right: 30%;
  position: absolute;
  width: 0;
}
.btnCours button.btn-danger {
  min-width: 7em;
}
button,
input {
  outline: none;
}
table.contestTable tr td {
  padding: 0.6em 0.5em !important;
  line-height: 1.5em;
}
table.contestTable tr td:first-child {
  text-align: center;
  font-size: 13px !important;
  vertical-align: middle;
  font-weight: 500;
  width: 6em;
  border-left: 1px #ddd solid;
  border-right: 1px #ddd solid;
}
table.contestTable tr td:last-child {
  font-size: 15px !important;
  border-right: 1px #ddd solid;
  vertical-align: middle;
}
table.contestTable tr:last-child td {
  border: none;
  border-top: 1px #ddd solid;
  background-color: #fff;
}
table.contestTable .underBtn button {
  color: #008be6;
  background-color: #fff;
  border: 1px #008be6 solid;
  height: auto;
  padding: 0.5em 2em;
  margin-top: 5px;
}
#btnarrow {
  position: absolute;
  z-index: 2;
  top: 200px;
  right: 24%;
  width: 100px;
}
#contest_typingtest_caution_btn:hover {
  background-color: #fff !important;
  border-color: #008be6 !important;
}
.freePageBlock:has(.acting) {
  background-color: #008be6 !important;
}
/* ランキングスタジアム */
.menuSpaces .battleBtnArea {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 0;
}
.menuSpaces .battleBtn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 160px;
  height: 42px;
  display: block;
  background: url(../img/typingstudium/ls_logo.webp) no-repeat left top;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
}
.menuSpaces .battleBtn::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  -webkit-transform: scale(2) rotate(20deg);
  -ms-transform: scale(2) rotate(20deg);
  transform: scale(2) rotate(20deg);
  background-image: -o-linear-gradient(350deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  -webkit-animation-name: shiny;
  animation-name: shiny;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
.tsicons {
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border-radius: 50%;
  overflow: hidden;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  border: 1px #daf0fc solid;
  background-color: #dee2e6;
  background-image: url(../img/typingstudium/rsicon_noimage.webp);
}
/* デフォルト */
.tsi_default {
  background-image: url(../img/typingstudium/rsicon_default.webp);
}
/* レッド */
.tsi_red {
  background-image: url(../img/typingstudium/rsicon_red.webp);
}
/* ピンク */
.tsi_pink {
  background-image: url(../img/typingstudium/rsicon_pink.webp);
}
/* ブルー */
.tsi_blue {
  background-image: url(../img/typingstudium/rsicon_blue.webp);
}
/* イエロー */
.tsi_yellow {
  background-image: url(../img/typingstudium/rsicon_yellow.webp);
}
/* ホワイト */
.tsi_white {
  background-image: url(../img/typingstudium/rsicon_white.webp);
}
/* グリーン */
.tsi_green {
  background-image: url(../img/typingstudium/rsicon_green.webp);
}
/* ブラック */
.tsi_black {
  background-image: url(../img/typingstudium/rsicon_black.webp);
}
table.tstable#twolineLeftth th {
  width: 18%;
  min-width: 220px;
  background-color: #fff;
  color: #666;
}
table.tstable#twolineLeftth td {
  background-color: #fff;
  border-bottom: 1px #ddd solid;
}
.nickname {
  margin: 10px 0 15px;
  width: 100%;
}
.nicknameInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: auto;
  max-width: 500px;
}
.nicknameText {
  font-size: 14px;
  line-height: 1.4em;
  font-weight: 700;
  margin-right: 15px;
  min-width: 6em;
  color: #fff;
  padding: 5px 10px;
  background-color: #ff3f00;
  border-radius: 6px;
  position: relative;
}
.nicknameText::after {
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left-color: #ff3f00;
  border-right-width: 0;
  right: -8px;
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 0;
  padding: 0;
  position: absolute;
  width: 0;
}
.nickname input[type="text"] {
  margin-right: 0;
  max-width: 100%;
  border-color: #ff3f00;
  background-color: #fff;
  font-weight: 700;
  color: #666;
}
.selectChara {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 0 0 -10px;
}
.selectChara .radio-item {
  position: relative;
  text-align: center;
  border-radius: 8px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 10px 0;
  width: calc(14.2857% - 10px);
  border: 1px #ddd solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.selectChara label {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  margin-right: 10px;
  font-size: 15px;
  line-height: 1.4em;
  font-weight: 700;
  display: inline-block;
  text-align: left;
}
.selectChara input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.selectChara label::before,
.selectChara label::after {
  content: "";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 3px;
}
.selectChara label::before {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  left: 5px;
}
.selectChara label::after {
  background-color: #ddd;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: 9px;
  top: 7px;
}
.selectChara span {
  display: block;
  margin-bottom: 8px;
}
.selectChara img {
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}
.selectChara input:checked + label::after {
  background-color: #ff3f00;
}
.radio-item:has(input:checked) img {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.selectChara .radio-item:has(#radio-green):has(input:checked) {
  background-color: #d6efb4;
}
.selectChara .radio-item:has(#radio-blue):has(input:checked) {
  background-color: #bdddf7;
}
.selectChara .radio-item:has(#radio-pink):has(input:checked) {
  background-color: #ffc5e2;
}
.selectChara .radio-item:has(#radio-red):has(input:checked) {
  background-color: #ffce94;
}
.selectChara .radio-item:has(#radio-white):has(input:checked) {
  background-color: #d9f8f8;
}
.selectChara .radio-item:has(#radio-yellow):has(input:checked) {
  background-color: #fff4a3;
}
.selectChara .radio-item:has(#radio-black):has(input:checked) {
  background-color: #ddd;
}
table.tablethfead .selectChara .radio-item {
  width: calc(25% - 10px);
}
.eikenInfos {
  text-align: center;
}
.eikenInfos h2 {
  font-size: 30px;
  line-height: 1.4em;
  margin-bottom: .5em;
  font-weight: 900;
  color: #2b369c;
}
.eikenInfosBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -10px;
}
.eikenInfosBlockCell {
    width: calc(33.3333% - 10px);
margin-left: 10px;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
border: 1px #ddd solid;
border-radius: 10px;
overflow: hidden;
}
.eikenInfosBlockCell h3 {
    font-size: 22px;
  line-height: 1.4em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding: 5px 10px!important;
  display: block;
  padding-bottom: .2em;
  background-color: #5563e1;
}
.eikenInfosBlockCell:nth-child(2) h3 {
  background-color: #34a664;
}
.eikenInfosBlockCell:nth-child(3) h3 {
  background-color: #ff7700;
}
.eikenInfosBlockCell p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6em;
    padding: 5px;
    font-weight: 700;
    color: #666;
}
.navOuters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:stretch;
      -ms-flex-pack:stretch;
          justify-content:stretch;
margin-left: -10px;
}
.navInners {
    max-width: 100%;
  margin-left: 5px;
    width: calc(33.3333% - 5px);
    -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.navOuters .nav.nav-pills.nav-fill {
  width: 100%;
  margin-left: 0;
 margin-right: 0;
 -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
.navOuters .nav.nav-pills.nav-fill .nav-item {
  width: auto !important;
  max-width: 100%;
  min-width: 3.5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 5px;
  margin-left: 5px !important;
}
.navOuters .nav.nav-pills.nav-fill .nav-item a {
color: #5563e1;
}
.navOuters .navInners:nth-child(2) .nav-link {
color: #34a664!important;
}
.navOuters .navInners:nth-child(3) .nav-link {
color: #ff7700!important;
}
.navOuters .nav.nav-pills.nav-fill .nav-link.active {
  color: #fff;
}
.navOuters .nav.nav-pills.nav-fill:last-child .nav-item {
    width: calc(20% - 5px)!important;
}
.navOuters .navInners:nth-child(2) .nav-pills .nav-link.active,
.navOuters .navInners:nth-child(2) .nav-pills .show > .nav-link {
  background-color: #34a664;
  color: #fff!important;
}
.navOuters .navInners:nth-child(3) .nav-pills .nav-link.active,
.navOuters .navInners:nth-child(3) .nav-pills .show > .nav-link {
  background-color: #ff7700;
  color: #fff!important;
}
.navOuters .navInners:nth-child(2) .nav-pills::before {
  border-bottom-color: #34a664;
}
.navOuters .navInners:nth-child(3) .nav-pills::before {
  border-bottom-color: #ff7700;
}
.tab-content [class*="english"] table {
  border-color: #34a664;
}
.tab-content  [class*="english"] table th {
  background-color: #34a664;
}
.tab-content [class*="eiken"] table {
  border-color: #ff7700;
}
.tab-content  [class*="eiken"] table th {
  background-color: #ff7700;
}
.tab-content [class*="test"] table {
  border-color: #d49b29;
}
.tab-content  [class*="test"] table th {
  background-color: #d49b29;
}
.tab-content [class*="test"] table {
  border-color: #d49b29;
}
.tab-content  [class*="add"] table th {
  background-color: #f34580;
}
.tab-content [class*="add"] table {
  border-color: #f34580;
}
.paid-modal {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 40;
}
.paid-modal::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  opacity: 0.5;
}
.paid-modal-card {
    position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: 50;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 80%;
  min-width: 400px;
  max-width: 580px;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 20px;
  margin: auto;
}
.paid-modal-card .paid-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px #ddd solid;
  font-size: 18px;
  line-height: 1em;
  color: #666;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  z-index: 2;
}
.paid-modal-card h2 {
  font-size: 24px;
  line-height: 1.5em;
  margin-bottom: .4em;
  font-weight: 800;
  text-align: center;
  position: relative;
}
.paid-modal-card h2::before {
  content: "";
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
    background: url(../img/key.svg) no-repeat center #bdddf7;
  background-size: auto 70% ;
  margin:0 auto 10px;
}
.paid-modal-card p {
  font-size: 16px;
  line-height: 1.7em;
  text-align: center;
  margin-bottom: 1em;
}
.paid-plan-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -10px;
  text-align: center;
}
.paid-plan-buttons a {
  display: block;
    width: calc(50% - 10px);
  margin-left: 10px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px 25px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6em;
  border-radius: 10px;
      background: url(../img/next_small.svg) no-repeat right 10px center #ff8c0e;
  background-size: 20px auto ;
}
.paid-plan-buttons a:first-child {
  background-color: #6fb82c;
}
.paid-plan-buttons a span {
  display: block;
}
.paid-plan-buttons a strong {
  font-size: 20px;
}
.btnOuter:has(.ibLogos) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 15px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.ibLogos {
  max-width: 320px;
  width: 45%;
  min-width: 280px;
  margin:0 20px 0 0;
}
.ibLogos img {
  width: 100%;
  height: auto;
}
.student-name-with-score {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.student-name-with-score .student-score-btn {
min-width: 5em;
}
@media (hover: hover) and (pointer: fine) and (min-width: 599px) {
  .randam-course-btn button:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  .randam-course-btn button.active {
    -webkit-animation: forkanime 0.5s linear 3;
    animation: forkanime 0.5s linear 3;
  }
  .startBtn .btn:hover {
    border: 3px #fff solid !important;
    background-color: #ff3f00 !important;
    opacity: 1;
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
  }
  #contest_typingtest_caution_btn:hover {
    opacity: 0.8 !important;
  }
  .chgBtnMore button,
  button.chgBtn,
  .paid-plan-buttons a {
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  .chgBtnMore button:hover,
  button.chgBtn:hover,
  .paid-plan-buttons a:hover {
    opacity: 0.8;
  }
}
/* 縦画面 */
@media (orientation: portrait) {
  body > div#app,
  .freel-main {
    min-width: 100%;
    max-height: 100vh;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
  }
  .freel-main {
    top: 0;
    position: fixed;
  }
  body > div#app.freePageBlock {
    max-height: 100% !important;
    overflow: inherit !important;
  }
  #app::before,
  .freel-main::before {
    content: "横画面でご覧ください";
    background: url(../img/logo.svg) no-repeat top center;
    background-size: 300px auto;
    width: 96%;
    height: 88px;
    display: block;
    margin-bottom: 10em;
    position: absolute;
    z-index: 101;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 100px;
    top: 40%;
    font-size: 20px;
    line-height: 1.5em;
    text-align: center;
  }
  .freel-main::before {
    position: fixed;
  }
  #app::after,
  .freel-main::after {
    content: "";
    font-size: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 100;
  }
  .freel-main::after {
    position: fixed;
  }
  body > div#app.freePageBlock::before,
  body > div#app.freePageBlock::after {
    display: none;
  }
}
@media (max-width: 480px) {
  #app::before,
  .freel-main::before {
    font-size: 18px;
    white-space: pre;
    content: "キーボードを接続したタブレット、\Aまたはパソコンでご覧ください";
    background-size: 150px auto;
    height: 44px;
    padding-top: 60px;
  }
}
@media (max-width: 1124px) {
  body > div#app.freePageBlock,
  body > div#app.freePageBlock #headerInner {
    min-width: 100%;
  }
  /* Smartphone Navi */
  .naviOut {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .navOpen #nav {
    opacity: 1;
    right: 0;
  }
  .navBtn {
    display: block;
    width: 30px;
    height: 25px;
    position: fixed;
    top: 25px;
    right: 30px;
    cursor: pointer;
    z-index: 1000000000;
    padding: 7px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .navOpen .navBtn {
    position: fixed;
  }
  .navBtn span {
    display: block;
    height: 1px;
    width: 100%;
    background: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-top: 2px;
  }
  .navBtn span:nth-of-type(2) {
    margin-top: 6px;
  }
  .navOpen .navBtn span:nth-of-type(1) {
    margin-top: 0;
    -webkit-transform: translateY(6px) translateX(0) rotate(30deg);
    -ms-transform: translateY(6px) translateX(0) rotate(30deg);
    transform: translateY(6px) translateX(0) rotate(30deg);
  }
  .navOpen .navBtn span:nth-of-type(2) {
    -webkit-transform: translateY(-1px) translateX(0) rotate(-30deg);
    -ms-transform: translateY(-1px) translateX(0) rotate(-30deg);
    transform: translateY(-1px) translateX(0) rotate(-30deg);
  }
  .navOpen .freenav {
    opacity: 1;
    right: 0;
  }
  .freenav {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 300px;
    height: 100%;
    padding: 60px 15px 20px;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    opacity: 0;
    z-index: 9999;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .outerBtn {
    margin: 20px 0 0;
    display: block;
  }
  .outerBtn a {
    margin: 0 0 10px;
    display: block;
    max-width: 26em;
    background: url(../img/link_right_white.svg) no-repeat top 0.6em left 0.8em #ff8c0e;
    background-size: 12px auto;
    padding: 0.4em 1em 0.4em 2em;
  }
  ul.freePageHeadBtn {
    display: block;
    margin: 0;
  }
  ul.freePageHeadBtn li {
    margin: 0 0 1em;
    border: none;
    display: block;
    text-align: left;
  }
  ul.freePageHeadBtn li a {
    text-align: left;
    padding: 0.1em 0.75em 0.1em 1.3em;
    background: url(../img/link_right_white.svg) no-repeat top 0.3em left;
    background-size: 14px auto;
  }
  header.contestPage .navBtn span {
    background: #fff;
  }
  header.contestPage .navOpen .navBtn span {
    background: #444;
  }
  header.contestPage ul.freePageHeadBtn li {
    border: none;
  }
  header.contestPage ul.freePageHeadBtn li a {
    color: #444;
    background: url(../img/link_right_orange.svg) no-repeat top 0.4em left 0.3em;
    background-size: 14px auto;
  }
  .startBtn .btn {
    font-size: 16px;
    background-position: top 14px left 0.8em;
    background-size: 14px auto;
    padding-left: 1.9em;
  }
  .contestTitle .infotext p.largeTexts strong {
    font-size: 26px;
  }
  .selectChara .radio-item {
    width: calc(20% - 10px);
  }
}
@media (max-width: 880px) {
  .randam-course-btn-outer {
    display: block;
  }
  .randam-course-btn {
    margin: 0;
  }
  #btnarrow {
    right: 15%;
    width: 80px;
  }
  .infoBox:has(.infoBoxImage span) {
display: block;
}
.infoBoxImage:has(span) {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -10px;
  margin-top: 15px;
}
.infoBoxImage.ibiSmall {
  width: 50%;
margin-left: auto;
margin-right: auto;
}
.btnOuter:has(.ibLogos) {
  display: block;
    margin-top: 25px;
}
.ibLogos {
  max-width: 320px;
  width: 45%;
  min-width: 280px;
  margin:0 auto;
}
}
.nav-fill {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: -5px;
  margin-left: -5px;
}
.nav-pills::before {
  width: calc(100% - 5px);
  left: 5px;
}
.nav-fill .nav-item {
  width: calc(11% - 5px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 5px;
  margin-left: 5px !important;
}
.nav-fill .nav-item a {
  min-height: 3em;
}
@media (max-width: 1024px) {
  .nav-fill .nav-item {
    width: calc(15% - 5px);
  }
  .eikenInfos {
  margin-bottom: -10px;
}
.eikenInfos h2 {
  font-size: 24px;
}
.eikenInfosBlockCell h3 {
    font-size: 17px;
}
.eikenInfosBlockCell p {
  font-size: 14px;
}
}
@media (max-width: 680px) {
  body > div#app.freePageBlock {
    max-height: 100% !important;
    overflow: inherit !important;
  }
  body > div#app.freePageBlock::before,
  body > div#app.freePageBlock::after {
    display: none;
  }
  .navBtn {
    top: 17px;
    right: 15px;
  }
  header.freePage {
    margin-bottom: 15px;
  }
  .freePage h1 {
    width: 38%;
    max-width: 150px;
    margin-right: 10px;
  }
  .freePage .navbar-brand {
    margin: 0;
    background: url(../img/logo.svg) no-repeat left center;
    background-size: 100% auto;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 29.2%;
  }
  .freePage #headerInner {
    min-width: 100%;
    padding: 8px 15px;
  }
  .freePage p {
    font-size: 10px;
    margin: 0;
    padding: 0.4em;
  }
  .mainBlock.freeTop {
    display: none;
  }
  .freePageBlock .mainBlock {
    padding: 15px;
  }
  .freePageBlock .container {
    padding: 0 15px 15px;
  }
  .infoTitle {
    font-size: 20px;
    margin-bottom: 0.5em;
  }
  .infoTitle small {
    display: block;
  }
  .infoBlockCell {
    display: block;
    padding: 15px 0;
  }
  .infoBlockCellImage {
    min-width: 60%;
    max-width: 60%;
    padding-top: 60%;
    height: auto;
    margin: 0 auto 12px;
  }
  .btn-link {
    padding: 0.6em 1em 0.6em 2.1em;
    font-size: 1.2em;
    background: url(../img/link_right_white.svg) no-repeat left 0.8em top 15px #ff8c0e;
    background-size: 14px auto;
  }
  .infoBox {
    display: block;
  }
  .infoBoxImage,
  .infoBoxImage02,
  .reverces .infoBoxImage02 {
    width: auto;
    margin: 20px auto 0;
  }
  p.topSpace {
    margin-top: 2em;
  }
  .question .qnaText p {
    font-size: 16px;
  }
  footer {
    padding: 10px 15px;
  }
  ul.footer-contentList {
    display: block;
    border-bottom: 1px #999 solid;
    margin-bottom: 5px;
    padding-bottom: 5px;
  }
  .footer-content li.copyright {
    margin-top: 1em;
    text-align: center;
  }
  #typingSp {
    display: block;
  }
  #typingSp .typingText {
    margin: 0;
    text-align: left;
  }
  #typingSp .typingText p {
    margin: 0;
  }
  h2.ktTitle {
    font-size: 20px;
    margin-bottom: 0.5rem;
  }
  h2.ktTitle::before {
    background: url(../img/cat_white.svg) no-repeat left top;
    background-size: 100% auto;
    width: 20px;
    height: 18px;
    margin-right: 6px;
    margin-top: 6px;
  }
  ul.trialList {
    padding: 10px;
    margin-bottom: 1em;
  }
  ul.trialList li {
    display: block;
  }
  span.trialListTitle {
    display: inline-block;
    margin: 0 0 0.3em;
  }
  span.trialListText {
    display: block;
  }
  table#trialTable th,
  table#trialTable td {
    display: block;
    width: auto;
  }
  table#trialTable th {
    padding-right: 0;
    border-bottom: none;
  }
  table#trialTable td {
    padding: 0 0 0.6em;
  }
  table#trialTable th small {
    margin-top: 0.3em;
    padding-left: 1em;
    text-indent: -1em;
  }
  table#trialPublication th,
  table#trialPublication td,
  table#trialTableList th,
  table#trialTableList td {
    font-size: 14px;
  }
  table#trialPublication th {
    width: 8em;
  }
  table#trialPublication td {
    word-break: break-all;
  }
  .trialInfoRed {
    padding: 10px 10px 10px 55px;
    background: url(../img/exclamation.svg) no-repeat left 10px center;
    background-size: 35px auto;
  }
  .trialInfoRed p {
    font-size: 15px;
    line-height: 1.6em;
  }
  .trialBlock #SubmitButton {
    font-size: 15px;
    height: auto;
    min-height: 45px;
  }
  .bannerAreaOuter {
    padding: 2rem 0 1rem;
  }
  .bannerArea {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
  }
  .bannerCell {
    width: auto;
    margin-left: 0;
  }
  .bannerCell a:hover {
    opacity: 1;
  }
  .btnOuter .form-check-labelOuter .form-check-label {
    text-align: left;
  }
  .infoBoxText p.starsLists {
    display: block;
  }
  .infoBoxText p strong.stars {
    display: block;
  }
  .infoBoxText p strong.stars br {
    display: none;
  }
  .infoBoxText p.starsLists p span {
    display: block;
  }
}
.menuSpacesrev {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
.widthfull {
  width: 100%;
  margin-bottom: 10px;
}
.widthfull .menuSpaces {
  max-width: 340px;
  margin: 0 auto;
}
.soundab {
  max-width: 350px;
  width: 100%;
}
.menuSpacesrev .menuSpaces.rightBox {
  margin-left: 20px;
}
.menuSpacesCell.widthauto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  min-width: 370px;
  margin-right: auto;
  margin-left: auto;
}
.challengeCourseOuter {
  width: 100%;
  font-size: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -12px;
}
.challengeCourse,
.chgBtnMore {
  width: 25%;
  text-align: left;
}
.challengeCourse {
  width: 75%;
  margin-right: 10px;
}
.challengeCourse > div,
.chgBtnMore button {
  border-radius: 26px;
  text-align: left;
}
button.chgBtn,
.chgBtnMore button {
  width: 100%;
  font-weight: 700;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.challengeCourse,
.chgBtnMore {
  position: relative;
}
.chgBtnMore button {
  color: #fff;
  border: 3px #fff solid;
  -webkit-box-shadow: 0 0 0 2px #ddd;
  box-shadow: 0 0 0 2px #ddd;
  padding: 0.4em 34px 0.4em 15px;
  background: url(../img/challengecourse/icon_poppup.svg) no-repeat center right 5px #008be6;
  background-size: 22px auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
button.chgBtn {
  padding: 0.4em 34px;
  border-radius: 26px;
  color: #fff;
  border: 3px #fff solid;
  -webkit-box-shadow: 0 0 0 2px #ddd;
  box-shadow: 0 0 0 2px #ddd;
  background: #00c8ff;
}
.medaru-kin button.chgBtn,
.challengeCourseModal > .medaru-kin {
  background-color: rgb(207, 154, 24);
  background: -o-linear-gradient(160deg, rgba(207, 154, 24, 1) 23%, rgba(255, 212, 0, 1) 42%, rgba(207, 154, 24, 1) 72%);
  background: linear-gradient(-70deg, rgba(207, 154, 24, 1) 23%, rgba(255, 212, 0, 1) 42%, rgba(207, 154, 24, 1) 72%);
  text-shadow: 0 2px 0 #c69300, 2px 0 0 #c69300, 0 -2px 0 #c69300, -2px 0 0 #c69300, -2px -2px 0 #c69300, 2px -2px 0 #c69300, -2px 2px 0 #c69300, 2px 2px 0 #c69300;
}
.medaru-gin button.chgBtn,
.challengeCourseModal > .medaru-gin {
  background: rgb(144, 147, 148);
  background: -o-linear-gradient(160deg, rgba(144, 147, 148, 1) 23%, rgba(228, 228, 228, 1) 42%, rgba(144, 147, 148, 1) 72%);
  background: linear-gradient(-70deg, rgba(144, 147, 148, 1) 23%, rgba(228, 228, 228, 1) 42%, rgba(144, 147, 148, 1) 72%);
  text-shadow: 0 2px 0 #909394, 2px 0 0 #909394, 0 -2px 0 #909394, -2px 0 0 #909394, -2px -2px 0 #909394, 2px -2px 0 #909394, -2px 2px 0 #909394, 2px 2px 0 #909394;
}
.medaru-dou button.chgBtn,
.challengeCourseModal > .medaru-dou {
  background: rgb(161, 65, 6);
  background: -o-linear-gradient(160deg, rgba(161, 65, 6, 1) 23%, rgba(210, 164, 136, 1) 42%, rgba(161, 65, 6, 1) 72%);
  background: linear-gradient(-70deg, rgba(161, 65, 6, 1) 23%, rgba(210, 164, 136, 1) 42%, rgba(161, 65, 6, 1) 72%);
  text-shadow: 0 2px 0 #a14106, 2px 0 0 #a14106, 0 -2px 0 #a14106, -2px 0 0 #a14106, -2px -2px 0 #a14106, 2px -2px 0 #a14106, -2px 2px 0 #a14106, 2px 2px 0 #a14106;
}
.medaru-diamond button.chgBtn,
.challengeCourseModal > .medaru-diamond {
  background: rgb(0, 166, 253);
  background: -o-linear-gradient(160deg, rgba(0, 166, 253, 1) 23%, rgba(212, 244, 255, 1) 42%, rgba(0, 166, 253, 1) 72%);
  background: linear-gradient(-70deg, rgba(0, 166, 253, 1) 23%, rgba(212, 244, 255, 1) 42%, rgba(0, 166, 253, 1) 72%);
  text-shadow: 0 2px 0 #00a6fd, 2px 0 0 #00a6fd, 0 -2px 0 #00a6fd, -2px 0 0 #00a6fd, -2px -2px 0 #00a6fd, 2px -2px 0 #00a6fd, -2px 2px 0 #00a6fd, 2px 2px 0 #00a6fd;
}
button.chgBtn::before,
.challengeCourseModal > div::before {
  content: "";
  width: 28px;
  height: 28px;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(../img/challengecourse/icon_get.svg) no-repeat center;
  background-size: contain;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.challengeCourseModal > div::before {
  width: 34px;
  height: 34px;
  background: none;
}
.medaru-kin button.chgBtn::before,
.medaru-gin button.chgBtn::before,
.medaru-dou button.chgBtn::before,
.challengeCourseModal > .medaru-kin::before,
.challengeCourseModal > .medaru-gin::before,
.challengeCourseModal > .medaru-dou::before {
  background-image: url(../img/challengecourse/icon_medal.svg);
}
.challengeCourseModal > .medaru-diamond::before,
.medaru-diamond button.chgBtn::before {
  background-image: url(../img/challengecourse/icon_diamond.svg);
}
button.chgBtn::after {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(../img/link_right_white.svg) no-repeat center;
  background-size: contain;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}
.challengeCourse::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  -webkit-transform: scale(2) rotate(20deg);
  -ms-transform: scale(2) rotate(20deg);
  transform: scale(2) rotate(20deg);
  background-image: -o-linear-gradient(350deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  -webkit-animation-name: shiny;
  animation-name: shiny;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
.modal-content:has(.challengeCourseModal) {
  background-color: #00c8ff;
}
.modal-content:has(.challengeCourseModal) .modal-header {
  padding: 0 !important;
  margin-bottom: 10px !important;
}
.modal-content:has(.challengeCourseModal) .modal-header h5 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
}
.modal-content:has(.challengeCourseModal) .modal-header h5::before {
  content: "";
  width: 300px;
  height: 38px;
  margin: auto;
  display: inline-block;
  background: url(../img/challengecourse/cclisttitle.svg) no-repeat center;
  background-size: contain;
}
.challengeCourseModal > div {
  background-color: #fff;
  opacity: 0.3;
  padding: 0.3em;
  margin: 0 0 6px;
  border-radius: 6px;
  color: #bbb;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  border: 2px #fff solid;
}
.challengeCourseModal > .medaru-diamond,
.challengeCourseModal > .medaru-kin,
.challengeCourseModal > .medaru-gin,
.challengeCourseModal > .medaru-dou {
  color: #fff;
  opacity: 1;
}
.challengeCourseModal > div::after {
  content: "";
  position: absolute;
  right: 8px;
  font-size: 14px;
  background-color: #fff;
  padding: 0 0.4em;
  border-radius: 6px;
  text-shadow: none;
}
.challengeCourseModal > .medaru-diamond::after {
  content: "最高得点！ダイヤ！";
  color: #00a6fd;
}
.challengeCourseModal > .medaru-kin::after {
  content: "びっくり！金メダル！";
  color: #c69300;
}
.challengeCourseModal > .medaru-gin::after {
  content: "すごい！銀メダル！";
  color: #909394;
}
.challengeCourseModal > .medaru-dou::after {
  content: "やった！銅メダル！";
  color: #a14106;
}

.navbar-brand {
  background-image: url(../img/logo_eng.svg);
}
header {
  background-color: rgba(0, 0, 0, 0.15);
}
.headerInfo {
  color: #fff;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  background: url(../img/e-typingbg.webp) left top / 500px auto !important;
}
.mainBlock:has(.teacher-top) {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 0 0 7px #fff;
  box-shadow: 0 0 0 7px #fff;
  border-radius: 20px;
}
.mainBlock .mainBlock {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.randam-course-btn {
  padding: 0 0 10px;
}
.randam-course-btn-outer h2 {
  background-color: #2b369c;
  padding: 0.3em;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 16px;
  border: 5px #fff solid;
  color: #fff;
}
.typingText p {
  color: #2b369c;
  border-color: #2b369c;
}
.randam-course-btn-outer h2 span::before {
  content: none;
}
.randam-course-btn-outer h2 span::after {
  content: none;
}
.tab-content .table {
  background-color: #fff;
}
.nav-link {
  color: #5563e1;
  background-color: #fff;
}
.nav-link:focus,
.nav-link:hover {
  color: #5563e1;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #5563e1;
}
.nav-pills::before {
  border-bottom-color: #5563e1;
}
.tab-content table {
  border-color: #5563e1;
}
.tab-content table th {
  background-color: #5563e1;
}
table tr:nth-child(even) {
  background: #f5f5f5;
}
section.l-main .breadcrumb-item:first-child a,
.typingbc .breadcrumb-item:first-child a,
.typingbc .breadcrumb-item:first-child button {
  background-color: #5563e1;
}
.c-table table thead th {
  background-color: #5563e1;
  border-radius: 6px;
}
.p-typingresult__card h3 {
  background-image: url(../img/resultpp.svg);
}
.p-typingresult__card li {
  background-color: #5563e1;
}
.tab-content table td.non-active input[type="submit"] {
  display: inline-block;
  width: auto;
  margin-right: 10px;
  text-decoration: none;
  color: #bbb;
}
.tab-content table td.non-active {
  position: relative;
}
.tab-content table td.non-active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.tab-content table td.non-active::after {
  content: "";
  display: inline-block;
  background: url(../img/key.svg) no-repeat left top;
  background-size: auto 100%;
  width: 25px;
  height: 20px;
  position: relative;
  top: 3px;
  left: 5px;
}
.nav-fill.forschool {
  margin-top: -13px;
  margin-left: -13px;
}
.nav-fill.forschool > .nav-item a {
  padding: 0.2rem;
}
.nav-fill.forschool .nav-item {
  max-width: calc(14.2857% - 13px)!important;
  width: calc(14.2857% - 13px)!important;
  margin-top: 13px;
  margin-left: 13px !important;
}
.nav-pills.forschool::before {
  content: none;
}
.nav-pills.forschool .nav-link {
  border-radius: 10px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #fff;
  color: #5563e1;
    -webkit-box-shadow: 0 0 0 4px #5563e1;
  box-shadow: 0 0 0 4px #5563e1;
}
.nav-pills.forschool .nvc02 .nav-link {
  color: #d49b29;
    -webkit-box-shadow: 0 0 0 4px #d49b29;
  box-shadow: 0 0 0 4px #d49b29;
}
.nav-pills.forschool .nvc03 .nav-link {
  color: #f34580;
    -webkit-box-shadow: 0 0 0 4px #f34580;
  box-shadow: 0 0 0 4px #f34580;
}
.nav-pills.forschool .nvc04 .nav-link {
  color: #34a664;
    -webkit-box-shadow: 0 0 0 4px #34a664;
  box-shadow: 0 0 0 4px #34a664;
}
.nav-pills.forschool .nvc05 .nav-link {
  color: #ff7700;
    -webkit-box-shadow: 0 0 0 4px #ff7700;
  box-shadow: 0 0 0 4px #ff7700;
}
.nav.nav-pills.nav-fill.forschool .nav-link.active {
  background-color: #5563e1;
  color: #fff;
    -webkit-box-shadow: 0 0 0 4px #fff;
  box-shadow: 0 0 0 4px #fff;
}
.nav.nav-pills.nav-fill.forschool .nvc02 .nav-link.active {
  background-color: #d49b29;
}
.nav.nav-pills.nav-fill.forschool .nvc03 .nav-link.active {
  background-color: #f34580;
}
.nav.nav-pills.nav-fill.forschool .nvc04 .nav-link.active {
  background-color: #34a664;
}
.nav.nav-pills.nav-fill.forschool .nvc05 .nav-link.active {
  background-color: #ff7700;
}
.premium .c-table__container__space {
  padding: 0.4rem;
}
p.mails {
  text-align: center;
  margin:1em 0 0;
}
p.mails a {
  display: inline-block;
   background: url(../img/mail.svg) no-repeat left top 2px;
  background-size: 18px auto ;
  padding-left: 22px;
}