@charset "UTF-8";
figure {
  margin: 0;
}
.w100 img {
  width: 100%;
}
.fwb {
  font-weight: bold;
}
.mt10 {
  margin-top: 1rem!important;
}
.mt20 {
  margin-top: 2rem!important;
}
.c-blue {
  color: #007ac9;
}
:is(#case, #prod-info, #rel-solution) .headLine01 {
  font-size: clamp(22px, 2.5vw, 35px);
}

@media screen and (max-width: 896px) {
  #main .btmBox.btmBox02 .comBtn {
    max-width: 490px;
    width: 100%;
  }
}

/* ページ個別 */
.lpPage.technology_homelt-methods {
  .page-top {
    display: none;
  }
  #main {
    font-family: "Source Sans Pro", sans-serif;

    .mainVisual {
      background: url(../img/mv.png) center/cover no-repeat;
      height: 65rem;
      @media screen and (max-width: 896px) {
        background: url(../img/mv.png) center bottom / 100% no-repeat #021a46;
        padding-bottom: 5rem;
        padding-top: 4rem;
      }

      .content {
        margin-top: -4rem;
        @media screen and (max-width: 896px) {
          margin-top: 0;
        }
      }

      h1 {
        color: #fff;
        font-size: 36px;
        text-align: center;
        margin-bottom: 3rem;
        @media screen and (max-width: 896px) {
          font-size: clamp(22px, 2.5vw, 35px);
        }
      }

      .mv-checklist {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin-bottom: 3rem;
        @media screen and (max-width: 896px) {
          flex-direction: column-reverse;
          gap: 10px;
        }

        li {
          font-size: 20px;
          font-weight: bold;
          line-height: 1;
          border-radius: 6px;
          background: #fff;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          padding: 10px 12px 6px;
          @media screen and (max-width: 896px) {
            font-size: 14px;
            line-height: 1.25;
            justify-content: flex-start;
            gap: 5px;
          }

          &::before {
            content: url(../../img/icon-check01.png);
            @media screen and (max-width: 896px) {
              content: '';
              display: block;
              width: 14px;
              height: 14px;
              background: url(../../img/icon-check01.png) center/contain no-repeat;
            }
          }
        }
      }

      .mv-txt {
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 1.7;
      }
    }
    .mv-txt.sp {
      color: #fff;
      font-size: 14px;
      background: #007ac9;
      padding: 20px;
    }
  }
  .float-contact {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    position: fixed;
    right: 1vw;
    bottom: 2vh;
    z-index: 999;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #00a9e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    transition: .3s;
    @media screen and (max-width: 896px) {
      font-size: 12px;
      width: 100px;
      height: 100px;
      gap: 5px;
    }

    &:hover {
      text-decoration: none;
      opacity: .7;
    }

    img {
      @media screen and (max-width: 896px) {
        width: 30px;
      }
    }
  }
  .homelt-methods {
    padding-top: 2rem;
    @media screen and (max-width: 896px) {
      padding-bottom: 0;
    }

    .content {
      .slick-prev:hover:before,
      .slick-prev:focus:before,
      .slick-next:hover:before,
      .slick-next:focus:before {
        display: none;
      }
      .slick-prev:before,
      .slick-next:before {
        content: none;
      }
      .slider {
        .homelt-methods-items__item {
          @media screen and (max-width: 896px) {
            border-radius: 6px;
          }
        }
      }
      .slider-conatiner {
        @media screen and (max-width: 896px) {
          margin-bottom: 50px;
        }
      }
      .slick-arrow {
        border: none;
        background: transparent;

        img {
          width: 26px;
          height: 26px;
          border: 1px solid #0075da;
          border-radius: 50%;
        }
      }
      .slick-dots {
        li {
          width: 6px;
          height: 10px;

          button {
            &::before {
              font-size: 8px;
              color: #dcddde;
            }
          }

          &.slick-active button:before {
            color: #0075da;
          }
        }
      }
      .slick-slide {
        padding: 0;

         img {
          border-radius: 0;
         }
      }

      .homelt-methods-items__item-tgl {
        width: calc(100% + 40px);
        margin: 0 -20px;
        padding: 10px 20px;
        background: #faf8f4;

        &.pt20 {
          padding-top: 20px;
        }

        .btn {
          color: #fff;
          font-size: clamp(20px, 1.65vw, 22px);
          font-weight: bold;
          line-height: 1.1;
          background: #007ac9;
          border-radius: 6px;
          padding: 10px 15px;
          position: relative;
          height: 65px;
          display: flex;
          align-items: center;

          &::before,
          &::after {
            content: '';
            display: block;
            width: 16px;
            height: 2px;
            background: #fff;
            position: absolute;
            top: 50%;
          }

          &::before {
            right: 8px;
            transform: translateX(-50%);
          }

          &::after {
            right: 16px;
            transform: translateY(calc(-50% + 1px)) rotate(90deg);
            transform-origin: center;
          }

          small {
            font-size: 60%;
          }

          .inner {
            padding: 0;
          }
        }

        &.open {
          /* padding: 20px; */

          .btn {
              &::after {
              right: 8px;
              transform: translateX(-50%);
            }
          }
          + .homelt-methods-items__item {
            @media screen and (max-width: 896px) {
            display: block;
              padding-bottom: 20px;
            }
          }
        }
      }
    }
    .homelt-methods-items {
      display: flex;
      gap: 0 10px;
      flex-wrap: wrap;

      .homelt-methods-items__item {
        flex: 1;
        background: #faf8f4;
      }

      .homelt-methods-items__item-cont {
        padding: 20px;

        &.type01 {
          display: grid;
          grid-template-rows: 3fr 13fr 4fr;
          @media screen and (max-width: 896px) {
            grid-template-rows: 3fr 13fr auto;
          }

          ul {
            li {
              font-size: 14px;
              list-style: none inside;
              position: relative;
              padding-left: 10px;

              &::before {
                content: '';
                display: block;
                width: 6px;
                height: 6px;
                background: #00b5ee;
                position: absolute;
                left: 0;
                top: 9px;
              }
            }
          }

          .img {
            margin-bottom: 20px;
          }

          .btn.no-link {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            width: 170px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #dbdedd;
            margin-left: auto;
            @media screen and (max-width: 896px) {
              width: 100%;
              height: 50px;
            }
          }
          .btn a {
            color: #000;
            background: #75c800;
            width: 170px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            position: relative;
            @media screen and (max-width: 896px) {
              width: 100%;
              height: 50px;
            }

            &:hover {
              text-decoration: none;
            }

            &::after {
              content: '';
              display: block;
              width: 10px;
              height: 10px;
              border: solid #000;
              border-width: 2px 2px 0 0;
              transform: rotate(45deg);
              position: absolute;
              right: 15px;
            }
          }
        }
        &.type02 {
          margin: 0 20px 50px;
          background: #fff;
          /* display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 50px; */

          &:last-child {
            margin-bottom: 110px;

            @media screen and (max-width: 896px) {
              margin-bottom: 0;
            }
          }

          .ttl {
            color: #004498;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            min-height: 45px;
            margin-bottom: 20px;
          }

          .cont {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: calc(100% - 65px);
          }

          .note {
            color: #8996a0;
            font-size: 12px;
            text-align: right;
            margin: 5px auto;
          }
        }
        &.type03 {
          border: 2px solid #0075da;
          border-radius: 6px;
          margin: 20px;
          background: #fff;
          display: grid;
          grid-template-rows: 1fr 1fr 8fr;

          .ttl {
            text-align: center;
            span {
              color: #004498;
              font-weight: bold;
              letter-spacing: 1px;
              border-bottom: 1px solid #004498;
            }
          }

          .btn {
            a {
              font-size: 13px;
              color: #fff;
              background: #0075da;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin: auto;
              position: relative;
              padding: 5px 3px 0 8px;

              &:hover {
                text-decoration: none;
              }

              &::after {
                content: '';
                display: block;
                width: 8px;
                height: 8px;
                border: solid #fff;
                border-width: 2px 2px 0 0;
                position: absolute;
                top: 50%;
                right: 10px;
                transform: rotate(45deg) translateY(-50%);
              }
            }
          }

          .img {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        &.type04 {
          background: #fff;
          @media screen and (max-width: 896px) {
            background: #faf8f4;
          }

          .ttl {
            font-weight: bold;
          }
          .btn.no-link {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            width: 170px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #d0d5d9;
            margin-left: auto;

            @media screen and (max-width: 896px) {
              width: 100%;
              height: 50px;
            }
          }
          .btn a {
            color: #000;
            background: #7ab800;
            width: 170px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            position: relative;
            @media screen and (max-width: 896px) {
              width: 100%;
              height: 50px;
            }

            &:hover {
              text-decoration: none;
            }

            &::after {
              content: '';
              display: block;
              width: 10px;
              height: 10px;
              border: solid #000;
              border-width: 2px 2px 0 0;
              transform: rotate(45deg);
              position: absolute;
              right: 15px;
            }
          }
        }
      }

      .homelt-methods-items__sep {
        width: 100%;
        background: #faf8f4;
        padding: 0 20px;
        /* position: sticky;
        top: 140px;
        z-index: 1; */
        @media screen and (max-width: 896px) {
          width: calc(100% + 40px);
          padding: 0;
          margin: 0 -20px;
          /* position: static; */
          /* background: #f6f2ea; */
        }

        .inner {
          color: #fff;
          font-size: clamp(20px, 1.65vw, 22px);
          font-weight: bold;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #a0abb0;
          border-radius: 6px;
          padding: 15px;
          @media screen and (max-width: 896px) {
            border-radius: 0;
          }

          small {
            font-size: 75%;
            text-align: center;
          }
        }
      }

      &.area-head {
        position: sticky;
        top: 120px;
        z-index: 10;
        padding-top: 20px;
        background: #fff;
        @media screen and (max-width: 896px) {
          display: none;
        }

        .homelt-methods-items__item-head {
          background: #0075da;
          border-radius: 6px 6px 0 0;
          display: flex;
          gap: 10px;
          padding: 15px;
          position: relative;

          .txt {
            flex: 3;

            h2 {
              color: #fff;
              font-size: clamp(20px, 1.65vw, 22px);
              a {
                color: #fff;
                height: auto;
              }
              small {
                font-size: 60%;
              }
            }
          }

          .img {
            flex: 1;
          }

          .balloon {
            font-weight: bold;
            line-height: 1;
            position: absolute;
            bottom: 12px;
            right: 85px;
            background: #ebecec;
            border-radius: 3px;
            padding: 7px 10px 4px;

            &::after {
              content: '';
              display: block;
              width: 30px;
              height: 20px;
              background: #ebecec;
              position: absolute;
              right: -29px;
              top: 1px;
              clip-path: polygon(0 5px, 100% 0, 0 100%);
            }
          }
        }
      }

      &.area01 {
        &.homelt-methods-items {
          @media screen and (max-width: 896px) {
            display: unset;
          }
        }
        .homelt-methods-items__item-head {
          display: none;
          @media screen and (max-width: 896px) {
            background: #0075da;
            border-radius: 6px 6px 0 0;
            display: flex;
            gap: 10px;
            padding: 15px;
            position: relative;

            .txt {
              flex: 3;

              h2 {
                color: #fff;
                font-size: clamp(20px, 1.65vw, 22px);
                a {
                  color: #fff;
                  height: auto;
                }
                small {
                  font-size: 60%;
                }
              }
            }

            .img {
              flex: 1;
            }

            .balloon {
              font-weight: bold;
              line-height: 1;
              position: absolute;
              bottom: 12px;
              right: 85px;
              background: #ebecec;
              border-radius: 3px;
              padding: 7px 10px 4px;

              &::after {
                content: '';
                display: block;
                width: 30px;
                height: 20px;
                background: #ebecec;
                position: absolute;
                right: -29px;
                top: 1px;
                clip-path: polygon(0 5px, 100% 0, 0 100%);
              }
            }
          }
        }
      }

      &.area02 {
        @media screen and (max-width: 896px) {
          background: #faf8f4;
          width: calc(100% + 40px);
          margin: 0 -20px;
          padding: 0 20px 20px;
        }

        .homelt-methods-items__item {
          display: grid;
          grid-template-rows: 2fr 13fr 15fr;
          @media screen and (max-width: 896px) {
            width: calc(100% + 40px);
            margin: 0 -20px;
            display: none;
          }
        }
        .homelt-methods-items__item-head {
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;

          h3 {
            margin: 0;
            font-size: 16px;
            text-align: center;
          }
        }
        /* :nth-last-child(2) {
          padding-bottom: 20px;
        } */
      }

      &.area03 {
        @media screen and (max-width: 896px) {
          background: #faf8f4;
          width: calc(100% + 40px);
          margin: 0 -20px;
          padding: 0 20px 20px;
        }

        .homelt-methods-items__item {
          display: grid;
          grid-template-rows: 5fr 3fr auto;
          @media screen and (max-width: 896px) {
            width: calc(100% + 40px);
            margin: 0 -20px;
            display: none;
          }

          .ttl {
            font-size: 14px;
            font-weight: bold;
            text-align: center;
          }

          .type01 {
            display: flex;
            flex-direction: column;
            height: max-content;
            gap: 10px;

            .img {
              text-align: center;
            }
          }
        }
      }
    }
  }
}