@charset "UTF-8";

.stick-regular {
    font-family: "Stick", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kiwi-maru-regular {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
}

.kaisei-harunoumi-regular {
    font-family: "Kaisei HarunoUmi", serif;
    font-weight: 400;
    font-style: normal;
}

.oswald {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.teko {
    font-family: "Teko", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 400;
    font-style: normal;
}

/* アニメーション *****************************************************/
@keyframes shake {
    0% {
        transform: translate(0);
    }

    30% {
        transform: translate(10px);
    }

    60% {
        transform: translate(-8px);
    }

    90% {
        transform: translate(3px);
    }


    100% {
        transform: translate(0);
    }
}

@keyframes zoom {
    50% {
        transform: scale(1.05);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(200%);
    }

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


/* トップ画面 *********************************************************/
.top_img {
    position: relative;
    display: block;
}

.top_img img {
    display: block;
    width: 100%;
    height: auto;
}


.message {
    font-family: 'M PLUS Rounded 1c';
    position: absolute;
    top: 15vw;
    right: 3vw;
    color: rgb(0, 0, 0);
    padding: 5px;
}

.message2 {
    font-size: 14px;
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    color: rgb(93, 93, 93);
    padding: 5px;
}

.top_img .recruit_btn {
    position: absolute;
    bottom: 10%;
    right: 15%;
    color: white;
    padding: 1vw;
}

/* 企業理念メッセージ */
.message {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-size: 2vw;
}

/* リクルートボタン */
.recruit_btn {
    cursor: pointer;
    width: 10vw;
    height: 10vw;
    background: #ff943d;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px rgba(255, 98, 0, 0.6);
    text-align: center;
}

.recruit_btn:hover {
    animation: zoom .3s;
}

.rec_1 {
    font-size: 1vw;
}

.rec_2 {
    font-size: 2vw;
}

.rec_arrow {
    font-family: serif;
    font-size: 2vw;
    font-weight: bolder;
}


/* お知らせバー *********************************************************/
.pickup_news {
    display: block;
    margin: 10%;
    margin-top: 3vw;
    padding: 0.6vw;
    background: rgb(255, 255, 255);
    box-shadow: 3px 3px 10px 0px rgba(20, 89, 136, 0.3);
    border-radius: 2vw;
    background: linear-gradient(to right, rgb(0, 115, 191) 9vw, white 5vw);
    text-decoration: none;
}

.pickup_news:hover {
    animation: shake .5s ease;
}

.pickup_pic {
    width: 20px;
    height: auto;
}

.pickup_txt {
    display: flex;
    align-items: center;
}

.pickup_tag {
    width: 130px;
    color: rgb(255, 255, 255);
    display: flex;
    text-align: center;
    align-items: center;
}

.tag_pic {
    width: 30px;
}

.pickup_date {
    font-size: 90%;
    color: rgb(119, 136, 153);
    margin-left: 4vw;
}

.pickup_val {
    font-size: 90%;
    margin-left: 20px;
    color: rgb(0, 0, 0);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.pickup_title {
    white-space: nowrap;
    display: inline-block;
}

.pickup_arrow {
    font-family: serif;
    color: rgb(0, 115, 191);
    font-weight: bolder;
    margin-left: auto;
    margin-right: 20px;
}



/* 採用情報の項目 *********************************************************/
/* 採用情報リンクのリスト */
.recruit_content {
    display: flex;
    align-items: top;
}

.content1 {
    width: 45%;
}

.content2 {
    margin-top: 5%;
    width: 32%;
}

.con2_img {
    width: 95%;
    height: auto;
}

.content3 {
    margin-top: 5%;
    width: 23%;
}

/* リスト部分 */
.recruit_link {
    color: rgb(119, 136, 153);
    list-style: none;
    border-top: 1px solid #84b2e0;
    margin: 1vw;
    padding: 0px;
}

.reclink_list {
    border-bottom: 1px solid #84b2e0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reclink_list a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec_li_arrow {
    margin-left: auto;
    width: 2.4vw;
    height: 2.4vw;
    cursor: pointer;
}


.rec_li_arrow:hover {
    animation: zoom .3s;
}

.rec_li_arrow2 {
    font-size: 1.5vw;
    border: 1px solid rgb(162, 162, 162);
    font-weight: bolder;
    margin-left: auto;
    border-radius: 50%;
    width: 2.4vw;
    height: 2.4vw;
    text-align: center;
    color: rgb(162, 162, 162);
    font-family: serif;
}


/* カレンダー */
.cal_top_txt {
    font-size: 20px;
    border-bottom: 1px solid #84b2e0;
}

.calendar_wrapper {
    color: #666;
    height: auto;
    width: 100%;
}

/*カレンダー*/
#calendar {
    text-align: center;
}

table {
    outline: 1px solid rgb(0, 115, 191);
    border-radius: 3px;
    border-collapse: collapse;
    width: 70%;
    height: 10vw;
    margin-left: 15%;
    aspect-ratio: 1/1;
}

th {
    color: #000;
}

th,
td {
    border-radius: 3px;
    padding: 1%;
    text-align: center;
}

/*日曜日*/
td:first-child {
    color: rgb(255, 30, 30);
}

/*土曜日*/
td:last-child {
    color: rgb(0, 115, 191);
}

/*前後月の日付*/
td.disabled {
    color: #ccc;
}

/*本日*/
td.today {
    outline: 0.2vw solid #757c88;
}

td.goudou {
    color: #fff;
    background-color: #ff943d;
}

td.jisya {
    color: #fff;
    background-color: #7cc4ff;
}

/*ボタン*/
#calendar_header {
    text-align: center;
    font-size: 80%;
    width: 60%;
}

#next-prev-button {
    display: flex;
    align-items: center;
    width: 70%;
    margin: 2%;
    margin-top: 20px;
    margin-left: 15%;
}

#next-prev-button button {
    cursor: pointer;
    background: #ffffff;
    color: rgb(0, 115, 191);
    border: 1px solid rgb(0, 115, 191);
    border-radius: 5px;
    margin: 2px;
    text-align: center;
}

