body {
  font-size: 16px !important;
}

main {
  padding-top: 24px;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
}

#content {
  font-size: 75%;
}

#content h4.square {
  font-size: 134%;
}

#content .headingArea {
  display: flex;
  margin-bottom: 20px;
}

#content .headingArea .logo {
  width: 45%;
  margin-right: 10px;
}

#content .headingArea img {
  width: 100%;
  height: auto;
}

#content .headingArea .greyLine {
  width: 55%;
  border-bottom: #ddd 3px solid;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.square:before {
  content: "■";
  margin-right: 0.3em;
  color: #00822d;
}

.mainCont {
  float: left;
  margin-right: 50px;
  width: 600px;
}

.mainCont a {
  color: #557cfd;
  text-decoration: none;
}

.mainCont a:hover {
  color: #557cfd !important;
  text-decoration: underline;
}

.mainCont .imgArea {
  text-align: center;
}

.mainCont .imgArea img {
  width: 80%;
}

.schoolInfoWrap {
  margin-bottom: 50px;
}

.schoolInfoWrap a {
  color: #626262;
  font-size: 12px;
  vertical-align: middle;
}

.schoolInfoWrap a:hover {
  color: #00822d;
}

.paersonPhoto {
  float: left;
  margin-right: 10px;
}

.schoolInfo {
  float: left;
}

.schoolInfo dt {
  border-bottom: #e0e0e0 dotted 2px;
  margin-bottom: 8px;
}

.schoolInfo dd {
  margin-bottom: 16px;
}

.schoollName {
  font-size: 130%;
  margin-right: 16px;
}

.schoolMessage {
  padding: 20px 20px 25px;
  background: #fbfbe8;
}

.schoolAddr {
  display: block;
  border-top: #dedede dotted 2px;
  margin-top: 5px;
}

.schoolAddr dt {
  float: left;
  clear: both;
  padding: 10px 0;
}

.schoolAddr dd {
  padding: 10px 0 10px 86px;
  border-bottom: #dedede dotted 2px;
}

.schoolAddr a {
  color: #3c3c3c;
}

ul:not(.browser-default) {
  padding-left: 0;
  list-style-type: none;
}

ul:not(.browser-default) > li {
  list-style-type: none;
}

.proIntroList {
  width: 600px;
}

.proIntroList li {
  width: 132px;
  float: left;
  margin-right: 24px;
  min-height: 265px;
}

.proIntroList li:nth-child(4n) {
  margin-right: 0;
}

.proIntroList dl {
  width: 132px;
}

.proIntroList dt {
  margin-bottom: 5px;
}

.proIntroList dd {
  text-align: center;
  padding: 4px 0;
}

.proIntroList a {
  color: #646464;
  border-bottom: #9e9e9e solid 1px;
}

.proIntroList a img {
  vertical-align: unset;
}

.proIntroList a:hover {
  color: #00822d;
  border-color: #00822d;
  text-decoration: none;
}

.schoolArea {
  display: flex;
  justify-content: space-between;
  margin: 1em 0 30px;
  width: 100%;
}

.schoolArea li {
  width: 284px;
}

.schoolArea li + .schoolArea li {
  margin-left: auto;
}

.schoolAreabox {
  display: block;
}

.schoolAreabox dt,
.schoolAreabox dd {
  display: block;
}

.schoolAreabox dt img {
  display: block;
  max-width: 100%;
  height: auto;
}

.schoolAreabox .textBanner {
  font-size: 2.2em;
  border: solid 2.5px #c8c8c8;
  text-align: center;
  line-height: 74px;
}

.schoolAreabox .textBanner a {
  font-weight: 600;
  color: #2c6237;
  text-decoration: none;
  display: block;
}

.schoolAreabox > dd {
  margin-top: 1em;
}

.coolto {
    text-align: right;
}

.coolto > a {
    color: #646464;
}

div.schoolSearch {
  margin-top: 1em;
  padding-top: 120px;
  margin-top: -120px;
}

.search_tmt {
  position: relative;
  margin-top: 2em;
}

.search_tmt .tableTab {
  display: flex;
  border-bottom: 2px #00822d solid;
}

