@charset "UTF-8";
/* common */
html {
    scroll-behavior: smooth;
}
.recruit-benefits .card-list-group,
.recruit-infographic-inner {
    margin-top: 2.5rem;
}
.br-sp {
    display: none;
}
@media screen and (max-width: 767px) {
    .recruit-benefits .card-list-group,
    .recruit-infographic-inner {
        margin-top: 0;
    }
    .br-sp {
        display: block;
    }
}
.midcareer-wrapper,
.newgrad-wrapper {
    position: relative;
    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100vh;
        min-height: 400px;
        background: var(--color-white);
        top: 0;
        left: 0;
        z-index: -1;
        background: var(--color-white);
        background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0) 0%,
          var(--color-white) 50%
        );
    }
    a {
        text-decoration: none;
    }
}
@media screen and (max-width: 767px) {
    .midcareer-wrapper,
    .newgrad-wrapper {
        &::before {
            height: 80vh;
            min-height: 300px;
        }
    }
}


/***************** mid career *****************/
/* title */
#main-title.recruitTop-title {
    text-align: center;
    padding: 7.5rem 0 0;
    margin-bottom: 14rem;
    .en {
        font-size: 6.25rem;
        color: var(--color-navy);
    }
    .ja {
        font-size: 2rem;
    }
}
.recruitTop-title-img {
    position: relative;
    padding-left: 200px;
    &::before {
        position: absolute;
        content: "";
        width: 324px;
        height: 430px;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
}
.recruitTop-midcareer-title-img::before {
    background: url(../img/title_midcareer.webp)no-repeat;
    background-size: contain;
}
@media screen and (max-width: 767px) {
    #main-title.recruitTop-title {
        padding: 7.5rem 0 0;
        margin-bottom: 5.5rem;
        .en {
            font-size: 3.125rem;
        }
        .ja {
            font-size: 1.5rem;
        }
    }
    .recruitTop-title-img {
        padding-left: 100px;
        &::before {
            width: 164px;
            height: 219px;
            top: -100px;
        }
    }
}

/* intro */
.recruit-intro-message {
    text-align: center;
    letter-spacing: 0.1rem;
    margin-bottom: 7.5rem;
    h2 {
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-blue);
        margin-bottom: 2.5rem;
    }
    p {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 170%;
    }
}
.signOnBonus-banner {
    width: 545px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-white);
    border: 2px solid var(--color-orange);
    border-radius: 2rem;
    padding: 0.5rem 2rem;
    margin: 4rem auto 0;
    box-sizing: border-box;
    transition: var(--03s);
    img {
        width: 140px;
        height: auto;
        object-fit: contain;
        margin-right: 1.2rem;
    }
    &:hover {
        transform: scale(1.04);
        .signOnBonus-note {
            color: var(--color-black);
        }
    }
}
.signOnBonus-text {
    em {
        font-size: 2rem;
        font-weight: 900;
        font-style: normal;
        color: var(--color-orange);
        span {
             font-size: 3.5rem;
            margin: 0 0.25rem 0 0.5rem;
        }
    }
    .signOnBonus-target {
        font-size: 0.95rem;
        font-weight: 500;
        text-align: center;
        color: var(--color-white);
        background: var(--color-orange);
        border-radius: 2.5rem;
        margin: 0.4rem 0 0.75rem;
    }
    .signOnBonus-note {
        font-size: 0.875rem;
        font-weight: 500;
    }
}
@media screen and (max-width: 767px) {
    .recruit-intro-message {
        margin-bottom:4rem;
        h2 {
            font-size: 1.25rem;
            line-height: 150%;
            margin-bottom: 1.5rem;
        }
        p {
            font-size: 0.875rem;
            text-align: left;
            margin: 0 0.5rem;
        }
    }
}
@media screen and (max-width: 640px) {
    .signOnBonus-banner {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0.75rem 1rem;
        margin: 2.5rem auto 0;
        img {
            width: 22vw;
            max-width: 100px;
            margin-right: 0.5rem;
        }
    }
    .signOnBonus-text {
        letter-spacing: 0;
        em {
            font-size: 1.25rem;
            span {
                font-size: 2.25rem;
            }
        }
        .signOnBonus-target {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
            margin: 0.5rem 0 0.25rem;
        }
        .signOnBonus-note {
            font-size: 0.75rem;
            text-align: center;
        }
    }
}


