@charset "UTF-8";
img {
  margin: 0 auto; }

.site {
  overflow-x: hidden;
  font-size: 1.3vw; }

@media screen and (max-width: 600px) {
  .site {
    font-size: 2vw; } 
    .h1_text {
      font-size: 56%; }

      .sec_title3 {
        text-align: center;
        line-height: 1.4;
    }
    .title_1 {
      font-size: 600%;
      text-align: center;
      font-family: "overpass", sans-serif;
  }
  .title_2 {
    font-size: 270%;
    text-align: center;
    margin-bottom: 1rem;
}
.sec_text_big {
    font-size: 200%;
    text-align: center;
    margin: 4rem 0 4rem 0;
    line-height: 2;
}
.target_img {
  margin-top: 8rem;
  margin-bottom: 2rem;
}
.mark_m {
  width: 9vw;
  margin-top: 1rem;
}
.guide_img {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-bottom: 2rem;
}
.my-parts table {
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.1);
  table-layout: fixed;
  width: 100%;
  font-size: 143%;
}
  }

  @media screen and (min-width: 600px) {
    .h1_text {
      font-size: 40%; }
      .sec_title3 {
        text-align:center;
        line-height: 1.2;
    }
    .title_1 {
      font-size: 400%;
      text-align: center;
      font-family: "overpass", sans-serif; }
      .title_2 {
        font-size: 140%;
        text-align: center;
        margin-bottom: 1rem; }
        .sec_text_big {
          font-size: 180%;
          text-align: center;
          margin: 4rem 0 4rem 0;
          line-height: 2; }
          .target_img {
            width: 80%;
            margin-top: 8rem;
            margin-bottom: 2rem; }
            .br-sp 
{display: none; }
.mark_m{
  width: 4vw;
  margin-top: 1rem;
}
.guide_img {
  width: 90%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-bottom: 2rem; }
  .my-parts table {
    border-collapse: collapse;
    border: 1px solid rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    width: 100%;
    font-size: 62%; }
    }


@media screen and (max-width: 500px) {
  .site {
    font-size: 2vw; } }
.wrap {
  /*width: 1000px;*/
  margin: 0 auto;
  width: calc(1000px + 60px);
  padding: 0 20px; }

@media screen and (max-width: 1060px) {
  .wrap {
    width: auto; } }


.full {
  position: relative;
  width: 100%;
  height: 50vw;
  /* min-height: 85vh; */
  background: url(../img/bg_top.jpg) center/cover; }

