@charset "utf-8";

/* ------------------------------------------- */
/* Header */
/* ------------------------------------------- */
#header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 12.4rem;
  z-index: 999;
  pointer-events: none;

  .logo-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 35.3rem;
    height: 12.4rem;
    background-color: var(--aice-white);
    border-bottom-right-radius: 4rem;

    .catch {
      position: absolute;
      left: 3rem;
      top: 1.4rem;
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.4rem;
      letter-spacing: 0.14rem;
      color: var(--default-text-color);
      white-space: nowrap;
    }

    .logo {
      position: absolute;
      left: 3rem;
      top: 4.4rem;
      width: 23.3rem;
      height: 6.1rem;
    }
  }

  .cta-btn {
    position: absolute;
    right: 2.5rem;
    top: 2.8rem;
    transition: 0.4s ease all;

    & a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30.8rem;
      height: 6.7rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      border-radius: 3.35rem;
      text-decoration: none;
      pointer-events: auto;

      .icon {
        position: absolute;
        left: 0rem;
        width: 6.7rem;
        height: 6.7rem;
        background: url(./common/img/header-btn-icon.svg) no-repeat;
        background-size: 100%;

        @media screen and (max-width: 767px) {
          left: 0rem;
          width: 3rem;
          height: 3rem;
        }
      }

      .text {
        font-size: 2rem;
        font-weight: 700;
        line-height: 2rem;
        color: var(--aice-white);
        letter-spacing: 0;

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
        }
      }

      .arrow {
        position: absolute;
        right: 1.7rem;
        width: 1.6rem;
        height: 1.6rem;
        background: url(./common/img/header-btn-arrow.svg) no-repeat;
        background-size: 100%;

        @media screen and (max-width: 767px) {
          right: 1.7rem;
          width: 1rem;
          height: 1rem;
        }
      }

      @media screen and (max-width: 767px) {
        right: 0.6rem;
        top: 0.3rem;
        width: 15rem;
        height: 3rem;
      }
    }
  }

  .cta-btn:hover {
    opacity: 0.7;
  }
}

/* ------------------------------------------- */
/* main banner */
/* ------------------------------------------- */

.main-banner-top {
  background: url(./common/img/top-bk-fv.png) no-repeat;
  position: relative;
  background-size: cover;
  height: 90rem;
}

.left-main-logo-container {
  position: absolute;
  width: 66.8rem;
  height: 27.8rem;
  left: 28.5rem;
  top: 12.2rem;
}


.fv-ellipse-container {
  position: absolute;
  left: 33.8rem;
  top: 48.6rem;
  display: flex;
  gap: 0;
}

.ellipse-fv {
  width: 25.3rem;
  height: 25.3rem;
  border-radius: 50%;
  background: #FFF5EF;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.23);
  padding-top: 7.6rem;
}

.ellipse-fv h3 {
  font-style: normal;
  font-weight: 700;
  font-size: 2.6rem;
  /* line-height: 31px; */
  text-align: center;
  letter-spacing: 0.1em;
  color: #121212;
  padding-bottom: 2.1rem;
}

.ellipse-fv-text {
  font-style: normal;
  font-weight: 900;
  font-size: 4rem;
  /* line-height: 48px; */
  text-align: center;
  letter-spacing: 0.1em;
  color: #FE6658;
}

.ellispe-flex-txt {
  display: flex;
  position: relative;
}

.ellipse-fv-text::after {
  position: absolute;
  content: "（税込）";
  font-style: normal;
  font-weight: 700;
  font-size: min(1.6rem, 12px);
  /* line-height: 19px; */
  text-align: center;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' on;
  color: #FE6658;
  bottom: 6.5rem;
  right: 2rem;
}

