@charset "utf-8";

/*============================
採用メッセージ
============================*/

#recruit_message img {
    margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {

    #recruit_message img {
        width: 100%;
        padding-top: 48%;
        height: 0;
        overflow: hidden;
        background: url(../images/message/01_sp.jpg) no-repeat left top;
        background-size: 100%;
        margin: 0 0 20px;
    }
}


/*============================
１日のスケジュール
============================*/

#schedule {
    width: 100%;
}

#schedule .inner {
    overflow: visible;
}

#schedule ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    padding: 20px 0;
    list-style: none;
}

#schedule ul li {
    position: relative;
    color: #FFF;
    background: #1058ad;
    padding: 25px 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-right: 1px;
    line-height: 1.5;
    height: 100px;
    display: table;
    box-sizing: border-box;
}

#schedule ul li span {
    display: table-cell;
    vertical-align: middle;
}

/* PC版の各幅設定 */
#schedule ul li.min {
    width: 121px;
}

#schedule ul li.large {
    width: 191px;
}

#schedule ul li.min_2 {
    width: 131px;
}

/* ==========================================
   パソコン表示 (元の配置に100%戻しました / transformなし)
   ========================================== */
#schedule ul li:not(.t5)::before,
#schedule ul li.t4::after,
#schedule ul li.t5::after {
    content: "0:00";
    letter-spacing: 0.1em;
    position: absolute;
    top: -22px;
    left: 0;
    color: #222222;
    font-size: 14px;
}

#schedule ul li.t1::before {
    content: "7:30〜8:00";
}

#schedule ul li.t2::before {
    content: "9:00";
}

#schedule ul li.t3::before {
    content: "12:00";
}

#schedule ul li.t4::before {
    content: "13:00";
}

#schedule ul li.t4::after {
    content: "16:00〜17:00";
    left: auto;
    right: 0;
}

#schedule ul li.t5::after {
    content: "17:30〜18:00";
    left: auto;
    right: 0;
}

@media only screen and (max-width: 768px) {

    #schedule ul {
        display: block;
        padding: 20px 0;
    }

    #schedule ul li.min,
    #schedule ul li.large,
    #schedule ul li.min_2 {
        width: 65% !important;
        margin-left: 35% !important;
    }

    #schedule ul li {
        display: block;
        padding: 20px 10px;
        font-size: 15px;
        height: auto;
        margin-right: 0;
        margin-bottom: 2px;
        /* ボックス同士の隙間 */
    }

    #schedule ul li span {
        display: block;
    }

    /* 時間（擬似要素）を左側30%のスペースにピッタリ右揃えで収める設定 */
    #schedule ul li:not(.t5)::before,
    #schedule ul li.t4::after,
    #schedule ul li.t5::after {
        top: 0;
        left: -53.8%;
        /* 70%のボックスに対して左側30%の位置に綺麗に合わせる計算値 */
        width: 50%;
        /* 時間の文字幅を確保 */
        right: auto;
        text-align: right;
        /* 時間の文字をボックスの左壁に近づける */
        font-size: 14px;
        white-space: normal;
    }

    /* スマホ版での終了時間の縦位置調整（各ボックスの下端に合わせる） */
    #schedule ul li.t4::after,
    #schedule ul li.t5::after {
        top: auto;
        bottom: 0;
    }
}

/*============================
社員インタビュー
============================*/

#interview .box {
    background: #f1f4f9;
}

#interview .box:not(:last-child) {
    margin-bottom: 40px;
}

#interview .text {
    width: 480px;
    padding: 30px;
}

#interview .text .flex {
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid #b9b9b9;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

#interview .text .flex img {
    width: 100px;
}

#interview .text .flex .prof .name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

#interview .text .flex .prof .name span {
    font-size: 13px;
    display: block;
}

#interview .text .flex .prof .name .history {
    font-size: 14px;
    margin-top: 10px;
}

#interview .text dt {
    font-size: 18px;
    font-weight: 700;
    color: #1058ad;
    margin-bottom: 10px;
}

#interview .text dd {
    font-size: 14px;
}

#interview .photo {
    width: 280px;
}

#interview .photo img {
    width: 100%;
}

@media only screen and (max-width: 768px) {

    #interview .box:not(:last-child) {
        margin-bottom: 20px;
    }

    #interview .text {
        width: 100%;
        padding: 20px;
    }

    #interview .photo {
        width: 100%;
        margin: 0 20px 20px;
    }

    #interview .box .photo img {
        background: url(../images/interview/1_2_sp.jpg)no-repeat center center;
        background-size: 100%;
        width: 100%;
        height: 0;
        padding-top: 100%;
    }

    #interview .box:first-child .photo img {
        background-image: url(../images/interview/1_2_sp.jpg);
    }

    #interview .box:last-child .photo img {
        background-image: url(../images/interview/2_2_sp.jpg);
    }

}


/*============================
未経験者へのフォロー体制
============================*/
#beginner .flex {
    gap: 30px;
}

#beginner .icon {
    width: 280px;
    background-color: #f1f4f9;
}

#beginner .icon img {
    width: 100%;
}

#beginner p {
    flex: 1;
}

@media only screen and (max-width: 768px) {

    #beginner .flex {
        gap: 20px;
    }

    #beginner .icon {
        width: 100%;
    }

    #beginner .icon img {
        max-width: 280px;
        margin: auto;
    }
}