/**
 * 採用TOPページ専用スタイル
 * page-recruit.php で使用
 */

/* メインビジュアル */
.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: auto;
    display: block;
}

/* CTAセクション */
.cta-section {
    margin-top: 2.2395833333333335vw;
}

.cta-text {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    color: #625C8A;
    font-size: 1.25vw;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 2.75vw;
    text-shadow: 0.20833333333333334vw 0.3645833333333333vw 0.3125vw #00000029;
}

.cta-text::before,
.cta-text::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0.26041666666666663vw;
    height: 80%;
    border-radius: 10px;
    background-color: #625C8A;
}

.cta-text::before {
    left: -2vw;
    transform: rotate(-25deg);
}

.cta-text::after {
    right: -2vw;
    transform: rotate(25deg);
}

.cta-text-em {
    color: #E70339;
}

.cta-text--num {
    font-size: 3.75vw;
}

.cta-text--18 {
    font-size: 0.9375vw;
}

.cta-text--31 {
    font-size: 1.6145833333333335vw;
}

.cta-text--40 {
    font-size: 2.083333333333333vw;
}

.cta-buttons {
    margin-top: 1.1979166666666667vw;
}

/* キャリア教育セクション */
.career-education-section {
    margin-top: 6.770833333333333vw;
}

.career-title {
    position: relative;
    margin: 0 auto;
    width: 73.95833333333334vw;
    padding: 4.375vw 0 4.375vw 7.708333333333334vw;
    color: #625C8A;
    font-size: 3.854166666666667vw;
    line-height: 1;
    background-color: var(--color-white);
    box-shadow: 0.3645833333333333vw 0.6770833333333334vw 0.7291666666666666vw #00000029;
    border-radius: 1.9791666666666665vw;
    overflow: hidden;
}

