@charset "utf-8";
@import url('fontawesome-free/css/all.css');
@import url('framework.css');

.clear,
.group {
  display: block;
}

.nospace {
  margin: 0;
  padding: 0;
  list-style: none;
}

#navi form * {
  transition: none !important;
}

#navi form {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
#navi form select,
#navi form select option {
  display: block;
  cursor: pointer;
  outline: none;
  color: black;
}
#navi form select {
  width: 100%;
  padding: 5px;
  border: 1px solid;
  color: black;
}
#navi form select option {
  margin: 5px;
  padding: 0;
  border: none;
  color: black;
}

#backtotop {
  z-index: 999;
  display: inline-block;
  position: fixed;
  visibility: hidden;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  text-align: center;
  color: #ffffff;
  background-color: #8ec837;
  opacity: 0.2;
}
#backtotop i {
  display: block;
  width: 100%;
  height: 100%;
  line-height: inherit;
}
#backtotop.visible {
  visibility: visible;
  opacity: 0.5;
}
#backtotop:hover {
  opacity: 1;
}

.row1 {
  color: #474747;
  background-color: #ffffff;
}

.nospace {
  margin: 0;
  padding: 0;
  list-style: none;
}

grid-2 > li {
  margin-bottom: 50px;
}
.grid-2 > li:nth-last-child(-n + 2) {
  margin-bottom: 0;
}
.grid-2 > li:nth-child(2n + 1) {
  margin-left: 20px;
  clear: left;
}

grid-3 > li {
  margin-bottom: 50px;
}
.grid-3 > li:nth-last-child(-n + 3) {
  margin-bottom: 0;
}
.grid-3 > li:nth-child(3n + 1) {
  margin-left: 0;
  clear: left;
}

.grid-4 > li {
  margin-bottom: 50px;
}
.grid-4 > li:nth-last-child(-n + 4) {
  margin-bottom: 0;
}
.grid-4 > li:nth-child(4n + 1) {
  margin-left: 0;
  clear: left;
}

#menublocks {
  display: block;
  position: relative;
  margin: 30px 0 0 0;
  z-index: 1;
  text-align: center;
}
#menublocks figure figcaption > a {
  display: block;
  padding: 15px;
  font-size: 1.2rem;
}

.imgover:hover::before {
  background-color: rgba(142, 200, 55, 0.3); /* #8EC837 */
}
.imgover,
.imgover:hover::after {
  color: #ffffff;
}

.one_two,
.one_third,
.one_quarter {
  display: inline-block;
  margin: 0 0 0 4.21052%;
  list-style: none;
}

.one_two {
  width: 45.78948%;
}
.one_third {
  width: 30.52631%;
}
.one_quarter {
  width: 21.8421%;
}

#mobile_copyright {
  background: #404040;
  color: #ccc;
  padding-top: 20px;
  font-size: 12px;
  line-height: 12px;
  margin-top: 30px;
  text-align: center;
}

@-ms-viewport {
  width: device-width;
}
@media screen and (min-width: 1140px) {
  .hoc {
    max-width: 1140px;
  }
}
@media screen and (min-width: 978px) and (max-width: 1140px) {
  .hoc {
    max-width: 95%;
  }
}
@media screen and (max-width: 978px) {
  .hoc {
    max-width: 90%;
  }
  #navi ul {
    display: none;
  }
  #navi form {
    display: block;
    margin-top: 2px;
  }
}

@media screen and (max-width: 750px) {
  .one_two,
  .one_third,
  .one_quarter {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 30px 0;
  }
  .group .group > *:last-child,
  .group .clear > *:last-child {
    margin-bottom: 0;
  }

  .top {
    display: none;
  }

  #main,
  #main0,
  #main1,
  #main2,
  #area1,
  #area2,
  #area3,
  #part1,
  #part2,
  #part3 {
    display: none;
  }
}

.btn-sec {
  background-color: #6c757d;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-sec:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-sec:focus,
.btn-sec.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-sec.disabled,
.btn-sec:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-prim {
  background-color: #007bff;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-prim:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-prim:focus,
.btn-prim.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-prim.disabled,
.btn-prim:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-succ {
  background-color: #28a745;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-succ:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-succ:focus,
.btn-succ.focus {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
}

.btn-succ.disabled,
.btn-succ:disabled {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-inf {
  background-color: #17a2b8;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-inf :hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-inf :focus,
.btn-inf .focus {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}

.btn-inf .disabled,
.btn-inf :disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-warn {
  background-color: #ffc107;
  border-radius: 2px;
  border: none;
  color: #212529;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-warn:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warn:focus,
.btn-warn.focus {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}

.btn-warn.disabled,
.btn-warn:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-dang {
  background-color: #dc3545;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-dang:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-dang:focus,
.btn-dang.focus {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-dang.disabled,
.btn-dang:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-sec-sm {
  background-color: #6c757d;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 3px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 14px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-sec-sm:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-sec-sm:focus,
.btn-sec-sm.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-sec-sm.disabled,
.btn-sec-sm:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-prim-sm {
  background-color: #007bff;
  border-radius: 2px;
  border: none;
  color: #fff;
  padding: 3px 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 14px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-prim-sm:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
.btn-prim-sm:focus,
.btn-prim-sm.focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-prim-sm.disabled,
.btn-prim-sm:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-ot-primary {
  border-radius: 5px;
  border: 2px solid #007bff;
  color: #007bff;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-primary:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-ot-primary:focus,
.btn-ot-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-ot-primary.disabled,
.btn-ot-primary:disabled {
  color: #007bff;
  background-color: transparent;
}

.btn-ot-secondary {
  border-radius: 5px;
  border: 2px solid #6c757d;
  color: #6c757d;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-ot-secondary:focus,
.btn-ot-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-ot-secondary.disabled,
.btn-ot-secondary:disabled {
  color: #6c757d;
  background-color: transparent;
}

.btn-ot-success {
  border-radius: 5px;
  border: 2px solid #28a745;
  color: #28a745;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-success:hover {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

.btn-ot-success:focus,
.btn-ot-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-ot-success.disabled,
.btn-ot-success:disabled {
  color: #28a745;
  background-color: transparent;
}

.btn-ot-info {
  border-radius: 5px;
  border: 2px solid #17a2b8;
  color: #17a2b8;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-info:hover {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-ot-info:focus,
.btn-ot-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-ot-info.disabled,
.btn-ot-info:disabled {
  color: #17a2b8;
  background-color: transparent;
}

.btn-ot-warning {
  border-radius: 5px;
  border: 2px solid #ffc107;
  color: #cea119;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-warning:hover {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-ot-warning:focus,
.btn-ot-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-ot-warning.disabled,
.btn-ot-warning:disabled {
  color: #ffc107;
  background-color: transparent;
}

.btn-ot-danger {
  border-radius: 5px;
  border: 2px solid #dc3545;
  color: #dc3545;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 15px;
  float: left;
  height: 100%;
  width: auto;
}

.btn-ot-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-ot-danger:focus,
.btn-ot-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-ot-danger.disabled,
.btn-ot-danger:disabled {
  color: #dc3545;
  background-color: transparent;
}