.monthly-container {
  background: linear-gradient(90deg, #FE6658 0%, #FF7940 100%);
  max-width: 2.4rem;
  padding: 0.4rem 0.4rem 0.6rem;
  font-style: normal;
  font-weight: 700;
  font-size: min(1.6rem, 12px);
  line-height: 1.7rem;
  text-align: center;
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' on;
  color: #FFFFFF;
  margin-right: 0.6rem;
}

.montly-price {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-size: 5.6rem;
  /* line-height: 66px; */
  text-align: center;
  letter-spacing: 0.02em;
  color: #FE6658;
  background-clip: text;
}

.montly-yen-icon {
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  /* line-height: 36px; */
  letter-spacing: 0.1em;
  font-feature-settings: 'palt' on;
  color: #FE6658;
}

.ellipse-img-container {
  width: 58rem;
  height: 30rem;
}

.ellispe-img02 {
  width: 26rem;
  height: 26.3rem;
  top: 1.7rem;
  position: absolute;
  left: 29.8rem;
}


.orange-btn-absolute-container {
  position: absolute;
  left: 35.3rem;
  top: 73.6rem;
}

.fv-month-banner-container {
  position: absolute;
  width: 100%;
  bottom: 0rem;
  background: linear-gradient(to left, #FE6658, #FF7940);
  height: 10.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 700;
  font-size: 4.6rem;
  text-align: center;
  letter-spacing: 0.08em;
  color: #FFFFFF;

  @media screen and (max-width: 767px) {
    font-size: 2.3rem;
    height: 4.6rem;
  }
}

.orange-fv-btn {
  position: relative;
  width: 53.4rem;
  height: 8.0rem;
  background: linear-gradient(180deg, #FE6658 0%, #FF7940 100%);
  border-radius: 6px;
  padding-left: 3.2rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
}

.orange-fv-btn:hover {
  opacity: 0.7;
}

.orange-fv-btn .text {
  font-style: normal;
  font-weight: 700;
  font-size: 2.2rem;
  /* line-height: 20px; */
  text-align: center;
  letter-spacing: 0.001em;
  color: #FFFFFF;
}

.orange-fv-btn .arrow {
  position: absolute;
  right: 3rem;
  width: 1.9rem;
  height: 1.9rem;
  background: url(./common/img/header-btn-arrow.svg) no-repeat;
  background-size: 100%;

  @media screen and (max-width: 767px) {
    right: 0.9rem;
    width: 1rem;
    height: 1rem;
  }
}

.phone-fv-container {
  position: absolute;
  width: 35.5rem;
  height: 69.2rem;
  right: 50rem;
  top: 8.2rem;

  @media screen and (max-width: 1080px) {
    right: 18rem;
  }
}

.phone-fv-container img {
  z-index: 2;
}

.phone-fv-container video {
  z-index: 1;
  position: absolute;
  width: 31.5rem;
  top: 1.7rem;
  left: 2rem;
  border-radius: 3rem;

  @media screen and (max-width: 767px) {
    width: 21.7rem;
    top: 1.1rem;
    left: 1.3rem;
  }
}

.fv-btn-phone-container-absolute {
  position: absolute;
  right: 30.8rem;
  top: 50.2rem;
  transition: all 0.4s ease;
  z-index: 3;

  @media screen and (max-width: 1080px) {
    right: 0.8rem;
  }
}

.fv-btn-phone-container {
  filter: drop-shadow(-4px 5px 10px rgba(0, 0, 0, 0.15));
  width: 27.6rem;
  height: 17.9rem;
  position: relative;
  background: url(./common/img/fv-btn-phone.png) no-repeat;
  background-size: cover;
}

.fv-btn-phone-container .text {
  position: absolute;
  bottom: 3.8rem;
  left: 4.3rem;
  font-style: normal;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 3.2rem;
  text-align: center;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.fv-btn-phone-container .text .underline-txt {
  text-decoration: underline;
  text-underline-offset: 0.6rem;
}

.fv-btn-phone-container-absolute:hover {
  opacity: 0.7;
}

.fv-btn-phone-container-absolute:hover .text .underline-txt {
  text-decoration: none;
}

/* ------------------------------------------- */
/* Service Section */
/* ------------------------------------------- */
#service {
  background-color: var(--aice-section-bg);
  padding: 11rem 36rem 0.2rem;

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 9.4rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: capitalize;
    }
  }

  .card-column {
    margin-bottom: 9.5rem;
    position: relative;
    padding-top: 8.1rem;

    &:last-child {
      margin-bottom: 0;
    }

    .lead-text {
      margin-top: 3rem;
      text-align: center;

      & p {
        font-size: max(1.8rem, 12px);
        font-weight: 400;
        line-height: 2.6rem;
        letter-spacing: 0.096rem;
        color: var(--default-text-color);

        .highlight {
          position: relative;
          font-size: 1.8rem;
          font-weight: 700;
          z-index: 1;

          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2.6rem;
            background-color: var(--aice-marker);
            z-index: -1;
          }
        }

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
        }
      }
    }

    .comparison-cards {
      display: flex;
      gap: 0.8rem;
      justify-content: center;
      margin-top: 2.9rem;
      align-items: center;

      .comparison-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        width: 26.5rem;
        background-color: var(--aice-gray);
        border-radius: 3rem;
        padding: 2.5rem 1rem 2.6rem;
        max-height: 22.1rem;

        &.featured {
          width: 30.9rem;
          background-color: var(--aice-card-bg);
          border: 0.4rem solid var(--aice-blue-dark);
          max-height: 25.7rem;

          .logo {
            width: 15.9rem;
            height: 4.1rem;
          }

          .item-label {
            background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
            padding: 0.7rem 1.8rem;
            border-radius: 3rem;
            font-size: 1.7rem;
            letter-spacing: 0.102rem;
          }

          .item-value {
            font-size: 2.6rem;
            letter-spacing: 0.156rem;
          }
        }

        .service-name {
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 2.2rem;
          letter-spacing: 0.176rem;
          color: var(--aice-gray-text);
          text-align: center;
        }

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;

          .item-label {
            background-color: var(--aice-gray-dark);
            color: var(--aice-white);
            font-size: max(1.8rem, 12px);
            font-weight: 700;
            line-height: 1.6rem;
            letter-spacing: 0.096rem;
            padding: 0.4rem 0.9rem;
            border-radius: 1.2rem;

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }

          .item-value {
            font-size: 2rem;
            font-weight: 700;
            line-height: 2rem;
            letter-spacing: 0.12rem;
            color: var(--default-text-color);
            text-align: center;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1080px) {
    padding: 11rem 10rem 0;
  }
}

.featured .item {
  gap: 0.8rem !important;

  @media screen and (max-width: 767px) {
    gap: 0.5rem !important;
  }
}

.featured .item-label {
  padding: 0.7rem 1.7rem !important;
  border-radius: 2.8rem !important;
  font-size: 1.7rem !important;

  @media screen and (max-width: 767px) {
    padding: 0.5rem 1.2rem !important;
    border-radius: 2.4rem !important;
    font-size: 1.5rem !important;
  }
}

.featured .item-value {
  font-size: 2.6rem !important;

  @media screen and (max-width: 767px) {
    font-size: 2rem !important;
  }
}

/* ------------------------------------------- */
/* Point Section */
/* ------------------------------------------- */
#point {
  background-color: var(--aice-section-bg);
  padding: 11.1rem 36rem;
  margin-top: -0.1rem;

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 3rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: lowercase;
    }
  }

  .section-desc {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.6rem;
    letter-spacing: 0.108rem;
    color: var(--default-text-color);
    text-align: center;
    margin-bottom: 5rem;
  }

  .point-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.8rem;
    margin-bottom: 5.4rem;

    .point-item {
      background-color: var(--aice-white);
      border-radius: 1rem;

      &.large {
        display: flex;
        gap: 2.2rem;
        width: 43.6rem;
        padding: 5rem 5rem 5rem 5rem;
        /* flex-direction: column-reverse; */
        flex-direction: column;
        align-items: center;

        .text-area {
          width: 33.4rem;
          display: flex;
          flex-direction: column;
          gap: 2rem;
          align-items: center;

          & h3 {
            font-size: 2rem;
            font-weight: 700;
            line-height: 2rem;
            letter-spacing: 0.12rem;
            color: var(--default-text-color);

            @media screen and (max-width: 767px) {
              text-align: center;
            }
          }

          & p {
            font-size: max(1.8rem, 12px);
            font-weight: 400;
            line-height: 2.6rem;
            letter-spacing: 0.096rem;
            color: var(--default-text-color);

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }
        }

        .video-area {
          position: relative;
          width: 25rem;
          height: auto;
          background-color: #d9d9d9;
          aspect-ratio: 250 / 440;

          .play-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 6.5rem;
            height: 6.5rem;
            /* background-color: var(--aice-teal); */
            border-radius: 50%;
            background: linear-gradient(182deg, #006DAA, #29C7AC);

            &::after {
              content: '';
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-40%, -50%);
              width: 0;
              height: 0;
              border-left: 2rem solid var(--aice-white);
              border-top: 1.2rem solid transparent;
              border-bottom: 1.2rem solid transparent;
            }
          }
        }

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        & video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      &.small {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.3rem;
        width: calc(50% - 1.4rem);
        padding: 2rem 4.3rem 3.7rem;

        .icon-box {
          width: 14.3rem;
          height: 10.1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        .icon-box img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .text-area {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1.6rem;
          width: 35rem;
          text-align: center;

          & h3 {
            font-size: 2rem;
            font-weight: 700;
            line-height: 2rem;
            letter-spacing: 0.12rem;
            color: var(--default-text-color);
          }

          & p {
            font-size: max(1.8rem, 12px);
            font-weight: 400;
            line-height: 2.6rem;
            letter-spacing: 0.096rem;
            color: var(--default-text-color);
            text-align: left;

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }
        }
      }
    }
  }

  .point-two-big-container {
    display: flex;
    flex-direction: column;
    gap: 6.2rem;

    .point-big-container {
      width: 100%;
      background-color: #ffffff;
      border-radius: 1rem;
      padding: 5rem 3.9rem 6.6rem 5rem;
      display: flex;
      gap: 3rem;

      .point-big-txt-container {
        & h3 {
          font-style: normal;
          font-weight: 700;
          font-size: 2rem;
          line-height: 2rem;
          color: #000000;
          margin-bottom: 2rem;

          @media screen and (max-width: 767px) {
            font-size: 1.8rem;
          }
        }

        & p {
          max-width: 48.5rem;
          font-size: max(1.8rem, 12px);
          font-weight: 400;
          line-height: 2.6rem;
          letter-spacing: 0.01em;
          text-align: left;

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }

          span {
            position: relative;
            z-index: 1;
            background-color: var(--aice-marker);
          }
        }
      }

      .point-big-img-container {
        width: 29.6rem;
      }

      @media screen and (max-width: 767px) {
        flex-direction: column;
        padding: 3rem;
      }
    }
  }

  @media screen and (max-width: 1080px) {
    padding: 11rem 10rem;
  }
}

