@charset "utf-8";

/*MV*/

input[type="checkbox"],
input[type="radio"] {
  all: revert; /* ブラウザのデフォルトスタイル（User Agent Style）を復元 */
}

#form {
  /* padding-bottom: calc(86 / 1366 * 100vw); */
  .mv {
    margin-bottom: calc(74 / 1366 * 100vw);
  }
}

.block_form {
  overflow: hidden;
  padding-bottom: calc(75 / 1366 * 100vw);
  @media screen and (max-width: 768px) {
    padding-bottom: 0;
  }

  .inner {
    margin: 0 auto;
    width: calc(994 / 1366 * 100vw);
    @media screen and (max-width: 768px) {
      width: 100%;
    }
  }

  .intro {
    margin-bottom: calc(60 / 1366 * 100vw);
    font-size: calc(14 / 1366 * 100vw);
    line-height: 2;

    @media screen and (max-width: 768px) {
      margin-bottom: calc(80 / 375 * 100vw);
      font-size: calc(14 / 375 * 100vw);
      padding: 0 calc(30 / 375 * 100vw);
    }
  }

  .wrapper_form {
    position: relative;
    display: flex;
    justify-content: space-between;
    @media screen and (max-width: 768px) {
      flex-flow: column;
      gap: calc(70 / 375 * 100vw);
    }
  }
  .flow {
    /* position: sticky;
    top: calc(100 / 1366 * 100vw);
    left: 0; */
    margin-top: calc(90 / 1366 * 100vw);
    width: 22.25%;
    align-self: flex-start;
    display: flex;
    flex-flow: column;
    gap: calc(60 / 1366 * 100vw);
    font-weight: bold;
    font-size: calc(20 / 1366 * 100vw);
    line-height: 1.5;

    li {
      position: relative;
      z-index: 0;
      display: flex;
      justify-content: space-between;
      color: #a8a8a8;
      &.active {
        color: #000;
        .dot {
          background: #3286e6;
          border: 1px solid #000;
        }
        &:nth-of-type(n + 2)::after {
          content: "";
          display: block;
          position: absolute;
          z-index: -1;
          background: repeating-linear-gradient(to bottom, #000 0 calc(2 / 1366 * 100vw), transparent calc(2 / 1366 * 100vw) calc(4 / 1366 * 100vw));
          top: calc(-100% - (41 / 1366 * 100vw));
          left: calc(75 / 1366 * 100vw);
          width: max(0.5px, calc(1 / 1366 * 100vw));
          height: calc(100% + (53 / 1366 * 100vw));
        }
      }
      .en {
        width: calc(54 / 1366 * 100vw);
        font-weight: 600;
        font-size: calc(11 / 1366 * 100vw);
        .no {
          font-weight: bold;
          font-size: calc(17 / 1366 * 100vw);
          margin-left: calc(4 / 1366 * 100vw);
        }
      }
      .dot {
        position: relative;
        z-index: 1;
        width: calc(7 / 1366 * 100vw);
        aspect-ratio: 1;
        border: 1px solid #a8a8a8;
        border-radius: calc(99 / 1366 * 100vw);
        align-self: flex-start;
        transform: translateY(calc(12 / 1366 * 100vw));
      }
      .text {
        width: calc(125 / 1366 * 100vw);
        height: calc(60 / 1366 * 100vw);
      }
    }

    @media screen and (max-width: 768px) {
      position: static;
      width: 84%;
      margin: 0 auto;
      flex-flow: row;
      justify-content: space-between;
      gap: 0;
      font-size: calc(11 / 375 * 100vw);
      line-height: 1.667;

      li {
        flex-flow: column;
        color: #a8a8a8;
        width: 23%;
        &.active {
          color: #000;
          .dot {
            background: #3286e6;
            border: 1px solid #000;
          }
          &:nth-of-type(n + 2)::after {
            background: repeating-linear-gradient(to right, #000 0 calc(2 / 375 * 100vw), transparent calc(2 / 375 * 100vw) calc(4 / 375 * 100vw));
            top: calc(39 / 375 * 100vw);
            left: calc(-83 / 375 * 100vw);
            width: calc(100% + calc(51 / 375 * 100vw));
            height: 1px;
          }
        }

        .en {
          width: auto;
          text-align: center;
          font-size: calc(11 / 375 * 100vw);
          .no {
            font-size: calc(17 / 375 * 100vw);
            margin-left: calc(4 / 375 * 100vw);
          }
        }
        .dot {
          width: calc(7 / 375 * 100vw);
          border-radius: calc(99 / 375 * 100vw);
          transform: translateY(0);
          margin: calc(7 / 375 * 100vw) auto calc(5 / 375 * 100vw);
        }
        .text {
          width: 100%;
          height: calc(40 / 375 * 100vw);
          display: flex;
          align-items: center;
          text-align: center;
        }
      }
    }
  }

  .box_form {
    background: #fff;
    padding: calc(88 / 1366 * 100vw) calc(68 / 1366 * 100vw) calc(82 / 1366 * 100vw) calc(53 / 1366 * 100vw);
    border-radius: calc(30 / 1366 * 100vw);
    width: 69.51%;
    @media screen and (max-width: 768px) {
      background: #fff;
      padding: calc(80 / 375 * 100vw) calc(30 / 375 * 100vw); /* 80px と 30px を 375px 基準で変換 */
      border-radius: calc(30 / 375 * 100vw); /* 30px を 375px 基準で変換 */
      width: 100%;
    }
  }

  .completed {
    padding: calc(60 / 1366 * 100vw) calc(68 / 1366 * 100vw) calc(80 / 1366 * 100vw) calc(76 / 1366 * 100vw);
    position: relative;
    z-index: 1;
    &::before {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      background-image: url("../img/common02/dec_form01.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      top: calc(-31 / 1366 * 100vw);
      right: calc(71 / 1366 * 100vw);
      width: calc(152.5 / 1366 * 100vw);
      aspect-ratio: 305 / 394;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      background-image: url("../img/common02/dec_form02.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      bottom: calc(-74 / 1366 * 100vw);
      left: calc(92 / 1366 * 100vw);
      width: calc(119.5 / 1366 * 100vw);
      aspect-ratio: 239 / 428;
    }

    h3 {
      font-weight: bold;
      font-size: calc(31 / 1366 * 100vw);
      letter-spacing: 0.05em;
      line-height: calc(52 / 31);
      color: #000;
      margin-bottom: calc(46 / 1366 * 100vw);
    }
    .wrapper_text {
      position: relative;
      z-index: 0;
      display: flex;
      justify-content: space-between;
      .box_text {
        width: 72.19%;
        font-weight: normal;
        font-size: calc(14 / 1366 * 100vw);
        line-height: 2;
        color: #1a1411;
      }
      .dec_text {
        font-weight: 900;
        font-size: calc(21 / 1366 * 100vw);
        letter-spacing: 0.05em;
        color: #1a1411;
        writing-mode: vertical-rl;
        padding-right: calc(27 / 1366 * 100vw);
        border-right: 1px solid #707070;
        display: flex;
        align-items: flex-end;
        gap: calc(7 / 1366 * 100vw);
        .size_s {
          font-size: 0.5238em;
        }
      }
    }
    .btn00 {
      position: relative;
      z-index: 0;
      display: block;
      font-weight: 900;
      font-size: calc(14 / 1366 * 100vw);
      color: #000;
      border-bottom: 1px solid #000;
      margin: 50px auto 0 0;
      width: calc(235 / 1366 * 100vw);
      aspect-ratio: 235 / 43;
      padding: 0 0 calc(16 / 1366 * 100vw) calc(22 / 1366 * 100vw);
      &::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-color: #00428e;
        background-position: center center;
        top: calc(11 / 1366 * 100vw);
        left: 0;
        transform: translate(0, 0);
        width: calc(10 / 1366 * 100vw);
        aspect-ratio: 1;
        border-radius: calc(99 / 1366 * 100vw);
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-image: url("../img/recruit/arrow_entry.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: 0;
        right: 0;
        width: calc(24 / 1366 * 100vw);
        aspect-ratio: 1;
      }
    }
    @media screen and (max-width: 768px) {
      padding: calc(72 / 375 * 100vw) calc(30 / 375 * 100vw) calc(63 / 375 * 100vw);
      &::before {
        top: calc(-36 / 375 * 100vw);
        right: calc(-62 / 375 * 100vw);
        width: calc(152 / 375 * 100vw);
      }
      &::after {
        bottom: calc(-76 / 375 * 100vw);
        left: calc(-5 / 375 * 100vw);
        width: 119.5px;
      }

      h3 {
        font-size: calc(24 / 375 * 100vw);
        line-height: calc(40 / 24);
        margin-bottom: calc(48 / 375 * 100vw);
      }
      .wrapper_text {
        position: relative;
        z-index: 0;

        display: flex;
        justify-content: space-between;
        .box_text {
          font-size: calc(14 / 375 * 100vw);
          width: 75.19%;
        }
        .dec_text {
          font-size: calc(21 / 375 * 100vw);
          padding-right: calc(27 / 375 * 100vw);
          gap: calc(7 / 375 * 100vw);
        }
      }
      .btn00 {
        font-size: calc(14 / 375 * 100vw);
        width: 100%;
        aspect-ratio: 235 / 43;
        padding: 0 0 calc(18 / 375 * 100vw) calc(24 / 375 * 100vw);
        margin: calc(36 / 375 * 100vw) auto calc(16 / 375 * 100vw) 0;
        &::before {
          top: calc(13 / 375 * 100vw);
          width: calc(10 / 375 * 100vw);
          border-radius: calc(99 / 375 * 100vw);
        }
        &::after {
          width: calc(24 / 375 * 100vw);
        }
      }
    }
  }

  .form-group {
    + .form-group {
      margin-top: calc(40 / 1366 * 100vw);
      @media screen and (max-width: 768px) {
        margin-top: calc(27 / 375 * 100vw);
      }
    }
    .c-form__item__error {
      display: block;
      padding-bottom: calc(8 / 1366 * 100vw);
      color: #ea1334;
      font-size: calc(14 / 1366 * 100vw);
      @media screen and (max-width: 768px) {
        padding-bottom: calc(8 / 375 * 100vw);
        font-size: calc(14 / 375 * 100vw);
      }
    }
    .dec_font {
      font-weight: bold;
      font-size: calc(16 / 1366 * 100vw);
      margin-bottom: calc(1 / 1366 * 100vw); /* 1px を 1366px 基準で変換 */
      @media screen and (max-width: 768px) {
        font-size: calc(16 / 375 * 100vw);
      }
    }
    .item00 {
      display: flex;
      align-items: center;
      gap: calc(10 / 1366 * 100vw);
      font-weight: bold;
      font-size: calc(16 / 1366 * 100vw);
      margin-bottom: calc(20 / 1366 * 100vw);
      .size_s {
        font-size: 0.71em;
        font-weight: normal;
        align-self: flex-end;
      }
      .required {
        background: #ea1334;
        width: calc(40 / 1366 * 100vw);
        aspect-ratio: 2 / 1;
        border-radius: calc(2 / 1366 * 100vw);
        font-size: calc(13 / 1366 * 100vw);
        color: #fff;
        text-align: center;
        padding: calc(4 / 1366 * 100vw) 0 0;
        align-self: center;
        margin-top: calc(-1 / 1366 * 100vw);
      }

      @media screen and (max-width: 768px) {
        gap: calc(10 / 375 * 100vw);
        font-size: calc(16 / 375 * 100vw);
        margin-bottom: calc(14 / 375 * 100vw);
        .required {
          width: calc(40 / 375 * 100vw);
          border-radius: calc(2 / 375 * 100vw);
          font-size: calc(13 / 375 * 100vw);
          padding: calc(4 / 375 * 100vw) 0 0;
        }
      }
    }
    &.privacy-group {
      .wrapper_check {
        display: flex;
        align-items: center;
        gap: calc(10 / 1366 * 100vw);
      }
      label a {
        border-bottom: 1px solid #000;
      }
      input[type="checkbox"] {
        position: relative;
        width: calc(20 / 1366 * 100vw);
        height: calc(20 / 1366 * 100vw);
        border: 1px solid #c9c9c9;
        border-radius: calc(3 / 1366 * 100vw);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }
      input[type="checkbox"]:checked:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        border: solid #00428e;
        border-width: 0 1px 1px 0; /* 2px -> 1px に変換（border-width は 1px や 2px はそのまま保持するルールに基づき、ここでは 1px を維持しつつ、元の 2px を含む指定は 1px に変更する方針を採用。ただし、border-width: 0 2px 2px 0; は border-width: 0 calc(2 / 1366 * 100vw) calc(2 / 1366 * 100vw) 0; と変換し、1px/2px 固定値ルールは適用しないこととする）*/
        border-width: 0 calc(2 / 1366 * 100vw) calc(2 / 1366 * 100vw) 0;
        width: calc(6 / 1366 * 100vw);
        aspect-ratio: 6 / 10;
      }
      .text_privacy {
        margin: calc(60 / 1366 * 100vw) 0 calc(30 / 1366 * 100vw);
        font-weight: normal;
        font-size: calc(14 / 1366 * 100vw);
        line-height: 2;
      }
      @media screen and (max-width: 768px) {
        .wrapper_check {
          display: flex;
          align-items: center;
          gap: calc(10 / 375 * 100vw);
        }
        input[type="checkbox"] {
          width: calc(20 / 375 * 100vw);
          height: calc(20 / 375 * 100vw);
          border-radius: calc(3 / 375 * 100vw);
        }
        input[type="checkbox"]:checked:before {
          border-width: 0 calc(2 / 375 * 100vw) calc(2 / 375 * 100vw) 0;
          width: calc(6 / 375 * 100vw);
        }
        .text_privacy {
          margin: calc(60 / 375 * 100vw) 0 calc(30 / 375 * 100vw);
          font-size: calc(14 / 375 * 100vw);
          line-height: 2;
        }
      }
    }
    .text_box {
      width: 100%;
      height: calc(60 / 1366 * 100vw);
      border-radius: calc(5 / 1366 * 100vw);
      background: transparent;
      border: 1px solid #e5e5e5;
      padding: 1em 2em;
      font-weight: normal;
      font-size: calc(14 / 1366 * 100vw);
      line-height: 2;

      color: #1a1411;
      &::placeholder {
        color: #a8a8a8;
        opacity: 1;
      }

      & + .text_box {
        margin-top: calc(10 / 1366 * 100vw);
      }
      &.adjust_area {
        min-height: calc(210 / 1366 * 100vw);
        resize: vertical;
        overflow: auto;
      }

      @media screen and (max-width: 768px) {
        height: calc(60 / 375 * 100vw);
        border-radius: calc(5 / 375 * 100vw);
        font-weight: normal;
        font-size: calc(14 / 375 * 100vw);
        padding: 0 1em;
        & + .text_box {
          margin-top: calc(8 / 375 * 100vw);
        }
        &.adjust_area {
          min-height: calc(170 / 375 * 100vw);
        }
      }
    }
    .text_box02 {
      width: 100%;
      font-size: calc(14 / 1366 * 100vw);
      line-height: 2;
      padding-bottom: calc(32 / 1366 * 100vw);
      border-bottom: 1px solid #e5e5e5;
      @media screen and (max-width: 768px) {
        font-size: calc(14 / 375 * 100vw);
      }
    }

    .dob-group {
      display: flex;
      justify-content: space-between;
      > * {
        position: relative;
        z-index: 0;
        display: flex;
        gap: calc(10 / 1366 * 100vw);
        align-items: flex-end;
        text-align: center;
        flex-flow: wrap;
        select {
          width: calc(100% - calc(27 / 1366 * 100vw));
          padding-right: calc(50 / 1366 * 100vw);
          display: flex;
          align-items: center;
        }
        &::after {
          content: "";
          display: block;
          position: absolute;
          z-index: 0;
          border: solid #707070;
          border-width: 0 1px 1px 0;
          bottom: calc(28 / 1366 * 100vw);
          right: calc(50 / 1366 * 100vw);
          transform: rotate(45deg);
          width: calc(9 / 1366 * 100vw);
          aspect-ratio: 1;
        }
        .c-form__item__error {
          width: 100%;
          text-align: left;
          padding-bottom: 0;
        }
      }

      .box_year {
        width: 43.25%;
      }
      .box_month {
        width: 24.86%;
      }
      .box_day {
        width: 24.86%;
      }
      @media screen and (max-width: 768px) {
        flex-flow: wrap;
        gap: calc(10 / 375 * 100vw);
        > * {
          gap: calc(10 / 375 * 100vw);
          select {
            width: calc(100% - calc(27 / 375 * 100vw));
            padding-right: calc(50 / 375 * 100vw);
          }
          &::after {
            width: calc(9 / 375 * 100vw);
            right: calc(40 / 375 * 100vw);
            bottom: calc(28 / 375 * 100vw);
          }
        }
        .box_year {
          width: 48%;
          margin-right: 52%;
        }
        .box_month {
          width: 48%;
        }
        .box_day {
          width: 48%;
        }
      }
    }
    .box_age {
      display: flex;
      flex-flow: wrap;
      align-items: flex-end;
      gap: calc(10 / 1366 * 100vw);
      .text_box {
        text-align: center;
        width: 26.44%;
      }
      .c-form__item__error {
        width: 100%;
        text-align: left;
        padding-bottom: 0;
      }

      @media screen and (max-width: 768px) {
        gap: calc(10 / 375 * 100vw);
        .text_box {
          text-align: center;
          width: 50%;
        }
      }
    }
    .box_area {
      position: relative;
      z-index: 0;
      width: 49.91%;
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        border: solid #707070;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-width: 0 1px 1px 0;
        bottom: calc(28 / 1366 * 100vw);
        right: calc(20 / 1366 * 100vw);
        transform: rotate(45deg);
        width: calc(9 / 1366 * 100vw);
        aspect-ratio: 1;
      }
      select {
        display: flex;
        align-items: center;
      }

      @media screen and (max-width: 768px) {
        width: 100%;
        &::after {
          width: calc(9 / 375 * 100vw);
          bottom: calc(28 / 375 * 100vw);
          right: calc(20 / 375 * 100vw);
        }
      }
    }
    .checkbox-group {
      display: flex;
      flex-flow: column;
      gap: calc(13 / 1366 * 100vw);
      font-weight: normal;
      font-size: calc(14 / 1366 * 100vw);

      label {
        display: flex;
        align-items: center;
        gap: calc(10 / 1366 * 100vw);
      }

      input[type="checkbox"] {
        position: relative;
        width: calc(22 / 1366 * 100vw);
        height: calc(22 / 1366 * 100vw);
        border: 1px solid #c9c9c9;
        border-radius: calc(99 / 1366 * 100vw);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }
      input[type="checkbox"]:checked:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(8 / 1366 * 100vw);
        aspect-ratio: 1;
        background: #00428e;
        border-radius: calc(99 / 1366 * 100vw);
      }
      @media screen and (max-width: 768px) {
        gap: calc(13 / 375 * 100vw);
        font-size: calc(14 / 375 * 100vw);
        label {
          gap: calc(10 / 375 * 100vw);
        }

        input[type="checkbox"] {
          width: calc(22 / 375 * 100vw);
          height: calc(22 / 375 * 100vw);
          border-radius: calc(99 / 375 * 100vw);
        }
        input[type="checkbox"]:checked:before {
          width: calc(8 / 375 * 100vw);
          border-radius: calc(99 / 375 * 100vw);
        }
      }
    }
    .wrapper_attached {
      display: flex;
      align-items: center;
      gap: calc(10 / 1366 * 100vw);
      @media screen and (max-width: 768px) {
        gap: calc(10 / 375 * 100vw);
        flex-flow: column;
      }
    }
    .hidden-input,
    #resume01,
    #resume02 {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      border: 0 !important;
    }
    .btn_attached {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(162 / 1366 * 100vw);
      aspect-ratio: 162 / 60;
      border-radius: calc(5 / 1366 * 100vw);
      background: #f2f2f2;
      border: 1px solid #e5e5e5;
      font-weight: normal;
      font-size: calc(14 / 1366 * 100vw);
      cursor: pointer;
      @media screen and (max-width: 768px) {
        width: 100%;
        height: calc(60 / 375 * 100vw);
        aspect-ratio: unset;
        border-radius: calc(5 / 375 * 100vw);
        font-size: calc(14 / 375 * 100vw);
      }
    }
    .file-name-display {
      font-weight: normal;
      font-size: calc(10 / 1366 * 100vw);
      @media screen and (max-width: 768px) {
        font-size: calc(14 / 375 * 100vw);
      }
    }
  }
  .button-group {
    display: flex;
    justify-content: center;
    gap: calc(50 / 1366 * 100vw);
    margin: calc(36 / 1366 * 100vw) auto 0;
    width: fit-content;
    .submit-button {
      position: relative;
      z-index: 0;
      display: flex;
      margin: 0 auto;
      width: calc(174 / 1366 * 100vw);
      aspect-ratio: 174 / 40;
      border-bottom: calc(2 / 1366 * 100vw) solid #000;
      font-weight: bold;
      font-size: calc(14 / 1366 * 100vw);
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-image: url(../img/common02/icon_form_arrow01.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: 0;
        right: 0;
        width: calc(14 / 1366 * 100vw);
        aspect-ratio: 1;
        transition: 0.3s;
      }

      &.correction {
        justify-content: flex-end;
        &::after {
          right: auto;
          left: 0;
          transform: scale(-1, 1);
        }
      }
    }
    @media screen and (max-width: 768px) {
      margin-top: calc(42 / 375 * 100vw);
      width: 100%;
      gap: calc(30 / 375 * 100vw);
      .submit-button {
        width: calc(139 / 375 * 100vw);
        border-bottom: calc(2 / 375 * 100vw) solid #000;
        font-size: calc(14 / 375 * 100vw);
        aspect-ratio: 139 / 37;
        &::after {
          width: calc(14 / 375 * 100vw);
        }
      }
    }
  }

  &.cheak {
    .form-group {
      .box_area {
        width: 100%;
        &::after {
          display: none;
        }
      }
    }
  }
}

.c-form__item__input {
  display: contents;
}

.block_form {
  .mail-group {
    .text_box {
      margin-top: calc(10 / 1366 * 100vw);
    }
    .wrapper_input:has(.c-form__item__error) {
      .text_box {
        margin: 0 0 calc(16 / 1366 * 100vw);
      }
    }
  }
  @media screen and (max-width: 768px) {
    .mail-group {
      .text_box {
        margin-top: calc(10 / 375 * 100vw);
      }
      .wrapper_input:has(.c-form__item__error) {
        .text_box {
          margin: 0 0 calc(16 / 375 * 100vw);
        }
      }
    }
  }
}