// 資料庫
@import './partials/variable';
@import './partials/mixin';

.faqList {
  .mainBox {
    .listBox {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 1150px;
      margin: 0 auto;

      @include screenMax('1330') {
        max-width: 1062px;
      }
    }

    .active {
      .qBox {
        &::after {
          transform: rotate(-90deg);
        }
      }
    }

    .qBox {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 0;
      padding: 16px 30px;
      background: #f7f7f7;
      font-size: var(--clamp22);
      position: relative;
      line-height: 1.4;
      cursor: pointer;

      &::after {
        content: '';
        width: 24px;
        height: 24px;
        display: block;
        mask: url('../images/icon/icon_arrow_page.svg') center no-repeat;
        mask-size: contain;
        transform: rotate(90deg);
        background: #000;
        margin: 0 0 0 auto;

        @include screen('xsMobile') {
          width: 18px;
          height: 18px;
        }
      }

      i {
        font-size: var(--clamp32);
        font-weight: 600;
        line-height: 1;
      }

      p {
        margin: 0;
      }
    }

    .aBox {
      display: none;
      background: #FFF;
    }

    .content {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 0;
      padding: 16px 30px;
      position: relative;

      i {
        font-size: var(--clamp32);
        font-weight: 600;
        line-height: 1;
      }
    }
  }
}