@charset "utf-8";

.p-policy {
  padding: 120px 0 185px;
  position: relative;
  overflow: hidden;

  @media (width < 768px) {
    padding: 80px 0 120px;
  }

  .l-inner {
    max-width: 1045px;
    display: flex;
    justify-content: space-between;
    gap: 20px;

    @media (width < 768px) {
      flex-direction: column;
      gap: 50px;
    }
  }
}

.p-policy__left {
  margin-left: 40px;
  margin-top: 55px;

  @media (width < 768px) {
    margin: 0;
  }
}

.p-policy__head {
  margin-top: 53px;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.821;
}

.p-policy__right {
  width: 50%;
  border-top: 2px solid #d0d0d0;
  border-bottom: 2px solid #d0d0d0;
  padding: 62px 55px 45px;
  display: flex;
  flex-direction: column;
  gap: 24px;

  @media (width < 768px) {
    width: 100%;
    padding: 50px 30px;
  }
}

.p-policy__text {
}

.p-policy__bg-text {
  position: absolute;
  bottom: -0.14em;
  left: 50%;
  transform: translateX(-50%);
  color: #dee9f8;
  font-family: var(--font-noto-sans);
  font-size: 173px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.03em;

  @media (width < 768px) {
    font-size: 80px;
  }
}