.career-title::before {
    content: "";
    position: absolute;
    top: 0;
    right: 6.625vw;
    width: 12.603645833333335vw;
    height: 100%;
    background: linear-gradient(to left, #FFFFFF0A 0%, #FFFFFF99 50%, #FFFFFFFF 75%);
    z-index: 1;
}

.career-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: -0.7291666666666666vw;
    width: 18.160416666666666vw;
    height: 12.862500000000002vw;
    background-image: url("../../assets/images/banner_recruit.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.career-title--small {
    font-size: 2.083333333333333vw;
}

.career-title img {
    width: 19.418229166666663vw;
}

/* 先輩社員インタビューセクション */
.interview-section {
    margin-top: 7.578124999999999vw;
}

.title-wrap {
    display: flex;
    justify-content: end;
    margin: 0 auto;
}

.interview-title {
    width: 31.041666666666668vw;
    margin-right: 9.322916666666666vw;
    padding: 1.6666666666666667vw 4.192708333333333vw 1.1979166666666667vw;
    border-radius: 1.9791666666666665vw 1.9791666666666665vw 0 0;
    background-color: var(--color-white);
    color: #625C8A;
    font-size: 2.083333333333333vw;
    font-weight: normal;
    text-align: center;
}

.interview-grid-wrap {
    display: flex;
    padding: 3.9843749999999996vw 0;
    background-color: var(--color-white);
}

.interview-grid {
    position: relative;
    display: flex;
    justify-content: center;
    width: calc((6 * 45.989583333333336vw) + (6 * 4.166666666666666vw));
    background-color: var(--color-white);
}

.interview-grid:nth-of-type(1) {
    left: 0;
    transform: translateX(calc(4.166666666666666vw / 2));
}

.interview-grid:nth-of-type(2) {
    left: 0;
    margin-top: 2.083333333333333vw;
    transform: translateX(-58%);
}

.interview-card {
    padding: 1.0416666666666665vw 5.833333333333333vw 1.0416666666666665vw 3.6458333333333335vw;
    border-radius: 1.9791666666666665vw;
    background-color: #F6F7EA;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #625C8A;
    font-size: max(1.0416666666666665vw, 1rem);
}

.interview-grid:nth-of-type(1) .interview-card {
    width: 45.989583333333336vw;
    margin-right: 4.166666666666666vw;
    gap: 4.375vw;
}

.interview-grid:nth-of-type(2) .interview-card {
    width: 36.19791666666667vw;
    margin-right: calc((300.9375vw - 6 * 36.19791666666667vw) / 6);
    gap: 3.0208333333333335vw;
}

.interview-text {
    width: 20.260416666666668vw;
}

.interview-interviewee {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4166666666666667vw;
}

.interview-image {
    width: 11.875vw;
}

.interview-meta {
    text-align: center;
}

.interview-button-wrap {
    width: 100%;
    margin-top: 1.7187500000000002vw;
    text-align: end;
}

.interview-button {
    position: relative;
    width: 13.541666666666666vw;
    margin-right: 12.968750000000002vw;
    padding: 0.5208333333333333vw 0;
    padding-left: 2.1354166666666665vw;
    background-color: #625C8B;
    border: 0.052083333333333336px solid #707070;
    border-radius: 2.34375vw;
    font-size: 1.25vw;
    color: #E4E4E4;
    text-align: left;
}

.interview-button::before,
.interview-button::after {
    content: "";
    position: absolute;
    right: 1.566667vw;
    width: 1vw;
    height: 0.15625vw;
    background-color: var(--color-white);
    border-radius: 50px;
}

.interview-button::before {
    transform: translateY(-50%) rotate(45deg);
    top: 36%;
}
.interview-button::after {
    transform: translate(0, -50%) rotate(-45deg);
    bottom: 36%;
}

/* フォトギャラリーセクション */
.photo-gallery-section {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 107.5vw;
    margin-top: 11.140625vw;
    overflow: hidden;
}

.photo-gallery-section::after {
    content: "";
    position: absolute;
    bottom: -14.84375vw;
    left: 50%;
    transform: translateX(-50%);
    width: 116.45833333333333vw;
    height: 20.78125vw;
    border-radius:50%;
    background-color: #F6F7EA;
}

.photo-gallery {
    display: flex;
    gap: 1.0416666666666665vw;
}

/* SNSセクション */
.sns-section {
    margin-top: 9.895833333333332vw;
}

.sns-section .title-wrap {
    width: 89.375vw;
}

.sns-title {
    width: 31.041666666666668vw;
    padding: 1.6666666666666667vw 4.192708333333333vw 1.1979166666666667vw;
    border-radius: 1.9791666666666665vw 1.9791666666666665vw 0 0;
    background-color: var(--color-white);
    color: #625C8A;
    font-size: 2.083333333333333vw;
    font-weight: normal;
    text-align: center;
}

.sns-icons-wrap {
    display: flex;
    gap: 9.84375vw;
    width: 89.375vw;
    margin: 0 auto;
    padding: 8.854166666666668vw 0;
    padding-left: 10.78125vw;
    border-radius: 1.9791666666666665vw 0 1.9791666666666665vw 1.9791666666666665vw;
    background-color: var(--color-white);
}

.sns-text {
    font-size: 2.083333333333333vw;
    color: #625C8A;
}

.sns-icons {
    display: flex;
    gap: 7.552083333333333vw;
}

.sns-icon {
    width: 6.145833333333333vw;
    height: auto;
}

/* アニメーション */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroll-infinity__list--left {
  animation: infinity-scroll-left 32s infinite linear 0.5s both;
}

/* sp */
@media screen and (max-width: 768px) {
    /* CTAセクション */
    .cta-section {
        margin-top: 20px;
    }
    
    .cta-text {
        font-size: 12px;
        line-height: 30px;
    }

    .cta-text::before,
    .cta-text::after {
        height: 70%;
    }
    
    .cta-text::before {
        left: -3vw;
        transform: rotate(-16deg);
    }
    
    .cta-text::after {
        right: -3vw;
        transform: rotate(16deg);
    }
    
    .cta-text--num {
        font-size: 40px;
    }
    
    .cta-text--18 {
        font-size: 13px;
    }
    
    .cta-text--31 {
        font-size: 18px;
    }
    
    .cta-text--40 {
        font-size: 18px;
    }
    
    .cta-buttons {
        margin-top: 8px;
    }

    /* キャリア教育セクション */
    .career-education-section {
        margin-top: 46px;
    }
    
    .career-title {
        width: 316px;
        font-size: 16px;
        padding: 18px 32px;
    }
    
    .career-title::after {
        width: 77.24px;
        height: 54.59px;
    }
    
    .career-title--small {
        font-size: 11px;
        padding-left: 2px;
    }
    
    .career-title img {
        width: 83px;
    }
    
    /* 先輩社員インタビューセクション */
    .interview-section {
        margin-top: 58px;
    }
    
    .interview-title {
        width: 177px;
        margin-right: 36px;
        padding: 9px 18px;
        border-radius: 16px 16px 0 0;
        font-size: 14px;
    }
    
    .interview-grid-wrap {
        padding: 46px 0;
    }
    
    .interview-grid {
        width: calc((6 * 93.3333vw) + (6 * 9.3333vw));
    }

    .interview-grid:nth-of-type(1) {
        transform: translateX(calc(-93.3333vw / 2 + 20vw));
    }

    .interview-grid:nth-of-type(2) {
        transform: translateX(calc(-93.3333vw + 30vw));
        margin-top: 32px;
    }

    .interview-card {
        padding: 12px 24px;
        border-radius: 16px;
        font-size: 12px;
    }

    .interview-grid:nth-of-type(1) .interview-card {
        width: 93.3333vw;
        margin-right: 9.3333vw;
    }

    .interview-grid:nth-of-type(2) .interview-card {
        width: 93.3333vw;
        margin-right: 9.3333vw;
    }

    .interview-text {
        width: initial;
        flex: 1;
    }
    
    .interview-interviewee {
        gap: 4px;
        font-size: 12px;
    }
    
    .interview-image {
        width: 24vw;
    }
    
    .interview-card:nth-of-type(n+3) {
        width: calc(33% - 14px);
    }
    
    .interview-card:nth-of-type(n+3) .interview-image {
        width: 24vw;
    }
    
    .interview-button-wrap {
        margin-top: 18px;
    }
    
    .interview-button {
        width: 135px;
        height: 32px;
        border: 1px solid #707070;
        border-radius: 45px;
        font-size: 14px;
        padding: 4px 0 4px 24px;
    }

    .interview-button::before,
    .interview-button::after {
        content: "";
        position: absolute;
        right: 14px;
        width: 9px;
        height: 1px;
        border-radius: 50px;
    }

    .interview-button::before {
        transform: translateY(-50%) rotate(45deg);
        top: 38%;
    }
    .interview-button::after {
        transform: translate(0, -50%) rotate(-45deg);
        bottom: 38%;
    }
    
    /* フォトギャラリーセクション */
    .photo-gallery-section {
        width: 111%;
        margin-top: 60px;
    }
    
    .photo-gallery-section::after {
        bottom: -20vw;
        width: 137vw;
        height: 24.5vw;
    }
    
    /* SNSセクション */
    .sns-section {
        margin-top: 60px;
    }
    
    .sns-section .title-wrap {
        width: 86%;
    }
    
    .sns-title {
        width: 177px;
        padding: 12px 73px;
        border-radius: 16px 16px 0 0;
        font-size: 14px;
    }
    
    .sns-icons-wrap {
        width: 86%;
        flex-direction: column;
        gap: 20px;
        padding: 40px;
        border-radius: 16px;
        border-top-right-radius: 0;
    }
    
    .sns-text {
        font-size: 22px;
        text-align: center;
    }
    
    .sns-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 32px;
    }
    
    .sns-icon {
        width: 80px;
        height: auto;
    }

/* アニメーション */
    .scroll-infinity__list--left {
    animation: infinity-scroll-left 60s infinite linear 0.5s both;
    }
}