@charset "utf-8";

.vision_area {
    margin: 50px 20px;
}


.text_areaw500 h2 {

    width: fit-content;
    margin: 0 auto;
    position: relative;
    text-align: center;

}

.text_areaw500 p {
    margin-top: 40px;
}

.vision_area .text_areaw500 h2::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("../../img/logo/asirai_maru.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: -8px;
    right: -17px;
}

.vision_area .text_areaw500 h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background-color: #4C9153;
    margin: 10px auto 0;
}

.vision_area .img_area {
    margin-top: 20px;
}


.strong_area {
    margin: 50px auto 50px 20px;
}

.strong_area h2 {

    width: fit-content;
    margin: 0 auto 0 0;
    position: relative;
    text-align: left;

}

.strong_area h2::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("../../img/logo/asirai_maru.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: -8px;
    left: -17px;
}

.strong_area h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: #4C9153;
    margin: 10px auto 0 0;
}

.text_area_w250 {
    width: 250px;
}

.text_area_w250 p {
    margin-top: 20px;
}

.strong_img {
    position: relative;
    width: min(70vw, 320px);
    aspect-ratio: 250 / 360;
    margin: 40px auto 0 0;
}

.strong_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.strong_br3px_img01 {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 35%;
    width: 75%;
    aspect-ratio: 165 / 230;
    border-radius: 3px;
    overflow: hidden;
}

.strong_br3px_img02 {
    position: absolute;

    top: 0;
    left: 0;
    width: 80%;
    aspect-ratio: 155 / 95;
    border-radius: 3px;
    overflow: hidden;
}


.shiru_area {
    margin: 100px 0 50px 0;
}

.shiru_area h2 {
    width: fit-content;
    margin: 0 auto 0 0;
    position: relative;
    text-align: left;
}

.shiru_area h2::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("../../img/logo/asirai_maru.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: -8px;
    right: -17px;
}

.shiru_area h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: #4C9153;
    margin: 10px auto 0 0;
}

.text_area_w250_right {
    width: 250px;
    margin: 0 20px 0 auto;
}

.text_area_w250_right p {
    margin-top: 20px;
}

.shiru_img {
    margin-top: 40px;
}

.shiru_wide_img {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.shiru_wide_img::before {
    content: "";
    display: block;
    padding-top: 25%;
}

.shiru_slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0;
    animation: shiruFade 12s infinite;
}

.shiru_slide:nth-child(1) {
    animation-delay: 0s;
}

.shiru_slide:nth-child(2) {
    animation-delay: 4s;
}

.shiru_slide:nth-child(3) {
    animation-delay: 8s;
}