/* benefit */
@media screen and (max-width: 1024px) {
  .card-list-group {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .card-list-group {
    gap: 1rem;
  }
}

/* infographic */
.recruit-infographic-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4等分 */
  gap: 24px;
}
/* 上段2つ */
.recruit-infographic-inner .stat-card:nth-child(1) {
  grid-column: 1 / 3; 
}
.recruit-infographic-inner .stat-card:nth-child(2) {
  grid-column: 3 / 5; 
}
/* 下段4つ */
.recruit-infographic-inner .stat-card:nth-child(3) {
  grid-column: 1 / 2;
}
.recruit-infographic-inner .stat-card:nth-child(4) {
  grid-column: 2 / 3;
}
.recruit-infographic-inner .stat-card:nth-child(5) {
  grid-column: 3 / 4;
}
.recruit-infographic-inner .stat-card:nth-child(6) {
  grid-column: 4 / 5;
}
.stat-card {
    background: var(--color-gray);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 2rem;
}
.stat-title {
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
    padding-left: 1.25rem;
    margin-bottom: 2rem;
    &::before {
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        background: var(--color-orange);
        border-radius: 50%;
        top: 8px;
        left: 0;
    }
}
.stat-value {
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-blue);
    line-height: 100%;
    margin: 0 auto;
    span {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 2rem;
        font-weight: 600;
        line-height: 150%;
        margin-left: 0.5rem;
    }
}
.stat-card-img {
    position: relative;
    &::before {
        position: absolute;
        content: "";
        width: 13.88vw;
        max-width: 200px;
        height: 11.11vw;
        max-height: 160px;
        top: 50%;
        right: 1vw;
        transform: translateY(-50%);
    }
    .stat-value {
        justify-content: flex-start;
        margin-left: 3.8vw;
    }
}
.stat-card-img:nth-child(1)::before {
    background: url(../img/recruit_contents_01.png)no-repeat;
    background-size: contain;
}
.stat-card-img:nth-child(2)::before {
    background: url(../img/recruit_contents_02.png)no-repeat;
    background-size: contain;
}
.stat-card-bobttom {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .stat-value {
        padding-bottom: 1.5rem;
    }
}
.stat-ratio-wrapper {
    display: flex;
    justify-content: center;
    margin-top: -0.5rem;
    .stat-value {
        padding-bottom: 0;
    }
}
.stat-ratio {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    span {
        font-weight: 600;
        color: var(--color-blue);
    }
}
.stat-ratio-colon {
    font-size: 4rem;
    color: var(--color-blue);
    margin: 0.5rem 1rem 0;
}
.stat-note {
    display: block;
    font-weight: 600;
    color: var(--color-darkgray);
    text-align: right;
    margin-top: 1rem;
}
@media screen and (min-width: 1440px) {
    .stat-card-img {
        position: relative;
        &::before {
            right: 5vw;
        }
        .stat-value {
            margin-left: 8vw;
        }
    }
}
@media screen and (max-width: 1120px) {
  .recruit-infographic-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 上段2つ */
  .recruit-infographic-inner .stat-card:nth-child(1),
  .recruit-infographic-inner .stat-card:nth-child(2) {
    grid-column: 1 / 3; 
  }

  /* 下段4つ */
  .recruit-infographic-inner .stat-card:nth-child(3),
  .recruit-infographic-inner .stat-card:nth-child(4),
  .recruit-infographic-inner .stat-card:nth-child(5),
  .recruit-infographic-inner .stat-card:nth-child(6) {
    grid-column: auto; 
  }
}
@media screen and (max-width: 767px) {
    .recruit-infographic-inner {
        gap: 12px;
    }
    .stat-card {
        border-radius: 0.6rem;
        padding: 1rem;
    }
    .stat-title {
        font-size: 0.875rem;
        padding-left: 14px;
        margin-bottom: 1rem;
        &::before {
            width: 8px;
            height: 8px;
        }
    }
    .stat-value {
        font-size: 2.5rem;
        span {
            font-size: 1.25rem;
            margin-left: 0.25rem;
        }
    }
    .stat-card-img {
        &::before {
            width: 30.8vw;
            height: 24.6vw;
            right: 1rem;
        }
        .stat-value {
            justify-content: flex-start;
            margin-left: 3.8vw;
        }
    }
    .stat-ratio {
        span {
           font-size: 0.75rem;
        }
    }
    .stat-ratio-colon {
        font-size: 2.5rem;
        margin: 0.3rem 0.5rem 0;
    }
    .stat-note {
        font-size: 0.875rem;
        margin-top: 0.75rem;
    }
}



/* interviews */
#interview__list.recruit-interview__list li {
  display: block;
}
.view-btn {
    width: 240px;
    margin: 2.5rem auto 0;
}