#next-prev-button button:hover {
    background-color: rgb(0, 115, 191);
    color: rgb(255, 255, 255);
    animation: zoom .3s;
}

#prev {
    padding: 3px;
    width: 20%;
}

#next {
    padding: 3px;
    width: 20%;
}

/* カレンダーのマーク説明 */
.cal {
    margin-top: 20px;
    margin-left: 10px;
    font-size: 15px;
    height: 20%;
}

.cal_info {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.cal_square0 {
    color: #757c88;
    font-weight: 900;
}

.cal_square1 {
    color: #ff943d;
}

.cal_square2 {
    color: #7cc4ff;
}

/* 業務内容・会社情報 *********************************************************/
.block_item {
    display: flex;
    align-items: center;
    margin-bottom: 5%;
}

.b_item_1 {
    background-image: linear-gradient(rgb(223, 232, 241), rgb(223, 232, 241));
    background-size: 90% 85%;
    background-position: right bottom 1vw;
    background-repeat: no-repeat;
}

.b_item_2 {
    background-image: linear-gradient(rgb(223, 232, 241), rgb(223, 232, 241));
    background-size: 90% 85%;
    background-position: left top 1vw;
    background-repeat: no-repeat;
}

.block_pic {
    width: 40%;
}

.block_val {
    width: 60%;
}

.pic1 {
    margin: 1%;
    margin-bottom: 40px;
    height: auto;
}

.pic2 {
    margin: 1%;
    margin-top: 40px;
    height: auto;
}

.subti_block {
    margin: 25px;
    margin-top: 80px;
    display: flex;
    align-items: center;
}

.subti_1 {
    margin-left: 15px;
    color: rgb(0, 115, 191);
    font-size: 80%;
}

.subti_2 {
    margin: 25px;
    font-size: 150%;
}

.block_txt {
    margin: 25px;
    margin-top: 30px;
    font-size: 90%;
    color: rgb(50, 70, 90);
}

.block_val a {
    margin: 2vw;
    margin-top: 3vw;
    width: 30%;
}

.readmore_btn {
    margin-left: 1.5vw;
    color: rgb(255, 255, 255);
    background: rgb(0, 115, 191);
    border-radius: 2vw;
    width: 15vw;
    transition: transform 0.5s;
}

.readmore_btn a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1vw;
    text-align: center;
    line-height: 2vw;
    text-decoration: none;
    color: #fff;
}

.readmore_btn:hover {
    transform: translateX(20px);
}