@keyframes shiruFade {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    41% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.shiru_area .more_btn {
    margin: 40px 20px 0 auto;
}


/* <=========先輩インタビュー==========> */
.recruit_area {
    margin: 50px 20px;

}

.recruit_area h2 {
    width: fit-content;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.recruit_area h2::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("../img/logo/asirai_maru.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: -8px;
    right: -17px;
}

.recruit_area h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background-color: #4C9153;
    margin: 10px auto 0 auto;
}

.interview_01 h3,
.interview_02 h3 {
    font-size: 18px;
    color: #2A1105;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
}

.interview_01 {
    margin-top: 40px;
    background-image: url(../../img/logo/bc_green.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: min(86vw, 325px);
    margin: 20px auto 0 auto;
    padding: 20px 20px;
    border-radius: 20px;
}

.interview_01 h3 {
    margin-top: 30px;
}

.small_word {
    text-align: right;
    font-size: 14px;
}

.interview_01 p {
    margin-top: 15px;
}

.br3pximg {
    width: 53.8%;
    aspect-ratio: 175 / 200;
    margin: 0 auto;
}

.br3pximg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.interview_02 {
    margin-top: 40px;
    background-image: url(../../img/logo/bc_green.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    width: min(86vw, 325px);
    margin: 20px auto 0 auto;
    padding: 20px 20px;
    border-radius: 20px;
}

.interview_02 h3 {
    margin-top: 30px;
}

.small_word {
    text-align: right;
    font-size: 14px;
}

.interview_02 p {
    margin-top: 15px;
}

.br3pximg {
    width: 53.8%;
    aspect-ratio: 175 / 200;
    margin: 0 auto;
}

.br3pximg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entry_area {
    margin: 50px 20px;
}

.entry_area h2 {
    width: fit-content;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.entry_area h2::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("../img/logo/asirai_maru.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    top: -8px;
    left: -17px;
}

.entry_area h2::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background-color: #FCB238;
    margin: 10px auto 0 auto;
}

.entry_area .text_area_w250 {
    width: 250px;
    margin: 0 auto;
}

.entry_area h2 {
    width: fit-content;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.entry_area .text_area_w250 p {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    text-align: left;
}

.entry_area .entry_button {
    margin-top: 20px;
    text-align: center;
}

.entry_area .btnarrow5 {
    display: block;
    margin: 0 auto;
}


/* <=========エントリー==========> */

/* =========================
   フェードイン共通
========================= */

.fade_item {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.fade_up {
    transform: translateY(30px);
}

.fade_left {
    transform: translateX(-40px);
}

.fade_right {
    transform: translateX(40px);
}

.fade_item.show {
    opacity: 1;
    transform: translate(0, 0);
}

.fade_delay01 {
    transition-delay: 0.2s;
}


/* <=========pc版==========> */
@media(min-width:768px) {


    .vision_area {
        margin: 100px 40px 100px 40px;
        display: flex;
        align-items: center;
        gap: 60px
    }

    .vision_area .text_areaw500 h2::before {

        width: 50px;
        height: 50px;

    }

    .text_areaw500 h2 {


        margin: 0 auto 0 0;
        position: relative;
        text-align: left;

    }

    .text_areaw500 p {
        width: 550px;
        margin-top: 60px;
    }

    .text_areaw500 h2::before {

        top: 0;
        right: -10px;
    }

    .vision_area .text_areaw500 h2::after {
        margin: 10px 0 auto 0;
    }

    .vision_area .img_area {
        margin-top: 0;
    }



    /* <=========pc vision==========> */

    .strong_area {
        margin: 300px 40px 100px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: flex-end;
        gap: 30%;
    }

    .strong_area h2::before {
        width: 50px;
        height: 50px;

    }

    .text_area_w250 {
        width: 400px;
        margin: 0;
    }

    .text_area_w250 p {
        margin-top: 60px;
    }

    .strong_img {
        margin: 0;
        transform: translateY(-150px);
    }


    .strong_br3px_img01 {
        position: absolute;
        z-index: 10;
        right: -20%;
        top: 45%;
        width: 100%;
        aspect-ratio: 450 / 600;
        border-radius: 3px;
        overflow: hidden;
    }

    .strong_br3px_img02 {
        position: absolute;

        top: 0;
        left: 0;
        width: 90%;
        aspect-ratio: 270 / 180;
        border-radius: 3px;
        overflow: hidden;
    }

    .strong_area h2::after {
        width: 200px;
    }


    /* <=========強み==========> */

    /* <=========仕事を知る==========> */


    .shiru_area {
        margin: 300px 40px 100px 40px;
    }




    .shiru_area h2::before {

        width: 50px;
        height: 50px;

    }

    .shiru_area h2::after {
        content: "";
        display: block;
        width: 100px;
        height: 1px;
        background-color: #4C9153;
        margin: 10px auto 0 0;
    }

    .text_area_w250_right {
        width: 550px;
        margin: 0 auto 0 40px;
    }

    .text_area_w250_right p {
        margin-top: 60px;
    }

    .shiru_img {
        margin-top: 100px;
    }

    .shiru_area .more_btn {
        margin: 40px auto 0 0;
    }

    /* <=========仕事を知る==========> */



    /* <=========先輩インタビュー==========> */
    .recruit_area {
        margin: 100px 40px;
    }




    .recruit_area h2::before {

        top: 10px;
        right: -17px;
    }

    .recruit_area h2::after {

        width: 400px;

    }

    .interview_01 {
        margin-top: 110px;

        width: 90%;
        margin: 90px auto 0 auto;
        padding: 20px 20px;
        border-radius: 20px;
        display: flex;
        align-items: center;
    }

    .interview_textarea {
        width: 500px;
        padding: 20px;
    }

    .interview_01 h3 {
        margin-top: 100px;
    }

    .small_word {
        text-align: right;
        font-size: 14px;
    }

    .interview_textarea p {
        margin-top: 30px;
    }

    .br3pximg {
        width: 53.8%;
        aspect-ratio: 175 / 200;
        margin: 0 auto;
    }

    .br3pximg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    .interview_02 {
        margin-top: 110px;

        width: 90%;
        margin: 60px auto 0 auto;
        padding: 20px 20px;
        border-radius: 20px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .interview_02 h3 {
        margin-top: 30px;
    }

    .small_word {
        text-align: right;
        font-size: 14px;
    }



    .br3pximg {
        width: 53.8%;
        aspect-ratio: 175 / 200;
        margin: 0 auto;
    }

    .br3pximg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .interview_01 h3,
    .interview_02 h3 {
        font-size: 24px;
    }

    /* <=========先輩インタビュー==========> */

    /* <=========エントリー==========> */

    .entry_area {
        margin: 100px auto 200px;
        padding: 0 40px;



    }

    .entry_area_inner {
        width: 85%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .entry_area h2 {
        width: fit-content;
        margin: 0 auto;
        position: relative;
        text-align: left;
    }

    .entry_area h2::before {
        content: "";
        position: absolute;
        width: 32px;
        height: 32px;
        background-image: url("../img/logo/asirai_maru.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

        top: -8px;
        left: -17px;
    }

    .entry_area h2::after {
        content: "";
        display: block;
        width: 200px;
        height: 1px;
        background-color: #FCB238;
        margin: 10px auto 0 auto;
    }

    .entry_area .text_area_w250 {
        width: 400px;
    }


    .entry_area .text_area_w250 p {
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500;
    }

    .entry_area .entry_button {
        margin-top: 0;
        text-align: center;
    }

    .entry_area .btnarrow5 {
        display: block;
        margin: 0 auto;
    }

    /* <=========エントリー==========> */
}