/*==============================================================
faq
==============================================================*/
.faq-page {
  .cont {
    .box {
      max-width: 1080px;

      display: flex;
      flex-direction: column;
      gap: 24px;

      .item {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        .question {
          width: 100%;
          padding: 24px 60px 24px 36px;
          text-align: left;
          background: none;
          border: none;
          cursor: pointer;
          position: relative;
          font-size: 16px;
          font-weight: 700;
          background: #fbba24;
          border-radius: 15px;
          display: flex;
          gap: 24px;
          align-items: center;
          line-height: 1;

          @media screen and (max-width: 480px) {
            padding: 16px 24px;
          }

          &::before {
            content: "▼";
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 24px;
            transition: transform 0.3s ease;
          }

          &.active::before {
            transform: translateY(-50%) rotate(180deg);
          }

          .mark {
            position: relative;
            z-index: 2;
            line-height: 1;
            color: #fbba24;
            font-family: "zen-maru-gothic", sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: clamp(1.25rem, 1.0833rem + 0.3472vw, 1.5rem);

            &::before {
              position: absolute;
              content: "";
              top: 60%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40px;
              height: 40px;
              background: #fff;
              border-radius: 50px;
              z-index: -1;

              @media screen and (max-width: 480px) {
                top: 50%;
              }
            }
          }

          .text {
            color: #fff;

            @media screen and (max-width: 480px) {
              width: 100%;
              max-width: 80%;
              line-height: 1.2;
            }
          }
        }
      }

      .answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;

        .answer-inner {
          margin: 0;
          line-height: 1;
          padding: 24px 36px;
          display: flex;
          gap: 24px;

          @media screen and (max-width: 480px) {
            padding: 16px 24px;
          }

          .mark {
            position: relative;
            z-index: 1;
            height: fit-content;
            color: #fff;
            font-family: "zen-maru-gothic", sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: clamp(1.25rem, 1.0833rem + 0.3472vw, 1.5rem);

            &::before {
              position: absolute;
              content: "";
              top: 60%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40px;
              height: 40px;
              background: #809f00;
              border-radius: 50px;
              z-index: -1;
            }
          }

          & p {
            line-height: 1.4;

            @media screen and (max-width: 480px) {
              width: 100%;
              max-width: 87%;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
}