@media (max-width: 768px) {

    /* 企業理念メッセージ */
    .message {
        text-shadow: 0px 0px 10px rgb(0, 0, 0), 0px 0px 5px rgb(0, 0, 0);
        font-size: 18px;
        color: #fff;;
    }
    .message2 {
        font-size: 14px;
    }

    /* リクルートボタン ******************************************************************/
    /* .rec_1 と .rec_arrow を非表示 */
    .recruit_btn .rec_1,
    .recruit_btn .rec_arrow {
        display: none;
    }

    /* .rec_2 を中央に配置 */
    .recruit_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12vw;
        height: 12vw;
    }

    .rec_2 {
        font-size: 2.2vw;
    }

    /* お知らせバー ******************************************************************/
    .pickup_news {
        display: block;
        margin: 5%;
        margin-top: 3vw;
        padding: 0.6vw;
        background: rgb(255, 255, 255);
        box-shadow: 3px 3px 10px 0px rgba(20, 89, 136, 0.3);
        border-radius: 2vw;
        background: linear-gradient(to right, rgb(0, 115, 191)50px, white 5px);
        text-decoration: none;
        overflow: hidden;
        height: 50px;
    }

    .tag_txt {
        display: none;
    }

    .pickup_news:hover {
        animation: shake .5s ease;
    }

    .pickup_pic {
        width: 6vw;
        height: auto;
    }

    .pickup_txt {
        display: flex;
        align-items: center;
    }

    .pickup_tag {
        color: rgb(255, 255, 255);
        display: flex;
        text-align: center;
        align-items: center;
    }

    .tag_pic {
        width: 40px;
        height: auto;
    }

    .pickup_date {
        font-size: 16px;
        color: rgb(119, 136, 153);
        margin-left: 1%;
    }

    .pickup_val {
        font-size: 18px;
        margin-left: 2vw;
        margin-right: 2vw;
        color: rgb(0, 0, 0);
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
        width: 100%;
        position: relative;
    }

    .pickup_arrow {
        font-family: serif;
        color: rgb(0, 115, 191);
        font-weight: bolder;
        margin-left: auto;
        margin-right: 1%;
    }

    .pickup_title {
        font-size: 18px;
        animation: marquee 20s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }

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

    /* Recruit ******************************************************************/
    .recruit_content {
        display: block;
    }

    .content1 {
        width: 80%;
        margin-left: 10%;
    }

    .content2 {
        margin-top: 5%;
        width: 80%;
        margin-left: 10%;
    }

    .con2_img {
        width: 95%;
        height: auto;
    }

    .content3 {
        margin-top: 5%;
        width: 90%;
        margin-left: 5%;
    }

    /* リスト部分 */
    .rec_li_arrow {
        margin-left: auto;
        width: 4vw;
        height: 4vw;
        text-align: center;
        cursor: pointer;
    }

    .rec_li_arrow:hover {
        animation: zoom .3s;
    }

    .rec_li_arrow2 {
        font-size: 1.5vw;
        border: 1px solid rgb(162, 162, 162);
        font-weight: bolder;
        margin-left: auto;
        border-radius: 50%;
        width: 2.4vw;
        height: 2.4vw;
        text-align: center;
        color: rgb(162, 162, 162);
        font-family: serif;
    }


    /* カレンダー */
    .cal_top_txt {
        font-size: 20px;
        border-bottom: 1px solid #84b2e0;
    }

    .calendar_wrapper {
        color: #666;
        height: auto;
        width: 100%;
    }

    /*ボタン*/
    #calendar_header {
        text-align: center;
        font-size: 80%;
        width: 60%;
    }

    #next-prev-button {
        display: flex;
        align-items: center;
        width: 70%;
        margin: 2%;
        margin-top: 20px;
        margin-left: 15%;
    }

    #next-prev-button button {
        cursor: pointer;
        background: #ffffff;
        color: rgb(0, 115, 191);
        border: 1px solid rgb(0, 115, 191);
        border-radius: 5px;
        margin: 2px;
        text-align: center;
    }

    #prev {
        padding: 0.2vw;
        width: 20%;
        font-size: 5vw;
    }

    #next {
        padding: 0.2vw;
        width: 20%;
        font-size: 5vw;
    }

    /* カレンダーのマーク説明 */
    .cal {
        margin-top: 20px;
        margin-left: 0px;
        font-size: 15px;
        height: 20%;
    }

    .b_item_1 {
        background-image: linear-gradient(rgb(223, 232, 241), rgb(223, 232, 241));
        background-size: 90% 90%;
        background-position: right bottom 1vw;
        background-repeat: no-repeat;
    }

    .b_item_2 {
        background-image: linear-gradient(rgb(223, 232, 241), rgb(223, 232, 241));
        background-size: 90% 90%;
        background-position: left top 5vw;
        background-repeat: no-repeat;
    }

    .readmore_btn {
        margin-left: 1.5vw;
        border-radius: 2vw;
        width: 40vw;
    }

    .readmore_btn a {
        line-height: 4vw;
    }

    .pic1 {
        margin: 1%;
        margin-bottom: 40px;
        height: auto;
    }

    .pic2 {
        margin: 1%;
        margin-top: 20px;
        height: auto;
    }

    .subti_block {
        margin: 10px;
        margin-top: 50px;
        display: flex;
        align-items: center;
    }

    .subti_1 {
        margin-left: 15px;
        color: rgb(0, 115, 191);
    }

    .subti_2 {
        margin: 10px;
        margin-left: 20px;
        font-size: 150%;
    }

    .block_txt {
        margin: 25px;
        margin-top: 30px;
        color: rgb(50, 70, 90);
    }
}