/* =======================================================================
   recruit Page Styles
======================================================================= */

.recruit_container {
  display: flex;
}

/* =======================================================================
   list Page Styles
======================================================================= */
.recruit_list {
  text-indent: -1em;
  padding-left: 1em;
}

.recruit_list::first-letter {
  color: var(--wp--preset--color--custom-light-pink);
}

/* =======================================================================
   accordion
======================================================================= */
.recruit_accordion {
  margin: 0 auto;

  /* タイトル部分 */
  summary {
    border: none;
    cursor: pointer;
    display: block;
    font-size: 0.75rem;
    list-style: none;
    padding: 1rem 0 1rem 1.5em;
    position: relative;
    width: calc(100% - 1.5em);

    &::-webkit-details-marker {
      display: none !important;
    }
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 1em;
      width: 1em;
      height: 2px;
      background-color: var(--wp--preset--color--custom-charcoal-gray);
    }

    &:after {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    &:first-letter {
      color: var(--wp--preset--color--custom-light-pink);
    }
  }

  .recruit_accordion_details::details-content {
    opacity: 0;
    block-size: 0;
    transition: 0.3s;
    transition-property: display, opacity, block-size, padding;
    transition-behavior: allow-discrete;
    line-height: 1.6em;
  }

  /* 詳細 */
  &.recruit_accordion_content {
    padding: 0 1.5em;
  }

  /* アコーディオンを開いた時 */
  .recruit_accordion_details[open] {
    &::details-content {
      opacity: 1;
      block-size: auto;
      block-size: calc-size(auto, size);
    }

    .recruit_accordion_content {
      padding: 1.4em 1.5em;
    }

    summary:after {
      display: none;
    }
  }
}

.recruit_card {
  img {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    object-fit: top;
  }

  .object_fit-center {
    object-position: center !important;
  }

  .object_fit-bottom {
    object-position: bottom !important;
  }
}

/* =======================================================================
   Media Query
======================================================================= */

/* スマホ */
@media (max-width: 768px) {
  .recruit_center-sp {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 1rem;
  }

  .recruit_container {
    flex-direction: column;
  }

  .recruit_content {
    display: contents;
  }

  .flex_order_1-sp {
    order: 1 !important;
  }
  .flex_order_2-sp {
    order: 2 !important;
  }
  .flex_order_3-sp {
    order: 3 !important;
  }
}