@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;800&display=swap');
body{
  font-family: 'M PLUS 1p', sans-serif;
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  color: #555;
}
.spimg{
  display: none;
}
h2.animate__animated{
  font-size: 34px !important;
  line-height: 36px;
  font-family: 'M PLUS 1p', sans-serif;
}
h2.h1,
.title h2, .title .h2{
  font-size: 24px;
  line-height: 38px;
}
.title h2{
  color: green;
}
.nav-item{
  font-size: 16px;
  color: #777;
}
.feature-box .feature-box-title{
  font-size: 18px;
}
.backpadding{
  padding: 10px;
  box-sizing: border-box;
}
.backtransform{
  overflow: hidden;
  height: 100%;
}
.backimg{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  border-radius: 30px 0 30px 0;
/*  transform: rotate(-8deg) translate3d(0, 0, 0);*/
}
.backimg2{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
}
.backimg3{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  height: 100%;
}
.margin-top-50{
  margin-top: 50px;
}
.search-box{
  margin: 30px 0px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0px 0px 40px rgb(83 88 93 / 10%);
}
.btns_area .btns,
.search-box .btns{
  max-width: 300px;
  border: 1px solid #777;
  border-radius: 5px;
  padding: 3px 10px;
  color: #fff;
  text-align: center;
  transition: 0.4s;
  margin: 20px auto 5px;
}
.btns_area .btns:hover,
.search-box .btns:hover{
  opacity: 0.7;
}
.search-box .red{
  border: 1px solid #af1e23;
  background-color: #af1e23;
}
.btns_area .green,
.search-box .green{
  border: 1px solid green;
  background-color: green;
}
.search-box p{
  margin: 10px 0;
}
.areabox{
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
.scroll table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.scroll table tr th{
  background-color: #ddd;
}
.scroll table tr th,
.scroll table tr td{
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #bbb;
}
.companytable{
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}
.companytable tr th,
.companytable tr td{
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #bbb;
}
table.spec{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  margin-top: 30px;
}
table.spec tr th{
  background-color: #ddd;
  text-align: center;
}
table.spec tr th,
table.spec tr td{
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #bbb;
}
.companytable{
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}
.companytable tr th,
.companytable tr td{
  padding: 5px 10px;
  box-sizing: border-box;
  border: 1px solid #bbb;
}
#message{
  padding: 15px;
  box-sizing: border-box;
  margin: 15px 0px;
/*  border: 1px solid #777;*/
}
#contact iframe{
  width: 100%;
  height: 500px;
}
@media only screen and (max-width: 750px) {
  .spimg{
    display: unset;
  }
  header.navbar-sticky-on .navbar-brand{
    padding-top: 0px !important;
  }
  .navbar-brand .navbar-brand-item{
    height: 25px !important;
  }
  h2.animate__animated{
    font-size: 24px !important;
  }
  h2.h1,
  .title h2, .title .h2{
    font-size: 18px;
  }
  .navtype{
    height: 10px;
  }
  .backtransform{
    min-height: 250px;
  }
  .title p{
    text-align: left;
  }
  .companytable{
    border-top: 1px solid #bbb;
  }
  .companytable tr th{
    border-top: 0px;
    border-bottom: 0px;
    text-align: center;
    font-weight: normal;
    background-color: #eee;
  }
  .companytable tr th,
  .companytable tr td{
    display: block;
    width: 100%;
  }
  #contact iframe{
    height: 300px;
  }
}

/* sliderpro */
/*前矢印のアイコンフォント*/
.sp-next-arrow:before {
    font-family: FontAwesome !important;
    content: '\f105' !important;
}
/*後矢印のアイコンフォント*/
.sp-previous-arrow:before {
    font-family: FontAwesome !important;
  content: '\f104' !important;
}
/*ナビゲーションボタンの色*/
.sp-button {
    border:2px solid green;
}
.sp-selected-button {
  background-color: green;
}
/*サムネイルのポインターの色を変える*/
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before,
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before {
    border-color: green;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after {
  color: green;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{
}
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{
  border-right: 13px solid green;
}
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{
  border-bottom: 13px solid green;
}
/*縦スライド時の矢印の位置*/
.sp-vertical .sp-previous-arrow {
  top: 0;
}
.sp-vertical .sp-next-arrow {
  bottom: 0;
}