.faq {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--vw) * 51);
  padding: calc(var(--vw) * 110) calc(var(--vw) * 21) calc(var(--vw) * 110);
  @media screen and (min-width: 769px) {
    align-items: center;
    padding: calc(var(--vw) * 185) 0 calc(var(--vw) * 150);
  }
}
:where(.faq) {
  .faq__en {
    color: #928572;
    display: block;
    font-size: calc(var(--rem) * 10);
    margin-bottom: calc(var(--vw) * 17);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 12);
      margin-bottom: calc(var(--vw) * 12);
    }
  }
  .faq__title {
    color: #928572;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      letter-spacing: 3px;
      margin-bottom: calc(var(--vw) * 65);
    }
  }
  .faq__list {
    @media screen and (min-width: 769px) {
      max-width: calc(var(--vw) * 1000);
    }
  }
  .faq__q {
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 0.675px;
    line-height: 26px;
    position: relative;
    cursor: pointer;
    padding: calc(var(--rem) * 29) calc(var(--rem) * 30) calc(var(--rem) * 29) calc(var(--rem) * 10);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      line-height: 29px;
      padding: calc(var(--rem) * 31) 0;
    }
    &::after {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      content: "";
      background-image: url('../../images/icon_faq-close.svg');
      background-size: contain;
      width: 22px;
      height: 22px;
      display: inline-block;
      vertical-align: sub;
      @media screen and (min-width: 769px) {
        width: 25px;
        height: 25px;
      }
    }
  }

  .faq__a {
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 0.675x;
    line-height: 26px;
    height: 0;
    overflow: hidden;
    box-sizing: content-box;
    transition: height 0.4s ease, padding 0.4s ease;  
    padding-left: calc(var(--vw) * 10);
    padding-right: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      padding-right: calc(var(--vw) * 52);
      line-height: 29px;
      padding-left: 0;
    }
  }
  .faq__item {
    overflow: hidden;
    border-bottom: 1.34px solid #CBCBCB;
    &.is-shown {
      .faq__a {
        height: auto;
        padding-top: calc(var(--vw) * 4);
        padding-bottom: calc(var(--vw) * 20);
        @media screen and (min-width: 769px) {
          padding-bottom: calc(var(--vw) * 40);
        }
      }
      .faq__q::after {
        background-image: url('../../images/icon_faq-open.svg');
      }
    }
  }
  .faq__item:last-child {
    border-bottom: none;
  }
  .faq__item-inner {
    @media screen and (min-width: 769px) {
      padding: 0 calc(var(--vw) * 50);
    }
  }
}