@import url(common.css);

.text-heading-support-section {
  padding: 0 14vw;
  text-align: center;
  width: 100%;
  .text-heading-support-c {
    font-size: 2.2vw;
    display: inline-block;
    margin: 0 auto;
    font-weight: 700;
    text-align: left;
    line-height: 1.8;
    margin-bottom: 4vw;
  }
  p {
    font-size: 1.5vw;
    line-height: 1.7;
  }
}

.topics-contents {
  li {
    display: flex;
    align-items: center;
    gap: 3%;
    padding: 40px 3vw;

    &:nth-of-type(even) {
      flex-direction: row-reverse;
    }

    .topics-img {
      width: 48%;
      flex-shrink: 0;
      height: auto;
      aspect-ratio: 9/6;

      img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }
    }

    .topics-text {
      width: 48%;
      span {
        display: inline-block;
        font-size: clamp(0.9em, 1.2vw, 16px);
        margin-bottom: 1vh;
        font-weight: 600;
        background: linear-gradient(
          to right,
          rgba(246, 171, 0, 0.6),
          rgba(246, 171, 0, 0.2)
        );
        border-radius: 20px;
        padding: 5px 2vw;
      }
      h3 {
        font-size: 1.5vw;
        font-weight: bold;
        margin-bottom: 3vh;
      }
      p {
        font-size: 1.15vw;
        margin-bottom: 3vh;
      }
    }
  }
}

.support-merit {
  padding: 40px 10vw;
  h4 {
    font-size: 2vw;
    font-weight: bold;
    letter-spacing: 0.5vw;
    text-align: center;
    margin-bottom: 3vh;
  }
  h5 {
    background-color: rgb(255, 247, 153);
    display: inline-block;
    font-weight: bold;
    font-size: 1.7vw;
  }
  p {
    font-size: 1.2vw;
    margin: 2vh 0 2vh 20px;
  }
}

.support-flow {
  h4 {
    font-size: 2vw;
    font-weight: bold;
    letter-spacing: 0.5vw;
    text-align: center;
    margin-bottom: 3vh;
  }
  .support-flow-list {
    li {
      .topics-img {
        height: 30vh;

        img {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          object-fit: cover;
          object-position: center;
        }
      }
      .topics-text {
        width: 65%;
        margin: 0 auto;
        span {
          display: inline-block;
          font-size: clamp(0.9em, 1.2vw, 16px);
          margin-bottom: 1vh;
          font-weight: 600;
          background: linear-gradient(
            to right,
            rgba(246, 171, 0, 0.6),
            rgba(246, 171, 0, 0.2)
          );
          border-radius: 20px;
          padding: 5px 2vw;
        }
        h3 {
          font-size: 1.5vw;
          font-weight: bold;
        }
        p {
          font-size: 1.15vw;
          margin-bottom: 3.5vh;
        }
      }
    }
  }
}
.contact-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 5vh;

  a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: rgb(223, 242, 252);
    border: 2px solid rgb(0, 160, 233);
    padding: 1em 3em;
    border-radius: 50px;
    text-decoration: none;
    font-size: clamp(1em, 1.2vw, 18px);
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: bold;

    span {
      display: inline-block;
      width: 0.6em;
      height: 0.6em;
      border-right: 2px solid rgb(0, 160, 233);
      border-bottom: 2px solid rgb(0, 160, 233);
      transform: rotate(-45deg);
      transition: transform 0.3s ease;
      margin-left: 0.5em;
    }

    &:hover {
      background-color: rgb(200, 230, 250);
      transform: translateY(-2px);

      span {
        transform: rotate(-45deg) translateX(3px);
      }
    }
  }
}

/* ===== レスポンシブ ===== */
@media (max-width: 1024px) {
  .topics-contents li {
    padding: 30px 2vw;

    .topics-img,
    .topics-text {
      width: 48%;
    }
  }
}

@media (max-width: 768px) {
  .text-heading-support-section {
    padding: 0 5vw 40px !important;

    .text-heading-support-c {
      font-size: clamp(18px, 4vw, 24px);
      line-height: 1.3;
      text-align: center;
      letter-spacing: 0.3em;
    }

    p {
      font-size: 3.5vw;
      line-height: 1.4;
      letter-spacing: normal;
    }
  }

  .topics-contents {
    li {
      flex-direction: column !important;
      align-items: flex-start !important;
      padding: 20px 0;
      gap: 20px;

      .topics-img,
      .topics-text {
        width: 100% !important;
        h3 {
          margin-bottom: 1vh;
          font-size: 4vw;
        }
        p {
          margin-bottom: 0;
          font-size: 3.5vw
        }
      }

      .topics-img {
        height: auto !important;

        img {
          height: auto;
          max-height: 250px;
          object-fit: cover;
        }
      }
    }
  }

  .support-merit {
    padding: 40px 3vw;
  }

  .support-merit h4,
  .support-flow h4 {
    font-size: 5vw;
  }

  .support-merit h5 {
    font-size: 4vw;
  }

  .support-merit p,
  .support-flow p {
    font-size: 3.2vw;
    margin-left: 0;
  }
  .support-flow {
    .support-flow-list {
      li {
        .topics-text {
          width: 100%;
          margin: 0 auto;
          span {
            display: inline-block;
            font-size: 4vw;
            margin-bottom: 1vh;
            font-weight: 600;
            background: linear-gradient(
              to right,
              rgba(246, 171, 0, 0.6),
              rgba(246, 171, 0, 0.2)
            );
            border-radius: 20px;
            padding: 5px 2vw;
          }
          h3 {
            font-size: 4vw;
            font-weight: bold;
            margin-bottom: 1vh;
          }
          p {
            font-size: 3.5vw;
            margin-bottom: 1vh;
          }
        }
      }
    }
  }
}
.contact-button-wrapper {
  a {
    padding: 0.8em 2em;
    font-size: clamp(16px, 3vw, 18px);
  }
}