@charset "UTF-8";


.main_slide{
	width: 100%;
	position: relative;
  margin: 0 auto;
  height: 960px;
  background: linear-gradient(9deg, #1DC4D3 6.29%, #0AC3BC 94.09%);
  position: relative;
  @media (max-width: 768px) {
    height: 667px;
  }
  .slide_pt_01{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    background: url(../images/top/main_img.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    @media (max-width: 768px) {
      background: url(../images/top/main_img_sp.jpg) no-repeat center center;
      background-size: cover;
    }
  }
  .slide_pt_02{
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
  }
  .slide_conts{
    max-width: 1310px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 3;
    /* transition: all .3s; */
    @media (max-width: 1470px) {
      left: 61px;
      transform: inherit;
      width: calc(100% - 100px);
    }
    @media (max-width: 768px) {
      max-width: inherit;
      top: inherit;
      bottom: 90px;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .slide_catch_box{
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    display: flex;
    flex-direction: column;
    padding: 186px 0 0;
    @media (max-width: 768px) {
      padding: 0;
      top: inherit;
      bottom: 0;
    }
    .txt_01{
      margin: 0 0 8px;
      text-shadow: 0px 0px 10px rgba(42, 84, 102, 0.50);
      font-size: 3rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.42rem;
      @media (max-width: 768px) {
        margin: 0;
        font-size: 1.9rem;
        line-height: 220%;
        letter-spacing: 0.224rem;
      }
    }
    .txt_02{
      margin: 0 0 12px;
      padding: 8px 9px 12px 13px ;
      width: fit-content;
      font-size: 3.8rem;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: 0.532rem;
      background: linear-gradient(270deg, #00A3D6 0%, #0066B0 100%);
      box-shadow: 0px 4px 4px 0px rgba(61, 94, 88, 0.25);
      @media (max-width: 768px) {
        font-size: 2.2rem;
        letter-spacing: 0.28rem;
        padding: 5px 6px 7px 8px;
        margin: 0 0 8px;
      }
      .span{
        font-size: 3rem;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.42rem;
        @media (max-width: 768px) {
          font-size: 1.6rem;
          letter-spacing: 0.2239rem;
        }
      }
    }
    .txt_03{
      padding: 8px 9px 12px 13px ;
      width: fit-content;
      font-size: 3.8rem;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: 0.532rem;
      background: linear-gradient(270deg, #00A3D6 0%, #0066B0 100%);
      box-shadow: 0px 4px 4px 0px rgba(61, 94, 88, 0.25);
      @media (max-width: 768px) {
        font-size: 2.2rem;
        letter-spacing: 0.28rem;
        padding: 5px 6px 7px 8px ;
      }
    }
    .txt_04{
      text-shadow: 0px 0px 20px rgba(42, 84, 102, 0.52);
      font-size: 5.7rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.912rem;
      @media (max-width: 768px) {
        text-shadow: 0px 0px 10.661px rgba(42, 84, 102, 0.52);
        font-size: 3.7rem;
        font-weight: 600;
        line-height: 220%;
        letter-spacing: 0.544rem;
      }
    }
    .txt_05{
      text-shadow: 0px 0px 8px rgba(42, 84, 102, 0.60);
      font-size: 2.4rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.192rem;
      @media (max-width: 768px) {
        color: #FFF;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 0.112rem;
      }
    }
    .txt_06{
      text-shadow: 0px 0px 8px rgba(42, 84, 102, 0.60);
      font-size: 2.4rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.192rem;
      @media (max-width: 768px) {
        color: #FFF;
        font-size: 1.6rem;
        font-weight: 500;
        letter-spacing: 0.112rem;
      }
      .span{
        font-size: 2.7rem;
        font-weight: 600;
        line-height: 200%;
        letter-spacing: 0.216rem;
        position: relative;
        padding: 0 0 8px;
        &::before{
          content: "";
          background: #fff;
          width: 100%;
          height: 1px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          box-shadow: 0px 0px 8px rgba(42, 84, 102, 0.60);
        }
        @media (max-width: 768px) {
          color: #FFF;
          font-size: 1.9rem;
          letter-spacing: 0.128rem;
        }
      }
    }
  }
  .slide_point_box{
    width: 1095px;
    position: absolute;
    left: 0;
    bottom: 38px;
    display: flex;
    justify-content: center;
    gap: 15px;
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.sp_conts_wrap{
  display: none;
  padding: 30px 0 60px;
  background: url(../images/top/sp_conts_wrap_bk.jpg) no-repeat;
  background-size: cover;
  height: 560px;
  @media (max-width: 768px) {
    display: block;
    width: 100%;
    padding: 5%;
    position: relative;
  }
  h2{
    position: absolute;
    right: 5px;
    top: 0;
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-family: var(--font-en_02);
    font-size: 4.095rem;
    font-weight: 400;
    letter-spacing: 0.3276rem;
    line-height: 1;
    .span{
      display: block;
      color: rgba(255, 255, 255, 0.50);
      text-align: center;
      font-family: var(--font-en_02);
      font-size: 1.3415rem;
      font-weight: 400;
      letter-spacing: 0.1073rem;
    }
  }
  .sp_conts{
    width: 340px;
    position: absolute;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    .sp_conts_item{
      width: 180px;
      &.item_01{
        position: absolute;
        left: 0;
        top: 0;
      }
      &.item_02{
        position: absolute;
        right: 0;
        top: 90px;
      }
      &.item_03{
        position: absolute;
        left: 0;
        top: 210px;
      }
      &.item_04{
        position: absolute;
        right: 0;
        top: 300px;
      }
    }
  }
}

.sec_contact{
  background: url(../images/top/contact_bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 67px 0 76px;
  @media (max-width: 768px) {
    background: url(../images/top/contact_bg_sp.jpg) no-repeat center center;
    background-size: cover;
    padding: 40px 0 66px;
  }
  .contents{
    h2{
      position: relative;
      color: #FEFEFE;
      font-size: 2.8rem;
      font-weight: 600;
      letter-spacing: 0.336rem;
      text-align: center;
      &::before{
        content: "CONTACT";        
        color: rgba(255, 255, 255, 0.20);
        text-align: center;
        font-family: var(--font-en_02);
        font-size: 9rem;
        font-weight: 400;
        letter-spacing: 0.72rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      @media (max-width: 768px) {
        font-size: 1.7rem;
        letter-spacing: 0.204rem;
        &::before{
          font-size: 4.6rem;
          letter-spacing: 0.368rem;
        }
      }
    }
  }
}

.contact_conts{
  width: 970px;
  margin: 44px auto 0;
  display: flex;
  justify-content: space-between;
  @media (max-width: 768px) {
    width: 100%;
    margin: 20px auto 0;
    flex-direction: column;
    gap: 10px;
  }
  .contact_conts_l{
    width: 510px;
    height: 302px;
    border: 2px solid #FFF;
    background: #D0EEEE;
    box-shadow: 0px 4px 15px 0px rgba(0, 152, 173, 0.30);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media (max-width: 768px) {
      width: 100%;
      height: auto;
      padding: 12px 8% 17px;
    }
    .txt_01{
      text-align: center;
      font-size: 2rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.16rem;
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
      }
    }
    .txt_02{
      color: #0778B7;
      text-align: center;
      font-family: var(--font-en_04);
      font-size: 4.1rem;
      line-height: 1;
      letter-spacing: 0.328rem;
      position: relative;
      padding: 0 0 0 40px;
      &::before{
        content: "";
        width: 31px;
        height: 38px;
        -webkit-mask-image: url(../images/common/icon_tel.svg);
        mask-image: url(../images/common/icon_tel.svg);
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: #0778B7;
        position: absolute;
        left: 0;
        top: 5px;
      }
      @media (max-width: 768px) {
        font-size: 2.8rem;
        letter-spacing: 0.224rem;
        padding: 0 0 0 30px;
        &::before{
          width: 21.523px;
          height: 26.383px;
          top: 62%;
          transform: translatey(-50%);
        }
      }
    }
    .txt_03_box{
      width: 350px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 15px 0 0;
      @media (max-width: 768px) {
        width: 100%;
      }
      .txt_03_01{
        background: #FFF;
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1.6rem;
        line-height: 220%;
        letter-spacing: 0.128rem;
        @media (max-width: 768px) {
          font-size: 1.3rem;
          letter-spacing: 0.052rem;
          height: 29px;
        }
      }
      .txt_03_02{
        background: linear-gradient(270deg, #0676CA 0%, #3BADC8 100%);
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #FFF;
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0.558rem;
        @media (max-width: 768px) {
          font-size: 1.3rem;
          font-weight: 500;
          line-height: 100%;
          letter-spacing: 0.403rem;
          height: 24px;
        }
      }
    }
  }
  .contact_conts_r{
    width: 450px;
    height: 302px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (max-width: 768px) {
      width: 100%;
      height: auto;
      gap: 10px;
    }
    .contact_conts_r_item{
      box-shadow: 0px 4px 15px 0px rgba(0, 152, 173, 0.30);
      border: 2px solid #FFF;
      height: 146px;
      width: 100%;
      @media (max-width: 768px) {
        height: auto;
      }
      &.item_01{
        a{
          background: #25A3BF;
          .r_item_l{
            &::before{
              background: #75CBC1;
            }
            &::after{
              background: url(../images/common/icon_web.svg) no-repeat;
              background-size: cover;
              width: 40px;
              height: 34px;
            }
            @media (max-width: 768px) {
              &::after{
                width: 36px;
                height: 29px;
              }
            }
          }
        }
      }
      &.item_02{
        a{
          background: #085D81;
          .r_item_l{
            &::before{
              background: #6CA1A4;
            }
            &::after{
              background: url(../images/common/icon_line_02.svg) no-repeat;
              background-size: cover;
              width: 36px;
              height: 35px;
            }
            @media (max-width: 768px) {
              &::after{
                width: 33px;
                height: 32px;
              }
            }
          }
        }
      }
      a{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        @media (max-width: 768px) {
          padding: 20px 6%;
          height: 104px;
        }
        .r_item_l{
          width: 190px;
          height: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          padding: 0 0 20px;
          position: relative;
          &::before{
            content: "";
            width: 1px;
            height: 70px;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translatey(-50%);
          }
          &::after{
            content: "";
            position: absolute;
            top: 38px;
            left: 50%;
            transform: translateX(-50%);
          }
          @media (max-width: 768px) {
            width: 35%;
            padding: 0;
            &::before{
              height: 64px;
              right: -20px;
            }
            &::after{
              top: 0;
            }
          }
          .txt_01{
            color: #FFF;
            font-family: "Noto Serif JP";
            font-size: 2.4rem;
            font-style: normal;
            font-weight: 500;
            line-height: 220%; /* 5.28rem */
            letter-spacing: 0.192rem;
            @media (max-width: 768px) {
              font-size: 1.7rem;
              letter-spacing: 0.136rem;
            }
            @media (max-width: 330px) {
              font-size: 1.4rem;
            }
          }
        }
        .r_item_r{
          width: 260px;
          height: 100%;
          position: relative;
          display: flex;
          align-items: center;
          padding: 0 0 0 27px;
          @media (max-width: 768px) {
            width: 75%;
            padding: 0 0 0 40px;
            height: 104px;
          }
          .txt_02{
            color: #FFF;
            font-family: "Noto Serif JP";
            font-size: 1.6rem;
            font-style: normal;
            font-weight: 400;
            line-height: 180%; /* 2.88rem */
            letter-spacing: 0.128rem;
            @media (max-width: 768px) {
              font-size: 1.4rem;
              letter-spacing: 0.112rem;
            }
            @media (max-width: 330px) {
              font-size: 1.2rem;
            }
          }
          .btn_slide{

          }
        }
      }
    }
  }
}

.btn_wrap{
  width: 50px;
  height: 34px;
  border-radius: 18px;
  border: 1px #FFF solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translatey(-50%);
  @media (max-width: 768px) {
    width: 38px;
    height: 26px;
    border-radius: 13.68px;
    right: -3%;
  }
}
.btn_slide{
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  &::after{
    content: "";
    background: url(../images/top/contact_arrow.svg) no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
    transform: translate3d(0, 0, 0);
    position: absolute;
    
    transition: transform .5s;
    transition-timing-function: cubic-bezier(.165,.84,.44,1);

  }
  &::before{
    content: "";
    background: url(../images/top/contact_arrow.svg) no-repeat;
    background-size: cover;
    width: 10px;
    height: 10px;
    transform: translate3d(-3rem, 3rem, 0);
    position: absolute;

    transition: transform .5s;
    transition-timing-function: cubic-bezier(.165,.84,.44,1);

  }
  @media (max-width: 768px) {
    &::after{
      width: 7px;
      height: 7px;
  
    }
  }

}

.contact_conts_r_item{
  &.item_01{
    a{
      @media (min-width: 769px){ 
        &:hover{
          background: #55B5CA!important;
        }
      }
    }
  }
  &.item_02{
    a{
      @media (min-width: 769px){ 
        &:hover{
          background: #4B8198!important;
        }
      }
    }
  }
  a{
    @media (min-width: 769px){ 
      &:hover{
        opacity: 1;
        .r_item_r{
          .btn_wrap{
            .btn_slide{
              &::after{
                transform: translate3d(3rem, -3rem, 0);
              }
              &::before{
                transform: translate3d(0, 0, 0);
              
              }
            }
          }
        }
      }
    }
  }
}


.sec01{
  position: relative;
  overflow: hidden;
  background: #EEF1F3;
  &::before{
    content: "";
    background: linear-gradient(90deg, rgba(215, 250, 242, 0.80) 0%, rgba(117, 217, 214, 0.00) 73.03%);
    width: 75%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  @media (max-width: 768px) {
    background: url(../images/top/sec01_bg.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
    &::before{
      content: none;
    }
  }
  .contents_full{
    position: relative;
    &::before{
      content: "";
      background: url(../images/top/sec01_img_02.svg) center center no-repeat;
      background-size: cover;
      width: 100%;
      height: 998px;
      position: absolute;
      top: 303px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
    }
    @media (max-width: 768px) {
      &::before{
        content: none;
      }
    }
    .contents{
      padding: 150px 0 120px;
      position: relative;
      &::before{
        content: "";
        background: url(../images/top/sec01_img_01.png) no-repeat;
        background-size: cover;
        width: 1059.888px;
        height: 916.147px;
        position: absolute;
        right: -360px;
        top: 0;
        z-index: 2;

      }
      @media (max-width: 768px) {
        padding: 60px 0;
        &::before{
          content: none;
        }
      }
    }
  }
}

.sec01_conts{
  position: relative;
  z-index: 5;
  .h2_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    @media (max-width: 768px) {
        padding: 0 5%;
    }
    .span_01{
      font-family: var(--font-en_02);
      font-size: 1.6rem;
      line-height: 100%;
      letter-spacing: 0.128rem;
      position: relative;
      padding: 0 0 0 22px;
      &::before{
        content: "";
        background: #23B8C5;
        border: 2px solid #6ED1CB;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
      }
    }
    .span_02{
      padding: 0 13px;
      width: fit-content;
      margin: 40px 0 0;
      color: #FFF;
      font-size: 3.6rem;
      font-weight: 600;
      line-height: 180%;
      letter-spacing: 0.288rem;
      background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
      +.span_02{
        margin: 16px 0 0;
        @media (max-width: 768px) {
          margin: 8px 0 0;
        }
      }
      @media (max-width: 768px) {
        font-size: 2.4rem;
        line-height: 100%;
        letter-spacing: 0.192rem;
        padding: 8px 13px;
        margin: 20px 0 0;
      }
    }
  }
  .sec01_ul{
    margin: 36px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    @media (max-width: 768px) {
      width: 100%;
      margin: 30px 0 0;
      padding: 0 5%;
    }
    li{
      background: #FFF;
      box-shadow: 0px 4px 10px 0px rgba(173, 196, 190, 0.32);
      position: relative;
      padding: 17px 12px 17px 47px;
      font-size: 2rem;
      font-weight: 500;
      line-height: 100%;
      letter-spacing: 0.16rem;
      &::before{
        content: "";
        background: url(../images/top/icon_check.svg) no-repeat;
        background-size: cover;
        width: 23px;
        height: 23px;
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        font-size: 1.9rem;
        font-weight: 600;
        letter-spacing: 0.152rem;
        padding: 15px 12px 15px 47px;
      }
      .span{
        color: var(--font-color_02);
      }
    }
  }
}
.sec01_sp_img{
  display: none;
  @media (max-width: 768px) {
    display: block;
    margin: 78px auto 0;
  }
}
.sec01_conts_02_bk{
  margin: 253px auto 0;
  position: relative;
  &::before{
    content: "";
    background: url(../images/top/sec01_img_03.jpg);
    background-size: cover;
    width: 1100px;
    height: 297px;
    position: absolute;
    top: -193px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  @media (max-width: 768px) {
    margin: 235px auto 0;
    &::before{
      content: "";
      background: url(../images/top/sec01_img_03_sp.jpg);
      background-size: cover;
      width: 100%;
      height: 214px;
      top: -175px;
    }
  }
}
.sec01_conts_02{
  margin: 0 auto;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 661px;
  height: 307px;
  border: 3px solid var(--font-color_02);
  background: #FFF;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.20);
  @media (max-width: 768px) {
    width: 90%;
    height: auto;
    padding: 28px 0 26px;
    border: 2px solid var(--font-color_02);
  }
  .txt_01{
    position: relative;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 220%;
    letter-spacing: 0.192rem;
    padding: 0 0 13px;
    &::before{
      content: "";
      background: url(../images/top/attention.svg);
      background-size: cover;
      width: 107px;
      height: 82px;
      position: absolute;
      top: -95px;
      left: 50%;
      transform: translateX(-50%);
    }
    @media (max-width: 768px) {
      font-size: 1.4rem;
      letter-spacing: 0.112rem;
      padding: 0 0 8px;
      &::before{
        width: 58px;
        height: 48px;
        top: -58px;
      }
    }
  }
  .txt_02{
    color: #FFF;
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0.32rem;
    background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
    padding: 8px 24px;
    @media (max-width: 768px) {
      font-size: 2.4rem;
      letter-spacing: 0.192rem;
    }
  }
  .txt_03{
    padding: 13px 0 0;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 220%;
    letter-spacing: 0.224rem;
    @media (max-width: 768px) {
      padding: 0;
      font-size: 1.6rem;
      letter-spacing: 0.128rem;
    }
  }
}

.sec02{
  overflow: hidden;
  background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
  @media (max-width: 768px) {
    background: url(../images/top/sec02_bk_sp.jpg);
    background-size: cover;
  }
  .contents_full_01{
    position: relative;
    height: 100%;
    &::before{
      content: "";
      background: linear-gradient(359deg, rgba(35, 184, 197, 0.40) 7.56%, rgba(0, 139, 134, 0.80) 102.27%);
      width: 716px;
      height: 1424px;
      clip-path: polygon(0 0, 0% 100%, 100% 0);
      z-index: 3;
      position: absolute;
      left: 0;
      top: 0;
    }
    &::after{
      content: "";
      background: url(../images/top/sec02_bk_01.png) no-repeat;
      background-size: cover;
      width: 1140px;
      height: 748px;
      z-index: 1;
      position: absolute;
      right: 0;
      top: 0;
    }
    @media (max-width: 768px) {
      &::before{
        content: none;
      }
      &::after{
        content: none;
      }
    }
  }
  .contents_full_02{
    position: relative;
    height: 100%;
    padding: 150px 0;
    &::before{
      content: "";
      background: url(../images/top/sec02_bk_02.png) no-repeat;
      background-size: cover;
      width: 804.6px;
      height: 1209.108px;
      z-index: 2;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    @media (max-width: 768px) {
      padding: 60px 0;
      &::before{
        content: none;
      }
    }
  }
}

.sec02_conts{
  position: relative;
  z-index: 5;
  width: 1100px;
  margin: 0 auto;
  &::before{
    content: "EARLY \A DETECTION";
    white-space: pre;
    color: rgba(255, 255, 255, 0.20);
    font-family: var(--font-en_02);
    font-size: 14rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 1.1418rem;
    position: absolute;
    right: -220px;
    bottom: -62px;
  }
  @media (max-width: 768px) {
    width: 100%;
    padding: 0 5%;
    &::before{
      content: none;
    }
  }
  .h2_box{
    margin: 0 0 40px;
    @media (max-width: 768px) {
      margin: 0 0 20px;
    }
    .span_01{
      color: #fff;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 200%;
      letter-spacing: 0.144rem;
      position: relative;
      padding: 0 0 0 22px;
      &::before{
        content: "";
        background: #23B8C5;
        border: 2px solid #6ED1CB;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
      }
      @media (max-width: 330px) {
        &::before{
          top: 10px;
          transition: inherit;
        }
      }
    }
  }
  .sec02_read{
    position: relative;
    padding: 0 0 60px;
    margin: 0 0 50px;
    &::before{
      content: "";
      background: #fff;
      background-size: cover;
      width: 50px;
      height: 1px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    @media (max-width: 768px) {
      padding: 0 0 15px;
      margin: 0 0 30px;
      &::before{
        width: 27px;
      }
    }
    .txt{
      color: #FFF;
      text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
      font-size: 3.5rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.28rem;
      .span{
        padding: 13px;
        border: 2px solid #fff;
        margin: 0 15px 0 0;
        @media (max-width: 768px) {
          margin: 9px 0 0;
          display: block;
          line-height: 1;
          width: fit-content;
        }
      }
      @media (max-width: 768px) {
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: 0.192rem;
      }
    }
  }
  
  .txt_01{
    width: 661px;
    color: #FFF;
    text-shadow: 0px 0px 10px rgba(30, 43, 40, 0.50);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 220%;
    letter-spacing: 0.152rem;
    @media (max-width: 768px) {
      width: 100%;
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 200%;
      letter-spacing: 0.12rem;
    }
  }
}

.sec02_sp_img{
  display: none;
  @media (max-width: 768px) {
    display: block;
    margin: 40px auto 0;
    width: 90%;
  }
}

.sec02_conts_02{
  position: relative;
  z-index: 5;
  width: 1100px;
  margin: 100px auto 0;
  padding: 50px 80px;
  border-radius: 10px;
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #C7DDD4;
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  @media (max-width: 768px) {
    width: 90%;
    margin: 40px auto 0;
    padding: 30px 5%;
  }
  h3{
    text-align: center;
    color: var(--font-color_02);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0.192rem;
    padding: 0 0 30px;
    @media (max-width: 768px) {
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 180%;
      letter-spacing: 0.144rem;
      padding: 0 0 20px;
    }
    .span{
      font-size: 2rem;
      letter-spacing: 0.16rem;
      @media (max-width: 768px) {
        font-size: 1.15rem;
        font-weight: 600;
        line-height: 180%;
        letter-spacing: 0.0918rem;
      }
    }
  }
  .sec02_conts_table{
    display: flex;
    flex-direction: column;
    @media (max-width: 768px) {
      +.sec02_conts_table{
        margin: 20px 0 0;
      }
    }
    .tit{
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      .tit_txt{
        width: 425px;
        text-align: center;
        padding: 10px 0;
        color: #FFF;
        font-size: 2rem;
        font-weight: 600;
        line-height: 180%;
        letter-spacing: 0.16rem;
        &.women{
          background: var(--font-color_02);
        }
        &.men{
          background: var(--font-color_03);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          font-weight: 600;
          line-height: 180%;
          letter-spacing: 0.112rem;
          padding: 3px 0;
          width: 100%;
        }
      }
    }
    .txt_box{
      display: flex;
      .txt_01{
        width: 84px;
        border-bottom: 1px solid #FFF;
        background: #E3E6EE;
        font-size: 2.4rem;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0.192rem;
        text-align: center;
        padding: 16px 0;
        @media (max-width: 768px) {
          font-size: 1.4rem;
          font-weight: 600;
          letter-spacing: 0.112rem;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 16%;
          padding: 0;
        }
        .span{
          font-size: 1.6rem;
          letter-spacing: 0.128rem;
          @media (max-width: 768px) {
            font-size: 1.2rem;
            font-weight: 600;
            letter-spacing: 0.096rem;
          }
        }
        +.txt_02{
          margin: 0 8px 0 0;
          @media (max-width: 768px) {
            margin: 0;
          }
        }
      }
      .txt_02{
        display: flex;
        width: 425px;
        height: 60px;
        padding: 17px 30px 17px 40px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #CDCDCD;
        @media (max-width: 768px) {
          width: 84%;
          height: 34px;
          padding: 8px 17px 8px 22px;
        }
        @media (max-width: 330px) {
          padding: 8px 8px 8px 8px;
        }
        .item_01{
          font-size: 2.2rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.176rem;
          @media (max-width: 768px) {
            font-size: 1.4rem;
            letter-spacing: 0.112rem;
          }
          .span{
            font-size: 1.7rem;
            font-weight: 600;
            line-height: 100%;
            letter-spacing: 0.136rem;
            margin: 0 0 0 5px;
            @media (max-width: 768px) {
              font-size: 1.3rem;
              letter-spacing: 0.104rem;
            }
          }
        }
        .item_02{
          font-size: 1.8rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.144rem;
          @media (max-width: 768px) {
            font-size: 1.2rem;
            letter-spacing: 0.096rem;
          }
          .span{
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 100%;
            letter-spacing: 0.12rem;
            margin: 0 0 0 5px;
            @media (max-width: 768px) {
              font-size: 1rem;
              letter-spacing: 0.08rem;
            }
          }
        }
        &.women{
          background: #F0F9FB;
          .item_01{
            color: #26929B;
            font-size: 2.6rem;
            font-weight: 600;
            letter-spacing: 0.208rem;
            @media (max-width: 768px) {
              font-size: 1.8rem;
              line-height: 100%;
              letter-spacing: 0.144rem;
            }
          }
          .item_02{
            color: #26929B;
            font-size: 2.1rem;
            font-weight: 600;
            letter-spacing: 0.168rem;
            @media (max-width: 768px) {
              font-size: 1.4rem;
              font-weight: 600;
              line-height: 100%;
              letter-spacing: 0.112rem;
            }
          }
        }
        &.men{
          background: #F3FAFF;
          .item_01{
            color: #073C6A;
            font-size: 2.6rem;
            font-weight: 600;
            letter-spacing: 0.208rem;
            @media (max-width: 768px) {
              font-size: 1.8rem;
              line-height: 100%;
              letter-spacing: 0.144rem;
            }
          }
          .item_02{
            color: #073C6A;
            font-size: 2.1rem;
            font-weight: 600;
            letter-spacing: 0.168rem;
            @media (max-width: 768px) {
              font-size: 1.4rem;
              font-weight: 600;
              line-height: 100%;
              letter-spacing: 0.112rem;
            }
          }
        }
      }
    }
  }
  .cap{
    margin: 20px 0 0;
    font-family: var(--font-go_01);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.112rem;
    @media (max-width: 768px) {
      margin: 14px 0 0;
      font-size: 1.2rem;
      letter-spacing: 0.096rem;
    }
  }
}

.sec02_conts_03{
  width: 1100px;
  margin: 82px auto 0;
  position: relative;
  z-index: 5;
  display: flex;
  padding: 40px 60px;
  gap: 120px;
  border-radius: 10px;
  background: rgba(220, 250, 241, 0.90);
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  @media (max-width: 768px) {
    width: 90%;
    margin: 40px auto 0;
    padding: 26px 5%;
    gap: 40px;
    flex-direction: column;
  }
  .item{
    width: 430px;
    padding: 130px 0 0;
    position: relative;
    &::before{
      content: "";
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    @media (max-width: 768px) {
      padding: 0 0 0 70px;
      width: 100%;
      &::before{
        width: 55px;
        height: 55px;
        transform: inherit;
        left: 0;
      }
    }
    p{
      font-family: "Noto Serif JP";
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 200%;
      letter-spacing: 0.144rem;
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
      }
    }
    &.item_01{
      &::before{
        content: "";
        background: url(../images/top/sec02_icon_01.svg) no-repeat;
        background-size: cover;
      }
      &::after{
        content: "";
        background: #238C88;
        width: 1px;
        height: 215px;
        position: absolute;
        right: -60px;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        &::after{
          width: 100%;
          height: 1px;
          right: inherit;
          top: inherit;
          transform: inherit;
          bottom: -20px;
          left: 0;
        }
      }
    }
    &.item_02{
      &::before{
        content: "";
        background: url(../images/top/sec02_icon_02.svg) no-repeat;
        background-size: cover;
      }
    }
  }
}


.sec03{
  position: relative;
  height: 100%;
  overflow: hidden;
  .contents_full_01{
    position: relative;
    z-index: 5;
    padding: 150px 0 100px;
    background: #EEF1F3;
    &::before{
      content: "";
      background: linear-gradient(90deg, rgba(215, 250, 242, 0.80) 0%, rgba(117, 217, 214, 0.00) 73.03%);
      width: 75%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;  
    }
    &::after{
      content: "";
      background: url(../images/top/sec03_svg.svg);
      background-size: cover;
      width: 100%;
      height: 998px;
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }
    @media (max-width: 768px) {
      padding: 60px 0;
      &::before{
        background: linear-gradient(90deg, rgba(215, 250, 242, 0.80) 0%, rgba(117, 217, 214, 0.00) 93.47%);
        width: 100%;
      }
      &::after{
        background: url(../images/top/sec03_svg_sp.svg);
        background-size: cover;
        width: 100%;
        height: 400px;
        top: 110px;
      }
    }
    .h2_box{
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .span_01{
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 22px;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
        &::before{
          content: "";
          background: #23B8C5;
          border: 2px solid #6ED1CB;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      .span_02{
        padding: 0 26px;
        width: fit-content;
        margin: 50px auto 100px;
        color: #FFF;
        font-size: 3.6rem;
        font-weight: 600;
        line-height: 180%;
        letter-spacing: 0.288rem;
        background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
        position: relative;
        &::before{
          content: "";
          background: #17B0AA;
          background-size: cover;
          width: 50px;
          height: 1px;
          position: absolute;
          bottom: -50px;
          left: 50%;
          transform: translateX(-50%);
        }
        @media (max-width: 768px) {
          padding: 8px 13px;
          margin: 25px auto 80px;
          font-size: 2.4rem;
          font-style: normal;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.192rem;
          &::before{
            bottom: -40px;
          }
        }
      }
    }
  }
  .contents_full_02{
    position: relative;
    background: #EEF1F3;
    height: 588px;
    &::before{
      content: "";
      background: linear-gradient(90deg, rgba(215, 250, 242, 0.80) 0%, rgba(117, 217, 214, 0.00) 73.03%);
      width: 75%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;  
    }
    @media (max-width: 768px) {
      height: 640px;
      &::before{
        width: 100%;
      }
    }
    @media (max-width: 330px) {
      height: 780px;
    }
  }
}


.pr_era_01{
	min-height: 560px;
	position: relative;
  clip-path: inset(0);
  @media (max-width: 768px) {
    min-height: 482px;
  }
	&::before{
		background-image: url(../images/top/sec03_img_bk.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		content: "";
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;		
	}
  @media (max-width: 768px) {
    &::before{
      background-image: url(../images/top/sec03_img_bk_sp.jpg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
    
    }
  }
}

.sec03_read{
  p{
    text-align: center;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 220%;
    letter-spacing: 0.152rem;
    @media (max-width: 768px) {
      font-size: 1.5rem;
      letter-spacing: 0.12rem;
      text-align: left;
      width: 90%;
      margin: 0 auto;
    }
  }
}

.sec03_conts_01{
  margin: 100px auto 0;
  display: flex;
  gap: 100px;
  justify-content: center;
  align-items: flex-start;
  @media (max-width: 768px) {
    flex-direction: column;
    margin: 30px auto 0;
    width: 90%;
    gap: 60px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
    padding: 30px;
  }
  .sec03_conts_01_item{
    width: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
    @media (max-width: 768px) {
      width: 100%;
      box-shadow: none;
    }
    &+.sec03_conts_01_item{
      margin: 163px 0 0;
      position: relative;
      @media (max-width: 768px) {
        margin: 0;
        &::before{
          content: "";
          background: #17B0AA;
          width: 100%;
          height: 1px;
          position: absolute;
          top: -30px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .img_box{
      width: 500px;
      height: 330px;
      @media (max-width: 768px) {
        width: 100%;
        height: auto;
      }
    }
    .txt_box{
      width: 500px;
      height: 552px;
      padding: 44px 55px;
      position: relative;
      background: #FFF;
      @media (max-width: 768px) {
        width: 100%;
        height: auto;
        padding: 0;
        background: none;
      }
      .bk{
        color: #DCFFF2;
        font-family: var(--font-en_03);
        font-size: 13.3611rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 1.0689rem;
        position: absolute;
        right: 22px;
        bottom: 41px;
        &::before{
          content: "#";
          font-family: var(--font-min_01);
          color: #DCFFF2;
          font-size: 7.361rem;
          font-style: normal;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0.5889rem;
        }
        @media (max-width: 768px) {
          right: 0;
          bottom: -20px;
          font-size: 9rem;
          letter-spacing: 0.72rem;
          &::before{
            font-size: 5.7135rem;
            letter-spacing: 0.4571rem;
          }
        }
      }
      .num{
        @media (max-width: 768px) {
          margin: 20px 0 0;
        }
        .num_01{
          color: var(--font-color_02);
          font-family: var(--font-en_02);
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 220%;
          letter-spacing: 0.128rem;
        }
        .num_02{
          color: var(--font-color_02);
          font-family: var(--font-en_03);
          font-size: 2.1rem;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0.168rem;
          position: relative;
          &::before{
            content: "#";
            color: var(--font-color_02);
            font-family: var(--font-en_03);
            font-size: 2.1rem;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: 0.168rem;
          }
        }
      }
      .tit{
        font-size: 2.4rem;
        font-style: normal;
        font-weight: 600;
        line-height: 200%;
        letter-spacing: 0.192rem;
        padding: 0 0 40px;
        margin: 0 0 40px;
        position: relative;
        &::before{
          content: "";
          background: #17B0AA;
          width: 100%;
          height: 1px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        @media (max-width: 768px) {
          padding: 0 0 16px;
          margin: 0 0 16px;
          font-size: 1.7rem;
          letter-spacing: 0.136rem;
          &::before{
            width: 26px;
            left: 0;
            transform: inherit;
          }
        }
      }
      .txt{
        position: relative;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 220%; /* 3.96rem */
        letter-spacing: 0.144rem;
        @media (max-width: 768px) {
          font-size: 1.5rem;
          font-weight: 500;
          line-height: 200%;
          letter-spacing: 0.12rem;
        }
      }
    }
  }
}


.sec03_conts_02{
  position: absolute;
  top: -380px;
  left: 50%;
  transform: translateX(-50%);
  width: 912px;
  padding: 70px 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  margin: 0 auto;
  gap: 40px;
  @media (max-width: 768px) {
    top: -290px;
    width: 90%;
    padding: 20px 5%;
    gap: 0;
  }
  h3{
    padding: 14px 0;
    text-align: center;
    width: 100%;
    color: #FFF;
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.216rem;
    background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
    @media (max-width: 768px) {
      font-size: 1.8rem;
      line-height: 160%;
      letter-spacing: 0.144rem;
      padding: 7px 0;
      margin: 0 0 14px;
    }
  }
  .sec03_conts_02_ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 13px;
    @media (max-width: 768px) {
      gap: 0;
    }
    li{
      border-bottom: 1px dotted #9DB5BF;
      color: var(--font-color_02);
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 100%;
      letter-spacing: 0.176rem;
      position: relative;
      padding: 16px 0 16px 37px;
      &::before{
        content: "";
        background: url(../images/top/icon_check_02.svg);
        background-size: cover;
        width: 20px;
        height: 20px;
        position: absolute;
        left: 5px;
        top: 18px;
      }
      @media (max-width: 768px) {
        font-size: 1.6rem;
        line-height: 170%;
        letter-spacing: 0.128rem;
        &::before{
          top: 21px;
        }
      }
    }
  }
  .cap{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 200%;
    letter-spacing: 0.144rem;
    @media (max-width: 768px) {
      margin: 30px auto 0;
      font-size: 1.5rem;
      letter-spacing: 0.12rem;
    }
  }
}


.sec04{
  background: #D3EBF1;
  position: relative;
  height: 100%;
  .contents_full{
    position: relative;
    padding: 230px 0 150px;
    &::before{
      content: "";
      background: url(../images/top/sec04_bk_01.png) no-repeat top left;
      background-size: cover;
      width: 75%;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
    }
    &::after{
      content: "";
      background: url(../images/top/sec04_bk_02.png) top right;
      background-size: cover;
      width: 43%;
      height: calc(100% - 110px);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      border-radius: 0 120px 0 0;
    }
    @media (max-width: 768px) {
      padding: 120px 5% 60px;
      background: url(../images/top/sec04_bk_sp.jpg);
      background-size: cover;
      &::before{
        content: none;
      }
      &::after{
        content: none;
      }
    }
  }
}

.sec04_conts{
  position: relative;
  z-index: 3;
  width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  @media (max-width: 768px) {
    width: 100%;
    flex-direction: column;
  }
  .sec04_conts_l{
    .h2_box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      .span_01{
        color: #fff;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 24px;
        &::before{
          content: "";
          background: #23B8C5;
          border: 2px solid #6ED1CB;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      .span_02{
        margin: 40px 0 0;
        color: #FFF;
        font-size: 3.2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 220%; /* 7.04rem */
        letter-spacing: 0.32rem;
        @media (max-width: 768px) {
          margin: 20px 0 0;
          font-size: 2.4rem;
          letter-spacing: 0.24rem;
        }
        +.span_02{
          margin: 16px 0 0;
          @media (max-width: 768px) {
            margin: 0;
          }
        }
      }
    }
    .sec04_read{
      margin: 40px 0 0;
      color: #FFF;
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 220%; /* 3.96rem */
      letter-spacing: 0.144rem;
      @media (max-width: 768px) {
        margin: 30px 0 0;
      }
    }
  }
  .sec04_conts_r{
    width: 560px;
    @media (max-width: 768px) {
      width: 100%;
    }
    h3{
      color: #073C6A;
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 220%;
      letter-spacing: 0.396rem;
      border-bottom: 1px solid #073C6A;
      margin: 0 0 23px;
      @media (max-width: 768px) {
        font-size: 1.8rem;
        letter-spacing: 0.324rem;
        margin: 40px 0 14px;
      }
    }
    .sec04_conts_ul{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 18px;
      @media (max-width: 768px) {
        gap: 14px 13px;
      }
      li{
        text-align: center;
        border-radius: 3px;
        background: #0065AF;
        box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
        width: 270px;
        padding: 17px 0;
        color: #FFF;
        font-size: 2rem;
        font-weight: 600;
        letter-spacing: 0.2rem;
        @media (max-width: 768px) {
          width: calc((100% - 13px) / 2);
          font-size: 1.7rem;
          letter-spacing: 0.17rem;
          padding: 10px 0;
          border-radius: 2px;
        }
      }
    }
  }
}

.sec05{
  overflow: hidden;
  .contents_full{
    position: relative;
    padding: 166px 0 0;
    @media (max-width: 768px) {
      padding: 138px 0 0;
    }
    .side_tit{
      position: absolute;
      color: #FFF;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      font-family: var(--font-en_02);
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.128rem;
      position: absolute;
      left: 40px;
      top: 70px;
      padding: 27px 0 0;
      transition: all .3s;
      &::before{
        content: "";
        background: #23B8C5;
        border: 2px solid #6ED1CB;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      @media (max-width: 1300px) {
        left: 5px;
      }
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
        left: inherit;
        top: 50px;
        right: 20px;
      }
    }
  }
}


.pr_era_02{
	position: relative;
  clip-path: inset(0);
	&::before{
		background-image: url(../images/top/sec05_bk_01.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		content: "";
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;		
	}
  &::after{
    content: "";
    background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
  }
  @media (max-width: 768px) {
    height: 100%;
    &::before{
      background-image: url(../images/top/sec05_bk_01_sp.jpg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;		
    }
    &::after{
      content: none;
    }
  }

}

.sec05_conts_wrap{
  width: 1140px;
  margin: 0 auto;
  position: relative;
  @media (max-width: 768px) {
    width: 90%;
  }
  .txt_01{
    margin: 0 0 13px;
    color: #DAFCFA;
    font-family: var(--font-en_02);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 220%;
    letter-spacing: 0.128rem;
    position: relative;
    &::before{
      content: "01";
      color: rgba(56, 235, 228, 0.90);
      font-family: var(--font-en_03);
      font-size: 17rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 1.36rem;
      position: absolute;
      left: -115px;
      top: -65px;
      z-index: -1;
    }
    @media (max-width: 768px) {
      line-height: 180%;
      padding: 0 0 0 33px;
      margin: 0 0 10px;
      &::before{
        content: "01";
        color: #38EBE4;
        font-size: 13rem;
        letter-spacing: 0.78rem;
        left: -5px;
        top: -75px;
      }
    }
    .span{
      padding: 0 0 0 5px;
      color: #DAFCFA;
      font-family: var(--font-en_02);
      font-size: 2.6rem;
      font-weight: 400;
      line-height: 220%;
      letter-spacing: 0.208rem;
      @media (max-width: 768px) {
        display: block;
        line-height: 180%;
        padding: 0;
      }
    }
  }
  .txt_02{
    margin: 0 0 30px;
    @media (max-width: 768px) {
      margin: 0 0 50px;
    }
    .span_01{
      color: #FFF;
      text-shadow: 0px 0px 8px rgba(19, 65, 71, 0.30);
      font-family: "Noto Serif JP";
      font-size: 2.9rem;
      font-style: normal;
      font-weight: 700;
      line-height: 220%; /* 6.38rem */
      letter-spacing: 0.232rem;
      @media (max-width: 768px) {
        font-size: 1.8rem;
        letter-spacing: 0.144rem;
      }
    }
    .span_02{
      margin: 0 0 0 5px;
      display: inline-block;
      background: #FFF;
      padding: 15px 18px;
      box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
      position: relative;
      @media (max-width: 768px) {
        margin: 10px 0 0;
      }
      .span_03{
        color: var(--font-color_02);
        font-size: 4rem;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0.32rem;
        @media (max-width: 768px) {
          font-size: 2.6rem;
          letter-spacing: 0.208rem;
        }
        .span{
          font-size: 3.6rem;
          letter-spacing: 0.288rem;
          @media (max-width: 768px) {
            font-size: 2.6rem;
            letter-spacing: 0.208rem;
          }
        }
      }
      .span_04{
        color: var(--font-color_02);
        font-size: 3.1rem;
        font-weight: 600;
        line-height: 100%;
        letter-spacing: 0.248rem;
        @media (max-width: 768px) {
          font-size: 1.8rem;
          letter-spacing: 0.144rem;
        }
      }
    }
  }
}

.sec05_conts{
  width: 100%;
  display: flex;
  background: #FFF;
  height: 504px;
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  padding: 50px;
  position: relative;
  overflow: hidden;
  gap: 80px;
  &::before{
    content: "SPECIAL";
    color: rgba(129, 240, 214, 0.40);
    font-family: var(--font-en_03);
    font-size: 11.4rem;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.456rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    right: 0;
    top: 15px;
  }
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 0;
    height: auto;
    padding: 30px 8%;
    &::before{
      content: "SPECIAL";
      color: rgba(129, 240, 214, 0.30);
      font-size: 10rem;
      letter-spacing: 0.4rem;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      position: absolute;
      right: 0;
      top: 16px;
    }
  }
  .sec05_conts_sp_txt{
    display: none;
    @media (max-width: 768px) {
      display: block;
      color: #5A6772;
      font-family: var(--font-en_02);
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.112rem;
      position: relative;
      padding: 0 0 0 18px;
      margin: 0 0 17px;
      &::before{
        content: "";
        background: #52AEB6;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translatey(-50%);
      }
    }

  }
  .sec05_conts_l{
    width: 336px;
    @media (max-width: 768px) {
      width: 82%;
      margin: 0 auto;
      position: relative;
    }
  }
  .sec05_conts_r{
    width: 555px;
    @media (max-width: 768px) {
      width: 100%;
    }
    .sec05_conts_r_txt_01{
      color: #5A6772;
      font-family: var(--font-en_02);
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.112rem;
      position: relative;
      padding: 0 0 0 18px;
      margin: 0 0 22px;
      &::before{
        content: "";
        background: #52AEB6;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        display: none;
      }
    }
    .name_box{
      display: flex;
      flex-direction: column;
      @media (max-width: 768px) {
        margin: 30px 0 0;
      }
      .name_01{
        color: var(--font-color_02);
        font-size: 2rem;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0.16rem;
        margin: 0 0 11px;
        display: block;
        @media (max-width: 768px) {
          font-size: 1.8rem;
          line-height: 150%;
          letter-spacing: 0.144rem;
          margin: 0 0 10px;
        }
      }
      .name_02{
        display: block;
        color: var(--font-color_02);
        font-size: 2.2rem;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.176rem;
        @media (max-width: 768px) {
          font-size: 1.8rem;
          letter-spacing: 0.144rem;
        }
        .span{
          padding: 0 12px;
          background: var(--font-color_02);
          color: #FFF;
          font-size: 3rem;
          font-weight: 500;
          line-height: 100%;
          letter-spacing: 0.24rem;
          margin: 0 10px 0 0;
          @media (max-width: 768px) {
            font-size: 2.6rem;
            letter-spacing: 0.208rem;
          }
        }
      }
      .neme_03{
        display: block;
        margin: 8px 0 0;
        color: var(--font-color_02);
        font-size: 2.8rem;
        font-weight: 500;
        line-height: 220%;
        letter-spacing: 0.224rem;
        @media (max-width: 768px) {
          margin: 6px 0 0;
          font-size: 2.2rem;
          line-height: 220%;
          letter-spacing: 0.176rem;
        }
      }
    }
    .txt_02{
      margin: 30px 0 0;
      font-size: 1.7rem;
      font-weight: 500;
      line-height: 220%;
      letter-spacing: 0.136rem;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        line-height: 200%;
        letter-spacing: 0.12rem;
      }
    }
  }
}

.sec05_conts_02{
  width: 1140px;
  margin: 0 auto;
  position: relative;
  top: 150px;
  @media (max-width: 768px) {
    width: 100%;
    margin: 85px auto 0;
    top: inherit;
    text-align: center;
  }
  .txt_01{
    margin: 0 0 13px;
    color: #DAFCFA;
    font-family: var(--font-en_02);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 220%;
    letter-spacing: 0.128rem;
    position: relative;
    &::before{
      content: "ORDINARY";
      color: rgba(64, 228, 222, 0.50);
      font-family: var(--font-en_03);
      font-size: 14rem;
      font-weight: 400;
      line-height: 100%;
      position: absolute;
      left: -125px;
      top: -65px;
      z-index: -1;
    }
    @media (max-width: 768px) {
      font-size: 1.5312rem;
      letter-spacing: 0.1225rem;
      margin: 0;
      line-height: 1.3;
      &::before{
        font-size: 7.5748rem;
        left: inherit;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .span{
      padding: 0 0 0 5px;
      color: #DAFCFA;
      font-family: var(--font-en_02);
      font-size: 2.6rem;
      font-weight: 400;
      line-height: 220%;
      letter-spacing: 0.208rem;
      @media (max-width: 768px) {
        font-size: 2.4883rem;
        letter-spacing: 0.1991rem;
        line-height: 1.3;
      }
    }
  }
}

.swiper_conts02{
	position: relative;
	overflow: hidden;
	.swiper02 {
		padding: 170px 0 80px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		list-style: none;
		z-index: 1;
    @media (max-width: 768px) {
      padding: 70px 0 60px;
    }
		.swiper-slide{
			width: 1140px;
			position: relative;
      height: 521px;
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      justify-content: space-between;
      &::before{
        content: "";
        background: var(--font-color_02);
        width: 10px;
        height: 74px;
        position: absolute;
        left: 0;
        top: 140px;
      }
      &.bg_green{
        background: rgba(234, 249, 255, 0.95);
      }
			@media (max-width: 768px) {
        justify-content: flex-end;
        flex-direction: column-reverse;
				width: 92%;
				left: 0;
        height: 625px;
        &::before{
          width: 3px;
          height: 65px;
          top: 258px;
        }
			}
      .slide_l{
        width: 486px;
        padding: 70px 0 70px 80px;
        @media (max-width: 768px) {
          width: 100%;
          padding: 26px 20px;
        }
        .tit{
          .num{
            .txt{
              position: relative;
              color: var(--font-color_02);
              font-family: var(--font-en_03);
              font-size: 3.5rem;
              font-weight: 400;
              line-height: 100%;
              letter-spacing: 0.28rem;
              &::before{
                content: "#";
                color: var(--font-color_02);
                font-family: var(--font-en_03);
                font-size: 2rem;
                font-weight: 400;
                line-height: 100%;
                letter-spacing: 0.16rem;
              }
              &::after{
                content: "/";
                color: var(--font-color_02);
                font-family: var(--font-en_03);
                font-size: 2rem;
                font-weight: 400;
                line-height: 100%;
                letter-spacing: 0.16rem;
              }
              @media (max-width: 768px) {
                font-size: 2.2rem;
                letter-spacing: 0.176rem;
                &::before{
                  font-size: 2rem;
                  letter-spacing: 0.16rem;
                }
                &::after{
                  font-size: 2rem;
                  letter-spacing: 0.16rem;
                }
              }
            }
          }
          .tit_txt{
            color: #5A6772;
            font-family: var(--font-en_02);
            font-size: 1.4rem;
            font-weight: 400;
            line-height: 100%; /* 1.4rem */
            letter-spacing: 0.112rem;
            @media (max-width: 768px) {
              font-size: 1.3rem;
              letter-spacing: 0.104rem;
            }
          }
        }
        h3{
          margin: 19px 0 22px;
          color: var(--font-color_02);
          font-size: 2.4rem;
          font-weight: 500;
          line-height: 220%;
          letter-spacing: 0.192rem;
          @media (max-width: 768px) {
            margin: 20px 0;
            font-size: 2rem;
            line-height: 200%;
            letter-spacing: 0.16rem;
          }
        }
        .slide_txt{
          font-size: 1.7rem;
          font-weight: 500;
          line-height: 220%; /* 3.74rem */
          letter-spacing: 0.136rem;
          @media (max-width: 768px) {
            font-size: 1.5rem;
            line-height: 200%;
            letter-spacing: 0.12rem;
          }
        }
      }
      .slide_r{
        @media (max-width: 768px) {
          height: 180px;
        }
        &.slide_r_01{
          width: 574px;
          padding: 70px 0 70px;
          @media (max-width: 768px) {
            width: 100%;
            height: 180px;
            padding: 0;
          }
        }
        &.slide_r_02{
          width: 590px;
          padding: 82px 80px 0 0;
          @media (max-width: 768px) {
            width: 100%;
            height: 180px;
            padding: 0;
          }
        }
        &.slide_r_03{
          width: 590px;
          padding: 124px 77px 0 0;
          @media (max-width: 768px) {
            width: 100%;
            height: 180px;
            padding: 0;
          }
        }
        &.slide_r_05{
          width: 574px;
          height: auto;
          padding: 70px 0 0 0;
          @media (max-width: 768px) {
            width: 100%;
            height: 180px;
            padding: 0;
          }
        }
        .youtube{
          padding: 110px 80px 110px 0;
          @media (max-width: 768px) {
            padding: 0;
            height: 180px;
          }
          iframe{
            width: 510px;
            height: 288px;
            @media (max-width: 768px)  {
              width: 100%;
              height: 180px;
              aspect-ratio: 16 / 9;
            }
          }
        }
      }
		}
	}
	
	.swiper-pagination-bullet{
		opacity: .2;
	}
	.swiper-pagination-bullet-active{
		opacity: 1;
	}
  .swiper-pagination_wrap{
    position: absolute;
    width: 1140px;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    @media (max-width: 768px) {
      width: 100%;
      top: 20px;
      left: inherit;
      transform: inherit;
    }
    .span_01{
      color: #FFF;
      font-family: var(--font-en_03);
      font-size: 4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.32rem;
      position: relative;
      left: 450px;
      &::before{
        content: "/";
        font-size: 5rem;
        position: absolute;
        left: -19px;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        left: 80px;
        font-size: 3rem;
        letter-spacing: 0.24rem;
        &::before{
          left: -18px;
          font-size: 4rem;
        }
      }
    }
  }
	.swiper-pagination {
		z-index: 10;
		.swiper-pagination-current{
      color: #FFF;
      text-align: right;
      font-family: "Libre Caslon Display";
      font-size: 4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.32rem;
      @media (max-width: 768px) {
        font-size: 3rem;
        letter-spacing: 0.24rem;
      }
    }
    .swiper-pagination-total{
      display: none;
    }
	}
	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    top:  0;
    left: 405px;
    bottom: inherit;
    width: 50px;
    transform: inherit;
    overflow: hidden;
    height: 36px;
    @media (max-width: 768px) {
      left: 20px;
      width: 40px;
    }
	}
	.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 5px;
	}
	.swiper-pagination-bullet {
	}
	.swiper-button_wrap{
		width: 1140px;
		position: absolute;
		top: 85px;
		left: 50%;
		transform: translateX(-50%);
		margin: 0 auto;
		z-index: 10;
    height: 50px;
		@media (max-width: 768px) {
			width: 150px;
			height: 36px;
      top: 15px;
      left: inherit;
      transform: inherit;
      right: 5%;
		}
		.swiper-button_bk{
			position: relative;
			width: 180px;
			height: 50px;
			margin: 0 0 0 auto;
			@media (max-width: 768px) {
				margin: 0 auto;
        width: 150px;
				height: 36px;
			}
		}
	}
	.swiper-button-prev, .swiper-button-next {
		position: absolute;
    border-radius: 24px;
    border: 1.5px solid #FFF;
    padding: 18px 36px;
    transition: all .3s;
    pointer-events: all;
    @media (min-width: 769px){ 
      &:hover{
        background: #238C88;
      }
    }
    @media (max-width: 768px) {
      padding: 10px 33px;
    }
	}
  
	.swiper-button-prev{
		left: 0;
		right: auto;
	}
	.swiper-button-next{
	    right: 0;
    	left: auto;
	}
	.swiper-button-prev:after {
		content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

		width: 14px;
    height: 12px;
		background: url(../images/top/sec05_arrow_l.svg);
		background-size: cover;
		@media (max-width: 768px) {
      width: 14px;
      height: 11px;
		}
	}
	.swiper-button-next:after{
		content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 12px;
		background: url(../images/top/sec05_arrow_r.svg);
		background-size: cover;
		@media (max-width: 768px) {
      width: 14px;
      height: 11px;
		}
	}
	.swiper-button-prev:after, .swiper-button-next:after {

	}
}


.sec06{
  .contents_full{
    overflow: hidden;
    position: relative;
    padding: 166px 0 0;
    @media (max-width: 768px) {
      padding: 124px 0 58px;
    }
    .side_tit{
      position: absolute;
      color: #FFF;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      font-family: var(--font-en_02);
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.128rem;
      position: absolute;
      left: 40px;
      top: 70px;
      padding: 22px 0 0;
      transition: all .3s;
      &::before{
        content: "";
        background: #23B8C5;
        border: 2px solid #6ED1CB;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      @media (max-width: 1300px) {
        left: 5px;
      }
      @media (max-width: 768px) {
        font-size: 1.4rem;
        letter-spacing: 0.112rem;
        left: inherit;
        top: 50px;
        right: 20px;
        color: var(--font-color_01);
      }
    }
  }
}

.sec06_conts_wrap{
  width: 1140px;
  margin: 0 auto;
  position: relative;
  @media (max-width: 768px) {
    width: 90%;
  }
  .txt_01{
    margin: 0 0 29px;
    color: #0069CA;
    font-family: var(--font-en_02);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 220%;
    letter-spacing: 0.128rem;
    position: relative;
    z-index: 2;
    &::before{
      content: "02";
      color: rgba(39, 177, 255, 0.80);
      font-family: var(--font-en_03);
      font-size: 17rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.34rem;
      position: absolute;
      left: -115px;
      top: -65px;
      z-index: -1;
    }
    @media (max-width: 768px) {
      line-height: 180%;
      padding: 0 0 0 33px;
      margin: 0 0 10px;
      &::before{
        content: "02";
        color: rgba(39, 177, 255, 0.80);
        font-size: 13rem;
        letter-spacing: 0.78rem;
        left: -5px;
        top: -75px;
      }
    }
    .span{
      padding: 0 0 0 5px;
      color: #0069CA;
      font-family: var(--font-en_02);
      font-size: 2.6rem;
      font-weight: 400;
      line-height: 220%;
      letter-spacing: 0.208rem;
      @media (max-width: 768px) {
        display: block;
        line-height: 180%;
        padding: 0;
      }
    }
  }
  .txt_02{
    margin: 0 0 37px;
    display: flex;
    flex-direction: column;
    @media (max-width: 768px) {
      margin: 0 0 40px;
    }
    .span_01{
      color: #002664;
      font-size: 2.9rem;
      font-style: normal;
      font-weight: 700;
      line-height: 220%; /* 6.38rem */
      letter-spacing: 0.232rem;
      @media (max-width: 768px) {
        font-size: 1.8rem;
        letter-spacing: 0.144rem;
      }
    }
    .pc{
      .span_02{
        width: fit-content;
        margin: 0;
        display: inline-block;
        padding: 15px 18px;
        position: relative;
        background: var(--grad_blue_03, linear-gradient(270deg, #0676CA 0%, #3BADC8 100%));
        box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
        @media (max-width: 768px) {
          margin: 10px 0 0;
        }
        .span_03{
          color: #FFF;
          font-size: 3.6rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.288rem;
          @media (max-width: 768px) {
            font-size: 2.6rem;
            letter-spacing: 0.208rem;
          }
        }
        .span_04{
          color: #FFF;
          font-size: 3.1rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.248rem;
          @media (max-width: 768px) {
            font-size: 1.8rem;
            letter-spacing: 0.144rem;
          }
        }
      }
    }
    .sp{
      .span_02{
        display: flex;
        flex-direction: column;
        gap: 11px;
        @media (max-width: 768px) {
          margin: 10px 0 0;
        }
        .span_03{
          width: fit-content;
          display: block;
          padding: 12px 18px;
          position: relative;
          background: var(--grad_blue_03, linear-gradient(270deg, #0676CA 0%, #3BADC8 100%));
          box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
          
          color: #FFF;
          font-size: 3.6rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.288rem;
          @media (max-width: 768px) {
            font-size: 2.6rem;
            letter-spacing: 0.208rem;
          }
        }
        .span_04{
          width: fit-content;
          display: block;
          padding: 12px 18px;
          position: relative;
          background: var(--grad_blue_03, linear-gradient(270deg, #0676CA 0%, #3BADC8 100%));
          box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);

          color: #FFF;
          font-size: 3.1rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.248rem;
          @media (max-width: 768px) {
            font-size: 1.8rem;
            letter-spacing: 0.144rem;
          }
          .span{
            font-size: 2.6rem;
            letter-spacing: 0.208rem;
            padding: 0 8px 0 0;
          }
        }
      }
    }
  }
}

.pr_era_03{
	position: relative;
  clip-path: inset(0);
	&::before{
		background-image: url(../images/top/sec06_bk_01.jpg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		content: "";
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;		
	}
  @media (max-width: 768px) {
    height: 100%;
    &::before{
      background-image: url(../images/top/sec06_bk_01_sp.jpg);
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;		
    }
  }

}

.swiper_conts03{
  position: relative;
  top: 0;
  @media (max-width: 768px){
    top: inherit;
    margin: 0 auto;
    position: relative;
    transform: inherit;
  }			
  .swiper03 {
    width: 2300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 100px 0 100px;
    z-index: 1;
    @media (max-width: 768px){
      width: 100%;
      padding: 70px 0 60px;
      left: 5%;
    }
    .swiper-slide{
      width: 493px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      @media (max-width: 768px) {
        width: 92%;
        height: 595px;
      }
      .slide_up{
        width: 100%;
        height: 367px;
        position: relative;
        @media (max-width: 768px) {
          height: auto;
        }
        .num{
          width: 121px;
          height: 79px;
          border-radius: 0px 0px 0px 60px;
          background: var(--grad_blue_03, linear-gradient(270deg, #0676CA 0%, #3BADC8 100%));
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          right: 0;
          top: 0;
          color: #FFF;
          font-family: var(--font-en_01);
          font-size: 4.1rem;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0.3286rem;
          z-index: 2;
          &::before{
            content: "#";
            color: #FFF;
            text-align: right;
            text-shadow: 0px 0px 16.981px rgba(134, 141, 142, 0.45);
            font-family: var(--font-en_01);
            font-size: 3.5rem;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: 0.2805rem;
          }
          @media (max-width: 768px) {
            width: 73px;
            height: 53px;
            font-size: 2.6rem;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: 0.208rem;
            border-radius: 0px 0px 0px 40px;
            &::before{
              font-size: 2rem;
              font-style: normal;
              font-weight: 400;
              line-height: 100%; /* 2rem */
              letter-spacing: 0.16rem;
            }
          }
        }
        .sub_txt{
          position: absolute;
          left: 25px;
          bottom: 20px;
          -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
          color: #FFF;
          text-align: left;
          font-family: var(--font-en_02);
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0.112rem;
          z-index: 2;
          @media (max-width: 768px) {
            left: 10px;
            bottom: 10px;
            font-size: 1.3rem;
            letter-spacing: 0.104rem;
            -ms-writing-mode: inherit;
            writing-mode: inherit;
          }
        }
        .img_box{
          position: relative;
          z-index: 1;
        }
      }
      .slide_dw{
        width: 100%;
        height: 500px;
        background: rgba(255, 255, 255, 0.90);
        padding: 50px 60px 60px;
        &.bk_bl{
          background: rgba(239, 251, 255, 0.90);
        }
        @media (max-width: 768px) {
          height: 395px;
          padding: 30px 5%;
        }
        h3{
          color: #0676CA;
          font-size: 2.4rem;
          font-weight: 600;
          line-height: 220%;
          letter-spacing: 0.192rem;
          margin: 0 0 24px;
          @media (max-width: 768px) {
            font-size: 2rem;
            font-weight: 600;
            line-height: 200%; /* 4rem */
            letter-spacing: 0.16rem;
          }
        }
        .txt{
          font-size: 1.7rem;
          font-weight: 500;
          line-height: 220%;
          letter-spacing: 0.136rem;
          @media (max-width: 768px) {
            font-size: 1.5rem;
            line-height: 200%;
            letter-spacing: 0.12rem;
          }
        }
      }
    }
  }
  
  .swiper-pagination-bullet{
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    opacity: 1;
  }
  .swiper-pagination_wrap{
    position: absolute;
    width: 1140px;
    top: 12px;
    left: 0;
    @media (max-width: 768px) {
      width: 100%;
      top: 20px;
      left: inherit;
      transform: inherit;
      left: -4%;
    }
    .span_01{
      position: relative;
      top: 0;
      left: 54px;
      color: #073C6A;
      font-family: var(--font-en_03);
      font-size: 3rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.24rem;
      &::before{
        content: "/";
        color: #073C6A;
        font-family: var(--font-en_03);
        font-size: 3rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.24rem;
        position: absolute;
        left: -15px;
        top: 50%;
        transform: translatey(-50%);
      }
      @media (max-width: 768px) {
        left: 80px;
        font-size: 3rem;
        letter-spacing: 0.24rem;
        &::before{
          left: -18px;
          font-size: 4rem;
        }
      }
    }
  }
  .swiper-pagination {
		z-index: 10;
    text-align: left;
    transition: inherit;
    transform: inherit;
    z-index: 10;
    font-size: inherit;;
		.swiper-pagination-current{
      color: #FFF;
      text-align: left;
      color: #073C6A;
      font-family: var(--font-en_03);
      font-size: 3rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.24rem;
    }
    .swiper-pagination-total{
      display: none;
    }
	}

  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    position: absolute;
    width: inherit;
    left: inherit;
    bottom: inherit;
    width: 42px;
    transform: inherit;
    overflow: hidden;
    height: 36px;
    @media (max-width: 768px) {
      left: 20px;
      width: 40px;
    }
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
  }
  .swiper-pagination-bullet {
    width: calc(525px / 4);
    height: 2px;
    display: inline-block;
    border-radius: 0%;
    background: #fff;
    transition: all .3s;

    @media (max-width: 768px){
      width: calc(100% / 4);
    }
    &.swiper-pagination-bullet-active {
      transition: all .3s;
    }
  }

  .swiper-button_wrap{
		width: 1140px;
		position: absolute;
		top: 0;
    left: 0;
		margin: 0 auto;
		z-index: 10;
    height: 50px;
    @media (max-width: 768px) {
			width: 150px;
			height: 36px;
      top: 15px;
      left: inherit;
      transform: inherit;
      right: 11%;
      margin: 0 0 0 auto;
		}
		.swiper-button_bk{
			position: relative;
			width: 180px;
			height: 50px;
      left: 120px;
      top: 0px;
      @media (max-width: 768px) {
				margin: 0 auto;
        width: 150px;
				height: 36px;
        left: inherit;
			}
		}
	}
	.swiper-button-prev, .swiper-button-next {
		position: absolute;
    border-radius: 24px;
    border: 1.5px solid #073C6A;
    padding: 18px 36px;
    transition: all .3s;
    pointer-events: all;
    @media (min-width: 769px){ 
      &:hover{
        background: #B4D8F3;
      }
    }
    @media (max-width: 768px) {
      padding: 10px 33px;
    }
	}
  
	.swiper-button-prev{
		left: 0;
		right: auto;
	}
	.swiper-button-next{
	    right: 0;
    	left: auto;
	}
	.swiper-button-prev:after {
		content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

		width: 14px;
    height: 12px;

    -webkit-mask-image: url(../images/top/sec05_arrow_l.svg);
    mask-image: url(../images/top/sec05_arrow_l.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #073C6A;

		@media (max-width: 768px) {
			width: 14px;
      height: 12px;
		}
	}
	.swiper-button-next:after{
		content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 12px;

    -webkit-mask-image: url(../images/top/sec05_arrow_r.svg);
    mask-image: url(../images/top/sec05_arrow_r.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #073C6A;
		@media (max-width: 768px) {
			width: 14px;
      height: 12px;
		}
	}
	.swiper-button-prev:after, .swiper-button-next:after {

	}
}


.sec07{
  background: #EEF1F3;
  padding: 150px 0;
  @media (max-width: 768px) {
    padding: 60px 0 ;
  }
  .contents{
    @media (max-width: 768px) {
      padding: 0;
    }
    .h2_box{
      @media (max-width: 768px) {
        padding: 0 5%;
      }
      .span{
        display:blank;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 24px;
        &::before{
          content: "";
          background: #23B8C5;
          width: 14px;
          height: 14px;
          border: 2px solid #6ED1CB;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      h2{
        margin: 40px 0 0;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 220%; /* 7.7rem */
        letter-spacing: 0.28rem;
        @media (max-width: 768px) {
          margin: 20px 0 0;
          font-size: 2.4rem;
          font-weight: 600;
          line-height: 220%;
          letter-spacing: 0.24rem;
        }
      }
    }
  }
}

.sec07{
  .tabs {
    width: 100%;
    margin: 53px auto 0;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0px 0px 8px rgba(61, 94, 88, 0.25));
    @media (max-width: 768px){
      margin: 40px auto 0;
      position: relative;
    }

  }
  .tab_item {
    cursor: pointer;
    width: calc((100% - 14px) / 2);
    text-align: center;
    color: #555;
    /* box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25); */
    background: #C8D7DF;
    height: 83px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    transition: all .3s;
    position: relative;
    z-index: 1;
    border-radius: 10px 10px 0px 0px;
    @media (max-width: 768px) {
      width: calc((100% - 0px) / 2);
      height: 66px;
      justify-content: flex-start;
    }
    .span{
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 150%;
      position: relative;
      padding: 0 0 0 50px;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 150%;
        text-align: left;
      }
    }
    &.tab_item_md{
      margin: 0 14px 0 0;
      @media (max-width: 768px){
        margin: 0 ;
      }
    }
    &.tab_item_01{
      .span{
        &::before{
          content: "";
          -webkit-mask-image: url(../images/top/icon_home.svg);
          mask-image: url(../images/top/icon_home.svg);
          -webkit-mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          background-color: #555;
  
          width: 39px;
          height: 37px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          padding: 0 0 0 61px;
          &::before{
            width: 29px;
            height: 29px;
            left: 21px;
          }
        }
      }
      @media (min-width: 769px){ 
        &:hover{
          background: var(--font-color_02);
          color: #fff;
          .span{
            &::before{
              background-color: #fff;
        
            }
          }
        }
      }
    }
    &.tab_item_02{
      .span{
        &::before{
          content: "";
          -webkit-mask-image: url(../images/top/icon_hos.svg);
          mask-image: url(../images/top/icon_hos.svg);
          -webkit-mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          background-color: #555;
  
  
          width: 39px;
          height: 37px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          padding: 0 0 0 68px;
          &::before{
            width: 29px;
            height: 29px;
            left: 29px;
          }
        }

      }
      @media (min-width: 769px){ 
        &:hover{
          background: #0778B7;
          color: #fff;
          .span{
            &::before{
              background-color: #fff;
        
            }
          }
        }
      }
    }
  }
  input[name="tab_item"] {
    display: none;
  }
  .tab_content {
    display: none;
    clear: both;
    +.tab_content_02{
      .tab_scroll{
        @media (max-width: 768px) {
          &::after{
            content: "";
            background: url(../images/top/tab_scroll_txt_02.svg);
            background-size: cover;
            height: 165px;
          }
        }
      }
    }
    .tab_scroll{
      display: none;
      @media (max-width: 768px) {
        display: block;
        position: absolute;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        right: 10px;
        top: 90px;
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 100%; /* 1.2rem */
        letter-spacing: 0.096rem;
        &::before{
          content: "";
          background: url(../images/top/tab_scroll.svg);
          background-size: cover;
          width: 4px;
          height: 63px;
          position: absolute;
          top: 45px;
          right: 5px;
        }
        &::after{
          content: "";
          background: url(../images/top/tab_scroll_txt.svg);
          background-size: cover;
          width: 12px;
          height: 143px;
          position: absolute;
          top: 159px;
          right: 2px;
        }
      }
    }
    .tab_content_bk{
      display: flex;
      /* box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25); */
      @media (max-width: 768px) {
        box-shadow: none;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        height: calc(100vh - 190px);
        overflow-y: scroll;
      }
    }
    &.tab_content_02{
      .tab_btn_wrap{
        border-bottom: 2px solid #0778B7;
        border-left: 2px solid #0778B7;
        background: #ECFAFF;
        &::before{
          content: "Taking laxatives at the clinic";
          color: #6DA6E8;
        }
        .btn_style{
          border-bottom: 1px solid #A0C0E4;
          &::before{
            color: #073C6A;
          }
          .span{  
            .span02{
              color: #073C6A;
            }
            &::before{
              background-color: #073C6A;
            }
          }
          @media (min-width: 769px){ 
            &:hover{
              background: #D3EFFF;
            }
          }
          &.active{
            background: #D3EFFF;
            .span{
              &::before{
                right: 5px;
              }					
            }
          }
    
    
        }
      }
      .conts_wrap{
        border-right: 2px solid #0778B7;
        border-bottom: 2px solid #0778B7;
        .process_box{
          .process_up{
            .process_num{
              background: #0778B7;
            }
            .process_tit{
              color: #073C6A;
            }
          }
          .cotion{
            background: #ECFAFF;
            color: #073C6A;
    
          }
          .arrow_wrap{
            .arrow_item{
              border: 1.5px solid #073C6A;
              &.arrow_prev{
                &::before{
                  background-color: #073C6A;
                }
              }
              &.arrow_next{
                &::before{
                  background-color: #073C6A;
                }
              }
              @media (min-width: 769px){ 
                &:hover{
                  background: #073C6A;
                }
              }
            }
          }
        }
      }
    }
    .tab_btn_wrap{
      border-radius: 0px 0px 0px 10px;
      border-bottom: 2px solid var(--font-color_02);
      border-left: 2px solid var(--font-color_02);
      background: #EDFCFA;
      width: 350px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      counter-reset: tab_btn;
      padding: 118px 40px;
      position: relative;
      &::before{
        content: "Taking laxatives at home";
        position: absolute;
        left: 40px;
        top: 80px;
        color: #5EA9A5;
        text-align: right;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 220%; /* 3.52rem */
        letter-spacing: 0.128rem;
      }
      @media (max-width: 768px){
        gap: 12px 8px;
        padding: 24px 4% 40px;
        justify-content: space-between;
      }
      .btn_style{
        position: relative;
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        cursor: pointer;
        background: transparent;
        border-radius: 4px 0px 0px 4px;
        transition: all .3s;
        border-bottom: 1px solid #8CC2C0;
        &.btn2gyo{
          height: 86px;
        }
        &::before{
          counter-increment: tab_btn;
          content: counter(tab_btn , decimal-leading-zero );
          color: #62C8D0;
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 3.6rem;
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translatey(-50%);
          @media (max-width: 768px){
            content: counter(tab_btn , decimal-leading-zero );
            left: 2px;
            font-size: 1.4rem;
            font-weight: 500;
            line-height: 3.6rem;
          }
        }
        .span{
          padding: 0 0 0 40px;
  
          .span02{
            position: relative;
            color: #238C88;
            font-size: 1.7rem;
            font-style: normal;
            font-weight: 600;
            line-height: 220%; /* 3.74rem */
            letter-spacing: 0.085rem;
          }
          &::before{
            content: "";
            -webkit-mask-image: url(../images/top/icon_arrow.svg);
            mask-image: url(../images/top/icon_arrow.svg);
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #238C88;
            width: 6px;
            height: 10px;
            position: absolute;
            right: 23px;
            top: 50%;
            transform: translatey(-50%);
            transition: all .3s;
          }
        }
        @media (min-width: 769px){ 
          &:hover{
            background: #CDFFE4;
            .span{
              &::before{
                right: 5px;
              }					
            }
          }
        }
        &.active{
          background: #CDFFE4;
          .span{
            &::before{
              right: 5px;
            }					
          }
        }
  
  
      }
    }
    .conts_wrap{
      width: 850px;
      border-radius: 0px 0px 10px 0px;
      border-right: 2px solid var(--font-color_02);
      border-bottom: 2px solid var(--font-color_02);
      background: #FFF;
      height: 830px;
      .reset{
        display:none;
        &.active{
          display: block;
        }
      }
      .process_box{
        padding: 74px 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .process_up{
          width: 100%;
          display: flex;
          align-items: center;
          margin: 0 0 40px;
          .process_num{
            border-radius: 0px 8px 8px 0px;
            background: var(--font-color_02);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 122px;
            height: 52px;
            .process_num_01{
              color: #FFF;
              font-family: var(--font-en_02);
              font-size: 1.8rem;
              font-weight: 400;
              line-height: 100%; /* 1.8rem */
              letter-spacing: 0.144rem;
              .process_num_02{
                color: #FFF;
                font-family: var(--font-en_01);
                font-size: 2.6rem;
                font-weight: 400;
                line-height: 100%; /* 2.6rem */
              }
            }
          }
          .process_tit{
            padding: 0 0 0 25px;
            color: #238C88;
            font-size: 2.6rem;
            font-weight: 600;
            line-height: 150%; /* 3.9rem */
            letter-spacing: 0.208rem;
          }
        }
        .process_l{
          width: 420px;
          padding: 0 0 0 40px;
          .process_l_txt{
            font-size: 1.7rem;
            font-weight: 500;
            line-height: 200%;
            letter-spacing: 0.136rem;
          }
        }
        .process_r{
          width: 410px;
          padding: 0 40px 0 0;
        }
        .cotion{
          margin: 40px auto 0;
          width: calc(100% - 80px);
          font-family: var(--font-go_01);
          padding: 20px 30px;
          border-radius: 10px;
          background: #EDFCFA;
          color: #238C88;
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 180%;
          letter-spacing: 0.112rem;
  
        }
        .process_cen_img{
          width: 585px;
          margin: 0 auto 40px;
        }
        .process_cen_txt{
          width: calc(100% - 80px);
          margin: 0 auto;
          p{
            font-size: 1.7rem;
            font-weight: 500;
            line-height: 200%; /* 3.4rem */
            letter-spacing: 0.136rem;
          }
        }
  
        .arrow_wrap{
          position: absolute;
          right: 40px;
          bottom: 30px;
          display: flex;
          gap: 24px;
          justify-content: flex-end;
          .arrow_item{
            border-radius: 24px;
            border: 1.5px solid #238C88;
            position: relative;
            width: 85px;
            height: 47px;
            transition: all .3s;
            &.arrow_prev{
              &::before{
                content: "";
                width: 11.345px;
                height: 13.776px;
                -webkit-mask-image: url(../images/top/sec07_arropw_01_l.svg);
                mask-image: url(../images/top/sec07_arropw_01_l.svg);
                -webkit-mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: #238C88;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all .3s;
              }
            }
            &.arrow_next{
              &::before{
                content: "";
                width: 11.345px;
                height: 13.776px;
                -webkit-mask-image: url(../images/top/sec07_arropw_01_r.svg);
                mask-image: url(../images/top/sec07_arropw_01_r.svg);
                -webkit-mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: center;
                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
                background-color: #238C88;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transition: all .3s;
              }
            }
            @media (min-width: 769px){ 
              &:hover{
                background: #238C88;
                &.arrow_prev{
                  &::before{
                    background-color: #fff;
                  }
                }
                &.arrow_next{
                  &::before{
                    background-color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  /*選択されているタブのコンテンツのみを表示*/
  #tab01:checked ~ #tab01_content,
  #tab02:checked ~ #tab02_content,
  #tab03:checked ~ #tab03_content {
    display: block;
  }
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item_01 {
    background: var(--font-color_02);
    color: #fff;
    .span{
      &::before{
        background-color: #fff;
  
      }
    }
  }
  
  .tabs input:checked + .tab_item_02 {
    background: #0778B7;
    color: #fff;
    .span{
      &::before{
        background-color: #fff;
  
      }
    }
  }
}

.sec07_sp_item_wrap{
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 25px 0 0 5%;
  position: relative;
  &::after{
    content: "";
    background: transparent;
    display: block;
    padding-bottom: 10px;
  }
  &.sec07_sp_item_wrap_02{
    .sec07_sp_item{
      &:not(:last-child){
        &::before{
          background-color: #0778B7;
        }
      }
      .tit_box{
        .num{
          background: #0778B7;
        }
        .tit{
          color: #073C6A;
        }
      }
      .note{
        background: #ECFAFF;
        h4{
          color: #073C6A;
        }
        .note_txt{
          p{
            color: #073C6A;
          }
        }
      }
    }
  }
}

.sec07_sp_item{
  position: relative;
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  border-radius: 10px;
  background: #FFF;
  padding: 30px 0;
  width: 90%;
  &:not(:last-child){
    &::before{
      content: "";
      -webkit-mask-image: url(../images/top/sec07_arrow.svg);
      mask-image: url(../images/top/sec07_arrow.svg);
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #238C88;
      width: 19px;
      height: 23px;
      position: absolute;
      bottom: -42px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .tit_box{
    display: flex;
    align-items: center;
    .num{
      width: 100px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0px 8px 8px 0px;
      background: var(--font-color_02);
      .num_01{
        color: #FFF;
        font-family: var(--font-en_02);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.112rem;
      }
      .num_02{
        color: #FFF;
        font-family: var(--font-en_01);
        font-size: 2.4rem;
        font-weight: 400;
        line-height: 100%;
      }
    }
    .tit{
      color: #238C88;
      font-size: 2rem;
      font-weight: 600;
      line-height: 150%;
      letter-spacing: 0.16rem;
      padding: 0 0 0 14px;
    }
  }
  .img_box{
    padding: 0 5%;
    margin: 30px auto;
  }
  .txt_box{
    width: 90%;
    margin: 0 auto;
    p{
      font-size: 1.5rem;
      font-weight: 500;
      line-height: 200%;
      letter-spacing: 0.12rem;
    }
  }
  .note{
    padding: 20px;
    border-radius: 10px;
    background: #EDFCFA;
    width: 90%;
    margin: 30px auto 0;
    h4{
      color: #238C88;
      font-family: var(--font-go_01);
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 180%;
      letter-spacing: 0.104rem;
    }
    .note_txt{
      p{
        color: #238C88;
        font-family: var(--font-go_01);
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0.104rem;
      }
    }
  }
}

.sec08{
  background: url(../images/top/sec08_bk.jpg) no-repeat;
  background-size: cover;
  padding: 110px 0 90px;
  @media (max-width: 768px) {
    padding: 60px 0;
    background: url(../images/top/sec08_bk_sp.jpg) no-repeat;
    background-size: cover;
  }
  .contents{
    .h2_box{
      width: 1100px;
      margin: 0 auto;
      @media (max-width: 768px) {
        width: 90%;
      }
      .span{
        display:blank;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 24px;
        &::before{
          content: "";
          background: #23B8C5;
          width: 14px;
          height: 14px;
          border: 2px solid #6ED1CB;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      h2{
        margin: 40px 0 0;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 220%;
        letter-spacing: 0.28rem;
        @media (max-width: 768px) {
          margin: 20px 0 0;
          font-size: 2.4rem;
          letter-spacing: 0.24rem;
        }
      }
    }
  }
  .sp_table_tit{
    display: none;
    @media (max-width: 768px) {
      display: block;
      color: #FFF;
      padding: 5px 0;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 150%;
      letter-spacing: 0.12rem;
      border-bottom: 1px solid #B6BDC4;
      background: linear-gradient(0deg, #3BC8AF 0%, #00ADA2 100%);
      &.tit_02{
        margin: 20px auto 0;
        background: linear-gradient(0deg, #0778B7 0%, #06659A 100%);
      }
    }
  }
  .sec08_conts{
    width: 1100px;
    margin: 53px auto 0;
    @media (max-width: 768px) {
      width: 100%;
      margin: 40px auto 0;
    }
    .table{
      @media (max-width: 768px) {
        width: 100%;
      }
      &.table_02{
        margin: 20px auto 0;
        @media (max-width: 768px) {
          margin: 0 auto;
        }
        tr{
          td{
            &.td_tit{
              background: linear-gradient(180deg, #0778B7 0%, #06659A 100%);
            }
            &.td_tit_sub{
              background: rgba(202, 235, 249, 0.90);
              color: #073C6A;
            }
          }
        }
      }
      tr{
        th{
          vertical-align: middle;
          text-align: center;
          &.pc{
            @media (max-width: 768px) {
              display: none;
            }
          }
          &.sp{
            display: none;
            @media (max-width: 768px) {
              display: table-cell;
            }
          }
          &.th_txt{
            color: #FFF;
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 130%;
            letter-spacing: 0.144rem;
            border-right: 1px #FFF;
            background: #717878;
            padding: 9.5px 0;
            &:last-child{
              border-right: none;
            }
            @media (max-width: 768px) {
              font-size: 1.4rem;
              font-weight: 600;
              letter-spacing: 0.056rem;
              border-right: 1px solid #B6BDC4;
              border-bottom: 1px solid #B6BDC4;
            }
          }
          &.sp_th{
            @media (max-width: 768px) {
              background: #717878;
              border-right: 1px solid #B6BDC4;
              border-bottom: 1px solid #B6BDC4;
            }
          }
        }
        td{
          width: 160px;
          vertical-align: middle;
          text-align: center;
          color: #373C3A;
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 130%;
          letter-spacing: 0.144rem;
          border-right: 1px solid #B6BDC4;
          border-bottom: 1px solid #B6BDC4;
          background: #FFF;
          @media (max-width: 768px) {
            font-size: 1.4rem;
            line-height: 150%;
            letter-spacing: 0.112rem;
            width: 90px;
          }
          &.td_tit{
            width: 168px;
            vertical-align: middle;
            text-align: center;
            background: linear-gradient(0deg, #00ADA2 0%, #3BC8AF 100%);
            color: #FFF;
            font-size: 2rem;
            font-weight: 600;
            line-height: 130%;
            letter-spacing: 0.16rem;
            border-right: none;
            border-bottom: none;
            @media (max-width: 768px) {
              width: 90px;
              font-size: 1.4rem;
              line-height: 150%;
              letter-spacing: 0.112rem;
            }
          }
          &.td_tit_sub{
            width: 450px;
            vertical-align: middle;
            text-align: left;
            color: #14564E;
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 130%;
            letter-spacing: 0.144rem;
            padding: 16px 0 16px 23px;
            border-bottom: 1px solid #B6BDC4;
            background: #CCFAEF;
            border-right: none;
            @media (max-width: 768px) {
              width: 90px;
              font-size: 1.4rem;
              line-height: 150%;
              letter-spacing: 0.112rem;
              padding: 15px 0;
              text-align: center;
            }
          }
          &.bd_b_none{
            border-bottom: none!important;
            @media (max-width: 768px) {
              border-bottom: 1px solid #B6BDC4!important;
            }
          }
          &:last-child{
            border-right: none!important;
          }
        }
      }
    }
    .cap{
      margin: 24px 0 0;
      font-family: var(--font-go_01);
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 180%;
      letter-spacing: 0.112rem;
      @media (max-width: 768px) {
        margin: 10px 0 0;
        font-size: 1.3rem;
        letter-spacing: 0.052rem;
      }
    }
  }
}

.sec09{
  .contents{
    padding: 150px 0 160px;
    @media (max-width: 768px) {
      padding: 60px 0;
    }
    .h2_box{
      width: 1100px;
      margin: 0 auto 53px;
      text-align: center;
      @media (max-width: 768px) {
        width: 90%;
        text-align: left;
        margin: 0 auto 40px;
      }
      .span{
        display:blank;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 24px;
        &::before{
          content: "";
          background: #23B8C5;
          width: 14px;
          height: 14px;
          border: 2px solid #6ED1CB;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      h2{
        margin: 40px auto 0;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 220%;
        letter-spacing: 0.28rem;
        @media (max-width: 768px) {
          margin: 20px auto 0;
          font-size: 2.4rem;
          letter-spacing: 0.24rem;
        }
      }
    }
  }
}


.sec09{
  background: #EEF1F3;
  .tab_btn_wrap{
    display: flex;
    justify-content: center;
    gap: 10px;
    &.tab_btn_wrap_02{
      .tab_item {
        .span{
        }

      }
      input:checked + .tab_item {
        .span{
        }
      }
    }
    .tab_item {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: all .3s;
      position: relative;
      width: 454px;
      height: 68px;
      border-bottom: 2px solid #B4C7D7;
      background: #EEF1F3;
      color: #5A6772;
      text-align: center;
      @media (max-width: 768px) {
        width: calc((100% - 10px) / 2);
        height: 74px;
        font-size: 1.7rem;
        line-height: 160%;
        letter-spacing: 0.136rem;
      }
      .span{
        position: relative;
        color: #5A6772;
        font-size: 2.2rem;
        font-weight: 600;
        line-height: 220%;
        letter-spacing: 0.176rem;
        @media (max-width: 768px) {
          font-size:clamp(1.3rem, 4vw, 1.7rem);
          line-height: 160%;
          letter-spacing: 0.136rem;
        }
      }
      @media (min-width: 769px){ 
        &:hover{
          border-bottom: 2px solid #238C88;
          background: #D2F1E9;
          .span{
            color: #238C88;
          }
          &.tab_item_b{
            border-bottom: 2px solid #0778B7;
            background: #E3F4FC;
            .span{
              color: #073C6A;
            }
          }
        }
      }

    }
    
  }


  input[name="tab_item_b"] {
    display: none;
  }

  .tab_btn_wrap_02:has(#tab11:checked) ~ #tab11_content,
  .tab_btn_wrap_02:has(#tab12:checked) ~ #tab12_content {
    display: block;
  }


  input:checked + .tab_item {
    border-bottom: 2px solid #238C88;
    background: #D2F1E9;
    .span{
      color: #238C88;
    }
    &.tab_item_b{
      border-bottom: 2px solid #0778B7;
      background: #E3F4FC;
      .span{
        color: #073C6A;
      }
    }
  }


  .tab_content {
    display: none;
    .tab_content_bk{
      width: 1100px;
      margin: 50px auto 0;
      @media (max-width: 768px) {
        width: 90%;
        margin: 30px auto 0;
      }
    }

  }

}

.qa_box_wrap{
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media (max-width: 768px) {
    gap: 20px;
  }
}

.qa_02{
  .qa_box{
    .qa_tit{
      background: linear-gradient(270deg, #0676CA 0%, #3BADC8 100%);
    }
  }
}
.qa_box {
	.qa_tit {
		position: relative;
		padding: 30px 0 30px 80px;
		pointer-events: all;
    border-radius: 10px;
    background: linear-gradient(270deg, #00ADA2 0%, #21BDA1 100%);
		cursor: pointer;
    @media (max-width: 768px) {
      padding: 12px 0 12px 56px;
    }
		&::before {
			content: "Q";
			color: #FFF;
      font-family: var(--font-min_01);
      font-size: 3.6rem;
      font-weight: 400;
      line-height: 100%; /* 3.6rem */
      letter-spacing: 0.288rem;
			position: absolute;
			left: 24px;
			top: 50%;
			transform: translatey(-50%);
		}
    @media (max-width: 768px) {
      &::before{
        font-size: 3rem;
        letter-spacing: 0.24rem;
        left: 16px;
      }
    }
		.close {
			position: relative;
			color: #FFF;
      font-family: var(--font-min_01);
      font-size: 2.1rem;
      font-weight: 500;
      line-height: 100%;
      letter-spacing: 0.168rem;
			padding: 0 80px 0 0;
			&::before {
				content: '';
				background: #fff;
				width: 25px;
				height: 4px;
				position: absolute;
				right: 29px;
				top: 50%;
				transform: translatey(-50%);
			}
			&::after{
				content: "";
				background: #fff;;
				width: 4px;
				height: 25px;
				position: absolute;
				right: 40px;
				top: 50%;
				transform: translatey(-50%);
				transition: all .3s;
			}
      @media (max-width: 768px) {
        font-size: 1.6rem;
        line-height: 180%;
        letter-spacing: 0.128rem;
        padding: 0 48px 0 0;
        &::before {
          width: 20px;
          right: 20px;
        }
        &::after{
          height: 20px;
          right: 28px;
        }
      }
			&.open {
				&::after {
					transform: translatey(-50%) rotate(90deg);
				}
			}
		}
	}
	.qa_txt {
		display: none;
		position: relative;
		padding: 40px 75px 10px;
    @media (max-width: 768px) {
      padding: 20px 0 0;
    }
		p{
      font-size: 1.7rem;
      font-weight: 500;
      line-height: 200%;
      letter-spacing: 0.136rem;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        letter-spacing: 0.12rem;
      }
		}
	}
}


.sec10{
  background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
  padding: 100px 0 160px;
  overflow: hidden;
  @media (max-width: 768px) {
    padding: 0;
    background: none;
  }
  .contents_full_01{
    position: relative;
    z-index: 1;
    &::before{
      content: "";
      background: url(../images/top/sec10_svg_01.svg) no-repeat center top;
      background-size: 100%;
      width: 100%;
      height: 998px;
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      mix-blend-mode: soft-light;
    }
    &::after{
      content: "";
      background: url(../images/top/sec10_svg_02.svg) no-repeat center top;
      background-size: 100%;
      width: 100%;
      height: 998px;
      position: absolute;
      top: 870px;
      left: 50%;
      transform: translateX(-50%);
      mix-blend-mode: soft-light;
    }
    @media (max-width: 768px) {
      &::before{
        content: none;
      }
      &::after{
        content: none;
      }
    }
    .contents_full_02{
      background: url(../images/top/sec10_bk.jpg) no-repeat right center;
      background-size: cover;
      padding: 75px 0 90px;
      @media (max-width: 768px) {
        background: url(../images/top/sec10_bk_sp.jpg) no-repeat right center;
        background-size: cover;
        padding: 60px 0 50px;
      }
      .h2_box{
        width: 1100px;
        margin: 0 auto;
        @media (max-width: 768px) {
          width: 90%;
          position: relative;
          z-index: 2;
          margin: 0 auto 5px;
        }
        .span{
          display:blank;
          font-family: var(--font-en_02);
          font-size: 1.6rem;
          font-weight: 400;
          line-height: 100%;
          letter-spacing: 0.128rem;
          position: relative;
          padding: 0 0 0 24px;
          &::before{
            content: "";
            background: #23B8C5;
            width: 14px;
            height: 14px;
            border: 2px solid #6ED1CB;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translatey(-50%);
          }
          @media (max-width: 768px) {
            font-size: 1.4rem;
            letter-spacing: 0.112rem;
          }
        }
        h2{
          margin: 16px 0 0;
          font-size: 3.5rem;
          font-weight: 600;
          line-height: 220%;
          letter-spacing: 0.28rem;
          @media (max-width: 768px) {
            font-size: 2.4rem;
            letter-spacing: 0.24rem;
            margin: 20px 0 0;
          }
        }
      }
    }
    .contents_01{
      padding: 0;
    }
    .contents_02{
      padding: 80px 0 0;
      @media (max-width: 768px) {
        padding: 40px 0 60px;
        background: linear-gradient(270deg, #00ADA2 0%, #3BC8AF 100%);
        position: relative;
        &::before{
          content: "";
          background: url(../images/top/sec10_svg_01.svg) no-repeat center top;
          background-size: 100%;
          width: 2139px;
          height: 998px;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          mix-blend-mode: soft-light;
        }
        &::after{
          content: "";
          background: url(../images/top/sec10_svg_02.svg) no-repeat center top;
          background-size: 100%;
          width: 2139px;
          height: 998px;
          position: absolute;
          bottom: 820px;
          left: 50%;
          transform: translateX(-50%);
          mix-blend-mode: soft-light;
        }
      }
    }
  }
}

.sec10_conts_01{
  width: 1100px;
  margin: 35px auto 0;
  display: flex;
  justify-content: space-between;
  @media (max-width: 768px) {
    width: 100%;
    margin: 0 auto;
    flex-direction: column-reverse;
  }
  .sec10_conts_01_l{
    width: 685px;
    @media (max-width: 768px) {
      width: 100%;
    }
    .txt_box{
      @media (max-width: 768px) {
        width: 90%;
        margin: 40px auto 0;
      }
      p{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 200%;
        letter-spacing: 0.144rem;
        @media (max-width: 768px) {
          font-size: 1.5rem;
          letter-spacing: 0.12rem;
        }
        &+p{
          padding: 1.5em 0 0;
        }
      }
    }
  }
  .sec10_conts_01_r{
    width: 367px;
    height: 498px;
    position: relative;
    @media (max-width: 768px) {
      width: 82%;
      height: auto;
      margin: 0 0 0 auto;
      position: relative;
    }
    .name_box{
      position: absolute;
      left: 0;
      bottom: 0;
      width: fit-content;
      display: flex;
      align-items: center;
      padding: 12px 36px;
      background: linear-gradient(270deg, rgba(6, 118, 202, 0.00) 0%, #0676CA 35.5%, #3BADC8 100%);
      @media (max-width: 768px) {
        padding: 12px 90px 12px 20px;
      }
      .span_01{
        color: #FFF;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        @media (max-width: 768px) {
          font-size: 1.4rem;
          line-height: 100%;
          letter-spacing: 0.112rem;
        }
      }
      .span_02{
        color: #FFF;
        font-size: 2.4rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.192rem;
        position: relative;
        margin: 0 0 0 15px;
        padding: 0 0 0 15px;
        &::before{
          content: "";
          background: #fff;
          width: 1px;
          height: 26px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.8rem;
          letter-spacing: 0.144rem;
        }
      }
    }
    .en_name{
      position: absolute;
      right: -60px;
      bottom: 20px;
      color: #FFF;
      text-align: right;
      text-shadow: 4.138px 2.069px 31.034px rgba(0, 0, 0, 0.15);
      font-family: var(--font-en_02);
      font-size: 2.6rem;
      font-weight: 400;
      line-height: 7.8621rem; /* 302.387% */
      letter-spacing: 0.26rem;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      &::before{
        content: "";
        background: #fff;
        width: 1px;
        height: 200px;
        position: absolute;
        top: -220px;
        left: 50%;
        transform: translateX(-50%);
      }
      @media (max-width: 768px) {
        right: inherit;
        left: -28px;
        bottom: 0;
        font-size: 2rem;
        line-height: 100%;
        letter-spacing: 0.2rem;
        color: #D8D8D8;
        &::before{
          content: "";
          background: #D8D8D8;
          width: 1px;
          height: 124px;
          top: -140px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
}

.sec10_conts_02{
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0px 0px 15px 0px rgba(61, 94, 88, 0.25);
  width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 50px 60px;
  gap: 30px;
  @media (max-width: 768px) {
    width: 90%;
    padding: 30px 5%;
  }
  h3{
    color: var(--font-color_02);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 220%;
    letter-spacing: 0.144rem;
    border-bottom: 1px solid #81D8D0;
    @media (max-width: 768px) {
      font-size: 1.6rem;
      letter-spacing: 0.128rem;
    }
    .span{
      padding: 0 0 0 14px;
      color: #81D8D0;
      font-family: var(--font-en_02);
      font-size: 1.8rem;
      font-weight: 400;
      line-height: 100%;
      letter-spacing: 0.144rem;
      @media (max-width: 768px) {
        font-size: 1.6rem;
        letter-spacing: 0.128rem;
      }
    }
  }
  .txt_box{
    p{
      font-size: 1.7rem;
      font-weight: 500;
      line-height: 200%;
      letter-spacing: 0.136rem;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        letter-spacing: 0.12rem;
      }
    }
  }
  .sec10_ul_01{
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    margin: 0 0 20px;
    @media (max-width: 768px) {
      gap: 3px;
    }
    li{
      padding: 5px 0;
      display: flex;
      gap: 14px;
      justify-content: flex-start;
      @media (max-width: 768px) {
        gap: 10px;
      }
      .span_01{
        color: var(--font-color_02);
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 180%;
        letter-spacing: 0.064rem;
        @media (max-width: 768px) {
          font-size: 1.5rem;
          letter-spacing: 0.06rem;
          white-space: nowrap
        }
      }
      .span_02{
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 180%;
        letter-spacing: 0.128rem;
        @media (max-width: 768px) {
          font-size: 1.5rem;
          letter-spacing: 0.12rem;
        }
      }
    }
  }
  .sec10_ul_02_box{
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    @media (max-width: 768px) {
      flex-direction: column;
    }
    .sec10_ul_02{
      li{
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 170%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 5px 0 5px 18px;
        &::before{
          content: "";
          background: #81D8D0;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 16px;
        }
        @media (max-width: 768px) {
          font-size: 1.5rem;
          letter-spacing: 0.12rem;
        }
      }
    }
  }
  .sec10_bnr{
    background: #EAFCFF;
    display: flex;
    justify-content: space-between;
    padding: 50px 120px 50px 50px;
    @media (max-width: 768px) {
      padding: 20px;
      flex-direction: column;
    }
    .sec10_bnr_l{
      width: 468px;
      position: relative;
      @media (max-width: 768px) {
        width: 100%;
      }
      h4{
        color: var(--font-color_02);
        font-family: var(--font-en_02);
        font-size: 2rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.16rem;
        position: relative;
        padding: 0 0 30px;
        margin: 0 0 30px;
        &::before{
          content: "";
          background: #81D8D0;
          width: 40px;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        @media (max-width: 768px) {
          font-size: 1.8rem;
          line-height: 170%;
          letter-spacing: 0.144rem;
        }
        .span{
          color: var(--font-color_02);
          font-size: 2rem;
          font-weight: 600;
          line-height: 100%;
          letter-spacing: 0.16rem;
          @media (max-width: 768px) {
            font-size: 1.8rem;
            line-height: 170%;
            letter-spacing: 0.144rem;
          }
        }
      }
      p{
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 200%;
        letter-spacing: 0.136rem;
        @media (max-width: 768px) {
          font-size: 1.5rem;
          letter-spacing: 0.12rem;
        }
      }
    }
    .sec10_bnr_r{
      position: relative;
      width: 254px;
      &::before{
        content: "";
        background: url(../images/top/sec10_img_02_bk.svg) no-repeat;
        background-size: cover;
        width: 434px;
        height: 226px;
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
      }
      @media (max-width: 768px) {
        width: 100%;
        margin: 45px auto 0;
        text-align: center;
        &::before{
          width: 302px;
          height: 158px;
          top: -30px;
        }
      }
      img{
        position: relative;
        @media (max-width: 768px) {
          width: 184px;
        }
      }
    }
  }
}







.sec11{
  background: #EEF1F3;
  padding: 110px 0 136px;
  @media (max-width: 768px) {
    padding: 60px 0;
  }
  .contents{
    overflow: hidden;
    position: relative;
    .h2_box{
      width: 1100px;
      margin: 0 auto;
      @media (max-width: 768px) {
        width: 95%;
      }
      .span{
        display:blank;
        font-family: var(--font-en_02);
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0.128rem;
        position: relative;
        padding: 0 0 0 24px;
        &::before{
          content: "";
          background: #23B8C5;
          width: 14px;
          height: 14px;
          border: 2px solid #6ED1CB;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translatey(-50%);
        }
        @media (max-width: 768px) {
          font-size: 1.4rem;
          letter-spacing: 0.112rem;
        }
      }
      h2{
        margin: 40px 0 0;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 220%;
        letter-spacing: 0.28rem;
        @media (max-width: 768px) {
          margin: 20px 0 0;
          font-size: 2.4rem;
          letter-spacing: 0.24rem;
        }
      }
    }
  }
  img {
    width: 100%;
  }

  .swiper-container {
      width: 1020px;
      margin: 0 auto;
      overflow: hidden;
      @media (max-width: 768px) {
        width: 95%;
      }
      &.mainslider{
        margin: 60px auto 0;
        @media (max-width: 768px) {
          margin: 40px auto 0;
        }
        .swiper-slide{
          img{
            @media (max-width: 768px) {
              border-radius: 10px;
            }
          }
          .txt{
            padding: 14px 0 30px;
            font-family: var(--font-go_01);
            text-align: center;
            font-size: 1.4rem;
            font-weight: 400;
            line-height: 180%;
            letter-spacing: 0.112rem;
            @media (max-width: 768px) {
              font-size: 1.2rem;
              letter-spacing: 0.048rem;
              padding: 12px 0 14px;
            }
          }
        }
      }
      &.slider-thumbnail {
          .swiper-wrapper {
              .swiper-slide {
                  width: 25%;
                  height: 100%;
                  opacity: .5;
                  overflow: hidden;
                  border-radius: 10px;
                  cursor: pointer;
                  &.swiper-slide-thumb-active {
                      opacity: 1;
                  }
                  @media (max-width: 768px) {
                    border-radius: 5px;
                  }
              }
          }
      }

      .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: 50px;
        right: auto;
          @media (max-width: 768px) {
            left: 12px;
          }
        }
        .swiper-button-next, .swiper-rtl .swiper-button-prev {
          right: 50px;
          left: auto;
          @media (max-width: 768px) {
            right: 12px;
          }
      }
      .swiper-button-prev.swiper-button-disabled{
        opacity: 1;
        cursor: auto;
        pointer-events:all;
      }
      .swiper-button-next.swiper-button-disabled {
          opacity: 1;
          cursor: auto;
          pointer-events:all;
      }
      .swiper-button-prev, .swiper-button-next {
        position: absolute;
        top: 51.5%;
        width: calc(var(--swiper-navigation-size) / 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: inherit;
        width: 50px;
        height: 50px;
        border-radius: inherit;
        @media (max-width: 768px) {
            width: 20px;
            height: 20px;
            top: 56%;
       }

      }
      .swiper-button-prev{
          &::after{
              content: "";
              border-top: solid 2px #5A6772;
              border-right: solid 2px #5A6772;
              transform: rotate(-135deg);
              width: 20px;
              height: 20px;
          }
          @media (max-width: 768px) {
            &::after{
              width: 13px;
              height: 13px;
            }
          }
      }
      .swiper-button-next{
          &::after{
              content: "";
              border-top: solid 2px #5A6772;
              border-right: solid 2px #5A6772;
              transform: rotate(45deg);
              width: 20px;
              height: 20px;
          }
          @media (max-width: 768px) {
            &::after{
              width: 13px;
              height: 13px;
            }
          }
      }
  }
}