@charset "UTF-8";

/* ----------------------------------------
 * Scroll Hint
/* -------------------------------------- */

.js-scroll-hint {
  &.is-scrollable {
    position: relative;
    width: 100%;
    overflow-x: scroll;

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      aspect-ratio: 1;
      pointer-events: none;
      content: '';
      background: url('/recruit/assets/images/common/scroll-hint.svg') no-repeat center / contain;
      translate: -50% -50%;
      transition: opacity 0.2s ease;

      @media screen and (width <= 767px) {
        width: calc(250 / 750 * 100vw);
      }
    }

    &.is-scrolled {
      &::before {
        opacity: 0;
      }
    }
  }
}

/* ----------------------------------------
 * Tab
/* -------------------------------------- */
@scope (.hcr-c-tab) {
  :scope {
    position: relative;
    display: grid;
  }

  .navi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(32 / 1920 * 100vw, 32px);
    margin-bottom: 32px;

    @media screen and (width <= 767px) {
      grid-template-columns: repeat(2, 1fr);
      gap: calc(50 / 750 * 100vw);
    }
  }

  .tab {
    display: flex;
    gap: 0.8em;
    align-items: center;
    justify-content: center;
    height: min(80 / 1920 * 100vw, 80px);
    font-size: min(30 / 1920 * 100vw, 30px);
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-gray-5);
    border-radius: 16px;
    transition: background-color 0.3s ease;
    transition-property: opacity, background-color;

    @media screen and (width <= 767px) {
      height: calc(80 / 750 * 100vw);
      font-size: calc(30 / 750 * 100vw);
      border-radius: calc(16 / 750 * 100vw);
    }

    &[aria-selected='true'] {
      pointer-events: none;
      background-color: var(--color-red-2);
    }

    @media screen and (hover: hover) {
      &:hover {
        opacity: 0.8;
      }
    }

    .num {
      font-size: calc(37 / 30 * 1em);
    }
  }

  .panel {
    visibility: hidden;
    grid-area: 2 / 1;
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0s 0.3s;

    /* 非アクティブはグリッドのトラック計算から外す */
    &:not(.is-active) {
      position: absolute;
      inset: 0 0 auto;
    }

    &.is-active {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.3s ease;
    }
  }
}

