@use './common';
@use '../../@foundation/variables' as var;
@use '../../@foundation/mixin' as mixin;

.faq {
  $id: '.faq';

  @extend %form-background-base;

  /* ラジオボタンを全て消す */
  input[name='faq_item'] {
    display: none;
  }

  input:checked + #{$id}-item {
    &::before {
      content: none;
    }
  }

  h2 {
    @extend %form-title-base;
  }

  #{$id}-wrap {
    @extend %form-contact-base;

    > p {
      @include mixin.text(
        $fam: var.$font-family-noto,
        $size: 15,
        $line-height: 32,
        $weight: 400,
        $color: var.$blueopen
      );

      margin-bottom: 50px;

      @media (max-width: var.$max-width-sp) {
        @include mixin.text(
          $fam: var.$font-family-noto,
          $size: 14,
          $line-height: 32,
          $weight: 400,
          $color: var.$blueopen
        );
      }
    }
  }

  #{$id}-item {
    cursor: pointer;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;

    @media (max-width: var.$max-width-sp) {
      padding: 30px 0 15px;
      align-items: flex-start;
    }

    &:hover {
      opacity: 0.75;
    }

    &::before {
      content: '';
      position: absolute;
      top: (30px + 20px - 5px);
      right: 0;
      width: 20px;
      height: 2px;
      background-color: var.$white204;
      z-index: 1;
      transform: rotate(90deg);

      @media (max-width: var.$max-width-sp) {
        top: (30px + 20px - 10px);
        width: 12px;
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: (30px + 20px - 5px);
      right: 0;
      width: 20px;
      height: 2px;
      background-color: var.$white204;
      z-index: 1;

      @media (max-width: var.$max-width-sp) {
        top: (30px + 20px - 10px);
        width: 12px;
      }
    }

    h4 {
      @include mixin.text(
        $fam: var.$font-family-noto,
        $size: 18,
        $line-height: 18,
        $weight: 700,
        $color: var.$blueopen
      );

      @media (max-width: var.$min-width-form) {
        left: -5px;

        @include mixin.text(
          $fam: var.$font-family-noto,
          $size: 14,
          $line-height: 20,
          $weight: 700,
          $color: var.$blueopen
        );
      }
    }

    p {
      padding: 0 60px 0 40px;
      display: block;
      width: 100%;

      @include mixin.text(
        $fam: var.$font-family-noto,
        $size: 18,
        $line-height: 32,
        $weight: 700,
        $color: var.$blueopen
      );

      text-align: left;

      @media (max-width: var.$max-width-sp) {
        padding: 0 30px 0 20px;

        @include mixin.text(
          $fam: var.$font-family-noto,
          $size: 14,
          $line-height: 20,
          $weight: 700,
          $color: var.$blueopen
        );
      }
    }
  }

  /* タブ切り替えの中身のスタイル */
  #{$id}-content {
    height: 0;
    padding: 0;
    clear: both;
    overflow: hidden;
    border-bottom: 1px solid var.$white204;

    &.faq-open {
      height: auto;
      padding-bottom: 20px;

      @media (max-width: var.$max-width-sp) {
        height: auto;
        padding-bottom: 30px;
      }
    }

    p {
      padding: 0 60px;
      text-align: left;

      @include mixin.text(
        $fam: var.$font-family-noto,
        $size: 13,
        $line-height: 22,
        $weight: 400,
        $color: var.$blueopen
      );

      @media (max-width: var.$max-width-sp) {
        padding: 0 20px 0 45px;

        @include mixin.text(
          $fam: var.$font-family-noto,
          $size: 12,
          $line-height: 18,
          $weight: 400,
          $color: var.$blueopen
        );
      }
    }
  }
}

.padding_top {
  padding-top: 25px;
}

.login-form_Wrap {
  .text {
    font-family: "Noto Sans JP', sans-serif";
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.66667;
    color: #045c86;
    letter-spacing: 0.05rem;
    text-align: left;
    padding: 0 50px;
    margin-bottom: 80px;

    @media (max-width: 450px) {
      .text {
        font-family: "Noto Sans JP', sans-serif";
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1.57143;
        color: #045c86;
        letter-spacing: 0.05rem;
        padding: 0 20px;
        margin-bottom: 0;
      }
    }
  }

  form input[type='submit'][disabled] {
    background: #aaaaaa;
  }
}

.header_types {
  display: none;
}