.navbar-dark .navbar-nav .nav-link{
  color:white !important;
}
p {
  font-family: "メイリオ", Meiryo, sans-serif !important;
}
a {
  color: #134D99;
  text-decoration: none !important;
}
.width800 {
  width:800px !important;
}
@media only screen 
  and (max-device-width: 799px) {
.width800 {
  width:100% !important;
}
}
.btn-circle {
  width: 170px;
  height: 170px;
  line-height: 170px;
  text-align: center;
  padding-top: 65px !important;
  border-radius: 50% !important;
}

.text-blue {
  color: #2f5597 !important;
}
.btn-primary {
  background: #deebf7;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#deebf7),
    to(#aad0f5)
  );
  background: -webkit-linear-gradient(top, #ffffff 0%, #deebf7 100%);
  background: linear-gradient(to bottom, #deebf7 0%, #aad0f5 100%);
  color: #000000 !important;
}
.btn-secondary {
  background: #ed7d31;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ed7d31),
    to(#f3dda0)
  );
  background: -webkit-linear-gradient(top, #f3dda0 0%, #ed7d31 100%);
  color: #ffffff !important;
  border: solid #ed7d31 1px !important;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:hover,
.show > .btn-primary.dropdown-toggle {
  border: solid #337fed 1px;
  background: #2f5597;
  background-image: -webkit-linear-gradient(top, #2f5597, #3d94f6);
  background-image: -moz-linear-gradient(top, #2f5597, #3d94f6);
  background-image: -ms-linear-gradient(top, #2f5597, #3d94f6);
  background-image: -o-linear-gradient(top, #2f5597, #3d94f6);
  background-image: -webkit-gradient(to bottom, #2f5597, #3d94f6);
  text-decoration: none;
  color: #ffffff !important;
}
h2 {
  font-size: 30px;
  font-size: 3rem;
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

h2 span {
  font-size: 18px;
  font-size: 1.8rem;
  display: block;
}

h2:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #fa4141;
}
h3 {
  position: relative;
  padding: 1rem .5rem;
}

h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}
h4 {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.5rem 130px;
  border: 2px solid #000;
}

h4:before {
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #000;
}

h4 span {
  font-size: 30px;
  font-size: 3rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 3px;
  padding-left: 16px;
  color: #fff;
}
h5 {
  background-color: #0099cc;
  border-left: 3px solid rgb(2, 22, 59);
  padding-left: 5px;
  color:#FFF;
  overflow-wrap:  break-word;
}
.highlight {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #fffaf0;
}
.textBox {
  border: 2px solid #ff6666;
  border-radius: 5px;
  padding: 30px;
  position: relative;
  background-color: #ffcccc;
}
.textBox::before {
  background-color: #fff;
  color: #ff6666;
  content: "回答欄";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox1 {
  border: 2px solid #99ccff;
  background-color: #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
}
.textBox1::before {
  background-color: #fff;
  color: #2b5199;
  content: "単語入力";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox2 {
  border: 2px solid #ccffff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #ccffff;
}
.textBox2::before {
  background-color: #fff;
  color: #009999;
  content: "言語選択";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox3 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #99ccff;
}
.textBox3::before {
  background-color: #fff;
  color: #2b5199;
  content: "性別（名詞種別）";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox3s {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #99ccff;
}
.textBox3s::before {
  background-color: #fff;
  color: #2b5199;
  content: "名詞種別 読み替え：生物→男性、無生物→中性、集合→女性";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox3n {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #99ccff;
}
.textBox3n::before {
  background-color: #fff;
  color: #2b5199;
  content: "性別（名詞種別）性別選択は名詞で入力の場合のみ可";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox3sn {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #99ccff;
}
.textBox3sn::before {
  background-color: #fff;
  color: #2b5199;
  content: "名詞種別 読み替え：生物→男性、無生物→中性、集合・不可算→女性";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox4 {
  border: 2px solid #ccffff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #ccffff;
}
.textBox4::before {
  background-color: #fff;
  color: #009999;
  content: "数";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox5 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #99ccff;
}
.textBox5::before {
  background-color: #fff;
  color: #2b5199;
  content: "格";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox6 {
  border: 2px solid #ffcccc;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #ffcccc;
}
.textBox6::before {
  background-color: #fff;
  color: #ff6666;
  content: "入力項目";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox7 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #a1b49e;
}
.textBox7::before {
  background-color: #fff;
  color: #2b5199;
  content: "変化種別";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox8 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #a1b49e;
}
.textBox8::before {
  background-color: #fff;
  color: #2b5199;
  content: "人称";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox9 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #9cee90;
}
.textBox9::before {
  background-color: #fff;
  color: #2b5199;
  content: "動詞種別";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox9h {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #d1d890;
}
.textBox9h::before {
  background-color: #fff;
  color: #2b5199;
  content: "語根種別";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox9r {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #eccc86;
}
.textBox9r::before {
  background-color: #fff;
  color: #2b5199;
  content: "語根種別";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox10 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #406b3a;
}
.textBox10::before {
  background-color: #fff;
  color: #2b5199;
  content: "態";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox11 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #3aae95;
}
.textBox11::before {
  background-color: #fff;
  color: #2b5199;
  content: "相";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox12 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #40818d;
}
.textBox12::before {
  background-color: #fff;
  color: #2b5199;
  content: "時制";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox13 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #e864ef;
}
.textBox13::before {
  background-color: #fff;
  color: #2b5199;
  content: "法";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox14 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #e7bfc1;
}
.textBox14::before {
  background-color: #fff;
  color: #2b5199;
  content: "動詞形態";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}
.textBox15 {
  border: 2px solid #99ccff;
  border-radius: 5px;
  padding: 20px 20px 8px 20px;
  position: relative;
  background-color: #ee959a;
}
.textBox15::before {
  background-color: #fff;
  color: #2b5199;
  content: "比較級・最上級";
  font-weight: bold;
  left: 30px;
  padding: 3px 10px;
  position: absolute;
  top: -15px;
}

#input_word::placeholder {
  font-size: 12px;
}

@media (min-width: 768px) { 
  .form-size {
    max-width: 768px !important;
  }
}
.right {
    display: flex;
    justify-content: flex-end;
}
.highlight {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #fffaf0;
}
.pt80 {
  padding-top: 80px!important;
}
.mb0 {
  margin-bottom: 0!important;
}
.align1 {
  text-align: center !important;
}
.sticky_table thead th {
    /* 縦スクロール時に固定する */
    position: -webkit-sticky;
    position: sticky;
    top: 65px;
    /* tbody内のセルより手前に表示する */
    z-index: 1;
}
.title {
  font-family: "メイリオ", Meiryo, sans-serif !important;;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  padding-top:100px;
}
.nav-title {
  font-family: "メイリオ", Meiryo, sans-serif !important;;
}
.table-blue {
  background-color:#aad5ff;
  padding: 10px;
}
.table-skyblue {
  background-color:#aaffff;
  padding: 10px;
}
.table-gray {
  background-color:#dfdfdfaf;
  padding: 10px;
}
.table-white {
  background-color:#fff;
  padding: 10px;
}
.table-green {
  background-color:#66cc66;
  padding: 10px;
}
.table-lightgreen {
  background-color:#90ee90;
  padding: 10px;
}
.table-orange {
  background-color:#ffaa55;
  padding: 10px;
}
.table-lightorange {
  background-color:#ffead5;
  padding: 10px;
}
.table-archaic {
  color: grey !important;
}
.table-extension {
  color: grey !important;
}
.table-optional {
  color: grey !important;
}
  /* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}