/* ----------------------------------------
 * Modal ( using native <dialog> )
/* -------------------------------------- */
@scope (.hcr-c-modal) {
  :scope {
    position: fixed;
    inset: 0;
    place-items: center;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    padding: clamp(16px, 5vh, 48px) clamp(16px, 5vw, 48px);
    margin: 0;
    overflow: hidden;
    color: inherit;
    background: rgb(0 0 0 / 55%);
    border: 0;
    /* overscroll-behavior: contain; */

    &[open] {
      display: grid;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    margin-inline: auto;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: 32px;
    box-shadow: 0 0 20px color-mix(in srgb, #000 12%, transparent);

    @media screen and (width <= 767px) {
      border-radius: calc(32 / 750 * 100vw);
    }

    &:focus,
    &:focus-visible {
      outline: none;
    }
  }

  .close-form {
    display: contents;
  }

  .close {
    position: absolute;
    top: 60px;
    right: 60px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 60px;
    aspect-ratio: 1;
    padding: 0;
    line-height: 1;
    color: var(--color-black);
    cursor: pointer;
    background-color: rgb(255 255 255 / 100%);
    border: 2px solid currentcolor;
    border-radius: 50%;
    transition: background-color 0.2s ease;

    @media screen and (width <= 767px) {
      top: calc(30 / 750 * 100vw);
      right: calc(30 / 750 * 100vw);
      width: calc(60 / 750 * 100vw);
    }

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 2px;
      height: 50%;
      content: '';
      background-color: currentcolor;
      rotate: 90deg;
      translate: -50% -50%;
    }

    @media screen and (hover: hover) {
      &:hover,
      &:focus-visible {
        background-color: rgb(0 0 0 / 8%);
      }
    }
  }

  .modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* animation */
  @media (prefers-reduced-motion: no-preference) {
    :scope {
      opacity: 0;
      transition:
        opacity 0.2s ease,
        display 0.2s ease allow-discrete,
        overlay 0.2s ease allow-discrete;

      &[open] {
        opacity: 1;

        @starting-style {
          opacity: 0;
        }

        .dialog {
          translate: 0 0;

          @starting-style {
            translate: 0 16px;
          }
        }
      }

      .dialog {
        translate: 0 16px;
        transition: translate 0.2s ease;
      }
    }
  }
}

/* モーダル展開時にスクロール禁止 */
html:has(.hcr-c-modal[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ----------------------------------------
 * People Slider
/* -------------------------------------- */

.js-people-slider {
  --slider-people-spv: 2;

  @media screen and (width > 767px) {
    --slider-people-spv: 3.3;
  }

  &.is-dragging {
    .slider_track {
      cursor: grabbing;
    }
  }

  &.is-initialized {
    .slider_viewport {
      overflow: visible;
    }

    .slider_track {
      display: flex;
      touch-action: pan-y;
      cursor: grab;
      user-select: none;
    }

    .slider_slide {
      flex: 0 0 calc(100% / var(--slider-people-spv));
      min-width: 0;

      img,
      a {
        -webkit-user-drag: none;
      }
    }
  }

  &:not(.is-initialized) {
    .slider_button {
      display: none;
    }
  }
}

/* ----------------------------------------
 * PAGE
 * people index
/* -------------------------------------- */

[data-hcr-page='people-index'] {
  @media screen and (width > 767px) {
    .js-people-slider {
      &:not(.is-initialized) {
        .slider_track {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: min(3.6458333333vw, 70px) 8.3333333333%;
          width: min(75vw, 1440px);
          margin-inline: auto;
        }
      }
    }
  }
}

/* ----------------------------------------
 * PAGE
 * internship
/* -------------------------------------- */

[data-hcr-page='internship'] {
  --intern-w: 1200;
  --intern-unit: calc(10 / var(--intern-w) * 100cqw);
  --intern-vw-unit: calc(10 / 1920 * 100vw);

  @media screen and (width <= 767px) {
    --intern-unit: calc(10 / 650 * 100cqw);
    --intern-vw-unit: calc(10 / 750 * 100vw);
  }

  .intern-l-container {
    width: min(75vw, 1200px);
    margin-inline: auto;
    container-type: inline-size;

    @media screen and (width <= 767px) {
      width: calc(650 / 750 * 100%);
    }

    &.--wide {
      width: min(75vw, 1440px);
    }
  }

  .intern-c-section {
    padding-block: min(8 * var(--intern-vw-unit), 80px) min(14 * var(--intern-vw-unit), 140px);

    @media screen and (width <= 767px) {
      padding-block: calc(8.2 * var(--intern-vw-unit)) calc(9 * var(--intern-vw-unit));
    }
  }

  .intern-c-header-01 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-block-end: calc(4.8 * var(--intern-unit)) !important;

    .intern-c-heading-01 {
      margin-block-end: 0 !important;
    }
  }

  .intern-c-button-01 {
    position: relative;
    display: grid;
    place-content: center;
    width: fit-content;
    min-width: calc(50 * var(--intern-unit));
    height: calc(10 * var(--intern-unit));
    padding-inline: 2.5em;
    font-size: calc(3.6 * var(--intern-unit));
    font-weight: 700;
    text-align: center;
    background: var(--gradient-1);
    border: 1px solid var(--color-gray-3);
    border-radius: 50vw;
    box-shadow: 0 0 calc(2 * var(--intern-unit)) color-mix(in srgb, #000 15%, transparent);
    transition: 0.3s ease;
    transition-property: color, border-color;

    .external-icon {
      position: absolute;
      top: 50%;
      right: 1em;
      width: calc(4 / 3.6 * 1em);
      stroke: currentcolor;
      translate: 0 -50%;
    }

    @media screen and (hover: hover) {
      &:hover {
        color: var(--color-red-1);
        border-color: var(--color-red-1);
      }
    }

    &:not([target='_blank']) {
      .external-icon {
        display: none;
      }
    }

    &.--center {
      margin-inline: auto;
    }

    &.--sp-short {
      @media screen and (width <= 767px) {
        min-width: calc(35 * var(--intern-unit));
      }
    }

    &.--sp-full {
      @media screen and (width <= 767px) {
        width: 100%;
      }
    }
  }

  .intern-c-heading-01 {
    margin-block-end: calc(4.8 * var(--intern-unit)) !important;
    font-size: calc(5.5 * var(--intern-unit));
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-red-2);

    @media screen and (width <= 767px) {
      font-size: calc(4 * var(--intern-unit));
    }

    &.--black {
      color: var(--color-black);
    }
  }

  .intern-c-heading-02 {
    margin-block-end: calc(3 * var(--intern-unit));
    font-size: calc(3.6 * var(--intern-unit));
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-black);

    &.--red {
      color: var(--color-red-2);
    }

    .--red {
      color: var(--color-red-2);
    }
  }

  .intern-c-text-01 {
    font-size: calc(2.8 * var(--intern-unit));
    line-height: 1.75;

    @media screen and (width <= 767px) {
      font-size: calc(2.6 * var(--intern-unit));
      line-height: calc(56 / 26);
    }
  }

  .intern-c-text-02 {
    font-size: calc(2.4 * var(--intern-unit));
    line-height: 1.75;
  }

  .intern-c-text-03 {
    font-size: calc(2 * var(--intern-unit));
    line-height: 1.75;
  }

  @scope (.intern-c-label) {
    :scope {
      display: flex;
      gap: calc(2.4 * var(--intern-unit));
      align-items: center;
      width: fit-content;
      height: calc(7 * var(--intern-unit));
      padding-inline: calc(3.2 * var(--intern-unit)) calc(4.8 * var(--intern-unit)) !important;
      font-size: calc(3.7 * var(--intern-unit));
      font-weight: 700;
      color: var(--color-white);
      background-color: var(--color-gray-5) !important;
      border-radius: 0 50vw 50vw 0;

      @media screen and (width <= 767px) {
        height: calc(7.5 * var(--intern-unit));
        font-size: calc(4 * var(--intern-unit));
      }
    }

    .num {
      font-size: calc(47 / 37 * 1em);
      color: inherit;
    }

    .text {
      color: inherit;
    }
  }

  @scope (.mv) {
    &:scope {
      position: relative;
      height: min(643 / 1920 * 100vw, 643px);
      margin-block-end: calc(50 / 1920 * 100vw);

      @media screen and (width <= 767px) {
        height: calc(675 / 750 * 100vw);
        padding-block-end: calc(55 / 750 * 100vw);
      }

      &::after {
        top: 100%;
      }
    }

    .bg {
      position: absolute;
      inset: 0;

      @media screen and (width <= 767px) {
        &::after {
          position: absolute;
          inset: 0;
          display: block;
          content: '';
          background: linear-gradient(to bottom, #fff, #808080 70%, #000 100%);
          mix-blend-mode: multiply;
          opacity: 0.7;
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .title {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: min(75vw, 1440px);
      height: 100%;
      margin-inline: auto;
      line-height: 1;
      color: var(--color-black);
      text-align: center;

      @media screen and (width <= 767px) {
        box-sizing: border-box;
        width: calc(650 / 750 * 100vw);
        padding-block-start: calc(45 / 750 * 100vw);
      }

      .en {
        margin-block-end: min(calc(10 / 1920 * 100vw), 10px);
        font-size: min(calc(88 / 1920 * 100vw), 88px);
        font-weight: 700;

        @media screen and (width <= 767px) {
          margin-block-end: calc(10 / 750 * 100vw);
          font-size: calc(88 / 750 * 100vw);
        }
      }

      .ja {
        font-size: min(calc(35 / 1920 * 100vw), 35px);
        font-weight: 700;

        @media screen and (width <= 767px) {
          font-size: calc(35 / 750 * 100vw);
        }
      }
    }
  }

  #intro {
    background: url('/recruit/assets/images/internship/intro_bg.jpg') no-repeat center / cover;

    @media screen and (width <= 767px) {
      background-image: url('/recruit/assets/images/internship/intro_bg_sp.jpg');
    }
  }

  #step {
    background: url('/recruit/assets/images/internship/step_bg.jpg') no-repeat center / cover;

    @media screen and (width <= 767px) {
      background-image: url('/recruit/assets/images/internship/step_bg_sp.jpg');
    }
  }

  @scope (.intern-steps) {
    :scope {
      margin-block-start: calc(5 * var(--intern-unit));

      @media screen and (width <= 767px) {
        margin-block-start: calc(10 * var(--intern-unit));
      }
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: calc(3.2 * var(--intern-unit));

      @media screen and (width <= 767px) {
        gap: calc(7.5 * var(--intern-unit));
        width: calc((57.5 * 3 + 7.5 * 2) * var(--intern-unit));
        padding-inline: 1px;
      }
    }

    .step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;

      @media screen and (width <= 767px) {
        gap: calc(5 * var(--intern-unit));
      }

      &:last-child {
        .step-title::after {
          display: none;
        }
      }
    }

    .step-title {
      position: relative;
      display: grid;
      place-content: center;
      height: calc(6.4 * var(--intern-unit));
      font-size: calc(3.6 * var(--intern-unit));
      font-weight: 700;
      color: var(--color-red-2);
      text-align: center;
      background-color: var(--color-white) !important;
      border: 1px solid currentcolor;
      border-radius: 50vw;

      @media screen and (width <= 767px) {
        height: calc(10 * var(--intern-unit));
        font-size: calc(5.7 * var(--intern-unit));
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 100%;
        display: block;
        width: calc(2 * var(--intern-unit));
        aspect-ratio: 20/23;
        content: '';
        background-color: currentcolor;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        translate: calc(0.6 * var(--intern-unit)) -50%;

        @media screen and (width <= 767px) {
          width: calc(3.2 * var(--intern-unit));
          translate: calc(2.15 * var(--intern-unit)) -50%;
        }
      }
    }

    .cards {
      display: grid;
      gap: calc(3.2 * var(--intern-unit));
    }

    .card {
      display: flex;
      flex-direction: column;
      padding: calc(4 * var(--intern-unit)) calc(3.2 * var(--intern-unit));
      background-color: var(--color-white);
      border-radius: calc(3.2 * var(--intern-unit));

      @media screen and (width <= 767px) {
        padding: calc(5 * var(--intern-unit)) calc(5.4 * var(--intern-unit));
        border: 1px solid var(--color-gray-3);
        border-radius: calc(5 * var(--intern-unit));
      }

      &:first-child:last-child {
        padding-block: calc(9.5 * var(--intern-unit));

        @media screen and (width <= 767px) {
          padding-block: calc(7.5 * var(--intern-unit));
        }
      }
    }

    .card-head {
      margin-block-end: calc(3 * var(--intern-unit));
      margin-inline: calc(-3.2 * var(--intern-unit));

      @media screen and (width <= 767px) {
        margin-block-end: calc(6 * var(--intern-unit));
        margin-inline: calc(-5.4 * var(--intern-unit));
      }
    }

    .card-title {
      display: flex;
      flex-direction: column;
      margin-block-end: calc(2 * var(--intern-unit));
      margin-inline: calc(-3.2 * var(--intern-unit));
      font-weight: 700;
      line-height: 1.75;
      text-align: center;

      @media screen and (width <= 767px) {
        margin-block-end: calc(3.2 * var(--intern-unit));
      }

      .sub {
        font-size: calc(2.2 * var(--intern-unit));

        @media screen and (width <= 767px) {
          font-size: calc(3.5 * var(--intern-unit));
        }
      }

      .main {
        font-size: calc(3.6 * var(--intern-unit));
        line-height: 1.5;

        @media screen and (width <= 767px) {
          font-size: calc(5 * var(--intern-unit));
        }
      }
    }

    .card-text {
      margin-block-end: calc(3.2 * var(--intern-unit));
      font-size: calc(2 * var(--intern-unit));
      line-height: 1.75;

      @media screen and (width <= 767px) {
        font-size: calc(2.6 * var(--intern-unit));
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    .card-note {
      padding: calc(4 * var(--intern-unit)) 0;
      margin-block-start: auto;
      font-size: calc(2.4 * var(--intern-unit));
      font-weight: 700;
      line-height: 1.75;
      text-align: center;
      background-color: var(--color-gray-1);
      border-radius: calc(3.75 * var(--intern-unit));

      @media screen and (width <= 767px) {
        font-size: calc(3.6 * var(--intern-unit));
      }

      em {
        font-size: calc(32 / 24 * 1em);
        font-style: normal;
      }
    }
  }

  #event {
  }

  /* イベント概要・詳細共通 */
  @scope (.intern-events) {
    :scope {
      display: flex;
      flex-direction: column;
      gap: calc(5 * var(--intern-unit));
      margin-block-end: calc(10 * var(--intern-unit));

      .title {
        height: calc(6 * var(--intern-unit));
        font-size: calc(3.2 * var(--intern-unit));
      }
    }

    .sub-title {
      display: flex;
      flex-direction: column;
      margin-block-end: calc(1.5 * var(--intern-unit));
      font-weight: 700;
      line-height: 1.75;

      @media screen and (width <= 767px) {
        margin-block-end: calc(1 * var(--intern-unit));
      }

      .sub {
        font-size: calc(2.6 * var(--intern-unit));
      }

      .main {
        font-size: calc(5 * var(--intern-unit));
        line-height: 1.5;
        letter-spacing: 0.05em;
      }
    }

    .tag {
      display: grid;
      place-content: center;
      width: fit-content;
      min-width: calc(22 * var(--intern-unit));
      height: calc(6 * var(--intern-unit));
      padding-inline: 1em;
      font-size: calc(2.8 * var(--intern-unit));
      font-weight: 700;
      line-height: 1;
      text-align: center;
      border: 1px solid var(--color-gray-3);
    }
  }

  /* イベント概要 */
  @scope (.event-sammary) {
    :scope {
      position: relative;
      display: grid;
      grid-template-columns: calc(36 * var(--intern-unit)) 1fr;
      padding-block: calc(4 * var(--intern-unit));
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-3);
      border-radius: calc(3.2 * var(--intern-unit));
      box-shadow: 0 0 calc(2 * var(--intern-unit)) color-mix(in srgb, #000 12%, transparent);

      @media screen and (width <= 767px) {
        grid-template-columns: 1fr;
        padding-block: calc(6.5 * var(--intern-unit)) calc(7.5 * var(--intern-unit));
      }
    }

    .col-2 {
      @media screen and (width <= 767px) {
        padding: 0 calc(5 * var(--intern-unit));
        margin-block-start: calc(2.2 * var(--intern-unit));
      }
    }

    .tag {
      margin-block-end: calc(2.8 * var(--intern-unit));

      @media screen and (width <= 767px) {
        margin-block-end: calc(2 * var(--intern-unit));
      }
    }

    .image {
      @media screen and (width <= 767px) {
        margin-block-start: calc(3.5 * var(--intern-unit));
      }

      img {
        @media screen and (width > 767px) {
          width: calc(35 * var(--intern-unit));
          translate: calc(-1.5 * var(--intern-unit)) 0;
        }

        @media screen and (width <= 767px) {
          width: calc(44 * var(--intern-unit));
          margin-inline: auto;
        }
      }
    }

    .desc {
      margin-block-end: calc(3.2 * var(--intern-unit));
      font-size: calc(2 * var(--intern-unit));
      line-height: 1.75;

      @media screen and (width <= 767px) {
        font-size: calc(2.6 * var(--intern-unit));
      }

      &:last-child {
        margin-block-end: 0;
      }
    }

    .button {
      display: grid;
      place-content: center;
      width: calc(28 * var(--intern-unit));
      height: calc(6 * var(--intern-unit));
      font-size: calc(3 * var(--intern-unit));
      font-weight: 700;
      color: var(--color-white);
      background-color: var(--color-red-2);
      border-radius: 50vw;
      box-shadow: 0 0 calc(1.5 * var(--intern-unit)) color-mix(in srgb, #000 30%, transparent);
      transition: background-color 0.3s ease;

      @media screen and (width <= 767px) {
        position: relative;
        width: calc(46.7 * var(--intern-unit));
        height: calc(10 * var(--intern-unit));
        margin-block-start: calc(5.5 * var(--intern-unit));
        margin-inline: auto;
      }

      @media screen and (width > 767px) {
        position: absolute;
        right: calc(6 * var(--intern-unit));
        bottom: calc(6 * var(--intern-unit));
      }

      @media screen and (hover: hover) {
        &:hover {
          background-color: var(--color-gray-4);
        }
      }

      .icon {
        position: absolute;
        top: 50%;
        right: 0;
        width: calc(6 * var(--intern-unit));
        aspect-ratio: 1;
        border: 1px solid currentcolor;
        border-radius: 50%;
        stroke: currentcolor;
        translate: 0 -50%;

        @media screen and (width <= 767px) {
          right: calc(2 * var(--intern-unit));
        }

        @media screen and (width > 767px) {
          border-color: transparent;
        }

        &::before,
        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: 2px;
          height: 50%;
          content: '';
          background-color: currentcolor;
          translate: -50% -50%;
        }

        &::after {
          rotate: 90deg;
        }
      }
    }
  }

  /* モーダル背景 */
  .hcr-c-modal .dialog:has(.event-detail) {
    background: no-repeat url('/recruit/assets/images/internship/gradation_01.svg') right bottom /
      calc(120 * var(--intern-unit)) auto var(--color-white);
  }

  /* イベント詳細 */
  @scope (.event-detail) {
    :scope {
      width: min(75vw, 1200px);
      padding-block: calc(5 * var(--intern-unit)) calc(12 * var(--intern-unit));
      /* background:
      no-repeat url("/recruit/assets/images/internship/gradation_01.svg") right bottom / calc(120 * var(--intern-unit)) auto
      var(--color-white); */
      @media screen and (width <= 767px) {
        width: calc(650 / 750 * 100vw);
        padding-block: calc(6.5 * var(--intern-unit)) calc(10 * var(--intern-unit));
      }
    }

    .header-group {
      .sub-title {
        .main {
          font-size: calc(5.5 * var(--intern-unit));
          color: var(--color-red-2);

          @media screen and (width <= 767px) {
            font-size: calc(5 * var(--intern-unit));
          }
        }

        .sub {
          font-size: calc(2.8 * var(--intern-unit));

          @media screen and (width <= 767px) {
            font-size: calc(2.6 * var(--intern-unit));
          }
        }
      }

      .title {
        @media screen and (width > 767px) {
          height: calc(8 * var(--intern-unit));
          margin-block-end: 0 !important;
          font-size: calc(4.2 * var(--intern-unit));
        }
      }

      .tag {
        @media screen and (width > 767px) {
          height: calc(8 * var(--intern-unit));
          font-size: calc(3.8 * var(--intern-unit));
        }
      }
    }

    .body {
      margin-block-start: calc(5 * var(--intern-unit));
      font-size: calc(2.4 * var(--intern-unit));
      line-height: 1.75;

      @media screen and (width <= 767px) {
        font-size: calc(2.6 * var(--intern-unit));
      }

      div,
      dl,
      dt,
      dd,
      ul,
      ul li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      pre,
      form,
      fieldset,
      input,
      textarea,
      p,
      blockquote,
      th,
      td {
        line-height: 1.75;
      }
    }

    .table {
      dt {
        font-weight: inherit;
      }
    }

    @media screen and (width <= 767px) {
      :scope {
        padding-inline: calc(5 * var(--intern-unit));
      }

      .header-group {
        display: flex;
        flex-direction: column;

        .row-1,
        .row-2 {
          display: contents;
        }

        .title {
          order: 1;
          margin-block-end: 0 !important;
          margin-inline-start: calc(-5 * var(--intern-unit)) !important;
        }

        .image {
          order: 2;
          margin-block-start: calc(3.5 * var(--intern-unit));

          img {
            width: calc(35 * 1.25 * var(--intern-unit));
            margin-inline: auto;
          }
        }

        .tag {
          order: 3;
          margin-block-start: calc(2.2 * var(--intern-unit));
        }

        .sub-title {
          order: 4;
          margin-block-start: calc(2 * var(--intern-unit)) !important;
        }
      }

      .table {
        dt {
          ~ dt {
            margin-block-start: calc(8 * var(--intern-unit));
          }
        }

        dd {
          margin-block-start: calc(3 * var(--intern-unit));
        }
      }
    }

    @media screen and (width > 767px) {
      .header-group {
        .row-1 {
          display: flex;
          gap: calc(5 * var(--intern-unit));
          align-items: center;
        }

        .row-2 {
          display: flex;
          gap: calc(1 * var(--intern-unit));
          align-items: center;
          margin-block-start: calc(5 * var(--intern-unit));
        }

        .image {
          width: calc(35 * var(--intern-unit));
          margin-inline-start: calc(-1.5 * var(--intern-unit));
        }
      }

      .body {
        padding-inline: calc(12.5 * var(--intern-unit));
      }

      .table {
        display: grid;
        grid-template-columns: calc(14.5 * var(--intern-unit)) 1fr;
        gap: 1lh calc(7.5 * var(--intern-unit));
      }
    }
  }

  @scope (.work-section) {
    :scope {
      line-height: 1.75;

      &:not(:first-of-type) {
        padding-block-start: calc(6 * var(--intern-unit));
        margin-block-start: calc(6 * var(--intern-unit));
        border-top: 1px solid var(--color-gray-3);

        @media screen and (width <= 767px) {
          padding-block-start: calc(8 * var(--intern-unit));
          margin-block-start: calc(8 * var(--intern-unit));
        }
      }

      > :first-child {
        margin-block-start: 0;
      }

      > :last-child {
        margin-block-end: 0;
      }
    }

    .intern-c-heading-02 {
      display: flex;
      flex-wrap: wrap;
      gap: calc(2 * var(--intern-unit)) calc(3 * var(--intern-unit));

      .--sp-small {
        @media screen and (width <= 767px) {
          font-size: calc(30 / 36 * 1em);
        }
      }
    }

    p {
      margin-block: calc(3 * var(--intern-unit));
    }

    ul {
      margin-block: calc(3 * var(--intern-unit));

      li {
        line-height: 1.75;
      }

      &.--indent-1em {
        li {
          padding-inline-start: 1em;
          text-indent: -1em;
        }
      }
    }
  }

  @scope (.work-recommend) {
    :scope {
      padding: calc(6 * var(--intern-unit)) calc(8 * var(--intern-unit)) calc(7.5 * var(--intern-unit));
      margin-block-start: calc(8 * var(--intern-unit));
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-3);
      border-radius: calc(3.2 * var(--intern-unit));

      @media screen and (width <= 767px) {
        padding: calc(6 * var(--intern-unit)) calc(3.5 * var(--intern-unit)) calc(10 * var(--intern-unit));
      }
    }

    .recommend-title {
      display: grid;
      place-content: center;
      width: min(47.6 * var(--intern-unit), 100%);
      height: calc(8 * var(--intern-unit));
      margin-block-end: calc(6.5 * var(--intern-unit));
      margin-inline: auto;
      font-size: calc(3 * var(--intern-unit));
      font-weight: 700;
      color: var(--color-white);
      text-align: center;
      background-color: var(--color-red-2);
      border-radius: 50vw;

      @media screen and (width <= 767px) {
        margin-block-end: calc(9 * var(--intern-unit));
        font-size: calc(3 * var(--intern-unit));
      }
    }

    .list {
      display: flex;
      flex-direction: column;
      gap: calc(7.5 * var(--intern-unit));

      @media screen and (width <= 767px) {
        gap: calc(12.5 * var(--intern-unit));
        /* margin-inline: calc(1 * var(--intern-unit)); */
      }

      li {
        display: flex;
        gap: calc(5 * var(--intern-unit));
        align-items: center;

        @media screen and (width <= 767px) {
          gap: calc(3 * var(--intern-unit));
        }

        img {
          flex-shrink: 0;
          width: calc(20 * var(--intern-unit));

          @media screen and (width <= 767px) {
            width: calc(15 * var(--intern-unit));
          }
        }

        .text {
          font-size: calc(3 * var(--intern-unit));
          font-weight: 700;
          line-height: 1.75;

          @media screen and (width <= 767px) {
            font-size: calc(2.6 * var(--intern-unit));
          }
        }
      }
    }
  }

  @scope (.program-flow) {
    :scope {
      margin-block-start: calc(8 * var(--intern-unit));

      > li {
        &:not(:first-child) {
          margin-block-start: calc(8 * var(--intern-unit));
        }

        > :last-child {
          margin-block-end: 0;
        }
      }
    }

    .flow-title {
      display: flex;
      gap: calc(2.5 * var(--intern-unit));
      align-items: center;
      font-size: calc(3.6 * var(--intern-unit));
      font-weight: 700;
      line-height: 1.4;

      @media screen and (width <= 767px) {
        font-size: calc(3 * var(--intern-unit));
      }

      .num {
        display: grid;
        flex-shrink: 0;
        place-content: center;
        width: calc(7 * var(--intern-unit));
        height: calc(7 * var(--intern-unit));
        aspect-ratio: 1;
        font-size: calc(3.5 * var(--intern-unit));
        color: var(--color-white);
        background-color: var(--color-red-2);
        border-radius: 50%;
      }
    }

    .flow-body {
      line-height: 1.75;

      @media screen and (width > 767px) {
        margin-inline-start: calc(9.5 * var(--intern-unit));
      }
    }
  }

  #voice {
    background-color: var(--color-gray-1);

    .hcr-c-tab {
      margin-block-start: calc(9.6 * var(--intern-unit));

      @media screen and (width <= 767px) {
        margin-block-start: calc(6.5 * var(--intern-unit));
      }
    }
  }

  @scope (.voice-list) {
    :scope {
    }

    .item {
      display: flex;
      padding-block: calc(6 * var(--intern-unit)) calc(7 * var(--intern-unit));
      border-top: 1px solid var(--color-gray-3);
      border-bottom: 1px solid var(--color-gray-3);

      @media screen and (width > 767px) {
        gap: calc(8 * var(--intern-unit));
        align-items: flex-start;

        &:nth-child(even) {
          flex-direction: row-reverse;
        }
      }

      @media screen and (width <= 767px) {
        flex-direction: column;
        gap: calc(3.6 * var(--intern-unit));
      }

      &:not(:first-child) {
        border-top: 0;
      }
    }

    .heading {
      margin-block-end: calc(2.5 * var(--intern-unit));
      font-size: calc(3 * var(--intern-unit));
      font-weight: 700;
      line-height: 1;
      color: var(--color-red-2);

      @media screen and (width <= 767px) {
        margin-block-end: calc(3.5 * var(--intern-unit));
      }

      .num {
        margin-inline-start: 0.2em;
        font-size: calc(57 / 30 * 1em);

        @media screen and (width <= 767px) {
          font-size: calc(65 / 30 * 1em);
        }
      }
    }

    .voice {
      font-size: calc(2.4 * var(--intern-unit));
      line-height: 1.75;

      @media screen and (width <= 767px) {
        font-size: calc(2.6 * var(--intern-unit));
        line-height: calc(56 / 26);
      }
    }

    .image {
      @media screen and (width > 767px) {
        flex-shrink: 0;
        width: calc(20 * var(--intern-unit));
        margin-block-start: calc(1.5 * var(--intern-unit));
      }

      @media screen and (width <= 767px) {
        align-self: center;
        width: calc(25 * var(--intern-unit));
      }
    }
  }

  .intern-schedule {
    margin-block-start: calc(6.5 * var(--intern-unit));

    img {
      @media screen and (width <= 767px) {
        width: calc(120 * var(--intern-unit));
        max-width: none;
      }
    }
  }
}