@charset "utf-8";

body {
  overflow-x: clip;
  position: relative;
  background-color: #F0F0F0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;

  @media (max-width: 768px) {
    background-size: 80px 80px;
  }
}

.recruit-inner {
  position: relative;
  width: 80.625cqw;
  padding-block: 6.25cqw;
  margin: 0 auto 10.9375cqw;

  @media (max-width: 768px) {
    width: 82.93333333333334vw;
    max-width: 450px;
    padding-block: 65px;
    margin: 0 auto 80px; 
  }

  .tab-wrap {
    display: flex;
    position: absolute;
    justify-content: space-between;
    top: 0;
    left: 0;
    width: 100%;

    .tab {
      display: block;
      width: 25.624999999999996cqw;
      aspect-ratio: 328 / 96;
      padding: 2.1875cqw 6.25cqw 3.125cqw;
      font-size: 1.40625cqw;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.04em;
      color: #fff; 
      border: 1px solid #fff;
      border-radius: 1.875cqw 1.875cqw 0 0;
      overflow: hidden;
      transition: translate 300ms ease;
      @media (max-width: 768px) {
        width: calc(100% / 3);
        height: 65px;
        aspect-ratio: unset;
        font-size: 15px;
        padding: 11px;
        border-radius: 16px 16px 0 0;
        line-height: 1.33333;
      }
    }
    a {
      background-color: var(--color-navy);
      @media (min-width: 769px) {
        &:hover {
          translate: 0 -1.25cqw;
        }
      }
    }
    div {
      background-image: var(--grad04);
    }

    &.bottom {
      top: unset;
      bottom: 0;
      .tab {
        padding: 3.125cqw 6.25cqw 2.1875cqw;
        border-radius: 0 0 1.875cqw 1.875cqw;
        @media (max-width: 768px) {
          padding: 11px;
          border-radius: 0 0 16px 16px;
        }
      }
      a {
        @media (min-width: 769px) {
          &:hover {
            translate: 0 1.25cqw;
          }
        }
      }
      div {
        background-image: var(--grad05);
      }
    }
  }
  .container {
    position: relative;
    z-index: 1;
    padding: 6.25cqw 6.875cqw 9.375cqw;
    background-color: #fff;

    @media (max-width: 768px) {
      padding: 48px 20px;
    }

    .handicap-text {
      font-size: 1.25cqw;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 2.125;
      text-align: center;
      @media (max-width: 768px) {
        font-size: 1.5rem;
        line-height: 1.866666666666667;
      }
    }

    .content-ttl {
      position: relative;
      width: fit-content;
      font-size: 2.1875cqw;
      letter-spacing: 0.04em;
      font-weight: 700;
      color: var(--color-navy);
      padding-bottom: 1.25cqw;
      margin: 0 auto;
      @media (max-width: 768px) {
        font-size: 2.4rem;
        padding-bottom: 12px;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.3125cqw;
        background-image: var(--grad01);
        @media (max-width: 768px) {
          height: 4px;
        }
      }
      @media (min-width: 769px) {
        &.no-line {
          &::after {
            display: none;
          }
        }
      }
    }

    .content {
      + .content {
        margin-top: 9.375cqw;
        @media (max-width: 768px) {
          margin-top: 64px;
        }
      }
      .list {
        width: 100%;
        margin-top: 5cqw;
        @media (max-width: 768px) {
          margin-top: 40px;
        }
        .item {
          display: flex;
          width: 100%;
          @media (max-width: 768px) {
            flex-direction: column;
            gap: 16px;
          }
          + .item {
            margin-top: 2.5cqw;
            @media (max-width: 768px) {
              margin-top: 24px;
            }
          }
          .head {
            position: relative;
            width: 13.75cqw;
            font-size: 1.171875cqw;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding-bottom: 2.5cqw;
            color: var(--color-navy);
            line-height: 1.8666;
            @media (max-width: 768px) {
              width: 128px;
              font-size: 1.5rem;
              padding-bottom: 8px;
            }
            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 1px;
              background-color: var(--color-navy);
            }
          }
          .detail {
            position: relative;
            width: calc(100% - 13.75cqw);
            padding: 0 0 2.5cqw 6.875cqw;
            z-index: 1;
            @media (max-width: 768px) {
              width: 100%;
              padding: 0 0 16px;
            }
            &::after {
              content: '';
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
              height: 1px;
              background-color: #D5D5D5;
            }
            .text {
              font-size: 1.171875cqw;
              letter-spacing: 0.1em;
              text-align: justify;
              word-break: break-all;
              line-height: 1.8666;
              @media (max-width: 768px) {
                font-size: 1.5rem;
              }
              &.-indent {
                padding-left: 0.8em;
                text-indent: -0.8em;
              }
              .dot {
                color: #FF0048;
                font-weight: 900;
              }
              .attention {
                display: block;
                line-height: 1.5;
                padding-left: 1em;
                text-indent: -1em;
              }
              .-small {
                font-size: 1.015625cqw;
                letter-spacing: 0.1em;
                line-height: 1.53846;
                @media (max-width: 768px) {
                  font-size: 1.3rem;
                }
              } 
            }
            .point {
              position: relative;
              font-size: 1.171875cqw;
              font-weight: 700;
              line-height: 1.8666;
              letter-spacing: 0.04em;
              padding-left: 1.5625cqw;
              @media (max-width: 768px) {
                font-size: 1.5rem;
                padding-left: 20px;
              }
              .-regular {
                font-weight: 400;
              }
              &::after {
                content: '';
                position: absolute;
                top: 0.703125cqw;
                left: 0;
                width: 0.9375cqw;
                aspect-ratio: 1 / 1;
                background-image: var(--grad02);
                border-radius: 50%;
                @media (max-width: 768px) {
                  top: 9px;
                  width: 12px;
                }
              }

              +.point {
                margin-top: 1.5625cqw;
                @media (max-width: 768px) {
                  margin-top: 12px;
                }
              }

              + .attention {
                margin-top: 1.5625cqw;
                @media (max-width: 768px) {
                  margin-top: 12px;
                }
              }
            }
            
            .attention {
              font-size: 1.015625cqw;
              letter-spacing: 0.04em;
              line-height: 1.53846;
              margin-top: 0.3125cqw;
              @media (max-width: 768px) {
                font-size: 1.3rem;
                margin-top: 4px;
              }

              .link {
                text-decoration-line: underline;
                text-decoration-color: #000;
                text-decoration-style: solid;
                text-decoration-thickness: 1px;
                transition: opacity 300ms ease;
                font-weight: 700;
                @media (min-width: 769px) {
                  &:hover {
                    opacity: 0.5;
                  }
                }
              }
            }
          }
        }
      }
      .flow {
        width: 53.125cqw;
        margin: 5vw auto 0;
        @media (max-width: 768px) {
          width: 100%;
          margin: 40px auto 0;
        }
        .card {
          position: relative;
          width: 100%;
          display: flex;
          align-items: center;
          gap: 1.875cqw;
          padding: 1.875cqw;
          background-color: #F0F0F0;
          border-radius: 0.625cqw;
          @media (max-width: 768px) {
            gap: 15px;
            padding: 16px;
            border-radius: 8px;
            align-items: flex-start;
          }
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 3.75cqw;
            width: 1px;
            height: calc(100% + 1.25cqw);
             background-image: repeating-linear-gradient(180deg, #052275, #052275 2px, transparent 2px, transparent 4px);
            background-repeat: repeat-y;
            background-size: 1px 100%;
            @media (max-width: 768px) {
              left: 34px;
              height: calc(100% + 16px);
            }
          }
          &:first-of-type, &:last-of-type {
            &::after {
              height: calc(50% + 1.25cqw);
              @media (max-width: 768px) {
                height: calc(70% + 16px);
              }
            }
          }

          &:first-of-type {
            &::after {
              top: unset;
              bottom: -1.25cqw;
              @media (max-width: 768px) {
                bottom: -16px;
              }
            }
          }

          @media (max-width: 768px) {
            &:last-of-type {
              &::after {
                height: calc(25%);
              }
            }
          }
          + .card {
            margin-top: 1.25cqw;
            @media (max-width: 768px) {
              margin-top: 16px;
            }
          } 
          .num {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3.75cqw;
            aspect-ratio: 1 / 1;
            height: fit-content;
            font-size: 1.5625cqw;
            font-family: var(--text-poppins);
            letter-spacing: 0.048em;
            font-weight: 500;
            color: #fff;
            border-radius: 50%;
            background-image: var(--grad03);
            position: relative;
            z-index: 2;
            @media (max-width: 768px) {
              width: 36px;
              font-size: 16px;
            }
          }
          .text-wrap {
            flex: 1;
            .head {
              font-size: 1.40625cqw;
              font-weight: 700;
              font-family: var(--color-navy);
              letter-spacing: 0.04em;
              color: var(--color-navy);
              @media (max-width: 768px) {
                font-size: 1.8rem;
              }
            }
            .text {
              font-size: 1.015625cqw;
              letter-spacing: 0.04em;
              line-height: 1.53846;
              margin-top: 0.15625cqw;
              @media (max-width: 768px) {
                font-size: 1.3rem;
                margin-top: 2px;
              }

              .link {
                text-decoration-line: underline;
                text-decoration-color: #000;
                text-decoration-style: solid;
                text-decoration-thickness: 1px;
                transition: opacity 300ms ease;
                @media (min-width: 769px) {
                  &:hover {
                    opacity: 0.5;
                  }
                }
              }
            }
          }
        }
        .attention {
          font-size: 1.015625cqw;
          letter-spacing: 0.04em;
          line-height: 1.53846;
          margin-top: 0.9375cqw;
          @media (max-width: 768px) {
            font-size: 1.3rem;
            margin-top: 12px;
          }
        }
      }
      .entry-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;
        aspect-ratio: 856 / 120;
        font-size: 3.75cqw;
        font-family: var(--text-poppins);
        font-weight: 700;
        color: #fff;
        border-radius: 4.6875cqw;
        overflow: hidden;
        margin-top: 9.375cqw;
        transition: letter-spacing 300ms ease;
        @media (max-width: 768px) {
          width: 271px;
          aspect-ratio: 271 / 88;
          font-size: 3.2rem;
          border-radius: 16vw;
          margin: 64px auto 0;
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: var(--grad01);
          z-index: -1;
        }
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--color-navy);
          z-index: -1;
          transition: opacity 300ms ease;
        }
        @media (min-width: 768px) {
          &:hover {
            letter-spacing: 0.2em;
            &::after {
              opacity: 0;
            }
          }
        }
      }
    }
    &.career {
      .content {
        .list {
          .item {
            @media (max-width: 768px) {
              .head {
                width: 100%;
                &::after {
                  width: 128px;
                }
              }
            }
            .detail {
              .small-point {
                display: block;
                position: relative;
                font-size: 1.171875cqw;
                letter-spacing: 0.08em;
                line-height: 1.866666;
                padding-left: 1.171875cqw;
                text-align: left;
                word-break: break-all;
                @media (max-width: 768px) {
                  font-size: 1.5rem;
                  padding-left: 15px;
                }
                &::after {
                  content: '';
                  position: absolute;
                  top: 0.9375cqw;
                  left: 0.46875cqw;
                  width: 0.234375cqw;
                  height: 0.234375cqw;
                  background-color: #052275;
                  border-radius: 50%;
                  @media (max-width: 768px) {
                    top: 12px;
                    left: 6px;
                    width: 3px;
                    height: 3px;
                  }
                }
              }
              .point {
                color: var(--color-navy);
                .text {
                  color: #000;
                  font-weight: 400;
                }
                .-regular {
                  color: #000;
                }
                .-bold {
                  display: block;
                  color: #000;
                  @media (max-width: 768px) {
                    margin-top: 12px;
                  }
                }
                .attention {
                  display: block;
                  color: #000;
                  margin-top: -0.3125cqw;
                  font-weight: 400;
                  +.-bold {
                    margin-top: 0.9375cqw;
                    @media (max-width: 768px) {
                      margin-top: 12px;
                    }
                  }
                  +.small-point {
                    margin-top: 0.9375cqw;
                    @media (max-width: 768px) {
                      margin-top: 12px;
                    }
                  }
                  +.text {
                    display: block;
                    margin-top: 0.9375cqw;
                    @media (max-width: 768px) {
                      margin-top: 12px;
                    }
                  }
                }
                .small-point {
                  width: 100%;
                  color: #000;
                  font-weight: 400;
                  &::after {
                    background-color: var(--color-navy);
                  }
                }
                &::after {
                  background-image: none;
                  background-color: var(--color-navy);
                }
              }
              .text {
                +.point {
                  margin-top: 1.5625cqw;
                }
              }
              .btn-wrap {
                display: flex;
                gap: 1.875cqw;
                margin-top: 1.953125cqw;
                @media (max-width: 768px) {
                  flex-direction: column;
                  gap: 8px;
                  margin-top: 16px;
                }
                .btn {
                  position: relative;
                  width: 18.75cqw;
                  aspect-ratio: 240 / 48;
                  padding: 0.859375cqw 1.171875cqw 0.859375cqw 1.7968749999999998cqw;
                  font-size: 1.25cqw;
                  font-weight: 700;
                  color: var(--color-navy);
                  border: 1px solid var(--color-navy);
                  border-radius: 2.5cqw;
                  transition: background-color 300ms ease, color 300ms ease;
                  @media (max-width: 768px) {
                    position: relative;
                    width: 240px;
                    padding: 11px 23px;
                    font-size: 16px;
                    border-radius: 32px;
                  }
                  &::after {
                    content: '';
                    position: absolute;
                    translate: 0 -50%;
                    right: 1.25cqw;
                    top: 50%;
                    width: 1.328125cqw;
                    height: 1.015625cqw;
                    background: url(../img/common/ex-link.svg) no-repeat;
                    background-size: 1.328125cqw 1.015625cqw;
                    @media (max-width: 768px) {
                      right: 16px;
                      top: 50%;
                      width: 17px;
                      height: 13px;
                      background-size: 17px 13px;
                    }
                  }
                  @media (min-width: 769px) {
                    &:hover {
                      background-color: var(--color-navy);
                      color: #fff;
                    }
                  }
                }
              }
              .block {
                + .block {
                  margin-top: 6.25cqw;
                  @media (max-width: 768px) {
                    margin-top: 40px;
                  }
                }
                .block-head {
                  font-size: 1.40625cqw;
                  font-weight: 700;
                  color: #fff;
                  padding: 0.625cqw 1.875cqw;
                  background-color: var(--color-navy);
                  border-radius: 0.625cqw;
                  @media (max-width: 768px) {
                    font-size: 1.8rem;
                    padding: 8px 24px;
                    border-radius: 8px;
                  }
                }
                .link-text {
                  display: block;
                  position: relative;
                  width: fit-content;
                  font-size: 1.171875cqw;
                  font-weight: 700;
                  color: var(--color-navy);
                  padding-right: 1.953125cqw;
                  text-decoration-line: underline;
                  text-decoration-color: var(--color-navy);
                  text-decoration-style: solid;
                  text-decoration-thickness: 1px;
                  margin-top: 0.625cqw;
                  transition: opacity 300ms ease;
                  @media (max-width: 768px) {
                    font-size: 1.5rem;
                    padding-right: 2.5rem;
                    margin-top: 8px;
                  }
                  &::after {
                    content: '';
                    position: absolute;
                    translate: 0 -50%;
                    top: 50%;
                    right: 0;
                    width: 1.328125cqw;
                    height: 1.015625cqw;
                    background: url(../img/common/ex-link.svg) no-repeat;
                    background-size: 1.328125cqw 1.015625cqw;
                    @media (max-width: 768px) {
                      right: 0;
                      width: 17px;
                      height: 13px;
                      background-size: 17px 13px;
                    }
                  }
                  @media (min-width: 769px) {
                    &:hover {
                      opacity: 0.5;
                    }
                  }
                }
                p.link-text {
                  text-decoration: none;
                  &::after {
                    display: none;
                  }
                  @media (min-width: 769px) {
                    &:hover {
                      opacity: 1;
                    }
                  }
                }
                @media (max-width: 768px) {
                  .link-text.-break01 {
                    &::after {
                      translate: 0 0;
                      top: unset;
                      bottom: 5px;
                      right: unset;
                      left: 50px;
                    }
                  }
                  .link-text.-break02 {
                    &::after {
                      translate: 0 0;
                      top: unset;
                      bottom: 5px;
                      right: unset;
                      left: 100px;
                    }
                  }
                }
                .accordion-wrap {
                  margin-top: 2.5cqw;
                  @media (max-width: 768px) {
                    margin-top: 32px;
                  }
                  .accordion-ttl {
                    font-size: 1.5625cqw;
                    font-weight: 700;
                    letter-spacing: 0.04em;
                    color: var(--color-navy);
                    @media (max-width: 768px) {
                      font-size: 2.0rem;
                    }
                  }
                  .accordion {
                    margin-top: 1.25cqw;
                    @media (max-width: 768px) {
                      margin-top: 16px;
                    }
                    .accordion-head {
                      display: flex;
                      align-items: center;
                      gap: 1.875cqw;
                      padding: 1.171875cqw 1.7968749999999998cqw 1.328125cqw;
                      border: 1px solid var(--color-navy);
                      background-color: #fff;
                      border-radius: 0.625cqw;
                      cursor: pointer;
                      transition: background-color 300ms ease;
                      @media (max-width: 768px) {
                        gap: 8px;
                        padding: 15px;
                        border-radius: 8px;
                      }
                      p {
                        flex: 1;
                        font-size: 1.25cqw;
                        font-weight: 700;
                        letter-spacing: 0.04em;
                        text-align: justify;
                        word-break: break-all;
                        color: #000;
                        transition: color 300ms ease;
                        @media (max-width: 768px) {
                          font-size: 1.5rem;
                        }
                      }
                      .deco {
                        position: relative;
                        width: 3.125cqw;
                        aspect-ratio: 1 / 1;
                        background-color: var(--color-navy);
                        border-radius: 50%;
                        @media (max-width: 768px) {
                          width: 30px;
                        }
                        &::after, &::before {
                          content: '';
                          position: absolute;
                          translate: -50% -50%;
                          top: 50%;
                          left: 50%;
                          width: 1.5625cqw;
                          height: 0.15625cqw;
                          background-color: #fff;
                          @media (max-width: 768px) {
                            width: 14px;
                            height: 2px;
                          }
                        }
                        &::after {
                          rotate: 90deg;
                          transition: rotate 300ms ease;
                        }
                      }
                      @media (min-width: 769px) {
                        &:hover {
                          background-color: #F0F0F0;
                          p {
                            color: var(--color-navy);
                          }
                        }
                      }
                      &.-active {
                        background-color: #F0F0F0;
                        border-radius: 0.625cqw 0.625cqw 0 0;
                        @media (max-width: 768px) {
                          border-radius: 8px 8px 0 0;
                        }
                        p {
                          color: var(--color-navy);
                        }
                        .deco {
                          &::after {
                            rotate: 0deg;
                          }
                        }
                      } 
                    }
                    .accordion-head_stop {
                      padding: 1.171875cqw 1.7968749999999998cqw 1.328125cqw;
                      border-radius: 0.625cqw;
                      background-color: #F0F0F0;
                      @media (max-width: 768px) {
                        padding: 16px;
                        border-radius: 8px;
                      }
                      p {
                        display: flex;
                        align-items: center;
                        font-size: 1.25cqw;
                        font-weight: 700;
                        letter-spacing: 0.04em;
                        text-align: justify;
                        word-break: break-all;
                        height: 3.125cqw;
                        @media (max-width: 768px) {
                          font-size: 1.5rem;
                          height: fit-content;
                        }
                      }
                    }
                    .accordion-detail {
                      display: none;
                      .accordion-detail-inner {
                        position: relative;
                        padding: 1.875cqw 1.7968749999999998cqw 4.0625cqw;
                        margin-bottom: 3.125cqw;
                        border: 1px solid var(--color-navy);
                        border-radius: 0 0 0.625cqw 0.625cqw;
                        background-color: #fff;
                        border-top: none;
                        display: block;
                        @media (max-width: 768px) {
                          padding: 15px 15px 60px;
                          margin-bottom: 34px;
                          border-radius: 0 0 8px 8px;
                        }
                        .point {
                          color: #000;
                        }
                        .text-wrap {
                          padding-left: 1.5625cqw;
                          margin-top: 0.3125cqw;
                          @media (max-width: 768px) {
                            padding: 0;
                            margin-top: 12px;
                          }
                          + .text-wrap {
                            margin-top: 2.34375cqw;
                            @media (max-width: 768px) {
                              margin-top: 35px;
                            }
                          }
                          .text01 {
                            font-size: 1.171875cqw;
                            font-weight: 700;
                            letter-spacing: 0.04em;
                            line-height: 1.866666;
                            color: var(--color-navy);
                            @media (max-width: 768px) {
                              font-size: 1.5rem;
                            }
                          }
                          .text02 {
                            font-size: 1.171875cqw;
                            letter-spacing: 0.08em;
                            line-height: 1.866666;
                            text-align: justify;
                            word-break: break-all;
                            @media (max-width: 768px) {
                              font-size: 1.5rem;
                            }
                            .square {
                              color: var(--color-navy);
                            }
                          }
                          .small-point {
                            width: 37.5cqw;
                            @media (max-width: 768px) {
                              width: 100%;
                            }
                          }
                          
                          + .point {
                            margin-top: 1.5625cqw;
                            @media (max-width: 768px) {
                              margin-top: 32px;
                            }
                          }
                        }
                        .close-btn {
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          position: absolute;
                          translate: -50% 0;
                          left: 50%;
                          bottom: -1.5625cqw;
                          width: 17.5cqw;
                          height: auto;
                          aspect-ratio: 224 / 39;
                          font-size: 1.25cqw;
                          font-weight: 700;
                          color: #fff;
                          background-color: var(--color-navy);
                          border: 1px solid var(--color-navy);
                          border-radius: 2.03125cqw;
                          cursor: pointer;
                          transition: background-color 300ms ease, color 300ms ease;
                          @media (max-width: 768px) {
                            width: 224px;
                            bottom: -17px;
                            aspect-ratio: 224 / 37;
                            font-size: 1.5rem;
                            border-radius: 26px;
                          }

                          &::after {
                            content: '';
                            position: absolute;
                            translate: 0 -50%;
                            top: 50%;
                            right: 1.25cqw;
                            width: 1.015625cqw;
                            height: 0.625cqw;
                            mask-image: url(../img/common/close-arrow.svg);
                            mask-repeat: no-repeat;
                            mask-size: 1.015625cqw 0.625cqw;
                            background-color: #fff;
                            transition: background-color 300ms ease;
                            @media (max-width: 768px) {
                              right: 12px;
                              width: 12px;
                              height: 6px;
                              mask-size: 12px 6px;
                            }
                          }

                          @media (min-width: 769px) {
                            &:hover {
                              background-color: #fff;
                              color: var(--color-navy);
                              &::after {
                                background-color: var(--color-navy);
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .flow {
          .card {
            .num {
              background-image: none;
              background-color: var(--color-navy);
            }
          }
        }
      }
    }
  }
}