.p-features {
  padding: 94px 0 90px;
  background: linear-gradient(180deg, #dde8f8 0%, #f8fbff 53%, #dee8fa 100%);

  .l-inner {
    max-width: none;
    padding: 0;
  }

  .c-heading {
    max-width: 1206px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.p-features__lists {
  margin-top: -34px;

  @media (width < 768px) {
    margin-top: 40px;
  }
}

.p-features-list {
}

.p-features-list1,
.p-features-list3 {
  position: relative;
  width: 94%;
  max-width: 1570px;

  @media (width < 768px) {
    display: flex;
    flex-direction: column;
  }

  .p-features-list__image {
    position: absolute;
    top: 14%;
    left: 0;
    width: 42%;
    max-width: 542px;
    aspect-ratio: 542/450;
    object-fit: cover;
    border-radius: 5px;
    z-index: 1;

    @media (width < 768px) {
      position: static;
      width: 80%;
    }
  }

  .p-features-list__box {
    width: 66%;

    @media (width < 768px) {
      width: auto;
      margin-top: -30px;
    }
  }
}

.p-features-list1 {
  margin-left: auto;

  .p-features-list__box {
    border-radius: 10px 0px 0px 10px;
    padding: 170px 20px 218px 80px;
    margin-left: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 54%, #e6effb 100%);

    @media (width < 1120px) {
      padding: 100px 20px 100px 80px;
    }

    @media (width < 768px) {
      margin-left: 20px;
      padding: 60px 20px 100px;
    }
  }
}

.p-features-list2 {
  position: relative;
  margin-bottom: 17px;

  .p-features-list__image {
    width: 100%;
    aspect-ratio: 1366/480;
    max-height: 480px;
    min-height: 260px;
  }

  .p-features-list__box {
    margin: -148px auto 0;
    padding: 86px 20px 200px;
    width: 80%;
    max-width: 885px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8fe 100%);

    @media (width < 1120px) {
      padding: 60px 20px 100px;
    }

    @media (width < 768px) {
      margin: -100px auto 0;
      width: 90%;
      padding: 40px 20px 60px;
    }
  }
}

.p-features-list3 {
  .p-features-list__box {
    align-items: start;
    border-radius: 0px 10px 10px 0px;
    padding: 170px 150px 248px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 54%, #e3eafd 100%);

    @media (width < 1120px) {
      padding: 100px 80px 100px 20px;
    }

    @media (width < 768px) {
      margin-right: 20px;
      padding: 60px 20px 100px;
    }
  }

  .p-features-list__image {
    left: auto;
    right: 0;

    @media (width < 768px) {
      margin-left: auto;
    }
  }

  .p-features-list__bg {
    right: 18%;

    @media (width < 1120px) {
      right: 12%;
    }

    @media (width < 768px) {
      right: 20px;
    }
  }
}

.p-features-list__container {
  margin: auto;
  max-width: 580px;
}

.p-features-list__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.p-features-list__head {
  display: flex;
  align-items: center;
  gap: 40px;

  @media (width < 1120px) {
    gap: 20px;
  }

  @media (width < 768px) {
    max-width: 296px;
  }
}

.p-features-list__num {
  color: var(--color-blue);
  font-family: var(--font-noto-sans);
  font-size: 36px;
}

.p-features-list__title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.6;

  @media (width < 1120px) {
    font-size: 24px;
  }
}

.p-features-list__text {
  margin-top: 24px;
  max-width: 477px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: 82px;
  position: relative;
  z-index: 1;

  @media (width < 1120px) {
    margin-left: 62px;
  }

  @media (width < 768px) {
    // margin-left: 60px;
  }
}

.p-features-list__image {
  object-fit: cover;
}

.p-features-list__bg {
  position: absolute;
  bottom: 0;
  right: 10px;
  font-size: 186px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  font-family: var(--font-noto-sans);

  @media (width < 768px) {
    font-size: 100px;
  }
}

.p-flow {
  padding: 103px 0 117px;

  @media (width < 768px) {
    padding: 80px 0;
  }

  .l-inner {
    max-width: 1206px;
  }
}

.p-flow__lists {
  margin-top: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 68px;

  @media (width < 768px) {
    flex-direction: column;
    gap: 40px;
  }
}

.p-flow-list {
  width: 110px;
  height: 302px;
  background: linear-gradient(180deg, #fcfdfe 0%, #f4f8ff 0%, #dee7fb 100%);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 22px;
  position: relative;

  @media (width < 768px) {
    flex-direction: row;
    width: 302px;
    height: 80px;
  }
}

.p-flow-list:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -45px;
  width: 20px;
  height: 21px;
  background: url("https://iwazukasei-okazaki.com/system_panel/uploads/images/arrow-right-blue2.svg") no-repeat center center / contain;

  @media (width < 768px) {
    top: -30px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

.p-flow-list__num {
  background: #0057aa;
  flex-shrink: 0;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
}

.p-flow-list__text {
  writing-mode: vertical-rl;
  color: #0057aa;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.15em;

  @media (width < 768px) {
    writing-mode: horizontal-tb;
    letter-spacing: 0em;
  }
}

.p-flow__text {
  margin: 34px auto 0;
  max-width: 822px;
}

.p-equipment {
  padding: 47px 0 130px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fe 100%);

  @media (width < 768px) {
    padding: 40px 0 80px;
  }

  .l-inner {
    max-width: 1206px;
  }
}

.p-equipment__text {
  margin-top: 50px;
  max-width: 822px;
}

.p-equipment__images {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;

  @media (width < 1120px) {
    width: fit-content;
    margin: 52px auto 0;
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width < 600px) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  img {
    width: 100%;
    max-width: 362px;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

.p-faq {
  padding: 104px 0 151px;

  @media (width < 768px) {
    padding: 60px 0 100px;
  }

  .l-inner {
    max-width: 1206px;
  }
}

.p-faq__lists {
  margin: 65px auto 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 1050px;
}

.p-faq-list {
  background: #f4f9ff;
  border-radius: 5px;
  padding: 7px 30px;

  @media (width < 768px) {
    padding: 7px 20px;
  }
}

.p-faq-list__q,
.p-faq-list__a {
  display: flex;
  gap: 10px;
}

.p-faq-list__q {
  padding: 20px 0 16px;
  border-bottom: 1px solid #d4d4d4;
}

.p-faq-list__a {
  padding: 17px 0 20px;
}

.p-faq-list__q-head,
.p-faq-list__a-head {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.p-faq-list__q-head {
  color: var(--color-d-blue);
}

.p-faq-list__a-head {
  color: var(--color-blue);
}

.p-faq-list__q-text,
.p-faq-list__a-text {
  font-family: var(--font-zen-maru);
  color: #333333;
  line-height: 2;
  letter-spacing: 0.04em;
}