@charset "UTF-8";

#lp {
  background: #f2f3f7 !important;
}

.lp_header {
  text-align: center;
  width: calc(100% - 48px);
  position: absolute;
}
.lp_header h1 {
  font-size: 12px;
  text-align: center;
  color: #fff;
  margin: 0 auto 16px auto;
}
.lp_header_img {
  max-width: 128px;
  margin: 0 auto;
}

.lp_fv {
  background: linear-gradient(to bottom, #07ac9f 0%, #1bb9ad 50%, #a2dab2 100%);
  width: 100%;
  height: 980px;
}
.lp_fv2 {
  background: url(images/lp/fv1.png) no-repeat center bottom; 
  background-size: auto 400px;
  width: 100%;
  height: 980px;
}
.lp_fv3a {
  background: url(images/lp/fv2a.png) no-repeat left top; 
  background-size: 480px;
  width: 100%;
  height: 980px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lp_fv3b {
  background: url(images/lp/fv2b.png) no-repeat right top; 
  background-size: 480px;
  width: 100%;
  height: 980px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lp_fv3b img {
  max-width: 800px;
  width: calc(100% - 64px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: 88px;
}
.lp_btn_contact {
  background: url(images/lp/lp_mail.png) no-repeat left 16px center #f2f3f7;
  background-size: 32px;
  padding: 16px 32px 16px 64px;
  color: #111;
  font-size: 14px;
  position: absolute;
  top: 32px;
  right: 24px;
  border-radius: 16px;
}
.lp_link_wrap {
  height: 0;
  display: flex;
  justify-content: flex-end;
  align-items: start;
  position: relative;
  bottom: 99px;
}
.lp_link {
  background: #f2f3f7;
  padding: 16px 16px 8px 20px;
  border-radius: 64px 0 0 0;
  display: inline-block;
}
.lp_link img {
  width: 200px;
}

.lp_about {
  padding: 64px 24px;
}



/*お問い合わせフォーム*/
.lp_contact2 {
  background: #fff;
  padding: 8px 32px 56px;
  max-width: 600px;
  margin: 64px auto 128px;
}
.lp_sub {
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid #07ac9f;
  border-radius: 100px; 
  display: inline-block;
  margin: 0 auto 24px;
  text-align: center;
  min-width: 180px;
}
.lp_sub2 {
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid #fff;
  border-radius: 100px; 
  display: inline-block;
  margin: 0 auto 24px;
  text-align: center;
  min-width: 180px;
  color: #fff;
}

.mw600 {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.content_ttl_purple {
    color: #0e57ab;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    line-height: 1em;
    letter-spacing: 0em;
    background: linear-gradient(90deg, #106eec, #d474f2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 22px;
    text-align: center;
    line-height: 1.7em;
    font-weight: bold;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}
.content_ttl_purple2 {
    color: #0e57ab;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    line-height: 1.5em !important;
    letter-spacing: 0em;
    background: linear-gradient(90deg, #106eec, #d474f2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 40px;
    text-align: center;
    line-height: 1.7em;
    font-weight: bold;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

.content_ttl_white {
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    line-height: 1em;
    letter-spacing: 0em;
    font-size: 40px;
    text-align: center;
    line-height: 1.7em;
    font-weight: bold;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}
.content_ttl_black {
    color: #121212;
    font-weight: bold;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    line-height: 1em;
    letter-spacing: 0em;
    font-size: 3.4vw;
    text-align: center;
    line-height: 1.7em;
    font-weight: bold;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.italic {
  font-style: italic;
}

.lp_solution {
  background: linear-gradient(to bottom, #0052c4 0%, #4bb3ef 50%, #99e1fe 100%);
  padding-top: 32px;
  margin: 0 auto 0;
  width: 100%;
}
.lp_solution2 {
  background: url(images/lp/cloud.png) no-repeat center top;
  background-size: 100%;
  width: 100%;
  padding: 64px 0 0;
}

.flex_bet_lp {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.lp_three {
  width: calc(33.333% - 24px);
}
.lp_three .build {
  width: 80%;
  margin-left: 10%;
  margin-right: auto;
}

.lp_fukidasi {
  position: relative;
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 64px;
}

.lp_fukidasi::after {
  content: "";
  position: absolute;
  bottom: -58px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 64px;
  display: block;
  background: url("images/lp/lp_fuki.png") no-repeat center / contain;
}




.lp_fukidasi h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}
.lp_fukidasi p {
 letter-spacing: 0em !important;
}
.lp_step1 {
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  margin: 64px 0;
}
.lp_step1 img {
  object-fit: cover;
  width: 100%;
  height: auto;
}
.lp_step1 h4 {
  font-size: 20px;
  margin: 0 0 24px;
  font-weight: bold;
}
.lp_step1 h5 {
  font-size: 16px;
  padding: 16px 0;
  font-weight: bold;
  border-bottom: 1px solid #111;
}


.lp_w50per {
  width: 50%;
}
.lp_p32 {
  padding: 32px 40px;
}

.lp_p64 {
  padding: 128px 8%;
}

.lp_plan {
  background: linear-gradient(to left, #07ac9f 0%, #1bb9ad 50%, #a2dab2 100%);
  width: 100%;
  margin: 0 auto 0;
  width: 100%;
  height: 700px;
  overflow: visible;

}
.lp_plan2 {
  background: url(images/lp/lp_plan.png) no-repeat right bottom;
  background-size: auto 540px;
  width: 100%;
  padding: 0 32px;
  height: 820px;
  position: relative;
  bottom: 120px;

}

.planbox {
  position: relative;
  top: 40px;
  background: #fff;
  padding: 48px 32px;
  margin: 32px;
  width: 400px;
  height: auto;
  clip-path: polygon(
    0% 10%,   /* 左上 少し下げる */
    100% 0%,  /* 右上 上げる */
    100% 90%, /* 右下 上げる */
    0% 100%   /* 左下 下げる */
  );
  
}
.planbox h4 {
  font-size: 20px;
  margin: 0 0 8px;
  font-weight: bold;
  transform: skewY(-4deg);
}
.planbox p {
  transform: skewY(-4deg);
}

.h0lp {
  height: 0 !important;
  position: relative;
  top: 180px;
}

.lp_reason {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 64px;
}
.lp_reason_r {
  background: #e3e6eb;
}

.lp_reason_three {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
}
.lp_reason_three img {
  margin-bottom: 32px;
}

.lp_reason_three h4 {
font-size: 20px;
margin: 0 0 24px;
font-weight: bold;
}
.lp_reason_three p {

}

.follows {
  position: sticky;
  top: 64px; /* 上から20pxで固定 */
}


/********************LP2**********************/
.lp_fv_k {
  background: linear-gradient(to bottom, #ff8640 0%, #ffa73b 50%, #fdc030 100%) !important;
}
.lp_fv2_k {
  background: url(images/lp/fv_k.png) no-repeat center bottom; 
  background-size: 100%;
  width: 100%;
  height: 980px;
}
.lp_fv3a_k {
  width: 100%;
  height: 980px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.lp_fv3b_k {
  width: 100%;
  height: 980px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.lp_fv3b_k img {
  max-width: 800px;
  width: calc(100% - 64px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  bottom: 88px;
}
.whitebox {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 64px;
}
.k_01 {
  background: url(images/lp/k_01.png) no-repeat left bottom;
  background-size: 300px;
}
.k_02 {
  background: url(images/lp/k_02.png) no-repeat right bottom;
  background-size: 300px;
}

.p0 {
  padding: 0;
}

.aic {
  align-items: center;
}

.lp_plan_k {
  background: linear-gradient(to left, #82b3f0 0%, #c1b7f1 50%, #e9b6f3 100%) !important;
  height: auto !important;
  padding-bottom: 80px;
}
.lp_plan2_k {
  width: 100%;
  padding: 0 32px;
  position: relative;
  bottom: 0;
}

.w50per{
  width: 50%;
}

.k_voice {
  background: #fff;
  padding: 24px;
  border: 2px solid #111;
  font-size: 14px;
  font-weight: normal;
}

.k_voice_img img {
  max-width: 80px;
  position: relative;
  top: 12px;
}
.p32 {
  padding: 32px;
}








@media (max-width: 1280px) {
  .lp_solution2 {

      padding: 64px 24px 0;
  }
  .lp_fukidasi {
      position: relative;
      background: #fff;
      padding: 32px;
      border-radius: 16px;
      margin-bottom: 64px;
      min-height: 200px;
  }
  .lp_fukidasi h3 {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
  }
  .lp_fukidasi p {
     font-size: 14px;
  }
  .lp_p64 {
      padding: 128px 4%;
  }
  .lp_w50per img {
  }
  
  .lp_w50per_custom img {
    padding: 24px;
  }
}
@media (max-width: 1024px) {
  
  .lp_fv3a {
    background: url(images/lp/fv2a.png) no-repeat left top; 
    background-size: 280px;
    width: 100%;
    height: 980px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .lp_fv3b {
    background: url(images/lp/fv2b.png) no-repeat right top; 
    background-size: 280px;
    width: 100%;
    height: 980px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .lp_plan {
      background: linear-gradient(to left, #07ac9f 0%, #1bb9ad 50%, #a2dab2 100%);
      width: 100%;
      margin: 0 auto 0;
      height: auto;
      overflow: visible;
  }
  .lp_plan2 {
      background: url(images/lp/lp_plan_sp.png) no-repeat center bottom;
      background-size: auto 240px;
      width: 100%;
      padding: 32px 32px 240px;
      height: auto;
      position: relative;
      bottom: 0;
  }
  .planbox {
      position: relative;
      top: 0px;
      background: #fff;
      padding: 48px 32px;
      margin: 32px;
      width: auto;
      height: auto;
      clip-path: polygon(0% 10%, /* 左上 少し下げる */ 100% 0%, /* 右上 上げる */ 100% 90%, /* 右下 上げる */ 0% 100% /* 左下 下げる */);
  }
  .planbox h4 {
      font-size: 20px;
      margin: 0 0 8px;
      font-weight: bold;
      transform: skewY(-2deg);
  }
  .planbox p {
      transform: skewY(-2deg);
  }
  .h0lp {
      display: none;
  }
  .lp_fv3b_k {
      width: 100%;
      height: 980px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
}

@media (max-width: 768px) {
  .lp_fv {
      background: linear-gradient(to bottom, #07ac9f 0%, #1bb9ad 50%, #a2dab2 100%);
      width: 100%;
      height: 800px;
  }
  .lp_fv3a {
    background: none; 
  }
  .lp_fv3b {
    background: none; 
  }
  .lp_fv2 {
      background: url(images/lp/fv1.png) no-repeat center bottom;
      background-size: auto 280px;
      width: 100%;
      height: 800px;
  }
  .lp_about {
      padding: 32px 8px;
  }
  .content_ttl_white {
      font-size: 24px;
  }
  .lp_fukidasi {
      padding: 24px 16px;
  }
  .lp_reason {
      display: block;
      margin: 0 0 64px;
  }
  .lp_p64 {
      padding: 64px 24px;
  }
  .lp_w50per {
      width: 100%;
  }
  .content_ttl_black {
      font-size: 24px;
  }
  .lp_reason_three {
      max-width: 500px;
      padding: 24px;
      margin-left: auto;
      margin-right: auto;
  }
  .lp_reason_three h4 {
      font-size: 18px;
      margin: 0 0 24px;
      font-weight: bold;
  }
  .mb128 {
    margin-bottom: 64px !important;
  }
  .lp_step1 {
      display: block;
  }
  .lp_step1 h4 {
      font-size: 18px;
  }
  .lp_step1 h5 {
      font-size: 16px;
      padding: 8px 0;
      font-weight: bold;
      border-bottom: 1px solid #111;
  }
  .planbox {
      position: relative;
      top: 0px;
      background: #fff;
      padding: 32px 24px;
      margin: 32px 0;
      width: auto;
      height: auto;
      clip-path: polygon(0% 10%, /* 左上 少し下げる */ 100% 0%, /* 右上 上げる */ 100% 90%, /* 右下 上げる */ 0% 100% /* 左下 下げる */);
  }
  .lp_header h1 {
      font-size: 12px;
      text-align: left;
      color: #fff;
      margin: 0 auto 16px auto;
  }
  .lp_contact2 {
      background: none;
      padding: 8px 24px 56px;
  }
  
  
  
  .lp_fv2_k {
    background: url(images/lp/fv_k.png) no-repeat center bottom; 
    background-size: 100%;
    width: 100%;
    height: 800px;
  }
  .lp_fv3a_k {
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .lp_fv3b_k {
      width: 100%;
      height: 800px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .content_ttl_purple2 {
      font-size: 24px;
  }
  
  .w50per{
    width: 100%;
  }
  
  .w50per .pl32 {
    padding-left: 0 !important;
  }
  .w50per .pr32 {
    padding-right: 0 !important;
  }
  
  
  
  
  
}

@media (max-width: 640px) {
  .lp_header {
      text-align: left;
      width: calc(100% - 48px);
      position: absolute;
  }
  .lp_three {
      width: 100%;
  }
  .flex_bet_lp {
      display: block;
  }
  .lp_three .build {
      margin-left: 30%;
      margin-right: auto;
      width: 40%;
  }
  .k_01 {
    background: url(images/lp/k_01.png) no-repeat left bottom;
    background-size: 100px;
  }
  .k_02 {
    background: url(images/lp/k_02.png) no-repeat right bottom;
    background-size: 100px;
    padding-bottom: 160px !important;
  }
  .lp_solution2 {
      padding: 64px 0 0 !important;
  }
  
}