.search_tmt .tableTab p {
  margin-right: 4px;
  cursor: pointer;
  height: 30px;
}

.search_tmt .tableTab p.tab1,
.search_tmt .tableTab p.tab2 {
  background-color: #e9e9e9;
  box-shadow: none;
  font-size: 14px;
  text-align: center;
  color: #333;
  width: 145px;
}

.search_tmt .tableTab p.tab1.active,
.search_tmt .tableTab p.tab2.active {
  color: #fff;
  background-color: #00822d;
}

.search_tmt .tabText {
  display: inline-block;
  padding-top: 5px;
}

.search_tmt .tabArea {
  width: 100%;
  background: #fbfbe8;
  border-bottom: 2px solid #00822d;
  position: relative;
}

.search_tmt table {
  text-align: center;
  width: 600px;
}

.search_tmt table th {
  background-color: #fffff3;
  border: 1px solid #c8c8c8;
  padding: 10px 13px;
  text-align: center;
}

.search_tmt table td {
  background-color: #fffcfd;
  border: 1px solid #c8c8c8;
  padding: 10px;
}

.search_tmt table a {
  color: #3c3c3c;
  text-decoration: underline;
}

.search_tmt form {
  padding: 30px;
}

.search_tmt input {
  font-size: 100% !important;
  background-color: #fff !important;
  height: 23px !important;
  margin: 0 10px 0 -5px !important;
  width: 230px !important;
  border-style: inset !important;
  border-width: 2px !important;
  border-color: initial !important;
  border-image: initial !important;
}

.prefSelectwrap,
.lessonPlace {
  display: flex;
  margin-bottom: 1em;
}

.selecBox {
  width: 210px;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  padding: 0 12px 0 6px;
  overflow: hidden;
  position: relative;
  background: #fff;
  display: inline-block;
}

.selecBox select {
  width: 130%;
  height: auto;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  color: inherit;
  display: inline-block;
  box-sizing: content-box;
  text-indent: 0.01px;
  font-family: inherit;
  font-size: 100%;
  outline: none;
}

.selecBox::after {
  content: "\f0d7";
  font-family: "FontAwesome";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.inputlabel {
  margin-right: 10px;
  color: #333;
}

.tab1ContIn dl {
  clear: none;
  margin-top: 1em;
}

.tab1ContIn dl div {
  display: flex;
}

.tab1ContIn dl label {
  display: block;
  line-height: 23px;
  color: #333;
}

.tab1ContIn dl input {
  pointer-events: auto !important;
  opacity: 1 !important;
  position: static !important;
  display: block !important;
  width: auto !important;
}

.tab1ContIn dl dt {
  float: left;
  padding-top: 3px;
  margin-bottom: 10px;
  margin-right: 10px;
  clear: both;
}

.tab1ContIn dl dd {
  display: block;
  clear: none;
}

.tab1ContIn dl dd ul {
  display: flex;
}

.tab1ContIn dl li {
  display: flex;
  margin-right: 30px;
}

.search_tmt .search_btn02 {
  text-align: center;
}

.searchBtn {
  padding: 0 7rem !important;
  background-color: #00822d !important;
}

.searchBtn:hover {
  background-color: #2bbbad !important;
}

.downloadArea {
  clear: both;
  margin-top: 50px;
}

.downloadArea .group_title {
  font-size: 14px;
  display: block;
  margin-bottom: 0.5em;
}

.downloadArea .group_title > span {
  margin-right: 10px;
}

.downloadArea .group_title span.group2 {
  margin: 0 15px;
}

.downloadArea .group_area {
  display: flex;
  margin: 7px 0 0 0;
  clear: both;
}

.downloadArea .group_area .group_left {
  float: left;
  text-align: center;
}

.downloadArea .group_contain .group_left a {
    font-size: 14px;
    color: #3c3c3c;
    text-decoration: underline;
}

.downloadArea .group_area .group_left img {
  margin-bottom: 8px;
  height: 170px;
}

.downloadArea .group_area .group_right {
  margin-left: 18px;
  float: right;
}

.downloadArea .group_area .group_right .group_right1 {
  clear: both;
  width: 268px;
  font-size: 1.2em;
  line-height: 20px;
  background: #e9e7cf;
}

.downloadArea .group_area .group_right .group_right1 span {
  display: block;
  float: right;
  width: 31px;
  height: 16px;
  margin: 2px 2px 0 0;
  background: #fff;
  text-align: center;
}

.downloadArea .group_area .group_right .group_right2 {
  clear: both;
  width: 268px;
  margin-top: 8px;
}

.downloadArea .group_area .group_right .group_right2 table {
  width: 100%;
  font-size: 12px;
}

.downloadArea .group_area .group_right .group_right2 th {
  text-align: center;
  background: #d4d1a4;
  border: 1px solid #c8c8c8;
  padding: 2px 0 1px 0;
  vertical-align: middle;
}

.downloadArea .group_area .group_right .group_right2 td {
  padding: 2px 0 1px 0;
  border-left: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
}

.downloadArea .group_area .group_right .group_right2 td.td_end {
  border-right: 1px solid #c8c8c8;
}

.pager li a {
  color: #3c3c3c;
  display: block;
  height: auto;
  width: auto;
  font-weight: bold;
  margin-top: 2px;
}

.pager li a:hover,
.pager li.active a {
  color: #fff !important;
  text-decoration: none;
}

.pager li.next.disabled {
  display: none;
}

.fs12 {
  font-size: 12px;
}

/* ==============================
   Media Queries
============================== */
@media screen and (max-width: 480px) {
  .downloadArea .group_title span {
    display: block;
    clear: both;
    width: 100%;
  }
  .downloadArea .group_title span.group2 {
    margin: 0;
  }
}

@media screen and (max-width: 750px) {
  body {
    min-width: 0;
    font-size: 16px;
  }
  #content {
    font-size: 65%;
  }

  .topCont {
    width: 100%;
  }

  .mainCont {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 39px;
  }

  .mainCont div {
    display: block;
    width: 100%;
  }

  .proIntroList {
    width: 100%;
  }

  .proIntroList li {
    width: 49%;
    display: block;
    margin-right: 2%;
    margin-bottom: 20px;
    min-height: initial;
  }

  .proIntroList li:nth-child(even) {
    margin-right: 0;
  }

  .proIntroList dl {
    margin: 0 auto;
  }

  img {
    width: 100%;
    height: auto;
    line-height: 1;
  }

  .paersonPhoto {
    display: block;
    float: none;
    margin-right: 0;
    max-width: 150px;
    margin: 0 auto;
  }

  .schoolInfo {
    margin-top: 10px;
    float: none;
  }

  .search_tmt {
    width: 100%;
  }

  .search_tmt .tableTab p.active {
    background: #00822d !important;
    color: #fff;
  }

  #content .selecBox {
    width: 80%;
    position: relative;
    display: inline-block;
  }

  #content .selecBox:after {
    position: absolute;
    right: 5px;
    top: 5px;
    content: "\f0d7";
    font: normal normal normal 14px/1 FontAwesome;
    pointer-events: none;
  }

  .shisetuRadioArea dd {
    width: 100%;
  }

  .tab1ContIn dl li {
    margin-right: 8%;
  }

  .tab2Cont {
    overflow: scroll;
  }

  .searchBtn {
    padding: 0 30%;
    background-color: #00822d;
  }

  .downloadArea .group_area {
    display: block;
  }

  .downloadArea .group_area .group_contain {
    width: 100%;
  }

  .downloadArea .group_area .group_contain::after {
    content: "";
    display: block;
    clear: both;
  }

  .downloadArea .group_contain .group_left img {
    width: 50%;
  }
  .schoolArea {
    display: block;
  }
  .schoolArea li {
    width: 100%;
    margin-bottom: 20px;
  }
  .schoolAreabox .textBanner {
    margin-top: 1em;
  }
  .downloadArea .group_area .group_left img {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .dbg_h1_01 {
    margin: 0 0 32px;
  }
  .dbg_h2_01 {
    margin: 28px 0 22px;
  }
  .dbg_h1 {
    font-size: 20px;
    line-height: 28.96px;
  }
}

@media screen and (max-width: 992px) {
  main {
    padding-top: 0;
  }
}