/* casual interview */
.casual-interview-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    background: var(--color-blue);
    background-image: linear-gradient(
        to right,
        var(--color-blue),
        var(--color-lightblue5)
    );
    border-radius: 5rem;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 40px rgb(127 194 254 / 20%);
    padding: 3rem 5rem;
    margin: 7.5rem 0;
    box-sizing: border-box;
    img {
        display: block;
        width: 32vw;
        height: auto;
        object-fit: contain;
    }
}
.casual-interview-text {
    letter-spacing: 0.1rem;
    h3 {
        font-size: clamp(1.75rem, 1.4643rem + 0.5952vw, 2rem);
        font-weight: 800;
        line-height: 150%;
        color: var(--color-white);
        margin-bottom: 2rem;
    }
    p {
        font-size: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);
        font-weight: 600;
        line-height: 170%;
    }
}
.casual-interview-btn {
    max-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-white);
    border-radius: 2.5rem;
    font-size: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);
    font-weight: 600;
    color: var(--color-blue);
    padding: 1.5rem;
    margin: 2.5rem auto 0; 
    transition: var(--03s);
    &:hover {
        color: var(--color-white);
        background: var(--color-orange);
    }
}
@media screen and (max-width: 767px) {
    .casual-interview-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        border-radius: 2rem;
        padding: 1.5rem 1rem 2.5rem;
        margin: 4rem 0;
        img {
            width: 52vw;
        }
    }
    .casual-interview-text {
        h3 {
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
        }
        p {
            font-size: 0.875rem;
            font-weight: 500;
        }
    }
    .casual-interview-btn {
        max-width: 240px;
        font-size: 1rem;
        padding: 1.2rem 1.5rem;
        margin: 1.5rem auto 0; 
    }
}



/* job details */
#job-details {
    gap: 0;
    .company-section__item-title {
        width: 120px;
    }
    .company-section__item-text {
        width: calc(100% - 120px);
    }
}
.job-details-notes {
    font-size: 0.875rem;
}
.signOnBonus-detail {
    position: relative;
    display: iinline-block;
    width: auto;
    flex: 0 0 auto;
    background: var(--color-gray);
    border-radius: 1rem;
    padding: 3.5rem 1.5rem 2rem;
    h5 {
        position: absolute;
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--color-white);
        background: var(--color-blue);
        padding: 0.5rem 1.5rem;
        border-radius: 1rem 0;
        top: 0;
        left: 0;
    }
    span {
        font-weight: 600;
    }
    em {
        font-style: normal;
        color: var(--color-blue);
    }
    .job-details-notes {
        font-weight: 500;
    }
}
.entry-btn {
    position: relative;
    display: block;
    width: 600px;
    height: 100px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-white);
    border-radius: 5rem;
    margin: 6rem auto 0;
    transition: var(--03s);
    z-index: 1;
    &::before, &::after {
        position: absolute;
        content: "";
        inset: 0;
        border-radius: 6rem;
        transition: var(--03s);
    }
    &::before {
        background: linear-gradient(to right, var(--color-blue), var(--color-lightblue5));
        z-index: -1;
    }
    &::after {
        background: linear-gradient(to right, var(--color-orange), #FF9914);
        z-index: -2;
    }
    &:hover{
        transform: scale(1.02);
        &::before {
           opacity: 0;
        }
        span {
            color: var(--color-white);
        }
    }
    span {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
            position: absolute;
            content: "";
            width: 127px;
            height: 120px;
            background: url(../img/recruit_sent.png)no-repeat;
            background-size: contain;
            bottom: 12px;
            right: 24px;
        }
    }
}
@media screen and (max-width: 767px) {
    #job-details {
        .company-section__item-title,
        .company-section__item-text {
            width: 100%;
        }
    }
    .job-details-notes {
        font-size: 0.75rem;
    }
    .signOnBonus-detail {
        background: var(--color-gray);
        border-radius: 1rem;
        padding: 2.5rem 0.75rem 1rem;
        h5 {
            font-size: 0.875rem;
            padding: 0.3rem 1rem;
        }
    }
    .entry-btn {
        width: 100%;
        height: 74px;
        font-size: 1rem;
        margin: 3.5rem auto 0;
        span {
            &::before {
                width: 85px;
                height: 80px;
                bottom: 8px;
                right: 12px;
            }
        }
    }
}


/***************** newgrad *****************/
.recruitTop-newgrad-title-img::before {
    background: url(../img/title_newgrad.webp)no-repeat;
    background-size: contain;
}
.newgrad-wrapper {
    #job-details{
        margin-top: 7.5rem;
    }
    .entry-btn span{
        text-align: center;
        line-height: 130%;
    }
}
.hiring-universities-inner {
    font-size: 1rem;
    background: var(--color-gray);
    border-radius: 1rem;
    padding: 1.5rem;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .hiring-universities-inner {
        font-size: 0.875rem;
        padding: 1rem;
    }  
}