@charset "UTF-8";

@layer utility {
  /* =====================
    attribute
  ===================== */
  :where([data-family='note']) {
    font-family: var(--oooh);
    font-weight: 400;
    color: var(--pink);
  }

  :where([data-family='en']) {
    font-family: var(--forum);
    font-weight: 400;
  }

  /* =====================
    u-mv
  ===================== */
  :where(.u-mv) {
    position: relative;
    padding-block-start: 4px;
    padding-inline: 80px;

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

    hgroup {
      display: block grid;
      gap: 21px;
      margin-inline: auto;
      text-align: center;

      @media (width <= 768px) {
        gap: 3.5vw;
      }

      [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--forum);
        font-size: 72px;
        font-weight: 400;
        line-height: 1;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 56 * 1vw);
          line-height: 1.1;
        }
      }

      .title {
        margin-block: calc((1em - 1lh) / 2);
        font-weight: 700;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }
  }

  /* =====================
    .u-breadcrumb
  ===================== */
  :where(.u-breadcrumb) {
    display: block flex;
    gap: 7px;
    align-items: center;
    padding-block-start: 23px;
    margin-block-start: 102px;
    font-size: 14px;
    border-block-start: 1px dashed currentcolor;

    @media only screen and (width <= 768px) {
      flex-wrap: wrap;
      gap: calc((100 / 390) * 25 * 1vw) calc((100 / 390) * 10 * 1vw);
      padding-block-start: 5.7vw;
      margin-block-start: 13.1vw;
      font-size: calc((100 / 390) * 13 * 1vw);
    }

    & li {
      display: block flex;
      gap: 9px;
      align-self: center;
      margin-block: calc((1em - 1lh) / 2);

      @media (width <= 768px) {
        gap: 1.9vw;
      }
    }

    & li:not(:last-child)::after {
      content: '–';
    }

    .item {
      display: block flex;
      gap: 12px;
      align-items: center;
      margin-block: calc((1em - 1lh) / 2);
      font-size: 14px;
      line-height: 1;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 13 * 1vw);
        word-break: break-all;
      }

      &:has(small) {
        gap: 0;

        @media (width <= 768px) {
          gap: 0;
        }
      }

      small {
        font-size: 12px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 13 * 1vw);
        }
      }

      &:is(a) {
        font-family: var(--sans-serif);
        transition: all 250ms ease 0s;

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }

  /* =====================
    u-hgroup
  ===================== */
  :where(.u-hgroup) {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    gap: 15px;
    inline-size: fit-content;

    @media (width <= 768px) {
      gap: 3.4vw;
    }

    /* ==== [lang="en"] ==== */
    [lang='en'] {
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--forum);
      font-size: 48px;
      font-weight: 400;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 40 * 1vw);
      }
    }

    /* ==== title ==== */
    .title {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 14px;
      font-weight: 600;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 13 * 1vw);
      }
    }

    &[data-align='center'] {
      margin-inline: auto;
      text-align: center;
    }
  }

  /* =====================
    u-anchor
  ===================== */
  :where(.u-anchor) {
    display: block grid;
    grid-auto-flow: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    inline-size: fit-content;
    padding-block: 9.5px;
    padding-inline: 28px;
    font-weight: 600;
    background: white;
    border: 1px solid currentcolor;
    border-radius: calc(infinity * 1px);
    transition: all 250ms ease 0s;

    @media (width <= 768px) {
      gap: 3.3vw;
      padding-block: 2.9vw;
      padding-inline: calc((100 / 390) * 27 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    @media (any-hover: hover) {
      &:hover {
        color: white;
        background: var(--color-text-primary);
        border: 1px solid var(--color-text-primary);

        &::after {
          background-color: white;
          translate: 0.25em 0;
        }
      }
    }

    &::after {
      inline-size: 20px;
      aspect-ratio: 20 / 8;
      content: '';
      background-color: var(--pink);
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition: inherit;

      @media (width <= 768px) {
        inset-block: calc((100 / 390) * 18 * 1vw);
        inset-inline: calc((100 / 390) * 8 * 1vw);
      }
    }

    /* =====================
      data-size="large"
    ===================== */
    &[data-size='large'] {
      gap: 25px;
      padding-block: 24.5px;
      padding-inline: 55px;
      font-size: 20px;

      @media (width <= 768px) {
        gap: 4vw;
        padding-block: 4vw;
        padding-inline: 7.7vw;
        font-size: calc((100 / 390) * 17 * 1vw);
      }

      &::after {
        inline-size: 25px;
        block-size: 10px;
        aspect-ratio: 25 / 10;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 18 * 1vw);
          block-size: calc((100 / 390) * 8 * 1vw);
          aspect-ratio: 18 / 8;
        }
      }
    }

    /* =====================
      more
    ===================== */
    &[data-type='more'] {
      gap: 24px;

      @media (width <= 768px) {
        gap: 8vw;
      }

      &::after {
        inline-size: 20px;
        aspect-ratio: 1 / 1;
        mask-image: var(--icon-plus);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }

  /* =====================
    u-loop
  ===================== */
  :where(.u-loop) {
    display: flex;
    gap: 36px;
    align-items: center;
    inline-size: 100vw;
    margin-inline: calc(50% - 50cqi);
    animation: loop-list 40s linear infinite;

    @media (width <= 768px) {
      gap: 5.6vw;
      animation-duration: 40s;
    }

    @media (any-hover: hover) {
      &:hover {
        animation-play-state: paused;
      }
    }

    /* ==== item ==== */
    .item {
      position: relative;
      display: grid;
      flex-shrink: 0;
      place-content: center;
      block-size: 100%;
      transition: all 250ms ease 0s;

      .picture {
        inline-size: 136px;
        max-inline-size: fit-content;
        block-size: auto;
        max-block-size: 136px;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 108 * 1vw);
          max-block-size: calc((100 / 390) * 98 * 1vw);
        }
      }

      @media (width > 768px) {
        &::after {
          position: absolute;
          inset-block-end: -10px;
          inset-inline: 0;
          display: -webkit-box;
          padding-block: 0.25em;
          padding-inline: 0.5em;
          margin-inline: auto;
          overflow: hidden;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          font-size: 11px;
          line-height: 1.2;
          color: white;
          text-align: center;
          word-break: normal;
          content: attr(data-title);
          background: var(--color-text-primary);
          border-radius: 4px;
          opacity: 0;
          translate: 0 4px;
          transition: all 600ms var(--easeOutBounce) 0s;
          -webkit-box-orient: vertical;
        }

        &:is(:hover, :focus)::after {
          opacity: 1;
          translate: 0 0;
        }
      }

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }

  /* =====================
    u-shop
  ===================== */
  :where(.u-shop) {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: repeat(4, minmax(262px, 1fr));
    border-block-start: 1px dashed currentcolor;
    border-inline-start: 1px dashed currentcolor;

    @media (width > 768px) {
      &:has(> :nth-child(-n + 3):last-child) {
        border-block-start: 1px dashed transparent;

        .unit {
          border-block-start: 1px dashed currentcolor;
        }
      }
    }

    &[data-column='2'] {
      grid-template-columns: repeat(2, minmax(262px, 1fr));
    }

    &[data-column='3'] {
      grid-template-columns: repeat(3, minmax(262px, 1fr));
    }

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      inline-size: 100%;
    }

    /* ==== unit ==== */
    .unit {
      position: relative;
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      gap: 8px;
      padding-block: 22px;
      padding-inline: 24px;
      border-block-end: 1px dashed currentcolor;
      border-inline-end: 1px dashed currentcolor;
      transition: all 250ms ease 0s;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 10 * 1vw);
        padding-block: calc((100 / 390) * 22 * 1vw) 6.5vw;
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }

      @media (any-hover: hover) {
        &:hover {
          background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
        }
      }
    }

    /* ==== img ==== */
    .img {
      display: block grid;
      place-content: center;
      block-size: 160px;
      background: white;

      @media (width <= 768px) {
        block-size: calc((100 / 390) * 141 * 1vw);
      }

      img {
        display: block flow;
        max-inline-size: 190px;
        block-size: 100%;
        max-block-size: 100px;
        aspect-ratio: 16 / 9;
        object-fit: contain;

        @media (width <= 768px) {
          inline-size: auto;
          max-inline-size: auto;
          block-size: auto;
          max-block-size: auto;
          object-fit: contain;
        }
      }
    }

    /* ==== text ==== */
    .text {
      display: block grid;
      align-self: flex-start;

      @media (width <= 768px) {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }

    /* ==== icon ==== */
    .icon {
      align-self: flex-start;
      inline-size: fit-content;
      margin-block: 4px -3px;
      font-family: var(--forum);
      font-size: 17px;
      font-weight: 400;
      color: var(--pink);
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-decoration-style: solid;
      text-decoration-color: currentcolor;
      text-underline-offset: 5px;

      @media (width > 768px) {
        &[aria-hidden='true']::before {
          padding: 1em;
          content: '';
        }
      }

      @media (width <= 768px) {
        margin-block: 0;
        font-size: calc((100 / 390) * 16 * 1vw);
        text-underline-offset: 1.4vw;
      }
    }

    /* ==== kana ==== */
    .kana {
      font-size: 13px;
      line-height: 1.6;
      word-break: break-all;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 13 * 1vw);
      }
    }

    /* ==== title ==== */
    .title {
      display: block flow;
      word-break: break-all;
    }

    /* ==== place ==== */
    .place {
      display: block flow;
      word-break: break-all;
    }

    /* =====================
      for list
    ===================== */
    &[data-context='list'] {
      /* ==== unit ==== */
      .unit {
        gap: 16px;

        @media (width > 768px) {
          padding-inline: 21px;
        }

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

        .text {
          gap: 5px;

          @media (width <= 768px) {
            display: block grid;
            gap: 0.7vw;
          }
        }
      }
    }

    /* =====================
      sp-hidden
    ===================== */
    .unit.sp-hidden {
      @media (width <= 768px) {
        display: none;
      }
    }
  }

  /* =====================
    u-number
  ===================== */
  :where(.u-number) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block-start: 1px dashed currentcolor;
    border-inline-start: 1px dashed currentcolor;

    @media (width > 768px) {
      &:has(> :nth-child(-n + 3):last-child) {
        display: block flex;
        justify-content: center;
        border-block-start: 1px dashed transparent;
        border-inline-start: 1px dashed transparent;

        .unit {
          border-block-start: 1px dashed currentcolor;

          &:first-child {
            border-inline-start: 1px dashed currentcolor;
          }
        }
      }
    }

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
    }

    /* ==== unit ==== */
    .unit {
      display: block grid;
      gap: 32px;
      padding-block: 32px 39px;
      background: var(--white, #fff);
      border-block-end: 1px dashed currentcolor;
      border-inline-end: 1px dashed currentcolor;

      @media (width <= 768px) {
        gap: 7vw;
        padding-block: 6vw 8.3vw;
      }
    }

    /* ==== hgroup ==== */
    hgroup {
      display: block grid;
      gap: 9px;
      inline-size: fit-content;
      margin-inline: auto;
      text-align: center;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 8 * 1vw);
      }

      [lang='en'] {
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--forum);
        font-size: 15px;
        font-weight: 400;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }

      .title {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 18px;
        font-weight: 600;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 17 * 1vw);
        }
      }
    }

    /* ==== count ==== */
    .count {
      display: block flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 40px;

      @media (width <= 768px) {
        padding-inline: 10vw;
      }

      .wrap {
        display: block flex;
        gap: 11px;
        align-items: baseline;
        padding-inline-end: 3px;
        translate: 5px -1px;

        @media (width <= 768px) {
          gap: 2vw;
          padding-inline-end: 0;
          translate: 0;
        }
      }

      @media (width <= 768px) {
        img {
          inline-size: calc((100 / 390) * 103 * 1vw);
          block-size: calc((100 / 390) * 85 * 1vw);
          object-fit: contain;
        }
      }

      .num {
        max-inline-size: 351px;
        margin-block: calc((1em - 1lh) / 2);
        font-family: var(--oooh);
        font-size: 80px;
        line-height: 100%;
        color: var(--pink, #db99ac);
        text-align: right;
        word-break: break-all;
        white-space: nowrap;

        @media (width <= 768px) {
          max-inline-size: calc((100 / 390) * 131 * 1vw);
          font-size: calc((100 / 390) * 68 * 1vw);
        }
      }

      .small {
        font-size: 32px;
        line-height: 1;
        white-space: nowrap;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 24 * 1vw);
          translate: 0 -1vw;
        }
      }
    }
  }

  /* =====================
    interview
  ===================== */
  :where(.u-interview) {
    position: relative;
    display: block grid;
    gap: 0;
    inline-size: fit-content;

    @media (width <= 768px) {
      gap: calc((100 / 390) * 32 * 1vw);
    }

    &:is(a) {
      @media (any-hover: hover) {
        &:hover {
          .img img {
            box-shadow: 0 0 5px color-mix(in srgb, var(--color-text-primary) 45%, transparent);
            scale: 1.02;
          }
        }
      }
    }

    &::before {
      position: absolute;
      inset-block-start: -57px;
      inset-inline: 0;
      z-index: 2;
      width: 43px;
      aspect-ratio: 64 / 131;
      margin-inline: auto;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/interview/deco.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      translate: -9px 0;

      @media (width <= 768px) {
        inset-block-start: -8.5vw;
        width: 8vw;
        translate: -0.2vw 0;
      }
    }

    /* ==== img ==== */
    .img {
      position: relative;
      display: grid;
      gap: 0;
      width: 295px;
      height: 357px;
      padding-block: 19px;
      background-image: url('../../img/recruit/interview/frame.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;

      @media (width <= 768px) {
        gap: 3.2vw;
        width: calc((100 / 390) * 588 / 2 * 1vw);
        height: calc((100 / 390) * 712 / 2 * 1vw);
        padding-block: 4.9vw 4.4vw;
        background-image: url('../../img/recruit/interview/frame_sp.webp');
      }

      & img {
        display: block flow;
        inline-size: 255px;
        aspect-ratio: 506 / 520;
        margin-inline: auto;
        object-fit: cover;
        translate: -2px 0;
        transition: all 250ms ease 0s;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 255.5 * 1vw);
          translate: -0.8vw 0;
        }
      }
    }

    /* ==== info ==== */
    .info {
      display: block flex;
      gap: 18px;
      align-items: baseline;
      padding-inline: 19px;

      @media (width <= 768px) {
        gap: 4.3vw;
        padding-inline: 5.6vw;
      }

      .name {
        font-family: var(--oooh);
        font-size: 32px;
        color: var(--pink);

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 30 * 1vw);
        }
      }

      .year {
        font-size: 15px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 14 * 1vw);
        }
      }
    }

    /* ==== text ==== */
    .text {
      display: grid;
      place-content: center;
      width: 279px;
      height: 132px;
      margin-block-start: -11px;
      margin-inline: auto -21px;
      font-weight: 600;
      background-image: url('../../img/recruit/interview/paper.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      isolation: isolate;

      @media (width <= 768px) {
        width: calc((100 / 390) * 512 / 2 * 1vw);
        height: calc((100 / 390) * 242 / 2 * 1vw);
        margin-block-start: -11.5vw;
        margin-inline: auto -8.5vw;
        background-image: url('../../img/recruit/interview/paper_sp.png');
      }

      p {
        display: -webkit-box;
        padding-inline-start: 32px;
        overflow: hidden;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        line-height: 1.8;
        translate: 0 -4px;
        -webkit-box-orient: vertical;

        @media (width <= 768px) {
          padding-inline-start: 7vw;
          font-size: calc((100 / 390) * 15 * 1vw);
          translate: 0 -0.7vw;
        }
      }
    }
  }

  /* =====================
     u-scroll-table
  ===================== */
  .u-scroll-table {
    position: relative;

    @media (width <= 768px) {
      max-inline-size: calc(infinity * 1px);
      padding-block-end: calc((100 / 390) * 32 * 1vw);
      overflow-x: auto;

      &::before {
        position: absolute;
        inset-block-start: 21vw;
        inset-inline-start: 50%;
        z-index: 4;
        inline-size: calc((100 / 390) * 140 * 1vw);
        aspect-ratio: 254 / 177;
        pointer-events: none;
        content: '';
        background-image: url('../../img/recruit/_common/scrollable.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        animation: scrollable 2500ms ease-out 0ms infinite normal forwards running;
      }

      &.touched {
        &::before {
          display: none;
        }
      }
    }

    /* ==== table ==== */
    & table {
      inline-size: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      @media (width <= 768px) {
        inline-size: max-content;
      }

      thead {
        th {
          vertical-align: middle;
          color: white;
          text-align: center;
          background: var(--color-text-primary);
          border-inline: 1px solid white;

          &:first-child {
            inline-size: 375px;
            border-inline-start: 1px solid var(--color-text-primary);

            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 247 * 1vw);
            }
          }

          &:nth-child(2) {
            inline-size: 471px;

            @media (width <= 768px) {
              inline-size: calc((100 / 390) * 327 * 1vw);
            }
          }

          &:last-child {
            border-inline-end: 1px solid var(--color-text-primary);
          }
        }
      }

      & th {
        font-weight: 500;
        vertical-align: top;
      }

      & td {
        vertical-align: middle;
      }

      & :where(th, td) {
        padding-block: 15.6px;
        padding-inline: 24px 28px;
        font-weight: 500;
        line-height: 1.8;
        word-break: break-all;
        border: 1px solid rgb(71 50 29 / 30%);
        transition: all 250ms ease 0s;

        @media (width <= 768px) {
          padding-block: 4vw;
          padding-inline: calc((100 / 390) * 17 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        a {
          text-decoration: underline;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }

      @media (any-hover: hover) {
        &:hover {
          tbody tr:hover {
            td {
              background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
            }
          }
        }
      }

      @media (width <= 768px) {
        tr.checked {
          td {
            background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
          }
        }
      }
    }
  }

  /* =====================
    u-inner
  ===================== */
  :where(.u-inner) {
    position: relative;
    inline-size: min(100%, 1280px);
    margin-inline: auto;

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

  /* =====================
    u-hover
  ===================== */
  :where(.u-hover) {
    transition: opacity 250ms ease 0s;
    will-change: opacity;

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* =====================
    u-texture
  ===================== */
  :where(.u-texture) {
    position: relative;

    > * {
      position: relative;
      z-index: 2;
      isolation: isolate;
    }

    &::after {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/_common/texture.png');
      background-repeat: repeat;
      background-position: center;
      background-size: 100px 100px;
      opacity: 0.25;

      @media (width <= 768px) {
        background-image: url('../../img/recruit/_common/texture_sp.png');
        background-size: calc((100 / 390) * 100 * 1vw) calc((100 / 390) * 100 * 1vw);
      }
    }
  }

  /* =====================
    u-table
  ===================== */
  :where(.u-table) {
    --_border-color: rgb(71 50 29 / 30%);

    display: block grid;
    grid-template-columns: 207px 1fr;
    inline-size: 1072px;
    margin-inline: auto;

    @media (width <= 768px) {
      grid-template-columns: 25vw 1fr;
      inline-size: 100%;
      font-size: calc((100 / 390) * 15 * 1vw);
    }

    .column {
      display: block flex;
      flex-direction: column;
      gap: 4px;

      @media (width <= 768px) {
        gap: 0.9vw;
      }
    }

    /* ==== tr ==== */
    .tr {
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: self-start;

      & :where(dt, dd) {
        block-size: 100%;
        padding-block: 30.7px 31.7px;
        word-break: break-all;

        @media (width <= 768px) {
          padding-block: 6vw 6.3vw;
          word-break: break-all;
        }

        & a {
          text-decoration: underline;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }

        @media (any-hover: hover) {
          &:hover {
            text-decoration: none;
          }
        }
      }

      &:first-child :where(dt, dd) {
        border-block-start: 1px solid var(--_border-color);
      }
    }

    /* ==== dt ==== */
    & dt {
      place-content: start;
      padding-inline-start: 0;
      font-weight: 600;
      border-block-start: 1px solid transparent;
      border-block-end: 1px solid var(--_border-color);

      @media (width <= 768px) {
        padding-inline-start: 0;
      }
    }

    /* ==== dd ==== */
    & dd {
      padding-inline: 10px;
      font-weight: 500;
      border-block-start: 1px solid transparent;
      border-block-end: 1px solid var(--_border-color);

      @media (width <= 768px) {
        padding-inline: 0;
      }
    }
  }

  /* =====================
    u-movie
  ===================== */
  :where(.u-movie) {
    display: block grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 76px 80px;

    @media (width > 768px) {
      &:has(> :nth-child(-n + 2):last-child) {
        display: block flex;
        justify-content: center;
      }
    }

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 9.4vw;
    }

    /* ==== .unit ==== */
    .unit {
      display: block grid;
      gap: 14px;

      @media (width <= 768px) {
        gap: 2.4vw;
      }
    }

    /* ==== .video ==== */
    .video {
      position: relative;
      inline-size: 600px;
      block-size: 337px;
      overflow: clip;

      @media (width <= 768px) {
        inline-size: 100%;
        block-size: calc((100 / 390) * 201 * 1vw);
      }

      iframe {
        display: block flow;
        inline-size: 100%;
        block-size: 100%;
      }

      &:has([data-dummy='true'])::before {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: block flow;
        inline-size: 100%;
        block-size: 100%;
        content: '';
        background-image: url('../../img/recruit/movie/dummy.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        scale: 1.01;
      }

      &:has([data-dummy='true'])::after {
        position: absolute;
        inset: 0;
        inset-block-start: 50%;
        z-index: 3;
        display: block flow;
        inline-size: 80px;
        aspect-ratio: 512 / 341;
        margin-inline: auto;
        content: '';
        background-image: url('../../img/recruit/_common/youtube.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        translate: 0 -50%;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 60 * 1vw);
        }
      }
    }

    /* ==== .title ==== */
    .title {
      font-size: 20px;
      font-weight: 500;
      word-break: break-all;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
      }
    }
  }

  /* =====================
    .u-empty
  ===================== */
  :where(.u-empty) {
    display: block flow;
    inline-size: fit-content;
    padding-block: 1em;
    margin-inline: auto;
    font-weight: 600;
  }
}