@charset "UTF-8";
/* CSS Document */

.top {
  margin-bottom: 6em;
}

.top .top_img {
  width: 100%;
}

.top .top_img img {
  width: 100%;
}

.top .top_text {
  text-align: left;
  font-size: 14px;
  width: 80%;
}

.top .top_text span {
  font-size: 21px;
}

.top .top_text p {
  margin-top: 1em;
}

.h {
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 2em;
}

.h .top_img2 {
  width: 20%;
}

.h .top_img2 img {
  width: 80%;
  text-align: center;
}

/*contents1*/
.contents1 .con1_lineup {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contents1 .con1_h {
  background-color: #F0F0F0;
  font-size: 16px;
  padding: 1em 0;
  margin-bottom: 1em;
}

.contents1 p {
  font-size: 16px;
  font-weight: bold;
}

.contents1 .con1_lineup li {
  list-style: none;
}

.contents1 .con1_lineup .item1,
.item2,
.item3,
.item4 {
  width: 25%;
}

.contents1 .con1_lineup .text1,
.text2,
.text3,
.text4 {
  margin-top: 1em;
}

.contents1 .con1_lineup img:hover {
  opacity: 0.7;

}



.contents1 .con1_lineup .item1 img,
.item2 img,
.item3 img,
.item4 img {
  width: 100%;
}

.contents1 p span {
  background: #3e1152;
  color: #fff;
  padding: 3px 0.5em 5px;
  margin-left: 0.5em;
}

/*contents2*/
.contents2 {
  margin-top: 5em;
}

.contents2 .con2_lineup {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contents2 .con2_h {
  background-color: #F0F0F0;
  font-size: 16px;
  padding: 1em 0;
  margin-bottom: 1em;
}

.contents2 p {
  font-size: 16px;
  font-weight: bold;
}

.contents2 p span {
  background: #01336F;
  color: #fff;
  padding: 0.3em 0.5em;
  margin-left: 0.5em;
}

.contents2 .con2_lineup li {
  list-style: none;
}

.contents2 .con2_lineup .item5,
.item6,
.item7,
.item8,
.item9,
.item10,
.item11,
.item12,
.item13,
.item14 {
  width: 25%;
}

.contents2 .con2_lineup .text5,
.text6,
.text7,
.text8,
.text9,
.text10,
.text11,
.item12,
.item13 .item14 {
  /* margin-top: 1em; */
  margin-bottom: 5em;
}

.contents2 .con2_lineup .item5 img,
.item6 img,
.item7 img,
.item8 img,
.item9 img,
.item10 img,
.item11 img,
.item12 img,
.item13 img,
.item14 img {
  width: 100%;
}

.contents2 .con2_lineup img:hover {
  opacity: 0.7;

}

/*パンフ*/
.pamphlet {
  margin-top: 3em;
  margin-bottom: 5em;
  text-align: center;
}

.pamphlet a {
  background-color: #E6E6E6;
  padding: 2em 15em;
  font-size: 14px;
}

.pamphlet a:hover {
  background-color: #F08301;
  padding: 2em 15em;
  color: #fff;
  text-decoration: none;
}

/*spec*/
.spec {
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

.spec table td a:hover {
  text-decoration: none;
  color: #3C3C3C;
}

.spec .spec_pc img {
  width: 100% !important;
}

.spec h3 {
  text-align: left;
}

.spec p {
  text-align: left;
}

.spec table {
  border-collapse: collapse;
  border: solid 1px #666;
  width: 100%;
  margin-bottom: 20px;
  color: #3C3C3C;
}

.spec table th,
.spec table td {
  border: solid 1px #666;
  padding: 10px;
  text-align: center;
}

.spec table td {
  width: 12%;
}

.spec table th {
  background: #e6e6e6;
  width: 12%;
}

.contact {
  margin: 3em 0;
  text-align: center;
}

.contact .contanct_h {
  font-size: 18px;
  margin-bottom: 1em;
}

.contact .contanct_h a:hover {
  color: #EF8301 !important;
}

.contact .contanct_text {
  font-size: 14px;
}

.spec .spec_sp {
  display: none;
}

.record {
  text-align: center;
  width: 100%;
  margin-bottom: 6em;
}

.record_img {
  width: 100%;
}

.record_img img {
  width: 70%;
}

.record_h {
  font-size: 20px;
}

.record_h span {
  font-size: 25px;
  color: #F08301;
}

.record_text {
  font-size: 18px;
}

.solution {
  margin-top: 5em;
}

.solution .solution_h {
  background-color: #A7A7A7;
  font-size: 20px;
  padding: 0.8em 0;
  color: #fff;
  margin-bottom: 2em;
  border-radius: 0.2em;
  text-align: center;
}

.solution .solution_img {
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}

.solution .solution_img img {
  width: 70%;
}

.solution .solution_text {
  width: 100%;
  text-align: left;
}

.solution .solution_text p {
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}

/* pagetop */
.scroll-top {
  background-color: #a1a1a1;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
  color: #fff;
  display: none;
}

#js-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

.spec_pc img:hover {
  opacity: 0.7;
}

/* btn */
a.btn_detail {
  background-color: #fff;
  border: solid 1px #666;
  /* border-radius: 45px; */
  width: 85%;
  margin: 20px 0 0;
  padding: 5px;
  color: #666;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
  display: block;
  position: relative;
}

a.btn_detail::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  transform: rotate(45deg);
}

a.btn_detail:hover {
  background-color: #00b3e3;
  color: #fff;
  border: solid 1px #00b3e3;
}

a.btn_detail:hover::before {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}




@media screen and (min-width:600px) and (max-width:1024px) {
  /*Tablet*/

  .top .top_text span {
    font-size: 20px;
  }

  /*contents1*/

  .contents1 .con1_lineup .item1,
  .item2,
  .item3,
  .item4 {
    width: 33%;
  }


  /*contents2*/
  .contents2 .con2_lineup .item5,
  .item6,
  .item7,
  .item8,
  .item9,
  .item10,
  .item11,
  .item12,
  .item13,
  .item14 {
    width: 33%;
  }


}


@media screen and (max-width:599px) {

  /*SmartPhone*/
  .top {
    margin-bottom: 6em;
  }

  .top .top_text {
    margin-top: 2em;
    text-align: left;
    font-size: 14px;
  }

  .top .top_text span {
    font-size: 20px;
  }

  /*contents1*/

  .contents1 .con1_lineup li {
    list-style: none;
  }

  .contents1 .con1_lineup .item1,
  .item2,
  .item3,
  .item4 {
    width: 100%;
    margin-bottom: 5em;
  }

  .contents1 .con1_lineup .text1,
  .text2,
  .text3,
  .text4 {
    margin-top: 1em;
  }

  /*contents2*/
  .contents2 {
    margin-top: 5em;
  }

  .contents2 .con2_lineup {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .contents2 .con2_h {
    background-color: #F0F0F0;
    font-size: 16px;
    padding: 1em 0;
    margin-bottom: 1em;
  }

  .contents2 p {
    font-size: 16px;
    font-weight: bold;
  }

  .contents2 .con2_lineup li {
    list-style: none;
  }

  .contents2 .con2_lineup .item5,
  .item6,
  .item7,
  .item8,
  .item9,
  .item10,
  .item11,
  .item12,
  .item13,
  .item14 {
    width: 100%;
  }

  /*パンフ*/
  .pamphlet a {
    padding: 2em 5em;
  }

  .pamphlet a:hover {
    padding: 2em 5em;
  }


  .spec_pc {
    display: none;
  }

  .spec .spec_sp {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .spec .spec_sp img {
    width: 100%;
  }

  .spec .spec_sp .spec_sp_item table {
    display: block;
  }

  /* .spec .spec_sp .spec_sp_item th {
    display: block;
  } */

  /* .spec .spec_sp .spec_sp_item td {
    display: block;
  } */

  .spec .spec_sp .spec_sp_item td img {
    width: 100% !important;
  }

  /* .spec .spec_sp .spec_sp_item {
    width: 50%;
  } */


  .record {
    margin-top: 4em;
    text-align: center;
    width: 100%;
    margin-bottom: 10em;
  }

  .record_img {
    width: 100%;
  }

  .record_img img {
    width: 100%;
  }

  .record_h {
    font-size: 20px;
  }

  .record_h span {
    font-size: 24px;
    color: #F08301;
  }

  .record_text {
    font-size: 16px;
  }

  .solution .solution_h {
    background-color: #A7A7A7;
    font-size: 16px;
    padding: 0.5em 0;
    color: #fff;
    margin-bottom: 1em;
  }

  .solution .solution_img {
    width: 100%;
    margin-bottom: 1em;
  }

  .solution .solution_img img {
    width: 100%;
  }

  .solution .solution_text p {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /* pagetop */
  .scroll-top {
    background-color: #a1a1a1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: #fff;
    display: none;
  }

  #js-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
  }


}