@charset "UTF-8";
/*=========================
common
=========================*/
@media (min-width: 541px) {
  .sp {
    display: none;
  }
}
@media (max-width: 540px) {
  .pc {
    display: none;
  }
}
@media (min-width: 769px) {
  .tb {
    display: none;
  }
}
@media (max-width: 768px) {
  .nb {
    display: none;
  }
}
@media (max-width: 1440px) {
  .wide {
    display: none;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  text-align: center;
  overflow-x: hidden;
  counter-reset: count;
}

p {
  font-size: clamp(0.875rem, 0.836rem + 0.18vw, 1rem);
  line-height: 2;
  text-align: left;
}

ul li {
  list-style: none;
}

img {
  display: block;
  width:100%;
  margin: auto;
}

h2 {
  font-size: clamp(1.375rem, 0.979rem + 1.69vw, 2.5rem);
  text-align: center;
  line-height: 1.3;
  margin-bottom: clamp(1.875rem, 1.435rem + 1.88vw, 3.125rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.125rem, 0.861rem + 1.13vw, 1.875rem);
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
}

section {
  padding: clamp(3.75rem, 2.87rem + 3.76vw, 6.25rem) 0;
}

.container {
  max-width: 980px;
  margin: auto;
  width: 100%;
  @media (max-width:1000px) {
    width: 90%;
  }
}

.sub-container {
  max-width: 700px;
  margin: auto;
  width: 100%;
  @media (max-width:768px) {
    width: 95%;
  }  
}

a {
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  transition: ease-in 0.35s;
}

.center {
  text-align: center !important;
}

:root {
  --base: #333333;
}

.en {
  font-family: "Jost", sans-serif;;
}

span.marker {
  background: linear-gradient(transparent 60%, #F9FFB2 60%);
  Mix-blend-mode: multiply;
  padding-bottom: 2px;
  font-weight: 600;
}

span.pink {
  font-weight: 600;
  color: #BE1E6E;
}


/*=========================
contents
=========================*/
.cta-button {
  text-align: center;
  background: linear-gradient(180deg, rgba(190,30,110,1) 0%, rgba(229,107,168,1) 100%);
  color: #fff;
  padding: 15px 0;
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
  font-weight: 600;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  @media (min-width:980px){
    width: 340px;
    padding: 25px 0;
    border: 2px solid #fff;
    border-radius: 50px 0 0 50px;
    margin-bottom: 15px;
    right: -4px;
  }
  &::before {
    position: absolute;
    content: '';
    border: 6px solid transparent;
    border-left: 10px solid #fff;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}

.cta-button.show {
    transform: translateY(0);
    opacity: 1;
}
.cta-button.hide {
    transform: translateY(100%);
    opacity: 0;
}

.fv {
  background: linear-gradient(45deg, rgba(147,227,206,1) 0%, rgba(172,223,250,1) 100%);
  padding: 40px 0 30px;
  @media (max-width:540px){
    padding: 15px 0 15px;
  }
  img.fv-main {
    width: 80%;
    @media (max-width:768px){
      width: 90%;
    }
  }
  .sp {
    @media (min-width: 1441px) {
      display: none;
    }
  }
  .sample-slider {
    margin-top: clamp(0.938rem, 0.407rem + 2.27vw, 3.125rem);/* 15-50 */
    /* スライドの動き等速 */
    .swiper-wrapper {
      transition-timing-function: linear;
      .swiper-slide {
        height: auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.sub-header {
  padding: clamp(2.5rem, 2.28rem + 0.94vw, 3.125rem) 0;
  background: rgb(92,217,183);
  background: linear-gradient(90deg, rgba(92,217,183,1) 0%, rgba(79,169,216,1) 100%);
  p {
    font-size: clamp(0.875rem, 0.787rem + 0.38vw, 1.125rem);
    line-height: 1.8;
    font-weight: 600;
    text-align: center;
    color: #fff;
    @media (max-width: 540px){
      text-align: left;
    }
    span {
      color: #F7FF29;
    }
  }
}

.cta-area {
  margin: 30px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  @media (max-width: 1440px){
    flex-direction: column;
    gap: 10px;
  }
  a {
    display: block;
    margin: 0 auto;
    width: 520px;
    height: clamp(3.75rem, 3.356rem + 1.83vw, 5rem);
    border: 2px solid #fff;
    border-radius: 100px;
    box-shadow: 0px 6px 6px rgba(0 0 0 0.2);
    color: #fff;
    line-height: 1.3;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    @media (max-width: 540px){
      max-width: 320px;
      padding: 20px 0;
      border: 1px solid #fff;
    }
    &::before {
      position: absolute;
      content: '';
      border: 8px solid transparent;
      border-left: 12px solid #fff;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      @media (max-width: 540px){
        border: 6px solid transparent;
        border-left: 10px solid #fff;
        right: 10px;
        }  
    }
    &::after {
      position: absolute;
      content: '';
      display: inline-block;
      top: -180px;
      left: 0;
      width: 30px;
      height: 100%;
      background-color: #b5e7ff;
      transition: 300ms;
      animation: shiny-btn 3s ease-in-out infinite;
    }
    &:hover {
      opacity: 0.7;
    }
  }
  .form-btn {
    a {
      background: linear-gradient(180deg, rgba(190,30,110,1) 0%, rgba(229,107,168,1) 100%);
      font-size: clamp(1rem, 0.802rem + 0.85vw, 1.563rem);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
@keyframes shiny-btn {
  0% {transform: scale(0) rotate(45deg); opacity: 0;}
  80% {transform: scale(0) rotate(45deg); opacity: 0.5;}
  81% {transform: scale(4) rotate(45deg); opacity: 1;}
  100% {transform: scale(50) rotate(45deg); opacity: 0;}
}

.achievement {
  background: #EDF9FA;
  hgroup {
    margin-bottom: 30px;
    span.en {
      color: #fff;
      font-size: clamp(3.125rem, 2.063rem + 4.53vw, 7.5rem);
      font-weight: 500;
    }
    h2 {
      margin-top: -30px;
      position: relative;
      display: inline-block;
      @media (max-width: 540px){
        position: relative;
        top: -10px;
      }
      &::before {
        content: '';
        position: absolute;
        bottom: -25px;
        display: inline-block;
        width: 60px;
        height: 4px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background: linear-gradient(90deg, rgba(92,217,183,1) 0%, rgba(79,169,216,1) 100%);
        border-radius: 2px;
      }    
    }
  }
  .achievement-box {
    background: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.15);
    padding: clamp(3.125rem, 2.67rem + 1.94vw, 5rem) clamp(1.563rem, 0.728rem + 3.56vw, 5rem);
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 5px solid #E8E8E8;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      @media (max-width: 540px){
        border: 3px solid #E8E8E8;
        width: calc(100% - 10px);
        height: calc(100% - 10px);  
      }
    }
    .achivement-count {
      img {
        width: clamp(12.5rem, 10.073rem + 10.36vw, 22.5rem);
      }
    }
    h3 {
      margin-top: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem);
      border-bottom: 1px solid #B2B09B;
      padding-bottom: 20px;
      margin-bottom: clamp(0.938rem, 0.862rem + 0.32vw, 1.25rem);
      img {
        width: clamp(16.25rem, 12.913rem + 14.24vw, 30rem);
      }
    }
    p {
      text-align: center;
      @media (max-width: 767px){
        text-align: left;
      }
    }
    .achievement-img {
      margin-top: clamp(1.875rem, 1.723rem + 0.65vw, 2.5rem);
      img {
        width: 80%;
        @media (max-width: 540px){
          width: 100%;
        }
      }
    }
  }
}


.worries {
  background: #F8F8F8;
  border-top: 4px solid var(--base);
  border-image: linear-gradient(90deg, rgba(92,217,183,1) 0%, rgba(79,169,216,1) 100%);
  border-image-slice: 1;
  position: relative;
  &::before {
    content: "";
    background: url(../img/arrow.svg) center center /contain no-repeat;
    position: absolute;
    top: 97%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(8.75rem, 7.612rem + 4.85vw, 13.438rem);
    height: clamp(2.5rem, 2.166rem + 1.42vw, 3.875rem);
  }
}

.solution {
  h2 {
    line-height: 2;
    span {
      border-bottom: 4px solid var(--base);
      border-image: linear-gradient(90deg, rgba(92,217,183,1) 0%, rgba(79,169,216,1) 100%);
      border-image-slice: 1;  
      padding-bottom: 10px;
      @media (max-width: 540px){
        border-bottom: 3px solid var(--base);
        padding-bottom: 3px;
        font-size: 25px;
      }
    }
  }
  p.lead {
    font-size: clamp(0.875rem, 0.814rem + 0.26vw, 1.125rem);
  }
  h3 {
    margin-top: 60px;
    color: #005C64;
    position: relative;
    display: inline-block;
    margin-bottom: clamp(1.563rem, 1.335rem + 0.97vw, 2.5rem);
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -15%;
      display: inline-block;
      width: clamp(3.125rem, 2.822rem + 1.29vw, 4.375rem);
      height: clamp(0.063rem, 0.047rem + 0.06vw, 0.125rem);
      background: #005C64;
      -webkit-transform: rotate(70deg);
      transform: rotate(70deg);
    }
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -15%;
      display: inline-block;
      width: clamp(3.125rem, 2.822rem + 1.29vw, 4.375rem);
      height: clamp(0.063rem, 0.047rem + 0.06vw, 0.125rem);
      background: #005C64;
      -webkit-transform: rotate(-70deg);
      transform: rotate(-70deg);
    }  
  }
  .solution-list {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      @media (max-width: 540px){
        gap: 10px;
        &::after {
          content: '';
          width: 100%;
        }
      }
      li {
        width: calc(25% - 20px);
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px rgb(0 0 0 / 0.15);
        display: flex;
        flex-direction: column;
        @media (max-width: 540px){
          width: calc(33.333% - 10px);
          border-radius: 10px;
          box-shadow: 0 0 5px rgb(0 0 0 / 0.15);
          &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5){
            margin-top: -10px;
          }  
        }
        &:first-of-type, &:nth-of-type(2){
          order: 0;
        }
        &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5){
          order: 1;
        }
        &:nth-of-type(6), &:nth-of-type(7){
          order: 2;
        }
        img {
          width: 70%;
          margin: 10px auto;
        }
        p {
          background: #F2FAFA;
          padding: 10px 0;
          text-align: center;
          line-height: 1.3;
          color: #005C64;
          font-weight: 600;
          font-size: clamp(0.813rem, 0.737rem + 0.32vw, 1.125rem);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-grow: 1;
        }
      }
    }
  }
  .solution-list-container {
    max-width: 800px;
    margin: auto;
    width: 100%;
  }
}

.kaisetsu {
  background: linear-gradient(90deg, rgba(195,242,230,1) 0%, rgba(231,255,211,1) 100%);
  h2 {
    width: clamp(20rem, 15.752rem + 18.12vw, 37.5rem);
    margin: auto;
  }
  .movie {
    margin-top: 50px;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
  .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .kaisetsu-item-wrapper {
    margin-top: 60px;
    display: grid;
    gap: 30px;
    .kaisetsu-item {
      background: #F1FFEB;
      padding: clamp(1.875rem, 1.678rem + 0.91vw, 2.5rem) clamp(1.25rem, 0.659rem + 2.74vw, 3.125rem);
      h3 {
        text-align: left;
        border-image: linear-gradient(to bottom, #4F9FC9 0%, #51C3A4 100%);
        border-image-slice: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        position: relative;
        left: -20px;
        @media (max-width: 540px){
          left: -10px;
          gap: 10px;
          margin-bottom: 10px;
        }
        span {
          position: relative;
          top: -20px;
          @media (max-width: 540px){
            top: -10px;
          }
          img {
            width: clamp(3.125rem, 2.67rem + 1.94vw, 5rem);
          }
        }
      }
      .kaisetsu-item-inner {
        ul.kaisetsu-list {
          margin-top: 30px;
          display: flex;
          flex-direction: column;
          gap: 15px;
          li {
            text-align: left;
            font-weight: 500;
            font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
            line-height: 1.5;
            font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
            position: relative;
            padding-left: 34px;
            counter-increment: count;
            &::before {
              content: counter(count);
              background: linear-gradient(to bottom, #4F9FC9 0%, #51C3A4 100%);
              border-radius: 2px;
              color: #fff;
              font-weight: 600;
              position: absolute;
              top: 0px;
              left: 0;
              width: 25px;
              height: 25px;
              text-align: center;
              line-height: 23px;
            }
            &:first-of-type {
              &::before {
                top: 4px;
              }
            }
          }
        }
      }
      img.kaisetsu-img {
        margin: clamp(2.5rem, 2.348rem + 0.65vw, 3.125rem) auto 0;
        max-width: 700px;
      }
      img.point03-img {
        max-width: 480px;
      }
    }
  }
  .cta-area {
    margin-top: clamp(2.5rem, 2.06rem + 1.88vw, 3.75rem);
  }
}

.summary {
  .summary-wrapper {
    display: flex;
    gap: 30px;
    @media (max-width: 540px){
      flex-direction: column;
      gap: 0;
    }
    .summary-text {
      h2 {
        line-height: 1.7;
        text-align: left;
        @media (max-width: 540px){
          text-align: center;
          margin-bottom: 40px;
        }
      }
      p {
        margin-top: -20px;
      }
    }
    img {
      max-width: clamp(11.25rem, 10.34rem + 3.88vw, 15rem);
    }
  }
  .flow {
    margin-top: clamp(2.813rem, 2.585rem + 0.97vw, 3.75rem);
    .flow-title {
      background: #44A3AA;
      border-radius: 10px 10px 0 0;
      padding: 15px 0 17px;
      h2 {
        color: #fff;
        font-weight: 600;
        font-size: clamp(1.125rem, 0.943rem + 0.78vw, 1.875rem);
        margin-bottom: 0;
      }
    }
    .flow-wrapper {
      background: #EDF9FA;
      border-radius: 0 0 10px 10px;
      .flow-inner {
        max-width: 720px;
        margin: auto;
        padding: clamp(1.875rem, 1.42rem + 1.94vw, 3.75rem) 15px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        @media (max-width: 540px){
          gap: 30px;
        }
        .flow-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 20px;
          @media (max-width: 540px){
            gap: 10px;
          }  
          .flow-step-icon {
            position: relative;
            z-index: 0;
            &::before {
              content: "";
              position: absolute;
              background: #44A3AA;
              top: 10px;
              left: 65%;
              width: 4px;
              height: 120%;
              z-index: -1;
              @media (max-width: 540px){
                height: 140%;
                width: 3px;
              }
            }
            img {
              width: clamp(6.875rem, 6.268rem + 2.59vw, 9.375rem);
              margin: 0;
            }
          }
          .flow-text {
            h3 {
              text-align: left;
              color: #005C64;
              font-size: clamp(1rem, 0.939rem + 0.26vw, 1.25rem);
              margin-bottom: 10px;
            }
            p {
              font-size: clamp(0.813rem, 0.767rem + 0.19vw, 1rem);
              @media (max-width: 540px){
                line-height: 1.5;
              }
              a {
                border-bottom: 1px solid #007F89;
                color: #007F89;
                font-weight: 600;
              }
            }         
          }
          &:last-of-type {
            .flow-step-icon {
              &::before {
                content: none;
              }
            }
          }
        }
      }
    }
  }
}




#form {
  background: #F0FFF1;
  padding-top: 0;
  h2 {
    background: linear-gradient(90deg, rgba(79,173,148,1) 0%, rgba(78,149,186,1) 100%);
    padding: 20px 0;
    color: #fff;
  }
  .form-offer {
    @media (max-width: 540px){
      margin-bottom: 30px;
    }
  }
  .form-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #D3E8D4;
    padding: clamp(2.5rem, 2.106rem + 1.83vw, 3.75rem) clamp(0.938rem, -0.342rem + 5.94vw, 5rem);
  }
}

footer{
  background: #DCF8DD;
  .footer-top {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    @media (max-width: 768px){
      width: 90%;
    }
    @media (max-width: 540px){
      padding: 50px 0;
      display: block;
    }
    .footer-left {
      margin-right: 80px;
      @media (max-width: 540px){
        margin-right: 0;
        margin-bottom: 20px;
      }
      img {
        width: 180px;
        margin: 0 auto;
      }
      p {
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        color: #333333;
        text-decoration: none;
      }
    }
    .footer-right {
      a {
        font-size: 14px;
        color: #333;
        margin-top: 20px;
        padding: 0 15px;
        @media (max-width: 540px){
          margin-top: 20px;
        }
      }
      .footer-right-top {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #36878D;
        padding-bottom: 20px;
      }
      .footer-right-bottom {
        display: flex;
        a {
          font-weight: bold;
        }
      }
    }
  }
  .footer-bottom {
    background: #36878D;
    padding: 20px 10% 20px 0;
    @media (max-width: 540px){
      padding: 15px 0;
    }
    p {
      color: #ffffff;
      text-align: right;
      font-size: 14px;
      @media (max-width: 540px){
        font-size: 12px;
        text-align: center;
      }
    }
  }
}