/* ------------------------------------------- */
/* Plan Section */
/* ------------------------------------------- */
#plan {
  background-color: var(--aice-white);
  padding: 11rem 36rem 0rem;

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 4rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: capitalize;
    }
  }

  .section-desc {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.6rem;
    letter-spacing: 0.108rem;
    color: var(--default-text-color);
    text-align: center;
    margin-bottom: 5rem;
  }

  .plan-table {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 5rem;
    align-items: center;

    .table-row {
      display: grid;
      grid-template-columns: 22rem 22rem 22rem 22rem;
      gap: 0.7rem;

      &.header {
        .cell.plan {
          height: 8.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.3rem;
          border-radius: 0.6rem;
          padding: 2.3rem 0;

          .plan-sub {
            font-size: max(1.8rem, 12px);
            font-weight: 700;
            line-height: 1.6rem;
            letter-spacing: 0.096rem;
            color: var(--aice-white);

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }
          }

          .plan-name {
            font-size: 2rem;
            font-weight: 700;
            line-height: 2rem;
            letter-spacing: 0.12rem;
            color: var(--aice-white);
          }

          .plan-name-last {
            font-size: 1.8rem;
          }

          &.light {
            background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
          }

          &.pro {
            background: linear-gradient(to bottom, var(--aice-plan-pro-start), var(--aice-plan-pro-end));
          }

          &.enterprise {
            background: linear-gradient(to bottom, var(--aice-plan-enterprise-start), var(--aice-plan-enterprise-end));
          }
        }
      }

      .cell {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 1.7rem;
        letter-spacing: 0.102rem;
        border-radius: 0.6rem;
        padding: 2rem 1rem;

        &.label {
          background-color: var(--aice-table-label);
          color: var(--aice-white);
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 1.8rem;
          letter-spacing: 0.108rem;
          height: 5.6rem;
        }

        &.data {
          background-color: var(--aice-table-data);
          color: var(--default-text-color);
          height: 5.6rem;
          /* width: 23.3rem; */

          @media screen and (max-width: 767px) {
            /* width: 22rem; */
          }
        }

        &.data:nth-child(4) {
          width: 22rem;
        }
      }
    }
  }

  .cta-button {
    text-align: center;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      padding: 3rem 3.3rem 3rem 3.7rem;
      /* background-color: #fe6856; */
      background: linear-gradient(181deg, #FE6658, #FF7940);
      color: var(--aice-white);
      font-size: 2rem;
      font-weight: 700;
      line-height: 2rem;
      letter-spacing: 0.01em;
      text-decoration: none;
      position: relative;
      transition: opacity 0.3s ease-in-out;

      .arrow {
        background: url(./common/img/header-btn-arrow.svg) no-repeat;
        background-size: 100%;
        width: 1.6rem;
        height: 1.6rem;
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  @media screen and (max-width: 1080px) {
    padding: 11rem 10rem 0rem;
  }
}

/* ------------------------------------------- */
/* Voice Section */
/* ------------------------------------------- */
#voice {
  background-color: var(--aice-white);
  padding: 11rem 36rem;

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 3rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: capitalize;
    }
  }

  .voice-card {
    background-color: var(--aice-card-bg);
    border-radius: 3rem;
    padding: 7.3rem 15rem 2.9rem;
    position: relative;

    .voice-header {
      display: flex;
      gap: 7.9rem;
      margin-bottom: 2.8rem;

      .voice-info {
        flex: 1;

        .pharmacy-name {
          font-size: 2rem;
          font-weight: 700;
          line-height: 2rem;
          letter-spacing: 0.12rem;
          color: var(--default-text-color);
          margin-bottom: 3rem;

          @media screen and (max-width: 767px) {
            margin-bottom: 2rem;
          }
        }

        .badge {
          display: inline-block;
          background: linear-gradient(to right, var(--aice-blue-dark), var(--aice-green));
          padding: 0.85rem 2.5rem;
          border-radius: 2.25rem;
          margin-bottom: 1.6rem;
          width: 100%;

          & span {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.8rem;
            letter-spacing: 0.108rem;
            color: var(--aice-white);
          }
        }

        .challenge-list {
          list-style-position: outside;
          padding-left: 2.4rem;

          & li {
            font-size: max(1.8rem, 12px);
            font-weight: 400;
            line-height: 2.6rem;
            letter-spacing: 0.096rem;
            color: var(--default-text-color);
            margin-bottom: 0;
            list-style: outside;

            @media screen and (max-width: 767px) {
              font-size: 1.4rem;
            }

            &::marker {
              color: var(--default-text-color);
            }
          }
        }
      }

      .voice-image {
        width: 30.5rem;
        height: 17.1rem;
        background-color: #d9d9d9;
        flex-shrink: 0;
      }
    }

    .voice-content {
      background-color: var(--aice-white);
      padding: 3.1rem 5.8rem;
      border-radius: 0;
      margin-bottom: 3.9rem;

      & p {
        font-size: max(1.8rem, 12px);
        font-weight: 400;
        line-height: 4rem;
        letter-spacing: 0.096rem;
        color: var(--default-text-color);
        margin-bottom: 0;
        display: inline-block;
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-offset: 1.1rem;
        text-decoration-color: #CCCCCC;

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
          line-height: 2.6rem;
          letter-spacing: 0.096rem;
          text-underline-offset: 0.7rem;
        }
      }
    }

    .pagination-dots {
      display: flex;
      gap: 2rem;
      justify-content: center;

      .dot {
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        background-color: #ddd;

        &.active {
          background-color: var(--aice-teal);
        }
      }
    }
  }

  @media screen and (max-width: 1080px) {
    padding: 11rem 10rem;
  }
}

/* ------------------------------------------- */
/* Guide Section */
/* ------------------------------------------- */
#guide {
  background-color: var(--aice-card-bg);
  padding: 9rem 0;
  margin-top: 8rem;
  /* margin-top temporary beacuse we commented out the #voice section */

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 5rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .guide-banner {
    position: relative;
    height: 7rem;
    width: 100%;
    background: linear-gradient(to right, var(--aice-blue-dark), var(--aice-green));
    border-radius: 3.5rem;
    margin-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;

    & p {
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 3.2rem;
      letter-spacing: 0.32rem;
      color: var(--aice-white);
      text-align: center;
    }
  }

  .guide-intro {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: 0.12rem;
    color: var(--default-text-color);
    text-align: center;
    margin-bottom: 3rem;

    & strong {
      font-weight: 700;
      z-index: 1;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2.6rem;
        background-color: var(--aice-marker);
        z-index: -1;
      }
    }
  }

  .guide-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 5rem;
    position: relative;

    .step {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      padding: 1.4rem 0;
      position: relative;
      padding-bottom: 3.7rem;
      border-bottom: 1px dashed #848484;
      margin-bottom: 2.5rem;

      /* &:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 2.75rem;
        bottom: -2.1rem;
        width: 0.1rem;
        height: 4.2rem;
        background-color: #ccc;
      } */

      .step-badge {
        position: relative;
        width: 5.5rem;
        height: 5.5rem;
        background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .number {
          font-family: "Montserrat", sans-serif;
          font-size: 2.8rem;
          font-weight: 400;
          line-height: 2.8rem;
          letter-spacing: 0.168rem;
          color: var(--aice-white);
        }
      }

      .step-content {
        flex: 1;
        padding-top: 1.7rem;
        display: flex;
        gap: 7rem;

        & h3 {
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 2.2rem;
          letter-spacing: 0.132rem;
          color: var(--default-text-color);
          width: 14.1rem;
        }

        & p {
          font-size: 1.8rem;
          font-weight: 400;
          line-height: 2.6rem;
          letter-spacing: 0.001em;
          color: var(--default-text-color);
        }

        .app-store-badge {
          width: 22.9rem;
          height: 8.4rem;
          margin-top: 3.1rem;
          transition: 0.4s all ease;
        }

        .app-store-badge:hover {
          opacity: 0.7;
        }

        .img-txt-container {
          display: flex;
          flex-direction: column;

          @media screen and (max-width: 767px) {
            align-items: center;
          }
        }
      }
    }
  }

  .video-section {
    background-color: var(--aice-white);
    border-radius: 1rem;
    padding: 4.6rem 10.5rem 5rem;
    margin-bottom: 7.7rem;

    & h3 {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 2.8rem;
      letter-spacing: 0.22rem;
      color: var(--default-text-color);
      text-align: center;
      margin-bottom: 4.8rem;
      position: relative;
    }

    & h3::after {
      content: "";
      position: absolute;
      width: 15.2rem;
      height: 0.1rem;
      border: 1px solid #018D97;
      top: 1.5rem;
      bottom: 0;
      left: 0rem;
    }

    & h3::before {
      content: "";
      position: absolute;
      width: 15.2rem;
      height: 0.1rem;
      border: 1px solid #018D97;
      top: 1.5rem;
      bottom: 0;
      right: 0rem;
    }

    .video-area {
      position: relative;
      width: 69rem;
      height: 38.9rem;
      background-color: #d9d9d9;
      margin: 0 auto;

      .play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 7.5rem;
        height: 7.5rem;
        background-color: var(--aice-teal);
        border-radius: 50%;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-40%, -50%);
          width: 0;
          height: 0;
          border-left: 2.4rem solid var(--aice-white);
          border-top: 1.5rem solid transparent;
          border-bottom: 1.5rem solid transparent;
        }
      }
    }
  }

  .guide-cards-up-msg {
    font-style: normal;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2rem;
    text-align: center;
    letter-spacing: 0.06em;
    color: #000000;
    margin-bottom: 5rem;
  }

  .guide-cards {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;

    .guide-card {
      background-color: var(--aice-white);
      border-radius: 1rem;
      padding: 3.6rem 2rem 4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.9rem;
      width: 29rem;

      & h3 {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 2.8rem;
        letter-spacing: 0.01em;
        color: var(--default-text-color);
        text-align: center;
      }

      .card-icon {
        width: 19.4rem;
        height: 19.4rem;

        /* background-color: var(--aice-section-bg);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; */
        & img {
          width: 100%;
        }
      }

      & p {
        font-size: max(1.8rem, 12px);
        font-weight: 400;
        line-height: 2.6rem;
        letter-spacing: 0.096rem;
        color: var(--default-text-color);
        text-align: justify;
        width: 22.6rem;

        @media screen and (max-width: 767px) {
          width: 30.6rem;
          font-size: 1.4rem;
        }
      }
    }
  }

  .video-dual {
    background-color: var(--aice-white);
    border-radius: 1rem;
    padding: 5rem 7.9rem;
    display: flex;
    gap: 3.7rem;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3.5rem;
    margin-bottom: 10.9rem;

    .video-item {
      flex: 1;

      & h3 {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.8rem;
        letter-spacing: 0.01em;
        color: var(--default-text-color);
        text-align: center;
        margin-bottom: 3.1rem;
      }

      .spe-video-item-title {
        position: relative;
      }

      .spe-video-item-title::before {
        content: "";
        position: absolute;
        width: 4rem;
        height: 0.1rem;
        border: 1px solid #018D97;
        top: 1rem;
        bottom: 0;
        left: 0rem;
      }

      .spe-video-item-title::after {
        content: "";
        position: absolute;
        width: 4rem;
        height: 0.1rem;
        border: 1px solid #018D97;
        top: 1rem;
        bottom: 0;
        right: 0rem;
      }

      .spe-video-item-title2 {
        position: relative;
      }

      .spe-video-item-title2::before {
        content: "";
        position: absolute;
        width: 3.7rem;
        height: 0.1rem;
        border: 1px solid #018D97;
        top: 1rem;
        bottom: 0;
        left: 0rem;
      }

      .spe-video-item-title2::after {
        content: "";
        position: absolute;
        width: 3.7rem;
        height: 0.1rem;
        border: 1px solid #018D97;
        top: 1rem;
        bottom: 0;
        right: 0rem;
      }

      .video-area {
        position: relative;
        width: 35.1rem;
        height: 19.8rem;
        background-color: #d9d9d9;
        border-radius: 1rem;

        .play-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 5.7rem;
          height: 5.7rem;
          border-radius: 50%;
          background: linear-gradient(182deg, #006DAA, #29C7AC);

          &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-40%, -50%);
            width: 0;
            height: 0;
            border-left: 2rem solid var(--aice-white);
            border-top: 1.2rem solid transparent;
            border-bottom: 1.2rem solid transparent;
          }
        }

        & video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .guide-mid-text {
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.3rem;
    letter-spacing: 0.01em;
    color: #000000;
    margin-bottom: 4.2rem;

    @media screen and (max-width: 767px) {
      font-size: 1.2rem;
      line-height: 2rem;
    }
  }
}

.management-site-setting-container {
  width: 100%;
  background-color: #ffffff;
  padding: 6.8rem 3.6rem 7.1rem 6.1rem;
  border-radius: 1rem;
  display: flex;
  gap: 3rem;

  .mangement-setting-text-container {
    & h3 {
      font-style: normal;
      font-weight: 700;
      font-size: 1.8rem;
      letter-spacing: 0.1em;
      color: #018D97;
      margin-bottom: 1.2rem;
      max-width: 35.4rem;
    }

    & p {
      font-style: normal;
      font-weight: 400;
      font-size: max(1.8rem, 12px);
      line-height: 2.6rem;
      letter-spacing: 0.01em;
      color: #000000;
      margin-bottom: 2.2rem;
      max-width: 35.4rem;

      @media screen and (max-width: 767px) {
        font-size: 1.4rem;
      }
    }
  }

  .management-setting-img-container {
    width: 41.9rem;

    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }

  @media screen and (max-width: 767px) {
    flex-direction: column-reverse;
    padding: 3rem;
  }
}

/* ------------------------------------------- */
/* FAQ Section */
/* ------------------------------------------- */
#faq {
  background-color: var(--aice-section-bg);
  padding: 11rem 36rem;

  .section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    margin-bottom: 5rem;

    & h2 {
      font-size: 4rem;
      font-weight: 700;
      line-height: 4rem;
      letter-spacing: 0.4rem;
      color: var(--default-text-color);
    }

    .subtitle {
      font-family: "Montserrat", sans-serif;
      font-size: 3rem;
      font-weight: 400;
      line-height: 3rem;
      letter-spacing: 0.3rem;
      background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: uppercase;
    }
  }

  .section-desc {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.6rem;
    letter-spacing: 0.108rem;
    color: var(--default-text-color);
    text-align: center;
    margin-bottom: 5rem;
  }

  .faq-tabs {
    display: flex;
    gap: 1.7rem;
    justify-content: center;
    margin-bottom: 5rem;

    .tab-btn {
      position: relative;
      width: 21.2rem;
      height: 6.4rem;
      background-color: var(--aice-white);
      border: 0.2rem solid var(--aice-teal);
      border-radius: 0;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.8rem;
      letter-spacing: 0.18rem;
      color: var(--aice-teal);
      cursor: pointer;
      display: flex;
      align-items: center;
      text-decoration: none;
      padding-left: 1.5rem;

      .icon {
        position: absolute;
        right: 0.7rem;
        background: url(./common/img/faq-arrow.svg) no-repeat;
        background-size: 100%;
        width: 1.9rem;
        height: 1.9rem;
      }

      /* &.active {
        background-color: var(--aice-teal);
        color: var(--aice-white);
      } */
    }
  }

  .faq-category {
    margin-bottom: 4.2rem;

    .category-badge {
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 3.2rem;
      letter-spacing: 0.32rem;
      color: black;
      text-align: left;
      padding-left: 4.5rem;
      position: relative;

      @media screen and (max-width: 767px) {
        font-size: 2.4rem;
        line-height: 2.5rem;
      }
    }

    .category-badge::before {
      content: "";
      position: absolute;
      left: 0;
      width: 3.2rem;
      height: 3.2rem;
      background: linear-gradient(180deg, #006DAA 0%, #29C7AC 100%);
      border-radius: 0.4rem;
    }
  }

  @media screen and (max-width: 767px) {
    .category-badge::before {
      width: 2.2rem !important;
      height: 2.2rem !important;
      top: 0.4rem;
    }
  }

  /* Banner Section */
  /* ------------------------------------------- */
  #banner {
    background: linear-gradient(135deg, #006daa 0%, #29c7ac 100%);
    padding: 11rem 36rem;
    position: relative;

    .banner-container {
      display: flex;
      gap: 3rem;
      justify-content: center;

      .banner-card {
        width: 53.4rem;
        height: 25.5rem;
        border-radius: 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 4.2rem 0;
        position: relative;
        cursor: pointer;

        & p {
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 2rem;
          letter-spacing: 0.132rem;
          color: var(--aice-white);
          text-align: center;
          margin-bottom: 2.4rem;
        }

        .banner-icon {
          width: 13.3rem;
          height: 13.3rem;
          background-color: var(--aice-white);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
        }

        &.orange {
          background: linear-gradient(to bottom, var(--aice-banner-orange-start), var(--aice-banner-orange-end));
        }

        &.red {
          background: linear-gradient(to bottom, var(--aice-orange-start), var(--aice-orange-end));
        }
      }
    }
  }

  /* ------------------------------------------- */
  /* Info Section */
  /* ------------------------------------------- */
  #info {
    background-color: var(--aice-section-bg);
    padding: 11rem 36rem;

    .info-container {
      display: flex;
      justify-content: center;

      .info-box {
        width: 90rem;
        background-color: var(--aice-white);
        padding: 5.8rem 0 5rem;
        color: var(--aice-white);
        text-align: center;
      }
    }
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-bottom: 8rem;

    .faq-item {
      background-color: var(--aice-white);
      border-radius: 1rem;
      overflow: hidden;

      .question {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 3.8rem;
        padding: 3rem 3rem 3.2rem 7rem;
        cursor: pointer;
        transition: all 0.3s ease;

        .q-icon {
          position: absolute;
          left: 7rem;
          top: 3rem;
          width: 2.6rem;
          height: 2.6rem;
          background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "Montserrat", sans-serif;
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.4rem;
          letter-spacing: 0.14rem;
          color: var(--aice-white);
          text-transform: uppercase;

          @media screen and (max-width: 1080px) {
            left: 2rem;
          }
        }

        & h3 {
          flex: 1;
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 2.4rem;
          letter-spacing: 0.144rem;
          color: var(--default-text-color);
          padding-left: 4rem;

          @media screen and (max-width: 1080px) {
            max-width: 78rem;
          }

          @media screen and (max-width: 767px) {
            max-width: 28rem;
            font-size: 1.4rem;
            line-height: 2rem;
          }
        }

        .toggle-icon {
          position: absolute;
          right: 3rem;
          top: 4.3rem;
          width: 1.7rem;
          height: 0.2rem;
          background-color: var(--default-text-color);
          transition: all 0.3s ease;

          &::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 0.2rem;
            height: 1.7rem;
            background-color: var(--default-text-color);
            transition: all 0.3s ease;
          }
        }

        @media screen and (max-width: 1080px) {
          padding: 3rem 3rem 3.2rem 2rem;
        }
      }

      .answer {
        opacity: 0;
        height: 0;
        transition: all 0.3s ease;
      }

      &.open {
        .question {
          .toggle-icon::before {
            display: none;
          }

          .toggle-icon {
            transform: rotate(180deg);
          }
        }

        .answer {
          display: flex;
          opacity: 1;
          height: auto;

          @media screen and (max-width: 767px) {
            padding: 0 3rem 3.9rem 2rem;
          }
        }
      }

      .answer {
        display: none;
        gap: 1.4rem;
        padding: 0 3rem 3.9rem 7rem;
        transition: all 0.3s ease;

        .a-icon {
          width: 2.6rem;
          height: 2.6rem;
          background: linear-gradient(to bottom, var(--aice-blue-dark), var(--aice-green));
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: "Montserrat", sans-serif;
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 1.4rem;
          letter-spacing: 0.14rem;
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-transform: uppercase;
          position: relative;
        }

        .a-icon::before {
          content: "";
          position: absolute;
          top: 0;
          left: -0.1rem;
          width: 100%;
          height: 100%;
          background: url(./common/img/answer-container.png) no-repeat;
          background-size: 100%;
        }

        & p {
          flex: 1;
          font-size: max(1.8rem, 12px);
          font-weight: 400;
          line-height: 2.2rem;
          letter-spacing: 0.128rem;
          color: var(--default-text-color);

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}

/* ------------------------------------------- */
/* Banner Section */
/* ------------------------------------------- */
#banner {
  /* background: linear-gradient(135deg, #006daa 0%, #29c7ac 100%); */
  background: url(./common/img/banner-footer-bk.png) no-repeat;
  background-size: cover;
  padding: 10rem 36rem;
  position: relative;

  .banner-container {
    display: flex;
    gap: 3rem;
    justify-content: center;

    .banner-card {
      width: 53.4rem;
      height: 25.5rem;
      border-radius: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 4.2rem 0;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      transition: 0.4s all ease;

      & p {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 2rem;
        letter-spacing: 0.132rem;
        color: var(--aice-white);
        text-align: center;
        margin-bottom: 2.4rem;
      }

      .banner-icon {
        width: 13.3rem;
        height: 13.3rem;
      }

      &.orange {
        background: linear-gradient(to bottom, var(--aice-banner-orange-start), var(--aice-banner-orange-end));
      }

      &.red {
        background: linear-gradient(to bottom, var(--aice-orange-start), var(--aice-orange-end));
      }
    }

    .banner-card:hover {
      opacity: 0.7;
    }
  }
}

/* ------------------------------------------- */
/* Info Section */
/* ------------------------------------------- */
#info {
  background-color: var(--aice-section-bg);
  padding: 11rem 36rem;

  .info-container {
    display: flex;
    justify-content: center;

    .info-box {
      width: 90rem;
      background-color: var(--aice-white);
      padding: 5.8rem 0 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;

      .tagline {
        font-size: max(1.8rem, 12px);
        font-weight: 500;
        line-height: 1.6rem;
        letter-spacing: 0.128rem;
        color: var(--default-text-color);
        text-align: center;
        margin-bottom: 1.6rem;

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
        }
      }

      .logo {
        width: 38.5rem;
        height: 9.7rem;
        margin-bottom: 1.7rem;
      }

      .company-info {
        text-align: center;

        & p {
          font-size: max(1.8rem, 12px);
          font-weight: 500;
          line-height: 2.6rem;
          letter-spacing: 0.128rem;
          color: var(--default-text-color);
          margin-bottom: 0;

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
          }
        }
      }
    }
  }
}

/* ------------------------------------------- */
/* Slick Carousel Customization */
/* ------------------------------------------- */
.voice-slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.voice-slider .voice-card {
  margin: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Dots Container */
.voice-slider .slick-dots {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 3rem 0 0 0;
  list-style: none;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

/* Individual Dot (li) */
.voice-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 0.9rem;
  height: 0.9rem;
}

/* Dot Button */
.voice-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #ddd;
  border-radius: 50%;
}

/* Active Dot */
.voice-slider .slick-dots li.slick-active button {
  background-color: var(--aice-teal);
}

/* ------------------------------------------- */
/* Footer */
/* ------------------------------------------- */
#footer {
  height: 4rem;
  background: linear-gradient(to right, var(--aice-blue-dark), var(--aice-green));
  display: flex;
  align-items: center;
  justify-content: center;

  & p {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2rem;
    letter-spacing: 0.096rem;
    color: var(--aice-white);
    text-align: center;
  }
}

/* ------------------------------------------- */
/* Banner Section */
/* ------------------------------------------- */
#banner {
  /* background: linear-gradient(135deg, #006daa 0%, #29c7ac 100%); */
  background: url(./common/img/banner-footer-bk.png) no-repeat;
  background-size: cover;
  padding: 10rem 36rem;
  position: relative;

  .banner-container {
    display: flex;
    gap: 3rem;
    justify-content: center;

    .banner-card {
      width: 53.4rem;
      height: 25.5rem;
      border-radius: 0.6rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 4.2rem 0;
      position: relative;
      cursor: pointer;
      text-decoration: none;
      transition: 0.4s all ease;

      & p {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 2rem;
        letter-spacing: 0.132rem;
        color: var(--aice-white);
        text-align: center;
        margin-bottom: 2.4rem;

        @media screen and (max-width: 767px) {
          font-size: 1.6rem;
          line-height: 2rem;
          /* margin-bottom: 1.5rem; */
          margin-bottom: 0;
        }
      }

      .banner-icon {
        width: 13.3rem;
        height: 13.3rem;

        @media screen and (max-width: 767px) {
          width: 5.5rem;
          height: 5.5rem;
        }
      }

      &.orange {
        background: linear-gradient(to bottom, var(--aice-banner-orange-start), var(--aice-banner-orange-end));

        @media screen and (max-width: 767px) {
          flex-direction: row;
          padding: 1rem 1.8rem;
        }
      }

      &.red {
        background: linear-gradient(to bottom, var(--aice-orange-start), var(--aice-orange-end));

        @media screen and (max-width: 767px) {
          flex-direction: row;
          padding: 1rem 1.8rem;
        }
      }
    }

    .banner-card:hover {
      opacity: 0.7;
    }
  }
}

/* ------------------------------------------- */
/* Info Section */
/* ------------------------------------------- */
#info {
  background-color: var(--aice-section-bg);
  padding: 11rem 36rem;

  .info-container {
    display: flex;
    justify-content: center;

    .info-box {
      width: 90rem;
      background-color: var(--aice-white);
      padding: 5.8rem 0 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;

      .tagline {
        font-size: max(1.8rem, 12px);
        font-weight: 500;
        line-height: 1.6rem;
        letter-spacing: 0.128rem;
        color: var(--default-text-color);
        text-align: center;
        margin-bottom: 1.6rem;

        @media screen and (max-width: 767px) {
          font-size: 1.4rem;
        }
      }

      .logo {
        width: 38.5rem;
        height: 9.7rem;
        margin-bottom: 1.7rem;
        transition: opacity 0.3s ease-in-out;

        @media screen and (max-width: 767px) {
          width: 100%;
          height: auto;
          margin-bottom: 0;
        }

        &:hover {
          opacity: 0.7;
        }
      }

      .company-info {
        text-align: center;

        & p {
          font-size: max(1.8rem, 12px);
          font-weight: 500;
          line-height: 2.6rem;
          letter-spacing: 0.01em;
          color: var(--default-text-color);
          margin-bottom: 0;

          @media screen and (max-width: 767px) {
            font-size: 1.4rem;
            line-height: 2rem;
            text-align: left;
          }
        }
      }
    }
  }
}

/* ------------------------------------------- */
/* Slick Carousel Customization */
/* ------------------------------------------- */
.voice-slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.voice-slider .voice-card {
  margin: 0 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Dots Container */
.voice-slider .slick-dots {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 3rem 0 0 0;
  list-style: none;
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;

  @media screen and (max-width: 767px) {
    bottom: 3.2rem;
  }
}

/* Individual Dot (li) */
.voice-slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: 0.9rem;
  height: 0.9rem;
}

/* Dot Button */
.voice-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #ddd;
  border-radius: 50%;
}

/* Active Dot */
.voice-slider .slick-dots li.slick-active button {
  background-color: var(--aice-teal);
}

/* ------------------------------------------- */
/* Footer */
/* ------------------------------------------- */
#footer {
  height: 4rem;
  background: linear-gradient(to right, var(--aice-blue-dark), var(--aice-green));
  display: flex;
  align-items: center;
  justify-content: center;

  & small {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2rem;
    letter-spacing: 0.096rem;
    color: var(--aice-white);
    text-align: center;
    display: block;
  }
}


/* right banner */
.side-right-banner {
  width: 33.9rem;
  height: 10.6rem;
  position: fixed;
  /* top: 70%; */
  bottom: 3%;
  right: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  @media screen and (max-width: 1080px) {
    width: 24.9rem;
    height: 8rem;
  }

  @media screen and (max-width: 767px) {
    width: 18rem;
    height: 6rem;
    right: 0;
    bottom: 2vh;
    top: auto;
  }
}

