@charset "utf-8";
body {
    background: var(--color-background);
}
/*--------------------------------------

アイキャッチ

---------------------------------------*/
/*--------------------------------------

アイキャッチ

---------------------------------------*/
#eyecatch {
    position: relative;
    width: 100%;
    height: 0;
    margin: 120px 0 0 0;
    /* (画像の高さ ÷ 画像の横幅) × 100 */
    padding-top: 44.1666667%;
    background: url("../images/recruit/eyecatch.webp") no-repeat center center/cover;
    animation-name:fadeInAnime;
    animation-duration:1.8s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeInAnime{
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
#eyecatch h2 {
    position: absolute;
    top: 36%;
    left: 32%;
    line-height: 168%;
    color: var(--color-accent);
    font-family: var(--font-poppins);
    font-size: clamp(60px, 10vw, 240px);
    text-align: left;
    line-height: 1;
    opacity: .8;
}
#eyecatch h2 span {
    display: block;
    margin: 0 0 0 2%;
    color: var(--color-main);
    font-family: var(--font-noto-sans-jp);
    font-size: clamp(13px, 1.25vw, 24px);
    opacity: 1;
}
/* タブ表示 */
@media screen and (max-width: 1024px) {
    #eyecatch {
        margin: 80px 0 0 0;
    }
}
/* スマホ表示 */
@media screen and (max-width: 599px) {
    #eyecatch {
        padding-top: 83.0769231%;
        background-image: url("../images/index/eyacatch_SP.webp");
    }
    #eyecatch h2 {
        top: 37%;
        left: 20%;
        font-size: clamp(40px, 16.5vw, 99px);
    }
    #eyecatch h2 span {
        font-size: clamp(10px, 2.3vw, 14px);
    }
}
/*--------------------------------------

社員の声

---------------------------------------*/
#interview {
    margin: 100px 0 0 0;
    background: var(--color-background);
    padding: 68px 40px 108px;
}
#interview .interview_list li {
    display: flex;
    margin: 100px 0 0;
}
#interview .staff_img {
    border-radius: 50%;
}
#interview .staff_position,
#interview .staff_name {
    display: block;
    text-align: center;
}
#interview .staff_position {
    margin: 16px 0 0;
    color: #808080;
    font-size: 12px;
}
#interview .staff_name {
    margin: 4px 0 0;
}
#interview .text_box {
    width: 700px;
    height: auto;
    line-height: 1.8;
    margin: 8px 0 0 48px;
}
#interview .interview_title {
    display: block;
    font-size: 20px;
}
#interview .interview_text {
    margin: 20px 0 0 0;
    font-weight: 400;
}
/* スマホ表示 */
@media screen and (max-width: 599px) {
    #interview .interview_list li {
        display: block;
        margin: 80px 0 0;
        text-align: center;
    }
    #interview .text_box {
        width: auto;
        line-height: 1.8;
        margin: 8px 0 0;
        text-align: left;
    }
}
/*--------------------------------------

募集要項

---------------------------------------*/
#job_vacancies {
    background: var(--color-accent);
}
#job_vacancies .c--title,
#job_vacancies .c--title span {
    color: var(--color-main);
}
#job_vacancies .btn_white {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.6;
    margin: 24px auto 0;
    padding: 36px 56px;
}
#job_vacancies .btn_white:first-of-type {
    margin-top: 60px;
}
/* 現在募集していないため薄く表示 */
#job_vacancies .g_designer {
    opacity: .5;
    pointer-events: none;
}
#job_vacancies .btn_title,
#job_vacancies .btn_sub {
    display: block;
}
#job_vacancies .btn_sub {
    color: #57AAB2;
    font-family: var(--font-poppins);
}
#job_vacancies .btn_title {
    font-size: 20px;
}
#job_vacancies .btn_arrow {
    display: block;
    width: 28px;
    height: 28px;
}
/* スマホ表示 */
@media screen and (max-width: 599px) {
    #job_vacancies .btn_white {
        padding: 24px 36px;
    }
    #job_vacancies .btn_title {
        font-size: 16px;
    }
    #job_vacancies .btn_sub {
        font-size: 11px;
    }
    #job_vacancies .btn_arrow {
        width: 20px;
        height: 20px;
    }
}