.h1 {
  margin: 0;
  position: absolute;
  top: 5vw;
  width: 100%;
  text-align: center;
  line-height: 1.1;
  font-size: 530%;
  font-family: "overpass", sans-serif;
  color: #fff;
  text-shadow: 3px 3px 20px #000; }

@media screen and (max-width: 600px) {
  .h1 {
    font-size: 480%; } }

.sb {
  padding-top: 8vw;
  padding-bottom: 8vw; }



.sec_overview {
    /* background: #fff;
position: relative; */ }

.sec_title {
  text-align:center;
  line-height: 1.2;
}

.sec_title2 {
  margin-bottom: 5vw; }




  



.sec_text_regular {
  font-size: 1.2rem;
  margin-top: 4rem;
  line-height: 1.5; }

.sec_text_regular2 {
  font-size: 2rem;
  margin-top: 4rem;
  line-height: 1.5;
  text-align: center; 
  margin-bottom: 1.5rem;}

.red_text {
  font-size: 150%;
  color: #ED1C24; }

.bg_glay {
  background-color: #F2F2F2; }

.sec_overview .bg_glay {
  padding: 3vw 0; }

@media screen and (max-width: 600px) {
  .sec_overview .bg_glay {
    padding: 30px 0; } }
.sb.sec_overview {
  padding-bottom: 0; }

.flex_m {
  display: flex; }

.flex_mp {
  flex-wrap: wrap; }

.flex_mp > p {
  flex: 0 1 50%;
  padding: 1vw;
  box-sizing: border-box; }

.flex_m.flex_mcheck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2vw; }

@media screen and (max-width: 600px) {
  .flex_m.flex_mcheck {
    display: block; }
    .flex_m.flex_mcheck > p {
      margin-bottom: 20px; } }
.flex_m.flex_mp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2vw; }

.sec_target {
   }



.bg_green {
  background-color: #CCE9DA; }

.area_img {
  width: 80%;
  margin-bottom: 2rem; }

@media screen and (max-width: 600px) {
  .area_img {
    width: 100%; } }
.area_img2 {
  width: 90%;
  margin-top: 8rem;
  margin-bottom: 2rem; }

.location_area {
  /* background: #F2F2F2; */ }
  .location_area .bg_white {
    padding: 5vw 7vw;
    margin-top: 5vw; }

.bg_white {
  background-color: #fff;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.8); 
  margin-top: 5vw;
}

.price_area {
   }

  .price_area .my-parts {
    margin-top: 5vw; }

.guide_area {
  background: url(../img/bg_guide.jpg) center/cover; }



.guide_img2 {
  width: 80%;
  padding-top: 4rem; }

/*ボタンデザイン*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.buttons {
  margin: 3%;
  text-align: center; }

/* .btn-hover {
    width: 430px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 73px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
} */
.btn-hover.color-1 {
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  color: #fff;
  padding: 1.5vw;
  font-size: 110%;
  border-radius: 100px;
  width: clamp(300px, 50%, 30vw);
  margin: 0 auto;
  transition: all .4s ease-in-out;
  background-size: 300% 100%; }

.btn-hover.color-1:hover {
  background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
  transition: all .4s ease-in-out;
  background-size: 300% 100%;
  background-position: 100% 0; }

.btn-hover:focus {
  outline: none; }

/* .btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
} */
.buttons a {
  display: block; }

/*ボタンデザイン*/
/*テーブルデザイン*/
.my-parts {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%; }



  .my-parts table .odd td {
    background-color: #e9fff3; }

.my-parts th,
.my-parts td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: .6em;
  text-align: center;
  background: #fff;
  vertical-align: middle; }

.my-parts th {
  background: #009245;
  color: #fff;
  font-weight: bold; }

@media screen and (max-width: 960px) {
  .my-parts table {
    width: 900px; } }
/*テーブルデザイン*/
.overview_images {
  margin-bottom: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 30px; }

@media screen and (max-width: 600px) {
  .overview_images {
    column-gap: 20px;
    row-gap: 20px; } }
.plan1_overview .bg_white {
  padding: 5vw 7vw;
  margin-top: 5vw; }

@media screen and (max-width: 800px) {
  .contact a.btn-hover.color-1 {
    font-size: 200%;
    padding: 20px 0; }

  .buttons {
    padding: 10px 30px; } }
@media screen and (max-width: 600px) {
  .plan1_overview .bg_white {
    padding: 20px; }

  .guide_area .flex_m {
    display: block; }

  .guide_area .bg_white {
    padding: 20px; }

  .guide_img2 {
    width: auto;
    padding-top: 0; } }
@media screen and (max-width: 600px) {
  .sec_target .flex_m {
    display: block; } }
.my-parts.plan2_overviewMy-parts table tr th:first-child {
  width: 50px; }
.my-parts.plan2_overviewMy-parts table tr th:nth-child(4) {
  width: 150px; }
.my-parts.plan2_overviewMy-parts table tr th:nth-child(2) {
  width: 80px; }
.my-parts.plan2_overviewMy-parts table tr th:nth-child(6) {
  width: 50px; }

/*# sourceMappingURL=style.css.map */

/* .animation_box {
  padding: 0px;
  animation: fadeIn 1s ease 1s 1 normal backwards;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* fadeUp */

.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }