@charset "utf-8";
/* CSS Document */

/* FAQ-PAGE--------------------------------------------- */
/* FAQ Wrapper */
.wrapper_faq {
  margin: 0 auto;
  padding-bottom: 20.8rem;
  width: 131.2rem;
  padding-top: 112px;
  display: flex;
  justify-content: space-between;
  /* Side Menu */
  .menu_faq {
    position: relative;
    width: 29rem;

    .list_menu {
      position: sticky;
      z-index: 1;
      top: 30rem;
      left: 0;
      display: flex;
      flex-flow: column;
      padding-bottom: 2.4rem;
      gap: 1.24rem;

      .card_menu {
        text-align: right;
        font-size: 1.4rem;
        font-style: normal;
        line-height: 192%;
        letter-spacing: 0.07em;

        opacity: 0.5;
        display: flex;
        justify-content: flex-end;
        gap: 1.1rem;

        &::after {
          content: "";
          display: block;
          background: #465352;
          top: 0;
          left: 0;
          transform: translate(0, 0);
          width: 1.4rem;
          aspect-ratio: 1;
          border-radius: 50%;
          align-self: center;
          transform: translateY(0.2rem);
          opacity: 0;
        }
        &:hover,
        :active {
          opacity: 1;
        }
        &.active {
          opacity: 1;
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }

  .box_faq {
    width: 97.3rem;
    .list_faq {
      display: flex;
      flex-flow: column;
      gap: 11.2rem;
      .card_faq {
        .ttl02 {
          margin-bottom: 2.4rem;
          font-size: 1.6rem;
          font-weight: 600;
          line-height: 200%;
          letter-spacing: 0.07em;
        }

        /* Accordion Component */
        .c-accordion {
          position: relative;
          z-index: 0;
          padding: 4.4rem 0;
          border-bottom: 1px solid #9eadab;
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            background: rgba(204, 197, 183, 0.5);
            top: 0;
            left: -40.4rem;
            width: 100vw;
            height: 100%;
            opacity: 0;
            transition: 0.3s;
            @media screen and (min-width: 1920px) {
              left: calc(((100vw - 1297px) + (1749px - 100vw) / 2) * -1);
            }
          }
          .c-accordion__ttl {
            font-size: 2rem;
            font-weight: 700;
            line-height: 187%;
            display: flex;
            gap: 2.4rem;
            align-items: center;

            .dec00 {
              position: relative;
              display: flex;
              width: 5.6rem;
              justify-content: center;
              align-items: center;
              aspect-ratio: 1/1;
              border-radius: 50%;
              background: #ccc5b7;
              align-self: center;
              transition:
                color 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s,
                transform 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;

              &::before,
              &::after {
                content: "";
                display: block;
                z-index: 0;
                background: #465352;
                width: 1.3rem;
                height: 1px;
                transform-origin: 50% 50%;
              }

              &::after {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(90deg);
              }
            }
            .ttl_text {
              width: calc(100% - 8rem);
            }
          }
          .c-accordion__cont {
            padding-left: 8rem;
            .c-accordion__inner {
              .c-text00 {
                font-size: 1.6rem;
                font-weight: 400;
                line-height: 200%;
                letter-spacing: 0.07em;
              }
            }
          }
          &.open {
            &::after {
              opacity: 1;
            }
            .c-accordion__ttl {
              .dec00 {
                &::after {
                  transform: translate(-50%, -50%) rotate(0);
                }
              }
            }
            .c-accordion__cont {
              padding-top: 2.3rem;
            }
            &:hover {
              .c-accordion__ttl {
                .dec00 {
                  transform: scale(1);
                  &::before,
                  &::after {
                    opacity: 1;
                  }
                  &::after {
                    transform: translate(-50%, -50%) rotate(0);
                  }
                }
              }
            }
          }
          &:hover {
            &::after {
              opacity: 1;
            }
            .c-accordion__ttl {
              .dec00 {
                transform: scale(0.1);
                background: #fdfcfb;
                &::before,
                &::after {
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding-bottom: 12.8rem;
    width: 32.6rem;
    padding-top: 8rem;
    flex-flow: column;
    /* Side Menu */
    .menu_faq {
      position: relative;
      width: 100%;

      .list_menu {
        padding-bottom: 3.4rem;
        gap: 0.7rem;
        .card_menu {
          opacity: 1;
          justify-content: flex-start;
          transition: 0.3s;

          &::after {
            content: "";
            display: block;
            background: url("../img/common/icon_arrow_left_b.svg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            width: 0.7rem;
            aspect-ratio: 7 / 12;
            align-self: center;
            opacity: 1;
            transition: 0.2s;
            transform: translateY(0.05em);
          }
        }
      }
    }

    .box_faq {
      width: 100%;
      .list_faq {
        flex-flow: column;
        gap: 6.4rem;
        .card_faq {
          .ttl02 {
            margin-bottom: 0.8rem;
          }
          .c-accordion {
            position: relative;
            z-index: 0;
            padding: 3.2rem 0;
            border-bottom: 1px solid #9eadab;
            &::after {
              left: -3.2rem;
            }
            .c-accordion__ttl {
              font-size: 1.8rem;
              gap: 1.2rem;
              .dec00 {
                width: 4rem;
                align-self: flex-start;
              }
              .ttl_text {
                width: calc(100% - 5.2rem);
              }
            }
            .c-accordion__cont {
              padding-left: 5.3rem;
              .c-accordion__inner {
                .c-text00 {
                  font-size: 1.4rem;
                }
              }
            }
            &.open {
              &::after {
                opacity: 1;
              }
              .c-accordion__ttl {
                .dec00 {
                  background: #fdfcfb;
                  &::before,
                  &::after {
                    background: #465352;
                    width: 1.3rem;
                    height: 1px;
                  }
                  &::after {
                    transform: rotate(0deg) translate(-50%, -50%);
                  }
                }
              }
              .c-accordion__cont {
                padding-top: 2.3rem;
              }
            }
            &:hover {
              .c-accordion__ttl {
                .dec00 {
                  transform: scale(0.2);
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Access-PAGE--------------------------------------------- */
/* Access Section */
.l-access {
  padding: 11.2rem 0 0;
  .inner {
    margin: 0 auto;
    width: 117.4rem;
    display: flex;
    figure {
      width: 66.3rem;
    }
    address {
      width: 51.1rem;
      transform: translateX(-4.4rem);
      padding-top: 12.2rem;

      .dec_text {
        margin-bottom: 2.4rem;
        display: block;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 192%;
        letter-spacing: 0.07em;
      }
      .ttl02_3 {
        margin-bottom: 6.7rem;
        font-size: 3rem;
        font-weight: 700;
        line-height: 166%;
        .jp {
          display: block;
          font-size: 1.8rem;
          line-height: 192%;
          margin-top: 0.3em;
        }
      }
      .data_access {
        margin-bottom: 4rem;
        display: flex;
        flex-flow: column;
        gap: 1.4rem;
        .card_data {
          color: var(--Color-Text-Base, #465352);
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 192%;
          letter-spacing: 0.07em;
          display: flex;
          gap: 2.4rem;

          dt {
            width: 8rem;
          }
          dd {
            width: 22.5rem;
          }
        }
      }
      .list_feature {
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 400;
        line-height: 192%;
        letter-spacing: 0.07em;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 8rem 0 0;
    .inner {
      width: 100%;
      flex-flow: column;
      gap: 3.2rem;
      figure {
        width: 100%;
      }
      address {
        margin: 0 auto;
        width: 32.6rem;
        transform: translateX(0);
        padding-top: 0;
        .dec_text {
          margin-bottom: 1.6rem;
        }
        .ttl02_3 {
          margin-bottom: 4.8rem;
        }
        .data_access {
          margin-bottom: 2rem;
          gap: 1rem;
          .card_data {
            flex-flow: column;
            display: flex;
            gap: 0;
            dt {
              width: 100%;
            }
            dd {
              width: 100%;
              padding-left: 1rem;
            }
          }
        }
      }
    }
  }
}

.l-description.adjust_access {
  padding: 8rem 0 20.8rem;
  .inner {
    p {
      margin-top: -0.2em;
    }
  }
  @media screen and (max-width: 768px) {
    padding: 14.6rem 0 12.8rem;
    .inner {
      p {
        margin-top: 0;
      }
    }
  }
}

/* Service-PAGE--------------------------------------------- */

.page_service {
  .l-description {
    padding: 11.1rem 0 19.3rem;
    .inner {
      p {
        margin-top: 3.4rem;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .l-description {
      padding: 8rem 0px 16rem;
      .inner {
        p {
          margin-top: 0;
        }
      }
    }
  }
}

.service_image {
  position: relative;
  width: 100%;
  overflow: hidden;
  .swiper-pagination {
    bottom: 2.4rem;
  }
  .swiper-pagination-bullet {
    background: #fdfcfb !important;
    opacity: 0.5;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

/* Service 01 (Lead) */
.l-service01 {
  padding: 8rem 0 0;
  .inner {
    margin: 0 auto;
    width: 131.2rem;
    padding: 0 11rem 0 22.8rem;
    .ttl02 {
      margin-bottom: 6.4rem;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 120%;
      transform: translateX(-16rem);

      .size_m {
        margin-bottom: 2.9rem;
        display: block;
        font-size: 3rem;
        font-weight: 700;
      }
    }
    p {
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 192%;
      letter-spacing: 0.07em;

      strong {
        margin-bottom: 2.4rem;
        display: block;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 180%;
        letter-spacing: 0;
      }
      .cap {
        margin-top: 1em;
        display: block;
        font-size: 0.8em;
        line-height: 1.4;
      }
    }

    /* All Inclusive Section */
    .list_ai {
      margin-top: 8rem;

      .card_ai {
        padding: 7rem 0;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #9eadab;

        .box_img {
          width: 29.7rem;
        }
        .box_text {
          width: 62.2rem;
          .ttl03 {
            margin-bottom: 2.4rem;
            font-size: 2.4rem;
            font-weight: 700;
            line-height: 180%;
          }
          p {
            padding-left: 0;
            strong {
              margin-bottom: 1.1rem;
              font-size: 1.6rem;
              font-weight: 600;
              line-height: 200%;
              letter-spacing: 0.07em;
            }
          }

          /* Nested Detail List */
          .in_list {
            margin-top: 4.8rem;

            .in_card {
              padding: 3.2rem 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-top: 1px solid #9eadab;
              .ttl04 {
                width: 14.8rem;
                font-size: 1.8rem;
                font-weight: 700;
                line-height: 192%;
                text-align: center;
              }
              p {
                width: 45rem;
                strong {
                  margin-bottom: 1.1rem;
                  display: block;
                  font-size: 1.6rem;
                  font-weight: 600;
                  line-height: 200%;
                  letter-spacing: 0.07rem;
                }
              }
            }
          }
        }
      }

      .description_ai {
        padding: 7rem 0;
        border-top: 1px solid #9eadab;

        .ttl03 {
          margin-bottom: 2.4rem;
          font-size: 2.4rem;
          font-weight: 700;
          line-height: 180%;
        }
        .timeline {
          margin: 5.8rem 0 4.8rem;
          display: flex;
          justify-content: center;

          text-align: center;
          .card_line {
            width: 18rem;
            padding-top: 2.4rem;
            position: relative;
            z-index: 0;
            &::before {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              background-color: #465352;
              top: 0.5rem;
              left: 50%;
              transform: translate(0, 0);
              width: 100%;
              height: 1px;
            }
            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              background-color: #465352;
              border-radius: 50%;
              top: 0;
              left: 50%;
              transform: translate(-50%, 0);
              width: 1.2rem;
              aspect-ratio: 1;
            }
            &:last-of-type {
              &::before {
                display: none;
              }
            }
            p {
              line-height: 1.5;
              .dec_w {
                display: block;
                font-weight: 600;
              }
            }
            p.uper {
              position: absolute;
              left: 50%;
              top: -40%;
              transform: translate(-50%, 0);
            }
          }
        }
        .list_service02 {
          display: flex;
          justify-content: space-between;
          .card_service02 {
            background: rgba(70, 83, 82, 0.6);
            padding: 2.4rem 3rem 4rem;
            border-radius: 0.7rem;
            border: 1px solid #9eadab;
            width: 31.8rem;
            color: #fff;
            &:nth-of-type(2) {
              background: rgba(70, 83, 82, 0.8);
            }
            &:nth-of-type(3) {
              background: rgba(70, 83, 82, 1);
            }
            .img_s02 {
              margin-bottom: 1.2rem;
              width: 5.6rem;
            }
            .ttl_s02 {
              font-size: 1.8rem;
              font-style: normal;
              font-weight: 700;
              line-height: 192%;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 4.8rem 0;
    .inner {
      width: 32.6rem;
      padding: 0;
      .ttl02 {
        transform: translateX(0);
        .size_m {
          font-size: 2.8rem;
        }
      }
      p {
        padding-left: 0;
        strong {
          font-size: 2rem;
        }
      }
      .list_ai {
        margin-top: 8rem;

        .card_ai {
          padding: 7rem 0;
          flex-flow: column;
          border-top: 1px solid #9eadab;

          .box_img {
            width: 100%;
          }
          .box_text {
            margin-top: 3.2rem;
            width: 100%;
            .ttl03 {
              margin-bottom: 1.6rem;
              font-size: 2.4rem;
              font-weight: 700;
              line-height: 180%;
            }
            p {
              padding-left: 0;
              strong {
                margin-bottom: 1.6rem;
                font-size: 1.8rem;
              }
            }

            /* Nested Detail List */
            .in_list {
              margin-top: 4.8rem;

              .in_card {
                padding: 2.24rem 0;
                flex-flow: column;
                border-top: 1px solid #9eadab;
                .ttl04 {
                  margin-bottom: 0.8rem;
                  width: 100%;
                  text-align: left;
                  font-size: 2rem;
                }
                p {
                  width: 100%;
                  strong {
                    margin-bottom: 0.8rem;
                  }
                }
              }
            }
          }
        }
        .description_ai {
          .ttl03 {
            margin-bottom: 2.4rem;
            font-size: 2rem;
          }
          .timeline {
            margin: 2.8rem 0 4rem;
            padding-left: 2.4rem;
            flex-flow: column;

            text-align: left;
            .card_line {
              width: 100%;
              padding: 1.2rem 0 1.2rem 2.4rem;
              position: relative;
              z-index: 0;
              &::before {
                border-radius: 50%;
                top: 50%;
                left: 0.58rem;
                width: 1px;
                height: 100%;
              }
              &::after {
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 1.2rem;
              }
              p {
                line-height: 1.5;
                .dec_w {
                  display: inline;
                  margin-right: 1em;
                }
              }
              p.uper {
                position: relative;
              }
              &:nth-of-type(4) {
                p {
                  .dec_w {
                    padding-left: 0.5em;
                  }
                }
              }
            }
          }
          .list_service02 {
            flex-flow: column;
            gap: 1.6rem;
            .card_service02 {
              padding: 2.4rem 3.2rem;
              width: 100%;
            }
          }
        }
      }
    }
  }
}

/* Service 02 (List) */
.l-service02 {
  padding: 19.2rem 0 17.6rem;
  .inner {
    margin: 0 auto;
    width: 116rem;

    .ttl02 {
      margin-bottom: 7rem;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 120%;

      .size_m {
        margin-top: 2.5rem;
        display: block;
        font-size: 3rem;
        font-weight: 700;
      }
    }
    .list_service {
      .card_service {
        border-top: 1px solid #9eadab;
        padding: 6.4rem 0;
        display: flex;
        justify-content: space-between;
        h3 {
          /* margin-bottom: 10.6rem; */
          margin-bottom: 4.6rem;
          font-size: 2.4rem;
          font-weight: 700;
          line-height: 180%;
          display: flex;
          flex-flow: wrap;
          align-items: flex-start;
          gap: 0.8rem;

          .en {
            font-size: 2.4rem;
            font-weight: 400;
            line-height: 100%;
            letter-spacing: -0.06em;
          }
          .size_s {
            width: 100%;
            margin-top: -1em;
            font-size: 1.2rem;
            padding-left: 2.5em;
          }
        }
        .box_img {
          width: 46.2rem;
          display: flex;
          flex-flow: column;

          figure {
            margin-top: auto;
          }
          h3 {
            margin-bottom: 10.6rem;
          }
        }
        .box_text {
          width: 63.4rem;
          font-size: 1.4rem;
          font-weight: 400;
          line-height: 192%;
          letter-spacing: 0.07em;
          .text00 {
            margin-bottom: 1.6rem;
            strong {
              margin-bottom: 1.6rem;
              display: block;
              font-size: 1.8rem;
              font-weight: 700;
              line-height: 192%;
              letter-spacing: 0;
            }
          }
          /* Example Box */
          .wrapper_list {
            display: flex;
            flex-flow: wrap;
            gap: 2.4rem;
            .box_example {
              width: calc(50% - 1.2rem);
              + .box_example {
                margin-top: 0;
              }
            }
          }
          .box_example {
            padding: 1.5rem 3.2rem;
            width: fit-content;
            border-radius: 0.7rem;
            border: 1px dashed #9eadab;
            + .box_example {
              margin-top: 2.4rem;
            }
            .list_example {
              /* margin-bottom: 2.6rem; */
            }
            .cap {
              margin-top: 2.6rem;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 12rem 0 12.8rem;
    .inner {
      width: 32.6rem;
      .ttl02 {
        margin-bottom: 7rem;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 120%;
        .size_m {
          margin-top: 2.5rem;
          display: block;
          font-size: 3rem;
          font-weight: 700;
        }
      }
      .list_service {
        .card_service {
          border-top: 1px solid #9eadab;
          flex-flow: column;
          h3 {
            margin-bottom: 4rem;
          }

          .box_img {
            width: 100%;
            display: flex;
            flex-flow: column;
            h3 {
              margin-bottom: 4rem;
            }
          }
          .box_text {
            margin-top: 3.2rem;
            width: 100%;

            .wrapper_list {
              .box_example {
                width: 100%;
              }
            }

            .box_example {
              padding: 1.6rem 1.6rem;
              width: 100%;
            }
          }
        }
      }
    }
  }
}