@charset "utf-8";

/* ↓↓↓ faq ↓↓↓ */
.faq {
  padding: 12rem 3rem;

  .block {
    +.block {
      margin-top: 9.6rem;
    }
  }

  .accordion {
    cursor: pointer;
    position: relative;
    border-radius: 2rem;
    background-color: #F7F9FA;
    border: 1px solid #D0DEE5;
    padding: 3rem 8rem;
    margin-top: 2.4rem;

    &::before {
      content: 'Q.';
      position: absolute;
      top: 3.3rem;
      left: 3rem;
      font-family: var(--font-poppins);
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1;
      color: var(--cosmos-blue);
    }

    +.accordion {
      margin-top: 1.6rem;
    }

    .q_wrap {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: -0.5rem;
        right: -5.6rem;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background-color: #fff;
      }

      &::after {
        content: '';
        position: absolute;
        transform-origin: center;
        top: 1.2rem;
        right: -4.3rem;
        width: 1.3rem;
        height: 0.8rem;
        background: url(/wp/wp-content/themes/cosmos-cpo/img/faq/accordion_arrow.svg) no-repeat;
        background-size: contain;
        rotate: 180deg;
        transition: rotate 0.3s ease;
      }

      .q_heading {
        font-size: 1.8rem;
        font-weight: 700;
      }
    }

    .a_wrap {
      display: none;

      .text {
        font-size: max(10px, 1.5rem);
        letter-spacing: 0;
        margin-top: 1.6rem;
        color: #222;

        +.text {
          margin-top: 2.4rem;
        }
      }

      .attention {
        font-size: max(10px, 1.2rem);
        font-weight: 500;
        color: #646464;
        margin-top: 0.6rem;
        line-height: 2;
      }

      .point_text {
        position: relative;
        padding-left: 1.5em;

        &::before {
          content: 'ー';
          position: absolute;
          top: 0;
          left: 0;
          color: var(--cosmos-blue);
        }
      }

      .link {
        position: relative;
        display: grid;
        place-content: center;
        width: max-content;
        height: 4.4rem;
        font-size: max(10px, 1.3rem);
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--cosmos-blue);
        padding: 0 4.2rem 0 2.4rem;
        border-radius: 4.4rem;
        background-color: #fff;
        border: 1px solid #D0DEE5;
        margin-top: 2.4rem;
        transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;

        &::after {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: 2rem;
          width: 0.6rem;
          height: 1rem;
          mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/more_arrow.svg);
          mask-size: contain;
          mask-repeat: no-repeat;
          background-color: var(--cosmos-blue);
          transition: background-color 0.3s ease;
        }
      }

      @media screen and (min-width: 769px) {
        .link:hover {
          color: #fff;
          background-color: var(--cosmos-blue);
          border: 1px solid var(--cosmos-blue);

          &::after {
            background-color: #fff;
          }
        }
      }
    }

    &.-active {
      .q_wrap {

        &::after {
          rotate: 0deg;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .faq {
    padding: 7.4rem 2rem 8rem;

    .block {
      +.block {
        margin-top: 8rem;
      }
    }

    .accordion {
      padding: 2.7rem 2.7rem 2.4rem 6rem;

      &::before {
        top: 2.7rem;
        left: 2rem;
      }

      .q_wrap {
        padding-right: 5.2rem;

        &::before {
          top: -0.7rem;
          right: -1rem;
        }

        &::after {
          top: 0.9rem;
          right: 0.3rem;
        }

        .q_heading {
          font-size: 1.5rem;
        }
      }

      .a_wrap {
        display: none;

        .text {
          font-size: max(10px, 1.5rem);
          margin-top: 1.6rem;
          color: #222;

          +.text {
            margin-top: 2.4rem;
          }
        }

        .point_text {
          position: relative;
          padding-left: 1.5em;

          &::before {
            content: 'ー';
            position: absolute;
            top: 0;
            left: 0;
            color: var(--cosmos-blue);
          }
        }

        .link {
          position: relative;
          display: grid;
          place-content: center;
          width: max-content;
          height: 4.4rem;
          font-size: max(10px, 1.3rem);
          font-weight: 500;
          letter-spacing: 0.1em;
          color: var(--cosmos-blue);
          padding: 0 4.2rem 0 2.4rem;
          border-radius: 4.4rem;
          background-color: #fff;
          border: 1px solid #D0DEE5;
          margin-top: 2.4rem;
          transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;

          &::after {
            content: '';
            position: absolute;
            translate: 0 -50%;
            top: 50%;
            right: 2rem;
            width: 0.6rem;
            height: 1rem;
            mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/more_arrow.svg);
            mask-size: contain;
            mask-repeat: no-repeat;
            background-color: var(--cosmos-blue);
            transition: background-color 0.3s ease;
          }
        }

        @media screen and (min-width: 769px) {
          .link:hover {
            color: #fff;
            background-color: var(--cosmos-blue);
            border: 1px solid var(--cosmos-blue);

            &::after {
              background-color: #fff;
            }
          }
        }
      }

      &.-active {
        .q_wrap {

          &::after {
            rotate: 0deg;
          }
        }
      }
    }
  }
}

/* ↑↑↑ faq ↑↑↑ */