.side-right-banner img {
  @media screen and (max-width: 767px) {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

.side-right-banner.is-visible {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}


/* 特別な修正 */

.text-content-best-app {
  margin-top: 4.4rem !important;
}

/* ------------------------------------------- */
/* Responsive Design (max-width: 767px) */
/* ------------------------------------------- */
@media screen and (max-width: 767px) {
  .main-banner-top {
    background: url(./common/img/top-bk-fv-sp.png) no-repeat;
    background-size: cover;
    background-position: center;
    height: 102rem;
  }

  .phone-fv-container {
    width: 24.4rem;
    height: 47.5rem;
    top: 46.6rem;
    right: 6.6rem;
  }

  .phone-fv-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fv-btn-phone-container {
    width: 18.6rem;
    height: 12.1rem;
    background: url(./common/img/fv-btn-phone-sp.png) no-repeat;
    background-size: 100%;
  }

  .fv-btn-phone-container-absolute {
    right: 3.4rem;
    top: 84rem;
  }

  .fv-btn-phone-container .text {
    font-size: 1.7rem;
    line-height: 2.2rem;
    bottom: 1.1rem;
    left: 3.2rem;
  }

  .fv-ellipse-container {
    left: 3.4rem;
    top: 29.3rem;
  }

  .left-main-logo-container {
    width: 33rem;
    height: 13.7rem;
    top: 7.6rem;
    left: 2.2rem;
  }

  .ellipse-img-container {
    width: 31.7rem;
    height: 15.1rem;
  }

  .ellipse-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ellispe-img02 {
    width: 15.6rem;
    height: 13.1rem;
    left: 13.3rem;
    top: -0.1rem;
  }

  .orange-fv-btn {
    width: 32.2rem;
    height: 5.3rem;
    padding-left: 1.7rem;
    border-radius: 4px;
  }

  .orange-btn-absolute-container {
    left: 2.6rem;
    top: 40.3rem;
  }

  .orange-fv-btn .text {
    font-size: 1.4rem;
  }

  /* Header */
  #header {
    height: 6rem;
  }

  #header .logo-area {
    width: 10rem;
    height: 5rem;
    border-bottom-right-radius: 2rem;
  }

  #header .logo-area .catch {
    display: none;
  }

  #header .logo-area .logo {
    width: 7rem;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 1.5rem;
  }

  #header .cta-btn {
    right: 0.6rem;
    top: 0.7rem;
  }

  /* Service Section */
  #service {
    padding: 8rem 0 0;
  }

  #service .section-title {
    margin-bottom: 6rem;
    gap: 0.6rem;
  }

  #service .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #service .section-title .subtitle {
    font-size: 1.8rem;
  }

  .card-column {
    padding: 4rem 1rem;
  }

  .card-column .card-head .card-title {
    font-size: 1.9rem;
  }

  .card-column .icon-cards {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }

  .card-column .check-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-left: 3rem;
  }

  .card-column .btn-list {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    margin-top: 3rem;
  }

  .card-column .btn-list .btn {
    width: 100%;
    max-width: 32rem;
    font-size: 1.5rem;
  }

  .card-column .comparison-cards {
    flex-direction: column;
    gap: 2rem;
  }

  .card-column .comparison-cards .comparison-card {
    width: 100%;
    max-width: 32rem;
  }

  .card-column .comparison-cards .comparison-card.featured {
    width: 100%;
    max-width: 32rem;
  }

  .card-column .card-text .text-content {
    text-align: left;
  }

  .card-label-last {
    font-size: 1.3rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Point Section */
  #point {
    padding: 5rem 0;
  }

  #point .section-title {
    gap: 0.6rem;
  }

  #point .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #point .section-title .subtitle {
    font-size: 1.8rem;
  }

  #point .section-desc {
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 3rem;
  }

  #point .text-area h3 {
    line-height: 2.6rem !important;
  }

  #point .point-list .point-item.large {
    flex-direction: column;
    padding: 3rem;
    gap: 3rem;
  }

  #point .point-list .point-item.large .text-area {
    width: 100%;
  }

  #point .point-list .point-item.large .video-area {
    width: 75%;
    height: auto;
    aspect-ratio: 9/16;
  }

  #point .point-list .point-item.small {
    width: 100%;
    padding: 3rem;
  }

  #point .point-list .point-item.small .text-area {
    width: 100%;
    text-align: center;
  }

  #point .point-list .point-item.small .text-area p {
    text-align: left;
  }

  /* Plan Section */
  #plan {
    padding: 5rem 0;
  }

  #plan .section-title {
    gap: 0.6rem;
  }

  #plan .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #plan .section-title .subtitle {
    font-size: 1.8rem;
  }

  #plan .section-desc {
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 3rem;
  }

  #plan .plan-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  #plan .plan-table .table-row {
    display: flex;
    width: max-content;
  }

  #plan .plan-table .table-row .cell {
    width: 20rem;
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-bottom: 0.8rem;
  }

  #plan .plan-table .table-row .cell.label {
    /* position: sticky; */
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }

  #plan .plan-sub {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2rem !important;
  }

  #plan .plan-name {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2rem !important;
  }

  #plan .cta-button a {
    width: 100%;
    max-width: 32rem;
    padding: 2rem;
    font-size: 1.5rem;
  }

  /* Voice Section */
  #voice {
    padding: 5rem 0;
  }

  #voice .section-title {
    gap: 0.6rem;
  }

  #voice .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #voice .section-title .subtitle {
    font-size: 1.8rem;
  }

  #voice .section-desc {
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 3rem;
  }

  .voice-slider .voice-card {
    padding: 3rem 2rem 2rem !important;
  }

  .voice-slider .voice-card .voice-header {
    flex-direction: column-reverse;
    gap: 2rem !important;
    align-items: center;
  }

  .voice-slider .voice-card .voice-header .voice-image {
    width: 100% !important;
    max-width: 30rem;
    height: auto !important;
    aspect-ratio: 16/9;
    margin: 0 auto;
  }

  .voice-slider .voice-card .voice-content {
    padding: 2rem !important;
  }

  /* Guide Section */
  #guide {
    padding: 5rem 0;
  }

  #guide .section-title {
    gap: 0.6rem;
    margin-bottom: 3rem;
  }

  #guide .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #guide .section-title .subtitle {
    font-size: 1.8rem;
  }

  #guide .video-section h3 {
    /* font-size: max(1.8rem, 12px); */
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }

  #guide .video-section h3::before {
    right: -0.5rem;
    width: 1.5rem;
  }

  #guide .video-section h3::after {
    left: -0.5rem;
    width: 1.5rem;
  }

  .guide-banner p {
    font-size: 2rem !important;
    letter-spacing: 0.2rem !important;
    background: linear-gradient(to right, var(--aice-blue-dark), var(--aice-green));
    border-radius: 3.5rem;
    padding: 1rem 4rem !important;
  }

  .guide-banner {
    height: inherit !important;
    background: transparent !important;
    margin-bottom: 3rem !important;
  }

  .guide-intro {
    font-size: 1.7rem !important;
    text-align: left !important;
    margin-bottom: 3rem !important;
  }

  .guide-steps .step {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }

  .guide-steps .step .step-content {
    flex-direction: column;
    gap: 2rem !important;
    align-items: center;
    padding-top: 1rem !important;
  }

  .guide-steps .step .step-content h3 {
    width: 100%;
    text-align: center;
  }

  .guide-steps .step .step-content p {
    text-align: left;
  }

  .guide-steps .step .step-content .app-store-badge {
    margin-top: 2rem !important;
    width: 60% !important;
    height: 7.5rem !important;
  }

  .video-section {
    padding: 3rem 2rem !important;
  }

  .video-section .video-area {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }

  .guide-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .guide-cards .guide-card {
    padding: 3rem 2rem !important;
    width: auto !important;
  }

  .guide-cards .guide-card p {
    width: 100%;
  }

  .video-dual {
    flex-direction: column;
    padding: 3rem 2rem !important;
  }

  .video-dual .video-item .video-area {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }

  .spe-video-item-title::before {
    width: 2rem !important;
  }

  .spe-video-item-title::after {
    width: 2rem !important;
  }

  .spe-video-item-title2::before {
    width: 2rem !important;
  }

  .spe-video-item-title2::after {
    width: 2rem !important;
  }

  /* FAQ Section */
  #faq {
    padding: 5rem 0;
  }

  #faq .section-title {
    gap: 0.6rem;
  }

  #faq .section-title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    letter-spacing: 0.2rem;
  }

  #faq .section-title .subtitle {
    font-size: 1.8rem;
  }

  #faq .section-desc {
    font-size: 1.7rem;
    text-align: left;
    margin-bottom: 3rem;
  }

  .faq-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem !important;
    row-gap: 0 !important;
  }

  .faq-tabs .tab-btn {
    width: 45% !important;
    margin-bottom: 1rem !important;
    font-size: 1.4rem !important;
    padding-left: 0.5rem !important;
  }

  .faq-list .faq-item .question {
    padding: 2rem 2rem 2rem 5rem;
  }

  .faq-list .faq-item .question .q-icon {
    left: 1.5rem;
    top: 2rem;
  }

  .faq-list .faq-item .question h3 {
    padding-left: 0;
    /* font-size: max(1.8rem, 12px); */
    font-size: 1.4rem;
  }

  .faq-list .faq-item .question .toggle-icon {
    right: 1.5rem;
    top: 3rem;
  }

  /* Banner Section */
  #banner {
    padding: 3.9rem 0;
    background: url(./common/img/banner-bg-sp.png) no-repeat;
    background-size: cover;
    background-position: center;
  }

  #banner .banner-container {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }

  #banner .banner-container .banner-card {
    width: 100%;
    max-width: 32rem;
    height: auto;
    padding: 3rem 0;
    gap: 1.2rem;
  }

  /* Info Section */
  #info {
    padding: 5rem 0;
  }

  #info .info-container .info-box {
    width: 100%;
    padding: 3rem 2rem;
    margin: 0 2rem;
  }
}

/* ------------------------------------------- */
/* Scroll Animation */
/* ------------------------------------------- */
.fade-in-section {
  opacity: 0;
  transform: translateX(-5rem);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;

  @media screen and (max-width: 767px) {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateX(0);
}

@media print {
  .fade-in-section {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ------------------------------------------- */
/* Video Play Icon State */
/* ------------------------------------------- */
/* .video-area.is-playing .play-icon {
  display: none;
} */