@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv-recruit {
    background-image: url('../../img/recruit/faq/mv.png');
  }

  /* =====================
    faq
  ===================== */
  .faq {
    position: relative;
    padding-block: 145px;

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }

    .u-inner {
      .wrap {
        margin-inline: 90px;

        @media only screen and (width <= 768px) {
          margin-inline: 0;
        }

        .description {
          text-align: center;
        }

        .qa-list {
          margin-block-start: 56px;
          grid-area: 2/1/3/3;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 22 * 1vw);
          }
          .item {
            section {
              position: relative;
              cursor: pointer;
              padding-block: 42px;
              padding-inline: 40px;
              background-image: var(--gradation);
              border-radius: 20px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 24 * 1vw);
                padding-block: calc((100 / 390) * 32 * 1vw);
                border-radius: calc((100 / 390) * 20 * 1vw);
              }

              &::before {
                content: '';
                position: absolute;
                inset: 1px;
                background-color: #f3ffff;
                border-radius: 20px;
                pointer-events: none;
              }

              @media only screen and (width <= 768px) {
                &::before {
                  border-radius: calc((100 / 390) * 20 * 1vw);
                }
              }

              /* ==== タイトル ==== */
              .q-title {
                position: relative;
                display: block flex;
                gap: 48px;
                align-items: baseline;

                @media (width <= 768px) {
                  display: block flow;
                  padding-inline-end: calc((100 / 390) * 32 * 1vw);
                }

                .question {
                  position: relative;
                  font-size: 24px;
                  font-weight: 500;
                  line-height: 1.2;

                  @media only screen and (width <= 768px) {
                    font-size: calc((100 / 390) * 18 * 1vw);
                    display: block flex;
                    align-items: baseline;
                    gap: calc((100 / 390) * 9 * 1vw);
                    line-height: 1.5;
                  }

                  &::before {
                    content: 'Q';
                    display: inline-block;
                    background-image: var(--gradation);
                    font-family: var(--title);
                    font-size: 36px;
                    line-height: 1.2;
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    padding-inline: 10px;
                    margin-inline-end: 24px;
                  }

                  @media only screen and (width <= 768px) {
                    &::before {
                      font-size: calc((100 / 390) * 24 * 1vw);
                      padding-inline: calc((100 / 390) * 2 * 1vw);
                      margin-inline-end: 0;
                      flex-shrink: 0;
                    }
                  }
                }
              }
              /* ==== アコーディオンで現れるエリア ==== */
              .answer-box {
                position: relative;
                display: none;
                padding-block: 32px;
                margin-block-start: 32px;

                @media (width <= 768px) {
                  padding-block: calc((100 / 390) * 16 * 1vw);
                  margin-block-start: calc((100 / 390) * 16 * 1vw);
                }

                &::before {
                  content: '';
                  position: absolute;
                  background-image: linear-gradient(to right, #1bb9ee 50%, transparent 50%);
                  background-size: 12px 2px;
                  background-repeat: repeat-x;
                  background-position: left bottom;
                  inline-size: 100%;
                  block-size: 2px;
                  top: 0;
                  left: 0;
                }

                @media only screen and (width <= 768px) {
                  &::before {
                    background-size: calc((100 / 390) * 20 * 1vw) calc((100 / 390) * 2 * 1vw);
                    inline-size: calc((100 / 390) * 310 * 1vw);
                    block-size: calc((100 / 390) * 2 * 1vw);
                  }
                }

                & p + p {
                  margin-block-start: 1.8em;

                  @media only screen and (width <= 768px) {
                    margin-block-start: 1em;
                  }
                }
              }
            }

            & + .item {
              margin-block-start: 32px;

              @media only screen and (width <= 768px) {
                margin-block-start: calc((100 / 390) * 16 * 1vw);
              }
            }
          }
        }

        /* ==== 右の十字 ==== */
        .q-title {
          &:before,
          &:after {
            content: '';
            position: absolute;
            margin: auto;
            box-sizing: border-box;
            vertical-align: middle;
          }
          &:before {
            background: var(--gradation);
            inline-size: 24px;
            block-size: 2px;
            top: 0;
            bottom: 0;
            right: 0;
          }
          &:after {
            background: linear-gradient(90deg, #003b82 0%, #1bb9ee 66.35%);
            inline-size: 2px;
            block-size: 24px;
            top: 0;
            bottom: 0;
            right: 11px;
            transition: 0.3s;
          }

          @media (width <= 768px) {
            &:before {
              inline-size: calc((100 / 390) * 16 * 1vw);
              block-size: calc((100 / 390) * 2 * 1vw);
            }
            &:after {
              inline-size: calc((100 / 390) * 2 * 1vw);
              block-size: calc((100 / 390) * 16 * 1vw);
              right: calc((100 / 390) * 7 * 1vw);
            }
          }
        }
        /*　closeというクラスがついたら形状変化　*/
        section.close .q-title:after {
          height: 0;
        }
        @media (width <= 768px) {
          section.close .q-title .date:after {
            height: 0;
          }
        }
      }
    }
  }
}